218 lines
5.3 KiB
CSS
218 lines
5.3 KiB
CSS
:root {
|
||
--green-900: #123d2d;
|
||
--green-800: #1a5a42;
|
||
--green-700: #237556;
|
||
--green-600: #2f8f68;
|
||
--green-500: #43a879;
|
||
--green-100: #eef9f3;
|
||
--surface: #f7fbf8;
|
||
--surface-strong: #ffffff;
|
||
--text-primary: #1b2a23;
|
||
--text-secondary: #4b6156;
|
||
--border-soft: #d6e6dc;
|
||
--shadow-soft: 0 14px 30px rgba(19, 61, 45, 0.09);
|
||
--shadow-strong: 0 20px 45px rgba(19, 61, 45, 0.16);
|
||
|
||
/* 残片/提醒语义色（对应 EP warning 色系，避免各组件硬编码） */
|
||
--accent-warning: #e6a23c;
|
||
--accent-warning-soft: #fff8e1;
|
||
--accent-warning-strong: #b8860b;
|
||
/* 成功/命中语义的浅底与深字（统计卡片、标签共用） */
|
||
--accent-success-soft: #e8f5e9;
|
||
--accent-success-softer: #f1f8e9;
|
||
--accent-success-strong: #2e7d32;
|
||
--accent-success-text: #856404;
|
||
}
|
||
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html,
|
||
body,
|
||
#app {
|
||
min-height: 100%;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
color: var(--text-primary);
|
||
background:
|
||
radial-gradient(circle at 12% 18%, rgba(67, 168, 121, 0.2), transparent 32%),
|
||
radial-gradient(circle at 85% 0%, rgba(35, 117, 86, 0.14), transparent 28%),
|
||
linear-gradient(165deg, #eef9f3 0%, #f8fcfa 50%, #edf7f1 100%);
|
||
font-family: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
line-height: 1.6;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
|
||
/* ------------------------------------------------------------------
|
||
* Element Plus 主题对齐
|
||
*
|
||
* EP 默认 success 是黄绿 #67c23a，与本站墨绿主题色相不一致，
|
||
* 且白字压在其上对比度仅 2.24:1（低于 WCAG AA 4.5:1）。
|
||
* 这里统一改写 EP 的 success / primary 色阶，使全站按钮、标签、
|
||
* 开关等组件自动使用主题绿。
|
||
*
|
||
* 注意：本文件在 main.ts 中必须导入在 element-plus 样式之后，
|
||
* 否则同特异度下会被 EP 默认值覆盖。
|
||
* ------------------------------------------------------------------ */
|
||
:root {
|
||
/* primary 与 success 同源：本站正向语义统一走 success，primary 仅次级编辑 */
|
||
--el-color-primary: var(--green-700);
|
||
--el-color-primary-light-3: #4a8f74;
|
||
--el-color-primary-light-5: #6ba98f;
|
||
--el-color-primary-light-7: #9cc7b5;
|
||
--el-color-primary-light-8: #bcd9cc;
|
||
--el-color-primary-light-9: #eef9f3;
|
||
--el-color-primary-dark-2: var(--green-800);
|
||
|
||
--el-color-success: var(--green-700);
|
||
--el-color-success-light-3: #4a8f74;
|
||
--el-color-success-light-5: #6ba98f;
|
||
--el-color-success-light-7: #9cc7b5;
|
||
--el-color-success-light-8: #bcd9cc;
|
||
--el-color-success-light-9: #eef9f3;
|
||
--el-color-success-dark-2: var(--green-800);
|
||
}
|
||
|
||
#app {
|
||
width: 100%;
|
||
}
|
||
|
||
a {
|
||
color: var(--green-700);
|
||
text-decoration: none;
|
||
}
|
||
|
||
a:hover {
|
||
color: var(--green-800);
|
||
}
|
||
|
||
.page-title {
|
||
margin: 0;
|
||
font-size: clamp(24px, 3vw, 34px);
|
||
line-height: 1.2;
|
||
letter-spacing: 0.4px;
|
||
}
|
||
|
||
.page-subtitle {
|
||
margin: 10px 0 0;
|
||
color: var(--text-secondary);
|
||
font-size: 15px;
|
||
}
|
||
|
||
.surface-card {
|
||
background: rgba(255, 255, 255, 0.85);
|
||
backdrop-filter: blur(12px);
|
||
-webkit-backdrop-filter: blur(12px);
|
||
border: 1px solid var(--border-soft);
|
||
border-radius: 18px;
|
||
box-shadow: var(--shadow-soft);
|
||
}
|
||
|
||
/* ------------------------------------------------------------------
|
||
* 按钮尺寸收敛
|
||
*
|
||
* EP 默认 large / default / small 三档实测高度为 32 / 32 / 24px：
|
||
* large 与 default 在视觉上无法区分，行内 small 的 24px 又低于触屏
|
||
* 舒适点击区。这里保持两个视觉层级：
|
||
* 主操作 large → 40px 高
|
||
* 常规/行内 default、small → 至少 28px 高（保留 small 的紧凑感）
|
||
* 字号统一 13px 上限，避免行内按钮字号过小（原为 12px）。
|
||
* ------------------------------------------------------------------ */
|
||
.el-button--large {
|
||
--el-button-size: 40px;
|
||
padding: 0 20px;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.el-button--small {
|
||
--el-button-size: 28px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.el-button--small.is-text,
|
||
.el-button--small.is-link {
|
||
padding: 0 8px;
|
||
}
|
||
|
||
/* 按钮操作区统一规范：窄屏下操作按钮纵向全宽 */
|
||
.action-row .el-button,
|
||
.edit-actions .el-button,
|
||
.fragment-edit-actions .el-button,
|
||
.task-actions .el-button {
|
||
margin: 0;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.action-row,
|
||
.edit-actions,
|
||
.fragment-edit-actions,
|
||
.task-actions {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.action-row .el-button,
|
||
.edit-actions .el-button,
|
||
.fragment-edit-actions .el-button,
|
||
.task-actions .el-button {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
/* 移动端弹窗适配：覆盖 Element Plus 内联宽度并约束 footer */
|
||
@media (max-width: 768px) {
|
||
.el-dialog {
|
||
--el-dialog-width: calc(100% - 24px) !important;
|
||
--el-dialog-margin-top: 5vh;
|
||
max-height: calc(100vh - 60px);
|
||
}
|
||
|
||
.el-dialog__body {
|
||
max-height: calc(100vh - 200px);
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.el-dialog__footer {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
|
||
.el-dialog__footer .el-button {
|
||
flex: 1;
|
||
margin-left: 0;
|
||
}
|
||
|
||
.el-message-box {
|
||
max-width: calc(100% - 24px);
|
||
}
|
||
|
||
.el-message-box__btns {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
|
||
.el-message-box__btns .el-button {
|
||
flex: 1;
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
|
||
.fade-up-enter-active,
|
||
.fade-up-leave-active {
|
||
transition: opacity 0.22s ease, transform 0.22s ease;
|
||
}
|
||
|
||
.fade-up-enter-from,
|
||
.fade-up-leave-to {
|
||
opacity: 0;
|
||
transform: translateY(8px);
|
||
}
|