From 62d0e619de3b4b65812382dc7fb82d4e79158929 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sat, 7 Feb 2026 21:00:48 +0100
Subject: New lightbox

---
 src/objects/_lightbox.scss | 158 +++++++++++++++++----------------------------
 1 file changed, 60 insertions(+), 98 deletions(-)

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

diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index b95148f..0d5e111 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -8,127 +8,89 @@
 @forward 'lightbox.vars';
 @use 'lightbox.vars' as vars;
 
+@use 'backdrop.vars' as backdrop;
+@use 'thumbnail.vars' as thumbnail;
+
 @mixin styles {
 	@include materialize-at-root(meta.module-variables('vars'));
 
 	@include bem.object('lightbox') {
-		flex:           1 1 auto;
-		min-block-size: 0;
+		position:         relative;
+		box-sizing:       border-box;
+		display:          flex;
+		flex:             1 1 auto;
+		flex-direction:   column;
+		align-items:      center;
+		justify-content:  center;
+		inline-size:      100%;
+		max-inline-size:  none;
+		block-size:       100%;
+		min-block-size:   0;
+		max-block-size:   none;
+		margin:           0;
+		background-color: transparent;
+		border:           0;
+
+		&::backdrop {
+			background-color: props.get(backdrop.$bg-color);
+			backdrop-filter: blur(props.get(backdrop.$blur));
+		}
 
-		@include bem.elem('header') {
-			display:             flex;
-			grid-area:           header;
-			align-items:         flex-start;
-			padding-block-start: props.get(vars.$pad);
-			padding-inline:      props.get(vars.$pad);
+		&[open] {
+			display: flex;
+		}
+
+		@include bem.elem('controls') {
+			position:          absolute;
+			inset-block-start: props.get(vars.$pad);
+			inset-inline-end:  props.get(vars.$pad);
+			z-index:           20;
+			padding:           props.get(vars.$controls--pad-y) props.get(vars.$controls--pad-x);
+			border-radius:     10em;
 		}
 
 		@include bem.elem('img') {
-			box-sizing:      border-box;
-			display:         block;
-			grid-area:       content;
-			place-self:      center;
+			position:        relative;
+			z-index:         10;
+			display:         none;
+			flex:            1 1 auto;
 			inline-size:     auto;
 			max-inline-size: 100%;
 			block-size:      auto;
-			max-block-size:  props.get(vars.$image--max-height);
-			padding:         props.get(vars.$pad);
-			margin-inline:   auto;
-			border-radius:   calc(props.get(vars.$pad) + props.get(vars.$image--border-radius));
-		}
-
-		@include bem.elem('thumbnails') {
-			display:            none;
-			grid-area:          thumbnails;
-			gap:                props.get(vars.$thumbnails--spacing);
-			padding:            props.get(vars.$pad);
-			margin-block-start: calc(-1 * props.get(vars.$pad));
-			overflow:           auto;
-		}
-
-		@include bem.elem('close-btn') {
-			display:            none;
-			flex:               0 0 auto;
-			margin-block-start: calc(-.5 * props.get(vars.$pad));
-			margin-inline:      auto calc(-.5 * props.get(vars.$pad));
-			font-size:          props.get(vars.$close-button--font-size);
-		}
-
-		@include bem.elem('nav-btn') {
-			position:   relative;
-			display:    none;
-			align-self: center;
-			overflow:   visible;
-			font-size:  props.get(vars.$nav-button--font-size);
-
-			&::before {
-				position:           absolute;
-				inset-block-start:  50%;
-				display:            block;
-				inline-size:        props.get(vars.$nav-button--inline-size);
-				block-size:         props.get(vars.$nav-button--block-size);
-				content:            '';
-				transform:          translateY(-50%);
-			}
-
-			@include bem.modifier('prev') {
-				grid-area:     prev;
-				margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad));
-
-				&::before {
-					inset-inline-start: 0;
-				}
-			}
-    
-			@include bem.modifier('next') {
-				grid-area:     next;
-				margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad));
+			max-block-size:  100%;
+			margin:          auto;
 
-				&::before {
-					inset-inline-end: 0;
-				}
+			@include bem.multi('&:target', 'is' 'visible') {
+				display: block;
 			}
 		}
 
-		@include bem.modifier('interactive') {
-			display:               grid;
-			grid-template-areas:
-				'header     header     header'
-				'prev       content    next'
-				'thumbnails thumbnails thumbnails';
-			grid-template-rows:    auto minmax(0, 1fr) auto auto;
-			grid-template-columns: auto minmax(0, 1fr) auto;
-
-			@include bem.modifier('fullscreen') {
-				block-size: props.get(vars.$fullscreen--height);
-			}
-
-			@include bem.elem('img') {
-				display:        none;
-				max-block-size: 100%;
-				margin-inline:  0;
-
-				@include bem.multi('&:target', 'is' 'visible') {
-					display: block;
-				}
-			}
-
-			@include bem.elem('thumbnails') {
-				display: flex;
-			}
+		@include bem.elem('thumbnails') {
+			display: 		 flex;
+			flex:            0 0 auto;
+			gap:             props.get(vars.$thumbnail--spacing);
+			justify-content: center;
+			padding:         props.get(vars.$pad);
+			overflow:        auto;
+		}
 
-			@include bem.elem('close-btn') {
-				display: block;
-			}
+		@include bem.elem('thumbnail') {
+			inline-size: props.get(vars.$thumbnail--width);
+			transition:  inline-size .1s ease, margin-inline .1s ease;
 
-			@include bem.elem('nav-btn') {
-				display: block;
+			@include bem.is('selected') {
+				inline-size:  props.get(vars.$thumbnail--active--width);
+				margin-inline: props.get(vars.$thumbnail--active--spacing);
 			}
 		}
 
 		@each $theme in map.keys(props.get(vars.$static-themes)) {
 			@include bem.modifier(string.slice($theme, 3)) {
 				color: props.get(vars.$static-themes, $theme, --text);
+
+				@include bem.elem('controls') {
+					background-color: props.get(vars.$static-themes, $theme, --controls-bg);
+				}
 			}
 		}
 	}
-- 
cgit v1.2.3-70-g09d2