mirrors/nitter
Watch
1
0
Fork
You've already forked nitter
 0
mirror of https://github.com/zedeus/nitter synced 2026-09-05 14:49:32 +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() {
var embedElement = document.querySelector('.tweet-embed, .embed-video');
var embedElement = document.querySelector('.embed-wrapper, .tweet-embed, .embed-video');
if (!embedElement) return;
var lastHeight = 0;

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

@ -117,6 +117,7 @@
}
}
body:has(> .embed-wrapper),
body:has(> .tweet-embed) {
margin: 0;
padding: 0;
@ -125,22 +126,45 @@ body:has(> .tweet-embed) {
overflow: hidden;
}
html:has(body > .embed-wrapper),
html:has(body > .tweet-embed) {
background: transparent;
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 {
position: relative;
width: 100%;
box-sizing: border-box;
background-color: var(--bg_panel);
border: 1px solid var(--border_grey);
border-radius: 12px;
overflow: hidden;
transition: background-color 0.15s ease;
&:hover:not(:has(.embed-footer:hover)) {
&:hover {
background-color: var(--bg_hover);
}
@ -180,8 +204,10 @@ html:has(body > .tweet-embed) {
display: flex;
align-items: center;
justify-content: center;
min-height: 80px;
min-height: 160px;
padding: 20px;
border: 1px solid var(--border_grey);
border-radius: 12px;
cursor: default;
&:hover {
@ -192,26 +218,6 @@ html:has(body > .tweet-embed) {
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 {

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)
body:
tdiv(class="tweet-embed"):
a(class="tweet-link", href=getLink(tweet), target="_blank")
renderTweet(tweet, prefs, path, mainTweet=true)
tdiv(class="embed-wrapper"):
tdiv(class="tweet-embed"):
a(class="tweet-link", href=getLink(tweet), target="_blank")
renderTweet(tweet, prefs, path, mainTweet=true)
a(class="embed-footer", href=getLink(tweet), target="_blank"):
text "Read more on " & cfg.hostname