/*! * Zenith theme for AdminLTE v4 (Bootstrap 5.3) — alk / my.sro26.ru * Подключать ПОСЛЕДНИМ, после adminlte.min.css (и вместо старого site.css). * Светлая/тёмная тема: . * Префикс собственных классов: .zn-* */ /* ============================================================ 1. Токены ============================================================ */ :root, [data-bs-theme="light"] { --zn-font-sans: "Geist Variable", "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --zn-font-mono: "Geist Mono Variable", "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --zn-bg: #ffffff; --zn-fg: #0a0a0a; --zn-card: #ffffff; --zn-muted: #f5f5f5; --zn-muted-fg: #737373; --zn-border: #e5e5e5; --zn-primary: #171717; --zn-primary-fg: #fafafa; --zn-ring: #a1a1a1; --zn-sidebar: #fafafa; --zn-sidebar-accent: #f0f0f0; --zn-hover: #f5f5f5; --zn-success: #2f9f3d; --zn-warning: #ed9a00; --zn-warning-fg: #171717; --zn-danger: #e7000b; --zn-info: #104e64; /* палитра графиков: оранжевый, бирюзовый, тёмно-синий, жёлтый, янтарный */ --zn-chart-1: #f54900; --zn-chart-2: #009689; --zn-chart-3: #104e64; --zn-chart-4: #ffb900; --zn-chart-5: #fe9a00; /* бренд sro26 (бирюзовый) — используется только там, где явно нужен .zn-brand */ --zn-brand: #009689; --zn-radius-sm: .375rem; --zn-radius: .5rem; --zn-radius-lg: .625rem; --zn-radius-card: .875rem; --zn-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05); --zn-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --zn-shadow-lg: 0 8px 24px rgb(0 0 0 / .12); --zn-header-h: 4rem; /* ---- Bootstrap 5.3 ---- */ --bs-font-sans-serif: var(--zn-font-sans); --bs-font-monospace: var(--zn-font-mono); --bs-body-font-family: var(--zn-font-sans); --bs-body-font-size: .875rem; --bs-body-line-height: 1.45; --bs-body-color: var(--zn-fg); --bs-body-color-rgb: 10, 10, 10; --bs-body-bg: var(--zn-bg); --bs-body-bg-rgb: 255, 255, 255; --bs-emphasis-color: #000; --bs-emphasis-color-rgb: 0, 0, 0; --bs-heading-color: var(--zn-fg); --bs-secondary-color: var(--zn-muted-fg); --bs-secondary-color-rgb: 115, 115, 115; --bs-secondary-bg: var(--zn-muted); --bs-secondary-bg-rgb: 245, 245, 245; --bs-tertiary-color: #a1a1a1; --bs-tertiary-bg: var(--zn-sidebar); --bs-tertiary-bg-rgb: 250, 250, 250; --bs-border-color: var(--zn-border); --bs-border-color-translucent: rgb(0 0 0 / .08); --bs-border-radius-sm: var(--zn-radius-sm); --bs-border-radius: var(--zn-radius); --bs-border-radius-lg: var(--zn-radius-lg); --bs-border-radius-xl: var(--zn-radius-card); --bs-box-shadow-sm: var(--zn-shadow-sm); --bs-box-shadow: var(--zn-shadow); --bs-box-shadow-lg: var(--zn-shadow-lg); --bs-link-color: var(--zn-fg); --bs-link-color-rgb: 10, 10, 10; --bs-link-hover-color: var(--zn-fg); --bs-link-hover-color-rgb: 10, 10, 10; --bs-code-color: var(--zn-chart-1); --bs-focus-ring-color: rgb(161 161 161 / .35); --bs-focus-ring-width: 3px; --bs-primary: var(--zn-primary); --bs-primary-rgb: 23, 23, 23; --bs-primary-text-emphasis: #0a0a0a; --bs-primary-bg-subtle: #f5f5f5; --bs-primary-border-subtle: #d4d4d4; --bs-secondary: var(--zn-muted-fg); --bs-secondary-rgb: 115, 115, 115; --bs-success: var(--zn-success); --bs-success-rgb: 47, 159, 61; --bs-success-text-emphasis: #1b6b26; --bs-success-bg-subtle: #eaf6ec; --bs-success-border-subtle: #bfe3c4; --bs-warning: var(--zn-warning); --bs-warning-rgb: 237, 154, 0; --bs-warning-text-emphasis: #8a5a00; --bs-warning-bg-subtle: #fdf4e3; --bs-warning-border-subtle: #f6d9a1; --bs-danger: var(--zn-danger); --bs-danger-rgb: 231, 0, 11; --bs-danger-text-emphasis: #a1000a; --bs-danger-bg-subtle: #fdecec; --bs-danger-border-subtle: #f7c0c2; --bs-info: var(--zn-info); --bs-info-rgb: 16, 78, 100; --bs-info-text-emphasis: #104e64; --bs-info-bg-subtle: #e8f0f3; --bs-info-border-subtle: #bcd3dc; --bs-light: #f5f5f5; --bs-light-rgb: 245, 245, 245; --bs-dark: #171717; --bs-dark-rgb: 23, 23, 23; /* ---- AdminLTE v4: сайдбар ---- */ --lte-sidebar-width: 260px; --lte-sidebar-color: var(--zn-fg); --lte-sidebar-hover-bg: var(--zn-sidebar-accent); --lte-sidebar-hover-color: var(--zn-fg); --lte-sidebar-active-color: var(--zn-fg); --lte-sidebar-menu-active-bg: var(--zn-sidebar-accent); --lte-sidebar-menu-active-color: var(--zn-fg); --lte-sidebar-submenu-bg: transparent; --lte-sidebar-submenu-color: var(--zn-muted-fg); --lte-sidebar-submenu-hover-bg: var(--zn-sidebar-accent); --lte-sidebar-submenu-hover-color: var(--zn-fg); --lte-sidebar-submenu-active-bg: var(--zn-sidebar-accent); --lte-sidebar-submenu-active-color: var(--zn-fg); --lte-sidebar-header-color: var(--zn-muted-fg); } [data-bs-theme="dark"] { color-scheme: dark; --zn-bg: #0a0a0a; --zn-fg: #fafafa; --zn-card: #141414; --zn-muted: #262626; --zn-muted-fg: #a1a1a1; --zn-border: #262626; --zn-primary: #e5e5e5; --zn-primary-fg: #171717; --zn-ring: #737373; --zn-sidebar: #0f0f0f; --zn-sidebar-accent: #1f1f1f; --zn-hover: #1c1c1c; --zn-success: #54b85b; --zn-danger: #ff6467; --zn-info: #4291b0; --zn-chart-3: #4291b0; --zn-shadow-sm: none; --zn-shadow: 0 1px 3px 0 rgb(0 0 0 / .5); --zn-shadow-lg: 0 12px 32px rgb(0 0 0 / .6); --bs-body-color-rgb: 250, 250, 250; --bs-body-bg-rgb: 10, 10, 10; --bs-emphasis-color: #fff; --bs-emphasis-color-rgb: 255, 255, 255; --bs-secondary-color-rgb: 161, 161, 161; --bs-secondary-bg-rgb: 38, 38, 38; --bs-tertiary-color: #737373; --bs-tertiary-bg-rgb: 15, 15, 15; --bs-border-color-translucent: rgb(255 255 255 / .1); --bs-link-color-rgb: 250, 250, 250; --bs-link-hover-color-rgb: 250, 250, 250; --bs-focus-ring-color: rgb(115 115 115 / .45); --bs-primary-rgb: 229, 229, 229; --bs-primary-text-emphasis: #fafafa; --bs-primary-bg-subtle: #1f1f1f; --bs-primary-border-subtle: #404040; --bs-success-rgb: 84, 184, 91; --bs-success-text-emphasis: #7fd386; --bs-success-bg-subtle: #0f2a13; --bs-success-border-subtle: #1f5a27; --bs-warning-text-emphasis: #ffc555; --bs-warning-bg-subtle: #2e2006; --bs-warning-border-subtle: #6b4700; --bs-danger-rgb: 255, 100, 103; --bs-danger-text-emphasis: #ff9a9c; --bs-danger-bg-subtle: #330a0b; --bs-danger-border-subtle: #7a1a1d; --bs-info-rgb: 66, 145, 176; --bs-info-text-emphasis: #8cc3d8; --bs-info-bg-subtle: #0c222b; --bs-info-border-subtle: #1d4c5e; --bs-light: #262626; --bs-light-rgb: 38, 38, 38; --bs-dark: #fafafa; --bs-dark-rgb: 250, 250, 250; } /* ============================================================ 2. База ============================================================ */ body { font-family: var(--zn-font-sans); background-color: var(--zn-bg); color: var(--zn-fg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv11", "ss01"; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { letter-spacing: -.02em; font-weight: 600; } a { text-underline-offset: 3px; text-decoration: none; } a:hover { text-decoration: underline; } code, kbd, pre, samp, .font-monospace, .zn-mono { font-family: var(--zn-font-mono); } .zn-mono { font-size: .8125rem; } .text-muted, .text-body-secondary { color: var(--zn-muted-fg) !important; } .zn-num, .table td, .table th { font-variant-numeric: tabular-nums; } ::selection { background: color-mix(in srgb, var(--zn-chart-1) 22%, transparent); } :focus-visible { outline: 2px solid var(--zn-ring); outline-offset: 2px; } .bi { line-height: 1; } /* ============================================================ 3. AdminLTE layout ============================================================ */ .app-wrapper { background-color: var(--zn-bg); } .bg-body-tertiary.app-wrapper, body.bg-body-tertiary { background-color: var(--zn-bg) !important; } /* --- Сайдбар --- */ .app-sidebar, .app-sidebar.bg-body-secondary, .app-sidebar.bg-body-tertiary { background-color: var(--zn-sidebar) !important; border-right: 1px solid var(--zn-border); box-shadow: none !important; font-size: .875rem; } .sidebar-brand { height: var(--zn-header-h); justify-content: flex-start; padding: 0 1rem; border-bottom: 1px solid var(--zn-border); font-size: 1rem; } .sidebar-brand .brand-link { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--zn-fg); } .sidebar-brand .brand-link .brand-image, .sidebar-brand .brand-image { float: none; width: 2rem; height: 2rem; max-height: 2rem; margin: 0; object-fit: contain; border-radius: .5rem; box-shadow: none !important; opacity: 1; } .sidebar-brand .brand-text { font-weight: 600 !important; letter-spacing: -.01em; color: var(--zn-fg); } .sidebar-brand .zn-brand-sub { display: block; font-size: .625rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--zn-muted-fg); line-height: 1.2; } .zn-logo { width: 2rem; height: 2rem; border-radius: .5rem; flex: none; display: grid; place-items: center; background: var(--zn-primary); color: var(--zn-primary-fg); font-size: 1rem; } .sidebar-wrapper { padding: .75rem .75rem 1rem; } .sidebar-wrapper > nav.mt-2 { margin-top: 0 !important; } .sidebar-menu { gap: 2px; } .sidebar-menu .nav-header { padding: 1rem .75rem .375rem; font-size: .6875rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--lte-sidebar-header-color); } .sidebar-menu .nav-item:first-child.nav-header { padding-top: .25rem; } .sidebar-menu .nav-link, .sidebar-menu > .nav-item > .nav-link { display: flex; align-items: center; gap: .75rem; min-height: 2.25rem; padding: .4375rem .75rem; margin: 0; border-radius: var(--zn-radius); color: var(--lte-sidebar-color); font-weight: 450; transition: background-color .15s, color .15s; } .sidebar-menu .nav-link .nav-icon { width: 1.125rem; margin: 0; font-size: 1.0625rem; text-align: center; flex: none; color: var(--zn-fg); opacity: .85; } .sidebar-menu .nav-link p { margin: 0; display: flex; align-items: center; flex: 1; gap: .5rem; } .sidebar-menu .nav-link:hover { background-color: var(--lte-sidebar-hover-bg); color: var(--lte-sidebar-hover-color); } .sidebar-menu > .nav-item > .nav-link.active, .sidebar-menu > .nav-item.menu-open > .nav-link.active { background-color: var(--lte-sidebar-menu-active-bg); color: var(--lte-sidebar-menu-active-color); font-weight: 600; box-shadow: none; } .sidebar-menu > .nav-item > .nav-link.active .nav-icon { opacity: 1; } .sidebar-menu .nav-link > p > .nav-badge, .sidebar-menu .nav-link .badge { margin-left: auto; min-width: 1.375rem; height: 1.25rem; padding: 0 .375rem; display: inline-grid; place-items: center; border-radius: 999px; font-size: .6875rem; font-weight: 600; background: var(--zn-border) !important; color: var(--zn-fg) !important; } .sidebar-menu .nav-arrow { margin-left: auto; font-size: .75rem; color: var(--zn-muted-fg); } .sidebar-menu .nav-treeview { padding: 2px 0 2px 1.625rem; } .sidebar-menu .nav-treeview .nav-link { min-height: 2rem; font-size: .8125rem; color: var(--lte-sidebar-submenu-color); } .sidebar-menu .nav-treeview .nav-link.active { color: var(--lte-sidebar-submenu-active-color); background: var(--lte-sidebar-submenu-active-bg); font-weight: 500; } .sidebar-menu .nav-treeview .nav-link .nav-icon { font-size: .5rem; opacity: .6; } /* нижний блок пользователя в сайдбаре */ .zn-sidebar-user { position: sticky; bottom: 0; margin: auto -.75rem -1rem; padding: .875rem 1rem; display: flex; align-items: center; gap: .75rem; border-top: 1px solid var(--zn-border); background: var(--zn-sidebar); } .zn-sidebar-user b { display: block; font-weight: 600; font-size: .875rem; } .zn-sidebar-user small { color: var(--zn-muted-fg); font-size: .75rem; } .zn-sidebar-user .btn { margin-left: auto; } .sidebar-wrapper { display: flex; flex-direction: column; } /* свёрнутый сайдбар (sidebar-mini) */ .sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .sidebar-menu .nav-link { justify-content: center; } .sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .zn-sidebar-user > div, .sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .zn-sidebar-user .btn, .sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .zn-brand-sub { display: none; } /* --- Шапка --- */ .app-header, .app-header.bg-body { min-height: var(--zn-header-h); padding-block: 0; background-color: color-mix(in srgb, var(--zn-bg) 88%, transparent) !important; backdrop-filter: saturate(1.4) blur(8px); -webkit-backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--zn-border); box-shadow: none; } .app-header > .container-fluid { gap: .75rem; padding-inline: 1.5rem; } .app-header .nav-link { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0 !important; border-radius: var(--zn-radius); color: var(--zn-fg); position: relative; transition: background-color .15s; } .app-header .nav-link:hover { background-color: var(--zn-hover); text-decoration: none; } .app-header .nav-link .bi { font-size: 1.0625rem; } .app-header .navbar-badge { position: absolute; top: .375rem; right: .4375rem; width: .5rem; height: .5rem; padding: 0; font-size: 0; border-radius: 50%; border: 1.5px solid var(--zn-bg); background: var(--zn-danger) !important; } .zn-header-sep { width: 1px; height: 1.5rem; background: var(--zn-border); } /* поиск в шапке */ .zn-search { position: relative; flex: 0 1 22.5rem; min-width: 0; } .zn-search > .bi { position: absolute; left: .75rem; top: 50%; translate: 0 -50%; color: var(--zn-muted-fg); font-size: .9375rem; pointer-events: none; } .zn-search .form-control { padding-left: 2.25rem; padding-right: 3.25rem; } .zn-search kbd { position: absolute; right: .5rem; top: 50%; translate: 0 -50%; padding: .0625rem .375rem; font-size: .6875rem; font-weight: 500; color: var(--zn-muted-fg); background: var(--zn-muted); border: 1px solid var(--zn-border); border-radius: .25rem; box-shadow: none; } /* --- Контент --- */ .app-main { padding-bottom: 3rem; } .app-content-header { padding: 1.75rem 1rem .25rem; } .app-content-header h3, .app-content-header .h3, .zn-page-title { font-size: 1.75rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; margin: 0; } .zn-page-sub { margin: .375rem 0 0; color: var(--zn-muted-fg); font-size: .9375rem; } .app-content { padding: 1.25rem 1rem 0; } .app-content > .container-fluid, .app-content-header > .container-fluid { max-width: 1440px; margin-inline: 0; } .app-footer { color: var(--zn-muted-fg); background: transparent; border-top: 1px solid var(--zn-border); font-size: .8125rem; } .app-footer a { color: var(--zn-fg); } /* хлебные крошки */ .breadcrumb { --bs-breadcrumb-divider: "›"; --bs-breadcrumb-item-padding-x: .5rem; font-size: .875rem; margin-bottom: 0; } .breadcrumb-item, .breadcrumb-item a { color: var(--zn-muted-fg); } .breadcrumb-item.active { color: var(--zn-fg); font-weight: 500; } .breadcrumb-item + .breadcrumb-item::before { color: var(--zn-muted-fg); } .app-content-header .breadcrumb a { color: var(--zn-muted-fg); } /* ============================================================ 4. Компоненты Bootstrap ============================================================ */ /* --- Карточки --- */ .card { --bs-card-bg: var(--zn-card); --bs-card-border-color: var(--zn-border); --bs-card-border-radius: var(--zn-radius-card); --bs-card-inner-border-radius: calc(var(--zn-radius-card) - 1px); --bs-card-spacer-x: 1.375rem; --bs-card-spacer-y: 1.25rem; --bs-card-cap-bg: transparent; --bs-card-cap-padding-x: 1.375rem; --bs-card-cap-padding-y: 1.25rem; box-shadow: var(--zn-shadow); } .card-header { border-bottom: 0; padding-bottom: 0; display: flex; align-items: flex-start; gap: .75rem; flex-wrap: wrap; } .card-header::after { display: none; } .card-header .card-tools { margin-left: auto; float: none; margin-right: 0; } .card-title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; margin: 0; float: none; } .card-subtitle, .zn-card-sub { display: block; margin-top: .25rem; font-size: .8125rem; color: var(--zn-muted-fg); font-weight: 400; } .card-footer { border-top: 1px solid var(--zn-border); background: transparent; } .card.card-outline { border-top-width: 1px; } .card[class*="card-"]:not(.card-outline) > .card-header { color: inherit; background: transparent; } .card-body.p-0 .table { margin-bottom: 0; } /* --- Кнопки --- */ .btn { --bs-btn-font-size: .875rem; --bs-btn-font-weight: 500; --bs-btn-padding-x: .875rem; --bs-btn-padding-y: .4375rem; --bs-btn-border-radius: var(--zn-radius); --bs-btn-focus-box-shadow: 0 0 0 3px var(--bs-focus-ring-color); display: inline-flex; align-items: center; justify-content: center; gap: .5rem; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s, opacity .15s; } .btn-sm { --bs-btn-padding-x: .625rem; --bs-btn-padding-y: .25rem; --bs-btn-font-size: .8125rem; --bs-btn-border-radius: var(--zn-radius-sm); } .btn-lg { --bs-btn-padding-x: 1.25rem; --bs-btn-padding-y: .625rem; --bs-btn-font-size: .9375rem; --bs-btn-border-radius: var(--zn-radius-lg); } .btn-primary, .btn-dark { --bs-btn-color: var(--zn-primary-fg); --bs-btn-bg: var(--zn-primary); --bs-btn-border-color: var(--zn-primary); --bs-btn-hover-color: var(--zn-primary-fg); --bs-btn-hover-bg: color-mix(in srgb, var(--zn-primary) 88%, var(--zn-bg)); --bs-btn-hover-border-color: color-mix(in srgb, var(--zn-primary) 88%, var(--zn-bg)); --bs-btn-active-color: var(--zn-primary-fg); --bs-btn-active-bg: color-mix(in srgb, var(--zn-primary) 80%, var(--zn-bg)); --bs-btn-active-border-color: color-mix(in srgb, var(--zn-primary) 80%, var(--zn-bg)); --bs-btn-disabled-color: var(--zn-primary-fg); --bs-btn-disabled-bg: var(--zn-primary); --bs-btn-disabled-border-color: var(--zn-primary); } .btn-secondary, .btn-light { --bs-btn-color: var(--zn-fg); --bs-btn-bg: var(--zn-muted); --bs-btn-border-color: var(--zn-muted); --bs-btn-hover-color: var(--zn-fg); --bs-btn-hover-bg: color-mix(in srgb, var(--zn-muted) 80%, var(--zn-fg) 8%); --bs-btn-hover-border-color: transparent; --bs-btn-active-color: var(--zn-fg); --bs-btn-active-bg: color-mix(in srgb, var(--zn-muted) 75%, var(--zn-fg) 12%); --bs-btn-active-border-color: transparent; --bs-btn-disabled-color: var(--zn-muted-fg); --bs-btn-disabled-bg: var(--zn-muted); --bs-btn-disabled-border-color: var(--zn-muted); } .btn-outline-secondary, .btn-outline-primary, .btn-outline-dark, .btn-outline-light, .btn-default { --bs-btn-color: var(--zn-fg); --bs-btn-bg: var(--zn-bg); --bs-btn-border-color: var(--zn-border); --bs-btn-hover-color: var(--zn-fg); --bs-btn-hover-bg: var(--zn-hover); --bs-btn-hover-border-color: var(--zn-border); --bs-btn-active-color: var(--zn-fg); --bs-btn-active-bg: var(--zn-muted); --bs-btn-active-border-color: var(--zn-border); --bs-btn-disabled-color: var(--zn-muted-fg); --bs-btn-disabled-bg: var(--zn-bg); --bs-btn-disabled-border-color: var(--zn-border); box-shadow: var(--zn-shadow-sm); } .btn-ghost, .btn-link { --bs-btn-color: var(--zn-fg); --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-color: var(--zn-fg); --bs-btn-hover-bg: var(--zn-hover); --bs-btn-hover-border-color: transparent; --bs-btn-active-color: var(--zn-fg); --bs-btn-active-bg: var(--zn-muted); --bs-btn-active-border-color: transparent; text-decoration: none; } .btn-danger { --bs-btn-bg: var(--zn-danger); --bs-btn-border-color: var(--zn-danger); --bs-btn-color: #fff; --bs-btn-hover-bg: color-mix(in srgb, var(--zn-danger) 88%, #000); --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: #fff; --bs-btn-active-bg: color-mix(in srgb, var(--zn-danger) 80%, #000); --bs-btn-active-color: #fff; } .btn-outline-danger { --bs-btn-color: var(--zn-danger); --bs-btn-border-color: var(--zn-border); --bs-btn-bg: var(--zn-bg); --bs-btn-hover-bg: var(--bs-danger-bg-subtle); --bs-btn-hover-color: var(--zn-danger); --bs-btn-hover-border-color: var(--bs-danger-border-subtle); --bs-btn-active-bg: var(--bs-danger-bg-subtle); --bs-btn-active-color: var(--zn-danger); } .btn-success { --bs-btn-bg: var(--zn-success); --bs-btn-border-color: var(--zn-success); --bs-btn-color: #fff; --bs-btn-hover-bg: color-mix(in srgb, var(--zn-success) 88%, #000); --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: #fff; } .btn-brand { --bs-btn-bg: var(--zn-brand); --bs-btn-border-color: var(--zn-brand); --bs-btn-color: #fff; --bs-btn-hover-bg: color-mix(in srgb, var(--zn-brand) 88%, #000); --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: #fff; --bs-btn-active-bg: color-mix(in srgb, var(--zn-brand) 80%, #000); --bs-btn-active-color: #fff; } .btn-icon { --bs-btn-padding-x: 0; width: 2.25rem; height: 2.25rem; } .btn-icon.btn-sm { width: 1.875rem; height: 1.875rem; } .btn .bi { font-size: 1em; } /* --- Формы --- */ .form-control, .form-select { min-height: 2.375rem; font-size: .875rem; color: var(--zn-fg); background-color: var(--zn-bg); border-color: var(--zn-border); border-radius: var(--zn-radius); box-shadow: var(--zn-shadow-sm); transition: border-color .15s, box-shadow .15s; } .form-control-sm, .form-select-sm { min-height: 2rem; font-size: .8125rem; border-radius: var(--zn-radius-sm); } .form-control::placeholder { color: var(--zn-muted-fg); opacity: 1; } .form-control:focus, .form-select:focus { color: var(--zn-fg); background-color: var(--zn-bg); border-color: var(--zn-ring); box-shadow: 0 0 0 3px var(--bs-focus-ring-color); } .form-control:disabled, .form-select:disabled { background-color: var(--zn-muted); opacity: .7; } .form-label, .control-label { font-size: .8125rem; font-weight: 500; margin-bottom: .375rem; } .form-text, .hint-block { font-size: .75rem; color: var(--zn-muted-fg); } .input-group-text { background: var(--zn-muted); border-color: var(--zn-border); color: var(--zn-muted-fg); font-size: .875rem; } .form-check-input { border-color: color-mix(in srgb, var(--zn-fg) 30%, transparent); background-color: var(--zn-bg); } .form-check-input:checked { background-color: var(--zn-primary); border-color: var(--zn-primary); } [data-bs-theme="dark"] .form-check-input:checked[type="checkbox"] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23171717' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); } .form-check-input:focus { border-color: var(--zn-ring); box-shadow: 0 0 0 3px var(--bs-focus-ring-color); } .form-switch .form-check-input:checked { background-color: var(--zn-primary); } /* валидация Yii2 ActiveForm */ .is-invalid, .has-error .form-control { border-color: var(--zn-danger) !important; } .invalid-feedback, .help-block-error, .has-error .help-block { color: var(--zn-danger); font-size: .75rem; } .is-valid { border-color: var(--zn-success) !important; } /* --- Таблицы --- */ .table { --bs-table-bg: transparent; --bs-table-color: var(--zn-fg); --bs-table-border-color: var(--zn-border); --bs-table-striped-bg: color-mix(in srgb, var(--zn-muted) 55%, transparent); --bs-table-hover-bg: color-mix(in srgb, var(--zn-muted) 70%, transparent); --bs-table-hover-color: var(--zn-fg); --bs-table-active-bg: var(--zn-muted); font-size: .875rem; } .table > :not(caption) > * > * { padding: .75rem 1rem; vertical-align: middle; } .table-sm > :not(caption) > * > * { padding: .5rem .75rem; } .table > thead th, .table > thead td { font-weight: 600; color: var(--zn-fg); white-space: nowrap; border-bottom-width: 1px; text-transform: none; letter-spacing: 0; } .table > thead a { color: inherit; display: inline-flex; align-items: center; gap: .375rem; } .table > thead a.asc::after, .table > thead a.desc::after { content: ""; border: 4px solid transparent; } .table > thead a.asc::after { border-bottom-color: currentColor; translate: 0 -2px; } .table > thead a.desc::after { border-top-color: currentColor; translate: 0 2px; } .table > tbody > tr:last-child > * { border-bottom-width: 0; } .table > :not(:first-child) { border-top: 1px solid var(--zn-border); } .table-bordered { border-color: var(--zn-border); } .table .zn-actions { width: 1%; white-space: nowrap; text-align: right; } .card > .table-responsive > .table, .card > .card-body.p-0 > .table-responsive > .table { margin-bottom: 0; } /* GridView Yii2: фильтры и summary */ .grid-view .summary, .zn-summary { color: var(--zn-muted-fg); font-size: .8125rem; margin-bottom: .75rem; } .grid-view .filters td { padding-block: .5rem; } .grid-view .filters .form-control { min-height: 2rem; font-size: .8125rem; } /* --- Бейджи --- */ .badge { --bs-badge-padding-x: .5rem; --bs-badge-padding-y: .25rem; --bs-badge-font-size: .75rem; --bs-badge-font-weight: 600; --bs-badge-border-radius: .375rem; letter-spacing: 0; } .text-bg-primary { color: var(--zn-primary-fg) !important; background-color: var(--zn-primary) !important; } .text-bg-secondary { color: var(--zn-fg) !important; background-color: var(--zn-muted) !important; } .text-bg-success { color: #fff !important; background-color: var(--zn-success) !important; } .text-bg-danger { color: #fff !important; background-color: var(--zn-danger) !important; } .text-bg-warning { color: var(--zn-warning-fg) !important; background-color: var(--zn-warning) !important; } .text-bg-info { color: #fff !important; background-color: var(--zn-info) !important; } .text-bg-light { color: var(--zn-fg) !important; background-color: var(--zn-muted) !important; } .text-bg-dark { color: var(--zn-primary-fg) !important; background-color: var(--zn-primary) !important; } /* мягкие бейджи для статусов/риска */ .zn-badge { display: inline-flex; align-items: center; gap: .375rem; height: 1.375rem; padding: 0 .5rem; border-radius: .375rem; font-size: .75rem; font-weight: 600; line-height: 1; white-space: nowrap; border: 1px solid transparent; } .zn-badge::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: currentColor; } .zn-badge.no-dot::before { display: none; } .zn-badge-success { color: var(--bs-success-text-emphasis); background: var(--bs-success-bg-subtle); border-color: var(--bs-success-border-subtle); } .zn-badge-warning { color: var(--bs-warning-text-emphasis); background: var(--bs-warning-bg-subtle); border-color: var(--bs-warning-border-subtle); } .zn-badge-danger { color: var(--bs-danger-text-emphasis); background: var(--bs-danger-bg-subtle); border-color: var(--bs-danger-border-subtle); } .zn-badge-info { color: var(--bs-info-text-emphasis); background: var(--bs-info-bg-subtle); border-color: var(--bs-info-border-subtle); } .zn-badge-neutral { color: var(--zn-fg); background: var(--zn-muted); border-color: var(--zn-border); } /* --- Навигация: вкладки и сегменты --- */ .nav-tabs { --bs-nav-tabs-border-color: var(--zn-border); --bs-nav-tabs-link-active-bg: transparent; --bs-nav-tabs-link-active-color: var(--zn-fg); --bs-nav-tabs-link-active-border-color: transparent transparent var(--zn-fg); gap: 1rem; } .nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; padding: .5rem .125rem; color: var(--zn-muted-fg); font-weight: 500; margin-bottom: -1px; } .nav-tabs .nav-link:hover { color: var(--zn-fg); border-color: transparent; text-decoration: none; } .nav-tabs .nav-link.active { border-bottom-color: var(--zn-fg); color: var(--zn-fg); } /* сегментный переключатель (как Revenue / Orders / Profit) */ .zn-tabs, .nav-pills { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--zn-muted); border-radius: var(--zn-radius-lg); --bs-nav-pills-border-radius: .4375rem; --bs-nav-pills-link-active-bg: var(--zn-card); --bs-nav-pills-link-active-color: var(--zn-fg); } .zn-tabs > *, .nav-pills .nav-link { display: inline-flex; align-items: center; height: 1.875rem; padding: 0 .875rem; border: 0; border-radius: .4375rem; background: transparent; font-size: .8125rem; font-weight: 500; color: var(--zn-muted-fg); text-decoration: none; transition: background-color .15s, color .15s; } .zn-tabs > *:hover, .nav-pills .nav-link:hover { color: var(--zn-fg); text-decoration: none; } .zn-tabs > .active, .zn-tabs > [aria-selected="true"], .nav-pills .nav-link.active { background: var(--zn-card); color: var(--zn-fg); box-shadow: var(--zn-shadow-sm); } /* --- Пагинация (LinkPager Yii2 bootstrap5) --- */ .pagination { --bs-pagination-color: var(--zn-fg); --bs-pagination-bg: var(--zn-bg); --bs-pagination-border-color: var(--zn-border); --bs-pagination-hover-color: var(--zn-fg); --bs-pagination-hover-bg: var(--zn-hover); --bs-pagination-hover-border-color: var(--zn-border); --bs-pagination-focus-color: var(--zn-fg); --bs-pagination-focus-bg: var(--zn-hover); --bs-pagination-focus-box-shadow: 0 0 0 3px var(--bs-focus-ring-color); --bs-pagination-active-color: var(--zn-primary-fg); --bs-pagination-active-bg: var(--zn-primary); --bs-pagination-active-border-color: var(--zn-primary); --bs-pagination-disabled-color: var(--zn-muted-fg); --bs-pagination-disabled-bg: var(--zn-bg); --bs-pagination-disabled-border-color: var(--zn-border); --bs-pagination-font-size: .875rem; --bs-pagination-padding-x: .75rem; --bs-pagination-padding-y: .4375rem; gap: .375rem; margin-bottom: 0; } .page-link { border-radius: var(--zn-radius) !important; min-width: 2.25rem; text-align: center; box-shadow: var(--zn-shadow-sm); } .page-item:not(:first-child) .page-link { margin-left: 0; } .page-link:hover { text-decoration: none; } /* --- Выпадающие меню --- */ .dropdown-menu { --bs-dropdown-bg: var(--zn-card); --bs-dropdown-border-color: var(--zn-border); --bs-dropdown-border-radius: var(--zn-radius-lg); --bs-dropdown-inner-border-radius: calc(var(--zn-radius-lg) - 1px); --bs-dropdown-box-shadow: var(--zn-shadow-lg); --bs-dropdown-padding-x: .25rem; --bs-dropdown-padding-y: .25rem; --bs-dropdown-font-size: .8125rem; --bs-dropdown-link-color: var(--zn-fg); --bs-dropdown-link-hover-color: var(--zn-fg); --bs-dropdown-link-hover-bg: var(--zn-muted); --bs-dropdown-link-active-color: var(--zn-fg); --bs-dropdown-link-active-bg: var(--zn-muted); --bs-dropdown-item-padding-x: .625rem; --bs-dropdown-item-padding-y: .5rem; --bs-dropdown-item-border-radius: .375rem; --bs-dropdown-divider-bg: var(--zn-border); --bs-dropdown-header-color: var(--zn-muted-fg); box-shadow: var(--bs-dropdown-box-shadow); } .dropdown-item { display: flex; align-items: center; gap: .5rem; border-radius: var(--bs-dropdown-item-border-radius); } .dropdown-item:hover { text-decoration: none; } .dropdown-item.text-danger:hover { background: var(--bs-danger-bg-subtle); } .dropdown-header { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; } /* --- Модальные окна, оффканвас, тосты --- */ .modal { --bs-modal-bg: var(--zn-card); --bs-modal-border-color: var(--zn-border); --bs-modal-border-radius: var(--zn-radius-card); --bs-modal-inner-border-radius: calc(var(--zn-radius-card) - 1px); --bs-modal-box-shadow: 0 20px 50px rgb(0 0 0 / .25); --bs-modal-header-border-width: 0; --bs-modal-footer-border-width: 0; --bs-modal-padding: 1.5rem; --bs-modal-header-padding: 1.5rem 1.5rem 0; } .modal-title { font-size: 1.125rem; font-weight: 600; } .modal-footer { padding: 0 1.5rem 1.5rem; gap: .5rem; } .modal-footer > * { margin: 0; } .modal-backdrop { --bs-backdrop-bg: #000; --bs-backdrop-opacity: .4; } .offcanvas { --bs-offcanvas-bg: var(--zn-card); --bs-offcanvas-border-color: var(--zn-border); } .toast { --bs-toast-bg: var(--zn-primary); --bs-toast-color: var(--zn-primary-fg); --bs-toast-border-color: transparent; --bs-toast-border-radius: var(--zn-radius-lg); --bs-toast-box-shadow: var(--zn-shadow-lg); --bs-toast-font-size: .875rem; --bs-toast-header-bg: transparent; --bs-toast-header-color: var(--zn-primary-fg); } /* --- Алерты (Yii::$app->session->setFlash) --- */ .alert { --bs-alert-border-radius: var(--zn-radius-lg); --bs-alert-padding-x: 1rem; --bs-alert-padding-y: .75rem; font-size: .875rem; display: flex; gap: .625rem; align-items: flex-start; } .alert .btn-close { margin-left: auto; position: static; padding: .25rem; } .alert.alert-dismissible { padding-right: 1rem; } .alert-secondary, .alert-light { --bs-alert-color: var(--zn-fg); --bs-alert-bg: var(--zn-muted); --bs-alert-border-color: var(--zn-border); } /* --- Прогресс --- */ .progress, .progress-stacked { --bs-progress-height: .5rem; --bs-progress-bg: var(--zn-muted); --bs-progress-border-radius: 999px; --bs-progress-bar-bg: var(--zn-chart-1); --bs-progress-bar-transition: width .5s ease-out; } .progress-sm { --bs-progress-height: .375rem; } /* --- Прочее --- */ .list-group { --bs-list-group-bg: var(--zn-card); --bs-list-group-border-color: var(--zn-border); --bs-list-group-action-hover-bg: var(--zn-hover); --bs-list-group-active-bg: var(--zn-primary); --bs-list-group-active-border-color: var(--zn-primary); --bs-list-group-active-color: var(--zn-primary-fg); --bs-list-group-border-radius: var(--zn-radius-lg); } .accordion { --bs-accordion-bg: var(--zn-card); --bs-accordion-border-color: var(--zn-border); --bs-accordion-active-bg: var(--zn-muted); --bs-accordion-active-color: var(--zn-fg); --bs-accordion-btn-focus-box-shadow: 0 0 0 3px var(--bs-focus-ring-color); --bs-accordion-border-radius: var(--zn-radius-lg); } .tooltip { --bs-tooltip-bg: var(--zn-primary); --bs-tooltip-color: var(--zn-primary-fg); --bs-tooltip-font-size: .75rem; --bs-tooltip-border-radius: .375rem; } .popover { --bs-popover-bg: var(--zn-card); --bs-popover-border-color: var(--zn-border); --bs-popover-border-radius: var(--zn-radius-lg); --bs-popover-box-shadow: var(--zn-shadow-lg); --bs-popover-header-bg: transparent; } hr { border-color: var(--zn-border); opacity: 1; } .border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--zn-border) !important; } .shadow-sm { box-shadow: var(--zn-shadow-sm) !important; } .shadow { box-shadow: var(--zn-shadow) !important; } .detail-view th, table.detail-view th { width: 30%; color: var(--zn-muted-fg); font-weight: 500; } /* ============================================================ 5. AdminLTE-виджеты (small-box / info-box) в стиле Zenith ============================================================ */ .small-box { border-radius: var(--zn-radius-card); border: 1px solid var(--zn-border); box-shadow: var(--zn-shadow); background: var(--zn-card) !important; color: var(--zn-fg) !important; } .small-box > .inner { padding: 1.25rem; } .small-box .h3, .small-box h3 { font-size: 1.625rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: .25rem; color: var(--zn-fg); } .small-box p { color: var(--zn-muted-fg); font-size: .8125rem; font-weight: 500; } .small-box .small-box-icon { width: 2.5rem; height: 2.5rem; top: 1.25rem; right: 1.25rem; opacity: 1; border-radius: .625rem; padding: .5rem; fill: currentColor; color: var(--zn-muted-fg); background: var(--zn-muted); transform: none !important; } .small-box > .small-box-footer { background: transparent; color: var(--zn-muted-fg) !important; border-top: 1px solid var(--zn-border); padding: .5rem 1.25rem; text-align: left; font-size: .8125rem; } .small-box > .small-box-footer:hover { color: var(--zn-fg) !important; background: var(--zn-hover); } .info-box { border-radius: var(--zn-radius-card); border: 1px solid var(--zn-border); box-shadow: var(--zn-shadow); background: var(--zn-card); padding: 1rem; gap: .875rem; min-height: 0; } .info-box .info-box-icon { width: 2.75rem; height: 2.75rem; border-radius: .625rem; font-size: 1.25rem; } .info-box .info-box-icon[class*="text-bg-"] { background-color: color-mix(in srgb, var(--zn-chart-2) 14%, transparent) !important; color: var(--zn-chart-2) !important; } .info-box .info-box-text { color: var(--zn-muted-fg); font-size: .8125rem; font-weight: 500; text-transform: none; } .info-box .info-box-number { font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; } /* ============================================================ 6. Собственные компоненты Zenith (.zn-*) ============================================================ */ /* заголовок страницы с действиями справа */ .zn-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } /* карточка-показатель с мини-графиком */ .zn-stat { position: relative; overflow: hidden; display: flex; flex-direction: column; height: 100%; } .zn-stat .zn-stat-body { padding: 1.25rem 1.25rem 0; display: grid; grid-template-columns: 1fr auto; gap: .25rem .75rem; } .zn-stat .zn-stat-label { font-size: .8125rem; font-weight: 500; color: var(--zn-muted-fg); } .zn-stat .zn-stat-value { font-size: 1.625rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; } .zn-stat .zn-chip { grid-row: 1 / 3; grid-column: 2; } .zn-stat .zn-stat-delta { grid-column: 1 / 3; display: flex; align-items: center; gap: .375rem; margin-top: .25rem; font-size: .8125rem; color: var(--zn-muted-fg); } .zn-stat .zn-stat-spark { position: relative; height: 4rem; margin-top: .75rem; } .zn-stat .zn-stat-spark canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; } .zn-stat.zn-compact .zn-stat-body { padding-bottom: 1.125rem; } .zn-up { color: var(--zn-success); font-weight: 600; display: inline-flex; align-items: center; gap: .25rem; } .zn-down { color: var(--zn-danger); font-weight: 600; display: inline-flex; align-items: center; gap: .25rem; } /* цветная «плашка» под иконку: .zn-chip.zn-c1 … .zn-c5 */ .zn-chip { width: 2.5rem; height: 2.5rem; border-radius: .625rem; flex: none; display: grid; place-items: center; font-size: 1.125rem; color: var(--zn-c, var(--zn-fg)); background: color-mix(in srgb, var(--zn-c, var(--zn-fg)) 13%, transparent); } .zn-c1 { --zn-c: var(--zn-chart-1); } .zn-c2 { --zn-c: var(--zn-chart-2); } .zn-c3 { --zn-c: var(--zn-chart-3); } .zn-c4 { --zn-c: var(--zn-chart-4); } .zn-c5 { --zn-c: var(--zn-chart-5); } .zn-cs { --zn-c: var(--zn-success); } .zn-cw { --zn-c: var(--zn-warning); } .zn-cd { --zn-c: var(--zn-danger); } /* аватар с инициалами */ .zn-avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: .75rem; font-weight: 600; background: var(--zn-primary); color: var(--zn-primary-fg); } .zn-avatar.zn-soft { background: var(--zn-muted); color: var(--zn-fg); } .zn-avatar.zn-sm { width: 2rem; height: 2rem; font-size: .6875rem; } .zn-avatar.zn-square { border-radius: .5rem; } /* «кто» — аватар + имя + подпись (для таблиц) */ .zn-who { display: flex; align-items: center; gap: .625rem; min-width: 0; } .zn-who b, .zn-who strong { display: block; font-weight: 500; } .zn-who small { display: block; color: var(--zn-muted-fg); font-size: .75rem; } /* строка прогресса цели */ .zn-goal + .zn-goal { margin-top: 1.25rem; } .zn-goal .zn-goal-row { display: flex; justify-content: space-between; gap: .5rem; font-size: .875rem; } .zn-goal .zn-goal-row:first-child { font-weight: 500; } .zn-goal .zn-goal-row.zn-sub { color: var(--zn-muted-fg); font-size: .8125rem; } .zn-goal .progress { margin-block: .5rem; } /* легенда графика */ .zn-legend { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem .625rem; align-items: center; } .zn-legend i { width: .625rem; height: .625rem; border-radius: 50%; background: var(--zn-c); } .zn-legend span { color: var(--zn-muted-fg); } .zn-legend b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; } /* контейнер под Chart.js — задаёт высоту */ .zn-chart { position: relative; height: 20rem; } .zn-chart-sm { position: relative; height: 12rem; } .zn-donut { position: relative; width: 11.25rem; height: 11.25rem; flex: none; } .zn-donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; } .zn-donut-center b { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; } .zn-donut-center small { color: var(--zn-muted-fg); font-size: .75rem; } /* пары «метка — значение» (карточка члена СРО, реквизиты) */ .zn-dl { display: grid; grid-template-columns: minmax(8rem, 35%) 1fr; gap: .625rem 1rem; margin: 0; font-size: .875rem; } .zn-dl dt { color: var(--zn-muted-fg); font-weight: 400; } .zn-dl dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; } /* пустое состояние */ .zn-empty { padding: 3rem 1rem; text-align: center; color: var(--zn-muted-fg); } .zn-empty .bi { font-size: 2rem; display: block; margin-bottom: .5rem; opacity: .6; } /* панель инструментов над таблицей */ .zn-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; } .zn-toolbar .zn-search { flex: 0 1 24rem; } .zn-toolbar .zn-search .form-control { padding-right: .75rem; } /* индикатор уровня риска (Checko) */ .zn-risk { display: inline-flex; gap: 3px; vertical-align: middle; } .zn-risk i { width: .375rem; height: .875rem; border-radius: 2px; background: var(--zn-border); } .zn-risk[data-level="1"] i:nth-child(-n+1) { background: var(--zn-success); } .zn-risk[data-level="2"] i:nth-child(-n+2) { background: var(--zn-warning); } .zn-risk[data-level="3"] i:nth-child(-n+3) { background: var(--zn-danger); } /* ============================================================ 7. Адаптив и доступность ============================================================ */ @media (max-width: 991.98px) { .app-header > .container-fluid { padding-inline: 1rem; } .app-content-header { padding: 1.25rem .25rem .25rem; } .app-content { padding-inline: .25rem; } } @media (max-width: 575.98px) { .zn-search, .zn-header-sep, .zn-hide-xs { display: none !important; } .app-content-header h3, .zn-page-title { font-size: 1.5rem; } .card { --bs-card-spacer-x: 1rem; --bs-card-cap-padding-x: 1rem; } .zn-dl { grid-template-columns: 1fr; gap: .125rem; } .zn-dl dd { margin-bottom: .5rem; } .zn-chart { height: 16rem; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }