refactor: натравил форматтер на весь фронт
This commit is contained in:
+287
-152
@@ -1,147 +1,184 @@
|
||||
|
||||
:root {
|
||||
--color-white: #FFFFFF;
|
||||
--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-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-aqua: #06b6d4;
|
||||
--color-aqua-dark: #0e7490;
|
||||
--color-aqua-light: #67e8f9;
|
||||
|
||||
--color-sky: #7DD3FC;
|
||||
--color-sky-light: #BAE6FD;
|
||||
--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-text: #1e293b;
|
||||
--color-text-secondary: #64748b;
|
||||
|
||||
--color-bg-start: #E0F2FE;
|
||||
--color-bg-mid: #DCFCE7;
|
||||
--color-bg-start: #e0f2fe;
|
||||
--color-bg-mid: #dcfce7;
|
||||
|
||||
--color-error: #EF4444;
|
||||
--color-error-dark: #DC2626;
|
||||
--color-error-border: #B91C1C;
|
||||
--color-error: #ef4444;
|
||||
--color-error-dark: #dc2626;
|
||||
--color-error-border: #b91c1c;
|
||||
|
||||
--color-success: #22C55E;
|
||||
--color-success: #22c55e;
|
||||
--color-success-text: #166534;
|
||||
|
||||
--color-warning: #F59E0B;
|
||||
--color-warning-text: #92400E;
|
||||
--color-warning-border: #FDE68A;
|
||||
--color-warning: #f59e0b;
|
||||
--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-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-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-purple: #a78bfa;
|
||||
--color-purple-light: #c4b5fd;
|
||||
--color-purple-dark: #6d28d9;
|
||||
|
||||
--color-gray-400: #9CA3AF;
|
||||
--color-star: #FBBF24;
|
||||
--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-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-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-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-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-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-a25: rgba(6,182,212,0.25);
|
||||
--color-aqua-a30: rgba(6,182,212,0.3);
|
||||
--color-aqua-a40: rgba(6,182,212,0.4);
|
||||
--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-aqua-a15: rgba(6, 182, 212, 0.15);
|
||||
--color-aqua-a25: rgba(6, 182, 212, 0.25);
|
||||
--color-aqua-a30: rgba(6, 182, 212, 0.3);
|
||||
--color-aqua-a40: rgba(6, 182, 212, 0.4);
|
||||
--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);
|
||||
--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-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-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-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-primary-a25) 0%, var(--color-aqua-a25) 100%);
|
||||
--gradient-coin-chip-hover: linear-gradient(135deg, var(--color-primary-a40) 0%, var(--color-aqua-a40) 100%);
|
||||
--gradient-coin-chip: linear-gradient(
|
||||
135deg,
|
||||
var(--color-primary-a25) 0%,
|
||||
var(--color-aqua-a25) 100%
|
||||
);
|
||||
--gradient-coin-chip-hover: linear-gradient(
|
||||
135deg,
|
||||
var(--color-primary-a40) 0%,
|
||||
var(--color-aqua-a40) 100%
|
||||
);
|
||||
--color-coin-chip-border: var(--color-primary-a45);
|
||||
--color-coin-chip-text: var(--color-primary-border);
|
||||
--color-coin-chip-label: var(--color-primary-border);
|
||||
@@ -155,15 +192,19 @@
|
||||
--topbar-height: 60px;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
font-family:
|
||||
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color: var(--color-text);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@@ -175,7 +216,6 @@ body {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
color: var(--color-primary-dark);
|
||||
text-decoration: none;
|
||||
@@ -188,16 +228,29 @@ button {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input, textarea, select {
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
::-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); }
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
::-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 {
|
||||
@@ -239,7 +292,9 @@ input, textarea, select {
|
||||
box-shadow: 0 8px 18px var(--color-primary-a15);
|
||||
}
|
||||
.btn-primary:focus-visible {
|
||||
box-shadow: 0 0 0 3px var(--color-primary-a20), 0 2px 8px var(--color-primary-a08);
|
||||
box-shadow:
|
||||
0 0 0 3px var(--color-primary-a20),
|
||||
0 2px 8px var(--color-primary-a08);
|
||||
}
|
||||
.btn-primary:active {
|
||||
background: var(--color-primary-a30);
|
||||
@@ -312,7 +367,9 @@ input, textarea, select {
|
||||
box-shadow: 0 8px 18px var(--color-error-a12);
|
||||
}
|
||||
.btn-danger:focus-visible {
|
||||
box-shadow: 0 0 0 3px var(--color-error-a20), 0 2px 8px var(--color-error-a10);
|
||||
box-shadow:
|
||||
0 0 0 3px var(--color-error-a20),
|
||||
0 2px 8px var(--color-error-a10);
|
||||
}
|
||||
.btn-danger:active {
|
||||
background: var(--color-danger-pale);
|
||||
@@ -380,12 +437,35 @@ input, textarea, select {
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.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); }
|
||||
.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 {
|
||||
@@ -430,45 +510,101 @@ input, textarea, select {
|
||||
}
|
||||
|
||||
/* Grid helpers */
|
||||
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
|
||||
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
|
||||
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
|
||||
.grid-2 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
.grid-3 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
.grid-4 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
|
||||
.page-content { padding: 16px; }
|
||||
.grid-2,
|
||||
.grid-3,
|
||||
.grid-4 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.page-content {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Flex helpers */
|
||||
.flex { display: flex; }
|
||||
.flex-col { display: flex; flex-direction: column; }
|
||||
.items-center { align-items: center; }
|
||||
.justify-between { justify-content: space-between; }
|
||||
.gap-2 { gap: 8px; }
|
||||
.gap-3 { gap: 12px; }
|
||||
.gap-4 { gap: 16px; }
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.flex-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.gap-2 {
|
||||
gap: 8px;
|
||||
}
|
||||
.gap-3 {
|
||||
gap: 12px;
|
||||
}
|
||||
.gap-4 {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* Text helpers */
|
||||
.text-sm { font-size: 12px; }
|
||||
.text-secondary { color: var(--color-text-secondary); }
|
||||
.font-bold { font-weight: 700; }
|
||||
.font-semibold { font-weight: 600; }
|
||||
.text-sm {
|
||||
font-size: 12px;
|
||||
}
|
||||
.text-secondary {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
.font-semibold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Stars rating */
|
||||
.stars { color: var(--color-star); font-size: 14px; letter-spacing: 1px; }
|
||||
.stars {
|
||||
color: var(--color-star);
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.fade-in {
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
.fade-in { animation: fadeIn 0.3s ease; }
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.spinner {
|
||||
width: 20px; height: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid var(--color-white-a30);
|
||||
border-top-color: var(--color-white);
|
||||
border-radius: 50%;
|
||||
@@ -480,7 +616,6 @@ input, textarea, select {
|
||||
border-top-color: var(--color-primary);
|
||||
}
|
||||
|
||||
|
||||
#app {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user