/* playground0 — shared themes for all sibling apps (served at /shared/theme.css). Apps include it and map their component styles onto these variables. There are really just TWO colour palettes — light and dark. The four theme classes differ ONLY by font (--font: serif vs. sans). The single colour exception is the red accent in theme-serif-light. theme-serif-light = light palette, serif, RED accent (the one exception) theme-modern-light = light palette, sans theme-serif-dark = dark palette, serif theme-modern-dark = dark palette, sans Selected via a class; the shared menu stores it in localStorage `pg0.theme.`. App-specific extra themes (vocabula) stay local. */ @font-face { font-family: 'New Computer Modern'; src: local('NewComputerModern10'), url('fonts/NewCM10-Regular.woff2') format('woff2'), url('fonts/NewCM10-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'New Computer Modern'; src: local('NewComputerModern10-Bold'), url('fonts/NewCM10-Bold.woff2') format('woff2'), url('fonts/NewCM10-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'New Computer Modern'; src: local('NewComputerModern10-Italic'), url('fonts/NewCM10-Italic.woff2') format('woff2'), url('fonts/NewCM10-Italic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; } /* Gemeinsame Schrift-Basis für ALLE Apps & Themes (17px, Zeilenhöhe ≈25px, Regular). Als CSS-Variablen, damit der globale Theme-Tuner sie pro Theme überschreiben kann (theme-overrides.css). Apps setzen KEINE eigene body-font-size mehr → sie erben diese Basis. Native, leichtere Schrift-Darstellung wie in macOS/iOS-Apps (Grayscale- Smoothing); Browser rendern auf macOS sonst kräftiger als native Apps. */ body { --ui-font-size: 17px; --ui-line-height: 1.47; /* ≈ 25px bei 17px */ --ui-weight: 400; font-size: var(--ui-font-size); line-height: var(--ui-line-height); font-weight: var(--ui-weight); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* iOS-Safari skaliert font-size sonst eigenmächtig (Auto-Text-Sizing) und ignoriert dabei den vom Tuner gesetzten Wert — font-weight bleibt davon unberührt, daher griff bisher nur die Gewichtung. 100% = nicht anfassen. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Icon als selbst-gehostete Inline-Maske (SVG aus /shared/icons). Die Icons sind Material Symbols (Outlined, Weight 100); Klassenname `.fa-ic` bleibt aus historischen Gründen. Ersetzt ad-hoc Unicode-Glyphen app-übergreifend. Nimmt currentColor an → erbt die Button-/Textfarbe; skaliert über font-size (1em). Verwendung: */ .fa-ic { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -0.22em; background-color: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; } /* ---- Light palette (shared by serif-light + modern-light) ---- */ :root, body.theme-serif-light, body.theme-modern-light { --bg: #ffffff; --panel: #f5f5f5; --panel-alt: #ebebeb; --fg: #242424; --fg-dim: #424242; --muted: #616161; --rule: #d1d1d1; --hairline: #e0e0e0; --hover: #f0f0f0; --selected: #e0e0e0; --input-bg: #ffffff; --input-brd: #d1d1d1; --accent: #7679d0; --focus: #7679d0; --link: #0f6cbd; } /* ---- Dark palette (shared by serif-dark + modern-dark) ---- */ body.theme-serif-dark, body.theme-modern-dark { --bg: #1f1f1f; --panel: #292929; --panel-alt: #333333; --fg: #ffffff; --fg-dim: #d6d6d6; --muted: #adadad; --rule: #404040; --hairline: #333333; --hover: #383838; --selected: #424242; --input-bg: #292929; --input-brd: #525252; --accent: #7679d0; --focus: #7679d0; --link: #479ef5; } /* ---- Blue/Midnight palette (aus vocabula) — serif-blue + modern-blue ---- */ body.theme-serif-blue, body.theme-modern-blue { --bg: #080d1c; --panel: #0e1e3e; --panel-alt: #142852; --fg: #f5f0e8; --fg-dim: #b9ad97; --muted: #8a7e6a; --rule: #1f3366; --hairline: #14264d; --hover: #142852; --selected: #1a3360; --input-bg: #0e1e3e; --input-brd: #1f3366; --accent: #d4a843; --focus: #d4a843; --link: #6fa8dc; } /* ---- Black palette (vocabula 'minimal', reines Schwarz, flach) — *-black ---- */ body.theme-serif-black, body.theme-modern-black { --bg: #000000; --panel: #121212; --panel-alt: #222222; --fg: #e8e5e1; --fg-dim: #a8a29e; --muted: #6b6862; --rule: #2a2a2a; --hairline: #1a1a1a; --hover: #1c1c1c; --selected: #2a2a2a; --input-bg: #121212; --input-brd: #2a2a2a; /* Sichtbarer Einzel-Akzent (Lila wie im Dark-Theme); reines Weiß wäre vom Text nicht unterscheidbar gewesen. */ --accent: #7679d0; --focus: #7679d0; --link: #6fa8dc; } /* ---- Font is the only difference between serif and modern ---- */ :root, body.theme-serif-light, body.theme-serif-dark, body.theme-serif-blue, body.theme-serif-black { --font: 'New Computer Modern', Georgia, serif; } /* Serif (NCM) hat eine kleinere x-Höhe und wirkt bei gleicher px-Größe kleiner als die Modern-Sans → Default-Basis in allen Serif-Themes 1px größer. */ body.theme-serif-light, body.theme-serif-dark, body.theme-serif-blue, body.theme-serif-black { --ui-font-size: 18px; } body.theme-modern-light, body.theme-modern-dark, body.theme-modern-blue, body.theme-modern-black { /* Native System-Font je Plattform, Apple zuerst → San Francisco auf macOS/iOS (auch falls Segoe via Office installiert ist), Segoe UI auf Windows, Roboto auf Android. Kein Webfont. */ --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* Anthrazit-Hintergrund als Default in beiden Dark-Themes (Serif + Modern). */ body.theme-serif-dark, body.theme-modern-dark { --bg: #191a1c; } /* ---- The single colour exception: red accent in serif-light ---- */ body.theme-serif-light { --accent: #b03a2e; --focus: #b03a2e; }