Files
Psychotoxical-psysonic/src/styles/layout/scrubber.css
T
Frank Stellmacher 18bf3adb1f refactor(styles): split layout.css into per-section files (#658)
layout.css (3209 LOC) → 29 per-section files in src/styles/layout/ +
an index.css that imports them in original cascade order.

Same mechanic as theme.css + components.css splits: top-level sections
detected by single-dash or 3+ dash header decoration. Concatenating in
@import order reproduces the original byte stream (+1 trailing newline,
cosmetic).

Generated via /tmp/split-layout-css.mjs.
2026-05-13 19:15:40 +02:00

59 lines
1.1 KiB
CSS

/* ─── Scrubber ─── */
.mp-scrubber-wrap {
padding: 12px 0 2px;
flex-shrink: 0;
}
.mp-scrubber {
position: relative;
height: 28px;
display: flex;
align-items: center;
cursor: pointer;
touch-action: none;
}
.mp-scrubber-bg {
position: absolute;
left: 0;
right: 0;
height: 4px;
border-radius: 2px;
background: var(--ctp-surface2, rgba(255,255,255,0.12));
}
.mp-scrubber-fill {
position: absolute;
left: 0;
height: 4px;
border-radius: 2px;
background: var(--accent);
transition: width 0.08s linear;
}
.mp-scrubber-thumb {
position: absolute;
top: 50%;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--accent);
transform: translate(-50%, -50%);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
transition: transform 0.1s ease;
}
.mp-scrubber:active .mp-scrubber-thumb {
transform: translate(-50%, -50%) scale(1.3);
}
.mp-scrubber-times {
display: flex;
justify-content: space-between;
padding-top: 4px;
font-size: 11px;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}