@charset "UTF-8"; /* ========================================================================== OneBase 后台主题层（theme.css） -------------------------------------------------------------------------- 设计原则 · 纯覆盖层：不改 Bootstrap / AdminLTE / amazeui 任何核心文件，全部靠后置覆盖 · 令牌驱动：所有颜色走 CSS 变量，切主题只换变量，规则完全复用 · 加载位置：必须在所有 CSS 之后（layout/bottom.html 末尾），否则会被压回去 · 优先级：靠「选择器权重提升」而非 !important，仅在必须时才用 !important 两套配色 [data-theme="light"] 清爽商务风 —— 白侧栏 + 浅灰底 + 蓝色主色 [data-theme="dark"] 深色侧栏风 —— 深靛蓝侧栏 + 浅色内容区 回滚：删除本文件的 即可完全恢复原样（本文件不改动任何既有文件） ========================================================================== */ /* ========================================================================== 1. 设计令牌 ========================================================================== */ /* 令牌挂载点：light 作为基准定义在 :root，dark 用 data-theme 覆盖。 为什么不用 :root 之外的写法：:root 永远命中且权重 (0,1,0)， 若把 light/dark 都写成 [data-theme=...]（同为 0,1,0 但顺序在后会赢）， 反而要小心先后顺序；这里让 dark 走 html/body[data-theme]（权重 0,1,1）， 天然压过 :root，不用依赖书写顺序。 data-theme 由 top.html 在 里写到 （避免首屏闪烁）， body 上还有一份服务端渲染的兜底。 */ :root { /* 品牌主色 */ --ob-primary: #2563eb; --ob-primary-hover: #1d4ed8; --ob-primary-soft: #eff6ff; --ob-primary-border: #bfdbfe; /* 文字 */ --ob-text: #1e293b; --ob-text-sub: #475569; --ob-text-mute: #94a3b8; /* 背景与描边 */ --ob-bg: #f1f5f9; --ob-surface: #ffffff; --ob-surface-2: #f8fafc; --ob-border: #e2e8f0; --ob-border-2: #cbd5e1; /* 侧边栏 */ --ob-side-bg: #ffffff; --ob-side-border: #e2e8f0; --ob-side-text: #475569; --ob-side-icon: #94a3b8; --ob-side-hover-bg: #f1f5f9; --ob-side-hover-text: #1e293b; --ob-side-active-bg: #eff6ff; --ob-side-active-text: #2563eb; --ob-side-accent: #2563eb; --ob-side-sub-bg: #f8fafc; --ob-side-head: #94a3b8; /* 顶栏 */ --ob-header-bg: #ffffff; --ob-header-text: #1e293b; --ob-header-border: #e2e8f0; /* 状态色 */ --ob-success: #16a34a; --ob-danger: #dc2626; --ob-warning: #d97706; --ob-info: #0891b2; /* 阴影与圆角 */ --ob-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --ob-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04); --ob-shadow-md: 0 4px 12px rgba(15, 23, 42, .08); --ob-radius: 8px; --ob-radius-sm: 6px; } /* 深色侧栏（方案 B）——权重 0,1,1，稳压 :root 的 light 基准，不依赖书写顺序 */ html[data-theme="dark"], body[data-theme="dark"] { --ob-primary: #6366f1; --ob-primary-hover: #4f46e5; --ob-primary-soft: #eef2ff; --ob-primary-border: #c7d2fe; --ob-text: #1e293b; --ob-text-sub: #475569; --ob-text-mute: #94a3b8; --ob-bg: #f1f5f9; --ob-surface: #ffffff; --ob-surface-2: #f8fafc; --ob-border: #e2e8f0; --ob-border-2: #cbd5e1; /* 深色侧栏 */ --ob-side-bg: #1e1b4b; --ob-side-border: #312e81; --ob-side-text: #c7d2fe; --ob-side-icon: #818cf8; --ob-side-hover-bg: #312e81; --ob-side-hover-text: #ffffff; /* 深色侧栏：用半透明白做淡底，避免整块实心紫把菜单切得很碎 */ --ob-side-active-bg: rgba(255, 255, 255, .10); --ob-side-active-text: #ffffff; --ob-side-accent: #818cf8; --ob-side-sub-bg: #1a1744; --ob-side-head: #818cf8; --ob-header-bg: #ffffff; --ob-header-text: #1e293b; --ob-header-border: #e2e8f0; --ob-success: #16a34a; --ob-danger: #dc2626; --ob-warning: #d97706; --ob-info: #0891b2; --ob-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --ob-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04); --ob-shadow-md: 0 4px 12px rgba(15, 23, 42, .08); --ob-radius: 8px; --ob-radius-sm: 6px; } /* ========================================================================== 2. 全局排版 / 自托管字体 / 滚动条 ========================================================================== */ /* -------------------------------------------------------------------------- 自托管字体：Noto Sans SC（思源黑体）子集 -------------------------------------------------------------------------- 为什么自托管而不是只用系统字体： 实测本机（macOS）没有安装「苹方 PingFang SC」，中文一路回退到 Hiragino Sans GB（冬青黑体，2007 年设计），观感明显偏旧；不同管理员 的操作系统不同，字体也会跟着变。自托管后所有人看到的是同一套字体。 子集化说明： 原字体每个字重约 1.14MB（已按 CJK 区段预切）。 用 pyftsubset 按「后台实际用到的字符集」再裁一次： 模板静态文案 + 数据库动态汉字 + ASCII + 常用中文标点 = 4022 字符 单字重降到约 540KB，两个字重共约 1.1MB。 如需重新生成，见 _deploy/08-字体子集化说明.md 字重映射： 只带 400 与 500 两个文件；600 由浏览器用 500 合成加粗。 这样省掉一个 700 字重（约 570KB），视觉上足够。 -------------------------------------------------------------------------- */ @font-face { font-family: "Noto Sans SC"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/noto-sans-sc/noto-sans-sc-400.woff2") format("woff2"); } @font-face { font-family: "Noto Sans SC"; font-style: normal; font-weight: 500 600; /* 600 复用 500，避免额外下载一个字重 */ font-display: swap; src: url("../fonts/noto-sans-sc/noto-sans-sc-500.woff2") format("woff2"); } body { /* 顺序要点： 1) 图标字体（Font Awesome / iconfont）必须排在前面， 否则私有区字符会被中文字体截走，图标变方块 2) 自托管中文字体紧随其后，保证跨平台一致 3) 系统字体兜底：覆盖字体里没有的装饰符号（箭头、圈号、几何图形）， 本机实测缺 59 个这类符号，交给系统符号字体渲染 */ font-family: "FontAwesome", "iconfont", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Apple Color Emoji", "Segoe UI Emoji", "Helvetica Neue", Arial, sans-serif; font-size: 14px; color: var(--ob-text); background-color: var(--ob-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* 中文排版：行高放宽让密集内容更透气。 刻意不加 letter-spacing —— 汉字本身全宽等距，额外字距反而显松散。 */ line-height: 1.6; } /* 细滚动条（Webkit） */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border: 3px solid transparent; border-radius: 8px; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; } a { color: var(--ob-primary); } a:hover, a:focus { color: var(--ob-primary-hover); } /* ========================================================================== 3. 左侧导航栏 ========================================================================== */ .main-sidebar, .left-side { background-color: var(--ob-side-bg) !important; border-right: 1px solid var(--ob-side-border); box-shadow: none !important; } /* 用户信息面板 */ .main-sidebar .user-panel { padding: 16px 12px; border-bottom: 1px solid var(--ob-side-border); margin-bottom: 0; } .main-sidebar .user-panel > .image > img { border: 2px solid rgba(255, 255, 255, .18); box-shadow: var(--ob-shadow-sm); } .main-sidebar .user-panel > .info > p { font-weight: 600; font-size: 13px; color: var(--ob-side-active-text); } .main-sidebar .user-panel > .info { color: var(--ob-side-icon); font-size: 12px; line-height: 1.5; } /* 菜单容器 */ .sidebar-menu { padding: 8px 0; } .sidebar-menu > li { margin: 2px 8px; } /* 一级菜单项 */ .sidebar-menu > li > a { border-left: 0 !important; border-radius: var(--ob-radius-sm); color: var(--ob-side-text); font-size: 14px; padding: 10px 12px; transition: background-color .15s ease, color .15s ease; } /* 干掉 Bootstrap 2 的默认焦点轮廓：a:focus{outline:5px auto -webkit-focus-ring-color} 不处理的话，点过的菜单会一直挂着一圈青色外框，看起来像"选中没取消" */ .sidebar-menu a, .sidebar-menu a:hover, .sidebar-menu a:focus, .sidebar-menu a:active, .main-header .navbar a:focus, .main-header .sidebar-btn:focus { outline: none !important; box-shadow: none !important; } .sidebar-menu > li > a > .fa, .sidebar-menu > li > a > .glyphicon, .sidebar-menu > li > a > .ion { color: var(--ob-side-icon); font-size: 15px; margin-right: 6px; width: 20px; text-align: center; transition: color .15s ease; } /* 悬停 */ .sidebar-menu > li:hover > a, .sidebar-menu > li:focus > a { background: var(--ob-side-hover-bg) !important; color: var(--ob-side-hover-text) !important; } .sidebar-menu > li:hover > a > .fa, .sidebar-menu > li:hover > a > .glyphicon, .sidebar-menu > li:hover > a > .ion { color: var(--ob-side-hover-text); } /* 激活项 注意：OneBase 只给叶子菜单加了 .active，父级什么都不加。 父级高亮由 js/theme.js 补 .menu-active 类。 （.menu-open 是 AdminLTE 自己加在