From 9b13c09059f0d71f3ddc64ab06d6dba690ee5ac9 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Thu, 26 Jan 2023 17:57:44 +0100
Subject: Lightbox

---
 src/objects/_lightbox.scss | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

(limited to 'src/objects/_lightbox.scss')

diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index c2894ee..74515c4 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -10,6 +10,7 @@
             --thumbnail: (
                 --size:     fn.global-dim(--size --700),
                 --spacing:  fn.global-dim(--size --100),
+                --idle:     1px,
                 --selected: 2px,
             ),
             --close-button: (
@@ -38,6 +39,7 @@
     @include iro.props-store((
         --colors: (
             --thumbnail: (
+                --idle:     fn.global-color(--fg-hi2),
                 --selected: fn.global-color(--fg-lo),
             ),
             --footer: (
@@ -89,7 +91,12 @@
         }
 
         @include iro.bem-elem('thumbnail') {
-            opacity: .75;
+            position:  relative;
+            flex:      0 0 auto;
+            width:     fn.dim(--thumbnail --size);
+            height:    fn.dim(--thumbnail --size);
+            opacity:   .75;
+            box-shadow: 0 0 0 fn.dim(--thumbnail --idle) fn.color(--thumbnail --idle) inset;
 
             &:hover {
                 opacity: 1;
@@ -103,13 +110,22 @@
 
         @include iro.bem-elem('thumbnail-img') {
             display:         block;
-            width:           fn.dim(--thumbnail --size);
-            min-width:       fn.dim(--thumbnail --size);
-            height:          fn.dim(--thumbnail --size);
+            position:        absolute;
+            top:             0;
+            left:            0;
+            width:           100%;
+            height:          100%;
             object-fit:      cover;
             object-position: center center;
         }
 
+        @include iro.bem-elem('thumbnail-icon') {
+            position:  absolute;
+            top:       50%;
+            left:      50%;
+            transform: translate(-50%, -50%);
+        }
+
         @include iro.bem-elem('close-btn') {
             flex:      0 0 auto;
             margin:    calc(-.5 * fn.dim(--pad)) calc(-.5 * fn.dim(--pad)) 0 auto;
-- 
cgit v1.2.3-54-g00ecf