luckyimnotanigger/redlib
1
0
Fork 0
mirror of https://github.com/redlib-org/redlib.git synced 2025-06-18 23:20:58 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

use .gallery_overlay + add experimental progress dots

Browse source
This commit is contained in:
DokterKaj 2024-10-23 00:26:44 +08:00
parent f39cf81e5b
commit 07b367d304
2 changed files with 78 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

82
static/style.css
View file

@ -1179,9 +1179,10 @@ a.search_subreddit:hover {
.gallery {
display: flex;
flex-flow: row nowrap;
align-items: center;
overflow-x: auto;
scroll-snap-type: x mandatory;
align-items: center;
overscroll-behavior-x: none;
background: var(--background);
transition: background 0.2s;
}
@ -1197,25 +1198,80 @@ a.search_subreddit:hover {
margin: 0;
}
.gallery_length {
.gallery_overlay {
flex: 1 0 100%;
height: 100%;
position: sticky;
flex-shrink: 0;
align-self: start;
right: 2%;
top: 2%;
width: 6em;
padding: 10px 5px;
margin-left: calc(-6em - 5px*2);
text-align: center;
background-color: rgba(0, 0, 0, 0.8);
border-radius: 5px;
left: 0;
margin-left: -100%;
pointer-events: none;
display: flex;
justify-content: center;
transition: opacity 0.2s;
}
.gallery_length:focus {
.gallery:focus-within .gallery_overlay {
opacity: 0;
}
.gallery:not(:focus-within) .gallery_overlay * {
pointer-events: auto;
}
.gallery_length {
position: absolute;
right: 10px;
top: 10px;
padding: 10px;
text-align: center;
background-color: rgba(0, 0, 0, 0.8);
border-radius: 5px;
}
@supports not (animation-timeline: scroll()) {
.gallery_progress {
display: none;
}
}
.gallery_progress {
position: absolute;
bottom: 10px;
padding: 10px;
background-color: rgba(0, 0, 0, 0.8);
border-radius: 20px;
display: flex;
gap: 10px;
}
.gallery_dot,
.gallery_dot_indicator {
width: 10px;
height: 10px;
box-sizing: border-box;
border: 1px solid var(--text);
border-radius: 50%;
}
.gallery_dot_indicator {
background: var(--text);
position: absolute;
animation-name: galleryDotIndicatorScroll;
animation-timeline: scroll(inline nearest);
animation-timing-function: linear;
}
@keyframes galleryDotIndicatorScroll {
from {
left: 10px;
}
to {
left: calc(100% - 10px);
transform: translateX(-100%);
}
}
.gallery img {
display: block;
margin: auto;