k1nq/TREK
1
0
Fork 0
mirror of https://github.com/mauriceboe/TREK.git synced 2026-07-18 19:36:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(settings): TREK-styled text-size sliders

Browse Source 
The appearance tab's native range inputs become proper TREK sliders: a thin
pill track filled up to the current value in the accent color, with a soft
round thumb that scales slightly on hover/drag.
This commit is contained in:
Maurice
2026-07-02 23:55:12 +02:00
committed by Maurice
parent 8ffdb9e153
commit f4dbe02702
2 changed files with 37 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Settings/AppearanceSettingsTab.tsx
+4 -2
View File
@@ -457,7 +457,8 @@ function SliderRow({ label, value, onChange }: { label: string; value: number; o
step={0.05}
value={value}
onChange={(e) => onChange(Number(e.target.value))}
style={{ width: '100%', accentColor: 'var(--accent)', cursor: 'pointer' }}
className="trek-range"
style={{ '--fill': `${((value - APPEARANCE_SCALE_MIN) / (APPEARANCE_SCALE_MAX - APPEARANCE_SCALE_MIN)) * 100}%` } as React.CSSProperties}
/>
</div>
)
@@ -482,7 +483,8 @@ function SizeRow({ sampleClass, name, example, sample, value, onChange }: { samp
step={0.05}
value={value}
onChange={(e) => onChange(Number(e.target.value))}
style={{ width: '100%', accentColor: 'var(--accent)', cursor: 'pointer' }}
className="trek-range"
style={{ '--fill': `${((value - APPEARANCE_SCALE_MIN) / (APPEARANCE_SCALE_MAX - APPEARANCE_SCALE_MIN)) * 100}%` } as React.CSSProperties}
/>
</div>
)
client/src/index.css
+33
View File
@@ -1093,3 +1093,36 @@ img[alt="TREK"] {
.dp-day-header:hover .dp-day-actions,
.dp-day-header[data-selected="true"] .dp-day-actions { opacity: 1; }
}
/* ── TREK range slider — thin filled track + soft round thumb ─────────────── */
.trek-range {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 5px;
border-radius: 999px;
background: linear-gradient(to right, var(--accent) var(--fill, 50%), var(--border-faint) var(--fill, 50%));
outline: none;
cursor: pointer;
}
.trek-range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--bg-card, #fff);
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
transition: transform 0.12s ease;
}
.trek-range::-webkit-slider-thumb:hover { transform: scale(1.1); }
.trek-range::-webkit-slider-thumb:active { transform: scale(1.18); }
.trek-range::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--bg-card, #fff);
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.trek-range::-moz-range-track { height: 5px; border-radius: 999px; background: transparent; }