Einheitliches Branding für alle Services

Das SSO-Portal unter auth.matzka.cloud erstrahlt jetzt im gleichen modernen Glassmorphism-Design wie die Hauptwebseite. Die Anpassung umfasst das komplette visuelle Erscheinungsbild - vom Login-Formular bis zur Anwendungsbibliothek.

Farbschema

Das Design basiert auf einem konsistenten Farbschema, das sich durch alle Komponenten zieht:

Element	Farbe	Hex-Code
Hintergrund	Deep Dark Blue	#050a14
Primärfarbe	Electric Cyan	#00e1ff
Sekundärfarbe	Blue	#3b82f6
Text (hell)	Slate	#f8fafc
Text (gedämpft)	Slate	#cbd5e1
Borders	Transparent White	rgba(255,255,255,0.15)

Glassmorphism-Effekte

Das Design nutzt moderne Glassmorphism-Effekte für ein elegantes Erscheinungsbild:

• Backdrop Blur: Login-Cards und Modals mit 16px Blur-Effekt
• Semi-transparente Hintergründe: rgba(255, 255, 255, 0.06) für subtile Glasoptik
• Leuchtende Borders: Cyan-Glow bei Hover und Focus-States
• Gradient-Buttons: Cyan-zu-Blau Verlauf für Primary Actions
• Pulsierendes Logo: Animierter Glow-Effekt auf dem Logo

Branding-Assets

• Logo: Weißes matzka.cloud SVG-Logo mit pulsierendem Glow-Effekt
• Favicon: Minimalistisches Cloud-Icon im SVG-Format
• Titel: "matzka.cloud" statt "authentik"

Technische Umsetzung

Custom CSS Einbindung

Authentik 2024.12 lädt Custom CSS über eine Umgebungsvariable und ein Volume-Mount:

environment:
  AUTHENTIK_WEB__LOAD_LOCAL_FILES: "true"

volumes:
  - ./authentik/custom-web/custom.css:/web/dist/custom.css:ro

Patternfly 5 Variablen

Das CSS überschreibt die Patternfly 5 CSS-Variablen für konsistentes Theming:

:root {
  --pf-v5-global--BackgroundColor--100: #050a14 !important;
  --pf-v5-global--BackgroundColor--200: #0f172a !important;
  --pf-v5-global--primary-color--100: #00e1ff !important;
  --pf-v5-global--link--Color: #00e1ff !important;
}

Gestaltete Komponenten

Das Custom CSS passt folgende Authentik-Komponenten an:

Komponente	Anpassung
Login-Seite	Glassmorphism-Card mit Gradient-Background
Anwendungsbibliothek	Cards mit Hover-Glow-Effekt
Navigation	Transparente Sidebar mit Cyan-Highlights
Formulare	Dark-Mode Inputs mit Focus-Glow
Buttons	Gradient für Primary, Glass-Effekt für Secondary
Modals	Backdrop-Blur mit dunklem Overlay
Alerts	Farbcodierte Borders (Cyan/Grün/Rot/Orange)
Dropdowns	Glass-Effekt mit Blur

Dateistruktur

authentik/
└── custom-web/
    └── custom.css          # Glassmorphism Theme (~500 Zeilen)

/media/public/branding/
├── matzka-logo.svg         # 580 Bytes
└── matzka-favicon.svg      # 766 Bytes

Kompatibilität