melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: use css variable for player segment color

Browse Source
This commit is contained in:
mkelvers
2026-06-12 11:38:03 +02:00
parent ab9d585a1f
commit c509144b30
2 changed files with 5 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
static/assets/style.css
View File

@@ -45,6 +45,7 @@
--scrollbar-track: light-dark(rgba(0, 0, 0, 0.04), rgba(244, 241, 234, 0.05));
--scrollbar-thumb: light-dark(rgba(0, 0, 0, 0.16), rgba(244, 241, 234, 0.22));
--scrollbar-thumb-hover: light-dark(rgba(0, 0, 0, 0.26), rgba(244, 241, 234, 0.32));
--player-segment: #0ea5e9;
}
html[data-theme="light"] {

10
static/player/skip/segments.ts
View File

@@ -61,14 +61,12 @@ export const renderSegments = (): void => {
const bounds = state.video.duration;
if (bounds <= 0) return;
// create clearly visible colored bars for each segment
state.activeSegments.forEach((s) => {
const bar = document.createElement("div");
// use distinct colors so segments are readable over buffered/progress fills
bar.className = "absolute top-0 h-full opacity-95";
// distinct colors for OP/ED, rendered above buffered/progress fills
const t = (s.type || "").toLowerCase();
bar.style.backgroundColor = t === "ed" ? "#60a5fa" : "#f5c542";
bar.className = "absolute opacity-95";
bar.style.backgroundColor = "var(--player-segment)";
bar.style.top = "-1px";
bar.style.height = "calc(100% + 2px)";
bar.style.left = `${(s.start / bounds) * 100}%`;
bar.style.width = `${((s.end - s.start) / bounds) * 100}%`;
track.appendChild(bar);