feat(dashboard): unify global UI theme across all admin templates
This commit is contained in:
liuwei
@@ -8,31 +8,33 @@
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--bg: #f4f7fb;
|
||||
--bg-soft: #eef3f8;
|
||||
--surface: rgba(255, 255, 255, 0.86);
|
||||
--bg: #eef3ef;
|
||||
--bg-deep: #e4ebe6;
|
||||
--surface: rgba(255, 255, 255, 0.82);
|
||||
--surface-strong: #ffffff;
|
||||
--surface-muted: #f8fafc;
|
||||
--border: rgba(148, 163, 184, 0.18);
|
||||
--border-strong: rgba(148, 163, 184, 0.26);
|
||||
--text: #0f172a;
|
||||
--text-soft: #475569;
|
||||
--text-faint: #94a3b8;
|
||||
--primary: #4f46e5;
|
||||
--primary-soft: rgba(79, 70, 229, 0.10);
|
||||
--primary-soft-2: rgba(99, 102, 241, 0.16);
|
||||
--info: #3b82f6;
|
||||
--success: #10b981;
|
||||
--warning: #f59e0b;
|
||||
--danger: #ef4444;
|
||||
--shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.06);
|
||||
--shadow-md: 0 18px 48px rgba(15, 23, 42, 0.08);
|
||||
--surface-muted: #f6f9f7;
|
||||
--border: rgba(101, 121, 113, 0.20);
|
||||
--border-strong: rgba(73, 91, 84, 0.30);
|
||||
--text: #15211b;
|
||||
--text-soft: #3f5148;
|
||||
--text-faint: #6d8177;
|
||||
--primary: #0f766e;
|
||||
--primary-strong: #0b5e57;
|
||||
--primary-soft: rgba(15, 118, 110, 0.10);
|
||||
--accent: #ea580c;
|
||||
--accent-soft: rgba(234, 88, 12, 0.12);
|
||||
--info: #0ea5e9;
|
||||
--success: #159467;
|
||||
--warning: #d97706;
|
||||
--danger: #dc2626;
|
||||
--shadow-sm: 0 10px 30px rgba(21, 33, 27, 0.08);
|
||||
--shadow-md: 0 24px 60px rgba(21, 33, 27, 0.10);
|
||||
--radius-xs: 10px;
|
||||
--radius-sm: 14px;
|
||||
--radius-md: 18px;
|
||||
--radius-lg: 24px;
|
||||
--topbar-height: 72px;
|
||||
--subnav-height: 64px;
|
||||
--radius-md: 20px;
|
||||
--radius-lg: 28px;
|
||||
--topbar-height: 74px;
|
||||
--subnav-height: 66px;
|
||||
--content-padding: 24px;
|
||||
}
|
||||
|
||||
@@ -50,11 +52,42 @@
|
||||
overflow: hidden;
|
||||
color: var(--text);
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(99, 102, 241, 0.10), transparent 28%),
|
||||
radial-gradient(circle at top right, rgba(56, 189, 248, 0.08), transparent 24%),
|
||||
linear-gradient(180deg, #f8fafc 0%, #f3f6fb 100%);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||||
radial-gradient(circle at 8% 2%, rgba(15, 118, 110, 0.18), transparent 34%),
|
||||
radial-gradient(circle at 93% 10%, rgba(234, 88, 12, 0.11), transparent 28%),
|
||||
linear-gradient(165deg, var(--bg) 0%, var(--bg-deep) 100%);
|
||||
font-family: "Avenir Next", "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
body::before,
|
||||
body::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
body::before {
|
||||
inset: 0;
|
||||
opacity: 0.28;
|
||||
background-image:
|
||||
linear-gradient(rgba(59, 76, 68, 0.06) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(59, 76, 68, 0.06) 1px, transparent 1px);
|
||||
background-size: 42px 42px;
|
||||
mask-image: radial-gradient(circle at 50% 20%, black 34%, transparent 76%);
|
||||
-webkit-mask-image: radial-gradient(circle at 50% 20%, black 34%, transparent 76%);
|
||||
}
|
||||
|
||||
body::after {
|
||||
width: 44vmax;
|
||||
height: 44vmax;
|
||||
right: -16vmax;
|
||||
bottom: -22vmax;
|
||||
border-radius: 50%;
|
||||
background:
|
||||
radial-gradient(circle at 32% 32%, rgba(14, 165, 233, 0.18), transparent 58%),
|
||||
radial-gradient(circle at 70% 60%, rgba(234, 88, 12, 0.14), transparent 64%);
|
||||
filter: blur(10px);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, p {
|
||||
@@ -64,7 +97,9 @@
|
||||
.app-container {
|
||||
min-height: 100vh;
|
||||
opacity: 0;
|
||||
transition: opacity .24s ease;
|
||||
transition: opacity .32s ease;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.app-container.loaded {
|
||||
@@ -79,13 +114,13 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
gap: 20px;
|
||||
padding: 0 24px;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
background: linear-gradient(180deg, rgba(246, 250, 247, 0.92), rgba(244, 249, 245, 0.80));
|
||||
backdrop-filter: blur(18px);
|
||||
-webkit-backdrop-filter: blur(18px);
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
|
||||
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
|
||||
border-bottom: 1px solid rgba(83, 102, 93, 0.18);
|
||||
box-shadow: 0 12px 32px rgba(20, 32, 26, 0.06);
|
||||
}
|
||||
|
||||
.topbar-left,
|
||||
@@ -104,11 +139,12 @@
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 14px;
|
||||
object-fit: cover;
|
||||
box-shadow: 0 10px 20px rgba(79, 70, 229, 0.16);
|
||||
border: 1px solid rgba(255, 255, 255, 0.8);
|
||||
box-shadow: 0 12px 24px rgba(15, 118, 110, 0.20);
|
||||
}
|
||||
|
||||
.brand-copy {
|
||||
@@ -134,14 +170,14 @@
|
||||
.main-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
overflow-x: auto;
|
||||
padding: 4px;
|
||||
padding: 5px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255,255,255,0.58);
|
||||
border: 1px solid rgba(148, 163, 184, 0.14);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
|
||||
background: rgba(255, 255, 255, 0.68);
|
||||
border: 1px solid rgba(99, 120, 111, 0.20);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
|
||||
}
|
||||
|
||||
.main-nav::-webkit-scrollbar,
|
||||
@@ -174,14 +210,15 @@
|
||||
}
|
||||
|
||||
.main-nav-link:hover {
|
||||
background: rgba(255,255,255,0.92);
|
||||
color: var(--text);
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.main-nav-link.is-active {
|
||||
color: var(--primary);
|
||||
background: linear-gradient(135deg, rgba(79,70,229,0.12), rgba(99,102,241,0.08));
|
||||
box-shadow: inset 0 0 0 1px rgba(99,102,241,0.10);
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, var(--primary), var(--primary-strong));
|
||||
box-shadow: 0 10px 20px rgba(15, 118, 110, 0.26);
|
||||
}
|
||||
|
||||
.status-pill,
|
||||
@@ -191,9 +228,9 @@
|
||||
gap: 10px;
|
||||
padding: 10px 14px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255,255,255,0.72);
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
|
||||
background: rgba(255, 255, 255, 0.74);
|
||||
border: 1px solid rgba(96, 118, 109, 0.20);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
||||
color: var(--text-soft);
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
@@ -209,19 +246,19 @@
|
||||
|
||||
.status-dot {
|
||||
background: var(--success);
|
||||
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
|
||||
box-shadow: 0 0 0 4px rgba(21, 148, 103, 0.14);
|
||||
}
|
||||
|
||||
.user-dot {
|
||||
background: var(--info);
|
||||
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.10);
|
||||
box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.12);
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
color: var(--text-soft) !important;
|
||||
padding: 10px 14px !important;
|
||||
border-radius: 999px !important;
|
||||
transition: all .18s ease !important;
|
||||
transition: all .2s ease !important;
|
||||
}
|
||||
|
||||
.logout-btn:hover {
|
||||
@@ -239,10 +276,10 @@
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 0 24px;
|
||||
background: rgba(248, 250, 252, 0.84);
|
||||
background: linear-gradient(180deg, rgba(247, 251, 248, 0.84), rgba(246, 250, 247, 0.70));
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
|
||||
border-bottom: 1px solid rgba(95, 116, 107, 0.16);
|
||||
}
|
||||
|
||||
.subnav-title {
|
||||
@@ -253,9 +290,10 @@
|
||||
}
|
||||
|
||||
.subnav-title h2 {
|
||||
font-size: 19px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.subnav-title p {
|
||||
@@ -276,22 +314,22 @@
|
||||
min-height: 36px;
|
||||
padding: 0 14px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.12);
|
||||
background: rgba(255,255,255,0.64);
|
||||
border: 1px solid rgba(98, 118, 109, 0.22);
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sub-nav-link:hover {
|
||||
background: rgba(255,255,255,0.95);
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
color: var(--text);
|
||||
border-color: rgba(148, 163, 184, 0.18);
|
||||
border-color: rgba(84, 104, 95, 0.34);
|
||||
}
|
||||
|
||||
.sub-nav-link.is-active {
|
||||
background: linear-gradient(135deg, rgba(79,70,229,0.12), rgba(99,102,241,0.08));
|
||||
background: linear-gradient(145deg, rgba(15, 118, 110, 0.14), rgba(20, 184, 166, 0.08));
|
||||
color: var(--primary);
|
||||
border-color: rgba(99, 102, 241, 0.12);
|
||||
border-color: rgba(15, 118, 110, 0.30);
|
||||
}
|
||||
|
||||
.layout-shell {
|
||||
@@ -303,17 +341,39 @@
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding: var(--content-padding);
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.content-inner {
|
||||
min-height: calc(100vh - var(--topbar-height) - var(--subnav-height) - (var(--content-padding) * 2));
|
||||
}
|
||||
|
||||
.page-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.page-title-main h1,
|
||||
.page-title-main h2 {
|
||||
font-size: 28px;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
|
||||
.page-title-main p {
|
||||
margin-top: 8px;
|
||||
font-size: 14px;
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
.toolbar-card,
|
||||
.el-card {
|
||||
border-radius: var(--radius-md) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
background: rgba(255, 255, 255, 0.82) !important;
|
||||
background: linear-gradient(170deg, rgba(255, 255, 255, 0.92), rgba(246, 250, 247, 0.88)) !important;
|
||||
box-shadow: var(--shadow-sm) !important;
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
@@ -322,8 +382,8 @@
|
||||
|
||||
.el-card__header {
|
||||
padding: 16px 18px !important;
|
||||
background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(248,250,252,0.92)) !important;
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 252, 249, 0.92)) !important;
|
||||
border-bottom: 1px solid rgba(101, 121, 113, 0.14) !important;
|
||||
color: var(--text) !important;
|
||||
}
|
||||
|
||||
@@ -333,20 +393,21 @@
|
||||
|
||||
.el-button {
|
||||
border-radius: 12px !important;
|
||||
font-weight: 500 !important;
|
||||
transition: all .18s ease !important;
|
||||
font-weight: 600 !important;
|
||||
letter-spacing: 0.01em;
|
||||
transition: all .2s ease !important;
|
||||
}
|
||||
|
||||
.el-button--primary {
|
||||
background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
|
||||
background: linear-gradient(135deg, var(--primary), var(--primary-strong)) !important;
|
||||
border-color: transparent !important;
|
||||
box-shadow: 0 10px 20px rgba(79, 70, 229, 0.18) !important;
|
||||
box-shadow: 0 10px 22px rgba(15, 118, 110, 0.24) !important;
|
||||
}
|
||||
|
||||
.el-button--primary:hover,
|
||||
.el-button--primary:focus {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 14px 24px rgba(79, 70, 229, 0.22) !important;
|
||||
box-shadow: 0 14px 28px rgba(15, 118, 110, 0.30) !important;
|
||||
}
|
||||
|
||||
.el-button--primary.is-plain,
|
||||
@@ -355,20 +416,20 @@
|
||||
.el-button--danger.is-plain,
|
||||
.el-button--info.is-plain {
|
||||
background: rgba(255, 255, 255, 0.96) !important;
|
||||
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06) !important;
|
||||
box-shadow: 0 6px 16px rgba(21, 33, 27, 0.06) !important;
|
||||
}
|
||||
|
||||
.el-button--primary.is-plain {
|
||||
color: #4338ca !important;
|
||||
border-color: rgba(99, 102, 241, 0.34) !important;
|
||||
color: var(--primary-strong) !important;
|
||||
border-color: rgba(15, 118, 110, 0.36) !important;
|
||||
}
|
||||
|
||||
.el-button--primary.is-plain:hover,
|
||||
.el-button--primary.is-plain:focus {
|
||||
color: #ffffff !important;
|
||||
border-color: transparent !important;
|
||||
background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
|
||||
box-shadow: 0 12px 22px rgba(79, 70, 229, 0.20) !important;
|
||||
background: linear-gradient(135deg, var(--primary), var(--primary-strong)) !important;
|
||||
box-shadow: 0 12px 22px rgba(15, 118, 110, 0.24) !important;
|
||||
}
|
||||
|
||||
.el-button--success.is-plain {
|
||||
@@ -411,7 +472,7 @@
|
||||
}
|
||||
|
||||
.el-button--info.is-plain {
|
||||
color: #475569 !important;
|
||||
color: #3f5148 !important;
|
||||
border-color: rgba(100, 116, 139, 0.34) !important;
|
||||
}
|
||||
|
||||
@@ -419,31 +480,31 @@
|
||||
.el-button--info.is-plain:focus {
|
||||
color: #ffffff !important;
|
||||
border-color: transparent !important;
|
||||
background: linear-gradient(135deg, #64748b, #94a3b8) !important;
|
||||
background: linear-gradient(135deg, #4f6258, #74897f) !important;
|
||||
box-shadow: 0 12px 22px rgba(100, 116, 139, 0.20) !important;
|
||||
}
|
||||
|
||||
.el-button--default {
|
||||
background: rgba(255,255,255,0.85) !important;
|
||||
background: rgba(255, 255, 255, 0.92) !important;
|
||||
border-color: var(--border-strong) !important;
|
||||
color: var(--text) !important;
|
||||
}
|
||||
|
||||
.el-button--default:hover,
|
||||
.el-button--default:focus {
|
||||
border-color: rgba(99,102,241,0.3) !important;
|
||||
border-color: rgba(15, 118, 110, 0.56) !important;
|
||||
color: var(--primary) !important;
|
||||
background: rgba(255,255,255,0.96) !important;
|
||||
background: rgba(255, 255, 255, 0.98) !important;
|
||||
}
|
||||
|
||||
.el-button--text,
|
||||
.el-button--text:not(.is-disabled) {
|
||||
color: #334155 !important;
|
||||
color: #27443a !important;
|
||||
font-weight: 600 !important;
|
||||
padding: 6px 10px !important;
|
||||
border-radius: 10px !important;
|
||||
background: rgba(248, 250, 252, 0.9) !important;
|
||||
border: 1px solid rgba(148, 163, 184, 0.14) !important;
|
||||
background: rgba(247, 251, 248, 0.92) !important;
|
||||
border: 1px solid rgba(101, 121, 113, 0.20) !important;
|
||||
}
|
||||
|
||||
.el-button--text:hover,
|
||||
@@ -451,8 +512,8 @@
|
||||
.el-button--text:not(.is-disabled):hover,
|
||||
.el-button--text:not(.is-disabled):focus {
|
||||
color: var(--primary) !important;
|
||||
background: rgba(99, 102, 241, 0.08) !important;
|
||||
border-color: rgba(99, 102, 241, 0.18) !important;
|
||||
background: rgba(15, 118, 110, 0.08) !important;
|
||||
border-color: rgba(15, 118, 110, 0.24) !important;
|
||||
}
|
||||
|
||||
.el-button--text [class*="el-icon-"],
|
||||
@@ -464,10 +525,10 @@
|
||||
.el-table .el-button--text:not(.is-disabled),
|
||||
.el-card .el-button--text,
|
||||
.el-card .el-button--text:not(.is-disabled) {
|
||||
color: #1e293b !important;
|
||||
color: #27443a !important;
|
||||
background: rgba(255, 255, 255, 0.92) !important;
|
||||
border-color: rgba(100, 116, 139, 0.18) !important;
|
||||
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
|
||||
border-color: rgba(101, 121, 113, 0.22) !important;
|
||||
box-shadow: 0 4px 12px rgba(21, 33, 27, 0.06) !important;
|
||||
}
|
||||
|
||||
.el-table .el-button--text:hover,
|
||||
@@ -475,9 +536,9 @@
|
||||
.el-card .el-button--text:hover,
|
||||
.el-card .el-button--text:focus {
|
||||
color: var(--primary) !important;
|
||||
background: rgba(99, 102, 241, 0.10) !important;
|
||||
border-color: rgba(99, 102, 241, 0.20) !important;
|
||||
box-shadow: 0 8px 16px rgba(79, 70, 229, 0.10) !important;
|
||||
background: rgba(15, 118, 110, 0.10) !important;
|
||||
border-color: rgba(15, 118, 110, 0.20) !important;
|
||||
box-shadow: 0 8px 16px rgba(15, 118, 110, 0.16) !important;
|
||||
}
|
||||
|
||||
.el-button--success,
|
||||
@@ -488,19 +549,19 @@
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.el-button--success { background: linear-gradient(135deg, #10b981, #34d399) !important; }
|
||||
.el-button--warning { background: linear-gradient(135deg, #f59e0b, #fbbf24) !important; }
|
||||
.el-button--danger { background: linear-gradient(135deg, #ef4444, #f87171) !important; }
|
||||
.el-button--info { background: linear-gradient(135deg, #64748b, #94a3b8) !important; }
|
||||
.el-button--success { background: linear-gradient(135deg, #159467, #1fb880) !important; }
|
||||
.el-button--warning { background: linear-gradient(135deg, #d97706, #ea9a2e) !important; }
|
||||
.el-button--danger { background: linear-gradient(135deg, #dc2626, #ef4444) !important; }
|
||||
.el-button--info { background: linear-gradient(135deg, #0ea5e9, #38bdf8) !important; }
|
||||
|
||||
.el-input__inner,
|
||||
.el-textarea__inner {
|
||||
height: 40px;
|
||||
border-radius: 12px !important;
|
||||
background: rgba(248,250,252,0.9) !important;
|
||||
border-color: rgba(148,163,184,0.22) !important;
|
||||
background: rgba(247, 251, 248, 0.90) !important;
|
||||
border-color: rgba(101, 121, 113, 0.28) !important;
|
||||
color: var(--text) !important;
|
||||
transition: all .18s ease !important;
|
||||
transition: all .2s ease !important;
|
||||
}
|
||||
|
||||
.el-textarea__inner {
|
||||
@@ -514,8 +575,8 @@
|
||||
|
||||
.el-input__inner:focus,
|
||||
.el-textarea__inner:focus {
|
||||
border-color: rgba(99,102,241,0.42) !important;
|
||||
box-shadow: 0 0 0 4px rgba(99,102,241,0.10) !important;
|
||||
border-color: rgba(15, 118, 110, 0.58) !important;
|
||||
box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12) !important;
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
@@ -542,44 +603,44 @@
|
||||
}
|
||||
|
||||
.el-table th {
|
||||
background: rgba(248,250,252,0.95) !important;
|
||||
background: rgba(245, 251, 247, 0.96) !important;
|
||||
color: var(--text-soft) !important;
|
||||
font-weight: 600 !important;
|
||||
border-bottom: 1px solid rgba(148,163,184,0.12) !important;
|
||||
font-weight: 700 !important;
|
||||
border-bottom: 1px solid rgba(101, 121, 113, 0.18) !important;
|
||||
}
|
||||
|
||||
.el-table tr,
|
||||
.el-table td,
|
||||
.el-table__expanded-cell {
|
||||
background: rgba(255,255,255,0.45) !important;
|
||||
background: rgba(255, 255, 255, 0.54) !important;
|
||||
}
|
||||
|
||||
.el-table td,
|
||||
.el-table th.is-leaf {
|
||||
border-bottom: 1px solid rgba(148,163,184,0.10) !important;
|
||||
border-bottom: 1px solid rgba(101, 121, 113, 0.12) !important;
|
||||
}
|
||||
|
||||
.el-table--border,
|
||||
.el-table--group {
|
||||
border: 1px solid rgba(148,163,184,0.14) !important;
|
||||
border: 1px solid rgba(101, 121, 113, 0.16) !important;
|
||||
}
|
||||
|
||||
.el-table--border th,
|
||||
.el-table--border td {
|
||||
border-right: 1px solid rgba(148,163,184,0.08) !important;
|
||||
border-right: 1px solid rgba(101, 121, 113, 0.10) !important;
|
||||
}
|
||||
|
||||
.el-table__row:hover > td {
|
||||
background: rgba(99,102,241,0.05) !important;
|
||||
background: rgba(15, 118, 110, 0.06) !important;
|
||||
}
|
||||
|
||||
.el-dialog,
|
||||
.el-message-box {
|
||||
border-radius: 22px !important;
|
||||
overflow: hidden !important;
|
||||
border: 1px solid rgba(148,163,184,0.14) !important;
|
||||
border: 1px solid rgba(101, 121, 113, 0.18) !important;
|
||||
box-shadow: var(--shadow-md) !important;
|
||||
background: rgba(255,255,255,0.94) !important;
|
||||
background: rgba(255, 255, 255, 0.95) !important;
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
}
|
||||
@@ -587,8 +648,8 @@
|
||||
.el-dialog__header,
|
||||
.el-message-box__header {
|
||||
padding: 18px 20px !important;
|
||||
border-bottom: 1px solid rgba(148,163,184,0.10) !important;
|
||||
background: rgba(248,250,252,0.86) !important;
|
||||
border-bottom: 1px solid rgba(101, 121, 113, 0.14) !important;
|
||||
background: rgba(247, 251, 248, 0.90) !important;
|
||||
}
|
||||
|
||||
.el-dialog__body,
|
||||
@@ -599,12 +660,12 @@
|
||||
.el-pagination .el-pager li,
|
||||
.el-pagination button {
|
||||
border-radius: 10px !important;
|
||||
border: 1px solid rgba(148,163,184,0.14) !important;
|
||||
background: rgba(255,255,255,0.92) !important;
|
||||
border: 1px solid rgba(101, 121, 113, 0.18) !important;
|
||||
background: rgba(255, 255, 255, 0.96) !important;
|
||||
}
|
||||
|
||||
.el-pagination .el-pager li.active {
|
||||
background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
|
||||
background: linear-gradient(135deg, var(--primary), var(--primary-strong)) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
@@ -618,7 +679,7 @@
|
||||
}
|
||||
|
||||
.el-tabs__active-bar {
|
||||
background: var(--primary) !important;
|
||||
background: linear-gradient(90deg, var(--primary), #22c0b5) !important;
|
||||
height: 3px !important;
|
||||
border-radius: 999px !important;
|
||||
}
|
||||
@@ -635,7 +696,7 @@
|
||||
}
|
||||
|
||||
.v-modal {
|
||||
background: rgba(15, 23, 42, 0.16) !important;
|
||||
background: rgba(15, 28, 22, 0.24) !important;
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
}
|
||||
@@ -645,7 +706,210 @@
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #4338ca;
|
||||
color: var(--primary-strong);
|
||||
}
|
||||
|
||||
body .page-shell {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 16px !important;
|
||||
}
|
||||
|
||||
body .page-hero {
|
||||
display: flex !important;
|
||||
align-items: flex-end !important;
|
||||
justify-content: space-between !important;
|
||||
gap: 18px !important;
|
||||
padding: 24px 26px !important;
|
||||
border-radius: 24px !important;
|
||||
background: linear-gradient(135deg, rgba(15,118,110,0.12), rgba(14,165,233,0.08), rgba(255,255,255,0.94)) !important;
|
||||
border: 1px solid rgba(101,121,113,0.18) !important;
|
||||
box-shadow: 0 18px 40px rgba(21,33,27,0.08) !important;
|
||||
}
|
||||
|
||||
body .page-hero-actions {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 12px !important;
|
||||
flex-wrap: wrap !important;
|
||||
}
|
||||
|
||||
body .page-eyebrow {
|
||||
font-size: 12px !important;
|
||||
text-transform: uppercase !important;
|
||||
letter-spacing: .08em !important;
|
||||
color: var(--primary-strong) !important;
|
||||
font-weight: 700 !important;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
body .page-hero-copy h1 {
|
||||
font-size: 30px !important;
|
||||
line-height: 1.1 !important;
|
||||
margin-bottom: 10px !important;
|
||||
color: var(--text) !important;
|
||||
}
|
||||
|
||||
body .page-hero-copy p {
|
||||
color: var(--text-soft) !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
body .overview-grid .el-col {
|
||||
margin-bottom: 16px !important;
|
||||
}
|
||||
|
||||
body .overview-card {
|
||||
min-height: 112px !important;
|
||||
}
|
||||
|
||||
body .overview-card--primary {
|
||||
background: linear-gradient(180deg, rgba(15,118,110,0.12), rgba(255,255,255,0.96)) !important;
|
||||
border-color: rgba(15,118,110,0.24) !important;
|
||||
}
|
||||
|
||||
body .overview-card--soft {
|
||||
background: linear-gradient(180deg, rgba(234,88,12,0.10), rgba(255,255,255,0.96)) !important;
|
||||
border-color: rgba(234,88,12,0.22) !important;
|
||||
}
|
||||
|
||||
body .overview-label {
|
||||
font-size: 13px !important;
|
||||
color: var(--text-soft) !important;
|
||||
margin-bottom: 14px !important;
|
||||
}
|
||||
|
||||
body .overview-value {
|
||||
font-size: 30px !important;
|
||||
font-weight: 700 !important;
|
||||
color: var(--text) !important;
|
||||
margin-bottom: 10px !important;
|
||||
letter-spacing: -0.02em !important;
|
||||
}
|
||||
|
||||
body .overview-note {
|
||||
font-size: 12px !important;
|
||||
color: var(--text-faint) !important;
|
||||
}
|
||||
|
||||
body .workspace-header {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: space-between !important;
|
||||
gap: 16px !important;
|
||||
}
|
||||
|
||||
body .workspace-header h3 {
|
||||
font-size: 18px !important;
|
||||
margin-bottom: 4px !important;
|
||||
color: var(--text) !important;
|
||||
}
|
||||
|
||||
body .workspace-header p {
|
||||
font-size: 13px !important;
|
||||
color: var(--text-soft) !important;
|
||||
}
|
||||
|
||||
body .entity-cell {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 12px !important;
|
||||
}
|
||||
|
||||
body .entity-badge {
|
||||
width: 30px !important;
|
||||
height: 30px !important;
|
||||
border-radius: 50% !important;
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
background: linear-gradient(135deg, rgba(15,118,110,0.18), rgba(20,184,166,0.10)) !important;
|
||||
color: var(--primary) !important;
|
||||
border: 1px solid rgba(15,118,110,0.20) !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: 700 !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
body .entity-title {
|
||||
font-size: 14px !important;
|
||||
font-weight: 600 !important;
|
||||
color: var(--text) !important;
|
||||
}
|
||||
|
||||
body .entity-subtitle {
|
||||
margin-top: 4px !important;
|
||||
font-size: 12px !important;
|
||||
color: var(--text-faint) !important;
|
||||
}
|
||||
|
||||
body .detail-section {
|
||||
margin-top: 18px !important;
|
||||
}
|
||||
|
||||
body .section-title {
|
||||
font-size: 15px !important;
|
||||
font-weight: 700 !important;
|
||||
color: var(--text) !important;
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
body .chart-shell {
|
||||
padding: 16px !important;
|
||||
border-radius: 18px !important;
|
||||
background: linear-gradient(180deg, rgba(247,251,248,0.86), rgba(255,255,255,0.98)) !important;
|
||||
border: 1px solid rgba(101,121,113,0.16) !important;
|
||||
}
|
||||
|
||||
body .pagination-container {
|
||||
margin-top: 20px !important;
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
body .action-row {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 8px !important;
|
||||
flex-wrap: wrap !important;
|
||||
}
|
||||
|
||||
body .dialog-intro {
|
||||
margin-bottom: 14px !important;
|
||||
color: var(--text-soft) !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
body .stack-trace,
|
||||
body .changes-pre {
|
||||
background: rgba(247,251,248,0.88) !important;
|
||||
border: 1px solid rgba(101,121,113,0.14) !important;
|
||||
border-radius: 14px !important;
|
||||
color: #27443a !important;
|
||||
}
|
||||
|
||||
.app-container.loaded .topbar,
|
||||
.app-container.loaded .subnav-bar,
|
||||
.app-container.loaded .content-inner > * {
|
||||
animation: revealUp .4s ease both;
|
||||
}
|
||||
|
||||
.app-container.loaded .subnav-bar {
|
||||
animation-delay: .08s;
|
||||
}
|
||||
|
||||
.app-container.loaded .content-inner > *:nth-child(1) { animation-delay: .16s; }
|
||||
.app-container.loaded .content-inner > *:nth-child(2) { animation-delay: .22s; }
|
||||
.app-container.loaded .content-inner > *:nth-child(3) { animation-delay: .28s; }
|
||||
|
||||
@keyframes revealUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1320px) {
|
||||
@@ -664,6 +928,115 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
:root {
|
||||
--content-padding: 18px;
|
||||
}
|
||||
|
||||
.brand-subtitle,
|
||||
.user-pill {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topbar-right {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.main-nav-link {
|
||||
min-height: 36px;
|
||||
padding: 0 14px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.subnav-title h2 {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.subnav-title p {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
:root {
|
||||
--topbar-height: auto;
|
||||
--subnav-height: auto;
|
||||
--content-padding: 14px;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.layout-shell,
|
||||
.content {
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
position: static;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.topbar-left,
|
||||
.topbar-right {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.subnav-bar {
|
||||
position: static;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.sub-nav {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.page-title-main h1,
|
||||
.page-title-main h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
body .page-hero {
|
||||
flex-direction: column !important;
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
body .workspace-header {
|
||||
flex-direction: column !important;
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="/static/css/element-ui/theme-chalk/index.min.css">
|
||||
|
||||
Reference in New Issue
Block a user