/** * leapx-theme.css — LeapX 全局 Design System * Material Design 3 · 浅色主题 · 主色 #6750a4 * 所有模块页 引入此文件即可获得统一的 UI 基础 * 生成日期：2026-05-25 */ /* ═══════════════════════════════════════════════════ 0. Google Fonts — Inter ═══════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* ═══════════════════════════════════════════════════ 1. CSS 变量（Design Tokens） ═══════════════════════════════════════════════════ */ :root { /* ── 主色调 Primary ── */ --color-primary: #6750a4; --color-on-primary: #ffffff; --color-primary-container: #eaddff; --color-on-primary-container: #21005d; /* ── 表面色 Surface ── */ --color-surface: #fffbfe; --color-surface-variant: #f3edf7; --color-outline: #cac4d0; --color-outline-variant: #e8def8; /* ── 语义色 ── */ --color-error: #b3261e; --color-on-error: #ffffff; --color-error-container: #fce8e6; --color-on-error-container: #7d0f0a; --color-success: #386a20; --color-success-container: #d6f5e3; --color-on-success-container: #1a5c36; --color-warning: #92400e; --color-warning-container: #fef3c7; --color-on-warning-container: #78350f; /* ── 文字色 ── */ --color-on-surface: #1d192b; --color-on-surface-variant: #49454f; --color-outline-text: #5c5470; /* ── 圆角 ── */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* ── 间距 ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; /* ── 字体 ── */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif; /* ── 阴影 ── */ --shadow-sm: 0 1px 3px rgba(103,80,164,.12), 0 1px 2px rgba(103,80,164,.08); --shadow-md: 0 3px 8px rgba(103,80,164,.16), 0 1px 3px rgba(103,80,164,.1); --shadow-lg: 0 8px 24px rgba(103,80,164,.16), 0 3px 8px rgba(103,80,164,.08); --shadow-xl: 0 16px 48px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06); } /* ═══════════════════════════════════════════════════ 2. Global Reset ═══════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--font); font-size: 14px; line-height: 1.6; color: var(--color-on-surface); background: #ece8f5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ═══════════════════════════════════════════════════ 3. 字体层级 Typography Scale ═══════════════════════════════════════════════════ */ .t-display { font-size:32px; font-weight:400; line-height:1.15; letter-spacing:-.5px; color:var(--color-on-surface); } .t-headline { font-size:22px; font-weight:400; line-height:1.3; letter-spacing:-.2px; color:var(--color-on-surface); } .t-title-lg { font-size:18px; font-weight:600; line-height:1.4; letter-spacing:-.2px; color:var(--color-on-surface); } .t-title-md { font-size:15px; font-weight:600; line-height:1.4; color:var(--color-on-surface); } .t-body-lg { font-size:15px; font-weight:400; line-height:1.6; color:var(--color-on-surface-variant); } .t-body-md { font-size:13.5px; font-weight:400; line-height:1.6; color:var(--color-on-surface-variant); } .t-label-lg { font-size:13px; font-weight:600; letter-spacing:.05px; color:var(--color-primary); } .t-label-sm { font-size:11px; font-weight:500; letter-spacing:.5px; text-transform:uppercase; color:var(--color-outline-text); } /* ═══════════════════════════════════════════════════ 4. 按钮系统 Button System ═══════════════════════════════════════════════════ */ .lx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 20px; border-radius: var(--radius-full); font-family: var(--font); font-size: 13.5px; font-weight: 600; letter-spacing: .15px; border: none; cursor: pointer; text-decoration: none; white-space: nowrap; position: relative; overflow: hidden; transition: box-shadow .18s, transform .1s; -webkit-user-select: none; user-select: none; } .lx-btn::before { content: ''; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity .15s; border-radius: inherit; pointer-events: none; } .lx-btn:hover::before { opacity: .08; } .lx-btn:active { transform: scale(.97); } .lx-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .lx-btn:disabled, .lx-btn[disabled] { opacity: .4; pointer-events: none; box-shadow: none; } /* Filled */ .lx-btn-filled { background: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-sm); } .lx-btn-filled:hover { box-shadow: var(--shadow-md); } /* Tonal */ .lx-btn-tonal { background: var(--color-primary-container); color: var(--color-on-primary-container); } .lx-btn-tonal:hover { box-shadow: var(--shadow-sm); } /* Outlined */ .lx-btn-outlined { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-outline); } .lx-btn-outlined:hover { border-color: var(--color-primary); background: rgba(103,80,164,.04); } /* Text */ .lx-btn-text { background: transparent; color: var(--color-primary); padding: 0 12px; } /* Danger */ .lx-btn-danger { background: var(--color-error); color: var(--color-on-error); box-shadow: 0 1px 3px rgba(179,38,30,.25); } .lx-btn-danger:hover { box-shadow: 0 3px 8px rgba(179,38,30,.35); } /* Danger outlined */ .lx-btn-danger-outlined { background: transparent; color: var(--color-error); border: 1.5px solid #f2b8b5; } .lx-btn-danger-outlined:hover { border-color: var(--color-error); background: rgba(179,38,30,.04); } /* Ghost（兼容旧代码） */ .lx-btn-ghost { background: transparent; color: var(--color-on-surface-variant); border: 1px solid var(--color-outline); } .lx-btn-ghost:hover { background: var(--color-surface-variant); color: var(--color-on-surface); } /* 尺寸变体 */ .lx-btn-sm { height: 32px; padding: 0 14px; font-size: 12.5px; } .lx-btn-lg { height: 48px; padding: 0 28px; font-size: 15px; } .lx-btn-full { width: 100%; } .lx-btn-icon { width: 40px; padding: 0; } .lx-btn-icon.lx-btn-sm { width: 32px; } .lx-btn-icon.lx-btn-lg { width: 48px; } /* 加载态 */ .lx-btn-loading { opacity: .7; pointer-events: none; } .lx-spinner { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.35); border-top-color: currentColor; border-radius: 50%; animation: lx-spin .7s linear infinite; flex-shrink: 0; } .lx-btn-tonal .lx-spinner, .lx-btn-outlined .lx-spinner, .lx-btn-text .lx-spinner { border-color: rgba(103,80,164,.2); border-top-color: var(--color-primary); } @keyframes lx-spin { to { transform: rotate(360deg); } } /* ═══════════════════════════════════════════════════ 5. Badge / 状态标签 ═══════════════════════════════════════════════════ */ .lx-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-full); font-size: 11px; font-weight: 600; white-space: nowrap; line-height: 1.4; } .lx-badge-primary { background: var(--color-primary-container); color: var(--color-on-primary-container); } .lx-badge-success { background: var(--color-success-container); color: var(--color-on-success-container); } .lx-badge-warning { background: var(--color-warning-container); color: var(--color-on-warning-container); } .lx-badge-error { background: var(--color-error-container); color: var(--color-on-error-container); } .lx-badge-neutral { background: var(--color-surface-variant); color: var(--color-on-surface-variant); } .lx-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* 计数浮标 */ .lx-count-badge { position: absolute; top: -4px; right: -6px; background: var(--color-primary); color: #fff; font-size: 9px; font-weight: 700; min-width: 16px; height: 16px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 1.5px solid var(--color-surface); } .lx-count-badge-error { background: var(--color-error); } /* ═══════════════════════════════════════════════════ 6. Chip — 筛选器 ═══════════════════════════════════════════════════ */ .lx-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: var(--radius-sm); font-family: var(--font); font-size: 12.5px; font-weight: 500; cursor: pointer; border: 1px solid var(--color-outline); background: var(--color-surface-variant); color: var(--color-on-surface-variant); transition: background .12s, border-color .12s, box-shadow .12s; white-space: nowrap; -webkit-user-select: none; user-select: none; } .lx-chip:hover { border-color: var(--color-primary); background: var(--color-primary-container); } .lx-chip.active, .lx-chip[data-active] { background: var(--color-primary-container); border-color: transparent; color: var(--color-on-primary-container); font-weight: 600; } .lx-chip-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* ═══════════════════════════════════════════════════ 7. 输入框 ═══════════════════════════════════════════════════ */ /* MD3 Filled TextField（页内表单用） */ .lx-field { position: relative; margin-bottom: var(--space-2); } .lx-field-input { width: 100%; height: 52px; background: var(--color-surface-variant); border: none; border-bottom: 2px solid var(--color-outline); border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: 20px 14px 6px; font-family: var(--font); font-size: 14px; color: var(--color-on-surface); outline: none; transition: border-color .15s; } .lx-field-input:focus { border-bottom-color: var(--color-primary); } .lx-field-input::placeholder { color: var(--color-outline-text); font-size: 13px; } .lx-field-textarea { height: auto; min-height: 80px; padding-top: 22px; resize: vertical; } .lx-field-label { position: absolute; left: 14px; top: 8px; font-size: 11px; font-weight: 500; color: var(--color-primary); pointer-events: none; } .lx-field.error .lx-field-input { border-bottom-color: var(--color-error); } .lx-field.error .lx-field-label { color: var(--color-error); } .lx-field-helper { font-size: 11px; color: var(--color-on-surface-variant); margin-top: 4px; padding-left: 14px; } .lx-field-error-msg { font-size: 11px; color: var(--color-error); margin-top: 4px; padding-left: 14px; } /* Outlined Input（登录页白卡用） */ .lx-input-outlined { width: 100%; padding: 11px 13px; border: 1.5px solid var(--color-outline); border-radius: var(--radius-sm); font-family: var(--font); font-size: 14px; color: var(--color-on-surface); background: var(--color-surface); outline: none; transition: border-color .15s, box-shadow .15s; } .lx-input-outlined:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(103,80,164,.1); } .lx-input-outlined::placeholder { color: var(--color-outline-text); } /* Select */ .lx-select { width: 100%; height: 40px; padding: 0 12px; border: 1.5px solid var(--color-outline); border-radius: var(--radius-sm); font-family: var(--font); font-size: 13.5px; color: var(--color-on-surface); background: var(--color-surface); outline: none; cursor: pointer; transition: border-color .15s; -webkit-appearance: none; } .lx-select:focus { border-color: var(--color-primary); } /* ── 工具栏里的 input/select 不撑满容器 ── */ .lx-toolbar .lx-select, .lx-toolbar .lx-input { width: auto; min-width: 0; } /* ═══════════════════════════════════════════════════ 8. 空状态 Empty State ═══════════════════════════════════════════════════ */ .lx-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-12) var(--space-6); text-align: center; gap: var(--space-3); } .lx-empty-icon { width: 48px; height: 48px; color: var(--color-outline); margin-bottom: var(--space-2); } .lx-empty-icon svg { width: 100%; height: 100%; } .lx-empty-title { font-size: 15px; font-weight: 600; color: var(--color-on-surface-variant); } .lx-empty-desc { font-size: 13px; color: var(--color-outline-text); line-height: 1.5; max-width: 320px; } /* ═══════════════════════════════════════════════════ 9. 卡片 Card ═══════════════════════════════════════════════════ */ .lx-card { background: var(--color-surface-variant); border-radius: var(--radius-lg); padding: var(--space-4); border: 1px solid var(--color-outline-variant); transition: box-shadow .15s, transform .15s; } .lx-card-clickable { cursor: pointer; } .lx-card-clickable:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } /* KPI 卡片 */ .lx-kpi-card { background: var(--color-surface-variant); border-radius: var(--radius-lg); padding: var(--space-4); border: 1px solid var(--color-outline-variant); } .lx-kpi-label { font-size: 11px; font-weight: 600; color: var(--color-primary); letter-spacing: .4px; text-transform: uppercase; } .lx-kpi-value { font-size: 26px; font-weight: 700; color: var(--color-on-surface); letter-spacing: -.5px; margin: 5px 0 3px; font-variant-numeric: tabular-nums; } .lx-kpi-trend { font-size: 12px; font-weight: 500; color: var(--color-success); } .lx-kpi-trend-down { color: var(--color-error); } /* ═══════════════════════════════════════════════════ 10. 表格 Table ═══════════════════════════════════════════════════ */ .lx-table { background: var(--color-surface-variant); border-radius: var(--radius-lg); border: 1px solid var(--color-outline-variant); overflow: hidden; } .lx-table-header { display: flex; align-items: center; padding: 10px 16px; font-size: 11px; font-weight: 600; color: var(--color-primary); letter-spacing: .4px; text-transform: uppercase; background: rgba(103,80,164,.04); border-bottom: 1px solid var(--color-outline-variant); } .lx-table-row { display: flex; align-items: center; padding: 10px 16px; font-size: 13px; color: var(--color-on-surface); border-bottom: 1px solid rgba(103,80,164,.07); gap: 10px; transition: background .1s; cursor: pointer; } .lx-table-row:last-child { border-bottom: none; } .lx-table-row:hover { background: rgba(103,80,164,.04); } /* ═══════════════════════════════════════════════════ 11. 侧边栏 Sidebar ═══════════════════════════════════════════════════ */ .lx-sidebar { background: var(--color-surface); border-right: 1px solid var(--color-outline-variant); display: flex; flex-direction: column; } .lx-sb-brand { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--color-outline-variant); } .lx-sb-brand img { height: 34px; width: auto; padding: 3px 5px; background: var(--color-surface); border-radius: var(--radius-sm); object-fit: contain; } .lx-sb-brand-name { font-size: 14px; font-weight: 700; color: var(--color-on-surface); line-height: 1.2; letter-spacing: -.2px; } .lx-sb-brand-sub { font-size: 11px; color: var(--color-outline-text); } .lx-sb-section-label { font-size: 11px; font-weight: 600; color: var(--color-outline-text); letter-spacing: .6px; text-transform: uppercase; padding: 10px 12px 4px; } .lx-sb-item { display: flex; align-items: center; gap: 10px; padding: 0 12px; height: 40px; border-radius: var(--radius-full); margin: 1px 8px; font-size: 13px; font-weight: 500; color: var(--color-on-surface-variant); cursor: pointer; text-decoration: none; transition: background .12s, color .12s; } .lx-sb-item svg { flex-shrink: 0; opacity: .5; transition: opacity .12s; } .lx-sb-item:hover { background: rgba(103,80,164,.06); color: var(--color-on-surface); } .lx-sb-item:hover svg { opacity: .8; } .lx-sb-item.active { background: var(--color-primary-container); color: var(--color-on-primary-container); font-weight: 600; } .lx-sb-item.active svg { opacity: 1; color: var(--color-primary); } .lx-sb-item-count { margin-left: auto; font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: var(--radius-full); background: var(--color-primary-container); color: var(--color-primary); line-height: 1.6; } .lx-sb-item.active .lx-sb-item-count { background: rgba(103,80,164,.2); } .lx-sb-footer { padding: 12px 20px; border-top: 1px solid var(--color-outline-variant); font-size: 11px; color: var(--color-outline-text); text-align: center; } /* ═══════════════════════════════════════════════════ 12. TopBar ═══════════════════════════════════════════════════ */ .lx-topbar { background: var(--color-surface); border-bottom: 1px solid var(--color-outline-variant); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 56px; } .lx-topbar-left { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-outline-text); } .lx-topbar-current { font-size: 15px; font-weight: 600; color: var(--color-on-surface); } .lx-topbar-right { display: flex; align-items: center; gap: 14px; } .lx-ai-status { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: var(--radius-full); cursor: pointer; background: var(--color-surface-variant); color: var(--color-outline-text); border: 1px solid var(--color-outline-variant); transition: opacity .15s; } .lx-ai-status:hover { opacity: .85; } .lx-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .lx-ai-status.ok { background: var(--color-success-container); color: var(--color-on-success-container); border-color: transparent; } .lx-ai-status.warn { background: var(--color-warning-container); color: var(--color-on-warning-container); border-color: transparent; } .lx-ai-status.fail { background: var(--color-error-container); color: var(--color-on-error-container); border-color: transparent; } .lx-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary), #b69df8); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; } /* ═══════════════════════════════════════════════════ 13. 弹窗 Modal ═══════════════════════════════════════════════════ */ .lx-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: var(--space-4); backdrop-filter: blur(4px); animation: lx-fade-in .15s ease; } .lx-modal { background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; animation: lx-slide-up .2s ease; } .lx-modal-header { padding: var(--space-5) var(--space-6) var(--space-4); border-bottom: 1px solid var(--color-outline-variant); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .lx-modal-title { font-size: 17px; font-weight: 600; color: var(--color-on-surface); letter-spacing: -.2px; } .lx-modal-body { padding: var(--space-5) var(--space-6); } .lx-modal-footer { padding: var(--space-4) var(--space-6) var(--space-5); border-top: 1px solid var(--color-outline-variant); display: flex; justify-content: flex-end; gap: var(--space-2); } .lx-modal-close { width: 32px; height: 32px; border-radius: var(--radius-full); border: none; background: transparent; color: var(--color-outline-text); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s; flex-shrink: 0; } .lx-modal-close:hover { background: var(--color-surface-variant); color: var(--color-on-surface); } /* ═══════════════════════════════════════════════════ 14. 页面级布局 ═══════════════════════════════════════════════════ */ .lx-page { padding: var(--space-6); } .lx-page-title { font-size: 22px; font-weight: 600; color: var(--color-on-surface); letter-spacing: -.3px; margin-bottom: 4px; } .lx-page-sub { font-size: 13px; color: var(--color-outline-text); margin-bottom: var(--space-5); } .lx-action-row { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); flex-wrap: wrap; } .lx-action-row .spacer { flex: 1; } .lx-divider { height: 1px; background: var(--color-outline-variant); margin: var(--space-4) 0; border: none; } .lx-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); } .lx-section-title { font-size: 13px; font-weight: 600; color: var(--color-outline-text); letter-spacing: .8px; text-transform: uppercase; } .lx-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-3); } .lx-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-3); } .lx-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-3); } /* ═══════════════════════════════════════════════════ 15. 动画 ═══════════════════════════════════════════════════ */ @keyframes lx-fade-in { from{opacity:0} to{opacity:1} } @keyframes lx-slide-up { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} } @keyframes lx-toast-in { from{opacity:0;transform:translateY(8px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} } /* ═══════════════════════════════════════════════════ 16. 响应式 ═══════════════════════════════════════════════════ */ @media (max-width: 768px) { .lx-grid-4 { grid-template-columns: repeat(2,1fr); } .lx-grid-3 { grid-template-columns: repeat(2,1fr); } .lx-page { padding: var(--space-4); } } @media (max-width: 480px) { .lx-grid-4, .lx-grid-3, .lx-grid-2 { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════ 17. 旧代码兼容 source info banner ═══════════════════════════════════════════════════ */ .lx-source.info { font-size: 12px; color: var(--color-outline-text); margin: 0 0 16px; letter-spacing: .2px; line-height: 1.5; }