From 90349365f9e01a0c1142c139016d3ae4ee3280aa Mon Sep 17 00:00:00 2001 From: Franzz Date: Fri, 24 Apr 2026 23:09:22 +0200 Subject: [PATCH] Merge lightbox CSS --- src/styles/_color.scss | 4 +- src/styles/_lightbox.scss | 104 ++++++++++++---- src/styles/lightbox/_lightbox.css | 193 ------------------------------ 3 files changed, 81 insertions(+), 220 deletions(-) delete mode 100644 src/styles/lightbox/_lightbox.css diff --git a/src/styles/_color.scss b/src/styles/_color.scss index bdb1053..6b96e43 100644 --- a/src/styles/_color.scss +++ b/src/styles/_color.scss @@ -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); diff --git a/src/styles/_lightbox.scss b/src/styles/_lightbox.scss index 5ed6b0d..25a6cdd 100644 --- a/src/styles/_lightbox.scss +++ b/src/styles/_lightbox.scss @@ -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; - } } \ No newline at end of file diff --git a/src/styles/lightbox/_lightbox.css b/src/styles/lightbox/_lightbox.css deleted file mode 100644 index b2f9ca3..0000000 --- a/src/styles/lightbox/_lightbox.css +++ /dev/null @@ -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; -}