Hugging Face's logo

Spaces:
tfrere
/
radio
Running

App Files Community
radio / src /theme.css
tfrere's picture
tfrere HF Staff
Cursor
feat(theme): make the dial and knob panels follow dark mode
c0c7a6f
Raw History Blame Contribute Delete
5.36 kB
/* Minimal design tokens + component kit. Reachy-orange accent, light + dark
driven by the `data-theme` attribute set in index.html. Everything reads CSS
variables so it flips with the host theme for free. */
:root,
[data-theme="dark"] {
--bg: #0e0f11;
--surface: #17181b;
--surface-2: #1f2125;
--border: #2a2c31;
--fg: #f2f3f5;
--muted: #9aa0a8;
--primary: #ff9f0a; /* Reachy orange (dark surfaces) */
--primary-tint: rgba(255, 159, 10, 0.16);
/* The dial and the knob panels. Kept below --surface so they read as recessed
into the chassis rather than laid on top of it. */
--inset-surface: #101114;
--inset-fg: #f2f3f5;
--inset-muted: #9aa0a8;
--success: #4caf50;
--radius: 12px;
--font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
[data-theme="light"] {
--bg: #f5f6f8;
--surface: #ffffff;
--surface-2: #f0f1f4;
--border: #e2e4e9;
--fg: #1a1c1f;
--muted: #6b7280;
--primary: #ff9500; /* Reachy orange */
--primary-tint: rgba(255, 149, 0, 0.1);
--inset-surface: #ffffff;
--inset-fg: #1a1c1f;
--inset-muted: #6b7280;
--success: #2e9e46;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
height: 100%;
}
body {
background: var(--bg);
color: var(--fg);
font-family: var(--font);
-webkit-font-smoothing: antialiased;
}
.panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1rem 1.1rem;
}
.btn {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
background: transparent;
color: var(--fg);
font: inherit;
font-size: 0.82rem;
font-weight: 600;
line-height: 1.1;
padding: 0.45rem 0.75rem;
border-radius: 8px;
cursor: pointer;
transition:
background 0.12s ease,
border-color 0.12s ease,
color 0.12s ease,
opacity 0.12s ease;
}
.btn:hover:not(:disabled) {
background: var(--primary-tint);
border-color: var(--primary);
color: var(--primary);
}
.btn:active:not(:disabled) {
opacity: 0.88;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Primary = outlined (kit default for interactions): transparent fill, primary
border + text, tinted on hover. Selected/active states use the tint fill. */
.btn.primary {
background: transparent;
border-color: var(--primary);
color: var(--primary);
}
.btn.primary:hover:not(:disabled) {
background: var(--primary-tint);
border-color: var(--primary);
}
.btn.toggled {
background: var(--primary-tint);
border-color: var(--primary);
color: var(--primary);
}
/* Size variant: hero-level actions (e.g. the station search bar). The compact
counterpart (.btn-compact) lives with the list styles in app.css. */
.btn-big {
font-size: 0.92rem;
padding: 0.62rem 1.1rem;
border-radius: 10px;
}
.segmented {
display: inline-flex;
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
}
.segmented button {
appearance: none;
border: 0;
background: transparent;
color: var(--muted);
font: inherit;
font-size: 0.78rem;
padding: 0.4rem 0.7rem;
cursor: pointer;
}
.segmented button[aria-pressed="true"] {
background: var(--primary-tint);
color: var(--primary);
}
.segmented button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* Tooltip: single reused bubble, positioned by src/tooltip.ts. High-contrast
(inverted) surface via --fg so it flips with the theme. */
.tooltip {
position: fixed;
top: 0;
left: 0;
z-index: 2000;
max-width: 220px;
padding: 0.4rem 0.55rem;
border-radius: 8px;
background: var(--fg);
color: var(--bg);
font-family: var(--font);
font-size: 0.72rem;
font-weight: 600;
line-height: 1.25;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.24);
pointer-events: none;
opacity: 0;
transform: translateY(2px);
transition:
opacity 0.12s ease,
transform 0.12s ease;
}
.tooltip[data-show="true"] {
opacity: 1;
transform: translateY(0);
}
.tooltip::after {
content: "";
position: absolute;
width: 8px;
height: 8px;
background: inherit;
transform: rotate(45deg);
}
.tooltip[data-placement="top"]::after {
bottom: -3px;
left: var(--arrow-left, 50%);
margin-left: -4px;
}
.tooltip[data-placement="bottom"]::after {
top: -3px;
left: var(--arrow-left, 50%);
margin-left: -4px;
}
.tooltip[data-placement="left"]::after {
right: -3px;
top: var(--arrow-top, 50%);
margin-top: -4px;
}
.tooltip[data-placement="right"]::after {
left: -3px;
top: var(--arrow-top, 50%);
margin-top: -4px;
}
@media (prefers-reduced-motion: reduce) {
.tooltip {
transition: opacity 0.12s ease;
transform: none;
}
.tooltip[data-show="true"] {
transform: none;
}
}
input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
border-radius: 999px;
background: var(--surface-2);
border: 1px solid var(--border);
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--primary);
cursor: pointer;
border: 2px solid var(--surface);
}
input[type="range"]::-moz-range-thumb {
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--primary);
cursor: pointer;
border: 2px solid var(--surface);
}