mirrors/nitter
Watch
1
0
Fork
You've already forked nitter
 0
mirror of https://github.com/zedeus/nitter synced 2026-09-05 22:59:31 +00:00
Code Issues Projects Releases Packages Wiki Activity

Simplify embed hover CSS with wrapper element

Browse source
This commit is contained in:
Zed 2026-08-09 00:58:35 +07:00
commit a00c6cc11d
3 changed files with 36 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

2
public/js/embedResize.js
View file

@ -1,5 +1,5 @@
(function() { (function() {
var embedElement = document.querySelector('.tweet-embed, .embed-video'); var embedElement = document.querySelector('.embed-wrapper, .tweet-embed, .embed-video');
if (!embedElement) return; if (!embedElement) return;
var lastHeight = 0; var lastHeight = 0;

56
src/sass/tweet/_base.scss
View file

@ -117,6 +117,7 @@
} }
} }
body:has(> .embed-wrapper),
body:has(> .tweet-embed) { body:has(> .tweet-embed) {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -125,22 +126,45 @@ body:has(> .tweet-embed) {
overflow: hidden; overflow: hidden;
} }
html:has(body > .embed-wrapper),
html:has(body > .tweet-embed) { html:has(body > .tweet-embed) {
background: transparent; background: transparent;
overflow: hidden; overflow: hidden;
} }
.embed-wrapper {
width: 100%;
box-sizing: border-box;
border: 1px solid var(--border_grey);
border-radius: 12px;
overflow: hidden;
.embed-footer {
display: block;
padding: 12px 16px;
border-top: 1px solid var(--border_grey);
background: var(--bg_panel);
color: var(--accent);
font-size: 14px;
font-weight: 500;
text-align: center;
text-decoration: none;
transition: background-color 0.15s;
&:hover {
background: var(--bg_hover);
}
}
}
.tweet-embed { .tweet-embed {
position: relative; position: relative;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
background-color: var(--bg_panel); background-color: var(--bg_panel);
border: 1px solid var(--border_grey);
border-radius: 12px;
overflow: hidden;
transition: background-color 0.15s ease; transition: background-color 0.15s ease;
&:hover:not(:has(.embed-footer:hover)) { &:hover {
background-color: var(--bg_hover); background-color: var(--bg_hover);
} }
@ -180,8 +204,10 @@ html:has(body > .tweet-embed) {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-height: 80px; min-height: 160px;
padding: 20px; padding: 20px;
border: 1px solid var(--border_grey);
border-radius: 12px;
cursor: default; cursor: default;
&:hover { &:hover {
@ -192,26 +218,6 @@ html:has(body > .tweet-embed) {
margin: 0; margin: 0;
} }
} }
.embed-footer {
position: relative;
z-index: 2;
display: block;
padding: 12px 16px;
border-top: 1px solid var(--border_grey);
background: var(--bg_panel);
color: var(--accent);
font-size: 14px;
font-weight: 500;
text-align: center;
text-decoration: none;
pointer-events: all;
transition: background-color 0.15s;
&:hover {
background: var(--bg_hover);
}
}
} }
.attribution { .attribution {

7
src/views/embed.nim
View file

@ -35,9 +35,10 @@ proc renderTweetEmbed*(tweet: Tweet; path: string; prefs: Prefs; cfg: Config; re
renderHead(prefs, cfg, req) renderHead(prefs, cfg, req)
body: body:
tdiv(class="tweet-embed"): tdiv(class="embed-wrapper"):
a(class="tweet-link", href=getLink(tweet), target="_blank") tdiv(class="tweet-embed"):
renderTweet(tweet, prefs, path, mainTweet=true) a(class="tweet-link", href=getLink(tweet), target="_blank")
renderTweet(tweet, prefs, path, mainTweet=true)
a(class="embed-footer", href=getLink(tweet), target="_blank"): a(class="embed-footer", href=getLink(tweet), target="_blank"):
text "Read more on " & cfg.hostname text "Read more on " & cfg.hostname