/* janekey-Terminal-Look für das Authelia-Portal (auth.janekey.de). Wird per Apache mod_substitute vor injiziert — Authelia selbst kennt kein Custom-CSS. Rein additiv: bricht ein Update die Selektoren, sieht das Portal wieder standard aus, funktioniert aber weiter. Farbwerte dupliziert aus colors.css (das Portal lädt die Datei nicht). */ :root { --bg-0: #0b1210; --bg-1: #0f1a17; --phosphor-bright: #a8ffce; --phosphor: #7CFFB2; --phosphor-dim: #3c8c66; --phosphor-faint: #2a5f46; --amber: #ffb454; --red: #ff6b6b; --muted: #5b7267; --mac-red: #ff5f57; --mac-yellow: #febc2e; --mac-green: #28c840; } html, body, #root { background: var(--bg-0) !important; color: var(--phosphor) !important; } * { font-family: "SFMono-Regular", "Consolas", "Liberation Mono", Menlo, monospace !important; } /* Desktop-Raster wie auf janekey.de */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(60,140,102,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(60,140,102,.05) 1px, transparent 1px); background-size: 32px 32px; } /* ---------- Login-Karte als Terminal-Fenster ---------- Karte = .MuiContainer-root.MuiContainer-maxWidthXs: der Container, den Authelia um first-factor-/second-factor-/reset-Formulare legt (React-Router tauscht den Inhalt aus, der Container bleibt). Stabil: ungehashte MUI-Klasse, semantisch klar begrenzt (nur die Login-Card, nicht AppBar/Popups). Bewusst NICHT .MuiPaper-root: das matcht auch die AppBar (volle Breite, Seitenkopf) und alle Popover/Menu-Paper (Sprachauswahl-Dropdown etc.) — genau das war der Bug (Titlebar klebt oben, Dropdown-Hover kaputt). */ .MuiContainer-root.MuiContainer-maxWidthXs { max-width: 400px !important; position: relative; background: radial-gradient(120% 140% at 50% 0%, var(--bg-1), var(--bg-0)) !important; border: 1px solid var(--phosphor) !important; border-radius: 10px !important; box-shadow: 0 0 0 1px rgba(124,255,178,0.12), 0 18px 50px rgba(0,0,0,0.6), 0 0 34px rgba(124,255,178,0.10), inset 0 0 60px rgba(124,255,178,0.04) !important; padding-top: 48px !important; padding-bottom: 24px !important; overflow: hidden; } /* Titlebar mit Mac-Dots — drei radial-gradients statt DOM-Elementen */ .MuiContainer-root.MuiContainer-maxWidthXs::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 38px; border-bottom: 1px solid rgba(60,140,102,0.28); background: radial-gradient(circle at 24px 19px, var(--mac-red) 5.5px, transparent 6.5px), radial-gradient(circle at 43px 19px, var(--mac-yellow) 5.5px, transparent 6.5px), radial-gradient(circle at 62px 19px, var(--mac-green) 5.5px, transparent 6.5px); } .MuiContainer-root.MuiContainer-maxWidthXs::after { content: "login — su · auth.janekey.de"; position: absolute; top: 0; left: 80px; height: 38px; display: flex; align-items: center; color: var(--muted); font-size: 12px; letter-spacing: 0.08em; } /* ---------- Formularfelder ---------- */ #username-textfield, #password-textfield { color: var(--phosphor) !important; caret-color: var(--phosphor); } .MuiInputBase-root { color: var(--phosphor) !important; background: none !important; } .MuiInputLabel-root, label { color: var(--phosphor-dim) !important; } .MuiOutlinedInput-notchedOutline, fieldset { border-color: var(--phosphor-dim) !important; border-radius: 3px !important; } .Mui-focused .MuiOutlinedInput-notchedOutline { border-color: var(--phosphor) !important; } /* ---------- Button ---------- */ #sign-in-button { background: none !important; border: 1px solid var(--phosphor-dim) !important; color: var(--phosphor) !important; border-radius: 3px !important; box-shadow: none !important; text-transform: lowercase !important; } #sign-in-button:hover { border-color: var(--phosphor) !important; box-shadow: 0 0 10px rgba(124,255,178,.25) !important; } /* ---------- Rest: Links, Checkbox, Fehlermeldungen ---------- */ a { color: var(--amber) !important; } .MuiCheckbox-root { color: var(--phosphor-dim) !important; } .MuiCheckbox-root.Mui-checked { color: var(--phosphor) !important; } /* MuiTypography-Override bewusst auf den Formularbereich beschränkt (statt global), damit Popup-/Menü-Texte (Sprachauswahl) nicht mitgefärbt/verdunkelt werden und lesbar bleiben. */ .MuiContainer-root.MuiContainer-maxWidthXs .MuiTypography-root { color: var(--muted) !important; } .MuiAlert-root, [role="alert"] { background: none !important; border: 1px solid var(--red) !important; color: var(--red) !important; } /* ---------- Sprachauswahl-Dropdown (Popover/Menu) ---------- MUI rendert das Menü als Portal (eigenes DOM-Element, Geschwister von #root), NICHT innerhalb der Login-Karte — daher eigene, vom Karten-Styling getrennte Regeln. Ohne dieses Ausschluss-Styling würde .MuiPaper-root (falls dafür verwendet) das Dropdown fälschlich als Terminal-Fenster ausstatten (Titlebar-Pseudo-Elemente, Border, Padding) und der Hover wäre durch die pauschale MuiTypography-Regel oben unlesbar. */ #language-menu .MuiPopover-paper, #language-menu .MuiMenu-paper { background: var(--bg-1) !important; border: 1px solid var(--phosphor-dim) !important; border-radius: 6px !important; box-shadow: 0 0 0 1px rgba(124,255,178,0.08), 0 12px 32px rgba(0,0,0,0.55) !important; } #language-menu .MuiMenuItem-root { color: var(--phosphor-dim) !important; } #language-menu .MuiMenuItem-root .MuiTypography-root, #language-menu .MuiMenuItem-root .MuiListItemText-primary { color: inherit !important; } #language-menu .MuiMenuItem-root:hover { background: rgba(124,255,178,.08) !important; color: var(--phosphor) !important; } #language-menu .MuiMenuItem-root.Mui-selected { background: rgba(124,255,178,.05) !important; color: var(--phosphor) !important; } #language-menu .MuiMenuItem-root.Mui-selected:hover { background: rgba(124,255,178,.12) !important; } /* Sprachwechsler-Button: gleicher Look wie #sign-in-button (eckig, transparent, Hover-Border statt MUI-Standard-Kreis-Hover/Ripple). Selektor #language-button ist eine stabile, ungehashte ID (kein Klassen-Hash). */ #language-button { background: none !important; border: 1px solid transparent !important; border-radius: 3px !important; color: var(--phosphor-dim) !important; } #language-button:hover { border-color: var(--phosphor) !important; box-shadow: 0 0 10px rgba(124,255,178,.25) !important; color: var(--phosphor) !important; } #language-button .MuiSvgIcon-root { fill: currentColor !important; } /* MUI-Ripple (der ellipsenförmige Kreis-Hover) nur für diesen Button aus — bewusst nicht global, andere Buttons (z. B. #sign-in-button) behalten ihren Ripple/Standardverhalten falls gewünscht. */ #language-button .MuiTouchRipple-root { display: none !important; }