mirrors/redlib
1
0
Fork 0
mirror of https://github.com/redlib-org/redlib.git synced 2025-04-05 22:17:41 +03:00
Code Issues Projects Releases Packages Wiki Activity

adapt to .post_thumbnail being a wrapper + add unblur on click styles

Browse source
This commit is contained in:
DokterKaj 2024-10-14 14:19:31 +08:00 • committed by GitHub
parent 3f33a73001
commit 6e7de2f966
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 26 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

28
static/style.css
View file

@ -1141,10 +1141,11 @@ a.search_subreddit:hover {
filter: blur(0.25rem); filter: blur(0.25rem);
} }
.post_blurred .post_thumbnail * { .post_blurred .post_thumbnail a * {
filter: blur(0.3rem); filter: blur(0.3rem);
} }
/* Unblur on hover */
.post_blurred .post_media_content:hover *, .post_blurred .post_media_content:hover *,
.post_blurred .post_media_content:hover ~ .post_body, .post_blurred .post_media_content:hover ~ .post_body,
.post_blurred .post_media_content:has(~ .post_body:hover) *, .post_blurred .post_media_content:has(~ .post_body:hover) *,
@ -1153,6 +1154,22 @@ a.search_subreddit:hover {
filter: none; filter: none;
} }
/* Unblur on click */
.post_blurred .post_media_content a,
.post_blurred .post_body a,
.post_blurred .post_thumbnail a {
pointer-events: none;
}
.post_blurred .post_media_content:focus *,
.post_blurred .post_media_content:focus ~ .post_body,
.post_blurred .post_media_content:has(~ .post_body:focus) *,
.post_blurred .post_body:focus,
.post_blurred .post_thumbnail:focus * {
filter: none;
pointer-events: auto;
}
.post_media_image svg { .post_media_image svg {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
@ -1306,13 +1323,16 @@ a.search_subreddit:hover {
.post_thumbnail { .post_thumbnail {
border-radius: 5px; border-radius: 5px;
border: var(--panel-border); border: var(--panel-border);
display: grid;
overflow: hidden; overflow: hidden;
background-color: var(--background); background-color: var(--background);
grid-area: post_thumbnail; grid-area: post_thumbnail;
margin: 5px; margin: 5px;
} }
.post_thumbnail a {
display: grid;
}
.post_thumbnail div { .post_thumbnail div {
grid-area: 1 / 1 / 2 / 2; grid-area: 1 / 1 / 2 / 2;
object-fit: cover; object-fit: cover;
@ -1334,6 +1354,10 @@ a.search_subreddit:hover {
background-color: var(--highlighted); background-color: var(--highlighted);
} }
.post_thumbnail.no_thumbnail a {
height: 100%;
}
.post_thumbnail.no_thumbnail svg { .post_thumbnail.no_thumbnail svg {
grid-area: 1 / 1 / 2 / 2; grid-area: 1 / 1 / 2 / 2;
align-self: center; align-self: center;