193 lines
3.6 KiB
CSS
193 lines
3.6 KiB
CSS
/* 深色科技风主题覆盖样式 - 参考 x.ai */
|
|
|
|
/* 容器层级 */
|
|
.container {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* 侧边栏深色样式 */
|
|
.sidebar {
|
|
border-right: 1px solid var(--border);
|
|
background: rgba(20, 20, 30, 0.7);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
|
|
.sidebar::before {
|
|
background: radial-gradient(
|
|
circle at 50% 0%,
|
|
rgba(124, 92, 255, 0.15) 0%,
|
|
transparent 70%
|
|
);
|
|
}
|
|
|
|
.brand .logo {
|
|
background: var(--primary-gradient);
|
|
box-shadow: var(--glow);
|
|
}
|
|
|
|
.brand h1 {
|
|
background: var(--accent-gradient);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
filter: drop-shadow(0 0 20px rgba(124, 92, 255, 0.5));
|
|
}
|
|
|
|
/* Header 深色样式 */
|
|
.header {
|
|
border-bottom: 1px solid var(--border);
|
|
background: rgba(20, 20, 30, 0.8);
|
|
backdrop-filter: blur(20px);
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.search {
|
|
background: var(--soft);
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.search:focus-within {
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 20px var(--accent-glow);
|
|
}
|
|
|
|
/* 按钮深色样式 */
|
|
.btn {
|
|
border: 1px solid var(--border);
|
|
background: var(--soft);
|
|
color: var(--text);
|
|
}
|
|
|
|
.btn:hover {
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 15px var(--accent-glow);
|
|
}
|
|
|
|
.btn.primary {
|
|
background: var(--primary-gradient);
|
|
border-color: transparent;
|
|
box-shadow: var(--glow);
|
|
}
|
|
|
|
.btn.primary:hover {
|
|
box-shadow: 0 0 30px var(--accent-glow);
|
|
}
|
|
|
|
/* 子导航深色样式 */
|
|
.subnav {
|
|
background: rgba(20, 20, 30, 0.6);
|
|
backdrop-filter: blur(10px);
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
}
|
|
|
|
.segment {
|
|
background: var(--soft);
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.segment button.active {
|
|
background: var(--panel);
|
|
color: var(--text);
|
|
box-shadow: 0 0 10px rgba(124, 92, 255, 0.2);
|
|
}
|
|
|
|
/* Panel 深色玻璃效果 */
|
|
.panel {
|
|
background: var(--panel);
|
|
border: 1px solid var(--border);
|
|
backdrop-filter: blur(20px);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.panel h2 {
|
|
color: var(--text);
|
|
}
|
|
|
|
.panel .desc {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* KPI 卡片深色样式 */
|
|
.kpi {
|
|
background: var(--panel);
|
|
border: 1px solid var(--border);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
|
|
.kpi:hover {
|
|
border-color: var(--accent);
|
|
box-shadow: var(--glow);
|
|
}
|
|
|
|
.kpi h3 {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.kpi .num {
|
|
background: var(--accent-gradient);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
filter: drop-shadow(0 0 10px rgba(124, 92, 255, 0.5));
|
|
}
|
|
|
|
/* 表格深色样式 */
|
|
.table {
|
|
color: var(--text);
|
|
}
|
|
|
|
.table th {
|
|
color: var(--text-secondary);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.table td {
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
}
|
|
|
|
.table tbody tr:hover {
|
|
background: rgba(124, 92, 255, 0.05);
|
|
}
|
|
|
|
/* Badge 深色样式 */
|
|
.badge {
|
|
background: var(--soft);
|
|
border: 1px solid var(--border);
|
|
color: var(--text);
|
|
}
|
|
|
|
.badge.good {
|
|
background: rgba(0, 212, 170, 0.15);
|
|
border-color: var(--good);
|
|
color: var(--good);
|
|
box-shadow: 0 0 10px rgba(0, 212, 170, 0.2);
|
|
}
|
|
|
|
.badge.warn {
|
|
background: rgba(255, 179, 71, 0.15);
|
|
border-color: var(--warn);
|
|
color: var(--warn);
|
|
box-shadow: 0 0 10px rgba(255, 179, 71, 0.2);
|
|
}
|
|
|
|
.badge.bad {
|
|
background: rgba(255, 107, 157, 0.15);
|
|
border-color: var(--bad);
|
|
color: var(--bad);
|
|
box-shadow: 0 0 10px rgba(255, 107, 157, 0.2);
|
|
}
|
|
|
|
/* Chart 深色样式 */
|
|
.chart {
|
|
border: 1px dashed var(--border);
|
|
color: var(--muted);
|
|
background: rgba(124, 92, 255, 0.02);
|
|
}
|
|
|
|
/* Footer 深色样式 */
|
|
.footer {
|
|
border-top: 1px solid var(--border-subtle);
|
|
color: var(--muted);
|
|
background: rgba(10, 10, 15, 0.5);
|
|
} |