serega404/UniVerse
1
0
Fork 0
Code Issues Pull Requests 10 Actions Packages Projects Releases Wiki Activity

refactor: перевёл цвета на CSS-переменные

Browse Source
This commit is contained in:
Sergey Karmanov
2026-05-14 02:44:44 +03:00
parent a42a305a12
commit fbec0cc08a
20 changed files with 240 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/assets/main.css
+164 -38
View File
@@ -1,28 +1,154 @@
/* UniVerse – Aero Green Design System */
:root {
--color-white: #FFFFFF;
--color-black: #000000;
--color-primary: #22C55E;
--color-primary-dark: #16A34A;
--color-primary-light: #86EFAC;
--color-primary-bright: #4ADE80;
--color-primary-border: #15803D;
--color-aqua: #06B6D4;
--color-aqua-dark: #0E7490;
--color-aqua-light: #67E8F9;
--color-sky: #7DD3FC;
--color-sky-light: #BAE6FD;
--color-white-glass: rgba(255, 255, 255, 0.75);
--color-surface: rgba(255, 255, 255, 0.85);
--color-border-glass: rgba(255, 255, 255, 0.8);
--color-text: #1E293B;
--color-text-secondary: #64748B;
--color-bg-start: #E0F2FE;
--color-bg-mid: #DCFCE7;
--color-error: #EF4444;
--color-error-dark: #DC2626;
--color-error-border: #B91C1C;
--color-success: #22C55E;
--color-success-text: #166534;
--color-warning: #F59E0B;
--gradient-bg: linear-gradient(135deg, #E0F2FE 0%, #DCFCE7 50%, #E0F2FE 100%);
--gradient-brand: linear-gradient(135deg, #22C55E 0%, #06B6D4 60%, #7DD3FC 100%);
--color-warning-text: #92400E;
--color-warning-border: #FDE68A;
--color-brown-dark: #78350F;
--color-danger-text: #991B1B;
--color-danger-light: #FCA5A5;
--color-danger-pale: #FECACA;
--color-info-text: #1E40AF;
--color-info-border: #93C5FD;
--color-orange: #FB923C;
--color-orange-deep: #EA580C;
--color-orange-dark: #C2410C;
--color-yellow: #FCD34D;
--color-purple: #A78BFA;
--color-purple-light: #C4B5FD;
--color-purple-dark: #6D28D9;
--color-gray-400: #9CA3AF;
--color-star: #FBBF24;
--color-white-a10: rgba(255,255,255,0.1);
--color-white-a30: rgba(255,255,255,0.3);
--color-white-a40: rgba(255,255,255,0.4);
--color-white-a50: rgba(255,255,255,0.5);
--color-white-a60: rgba(255,255,255,0.6);
--color-white-a70: rgba(255,255,255,0.7);
--color-white-a72: rgba(255,255,255,0.72);
--color-white-a80: rgba(255,255,255,0.8);
--color-white-a82: rgba(255,255,255,0.82);
--color-white-a86: rgba(255,255,255,0.86);
--color-white-a90: rgba(255,255,255,0.9);
--color-white-a96: rgba(255,255,255,0.96);
--color-black-a04: rgba(0,0,0,0.04);
--color-black-a05: rgba(0,0,0,0.05);
--color-black-a06: rgba(0,0,0,0.06);
--color-black-a08: rgba(0,0,0,0.08);
--color-black-a12: rgba(0,0,0,0.12);
--color-black-a15: rgba(0,0,0,0.15);
--color-black-a20: rgba(0,0,0,0.2);
--color-black-a35: rgba(0,0,0,0.35);
--color-slate-900-a08: rgba(15,23,42,0.08);
--color-slate-900-a14: rgba(15,23,42,0.14);
--color-slate-500-a10: rgba(100,116,139,0.1);
--color-slate-500-a20: rgba(100,116,139,0.2);
--color-primary-a05: rgba(34,197,94,0.05);
--color-primary-a08: rgba(34,197,94,0.08);
--color-primary-a10: rgba(34,197,94,0.1);
--color-primary-a12: rgba(34,197,94,0.12);
--color-primary-a15: rgba(34,197,94,0.15);
--color-primary-a18: rgba(34,197,94,0.18);
--color-primary-a20: rgba(34,197,94,0.2);
--color-primary-a25: rgba(34,197,94,0.25);
--color-primary-a30: rgba(34,197,94,0.3);
--color-primary-a40: rgba(34,197,94,0.4);
--color-primary-a45: rgba(34,197,94,0.45);
--color-primary-a50: rgba(34,197,94,0.5);
--color-primary-light-a12: rgba(134,239,172,0.12);
--color-error-a10: rgba(239,68,68,0.1);
--color-error-a12: rgba(239,68,68,0.12);
--color-error-a20: rgba(239,68,68,0.2);
--color-error-a24: rgba(239,68,68,0.24);
--color-error-a30: rgba(239,68,68,0.3);
--color-error-a40: rgba(239,68,68,0.4);
--color-aqua-a15: rgba(6,182,212,0.15);
--color-aqua-a30: rgba(6,182,212,0.3);
--color-orange-a15: rgba(251,146,60,0.15);
--color-orange-a30: rgba(251,146,60,0.3);
--color-purple-a12: rgba(139,92,246,0.12);
--color-purple-a20: rgba(139,92,246,0.2);
--color-star-a15: rgba(251,191,36,0.15);
--color-star-a20: rgba(251,191,36,0.2);
--color-star-a30: rgba(251,191,36,0.3);
--color-warning-a15: rgba(245,158,11,0.15);
--color-warning-a25: rgba(245,158,11,0.25);
--color-warning-a40: rgba(245,158,11,0.4);
--color-success-bg-a90: rgba(220,252,231,0.9);
--color-success-bg-a95: rgba(220,252,231,0.95);
--color-info-bg-a90: rgba(224,242,254,0.9);
--color-info-bg-a95: rgba(224,242,254,0.95);
--color-danger-bg-a68: rgba(254,242,242,0.68);
--color-danger-bg-a90: rgba(254,226,226,0.9);
--color-danger-bg-a95: rgba(254,226,226,0.95);
--color-warning-bg-a90: rgba(254,243,199,0.9);
--gradient-bg: linear-gradient(135deg, var(--color-bg-start) 0%, var(--color-bg-mid) 50%, var(--color-bg-start) 100%);
--gradient-brand: linear-gradient(135deg, var(--color-primary) 0%, var(--color-aqua) 60%, var(--color-sky) 100%);
--gradient-progress-success: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
--gradient-progress-neutral: linear-gradient(90deg, var(--color-sky), var(--color-sky-light));
--gradient-progress-danger: linear-gradient(90deg, var(--color-danger-light), var(--color-danger-pale));
--gradient-bar-success-vertical: linear-gradient(180deg, var(--color-primary), var(--color-primary-light));
--gradient-bar-neutral-vertical: linear-gradient(180deg, var(--color-sky), var(--color-sky-light));
--gradient-nav-active: linear-gradient(135deg, var(--color-primary-a18), var(--color-primary-light-a12));
--gradient-btn-primary: linear-gradient(180deg, var(--color-primary-bright) 0%, var(--color-primary) 50%, var(--color-primary-dark) 100%);
--gradient-btn-danger: linear-gradient(180deg, var(--color-danger-light) 0%, var(--color-error) 50%, var(--color-error-dark) 100%);
--gradient-btn-shine: linear-gradient(180deg, var(--color-white-a40) 0%, var(--color-white-a10) 100%);
--gradient-stats-green: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
--gradient-stats-aqua: linear-gradient(90deg, var(--color-aqua), var(--color-aqua-light));
--gradient-stats-orange: linear-gradient(90deg, var(--color-orange), var(--color-yellow));
--gradient-stats-purple: linear-gradient(90deg, var(--color-purple), var(--color-purple-light));
--gradient-coin-chip: linear-gradient(135deg, var(--color-star-a20), var(--color-warning-a15));
--gradient-coin-chip-hover: linear-gradient(135deg, var(--color-star-a30), var(--color-warning-a25));
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
--shadow-card: 0 4px 16px rgba(0, 0, 0, 0.06);
--shadow-glass: 0 8px 32px var(--color-black-a08), inset 0 1px 0 var(--color-white-a90);
--shadow-card: 0 4px 16px var(--color-black-a06);
--sidebar-width: 240px;
--topbar-height: 60px;
}
@@ -67,9 +193,9 @@ input, textarea, select {
/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.04); border-radius: 3px; }
::-webkit-scrollbar-thumb { background: rgba(34,197,94,0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(34,197,94,0.5); }
::-webkit-scrollbar-track { background: var(--color-black-a04); border-radius: 3px; }
::-webkit-scrollbar-thumb { background: var(--color-primary-a30); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary-a50); }
/* Glass panel utility */
.glass-panel {
@@ -83,10 +209,10 @@ input, textarea, select {
/* Primary glossy button */
.btn-primary {
background: linear-gradient(180deg, #4ADE80 0%, #22C55E 50%, #16A34A 100%);
border: 1px solid #15803D;
background: var(--gradient-btn-primary);
border: 1px solid var(--color-primary-border);
border-radius: var(--radius-sm);
color: white;
color: var(--color-white);
padding: 10px 20px;
font-weight: 600;
font-size: 14px;
@@ -103,13 +229,13 @@ input, textarea, select {
position: absolute;
top: 0; left: 0; right: 0;
height: 50%;
background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.1) 100%);
background: var(--gradient-btn-shine);
border-radius: 8px 8px 0 0;
pointer-events: none;
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(34,197,94,0.4);
box-shadow: 0 6px 20px var(--color-primary-a40);
}
.btn-primary:active {
transform: translateY(0);
@@ -127,8 +253,8 @@ input, textarea, select {
/* Secondary button */
.btn-secondary {
background: rgba(255,255,255,0.7);
border: 1px solid rgba(34,197,94,0.4);
background: var(--color-white-a70);
border: 1px solid var(--color-primary-a40);
border-radius: var(--radius-sm);
color: var(--color-primary-dark);
padding: 10px 20px;
@@ -142,16 +268,16 @@ input, textarea, select {
backdrop-filter: blur(8px);
}
.btn-secondary:hover {
background: rgba(34,197,94,0.1);
background: var(--color-primary-a10);
border-color: var(--color-primary);
}
/* Danger button */
.btn-danger {
background: linear-gradient(180deg, #FCA5A5 0%, #EF4444 50%, #DC2626 100%);
border: 1px solid #B91C1C;
background: var(--gradient-btn-danger);
border: 1px solid var(--color-error-border);
border-radius: var(--radius-sm);
color: white;
color: var(--color-white);
padding: 10px 20px;
font-weight: 600;
font-size: 14px;
@@ -163,7 +289,7 @@ input, textarea, select {
}
.btn-danger:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(239,68,68,0.4);
box-shadow: 0 6px 20px var(--color-error-a40);
}
/* Ghost button */
@@ -182,14 +308,14 @@ input, textarea, select {
gap: 6px;
}
.btn-ghost:hover {
background: rgba(0,0,0,0.05);
background: var(--color-black-a05);
color: var(--color-text);
}
/* Glass input */
.glass-input {
background: rgba(255,255,255,0.6);
border: 1px solid rgba(255,255,255,0.8);
background: var(--color-white-a60);
border: 1px solid var(--color-border-glass);
border-radius: var(--radius-sm);
padding: 10px 14px;
font-size: 14px;
@@ -199,9 +325,9 @@ input, textarea, select {
backdrop-filter: blur(8px);
}
.glass-input:focus {
background: rgba(255,255,255,0.85);
background: var(--color-surface);
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(34,197,94,0.15);
box-shadow: 0 0 0 3px var(--color-primary-a15);
}
.glass-input::placeholder {
color: var(--color-text-secondary);
@@ -217,20 +343,20 @@ input, textarea, select {
font-weight: 600;
white-space: nowrap;
}
.badge-green { color: #15803D; border: 1.3px solid rgba(34,197,94,0.3); }
.badge-blue { background: rgba(6,182,212,0.15); color: #0E7490; border: 1px solid rgba(6,182,212,0.3); }
.badge-orange { background: rgba(251,146,60,0.15); color: #C2410C; border: 1px solid rgba(251,146,60,0.3); }
.badge-gray { background: rgba(100,116,139,0.1); color: #64748B; border: 1px solid rgba(100,116,139,0.2); }
.badge-red { background: rgba(239,68,68,0.12); color: #B91C1C; border: 1px solid rgba(239,68,68,0.2); }
.badge-purple { background: rgba(139,92,246,0.12); color: #6D28D9; border: 1px solid rgba(139,92,246,0.2); }
.badge-green { color: var(--color-primary-border); border: 1.3px solid var(--color-primary-a30); }
.badge-blue { background: var(--color-aqua-a15); color: var(--color-aqua-dark); border: 1px solid var(--color-aqua-a30); }
.badge-orange { background: var(--color-orange-a15); color: var(--color-orange-dark); border: 1px solid var(--color-orange-a30); }
.badge-gray { background: var(--color-slate-500-a10); color: var(--color-text-secondary); border: 1px solid var(--color-slate-500-a20); }
.badge-red { background: var(--color-error-a12); color: var(--color-error-border); border: 1px solid var(--color-error-a20); }
.badge-purple { background: var(--color-purple-a12); color: var(--color-purple-dark); border: 1px solid var(--color-purple-a20); }
/* Tag chip */
.tag-chip {
display: inline-flex;
align-items: center;
padding: 3px 10px;
background: rgba(34,197,94,0.1);
border: 1px solid rgba(34,197,94,0.25);
background: var(--color-primary-a10);
border: 1px solid var(--color-primary-a25);
border-radius: 20px;
font-size: 12px;
color: var(--color-primary-dark);
@@ -241,7 +367,7 @@ input, textarea, select {
}
.tag-chip:hover,
.tag-chip.active {
background: rgba(34,197,94,0.2);
background: var(--color-primary-a20);
border-color: var(--color-primary);
}
@@ -292,7 +418,7 @@ input, textarea, select {
.font-semibold { font-weight: 600; }
/* Stars rating */
.stars { color: #FBBF24; font-size: 14px; letter-spacing: 1px; }
.stars { color: var(--color-star); font-size: 14px; letter-spacing: 1px; }
/* Animations */
@keyframes fadeIn {
@@ -306,14 +432,14 @@ input, textarea, select {
}
.spinner {
width: 20px; height: 20px;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: white;
border: 2px solid var(--color-white-a30);
border-top-color: var(--color-white);
border-radius: 50%;
animation: spin 0.8s linear infinite;
display: inline-block;
}
.spinner-green {
border-color: rgba(34,197,94,0.2);
border-color: var(--color-primary-a20);
border-top-color: var(--color-primary);
}