/* 视觉初版：视口固定的动态光晕 + 半透明毛玻璃，正文保持阅读对比度。 */ :root { --reading-paper: #fcfdff; --reading-ink: #366d9d; --reading-line: #6193bc59; --glass: #ffffff70; --glass-border: #ffffffa6; --glass-shadow: inset 0 1px 0 #ffffffa6, 0 18px 50px -26px #315a8259; --glow-blue: #95bcdc; --glow-mist: #acd0d0; --glow-lilac: #b6bddb; } [data-theme="dark"] { --reading-paper: #101b28; --reading-ink: #a4ccee; --reading-line: #78a6cb4d; --glass: #14233499; --glass-border: #b5d4f126; --glass-shadow: inset 0 1px 0 #d8ebff14, 0 18px 50px -26px #0009; --glow-blue: #284d70; --glow-mist: #2b535b; --glow-lilac: #424c6a; } body { isolation: isolate; } .ambient-sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: linear-gradient(135deg, color-mix(in srgb, var(--glow-blue) 9%, var(--bg)), var(--bg) 52%, color-mix(in srgb, var(--glow-mist) 8%, var(--bg))); opacity: 0; } body:has(.land-next) .ambient-sky { opacity: 1; } body:not(:has(.land-next)) .ambient-glow, body:not(:has(.land-next)) .ambient-glow::before { animation-play-state: paused; } /* 2026-09-28：已确认的融合光雾，宽渐变相接，中央留白，动画仅改变 transform / opacity。 */ .ambient-glow { position: absolute; display: block; will-change: transform; inset: -22%; width: auto; height: auto; border-radius: 0; } .ambient-glow::before { content: ""; position: absolute; inset: 0; border-radius: 0; background: radial-gradient(ellipse var(--field-size) at var(--field-origin), color-mix(in srgb, var(--glow-color) 85%, transparent) 0%, color-mix(in srgb, var(--glow-color) 48%, transparent) 35%, color-mix(in srgb, var(--glow-color) 16%, transparent) 58%, transparent 80%); opacity: .7; animation: mistBreathe 9s ease-in-out infinite alternate; } .glow-blue { --glow-color: var(--glow-blue); --field-size: 68% 76%; --field-origin: 9% 30%; animation: mistFlowBlue 13s ease-in-out infinite alternate; } .glow-mist { --glow-color: var(--glow-mist); --field-size: 65% 72%; --field-origin: 96% 12%; animation: mistFlowTeal 16s ease-in-out -5s infinite alternate; } .glow-lilac { --glow-color: var(--glow-lilac); --field-size: 72% 48%; --field-origin: 38% 102%; animation: mistFlowLilac 18s ease-in-out -8s infinite alternate; } .glow-mist::before { animation-delay: -3s; } .glow-lilac::before { animation-delay: -6s; opacity: .48; animation-name: mistBreatheLow; } /* A broad central veil keeps the reading area airy, without cutting holes between colours. */ .ambient-sky::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 52% 68% at 53% 43%, color-mix(in srgb, var(--bg) 42%, transparent), transparent 100%); } @keyframes mistFlowBlue { to { transform: translate(7vw, 5vh) rotate(-5deg); } } @keyframes mistFlowTeal { to { transform: translate(-6vw, 7vh) rotate(5deg); } } @keyframes mistFlowLilac { to { transform: translate(5vw, -6vh) rotate(-4deg); } } @keyframes mistBreathe { to { opacity: .82; transform: scale(1.025); } } @keyframes mistBreatheLow { to { opacity: .59; transform: scale(1.025); } } @media(max-width:560px) { .glow-blue { --field-size: 82% 64%; --field-origin: 0% 20%; } .glow-mist { --field-size: 78% 65%; --field-origin: 105% 26%; } .glow-lilac { --field-size: 86% 50%; --field-origin: 18% 100%; } } /* 老浏览器不懂 svh（第二条会整条作废，留下上面那条 vh 的）—— 与 style.css 末尾的 @supports 是一对：这里只求"有个正确的高度"，不追求地址栏不跳。 */ .land-next { min-height: calc(100vh - var(--navh, 64px)); min-height: calc(100svh - var(--navh, 64px)); } .land-card, .reading-shell .main, .card, .demo-switch { background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(22px) saturate(135%); backdrop-filter: blur(22px) saturate(135%); } .land-card:hover { background: color-mix(in srgb, var(--glass) 85%, var(--surface)); border-color: var(--glass-border); } .land-card-icon { width: 44px; height: 44px; } .reading-shell { max-width: 1160px; gap: 40px; } .reading-shell .main { margin: 40px 0 64px; padding: 0; border-radius: 20px; } .reading-heading { position: relative; isolation: isolate; overflow: hidden; padding: 34px 44px 32px; border-radius: 19px 19px 0 0; background: linear-gradient(120deg, transparent, color-mix(in srgb, var(--glass) 35%, transparent)); border-bottom: 1px solid var(--border); } .reading-art { position: absolute; pointer-events: none; z-index: -1; width: 400px; height: 240px; right: -48px; top: -20px; color: var(--reading-line); stroke: currentColor; stroke-width: 1; mask-image: linear-gradient(90deg, transparent, #000 48%); } .reading-orb { fill: none; stroke: none; } .reading-pin { fill: var(--reading-ink); stroke: var(--reading-paper); stroke-width: 3; } .reading-kicker { display: flex; align-items: center; gap: 14px; margin: 0 0 28px; font-size: 11px; font-weight: 550; letter-spacing: .06em; color: var(--reading-ink); } .reading-kicker a { white-space: nowrap; color: var(--text-2); letter-spacing: 0; } .reading-kicker a:hover { color: var(--link); text-decoration: underline; text-underline-offset: 4px; } .reading-rule { flex: 1; min-width: 12px; border-top: 1px dotted var(--reading-line); } .reading-heading .page-title { font-size: clamp(28px, 3vw, 38px); line-height: 1.4; letter-spacing: -.035em; margin: 0 0 16px; overflow-wrap: anywhere; } /* 标题后面没有说明小字时，标题就是 header 的最后一个子元素 —— 那 16px 的下边距是 用来和说明拉开距离的，没有说明就不该留（否则和 header 自己的 32px 下内边距叠成双份）。 */ .reading-heading .page-title:last-child { margin-bottom: 0; } .reading-heading .page-desc { margin: 0; font-size: 13px; line-height: 1.9; } .reading-heading .page-desc a { display: inline-block; margin: 3px 0; padding: 3px 10px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 6px; text-decoration: none; color: var(--link); } .reading-heading .page-desc a:hover { background: var(--hover); border-color: var(--reading-ink); } .reading-body { padding: 32px 44px 56px; } .reading-body .prose { max-width: 680px; } .reading-body .prose h2 { border-bottom: 0; margin: 44px 0 16px; padding: 0; font-size: 22px; letter-spacing: -.015em; } .reading-body .prose h2::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: 16px; background: var(--reading-ink); opacity: .5; border-radius: 3px; } .reading-body .prose blockquote { margin: 0 0 24px; padding: 14px 18px; background: var(--hover); border-left: 3px solid var(--reading-ink); border-radius: 0 10px 10px 0; } .reading-body .prose pre { padding: 18px 20px; border: 1px solid var(--border); background: var(--hover); border-radius: 10px; } .reading-body .prose hr { width: 48px; margin: 40px auto; border-color: var(--reading-line); } .reading-body .stage { margin-bottom: 36px; } .reading-body .stage-head { gap: 10px; margin-bottom: 12px; padding: 0; border: 0; } .reading-body .stage-head::after { content: ""; flex: 1; height: 1px; margin-left: 4px; background: var(--border); } .reading-body .stage-dot { width: 6px; height: 18px; border-radius: 4px; } .reading-body .stage-name { font-size: 14px; letter-spacing: .025em; } .reading-body .stage-count { padding: 0 7px; min-width: 24px; text-align: center; border: 1px solid var(--border); border-radius: 7px; font: 11px/21px var(--mono); } .reading-body .entries { display: grid; gap: 9px; } .reading-body .entry { position: relative; display: block; padding: 18px 20px; border: 1px solid var(--glass-border); border-radius: 13px; background: color-mix(in srgb, var(--glass) 48%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--glass-border) 45%, transparent); transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease), background 220ms var(--ease); } /* 悬停的"抬起来"对**所有**条目生效（2026-09-25 用户要求）： 不可展开的条目以前完全没有 hover，整行像"死的"。现在只把**小三角与标题右移** 留给可展开的 —— 那两个是"这里能点开"的承诺，不可展开的条目不该承诺。 光标仍是默认箭头（`.is-expandable` 才给 pointer），因为不可展开的确实点不开。 */ @media (hover: hover) and (pointer: fine) { .reading-body .entry:where(:not(.is-floating)):hover { transform: translateY(-2px) scale(1.006); border-color: color-mix(in srgb, var(--reading-ink) 42%, var(--glass-border)); background: color-mix(in srgb, var(--glass) 78%, transparent); box-shadow: inset 0 1px 0 var(--glass-border), 0 12px 26px -18px color-mix(in srgb, var(--reading-ink) 65%, transparent); } /* 三角现身时标题**不再靠 transform 让位**（R47, 2026-10-13）： 那 14px 现在是 .t 的 padding-left（见下面 §标题为三角让出的那条）， 静止态用 translateX(-14px) 拉回原位。于是"把 transform 压掉"的任何分支 （触摸屏 @media、减少动态效果、将来新加的）都只会落到**已经让开**的布局位， 不会出现"三角淡入、文字没动、两者叠在一起"。 */ .reading-body .entry.is-expandable:hover .entry-title > .t { transform: none; } .reading-body .entry.is-expandable:hover .entry-disclosure { opacity: 1; transform: translateX(0); } } /* **带触摸屏的设备：状态反馈留着，位移不要**（2026-09-30，小米 pad 实测「指到哪哪就消失」）。 指针每动一下，hover 的 `transform` 就把卡片推进一个新的合成层；这类设备（GPU 瓦片内存紧张、 还叠着大面毛玻璃与光雾）会整块画不出来。边框/底色/阴影的悬停反馈保留 —— 那是"能点"的提示， 位移只是装饰。选择器与上面那条同特异度，靠**写在后面**取胜。 R47（2026-10-13）：这段把标题的位移也压掉了 —— 而 `(any-pointer: coarse)` 在**带触摸屏的 笔记本**上同样命中，于是"三角淡入、标题不让位"就会叠字。现在让位走的是布局（padding-left）， 这里的 `transform: none` 恰好等于"已经让开"的那一位，所以压掉位移只会更安全。 R52（2026-10-15）：条件收窄为 `(pointer: coarse)` —— 主要输入是鼠标的设备（哪怕带触摸屏）恢复原有上浮， 只有"主输入=触摸"的设备才继续压掉位移；`(hover: none)` 一支不变。 */ @media (pointer: coarse), (hover: none) { .reading-body .entry:where(:not(.is-floating)):hover { transform: none; } .reading-body .entry.is-expandable:hover .entry-title > .t { transform: none; } .reading-body .entry.is-expandable:hover .entry-disclosure { transform: none; } } .entry-disclosure { position: absolute; left: 0; top: .45em; width: 9px; height: 12px; color: var(--reading-ink); pointer-events: none; opacity: 0; transform: translateX(-5px); transition: opacity 240ms cubic-bezier(.22, 1, .36, 1), transform 320ms cubic-bezier(.22, 1, .36, 1); } .entry-disclosure svg { display: block; width: 100%; height: 100%; } .reading-body .entry:focus-within { border-color: color-mix(in srgb, var(--reading-ink) 55%, var(--glass-border)); background: color-mix(in srgb, var(--glass) 78%, transparent); } .reading-body .entry.is-expandable:focus-within .entry-title > .t { transform: none; } .reading-body .entry.is-expandable:focus-within .entry-disclosure { opacity: 1; transform: translateX(0); } @media (prefers-reduced-motion: reduce) { html:not([data-motion-preview="full"]) .reading-body .entry { transition: none; } html:not([data-motion-preview="full"]) .reading-body .entry.is-expandable:where(:not(.is-floating)):hover { transform: none; } /* 不可展开的条目现在也有 hover 抬升，同样要在"减少动态效果"下压掉。 单独写一条、**不合并进上面那条** —— 上面那条的特异度是专门用来压过 `.entry.is-floating` 的中心锚的（见下面 §浮起那段注释），动它会出 bug。 不可展开的条目永远不会 floating，所以这条不需要那个考量。 */ html:not([data-motion-preview="full"]) .reading-body .entry:not(.is-expandable):where(:not(.is-floating)):hover { transform: none; } html:not([data-motion-preview="full"]) .reading-body .entry .entry-title > .t, html:not([data-motion-preview="full"]) .entry-disclosure { transition: none; } /* Local explicit motion review also overrides the global reduced-motion duration. */ html[data-motion-preview="full"] .reading-body .entry { transition-duration: 220ms !important; } html[data-motion-preview="full"] .reading-body .entry-title > .t { transition-duration: 320ms !important; } html[data-motion-preview="full"] .entry-disclosure { transition-duration: 240ms, 320ms !important; } } .reading-body .entry-dot { display: none; } .reading-body .entry-body { width: 100%; } .reading-body .entry-title { position: relative; gap: 12px; font-size: 16px; line-height: 1.65; letter-spacing: -.015em; } .reading-body .entry-title > .t { overflow-wrap: anywhere; transition: transform 320ms cubic-bezier(.22, 1, .36, 1); } /* R47（2026-10-13）：标题为小三角让出的那 14px 走**布局**（padding-left），不是 transform。 三角的盒子是 left:0 / 宽 9px 的绝对定位块（相对 .entry-title 的 padding box），标题内容从 14px 起 —— 两者永远留 5px 净空，任何状态（hover / focus-within / is-open / 触摸屏分支 / 减少动态效果）都一样。静止态用 translateX(-14px) 把整块拉回原位，所以不出现三角时的版面 和以前逐像素一致；让位的动画仍由 .t 上的 transform 过渡承担（320ms），只是把"目标值"从 +14 挪到了 0（后者恰好也是触摸屏分支压掉位移后的落点）。 margin-right 原本留的 14px 也并到 padding 里（max-width 同步放到 100%），所以 .t 的**外框总量 和内容可用宽度都没变** —— 右边的日期、引导线不会被推走；静止态 translateX(-14px) 把整块拉回 原位，所以没有三角时的版面和以前逐像素一致。 */ .reading-body .entry.is-expandable .entry-title > .t { margin-right: 0; max-width: 100%; padding-left: 14px; transform: translateX(-14px); } .reading-body .entry-title > .ld-fill { opacity: .55; min-width: 20px; } .reading-body .entry-title > .ld-date { font-size: 11px; letter-spacing: 0; } .reading-body .entry-sum { margin-top: 6px; font-size: 13px; line-height: 1.85; overflow-wrap: anywhere; } .reading-body .entry .entry-meta { margin-top: 12px; } .reading-body .entry-project { display: inline-flex; align-items: center; gap: 12px; color: var(--link); text-decoration: none; font-size: 12px; } .reading-body .entry-project:hover { text-decoration: underline; text-underline-offset: 4px; } .reading-body .entry-project:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; border-radius: 3px; } .reading-body .entry-pending { font-size: 11px; } .reading-body .archive-month { margin-bottom: 12px; } @media (max-width: 600px) { .reading-body .entry { padding: 15px 14px; border-radius: 11px; } .reading-body .entry-title { flex-wrap: wrap; gap: 4px 10px; font-size: 15px; } .reading-body .entry-title > .t { flex: 1 1 100%; } .reading-body .entry-title > .ld-fill { display: none; } /* 日期原来在这档压到 10px（桌面 11px）—— 手机上反而更小，2026-09-30 抬回 12px； 同页的阶段计数也从 11px 抬到 12px（两者都是"一眼扫过去"的元信息）。 */ .reading-body .entry-title > .ld-date { font-size: 12px; } .reading-body .stage-count { font-size: 12px; } .reading-body .entry-sum { margin-top: 8px; } } .reading-body .entry-meta { font-size: 12px; } .reading-body > :last-child { margin-bottom: 0; } .reading-shell .side-link[aria-current="page"] { color: var(--reading-ink); } @media (min-width: 941px) { .reading-shell .side { padding-top: 46px; } .reading-shell .side-label { letter-spacing: .1em; } .reading-shell .side-row.is-active:not(.side-group-row) { box-shadow: inset 2px 0 var(--reading-ink); } } @media (max-width: 940px) { .reading-shell { max-width: 800px; } .reading-shell .main { margin: 28px 0 48px; } .js .side, .js .directory-toggle { background: var(--glass); color: var(--text); border-color: var(--glass-border); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(28px) saturate(140%); backdrop-filter: blur(28px) saturate(140%); } /* 抽屉模式下头部是**透明**的（不粘顶），所以那层 backdrop-filter 也必须一起撤： 留着它＝在抽屉自己的 blur(28px) 上再叠一层 blur(16px) saturate(140%)， 那 65px 高的一条会比抽屉主体明显更白更灰、还带一条硬边（2026-09-30 用户在手机上 看到的「悬浮目录标题条颜色诡异」就是这个）。 */ .js .directory-heading { background: transparent; position: static; -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (max-width: 600px) { .reading-shell { padding: 0 12px; gap: 0; } .reading-shell .main { margin: 16px 0 36px; border-radius: 16px; } .reading-heading { padding: 24px 22px 26px; border-radius: 15px 15px 0 0; } /* 面包屑原来在这档压到 10px（桌面是 11px）—— 手机上反而更小，读不动；2026-09-30 抬回 11px。 */ .reading-kicker { margin-bottom: 24px; gap: 8px; font-size: 11px; letter-spacing: .02em; } .reading-heading .page-title { font-size: 28px; } .reading-heading .page-desc { font-size: 12px; } .reading-art { right: -120px; opacity: .8; } .reading-body { padding: 26px 22px 40px; } .reading-body .prose h2 { font-size: 20px; margin-top: 36px; } .reading-body .prose pre { padding: 16px; } .land-card-icon { width: 34px; height: 34px; } } /* 账号管理：独立于文章排版，沿用玻璃与冷色线条。 */ .reading-shell:has(.account-dashboard) .reading-body { padding: 28px 32px 40px; } .reading-shell:has(.account-dashboard) .reading-heading { padding: 30px 32px; } .account-dashboard { display: grid; gap: 32px; } .account-dashboard h2 { margin: 0; font-size: 19px; line-height: 1.5; letter-spacing: -.02em; } .account-dashboard h2::before { display: none; } .account-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .account-section-head p { margin: 7px 0 0; color: var(--text-3); font-size: 12px; line-height: 1.6; } .account-eyebrow { display: block; margin-bottom: 6px; color: var(--reading-ink); font-size: 10px; letter-spacing: .14em; font-weight: 600; } .account-section-icon { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border: 1px solid var(--glass-border); border-radius: 14px; color: var(--reading-ink); background: var(--glass); } .account-section-icon svg { width: 25px; height: 25px; } .account-create { padding: 24px; border-radius: 16px; border: 1px solid var(--glass-border); background: var(--glass); box-shadow: var(--glass-shadow); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); } .account-create-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 124px auto; gap: 14px; align-items: end; } .account-create-form .field { min-width: 0; margin: 0; } .account-create-form label { font-size: 13px; } /* 表单控件统一尺度（2026-09-29）：44px 高 / 14px 字 —— 用户报「对齐不齐、高度不统一」。 原来这里是 42px + 按钮另写 13px，而 .input 自然高是 45px，配上 align-items:end 就出现"底边齐、顶边差 3px"，正是图一那一行。 */ .account-create-form .input, .account-create-form .btn { min-height: 44px; font-size: 14px; } .account-create-form .btn { justify-content: center; } .account-count { display: inline-grid; place-items: center; min-width: 25px; height: 25px; padding: 0 7px; margin-left: 6px; border: 1px solid var(--border); border-radius: 8px; font: 12px var(--mono); color: var(--text-2); vertical-align: 2px; } .account-dashboard .mg-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .account-dashboard .mg-item { margin: 0; min-width: 0; border: 1px solid var(--glass-border); border-radius: 12px; background: var(--glass); box-shadow: inset 0 1px 0 var(--glass-border); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .account-dashboard .mg-item > details > summary { padding: 17px 18px; border-radius: 12px; transition: background 160ms ease; } .account-dashboard .mg-item > details > summary:hover { background: var(--hover); } .account-dashboard .mg-item > details[open] > summary { border-bottom: 1px solid var(--border); border-radius: 12px 12px 0 0; } .account-dashboard .mg-row { gap: 10px; align-items: center; } .account-dashboard .mg-note { color: var(--text); font-weight: 550; } .account-dashboard .mg-code { color: var(--reading-ink); font-size: 12px; padding: 3px 7px; background: var(--hover); border-radius: 5px; } .mg-person { display: flex; align-items: center; gap: 10px; min-width: 0; } .mg-avatar { flex: 0 0 30px; display: grid; place-items: center; height: 30px; border-radius: 10px; color: var(--reading-ink); background: var(--hover); font: 500 13px var(--mono); } .mg-role { font-size: 11px; color: var(--text-3); } .account-dashboard .mg-state { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 20px; font-size: 11px; background: color-mix(in srgb, currentColor 7%, transparent); white-space: nowrap; } .account-dashboard .mg-state::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; } .account-dashboard .mg-sub { margin-top: 8px; font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; } .account-dashboard .mg-open { display: flex; align-items: center; gap: 7px; font-size: 11px; } .account-dashboard .mg-open::after { content: ""; width: 5px; height: 5px; border-right: 1px solid; border-bottom: 1px solid; transform: rotate(45deg); transition: transform 160ms ease; } .account-dashboard details[open] .mg-open::after { transform: rotate(225deg); } .account-dashboard .mg-body { padding: 18px; gap: 12px; flex-direction: row; flex-wrap: wrap; } .account-dashboard .mg-form { gap: 12px; flex-basis: 100%; } .account-dashboard .mg-form:has(input[type="password"]) { align-items: flex-start; } .account-dashboard .mg-form:has(input[type="password"]) > .btn { margin-top: 26px; } .account-dashboard .mg-note-line { flex-basis: 100%; } .account-dashboard .mg-fields { flex: 1; min-width: 0; gap: 12px; } .account-dashboard .mg-f { flex: 1; min-width: 130px; gap: 6px; color: var(--text-2); } .account-dashboard .mg-f .input { width: 100%; min-width: 0; background: var(--glass); } .account-dashboard .mg-form:has(.mg-danger) { border-top: 1px solid var(--border); padding-top: 16px; } .account-empty { padding: 24px; text-align: center; border: 1px dashed var(--border-strong); border-radius: 12px; color: var(--text-3); } .account-empty > span { font-size: 24px; color: var(--reading-ink); } .account-empty p { margin: 6px 0; color: var(--text-2); font-size: 14px; } .account-empty small { font-size: 12px; } .reading-shell:has(.account-dashboard) .auth-alert { max-width: none; } .reading-shell:has(.account-dashboard) .auth-code { max-width: none; background: var(--glass); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border-color: var(--glass-border); box-shadow: var(--glass-shadow); } @media (max-width: 1100px) { .account-create-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .account-create-form > .field:nth-of-type(3) { grid-column: 1 / -1; } .account-create-form > .btn { grid-column: 1 / -1; } } @media (max-width: 600px) { .reading-shell:has(.account-dashboard) .reading-heading { padding: 24px 20px; } .reading-shell:has(.account-dashboard) .reading-body { padding: 22px 14px 28px; } .account-create { padding: 18px; } .account-create-form { grid-template-columns: minmax(0, 1fr); gap: 14px; } .account-section-head { gap: 12px; } .account-section-head > p { max-width: 90px; text-align: right; font-size: 11px; } .account-dashboard .mg-item > details > summary, .account-dashboard .mg-body { padding: 14px; } .account-dashboard .mg-row { gap: 8px; } .mg-person { flex: 1; } /* 结构钩子由 PHP 给（见 auth.php 的 mg-row-person），**不用 `:has()`** —— 不支持 `:has()` 的浏览器里 `:has()` 规则整条失效，用户名会被挤成一列单字。 */ .account-dashboard .mg-row-person { display: grid; grid-template-columns: 1fr auto auto; } .account-dashboard .mg-row-person .mg-person { grid-column: 1 / -1; } .account-dashboard .mg-row-person .mg-tags { grid-column: 1 / -1; } .account-dashboard .mg-open { margin-left: auto; } .account-dashboard .mg-state { margin-left: 0; } .account-dashboard .mg-fields { flex-basis: 100%; } .account-dashboard .mg-form:has(input[type="password"]) > .btn { margin-top: 0; } /* 手机上的小字（2026-09-30）：基础规则把账号仪表盘的元信息压到 10–11px （桌面那版是 `.mg-state/.mg-open/.mg-sub` 的 12.5px，被这里的 `.account-dashboard` 前缀压掉了）。 手机离眼更近也更晃，10px 读不动 —— 窄屏统一抬到 11/12px。 */ .account-dashboard .account-eyebrow { font-size: 11px; } .account-dashboard .mg-state, .account-dashboard .mg-sub, .account-dashboard .mg-open, .account-dashboard .mg-role, .account-dashboard .mg-tag { font-size: 12px; } } @media (prefers-reduced-motion: reduce) { html:not([data-motion-preview]) .ambient-glow, html:not([data-motion-preview]) .ambient-glow::before { animation: none; will-change: auto; } } @media (max-width: 360px) { .land-card { padding: 10px 6px; gap: 8px; } .land-card-icon { width: 30px; height: 30px; } /* `.land-card-t` 原来在这档压到 10.5px；2026-09-30 起不再压，继承上面 ≤720px 的 12px。 */ } @supports not (backdrop-filter: blur(1px)) { .land-card, .reading-shell .main, .card, .demo-switch, .js .side, .js .directory-toggle, .account-create, .account-dashboard .mg-item, .reading-shell:has(.account-dashboard) .auth-code { background: color-mix(in srgb, var(--surface) 92%, transparent); } } /* ============================================================== 条目时间线 2026-09-24：点条目卡片 → 卡片**完全浮起来**：脱离页面流、固定定位、 **不受页面滚动影响**，纵向展开「变更时间线」；背景加深 + 模糊。 列表原位留一个等高占位，所以列表几何不跳。 动画只动 top/left/width、grid-template-rows 与 opacity。 ------------------------------------------------------------------------- */ /* 整块可点的透明按钮：键盘可达 + 带 aria 状态，且不挡「查看成品」链接（那个在 .entry-head 外面） */ .reading-body .entry-head { position: relative; } .reading-body .entry.is-expandable { cursor: pointer; } .reading-body .entry-toggle { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; } .reading-body .entry-toggle:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; border-radius: 10px; } .reading-body .entry-head > *:not(.entry-toggle) { position: relative; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* 浮起来时列表原位的占位：只占高度，不画任何东西（由 JS 插入） */ .reading-body .entry-placeholder { margin: 0; padding: 0; border: 0; background: none; } /* ============================================== 教程页侧栏 = 这篇文章的目录 2026-09-24：进教程时侧栏整块换成文章结构（## 大章 / ### 小节 / #### 更细）。 行、缩进、折叠全部复用 .side-* 那套（单一事实来源），这里只加"头"和"尾"。 */ /* 顶部这一行 = 侧栏里 Tutorials 那一行的**同款**（同结构、同 side_chev() 箭头、文字就是 Tutorials）。 只两处不同：箭头转成指向左（这是"返回"），以及它不是开关所以不要手型光标。 */ .side-outline .outline-back-row { margin-bottom: 10px; } .side-outline .outline-back-chev { cursor: default; } .side-outline .outline-back-chev .side-chev { transform: rotate(90deg); } .side-outline .outline-title { margin: 0 0 10px; font-size: 13px; font-weight: 600; line-height: 1.55; color: var(--text); overflow-wrap: anywhere; } .side-outline .outline-ai { margin: 14px 10px 0; padding-top: 12px; border-top: 1px solid var(--border); } /* 目录里**没有箭头的裸链接**要补上和箭头槽等宽的空白（槽 20 + 行内间距 2 + 行内边距 6 = 28px）。 不补的话："有子项的行"文字被箭头推右，"没子项的行"是裸链接、顶在最左边 —— 同一级参差不齐，甚至子级比父级文字还靠左。 **只作用于 .side-sub / .side-sub2 下 li 的直接子链接**：行内的链接（`.side-row .side-link`） 自己已经有 padding-left: 0 把它抵消了，别再盖回去。 */ .side-outline .side-sub > li > .side-link, .side-outline .side-sub2 > li > .side-link { padding-left: 28px; } .side-outline .side-link { text-decoration: none; } /* 背景：只轻轻压暗 + **轻微**模糊（20px 太糊了，看不清页面在哪）， 提饱和一点点保持通透；真正的毛玻璃材质放在卡片自己身上。 */ .entry-backdrop { position: fixed; inset: 0; z-index: 35; opacity: 0; pointer-events: none; background: rgba(9, 20, 34, .20); backdrop-filter: blur(9px) saturate(125%); -webkit-backdrop-filter: blur(9px) saturate(125%); transition: opacity 420ms var(--ease); } .entry-backdrop.is-on { opacity: 1; pointer-events: auto; } [data-theme="dark"] .entry-backdrop { background: rgba(2, 6, 12, .32); } /* 卡片浮起来分两个类，**故意拆开**： .is-floating 只管**几何**（脱离文档流 / 固定在视口 / 以中心为锚 / 位移过渡） .is-lifted 只管**材质**（圆角 / 发丝边 / 半透明底 / 大半径模糊 / 分层阴影） 为什么要拆：展开是"设状态 → 让 CSS 过渡跑完"，一次到位； 而收起最后必须把卡片从 fixed 交还给文档流，那是一次**状态翻转**， 翻转那一帧里凡是不在过渡列表里的属性都会硬切（跳跃、材质突变都出在这儿）。 拆开之后，收起可以**先撤材质**（顺着动画淡回列表态）、几何留到最后一帧再撤 —— 那时卡片已经和列表里的样子完全一致，翻转就看不出来了。逆向于是和正向对称。 */ .reading-body .entry.is-floating { position: fixed; z-index: 60; margin: 0; /* 「弹」：位移用带回弹的曲线，落点会明显过冲再收回 */ transition: top 620ms cubic-bezier(.26, 1.62, .44, 1), left 420ms var(--ease), width 420ms var(--ease), border-radius 420ms var(--ease), border-color 420ms var(--ease), background-color 420ms var(--ease), box-shadow 420ms var(--ease); } /* 材质走苹果那套：半透明表面 + 大半径背景模糊 + 提饱和 + 发丝边 + 分层阴影 + 更大圆角 */ .reading-body .entry.is-lifted { border-radius: 22px; border-color: color-mix(in srgb, #ffffff 62%, transparent); background: color-mix(in srgb, var(--surface) 72%, transparent); backdrop-filter: blur(34px) saturate(180%); -webkit-backdrop-filter: blur(34px) saturate(180%); box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 72%, transparent), 0 2px 6px -2px rgba(9, 20, 34, .16), 0 18px 40px -18px rgba(9, 20, 34, .34), 0 48px 96px -40px rgba(9, 20, 34, .46); } [data-theme="dark"] .reading-body .entry.is-lifted { border-color: color-mix(in srgb, #ffffff 16%, transparent); background: color-mix(in srgb, var(--surface) 74%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 12%, transparent), 0 2px 6px -2px rgba(0, 0, 0, .40), 0 18px 40px -18px rgba(0, 0, 0, .55), 0 48px 96px -40px rgba(0, 0, 0, .60); } /* 浮起时的中心锚。**特异度必须压过 reading.css:132 那条**： html:not([data-motion-preview="full"]) .reading-body .entry.is-expandable:where(:not(.is-floating)):hover { transform: none } 它是 (0,4,1)，比 `.reading-body .entry.is-floating:hover` 的 (0,4,0) 高 —— 开着「减少动态效果」的机器上，指针一停到卡片上就会把 translateY(-50%) 抹掉， 卡片当场往下掉半张卡高（实测 top 187.8 → 387，正好 h/2 = 199）。 这里用 `html body` 前缀把特异度提到 (0,4,2)，hover 与非 hover 都钉住。 */ html body .reading-body .entry.is-floating, html body .reading-body .entry.is-floating:hover { transform: translateY(-50%); } /* 落回列表的那一帧：**只让几何瞬时，材质照常过渡**。 几何必须瞬时：`top/left/width` 正在被清空，而 `transform` 的 `translateY(-50%) → none` 若被 `.entry` 自带的 `transition: transform 220ms` 接住，卡片会向上跳半张卡高再滑回来 （实测跳 47px，正是 h/2）。 但材质**不能**一起冻住 —— 原来这里写的是 `transition: none !important`， 于是阴影 / 底色 / 边框 / 圆角在那一帧"啪"地一变（大投影→列表投影、 半透明白→--glass 48%、22px 圆角→13px），看着就是最后那一下不自然的跳变。 所以这里只声明材质那几个属性，几何天然不在列表里。 */ .reading-body .entry.is-settling { transition-property: box-shadow, border-color, background-color, border-radius !important; transition-duration: 260ms !important; transition-timing-function: var(--ease) !important; } /* 滚动锁定**不能**用 html/body 的 `overflow: hidden`： 根元素的 overflow 会**传播到视口**，`position: sticky` 的顶栏立刻失效 —— 实测展开后 `.land` 的 top 从 0 变成 -315.2（正好等于当时的 scrollY），上栏被挤出屏幕。 所以改成在 JS 里用非 passive 的 wheel 监听挡掉页面滚动（卡片自己的滚动区照常）。 下面这条只管层级：顶栏要在背景层 35 之上、卡片 60 之下。 */ html.entry-float-open .land { z-index: 45; } /* 三角形（和标题为它让出的那 14px）挂 **is-open**，不是 is-floating。 is-floating 要留到收起最后一帧才摘，挂它上面的话三角形会一直撑到收起结束才"啪"地消失； 挂 is-open 则在收起一开始就跟着往回退，和收起同步。 R47（2026-10-13）：让位已是 .t 的 padding-left，这里回到布局位（transform: none）即可， 与 hover / focus-within 同一个目标值，来回切换不会再出现"一半让位"的中间态。 */ .reading-body .entry.is-expandable.is-open .entry-disclosure { opacity: 1; transform: translateX(0) rotate(90deg); } .reading-body .entry.is-open .entry-title > .t { transform: none; } /* .main 自带 backdrop-filter（blur 22px），那会让它既是**层叠上下文**、 又是**固定定位的包含块** —— 卡片会被关在里面、压在背景层之下，也浮不出页面。 浮起来期间把这一层摘掉；背景该有的模糊交给 .entry-backdrop 自己负责。 */ body:has(.entry.is-floating) .reading-shell .main { backdrop-filter: none; -webkit-backdrop-filter: none; } /* 展开机制：grid 轨道 0fr → 1fr，纯 CSS，不需要 JS 量高度。 曲线带一点回弹 —— 轨道会短暂超过内容高度再收回，读起来就是「弹」一下。 */ .reading-body .entry-timeline { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 620ms cubic-bezier(.28, 1.58, .48, 1), opacity 340ms var(--ease); } .reading-body .entry.is-open .entry-timeline { grid-template-rows: 1fr; opacity: 1; } .reading-body .entry-timeline-in { min-height: 0; overflow: hidden; } /* 时间线比屏幕高时**滚的是它自己**：overscroll-behavior 挡住滚动链，不让它带着页面动。 max-height 同时用 vh 和「视口高 - 卡头高度」取小值，保证整张卡连上下留白都放得下。 */ .reading-body .entry.is-floating .entry-timeline-in { max-height: min(52vh, calc(100vh - 200px)); overflow-y: auto; overscroll-behavior: contain; } /* 短视口（手机带地址栏时就是这个高度档）：整张卡夹进「上栏以下」的可用区，自己滚。 与 layout.php 里 openEntry() 把锚点放到可用区正中是一对 —— 只改一边都不够： 光挪锚点，卡比可用区还高时照样顶出去；光夹高度，锚点还在整屏正中时上下留白不均。 */ @media (max-height: 760px) { .reading-body .entry.is-floating { max-height: calc(100vh - var(--navh, 64px) - 24px); max-height: calc(100svh - var(--navh, 64px) - 24px); overflow-y: auto; overscroll-behavior: contain; } /* 卡自己滚了，时间线就不必再套一层滚动 */ .reading-body .entry.is-floating .entry-timeline-in { max-height: none; } } .reading-body .entry.is-open .entry-timeline-panel { margin-top: 14px; padding-top: 13px; border-top: 1px solid color-mix(in srgb, var(--reading-line) 85%, transparent); } /* 时间线逐条错开淡入（苹果那种"内容跟着容器一起落位"的感觉）。 只动 opacity / transform，不改布局几何。 */ @keyframes tlItemIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .reading-body .entry.is-open .tl-item { animation: tlItemIn 480ms cubic-bezier(.34, 1.30, .50, 1) both; } .reading-body .entry.is-open .tl-item:nth-child(1) { animation-delay: 80ms; } .reading-body .entry.is-open .tl-item:nth-child(2) { animation-delay: 135ms; } .reading-body .entry.is-open .tl-item:nth-child(3) { animation-delay: 190ms; } .reading-body .entry.is-open .tl-item:nth-child(4) { animation-delay: 245ms; } .reading-body .entry.is-open .tl-item:nth-child(5) { animation-delay: 300ms; } .reading-body .entry.is-open .tl-item:nth-child(n+6) { animation-delay: 350ms; } /* 时间线本体 */ .reading-body .tl-caption { display: flex; align-items: center; gap: 10px; margin: 0 0 13px; font-size: 11px; letter-spacing: .04em; color: var(--text-3); } .reading-body .tl-close { margin-left: auto; width: 26px; height: 26px; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font: 15px/1 var(--mono); color: var(--text-2); background: color-mix(in srgb, var(--surface) 55%, transparent); border: 1px solid color-mix(in srgb, var(--text-3) 22%, transparent); border-radius: 50%; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 240ms cubic-bezier(.34, 1.40, .50, 1), color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .reading-body .tl-close:hover { color: var(--text); transform: scale(1.09); border-color: color-mix(in srgb, var(--reading-ink) 45%, transparent); } .reading-body .tl-close:active { transform: scale(.93); } /* 左内边距是给"当前"节点的高亮环让位：那个环是向外 4px 的 box-shadow， 而外层 .entry-timeline-in 是 overflow:hidden（收起时要裁切），贴着左边就会被切掉。 */ .reading-body .entry-tl { list-style: none; margin: 0; padding: 0 0 0 6px; } .reading-body .tl-item { position: relative; padding: 0 0 17px 24px; } .reading-body .tl-item:last-child { padding-bottom: 0; } .reading-body .tl-item::before { content: ""; position: absolute; left: 5px; top: 17px; bottom: -2px; width: 1px; background: var(--reading-line); } .reading-body .tl-item:last-child::before { display: none; } .reading-body .tl-node { position: absolute; left: 0; top: 4px; box-sizing: border-box; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--reading-line); background: var(--bg); } .reading-body .tl-item.is-current .tl-node { border-color: var(--reading-ink); background: var(--reading-ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--reading-ink) 15%, transparent); } .reading-body .tl-head { display: flex; align-items: baseline; gap: 10px; } .reading-body .tl-stage { font-size: 11px; letter-spacing: .02em; color: var(--reading-ink); } .reading-body .tl-date { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; } .reading-body .tl-text { margin: 4px 0 0; font-size: 13px; line-height: 1.8; color: var(--text-2); overflow-wrap: anywhere; } .reading-body .tl-item.is-current .tl-text { color: var(--text); } /* ---------- Activities：独立成页的那条时间线（2026-09-30 新增） ---------- 复用上面条目展开那一套（`.entry-tl` / `.tl-item` / `.tl-node` / `.tl-date` / `.tl-text`）， **只加第二种颜色**：默认（空心节点 + 灰日期）＝ 已经过去；`is-planned`（结束日 ≥ 今天） ＝ 计划中，用 `--act-planned`（站主 2026-09-30 指定的那个蓝，见 style.css 里的注释 —— **不是** `--st-planned` 靛蓝，那个还管着 Progress 阶段语义与代码高亮）。 */ .reading-body .activity-tl { padding-left: 8px; } .reading-body .activity-tl .tl-item { padding-bottom: 20px; } .reading-body .activity-tl .tl-text { font-size: 13.5px; } .reading-body .activity-tl .tl-item.is-planned .tl-node { border-color: var(--act-planned); background: var(--act-planned); box-shadow: 0 0 0 4px color-mix(in srgb, var(--act-planned) 16%, transparent); } .reading-body .activity-tl .tl-item.is-planned .tl-date { color: var(--act-planned); font-weight: 600; } .reading-body .activity-tl .tl-item.is-planned .tl-text { color: var(--text); } .tl-flag { font-size: 10.5px; letter-spacing: .02em; padding: 1px 7px; border-radius: 999px; color: var(--act-planned); border: 1px solid color-mix(in srgb, var(--act-planned) 35%, transparent); background: color-mix(in srgb, var(--act-planned) 10%, transparent); } .activity-caption { margin: 0 0 18px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); font-weight: 600; } .activity-years { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; } .activity-year { font-size: 12.5px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-2); text-decoration: none; font-variant-numeric: tabular-nums; } .activity-year.is-current { border-color: var(--link); color: var(--link); font-weight: 600; background: color-mix(in srgb, var(--link) 8%, transparent); } a.activity-year:hover { border-color: var(--border-strong); color: var(--text); } .activity-empty { font-size: 13px; } @media (max-width: 600px) { .reading-body .tl-item { padding-left: 20px; } .reading-body .entry.is-floating .entry-timeline-in { max-height: 58vh; } } @media (prefers-reduced-motion: reduce) { html:not([data-motion-preview="full"]) .reading-body .entry-timeline, html:not([data-motion-preview="full"]) .entry-backdrop { transition: none; } /* style.css 那条全局规则只管 transition，**动画得自己关** */ html:not([data-motion-preview="full"]) .reading-body .entry.is-open .tl-item { animation: none; } /* 本机开着「减少动态效果」时，用项目自带的逃生口 data-motion-preview="full" 复看动画： style.css 有一条全局的 `transition-duration: 0s !important`，必须用更具体的 !important 顶掉。 */ html[data-motion-preview="full"] .reading-body .entry.is-floating { transition-duration: 620ms !important; } html[data-motion-preview="full"] .reading-body .entry-timeline { transition-duration: 620ms, 340ms !important; } html[data-motion-preview="full"] .entry-backdrop { transition-duration: 420ms !important; } html[data-motion-preview="full"] .reading-body .entry.is-open .tl-item { animation-duration: 480ms !important; } } @supports not (backdrop-filter: blur(1px)) { .entry-backdrop { background: rgba(9, 20, 34, .55); } } /* ---------- 窄屏：别让合成器一直忙（2026-09-30，用户报「手机会有轻微卡顿」） ---------- 实测（量测台的 perf 审计，412×727）改前： 进度页 10 个模糊面共 785,445 px² · 账号页 11 个共 1,177,702 px²； 9 个**无限循环**动画覆盖 4,136,209 px²（3 团环境光雾 + 3 个伪元素的"呼吸" + 3 条曲线摆动）； 9 个元素带 `will-change: transform`，合计 3,021,581 px² 的强制合成层。 `backdrop-filter` 是**逐帧**按"背后画了什么"重新采样的：背后一动，模糊就得重算。 窄屏收两处： ① **撤掉"背后本来就是一整片柔和渐变"那些面的模糊** —— 模糊一片平滑渐变，结果几乎一样， 却是整页面积的逐帧重算。单是 `main#main-content` 就占 285k~430k px²。 **背后有锐利内容的那几处保留**：目录抽屉、悬浮球、抽屉遮罩、条目浮层与它的遮罩 （它们背后是滚动的正文，模糊是看得见的）。 ② **光雾的漂移在窄屏停下**（颜色全留着，只是不流动）：背景一静止，保留下来的那几处模糊 就能被缓存，而不是每帧重算；顺带把那 3 个 `will-change` 强制层放掉。 曲线摆动（curveSway）只在主页可见，3 层纯 transform 合成，留着。 想恢复？把这一整块删掉即可 —— 它是**纯性能收口**，不动任何几何。 **2026-09-30 追加：条件从"窄屏"扩到"带触摸屏的设备"（小米 pad 实测）。** 用户朋友用小米 pad（Android，外接鼠标）访问，`/progress` 上**指到哪哪就消失**、 还留白块 —— 那是 GPU **瓦片内存被榨干**、整块瓦片画不出来（不是 hover 位移那种 2px 抖动）。 这台设备上叠着：① 三团"环境光雾"各 ~144% 视口面积，还都带 `will-change: transform`（≈3M px² 的 强制合成层）② 大面 `backdrop-filter` 逐帧重采样 ③ 指针每动一下又多一个 hover 合成层。 手机那套省电规则本来只在 ≤940px 生效，**平板横屏 1024+ 正好漏在外面**，所以扩上 `(any-pointer: coarse)`（有触摸屏就算，外接鼠标也照样命中）与 `(hover: none)`。 桌面（只有精细指针、不能触摸）一个像素不受影响。 **R58（2026-10-19）：第三个 `(any-pointer: coarse)` 是 72d1940 的漏网之鱼，收窄为 `(pointer: coarse)`。** R52 只改了上面两条悬停位移的规则，把这一条判成"只管防『指到哪哪就消失』、与位移无关"留下 —— 判错了： 它撤掉的不只是位移，还有**大面毛玻璃**（`.reading-shell .main` / `.land-card` / `.card` / `.auth-card` 的 `backdrop-filter: blur(22px)`）与**光雾的流动**（`.ambient-glow` 及其 `::before` 的 `animation: none` ＋ `will-change: auto`）。于是**主输入是鼠标**的混合设备（带触摸屏的笔记本/一体机，本机即是： `(pointer: fine)`＋`(any-pointer: coarse)`＋宽度 >940px）在主页与内容页上静静丢掉了材质与动效。 三支保护不变：`(max-width: 940px)`（真窄屏）＋ `(pointer: coarse)`（主输入=触摸）＋ `(hover: none)` （不能悬停）；pad 那种"主输入=触摸、外接鼠标只是辅助"的设备照旧命中。 */ @media (max-width: 940px), (pointer: coarse), (hover: none) { .reading-shell .main, .land-card, .card, .demo-switch, .account-create, .account-dashboard .mg-item, .auth-card { -webkit-backdrop-filter: none; backdrop-filter: none; } .ambient-glow, .ambient-glow::before { animation: none; will-change: auto; } }