From ff90a6deee03f87dcf89c759edf10a36ad8e76ad Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Thu, 3 Aug 2023 16:40:59 +0300 Subject: [PATCH] tweaks and notes... Signed-off-by: Alex A. Naanou --- css/grid-n-view.css | 18 +++++++++++++++--- grid-n-view.html | 25 +++++++++++++++---------- 2 files changed, 30 insertions(+), 13 deletions(-) diff --git a/css/grid-n-view.css b/css/grid-n-view.css index 65dfdad..05e0596 100644 --- a/css/grid-n-view.css +++ b/css/grid-n-view.css @@ -201,13 +201,17 @@ body { text-align: center; - color: var(--lightbox-text-color); - background: var(--lightbox-background-color); + color: var(--gallery-text-color); + background: var(--gallery-background-color); } /*------------------------------------------------------ Lightbox ---*/ +.gallery .lightbox { + color: var(--lightbox-text-color); + background: var(--lightbox-background-color); +} .gallery .lightbox.show-caption:before { content: attr(caption); position: absolute; @@ -259,12 +263,20 @@ body { font-size: var(--lightbox-button-size); line-height: var(--lightbox-button-size); filter: saturate(0); + opacity: 0.1; } .gallery .button:hover { opacity: 1; filter: saturate(1); - color: black; + color: var(--gallery-text-color); + + /* XXX HACK: might be better to use SVG for this... */ + text-shadow: + 0.02em 0.02em 0em var(--gallery-background-color), + -0.02em -0.02em 0em var(--gallery-background-color), + -0.02em 0.02em 0em var(--gallery-background-color), + 0.02em -0.02em 0em var(--gallery-background-color); } /* controls: close... */ .gallery .button.close:after { diff --git a/grid-n-view.html b/grid-n-view.html index 6721841..f930e29 100644 --- a/grid-n-view.html +++ b/grid-n-view.html @@ -51,23 +51,26 @@ var restoreScroll = function(){

ToDo

-- Views:
-	- Gallery
-	- Details
-	- Lightbox
-- toolbar -- floating over image (gallery/lightbox/details/...)
-	- select / deselect
-	- delete / clear deleted
+- Views: Gallery />Details / Lightbox
+- Details: populate fields
+- toolbar -- floating over gallery
+	- lightbox (current)
+	- info (current)
+	- select / deselect (current / all)
+	- delete / clear deleted (current / all)
 	- crop
 	- load
-- Lightbox: indicators: 
+- toolbar -- floating over image (gallery/lightbox/details/...)
+	- lightbox
+	- info
+	- select / deselect
+	- delete
+- Lightbox: hover indicators: 
 	- start/end (a-la ImageGrid.Viewer??)
 	- next/prev
 	- count
 	- selection
 - Gallery: Adaptable image justification in grid
-	- Make more accurate -- align right side to pixel...
-	- Can we make this passive??? (i.e. CSS only... likely not as flexible...)
 - Gallery: Spacial navigation (up/down/left/right)
 	- auto focus image iff the gallery is visible
 		- handle focus / tabindex (???)
@@ -122,6 +125,8 @@ var restoreScroll = function(){