/* terminal.css — Layout, Typografie, Farben. Der CRT-Effekt liegt in crt.css. */ :root { /* Phosphor-Palette. Umschaltbar ueber (Befehl: color). */ --bg: #0a0f0a; --fg: #33ff66; --fg-dim: #1f9940; --fg-bright: #b9ffcc; --glow: rgba(51, 255, 102, 0.45); --blue: #6fb7ff; --cyan: #5fe3e3; --magenta: #ff7ad9; --red: #ff6b6b; --yellow: #ffd866; --white: #d8ffe4; --font: "SF Mono", "Menlo", "DejaVu Sans Mono", "Consolas", "Courier New", monospace; --line-height: 1.32; --pad: clamp(0.75rem, 2.5vw, 2rem); } body[data-phosphor="amber"] { --bg: #100a02; --fg: #ffb641; --fg-dim: #a86d16; --fg-bright: #ffe0ab; --glow: rgba(255, 182, 65, 0.45); --blue: #ffcf87; --cyan: #ffd9a0; --magenta: #ff9a5c; --red: #ff7b4a; --yellow: #ffe28a; --white: #ffeccc; } body[data-phosphor="white"] { --bg: #08090b; --fg: #d6dde6; --fg-dim: #7c8794; --fg-bright: #ffffff; --glow: rgba(214, 221, 230, 0.35); --blue: #8ab4ff; --cyan: #7fe1e1; --magenta: #e79ce7; --red: #ff8080; --yellow: #f0d68a; --white: #ffffff; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); overflow: hidden; } #crt { position: relative; display: flex; flex-direction: column; height: 100%; width: 100%; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--fg) 5%, var(--bg)) 0%, var(--bg) 70%); font-family: var(--font); font-size: clamp(12px, 1.05vw + 8px, 16px); line-height: var(--line-height); color: var(--fg); } #terminals { position: relative; flex: 1 1 auto; min-height: 0; } /* Ein Terminal-Tab. Fuellt #terminals; nur der aktive ist sichtbar. */ .term { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; padding: var(--pad); text-shadow: 0 0 6px var(--glow); scrollbar-width: thin; scrollbar-color: var(--fg-dim) transparent; -webkit-tap-highlight-color: transparent; } .term[hidden] { display: none; } .term::-webkit-scrollbar { width: 8px; } .term::-webkit-scrollbar-thumb { background: var(--fg-dim); border-radius: 4px; } /* * Solange ein Programm den ganzen Bildschirm zeichnet — Chat, Pager, top, * die Spiele — gibt es nichts zu rollen: das Bild passt genau. Die Leiste * hätte dort nur eine Aufgabe, nämlich am rechten Rand zu blinken, weil * jeder Bildaufbau sie kurz einblendet. Gesetzt wird die Klasse in * core/screen.js, sobald jemand `clear()` ruft, und wieder abgenommen, * sobald wieder eine Zeile gelesen wird. */ .term.painting { overflow: hidden; scrollbar-width: none; } .term.painting::-webkit-scrollbar { display: none; } .line, .prompt-line { white-space: pre-wrap; word-break: break-word; /* Genau eine Zeilenhoehe, nicht eine Schrifthoehe. * * Mit `1em` war eine leere Zeile fuenf Pixel niedriger als eine mit Text. * Bei fortlaufender Ausgabe faellt das nicht auf, aber jedes Programm, das * den Bildschirm selbst fuellt, verrutscht damit: in nano wanderte die * Tastenleiste nach unten, sobald man eine Zeile tippte, weil die vorher * leere Zeile dabei um ihre Differenz wuchs. */ min-height: calc(1em * var(--line-height)); } .prompt-line[hidden] { display: none; } /* ANSI-Farben, gesetzt von core/ansi.js */ .fg-black { color: #0d1a0d; } .fg-red { color: var(--red); } .fg-green { color: var(--fg); } .fg-yellow { color: var(--yellow); } .fg-blue { color: var(--blue); } .fg-magenta { color: var(--magenta); } .fg-cyan { color: var(--cyan); } .fg-white { color: var(--white); } .fg-dim { color: var(--fg-dim); } .bold { font-weight: 700; color: var(--fg-bright); } .inverse { background: var(--fg); color: var(--bg); text-shadow: none; } /* Der Cursor. Form, Blinken und Sichtbarkeit haengen an data-Attributen * am body — gesetzt vom Befehl `cursor`. Vorgabe ist der blinkende Block, * so wie eine Konsole ihn zeigt. */ .cursor { display: inline-block; min-width: 0.6em; background: var(--fg); color: var(--bg); text-shadow: none; animation: blink 1.06s steps(1) infinite; } @keyframes blink { 0%, 50% { background: var(--fg); color: var(--bg); } 50.01%, 100% { background: transparent; color: inherit; } } /* Unterstrich: der Balken liegt unter dem Zeichen, das Zeichen bleibt lesbar. */ body[data-cursor="underline"] .cursor { background: transparent; color: inherit; box-shadow: inset 0 -0.14em 0 0 var(--fg); animation-name: blink-underline; } @keyframes blink-underline { 0%, 50% { box-shadow: inset 0 -0.14em 0 0 var(--fg); } 50.01%, 100% { box-shadow: inset 0 -0.14em 0 0 transparent; } } /* Senkrechter Strich, wie ihn Fenstersysteme zeigen. */ body[data-cursor="bar"] .cursor { background: transparent; color: inherit; box-shadow: inset 0.1em 0 0 0 var(--fg); animation-name: blink-bar; } @keyframes blink-bar { 0%, 50% { box-shadow: inset 0.1em 0 0 0 var(--fg); } 50.01%, 100% { box-shadow: inset 0.1em 0 0 0 transparent; } } /* Ohne Blinken bleibt die Form stehen — ruhiger beim langen Lesen. */ body[data-cursor-blink="off"] .cursor { animation: none; } /* Ganz aus: der Cursor verschwindet, die Zeile bleibt, wo sie ist. * Deshalb nur unsichtbar und nicht entfernt — sonst zappelt der Text. */ body[data-cursor="off"] .cursor { background: transparent; color: inherit; box-shadow: none; animation: none; } /* --- Tab-Leiste ---------------------------------------------------------- */ #status { flex: 0 0 auto; display: flex; justify-content: space-between; gap: 1em; padding: 0.15em var(--pad); padding-bottom: calc(0.15em + env(safe-area-inset-bottom, 0px)); background: var(--fg-dim); color: var(--bg); text-shadow: none; white-space: nowrap; overflow: hidden; user-select: none; z-index: 20; } #status[hidden] { display: none; } .status-left { overflow: hidden; text-overflow: ellipsis; } .status-right { opacity: 0.85; flex: 0 0 auto; } .status-host { font-weight: 700; } .status-tab { padding: 0 0.35em; cursor: pointer; } .status-tab.active { background: var(--fg-bright); color: var(--bg); font-weight: 700; } .status-tab.bell { font-style: italic; } .status-add { padding: 0 0.4em; cursor: pointer; opacity: 0.7; } .status-add:hover { opacity: 1; } /* Der letzte Tab wurde geschlossen. */ .poweroff { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; color: var(--fg-dim); text-shadow: none; } .poweroff-link { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--fg-dim); } .poweroff-link:hover { color: var(--fg-bright); } /* Unsichtbarer Tastatur-Fang. Nicht display:none — sonst kein Fokus auf Mobilgeraeten. */ #kbd { position: fixed; top: 0; left: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; resize: none; z-index: -1; } ::selection { background: var(--fg); color: var(--bg); text-shadow: none; } @media (prefers-reduced-motion: reduce) { .cursor { animation: none; } } /* --------------------------------------------------------------- Themes --- * * Bekannte Terminal-Farbschemata. Sie belegen dieselben Variablen wie die * Phosphor-Modi darüber — deshalb wirkt ein Wechsel überall, auch in `ls`, * `glow` und den Spielen, ohne dass eine Zeile JavaScript davon weiss. * * Die Werte sind nicht von Hand abgetippt, sondern aus den veröffentlichten * Paletten übernommen (Gogh-Sammlung). Bei 46 Schemata mal 11 Farben wäre * Abschreiben eine Fehlerquelle ohne Gegenwert. * * Zuordnung: --red bis --white sind die ANSI-Farben 2 bis 8, --fg-dim ist das * helle Schwarz (Farbe 9), --fg-bright das helle Weiss (Farbe 16). `--glow` * ist der Schimmer, den crt.css darüberlegt; er nimmt die Akzentfarbe auf und * bleibt auf hellem Grund fast unsichtbar, denn Papier leuchtet nicht. */ body[data-theme="apprentice"] { --bg: #262626; --fg: #BCBCBC; --fg-dim: #444444; --fg-bright: #FFFFFF; --glow: rgba(95, 135, 175, 0.26); --red: #AF5F5F; --green: #5F875F; --yellow: #87875F; --blue: #5F87AF; --magenta: #5F5F87; --cyan: #5F8787; --white: #6C6C6C; } body[data-theme="ayu-dark"] { --bg: #0A0E14; --fg: #B3B1AD; --fg-dim: #4D5566; --fg-bright: #B3B1AD; --glow: rgba(89, 194, 255, 0.26); --red: #FF3333; --green: #C2D94C; --yellow: #FF8F40; --blue: #59C2FF; --magenta: #FFEE99; --cyan: #95E6CB; --white: #B3B1AD; } body[data-theme="ayu-mirage"] { --bg: #1F2430; --fg: #CBCCC6; --fg-dim: #707A8C; --fg-bright: #CBCCC6; --glow: rgba(115, 208, 255, 0.26); --red: #FF3333; --green: #BAE67E; --yellow: #FFA759; --blue: #73D0FF; --magenta: #D4BFFF; --cyan: #95E6CB; --white: #CBCCC6; } body[data-theme="ayu-light"] { --bg: #FAFAFA; --fg: #575F66; --fg-dim: #8A9199; --fg-bright: #FAFAFA; --glow: rgba(57, 158, 230, 0.08); --red: #F51818; --green: #86B300; --yellow: #F2AE49; --blue: #399EE6; --magenta: #A37ACC; --cyan: #4CBF99; --white: #FAFAFA; } body[data-theme="catppuccin-mocha"] { --bg: #1E1E2E; --fg: #CDD6F4; --fg-dim: #585B70; --fg-bright: #A6ADC8; --glow: rgba(137, 180, 250, 0.26); --red: #F38BA8; --green: #A6E3A1; --yellow: #F9E2AF; --blue: #89B4FA; --magenta: #F5C2E7; --cyan: #94E2D5; --white: #BAC2DE; } body[data-theme="catppuccin-macchiato"] { --bg: #24273A; --fg: #CAD3F5; --fg-dim: #5B6078; --fg-bright: #A5ADCB; --glow: rgba(138, 173, 244, 0.26); --red: #ED8796; --green: #A6DA95; --yellow: #EED49F; --blue: #8AADF4; --magenta: #F5BDE6; --cyan: #8BD5CA; --white: #B8C0E0; } body[data-theme="catppuccin-frappe"] { --bg: #303446; --fg: #C6D0F5; --fg-dim: #626880; --fg-bright: #A5ADCE; --glow: rgba(140, 170, 238, 0.26); --red: #E78284; --green: #A6D189; --yellow: #E5C890; --blue: #8CAAEE; --magenta: #F4B8E4; --cyan: #81C8BE; --white: #B5BFE2; } body[data-theme="catppuccin-latte"] { --bg: #EFF1F5; --fg: #4C4F69; --fg-dim: #6C6F85; --fg-bright: #BCC0CC; --glow: rgba(30, 102, 245, 0.08); --red: #D20F39; --green: #40A02B; --yellow: #DF8E1D; --blue: #1E66F5; --magenta: #EA76CB; --cyan: #179299; --white: #ACB0BE; } body[data-theme="dracula"] { --bg: #282A36; --fg: #F8F8F2; --fg-dim: #7A7A7A; --fg-bright: #F9F9FB; --glow: rgba(155, 107, 223, 0.26); --red: #E64747; --green: #42E66C; --yellow: #E4F34A; --blue: #9B6BDF; --magenta: #E356A7; --cyan: #75D7EC; --white: #F8F8F2; } body[data-theme="everforest-dark-medium"] { --bg: #2D353B; --fg: #D3C6AA; --fg-dim: #5C6A72; --fg-bright: #DFDDC8; --glow: rgba(127, 187, 179, 0.26); --red: #E67E80; --green: #A7C080; --yellow: #DBBC7F; --blue: #7FBBB3; --magenta: #D699B6; --cyan: #83C092; --white: #D3C6AA; } body[data-theme="everforest-light-medium"] { --bg: #FDF6E3; --fg: #5C6A72; --fg-dim: #343F44; --fg-bright: #D3C6AA; --glow: rgba(58, 148, 197, 0.08); --red: #F85552; --green: #8DA101; --yellow: #DFA000; --blue: #3A94C5; --magenta: #DF69BA; --cyan: #35A77C; --white: #DFDDC8; } body[data-theme="github-dark"] { --bg: #101216; --fg: #8B949E; --fg-dim: #4D4D4D; --fg-bright: #FFFFFF; --glow: rgba(108, 164, 248, 0.26); --red: #F78166; --green: #56D364; --yellow: #E3B341; --blue: #6CA4F8; --magenta: #DB61A2; --cyan: #2B7489; --white: #FFFFFF; } body[data-theme="github-light"] { --bg: #f6f8fa; --fg: #1f2328; --fg-dim: #57606a; --fg-bright: #8c959f; --glow: rgba(9, 105, 218, 0.08); --red: #cf222e; --green: #1a7f37; --yellow: #9a6700; --blue: #0969da; --magenta: #8250df; --cyan: #1b7c83; --white: #6e7781; } body[data-theme="gotham"] { --bg: #0A0F14; --fg: #98D1CE; --fg-dim: #10151B; --fg-bright: #D3EBE9; --glow: rgba(25, 84, 101, 0.26); --red: #C33027; --green: #26A98B; --yellow: #EDB54B; --blue: #195465; --magenta: #4E5165; --cyan: #33859D; --white: #98D1CE; } body[data-theme="gruvbox-dark"] { --bg: #282828; --fg: #EBDBB2; --fg-dim: #928374; --fg-bright: #EBDBB2; --glow: rgba(69, 133, 136, 0.26); --red: #CC241D; --green: #98971A; --yellow: #D79921; --blue: #458588; --magenta: #B16286; --cyan: #689D6A; --white: #A89984; } body[data-theme="gruvbox"] { --bg: #FBF1C7; --fg: #3C3836; --fg-dim: #928374; --fg-bright: #3C3836; --glow: rgba(69, 133, 136, 0.08); --red: #CC241D; --green: #98971A; --yellow: #D79921; --blue: #458588; --magenta: #B16286; --cyan: #689D6A; --white: #7C6F64; } body[data-theme="iceberg"] { --bg: #161821; --fg: #c6c8d1; --fg-dim: #6b7089; --fg-bright: #d2d4de; --glow: rgba(132, 160, 198, 0.26); --red: #e27878; --green: #b4be82; --yellow: #e2a478; --blue: #84a0c6; --magenta: #a093c7; --cyan: #89b8c2; --white: #c6c8d1; } body[data-theme="jellybeans"] { --bg: #121212; --fg: #DEDEDE; --fg-dim: #BDBDBD; --fg-bright: #FFFFFF; --glow: rgba(151, 190, 220, 0.26); --red: #E27373; --green: #94B979; --yellow: #FFBA7B; --blue: #97BEDC; --magenta: #E1C0FA; --cyan: #00988E; --white: #DEDEDE; } body[data-theme="kanagawa-wave"] { --bg: #1F1F28; --fg: #DCD7BA; --fg-dim: #727169; --fg-bright: #DCD7BA; --glow: rgba(126, 156, 216, 0.26); --red: #C34043; --green: #76946A; --yellow: #C0A36E; --blue: #7E9CD8; --magenta: #957FB8; --cyan: #6A9589; --white: #C8C093; } body[data-theme="kanagawa-dragon"] { --bg: #181616; --fg: #C5C9C5; --fg-dim: #A6A69C; --fg-bright: #C5C9C5; --glow: rgba(139, 164, 176, 0.26); --red: #C4746E; --green: #8A9A7B; --yellow: #C4B28A; --blue: #8BA4B0; --magenta: #A292A3; --cyan: #8EA4A2; --white: #C8C093; } body[data-theme="kanagawa-lotus"] { --bg: #f2ecbc; --fg: #545464; --fg-dim: #8a8980; --fg-bright: #43436c; --glow: rgba(77, 105, 155, 0.08); --red: #c84053; --green: #6f894e; --yellow: #77713f; --blue: #4d699b; --magenta: #b35b79; --cyan: #597b75; --white: #545464; } body[data-theme="miasma"] { --bg: #222222; --fg: #c2c2b0; --fg-dim: #666666; --fg-bright: #d7c483; --glow: rgba(120, 130, 75, 0.26); --red: #685742; --green: #5f875f; --yellow: #b36d43; --blue: #78824b; --magenta: #bb7744; --cyan: #c9a554; --white: #d7c483; } body[data-theme="monokai-dark"] { --bg: #272822; --fg: #F8F8F2; --fg-dim: #272822; --fg-bright: #F8F8F2; --glow: rgba(102, 217, 239, 0.26); --red: #F92672; --green: #A6E22E; --yellow: #F4BF75; --blue: #66D9EF; --magenta: #AE81FF; --cyan: #2AA198; --white: #F9F8F5; } body[data-theme="moonfly"] { --bg: #080808; --fg: #BDBDBD; --fg-dim: #949494; --fg-bright: #E4E4E4; --glow: rgba(128, 160, 255, 0.26); --red: #FF5454; --green: #8CC85F; --yellow: #E3C78A; --blue: #80A0FF; --magenta: #CF87E8; --cyan: #79DAC8; --white: #C6C6C6; } body[data-theme="night-owl"] { --bg: #011627; --fg: #D6DEEB; --fg-dim: #575656; --fg-bright: #FFFFFF; --glow: rgba(130, 170, 255, 0.26); --red: #EF5350; --green: #22DA6E; --yellow: #ADDB67; --blue: #82AAFF; --magenta: #C792EA; --cyan: #21C7A8; --white: #FFFFFF; } body[data-theme="nightfly"] { --bg: #011627; --fg: #BDC1C6; --fg-dim: #7C8F8F; --fg-bright: #D6DEEB; --glow: rgba(130, 170, 255, 0.26); --red: #FC514E; --green: #A1CD5E; --yellow: #E3D18A; --blue: #82AAFF; --magenta: #C792EA; --cyan: #7FDBCA; --white: #A1AAB8; } body[data-theme="nord"] { --bg: #2E3440; --fg: #D8DEE9; --fg-dim: #4C566A; --fg-bright: #ECEFF4; --glow: rgba(129, 161, 193, 0.26); --red: #BF616A; --green: #A3BE8C; --yellow: #EBCB8B; --blue: #81A1C1; --magenta: #B48EAD; --cyan: #88C0D0; --white: #E5E9F0; } body[data-theme="nord-light"] { --bg: #EBEAF2; --fg: #004F7C; --fg-dim: #3E89A1; --fg-bright: #DEDEDE; --glow: rgba(67, 158, 207, 0.08); --red: #E64569; --green: #069F5F; --yellow: #DAB752; --blue: #439ECF; --magenta: #D961DC; --cyan: #00B1BE; --white: #B3B3B3; } body[data-theme="one-dark"] { --bg: #1E2127; --fg: #5C6370; --fg-dim: #5C6370; --fg-bright: #FFFEFE; --glow: rgba(97, 175, 239, 0.26); --red: #E06C75; --green: #98C379; --yellow: #D19A66; --blue: #61AFEF; --magenta: #C678DD; --cyan: #56B6C2; --white: #ABB2BF; } body[data-theme="one-half-black"] { --bg: #000000; --fg: #DCDFE4; --fg-dim: #282C34; --fg-bright: #DCDFE4; --glow: rgba(97, 175, 239, 0.26); --red: #E06C75; --green: #98C379; --yellow: #E5C07B; --blue: #61AFEF; --magenta: #C678DD; --cyan: #56B6C2; --white: #DCDFE4; } body[data-theme="panda"] { --bg: #1D1E20; --fg: #F0F0F0; --fg-dim: #5C6370; --fg-bright: #F0F0F0; --glow: rgba(92, 159, 255, 0.26); --red: #FB055A; --green: #26FFD4; --yellow: #FDAA5A; --blue: #5C9FFF; --magenta: #FC59A6; --cyan: #26FFD4; --white: #F0F0F0; } body[data-theme="rose-pine"] { --bg: #191724; --fg: #E0DEF4; --fg-dim: #6E6A86; --fg-bright: #E0DEF4; --glow: rgba(49, 116, 143, 0.26); --red: #EB6F92; --green: #9CCFD8; --yellow: #F6C177; --blue: #31748F; --magenta: #C4A7E7; --cyan: #EBBCBA; --white: #E0DEF4; } body[data-theme="rose-pine-moon"] { --bg: #232136; --fg: #E0DEF4; --fg-dim: #6E6A86; --fg-bright: #E0DEF4; --glow: rgba(62, 143, 176, 0.26); --red: #EB6F92; --green: #9CCFD8; --yellow: #F6C177; --blue: #3E8FB0; --magenta: #C4A7E7; --cyan: #EA9A97; --white: #E0DEF4; } body[data-theme="rose-pine-dawn"] { --bg: #FAF4ED; --fg: #575279; --fg-dim: #9893A5; --fg-bright: #575279; --glow: rgba(40, 105, 131, 0.08); --red: #B4637A; --green: #56949F; --yellow: #EA9D34; --blue: #286983; --magenta: #907AA9; --cyan: #D7827E; --white: #575279; } body[data-theme="seoul256"] { --bg: #3a3a3a; --fg: #d0d0d0; --fg-dim: #626262; --fg-bright: #e4e4e4; --glow: rgba(133, 173, 212, 0.26); --red: #d68787; --green: #5f865f; --yellow: #d8af5f; --blue: #85add4; --magenta: #d7afaf; --cyan: #87afaf; --white: #d0d0d0; } body[data-theme="seoul256-light"] { --bg: #dadada; --fg: #4e4e4e; --fg-dim: #3a3a3a; --fg-bright: #eeeeee; --glow: rgba(95, 135, 174, 0.08); --red: #af5f5f; --green: #5f885f; --yellow: #af8760; --blue: #5f87ae; --magenta: #875f87; --cyan: #5f8787; --white: #e4e4e4; } body[data-theme="solarized-dark"] { --bg: #002B36; --fg: #839496; --fg-dim: #657B83; --fg-bright: #FDF6E3; --glow: rgba(38, 139, 210, 0.26); --red: #DC322F; --green: #859900; --yellow: #CF9A6B; --blue: #268BD2; --magenta: #D33682; --cyan: #2AA198; --white: #EEE8D5; } body[data-theme="solarized-light"] { --bg: #FDF6E3; --fg: #657B83; --fg-dim: #657b83; --fg-bright: #073642; --glow: rgba(38, 139, 210, 0.08); --red: #DC322F; --green: #859900; --yellow: #B58900; --blue: #268BD2; --magenta: #D33682; --cyan: #2AA198; --white: #002B36; } body[data-theme="sonokai"] { --bg: #2C2E34; --fg: #E2E2E3; --fg-dim: #7F8490; --fg-bright: #E2E2E3; --glow: rgba(243, 150, 96, 0.26); --red: #FC5D7C; --green: #9ED072; --yellow: #E7C664; --blue: #F39660; --magenta: #B39DF3; --cyan: #76CCE0; --white: #E2E2E3; } body[data-theme="srcery"] { --bg: #1C1B19; --fg: #FCE8C3; --fg-dim: #918175; --fg-bright: #FCE8C3; --glow: rgba(44, 120, 191, 0.26); --red: #EF2F27; --green: #519F50; --yellow: #FBB829; --blue: #2C78BF; --magenta: #E02C6D; --cyan: #0AAEB3; --white: #BAA67F; } body[data-theme="tender"] { --bg: #282828; --fg: #EEEEEE; --fg-dim: #323232; --fg-bright: #FFFFFF; --glow: rgba(179, 222, 239, 0.26); --red: #C5152F; --green: #C9D05C; --yellow: #FFC24B; --blue: #B3DEEF; --magenta: #D3B987; --cyan: #73CEF4; --white: #EEEEEE; } body[data-theme="tokyo-night"] { --bg: #1A1B26; --fg: #C0CAF5; --fg-dim: #414868; --fg-bright: #C0CAF5; --glow: rgba(122, 162, 247, 0.26); --red: #F7768E; --green: #9ECE6A; --yellow: #E0AF68; --blue: #7AA2F7; --magenta: #BB9AF7; --cyan: #7DCFFF; --white: #A9B1D6; } body[data-theme="tokyo-night-storm"] { --bg: #24283B; --fg: #C0CAF5; --fg-dim: #414868; --fg-bright: #C0CAF5; --glow: rgba(122, 162, 247, 0.26); --red: #F7768E; --green: #9ECE6A; --yellow: #E0AF68; --blue: #7AA2F7; --magenta: #BB9AF7; --cyan: #7DCFFF; --white: #C0CAF5; } body[data-theme="tokyo-night-light"] { --bg: #D5D6DB; --fg: #565A6E; --fg-dim: #9699A3; --fg-bright: #343B58; --glow: rgba(52, 84, 138, 0.08); --red: #8C4351; --green: #485E30; --yellow: #8F5E15; --blue: #34548A; --magenta: #5A4A78; --cyan: #0F4B6E; --white: #343B58; } body[data-theme="tomorrow"] { --bg: #FFFFFF; --fg: #4D4D4C; --fg-dim: #8E908C; --fg-bright: #1D1F21; --glow: rgba(66, 113, 174, 0.08); --red: #C82829; --green: #718C00; --yellow: #EAB700; --blue: #4271AE; --magenta: #8959A8; --cyan: #3E999F; --white: #4D4D4C; } body[data-theme="tomorrow-night"] { --bg: #1D1F21; --fg: #C5C8C6; --fg-dim: #969896; --fg-bright: #FFFFFF; --glow: rgba(129, 162, 190, 0.26); --red: #CC6666; --green: #B5BD68; --yellow: #F0C674; --blue: #81A2BE; --magenta: #B294BB; --cyan: #8ABEB7; --white: #C5C8C6; } /* Grün ist im Phosphor-Modus die Grundfarbe; ein Schema bringt ein eigenes * mit. Ohne diese Zeile bliebe `ls` in jedem Theme phosphorgrün. */ body[data-theme] .fg-green { color: var(--green); } body[data-theme] .fg-black { color: var(--fg-dim); }