/* ═══════════════════════════════════════════════════ 主题：日式极简风 theme-minimal 用法： 米白底 + 细线框 + 大留白 + 克制动色，侘寂高级感 ═══════════════════════════════════════════════════ */ html[data-theme="minimal"] { --bg: #F7F4EF; --bg-soft: #EFEAE2; --surface: #FDFBF7; --surface-2: #FAF7F1; --border: #E5DFD3; --border-strong: #D2C9B8; --text: #2D2A26; --text-2: #6B655C; --text-3: #A39B8F; --brand: #3D5A80; --brand-strong: #2E4668; --green: #5F7D4F; --orange: #C98A3D; --red: #B84A2E; --blue: #3D5A80; --purple: #7A6E8F; --gray: #A39B8F; --color-a: #B84A2E; --color-b: #3D5A80; --color-c: #7A6E8F; --radius: 4px; --radius-sm: 3px; --shadow: none; --shadow-lg: 0 8px 28px rgba(45, 42, 38, 0.10); } /* 米白纸感背景 */ html[data-theme="minimal"] body { background: var(--bg); background-image: radial-gradient(rgba(45, 42, 38, 0.03) 1px, transparent 1px); background-size: 22px 22px; } /* 标题：衬线感（日式） */ html[data-theme="minimal"] .brand h1, html[data-theme="minimal"] .section-title, html[data-theme="minimal"] .kpi-value, html[data-theme="minimal"] .group-name { font-family: 'Songti SC', 'Noto Serif SC', 'SimSun', serif; } html[data-theme="minimal"] .brand h1 { letter-spacing: 2px; color: #2D2A26; font-weight: 700; } html[data-theme="minimal"] .brand-en { letter-spacing: 3px; color: var(--text-3); } /* 头部：细线分隔，无底色堆叠 */ html[data-theme="minimal"] .topbar { background: rgba(247, 244, 239, 0.9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom: 1px solid var(--border-strong); } html[data-theme="minimal"] .live-time { background: transparent; border: 1px solid var(--border-strong); border-radius: 2px; letter-spacing: 0.5px; } /* 卡片：纸白 + 细线，无阴影 */ html[data-theme="minimal"] .kpi-card, html[data-theme="minimal"] .group-card, html[data-theme="minimal"] .ms-card, html[data-theme="minimal"] .blk-card, html[data-theme="minimal"] .task-card, html[data-theme="minimal"] .goal-card { background: var(--surface); border: 1px solid var(--border); box-shadow: none; border-radius: var(--radius); } html[data-theme="minimal"] .kpi-card { position: relative; padding-left: 22px; } html[data-theme="minimal"] .kpi-card::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; background: var(--brand); opacity: 0.5; } html[data-theme="minimal"] .kpi-card:hover { border-color: var(--border-strong); } html[data-theme="minimal"] .kpi-value { color: #2D2A26; letter-spacing: 1px; } html[data-theme="minimal"] .kpi-value.c-orange { color: var(--orange); } html[data-theme="minimal"] .kpi-value.c-red { color: var(--red); } /* 进度条：细条原色 */ html[data-theme="minimal"] .progress { height: 4px; background: var(--bg-soft); border-radius: 0; } html[data-theme="minimal"] .progress > i { border-radius: 0; } html[data-theme="minimal"] .progress.green > i { background: var(--green); } html[data-theme="minimal"] .progress.orange > i { background: var(--orange); } html[data-theme="minimal"] .progress.red > i { background: var(--red); } /* 表格：极简细线 */ html[data-theme="minimal"] .table-wrap { border: 1px solid var(--border); border-radius: var(--radius); } html[data-theme="minimal"] .data-table th { background: transparent; border-bottom: 1px solid var(--border-strong); color: var(--text-2); letter-spacing: 1px; font-size: 12px; } html[data-theme="minimal"] .data-table td { border-bottom: 1px solid var(--border); } html[data-theme="minimal"] .data-table tbody tr:hover td { background: var(--surface-2); } /* Kanban：米色列 + 细分隔 */ html[data-theme="minimal"] .kanban-col { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); } html[data-theme="minimal"] .kanban-col-head { letter-spacing: 1px; } html[data-theme="minimal"] .kanban-col-head .count { background: transparent; border: 1px solid var(--border-strong); box-shadow: none; color: var(--text-2); } /* 标签：克制——浅底细字，无高饱和 */ html[data-theme="minimal"] .tag { border-radius: 2px; letter-spacing: 0.5px; } html[data-theme="minimal"] .tag-green { background: rgba(95, 125, 79, 0.10); color: var(--green); } html[data-theme="minimal"] .tag-red { background: rgba(184, 74, 46, 0.10); color: var(--red); } html[data-theme="minimal"] .tag-orange { background: rgba(201, 138, 61, 0.12); color: var(--orange); } html[data-theme="minimal"] .tag-blue { background: rgba(61, 90, 128, 0.10); color: var(--blue); } html[data-theme="minimal"] .tag-purple { background: rgba(122, 110, 143, 0.12); color: var(--purple); } html[data-theme="minimal"] .tag-a { background: rgba(184, 74, 46, 0.10); color: var(--color-a); } html[data-theme="minimal"] .tag-b { background: rgba(61, 90, 128, 0.10); color: var(--color-b); } html[data-theme="minimal"] .tag-c { background: rgba(122, 110, 143, 0.12); color: var(--color-c); } /* 抽屉 / 浮层：纸面 */ html[data-theme="minimal"] .drawer, html[data-theme="minimal"] .modal { background: var(--surface); box-shadow: var(--shadow-lg); } html[data-theme="minimal"] .drawer-head, html[data-theme="minimal"] .modal-head { border-bottom: 1px solid var(--border-strong); } html[data-theme="minimal"] .detail-field { border-bottom: 1px dashed var(--border); } html[data-theme="minimal"] .drawer-back { background: transparent; border: 1px solid var(--border-strong); border-radius: 2px; } html[data-theme="minimal"] .month-row.bad { background: rgba(184, 74, 46, 0.06); } /* 控件：直边细框 */ html[data-theme="minimal"] #globalSearch, html[data-theme="minimal"] .filter-select, html[data-theme="minimal"] .refresh-btn { border-radius: 2px; border-color: var(--border-strong); background: transparent; color: var(--text-2); } html[data-theme="minimal"] #globalSearch:focus { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(61, 90, 128, 0.12); } html[data-theme="minimal"] .tabs { background: transparent; border: 1px solid var(--border-strong); border-radius: 2px; } html[data-theme="minimal"] .tab { border-radius: 0; letter-spacing: 1px; } html[data-theme="minimal"] .tab.active { background: transparent; color: var(--brand); font-weight: 600; box-shadow: none; border-bottom: 2px solid var(--brand); } html[data-theme="minimal"] .btn { border-radius: 2px; border-color: var(--border-strong); } html[data-theme="minimal"] .btn-primary { background: var(--brand); border-color: var(--brand); color: #FDFBF7; } html[data-theme="minimal"] .empty-state { color: var(--text-3); } html[data-theme="minimal"] .page-footer { color: var(--text-3); letter-spacing: 1px; }