天津投入产出系统后端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

187 lines
2.9 KiB

.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();