114 lines
2.8 KiB
SCSS
114 lines
2.8 KiB
SCSS
|
/**
|
|||
|
|
* UI06 全局视觉对齐层（admin-preview-2026-09-22 示例基准）
|
|||
|
|
* 冲突时以示例为准（方案 §0）；本文件只做浅色主题覆盖，深色主题保持可用不重设计。
|
|||
|
|
* 示例 token 对照：docs/designs/admin-preview-2026-09-22/styles.css `:root`
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
/* ── 浅色主题变量对齐 ── */
|
|||
|
|
:root {
|
|||
|
|
/* 工作区背景 #F5F7FA（示例 --bg） */
|
|||
|
|
--default-bg-color: #f5f7fa;
|
|||
|
|
/* 边框 #E5EAF1（示例 --line） */
|
|||
|
|
--art-card-border: #e5eaf1;
|
|||
|
|
--default-border: #e5eaf1;
|
|||
|
|
--default-border-dashed: #e5eaf1;
|
|||
|
|
/* Element 基准字号/圆角（示例正文 12–13px、控件 8px） */
|
|||
|
|
--el-font-size-base: 13px;
|
|||
|
|
--el-border-radius-base: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── 字体（示例：系统无衬线栈，Windows 中文优先 Microsoft YaHei） ── */
|
|||
|
|
body {
|
|||
|
|
font: 13px/1.55 system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei',
|
|||
|
|
sans-serif;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── 卡片：白底 + 1px 边框 + 12px 圆角，无重阴影（示例 .card） ── */
|
|||
|
|
.el-card {
|
|||
|
|
--el-card-border-color: #e5eaf1;
|
|||
|
|
--el-card-border-radius: 12px;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
border: 1px solid #e5eaf1;
|
|||
|
|
box-shadow: none;
|
|||
|
|
|
|||
|
|
&.is-always-shadow,
|
|||
|
|
&.is-hover-shadow:hover {
|
|||
|
|
box-shadow: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── 按钮：38px 高、8px 圆角（示例 .btn） ── */
|
|||
|
|
.el-button {
|
|||
|
|
min-height: 38px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
font-weight: 550;
|
|||
|
|
|
|||
|
|
&--small {
|
|||
|
|
min-height: 30px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── 输入/选择器：38px 高（示例 .input） ── */
|
|||
|
|
.el-input__wrapper,
|
|||
|
|
.el-select__wrapper,
|
|||
|
|
.el-textarea__inner {
|
|||
|
|
border-radius: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-input .el-input__inner {
|
|||
|
|
height: 38px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── 表格：浅底表头 + 轻分隔（示例 .data-table） ── */
|
|||
|
|
.el-table {
|
|||
|
|
--el-table-header-bg-color: #f7f9fc;
|
|||
|
|
--el-table-header-text-color: #8291a6;
|
|||
|
|
--el-table-row-hover-bg-color: #f5f8fd;
|
|||
|
|
--el-table-border-color: #eef1f5;
|
|||
|
|
|
|||
|
|
th.el-table__cell {
|
|||
|
|
font-size: 11px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-table__cell {
|
|||
|
|
padding: 13px 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── 对话框：16px 圆角（示例 .dialog） ── */
|
|||
|
|
.el-dialog {
|
|||
|
|
--el-dialog-border-radius: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── 标签（状态 pill 基调：10–11px、6px 圆角） ── */
|
|||
|
|
.el-tag {
|
|||
|
|
border-radius: 6px;
|
|||
|
|
font-size: 11px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── 分段（示例 .seg：#edf1f7 轨道、选中白底蓝字） ── */
|
|||
|
|
.el-segmented {
|
|||
|
|
--el-border-radius-base: 8px;
|
|||
|
|
background-color: #edf1f7;
|
|||
|
|
padding: 3px;
|
|||
|
|
|
|||
|
|
.el-segmented__item-selected {
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
color: var(--el-color-primary);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── 页面标题层级（示例：页面 27px / 卡片 17px） ── */
|
|||
|
|
.el-breadcrumb {
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── 焦点可见（示例 focus-visible 3px 蓝框） ── */
|
|||
|
|
.el-button:focus-visible,
|
|||
|
|
.el-input__inner:focus-visible,
|
|||
|
|
.el-select__wrapper:focus-visible {
|
|||
|
|
outline: 3px solid #9fc7ff;
|
|||
|
|
outline-offset: 2px;
|
|||
|
|
}
|