/* Токены shadcn/Tailwind; панель: body.vpn-ui.dark + финальный слой «legacy reset» в конце файла */
/* Шрифты подключаются в base.html / login.html отдельным , не через @import —
иначе при недоступности fonts.googleapis.com браузер может не применить ВЕСЬ этот файл. */
:root {
--background: #fbfcf8;
--foreground: #0f172a;
--card: #ffffff;
--card-foreground: #0f172a;
--popover: #ffffff;
--popover-foreground: #0f172a;
--primary: #aff33e;
--primary-foreground: #000000;
--secondary: #334155;
--secondary-foreground: #f8fafc;
--muted: #f1f5f9;
--muted-foreground: #64748b;
--accent: #f0fdf4;
--accent-foreground: #166534;
--destructive: #ef4444;
--destructive-foreground: #ffffff;
--border: #e2e8f0;
--input: #e2e8f0;
--ring: #aff33e;
--chart-1: #aff33e;
--chart-2: #334155;
--chart-3: #22c55e;
--chart-4: #64748b;
--chart-5: #94a3b8;
--sidebar: #ffffff;
--sidebar-foreground: #0f172a;
--sidebar-primary: #aff33e;
--sidebar-primary-foreground: #000000;
--sidebar-accent: #f8fafc;
--sidebar-accent-foreground: #0f172a;
--sidebar-border: #f1f5f9;
--sidebar-ring: #aff33e;
--font-sans: "Inter", system-ui, sans-serif;
--font-serif: Georgia, serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
--radius: 1rem;
--radius-pill: 999px;
--tracking-normal: -0.01em;
--vpn-pad-x: clamp(1.25rem, 4vw, 2.25rem);
--shadow-x: 0px;
--shadow-y: 8px;
--shadow-blur: 20px;
--shadow-spread: 0px;
--shadow-opacity: 0.05;
--shadow-color: #000000;
--shadow-2xs: 0px 8px 20px 0px hsl(0 0% 0% / 0.03);
--shadow-xs: 0px 8px 20px 0px hsl(0 0% 0% / 0.03);
--shadow-sm: 0px 8px 20px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
--shadow: 0px 8px 20px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
--shadow-md: 0px 8px 20px 0px hsl(0 0% 0% / 0.05), 0px 2px 4px -1px hsl(0 0% 0% / 0.05);
--shadow-lg: 0px 8px 20px 0px hsl(0 0% 0% / 0.05), 0px 4px 6px -1px hsl(0 0% 0% / 0.05);
--shadow-xl: 0px 8px 20px 0px hsl(0 0% 0% / 0.05), 0px 8px 10px -1px hsl(0 0% 0% / 0.05);
--shadow-2xl: 0px 8px 20px 0px hsl(0 0% 0% / 0.13);
/* Плоские карточки в светлой теме (при необходимости замените на --shadow-sm и т.д.) */
--shadow-card: none;
}
html.dark {
--background: #020617;
--foreground: #f8fafc;
--card: #0f172a;
--card-foreground: #f8fafc;
--popover: #0f172a;
--popover-foreground: #f8fafc;
--primary: #aff33e;
--primary-foreground: #000000;
--secondary: #1e293b;
--secondary-foreground: #f8fafc;
--muted: #1e293b;
--muted-foreground: #94a3b8;
--accent: #14532d;
--accent-foreground: #aff33e;
--destructive: #991b1b;
--destructive-foreground: #ffffff;
--border: #1e293b;
--input: #1e293b;
--ring: #aff33e;
--chart-1: #aff33e;
--chart-2: #3b82f6;
--chart-3: #22c55e;
--chart-4: #a855f7;
--chart-5: #f59e0b;
--sidebar: #020617;
--sidebar-foreground: #f8fafc;
--sidebar-primary: #aff33e;
--sidebar-primary-foreground: #000000;
--sidebar-accent: #1e293b;
--sidebar-accent-foreground: #f8fafc;
--sidebar-border: #1e293b;
--sidebar-ring: #aff33e;
--font-sans: "Inter", system-ui, sans-serif;
--font-serif: Georgia, serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
--shadow-x: 0px;
--shadow-y: 10px;
--shadow-blur: 25px;
--shadow-spread: 0px;
--shadow-opacity: 0.4;
--shadow-color: #000000;
--shadow-2xs: 0px 10px 25px 0px hsl(0 0% 0% / 0.2);
--shadow-xs: 0px 10px 25px 0px hsl(0 0% 0% / 0.2);
--shadow-sm: 0px 10px 25px 0px hsl(0 0% 0% / 0.4), 0px 1px 2px -1px hsl(0 0% 0% / 0.4);
--shadow: 0px 10px 25px 0px hsl(0 0% 0% / 0.4), 0px 1px 2px -1px hsl(0 0% 0% / 0.4);
--shadow-md: 0px 10px 25px 0px hsl(0 0% 0% / 0.4), 0px 2px 4px -1px hsl(0 0% 0% / 0.4);
--shadow-lg: 0px 10px 25px 0px hsl(0 0% 0% / 0.4), 0px 4px 6px -1px hsl(0 0% 0% / 0.4);
--shadow-xl: 0px 10px 25px 0px hsl(0 0% 0% / 0.4), 0px 8px 10px -1px hsl(0 0% 0% / 0.4);
--shadow-2xl: 0px 10px 25px 0px hsl(0 0% 0% / 1);
/* Без «глоу» у плашек — только border (переопределяется токенами shadcn) */
--shadow-card: none;
}
/* Те же тёмные токены на body.vpn-ui.dark — если у нет класса .dark (прокси/кэш). */
body.vpn-ui.dark {
--background: #020617;
--foreground: #f8fafc;
--card: #0f172a;
--card-foreground: #f8fafc;
--popover: #0f172a;
--popover-foreground: #f8fafc;
--primary: #aff33e;
--primary-foreground: #000000;
--secondary: #1e293b;
--secondary-foreground: #f8fafc;
--muted: #1e293b;
--muted-foreground: #94a3b8;
--accent: #14532d;
--accent-foreground: #aff33e;
--destructive: #991b1b;
--destructive-foreground: #ffffff;
--border: #1e293b;
--input: #1e293b;
--ring: #aff33e;
--chart-1: #aff33e;
--chart-2: #3b82f6;
--chart-3: #22c55e;
--chart-4: #a855f7;
--chart-5: #f59e0b;
--sidebar: #020617;
--sidebar-foreground: #f8fafc;
--sidebar-primary: #aff33e;
--sidebar-primary-foreground: #000000;
--sidebar-accent: #1e293b;
--sidebar-accent-foreground: #f8fafc;
--sidebar-border: #1e293b;
--sidebar-ring: #aff33e;
--font-sans: "Inter", system-ui, sans-serif;
--font-serif: Georgia, serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
--shadow-x: 0px;
--shadow-y: 10px;
--shadow-blur: 25px;
--shadow-spread: 0px;
--shadow-opacity: 0.4;
--shadow-color: #000000;
--shadow-2xs: 0px 10px 25px 0px hsl(0 0% 0% / 0.2);
--shadow-xs: 0px 10px 25px 0px hsl(0 0% 0% / 0.2);
--shadow-sm: 0px 10px 25px 0px hsl(0 0% 0% / 0.4), 0px 1px 2px -1px hsl(0 0% 0% / 0.4);
--shadow: 0px 10px 25px 0px hsl(0 0% 0% / 0.4), 0px 1px 2px -1px hsl(0 0% 0% / 0.4);
--shadow-md: 0px 10px 25px 0px hsl(0 0% 0% / 0.4), 0px 2px 4px -1px hsl(0 0% 0% / 0.4);
--shadow-lg: 0px 10px 25px 0px hsl(0 0% 0% / 0.4), 0px 4px 6px -1px hsl(0 0% 0% / 0.4);
--shadow-xl: 0px 10px 25px 0px hsl(0 0% 0% / 0.4), 0px 8px 10px -1px hsl(0 0% 0% / 0.4);
--shadow-2xl: 0px 10px 25px 0px hsl(0 0% 0% / 1);
/* Без «глоу» у плашек — только border (переопределяется токенами shadcn) */
--shadow-card: none;
}
body.vpn-ui.dark:not(.auth-page) {
font-family: var(--font-sans) !important;
background: var(--background) !important;
background-image: none !important;
color: var(--foreground) !important;
letter-spacing: var(--tracking-normal);
min-height: 100vh;
/* Высота фиксированной верхней панели (в style.css у .topbar position:fixed) */
--vpn-topbar-h: 3.75rem;
/* Одна колонка с основным контентом (шапка + таблицы) */
--vpn-shell-max: 1400px;
}
body.vpn-ui.dark.auth-page {
font-family: var(--font-sans) !important;
color: var(--foreground) !important;
letter-spacing: var(--tracking-normal);
}
body.vpn-ui.dark *,
body.vpn-ui.dark *::before,
body.vpn-ui.dark *::after {
border-color: var(--border);
}
/*
* Material Design Icons (icons.css 3.2.89): классов .mdi-cog-outline и .mdi-cog в файле НЕТ
* (есть только .mdi-cogs и т.п.) — у не задаётся content, иконка пустая.
* Дублируем код глифа как у .mdi-settings-outline.
*/
.mdi-cog-outline::before,
.mdi-cog::before {
content: "\F8BA" !important; /* глиф как у mdi-settings-outline */
}
body.vpn-ui.dark a.vpn-icon-btn .mdi::before,
body.vpn-ui.dark .vpn-icon-btn .mdi::before {
font-size: 1.15rem !important;
line-height: 1 !important;
color: inherit !important;
}
/* Lucide SVG */
body.vpn-ui.dark svg.lucide {
stroke: currentColor;
fill: none;
flex-shrink: 0;
vertical-align: middle;
}
body.vpn-ui.dark .vpn-lucide {
width: 1.12em;
height: 1.12em;
display: inline-block;
vertical-align: -0.2em;
}
body.vpn-ui.dark .vpn-lucide--title {
width: 1.35em;
height: 1.35em;
color: var(--primary);
}
body.vpn-ui.dark .vpn-icon-btn .vpn-lucide {
width: 1.15rem;
height: 1.15rem;
vertical-align: middle;
}
body.vpn-ui.dark .navigation-menu > li > a > .vpn-lucide {
width: 1.05rem;
height: 1.05rem;
}
body.vpn-ui.dark .vpn-lucide-spin {
animation: vpnLucideSpin 0.75s linear infinite;
}
@keyframes vpnLucideSpin {
to {
transform: rotate(360deg);
}
}
body.vpn-ui.dark .btn .vpn-lucide {
width: 1.05em;
height: 1.05em;
vertical-align: -0.15em;
}
body.vpn-ui.dark .dropdown-item .vpn-lucide {
width: 1rem;
height: 1rem;
margin-right: 0.35rem;
vertical-align: -0.15em;
opacity: 0.85;
}
body.vpn-ui.dark .input-group-text .vpn-lucide {
width: 1.1rem;
height: 1.1rem;
}
/* Единые горизонтальные поля — сетка не «уезжает» */
body.vpn-ui.dark .vpn-xpad {
padding-left: var(--vpn-pad-x) !important;
padding-right: var(--vpn-pad-x) !important;
}
body.vpn-ui.dark:not(.auth-page) .page-wrapper {
background: var(--background) !important;
/* Без этого блок с меню заезжает под фиксированный .topbar */
padding-top: calc(var(--vpn-topbar-h, 3.75rem) + 1rem) !important;
box-sizing: border-box !important;
}
/* style.css @680px задаёт display:flex без column — карточка шапки сжималась по ширине */
body.vpn-ui.dark .page-wrapper .page-wrapper-inner {
background: transparent !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
body.vpn-ui.dark .page-wrapper .page-content {
margin: 0 !important;
padding-top: 1.25rem !important;
padding-bottom: 2rem !important;
position: relative !important;
}
/* Верх: фиксированная полоса, один уровень с контентом по ширине */
body.vpn-ui.dark .vpn-topbar,
body.vpn-ui.dark .topbar {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 1030 !important;
min-height: var(--vpn-topbar-h, 3.75rem) !important;
height: var(--vpn-topbar-h, 3.75rem) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: color-mix(in srgb, var(--background) 92%, var(--card)) !important;
border-bottom: 1px solid var(--border) !important;
box-shadow: none !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
body.vpn-ui.dark .vpn-topbar,
body.vpn-ui.dark .topbar {
background: var(--background) !important;
}
}
body.vpn-ui.dark .topbar .navbar-custom.vpn-xpad {
width: 100% !important;
max-width: var(--vpn-shell-max) !important;
flex: 0 1 auto !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
min-height: 0 !important;
box-sizing: border-box !important;
}
body.vpn-ui.dark .navbar-custom {
min-height: var(--vpn-topbar-h, 3.75rem) !important;
height: 100% !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
background: transparent !important;
}
body.vpn-ui.dark .topbar .topbar-left {
width: auto !important;
float: none !important;
}
body.vpn-ui.dark .topbar .topbar-left .logo {
line-height: 1.2 !important;
display: inline-flex !important;
align-items: center !important;
min-height: 0 !important;
}
body.vpn-ui.dark .navbar-custom .nav-link {
line-height: 1.25 !important;
max-height: none !important;
}
body.vpn-ui.dark .navbar-custom .topbar-nav {
float: none !important;
display: flex !important;
align-items: center !important;
margin: 0 !important;
}
body.vpn-ui.dark .navbar-custom .topbar-nav li {
float: none !important;
}
body.vpn-ui.dark .vpn-brand {
display: inline-flex;
align-items: baseline;
gap: 0.35rem;
text-decoration: none !important;
font-weight: 800;
letter-spacing: 0.04em;
}
body.vpn-ui.dark .vpn-brand-main {
color: var(--primary);
font-size: 1.1rem;
}
body.vpn-ui.dark .vpn-brand-sub {
color: var(--muted-foreground);
font-size: 0.8rem;
font-weight: 600;
}
body.vpn-ui.dark .topbar .logo-lg {
display: none !important;
}
body.vpn-ui.dark .topbar-nav .nav-user {
color: var(--foreground) !important;
border-radius: var(--radius-pill);
padding: 0.35rem 0.65rem !important;
}
body.vpn-ui.dark .topbar-nav .nav-user img {
border: 2px solid var(--border);
width: 36px;
height: 36px;
object-fit: cover;
}
body.vpn-ui.dark .navbar-toggle span {
background-color: var(--primary) !important;
}
/* Одна карточка: приветствие + меню — та же ширина, что и .container-fluid ниже */
body.vpn-ui.dark .vpn-header-stack {
/* Заметное скругление; дочерние полосы тоже скругляем — иначе при overflow:visible видны «квадратные» углы фона */
--vpn-header-r: max(1.125rem, calc(var(--radius) + 6px));
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--vpn-header-r) !important;
box-shadow: var(--shadow-card);
margin-bottom: 1.5rem;
/* desktop: visible — подменю; телефон: hidden — скругление карточки */
overflow: visible;
width: 100% !important;
max-width: var(--vpn-shell-max) !important;
margin-left: auto !important;
margin-right: auto !important;
flex: 0 0 auto !important;
align-self: stretch !important;
box-sizing: border-box !important;
}
@media (max-width: 767.98px) {
body.vpn-ui.dark .vpn-header-stack {
overflow: hidden !important;
}
}
body.vpn-ui.dark .vpn-header-stack-top {
flex: 0 0 auto !important;
padding: 0.7rem 1.2rem 0.6rem;
border-bottom: 1px solid var(--border);
border-radius: var(--vpn-header-r) var(--vpn-header-r) 0 0 !important;
/* hidden обрезал выпадающие элементы и ломал визуальную сетку на части экранов */
overflow: visible;
}
/* Заголовок в hero: только как прямой потомок сетки (класс больше нигде не используется).
В column-режиме (<768) flex-grow ломает вёрстку — блок тянется по вертикали и даёт «пустоту». */
body.vpn-ui.dark .vpn-hero-grid > .vpn-page-heading {
flex: 0 1 auto !important;
flex-grow: 0 !important;
min-width: 0 !important;
}
@media (min-width: 768px) {
body.vpn-ui.dark .vpn-hero-grid > .vpn-page-heading {
flex: 0 1 auto !important;
flex-grow: 0 !important;
min-width: 0 !important;
max-width: min(52%, 26rem) !important;
margin-left: auto !important;
}
}
body.vpn-ui.dark .vpn-page-heading__row {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 0.65rem 1rem;
width: 100%;
}
/* flex: 1 1 180px при flex-direction:column (.vpn-heading-stack) давало ~180px+ пустоты по вертикали */
body.vpn-ui.dark .vpn-page-heading__main {
flex: 0 1 auto;
min-width: 0;
min-height: 0;
text-align: left;
}
@media (min-width: 768px) {
body.vpn-ui.dark .vpn-page-heading__row.vpn-heading-stack {
flex-direction: row !important;
}
body.vpn-ui.dark .vpn-page-heading__main {
flex: 1 1 180px !important;
min-width: 0 !important;
}
}
@media (max-width: 767.98px) {
body.vpn-ui.dark .vpn-page-heading__main {
text-align: left;
}
}
body.vpn-ui.dark .vpn-page-heading__actions {
flex: 0 0 auto;
margin-left: auto;
}
/* margin shorthand ломает margin-left:auto у заголовка в hero (.vpn-heading-col) */
body.vpn-ui.dark .page-title-box {
padding: 0 !important;
}
body.vpn-ui.dark .page-title-box:not(.vpn-heading-col) {
margin: 0 !important;
}
body.vpn-ui.dark .page-title-box .page-title {
color: var(--foreground) !important;
font-size: 1.25rem !important;
font-weight: 700 !important;
margin: 0 0 0.25rem !important;
line-height: 1.3 !important;
gap: 0.45rem !important;
}
body.vpn-ui.dark .page-title-box .breadcrumb {
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
@media (max-width: 767.98px) {
body.vpn-ui.dark .page-title-box .breadcrumb {
justify-content: flex-start;
}
}
@media (min-width: 768px) {
body.vpn-ui.dark .vpn-page-heading__main .page-title {
justify-content: flex-start !important;
}
}
@media (max-width: 767.98px) {
body.vpn-ui.dark .vpn-page-heading__main .page-title {
justify-content: flex-start !important;
}
}
body.vpn-ui.dark .breadcrumb-item,
body.vpn-ui.dark .breadcrumb-item a {
color: var(--muted-foreground) !important;
}
body.vpn-ui.dark .breadcrumb-item.active {
color: var(--foreground) !important;
}
/* Блок пользователя */
body.vpn-ui.dark .vpn-user-block {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.85rem 1rem;
flex: 0 0 auto;
}
body.vpn-ui.dark .vpn-user-avatar-wrap {
position: relative;
width: 52px;
height: 52px;
flex-shrink: 0;
}
body.vpn-ui.dark .vpn-user-avatar-img {
width: 52px;
height: 52px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--border);
background: var(--muted);
display: block;
}
body.vpn-ui.dark .vpn-user-status-dot {
position: absolute;
bottom: 2px;
right: 2px;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--primary);
border: 2px solid var(--card);
box-sizing: content-box;
}
body.vpn-ui.dark .vpn-user-text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.1rem;
min-width: 0;
}
body.vpn-ui.dark .vpn-user-greet {
font-size: 0.8rem;
font-weight: 500;
color: var(--muted-foreground);
text-transform: none;
letter-spacing: 0.02em;
}
body.vpn-ui.dark .vpn-user-name {
font-size: 1.15rem;
font-weight: 700;
color: var(--foreground);
line-height: 1.2;
word-break: break-word;
}
body.vpn-ui.dark .vpn-user-actions {
display: flex;
align-items: center;
gap: 0.4rem;
margin-left: 0;
flex-shrink: 0;
}
@media (max-width: 575.98px) {
body.vpn-ui.dark .vpn-user-actions {
margin-left: 0;
width: 100%;
}
}
body.vpn-ui.dark .vpn-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
min-width: 36px;
min-height: 36px;
flex-shrink: 0;
position: relative;
border-radius: calc(var(--radius) - 4px);
background: var(--muted);
color: var(--foreground);
border: 1px solid var(--border);
text-decoration: none !important;
transition: background 0.15s ease, border-color 0.15s ease;
}
body.vpn-ui.dark .vpn-icon-btn:hover {
background: var(--secondary);
border-color: var(--primary);
color: var(--foreground);
}
body.vpn-ui.dark a.vpn-icon-btn .mdi {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
line-height: 1 !important;
}
body.vpn-ui.dark .vpn-icon-btn--danger:hover {
border-color: var(--destructive);
color: var(--destructive-foreground);
background: var(--destructive);
}
body.vpn-ui.dark .vpn-icon-btn .vpn-lucide {
display: block;
}
body.vpn-ui.dark .vpn-icon-btn svg.lucide {
width: 1.15rem !important;
height: 1.15rem !important;
display: block;
flex-shrink: 0;
}
/* Кнопки в шапке: inline SVG (профиль / выход); без html.dark тоже (размеры) */
body.vpn-ui .vpn-icon-btn .vpn-user-action-icon,
body.vpn-ui.dark .vpn-icon-btn .vpn-user-action-icon {
width: 18px !important;
height: 18px !important;
min-width: 18px;
min-height: 18px;
display: block;
flex-shrink: 0;
stroke: currentColor;
fill: none;
pointer-events: none;
}
/* Настройки: символ ⚙ (U+2699) под картинкой; при 404 img удаляется — остаётся символ */
body.vpn-ui.dark .vpn-icon-btn--settings,
body.vpn-ui .vpn-icon-btn--settings {
overflow: visible;
}
body.vpn-ui.dark .vpn-icon-btn--settings .vpn-settings-icon-char,
body.vpn-ui .vpn-icon-btn--settings .vpn-settings-icon-char {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 0;
font-size: 1.15rem;
line-height: 1;
color: #f8fafc !important;
-webkit-text-fill-color: #f8fafc;
font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols", "DejaVu Sans", sans-serif;
pointer-events: none;
user-select: none;
}
body.vpn-ui.dark .vpn-icon-btn--settings .vpn-settings-icon-img,
body.vpn-ui .vpn-icon-btn--settings .vpn-settings-icon-img {
position: relative;
z-index: 1;
width: 18px !important;
height: 18px !important;
min-width: 18px;
min-height: 18px;
display: block;
flex-shrink: 0;
object-fit: contain;
pointer-events: none;
}
/* Встроенная шестерёнка (не зависит от Lucide / Material Icons) */
body.vpn-ui.dark .vpn-icon-btn .vpn-icon-inline {
width: 1.15rem;
height: 1.15rem;
display: block;
flex-shrink: 0;
stroke: currentColor;
}
body.vpn-ui.dark #navigation {
width: 100%;
}
/* Десктоп/планшет: меню в карточке (перебивает style.css для #navigation на узких экранах) */
@media (min-width: 768px) {
body.vpn-ui.dark .page-wrapper #navigation {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
pointer-events: auto !important;
z-index: 6;
background: transparent !important;
}
body.vpn-ui.dark .navbar-custom-menu.vpn-nav-merged {
overflow: visible !important;
}
body.vpn-ui.dark .navbar-custom-menu.vpn-nav-merged #navigation {
overflow: visible !important;
}
/* Полная ширина контейнера, перенос строки вместо «ловушки» горизонтального скролла */
body.vpn-ui.dark .navigation-menu {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
gap: 0.35rem !important;
box-sizing: border-box !important;
}
body.vpn-ui.dark .navigation-menu > li {
flex-shrink: 0 !important;
}
body.vpn-ui.dark .navigation-menu > li > a {
white-space: nowrap !important;
}
}
body.vpn-ui.dark .navigation-menu {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
padding: 0 !important;
margin: 0 !important;
}
body.vpn-ui.dark .navigation-menu > li {
float: none !important;
display: block !important;
position: relative;
}
body.vpn-ui.dark .navigation-menu > li > a {
display: inline-flex !important;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 0.9rem !important;
border-radius: calc(var(--radius) - 4px) !important;
color: var(--muted-foreground) !important;
font-weight: 500;
font-size: 0.875rem !important;
line-height: 1.2 !important;
background: transparent !important;
position: relative;
z-index: 1;
cursor: pointer;
}
body.vpn-ui.dark .navigation-menu > li > a:hover,
body.vpn-ui.dark .navigation-menu > li > a:focus {
color: var(--foreground) !important;
background: var(--muted) !important;
}
body.vpn-ui.dark .navigation-menu > li.active > a,
body.vpn-ui.dark .navigation-menu > li.has-submenu.active > a {
background: var(--primary) !important;
color: var(--primary-foreground) !important;
}
body.vpn-ui.dark .navigation-menu > li > a .vpn-lucide,
body.vpn-ui.dark .navigation-menu > li > a svg.lucide {
color: inherit !important;
margin-right: 0 !important;
}
/* Клик по ссылке меню: событие на , а не на SVG */
body.vpn-ui.dark .navigation-menu > li > a svg.lucide {
pointer-events: none;
}
@media (min-width: 768px) {
body.vpn-ui.dark .page-wrapper .navigation-menu > li > a {
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
color: var(--muted-foreground) !important;
}
body.vpn-ui.dark .page-wrapper .navigation-menu > li:hover > a {
color: var(--foreground) !important;
}
body.vpn-ui.dark .page-wrapper .navigation-menu > li:hover > a svg.lucide {
color: inherit !important;
}
}
body.vpn-ui.dark .submenu {
position: absolute;
z-index: 1080;
min-width: 12rem;
width: max-content;
max-width: min(calc(100vw - 2rem), 40rem);
padding: 0.45rem !important;
margin-top: 0 !important;
background: var(--popover) !important;
border: 1px solid var(--border) !important;
border-radius: calc(var(--radius) - 4px) !important;
box-shadow: var(--shadow-card) !important;
list-style: none;
box-sizing: border-box !important;
}
/* Подменю по наведению с md (согласовано с шторкой <768) */
@media (min-width: 768px) {
/*
* Мост под пунктом: зазор между и .submenu вне блока li — :hover срывается.
* ::before на li расширяет область наведения вниз на несколько px.
*/
body.vpn-ui.dark .page-wrapper .navigation-menu > li.has-submenu::before {
content: "";
position: absolute;
left: 0;
width: 100%;
top: 100%;
height: 14px;
z-index: 1075;
pointer-events: auto;
}
body.vpn-ui.dark .page-wrapper .navigation-menu > li .submenu {
top: 100%;
left: 0;
margin-top: 0 !important;
visibility: hidden;
opacity: 0;
transition: opacity 0.1s ease, visibility 0.1s ease;
display: block !important;
pointer-events: none;
}
body.vpn-ui.dark .page-wrapper .navigation-menu > li.has-submenu:hover > .submenu {
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
}
}
body.vpn-ui.dark .submenu li a {
color: var(--popover-foreground) !important;
border-radius: calc(var(--radius) - 6px);
padding: 0.45rem 0.75rem !important;
white-space: nowrap;
display: block;
box-sizing: border-box;
}
body.vpn-ui.dark .submenu li a:hover {
background: var(--muted) !important;
color: var(--primary) !important;
}
/* Карточки */
body.vpn-ui.dark .card {
background: var(--card) !important;
color: var(--card-foreground) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
box-shadow: var(--shadow-card) !important;
overflow: hidden;
}
body.vpn-ui.dark .card-body {
padding: 1.15rem 1.25rem;
}
body.vpn-ui.dark .vpn-card-head {
margin: 0 !important;
padding: 0.85rem 1.15rem !important;
font-weight: 700;
font-size: 0.9rem;
background: var(--muted) !important;
color: var(--foreground) !important;
border-bottom: 1px solid var(--border) !important;
border-left: 4px solid var(--primary) !important;
border-radius: 0 !important;
}
body.vpn-ui.dark .table {
color: var(--foreground) !important;
margin-bottom: 0;
}
body.vpn-ui.dark .table-bordered,
body.vpn-ui.dark .table-bordered td,
body.vpn-ui.dark .table-bordered th {
border-color: var(--border) !important;
}
body.vpn-ui.dark .table thead th,
body.vpn-ui.dark .thead-light th {
background: var(--muted) !important;
color: var(--muted-foreground) !important;
border-color: var(--border) !important;
font-weight: 600;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
body.vpn-ui.dark .table-responsive {
border-radius: calc(var(--radius) - 6px);
}
/* KPI — только chart-1…4 из вашей палитры */
body.vpn-ui.dark .vpn-stat-card .card-body {
position: relative;
padding-right: 3.5rem;
}
body.vpn-ui.dark .vpn-stat-card .vpn-stat-icon {
position: absolute;
top: 1rem;
right: 1rem;
width: 2.25rem;
height: 2.25rem;
opacity: 0.28;
color: var(--muted-foreground);
pointer-events: none;
}
body.vpn-ui.dark .vpn-stat-card .vpn-stat-icon svg {
width: 100%;
height: 100%;
}
body.vpn-ui.dark .vpn-stat-card h3 {
font-size: 1.5rem;
font-weight: 700;
margin: 0.35rem 0 0.45rem;
color: var(--foreground);
}
body.vpn-ui.dark .vpn-pill {
display: inline-block;
padding: 0.25rem 0.7rem;
border-radius: var(--radius-pill);
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
body.vpn-ui.dark .vpn-pill--c1 {
background: color-mix(in srgb, var(--chart-1) 22%, var(--card));
color: var(--chart-1);
}
body.vpn-ui.dark .vpn-pill--c2 {
background: color-mix(in srgb, var(--chart-2) 22%, var(--card));
color: var(--chart-2);
}
body.vpn-ui.dark .vpn-pill--c3 {
background: color-mix(in srgb, var(--chart-3) 22%, var(--card));
color: var(--chart-3);
}
body.vpn-ui.dark .vpn-pill--c4 {
background: color-mix(in srgb, var(--chart-4) 22%, var(--card));
color: var(--chart-4);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
body.vpn-ui.dark .vpn-pill--c1 {
background: rgba(175, 243, 62, 0.15);
color: var(--chart-1);
}
body.vpn-ui.dark .vpn-pill--c2 {
background: rgba(59, 130, 246, 0.15);
color: var(--chart-2);
}
body.vpn-ui.dark .vpn-pill--c3 {
background: rgba(34, 197, 94, 0.15);
color: var(--chart-3);
}
body.vpn-ui.dark .vpn-pill--c4 {
background: rgba(168, 85, 247, 0.15);
color: var(--chart-4);
}
}
body.vpn-ui.dark .vpn-stat-sub {
color: var(--muted-foreground) !important;
font-size: 0.875rem;
}
body.vpn-ui.dark .vpn-stat-highlight {
color: var(--primary) !important;
}
body.vpn-ui.dark .header-title,
body.vpn-ui.dark h4.header-title {
color: var(--muted-foreground) !important;
font-weight: 600;
}
body.vpn-ui.dark .text-dark {
color: var(--foreground) !important;
}
body.vpn-ui.dark h2.header-title {
font-size: 1.15rem !important;
color: var(--primary) !important;
}
/* Депозиты: иконка не перекрывает текст */
body.vpn-ui.dark .vpn-deposit-row {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 1rem;
}
body.vpn-ui.dark .vpn-deposit-main {
flex: 1 1 200px;
min-width: 0;
}
body.vpn-ui.dark .vpn-deposit-icon {
flex: 0 0 auto;
align-self: center;
}
body.vpn-ui.dark .vpn-deposit-icon .vpn-lucide,
body.vpn-ui.dark .vpn-deposit-icon svg.lucide {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
padding: 0.55rem;
box-sizing: border-box;
color: var(--primary) !important;
background: color-mix(in srgb, var(--primary) 14%, var(--card)) !important;
border-radius: 50%;
opacity: 1 !important;
}
body.vpn-ui.dark .vpn-deposit-icon svg.lucide {
width: 1.65rem;
height: 1.65rem;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
body.vpn-ui.dark .vpn-deposit-icon .vpn-lucide,
body.vpn-ui.dark .vpn-deposit-icon svg.lucide {
background: rgba(175, 243, 62, 0.12) !important;
}
}
body.vpn-ui.dark .text-danger {
color: var(--destructive) !important;
}
/* Кнопки / формы */
body.vpn-ui.dark .btn {
border-radius: calc(var(--radius) - 4px) !important;
font-weight: 600;
}
body.vpn-ui.dark .btn-primary,
body.vpn-ui.dark .btn-success {
background: var(--primary) !important;
color: var(--primary-foreground) !important;
border-color: var(--primary) !important;
}
/* Перебивает style.css: цветной глоу у .btn-* и тени Waves — плоские кнопки, кольцо только при фокусе */
body.vpn-ui.dark .btn,
body.vpn-ui.dark a.btn,
body.vpn-ui.dark .btn:hover,
body.vpn-ui.dark .btn:focus,
body.vpn-ui.dark .btn:active,
body.vpn-ui.dark .btn:not(:disabled):not(.disabled):active,
body.vpn-ui.dark .btn:not(:disabled):not(.disabled).active,
body.vpn-ui.dark .btn.active,
body.vpn-ui.dark .btn-primary:focus,
body.vpn-ui.dark .btn-secondary:focus,
body.vpn-ui.dark .btn-success:focus,
body.vpn-ui.dark .btn-danger:focus,
body.vpn-ui.dark .btn-warning:focus,
body.vpn-ui.dark .btn-info:focus,
body.vpn-ui.dark .btn-dark:focus,
body.vpn-ui.dark .btn-light:focus,
body.vpn-ui.dark .input-group-append .btn,
body.vpn-ui.dark .input-group-prepend .btn,
body.vpn-ui.dark .input-group-append .btn:active,
body.vpn-ui.dark .input-group-prepend .btn:active {
box-shadow: none !important;
}
body.vpn-ui.dark .btn:focus-visible {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 50%, transparent) !important;
}
body.vpn-ui.dark .waves-float,
body.vpn-ui.dark .waves-float:active {
box-shadow: none !important;
}
body.vpn-ui.dark .form-control,
body.vpn-ui.dark .custom-select {
background: var(--card) !important;
color: var(--foreground) !important;
border: 1px solid var(--input) !important;
border-radius: calc(var(--radius) - 6px) !important;
}
body.vpn-ui.dark .form-control:focus {
border-color: var(--ring) !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 50%, transparent) !important;
}
body.vpn-ui.dark .custom-select:focus {
border-color: var(--ring) !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 50%, transparent) !important;
}
/* Бейджи — только токены */
body.vpn-ui.dark .badge {
border-radius: var(--radius-pill);
font-weight: 600;
}
body.vpn-ui.dark .badge-primary {
background: color-mix(in srgb, var(--primary) 24%, var(--card)) !important;
color: var(--primary) !important;
}
body.vpn-ui.dark .badge-info {
background: color-mix(in srgb, var(--chart-2) 24%, var(--card)) !important;
color: var(--chart-2) !important;
}
body.vpn-ui.dark .badge-warning {
background: color-mix(in srgb, var(--chart-5) 26%, var(--card)) !important;
color: var(--chart-5) !important;
}
body.vpn-ui.dark .badge-success {
background: color-mix(in srgb, var(--chart-3) 24%, var(--card)) !important;
color: var(--chart-3) !important;
}
body.vpn-ui.dark .badge-danger {
background: color-mix(in srgb, var(--destructive) 35%, var(--card)) !important;
color: var(--destructive-foreground) !important;
}
body.vpn-ui.dark .footer {
position: relative !important;
left: auto !important;
right: auto !important;
border-top: 1px solid var(--border) !important;
background: transparent !important;
color: var(--muted-foreground) !important;
padding: 1rem 0 !important;
margin-top: 1.5rem;
}
body.vpn-ui.dark .dropdown-menu {
background: var(--popover) !important;
border: 1px solid var(--border) !important;
border-radius: calc(var(--radius) - 4px) !important;
box-shadow: var(--shadow-card) !important;
}
body.vpn-ui.dark .dropdown-item {
color: var(--popover-foreground) !important;
}
body.vpn-ui.dark .dropdown-item:hover {
background: var(--muted) !important;
color: var(--primary) !important;
}
body.vpn-ui.dark .dropdown-divider {
border-color: var(--border) !important;
}
body.vpn-ui.dark .modal-content {
background: var(--card) !important;
color: var(--foreground) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
box-shadow: none !important;
overflow: hidden !important;
}
body.vpn-ui.dark .modal-dialog .modal-content > .modal-header:first-child {
border-top-left-radius: calc(var(--radius) - 2px) !important;
border-top-right-radius: calc(var(--radius) - 2px) !important;
}
body.vpn-ui.dark .modal-dialog .modal-content > .modal-footer:last-child {
border-bottom-left-radius: calc(var(--radius) - 2px) !important;
border-bottom-right-radius: calc(var(--radius) - 2px) !important;
}
/* style.css задаёт .modal-content .modal-header/footer background #f8f9fa — ломает тёмную тему */
body.vpn-ui.dark .modal-content .modal-header,
body.vpn-ui.dark .modal-content .modal-footer {
background: var(--card) !important;
background-color: var(--card) !important;
border-color: var(--border) !important;
}
body.vpn-ui.dark .modal-content .modal-header .modal-title,
body.vpn-ui.dark .modal-content .modal-footer .modal-title {
color: var(--foreground) !important;
}
body.vpn-ui.dark .modal-content .modal-header .close,
body.vpn-ui.dark .modal-content .modal-footer .close {
color: var(--foreground) !important;
opacity: 0.85 !important;
text-shadow: none !important;
}
body.vpn-ui.dark .modal-content .modal-body {
background: var(--card) !important;
}
body.vpn-ui.dark .modal-content .modal-body p,
body.vpn-ui.dark .modal-content .modal-body h4,
body.vpn-ui.dark .modal-content .modal-body h5,
body.vpn-ui.dark .modal-content .modal-body strong {
color: inherit !important;
}
body.vpn-ui.dark .modal-footer .btn-secondary {
background: var(--muted) !important;
color: var(--foreground) !important;
border-color: var(--border) !important;
}
body.vpn-ui.dark .modal-footer .btn-secondary:hover {
background: color-mix(in srgb, var(--muted) 88%, var(--foreground)) !important;
color: var(--foreground) !important;
}
body.vpn-ui.dark .modal .custom-control-input:checked ~ .custom-control-label::before {
background-color: var(--primary) !important;
border-color: var(--primary) !important;
}
body.vpn-ui.dark .modal .custom-control-label::before {
background-color: var(--card) !important;
border-color: var(--border) !important;
}
body.vpn-ui.dark.modal-open .modal-backdrop.show {
opacity: 0.72 !important;
}
body.vpn-ui.dark .modal-backdrop {
background-color: #020617 !important;
}
/* Bootstrap row: стандартные отступы, без отрицательных кастомных */
body.vpn-ui.dark .page-content .row {
margin-left: -12px;
margin-right: -12px;
}
body.vpn-ui.dark .page-content .row > [class*="col-"] {
padding-left: 12px;
padding-right: 12px;
}
body.vpn-ui.dark .vpn-chart-split {
border-top: 1px solid var(--border) !important;
}
/* ApexCharts: тултип и подписи в стиле панели (перебивает apexcharts-theme-light) */
body.vpn-ui.dark .apexcharts-tooltip,
body.vpn-ui.dark .apexcharts-tooltip.apexcharts-theme-light {
background: var(--card) !important;
border: 1px solid var(--border) !important;
color: var(--foreground) !important;
box-shadow: none !important;
}
body.vpn-ui.dark .apexcharts-tooltip-title {
background: var(--card) !important;
border-bottom: 1px solid var(--border) !important;
color: var(--foreground) !important;
}
body.vpn-ui.dark .apexcharts-tooltip-text,
body.vpn-ui.dark .apexcharts-tooltip-text-y-label,
body.vpn-ui.dark .apexcharts-tooltip-text-y-value,
body.vpn-ui.dark .apexcharts-tooltip-text-z-label,
body.vpn-ui.dark .apexcharts-tooltip-text-z-value {
color: var(--foreground) !important;
}
body.vpn-ui.dark .apexcharts-xaxistooltip,
body.vpn-ui.dark .apexcharts-yaxistooltip {
background: var(--card) !important;
border: 1px solid var(--border) !important;
color: var(--foreground) !important;
}
body.vpn-ui.dark .apexcharts-legend-text {
color: var(--muted-foreground) !important;
}
body.vpn-ui.dark .apexchart-wrapper .apexcharts-canvas,
body.vpn-ui.dark .apexchart-wrapper svg {
overflow: visible;
}
@media (max-width: 1024px) {
body.vpn-ui.dark .page-wrapper .page-content {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* Телефон: вертикальное меню в шторке, аккордеон подменю (app.js) */
@media (max-width: 767.98px) {
body.vpn-ui.dark #navigation {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
background: transparent !important;
z-index: 2 !important;
box-shadow: none !important;
max-height: none !important;
overflow-x: visible !important;
overflow-y: visible !important;
}
body.vpn-ui.dark .navigation-menu {
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
width: 100% !important;
min-width: 0 !important;
gap: 0.2rem !important;
}
body.vpn-ui.dark .navigation-menu > li {
width: 100% !important;
flex-shrink: 0 !important;
}
body.vpn-ui.dark .navigation-menu > li > a {
width: 100% !important;
box-sizing: border-box !important;
justify-content: flex-start !important;
border-radius: calc(var(--radius) - 4px) !important;
}
body.vpn-ui.dark .navigation-menu > li > a .vpn-lucide,
body.vpn-ui.dark .navigation-menu > li > a svg.lucide {
flex-shrink: 0 !important;
}
/* Подменю в потоке, открытие через .open (initMetisMenu) */
body.vpn-ui.dark .navigation-menu > li .submenu {
position: static !important;
width: 100% !important;
max-width: 100% !important;
margin-top: 0.2rem !important;
margin-left: 0 !important;
box-shadow: none !important;
border: 1px solid var(--border) !important;
display: none !important;
visibility: visible !important;
opacity: 1 !important;
}
body.vpn-ui.dark .navigation-menu > li .submenu.open {
display: block !important;
}
body.vpn-ui.dark .page-wrapper .page-wrapper-inner {
padding-left: var(--vpn-pad-x) !important;
padding-right: var(--vpn-pad-x) !important;
}
body.vpn-ui.dark .page-wrapper .page-content {
padding-left: var(--vpn-pad-x) !important;
padding-right: var(--vpn-pad-x) !important;
}
body.vpn-ui.dark .vpn-header-stack-top {
padding: 1rem 1rem 0.95rem !important;
}
/* Сетку hero не трогаем здесь: иначе перебивается flex row (768+) и ломается шапка */
body.vpn-ui.dark .vpn-page-heading {
width: 100% !important;
}
body.vpn-ui.dark .vpn-page-heading__actions {
margin-left: 0 !important;
width: 100%;
}
}
/* ---------- Общий «приложенческий» вид контента ---------- */
body.vpn-ui.dark .page-content > .container-fluid {
max-width: var(--vpn-shell-max) !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.vpn-ui.dark .page-content > .footer {
max-width: var(--vpn-shell-max) !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.vpn-ui.dark .vpn-header-stack-top {
background: color-mix(in srgb, var(--muted) 40%, var(--card));
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
body.vpn-ui.dark .vpn-header-stack-top {
background: var(--card);
}
}
body.vpn-ui.dark .navbar-custom-menu.vpn-nav-merged {
width: 100% !important;
margin: 0 !important;
background: color-mix(in srgb, var(--muted) 48%, var(--card)) !important;
border: none !important;
border-radius: 0 0 var(--vpn-header-r, max(1.125rem, calc(var(--radius) + 6px))) var(--vpn-header-r, max(1.125rem, calc(var(--radius) + 6px))) !important;
box-shadow: none !important;
padding: 0.55rem 1rem 0.75rem !important;
border-top: 1px solid var(--border) !important;
overflow: visible !important;
box-sizing: border-box !important;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
body.vpn-ui.dark .navbar-custom-menu.vpn-nav-merged {
background: var(--muted) !important;
}
}
/* Страницы вроде «Пользователи» */
body.vpn-ui.dark .vpn-page-card .card-body {
padding: 1.35rem 1.4rem;
}
body.vpn-ui.dark .vpn-toolbar .header-title {
font-size: 1.05rem;
color: var(--foreground) !important;
margin-bottom: 0.2rem !important;
}
body.vpn-ui.dark .vpn-hint-box {
font-size: 0.85rem;
color: var(--muted-foreground);
padding: 0.75rem 1rem;
border-radius: calc(var(--radius) - 4px);
border: 1px solid var(--border);
background: color-mix(in srgb, var(--muted) 50%, var(--card));
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
body.vpn-ui.dark .vpn-hint-box {
background: var(--muted);
}
}
/* --- Тулбар страниц (Пользователи и др.): сетка + без лишних теней у кнопок --- */
body.vpn-ui.dark .vpn-toolbar {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: space-between !important;
align-items: center !important;
width: 100% !important;
max-width: 100% !important;
gap: 1rem !important;
box-sizing: border-box !important;
}
body.vpn-ui.dark .vpn-toolbar-intro {
flex: 1 1 240px !important;
min-width: 0 !important;
max-width: 100% !important;
}
/* Строка: [поле + Найти] … зазор … [Добавить] */
body.vpn-ui.dark .vpn-toolbar-actions {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 0.5rem !important;
flex: 1 1 280px !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Нормальный вид кнопок: без «глоу» под ними (остаётся только аккуратный focus) */
body.vpn-ui.dark .vpn-toolbar-actions .btn,
body.vpn-ui.dark .vpn-toolbar-actions .btn:focus,
body.vpn-ui.dark .vpn-search-row .btn,
body.vpn-ui.dark .vpn-search-row .btn:focus {
box-shadow: none !important;
}
body.vpn-ui.dark .vpn-toolbar-actions .btn:focus-visible,
body.vpn-ui.dark .vpn-search-row .btn:focus-visible {
box-shadow: 0 0 0 2px rgba(175, 243, 62, 0.45) !important;
}
body.vpn-ui.dark .vpn-toolbar-actions > .btn {
flex: 0 0 auto !important;
white-space: nowrap !important;
}
/* Поиск: grid — поле не схлопывается (flex + min-width:0 ломал ввод) */
body.vpn-ui.dark .vpn-search-row.vpn-search-group {
display: grid !important;
/* минимум ~10rem у колонки поля — иначе fr может дать нулевую ширину */
grid-template-columns: minmax(10rem, 1fr) auto !important;
align-items: center !important;
gap: 0.5rem !important;
max-width: min(100%, 400px) !important;
flex: 1 1 220px !important;
width: 100% !important;
box-sizing: border-box !important;
}
body.vpn-ui.dark .vpn-search-row .vpn-search-input {
grid-column: 1 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
min-height: 2.5rem !important;
padding: 0.45rem 0.75rem !important;
border-radius: calc(var(--radius) - 4px) !important;
box-sizing: border-box !important;
-webkit-appearance: none !important;
appearance: none !important;
}
body.vpn-ui.dark .vpn-search-row .vpn-search-submit {
grid-column: 2 !important;
white-space: nowrap !important;
border-radius: calc(var(--radius) - 4px) !important;
align-self: center !important;
min-height: 2.5rem !important;
}
body.vpn-ui.dark .vpn-toolbar-actions .vpn-search-row {
flex: 1 1 220px !important;
min-width: 0 !important;
max-width: 100% !important;
}
/* Фолбэк: старая .input-group — тоже grid */
body.vpn-ui.dark .vpn-toolbar-actions > .input-group.vpn-search-group {
display: grid !important;
grid-template-columns: minmax(10rem, 1fr) auto !important;
align-items: stretch !important;
gap: 0.5rem !important;
flex: 1 1 220px !important;
max-width: min(100%, 400px) !important;
width: 100% !important;
}
body.vpn-ui.dark .vpn-toolbar-actions > .input-group.vpn-search-group > .form-control {
grid-column: 1 !important;
width: 100% !important;
min-width: 0 !important;
min-height: 2.5rem !important;
border-radius: calc(var(--radius) - 4px) !important;
box-sizing: border-box !important;
}
body.vpn-ui.dark .vpn-toolbar-actions > .input-group.vpn-search-group > .input-group-append {
grid-column: 2 !important;
margin: 0 !important;
display: flex !important;
align-items: stretch !important;
}
body.vpn-ui.dark .vpn-toolbar-actions > .input-group.vpn-search-group > .input-group-append .btn {
border-radius: calc(var(--radius) - 4px) !important;
box-shadow: none !important;
min-height: 2.5rem !important;
}
/* Телефон: поле и кнопки столбцом */
@media (max-width: 767.98px) {
body.vpn-ui.dark .vpn-toolbar {
flex-direction: column !important;
align-items: stretch !important;
}
body.vpn-ui.dark .vpn-toolbar-intro {
flex: 1 1 auto !important;
}
body.vpn-ui.dark .vpn-toolbar-actions {
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
justify-content: flex-start !important;
flex: 1 1 auto !important;
width: 100% !important;
max-width: 100% !important;
gap: 0.65rem !important;
}
body.vpn-ui.dark .vpn-toolbar-actions > .btn {
width: 100% !important;
max-width: 100% !important;
}
body.vpn-ui.dark .vpn-search-row.vpn-search-group,
body.vpn-ui.dark .vpn-toolbar-actions > .input-group.vpn-search-group {
grid-template-columns: 1fr !important;
max-width: 100% !important;
width: 100% !important;
flex: none !important;
}
body.vpn-ui.dark .vpn-search-row .vpn-search-input,
body.vpn-ui.dark .vpn-toolbar-actions > .input-group.vpn-search-group > .form-control {
grid-column: 1 !important;
width: 100% !important;
}
body.vpn-ui.dark .vpn-search-row .vpn-search-submit {
grid-column: 1 !important;
width: 100% !important;
justify-self: stretch !important;
}
body.vpn-ui.dark .vpn-toolbar-actions > .input-group.vpn-search-group > .input-group-append {
grid-column: 1 !important;
width: 100% !important;
}
body.vpn-ui.dark .vpn-toolbar-actions > .input-group.vpn-search-group > .input-group-append .btn {
width: 100% !important;
}
}
body.vpn-ui.dark .vpn-table-wrap {
border: 1px solid var(--border);
border-radius: calc(var(--radius) - 4px);
overflow: hidden;
}
body.vpn-ui.dark .vpn-data-table tbody td {
vertical-align: middle;
font-size: 0.875rem;
}
body.vpn-ui.dark .vpn-data-table .btn {
font-size: 0.8rem;
padding: 0.35rem 0.65rem;
}
body.vpn-ui.dark a.user-details-link {
color: var(--primary) !important;
font-weight: 600;
}
body.vpn-ui.dark a.user-details-link:hover {
color: var(--foreground) !important;
text-decoration: underline !important;
}
body.vpn-ui.dark .pagination .page-link {
background: var(--card);
color: var(--foreground);
border-color: var(--border);
border-radius: calc(var(--radius) - 6px) !important;
margin: 0 2px;
}
body.vpn-ui.dark .pagination .page-item.active .page-link {
background: var(--primary);
color: var(--primary-foreground);
border-color: var(--primary);
}
body.vpn-ui.dark .pagination .page-item.disabled .page-link {
background: var(--muted);
color: var(--muted-foreground);
}
body.vpn-ui.dark .modal-header {
border-bottom-color: var(--border) !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: nowrap !important;
gap: 0.75rem !important;
}
body.vpn-ui.dark .modal-header .modal-title {
color: var(--foreground) !important;
margin-bottom: 0 !important;
flex: 1 1 auto !important;
min-width: 0 !important;
font-weight: 600 !important;
}
body.vpn-ui.dark .modal-body {
color: var(--foreground) !important;
}
body.vpn-ui.dark .modal-body .form-group label {
color: var(--foreground) !important;
font-weight: 500 !important;
}
body.vpn-ui.dark .modal-body .form-text,
body.vpn-ui.dark .modal-body small.text-muted {
color: var(--muted-foreground) !important;
}
/* Выбор файла: без белого native-виджета, в токенах темы */
.modal-body .vpn-file-upload {
position: relative;
width: 100%;
}
.modal-body .vpn-file-upload__input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.modal-body .vpn-file-upload__row {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
min-height: 2.75rem;
padding: 0.5rem 0.85rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--muted);
}
.modal-body .vpn-file-upload__btn {
flex-shrink: 0;
margin: 0 !important;
cursor: pointer;
border-radius: calc(var(--radius) - 4px) !important;
}
.modal-body .vpn-file-upload__name {
flex: 1;
min-width: 0;
font-size: 0.875rem;
color: var(--muted-foreground);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.modal-body .vpn-file-upload__input:focus + .vpn-file-upload__row,
.modal-body .vpn-file-upload__input:focus-visible + .vpn-file-upload__row {
outline: 2px solid var(--ring);
outline-offset: 2px;
}
body.vpn-ui.dark .modal-body .custom-control-label {
color: var(--foreground) !important;
}
body.vpn-ui.dark .modal-footer {
border-top-color: var(--border) !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 0.5rem !important;
}
body.vpn-ui.dark .close {
color: var(--foreground);
opacity: 0.7;
flex-shrink: 0 !important;
margin: 0 !important;
padding: 0.25rem !important;
line-height: 1 !important;
}
/* Модалка «Редактирование API»: моноширинный ключ, не ломается переносом */
body.vpn-ui.dark textarea.vpn-api-key-field {
font-family: var(--font-mono, ui-monospace, monospace) !important;
font-size: 0.8125rem !important;
line-height: 1.45 !important;
min-height: 3.25rem !important;
resize: vertical !important;
}
body.vpn-ui.dark .vpn-modal-api-edit textarea.vpn-api-key-field {
min-height: 4.5rem !important;
}
body.vpn-ui.dark .vpn-code-inline,
body.vpn-ui.dark code.vpn-code-inline {
font-family: var(--font-mono, ui-monospace, monospace) !important;
font-size: 0.8em !important;
padding: 0.1em 0.35em !important;
border-radius: calc(var(--radius) - 6px) !important;
background: var(--muted) !important;
color: var(--foreground) !important;
border: 1px solid var(--border) !important;
word-break: break-all !important;
}
/* =============================================================================
Шапка и hero: только локальный CSS (без Tailwind CDN — иначе стили не грузятся)
============================================================================= */
body.vpn-ui.dark .vpn-topbar-inner {
display: flex !important;
width: 100% !important;
max-width: var(--vpn-shell-max) !important;
margin-left: auto !important;
margin-right: auto !important;
align-items: center !important;
justify-content: space-between !important;
gap: 1rem !important;
background: transparent !important;
box-shadow: none !important;
min-height: 0 !important;
}
body.vpn-ui.dark .topbar .vpn-topbar-left {
float: none !important;
width: auto !important;
flex-shrink: 0 !important;
}
body.vpn-ui.dark .topbar .vpn-topbar-nav {
float: none !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
list-style: none !important;
padding-left: 0 !important;
gap: 0.25rem !important;
}
body.vpn-ui.dark .topbar .nav-user.vpn-topbar-user {
display: inline-flex !important;
align-items: center !important;
gap: 0.5rem !important;
line-height: 1.2 !important;
border-radius: var(--radius-pill) !important;
}
body.vpn-ui.dark .topbar .nav-user.vpn-topbar-user img {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
object-fit: cover !important;
border-radius: 50% !important;
border: 2px solid var(--border) !important;
}
body.vpn-ui.dark .vpn-mobile-toggle {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0.35rem 0.5rem !important;
border: 0 !important;
background: transparent !important;
border-radius: calc(var(--radius) - 6px) !important;
cursor: pointer !important;
color: inherit !important;
}
body.vpn-ui.dark .vpn-mobile-toggle:hover {
background: var(--muted) !important;
}
body.vpn-ui.dark .vpn-mobile-toggle .lines {
display: flex !important;
flex-direction: column !important;
gap: 5px !important;
}
body.vpn-ui.dark .vpn-mobile-toggle .lines span {
display: block !important;
width: 20px !important;
height: 2px !important;
border-radius: 2px !important;
background: var(--primary) !important;
}
@media (min-width: 768px) {
body.vpn-ui.dark .vpn-mobile-toggle {
display: none !important;
}
body.vpn-ui.dark .vpn-topbar-drawer-slot {
display: none !important;
}
}
/* Hero: колонка на узком экране, строка на планшете+ */
body.vpn-ui.dark .vpn-hero-grid {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
align-content: flex-start !important;
flex-wrap: nowrap !important;
gap: 1.15rem !important;
width: 100% !important;
box-sizing: border-box !important;
min-height: 0 !important;
}
@media (min-width: 768px) {
body.vpn-ui.dark .vpn-hero-grid {
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: flex-start !important;
align-content: flex-start !important;
justify-content: flex-start !important;
gap: 0.75rem 1.25rem !important;
}
}
@media (max-width: 767.98px) {
body.vpn-ui.dark .vpn-hero-grid {
flex-direction: column !important;
align-items: stretch !important;
gap: 1rem !important;
}
body.vpn-ui.dark .vpn-hero-grid > .vpn-page-heading {
margin-left: 0 !important;
max-width: 100% !important;
}
body.vpn-ui.dark .vpn-heading-col {
margin-left: 0 !important;
max-width: 100% !important;
}
body.vpn-ui.dark .vpn-heading-col .vpn-heading-stack,
body.vpn-ui.dark .vpn-heading-col .vpn-page-heading__row,
body.vpn-ui.dark .vpn-heading-col .vpn-heading-main {
align-items: flex-start !important;
text-align: left !important;
}
body.vpn-ui.dark .vpn-heading-col .vpn-page-title-row {
justify-content: flex-start !important;
text-align: left !important;
}
body.vpn-ui.dark .vpn-heading-col ol.vpn-bc {
justify-content: flex-start !important;
}
}
body.vpn-ui.dark .vpn-hero-user-row {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex: 0 1 auto !important;
min-width: 0 !important;
max-width: 100% !important;
gap: 0.85rem !important;
}
body.vpn-ui.dark .vpn-hero-user-row .vpn-user-actions {
margin-left: 0 !important;
flex-shrink: 0 !important;
}
@media (max-width: 575.98px) {
body.vpn-ui.dark .vpn-hero-user-row {
flex-wrap: wrap !important;
}
body.vpn-ui.dark .vpn-hero-user-row .vpn-user-actions {
margin-left: 0 !important;
width: 100% !important;
justify-content: flex-start !important;
}
}
/* Кнопки в шапке: три квадрата, Lucide SVG (user / settings / log-out) */
body.vpn-ui.dark .vpn-chip-actions {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
align-self: center !important;
gap: 0.4rem !important;
}
body.vpn-ui.dark a.vpn-chip-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 2.75rem !important;
min-width: 2.75rem !important;
max-width: 2.75rem !important;
height: 2.75rem !important;
min-height: 2.75rem !important;
max-height: 2.75rem !important;
padding: 0 !important;
box-sizing: border-box !important;
flex-shrink: 0 !important;
border-radius: calc(var(--radius) - 6px) !important;
border: 1px solid var(--border) !important;
background: var(--muted) !important;
box-shadow: none !important;
color: var(--foreground) !important;
text-decoration: none !important;
line-height: 0 !important;
transition:
border-color 0.15s ease,
background 0.15s ease,
color 0.15s ease !important;
-webkit-tap-highlight-color: transparent !important;
}
body.vpn-ui.dark a.vpn-chip-btn:hover {
border-color: var(--primary) !important;
box-shadow: none !important;
transform: none !important;
color: var(--foreground) !important;
background: color-mix(in srgb, var(--muted) 70%, var(--card)) !important;
}
body.vpn-ui.dark a.vpn-chip-btn .vpn-chip-btn__icon,
body.vpn-ui.dark a.vpn-chip-btn .vpn-lucide,
body.vpn-ui.dark a.vpn-chip-btn svg.lucide {
width: 1.15rem !important;
height: 1.15rem !important;
flex-shrink: 0 !important;
pointer-events: none !important;
color: inherit !important;
stroke: currentColor !important;
display: block !important;
}
body.vpn-ui.dark a.vpn-chip-btn--leave {
border-color: rgba(248, 113, 113, 0.45) !important;
background: linear-gradient(165deg, rgba(127, 29, 29, 0.75), rgba(69, 10, 10, 0.95)) !important;
color: #fecaca !important;
}
body.vpn-ui.dark a.vpn-chip-btn--leave:hover {
border-color: #f87171 !important;
background: linear-gradient(165deg, rgba(185, 28, 28, 0.9), rgba(69, 10, 10, 1)) !important;
color: #ffffff !important;
}
/* Заголовок и крошки в hero: на планшете+ прижаты вправо, одна строка с блоком пользователя */
body.vpn-ui.dark .vpn-heading-col {
width: 100% !important;
min-width: 0 !important;
flex: 0 1 auto !important;
max-width: 100% !important;
}
@media (min-width: 768px) {
body.vpn-ui.dark .vpn-heading-col {
flex: 0 1 auto !important;
min-width: 0 !important;
max-width: min(52%, 26rem) !important;
margin-left: auto !important;
}
body.vpn-ui.dark .vpn-heading-col .vpn-heading-stack,
body.vpn-ui.dark .vpn-heading-col .vpn-page-heading__row {
align-items: flex-end !important;
}
body.vpn-ui.dark .vpn-heading-col .vpn-heading-main {
align-items: flex-end !important;
text-align: right !important;
}
body.vpn-ui.dark .vpn-heading-col .vpn-page-title-row {
justify-content: flex-end !important;
text-align: right !important;
}
body.vpn-ui.dark .vpn-heading-col ol.vpn-bc {
justify-content: flex-end !important;
}
}
body.vpn-ui.dark .vpn-heading-stack {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 0.65rem !important;
width: 100% !important;
}
body.vpn-ui.dark .vpn-heading-main {
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
text-align: left !important;
}
body.vpn-ui.dark .vpn-page-title-row {
display: flex !important;
flex-wrap: wrap !important;
justify-content: flex-start !important;
align-items: center !important;
gap: 0.45rem !important;
width: 100% !important;
text-align: left !important;
}
body.vpn-ui.dark .vpn-heading-actions {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 0.5rem !important;
width: 100% !important;
}
@media (min-width: 768px) {
body.vpn-ui.dark .vpn-heading-actions {
width: auto !important;
}
}
/* Крошки */
body.vpn-ui.dark ol.vpn-bc {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: flex-start !important;
align-items: center !important;
gap: 0.25rem 0.35rem !important;
font-size: 0.875rem !important;
width: 100% !important;
background: transparent !important;
}
body.vpn-ui.dark ol.vpn-bc > li.vpn-bc-item + li.vpn-bc-item::before {
content: "/" !important;
margin-right: 0.4rem !important;
color: var(--muted-foreground) !important;
font-weight: 500 !important;
}
body.vpn-ui.dark ol.vpn-bc .vpn-bc-item {
display: inline-flex !important;
align-items: center !important;
}
body.vpn-ui.dark ol.vpn-bc a.vpn-bc-link {
color: var(--muted-foreground) !important;
text-decoration: none !important;
}
body.vpn-ui.dark ol.vpn-bc a.vpn-bc-link:hover {
color: var(--primary) !important;
}
body.vpn-ui.dark ol.vpn-bc .vpn-bc-current {
color: var(--foreground) !important;
}
body.vpn-ui.dark .vpn-nav-merged {
border-top: 1px solid var(--border) !important;
}
@media (max-width: 767.98px) {
body.vpn-ui.dark .vpn-page-heading__main .page-title,
body.vpn-ui.dark .vpn-page-title-row {
justify-content: flex-start !important;
}
}
/* =============================================================================
SmartWizard (plugins/form-wizard) — тема «arrows»: грузится после custom-theme,
перебиваем специфичностью body.vpn-ui.dark …
============================================================================= */
body.vpn-ui.dark .sw-main.sw-theme-arrows,
body.vpn-ui.dark .sw-theme-arrows {
border: 1px solid var(--border) !important;
border-radius: calc(var(--radius) - 4px) !important;
background: var(--card) !important;
box-shadow: none !important;
overflow: hidden;
/* Явный столбец: шаги → контент → тулбар, без налезания */
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
}
body.vpn-ui.dark .sw-main {
border-radius: calc(var(--radius) - 4px) !important;
}
body.vpn-ui.dark .sw-theme-arrows > .sw-container,
body.vpn-ui.dark .sw-theme-arrows .tab-content.sw-container {
background: var(--card) !important;
min-height: 0 !important;
flex: 0 0 auto !important;
position: relative !important;
z-index: 1 !important;
overflow: visible !important;
}
body.vpn-ui.dark .sw-theme-arrows .step-content,
body.vpn-ui.dark .sw-theme-arrows .tab-pane.step-content {
background: var(--card) !important;
color: var(--foreground) !important;
border: none !important;
padding: 1rem 1.25rem !important;
}
/* Тулбар: без отдельного цветного блока — продолжение карточки */
body.vpn-ui.dark .sw-theme-arrows .sw-toolbar {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: flex-end !important;
width: 100% !important;
box-sizing: border-box !important;
background: transparent !important;
border-top: none !important;
padding: 0 1.25rem 1.15rem !important;
margin: 0 !important;
margin-top: auto !important;
box-shadow: none !important;
gap: 0.5rem !important;
position: relative !important;
z-index: 2 !important;
flex-shrink: 0 !important;
}
/* Выйти из «склеенной» группы Bootstrap: свои зазоры и скругления */
body.vpn-ui.dark .sw-theme-arrows .sw-toolbar .sw-btn-group {
display: flex !important;
flex-wrap: wrap !important;
align-items: stretch !important;
justify-content: flex-end !important;
gap: 0.5rem !important;
margin-right: 0 !important;
}
body.vpn-ui.dark .sw-theme-arrows .sw-toolbar .sw-btn-group .btn {
margin: 0 !important;
float: none !important;
position: relative !important;
z-index: 1 !important;
border-radius: calc(var(--radius) - 4px) !important;
font-weight: 600 !important;
padding: 0.5rem 1.15rem !important;
min-height: 2.5rem !important;
flex: 0 0 auto !important;
}
body.vpn-ui.dark .sw-theme-arrows .sw-toolbar .sw-btn-group .btn + .btn {
margin-left: 0 !important;
}
/* «Назад» — контур, как вторичное действие */
body.vpn-ui.dark .sw-theme-arrows .sw-toolbar .btn.sw-btn-prev {
background: transparent !important;
color: var(--foreground) !important;
border: 1px solid var(--border) !important;
}
body.vpn-ui.dark .sw-theme-arrows .sw-toolbar .btn.sw-btn-prev:not(.disabled):hover,
body.vpn-ui.dark .sw-theme-arrows .sw-toolbar .btn.sw-btn-prev:not(.disabled):focus {
background: var(--muted) !important;
color: var(--foreground) !important;
border-color: var(--border) !important;
}
body.vpn-ui.dark .sw-theme-arrows .sw-toolbar .btn.sw-btn-prev.disabled,
body.vpn-ui.dark .sw-theme-arrows .sw-toolbar .btn.sw-btn-prev:disabled {
opacity: 0.55 !important;
cursor: not-allowed !important;
color: var(--muted-foreground) !important;
background: var(--muted) !important;
border-color: var(--border) !important;
-webkit-text-fill-color: var(--muted-foreground) !important;
}
/* «Далее» — primary (класс btn-primary ставится в settings_api.html после init) */
body.vpn-ui.dark .sw-theme-arrows .sw-toolbar .btn.sw-btn-next.btn-primary {
background: var(--primary) !important;
color: var(--primary-foreground) !important;
border: 1px solid var(--primary) !important;
}
body.vpn-ui.dark .sw-theme-arrows .sw-toolbar .btn.sw-btn-next.btn-primary:not(.disabled):hover,
body.vpn-ui.dark .sw-theme-arrows .sw-toolbar .btn.sw-btn-next.btn-primary:not(.disabled):focus {
filter: brightness(1.06);
color: var(--primary-foreground) !important;
border-color: var(--primary) !important;
}
body.vpn-ui.dark .sw-theme-arrows .sw-toolbar .btn.sw-btn-next.disabled,
body.vpn-ui.dark .sw-theme-arrows .sw-toolbar .btn.sw-btn-next:disabled {
opacity: 0.45 !important;
cursor: not-allowed !important;
background: var(--muted) !important;
color: var(--muted-foreground) !important;
border-color: var(--border) !important;
filter: none !important;
}
/* Если скрипт не сменил класс, всё равно оформить «Далее» как primary */
body.vpn-ui.dark .sw-theme-arrows .sw-toolbar .btn.sw-btn-next.btn-secondary:not(.disabled) {
background: var(--primary) !important;
color: var(--primary-foreground) !important;
border-color: var(--primary) !important;
}
/* Телефон: кнопки на всю ширину, «Далее» снизу */
@media (max-width: 575.98px) {
body.vpn-ui.dark .sw-theme-arrows .sw-toolbar {
justify-content: flex-start !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
padding-bottom: 1rem !important;
}
body.vpn-ui.dark .sw-theme-arrows .sw-toolbar .sw-btn-group {
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important;
gap: 0.55rem !important;
}
body.vpn-ui.dark .sw-theme-arrows .sw-toolbar .sw-btn-group .btn {
width: 100% !important;
flex: 1 1 auto !important;
justify-content: center !important;
text-align: center !important;
}
/* Сначала «Назад», ниже основное действие */
body.vpn-ui.dark .sw-theme-arrows .sw-toolbar .sw-btn-group .sw-btn-prev {
order: 1 !important;
}
body.vpn-ui.dark .sw-theme-arrows .sw-toolbar .sw-btn-group .sw-btn-next {
order: 2 !important;
}
}
/* Узкий планшет: две колонки поровну */
@media (min-width: 576px) and (max-width: 767.98px) {
body.vpn-ui.dark .sw-theme-arrows .sw-toolbar .sw-btn-group {
width: 100% !important;
justify-content: stretch !important;
gap: 0.5rem !important;
}
body.vpn-ui.dark .sw-theme-arrows .sw-toolbar .sw-btn-group .btn {
flex: 1 1 calc(50% - 0.25rem) !important;
min-width: 0 !important;
}
}
body.vpn-ui.dark .sw-theme-arrows > ul.step-anchor {
border: 0 !important;
border-bottom: 1px solid var(--border) !important;
padding: 0 !important;
background: var(--muted) !important;
border-radius: 0 !important;
list-style: none !important;
flex-shrink: 0 !important;
}
body.vpn-ui.dark .sw-theme-arrows > ul.step-anchor > li > a,
body.vpn-ui.dark .sw-theme-arrows > ul.step-anchor > li > a:hover {
color: var(--muted-foreground) !important;
text-decoration: none !important;
background: var(--muted) !important;
border: 0 !important;
border-radius: 0 !important;
outline: none !important;
}
body.vpn-ui.dark .sw-theme-arrows > ul.step-anchor > li > a strong {
color: inherit !important;
}
body.vpn-ui.dark .sw-theme-arrows > ul.step-anchor > li > a small {
color: inherit !important;
opacity: 0.9;
}
body.vpn-ui.dark .sw-theme-arrows > ul.step-anchor > li > a:after {
border-top-color: transparent !important;
border-bottom-color: transparent !important;
border-left-color: var(--muted) !important;
}
body.vpn-ui.dark .sw-theme-arrows > ul.step-anchor > li > a:before {
border-top-color: transparent !important;
border-bottom-color: transparent !important;
border-left-color: var(--border) !important;
}
body.vpn-ui.dark .sw-theme-arrows > ul.step-anchor > li > a:hover:after {
border-left-color: var(--muted) !important;
}
body.vpn-ui.dark .sw-theme-arrows > ul.step-anchor > li.clickable > a:hover {
color: var(--primary-foreground) !important;
background: var(--primary) !important;
}
body.vpn-ui.dark .sw-theme-arrows > ul.step-anchor > li.clickable > a:hover:after {
border-left-color: var(--primary) !important;
}
body.vpn-ui.dark .sw-theme-arrows > ul.step-anchor > li.active > a {
border-color: transparent !important;
color: var(--primary-foreground) !important;
background: var(--primary) !important;
}
body.vpn-ui.dark .sw-theme-arrows > ul.step-anchor > li.active > a:after {
border-left-color: var(--primary) !important;
}
body.vpn-ui.dark .sw-theme-arrows > ul.step-anchor > li.done > a {
border-color: transparent !important;
color: var(--foreground) !important;
background: color-mix(in srgb, var(--chart-3) 28%, var(--muted)) !important;
}
body.vpn-ui.dark .sw-theme-arrows > ul.step-anchor > li.done > a:after {
border-left-color: color-mix(in srgb, var(--chart-3) 28%, var(--muted)) !important;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
body.vpn-ui.dark .sw-theme-arrows > ul.step-anchor > li.done > a {
background: rgba(34, 197, 94, 0.22) !important;
}
body.vpn-ui.dark .sw-theme-arrows > ul.step-anchor > li.done > a:after {
border-left-color: rgba(34, 197, 94, 0.22) !important;
}
}
body.vpn-ui.dark .sw-theme-arrows > ul.step-anchor > li.danger > a {
border-color: transparent !important;
color: var(--destructive-foreground) !important;
background: var(--destructive) !important;
}
body.vpn-ui.dark .sw-theme-arrows > ul.step-anchor > li.danger > a:after {
border-left-color: var(--destructive) !important;
}
body.vpn-ui.dark .sw-theme-arrows > ul.step-anchor > li.disabled > a,
body.vpn-ui.dark .sw-theme-arrows > ul.step-anchor > li.disabled > a:hover {
color: var(--muted-foreground) !important;
background: var(--muted) !important;
opacity: 0.45 !important;
}
body.vpn-ui.dark .sw-theme-arrows > ul.step-anchor > li.disabled > a:after {
border-left-color: var(--muted) !important;
}
body.vpn-ui.dark .sw-theme-arrows::before {
border-color: var(--border) !important;
border-top-color: var(--primary) !important;
}
body.vpn-ui.dark .sw-theme-arrows .form-section h4 {
color: var(--foreground) !important;
}
body.vpn-ui.dark .sw-theme-arrows .form-section .form-text,
body.vpn-ui.dark .sw-theme-arrows .form-section .text-muted {
color: var(--muted-foreground) !important;
}
@media screen and (max-width: 768px) {
body.vpn-ui.dark .sw-theme-arrows > ul.step-anchor {
background: var(--muted) !important;
border: 0 !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0.35rem !important;
padding: 0.5rem !important;
border-radius: 0 !important;
}
body.vpn-ui.dark .sw-theme-arrows > ul.step-anchor > li {
width: 100% !important;
max-width: 100% !important;
float: none !important;
}
body.vpn-ui.dark .sw-theme-arrows > ul.step-anchor > li > a,
body.vpn-ui.dark .sw-theme-arrows > ul.step-anchor > li > a:hover {
padding: 0.65rem 0.9rem !important;
border-radius: calc(var(--radius) - 6px) !important;
text-align: left !important;
}
body.vpn-ui.dark .sw-theme-arrows > ul.step-anchor > li > a small {
display: block !important;
margin-top: 0.15rem !important;
font-size: 0.8rem !important;
}
body.vpn-ui.dark .sw-theme-arrows .step-content,
body.vpn-ui.dark .sw-theme-arrows .tab-pane.step-content {
padding: 0.85rem 1rem !important;
}
body.vpn-ui.dark .sw-theme-arrows .form-section {
padding: 0.5rem 0 !important;
}
}
/* =============================================================================
Страница входа (login.html): тёмная карточка и инпуты.
Явные hex + !important — перебивают Bootstrap и кэш; не зависят только от inline.
============================================================================= */
body.vpn-ui.auth-page .auth-card {
background: #0f172a !important;
border: 1px solid #1e293b !important;
color: #f8fafc !important;
}
/* Старый шаблон с ![]()
на сервере: скрыть логотип, пока не зальют актуальный login.html */
body.vpn-ui.auth-page .auth-logo img {
display: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
visibility: hidden !important;
position: absolute !important;
clip-path: inset(50%) !important;
overflow: hidden !important;
pointer-events: none !important;
}
body.vpn-ui.auth-page .auth-card h4,
body.vpn-ui.auth-page .auth-card label,
body.vpn-ui.auth-page .auth-card .custom-control-label {
color: #f8fafc !important;
}
body.vpn-ui.auth-page .auth-card .auth-footer,
body.vpn-ui.auth-page .auth-card .text-muted {
color: #94a3b8 !important;
}
body.vpn-ui.auth-page .auth-card input.form-control,
body.vpn-ui.auth-page .auth-card textarea.form-control {
background-color: #020617 !important;
background: #020617 !important;
color: #f8fafc !important;
border: 1px solid #1e293b !important;
-webkit-text-fill-color: #f8fafc !important;
}
body.vpn-ui.auth-page .auth-card input.form-control::placeholder,
body.vpn-ui.auth-page .auth-card textarea.form-control::placeholder {
color: #94a3b8 !important;
opacity: 1 !important;
}
body.vpn-ui.auth-page .auth-card input.form-control:focus,
body.vpn-ui.auth-page .auth-card textarea.form-control:focus {
background-color: #020617 !important;
color: #f8fafc !important;
border-color: #aff33e !important;
box-shadow: 0 0 0 2px rgba(175, 243, 62, 0.35) !important;
}
body.vpn-ui.auth-page .auth-card .input-group-prepend .input-group-text,
body.vpn-ui.auth-page .auth-card .input-group-append .input-group-text {
background: #1e293b !important;
background-color: #1e293b !important;
border: 1px solid #1e293b !important;
color: #94a3b8 !important;
}
body.vpn-ui.auth-page .auth-card .input-group-prepend .input-group-text {
border-right: 0 !important;
}
body.vpn-ui.auth-page .auth-card .input-group > .form-control {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
body.vpn-ui.auth-page .auth-card input.form-control:-webkit-autofill,
body.vpn-ui.auth-page .auth-card input.form-control:-webkit-autofill:hover,
body.vpn-ui.auth-page .auth-card input.form-control:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px #020617 inset !important;
box-shadow: 0 0 0 1000px #020617 inset !important;
-webkit-text-fill-color: #f8fafc !important;
caret-color: #f8fafc;
border-color: #1e293b !important;
}
body.vpn-ui.auth-page .auth-card input.form-control:-webkit-autofill:focus {
border-color: #aff33e !important;
}
/* =============================================================================
Мастер «Добавление VPN сервера» (#addServerModal) — тёмная тема, токены сайта
============================================================================= */
body.vpn-ui.dark #addServerModal .vpn-server-wizard .body:not(.current) {
display: none !important;
}
body.vpn-ui.dark #addServerModal .vpn-server-wizard__steps {
margin-bottom: 1.25rem;
}
body.vpn-ui.dark #addServerModal .vpn-server-wizard__step-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
}
body.vpn-ui.dark #addServerModal .vpn-server-wizard__step-list > li {
flex: 1 1 0;
min-width: 0;
text-align: center;
position: relative;
}
body.vpn-ui.dark #addServerModal .vpn-server-wizard__step-list > li::after,
body.vpn-ui.dark #addServerModal .vpn-server-wizard__step-list > li::before {
display: none !important;
}
body.vpn-ui.dark #addServerModal a.vpn-server-wizard__step {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
padding: 0.65rem 0.5rem;
border-radius: calc(var(--radius) - 4px);
background: var(--muted) !important;
color: var(--muted-foreground) !important;
border: 1px solid var(--border) !important;
text-decoration: none !important;
font-weight: 600;
font-size: 0.8125rem;
letter-spacing: var(--tracking-normal, -0.01em);
transition:
background 0.2s ease,
color 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease;
}
body.vpn-ui.dark #addServerModal .vpn-server-wizard__step-list > li.current a.vpn-server-wizard__step {
background: var(--primary) !important;
color: var(--primary-foreground) !important;
border-color: var(--primary) !important;
box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 40%, transparent);
}
body.vpn-ui.dark #addServerModal .vpn-server-wizard__step .number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.65rem;
height: 1.65rem;
line-height: 1;
border-radius: 50%;
font-size: 0.75rem;
font-weight: 700;
background: color-mix(in srgb, var(--foreground) 12%, transparent);
color: inherit;
flex-shrink: 0;
}
body.vpn-ui.dark #addServerModal .vpn-server-wizard__step-list > li.current .number {
background: color-mix(in srgb, var(--primary-foreground) 24%, transparent);
color: var(--primary-foreground);
}
body.vpn-ui.dark #addServerModal .vpn-server-wizard__step-label {
line-height: 1.25;
}
body.vpn-ui.dark #addServerModal .vpn-server-wizard__actions {
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--border) !important;
}
body.vpn-ui.dark #addServerModal .vpn-server-wizard__actions ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
}
body.vpn-ui.dark #addServerModal .vpn-server-wizard__btn-next,
body.vpn-ui.dark #addServerModal .vpn-server-wizard__btn-finish,
body.vpn-ui.dark #addServerModal .vpn-server-wizard__btn-back {
border-radius: calc(var(--radius) - 6px) !important;
font-weight: 600 !important;
}
body.vpn-ui.dark #addServerModal .vpn-server-wizard__notice {
background: color-mix(in srgb, var(--muted) 80%, transparent) !important;
border: 1px solid var(--border) !important;
color: var(--muted-foreground) !important;
border-radius: calc(var(--radius) - 4px) !important;
}
body.vpn-ui.dark #addServerModal .vpn-server-wizard__notice .vpn-lucide {
color: var(--primary);
vertical-align: middle;
}
body.vpn-ui.dark #addServerModal .vpn-add-server-modal .content .form-group label {
font-weight: 600;
font-size: 0.875rem;
}