.splash[data-v-5510812e] { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; overflow: hidden; } .splash-bg[data-v-5510812e] { position: absolute; inset: 0; background-image: url('./bg-start-DlULSr5k.jpg'); background-size: cover; background-position: center; } /* 米白柔光（仅托住文字块）+ 底部暖暗收边：壁纸是白天版（亮蓝天白云）， 文字改用深墨色，与游戏主色板（米白 rgba(255,252,246) + 陶土红 var(--primary)）一致 */ .splash-overlay[data-v-5510812e] { position: absolute; inset: 0; background: radial-gradient(ellipse 44% 30% at 50% 46%, rgba(var(--panel-rgb), 0.46) 0%, rgba(var(--panel-rgb), 0.30) 52%, rgba(var(--panel-rgb), 0.10) 78%, rgba(var(--panel-rgb), 0) 92%), linear-gradient(180deg, rgba(93, 42, 16, 0.10) 82%, rgba(93, 42, 16, 0.20) 100%); } .splash-content[data-v-5510812e] { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 24px; user-select: none; transform: translateY(-6%); } .splash-title[data-v-5510812e] { font-size: 60px; font-weight: 900; color: #40211a; /* 深墨：白天版壁纸上的主标题色 */ text-shadow: 0 2px 12px rgba(255, 255, 255, 0.95), 0 0 34px rgba(255, 255, 255, 0.7); letter-spacing: 6px; line-height: 1.15; } .splash-sub[data-v-5510812e] { color: #8a4626; font-size: 18px; font-weight: 700; letter-spacing: 2px; text-shadow: 0 1px 3px rgba(255, 255, 255, 1), 0 0 16px rgba(255, 255, 255, 0.95); } /* ── 磨砂玻璃按钮（2026-09-25 用户：「开始游戏按钮改成磨砂透明背景，试玩按钮样式同步、大小调小」）── 改前是**不透明主色渐变**（橘红实心）。底色透明之后，字色不能再靠实心底兜底 ⇒ 必须跟主题走： 浅色壁纸（白天蓝天 + 米白柔光）用深墨字；夜景壁纸（压暗层）翻白字 —— 深色那套按本项目约定写在 main.css 的 `html[data-theme='dark'] .splash-*` 一组里，与 .splash-bg/.splash-title 放在一起。 ⚠️ 玻璃配方**只写这一处**（两枚按钮共用同一段选择器列表）：改一处两枚一起变，不会出现主/次按钮材质漂移。 ⚠️ backdrop-filter 在本项目被大面积清过（面板压在滚动内容上会「整块面板晃」）；启动页**不滚动**， 是少数可以安全用模糊的地方（原实心按钮本来就带 blur(8px)）。别把这段配方抄到游戏内的面板/卡片上。 */ .splash-start-btn[data-v-5510812e], .splash-guest-btn[data-v-5510812e] { cursor: pointer; background: linear-gradient(180deg, rgba(var(--glass-rgb), 0.30), rgba(var(--glass-rgb), 0.13)); border: 1px solid rgba(var(--glass-rgb), 0.6); backdrop-filter: blur(16px) saturate(1.35); -webkit-backdrop-filter: blur(16px) saturate(1.35); box-shadow: 0 10px 26px rgba(93, 42, 16, 0.2), inset 0 1px 0 rgba(var(--glass-rgb), 0.55); color: #40211a; /* 与 .splash-title 同一支深墨，浅色下玻璃是亮的 */ text-shadow: 0 1px 0 rgba(var(--glass-rgb), 0.45); transition: transform 0.15s, background 0.15s, box-shadow 0.15s, border-color 0.15s; } .splash-start-btn[data-v-5510812e]:hover, .splash-guest-btn[data-v-5510812e]:hover { transform: translateY(-2px); background: linear-gradient(180deg, rgba(var(--glass-rgb), 0.44), rgba(var(--glass-rgb), 0.22)); border-color: rgba(var(--glass-rgb), 0.78); box-shadow: 0 14px 32px rgba(93, 42, 16, 0.28), inset 0 1px 0 rgba(var(--glass-rgb), 0.68); } /* 主按钮的**尺寸**只在这一段（别把 padding/字号并进上面的共用配方，否则试玩按钮会跟着变大） */ .splash-start-btn[data-v-5510812e] { font-size: 20px; font-weight: 600; letter-spacing: 4px; padding: 14px 48px; border-radius: 16px; margin-top: 10px; } .start-slot-modal[data-v-5510812e] { width: min(520px, 94vw); } /* 试玩入口：**同一块玻璃、降一档尺寸**（2026-09-25 用户「只要试玩两个字」）。 两字药丸：字号比主按钮小一档、字距同步收窄，内外边距按「两字」定，视觉重量明确低于主按钮。 ⚠️ 别再加说明行/图标——上一版就是被「🧪 + 免建档试玩 + 不存档·刷新即清空」撑成和主按钮同宽的。 */ .splash-guest-btn[data-v-5510812e] { font-size: 15px; font-weight: 600; letter-spacing: 4px; padding: 7px 22px; border-radius: 999px; margin-top: 2px; text-indent: 4px; /* letter-spacing 会在末字后留一格，这里补回来让「试玩」视觉居中 */ } .start-slot-modal .slot-info[data-v-5510812e] { margin: 6px 0 4px; } .bgm-player[data-v-5e4e0849] { position: fixed; right: 14px; bottom: 0; /* 2026-09-19 用户要求触底（原先 14px 悬空，压在底栏上沿显得浮着） */ z-index: 40; /* 高于内容与侧栏、低于弹窗（弹窗 50/999） */ display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: calc(100vw - 28px); } /* 玻璃胶囊（与 .card 同材质：面板色 + blur + 描边）；左侧暂停钮 + 右侧展开钮 */ .bgm-pill[data-v-5e4e0849] { display: flex; /* ⚠️ stretch 而不是 center：胶囊定高 24px（= 旁边五个功能胶囊的高度，2026-09-21 用户要求 「BGM 胶囊大小适配为旁边五个胶囊的大小」），子按钮靠 stretch 拉满同高、文字各自居中。 原先竖 padding 7px ⇒ 33px（窄屏那条 `padding: 7px 10px` 更把它撑到 47px），看起来是两块东西。 */ align-items: stretch; height: var(--dock-pill-h); /* 表面与旁边五个功能胶囊**逐项对齐**（2026-09-21 用户：「右边胶囊比左边的小」）—— 单看高度两边都是 24px（矢量与 8 倍栅格都量过），但原先这里是 panel 0.82 + blur14 + 落影 + 顶部内高光， 而 `.dock-pill` 是 panel 0.72 + blur10 且**没有**落影/高光 ⇒ 亮底上看着比左边发虚、显小。 现全部取功能胶囊的值（落影与内高光去掉；面板 `.bgm-panel` 仍保留自己的浮层材质）。 */ max-width: 100%; border-radius: 999px; background: rgba(var(--panel-rgb), 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--border); overflow: hidden; } .bgm-pill[data-v-5e4e0849]:hover { border-color: var(--primary); } /* 关闭态**不再整条降透明度**（那会让它比旁边胶囊发虚、显小），改用名字颜色表达「已关闭」 */ .bgm-pill--off .bgm-name[data-v-5e4e0849] { color: var(--muted); } .bgm-tbtn[data-v-5e4e0849] { border: none; background: transparent; color: var(--text); font-size: 12px; cursor: pointer; /* 竖向 padding 归零、横向保持原值：高度由 `--dock-pill-h` 定死（子项靠 stretch 拉满同高）， 而**横向不能动** —— 一改横向 padding，胶囊宽度就变，`.dock` 的 `right: 250px`（= 14+228+8）随之失效。 */ display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; } .bgm-tbtn[data-v-5e4e0849]:hover { background: rgba(var(--primary-rgb), 0.10); } /* ⏸ / ▶ 的字形宽度不同（实测 13px 字号下 25px vs 23.2px）⇒ 播放态与暂停态整个胶囊会差 1.8px。 定宽到「宽的那一档」并居中，两种状态宽度完全一致（播放态观感不变）。 */ .bgm-tbtn--play[data-v-5e4e0849] { color: var(--primary-strong); /* 主色当文字在浅底上不达标 → 深档（2026-09-26）*/ font-size: 13px; flex: 0 0 auto; width: 25px; padding-left: 0; padding-right: 0; } .bgm-open[data-v-5e4e0849] { border: none; background: transparent; color: var(--text); font-size: 12px; cursor: pointer; } .bgm-open[data-v-5e4e0849] { display: flex; align-items: center; gap: 6px; padding: 0 12px 0 9px; } .bgm-open[data-v-5e4e0849]:hover { background: rgba(var(--primary-rgb), 0.10); } /* 胶囊最左一格现在是 ⏮（原先 🔊 的位置，2026-09-18），那条分隔竖线跟着它走 */ .bgm-pill > .bgm-tbtn[data-v-5e4e0849]:first-child { border-left: 1px solid var(--border); } /* 模式按钮行（面板底部） */ .bgm-mode-row[data-v-5e4e0849] { display: flex; gap: 5px; margin-bottom: 7px; } .bgm-mode[data-v-5e4e0849] { flex: 1; padding: 4px 6px; border-radius: 7px; border: 1px solid var(--border); background: transparent; color: var(--text); font-size: 11px; cursor: pointer; white-space: nowrap; } .bgm-mode[data-v-5e4e0849]:hover { border-color: var(--primary); } .bgm-mode.on[data-v-5e4e0849] { background: rgba(var(--primary-rgb), 0.16); border-color: rgba(var(--primary-rgb), 0.45); color: var(--primary); } @keyframes bgm-spin-5e4e0849 { from { transform: rotate(0) } to { transform: rotate(360deg) } } /* ⚠️ 必须是**固定 width**，不能只写 max-width（2026-09-18 用户报「播放器老是变短变长」）： 原先只有 max-width ⇒ 名字区随内容伸缩（实测「自动」24px / 4 字曲名 48px / 变奏曲名 83px / 带「已暂停 ·」前缀 130px），整个胶囊因此在 197~275px 之间来回变。 92px = 最长曲名「灶火慢烹 · 其二」实测 83px + 余量（换平台字体回退更宽时由 ellipsis 兜底，宽度仍恒定）。 */ .bgm-name[data-v-5e4e0849] { width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bgm-caret[data-v-5e4e0849] { font-size: 10px; color: var(--muted); } /* 展开面板（向上展开：在胶囊之上，故用 column 顺序 + 出现在 DOM 前） */ .bgm-panel[data-v-5e4e0849] { width: min(300px, calc(100vw - 28px)); display: flex; flex-direction: column; border-radius: 12px; background: rgba(var(--panel-rgb), 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--border); box-shadow: 0 6px 22px rgba(var(--ink-rgb), 0.26), inset 0 1px 0 rgba(var(--glass-rgb), 0.55); overflow: hidden; } .bgm-head[data-v-5e4e0849] { display: flex; align-items: center; gap: 8px; padding: 9px 10px 7px; border-bottom: 1px dashed var(--border); } .bgm-title[data-v-5e4e0849] { font-size: 12px; font-weight: 600; } .bgm-scene[data-v-5e4e0849] { font-size: 11px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bgm-hbtn[data-v-5e4e0849] { border: none; background: transparent; color: var(--text); cursor: pointer; font-size: 12px; padding: 2px 5px; border-radius: 6px; } .bgm-hbtn[data-v-5e4e0849]:hover { background: rgba(var(--primary-rgb), 0.12); } .bgm-hbtn[data-v-5e4e0849]:disabled { color: var(--muted); cursor: default; } .bgm-list[data-v-5e4e0849] { max-height: 246px; overflow-y: auto; padding: 4px; } .bgm-row[data-v-5e4e0849] { width: 100%; display: flex; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text); font-size: 12px; text-align: left; cursor: pointer; } .bgm-row[data-v-5e4e0849]:hover { background: rgba(var(--primary-rgb), 0.10); } .bgm-row.on[data-v-5e4e0849] { background: rgba(var(--primary-rgb), 0.16); border-color: rgba(var(--primary-rgb), 0.45); color: var(--primary); } .bgm-row-ico[data-v-5e4e0849] { width: 12px; color: var(--primary); flex-shrink: 0; } .bgm-row-name[data-v-5e4e0849] { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bgm-row-tag[data-v-5e4e0849] { font-size: 10px; flex-shrink: 0; max-width: 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bgm-foot[data-v-5e4e0849] { padding: 7px 10px 9px; border-top: 1px dashed var(--border); } .bgm-vol[data-v-5e4e0849] { display: flex; align-items: center; gap: 7px; font-size: 11px; } /* 展开动画：从胶囊处向上"长出来" */ .bgm-pop-enter-active[data-v-5e4e0849], .bgm-pop-leave-active[data-v-5e4e0849] { transition: opacity 0.18s ease, transform 0.18s ease; } .bgm-pop-enter-from[data-v-5e4e0849], .bgm-pop-leave-to[data-v-5e4e0849] { opacity: 0; transform: translateY(10px) scale(0.98); } /* 窄屏：只留图标与箭头，面板收窄（e2e 会查 390px 无横向溢出） */ @media (max-width: 720px) { .bgm-name[data-v-5e4e0849] { display: none; } /* 窄屏也不再靠竖 padding 撑高（那正是「BGM 比旁边胶囊高一截」的另一半原因），只留横向内边距 */ .bgm-pill[data-v-5e4e0849] { padding: 0 10px; } .bgm-panel[data-v-5e4e0849] { width: min(268px, calc(100vw - 24px)); } } .skill-guide-modal[data-v-dbabf9cc] { width: min(620px, 92vw); } .skill-guide-body[data-v-dbabf9cc] { padding: 4px 2px; } .skill-guide-intro[data-v-dbabf9cc] { margin: 0 0 10px; font-size: 14px; line-height: 1.6; } .skill-guide-points[data-v-dbabf9cc] { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; } .skill-guide-points li[data-v-dbabf9cc] { font-size: 13px; line-height: 1.65; } .sg-bold[data-v-dbabf9cc] { font-weight: 700; color: var(--primary); } /* 深色皮肤下 `--primary` 当小字只有 3.3~4.0 对比度（与 .era-name / .best-flag 同一原因）， 换成「淡彩底上的文字」token（皮肤按 shade(pd, 0.45) 提亮推导）。 */ html[data-theme='dark'] .sg-bold[data-v-dbabf9cc] { color: var(--on-primary-tint); } .sg-foot[data-v-dbabf9cc] { margin: 12px 0 0; font-size: 12px; } .feature-guide-modal[data-v-d4a739ea] { width: min(660px, 92vw); } .fg-body[data-v-d4a739ea] { padding: 4px 2px; } .fg-meta[data-v-d4a739ea] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; font-size: 12px; } .fg-pill[data-v-d4a739ea] { padding: 1px 8px; border-radius: 999px; background: rgba(var(--primary-tint-rgb), 0.12); /* 浅色：12% 主色淡彩底上的字（实测 2.29~4.42）⇒ 最深档；深色有自己的覆盖（--on-primary-tint-4）*/ color: var(--primary-deep); font-size: 11px; } /* 深色下 `--primary` 当小字对比度不足（与 .sg-bold 同一原因）→ 用淡彩底文字 token */ html[data-theme='dark'] .fg-pill[data-v-d4a739ea] { color: var(--on-primary-tint-4); } .fg-desc[data-v-d4a739ea] { font-size: 13px; line-height: 1.7; } .fg-desc[data-v-d4a739ea] b { color: var(--primary); } html[data-theme='dark'] .fg-desc[data-v-d4a739ea] b { color: var(--on-primary-tint); } .fg-foot[data-v-d4a739ea] { margin: 14px 0 0; font-size: 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .fg-link[data-v-d4a739ea] { font-size: 11px; padding: 1px 8px; } /* 比默认弹窗宽一点（三张卡 + 一行五个小按钮时 560 会挤），窄屏仍留 6vw 边距 */ .save-modal[data-v-826a51c5] { width: min(600px, 94vw); } /* 游客会话横幅：压在弹窗顶部，常年可见（颜色走 warn 语义 token，两套主题都有定义） */ .guest-notice[data-v-826a51c5] { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--warn-strong); background: var(--warn-soft); /* ⚠️ 文字用 `--bad-strong` 而不是 `--warn-strong`：后者（浅色 #bf7200）压 `--warn-soft` 实测只有 3.3:1 —— AGENTS 里记过同一坑（料理不足那行）。语义底仍走 warn，只有文字换深色档。 */ color: var(--bad-strong); font-size: 12.5px; line-height: 1.5; } .sv-list[data-v-826a51c5] { display: flex; flex-direction: column; gap: 10px; } .sv-slot[data-v-826a51c5] { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 11px; border: 1px solid var(--border); border-radius: 12px; background: rgba(var(--panel-soft-rgb), 0.86); } /* 「当前」：左侧一条主色竖条 + 主色描边（比原来只换描边更一眼可辨，且不靠底色区分） */ .sv-slot--cur[data-v-826a51c5] { border-color: var(--primary); box-shadow: inset 3px 0 0 var(--primary); } .sv-slot--empty[data-v-826a51c5] { border-style: dashed; } .sv-head[data-v-826a51c5] { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; } .sv-no[data-v-826a51c5] { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 7px; font-size: 12px; font-weight: 700; background: rgba(var(--primary-tint-rgb), 0.18); color: var(--primary); } .sv-name[data-v-826a51c5] { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sv-tags[data-v-826a51c5] { display: inline-flex; gap: 6px; } .sv-hardcore[data-v-826a51c5] { background: var(--bad-soft); color: var(--bad-strong); } .sv-meta[data-v-826a51c5] { margin: 0; font-size: 12.5px; color: var(--text-dim); } .sv-meta i[data-v-826a51c5] { font-style: normal; opacity: 0.5; margin: 0 6px; } .sv-meta--empty[data-v-826a51c5] { line-height: 1.45; } .sv-hard[data-v-826a51c5] { font-size: 12.5px; } /* 主操作：两列等宽（「读取」与「保存」强度分明但尺寸一致，不再一宽一窄） */ .sv-acts[data-v-826a51c5] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .sv-wide[data-v-826a51c5] { grid-column: 1 / -1; } /* 次要操作：小号幽灵按钮一排；不放宽、不抢主操作的位置 */ .sv-mini[data-v-826a51c5] { display: flex; flex-wrap: wrap; gap: 6px; } .sv-ghost[data-v-826a51c5] { font-size: 12px; padding: 4px 10px; background: transparent; border-color: var(--border); color: var(--text-dim); } .sv-ghost[data-v-826a51c5]:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); } .sv-ghost--danger[data-v-826a51c5] { color: var(--bad-strong); } .sv-foot[data-v-826a51c5] { margin: 10px 0 0; font-size: 12.5px; color: var(--text-dim); } .sv-snaps[data-v-826a51c5] { margin-top: 10px; padding: 9px 11px; border: 1px dashed var(--border); border-radius: 12px; } .sv-snaps-head[data-v-826a51c5] { font-size: 12.5px; font-weight: 600; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .sv-snap-row[data-v-826a51c5] { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 12px; } /* 🔴 游客态下**整面板按钮都是禁用的**，而全局 `.btn:disabled { opacity: 0.45 }` 会把主按钮的 白字一起洗淡 —— 浅色主题下实测只剩 **2.9:1**（「不可用」变成「看不清」）。这里改成实底禁用色： 可读（--muted 压在面板底上）、又一眼看出点不动。只作用于本弹窗，不动全局禁用态（别的地方在用）。 */ .sv-slot button[data-v-826a51c5]:disabled { opacity: 1; background: rgba(var(--panel-raised-rgb), 1); color: var(--muted); border-color: var(--border); } .settings-modal[data-v-54e7d653] { width: min(600px, 94vw); } .settings-tabs[data-v-54e7d653] { margin-bottom: 8px; } .settings-body[data-v-54e7d653] { display: flex; flex-direction: column; gap: 8px; max-height: min(62vh, 540px); overflow-y: auto; overflow-x: hidden; padding-right: 2px; } .set-group[data-v-54e7d653] { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 10px; background: rgba(var(--panel-soft-rgb), 0.5); } .set-group > h4[data-v-54e7d653] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; font-size: 12.5px; font-weight: 700; color: var(--text-dim); } .set-note[data-v-54e7d653] { margin: 0; font-size: 12px; } .seg[data-v-54e7d653] { display: flex; gap: 6px; } .skin-picker[data-v-54e7d653] { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; } .skin-chip[data-v-54e7d653] { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--text); border: 1px dashed var(--border); background: var(--bg-soft); } .skin-chip-name[data-v-54e7d653] { white-space: nowrap; } .skin-chip.on[data-v-54e7d653] { border-style: solid; border-color: var(--primary-strong); background: rgba(var(--primary-tint-rgb), 0.15); font-weight: 700; } .skin-chip.locked[data-v-54e7d653] { opacity: 0.6; } .skin-need[data-v-54e7d653] { font-size: 11px; } .encounter-modal[data-v-c27648ba] { max-width: 420px; } .encounter-body[data-v-c27648ba] { line-height: 1.7; white-space: pre-wrap; margin: 6px 0 12px; } .encounter-choices[data-v-c27648ba] { display: flex; flex-direction: column; gap: 8px; } .encounter-choice[data-v-c27648ba] { text-align: left; padding: 10px 14px; } .newbie-guide[data-v-035b42f3] { display: flex; align-items: center; gap: 8px; /* 2026-09-18：与 GoalStrip 同处一行（.head-strips），竖向 margin 收进容器、自身不撑满整行 */ margin: 0; flex: 0 1 auto; min-width: 0; padding: 3px 8px; border-radius: 8px; /* 2026-09-19 用户反馈「底色太丑」：原来的粉红渐变压在壁纸上发脏、虚线框也显随意。 改成与其它卡片同材质的**面板底 + 左侧主色竖条**（身份感靠那一条竖线，而不是整块染色）。 */ background-color: rgba(var(--panel-rgb), 0.92); border: 1px solid var(--border); border-left: 3px solid var(--primary-tint); font-size: 13px; } .newbie-count[data-v-035b42f3] { font-size: 12px; font-weight: 700; /* 浅色：25%~14% 主色淡彩底上的字用最深档（实测 4.27~4.44，差一点点）*/ color: var(--primary-deep); background: rgba(var(--primary-tint-rgb), 0.14); border-radius: 6px; padding: 1px 6px; flex: 0 0 auto; } /* 单行不折（2026-09-19）：它现在住在**底栏**里，一旦折成两行整条底栏就高 52px、 用户反馈「上下高度还是太高了」。文案超出时截断并靠 title 兜底，而不是把底栏撑高。 */ .newbie-guide[data-v-035b42f3] { flex-wrap: nowrap; } .newbie-step[data-v-035b42f3], .newbie-where[data-v-035b42f3] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .newbie-step[data-v-035b42f3] { font-weight: 600; color: var(--primary-strong); flex: 0 1 auto; } .newbie-where[data-v-035b42f3] { font-size: 12px; flex: 0 1 auto; } /* 奖励预览：常驻显示「完成能拿什么」——放置类留人的第一根胡萝卜 */ .newbie-reward[data-v-035b42f3] { font-size: 12px; /* 浅色：`--gold` 压 12% 金光底实测只有 3.78 ⇒ 用金色深档（本篇最多的一类，165 处）*/ color: var(--gold-strong); background: var(--gold-glow); border: 1px solid var(--gold); border-radius: 999px; padding: 1px 8px; white-space: nowrap; } .newbie-close[data-v-035b42f3] { margin-left: auto; padding: 1px 8px; } /* 当前页 ≠ 该步的目标页 → 淡化（去掉主色强调，退成一条普通提示；✕ 保持正常可见） 2026-09-11：此前它在每个页面都高亮显示，且定位文案含「技能页 · 采摘」， 在「今日待办」等页面上会被误读成「页面内容/跳到了采摘页」。 */ .newbie-guide.newbie-dim[data-v-035b42f3] { background: var(--bg-soft, rgba(var(--panel-rgb), 0.6)); border-color: var(--border); } .newbie-guide.newbie-dim .newbie-step[data-v-035b42f3] { color: var(--muted); font-weight: 500; } .newbie-guide.newbie-dim .newbie-where[data-v-035b42f3] { opacity: 0.85; } .newbie-guide.newbie-dim .newbie-reward[data-v-035b42f3] { opacity: 0.75; } /* 面板内的排版：与底栏其它分区一致（不透明底由 `.dock-panel` 提供，这里只管行内布局） */ .plan-panel[data-v-d0f99688] { display: flex; flex-direction: column; gap: 6px; font-size: 12px; } .plan-head[data-v-d0f99688] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .plan-head-btns[data-v-d0f99688] { margin-left: auto; display: flex; gap: 4px; } .plan-steps[data-v-d0f99688] { display: flex; flex-direction: column; gap: 3px; max-height: 128px; overflow-y: auto; } .plan-step[data-v-d0f99688] { display: flex; align-items: center; gap: 6px; padding: 2px 6px; border-radius: 6px; } .plan-step.plan-cur[data-v-d0f99688] { background: rgba(var(--primary-tint-rgb), 0.16); border: 1px solid var(--primary); } .plan-add[data-v-d0f99688] { display: flex; gap: 4px; flex-wrap: wrap; } .dock[data-v-5286088e] { /* 2026-09-20 用户要求：五个胶囊**靠在右下角 BGM 胶囊的左边**（原先挤在底栏里会折成两排）。 改成与 BGM 播放器同款的 fixed 浮层：同一水平线、同一底边（bottom: 0），右侧留出 BGM 的宽度+间距。 z-index 40 与 BGM 同级（低于弹窗 50、低于本组件自己的关闭层 41 与面板 42）。 */ position: fixed; /* 2026-09-21：间距从 8px 收到 **5px** —— 与五个胶囊彼此的 gap 一致，整条读起来才是**一排**（用户： 「BGM 胶囊是不是融合进底栏了」）。值 = 14(BGM 右距) + 227.6(实测 BGM 胶囊宽) + 5(同排间距) ≈ 247。 ⚠️ 改 BGM 胶囊的横向 padding/字号会让它的宽度变、这里必须跟着改；`e2e-test` 的 BGM 用例 ⑦ 有「第 5 个胶囊与 BGM 胶囊的间距 == 胶囊彼此的间距」行为断言兜住漂移。 */ right: 247px; bottom: 0; /* ⚠️ 46 而不是 40：手机底部导航（`.mobile-nav`）是 `fixed; bottom:0; z-index:40` 且在 DOM 里 排在中间列**之后** ⇒ 同层级下会盖住胶囊（实测 390px 下点胶囊一直等超时）。 46 高于导航与 BGM 胶囊(40)、低于弹窗(50)；本组件自己的关闭层 41 / 面板 42 仍在胶囊之下， 所以「面板开着时还能点另一个胶囊」（见 .dock-pill 的 z-index:43）。 */ z-index: 46; display: flex; align-items: center; gap: 5px; max-width: calc(100vw - 40px); justify-content: flex-end; flex-wrap: wrap; } .dock-pill[data-v-5286088e] { /* ⚠️ 必须抬到点外关闭层之上（层级都在 `.head-strips` 这个 z-index:20 的上下文里）： 否则面板一旦打开，透明层就盖住胶囊 → **切不了块**（只能先关再开），实测点第二个胶囊会一直等超时。 43 > 关闭层 41、也 > 面板 42；面板在底栏**上方**弹出，两者不重叠。 */ position: relative; z-index: 43; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; /* 高度与 BGM 胶囊共用同一个 token（2026-09-21 用户要求「BGM 胶囊大小适配成旁边五个胶囊」）： 两者在右下角排成**一条**胶囊带，高矮必须一致 —— 改高度只改 `main.css` 的 `--dock-pill-h`。 */ height: var(--dock-pill-h); font-size: 12px; color: var(--text); background: rgba(var(--panel-rgb), 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; white-space: nowrap; } .dock-pill[data-v-5286088e]:hover { border-color: var(--primary); } .dock-pill--on[data-v-5286088e] { border-color: var(--primary); background: rgba(var(--primary-tint-rgb), 0.14); } .dock-pill-icon[data-v-5286088e] { flex: 0 0 auto; } /* 「有事可做」的点（原顶栏 ⚡ 的点：每日任务可领 / 未领邮件） */ .dock-pill-dot[data-v-5286088e] { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex: 0 0 auto; } .dock-pill-dot.dot-on[data-v-5286088e] { background: var(--bad); box-shadow: 0 0 6px var(--bad); } .dock-pill-text[data-v-5286088e] { flex: 0 0 auto; } .dock-pill-num[data-v-5286088e] { flex: 0 0 auto; font-size: 11px; color: var(--text-dim); } .dock-pill-bar[data-v-5286088e] { flex: 0 0 auto; width: 46px; display: flex; align-items: center; } /* ⚠️ 容器是 flex ⇒ 子组件成 flex 项、按内容算宽（ProgressBar 根会塌成 0 宽，进度条看不见） */ .dock-pill-bar[data-v-5286088e] > .progress-bar { flex: 1 1 auto; width: 100%; } .dock-pill-caret[data-v-5286088e] { flex: 0 0 auto; opacity: 0.6; font-size: 10px; } /* 透明点外关闭层（盖住整屏，但不改配色） */ .dock-catcher[data-v-5286088e] { position: fixed; inset: 0; z-index: 41; background: transparent; } /* 面板：从底栏**向上**弹出（`bottom: 100%`），右侧留出 BGM 胶囊的位置（与 `.head-strips` 的 padding-right 同源） */ .dock-panel[data-v-5286088e] { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 42; width: min(520px, calc(100vw - 40px)); max-height: min(70vh, 620px); display: flex; flex-direction: column; background: rgba(var(--panel-rgb), 0.97); border: 1px solid var(--border); border-radius: 12px; /* ⚠️ 只留外阴影，**不要** `inset 0 1px 0 rgba(var(--glass-rgb), …)` 这种白色内高光： 深色体检（e2e-dark）会把它判成「白边/白辉」（计算值就是 rgba(255,255,255,α)）， 而深色主题里 `.card` 的那条是被专门覆盖掉的 —— 新容器别自己又加回来。 */ box-shadow: 0 8px 28px rgba(var(--scrim-rgb), 0.28); overflow: hidden; scrollbar-gutter: stable; /* 滚动条出现/消失时不让内容宽度跳 */ /* ⚠️ 这里**不要**加 backdrop-filter：底色已经是不透明的（0.94+），模糊看不出差别， 却会让滚动时整块面板跟着背景重采样 —— 就是「面板里所有元素跟着滚」的成因 （2026-09-23 用户报右面板；项目里带动态进度条的卡片早有同样处置）。 */ } .dock-panel-head[data-v-5286088e] { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); } .dock-hint[data-v-5286088e] { font-size: 11px; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dock-panel-body[data-v-5286088e] { overflow-y: auto; padding: 10px 12px; scrollbar-gutter: stable; /* 滚动条出现/消失时不顶动内容宽度（宽度一跳，整块就像在晃） */ } .dock-task[data-v-5286088e] { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 4px; font-size: 12px; min-width: 0; } .dock-task.paused[data-v-5286088e] { opacity: 0.7; } .dock-task.waiting[data-v-5286088e] { border-style: dashed; } .dock-task-name[data-v-5286088e] { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dock-task-bar[data-v-5286088e] { flex: 0 0 auto; width: 90px; display: flex; align-items: center; } .dock-task-bar[data-v-5286088e] > .progress-bar { flex: 1 1 auto; width: 100%; } .dock-task-state[data-v-5286088e] { flex: 0 0 auto; font-size: 11px; } .dock-empty[data-v-5286088e] { font-size: 12px; } /* 面板里的状态块（原右栏样式是整列卡片，这里去掉卡片底距贴合面板） */ .dock-status[data-v-5286088e] .card { margin-bottom: 8px; } /* 窄屏：BGM 胶囊只留图标（宽度收窄到约 136px）⇒ 胶囊组整体右移一点，别压到它 */ /* 手机（≤720）：BGM 胶囊此时只留图标（名字隐藏，宽约 150px）⇒ 本组右距收到 168px， 实测 390px 下与 BGM 仍有 8px 间隙、自身只占 1 行、不产生横向滚动。 ⚠️ 721~940 段**不要**改右距：那段 BGM 仍是完整胶囊（228px），改了就会压上去。 */ @media (max-width: 720px) { /* 窄屏：BGM 胶囊只留图标（宽 149.6）⇒ 14 + 149.6 + 5 ≈ 169 */ .dock[data-v-5286088e] { right: 169px; } /* 🔴 2026-09-27 用户⑩ 加了第 6 个胶囊（🗓 计划）后**必须抬到手机底部导航之上**： 原先胶囊与导航同一水平线（bottom:0）且靠右排，5 个时刚好压不到导航的最左那颗； 多一个就把它盖住了（e2e 实测：`.mobile-nav-btn` 第一颗点不动 —— 胶囊拦下了 pointer 事件）。 抬到导航高度（56px）之上即与导航无关；面板本来就定在 bottom:96px，正好接在胶囊上方。 */ .dock[data-v-5286088e] { bottom: 56px; } /* 窄屏只留图标与角标（一行放得下 6 个） */ .dock-pill-text[data-v-5286088e], .dock-pill-bar[data-v-5286088e] { display: none; } /* 再收紧：6 个图标胶囊必须挤进 222px（否则折成两排，底栏上方多出一行） */ .dock[data-v-5286088e] { gap: 3px; } .dock-pill[data-v-5286088e] { padding: 3px 4px; gap: 3px; } .dock-pill-caret[data-v-5286088e] { display: none; } /* ⚠️ 面板改**视口定位**：手机上胶囊组只占右侧一小段，以它为基准会算到 left=-128（实测）。 改成左右各留 8px、底边抬到导航(56px)之上。 */ .dock-panel[data-v-5286088e] { position: fixed; left: 8px; right: 8px; bottom: 96px; width: auto; max-height: min(60vh, 520px); } } .celebrate-mask[data-v-b9430f8b] { position: fixed; inset: 0; z-index: 60; /* 高于弹窗(50)、低于开发者面板(70) */ display: flex; align-items: center; justify-content: center; background: rgba(var(--scrim-rgb), 0.34); animation: celebrate-fade-b9430f8b 0.35s ease-out; } .celebrate-card[data-v-b9430f8b] { width: min(460px, 92vw); padding: 22px 24px 18px; border-radius: 16px; text-align: center; background: rgba(var(--panel-rgb), 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border); box-shadow: 0 16px 48px rgba(40, 20, 10, 0.4); animation: celebrate-pop-b9430f8b 0.4s cubic-bezier(0.2, 1.1, 0.4, 1); } .celebrate-gold[data-v-b9430f8b] { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-glow-strong), 0 16px 48px rgba(40, 20, 10, 0.4); } .celebrate-icon[data-v-b9430f8b] { font-size: 44px; line-height: 1; } .celebrate-title[data-v-b9430f8b] { margin-top: 8px; font-size: 20px; font-weight: 800; letter-spacing: 1px; color: var(--primary-strong); } .celebrate-gold .celebrate-title[data-v-b9430f8b] { color: var(--gold); } .celebrate-sub[data-v-b9430f8b] { margin: 10px 0 16px; font-size: 13px; color: var(--text); line-height: 1.7; } .celebrate-sub[data-v-b9430f8b] b { color: var(--primary-strong); } @keyframes celebrate-fade-b9430f8b { from { opacity: 0; } to { opacity: 1; } } @keyframes celebrate-pop-b9430f8b { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } } .offline-modal[data-v-d20ac13d] { max-width: 460px; } .offline-list[data-v-d20ac13d] { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-height: 40vh; overflow-y: auto; } .offline-row[data-v-d20ac13d] { padding: 8px 10px; border-radius: 8px; background: rgba(var(--panel-soft-rgb), 0.8); border: 1px dashed rgba(var(--primary-tint-rgb), 0.3); font-size: 13px; } .offline-row-head[data-v-d20ac13d] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .offline-row-body[data-v-d20ac13d] { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--muted); } .offline-row.restaurant[data-v-d20ac13d] { border-color: rgba(var(--good-rgb), 0.5); background: rgba(var(--good-rgb), 0.07); } .offline-row.restaurant .mono[data-v-d20ac13d] { margin-left: auto; } /* 教学首秀块（没产出时替代清单） */ .offline-teach[data-v-d20ac13d] { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: rgba(var(--primary-tint-rgb), 0.07); border: 1px dashed rgba(var(--primary-tint-rgb), 0.38); font-size: 13px; } .offline-footer[data-v-d20ac13d] { margin-top: 12px; text-align: right; display: flex; gap: 8px; justify-content: flex-end; } .share-modal[data-v-2cf73331] { max-width: 680px; } .share-canvas[data-v-2cf73331] { width: 100%; max-width: 480px; margin: 10px auto; display: block; border-radius: 12px; } .share-actions[data-v-2cf73331] { display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: 6px; } .market-modal[data-v-bd57a3fa] { max-width: 520px; } .market-list[data-v-bd57a3fa] { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .market-row[data-v-bd57a3fa] { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; background: rgba(var(--panel-soft-rgb), 0.85); border: 1px dashed rgba(var(--primary-tint-rgb), 0.25); } .market-row.active[data-v-bd57a3fa] { border-color: var(--primary); background: rgba(var(--primary-tint-rgb), 0.1); } .market-icon[data-v-bd57a3fa] { font-size: 24px; } .market-body[data-v-bd57a3fa] { flex: 1; display: flex; flex-direction: column; gap: 2px; } .market-schedule[data-v-bd57a3fa] { font-size: 12px; } .market-foot[data-v-bd57a3fa] { margin-top: 10px; font-size: 12px; } [data-theme='dark'] { background: rgba(44, 31, 22, 0.85); color: #e8dccb; } /* 两栏由 `.main-scroll--rail` 的 flex 决定；这里只负责「自己是那条固定的窄栏」+ 粘住不随页滚。 宽度用 `--rail-w` 单点定义（折叠态是 `--rail-w-mini`）—— 两个 token 都在 main.css 的 `:root` 里， 窄屏阈值 940px 与侧栏同时出现，见 App.vue 的 railAvailable。 */ .feature-rail[data-v-6b7f2531] { flex: 0 0 var(--rail-w, 168px); width: var(--rail-w, 168px); position: sticky; top: 0; display: flex; flex-direction: column; gap: 3px; max-height: calc(100vh - 190px); overflow-y: auto; } /* 仅图标态：整条窄栏只剩图标（名字走 `title` 悬浮提示），把宽度还给内容 */ .feature-rail--mini[data-v-6b7f2531] { flex: 0 0 var(--rail-w-mini, 46px); width: var(--rail-w-mini, 46px); } .feature-rail--mini .fr-title[data-v-6b7f2531], .feature-rail--mini .fr-name[data-v-6b7f2531], .feature-rail--mini .fr-empty[data-v-6b7f2531] { display: none; } .feature-rail--mini .fr-head[data-v-6b7f2531] { justify-content: center; gap: 3px; padding: 2px 0 8px; } .feature-rail--mini .fr-item[data-v-6b7f2531] { justify-content: center; padding: 7px 0; } .fr-head[data-v-6b7f2531] { display: flex; align-items: center; gap: 6px; padding: 2px 2px 8px; font-size: 13px; font-weight: 700; color: var(--primary-strong); } .fr-title[data-v-6b7f2531] { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fr-btn[data-v-6b7f2531] { flex: 0 0 auto; width: 22px; height: 22px; line-height: 1; padding: 0; border-radius: 7px; border: 1px solid var(--border); background: rgba(var(--panel-rgb), 0.7); color: var(--muted); cursor: pointer; font-size: 12px; } .fr-btn[data-v-6b7f2531]:hover { border-color: var(--primary); color: var(--primary-strong); } .fr-item[data-v-6b7f2531] { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; padding: 7px 9px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: inherit; cursor: pointer; font-size: 13px; /* 折行文字旁有药丸时不许挤压（项目约定） */ flex-wrap: nowrap; } .fr-item[data-v-6b7f2531]:hover { background: rgba(var(--panel-rgb), 0.7); border-color: var(--primary); } .fr-item.on[data-v-6b7f2531] { background: rgba(var(--primary-tint-rgb), 0.2); border-color: var(--primary); font-weight: 700; } .fr-icon[data-v-6b7f2531] { flex: 0 0 auto; } .fr-name[data-v-6b7f2531] { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fr-badge[data-v-6b7f2531] { flex: 0 0 auto; font-size: 11px; color: var(--bad-strong); } .fr-empty[data-v-6b7f2531] { margin: 6px 4px; font-size: 12px; line-height: 1.6; } /* 主题样式 — 需求文档 §9.2 配色 + §9.3 响应式布局 美食主题配色：主色番茄红棕 #E2623C / 文字深可可 #4B3228 / 背景奶油白 #FAF3EA */ :root { --primary: #d95a38; --primary-strong: #b8442a; --primary-deep: #7a2f16; /* 深陶土：用在「同色相底色」上的文字（如侧栏选中行），保证对比 ≥4.5:1 */ --primary-soft: #f8dccd; --text: #4a2f26; --text-dim: #6b5347; --bg: #f8f1e8; --card: #fffdf9; --border: #dcc6b1; --good: #57a861; --good-strong: #326e3b; --good-soft: #e2f0e2; --warn: #e08c0e; --warn-strong: #bf7200; --bad: #d94b3f; --bad-strong: #b23a2f; --bad-soft: #fae0dc; --info: #3b8bb8; /* 小游戏/若干页面的「强调色」按钮（原字面量 #e8703f → #c9542e 的橙色渐变）。 ⚠️ 2026-09-14 修复：token 化那轮把它们换成了 `var(--accent*)`，但**从未定义过这三个变量** → 渐变声明失效、按钮变透明，而文字仍是 `#fff` → 默认皮肤下白字压白底，完全看不见 （用户报「小游戏按钮文字和背景颜色怎么都变白了」）。这里补回定义，默认值＝原字面量，原味渲染逐值不变。 */ --accent: #e8703f; --accent-strong: #c9542e; --accent-rgb: 232, 112, 63; /* 面板 / 底色 / 金币 / 灰阶（辅助色） */ --sidebar-bg: #f5e6d5; --bg-soft: #fffaf4; --gold: #a8780b; --gold-strong: #8a6209; /* 金色深档：浅色下压在金光底上的文字（实测 3.78 → 4.5+）*/ --muted: #6e645c; /* 2026-09-26：原 #7a6f68 压在卡片底(#f0eae2)上实测 4.09 < 4.5；压深到 4.83（DOM 对比度审计 light_dom_contrast.mjs）*/ --lock-bg: #f0eae2; --scrollbar: #d2b294; --mono: 'Roboto Mono', Consolas, 'Courier New', monospace; /* ── 调色板三元组（v2.0 皮肤系统用）── 默认值 == 本文件原先写死的字面量，所以「原味」皮肤渲染逐字节不变（e2e 指纹比对兜底）。 皮肤（`game/data/skins.js`）覆盖这里 + 上面的中性色；**样式里不要再新写死色值**，要用新颜色先加 token。 */ --primary-rgb: 217, 90, 56; /* 主题主色（深色块里是 #e0704a 的通道） */ --primary-strong-rgb: 184, 68, 42; /* 主题主色·深 */ --primary-tint: #d95a38; /* 主色淡彩（描边/底/阴影）——**两主题同值**，皮肤必须一并覆盖 */ --primary-tint-rgb: 217, 90, 56; --accent-rgb: 232, 112, 63; /* 小游戏高亮橙（小游戏配色约定的功能语义色，不随皮肤） */ --accent-strong-rgb: 201, 84, 46; --amber-rgb: 234, 176, 74; /* 小游戏琥珀（道具/进度） */ --amber-strong-rgb: 217, 138, 43; /* ⚠️ 2026-09-14 补：下面三个此前**只有 -rgb 变体、没有 hex 版**，而有 3 处直接写 `var(--amber)` / `var(--amber-strong)` / `var(--warn-soft)` → 声明静默失效（边框/底色不生效）。hex 值 = 上面三元组的同色。 */ --amber: #eab04a; --amber-strong: #d98a2b; --warn-soft: #fbf0da; /* ── 2026-09-18 补：把散在 .vue / 本文件里的硬编码色值收成 token（默认值 == 原字面量， 所以「原味」渲染逐值不变；指纹比对兜底）。── */ --glass-rgb: 255, 255, 255; /* 浅色玻璃面：行/卡片的高光底与描边。 ⚠️ **皮肤会覆盖它**（按主色推导）——这正是修「白色行底不跟皮肤」的地方； 深色主题与深色皮肤仍保持 255,255,255：深色侧的面底已由 `--panel-soft-rgb` 的深色规则单独管，而 `inset 0 1px 0 rgba(255,255,255,…)` 这类是**高光**， 深色下也必须保持浅色（改成深色会把高光抹掉）。 */ --shadow-rgb: 0, 0, 0; /* 阴影/遮罩黑（深色主题也用黑，故不做主题/皮肤覆盖） */ --good-rgb: 87, 168, 97; /* = --good（深色块有独立值）：供 `rgba(var(--good-rgb), α)` 用 */ --warn-rgb: 224, 140, 14; /* = --warn */ --bad-rgb: 217, 75, 63; /* = --bad */ --quest: var(--quest); /* 主线任务标记蓝（语义色，不随皮肤） */ --quest-rgb: 46, 107, 214; --quest-soft: var(--quest-soft); --quest-line: var(--quest-line); --rarity-common: var(--rarity-common); /* 觅珍抽卡稀有度识别色（语义色，不随皮肤） */ --rarity-rare: var(--rarity-rare); --rarity-rare-rgb: 74, 144, 217; --rarity-epic: var(--rarity-epic); --rarity-epic-rgb: 123, 31, 162; --panel-rgb: 255, 252, 246; /* 面板/卡片底色（深色块有独立值） */ --panel-soft-rgb: 255, 251, 244; /* 次级表面 */ --panel-raised-rgb: 255, 252, 246; /* 抬升/悬停表面 */ --panel-hi-rgb: 255, 251, 244; --tint-rgb: 150, 110, 70; /* 暖棕描边/阴影 */ --tint-warm-rgb: 210, 170, 120; /* 暖金描边（小游戏面板等） */ --tint-deep-rgb: 93, 64, 55; /* 深暖棕 */ --ink-rgb: 74, 47, 38; /* 墨棕（文字色系的描边/阴影） */ --scrim-rgb: 30, 20, 12; /* 弹窗遮罩与深阴影 */ --scrim-cool-rgb: 20, 30, 40; /* 冷色遮罩（部分小游戏） */ --deep-soft-rgb: 50, 30, 20; /* 柔和深阴影 */ --deepest-rgb: 22, 15, 10; /* 最深（深色 + 高清晰模式的面板） */ --on-primary-tint: #ffb98e; /* 深色下「主色淡彩底」上的文字色（小游戏模式胶囊的选中态） */ --on-primary-tint-2: #ffb08a; /* 同上（侧栏页签 / 功能磁贴选中态） */ --on-primary-tint-3: #ffc9ad; /* 同上（顶栏 / 技能项激活态，对比提到 4.7:1 的那一档） */ --on-primary-tint-4: #ffd2b8; /* 同上（侧栏技能项选中态内部文字：名称/等级/经验） */ --btn-primary-bg: #b8502c; /* 深色主色按钮底（压深到与白字 ~5:1；皮肤按同口径推导） */ --btn-primary-border: #cf6741; --btn-primary-hover: #c05430; --btn-primary-disabled-rgb: 120, 62, 40; } * { box-sizing: border-box; margin: 0; padding: 0; } /* ── 全局滚动条美化（WebKit/Blink + Firefox）── */ /* ⚠️ 这里**不能**写 scrollbar-width / scrollbar-color：Chromium 121+ 一旦看到这两个标准属性， 就会完全忽略所有 ::-webkit-scrollbar-* 样式（2026-09-11 实测：三块面板的玻璃滚动条因此一直没生效， 肉眼看到的是 --scrollbar 那层米色）。滚动条外观一律交给下面的 ::-webkit-scrollbar-* 伪元素。 */ *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: rgba(var(--shadow-rgb), 0); } *::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 8px; border: 2px solid var(--bg); } *::-webkit-scrollbar-thumb:hover { background: var(--primary); } *::-webkit-scrollbar-corner { background: transparent; } html, body, #app { height: 100%; } body { font-family: 'Source Han Sans SC', 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', sans-serif; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; } /* ── 表单控件全局基线（2026-09-25）── 起因：QuantityModal 是裸浏览器控件（用户报「样式没有适配」）⇒ 全页排查发现 25 select / 11 number / 5 range 散落在各页「主题容器（.settings-body/.bgm-vol/.bd-qty）之外」。 这里用 **:where()（零优先级）** 只兜底没有自己样式的控件：任何已有主题规则 （.dev-input/.qty-input/.settings-body …）优先级都更高，零覆盖风险。 ⚠️ 只设 background-**color**（绝不能用 background 简写——会重置容器们画的 background-image，深色段 4738 的 !important 简写就是前科）；**不动 appearance**—— 原生下拉箭头/滑块由 UA 绘制，随下面 color-scheme 自动深浅，箭头样式不必每容器自画。 深色由 token 自动跟随；range/checkbox 的 accent 走 --primary（15 皮肤各自带色）。 守卫：e2e-controls.spec.mjs（深色白岛 / 浅色纯白裸控件 / 原生 accent，三遍扫描）。 */ :where(input[type='range']), :where(input[type='checkbox']), :where(input[type='radio']) { accent-color: var(--primary); } :where(select), :where(input:not([type='checkbox']):not([type='range']):not([type='radio']):not([type='file']):not([type='submit']):not([type='button'])), :where(textarea) { background-color: rgba(var(--panel-rgb), 0.9); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; font: inherit; } :root { color-scheme: light; } html[data-theme='dark'] { color-scheme: dark; } .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } .dim { color: var(--text-dim); font-size: 12px; } /* ── 三栏布局（§9.1 / §9.3）─────────────────────────────── */ .app-layout { display: flex; flex-direction: column; height: 100%; /* 整幅壁纸铺在最外层（含顶部导航栏区域）：顶栏/三栏/底部状态条共用同一张连续图（2026-09-11） */ background-image: url('./bg-start-DlULSr5k.jpg'); background-size: cover; background-position: center; /* 百分比高度链（html/body/#app 100%）：zoom 缩放时与视口物理尺寸一致，绝不溢出/留空（2026-09-06） */ } /* 顶部功能导航 + 三栏主体 */ .app-body { display: grid; /* 2026-09-11：三栏 = 三块**直角**面板，**贴顶贴底贴左右**；壁纸只出现在面板之间的竖缝里 */ padding: 0; gap: 10px; /* 2026-09-19：**三栏改两栏** —— 右栏（状态面板）改为顶栏呼出的浮层抽屉（2026-09-20 起又搬到底部胶囊 `.dock-panel`）， 主内容区因此独占「中间 + 右边」全部横向空间。左栏仍随视口等比自适应 （2026-09-06：固定 230px 在放大时被内容撑破导致错位）。 */ grid-template-columns: minmax(170px, min(22%, 250px)) minmax(0, 1fr); flex: 1; min-height: 0; } .top-nav { display: flex; align-items: center; justify-content: flex-start; /* 主按钮区左对齐；右侧固定组由 spacer 顶到最右 */ gap: 6px; padding: 6px 10px; /* 顶栏不铺实底（2026-09-11）：靠内容那侧（下缘）淡出到透明，与 .main-scroll 的上缘渐隐对接； 按钮所在的偏上区域保留浓度，保证文字可读。中间内容滚不到它下面，故无需遮底 */ /* 2026-09-11 重构：顶栏是"中间内容面板"的上段，不再是独立浮块 */ margin: 0; background: none; border: none; border-bottom: 1px solid rgba(150, 105, 78, 0.16); border-radius: 0; box-shadow: none; flex-shrink: 0; /* 不随内容区滚动（flex 布局固定）*/ margin-bottom: 0; flex-wrap: nowrap; /* 放大/按钮多时保持单行，不再折成两行（2026-09-06） */ /* ⚠️ 这里**不能**留 overflow！2026-09-11：横滚职责已下放到 .top-nav-main； 若本节仍带 `overflow-x: auto`，按规范另一轴会被算成 auto → 窄屏「⋯」浮层（绝对定位于下方） 会被顶栏自己的盒子**裁掉**（实测截图里浮层完全看不见，而 toBeVisible() 仍为 true—— 它只看 CSS 可见性，不看裁切与遮挡）。 */ overflow: visible; z-index: 20; /* 确保不被左侧栏覆盖（同时承载「⋯」浮层的定位与层级） */ position: relative; } /* 主按钮区与右侧固定组之间的弹性空间：翻页导致按钮数量变化时，右组位置不动 */ /* 游客 / 试玩徽章（2026-09-24）：常驻在顶栏第一格，明确当前是「只读会话」。 不进 .top-nav-main（那个容器会横向滚动，徽章会被滚走）；配色走 warn 语义底，两套主题都有定义。 */ .top-nav-guest { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--warn-strong); background: var(--warn-soft); /* ⚠️ 文字用 `--bad-strong`：`--warn-strong`（浅色 #bf7200）压 `--warn-soft` 实测 3.3:1， 12px 小字不达标（与 SavePanel 的横幅同一个坑，AGENTS 记过）。 */ color: var(--bad-strong); font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; } /* 主按钮区（2026-09-11 从 .top-nav 拆出）：自己横向滚动兜底，右侧组不再被一起推走 */ .top-nav-main { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; } .top-nav-main::-webkit-scrollbar { display: none; } /* 右侧固定组：功能区整体贴右、不随翻页数量变化移动；≤940px 收进「⋯」浮层（见该媒体查询） */ .top-nav-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } /* 竖排浮层里给纯图标按钮补文字标签（宽屏不显示，图标本身已够认） */ .nav-btn-text { display: none; } /* 🔴 例外：功能页「指南」按钮**必须带字**（2026-09-22 用户报「没看到变动啊」）。 原因：宽屏下所有顶栏按钮都只有 emoji（上面那条规则），而「指南」是个**上下文按钮** —— 只在有攻略条目的页面出现、位置也随页面变，玩家不知道它存在；只放一个 📘 混在 20 个 emoji 里等于没做。带「指南」两个字才认得出。 */ .top-nav-guide .nav-btn-text { display: inline; } /* 「⋯更多」：仅窄屏出现（宽屏右侧组直接铺开，无需它） */ .top-nav-more { display: none; } .top-nav-more-backdrop { display: none; } .top-nav-btn { flex-shrink: 1; /* 空间不足时先收缩自身（保持单行），文字超出省略 */ min-width: 0; border: 1px dashed rgba(var(--ink-rgb), 0.28); background: rgba(var(--panel-rgb), 0.30); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 6px; padding: 4px 10px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; color: var(--text); } .top-nav-btn:hover { border-color: rgba(var(--primary-tint-rgb), 0.5); background: rgba(var(--panel-rgb), 0.5); } .top-nav-btn.active { background: rgba(var(--primary-tint-rgb), 0.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--primary-deep); /* 同上：顶栏两侧有羽化带，底色会变浅（2026-09-11） */ border-color: rgba(var(--primary-tint-rgb), 0.65); } .top-nav-sep { width: 1px; height: 18px; background: var(--border); flex-shrink: 0; } /* 顶部导航翻页控件（2026-09-06）：左右箭头 + 页码 */ .top-nav-pager { padding: 4px 9px; min-width: 26px; font-weight: 700; color: var(--primary); } .top-nav-pager:hover { color: var(--primary-strong); } .top-nav-pagenum { font-size: 12px; color: var(--muted); padding: 0 2px; user-select: none; } /* 夜市狂潮徽章（2026-09-06 限时窗口） */ .top-nav-market { font-size: 12px; font-weight: 600; color: #7a3b6f; background: rgba(122, 59, 111, 0.12); border: 1px dashed rgba(122, 59, 111, 0.45); border-radius: 999px; padding: 2px 10px; white-space: nowrap; animation: marketPulse 2.4s ease-in-out infinite; } @keyframes marketPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } } /* 底栏压在壁纸上（毛玻璃 0.68），--text-dim 小字实测 4.40:1 → 该处单独加深（2026-09-11，同 `.dock-status .dim` 的处理） */ .app-sidebar { position: relative; /* 直角面板（2026-09-11）：金边由 ::after 的 mask 环绘制（见「面板金边」一节）。 面板自身不滚动——滚动下沉到技能列表（.skill-nav），头部页签固定住 */ background-color: rgba(var(--panel-rgb), 0.82); overflow: hidden; display: flex; flex-direction: column; } .app-main { /* 2026-09-11：中间整列 = 一块直角内容面板（顶栏/内容/底栏都在它内部）。 金边由 ::after 的 mask 环绘制，且**两端渐隐**（10%~90% 实、两端透明） */ position: relative; background-color: rgba(var(--panel-rgb), 0.88); overflow: hidden; /* 顶栏/底栏与内容的分区裁切 */ display: flex; flex-direction: column; overflow: hidden; /* 导航固定，内容区独立滚动 */ min-height: 0; } /* 内容滚动区 */ .main-scroll { /* 性能：不用 backdrop-filter（动态进度条 fill 在带 blur 的层内会触发背景模糊重采样，掉到 ~20fps）。 实测值 0.92（原注释写的 0.78 早已过时，2026-09-11 修正）； 左右各 64px 从 0.34 渐入到 0.92，与两侧导航栏的羽化边对接 → 接缝不再是硬台阶。 */ /* 底色由 .app-main 内容面板提供（2026-09-11 重构） */ background: none; flex: 1; overflow-y: auto; min-height: 0; padding: 16px; } /* 整屏画布页（山海食经）：把这一页的滚动区变成「无内边距的 flex 列」，让视图根节点撑满整块中区。 用 flex 而非 height:100% —— 是滚动区里的流式兄弟，height:100% 会被它顶出并被 overflow:hidden 裁掉。只影响这一页（其余 50 页不带这个类）。 */ .main-scroll--bleed { display: flex; flex-direction: column; padding: 0; overflow: hidden; } .main-scroll--bleed > .skill-view { flex: 1 1 auto; min-height: 0; } /* 右栏压在壁纸上，--muted 小字实测仅 3.95:1，此处单独加深（2026-09-11） */ .dock-status .dim { color: #5f5148; } /* ══ 状态面板（2026-09-20：底部胶囊向上弹出）══ 原「顶栏呼出的固定右栏抽屉」已撤掉；它的定位/宽度/滚动条样式（`.app-status{position:fixed;...}`） 随之删除——面板本体样式改由 `components/BottomDock.vue` 的 scoped 样式负责（`.dock-panel`）。 保留下来的只有「面板内 dim 小字加深」这一条（面板底是 0.97 的浅底，dim 直接压上去对比不足）。 */ .dock-panel-body::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; } .app-sidebar > .skill-nav::-webkit-scrollbar-track, .main-scroll::-webkit-scrollbar-track, .dock-panel-body::-webkit-scrollbar-track { background: transparent; } .app-sidebar > .skill-nav::-webkit-scrollbar-corner, .main-scroll::-webkit-scrollbar-corner, .dock-panel-body::-webkit-scrollbar-corner { background: transparent; } /* 三块面板滚动条：**玻璃质感**（2026-09-11）——半透明渐变玻璃棒 + 内壁高光（玻璃棱）+ 圆头； 轨道全透明，滑块四周留 2px 透明边 → 又细又"轻"，悬浮时玻璃变亮 */ .app-sidebar > .skill-nav::-webkit-scrollbar-thumb, .main-scroll::-webkit-scrollbar-thumb, .dock-panel-body::-webkit-scrollbar-thumb { /* 玻璃：半透明暖灰玻璃棒——上下略深、中段透亮，再压一道极淡内壁高光当"玻璃棱" （不要用高不透明度的白：在浅色面板上会读成一条实心白棒） */ background: transparent; /* 本体全透明：这才叫透明玻璃 */ border: 1px solid rgba(118, 94, 76, 0.38); /* 只留一道细棱勾出形状（亮色面板上用暖灰棱，白棱会看不见） */ border-radius: 999px; } .app-sidebar > .skill-nav:hover::-webkit-scrollbar-thumb, .main-scroll:hover::-webkit-scrollbar-thumb, .dock-panel-body:hover::-webkit-scrollbar-thumb { background: rgba(118, 94, 76, 0.14); /* 悬停才给一点极淡的体感 */ border-color: rgba(118, 94, 76, 0.55); border-radius: 999px; } html[data-theme='dark'] .app-sidebar > .skill-nav::-webkit-scrollbar-thumb, html[data-theme='dark'] .main-scroll::-webkit-scrollbar-thumb, html[data-theme='dark'] .dock-panel-body::-webkit-scrollbar-thumb { background: transparent; /* 本体全透明 */ border: 1px solid rgba(var(--shadow-rgb), 0.70); /* 深色下棱用黑色（用户要求） */ border-radius: 999px; } html[data-theme='dark'] .app-sidebar > .skill-nav:hover::-webkit-scrollbar-thumb, html[data-theme='dark'] .main-scroll:hover::-webkit-scrollbar-thumb, html[data-theme='dark'] .dock-panel-body:hover::-webkit-scrollbar-thumb { background: rgba(255, 246, 236, 0.14); border-color: rgba(var(--shadow-rgb), 0.85); /* 悬停：黑棱更实 */ border-radius: 999px; } /* 🔒 底部胶囊的统一高度（2026-09-21 用户：「BGM 胶囊是不是融合进底栏了，那大小应该也适配为旁边五个胶囊的大小」）—— 右下角现在是**一条**胶囊带：五个功能胶囊（`.dock-pill`）+ BGM 播放器（`.bgm-pill`）。 两侧各自是 scoped 样式，所以高度在这**唯一一处**定义，谁都别再写死： · 5 个功能胶囊 / BGM 胶囊的高度都取它； · **底栏条本身也取它**（`.head-strips`）：2026-09-21 用户报「左边目标的条是占满底栏的吗、胶囊没占满」—— 目标条实测 35px、胶囊 24px，底边对齐但顶边差 11px ⇒ 现在两边都用同一个令牌、整条底边齐平。 30px = 目标条内容（`.newbie-guide` 30px）的高度；定高只在 >940px 生效（窄屏允许折行）； · BGM 胶囊原本 33px（竖 padding 7px）、窄屏还有一条 `padding: 7px 10px` 撑到 47px ⇒ 看起来是两块东西。 */ :root { --dock-pill-h: 30px; /* 功能页大类工作区的导航栏宽度（2026-09-27 用户⑳ 第二轮）：**单点定义** —— 消费方是 `components/FeatureRail.vue` 的 `flex-basis/width`（用 var() 读，别各写各的）。 168px 取自开发者面板 `.dp-nav` 的实测宽度（那一栏最长的一条是「💾 存档管理」，168 刚好不折行）。 */ --rail-w: 168px; /* 折叠为「仅图标」后的宽度（2026-09-27 用户：「页面清单增加可折叠为仅图标的按钮」）： 46px = 22px 图标位 + 两侧 12px 内边距，图标不贴边也不浪费宽度。 */ --rail-w-mini: 46px; } /* 一键回到顶部按钮（中间页面右下角，避开右侧面板）*/ .back-top-btn { position: fixed; /* 2026-09-19：右栏改抽屉后不再需要避让（原 right:256px 是给它让位的）； 下移到 bottom:64px 是为了避开右下角的 BGM 胶囊（bottom:14px，胶囊高约 40px）—— 与 ≤940px 断点里那条「回顶上移」用的是同一个规则，现在宽窄屏一致。 */ bottom: 64px; right: 24px; z-index: 60; border-radius: 999px; padding: 8px 16px; box-shadow: 0 3px 12px rgba(var(--shadow-rgb), 0.25); opacity: 0.92; transition: opacity 0.2s; } .back-top-btn:hover { opacity: 1; } @media (max-width: 940px) { .back-top-btn { right: 24px; /* 2026-09-17：右下角加了 BGM 播放器胶囊（同样贴右下）→ 回顶按钮上移一格，两者不叠 */ bottom: 64px; } /* 平板/手机：右栏收起为抽屉，播放器胶囊贴真角落（见 BgmPlayer.vue 的媒体查询） */ .bgm-player { right: 12px; } } /* 平板：两栏（§9.3），右面板收起为抽屉 */ @media (max-width: 940px) { .app-body { grid-template-columns: 200px minmax(0, 1fr); } /* ⚠️ 2026-09-19 原先这里有 `.app-layout .app-status { display: none }`，改成抽屉后删掉； 2026-09-20 又去掉整块：状态面板搬到底部胶囊（`.dock-panel`），窄屏由胶囊自己保证不超出视口。 */ /* 顶栏窄屏（2026-09-11 修实测缺陷）：改前共用 `overflow-x:auto` 的单行容器， 实测 768px 被裁 6 个按钮（签到/搜索/厨藏/装备/设置/存档）、390px 被裁 7 个（含攻略）， 且滚动条被 `scrollbar-width:none` 隐藏 → 玩家看不到「右边还有」，顶栏「右侧组贴右」的设计意图也一并失效。 现改为：主按钮区自己横滚（够用就不滚）+ 右侧组收进「⋯」浮层，签到/设置这类入口永不消失。 */ .top-nav-main { gap: 4px; } .top-nav-more { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; letter-spacing: 1px; } .top-nav-right { position: absolute; top: calc(100% + 4px); right: 8px; z-index: 40; display: none; flex-direction: column; align-items: stretch; gap: 5px; padding: 8px; border-radius: 10px; background: rgba(var(--panel-rgb), 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--border); box-shadow: 0 10px 24px rgba(120, 84, 56, 0.2); } .top-nav-right.open { display: flex; } /* 竖排里分隔线没意义；按钮改为整行左对齐，便于逐行点选 */ .top-nav-right .top-nav-sep { display: none; } .top-nav-right .top-nav-btn, .top-nav-right .top-nav-market { justify-content: flex-start; gap: 6px; text-align: left; white-space: nowrap; } .top-nav-right .nav-btn-text { display: inline; } /* 点击浮层外部收起 */ .top-nav-more-backdrop { display: block; position: fixed; inset: 0; z-index: 35; } } /* 手机：单栏（§9.3），侧边栏收进抽屉 + 底部导航 */ @media (max-width: 720px) { .app-body { grid-template-columns: 1fr; grid-template-rows: 1fr; } .app-layout { padding-bottom: 56px; /* 底部导航高度 */ } /* ⚠️ 以下两条同样必须带 `.app-layout` 前缀提权（原因同上面的 `.app-sidebar`）： `.sidebar { display:flex }`、`.mobile-nav { display:none }` 都声明在本媒体查询之后， 裸选择器会被它们反向覆盖 → 手机端左栏没收起、底部导航永远不显示（2026-09-11 修）。 注意 `.app-sidebar` 是网格里那一栏；抽屉里的 `` 只有 `.sidebar` 类，不受影响。 */ .app-layout .app-sidebar { display: none; } .app-main { padding: 0; } .main-scroll { padding: 10px; } .main-scroll--bleed { padding: 0; } .app-layout .mobile-nav { display: flex; } .sidebar-footer { flex-wrap: wrap; } } .mobile-nav { display: none; position: fixed; left: 0; right: 0; bottom: 0; height: 56px; background: var(--sidebar-bg); border-top: 1px solid var(--border); z-index: 40; } .mobile-nav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: transparent; border: none; font-size: 16px; color: var(--text-dim); cursor: pointer; } .mobile-nav-btn span { font-size: 12px; } .mobile-nav-btn.active { color: var(--primary-strong); } .mobile-backdrop { position: fixed; inset: 0; background: rgba(var(--tint-deep-rgb), 0.45); z-index: 44; } .mobile-skills { position: fixed; top: 0; left: 0; bottom: 0; width: 240px; /* 手机端没有常驻侧栏，这两张竖版图正好给抽屉用（2026-09-11） */ background-image: linear-gradient(rgba(var(--panel-rgb), 0.50), rgba(var(--panel-rgb), 0.50)), url('./bg-sidebar-C3Rw53e_.jpg'); background-size: cover; background-position: 22% center; border-right: 1px solid var(--border); z-index: 45; overflow-y: auto; } html[data-theme='dark'] .mobile-skills { background-image: linear-gradient(rgba(18, 12, 8, 0.52), rgba(18, 12, 8, 0.52)), url('./bg-sidebar-night-kL0umgM9.jpg'); } .mobile-skills .sidebar { height: 100%; } /* ── 通用组件 ────────────────────────────────────────────── */ .card { background: rgba(var(--panel-soft-rgb), 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; /* 2026-09-10 清晰度：1px 落影 + 顶部内高光，让卡片边界不再发虚 */ box-shadow: 0 1px 2px rgba(var(--ink-rgb), 0.06), inset 0 1px 0 rgba(var(--glass-rgb), 0.6); } /* 含实时动画进度条的卡片：去掉 backdrop-filter，避免进度条 fill 每帧动画触发 blur 重采样（→ 保持 ~60fps）。 这些卡片的毛玻璃观感由其半透明浅底 + main-scroll 磨砂底承担，视觉基本不变。 */ .card.status-line, .card.gather-progress, .card.combat-battle { backdrop-filter: none; -webkit-backdrop-filter: none; } /* 🔴 战斗屏里的浮层（战备/自动进食弹窗）过长时必须压在**后面的卡片**之上（2026-09-26 用户报）。 根因不是弹窗自己的 z-index 太小：`.card` 的 `backdrop-filter` **本身会造层叠上下文** ⇒ `.combat-loadout` 的 z-index 40 被困在战斗屏内部，而它后面的兄弟卡片（装备槽 / 组合框） 按 DOM 顺序后画 ⇒ 弹窗超出战斗屏的那一截就被盖住了（实测量化：1440 下弹窗高 558px， 取样点 y=544~673 命中 `.card.equipment-slots`，不是弹窗自己）。 打开弹窗时把**整张战斗屏**抬到兄弟节点之上即可（`:has()` 项目里已有先例）。 */ .combat-arena:has(.loadout-pop) { position: relative; z-index: 45; } .card h3 { font-size: 13px; color: var(--text-dim); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; } h2 { font-size: 20px; } .btn { border: 1px solid rgba(var(--glass-rgb), 0.5); background: rgba(var(--panel-rgb), 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--text); border-radius: 8px; padding: 6px 14px; font-size: 13px; cursor: pointer; box-shadow: 0 2px 10px rgba(40, 20, 10, 0.12); transition: all 0.15s; } .btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary-strong); } .btn:disabled { opacity: 0.45; cursor: not-allowed; } /* 🔴 浅色（基础规则）：底色用**不透明的主色深档**。 原先 `rgba(--primary-tint, .78)` 是「淡橙底 + 白字」，15 套皮肤实测 2.66~4.37 —— **全不达标** （白字压 `--primary-strong` 是 5.18~9.81，见 scripts/dev/_light_contrast_audit.mjs）。 顺带去掉了 backdrop-filter：底色已经不透明，模糊只是白付合成代价（与 2026-09-23 那轮清模糊同口径）。 */ .btn-primary { background: var(--primary-strong); border-color: rgba(var(--glass-rgb), 0.5); color: #fff; } .btn-primary:hover:not(:disabled) { background: var(--primary-deep); color: #fff; } .btn-sm { padding: 3px 10px; font-size: 12px; border-radius: 6px; } .progress-bar { height: 8px; border-radius: 4px; overflow: hidden; background: rgba(255, 250, 240, 0.45); /* 简单纯色底，避免 repeating 渐变每帧重绘导致卡顿 */ box-shadow: 0 1px 3px rgba(var(--tint-deep-rgb), 0.18), inset 0 1px 1px rgba(var(--glass-rgb), 0.4); } .progress-bar-fill { height: 100%; width: 100%; transform-origin: left center; /* 提升为独立合成层：fill 的 transform 动画在 GPU 层进行，不强制 backdrop-filter(blur) 容器每帧重采样背景。 若不提升，实测进度条动画会把带 blur 的容器拖到 ~18fps；提升后回到 ~60fps。 */ transform: translateZ(0); will-change: transform; background: linear-gradient(90deg, var(--primary), var(--primary-strong)); box-shadow: inset 0 1px 0 rgba(var(--glass-rgb), 0.3); } .badge { display: inline-block; background: var(--primary-soft); /* 浅色：#primary-soft 是浅色彩底，压在上面的字用最深档才够（实测 4.13~4.27）*/ color: var(--primary-deep); border-radius: 6px; padding: 2px 8px; font-size: 12px; margin-right: 8px; /* ⚠️ 徽标是**标签**不是正文：作为 flex 子项时默认 `flex: 0 1 auto` + normal 换行， 在窄行里会被压到折行（实测班底页「未雇佣」被挤成两行 h=40/lh=18）。 统一 nowrap —— 需要缩的是同行里的长文案，不是标签（2026-09-13 全量走查发现）。 */ white-space: nowrap; flex-shrink: 0; } /* 物品详情的「使用」区（增益剂/保鲜剂，2026-09-14 补使用入口时新增） */ .item-use-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); } .item-use-label { font-size: 12px; } .item-use-buff { background: var(--good-soft); color: var(--good-strong); } .badge-on { background: var(--good-soft); color: var(--good-strong); } /* 「这条加成当前无效果」类提示（2026-09-22：攻速撞硬下限的奥义）。 语义色不随皮肤；`--warn-soft` / `--warn-strong` 浅深两套都已定义（深色那份是本轮补的）。 */ .badge-warn { background: var(--warn-soft); color: var(--warn-strong); } /* 「低目标经验减半」的规则提示（2026-09-22）：常驻在目标/配方列表的标题行。 下划虚线 + help 光标表示「悬停有说明」（title 是 growthRate.js 的 LOW_TARGET_NOTE 全文）。 采集 / 制作 / 探索 三页共用这一个类，别在页面里各写一份。 */ .low-target-hint { font-size: 12px; border-bottom: 1px dashed var(--border); cursor: help; white-space: nowrap; } /* 卡片上「低目标减半」的紧凑标签（2026-09-23）：**挂在经验数值后面**，不占行、不换行。 为什么不做成徽章塞进卡片头部：头部那一格窄（图片 40px + 名字），徽章会整枚折到下一行， 同排卡片行高立刻参差（用户 2026-09-23 截图报「排版乱七八糟」）。这里的字号再小一档、 与旁边的等宽数字同基线，标识「这个数是打过折的」。 */ .xp-low-chip { margin-left: 4px; font-size: 11px; line-height: 1.4; padding: 0 4px; border-radius: 4px; background: var(--warn-soft); color: var(--warn-strong); white-space: nowrap; cursor: help; } /* ── 侧边栏 ─────────────────────────────────────────────── */ .sidebar { display: flex; flex-direction: column; min-height: 0; } .sidebar-header { display: flex; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid var(--border); } .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; flex-shrink: 0; cursor: pointer; } .avatar-img { object-fit: cover; border: 2px solid rgb(var(--glass-rgb)); box-shadow: 0 1px 4px rgba(var(--shadow-rgb), 0.2); } /* 游戏商店「神厨」头像框（2026-09-07）：金色描边 + 光晕 */ .avatar-frame-gold { border: 3px solid var(--amber) !important; box-shadow: 0 0 12px rgba(var(--amber-rgb), 0.65) !important; } .player-name { font-weight: 600; } .player-gold { font-family: var(--mono); font-size: 15px; font-weight: 700; /* ⚠️ 用 gold-strong 而不是 gold：压在金光底(rgba 212,168,62,.16)上实测 3.42 < 4.5； 该 token 的注释写明就是为「浅色下压在金光底上的文字」造的（深色块另有亮金值）*/ color: var(--gold-strong); background: rgba(212, 168, 62, 0.16); border: 1px solid rgba(212, 168, 62, 0.4); border-radius: 6px; padding: 2px 8px; display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; } .coin { display: inline-block; width: 14px; height: 14px; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAC8klEQVR4nO2WT0iTYRzHPxsbS9yml1xpXsRAyEN4SLpJYViIhyIlJDp4EEPwUiKd7A81pW6meMuDhYodQhAMpUgIBQfBtMBQUGe+W1TuVdbc2Nvh2fv6zm26FxU7+D297/N73uf3fX9/vs/PpCgKRwnzkXo/JvA/ELAY/iIWorU6L6lyO0f8JsxZh0ggFuLprVMKQMdQF0R+JphV24M3a4aImDJqw1iIpso8pXu4nciPKbEUCWpms9UJgPV0OXdvtNPzPvNoGKoBRf6K1VWS4FwlY3WVQGzdyHGAgRQ4bLA4PkNheRDbmQti0ZwTZ7BOeGUan0fCYTsMAvFwDowucEmSKb24Kj7OtQMQ/bOB9/Ma80t+Y94zJgDIYXD33qTfPcj8kp+crBOabT30F4D6tlraGgcOhwCIFNQ1V4l8m3O0nCubq5rdKHYnEAtpjw4bzHp9ALiKVhO2SQubwLb9YAjEW09PwLscBnzMerfDDmjpqG6pYXLfKdAJTvdwuwizWu3As8ZHALQ9r9XWtn6vADD9+oMh55BCiFqvOZSOoS6UX5+IbgSTet5sdWqCc+92MQABScYfEPsm50KGZDltCkzZ+cTif6aHKjj6mlBxrrSAybnvGTlOS0AOw1TXY85fLRaCoxMbgE3vBNLCJrkOM1UNFcQiQU0HegeFc/WyksPsKcspIzDhCQBQVuPU1vSOhOCYWJ6aB9Acu3vrEs6JbgT3vKSSaqDpskN5+aqOfvegVt1qxavvVQ0VtDSPAqI7nry4ylYgsTV34v7DL/SMy6Y9I6Bqfn1bLabs/ATBAYhI3/C88wAivKlmAyNIItA5Ig69LsmU1ZRpf2bJtePzSAQkmb4xSeQ2juWpeVxF2bs6SndJJdeAOUsj0Tc2mvKAnYUluqGAwvKzWOxOohuiJS12J4vjMwQkOS2x9AOJToZTkdTva6rMU+5ccXHS5UjaGpBk3n6U0mpDZhPRXtgh23o4bLvPiwdDYB848rH8mMAxgX93SljmBnJYVgAAAABJRU5ErkJggg==') center / contain no-repeat; margin-right: 4px; vertical-align: middle; } /* 左栏页签（2026-09-10）：技能 / 功能；2026-09-16 加第三页签「副业」。 三格在 170px 窄栏下的可用宽约 142px → gap/padding/字号都必须收紧才不会换行。 */ .sidebar-tabs { display: flex; gap: 4px; padding: 8px 8px 0; flex-shrink: 0; } .sidebar-tab { flex: 1 1 0; min-width: 0; padding: 6px 4px; font-size: 11px; white-space: nowrap; color: var(--text); background: rgba(var(--panel-rgb), 0.30); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px dashed rgba(var(--ink-rgb), 0.18); border-radius: 9px; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .sidebar-tab:hover { background: rgba(var(--panel-rgb), 0.62); border-color: rgba(var(--primary-tint-rgb), 0.45); } /* 浅色：底色是本皮肤主色的 25% 淡彩，文字必须用**最深档** `--primary-deep` （用 `--primary-strong` 实测琥珀/姜黄/樱花三套只有 3.89~4.42，不达标）。 深色下由 `html[data-theme='dark'] .sidebar-tab.active` 改回 `--on-primary-tint-2`，不受影响。 */ .sidebar-tab.active { background: rgba(var(--primary-tint-rgb), 0.25); border-color: rgba(var(--primary-tint-rgb), 0.55); color: var(--primary-deep); } .skill-nav { flex: 1; padding: 8px; overflow-y: auto; } /* ── 左栏功能页分组（2026-09-10）：非高频功能页从顶栏移入此处 ── */ .feature-nav { flex: 1; padding: 8px; overflow-y: auto; } /* 大类按钮（2026-09-27 用户⑳）：宽屏下功能页只剩 7 个这一层入口；点开后**本类页面清单** 出现在主内容区左侧的 `.feature-rail` 里（不是浮层），右栏就是当前页 —— 见 App.vue 的 `.main-scroll--rail` */ .feature-cat { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; margin-bottom: 4px; font-size: 13px; font-family: inherit; color: var(--text); background: rgba(var(--panel-soft-rgb), 0.55); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; text-align: left; } .feature-cat:hover { border-color: var(--primary); } .feature-cat.open { border-color: var(--primary); background: rgba(var(--primary-tint-rgb), 0.18); } .feature-cat.here { color: var(--primary-strong); } /* 当前所在页所属大类（深档 token，浅色下才达标） */ .feature-cat .fc-icon { flex: 0 0 auto; } .feature-cat .fc-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .feature-cat .fc-caret { flex: 0 0 auto; color: var(--muted); } /* ══ 大类工作区：主内容区里的「左导航 + 右内容」两栏（2026-09-27 用户⑳ 第二轮）══ 用户原话：「点击大类后，右边面板的**左边显示导航、右边显示详细内容**」，形态照开发者面板 （`DevPanel` 的 `.dp-body` + `.dp-nav` + `.dp-content`）。 做法：只给滚动区加一个 `display:flex` 修饰类，导航栏是它的**第一个子元素**，页面本体是第二个 —— 页面分派链（App.vue 里 60+ 个 v-else-if）一个字没动，也就不会影响任何既有页面的布局。 导航栏自身的样式在 `components/FeatureRail.vue` 的 scoped 里（宽度用 `--rail-w` 单点定义）。 */ .main-scroll--rail { display: flex; gap: 14px; align-items: flex-start; } /* 内容列：占满剩余宽度，且 `min-width: 0`（否则宽表会把两栏一起撑破 —— 项目里的老坑） */ .main-scroll--rail > :not(.feature-rail) { flex: 1 1 auto; min-width: 0; } /* 分组标题 = 可点击的折叠开关（2026-09-18 分组默认折叠：首屏只见 6 个分组入口） */ .feature-group-label { display: flex; align-items: center; gap: 5px; width: 100%; font-size: 12px; color: var(--text-dim); font-weight: 600; padding: 5px 2px 6px; background: transparent; border: none; border-top: 1px dashed var(--border); cursor: pointer; text-align: left; } .feature-group-label.open { color: var(--text); } .feature-group-label:hover { color: var(--primary-strong); } .fg-arrow { font-size: 10px; width: 10px; flex: 0 0 auto; } .fg-count { margin-left: auto; font-weight: 400; } /* 功能页方块网格（2026-09-10）：全部展开、正方形磁贴（列数 3→4 的实测依据见 .feature-grid 内注释，2026-09-11） */ /* 未解锁功能页的收起提示 + 开关（2026-09-18 留存改进 5） */ .feature-hidden { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 2px 6px; font-size: 11px; } .feature-grid { display: grid; /* 4 列（2026-09-11 实测调优）：3 列时 45 个瓦片要滚 746px（可视仅 56%，后 3 组全在折叠线下）； 4 列后瓦片 74→54px、需滚降到 146px（可视 87%），且无名字换行/裁切。 实测 5 列虽能做到零滚动，但有 14 个瓦片名字换行并被裁切，故不采用。 手机抽屉（宽 239px）下瓦片约 51px，仍高于 44px 的可点下限。 */ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; } .feature-tile { aspect-ratio: 1; position: relative; /* 待领角标 .feature-badge 的定位基准（2026-09-11 信箱） */ min-height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px 2px; text-align: center; background: rgba(var(--panel-rgb), 0.30); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px dashed rgba(var(--ink-rgb), 0.14); border-radius: 10px; color: var(--text); cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s; } .feature-tile:hover { background: rgba(var(--panel-rgb), 0.66); border-color: rgba(var(--primary-tint-rgb), 0.45); transform: translateY(-2px); } /* 浅色：同 .sidebar-tab.active（深色另有覆盖），实测「🧩功能」磁贴 3.82 → 4.5+ */ .feature-tile.active { background: rgba(var(--primary-tint-rgb), 0.25); border-color: rgba(var(--primary-tint-rgb), 0.55); color: var(--primary-deep); } .feature-tile .feature-icon { font-size: 18px; line-height: 1; } .feature-tile .feature-name { font-size: 12px; line-height: 1.15; word-break: break-all; } /* 待领角标（2026-09-11 信箱）：非零才渲染，深色下同色系可读 */ .feature-badge { position: absolute; top: 2px; right: 3px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; /* 2026-09-12 修：原用主色橙 #d95a38 + 白字，本身只有 3.81 对比（10px 小字要求 4.5）； 角标变成两位数（如 12）后深色体检抓到 3.19。改用深主色（同「橙字压橙底」那条的既有做法）。 */ background: var(--primary-deep, #7a2f16); color: #fff; font-size: 10px; line-height: 15px; text-align: center; font-weight: 700; box-shadow: 0 1px 3px rgba(var(--shadow-rgb), 0.25); } .skill-cat { font-size: 12px; color: var(--text); padding: 8px 4px 4px; font-weight: 600; } .skill-item { display: block; width: 100%; text-align: left; background: rgba(var(--panel-rgb), 0.42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(var(--ink-rgb), 0.12); border-radius: 10px; padding: 5px 9px; cursor: pointer; margin-bottom: 4px; transition: background 0.15s, border-color 0.15s, transform 0.1s; } /* 按钮顶部一行：图标（圆形）+ 名称（左）、等级（右） */ .skill-item-top { display: flex; align-items: center; gap: 7px; } .skill-item-top .skill-level { margin-left: auto; } .skill-item-top .skill-icon { width: 18px; height: 18px; line-height: 18px; text-align: center; flex-shrink: 0; border-radius: 50%; background: rgba(var(--primary-tint-rgb), 0.12); font-size: 12px; } .skill-item:hover { background: rgba(var(--panel-rgb), 0.62); border-color: rgba(var(--primary-tint-rgb), 0.45); transform: translateX(2px); } /* 侧栏技能按钮：等级一行、经验一行（等级在上、经验数值靠右） */ .skill-xp { font-size: 12px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .skill-item.active { background: rgba(var(--primary-tint-rgb), 0.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(var(--primary-tint-rgb), 0.45); color: var(--primary-deep); /* 压在壁纸底上，--primary-strong 实测仅 3.8:1（2026-09-11） */ } /* 副业页签下的一句说明（2026-09-16）：讲清「副业与制作类的区别」， 否则玩家看到的就是「又一个制作技能」。 */ .side-note { margin: 10px 4px 0; font-size: 11px; line-height: 1.55; } .skill-item.active .dim, .skill-item.active .skill-level { color: var(--primary-deep); /* 2026-09-11：原 var(--primary) 与选中行橙底色同色相，实测仅 2.05:1 */ } .skill-name { font-size: 12px; font-weight: 500; } .skill-level { font-family: var(--mono); font-size: 12px; color: var(--text-dim); } .skill-bar { margin-top: 1px; height: 3px; } .sidebar-footer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px; border-top: 1px solid var(--border); } .sidebar-footer .btn { font-size: 12px; padding: 5px 2px; } /* 技能视图 ───────────────────────────────────────────── */ .skill-view { max-width: 100%; /* 主区域铺满：左栏右缘 到 右栏左缘 */ } .skill-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; } .skill-head-right { min-width: 220px; max-width: 46%; flex-shrink: 0; /* 不被左侧标题挤压，保证经验区有足够宽度 */ /* 🔒 右上角 HUD 的**所有行统一右对齐**（2026-09-21 用户报「很多页面的右上角文字都没有对齐」）： 66 个页面共用这套头部。原先只有 `.xp-num` 自己 `text-align: right`，而同一块里的次级说明 （技能页的「转生加成：+20% 经验」、各页的「还需…」「距换货…」）是左对齐 ⇒ 一个块里出现 左/右两套右缘、看着就是「没对齐」。这一条把整块统一到同一条右缘（`.skill-head-xp-row` 是 flex 两端撑开，不受 text-align 影响，等级在左、经验在右的版式保持不变）。 */ text-align: right; } /* 头部右侧的按钮不许在括号中间断行（「扩建 +3 格（5,000」/「金币）」这种断法最显乱）。 有些页面（地窖/牧场/商队/温室/菌房/外卖/年鉴…）的头部右上是**裸按钮**、没有 `.skill-head-right` 包裹， 所以两条选择器都写。窄屏（≤720px）放开——那时头部本来就折行，nowrap 反而会溢出。 */ @media (min-width: 721px) { .skill-head > .btn, .skill-head-right .btn { white-space: nowrap; } } .xp-num { font-size: 14px; font-weight: 600; white-space: normal; /* 数字变大时允许换行，不溢出遮挡 */ word-break: break-word; text-align: right; line-height: 1.25; } /* 主区域头部：等级左对齐 + 经验数字右对齐（经验条在其下方） */ .skill-head-xp-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; /* 等级 + 经验数字在空间不足时可换行排布 */ margin-bottom: 4px; } .xp-level { font-size: 15px; font-weight: 600; } .status-line { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .target-table { width: 100%; border-collapse: collapse; } /* 宽表容器（2026-09-12 立）：列数多的对照表在 390px 手机上会撑出横向溢出—— 实测「分店 开店/店长回本对照」7 列在 390px 下溢出 22px。包一层 .table-scroll 即可横滑， 桌面下表格本来就装得下、不会出现滚动条（无副作用）。新增 >5 列的表格请一律包上。 */ .table-scroll { overflow-x: auto; } .table-scroll > .target-table { min-width: 0; } /* ⚠️ 2026-09-18 修：上面那条 `min-width: 0` 配合 `.target-table { width: 100% }` 等于 **只允许表格被压缩、不允许横滑** —— 于是 390px 手机上列多的表被压成「每行一个字」： 实测牧场「饲料 玉米 ×3」竖排成 5 行、野鸡那一格压成 13 行；蜂蜜一览表头「效果（使用后同时生效）」 竖排 4 行。窄屏改为按内容宽度排布 + 容器内横滑；桌面**完全不受影响** （宽度 ≥ 内容宽时 `min-width: 100%` 让表格照旧铺满，不会冒出滚动条）。 */ @media (max-width: 940px) { .table-scroll > .target-table { width: max-content; min-width: 100%; } } .target-table th, .target-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--border); font-size: 13px; } .target-table th { color: var(--text-dim); font-size: 12px; font-weight: 500; } .target-table tr.locked td { opacity: 0.45; filter: grayscale(1); } .target-table tr.selected td { background: var(--bg-soft); } .stats-row { display: flex; gap: 24px; } .stat-num { font-size: 18px; font-weight: 700; color: var(--primary-strong); } .stat-label { font-size: 12px; color: var(--text-dim); } .placeholder { text-align: center; padding: 48px 16px; } /* ── 右侧面板 ───────────────────────────────────────────── */ .status-panel { display: flex; flex-direction: column; min-height: 0; } /* 右侧导航栏卡片框 → 与左侧导航项(.skill-item)同款样式： 透明毛玻璃背景 + 虚线边框，让底下的 bg-sidebar.jpg 背景透出，同时保持整体偏白 */ .status-panel .card { background: rgba(var(--panel-rgb), 0.62); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px dashed rgba(var(--ink-rgb), 0.28); } .stat-line { display: flex; justify-content: space-between; padding: 3px 0; font-size: 13px; } .eq-stats { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; margin-bottom: 6px; font-size: 12px; } .eq-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 2px 0; font-size: 13px; } .bag-list { list-style: none; } .bag-list li { display: flex; justify-content: space-between; padding: 2px 0; font-size: 13px; } .log-card { display: flex; flex-direction: column; flex: 0 0 auto; /* 固定内容高度：不因上方卡片挤压而收缩，让事件日志框保持设定高度 */ min-height: 0; } .log-card h3 .log-actions { margin-left: auto; display: inline-flex; gap: 6px; } .log-list { list-style: none; overflow-y: auto; min-height: 320px; /* 默认固定高度：日志框始终较宽裕，日志少时也保持基础长度 */ max-height: 420px; /* 上限：日志多时滚动 */ font-size: 12px; flex: 1 1 auto; } .log-list li { display: flex; gap: 6px; align-items: baseline; padding: 4px 0; border-bottom: 1px dashed var(--border); line-height: 1.35; } .log-ts { color: var(--text-dim); font-size: 12px; flex-shrink: 0; } .log-msg { flex: 1; word-break: break-word; min-width: 0; } .log-gain { color: var(--good-strong); } .log-levelup { color: var(--primary-strong); font-weight: 600; } .log-offline { color: var(--info); } .log-warn { color: var(--warn); } /* ── 农耕农田（§3.1.5）──────────────────────────────── */ .plots-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .plot { border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: var(--bg-soft); display: flex; flex-direction: column; gap: 8px; min-height: 96px; } .plot-title { font-size: 13px; font-weight: 600; } .plot-select { border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; font-size: 12px; background: rgba(var(--panel-soft-rgb), 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--text); width: 100%; } .plot-empty { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .plot-mature { color: var(--good-strong); font-size: 12px; font-weight: 600; } .plot-withered { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } /* ── 制作食谱（§3.2）─────────────────────────────────── */ .recipe-table td { vertical-align: top; } .ing-cell { /* 材料列：不用 flex（flex 单元格不拉伸到行高，底部边框会与其他列错位）； 用 inline-block 标签自然换行，td 正常占满行高，边框线对齐 */ } .ing { display: inline-block; background: var(--lock-bg); border-radius: 6px; padding: 2px 8px; margin: 2px 4px 2px 0; font-size: 12px; white-space: nowrap; } /* 卡片内虚线空占位框：效果/契约区不足时用无文字虚框自适应填充，消除底部空白 */ .ing-dummy { background: transparent; border: 1px dashed rgba(var(--tint-rgb), 0.35); border-radius: 6px; min-width: 46px; height: 21px; vertical-align: middle; box-sizing: border-box; } .ing.lacking { background: var(--bad-soft); /* ⚠️ 文字要用 `--bad-strong`（深档），**不能**用 `--bad`：后者是「块面色」， 压在自己的 soft 底上浅色主题只有 **3.33**（12px 正文需 ≥4.5）。 2026-09-28 由「制作类页面浅色对比度扫描」查出 —— 此前 `light_dom_contrast` 只扫采集页 （`setView('skill')` 显示的是当前激活技能），制作/保鲜/副业三页从未被扫到。 与 `--gold-strong` / `--primary-strong` 同一个口径：**深档 token 就是给文字用的**。 */ color: var(--bad-strong); } .special-note { margin-top: 8px; } .warn-card { border-color: var(--warn); background: var(--bg); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* ── 料理对决（§4）─────────────────────────────────── */ .style-row { display: flex; gap: 10px; flex-wrap: wrap; } .style-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px; max-width: 220px; } /* 🔴 主色底（btn-primary）里的 `.dim` 一律改浅色（2026-09-24）： `--text-dim` 是给**浅色面板**标定的深棕，压在主色底（中间调）上实测只有 **1.32:1**。 原先只有 `.style-btn` 这一类做了处理，于是「攻略的阶段标签」「按钮里的计数」等在浅色下糊成一片。 白 86% 压主色深档实测 5.6:1，深浅两主题都成立（深色的 btn-primary 也是中间调主色底）。 */ .btn-primary .dim { color: rgba(255, 255, 255, 0.95); } /* 选中风格（btn-primary 主色底）时，描述用白色高对比，保证可读 */ .style-btn.btn-primary .dim { color: #fff; opacity: 0.95; } .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } /* 组合框：左对决风格 / 虚线 / 属性面板 / 虚线 / 美食奥义（2026-09-26 用户要求加第三栏） */ .combat-combo { display: grid; grid-template-columns: 1fr 1px 1.4fr 1px 1.15fr; gap: 16px; align-items: start; } .combo-divider { width: 1px; align-self: stretch; border-left: 1px dashed rgba(var(--ink-rgb), 0.35); } /* 美食奥义栏：攻击/防御两列，每行「图标+名称（+已开时的效果）+ 消耗」 */ /* 美食奥义栏：攻击/防御两列，每行「图标+名称（+已开时的效果）+ 消耗」；**点一行即可开关**（2026-09-26） ⚠️ 这些规则从全局 `.aoji-row` **收窄到 `.combo-aoji` 之内**：右栏状态面板的「奥义」卡片 （`StatusPanel` 的 `.aoji-side .aoji-row`）用的是同一组类名，行变成了