/* ESZ — design tokens Light = default, Dark = override pod [data-theme="dark"] na . */ :root, :root[data-theme="light"] { --bg:#E9E4D6; --paper:#FAFAF7; --paper-2:#F4F1E8; --paper-3:#EDE9DE; --line:#E2DDCF; --line-2:#D3CCB8; --ink:#1B1D23; --ink-soft:#3E4150; --ink-mute:#6B6D78; --ink-faint:#9A9B9F; /* Sidebar/Header — ZAWSZE ciemne (niezależnie od motywu) */ --sb-bg:#0F1226; --sb-bg-2:#161A33; --sb-text:#ECEEF8; --sb-text-mute:#969ABA; --sb-border:rgba(255,255,255,0.08); /* Sidebar active item — zawsze warianty z dark mode (sidebar jest ciemny w obu trybach) */ --sb-active-bg: oklch(32% 0.06 255); --sb-active-ink: oklch(78% 0.10 255); /* Logo białe — pasuje do ciemnego sidebara/headera w obu trybach */ --logo-filter: none; /* Ikonki klawiszy (legend keyboard hints — białe PNG) — bez zmian w light */ --key-icon-filter: none; --accent:oklch(55% 0.12 255); --accent-soft:oklch(94% 0.04 255); --accent-ink:oklch(40% 0.14 255); --accent-hov:oklch(48% 0.13 255); --ok:oklch(60% 0.13 155); --ok-soft:oklch(93% 0.05 155); --ok-ink:oklch(40% 0.14 155); --ok-hov:oklch(53% 0.14 155); --warn:oklch(70% 0.15 75); --warn-soft:oklch(94% 0.06 75); --warn-ink:oklch(48% 0.14 75); --warn-hov:oklch(63% 0.16 75); --err:oklch(58% 0.18 25); --danger:oklch(58% 0.18 25); --danger-soft:oklch(93% 0.06 25); --danger-ink:oklch(45% 0.16 25); --danger-hov:oklch(52% 0.19 25); --info:oklch(60% 0.12 230); --info-soft:oklch(93% 0.05 230); --info-ink:oklch(40% 0.13 230); --shadow-1:0 1px 2px rgba(20,22,30,.06),0 0 0 1px rgba(20,22,30,.04); --shadow-2:0 2px 6px rgba(20,22,30,.10),0 0 0 1px rgba(20,22,30,.05); --shadow-3:0 8px 24px rgba(20,22,30,.12),0 0 0 1px rgba(20,22,30,.06); --toast-shadow:0 8px 20px rgba(20,22,30,.14),0 2px 4px rgba(20,22,30,.06),0 0 0 1px rgba(20,22,30,.06); --dialog-shadow:0 24px 64px rgba(20,22,30,.22),0 4px 12px rgba(20,22,30,.10),0 0 0 1px rgba(20,22,30,.08); --scrim:rgba(20,22,30,0.42); --radius-1:6px; --radius-2:10px; --radius-3:14px; /* Aliasy zgodne z design guidelines */ --radius-sm:4px; --radius:6px; --radius-lg:10px; --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace; } :root[data-theme="dark"] { --bg:#14172A; --paper:#1E2238; --paper-2:#262B43; --paper-3:#2E334F; --line:#2F3450; --line-2:#3D4366; --ink:#ECEEF8; --ink-soft:#C8CBE0; --ink-mute:#969ABA; --ink-faint:#6E7299; --sb-bg:#0F1226; --sb-bg-2:#161A33; --sb-text:#ECEEF8; --sb-text-mute:#969ABA; --sb-border:rgba(255,255,255,0.08); /* Logo białe — w dark mode zostaje białe */ --logo-filter: none; /* W dark inversja: ciemne PNG-i klawiszy stają się jasne */ --key-icon-filter: invert(0.85) brightness(1.1); --accent:oklch(68% 0.11 255); --accent-soft:oklch(32% 0.06 255); --accent-ink:oklch(78% 0.10 255); --accent-hov:oklch(72% 0.11 255); /* Semantic soft/ink — dark mode (lightness up, chroma down jak w accent) */ --ok:oklch(70% 0.12 155); --ok-soft:oklch(28% 0.06 155); --ok-ink:oklch(78% 0.11 155); --ok-hov:oklch(74% 0.12 155); --warn:oklch(76% 0.14 75); --warn-soft:oklch(30% 0.08 75); --warn-ink:oklch(82% 0.13 75); --warn-hov:oklch(80% 0.14 75); --err:oklch(68% 0.17 25); --danger:oklch(68% 0.17 25); --danger-soft:oklch(28% 0.08 25); --danger-ink:oklch(78% 0.15 25); --danger-hov:oklch(72% 0.17 25); --info:oklch(70% 0.11 230); --info-soft:oklch(28% 0.06 230); --info-ink:oklch(78% 0.11 230); --shadow-1:0 1px 2px rgba(0,0,0,.3); --shadow-2:0 2px 6px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.2); --shadow-3:0 8px 24px rgba(0,0,0,.4),0 0 0 1px rgba(0,0,0,.2); --toast-shadow:0 8px 20px rgba(0,0,0,.4),0 2px 4px rgba(0,0,0,.2); --dialog-shadow:0 24px 64px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.3); --scrim:rgba(0,0,0,0.55); /* DevExpress 25.x używa CSS custom properties wewnątrz Shadow DOM dla stylowania readonly/disabled inputów. Zmienne dziedziczą przez shadow boundary — definiowanie ich na :root[data-theme="dark"] pozwala ujarzmić bez sięgania do shadow root. Readonly i edytowalne pola powinny mieć IDENTYCZNE tło (--paper-2). */ --dxbl-text-edit-readonly-bg: var(--paper-2); --dxbl-text-edit-readonly-root-bg: var(--paper-2); --dxbl-text-edit-readonly-color: var(--ink); --dxbl-text-edit-disabled-bg: var(--paper-2); --dxbl-text-edit-disabled-root-bg: var(--paper-2); --dxbl-text-edit-disabled-color: var(--ink-mute); --dxbl-body-bg: var(--paper-2); --bs-body-bg: var(--paper-2); } /* Tokeny tylko deklarują zmienne — globalnego resetowania html/body NIE robimy, żeby reszta aplikacji (na starych SCSS varach) zachowała wygląd. */ /* Theme toggle (segmented), używany przez Components/ThemeToggle.razor */ .theme-toggle { display: inline-flex; gap: 2px; padding: 2px; background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 999px; } .theme-toggle button { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; padding: 4px 8px; color: var(--ink-mute); border-radius: 999px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .theme-toggle button .theme-toggle__icon { width: 14px; height: 14px; stroke-width: 2; } .theme-toggle button:hover { color: var(--ink); } .theme-toggle button.on { background: var(--accent); color: #fff; } /* Chrome settings button + popover — wybór klasycznego/nowoczesnego wyglądu menu. Guzik mały (paleta), popover z 2 opcjami z opisami. */ .chrome-settings { position: relative; display: inline-flex; } .chrome-settings__trigger { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--sb-bg-2, var(--paper-2)); border: 1px solid var(--sb-border, var(--line-2)); border-radius: 999px; color: var(--sb-text-mute, var(--ink-mute)); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .chrome-settings__trigger:hover { color: var(--sb-text, var(--ink)); border-color: color-mix(in srgb, var(--accent) 50%, var(--sb-border, var(--line-2))); } .chrome-settings__trigger-icon { width: 16px; height: 16px; stroke-width: 2; } .chrome-settings__overlay { position: fixed; inset: 0; z-index: 9998; background: transparent; } .chrome-settings__popover { position: fixed; left: 12px; bottom: 56px; z-index: 9999; min-width: 260px; background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius-2); box-shadow: var(--dialog-shadow); padding: 12px; display: flex; flex-direction: column; gap: 8px; animation: chrome-settings-pop 0.15s cubic-bezier(0.34, 1.4, 0.64, 1); transform-origin: bottom left; } @keyframes chrome-settings-pop { from { opacity: 0; transform: translateY(6px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .chrome-settings__title { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); padding: 2px 4px 6px; border-bottom: 1px solid var(--line-2); } .chrome-settings__options { display: flex; flex-direction: column; gap: 4px; } .chrome-settings__option { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; background: transparent; border: 1px solid transparent; border-radius: var(--radius-1); padding: 8px 10px; text-align: left; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; } .chrome-settings__option:hover { background: var(--paper-2); border-color: var(--line-2); } .chrome-settings__option.on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, var(--line-2)); } .chrome-settings__option-icon { grid-row: 1 / 3; grid-column: 1; width: 20px; height: 20px; stroke-width: 2; color: var(--ink-mute); align-self: center; } .chrome-settings__option.on .chrome-settings__option-icon { color: var(--accent); } .chrome-settings__option-label { grid-row: 1; grid-column: 2; font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.2; } .chrome-settings__wip { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 9px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--warn-ink, #b65f00); background: var(--warn-soft, #fef3e2); border: 1px solid color-mix(in srgb, var(--warn, #f39c12) 35%, transparent); border-radius: 4px; vertical-align: middle; } .chrome-settings__option.on .chrome-settings__option-label { color: var(--accent); } .chrome-settings__option-desc { grid-row: 2; grid-column: 2; font-size: 11px; font-weight: 400; color: var(--ink-mute); line-height: 1.3; margin-top: 2px; } /* ThemeToggle ukryty gdy chrome=classic (klasyczny nie obsługuje motywów). */ :root[data-chrome="classic"] .theme-toggle-wrapper { display: none !important; } /* ─── Chrome mode — visibility elementów (ikony menu, header bits) ─ MenuModule renderuje OBA warianty ikon (Lucide + IcoMoon). Header renderuje oba warianty help-icon i logout-button. Widoczność przełącza się przez atrybut `data-chrome` na . */ :root:not([data-chrome="classic"]) .menu-classic-icon, :root:not([data-chrome="classic"]) .chrome-classic-only { display: none !important; } :root[data-chrome="classic"] .menu-lucide-icon, :root[data-chrome="classic"] .chrome-modern-only { display: none !important; } /* ─── Chrome=classic — czcionka globalna IESZ (Open Sans była używana wszędzie pre-refactor). Wymusza Open Sans w całej aplikacji gdy chrome=classic — także w DevExpress gridach / popupach. */ :root[data-chrome="classic"] body, :root[data-chrome="classic"] { font-family: 'Open Sans', sans-serif !important; --font-sans: 'Open Sans', sans-serif; } :root[data-chrome="classic"] *:not(i):not([class*="icon-i"]):not([class*="icon "]):not(.fa):not([class*="fa-"]):not([class*="lucide"]):not(svg):not(svg *) { font-family: 'Open Sans', sans-serif !important; } /* Bezpiecznik: jawnie przywróć fonty ikonowe dla IcoMoon/FontAwesome/Lucide */ :root[data-chrome="classic"] i.icon-i, :root[data-chrome="classic"] i[class*="icon-i"], :root[data-chrome="classic"] [class*="icon-i"]::before, :root[data-chrome="classic"] [class*="icon-i"]::after { font-family: 'intebucon' !important; } :root[data-chrome="classic"] i.fa, :root[data-chrome="classic"] i[class*="fa-"] { font-family: 'Font Awesome 5 Free', 'FontAwesome', sans-serif !important; } /* Chrome=classic — linki w content area (gridy, popupy, ticket detale) powinny używać klasycznej palety IESZ zamiast modern --accent. Menu/ sidebar mają własne reguły w NavMenu.razor.scss; tutaj globalnie dla reszty aplikacji. Wykluczamy: sidebar, tabs, footer buttons popupów, chipy, ORAZ ticket linki (`/ticket/...` `/ticket2/...`) — mają własną regułę bo na selected rows muszą zmieniać kolor na biały. */ :root[data-chrome="classic"] a:not(.sidebar a):not(.dxbl-tabs-item):not(.popup__footer__button):not(.icChip a):not([class*="chip"] a):not([href^="/ticket/"]):not([href^="/ticket2/"]) { color: #122164 !important; text-decoration: none; } :root[data-chrome="classic"] a:not(.sidebar a):not(.dxbl-tabs-item):not(.popup__footer__button):not(.icChip a):not([class*="chip"] a):not([href^="/ticket/"]):not([href^="/ticket2/"]):hover { color: #26377c !important; text-decoration: underline; } /* Ticket linki w klasycznym — domyślnie ciemny granat (#122164), na selected/focused row stają się białe (rule wyżej z html body). Tylko `/ticket/{id}` i `/ticket2/{id}` (numerical) — NIE łapie `/tickets/{guid}` użytkownika defined filtrów. */ :root[data-chrome="classic"] a[href^="/ticket/"], :root[data-chrome="classic"] a[href^="/ticket2/"] { color: #122164 !important; font-weight: 700 !important; text-decoration: none !important; } :root[data-chrome="classic"] a[href^="/ticket/"]:hover, :root[data-chrome="classic"] a[href^="/ticket2/"]:hover { color: #26377c !important; text-decoration: underline !important; } /* Chipy — biały tekst na kolorowym tle, w OBU trybach (klasyczny + modern). Chip ma `style="background-color: @Color"` inline, więc tekst musi być biały dla czytelności niezależnie od trybu. */ .icChip, .icChip a, [class*="chip"] a { color: #fff !important; } /* Klasyczny styl chipa (mniej rounded) — też w obu trybach żeby konsystencja. */ .icChip { border-radius: 4px !important; padding: 3px 8px !important; font-weight: 700 !important; } /* Id zgłoszenia w gridzie — uniwersalnie biały (patrz niżej rule `a[href^="/ticket2/"]`). Klasyczne #122164 dla innych linków grid'a. */ :root[data-chrome="classic"] .dxbl-grid a:not(.icChip a):not([href^="/ticket/"]):not([href^="/ticket2/"]), :root[data-chrome="classic"] .dxbl-grid .dxbl-grid-cell a:not(.icChip a):not([href^="/ticket/"]):not([href^="/ticket2/"]) { color: #122164 !important; font-weight: 700 !important; } :root[data-chrome="classic"] .dxbl-grid a:not(.icChip a):not([href^="/ticket/"]):not([href^="/ticket2/"]):hover, :root[data-chrome="classic"] .dxbl-grid .dxbl-grid-cell a:not(.icChip a):not([href^="/ticket/"]):not([href^="/ticket2/"]):hover { color: #26377c !important; text-decoration: underline; } /* Id ticketu na ZAZNACZONYCH wierszach gridu — biały na ciemnym bg `.dxbl-grid-focused-row`. Działa w obu trybach. Używamy `:root` + multiple attributes + `data-chrome` prefix żeby przebić classic `:root[data-chrome="classic"] a[href^="/ticket/"], [href^="/ticket2/"] !important` (specificity (0,3,1)). */ :root .dxbl-grid-focused-row a[href^="/ticket/"], :root .dxbl-grid-focused-row a[href^="/ticket2/"], :root .dxbl-grid-focused-row td a[href^="/ticket/"], :root .dxbl-grid-focused-row td a[href^="/ticket2/"], :root .dxbl-grid-selected-row a[href^="/ticket/"], :root .dxbl-grid-selected-row a[href^="/ticket2/"], :root .dxbl-grid-selected-row td a[href^="/ticket/"], :root .dxbl-grid-selected-row td a[href^="/ticket2/"], :root[data-chrome="classic"] .dxbl-grid-focused-row a[href^="/ticket/"], :root[data-chrome="classic"] .dxbl-grid-focused-row a[href^="/ticket2/"], :root[data-chrome="classic"] .dxbl-grid-selected-row a[href^="/ticket/"], :root[data-chrome="classic"] .dxbl-grid-selected-row a[href^="/ticket2/"], :root[data-chrome="classic"] tr.dxbl-grid-focused-row a, :root[data-chrome="classic"] tr.dxbl-grid-selected-row a { color: #fff !important; font-weight: 700 !important; text-decoration: none !important; } :root[data-chrome="classic"] .dxbl-grid-focused-row a[href^="/ticket/"]:hover, :root[data-chrome="classic"] .dxbl-grid-focused-row a[href^="/ticket2/"]:hover, :root[data-chrome="classic"] .dxbl-grid-selected-row a[href^="/ticket/"]:hover, :root[data-chrome="classic"] .dxbl-grid-selected-row a[href^="/ticket2/"]:hover { color: #fff !important; text-decoration: underline !important; } /* ─── Chrome=classic — paleta granatowa IESZ (przed compact refactor) Nadpisuje tokeny sidebar/header żeby przywrócić oryginalny wygląd menu, niezależnie od ustawienia jasny/ciemny motyw aplikacji. Dokładne wartości z oryginalnych SCSS: - $navy-darkest (#080f30) — tło sidebar, akcenty w headerze - #112266 (#126) — tło głównego paska headera - #26377c ($blue-medium) — hover/active states - #122164 ($blue-color) — primary akcent */ :root[data-chrome="classic"] { --sb-bg: #080f30; --sb-bg-2: #26377c; --sb-text: #ffffff; --sb-text-mute: rgba(255, 255, 255, 0.75); --sb-active-bg: #26377c; --sb-active-ink: #ffffff; --sb-border: rgba(255, 255, 255, 0.08); } /* ─── Full-viewport layout opt-in ───────────────────────────────────── Strony, które chcą wypełniać cały viewport bez page-scrolla, opakowują swoją treść w
(lub `.full-viewport-page`). Reguły poniżej constrainują cały layout chain MainLayout-u. :has() działa w Chrome/Edge/Firefox/Safari (od 2023). */ body:has(.tickets-page) .page, body:has(.tickets-page) .page-layout, body:has(.tickets-page) .layout-item.content { height: 100%; min-height: 0; overflow: hidden; } body:has(.tickets-page) .layout-item.content { padding: 0 !important; display: flex; flex-direction: column; background: var(--bg); } /* Dashboard fills its layout area with the theme background so dark mode doesn't leak white below the dashboard__items when content is shorter than viewport. */ body:has(.dashboard) .layout-item.content { background: var(--bg); } /* Filters page — analogicznie żeby ciemny motyw nie miał białego tła wokół listy filtrów */ body:has(.filters-page) .layout-item.content { background: var(--bg); } /* Consultant board (Moja Tablica) — tablica Kanban tła */ body:has(.consultant-board) .layout-item.content { background: var(--bg); } /* Calendar — tła wokół grid kalendarza */ body:has(.cal) .layout-item.content { background: var(--bg); } /* Communication — tła wokół paneli komunikacji */ body:has(.communication) .layout-item.content { background: var(--bg); } /* NewTicket page — tła wokół formularza */ body:has(.newTicket) .layout-item.content { background: var(--bg); } body:has(.tickets-page) .page__content--ticket { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; position: static !important; top: 0 !important; } /* ─── DevExpress dark-mode adaptation (chart, inputs, dropdowns) ───── Aktywne TYLKO w dark mode — w light DevExpress wygląda OK domyślnie. Jeśli coś zaczyna źle wyglądać w light mode, zawęź selector. */ [data-theme="dark"] { /* Inputs / TextBox / ComboBox */ .dxbl-text-edit, .dxbl-text-edit-input, .dxbl-edit, .dxbl-textbox, .dxbl-combobox, .dxbl-dateedit, .dxbl-spin-edit { background: var(--paper-2) !important; color: var(--ink) !important; border-color: var(--line-2) !important; } .dxbl-text-edit input, .dxbl-text-edit-input input, .dxbl-edit input, .dxbl-textbox input, .dxbl-combobox input, .dxbl-dateedit input, .dxbl-spin-edit input { background: transparent !important; color: var(--ink) !important; } .dxbl-text-edit input::placeholder { color: var(--ink-faint) !important; } /* Dropdowny i popupy DevExpress */ .dxbl-popup, .dxbl-popup-content, .dxbl-dropdown, .dxbl-flyout, .dxbl-listbox, .dxbl-list-box, .dxbl-list-box-render-container, .dxbl-scroll-viewer, .dxbl-scroll-viewer-content { background: var(--paper) !important; color: var(--ink) !important; border-color: var(--line-2) !important; } /* List items — DevExpress używa `dxbl-list-box-*` (z myślnikami) */ .dxbl-list-box-render-container li, .dxbl-list-box-render-container li[role="option"], .dxbl-listbox-item { color: var(--ink) !important; background: transparent !important; } .dxbl-list-box-render-container li:hover, .dxbl-list-box-render-container li[role="option"]:hover, .dxbl-listbox-item:hover { background: var(--paper-2) !important; color: var(--ink) !important; } /* Override Bootstrap CSS vars — DevExpress używa bootstrap-external theme */ --bs-body-bg: var(--paper); --bs-body-color: var(--ink); --bs-secondary-bg: var(--paper-2); --bs-tertiary-bg: var(--paper-3); --bs-border-color: var(--line); --bs-primary: #4A7AB8; --bs-primary-rgb: 74, 122, 184; /* ─── Selected list item ────────────────────────────────────────── DevExpress: `
  • ` Selektor DevExpressa ma 8× :not() → ogromna specificity. Używamy długich, równie specyficznych selektorów + !important. */ .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected, .dxbl-scroll-viewer-content > ul > li[aria-selected="true"], .dxbl-list-box-render-container li.dxbl-list-box-item-selected, .dxbl-list-box-render-container li[aria-selected="true"], li.dxbl-list-box-item-selected, li[role="option"][aria-selected="true"] { background: var(--accent) !important; background-color: var(--accent) !important; color: #fff !important; box-shadow: inset 0 0 0 9999px var(--accent) !important; } /* Wymuś białe na dzieciach selected itemu */ .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected *, .dxbl-scroll-viewer-content > ul > li[aria-selected="true"] *, li.dxbl-list-box-item-selected *, li[role="option"][aria-selected="true"] * { color: #fff !important; } .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected:hover, .dxbl-scroll-viewer-content > ul > li[aria-selected="true"]:hover, li.dxbl-list-box-item-selected:hover, li[role="option"][aria-selected="true"]:hover { background: var(--accent-hov) !important; background-color: var(--accent-hov) !important; color: #fff !important; box-shadow: inset 0 0 0 9999px var(--accent-hov) !important; } /* Chevron / clear / spin buttons po prawej w inputach (combobox, date, spin) */ .dxbl-text-edit .dxbl-btn, .dxbl-combobox .dxbl-btn, .dxbl-dateedit .dxbl-btn, .dxbl-edit .dxbl-btn-group-right .dxbl-btn, .dxbl-edit-btn, .dxbl-edit-btn-clear, .dxbl-edit-btn-dropdown { background: transparent !important; color: var(--ink-mute) !important; border-color: var(--line-2) !important; } .dxbl-text-edit .dxbl-btn:hover, .dxbl-combobox .dxbl-btn:hover, .dxbl-dateedit .dxbl-btn:hover, .dxbl-edit-btn:hover, .dxbl-edit-btn-dropdown:hover { background: var(--paper-3) !important; color: var(--accent) !important; } /* Group divider/border po prawej w inputach */ .dxbl-btn-group-right { background: transparent !important; border-left: 1px solid var(--line-2) !important; } /* SVG ikona chevron (DxImage w przyciskach) */ .dxbl-text-edit .dxbl-image, .dxbl-combobox .dxbl-image, .dxbl-dateedit .dxbl-image, .dxbl-edit-btn .dxbl-image { color: var(--ink-mute) !important; fill: var(--ink-mute) !important; } .dxbl-text-edit .dxbl-btn:hover .dxbl-image, .dxbl-combobox .dxbl-btn:hover .dxbl-image { color: var(--accent) !important; fill: var(--accent) !important; } /* ─── DxChart SVG dark-mode adaptation (aggressive) ─────────────── */ /* Tło wrappera */ .dxbl-chart, .dxbl-chart .dxc-chart { background: transparent !important; } /* WSZYSTKIE rect strokes w chart SVG → muted line. Nie wiemy z góry jakiej klasy/atrybutu używa DevExpress, więc łapiemy szeroko. Series i kropki to /, nie . */ .dxbl-chart svg rect { stroke: var(--line) !important; } /* WSZYSTKIE text + tspan w chart SVG → ink-soft (etykiety osi, tytuły itp.) */ .dxbl-chart svg text, .dxbl-chart svg tspan, .dxbl-chart text, .dxbl-chart tspan { fill: var(--ink-soft) !important; color: var(--ink-soft) !important; } /* Legenda — jaśniejszy ink */ .dxbl-chart .dxc-legend text, .dxbl-chart svg g[class*="legend"] text { fill: var(--ink) !important; } /* Tytuł chartu — pełen ink */ .dxbl-chart .dxc-title text, .dxbl-chart svg g[class*="title"] text { fill: var(--ink) !important; } /* Tooltip — bez blur/glow, czysty box z borderem */ .dxbl-chart-tooltip, .dxc-tooltip, .dxbl-chart-tooltip-content, div[class*="chart-tooltip"] { background: var(--paper) !important; color: var(--ink) !important; border: 1px solid var(--line-2) !important; border-radius: var(--radius-1) !important; box-shadow: var(--shadow-2) !important; filter: none !important; backdrop-filter: none !important; } /* Tooltip text */ .dxbl-chart-tooltip *, .dxc-tooltip * { color: var(--ink) !important; } /* Hover/selected dot na linii — usuń glow, halo, drop-shadow. DevExpress rysuje wokół hovered point zewnętrzny z dużym stroke i niskim opacity (white halo). Ścieram styl. */ .dxbl-chart svg circle, .dxbl-chart svg .dxc-series circle, .dxbl-chart svg .dxc-markers circle { filter: none !important; } /* Halo circle (zewnętrzny duży circle z białym strokiem przy hover) */ .dxbl-chart svg circle[stroke="#ffffff"], .dxbl-chart svg circle[stroke="#fff"], .dxbl-chart svg circle[stroke="white"], .dxbl-chart svg circle[stroke-width="6"], .dxbl-chart svg circle[stroke-width="8"], .dxbl-chart svg circle[stroke-width="10"] { stroke: transparent !important; stroke-width: 1 !important; } /* DevExpress czasem dodaje z gaussian blur dla cieni — wyłączamy filtry stosowane do punktów/serii w SVG */ .dxbl-chart svg [filter], .dxbl-chart svg .dxc-series [filter], .dxbl-chart svg [style*="filter"] { filter: none !important; } /* Linie siatki (gridlines) — delikatne */ .dxbl-chart .dxc-grids line, .dxbl-chart .dxc-grids path, .dxbl-chart .dxc-arg-grid line, .dxbl-chart .dxc-val-grid line { stroke: var(--line) !important; stroke-opacity: 0.5 !important; } /* Linie osi (X/Y) */ .dxbl-chart .dxc-arg-axis path, .dxbl-chart .dxc-val-axis path, .dxbl-chart .dxc-arg-axis line, .dxbl-chart .dxc-val-axis line { stroke: var(--line-2) !important; } /* Series — mapuj stare hardcoded navy na akcent (na wypadek gdyby coś jeszcze używało starej palety w runtime) */ .dxbl-chart .dxc-series path[stroke="#122164"], .dxbl-chart .dxc-series path[stroke="rgb(18, 33, 100)"] { stroke: var(--accent) !important; } .dxbl-chart .dxc-series circle[fill="#122164"], .dxbl-chart .dxc-series circle[fill="rgb(18, 33, 100)"] { fill: var(--accent) !important; } /* Etykiety osi (daty/liczby) */ .dxbl-chart .dxc-arg-axis text, .dxbl-chart .dxc-val-axis text { fill: var(--ink-soft) !important; } /* Legenda */ .dxbl-chart .dxc-legend text { fill: var(--ink) !important; } /* Tytuł */ .dxbl-chart .dxc-title text { fill: var(--ink) !important; } /* Linie serii bez customizacji koloru — domyślny niebieski był ciemny. Dla series bez explicit Color z C# pchamy jasny accent. */ .dxbl-chart .dxc-series path[stroke="#1f77b4"], .dxbl-chart .dxc-series path[stroke="#1976d2"], .dxbl-chart .dxc-series path[stroke^="#0"] { stroke: var(--accent) !important; } .dxbl-chart .dxc-series circle[fill^="#0"], .dxbl-chart .dxc-series circle[fill="#1f77b4"], .dxbl-chart .dxc-series circle[fill="#1976d2"] { fill: var(--accent) !important; } } /* ─── Chart slide — pure-CSS classes for inline-styled chart components ─ */ .chart-deadline-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-1); border-left-width: 3px; } .chart-deadline-item.is-urgent { border-left-color: var(--err); } .chart-deadline-item.is-warning { border-left-color: var(--warn); } .chart-deadline-item.is-ok { border-left-color: var(--ok); } .chart-deadline-item__title { font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chart-deadline-item__date { font-size: 10px; font-family: var(--font-mono); color: var(--ink-mute); } .chart-deadline-item__days { font-size: 12px; font-weight: 700; font-family: var(--font-mono); margin-left: 10px; white-space: nowrap; } .chart-deadline-item.is-urgent .chart-deadline-item__days { color: var(--err); } .chart-deadline-item.is-warning .chart-deadline-item__days { color: var(--warn); } .chart-deadline-item.is-ok .chart-deadline-item__days { color: var(--ok); } .sla-fill-ok { background: var(--ok) !important; } .sla-fill-bad { background: var(--err) !important; } .sla-dot-ok { background: var(--ok); } .sla-dot-bad { background: var(--err); } /* ─── Linki w siatkach / linkach do ticketów ───────────────────── Subtelny w spoczynku (mono, ink-soft), akcent + podkreślenie na hover. Wzorzec data-grid w stylu Linear / GitHub / Notion. */ .ticket-link, .dxbl-grid tbody td > a, .dxbl-grid tbody td a:not(.btn):not(.dxbl-btn) { color: var(--ink-soft); font-family: var(--font-mono); font-weight: 600; letter-spacing: -.01em; text-decoration: none; border-bottom: 1px dotted transparent; transition: color .15s, border-color .15s; } .ticket-link:hover, .dxbl-grid tbody td > a:hover, .dxbl-grid tbody td a:not(.btn):not(.dxbl-btn):hover { color: var(--accent); border-bottom-color: var(--accent); } .ticket-link:visited, .dxbl-grid tbody td > a:visited { color: var(--ink-mute); } .ticket-link:visited:hover, .dxbl-grid tbody td > a:visited:hover { color: var(--accent); } /* ─── Chart axis labels (defensive) ─ wszystkie warianty wrapper class + fallback na całe body w dark mode (SVG charts only) */ [data-theme="dark"] .dxbl-chart text, [data-theme="dark"] .dxbl-chart tspan, [data-theme="dark"] .dxbl-chart svg text, [data-theme="dark"] .dxbl-chart svg tspan, [data-theme="dark"] .dxc-chart text, [data-theme="dark"] .dxc-chart tspan, [data-theme="dark"] [class*="dxc-chart"] text, [data-theme="dark"] [class*="dxbl-chart"] text, [data-theme="dark"] [class*="dxbl-chart"] tspan, [data-theme="dark"] [class*="chart"] svg text, [data-theme="dark"] [class*="chart"] svg tspan { fill: #C8CBE0 !important; color: #C8CBE0 !important; } /* Ostatnia linia obrony — wszystkie SVG wewnątrz dashboard-cardów */ [data-theme="dark"] .dashboard__item svg text, [data-theme="dark"] .dashboard__item svg tspan { fill: #C8CBE0 !important; } [data-theme="dark"] .dxbl-chart svg rect, [data-theme="dark"] [class*="chart"] svg rect { stroke: #2F3450 !important; } /* Axis lines + ticks (line elements i axis paths) — jasnoszare w dark mode */ [data-theme="dark"] .dxbl-chart svg line, [data-theme="dark"] [class*="chart"] svg line, [data-theme="dark"] .dxbl-chart .dxc-arg-axis path, [data-theme="dark"] .dxbl-chart .dxc-val-axis path, [data-theme="dark"] [class*="chart"] svg g[class*="axis"] path, [data-theme="dark"] [class*="chart"] svg g[class*="axis"] line, [data-theme="dark"] [class*="chart"] svg g[class*="grid"] line, [data-theme="dark"] [class*="chart"] svg g[class*="grid"] path { stroke: #3D4366 !important; } [data-theme="dark"] .dxbl-chart svg circle[stroke-width="6"], [data-theme="dark"] .dxbl-chart svg circle[stroke-width="8"], [data-theme="dark"] .dxbl-chart svg circle[stroke-width="10"], [data-theme="dark"] .dxbl-chart svg circle[stroke="#fff"], [data-theme="dark"] .dxbl-chart svg circle[stroke="#ffffff"], [data-theme="dark"] .dxbl-chart svg circle[stroke="white"] { stroke: transparent !important; stroke-width: 1 !important; } [data-theme="dark"] .dxbl-chart svg [filter] { filter: none !important; } /* ─── DxPager dark mode ─────────────────────────────────────────── */ [data-theme="dark"] .dxbl-pager, [data-theme="dark"] .dxbl-grid-bottom-panel, [data-theme="dark"] .dxbl-grid-pager-bar { background: var(--paper) !important; border-color: var(--line) !important; color: var(--ink) !important; } [data-theme="dark"] .dxbl-pager .dxbl-btn, [data-theme="dark"] .dxbl-pager-page-btn, [data-theme="dark"] .dxbl-pager button { background: transparent !important; color: var(--ink-soft) !important; border-color: var(--line-2) !important; } [data-theme="dark"] .dxbl-pager .dxbl-btn:hover, [data-theme="dark"] .dxbl-pager-page-btn:hover, [data-theme="dark"] .dxbl-pager button:hover { background: var(--paper-2) !important; color: var(--accent) !important; } [data-theme="dark"] .dxbl-pager-active-page-btn, [data-theme="dark"] .dxbl-pager .dxbl-active, [data-theme="dark"] .dxbl-pager [aria-current="page"] { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; } [data-theme="dark"] .dxbl-pager .dxbl-image, [data-theme="dark"] .dxbl-pager svg { color: var(--ink-soft) !important; fill: var(--ink-soft) !important; } [data-theme="dark"] .dxbl-pager-page-edit input, [data-theme="dark"] .dxbl-pager-page-edit-text { background: var(--paper-2) !important; color: var(--ink) !important; } /* ─── Icon picker combobox dropdown (popupSelectbox ItemTemplate) ─── */ .popupSelectbox-item { display: inline-flex; align-items: center; gap: 10px; width: 100%; } .popupSelectbox-item i { font-size: 16px; color: var(--ink-mute); width: 20px; text-align: center; flex-shrink: 0; transition: color .15s; } .popupSelectbox-item__label { font-size: 12px; color: var(--ink); font-family: var(--font-mono); font-weight: 500; } .dxbl-list-box-render-container li:hover .popupSelectbox-item i, .dxbl-list-box-render-container li.dxbl-list-box-item-selected .popupSelectbox-item i, .dxbl-list-box-render-container li[aria-selected="true"] .popupSelectbox-item i { color: var(--accent); } /* ─── DxDateEdit calendar popup ─────────────────────────────────── Renders inside .dxbl-popup / .dxbl-dropdown wrapper. The calendar itself uses .dxbl-calendar* classes. Theme both light/dark via tokens. */ .dxbl-calendar, .dxbl-calendar-view, .dxbl-date-edit-popup, .dxbl-date-edit-dropdown { background: var(--paper) !important; color: var(--ink) !important; border-color: var(--line-2) !important; } .dxbl-calendar-header, .dxbl-calendar-nav, .dxbl-calendar-footer { background: var(--paper) !important; color: var(--ink) !important; border-color: var(--line) !important; } /* Header title (maj 2026) + nav chevrons */ .dxbl-calendar-header .dxbl-btn, .dxbl-calendar-nav .dxbl-btn, .dxbl-calendar .dxbl-btn { background: transparent !important; color: var(--ink) !important; border-color: transparent !important; } .dxbl-calendar-header .dxbl-btn:hover, .dxbl-calendar-nav .dxbl-btn:hover, .dxbl-calendar .dxbl-btn:hover { background: var(--paper-2) !important; color: var(--accent) !important; } /* Weekday names row (pon. wt. śr. ...) */ .dxbl-calendar-weekdays, .dxbl-calendar-weekday, .dxbl-calendar-header-cell, .dxbl-calendar-view th { color: var(--ink-mute) !important; background: transparent !important; font-weight: 600; text-transform: lowercase; } /* Week numbers column (left) */ .dxbl-calendar-week-number, .dxbl-calendar-view td:first-child[class*="week"] { color: var(--ink-faint) !important; background: transparent !important; } /* Day cells */ .dxbl-calendar-day, .dxbl-calendar-cell, .dxbl-calendar-view td { color: var(--ink) !important; background: transparent !important; transition: background .15s, color .15s; } .dxbl-calendar-day:hover, .dxbl-calendar-cell:hover, .dxbl-calendar-view td:hover { background: var(--paper-2) !important; color: var(--accent) !important; } /* Other-month days (greyed) */ .dxbl-calendar-day-other-month, .dxbl-calendar-cell-other-month, .dxbl-calendar-other-month { color: var(--ink-faint) !important; } /* Today */ .dxbl-calendar-today, .dxbl-calendar-cell-today, .dxbl-calendar-day-today { color: var(--accent) !important; font-weight: 700; } /* Selected day */ .dxbl-calendar-selected, .dxbl-calendar-cell-selected, .dxbl-calendar-day-selected, .dxbl-calendar [aria-selected="true"] { background: var(--accent) !important; color: #fff !important; border-radius: var(--radius-1) !important; } /* Weekend days — slight tint (red weekends are common in Polish calendars) */ .dxbl-calendar-weekend, .dxbl-calendar-day-weekend { color: var(--err) !important; } .dxbl-calendar-weekend.dxbl-calendar-day-other-month, .dxbl-calendar-day-weekend.dxbl-calendar-day-other-month { color: color-mix(in oklch, var(--err) 50%, transparent) !important; } /* Today button at bottom — solid accent fill for high contrast */ .dxbl-calendar-footer .dxbl-btn, .dxbl-calendar-footer button, .dxbl-calendar-today-btn, .dxbl-calendar .dxbl-btn-text, .dxbl-calendar [class*="today"], button[class*="calendar-today"], button[class*="calendar-bottom"] { background: var(--accent) !important; background-color: var(--accent) !important; color: #fff !important; border: 1px solid var(--accent) !important; border-radius: var(--radius-1) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .04em !important; text-transform: uppercase !important; padding: 5px 14px !important; height: auto !important; min-height: 0 !important; box-shadow: none !important; text-decoration: none; cursor: pointer; } .dxbl-calendar-footer .dxbl-btn *, .dxbl-calendar-footer button *, .dxbl-calendar-today-btn *, .dxbl-calendar [class*="today"] * { color: #fff !important; } .dxbl-calendar-footer .dxbl-btn:hover, .dxbl-calendar-footer button:hover, .dxbl-calendar-today-btn:hover, .dxbl-calendar .dxbl-btn-text:hover, .dxbl-calendar [class*="today"]:hover, button[class*="calendar-today"]:hover, button[class*="calendar-bottom"]:hover { background: var(--accent-hov) !important; background-color: var(--accent-hov) !important; border-color: var(--accent-hov) !important; color: #fff !important; } /* ─── DxGrid column filter menu (Filter Values popup) ────────────── Real class names from devtools: .dxbl-dropdown-dialog.dxbl-grid-filter-menu-dropdown.dxbl-dropdown-scrollable └── .dxbl-dropdown-body (← the white element) Works for both light and dark — uses theme tokens. */ .dxbl-dropdown-dialog.dxbl-grid-filter-menu-dropdown, .dxbl-dropdown-dialog .dxbl-dropdown-body, .dxbl-grid-filter-menu-dropdown .dxbl-dropdown-body { background: var(--paper) !important; color: var(--ink) !important; border-color: var(--line-2) !important; } .dxbl-dropdown-dialog.dxbl-grid-filter-menu-dropdown { border: 1px solid var(--line-2) !important; border-radius: var(--radius-2) !important; box-shadow: var(--shadow-2) !important; overflow: hidden; } /* Header bar "Filter Values" inside the dialog */ .dxbl-grid-filter-menu-dropdown .dxbl-dropdown-header, .dxbl-grid-filter-menu-dropdown [class*="header"] { background: var(--paper) !important; color: var(--ink-mute) !important; border-bottom: 1px solid var(--line) !important; font-weight: 600; font-size: 12px; letter-spacing: .04em; } /* Footer (Cancel / Apply) */ .dxbl-grid-filter-menu-dropdown .dxbl-dropdown-footer { background: var(--paper) !important; border-top: 1px solid var(--line) !important; } .dxbl-grid-filter-menu-dropdown .dxbl-dropdown-footer .dxbl-btn { border-radius: var(--radius-1) !important; font-size: 11px !important; font-weight: 600 !important; padding: 5px 12px !important; height: auto !important; min-height: 0 !important; } .dxbl-grid-filter-menu-dropdown .dxbl-dropdown-footer .dxbl-btn-secondary { background: transparent !important; border: 1px solid var(--line-2) !important; color: var(--ink-soft) !important; } .dxbl-grid-filter-menu-dropdown .dxbl-dropdown-footer .dxbl-btn-secondary:hover { background: var(--paper-2) !important; color: var(--ink) !important; } .dxbl-grid-filter-menu-dropdown .dxbl-dropdown-footer .dxbl-btn-primary { background: var(--accent) !important; border: 1px solid var(--accent) !important; color: #fff !important; } .dxbl-grid-filter-menu-dropdown .dxbl-dropdown-footer .dxbl-btn-primary:hover { background: var(--accent-hov) !important; border-color: var(--accent-hov) !important; } .dxbl-grid-filter-menu-dropdown .dxbl-dropdown-footer .dxbl-btn[disabled], .dxbl-grid-filter-menu-dropdown .dxbl-dropdown-footer .dxbl-btn:disabled { opacity: 0.45 !important; } /* Search input inside filter menu */ .dxbl-grid-filter-menu-dropdown .dxbl-text-edit { background: var(--paper-2) !important; border: 1px solid var(--line-2) !important; border-radius: var(--radius-1) !important; color: var(--ink) !important; } .dxbl-grid-filter-menu-dropdown .dxbl-text-edit input { background: transparent !important; color: var(--ink) !important; } .dxbl-grid-filter-menu-dropdown .dxbl-text-edit input::placeholder { color: var(--ink-faint) !important; } .dxbl-grid-filter-menu-dropdown .dxbl-text-edit:focus-within { border-color: var(--accent) !important; } /* List items in filter menu */ .dxbl-grid-filter-menu-dropdown .dxbl-list-box-render-container li, .dxbl-grid-filter-menu-dropdown .dxbl-listbox-item { color: var(--ink) !important; background: transparent !important; } .dxbl-grid-filter-menu-dropdown .dxbl-list-box-render-container li:hover, .dxbl-grid-filter-menu-dropdown .dxbl-listbox-item:hover { background: var(--paper-2) !important; } /* Selected item in filter menu — subtle accent + left bar */ .dxbl-grid-filter-menu-dropdown .dxbl-list-box-render-container li[aria-selected="true"], .dxbl-grid-filter-menu-dropdown .dxbl-list-box-render-container li.dxbl-list-box-item-selected, .dxbl-grid-filter-menu-dropdown li[role="option"][aria-selected="true"] { background: var(--accent-soft) !important; color: var(--accent-ink) !important; box-shadow: inset 2px 0 0 var(--accent); } /* Selected row inside filter menu — soft accent tint (not full saturated). Must override the dark-mode rule above that uses `box-shadow: inset 0 0 0 9999px var(--accent)` to fully tint selected items. We kill that shadow here and use a subtle left bar. */ .dxbl-grid-filter-menu-dropdown li.dxbl-list-box-item-selected, .dxbl-grid-filter-menu-dropdown li[aria-selected="true"], .dxbl-grid-filter-menu-dropdown .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected, .dxbl-grid-filter-menu-dropdown .dxbl-scroll-viewer-content > ul > li[aria-selected="true"], .dxbl-grid-filter-menu-dropdown .dxbl-list-box-render-container li.dxbl-list-box-item-selected, .dxbl-grid-filter-menu-dropdown .dxbl-list-box-render-container li[aria-selected="true"], [data-theme="dark"] .dxbl-grid-filter-menu-dropdown li.dxbl-list-box-item-selected, [data-theme="dark"] .dxbl-grid-filter-menu-dropdown li[aria-selected="true"], [data-theme="dark"] .dxbl-grid-filter-menu-dropdown .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected, [data-theme="dark"] .dxbl-grid-filter-menu-dropdown .dxbl-scroll-viewer-content > ul > li[aria-selected="true"], [data-theme="dark"] .dxbl-grid-filter-menu-dropdown .dxbl-list-box-render-container li.dxbl-list-box-item-selected, [data-theme="dark"] .dxbl-grid-filter-menu-dropdown .dxbl-list-box-render-container li[aria-selected="true"] { background: var(--accent-soft) !important; background-color: var(--accent-soft) !important; color: var(--accent-ink) !important; box-shadow: inset 2px 0 0 var(--accent) !important; } /* Kill the * children white-text override from dark-mode block for filter menu items */ [data-theme="dark"] .dxbl-grid-filter-menu-dropdown li.dxbl-list-box-item-selected *, [data-theme="dark"] .dxbl-grid-filter-menu-dropdown li[aria-selected="true"] * { color: var(--accent-ink) !important; }