/* ═══════════════════════════════════════════════════════════════════════════ 翠影华章 2.0 · 「墙上那张地图」 —— 世界层 ── 一句话：这不是玻璃，是**纸**。一面被钉过的印刷地图：图钉、便利贴、胶带、 铅笔与记号笔的标注；照片是被"人"一张张放上去的，不是被排成网格的。 ── 为什么不是"做旧牛皮纸"：守则点名过「暖米色纸 + 衬线字 + 赭石强调」是这类 题材被模型默认吐出来的那一套。祥走**印刷地图自己的四色工艺**： 冷白涂层纸 + 墨黑线划 + 水系青 + 干道玫红 + 图钉赭黄。纸是"刚从印刷厂 出来的纸"，不是"爷爷的相册"。 ── 字体按**制图学规矩**排，不按"好看"排： 居民地/注记 = 黑体；水系与自然 = 宋体；人的标注 = 楷体（手写感）； 数字 = 等宽。中文一律走系统字（老规矩：移动端省流量）—— **唯一的例外是标题**：那是这一页的招牌字，见下面的 @font-face。 ── 与 ui.css 的关系：ui.css 继续提供共享件（底部导航、toast、灯箱）， 本文件只接管**这一页自己的表面**——顶栏、信息板、筛选栏、时间条、标记。 ═══════════════════════════════════════════════════════════════════════════ */ /* 标题的字：霞鹜文楷（LXGW WenKai，SIL OFL 1.1）——**只取那九个字的子集，4.3 KB**。 为什么不留着系统楷体：守则里"拿系统字体当自家世界的招牌字"算失败不算退路， 而 Windows 上的中文楷体只有 SimKai 一支：细、旧，一放到 34px 就站不住。 子集里没有的字（例如以后改了标题）会自动落到系统楷体，不会变成豆腐块。 */ @font-face { font-family: "WL Hand"; src: url("fonts/wall-title.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } :root { /* ── 印图纸与墨 ── */ --wl-paper: #f1f2ee; /* 涂层纸的冷白，不是米黄 */ --wl-paper-2: #e7e9e5; /* 折痕背光面 */ --wl-paper-3: #dcdedb; /* 压深的边缘 */ --wl-ink: #16181a; /* 线划黑 */ --wl-ink-2: #474d52; /* 次级注记 */ --wl-pencil: #63696e; /* 铅笔灰（2026-10-08 P0-6：原 #666c71 对纸面 4.73 ✓ 但对**纸二 #e7e9e5 只有 4.35 ✗**； 压深到 #63696e 后：纸 4.87 / 纸二 4.55 / 白 5.5 全过。RGB 距离仅 5，肉眼几乎无差。 溯源：#6d7378 只有 4.3 被检测器抓过，才换成的 #666c71） */ --wl-line: rgba(22, 24, 26, .16); --wl-line-2: rgba(22, 24, 26, .30); /* ── 印刷四色（水系青 / 干道玫红 / 图钉赭黄）── */ --wl-cyan: #14788c; --wl-rose: #c8435f; --wl-ochre: #d99a25; /* 赭色当**字**的专用色（2026-10-08 P0-6）：#d99a25 对纸只有 2.17:1、对纸二 2.00:1，连 3:1 都不到—— 它是"有照片的地方"的记号色，做**图形/底色**合规（未定位图钉底、.no-loc 边框、--warm 那颗黄按钮）， 但当小字用不合格。所以图形一律仍用 --wl-ochre 不动，只有 `color:` 的 5 处改指这个深色版： 纸 4.93:1 / 纸二 4.54:1。/ */ --wl-ochre-ink: #896117; /* 钉红（2026-10-08 P0-6 收口）：#cf3a35 → #bf3631。只压深 6%（RGB 距离 17）， 但一次修好三处读数：钉红当小字 on 纸 4.33→4.93、on 纸二 3.99→4.54， 以及**纸色字压在钉红底上** 4.33→4.93（发评论按钮 / 发布按钮 / 版管新增 / 10px 徽标 共 5 处）。 其余带 alpha 的同色（rgba(207,58,53,.x) 描边、ocus 环等）已一并换成 rgba(191,54,49,.x) 保持同族。 备注：相册顶栏那颗「上传」CTA 实测是**纯白**字（对旧红 4.87 本来就过），检测器把它算成纸色字是误判。 */ --wl-pin-red: #bf3631; --wl-pin-blue: #2f6fb0; --wl-pin-green: #3f8f5f; /* ── 纸的附件 ── */ --wl-note: #ffe98a; /* 便利贴 */ --wl-note-2: #ffd9a0; --wl-tape: rgba(224, 212, 168, .70); /* 胶带 */ --wl-shadow: 0 1px 0 rgba(22,24,26,.06), 0 6px 16px rgba(22,24,26,.10); /* ── 字：制图学规矩，不是审美偏好 ── */ --wl-hei: MiSans, "HarmonyOS Sans SC", "Source Han Sans SC", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; --wl-song: "Source Han Serif SC", "Noto Serif CJK SC", "Songti SC", "SimSun", serif; --wl-hand: "Xingkai SC", "STXingkai", "Kaiti SC", "KaiTi", "楷体", cursive; --wl-mono: "Cascadia Mono", Consolas, ui-monospace, "SF Mono", monospace; /* ── 动效令牌（与 1.0 的节奏保持一致，先生的手感不能变）── */ --wl-micro: 200ms; --wl-fluid: 480ms; --wl-ease: cubic-bezier(.22, .7, .25, 1); /* ── 「天幕」：一天的光。JS 按当前时刻写 --wl-sun（0=夜 1=正午）── */ --wl-sun: .72; } /* 纸的地面：极轻的两道斜光，像一面对窗的墙。 ⚠️ 严禁大面积动画模糊（1.0 踩过：五团动态模糊光把显卡烧到 88℃）—— 这里是纯静态渐变，成本≈0。 */ html[data-wall="on"] body { background: radial-gradient(140% 90% at calc(18% + var(--wl-sun) * 20%) -10%, rgba(255,253,246, calc(.55 * var(--wl-sun) + .18)) 0%, rgba(255,253,246,0) 52%), linear-gradient(168deg, var(--wl-paper) 0%, var(--wl-paper-2) 62%, var(--wl-paper-3) 100%); color: var(--wl-ink); font-family: var(--wl-hei); /* 纸的颗粒感靠一层极便宜的重复点阵，不用滤镜 */ background-attachment: fixed; } /* ── 地理底图：高德给的瓦片保持原样，但整幕压一层纸色， 让数字地图"印在纸上"，而不是浮在屏幕里 ── */ html[data-wall="on"] #map { filter: saturate(.72) contrast(1.06) brightness(1.03); mix-blend-mode: multiply; } html[data-wall="on"] #map::after { content: none; } html[data-wall="on"] .amap-container { background: var(--wl-paper-2) !important; } /* 高德的注记与版权：压成墨色的小字，别让它抢戏 */ html[data-wall="on"] .amap-copyright, html[data-wall="on"] .amap-logo { opacity: .5; } /* ═══ 一、图钉与注记（照片在地图上的形态）═══════════════════════════════ 1.0 的 marker 是圆点气泡；这里是**图钉**：塑料钉帽 + 一小片投影， 旁边跟着一行**手写注记**（谁放的 + 几张），这就是「刻度」升级的落点： 每枚钉旁边给出真实数字，不做装饰性标注。 */ .wl-pin { position: relative; width: 26px; height: 26px; display: grid; place-items: center; cursor: pointer; transition: transform var(--wl-micro) var(--wl-ease); -webkit-tap-highlight-color: transparent; } .wl-pin__head { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff8, transparent 46%), var(--wl-pin-c, var(--wl-pin-red)); box-shadow: 0 2px 3px rgba(22,24,26,.32), inset 0 -1px 2px rgba(0,0,0,.22); } .wl-pin__stem { /* 钉身：一条 2px 的墨线，钉进纸里 */ position: absolute; top: 15px; left: 50%; width: 2px; height: 9px; transform: translateX(-50%); background: linear-gradient(var(--wl-ink), rgba(22,24,26,.25)); border-radius: 1px; } .wl-pin__shadow { /* 钉帽在纸上的投影 */ position: absolute; top: 17px; left: 50%; width: 14px; height: 5px; transform: translateX(-50%) rotate(-8deg); background: radial-gradient(50% 50% at 50% 50%, rgba(22,24,26,.24), rgba(22,24,26,0) 72%); } .wl-pin:hover { transform: translateY(-2px) scale(1.06); } .wl-pin.is-hot { transform: translateY(-4px) scale(1.14); } .wl-pin.is-hot .wl-pin__head { box-shadow: 0 6px 12px rgba(22,24,26,.28), inset 0 -1px 2px rgba(0,0,0,.22); } /* ── 钉子上挂的照片（先生 2026-10-03 凌晨："其他的钉子也要有图片"）────────────── 从前只有"一格恰好一张"才显示相纸，多张的钉子是个光秃秃的红点。 现在每枚钉都带一张（用这一格的第一张），钉帽压在照片上沿。 ── 锚点：配了图的钉子在 JS 里用 `anchor: 'top-center'`， 因为下面用 `margin-top: -13px` 把**钉帽顶**对齐到容器顶边 —— 于是"容器顶边 = 钉帽顶"，top-center 让坐标正落在钉帽上（也就是那个地点）。 不这么挪的话，容器顶是照片顶，坐标会落在照片上沿而不是钉子尖。 */ .wl-pin--photo { margin-top: -13px; } .wl-pin__card { position: absolute; left: 50%; top: 26px; /* 26 = 钉容器高，正好挂在钉子下方 */ transform: translateX(-50%); display: block; padding: 3px; background: #fdfdfa; box-shadow: 0 1px 2px rgba(22,24,26,.28), 0 6px 14px rgba(22,24,26,.16); pointer-events: none; /* 点击交给整枚钉（role=button 在父容器上） */ } /* ⚠️ 这张图必须**自己带层叠位置**（2026-10-03 凌晨，祥踩的坑）： 卡片里有两张"叠纸"（.wl-pin__sheet，多张照片时才有），它们是**图片的兄弟节点、 而且排在图片前面**，各自 `inset: 0` 铺满整张卡片、底色是纸色 #fdfdfa —— 于是**把照片整个盖住了**。症状极具迷惑性：图能解码（canvas 读得出内容）、 自然尺寸 320x320、HTTP 200，可屏幕上只有一块白板。 祥的定位过程：给卡片加红底→看不见；把图换成绿块→也看不见； 最后把克隆体挂到 body 上、**一刀刀剥样式**，剥掉那两张叠纸的瞬间就画出来了。 一行修：让图片带自己的层叠位置，压住兄弟里的叠纸。 ⚠️ 现在是 `z-index: 4`（初版写的 1，改成三层后就不够了 —— 见下面那段的说明）。 */ .wl-pin__card img { display: block; object-fit: cover; position: relative; z-index: 4; background: #e9eae6; } /* 多张的："叠纸"—— 三层各偏一点，像**手里捏着的一叠相纸**（先生给的参考图就是这个样子）。 ⚠️ 2026-10-03 凌晨从两张改成三张（先生："做多叠三层"）。 ── 层序（祥第一版写反了，量出来才发现）： DOM 顺序是 sheet(s1) → sheet(s2) → sheet(s3) → img。 所以 z 必须**顺着 DOM 递增**：s1=1、s2=2、s3=3、img=4。 祥第一版写成 s1=3、s2=2、s3=1 —— 结果是"最该在底下的那张反而最上"， img 的 z-index:1 只压住了排在它前面那一张，另外两张盖在照片上（实测颜色种类从 634 掉到 266）。 ── 偏移：照片是 32px、卡片内边距 3px，所以叠纸只往外露 2–6px 就够看出"是一叠"。 参考图里那叠也是"每张只错开一点点"，错多了就散成扇面了。 */ .wl-pin__sheet { position: absolute; inset: 0; background: #fdfdfa; box-shadow: 0 1px 2px rgba(22,24,26,.22), 0 6px 14px rgba(22,24,26,.12); } .wl-pin__card[data-many="1"] .wl-pin__sheet:nth-of-type(1) { transform: rotate(-5.5deg) translate(-5px, 3px); z-index: 1; } .wl-pin__card[data-many="1"] .wl-pin__sheet:nth-of-type(2) { transform: rotate(4deg) translate(5px, 3px); z-index: 2; } .wl-pin__card[data-many="1"] .wl-pin__sheet:nth-of-type(3) { transform: rotate(-1.5deg) translate(-1px, 6px) scale(.97); z-index: 3; } /* ── 叠纸逐层落下（先生 2026-10-03 凌晨："加上同款动效"）────────────────────── "同款"= 与既有的落钉动画 `wlDrop` **同一条曲线、同一种收尾**，不另起一套。 每层比上一层晚 90ms（延迟由 map-amap.js 的 stackAnim() 写成内联 animation-delay）。 ⚠️ `backwards` 而不是 `both`：动画结束后**把 transform 交还给 CSS**， 否则会永久盖住上面那三条 nth-of-type 的 rotate/translate —— 三层就摊平了。 ⚠️ transform-origin 用左下角：相纸是"从叠里翻出来"的，绕左上角转会甩得太开。 */ @keyframes wlStack { from { opacity: 0; transform: translate(-16px, 14px) rotate(-16deg) scale(.86); } 60% { opacity: 1; } to { opacity: 1; } /* 末帧不写 transform —— 结束即交还 CSS 的静态值 */ } .wl-pin--photo .wl-pin__sheet { transform-origin: 18% 88%; animation: wlStack 520ms cubic-bezier(.16, 1, .3, 1) backwards; } /* ⚠️ 手机端不加动效（先生："手机端不加动效"）。 判据用 `hover: none` 而不是屏宽：触屏设备（手机/平板）**没有 hover**， 而这套"层层翻出来"的动效本来就是鼠标语境里的展示动作； 窄屏窗口的桌面浏览器仍该看得到它，所以不能按宽度切。 用 `animation: none` 而不是 `display:none` —— 叠纸本身要留着，只是不动。 */ @media (hover: none) { .wl-pin--photo .wl-pin__sheet { animation: none; } } /* 配了图的钉子：钉帽不再有"钉在纸上"的投影（投影是底座，现在是照片在托它） */ .wl-pin--photo .wl-pin__shadow { display: none; } /* 枚数徽章：真实张数（「刻度」） */ .wl-pin__n { position: absolute; top: -6px; right: -7px; min-width: 16px; height: 16px; padding: 0 4px; display: grid; place-items: center; font: 600 10.5px/1 var(--wl-mono); color: var(--wl-paper); background: var(--wl-ink); border-radius: 8px; } /* 手写注记：钉旁边的名字（谁放的） */ .wl-pin__who { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); font: 400 13px/1 var(--wl-hand); color: var(--wl-ink-2); white-space: nowrap; text-shadow: 0 1px 0 rgba(255,255,255,.6); pointer-events: none; } /* ═══ 二、待贴的那张拍立得（首屏的主行动）══════════════════════════════ 守则要求「主行动就在那张待贴的照片上」。它不是按钮，是**一张还没贴上去的 相纸**：白边、微微翘起、下面压着一条胶带——"你的位置空着"。 */ .wl-polaroid { position: relative; width: 168px; padding: 10px 10px 34px; background: #fdfdfa; border-radius: 2px; box-shadow: var(--wl-shadow), 0 14px 28px rgba(22,24,26,.16); transform: rotate(3.4deg); transition: transform var(--wl-fluid) var(--wl-ease), box-shadow var(--wl-fluid) var(--wl-ease); cursor: pointer; } .wl-polaroid:hover { transform: rotate(1.2deg) translateY(-6px) scale(1.02); } .wl-polaroid__ph { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; background: repeating-linear-gradient(45deg, #e9eae6 0 6px, #e2e3df 6px 12px); } .wl-polaroid__cap { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font: 400 15px/1.2 var(--wl-hand); color: var(--wl-ink-2); } .wl-polaroid__tape { /* 压住它的一截胶带 */ position: absolute; top: -11px; left: 50%; width: 74px; height: 22px; transform: translateX(-50%) rotate(-4deg); background: var(--wl-tape); box-shadow: 0 1px 2px rgba(22,24,26,.10); } /* ═══ 三、便利贴（筛选与统计的形态）════════════════════════════════════ 1.0 的筛选栏是一块玻璃面板；这里是一叠**便利贴**：按年份/月份/地点各写一张， 贴着就是启用，撕下来就是清除。 */ .wl-note { position: relative; padding: 10px 12px 12px; background: var(--wl-note); box-shadow: 0 2px 6px rgba(22,24,26,.14), inset 0 -10px 16px rgba(22,24,26,.05); transform: rotate(-1.2deg); font: 500 13px/1.5 var(--wl-hei); color: #4a3f12; cursor: pointer; transition: transform var(--wl-micro) var(--wl-ease); } .wl-note:nth-child(even) { background: var(--wl-note-2); transform: rotate(1.6deg); } .wl-note:hover { transform: rotate(0deg) translateY(-2px); } .wl-note[aria-pressed="true"]::after { /* 启用的那张：右下角一道记号笔的勾（画出来的，不是字符） */ content: ""; position: absolute; right: 9px; bottom: 7px; width: 12px; height: 6px; border-left: 2px solid var(--wl-rose); border-bottom: 2px solid var(--wl-rose); transform: rotate(-45deg); } .wl-note__k { display: block; font-size: 11px; letter-spacing: .08em; color: #6b5a1e; } /* ═══ 四、墙上的字：标题与图例 ══════════════════════════════════════════ */ .wl-title { font: 400 clamp(20px, 3.4vw, 34px)/1.15 "WL Hand", var(--wl-hand); color: var(--wl-ink); letter-spacing: .01em; text-shadow: 0 1px 0 rgba(255,255,255,.7); } /* 图例：制图学的边框方框，替代 1.0 的玻璃浮层 */ .wl-legend { border: 1.5px solid var(--wl-line-2); background: rgba(241,242,238,.92); box-shadow: none; /* 印刷品没有投影 */ border-radius: 0; } .wl-legend__h { font: 700 11px/1 var(--wl-hei); letter-spacing: .18em; color: var(--wl-ink); border-bottom: 1.5px solid var(--wl-line-2); } /* 图例里的数字：等宽，不跳动 */ .wl-num { font-family: var(--wl-mono); font-variant-numeric: tabular-nums; } /* ═══ 五、时间与刻度（时间条的纸面化）══════════════════════════════════ 轨道是**印刷尺**：细墨线 + 每格刻度；滑块是两枚小图钉。 「形状即状态」升级：手柄用形状区分（左=圆钉、右=方钉），不只换颜色。 */ .wl-ruler { height: 30px; border-top: 1.5px solid var(--wl-line-2); background: repeating-linear-gradient(90deg, var(--wl-line) 0 1px, transparent 1px 100%), linear-gradient(var(--wl-paper), var(--wl-paper-2)); background-size: 12px 8px, 100% 100%; background-position: 0 0, 0 0; background-repeat: repeat-x, no-repeat; } .wl-ruler input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; height: 30px; } .wl-ruler input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; background: var(--wl-pin-red); border-radius: 50%; /* 左：圆钉 */ box-shadow: 0 2px 4px rgba(22,24,26,.34), inset 0 -1px 2px rgba(0,0,0,.25); cursor: grab; } .wl-ruler input#year-to::-webkit-slider-thumb { border-radius: 3px; background: var(--wl-pin-blue); } /* 右：方钉 */ /* ═══ 六、纸的质感（无滤镜、可关）═══════════════════════════════════════ 一层极便宜的颗粒：比 1.0 的全屏噪声 + mix-blend-mode 便宜一个数量级。 */ html[data-wall="on"][data-wall-grain="on"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .30; mix-blend-mode: multiply; background-image: radial-gradient(rgba(22,24,26,.09) .5px, transparent .5px); background-size: 3px 3px; } /* ═══ 七、动效的可及性（照 1.0 的老规矩）════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .wl-pin, .wl-polaroid, .wl-note { transition: none; } .wl-pin:hover, .wl-polaroid:hover, .wl-note:hover { transform: none; } .wl-pin.wl-drop, .wl-photo.wl-drop { animation: none; } /* 落钉这一下也免了 */ } /* ═══ 八、窄屏：先把 390px 立住（先生的硬要求）══════════════════════════ */ @media (max-width: 720px) { .wl-polaroid { width: 132px; padding: 8px 8px 28px; } .wl-title { font-size: 20px; } .wl-pin__who { display: none; } /* 小屏上注记让位给钉本身 */ .wl-ruler { height: 34px; } } /* ═══════════════════════════════════════════════════════════════════════════ 第二章：把这一页的**玻璃表面**换成**纸面**（2026-10-01 · 2.0） ── 1.0 的表面是玻璃：半透明 + backdrop-filter 模糊 + 大圆角 + 柔投影。 墙的世界里没有玻璃——只有**纸、墨线、方角**。所以这里做三件事： ① 一律不透明（纸是不透光的）② 一律方角（印刷品不切圆角） ③ 一律去掉投影与模糊，边界改由 **1.5px 墨线**交代 ── 为什么必须带 !important：1.0 有几条规则本身写着 !important（折射滤镜那套）， 不硬压就换不掉。这是"换世界"而不是"叠皮肤"，该硬的地方必须硬。 ═══════════════════════════════════════════════════════════════════════════ */ html[data-wall="on"] .topbar, html[data-wall="on"] .float, html[data-wall="on"] .place-bar, html[data-wall="on"] #keypanel .box, html[data-wall="on"] #lightbox .box { background: var(--wl-paper) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1.5px solid var(--wl-line-2) !important; border-radius: 0 !important; box-shadow: none !important; } /* 顶栏：一条被裁下来的纸边，底边一道稍重的墨线 */ html[data-wall="on"] .topbar { border-width: 0 0 1.5px 0 !important; background: linear-gradient(var(--wl-paper), var(--wl-paper-2)) !important; } html[data-wall="on"] .topbar .brand { font-family: var(--wl-hei); font-weight: 800; letter-spacing: .04em; color: var(--wl-ink); } html[data-wall="on"] .topbar .link { color: var(--wl-ink-2); } html[data-wall="on"] .topbar .link:hover { color: var(--wl-ink); background: rgba(22,24,26,.06); } /* 信息板（HUD）：制图学的图例框——方角、墨线、纸底 */ html[data-wall="on"] .hud { background: var(--wl-paper) !important; border: 1.5px solid var(--wl-line-2) !important; border-radius: 0 !important; box-shadow: none !important; color: var(--wl-ink); } html[data-wall="on"] .hud b, html[data-wall="on"] .hud strong { font-family: var(--wl-mono); font-variant-numeric: tabular-nums; } /* 时间条：印刷尺——轨道是细墨线，两端是**两枚形状不同的钉** */ html[data-wall="on"] .timeline { background: var(--wl-paper) !important; border: 1.5px solid var(--wl-line-2) !important; border-radius: 0 !important; box-shadow: none !important; } html[data-wall="on"] .timeline input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--wl-line-2); } html[data-wall="on"] .timeline input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -7px; background: var(--wl-pin-red); border-radius: 50%; box-shadow: 0 1px 2px rgba(22,24,26,.35); } html[data-wall="on"] .timeline input#year-to::-webkit-slider-thumb { border-radius: 2px; background: var(--wl-pin-blue); /* 右端方钉 = 形状即状态 */ } html[data-wall="on"] .timeline .year { font-family: var(--wl-hand); font-size: 15px; font-weight: 400; color: var(--wl-ink) !important; border: 1px dashed var(--wl-line-2) !important; border-radius: 0 !important; } html[data-wall="on"] .timeline .cap, html[data-wall="on"] .timeline .count { color: var(--wl-ink-2) !important; } /* 年份刻度：等宽小字，像尺子上的读数 */ html[data-wall="on"] .ticks span, html[data-wall="on"] .ticks i { color: var(--wl-ink-2) !important; font-family: var(--wl-mono); } /* 按钮：墨线方章，不是玻璃药丸 */ html[data-wall="on"] .btn, html[data-wall="on"] .place-bar button, html[data-wall="on"] .chip { border-radius: 0 !important; border: 1.5px solid var(--wl-line-2) !important; background: var(--wl-paper) !important; color: var(--wl-ink) !important; box-shadow: none !important; font-family: var(--wl-hei); } html[data-wall="on"] .btn:hover, html[data-wall="on"] .place-bar button:hover { background: var(--wl-paper-3) !important; color: var(--wl-ink) !important; /* 悬停时字仍是墨：1.0 那套是白字，落在纸上等于擦掉 */ } /* 主行动那一颗：图钉红实底，白字（对比度按 WCAG 校过） */ html[data-wall="on"] #place-done { background: var(--wl-pin-red) !important; color: #fff !important; border-color: var(--wl-pin-red) !important; } /* 第三章（2026-10-02 重做）：让这张地图**真的印在纸上** ─────────────────────────────────────────────────────────────────────── ── 先说取证（1440×900 截图，q1-with / q1-off 逐像素比对，脚本 2.0-shots\pixdiff.mjs）： 上一版**确实压上了纸色**——陆地那片区域均值从 rgb(238,234,232) 压到 rgb(226,223,219)， 平均差 12/255（不是"没生效"，10-01 那次"取证无效"是采样坐标算错了）。 但**只暗不印**：瓦片本身还是高德的原色（水是鲜蓝、干道是橘黄）， 等于给屏幕盖了一层灰，纸感一点也读不出来。 ── 所以这一版分四步，缺一步都不成： ① **瓦片去饱和**：滤镜只挂在 `canvas.amap-layer`（底图那几张画布）上—— 墨线留下、彩色退场。图钉与界面**不受影响**：墙上唯一的饱和色必须是"有照片的地方"。 ② **纸色渗进墨里**（multiply，不是盖灰）。 ③ **折痕 + 四边压深**：纸是折过的、贴在墙上边上总有影——纸的"厚度"全靠这两样。 ④ **纸纹**：4px 点阵，静态图案，成本≈0（不碰大面积模糊——1.0 烧过显卡的老账）。 ── 为什么不走高德的 mapStyle：自定义样式要的服务个人钥匙没开通（custyle 实测 403/401）， 地图会直接变白。CSS 这条路才是"只在自己机器上跑得通"的做法。 */ html[data-wall="on"] canvas.amap-layer { /* 去饱和到几乎单色（墨线留下、彩色退场），再提对比让线划"吃"进纸里。 ⚠️ 不许加 sepia：试过 .12 的暖调，整张图立刻变成"爷爷的老地图"—— 这一页要的是**刚从印刷厂出来的冷白涂层纸**，不是做旧。 */ filter: saturate(.16) contrast(1.30) brightness(1.02); } /* ②+③+④ 一次做完：一层 multiply 全包（一次合成，无模糊、无逐帧滤镜） */ html[data-wall="on"] #map::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply; background-image: radial-gradient(rgba(22,24,26,.055) .5px, transparent .62px), /* ④ 纸纹 */ linear-gradient(90deg, transparent 0 33.15%, rgba(22,24,26,.075) 33.3%, rgba(22,24,26,.02) 33.5%, transparent 33.7%), /* ③ 竖折痕（暗边） */ linear-gradient(180deg, transparent 0 49.6%, rgba(22,24,26,.065) 49.78%, rgba(22,24,26,.018) 50%, transparent 50.25%), /* ③ 横折痕（暗边） */ radial-gradient(125% 105% at 50% 44%, rgba(255,255,255,0) 56%, rgba(22,24,26,.13) 100%), /* ③ 四边压深 */ linear-gradient(178deg, rgba(233,238,242,.50), rgba(219,226,232,.58)); /* ② 纸色（冷白） */ background-size: 4px 4px, 100% 100%, 100% 100%, 100% 100%, 100% 100%; } /* 折痕的亮边 + 斜进来的天光（screen：这两样是"光"，不是"墨"） --wl-sun 由 wall.js 按当前时刻写（0=夜 / 1=正午）——「天幕」那一条升级就落在这里。 */ html[data-wall="on"] #map::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen; background-image: linear-gradient(90deg, transparent 0 33.3%, rgba(255,255,255,.46) 33.4%, transparent 33.62%), linear-gradient(180deg, transparent 0 49.78%, rgba(255,255,255,.40) 49.9%, transparent 50.12%), radial-gradient(88% 68% at 20% -10%, rgba(255,252,242, calc(.30 * var(--wl-sun))), rgba(255,252,242,0) 62%); } html[data-wall="on"] #map { filter: none; mix-blend-mode: normal; } /* 撤掉 10-01 那版失效的写法 */ /* ═══ 九、图廓：印刷地图的边框（2026-10-02）═══════════════════════════════ 一张印刷地图必有图廓：一圈墨线、线上的分度刻、角上的套准十字、框外的注记。 这几样都不需要混合模式（它们是"墨"，直接画在上面），所以放在独立的一层里， 位置由 clamp() 让开顶栏与时间条——**手机上也能成立**。 */ #wallframe { position: fixed; inset: 0; z-index: 3; pointer-events: none; --wl-frame-top: 92px; --wl-frame-left: 18px; --wl-frame-right: 18px; --wl-frame-bottom: 122px; } #wallframe .neat { position: absolute; top: var(--wl-frame-top); left: var(--wl-frame-left); right: var(--wl-frame-right); bottom: var(--wl-frame-bottom); border: 1.5px solid var(--wl-line-2); /* 框内缘的分度刻：横 72px 一格、竖 72px 一格，像尺 */ background-image: repeating-linear-gradient(90deg, var(--wl-line-2) 0 1.5px, transparent 1.5px 72px), repeating-linear-gradient(90deg, var(--wl-line-2) 0 1.5px, transparent 1.5px 72px), repeating-linear-gradient(180deg, var(--wl-line-2) 0 1.5px, transparent 1.5px 72px), repeating-linear-gradient(180deg, var(--wl-line-2) 0 1.5px, transparent 1.5px 72px); background-size: 100% 5px, 100% 5px, 5px 100%, 5px 100%; background-position: top left, bottom left, top left, top right; background-repeat: no-repeat; opacity: .72; } /* 套准十字：印厂对版用的记号，四个角各一枚 */ #wallframe .cm { position: absolute; width: 15px; height: 15px; opacity: .8; } #wallframe .cm::before, #wallframe .cm::after { content: ""; position: absolute; background: var(--wl-line-2); } #wallframe .cm::before { left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-50%); } #wallframe .cm::after { top: 50%; left: 0; height: 1.5px; width: 100%; transform: translateY(-50%); } #wallframe .cm.tl { top: calc(var(--wl-frame-top) + 7px); left: calc(var(--wl-frame-left) + 7px); } #wallframe .cm.tr { top: calc(var(--wl-frame-top) + 7px); right: calc(var(--wl-frame-right) + 7px); } #wallframe .cm.bl { bottom: calc(var(--wl-frame-bottom) + 7px); left: calc(var(--wl-frame-left) + 7px); } #wallframe .cm.br { bottom: calc(var(--wl-frame-bottom) + 7px); right: calc(var(--wl-frame-right) + 7px); } /* 框外的注记：比例尺（真数字，随缩放走）+ 版本行 位置就落在图廓**下面**那一条空白里——像印厂的版记，不压在地图中间。 */ #wallframe .marg { position: absolute; left: calc(var(--wl-frame-left) + 12px); bottom: calc(var(--wl-frame-bottom) - 30px); display: flex; align-items: flex-end; gap: 14px; font: 500 10.5px/1 var(--wl-mono); color: var(--wl-ink-2); letter-spacing: .06em; } .wl-scale { display: inline-flex; flex-direction: column; gap: 4px; } .wl-scale b { display: block; height: 10px; position: relative; border-bottom: 1.5px solid var(--wl-ink); /* 分度：25% 一格，与图廓内缘的分度刻同一套规矩 */ background: repeating-linear-gradient(90deg, var(--wl-ink) 0 1.5px, transparent 1.5px 25%) bottom left / 100% 6px no-repeat; } .wl-scale b::before, .wl-scale b::after { content: ""; position: absolute; bottom: 0; width: 1.5px; height: 10px; background: var(--wl-ink); } .wl-scale b::before { left: 0; } .wl-scale b::after { right: 0; } #wallframe .imp { position: absolute; right: calc(var(--wl-frame-right) + 12px); bottom: calc(var(--wl-frame-bottom) - 30px); font: 500 10.5px/1 var(--wl-mono); color: var(--wl-pencil); letter-spacing: .06em; } /* 高德自己的两枚署名：留下（该有的署名一个不少），但压成**墨色的版记**，别抢戏 */ html[data-wall="on"] .amap-logo { filter: grayscale(.85) contrast(.9); opacity: .62; } html[data-wall="on"] .amap-copyright { color: var(--wl-pencil) !important; opacity: .85; font-family: var(--wl-hei) !important; text-shadow: 0 0 4px var(--wl-paper); } /* ═══ 十、首屏的构图（2026-10-02）══════════════════════════════════════════ 守则的 FIRST VIEWPORT 逐条落地： 满屏纸面地图 ＋ 中央已钉住的几枚钉（第九·十一节） ＋ **右上角压着那张还没贴上去的拍立得**（主行动） ＋ **左下便利贴堆**（行动清单：待放上墙的、最近一年、我放的） ＋ **顶部一行手写标题**「我们那年去过的地方」。 */ .wl-head { position: fixed; z-index: 20; pointer-events: none; left: 30px; top: 104px; max-width: min(46vw, 520px); } /* ── 让墙上的字**可点**（2026-10-03 凌晨 · 先生："我要让我的朋友现在也能用这个网站"）── 找到这条的经过（值得记，因为它骗过了祥两次）： · 先生要朋友能注册 → 朋友第一件事就是点「登录 / 注册」 · 用真鼠标点击量："登录 / 注册" 可点 = ❌ 被 盖住 · 祥第一反应是"层的 z-index 不够"，**猜错了**。实测（probe-stack-truth.mjs）： 只把 z-index 抬到 5000 → 还是被 canvas 盖住（抬层没用） 只把 pointer-events 设 auto → 立刻命中 → 唯一的原因是**上面那个 `pointer-events: none`**。 · 为什么 canvas 会赢：高德容器 `z=auto` 但带定位（class 也叫 `amap-container`）， 而 `.wl-head` z=20 —— 按规矩 z=20 该在上面，**看起来也确实在上面**； 命中测试却落到 canvas，是因为整块 `.wl-head` 根本不参与命中。 所以它既是"看得见点不到"，也是"祥前几次以为层次坏了"的真正原因。 治法：`.wl-head` 自己仍然 `pointer-events: none`（**空白处必须穿透给地图**， 否则那 204×28 的一块会在墙上抠出一个点不动的洞）， 只把**可点的孩子**（链接、按钮、页签）放行。 */ .wl-head a, .wl-head button, .wl-head [role="button"], .wl-head .wl-sub a, .wl-head .wl-sub button { pointer-events: auto; } /* 光能点还不够 —— 它得**看起来**能点，而且手指按得中。 量出来的原样：76×15 px。iPhone 上手指的最小可靠命中区约 44×44， 15px 高等于"要瞄准"，朋友第一次用就会觉得"这点不动"。 用 padding 撑到 22px 高（负 margin 把多出来的 5px 吃掉， **不改变这一行字原来的视觉位置和折行**）。 样式按设计法：方角（只给 2px）、玫瑰色、悬停只加深不换白字。 */ .wl-sub a { display: inline-block; padding: 3px 6px; margin: -3px -1px; color: var(--wl-rose); font-weight: 700; text-decoration: none; border-radius: 2px; transition: background-color .18s, color .18s; } .wl-sub a:hover { background: rgba(196, 92, 116, .12); color: var(--wl-rose); } .wl-sub a:active { background: rgba(196, 92, 116, .2); } /* 键盘/读屏用户也要能看见焦点（原来连焦点样式都没有） */ .wl-sub a:focus-visible { outline: 2px solid var(--wl-rose); outline-offset: 1px; } .wl-title { margin: 0; } /* 手写的字压在花花绿绿的地图上会读不清——纸色的光晕让它在哪儿都站得住。 ⚠️ 光晕要**紧**：3px 以内是"纸托着字"，7-12px 就变成一团白雾抹掉了地图。 */ html[data-wall="on"] .wl-title { text-shadow: 0 0 3px var(--wl-paper), 0 0 5px var(--wl-paper), 0 1px 0 rgba(255,255,255,.8); } html[data-wall="on"] .wl-sub { text-shadow: 0 0 4px var(--wl-paper), 0 0 4px var(--wl-paper); } .wl-sub { margin: 8px 0 0; font: 500 12.5px/1.6 var(--wl-mono); color: var(--wl-ink-2); letter-spacing: .02em; text-shadow: 0 1px 0 rgba(255,255,255,.75); } .wl-sub b { color: var(--wl-ink); font-weight: 700; } .wl-sub .u { color: var(--wl-rose); font-weight: 700; } /* 待贴的拍立得：首屏的主行动（右上角，压在墙上） */ .wl-polaroid { position: fixed; z-index: 21; right: 34px; top: 96px; text-decoration: none; display: block; } .wl-polaroid .wl-polaroid__ph { position: relative; } /* 空相纸里不写字：下面那行手写「你的位置空着」已经说完了。 */ .wl-polaroid__ph::after { content: none; } /* 左下便利贴堆：墙上的行动清单 */ .wl-notes { position: fixed; z-index: 21; left: 30px; bottom: 152px; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; max-width: 188px; } .wl-notes .wl-note { width: 100%; text-align: left; border: 0; padding: 8px 10px 9px; font-size: 12px; line-height: 1.45; } .wl-notes .wl-note[hidden] { display: none; } .wl-notes .wl-note b { font: 700 14px/1 var(--wl-mono); } .wl-notes .wl-note .t { display: block; margin-top: 3px; font-size: 11px; line-height: 1.4; opacity: .78; } .wl-notes .wl-note__k { font: 700 10px/1.2 var(--wl-hei); letter-spacing: .16em; opacity: .82; } /* 三张纸各自歪一点：一叠便利贴不会摆得一样齐 */ .wl-notes .wl-note:nth-child(1) { transform: rotate(-1.9deg); } .wl-notes .wl-note:nth-child(2) { transform: rotate(1.3deg); } .wl-notes .wl-note:nth-child(3) { transform: rotate(-.7deg); } .wl-notes .wl-note:hover { transform: rotate(0) translateY(-2px); } /* 顶栏那块招牌：墨字，不要渐变彩字（1.0 的 grad-text 在这个世界里是"荧光笔"） */ html[data-wall="on"] .topbar .brand, html[data-wall="on"] .topbar .brand.grad-text { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: var(--wl-ink) !important; color: var(--wl-ink) !important; font-family: var(--wl-hei) !important; font-weight: 800; letter-spacing: .18em; } html[data-wall="on"] .topbar .who { font-family: var(--wl-mono); font-size: 11.5px; color: var(--wl-pencil); } /* 时间条：密度柱是**印出来的柱状图**，不是发光条 */ html[data-wall="on"] .dens i { background: linear-gradient(180deg, var(--wl-ink), rgba(22,24,26,.28)) !important; opacity: 1; border-radius: 0; } html[data-wall="on"] .dens i.zero { background: rgba(22,24,26,.10) !important; } html[data-wall="on"] .timeline .cap { font: 700 10px/1 var(--wl-hei); letter-spacing: .16em; color: var(--wl-ink-2) !important; } html[data-wall="on"] .timeline .count { font-family: var(--wl-mono); font-size: 11.5px; } /* ═══ 十一、被钉住的照片与图钉（marker 的新形态，2026-10-02）══════════════ 1.0 的 marker 是"圆头像气泡"，一屏几十个像弹幕。墙上的规矩是： 一枚钉 = 一个地点；钉旁的注记写清**谁放的、几张**（「刻度」：不做装饰性标注）； 放大到看得清时，照片本体才出现——一张**被钉住的相纸**，白边、投影、钉帽在顶上。 */ .wl-photo { position: relative; display: block; padding: 4px; background: #fdfdfa; box-shadow: 0 1px 2px rgba(22,24,26,.28), 0 7px 16px rgba(22,24,26,.15); transition: transform var(--wl-micro) var(--wl-ease), box-shadow var(--wl-micro) var(--wl-ease); } .wl-photo img { display: block; object-fit: cover; background: #e9eae6; } .wl-photo__head { position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; border-radius: 50%; transform: translateX(-50%); background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.55), transparent 46%), var(--wl-pin-c, var(--wl-pin-red)); box-shadow: 0 2px 3px rgba(22,24,26,.34), inset 0 -1px 2px rgba(0,0,0,.22); } .wl-photo:hover, .wl-photo:focus-visible { transform: translateY(-3px) rotate(-.8deg) scale(1.035); box-shadow: 0 3px 6px rgba(22,24,26,.3), 0 14px 26px rgba(22,24,26,.18); } .wl-photo:focus-visible, .wl-pin:focus-visible { outline: 2px solid var(--wl-pin-blue); outline-offset: 3px; } /* 钉旁的注记：写在纸上的小字（有淡光晕，压在图上仍读得清） */ .wl-pin__who { top: 27px; } .wl-pin__tag { /* 地名 · 年份：印刷体小字，与手写名分开 */ position: absolute; left: 50%; top: 44px; transform: translateX(-50%); font: 500 10.5px/1 var(--wl-mono); color: var(--wl-ink-2); white-space: nowrap; pointer-events: none; text-shadow: 0 0 4px var(--wl-paper), 0 0 4px var(--wl-paper); } .wl-pin__who { text-shadow: 0 0 4px var(--wl-paper), 0 0 4px var(--wl-paper), 0 1px 0 rgba(255,255,255,.6); } /* ── 首屏构件在窄屏（390px 是先生的硬要求，先立住它）── */ @media (max-width: 720px) { #wallframe { --wl-frame-top: 80px; --wl-frame-left: 12px; --wl-frame-right: 12px; --wl-frame-bottom: 154px; } /* 画框顶边 132px → 80px。 132 是当初为了容下**折成两行、111px 高**的顶栏才定的；顶栏瘦身之后那条线白占了 52px 的地图 （手机上正好是最北那几个地名钻到顶栏底下）。 80 的来历：顶栏 bottom 实测 **74px**（top:12 + 高 62）+ 6px 呼吸。 ⚠️ 不要照抄这个数字 —— 顶栏高度一变它就得跟着变（下次改顶栏，请重新量 bottom 再改这里）。 */ /* 「翠的足迹」下拉：窄屏保持完整标题「翠的足迹」。 ⚠️ 祥 2026-10-02 夜曾把它压成「足迹」两个字来省宽度 —— **先生当场指出这是错的**， 已撤销。标签是给人的名字，不是可以为了 6px 砍掉的东西。 宽度问题改从别处省（顶栏左右内边距），名字一个字不动。 */ html[data-wall="on"] .topbar .fpnav-btn { letter-spacing: .02em; } #wallframe .marg { left: calc(var(--wl-frame-left) + 8px); bottom: calc(var(--wl-frame-bottom) - 28px); } #wallframe .imp { right: calc(var(--wl-frame-right) + 8px); bottom: calc(var(--wl-frame-bottom) - 28px); } .wl-head { left: 16px; top: 140px; max-width: 66vw; } .wl-sub { font-size: 11.5px; margin-top: 5px; } .wl-sub .onlywide { display: none; } /* 拍立得（"你的位置空着"）：**手机端删掉**（先生 2026-10-03）。 小屏上它压在右下角照片上，且首屏底部已有「上传」入口，不必重复。 （原先是挪到右下角 bottom:182px right:14px，现在直接不显示；桌面端原样保留。） */ .wl-polaroid { display: none; } .wl-notes { left: 14px; bottom: 182px; max-width: 156px; gap: 8px; } .wl-notes .wl-note { padding: 7px 9px 8px; font-size: 11.5px; } .wl-notes .wl-note b { font-size: 13px; } .wl-notes .wl-note .t { font-size: 11px; } .wl-notes .wl-note__k { font-size: 11px; } .wl-pin__tag { display: none; } /* 小屏上注记让位给钉本身 */ /* ── 手指命中区：视觉一个像素不动，命中区撑到 44×44（2026-10-02 夜 · 先生第②个"必须有"）── 为什么必须做：地图上的图钉实测 26×26、相纸 32×40，而手指的最小可靠命中区是 44×44。 也就是说手机上**点不中**——相册最核心的交互是失效的。 ── 做法：`outline: 44px solid transparent` + `outline-offset` 反推。 outline 不参与布局、不改变盒子的尺寸与位置，所以**地图锚点、钉子的视觉位置全都不动**， 但它会把元素的命中区扩到 44×44。 验算：图钉 26px，要命中 44×44 → outline 宽 44、offset 要 -35.78px （44 + 2×(-35.78) = -27.56 → 26 + 27.56 = 53.56？不对） 正确算法：命中区尺寸 = 元素尺寸 + 2×(outline宽 + offset) 26 + 2×(44 + offset) = 44 → 2×(44 + offset) = 18 → offset = -35 验算 26 + 2×(44-35) = 26 + 18 = 44 ✅ 相纸 32×40：宽 32 → 32 + 2×(44 + offset) = 44 → offset = -38；高 40 同理 offset = -42。 取更保守的一个（-38）即可，两边都 ≥44。 ── 为什么不用 ::after 伪元素：伪元素会参与层叠，容易盖住钉子自己的 hover 态； outline 完全不碰布局，是最不会出错的一条路。 */ .wl-pin { outline: 44px solid transparent; outline-offset: -35px; } .wl-photo { outline: 44px solid transparent; outline-offset: -38px; } /* 钉子被撑开的命中区之间会重叠（相邻两枚钉离得近时）—— AMap 的 marker 层按 zIndex 排，重叠处取上层，这正是我们要的（近的优先）。 */ /* ── 便利贴：手机上收拢成一颗小胶囊 ────────────────────────────────────── 为什么："待放上墙 36 张 / 点这一张，把照片放回它被拍下的地方"这类句子 是**给站长看的动作说明**，不是给看相册的人看的。三张叠起来 156px 宽、约 250px 高， 横穿画面中部，正好压着照片最密的那一片（原话：地图上"照片最密的地方"）。 收成一颗 36px 高的胶囊：平时安静待着，想看的时候点一下展开。 */ .wl-notes { display: none; } .wl-notes.is-open { display: flex; flex-direction: column; gap: 8px; left: 14px; bottom: 108px; right: auto; max-width: min(232px, calc(100vw - 28px)); z-index: 34; background: var(--wl-paper); border: 1.5px solid var(--wl-line-2); padding: 10px; box-shadow: 0 10px 26px rgba(22,24,26,.18); } #wl-notes-toggle { position: fixed; z-index: 33; left: 14px; bottom: 70px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; cursor: pointer; font: 700 12px/1 var(--wl-hei); letter-spacing: .08em; color: var(--wl-ink); background: var(--wl-paper); border: 1.5px solid var(--wl-line-2); border-radius: 0; box-shadow: 0 2px 8px rgba(22,24,26,.12); -webkit-tap-highlight-color: transparent; } #wl-notes-toggle[aria-expanded="true"] { background: var(--wl-paper-2); } #wl-notes-toggle .n { font: 700 12px/1 var(--wl-mono); color: var(--wl-pin-red); } #wl-notes-toggle[hidden] { display: none; } /* 顶栏：小屏上必须折行 + 每一项 nowrap —— 不然"翠影华章"和"翠的足迹" 会被挤成一字一行（09-23 评审的 P0-2 就是这个，map 页修过， 其余几页各有自己的一份 .topbar，这里统一按墙的规矩再钉一遍）。 */ html[data-wall="on"] .topbar { flex-wrap: wrap; row-gap: 6px; } html[data-wall="on"] .topbar .brand, html[data-wall="on"] .topbar .who, html[data-wall="on"] .topbar a, html[data-wall="on"] .topbar button.link { white-space: nowrap; } html[data-wall="on"] .topbar .brand { letter-spacing: .1em; } html[data-wall="on"] .topbar .spacer { flex: 1 1 0; min-width: 0; } /* ── 窄屏顶栏瘦身：111px → 一行（2026-10-02 夜 · 先生第①个"必须有"）────────── 为什么：先生"当场递手机"给他看，实测顶栏占 111px（13% 屏高）且折成两行， 第一眼看到的是「翠影华章 zzy666 翠的足迹 上传照片」+「我的账户 退出登录」—— 那是**后台管理面板**，不是相册。 而这几项在手机上**全都和底部工具条重复**： · 我的账户 → 底部「我的」→ /dashboard.html（那里有完整的退出登录） · 退出登录 → 同上 （「上传照片」原来是底栏「上传」的重复项，2026-10-06 夜起底栏那颗撤了、 上传搬进相册页顶栏，所以那一颗**必须留着**——见下面的 topbar-keep 例外。） 所以窄屏把它们收起来，只留「翠影华章」与身份/登录。 ── 为什么是 `>` 直接子选择器（2026-10-02 夜踩过的坑）： 第一版写的是 `.topbar a:not([href*="login"])` —— 想藏的是顶栏自己那两个链接， 结果**把「翠的足迹」下拉面板里的 58 条 `` 一起藏了**（那个面板在 DOM 里就长在 `.topbar` 里面）。先生截图问"我的足迹呢？"，根因就是这一行： 58 条数据、文字全都在，全是 `display:none`。 选择器必须精确到"顶栏的直接子链接" —— `.topbar > a`。 ── 为什么用 :not([href*="login"])：游客的「登录 / 注册」是**唯一入口**， 脚本建的按钮 href 指向 /login.html；不能连它一起藏（藏了就谁也进不来了）。 */ html[data-wall="on"] .topbar > a:not([href*="login"]):not(.topbar-keep), html[data-wall="on"] .topbar > button.link { display: none; } html[data-wall="on"] .topbar { flex-wrap: nowrap; row-gap: 0; gap: 10px; } html[data-wall="on"] .topbar .who { margin-left: 0; } /* 时间条：小屏上 caption 让位，"自选日期"那颗胶囊不许折成三行、也不许把整页撑宽 （取证：胶囊的 nowrap 文字 166px 被挤进 120px 的盒子里 → 时间条 scrollWidth 399、 文档 412 > 390；手机浏览器于是把整页缩小去塞——P0-2 那个 0.867× 的真身） */ html[data-wall="on"] .timeline .cap { display: none; } html[data-wall="on"] .timeline .year { flex: 0 0 auto; white-space: nowrap; font-size: 12.5px; padding: 4px 9px; } html[data-wall="on"] .timeline .tl-stack { flex: 1 1 auto; min-width: 108px; } html[data-wall="on"] .timeline { gap: 10px; padding: 10px 12px 11px; } html[data-wall="on"] .place-bar { bottom: 176px !important; width: calc(100% - 20px) !important; } /* 足迹台账：六列在 390 上放不下（实测表宽 635 → 整页被撑到 672， 手机浏览器就会把整页缩小去塞——P0-2 那一类）。让**表格自己在卡里横滑**， 页面宽度就守住了 390；宁可滑，也不丢坐标那一列。 */ html[data-wall="on"] #list-card { overflow-x: auto; -webkit-overflow-scrolling: touch; } html[data-wall="on"] table.fps { min-width: 620px; font-size: 12.5px; } html[data-wall="on"] table.fps th, html[data-wall="on"] table.fps td { padding: 8px 6px !important; } } /* 地图容器自己裁边：钉旁的注记是 nowrap 的装饰，不许它在文档右侧撑出滚动条 */ html[data-wall="on"] #map { overflow: hidden; } /* ═══════════════════════════════════════════════════════════════════════════ 第四章：其余几屏也搬进这个世界（2026-10-02 · 2.0） ── 省力的正解：1.0 的每一屏都**建立在令牌上**（theme-light.css 那一套 --bg / --text / --stroke / --a1…）。与其逐个类去打补丁，不如把**令牌本身** 换成纸与墨——一处改，六屏一起换；剩下的边角再用"纸的规矩"收口： 不透明、方角、无模糊、无投影，边界由 1.5px 墨线交代。 ═══════════════════════════════════════════════════════════════════════════ */ html[data-wall="on"] { --bg-0: var(--wl-paper); --bg-1: var(--wl-paper-2); /* 墙上的光：不再是 1.0 的奶粉玫瑰，而是纸对窗的那点冷白 */ --glow-1: 236, 238, 234; --glow-2: 226, 229, 226; --glow-3: 240, 241, 237; --glass-hi: var(--wl-paper); --glass-mid: var(--wl-paper); --glass-lo: var(--wl-paper-2); --stroke: var(--wl-line); --stroke-hi: var(--wl-line-2); --text: var(--wl-ink); --text-2: var(--wl-ink-2); --muted: var(--wl-pencil); --faint: var(--wl-pencil); --a1: var(--wl-ink); /* 墨就是这一版的主色 */ --a2: var(--wl-pin-red); /* 只用在"有照片的地方" */ --ok: #3f7a55; --warn: var(--wl-ochre); --danger: var(--wl-rose); --warm: var(--wl-ochre); --on-accent: var(--wl-paper); --on-warm: #3a2c07; --shadow-1: none; --shadow-2: none; --inset-hi: none; --inset-lo: none; /* 印刷品不切圆角 —— ui.css 里那一整套圆角令牌一次全部归零 */ --r-xl: 0px; --r-lg: 0px; --r-md: 0px; --r-sm: 0px; --r-card: 0px; --r-sub: 0px; --r-inset: 0px; --r-tile: 0px; --r-pill: 0px; } /* 1.0 的背景动画层（流动光团/颗粒）在墙里全部退场：墙有墙自己的光 */ html[data-wall="on"] .ambient { display: none !important; } /* 渐变彩字 = 荧光笔；墙上写字只有一种颜色 */ html[data-wall="on"] .grad-text { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: var(--wl-ink) !important; color: var(--wl-ink) !important; } /* ── 纸面：所有"玻璃卡"变成纸卡 ── */ html[data-wall="on"] .glass, html[data-wall="on"] .glass-flat, html[data-wall="on"] .glass-tight { background: var(--wl-paper) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1.5px solid var(--wl-line-2) !important; border-radius: 0 !important; box-shadow: none !important; } html[data-wall="on"] .glass::before, html[data-wall="on"] .glass::after { display: none !important; } /* ── 字：标题黑体、注记宋体、小标等宽 ── */ html[data-wall="on"] .title-xl, html[data-wall="on"] .title-lg, html[data-wall="on"] .title-md { font-family: var(--wl-hei); color: var(--wl-ink); letter-spacing: .01em; } html[data-wall="on"] .eyebrow { font-family: var(--wl-hei); font-weight: 700; font-size: 10.5px; letter-spacing: .18em; color: var(--wl-ink-2); } html[data-wall="on"] .sub { color: var(--wl-ink-2); } html[data-wall="on"] code, html[data-wall="on"] .wl-num { font-family: var(--wl-mono); } /* ── 控件：墨线方章 ── */ html[data-wall="on"] .btn-primary { background: var(--wl-pin-red) !important; color: #fff !important; border-color: var(--wl-pin-red) !important; } html[data-wall="on"] .btn-danger { background: var(--wl-paper) !important; color: var(--wl-rose) !important; border-color: var(--wl-rose) !important; } html[data-wall="on"] .btn[disabled] { opacity: .45; } html[data-wall="on"] .input, html[data-wall="on"] input[type="text"], html[data-wall="on"] input[type="email"], html[data-wall="on"] input[type="password"], html[data-wall="on"] input[type="date"], html[data-wall="on"] input[type="search"], html[data-wall="on"] textarea, html[data-wall="on"] select { background: #fbfcfa !important; border: 1.5px solid var(--wl-line) !important; border-radius: 0 !important; color: var(--wl-ink) !important; box-shadow: none !important; } html[data-wall="on"] .input:focus, html[data-wall="on"] input:focus, html[data-wall="on"] textarea:focus, html[data-wall="on"] select:focus { border-color: var(--wl-ink) !important; outline: none !important; } html[data-wall="on"] .input::placeholder, html[data-wall="on"] input::placeholder, html[data-wall="on"] textarea::placeholder { color: var(--wl-pencil) !important; } html[data-wall="on"] .field > label { font-family: var(--wl-hei); font-weight: 700; font-size: 11px; letter-spacing: .16em; color: var(--wl-ink-2); } html[data-wall="on"] .segment { border: 1.5px solid var(--wl-line-2) !important; background: var(--wl-paper) !important; border-radius: 0 !important; } html[data-wall="on"] .segment .seg { border-radius: 0 !important; color: var(--wl-ink-2); } html[data-wall="on"] .segment .seg.active { background: var(--wl-ink) !important; color: var(--wl-paper) !important; } /* ── 标签、提示条、进度、投放区 ── */ html[data-wall="on"] .tag { border-radius: 0 !important; background: var(--wl-paper-2) !important; border: 1px solid var(--wl-line-2) !important; color: var(--wl-ink-2) !important; font-family: var(--wl-mono); letter-spacing: .02em; } html[data-wall="on"] .note { border-radius: 0 !important; background: var(--wl-paper-2) !important; color: var(--wl-ink) !important; /* 不用"左侧一道色条"那种通用做法（守则点名过它）：整圈墨线，靠**边框颜色**分状态 */ border: 1.5px solid var(--wl-line-2) !important; } html[data-wall="on"] .note-ok { border-color: var(--ok) !important; } /* 状态条同理（2026-10-08）：**颜色留在内圈当信号，外圈补一道墨线当边界**。 outline 不占布局、不动内距，等于给它套了一道印刷品的边。 */ html[data-wall="on"] .note-warn { border-color: var(--wl-ochre) !important; outline: 1.5px solid var(--wl-ink); outline-offset: 0; } html[data-wall="on"] .note-err { border-color: var(--wl-rose) !important; } html[data-wall="on"] .bar { border-radius: 0 !important; background: rgba(22,24,26,.10) !important; } html[data-wall="on"] .bar > i { border-radius: 0 !important; background: var(--wl-ink) !important; /* 进度用 scaleX 走合成层，别动 width（动 width 每帧都要重排版，检测器也点名了这一条） */ width: 100% !important; transform-origin: left center; transition: transform 260ms cubic-bezier(.22, .7, .25, 1) !important; } html[data-wall="on"] .upq .ln i { width: 100% !important; transform-origin: left center; transition: transform 260ms cubic-bezier(.22, .7, .25, 1) !important; } html[data-wall="on"] .drop { border-radius: 0 !important; border: 1.5px dashed var(--wl-line-2) !important; background: var(--wl-paper) !important; box-shadow: none !important; } html[data-wall="on"] .drop.over { border-color: var(--wl-ink) !important; background: #fbfcfa !important; } /* 照片格：一张贴上去的相纸（白边 + 一道墨线），不是圆角玻璃砖 */ html[data-wall="on"] .tile { border-radius: 0 !important; box-shadow: none !important; border: 1px solid rgba(22,24,26,.16) !important; background: #fdfdfa !important; } html[data-wall="on"] .tile img { border-radius: 0 !important; } html[data-wall="on"] .tile:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(22,24,26,.16) !important; } /* ═══ 省电档：把"贵的墙层"收掉（2026-10-02 第九轮）═══════════════════════════ 账户页那颗「高画质动效」开关（perf.js 写 `html[data-quality]`）原来只影响液态玻璃与 悬停让位的幅度；墙这一层加入之后，**真正吃显卡的是这几样**： ① 瓦片画布上的 CSS 滤镜（拖动时每帧重新光栅化一整屏） ② 两层全屏混合（`#map::before` multiply + `#map::after` screen） ③ 全站纸纹（`body::after` 的点阵层） `smooth` 档下把 ① ② ③ 全退，只留**平铺的纸色**——看着仍是纸，成本砍掉大半。 手机与核心数 ≤4 的机器默认就是 smooth（perf.js 自己判断），先生也能在账户页手动切。 */ html[data-wall="on"][data-quality="smooth"] canvas.amap-layer { filter: none !important; } html[data-wall="on"][data-quality="smooth"] #map::before { background-image: linear-gradient(178deg, rgba(233,238,242,.50), rgba(219,226,232,.58)) !important; } html[data-wall="on"][data-quality="smooth"] #map::after { content: none !important; } html[data-wall="on"][data-quality="smooth"] body::after { display: none !important; } html[data-wall="on"][data-quality="smooth"] #wallframe .neat { opacity: .5; } /* 预留滚动条槽那条**已撤**（见 ui.css 里的来龙去脉）——它是不可绘制区，铺不进去。 现在改为：满屏页的图层照旧铺满可用宽度，dock 用 `50vw` 居中（下面那条 dock 规则里）。 */ /* ── 拖动时降档（2026-10-02 第十一轮，真显卡实测得来的）───────────────────── 用干净配置的**真 Edge 窗口**（不是无头）拖同一页，量 rAF 帧间隔： A 现状（瓦片滤镜 + 两层全屏混合 + 纸纹）…… 平均 116–132 fps B 全关（省电档）……………………………… 平均 142–150 fps C **只在拖动时**关掉瓦片滤镜与 screen 层… 平均 **162–165 fps**（最差帧也最小） C 最好，而且**看不见**：手在动的时候读不出滤镜没了，松手立刻回到"印在纸上"。 （`html.map-moving` 是 1.0 就有的拖动标记，帧率探针也一直在读它。） */ html[data-wall="on"].map-moving canvas.amap-layer { filter: none !important; } html[data-wall="on"].map-moving #map::after { content: none !important; } /* ── 底部导航：**纸边的一条** → **手机 dock 那种悬浮条（先生 2026-10-09 改主意）** ────── 历史：1.0 是 `left:50% + translateX(-50%) + border-radius:999px + backdrop-filter` 的玻璃胶囊； 2026-10-08 前后墙的世界把它压成"纸的下沿"：通栏、方角、上缘一道墨线，选中项一条图钉红下划线。 **2026-10-09 先生要求「背景做成纯透明，改成类似于手机 dock 栏」** —— 于是： · 几何回到 dock：**居中悬浮、圆角、离底留白（含 iOS 安全区）**； · 但**底子纯透明**：无填充、无描边、无投影、**无模糊**（所以并没有把玻璃请回来 —— 本文件里"不要玻璃"那条规矩照旧；这里只是"没有底"，不是"玻璃底"）。 · 页面上唯一能看见的形状，就是选中项那枚会流动的胶囊（见本文件最末那段）。 ⚠️ 它一浮起来就**变高了**（离底 ＋ 栏高）：地图页那条时间尺原来按纸边高度让位的， 必须跟着抬高（见下面 `.timeline` 的 bottom:100px），否则时间尺会压在 dock 上。 */ html[data-wall="on"] .tabbar { /* ⚠️ 居中用 **50vw** 而不是 50%：`vw` 含滚动条宽度，而 `%` 是按可用宽度算的 —— 长页有 15px 滚动条、满屏页没有，用 `%` 就会"每换一页横移 7.5px"（先生 2026-10-09 报的 "每次切换页面导航栏会移动"）。`50vw + translateX(-50%)` 让所有页面的中心恒为同一个点（实测 640）。 */ left: 50vw !important; right: auto !important; bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; transform: translateX(-50%) !important; width: auto !important; max-width: calc(100% - 20px) !important; border-radius: 999px !important; /* 半透明浮层：α=0.72 让页面内容透得出来（配下面的毛玻璃/真折射）；字色改用纯墨，实测最差 5% 仍 7.15:1。 ⚠️ α 与字色都是**量出来的** —— 见 DESIGN.md「底部导航」一节里的两张对比表： α=0.55 时最差 5% 只有 2.47:1（字被照片吃掉）；抬到 0.72 并把字从墨二换成**纯墨**，才一步到位。 */ background: rgba(241, 242, 238, .72) !important; /* 毛玻璃：**故意不写 !important** —— 真折射（液态玻璃）由 tabbar.js 用内联 backdrop-filter 叠上来， 内联样式能压过不带 !important 的规则；拿不到折射（安卓/低配/省电档）时就吃这一条。 */ backdrop-filter: blur(18px) saturate(150%) brightness(1.03); -webkit-backdrop-filter: blur(18px) saturate(150%) brightness(1.03); /* 浮层该有的那点厚度：外圈一层柔和投影 ＋ 上缘一道极淡高光（先生要的"柔和折射质感"里， 这两样是 CSS 就能给的部分；真正的折射色散交给 LiquidGlass）。 */ box-shadow: 0 10px 28px rgba(22, 24, 26, .14), inset 0 1px 0 rgba(255, 255, 255, .60) !important; padding: 4px 6px !important; justify-content: center !important; gap: 0 !important; } html[data-wall="on"] .tabbar .item { border-radius: 0 !important; width: auto !important; min-width: 78px; padding: 9px 12px 8px !important; } html[data-wall="on"] .tabbar .item .ico { height: 24px; } html[data-wall="on"] .tabbar .item .ico svg { width: 22px; height: 22px; } html[data-wall="on"] .tabbar .item .lab { font-size: 11.5px; } /* 纸本世界禁渐变彩字（2026-10-03「广场」优化）：顶栏招牌一律纯墨印刷体 */ html[data-wall="on"] .topbar .brand { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: currentColor !important; color: var(--wl-ink) !important; } /* 未读消息红点（2026-10-03「广场」：挂在「我的」图标右上角） */ html[data-wall="on"] .tabbar .item { position: relative; } .tabbar .item .red-dot { position: absolute; top: 3px; right: 14px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--danger, #e5484d); color: #fff; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.25); pointer-events: none; } html[data-wall="on"] .tabbar .blob { border-radius: 0 !important; background: linear-gradient(to top, var(--wl-pin-red) 0 3px, transparent 3px) !important; } /* 地图页：时间尺与投放条给那条纸边让位 */ html[data-wall="on"] .timeline { bottom: 100px !important; } /* dock 浮起来后变高：70 → 100，别压上去 */ html[data-wall="on"] .place-bar { bottom: 168px !important; } /* ── 检测器（impeccable detect）量出来的三处，都在这儿收口 ──────────────── ① 顶栏与幽灵按钮的 :hover 在 1.0 里是 `color:#fff`——白字落在纸面上等于把字擦掉 （实测对比度 1.0:1）。纸的世界里，悬停是"墨深一点"。 ② 功能文字不得小于 11px（便利贴的键与提示行原来写到了 10 / 10.5px）。 ③ 待贴相纸上的空位，原来铺的是 45° 斜条纹（守则点名的通用做法）—— 换成一张干净的灰纸 + 铅笔虚线框。 */ html[data-wall="on"] .topbar a:hover, html[data-wall="on"] .topbar button.link:hover, html[data-wall="on"] .btn-ghost:hover, html[data-wall="on"] #lightbox .info button:hover, html[data-wall="on"] .tile .x:hover { color: var(--wl-ink) !important; background: rgba(22,24,26,.06) !important; border-color: var(--wl-line) !important; } html[data-wall="on"] .wl-note__k { font-size: 11px; letter-spacing: .14em; } html[data-wall="on"] .wl-notes .wl-note .t { font-size: 11.5px; } #wallframe .marg, #wallframe .imp { font-size: 11px; } .wl-pin__tag { font-size: 11px; } html[data-wall="on"] .wl-polaroid__ph { background: #e9eae6 !important; border: 1px dashed rgba(22,24,26,.28); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); } /* ── 轻提示：一张小纸片，不是发光胶囊 ── */ html[data-wall="on"] .toast { border-radius: 0 !important; background: var(--wl-paper) !important; border: 1.5px solid var(--wl-line-2) !important; color: var(--wl-ink) !important; box-shadow: 0 8px 20px rgba(22,24,26,.14) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; font-family: var(--wl-hei); } html[data-wall="on"] .toast-wrap { color: var(--wl-ink); } /* ── 骨架屏：纸的世界里不用"扫光"（守则点名无限横移的循环）。 2026-10-02 第五轮再改一次：**一排空白相纸依次钉上墙**—— 复用墙唯一的那一笔"落钉"，落定之后极轻地呼吸。九块按 70ms 一格错开， 眼睛看到的是"纸一张张贴上去"，而不是一整块灰在闪。 */ @keyframes wlDeck { from { opacity: 0; transform: translateY(-10px) scale(.96); } 60% { opacity: 1; } to { opacity: 1; transform: none; } } html[data-wall="on"] .skel { background: var(--wl-paper-2) !important; border-radius: 0 !important; border: 1px solid var(--wl-line) !important; box-shadow: 0 1px 2px rgba(22,24,26,.10); animation: wlDeck 460ms cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--sk, 0) * 70ms); } html[data-wall="on"] .skel::after { background: rgba(22,24,26,.06) !important; transform: none !important; opacity: 0; animation: wlBreath 2.6s ease-in-out infinite alternate !important; animation-delay: calc(var(--sk, 0) * 70ms + 520ms) !important; } @keyframes wlBreath { from { opacity: 0; } to { opacity: 1; } } html[data-wall="on"] .skel-line { border-radius: 0 !important; } /* 九格依次落下的次序（写到第 12 格，多几张也不会一起砸下来） */ html[data-wall="on"] .skel:nth-child(1) { --sk: 0 } html[data-wall="on"] .skel:nth-child(2) { --sk: 1 } html[data-wall="on"] .skel:nth-child(3) { --sk: 2 } html[data-wall="on"] .skel:nth-child(4) { --sk: 3 } html[data-wall="on"] .skel:nth-child(5) { --sk: 4 } html[data-wall="on"] .skel:nth-child(6) { --sk: 5 } html[data-wall="on"] .skel:nth-child(7) { --sk: 6 } html[data-wall="on"] .skel:nth-child(8) { --sk: 7 } html[data-wall="on"] .skel:nth-child(9) { --sk: 8 } html[data-wall="on"] .skel:nth-child(n+10) { --sk: 9 } @media (prefers-reduced-motion: reduce) { html[data-wall="on"] .skel { animation: none; } html[data-wall="on"] .skel::after { animation: none !important; opacity: .6; } } /* 投放条：手里那张照片的状态。1.0 把它放在 top:70px（那时顶栏只有 64px 高）—— 墙的顶栏是 12+68，于是它整个压在纸边上（真点到才现形，2026-10-02 用点击探针抓到的）。 挪到**时间尺正上方**：模式条与时间尺都是"底部的手"，开头那句提示也就不再盖住标题。 */ html[data-wall="on"] .place-bar { top: auto !important; bottom: 108px !important; z-index: 1260 !important; /* ⚠️ 半透明（先生 2026-10-03 凌晨："背景改成半透明"）。 —— 必须改**这里**，不能在 map.html 的