76 lines
1.4 KiB
CSS
76 lines
1.4 KiB
CSS
/**
|
|
* @file
|
|
* Provides shared lightbox stylings for both Colorbox and Photobox.
|
|
*/
|
|
|
|
.litebox {
|
|
position: relative;
|
|
}
|
|
|
|
.media__icon--litebox {
|
|
cursor: pointer;
|
|
display: block;
|
|
height: 80px;
|
|
left: 50%;
|
|
margin: 0;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 80px;
|
|
visibility: hidden;
|
|
z-index: 9;
|
|
transition: visibility 0s linear 0.5s, opacity 0.5s linear;
|
|
-ms-transform: translate(-50%, -50%);
|
|
-webkit-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.media__icon--litebox::before,
|
|
.media__icon--litebox::after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.media__icon--litebox {
|
|
z-index: 9;
|
|
}
|
|
|
|
.media__icon--litebox::before,
|
|
.media__icon--litebox::after {
|
|
background: white;
|
|
border-radius: 4px;
|
|
height: 2px;
|
|
left: 50%;
|
|
margin: -1px 0 0 -40px;
|
|
top: 50%;
|
|
width: 80px;
|
|
-ms-transform: rotate(0deg);
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
.media__icon--litebox::after {
|
|
-ms-transform: rotate(-90deg);
|
|
-webkit-transform: rotate(-90deg);
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.media__icon--litebox:hover::before,
|
|
.media__icon--litebox:hover::after {
|
|
background-color: #ff6d2c;
|
|
}
|
|
|
|
.media:hover .media__icon--litebox {
|
|
transition-delay: 0s;
|
|
}
|
|
|
|
/* Ensures to not conflict with blazy.media.css. */
|
|
.media:hover .media__icon--litebox,
|
|
a .media--switch img.media__element {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|