/**
* Цветовые схемы UXBox: задаются на .
* Подключается после style.css — переменные переопределяют базовые значения в layout.
*/
html {
--ux-bg-html: #12141a;
--ux-bg-body: #12141a;
--ux-text-body: #e9e9e9;
--ux-text-muted: #888888;
--ux-sidebar-hr: #333333;
--ux-sidebar-bg: #0e1015;
--ux-sidebar-header-bg: #08080c;
--ux-sidebar-border: #2a2d39;
--ux-sidebar-link: #ced4da;
--ux-sidebar-link-hover: #ffffff;
--ux-sidebar-hover-bg: rgba(0, 242, 255, 0.05);
--ux-sidebar-active-bg: rgba(0, 242, 255, 0.1);
--ux-accent: #00f2ff;
--ux-content-bg: #12141a;
--ux-mobile-topbar-bg: #0e1015;
--ux-card-surface: #1c1f26;
--ux-card-border: #2a2d39;
--ux-footer-border: rgba(0, 242, 255, 0.1);
--ux-neuro-bg: #0a0c10;
--ux-accordion-btn-color: rgba(255, 255, 255, 0.95);
--ux-accordion-chevron-filter: invert(1);
}
html[data-ux-theme="light"] {
--ux-bg-html: #e8ecf2;
--ux-bg-body: #e8ecf2;
--ux-text-body: #1a1d26;
--ux-text-muted: #5c6473;
--ux-sidebar-hr: #cdd5e0;
--ux-sidebar-bg: #ffffff;
--ux-sidebar-header-bg: #f1f4f8;
--ux-sidebar-border: #cdd5e0;
--ux-sidebar-link: #3d4555;
--ux-sidebar-link-hover: #0d1117;
--ux-sidebar-hover-bg: rgba(0, 136, 153, 0.08);
--ux-sidebar-active-bg: rgba(0, 136, 153, 0.14);
--ux-accent: #008899;
--ux-content-bg: #e8ecf2;
--ux-mobile-topbar-bg: #ffffff;
--ux-card-surface: #ffffff;
--ux-card-border: #d0d7e2;
--ux-footer-border: rgba(0, 0, 0, 0.08);
--ux-neuro-bg: #dce2ea;
--ux-accordion-btn-color: #1a1d26;
--ux-accordion-chevron-filter: none;
}
html[data-ux-theme="midnight"] {
--ux-bg-html: #0a0c10;
--ux-bg-body: #0a0c10;
--ux-text-body: #dde2ec;
--ux-text-muted: #7a8499;
--ux-sidebar-hr: #2a3142;
--ux-sidebar-bg: #06070b;
--ux-sidebar-header-bg: #040508;
--ux-sidebar-border: #1e2433;
--ux-sidebar-link: #b4bcc9;
--ux-sidebar-link-hover: #ffffff;
--ux-sidebar-hover-bg: rgba(120, 160, 255, 0.08);
--ux-sidebar-active-bg: rgba(120, 160, 255, 0.15);
--ux-accent: #6eb5ff;
--ux-content-bg: #0a0c10;
--ux-mobile-topbar-bg: #06070b;
--ux-card-surface: #121622;
--ux-card-border: #252b3a;
--ux-footer-border: rgba(110, 181, 255, 0.12);
--ux-neuro-bg: #050608;
--ux-accordion-btn-color: rgba(255, 255, 255, 0.95);
--ux-accordion-chevron-filter: invert(1);
}
html[data-ux-theme="ocean"] {
--ux-bg-html: #0c1218;
--ux-bg-body: #0c1218;
--ux-text-body: #e2eef2;
--ux-text-muted: #7a9aa3;
--ux-sidebar-hr: #2a4550;
--ux-sidebar-bg: #081016;
--ux-sidebar-header-bg: #050c12;
--ux-sidebar-border: #1a3540;
--ux-sidebar-link: #b8d4dc;
--ux-sidebar-link-hover: #ffffff;
--ux-sidebar-hover-bg: rgba(0, 200, 200, 0.08);
--ux-sidebar-active-bg: rgba(0, 200, 200, 0.16);
--ux-accent: #2ee6d6;
--ux-content-bg: #0c1218;
--ux-mobile-topbar-bg: #081016;
--ux-card-surface: #111d24;
--ux-card-border: #224050;
--ux-footer-border: rgba(46, 230, 214, 0.15);
--ux-neuro-bg: #060d12;
--ux-accordion-btn-color: rgba(255, 255, 255, 0.95);
--ux-accordion-chevron-filter: invert(1);
}
html[data-ux-theme="classic"] {
--ux-bg-html: #1c1814;
--ux-bg-body: #1c1814;
--ux-text-body: #ebe6dc;
--ux-text-muted: #a89f91;
--ux-sidebar-hr: #3d342b;
--ux-sidebar-bg: #161310;
--ux-sidebar-header-bg: #100e0c;
--ux-sidebar-border: #3d342b;
--ux-sidebar-link: #d4cbbf;
--ux-sidebar-link-hover: #faf6ef;
--ux-sidebar-hover-bg: rgba(201, 162, 39, 0.08);
--ux-sidebar-active-bg: rgba(201, 162, 39, 0.14);
--ux-accent: #d4a574;
--ux-content-bg: #1c1814;
--ux-mobile-topbar-bg: #161310;
--ux-card-surface: #252018;
--ux-card-border: #403529;
--ux-footer-border: rgba(212, 165, 116, 0.2);
--ux-neuro-bg: #120f0c;
--ux-accordion-btn-color: rgba(250, 246, 239, 0.95);
--ux-accordion-chevron-filter: invert(1);
}
html[data-ux-theme="business"] {
--ux-bg-html: #111827;
--ux-bg-body: #111827;
--ux-text-body: #e5e9f0;
--ux-text-muted: #94a3b8;
--ux-sidebar-hr: #334155;
--ux-sidebar-bg: #0f172a;
--ux-sidebar-header-bg: #0b1220;
--ux-sidebar-border: #1e293b;
--ux-sidebar-link: #cbd5e1;
--ux-sidebar-link-hover: #f8fafc;
--ux-sidebar-hover-bg: rgba(59, 130, 246, 0.1);
--ux-sidebar-active-bg: rgba(59, 130, 246, 0.18);
--ux-accent: #60a5fa;
--ux-content-bg: #111827;
--ux-mobile-topbar-bg: #0f172a;
--ux-card-surface: #1e293b;
--ux-card-border: #334155;
--ux-footer-border: rgba(96, 165, 250, 0.18);
--ux-neuro-bg: #0a0f18;
--ux-accordion-btn-color: rgba(248, 250, 252, 0.95);
--ux-accordion-chevron-filter: invert(1);
}
/* ——— Светлая тема: карточки и типичные utility в области контента ——— */
html[data-ux-theme="light"] .content-wrapper .card.bg-dark,
html[data-ux-theme="light"] .content-wrapper .list-group-item.bg-dark {
background-color: var(--ux-card-surface) !important;
border-color: var(--ux-card-border) !important;
color: var(--ux-text-body) !important;
}
html[data-ux-theme="light"] .content-wrapper .card.bg-dark .card-header,
html[data-ux-theme="light"] .content-wrapper .card.bg-dark .card-body {
background-color: transparent !important;
color: var(--ux-text-body) !important;
border-color: var(--ux-card-border) !important;
}
html[data-ux-theme="light"] .content-wrapper .accordion-item.bg-dark {
background-color: var(--ux-card-surface) !important;
border-color: var(--ux-card-border) !important;
}
html[data-ux-theme="light"] .content-wrapper .accordion-button.bg-dark {
background-color: #f1f4f8 !important;
color: #1a1d26 !important;
}
html[data-ux-theme="light"] .content-wrapper .accordion-button.bg-dark:not(.collapsed) {
background-color: #e2e8f0 !important;
color: #1a1d26 !important;
box-shadow: none;
}
html[data-ux-theme="light"] .content-wrapper .accordion-button.bg-dark::after {
filter: none !important;
}
html[data-ux-theme="light"] .content-wrapper .text-white {
color: #1a1d26 !important;
}
html[data-ux-theme="light"] .content-wrapper .text-white-50 {
color: rgba(26, 29, 38, 0.55) !important;
}
html[data-ux-theme="light"] .content-wrapper .border-secondary {
border-color: var(--ux-card-border) !important;
}
html[data-ux-theme="light"] .content-wrapper .lists-sub-block.card.bg-dark .card-header {
background-color: #f1f4f8 !important;
}
html[data-ux-theme="light"] .content-wrapper .lists-item-card.card.bg-dark {
background-color: #fafbfc !important;
}
html[data-ux-theme="light"] .content-wrapper .lists-accordion .form-label,
html[data-ux-theme="light"] .content-wrapper .lists-accordion label {
color: rgba(26, 29, 38, 0.88) !important;
}
html[data-ux-theme="light"] .content-wrapper .card.bg-dark .form-check-label {
color: rgba(26, 29, 38, 0.92) !important;
}
html[data-ux-theme="light"] .content-wrapper .form-control,
html[data-ux-theme="light"] .content-wrapper .form-select {
background-color: #fff !important;
border-color: #c5cdd8 !important;
color: #1a1d26 !important;
}
html[data-ux-theme="light"] .page-pricing .card.bg-dark,
html[data-ux-theme="light"] .page-pricing .card.bg-dark .card-header,
html[data-ux-theme="light"] .page-pricing .card.bg-dark .card-body,
html[data-ux-theme="light"] .page-pricing .card.bg-dark .card-title,
html[data-ux-theme="light"] .page-pricing .card.bg-dark h1,
html[data-ux-theme="light"] .page-pricing .card.bg-dark h4,
html[data-ux-theme="light"] .page-pricing .card.bg-dark li {
color: #1a1d26 !important;
}
html[data-ux-theme="light"] .page-pricing .card.bg-dark .text-white-50 {
color: rgba(26, 29, 38, 0.55) !important;
}
html[data-ux-theme="light"] body.ux-neuro-active {
background-color: var(--ux-neuro-bg);
}
.ux-sidebar-hr-line {
border-top: 1px solid var(--ux-sidebar-hr) !important;
opacity: 1;
}
html[data-ux-theme="light"] .sidebar .sidebar-header .text-white,
html[data-ux-theme="light"] .sidebar .btn-link.text-white {
color: var(--ux-text-body) !important;
}
html[data-ux-theme="light"] .ux-mobile-topbar .text-white {
color: var(--ux-text-body) !important;
}
html[data-ux-theme="light"] .ux-public-topnav.navbar-dark.bg-dark {
background-color: #ffffff !important;
border-color: var(--ux-card-border) !important;
}
html[data-ux-theme="light"] .ux-public-topnav .navbar-brand,
html[data-ux-theme="light"] .ux-public-topnav .nav-link {
color: #1a1d26 !important;
}
html[data-ux-theme="light"] .ux-public-topnav .navbar-toggler {
border-color: var(--ux-card-border) !important;
}
html[data-ux-theme="light"] .ux-public-topnav .navbar-toggler-icon {
filter: invert(1);
}
html[data-ux-theme="light"] .ux-sidebar-user .text-white-50 {
color: rgba(26, 29, 38, 0.55) !important;
}
html[data-ux-theme="light"] .ux-sidebar-user .text-white,
html[data-ux-theme="light"] .ux-sidebar-user .fw-bold.text-white {
color: var(--ux-text-body) !important;
}
/* ——— Админ-панель (светлая тема): контраст текста и форм ——— */
html[data-ux-theme="light"] body.ux-admin-body .content-wrapper,
html[data-ux-theme="light"] body.ux-admin-body .content-wrapper p,
html[data-ux-theme="light"] body.ux-admin-body .content-wrapper li,
html[data-ux-theme="light"] body.ux-admin-body .content-wrapper span,
html[data-ux-theme="light"] body.ux-admin-body .content-wrapper small {
color: #1a1d26 !important;
}
html[data-ux-theme="light"] body.ux-admin-body .content-wrapper .text-muted,
html[data-ux-theme="light"] body.ux-admin-body .content-wrapper .text-secondary,
html[data-ux-theme="light"] body.ux-admin-body .content-wrapper small.text-white-50 {
color: #5c6473 !important;
}
html[data-ux-theme="light"] body.ux-admin-body .content-wrapper a:not(.btn) {
color: #0066aa !important;
}
html[data-ux-theme="light"] body.ux-admin-body .content-wrapper a:not(.btn):hover {
color: #004477 !important;
}
html[data-ux-theme="light"] body.ux-admin-body .sidebar .text-white {
color: var(--ux-text-body) !important;
}
html[data-ux-theme="light"] body.ux-admin-body .sidebar .text-white-50 {
color: rgba(26, 29, 38, 0.55) !important;
}
html[data-ux-theme="light"] body.ux-admin-body .form-control,
html[data-ux-theme="light"] body.ux-admin-body .form-select {
background-color: #fff !important;
border-color: #c5cdd8 !important;
color: #1a1d26 !important;
}
html[data-ux-theme="light"] body.ux-admin-body .form-control:focus,
html[data-ux-theme="light"] body.ux-admin-body .form-select:focus {
background-color: #fff !important;
border-color: var(--ux-accent) !important;
color: #1a1d26 !important;
box-shadow: 0 0 8px rgba(0, 136, 153, 0.15) !important;
}
html[data-ux-theme="light"] body.ux-admin-body .card.bg-dark,
html[data-ux-theme="light"] body.ux-admin-body .card.bg-dark .card-header,
html[data-ux-theme="light"] body.ux-admin-body .card.bg-dark .card-body {
background-color: #fff !important;
color: #1a1d26 !important;
border-color: var(--ux-card-border) !important;
}
html[data-ux-theme="light"] body.ux-admin-body .card.bg-dark .form-label,
html[data-ux-theme="light"] body.ux-admin-body .card.bg-dark label {
color: #3d4555 !important;
}
html[data-ux-theme="light"] body.ux-admin-body .ux-card {
background: #fff !important;
border-color: var(--ux-card-border) !important;
color: #1a1d26 !important;
}
html[data-ux-theme="light"] body.ux-admin-body .ux-card .card-body {
color: #1a1d26 !important;
}
html[data-ux-theme="light"] body.ux-admin-body .content-wrapper h1,
html[data-ux-theme="light"] body.ux-admin-body .content-wrapper h1.h3,
html[data-ux-theme="light"] body.ux-admin-body .content-wrapper h2.h3 {
color: #1a1d26 !important;
}
/* ——— Тикеты: тред сообщений (ЛК и админка). У .card-header на .bg-dark Bootstrap задаёт тёмный цвет текста — строка «Вы · …» нечитабельна. ——— */
.content-wrapper .tickets-thread .card.bg-dark > .card-header {
color: var(--ux-text-body) !important;
border-bottom-color: var(--ux-card-border) !important;
}
.content-wrapper .tickets-thread .card.bg-dark > .card-header strong,
.content-wrapper .tickets-thread .card.bg-dark > .card-header > span {
color: inherit !important;
}
.content-wrapper .tickets-thread .card.bg-dark > .card-header small.text-secondary,
.content-wrapper .tickets-thread .card.bg-dark > .card-header .text-secondary {
color: var(--ux-text-muted) !important;
}