/* ═══════════════════════════════════════════════════ 主题：深空科技风（数据大屏） theme-tech 用法：（由 js/theme.js 控制） 覆盖 :root 变量 + 组件质感，不改布局 ═══════════════════════════════════════════════════ */ html[data-theme="tech"] { --bg: #0B1220; --bg-soft: #111A2E; --surface: rgba(255, 255, 255, 0.05); --surface-2: rgba(255, 255, 255, 0.03); --border: rgba(148, 163, 184, 0.18); --border-strong: rgba(148, 163, 184, 0.35); --text: #E6EDF7; --text-2: #94A3B8; --text-3: #64748B; --brand: #22D3EE; --brand-strong: #818CF8; --green: #34D399; --orange: #FBBF24; --red: #F87171; --blue: #60A5FA; --purple: #A78BFA; --gray: #94A3B8; --color-a: #F87171; --color-b: #60A5FA; --color-c: #A78BFA; --shadow: 0 2px 12px rgba(0, 0, 0, 0.35); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5); } /* 深空渐变背景 */ html[data-theme="tech"] body { background: radial-gradient(ellipse 60% 40% at 15% 0%, rgba(34, 211, 238, 0.12), transparent 60%), radial-gradient(ellipse 50% 35% at 85% 10%, rgba(129, 140, 248, 0.12), transparent 60%), radial-gradient(ellipse 70% 50% at 50% 100%, rgba(192, 132, 252, 0.07), transparent 60%), var(--bg); } /* 头部：毛玻璃 */ html[data-theme="tech"] .topbar { background: rgba(11, 18, 32, 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } html[data-theme="tech"] .brand h1 { background: linear-gradient(90deg, #22D3EE, #818CF8, #C084FC); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* 卡片：玻璃质感 */ html[data-theme="tech"] .kpi-card, html[data-theme="tech"] .group-card, html[data-theme="tech"] .goal-card, html[data-theme="tech"] .ms-card, html[data-theme="tech"] .blk-card, html[data-theme="tech"] .task-card, html[data-theme="tech"] .module-card, html[data-theme="tech"] .toc-card { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(148, 163, 184, 0.16); } html[data-theme="tech"] .kpi-card:hover, html[data-theme="tech"] .ms-card:hover { box-shadow: 0 0 24px rgba(34, 211, 238, 0.15); } /* KPI 大数字霓虹发光 */ html[data-theme="tech"] .kpi-value { text-shadow: 0 0 18px rgba(34, 211, 238, 0.45); } html[data-theme="tech"] .kpi-value.c-orange { color: var(--orange); text-shadow: 0 0 18px rgba(251, 191, 36, 0.45); } html[data-theme="tech"] .kpi-value.c-red { color: var(--red); text-shadow: 0 0 18px rgba(248, 113, 113, 0.5); } /* 进度条：渐变填充 */ html[data-theme="tech"] .progress > i { background: linear-gradient(90deg, #22D3EE, #818CF8); box-shadow: 0 0 10px rgba(34, 211, 238, 0.5); } html[data-theme="tech"] .progress.orange > i { background: linear-gradient(90deg, #FBBF24, #FB923C); } html[data-theme="tech"] .progress.red > i { background: linear-gradient(90deg, #F87171, #F43F5E); } /* 表格 */ html[data-theme="tech"] .table-wrap { background: rgba(255, 255, 255, 0.04); } html[data-theme="tech"] .data-table th { background: rgba(255, 255, 255, 0.06); color: var(--text-2); border-bottom-color: var(--border); } html[data-theme="tech"] .data-table td { border-bottom-color: rgba(148, 163, 184, 0.12); color: var(--text-2); } html[data-theme="tech"] .data-table tbody tr:hover td { background: rgba(255, 255, 255, 0.05); } /* Kanban 列背景 */ html[data-theme="tech"] .kanban-col { background: rgba(255, 255, 255, 0.03); } html[data-theme="tech"] .kanban-col-head .count { background: rgba(255, 255, 255, 0.08); } /* 标签：半透明玻璃 */ html[data-theme="tech"] .tag { backdrop-filter: blur(4px); } html[data-theme="tech"] .tag-green { background: rgba(52, 211, 153, 0.14); } html[data-theme="tech"] .tag-red { background: rgba(248, 113, 113, 0.14); } html[data-theme="tech"] .tag-orange { background: rgba(251, 191, 36, 0.14); } html[data-theme="tech"] .tag-blue { background: rgba(96, 165, 250, 0.14); } html[data-theme="tech"] .tag-purple { background: rgba(167, 139, 250, 0.14); } html[data-theme="tech"] .tag-gray { background: rgba(148, 163, 184, 0.14); } html[data-theme="tech"] .tag-a { background: rgba(248, 113, 113, 0.16); color: var(--color-a); } html[data-theme="tech"] .tag-b { background: rgba(96, 165, 250, 0.16); color: var(--color-b); } html[data-theme="tech"] .tag-c { background: rgba(167, 139, 250, 0.16); color: var(--color-c); } /* 抽屉 / 浮层 */ html[data-theme="tech"] .drawer, html[data-theme="tech"] .modal { background: #0F1A2E; background: linear-gradient(180deg, #101B30, #0B1220); } html[data-theme="tech"] .drawer-head, html[data-theme="tech"] .modal-head { border-bottom-color: var(--border); } html[data-theme="tech"] .detail-field { border-bottom-color: rgba(148, 163, 184, 0.14); } html[data-theme="tech"] .drawer-back { background: rgba(255, 255, 255, 0.08); color: var(--text-2); } html[data-theme="tech"] .drawer-back:hover { background: rgba(255, 255, 255, 0.16); } html[data-theme="tech"] .month-row.bad { background: rgba(248, 113, 113, 0.08); } /* 筛选 / 搜索 */ html[data-theme="tech"] #globalSearch, html[data-theme="tech"] .filter-select, html[data-theme="tech"] .refresh-btn { background: rgba(255, 255, 255, 0.06); border-color: var(--border-strong); color: var(--text-2); } html[data-theme="tech"] #globalSearch:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.2); } html[data-theme="tech"] .live-time { background: rgba(255, 255, 255, 0.07); color: var(--text-2); } html[data-theme="tech"] .tabs { background: rgba(255, 255, 255, 0.05); } html[data-theme="tech"] .tab.active { background: rgba(34, 211, 238, 0.15); color: #7DE9FF; box-shadow: none; } html[data-theme="tech"] .empty-state { color: var(--text-3); } html[data-theme="tech"] .page-footer { color: var(--text-3); }