/* ============================================================================
board-refresh.css — Odświeżenie wyglądu tablicy · WARIANT A (kompaktowy)
----------------------------------------------------------------------------
Dołącz w board.html PO board.css:
Nadpisuje istniejące selektory (id/klasy 1:1), więc działa jako warstwa na
wierzchu — nie trzeba przepisywać board.css. Tryb ciemny używa body.dark
(tak jak w aplikacji) i jest sterowany zmiennymi, więc działa wszędzie.
Jedyne miejsce do zmiany koloru marki: --accent poniżej.
Uwaga: elementy z własnym style="..." w HTML (np. przyciski stron, sekcja
serwera) mają wyższy priorytet niż ten plik — jeśli chcesz je też odświeżyć,
usuń ich atrybuty style albo daj znać, dopiszę reguły z !important.
============================================================================ */
:root{
--accent:#2f6fe0;
--accent-eff:var(--accent);
--canvas:#e8eaef; --grid:#d3d7df;
--panel:#ffffff; --panel-2:#f4f6f9; --panel-hd:#fbfcfd;
--border:#e5e8ee; --border-2:#d7dbe3;
--text:#1b2230; --muted:#717a89; --tile-ic:#475061;
--tile-hover:#eef1f7; --active-ink:#ffffff;
--shadow:0 10px 30px rgba(22,32,52,.13), 0 1px 0 rgba(255,255,255,.6) inset;
--radius:9px;
--good:oklch(0.64 0.16 150);
}
body.dark{
--accent-eff:color-mix(in oklab, var(--accent), white 18%);
--canvas:#0c0e12; --grid:#1a1e26;
--panel:#181b21; --panel-2:#1f232b; --panel-hd:#1c2027;
--border:#2a2f3a; --border-2:#353b48;
--text:#e7eaf0; --muted:#98a1b1; --tile-ic:#abb3c1;
--tile-hover:#262b35; --active-ink:#0c0e12;
--shadow:0 16px 44px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.04) inset;
--good:oklch(0.7 0.15 152);
}
/* ── Tło planszy ── */
#canvasArea{ background:var(--canvas); }
body.dark #canvasArea{ background:var(--canvas); }
/* ── Panel narzędzi ── */
#tools{
background:var(--panel); border:1px solid var(--border);
border-radius:14px; box-shadow:var(--shadow);
}
#toolsHeader{
background:var(--panel-hd); color:var(--text);
border-bottom:1px solid var(--border); border-radius:14px 14px 0 0;
padding:9px 11px 9px 13px; font-weight:650; font-size:12.5px;
}
#toolsCollapseBtn{ color:var(--muted); }
#toolsCollapseBtn:hover{ color:var(--text); }
#tools hr{ border-color:var(--border); margin:4px 0; }
.tools-subsection-label{
color:var(--muted); text-transform:uppercase; font-size:10px;
letter-spacing:.07em; font-weight:600; padding:6px 8px 4px;
}
#toolsBody{ scrollbar-width:thin; scrollbar-color:var(--border-2) transparent; }
#toolsBody::-webkit-scrollbar{ width:9px; }
#toolsBody::-webkit-scrollbar-thumb{
background:var(--border-2); border-radius:5px;
border:2.5px solid transparent; background-clip:content-box;
}
/* kafelki narzędzi */
.tool-grid{ gap:4px; }
.tool-grid button{
background:transparent; border:1px solid transparent; border-radius:var(--radius);
color:var(--tile-ic); height:31px; padding:0;
display:flex; align-items:center; justify-content:center;
transition:background .12s, color .12s, border-color .12s;
}
.tool-grid button:hover{ background:var(--tile-hover); }
.tool-grid button.active{
background:var(--accent-eff); color:var(--active-ink);
border-color:color-mix(in oklab, var(--accent-eff), black 12%);
}
body.dark .tool-grid button{ background:transparent; border-color:transparent; color:var(--tile-ic); }
body.dark .tool-grid button:hover{ background:var(--tile-hover); }
body.dark .tool-grid button.active{ background:var(--accent-eff); color:var(--active-ink); }
.tool-grid button .wb-ic{ width:18px; height:18px; }
.tool-grid button svg{ display:block; }
/* kolory */
.color{ width:23px; height:23px; border:2px solid color-mix(in oklab, currentColor, var(--border-2)); }
.color.active{ box-shadow:0 0 0 2px var(--panel), 0 0 0 4px var(--accent-eff); border-color:transparent; }
body.dark .color{ border-color:#666; }
body.dark .color.active{ box-shadow:0 0 0 2px var(--panel), 0 0 0 4px var(--accent-eff); border-color:transparent; }
/* suwak grubości */
.tools-slider{ -webkit-appearance:none; appearance:none; height:4px; border-radius:999px; background:var(--border-2); }
.tools-slider::-webkit-slider-thumb{
-webkit-appearance:none; appearance:none; width:15px; height:15px; border-radius:50%;
background:var(--accent-eff); border:2px solid var(--panel); box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.tools-slider::-moz-range-thumb{ width:15px; height:15px; border-radius:50%; background:var(--accent-eff); border:2px solid var(--panel); }
/* styl linii */
.dash-btn{ background:var(--panel); border:1px solid var(--border-2); border-radius:7px; color:var(--tile-ic); }
.dash-btn:hover{ background:var(--tile-hover); }
.dash-btn.active{ background:var(--accent-eff); color:var(--active-ink); border-color:var(--accent-eff); }
body.dark .dash-btn{ background:var(--panel-2); border-color:var(--border-2); color:var(--tile-ic); }
body.dark .dash-btn:hover{ background:var(--tile-hover); }
body.dark .dash-btn.active{ background:var(--accent-eff); color:var(--active-ink); border-color:var(--accent-eff); }
/* przyciski pomocnicze paska narzędzi */
.tools-sub-btn{ background:var(--panel); border:1px solid var(--border-2); border-radius:7px; color:var(--text); }
.tools-sub-btn:hover{ background:var(--tile-hover); }
.tools-sub-label, #toolsSyncLockRow label{ color:var(--muted); }
body.dark .tools-sub-btn{ background:var(--panel-2); border-color:var(--border-2); color:var(--text); }
body.dark .tools-sub-btn:hover{ background:var(--tile-hover); }
/* lista użytkowników (panel) */
#usersList li{ border-color:var(--border) !important; color:var(--text) !important; }
/* ── Wspólny system przycisków .btn ── */
.btn{ border:1px solid var(--border-2); border-radius:8px; background:var(--panel); color:var(--text); }
.btn:hover{ background:var(--tile-hover); }
.btn-primary{ background:var(--accent-eff); border-color:var(--accent-eff); color:#fff; }
.btn-primary:hover{ background:color-mix(in oklab, var(--accent-eff), black 12%); border-color:color-mix(in oklab, var(--accent-eff), black 12%); }
.btn-danger{ color:oklch(0.58 0.15 20); border-color:color-mix(in oklab, oklch(0.58 0.15 20) 45%, var(--border-2)); background:var(--panel); }
.btn-danger:hover{ background:color-mix(in oklab, oklch(0.58 0.15 20) 12%, transparent); }
.btn-warning{ color:oklch(0.62 0.13 72); border-color:color-mix(in oklab, oklch(0.62 0.13 72) 45%, var(--border-2)); }
.btn-purple{ background:oklch(0.55 0.15 295); border-color:oklch(0.55 0.15 295); color:#fff; }
body.dark .btn{ background:var(--panel-2); border-color:var(--border-2); color:var(--text); }
body.dark .btn:hover{ background:var(--tile-hover); }
body.dark .btn-primary{ background:var(--accent-eff); border-color:var(--accent-eff); color:var(--active-ink); }
/* ── Pływające panele: wspólny chrome ── */
#calcPanel, #tablicePanel, #coordSysPanel, #shapePanel, #ellipsePanel,
#circlePanel, #imagePanel, #textboxPanel, #solid3dPanel, #mathSolvePanel{
background:var(--panel); border:1px solid var(--border);
border-radius:13px; box-shadow:var(--shadow); color:var(--text);
}
#calcHeader, #coordSysHeader, #shapePanelHeader, #ellipsePanelHeader,
#circlePanelHeader, #imagePanelHeader, #textboxPanelHeader, #solid3dHeader{
background:var(--panel-hd); color:var(--text);
border-bottom:1px solid var(--border); border-radius:13px 13px 0 0;
font-weight:650; font-size:12px; padding:8px 10px 8px 13px;
}
#mathSolveHeader{ background:var(--accent-eff); color:#fff; border-radius:13px 13px 0 0; }
.calc-close, .cs-close, .tablice-close{ color:var(--muted); }
.calc-close:hover, .cs-close:hover, .tablice-close:hover{ color:var(--text); }
body.dark #calcPanel, body.dark #coordSysPanel, body.dark #shapePanel,
body.dark #ellipsePanel, body.dark #circlePanel, body.dark #imagePanel,
body.dark #textboxPanel, body.dark #solid3dPanel, body.dark #mathSolvePanel{
background:var(--panel); border-color:var(--border); color:var(--text);
}
body.dark #calcHeader, body.dark #coordSysHeader, body.dark #shapePanelHeader,
body.dark #ellipsePanelHeader, body.dark #circlePanelHeader, body.dark #imagePanelHeader,
body.dark #textboxPanelHeader, body.dark #solid3dHeader{
background:var(--panel-hd); color:var(--text); border-color:var(--border);
}
/* ── Kalkulator ── */
.calc-display-row{ border-color:var(--border); }
#calcDisplay{ background:var(--panel-2); color:var(--text); }
.calc-grid button{ background:var(--panel); border:1px solid var(--border-2); border-radius:9px; color:var(--text); }
.calc-grid button:hover{ background:var(--tile-hover); }
.calc-op{ background:var(--panel) !important; color:var(--accent-eff) !important; font-weight:600; }
.calc-op:hover{ background:var(--tile-hover) !important; }
.calc-eq{ background:var(--accent-eff) !important; border-color:var(--accent-eff) !important; color:#fff; }
.calc-paste-btn{ background:var(--panel-2); border-color:var(--border); color:var(--muted); }
.calc-paste-btn:hover{ background:var(--tile-hover); color:var(--text); }
body.dark #calcDisplay{ background:var(--panel-2); color:var(--text); }
body.dark .calc-grid button{ background:var(--panel-2); border-color:var(--border-2); color:var(--text); }
body.dark .calc-grid button:hover{ background:var(--tile-hover); }
body.dark .calc-op{ background:var(--panel-2) !important; color:var(--accent-eff) !important; }
body.dark .calc-op:hover{ background:var(--tile-hover) !important; }
#calcHistoryList li:hover{ background:color-mix(in oklab, var(--accent-eff) 14%, transparent); color:var(--accent-eff); }
/* ── Tablice maturalne (było ciemne na sztywno → teraz wg motywu) ── */
#tablicePanel{ background:var(--panel); border-color:var(--border); }
#tabliceHeader{ background:var(--panel-hd); color:var(--text); border-bottom:1px solid var(--border); }
#tabliceLeft{ background:var(--panel-2); border-right:1px solid var(--border); }
#tabliceChapters button{ color:var(--muted); border-radius:7px; }
#tabliceChapters button:hover{ background:var(--tile-hover); color:var(--text); }
#tabliceChapters button.active{ background:var(--accent-eff); color:#fff; }
#tabliceNavBottom{ border-top:1px solid var(--border); }
#tabliceNavBottom button{ background:var(--panel-2); border:1px solid var(--border-2); color:var(--text); border-radius:6px; }
#tabliceNavBottom button:hover{ background:var(--tile-hover); }
#tabliceSyncLock{ border-top:1px solid var(--border); }
#tabSyncLabel, #tabLockLabel{ color:var(--muted); }
#tabliceImageWrap{ background:var(--panel-2); }
/* ── Modale ── */
.modal-box{ background:var(--panel); color:var(--text); border-radius:12px; box-shadow:var(--shadow); }
.modal-box input, .modal-box select, .modal-box textarea{
background:var(--panel); border:1px solid var(--border-2); color:var(--text); border-radius:7px;
}
body.dark .modal-box{ background:var(--panel); color:var(--text); }
body.dark .modal-box input, body.dark .modal-box select, body.dark .modal-box textarea{
background:var(--panel-2); border-color:var(--border-2); color:var(--text);
}
#projectList li, #templateList li{ border-color:var(--border); }
body.dark #projectList li, body.dark #templateList li{ border-color:var(--border) !important; color:var(--text) !important; }
/* ── Ikony wb (ujednolicone przez wb-icons.js) ── */
.wb-ic{ display:block; }
.tool-grid button .wb-ic svg, .tool-grid button svg.wb-ic{ width:18px; height:18px; }