calcazar/frontend-helper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

8iz120vqu: Move the views and kind labels into a meta row below the media

Browse Source
This commit is contained in:
calcazar
2026-10-20 08:03:05 -06:00
parent baecf8d865
commit 961b25e84a
2 changed files with 17 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/trending.css
+4 -32
View File
@@ -78,39 +78,14 @@
.trend-play svg { width: 18px; height: 18px; margin-left: 2px; }
.trend-play:hover { transform: scale(1.1); background: color-mix(in srgb, var(--on-accent) calc(100% - 72%), transparent); }
.trend-play:focus-visible { outline: 2px solid var(--on-accent); outline-offset: 2px; }
.trend-views {
position: absolute;
left: 12px;
bottom: 10px;
z-index: 2;
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
color: var(--on-accent);
pointer-events: none;
}
.trend-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.trend-views { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.trend-views svg { width: 15px; height: 15px; }
.trend-kind {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 2;
font-size: 10.5px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--on-accent);
opacity: .85;
pointer-events: none;
}
.trend-kind { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
/* While a video plays its own controls take over the frame. */
.trend-media-playing .trend-scrim,
.trend-media-playing .trend-who,
.trend-media-playing .trend-play,
.trend-media-playing .trend-views,
.trend-media-playing .trend-kind { opacity: 0; visibility: hidden; }
.trend-media-playing .trend-play { opacity: 0; visibility: hidden; }
.trend-q {
margin: 0;
@@ -126,6 +101,3 @@
.minnect-audio { width: 100%; height: 36px; }
.rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* A video keeps its native control bar, so the labels ride above it. */
.trend-media:has(video) .trend-views,
.trend-media:has(video) .trend-kind { bottom: 46px; }