This commit is contained in:
257
frontend/linktree-frontend/src/app/styles/themes.css
Normal file
257
frontend/linktree-frontend/src/app/styles/themes.css
Normal file
@@ -0,0 +1,257 @@
|
||||
/* CSS Custom Properties для темизации */
|
||||
|
||||
:root {
|
||||
/* Светлая тема (по умолчанию) */
|
||||
--background: #ffffff;
|
||||
--background-secondary: #f8f9fa;
|
||||
--background-tertiary: #e9ecef;
|
||||
--text: #212529;
|
||||
--text-secondary: #6c757d;
|
||||
--text-muted: #868e96;
|
||||
--border: #dee2e6;
|
||||
--border-light: #e9ecef;
|
||||
--primary: #0d6efd;
|
||||
--primary-hover: #0b5ed7;
|
||||
--secondary: #6c757d;
|
||||
--success: #198754;
|
||||
--danger: #dc3545;
|
||||
--warning: #ffc107;
|
||||
--info: #0dcaf0;
|
||||
--card-bg: #ffffff;
|
||||
--card-border: #dee2e6;
|
||||
--input-bg: #ffffff;
|
||||
--input-border: #ced4da;
|
||||
--input-focus-border: #86b7fe;
|
||||
--dropdown-bg: #ffffff;
|
||||
--dropdown-border: #dee2e6;
|
||||
--modal-bg: #ffffff;
|
||||
--modal-backdrop: rgba(0, 0, 0, 0.5);
|
||||
--navbar-bg: #ffffff;
|
||||
--sidebar-bg: #f8f9fa;
|
||||
--shadow: rgba(0, 0, 0, 0.175);
|
||||
--shadow-lg: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
/* Темная тема */
|
||||
--background: #0d1117;
|
||||
--background-secondary: #161b22;
|
||||
--background-tertiary: #21262d;
|
||||
--text: #f0f6fc;
|
||||
--text-secondary: #8b949e;
|
||||
--text-muted: #656d76;
|
||||
--border: #30363d;
|
||||
--border-light: #21262d;
|
||||
--primary: #4fb3ff;
|
||||
--primary-hover: #58a6ff;
|
||||
--secondary: #8b949e;
|
||||
--success: #3fb950;
|
||||
--danger: #f85149;
|
||||
--warning: #d29922;
|
||||
--info: #56d4dd;
|
||||
--card-bg: #161b22;
|
||||
--card-border: #30363d;
|
||||
--input-bg: #0d1117;
|
||||
--input-border: #30363d;
|
||||
--input-focus-border: #58a6ff;
|
||||
--dropdown-bg: #161b22;
|
||||
--dropdown-border: #30363d;
|
||||
--modal-bg: #161b22;
|
||||
--modal-backdrop: rgba(0, 0, 0, 0.7);
|
||||
--navbar-bg: #161b22;
|
||||
--sidebar-bg: #0d1117;
|
||||
--shadow: rgba(0, 0, 0, 0.4);
|
||||
--shadow-lg: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Применение темы к основным элементам */
|
||||
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(13, 110, 253, 0.25);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .form-control:focus {
|
||||
box-shadow: 0 0 0 0.25rem rgba(88, 166, 255, 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;
|
||||
}
|
||||
|
||||
/* Анимация переключения темы */
|
||||
* {
|
||||
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Кастомные утилитарные классы для темизации */
|
||||
.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);
|
||||
}
|
||||
Reference in New Issue
Block a user