loading animations + tweaking...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
cad5e6ea58
commit
dfb452b39e
@ -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;
|
||||
transition: rotate 0.2s;
|
||||
opacity: 0.4;
|
||||
|
||||
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-color: transparent;
|
||||
border-top-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(--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(--lightbox-background-color),
|
||||
-0.02em -0.02em 0em var(--lightbox-background-color),
|
||||
-0.02em 0.02em 0em var(--lightbox-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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/********************************************************** Utils ****/
|
||||
|
||||
.gallery:not(.lightboxed):not(.detailed) .hide-in-gallery,
|
||||
.gallery.lightboxed .hide-in-lightbox,
|
||||
.gallery.detailed .hide-in-details {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* loading animation... */
|
||||
/* loading bar 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 {
|
||||
@ -671,6 +705,70 @@ body {
|
||||
translate: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**********************************************************************
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user