Baobhan Sith
115 lines
3.6 KiB
CSS
115 lines
3.6 KiB
CSS
/* 全局样式和 CSS 变量定义 */
|
|
:root {
|
|
/* 基础颜色 */
|
|
--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; /* 激活链接/主题色 */
|
|
|
|
/* 组件颜色 */
|
|
--header-bg-color: #f0f0f0; /* 头部背景色 */
|
|
--footer-bg-color: #f0f0f0; /* 底部背景色 */
|
|
--button-bg-color: #007bff; /* 按钮背景色 */
|
|
--button-text-color: #ffffff; /* 按钮文字颜色 */
|
|
--button-hover-bg-color: #0056b3;/* 按钮悬停背景色 */
|
|
|
|
/* 字体 */
|
|
--font-family-sans-serif: sans-serif; /* 默认字体 */
|
|
|
|
/* 其他 */
|
|
--base-padding: 1rem; /* 基础内边距 */
|
|
--base-margin: 0.5rem; /* 基础外边距 */
|
|
}
|
|
|
|
/* 应用基础样式 */
|
|
body {
|
|
margin: 0; /* 移除默认 body margin */
|
|
font-family: var(--font-family-sans-serif);
|
|
background-color: var(--app-bg-color);
|
|
color: var(--text-color);
|
|
line-height: 1.6; /* 改善可读性 */
|
|
}
|
|
|
|
/* 全局链接样式 */
|
|
a {
|
|
color: var(--link-color);
|
|
text-decoration: none; /* 移除下划线 */
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--link-hover-color);
|
|
text-decoration: underline; /* 悬停时显示下划线 */
|
|
}
|
|
|
|
/* 可以添加更多全局样式规则 */
|
|
|
|
/* 为 xterm 终端添加内边距 */
|
|
.xterm-screen {
|
|
padding: 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 */
|
|
::-webkit-scrollbar {
|
|
width: 8px; /* Width of vertical scrollbar */
|
|
height: 8px; /* Height of horizontal scrollbar */
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--app-bg-color); /* Scrollbar track background */
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
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: var(--text-color-secondary); /* Scrollbar handle hover color */
|
|
}
|