/* VolleyDesk – styl2.css (przepisany, ciemny, per-moduł) */ @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Inter:wght@300;400;500;600&display=swap'); /* ─── RESET ────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ─── ZMIENNE (domyślne = dashboard / fiolet) ─────────────────────── Każdy moduł nadpisuje --mod* przez klasę na lub (dodawaną przez head_theme.php / theme.js). ──────────────────────────────────────────────────────────────────── */ :root { /* Kolor wiodący modułu – domyślnie fiolet (dashboard) */ --mod: #8b5cf6; --mod-sat: 139,92,246; /* r,g,b do rgba() */ --mod-dim: rgba(139,92,246,.13); --mod-glow: rgba(139,92,246,.38); --mod-text: #ddd6fe; --mod-border: rgba(139,92,246,.28); --mod-gradient: linear-gradient(135deg,#7c3aed,#8b5cf6); /* Tła */ --bg-body: #070b16; --bg-surface:#0c1225; --bg-card: #0f1830; --bg-input: #09111f; --bg-row: rgba(255,255,255,.03); /* Tekst */ --tx-hi: #eef2ff; --tx-mid: #8a9cc0; --tx-low: #3d4f6a; /* Geometria */ --r: 14px; --r-sm: 8px; --r-xs: 5px; /* Granice / cienie */ --line: rgba(255,255,255,.07); --line-mod: var(--mod-border); --shadow: 0 20px 50px rgba(0,0,0,.6); --shadow-sm: 0 4px 16px rgba(0,0,0,.4); } /* ── PALETY MODUŁÓW ──────────────────────────────────────────────── */ /* cup – głęboka czerwień / karmazyn */ body.mod-cup, html.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); } /* all – elektryczny niebieski */ body.mod-all, html.mod-all { --mod: #2f80ed; --mod-sat: 47,128,237; --mod-dim: rgba(47,128,237,.12); --mod-glow: rgba(47,128,237,.40); --mod-text: #b3d4fb; --mod-border: rgba(47,128,237,.28); --mod-gradient: linear-gradient(135deg,#1a56c9,#2f80ed); } /* group – soczysty zielony */ body.mod-group, html.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); } /* spar – żywa pomarańcz */ body.mod-spar, html.mod-spar { --mod: #ea6c0a; --mod-sat: 234,108,10; --mod-dim: rgba(234,108,10,.12); --mod-glow: rgba(234,108,10,.40); --mod-text: #fcd4a0; --mod-border: rgba(234,108,10,.28); --mod-gradient: linear-gradient(135deg,#c45507,#ea6c0a); } /* beach – głęboki turkus */ body.mod-beach, html.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); } /* ─── BODY / TŁO ────────────────────────────────────────────────── */ body { font-family: 'Inter', sans-serif; font-size: 0.93rem; line-height: 1.65; color: var(--tx-hi); background-color: var(--bg-body); background-image: /* blask modułu w lewym górnym rogu */ radial-gradient(ellipse 70% 45% at -5% -5%, rgba(var(--mod-sat),.16) 0%, transparent 60%), /* subtelny akcent po prawej */ radial-gradient(ellipse 50% 40% at 105% 15%, rgba(var(--mod-sat),.08) 0%, transparent 55%), /* głęboka ciemność na dole */ linear-gradient(180deg, #070b16 0%, #040710 100%); min-height: 100vh; } /* delikatna siatka w tle */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; opacity: 0.6; mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, black 30%, transparent); -webkit-mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, black 30%, transparent); } /* ─── TOPBAR ────────────────────────────────────────────────────── */ .topbar, header.topbar { position: relative; z-index: 100; background: rgba(7,11,22,.88) !important; border-bottom: 2px solid var(--mod) !important; box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 4px 24px rgba(0,0,0,.55), 0 0 40px var(--mod-glow) !important; backdrop-filter: blur(16px); padding: 0.75rem 0 !important; } /* linia blasku pod topbarem */ .topbar::after, header.topbar::after { content: ""; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 5%, var(--mod) 40%, var(--mod) 60%, transparent 95%); opacity: .5; } .bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .bar b, .topbar .bar b, header.topbar .logo a { font-family: 'Barlow Condensed', sans-serif !important; font-size: 1.4rem !important; font-weight: 800 !important; letter-spacing: 1.5px !important; color: var(--mod-text) !important; text-shadow: 0 0 24px var(--mod-glow) !important; text-decoration: none !important; } .topbar nav a, header.topbar nav a { font-size: 0.82rem; font-weight: 500; color: var(--tx-mid) !important; padding: 6px 12px !important; border-radius: var(--r-xs) !important; border: 1px solid transparent !important; transition: all .18s ease !important; text-decoration: none !important; white-space: nowrap; } .topbar nav a:hover, header.topbar nav a:hover { color: var(--mod-text) !important; background: var(--mod-dim) !important; border-color: var(--mod-border) !important; text-decoration: none !important; } /* ─── CONTAINER ─────────────────────────────────────────────────── */ .container, .wrap { max-width: 1280px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 1; } main.container { padding-top: 2rem; padding-bottom: 3rem; } /* ─── KARTY ─────────────────────────────────────────────────────── */ .card { background: var(--bg-card) !important; border: 1px solid var(--line) !important; border-radius: var(--r) !important; padding: 1.75rem !important; margin-bottom: 1.75rem; box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.045) !important; position: relative; overflow: hidden; transition: border-color .25s, box-shadow .25s; } /* pasek akcentu na górze karty */ .card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent 5%, rgba(var(--mod-sat),.7) 40%, rgba(var(--mod-sat),.7) 60%, transparent 95%); border-radius: var(--r) var(--r) 0 0; } .card:hover { border-color: var(--mod-border) !important; box-shadow: var(--shadow), 0 0 0 1px var(--mod-border), inset 0 1px 0 rgba(255,255,255,.05) !important; } /* ─── NAGŁÓWKI ──────────────────────────────────────────────────── */ h1, h2, h3 { font-family: 'Barlow Condensed', sans-serif !important; font-weight: 700 !important; letter-spacing: .8px !important; text-transform: uppercase !important; color: var(--mod-text) !important; text-shadow: 0 0 30px var(--mod-glow) !important; margin-bottom: 1rem; } h1 { font-size: 2rem !important; } h2 { font-size: 1.55rem !important; display: flex; align-items: center; gap: 10px; } h3 { font-size: 1.2rem !important; } h2 i, h3 i { color: var(--mod); opacity: .9; } /* ─── PRZYCISKI ─────────────────────────────────────────────────── */ .btn { display: inline-flex !important; align-items: center !important; gap: 7px !important; padding: 8px 16px !important; border-radius: var(--r-sm) !important; font-family: 'Inter', sans-serif !important; font-size: 0.83rem !important; font-weight: 600 !important; letter-spacing: .3px !important; cursor: pointer !important; text-decoration: none !important; transition: all .18s ease !important; background: rgba(255,255,255,.05) !important; color: var(--tx-hi) !important; border: 1px solid var(--line) !important; } .btn:hover { background: var(--mod-dim) !important; border-color: var(--mod-border) !important; color: var(--mod-text) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(var(--mod-sat),.28) !important; text-decoration: none !important; } /* PRIMARY – wypełniony kolorem modułu */ .btn.primary, button[type="submit"], input[type="submit"] { background: var(--mod) !important; border-color: var(--mod) !important; color: #fff !important; font-weight: 700 !important; box-shadow: 0 3px 14px rgba(var(--mod-sat),.40) !important; } .btn.primary:hover, button[type="submit"]:hover, input[type="submit"]:hover { filter: brightness(1.15) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 28px rgba(var(--mod-sat),.55) !important; } .btn.ghost { background: transparent !important; border-color: var(--line) !important; color: var(--tx-mid) !important; } .btn.ghost:hover { background: var(--bg-row) !important; color: var(--tx-hi) !important; } /* Akcje w rzędzie tabeli */ .actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } /* ─── TABELE ────────────────────────────────────────────────────── */ table { width: 100%; border-collapse: separate !important; border-spacing: 0 !important; } thead th { padding: 11px 14px !important; font-family: 'Barlow Condensed', sans-serif !important; font-size: 0.75rem !important; font-weight: 700 !important; letter-spacing: 1.3px !important; text-transform: uppercase !important; color: var(--tx-mid) !important; background: rgba(255,255,255,.025) !important; border-bottom: 1px solid var(--mod-border) !important; white-space: nowrap; } tbody td { padding: 13px 14px !important; border-bottom: 1px solid var(--line) !important; vertical-align: middle; color: var(--tx-hi); transition: background .14s; } tbody tr:last-child td { border-bottom: none !important; } tbody tr:hover td { background: var(--mod-dim) !important; } /* ─── FORMULARZE ────────────────────────────────────────────────── */ /* Opakowanie pola */ .form-group { margin-bottom: 1.1rem; display: flex; flex-direction: column; gap: 5px; } label { font-family: 'Barlow Condensed', sans-serif !important; font-size: 0.78rem !important; font-weight: 700 !important; letter-spacing: 1px !important; text-transform: uppercase !important; color: var(--tx-mid) !important; } input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="search"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="url"], input[type="tel"], select, textarea { background: var(--bg-input) !important; color: var(--tx-hi) !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: var(--r-sm) !important; padding: 10px 14px !important; font-family: 'Inter', sans-serif !important; font-size: 0.90rem !important; line-height: 1.5 !important; width: 100%; appearance: none; -webkit-appearance: none; transition: border-color .18s, box-shadow .18s !important; outline: none !important; } input::placeholder, textarea::placeholder { color: var(--tx-low) !important; } input:focus, select:focus, textarea:focus { border-color: var(--mod) !important; box-shadow: 0 0 0 3px var(--mod-dim), inset 0 1px 3px rgba(0,0,0,.3) !important; } /* Strzałka selecta */ select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a9cc0' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 13px center !important; padding-right: 36px !important; cursor: pointer; } select option { background: #0f1830; color: var(--tx-hi); } /* Checkbox / radio */ input[type="checkbox"], input[type="radio"] { width: 17px !important; height: 17px !important; min-width: 17px; accent-color: var(--mod) !important; border-radius: 4px !important; cursor: pointer; } /* Wiersz z checkbox + label obok siebie */ .check-row { display: flex; align-items: center; gap: 10px; } .check-row label { text-transform: none !important; font-size: 0.88rem !important; letter-spacing: 0 !important; color: var(--tx-hi) !important; } /* ─── ALERTY ────────────────────────────────────────────────────── */ .ok, .success, .alert-success { background: rgba(22,163,74,.11) !important; border: 1px solid rgba(22,163,74,.28) !important; color: #a7f3c0 !important; border-radius: var(--r-sm) !important; padding: 11px 16px !important; } .err, .error, .alert-danger { background: rgba(220,38,38,.11) !important; border: 1px solid rgba(220,38,38,.28) !important; color: #ffc9c9 !important; border-radius: var(--r-sm) !important; padding: 11px 16px !important; } .alert-info, .info { background: rgba(47,128,237,.10) !important; border: 1px solid rgba(47,128,237,.26) !important; color: #b3d4fb !important; border-radius: var(--r-sm) !important; padding: 11px 16px !important; } /* ─── MODE-BADGE ────────────────────────────────────────────────── */ .mode-badge { display: inline-block; padding: 4px 11px !important; border-radius: 999px !important; font-family: 'Barlow Condensed', sans-serif !important; font-size: 0.72rem !important; font-weight: 800 !important; letter-spacing: 1.1px !important; text-transform: uppercase !important; white-space: nowrap; } .mode-badge.cup { background: rgba(232,53,53,.13); color: #ffc9c9; border: 1px solid rgba(232,53,53,.28); } .mode-badge.all { background: rgba(47,128,237,.13); color: #b3d4fb; border: 1px solid rgba(47,128,237,.28); } .mode-badge.group { background: rgba(22,163,74,.12); color: #a7f3c0; border: 1px solid rgba(22,163,74,.26); } .mode-badge.spar { background: rgba(234,108,10,.13); color: #fcd4a0; border: 1px solid rgba(234,108,10,.28); } .mode-badge.beach { background: rgba(13,148,136,.12); color: #7fece4; border: 1px solid rgba(13,148,136,.26); } /* ─── PILL / TAG ────────────────────────────────────────────────── */ .pill, .tag, .badge { display: inline-block; background: var(--mod-dim); color: var(--mod-text); border: 1px solid var(--mod-border); border-radius: 999px; padding: 3px 10px; font-size: 0.71rem; font-weight: 700; letter-spacing: .5px; } /* ─── TABS ──────────────────────────────────────────────────────── */ .tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line); padding-bottom: 0; } .tabs a { display: inline-block; padding: 8px 16px !important; border-radius: var(--r-sm) var(--r-sm) 0 0 !important; font-family: 'Barlow Condensed', sans-serif !important; font-size: 0.85rem !important; font-weight: 700 !important; letter-spacing: .8px !important; text-transform: uppercase !important; color: var(--tx-mid) !important; text-decoration: none !important; border: 1px solid transparent !important; border-bottom: none !important; transition: all .15s ease !important; margin-bottom: -1px; } .tabs a:hover { color: var(--mod-text) !important; background: var(--mod-dim) !important; } .tabs a.active { color: var(--mod-text) !important; background: var(--bg-card) !important; border-color: var(--mod-border) !important; border-bottom-color: var(--bg-card) !important; } /* ─── STATYSTYKI ────────────────────────────────────────────────── */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 1.75rem; } .stat { background: var(--bg-card) !important; border: 1px solid var(--line) !important; border-radius: var(--r) !important; padding: 1.3rem 1.5rem !important; position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s !important; } .stat::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--mod-gradient); opacity: .5; } .stat:hover { transform: translateY(-3px) !important; border-color: var(--mod-border) !important; box-shadow: 0 12px 32px rgba(var(--mod-sat),.22) !important; } .stat-number { font-family: 'Barlow Condensed', sans-serif !important; font-size: 2.4rem !important; font-weight: 800 !important; line-height: 1 !important; color: var(--mod) !important; text-shadow: 0 0 24px var(--mod-glow) !important; margin-bottom: 4px; } .stat-label { font-family: 'Barlow Condensed', sans-serif !important; font-size: 0.73rem !important; font-weight: 700 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; color: var(--tx-mid) !important; } /* ─── LINKI ─────────────────────────────────────────────────────── */ a { color: var(--mod-text); text-decoration: none; transition: color .15s, text-shadow .15s; } a:hover { color: #fff !important; text-decoration: none !important; } /* ─── MODALS ────────────────────────────────────────────────────── */ .modal-backdrop { background: rgba(4,7,16,.72) !important; z-index: 9998 !important; } .modal.show { z-index: 9999 !important; } .modal .modal-content, dialog { background: var(--bg-card) !important; color: var(--tx-hi) !important; border: 1px solid var(--mod-border) !important; border-radius: var(--r) !important; box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) !important; } dialog::backdrop { background: rgba(4,7,16,.72); } .modal input, .modal select, .modal textarea, dialog input, dialog select, dialog textarea { background: var(--bg-input) !important; color: var(--tx-hi) !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: var(--r-sm) !important; padding: 10px 14px !important; width: 100%; } .modal input:focus, .modal select:focus, .modal textarea:focus, dialog input:focus, dialog select:focus, dialog textarea:focus { border-color: var(--mod) !important; box-shadow: 0 0 0 3px var(--mod-dim) !important; outline: none !important; } /* ─── FOOTER ────────────────────────────────────────────────────── */ footer { text-align: center; padding: 2.5rem 0; border-top: 1px solid var(--line); color: var(--tx-low); font-size: 0.8rem; } /* ─── UTILITY ───────────────────────────────────────────────────── */ .muted { font-size: 0.8rem; color: var(--tx-mid) !important; } .small { font-size: 0.8rem; } .accent { color: var(--mod) !important; } .empty-state { text-align: center; padding: 3rem 1rem; color: var(--tx-low); } .empty-state i { font-size: 2.8rem; color: var(--mod-border); margin-bottom: 1rem; display: block; } /* ─── SCROLLBAR ─────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--mod-border); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--mod); } /* ─── RESPONSIVE ────────────────────────────────────────────────── */ @media (max-width: 640px) { .topbar .bar { flex-direction: column; gap: 8px; } .card { padding: 1.1rem !important; } .stats { grid-template-columns: 1fr 1fr; } thead th, tbody td { padding: 10px 10px !important; } h2 { font-size: 1.25rem !important; } }