/* ================================================================ THEMES — vier durchgestaltete Designs. Wird über aktiviert. Ohne Attribut greift das Standard-Design ("dispatch") aus style.css. Diese Datei wird NACH style.css geladen und überschreibt dort nur die Farbvariablen — alles andere (Layout, Abstände) bleibt für alle Themes gleich. Auswählbar im Admin-Panel unter "Einstellungen" → Design. ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Outfit:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap'); /* --------------------------------------------------------------- MIDNIGHT — kühles Blau-Violett, ruhig und modern. Für Leute, die es dezent und "erwachsen" mögen. --------------------------------------------------------------- */ html[data-theme="midnight"] { --bg: #0D0B1F; --panel: #171334; --panel-2: #12102B; --border: #272247; --accent: #A78BFA; --accent-dim: #6D5BA8; --accent-2: #6D5BA8; --gradient: linear-gradient(135deg, #A78BFA 0%, #6D5BA8 100%); --text: #E8E6F5; --muted: #8983B0; --success: #5EEAD4; --error: #FB7185; --mono: 'IBM Plex Mono', ui-monospace, monospace; --sans: 'Outfit', system-ui, sans-serif; --glass-bg: rgba(30, 25, 62, 0.6); --glass-bg-strong: rgba(30, 25, 62, 0.8); --glass-border: rgba(167, 139, 250, 0.14); } html[data-theme="midnight"] body, html[data-theme="midnight"] .home-screen, html[data-theme="midnight"] .overlay { background: radial-gradient(ellipse 900px 500px at 12% -5%, rgba(167,139,250,0.16) 0%, transparent 60%), radial-gradient(ellipse 900px 600px at 88% 8%, rgba(94,234,212,0.09) 0%, transparent 55%), var(--bg) !important; } /* --------------------------------------------------------------- SUNSET — warmes Orange-Pink, lebendig und jung. Passt am besten zum Chatza-Logo. --------------------------------------------------------------- */ html[data-theme="sunset"] { --bg: #1A1015; --panel: #271821; --panel-2: #20131B; --border: #3D2530; --accent: #FF7A45; --accent-dim: #A34E2B; --accent-2: #A34E2B; --gradient: linear-gradient(135deg, #FF7A45 0%, #A34E2B 100%); --text: #FFF0E8; --muted: #A98A93; --success: #7BD88F; --error: #FF5C7A; --mono: 'IBM Plex Mono', ui-monospace, monospace; --sans: 'Outfit', system-ui, sans-serif; --glass-bg: rgba(48, 28, 40, 0.62); --glass-bg-strong: rgba(48, 28, 40, 0.82); --glass-border: rgba(255, 122, 69, 0.16); } html[data-theme="sunset"] body, html[data-theme="sunset"] .home-screen, html[data-theme="sunset"] .overlay { background: radial-gradient(ellipse 900px 500px at 15% -5%, rgba(255,122,69,0.20) 0%, transparent 60%), radial-gradient(ellipse 900px 600px at 85% 10%, rgba(255,92,122,0.12) 0%, transparent 55%), var(--bg) !important; } /* --------------------------------------------------------------- TERMINAL — grün auf schwarz, Retro-Hacker-Ästhetik. Für Nostalgiker und alle, die es puristisch mögen. --------------------------------------------------------------- */ html[data-theme="terminal"] { --bg: #070A07; --panel: #0E140E; --panel-2: #0A0F0A; --border: #1C2A1C; --accent: #3BE84A; --accent-dim: #248C2E; --accent-2: #248C2E; --gradient: linear-gradient(135deg, #3BE84A 0%, #248C2E 100%); --text: #CFF5D2; --muted: #5F8A64; --success: #3BE84A; --error: #FF5F56; --mono: 'IBM Plex Mono', ui-monospace, monospace; --sans: 'IBM Plex Mono', ui-monospace, monospace; --glass-bg: rgba(14, 24, 14, 0.7); --glass-bg-strong: rgba(14, 24, 14, 0.88); --glass-border: rgba(59, 232, 74, 0.16); --radius-lg: 4px; --radius-md: 4px; --radius-sm: 3px; } html[data-theme="terminal"] body, html[data-theme="terminal"] .home-screen, html[data-theme="terminal"] .overlay { background: radial-gradient(ellipse 900px 500px at 50% -10%, rgba(59,232,74,0.08) 0%, transparent 60%), var(--bg) !important; } /* Kantiger Look: keine runden Ecken, schärfere Kanten */ html[data-theme="terminal"] .card, html[data-theme="terminal"] .community-preview, html[data-theme="terminal"] .login-card, html[data-theme="terminal"] .home-stat-card, html[data-theme="terminal"] .sidebar-widget, html[data-theme="terminal"] button, html[data-theme="terminal"] input, html[data-theme="terminal"] textarea, html[data-theme="terminal"] select { border-radius: 3px !important; } html[data-theme="terminal"] .home-chat-btn { text-shadow: 0 0 8px rgba(59,232,74,0.5); } /* --------------------------------------------------------------- PAPER — heller Modus, freundlich und aufgeräumt. Für alle, denen dunkle Oberflächen zu anstrengend sind. --------------------------------------------------------------- */ html[data-theme="paper"] { --bg: #F4F1EA; --panel: #FFFFFF; --panel-2: #EDE9E0; --border: #D9D3C7; --accent: #C2410C; --accent-dim: #9A3412; --accent-2: #9A3412; --gradient: linear-gradient(135deg, #C2410C 0%, #9A3412 100%); --text: #2B2620; --muted: #7A7266; --success: #15803D; --error: #B91C1C; --mono: 'IBM Plex Mono', ui-monospace, monospace; --sans: 'Source Serif 4', Georgia, serif; --glass-bg: rgba(255, 255, 255, 0.72); --glass-bg-strong: rgba(255, 255, 255, 0.9); --glass-border: rgba(0, 0, 0, 0.09); } html[data-theme="paper"] body, html[data-theme="paper"] .home-screen, html[data-theme="paper"] .overlay { background: radial-gradient(ellipse 900px 500px at 12% -5%, rgba(194,65,12,0.07) 0%, transparent 60%), var(--bg) !important; } /* Im hellen Modus müssen Systemnachrichten und Badges dunkel statt weiß sein */ html[data-theme="paper"] .line.system, html[data-theme="paper"] .line.system-italic, html[data-theme="paper"] .line.system-roomchange { color: #2B2620 !important; } html[data-theme="paper"] .line.whois-card .whois-title, html[data-theme="paper"] .line.whois-card .whois-meta { color: #2B2620 !important; } html[data-theme="paper"] .home-greeting { color: var(--accent); } html[data-theme="paper"] .home-sub, html[data-theme="paper"] .home-activity-item { color: #2B2620; } html[data-theme="paper"] .page-copyright, html[data-theme="paper"] .page-copyright a { color: #7A7266; } html[data-theme="paper"] .home-chat-btn { color: #FFFFFF; } html[data-theme="paper"] .composer button { color: #FFFFFF; } html[data-theme="paper"] .role-tag { color: #000; } html[data-theme="paper"] .news-ticker-label { color: #FFFFFF; } html[data-theme="paper"] .home-stat-value { color: var(--accent); text-shadow: none; } html[data-theme="paper"] .home-stat-label { color: #2B2620; opacity: 0.7; } html[data-theme="paper"] .home-next-event-label, html[data-theme="paper"] .home-activity-feed-title, html[data-theme="paper"] .sidebar-widget-title { color: var(--accent); } html[data-theme="paper"] .home-next-event-title { color: #2B2620; } html[data-theme="paper"] .home-level-pill { color: var(--success); border-color: rgba(21,128,61,0.4); background: rgba(21,128,61,0.08); } /* --------------------------------------------------------------- Themenübergreifend: Elemente, die im Standard-Design feste Farben nutzen, an die jeweilige Akzentfarbe des Themes anpassen. --------------------------------------------------------------- */ html[data-theme="midnight"] .home-stat-value, html[data-theme="sunset"] .home-stat-value, html[data-theme="terminal"] .home-stat-value { color: var(--success); text-shadow: 0 0 12px color-mix(in srgb, var(--success) 35%, transparent); } html[data-theme="midnight"] .home-greeting, html[data-theme="sunset"] .home-greeting, html[data-theme="terminal"] .home-greeting { color: var(--accent); } html[data-theme="midnight"] .home-next-event-label, html[data-theme="sunset"] .home-next-event-label, html[data-theme="terminal"] .home-next-event-label, html[data-theme="midnight"] .home-activity-feed-title, html[data-theme="sunset"] .home-activity-feed-title, html[data-theme="terminal"] .home-activity-feed-title { color: var(--success); } html[data-theme="midnight"] .home-level-pill, html[data-theme="sunset"] .home-level-pill, html[data-theme="terminal"] .home-level-pill { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); background: color-mix(in srgb, var(--success) 8%, transparent); } /* --------------------------------------------------------------- Forum-/Admin-Bereich pro Theme einfärben — der Bereich soll sich in jedem Design vom Chat abheben, aber zum Theme passen. --------------------------------------------------------------- */ html[data-theme="midnight"] .forum-overlay { background: radial-gradient(ellipse 1000px 600px at 15% -10%, rgba(167,139,250,0.14) 0%, transparent 60%), #15122E; } html[data-theme="sunset"] .forum-overlay { background: radial-gradient(ellipse 1000px 600px at 15% -10%, rgba(255,122,69,0.14) 0%, transparent 60%), #24161E; } html[data-theme="terminal"] .forum-overlay { background: radial-gradient(ellipse 1000px 600px at 50% -10%, rgba(59,232,74,0.10) 0%, transparent 60%), #0B120B; } html[data-theme="paper"] .forum-overlay { background: radial-gradient(ellipse 1000px 600px at 15% -10%, rgba(194,65,12,0.08) 0%, transparent 60%), #EDE9E0; } html[data-theme="paper"] #admin-overlay { background: radial-gradient(ellipse 1000px 600px at 15% -10%, rgba(185,28,28,0.08) 0%, transparent 60%), #F0EBE6; } html[data-theme="midnight"] #admin-overlay { background: #1B1130; } html[data-theme="sunset"] #admin-overlay { background: #2A1219; } html[data-theme="terminal"] #admin-overlay { background: #120B0B; }