/* (c) 2024-2026 ASSISTUK Lars Tiedemann. All Rights Reserved. Licensed for use exclusively on www.assistuk.net */ /* ========================================================================= dp-theme.css — DigitalPainters Central Theme System 8 Themes: Studiokarton (default, paper & ink), Dark, Light, High Contrast, Gray, Colorful, Modern, Kunst. All variables prefixed --dp-. ========================================================================= */ /* Studiokarton design relaunch — self-hosted fonts + paper/ink theme skin. Imported here (rather than per-page ) so EVERY surface that loads dp-theme.css gets the theme without touching its HTML. Studiokarton rules are all scoped under body.theme-studiokarton, so they win by specificity over un-scoped component rules regardless of @import ordering. */ /* The ?v= query is a manual cache-bust for these @import-ed stylesheets: @import URLs are NOT versioned by the build's HTML cache-bust pass, and CSS is HTTP-cached 7 days (.htaccess), so returning visitors would otherwise be stuck on stale theme CSS. Bump this token whenever dp-studiokarton.css or dp-fonts.css changes so browsers re-fetch them. */ @import url("dp-fonts.css?v=skr2"); @import url("dp-studiokarton.css?v=skr12"); /* ========================================================================= Hide the native mouse cursor everywhere on DP hubs / gallery / settings. Rationale: dwell is the primary interaction model. The browser's arrow / pointer hand creates visual noise over tiles and competes with the `.dwell-dot` progress indicator that DOMDwell animates inside each button. Users reported that the arrow "stays visible" over tiles even though dwell is active — this rule resolves that. Text inputs keep their native caret so typing into the gallery search field or the upload form still feels normal. The painting-canvas apps load `simple-app.css` which already hides the cursor; p5 apps draw their own cursor via DPCanvasCursor. ========================================================================= */ /* ========================================================================= Cursor style — user-selectable via SuperHub settings ("Mauszeiger" page). The choice is persisted under localStorage['DP_CURSOR_STYLE'] and materialised as a class on : html.cursor-dot (default) — tiny black-and-white SVG dot html.cursor-none — invisible html.cursor-system — the browser's own arrow / pointer A small inline bootstrap script (dp-cursor-bootstrap.js, loaded before any rendering) reads localStorage and applies the class early to avoid a FOUC with the previous style. ========================================================================= */ /* Default (dot) — also active when the bootstrap hasn't set any class yet. Uses a universal selector (`*`) so inline `cursor: pointer` rules inside JS modules (dp-share, dp-confirm, branding-splash, …) are overridden uniformly. The painting canvas (`canvas` element) keeps its own cursor via simple-app.css / DPCanvasCursor — those rules load after dp-theme.css and contain `!important`. */ /* dot — winziger Punkt (Default) */ html.cursor-dot, html.cursor-dot *, html.cursor-dot *::before, html.cursor-dot *::after, html:not(.cursor-mini):not(.cursor-cross):not(.cursor-big):not(.cursor-none):not(.cursor-system), html:not(.cursor-mini):not(.cursor-cross):not(.cursor-big):not(.cursor-none):not(.cursor-system) *, html:not(.cursor-mini):not(.cursor-cross):not(.cursor-big):not(.cursor-none):not(.cursor-system) *::before, html:not(.cursor-mini):not(.cursor-cross):not(.cursor-big):not(.cursor-none):not(.cursor-system) *::after { cursor: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20width%3D'12'%20height%3D'12'%20viewBox%3D'0%200%2012%2012'%3E%3Ccircle%20cx%3D'6'%20cy%3D'6'%20r%3D'3.5'%20fill%3D'%23000'%20stroke%3D'%23fff'%20stroke-width%3D'1.3'/%3E%3C/svg%3E") 6 6, none !important; } /* mini \u2014 4-Pixel X-Muster (2 wei\u00df + 2 schwarz \u00fcber Kreuz), so klein wie nur m\u00f6glich, perfekt f\u00fcr Augensteuerung. */ html.cursor-mini, html.cursor-mini *, html.cursor-mini *::before, html.cursor-mini *::after { cursor: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20width%3D'4'%20height%3D'4'%20viewBox%3D'0%200%204%204'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'1'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%23fff'/%3E%3Crect%20x%3D'2'%20y%3D'2'%20width%3D'1'%20height%3D'1'%20fill%3D'%23fff'/%3E%3Crect%20x%3D'2'%20y%3D'1'%20width%3D'1'%20height%3D'1'%20fill%3D'%23000'/%3E%3Crect%20x%3D'1'%20y%3D'2'%20width%3D'1'%20height%3D'1'%20fill%3D'%23000'/%3E%3C/svg%3E") 2 2, none !important; } /* cross \u2014 Fadenkreuz mit wei\u00dfem Schatten + schwarzer Kontur. Pr\u00e4ziser Indikator f\u00fcr genaues Anvisieren von Buttons / Punkten. */ html.cursor-cross, html.cursor-cross *, html.cursor-cross *::before, html.cursor-cross *::after { cursor: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20width%3D'18'%20height%3D'18'%20viewBox%3D'0%200%2018%2018'%3E%3Cline%20x1%3D'9'%20y1%3D'1'%20x2%3D'9'%20y2%3D'17'%20stroke%3D'%23fff'%20stroke-width%3D'3'/%3E%3Cline%20x1%3D'1'%20y1%3D'9'%20x2%3D'17'%20y2%3D'9'%20stroke%3D'%23fff'%20stroke-width%3D'3'/%3E%3Cline%20x1%3D'9'%20y1%3D'1'%20x2%3D'9'%20y2%3D'17'%20stroke%3D'%23000'%20stroke-width%3D'1'/%3E%3Cline%20x1%3D'1'%20y1%3D'9'%20x2%3D'17'%20y2%3D'9'%20stroke%3D'%23000'%20stroke-width%3D'1'/%3E%3C/svg%3E") 9 9, crosshair !important; } /* big \u2014 gro\u00dfer Punkt (24 px) f\u00fcr Nutzer mit Sehbeeintr\u00e4chtigung. Wei\u00dfer Kreis mit schwarzer Kontur + Mittelpunkt. */ html.cursor-big, html.cursor-big *, html.cursor-big *::before, html.cursor-big *::after { cursor: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'9'%20fill%3D'%23fff'%20stroke%3D'%23000'%20stroke-width%3D'2.2'/%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'2.5'%20fill%3D'%23000'/%3E%3C/svg%3E") 12 12, none !important; } /* Invisible variant — no visible cursor at all. */ html.cursor-none, html.cursor-none body, html.cursor-none * { cursor: none !important; } /* System variant — let the browser pick (hover → pointer hand, etc.). No override at all; specificity on .cursor-system lets apps' natural `cursor: pointer` rules win. */ html.cursor-system, html.cursor-system body, html.cursor-system * { /* Intentionally empty — other rules apply. */ } /* Text inputs always show the caret regardless of the chosen style. */ input, textarea, select, [contenteditable="true"] { cursor: text !important; } /* ========================================================================= Hub title sub-line: descriptive explainer (above) and attribution (below). Layout pattern used across all hubs after Apr 2026:

{Hub Title}

{short description}

Lars Tiedemann – AssistUK

========================================================================= */ /* Hub H1 — golden across all hubs for visual consistency with the gallery. Previously only the gallery title used accent-gold, the other hubs had white titles which made the branding feel disjointed. */ h1, .hub-title h1, #hub-title-container h1 { color: var(--dp-accent, #f39c12); } .hub-explainer { font-size: clamp(13px, 1.6vw, 18px); color: var(--dp-text-dim, rgba(255,255,255,0.7)); margin: 2px 0 0; font-weight: 400; letter-spacing: 0.01em; } .hub-subtitle { font-size: clamp(11px, 1.2vw, 14px); color: var(--dp-text-muted, rgba(255,255,255,0.45)); margin: 2px 0 0; font-weight: 400; letter-spacing: 0.05em; } /* === Theme: Dark (Default) === */ :root, body.theme-dark { --dp-bg: #0a0a1a; --dp-bg-card: linear-gradient(135deg, #1a1a2e, #2a2a45); --dp-bg-card-active: linear-gradient(135deg, #0a1a3a, #1a2a55); --dp-bg-overlay: #050510; --dp-text: #fff; --dp-text-dim: rgba(255,255,255,0.7); --dp-text-muted: rgba(255,255,255,0.45); --dp-accent: #f39c12; --dp-accent-glow: rgba(243,156,18,0.15); --dp-border: rgba(255,255,255,0.06); --dp-border-active: #f39c12; --dp-radius: min(16px, 1.5vw); --dp-radius-sm: clamp(8px, 1.2vw, 14px); --dp-shadow-hover: 0 6px 24px rgba(0,0,0,0.4); --dp-shadow-active: 0 0 16px rgba(243,156,18,0.15); --dp-tts-color: #6ec6ff; --dp-heart: #ff6b9d; --dp-ok: #4CAF50; --dp-cancel: #F44336; --dp-gap: 6px; --dp-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --dp-text-align: center; --dp-text-valign: center; --dp-text-size: inherit; --dp-text-weight: 600; --dp-text-color: var(--dp-text); --dp-icon-size: calc(100vh / var(--grid-rows, 6) * 0.35); } /* === Theme: Light === */ body.theme-light { --dp-bg: #f0f0f5; --dp-bg-card: linear-gradient(135deg, #ffffff, #e8e8f0); --dp-bg-card-active: linear-gradient(135deg, #d0e0ff, #c0d0f0); --dp-bg-overlay: #f0f0f5; --dp-text: #1a1a2e; --dp-text-dim: rgba(26,26,46,0.7); --dp-text-muted: rgba(26,26,46,0.45); --dp-accent: #0066cc; --dp-accent-glow: rgba(0,102,204,0.15); --dp-border: rgba(0,0,0,0.14); --dp-border-active: #0066cc; --dp-shadow-hover: 0 6px 24px rgba(0,0,0,0.15); --dp-shadow-active: 0 0 16px rgba(0,102,204,0.15); --dp-tts-color: #0066cc; --dp-heart: #e0436b; } /* === Theme: High Contrast === */ body.theme-contrast { --dp-bg: #000000; --dp-bg-card: linear-gradient(135deg, #1a1a1a, #2a2a2a); --dp-bg-card-active: linear-gradient(135deg, #003366, #004488); --dp-bg-overlay: #000000; --dp-text: #ffffff; --dp-text-dim: rgba(255,255,255,0.9); --dp-text-muted: rgba(255,255,255,0.7); --dp-accent: #4da6ff; --dp-accent-glow: rgba(77,166,255,0.3); --dp-border: rgba(255,255,255,0.15); --dp-border-active: #4da6ff; --dp-shadow-hover: 0 6px 24px rgba(0,0,0,0.6); --dp-shadow-active: 0 0 20px rgba(77,166,255,0.3); } /* === Theme: Gray === */ body.theme-gray { --dp-bg: #1f2328; --dp-bg-card: linear-gradient(135deg, #2f343a, #3a4047); --dp-bg-card-active: linear-gradient(135deg, #4b535d, #5a646f); --dp-bg-overlay: #1c1f24; --dp-text: #f1f3f5; --dp-text-dim: rgba(241,243,245,0.78); --dp-text-muted: rgba(241,243,245,0.52); --dp-accent: #a0acb8; --dp-accent-glow: rgba(160,172,184,0.22); --dp-border: rgba(255,255,255,0.10); --dp-border-active: #bec8d2; --dp-shadow-hover: 0 6px 24px rgba(0,0,0,0.45); --dp-shadow-active: 0 0 16px rgba(190,200,210,0.28); } /* === Theme: Colorful === */ body.theme-colorful { --dp-bg: #0d1026; --dp-bg-card: linear-gradient(140deg, #1c2f5b 0%, #4b2a68 45%, #7a2a4d 100%); --dp-bg-card-active: linear-gradient(140deg, #0f6ab4 0%, #7b3db8 50%, #e64d7a 100%); --dp-bg-overlay: #090c1c; --dp-text: #ffffff; --dp-text-dim: rgba(255,255,255,0.84); --dp-text-muted: rgba(255,255,255,0.58); --dp-accent: #4dd0ff; --dp-accent-glow: rgba(77,208,255,0.30); --dp-border: rgba(255,255,255,0.14); --dp-border-active: #8cf2ff; --dp-shadow-hover: 0 8px 28px rgba(0,0,0,0.42); --dp-shadow-active: 0 0 18px rgba(140,242,255,0.36); } /* === Theme: Modern === */ body.theme-modern { --dp-bg: #f8f9fc; --dp-bg-card: linear-gradient(135deg, #ffffff, #f0f1f8); --dp-bg-card-active: linear-gradient(135deg, #eef0ff, #dde0ff); --dp-bg-overlay: #f8f9fc; --dp-text: #1e1e2e; --dp-text-dim: rgba(30,30,46,0.72); --dp-text-muted: rgba(30,30,46,0.45); --dp-accent: #6366f1; --dp-accent-glow: rgba(99,102,241,0.15); --dp-border: rgba(0,0,0,0.13); --dp-border-active: #6366f1; --dp-shadow-hover: 0 4px 16px rgba(99,102,241,0.12); --dp-shadow-active: 0 0 12px rgba(99,102,241,0.18); --dp-tts-color: #6366f1; --dp-heart: #ec4899; } /* === Theme: Kunst === */ body.theme-kunst { --dp-bg: #1a1410; --dp-bg-card: linear-gradient(140deg, #2a2018 0%, #3a2a1e 50%, #2e2218 100%); --dp-bg-card-active: linear-gradient(140deg, #4a3520 0%, #6b4a28 50%, #8b6530 100%); --dp-bg-overlay: #16110c; --dp-text: #f5e6d0; --dp-text-dim: rgba(245,230,208,0.80); --dp-text-muted: rgba(245,230,208,0.50); --dp-accent: #d4a54a; --dp-accent-glow: rgba(212,165,74,0.25); --dp-border: rgba(212,165,74,0.12); --dp-border-active: #d4a54a; --dp-shadow-hover: 0 6px 24px rgba(0,0,0,0.45); --dp-shadow-active: 0 0 16px rgba(212,165,74,0.30); --dp-tts-color: #e8b84a; --dp-heart: #e06050; } /* ========================================================================= Base Reset & Body ========================================================================= */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100vh; height: 100dvh; background: var(--dp-bg); font-family: var(--dp-font); color: var(--dp-text); overflow: hidden; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Ccircle cx='6' cy='6' r='4' fill='%23000' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E") 6 6, auto; } /* Subtle background glow (dark theme only) */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 30%, rgba(243,156,18,0.06) 0%, transparent 60%), radial-gradient(ellipse at 80% 80%, rgba(233,69,96,0.04) 0%, transparent 50%); } body.theme-light::before, body.theme-contrast::before, body.theme-gray::before, body.theme-modern::before { display: none; } body.theme-colorful::before { display: block; background: radial-gradient(ellipse at 20% 25%, rgba(77,208,255,0.16) 0%, transparent 52%), radial-gradient(ellipse at 78% 78%, rgba(230,77,122,0.14) 0%, transparent 50%), radial-gradient(ellipse at 52% 8%, rgba(140,110,255,0.12) 0%, transparent 45%); } body.theme-kunst::before { display: block; background: radial-gradient(ellipse at 30% 20%, rgba(212,165,74,0.12) 0%, transparent 50%), radial-gradient(ellipse at 75% 75%, rgba(224,96,80,0.10) 0%, transparent 48%); } /* ========================================================================= Content Tile (.dp-tile) — Project tiles, theme tiles ========================================================================= */ .dp-tile { display: flex; flex-direction: column; align-items: var(--dp-text-align, center); justify-content: var(--dp-text-valign, center); border-radius: var(--dp-radius); text-decoration: none; color: var(--dp-text-color); position: relative; overflow: hidden; background: var(--dp-bg-card); border: 1px solid var(--dp-border); transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; cursor: pointer; min-height: 0; font-size: var(--dp-text-size); font-weight: var(--dp-text-weight); width: 100%; height: 100%; } @media (hover: hover) { .dp-tile:hover { transform: scale(1.03); box-shadow: var(--dp-shadow-hover), 0 0 20px var(--dp-accent-glow); border-color: rgba(255,255,255,0.12); z-index: 2; } } .dp-tile:active { transform: scale(0.97); } .dp-tile.inactive { opacity: 0.35; filter: grayscale(0.6); } .dp-tile.inactive::after { content: 'DEV'; position: absolute; top: 6px; right: 6px; background: #e94560; color: #fff; font-size: 10px; font-weight: 700; padding: 2px 5px; border-radius: 4px; z-index: 2; } /* ========================================================================= Function Button (.dp-btn-func) — Settings, grid, dwell, filter ========================================================================= */ .dp-btn-func { display: flex; flex-direction: column; align-items: var(--dp-text-align, center); justify-content: var(--dp-text-valign, center); text-align: var(--dp-text-align, center); font-size: var(--dp-text-size); font-weight: var(--dp-text-weight); color: var(--dp-text-color); background: var(--dp-bg-card); border: 2px solid transparent; border-radius: var(--dp-radius-sm); position: relative; overflow: hidden; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; cursor: pointer; min-height: 0; font-family: inherit; width: 100%; height: 100%; } @media (hover: hover) { .dp-btn-func:hover { transform: scale(1.03); box-shadow: var(--dp-shadow-hover), 0 0 12px var(--dp-accent-glow); border-color: var(--dp-accent); z-index: 2; } } .dp-btn-func:active { transform: scale(0.97); } .dp-btn-func.active { border-color: var(--dp-border-active); background: var(--dp-bg-card-active); box-shadow: var(--dp-shadow-active); } /* ========================================================================= Link Button (.dp-btn-link) — Navigation, back, close ========================================================================= */ .dp-btn-link { display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--dp-bg-card-active); border: 2px solid var(--dp-accent); border-radius: var(--dp-radius-sm); color: var(--dp-text); font-family: inherit; font-size: clamp(12px, 1.5vw, 17px); cursor: pointer; text-decoration: none; transition: transform 0.15s; position: relative; overflow: hidden; } @media (hover: hover) { .dp-btn-link:hover { transform: scale(1.03); } } /* ========================================================================= TTS Button (.dp-btn-tts) — Read-aloud buttons ========================================================================= */ .dp-btn-tts { display: flex; align-items: center; justify-content: center; background: var(--dp-bg-card); border: 2px solid transparent; border-radius: var(--dp-radius-sm); color: var(--dp-tts-color); cursor: pointer; position: relative; overflow: hidden; font-size: clamp(16px, 2.2vw, 28px); font-family: inherit; transition: transform 0.15s, border-color 0.15s; } @media (hover: hover) { .dp-btn-tts:hover { transform: scale(1.05); border-color: var(--dp-accent); z-index: 2; } } .dp-btn-tts.speaking { border-color: var(--dp-heart); color: var(--dp-heart); } /* ========================================================================= Label (.dp-label) — Non-interactive title/description areas ========================================================================= */ .dp-label { display: flex; align-items: center; justify-content: center; color: var(--dp-text); font-weight: 700; text-align: center; pointer-events: none; } /* ========================================================================= OK/Cancel Buttons (.dp-btn-ok / .dp-btn-cancel) — Confirm dialogs ========================================================================= */ .dp-btn-ok { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--dp-bg-card); border: 3px solid var(--dp-ok); border-radius: var(--dp-radius); color: var(--dp-text); cursor: pointer; position: relative; overflow: hidden; font-family: inherit; font-size: inherit; transition: transform 0.15s, box-shadow 0.15s; } @media (hover: hover) { .dp-btn-ok:hover { transform: scale(1.03); box-shadow: 0 0 20px rgba(76,175,80,0.3); z-index: 2; } } .dp-btn-cancel { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--dp-bg-card); border: 3px solid var(--dp-cancel); border-radius: var(--dp-radius); color: var(--dp-text); cursor: pointer; position: relative; overflow: hidden; font-family: inherit; font-size: inherit; transition: transform 0.15s, box-shadow 0.15s; } @media (hover: hover) { .dp-btn-cancel:hover { transform: scale(1.03); box-shadow: 0 0 20px rgba(244,67,54,0.3); z-index: 2; } } /* ========================================================================= Shared UI Elements ========================================================================= */ /* Dwell dot (eye-tracking indicator) */ .dwell-dot { position: absolute; z-index: 10; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; width: 0; height: 0; } /* Overlay pattern (for lang/settings/confirm overlays) */ .dp-overlay { display: none; position: fixed; inset: 0; z-index: 1000; background: var(--dp-bg-overlay); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .dp-overlay.open { display: grid; grid-template-columns: repeat(var(--grid-cols, 10), minmax(0, 1fr)); grid-template-rows: repeat(var(--grid-rows, 6), minmax(0, 1fr)); gap: var(--dp-gap); padding: var(--dp-gap); } /* Portrait lockout — used by painting apps that only make sense in landscape. Gallery / SuperHub / sub-hubs that work in portrait must opt OUT by putting `class="allow-portrait"` on the (or ) element. Without that opt-out, this block hides the whole page in portrait so `#rotate-prompt` is the only thing shown. */ #rotate-prompt { display: none; position: fixed; inset: 0; background: var(--dp-bg); color: var(--dp-text); font-family: inherit; justify-content: center; align-items: center; text-align: center; z-index: 99999; flex-direction: column; gap: 16px; } #rotate-prompt .rotate-icon { font-size: 4em; } #rotate-prompt .rotate-text { font-size: clamp(16px, 3vw, 24px); line-height: 1.5; opacity: 0.9; } @media (orientation: portrait) and (max-width: 1024px) { html:not(.allow-portrait):not(.allow-portrait *) #rotate-prompt { display: flex; } html:not(.allow-portrait):not(.allow-portrait *) body > *:not(#rotate-prompt) { display: none !important; } } /* Auto-fit text sizing — add .dp-autofit to any text element */ .dp-autofit { overflow: hidden; } /* Tile content sub-elements */ .tile-content { position: relative; text-align: center; padding: 6px 6px 8px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 100%; height: 100%; box-sizing: border-box; } .tile-content .tile-name, .tile-content .tile-desc { background: rgba(0,0,0,0.5); padding: 2px 10px; border-radius: 6px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .tile-icon { font-size: var(--dp-icon-size); margin-bottom: 2px; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; width: 100%; } .tile-icon img { display: block; max-width: 60%; max-height: 60%; object-fit: contain; height: clamp(40px, 8vh, 72px); filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)); } .theme-tile .tile-icon img { max-width: 96%; max-height: 96%; } .tile-name { font-size: calc(100vh / var(--grid-rows, 6) * 0.16); font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,0.75), 0 1px 3px rgba(0,0,0,0.9); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; } .tile-desc { font-size: calc(100vh / var(--grid-rows, 6) * 0.10); opacity: 0.92; margin-top: 2px; text-shadow: 0 1px 5px rgba(0,0,0,0.75), 0 1px 2px rgba(0,0,0,0.9); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; } /* Keep strong shadow on image-background tiles even in light mode */ body.theme-light .tile-name, body.theme-modern .tile-name { text-shadow: 0 2px 8px rgba(0,0,0,0.75), 0 1px 3px rgba(0,0,0,0.9); } body.theme-light .tile-desc, body.theme-modern .tile-desc { text-shadow: 0 1px 5px rgba(0,0,0,0.75), 0 1px 2px rgba(0,0,0,0.9); } /* ========================================================================= Tile Overlay — gradient for text readability over images ========================================================================= */ .tile-overlay { background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.65) 100%); } /* ========================================================================= Toolbar Active States & Color Buttons ========================================================================= */ /* Active toolbar button: colored background */ .dp-toolbar-btn.active { background: linear-gradient(135deg, var(--dp-accent), #c17d0e) !important; border-color: var(--dp-accent) !important; box-shadow: 0 0 12px var(--dp-accent-glow); color: #fff; } @supports (background: color-mix(in srgb, red, blue)) { .dp-toolbar-btn.active { background: linear-gradient(135deg, var(--dp-accent), color-mix(in srgb, var(--dp-accent) 80%, #000)) !important; } } /* Inactive mode button: dimmed */ .dp-toolbar-btn[data-group="mode"]:not(.active) { opacity: 0.45; filter: grayscale(0.4); } /* Round color buttons */ .dp-color-btn { border-radius: 50% !important; border: 3px solid rgba(255,255,255,0.15) !important; transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s; aspect-ratio: 1; } @media (hover: hover) { .dp-color-btn:hover { transform: scale(1.15); border-color: rgba(255,255,255,0.5); } } .dp-color-btn.active { border-color: #fff !important; box-shadow: 0 0 12px rgba(255,255,255,0.3); transform: scale(1.1); } /* ========================================================================= PBN (Paint by Numbers) — Color swatch number labels + hint pulse ========================================================================= */ /* Number label on each color swatch (PBN only — only rendered when labels are passed) */ .dp-color { position: relative; } .dp-color .dp-color-num { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(18px, 2.5vw, 28px); font-weight: 800; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.95), 0 0 8px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.4); pointer-events: none; line-height: 1; user-select: none; } /* Hint pulse: briefly highlights the correct color swatch */ @keyframes pbn-hint-pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0.9); } 40% { transform: scale(1.22); box-shadow: 0 0 0 10px rgba(255,255,255,0.5); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0); } } .dp-color.pbn-hint { animation: pbn-hint-pulse 0.9s ease; z-index: 2; } /* ========================================================================= Fade-in Animations ========================================================================= */ /* Tile entrance animation */ @keyframes dp-fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* Page fade-in */ body { animation: dp-fadeIn 0.3s ease-out; } @keyframes dp-fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ========================================================================= Settings Overlay (#settings-overlay) — Created by dp-hub-settings.js ========================================================================= */ #settings-overlay { display: none; position: fixed; inset: 0 0 calc(var(--dp-footer-height, 32px) + 8px) 0; /* stop above footer (+gap) so close-btn stays visible */ z-index: 1000; background: var(--dp-bg, #0a0a1a); } #settings-overlay.open { display: grid; grid-template-columns: repeat(var(--grid-cols, 10), minmax(0, 1fr)); grid-template-rows: repeat(var(--grid-rows, 6), minmax(0, 1fr)); gap: 6px; padding: 6px; } .settings-title { display: flex; align-items: center; justify-content: center; font-size: calc(100vh / var(--grid-rows) * 0.15); font-weight: 700; color: var(--dp-text); } .settings-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--dp-radius-sm); border: 2px solid transparent; background: var(--dp-bg-card); color: var(--dp-text); cursor: pointer; position: relative; overflow: hidden; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; font-family: inherit; font-size: inherit; } @media (hover: hover) { .settings-tile:hover { transform: scale(1.03); box-shadow: var(--dp-shadow-hover), 0 0 12px var(--dp-accent-glow); border-color: var(--dp-accent); z-index: 1; } } .settings-tile.active { border-color: var(--dp-border-active); background: var(--dp-bg-card-active); box-shadow: var(--dp-shadow-active); } .settings-tile .tile-icon { font-size: calc(100vh / var(--grid-rows) * 0.28); margin-bottom: 2px; } .settings-tile .tile-name { font-size: calc(100vh / var(--grid-rows) * 0.14); font-weight: 600; white-space: normal; overflow: visible; text-overflow: clip; text-align: center; } .settings-tile .tile-desc { font-size: calc(100vh / var(--grid-rows) * 0.11); white-space: normal; overflow: visible; text-overflow: clip; text-align: center; opacity: 0.85; margin-top: 2px; } .settings-color-preview { width: calc(100vh / var(--grid-rows) * 0.22); height: calc(100vh / var(--grid-rows) * 0.22); border-radius: 50%; margin-bottom: 4px; border: 2px solid rgba(255,255,255,0.3); } .settings-category { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5vh; cursor: pointer; position: relative; overflow: hidden; background: var(--dp-bg-card, #2a2a3e); border: 2px solid transparent; border-radius: 12px; color: var(--dp-text, #e0e0e0); font-family: inherit; font-size: inherit; transition: transform 0.15s, border-color 0.15s; } @media (hover: hover) { .settings-category:hover { transform: scale(1.03); border-color: var(--dp-accent, #7b68ee); z-index: 2; } } .settings-category.active { border-color: var(--dp-border-active); background: var(--dp-bg-card-active); box-shadow: var(--dp-shadow-active); } .settings-category .tile-icon { font-size: calc(100vh / var(--grid-rows) * 0.4); } .settings-category .tile-name { font-size: calc(100vh / var(--grid-rows) * 0.15); font-weight: 600; } /* Inline SVG icons (used by settings tiles) */ .tile-svg { width: 1em; height: 1em; display: inline-block; vertical-align: middle; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================================= Backwards-Compatibility Aliases ========================================================================= */ .tile { /* alias for .dp-tile — apply same base styles */ display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--dp-radius); text-decoration: none; color: var(--dp-text); position: relative; overflow: hidden; background: var(--dp-bg-card); border: 1px solid var(--dp-border); transition: transform 0.2s ease, box-shadow 0.3s ease, border-color 0.15s; cursor: pointer; min-height: 0; width: 100%; height: 100%; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: dp-fadeInUp 0.4s ease-out both; } @media (hover: hover) { .tile:hover { transform: scale(1.03); box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.12); z-index: 100; } } body.theme-light .tile:hover, body.theme-modern .tile:hover { border-color: var(--dp-border-active) !important; box-shadow: var(--dp-shadow-hover) !important; } .tile:active { transform: scale(0.97); } .setting-tile, .nav-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--dp-radius-sm); text-decoration: none; color: var(--dp-text); position: relative; overflow: hidden; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; cursor: pointer; min-height: 0; border: 2px solid transparent !important; outline: none !important; background: var(--dp-bg-card); font-family: inherit; font-size: inherit; width: 100%; height: 100%; } @media (hover: hover) { .setting-tile:hover, .nav-btn:hover { transform: scale(1.03); box-shadow: var(--dp-shadow-hover), 0 0 12px var(--dp-accent-glow); border-color: var(--dp-accent) !important; z-index: 100; } } .setting-tile:active, .nav-btn:active { transform: scale(0.97); } .setting-tile:focus, .nav-btn:focus { outline: none; } .setting-tile.active { border-color: var(--dp-border-active); background: var(--dp-bg-card-active); box-shadow: var(--dp-shadow-active); } .lang-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--dp-radius-sm); border: 2px solid transparent; background: var(--dp-bg-card); color: var(--dp-text); cursor: pointer; position: relative; overflow: hidden; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; font-family: inherit; font-size: inherit; width: 100%; height: 100%; } @media (hover: hover) { .lang-tile:hover { transform: scale(1.03); box-shadow: var(--dp-shadow-hover), 0 0 12px var(--dp-accent-glow); border-color: var(--dp-accent); z-index: 2; } } .lang-tile.active { border-color: var(--dp-border-active); background: var(--dp-bg-card-active); box-shadow: var(--dp-shadow-active); } .lang-tile .tile-name { text-shadow: 0 1px 3px rgba(0,0,0,0.5); font-family: "Segoe UI", system-ui, -apple-system, "Microsoft YaHei", "PingFang SC", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", sans-serif; } /* Hub setting-tile labels (Info, Unterstützen, Vorlesen, Einstellungen…) must wrap instead of truncating — "Unterstützen" was becoming "Unterstütz..." on narrow tiles. Two-line wrap is fine here. */ .setting-tile .tile-name, .nav-btn .tile-name { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.1; word-break: normal; hyphens: auto; -webkit-hyphens: auto; font-size: calc(100vh / var(--grid-rows, 6) * 0.13); } .g-btn { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 2px solid var(--dp-border); background: var(--dp-bg-card); color: var(--dp-text); border-radius: var(--dp-radius-sm); font-family: inherit; font-weight: 600; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; text-decoration: none; padding: 4px; width: 100%; height: 100%; } @media (hover: hover) { .g-btn:hover { transform: scale(1.03); box-shadow: var(--dp-shadow-hover); z-index: 2; } } .g-btn:active { transform: scale(0.97); } .g-btn.active { border-color: var(--dp-border-active); box-shadow: var(--dp-shadow-active); } .nav-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--dp-bg-card-active); border: 2px solid var(--dp-accent); border-radius: var(--dp-radius-sm); color: var(--dp-text); font-family: inherit; cursor: pointer; text-decoration: none; transition: transform 0.15s; position: relative; overflow: hidden; } @media (hover: hover) { .nav-btn:hover { transform: scale(1.03); } } /* ========================================================================= TTS Tour Button & Highlight ========================================================================= */ .tile-tts { background: linear-gradient(145deg, #1a1a2e, #1a2040, #1a1a2e); border: 1px solid rgba(79,172,254,0.15); } @media (hover: hover) { .tile-tts:hover { border-color: rgba(79,172,254,0.3); box-shadow: 0 4px 16px rgba(79,172,254,0.1); } } .tile-tts.tour-active { border-color: rgba(79,172,254,0.5); box-shadow: 0 0 16px rgba(79,172,254,0.2); } .tile-highlight { animation: tile-pulse 0.8s ease-in-out infinite alternate; border-color: rgba(79,172,254,0.6) !important; box-shadow: 0 0 20px rgba(79,172,254,0.3), 0 0 40px rgba(0,242,254,0.15) !important; z-index: 5; } @keyframes tile-pulse { from { transform: scale(1); } to { transform: scale(1.04); } } /* ── TTS Highlight (unified for all modules) ── */ .dp-tts-highlight { outline: 3px solid rgba(79,172,254,0.6); outline-offset: 2px; animation: dp-tts-glow 0.8s infinite alternate; } .tile.dp-tts-highlight { animation: dp-tts-glow 0.8s infinite alternate, dp-tts-scale 0.8s infinite alternate; } @keyframes dp-tts-glow { from { box-shadow: 0 0 6px rgba(79,172,254,0.3); } to { box-shadow: 0 0 18px rgba(79,172,254,0.6); } } @keyframes dp-tts-scale { from { transform: scale(1); } to { transform: scale(1.04); } } /* ========================================================================= Light / Modern theme — fix hardcoded white text in hub pages ========================================================================= */ body.theme-light .hub-title h1, body.theme-modern .hub-title h1 { color: var(--dp-text) !important; } body.theme-light .lang-title, body.theme-modern .lang-title { color: var(--dp-text) !important; } body.theme-light .lang-nav, body.theme-modern .lang-nav { background: var(--dp-bg-card-active) !important; color: var(--dp-text) !important; border-color: var(--dp-accent) !important; } body.theme-light .settings-color-preview, body.theme-modern .settings-color-preview { border-color: rgba(0,0,0,0.2) !important; } /* AssistUK logo: invert to dark blue in light/modern mode */ body.theme-light #logo-left img, body.theme-modern #logo-left img { filter: invert(1) sepia(1) saturate(3) hue-rotate(190deg) brightness(0.35) !important; opacity: 1 !important; } /* ── TTS Lock State (tap required before Dwell works) ── */ .tts-locked { opacity: 0.5; pointer-events: none; } .tts-locked .dwell-dot { display: none; } .tts-tap-hint { font-size: clamp(9px, 1.4vw, 13px); color: var(--dp-accent, #4facfe); text-align: center; margin-top: 2px; line-height: 1.2; } /* ========================================================================= Tile Entry Animations — staggered fade-in on page load ========================================================================= */ @keyframes dp-tile-enter { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .tile, .dp-tile, .setting-tile, .nav-btn, .lang-tile, .dp-btn-func, .dp-btn-link, .hub-title, .hub-dp-logo, .settings-tile, .settings-category, .pay-card, .page-header, .tts-btn { animation: dp-tile-enter 0.4s ease-out both; } /* Staggered delays via nth-child on body direct children */ body > *:nth-child(1) { animation-delay: 0.02s; } body > *:nth-child(2) { animation-delay: 0.05s; } body > *:nth-child(3) { animation-delay: 0.08s; } body > *:nth-child(4) { animation-delay: 0.11s; } body > *:nth-child(5) { animation-delay: 0.14s; } body > *:nth-child(6) { animation-delay: 0.17s; } body > *:nth-child(7) { animation-delay: 0.20s; } body > *:nth-child(8) { animation-delay: 0.23s; } body > *:nth-child(9) { animation-delay: 0.26s; } body > *:nth-child(10) { animation-delay: 0.29s; } body > *:nth-child(11) { animation-delay: 0.30s; } body > *:nth-child(12) { animation-delay: 0.31s; } body > *:nth-child(13) { animation-delay: 0.32s; } body > *:nth-child(14) { animation-delay: 0.33s; } body > *:nth-child(15) { animation-delay: 0.34s; } body > *:nth-child(16) { animation-delay: 0.35s; } body > *:nth-child(17) { animation-delay: 0.36s; } body > *:nth-child(18) { animation-delay: 0.37s; } body > *:nth-child(19) { animation-delay: 0.38s; } body > *:nth-child(20) { animation-delay: 0.39s; } /* ===== Reduced motion (Epilepsy/Photosensitivity — global) ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .tile:hover, .g-btn:hover, .g-slot:hover { transform: none !important; } } /* ===== DP: Kein Hand-Cursor auf interaktiven Elementen ===== Die Dwell-Dot-Visualisierung ist der primäre Input-Indikator. Der Hand-Cursor wirkt bei Augensteuerung unruhig und ist redundant. */ button, a.tile, .tile, .theme-tile, .g-btn, .g-slot, .g-logo, .g-profile-works .g-profile-work, .setting-tile, .nav-btn, .hub-dp-logo-clickable, .hub-dp-logo.hub-dp-logo-clickable, [role="button"], [data-action] { cursor: default; } /* Explicit exceptions where a specific cursor helps UX */ input[type="text"], input[type="number"], input[type="email"], input[type="password"], textarea { cursor: text; } /* ============================================================ Legal footer (Impressum / Datenschutz / AGB) — shared style ============================================================ Every hub embeds