/* ============================================================
|
* 设计令牌 · CSS 自定义属性
|
* 运行时换肤只需改动 --opo-primary 及其派生色阶（由 utils/theme.js 注入）
|
* 这里的值是"品牌青"默认值；JS 注入的 inline style 会覆盖 :root
|
* ============================================================ */
|
:root {
|
/* 品牌色（默认：OPO_Logo 圆环青） */
|
--opo-primary: #0E768F;
|
--opo-primary-hover: #0D6A81;
|
--opo-primary-active: #0B5E72;
|
--opo-primary-light-3: #569FB1;
|
--opo-primary-light-5: #87BBC7;
|
--opo-primary-light-7: #B7D6DD;
|
--opo-primary-light-8: #CFE4E9;
|
--opo-primary-light-9: #E7F1F4;
|
--opo-primary-light-95: #F3F8F9;
|
--opo-primary-dark-2: #0B5E72;
|
|
/* 语义色 */
|
--opo-success: #67C23A;
|
--opo-success-light: #F0F9EB;
|
--opo-warning: #E6A23C;
|
--opo-warning-light: #FDF6EC;
|
--opo-danger: #CD1D4E;
|
--opo-danger-light: #FBEBEF;
|
--opo-info: #909399;
|
--opo-info-light: #F4F4F5;
|
|
/* 中性色 */
|
--opo-text-primary: #1F2937;
|
--opo-text-regular: #4B5563;
|
--opo-text-secondary: #6B7280;
|
--opo-text-placeholder: #9CA3AF;
|
--opo-border-base: #E5E7EB;
|
--opo-border-light: #F0F2F5;
|
--opo-border-lighter: #F5F7FA;
|
--opo-bg-page: #F5F7FA;
|
--opo-bg-card: #FFFFFF;
|
--opo-bg-hover: #F5F9FD;
|
--opo-bg-stripe: #FAFBFC;
|
--opo-bg-thead: #F5F7FA;
|
|
/* 表格框线（比通用边框更深） */
|
--opo-table-border: #C8CFD8;
|
--opo-table-border-strong: #B7C0CC;
|
|
/* 侧边栏 */
|
--opo-sidebar-bg: #0A4655;
|
--opo-sidebar-sub-bg: #083B47;
|
--opo-sidebar-hover: rgba(14, 118, 143, 0.28);
|
--opo-sidebar-text: rgba(255, 255, 255, 0.72);
|
--opo-sidebar-text-active: #FFFFFF;
|
|
/* 字号（2026-10-22 整体上调一号：正文 14→16） */
|
--opo-font-size-display: 34px;
|
--opo-font-size-h1: 26px;
|
--opo-font-size-h2: 20px;
|
--opo-font-size-lg: 18px;
|
--opo-font-size-base: 16px;
|
--opo-font-size-sm: 14px;
|
--opo-font-size-xs: 13px;
|
--opo-font-size-menu: 16px;
|
|
/* 字体（不要用 -apple-system 打头，Windows 上会变成 Segoe UI，数字显小） */
|
--opo-font-family-base: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑",
|
"Helvetica Neue", Arial, sans-serif;
|
--opo-font-family-number: "DIN Alternate", "SF Mono", "Roboto Mono", Consolas, "Courier New", monospace;
|
|
/* 间距 */
|
--opo-space-1: 4px;
|
--opo-space-2: 8px;
|
--opo-space-3: 12px;
|
--opo-space-4: 16px;
|
--opo-space-5: 24px;
|
--opo-space-6: 32px;
|
|
/* 圆角 */
|
--opo-radius-sm: 2px;
|
--opo-radius-base: 4px;
|
--opo-radius-lg: 8px;
|
--opo-radius-pill: 999px;
|
|
/* 阴影 */
|
--opo-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
|
--opo-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
|
--opo-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);
|
|
/* 控件高度 */
|
--opo-control-height-small: 32px;
|
--opo-control-height-base: 36px;
|
}
|
