wehub-resource-sync
8f10353f0c
CI / lint (push) Has been cancelled
CI / js-syntax (push) Successful in 10m24s
CI / deps-audit (push) Has been cancelled
CI / test (push) Failing after 24m55s
CI / sast-bandit (push) Failing after 11m13s
CI / trivy (push) Failing after 9m32s
Docker Publish / build-and-push (push) Failing after 34m3s
107 lines
3.0 KiB
CSS
107 lines
3.0 KiB
CSS
/* ───────────── Master fader + VU ─────────────
|
|
* Console-style: tick-marked vertical fader on the left, twin segmented
|
|
* LED VU meters on the right, both inside a recessed dark panel.
|
|
* Custom rendering throughout — `appearance: none` so the browser
|
|
* doesn't fall back to its blue-track default vertical slider, which
|
|
* ignores ::-webkit-slider-thumb overrides and offsets the thumb. */
|
|
|
|
.np-master {
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: 10px;
|
|
height: 140px;
|
|
padding: 8px 10px;
|
|
background: linear-gradient(180deg, #141414, #0d0d0d);
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/* Fader column with tick marks down both sides. */
|
|
.master-fader-track {
|
|
position: relative;
|
|
height: 100%;
|
|
width: 44px;
|
|
display: flex;
|
|
align-items: stretch;
|
|
justify-content: center;
|
|
}
|
|
.master-fader-track::before,
|
|
.master-fader-track::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 4px;
|
|
bottom: 4px;
|
|
width: 5px;
|
|
background-image: repeating-linear-gradient(
|
|
to bottom,
|
|
var(--line-strong) 0,
|
|
var(--line-strong) 1px,
|
|
transparent 1px,
|
|
transparent 8px
|
|
);
|
|
pointer-events: none;
|
|
}
|
|
.master-fader-track::before { left: 4px; }
|
|
.master-fader-track::after { right: 4px; }
|
|
|
|
.master-fader {
|
|
/* No `appearance: slider-vertical` — that's a legacy webkit shortcut
|
|
that forces a blue-track default vertical slider AND ignores
|
|
::-webkit-slider-thumb overrides (which is why the thumb floats
|
|
left of center). `writing-mode: vertical-lr` rotates the
|
|
horizontal range input, `direction: rtl` puts max at the top. */
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
-moz-appearance: none;
|
|
writing-mode: vertical-lr;
|
|
direction: rtl;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
outline: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.master-fader::-webkit-slider-runnable-track {
|
|
width: 4px;
|
|
height: 100%;
|
|
background: #050505;
|
|
border: 1px solid var(--line);
|
|
border-radius: 2px;
|
|
}
|
|
.master-fader::-moz-range-track {
|
|
width: 4px;
|
|
height: 100%;
|
|
background: #050505;
|
|
border: 1px solid var(--line);
|
|
border-radius: 2px;
|
|
}
|
|
.master-fader::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
/* In writing-mode: vertical-lr, `width` is the long (horizontal) axis
|
|
and `height` is the thin (vertical) axis. Pill-shaped horizontal
|
|
handle. margin-left: -12px centers it on the 4px track. */
|
|
width: 28px;
|
|
height: 14px;
|
|
margin-left: -12px;
|
|
background: linear-gradient(180deg, #6a6a6a 0%, #2a2a2a 55%, #161616 100%);
|
|
border: 1px solid #050505;
|
|
border-radius: 3px;
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.18),
|
|
inset 0 -1px 0 rgba(0, 0, 0, 0.7),
|
|
0 1px 2px rgba(0, 0, 0, 0.7);
|
|
cursor: pointer;
|
|
}
|
|
.master-fader::-moz-range-thumb {
|
|
width: 28px;
|
|
height: 14px;
|
|
background: linear-gradient(180deg, #6a6a6a 0%, #2a2a2a 55%, #161616 100%);
|
|
border: 1px solid #050505;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
}
|