GSYH/WebRoot/static/ace/css/less/gallery.less

.enable_image_gallery() when(@enable-image-gallery = true) {

//gallery
.ace-thumbnails {
  list-style: none;
  margin: 0;
  padding: 0;

  > li {
	float: left;
	display: block;
	position: relative;
	overflow: hidden;

	margin: 2px;
	border: 2px solid #333;
	
	> :first-child {
		display: block;
		position: relative;
		&:focus {
			outline: none;
		}
	}
	
	.tags {
		display: inline-block;
		position: absolute;
		bottom: 0;
		right: 0;
		//left: 0;
		overflow: visible;
 
		direction: rtl;
		
		//set these so that it's not confused with tags plugin
		padding: 0;
		margin: 0;
		height: auto;
		width: auto;
		background-color: transparent;
		border-width: 0;
		vertical-align: inherit;
		
		> .label-holder {
			.opacity(0.92);
			display: table;
			margin: 1px 0 0 0;

			direction: ltr;
			text-align: left;
			
			&:hover {
				.opacity(1);
			}
		}
	}


	> .tools {
		 position: absolute;
		 top: 0;
		 bottom: 0;
		 left: -30px;
		 width: 24px;
		 
		 background-color: rgba(0,0,0,0.55);

		 text-align: center; 
		 vertical-align: middle;
		 
		.transition(~"all 0.2s ease");
		

		&.tools-right {
			left: auto;
			right: -30px;
		}
		&.tools-bottom {
			width: auto;
			height: 28px;
			left: 0;
			right: 0;
			top: auto;
			bottom: -30px;
		}
		&.tools-top {
			width: auto;
			height: 28px;
			left: 0;
			right: 0;
			top: -30px;
			bottom: auto;
		}
	}
	
	&:hover > {
		> .tools { left: 0; right: 0; }
		> .tools.tools-bottom { top: auto; bottom: 0; }
		> .tools.tools-top { bottom: auto; top: 0; }
		> .tools.tools-right { left: auto; right: 0; }
	}
	> .in {
		&.tools { left: 0; right: 0; }
		&.tools.tools-bottom { top: auto; bottom: 0; }
		&.tools.tools-top { bottom: auto; top: 0; }
		&.tools.tools-right { left: auto; right: 0; }
	}
	
	

	> .tools > a , > :first-child .inner a {
		display: inline-block;
		color: #FFF;
		font-size: @font-size-gallery-hover-tools;
		font-weight: normal;
		padding: 0 4px;
		
		&:hover {
			text-decoration: none;
			color: #C9E2EA;
		}
	}
	.tools.tools-bottom > a , .tools.tools-top > a {
		display: inline-block;
	}
  
  
  //the custom text on hover
	> :first-child > .text {
		position: absolute;
		right: 0;
		left: 0;
		bottom: 0;
		top: 0;

		text-align: center;
		color: #FFF;
		background-color:rgba(0,0,0,0.55);

		.opacity(0);
		.transition(~"all 0.2s ease");
		
		&:before {/* makes the inner text become vertically centered*/
			content: '';
			display: inline-block;
			height: 100%;
			vertical-align: middle;
			margin-right: 0; /* Adjusts for spacing */
		}
		
		> .inner {
			 padding: 4px 0;
			 margin: 0;

			 display: inline-block;
			 vertical-align: middle;
			 max-width: 90%;
		}
	}
	&:hover > :first-child  > .text{
		.opacity(1);
	}

  }//li
}




//gallery
@media only screen and (max-width: @screen-xs) {
.ace-thumbnails { 
 text-align: center;
 }
 
 .ace-thumbnails > li {
	float: none;
	display: inline-block;
 }
}




}
.enable_image_gallery();