/* iOS 26"透明"图标模式——只在 带 [data-glass-mode="on"] 时生效
(后台"外观"分区的 glassMode 开关,或者天气主题背景生效期间由
weather-theme.js 临时接管,见该文件 apply() 的说明)。这个文件本身
只在 glassMode 开着、或天气总开关开着(天气随时可能把它临时打开)时
才会被 header.php/post.php 引入,和其它可选功能同一种"完全不加载"
做法。
这是正交于深浅色的第二个维度——深浅色决定颜色冷暖(data-theme),这
个属性决定"实底 vs 玻璃透明"(data-glass-mode)。两套属性各自独立生
效,不冲突。
真正的透明不是简单调低 opacity:元素本身连同它整个子树一起变淡,身
后如果又是一片没有内容的纯色页面背景,结果只是把卡片调暗了一点,不
是真的透亮。iOS 26 参考图里的透明是"元素本身近乎无色,靠
backdrop-filter 把身后的东西借过来当自己的质感",同时需要解决"身后
有没有东西可透"这个前提问题:文件末尾新增了一组常驻的氛围光斑
(body::before/::after,fixed 定位,不跟随滚动),保证玻璃面板不管卡
在页面哪个位置,身后都有色彩和纹理可以借,不会透出一片死白/死黑。
可读性是底线,但不是靠"整块背景压深"保对比度(那样等于走回半透明
面板的老路),而是给文字本身加更强的阴影(见文件末尾),让文字在真
正透亮的玻璃上依然站得住。 */
/* emoji 封面卡片:opacity 是"整个元素连同它的子元素一起变淡",没法只
让背景透而不动子元素——这里改成直接覆盖 .cover 自己的 background 属
性(不用 opacity),把 base.css 那两层色相渐变换成一层极淡的色相蒂
子(留一点点"这张卡是什么颜色"的识别度,不是完全去掉颜色身份),
backdrop-filter 负责借身后的天气/氛围光当质感。子元素(emoji 本体/
水印)不受 .cover 背景变化影响,单独控制,保持接近完全不透明,这样
emoji 才能读成"浮在玻璃上的图标",而不是"和背景一起变淡的贴纸"。 */
html[data-glass-mode="on"] .cover {
background: hsl(var(--h) calc(var(--s) * 1%) 50% / .14);
backdrop-filter: blur(28px) saturate(160%);
-webkit-backdrop-filter: blur(28px) saturate(160%);
/* a low-alpha fill alone reads as "still solid" against a low-contrast
background (a dark starry night sky has almost no local texture to
reveal through the blur) — the inset highlight/shadow pair gives the
card a visible glass edge independent of what's behind it, same
treatment .collection-card/.glass already use below. */
box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 -1px 0 rgb(0 0 0 / .18);
}
html[data-theme="light"][data-glass-mode="on"] .cover {
background: hsl(var(--h) calc(var(--s) * 1%) 70% / .16);
}
html[data-theme="dark"][data-glass-mode="on"] .cover {
/* dark theme's background is itself dark and low-saturation (night sky/
dark page bg) — a bigger saturate() pull pulls more visible color out
of that thin backdrop than the shared 160% did, so the card doesn't
read as a flat dark block. */
backdrop-filter: blur(28px) saturate(220%);
-webkit-backdrop-filter: blur(28px) saturate(220%);
}
html[data-glass-mode="on"] .cover-emoji,
html[data-glass-mode="on"] .fe {
opacity: 1;
filter: drop-shadow(0 6px 16px rgb(0 0 0 / .35)) saturate(1.05);
}
/* 分类集锦卡——保留它自己那份按分类色相算出来的渐变(那是"这张卡的
颜色"这个语义,不能丢),不透明度压得足够低 + 加强模糊,让它从"略透
的实心色块"变成真正的"有色玻璃"。 */
html[data-glass-mode="on"] .collection-card {
opacity: .62;
backdrop-filter: blur(26px) saturate(170%);
-webkit-backdrop-filter: blur(26px) saturate(170%);
border: 1px solid rgb(255 255 255 / .22);
box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), inset 0 -1px 0 rgb(0 0 0 / .12);
}
html[data-glass-mode="on"] .collection-card__body {
text-shadow: 0 1px 3px rgb(0 0 0 / .4), 0 2px 8px rgb(0 0 0 / .25);
}
/* 分类芯片默认是纯色的(chips 漂在纯色页面背景上,身后没有东西可模
糊)——透明模式开启后这个前提变了(身后有文件末尾新增的常驻氛围光
斑,或者天气特效),这里补一份真玻璃版本,不覆盖非玻璃模式下的默认
样式。 */
html[data-glass-mode="on"] .chip {
background: rgb(120 120 128 / .10);
backdrop-filter: blur(22px) saturate(170%);
-webkit-backdrop-filter: blur(22px) saturate(170%);
border: 1px solid rgb(255 255 255 / .22);
text-shadow: 0 1px 2px rgb(0 0 0 / .3);
}
html[data-theme="light"][data-glass-mode="on"] .chip {
background: rgb(255 255 255 / .18);
border-color: rgb(255 255 255 / .55);
text-shadow: 0 1px 2px rgb(255 255 255 / .4);
}
/* 文章列表故意不给 .article-row 单独加玻璃底(背景/backdrop-filter)。
曾经试过给它加一点低 alpha 背景 + backdrop-filter blur+saturate,呼
应其它卡片的玻璃质感,结果天气生效、身后是深色夜空/浓色天空时,
saturate() 把 backdrop-filter 采样到的那一小块背景颜色进一步放大提
纯,每一行在视觉上都读成一个边界清晰的深色圆角块,比不透明还难
看。真正的修法是不再单独覆盖——"flat iOS grouped-list row,不做卡
片厚度"这个设计本身就是想要的透明行式(细分隔线 + hover/active 时
一层极淡高光,见 components.css 的 .article-row/:hover/:active,那
套本来就不挂 backdrop-filter,不会被身后背景的颜色污染),玻璃模式
开关两种状态收敛成同一套设计,不需要在这里单独覆盖一次。标题/副标
题的阴影保留,天气/氛围背景亮度变化大时文字仍然站得住。 */
html[data-glass-mode="on"] .article-row__title,
html[data-glass-mode="on"] .article-row__subtitle {
text-shadow: 0 1px 2px rgb(0 0 0 / .18);
}
/* 导航胶囊/顶栏球等已经在用的 .glass 共享类——本来就有一层玻璃质感,
这里把不透明度压得更低,真正趋近无色,同时加一圈"液态玻璃"的高光
边:顶部一条亮线 + 底部一条极淡暗线模拟厚度感,再加更亮的实体
border——这三样合起来是玻璃"有形但透"的关键,不是靠调暗背景撑出来
的立体感。 */
html[data-glass-mode="on"] .glass {
background: color-mix(in srgb, var(--glass-tint) 10%, transparent);
backdrop-filter: blur(34px) saturate(220%);
-webkit-backdrop-filter: blur(34px) saturate(220%);
border: 1px solid rgb(255 255 255 / .45);
box-shadow:
inset 0 1px 0 rgb(255 255 255 / .5),
inset 0 -1px 0 rgb(0 0 0 / .1),
0 8px 32px rgb(0 0 0 / .18);
}
html[data-theme="dark"][data-glass-mode="on"] .glass {
background: color-mix(in srgb, var(--glass-tint) 13%, transparent);
border: 1px solid rgb(255 255 255 / .22);
box-shadow:
inset 0 1px 0 rgb(255 255 255 / .16),
inset 0 -1px 0 rgb(0 0 0 / .3),
0 8px 32px rgb(0 0 0 / .4);
}
/* 图标钮(播放/主题切换等圆形按钮统一走 .btn-pill/.ask-quick-btn 之类
的既有 class,这里只额外覆盖最常见的圆形玻璃按钮底,不逐个组件重
复写)。 */
html[data-glass-mode="on"] .ask-theme-toggle,
html[data-glass-mode="on"] .btn-back,
html[data-glass-mode="on"] .btn-share {
backdrop-filter: blur(28px) saturate(190%);
-webkit-backdrop-filter: blur(28px) saturate(190%);
}
/* 真机截图踩过的坑:hero 左右切换箭头/深浅色切换钮悬浮在 hero 大图/
天气特效正上方,身后背景明暗变化极大(晴天大太阳到夜空星点)——跟着
上面 .glass 那套"趋近无色"的透明度走,晴天大太阳附近的箭头会淡到几
乎看不见(白色图标 + 近乎透明的底,叠在近乎全白的太阳光晕上,对比
度趋近于 0)。这几个是功能性控件不是纯装饰玻璃面,单独覆盖一个更
稳定、更深的半透明底,不完全跟着 .glass 的极限值走,放在 .glass 规
则后面靠源码顺序覆盖(两者选择器特异度相同)。 */
html[data-glass-mode="on"] .hero__nav-btn,
html[data-glass-mode="on"] .hero__circle-btn {
background: rgb(20 20 24 / .4);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgb(255 255 255 / .4);
}
/* 文章详情面板(.expand-sheet,后台点开文章内联展开、post.php 直达页
都用这一个类)——原来是 background:var(--bg-elevated) 一块实底不透
明,天气/氛围背景完全被挡在外面,和首页那套玻璃语言脱节。这是一整
屏承载长文阅读的面板,不能像 hero 卡片那样几乎去色——不透明度留得
比装饰性卡片高得多,只做到"能看出身后有天气/氛围光在动"这个程度,
优先保证长文阅读的稳定对比度,不是追求最大化的"透"。 */
html[data-glass-mode="on"] .expand-sheet {
background: color-mix(in srgb, var(--bg-elevated) 62%, transparent);
backdrop-filter: blur(36px) saturate(160%);
-webkit-backdrop-filter: blur(36px) saturate(160%);
border: 1px solid rgb(255 255 255 / .14);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
html[data-glass-mode="on"] .expand-sheet {
background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
}
}
/* 歌单页顶部工具栏(.itunes-toolbar)——已经有 backdrop-filter,但背景
直接写死 var(--glass-tint) 这个不透明的纯色 token,不是半透明混色,
哪怕加了模糊,身后什么都透不上来,读成一整条实色黑/白横栏。改成和
.glass 共享类同一套配方(color-mix 混透明度),身后天气/氛围光才能
真正透过来。 */
html[data-glass-mode="on"] .itunes-toolbar {
background: color-mix(in srgb, var(--glass-tint) 55%, transparent);
border-bottom: 1px solid rgb(255 255 255 / .14);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
html[data-glass-mode="on"] .itunes-toolbar {
background: var(--glass-tint);
}
}
/* 搜索输入框——同样是 background:var(--bg-elevated) 写死的不透明纯色
token,身后天气/氛围光透不上来,和搜索页其它元素(nav pill/天气背
景)脱节。 */
html[data-glass-mode="on"] .search-form__input {
background: color-mix(in srgb, var(--bg-elevated) 55%, transparent);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
html[data-glass-mode="on"] .search-form__input {
background: var(--bg-elevated);
}
}
/* 评分/撰写评论半屏弹窗(.ask-sheet)——同样是不透明纯色底,弹窗本身是
表单为主(星级/输入框/提交),不透明度留得比长文阅读面板还高一些,
优先保证填表时的稳定对比度。 */
html[data-glass-mode="on"] .ask-sheet {
background: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
backdrop-filter: blur(30px) saturate(160%);
-webkit-backdrop-filter: blur(30px) saturate(160%);
}
html[data-glass-mode="on"] .ask-sheet--compose .ask-sheet__submit {
background: color-mix(in srgb, var(--bg-elevated) 85%, transparent);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
html[data-glass-mode="on"] .ask-sheet,
html[data-glass-mode="on"] .ask-sheet--compose .ask-sheet__submit {
background: var(--bg-elevated);
}
}
/* "加载更多"按钮——同样是不透明纯色底,和页面里其它按钮(.btn-pill 用
--pill-bg,本来就是玻璃语言里的浅色调)不统一。 */
html[data-glass-mode="on"] .load-more__btn {
background: color-mix(in srgb, var(--glass-tint) 45%, transparent);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
html[data-glass-mode="on"] .load-more__btn {
background: var(--bg-elevated);
}
}
/* backdrop-filter 不支持时的兜底——不能整层退回纯透明(文字会飘在乱
背景上不可读),也不能沿用上面那套"趋近无色"的极低不透明度(没有模
糊撑着,极低不透明度看起来就是"脏透明"),这里单独给一个更高的兜底
不透明度,牺牲一部分"透"的效果换可读性,可读性优先级更高。 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
html[data-glass-mode="on"] .glass {
background: color-mix(in srgb, var(--glass-tint) 82%, transparent);
}
html[data-glass-mode="on"] .cover { opacity: .9; }
html[data-glass-mode="on"] .collection-card { opacity: .92; }
html[data-glass-mode="on"] .chip {
background: rgb(28 28 30 / .82);
}
html[data-theme="light"][data-glass-mode="on"] .chip {
background: rgb(255 255 255 / .88);
}
}
/* ==================== 身后要有可透的内容 ====================
玻璃质感做对了,身后如果只是页面纯色背景,透出来的还是一片死色,惊
艳不起来。天气主题激活时身后自然是天气特效(见 weather.css),这里
补的是"没开天气、只单独开了透明模式"这种情况:两个常驻的氛围光斑,
fixed 定位(不跟着滚动,不管玻璃面板卷到页面多深都在附近),颜色跟
--page-h(当前 hero 色相,app.js 维护)走,和 base.css 的 .page-glow
是同一个色彩语言,不是另起一套配色。天气生效时隐藏(两层氛围背景同
时出现会互相打架,和 weather.css 里 .page-glow 让位给天气背景是同
一个理由),prefers-reduced-motion 开启时这两个光斑本来就是静态
的,不需要额外处理;但完全没有动画不代表没有性能成本,两个都用
filter:blur() 而不是 backdrop-filter,不需要每帧采样身后内容,纯粹
是画一次的静态图层。 */
html[data-glass-mode="on"] body::before,
html[data-glass-mode="on"] body::after {
content: "";
position: fixed;
z-index: -1;
width: 60vw;
height: 60vw;
max-width: 640px;
max-height: 640px;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
}
html[data-glass-mode="on"] body::before {
top: -10vh;
left: -15vw;
background: hsl(var(--page-h) 60% 45% / .32);
}
html[data-glass-mode="on"] body::after {
bottom: -15vh;
right: -15vw;
background: hsl(calc(var(--page-h) + 40) 60% 45% / .26);
}
html[data-theme="light"][data-glass-mode="on"] body::before {
background: hsl(var(--page-h) 75% 70% / .4);
}
html[data-theme="light"][data-glass-mode="on"] body::after {
background: hsl(calc(var(--page-h) + 40) 75% 70% / .34);
}
html[data-weather-active][data-glass-mode="on"] body::before,
html[data-weather-active][data-glass-mode="on"] body::after {
display: none;
}
@media (prefers-reduced-motion: reduce) {
/* 这个文件里所有效果都是静态的(氛围光斑不跟着滚动只是 fixed 定位,
不是动画),这条只是和站内其它样式表保持同一个"每个视觉相关的样式
表都显式声明一次 reduced-motion 边界"的约定,方便以后这个文件真加
了过渡/动画效果时不会漏改。 */
}