File Manager

Viewing File: photo-gallery-alt.css

/*
 * PhotoSwipe - http://www.photoswipe.com/
 * Copyright (c) 2011 by Code Computerlove (http://www.codecomputerlove.com)
 * Licensed under the MIT license
 *
 * Default styles for SwipeGallery
 * Avoid any position or dimension based styles
 * where possible, unless specified already here.
 * The gallery automatically works out gallery item
 * positions etc.
 */

body.ps-active 
{
	-webkit-text-size-adjust: none;
	overflow: hidden;
}
body.ps-active * 
{ 
	-webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
}
body.ps-active *:focus 
{ 
	outline: 0; 
}


/* Document overlay */
div.ps-document-overlay 
{
	background: #000;
}


/* Viewport */
div.ps-viewport 
{
	background: #000;
	cursor: pointer;
}


/* Zoom/pan/rotate layer */
div.ps-zoom-pan-rotate{
	background: #000;
}


/* Slider */
div.ps-slider-item-loading 
{ 
	background: url(../loadinfo.gif) no-repeat center center; 
}

/* Caption */
div.ps-caption
{ 
	background: #000000;
	color: #ffffff;
	text-align: center;
}

div.ps-caption-bottom
{ 
	border-top: 1px solid #42403f;
	border-bottom: none;
}

div.ps-caption-content
{
	padding: 13px;
}


/* Toolbar */
div.ps-toolbar
{ 
	background: #000000;
	color: #ffffff;
	text-align: center;
	height: 44px;
	display: table;
	table-layout: fixed;
}

div.ps-toolbar-top 
{
	border-bottom: 1px solid #42403f;
	border-top: none;
}

div.ps-toolbar-close, div.ps-toolbar-previous, div.ps-toolbar-next, div.ps-toolbar-play
{
	cursor: pointer;
	display: table-cell;
}

div.ps-toolbar div div.ps-toolbar-content
{
	width: 44px;
	height: 44px;
	margin: 0 auto 0;
	background-image: url(../img/photoswipe-icons.png);
	background-repeat: no-repeat;
}

div.ps-toolbar-close div.ps-toolbar-content
{
	background-position: 0 0;
}

div.ps-toolbar-previous div.ps-toolbar-content
{
	background-position: -44px 0;
}

div.ps-toolbar-previous-disabled div.ps-toolbar-content
{
	background-position: -44px -44px;
}

div.ps-toolbar-next div.ps-toolbar-content
{
	background-position: -132px 0;
}

div.ps-toolbar-next-disabled div.ps-toolbar-content
{
	background-position: -132px -44px;
}

div.ps-toolbar-play div.ps-toolbar-content
{
	background-position: -88px 0;
}

div.gallery-item {
	margin-bottom: 15px;
}

div.gallery-item, div.gallery-item * {
	-webkit-transition: all 300ms;
	-moz-transition: all 300ms;
	transition: all 300ms;
}

div.gallery-item > a > img {
	width: 100%;
	border: 4px solid rgba(0,0,0,0.3);
}


div.gallery-item > a {
	position: relative;
	display: block;
}

div.gallery-item > a > span {
	position: absolute;
	top: 30px;
	width: calc(100% - 60px);
	height: calc(100% - 60px);
	background: rgba(255, 255, 255, 0.46);
	left: 30px;
	opacity: 0;
}

div.gallery-item > a > span i {
	font-size: 40px;
	color: rgba(0, 0, 0, 0.58);
	width: 38px;
	height: 40px;
	position: absolute;
	left: 50%;
	margin-left: -19px;
	top: 50%;
	margin-top: -23px;
}

div.gallery-item > a:hover span {
	opacity: 1;
}




/* Hi-res retina display */
@media only screen and (-webkit-min-device-pixel-ratio: 2)
{
	div.ps-toolbar div div.ps-toolbar-content
	{
		-webkit-background-size: 176px 88px;
		background-image: url(../img/photoswipe-icons@2x.png);
	}
}