feat(web): refresh palette, simplify ranking toolbar and drop export
This commit is contained in:
kairee committed
1 parent
6a053bdfe8
commit
c2ef998720
16 files changed
+141
-206
No files matched your search
@@ -1,43 +1,57 @@
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
--bg: #f5f6f8;
|
||||
--surface: #ffffff;
|
||||
--surface-2: #eef1f5;
|
||||
--surface-3: #e5e9ef;
|
||||
--text: #1b1e23;
|
||||
--muted: #6b7280;
|
||||
--border: #e3e7ee;
|
||||
--grid: #e8ebf0;
|
||||
--accent: #fb7299;
|
||||
--accent-strong: #e75c84;
|
||||
--accent-soft: #ffe8ef;
|
||||
--blue: #00aeec;
|
||||
--blue-soft: #e3f7fe;
|
||||
--warning: #d97706;
|
||||
--warning-soft: #fff4df;
|
||||
--danger: #dc2626;
|
||||
--success: #16a34a;
|
||||
--bg: #f7f2ea;
|
||||
--bg-deep: #efe7db;
|
||||
--surface: #fffdf9;
|
||||
--surface-2: #f2ebe0;
|
||||
--surface-3: #e9ddca;
|
||||
--text: #2a201a;
|
||||
--muted: #7b6a58;
|
||||
--faint: #a3927f;
|
||||
--border: #e6d8c4;
|
||||
--grid: #eadfce;
|
||||
--accent: #a9702f;
|
||||
--accent-strong: #8a5417;
|
||||
--accent-soft: #f3e2c5;
|
||||
--accent-contrast: #ffffff;
|
||||
--blue: #5f7f96;
|
||||
--blue-soft: #e3edf3;
|
||||
--pink: #c25a52;
|
||||
--warning: #b9793a;
|
||||
--warning-soft: #f7e6c8;
|
||||
--danger: #b4553f;
|
||||
--success: #5f7a4e;
|
||||
--radius: 16px;
|
||||
--radius-small: 10px;
|
||||
--shadow: 0 8px 30px rgba(20, 28, 45, 0.06);
|
||||
--shadow: 0 10px 30px rgba(42, 32, 26, 0.08);
|
||||
--nav-width: 220px;
|
||||
--nav-height: 64px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg: #0e1014;
|
||||
--surface: #171a20;
|
||||
--surface-2: #20252d;
|
||||
--surface-3: #2a313b;
|
||||
--text: #edf0f4;
|
||||
--muted: #9aa3af;
|
||||
--border: #2a3038;
|
||||
--grid: #2a3038;
|
||||
--accent-soft: #3a2029;
|
||||
--blue-soft: #102f3a;
|
||||
--warning-soft: #3a2a12;
|
||||
--shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
|
||||
--bg: #1b1411;
|
||||
--bg-deep: #140f0c;
|
||||
--surface: #221a15;
|
||||
--surface-2: #2a201a;
|
||||
--surface-3: #342820;
|
||||
--text: #f3e9dc;
|
||||
--muted: #c9b6a0;
|
||||
--faint: #9c8976;
|
||||
--border: #3a2c22;
|
||||
--grid: #3a2c22;
|
||||
--accent: #e9b97c;
|
||||
--accent-strong: #f6d9ae;
|
||||
--accent-soft: #e9b97c29;
|
||||
--accent-contrast: #2a1a10;
|
||||
--blue: #a8bccc;
|
||||
--blue-soft: #a8bccc1f;
|
||||
--pink: #e3958c;
|
||||
--warning: #e9b97c;
|
||||
--warning-soft: #e9b97c1f;
|
||||
--danger: #e3958c;
|
||||
--success: #a7b98f;
|
||||
--shadow: 0 14px 38px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -92,11 +106,11 @@ h1, h2, h3, p { margin: 0; }
|
||||
height: 34px;
|
||||
flex: 0 0 auto;
|
||||
border-radius: 11px;
|
||||
background: linear-gradient(135deg, var(--accent), #ff9fbc);
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, var(--accent-strong), var(--accent));
|
||||
color: var(--accent-contrast);
|
||||
font-weight: 800;
|
||||
font-size: 17px;
|
||||
box-shadow: 0 6px 16px rgba(251, 114, 153, 0.3);
|
||||
box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent);
|
||||
}
|
||||
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
|
||||
.brand-text strong { font-size: 15px; letter-spacing: 0.2px; }
|
||||
@@ -118,11 +132,11 @@ h1, h2, h3, p { margin: 0; }
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #5c3b00;
|
||||
background: #ffd479;
|
||||
color: var(--accent-contrast);
|
||||
background: var(--accent);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.preview-banner { color: #ffe7b0; background: #6b4a00; }
|
||||
.preview-banner { color: var(--accent-contrast); background: var(--accent); }
|
||||
}
|
||||
|
||||
.main-shell {
|
||||
@@ -161,7 +175,7 @@ h1, h2, h3, p { margin: 0; }
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
color: var(--accent-contrast);
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
cursor: pointer;
|
||||
@@ -306,9 +320,9 @@ h1, h2, h3, p { margin: 0; }
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.rank-badge.rank-1 { background: #ffd166; color: #5b3a00; }
|
||||
.rank-badge.rank-2 { background: #dbe3ec; color: #39414d; }
|
||||
.rank-badge.rank-3 { background: #f2c7a5; color: #5c3218; }
|
||||
.rank-badge.rank-1 { background: var(--accent); color: var(--accent-contrast); }
|
||||
.rank-badge.rank-2 { background: var(--accent-soft); color: var(--accent-strong); }
|
||||
.rank-badge.rank-3 { background: var(--surface-3); color: var(--muted); }
|
||||
.video-thumb, .hero-cover, .heat-thumb, .candidate-thumb {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@@ -469,7 +483,7 @@ h1, h2, h3, p { margin: 0; }
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.segmented button.active { background: var(--accent); color: #fff; }
|
||||
.segmented button.active { background: var(--accent); color: var(--accent-contrast); }
|
||||
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
|
||||
.chip-row.scroll-x { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
|
||||
@@ -489,7 +503,17 @@ h1, h2, h3, p { margin: 0; }
|
||||
.chip-label { color: var(--muted); font-size: 11px; padding-right: 2px; }
|
||||
.range-row { margin-top: 8px; }
|
||||
|
||||
.filter-bar { display: flex; gap: 7px; }
|
||||
.rank-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.rank-search { display: flex; flex: 1; min-width: 0; gap: 6px; }
|
||||
.rank-search .search-input { flex: 1; min-width: 0; }
|
||||
@media (max-width: 619px) {
|
||||
.rank-search { flex-basis: 100%; }
|
||||
}
|
||||
.search-input, .select {
|
||||
min-height: 38px;
|
||||
padding: 8px 11px;
|
||||
@@ -613,8 +637,8 @@ h1, h2, h3, p { margin: 0; }
|
||||
.hero-number {
|
||||
padding: 18px;
|
||||
border-radius: var(--radius);
|
||||
background: linear-gradient(135deg, #2b2140, #4a2c4f 55%, #a33d5f);
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, var(--accent-strong), var(--accent) 65%, var(--bg-deep));
|
||||
color: var(--accent-contrast);
|
||||
}
|
||||
.hero-number span { display: block; font-size: 12px; opacity: 0.72; }
|
||||
.hero-number strong { display: block; margin: 4px 0 2px; font-size: 34px; letter-spacing: -1px; }
|
||||
@@ -680,8 +704,9 @@ h1, h2, h3, p { margin: 0; }
|
||||
max-width: min(88vw, 420px);
|
||||
padding: 9px 14px;
|
||||
border-radius: 999px;
|
||||
background: rgba(20, 24, 32, 0.92);
|
||||
color: #fff;
|
||||
background: var(--bg-deep);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
font-size: 12.5px;
|
||||
opacity: 0;
|
||||
transform: translate(-50%, 10px);
|
||||
@@ -689,7 +714,7 @@ h1, h2, h3, p { margin: 0; }
|
||||
transition: opacity 0.18s, transform 0.18s;
|
||||
}
|
||||
.toast.show { opacity: 1; transform: translate(-50%, 0); }
|
||||
.toast.error { background: rgba(160, 30, 45, 0.95); }
|
||||
.toast.error { background: var(--danger); color: #fff7f2; border-color: transparent; }
|
||||
|
||||
@media (min-width: 620px) {
|
||||
.live-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
|
||||
Reference in new issue
Block a user