/* ============================================================ Monochromator-Spezifikation (/monochromator) Eigenständige, interaktive Spec-Seite in Editor-Gestalt: eine Workbench (Titlebar, Sidebar mit den Regeln, Editor mit Datei- Tabs, Zeilennummern und Statusbar), deren Flächenfarben den Workbench-Farben des Themes entsprechen. Die Seite rendert komplett in der Theme-Palette und schaltet mit um (Modus, Akzent, Sprache). Die --mono-*-Werte liegen generiert in monochromator-palette.css (Quelle: monochromator/palette/, erzeugt von scripts/monochromator-spec/generate.mjs). Zustands-Attribute auf : data-mono-mode dark | light data-mono-accent default | amber | … | sulfur data-mono-lang de | en (Default ohne Attribut: de) data-mono-rule 1…8 (Cross-Highlight Regel ↔ Code) ============================================================ */ /* --- Sprache: genau eine Fassung sichtbar --- */ :root:not([data-mono-lang="en"]) [data-l="en"] { display: none; } :root[data-mono-lang="en"] [data-l="de"] { display: none; } /* hidden muss auch gegen eigene display-Regeln gewinnen (Tabs, Panels, Controls) */ .mono-app [hidden] { display: none !important; } /* --- Volle Fläche: aus dem .site-main-Container ausbrechen --- */ .mono-app { margin: -2rem calc(50% - 50vw); padding: 0 0 4.5rem; background: var(--mono-bg); color: var(--mono-fg); } @media (max-width: 900px) { .mono-app { margin-top: -1.5rem; } } /* Kein margin-Shorthand hier: er würde die margin-top-Abstände der einzelnen Sections (.mono-board, .mono-conform) überschreiben. */ .mono-app > section { max-width: 1160px; margin-left: auto; margin-right: auto; padding-left: var(--container-pad); padding-right: var(--container-pad); } .mono-app a { color: var(--mono-accent); } /* Wie im Editor (Theme-Commit b0d5714): Akzent mit 30 % Alpha, Textfarben bleiben stehen, damit die Schnitte auch in der Auswahl lesbar sind. currentColor nötig: die globale ::selection-Regel (style.css) setzt sonst ihr color durch, die Kaskade entscheidet pro Deklaration. */ .mono-app ::selection { background: color-mix(in srgb, var(--mono-accent) 30%, transparent); color: currentColor; } .mono-app :focus-visible { outline: 2px solid var(--mono-accent); outline-offset: 2px; } /* Monospace gehört der Editorfläche (.mono-code: Codeflächen und Regel-Chips). Alles andere ist UI in der Seiten-Sans — auch Inline- im Fließtext, gegen die globale code-Regel (style.css). */ .mono-app code { font-family: inherit; font-variation-settings: normal; } .mono-code, .mono-code code { font-family: var(--font-mono); font-variation-settings: "MONO" 1; } /* Umschalten fühlbar machen: Farben weich überblenden */ .mono-app, .mono-app * { transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); } /* --- Token-Klassen: zwei orthogonale Achsen, Farbe × Schnitt --- */ .mono-app .m-gray { color: var(--mono-muted); } .mono-app .m-contrast { color: var(--mono-contrast); } .mono-app .m-accent { color: var(--mono-accent); } .mono-app .m-b { font-weight: 700; } .mono-app .m-i { font-style: italic; } .mono-app .m-u { text-decoration: underline; } .mono-app .m-s { text-decoration: line-through; } .mono-app .m-u.m-s { text-decoration: underline line-through; } /* ============================================================ Hero ============================================================ */ .mono-hero { padding-top: 3.5rem; } .mono-hero__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .mono-hero__kicker { margin: 0; font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mono-muted); } .mono-hero__title { margin: 0.75rem 0 1rem; font-family: var(--font-sans); font-size: clamp(2.1rem, 6.5vw, 4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; color: var(--mono-contrast); } .mono-hero__claim { margin: 0 0 0.75rem; max-width: 58ch; font-family: var(--font-sans); font-size: 1.05rem; line-height: 1.55; color: var(--mono-fg-2); } /* --- Projekt-Fakten: die README-Badges als Textzeile im Stil der Meta-Zeile darunter; Zahlen heller, Links dezent unterstrichen. --- */ .mono-facts { margin: 0 0 0.35rem; font-family: var(--font-sans); font-size: 0.75rem; color: var(--mono-muted); } .mono-facts a { color: inherit; text-decoration: underline; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease); } .mono-facts a:hover { color: var(--mono-fg); } .mono-facts__num { color: var(--mono-fg); font-weight: 600; } .mono-meta { margin: 0 0 1.75rem; font-family: var(--font-sans); font-size: 0.75rem; color: var(--mono-muted); } .mono-meta code { color: var(--mono-fg); font-size: 1em; } .mono-meta a { color: inherit; text-decoration: underline; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease); } .mono-meta a:hover { color: var(--mono-fg); } /* --- Umschalter (Modus + Akzent) und Sprach-Toggle. Website-Chrome, nicht Theme-Bühne: Site-Formensprache (Pille, Hairline, Press-Scale, Control-Höhen), aber neutral gehalten — aktiv ist eine hellere Ink-Stufe, kein Brand-Gelb: auf dieser Seite gehört Farbe der Demo. --- */ /* Asymmetrisches Padding: links schließt der Pill-Button bündig ab, rechts brauchen die runden Swatches Luft zum Schalenrand. */ .mono-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; width: fit-content; padding: 4px 12px 4px 4px; background: var(--bg-raised); border: 1px solid var(--hairline); border-radius: var(--radius-full); } .mono-controls__group { display: flex; align-items: center; gap: 0.55rem; } .mono-controls__sep { width: 1px; height: 22px; background: var(--separator); } .mono-controls__btn { border: 0; background: none; color: var(--text-dim); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semibold); height: var(--control-sm); padding: 0 0.9rem; border-radius: var(--radius-full); cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .mono-controls__btn:hover { background: var(--bg-hover); color: var(--text); } .mono-controls__btn:active { transform: scale(var(--press-scale)); } .mono-controls__btn[aria-pressed="true"] { background: var(--fill-raised); color: var(--text-bright); } .mono-controls__swatch { position: relative; width: 22px; height: 22px; border: 0; padding: 0; border-radius: 50%; cursor: pointer; background: var(--swatch); transition: transform var(--dur-fast) var(--ease); } /* Touch-Ziel 30px, Gestalt bleibt der 22px-Kreis. -4px bleibt unter dem halben gap (0.55rem), die Trefferflächen der Nachbarn überlappen nicht. */ .mono-controls__swatch::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; } .mono-controls__swatch:active { transform: scale(var(--press-scale)); } .mono-controls__swatch[aria-pressed="true"] { outline: 2px solid var(--text-bright); outline-offset: 2px; } /* Schmale Screens: Mode-Buttons + Separator + 7 Swatches passen nicht in eine Zeile; die eine Pille würde als Stadion um zwei ungleiche Zeilen umbrechen und der Separator hinge frei am Zeilenende. Stattdessen löst sich die Schale auf und jede Gruppe wird ihre eigene Pille. */ @media (max-width: 480px) { .mono-controls { padding: 0; background: none; border: 0; } .mono-controls__sep { display: none; } .mono-controls__group { padding: 4px; background: var(--bg-raised); border: 1px solid var(--hairline); border-radius: var(--radius-full); } /* Swatch-Gruppe auf dieselbe 40px-Höhe wie die Mode-Pille (4px Schale + 32px Button): 22px-Kreis + 2 × 9px. Seitlich mehr Luft, damit die Kreise nicht am runden Schalenrand kleben. */ .mono-controls__group:has(.mono-controls__swatch) { padding: 9px 12px; } } .mono-lang { display: flex; gap: 2px; padding: 3px; background: var(--bg-raised); border: 1px solid var(--hairline); border-radius: var(--radius-full); } /* DE/EN sind Links auf die Sprach-URLs; aria-current markiert die Seite, auf der man steht. Optik wie die Mode-Buttons daneben. */ .mono-lang a { color: var(--text-dim); font-family: var(--font-sans); font-size: 0.72rem; font-weight: var(--weight-semibold); letter-spacing: 0.05em; padding: 0.25rem 0.6rem; border-radius: var(--radius-full); text-decoration: none; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .mono-lang a:hover { background: var(--bg-hover); color: var(--text); } .mono-lang a:active { transform: scale(var(--press-scale)); } .mono-lang a[aria-current] { background: var(--fill-raised); color: var(--text-bright); } /* ============================================================ Board: Regel-Legende (frei auf der Bühne) neben der Workbench, einem abgeschlossenen Editor-Fenster (Titlebar, Tabs, Code). Fenster-Flächenfarben = Workbench-Farben des Themes: titleBar/tabs auf bg-2, aktiver Tab und Editorfläche auf bg. ============================================================ */ .mono-board { margin-top: 3rem; display: grid; grid-template-columns: minmax(260px, 2fr) minmax(0, 5fr); gap: 2.5rem; align-items: start; } .mono-workbench { min-width: 0; background: var(--mono-bg); border: 1px solid var(--mono-bg-3); border-radius: var(--radius-2); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55); } @media (min-width: 961px) { /* Desktop: Ecken sauber kappen. Mobil klebt das Fenster selbst am Viewport (sticky), overflow bleibt dort unangetastet. */ .mono-workbench { overflow: clip; } /* Freie Legende einen Tick tiefer ansetzen als der Fensterrand: die Überschrift landet etwa auf Höhe der Tab-Leiste, statt bündig mit der Titlebar zu kleben. Nur im Nebeneinander (mobil stapelt). */ .mono-rules-panel { padding-top: 2.5rem; } } .mono-titlebar { padding: 0.45rem 1rem; background: var(--mono-bg-2); border-bottom: 1px solid var(--mono-bg-3); border-radius: var(--radius-2) var(--radius-2) 0 0; text-align: center; font-family: var(--font-sans); font-size: 0.72rem; color: var(--mono-fg-2); } /* --- Regel-Legende: frei auf der Bühne, kein Fenster-Chrome --- */ .mono-rules-panel h2 { margin: 0 0 1rem; padding: 0 0.75rem; font-family: var(--font-sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mono-fg-2); } .mono-rules { display: flex; flex-direction: column; } .mono-rule { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.55rem 0.75rem; border: 0; border-left: 2px solid transparent; border-radius: var(--radius-1); background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; } /* Farb-Punkt: die Farbstufe der Regel (den Schnitt trägt die Stil-Zeile). Folgt Modus und Akzent über die mono-Variablen; die inset-Hairline definiert helle Punkte auf heller bzw. dunkle auf dunkler Bühne. */ /* Gleiche Gestalt wie die Akzent-Swatches im Hero: 22px-Kreis, randlos. */ .mono-rule__dot { flex: none; width: 22px; height: 22px; border-radius: 50%; } .mono-rule__dot--fg { background: var(--mono-fg); } .mono-rule__dot--contrast { background: var(--mono-contrast); } .mono-rule__dot--accent { background: var(--mono-accent); } .mono-rule__dot--muted { background: var(--mono-muted); } .mono-rule:hover { background: var(--mono-bg-2); } .mono-rule[aria-pressed="true"] { background: var(--mono-bg-2); border-left-color: var(--mono-accent); } .mono-rule__text { display: flex; flex-direction: column; gap: 0.1rem; } .mono-rule__name { font-family: var(--font-sans); font-size: 0.86rem; color: var(--mono-fg); } .mono-rule__name code { font-size: 0.9em; color: var(--mono-fg); } .mono-rule__style { font-family: var(--font-sans); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mono-muted); } /* --- Cross-Highlight: aktive Regel hell, alles andere gedimmt. Nur direkte Token-Spans in der Zeile (.cl > span), sonst würden Zeilen- und Token-Dimmung sich multiplizieren. --- */ :root[data-mono-rule] .mono-editor .mono-code .cl > span { opacity: 0.22; } :root[data-mono-rule="1"] .mono-editor .mono-code .cl > span[data-r="1"], :root[data-mono-rule="2"] .mono-editor .mono-code .cl > span[data-r="2"], :root[data-mono-rule="3"] .mono-editor .mono-code .cl > span[data-r="3"], :root[data-mono-rule="4"] .mono-editor .mono-code .cl > span[data-r="4"], :root[data-mono-rule="5"] .mono-editor .mono-code .cl > span[data-r="5"], :root[data-mono-rule="6"] .mono-editor .mono-code .cl > span[data-r="6"], :root[data-mono-rule="7"] .mono-editor .mono-code .cl > span[data-r="7"], :root[data-mono-rule="8"] .mono-editor .mono-code .cl > span[data-r="8"], :root[data-mono-rule="9"] .mono-editor .mono-code .cl > span[data-r="9"] { opacity: 1; } /* --- Editor: Datei-Tabs, Codefläche, Statusbar --- */ .mono-editor { display: flex; flex-direction: column; min-width: 0; } .mono-tabs { display: flex; flex-wrap: wrap; background: var(--mono-bg-2); } .mono-tabs button { display: inline-flex; align-items: center; gap: 0.45em; border: 0; background: none; padding: 0.5rem 0.9rem; font-family: var(--font-sans); font-size: 0.74rem; color: var(--mono-muted); cursor: pointer; } /* Sprach-Logo im Tab: einfarbig, folgt der Tab-Textfarbe. overflow: visible, weil manche simple-icons (Rust, TS, Python, C…) die viewBox randlos füllen; der SVG-Default overflow: hidden würde die Glyphen-Unterkante abschneiden. */ .mono-tabs button svg { width: 0.95em; height: 0.95em; fill: currentColor; flex: none; overflow: visible; } /* tab.hoverBackground und aktiver Tab = Editorfläche, wie im Theme */ .mono-tabs button:hover { background: var(--mono-bg); color: var(--mono-fg); } .mono-tabs button[aria-selected="true"] { background: var(--mono-bg); color: var(--mono-fg-2); } /* --- Sample: nackte Editorfläche, das Fenster rahmt. --- */ .mono-sample { margin: 0; background: var(--mono-bg); display: flex; flex-direction: column; flex: 1; min-height: 0; } .mono-sample pre { margin: 0; background: var(--mono-bg); border: 0; border-radius: 0; padding: 0.9rem 1rem 0.9rem 0.5rem; tab-size: 4; flex: 1; min-height: 0; overflow: auto; } .mono-sample pre code { display: block; color: var(--mono-fg); font-size: 0.82rem; line-height: 1.65; counter-reset: cl; } /* Zeilennummern: CSS-Counter, nicht selektierbar, Farbe wie editorLineNumber.foreground (muted). Kein display: block; der Umbruch ist Teil des Span-Inhalts (Copy-Verhalten). */ .cl { counter-increment: cl; } .cl::before { content: counter(cl); display: inline-block; width: 3ch; margin-right: 1.5ch; text-align: right; color: var(--mono-muted); user-select: none; } /* ============================================================ Responsive: Board stapelt, das Editor-Fenster klebt oben, Regeln scrollen darunter durch ============================================================ */ @media (max-width: 960px) { .mono-board { display: flex; flex-direction: column; align-items: stretch; } .mono-workbench { order: -1; position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top)); z-index: 5; box-shadow: 0 12px 16px -14px rgba(0, 0, 0, 0.65); } /* Datei-Tabs wie im Editor: eine Zeile, seitlich wischen statt dreizeilig umbrechen. Der angeschnittene Tab am Rand zeigt an, dass rechts mehr liegt; die Scrollbar wäre nur Lärm. */ .mono-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .mono-tabs::-webkit-scrollbar { display: none; } .mono-tabs button { flex: none; } .mono-sample pre { max-height: 32vh; } /* Pendant zur Titlebar, die sich oben selbst rundet: mobil clippt das Fenster nicht (overflow: clip nur ≥961px), also rundet die Codefläche die unteren Ecken selbst — sonst übermalte ihr rechteckiger Background den Fensterrahmen an der Kurve (Paint-Order: Kind über Parent-Border). -1px = Innenkante des 1px-Rahmens. */ .mono-sample, .mono-sample pre { border-radius: 0 0 calc(var(--radius-2) - 1px) calc(var(--radius-2) - 1px); } .mono-hero__top { flex-wrap: wrap; } } /* Flaches Querformat (Phone landscape): das klebende Fenster ließe unter sich nur ~90px zum Regeln-Lesen — dann lieber normal mitscrollen. */ @media (max-width: 960px) and (max-height: 500px) { .mono-workbench { position: static; } } /* ============================================================ Ruhe respektieren ============================================================ */ @media (prefers-reduced-motion: reduce) { .mono-app, .mono-app * { transition: none; } }