/* ============================================================ PrimeScan — Global Theme Layer Design tokens, modern AdminKit refinements, dark-mode ready, reusable component classes (kpi-card, page-header, status-pill). Loaded on top of AdminKit (light.css / dark.css). ============================================================ */ :root { /* ---------- Brand palette ---------- */ --ps-brand: #3b7ddd; --ps-brand-600: #2f66b8; --ps-brand-700: #265496; --ps-brand-soft: rgba(59, 125, 221, 0.10); --ps-success: #28a745; --ps-success-soft: rgba(40, 167, 69, 0.10); --ps-warning: #fd7e14; --ps-warning-soft: rgba(253, 126, 20, 0.10); --ps-danger: #dc3545; --ps-danger-soft: rgba(220, 53, 69, 0.10); --ps-info: #17a2b8; --ps-info-soft: rgba(23, 162, 184, 0.10); --ps-purple: #7950f2; --ps-purple-soft: rgba(121, 80, 242, 0.10); /* Severity (vulnerabilities) */ --ps-sev-critical: #b91c1c; --ps-sev-high: #ea580c; --ps-sev-medium: #d97706; --ps-sev-low: #2563eb; --ps-sev-info: #6b7280; /* ---------- Surfaces (light) ---------- */ --ps-bg: #f5f7fb; --ps-surface: #ffffff; --ps-surface-alt: #fafbfd; --ps-border: #e6eaf2; --ps-border-strong:#d4dbe8; /* ---------- Text ---------- */ --ps-text: #1f2937; --ps-text-muted: #6b7280; --ps-text-subtle: #94a3b8; /* ---------- Layout ---------- */ --ps-radius-sm: 6px; --ps-radius: 10px; --ps-radius-lg: 14px; --ps-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04); --ps-shadow-sm: 0 2px 6px rgba(15, 23, 42, .06); --ps-shadow: 0 4px 14px rgba(15, 23, 42, .08); --ps-shadow-lg: 0 10px 28px rgba(15, 23, 42, .12); --ps-transition: 180ms cubic-bezier(.2,.8,.2,1); --ps-content-pad: 1.5rem; } /* ---------- Dark mode (data-theme="dark" on or ) ---------- */ html[data-bs-theme="dark"], body[data-theme="dark"] { --ps-bg: #0f1626; --ps-surface: #161f33; --ps-surface-alt: #1b2540; --ps-border: #283250; --ps-border-strong:#34406a; --ps-text: #e6eaf5; --ps-text-muted: #9aa6c2; --ps-text-subtle: #6c7a99; --ps-brand-soft: rgba(99, 156, 245, 0.18); --ps-success-soft:rgba(52, 199, 89, 0.18); --ps-warning-soft:rgba(255, 159, 10, 0.18); --ps-danger-soft: rgba(255, 69, 58, 0.20); --ps-info-soft: rgba(64, 200,208, 0.18); --ps-shadow-xs: 0 1px 2px rgba(0, 0, 0, .35); --ps-shadow-sm: 0 2px 6px rgba(0, 0, 0, .35); --ps-shadow: 0 6px 18px rgba(0, 0, 0, .45); --ps-shadow-lg: 0 14px 36px rgba(0, 0, 0, .55); } /* ============================================================ Base polish (typography, scrollbars, focus rings) ============================================================ */ html, body { font-family: "Inter", "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 15px; line-height: 1.55; color: var(--ps-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body[data-theme="dark"] { background-color: var(--ps-bg); } h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -.015em; color: var(--ps-text); } main.content { background-color: var(--ps-bg); padding: var(--ps-content-pad); min-height: calc(100vh - 60px); transition: background-color var(--ps-transition); } /* Scrollbar */ * { scrollbar-width: thin; scrollbar-color: var(--ps-border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--ps-border-strong); border-radius: 6px; } *::-webkit-scrollbar-thumb:hover { background: var(--ps-text-subtle); } /* Focus ring */ :focus-visible { outline: 2px solid var(--ps-brand); outline-offset: 2px; border-radius: 4px; } /* ============================================================ Navbar / Sidebar polish ============================================================ */ .navbar.navbar-bg { background-color: var(--ps-surface); border-bottom: 1px solid var(--ps-border); box-shadow: var(--ps-shadow-xs); position: sticky; top: 0; z-index: 1020; backdrop-filter: saturate(180%) blur(6px); } /* ============================================================ Sidebar — принудительно светлый, чтобы не было контрастной тёмной подложки от AdminKit (дефолт у них light-with-dark-sidebar). Переписываем максимально жёстко (!important + перекрытие всех состояний), чтобы перебить минифицированные селекторы adminkit/css/light.css. ============================================================ */ .sidebar, .sidebar-content, .sidebar .sidebar-content, .sidebar-nav, .sidebar .sidebar-nav, .sidebar-dropdown { background-color: var(--ps-surface) !important; } .sidebar { border-right: 1px solid var(--ps-border) !important; box-shadow: none !important; } /* Bootstrap внутри .sidebar тоже не должен искать тёмное */ .sidebar .sidebar-brand, .sidebar .sidebar-brand:hover, .sidebar .sidebar-brand:focus { color: var(--ps-text) !important; background: transparent !important; } .sidebar .sidebar-header { color: var(--ps-text-subtle) !important; background: transparent !important; } .sidebar .sidebar-link, .sidebar .sidebar-link:focus, .sidebar a.sidebar-link { color: var(--ps-text) !important; background-color: transparent !important; transition: background-color var(--ps-transition), color var(--ps-transition); } .sidebar .sidebar-link i, .sidebar .sidebar-link [data-feather] { color: var(--ps-text-muted) !important; } .sidebar .sidebar-link:hover { background-color: rgba(15, 23, 42, .04) !important; color: var(--ps-text) !important; } .sidebar .sidebar-item.active > .sidebar-link { background: linear-gradient(90deg, rgba(59,125,221,.12), transparent) !important; color: var(--ps-brand) !important; border-left: 3px solid var(--ps-brand); padding-left: calc(1.625rem - 3px); } .sidebar .sidebar-item.active > .sidebar-link i, .sidebar .sidebar-item.active > .sidebar-link [data-feather] { color: var(--ps-brand) !important; } /* Sub-menu (collapsible) — тоже светлая, без чёрной подложки */ .sidebar-dropdown .sidebar-link { color: var(--ps-text-muted) !important; } .sidebar-dropdown .sidebar-link.active, .sidebar-dropdown .sidebar-link:hover { color: var(--ps-brand) !important; background-color: rgba(15, 23, 42, .03) !important; } /* Нижний CTA-блок (та полоска "Система активна") */ .sidebar-cta { background: transparent !important; border-top-color: var(--ps-border) !important; } .sidebar-cta * { color: var(--ps-text-muted) !important; } /* SimpleBar-скроллбар внутри sidebar — светлый */ .sidebar .simplebar-scrollbar:before { background: var(--ps-border-strong) !important; } /* Collapse arrows hidden (existing dirty selectors removed) */ .sidebar .sidebar-link[data-bs-toggle="collapse"]::before { display: none !important; } /* ============================================================ Cards (modern, subtle border, hover lift) ============================================================ */ .card { border: 1px solid var(--ps-border); border-radius: var(--ps-radius); background-color: var(--ps-surface); box-shadow: var(--ps-shadow-xs); transition: box-shadow var(--ps-transition), transform var(--ps-transition); } .card.card-hover:hover { box-shadow: var(--ps-shadow); transform: translateY(-2px); } .card .card-header { background-color: transparent; border-bottom: 1px solid var(--ps-border); font-weight: 600; color: var(--ps-text); } /* ============================================================ Page header component (used via _partials/page_header.html.twig) ============================================================ */ .ps-page-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--ps-border); } .ps-page-header__title { display: flex; align-items: center; gap: .75rem; margin: 0; font-size: 1.5rem; font-weight: 700; } .ps-page-header__icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--ps-brand-soft); color: var(--ps-brand); } .ps-page-header__icon svg { width: 20px; height: 20px; } .ps-page-header__subtitle { color: var(--ps-text-muted); font-size: .875rem; margin-top: .25rem; } .ps-page-header__actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } .ps-page-header__breadcrumb { font-size: .8125rem; color: var(--ps-text-subtle); margin-bottom: .25rem; } .ps-page-header__breadcrumb a { color: var(--ps-text-muted); text-decoration: none; } .ps-page-header__breadcrumb a:hover { color: var(--ps-brand); } .ps-page-header__breadcrumb .sep { margin: 0 .35rem; opacity: .5; } /* ============================================================ KPI cards (used by dashboard + everywhere) ============================================================ */ .ps-kpi { position: relative; padding: 1.1rem 1.25rem; border-radius: var(--ps-radius); background: var(--ps-surface); border: 1px solid var(--ps-border); box-shadow: var(--ps-shadow-xs); overflow: hidden; transition: transform var(--ps-transition), box-shadow var(--ps-transition); } .ps-kpi:hover { transform: translateY(-2px); box-shadow: var(--ps-shadow); } .ps-kpi__label { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ps-text-muted); font-weight: 600; } .ps-kpi__value { font-size: 1.85rem; font-weight: 700; line-height: 1.1; margin-top: .25rem; font-variant-numeric: tabular-nums; color: var(--ps-text); } .ps-kpi__trend { font-size: .8rem; color: var(--ps-text-muted); margin-top: .35rem; } .ps-kpi__trend.up { color: var(--ps-success); } .ps-kpi__trend.down { color: var(--ps-danger); } .ps-kpi__icon { position: absolute; top: 1rem; right: 1rem; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--ps-brand-soft); color: var(--ps-brand); } .ps-kpi__icon svg { width: 18px; height: 18px; } .ps-kpi.is-critical .ps-kpi__value { color: var(--ps-sev-critical); } .ps-kpi.is-critical .ps-kpi__icon { background: var(--ps-danger-soft); color: var(--ps-sev-critical); } .ps-kpi.is-high .ps-kpi__value { color: var(--ps-sev-high); } .ps-kpi.is-high .ps-kpi__icon { background: var(--ps-warning-soft); color: var(--ps-sev-high); } .ps-kpi.is-medium .ps-kpi__icon { background: var(--ps-warning-soft); color: var(--ps-sev-medium); } .ps-kpi.is-low .ps-kpi__icon { background: var(--ps-info-soft); color: var(--ps-sev-low); } .ps-kpi.is-success .ps-kpi__value { color: var(--ps-success); } .ps-kpi.is-success .ps-kpi__icon { background: var(--ps-success-soft); color: var(--ps-success); } .ps-kpi.is-info .ps-kpi__icon { background: var(--ps-info-soft); color: var(--ps-info); } .ps-kpi.is-purple .ps-kpi__icon { background: var(--ps-purple-soft); color: var(--ps-purple); } .ps-kpi__spark { margin-top: .5rem; height: 36px; } /* ============================================================ Status pills, severity badges ============================================================ */ .ps-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; font-size: .75rem; font-weight: 600; border-radius: 999px; background: var(--ps-brand-soft); color: var(--ps-brand); line-height: 1.2; } .ps-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 6px; } .ps-pill.is-success { background: var(--ps-success-soft); color: var(--ps-success); } .ps-pill.is-warning { background: var(--ps-warning-soft); color: var(--ps-warning); } .ps-pill.is-danger { background: var(--ps-danger-soft); color: var(--ps-danger); } .ps-pill.is-info { background: var(--ps-info-soft); color: var(--ps-info); } .ps-pill.is-muted { background: rgba(107,114,128,.12); color: var(--ps-text-muted); } .ps-pill.is-purple { background: var(--ps-purple-soft); color: var(--ps-purple); } .ps-sev { font-weight: 700; letter-spacing: .03em; padding: .15rem .5rem; border-radius: 4px; font-size: .72rem; } .ps-sev.critical { background: var(--ps-danger-soft); color: var(--ps-sev-critical); } .ps-sev.high { background: var(--ps-warning-soft); color: var(--ps-sev-high); } .ps-sev.medium { background: var(--ps-warning-soft); color: var(--ps-sev-medium); } .ps-sev.low { background: var(--ps-info-soft); color: var(--ps-sev-low); } .ps-sev.info { background: rgba(107,114,128,.15); color: var(--ps-sev-info); } /* ============================================================ Tables refinement (works with .table & datatable) ============================================================ */ .table { color: var(--ps-text); } .table > :not(caption) > * > * { border-bottom-color: var(--ps-border); } .table thead th { background-color: var(--ps-surface-alt); color: var(--ps-text-muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--ps-border); padding-top: .85rem; padding-bottom: .85rem; } .table-hover > tbody > tr { transition: background-color var(--ps-transition); } .table-hover > tbody > tr:hover > * { background-color: var(--ps-surface-alt); } table.dataTable td:empty { display: table-cell !important; } /* DataTables search input polish */ .dataTable-search input, .datatable-search input { border: 1px solid var(--ps-border); border-radius: var(--ps-radius-sm); padding: .4rem .6rem; background: var(--ps-surface); color: var(--ps-text); } .dataTable-search input:focus, .datatable-search input:focus { border-color: var(--ps-brand); outline: none; box-shadow: 0 0 0 3px var(--ps-brand-soft); } /* ============================================================ Buttons polish ============================================================ */ .btn { border-radius: var(--ps-radius-sm); font-weight: 500; transition: transform var(--ps-transition), box-shadow var(--ps-transition), background-color var(--ps-transition); } .btn:active { transform: translateY(1px); } .btn-primary { background-color: var(--ps-brand); border-color: var(--ps-brand); } .btn-primary:hover { background-color: var(--ps-brand-600); border-color: var(--ps-brand-600); } .btn-soft-primary { background: var(--ps-brand-soft); color: var(--ps-brand); border: 1px solid transparent; } .btn-soft-primary:hover { background: var(--ps-brand); color: #fff; } /* Icon button (small action in tables) */ .ps-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: var(--ps-text-muted); background: transparent; border: none; transition: background-color var(--ps-transition), color var(--ps-transition); } .ps-icon-btn:hover { background: var(--ps-surface-alt); color: var(--ps-brand); } .ps-icon-btn.is-danger:hover { color: var(--ps-danger); background: var(--ps-danger-soft); } .ps-icon-btn.is-success:hover { color: var(--ps-success); background: var(--ps-success-soft); } .ps-icon-btn svg { width: 16px; height: 16px; } /* ============================================================ Forms polish ============================================================ */ .form-control, .form-select { border: 1px solid var(--ps-border); border-radius: var(--ps-radius-sm); background-color: var(--ps-surface); color: var(--ps-text); transition: border-color var(--ps-transition), box-shadow var(--ps-transition); } .form-control:focus, .form-select:focus { border-color: var(--ps-brand); box-shadow: 0 0 0 3px var(--ps-brand-soft); } .form-label { font-weight: 500; color: var(--ps-text); margin-bottom: .35rem; } /* ============================================================ Empty / loading states ============================================================ */ .ps-empty { padding: 3rem 1rem; text-align: center; color: var(--ps-text-muted); border: 1px dashed var(--ps-border); border-radius: var(--ps-radius); background: var(--ps-surface-alt); } .ps-empty svg { width: 36px; height: 36px; opacity: .5; margin-bottom: .75rem; } .ps-empty__title { font-weight: 600; color: var(--ps-text); margin-bottom: .25rem; } .ps-skeleton { background: linear-gradient(90deg, var(--ps-border) 25%, var(--ps-surface-alt) 50%, var(--ps-border) 75%); background-size: 200% 100%; animation: ps-skeleton 1.4s ease-in-out infinite; border-radius: 6px; height: 12px; } @keyframes ps-skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ============================================================ Toasts (custom, container injected by app-ux.js) ============================================================ */ .ps-toast-stack { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 1080; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; } .ps-toast { pointer-events: auto; background: var(--ps-surface); color: var(--ps-text); border: 1px solid var(--ps-border); border-left: 4px solid var(--ps-brand); box-shadow: var(--ps-shadow); border-radius: var(--ps-radius); padding: .75rem 1rem; min-width: 240px; max-width: 360px; font-size: .9rem; display: flex; align-items: flex-start; gap: .6rem; animation: ps-toast-in 220ms ease-out; } .ps-toast.is-success { border-left-color: var(--ps-success); } .ps-toast.is-warning { border-left-color: var(--ps-warning); } .ps-toast.is-danger { border-left-color: var(--ps-danger); } .ps-toast.is-info { border-left-color: var(--ps-info); } .ps-toast .ps-toast__close { margin-left: auto; cursor: pointer; opacity: .6; background: none; border: none; color: inherit; } .ps-toast .ps-toast__close:hover { opacity: 1; } @keyframes ps-toast-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ============================================================ Theme toggle button ============================================================ */ .ps-theme-toggle { background: transparent; border: 1px solid var(--ps-border); width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--ps-text-muted); cursor: pointer; transition: all var(--ps-transition); } .ps-theme-toggle:hover { color: var(--ps-brand); border-color: var(--ps-brand); background: var(--ps-brand-soft); } .ps-theme-toggle svg { width: 16px; height: 16px; } /* ============================================================ Misc ============================================================ */ .ps-divider { height: 1px; background: var(--ps-border); margin: 1.25rem 0; border: 0; } .fw-tabular { font-variant-numeric: tabular-nums; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* Print */ @media print { .sidebar, .navbar, .ps-toast-stack, .ps-page-header__actions { display: none !important; } main.content { padding: 0; background: #fff; } }