loading animations + tweaking...

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

css/grid-n-view.css

@@ -34,22 +34,26 @@
 	/* theme */
 	--gallery-text-color: black;
 	--gallery-secondary-color: silver;
+	--gallery-shade-color: whitesmoke;
 	--gallery-background-color: white;
 
 	--lightbox-text-color: black;
 	--lightbox-background-color: white;
 	/*--lightbox-background-color: rgba(0,0,0,0.8);*/
+
+	--color-transition: 1s;
 }
 
 .gallery-dark {
 	--gallery-text-color: silver;
 	--gallery-secondary-color: gray;
-	--gallery-background-color: black;
+	--gallery-shade-color: rgb(50,50,50);
+	--gallery-background-color: rgb(10,10,10);
 }
 
 .lightbox-dark {
 	--lightbox-text-color: silver;
-	--lightbox-background-color: black;
+	--lightbox-background-color: rgb(10,10,10);
 }
 
 
@@ -75,6 +79,29 @@ body {
 
 	color: var(--gallery-text-color);
 	background: var(--gallery-background-color);
+
+	transition:
+		text-shadow var(--color-transition) ease,
+		background var(--color-transition) ease,
+		color var(--color-transition) ease;
+}
+button {
+	color: var(--gallery-text-color);
+	background: var(--gallery-background-color);
+	border: solid 1px var(--gallery-secondary-color);
+
+	transition:
+		text-shadow var(--color-transition) ease,
+		background var(--color-transition) ease,
+		color var(--color-transition) ease;
+}
+button:hover {
+	background: var(--gallery-shade-color);
+	border: solid 1px var(--gallery-text-color);
+}
+button:active {
+	background: var(--gallery-secondary-color);
+	border: solid 1px var(--gallery-text-color);
 }
 
 
@@ -98,6 +125,11 @@ body {
 	font-family: sans-serif;
 
 	overflow-x: clip;
+
+	transition:
+		text-shadow var(--color-transition) ease,
+		background var(--color-transition) ease,
+		color var(--color-transition) ease;
 }
 .gallery .images {
 	position: relative;
@@ -110,7 +142,7 @@ body {
 /* empty... */
 .gallery .images:empty {
 	height: var(--gallery-empty-height);
-	border: dashed 1px black;
+	border: dashed 1px var(--gallery-secondary-color);
 }
 .gallery .images:empty:after,
 .gallery .images:empty:before {
@@ -288,7 +320,10 @@ body {
 		left 0.2s,
 		padding-right 0.2s,
 		opacity 0.2s,
-		translate 0.2s;
+		translate 0.2s,
+		text-shadow var(--color-transition) ease,
+		background var(--color-transition) ease,
+		color var(--color-transition) ease;
 
 	user-select: none;
 }
@@ -324,9 +359,8 @@ body {
 	font-family: "Material Symbols Outlined";
 	font-size: small;
 	font-weight: bold;
-	color: var(--gallery-text-color);
 
-	opacity: 0.2;
+	opacity: 0.3;
 
 	pointer-events: none;
 }
@@ -384,6 +418,13 @@ body {
 	font-feature-settings: "liga";   
 
 	text-align: center;
+
+	color: var(--gallery-text-color);
+
+	transition:
+		text-shadow var(--color-transition) ease,
+		background var(--color-transition) ease,
+		color var(--color-transition) ease;
 }
 .gallery .toolbar button sec {
 	display: inline-block;
@@ -395,11 +436,6 @@ body {
 
 	font-size: calc(var(--toolbar-button-size) / 1.15);
 
-	/* XXX this works but needs another layer of black text on top...
-	 * 		...not sure how to do this without JS -- SVG would be simpler! */
-	/*-webkit-text-stroke: 0.1em white;
-	text-stroke: 0.1em white; */
-
 	/* XXX HACK: might be better to use SVG for this... */
 	text-shadow: 
 		0em 0.05em 0px var(--gallery-background-color),
@@ -410,6 +446,11 @@ body {
 		-0.05em -0.05em 0px var(--gallery-background-color),
 		-0.05em 0.05em 0px var(--gallery-background-color),
 		0.05em -0.05em 0px var(--gallery-background-color);
+
+	transition:
+		text-shadow var(--color-transition) ease,
+		background var(--color-transition) ease,
+		color var(--color-transition) ease;
 }
 
 .gallery .toolbar button:hover {
@@ -426,8 +467,13 @@ body {
 	top: 0;
 	right: 0;
 
-	opacity: 0.3;
+	opacity: 0.4;
-	transition: rotate 0.2s;
+
+	transition: 
+		rotate 0.2s,
+		text-shadow var(--color-transition) ease,
+		background var(--color-transition) ease,
+		color var(--color-transition) ease;
 }
 .gallery .toolbar:not(.shown) button.collapse {
 	rotate: 180deg;
@@ -455,8 +501,9 @@ body {
 	color: var(--gallery-secondary-color);
 }
 .gallery .toolbar .drag-handle:hover {
-	color: var(--gallery-text-color);
+	border-top-color: transparent;
-	border-color: transparent;
+	border-left-color: transparent;
+	border-bottom-color: transparent;
 }
 
 
@@ -531,6 +578,7 @@ body {
 
 
 /******************************************************* Controls ****/
+/* XXX these are only used in the lightbox... */
 
 .gallery .buttons {
 	display: flex;
@@ -554,14 +602,14 @@ body {
 .gallery .button:hover {
 	opacity: 1;
 	filter: saturate(1);
-	color: var(--gallery-text-color);
+	color: var(--lightbox-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(--lightbox-background-color),
-		-0.02em -0.02em 0em var(--gallery-background-color),
+		-0.02em -0.02em 0em var(--lightbox-background-color),
-		-0.02em 0.02em 0em var(--gallery-background-color),
+		-0.02em 0.02em 0em var(--lightbox-background-color),
-		0.02em -0.02em 0em var(--gallery-background-color);
+		0.02em -0.02em 0em var(--lightbox-background-color);
 }
 /* controls: close... */
 .gallery .button.close:after {
@@ -598,7 +646,8 @@ body {
 
 	z-index: calc(var(--base-layer) * 2);
 
-	background: white;
+	background: var(--gallery-background-color);
+	opacity: 0.5;
 }
 .gallery.ready .loading {
     animation: fadeOutAnimation ease 2s;
@@ -619,22 +668,8 @@ body {
 .gallery.ready .loading * {
 	display: none;
 }
-.gallery:not(.ready) .images img {
-	visibility: hidden;
-}
 
-
+/* loading bar animation... */
-
-
-/********************************************************** Utils ****/
-
-.gallery:not(.lightboxed):not(.detailed) .hide-in-gallery,
-.gallery.lightboxed .hide-in-lightbox,
-.gallery.detailed .hide-in-details {
-	display: none;
-}
-
-/* loading animation... */
 .gallery .loading>div {
 	--bar-size: 0.2rem;
 
@@ -652,15 +687,14 @@ body {
 	left: 0;
 	width: 100%;
 	height: var(--bar-size);
+	background: var(--gallery-text-color);
 	opacity: 0.5;
 }
 .gallery .loading>div:after {
-	background: gray;
     animation: loadingBarAnimation ease infinite alternate 2s;
 }
 .gallery .loading>div:before {
 	width: 50%;
-	background: gray;
     animation: loadingBarAnimation ease infinite alternate 1.5s;
 }
 @keyframes loadingBarAnimation {
@@ -673,5 +707,69 @@ body {
 }
 
 
+/* loading images animation... */
+.gallery:not(.ready) .images .mark {
+	display: none;
+}
+.gallery:not(.ready) .images img {
+	--duration: 3s;
+
+	--delay: 0s;
+	--extend: 1;
+
+	box-shadow: none;
+
+    animation: 
+		loadingImagesAnimation 
+			ease 
+			infinite 
+			alternate 
+			calc(var(--duration) * var(--extend)) 
+			var(--delay);
+}
+/* variations... */
+.gallery .images img:nth-child(2n) {
+	--delay: 0.2s;
+	--extend: 0.9;
+}
+.gallery .images img:nth-child(3n) {
+	--delay: 0.5s;
+	--extend: 1.3;
+}
+.gallery .images img:nth-child(5n) {
+	--delay: 0.4s;
+	--extend: 1.6;
+}
+.gallery .images img:nth-child(7n) {
+	--delay: 0.1s;
+	--extend: 0.6;
+}
+@keyframes loadingImagesAnimation {
+	0% {
+		filter: contrast(0);
+		opacity: 0.2;
+	}
+	50% {
+		filter: contrast(0);
+		opacity: 0.3;
+	}
+	100% {
+		filter: contrast(0);
+		opacity: 0.1;
+	}
+}
+
+
+
+/********************************************************** Utils ****/
+
+.gallery:not(.lightboxed):not(.detailed) .hide-in-gallery,
+.gallery.lightboxed .hide-in-lightbox,
+.gallery.detailed .hide-in-details {
+	display: none;
+}
+
+	
+
 /**********************************************************************
 * vim:set ts=4 sw=4 :                                                */

grid-n-view.html

@@ -15,23 +15,6 @@ body.splash {
 	opacity: 0;
 }
 
-/* fade-in body... */
-/* XXX add real splash screen...
-body:not(.splash) {
-    animation: fadeInAnimation ease 2s;
-    animation-iteration-count: 1;
-    animation-fill-mode: forwards;
-}
- 
-@keyframes fadeInAnimation {
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-     }
-}
-*/
 </style>
 
 <script>
@@ -87,8 +70,11 @@ For more info see: <a href="./README.md">README.md</a>
 
 <hr>
 
-<h3>Settings</h3>
+<h3>Settings and debug controls</h3>
 
+<button onclick="document.body.classList.toggle('gallery-dark')">◐</button>
+<!-- XXX scrollbar still obeys gallery... -->
+<button onclick="document.body.classList.toggle('lightbox-dark')">◐ (lightbox)</button>
 <button onclick="gallery.toolbar.movable()">toggle toolbar drag</button>
 <button onclick="gallery.toggleLoading()">toggle loading screen</button>
 

grid-n-view.js

@@ -1285,8 +1285,7 @@ var Gallery = {
 								return that.load(images, expand) }, 
 							function(err){
 								// XXX handle errors...
-								that.hideLoading()
+								that.hideLoading() }) }
-							}) }
 				dragged
 					&& dragged.classList.remove('dragged')
 				dragged_over