From f77016be92be55fa32147c400b1f88ac3d5a7842 Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Tue, 19 Sep 2023 20:57:36 +0300
Subject: [PATCH] tweaking and cleanup...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 README.md           |  2 +-
 css/grid-n-view.css | 53 ++++++++++++++++++++++++---------------------
 2 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/README.md b/README.md
index 6a91065..c73e9df 100644
--- a/README.md
+++ b/README.md
@@ -29,7 +29,7 @@
 	- next/prev
 	- ~~count~~
 	- ~~selection~~
-- Lightbox: unify buttons with toolbar...
+- ~~Lightbox: unify buttons with toolbar...~~
 - ~~Gallery: Adaptable image justification in grid~~
 - ~~Gallery: Spacial navigation (up/down/left/right)~~
 	- **auto focus image iff the gallery is visible**
diff --git a/css/grid-n-view.css b/css/grid-n-view.css
index de752ce..5fc5551 100644
--- a/css/grid-n-view.css
+++ b/css/grid-n-view.css
@@ -54,6 +54,7 @@ body {
 	--gallery-padding-right: var(--gallery-padding-horizontal);
 	--gallery-image-scroll-margin: calc(2 * var(--gallery-current-image-border));
 	--gallery-empty-height: var(--gallery-image-base-height);
+	--scrollbar-color: var(--gallery-secondary-color);
 }
 
 
@@ -69,6 +70,14 @@ body {
 	--lightbox-text-color: silver;
 	--lightbox-background-color: rgb(10,10,10);
 }
+/* XXX to make the lightbox scrolbar work correctly we need to set the 
+* 		body colors -- :has(..) does not yet work on FF .... */
+.lightbox-dark.lightboxed,
+.lightbox-dark:has(.lightboxed) {
+	--gallery-background-color: var(--lightbox-background-color);
+	--gallery-text-color: var(--lightbox-text-color);
+	overflow: hidden;
+}
 
 
 
@@ -82,7 +91,7 @@ body {
 	border-radius: 100px;
 }
 ::-webkit-scrollbar-thumb {
-	background-color: var(--gallery-secondary-color);
+	background-color: var(--scrollbar-color);
 	border-radius: 100px;
 }
 body {
@@ -210,23 +219,20 @@ button:active {
 }
 .gallery:not(.lightboxed) .images img:not(.current):hover {
 	z-index: calc(var(--base-layer) + 1);
-	box-shadow: 
-		0px 0px 0px calc(var(--gallery-current-image-border) / 5) var(--gallery-accent-color),
-		0.2em 0.2em 1em 0em rgba(0,0,0,0.8);
+	outline: solid calc(var(--gallery-current-image-border) / 5) var(--gallery-accent-color);
+	box-shadow: 0.2em 0.2em 1em 0em rgba(0,0,0,0.8);
 }
 
 /* current image... */
 .gallery .images img.current {
 	z-index: 10;
-	box-shadow: 
-		0px 0px 0px var(--gallery-current-image-border) var(--gallery-accent-color),
-		0.4em 0.4em 2em 0em rgba(0,0,0,0.8);
+	outline: solid var(--gallery-current-image-border) var(--gallery-accent-color);
+	box-shadow: 0.4em 0.4em 2em 0em rgba(0,0,0,0.8);
 }
 .gallery:not(.lightboxed) .images img.current:hover {
 	z-index: calc(var(--base-layer) + 1);
-	box-shadow: 
-		0px 0px 0px var(--gallery-current-image-border) var(--gallery-secondary-accent-color),
-		0.6em 0.6em 3em 0em rgba(0,0,0,0.8);
+	outline: solid var(--gallery-current-image-border) var(--gallery-secondary-accent-color);
+	box-shadow: 0.6em 0.6em 3em 0em rgba(0,0,0,0.8);
 }
 
 
@@ -454,6 +460,7 @@ button:active {
 
 
 /* buttons... */
+.gallery .button,
 .gallery .toolbar button {
 	min-width: var(--toolbar-button-size);
 
@@ -654,16 +661,18 @@ button:active {
 	position: absolute;
 	top: 0;
 	right: 0;
-
 }
 .gallery .button {
 	disbplay: inline-block;
 	cursor: pointer;
 	width: var(--lightbox-button-size);
 	height: var(--lightbox-button-size);
+	margin: 0.2em;
 
 	font-size: var(--lightbox-button-size);
 	line-height: var(--lightbox-button-size);
+
+	color: var(--lightbox-text-color);
 	filter: saturate(0);
 	
 	opacity: 0.1;
@@ -672,30 +681,24 @@ button:active {
 	opacity: 1;
 	filter: saturate(1);
 	color: var(--lightbox-text-color);
-
-	/* XXX HACK: might be better to use SVG for this... */
-	text-shadow: 
-		0.02em 0.02em 0em var(--lightbox-background-color),
-		-0.02em -0.02em 0em var(--lightbox-background-color),
-		-0.02em 0.02em 0em var(--lightbox-background-color),
-		0.02em -0.02em 0em var(--lightbox-background-color);
+	transition: none;
 }
-/* controls: close... */
+
+/* specific controls */
 .gallery .button.close:after {
-	content: "✕";
-	/*color: red;*/
+	content: "close";
 }
 .gallery .button.fullscreen:after {
-	content: "⛶";
+	content: "fullscreen";
 }
 .gallery .button.info:after {
-	content: "i";
+	content: "info";
 }
 .gallery .button.prev:after {
-	content: "<";
+	content: "navigate_before";
 }
 .gallery .button.next:after {
-	content: ">";
+	content: "navigate_next";
 }