/* VoltNodes — тёмная минималистичная тема (Vercel/Linear-style). Этап 1: дизайн-система (переменные, типографика, база) + переопределение базовых Metronic/Bootstrap компонентов (карточки, кнопки, таблицы, формы, топбар/сайдбар) в тёмных тонах. Подключается ПОСЛЕДНИМ файлом в , после voltnodes-theme.css — чтобы переопределять старые Metronic-стили, не трогая сами шаблоны/разметку. */ :root { --vn-bg: #0a0a0c; --vn-bg-elevated: #121214; --vn-bg-card: #17171a; --vn-bg-hover: #1e1e21; --vn-border: #26262a; --vn-border-soft: #1c1c1f; --vn-text: #ededf0; /* Чуть светлее приглушённого текста/иконок (пункты меню, подписи) — были заметно тусклыми на почти чёрном фоне сайдбара. */ --vn-text-muted: #d6e0da; --vn-text-faint: #a9b6b0; /* Акцент синхронизирован с зелёной палитой voltnodes-theme.css (--vn-primary/-dark/-light/-soft) — раньше здесь были синие тона от исходного шаблона тёмной темы, из-за чего часть элементов (капсула баланса в топбаре, ссылки, активные пункты сайдбара, фокус-рамки) оставалась синей на фоне зелёного бренда панели. */ --vn-accent: #22c55e; --vn-accent-hover: #4ade80; --vn-accent-soft: rgba(34, 197, 94, .12); --vn-success: #3fd68a; --vn-warning: #f2b84b; --vn-danger: #f2555a; --vn-radius: 10px; --vn-radius-sm: 6px; /* Та же шкала теней/переходов, что и в voltnodes-theme.css (--vn-shadow-sm/md/lg, --vn-focus-ring, --vn-ease) — здесь переопределяем под более "плоскую" Vercel/Linear-эстетику этой темы (мельче offset, меньше blur), но по тому же механизму переопределения :root, что и остальные --vn-* токены. */ --vn-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.3); --vn-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); --vn-shadow-md: var(--vn-shadow); --vn-shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.45); --vn-ease: cubic-bezier(.2,.7,.3,1); --vn-focus-ring: 0 0 0 3px var(--vn-accent-soft); --vn-font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } a:focus-visible, button:focus-visible, .btn:focus-visible, .form-control:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{ outline: 2px solid var(--vn-accent-hover) !important; outline-offset: 2px; } body { background-color: var(--vn-bg) !important; color: var(--vn-text) !important; font-family: var(--vn-font) !important; } a { color: var(--vn-accent); } a:hover, a:focus { color: var(--vn-accent-hover); } /* Топбар */ #kt_header, .header { background-color: var(--vn-bg-elevated) !important; border-bottom: 1px solid var(--vn-border) !important; box-shadow: none !important; } /* Клиентский сайдбар-меню (vn-nav-*) и мобильное меню админки */ .vn-header-menu, .vn-nav { background-color: transparent; } .vn-nav-link, .vn-nav-toggle { color: var(--vn-text-muted) !important; } .vn-nav-link:hover, .vn-nav-toggle:hover, .vn-nav-item.vn-active > .vn-nav-link, .vn-nav-item.vn-here > .vn-nav-link { color: var(--vn-text) !important; background-color: var(--vn-bg-hover) !important; border-radius: var(--vn-radius-sm); } .vn-nav-sub { background-color: var(--vn-bg-card) !important; border: 1px solid var(--vn-border); border-radius: var(--vn-radius); } .vn-nav-sublink { color: var(--vn-text-muted) !important; } .vn-nav-sublink:hover { color: var(--vn-text) !important; } /* Реальный вертикальный админ-сайдбар (#kt_aside_menu, Metronic-классы) */ #kt_aside, .aside { background-color: var(--vn-bg-elevated) !important; border-right: 1px solid var(--vn-border) !important; } .aside-menu .menu-nav > .menu-item > .menu-link { color: var(--vn-text-muted) !important; border-radius: var(--vn-radius-sm); } .aside-menu .menu-nav > .menu-item > .menu-link:hover, .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link, .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link, .aside-menu .menu-nav > .menu-item.menu-item-hover > .menu-link { color: var(--vn-text) !important; background-color: var(--vn-bg-hover) !important; } .aside-menu .menu-nav .menu-submenu .menu-link { color: var(--vn-text-faint) !important; } .aside-menu .menu-nav .menu-submenu .menu-link:hover { color: var(--vn-text) !important; } .aside-menu .menu-nav .menu-item .menu-icon, .aside-menu .menu-nav .menu-item .menu-bullet.menu-bullet-dot span { color: var(--vn-text-faint) !important; } /* Карточки */ .card, .card-custom { background-color: var(--vn-bg-card) !important; border: 1px solid var(--vn-border) !important; border-radius: var(--vn-radius) !important; box-shadow: var(--vn-shadow) !important; } .card-header { background-color: transparent !important; border-bottom: 1px solid var(--vn-border-soft) !important; color: var(--vn-text) !important; } .card-title, .card-body, .card-footer { color: var(--vn-text) !important; } .card-footer { background-color: transparent !important; border-top: 1px solid var(--vn-border-soft) !important; } /* Текстовые утилиты Bootstrap, которые Metronic красит в тёмное на светлом фоне */ .text-dark, .text-dark-75, .text-dark-50 { color: var(--vn-text) !important; } .text-muted { color: var(--vn-text-muted) !important; } .bg-white, .bg-light { background-color: var(--vn-bg-card) !important; } /* Кнопки */ .btn.btn-primary { background-color: var(--vn-accent) !important; border-color: var(--vn-accent) !important; color: #0a0a0c !important; border-radius: var(--vn-radius-sm) !important; } .btn.btn-primary:hover { background-color: var(--vn-accent-hover) !important; border-color: var(--vn-accent-hover) !important; } .btn.btn-light, .btn.btn-secondary { background-color: var(--vn-bg-hover) !important; border-color: var(--vn-border) !important; color: var(--vn-text) !important; border-radius: var(--vn-radius-sm) !important; } .btn.btn-light:hover, .btn.btn-secondary:hover { background-color: var(--vn-border) !important; } .btn.btn-success { background-color: var(--vn-success) !important; border-color: var(--vn-success) !important; color: #0a0a0c !important; } .btn.btn-danger { background-color: var(--vn-danger) !important; border-color: var(--vn-danger) !important; } .btn.btn-warning { background-color: var(--vn-warning) !important; border-color: var(--vn-warning) !important; color: #0a0a0c !important; } .btn { border-radius: var(--vn-radius-sm) !important; } /* Формы */ .form-control, .custom-select, select.form-control { background-color: var(--vn-bg-elevated) !important; border: 1px solid var(--vn-border) !important; color: var(--vn-text) !important; border-radius: var(--vn-radius-sm) !important; } .form-control:focus, .custom-select:focus { background-color: var(--vn-bg-elevated) !important; border-color: var(--vn-accent) !important; box-shadow: 0 0 0 2px var(--vn-accent-soft) !important; color: var(--vn-text) !important; } .form-control::placeholder { color: var(--vn-text-faint) !important; } label, .form-label { color: var(--vn-text-muted) !important; } /* Таблицы */ .table { color: var(--vn-text) !important; } .table thead th { color: var(--vn-text-faint) !important; border-bottom: 1px solid var(--vn-border) !important; background-color: transparent !important; font-weight: 600; } .table td, .table th { border-top: 1px solid var(--vn-border-soft) !important; } .table-hover tbody tr:hover { background-color: var(--vn-bg-hover) !important; } .table.table-separate tr { background-color: var(--vn-bg-card) !important; } /* Модалки, дропдауны, тултипы */ .modal-content { background-color: var(--vn-bg-card) !important; border: 1px solid var(--vn-border) !important; color: var(--vn-text) !important; } .modal-header, .modal-footer { border-color: var(--vn-border-soft) !important; } .dropdown-menu { background-color: var(--vn-bg-card) !important; border: 1px solid var(--vn-border) !important; box-shadow: var(--vn-shadow) !important; } .dropdown-item { color: var(--vn-text-muted) !important; } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--vn-bg-hover) !important; color: var(--vn-text) !important; } /* Бейджи/лейблы */ .label, .badge { border-radius: var(--vn-radius-sm) !important; } /* Подвал */ .footer, #kt_footer { background-color: var(--vn-bg-elevated) !important; border-top: 1px solid var(--vn-border) !important; } /* Скроллбар в духе тёмных IDE-интерфейсов */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--vn-bg); } ::-webkit-scrollbar-thumb { background: var(--vn-border); border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: var(--vn-text-faint); } /* ========================================================================== Этап 2 — навигация и топбар: доводка отступов, скруглений, состояний ========================================================================== */ /* Топбар: капсулы-кнопки (баланс, молнии, колокольчик) в духе Linear */ #kt_header .topbar .btn.btn-light-primary, #kt_header .topbar .btn.btn-light-warning { background-color: var(--vn-bg-hover) !important; border: 1px solid var(--vn-border) !important; color: var(--vn-text) !important; border-radius: 999px !important; transition: background-color .15s ease, border-color .15s ease; } #kt_header .topbar .btn.btn-light-primary:hover { background-color: var(--vn-accent-soft) !important; border-color: var(--vn-accent) !important; } #kt_header .topbar .btn.btn-light-primary svg path, #kt_header .topbar .btn.btn-light-primary svg rect, #kt_header .topbar .btn.btn-light-primary svg circle { fill: var(--vn-accent) !important; } /* Первый в иконках Keenthemes — невидимая подложка-канва (без fill в разметке), не часть самой иконки. Общее правило выше красит и её тоже сплошным акцентным цветом — она рисуется ПЕРВОЙ (т.е. под остальными фигурами), но фигура кошелька не перекрывает всю область 24×24, поэтому в топбаре вместо значка кошелька был виден просто закрашенный зелёный квадрат. Возвращаем этой подложке fill:none, чтобы был виден сам SVG-значок, а не квадрат под ним. */ #kt_header .topbar .btn.btn-light-primary svg rect:first-child { fill: none !important; } #kt_header .topbar .btn.btn-light-warning { color: var(--vn-warning) !important; } .vn-cart-link.btn-icon { background-color: var(--vn-bg-hover) !important; border: 1px solid var(--vn-border) !important; color: var(--vn-text-muted) !important; border-radius: 999px !important; transition: background-color .15s ease, color .15s ease; } .vn-cart-link.btn-icon:hover { color: var(--vn-text) !important; border-color: var(--vn-accent) !important; } .vn-cart-badge { background-color: var(--vn-danger) !important; border: 2px solid var(--vn-bg-elevated) !important; } /* Виджет "онлайн" и ссылка "Контакты" в меню */ .vn-online-widget { color: var(--vn-text-faint) !important; background-color: var(--vn-bg-hover); border: 1px solid var(--vn-border-soft); border-radius: 999px; padding: 4px 12px; } .vn-online-dot { background-color: var(--vn-success) !important; box-shadow: 0 0 0 3px var(--vn-accent-soft); } .vn-contacts-link { color: var(--vn-text-muted) !important; border-radius: var(--vn-radius-sm); transition: color .15s ease, background-color .15s ease; } .vn-contacts-link:hover { color: var(--vn-text) !important; background-color: var(--vn-bg-hover) !important; } /* Пункты меню — плавные переходы, аккуратные скругления, "стрелка" разворота */ .vn-nav-link, .vn-nav-toggle { transition: color .15s ease, background-color .15s ease; padding-top: 10px !important; padding-bottom: 10px !important; } .vn-nav-arrow { color: var(--vn-text-faint) !important; transition: transform .2s ease; } .vn-nav-item.vn-open > .vn-nav-toggle .vn-nav-arrow { color: var(--vn-accent) !important; } .vn-nav-icon i { color: inherit !important; opacity: .85; } .vn-nav-item.vn-active > .vn-nav-link .vn-nav-icon i, .vn-nav-item.vn-here > .vn-nav-link .vn-nav-icon i { color: var(--vn-accent) !important; opacity: 1; } .vn-nav-subitem.vn-here > .vn-nav-sublink { color: var(--vn-accent) !important; } .vn-nav-sub { padding: 6px; } .vn-nav-sublink { border-radius: var(--vn-radius-sm); padding: 8px 12px !important; transition: color .15s ease, background-color .15s ease; } .vn-nav-sublink:hover { background-color: var(--vn-bg-hover) !important; } /* Колокольчик — выпадающий список уведомлений */ .vn-bell-dropdown { background-color: var(--vn-bg-card) !important; border: 1px solid var(--vn-border) !important; border-radius: var(--vn-radius) !important; box-shadow: var(--vn-shadow) !important; } .vn-bell-dropdown-header { color: var(--vn-text) !important; border-bottom: 1px solid var(--vn-border-soft) !important; } .vn-bell-dropdown-header a { color: var(--vn-accent) !important; } .vn-bell-empty { color: var(--vn-text-faint) !important; } /* Логотип-контейнер топбара — убираем светлую подложку, если есть */ #kt_header, #kt_header_mobile { transition: background-color .2s ease; } #kt_header_mobile { background-color: var(--vn-bg-elevated) !important; border-bottom: 1px solid var(--vn-border) !important; } /* По стоковому правилу Metronic (.header-mobile-fixed .topbar, style.bundle.css, max-width:991.98px) .topbar (баланс/молнии/корзина/ колокольчик/профиль) всегда position:fixed;top:0;left:0;right:0 и виден. По умолчанию прячем его на мобильных/планшетных ширинах и показываем только по клику на вторую кнопку шапки (класс topbar-mobile-on — JS-обработчик в common/header.php и common/admheader.php), плюс тёмная тема на случай его показа. */ @media (max-width: 991.98px) { body.header-mobile-fixed:not(.topbar-mobile-on) .topbar { display: none !important; } body.topbar-mobile-on .topbar { background-color: var(--vn-bg-elevated) !important; border-top: 1px solid var(--vn-border) !important; } } /* Плавный переход фона/текста при смене темы/наведениях по всей панели */ body, .card, .btn, .form-control, a { transition: background-color .15s ease, border-color .15s ease, color .15s ease; } /* Компонент Metronic .navi (списки внутри выпадающих меню/карточек) по умолчанию использует светлый фон (#F3F6F9) и тёмный текст — переопределяем под тёмную тему. */ .navi .navi-item .navi-link { color: var(--vn-text-muted) !important; } .navi .navi-item .navi-link:hover, .navi.navi-active .navi-item .navi-link.active, .navi .navi-item .navi-link.active { background-color: var(--vn-bg-hover) !important; color: var(--vn-text) !important; border-radius: var(--vn-radius-sm); } .navi .navi-item .navi-link .navi-text { color: inherit !important; } .navi .navi-item .navi-link .navi-icon i { color: var(--vn-text-faint) !important; } .navi .navi-item .navi-link:hover .navi-icon i, .navi .navi-item .navi-link.active .navi-icon i { color: var(--vn-accent) !important; } /* Офф-канвас меню на мобильных/планшетных ширинах (<=991.98px) в стандартной сборке Metronic имеет светлый фон — переопределяем, иначе лого "Volt" (светлого цвета, рассчитанное на тёмную подложку топбара) нечитаемо. Открытие меню идёт через независимый JS-обработчик (см. common/header.php), поэтому добавляем свой затемняющий backdrop и блокировку скролла фона. */ @media (max-width: 991.98px) { .header-menu-wrapper { background: var(--vn-bg-elevated) !important; } .header-menu-wrapper-overlay { background: rgba(0, 0, 0, .5) !important; } body.vn-mobile-nav-open::after { content: ''; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 1000; } body.vn-mobile-nav-open { overflow: hidden; } .header-menu-wrapper.header-menu-wrapper-on { z-index: 1001; } }