Files

T

JonKazama-Hellion 74e3eaefcf refactor(settings): Theme-Modal auslagern, Accordion-Sektionen

- Theme-Picker als eigenes Modal mit Header-Button aus Settings entfernt
- Background-Optionen (URL + Upload) ins Theme-Modal verschoben
- Alle Settings-Sektionen einklappbar mit Chevron-Animation
- About und Danger Zone standardmaessig eingeklappt
- Suchleisten-Toggle von DATA nach BEHAVIOR verschoben
- Quick Save Placeholder-Element entfernt
- STYLE_GUIDE.md fuer Theme-System hinzugefuegt

2026-03-21 19:08:31 +01:00

3.1 KiB

Raw Blame History

⬡ Hellion Dashboard — Design & Theme-System

Leitfaden für das visuelle Design des Hellion Dashboards. Definiert wie Themes aufgebaut sind und welche Patterns konsistent eingehalten werden — für eine immersive, fokussierte Nutzererfahrung.

Design-Säulen

Säule	Beschreibung
Immersion	Das Interface wirkt wie ein HUD das über der Szenerie schwebt — kein Fremdkörper
Visual Clarity	Gezielter `blur`-Einsatz trennt UI und Hintergrundbild — reduziert Reizüberflutung
Harmonie	Jedes Theme zieht seine Farben aus den dominanten Lichtquellen des Hintergrundbildes

Anatomie eines Themes

Jedes Theme folgt dieser Variablen-Struktur in main.css. Für ein neues Theme diesen Block kopieren und anpassen:

[data-theme="dein-theme-name"] {
  /* 1. AKZENTE — Die Lichtquelle */
  --accent:          #HEXCODE;             /* Hauptfarbe (Neon/Licht) */
  --accent-dim:      rgba(R, G, B, 0.12);  /* Subtiler Hintergrund */
  --accent-glow:     rgba(R, G, B, 0.08);  /* Glow für Logo & Uhr */
  --border-accent:   rgba(R, G, B, 0.25);  /* Fokus-Rahmen */

  /* 2. BASIS — Das Fundament */
  --bg-primary:      #HEXCODE;             /* Dunkelster Punkt im Bild */
  --bg-board:        rgba(R, G, B, 0.55);  /* Glas-Effekt der Boards */

  /* 3. TEXT — Kontrast */
  --text-primary:    #FFFFFF;              /* Klar lesbar, leicht getönt */
  --text-secondary:  #A0A0A0;             /* Entsättigt für weniger Rauschen */

  /* 4. OVERLAY — Vignette */
  --overlay-bg: radial-gradient(
    circle at center,
    transparent 0%,
    var(--bg-primary) 100%
  );
}

UI-Patterns

Frosted Glass

Hardware-beschleunigter Blur für Lesbarkeit auf komplexen Hintergründen:

backdrop-filter: blur(8px);

Erzeugt Tiefe und visuelle Ruhe hinter Text und UI-Elementen.

Typografie-Hierarchie

Font	Einsatz
Rajdhani	Display — Uhr, Titel, Logo. Alles was nach "System" aussieht
Inter	Body — Bookmark-Titel, Listen, interaktive Elemente
Cinzel	Fantasy — Exklusiv für Themes mit majestätischem oder antikem Vibe (Crescent, Julia & Jin)

Theme-Übersicht

Theme	Akzentfarbe	Stimmung
Nebula	`#b359ff` Magenta	Chill, Cosmic
Crescent	`#d4bd8a` Gold	Luxury, Night
Event Horizon	`#9d5cff` Purple	Deep Space, Void
Merchantman	`#2eb8b8` Emerald	Industrial, Alien
Julia & Jin	`#7db3ff` Aetherial Blue	FFXIV Night
SC Sunset	`#ff8c3d` Amber	Emotional, Horizon
Hellion HUD	`#32ff6a` Neon Green	Tactical, Admin
Hellion Energy	`#1eff8e` Acid Green	Overdrive, Power

ADHS-Optimierung

Bei Hintergrundbildern mit vielen Details (z.B. Julia & Jin) den Board-Alpha erhöhen und den Blur verstärken — das dimmt das Hintergrundrauschen und lässt das Gehirn schneller die relevanten Informationen erfassen:

--bg-board: rgba(R, G, B, 0.65);
backdrop-filter: blur(12px);

Entwickelt von Hellion Online Media — Florian Wathling — JonKazama-Hellion

3.1 KiB Raw Blame History