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/icons/coin.svg
+1 -1
View File
@@ -5,5 +5,5 @@ version: "1.3"
unicode: "eb82"
-->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 9.5C21 11.9853 16.9706 14 12 14M21 9.5C21 7.01472 16.9706 5 12 5C7.02944 5 3 7.01472 3 9.5M21 9.5V15C21 17.2091 16.9706 19 12 19M12 14C7.02944 14 3 11.9853 3 9.5M12 14V19M3 9.5V15C3 17.2091 7.02944 19 12 19M7 18.3264V13.2422M17 18.3264V13.2422" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21 9.5C21 11.9853 16.9706 14 12 14M21 9.5C21 7.01472 16.9706 5 12 5C7.02944 5 3 7.01472 3 9.5M21 9.5V15C21 17.2091 16.9706 19 12 19M12 14C7.02944 14 3 11.9853 3 9.5M12 14V19M3 9.5V15C3 17.2091 7.02944 19 12 19M7 18.3264V13.2422M17 18.3264V13.2422" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 595 B

After

Width:  |  Height:  |  Size: 600 B

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);
}
frontend/src/components/layout/AppBottomNav.vue
+1 -1
View File
@@ -57,7 +57,7 @@ function isActive(to: string) {
left: 0;
right: 0;
height: 60px;
background: rgba(255,255,255,0.9);
background: var(--color-white-a90);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-top: 1px solid var(--color-border-glass);
frontend/src/components/layout/AppSidebar.vue
+4 -4
View File
@@ -66,7 +66,7 @@ function isActive(to: string) {
left: 0;
bottom: 0;
width: var(--sidebar-width);
background: rgba(255,255,255,0.75);
background: var(--color-white-glass);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-right: 1px solid var(--color-border-glass);
@@ -96,14 +96,14 @@ function isActive(to: string) {
transition: all 0.2s;
}
.nav-item:hover {
background: rgba(34,197,94,0.1);
background: var(--color-primary-a10);
color: var(--color-primary-dark);
}
.nav-item.active {
background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(134,239,172,0.12));
background: var(--gradient-nav-active);
color: var(--color-primary-dark);
font-weight: 700;
box-shadow: 0 2px 8px rgba(34,197,94,0.12);
box-shadow: 0 2px 8px var(--color-primary-a12);
}
.nav-icon { flex-shrink: 0; color: currentColor; }
.sidebar-footer {
frontend/src/components/layout/AppTopbar.vue
+17 -17
View File
@@ -153,11 +153,11 @@ onBeforeUnmount(() => {
left: 0;
right: 0;
height: var(--topbar-height);
background: rgba(255,255,255,0.8);
background: var(--color-white-a80);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--color-border-glass);
box-shadow: 0 2px 20px rgba(0,0,0,0.06);
box-shadow: 0 2px 20px var(--color-black-a06);
display: flex;
align-items: center;
justify-content: space-between;
@@ -198,13 +198,13 @@ onBeforeUnmount(() => {
border-radius: 50%;
transition: background 0.2s;
}
.notif-btn:hover { background: rgba(0,0,0,0.05); }
.notif-btn:hover { background: var(--color-black-a05); }
.notif-dot {
position: absolute;
top: -2px;
right: -2px;
background: var(--color-error);
color: #fff;
color: var(--color-white);
font-size: 9px;
font-weight: 700;
width: 16px;
@@ -225,20 +225,20 @@ onBeforeUnmount(() => {
padding: 5px 10px;
border-radius: 20px;
border: 1px solid var(--color-border-glass);
background: rgba(255,255,255,0.5);
background: var(--color-white-a50);
color: var(--color-text);
font: inherit;
transition: all 0.2s;
}
.avatar:hover,
.avatar[aria-expanded="true"] {
border-color: rgba(34,197,94,0.5);
background: rgba(255,255,255,0.8);
box-shadow: 0 0 0 3px rgba(34,197,94,0.12);
border-color: var(--color-primary-a50);
background: var(--color-white-a80);
box-shadow: 0 0 0 3px var(--color-primary-a12);
}
.avatar:focus-visible,
.profile-menu-item:focus-visible {
outline: 2px solid rgba(34,197,94,0.45);
outline: 2px solid var(--color-primary-a45);
outline-offset: 2px;
}
.avatar-icon { color: var(--color-text-secondary); }
@@ -251,8 +251,8 @@ onBeforeUnmount(() => {
padding: 8px;
border: 1px solid var(--color-border-glass);
border-radius: var(--radius-sm);
background: rgba(255,255,255,0.96);
box-shadow: 0 18px 38px rgba(15,23,42,0.14);
background: var(--color-white-a96);
box-shadow: 0 18px 38px var(--color-slate-900-a14);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
display: flex;
@@ -261,8 +261,8 @@ onBeforeUnmount(() => {
z-index: 120;
}
.profile-menu-section {
border-top: 1px solid rgba(15,23,42,0.08);
border-bottom: 1px solid rgba(15,23,42,0.08);
border-top: 1px solid var(--color-slate-900-a08);
border-bottom: 1px solid var(--color-slate-900-a08);
margin: 4px 0;
padding: 6px 0;
}
@@ -292,15 +292,15 @@ onBeforeUnmount(() => {
transition: background 0.2s, color 0.2s;
}
.profile-menu-item:hover {
background: rgba(34,197,94,0.1);
background: var(--color-primary-a10);
color: var(--color-primary-dark);
}
.profile-menu-item.danger {
color: #991B1B;
color: var(--color-danger-text);
}
.profile-menu-item.danger:hover {
background: rgba(239,68,68,0.1);
color: #991B1B;
background: var(--color-error-a10);
color: var(--color-danger-text);
}
@media (max-width: 640px) {
frontend/src/components/ui/AchievementBadge.vue
+4 -4
View File
@@ -56,17 +56,17 @@ defineProps<{
.badge-desc { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 6px; }
.badge-meta { font-size: 11px; color: var(--color-text-secondary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.meta-icon { color: var(--color-text-secondary); }
.locked-msg { color: #9CA3AF; }
.locked-msg { color: var(--color-gray-400); }
.coins-tag {
margin-left: 6px;
background: rgba(251,191,36,0.15);
background: var(--color-star-a15);
border-radius: 10px;
padding: 1px 8px;
color: #92400E;
color: var(--color-warning-text);
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 4px;
}
.coin-icon { color: #92400E; }
.coin-icon { color: var(--color-warning-text); }
</style>
frontend/src/components/ui/CoinChip.vue
+6 -6
View File
@@ -17,8 +17,8 @@ defineProps<{ amount: number }>()
display: inline-flex;
align-items: center;
gap: 5px;
background: linear-gradient(135deg, rgba(251,191,36,0.2), rgba(245,158,11,0.15));
border: 1px solid rgba(245,158,11,0.4);
background: var(--gradient-coin-chip);
border: 1px solid var(--color-warning-a40);
border-radius: 20px;
padding: 5px 12px;
cursor: default;
@@ -26,9 +26,9 @@ defineProps<{ amount: number }>()
white-space: nowrap;
}
.coin-chip:hover {
background: linear-gradient(135deg, rgba(251,191,36,0.3), rgba(245,158,11,0.25));
background: var(--gradient-coin-chip-hover);
}
.coin-icon { color: #78350F; }
.coin-amount { font-weight: 800; font-size: 14px; color: #78350F; }
.coin-label { font-size: 12px; color: #92400E; }
.coin-icon { color: var(--color-brown-dark); }
.coin-amount { font-weight: 800; font-size: 14px; color: var(--color-brown-dark); }
.coin-label { font-size: 12px; color: var(--color-warning-text); }
</style>
frontend/src/components/ui/DataTable.vue
+2 -2
View File
@@ -45,7 +45,7 @@ defineProps<{
font-size: 14px;
}
.data-table th {
background: rgba(255,255,255,0.6);
background: var(--color-white-a60);
border-bottom: 2px solid var(--color-border-glass);
padding: 10px 14px;
font-weight: 600;
@@ -59,7 +59,7 @@ defineProps<{
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td {
background: rgba(34,197,94,0.05);
background: var(--color-primary-a05);
}
.align-left { text-align: left; }
.align-center { text-align: center; }
frontend/src/components/ui/GlassCard.vue
+1 -1
View File
@@ -33,6 +33,6 @@ const { padding, hoverable } = toRefs(props)
}
.hoverable:hover {
transform: translateY(-2px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
box-shadow: 0 12px 40px var(--color-black-a12);
}
</style>
frontend/src/components/ui/LectureCard.vue
+7 -7
View File
@@ -130,7 +130,7 @@ function goDetail() {
}
.lecture-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(34,197,94,0.2);
box-shadow: 0 12px 40px var(--color-black-a12), 0 0 0 1px var(--color-primary-a20);
}
.card-header {
display: flex;
@@ -145,8 +145,8 @@ function goDetail() {
font-weight: 600;
color: var(--color-primary-dark);
}
.seats-low { color: #EA580C; }
.seats-zero { color: #DC2626; }
.seats-low { color: var(--color-orange-deep); }
.seats-zero { color: var(--color-error-dark); }
.card-title {
font-size: 15px;
font-weight: 700;
@@ -203,8 +203,8 @@ function goDetail() {
font-size: 13px;
}
.btn-registered {
background: rgba(34,197,94,0.12);
border: 1px solid rgba(34,197,94,0.3);
background: var(--color-primary-a12);
border: 1px solid var(--color-primary-a30);
border-radius: var(--radius-sm);
color: var(--color-primary-dark);
padding: 7px 14px;
@@ -213,8 +213,8 @@ function goDetail() {
cursor: default;
}
.btn-disabled {
background: rgba(100,116,139,0.1);
border: 1px solid rgba(100,116,139,0.2);
background: var(--color-slate-500-a10);
border: 1px solid var(--color-slate-500-a20);
border-radius: var(--radius-sm);
color: var(--color-text-secondary);
padding: 7px 14px;
frontend/src/components/ui/LoadingSpinner.vue
+1 -1
View File
@@ -12,7 +12,7 @@ defineProps<{ size?: 'sm' | 'md' | 'lg' }>()
.spinner-wrap { display: flex; align-items: center; justify-content: center; padding: 24px; }
.spinner {
border-radius: 50%;
border: 3px solid rgba(34,197,94,0.2);
border: 3px solid var(--color-primary-a20);
border-top-color: var(--color-primary);
animation: spin 0.8s linear infinite;
}
frontend/src/components/ui/ModalDialog.vue
+2 -2
View File
@@ -31,7 +31,7 @@ const emit = defineEmits<{ 'update:modelValue': [v: boolean] }>()
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.35);
background: var(--color-black-a35);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
@@ -43,7 +43,7 @@ const emit = defineEmits<{ 'update:modelValue': [v: boolean] }>()
background: var(--color-surface);
border: 1px solid var(--color-border-glass);
border-radius: var(--radius-lg);
box-shadow: 0 24px 64px rgba(0,0,0,0.2);
box-shadow: 0 24px 64px var(--color-black-a20);
width: 100%;
max-width: 520px;
max-height: 90vh;
frontend/src/components/ui/ProgressBar.vue
+3 -3
View File
@@ -15,7 +15,7 @@ defineProps<{
class="progress-fill"
:style="{
width: `${Math.min(100, (value / (max ?? 100)) * 100)}%`,
background: color ?? 'linear-gradient(90deg, #22C55E, #86EFAC)'
background: color ?? 'var(--gradient-progress-success)'
}"
/>
</div>
@@ -28,7 +28,7 @@ defineProps<{
.progress-label { font-size: 12px; color: var(--color-text-secondary); font-weight: 500; }
.progress-bar {
height: 8px;
background: rgba(0,0,0,0.08);
background: var(--color-black-a08);
border-radius: 4px;
overflow: hidden;
}
@@ -43,7 +43,7 @@ defineProps<{
position: absolute;
top: 0; left: 0; right: 0;
height: 50%;
background: rgba(255,255,255,0.4);
background: var(--color-white-a40);
border-radius: 4px 4px 0 0;
}
.progress-text { font-size: 11px; color: var(--color-text-secondary); }
frontend/src/components/ui/SearchInput.vue
+2 -2
View File
@@ -38,7 +38,7 @@ const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
padding: 10px 16px 10px 38px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border-glass);
background: rgba(255,255,255,0.7);
background: var(--color-white-a70);
backdrop-filter: blur(8px);
font-size: 14px;
color: var(--color-text);
@@ -47,7 +47,7 @@ const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
}
.search-input:focus {
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);
}
.search-input::placeholder { color: var(--color-text-secondary); }
</style>
frontend/src/components/ui/StatsWidget.vue
+4 -4
View File
@@ -43,10 +43,10 @@ defineProps<{
height: 3px;
border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.color-green::after { background: linear-gradient(90deg, #22C55E, #86EFAC); }
.color-aqua::after { background: linear-gradient(90deg, #06B6D4, #67E8F9); }
.color-orange::after { background: linear-gradient(90deg, #FB923C, #FCD34D); }
.color-purple::after { background: linear-gradient(90deg, #A78BFA, #C4B5FD); }
.color-green::after { background: var(--gradient-stats-green); }
.color-aqua::after { background: var(--gradient-stats-aqua); }
.color-orange::after { background: var(--gradient-stats-orange); }
.color-purple::after { background: var(--gradient-stats-purple); }
.widget-icon {
flex-shrink: 0;
frontend/src/components/ui/StatusBadge.vue
+4 -4
View File
@@ -36,8 +36,8 @@ const statusMap: Record<string, { label: string; cls: string }> = {
font-size: 12px;
font-weight: 600;
}
.success { background: rgba(220,252,231,0.9); color: #166534; border: 1px solid #86EFAC; }
.warning { background: rgba(254,243,199,0.9); color: #92400E; border: 1px solid #FDE68A; }
.danger { background: rgba(254,226,226,0.9); color: #991B1B; border: 1px solid #FCA5A5; }
.info { background: rgba(224,242,254,0.9); color: #1E40AF; border: 1px solid #93C5FD; }
.success { background: var(--color-success-bg-a90); color: var(--color-success-text); border: 1px solid var(--color-primary-light); }
.warning { background: var(--color-warning-bg-a90); color: var(--color-warning-text); border: 1px solid var(--color-warning-border); }
.danger { background: var(--color-danger-bg-a90); color: var(--color-danger-text); border: 1px solid var(--color-danger-light); }
.info { background: var(--color-info-bg-a90); color: var(--color-info-text); border: 1px solid var(--color-info-border); }
</style>
frontend/src/components/ui/ToastNotification.vue
+4 -4
View File
@@ -37,13 +37,13 @@ const iconNameMap = { success: 'circle-check', error: 'circle-x', info: 'info-ci
border-radius: var(--radius-md);
font-size: 14px;
font-weight: 500;
box-shadow: 0 8px 32px rgba(0,0,0,0.15);
box-shadow: 0 8px 32px var(--color-black-a15);
pointer-events: all;
max-width: 340px;
}
.success { background: rgba(220,252,231,0.95); border: 1px solid #86EFAC; color: #166534; }
.error { background: rgba(254,226,226,0.95); border: 1px solid #FCA5A5; color: #991B1B; }
.info { background: rgba(224,242,254,0.95); border: 1px solid #93C5FD; color: #1E40AF; }
.success { background: var(--color-success-bg-a95); border: 1px solid var(--color-primary-light); color: var(--color-success-text); }
.error { background: var(--color-danger-bg-a95); border: 1px solid var(--color-danger-light); color: var(--color-danger-text); }
.info { background: var(--color-info-bg-a95); border: 1px solid var(--color-info-border); color: var(--color-info-text); }
.toast-close { margin-left: auto; background: none; border: none; font-size: 18px; cursor: pointer; opacity: 0.6; }
.toast-close:hover { opacity: 1; }
.toast-enter-active, .toast-leave-active { transition: all 0.35s ease; }
frontend/src/views/admin/AdminDashboardView.vue
+3 -3
View File
@@ -101,13 +101,13 @@ onMounted(async () => {
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.bars { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.bar-row { display: grid; grid-template-columns: 1fr 2fr auto; align-items: center; gap: 8px; font-size: 13px; }
.bar { background: rgba(0,0,0,0.08); border-radius: 6px; height: 8px; overflow: hidden; }
.bar-fill { background: linear-gradient(90deg, #22C55E, #86EFAC); height: 100%; }
.bar { background: var(--color-black-a08); border-radius: 6px; height: 8px; overflow: hidden; }
.bar-fill { background: var(--gradient-progress-success); height: 100%; }
.percent { color: var(--color-text-secondary); font-size: 12px; }
.metric { margin-bottom: 10px; color: var(--color-text-secondary); }
.activity { display: flex; gap: 10px; margin-top: 12px; align-items: flex-end; }
.day { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--color-text-secondary); }
.day-bar { width: 16px; background: linear-gradient(180deg, #7DD3FC, #BAE6FD); border-radius: 6px 6px 0 0; }
.day-bar { width: 16px; background: var(--gradient-bar-neutral-vertical); border-radius: 6px 6px 0 0; }
.sync-meta { font-size: 12px; color: var(--color-text-secondary); margin-top: 6px; }
.sync-error { font-size: 12px; color: var(--color-error); margin-top: 8px; }
.queue-meta { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 8px; }
frontend/src/views/admin/AdminLecturesView.vue
+9 -9
View File
@@ -340,8 +340,8 @@ onMounted(() => {
.admin-lectures { display: flex; flex-direction: column; gap: 16px; }
.header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tabs { display: inline-flex; border: 1px solid var(--color-border-glass); border-radius: 12px; overflow: hidden; }
.tabs button { background: rgba(255,255,255,0.7); border: none; padding: 8px 18px; font-size: 13px; cursor: pointer; color: var(--color-text-secondary); }
.tabs button.active { background: rgba(34,197,94,0.18); color: var(--color-primary-dark); font-weight: 600; }
.tabs button { background: var(--color-white-a70); border: none; padding: 8px 18px; font-size: 13px; cursor: pointer; color: var(--color-text-secondary); }
.tabs button.active { background: var(--color-primary-a18); color: var(--color-primary-dark); font-weight: 600; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.form { display: flex; flex-direction: column; gap: 10px; }
@@ -356,8 +356,8 @@ onMounted(() => {
padding: 8px 10px;
border: 1px solid var(--color-border-glass);
border-radius: var(--radius-sm);
background: rgba(255,255,255,0.72);
color: var(--color-text-primary);
background: var(--color-white-a72);
color: var(--color-text);
cursor: pointer;
}
.type-option input { flex: 0 0 auto; }
@@ -366,10 +366,10 @@ onMounted(() => {
.sync-result { font-size: 13px; color: var(--color-text-secondary); }
.sync-error { font-size: 13px; color: var(--color-error); }
.sync-details {
border: 1px solid rgba(239,68,68,0.24);
border: 1px solid var(--color-error-a24);
border-radius: var(--radius-sm);
padding: 8px 10px;
background: rgba(254,242,242,0.68);
background: var(--color-danger-bg-a68);
color: var(--color-text-secondary);
font-size: 12px;
}
@@ -383,8 +383,8 @@ onMounted(() => {
padding: 4px 10px;
font-size: 12px;
color: var(--color-text-secondary);
background: rgba(255,255,255,0.72);
background: var(--color-white-a72);
}
.sync-status.completed { color: #166534; background: rgba(220,252,231,0.9); border-color: #86EFAC; }
.sync-status.failed { color: #991B1B; background: rgba(254,226,226,0.9); border-color: #FCA5A5; }
.sync-status.completed { color: var(--color-success-text); background: var(--color-success-bg-a90); border-color: var(--color-primary-light); }
.sync-status.failed { color: var(--color-danger-text); background: var(--color-danger-bg-a90); border-color: var(--color-danger-light); }
</style>
frontend/src/views/student/ProfileView.vue
+1 -1
View File
@@ -21,7 +21,7 @@ const userMetaLine = computed(() => {
})
const userYearLine = computed(() => {
const year = user.value.year
const year = user.value.year ?? 0
return Number.isFinite(year) && year > 0 ? `${year} курс` : ''
})
const interestTags = ref([