/* ═══════════════════════════════════════════════════════════════════════════
StudioTools — theme commun
───────────────────────────────────────────────────────────────────────────
A charger APRES la feuille de style de l'application :
socle + logo
theme impose
Principe : on ne redefinit que des VARIABLES deja utilisees par les apps.
Aucune regle de geometrie (taille, marge, position, display) n'est touchee —
seules changent les couleurs. Une app reste donc exactement dans sa mise en
page, mais prend la matiere commune.
Releve avant uniformisation (mesure sur les apps en production) :
· cartwall, prompteur, videodl, mire, guestbooth --bg #141618, accent or
· playout --ct-* / --zt-*, accent or
· radioscope --bg #0a0a0c, accent VERT
· levelscope --color-*, 3 themes propres
Deux exceptions assumees, expliquees plus bas : l'accent de radioscope et le
systeme de themes de levelscope ne sont pas touches.
═══════════════════════════════════════════════════════════════════════════ */
:root {
/* ——— Matiere commune ——— */
--st-t-void: #060607;
--st-t-bg: #0a0a0c;
--st-t-surface: #121215;
--st-t-surface-2: #16161a;
--st-t-surface-3: #1c1c21;
--st-t-hover: #26262c;
--st-t-line: #26262c;
--st-t-line-hi: #35353d;
--st-t-text: #ffffff;
--st-t-text-dim: #a3a3ad;
--st-t-text-faint: #6e6e79;
/* ——— Accent : rouge et blanc ——— */
--st-t-accent: #e4002b;
--st-t-accent-hover: #ff1f42;
--st-t-accent-text: #ff4152;
--st-t-accent-soft: rgba(228, 0, 43, .18);
--st-t-accent-dim: rgba(228, 0, 43, .22);
--st-t-on-accent: #ffffff;
}
/* ═══ Famille A — cartwall, prompteur, videodl, mire, guestbooth ═══
Ces cinq apps partagent le meme jeu de noms. Les redefinir les aligne
toutes d'un coup. */
:root {
--bg: var(--st-t-bg);
--surface: var(--st-t-surface);
--surface-2: var(--st-t-surface-2);
--surface-3: var(--st-t-surface-3);
--border: var(--st-t-line);
--border-strong: var(--st-t-line-hi);
--text: var(--st-t-text);
--text-dim: var(--st-t-text-dim);
--panel: var(--st-t-surface);
--line: var(--st-t-line);
--line-hi: var(--st-t-line-hi);
--header-bg: var(--st-t-surface);
--footer-bg: var(--st-t-surface);
--plot-bg: var(--st-t-void);
}
/* Accent : uniquement pour les apps ou il est decoratif.
L'attribut data-st-accent="keep" sur laisse l'app garder le sien —
voir la section radioscope. */
html:not([data-st-accent="keep"]) {
--accent: var(--st-t-accent);
--accent-hover: var(--st-t-accent-hover);
--accent-soft: var(--st-t-accent-soft);
--accent-dim: var(--st-t-accent-dim);
--accent-light: var(--st-t-accent-text);
--accent-dark: #b80023;
--on-accent: var(--st-t-on-accent);
}
/* ═══ Famille B — playout (prefixes --ct-* et --zt-*) ═══ */
:root {
--ct-bg: var(--st-t-bg);
--ct-surface: var(--st-t-surface);
--ct-surface-2: var(--st-t-surface-2);
--ct-surface-3: var(--st-t-surface-3);
--ct-border: var(--st-t-line);
--ct-border-strong: var(--st-t-line-hi);
--ct-text: var(--st-t-text);
--ct-text-dim: var(--st-t-text-dim);
--zt-bg: var(--st-t-bg);
--zt-bg-row: var(--st-t-surface);
--zt-bg-row-alt: var(--st-t-surface-2);
}
html:not([data-st-accent="keep"]) {
--ct-accent: var(--st-t-accent);
--ct-accent-hover: var(--st-t-accent-hover);
--ct-accent-soft: var(--st-t-accent-soft);
}
/* ═══ Typographie commune ═══
DM Sans etait deja la police de 11 apps sur 16 : on generalise l'existant
plutot que d'imposer autre chose. Seules videoscope (Arial) et radio
(Plus Jakarta Sans) divergeaient. */
body,
button,
input,
select,
textarea {
font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* Les valeurs chiffrees restent en chasse fixe : c'est un repere de lecture
en regie, pas une coquetterie. */
[class*="mono"],
[class*="value"],
[class*="readout"],
[class*="timecode"],
[class*="clock"] {
font-family: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}
/* ═══ Barres de defilement ═══ */
* {
scrollbar-color: var(--st-t-line-hi) transparent;
scrollbar-width: thin;
}
*::-webkit-scrollbar {
width: 10px;
height: 10px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background: var(--st-t-line-hi);
border-radius: 5px;
}
*::-webkit-scrollbar-thumb:hover {
background: #4a4a55;
}
/* ═══ Selection ═══ */
::selection {
background: var(--st-t-accent-soft);
color: var(--st-t-text);
}
/* ═══ Focus visible — un seul style partout ═══ */
:focus-visible {
outline: 2px solid var(--st-t-accent-text);
outline-offset: 2px;
}