feat: redesign live recorder control console ui
This commit is contained in:
+126
-87
@@ -1,54 +1,55 @@
|
||||
:root {
|
||||
color-scheme: light;
|
||||
font-family: "Inter", "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
font-family: "Segoe UI Variable", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
|
||||
--bg-base: #f3f7fb;
|
||||
--bg-subtle: #eef3f8;
|
||||
--bg-emphasis: #e6eef7;
|
||||
--bg-base: #f6f8fb;
|
||||
--bg-subtle: #f1f5f9;
|
||||
--bg-emphasis: #e8eef7;
|
||||
--surface: #ffffff;
|
||||
--surface-raised: #fbfdff;
|
||||
--surface-muted: #f4f8fc;
|
||||
--surface-strong: #edf4fb;
|
||||
--border-subtle: #d7e1eb;
|
||||
--border-base: #c7d3e1;
|
||||
--border-strong: #a7b7cb;
|
||||
--text-primary: #0d1726;
|
||||
--text-secondary: #425167;
|
||||
--text-muted: #6b7c91;
|
||||
--text-soft: #8f9cb0;
|
||||
--text-inverse: #eff5fb;
|
||||
--accent: #2f6fb4;
|
||||
--accent-strong: #245a92;
|
||||
--accent-soft: rgba(47, 111, 180, 0.12);
|
||||
--info: #2f6fb4;
|
||||
--success: #1f8a63;
|
||||
--warning: #ba7b1f;
|
||||
--danger: #c75151;
|
||||
--focus-ring: rgba(47, 111, 180, 0.2);
|
||||
--shadow-soft: 0 10px 30px rgba(15, 23, 38, 0.06);
|
||||
--shadow-card: 0 18px 42px rgba(15, 23, 38, 0.08);
|
||||
--shadow-float: 0 24px 60px rgba(15, 23, 38, 0.12);
|
||||
--surface-raised: #ffffff;
|
||||
--surface-muted: #f8fafc;
|
||||
--surface-strong: #eff6ff;
|
||||
--border-subtle: #e2e8f0;
|
||||
--border-base: #cbd5e1;
|
||||
--border-strong: #94a3b8;
|
||||
--text-primary: #0f172a;
|
||||
--text-secondary: #334155;
|
||||
--text-muted: #64748b;
|
||||
--text-soft: #94a3b8;
|
||||
--text-inverse: #eff6ff;
|
||||
--accent: #2563eb;
|
||||
--accent-strong: #1d4ed8;
|
||||
--accent-soft: rgba(37, 99, 235, 0.1);
|
||||
--info: #2563eb;
|
||||
--success: #16a34a;
|
||||
--warning: #d97706;
|
||||
--danger: #dc2626;
|
||||
--focus-ring: rgba(37, 99, 235, 0.18);
|
||||
--shadow-soft: 0 12px 30px rgba(15, 23, 42, 0.06);
|
||||
--shadow-card: 0 18px 44px rgba(15, 23, 42, 0.08);
|
||||
--shadow-float: 0 24px 60px rgba(15, 23, 42, 0.14);
|
||||
--sidebar-shell-bg:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.18)),
|
||||
var(--bg-emphasis);
|
||||
--topbar-shell-bg: rgba(255, 255, 255, 0.56);
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 10px;
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.92)),
|
||||
var(--surface);
|
||||
--topbar-shell-bg: rgba(255, 255, 255, 0.9);
|
||||
--radius-sm: 10px;
|
||||
--radius-md: 16px;
|
||||
--radius-lg: 18px;
|
||||
--page-gap: 24px;
|
||||
--content-padding: 28px;
|
||||
--page-max-width: 1280px;
|
||||
--content-padding: 24px;
|
||||
--content-padding-mobile: 16px;
|
||||
--control-height: 40px;
|
||||
--control-height-sm: 34px;
|
||||
--table-row-padding: 16px;
|
||||
--header-row-height: 68px;
|
||||
--header-row-height: 64px;
|
||||
|
||||
--el-color-primary: var(--accent);
|
||||
--el-color-primary-light-3: #5d90ca;
|
||||
--el-color-primary-light-5: #84adde;
|
||||
--el-color-primary-light-7: #bad2ec;
|
||||
--el-color-primary-light-8: #d4e4f3;
|
||||
--el-color-primary-light-9: #ebf3fa;
|
||||
--el-color-primary-light-3: #5b8cf0;
|
||||
--el-color-primary-light-5: #7ba4f5;
|
||||
--el-color-primary-light-7: #a8c3fa;
|
||||
--el-color-primary-light-8: #c7dbfd;
|
||||
--el-color-primary-light-9: #e8f0ff;
|
||||
--el-color-primary-dark-2: var(--accent-strong);
|
||||
--el-color-success: var(--success);
|
||||
--el-color-warning: var(--warning);
|
||||
@@ -58,17 +59,17 @@
|
||||
--el-text-color-secondary: var(--text-muted);
|
||||
--el-border-color: var(--border-base);
|
||||
--el-border-color-light: var(--border-subtle);
|
||||
--el-border-radius-base: var(--radius-md);
|
||||
--el-border-radius-base: var(--radius-sm);
|
||||
--el-bg-color: transparent;
|
||||
--el-fill-color-blank: var(--surface);
|
||||
--el-fill-color-light: var(--surface-muted);
|
||||
--el-fill-color-lighter: var(--surface-strong);
|
||||
--el-mask-color: rgba(7, 13, 22, 0.58);
|
||||
--el-mask-color: rgba(15, 23, 42, 0.54);
|
||||
}
|
||||
|
||||
html[data-density="compact"] {
|
||||
--page-gap: 20px;
|
||||
--content-padding: 22px;
|
||||
--content-padding: 20px;
|
||||
--content-padding-mobile: 14px;
|
||||
--control-height: 36px;
|
||||
--control-height-sm: 30px;
|
||||
@@ -79,43 +80,43 @@ html[data-density="compact"] {
|
||||
html[data-theme="dark"] {
|
||||
color-scheme: dark;
|
||||
|
||||
--bg-base: #07111b;
|
||||
--bg-subtle: #0d1825;
|
||||
--bg-emphasis: #102131;
|
||||
--surface: #0f1b29;
|
||||
--surface-raised: #132233;
|
||||
--surface-muted: #17283a;
|
||||
--surface-strong: #1b2f45;
|
||||
--border-subtle: #22364d;
|
||||
--border-base: #314862;
|
||||
--border-strong: #4a6686;
|
||||
--bg-base: #08111d;
|
||||
--bg-subtle: #0f172a;
|
||||
--bg-emphasis: #132033;
|
||||
--surface: #0f1b2d;
|
||||
--surface-raised: #132236;
|
||||
--surface-muted: #17293f;
|
||||
--surface-strong: #1d3653;
|
||||
--border-subtle: #22334d;
|
||||
--border-base: #334a68;
|
||||
--border-strong: #4b6486;
|
||||
--text-primary: #eaf2fb;
|
||||
--text-secondary: #bdd0e3;
|
||||
--text-muted: #8ca0b6;
|
||||
--text-soft: #6f8399;
|
||||
--text-secondary: #bfd0e6;
|
||||
--text-muted: #8ea3bc;
|
||||
--text-soft: #6f849d;
|
||||
--text-inverse: #08111a;
|
||||
--accent: #5ba8ff;
|
||||
--accent-strong: #3f8de0;
|
||||
--accent-soft: rgba(91, 168, 255, 0.16);
|
||||
--info: #5ba8ff;
|
||||
--accent: #60a5fa;
|
||||
--accent-strong: #3b82f6;
|
||||
--accent-soft: rgba(96, 165, 250, 0.18);
|
||||
--info: #60a5fa;
|
||||
--success: #31c48d;
|
||||
--warning: #f0a23c;
|
||||
--danger: #ef6666;
|
||||
--focus-ring: rgba(91, 168, 255, 0.24);
|
||||
--warning: #f59e0b;
|
||||
--danger: #f87171;
|
||||
--focus-ring: rgba(96, 165, 250, 0.24);
|
||||
--shadow-soft: 0 12px 30px rgba(2, 6, 12, 0.32);
|
||||
--shadow-card: 0 18px 40px rgba(2, 6, 12, 0.4);
|
||||
--shadow-float: 0 24px 60px rgba(2, 6, 12, 0.52);
|
||||
--sidebar-shell-bg:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
|
||||
var(--bg-subtle);
|
||||
--topbar-shell-bg: rgba(15, 27, 41, 0.78);
|
||||
--topbar-shell-bg: rgba(15, 23, 42, 0.84);
|
||||
|
||||
--el-color-primary: var(--accent);
|
||||
--el-color-primary-light-3: #7db9ff;
|
||||
--el-color-primary-light-5: #9ac8ff;
|
||||
--el-color-primary-light-7: #bfdcff;
|
||||
--el-color-primary-light-8: #d8e9ff;
|
||||
--el-color-primary-light-9: #eef6ff;
|
||||
--el-color-primary-light-3: #93c5fd;
|
||||
--el-color-primary-light-5: #bfdbfe;
|
||||
--el-color-primary-light-7: #dbeafe;
|
||||
--el-color-primary-light-8: #e5f0ff;
|
||||
--el-color-primary-light-9: #eff6ff;
|
||||
--el-color-primary-dark-2: var(--accent-strong);
|
||||
--el-text-color-primary: var(--text-primary);
|
||||
--el-text-color-regular: var(--text-secondary);
|
||||
@@ -147,14 +148,36 @@ body,
|
||||
body {
|
||||
color: var(--text-primary);
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(91, 168, 255, 0.06), transparent 24%),
|
||||
radial-gradient(circle at top right, rgba(79, 201, 168, 0.05), transparent 22%),
|
||||
radial-gradient(circle at top left, rgba(37, 99, 235, 0.08), transparent 24%),
|
||||
radial-gradient(circle at top right, rgba(14, 165, 233, 0.06), transparent 22%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.6), transparent 18%),
|
||||
linear-gradient(180deg, var(--bg-base) 0%, var(--bg-subtle) 100%);
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(148, 163, 184, 0.6) transparent;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
border: 2px solid transparent;
|
||||
border-radius: 999px;
|
||||
background: rgba(148, 163, 184, 0.52);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
body,
|
||||
button,
|
||||
input,
|
||||
@@ -178,13 +201,16 @@ select:focus-visible {
|
||||
.page-stack {
|
||||
display: grid;
|
||||
gap: var(--page-gap);
|
||||
width: min(100%, var(--page-max-width));
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
gap: 24px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.page-header > div:first-child {
|
||||
@@ -194,16 +220,16 @@ select:focus-visible {
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: clamp(28px, 2vw, 40px);
|
||||
font-weight: 750;
|
||||
font-size: clamp(30px, 2vw, 42px);
|
||||
font-weight: 780;
|
||||
letter-spacing: -0.045em;
|
||||
line-height: 1.02;
|
||||
line-height: 1;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
max-width: 76ch;
|
||||
margin: 12px 0 0;
|
||||
margin: 14px 0 0;
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
line-height: 1.75;
|
||||
@@ -231,7 +257,9 @@ select:focus-visible {
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-subtle);
|
||||
background: linear-gradient(180deg, var(--surface-raised) 0%, var(--surface) 100%);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98)),
|
||||
var(--surface);
|
||||
box-shadow: var(--shadow-soft);
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
@@ -252,20 +280,20 @@ select:focus-visible {
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
grid-column: span 3;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: 18px;
|
||||
gap: 12px;
|
||||
min-height: 154px;
|
||||
padding: 20px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-subtle);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.42)),
|
||||
var(--surface-muted);
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98)),
|
||||
var(--surface);
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
@@ -285,7 +313,7 @@ html[data-theme="dark"] .stat-card {
|
||||
|
||||
.stat-card__value {
|
||||
color: var(--text-primary);
|
||||
font-size: clamp(26px, 2vw, 36px);
|
||||
font-size: clamp(30px, 2vw, 40px);
|
||||
font-weight: 760;
|
||||
letter-spacing: -0.05em;
|
||||
line-height: 1;
|
||||
@@ -768,7 +796,7 @@ html[data-theme="dark"] .stat-card {
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
border-radius: 12px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid var(--border-base);
|
||||
background: linear-gradient(180deg, var(--surface-raised), var(--surface));
|
||||
box-shadow: var(--shadow-float);
|
||||
@@ -800,9 +828,20 @@ html[data-theme="dark"] .stat-card {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.el-badge__content.is-fixed.is-dot {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.el-dropdown-menu {
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
.stat-card {
|
||||
grid-column: span 6;
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.highlight-grid {
|
||||
|
||||
Reference in New Issue
Block a user