olyakonstantin/gallery
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tweaking and cleanup...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2023-09-19 20:57:36 +03:00
parent ac7179384c
commit f77016be92
2 changed files with 29 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -29,7 +29,7 @@
- next/prev
- ~~count~~
- ~~selection~~
- Lightbox: unify buttons with toolbar...
- ~~Lightbox: unify buttons with toolbar...~~
- ~~Gallery: Adaptable image justification in grid~~
- ~~Gallery: Spacial navigation (up/down/left/right)~~
- **auto focus image iff the gallery is visible**

53
css/grid-n-view.css
View File

@ -54,6 +54,7 @@ body {
--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);
--scrollbar-color: var(--gallery-secondary-color);
}
@ -69,6 +70,14 @@ body {
--lightbox-text-color: silver;
--lightbox-background-color: rgb(10,10,10);
}
/* XXX to make the lightbox scrolbar work correctly we need to set the
* body colors -- :has(..) does not yet work on FF .... */
.lightbox-dark.lightboxed,
.lightbox-dark:has(.lightboxed) {
--gallery-background-color: var(--lightbox-background-color);
--gallery-text-color: var(--lightbox-text-color);
overflow: hidden;
}
@ -82,7 +91,7 @@ body {
border-radius: 100px;
}
::-webkit-scrollbar-thumb {
background-color: var(--gallery-secondary-color);
background-color: var(--scrollbar-color);
border-radius: 100px;
}
body {
@ -210,23 +219,20 @@ 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) var(--gallery-accent-color),
0.2em 0.2em 1em 0em rgba(0,0,0,0.8);
outline: solid calc(var(--gallery-current-image-border) / 5) var(--gallery-accent-color);
box-shadow: 0.2em 0.2em 1em 0em rgba(0,0,0,0.8);
}
/* current image... */
.gallery .images img.current {
z-index: 10;
box-shadow:
0px 0px 0px var(--gallery-current-image-border) var(--gallery-accent-color),
0.4em 0.4em 2em 0em rgba(0,0,0,0.8);
outline: solid var(--gallery-current-image-border) var(--gallery-accent-color);
box-shadow: 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) var(--gallery-secondary-accent-color),
0.6em 0.6em 3em 0em rgba(0,0,0,0.8);
outline: solid var(--gallery-current-image-border) var(--gallery-secondary-accent-color);
box-shadow: 0.6em 0.6em 3em 0em rgba(0,0,0,0.8);
}
@ -454,6 +460,7 @@ button:active {
/* buttons... */
.gallery .button,
.gallery .toolbar button {
min-width: var(--toolbar-button-size);
@ -654,16 +661,18 @@ button:active {
position: absolute;
top: 0;
right: 0;
}
.gallery .button {
disbplay: inline-block;
cursor: pointer;
width: var(--lightbox-button-size);
height: var(--lightbox-button-size);
margin: 0.2em;
font-size: var(--lightbox-button-size);
line-height: var(--lightbox-button-size);
color: var(--lightbox-text-color);
filter: saturate(0);
opacity: 0.1;
@ -672,30 +681,24 @@ button:active {
opacity: 1;
filter: saturate(1);
color: var(--lightbox-text-color);
/* XXX HACK: might be better to use SVG for this... */
text-shadow:
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);
transition: none;
}
/* controls: close... */
/* specific controls */
.gallery .button.close:after {
content: "✕";
/*color: red;*/
content: "close";
}
.gallery .button.fullscreen:after {
content: "⛶";
content: "fullscreen";
}
.gallery .button.info:after {
content: "i";
content: "info";
}
.gallery .button.prev:after {
content: "<";
content: "navigate_before";
}
.gallery .button.next:after {
content: ">";
content: "navigate_next";
}