feat: добавлена светлая тема с кнопкой переключения

This commit is contained in:
EgorZuev
2026-02-16 16:12:56 +00:00
parent 6774cd673c
commit 1000d49c1e
7 changed files with 409 additions and 22 deletions

View File

@@ -29,6 +29,46 @@
--transition: 0.2s ease;
}
/* ===== Light Theme ===== */
[data-theme="light"] {
--bg-primary: #e8eaef;
--bg-sidebar: rgba(255, 255, 255, 0.88);
--bg-card: rgba(255, 255, 255, 0.95);
--bg-card-border: rgba(0, 0, 0, 0.22);
--bg-input: rgba(0, 0, 0, 0.08);
--bg-input-focus: rgba(0, 0, 0, 0.12);
--bg-hover: rgba(0, 0, 0, 0.08);
--text-primary: #0f172a;
--text-secondary: #374151;
--text-placeholder: #6b7280;
--accent: #6366f1;
--accent-hover: #4f46e5;
--accent-glow: rgba(99, 102, 241, 0.25);
--error: #dc2626;
--success: #16a34a;
--warning: #d97706;
}
[data-theme="light"] .form-group select option,
[data-theme="light"] .filter-row select option {
background: #fff;
color: #1a1a2e;
}
[data-theme="light"] .nav-item.active {
background: rgba(99, 102, 241, 0.18);
}
[data-theme="light"] .form-group input,
[data-theme="light"] .form-group select,
[data-theme="light"] .filter-row select {
border-color: rgba(0, 0, 0, 0.15);
}
[data-theme="light"] tbody td {
border-bottom-color: rgba(0, 0, 0, 0.08);
}
html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
@@ -40,6 +80,7 @@ body {
color: var(--text-primary);
min-height: 100vh;
display: flex;
transition: background 0.4s ease, color 0.4s ease;
}
/* ===== Sidebar ===== */
@@ -55,6 +96,7 @@ body {
top: 0;
bottom: 0;
z-index: 10;
transition: background 0.4s ease, border-color 0.4s ease;
}
.sidebar-header {
@@ -135,12 +177,18 @@ body {
.topbar {
padding: 1.5rem 2rem;
border-bottom: 1px solid var(--bg-card-border);
transition: border-color 0.4s ease;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.topbar h1 {
font-size: 1.3rem;
font-weight: 700;
letter-spacing: -0.02em;
flex: 1;
}
.content {
@@ -156,16 +204,16 @@ body {
border: 1px solid var(--bg-card-border);
border-radius: var(--radius-md);
padding: 1.5rem;
transition: background 0.4s ease, border-color 0.4s ease;
}
.card h2 {
font-size: 1rem;
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 0.8rem;
}
/* ===== Create Form ===== */
@@ -462,6 +510,44 @@ tbody tr:hover {
backdrop-filter: blur(2px);
}
/* ===== Theme Toggle Button ===== */
.theme-toggle {
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--bg-input);
border: 1px solid var(--bg-card-border);
color: var(--text-primary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
flex-shrink: 0;
}
.theme-toggle svg {
width: 18px;
height: 18px;
transition: transform 0.4s ease;
}
.theme-toggle:hover {
transform: scale(1.1);
box-shadow: 0 4px 16px var(--accent-glow);
}
.theme-toggle:active {
transform: scale(0.95);
}
.theme-toggle--fixed {
position: fixed;
top: 1.25rem;
right: 1.25rem;
z-index: 100;
}
/* ===== Responsive ===== */
@media (max-width: 768px) {
.sidebar {