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 +++++++++++++++------------------------
 src/objects/_lightbox.vars.scss  |  25 +++----
 src/objects/_thumbnail.scss      |  11 ---
 src/objects/_thumbnail.vars.scss |   2 +-
 4 files changed, 72 insertions(+), 124 deletions(-)

(limited to 'src/objects')

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);
+				}
 			}
 		}
 	}
diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss
index 6d22aa8..9f200b0 100644
--- a/src/objects/_lightbox.vars.scss
+++ b/src/objects/_lightbox.vars.scss
@@ -4,30 +4,27 @@
 @use '../core.vars' as core;
 
 $pad: props.def(--o-lightbox--pad, props.get(core.$size--150)) !default;
-$fullscreen--height:  props.def(--o-lightbox--fullscreen--height, 100vh) !default;
 
-$image--max-height:    props.def(--o-lightbox--image--max-height, calc(100vh - props.get(core.$size--600))) !default;
-$image--border-radius: props.def(--o-lightbox--image--border-radius, props.get(core.$rounding)) !default;
+$controls--pad-x: props.def(--o-lightbox--controls--pad-x, props.get(core.$size--150)) !default;
+$controls--pad-y: props.def(--o-lightbox--controls--pad-y, props.get(core.$size--50)) !default;
 
-$close-button--font-size: props.def(--o-lightbox--close-button--font-size, props.get(core.$font-size--200)) !default;
-
-$nav-button--inline-size: props.def(--o-lightbox--nav-button--inline-size, props.get(core.$size--2000)) !default;
-$nav-button--block-size:  props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--3800)) !default;
-$nav-button--font-size:   props.def(--o-lightbox--nav-button--font-size, props.get(core.$font-size--200)) !default;
-
-$nav-button--inline-size--md: props.def(--o-lightbox--nav-button--inline-size, props.get(core.$size--2500), 'md') !default;
-$nav-button--block-size--md:  props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--2500), 'md') !default;
-
-$thumbnails--spacing: props.def(--o-lightbox--thumbnails--spacing, props.get(core.$size--100)) !default;
+$thumbnail--width:           props.def(--o-lightbox--thumbnail--width, props.get(core.$size--600)) !default;
+$thumbnail--spacing:         props.def(--o-lightbox--thumbnail--spacing, props.get(core.$size--100)) !default;
+$thumbnail--active--width:   props.def(--o-lightbox--thumbnail--active--width, props.get(core.$size--1000)) !default;
+$thumbnail--active--spacing: props.def(--o-lightbox--thumbnail--active--spacing, props.get(core.$size--250)) !default;
 
 $static-themes: props.def(--o-lightbox, (), 'color');
 
+$thumbnail--width--md:         props.def(--o-lightbox--thumbnail--width, props.get(core.$size--400), 'md') !default;
+$thumbnail--active--width--md: props.def(--o-lightbox--thumbnail--active--width, props.get(core.$size--600), 'md') !default;
+
 @each $theme in map.keys(props.get(core.$transparent-colors)) {
 	$lightbox-theme: --static-#{string.slice($theme, 3)};
 
 	$static-themes: props.merge($static-themes, (
 		$lightbox-theme: (
-			--text: props.get(core.$transparent-colors, $theme, --800),
+			--text:        props.get(core.$transparent-colors, $theme, --text),
+			--controls-bg: props.get(core.$transparent-colors, $theme, --700),
 		)
 	));
 }
diff --git a/src/objects/_thumbnail.scss b/src/objects/_thumbnail.scss
index 60a98af..2ccb50b 100644
--- a/src/objects/_thumbnail.scss
+++ b/src/objects/_thumbnail.scss
@@ -21,7 +21,6 @@
 		outline:        props.get(vars.$border-color) solid props.get(vars.$border-width);
 		outline-offset: calc(-1 * props.get(vars.$border-width));
 		border-radius:  props.get(vars.$rounding);
-		opacity:       .75;
 
 		&:hover,
 		&:active,
@@ -30,16 +29,6 @@
 			opacity:       1;
 		}
 
-		@include bem.is('selected') {
-			$focus-border-offset: calc(-1 * props.get(vars.$selected--border-width));
-
-			margin:        $focus-border-offset;
-			outline:       none;
-			border:        props.get(vars.$selected--border-width) solid props.get(vars.$selected--border-color);
-			border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
-			opacity:       1;
-		}
-
 		@include bem.elem('image') {
 			position:           absolute;
 			inset-block-start:  0;
diff --git a/src/objects/_thumbnail.vars.scss b/src/objects/_thumbnail.vars.scss
index e49e52e..d2a38c0 100644
--- a/src/objects/_thumbnail.vars.scss
+++ b/src/objects/_thumbnail.vars.scss
@@ -3,7 +3,7 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
 
-$size:         props.def(--o-thumbnail--size, props.get(core.$size--700)) !default;
+$size:         props.def(--o-thumbnail--size, props.get(core.$size--900)) !default;
 $rounding:     props.def(--o-thumbnail--rounding, props.get(core.$rounding--sm)) !default;
 $spacing:      props.def(--o-thumbnail--spacing, props.get(core.$size--100)) !default;
 $border-width: props.def(--o-thumbnail--border-width, props.get(core.$border-width--thin)) !default;
-- 
cgit v1.2.3-70-g09d2