css/grid-n-view.css

@@ -76,8 +76,6 @@ 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(
@@ -111,38 +109,21 @@ body {
 
 /* selection marker... */
 .gallery .images img.current {
-	z-index: 10;
+	z-index: 1;
 	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: var(--base-layer);
+	z-index: 1;
 	position: relative;
 }
 .gallery.lightboxed .images img.current+.mark {
-	z-index: calc(var(--base-layer) + 10);
+	z-index: 2;
 	position: fixed;
 	bottom: 0;
 	right: 0;
@@ -171,15 +152,13 @@ body {
 /******************************************************* Lightbox ****/
 
 .gallery .lightbox {
-	--base-layer: 100;
-
 	display: none;
 	position: fixed;
 	width: 100%;
 	height: 100%;
 	top: 0px;
 	left: 0px;
-	z-index: var(--base-layer);
+	z-index: 1;
 
 	text-align: center;
 

grid-n-view.html

@@ -20,44 +20,34 @@
 
 <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 image iff the gallery is visible</b>
+	- <b>auto focus current 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...</b>
+- <b>Gallery: focus visible (if no current and partially scrolled)...</b>
 - <s>Gallery/Lightbox: Selection of images (space / ctrl-a / ctrl-d / ctrl-i)</s>
 	- <s>Lightbox: show selection marker</s>
-- <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"
+- <b>Gallery: constructor (list of urls)</b>
+- <b>Gallery: views</b>
+	- "make view from selection"
+	- close view
+	- multiple view stack
 - Gallery: drag-n-drop
 	- drop files/images
 	- drag to sort