filipriec/universal_web_loco_rewrite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

player for the songs works now

Browse Source
This commit is contained in:
Priec
2026-05-19 19:11:01 +02:00
parent 4597b120f4
commit f405ddab65
6 changed files with 356 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
assets/static/css/theme.css
View File

@@ -312,6 +312,16 @@ body {
.term-track:first-child { border-top: 0; }
.term-track .btn { flex: none; }
.term-track-name { font-size: 0.9rem; }
/* "play album" row sitting above the per-track list */
.term-track-bar {
display: flex;
align-items: center;
gap: 0.7rem;
padding-bottom: 0.65rem;
margin-bottom: 0.15rem;
border-bottom: 1px solid oklch(var(--b3));
}
.term-track-bar .btn { flex: none; }
/* --- persistent audio player bar --------------------------- */
/* Hidden until the first song plays; shown by adding `uw-playing`
@@ -375,11 +385,119 @@ body {
line-height: 1;
}
.uw-player-close:hover { color: oklch(var(--er)); border-color: oklch(var(--er)); }
/* transport + playlist toggle buttons in the player bar */
.uw-player-btn {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
min-width: 2.85rem;
height: 2.85rem;
padding: 0 0.6rem;
font-size: 1.05rem;
background: transparent;
border: 1px solid oklch(var(--b3));
color: oklch(var(--bc) / 0.78);
cursor: pointer;
line-height: 1;
}
.uw-player-btn:hover { color: oklch(var(--p)); border-color: oklch(var(--p)); }
.uw-queue-badge {
font-size: 0.72rem;
font-weight: 700;
min-width: 1.25rem;
padding: 0.05rem 0.3rem;
background: oklch(var(--p));
color: oklch(var(--pc));
}
#uw-player:not(.uw-has-queue) .uw-queue-badge { display: none; }
/* --- the SoundCloud-style playlist panel ------------------- */
.uw-queue {
width: 100%;
max-width: 72rem;
margin: 0 auto;
border-bottom: 1px solid oklch(var(--b3));
}
.uw-queue[hidden] { display: none; }
.uw-queue-head {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.6rem 1.5rem;
border-bottom: 1px solid oklch(var(--b3));
}
.uw-queue-title { font-weight: 700; font-size: 0.95rem; color: oklch(var(--p)); }
.uw-queue-meta { font-size: 0.8rem; color: oklch(var(--bc) / 0.6); }
.uw-queue-clear {
margin-left: auto;
padding: 0.25rem 0.6rem;
font-size: 0.8rem;
background: transparent;
border: 1px solid oklch(var(--b3));
color: oklch(var(--bc) / 0.7);
cursor: pointer;
}
.uw-queue-clear:hover { color: oklch(var(--er)); border-color: oklch(var(--er)); }
.uw-queue-list {
list-style: none;
margin: 0;
padding: 0.35rem 0;
max-height: 15rem;
overflow-y: auto;
}
.uw-queue-item {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.4rem 1.5rem;
}
.uw-queue-item:hover { background: oklch(var(--b3) / 0.5); }
.uw-queue-item.is-current { background: oklch(var(--p) / 0.12); }
.uw-queue-jump {
flex: none;
width: 1.85rem;
height: 1.85rem;
font-size: 0.8rem;
background: transparent;
border: 1px solid oklch(var(--b3));
color: oklch(var(--bc) / 0.7);
cursor: pointer;
line-height: 1;
}
.uw-queue-item.is-current .uw-queue-jump { color: oklch(var(--p)); border-color: oklch(var(--p)); }
.uw-queue-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.9rem;
cursor: pointer;
}
.uw-queue-item.is-current .uw-queue-name { color: oklch(var(--p)); font-weight: 600; }
.uw-queue-remove {
flex: none;
width: 1.85rem;
height: 1.85rem;
font-size: 0.8rem;
background: transparent;
border: 1px solid transparent;
color: oklch(var(--bc) / 0.5);
cursor: pointer;
line-height: 1;
}
.uw-queue-remove:hover { color: oklch(var(--er)); border-color: oklch(var(--er)); }
@media (max-width: 640px) {
.uw-player-tag { display: none; }
.uw-player-title { max-width: 9rem; font-size: 0.95rem; }
.uw-player-inner { padding: 0.75rem 0.95rem; gap: 0.75rem; }
.uw-player-title { max-width: 7rem; font-size: 0.95rem; }
.uw-player-inner { padding: 0.75rem 0.95rem; gap: 0.6rem; }
.uw-playing body { padding-bottom: 5.75rem; }
.uw-player-btn { min-width: 2.4rem; height: 2.4rem; padding: 0 0.4rem; font-size: 0.95rem; }
.uw-player-close { width: 2.4rem; height: 2.4rem; }
#uw-audio { height: 2.7rem; min-width: 7rem; }
.uw-queue-head, .uw-queue-item { padding-left: 0.95rem; padding-right: 0.95rem; }
}
/* --- vim-style statusline (the footer) --------------------- */