/* ============================================================ 千牛揽收助手 - 统一组件库 (UI Kit) 基于 shared/design-tokens.css 的单一真源，全 token 驱动、零硬编码。 命名空间 qn- 以避免与现有 .btn / .el-* / .card 等类名冲突。 同名别名层（.btn / .btn-primary / .btn-secondary / .btn-danger / .status-badge 等） 已并入下方 qn-* 规则，使三界面现有组件【逐步收敛】到统一实现（单一真源、零重复定义）。 深浅主题通过 --color-gray-* 的 [data-theme="dark"] 覆盖自动适配。 依赖：必须在 中先引入 shared/design-tokens.css ============================================================ */ /* ---------- 1. 按钮 Button ---------- */ .qn-btn, .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 10px 18px; font-family: var(--font-sans); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); line-height: 1.2; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; user-select: none; white-space: nowrap; transition: background var(--transition-normal), border-color var(--transition-normal), color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-fast); } .qn-btn:focus-visible, .btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; box-shadow: 0 0 0 3px var(--color-primary-glow-lg); } .qn-btn:active { transform: translateY(1px); } /* 主按钮：渐变 + 品牌光晕 + 轻浮起 */ .qn-btn--primary, .btn-primary { background: var(--color-primary-gradient); color: #ffffff; box-shadow: var(--shadow-glow); } .qn-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 0 24px var(--color-primary-glow-lg); } .qn-btn--primary:active { transform: translateY(0); } /* 次按钮：描边 + hover 品牌描边 */ .qn-btn--secondary, .btn-secondary { background: var(--color-gray-50); color: var(--color-gray-800); border-color: var(--color-gray-200); } .qn-btn--secondary:hover { border-color: var(--color-primary); color: var(--color-primary); } /* 幽灵按钮：透明 + hover 浅光晕 */ .qn-btn--ghost, .btn-ghost { background: transparent; color: var(--color-primary); } .qn-btn--ghost:hover { background: var(--color-primary-glow-sm); } /* 危险按钮 */ .qn-btn--danger, .btn-danger { background: var(--color-danger); color: #ffffff; } .qn-btn--danger:hover { background: var(--color-danger-dark); } /* 警告按钮（深字保证对比度 AA） */ .qn-btn--warning { background: var(--color-warning); color: var(--color-gray-900); } .qn-btn--warning:hover { background: var(--color-warning-dark); } /* 尺寸 */ .qn-btn--sm, .btn-sm { padding: 6px 12px; font-size: var(--font-size-xs); border-radius: var(--radius-sm); } .qn-btn--lg, .btn-lg { padding: 13px 26px; font-size: var(--font-size-lg); border-radius: var(--radius-lg); } .qn-btn--block, .btn-block { width: 100%; } .qn-btn:disabled, .qn-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } /* ---------- 2. 表单输入 Form ---------- */ .qn-field { display: flex; flex-direction: column; gap: var(--space-1); } .qn-field__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-gray-700); } .qn-input { width: 100%; padding: 10px 12px; font-family: var(--font-sans); font-size: var(--font-size-base); color: var(--color-gray-900); background: var(--color-gray-50); border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .qn-input::placeholder { color: var(--color-gray-400); } .qn-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-glow); } .qn-input:disabled { background: var(--color-gray-100); color: var(--color-gray-400); cursor: not-allowed; } .qn-field__hint { font-size: var(--font-size-xs); color: var(--color-gray-500); } .qn-field__error { font-size: var(--font-size-xs); color: var(--color-danger); } .qn-field--error .qn-input { border-color: var(--color-danger); } .qn-field--error .qn-input:focus { box-shadow: 0 0 0 3px var(--color-danger-bg); } /* ---------- 3. 卡片 Card ---------- */ .qn-card { background: var(--color-gray-50); border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal); } .qn-card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-primary-glow-md); } /* 顶部渐变强调线 */ .qn-card--accent { position: relative; overflow: hidden; } .qn-card--accent::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--color-primary-gradient); } .qn-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-gray-200); } .qn-card__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-gray-900); } .qn-card__body { color: var(--color-gray-600); } /* 官网 .feature-card 对齐 qn-card 规范（仅增强外观令牌，不覆盖其主题背景/布局/装饰） */ .feature-card { border-radius: var(--radius-xl); } .feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-primary-glow-md); } .qn-card__footer { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-gray-200); } /* 深色/表面卡片：用于统计卡等「使用主题表面 token」的卡片。 注：背景取 --bg-card（暗色主题为深底、亮色主题为白底），名为 dark 变体但随主题自适； 仅定义 token 驱动的基线（背景/边框/圆角/阴影/悬浮），组件专属装饰（顶部流光、data-flow、图标发光）保留在原 CSS。 */ .qn-card--dark { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal); } .qn-card--dark:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-color-hover); } /* app 统计卡 .stat-card 别名收敛到 qn-card--dark （仅接管基线 token，不动其顶部流光 / data-flow / 图标发光装饰；视觉零回归） */ .stat-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal); } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-color-hover); } /* ---------- 4. 弹层/对话框 Modal ---------- */ .qn-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: rgba(15, 23, 42, 0.5); z-index: var(--z-modal); } .qn-modal__panel { width: 100%; max-width: 480px; background: var(--color-gray-50); border: 1px solid var(--color-gray-200); border-radius: var(--radius-xl); box-shadow: var(--shadow-2xl); padding: var(--space-6); } .qn-modal__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); } .qn-modal__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-gray-900); } .qn-modal__close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: transparent; border-radius: var(--radius-full); color: var(--color-gray-500); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } .qn-modal__close:hover { background: var(--color-gray-200); color: var(--color-gray-900); } .qn-modal__body { color: var(--color-gray-600); margin-bottom: var(--space-5); } .qn-modal__footer { display: flex; justify-content: flex-end; gap: var(--space-3); } /* ---------- 5. 导航/菜单 Nav ---------- */ .qn-nav { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2); background: var(--color-gray-50); border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); } .qn-nav__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-gray-700); text-decoration: none; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } .qn-nav__item:hover { background: var(--color-gray-100); color: var(--color-gray-900); } .qn-nav__item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; } .qn-nav__item--active { background: var(--color-primary-glow-sm); color: var(--color-primary); font-weight: var(--font-weight-semibold); box-shadow: inset 3px 0 0 var(--color-primary); } .qn-nav__icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 16px; flex-shrink: 0; } /* ---------- 6. 状态/徽标 Badge & Dot ---------- */ .qn-badge, .status-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px 10px; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); border-radius: var(--radius-pill); line-height: 1.6; } .qn-badge--primary { background: var(--color-primary-glow-sm); color: var(--color-primary-dark); } .qn-badge--success { background: var(--color-success-bg); color: var(--color-success-dark); } .qn-badge--warning { background: var(--color-warning-bg); color: var(--color-warning-dark); } .qn-badge--danger { background: var(--color-danger-bg); color: var(--color-danger-dark); } .qn-badge--info { background: var(--color-info-bg); color: var(--color-info-dark); } /* 带圆点状态 */ .qn-badge--dot::before { content: ''; width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; } .qn-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-full); flex-shrink: 0; } .qn-dot--primary { background: var(--color-primary); } .qn-dot--success { background: var(--color-success); } .qn-dot--warning { background: var(--color-warning); } .qn-dot--danger { background: var(--color-danger); } .qn-dot--info { background: var(--color-info); } .qn-dot--pulse { animation: qn-pulse 1.6s ease-in-out infinite; } @keyframes qn-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--color-primary-glow-lg); } 50% { box-shadow: 0 0 0 5px transparent; } }