luckyimnotanigger/redlib
1
0
Fork 0
mirror of https://github.com/redlib-org/redlib.git synced 2025-04-28 09:38:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix reblurring and disabling after focusing on link

Browse source
This commit is contained in:
DokterKaj 2024-10-15 01:14:16 +08:00
parent ac7eb2e97b
commit eacb0cf7fd
1 changed files with 43 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
static/style.css
View file

@ -1146,36 +1146,55 @@ a.search_subreddit:hover {
} }
/* Unblur on hover */ /* Unblur on hover */
.post_blurred .post_media_content:hover *, .post_blurred .post_media_content:not([tabindex]):hover *,
.post_blurred .post_media_content:hover ~ .post_body, .post_blurred .post_media_content:not([tabindex]):hover ~ .post_body,
.post_blurred .post_media_content:has(~ .post_body:hover) *, .post_blurred .post_media_content:not([tabindex]):has(~ .post_body:hover) *,
.post_blurred .post_body:hover, .post_blurred .post_body:not([tabindex]):hover,
.post_blurred .post_thumbnail:hover * { .post_blurred .post_thumbnail:not([tabindex]):hover a * {
filter: none; filter: none;
} }
/* Unblur on click */ /* Unblur on click */
.post_blurred .post_media_content a, .post_blurred {
.post_blurred .post_body a, .post_media_content[tabindex],
.post_blurred .post_thumbnail a { .post_body[tabindex],
.post_thumbnail[tabindex] {
cursor: pointer;
/* Disable links when link is not focused */
a:not(:focus) {
pointer-events: none; pointer-events: none;
} }
.post_blurred .post_media_content:focus a,
.post_blurred .post_media_content:focus ~ .post_body a,
.post_blurred .post_media_content:has(~ .post_body:focus) a,
.post_blurred .post_body:focus a,
.post_blurred .post_thumbnail:focus a {
pointer-events: auto;
} }
.post_blurred .post_media_content:focus *, /* Enable links when content is focused */
.post_blurred .post_media_content:focus ~ .post_body, .post_media_content:focus a,
.post_blurred .post_media_content:has(~ .post_body:focus) *, .post_media_content:focus ~ .post_body a,
.post_blurred .post_body:focus, .post_media_content:has(~ .post_body:focus) a,
.post_blurred .post_thumbnail:focus * { .post_body:focus a,
.post_thumbnail:focus a,
/* Keep enabling links when a link is focused */
.post_media_content:has(*:focus) a,
.post_media_content:has(*:focus) ~ .post_body a,
.post_media_content:has(~ .post_body a:focus) a,
.post_body:has(a:focus) a {
pointer-events: auto !important;
}
/* Unblur when content is focused */
.post_media_content:focus *,
.post_media_content:focus ~ .post_body,
.post_media_content:has(~ .post_body:focus) *,
.post_body:focus,
.post_thumbnail:focus a *,
/* Keep unblurring when link or video is focused */
.post_media_content:has(*:focus) *,
.post_media_content:has(*:focus) ~ .post_body,
.post_media_content:has(~ .post_body a:focus) *,
.post_body:has(a:focus),
.post_thumbnail a:focus * {
filter: none; filter: none;
} }
}
.post_media_image svg { .post_media_image svg {
max-width: 100%; max-width: 100%;