kcloud/re-xxm
2
0 Fork 0
Code Issues Pull Requests 1 Actions Packages Releases Activity

refactor: optimize video & upper rank page

Browse Source
This commit is contained in:
kairee committed 2026-11-01 23:18:39 +08:00
1 parent cb547e3ced
commit 1b76fdeda1
4 files changed
+132 -125
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

reaction_board/web/static/style.css
+119 -113
View File
@@ -23,7 +23,8 @@
--success: #5f7a4e;
--radius: 16px;
--radius-small: 10px;
--shadow: 0 10px 30px rgba(42, 32, 26, 0.08);
--shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-float: 0 10px 28px rgba(0, 0, 0, 0.14);
--nav-width: 220px;
--nav-height: 64px;
}
@@ -51,7 +52,8 @@
--warning-soft: #e9b97c1f;
--danger: #e3958c;
--success: #a7b98f;
--shadow: 0 14px 38px rgba(0, 0, 0, 0.35);
--shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-float: 0 16px 40px rgba(0, 0, 0, 0.55);
}
}
@@ -68,6 +70,7 @@ body {
"Hiragino Sans GB", "Microsoft YaHei", sans-serif;
font-size: 15px;
line-height: 1.5;
font-variant-numeric: tabular-nums;
-webkit-font-smoothing: antialiased;
}
@@ -75,6 +78,7 @@ a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
img { max-width: 100%; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3, strong, b { font-weight: 600; }
:focus-visible {
outline: 2px solid var(--accent);
@@ -105,15 +109,14 @@ h1, h2, h3, p { margin: 0; }
width: 34px;
height: 34px;
flex: 0 0 auto;
border-radius: 11px;
background: linear-gradient(135deg, var(--accent-strong), var(--accent));
border-radius: 10px;
background: var(--accent);
color: var(--accent-contrast);
font-weight: 800;
font-weight: 700;
font-size: 17px;
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; white-space: nowrap; }
.brand-text strong { font-size: 15px; font-weight: 600; white-space: nowrap; }
.brand-text small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.topbar-hint {
flex: 0 0 auto;
@@ -157,10 +160,10 @@ h1, h2, h3, p { margin: 0; }
position: sticky;
top: 60px;
z-index: 19;
padding: 8px 14px;
padding: 6px 12px;
text-align: center;
font-size: 12px;
font-weight: 600;
font-weight: 500;
color: var(--accent-contrast);
background: var(--accent);
}
@@ -175,7 +178,7 @@ h1, h2, h3, p { margin: 0; }
.page {
display: flex;
flex-direction: column;
gap: 14px;
gap: 16px;
max-width: 1120px;
margin: 0 auto;
}
@@ -185,10 +188,10 @@ h1, h2, h3, p { margin: 0; }
align-items: flex-end;
justify-content: space-between;
gap: 12px;
padding: 4px 2px;
padding: 4px 0;
}
.page-head h1 { font-size: 24px; letter-spacing: -0.4px; }
.page-sub { margin-top: 4px; color: var(--muted); font-size: 12.5px; }
.page-head h1 { font-size: 24px; font-weight: 600; }
.page-sub { margin-top: 4px; color: var(--muted); font-size: 13px; }
.page-head h1 .page-sub { margin-top: 0; margin-left: 8px; font-weight: 400; }
.home-head { align-items: center; }
.back-link { color: var(--muted); font-size: 13px; }
@@ -207,7 +210,7 @@ h1, h2, h3, p { margin: 0; }
background: var(--accent);
color: var(--accent-contrast);
font-size: 13px;
font-weight: 650;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
@@ -257,14 +260,14 @@ h1, h2, h3, p { margin: 0; }
gap: 2px;
border-radius: 10px;
color: var(--muted);
font-size: 10.5px;
font-size: 11px;
}
.nav-item.active { color: var(--accent); background: var(--accent-soft); }
.nav-icon { width: 21px; height: 21px; }
.nav-icon { width: 18px; height: 18px; }
.nav-label { line-height: 1; }
.panel {
padding: 14px;
padding: 16px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
@@ -275,10 +278,10 @@ h1, h2, h3, p { margin: 0; }
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
margin-bottom: 8px;
}
.section-head h2 { font-size: 16px; letter-spacing: -0.2px; }
.section-note { color: var(--muted); font-size: 12px; margin: 4px 0 10px; }
.section-head h2 { font-size: 16px; font-weight: 600; }
.section-note { color: var(--muted); font-size: 12px; margin: 0 0 12px; }
.warning-text { color: var(--warning); }
.danger { color: var(--danger); }
.up { color: var(--success); }
@@ -296,7 +299,7 @@ h1, h2, h3, p { margin: 0; }
background: var(--surface);
}
.live-chip span { display: block; color: var(--muted); font-size: 11px; }
.live-chip strong { display: block; margin-top: 2px; font-size: 17px; letter-spacing: -0.2px; }
.live-chip strong { display: block; margin-top: 2px; font-size: 17px; font-weight: 600; }
a.live-chip { text-decoration: none; color: inherit; transition: border-color 0.15s ease, background 0.15s ease; }
a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.live-chip.accent { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft); }
@@ -308,7 +311,7 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
align-items: center;
justify-content: space-between;
gap: 4px 12px;
padding: 11px 14px;
padding: 12px 16px;
border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
border-radius: 13px;
background: var(--accent-soft);
@@ -324,20 +327,23 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
.video-card, .up-card {
position: relative;
display: grid;
grid-template-columns: 26px 96px minmax(0, 1fr) 12px;
grid-template-columns: 24px 96px minmax(0, 1fr);
align-items: start;
gap: 9px;
padding: 9px;
gap: 12px;
padding: 10px;
border: 1px solid var(--border);
border-radius: 13px;
border-radius: 16px;
background: var(--surface);
transition: border-color 0.15s, transform 0.15s;
transition: border-color 0.15s cubic-bezier(0.22, 1, 0.36, 1),
background-color 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}
.video-card:hover, .up-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); transform: translateY(-1px); }
.video-card.no-rank, .up-card.no-rank { grid-template-columns: 96px minmax(0, 1fr) 12px; }
.video-card:hover, .up-card:hover {
border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.video-card.no-rank, .up-card.no-rank { grid-template-columns: 96px minmax(0, 1fr); }
.video-card.no-rank .video-thumb, .up-card.no-rank .video-thumb { grid-column: 1; }
.video-card.no-rank .video-card-body, .up-card.no-rank .up-card-body { grid-column: 2; }
.video-card.no-rank .card-arrow, .up-card.no-rank .card-arrow { grid-column: 3; }
.rank-badge {
grid-column: 1;
grid-row: 1;
@@ -346,19 +352,18 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
place-items: center;
width: 24px;
height: 24px;
border-radius: 8px;
background: var(--surface-2);
border-radius: 6px;
background: transparent;
color: var(--muted);
font-size: 12px;
font-weight: 700;
font-size: 13px;
font-weight: 600;
}
.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); }
.rank-badge.rank-2, .rank-badge.rank-3 { background: var(--surface-2); color: var(--text); }
.video-thumb, .hero-cover, .media-thumb, .candidate-thumb {
position: relative;
overflow: hidden;
border-radius: 9px;
border-radius: 6px;
background: var(--surface-2);
}
.video-thumb {
@@ -368,10 +373,9 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
aspect-ratio: 16 / 9;
}
.video-thumb img, .hero-cover img, .media-thumb img, .candidate-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-placeholder { display: grid; place-items: center; color: var(--muted); font-size: 10px; }
.cover-placeholder { display: grid; place-items: center; color: var(--muted); font-size: 11px; }
.cover-placeholder img.image-error { opacity: 0; }
.video-card-body { grid-column: 3; grid-row: 1; min-width: 0; }
.up-card-body { grid-column: 3; grid-row: 1; min-width: 0; }
.video-card-body, .up-card-body { grid-column: 3; grid-row: 1; min-width: 0; }
.up-avatar {
grid-column: 2;
grid-row: 1;
@@ -386,7 +390,7 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
place-items: center;
color: var(--muted);
font-size: 20px;
font-weight: 700;
font-weight: 600;
}
.up-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.up-card.no-rank > .up-avatar { grid-column: 1; }
@@ -398,13 +402,14 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
overflow: hidden;
font-size: 14px;
line-height: 1.35;
font-weight: 650;
letter-spacing: -0.1px;
font-weight: 600;
}
/* 标题固定占两行高度（line-height 1.35 × 2），让单行与两行标题的行高一致。 */
.video-card .video-title, .media-title { min-height: 2.7em; }
.video-meta {
display: flex;
flex-wrap: wrap;
gap: 3px 9px;
gap: 4px 10px;
margin-top: 4px;
color: var(--muted);
font-size: 11px;
@@ -413,45 +418,39 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 9px;
margin-top: 5px;
gap: 4px 10px;
margin-top: 6px;
color: var(--muted);
font-size: 11px;
}
.primary-stat { display: inline-flex; align-items: baseline; gap: 3px; color: var(--text); }
.primary-stat b { font-size: 15px; letter-spacing: -0.3px; }
.primary-stat small { color: var(--muted); font-size: 10px; }
.primary-stat { display: inline-flex; align-items: baseline; gap: 4px; color: var(--text); }
.primary-stat b { font-size: 15px; font-weight: 600; }
.primary-stat small { color: var(--muted); font-size: 11px; }
.secondary-stat { white-space: nowrap; }
.secondary-stat.optional { display: none; }
.delta { font-weight: 650; font-size: 11px; }
.delta { font-weight: 600; font-size: 11px; }
.delta.up { color: var(--success); }
.delta.down { color: var(--danger); }
.card-arrow {
grid-column: 4;
grid-row: 1;
align-self: center;
color: var(--muted);
font-size: 18px;
}
/* 统一的响应式媒体网格：移动端 2 列（图片自动缩放），PC 端 3 列。 */
.media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 统一的竖排媒体卡：图 + 两行截断标题 + 作者/数据行 + 高亮数据行。 */
.media-card {
position: relative;
display: flex;
flex-direction: column;
gap: 5px;
padding: 9px;
gap: 6px;
padding: 10px;
border: 1px solid var(--border);
border-radius: 13px;
border-radius: 16px;
background: var(--surface);
transition: border-color 0.15s, transform 0.15s;
transition: border-color 0.15s cubic-bezier(0.22, 1, 0.36, 1),
background-color 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}
.media-card:hover {
border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.media-rank {
position: absolute;
@@ -460,13 +459,13 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
z-index: 1;
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 7px;
width: 24px;
height: 24px;
border-radius: 6px;
background: rgba(0, 0, 0, 0.62);
color: #fff;
font-size: 11px;
font-weight: 700;
font-weight: 600;
}
.media-thumb { width: 100%; aspect-ratio: 16 / 9; }
.media-title {
@@ -474,12 +473,12 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 12.5px;
font-size: 13px;
line-height: 1.35;
font-weight: 650;
font-weight: 600;
}
.media-meta { color: var(--muted); font-size: 10.5px; }
.media-highlight { color: var(--accent); font-size: 10.5px; font-weight: 650; }
.media-meta { color: var(--muted); font-size: 11px; }
.media-highlight { color: var(--accent-strong); font-size: 11px; font-weight: 600; }
.status-grid {
display: grid;
@@ -491,8 +490,8 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
border-radius: 10px;
background: var(--surface-2);
}
.status-grid span { display: block; color: var(--muted); font-size: 10.5px; }
.status-grid strong { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 650; }
.status-grid span { display: block; color: var(--muted); font-size: 11px; }
.status-grid strong { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; }
/* 预计下次运行等 3 项：PC 与移动端都保持一行 */
.status-grid.status-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@@ -531,7 +530,7 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
white-space: nowrap;
cursor: pointer;
}
.chip.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); font-weight: 650; }
.chip.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.chip-label { color: var(--muted); font-size: 11px; padding-right: 2px; }
.range-row { margin-top: 8px; }
@@ -539,10 +538,12 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 10px;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
padding-bottom: 2px;
/* 为键盘焦点环留出绘制空间；负外边距抵消内边距，保持与标题、列表左对齐。 */
padding: 4px;
margin: -4px;
}
.rank-toolbar::-webkit-scrollbar { display: none; }
.rank-toolbar .select-label {
@@ -587,8 +588,8 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
.search-button svg { width: 18px; height: 18px; }
.search-button:hover { color: var(--accent); }
.search-input, .select {
min-height: 38px;
padding: 8px 11px;
min-height: 36px;
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface);
@@ -643,7 +644,7 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
border: 1px solid var(--border);
border-radius: 14px;
background: var(--surface);
box-shadow: var(--shadow);
box-shadow: var(--shadow-float);
}
.range-popover-head {
display: flex;
@@ -689,7 +690,7 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
.range-day:hover { background: var(--surface-2); }
.range-day.in-range { background: var(--accent-soft); color: var(--accent-strong); }
.range-day.is-start,
.range-day.is-end { background: var(--accent); color: var(--accent-contrast); font-weight: 650; }
.range-day.is-end { background: var(--accent); color: var(--accent-contrast); font-weight: 600; }
.range-popover-foot {
display: flex;
align-items: center;
@@ -699,13 +700,18 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
}
.range-hint { color: var(--muted); font-size: 11.5px; }
.rank-list { display: flex; flex-direction: column; gap: 8px; }
.rank-list {
display: grid;
/* 桌面端自动两列；单列时最低 440px，避免整行过宽。 */
grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr));
gap: 8px;
}
.pager {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 8px 0;
padding: 16px 0;
color: var(--muted);
font-size: 12px;
}
@@ -715,9 +721,9 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
flex-direction: column;
align-items: center;
gap: 6px;
padding: 28px 16px;
padding: 32px 16px;
border: 1px dashed var(--border);
border-radius: 13px;
border-radius: 16px;
text-align: center;
color: var(--muted);
}
@@ -748,10 +754,10 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
place-items: center;
color: var(--muted);
font-size: 26px;
font-weight: 700;
font-weight: 600;
}
.hero-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-hero-body h1 { font-size: 19px; line-height: 1.35; letter-spacing: -0.3px; }
.detail-hero-body h1 { font-size: 19px; line-height: 1.35; }
.detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; color: var(--muted); font-size: 12px; }
.compact-hero { padding: 18px; }
@@ -762,7 +768,7 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
border-radius: 999px;
background: var(--surface-2);
color: var(--muted);
font-size: 10.5px;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
@@ -775,33 +781,33 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
.metric-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 7px;
gap: 8px;
}
.metric-cell {
padding: 10px;
padding: 12px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface);
}
.metric-label { display: block; color: var(--muted); font-size: 10.5px; }
.metric-cell strong { display: block; margin-top: 2px; font-size: 17px; letter-spacing: -0.3px; }
.metric-delta { display: inline-block; margin-top: 2px; font-size: 10.5px; font-weight: 650; }
.metric-label { display: block; color: var(--muted); font-size: 11px; }
.metric-cell strong { display: block; margin-top: 2px; font-size: 17px; font-weight: 600; }
.metric-delta { display: inline-block; margin-top: 2px; font-size: 11px; font-weight: 600; }
.metric-delta.up { color: var(--success); }
.metric-delta.down { color: var(--danger); }
.mini-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 7px;
gap: 8px;
}
.mini-stats > div {
padding: 9px 10px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface);
}
.mini-stats span { display: block; color: var(--muted); font-size: 10.5px; }
.mini-stats strong { display: block; margin-top: 2px; font-size: 14px; }
.mini-stats span { display: block; color: var(--muted); font-size: 11px; }
.mini-stats strong { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; }
.up-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chart-panel .chart { width: 100%; height: 240px; margin-top: 8px; }
@@ -824,7 +830,7 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
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; }
.hero-number strong { display: block; margin: 4px 0 2px; font-size: 34px; letter-spacing: -0.02em; }
.hero-number small { opacity: 0.68; font-size: 11px; }
.candidate-list { display: flex; flex-direction: column; gap: 10px; }
@@ -844,8 +850,8 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
.score-badge {
padding: 2px 7px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
font-size: 11px;
font-weight: 600;
background: var(--surface-2);
color: var(--muted);
}
@@ -906,8 +912,8 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
.detail-hero { flex-direction: row; align-items: flex-start; }
.hero-cover { width: 300px; flex: 0 0 300px; }
.video-thumb { width: 112px; }
.video-card, .up-card { grid-template-columns: 28px 112px minmax(0, 1fr) 14px; }
.video-card.no-rank, .up-card.no-rank { grid-template-columns: 112px minmax(0, 1fr) 14px; }
.video-card, .up-card { grid-template-columns: 24px 112px minmax(0, 1fr); }
.video-card.no-rank, .up-card.no-rank { grid-template-columns: 112px minmax(0, 1fr); }
.secondary-stat.optional { display: inline; }
}
@@ -917,7 +923,7 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
.preview-banner { top: 0; margin-left: var(--nav-width); }
.main-shell {
margin-left: var(--nav-width);
padding: 16px 28px 40px;
padding: 16px 24px 40px;
}
.bottom-nav {
top: 0;
@@ -941,12 +947,12 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
flex-direction: row;
justify-content: flex-start;
gap: 10px;
padding: 11px 14px;
padding: 10px 12px;
font-size: 13px;
border-radius: 11px;
border-radius: 10px;
}
.nav-item.active { background: var(--accent-soft); }
.nav-icon { width: 20px; height: 20px; }
.nav-icon { width: 18px; height: 18px; }
.video-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-hero .hero-cover { width: 360px; flex-basis: 360px; }
.toast { left: calc(50% + var(--nav-width) / 2); bottom: 28px; }
@@ -954,18 +960,18 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
}
@media (min-width: 1280px) {
.main-shell { padding-left: 36px; padding-right: 36px; }
.main-shell { padding-left: 32px; padding-right: 32px; }
.video-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric-grid { gap: 9px; }
.metric-grid { gap: 8px; }
}
@media (max-width: 380px) {
.video-card, .up-card { grid-template-columns: 22px 82px minmax(0, 1fr) 10px; gap: 7px; }
.video-card.no-rank, .up-card.no-rank { grid-template-columns: 82px minmax(0, 1fr) 10px; }
.video-thumb { width: 82px; }
.video-card, .up-card { grid-template-columns: 20px 80px minmax(0, 1fr); gap: 8px; }
.video-card.no-rank, .up-card.no-rank { grid-template-columns: 80px minmax(0, 1fr); }
.video-thumb { width: 80px; }
.metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.candidate-card { grid-template-columns: 84px minmax(0, 1fr); }
.candidate-thumb { width: 84px; }
.candidate-card { grid-template-columns: 80px minmax(0, 1fr); }
.candidate-thumb { width: 80px; }
}
.about-page .panel + .panel { margin-top: 12px; }
.about-page .panel h2 { font-size: 15px; margin-bottom: 8px; }