Merge lightbox CSS
This commit is contained in:
@@ -9,6 +9,7 @@ $default-bg-light: color.adjust($default, $lightness: 65%, $space: hsl);
|
||||
$default-bg-trans: color.adjust($default, $lightness: 70%, $alpha: -0.2, $space: hsl);
|
||||
$default-bg-trans-disabled: color.adjust($default, $lightness: 70%, $alpha: -0.5, $space: hsl);
|
||||
$default-inv: $default-bg;
|
||||
$default-inv-hover: color.adjust($default-bg, $lightness: 10%, $space: hsl);
|
||||
$default-inv-bg: $default;
|
||||
|
||||
//Feed colors
|
||||
@@ -29,7 +30,8 @@ $media-bg: color.adjust($media, $lightness: 60%, $space: hsl);
|
||||
$media-bg-light: color.adjust($media, $lightness: 60%, $alpha: -0.4, $space: hsl);
|
||||
|
||||
//Over image colors
|
||||
$over-img: #ffffff;
|
||||
$over-img: #DDD;
|
||||
$over-img-hover: #ffffff;
|
||||
$over-img-bg: color.adjust($default, $lightness: 70%, $alpha: -0.5, $space: hsl);
|
||||
$over-img-shadow: rgba(0, 0, 0, 0.5);
|
||||
|
||||
|
||||
@@ -3,8 +3,6 @@
|
||||
@use "fa";
|
||||
@use "color";
|
||||
|
||||
@use "lightbox/lightbox";
|
||||
|
||||
@mixin lightbox-icon($icon) {
|
||||
background: none;
|
||||
font-size: 2em;
|
||||
@@ -12,9 +10,20 @@
|
||||
@extend .#{variables.$fa-css-prefix}-#{$icon};
|
||||
}
|
||||
|
||||
body.lb-disable-scrolling {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lightboxOverlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 9999;
|
||||
background-color: black;
|
||||
opacity: 0.8;
|
||||
display: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@@ -22,6 +31,9 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
z-index: 10000;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
@@ -77,6 +89,9 @@
|
||||
line-height: 1.33333333em;
|
||||
|
||||
&.comment {
|
||||
.fa {
|
||||
vertical-align: center;
|
||||
}
|
||||
.comment-text {
|
||||
display: inline-block;
|
||||
width: calc(100% - 1.25em*1.33333333333 - 0.5rem);
|
||||
@@ -92,17 +107,24 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Image */
|
||||
|
||||
.lb-outerContainer {
|
||||
position: relative;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
margin: 0;
|
||||
border-radius:0;
|
||||
background-color: color.$default-bg-trans;
|
||||
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.lb-container {
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
&.moveable {
|
||||
cursor: grab;
|
||||
}
|
||||
@@ -112,28 +134,39 @@
|
||||
}
|
||||
|
||||
.lb-image {
|
||||
image-orientation: from-image;
|
||||
display: block;
|
||||
height: auto;
|
||||
max-width: inherit;
|
||||
max-height: none;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
|
||||
image-orientation: from-image;
|
||||
--translate-x: 0;
|
||||
--translate-y: 0;
|
||||
--scale: 1;
|
||||
|
||||
transform:
|
||||
translateX(var(--translate-x, 0))
|
||||
translateY(var(--translate-y, 0))
|
||||
scale(var(--scale, 1));
|
||||
}
|
||||
|
||||
|
||||
.lb-video {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
&.lb-video-nav .lb-nav {
|
||||
top: 100px;
|
||||
height: calc(100% - 200px); //Leave space for video progress bar
|
||||
}
|
||||
|
||||
|
||||
.lb-nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
|
||||
.lb-prev-area, .lb-next-area {
|
||||
position: absolute;
|
||||
@@ -152,24 +185,28 @@
|
||||
}
|
||||
|
||||
a.lb-prev, a.lb-next {
|
||||
cursor: pointer;
|
||||
color: color.$over-img;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
text-shadow: 0px 1px 1px color.$over-img-shadow;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
-webkit-transition: opacity 0.4s;
|
||||
-moz-transition: opacity 0.4s;
|
||||
-o-transition: opacity 0.4s;
|
||||
transition: opacity 0.4s;
|
||||
transition: opacity 0.3s, color 0.3s;
|
||||
opacity: 0;
|
||||
outline: none;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: color.$over-img-hover;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -183,13 +220,30 @@
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.lb-loader {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
|
||||
.lb-cancel {
|
||||
@include lightbox-icon(cancel);
|
||||
@extend .flicker;
|
||||
color: color.$default;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Titles */
|
||||
|
||||
.lb-dataContainer {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
flex: 0 0 auto;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -197,6 +251,7 @@
|
||||
text-align: left;
|
||||
padding: 0.5rem 0.5rem 0 0.5rem;
|
||||
display: flex;
|
||||
color: color.$default-inv;
|
||||
|
||||
.lb-details {
|
||||
float: none;
|
||||
@@ -206,22 +261,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
.lb-closeContainer .lb-close {
|
||||
.lb-closeContainer .lb-close {
|
||||
@include lightbox-icon(close);
|
||||
@extend .fa-lg;
|
||||
@extend .fa-fw;
|
||||
@extend .clickable;
|
||||
height: auto;
|
||||
font-size: 1.3333333333em;
|
||||
line-height: 1em;
|
||||
color: color.$over-img;
|
||||
|
||||
&:hover {
|
||||
color: color.$default-inv-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lb-cancel {
|
||||
@include lightbox-icon(cancel);
|
||||
@extend .flicker;
|
||||
color: color.$default-inv;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@@ -1,193 +0,0 @@
|
||||
/* Copy of https://github.com/lokesh/lightbox2/blob/dev/dist/js/lightbox.js */
|
||||
|
||||
body.lb-disable-scrolling {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lightboxOverlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
background-color: black;
|
||||
opacity: 0.8;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.lightbox {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 10000;
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
font-weight: normal;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.lightbox .lb-image {
|
||||
display: block;
|
||||
height: auto;
|
||||
max-width: inherit;
|
||||
max-height: none;
|
||||
border-radius: 3px;
|
||||
|
||||
/* Image border */
|
||||
border: 4px solid white;
|
||||
}
|
||||
|
||||
.lightbox a img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.lb-outerContainer {
|
||||
position: relative;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
margin: 0 auto;
|
||||
border-radius: 4px;
|
||||
|
||||
/* Background color behind image.
|
||||
This is visible during transitions. */
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.lb-outerContainer:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.lb-loader {
|
||||
position: absolute;
|
||||
top: 43%;
|
||||
left: 0;
|
||||
height: 25%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.lb-cancel {
|
||||
display: block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.lb-nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.lb-container > .nav {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.lb-nav a {
|
||||
outline: none;
|
||||
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
|
||||
}
|
||||
|
||||
.lb-prev, .lb-next {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.lb-nav a.lb-prev {
|
||||
width: 34%;
|
||||
left: 0;
|
||||
float: left;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.6s;
|
||||
-moz-transition: opacity 0.6s;
|
||||
-o-transition: opacity 0.6s;
|
||||
transition: opacity 0.6s;
|
||||
}
|
||||
|
||||
.lb-nav a.lb-prev:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.lb-nav a.lb-next {
|
||||
width: 64%;
|
||||
right: 0;
|
||||
float: right;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.6s;
|
||||
-moz-transition: opacity 0.6s;
|
||||
-o-transition: opacity 0.6s;
|
||||
transition: opacity 0.6s;
|
||||
}
|
||||
|
||||
.lb-nav a.lb-next:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.lb-dataContainer {
|
||||
margin: 0 auto;
|
||||
padding-top: 5px;
|
||||
width: 100%;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.lb-dataContainer:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.lb-data {
|
||||
padding: 0 4px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.lb-data .lb-details {
|
||||
width: 85%;
|
||||
float: left;
|
||||
text-align: left;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
||||
.lb-data .lb-caption {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.lb-data .lb-caption a {
|
||||
color: #4ae;
|
||||
}
|
||||
|
||||
.lb-data .lb-number {
|
||||
display: block;
|
||||
clear: left;
|
||||
padding-bottom: 1em;
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.lb-data .lb-close {
|
||||
display: block;
|
||||
float: right;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
text-align: right;
|
||||
outline: none;
|
||||
opacity: 0.7;
|
||||
-webkit-transition: opacity 0.2s;
|
||||
-moz-transition: opacity 0.2s;
|
||||
-o-transition: opacity 0.2s;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.lb-data .lb-close:hover {
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
}
|
||||
Reference in New Issue
Block a user