/* * themes.css — VolleyDesk Theme System * Nadpisuje zmienne z styl2.css per motyw * Motyw ustawiany przez klasę na : * class="theme-glass" (domyślny — ciemny fiolet) * class="theme-sport" (sport bold — pomarańcz/czerń) * class="theme-light" (jasny minimalistyczny) * class="theme-neon" (neon zielony na czarnym) */ /* =================================================================== THEME A — GLASS DARK (domyślny, ewolucja obecnego) Głęboki granat, fioletowe akcenty, szklany topbar =================================================================== */ html.theme-glass, html:not([class*="theme-"]) { --mod: #8b5cf6; --mod-sat: 139,92,246; --mod-dim: rgba(139,92,246,.13); --mod-glow: rgba(139,92,246,.35); --mod-text: #ddd6fe; --mod-border: rgba(139,92,246,.28); --mod-gradient: linear-gradient(135deg,#7c3aed,#8b5cf6); --bg-body: #070b16; --bg-surface: #0c1225; --bg-card: #0f1830; --bg-input: #09111f; --bg-row: rgba(255,255,255,.03); --tx-hi: #eef2ff; --tx-mid: #8a9cc0; --tx-low: #3d4f6a; --line: rgba(255,255,255,.07); /* Topbar — szklany efekt */ --topbar-bg: rgba(7,11,22,.88); --topbar-blur: blur(16px); --card-accent: 3px; } /* =================================================================== THEME B — SPORT BOLD Czarne tło, ostre pomarańczowe akcenty, sportowy vibe =================================================================== */ html.theme-sport { --mod: #f97316; --mod-sat: 249,115,22; --mod-dim: rgba(249,115,22,.13); --mod-glow: rgba(249,115,22,.35); --mod-text: #fed7aa; --mod-border: rgba(249,115,22,.30); --mod-gradient: linear-gradient(135deg,#c2410c,#f97316); --bg-body: #080808; --bg-surface: #0f0f0f; --bg-card: #111111; --bg-input: #0a0a0a; --bg-row: rgba(255,255,255,.02); --tx-hi: #f5f5f5; --tx-mid: #737373; --tx-low: #404040; --line: rgba(255,255,255,.06); --topbar-bg: #080808; --topbar-blur: none; --card-accent: 0px; } /* Sport: topbar z grubą linią zamiast blur */ html.theme-sport .topbar, html.theme-sport header.topbar { backdrop-filter: none !important; border-bottom: 3px solid #f97316 !important; } /* Sport: karty z lewym borderem */ html.theme-sport .card::before { display: none; } html.theme-sport .card { border-left: 3px solid rgba(249,115,22,.4) !important; border-radius: 8px !important; } /* Sport: nagłówki uppercase bold */ html.theme-sport h1, html.theme-sport h2, html.theme-sport h3 { letter-spacing: 2px !important; font-size: 110% !important; } /* Sport: przyciski kwadratowe */ html.theme-sport .btn { border-radius: 4px !important; } /* =================================================================== THEME C — CLEAN LIGHT Białe tło, szare karty, fioletowe akcenty — jasny tryb =================================================================== */ html.theme-light { --mod: #6366f1; --mod-sat: 99,102,241; --mod-dim: rgba(99,102,241,.08); --mod-glow: rgba(99,102,241,.15); --mod-text: #4338ca; --mod-border: rgba(99,102,241,.25); --mod-gradient: linear-gradient(135deg,#4f46e5,#6366f1); --bg-body: #f1f5f9; --bg-surface: #ffffff; --bg-card: #ffffff; --bg-input: #f8fafc; --bg-row: rgba(0,0,0,.02); --tx-hi: #0f172a; --tx-mid: #475569; --tx-low: #94a3b8; --line: rgba(0,0,0,.08); --shadow: 0 4px 16px rgba(0,0,0,.08); --shadow-sm: 0 2px 8px rgba(0,0,0,.06); --topbar-bg: rgba(255,255,255,.95); --topbar-blur: blur(12px); } /* Light: topbar jasny */ html.theme-light .topbar, html.theme-light header.topbar { background: rgba(255,255,255,.95) !important; border-bottom-color: #e2e8f0 !important; box-shadow: 0 1px 3px rgba(0,0,0,.08) !important; } html.theme-light .topbar .bar b, html.theme-light header.topbar .logo a { color: #0f172a !important; text-shadow: none !important; } html.theme-light .topbar nav a, html.theme-light header.topbar nav a { color: #475569 !important; } html.theme-light .topbar nav a:hover, html.theme-light header.topbar nav a:hover { color: #4338ca !important; background: rgba(99,102,241,.08) !important; } /* Light: tło ciemniejsze (siatka) */ html.theme-light body::before { background-image: linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px); opacity: 0.5; } /* Light: body gradient */ html.theme-light body { background-color: #f1f5f9 !important; background-image: radial-gradient(ellipse 70% 45% at -5% -5%, rgba(99,102,241,.06) 0%, transparent 60%), linear-gradient(180deg, #f1f5f9 0%, #e8edf5 100%) !important; } /* Light: karty z cieniem zamiast glow */ html.theme-light .card { box-shadow: 0 2px 12px rgba(0,0,0,.07), inset 0 1px 0 rgba(255,255,255,.8) !important; } html.theme-light .card:hover { box-shadow: 0 6px 24px rgba(99,102,241,.12), 0 0 0 1px rgba(99,102,241,.15) !important; } /* Light: tekst nagłówków ciemny */ html.theme-light h1, html.theme-light h2, html.theme-light h3 { color: #1e293b !important; text-shadow: none !important; } /* Light: tabela */ html.theme-light thead th { background: #f8fafc !important; color: #64748b !important; } html.theme-light tbody tr:hover td { background: rgba(99,102,241,.04) !important; } /* Light: inputy */ html.theme-light input, html.theme-light select, html.theme-light textarea { border-color: #e2e8f0 !important; color: #0f172a !important; } html.theme-light input::placeholder, html.theme-light textarea::placeholder { color: #94a3b8 !important; } /* Light: scrollbar */ html.theme-light ::-webkit-scrollbar-thumb { background: #cbd5e1; } /* =================================================================== THEME D — NEON SPORT Głęboka czerń, neonowa zieleń — gaming/esport =================================================================== */ html.theme-neon { --mod: #00ffa3; --mod-sat: 0,255,163; --mod-dim: rgba(0,255,163,.08); --mod-glow: rgba(0,255,163,.25); --mod-text: #6effcb; --mod-border: rgba(0,255,163,.20); --mod-gradient: linear-gradient(135deg,#00cc80,#00ffa3); --bg-body: #020609; --bg-surface: #060d12; --bg-card: #071018; --bg-input: #030a10; --bg-row: rgba(0,255,163,.02); --tx-hi: #e8f5f0; --tx-mid: #4d7a66; --tx-low: #1f3d30; --line: rgba(0,255,163,.07); --shadow: 0 20px 50px rgba(0,0,0,.8); --topbar-bg: rgba(2,6,9,.92); --topbar-blur: blur(12px); } /* Neon: efekt skanlinii */ html.theme-neon body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0,255,163,.01) 2px, rgba(0,255,163,.01) 4px ); } /* Neon: card z zielonym glow */ html.theme-neon .card:hover { box-shadow: 0 0 30px rgba(0,255,163,.12), 0 20px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(0,255,163,.15) !important; } /* Neon: przyciski primary z glow */ html.theme-neon .btn.primary, html.theme-neon button[type="submit"] { box-shadow: 0 0 20px rgba(0,255,163,.4), 0 3px 14px rgba(0,255,163,.3) !important; } /* Neon: nagłówki z mocnym glow */ html.theme-neon h1, html.theme-neon h2 { letter-spacing: 2px !important; } /* =================================================================== MODUŁY — kolory per typ turnieju (te same dla wszystkich motywów, nadpisują --mod gdy aktywny moduł) =================================================================== */ /* Kolory modułów zachowane tak jak w styl2.css */ html.theme-glass body.mod-cup, html.theme-sport body.mod-cup, html.theme-neon body.mod-cup { --mod: #e83535; --mod-sat: 232,53,53; --mod-dim: rgba(232,53,53,.12); --mod-glow: rgba(232,53,53,.40); --mod-text: #ffc9c9; --mod-border: rgba(232,53,53,.28); --mod-gradient: linear-gradient(135deg,#c0392b,#e83535); } html.theme-glass body.mod-beach, html.theme-sport body.mod-beach, html.theme-neon body.mod-beach { --mod: #0d9488; --mod-sat: 13,148,136; --mod-dim: rgba(13,148,136,.12); --mod-glow: rgba(13,148,136,.40); --mod-text: #7fece4; --mod-border: rgba(13,148,136,.26); --mod-gradient: linear-gradient(135deg,#0a6e66,#0d9488); } html.theme-glass body.mod-group, html.theme-sport body.mod-group, html.theme-neon body.mod-group { --mod: #16a34a; --mod-sat: 22,163,74; --mod-dim: rgba(22,163,74,.12); --mod-glow: rgba(22,163,74,.38); --mod-text: #a7f3c0; --mod-border: rgba(22,163,74,.26); --mod-gradient: linear-gradient(135deg,#0f7a37,#16a34a); } /* Light — moduły muszą być mocniejsze (jasne tło) */ html.theme-light body.mod-cup { --mod: #dc2626; --mod-sat: 220,38,38; --mod-dim: rgba(220,38,38,.07); --mod-glow: rgba(220,38,38,.12); --mod-text: #991b1b; --mod-border: rgba(220,38,38,.2); } html.theme-light body.mod-beach { --mod: #0f766e; --mod-sat: 15,118,110; --mod-dim: rgba(15,118,110,.07); --mod-glow: rgba(15,118,110,.12); --mod-text: #134e4a; --mod-border: rgba(15,118,110,.2); } html.theme-light body.mod-group { --mod: #15803d; --mod-sat: 21,128,61; --mod-dim: rgba(21,128,61,.07); --mod-glow: rgba(21,128,61,.1); --mod-text: #14532d; --mod-border: rgba(21,128,61,.2); }