docs(release): Dokumentation ins Englische übersetzen und v1.11.1 Docs
- README, CHANGELOG, DISCLAIMER, SECURITY auf Englisch übersetzen - Projekt-Docs (architecture, patterns, widget-schema, style-guide) übersetzen - CODEOWNERS für Master-Branch-Schutz hinzufügen - release.yml auf Englisch übersetzen - STYLE_GUIDE von src/css/ nach docs/ verschieben
This commit is contained in:
@@ -1,101 +0,0 @@
|
||||
# ⬡ 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:
|
||||
|
||||
```css
|
||||
[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:
|
||||
|
||||
```css
|
||||
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:
|
||||
|
||||
```css
|
||||
--bg-board: rgba(R, G, B, 0.65);
|
||||
backdrop-filter: blur(12px);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Entwickelt von **[Hellion Online Media — Florian Wathling](https://hellion-media.de)** — JonKazama-Hellion
|
||||
+26
-11
@@ -1,8 +1,12 @@
|
||||
# ⬡ Opera GX — New-Tab Workaround
|
||||
|
||||
Opera GX priorisiert die eigene Speed Dial Seite und ignoriert `chrome_url_overrides`
|
||||
für entpackte Erweiterungen. Um das Hellion Dashboard trotzdem als New-Tab-Seite
|
||||
zu etablieren, kommen zwei zusätzliche Skripte zum Einsatz.
|
||||
Opera GX ist der einzige Browser in diesem Projekt der sich aktiv dagegen wehrt,
|
||||
eine eigene New-Tab-Seite zu nutzen. Während Chrome, Edge, Firefox und selbst Vivaldi
|
||||
einfach `chrome_url_overrides` respektieren, priorisiert Opera GX seine eigene
|
||||
Speed Dial Seite und ignoriert den Standard-Override für entpackte Erweiterungen.
|
||||
|
||||
Das Ergebnis: vier Stunden Debugging, zwei Workaround-Skripte und ein Reddit-Thread
|
||||
der tatsächlich geholfen hat. Hier ist was dabei rausgekommen ist.
|
||||
|
||||
---
|
||||
|
||||
@@ -11,8 +15,8 @@ zu etablieren, kommen zwei zusätzliche Skripte zum Einsatz.
|
||||
| Browser | New-Tab Override | Zusatzaufwand |
|
||||
|---|---|---|
|
||||
| Chrome / Edge / Brave / Vivaldi | `chrome_url_overrides` | Keiner |
|
||||
| Firefox | `chrome_url_overrides` (MV2) | Eigenes Manifest |
|
||||
| Opera / Opera GX | Blockiert durch Speed Dial | Workaround nötig |
|
||||
| Firefox | `chrome_url_overrides` (MV3) | Eigenes Manifest |
|
||||
| Opera / Opera GX | Blockiert durch Speed Dial | Dieser Ordner hier |
|
||||
|
||||
---
|
||||
|
||||
@@ -20,25 +24,36 @@ zu etablieren, kommen zwei zusätzliche Skripte zum Einsatz.
|
||||
|
||||
### `background.js` — Tab-Management
|
||||
|
||||
Überwacht Tab-Aktivitäten im Hintergrund und greift ein bevor Opera seine Startseite lädt.
|
||||
Überwacht Tab-Aktivitäten im Hintergrund und greift ein bevor Opera seine Startseite laden kann.
|
||||
|
||||
- Erkennt `opera://startpage/` und `chrome://startpage/`
|
||||
- Leitet per `chrome.tabs.update` auf `newtab.html` um
|
||||
- Prüft zusätzlich bei `onActivated` — auch im Hintergrund geladene Tabs werden sofort aktualisiert
|
||||
- Prüft zusätzlich bei `onActivated`, weil Opera manche Tabs im Hintergrund lädt
|
||||
und der erste Redirect dann nicht greift
|
||||
|
||||
### `redirect.js` — In-Page Redirect
|
||||
|
||||
Einige Opera-Systemprozesse sind so isoliert dass ein externer Eingriff nicht zuverlässig greift.
|
||||
Manche Opera-Systemprozesse sind so weit isoliert dass ein externer Eingriff
|
||||
nicht zuverlässig ankommt. Also nochmal von innen.
|
||||
|
||||
- Wird als Content Script in Opera-Startseiten-Bereiche injiziert
|
||||
- Löst den Redirect bei `document_start` aus — minimale Verzögerung, kein Flackern
|
||||
- Wird als Content Script direkt in Opera-Startseiten-Bereiche injiziert
|
||||
- Löst den Redirect bei `document_start` aus, bevor die Speed Dial Seite
|
||||
überhaupt anfangen kann sich aufzubauen
|
||||
|
||||
Ja, es braucht wirklich beide Skripte. Opera GX hat das so entschieden.
|
||||
|
||||
Das Gute daran: die GitHub Actions kümmern sich darum dass jeder Browser nur bekommt
|
||||
was er braucht. Das Opera-ZIP enthält die Workaround-Skripte, das Chrome-ZIP nicht.
|
||||
Wer sich das manuell zusammensuchen müsste wäre vermutlich genauso genervt wie ich
|
||||
beim Debuggen war.
|
||||
|
||||
---
|
||||
|
||||
## Datenschutz
|
||||
|
||||
Kein Tracking, keine Speicherung, keine externen Requests.
|
||||
Ausschließlich Standard-Browser-APIs — `chrome.tabs` — um die Kontrolle über den New Tab zurückzugewinnen.
|
||||
Nur Standard-Browser-APIs, `chrome.tabs`, um zurückzubekommen was eigentlich
|
||||
standardmäßig funktionieren sollte.
|
||||
|
||||
**100% lokal. 0% Analytics. Wie im gesamten Hellion NewTab Projekt.**
|
||||
|
||||
|
||||
Reference in New Issue
Block a user