/* 三页共享组件：系列切换胶囊 + 语言切换胶囊 + 液态玻璃材质与无障碍兜底。 单一来源：修改这里即可同时作用于 data-study(中/英)、discover、collaborators。 */ .language-switcher { position: fixed; inset-block-start: max(var(--space-sm), env(safe-area-inset-top)); inset-inline-end: max(var(--space-sm), env(safe-area-inset-right)); z-index: var(--z-sticky); display: inline-grid; grid-template-columns: repeat(2, auto); padding: var(--space-3xs); border: var(--rule-hair) solid var(--color-rule); border-radius: 999px; background: var(--color-paper); background: color-mix(in oklch, var(--color-paper) 88%, transparent); box-shadow: 0 0.25rem 1rem rgb(61 40 30 / 10%); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .language-switcher__item { display: inline-flex; min-width: 2.75rem; min-height: 2.5rem; align-items: center; justify-content: center; padding-inline: var(--space-sm); border-radius: 999px; color: var(--color-neutral); text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); } .language-switcher__item.is-current { background: var(--color-ink); color: var(--color-accent-ink); } .language-switcher.is-leaving .language-switcher__item:not(.is-current) { color: var(--color-accent-dark); } /* ---------- 系列页切换（翻唱源流 / 合作者 / 并排听） ---------- 与语言切换胶囊同一视觉：固定左上、当前页反白；窄屏落到底部居中成拇指可及的 dock。 */ .series-switcher { position: fixed; inset-block-start: max(var(--space-sm), env(safe-area-inset-top)); inset-inline-start: max(var(--space-sm), env(safe-area-inset-left)); z-index: var(--z-sticky); display: inline-flex; padding: var(--space-3xs); border: var(--rule-hair) solid color-mix(in oklch, var(--color-rule) 60%, transparent); border-radius: 999px; /* 液态玻璃材质：低透明底 + 提饱和让透出的颜色更鲜 + 上沿受光 + 内圈厚度感 */ background: color-mix(in oklch, var(--color-paper) 55%, transparent); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), inset 0 0 0 1px rgb(255 255 255 / 0.16), 0 0.5rem 1.5rem -0.5rem rgb(61 40 30 / 28%); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1; backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); } .series-switcher__item { display: inline-flex; min-height: 2.5rem; align-items: center; padding-inline: var(--space-sm); border-radius: 999px; color: var(--color-neutral); text-decoration: none; white-space: nowrap; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); } .series-switcher__item.is-current { background: var(--color-ink); color: var(--color-accent-ink); } .series-switcher__item:active { transform: scale(0.97); } @media (hover: hover) and (pointer: fine) { .series-switcher a:hover { background: var(--color-paper-2); color: var(--color-accent-dark); transform: translateY(-1px); } } @media (max-width: 39.99rem) { .series-switcher { inset-block-start: auto; inset-block-end: max(var(--space-sm), env(safe-area-inset-bottom)); inset-inline-start: 50%; translate: -50% 0; } } /* ---------- 液态玻璃增强 ---------- */ /* 玻璃上的文字按 vibrancy 原则加重一档，避免半透明表面上灰字发糊 */ .series-switcher__item { font-weight: 500; color: var(--color-ink-2); } .series-switcher__item.is-current { color: var(--color-accent-ink); } /* materialize 入场：模糊与尺度一起凝结成形，而非平面淡入 */ @media (prefers-reduced-motion: no-preference) { .series-switcher { animation: glass-in 420ms var(--ease-out) backwards; } @keyframes glass-in { from { opacity: 0; scale: 0.92; filter: blur(6px); } } } /* Chromium：SVG 位移折射（页内 #liquid-glass 滤镜，内含模糊与饱和）， 由 的特性检测开启；其余浏览器停留在上面的磨砂层 */ .has-liquid .series-switcher { backdrop-filter: url(#liquid-glass); } .has-liquid .series-switcher:active { backdrop-filter: url(#liquid-glass-press); } /* 兜底：减弱透明度 / 高对比模式退回实底 */ @media (prefers-reduced-transparency: reduce) { .series-switcher, .has-liquid .series-switcher { background: var(--color-paper); backdrop-filter: none; -webkit-backdrop-filter: none; } } @media (prefers-contrast: more) { .series-switcher, .has-liquid .series-switcher { background: var(--color-paper); border-color: var(--color-ink); backdrop-filter: none; -webkit-backdrop-filter: none; } } /* 语言胶囊与系列胶囊同一玻璃材质 */ .language-switcher { background: color-mix(in oklch, var(--color-paper) 55%, transparent); border-color: color-mix(in oklch, var(--color-rule) 60%, transparent); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), inset 0 0 0 1px rgb(255 255 255 / 0.16), 0 0.5rem 1.5rem -0.5rem rgb(61 40 30 / 28%); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); } .language-switcher__item { font-weight: 500; color: var(--color-ink-2); } .language-switcher__item.is-current { color: var(--color-accent-ink); } @media (prefers-reduced-motion: no-preference) { .language-switcher { animation: glass-in 420ms var(--ease-out) backwards; } } .has-liquid .language-switcher { backdrop-filter: url(#liquid-glass); } @media (prefers-reduced-transparency: reduce) { .language-switcher, .has-liquid .language-switcher { background: var(--color-paper); backdrop-filter: none; -webkit-backdrop-filter: none; } } @media (prefers-contrast: more) { .language-switcher, .has-liquid .language-switcher { background: var(--color-paper); border-color: var(--color-ink); backdrop-filter: none; -webkit-backdrop-filter: none; } }