Improved lightbox

1 files changed, 33 insertions, 12 deletions

diff --git a/assets/css/components/_lightbox.scss b/assets/css/components/_lightbox.scss
index b23943a..d980c41 100644
--- a/assets/css/components/_lightbox.scss
+++ b/assets/css/components/_lightbox.scss
@@ -6,9 +6,6 @@
                 --idle:  prop(--colors --fg-hi, $global: true),
                 --hover: prop(--colors --fg-lo, $global: true),
             )
-        ),
-        --dims: (
-            --col-width: 17em
         )
     ));
 
@@ -20,11 +17,11 @@
         top:             0;
         left:            0;
         box-sizing:      border-box;
+        flex-direction:  column;
         align-items:     center;
         justify-content: center;
         width:           100%;
         height:          100%;
-        padding:         1em calc(3em + 1rem);
         transition:      opacity .2s, visibility .2s;
         opacity:         0;
 
@@ -45,9 +42,22 @@
             opacity:    1;
         }
 
+        @include element('infobar') {
+            display:     flex;
+            box-sizing:  border-box;
+            flex:        0 0 auto;
+            align-items: center;
+            width:       100%;
+            padding:     0 1rem;
+        }
+
         @include element('img') {
-            max-width:  100%;
-            max-height: 100%;
+            max-width:      100%;
+            min-height:     0;
+            max-height:     100%;
+            margin-top:     auto;
+            margin-bottom:  auto;
+            padding-bottom: 2rem;
         }
 
         @include element('close', 'prev', 'next') {
@@ -63,20 +73,31 @@
         }
 
         @include element('close') {
-            position:  absolute;
-            top:       0;
-            right:     0;
-            padding:   1rem;
-            font-size: 1.5em;
+            margin:      0 -1rem 0 auto;
+            padding:     1rem;
+            font-size:   1.5em;
         }
 
         @include element('prev', 'next') {
             position:  absolute;
             top:       50%;
-            padding:   .5rem;
+            padding:   2rem .5rem;
             transform: translate(0, -50%);
             font-size: 3em;
 
+            &::before {
+                content:          '';
+                display:          block;
+                position:         absolute;
+                z-index:          -1;
+                top:              50%;
+                left:             50%;
+                width:            1.2em;
+                height:           1.2em;
+                transform:        translate(-50%, -50%);
+                background-color: rgba(#000, .25);
+            }
+
             > * {
                 stroke-width: .75px;
             }