/* ========================================================================== VoltNodes-style theme — green, modern, dark-forward hosting panel skin Loaded AFTER style.bundle.css to override the stock Metronic look. ========================================================================== */ :root{ --vn-bg: #0b0f0d; --vn-bg-soft: #0f1512; --vn-surface: #121a16; --vn-surface-2: #17211c; --vn-border: #223026; /* Текст стал чуть ярче и нейтральнее — было слегка тускловато-зеленоватым (#e7f3ec/#8ea89a), из-за чего основной текст и особенно приглушённый (подписи, form-text) читались хуже на тёмном фоне, чем хотелось бы. */ --vn-text: #f5faf8; --vn-text-muted: #a7c2b6; --vn-primary: #22c55e; --vn-primary-dark: #16a34a; --vn-primary-light: #4ade80; --vn-primary-soft: rgba(34,197,94,.12); --vn-danger: #f43f5e; --vn-warning: #f59e0b; --vn-info: #22d3ee; /* Единая шкала скруглений — раньше по файлам было вперемешку 8/9/11/12/16/17/18/20/22px без всякой системы. Теперь 4 шага: xs (мелкие чипы/бейджи), sm (кнопки/инпуты), md (карточки/панели), lg (крупные промо-блоки/hero). --vn-radius и --vn-radius-sm оставлены как алиасы md/sm, чтобы не переписывать все существующие var(...). */ --vn-radius-xs: 8px; --vn-radius-sm: 10px; --vn-radius-md: 14px; --vn-radius-lg: 18px; --vn-radius: var(--vn-radius-md); /* Шкала теней — на тёмном фоне чистый чёрный drop-shadow почти не виден, поэтому тени лёгкие и с приподнятым контрастом, плюс отдельный "glow"-акцент primary-цветом для hover/выделенных состояний. */ --vn-shadow-sm: 0 2px 8px rgba(0,0,0,.28); --vn-shadow-md: 0 10px 30px rgba(0,0,0,.35); --vn-shadow-lg: 0 20px 48px rgba(0,0,0,.42); --vn-shadow: var(--vn-shadow-md); --vn-shadow-glow: 0 0 0 1px rgba(34,197,94,.15), 0 8px 24px rgba(34,197,94,.08); --vn-ease: cubic-bezier(.2,.7,.3,1); --vn-focus-ring: 0 0 0 3px var(--vn-primary-soft); } /* ---------- Клавиатурная навигация: везде, где убираются нативные outline через !important-стили Metronic/Bootstrap, добавляем свой заметный focus-visible-контур primary-цветом, чтобы фокус не терялся. ---------- */ 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-primary-light) !important; outline-offset: 2px; } /* html — стоковый Bootstrap-ресет не красит сам , из-за чего при резиновой раскладке (например .container с ограничением max-width на широких экранах) по краям окна был виден белый холст браузера ДО того, как под него подставляется body. body{margin:0} — на случай, если какой-то из подключаемых bundle-файлов переопределит стоковый сброс margin:0 у body (style.bundle.css уже это делает, но дублируем здесь явно, чтобы тёмная тема не зависела от порядка подключения файлов). */ html{ background: var(--vn-bg) !important; } body{ margin: 0 !important; background: radial-gradient(1100px 520px at 90% -8%, rgba(34,197,94,.10), transparent 60%), radial-gradient(900px 460px at -10% 10%, rgba(34,197,94,.06), transparent 55%), var(--vn-bg) !important; color: var(--vn-text) !important; font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; } ::selection{ background: var(--vn-primary); color:#04150a; } ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-track{ background: var(--vn-bg-soft); } ::-webkit-scrollbar-thumb{ background: #1f2c25; border-radius: 10px; border:2px solid var(--vn-bg-soft); } ::-webkit-scrollbar-thumb:hover{ background: var(--vn-primary-dark); } a{ color: var(--vn-primary-light); } /* ---------- Логотип в шапке/сайдбаре: не должен вылезать за границы узкой 260px-колонки. Раньше высота была зафиксирована (h-35px/h-30px), а ширина — нет: если загруженный логотип не квадратный (широкий wordmark), картинка растягивалась по пропорции и вылезала за правый край шапки/сайдбара. ---------- */ .header-logo{ overflow: hidden; max-width: 100%; } .header-logo img{ max-width: 100% !important; width: auto; height: 32px; object-fit: contain; } #kt_header_mobile img{ max-width: 60% !important; width: auto; height: auto; object-fit: contain; } a:hover{ color: var(--vn-primary); } /* ---------- Header / topbar ---------- */ .header{ background: rgba(10,15,12,.72) !important; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--vn-border) !important; box-shadow: none !important; } .header-fixed .header{ box-shadow: 0 1px 0 var(--vn-border) !important; } .header-menu .menu-nav > .menu-item > .menu-link{ color: var(--vn-text-muted) !important; border-radius: var(--vn-radius-sm); transition: all .18s ease; } .header-menu .menu-nav > .menu-item > .menu-link:hover, .header-menu .menu-nav > .menu-item.menu-item-active > .menu-link, .header-menu .menu-nav > .menu-item.menu-item-here > .menu-link{ color: var(--vn-primary-light) !important; background: var(--vn-primary-soft) !important; } .header-menu .menu-nav > .menu-item > .menu-link .menu-text{ font-weight: 600; } .menu-submenu{ background: var(--vn-surface) !important; border: 1px solid var(--vn-border) !important; border-radius: var(--vn-radius) !important; box-shadow: var(--vn-shadow) !important; } .menu-submenu .menu-link:hover{ background: var(--vn-primary-soft) !important; color: var(--vn-primary-light) !important; } /* Классические выпадающие подменю (пример: "Серверы" -> "Заказать сервер" / "Мои сервера" в шапке/сайдбаре личного кабинета, .menu-submenu-classic) — отдельно, БЕЗ привязки к брейкпоинту/классу body.vn-sidebar-nav, страховка на случай, если на конкретной ширине окна (между мобильным и десктопным сайдбар-режимом) сработает стоковый белый flyout Metronic вместо нашей вертикальной раскладки сайдбара. Без этой страховки на таких ширинах подменю всплывало белым прямоугольником со светлым текстом — то самое "серое"/"белое место" поверх тёмной панели. */ .menu-submenu.menu-submenu-classic{ background: var(--vn-surface) !important; border: 1px solid var(--vn-border) !important; box-shadow: var(--vn-shadow) !important; border-radius: var(--vn-radius) !important; } .menu-submenu.menu-submenu-classic .menu-link{ color: var(--vn-text-muted) !important; } .menu-submenu.menu-submenu-classic .menu-link:hover, .menu-submenu.menu-submenu-classic .menu-item-here > .menu-link{ background: var(--vn-primary-soft) !important; color: var(--vn-primary-light) !important; } .menu-submenu.menu-submenu-classic .menu-heading, .menu-submenu.menu-submenu-classic .menu-heading .menu-text{ color: var(--vn-text) !important; } .topbar .btn.btn-light, a.btn.btn-light, .btn-icon.btn-light{ background: var(--vn-surface-2, #17211c) !important; color: var(--vn-text, #f5faf8) !important; border: 1px solid var(--vn-border, #223026) !important; } .btn.btn-light:hover, a.btn.btn-light:hover, .btn-icon.btn-light:hover, .btn.btn-light:focus, .btn.btn-light.active{ background: var(--vn-primary-soft, #152018) !important; color: var(--vn-primary-light, #4ade80) !important; border-color: rgba(34,197,94,.35) !important; } .btn.btn-light i, .btn.btn-light .svg-icon{ color: inherit !important; } .accordion .card, .accordion .card-header, .accordion .card-body{ background: var(--vn-surface, #121a16) !important; color: var(--vn-text, #f5faf8) !important; border-color: var(--vn-border, #223026) !important; } .breadcrumb{ background: transparent !important; } .breadcrumb-item, .breadcrumb-item a{ color: var(--vn-text-muted, #a7c2b6) !important; } .breadcrumb-item.active{ color: var(--vn-text, #f5faf8) !important; } .list-group-item{ background: var(--vn-surface, #121a16) !important; color: var(--vn-text, #f5faf8) !important; border-color: var(--vn-border, #223026) !important; } .badge-light{ background: var(--vn-surface-2, #17211c) !important; color: var(--vn-text, #f5faf8) !important; } .popover{ background: var(--vn-surface, #121a16) !important; border-color: var(--vn-border, #223026) !important; color: var(--vn-text, #f5faf8) !important; } .popover .popover-header{ background: var(--vn-surface-2, #17211c) !important; color: var(--vn-text, #f5faf8) !important; border-color: var(--vn-border, #223026) !important; } .popover .arrow::after{ border-top-color: var(--vn-surface, #121a16) !important; } .btn.btn-light-primary{ background: var(--vn-primary-soft) !important; color: var(--vn-primary-light) !important; border: 1px solid rgba(34,197,94,.25) !important; } .topbar .btn.btn-light-primary:hover{ background: var(--vn-primary) !important; color: #04150a !important; } /* ---------- Sidebar / aside (admin) ---------- */ .aside{ background: linear-gradient(180deg, #0d130f 0%, #0a0f0c 100%) !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); margin: 2px 8px; } .aside-menu .menu-nav > .menu-item > .menu-link i{ color: inherit !important; } .aside-menu .menu-nav > .menu-item > .menu-link:hover, .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link{ color: #04150a !important; background: linear-gradient(90deg, var(--vn-primary), var(--vn-primary-dark)) !important; /* Своя, более приглушённая обводка вместо общей --vn-shadow-glow — на активном пункте сайдбара её тонкое кольцо (0 0 0 1px) читалось слишком ярко на фоне и так насыщенного зелёного градиента. */ box-shadow: 0 0 0 1px rgba(34,197,94,.06), 0 4px 14px rgba(34,197,94,.05); } /* Стоковый Metronic красит .menu-text/.menu-icon/.menu-arrow активного пункта в свой зелёный (#0BB783, style.bundle.css) отдельным, более специфичным правилом на самих дочерних элементах — оно не перекрывается !important выше на .menu-link, потому что это разные элементы (унаследованный цвет родителя всегда проигрывает собственному правилу потомка, вне зависимости от !important). В итоге текст/иконка пункта оставались зелёными на новом ярко-зелёном фоне — то самое "белесое"/нечитаемое пятно вместо текста (репортилось на пункте "Уведомления"). Явно фиксируем тот же тёмный цвет, что и у самой ссылки. То же самое творилось и просто при наведении (:hover, без активного состояния — репортилось на пункте "Пользователи"): фон уже становился ярко-зелёным градиентом по правилу выше, а текст/иконка оставались светлыми — тот же самый нечитаемый случай, просто на другом триггере. Поэтому селекторы ниже покрывают оба состояния. */ .aside-menu .menu-nav > .menu-item > .menu-link:hover .menu-text, .aside-menu .menu-nav > .menu-item > .menu-link:hover .menu-icon, .aside-menu .menu-nav > .menu-item > .menu-link:hover .menu-arrow, .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-text, .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-icon, .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-arrow{ color: #04150a !important; } .aside-menu .menu-nav > .menu-item > .menu-link:hover .menu-bullet.menu-bullet-dot > span, .aside-menu .menu-nav > .menu-item > .menu-link:hover .menu-bullet.menu-bullet-line > span, .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-bullet.menu-bullet-dot > span, .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-bullet.menu-bullet-line > span{ background-color: #04150a !important; } .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link{ background: var(--vn-primary-soft) !important; color: var(--vn-primary-light) !important; } .aside-menu .menu-submenu .menu-link:hover{ color: var(--vn-primary-light) !important; } .brand{ background: transparent !important; border-bottom: 1px solid var(--vn-border) !important; } /* Заголовки разделов меню ("Хостинг" / "Клиенты и поддержка" и т.п.) — стоковый Metronic красит их дефолтным сиренево-серым (--metronic-base-color), который не переопределялся нигде в теме, отсюда "сиреневые буквы". Берём акцентный зелёный приглушённого тона + разрядку букв и тонкий разделитель сверху (кроме самого первого раздела) — читаемо и в стиле бренда. */ .aside-menu .menu-nav > .menu-section{ margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--vn-border); } .aside-menu .menu-nav > .menu-section:first-child{ margin-top: 4px; padding-top: 0; border-top: none; } .aside-menu .menu-nav > .menu-section .menu-text{ color: var(--vn-primary-light) !important; opacity: .75; font-weight: 700 !important; font-size: .72rem !important; letter-spacing: .07em; } .aside-menu .menu-nav > .menu-section .menu-icon{ color: var(--vn-primary-light) !important; opacity: .4; } /* Пункты подменю (второй уровень) — тем же приглушённым текстом, что и верхний уровень, вместо стокового светло-серого/белого. */ .aside-menu .menu-nav .menu-submenu .menu-link{ color: var(--vn-text-muted) !important; } .aside-menu .menu-nav .menu-submenu .menu-item.menu-item-active > .menu-link, .aside-menu .menu-nav .menu-submenu .menu-item .menu-link.active{ color: var(--vn-primary-light) !important; } .aside-menu .menu-nav .menu-submenu .menu-link i{ color: inherit !important; opacity: .8; } /* #kt_aside_menu несёт классы "aside-menu scroll" на ОДНОМ узле (см. admheader.php:

), а не как предок/потомок — селектор с пробелом ниже никогда не совпадал с этим узлом, поэтому стоковый белый фон Metronic (.scroll{background:#fff}) пробивался наружу под тёмной шапкой сайдбара админки. Добавлен вариант без пробела для случая "оба класса на одном элементе". */ .aside-menu.scroll, .aside-menu .scroll{ background: transparent !important; } /* ---------- Cards, surfaces ---------- */ .card, .card-custom{ background: var(--vn-surface) !important; border: 1px solid var(--vn-border) !important; border-radius: var(--vn-radius) !important; box-shadow: var(--vn-shadow) !important; } .card-header{ background: transparent !important; border-bottom: 1px solid var(--vn-border) !important; } .card-title, .card-label, h1, h2, h3, h4, h5, h6{ color: var(--vn-text) !important; } .text-dark, .text-dark-75{ color: var(--vn-text) !important; } .text-muted{ color: var(--vn-text-muted) !important; } .separator{ border-color: var(--vn-border) !important; } .bg-white{ background: var(--vn-surface) !important; } .bg-light{ background: var(--vn-surface-2) !important; } .bg-gray-100{ background: var(--vn-surface-2) !important; } /* ---------- Buttons ---------- */ .btn.btn-primary, .btn.btn-success{ background: linear-gradient(135deg, var(--vn-primary), var(--vn-primary-dark)) !important; border-color: transparent !important; color: #04150a !important; font-weight: 600; box-shadow: 0 6px 18px rgba(34,197,94,.25); } .btn.btn-primary:hover, .btn.btn-success:hover{ filter: brightness(1.08); box-shadow: 0 10px 26px rgba(34,197,94,.35); } .btn.btn-light-primary{ background: var(--vn-primary-soft) !important; color: var(--vn-primary-light) !important; border: 1px solid rgba(34,197,94,.25) !important; } .btn.btn-light-primary:hover{ background: var(--vn-primary) !important; color: #04150a !important; } /* Остальные "мягкие" (light-*) кнопки Metronic — по умолчанию каждая имеет свой пастельный фон (жёлтый/красный/голубой/светло-серый), который на тёмной панели выглядел инородным светлым пятном (например плашка баланса "Молний" — btn-light-warning — оставалась кремовой). Тонируем все под тёмную поверхность темы, оставляя цветным только текст/иконку. */ .btn.btn-light-warning{ background: rgba(245,158,11,.14) !important; color: var(--vn-warning, #f59e0b) !important; border: 1px solid rgba(245,158,11,.3) !important; } .btn.btn-light-warning:hover{ background: var(--vn-warning, #f59e0b) !important; color: #241800 !important; } .btn.btn-light-danger{ background: rgba(244,63,94,.14) !important; color: var(--vn-danger, #f43f5e) !important; border: 1px solid rgba(244,63,94,.3) !important; } .btn.btn-light-danger:hover{ background: var(--vn-danger, #f43f5e) !important; color: #240610 !important; } .btn.btn-light-success{ background: var(--vn-primary-soft) !important; color: var(--vn-primary-light) !important; border: 1px solid rgba(34,197,94,.25) !important; } .btn.btn-light-success:hover{ background: var(--vn-primary) !important; color: #04150a !important; } .btn.btn-light-info{ background: rgba(34,211,238,.14) !important; color: var(--vn-info, #22d3ee) !important; border: 1px solid rgba(34,211,238,.3) !important; } .btn.btn-light-info:hover{ background: var(--vn-info, #22d3ee) !important; color: #001a1f !important; } .btn.btn-light-dark{ background: var(--vn-surface-2, #17211c) !important; color: var(--vn-text, #f5faf8) !important; border: 1px solid var(--vn-border, #223026) !important; } .btn.btn-light-dark:hover{ background: var(--vn-border, #223026) !important; color: var(--vn-text, #f5faf8) !important; } .btn.btn-outline-primary{ border-color: var(--vn-primary) !important; color: var(--vn-primary-light) !important; } .btn{ border-radius: var(--vn-radius-sm) !important; } /* ---------- Labels / badges ---------- */ .label-light-primary, .badge-light-primary{ background: var(--vn-primary-soft) !important; color: var(--vn-primary-light) !important; } .label-primary, .badge-primary{ background: var(--vn-primary) !important; color: #04150a !important; } /* ---------- Forms ---------- */ .form-control{ background: var(--vn-surface-2) !important; border: 1px solid var(--vn-border) !important; color: var(--vn-text) !important; border-radius: var(--vn-radius-sm) !important; } .form-control:focus{ background: var(--vn-surface-2) !important; border-color: var(--vn-primary) !important; color: var(--vn-text) !important; box-shadow: 0 0 0 3px var(--vn-primary-soft) !important; } .form-control::placeholder{ color: var(--vn-text-muted) !important; opacity:.8; } .input-group-text{ background: var(--vn-surface-2) !important; border: 1px solid var(--vn-border) !important; color: var(--vn-text-muted) !important; } /* ---------- Tables ---------- */ .table{ color: var(--vn-text) !important; } .table thead th{ color: var(--vn-text-muted) !important; border-bottom: 1px solid var(--vn-border) !important; font-weight: 600; text-transform: uppercase; font-size: .78rem; letter-spacing: .04em; } .table td, .table th{ border-color: var(--vn-border) !important; } .table-hover tbody tr:hover{ background: var(--vn-primary-soft) !important; } /* Единые статус-бейджи — используются в списках админки (пользователи, серверы, тикеты и т.д.) вместо стандартных светлых Bootstrap .badge-*, которые визуально выбивались из тёмной темы. */ .vn-badge{ font-size: .74rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; display: inline-block; } .vn-badge-success{ background: rgba(34,197,94,.15); color: var(--vn-primary-light, #4ade80); } .vn-badge-info{ background: rgba(34,211,238,.15); color: #67e8f9; } .vn-badge-warning{ background: rgba(250,204,21,.15); color: #facc15; } .vn-badge-danger{ background: rgba(244,63,94,.15); color: #fb7185; } /* ---------- Общая таблица со статус-бейджами (счета/пользователи и т.п.) ---------- Изначально писалась только внутри account/invoices.php как локальный