mirror of
https://github.com/redlib-org/redlib.git
synced 2025-04-23 23:39:15 +00:00
simplify with :focus-within to fix right-click taking two tries + add "Unblur post" tooltip
This commit is contained in:
DokterKaj
parent
eacb0cf7fd
commit
3b180e590b
2 changed files with 45 additions and 50 deletions
|
|
@ -1141,8 +1141,8 @@ a.search_subreddit:hover {
|
|||
filter: blur(0.25rem);
|
||||
}
|
||||
|
||||
.post_blurred .post_thumbnail a * {
|
||||
filter: blur(0.3rem);
|
||||
.post_blurred .post_thumbnail * {
|
||||
filter: blur(0.25rem);
|
||||
}
|
||||
|
||||
/* Unblur on hover */
|
||||
|
|
@ -1150,50 +1150,45 @@ a.search_subreddit:hover {
|
|||
.post_blurred .post_media_content:not([tabindex]):hover ~ .post_body,
|
||||
.post_blurred .post_media_content:not([tabindex]):has(~ .post_body:hover) *,
|
||||
.post_blurred .post_body:not([tabindex]):hover,
|
||||
.post_blurred .post_thumbnail:not([tabindex]):hover a * {
|
||||
.post_blurred .post_thumbnail:not([tabindex]):hover * {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
/* Unblur on click */
|
||||
.post_blurred {
|
||||
.post_media_content[tabindex],
|
||||
.post_body[tabindex],
|
||||
.post_thumbnail[tabindex] {
|
||||
cursor: pointer;
|
||||
/* Disable links when link is not focused */
|
||||
a:not(:focus) {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Enable links when content is focused */
|
||||
.post_media_content:focus a,
|
||||
.post_media_content:focus ~ .post_body a,
|
||||
.post_media_content:has(~ .post_body:focus) a,
|
||||
.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;
|
||||
}
|
||||
.post_blurred .post_media_content[tabindex]:not(:focus-within) *,
|
||||
.post_blurred .post_body[tabindex]:not(:focus-within) a,
|
||||
.post_blurred .post_thumbnail[tabindex]:not(:focus-within) a {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
.post_blurred .post_media_content[tabindex]:not(:focus-within),
|
||||
.post_blurred .post_body[tabindex]:not(:focus-within),
|
||||
.post_blurred .post_thumbnail[tabindex]:not(:focus-within) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.post_blurred .post_media_content:focus-within *,
|
||||
.post_blurred .post_media_content:focus-within ~ .post_body,
|
||||
.post_blurred .post_media_content:has(~ .post_body:focus-within) *,
|
||||
.post_blurred .post_body:focus-within,
|
||||
.post_blurred .post_thumbnail:focus-within * {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.post_blurred .post_media_content:focus-within *,
|
||||
.post_blurred .post_media_content:focus-within ~ .post_body a,
|
||||
.post_blurred .post_media_content:has(~ .post_body:focus-within) *,
|
||||
.post_blurred .post_body:focus-within a,
|
||||
.post_blurred .post_thumbnail:focus-within a {
|
||||
pointer-events: unset !important;
|
||||
}
|
||||
|
||||
.post_blurred .post_media_content:focus-within,
|
||||
.post_blurred .post_media_content:focus-within ~ .post_body,
|
||||
.post_blurred .post_media_content:has(~ .post_body:focus-within),
|
||||
.post_blurred .post_body:focus-within,
|
||||
.post_blurred .post_thumbnail:focus-within {
|
||||
cursor: unset !important;
|
||||
}
|
||||
|
||||
.post_media_image svg {
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@
|
|||
<!-- POST MEDIA -->
|
||||
<!-- post_type: {{ post.post_type }} -->
|
||||
{% if post.post_type == "image" %}
|
||||
<div class="post_media_content"{% if post_should_be_blurred %} tabindex="-1"{% endif %}>
|
||||
<div class="post_media_content"{% if post_should_be_blurred %} tabindex="-1" title="Unblur post"{% endif %}>
|
||||
<a href="{{ post.media.url }}" class="post_media_image" >
|
||||
{% if post.media.height == 0 || post.media.width == 0 %}
|
||||
<!-- i.redd.it images special case -->
|
||||
|
|
@ -121,7 +121,7 @@
|
|||
{% else if post.post_type == "video" || post.post_type == "gif" %}
|
||||
{% if prefs.use_hls == "on" && !post.media.alt_url.is_empty() %}
|
||||
<script src="/hls.min.js"></script>
|
||||
<div class="post_media_content"{% if post_should_be_blurred %} tabindex="-1"{% endif %}>
|
||||
<div class="post_media_content"{% if post_should_be_blurred %} tabindex="-1" title="Unblur post"{% endif %}>
|
||||
<video class="post_media_video short {% if prefs.autoplay_videos == "on" %}hls_autoplay{% endif %}" {% if post.media.width > 0 && post.media.height > 0 %}width="{{ post.media.width }}" height="{{ post.media.height }}"{% endif %} poster="{{ post.media.poster }}" preload="none" controls>
|
||||
<source src="{{ post.media.alt_url }}" type="application/vnd.apple.mpegurl" />
|
||||
<source src="{{ post.media.url }}" type="video/mp4" />
|
||||
|
|
@ -129,7 +129,7 @@
|
|||
</div>
|
||||
<script src="/playHLSVideo.js"></script>
|
||||
{% else %}
|
||||
<div class="post_media_content"{% if post_should_be_blurred %} tabindex="-1"{% endif %}>
|
||||
<div class="post_media_content"{% if post_should_be_blurred %} tabindex="-1" title="Unblur post"{% endif %}>
|
||||
<video class="post_media_video" src="{{ post.media.url }}" controls {% if prefs.autoplay_videos == "on" %}autoplay{% endif %} loop><a href={{ post.media.url }}>Video</a></video>
|
||||
</div>
|
||||
{% call render_hls_notification(post.permalink[1..]) %}
|
||||
|
|
@ -153,7 +153,7 @@
|
|||
{% endif %}
|
||||
|
||||
<!-- POST BODY -->
|
||||
<div class="post_body"{% if post_should_be_blurred %} tabindex="-1"{% endif %}>
|
||||
<div class="post_body"{% if post_should_be_blurred %} tabindex="-1" title="Unblur post"{% endif %}>
|
||||
{{ post.body|safe }}
|
||||
{% call poll(post) %}
|
||||
</div>
|
||||
|
|
@ -249,7 +249,7 @@
|
|||
</h2>
|
||||
<!-- POST MEDIA/THUMBNAIL -->
|
||||
{% if (prefs.layout.is_empty() || prefs.layout == "card") && post.post_type == "image" %}
|
||||
<div class="post_media_content"{% if post_should_be_blurred %} tabindex="-1"{% endif %}>
|
||||
<div class="post_media_content"{% if post_should_be_blurred %} tabindex="-1" title="Unblur post"{% endif %}>
|
||||
<a href="{{ post.media.url }}" class="post_media_image {% if post.media.height < post.media.width*2 %}short{% endif %}" >
|
||||
{% if post.media.height == 0 || post.media.width == 0 %}
|
||||
<!-- i.redd.it images speical case -->
|
||||
|
|
@ -269,20 +269,20 @@
|
|||
</div>
|
||||
{% else if (prefs.layout.is_empty() || prefs.layout == "card") && (post.post_type == "gif" || post.post_type == "video") %}
|
||||
{% if prefs.use_hls == "on" && !post.media.alt_url.is_empty() %}
|
||||
<div class="post_media_content"{% if post_should_be_blurred %} tabindex="-1"{% endif %}>
|
||||
<div class="post_media_content"{% if post_should_be_blurred %} tabindex="-1" title="Unblur post"{% endif %}>
|
||||
<video class="post_media_video short{% if prefs.autoplay_videos == "on" %} hls_autoplay{% endif %}" {% if post.media.width > 0 && post.media.height > 0 %}width="{{ post.media.width }}" height="{{ post.media.height }}"{% endif %} poster="{{ post.media.poster }}" controls preload="none">
|
||||
<source src="{{ post.media.alt_url }}" type="application/vnd.apple.mpegurl" />
|
||||
<source src="{{ post.media.url }}" type="video/mp4" />
|
||||
</video>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="post_media_content"{% if post_should_be_blurred %} tabindex="-1"{% endif %}>
|
||||
<div class="post_media_content"{% if post_should_be_blurred %} tabindex="-1" title="Unblur post"{% endif %}>
|
||||
<video class="post_media_video short" src="{{ post.media.url }}" {% if post.media.width > 0 && post.media.height > 0 %}width="{{ post.media.width }}" height="{{ post.media.height }}"{% endif %} poster="{{ post.media.poster }}" preload="none" controls {% if prefs.autoplay_videos == "on" %}autoplay{% endif %}><a href={{ post.media.url }}>Video</a></video>
|
||||
</div>
|
||||
{% call render_hls_notification(format!("{}%23{}", &self.url[1..].replace("&", "%26").replace("+", "%2B"), post.id)) %}
|
||||
{% endif %}
|
||||
{% else if post.post_type != "self" %}
|
||||
<div class="post_thumbnail{% if post.thumbnail.url.is_empty() %} no_thumbnail{% endif %}"{% if post_should_be_blurred %} tabindex="-1"{% endif %}>
|
||||
<div class="post_thumbnail{% if post.thumbnail.url.is_empty() %} no_thumbnail{% endif %}"{% if post_should_be_blurred %} tabindex="-1" title="Unblur post"{% endif %}>
|
||||
<a href="{% if post.post_type == "link" %}{{ post.media.url }}{% else %}{{ post.permalink }}{% endif %}" rel="nofollow">
|
||||
{% if post.thumbnail.url.is_empty() %}
|
||||
<svg viewBox="0 0 100 106" width="140" height="53" xmlns="http://www.w3.org/2000/svg">
|
||||
|
|
@ -310,7 +310,7 @@
|
|||
•
|
||||
{% endif %}
|
||||
<span class="label"> Upvotes</span></div>
|
||||
<div class="post_body post_preview"{% if post_should_be_blurred %} tabindex="-1"{% endif %}>
|
||||
<div class="post_body post_preview"{% if post_should_be_blurred %} tabindex="-1" title="Unblur post"{% endif %}>
|
||||
{{ post.body|safe }}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue