/* ======================================================================== EXPLAN v2 base — 视觉 token 定稿 ======================================================================== 设计原则 (第一性): 1. 暗色用纯灰三档 (#141414 / #1E1E1E / #262626) 替换 alpha 白叠加. 白 alpha 在低 luma 灰上叠加会显冷紫, 所以禁用 rgba(255,255,255,α) 当底色. 2. field 反向 #161616 (比 panel 深一档), 表达"凹陷的输入区"语义. 3. 6 套面板配方收敛为 1 套统一配方 --glass-panel-*, 其他历史名 (chrome-surface / shell-panel / downloads-shell / frame-surface) 作为别名指向统一配方, 杜绝"半新半旧并存". 4. backdrop-filter 默认 none (扁平设计); 仅 wb-focus-mask 等少数场景启用. 5. z-index 严格按语义命名 (新增 8 个核心 token, 旧 11 个名作别名兼容). 6. brand 蓝 #0064D2 是 source of truth, accent-soft-* / 暗色 logo 全由它派生. ======================================================================== */ :root { /* ==== 品牌色 (Auction Quad 设计系统) ==== */ --brand-primary: #0064D2; /* 主蓝 — 按钮 / 链接 / 选中 / 品牌 */ --brand-primary-hover: #004FB3; --brand-secondary: #E53238; /* 警示红 */ --brand-orange: #F5AF02; /* 警告黄 */ --brand-green: #86B817; /* 成功绿 */ /* 历史命名 (其他 CSS 在用, 保留作别名) */ --vitality-blue: var(--brand-primary); --vitality-blue-hover: var(--brand-primary-hover); --vitality-orange: var(--brand-orange); --vitality-orange-hover: #D99A00; --vitality-green: var(--brand-green); --vitality-green-hover: #6F9F12; --vitality-purple: var(--brand-orange); /* 历史兼容: "紫"全部退化为橙 */ /* ==== 文字三档 (亮色) ==== */ --text-main: #22201B; --text-grey: #7C7468; --text-3: rgba(40, 34, 26, 0.45); /* ==== 背景三档 (亮色) ==== */ --bg-page: #EBE4D5; --bg-center: #F7F2E8; --galaxy-bg: #EBE4D5; /* ==== 统一面板配方 (亮色) — Liquid Glass 液态玻璃材质 ==== Apple Sequoia / visionOS 风格: 1. 半透明 bg (rgba alpha 0.65-0.75) 让背后内容透出来 2. backdrop-filter blur + saturate 营造毛玻璃模糊感 3. 柔和外阴影 (大 blur, 低 alpha) 表达浮起 4. 极弱顶部 inset 高光线 (rgba 0.5-0.9 alpha) 模拟玻璃顶部光感 所有 panel / drawer / aside / modal / downloads 都用这一组 token, 一处定义全局生效. */ --glass-panel-bg: rgba(247, 242, 232, 0.96); /* 面板用色差区分: 奶油米, 比背景(暖灰米)亮一档 → 自然分出来, 不靠阴影 */ --glass-panel-backdrop: blur(30px) saturate(180%); --glass-panel-shadow: none; /* 全扁平: 面板不再浮起, 靠暖白面板 vs 暖米画布的色调差 + 留白分区 */ /* 浮动提示(toast/tooltip/气泡/下拉/弹窗)的"暖柔浮起"阴影: 扁平只针对静止版面, 浮层仍需层级 */ --float-shadow-sm: 0 6px 18px -6px rgba(74, 52, 26, 0.16); --float-shadow: 0 14px 38px -12px rgba(74, 52, 26, 0.20); --glass-panel-stroke: rgba(74, 58, 40, 0.06); /* ==== 6 套历史面板配方 → 全部映射到统一配方 ==== */ --glass-base: var(--glass-panel-bg); --glass-base-strong: var(--glass-panel-bg); --chrome-solid-bg: #F7F2E8; /* 实色不透明: hover 时 aside::after 背景块, 遮住配置卡不透出 */ --chrome-surface-bg: var(--glass-panel-bg); --chrome-shell-bg: var(--bg-page); /* 外框一圈 = 背景色: 框融进画布, 只剩功能面板(各自 glass-panel-bg)浮起 */ --chrome-surface-backdrop: none; --chrome-shell-backdrop: var(--glass-panel-backdrop); --frame-surface-bg: var(--glass-panel-bg); --frame-surface-backdrop: none; --frame-curtain-bg: rgba(236, 230, 220, 0.4); /* v1 全局遮罩 */ --frame-curtain-backdrop: blur(26px) saturate(120%); --shell-panel-bg: var(--glass-panel-bg); --shell-panel-backdrop: none; --downloads-shell-bg: var(--glass-panel-bg); --downloads-shell-bg-strong: var(--glass-panel-bg); --downloads-shell-backdrop: none; --downloads-preview-shell-backdrop: none; --modal-bg: var(--glass-panel-bg); --surface-balance-overlay: transparent; /* ==== 分隔线 / chip / divider ==== */ --divider: #DFD7C5; --border-color: var(--divider); --card-border: var(--divider); --chip-bg: rgba(74, 58, 40, 0.05); --chip-bg-hover: rgba(74, 58, 40, 0.08); /* ==== Input / field (亮色: 比 page 略深一档) ==== */ --input-bg: #F8F3EA; --input-border: var(--divider); --input-shadow: none; --field-bg: rgba(74, 58, 40, 0.035); --field-bg-active: rgba(74, 58, 40, 0.06); --field-bg-panel: var(--field-bg); --field-bg-panel-active: var(--field-bg-active); --field-bg-deep: var(--field-bg); /* 亮色不需要凹陷 */ --select-popover-bg: var(--glass-panel-bg); /* ==== Accent soft (从 brand 派生) ==== */ --accent-soft-bg: rgba(0, 100, 210, 0.12); --accent-soft-bg-strong: rgba(0, 100, 210, 0.18); --accent-soft-bg-heavy: rgba(0, 100, 210, 0.24); --accent-soft-border: rgba(0, 100, 210, 0.26); --accent-soft-border-strong: rgba(0, 100, 210, 0.36); --success-soft-bg: rgba(134, 184, 23, 0.14); --success-soft-bg-strong: rgba(134, 184, 23, 0.2); --success-soft-border: rgba(134, 184, 23, 0.28); --warning-soft-bg: rgba(245, 175, 2, 0.16); --warning-soft-bg-strong: rgba(245, 175, 2, 0.22); --warning-soft-border: rgba(245, 175, 2, 0.32); --danger-soft-bg: rgba(229, 50, 56, 0.1); --danger-soft-bg-strong: rgba(229, 50, 56, 0.16); --danger-soft-border: rgba(229, 50, 56, 0.28); --success-ink: var(--brand-green); --warning-ink: #A87000; --danger-ink: var(--brand-secondary); /* ==== Shadow (扁平: 全 none, 用 background 对比浮起) ==== */ --primary-elevation-shadow: none; --primary-elevation-shadow-hover: none; --primary-elevation-shadow-active: none; --frame-elevation-shadow: none; --workspace-elevation-shadow: none; --panel-local-shadow: none; --card-local-shadow: none; --card-local-shadow-hover: inset 0 0 0 1.5px var(--brand-primary); --frame-edge-shadow-strong: rgba(60, 45, 28, 0); /* 周围一圈不用阴影: 外框已=背景色融进画布, 层级靠面板色差, 不靠边缘阴影 */ --frame-edge-shadow-soft: rgba(15, 23, 42, 0); --frame-inner-shadow: none; --shadow-glass: none; --header-shadow: none; --glass-stroke: transparent; --glass-stroke-soft: transparent; --glass-border: transparent; /* ==== Button ==== */ --btn-glass-bg: var(--accent-soft-bg); --btn-glass-text: var(--vitality-blue); --btn-glass-shadow: none; --btn-aqua-bg: var(--vitality-blue); --btn-aqua-hover: var(--vitality-blue-hover); --btn-aqua-text: #FFFFFF; --btn-aqua-shadow: none; --btn-danger: var(--brand-secondary); --btn-danger-hover: #C8252C; /* ==== 抽屉按钮 ==== */ --drawer-btn-rep-bg: var(--accent-soft-bg); --drawer-btn-rep-bg-hover: var(--accent-soft-bg-strong); --drawer-btn-rep-text: var(--vitality-blue); --drawer-btn-ren-bg: var(--btn-aqua-bg); --drawer-btn-ren-bg-hover: var(--btn-aqua-hover); --drawer-btn-ren-text: #FFFFFF; /* ==== Upload ==== */ --upload-border: rgba(74, 58, 40, 0.16); --upload-hover-bg: rgba(0, 100, 210, 0.06); /* ==== Brand / theme control ==== */ --brand-logo-color: var(--brand-primary); --theme-control-active-bg: var(--brand-primary); --theme-control-active-text: #FFFFFF; --center-circle-bg: #F7F2E8; /* ==== SVG / table ==== */ --svg-icon: var(--text-main); --table-bg: rgba(252, 249, 244, 0.5); --table-border: var(--divider); /* ==== Radius ==== */ --panel-join-radius: 10px; --radius-sm: 8px; --radius-base: 10px; --radius-lg: 14px; /* ==== Spacing / layout ==== */ --header-h: 52px; /* 顶栏高度 (比左栏 rail 宽度 60 略矮, 视觉更轻) */ --topbar-btn-h: 36px; /* 顶栏右侧按钮 (个人中心 / 历史) 统一高度 + hover 区高度 */ --frame-gap: 12px; --layout-gap: var(--frame-gap); --frame-content-offset: 24px; --surface-gap: var(--frame-gap); --sidebar-panel-w: 248px; --sidebar-rail-shell-w: 69px; --sidebar-rail-w: 60px; --sidebar-gap: var(--surface-gap); --sidebar-pad-l: calc((var(--sidebar-rail-shell-w) - var(--sidebar-rail-w)) / 2); --sidebar-pad-r: 0px; --sidebar-w: calc(var(--sidebar-panel-w) + var(--sidebar-rail-w) + var(--sidebar-gap) + var(--sidebar-pad-l) + var(--sidebar-pad-r)); --drawer-w: var(--sidebar-panel-w); --downloads-menu-w: 180px; --downloads-list-w: 240px; --glass-panel-pad: 24px; --aside-scroll-pad-x: 22px; --aside-scroll-pad-top: 26px; --aside-scroll-pad-bottom: 40px; --field-h: 44px; --field-h-compact: 34px; /* v2 上传区高度: clamp 自适应, fixed 在底部, content-area padding-bottom 同步 */ --upload-zone-h: clamp(132px, 20vh, 220px); /* ====== 动效 token (Apple 风格 sharp spring) ====== --ease-apple: Apple Pages/Numbers 经典 panel 推拉曲线, 快速启动 + 柔和落定, 不带 overshoot --ease-apple-bounce: 轻微 overshoot, 给"弹出"类元素用 (toast / popover) --anim-drawer-d: drawer/upload/orb 推拉一致时长 --anim-fade-d: 淡入淡出 所有"L 型推拉" (drawer 开关 / orb 跟随 / upload 收缩 / wb-shell padding) 必须用同一组, 否则视觉上各动各的, 失去"一个东西在动"的整体感. */ --ease-apple: cubic-bezier(0.32, 0.72, 0, 1); --ease-apple-bounce: cubic-bezier(0.34, 1.3, 0.64, 1); --anim-drawer-d: 0.55s; --anim-fade-d: 0.28s; /* 面板高度用 JS 实测的真实视口(--app-viewport-height), 不用 100vh —— iPad/模拟器上 100vh 解析的不是真实可见高度, 会让面板比"贴真实底"的上传区短一截。 */ --sidebar-panel-h: calc(var(--app-layout-height, 100vh) - var(--header-h) - var(--layout-gap) - var(--frame-content-offset)); --rail-indicator-w: 132px; --rail-indicator-left: calc(var(--sidebar-rail-shell-w) + var(--sidebar-pad-l) - 1px); --rail-indicator-right: calc(var(--rail-indicator-left) + var(--rail-indicator-w)); /* ==== Font sizes (新增 xl/xxl, 给 v2 标题用) ==== */ --font-xxs: 10px; --font-xs: 11px; --font-sm: 12px; --font-md: 13px; --font-base: 14px; --font-lg: 15px; --font-xl: 18px; --font-xxl: 22px; /* ==== Viewport ==== */ --app-viewport-height: 100vh; --app-viewport-bottom-gap: 0px; /* ==== Z-INDEX 分层 ==== 新版 8 个核心 token, 严格递增, 不允许 magic number. 旧版 11 个名映射到核心 token 作别名, 其他 CSS 不需改. --z-content → 100 content-area / workspace 主内容流 --z-modal → 400 报告 / 学习资料 modal (主页内嵌) --z-aside → 500 aside / 抽屉等侧栏 surface --z-drawer → 510 抽屉浮在 aside 之上 --z-overlay → 700 wb-promo / 早鸟浮卡 (不阻断主操作) --z-focus-mask → 1500 sidebar hover 时的聚焦虚化遮罩 --z-header → 1600 固定顶栏 (永远在 mask 上, logo 不被遮) --z-focus-sidebar → 1700 hover 时 sidebar 浮到顶栏之上 --z-toast → 2000 低额度 / 邀请提示 --z-mask → 2500 全屏遮罩 (modal mask / curtain) --z-confirm → 2600 确认弹窗 (盖在 mask 上) --z-dev → 9000 Persona / Beta 调试浮层 --z-fullscreen-mobile → 9500 mobile 全屏 panel ======================================================================== */ --z-content: 100; --z-modal: 400; --z-aside: 500; --z-drawer: 510; --z-overlay: 700; --z-focus-mask: 1500; --z-header: 1600; --z-focus-sidebar: 1700; --z-toast: 2000; --z-mask: 2500; --z-confirm: 2600; --z-dev: 9000; --z-fullscreen-mobile: 9500; /* ---- 手机版(touch / ≤768)专用叠放层级 ---- 桌面是内嵌面板, 手机是全屏 / 底部浮层, 叠放需求不同, 单列一套语义 token (低 → 高); 手机的 .wb-rail、.wb-mobile-bar、.wb-downloads-、.wb-modal、.wb-drawer、.wb-feedback 全部引用这些, 不再用 1000/1090/1200/9999/10000 这类散落写死的魔数(原先正是这些数字导致 H5 层级错乱)。 */ --z-m-view: 500; /* 同 --z-aside: 资料中心 菜单 + 列表(并列, 同层) */ --z-m-view-top: 700; /* 同 --z-overlay: 资料中心 预览(浮在菜单/列表之上) */ --z-m-bar: 1000; /* 底部"生成报告"浮栏(在内容之上) */ --z-m-nav: 1010; /* 底部主导航(在生成栏之上, 始终可点) */ --z-m-overlay: 9500; /* 同 --z-fullscreen-mobile: 全屏 modal(报告 / 设置 / 详情) */ --z-m-sheet: 9600; /* 底部滑出 sheet(账户/历史抽屉、反馈面板), 盖在全屏 modal 之上 */ /* 历史别名 (其他 CSS 在用, 保留) */ --z-chrome-frame: 520; /* > drawer(510)/aside(500): 边框盖在抽屉之上, 抽屉从边框下层钻出. < header(1600): 顶栏 logo/user 仍在边框之上 */ --z-content-area: var(--z-content); --z-workspace-panel: var(--z-modal); --z-aside-surface: var(--z-aside); --z-aside-panel: var(--z-drawer); --z-topbar: var(--z-header); } /* ============================================================================ 暗色 token (核心改造: 纯灰三档替代 alpha 白叠加) 每一行的变化都有理由: bg-page → 主背景, 全屏铺底, 最深 bg-center → 面板背景, 比 bg 亮一档 (浮起) chip-bg → panel 内 chip, 再亮一档 (stack on top 语义) field-bg → 输入框反向凹一档 (比 panel 深, 凹陷感) divider → 分隔线, 跟 chip 同档微亮 = 5 档纯灰: #141414 / #161616 / #1E1E1E / #262626 / #2A2A2A ============================================================================ */ [data-theme="dark"] { /* 背景三档 — 全纯灰, 不带任何色相 */ --bg-page: #1A1612; --bg-center: #221D17; --galaxy-bg: #1A1612; /* 文字三档 — alpha 白叠加纯灰不发紫 (灰是中性) */ --text-main: #F4EFE6; --text-grey: rgba(244, 239, 230, 0.70); --text-3: rgba(244, 239, 230, 0.42); /* 统一面板配方 — Liquid Glass 液态玻璃 (暗色) 阴影调低: 跟 chrome frame (--frame-edge-shadow 暗 0.095) 一档, 不喧宾夺主. */ --glass-panel-bg: rgba(43, 37, 30, 0.96); --glass-panel-backdrop: blur(30px) saturate(180%); --glass-panel-shadow: none; --float-shadow-sm: 0 6px 18px -6px rgba(0, 0, 0, 0.5); --float-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.6); --glass-panel-stroke: rgba(255, 250, 240, 0.05); /* 6 套历史面板配方 → 全部映射到统一配方 */ --glass-base: var(--glass-panel-bg); --glass-base-strong: var(--glass-panel-bg); --chrome-solid-bg: #2B251E; /* 实色不透明 (暖夜) */ --chrome-surface-bg: var(--glass-panel-bg); --chrome-shell-bg: var(--bg-page); /* 外框一圈 = 背景色, 框融进画布(暖夜) */ --chrome-surface-backdrop: none; --chrome-shell-backdrop: var(--glass-panel-backdrop); --frame-surface-bg: var(--glass-panel-bg); --frame-surface-backdrop: none; --frame-curtain-bg: rgba(20, 16, 12, 0.56); /* v1 全局遮罩 (暖夜) */ --frame-curtain-backdrop: blur(18px) saturate(92%); --shell-panel-bg: var(--glass-panel-bg); --shell-panel-backdrop: none; --downloads-shell-bg: var(--glass-panel-bg); --downloads-shell-bg-strong: var(--glass-panel-bg); --downloads-shell-backdrop: none; --downloads-preview-shell-backdrop: none; --modal-bg: var(--glass-panel-bg); --surface-balance-overlay: transparent; /* 分隔线 / chip (纯灰, 不要 alpha) */ --divider: #322B22; --border-color: var(--divider); --card-border: var(--divider); --chip-bg: #2E2820; --chip-bg-hover: #362E24; /* Input / field (核心: 比 panel 深一档, 凹陷感) */ --input-bg: #1F1A15; --input-border: var(--divider); --input-shadow: none; --field-bg: #1F1A15; --field-bg-active: #261F18; --field-bg-panel: var(--field-bg); --field-bg-panel-active: var(--field-bg-active); --field-bg-deep: #1F1A15; --select-popover-bg: var(--glass-panel-bg); /* Accent soft (暗色: alpha 略加强保证可读) */ --accent-soft-bg: rgba(0, 100, 210, 0.18); --accent-soft-bg-strong: rgba(0, 100, 210, 0.26); --accent-soft-bg-heavy: rgba(0, 100, 210, 0.34); --accent-soft-border: rgba(0, 100, 210, 0.38); --accent-soft-border-strong: rgba(0, 100, 210, 0.5); --success-soft-bg: rgba(134, 184, 23, 0.18); --success-soft-bg-strong: rgba(134, 184, 23, 0.26); --success-soft-border: rgba(134, 184, 23, 0.36); --warning-soft-bg: rgba(245, 175, 2, 0.18); --warning-soft-bg-strong: rgba(245, 175, 2, 0.26); --warning-soft-border: rgba(245, 175, 2, 0.36); --danger-soft-bg: rgba(229, 50, 56, 0.18); --danger-soft-bg-strong: rgba(229, 50, 56, 0.24); --danger-soft-border: rgba(229, 50, 56, 0.34); --success-ink: var(--brand-green); --warning-ink: var(--brand-orange); --danger-ink: var(--brand-secondary); /* Shadow — 扁平: 全 none */ --primary-elevation-shadow: none; --primary-elevation-shadow-hover: none; --primary-elevation-shadow-active: none; --frame-elevation-shadow: none; --workspace-elevation-shadow: none; --panel-local-shadow: none; --card-local-shadow: none; --card-local-shadow-hover: inset 0 0 0 1.5px var(--brand-primary); --frame-edge-shadow-strong: rgba(0, 0, 0, 0); /* 暖夜全扁平: 四周边缘阴影归零 */ --frame-edge-shadow-soft: rgba(0, 0, 0, 0); --frame-inner-shadow: none; --shadow-glass: none; --header-shadow: none; --glass-stroke: transparent; --glass-stroke-soft: transparent; --glass-border: transparent; /* Button */ --btn-aqua-bg: var(--vitality-blue); --btn-aqua-hover: var(--vitality-blue-hover); --btn-aqua-text: #FFFFFF; --btn-aqua-shadow: none; --btn-danger: var(--brand-secondary); --btn-danger-hover: #C8252C; /* 抽屉按钮 (暗色补充包用 chip 风格替代 accent soft) */ --drawer-btn-rep-bg: var(--chip-bg); --drawer-btn-rep-bg-hover: var(--chip-bg-hover); --drawer-btn-rep-text: var(--text-main); --drawer-btn-ren-bg: var(--btn-aqua-bg); --drawer-btn-ren-bg-hover: var(--btn-aqua-hover); --drawer-btn-ren-text: #FFFFFF; /* Upload */ --upload-border: var(--divider); --upload-hover-bg: rgba(0, 100, 210, 0.1); /* Brand logo: 暗色下也用蓝色, 跟 mockup 一致 (旧版用白色) */ --brand-logo-color: var(--brand-primary); --theme-control-active-bg: var(--brand-primary); --theme-control-active-text: #FFFFFF; --center-circle-bg: var(--glass-panel-bg); /* SVG / table */ --svg-icon: var(--text-main); --table-bg: var(--chip-bg); --table-border: var(--divider); } /* ============================================================================ v1 chrome frame — 顶栏 + 左侧栏 + 右 gap + 底 gap 4 边连续玻璃外框 ============================================================================ 设计原理: 1. .app-chrome 是 body 直属 fixed inset:0 的"装饰层", z 极低 (--z-chrome-frame: 1), 只做视觉, pointer-events: none 不挡操作 2. ::before 用 mask 切出 4 段 (顶 header-h / 底 layout-gap / 左 sidebar-rail-shell-w / 右 layout-gap) + 4 个内角 radial-gradient 圆角衔接 3. 4 段 chrome 用 panel bg + backdrop blur, 跟 content 区中间留出 viewport (中间露出 page) 4. ::after 给内角加渐变阴影, 让 chrome 跟 content 区的视觉接缝柔和 ============================================================================ */ .app-chrome { position: fixed; inset: 0; z-index: var(--z-chrome-frame, 1); pointer-events: none; filter: none; -webkit-filter: none; } .app-chrome::before, .app-chrome::after { content: ""; position: absolute; pointer-events: none; } .app-chrome::before { inset: 0; background: var(--chrome-shell-bg); backdrop-filter: var(--chrome-shell-backdrop); -webkit-backdrop-filter: var(--chrome-shell-backdrop); transition: background 0.22s ease, backdrop-filter 0.22s ease, -webkit-backdrop-filter 0.22s ease; /* mask 切出 4 段 chrome + 4 内角圆角衔接 */ -webkit-mask: linear-gradient(#000 0 0) top / 100% var(--header-h) no-repeat, linear-gradient(#000 0 0) bottom / 100% var(--layout-gap) no-repeat, linear-gradient(#000 0 0) left / var(--sidebar-rail-shell-w) 100% no-repeat, linear-gradient(#000 0 0) right / var(--layout-gap) 100% no-repeat, radial-gradient(circle at 100% 100%, transparent calc(var(--panel-join-radius) - 0.5px), #000 var(--panel-join-radius)) var(--sidebar-rail-shell-w) var(--header-h) / var(--panel-join-radius) var(--panel-join-radius) no-repeat, radial-gradient(circle at 0% 100%, transparent calc(var(--panel-join-radius) - 0.5px), #000 var(--panel-join-radius)) calc(100% - var(--layout-gap)) var(--header-h) / var(--panel-join-radius) var(--panel-join-radius) no-repeat, radial-gradient(circle at 100% 0%, transparent calc(var(--panel-join-radius) - 0.5px), #000 var(--panel-join-radius)) var(--sidebar-rail-shell-w) calc(100% - var(--layout-gap)) / var(--panel-join-radius) var(--panel-join-radius) no-repeat, radial-gradient(circle at 0% 0%, transparent calc(var(--panel-join-radius) - 0.5px), #000 var(--panel-join-radius)) calc(100% - var(--layout-gap)) calc(100% - var(--layout-gap)) / var(--panel-join-radius) var(--panel-join-radius) no-repeat; mask: linear-gradient(#000 0 0) top / 100% var(--header-h) no-repeat, linear-gradient(#000 0 0) bottom / 100% var(--layout-gap) no-repeat, linear-gradient(#000 0 0) left / var(--sidebar-rail-shell-w) 100% no-repeat, linear-gradient(#000 0 0) right / var(--layout-gap) 100% no-repeat, radial-gradient(circle at 100% 100%, transparent calc(var(--panel-join-radius) - 0.5px), #000 var(--panel-join-radius)) var(--sidebar-rail-shell-w) var(--header-h) / var(--panel-join-radius) var(--panel-join-radius) no-repeat, radial-gradient(circle at 0% 100%, transparent calc(var(--panel-join-radius) - 0.5px), #000 var(--panel-join-radius)) calc(100% - var(--layout-gap)) var(--header-h) / var(--panel-join-radius) var(--panel-join-radius) no-repeat, radial-gradient(circle at 100% 0%, transparent calc(var(--panel-join-radius) - 0.5px), #000 var(--panel-join-radius)) var(--sidebar-rail-shell-w) calc(100% - var(--layout-gap)) / var(--panel-join-radius) var(--panel-join-radius) no-repeat, radial-gradient(circle at 0% 0%, transparent calc(var(--panel-join-radius) - 0.5px), #000 var(--panel-join-radius)) calc(100% - var(--layout-gap)) calc(100% - var(--layout-gap)) / var(--panel-join-radius) var(--panel-join-radius) no-repeat; } /* 展开式单行: 不再在 hover/open 时改动 .app-chrome 边框(原来把它 mask 成只剩左栏段, 收起时顶/右/下三边整框 重新出现 = 闪一下)。现在边框保持静止, hover 时由 .app-curtain 在它上面虚化、rail 浮最上层; 收起即虚化淡出, 边框不动不闪。 */ /* ::after — content 区四边内角渐变阴影, 让 chrome 跟 content 接缝柔和 */ .app-chrome::after { top: var(--header-h); right: var(--layout-gap); bottom: var(--layout-gap); left: var(--sidebar-rail-shell-w); display: block; border-radius: var(--panel-join-radius); background: linear-gradient(to bottom, var(--frame-edge-shadow-strong), var(--frame-edge-shadow-soft) 100%) top / 100% var(--layout-gap) no-repeat, linear-gradient(to top, var(--frame-edge-shadow-strong), var(--frame-edge-shadow-soft) 100%) bottom / 100% var(--layout-gap) no-repeat, linear-gradient(to right, var(--frame-edge-shadow-strong), var(--frame-edge-shadow-soft) 100%) left / var(--layout-gap) 100% no-repeat, linear-gradient(to left, var(--frame-edge-shadow-strong), var(--frame-edge-shadow-soft) 100%) right / var(--layout-gap) 100% no-repeat; box-shadow: none; opacity: 1; transition: opacity 0.22s ease; } /* 展开式单行: 边框内角阴影 hover 时不再淡出(否则收起时阴影重新出现 = 闪一下); 保持静止, 由 curtain 在上面虚化。 */ /* ============================================================================ v1 全局遮罩 .app-curtain — hover 侧栏时全屏拉帘虚化, mask 切出侧栏区不遮 ============================================================================ */ .app-curtain { position: fixed; /* 展开式单行: 虚化层从顶栏下方开始(不盖顶栏), logo 全程清晰、不靠"hover 抬顶栏 z"—— 否则收起时顶栏 z 瞬间掉回、虚化层还在淡出, logo 被糊一下=闪。 */ top: var(--header-h); right: 0; bottom: 0; left: 0; z-index: var(--z-mask); pointer-events: none; opacity: 0; visibility: hidden; background: var(--frame-curtain-bg); backdrop-filter: var(--frame-curtain-backdrop); -webkit-backdrop-filter: var(--frame-curtain-backdrop); /* 淡出快、不拖延(原 0.32s + 80ms 延迟会让条收起后背景还虚着一下) */ transition: opacity 0.22s ease, visibility 0.22s step-end; } body:has(.wb-rail:hover) .app-curtain, body.wb-rail-open .app-curtain { opacity: 1; visibility: visible; transition: opacity 0.26s cubic-bezier(0.4, 0, 0.6, 1), visibility 0.26s step-start; /* 展开式单行: 去掉 mask 切口(切口固定在展开后宽度, 跟动画中的 rail 宽度不同步, 会闪一条透明带); 改全屏均匀虚化, rail 自身(z 提到 --z-mask 之上)浮在遮罩之上盖住侧栏区。 */ } /* ============================================================================ 全局 reset ============================================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC", sans-serif; } body { background: var(--galaxy-bg); background-attachment: fixed; /* iPad/模拟器上 100vh=视觉视口(被地址栏压缩, 比真实布局视口矮), 会把文档流里的导航栏裁短; 换成 JS 实测的真实布局视口 --app-layout-height, 让导航栏能撑到跟上传区齐平的底部 */ height: var(--app-layout-height, 100vh); overflow: hidden; color: var(--text-main); transition: background 0.6s ease, color 0.6s ease; position: relative; } /* iOS viewport mask 修复 — 扁平设计下用 page bg, 不模糊 */ @supports (-webkit-touch-callout: none) { html::before, html::after { content: ""; position: fixed; pointer-events: none; z-index: var(--z-mask); background: var(--bg-page); } html::before { top: var(--header-h); right: 0; width: var(--layout-gap); bottom: 0; } html::after { left: 0; right: 0; bottom: 0; height: var(--layout-gap); } } #grainient-bg { position: fixed; top: 0; left: 0; width: 100vw; height: var(--app-layout-height, 100vh); z-index: -1; pointer-events: none; overflow: hidden; } /* ============================================================================ Autofill 防穿透 (跟主题色匹配, 防浏览器灌入黄背景) ============================================================================ */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-text-fill-color: var(--text-main) !important; caret-color: var(--text-main) !important; -webkit-box-shadow: 0 0 0 1000px transparent inset !important; box-shadow: 0 0 0 1000px transparent inset !important; background-color: transparent !important; background-image: none !important; transition: background-color 5000s ease-in-out 0s; }