568 lines
14 KiB
CSS
568 lines
14 KiB
CSS
/* CSS Custom Properties для темизации */
|
|
|
|
:root {
|
|
/* Светлая тема (обновленная) */
|
|
--background: #fafafa;
|
|
--background-secondary: #f5f5f7;
|
|
--background-tertiary: #e8e8ed;
|
|
--text: #1a1a1f;
|
|
--text-secondary: #6e6e73;
|
|
--text-muted: #86868b;
|
|
--border: #d2d2d7;
|
|
--border-light: #e8e8ed;
|
|
--primary: #8b5cf6;
|
|
--primary-hover: #7c3aed;
|
|
--secondary: #6366f1;
|
|
--success: #10b981;
|
|
--danger: #ef4444;
|
|
--warning: #f59e0b;
|
|
--info: #06b6d4;
|
|
--card-bg: #ffffff;
|
|
--card-border: #d2d2d7;
|
|
--input-bg: #ffffff;
|
|
--input-border: #d2d2d7;
|
|
--input-focus-border: #8b5cf6;
|
|
--dropdown-bg: #ffffff;
|
|
--dropdown-border: #d2d2d7;
|
|
--modal-bg: #ffffff;
|
|
--modal-backdrop: rgba(26, 26, 31, 0.5);
|
|
--navbar-bg: #ffffff;
|
|
--sidebar-bg: #f5f5f7;
|
|
--shadow: rgba(26, 26, 31, 0.1);
|
|
--shadow-lg: rgba(26, 26, 31, 0.12);
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
/* Темная тема - Комфортная ночная палитра */
|
|
--background: #1a1a23;
|
|
--background-secondary: #22222f;
|
|
--background-tertiary: #2a2a3a;
|
|
--text: #e8e8f0;
|
|
--text-secondary: #b8b8c8;
|
|
--text-muted: #9090a0;
|
|
--border: #3a3a4a;
|
|
--border-light: #32323f;
|
|
--primary: #7c3aed;
|
|
--primary-hover: #8b5cf6;
|
|
--secondary: #64748b;
|
|
--success: #22c55e;
|
|
--danger: #f87171;
|
|
--warning: #fbbf24;
|
|
--info: #38bdf8;
|
|
--card-bg: #22222f;
|
|
--card-border: #3a3a4a;
|
|
--input-bg: #1a1a23;
|
|
--input-border: #3a3a4a;
|
|
--input-focus-border: #7c3aed;
|
|
--dropdown-bg: #22222f;
|
|
--dropdown-border: #3a3a4a;
|
|
--modal-bg: #22222f;
|
|
--modal-backdrop: rgba(26, 26, 35, 0.75);
|
|
--navbar-bg: #22222f;
|
|
--sidebar-bg: #1a1a23;
|
|
--shadow: rgba(0, 0, 0, 0.2);
|
|
--shadow-lg: rgba(0, 0, 0, 0.3);
|
|
--accent-glow: rgba(124, 58, 237, 0.1);
|
|
--warm-accent: #fbbf24;
|
|
--cool-accent: #38bdf8;
|
|
}
|
|
|
|
/* Применение темы к основным элементам */
|
|
body {
|
|
background-color: var(--background);
|
|
color: var(--text);
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
/* Bootstrap переопределения для темной темы */
|
|
.card {
|
|
background-color: var(--card-bg);
|
|
border-color: var(--card-border);
|
|
color: var(--text);
|
|
}
|
|
|
|
.modal-content {
|
|
background-color: var(--modal-bg);
|
|
border-color: var(--card-border);
|
|
color: var(--text);
|
|
}
|
|
|
|
.modal-header {
|
|
border-bottom-color: var(--border);
|
|
}
|
|
|
|
.modal-footer {
|
|
border-top-color: var(--border);
|
|
}
|
|
|
|
.form-control {
|
|
background-color: var(--input-bg);
|
|
border-color: var(--input-border);
|
|
color: var(--text);
|
|
}
|
|
|
|
.form-control:focus {
|
|
background-color: var(--input-bg);
|
|
border-color: var(--input-focus-border);
|
|
color: var(--text);
|
|
box-shadow: 0 0 0 0.25rem rgba(139, 92, 246, 0.25);
|
|
}
|
|
|
|
[data-theme="dark"] .form-control:focus {
|
|
box-shadow: 0 0 0 0.25rem rgba(124, 58, 237, 0.25);
|
|
}
|
|
|
|
.form-select {
|
|
background-color: var(--input-bg);
|
|
border-color: var(--input-border);
|
|
color: var(--text);
|
|
}
|
|
|
|
.form-select:focus {
|
|
background-color: var(--input-bg);
|
|
border-color: var(--input-focus-border);
|
|
color: var(--text);
|
|
}
|
|
|
|
.btn-outline-secondary {
|
|
color: var(--text);
|
|
border-color: var(--border);
|
|
}
|
|
|
|
.btn-outline-secondary:hover {
|
|
background-color: var(--background-secondary);
|
|
border-color: var(--border);
|
|
color: var(--text);
|
|
}
|
|
|
|
.dropdown-menu {
|
|
background-color: var(--dropdown-bg);
|
|
border-color: var(--dropdown-border);
|
|
}
|
|
|
|
.dropdown-item {
|
|
color: var(--text);
|
|
}
|
|
|
|
.dropdown-item:hover,
|
|
.dropdown-item:focus {
|
|
background-color: var(--background-secondary);
|
|
color: var(--text);
|
|
}
|
|
|
|
.nav-tabs {
|
|
border-bottom-color: var(--border);
|
|
}
|
|
|
|
.nav-tabs .nav-link {
|
|
color: var(--text-secondary);
|
|
border-color: transparent;
|
|
}
|
|
|
|
.nav-tabs .nav-link:hover {
|
|
border-color: var(--border-light) var(--border-light) var(--border);
|
|
color: var(--text);
|
|
}
|
|
|
|
.nav-tabs .nav-link.active {
|
|
color: var(--text);
|
|
background-color: var(--background);
|
|
border-color: var(--border) var(--border) var(--background);
|
|
}
|
|
|
|
.list-group-item {
|
|
background-color: var(--card-bg);
|
|
border-color: var(--border);
|
|
color: var(--text);
|
|
}
|
|
|
|
.text-muted {
|
|
color: var(--text-muted) !important;
|
|
}
|
|
|
|
.text-secondary {
|
|
color: var(--text-secondary) !important;
|
|
}
|
|
|
|
.border {
|
|
border-color: var(--border) !important;
|
|
}
|
|
|
|
.border-top {
|
|
border-top-color: var(--border) !important;
|
|
}
|
|
|
|
.border-bottom {
|
|
border-bottom-color: var(--border) !important;
|
|
}
|
|
|
|
.border-start {
|
|
border-left-color: var(--border) !important;
|
|
}
|
|
|
|
.border-end {
|
|
border-right-color: var(--border) !important;
|
|
}
|
|
|
|
/* Специальные стили для темной темы */
|
|
[data-theme="dark"] .bg-light {
|
|
background-color: var(--background-secondary) !important;
|
|
}
|
|
|
|
[data-theme="dark"] .bg-white {
|
|
background-color: var(--card-bg) !important;
|
|
}
|
|
|
|
[data-theme="dark"] .text-dark {
|
|
color: var(--text) !important;
|
|
}
|
|
|
|
/* Специальные стили для светлой темы */
|
|
[data-theme="light"] .btn-primary,
|
|
:root .btn-primary {
|
|
background-color: var(--primary);
|
|
border-color: var(--primary);
|
|
color: #ffffff;
|
|
}
|
|
|
|
[data-theme="light"] .btn-primary:hover,
|
|
:root .btn-primary:hover {
|
|
background-color: var(--primary-hover);
|
|
border-color: var(--primary-hover);
|
|
color: #ffffff;
|
|
}
|
|
|
|
[data-theme="light"] .btn-outline-primary,
|
|
:root .btn-outline-primary {
|
|
color: var(--primary);
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
[data-theme="light"] .btn-outline-primary:hover,
|
|
:root .btn-outline-primary:hover {
|
|
background-color: var(--primary);
|
|
border-color: var(--primary);
|
|
color: #ffffff;
|
|
}
|
|
|
|
[data-theme="light"] .card:hover,
|
|
:root .card:hover {
|
|
box-shadow: 0 0.5rem 1rem rgba(139, 92, 246, 0.08);
|
|
transition: box-shadow 0.3s ease;
|
|
}
|
|
|
|
[data-theme="light"] .nav-tabs .nav-link:hover,
|
|
:root .nav-tabs .nav-link:hover {
|
|
color: var(--primary);
|
|
}
|
|
|
|
[data-theme="light"] .nav-tabs .nav-link.active,
|
|
:root .nav-tabs .nav-link.active {
|
|
color: var(--primary);
|
|
border-bottom-color: var(--primary);
|
|
}
|
|
|
|
/* Дополнительные стили для фиолетовой темы */
|
|
[data-theme="dark"] .btn-primary {
|
|
background: linear-gradient(135deg, var(--primary), #9333ea);
|
|
border-color: var(--primary);
|
|
color: #ffffff;
|
|
box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-primary:hover {
|
|
background: linear-gradient(135deg, var(--primary-hover), #a855f7);
|
|
border-color: var(--primary-hover);
|
|
color: #ffffff;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-secondary {
|
|
background-color: var(--secondary);
|
|
border-color: var(--secondary);
|
|
color: #ffffff;
|
|
}
|
|
|
|
[data-theme="dark"] .btn-secondary:hover {
|
|
background-color: #475569;
|
|
border-color: #475569;
|
|
color: #ffffff;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-outline-primary {
|
|
color: var(--primary);
|
|
border-color: var(--primary);
|
|
background: rgba(124, 58, 237, 0.05);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-outline-primary:hover {
|
|
background: var(--primary);
|
|
border-color: var(--primary);
|
|
color: #ffffff;
|
|
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
|
|
}
|
|
|
|
[data-theme="dark"] .navbar {
|
|
background-color: var(--navbar-bg);
|
|
border-bottom: 1px solid var(--border);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
[data-theme="dark"] .card {
|
|
background: linear-gradient(145deg, var(--card-bg), #2a2a3a);
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 12px;
|
|
}
|
|
|
|
[data-theme="dark"] .card:hover {
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
transform: translateY(-2px);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
[data-theme="dark"] .modal-content {
|
|
background: var(--modal-bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 16px;
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
[data-theme="dark"] .form-control,
|
|
[data-theme="dark"] .form-select {
|
|
background-color: var(--input-bg);
|
|
border: 1px solid var(--input-border);
|
|
color: var(--text);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
[data-theme="dark"] .form-control:focus,
|
|
[data-theme="dark"] .form-select:focus {
|
|
background-color: var(--input-bg);
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 0.25rem rgba(124, 58, 237, 0.25);
|
|
outline: none;
|
|
}
|
|
|
|
[data-theme="dark"] .dropdown-item:hover,
|
|
[data-theme="dark"] .dropdown-item:focus {
|
|
background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(124, 58, 237, 0.05));
|
|
color: var(--text);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
[data-theme="dark"] .nav-tabs .nav-link:hover {
|
|
color: var(--primary);
|
|
border-bottom: 2px solid transparent;
|
|
}
|
|
|
|
[data-theme="dark"] .nav-tabs .nav-link.active {
|
|
color: var(--primary);
|
|
background: rgba(124, 58, 237, 0.1);
|
|
border-bottom: 2px solid var(--primary);
|
|
border-radius: 8px 8px 0 0;
|
|
}
|
|
|
|
[data-theme="dark"] .list-group-item:hover {
|
|
background: linear-gradient(135deg, rgba(124, 58, 237, 0.05), rgba(124, 58, 237, 0.02));
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* Анимация переключения темы */
|
|
* {
|
|
transition:
|
|
background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
|
color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
|
border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* Кастомные утилитарные классы для темизации */
|
|
.theme-bg {
|
|
background-color: var(--background);
|
|
}
|
|
|
|
.theme-bg-secondary {
|
|
background-color: var(--background-secondary);
|
|
}
|
|
|
|
.theme-bg-tertiary {
|
|
background-color: var(--background-tertiary);
|
|
}
|
|
|
|
.theme-text {
|
|
color: var(--text);
|
|
}
|
|
|
|
.theme-text-secondary {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.theme-text-muted {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.theme-border {
|
|
border-color: var(--border);
|
|
}
|
|
|
|
.theme-shadow {
|
|
box-shadow: 0 0.125rem 0.25rem var(--shadow);
|
|
}
|
|
|
|
.theme-shadow-lg {
|
|
box-shadow: 0 1rem 3rem var(--shadow-lg);
|
|
}
|
|
|
|
/* Комфортные градиенты для темной темы */
|
|
[data-theme="dark"] .gradient-primary {
|
|
background: linear-gradient(135deg, var(--primary) 0%, #9333ea 100%);
|
|
}
|
|
|
|
[data-theme="dark"] .gradient-card {
|
|
background: linear-gradient(145deg, var(--card-bg) 0%, var(--background-tertiary) 100%);
|
|
border: 1px solid rgba(124, 58, 237, 0.1);
|
|
}
|
|
|
|
/* Улучшенные тени для комфортного восприятия */
|
|
[data-theme="dark"] .enhanced-shadow {
|
|
box-shadow:
|
|
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
|
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
[data-theme="dark"] .enhanced-shadow-lg {
|
|
box-shadow:
|
|
0 20px 25px -5px rgba(0, 0, 0, 0.15),
|
|
0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
/* Специальные классы для ночного режима */
|
|
[data-theme="dark"] .night-comfort {
|
|
filter: brightness(0.95) contrast(1.05);
|
|
}
|
|
|
|
[data-theme="dark"] .text-emphasis {
|
|
color: var(--text);
|
|
font-weight: 500;
|
|
}
|
|
|
|
[data-theme="dark"] .soft-glow {
|
|
box-shadow: 0 0 20px rgba(124, 58, 237, 0.1);
|
|
}
|
|
|
|
/* Адаптивная яркость для различных элементов */
|
|
[data-theme="dark"] .bright-element {
|
|
filter: brightness(1.1);
|
|
}
|
|
|
|
[data-theme="dark"] .dim-element {
|
|
filter: brightness(0.9);
|
|
}
|
|
|
|
/* Гладкие переходы для всех элементов */
|
|
[data-theme="dark"] * {
|
|
transition:
|
|
background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
|
color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
|
border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
|
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
|
transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* Комфортная прокрутка для темной темы */
|
|
[data-theme="dark"] ::-webkit-scrollbar {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
[data-theme="dark"] ::-webkit-scrollbar-track {
|
|
background: var(--background-secondary);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
[data-theme="dark"] ::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(135deg, var(--primary), #9333ea);
|
|
border-radius: 6px;
|
|
border: 2px solid var(--background-secondary);
|
|
}
|
|
|
|
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
|
|
background: linear-gradient(135deg, var(--primary-hover), #a855f7);
|
|
}
|
|
|
|
/* Мягкие стили для фокуса */
|
|
[data-theme="dark"] :focus-visible {
|
|
outline: 2px solid var(--primary);
|
|
outline-offset: 2px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Приятные ссылки */
|
|
[data-theme="dark"] a {
|
|
color: var(--primary);
|
|
text-decoration: none;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
[data-theme="dark"] a:hover {
|
|
color: var(--primary-hover);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Улучшенная типография для ночного чтения */
|
|
[data-theme="dark"] body {
|
|
line-height: 1.6;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
[data-theme="dark"] h1,
|
|
[data-theme="dark"] h2,
|
|
[data-theme="dark"] h3,
|
|
[data-theme="dark"] h4,
|
|
[data-theme="dark"] h5,
|
|
[data-theme="dark"] h6 {
|
|
color: var(--text);
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Мягкие акценты для важных элементов */
|
|
[data-theme="dark"] .alert {
|
|
border: none;
|
|
border-radius: 12px;
|
|
-webkit-backdrop-filter: blur(8px);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
[data-theme="dark"] .alert-info {
|
|
background: linear-gradient(135deg, rgba(56, 189, 248, 0.1), rgba(56, 189, 248, 0.05));
|
|
border-left: 4px solid var(--cool-accent);
|
|
color: var(--text);
|
|
}
|
|
|
|
[data-theme="dark"] .alert-warning {
|
|
background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.05));
|
|
border-left: 4px solid var(--warm-accent);
|
|
color: var(--text);
|
|
}
|
|
|
|
[data-theme="dark"] .alert-danger {
|
|
background: linear-gradient(135deg, rgba(248, 113, 113, 0.1), rgba(248, 113, 113, 0.05));
|
|
border-left: 4px solid var(--danger);
|
|
color: var(--text);
|
|
}
|
|
|
|
[data-theme="dark"] .alert-success {
|
|
background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
|
|
border-left: 4px solid var(--success);
|
|
color: var(--text);
|
|
}
|
|
|
|
/* Комфортные тени и подсветки */
|
|
[data-theme="dark"] .btn:focus,
|
|
[data-theme="dark"] .form-control:focus,
|
|
[data-theme="dark"] .form-select:focus {
|
|
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
|
|
} |