mirror of
https://github.com/zyycn/codex-proxy-rs.git
synced 2026-11-06 16:06:08 +00:00
ZyyandCodex
a6cfd124b0
Derive a dedicated popover header component token so light themes keep clear separation from striped table rows while dark themes retain the softer tertiary fill. Apply the token consistently to structured popover headers and the health timeline arrow, and expose it through the theme editor. Validated across all preset light and dark palettes, token overrides, frontend lint, typecheck and production build. Co-authored-by: Codex <noreply@openai.com>
205 lines
10 KiB
CSS
205 lines
10 KiB
CSS
@import 'tailwindcss';
|
|
@import './tokens.css';
|
|
@import './base.css';
|
|
|
|
@theme inline {
|
|
/* 基础 */
|
|
--font-sans:
|
|
'Inter Variable', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
--font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
|
|
--font-weight-emphasis: 650;
|
|
--font-weight-heavy: 760;
|
|
--animate-cp-skeleton: cp-skeleton-breathe 2.8s cubic-bezier(0.37, 0, 0.63, 1) infinite;
|
|
|
|
/* 排版 */
|
|
--text-cp-xs: var(--cp-font-size-xs);
|
|
--text-cp-sm: var(--cp-font-size-sm);
|
|
--text-cp: var(--cp-font-size);
|
|
--text-cp-lg: var(--cp-font-size-lg);
|
|
--text-cp-xl: var(--cp-font-size-xl);
|
|
|
|
/* 颜色 · 基元 */
|
|
--color-cp-white: var(--cp-color-white);
|
|
--color-cp-transparent: var(--cp-color-transparent);
|
|
|
|
/* 颜色 · 表面 */
|
|
--color-cp-bg-layout: var(--cp-color-bg-layout);
|
|
--color-cp-bg-container: var(--cp-color-bg-container);
|
|
--color-cp-bg-elevated: var(--cp-color-bg-elevated);
|
|
--color-cp-bg-spotlight: var(--cp-color-bg-spotlight);
|
|
--color-cp-bg-mask: var(--cp-color-bg-mask);
|
|
--color-cp-bg-text-hover: var(--cp-color-bg-text-hover);
|
|
--color-cp-bg-text-active: var(--cp-color-bg-text-active);
|
|
--color-cp-bg-container-disabled: var(--cp-color-bg-container-disabled);
|
|
--color-cp-fill-secondary: var(--cp-color-fill-secondary);
|
|
--color-cp-fill-tertiary: var(--cp-color-fill-tertiary);
|
|
--color-cp-fill-quaternary: var(--cp-color-fill-quaternary);
|
|
--color-cp-fill-alter: var(--cp-color-fill-alter);
|
|
--color-cp-border: var(--cp-color-border);
|
|
--color-cp-border-secondary: var(--cp-color-border-secondary);
|
|
--color-cp-split: var(--cp-color-split);
|
|
--color-cp-text: var(--cp-color-text);
|
|
--color-cp-text-heading: var(--cp-color-text-heading);
|
|
--color-cp-text-secondary: var(--cp-color-text-secondary);
|
|
--color-cp-text-tertiary: var(--cp-color-text-tertiary);
|
|
--color-cp-text-quaternary: var(--cp-color-text-quaternary);
|
|
--color-cp-text-disabled: var(--cp-color-text-disabled);
|
|
--color-cp-text-light-solid: var(--cp-color-text-light-solid);
|
|
|
|
/* 颜色 · 主色与链接 */
|
|
--color-cp-primary-container: var(--cp-color-primary-container);
|
|
--color-cp-primary-container-hover: var(--cp-color-primary-container-hover);
|
|
--color-cp-primary-border: var(--cp-color-primary-border);
|
|
--color-cp-primary-border-hover: var(--cp-color-primary-border-hover);
|
|
--color-cp-primary-hover: var(--cp-color-primary-hover);
|
|
--color-cp-primary: var(--cp-color-primary);
|
|
--color-cp-primary-active: var(--cp-color-primary-active);
|
|
--color-cp-primary-text-hover: var(--cp-color-primary-text-hover);
|
|
--color-cp-primary-text: var(--cp-color-primary-text);
|
|
--color-cp-primary-on-container: var(--cp-color-primary-on-container);
|
|
--color-cp-primary-text-active: var(--cp-color-primary-text-active);
|
|
--color-cp-link: var(--cp-color-link);
|
|
--color-cp-link-hover: var(--cp-color-link-hover);
|
|
--color-cp-link-active: var(--cp-color-link-active);
|
|
|
|
/* 颜色 · 语义 */
|
|
--color-cp-info-container: var(--cp-color-info-container);
|
|
--color-cp-info-container-hover: var(--cp-color-info-container-hover);
|
|
--color-cp-info-container-active: var(--cp-color-info-container-active);
|
|
--color-cp-info-border: var(--cp-color-info-border);
|
|
--color-cp-info-border-hover: var(--cp-color-info-border-hover);
|
|
--color-cp-info-hover: var(--cp-color-info-hover);
|
|
--color-cp-info: var(--cp-color-info);
|
|
--color-cp-info-active: var(--cp-color-info-active);
|
|
--color-cp-info-text-hover: var(--cp-color-info-text-hover);
|
|
--color-cp-info-text: var(--cp-color-info-text);
|
|
--color-cp-info-on-container: var(--cp-color-info-on-container);
|
|
--color-cp-info-text-active: var(--cp-color-info-text-active);
|
|
--color-cp-success-container: var(--cp-color-success-container);
|
|
--color-cp-success-container-hover: var(--cp-color-success-container-hover);
|
|
--color-cp-success-container-active: var(--cp-color-success-container-active);
|
|
--color-cp-success-border: var(--cp-color-success-border);
|
|
--color-cp-success-border-hover: var(--cp-color-success-border-hover);
|
|
--color-cp-success-hover: var(--cp-color-success-hover);
|
|
--color-cp-success: var(--cp-color-success);
|
|
--color-cp-success-active: var(--cp-color-success-active);
|
|
--color-cp-success-text-hover: var(--cp-color-success-text-hover);
|
|
--color-cp-success-text: var(--cp-color-success-text);
|
|
--color-cp-success-on-container: var(--cp-color-success-on-container);
|
|
--color-cp-success-text-active: var(--cp-color-success-text-active);
|
|
--color-cp-warning-container: var(--cp-color-warning-container);
|
|
--color-cp-warning-container-hover: var(--cp-color-warning-container-hover);
|
|
--color-cp-warning-container-active: var(--cp-color-warning-container-active);
|
|
--color-cp-warning-border: var(--cp-color-warning-border);
|
|
--color-cp-warning-border-hover: var(--cp-color-warning-border-hover);
|
|
--color-cp-warning-hover: var(--cp-color-warning-hover);
|
|
--color-cp-warning: var(--cp-color-warning);
|
|
--color-cp-warning-active: var(--cp-color-warning-active);
|
|
--color-cp-warning-text-hover: var(--cp-color-warning-text-hover);
|
|
--color-cp-warning-text: var(--cp-color-warning-text);
|
|
--color-cp-warning-on-container: var(--cp-color-warning-on-container);
|
|
--color-cp-warning-text-active: var(--cp-color-warning-text-active);
|
|
--color-cp-error-container: var(--cp-color-error-container);
|
|
--color-cp-error-container-hover: var(--cp-color-error-container-hover);
|
|
--color-cp-error-container-active: var(--cp-color-error-container-active);
|
|
--color-cp-error-border: var(--cp-color-error-border);
|
|
--color-cp-error-border-hover: var(--cp-color-error-border-hover);
|
|
--color-cp-error-hover: var(--cp-color-error-hover);
|
|
--color-cp-error: var(--cp-color-error);
|
|
--color-cp-error-active: var(--cp-color-error-active);
|
|
--color-cp-error-text-hover: var(--cp-color-error-text-hover);
|
|
--color-cp-error-text: var(--cp-color-error-text);
|
|
--color-cp-error-on-container: var(--cp-color-error-on-container);
|
|
--color-cp-error-text-active: var(--cp-color-error-text-active);
|
|
|
|
/* 颜色 · 预设（色系按字母排序，角色顺序固定） */
|
|
--color-cp-blue-container: var(--cp-color-blue-container);
|
|
--color-cp-blue-container-strong: var(--cp-color-blue-container-strong);
|
|
--color-cp-blue-border: var(--cp-color-blue-border);
|
|
--color-cp-blue-solid: var(--cp-color-blue-solid);
|
|
--color-cp-blue-text: var(--cp-color-blue-text);
|
|
--color-cp-blue-on-container: var(--cp-color-blue-on-container);
|
|
--color-cp-cyan-container: var(--cp-color-cyan-container);
|
|
--color-cp-cyan-container-strong: var(--cp-color-cyan-container-strong);
|
|
--color-cp-cyan-border: var(--cp-color-cyan-border);
|
|
--color-cp-cyan-solid: var(--cp-color-cyan-solid);
|
|
--color-cp-cyan-text: var(--cp-color-cyan-text);
|
|
--color-cp-cyan-on-container: var(--cp-color-cyan-on-container);
|
|
--color-cp-green-container: var(--cp-color-green-container);
|
|
--color-cp-green-container-strong: var(--cp-color-green-container-strong);
|
|
--color-cp-green-border: var(--cp-color-green-border);
|
|
--color-cp-green-solid: var(--cp-color-green-solid);
|
|
--color-cp-green-text: var(--cp-color-green-text);
|
|
--color-cp-green-on-container: var(--cp-color-green-on-container);
|
|
--color-cp-orange-container: var(--cp-color-orange-container);
|
|
--color-cp-orange-container-strong: var(--cp-color-orange-container-strong);
|
|
--color-cp-orange-border: var(--cp-color-orange-border);
|
|
--color-cp-orange-solid: var(--cp-color-orange-solid);
|
|
--color-cp-orange-text: var(--cp-color-orange-text);
|
|
--color-cp-orange-on-container: var(--cp-color-orange-on-container);
|
|
--color-cp-purple-container: var(--cp-color-purple-container);
|
|
--color-cp-purple-container-strong: var(--cp-color-purple-container-strong);
|
|
--color-cp-purple-border: var(--cp-color-purple-border);
|
|
--color-cp-purple-solid: var(--cp-color-purple-solid);
|
|
--color-cp-purple-text: var(--cp-color-purple-text);
|
|
--color-cp-purple-on-container: var(--cp-color-purple-on-container);
|
|
--color-cp-red-container: var(--cp-color-red-container);
|
|
--color-cp-red-container-strong: var(--cp-color-red-container-strong);
|
|
--color-cp-red-border: var(--cp-color-red-border);
|
|
--color-cp-red-solid: var(--cp-color-red-solid);
|
|
--color-cp-red-text: var(--cp-color-red-text);
|
|
--color-cp-red-on-container: var(--cp-color-red-on-container);
|
|
|
|
/* 颜色 · 数据 */
|
|
--color-cp-activity-level-0: var(--cp-activity-level-0);
|
|
--color-cp-activity-level-1: var(--cp-activity-level-1);
|
|
--color-cp-activity-level-2: var(--cp-activity-level-2);
|
|
--color-cp-activity-level-3: var(--cp-activity-level-3);
|
|
--color-cp-activity-level-4: var(--cp-activity-level-4);
|
|
|
|
/* 颜色 · 组件 */
|
|
--color-cp-control-item-bg-active: var(--cp-control-item-bg-active);
|
|
--color-cp-control-item-bg-active-hover: var(--cp-control-item-bg-active-hover);
|
|
--color-cp-control-outline: var(--cp-control-outline);
|
|
--color-cp-menu-item-selected-bg: var(--cp-menu-item-selected-bg);
|
|
--color-cp-modal-bg: var(--cp-modal-bg);
|
|
--color-cp-popover-header-bg: var(--cp-popover-header-bg);
|
|
--color-cp-progress-remaining: var(--cp-progress-remaining-color);
|
|
|
|
/* 圆角 */
|
|
--radius-cp-sm: var(--cp-border-radius-sm);
|
|
--radius-cp: var(--cp-border-radius);
|
|
--radius-cp-lg: var(--cp-border-radius-lg);
|
|
--radius-cp-card: var(--cp-card-border-radius);
|
|
|
|
/* 阴影 */
|
|
--shadow-cp: var(--cp-box-shadow);
|
|
--shadow-cp-secondary: var(--cp-box-shadow-secondary);
|
|
--shadow-cp-tertiary: var(--cp-box-shadow-tertiary);
|
|
--shadow-cp-card: var(--cp-card-shadow);
|
|
--shadow-cp-input: var(--cp-input-shadow);
|
|
--shadow-cp-input-hover: var(--cp-input-hover-shadow);
|
|
--shadow-cp-input-active: var(--cp-input-active-shadow);
|
|
--shadow-cp-input-error-active: var(--cp-input-error-active-shadow);
|
|
--shadow-cp-layout-sider: var(--cp-layout-sider-shadow);
|
|
|
|
/* 间距与尺寸 */
|
|
--spacing-cp-control-sm: var(--cp-control-height-sm);
|
|
--spacing-cp-control: var(--cp-control-height);
|
|
--spacing-cp-control-lg: var(--cp-control-height-lg);
|
|
--spacing-cp-size-step: var(--cp-size-step);
|
|
--spacing-cp-table-row: var(--cp-table-row-height);
|
|
--spacing-cp-table-row-sm: var(--cp-table-row-height-sm);
|
|
}
|
|
|
|
@keyframes cp-skeleton-breathe {
|
|
0%,
|
|
100% {
|
|
background-color: var(--cp-color-fill-tertiary);
|
|
}
|
|
|
|
50% {
|
|
background-color: var(--cp-color-fill-secondary);
|
|
}
|
|
}
|