yinjianm
96d9950c6b
将 `packages/frontend` 的 Vite 开发代理改为可通过环境变量 切换目标地址，并补充本地联调所需的默认主题与样式更新。 同时同步更新前后端默认 UI 主题定义，便于在本地直接验证 远端接口、WebSocket 与视觉效果。
246 lines
8.2 KiB
CSS
246 lines
8.2 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* Tailwind Theme Variables Mapping — NVIDIA Design System */
|
|
@theme inline {
|
|
/* Base Colors */
|
|
--color-background: var(--app-bg-color);
|
|
--color-foreground: var(--text-color);
|
|
--color-app: var(--app-bg-color);
|
|
--color-text-default: var(--text-color);
|
|
--color-text-secondary: var(--text-color-secondary);
|
|
--color-text-tertiary: var(--text-color-tertiary);
|
|
--color-border: var(--border-color);
|
|
--color-border-default: var(--border-color);
|
|
--color-link: var(--link-color);
|
|
--color-link-hover: var(--link-hover-color);
|
|
--color-link-active: var(--link-active-color);
|
|
--color-primary: var(--link-active-color);
|
|
--color-link-active-bg: var(--link-active-bg-color);
|
|
--color-nav-active-bg: var(--nav-item-active-bg-color);
|
|
|
|
/* Component Colors */
|
|
--color-header: var(--header-bg-color);
|
|
--color-footer: var(--footer-bg-color);
|
|
--color-card: var(--card-bg-color);
|
|
--color-button: var(--button-bg-color);
|
|
--color-button-text: var(--button-text-color);
|
|
--color-button-hover: var(--button-hover-bg-color);
|
|
--color-button-secondary: var(--button-secondary-bg-color);
|
|
--color-icon: var(--icon-color);
|
|
--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-focus-border: var(--input-focus-border-color);
|
|
--color-overlay: var(--overlay-bg-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);
|
|
|
|
/* Radius Scale (Apple) */
|
|
--radius-micro: 5px;
|
|
--radius-standard: 8px;
|
|
--radius-comfortable: 11px;
|
|
--radius-large: 12px;
|
|
--radius-pill: 980px;
|
|
|
|
/* Shadow (NVIDIA) */
|
|
--shadow-card: rgba(0, 0, 0, 0.3) 0px 0px 5px 0px;
|
|
--shadow-subtle: rgba(0, 0, 0, 0.2) 0px 1px 3px 0px;
|
|
}
|
|
|
|
/* ─────────────────────────────────────────────
|
|
NVIDIA Design System — Dark Theme (Default)
|
|
───────────────────────────────────────────── */
|
|
:root {
|
|
/* Base Colors (NVIDIA Dark) */
|
|
--app-bg-color: #000000; /* True Black */
|
|
--text-color: #ffffff; /* White on dark */
|
|
--text-color-secondary: #a7a7a7; /* Gray 300 */
|
|
--text-color-tertiary: #757575; /* Gray 500 */
|
|
--border-color: #5e5e5e; /* Gray Border */
|
|
--link-color: #ffffff; /* White links on dark */
|
|
--link-hover-color: #3860be; /* Blue hover */
|
|
--link-active-color: #76b900; /* NVIDIA Green */
|
|
--link-active-bg-color: rgba(118, 185, 0, 0.12); /* Green 12% */
|
|
--nav-item-active-bg-color: var(--link-active-bg-color);
|
|
|
|
/* Component Colors (NVIDIA Dark) */
|
|
--header-bg-color: #000000;
|
|
--footer-bg-color: #000000;
|
|
--card-bg-color: #1a1a1a; /* Near Black cards */
|
|
--button-bg-color: #76b900; /* NVIDIA Green CTA */
|
|
--button-text-color: #000000; /* Black on green */
|
|
--button-hover-bg-color: #1eaedb; /* Teal hover */
|
|
--button-secondary-bg-color: #1a1a1a;
|
|
--icon-color: #757575; /* Gray 500 */
|
|
--icon-hover-color: #76b900; /* NVIDIA Green */
|
|
--split-line-color: #5e5e5e;
|
|
--split-line-hover-color: #76b900;
|
|
--input-focus-border-color: #76b900; /* Green focus ring */
|
|
--input-focus-glow: #76b900;
|
|
--overlay-bg-color: rgba(0, 0, 0, 0.85);
|
|
|
|
/* Status Colors (NVIDIA) */
|
|
--color-success: #3f8500;
|
|
--color-warning: #ef9100;
|
|
--color-error: #e52020;
|
|
--color-success-text: #ffffff;
|
|
--color-warning-text: #1a1a1a;
|
|
--color-error-text: #ffffff;
|
|
|
|
/* Typography */
|
|
--font-family-sans-serif: Arial, Helvetica, sans-serif;
|
|
|
|
/* Spacing */
|
|
--base-padding: 1rem;
|
|
--base-margin: 0.5rem;
|
|
}
|
|
|
|
/* 应用基础样式 */
|
|
body {
|
|
margin: 0;
|
|
font-family: var(--font-family-sans-serif);
|
|
background-color: var(--app-bg-color);
|
|
color: var(--text-color);
|
|
line-height: 1.5;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* 全局链接样式 */
|
|
a {
|
|
/* color: var(--link-color); */ /* 注释掉全局 a 标签的颜色设置，让 Tailwind 类生效 */
|
|
text-decoration: none; /* 移除下划线 */
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
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);
|
|
}
|
|
/* 全局分割线样式 */
|
|
hr {
|
|
border: none;
|
|
border-top: 1px solid var(--divider-color);
|
|
margin: var(--base-margin) 0;
|
|
}
|
|
|
|
|
|
/* 可以添加更多全局样式规则 */
|
|
|
|
/* 为 xterm 终端添加内边距 */
|
|
|
|
.xterm{
|
|
padding: 10px 10px 10px 10px;
|
|
|
|
}
|
|
|
|
/* 为历史记录和快捷命令列表设置字体 */
|
|
/* 注意：这里的选择器可能需要根据实际组件结构调整 */
|
|
.command-history-item,
|
|
.quick-command-item { /* 假设这些是列表项的类名 */
|
|
font-family: var(--font-family-sans-serif);
|
|
}
|
|
|
|
/* 如果是 Element Plus 的 Table 组件 */
|
|
.el-table .cell {
|
|
font-family: var(--font-family-sans-serif);
|
|
}
|
|
|
|
/* Override splitpanes default theme pane background */
|
|
.splitpanes.default-theme .splitpanes__pane {
|
|
background-color: var(--app-bg-color) !important;
|
|
}
|
|
|
|
/* Style the splitpane splitter */
|
|
.splitpanes.default-theme .splitpanes__splitter {
|
|
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; /* Add transition for hover effect */
|
|
}
|
|
.splitpanes.default-theme .splitpanes__splitter:hover {
|
|
background-color: var(--link-active-color) !important; /* Highlight on hover, keep important */
|
|
}
|
|
.splitpanes--vertical > .splitpanes__splitter {
|
|
width: 7px; /* Adjust width as needed */
|
|
border-top: none;
|
|
border-bottom: none;
|
|
}
|
|
.splitpanes--horizontal > .splitpanes__splitter {
|
|
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 — dark theme */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #1a1a1a;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: #5e5e5e;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background-color: #76b900;
|
|
}
|
|
|
|
/* Input focus styles — NVIDIA Green ring */
|
|
input:focus, textarea:focus, select:focus {
|
|
border-color: var(--input-focus-border-color) !important;
|
|
outline: 0;
|
|
box-shadow: 0 0 0 2px rgba(118, 185, 0, 0.25) !important;
|
|
}
|
|
|
|
/* 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;
|
|
} |