feat(frontend): unify ui with slate control center
add shared page and auth shells to standardize the main application layout and authentication entry experience refresh dashboard, settings, login, setup, notifications, proxies, and audit logs with a consistent Element Plus based control-center presentation modernize workspace side panels and status monitor while keeping the three-column layout, and fix the terminal hover cursor to show a text caret
This commit is contained in:
yinjianm
+298
-161
@@ -1,23 +1,24 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* Tailwind Theme Variables Mapping */
|
||||
@theme inline {
|
||||
/* 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-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);
|
||||
--color-text-secondary: var(--text-color-secondary);
|
||||
--color-border: var(--border-color); /* Simplified name */
|
||||
--color-border-default: var(--border-color); /* Keep specific if needed */
|
||||
--color-text-alt: var(--text-color-tertiary);
|
||||
--color-border: var(--border-color);
|
||||
--color-link: var(--link-color);
|
||||
--color-link-hover: var(--link-hover-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-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-header: var(--header-bg-color);
|
||||
--color-footer: var(--footer-bg-color);
|
||||
--color-button: var(--button-bg-color);
|
||||
@@ -27,200 +28,336 @@
|
||||
--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(--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);
|
||||
--color-success: var(--success-color);
|
||||
--color-warning: var(--warning-color);
|
||||
--color-error: var(--error-color);
|
||||
}
|
||||
|
||||
/* 全局样式和 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; /* 激活链接/主题色 */
|
||||
--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; /* 基础外边距 */
|
||||
--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%;
|
||||
}
|
||||
|
||||
/* 应用基础样式 */
|
||||
body {
|
||||
margin: 0; /* 移除默认 body margin */
|
||||
margin: 0;
|
||||
font-family: var(--font-family-sans-serif);
|
||||
background-color: var(--app-bg-color);
|
||||
color: var(--text-color);
|
||||
line-height: 1.6; /* 改善可读性 */
|
||||
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%);
|
||||
}
|
||||
|
||||
/* 全局链接样式 */
|
||||
a {
|
||||
/* color: var(--link-color); */ /* 注释掉全局 a 标签的颜色设置，让 Tailwind 类生效 */
|
||||
text-decoration: none; /* 移除下划线 */
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Removed global a:hover underline rule to avoid conflicts with Tailwind utilities */
|
||||
|
||||
/* 全局图标样式 */
|
||||
i, .fas, .far, .fab { /* 根据你使用的图标库调整选择器 */
|
||||
color: var(--icon-color);
|
||||
i,
|
||||
.fas,
|
||||
.far,
|
||||
.fab {
|
||||
color: inherit;
|
||||
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);
|
||||
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
/* 全局分割线样式 */
|
||||
|
||||
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 var(--divider-color);
|
||||
border-top: 1px solid rgba(103, 124, 155, 0.18);
|
||||
margin: var(--base-margin) 0;
|
||||
}
|
||||
|
||||
|
||||
/* 可以添加更多全局样式规则 */
|
||||
|
||||
/* 为 xterm 终端添加内边距 */
|
||||
|
||||
.xterm{
|
||||
padding: 10px 10px 10px 10px;
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
/* 为历史记录和快捷命令列表设置字体 */
|
||||
/* 注意：这里的选择器可能需要根据实际组件结构调整 */
|
||||
.command-history-item,
|
||||
.quick-command-item { /* 假设这些是列表项的类名 */
|
||||
font-family: var(--font-family-sans-serif);
|
||||
}
|
||||
|
||||
/* 如果是 Element Plus 的 Table 组件 */
|
||||
.quick-command-item,
|
||||
.el-table .cell {
|
||||
font-family: var(--font-family-sans-serif);
|
||||
}
|
||||
|
||||
/* Override splitpanes default theme pane background */
|
||||
.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;
|
||||
}
|
||||
|
||||
.splitpanes.default-theme .splitpanes__pane {
|
||||
background-color: var(--app-bg-color) !important;
|
||||
background-color: transparent !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);
|
||||
background-color: transparent !important;
|
||||
border-left: 1px solid rgba(103, 124, 155, 0.18);
|
||||
border-right: 1px solid rgba(103, 124, 155, 0.18);
|
||||
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);
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.splitpanes.default-theme .splitpanes__splitter:hover {
|
||||
background-color: rgba(60, 105, 231, 0.16) !important;
|
||||
}
|
||||
|
||||
.splitpanes--vertical > .splitpanes__splitter {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
/* Style scrollbars */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px; /* Width of vertical scrollbar */
|
||||
height: 8px; /* Height of horizontal scrollbar */
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--app-bg-color); /* Scrollbar track background */
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 255, 255, 0.28);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
::-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 */
|
||||
background-color: rgba(104, 123, 152, 0.5);
|
||||
border-radius: 999px;
|
||||
border: 2px solid transparent;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--text-color-secondary); /* Scrollbar handle hover color */
|
||||
background-color: rgba(61, 84, 118, 0.66);
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
::v-deep(.el-progress-bar__outer) {
|
||||
background-color: rgba(226, 233, 244, 0.86) !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;
|
||||
}
|
||||
Reference in New Issue
Block a user