/* ============================================================================
* StarGreen 站点自定义样式
* ----------------------------------------------------------------------------
* ★ 第十轮：本文件由 mu-plugin 的 wp_footer 钩子注入改为**主题源码文件**。
*
* 为什么改：
* 1. 原方案把约 900 行 CSS 内联进每一页 HTML（首页 HTML 因此膨胀到 91KB），
* 浏览器无法缓存 —— 每次访问都要重传。
* 2. 现在是一个可缓存的静态文件，改动直接可见、可 grep、可 diff，
* 不再有"看不见的钩子决定页面长相"的魔法。
*
* ⚠️ 主题升级注意：本文件与 stargreen.js 属于"附加在主题里的自定义文件"，
* 升级 argon-theme-master（重新解压覆盖）会丢失，需要重新拷回。
* 部署脚本：deploy/theme-src/ 见 README.md。
*
* 加载方式：footer.php 在 wp_footer() 之后用 引入
* 选择这个位置而不是 ，是为了保持与改造前完全一致的层叠顺序：
* 改造前这些样式在 wp_footer 里输出（DOM 最靠后），
* 而主题的 是写在 里的，
* 一旦把本文件提到 ，那些主题内联样式就会反过来压过我们 —— 会出错。
*
* 内部顺序（必须与改造前一致，浏览器只做单遍级联）：
* 1. 侧边栏年度进度条 （原 stargreen-yp-css， wp_footer 优先级 88）
* 2. 页脚运行时间徽章 （原 stargreen-badge-css， wp_footer 优先级 91）
* 3. 字体系统 （原 stargreen-font-css， wp_footer 优先级 98）
* 4. 站点自定义样式 （原 stargreen-custom-css， wp_footer 优先级 99）
* ========================================================================== */
/* ==========================================================================
* 1. 侧边栏年度进度条
* ========================================================================== */
.stargreen-yp { padding: 10px 4px 4px; }
.stargreen-yp-title {
font-size: 13px;
opacity: .85;
margin-bottom: 7px;
display: flex;
align-items: center;
gap: 5px;
}
.stargreen-yp-title .fa { opacity: .7; }
.stargreen-yp-track {
height: 8px;
border-radius: 99px;
background: rgba(127, 127, 127, .18);
overflow: hidden;
}
.stargreen-yp-bar {
height: 100%;
width: 0;
border-radius: 99px;
background: linear-gradient(90deg,
rgba(var(--themecolor-rgbstr), .60),
rgba(var(--themecolor-rgbstr), 1));
transition: width .8s cubic-bezier(.4,0,.2,1);
}
.stargreen-yp-pct {
font-size: 11.5px;
opacity: .58;
margin-top: 5px;
text-align: right;
font-variant-numeric: tabular-nums;
}
/* ==========================================================================
* 2. 页脚运行时间徽章
* ========================================================================== */
.github-badge-big {
display: inline-block;
border-radius: 6px;
text-shadow: none;
font-size: 13.5px;
color: #fff;
line-height: 18px;
margin: 4px 5px 4px 0;
}
.github-badge-big .badge-subject {
display: inline-block;
background-color: rgba(0, 0, 0, .32);
padding: 4px 7px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.github-badge-big .badge-value {
display: inline-block;
padding: 4px 8px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
font-variant-numeric: tabular-nums;
box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
.bg-apricots { background-color: #f7c280 !important; color: #4a3418 !important; }
#footer .stargreen-footer-badges { margin-top: 4px; line-height: 1.7; }
/* ==========================================================================
* 3. 字体系统
* ========================================================================== */
/* 自定义正文字体：echo（圆润黑体，与 bleaz 同款调性）
注：字体文件通过下方 JS 异步注入，此处仅声明 face，避免阻塞渲染 */
@font-face {
font-family: 'SG-Echo';
font-style: normal;
font-weight: 400;
font-display: swap;
/* 本地优先（同机房，最快）→ CDN 兜底（jsdelivr 国内镜像）
浏览器按 src 顺序逐个尝试，前一个失败才用后一个 */
src: url('/wp-content/uploads/fonts/13.woff2') format('woff2'),
url('https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/fonts/13.woff2') format('woff2');
}
/* 字体加载完成后给 打 .sg-font-ready 标记，用 CSS 平滑过渡
未加载时完全不应用自定义字体 —— 首屏永远是本地系统字体，零等待 */
.sg-font-ready body,
.sg-font-ready .post-content,
.sg-font-ready .post-content p,
.sg-font-ready article p,
.sg-font-ready .banner-title,
.sg-font-ready .banner-subtitle,
.sg-font-ready .post-title,
.sg-font-ready .leftbar-announcement-content {
font-family: 'SG-Echo', -apple-system, 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei', 'Noto Sans SC', sans-serif;
}
/* ---------- 排版尺度（对齐 bleaz 的阅读节奏） ---------- */
/* 正文：1.15rem / 行高 1.85，中文长文的舒适区间 */
.post-content p,
.post-content li {
font-size: 1.15rem;
line-height: 1.85;
letter-spacing: .01em;
}
.post-content h2 { font-size: 1.5rem; margin-top: 1.8em; }
.post-content h3 { font-size: 1.28rem; margin-top: 1.5em; }
.post-content h4 { font-size: 1.12rem; margin-top: 1.3em; }
/* 正文颜色：深蓝灰，比纯黑柔和，长时间阅读不刺眼 */
.post-content { color: #364863; }
html.darkmode .post-content { color: #d7dae0; }
/* 代码块不套用自定义字体（保持等宽，利于对齐阅读） */
.sg-font-ready .post-content code,
.sg-font-ready .post-content pre,
.sg-font-ready .post-content kbd,
.sg-font-ready .post-content samp {
font-family: 'JetBrains Mono', 'Cascadia Code', Consolas,
Monaco, 'Courier New', monospace;
}
/* 正文字号缩放的连贯性：移动端略收 */
@media (max-width: 767.98px) {
.post-content p, .post-content li { font-size: 1.08rem; }
}
/* ---------- 引文：弱主题色底 + 左侧主题色描边（bleaz 同款手法） ---------- */
.post-content blockquote {
background: rgba(var(--themecolor-rgbstr), .10) !important;
border-radius: 8px;
padding: .8em 1.1em;
margin: 1.2em 0;
}
html.darkmode .post-content blockquote {
background: rgba(var(--themecolor-rgbstr), .16) !important;
}
/* ---------- 表格：统一边距，避免默认挤在一起 ---------- */
/* ⚠️ 第十七轮 · 十二：必须排除 .hljs-ln —— 开了代码高亮后，Argon 用一张 table.hljs-ln 画行号，
这条带 !important 的 padding 会压掉主题给代码列留的 padding-left:30px，
行号就盖住了每行开头的一两个字符（实测 #include 显示成 nclude）。 */
.post-content table:not(.hljs-ln) td,
.post-content table:not(.hljs-ln) th {
padding: 8px 12px !important;
}
/* ==========================================================================
* 4. 站点自定义样式
* ========================================================================== */
/* ---------- 2.1 卡片玻璃（数值统一在 2.8.6 定义，此处只做子元素归零） ---------- */
/* 说明：卡片的背景/模糊/边框/阴影最终由 2.8.6 章节统一控制，
本节只处理"卡片内部小组件不应叠加背景"的问题，避免透明度叠加变色。 */
.card .widget, html.darkmode .card .widget {
background-color: transparent !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* 侧边栏公告保持主题色渐变 */
#leftbar_announcement {
background: var(--themecolor-gradient) !important;
}
/* ---------- 2.1.1 Banner：照片壁纸 + 品牌绿纱 ----------
壁纸（见 2.8.1）是固定定位的照片层，banner 不再自带图片，
改为叠一层「上深下透」的品牌绿纱：
· 顶部够深 → 白色标题 / 副标题 / 导航栏有足够对比度
· 底部全透 → 与页面背景无缝衔接，不产生横向色带接缝
这样 banner 与整页背景天然是同一张照片，视觉连贯（用户要求"两者用同一张图"）。 */
#banner {
background: linear-gradient(180deg,
rgba(14, 40, 30, .78) 0%,
rgba(20, 56, 40, .60) 20%,
rgba(30, 90, 64, .36) 44%,
rgba(44, 130, 92, .14) 68%,
rgba(58, 166, 117, 0) 100%) !important;
position: relative;
overflow: hidden;
}
/* 顶部补一层极淡暗角：照片本身明暗不定，暗角保证导航栏白字始终清晰 */
#banner::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg,
rgba(0, 0, 0, .32) 0%,
rgba(0, 0, 0, .14) 14%,
transparent 30%);
}
/* 【关键修复】Argon 自带装饰层 .shape.shape-primary 是一层「不透明紫色渐变」：
argon_css_merged.css → .section-shaped .shape-style-1.shape-primary{
background:linear-gradient(150deg,#281483 15%,#8f6ed5 70%,#d782d9 94%) }
.section-shaped .shape{position:absolute;z-index:-1;top:0;width:100%;height:100%}
它以 z-index:-1 铺满整个 banner，绘制顺序是
body::before(照片, z-index:-2) → .shape(紫色, z-index:-1) → #banner 绿纱
于是照片被紫色完全盖住（实测：把照片层染成品红，banner 区一点品红都看不到）。
顺带这也解释了此前"副标题显示紫色"的怪现象 —— 紫底透上来了。
置为透明，让照片真正透出来。
—— 用户随后要求「背景有那种大圆圈，不要这个东西」。
那些圆圈不是 .shape 自己的背景，而是它内部 9 个 ：
.section-shaped .shape-style-1 :nth-child(n){ background: rgba(255,255,255,.1) }
正解是主题自带的开关 argon_banner_background_hide_shapes（见 1.2 节已打开），
header.php:406 会因此不再输出 shape-style-1 类名，圆圈连样式都不匹配。
这里再补一条 CSS 兜底，防止选项被缓存/插件干扰而失效。 */
#banner .shape,
#banner .shape.shape-primary,
#banner .shape.shape-style-1 {
background: transparent !important;
}
#banner .shape > span,
#banner .shape-style-1 > span {
display: none !important; /* 装饰大圆圈：彻底不渲染 */
}
/* 暗色下照片整体偏亮，会破坏暗色氛围；加深绿纱把 banner 重新压暗。
（同样不能压死：首页 banner 改成 mini 后只有 270px 高，
绿纱太重会让首页顶部变成一块纯色板，照片轮廓全丢。） */
html.darkmode #banner {
background: linear-gradient(180deg,
rgba(10, 26, 20, .62) 0%,
rgba(14, 38, 28, .50) 24%,
rgba(20, 60, 42, .34) 52%,
rgba(26, 84, 60, .16) 78%,
rgba(28, 92, 66, .05) 100%) !important;
}
html.darkmode #banner::after {
background: linear-gradient(180deg,
rgba(0, 0, 0, .30) 0%,
rgba(0, 0, 0, .12) 16%,
transparent 34%);
}
#banner .banner-title,
#banner .banner-subtitle,
#banner .banner-title-inner {
position: relative;
z-index: 2; /* 高于底部过渡层(z-index:1)，避免被渐变盖住 */
text-shadow: 0 2px 14px rgba(0, 0, 0, .22);
}
/* 副标题颜色与渐变统一由 2.4 节处理，此处只管透明度 */
#banner .banner-subtitle {
opacity: .94;
}
/* 顶栏品牌名：白字加轻微投影，在绿色 banner 上足够清晰 */
#banner .navbar-brand,
#banner .navbar-nav .nav-link {
text-shadow: 0 1px 8px rgba(0, 0, 0, .28);
}
/* 背景图场景下保留原来的覆盖层逻辑 */
#banner[style*="background-image"] {
background-blend-mode: multiply;
}
/* ---------- 2.2 侧边栏头像交互动效 ---------- */
#leftbar_overview_author_image {
width: 100px;
height: 100px;
margin: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(127, 127, 127, 0.1);
overflow: hidden;
/* ⚠️ 这里原来写了两条绿色柔光 box-shadow，但**从未生效** ——
Argon 给这个元素带了 Bootstrap 的 .shadow-sm，而 .shadow-sm 是
`!important`，普通声明压不过它（实测 computed 一直是
rgba(0,0,0,.075) 0 2px 4px）。已删除，投影交给 .shadow-sm。 */
transition: transform 0.32s cubic-bezier(.34,1.56,.64,1),
filter 0.32s ease;
}
#leftbar_overview_author_image:hover {
transform: scale(1.1);
filter: brightness(106%);
}
#leftbar_overview_author_name {
margin-top: 12px;
font-size: 18px;
font-weight: 600;
display: inline-block;
transition: transform 0.3s ease, color 0.3s ease;
}
#leftbar_overview_author_name:hover {
transform: scale(1.06);
color: #3aa675;
}
#leftbar_overview_author_description {
font-size: 13.5px;
margin-top: -2px;
opacity: 0.8;
line-height: 1.6;
}
/* ---------- 2.3 站点概览分隔线更轻 ---------- */
.site-state-item { border-left: 1px solid rgba(127, 127, 127, 0.26) !important; }
.site-friend-links-title { border-top: 1px dotted rgba(127, 127, 127, 0.3) !important; }
#leftbar_tab_tools ul li { padding-top: 3px; padding-bottom: 3px; }
/* ---------- 2.4 Banner 文字 ---------- */
.banner-title .banner-title-inner {
font-weight: 700;
letter-spacing: .02em;
text-shadow: 0 2px 24px rgba(0, 0, 0, .3);
}
/* 副标题：品牌绿系渐变文字（浅薄荷 → 白 → 淡绿）。
原为「蓝→紫→橙→金」多彩渐变，与绿色主题割裂，已替换。
安全性：渐变文字依赖 background-clip:text，若浏览器不支持，
-webkit-text-fill-color:transparent 会让文字彻底消失。
因此用 @supports 守卫，不支持时退化为纯色浅绿。 */
.banner-subtitle {
font-size: 1.05rem;
color: #d6f5e6; /* 默认纯色（降级态） */
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.banner-subtitle {
background: linear-gradient(94.75deg,
rgb(190, 240, 214) 0%,
rgb(255, 255, 255) 46%,
rgb(168, 228, 199) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.banner-subtitle {
filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .25));
}
/* ---------- 2.5 正文表格 / 引用 / 代码 ---------- */
/* 同上，排除代码高亮的行号表 .hljs-ln：display:block 和单元格内边距会把代码撑成「隔行」那么高 */
article table:not(.hljs-ln) > thead > tr > th,
article table:not(.hljs-ln) > tbody > tr > td,
article table:not(.hljs-ln) > tfoot > tr > td {
padding: 9px 12px;
border: 1px solid rgba(127, 127, 127, 0.24);
}
article table:not(.hljs-ln) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
blockquote {
background: rgba(var(--themecolor-rgbstr), 0.09) !important;
border-left: 4px solid rgba(var(--themecolor-rgbstr), 0.75) !important;
border-radius: 0 6px 6px 0;
padding: 14px 18px !important;
width: 100%;
}
article pre, article .wp-block-code { border-radius: 8px !important; overflow: hidden; }
article :not(pre) > code {
background: rgba(var(--themecolor-rgbstr), 0.1);
color: rgba(var(--themecolor-rgbstr));
padding: 2px 6px;
border-radius: 4px;
font-size: .92em;
}
article h2 { margin-top: 2em; margin-bottom: .7em; }
article h3 { margin-top: 1.6em; margin-bottom: .6em; }
article img {
border-radius: 6px;
box-shadow: 0 4px 18px rgba(0, 0, 0, .08);
transition: transform .35s ease, box-shadow .35s ease;
}
article img:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.14); }
/* ---------- 2.6 滚动模糊 ---------- */
#content::before {
transition: filter .35s ease, transform .35s ease !important;
filter: blur(0px);
transform: scale(1.02);
}
#content.scrolled::before {
filter: blur(14px);
transform: scale(1.05);
}
/* ---------- 2.8 控件圆润化 + 淡蓝背景 + 毛玻璃体系 ----------
参考 bleaz / xiamuyan 的透明设置，统一圆角语言与玻璃质感。
Argon 默认：按钮 4px 方角纯白、背景纯灰 #f4f5f7、导航栏无模糊 —— 显廉价。
本章：建立 8/12/16/99 四档圆角体系 + 淡蓝底 + 高斯模糊玻璃层。 */
/* === 2.8.1 页面背景：照片壁纸 + 柔化薄纱 ===
三层结构（从下往上）：
body::before z-index:-2 照片（固定定位，cover 铺满，不随滚动）
body::after z-index:-1 薄纱（压对比度保证可读，同时保留淡蓝调）
页面内容 正常层
照片与 banner 共用同一张图（banner 只叠一层绿纱），因此视觉连贯。
【两个必须踩过的坑 —— 照片被盖住，排查了很久】
坑 1：Argon 的 .shape.shape-primary 是「不透明紫色渐变」，铺满整个 banner，
把照片在 banner 区完全盖住（详见 2.1.1 的修复）。
坑 2：Argon 给 body 设了不透明背景色（#f4f5f7）。
CSS 绘制顺序是「负 z-index 层 → 块级背景 → ...」，
所以不透明的 body 背景会整体盖住 body::before 的照片层。
症状很有迷惑性：整页看起来只是"从深绿到浅蓝的平滑渐变"，
像"照片没加载"，其实是照片被压在最底下、一点都看不见。
实测数据（x=1400 纵向采样）：
未修 body： y=320(156,182,180) → y=380(107,143,148) 单调平滑，无照片细节
修好 body： 同一位置出现明显起伏，照片的山脊/水纹透出来
结论：body 必须 transparent，兜底底色交给 html 的 canvas 背景。
⚠️ 若日后改背景，务必保持 body 背景为 transparent。 */
html {
background: #eaf2fb !important; /* 兜底底色（图片未加载 / 加载失败时可见） */
}
body {
background-color: transparent !important; /* 见上文「坑 2」，不可省略 */
}
/* 照片层：移动端用 1280 宽（46KB），桌面换 2560 宽（174KB），按视口宽度切换。
【坑 3 —— 默认切到暗色模式后才暴露】
Argon 的暗色样式里有一条**同样叫 body::before** 的全屏遮罩：
html.darkmode body:before {
content:""; position:fixed; inset:0;
background: rgba(0,0,0,.2); z-index: 999999999;
pointer-events: none; }
它是「元素 + 类 + 元素」= 特异度 (0,1,2)，而本规则只有 (0,0,1)，
于是暗色下**照片层被整条覆盖**（background-image 变成 none），
同时 Argon 那个 z-index:999999999 的遮罩还会盖在所有内容之上。
症状：暗色下背景照片完全消失，只剩"html 底色 + 薄纱"的纯色渐变。
为什么用 !important 而不是提特异度：!important 的比较发生在特异度之前，
一条 !important 就能稳定压过主题里任何非 !important 的同名声明，
而**每一个属性都要单独加** —— CSS 是逐属性比较的，
只给 background 加 !important 的话，z-index 仍会被主题的
999999999 拿走，照片层就会跑到所有内容上面把整页盖住。
（这就是"同一个伪元素被两处争用"的典型坑：必须整体接管。） */
body::before {
content: '' !important;
position: fixed !important;
inset: 0 !important;
z-index: -2 !important;
pointer-events: none !important;
background: url('/wp-content/uploads/wallpaper/wallpaper-1280.webp') center center / cover no-repeat !important;
}
@media (min-width: 768px) {
body::before {
background-image: url('/wp-content/uploads/wallpaper/wallpaper-2560.webp') !important;
}
}
/* 薄纱层：淡蓝薄纱压住照片对比度。
alpha 刻意压得"轻"—— 照片要看得见才有意义；
正文可读性主要靠卡片自身的玻璃底（.card 不透明度 .65）。
若嫌照片太抢眼，调大 alpha 即可。 */
body::after {
content: '';
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background: linear-gradient(180deg,
rgba(234, 242, 251, .30) 0%,
rgba(234, 242, 251, .44) 55%,
rgba(234, 242, 251, .58) 100%);
}
/* 暗色遮罩：把照片压暗以贴合暗色氛围，但**不能压死**。
原来是 .52 → .76，实测在默认暗色模式下照片几乎完全看不见 ——
壁纸是用户明确要的，暗色下也得看得见轮廓，所以降到 .38 → .58。
正文可读性由卡片自身的不透明度保证（.card 暗色 .48）。 */
html.darkmode body::after {
background: linear-gradient(180deg,
rgba(20, 24, 30, .38) 0%,
rgba(20, 24, 30, .50) 55%,
rgba(20, 24, 30, .58) 100%);
}
html.darkmode {
background-color: #1e2229 !important; /* 暗色兜底底色（同样只给 html，body 保持透明） */
}
html.darkmode body {
background-color: transparent !important;
}
/* === 2.8.1 无框原则（第七轮）===
用户反馈「各种按钮不要加框，例如右上角搜索 和发送评论中的」。
★ 诊断结论：这些「框」**全部是我们自己在 2.8.3~2.8.5 里加的**
`border: 1px solid rgba(255,255,255,.5)`（浅色）/
`rgba(255,255,255,.14)`（暗色），一共 7 处：
· .input-group-text → 导航栏右上角放大镜（看起来像"搜索按钮"）
· .form-control → 评论表单的昵称/邮箱/验证码/内容框
· #leftbar_search_container→ 侧边栏搜索框
· #fabtn_*（6 个） → 悬浮按钮
· #fabtn_reading_progress → 阅读进度胶囊
· .dropdown-menu / #fabtn_blog_settings_popup / .emotion-keyboard → 弹层
暗色下 .14 的白在深底上尤其明显，所以用户一眼就看到一圈浅灰描边。
★ 处理原则：**玻璃语言不靠描边，靠「半透明底 + 模糊 + 投影」**。
所有 border 一律去掉（`border: none !important`），
用稍强的 box-shadow 保证控件在浅色照片上仍有轮廓（投影 ≠ 描边）。
唯一保留的"框"是**输入框聚焦时的焦点环**（`:focus` 的 box-shadow），
那是无障碍必需的，且只在聚焦瞬间出现，不影响静态观感。
⚠️ 副作用提醒：`border: none` 会让控件的**盒模型少 2px**，
所以 2.8.3b 里靠 `border-radius` 对齐的图标端与输入框仍能对齐，
但**不要**再用 `border-color` 做 hover 反馈（没有边框了，改不动），
hover 一律改成改 background。 */
/* === 2.8.2 圆角体系 ===
用户反馈「边角要更圆润」，且强调**不要靠加白边来假装圆角** —— 所以：
· 数值整体上调（原来 8/12/16 偏方）
· 卡片圆角走 Argon 自己的 --card-radius（由 argon_card_radius 选项生成，
已在 1 节里把选项值从 12 改成 20），这是"改主题本身"而不是贴外挂
· 所有描边（border）一律不加 —— 见 2.8.1「无框原则」 */
:root {
--sg-r-xs: 10px; /* 徽章、代码块、小标签 */
--sg-r-sm: 12px; /* 普通按钮 */
--sg-r-md: 18px; /* 输入框、下拉菜单、小面板 */
--sg-r-lg: 24px; /* 弹层、大面板 */
--sg-r-fab: 16px; /* 悬浮圆形按钮（42px 见方，16px 已是圆润方形） */
--sg-r-pill: 99px; /* 胶囊按钮、进度条 */
}
/* === 2.8.3 悬浮按钮（fabtn）：圆润 + 真·玻璃虚化 ===
用户反馈「控件上没有虚化效果」—— 根因是**不透明度太高**：
原来 background 是 rgba(255,255,255,.72)，72% 的白把背后的照片糊住了，
backdrop-filter 虽然写着，但视觉上完全看不出来。
玻璃感的关键是「低不透明度 + 强模糊」：alpha 降到 .40 左右，
背后的照片会以模糊形态透上来，虚化才看得见。 */
#fabtn_back_to_top,
#fabtn_go_to_comment,
#fabtn_toggle_darkmode,
#fabtn_toggle_sides,
#fabtn_open_sidebar,
#fabtn_toggle_blog_settings_popup {
border-radius: var(--sg-r-fab) !important;
background: rgba(255, 255, 255, .32) !important; /* .72 → .40 → .32，越透虚化越显 */
backdrop-filter: saturate(180%) blur(24px) !important;
-webkit-backdrop-filter: saturate(180%) blur(24px) !important;
border: none !important; /* 无框：轮廓交给投影 */
box-shadow: 0 6px 20px rgba(38, 71, 110, .20), 0 2px 6px rgba(38, 71, 110, .12) !important;
transition: transform .25s cubic-bezier(.34,1.4,.64,1),
box-shadow .25s ease, background .25s ease !important;
}
#fabtn_back_to_top:hover,
#fabtn_go_to_comment:hover,
#fabtn_toggle_darkmode:hover,
#fabtn_toggle_sides:hover,
#fabtn_open_sidebar:hover,
#fabtn_toggle_blog_settings_popup:hover {
transform: translateY(-3px) scale(1.06);
background: rgba(255, 255, 255, .62) !important;
box-shadow: 0 10px 26px rgba(38, 71, 110, .20) !important;
}
html.darkmode #fabtn_back_to_top,
html.darkmode #fabtn_go_to_comment,
html.darkmode #fabtn_toggle_darkmode,
html.darkmode #fabtn_toggle_sides,
html.darkmode #fabtn_open_sidebar,
html.darkmode #fabtn_toggle_blog_settings_popup {
background: rgba(30, 34, 41, .40) !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, .46) !important;
}
/* 设置弹层 / 表情键盘：大圆角 + 玻璃（同样无框） */
#fabtn_blog_settings_popup,
.emotion-keyboard {
border-radius: var(--sg-r-lg) !important;
background: rgba(255, 255, 255, .74) !important;
backdrop-filter: saturate(170%) blur(24px) !important;
-webkit-backdrop-filter: saturate(170%) blur(24px) !important;
border: none !important;
box-shadow: 0 16px 48px rgba(38, 71, 110, .22) !important;
}
html.darkmode #fabtn_blog_settings_popup,
html.darkmode .emotion-keyboard {
background: rgba(32, 36, 43, .86) !important;
}
/* === 2.8.3b 控件补漏 ===
用脚本把页面上所有可见控件（button / input / .input-group-text / .card …）
的圆角与虚化扫了一遍，发现 5 处漏网。逐个补齐，理由写在每段上面。 */
/* ① 输入组（导航栏搜索 / 评论表单的昵称·邮箱·验证码·网址）
────────────────────────────────────────────────────────────────
★ 第十一轮重做。原来把"玻璃底"**分别**画在 .input-group-text（图标端）
和 .form-control（输入框）上，于是同一个胶囊里出现两块不同颜色的底：
· 暗色下 .input-group-text = rgba(38,43,51,.44) 深灰
.form-control = rgba(255,255,255,.10) 浅灰
· 两个 18px 圆角并排，接缝处还会露一个缺口
用户截图里说的「搜索的黑边」「这些黑边」就是那两块深灰圆角块。
做法：**把底提到整组上，两个子元素一律透明** → 视觉上是一条连续胶囊。
圆角只留在最左/最右两端，**所以不需要 overflow:hidden** ——
评论区的验证码/网址框靠 :before 在 top:-35px 处弹提示（"http(s)://"、
"11 - 7 ="），一旦 overflow:hidden 就会被整个裁掉，这是必须避开的坑。 */
.input-group-alternative {
background: rgba(255, 255, 255, .40) !important;
backdrop-filter: saturate(180%) blur(20px) !important;
-webkit-backdrop-filter: saturate(180%) blur(20px) !important;
border-radius: var(--sg-r-md) !important;
box-shadow: none !important;
transition: background .25s ease, box-shadow .25s ease;
}
html.darkmode .input-group-alternative {
background: rgba(255, 255, 255, .10) !important;
}
/* 子元素：无底、无虚化（虚化已由整组承担）、无自带阴影。
⚠️ 必须把 `html.darkmode ...` 的版本也显式写出来 ——
文件后面还有 `html.darkmode input.form-control`（特异性 0,2,2），
高于这里的 (0,2,0)。不显式覆盖的话，暗色下输入框会自己再叠一层 10% 白，
和整组的 10% 白叠成 19%，接缝处就能看到一道浅色断层。
（聚焦态的同类冲突更麻烦，单独用 `.form-control.form-control:focus` 处理，见下） */
.input-group-alternative > .input-group-prepend > .input-group-text,
.input-group-alternative > .input-group-append > .input-group-text,
.input-group-alternative > .form-control,
html.darkmode .input-group-alternative > .input-group-prepend > .input-group-text,
html.darkmode .input-group-alternative > .input-group-append > .input-group-text,
html.darkmode .input-group-alternative > .form-control {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: none !important;
box-shadow: none !important;
}
/* 圆角只给两端：左端＝图标块，右端＝输入框（Argon 的输入组里输入框恒为最后一个子元素） */
.input-group-alternative > .input-group-prepend > .input-group-text,
.input-group-alternative > .input-group-append > .input-group-text {
border-radius: var(--sg-r-md) 0 0 var(--sg-r-md) !important;
}
.input-group-alternative > .form-control:last-child {
border-radius: 0 var(--sg-r-md) var(--sg-r-md) 0 !important;
}
.input-group-alternative > .form-control:only-child {
border-radius: var(--sg-r-md) !important;
}
/* 焦点环挪到整组上。原来它挂在输入框上，只圈住输入框那一段，
和左边的图标块错位，看起来像"半个框"。 */
.input-group-alternative:focus-within {
background: rgba(255, 255, 255, .74) !important;
box-shadow: 0 0 0 3px rgba(var(--themecolor-rgbstr), .38) !important;
}
html.darkmode .input-group-alternative:focus-within {
background: rgba(255, 255, 255, .18) !important;
}
/* 聚焦时输入框自己不要上色 —— 底色与焦点环统一由整组的 :focus-within 提供。
⚠️ 这里必须把类计数抬到 4：`.form-control.form-control` 的重复是**刻意**的。
文件后面（2.8.3b ①之后）还有两条同样带 !important 的规则：
input.form-control:focus → (0,2,1)
html.darkmode input.form-control:focus → (0,3,2)
两边都有 !important 时，胜负只看**特异性**（再才轮到源码顺序）。
不抬计数就会被它们压回去 —— 实测暗色下输入框聚焦后自己变成 18% 白，
叠在整组的 10% 白上，接缝处立刻冒出一道浅色块。 */
.input-group-alternative > .form-control.form-control:focus {
background: transparent !important;
box-shadow: none !important;
}
/* ①a 兜底：万一有 .input-group-text 不在 .input-group-alternative 里
（主题升级/插件可能引入），仍按旧的"独立玻璃块"处理，
不至于退回原生白底方角。（本条特异性低于上面的子选择器，不会打架） */
.input-group-text {
border-radius: var(--sg-r-md) !important;
background: rgba(255, 255, 255, .40) !important;
border: none !important;
}
html.darkmode .input-group-text {
background: rgba(255, 255, 255, .10) !important;
}
/* ①b Argon 的 .input-group-alternative / .form-control-alternative 自带一条外阴影
`rgba(50,50,93,.15) 0 1px 3px`（画在输入框外，读起来像一圈外框边），
以及 .input-group 包装层 4px 的圆角。全部清掉，避免和我们的玻璃语言打架。 */
.input-group,
.form-control-alternative {
border-radius: var(--sg-r-md) !important;
box-shadow: none !important;
}
/* ② 移动端菜单键 .navbar-toggler
问题：Argon 默认 border-radius: .25rem = 4px，在 46×31 的按钮上几乎是直角。
做法：跟普通按钮统一到 --sg-r-sm。 */
.navbar-toggler {
border-radius: var(--sg-r-sm) !important;
}
/* ③ 验证码刷新键 .pcr-button
问题：Argon 默认 .15rem ≈ 2.4px，是页面上最"方"的一个控件。
做法：小控件统一到 --sg-r-xs。 */
.pcr-button {
border-radius: var(--sg-r-xs) !important;
}
/* ④ 评论表情键 #comment_emotion_btn
问题：它是 42×42 的方形图标键，却沿用普通按钮的 12px，
和旁边同尺寸的悬浮按钮（16px）不是一套。
做法：对齐悬浮按钮。 */
#comment_emotion_btn {
border-radius: var(--sg-r-fab) !important;
}
/* ⑤ 阅读进度键 #fabtn_reading_progress
问题：其它悬浮按钮都是 .40 白 + blur(20px) 的玻璃，只有它是
**不透明白底**（rgb(255,255,255)）且没有任何模糊 —— 一眼就是"另一个系统"。
注意：它是胶囊形（内部有进度条 #fabtn_reading_progress_bar 和百分比），
所以圆角必须保留 --sg-r-pill，不能套 --sg-r-fab，否则胶囊会被切成方块。 */
#fabtn_reading_progress {
border-radius: var(--sg-r-pill) !important;
background: rgba(255, 255, 255, .32) !important;
backdrop-filter: saturate(180%) blur(24px) !important;
-webkit-backdrop-filter: saturate(180%) blur(24px) !important;
border: none !important;
box-shadow: 0 6px 20px rgba(38, 71, 110, .20) !important;
}
html.darkmode #fabtn_reading_progress {
background: rgba(30, 34, 41, .40) !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, .46) !important;
}
/* === 2.8.4 导航栏：主题自带的整体毛玻璃 ===
实测事实（勿凭猜测）：
· Argon 导航栏元素是 #navbar-main.navbar，position:fixed（吸顶）
· .navbar-transparent 是常驻类，不随滚动增删
· 滚动时 Argon 用 **内联 !important** 写 background-color，样式表压不掉
· 但该声明引用 CSS 变量 --toolbar-color，且该变量定义在
#navbar-main 元素上（不是 :root）→ 改变量即可控制颜色
★ 本轮（第五轮后续）用户明确要求：「任务栏移动下方时候是整体虚化，
不是完整的透明，而是只有一点点阴影」。
→ 这正是 Argon 自带的 argon_toolbar_blur 开关（见 1.2 节已打开）：
argontheme.js 的 changeToolbarTransparency() 读到 toolbar-blur 后会
· 顶部：background-color alpha 0 + backdrop-filter: blur(0px)
· 滚动后：background-color alpha **0.65** + backdrop-filter: blur(16px)
也就是"往下滚才整块虚化"，而且**不是**全透明。
→ 所以本节的职责收缩为三件事：
① 决定 0.65 那个白/灰是什么颜色（--toolbar-color）
② 给滚动后的状态加"一点点"阴影（主题会把 inline box-shadow 清空，
正好把控制权让给样式表）
③ 文字颜色随玻璃深浅切换
⚠ 千万别再写 backdrop-filter: none —— 那会把主题的 blur(16px) 压掉，
用户要的"整体虚化"就没了。
—— 选择器统一用 #navbar-main（ID）而不是 .navbar-main（类）：
主题里 #navbar-main 唯一（header.php:280），用 ID 可以稳定压过
主题/其它样式块里任何 .navbar-main 或 #navbar-main 规则。 */
#navbar-main {
transition: background .3s ease, box-shadow .3s ease,
backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease !important;
}
/* 关键：改写 Argon 导航栏的取色变量。
白天→白玻璃；暗色→深灰玻璃。alpha 由 Argon 自己控制
（顶部 0 / 滚动 0.65），所以顶部自然透明，无需额外干预。 */
html:not(.darkmode) #navbar-main { --toolbar-color: 255, 255, 255; }
html.darkmode #navbar-main { --toolbar-color: 32, 36, 43; }
/* 顶部：不画分割线、不加阴影，观感完全交给 banner */
html:not(.sg-scrolled) #navbar-main {
border-bottom: none !important;
box-shadow: none !important;
background-image: none !important;
/* 兜底：Argon 的 .headroom--not-top 规则带
background-color: #172b4d !important（深藏青实色底），
平时被它自己写的内联 !important 压着看不见；一旦那段内联没了
（主题升级、JS 报错），导航栏会突然变成一条藏青横条。
这里用更高特异度(1,2,1) + !important 钉死为透明。 */
background-color: transparent !important;
}
/* 滚动后：主题负责虚化（blur(16px) + alpha .65），本样式表只补「一点点阴影」。
阴影故意做得很轻（负 spread + 短距离），符合用户"只有一点点阴影"的描述：
既让导航栏与内容分层，又不至于在下方压出一条深色带。 */
html.sg-scrolled #navbar-main {
border-bottom: none !important;
background-image: none !important;
background-color: transparent !important; /* 兜底，见上 */
box-shadow: 0 3px 12px -6px rgba(20, 40, 60, .20) !important;
}
html.darkmode.sg-scrolled #navbar-main {
box-shadow: 0 3px 12px -6px rgba(0, 0, 0, .34) !important;
}
/* 滚动后导航栏压在浅色玻璃上，文字需从白色转为深色 */
html.sg-scrolled:not(.darkmode) #navbar-main .nav-link,
html.sg-scrolled:not(.darkmode) #navbar-main .navbar-brand {
color: #3a4a5c !important;
}
html.sg-scrolled:not(.darkmode) #navbar-main .navbar-toggler {
color: #3a4a5c !important;
}
/* === 2.8.4b 导航栏搜索：图标颜色跟着"整组底色"走（第十一轮重写）===
★ 第七轮的原问题仍然成立：导航栏的放大镜图标是**白色**（继承导航栏文字色），
底色一变浅就「白图标压白底」→ 图标完全看不见。
★ 第十一轮的变化：玻璃底从 .input-group-text 挪到了 .input-group-alternative
（见 2.8.3b ①），所以这里不再给图标块单独上色，只负责**图标自身的颜色**：
浅色模式 → 整组是 rgba(255,255,255,.40) 浅玻璃 → 图标转深
暗色模式 → 整组是 rgba(255,255,255,.10) 压暗底 → 图标保持白
于是不管在顶部（导航栏文字白）还是滚动后（文字转深），搜索框都是
同一套「浅玻璃 + 深图标」，不会再冒出一块突兀的深灰方块。
—— 这也顺带干掉了原来"顶部要深底、滚动后要浅底"两条互相打架的规则。 */
html:not(.darkmode) #navbar-main .input-group-text i {
color: #3a4a5c !important;
}
/* === 2.8.5 按钮：圆润化 === */
.btn, button.btn, input[type=submit], .wp-block-button__link {
border-radius: var(--sg-r-sm) !important;
transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover, button.btn:hover, input[type=submit]:hover {
transform: translateY(-1px);
filter: brightness(1.04);
}
/* === 2.8.5b outline 按钮去框（第七轮）===
用户说「各种按钮不要加框」。Argon 的 `.btn-outline-*` 是**描边按钮** ——
评论区的「回复」、输入框下方的展开箭头、设置弹层的字体/阴影切换都是它，
每一个都顶着一圈 1px 主题色描边。改成「玻璃底 + 无描边」的 ghost 风格。
★ 坑：这些按钮的**选中态不是 `.active` 类**，而是 Argon 用 ID + html 类写的：
html:not(.use-serif) #blog_setting_font_sans_serif { background: var(--themecolor) }
如果只写一条 `.btn-outline-* { background: ... !important }`，
会把选中态的实色底一起压掉（`!important` 赢过没有 `!important` 的 ID 规则）
→ 设置弹层里"当前选中的字体/阴影"就看不出是哪个了。
所以下面**第二条规则把选中态原样钉回来**，两条必须成对出现。 */
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
.btn-outline-danger, .btn-outline-warning, .btn-outline-info,
.btn-outline-default, .btn-outline-light, .btn-outline-dark {
border: none !important;
background: rgba(255, 255, 255, .40) !important;
backdrop-filter: saturate(180%) blur(20px) !important;
-webkit-backdrop-filter: saturate(180%) blur(20px) !important;
transition: background .2s ease, box-shadow .2s ease;
}
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-success:hover,
.btn-outline-danger:hover, .btn-outline-warning:hover, .btn-outline-info:hover,
.btn-outline-default:hover, .btn-outline-light:hover, .btn-outline-dark:hover {
background: rgba(255, 255, 255, .62) !important;
box-shadow: 0 6px 16px rgba(38, 71, 110, .16) !important;
}
html.darkmode .btn-outline-primary, html.darkmode .btn-outline-secondary,
html.darkmode .btn-outline-success, html.darkmode .btn-outline-danger,
html.darkmode .btn-outline-warning, html.darkmode .btn-outline-info,
html.darkmode .btn-outline-default, html.darkmode .btn-outline-light,
html.darkmode .btn-outline-dark {
background: rgba(255, 255, 255, .10) !important;
}
html.darkmode .btn-outline-primary:hover, html.darkmode .btn-outline-secondary:hover,
html.darkmode .btn-outline-success:hover, html.darkmode .btn-outline-danger:hover,
html.darkmode .btn-outline-warning:hover, html.darkmode .btn-outline-info:hover,
html.darkmode .btn-outline-default:hover, html.darkmode .btn-outline-light:hover,
html.darkmode .btn-outline-dark:hover {
background: rgba(255, 255, 255, .20) !important;
}
/* ★ 选中态钉回（与上面成对，勿单独删）：Argon 的 ID 规则 + Bootstrap 的 .active */
html:not(.use-serif) #blog_setting_font_sans_serif,
html.use-serif #blog_setting_font_serif,
html:not(.use-big-shadow) #blog_setting_shadow_small,
html.use-big-shadow #blog_setting_shadow_big,
.btn-outline-primary.active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show > .btn-outline-primary.dropdown-toggle {
background: var(--themecolor) !important;
color: #fff !important;
box-shadow: 0 4px 12px rgba(var(--themecolor-rgbstr), .32) !important;
}
/* === 2.8.5c 设置弹层「滤镜」色块：选中提示从硬描边换成柔光 + 放大（第七轮）===
主题 style.css:1766 起给四个滤镜色块写了选中环：
#blog_setting_filter_off.active { border: 1px solid var(--themecolor); }
#blog_setting_filter_sunset.active { border: 1px solid #6e5a00; }
#blog_setting_filter_darkness.active { border: 1px solid #111; }
#blog_setting_filter_grayscale.active { border: 1px solid #333; }
这是一圈**硬边** 1px 描边，正是用户说的"框"。但直接删掉用户就分不清
当前开着哪个滤镜了 —— 所以换成"**放大 + 柔光**"：柔光有衰减、不会被读成边。
注意 `transform` 不能丢：`.blog-setting-filter-btn` 自带 `transition: all .3s`，
放大动画会自然播放。 */
#blog_setting_filter_off.active,
#blog_setting_filter_sunset.active,
#blog_setting_filter_darkness.active,
#blog_setting_filter_grayscale.active {
border: none !important;
transform: scale(1.14);
box-shadow: 0 0 10px 4px rgba(var(--themecolor-rgbstr), .55),
0 6px 16px rgba(0, 0, 0, .28) !important;
}
/* 搜索框：胶囊式圆角（99px），比大圆角更适配窄高比，不显臃肿。
同样降不透明度 + 加模糊，让它和卡片/悬浮按钮是同一套玻璃语言。
★ 第七轮：去掉 1px 描边，hover 反馈从 border-color 改成 background。 */
button#leftbar_search_container,
#leftbar_search_container {
border-radius: var(--sg-r-pill) !important;
background: rgba(255, 255, 255, .40) !important;
backdrop-filter: saturate(180%) blur(20px) !important;
-webkit-backdrop-filter: saturate(180%) blur(20px) !important;
border: none !important;
box-shadow: 0 4px 14px rgba(38, 71, 110, .12) !important;
transition: background .25s ease, box-shadow .25s ease;
}
button#leftbar_search_container:hover {
background: rgba(255, 255, 255, .62) !important;
box-shadow: 0 8px 22px rgba(38, 71, 110, .18) !important;
}
/* === 2.8.3c 侧边栏搜索：点开后让按钮文案让位给输入框（第十一轮）===
★ 用户反馈：「搜索框点了文字不消失」。
★ 机制：Argon 把「🔍 搜索」和真正的 放在**同一个