/* * Minimal global CSS + dark mode variables override. * * Dark mode strategy: * - App.razor ustawia atrybut data-theme-mode="light|dark" na serwer-side z cookie. * - Tutaj definiujemy CSS variables dla obu trybów na html[data-theme-mode="..."]. * - Komponenty (ClientLayout, Home cards, atomic components) używają var(--dxbl-*) i dziedziczą. * * Dlaczego sami zarządzamy --dxbl-page-bg / --dxbl-page-color: * DX Fluent z Mode=Dark aktualizuje --dxbl-accent-color-* (akcent), ale nie wymusza * konkretnego --dxbl-page-bg na :root dla dark variant. W efekcie body zostaje białe. * Ten override gwarantuje że dark mode = ciemne tło, niezależnie od DX runtime quirks. * * Specificity html[data-theme-mode="..."] (0,1,1) > :root (0,1,0) DX wewnętrznego. */ html[data-theme-mode="light"], html:not([data-theme-mode]) { --dxbl-page-bg: #ffffff; --dxbl-page-color: #1a1a1a; --dxbl-content-bg: #fafafa; --dxbl-page-border-color: #e0e0e0; } html[data-theme-mode="dark"] { --dxbl-page-bg: #1f1f1f; --dxbl-page-color: #e8e8e8; --dxbl-content-bg: #2a2a2a; --dxbl-page-border-color: #3f3f3f; /* Korekta tła dla DxButton Secondary (default jasne, w dark powinno być ciemniejsze). Inne DxButton (Primary, Success, Danger) mają kolory niezależne od mode. */ color-scheme: dark; } html, body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; background: var(--dxbl-page-bg); color: var(--dxbl-page-color); min-height: 100vh; } /* * Focus outline na nagłówkach — wyłączamy całkowicie. * * FocusOnNavigate w Routes.razor focusuje pierwsze

po nawigacji (a11y dla screen * readerów). Browser Chrome traktuje programmatic focus po page load jako "visible" * (heurystyka), więc nawet :focus-visible matchuje — w efekcie h1 dostaje outline * który wygląda jak ramka edycji. * * H1 nie jest tabbable z klawiatury (tabindex=-1 ustawione przez FocusOnNavigate), * więc :focus-visible nie służy realnej accessibility — usuwamy bezpiecznie. * * Reguła globalna (nie w razor.css) — Blazor isolation transformuje :focus[b-xxx] * w sposób który może być niespójny między browserami. */ .page-header h1:focus, main h1:focus, main h2:focus, main h3:focus, .page-header h1:focus-visible, main h1:focus-visible, main h2:focus-visible, main h3:focus-visible { outline: none; } /* * AdminNavMenu — sidebar nav links. * * Style globalnie (nie w razor.css) bo NavLink to child component i renderuje * bez [b-xxx] atrybutu z parent scope. CSS isolation selector .admin-nav-link[b-xxx] * nie matchuje, browser default `a { text-decoration: underline }` wygrywa. * * Tu specificity (0, 1, 0) wystarcza żeby nadpisać browser default. */ .admin-nav-link { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.85rem; border-radius: 6px; color: var(--dxbl-page-color); text-decoration: none; font-size: 0.92rem; transition: background 0.12s ease, color 0.12s ease; position: relative; } .admin-nav-link:hover { background: var(--dxbl-accent-color-10); color: var(--dxbl-accent-color-130); text-decoration: none; } .admin-nav-link-active { background: var(--dxbl-accent-color-20); color: var(--dxbl-accent-color-130); font-weight: 600; } /* Pasek akcentu po lewej dla active state — wizualny anchor "tu jesteś". */ .admin-nav-link-active::before { content: ''; position: absolute; left: -0.75rem; top: 0.45rem; bottom: 0.45rem; width: 3px; background: var(--dxbl-accent-color-100); border-radius: 0 3px 3px 0; } .admin-nav-icon { font-size: 1.05rem; flex-shrink: 0; width: 1.2rem; text-align: center; opacity: 0.85; } .admin-nav-link-active .admin-nav-icon { opacity: 1; } .admin-nav-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .admin-nav-todo { flex-shrink: 0; font-size: 0.62rem; padding: 0.1rem 0.4rem; border-radius: 999px; font-weight: 600; letter-spacing: 0.05em; background: var(--dxbl-accent-color-30); color: var(--dxbl-accent-color-150); border: 1px solid var(--dxbl-accent-color-40); } /* Dark mode overrides — używamy data-theme-mode na html dla pewności specificity. */ html[data-theme-mode="dark"] .admin-nav-link:hover { background: rgba(255, 255, 255, 0.06); color: var(--dxbl-accent-color-40); } html[data-theme-mode="dark"] .admin-nav-link-active { background: rgba(255, 255, 255, 0.09); color: var(--dxbl-accent-color-30); } html[data-theme-mode="dark"] .admin-nav-todo { background: rgba(255, 255, 255, 0.08); color: var(--dxbl-accent-color-30); border-color: rgba(255, 255, 255, 0.12); } /* DX Blazor Error UI — overlay z błędem circuit. */ #blazor-error-ui { display: none; background: #ffe; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); position: fixed; width: 100%; padding: 0.6rem 1.25rem; color: #2c2c2c; z-index: 9999; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }