Fixed lightbox in light mode

2 files changed, 17 insertions, 15 deletions

diff --git a/assets/css/components/_lightbox.scss b/assets/css/components/_lightbox.scss
index d980c41..01c1219 100644
--- a/assets/css/components/_lightbox.scss
+++ b/assets/css/components/_lightbox.scss
@@ -5,8 +5,12 @@
             --button: (
                 --idle:  prop(--colors --fg-hi, $global: true),
                 --hover: prop(--colors --fg-lo, $global: true),
+                --bg:    prop(--colors --bg-hi, $global: true),
             )
-        )
+        ),
+        --dims: (
+            --pad: 1rem,
+        ),
     ));
 
     @include component(namespace()) {
@@ -48,7 +52,7 @@
             flex:        0 0 auto;
             align-items: center;
             width:       100%;
-            padding:     0 1rem;
+            padding:     0 prop(--dims --pad);
         }
 
         @include element('img') {
@@ -73,17 +77,18 @@
         }
 
         @include element('close') {
-            margin:      0 -1rem 0 auto;
-            padding:     1rem;
+            margin:      0 calc(-1 * #{prop(--dims --pad)}) 0 auto;
+            padding:     prop(--dims --pad);
             font-size:   1.5em;
         }
 
         @include element('prev', 'next') {
-            position:  absolute;
-            top:       50%;
-            padding:   2rem .5rem;
-            transform: translate(0, -50%);
-            font-size: 3em;
+            position:            absolute;
+            top:                 50%;
+            padding:             2rem .5rem;
+            transform:           translate(0, -50%);
+            font-size:           3em;
+            --icon-stroke-width: .75px;
 
             &::before {
                 content:          '';
@@ -95,11 +100,8 @@
                 width:            1.2em;
                 height:           1.2em;
                 transform:        translate(-50%, -50%);
-                background-color: rgba(#000, .25);
-            }
-
-            > * {
-                stroke-width: .75px;
+                opacity:          .25;
+                background-color: prop(--colors --button --bg);
             }
         }
 
diff --git a/assets/css/objects/_icon.scss b/assets/css/objects/_icon.scss
index 7c5d03a..15389f5 100644
--- a/assets/css/objects/_icon.scss
+++ b/assets/css/objects/_icon.scss
@@ -9,7 +9,7 @@
         display:         block;
         width:           1em;
         height:          1em;
-        stroke-width:    1.5px;
+        stroke-width:    var(--icon-stroke-width, 1.5px);
         stroke-linecap:  round;
         stroke-linejoin: round;