Revert "feat(frontend): unify ui with slate control center"
This reverts commit 91aa6e83ca.
This commit is contained in:
yinjianm
+155
-292
@@ -1,24 +1,23 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* Tailwind Theme Variables Mapping */
|
||||
@theme inline {
|
||||
--color-background: var(--app-bg-color);
|
||||
--color-foreground: var(--text-color);
|
||||
--color-app: var(--app-bg-color);
|
||||
--color-card: var(--card-bg-color);
|
||||
--color-card-foreground: var(--card-foreground-color);
|
||||
--color-muted: var(--muted-bg-color);
|
||||
--color-muted-foreground: var(--muted-foreground-color);
|
||||
--color-text-default: var(--text-color);
|
||||
/* Base Colors */
|
||||
--color-background: var(--app-bg-color); /* More generic name */
|
||||
--color-foreground: var(--text-color); /* More generic name */
|
||||
--color-app: var(--app-bg-color); /* Keep specific if needed */
|
||||
--color-text-default: var(--text-color); /* Keep specific if needed */
|
||||
--color-text-secondary: var(--text-color-secondary);
|
||||
--color-text-alt: var(--text-color-tertiary);
|
||||
--color-border: var(--border-color);
|
||||
--color-border: var(--border-color); /* Simplified name */
|
||||
--color-border-default: var(--border-color); /* Keep specific if needed */
|
||||
--color-link: var(--link-color);
|
||||
--color-link-hover: var(--link-hover-color);
|
||||
--color-link-active: var(--link-active-color);
|
||||
--color-primary: var(--primary-color);
|
||||
--color-primary-dark: var(--primary-dark-color);
|
||||
--color-link-active-bg: var(--link-active-bg-color);
|
||||
--color-nav-active-bg: var(--nav-item-active-bg-color);
|
||||
--color-link-active: var(--link-active-color); /* Also used as primary/theme color */
|
||||
--color-primary: var(--link-active-color); /* Map primary to active link color */
|
||||
--color-link-active-bg: var(--link-active-bg-color); /* Map active link background */
|
||||
--color-nav-active-bg: var(--nav-item-active-bg-color); /* Map specific nav active background */
|
||||
|
||||
/* Component Colors */
|
||||
--color-header: var(--header-bg-color);
|
||||
--color-footer: var(--footer-bg-color);
|
||||
--color-button: var(--button-bg-color);
|
||||
@@ -28,336 +27,200 @@
|
||||
--color-icon-hover: var(--icon-hover-color);
|
||||
--color-split-line: var(--split-line-color);
|
||||
--color-split-line-hover: var(--split-line-hover-color);
|
||||
--color-input: var(--input-bg-color);
|
||||
--color-input-focus-border: var(--input-focus-border-color);
|
||||
--color-overlay: var(--overlay-bg-color);
|
||||
--color-success: var(--success-color);
|
||||
--color-warning: var(--warning-color);
|
||||
--color-error: var(--error-color);
|
||||
--color-success: var(--color-success);
|
||||
--color-warning: var(--color-warning);
|
||||
--color-error: var(--color-error);
|
||||
--color-success-text: var(--color-success-text);
|
||||
--color-warning-text: var(--color-warning-text);
|
||||
--color-error-text: var(--color-error-text);
|
||||
}
|
||||
|
||||
/* 全局样式和 CSS 变量定义 */
|
||||
:root {
|
||||
--app-bg-color: #edf2f8;
|
||||
--app-bg-gradient: radial-gradient(circle at top left, rgba(84, 125, 255, 0.18), transparent 34%),
|
||||
radial-gradient(circle at right 16%, rgba(0, 170, 170, 0.14), transparent 26%),
|
||||
linear-gradient(180deg, #f6f8fc 0%, #ecf1f7 52%, #e7edf6 100%);
|
||||
--shell-surface-color: rgba(255, 255, 255, 0.56);
|
||||
--card-bg-color: rgba(255, 255, 255, 0.84);
|
||||
--card-foreground-color: #142033;
|
||||
--muted-bg-color: #e9eef6;
|
||||
--muted-foreground-color: #5a6b84;
|
||||
--text-color: #152338;
|
||||
--text-color-secondary: #607089;
|
||||
--text-color-tertiary: #7f8da3;
|
||||
--border-color: rgba(103, 124, 155, 0.24);
|
||||
--border-strong-color: rgba(103, 124, 155, 0.36);
|
||||
--link-color: #355fa8;
|
||||
--link-hover-color: #214d90;
|
||||
--link-active-color: #3c69e7;
|
||||
--primary-color: #3c69e7;
|
||||
--primary-dark-color: #2746b8;
|
||||
--primary-soft-color: rgba(60, 105, 231, 0.12);
|
||||
--link-active-bg-color: rgba(60, 105, 231, 0.12);
|
||||
--nav-item-active-bg-color: rgba(60, 105, 231, 0.12);
|
||||
--header-bg-color: rgba(255, 255, 255, 0.74);
|
||||
--footer-bg-color: rgba(255, 255, 255, 0.78);
|
||||
--button-bg-color: #3c69e7;
|
||||
--button-text-color: #ffffff;
|
||||
--button-hover-bg-color: #2746b8;
|
||||
--icon-color: #62748e;
|
||||
--icon-hover-color: #1d4f91;
|
||||
--split-line-color: rgba(126, 143, 168, 0.22);
|
||||
--split-line-hover-color: rgba(60, 105, 231, 0.42);
|
||||
--input-bg-color: rgba(245, 248, 252, 0.9);
|
||||
--input-focus-border-color: #3c69e7;
|
||||
--input-focus-glow-rgb: 60, 105, 231;
|
||||
--overlay-bg-color: rgba(12, 20, 32, 0.58);
|
||||
--success-color: #22a06b;
|
||||
--warning-color: #d99b24;
|
||||
--error-color: #d04b4b;
|
||||
--success-text-color: #ffffff;
|
||||
--warning-text-color: #1d1d1d;
|
||||
--error-text-color: #ffffff;
|
||||
--shadow-soft: 0 24px 60px rgba(31, 48, 84, 0.14);
|
||||
--shadow-card: 0 18px 40px rgba(24, 38, 67, 0.1);
|
||||
--shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.72);
|
||||
--grid-line-color: rgba(116, 136, 167, 0.08);
|
||||
--font-family-sans-serif: "IBM Plex Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
--font-family-display: "Space Grotesk", "IBM Plex Sans", "Noto Sans SC", "PingFang SC", sans-serif;
|
||||
--font-family-mono: "IBM Plex Mono", "JetBrains Mono", "Cascadia Code", monospace;
|
||||
--base-padding: 1rem;
|
||||
--base-margin: 0.5rem;
|
||||
--el-font-family: var(--font-family-sans-serif);
|
||||
--el-color-primary: var(--primary-color);
|
||||
--el-color-primary-light-3: #6789f0;
|
||||
--el-color-primary-light-5: #8ca5f5;
|
||||
--el-color-primary-light-7: #b3c3fa;
|
||||
--el-color-primary-light-8: #cad8fc;
|
||||
--el-color-primary-light-9: #e3ebff;
|
||||
--el-color-primary-dark-2: var(--primary-dark-color);
|
||||
--el-bg-color: rgba(255, 255, 255, 0.9);
|
||||
--el-bg-color-page: transparent;
|
||||
--el-bg-color-overlay: rgba(255, 255, 255, 0.96);
|
||||
--el-text-color-primary: var(--text-color);
|
||||
--el-text-color-regular: var(--text-color-secondary);
|
||||
--el-text-color-secondary: var(--text-color-tertiary);
|
||||
--el-border-color: rgba(103, 124, 155, 0.24);
|
||||
--el-border-color-light: rgba(103, 124, 155, 0.16);
|
||||
--el-border-color-lighter: rgba(103, 124, 155, 0.12);
|
||||
--el-border-radius-base: 16px;
|
||||
--el-border-radius-small: 12px;
|
||||
--el-box-shadow-light: var(--shadow-card);
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
min-height: 100%;
|
||||
/* 基础颜色 */
|
||||
--app-bg-color: #ffffff; /* 应用背景色 */
|
||||
--text-color: #333333; /* 主要文字颜色 */
|
||||
--text-color-secondary: #666666; /* 次要文字颜色 */
|
||||
--border-color: #cccccc; /* 边框颜色 */
|
||||
--link-color: #333; /* 链接颜色 */
|
||||
--link-hover-color: #0056b3; /* 链接悬停颜色 */
|
||||
--link-active-color: #007bff; /* 激活链接/主题色 */
|
||||
--link-active-bg-color: #e0e0ff; /* 激活链接背景色 (类似 indigo-50) */
|
||||
--nav-item-active-bg-color: var(--link-active-bg-color); /* 导航选中项背景色, 默认同激活链接背景 */
|
||||
|
||||
/* 组件颜色 */
|
||||
--header-bg-color: #f0f0f0; /* 头部背景色 */
|
||||
--footer-bg-color: #f0f0f0; /* 底部背景色 */
|
||||
--button-bg-color: #007bff; /* 按钮背景色 */
|
||||
--button-text-color: #ffffff; /* 按钮文字颜色 */
|
||||
--button-hover-bg-color: #0056b3;/* 按钮悬停背景色 */
|
||||
--icon-color: var(--text-color-secondary); /* 图标颜色 */
|
||||
--icon-hover-color: var(--link-hover-color); /* 图标悬停颜色 */
|
||||
--split-line-color: var(--border-color); /* 分割线颜色 */
|
||||
--split-line-hover-color: var(--border-color); /* 分割线悬停颜色 */
|
||||
--input-focus-border-color: var(--link-active-color); /* 输入框聚焦边框颜色 */
|
||||
--input-focus-glow: var(--link-active-color); /* 输入框聚焦光晕值 */
|
||||
--overlay-bg-color: rgba(0, 0, 0, 0.6); /* Added Overlay Background Color */
|
||||
|
||||
/* Status Colors */
|
||||
--color-success: #28a745; /* Green */
|
||||
--color-warning: #ffc107; /* Yellow */
|
||||
--color-error: #dc3545; /* Red */
|
||||
--color-success-text: #ffffff; /* White text for green bg */
|
||||
--color-warning-text: #212529; /* Dark text for yellow bg */
|
||||
--color-error-text: #ffffff; /* White text for red bg */
|
||||
|
||||
/* 字体 */
|
||||
--font-family-sans-serif: sans-serif; /* 默认字体 */
|
||||
|
||||
/* 其他 */
|
||||
--base-padding: 1rem; /* 基础内边距 */
|
||||
--base-margin: 0.5rem; /* 基础外边距 */
|
||||
}
|
||||
|
||||
/* 应用基础样式 */
|
||||
body {
|
||||
margin: 0;
|
||||
margin: 0; /* 移除默认 body margin */
|
||||
font-family: var(--font-family-sans-serif);
|
||||
background-color: var(--app-bg-color);
|
||||
color: var(--text-color);
|
||||
background: var(--app-bg-gradient);
|
||||
background-attachment: fixed;
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
linear-gradient(var(--grid-line-color) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--grid-line-color) 1px, transparent 1px);
|
||||
background-size: 28px 28px;
|
||||
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.36), transparent 82%);
|
||||
line-height: 1.6; /* 改善可读性 */
|
||||
}
|
||||
|
||||
/* 全局链接样式 */
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
/* color: var(--link-color); */ /* 注释掉全局 a 标签的颜色设置，让 Tailwind 类生效 */
|
||||
text-decoration: none; /* 移除下划线 */
|
||||
}
|
||||
|
||||
i,
|
||||
.fas,
|
||||
.far,
|
||||
.fab {
|
||||
color: inherit;
|
||||
/* Removed global a:hover underline rule to avoid conflicts with Tailwind utilities */
|
||||
|
||||
/* 全局图标样式 */
|
||||
i, .fas, .far, .fab { /* 根据你使用的图标库调整选择器 */
|
||||
color: var(--icon-color);
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
a:hover i, a:hover .fas, a:hover .far, a:hover .fab, /* 链接内的图标 */
|
||||
button:hover i, button:hover .fas, button:hover .far, button:hover .fab, /* 按钮内的图标 */
|
||||
.icon-interactive:hover i, .icon-interactive:hover .fas, .icon-interactive:hover .far, .icon-interactive:hover .fab { /* 可交互图标容器 */
|
||||
color: var(--icon-hover-color);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
border-color: var(--input-focus-border-color) !important;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 3px rgba(var(--input-focus-glow-rgb), 0.18) !important;
|
||||
}
|
||||
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
/* 全局分割线样式 */
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid rgba(103, 124, 155, 0.18);
|
||||
border-top: 1px solid var(--divider-color);
|
||||
margin: var(--base-margin) 0;
|
||||
}
|
||||
|
||||
.xterm {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
border: 1px solid rgba(103, 124, 155, 0.18);
|
||||
border-radius: 24px;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(246, 249, 253, 0.8));
|
||||
box-shadow: var(--shadow-card);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.control-panel--muted {
|
||||
background: linear-gradient(180deg, rgba(243, 247, 252, 0.82), rgba(236, 242, 248, 0.74));
|
||||
}
|
||||
|
||||
.control-toolbar {
|
||||
border: 1px solid rgba(103, 124, 155, 0.14);
|
||||
border-radius: 18px;
|
||||
background: rgba(247, 250, 253, 0.78);
|
||||
box-shadow: var(--shadow-inset);
|
||||
}
|
||||
|
||||
.control-stat-grid {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
|
||||
}
|
||||
|
||||
.control-stat-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(103, 124, 155, 0.14);
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(180deg, rgba(250, 252, 255, 0.9), rgba(241, 246, 252, 0.78));
|
||||
box-shadow: var(--shadow-inset);
|
||||
padding: 1rem 1.1rem;
|
||||
}
|
||||
|
||||
.control-stat-card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0 auto auto 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, rgba(60, 105, 231, 0.72), rgba(16, 185, 129, 0.48));
|
||||
}
|
||||
|
||||
.control-stat-card__label {
|
||||
display: block;
|
||||
color: var(--text-color-tertiary);
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.control-stat-card__value {
|
||||
margin-top: 0.65rem;
|
||||
display: block;
|
||||
color: var(--text-color);
|
||||
font-family: var(--font-family-display);
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.control-stat-card__meta {
|
||||
margin-top: 0.45rem;
|
||||
color: var(--text-color-secondary);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.control-empty {
|
||||
padding: 2.6rem 1.4rem;
|
||||
border: 1px dashed rgba(103, 124, 155, 0.3);
|
||||
border-radius: 20px;
|
||||
background: rgba(246, 249, 253, 0.8);
|
||||
|
||||
/* 可以添加更多全局样式规则 */
|
||||
|
||||
/* 为 xterm 终端添加内边距 */
|
||||
|
||||
.xterm{
|
||||
padding: 10px 10px 10px 10px;
|
||||
|
||||
}
|
||||
|
||||
/* 为历史记录和快捷命令列表设置字体 */
|
||||
/* 注意：这里的选择器可能需要根据实际组件结构调整 */
|
||||
.command-history-item,
|
||||
.quick-command-item,
|
||||
.quick-command-item { /* 假设这些是列表项的类名 */
|
||||
font-family: var(--font-family-sans-serif);
|
||||
}
|
||||
|
||||
/* 如果是 Element Plus 的 Table 组件 */
|
||||
.el-table .cell {
|
||||
font-family: var(--font-family-sans-serif);
|
||||
}
|
||||
|
||||
.el-card {
|
||||
border-color: rgba(103, 124, 155, 0.18);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 1.15rem 1.25rem;
|
||||
}
|
||||
|
||||
.el-input__wrapper,
|
||||
.el-select__wrapper,
|
||||
.el-textarea__inner {
|
||||
background: rgba(245, 248, 252, 0.92);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
|
||||
}
|
||||
|
||||
.el-button {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-button--primary {
|
||||
box-shadow: 0 12px 24px rgba(60, 105, 231, 0.2);
|
||||
}
|
||||
|
||||
.el-button.is-plain {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.el-tabs__nav-wrap::after {
|
||||
background-color: rgba(103, 124, 155, 0.14);
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
--el-table-border-color: rgba(103, 124, 155, 0.14);
|
||||
--el-table-header-bg-color: rgba(243, 247, 252, 0.88);
|
||||
--el-table-tr-bg-color: transparent;
|
||||
--el-table-row-hover-bg-color: rgba(60, 105, 231, 0.05);
|
||||
border-radius: 18px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Override splitpanes default theme pane background */
|
||||
.splitpanes.default-theme .splitpanes__pane {
|
||||
background-color: transparent !important;
|
||||
background-color: var(--app-bg-color) !important;
|
||||
}
|
||||
|
||||
/* Style the splitpane splitter */
|
||||
.splitpanes.default-theme .splitpanes__splitter {
|
||||
background-color: transparent !important;
|
||||
border-left: 1px solid rgba(103, 124, 155, 0.18);
|
||||
border-right: 1px solid rgba(103, 124, 155, 0.18);
|
||||
background-color: var(--app-bg-color) !important; /* Use important to ensure override */
|
||||
border-left: 1px solid var(--border-color); /* Add a subtle border */
|
||||
border-right: 1px solid var(--border-color);
|
||||
box-sizing: border-box;
|
||||
transition: background-color 0.2s ease;
|
||||
transition: background-color 0.2s ease; /* Add transition for hover effect */
|
||||
}
|
||||
|
||||
.splitpanes.default-theme .splitpanes__splitter:hover {
|
||||
background-color: rgba(60, 105, 231, 0.16) !important;
|
||||
background-color: var(--link-active-color) !important; /* Highlight on hover, keep important */
|
||||
}
|
||||
|
||||
.splitpanes--vertical > .splitpanes__splitter {
|
||||
width: 8px;
|
||||
width: 7px; /* Adjust width as needed */
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.splitpanes--horizontal > .splitpanes__splitter {
|
||||
height: 8px;
|
||||
border-top: 1px solid rgba(103, 124, 155, 0.18);
|
||||
border-bottom: 1px solid rgba(103, 124, 155, 0.18);
|
||||
height: 7px; /* Adjust height as needed */
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-top: 1px solid var(--border-color);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
/* Style scrollbars */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
width: 8px; /* Width of vertical scrollbar */
|
||||
height: 8px; /* Height of horizontal scrollbar */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.28);
|
||||
border-radius: 999px;
|
||||
background: var(--app-bg-color); /* Scrollbar track background */
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(104, 123, 152, 0.5);
|
||||
border-radius: 999px;
|
||||
border: 2px solid transparent;
|
||||
background-clip: padding-box;
|
||||
background-color: var(--border-color); /* Scrollbar handle color */
|
||||
border-radius: 4px;
|
||||
border: 2px solid var(--app-bg-color); /* Creates padding around thumb */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(61, 84, 118, 0.66);
|
||||
background-color: var(--text-color-secondary); /* Scrollbar handle hover color */
|
||||
}
|
||||
|
||||
::v-deep(.el-progress-bar__outer) {
|
||||
background-color: rgba(226, 233, 244, 0.86) !important;
|
||||
/* Input focus styles */
|
||||
input:focus, textarea:focus, select:focus {
|
||||
border-color: var(--input-focus-border-color) !important; /* Use new variable, !important might be needed depending on specificity */
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 3px rgba(var(--input-focus-glow-rgb), 0.2) !important; /* Use new variable, !important might be needed */
|
||||
}
|
||||
|
||||
/* Ensure icons inside primary buttons are white */
|
||||
button.bg-primary i,
|
||||
button.bg-primary .fas,
|
||||
button.bg-primary .far,
|
||||
button.bg-primary .fab {
|
||||
color: white !important; /* Force white color */
|
||||
}
|
||||
|
||||
/* Optional: Keep icon white even on hover for primary buttons */
|
||||
button.bg-primary:hover i,
|
||||
button.bg-primary:hover .fas,
|
||||
button.bg-primary:hover .far,
|
||||
button.bg-primary:hover .fab {
|
||||
color: white !important; /* Keep white on hover */
|
||||
}
|
||||
|
||||
/* 移除按钮的聚焦光圈 */
|
||||
button:focus {
|
||||
outline: none !important;
|
||||
box-shadow: none !important; /* 同时移除 box-shadow 以防其被用于聚焦指示 */
|
||||
}
|
||||
|
||||
/* 针对使用 :focus-visible 的浏览器 */
|
||||
button:focus-visible {
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
/* 当鼠标悬停在按钮上时，鼠标指针变为手型 */
|
||||
button:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
Reference in New Issue
Block a user