/* ═══════════════════════════════════════════════════ 主题：活力渐变风 theme-vivid 用法： 明亮渐变卡片 + 大圆角 + 饱和色块，年轻有能量 ═══════════════════════════════════════════════════ */ html[data-theme="vivid"] { --bg: #F6F8FF; --bg-soft: #EEF1FB; --surface: #FFFFFF; --surface-2: #FAF6FF; --border: #E6E9F5; --border-strong: #D3D9EF; --text: #1E2540; --text-2: #5A6384; --text-3: #9AA3C0; --brand: #4F6DF5; --brand-strong: #6C4DF5; --green: #00C48C; --orange: #FF8A3D; --red: #FF4D6D; --blue: #3D7BFF; --purple: #8B5CF6; --gray: #8A93B0; --color-a: #FF4D6D; --color-b: #3D7BFF; --color-c: #8B5CF6; --radius: 16px; --radius-sm: 10px; --shadow: 0 4px 16px rgba(79, 109, 245, 0.08); --shadow-lg: 0 12px 36px rgba(79, 109, 245, 0.16); } /* 柔和渐变底 */ html[data-theme="vivid"] body { background: linear-gradient(160deg, #F6F8FF 0%, #F3F0FF 45%, #FEF4F8 100%); background-attachment: fixed; } /* 头部：白底轻浮 + 底部彩线 */ html[data-theme="vivid"] .topbar { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, #4F6DF5, #FF8A3D, #00C48C) 1; border-image-slice: 1; } html[data-theme="vivid"] .brand h1 { background: linear-gradient(90deg, #4F6DF5, #8B5CF6, #FF4D6D); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* 卡片：白底 + 渐变描边 + 大圆角 */ html[data-theme="vivid"] .kpi-card, html[data-theme="vivid"] .group-card, html[data-theme="vivid"] .ms-card, html[data-theme="vivid"] .blk-card, html[data-theme="vivid"] .task-card { background: var(--surface); border: 1px solid transparent; background-clip: padding-box; box-shadow: var(--shadow); } html[data-theme="vivid"] .kpi-card { border-radius: var(--radius); position: relative; overflow: hidden; } html[data-theme="vivid"] .kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--brand), var(--purple), var(--orange)); } html[data-theme="vivid"] .kpi-card:hover, html[data-theme="vivid"] .ms-card:hover, html[data-theme="vivid"] .group-card:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(79, 109, 245, 0.18); } html[data-theme="vivid"] .group-card, html[data-theme="vivid"] .ms-card, html[data-theme="vivid"] .blk-card, html[data-theme="vivid"] .task-card { border-radius: var(--radius-sm); } html[data-theme="vivid"] .goal-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); background: linear-gradient(135deg, #FDFEFF, #F6F8FF); } /* KPI 数字：饱和彩色 */ html[data-theme="vivid"] .kpi-value { background: linear-gradient(90deg, #1E2540, #4F6DF5); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } html[data-theme="vivid"] .kpi-value.c-orange { background: linear-gradient(90deg, #FF8A3D, #FF4D6D); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } html[data-theme="vivid"] .kpi-value.c-red { background: linear-gradient(90deg, #FF4D6D, #FF2D55); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* 进度条：糖果渐变 */ html[data-theme="vivid"] .progress > i { background: linear-gradient(90deg, #4F6DF5, #8B5CF6, #FF8A3D); border-radius: 6px; } html[data-theme="vivid"] .progress.orange > i { background: linear-gradient(90deg, #FFB020, #FF8A3D); } html[data-theme="vivid"] .progress.red > i { background: linear-gradient(90deg, #FF6B8A, #FF4D6D); } html[data-theme="vivid"] .progress.green > i { background: linear-gradient(90deg, #00E5A0, #00C48C); } html[data-theme="vivid"] .progress { background: #EFF2FC; } /* 表格 */ html[data-theme="vivid"] .table-wrap { border-radius: var(--radius-sm); border-color: var(--border); } html[data-theme="vivid"] .data-table th { background: linear-gradient(90deg, #F4F6FF, #F8F5FF); color: var(--text-2); } html[data-theme="vivid"] .data-table tbody tr:hover td { background: #F8FAFF; } /* Kanban 列 */ html[data-theme="vivid"] .kanban-col { background: #EEF1FB; border-radius: var(--radius-sm); } html[data-theme="vivid"] .kanban-col-head .count { background: #fff; color: var(--brand); } /* 标签：饱和浅底 + 圆角 */ html[data-theme="vivid"] .tag { border-radius: 8px; font-weight: 600; } html[data-theme="vivid"] .tag-green { background: rgba(0, 196, 140, 0.12); } html[data-theme="vivid"] .tag-red { background: rgba(255, 77, 109, 0.12); } html[data-theme="vivid"] .tag-orange { background: rgba(255, 138, 61, 0.14); } html[data-theme="vivid"] .tag-blue { background: rgba(61, 123, 255, 0.12); } html[data-theme="vivid"] .tag-purple { background: rgba(139, 92, 246, 0.14); } html[data-theme="vivid"] .tag-a { background: rgba(255, 77, 109, 0.14); color: var(--color-a); } html[data-theme="vivid"] .tag-b { background: rgba(61, 123, 255, 0.14); color: var(--color-b); } html[data-theme="vivid"] .tag-c { background: rgba(139, 92, 246, 0.16); color: var(--color-c); } /* 抽屉 / 浮层 */ html[data-theme="vivid"] .drawer, html[data-theme="vivid"] .modal { background: #fff; border-radius: 0 0 0 var(--radius); } html[data-theme="vivid"] .drawer { box-shadow: -12px 0 40px rgba(79, 109, 245, 0.18); } html[data-theme="vivid"] .drawer-head { background: linear-gradient(90deg, #F6F8FF, #FBF7FF); } html[data-theme="vivid"] .drawer-back { background: #fff; border: 1px solid var(--border); } /* 控件 */ html[data-theme="vivid"] #globalSearch, html[data-theme="vivid"] .filter-select { border-radius: 10px; border-color: var(--border-strong); background: #fff; } html[data-theme="vivid"] #globalSearch:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79, 109, 245, 0.15); } html[data-theme="vivid"] .tabs { background: #EDF0FB; border-radius: 10px; } html[data-theme="vivid"] .tab.active { background: linear-gradient(135deg, #4F6DF5, #8B5CF6); color: #fff; box-shadow: 0 4px 12px rgba(79, 109, 245, 0.35); } html[data-theme="vivid"] .live-time { background: linear-gradient(90deg, #EEF1FF, #FDF0F6); color: var(--text-2); } html[data-theme="vivid"] .refresh-btn { border-radius: 10px; background: #fff; } html[data-theme="vivid"] .btn { border-radius: 8px; } html[data-theme="vivid"] .btn-primary { background: linear-gradient(135deg, #4F6DF5, #8B5CF6); border: none; box-shadow: 0 4px 14px rgba(79, 109, 245, 0.3); } html[data-theme="vivid"] .month-row.bad { background: rgba(255, 77, 109, 0.06); }