/* ========================================================================== hydro-nav.css · OJ 顶栏【增量层】· 仅保留：导航项悬停动效 + 蓝色下划线 引入位置：templates/layout/html5.html，必须在 hydro-typography.css 之后 用户确认保留的两项： · 导航项悬停动效（opacity .72 → 1 + 淡黑底） · 当前项 / 悬停的蓝色下划线（hover 半展 .5、active 全展 1） 已按用户要求裁掉、回退到上游默认行为的： 滚动阴影 / logo 描边与悬停微抬 / 移动顶栏毛玻璃改白 / 汉堡深色 / 抽屉滑入动效 / 遮罩淡入 / 内容推动屏蔽 —— 这些现在由 hydro-apple.css 第 3 节与 ui-default 主题的默认行为负责。 hydro-nav.js 只负责滚动阴影，一并停用。 第 4 节是后来补的「顶栏变高后的偏移修正」：顶栏从 45px 涨到 56px 之后， 凡是写死 45px / 直接从 top:0 起算的全屏层都会错位，详见各条注释。 选择器一律用项目既有的 :root:root 前缀提权，否则打不过 apple 层的 (0,5,0)。 ========================================================================== */ :root { --hz-nav-line: #0071E3; --hz-nav-ease: cubic-bezier(.4, 0, .2, 1); --hz-nav-dur-fast: 150ms; --hz-nav-dur: 200ms; } /* -------------------------------------------------------------------------- 1 · 导航项：默认 .72，悬停提亮 + 底部蓝线半展开 -------------------------------------------------------------------------- */ :root:root .nav .nav__item { opacity: .72; transition: opacity var(--hz-nav-dur-fast) var(--hz-nav-ease), background var(--hz-nav-dur-fast) var(--hz-nav-ease), color var(--hz-nav-dur-fast) var(--hz-nav-ease); } :root:root .nav .nav__item::after { content: ""; position: absolute; left: 1.25rem; right: 1.25rem; bottom: .5rem; height: 2px; background: var(--hz-nav-line); border-radius: 1px; transform: scaleX(0); transform-origin: center; transition: transform var(--hz-nav-dur) var(--hz-nav-ease); } :root:root .nav .nav__item:hover { opacity: 1; background: rgba(0, 0, 0, .03); } :root:root .nav .nav__item:hover::after { transform: scaleX(.5); } /* -------------------------------------------------------------------------- 2 · 当前项：蓝字 + 底部蓝线全展开 hydro-apple.css 给的「顶部 3px 边框 + ::before 蓝色光晕」(0,5,0) 会和下划线叠成三条指示，故去掉，只留下划线。 opacity 必须显式给 1：否则 ::after 会跟着继承 .72 一起半透明。 -------------------------------------------------------------------------- */ :root:root .nav .nav__item.nav--active { opacity: 1; color: var(--hz-nav-line); border-top-color: transparent; } :root:root .nav .nav__item.nav--active::before { box-shadow: none; } :root:root .nav .nav__item.nav--active::after { transform: scaleX(1); } /* -------------------------------------------------------------------------- 3 · 尊重系统减少动效偏好 -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root:root .nav .nav__item, :root:root .nav .nav__item::after { transition: none !important; } } /* ========================================================================== 4 · 顶栏高度 token + 顶栏变高引发的偏移修正 -------------------------------------------------------------------------- 背景：排版治理把根字号提到 20px 后，nav 由 2.8125rem 自动涨到 56.25px， hydro-typography.css v13 起又把桌面顶栏钉死 56px。凡是写死旧值 45px、 或直接「从 top:0 铺满」的全屏层，都会与 fixed 顶栏打架。 这里统一用 --hz-nav-h 表达，将来顶栏再变只需改这一个值。 ========================================================================== */ :root { /* 桌面顶栏实测高度（typography v13+ 钉死 .nav 为 56px） */ --hz-nav-h: 56px; } @media only screen and (max-width: 600px) { :root { /* 窄屏下桌面 .nav 是 display:none，顶栏由 .header--mobile 承担，实测 65px */ --hz-nav-h: 65px; } } /* -------------------------------------------------------------------------- 4a · 在线编程模式（Alt+E）—— 容器层 -------------------------------------------------------------------------- 成因（实测）： 进入在线编程时，604 chunk 里的 JS 会给 body 加 header--collapsed + mode--scratchpad， 然后把 .scratchpad-container 以过渡动画送到 left:0 / top:0 / width:100% / height:100%。 容器是 absolute（包含块 #panel），顶栏是 fixed 56px / z-index 500，所以容器顶部被压住。 !! 这里刻意【不加 padding-top !! #scratchpad 是 position:absolute，absolute 元素相对 containing block 的 padding box 定位，而 padding box 的顶部仍在 y=0 —— 加 padding 根本推不动它。 （v5 第一版就是踩了这个坑，容器 padding 生效了但内部 UI 依然从 45px 起， 用户实测仍然被遮 11px。）真正的偏移必须改 #scratchpad 的 top，见 4d。 仅保留 max-height：主题遗留的 .header--collapsed #panel{padding-top:320px} 会把容器撑到 1428px（视口才 900px），见 4b。 -------------------------------------------------------------------------- */ body.mode--scratchpad .scratchpad-container { max-height: 100vh; max-height: 100dvh; /* 移动端地址栏收起时用可视高度，避免底部被切 */ } /* -------------------------------------------------------------------------- 4b · 去掉 header--collapsed 下 #panel 的 320px 遗留内边距 旧版 Hydro「大图 header」时代的残留。现在顶栏只有 56px，这 320px 唯一的作用就是把在线编程容器撑高 320px（实测 1428px vs 视口 900px）。 -------------------------------------------------------------------------- */ :root:root .header--collapsed #panel { padding-top: 0; } /* -------------------------------------------------------------------------- 4c · 两处写死 45px 的旧顶栏偏移 → 跟随 --hz-nav-h · #nprogress .bar：页面加载进度条（fixed，z-index 99 < 顶栏 500）， 顶在 45px 时会被 56px 的顶栏整个盖住。 · #rating-placeholder：个人主页的能力曲线占位块。 -------------------------------------------------------------------------- */ :root:root #nprogress .bar { top: var(--hz-nav-h, 56px); } :root:root .page--user_detail #rating-placeholder { top: var(--hz-nav-h, 56px); } /* -------------------------------------------------------------------------- 4d · ★ 在线编程真正承载 UI 的那一层：主题写死 top:45px -------------------------------------------------------------------------- 主题规则： #scratchpad{position:absolute;left:0;top:45px;width:100%;bottom:0} 45px 是旧顶栏高度。现在顶栏 56px ⇒ 左侧 tablist（题面/设置/代码）的第一个 图标、右侧工具栏（运行自测 F9 / 递交评测 F10 / 退出 Alt+Q）顶部被切掉 11px， 观感就是"三个页面都被遮住了"。 absolute 相对 padding box 定位，所以只能直接改 top；bottom:0 会自动适配高度， 不用再管 height。 作用域限定在 mode--scratchpad 内：退出时 body 的 class 立即移除，top 立刻回到 主题的 45px（原版行为），500ms 退出动画期间不会被这条 56px 顶偏； 若写成常驻规则，退出动画期间内容会整体下坠 56px。 -------------------------------------------------------------------------- */ :root:root body.mode--scratchpad #scratchpad { top: var(--hz-nav-h, 56px); } /* -------------------------------------------------------------------------- 4e · 同源的其它写死 45px（一并修，避免下一处再冒出来） · .fullscreen-content：图片/附件的全屏查看层（absolute + top:45 + bottom:0） · .nav--placeholder：沉浸式布局（layout/immersive.html）给 fixed 顶栏的占位块 · .hint：橙色提示条，styl 里用 $nav-item-height 编译成 45px -------------------------------------------------------------------------- */ :root:root .fullscreen-content { top: var(--hz-nav-h, 56px); } :root:root .nav--placeholder { height: var(--hz-nav-h, 56px); } :root:root .hint { top: var(--hz-nav-h, 56px); }