/* 项目展示门户 — 深色数据舱（dark data cabin） 2026-08-21 定稿：以查勘列表页风格统一全站，取代「晨光图纸」浅色方向（存档于 docs/plans/2026-08-20-portal-framework.md）。签名元素：mono tabular-nums 读数 + 测绘十字丝 + 低透明蓝发丝线 + 毫米格底纹。色彩方法论：oklch 为主，逐变量 hex 回退（老内核 webview 兜底）。 */ :root { /* 深色体系：原生控件/滚动条同步深色（缺了它部分平台渲染亮控件） */ color-scheme: dark; /* 滚动条槽位始终预留：页面由短变长时内容宽度不跳变（2026-09 用户反馈） */ scrollbar-gutter: stable; /* 底色与面板 */ --bg: #030a24; --bg: oklch(15.7% 0.056 265); --panel: #031532; --panel: oklch(20.1% 0.063 258); --panel-2: #04122b; --panel-2: oklch(18.6% 0.055 260); --thumb-bg: #071226; --thumb-bg: oklch(18.5% 0.044 261); /* 文字 */ --text: #d9effb; --text: oklch(94% 0.028 231); --text-dim: #86acc9; /* 提亮自 #6081a1：面板上对比度 4.45→7.57（WCAG 合规） */ --text-dim: oklch(72.7% 0.059 241); /* 强调与语义色（cyan 限定于 mono 大数字/图标/焦点/readout，不作正文小字） */ --cyan: #03e2e5; --cyan: oklch(82.8% 0.141 196); --amber: #e3af29; --amber: oklch(78.1% 0.15 85); --green: #258c8d; --green: oklch(58.5% 0.09 196); --red: #c63839; /* 文字/边框用 */ --red: oklch(55.4% 0.179 25); --red-badge: #e05a5a; /* 实色徽章底：深字对比度 3.88→≈5.5 */ --red-badge: oklch(63% 0.19 25); /* 偏差进度条语义色：正偏差（高于估算）红 / 负偏差（低于估算）绿，低饱和成对、不刺眼 */ --delta-pos: #b04947; --delta-pos: oklch(56% 0.14 25); --delta-neg: #3e8b63; --delta-neg: oklch(56% 0.14 148); /* 徽章深字（实色徽章底上的统一字色，替换原浅字——绿/红浅字对比度不达标） */ --badge-ink: #030517; /* 发丝线与柔光 */ --panel-border: rgba(125, 184, 220, 0.1); --panel-border: oklch(78% 0.06 235 / 10%); --grid-line: rgba(125, 184, 220, 0.05); --grid-line: oklch(78% 0.06 235 / 5%); --cyan-soft: rgba(3, 226, 229, 0.14); --cyan-soft: oklch(82.8% 0.141 196 / 14%); --amber-soft: rgba(227, 175, 41, 0.15); --amber-soft: oklch(78.1% 0.15 85 / 15%); --red-soft: rgba(198, 56, 57, 0.16); --red-soft: oklch(55.4% 0.179 25 / 16%); --green-soft: rgba(37, 140, 141, 0.16); --green-soft: oklch(58.5% 0.09 196 / 16%); /* 圆角 */ --radius-panel: 8px; --radius-thumb: 6px; --radius-pill: 999px; /* 间距 */ --space-1: 0.5rem; --space-2: 0.75rem; --space-3: 1rem; --space-4: 1.5rem; --font-ui: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", monospace; --duration-normal: 300ms; --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --content-width: 1280px; } /* 登录门禁页防偷看：需登录页面起即整页隐藏， auth-gate.js 验证通过后才移除类；未登录跳转期间页面全程不可见，杜绝鉴权请求往返间闪现页面内容（2026-09 修复）。 */ .auth-pending { visibility: hidden; } /* JS 禁用时类永不移除，放行 noscript 提示可见 */ .auth-pending noscript { visibility: visible; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; /* flex 纵排：页脚（.site-footer margin-top:auto）在短页面沉底 */ display: flex; flex-direction: column; background: var(--bg); color: var(--text); font-family: var(--font-ui); /* 毫米格底纹（深色化）：双层细格，仅作氛围，不抢内容 */ background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 96px 96px; background-position: center top; } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ---------- 顶栏（首页沿用至阶段 3；内容页请用 nav.js 全局导航） ---------- */ .site-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--panel-border); background: var(--panel-2); } .site-header__title { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.35em; } .site-header__subtitle { margin: 0.3rem 0 0; font-size: 0.6rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--cyan); } .site-header__meta { margin: 0; padding-top: 0.35rem; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--text-dim); } /* ---------- 占位页 ---------- */ .placeholder { max-width: var(--content-width); margin: 0 auto; padding: clamp(4rem, 12vh, 9rem) 1.5rem; display: grid; justify-items: center; gap: 0.9rem; text-align: center; } .placeholder__crosshair { margin: 0; font-size: 2rem; line-height: 1; color: var(--cyan); } .placeholder__readout { margin: 0; font-size: 0.78rem; letter-spacing: 0.14em; color: var(--text-dim); } .placeholder__title { margin: 0.4rem 0 0; font-size: 1.4rem; font-weight: 700; letter-spacing: 0.22em; } .placeholder__text { margin: 0; font-size: 0.85rem; color: var(--text-dim); letter-spacing: 0.08em; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none; transition: none; } } /* ---------- 全局分类导航（nav.js 挂载） ---------- sticky 头条：站点名 + 册按钮（胶囊）+ mono 同步读数；点击册按钮滑出条目面板（纯点击切换、手风琴、ESC/点外关闭），面板绝对定位下滑、不推挤正文。 */ .site-nav { position: sticky; top: 0; z-index: 60; background: var(--panel-2); border-bottom: 1px solid var(--panel-border); } /* ========== 全站页脚（footer.js） ========== */ .site-footer { margin-top: auto; /* main 不足一屏时沉底（body 为 flex 纵排） */ border-top: 1px solid var(--panel-border); background: var(--panel-2); } .site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); width: 100%; padding: 0.6rem 1.5rem; /* 2026-08-29：页脚整体高度减小约 1/3（原垂直 1rem） */ } .site-footer__brand { margin-right: auto; } .site-footer__sub { margin: 0; font-size: 0.72rem; /* 2026-08-29：去掉「项目展示门户」后页脚单行，全行文字统一 0.72rem */ letter-spacing: 0.04em; color: var(--text-dim); } .site-footer__sync { margin-left: auto; /* 读数与版权行贴右侧，与左侧品牌分行 */ font-size: 0.72rem; letter-spacing: 0.06em; white-space: nowrap; color: var(--text-dim); } .site-footer__meta { margin: 0; font-size: 0.72rem; letter-spacing: 0.06em; white-space: nowrap; color: var(--text-dim); } @media (max-width: 768px) { .site-footer__inner { flex-direction: column; align-items: flex-start; } .site-footer__brand { margin-right: 0; } } /* 页眉/页脚内容贯通全宽（靠边布局）：与常规网站一致，不做版心收拢；左右留白仅保留安全 padding（768 收窄见底部媒体查询）。 */ .site-nav__bar { display: flex; align-items: center; gap: 1rem; width: 100%; padding: 0.85rem 1.5rem; /* 2026-08-29：按钮去边框改纯文字后，垂直留白加高约 1/4 */ } .site-nav__brand { display: inline-flex; align-items: center; gap: 0.55rem; } .site-nav__brand-logo { height: 1.5rem; width: auto; display: block; } .site-nav__brand-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .site-nav__brand-name { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; white-space: nowrap; color: var(--text); } .site-nav__brand-sub { font-size: 0.62rem; letter-spacing: 0.34em; white-space: nowrap; color: var(--text-dim); } .site-nav__home { flex: none; } .site-nav__volumes { display: flex; gap: 0.5rem; } /* 一级导航按钮（2026-08-29 改纯文字）：无胶囊边框/底色，中文主标 + 英文副标竖排，直接点击文字；当前入口靠颜色+字号+放大区分，hover 仅上浮不放大（纯文字放大抖动）。 */ .site-nav__volume { font: inherit; font-size: 0.82rem; letter-spacing: 0.08em; line-height: 1.2; padding: 0.45em 1em; white-space: nowrap; /* 禁文字折行：窗口收窄时按钮宁可整体外溢/折行，不让标题折成两行高低错位 */ display: inline-flex; flex-direction: column; align-items: center; gap: 2px; color: var(--text-dim); background: none; border: none; cursor: pointer; transition: color var(--duration-normal) var(--ease-out-expo), font-size var(--duration-normal) var(--ease-out-expo), transform var(--duration-normal) var(--ease-out-expo); } /* 按钮英文副标：中文主标下 mono 小字（深色数据舱高级感；hover/激活同步亮 cyan） */ .site-nav__volume-en { font-family: var(--font-mono); font-size: 0.52rem; font-weight: 400; letter-spacing: 0.16em; line-height: 1.2; color: var(--text-dim); opacity: 0.72; transition: color var(--duration-normal) var(--ease-out-expo), opacity var(--duration-normal) var(--ease-out-expo); } .site-nav__volume:hover .site-nav__volume-en, .site-nav__volume.is-active .site-nav__volume-en { color: var(--cyan); opacity: 1; } /* hover：文字提亮 + 微上浮（纯文字按钮不再有边框/阴影效果） */ .site-nav__volume:hover { color: var(--text); transform: translateY(-1px); } /* 按下：轻微回缩，模拟按压反馈 */ .site-nav__volume:active { transform: scale(0.97); } /* 当前入口：cyan 高亮 + 加粗 + 轻微放大（无边框时代的醒目态） */ .site-nav__volume.is-active { color: var(--cyan); font-size: 0.9rem; font-weight: 700; transform: scale(1.06); } /* 直链册胶囊：a 标签去下划线 */ .site-nav__volume--link { display: inline-flex; align-items: center; text-decoration: none; } /* 右上角登录区：未登录显「登录」链接，已登录显账号名 + 退出按钮 */ .site-nav__auth { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; /* 推到最右 */ } .site-nav__auth-user { font-size: 0.78rem; letter-spacing: 0.08em; color: var(--cyan); } .site-nav__auth-btn { display: inline-flex; align-items: center; text-decoration: none; font: inherit; font-size: 0.78rem; letter-spacing: 0.08em; padding: 0.35em 1em; color: var(--text-dim); background: none; border: 1px solid var(--panel-border); border-radius: var(--radius-pill); cursor: pointer; transition: color var(--duration-normal) var(--ease-out-expo), border-color var(--duration-normal) var(--ease-out-expo), background-color var(--duration-normal) var(--ease-out-expo); } .site-nav__auth-btn:hover { color: var(--cyan); border-color: oklch(82.8% 0.141 196 / 45%); } .site-nav__auth-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } /* 移动端汉堡按钮（2026-08-30）：桌面端隐藏、导航常显；≤768px 显示在登录区左侧，点击切换 .site-nav--open，导航项收进页头下方的全宽下拉面板（见底部媒体查询）。 */ .site-nav__side { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; /* 整组贴右；窄屏折行时作为整体折到第二行，汉堡始终在登录左侧 */ } .site-nav__menu-btn { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 2.1rem; height: 2.1rem; padding: 0; background: none; border: 1px solid var(--panel-border); border-radius: var(--radius-thumb); cursor: pointer; transition: border-color var(--duration-normal) var(--ease-out-expo), background-color var(--duration-normal) var(--ease-out-expo); } .site-nav__menu-btn:hover { border-color: oklch(82.8% 0.141 196 / 45%); background: var(--cyan-soft); } .site-nav__menu-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } /* 三道横线（CSS 绘制，无图标依赖）；展开态变 X */ .site-nav__menu-bar { width: 1rem; height: 2px; border-radius: 1px; background: var(--text-dim); transition: transform var(--duration-normal) var(--ease-out-expo), opacity var(--duration-normal) var(--ease-out-expo), background-color var(--duration-normal) var(--ease-out-expo); } .site-nav__menu-btn:hover .site-nav__menu-bar, .site-nav--open .site-nav__menu-bar { background: var(--cyan); } .site-nav--open .site-nav__menu-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); } .site-nav--open .site-nav__menu-bar:nth-child(2) { opacity: 0; } .site-nav--open .site-nav__menu-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* 中屏（769–1024）防折行：汉堡菜单 768 才接管，此区间 7 个入口 + 品牌 + 登录易挤爆单行——隐藏英文副标 + 收窄按钮内距；flex-wrap 兜底：仍排不下时整组（登录区）折到第二行，保持每行文字各自整齐。 */ @media (max-width: 1024px) { .site-nav__bar { flex-wrap: wrap; } .site-nav__volumes { gap: 0.15rem; } .site-nav__volume { padding: 0.45em 0.6em; } .site-nav__volume-en { display: none; } } /* 窄屏汉堡下拉面板：导航项收进页头下方全宽面板（绝对定位覆盖正文、不推挤布局），深色面板 + 描边延续页头语言；条目整行横排、发丝线分隔。 */ @media (max-width: 768px) { .site-nav__menu-btn { display: inline-flex; } .site-nav__volumes { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 0.3rem 1rem 0.55rem; background: var(--panel-2); border-bottom: 1px solid var(--panel-border); box-shadow: 0 14px 32px rgb(0 0 0 / 45%); } .site-nav--open .site-nav__volumes { display: flex; } /* 面板内条目：整行左对齐；悬停/激活不再上浮/放大（整行布局防抖动），只留颜色态 */ .site-nav__volumes .site-nav__volume { flex-direction: row; align-items: baseline; gap: 0.6rem; width: 100%; padding: 0.65rem 0.2rem; } .site-nav__volumes .site-nav__volume + .site-nav__volume { border-top: 1px solid var(--panel-border); } .site-nav__volumes .site-nav__volume:hover, .site-nav__volumes .site-nav__volume.is-active { transform: none; } .site-nav__volumes .site-nav__volume.is-active { font-size: 0.86rem; } } .site-footer__sync { margin-left: auto; /* 读数与版权行贴右侧，与左侧品牌分行 */ font-size: 0.72rem; letter-spacing: 0.06em; white-space: nowrap; color: var(--text-dim); } /* 同步按钮形态（提供 onSync 时读数变按钮）：默认与文本读数同貌，hover 才亮可点性 2026-08-29 修复：原来用 font:inherit——font 是简写会把 font-size 也置为继承值，按钮被拉回浏览器默认 ~16px，比页脚其它 0.72rem 文字大一号；改显式固定字号。 */ .site-footer__sync--btn { padding: 0.15rem 0.6rem; /* 垂直 padding 同步收窄，配合页脚整体降高 */ margin-right: -0.6rem; /* 抵掉 padding，保持视觉对齐 */ border: none; border-radius: var(--radius-pill); background: none; font-family: inherit; font-size: 0.72rem; letter-spacing: 0.06em; cursor: pointer; color: LinkText; /* 与备案号原生链接同色（浏览器默认链接蓝），亮可点性 */ transition: color var(--duration-normal) var(--ease-out-expo), background-color var(--duration-normal) var(--ease-out-expo); } .site-footer__sync--btn:hover { color: var(--text); background: var(--cyan-soft); } .site-footer__sync--btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } .site-footer__sync--btn:disabled { cursor: wait; } .site-nav__volume:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } @media (max-width: 768px) { .site-nav__bar { flex-wrap: wrap; gap: 0.5rem 0.75rem; padding: 0.5rem 1rem; } .site-nav__brand-name { font-size: 0.72rem; letter-spacing: 0.06em; } .site-nav__brand-sub { letter-spacing: 0.2em; } .site-nav__auth-btn { font-size: 0.72rem; padding: 0.3em 0.8em; } /* 窄屏隐藏英文副标：按钮回单行中文，防页眉撑高/拥挤 */ .site-nav__volume-en { display: none; } } /* ---------- 页面骨架（shell.js 挂载：导航条 + 主区，面包屑在主区顶部） ---------- */ .page-shell__crumbs { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5em; margin: 0 0 1rem; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--text-dim); } .page-shell__crumbs a { color: inherit; text-decoration: none; } .page-shell__crumbs a:hover { color: var(--cyan); } .page-shell__crumb-sep { color: var(--panel-border); } .page-shell__crumb[aria-current='page'] { color: var(--text); } .page-shell__main { /* width: 100% 必须保留：body 为 flex 纵排，交叉轴 auto margin 会让 width: auto 退化为 fit-content（内容自适应），导致各页内容区宽度随内容忽宽忽窄（2026-08-24 实测 overview 574px / construction 337px，版心 1280 未生效）。 width: 100% + max-width 还原「铺满至版心、超出居中」语义。 */ width: 100%; max-width: var(--content-width); margin: 0 auto; padding: 1.4rem 1.5rem 4rem; } /* 窄屏收窄留白：与 .site-nav__bar / .hero 的 768 收窄口径一致（设计语言 §4）。 */ @media (max-width: 768px) { .page-shell__main { padding: 1.1rem 1rem 3rem; } } .page-shell__title { margin: 0 0 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--panel-border); font-size: 1.4rem; font-weight: 700; letter-spacing: 0.22em; } .page-shell__crumbs a:focus-visible, .state-error__retry:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } /* ---------- 状态三件套（states.js 挂载） ---------- */ /* 骨架：面板横条 + 微光扫过（仅 transform 动；reduced-motion 由全局规则压为静态） */ .state-skeleton { display: grid; gap: 0.9rem; padding: 1rem 0; } .state-skeleton__bar { position: relative; height: 10px; overflow: hidden; border-radius: 1px; background: var(--panel); } .state-skeleton__bar:nth-child(1) { width: 88%; } .state-skeleton__bar:nth-child(2) { width: 64%; } .state-skeleton__bar:nth-child(3) { width: 76%; } .state-skeleton__bar::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient( 90deg, transparent, rgba(217, 239, 251, 0.08), transparent ); background: linear-gradient(90deg, transparent, oklch(94% 0.028 231 / 8%), transparent); animation: state-shimmer 1.6s var(--ease-out-expo) infinite; } @keyframes state-shimmer { to { transform: translateX(100%); } } /* 空态：小十字丝记号 + 指引文案 */ .state-empty { display: grid; justify-items: center; gap: 0.6rem; padding: 2.5rem 1rem; text-align: center; } .state-empty__glyph { font-size: 1rem; line-height: 1; color: var(--cyan); } .state-empty__text { margin: 0; font-size: 0.85rem; letter-spacing: 0.08em; color: var(--text-dim); } /* 错误态：内联一行 + 重试，不炸整页 */ .state-error { display: flex; align-items: center; gap: 1rem; padding: 1.2rem 0; } .state-error__text { margin: 0; font-size: 0.85rem; letter-spacing: 0.08em; color: var(--text-dim); } .state-error__retry { font: inherit; font-size: 0.8rem; letter-spacing: 0.1em; color: var(--cyan); background: none; border: 1px solid var(--cyan); border-radius: 2px; padding: 0.3em 1.1em; cursor: pointer; transition: color var(--duration-normal) var(--ease-out-expo), background-color var(--duration-normal) var(--ease-out-expo); } .state-error__retry:hover { color: var(--badge-ink); background-color: var(--cyan); } /* ---------- reveal 动效（IntersectionObserver 配合，见 states.js observeReveals） ---------- */ .reveal { opacity: 0; transform: translateY(8px); } .reveal.is-visible { opacity: 1; transform: none; transition: opacity 250ms var(--ease-out-expo), transform 250ms var(--ease-out-expo); } /* reduced-motion：不依赖 JS 观察，内容直接静止可见 */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* ---------- 全屏大图预览（lightbox.js 渲染；2026-08-21 自 home.css 下沉共享） ---------- */ .lightbox { width: min(1080px, 92vw); height: min(80vh, 900px); padding: 0; border: 1px solid var(--panel-border); border-top: 2px solid var(--cyan); background: var(--panel); color: var(--text); } .lightbox::backdrop { background: rgba(3, 7, 20, 0.85); background: oklch(10% 0.03 260 / 85%); } .lightbox__stage { position: relative; height: calc(100% - 52px); display: grid; place-items: center; background: var(--bg); overflow: hidden; /* 缩放/平移超界裁切 */ touch-action: none; /* 拖拽平移不被页面手势拦截 */ } .lightbox__image { max-width: 100%; max-height: 100%; object-fit: contain; /* 先出缩略图再淡入原图：加载完成前透明，is-ready 后过渡显示 */ opacity: 0; transition: opacity 320ms var(--ease-out-expo); will-change: transform; /* 缩放/平移走 GPU 合成 */ cursor: zoom-in; -webkit-user-drag: none; /* 禁用浏览器原生图片拖拽（否则拖拽平移被 pointercancel 打断） */ user-select: none; } .lightbox__image.is-ready { opacity: 1; } /* 放大态：可拖拽平移（拖拽中锁 grabbing） */ .lightbox__stage.is-zoomed { cursor: grab; } .lightbox__stage.is-dragging { cursor: grabbing; } .lightbox__nav { position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 72px; border: 1px solid var(--panel-border); background: var(--panel-2); color: var(--cyan); font-size: 2rem; line-height: 1; cursor: pointer; transition: color var(--duration-normal) var(--ease-out-expo), background-color var(--duration-normal) var(--ease-out-expo); } .lightbox__nav--prev { left: 0.9rem; } .lightbox__nav--next { right: 0.9rem; } .lightbox__nav:hover { color: var(--badge-ink); background-color: var(--cyan); } .lightbox__bar { display: flex; align-items: center; gap: 1rem; height: 52px; padding: 0 1rem; border-top: 1px solid var(--panel-border); } .lightbox__caption { margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; letter-spacing: 0.06em; } .lightbox__counter { font-size: 0.72rem; color: var(--text-dim); } /* 缩放指示：底部条内 mono 按钮，点击还原 1x */ .lightbox__zoom { min-width: 3.4rem; padding: 0.3rem 0.6rem; border: 1px solid var(--panel-border); border-radius: 6px; background: none; color: var(--cyan); font-size: 0.72rem; font-variant-numeric: tabular-nums; cursor: pointer; transition: color var(--duration-normal) var(--ease-out-expo), background-color var(--duration-normal) var(--ease-out-expo), border-color var(--duration-normal) var(--ease-out-expo); } .lightbox__zoom:hover { color: var(--badge-ink); background-color: var(--cyan); border-color: var(--cyan); } /* 原图加载中：底部条内 mono cyan 提示 + 字节进度条（XHR 可计算时显示百分比） */ .lightbox__status { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.7rem; letter-spacing: 0.1em; color: var(--cyan); } /* display:flex 会覆盖 UA 的 [hidden]，必须显式补回（否则加载完成/直连原图时状态条不消失） */ .lightbox__status[hidden] { display: none; } .lightbox__status-text { animation: lightbox-status-pulse 1.2s var(--ease-out-expo) infinite; } .lightbox__status-pct { font-variant-numeric: tabular-nums; color: var(--cyan); } .lightbox__progress { width: 76px; height: 3px; border-radius: 2px; background: var(--panel-border); overflow: hidden; } .lightbox__progress-bar { display: block; height: 100%; width: 0%; border-radius: 2px; background: var(--cyan); transition: width 140ms linear; } /* 进度不可计算（响应无 Content-Length）：不确定态游走 */ .lightbox__progress-bar.is-indeterminate { width: 40% !important; animation: lightbox-progress-wander 1s var(--ease-out-expo) infinite; } @keyframes lightbox-progress-wander { 0% { translate: -60%; } 100% { translate: 220%; } } @keyframes lightbox-status-pulse { 50% { opacity: 0.35; } } .lightbox__close { width: 34px; height: 34px; border: 1px solid var(--panel-border); background: none; color: var(--text-dim); font-size: 1rem; cursor: pointer; transition: color var(--duration-normal) var(--ease-out-expo), border-color var(--duration-normal) var(--ease-out-expo); } .lightbox__close:hover { color: var(--red-badge); border-color: var(--red-badge); } /* 缩略图导航条：多图时舞台底部居中，当前 cyan 高亮，点击切图（横向滚动） */ .lightbox__thumbs { position: absolute; left: 50%; bottom: 0.8rem; translate: -50% 0; display: flex; gap: 0.45rem; max-width: 86%; padding: 0.35rem; border: 1px solid var(--panel-border); border-radius: 10px; background: rgba(3, 10, 36, 0.78); backdrop-filter: blur(6px); overflow-x: auto; scrollbar-width: none; } .lightbox__thumbs::-webkit-scrollbar { display: none; } .lightbox__thumbs[hidden] { display: none; } .lightbox__thumb { flex: 0 0 auto; width: 52px; height: 39px; /* 4:3 */ padding: 0; border: 1px solid var(--panel-border); border-radius: 6px; overflow: hidden; background: var(--thumb-bg); cursor: pointer; transition: border-color var(--duration-normal) var(--ease-out-expo); } .lightbox__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .lightbox__thumb:hover { border-color: rgba(3, 226, 229, 0.5); border-color: oklch(82.8% 0.141 196 / 50%); } .lightbox__thumb.is-current { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan); } .lightbox__thumb--placeholder { display: grid; place-items: center; flex: 0 0 auto; width: 52px; height: 39px; border: 1px dashed var(--panel-border); border-radius: 6px; background: var(--thumb-bg); color: var(--text-dim); font-size: 0.72rem; } .lightbox__nav:focus-visible, .lightbox__close:focus-visible, .lightbox__zoom:focus-visible, .lightbox__thumb:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }