/* ============================================================ Wspólny układ ekranów po zalogowaniu: pasek boczny + treść. Rebranding: narożniki są OSTRE (3-6 px zamiast 8-12), przyciski płaskie, akcent pojawia się tylko tam, gdzie coś jest aktywne. Miękkie zaokrąglenia i poświaty pod każdym elementem czytały się jak szablon, a nie jak narzędzie do pracy — wzorcem jest pasek TENDRIX. Motyw: jasny domyślnie, ciemny po `data-motyw="ciemny"` na . Widżet 9 kropek czyta ten sam atrybut, więc kafelki dopasowują się same. Skala typograficzna: 11px meta, 14px treść, 19px tytuł. ============================================================ */ :root { --granat:#0d2242; --granat-2:#16345f; --granat-3:#1d4a86; --akcent:#2f7fd1; --akcent-jasny:#6db3f2; --tlo-akcent:#eaf2fb; --bg:#f4f6f9; --panel:#fff; --line:#dfe3e8; --line2:#eef1f4; --hover:#f7f9fb; --ink:#1d2530; --muted:#6b7684; --zle:#b4232b; --ok:#256b2a; --zmiana:#a8620f; /* tla stanow — oznaczenia „dobrze/zle/uwaga”; ciemny motyw ma wlasne nizej */ --tlo-ok:#eaf6ea; --tlo-zle:#fdf0f0; --tlo-uwaga:#fdf4e8; --tlo-zmiana:#fdf6ec; /* pasek boczny jest ciemny w obu motywach — to znak rozpoznawczy rodziny */ --pasek-tlo:#0d2242; --pasek-tekst:#ffffffcc; --pasek-tekst-mocny:#fff; --pasek-linia:#ffffff1f; --pasek-hover:#ffffff14; --pasek-aktywny:#ffffff1f; } html[data-motyw="ciemny"] { --bg:#0b1220; --panel:#121a2b; --line:#243149; --line2:#1b2537; --hover:#1a2437; --ink:#e8edf5; --muted:#93a1b8; --tlo-akcent:#16263f; --akcent:#5aa2e8; --akcent-jasny:#8cc3f5; --zle:#e06b72; --ok:#5fbf6a; --zmiana:#d9943f; --tlo-ok:#16301c; --tlo-zle:#331a1c; --tlo-uwaga:#33260f; --tlo-zmiana:#2e2413; --pasek-tlo:#080e1a; --pasek-linia:#ffffff14; } * { box-sizing:border-box; } html,body { height:100%; margin:0; } body { font:14px/1.5 system-ui,'Segoe UI',sans-serif; color:var(--ink); background:var(--bg); } .uklad { display:grid; grid-template-columns:256px minmax(0,1fr); min-height:100%; } /* --- pasek boczny -------------------------------------------------------- */ .pasek { background:var(--pasek-tlo); color:var(--pasek-tekst-mocny); display:flex; flex-direction:column; padding:14px 12px; gap:1px; position:sticky; top:0; height:100vh; overflow-y:auto; } .pasek .glowa { display:flex; align-items:center; gap:10px; padding:4px 6px 16px; } /* kropki dziedziczą `color` gospodarza — na ciemnym pasku ustawiamy go jawnie */ .pasek inmed-launcher { color:#fff; cursor:pointer; flex:0 0 auto; } .pasek .znak { width:34px; height:34px; border-radius:8px; flex:0 0 auto; } .pasek .nazwaApp { font-size:14px; font-weight:700; letter-spacing:.08em; } .pasek .sekcja { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#ffffff5c; padding:18px 8px 6px; font-weight:700; } .pasek a { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:4px; color:var(--pasek-tekst); text-decoration:none; font-size:14px; } .pasek a:hover { background:var(--pasek-hover); color:var(--pasek-tekst-mocny); } /* aktywna pozycja: pasek akcentu z lewej zamiast poświaty dookoła */ .pasek a[aria-current=page] { background:var(--pasek-aktywny); color:var(--pasek-tekst-mocny); font-weight:600; box-shadow:inset 2px 0 0 var(--akcent-jasny); } .pasek a svg, .pasek .wyloguj svg { width:16px; height:16px; flex:0 0 auto; opacity:.8; } .pasek .dol { margin-top:auto; padding-top:14px; border-top:1px solid var(--pasek-linia); } /* przełączniki: motyw i podgląd roli — dwa rzędy segmentowe, jak w TENDRIX */ .przelacznik { display:flex; align-items:center; gap:8px; padding:6px 8px; } .przelacznik > span { font-size:11px; color:#ffffff8c; flex:0 0 auto; } .przelacznik .przelacznikGrupa { display:flex; margin-left:auto; border:1px solid var(--pasek-linia); border-radius:4px; overflow:hidden; } .przelacznik button { border:0; background:none; color:#ffffff8c; font:inherit; font-size:11px; padding:5px 9px; cursor:pointer; display:flex; align-items:center; } .przelacznik button:hover { background:var(--pasek-hover); color:#fff; } .przelacznik button[aria-pressed=true] { background:var(--akcent); color:#fff; font-weight:600; } .przelacznik button svg { width:14px; height:14px; } /* Cała nazwa użytkownika jest odnośnikiem do profilu — bez tego byłaby podkreślona i niebieska jak zwykły link w treści. */ .pasek .kto { display:flex; align-items:center; gap:10px; padding:10px 6px 6px; text-decoration:none; color:inherit; border-radius:4px; } .pasek .kto:hover { background:var(--pasek-hover); } .pasek .kto:hover .ktoNazwa b { text-decoration:underline; } .pasek .inicjaly { width:32px; height:32px; border-radius:4px; background:var(--granat-3); display:grid; place-items:center; font-size:11px; font-weight:700; flex:0 0 auto; } .pasek .ktoNazwa { min-width:0; } .pasek .ktoNazwa b { display:block; font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pasek .ktoNazwa span { font-size:11px; color:#ffffff8c; } .pasek .ktoNazwa a { color:#ffffff8c; text-decoration:none; } .pasek .ktoNazwa a:hover { color:#fff; text-decoration:underline; } .pasek .wyloguj { width:100%; text-align:left; background:none; border:0; color:var(--pasek-tekst); font:inherit; font-size:14px; padding:9px 10px; border-radius:4px; cursor:pointer; display:flex; align-items:center; gap:10px; } .pasek .wyloguj:hover { background:var(--pasek-hover); color:#fff; } .pasek .wersjaApp { display:block; width:100%; text-align:left; background:none; border:0; color:#ffffff5c; font:inherit; font-size:11px; padding:6px 10px; cursor:pointer; font-variant-numeric:tabular-nums; } .pasek .wersjaApp:hover { color:#fff; text-decoration:underline; } /* --- treść --------------------------------------------------------------- */ .tresc { padding:26px 28px 60px; max-width:1200px; } /* `display:flex` na klasie wygrywał z przeglądarkowym `[hidden]{display:none}` — nagłówek „Konta” z przyciskiem „Nowe konto” świecił każdemu, także zwykłemu użytkownikowi. Atrybut hidden ma znaczyć „schowane” niezależnie od klasy. */ [hidden] { display:none !important; } .pasekTytulu { display:flex; align-items:baseline; gap:12px; margin-bottom:18px; } .pasekTytulu h2 { font-size:19px; font-weight:600; margin:0; letter-spacing:-.01em; } .meta { font-size:11px; color:var(--muted); } .pusto { padding:44px 18px; text-align:center; color:var(--muted); font-size:11px; } .pusto b { display:block; color:var(--ink); font-size:14px; margin-bottom:6px; } .przycisk { border:1px solid var(--line); background:var(--panel); border-radius:4px; padding:7px 13px; font:inherit; font-size:11px; cursor:pointer; color:var(--muted); } .przycisk:hover { border-color:var(--akcent); color:var(--akcent); } .przycisk.glowny { border:1px solid var(--granat); background:var(--granat); color:#fff; font-weight:600; padding:9px 16px; font-size:14px; } .przycisk.glowny:hover { background:var(--granat-2); border-color:var(--granat-2); } /* --- podgląd siatki w okienku (tabela mas, kontroler bibliotek) ----------- */ .lupa { border:1px solid var(--line); background:var(--panel); border-radius:4px; width:28px; height:28px; padding:0; cursor:pointer; color:var(--muted); display:grid; place-items:center; } .lupa:hover { border-color:var(--akcent); color:var(--akcent); } .lupa[disabled] { opacity:.35; cursor:default; } .lupa svg { width:15px; height:15px; } .oknoPodgladu { position:fixed; inset:0; background:#0009; display:grid; place-items:center; padding:24px; z-index:60; } .kartaPodgladu { background:var(--panel); border:1px solid var(--line); border-radius:6px; width:min(860px,94vw); display:flex; flex-direction:column; } .glowaPodgladu { display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); } .glowaPodgladu h3 { font-size:14px; font-weight:600; margin:0; } .glowaPodgladu .zamknij { margin-left:auto; border:0; background:none; color:var(--muted); font:inherit; font-size:14px; cursor:pointer; padding:4px 8px; border-radius:4px; } .glowaPodgladu .zamknij:hover { background:var(--hover); color:var(--ink); } /* stała wysokość: bez niej kanwa ma zero pikseli, zanim siatka się wczyta */ .scenaPodgladu { height:min(58vh,460px); background:var(--hover); position:relative; } .scenaPodgladu canvas { display:block; width:100%; height:100%; } /* Obraz (tekstura, zdjęcie materiału) mieści się w kadrze w całości — `contain`, nie `cover`, bo przycięta próbka koloru nie mówi o materiale prawdy. */ .obrazPodgladu { display:block; width:100%; height:100%; object-fit:contain; background:var(--bg); } .brakPodgladu { position:absolute; inset:0; display:grid; place-content:center; text-align:center; gap:6px; color:var(--muted); font-size:11px; padding:20px; } .brakPodgladu b { color:var(--ink); font-size:14px; } .stopkaPodgladu { padding:11px 18px; border-top:1px solid var(--line); font-size:11px; color:var(--muted); } @media (max-width:860px) { .uklad { grid-template-columns:1fr; } .pasek { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; } /* Chowamy nagłówki sekcji i dane zalogowanego, ale NIE cały dół: siedzą w nim przełączniki motywu i podglądu roli oraz wylogowanie. Ukryty w całości zamykał administratora w widoku USER bez drogi powrotu. */ .pasek .sekcja, .pasek .kto, .pasek .wersjaApp { display:none; } .pasek .dol { margin-top:0; padding-top:0; border-top:0; display:flex; align-items:center; gap:8px; margin-left:auto; } .przelacznik { padding:2px 4px; } .przelacznik > span { display:none; } .pasek .wyloguj { width:auto; padding:6px 10px; } .tresc { padding:18px 16px 40px; } }