/* ============================================================================ GRAVITY MEDIA — Hautschicht (Skin) ---------------------------------------------------------------------------- Zwei Erscheinungsbilder, eine Oberflaeche: ohne Attribut das Aussehen von immer (Space Grotesk, Zinc-Palette) der Look des GRAVITY OS (Geist, #070707, Akzent Orange) Wie das geht, ohne das Markup anzufassen: In index.html steht die Farbe als Tailwind-Klasse, 750-mal — `bg-zinc-900`, `text-zinc-400`, `bg-zinc-800/50`. Die `tailwind.config` dort zeigt diese Klassen NICHT mehr auf feste Farbwerte, sondern auf die Variablen hier. Dadurch bewegt ein Attributwechsel die ganze Oberflaeche, und keine einzige Klasse im JSX muss angefasst werden. Deshalb stehen die Farben hier als NACKTE ZAHLEN ("13 13 13"), nicht als #0D0D0D: nur so kann Tailwind die Deckkraft-Schreibweise `bg-zinc-800/50` noch selbst zusammensetzen. 126 Stellen haengen daran. Die Werte des OS-Looks stehen NICHT hier, sondern in gestaltung.css - der Kopie der GRAVITY-Gestaltung (Quelle: GRAVITY APP SERVICES/gestaltung/gravity.css, Regelwerk GESTALTUNG.md daneben), die index.html und die Anmeldeseite VOR dieser Datei laden. Hier wird nur zugeordnet: welche Tailwind-Stufe welcher Wert des Hauses ist. Die Kanaele (--ink-rgb, --accent-rgb ...) haben dort schon die Form, die Tailwind braucht ("13 13 13"). Aendert die Gestaltung einen Wert, zieht die Mediathek im OS-Look mit - ohne dass hier jemand etwas anfasst. Die Variablen der Gestaltung stehen auf :root, also auch im klassischen Look. Das ist unschaedlich: der klassische Look benutzt keine davon (nur --sk-*). ========================================================================== */ /* ---- Geist, wie im OS. Keine Fremdanfrage: die Dateien liegen nebenan. ----- */ @font-face{font-family:'Geist';font-style:normal;font-weight:200 700;font-display:swap; src:url('./fonts/geist-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Geist';font-style:normal;font-weight:200 700;font-display:swap; src:url('./fonts/geist-latinext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap; src:url('./fonts/geistmono-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap; src:url('./fonts/geistmono-latinext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* ============================================================================ 1 — Das Aussehen von immer. Exakt die Tailwind-Zinc-Werte, damit der klassische Look Pixel fuer Pixel bleibt, was er war. ========================================================================== */ :root{ --sk-zinc-50:250 250 250; --sk-zinc-100:244 244 245; --sk-zinc-200:228 228 231; --sk-zinc-300:212 212 216; --sk-zinc-400:161 161 170; --sk-zinc-500:113 113 122; --sk-zinc-600:82 82 91; --sk-zinc-700:63 63 70; --sk-zinc-800:39 39 42; --sk-zinc-900:24 24 27; --sk-zinc-950:9 9 11; --sk-white:255 255 255; --sk-black:0 0 0; /* Akzente in ihrer heutigen Bedeutung */ --sk-accent:129 140 248; /* indigo-400 — Auswahl, aktiv */ --sk-accent-600:79 70 229; /* indigo-600 */ --sk-pin:251 146 60; /* orange-400 — angeheftet */ --sk-ok:52 211 153; /* emerald-400 */ --sk-warn:251 191 36; /* amber-400 */ --sk-crit:248 113 113; /* red-400 */ --sk-font:'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; --sk-font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace; --sk-glow:99 102 241; /* indigo — der Schein um Glasflaechen */ --sk-radius-scale:1; } /* ============================================================================ 2 — Der Look des GRAVITY OS: die Tailwind-Leiter auf die Werte der Gestaltung ---------------------------------------------------------------------------- Die Zinc-Leiter bildet die Stufen des Hauses ab: 50 ist --ink, 400/500/600 sind --ink-2/-3/-4, 800/900/950 sind --raised-2/--panel/--ground. Die Richtung stimmt mit Tailwind ueberein (klein = hell, gross = dunkel), deshalb passt dieselbe Leiter fuer Schrift UND Flaeche. Die vier Zwischenstufen (100, 200, 300, 700) hat die Gestaltung nicht - sie sind Sache der Mediathek und stehen darum als Zahl hier. ========================================================================== */ [data-skin="os"]{ color-scheme:dark; --sk-zinc-50:var(--ink-rgb); --sk-zinc-100:212 212 212; --sk-zinc-200:196 196 196; --sk-zinc-300:176 176 176; --sk-zinc-400:var(--ink-2-rgb); --sk-zinc-500:var(--ink-3-rgb); --sk-zinc-600:var(--ink-4-rgb); --sk-zinc-700:42 42 42; --sk-zinc-800:var(--raised-2-rgb); --sk-zinc-900:var(--panel-rgb); --sk-zinc-950:var(--ground-rgb); --sk-white:var(--ink-rgb); /* das Haus kennt kein reines Weiss fuer Text */ --sk-black:var(--ground-rgb); --sk-accent:var(--accent-rgb); /* der eine Akzent */ --sk-accent-600:var(--accent-rgb); --sk-pin:var(--accent-rgb); --sk-ok:var(--ok-rgb); --sk-warn:var(--warn-rgb); /* Bedeutung, nicht Akzent - auch wenn der Ton gleich ist */ --sk-crit:var(--crit-rgb); --sk-font:var(--f-ui); --sk-font-mono:var(--f-mono); --sk-glow:var(--accent-rgb); } /* ============================================================================ 3 — Was die Klassen allein nicht erreichen ---------------------------------------------------------------------------- Schrift, Bildlaufleiste, Auswahlfarbe, und die drei Effektklassen aus der alten theme.css, die fest verdrahtete Indigo-Schatten tragen. ========================================================================== */ body{font-family:var(--sk-font)} .mono,code,kbd,pre{font-family:var(--sk-font-mono)} [data-skin="os"] body{background:var(--ground);color:var(--ink);-webkit-font-smoothing:antialiased} [data-skin="os"] ::selection{background:rgba(255,255,255,.35)} [data-skin="os"] :focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:6px} /* Milchglas und Schein: im OS neutral statt indigo, und flacher. */ [data-skin="os"] .glass{background:rgba(255,255,255,.04);backdrop-filter:blur(var(--blur)); border:1px solid var(--line)} [data-skin="os"] .glass-hover:hover{background:rgba(255,255,255,.07)} /* .glow und .glow-sm haengen jetzt in index.html selbst an --sk-glow. Keine Sonderregel hier: zwei Wahrheiten fuer dieselbe Sache altern schlecht. */ /* Rundungen: das OS ist etwas weicher als Tailwinds Standard. Nur die beiden Groessen, die in der Mediathek tragend sind — Pillen (rounded-full) bleiben Pillen, daran wird nicht gedreht. */ [data-skin="os"] .rounded-lg{border-radius:var(--r-m)} [data-skin="os"] .rounded-xl{border-radius:var(--r-l)} [data-skin="os"] .rounded-2xl{border-radius:var(--r-xl)} /* Im Rahmen des OS: kein eigener Hintergrund hinter der Seite, das OS malt ihn. */ [data-skin="os"][data-embedded="1"] body{background:transparent} /* ============================================================================ 4 — Bedeutungsfarben ---------------------------------------------------------------------------- Jede Stufe einzeln, damit der klassische Look exakt bleibt (indigo-400, -500 und -600 sind dort drei verschiedene Farben). Im OS fallen sie zusammen: das System kennt EINEN Akzent, plus ok / warn / krit (GESTALTUNG.md, Grundsaetze). Amber ist im klassischen Look die Warnfarbe und folgt darum --warn, Orange heisst "angeheftet" und folgt dem Akzent. Blau ist Beilage (--ink-2). ========================================================================== */ :root{ --sk-indigo-400:129 140 248; --sk-indigo-500:99 102 241; --sk-indigo-600:79 70 229; --sk-orange-400:251 146 60; --sk-orange-500:249 115 22; --sk-orange-600:234 88 12; --sk-red-400:248 113 113; --sk-red-500:239 68 68; --sk-red-600:220 38 38; --sk-emerald-400:52 211 153; --sk-emerald-500:16 185 129; --sk-emerald-600:5 150 105; --sk-amber-400:251 191 36; --sk-amber-500:245 158 11; --sk-amber-600:217 119 6; --sk-purple-500:168 85 247; --sk-pink-500:236 72 153; --sk-blue-400:96 165 250; --sk-blue-500:59 130 246; --sk-blue-600:37 99 235; } [data-skin="os"]{ --sk-indigo-400:var(--accent-rgb); --sk-indigo-500:var(--accent-rgb); --sk-indigo-600:var(--accent-rgb); --sk-orange-400:var(--accent-rgb); --sk-orange-500:var(--accent-rgb); --sk-orange-600:var(--accent-rgb); --sk-red-400:var(--crit-rgb); --sk-red-500:var(--crit-rgb); --sk-red-600:var(--crit-rgb); --sk-emerald-400:var(--ok-rgb); --sk-emerald-500:var(--ok-rgb); --sk-emerald-600:var(--ok-rgb); --sk-amber-400:var(--warn-rgb); --sk-amber-500:var(--warn-rgb); --sk-amber-600:var(--warn-rgb); --sk-purple-500:var(--accent-rgb); --sk-pink-500:var(--accent-rgb); --sk-blue-400:var(--ink-2-rgb); --sk-blue-500:var(--ink-2-rgb); --sk-blue-600:var(--ink-2-rgb); } /* Die 28 hellen Toene (…-50/100/200/300) sind in der klassischen Ansicht zarte Flaechen hinter Abzeichen. Als Vollton waeren sie im OS ein Schrei — hier werden sie zu dem, was das OS dafuer benutzt: dieselbe Farbe, wenig Deckkraft. */ [data-skin="os"] .bg-red-50{background-color:rgb(var(--crit-rgb) / .12)} [data-skin="os"] .bg-red-100{background-color:rgb(var(--crit-rgb) / .18)} [data-skin="os"] .border-red-200{border-color:rgb(var(--crit-rgb) / .35)} [data-skin="os"] .bg-orange-50{background-color:var(--accent-soft)} [data-skin="os"] .border-orange-200{border-color:rgb(var(--accent-rgb) / .35)} [data-skin="os"] .border-orange-300{border-color:rgb(var(--accent-rgb) / .45)} [data-skin="os"] .text-orange-300{color:var(--accent)} [data-skin="os"] .bg-emerald-50{background-color:rgb(var(--ok-rgb) / .12)} [data-skin="os"] .bg-emerald-100{background-color:rgb(var(--ok-rgb) / .18)} [data-skin="os"] .border-emerald-200{border-color:rgb(var(--ok-rgb) / .35)} [data-skin="os"] .bg-indigo-50{background-color:var(--accent-soft)} [data-skin="os"] .bg-indigo-100{background-color:rgb(var(--accent-rgb) / .18)} [data-skin="os"] .bg-amber-50{background-color:rgb(var(--warn-rgb) / .12)} [data-skin="os"] .bg-amber-100{background-color:rgb(var(--warn-rgb) / .18)} [data-skin="os"] .bg-blue-50{background-color:var(--signal-soft)} [data-skin="os"] .border-blue-200{border-color:var(--line-3)} /* Der Hell/Dunkel-Schalter hat im OS-Look keinen Sinn: dort ist dunkel gesetzt. Er verschwindet, statt eine Wahl anzubieten, die den Rahmen zerreissen wuerde. */ [data-skin="os"] [data-os-hide]{display:none} /* ============================================================================ 5 — Schriftgroesse ---------------------------------------------------------------------------- Nachgemessen, nicht geschaetzt. Im OS stehen die Textknoten zwischen 10 und 13 px, Schwerpunkt 12,5 und 11. In der Mediathek waren es 12 und 14 - jede Stufe also rund anderthalb Punkt groesser. Nebeneinander faellt das auf. Die Groessen stehen hier als Variablen und werden in der tailwind.config eingesetzt, NICHT als Regeln, die .text-sm ueberschreiben. Der Unterschied ist wichtig: eine Regel mit [data-skin] schlaegt jede Klasse - auch `sm:text-2xl`, das dann nie mehr greift und die Ueberschrift kleiner macht, als sie sein soll. Ueber die Konfiguration erben alle Varianten mit. Verschoben wird nur die Groesse. Die Zeilenhoehe bleibt, wie Tailwind sie gesetzt hat (14/20 wird zu 12,5/20): jede Zeile bleibt genau so hoch, kein Raster rutscht. Etwas luftiger als im OS - dafuer ohne ein verschobenes Pixel im Layout. Die Wurzelgroesse bleibt unberuehrt: an ihr haengen in Tailwind auch alle Abstaende (p-4 = 1rem). Wer daran dreht, verschiebt das ganze Raster. ========================================================================== */ :root{ --sk-t-xs:0.75rem; --sk-t-sm:0.875rem; --sk-t-base:1rem; --sk-t-lg:1.125rem; --sk-t-xl:1.25rem; --sk-t-2xl:1.5rem; --sk-t-3xl:1.875rem; --sk-t-4xl:2.25rem; } [data-skin="os"]{ --sk-t-xs:var(--t-xs); --sk-t-sm:var(--t-m); --sk-t-base:var(--t-base); --sk-t-lg:var(--t-l); --sk-t-xl:var(--t-xl); --sk-t-2xl:var(--t-2xl); --sk-t-4xl:var(--t-4xl); /* 25 px statt der Stufe --t-3xl (26 px): so steht es seit dem 27.09.2026. Angleichen waere eine sichtbare Aenderung - die macht man bewusst, nicht beim Umstellen. */ --sk-t-3xl:25px; } [data-skin="os"] body{font-size:var(--t-base)} /* text-[10px] und text-[11px] bleiben stehen: beide Groessen kommen im OS so vor. */