/* =========================================================================== FICHIER GÉNÉRÉ — NE PAS MODIFIER À LA MAIN Source : src/renderer/src/styles/tokens.css Régénérer : node scripts/sync-design-tokens.mjs =========================================================================== */ /* ============================================================================= QUICKCUT — RÉGIE Le socle de la charte graphique. Tout le reste en découle. ============================================================================= Le monde retenu est celui d'une régie vidéo : baies d'appareils en tôle sombre, légendes sérigraphiées, voyant tally rouge quand ça part à l'antenne, mire SMPTE pour coder les sources. Ce n'est pas une ambiance posée sur l'application, c'est la même machine : un mélangeur de régie, c'est des sources pré-affectées à des entrées numérotées et une configuration qu'on rappelle. Un template QuickCut, c'est exactement ça. Un emplacement est une entrée. Lancer un rendu, c'est envoyer à l'antenne. Pourquoi sombre : une régie est volontairement maintenue dans la pénombre pour que les moniteurs se lisent juste, et les monteurs travaillent le soir sur un seul écran. C'est la scène réelle qui impose le fond, pas l'habitude du secteur. --------------------------------------------------------------------------- CE QUI A ÉTÉ REPRIS AILLEURS (chaque emprunt est une discipline, pas un costume : aucun de ces mondes n'entre dans l'image, seule sa rigueur reste) --------------------------------------------------------------------------- · Bureau 1 bit → un seul vocabulaire de contrôles, une seule épaisseur de trait (1px pour les filets, 1,5px pour les icônes). Aucune exception nulle part. · Grammaire → chaque panneau porte une plaque de légende qui le nomme industrielle EN TOUTES LETTRES. Une icône seule ne suffit jamais. · Jaquette de → la durée s'affiche comme un budget : temps total, temps cassette par clip, alignés à droite en chiffres tabulaires. · Tenségrité → aucun filet décoratif. Un trait visible sépare ou mesure ; s'il ne fait ni l'un ni l'autre, il dégage. · Pochette pop → un mode possède un champ, pas une pastille. Simple et Avancé changent la teinte du panneau, pour qu'on VOIE dans quel mode on est sans lire. · Boîte à → la tête de lecture est la seule ligne ininterrompue de la rythmes timeline, et une timeline vide se lit comme une invitation plutôt que comme un manque. ============================================================================= */ /* ----------------------------------------------------------------------------- 1. LA BAIE — thème sombre (défaut) -------------------------------------------------------------------------- */ :root, [data-theme='dark'] { /* Profondeurs de la baie, du fond de salle à la gravure. Cast bleu-vert léger : c'est la couleur de la tôle peinte, pas du gris neutre. Un gris neutre parfait est ce qui fait « thème sombre générique ». */ --rack-void: #0b0e10; /* derrière tout, la salle dans la pénombre */ --rack-body: #14181b; /* fond de baie */ --rack-panel: #1b2024; /* face d'un appareil */ --rack-panel-hi: #232a2f; /* panneau saillant, survol */ --rack-well: #0e1214; /* renfoncement : champs, afficheurs */ --rack-engrave: #2c343a; /* gravure, filet de séparation */ --rack-hairline: #39444b; /* trait d'échelle, filet appuyé */ /* Sérigraphie. Le blanc n'est pas pur : de la peinture blanche sur métal sombre tire toujours légèrement vers le froid. */ --legend: #e8edef; /* légende principale — 13,8:1 sur le panneau */ --legend-dim: #a3b0b6; /* légende secondaire — 7,4:1 */ --legend-faint: #6e7c84; /* désactivé et repères — 3,8:1, jamais du texte courant : réservé aux états inertes */ /* Signaux. Ils ont un sens fixe et ne servent à rien d'autre. */ --tally: #ff3b30; /* À L'ANTENNE : rendu en cours, destruction */ --tally-deep: #c41e14; --tally-soft: rgba(255, 59, 48, 0.14); --preview: #34c759; /* bus preview : prêt, sélectionné, réussi */ --preview-soft: rgba(52, 199, 89, 0.14); --hold: #ffb020; /* en attente : avertissement, verrou Studio */ --hold-soft: rgba(255, 176, 32, 0.14); /* Mire SMPTE. L'ordre réel des barres est blanc, jaune, cyan, vert, magenta, rouge, bleu. On y prend le codage des types d'élément : ce n'est pas un accent choisi au hasard, c'est un objet que le métier reconnaît. */ --bar-video: #e8d44d; /* jaune — 11,0:1 */ --bar-image: #4dd2e8; /* cyan — 9,2:1 */ --bar-text: #e84dc4; /* magenta — 5,0:1 */ --bar-video-soft: rgba(232, 212, 77, 0.16); --bar-image-soft: rgba(77, 210, 232, 0.16); --bar-text-soft: rgba(232, 77, 196, 0.16); /* Élévation. Une baie est éclairée par le haut : l'ombre porte vers le bas, avec un décalage ET un flou. Un halo coloré sans décalage, c'est de la décoration. */ --shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.44), 0 4px 16px rgba(0, 0, 0, 0.28); --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.36); --shadow-well: inset 0 1px 2px rgba(0, 0, 0, 0.55); color-scheme: dark; } /* ----------------------------------------------------------------------------- 2. LA DOCUMENTATION — thème clair -------------------------------------------------------------------------- */ /* Le thème clair n'est pas le thème sombre retourné. C'est l'autre document du même métier : la fiche technique imprimée de la baie. Papier, légendes noires, mêmes couleurs de mire assombries pour tenir sur du blanc. */ [data-theme='light'] { --rack-void: #e4e7e9; --rack-body: #f1f3f5; --rack-panel: #ffffff; --rack-panel-hi: #f6f8f9; --rack-well: #eceff1; --rack-engrave: #d2d9dd; --rack-hairline: #b4bfc5; --legend: #14181b; --legend-dim: #4a575e; --legend-faint: #79868d; --tally: #d32218; --tally-deep: #a3160e; --tally-soft: rgba(211, 34, 24, 0.1); --preview: #1c8b3c; --preview-soft: rgba(28, 139, 60, 0.1); --hold: #9a5a00; --hold-soft: rgba(154, 90, 0, 0.12); --bar-video: #7d6f00; --bar-image: #00697a; --bar-text: #9c007a; --bar-video-soft: rgba(125, 111, 0, 0.12); --bar-image-soft: rgba(0, 105, 122, 0.12); --bar-text-soft: rgba(156, 0, 122, 0.12); --shadow-panel: 0 1px 2px rgba(20, 24, 27, 0.08), 0 4px 14px rgba(20, 24, 27, 0.07); --shadow-lift: 0 2px 4px rgba(20, 24, 27, 0.1), 0 12px 28px rgba(20, 24, 27, 0.12); --shadow-well: inset 0 1px 2px rgba(20, 24, 27, 0.1); color-scheme: light; } /* ----------------------------------------------------------------------------- 3. GÉOMÉTRIE -------------------------------------------------------------------------- */ :root { /* Rayons très serrés. Un appareil de baie n'a pas de coins de 8 pixels : c'est justement ce rayon-là qui fait « encore une interface sombre de montage ». Ici on reste sur de la tôle. */ --r-flush: 0; --r-sm: 2px; --r-md: 3px; --r-lg: 4px; /* Une seule épaisseur de filet dans toute l'application. */ --line: 1px; --stroke-icon: 1.5px; /* Pas d'espacement, base 4. */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; /* Gabarits */ --sidebar-w: 208px; --panel-props-w: 288px; --panel-render-w: 344px; --tally-h: 3px; } /* ----------------------------------------------------------------------------- 4. LETTRAGE -------------------------------------------------------------------------- */ :root { --font-ui: 'Barlow', 'Segoe UI', system-ui, sans-serif; /* Les plaques de légende sont en condensé : c'est ce qui permet d'écrire un mot entier sur un bandeau étroit sans le tronquer, exactement le problème que résout la sérigraphie de baie. */ --font-legend: 'Barlow Semi Condensed', 'Barlow', system-ui, sans-serif; --font-plate: 'Barlow Condensed', 'Barlow Semi Condensed', system-ui, sans-serif; --t-plate: 10px; /* plaques gravées, majuscules */ --t-legend: 11px; /* légendes de champ */ --t-small: 12px; --t-body: 13px; --t-lead: 15px; --t-h3: 16px; --t-h2: 20px; --t-h1: 26px; } /* ----------------------------------------------------------------------------- 5. MOUVEMENT -------------------------------------------------------------------------- */ :root { /* Le cran. Un bouton de mélangeur ne rebondit pas : il se pose, net, et s'arrête. Sortie exponentielle, très courte, sans dépassement mou. */ --ease-detent: cubic-bezier(0.16, 1, 0.3, 1); --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --d-instant: 90ms; --d-detent: 160ms; --d-panel: 240ms; --d-tally: 420ms; } /* ----------------------------------------------------------------------------- 6. LES SURFACES QU'ON NE DESSINE PAS -------------------------------------------------------------------------- */ /* Sélection, curseur de saisie, ascenseurs, anneau de focus : livrés par le navigateur, ils n'appartiennent à aucune charte tant qu'on ne les habille pas. C'est le signal le moins cher qu'une interface a été construite et non assemblée, et c'est celui qu'on saute le plus souvent. */ ::selection { background: var(--tally-soft); color: var(--legend); } :root { caret-color: var(--tally); /* Les cases à cocher natives prennent cette couleur. Vert, pas rouge : une case cochée veut dire « actif », pas « à l'antenne ». Du rouge sur quatre réglages d'affichage vide le signal de tout son sens. */ accent-color: var(--preview); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--rack-void); } ::-webkit-scrollbar-thumb { background: var(--rack-engrave); border: 2px solid var(--rack-void); border-radius: var(--r-sm); } ::-webkit-scrollbar-thumb:hover { background: var(--rack-hairline); } ::-webkit-scrollbar-corner { background: var(--rack-void); } /* Le focus clavier doit être indiscutable sur un instrument : on utilise le vert du bus preview, jamais le rouge, qui veut dire « à l'antenne ». */ :focus-visible { outline: 2px solid var(--preview); outline-offset: 2px; border-radius: var(--r-sm); } :focus:not(:focus-visible) { outline: none; } /* Tous les nombres de l'application sont tabulaires. Un compteur de temps qui gigote pendant qu'il défile trahit un outil approximatif. */ :root { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }