refactoring and testing...

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

css/grid-n-view.css

@@ -12,30 +12,24 @@
 :root {
 	/* dimensions */
 	--gallery-image-base-height: 18rem;
-	--gallery-image-margin: 0;
+	--gallery-image-spacing: 0rem;
 	--gallery-current-image-border: 0.7rem;
 	--gallery-padding: 3rem;
-	--gallery-padding-horizontal: var(--gallery-padding);
-	--gallery-padding-vertical: var(--gallery-current-image-border);
-	--gallery-padding-top: var(--gallery-padding-vertical);
-	--gallery-padding-bottom: var(--gallery-padding-vertical);
-	--gallery-padding-left: var(--gallery-padding-horizontal);
-	--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);
 	--gallery-scrollbar-width: 0.5rem;
 
 	--toolbar-button-size: 2rem;
 
 	--lightbox-frame: 5vmin;
 	--lightbox-image-margin-top: 0.75;
-	--lightbox-button-size: 2em;
+	--lightbox-button-size: 2rem;
 
 	/* theme */
 	--gallery-text-color: black;
 	--gallery-secondary-color: silver;
 	--gallery-shade-color: whitesmoke;
 	--gallery-background-color: white;
+	--gallery-accent-color: white;
+	--gallery-secondary-accent-color: white;
 
 	--lightbox-text-color: black;
 	--lightbox-background-color: white;
@@ -48,6 +42,21 @@
 	/* XXX can we use this as the basis for sizing for different devices??? */
 	font-size: 5mm;
 }
+/* calculated values... */
+/* NOTE: these need to be separeated from the :root values to recalculate... */
+body {
+	--gallery-image-margin: calc(var(--gallery-image-spacing) / 2);
+	--gallery-padding-horizontal: var(--gallery-padding);
+	--gallery-padding-vertical: var(--gallery-current-image-border);
+	--gallery-padding-top: var(--gallery-padding-vertical);
+	--gallery-padding-bottom: var(--gallery-padding-vertical);
+	--gallery-padding-left: var(--gallery-padding-horizontal);
+	--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);
+}
+
+
 
 .gallery-dark {
 	--gallery-text-color: silver;
@@ -202,7 +211,7 @@ 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) rgba(255,255,255,1),
+		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);
 }
 
@@ -210,13 +219,13 @@ button:active {
 .gallery .images img.current {
 	z-index: 10;
 	box-shadow: 
-		0px 0px 0px var(--gallery-current-image-border) rgba(255,255,255,1),
+		0px 0px 0px var(--gallery-current-image-border) var(--gallery-accent-color),
 		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) rgba(255,255,255,1),
+		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);
 }
 
@@ -233,6 +242,8 @@ button:active {
 }
 .gallery .images img.dragged-over {
 	z-index: calc(var(--base-layer) + 1);
+	border-left: none;
+	margin-left: var(--gallery-image-margin);
 	box-shadow: 
 		calc(var(--gallery-current-image-border) * -1) 0px 0px 0px rgba(0,0,0,0.8),
 		/* XXX this does not work... */

grid-n-view.html

@@ -15,6 +15,11 @@ body.splash {
 	opacity: 0;
 }
 
+/* demo classes... */
+.image-spacing {
+	--gallery-image-spacing: 0.5em;
+}
+
 </style>
 
 <script>
@@ -73,10 +78,11 @@ For more info see: <a href="./README.md">README.md</a>
 <h3>Settings and debug controls</h3>
 
 <button onclick="document.body.classList.toggle('gallery-dark')">◐</button>
-<!-- XXX scrollbar still obeys gallery... -->
+<!-- XXX scrollbar colors still inherited from gallery... -->
 <button onclick="document.body.classList.toggle('lightbox-dark')">◐ (lightbox)</button>
-<button onclick="gallery.toolbars.map(function(t){ t.movable() })">toggle toolbar drag</button>
+<button onclick="gallery.toolbars.map(function(t){ t.movable() })">toolbar drag</button>
-<button onclick="gallery.toggleLoading()">toggle loading screen</button>
+<button onclick="gallery.toggleLoading()">loading screen</button>
+<button onclick="document.body.classList.toggle('image-spacing'); gallery.update()">image spacing</button>
 
 <hr>