/* ==================== 鱼谱屏的 UI：把它凿进那面墙里 ==================== 这一屏是**一面凿满壁龛的墙**（背景在 js/render/props/nicheWall.js）， 每个龛里一盏封住的暖灯照着龛里那条鱼。深度轴上它在图鉴之上、鱼缸之下 （near-luminance 43.7）。 变量在 css/stone.css，挂在 `.view[data-view="codex"]` 上： --stone-face #111e1e 墙面（冷） --stone-deep #080e0e 凹进去的底 --stone-seam #060909 暗缝 --stone-lit #ffc07a **龛里那盏灯**（暖） ---- 三条判据（继承自占卜屏那一轮，完整的账在 stone.css 开头）---- ① **换底不换语义色。** 正面绿 / 负面红 / 部位色 / 珍珠金 / 血脉紫一个值 都不动——它们是**信息**。所以下面**没有一条规则碰** `--gold`、 `--sys-codex`、`.cc-lineage` 的紫、`.codex-count.full`。 ② **凸出还是凹进决定亮暗。** 凸出（按钮、铭牌）= 上沿一道 lit + 下方 seam + 接地影 凹进（龛、水槽、空龛）= 上缘 inset 阴影 + 下缘极淡的 lit 反光 ③ **体是冷的，只有窄边用 lit。** 大面积的面刷暖色会立刻读成另一种材料。 ---- ⚠️ 作用域一律 `.view[data-view="codex"]` 之内 ---- 两个理由，都踩过： · `button` / `input` / `select` 用在每一屏（对战 HUD、结算、弹窗、顶栏）。 占卜屏那一轮的 `button:hover` 是全站的，冒出过一个盖住整座宫殿的深蓝方块。 · **`.cc-*` 这一套 class 鱼谱和图鉴共用**（`.cc-name` / `.cc-desc` / `.cc-affix` 是图鉴的词条卡，`.cc-tank` / `.cc-plate` 是鱼谱的格子）。 只写 `.cc-xxx` 会直接打到图鉴屏上。 ---- 这一屏没有标签栏 ---- 所以 `variant` 和屏内过渡（stone.css 后半段）在这儿一个字都用不上。 力气全花在龛与灯的质感上。 */ /* ==================== ① 面板 = 墙上凿出来的一个大龛 ==================== ---- 面板是哪一块：**架子（.codex-list），不是 .card** ---- style.css 那一节（"鱼谱这一屏的视觉重做"）已经把这一屏的 `.card` 整个退成 透明了，理由记在那儿：台子（.backdrop-canvas）本身有描边和圆角，卡片再套 一层就是**框里套框**。那条判据仍然成立，所以这里**不给 .card 加壳**。 凿的是**架子那一块**：六个龛所在的那片墙面。标题和说明留在龛的上方—— 一行刻在墙上的字，不需要盒子（`.card > h2` 那道渐隐的底边已经是它的下划线）。 ---- ⚠️ 硬判据：面板的下沿必须落在背景的地平线上（差 < 2px）---- nicheWall 的墙脚线是 `最后一排格子的下沿 + minGap × RIM_OF_GAP`, 而 `minGap` 就是这个 grid 的 gap（`--sp-5`）。所以这里往下让出的那一段 **用同一个式子**——两边同一个输入、同一个系数，于是它们必然对齐, 不是"调到看起来差不多"。 （改这个 0.42 要同时改 nicheWall.js 的 `RIM_OF_GAP`； tools/codexUI.test.js 有一条把两个文件对着读，漏一处会红。） ---- 为什么锚在 .codex-list 上而不是 .card 上 ---- `.card` 的下沿会随**扩容按钮显不显示**上下跳 49px（满格才出现）， 而背景那一层只量得到格子。锚在架子上，两边看的是同一个盒子： `.codex-list` 没有内边距、`align-content: start`, 所以**它的下沿就是最后一排格子的下沿**——正是 nicheWall 用的那个数。 */ /* ==================== 这一屏留给背景的一个数 ==================== * * ---- 龛之间那道缝：**这一屏自己的几何量，不再借全站的 `--sp-5`** ---- * * 用户：「和背景其他砖块的缝都对不上啊」。查下去是一条硬约束—— * 对齐要求"两个龛之间的空当里至少有一条砌缝"，也就是 * * courseH ≤ 开口间距 = 这道缝 − 2·jamb * * 24px 的缝减掉两个 jamb(6.05) 只剩 **11.9**，所以 courseH 最大 11.65 * ——一个龛跨 17 层，砖细成薄石板。而原来那版 courseH 是 49.5（4 层）, * **49.5 > 11.9，它数学上就不可能对上**。那就是"缝对不上"的确切原因, * 不是调个系数的事。 * * 38px：开口间距 26 ⇒ courseH ≈ 24.8 ⇒ 一个龛跨 8 层，砖约 24.8 × 47。 * 砖看得出是块，布局也没被挤变形（面板长高约 14px）。 * * ⚠️ **别改 `--sp-5` 本身**——那是全站的分区间距档，动它会打到每一屏。 * ⚠️ 也**别和格子内部那道 `row-gap` 搞混**（`.codex-cell` 上那条，24px）： * 那是水槽和牌子之间的台面，宽度由灯芯半径反推（灯要整个落在台面上）。 * 我第一版就是把变量放到了那条上面，结果龛之间的缝一点没变、 * 台面反而变宽了——实测 `rowGap` 还是 24，courseH 还是 11.65。 * ⚠️ 扩容按钮的让位（下面 `.codex-expand-btn`）必须读**同一个**变量： * 那个 0.42 是 nicheWall 的 `RIM_OF_GAP`，两边读不同的基数就是 * "两个来源"的第九次。 */ .view[data-view="codex"] { --cx-gap: 38px; } .view[data-view="codex"] .codex-list { position: relative; /* z-index: -1 的伪元素**必须被关在这一层里**：台子那块画布是 `position: absolute; z-index: -1`（style.css 的 .backdrop-canvas）， 不隔离的话面板的面会掉到画布**后面**去，整层白画。 */ isolation: isolate; } /* 凿进去的那个面。用伪元素而不是 `.codex-list` 自己的 background, 是为了能**往外让**（负 inset）：龛口比格子那一片大出一圈, 而 grid 的盒子不能带内边距（它的下沿要等于最后一排格子的下沿，见上面）。 ⚠️ 只在**真的有格子**的时候画。空账号那一屏一个格子都没有 （`renderList` 走 emptyState 分支），那时候墙上什么都没凿， 空态自己就是那个空龛（见 ③）——不然会是"龛里套着一个龛"。 */ /* ⚠️ 这里原来是 `.codex-list:has(.codex-cell)::before`——**一个装着所有缸的 大凹坑**（半透明的 stone-deep 底 + 八边切角 + 四条不同色的内壁）。 **整条删了。** 用户：「现在鱼谱的每个框并没有嵌在墙上的感觉」。量下来有两条，都出自它： ① **一个凹口里套着一排凹口。** 层级是 墙 → 这个大坑 → 每格自己的凿口 （`.cc-glass` 上一轮就已经是"凿口"了：四条边不同色、没有 backdrop-filter）。 两级凹互相抵消：内层读作"框里的画"，不读作"墙上的洞"。 **洞该直接开在墙上**，中间这一层没有任何语义——它不是任何东西, 就是"装缸的盒子"。 ② **它把墙压平了。** 底是半透明（deep 72%/52%），画布的砌层透得过来但被 压掉近 40% 对比：实测面板区逐行 spread 10.8~14.5，面板下方 15.8~18。 于是坑里那块"墙"看着是一块平板，而不是砌好的墙。 删掉之后层级塌成 **墙 → 每格一个洞**，面板区的砌层对比回到全额。 ⚠️ 墙脚那条硬判据不靠它：地平线读的是 `codex.plate{i}` 量出来的盒子 （main.js 的 measureProps），这条规则只是把自己的下沿摆到同一条线上。 删它不影响那 0.00px——下面 `codexUI.test.js` 里那条把 CSS 和 nicheWall 对着读的测试仍然成立。 */ /* style.css 给"没有格子时的架子"加过一个虚线框 + 一层底 （`.codex-list:not(:has(.codex-cell))`）。**在这一屏撤掉**： 虚线框是 UI 的语言，而空态自己已经是一个空龛了（见 ③）—— 两层框叠起来就是"框里套框"的第三次。 */ .view[data-view="codex"] .codex-list:not(:has(.codex-cell)) { border: 0; border-radius: 0; background: none; min-height: 0; } /* ==================== ② 一格 = 龛里的一格 ==================== ---- ⚠️ 格子自己**不再画那个凹槽**：几何只能有一个来源 ---- style.css 的 `.codex-cell` 原来有描边 + 圆角 8px + 上暗下亮的内阴影, 也就是**一整套"凹进去"**。而背景那面墙已经照着这个盒子在它外面凿了一圈 （nicheWall 的凿边 + 内壁阴影）。两套叠起来是同一个形被画了两遍—— 这一轮栽过五次，每一次都是这个。 所以格子的面整个退掉，只留两件事： · **hover / focus = 这一格的灯亮起来**（不是格子浮起来。 浮起来是"卡片"的语言，而这是墙上的一个洞——洞不会浮。） · 焦点圈（可访问性的底线，不能退） ⚠️ 描边用 `transparent` 而不是 `border: 0`：盒子的尺寸一个像素都不许变—— 那个盒子是背景凿龛的依据（`data-prop="codex.cellN"`）。 */ .view[data-view="codex"] .codex-cell { /* ---- 龛腔：水槽和铭牌之间让出一道台面 ---- ⚠️ 这一条是**修一个真 bug**，不是排版偏好。灯坐在龛底 （`nicheLampAt`，和大厅那面墙共用），而龛底原来正好被半透明的铭牌 （`.cc-plate`，`rgba(9,20,34,0.66)`）盖着——**这一屏唯一的光源被牌子挡住**。 实测 1440×900：灯在 y=453.8，牌子占 369.3~459.2。 修法不是给灯加一个偏移（那就是"同一个形算两遍"的第五次）。修法是让 牌子上沿之上**真的有一道台面**：灯坐在台面上、沙铺在台面上、牌子钉在 台面下面。灯的坐标由 nicheWall 从**牌子的上沿**（`codex.plateN`, DOM 量出来的）推，所以这道缝有多宽，灯就离水槽多远——两边不会走散。 从 `--sp-2`(8) 抬到 `--sp-5`(24)：实测灯芯半径 5.2，灯要整个落在台面上 需要 ≥ 18px（8px 时灯有 11px 压在水槽那块画布底下）。24 留了余量。 代价是水槽矮了一档（实测 150 → 134 高）。**比例 2:1 一个字没动**, 所以是等比变小而不是压扁——那条血泪账在 style.css 的 .cc-tank 上 （"你只是拉伸了鱼缸"）。换到的是"龛里真的点着一盏灯"，值。 */ row-gap: var(--sp-5); border-color: transparent; /* 圆角从 8px（`--r-md`，"卡片"那一档）收到 2px。凿出来的角不是圆的, 留 2px 只是别让直角在 dpr 1 上闪锯齿。 */ border-radius: 2px; background: none; box-shadow: none; } /* 灯亮起来：暖色、**从龛底往上**（光源在那道台面上），不是从上面来的。 ⚠️ 这里不许出现位移和外阴影——那两样都是"这块东西浮起来了"。 */ .view[data-view="codex"] .codex-cell:hover, .view[data-view="codex"] .codex-cell:focus-visible { background: radial-gradient(120% 62% at 50% 96%, color-mix(in srgb, var(--stone-lit) 11%, transparent) 0%, transparent 72%); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--stone-lit) 22%, transparent); } /* 锁着的那一格点不动（`disabled`），所以它的灯不该亮——一个亮起来的 龛在说"这里有东西"，而那一格什么都没有。 */ .view[data-view="codex"] .codex-cell:disabled:hover { background: none; box-shadow: none; } /* ---- 水槽：龛里更深的那个凹槽（鱼住的地方）---- ⚠️ style.css 给它的是 `0 10px 18px -8px` 的**外**投影 + 一道**冷**的下棱 （`rgba(150,190,235,.16)`）。两样都反了： · 外投影 + 下棱 = **凸出**的语言（"缸摆在台面上"）。而世界改成沉在水底 之后这里不是缸了，是凿进墙里的凹槽——凹槽不投影在它自己外面。 · 那道棱是冷白的，而这一屏的光**只有龛里那盏暖灯**（stone.css 那张表： 鱼谱 --stone-lit 是暖的，图鉴才是冷的）。 凹的那两笔全在 `.cc-glass` 上（下面那条），这里只负责**别再说凸**。 */ .view[data-view="codex"] .cc-tank { border-radius: 2px; box-shadow: none; /* 空格 / 锁着的格子没有画布，底色画在这儿——style.css 那一版是 "一层很淡的水"。这一屏已经没有水了（画布那边 `statue: true` 把水色换成 了龛底那面石头），所以这里也得换，否则空格里还留着一汪蓝。 ⚠️ 只换底：`overflow: hidden` 和那条 `aspect-ratio: 2/1` 不动 ——比例只在 style.css 的 `.cc-tank` 一处定，那段血泪账在那儿。 */ background: linear-gradient(180deg, color-mix(in srgb, var(--stone-deep) 88%, transparent) 0%, var(--stone-deep) 100%); } /* ---- 凿边：**四条边四个色** ---- 四条边一个色 = 那不是凿出来的，是描过一圈边。 方向不是配色偏好，是这一屏唯一那条光：灯在龛底 ⇒ 凹进去的东西**上壁背光、下壁迎光**（下面那道最亮）。 */ .view[data-view="codex"] .cc-glass { border-top-color: color-mix(in srgb, var(--stone-seam) 92%, transparent); border-left-color: color-mix(in srgb, var(--stone-seam) 74%, transparent); border-right-color: color-mix(in srgb, var(--stone-lit) 20%, transparent); border-bottom-color: color-mix(in srgb, var(--stone-lit) 34%, transparent); box-shadow: inset 0 9px 15px -6px color-mix(in srgb, var(--stone-seam) 92%, transparent), inset 8px 0 13px -8px color-mix(in srgb, var(--stone-seam) 70%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--stone-lit) 22%, transparent); } /* ---- ⚠️ 罩着的那一格：**这里原来把四条边刷成了同一个色** ---- `.cc-tank.is-covered .cc-glass { border-color: rgba(120,150,190,.16) }`—— 一句 `border-color` 把上面那四条各不相同的边**一次全盖掉**。 四条边同色 = 描边，于是那三格锁着的龛看起来是"三个贴上去的方框", 而旁边三个有鱼的是"三个凿出来的洞"。同一面墙上两种做法, 眼睛立刻知道有一处是错的（和"浮雕和凹刻混在一块石头上"同一条）。 凿口的四个面**不因为罩了布就变成同一个色**——布挡住的是龛里的东西, 不是凿口本身。所以这里只把四条边整体压暗（灯被布罩着，暖光弱了一档）, 明暗关系原样保留。 */ .view[data-view="codex"] .cc-tank.is-covered .cc-glass { border-top-color: color-mix(in srgb, var(--stone-seam) 88%, transparent); border-left-color: color-mix(in srgb, var(--stone-seam) 66%, transparent); border-right-color: color-mix(in srgb, var(--stone-lit) 9%, transparent); border-bottom-color: color-mix(in srgb, var(--stone-lit) 15%, transparent); box-shadow: inset 0 8px 14px -5px color-mix(in srgb, var(--stone-seam) 90%, transparent), inset 7px 0 12px -8px color-mix(in srgb, var(--stone-seam) 64%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--stone-lit) 10%, transparent); } /* 罩布本身：冷的（它是布，不是被灯照着的石头），而且比墙面暗—— 一块盖住东西的布不反光。 */ .view[data-view="codex"] .cc-tank.is-covered { background: linear-gradient(180deg, color-mix(in srgb, var(--stone-face) 92%, #000) 0%, color-mix(in srgb, var(--stone-deep) 96%, #000) 78%, color-mix(in srgb, var(--stone-face) 88%, #000) 100%); } /* ---- 铭牌：**凸出**的一小块石片，钉在龛底那道台面下 ---- 它是这一格里唯一"凸出"的东西，所以三笔齐全（判据②）： 上沿一道 lit 的棱、下方一道 seam、底下一小片接地影。 面用 face（冷的体），只有那道棱是暖的。 ⚠️ 底必须**不透明到能读字**：牌子上有鱼名、鱼码、词条, 而它底下就是龛里那团暖光。半透明的牌子 + 背后一盏灯 = 字读不清。 */ .view[data-view="codex"] .cc-plate { border-radius: 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--stone-face) 94%, transparent) 0%, color-mix(in srgb, var(--stone-deep) 88%, transparent) 100%); /* 上沿那道棱替掉了原来的 `border-top: 1px solid var(--sys-codex)`。 ⚠️ `--sys-codex` 是**系统色**（这一屏在导航里的身份色），它没有被改掉: 标题左边那条竖杠、hover 的焦点圈都还在用它。换掉的只是"牌子的上沿 该是什么材料"——一块石片的迎光棱是灯的颜色，不是系统色。 */ border-top: 0; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 26%, transparent), 0 1px 0 color-mix(in srgb, var(--stone-seam) 90%, transparent), 0 5px 9px -6px rgba(0, 0, 0, 0.72); } /* 空格位的牌子：同一块石片，但**没有被灯照到**（龛里没有东西可照）。 ⚠️ style.css 那条 `.codex-cell.is-empty .cc-plate { border-top-color }` 在上面 `border-top: 0` 之后已经没有作用点了，所以在这里重说一遍。 */ .view[data-view="codex"] .codex-cell.is-empty .cc-plate, .view[data-view="codex"] .codex-cell.is-locked .cc-plate { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 12%, transparent), 0 1px 0 color-mix(in srgb, var(--stone-seam) 90%, transparent), 0 4px 8px -6px rgba(0, 0, 0, 0.62); } /* 空格位原来是**虚线框**。虚线是 UI 的语言（"这里可以放东西"的表单说法）, 而空着的龛自己就说得清。凿出来的洞没有虚线。 */ .view[data-view="codex"] .codex-cell.is-empty { border-style: solid; border-color: transparent; } /* ==================== ③ 空态 = 一个空着的龛 ==================== `.empty-state` 原来是"虚线框 + 一层 1.5% 的白"——一个表单占位符。 在这一屏它该是**一个空着的石龛**：灯还亮着（所以下半幅是暖的）， 龛里没有东西。一个亮着灯的空龛会说"这里会有东西"，而一个虚线框 只会说"这里什么都没有"。 ⚠️ 作用域必须带 `.view[data-view="codex"]`：`.empty-state` 是全站的 （鱼缸列表、天梯榜、天梯战绩、试炼、离线战报都用它）。 */ .view[data-view="codex"] .empty-state { border: 0; border-radius: 2px; /* 切角。和面板那块用同一个做法（凿子留下的是切角），值小一档: 这是一个龛，不是一整片墙面。 */ --chamfer: 8px; clip-path: polygon( 0 var(--chamfer), var(--chamfer) 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)) ); padding: var(--sp-6) var(--sp-5) var(--sp-5); background: /* 灯：**在龛内、坐在龛底**，所以光从下往上散。 */ radial-gradient(78% 46% at 50% 97%, color-mix(in srgb, var(--stone-lit) 15%, transparent) 0%, transparent 74%), linear-gradient(180deg, color-mix(in srgb, var(--stone-deep) 74%, transparent) 0%, color-mix(in srgb, var(--stone-deep) 48%, transparent) 100%); box-shadow: inset 0 12px 18px -7px color-mix(in srgb, var(--stone-seam) 92%, transparent), inset 0 2px 0 color-mix(in srgb, var(--stone-seam) 78%, transparent), inset 10px 0 16px -13px color-mix(in srgb, var(--stone-seam) 76%, transparent), inset -7px 0 12px -13px color-mix(in srgb, var(--stone-seam) 44%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--stone-lit) 15%, transparent), inset 0 -10px 13px -10px color-mix(in srgb, var(--stone-lit) 9%, transparent); } /* ==================== ④ 按钮：凸出的一块石头 ==================== 两个按钮：架子下面的"再开一格"（`.codex-expand-btn`）和空态里的出口 （`.es-cta`）。三笔齐全（判据②）：上沿 lit、下方 seam、接地影。 ⚠️ **绝不写裸 `button`。** 全站每一屏都有按钮（对战 HUD、结算、弹窗、 顶栏、开发面板），占卜屏那一轮的 `button:hover` 就是这么冒出来 一个盖住整座宫殿的深蓝方块的。这里只点名这一屏真实存在的两个类。 （这一屏的 DOM 里**没有** input / select / textarea——实测 0 个, 详情浮层在 `.view` 之外。所以"输入框凹进"这一条这一屏没有作用点, 写了就是一条永远不生效的死规则。） */ /* "再开一格"落在**墙脚线之下**，也就是站在地上，不压着面板的下唇。 ⚠️ 原来的 `margin-top: 8px` 让它的上沿落在 775.7，而面板的下沿在 777.8 ——按钮压在墙上 2px。让开的量就是面板往下多出来的那一段 （`calc(var(--cx-gap) * 0.42)`，和 nicheWall 的 `RIM_OF_GAP` 同一个式子） 再加一档间距。 */ /* ==================== 龛里立着的是一尊像，不是一缸水 ==================== * * 用户：「是不是改成雕塑不要移动的感觉比较好？」 * * 停帧和"没有水"在 js/ui/components/previewTank.js 里（`statue: true`： * 底色换成龛底那面石头、走到一个固定姿态画一帧、然后一个 rAF 都不跑）。 * 这里只管**石色**那一半——那是画布上的位图，滤镜是最省的一刀。 * * ---- 为什么是 0.72 而不是 1 ---- * * `grayscale(1)` 是最"石头"的，但它会撞掉一条**修过 bug 的既有判据**： * codexView 里那段账写着「**颜色是认鱼的第一线索**」——六个缸的鱼曾经 * 各自随机一个颜色，和鱼谱行上、和缸里那条都不是一个色，那被当成 bug 修过。 * 全灰等于把那次修复推平：六尊像长得一模一样，你分不出哪尊是哪条。 * * 0.72 留一丝色相：读起来是**上了色的石雕 / 带矿脉的石头**, * 既是石头，又还认得出是谁。想要纯石灰岩就把它调到 1。 * * 另外两笔：亮度压一档（龛里没有直射光，只有那盏封住的灯）、 * 对比抬一点（石头靠凹凸受光说形，中间调糊在一起就没有形了）。 */ .view[data-view="codex"] .cc-jar { filter: grayscale(0.72) brightness(0.92) contrast(1.12); } .view[data-view="codex"] .codex-expand-btn { margin-top: calc(var(--cx-gap) * 0.42 + var(--sp-2)); } .view[data-view="codex"] .codex-expand-btn, .view[data-view="codex"] .empty-state .es-cta { /* 虚线边（`.codex-expand-btn` 原来是 `1px dashed #3a5a86`）撤掉: 虚线是"占位/可添加"的表单语言，而这是一块**按得下去的石头**。 */ border: 1px solid color-mix(in srgb, var(--stone-seam) 80%, transparent); border-radius: 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--stone-face) 96%, transparent) 0%, color-mix(in srgb, var(--stone-deep) 90%, transparent) 100%); box-shadow: /* 上沿迎光的那道棱——凸出的全部内容就是它 */ inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 24%, transparent), /* 下方的暗缝 + 接地影 */ 0 1px 0 color-mix(in srgb, var(--stone-seam) 92%, transparent), 0 6px 11px -7px rgba(0, 0, 0, 0.7); } .view[data-view="codex"] .codex-expand-btn:hover:not(:disabled), .view[data-view="codex"] .empty-state .es-cta:hover { /* 按上去之前：灯照得更足一点。**不做位移**——一块砌在墙上的石头不会抬起来。 */ border-color: color-mix(in srgb, var(--stone-lit) 30%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--stone-face) 100%, transparent) 0%, color-mix(in srgb, var(--stone-deep) 84%, transparent) 100%); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 38%, transparent), 0 1px 0 color-mix(in srgb, var(--stone-seam) 92%, transparent), 0 7px 13px -7px rgba(0, 0, 0, 0.74); } /* 按下去 = **凹进去**：上下颠倒（判据②的反面用法）。 */ .view[data-view="codex"] .codex-expand-btn:active:not(:disabled), .view[data-view="codex"] .empty-state .es-cta:active { background: linear-gradient(180deg, color-mix(in srgb, var(--stone-deep) 92%, transparent) 0%, color-mix(in srgb, var(--stone-face) 88%, transparent) 100%); box-shadow: inset 0 3px 6px -2px color-mix(in srgb, var(--stone-seam) 92%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--stone-lit) 16%, transparent); } /* ==================== ⑤ 窄屏 ==================== 768 以下 style.css 把架子收成一列。那一档格子会变高（一列的宽度全给 一个格子），龛腔那道台面按 `--sp-5` 走仍然够——灯的坐标是从**牌子的上沿** 推的，牌子在哪它就在哪，不随列数变。所以这里没有额外规则。 （四个宽度 1240 / 1440 / 1920 / 2560 都在三列那一档，实测无重叠、 纵滚横溢 0，账在这一轮的报告里。） */ /* ⚠️ 「凑近看一条鱼」那块石板的样式**不在这个文件里**，在 css/fishDetail.css。 它挂在 `document.body` 上（浮层不能被 `.view` 的 overflow/transform 裁掉）, 所以够不到这一屏的 `.view[data-view="codex"]` 作用域——而这个文件的规矩 正是"每一条选择器都限定在那之内"（顶上那段，测试钉着）。 够不到作用域的东西就不该待在这儿。 */