astra/prism
1
0
Fork 0
mirror of https://github.com/Boof2015/prism.git synced 2026-08-16 16:21:11 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix sliders

Browse Source
This commit is contained in:
Boof2015
2026-03-28 03:20:32 -04:00
parent 501297d31e
commit 45e7f6ed86
3 changed files with 86 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/BottomBar.tsx
+3
View File
@@ -112,6 +112,8 @@ export default function BottomBar({ onClose, onHeightChange }: BottomBarProps):
? 'Capture Failed'
: 'Idle'
const trimPercent = Math.min(100, Math.max(0, ((inputGainDb + 12) / 24) * 100))
return (
<div className="bottom-bar" ref={rootRef}>
<div className="bottom-bar__rail" aria-label="Global settings">
@@ -238,6 +240,7 @@ export default function BottomBar({ onClose, onHeightChange }: BottomBarProps):
max={12}
step={0.5}
value={inputGainDb}
style={{ '--range-percent': `${trimPercent}%` } as CSSProperties}
onChange={(event) => setInputGain(Number(event.target.value))}
onDoubleClick={() => setInputGain(0)}
/>
src/renderer/components/ScopeSettingsSection.tsx
+6 -1
View File
@@ -1,4 +1,4 @@
import type { JSX, ReactNode } from 'react'
import type { CSSProperties, JSX, ReactNode } from 'react'
import type { ScopeKind } from '../../types/scope'
import { SCOPE_LABELS } from '../../types/scope'
import type { ScopeSettings } from '../../types/settings'
@@ -137,6 +137,10 @@ function RangeControl({
disabled?: boolean
onChange: (value: number) => void
}): JSX.Element {
const percent = max > min
? Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100))
: 0
return (
<label className={`settings-control ${fullWidth ? 'settings-control--full' : ''} ${disabled ? 'is-disabled' : ''}`.trim()}>
<span className="settings-control__label">
@@ -150,6 +154,7 @@ function RangeControl({
max={max}
step={step}
value={value}
style={{ '--range-percent': `${percent}%` } as CSSProperties}
disabled={disabled}
onChange={(event) => onChange(Number(event.target.value))}
/>
src/renderer/styles/globals.css
+77 -18
View File
@@ -610,42 +610,101 @@ select {
.settings-control__range {
width: 100%;
height: 16px;
--range-percent: 50%;
height: 22px;
margin: 0;
appearance: none;
background: transparent;
cursor: ew-resize;
}
.settings-control__range::-webkit-slider-runnable-track {
height: 2px;
height: 6px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.1) 28%, rgba(var(--accent-rgb), 0.5));
border: 1px solid rgba(255, 255, 255, 0.05);
background:
linear-gradient(90deg, rgba(var(--accent-rgb), 0.82), rgba(var(--accent-rgb), 0.46)) 0 / var(--range-percent) 100% no-repeat,
linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 0 0 1px rgba(0, 0, 0, 0.22);
}
.settings-control__range::-webkit-slider-thumb {
appearance: none;
width: 10px;
height: 10px;
margin-top: -4px;
border-radius: 50%;
border: 1px solid rgba(var(--accent-rgb), 0.72);
background: rgba(5, 7, 10, 0.98);
box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.18);
width: 12px;
height: 16px;
margin-top: -6px;
border-radius: 5px;
border: 1px solid rgba(var(--accent-rgb), 0.78);
background: linear-gradient(180deg, rgba(20, 26, 34, 0.98), rgba(7, 10, 15, 0.98));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 0 0 2px rgba(var(--accent-rgb), 0.14),
0 3px 8px rgba(0, 0, 0, 0.35);
}
.settings-control__range::-moz-range-track {
height: 2px;
height: 6px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.1) 28%, rgba(var(--accent-rgb), 0.5));
border: 1px solid rgba(255, 255, 255, 0.05);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 0 0 1px rgba(0, 0, 0, 0.22);
}
.settings-control__range::-moz-range-thumb {
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid rgba(var(--accent-rgb), 0.72);
background: rgba(5, 7, 10, 0.98);
box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.18);
width: 12px;
height: 16px;
border-radius: 5px;
border: 1px solid rgba(var(--accent-rgb), 0.78);
background: linear-gradient(180deg, rgba(20, 26, 34, 0.98), rgba(7, 10, 15, 0.98));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 0 0 2px rgba(var(--accent-rgb), 0.14),
0 3px 8px rgba(0, 0, 0, 0.35);
}
.settings-control__range::-moz-range-progress {
height: 6px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.02);
background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.82), rgba(var(--accent-rgb), 0.46));
}
.settings-control__range:hover::-webkit-slider-runnable-track,
.settings-control__range:focus-visible::-webkit-slider-runnable-track {
background:
linear-gradient(90deg, rgba(var(--accent-rgb), 0.92), rgba(var(--accent-rgb), 0.58)) 0 / var(--range-percent) 100% no-repeat,
linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
}
.settings-control__range:hover::-moz-range-progress,
.settings-control__range:focus-visible::-moz-range-progress {
background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.92), rgba(var(--accent-rgb), 0.58));
}
.settings-control__range:hover::-webkit-slider-thumb,
.settings-control__range:focus-visible::-webkit-slider-thumb {
border-color: rgba(var(--accent-rgb), 0.96);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.16),
0 0 0 3px rgba(var(--accent-rgb), 0.18),
0 3px 10px rgba(0, 0, 0, 0.4);
}
.settings-control__range:hover::-moz-range-thumb,
.settings-control__range:focus-visible::-moz-range-thumb {
border-color: rgba(var(--accent-rgb), 0.96);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.16),
0 0 0 3px rgba(var(--accent-rgb), 0.18),
0 3px 10px rgba(0, 0, 0, 0.4);
}
.settings-control__range:focus-visible {
outline: none;
}
.settings-chip-row {