/* ========================================================================== theme.css · 主题覆盖层 配色与质感参考：http://8.149.238.230/（群聚云） -------------------------------------------------------------------------- ⚠️ 本文件有两类内容，规矩不同： ① **覆盖**已有样式（配色 / 圆角 / 阴影 / 描边 / 字重）—— 这一类别碰**布局尺寸**（width / height / padding / margin / display / flex / grid / position / font-size），版式是用户反复调过的，动它必翻车。 ② **本站自有组件**（如第 10 节的 `.collection-card` 合集卡片）—— 主题里本来没有这些东西，尺寸与排版就写在这里 （原因见第 10 节：借用 `common.css` 的类会在内页那套 head 下失效）。 ⚠️ 必须排在所有其它样式表**之后**（见 build.py 三处 head 的最后一链）， 否则盖不住 tailwind.min.css / postnews.tailwind.min.css 里那些 硬编码颜色的工具类（`.text-gray-400{color:#9ca3af}` 之类）。 ⚠️ 站点有**两套** Tailwind：首页/列表页 `kn_*` → `tailwind.min.css`， 文章页 `pn_*` → `postnews.tailwind.min.css`。本文件对两者都生效。 ⚠️ 颜色一律走下面的 CSS 变量 —— 以后再调配色**只改这一段**，别到处写死色值。 ⚠️ 用 `!important` 是因为要压过 Tailwind 的工具类；工具类都是单一属性， 加 `!important` 不会打架。但**别在这里加 `!important` 之外的 hack**。 ========================================================================== */ :root { /* —— 品牌色（对应参考站 --primary / --lime）—— */ --primary: #3D5CF5; /* 宝蓝：主品牌 / 链接 / 主按钮 */ --primary-2: #2E9BFF; /* 亮蓝：渐变末端 / 次强调 */ --primary-deep: #4353F5; /* 渐变起始 */ --primary-soft: #E7EDFE; /* 宝蓝极浅底：选中底 / 标签底 */ --lime: #D7F23C; /* 荧光柠檬绿：强调 / CTA / 选中 */ --lime-2: #C6E432; /* 黄绿 hover */ --lime-ink: #17171B; /* 黄绿底上的字（近黑） */ --ok: #2AAE67; /* —— 中性色 —— */ --tx: #17171B; /* 正文 / 标题（近黑） */ --tx2: #5A6072; /* 次要文字 */ --tx3: #98A0B3; /* 三级文字 / 占位 */ --line: #E3E7F2; /* 描边 */ --line-2: #D5D9E6; /* 稍重描边 */ --bg-page: #F4F6FC; /* 页面底 */ --surface: #FFFFFF; /* 卡片底 */ --surface-2: #EEF1FB; /* 浅底块 */ --surface-3: #E6EAF4; /* 再深一档 */ /* —— 形状 —— */ --radius: 8px; --card-shadow: 0 1px 6px rgba(23, 23, 27, .08); --card-shadow-hover: 0 8px 22px rgba(23, 23, 27, .12); --grad-blue: linear-gradient(135deg, #4353F5 0%, #2E9BFF 100%); } /* ========================================================================== 1. 全局：字体 / 底色 / 正文色 ========================================================================== */ body { font-family: 'Microsoft YaHei', arial, tahoma, sans-serif; color: var(--tx); } .bg-page { background-color: var(--bg-page) !important; } a { color: var(--primary); } /* ========================================================================== 2. 文字灰阶（Tailwind 工具类 → 参考站灰阶） ========================================================================== */ .text-gray-900, .text-gray-800 { color: var(--tx) !important; } .text-gray-700 { color: #3C4353 !important; } .text-gray-600, .text-gray-500 { color: var(--tx2) !important; } .text-gray-400, .text-gray-300 { color: var(--tx3) !important; } .text-slate-500, .text-slate-600 { color: var(--tx2) !important; } /* ========================================================================== 3. 蓝色系 → 宝蓝（含 hover 变体） ========================================================================== */ .text-blue-700, .text-blue-600, .text-blue-500 { color: var(--primary) !important; } .text-blue-400 { color: var(--primary-2) !important; } .bg-blue-600 { background-color: var(--primary) !important; } .bg-blue-500 { background-color: var(--primary-2) !important; } .bg-blue-100, .bg-blue-50 { background-color: var(--primary-soft) !important; } .border-blue-600, .border-blue-500 { border-color: var(--primary) !important; } .border-blue-100 { border-color: var(--primary-soft) !important; } .hover\:bg-blue-50:hover, .hover\:bg-blue-100:hover { background-color: var(--primary-soft) !important; } .hover\:text-blue-600:hover, .hover\:text-blue-700:hover { color: var(--primary) !important; } /* ========================================================================== 4. 中性底 / 描边 ========================================================================== */ .bg-gray-50, .bg-gray-100, .bg-slate-100 { background-color: var(--surface-2) !important; } .bg-gray-200 { background-color: var(--surface-3) !important; } .border-gray-100, .border-gray-200 { border-color: var(--line) !important; } .hover\:bg-gray-50:hover { background-color: var(--surface-2) !important; } .hover\:bg-gray-100:hover, .hover\:bg-gray-200:hover { background-color: var(--surface-3) !important; } /* ========================================================================== 5. 卡片：圆角 + 柔和阴影（参考站 --radius / --card-shadow） ========================================================================== */ .rounded-main { border-radius: var(--radius) !important; } .shadow-sm { box-shadow: var(--card-shadow) !important; } .hover\:shadow-md:hover { box-shadow: var(--card-shadow-hover) !important; } /* ========================================================================== 6. 导航选中态：荧光黄绿底 + 近黑字（参考站 `.side a.on`） ========================================================================== */ .nav-item-active { background-color: var(--lime) !important; color: var(--lime-ink) !important; font-weight: 600 !important; } /* 顶部导航：原来每个分类一个 hover 色（:nth-child 8 种）， 参考站是**单一强调色** → 统一成宝蓝浅底。!important 压过 :nth-child 的优先级。 */ #topnav-ul > li > a:hover, #topnav-ul > li:nth-child(n) > a:hover { color: var(--primary) !important; background: var(--primary-soft) !important; } #topnav-m li a:hover { color: var(--primary) !important; background: var(--primary-soft) !important; } #topnav-ul > li > ul > li > a:hover { color: var(--primary) !important; background: var(--surface-2) !important; } /* 左栏 / 侧栏条目的 hover 与选中（参考站：深灰 hover + 黄绿选中） */ .left-nav a:hover, aside a.hover\:bg-blue-100:hover { background-color: var(--primary-soft) !important; } /* ========================================================================== 7. 页脚：深蓝 → 参考站的近黑 ========================================================================== */ .footer-deepblue { background-color: var(--ink) !important; } /* ========================================================================== 8. 友情链接 / 标签云：hover 抬升的阴影统一 ========================================================================== */ #divLink ul > li > a:hover, .flink-item:hover { box-shadow: var(--card-shadow-hover) !important; } /* ========================================================================== 9. 左栏「合集」块 —— 条目文字换行时的对齐 （布局修复写在 build.py 的模板里；这里只保证配色一致） ========================================================================== */ .left-nav ul li a { color: #3C4353; } .left-nav ul li a:hover { color: var(--primary); } /* ========================================================================== 10. 合集卡片（首页文章流 + 分类页「本分类的合集」共用） -------------------------------------------------------------------------- ⚠️⚠️ 这里**故意用自定义 class 而不是 Tailwind 工具类** —— 这是踩过的坑： 分类页走 `pn_*` 那套 head，只加载 `postnews.tailwind.min.css` + `postnews.common.css`；而 `.article-thumb`（缩略图 195×130）定义在 `common.css`，**只有首页那套 head 加载它**。卡片借用 `.article-thumb` 的结果是缩略图没有宽度 → **封面撑满整个主区**（2026-10-12 实测）。 `theme.css` 两套 head 都加载，所以卡片的尺寸与排版都写在这里最稳。 ⚠️ 首页和分类页共用同一份 → 改这里两边一起变；别在 build.py 里另写一份。 ========================================================================== */ .collection-card { display: flex; align-items: stretch; gap: 20px; background: var(--surface); border-radius: var(--radius); padding: 20px; box-shadow: var(--card-shadow); transition: box-shadow .2s ease, transform .2s ease; } .collection-card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-2px); } .collection-card .col-card-thumb { width: 195px; height: 130px; flex-shrink: 0; border-radius: 6px; overflow: hidden; } .collection-card .col-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .collection-card .col-card-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; } .collection-card .col-card-tag { display: inline-block; font-size: 12px; line-height: 1.5; background: var(--primary-soft); color: var(--primary); padding: 2px 8px; border-radius: 999px; } .collection-card h3 { font-size: 18px; font-weight: 700; color: var(--tx); margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .collection-card .col-card-desc { font-size: 14px; line-height: 1.55; color: var(--tx2); margin-top: 8px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .collection-card .col-card-meta { font-size: 12px; color: var(--tx3); display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; } /* ⚠️ 子项 `nowrap`：窄屏下「📚 12 篇笔记」不能被拆成两行（`check_home_css.py` 有断言守着） */ .collection-card .col-card-meta > span { white-space: nowrap; } @media (max-width: 640px) { .collection-card { gap: 12px; padding: 14px; } .collection-card .col-card-thumb { width: 120px; height: 80px; } .collection-card h3 { font-size: 16px; } .collection-card .col-card-desc { font-size: 13px; } } /* ========================================================================== 11. 跨页「水平居中」一致性（2026-10-12） ========================================================================== 用户报：「首页与 AI笔记 / 公开课笔记 / 常识笔记 / 读书笔记 的菜单居中位置 不一致，点首页是一个位置、点这四个菜单又各不相同」。 实测（1440 视口、**去掉 `--hide-scrollbars`**）查出**三个**独立原因， 前两个在 `build.py` 里改掉了（容器宽度 1400/1368 统一成 1400、首页顶部导航 从 `justify-between` 改绝对居中、断点统一到 `lg`），剩下这个在 CSS： ⚠️ `scrollbar-gutter: stable` —— 内容**长**的页面有滚动条、**短**的页面没有， 而滚动条要占 15px，`mx-auto` 的居中基准是**内容区**宽度 → 同一个容器在「有滚动条」和「没有滚动条」的页面上左边缘会差 7.5px。 实测 @900px：`常识笔记` / `读书笔记`（0 篇，无滚动条）容器宽 **900**， 其余页面 **885** —— 这就是「四个分类页各不相同」的来源。 `stable` = **始终预留**滚动条槽 → 所有页面内容区宽度恒定、居中位置恒定。 （移动端是 overlay 滚动条、本来就不占宽度，此规则对移动端无影响。） */ html { scrollbar-gutter: stable; } /* ⚠️ 顶部导航的「显隐 + 绝对居中」：**不能写 Tailwind 的响应式类** —— `hidden lg:flex` / `lg:hidden` 在**首页 bundle（`tailwind.min.css`）里不存在** （bundle 按用量生成，只扫到过 `md:flex`），而首页与内页要统一到 `lg`(1024)。 实测：把断点从 `md` 改成 `lg` 后，首页导航在**所有**宽度下都 `display:none`、 汉堡按钮在**所有**宽度下都显示 —— 页面直接"没有菜单"了。 → 这里用 **ID 规则**接管（`theme.css` 两套 head 都加载，不受 bundle 影响）： · 导航 `#topnav-ul` 只在 ≥1024px 出现，且**绝对居中**（与内页 `