From af2a5c49128c86a1306fcf1bfc52124e18c10dc1 Mon Sep 17 00:00:00 2001 From: Jon Kazama Date: Sat, 13 Jun 2026 19:05:49 +0200 Subject: [PATCH 01/36] feat(css): @layer-Reihenfolge deklarieren (base/theme/layout/components/theme-overrides/utilities) --- src/css/main.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/css/main.css b/src/css/main.css index 8fd074f..a4a32d1 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -1,3 +1,12 @@ +/* ============================================= + CASCADE LAYERS (v2.2) — Reihenfolge = Prioritaet (spaeter gewinnt) + theme-overrides MUSS nach components stehen, sonst verlieren die + theme-spezifischen Komponenten-Regeln (Board-Blur, Cinzel-Logos, + Hover-Tints) und alle 11 Themes brechen. + prefers-reduced-motion bleibt bewusst UNGESCHICHTET (Phase 4). + ============================================= */ +@layer base, theme, layout, components, theme-overrides, utilities; + /* ============================================= HELLION Dashboard — Theme System Themes: nebula | crescent | event-horizon | merchantman | julia-jin | sc-sunset | hellion-hud | hellion-energy From 829914a27154a966946adc7f0ffe27cc57d333dc Mon Sep 17 00:00:00 2001 From: Jon Kazama Date: Sat, 13 Jun 2026 19:07:44 +0200 Subject: [PATCH 02/36] refactor(css): theme-scoped Komponenten-Regeln aus den 11 Theme-Bloecken in Sammelblock extrahieren --- src/css/main.css | 109 +++++++++++++++++++++++++---------------------- 1 file changed, 57 insertions(+), 52 deletions(-) diff --git a/src/css/main.css b/src/css/main.css index a4a32d1..6b5b46c 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -115,8 +115,6 @@ --logo-shadow: rgba(179,89,255,0.35); --bg-solid-fallback: #0a060e; } -[data-theme="nebula"] .board { border-color: rgba(214,92,255,0.10); } -[data-theme="nebula"] .bm-item:hover { background: rgba(214,92,255,0.05); } /* ============================================ THEME: CRESCENT (gold / minimalist night) @@ -143,12 +141,6 @@ letter-spacing: 0.5px; } -[data-theme="crescent"] .logo { font-family: 'Cinzel', serif; letter-spacing: 4px; } -[data-theme="crescent"] .clock { font-family: 'Cinzel', serif; } -[data-theme="crescent"] .board-title { letter-spacing: 2px; } -[data-theme="crescent"] .bm-item:hover { background: rgba(200,168,74,0.05); } -[data-theme="crescent"] .board { border-color: rgba(200,168,74,0.10); } - /* ============================================ THEME: EVENT HORIZON (Cosmic Purple / deep space) ============================================ */ @@ -172,9 +164,6 @@ --logo-shadow: rgba(157, 92, 255, 0.45); --bg-solid-fallback: #08050f; } -[data-theme="event-horizon"] .board { border-color: rgba(157, 92, 255, 0.15); } -[data-theme="event-horizon"] .bm-item:hover { background: rgba(157, 92, 255, 0.08); } - /* ============================================ THEME: MERCHANTMAN (Emerald / industrial sci-fi) @@ -199,8 +188,6 @@ --logo-shadow: rgba(46, 184, 184, 0.45); --bg-solid-fallback: #060a0a; } -[data-theme="merchantman"] .board { border-color: rgba(46, 184, 184, 0.12); } -[data-theme="merchantman"] .bm-item:hover { background: rgba(46, 184, 184, 0.06); } /* ============================================ THEME: JULIA & JIN (Aetherial Night / FFXIV) @@ -225,11 +212,6 @@ --logo-shadow: rgba(125, 179, 255, 0.50); --bg-solid-fallback: #070a14; } -[data-theme="julia-jin"] .logo { font-family: 'Cinzel', serif; letter-spacing: 5px; text-transform: uppercase; } -[data-theme="julia-jin"] .clock { font-family: 'Cinzel', serif; font-weight: 600; } -[data-theme="julia-jin"] .board-title { letter-spacing: 2px; font-weight: 500; } -[data-theme="julia-jin"] .board { border-color: rgba(125, 179, 255, 0.15); backdrop-filter: blur(4px); } -[data-theme="julia-jin"] .bm-item:hover { background: rgba(125, 179, 255, 0.08); } /* ============================================ THEME: SC Sunset - Horizon Glow @@ -254,11 +236,6 @@ --logo-shadow: rgba(255, 140, 61, 0.45); --bg-solid-fallback: #0f0a08; } -[data-theme="sc-sunset"] .board { - border-color: rgba(255, 140, 61, 0.15); - backdrop-filter: blur(6px);} -[data-theme="sc-sunset"] .bm-item:hover { - background: rgba(255, 140, 61, 0.08); } /* ============================================ THEME: HELLION HUD (circuit board / red+green) @@ -284,16 +261,6 @@ --bg-solid-fallback: #050805; --danger: #ff4d4d; } -[data-theme="hellion-hud"] .board { - border-color: rgba(50, 255, 106, 0.15); - backdrop-filter: blur(8px) brightness(1.1); -} - -[data-theme="hellion-hud"] .clock { - font-family: 'Rajdhani', sans-serif; - font-weight: 700; - text-shadow: 0 0 10px var(--accent-glow); -} /* ============================================ THEME: HELLION ENERGY (matrix / tactical green) @@ -318,15 +285,6 @@ --logo-shadow: rgba(30, 255, 142, 0.60); --bg-solid-fallback: #040705; } -[data-theme="hellion-energy"] .board { - border-color: rgba(30, 255, 142, 0.15); - backdrop-filter: blur(10px) saturate(1.2); -} - -[data-theme="hellion-energy"] .bm-item:hover { - background: rgba(30, 255, 142, 0.10); - box-shadow: inset 0 0 10px rgba(30, 255, 142, 0.05); -} /* ============================================ THEME: SATISFACTORY (Industrial Desert) @@ -354,11 +312,6 @@ --logo-shadow: rgba(0, 180, 216, 0.40); --bg-solid-fallback: #1a0f08; } -[data-theme="satisfactory"] .logo { font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; } -[data-theme="satisfactory"] .clock { font-family: 'Rajdhani', sans-serif; font-weight: 600; color: var(--accent); } -[data-theme="satisfactory"] .board-title { font-family: 'Rajdhani', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; } -[data-theme="satisfactory"] .board { border-color: rgba(0, 180, 216, 0.20); backdrop-filter: blur(12px); } -[data-theme="satisfactory"] .bm-item:hover { background: rgba(0, 180, 216, 0.10); } /* ============================================ THEME: AVORION (Deep Void) @@ -385,11 +338,6 @@ --logo-shadow: rgba(46, 196, 160, 0.50); --bg-solid-fallback: #020d0c; } -[data-theme="avorion"] .logo { font-family: 'Rajdhani', sans-serif; font-weight: 500; letter-spacing: 6px; text-transform: uppercase; } -[data-theme="avorion"] .clock { font-family: 'Rajdhani', sans-serif; font-weight: 400; color: var(--accent); } -[data-theme="avorion"] .board-title { font-family: 'Rajdhani', sans-serif; font-weight: 500; text-transform: uppercase; } -[data-theme="avorion"] .board { border-color: rgba(46, 196, 160, 0.15); backdrop-filter: blur(8px); } -[data-theme="avorion"] .bm-item:hover { background: rgba(46, 196, 160, 0.08); } /* ============================================ THEME: HELLION STEALTH (Tactical Recon) @@ -416,6 +364,63 @@ --logo-shadow: rgba(94, 194, 255, 0.45); --bg-solid-fallback: #0d0f12; } + +/* ============================================ + THEME-SCOPED KOMPONENTEN-REGELN (Sammelblock fuer @layer theme-overrides) + Aus den 11 [data-theme]-Bloecken extrahiert. Muss spaeter als components + greifen, sonst verlieren Board-Blur, Cinzel-Logos und Hover-Tints. + ============================================ */ + +[data-theme="nebula"] .board { border-color: rgba(214,92,255,0.10); } +[data-theme="nebula"] .bm-item:hover { background: rgba(214,92,255,0.05); } +[data-theme="crescent"] .logo { font-family: 'Cinzel', serif; letter-spacing: 4px; } +[data-theme="crescent"] .clock { font-family: 'Cinzel', serif; } +[data-theme="crescent"] .board-title { letter-spacing: 2px; } +[data-theme="crescent"] .bm-item:hover { background: rgba(200,168,74,0.05); } +[data-theme="crescent"] .board { border-color: rgba(200,168,74,0.10); } +[data-theme="event-horizon"] .board { border-color: rgba(157, 92, 255, 0.15); } +[data-theme="event-horizon"] .bm-item:hover { background: rgba(157, 92, 255, 0.08); } +[data-theme="merchantman"] .board { border-color: rgba(46, 184, 184, 0.12); } +[data-theme="merchantman"] .bm-item:hover { background: rgba(46, 184, 184, 0.06); } +[data-theme="julia-jin"] .logo { font-family: 'Cinzel', serif; letter-spacing: 5px; text-transform: uppercase; } +[data-theme="julia-jin"] .clock { font-family: 'Cinzel', serif; font-weight: 600; } +[data-theme="julia-jin"] .board-title { letter-spacing: 2px; font-weight: 500; } +[data-theme="julia-jin"] .board { border-color: rgba(125, 179, 255, 0.15); backdrop-filter: blur(4px); } +[data-theme="julia-jin"] .bm-item:hover { background: rgba(125, 179, 255, 0.08); } +[data-theme="sc-sunset"] .board { + border-color: rgba(255, 140, 61, 0.15); + backdrop-filter: blur(6px);} +[data-theme="sc-sunset"] .bm-item:hover { + background: rgba(255, 140, 61, 0.08); } +[data-theme="hellion-hud"] .board { + border-color: rgba(50, 255, 106, 0.15); + backdrop-filter: blur(8px) brightness(1.1); +} + +[data-theme="hellion-hud"] .clock { + font-family: 'Rajdhani', sans-serif; + font-weight: 700; + text-shadow: 0 0 10px var(--accent-glow); +} +[data-theme="hellion-energy"] .board { + border-color: rgba(30, 255, 142, 0.15); + backdrop-filter: blur(10px) saturate(1.2); +} + +[data-theme="hellion-energy"] .bm-item:hover { + background: rgba(30, 255, 142, 0.10); + box-shadow: inset 0 0 10px rgba(30, 255, 142, 0.05); +} +[data-theme="satisfactory"] .logo { font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; } +[data-theme="satisfactory"] .clock { font-family: 'Rajdhani', sans-serif; font-weight: 600; color: var(--accent); } +[data-theme="satisfactory"] .board-title { font-family: 'Rajdhani', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; } +[data-theme="satisfactory"] .board { border-color: rgba(0, 180, 216, 0.20); backdrop-filter: blur(12px); } +[data-theme="satisfactory"] .bm-item:hover { background: rgba(0, 180, 216, 0.10); } +[data-theme="avorion"] .logo { font-family: 'Rajdhani', sans-serif; font-weight: 500; letter-spacing: 6px; text-transform: uppercase; } +[data-theme="avorion"] .clock { font-family: 'Rajdhani', sans-serif; font-weight: 400; color: var(--accent); } +[data-theme="avorion"] .board-title { font-family: 'Rajdhani', sans-serif; font-weight: 500; text-transform: uppercase; } +[data-theme="avorion"] .board { border-color: rgba(46, 196, 160, 0.15); backdrop-filter: blur(8px); } +[data-theme="avorion"] .bm-item:hover { background: rgba(46, 196, 160, 0.08); } [data-theme="hellion-stealth"] .logo { font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 4px; } [data-theme="hellion-stealth"] .clock { font-family: 'Rajdhani', sans-serif; font-weight: 600; color: var(--accent); } [data-theme="hellion-stealth"] .board-title { text-transform: uppercase; font-size: 0.85rem; letter-spacing: 2px; } From 27e4c8243c74ca0f329a41c18c8b701a29c3a226 Mon Sep 17 00:00:00 2001 From: Jon Kazama Date: Sat, 13 Jun 2026 19:08:18 +0200 Subject: [PATCH 03/36] refactor(css): base-Layer wrappen (Fonts, :root-Tokens, @supports-Fallback, Reset, Typografie) --- src/css/main.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/css/main.css b/src/css/main.css index 6b5b46c..98d652c 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -18,6 +18,7 @@ - Inter: Fließtext und allgemeine Lesbarkeit - Cinzel: Alternative Display-Schriftart für bestimmte Themes ============================================= */ +@layer base { /* Rajdhani - Lokal */ @font-face { font-family: 'Rajdhani'; @@ -91,6 +92,7 @@ background-color: var(--bg-solid-fallback, var(--bg-primary)); } } +} /* ============================================ THEME: NEBULA (magenta / cosmic nebula) @@ -431,6 +433,7 @@ BASE STYLES ============================================ */ +@layer base { *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { @@ -442,6 +445,7 @@ html, body { overflow-x: hidden; transition: background 0.5s; } +} .bg-layer { position: fixed; inset: 0; z-index: 0; From 486438772d7f127f078a98ca8accb06d9c8b411a Mon Sep 17 00:00:00 2001 From: Jon Kazama Date: Sat, 13 Jun 2026 19:08:50 +0200 Subject: [PATCH 04/36] refactor(css): theme-Layer wrappen (11 [data-theme]-Token-Bloecke, nur Custom Properties) --- src/css/main.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/css/main.css b/src/css/main.css index 98d652c..55d00ab 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -94,6 +94,7 @@ } } +@layer theme { /* ============================================ THEME: NEBULA (magenta / cosmic nebula) ============================================ */ @@ -366,6 +367,7 @@ --logo-shadow: rgba(94, 194, 255, 0.45); --bg-solid-fallback: #0d0f12; } +} /* ============================================ THEME-SCOPED KOMPONENTEN-REGELN (Sammelblock fuer @layer theme-overrides) From 0683686fcb9fe76832d38cc00c27fc79e4b80f02 Mon Sep 17 00:00:00 2001 From: Jon Kazama Date: Sat, 13 Jun 2026 19:09:15 +0200 Subject: [PATCH 05/36] refactor(css): layout-Layer wrappen (Hintergrund-Ebenen, Header, Board-Grid-Wrapper) --- src/css/main.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/css/main.css b/src/css/main.css index 55d00ab..342a9b6 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -449,6 +449,7 @@ html, body { } } +@layer layout { .bg-layer { position: fixed; inset: 0; z-index: 0; background-size: cover; background-position: center; @@ -535,6 +536,7 @@ html, body { padding: 110px 40px 40px; min-height: 100vh; } +} .board { width: var(--board-width); From 0ed3a8fe64be170deef6b9b2b8aa782c7f760bfe Mon Sep 17 00:00:00 2001 From: Jon Kazama Date: Sat, 13 Jun 2026 19:09:50 +0200 Subject: [PATCH 06/36] refactor(css): components-Layer wrappen (Boards, Bookmarks, Panels, Modals, Widgets, Dialoge, Accordion) --- src/css/main.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/css/main.css b/src/css/main.css index 342a9b6..084d0aa 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -538,6 +538,7 @@ html, body { } } +@layer components { .board { width: var(--board-width); background: var(--bg-board); @@ -867,6 +868,7 @@ body.show-desc .bm-desc { display: block; } background: var(--accent-dim); flex-shrink: 0; } +} /* ---- BOARD BLUR (Private Mode) ---- */ @@ -914,6 +916,7 @@ body.show-desc .bm-desc { display: block; } .board.blurred .btn-blur-board { color: var(--accent); opacity: 0.7; } +@layer components { /* ---- ABOUT BLOCK ---- */ .about-block { padding: 4px 18px 14px; @@ -2365,6 +2368,7 @@ body.show-desc .bm-desc { display: block; } .settings-section.open .section-content { max-height: 800px; } +} /* ============================================ UTILITY CLASSES From 2b6b2c06c2ed8a36008bea8101579bc45ddd8919 Mon Sep 17 00:00:00 2001 From: Jon Kazama Date: Sat, 13 Jun 2026 19:10:45 +0200 Subject: [PATCH 07/36] refactor(css): theme-overrides-Layer wrappen (37 theme-scoped Komponenten-Regeln nach components) --- src/css/main.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/css/main.css b/src/css/main.css index 084d0aa..1cb1116 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -375,6 +375,7 @@ greifen, sonst verlieren Board-Blur, Cinzel-Logos und Hover-Tints. ============================================ */ +@layer theme-overrides { [data-theme="nebula"] .board { border-color: rgba(214,92,255,0.10); } [data-theme="nebula"] .bm-item:hover { background: rgba(214,92,255,0.05); } [data-theme="crescent"] .logo { font-family: 'Cinzel', serif; letter-spacing: 4px; } @@ -430,6 +431,7 @@ [data-theme="hellion-stealth"] .board-title { text-transform: uppercase; font-size: 0.85rem; letter-spacing: 2px; } [data-theme="hellion-stealth"] .board { border-color: rgba(94, 194, 255, 0.15); backdrop-filter: blur(10px); } [data-theme="hellion-stealth"] .bm-item:hover { background: rgba(94, 194, 255, 0.10); border-left: 2px solid var(--accent); } +} /* ============================================ BASE STYLES From ccbd27916cb78b4c2fdf50b8c111750551299159 Mon Sep 17 00:00:00 2001 From: Jon Kazama Date: Sat, 13 Jun 2026 19:11:45 +0200 Subject: [PATCH 08/36] refactor(css): utilities-Layer wrappen (Board-Blur/Privacy, Helfer-Klassen) --- src/css/main.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/css/main.css b/src/css/main.css index 1cb1116..f953e8c 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -874,6 +874,7 @@ body.show-desc .bm-desc { display: block; } /* ---- BOARD BLUR (Private Mode) ---- */ +@layer utilities { .board.blurred .board-list, .board.blurred .show-more-btn, .board.blurred .add-bm-btn { @@ -916,6 +917,7 @@ body.show-desc .bm-desc { display: block; } } .btn-blur-board:hover { background: var(--accent-dim); color: var(--accent); } .board.blurred .btn-blur-board { color: var(--accent); opacity: 0.7; } +} @layer components { @@ -2375,6 +2377,7 @@ body.show-desc .bm-desc { display: block; } /* ============================================ UTILITY CLASSES ============================================ */ +@layer utilities { .hidden { display: none; } .accent-text { color: var(--accent); } .dim { opacity: 0.4; } @@ -2388,6 +2391,7 @@ body.show-desc .bm-desc { display: block; } .about-info-label-block { display: block; margin-bottom: 6px; } .about-link-subtle { color: var(--text-secondary); text-decoration: none; } .modal-input-spaced { margin-top: 8px; } +} /* ============================================ RESPONSIVE — Mobile & Tablet From df8a187af2185bd0129468d5fd1593ddb4bcc31b Mon Sep 17 00:00:00 2001 From: Jon Kazama Date: Sat, 13 Jun 2026 19:36:32 +0200 Subject: [PATCH 09/36] refactor(css): derive base accent tokens via color-mix from --accent --- src/css/main.css | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/src/css/main.css b/src/css/main.css index f953e8c..02c4faa 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -56,9 +56,15 @@ /* ---- BASE VARIABLES (Nebula = Default) ---- */ :root { --accent: #b359ff; - --accent-dim: rgba(179, 89, 255, 0.12); - --accent-glow: rgba(179, 89, 255, 0.05); - --border-accent: rgba(179, 92, 255, 0.25); + /* Akzent-Töne als Formel aus --accent abgeleitet (Spec Block 1, color-mix Mittelweg). + --*-pct ist die Pro-Theme-Alpha-Variable; Default = häufigster Wert über alle 11 Themes. + Themes mit abweichendem Alpha überschreiben nur die Prozent-Variable im theme-Layer. */ + --accent-dim-pct: 12%; + --accent-glow-pct: 8%; + --border-accent-pct: 25%; + --accent-dim: color-mix(in srgb, var(--accent) var(--accent-dim-pct), transparent); + --accent-glow: color-mix(in srgb, var(--accent) var(--accent-glow-pct), transparent); + --border-accent: color-mix(in srgb, var(--accent) var(--border-accent-pct), transparent); --bg-primary: #050308; --bg-board: rgba(10, 6, 14, 0.55); --border: rgba(255, 255, 255, 0.06); @@ -75,9 +81,11 @@ --spacing-compact: 5px; --overlay-bg: radial-gradient(circle at center, rgba(10,6,14,0.3) 0%, rgba(5,3,8,0.85) 100%); --header-bg: rgba(10,6,14,0.90); - --board-hover-border: rgba(179,89,255,0.18); + --board-hover-border-pct: 22%; + --logo-shadow-pct: 45%; + --board-hover-border: color-mix(in srgb, var(--accent) var(--board-hover-border-pct), transparent); --toggle-on-bg: rgba(214,92,255,0.22); - --logo-shadow: rgba(179,89,255,0.35); + --logo-shadow: color-mix(in srgb, var(--accent) var(--logo-shadow-pct), transparent); --bg-solid-fallback: #0a060e; } From ab07c94141ee1cef440c5a023dc08351b1cff0c6 Mon Sep 17 00:00:00 2001 From: Jon Kazama Date: Sat, 13 Jun 2026 19:38:55 +0200 Subject: [PATCH 10/36] refactor(css): inherit formula accent tokens from base, keep per-theme alpha as --*-pct --- src/css/main.css | 93 +++++++++++++++++------------------------------- 1 file changed, 32 insertions(+), 61 deletions(-) diff --git a/src/css/main.css b/src/css/main.css index 02c4faa..702840d 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -108,9 +108,9 @@ ============================================ */ [data-theme="nebula"] { --accent: #b359ff; - --accent-dim: rgba(179, 89, 255, 0.12); - --accent-glow: rgba(179, 89, 255, 0.05); - --border-accent: rgba(179, 92, 255, 0.25); + --accent-glow-pct: 5%; + --board-hover-border-pct: 18%; + --logo-shadow-pct: 35%; --bg-primary: #050308; --bg-board: rgba(10, 6, 14, 0.55); --border: rgba(255, 255, 255, 0.055); @@ -121,9 +121,7 @@ --font-body: 'Inter', sans-serif; --overlay-bg: radial-gradient(circle at center, rgba(10,6,14,0.3) 0%, rgba(5,3,8,0.85) 100%); --header-bg: rgba(10,6,14,0.92); - --board-hover-border: rgba(179,89,255,0.18); --toggle-on-bg: rgba(214,92,255,0.22); - --logo-shadow: rgba(179,89,255,0.35); --bg-solid-fallback: #0a060e; } @@ -131,10 +129,10 @@ THEME: CRESCENT (gold / minimalist night) ============================================ */ [data-theme="crescent"] { - --accent: #d4bd8a; - --accent-dim: rgba(212, 189, 138, 0.12); - --accent-glow: rgba(212, 189, 138, 0.05); - --border-accent: rgba(212, 189, 138, 0.25); + --accent: #d4bd8a; + --accent-glow-pct: 5%; + --board-hover-border-pct: 20%; + --logo-shadow-pct: 40%; --bg-primary: #06080f; --bg-board: rgba(8, 12, 22, 0.45); --border: rgba(212, 189, 138, 0.10); @@ -145,9 +143,7 @@ --font-body: 'Inter', sans-serif; --overlay-bg: radial-gradient(circle at center, rgba(6,8,15,0.2) 0%, rgba(6,8,15,0.9) 100%); --header-bg: rgba(6,8,15,0.95); - --board-hover-border: rgba(212, 189, 138, 0.20); --toggle-on-bg: rgba(200,168,74,0.22); - --logo-shadow: rgba(212, 189, 138, 0.40); --bg-solid-fallback: #080c16; letter-spacing: 0.5px; } @@ -156,10 +152,8 @@ THEME: EVENT HORIZON (Cosmic Purple / deep space) ============================================ */ [data-theme="event-horizon"] { - --accent: #9d5cff; - --accent-dim: rgba(157, 92, 255, 0.12); - --accent-glow: rgba(157, 92, 255, 0.08); - --border-accent: rgba(157, 92, 255, 0.28); + --accent: #9d5cff; + --border-accent-pct: 28%; --bg-primary: #040308; --bg-board: rgba(8, 5, 15, 0.45); --border: rgba(157, 92, 255, 0.12); @@ -170,9 +164,7 @@ --font-body: 'Inter', sans-serif; --overlay-bg: radial-gradient(circle at center, rgba(4,3,8,0.2) 0%, rgba(4,3,8,0.95) 100%); --header-bg: rgba(4,3,8,0.96); - --board-hover-border: rgba(157, 92, 255, 0.22); --toggle-on-bg: rgba(224,128,48,0.22); - --logo-shadow: rgba(157, 92, 255, 0.45); --bg-solid-fallback: #08050f; } @@ -180,10 +172,9 @@ THEME: MERCHANTMAN (Emerald / industrial sci-fi) ============================================ */ [data-theme="merchantman"] { - --accent: #2eb8b8; - --accent-dim: rgba(46, 184, 184, 0.12); - --accent-glow: rgba(46, 184, 184, 0.06); - --border-accent: rgba(46, 184, 184, 0.25); + --accent: #2eb8b8; + --accent-glow-pct: 6%; + --board-hover-border-pct: 20%; --bg-primary: #040808; --bg-board: rgba(6, 10, 10, 0.58); --border: rgba(46, 184, 184, 0.10); @@ -194,9 +185,7 @@ --font-body: 'Inter', sans-serif; --overlay-bg: radial-gradient(circle at 30% 40%, rgba(4,8,8,0.2) 0%, rgba(4,8,8,0.92) 100%); --header-bg: rgba(4,8,8,0.95); - --board-hover-border: rgba(46, 184, 184, 0.20); --toggle-on-bg: rgba(78,207,207,0.22); - --logo-shadow: rgba(46, 184, 184, 0.45); --bg-solid-fallback: #060a0a; } @@ -204,10 +193,9 @@ THEME: JULIA & JIN (Aetherial Night / FFXIV) ============================================ */ [data-theme="julia-jin"] { - --accent: #7db3ff; - --accent-dim: rgba(125, 179, 255, 0.12); - --accent-glow: rgba(125, 179, 255, 0.08); - --border-accent: rgba(125, 179, 255, 0.30); + --accent: #7db3ff; + --border-accent-pct: 30%; + --logo-shadow-pct: 50%; --bg-primary: #03050a; --bg-board: rgba(7, 10, 20, 0.60); --border: rgba(125, 179, 255, 0.12); @@ -218,9 +206,7 @@ --font-body: 'Inter', sans-serif; --overlay-bg: linear-gradient(180deg, rgba(3,5,10,0.85) 0%, rgba(3,5,10,0.25) 50%, rgba(3,5,10,0.92) 100%); --header-bg: rgba(3,5,10,0.94); - --board-hover-border: rgba(125, 179, 255, 0.22); --toggle-on-bg: rgba(91,159,255,0.22); - --logo-shadow: rgba(125, 179, 255, 0.50); --bg-solid-fallback: #070a14; } @@ -228,10 +214,8 @@ THEME: SC Sunset - Horizon Glow ============================================ */ [data-theme="sc-sunset"] { - --accent: #ff8c3d; - --accent-dim: rgba(255, 140, 61, 0.12); - --accent-glow: rgba(255, 140, 61, 0.08); - --border-accent: rgba(255, 140, 61, 0.28); + --accent: #ff8c3d; + --border-accent-pct: 28%; --bg-primary: #080503; --bg-board: rgba(15, 10, 8, 0.55); --border: rgba(255, 140, 61, 0.10); @@ -242,9 +226,7 @@ --font-body: 'Inter', sans-serif; --overlay-bg: radial-gradient(circle at 50% 60%, rgba(8,5,3,0.1) 0%, rgba(8,5,3,0.92) 100%); --header-bg: rgba(8,5,3,0.94); - --board-hover-border: rgba(255, 140, 61, 0.22); --toggle-on-bg: rgba(240,124,48,0.22); - --logo-shadow: rgba(255, 140, 61, 0.45); --bg-solid-fallback: #0f0a08; } @@ -252,10 +234,11 @@ THEME: HELLION HUD (circuit board / red+green) ============================================ */ [data-theme="hellion-hud"] { - --accent: #32ff6a; - --accent-dim: rgba(50, 255, 106, 0.10); - --accent-glow: rgba(50, 255, 106, 0.05); - --border-accent: rgba(50, 255, 106, 0.25); + --accent: #32ff6a; + --accent-dim-pct: 10%; + --accent-glow-pct: 5%; + --board-hover-border-pct: 20%; + --logo-shadow-pct: 40%; --bg-primary: #030503; --bg-board: rgba(5, 8, 5, 0.65); --border: rgba(50, 255, 106, 0.12); @@ -266,9 +249,7 @@ --font-body: 'Inter', sans-serif; --overlay-bg: radial-gradient(circle at center, rgba(3,5,3,0.15) 0%, rgba(3,5,3,0.95) 100%); --header-bg: rgba(3,5,3,0.96); - --board-hover-border: rgba(50, 255, 106, 0.20); --toggle-on-bg: rgba(34,204,68,0.20); - --logo-shadow: rgba(50, 255, 106, 0.40); --bg-solid-fallback: #050805; --danger: #ff4d4d; } @@ -278,9 +259,9 @@ ============================================ */ [data-theme="hellion-energy"] { --accent: #1eff8e; - --accent-dim: rgba(30, 255, 142, 0.12); - --accent-glow: rgba(30, 255, 142, 0.08); - --border-accent: rgba(30, 255, 142, 0.30); + --border-accent-pct: 30%; + --board-hover-border-pct: 25%; + --logo-shadow-pct: 60%; --bg-primary: #020503; --bg-board: rgba(4, 7, 5, 0.60); --border: rgba(30, 255, 142, 0.12); @@ -291,9 +272,7 @@ --font-body: 'Inter', sans-serif; --overlay-bg: radial-gradient(circle at center, rgba(2,5,3,0.1) 0%, rgba(2,5,3,0.95) 100%); --header-bg: rgba(2,5,3,0.96); - --board-hover-border: rgba(30, 255, 142, 0.25); --toggle-on-bg: rgba(0,232,122,0.18); - --logo-shadow: rgba(30, 255, 142, 0.60); --bg-solid-fallback: #040705; } @@ -302,9 +281,9 @@ ============================================ */ [data-theme="satisfactory"] { --accent: #00b4d8; - --accent-dim: rgba(0, 180, 216, 0.12); - --accent-glow: rgba(0, 180, 216, 0.08); - --border-accent: rgba(0, 180, 216, 0.35); + --border-accent-pct: 35%; + --board-hover-border-pct: 25%; + --logo-shadow-pct: 40%; --bg-primary: #1a0f08; --bg-board: rgba(26, 15, 8, 0.65); --border: rgba(0, 180, 216, 0.15); @@ -318,9 +297,7 @@ rgba(26,15,8,0.15) 50%, rgba(26,15,8,0.90) 100%); --header-bg: rgba(26,15,8,0.95); - --board-hover-border: rgba(0, 180, 216, 0.25); --toggle-on-bg: rgba(0, 180, 216, 0.20); - --logo-shadow: rgba(0, 180, 216, 0.40); --bg-solid-fallback: #1a0f08; } @@ -329,9 +306,8 @@ ============================================ */ [data-theme="avorion"] { --accent: #2ec4a0; - --accent-dim: rgba(46, 196, 160, 0.12); - --accent-glow: rgba(46, 196, 160, 0.08); - --border-accent: rgba(46, 196, 160, 0.30); + --border-accent-pct: 30%; + --logo-shadow-pct: 50%; --bg-primary: #020d0c; --bg-board: rgba(2, 13, 12, 0.60); --border: rgba(46, 196, 160, 0.12); @@ -344,9 +320,7 @@ transparent 0%, rgba(2, 13, 12, 0.95) 100%); --header-bg: rgba(2, 13, 12, 0.94); - --board-hover-border: rgba(46, 196, 160, 0.22); --toggle-on-bg: rgba(46, 196, 160, 0.18); - --logo-shadow: rgba(46, 196, 160, 0.50); --bg-solid-fallback: #020d0c; } @@ -355,9 +329,8 @@ ============================================ */ [data-theme="hellion-stealth"] { --accent: #5ec2ff; - --accent-dim: rgba(94, 194, 255, 0.12); - --accent-glow: rgba(94, 194, 255, 0.08); - --border-accent: rgba(94, 194, 255, 0.35); + --border-accent-pct: 35%; + --board-hover-border-pct: 25%; --bg-primary: #0d0f12; --bg-board: rgba(13, 15, 18, 0.70); --border: rgba(94, 194, 255, 0.15); @@ -370,9 +343,7 @@ transparent 0%, rgba(13, 15, 18, 0.90) 100%); --header-bg: rgba(13, 15, 18, 0.96); - --board-hover-border: rgba(94, 194, 255, 0.25); --toggle-on-bg: rgba(94, 194, 255, 0.20); - --logo-shadow: rgba(94, 194, 255, 0.45); --bg-solid-fallback: #0d0f12; } } From c6d27923322eab14e25c23eac2add651709a358b Mon Sep 17 00:00:00 2001 From: Jon Kazama Date: Sat, 13 Jun 2026 19:39:36 +0200 Subject: [PATCH 11/36] refactor(css): derive --toggle-on-bg via color-mix in satisfactory, avorion, hellion-stealth --- src/css/main.css | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/css/main.css b/src/css/main.css index 702840d..a944074 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -83,6 +83,7 @@ --header-bg: rgba(10,6,14,0.90); --board-hover-border-pct: 22%; --logo-shadow-pct: 45%; + --toggle-on-bg-pct: 20%; --board-hover-border: color-mix(in srgb, var(--accent) var(--board-hover-border-pct), transparent); --toggle-on-bg: rgba(214,92,255,0.22); --logo-shadow: color-mix(in srgb, var(--accent) var(--logo-shadow-pct), transparent); @@ -297,7 +298,7 @@ rgba(26,15,8,0.15) 50%, rgba(26,15,8,0.90) 100%); --header-bg: rgba(26,15,8,0.95); - --toggle-on-bg: rgba(0, 180, 216, 0.20); + --toggle-on-bg: color-mix(in srgb, var(--accent) var(--toggle-on-bg-pct), transparent); --bg-solid-fallback: #1a0f08; } @@ -320,7 +321,8 @@ transparent 0%, rgba(2, 13, 12, 0.95) 100%); --header-bg: rgba(2, 13, 12, 0.94); - --toggle-on-bg: rgba(46, 196, 160, 0.18); + --toggle-on-bg-pct: 18%; + --toggle-on-bg: color-mix(in srgb, var(--accent) var(--toggle-on-bg-pct), transparent); --bg-solid-fallback: #020d0c; } @@ -343,7 +345,7 @@ transparent 0%, rgba(13, 15, 18, 0.90) 100%); --header-bg: rgba(13, 15, 18, 0.96); - --toggle-on-bg: rgba(94, 194, 255, 0.20); + --toggle-on-bg: color-mix(in srgb, var(--accent) var(--toggle-on-bg-pct), transparent); --bg-solid-fallback: #0d0f12; } } From 47eb4758878344d6e814b5851bbe717e174e1858 Mon Sep 17 00:00:00 2001 From: Jon Kazama Date: Sat, 13 Jun 2026 20:19:52 +0200 Subject: [PATCH 12/36] feat(css): color-scheme dark fuer native UI-Elemente --- src/css/main.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/css/main.css b/src/css/main.css index a944074..d3f9ca3 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -88,6 +88,7 @@ --toggle-on-bg: rgba(214,92,255,0.22); --logo-shadow: color-mix(in srgb, var(--accent) var(--logo-shadow-pct), transparent); --bg-solid-fallback: #0a060e; + color-scheme: dark; } /* Fallback fuer Browser die backdrop-filter blockieren (z.B. Brave Shields) */ From 5a7d7feace6950e6e756b4b29248132d27888e73 Mon Sep 17 00:00:00 2001 From: Jon Kazama Date: Sat, 13 Jun 2026 20:20:40 +0200 Subject: [PATCH 13/36] feat(css): Logo font-size fluid via clamp() --- src/css/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/css/main.css b/src/css/main.css index d3f9ca3..fc84aec 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -467,7 +467,7 @@ html, body { .logo { font-family: var(--font-display); - font-size: 17px; font-weight: 700; letter-spacing: 3px; + font-size: clamp(0.875rem, 0.8125rem + 0.21vw, 1.0625rem); font-weight: 700; letter-spacing: 3px; color: var(--accent); text-shadow: 0 0 24px var(--logo-shadow); transition: color 0.5s, text-shadow 0.5s, font-family 0.1s; From 061669a7cc2f00f93bcbb2dd54c60a71617093e6 Mon Sep 17 00:00:00 2001 From: Jon Kazama Date: Sat, 13 Jun 2026 20:20:40 +0200 Subject: [PATCH 14/36] feat(css): Uhr font-size fluid via clamp() --- src/css/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/css/main.css b/src/css/main.css index fc84aec..784af78 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -480,7 +480,7 @@ html, body { .clock { font-family: var(--font-display); - font-size: 20px; font-weight: 500; letter-spacing: 2px; + font-size: clamp(1rem, 0.9167rem + 0.28vw, 1.25rem); font-weight: 500; letter-spacing: 2px; color: var(--text-secondary); transition: color 0.5s, font-family 0.1s; line-height: 1; From 2ab3965640f7d4055591eeff918405870cc88e1e Mon Sep 17 00:00:00 2001 From: Jon Kazama Date: Sat, 13 Jun 2026 20:20:50 +0200 Subject: [PATCH 15/36] feat(css): Board-Titel font-size fluid via clamp() --- src/css/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/css/main.css b/src/css/main.css index 784af78..2eb17fc 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -562,7 +562,7 @@ html, body { .board-title { font-family: var(--font-display); - font-size: 13px; font-weight: 600; letter-spacing: 1.5px; + font-size: clamp(0.6875rem, 0.6458rem + 0.14vw, 0.8125rem); font-weight: 600; letter-spacing: 1.5px; color: var(--accent); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; From bb0c490cc7d3ea8495f8aeb577eb608282337747 Mon Sep 17 00:00:00 2001 From: Jon Kazama Date: Sat, 13 Jun 2026 20:20:58 +0200 Subject: [PATCH 16/36] feat(css): Haupt-Abstand --spacing fluid via clamp() --- src/css/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/css/main.css b/src/css/main.css index 2eb17fc..2685c42 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -77,7 +77,7 @@ --radius: 8px; --radius-sm: 5px; --board-width: 240px; - --spacing: 10px; + --spacing: clamp(0.5rem, 0.4583rem + 0.14vw, 0.625rem); --spacing-compact: 5px; --overlay-bg: radial-gradient(circle at center, rgba(10,6,14,0.3) 0%, rgba(5,3,8,0.85) 100%); --header-bg: rgba(10,6,14,0.90); From a6d14f9267adcd95b10db6b2b4c308f9a318a771 Mon Sep 17 00:00:00 2001 From: Jon Kazama Date: Sat, 13 Jun 2026 20:30:26 +0200 Subject: [PATCH 17/36] feat(css): prefers-reduced-motion-Block inkl. View-Transition-Pseudos --- src/css/main.css | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/css/main.css b/src/css/main.css index 2685c42..1d8cc92 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -2444,3 +2444,22 @@ body.show-desc .bm-desc { display: block; } .modal { width: calc(100vw - 32px); } } + +/* ============================================= + prefers-reduced-motion — UNGESCHICHTET (kein @layer). + Ungeschichtete Regeln gewinnen ueber alle Layer. + Kappt alle Transitions/Animationen inkl. der + View-Transition-Pseudo-Elemente (der *-Selektor + trifft sie nicht zuverlaessig, daher explizit). + ============================================= */ +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + transition: none !important; + animation: none !important; + } + ::view-transition-group(*), + ::view-transition-old(*), + ::view-transition-new(*) { + animation: none !important; + } +} From 2bdee5f2154eee26bb71289f71f126105b6f4952 Mon Sep 17 00:00:00 2001 From: Jon Kazama Date: Sat, 13 Jun 2026 20:30:56 +0200 Subject: [PATCH 18/36] feat(themes): Theme-Wechsel mit View-Transition-Cross-Fade am Ausloeser --- src/js/settings.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/js/settings.js b/src/js/settings.js index b74e276..c829dff 100644 --- a/src/js/settings.js +++ b/src/js/settings.js @@ -23,6 +23,23 @@ function closeThemeModal() { overlay.classList.remove('active'); } +/** + * Wechselt das Theme mit nativem Cross-Fade (View Transitions API). + * Wrap sitzt bewusst hier am User-Ausloeser, NICHT in applyTheme(), + * sonst fadet jeder neue Tab beim Initial-Load (settings.js:101). + * Feature-Detection-Fallback: aeltere Browser (z.B. Firefox < 144) + * schalten instant um, ohne Bruch. + * @param {string} name - Theme-Name + */ +function switchTheme(name) { + const swap = () => applyTheme(name, false); // false: Theme-BG anwenden (kein User-bgUrl-Schutz hier noetig, bgUrl wurde geleert) + if (document.startViewTransition) { + document.startViewTransition(swap); + } else { + swap(); + } +} + /** * Prueft ob eine Background-URL sicher fuer CSS-Einbettung ist. * Erlaubt nur blob: und data:image/ Protokolle (aus File Upload). @@ -129,7 +146,7 @@ function bindSettingsEvents() { settings.theme = name; settings.bgUrl = ''; document.getElementById('bgUrlInput').value = ''; - applyTheme(name, false); + switchTheme(name); await saveSettings(); }); }); From 24e9aa408b2cdf728c5888c7adb6bf24963b41d2 Mon Sep 17 00:00:00 2001 From: Jon Kazama Date: Sat, 13 Jun 2026 20:31:10 +0200 Subject: [PATCH 19/36] feat(settings): Settings-Panel und Theme-Picker mit View-Transition-Fade --- src/js/settings.js | 36 ++++++++++++++++++++++++++++-------- 1 file changed, 28 insertions(+), 8 deletions(-) diff --git a/src/js/settings.js b/src/js/settings.js index c829dff..5735039 100644 --- a/src/js/settings.js +++ b/src/js/settings.js @@ -3,24 +3,44 @@ Settings Panel, Theme-Modal, Accordion, Toggles ============================================= */ +/** + * Fuehrt einen DOM-Mutationsschritt mit nativem View-Transition-Fade aus. + * Feature-Detection-Fallback fuer aeltere Browser (Firefox < 144): instant. + * reduced-motion kappt das Fade ueber den ungeschichteten @media-Block. + * @param {Function} mutate - synchrone DOM-Mutation (Klassen-Toggle etc.) + */ +function withViewTransition(mutate) { + if (document.startViewTransition) { + document.startViewTransition(mutate); + } else { + mutate(); + } +} + // ---- SETTINGS PANEL ---- function openSettings() { - document.getElementById('settingsPanel').classList.add('open'); - document.getElementById('settingsOverlay').classList.add('active'); + withViewTransition(() => { + document.getElementById('settingsPanel').classList.add('open'); + document.getElementById('settingsOverlay').classList.add('active'); + }); } function closeSettings() { - document.getElementById('settingsPanel').classList.remove('open'); - document.getElementById('settingsOverlay').classList.remove('active'); + withViewTransition(() => { + document.getElementById('settingsPanel').classList.remove('open'); + document.getElementById('settingsOverlay').classList.remove('active'); + }); } // ---- THEME MODAL ---- function openThemeModal() { - const overlay = document.getElementById('themeOverlay'); - overlay.classList.add('active'); + withViewTransition(() => { + document.getElementById('themeOverlay').classList.add('active'); + }); } function closeThemeModal() { - const overlay = document.getElementById('themeOverlay'); - overlay.classList.remove('active'); + withViewTransition(() => { + document.getElementById('themeOverlay').classList.remove('active'); + }); } /** From abddc59f493747244363185fdd997f9eebd94afc Mon Sep 17 00:00:00 2001 From: Jon Kazama Date: Sat, 13 Jun 2026 20:31:33 +0200 Subject: [PATCH 20/36] feat(dialog): Custom-Dialoge mit View-Transition-Fade, Teardown in Closure --- src/js/dialog.js | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/src/js/dialog.js b/src/js/dialog.js index f0e9e0a..272e12f 100644 --- a/src/js/dialog.js +++ b/src/js/dialog.js @@ -3,6 +3,20 @@ Custom Dialog System (ersetzt native alert/confirm) ============================================= */ +/** + * Fuehrt eine DOM-Mutation mit nativem View-Transition-Fade aus. + * Feature-Detection-Fallback (Firefox < 144): instant. + * reduced-motion kappt das Fade ueber den ungeschichteten @media-Block. + * @param {Function} mutate - synchrone DOM-Mutation + */ +function dialogViewTransition(mutate) { + if (document.startViewTransition) { + document.startViewTransition(mutate); + } else { + mutate(); + } +} + const HellionDialog = { /** SVG-Icons je nach Dialog-Typ */ _icons: { @@ -64,9 +78,11 @@ const HellionDialog = { actions.className = 'dialog-actions'; function cleanup(result) { - overlay.classList.remove('active'); document.removeEventListener('keydown', keyHandler); - setTimeout(() => overlay.remove(), 200); + dialogViewTransition(() => { + overlay.classList.remove('active'); + overlay.remove(); + }); resolve(result); } @@ -108,8 +124,8 @@ const HellionDialog = { document.addEventListener('keydown', keyHandler); document.body.appendChild(overlay); - // Nächster Frame für CSS-Transition - requestAnimationFrame(() => { + // View-Transition uebernimmt das Fade; Fokus bleibt erhalten + dialogViewTransition(() => { overlay.classList.add('active'); confirmBtn.focus(); }); From 278eda7d69e0492cac12c3182648a8e36caa8a77 Mon Sep 17 00:00:00 2001 From: Jon Kazama Date: Sat, 13 Jun 2026 20:32:07 +0200 Subject: [PATCH 21/36] feat(bm-import): Import-Modal mit View-Transition-Fade, Teardown in Closure --- src/js/bookmark-import.js | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/src/js/bookmark-import.js b/src/js/bookmark-import.js index 541e7f1..dcaa56c 100644 --- a/src/js/bookmark-import.js +++ b/src/js/bookmark-import.js @@ -4,6 +4,20 @@ via chrome.bookmarks.getTree() / browser.bookmarks.getTree() ============================================= */ +/** + * Fuehrt eine DOM-Mutation mit nativem View-Transition-Fade aus. + * Feature-Detection-Fallback (Firefox < 144): instant. + * reduced-motion kappt das Fade ueber den ungeschichteten @media-Block. + * @param {Function} mutate - synchrone DOM-Mutation + */ +function bmImportViewTransition(mutate) { + if (document.startViewTransition) { + document.startViewTransition(mutate); + } else { + mutate(); + } +} + const BrowserBookmarkImport = { /** Initialisiert den Import-Button */ @@ -196,16 +210,18 @@ const BrowserBookmarkImport = { overlay.appendChild(modal); document.body.appendChild(overlay); - // Animation - requestAnimationFrame(() => overlay.classList.add('active')); + // View-Transition-Fade + bmImportViewTransition(() => overlay.classList.add('active')); }, /** Schliesst das Modal */ _closeModal() { const overlay = document.getElementById('bmImportOverlay'); if (!overlay) return; - overlay.classList.remove('active'); - setTimeout(() => overlay.remove(), 250); + bmImportViewTransition(() => { + overlay.classList.remove('active'); + overlay.remove(); + }); }, /** From 6004203339180a504771bbcdb5f4b93fd218e8e6 Mon Sep 17 00:00:00 2001 From: Jon Kazama Date: Sat, 13 Jun 2026 20:32:23 +0200 Subject: [PATCH 22/36] feat(boards): Inline-Modals (Add-Board/Add-Bookmark/Rename) mit View-Transition-Fade --- src/js/boards.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/js/boards.js b/src/js/boards.js index 44aaa82..941e316 100644 --- a/src/js/boards.js +++ b/src/js/boards.js @@ -270,8 +270,22 @@ function bindBoardListEvents(list, board) { } // ---- MODALS ---- -function openModal(id) { document.getElementById(id).classList.add('active'); } -function closeModal(id) { document.getElementById(id).classList.remove('active'); } +// reduced-motion kappt das Fade ueber den ungeschichteten @media-Block. +// Feature-Detection-Fallback (Firefox < 144): instant. +function openModal(id) { + if (document.startViewTransition) { + document.startViewTransition(() => document.getElementById(id).classList.add('active')); + } else { + document.getElementById(id).classList.add('active'); + } +} +function closeModal(id) { + if (document.startViewTransition) { + document.startViewTransition(() => document.getElementById(id).classList.remove('active')); + } else { + document.getElementById(id).classList.remove('active'); + } +} function openAddBoardModal() { document.getElementById('newBoardName').value = ''; From 87cd070bebca9c3c97ea1d5a9d52ef6831a7c1c8 Mon Sep 17 00:00:00 2001 From: Jon Kazama Date: Sat, 13 Jun 2026 20:42:07 +0200 Subject: [PATCH 23/36] refactor(view-transitions): zentralen withViewTransition-Helper in state.js, Duplikate entfernt --- src/js/boards.js | 12 ++---------- src/js/bookmark-import.js | 18 ++---------------- src/js/dialog.js | 18 ++---------------- src/js/settings.js | 20 +------------------- src/js/state.js | 11 +++++++++++ 5 files changed, 18 insertions(+), 61 deletions(-) diff --git a/src/js/boards.js b/src/js/boards.js index 941e316..b856b8b 100644 --- a/src/js/boards.js +++ b/src/js/boards.js @@ -273,18 +273,10 @@ function bindBoardListEvents(list, board) { // reduced-motion kappt das Fade ueber den ungeschichteten @media-Block. // Feature-Detection-Fallback (Firefox < 144): instant. function openModal(id) { - if (document.startViewTransition) { - document.startViewTransition(() => document.getElementById(id).classList.add('active')); - } else { - document.getElementById(id).classList.add('active'); - } + withViewTransition(() => document.getElementById(id).classList.add('active')); } function closeModal(id) { - if (document.startViewTransition) { - document.startViewTransition(() => document.getElementById(id).classList.remove('active')); - } else { - document.getElementById(id).classList.remove('active'); - } + withViewTransition(() => document.getElementById(id).classList.remove('active')); } function openAddBoardModal() { diff --git a/src/js/bookmark-import.js b/src/js/bookmark-import.js index dcaa56c..0ea80d6 100644 --- a/src/js/bookmark-import.js +++ b/src/js/bookmark-import.js @@ -4,20 +4,6 @@ via chrome.bookmarks.getTree() / browser.bookmarks.getTree() ============================================= */ -/** - * Fuehrt eine DOM-Mutation mit nativem View-Transition-Fade aus. - * Feature-Detection-Fallback (Firefox < 144): instant. - * reduced-motion kappt das Fade ueber den ungeschichteten @media-Block. - * @param {Function} mutate - synchrone DOM-Mutation - */ -function bmImportViewTransition(mutate) { - if (document.startViewTransition) { - document.startViewTransition(mutate); - } else { - mutate(); - } -} - const BrowserBookmarkImport = { /** Initialisiert den Import-Button */ @@ -211,14 +197,14 @@ const BrowserBookmarkImport = { document.body.appendChild(overlay); // View-Transition-Fade - bmImportViewTransition(() => overlay.classList.add('active')); + withViewTransition(() => overlay.classList.add('active')); }, /** Schliesst das Modal */ _closeModal() { const overlay = document.getElementById('bmImportOverlay'); if (!overlay) return; - bmImportViewTransition(() => { + withViewTransition(() => { overlay.classList.remove('active'); overlay.remove(); }); diff --git a/src/js/dialog.js b/src/js/dialog.js index 272e12f..22ff77c 100644 --- a/src/js/dialog.js +++ b/src/js/dialog.js @@ -3,20 +3,6 @@ Custom Dialog System (ersetzt native alert/confirm) ============================================= */ -/** - * Fuehrt eine DOM-Mutation mit nativem View-Transition-Fade aus. - * Feature-Detection-Fallback (Firefox < 144): instant. - * reduced-motion kappt das Fade ueber den ungeschichteten @media-Block. - * @param {Function} mutate - synchrone DOM-Mutation - */ -function dialogViewTransition(mutate) { - if (document.startViewTransition) { - document.startViewTransition(mutate); - } else { - mutate(); - } -} - const HellionDialog = { /** SVG-Icons je nach Dialog-Typ */ _icons: { @@ -79,7 +65,7 @@ const HellionDialog = { function cleanup(result) { document.removeEventListener('keydown', keyHandler); - dialogViewTransition(() => { + withViewTransition(() => { overlay.classList.remove('active'); overlay.remove(); }); @@ -125,7 +111,7 @@ const HellionDialog = { document.body.appendChild(overlay); // View-Transition uebernimmt das Fade; Fokus bleibt erhalten - dialogViewTransition(() => { + withViewTransition(() => { overlay.classList.add('active'); confirmBtn.focus(); }); diff --git a/src/js/settings.js b/src/js/settings.js index 5735039..86ca2ff 100644 --- a/src/js/settings.js +++ b/src/js/settings.js @@ -3,20 +3,6 @@ Settings Panel, Theme-Modal, Accordion, Toggles ============================================= */ -/** - * Fuehrt einen DOM-Mutationsschritt mit nativem View-Transition-Fade aus. - * Feature-Detection-Fallback fuer aeltere Browser (Firefox < 144): instant. - * reduced-motion kappt das Fade ueber den ungeschichteten @media-Block. - * @param {Function} mutate - synchrone DOM-Mutation (Klassen-Toggle etc.) - */ -function withViewTransition(mutate) { - if (document.startViewTransition) { - document.startViewTransition(mutate); - } else { - mutate(); - } -} - // ---- SETTINGS PANEL ---- function openSettings() { withViewTransition(() => { @@ -53,11 +39,7 @@ function closeThemeModal() { */ function switchTheme(name) { const swap = () => applyTheme(name, false); // false: Theme-BG anwenden (kein User-bgUrl-Schutz hier noetig, bgUrl wurde geleert) - if (document.startViewTransition) { - document.startViewTransition(swap); - } else { - swap(); - } + withViewTransition(swap); } /** diff --git a/src/js/state.js b/src/js/state.js index d2db23e..4ca28c1 100644 --- a/src/js/state.js +++ b/src/js/state.js @@ -55,3 +55,14 @@ async function saveBoards() { async function saveSettings() { await Store.set('settings', settings); } + +// ---- VIEW TRANSITIONS ---- +// Fuehrt eine synchrone DOM-Mutation mit nativem View-Transition-Fade aus. +// Feature-Detection-Fallback (Firefox < 144): instant. reduced-motion kappt das Fade ueber den ungeschichteten @media-Block. +function withViewTransition(mutate) { + if (document.startViewTransition) { + document.startViewTransition(mutate); + } else { + mutate(); + } +} From 0a933407928f74b018dd04d9b62d14fb59bfa6ed Mon Sep 17 00:00:00 2001 From: Jon Kazama Date: Sat, 13 Jun 2026 20:58:42 +0200 Subject: [PATCH 24/36] a11y(modals): role=dialog + Fokus-Falle und -Rueckgabe fuer Settings und Theme-Picker --- newtab.html | 8 +++--- src/js/settings.js | 66 +++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 66 insertions(+), 8 deletions(-) diff --git a/newtab.html b/newtab.html index 8877e6e..0ff5ff0 100644 --- a/newtab.html +++ b/newtab.html @@ -103,9 +103,9 @@
-