/* ============================================================ QFinal 品牌主题（Logo 取色，前台 + 后台共用） 主色 #4B4948（Logo 深暖灰，占比 36%） 点缀色 #E60012（Logo 红，占比 60%） 定位：主色承担全部「结构色」（按钮/链接/选中/导航/分页）， 红色只做「点睛」——新增·提交类 CTA、品牌标识、关键强调。 用法：页面在 bootstrap.min.css 之后引入本文件即可覆盖 Bootstrap 默认蓝。 App（uni-app）：同名令牌见 uni-app/theme.scss & docs/主题规范.md，改色只改这一处。 ============================================================ */ :root { /* ---------- 品牌令牌（唯一真源） ---------- */ --q-brand: #4B4948; /* 主色：深暖灰（Logo 辅色） */ --q-brand-600: #3A3837; /* 主色·按下/深 */ --q-brand-700: #2E2C2B; /* 主色·更深 */ --q-brand-soft: #F1F0EF; /* 主色·浅底（标签/选中态） */ --q-brand-soft-2: #E2E0DE; /* 主色·浅底加深 */ --q-accent: #E60012; /* 点缀色：Logo 红 */ --q-accent-600: #CC0010; /* 点缀色·按下 */ --q-accent-700: #B0000E; /* 点缀色·更深 */ --q-accent-soft: #FDECEE; /* 点缀色·浅底 */ --q-ink: #4B4948; /* 正文 / 深色面 */ --q-ink-2: #6B6866; /* 次 */ --q-ink-3: #9A9694; /* 弱 */ --q-line: #E6E4E2; /* 分隔线 */ --q-bg: #FFFFFF; /* 页面底色（白） */ --q-surface: #FAF9F8; /* 卡片 / 面板底（微暖） */ --q-ok: #1E9E62; --q-warn: #E8A33D; --q-danger: #D92B2B; /* ---------- Bootstrap 变量接管 ---------- */ --bs-primary: var(--q-brand); --bs-primary-rgb: 75, 73, 72; --bs-body-color: var(--q-ink); --bs-body-bg: var(--q-bg); --bs-link-color: var(--q-brand); --bs-link-hover-color: var(--q-brand-600); --bs-border-color: var(--q-line); --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; } body { color: var(--q-ink); } a { color: var(--q-brand); } a:hover { color: var(--q-brand-600); } /* ---------- 文本 / 背景工具类覆盖 ---------- */ .text-primary { color: var(--q-brand) !important; } .text-accent { color: var(--q-accent) !important; } .bg-primary { background-color: var(--q-brand) !important; } .bg-accent { background-color: var(--q-accent) !important; } .border-primary { border-color: var(--q-brand) !important; } .badge.bg-primary, .badge.text-bg-primary { background-color: var(--q-brand) !important; } /* ---------- 按钮 ---------- */ .btn-primary { --bs-btn-bg: var(--q-brand); --bs-btn-border-color: var(--q-brand); --bs-btn-hover-bg: var(--q-brand-600); --bs-btn-hover-border-color: var(--q-brand-600); --bs-btn-active-bg: var(--q-brand-700); --bs-btn-active-border-color: var(--q-brand-700); --bs-btn-disabled-bg: var(--q-brand); --bs-btn-disabled-border-color: var(--q-brand); --bs-btn-focus-shadow-rgb: 75, 73, 72; } .btn-outline-primary { --bs-btn-color: var(--q-brand); --bs-btn-border-color: var(--q-brand); --bs-btn-hover-bg: var(--q-brand); --bs-btn-hover-border-color: var(--q-brand); --bs-btn-active-bg: var(--q-brand-600); --bs-btn-active-border-color: var(--q-brand-600); --bs-btn-focus-shadow-rgb: 75, 73, 72; } .btn-link { --bs-btn-color: var(--q-brand); --bs-btn-hover-color: var(--q-brand-600); } /* 点缀按钮：只给「新增 / 提交」这类关键动作 */ .btn-accent { --bs-btn-color: #fff; --bs-btn-bg: var(--q-accent); --bs-btn-border-color: var(--q-accent); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--q-accent-600); --bs-btn-hover-border-color: var(--q-accent-600); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--q-accent-700); --bs-btn-active-border-color: var(--q-accent-700); --bs-btn-focus-shadow-rgb: 230, 0, 18; } .btn-outline-accent { --bs-btn-color: var(--q-accent); --bs-btn-border-color: var(--q-accent); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--q-accent); --bs-btn-hover-border-color: var(--q-accent); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--q-accent-600); --bs-btn-active-border-color: var(--q-accent-600); --bs-btn-focus-shadow-rgb: 230, 0, 18; } /* ---------- 表单聚焦态 ---------- */ .form-control:focus, .form-select:focus { border-color: var(--q-brand-soft-2); box-shadow: 0 0 0 .2rem rgba(75, 73, 72, .14); } .form-check-input:checked { background-color: var(--q-brand); border-color: var(--q-brand); } .form-check-input:focus { border-color: var(--q-brand-soft-2); box-shadow: 0 0 0 .2rem rgba(75,73,72,.14); } .form-switch .form-check-input:checked { background-color: var(--q-brand); } /* ---------- 导航 / 标签页 / 分页 ---------- */ .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--q-brand); } .nav-tabs .nav-link { color: var(--q-ink-2); } .nav-tabs .nav-link:hover { color: var(--q-brand); } .nav-tabs .nav-link.active { color: var(--q-brand); font-weight: 600; } .navbar .nav-link.active, .navbar .nav-link:hover { color: var(--q-brand); } .pagination { --bs-pagination-color: var(--q-ink-2); --bs-pagination-hover-color: var(--q-brand); --bs-pagination-active-bg: var(--q-brand); --bs-pagination-active-border-color: var(--q-brand); --bs-pagination-focus-color: var(--q-brand); --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(75,73,72,.14); } .progress { --bs-progress-bar-bg: var(--q-brand); } /* ---------- 表格 ---------- */ .table { --bs-table-color: var(--q-ink); } .table > thead th { color: var(--q-ink-2); font-weight: 600; } .table-hover > tbody > tr:hover > * { --bs-table-accent-bg: #F7F6F5; } /* ---------- 品牌组件 ---------- */ .q-logo { height: 32px; width: auto; display: block; } .q-logo-sm { height: 24px; width: auto; display: block; } .q-brand-name { font-weight: 700; letter-spacing: .02em; color: var(--q-ink); } .q-brand-name:hover { color: var(--q-brand); } /* 品牌渐变（Hero / 页头）：深灰为主，右下角带一丝红润 */ .q-gradient { background-image: linear-gradient(135deg, var(--q-brand) 0%, var(--q-brand-600) 55%, var(--q-accent) 150%); } /* 主色左边条 */ .q-accent-left { border-left: 3px solid var(--q-brand); padding-left: .65rem; } /* 点缀徽标（红底白字小标） */ .q-badge-brand { background: var(--q-accent); color: #fff; border-radius: 4px; padding: .1rem .4rem; font-size: .72rem; } /* 强调文字（红） */ .q-strong-brand { color: var(--q-accent); font-weight: 600; } /* 点缀短线（标题左侧红短线，点睛用） */ .q-tick::before { content: ""; display: inline-block; width: 3px; height: .95em; background: var(--q-accent); border-radius: 2px; margin-right: .5rem; vertical-align: -.08em; } /* ---------- 页脚 ---------- */ .site-footer { background: var(--q-brand-700) !important; color: #EDEBEA !important; } .site-footer a { color: #fff; }