simon/jacuzzi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Overlay duration and uploader on card thumbnails

Browse Source 
Move the duration (bottom-right) and uploader (bottom-left) onto the
thumbnail as dark-transparent pills instead of text rows below it, for
both .video-card and .favorite-card. Wrap the thumbnail in .video-thumb
to anchor the overlays; uploader stays clickable and truncates with
ellipsis. Favorite cards now show duration too (was stored, never shown).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Simon
2026-06-30 08:38:54 +00:00
parent 138c3224de
commit 1d0b435e87
3 changed files with 63 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
frontend/css/style.css
View File

@@ -789,12 +789,6 @@ body.theme-light .setting-item select option {
line-height: 1.3;
}
.favorite-info p {
margin: 4px 0 0 0;
font-size: 12px;
color: var(--text-secondary);
}
.favorites-empty {
font-size: 13px;
color: var(--text-secondary);
@@ -934,6 +928,11 @@ body.theme-light .setting-item select option {
border-color: var(--border-hover);
}
.video-thumb {
position: relative;
display: block;
}
.video-card img {
width: 100%;
aspect-ratio: 16 / 9;
@@ -942,6 +941,47 @@ body.theme-light .setting-item select option {
background: var(--bg-tertiary);
}
/* Dark-transparent pills overlaid on the bottom of the thumbnail.
Scoped under .video-thumb so they outrank the later .uploader-link rule. */
.video-thumb .video-uploader,
.video-thumb .video-duration {
position: absolute;
bottom: 8px;
z-index: 3;
padding: 3px 8px;
border-radius: 6px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 12px;
font-weight: 500;
line-height: 1.2;
backdrop-filter: blur(2px);
pointer-events: none;
}
.video-thumb .video-duration {
right: 8px;
}
.video-thumb .video-uploader {
left: 8px;
max-width: 60%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border: none;
text-align: left;
font-family: inherit;
cursor: pointer;
pointer-events: auto;
}
.video-thumb .video-uploader:hover {
background: rgba(0, 0, 0, 0.78);
color: #fff;
text-decoration: underline;
}
.video-card h4 {
font-size: 15px;
font-weight: 500;
@@ -982,10 +1022,6 @@ body.theme-light .setting-item select option {
margin: 0;
}
.video-meta {
padding-bottom: 4px;
}
.video-tags {
display: flex;
flex-wrap: nowrap;
@@ -1064,12 +1100,6 @@ body.theme-light .setting-item select option {
text-decoration: underline;
}
.video-duration {
color: var(--text-primary);
opacity: 0.8;
font-weight: 500;
}
.video-menu-btn {
position: absolute;
top: 10px;