/* * TKO Design Tokens – theme-aware CSS custom properties. * Light mode = defaults on :root; dark mode = :root.dark overrides. * Filament 3 adds/removes the .dark class on (= :root). */ /* ── Light ─────────────────────────────────────────────── */ :root { /* Surfaces */ --tko-panel-bg: rgba(255, 255, 255, 0.96); --tko-panel-border: rgba(0, 0, 0, 0.09); --tko-panel-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); --tko-card-bg: #f8fafc; --tko-card-border: rgba(0, 0, 0, 0.08); --tko-input-bg: #f1f5f9; --tko-input-border: rgba(100, 116, 139, 0.45); --tko-input-color: #0f172a; /* Text */ --tko-text-primary: #0f172a; --tko-text-secondary: #475569; --tko-text-muted: #94a3b8; /* Table */ --tko-table-head-bg: #f1f5f9; --tko-table-row-bg: #ffffff; --tko-table-row-alt: #f8fafc; --tko-table-row-hover: #f1f5f9; --tko-table-border: rgba(0, 0, 0, 0.08); --tko-table-text: #1e293b; /* Chips / pills */ --tko-chip-bg: rgba(0, 0, 0, 0.06); --tko-chip-bg-hover: rgba(0, 0, 0, 0.10); --tko-chip-border: rgba(0, 0, 0, 0.12); --tko-chip-text: #475569; --tko-chip-active-bg: rgba(245, 158, 11, 0.12); --tko-chip-active-border: rgba(245, 158, 11, 0.45); --tko-chip-active-text: #92400e; /* Modal / overlay */ --tko-modal-backdrop: rgba(0, 0, 0, 0.50); --tko-modal-bg: rgba(255, 255, 255, 0.98); --tko-modal-border: rgba(0, 0, 0, 0.10); --tko-modal-shadow: 0 24px 64px rgba(0, 0, 0, 0.20); /* Misc */ --tko-search-bg: #ffffff; --tko-search-border: rgba(0, 0, 0, 0.12); --tko-scroll-thumb: rgba(0, 0, 0, 0.18); } /* ── Dark ───────────────────────────────────────────────── */ :root.dark { --tko-panel-bg: rgba(24, 24, 27, 0.72); --tko-panel-border: rgba(148, 163, 184, 0.22); --tko-panel-shadow: 0 14px 36px rgba(0, 0, 0, 0.24); --tko-card-bg: #19191c; --tko-card-border: rgba(255, 255, 255, 0.08); --tko-input-bg: #111217; --tko-input-border: rgba(148, 163, 184, 0.28); --tko-input-color: #f4f4f5; --tko-text-primary: #ffffff; --tko-text-secondary: #a1a1aa; --tko-text-muted: #71717a; --tko-table-head-bg: rgba(17, 17, 19, 0.82); --tko-table-row-bg: rgba(22, 22, 26, 0.65); --tko-table-row-alt: rgba(17, 17, 19, 0.45); --tko-table-row-hover: rgba(30, 30, 36, 0.90); --tko-table-border: rgba(255, 255, 255, 0.06); --tko-table-text: #f8fafc; --tko-chip-bg: rgba(255, 255, 255, 0.06); --tko-chip-bg-hover: rgba(255, 255, 255, 0.10); --tko-chip-border: rgba(255, 255, 255, 0.10); --tko-chip-text: #94a3b8; --tko-chip-active-bg: rgba(245, 158, 11, 0.16); --tko-chip-active-border: rgba(245, 158, 11, 0.45); --tko-chip-active-text: #997b00; --tko-modal-backdrop: rgba(0, 0, 0, 0.72); --tko-modal-bg: rgba(17, 17, 19, 0.98); --tko-modal-border: rgba(255, 255, 255, 0.10); --tko-modal-shadow: 0 24px 64px rgba(0, 0, 0, 0.48); --tko-search-bg: #111217; --tko-search-border: rgba(148, 163, 184, 0.28); --tko-scroll-thumb: rgba(255, 255, 255, 0.12); } /* ── Air Datepicker – dark theme ───────────────────────────── */ :root.dark .air-datepicker { --adp-background-color: #1c1c1f; --adp-background-color-hover: #28282d; --adp-background-color-active: #2f2f36; --adp-background-color-in-range: rgba(245,158,11,.18); --adp-background-color-in-range-focused: rgba(245,158,11,.28); --adp-background-color-selected-other-month-focused: #f59e0b; --adp-background-color-selected-other-month: rgba(245,158,11,.6); --adp-color: #e5e7eb; --adp-color-secondary: #94a3b8; --adp-accent-color: #f59e0b; --adp-color-current-date: #f59e0b; --adp-color-disabled: #4b5563; --adp-color-disabled-in-range: #6b7280; --adp-color-selected-other-month: #fff; --adp-border-color: rgba(255,255,255,.12); --adp-border-color-inner: rgba(255,255,255,.08); --adp-nav-arrow-color: #94a3b8; --adp-nav-arrow-color-hover: #f59e0b; --adp-day-name-color: rgba(255,255,255,.36); --adp-day-name-color-hover: #f59e0b; --adp-border-radius: 12px; --adp-cell-border-radius: 8px; --adp-buttons-border-top: rgba(255,255,255,.08); --adp-box-shadow: 0 16px 48px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.06); } /* ── Air Datepicker – light theme adjustments ─────────────── */ :root:not(.dark) .air-datepicker { --adp-accent-color: #f59e0b; --adp-color-current-date: #b45309; --adp-nav-arrow-color-hover: #f59e0b; --adp-day-name-color-hover: #f59e0b; --adp-border-radius: 12px; --adp-cell-border-radius: 8px; --adp-box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.06); } /* Fix z-index so calendar appears above Filament modals */ .air-datepicker-global-container { z-index: 9999 !important; } /* Шапка «Инфопанель» выровнена по той же 2-колоночной сетке, что и виджеты ниже: заголовок — над левым виджетом («Статусы площадок»), дата и кнопки — над правым («Состояние контейнерных площадок»). */ .tko-dashboard-page .fi-header { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; column-gap: 1.5rem; } .tko-dashboard-page .fi-header > div:first-child { grid-column: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 100%; } .tko-dashboard-page .fi-header-heading { font-size: 4.875rem; } .tko-dashboard-page .fi-header-actions-ctn { grid-column: 2; display: flex; } .tko-dashboard-page .fi-header-actions-ctn .fi-ac { width: 100%; } /* Инфопанель: объединить «Внешняя ссылка» / «Срез из базы» / «Графики» в единую визуальную панель. «Графики» сверху, «Внешняя ссылка» — сразу под ней, «Срез из базы» — слева во всю высоту. Кнопки различаем по тегу: Action без url() рендерится как