/* ═══════════════════════════════════════════════════════════════════════════ StudioTools — socle d'interface commun ─────────────────────────────────────────────────────────────────────────── A inclure dans le de chaque app, APRES sa propre feuille de style : Regle de conception : ce fichier est ADDITIF. Tous les jetons sont prefixes `--st-` et toutes les classes `.st-`, afin de ne jamais entrer en collision avec le CSS existant d'une application. Aucune regle ne cible un selecteur generique (body, h1, button…) : reprendre les 19 apps a zero serait long et risque, alors qu'ajouter une barre commune ne casse rien. ═══════════════════════════════════════════════════════════════════════════ */ @import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap"); :root { /* ——— Fonds ——— */ --st-void: #060607; --st-bg: #0a0a0c; --st-surface: #121215; --st-surface-2: #16161a; --st-raised: #1c1c21; --st-hover: #26262c; /* ——— Traits ——— */ --st-line: #26262c; --st-line-2: #35353d; /* ——— Texte : blanc franc ——— */ --st-text: #ffffff; --st-text-2: #a3a3ad; --st-text-3: #6e6e79; /* ——— Accent : rouge et blanc ——— Deux valeurs, parce qu'un aplat et du texte n'ont pas les memes exigences : --st-accent sert de fond (texte blanc dessus), --st-accent-text sert au texte rouge pose sur fond sombre, ou il faut plus de luminosite pour rester lisible. */ --st-accent: #e4002b; --st-accent-text: #ff4152; --st-accent-soft: rgba(228, 0, 43, .16); --st-accent-line: rgba(228, 0, 43, .34); --st-on-accent: #ffffff; /* ——— Etats. Jamais reteintes : ce sont des reperes de regie. ——— */ --st-ok: #3dce6a; --st-warn: #e8a010; --st-over: #ff4444; --st-info: #4aa3ff; /* ——— Typographie ——— */ --st-font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --st-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; /* ——— Metriques ——— */ --st-appbar-h: 34px; --st-radius: 8px; } /* ═══ Logo StudioTools — 100 % CSS, aucune image ═══ Principe repris de la famille des mots-symboles broadcast (bloc plein portant la premiere moitie du nom, seconde moitie en appui, le tout dans un cadre tres horizontal). Dessin, proportions et couleurs sont propres a StudioTools : rien n'est repris d'une marque existante. Emplois : barre d'application page d'accueil carre seul (favicon, onglet) */ .st-logo { --st-logo-h: 22px; --st-logo-pad: .42em; display: inline-flex; align-items: stretch; height: var(--st-logo-h); border: 1px solid var(--st-line-2); border-radius: 4px; overflow: hidden; font-family: var(--st-font); font-weight: 700; font-size: calc(var(--st-logo-h) * .52); line-height: 1; letter-spacing: -.01em; white-space: nowrap; user-select: none; vertical-align: middle; box-sizing: border-box; } /* Bloc plein : « Studio » en negatif sur l'accent */ .st-logo > b { display: inline-flex; align-items: center; padding: 0 var(--st-logo-pad); background: var(--st-accent); color: var(--st-on-accent); font-weight: 700; } /* Appui : « Tools » sur le fond de la barre */ .st-logo > i { display: inline-flex; align-items: center; padding: 0 calc(var(--st-logo-pad) * 1.1); background: transparent; color: var(--st-text); font-style: normal; font-weight: 500; } .st-logo--sm { --st-logo-h: 18px; border-radius: 3px; } .st-logo--lg { --st-logo-h: 34px; border-radius: 6px; } /* Carre seul : on ne garde que le bloc plein, initiale « S » */ .st-logo--mark { width: var(--st-logo-h); justify-content: center; border-color: transparent; } .st-logo--mark > b { padding: 0; width: 100%; justify-content: center; } .st-logo--mark > i { display: none; } /* Fond clair : a demander explicitement par .st-logo--clair. Surtout PAS via prefers-color-scheme — la preference systeme ne dit rien du fond reel de l'app. Une app en theme sombre sur un systeme en clair se retrouvait avec « Tools » ecrit en noir sur noir. */ .st-logo--clair { border-color: rgba(0, 0, 0, .22); } .st-logo--clair > i { color: #12141a; } .st-logo--text.st-logo--clair > b { color: #12141a; } .st-logo--text.st-logo--clair > i { color: var(--st-accent-text); } /* Lien portant le logo : pas de soulignement herite */ a .st-logo { text-decoration: none; } /* ═══ Variante texte — signature sans cadre ═══ C'est la forme employee DANS les en-tetes d'application : un bloc encadre ferait doublon avec le nom de l'app affiche juste a cote, et alourdirait une barre deja dense. Le bloc plein (.st-logo) reste pour la page d'accueil et les grands formats, ou il a la place de respirer. */ .st-logo--text { border: 0; border-radius: 0; height: auto; overflow: visible; font-size: 14px; font-weight: 700; letter-spacing: -.015em; align-items: baseline; } .st-logo--text > b { background: none; /* Blanc par defaut ; le script bascule sur .st-logo--clair quand le fond mesure est clair. Ni inherit (qui ramasserait la couleur d'accent de l'hote) ni prefers-color-scheme (qui ignore le theme reel de l'app). */ color: #ffffff; padding: 0; font-weight: 700; } .st-logo--text > i { background: none; color: var(--st-accent-text); padding: 0; font-weight: 700; font-style: normal; } /* Les apps StudioTools posent data-theme sur . En theme clair, le rouge doit etre assombri pour tenir le contraste sur un fond pale. */ [data-theme="light"] .st-logo--text > i, [data-theme="light"] .st-logo--clair > i { color: #c1001f; } /* Dans une greffe, la signature s'aligne sur la taille de l'en-tete hote */ .st-grafted > .st-appbar-home .st-logo--text { font-size: 13px; } @media (max-width: 520px) { .st-grafted > .st-appbar-home .st-logo--text > i { display: inline; } .st-grafted > .st-appbar-home .st-logo--text { font-size: 12px; } } /* ═══ Barre d'application commune ═══ « StudioTools · », coin superieur gauche, sur toutes les apps. */ .st-appbar { display: flex; align-items: center; gap: 10px; height: var(--st-appbar-h); padding: 0 12px; background: linear-gradient(180deg, var(--st-raised) 0%, var(--st-surface) 100%); border-bottom: 1px solid var(--st-line); font-family: var(--st-font); font-size: 13px; line-height: 1; color: var(--st-text); user-select: none; position: relative; z-index: 2147483000; box-sizing: border-box; } .st-appbar * { box-sizing: border-box; } .st-appbar-home { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; padding: 4px 6px; margin-left: -6px; border-radius: 6px; transition: background .15s ease; } .st-appbar-home:hover { background: var(--st-hover); } .st-appbar-home:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 1px; } .st-appbar-brand { font-weight: 700; letter-spacing: -.01em; white-space: nowrap; } .st-appbar-brand em { font-style: normal; color: var(--st-accent); } .st-appbar-sep { color: var(--st-line-2); font-weight: 400; } .st-appbar-app { font-family: var(--st-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--st-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .st-appbar-spacer { margin-left: auto; } /* Emplacement libre a droite : une app peut y injecter ses propres boutons via document.querySelector('.st-appbar-slot'). */ .st-appbar-slot { display: flex; align-items: center; gap: 8px; } /* ——— Icones : bibliotheque unique ——— */ .st-icon { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; font-size: 18px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20; } /* ——— Ecrans etroits : le nom de l'app passe en seconde ligne d'info ——— */ @media (max-width: 520px) { .st-appbar { padding: 0 8px; gap: 8px; } .st-appbar-app { font-size: 10px; letter-spacing: .05em; } } /* ——— Impression : la barre n'a rien a y faire ——— */ @media print { .st-appbar { display: none !important; } } /* ——— Respect des preferences systeme ——— */ @media (prefers-reduced-motion: reduce) { .st-appbar-home { transition: none; } } /* ═══ Mode insertion ═══ Quand le logo est greffe dans l'en-tete d'une app (data-mount), il doit s'aligner sur la typographie hote sans lui imposer la sienne. */ .st-grafted { display: flex; align-items: center; } .st-grafted > .st-appbar-home { padding: 2px 4px; margin-left: -4px; margin-right: 2px; flex: none; } .st-graft-sep { margin: 0 6px 0 2px; flex: none; font-size: 12px; line-height: 1; opacity: .8; } /* Sous 520 px, l'en-tete hote est souvent deja a l'etroit : on reduit le logo a son carre plutot que de pousser le nom de l'app hors champ. */ @media (max-width: 520px) { .st-graft-sep { margin: 0 4px; } }