tweaks (not done)...

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

css/grid-n-view.css

@@ -76,6 +76,8 @@ body {
 
 /* XXX need to account for scrollbar popping in and out */
 .gallery {
+	--base-layer: 10;
+
 	padding-top: var(--gallery-padding-top);
 	padding-bottom: var(--gallery-padding-bottom);
 	padding-left: calc(
@@ -109,21 +111,38 @@ body {
 
 /* selection marker... */
 .gallery .images img.current {
-	z-index: 1;
+	z-index: 10;
 	box-shadow: 
 		0px 0px 0px var(--gallery-current-image-border) rgba(255,255,255,1),
 		0.4em 0.4em 3em 0em rgba(0,0,0,0.8);
 }
 
+/* hover... */
+/* XXX Problems:
+	- this hides marks... 
+	- shown over lightbox...
+*/
+.gallery .images img:not(.current):hover {
+	z-index: 20;
+	box-shadow: 0.2em 0.2em 1em 0em rgba(0,0,0,0.8);
+}
+.gallery .images img.current:hover {
+	z-index: 20;
+	box-shadow: 
+		0px 0px 0px var(--gallery-current-image-border) rgba(255,255,255,1),
+		0.6em 0.6em 4em 0em rgba(0,0,0,0.8);
+}
+
+
 
 /*************************************************** Image markers ***/
 
 .gallery .images img+.mark {
-	z-index: 1;
+	z-index: var(--base-layer);
 	position: relative;
 }
 .gallery.lightboxed .images img.current+.mark {
-	z-index: 2;
+	z-index: calc(var(--base-layer) + 10);
 	position: fixed;
 	bottom: 0;
 	right: 0;
@@ -152,13 +171,15 @@ body {
 /******************************************************* Lightbox ****/
 
 .gallery .lightbox {
+	--base-layer: 100;
+
 	display: none;
 	position: fixed;
 	width: 100%;
 	height: 100%;
 	top: 0px;
 	left: 0px;
-	z-index: 1;
+	z-index: var(--base-layer);
 
 	text-align: center;
 

grid-n-view.html

@@ -20,34 +20,44 @@
 
 <h3>ToDo</h3>
 <pre>
+- <b>ASAP: CSS: z-index needs fixing...</b>
+- Views:
+	- <s>Gallery</s>
+	- <b>Details</b>
+	- <s>Lightbox</s>
 - toolbar
 	- select / deselect
 	- delete / clear deleted
 	- crop
 	- load
 - Lightbox: indicators: 
-	- start/end (a-la ImageGrid.Viewer)
+	- start/end (a-la ImageGrid.Viewer??)
 	- next/prev
 	- <s>count</s>
 	- <s>selection</s>
 - <s>Gallery: Adaptable image justification in grid</s>
-	- Can we make this passive??? (i.e. CSS only)
 	- <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 current image iff the gallery is visible</b>
+	- <b>auto focus image iff the gallery is visible</b>
 		- handle focus / tabindex (???)
 	- <s>option: .loop_images</s>
 	- <s>Up/Down: might be a good idea to select an image based on 
 	  longest border instead of closest center (current)...</s>
 - Gallery: PageUp/PageDown, home/end + allow page navigation
-- <b>Gallery: focus visible (if no current and partially scrolled)...</b>
+- <b>Gallery: focus visible...</b>
 - <s>Gallery/Lightbox: Selection of images (space / ctrl-a / ctrl-d / ctrl-i)</s>
 	- <s>Lightbox: show selection marker</s>
-- <b>Gallery: constructor (list of urls)</b>
-- <b>Gallery: views</b>
-	- "make view from selection"
-	- close view
-	- multiple view stack
+- <b>Gallery: constructor...</b>
+	Gallery([options])
+	Gallery(urls[, options])
+	Gallery(dom[, options])
+	Gallery(dom, urls[, options])
+- <b>Gallery: view crop</b>
+	- open/change/close
+	- crop stack (a-la ImageGrid.Viewer)
+	- actions:
+		- "from selection"
 - Gallery: drag-n-drop
 	- drop files/images
 	- drag to sort