tweaks and notes...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

css/grid-n-view.css

@@ -201,13 +201,17 @@ body {
 
 	text-align: center;
 
-	color: var(--lightbox-text-color);
+	color: var(--gallery-text-color);
-	background: var(--lightbox-background-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 {

grid-n-view.html

@@ -51,23 +51,26 @@ var restoreScroll = function(){
 
 <h3>ToDo</h3>
 <pre>
-- Views:
+- <s>Views: Gallery />Details / Lightbox</s>
-	- <s>Gallery</s>
+- Details: populate fields
-	- <s>Details</s>
+- toolbar -- floating over gallery
-	- <s>Lightbox</s>
+	- lightbox (current)
-- toolbar -- floating over image (gallery/lightbox/details/...)
+	- info (current)
-	- select / deselect
+	- select / deselect (current / all)
-	- delete / clear deleted
+	- 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
 	- <s>count</s>
 	- <s>selection</s>
 - <s>Gallery: Adaptable image justification in grid</s>
-	- <s>Make more accurate -- align right side to pixel...</s>
-	- Can we make this passive??? (i.e. CSS only... likely not as flexible...)
 - <s>Gallery: Spacial navigation (up/down/left/right)</s>
 	- <b>auto focus image iff the gallery is visible</b>
 		- handle focus / tabindex (???)
@@ -122,6 +125,8 @@ var restoreScroll = function(){
 	<div class="lightbox">
 		<img>
 		<div class="buttons">
+			<div class="button prev"></div>
+			<div class="button next"></div>
 			<div class="button info"></div>
 			<div class="button fullscreen"></div>
 			<div class="button close"></div>