/* ========================================================================== LongPT · Nebula Design System · base.css -------------------------------------------------------------------------- 基础层：重置 + 排版 + 版式骨架（header / nav / info block / footer） 这一层负责「全站每一页都会看到」的东西。改这里 = 全站生效。 ========================================================================== */ /* -------------------------------------------------------------------------- 1. 现代重置 -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; padding: 0; font-family: var(--nx-font-sans); font-size: var(--nx-font-base); line-height: var(--nx-leading-normal); color: var(--nx-text); background: var(--nx-canvas); /* 极淡的网格纹理，提升质感而不干扰阅读 */ background-image: radial-gradient(circle at 15% 0%, rgba(22, 119, 255, 0.05) 0%, transparent 45%), radial-gradient(circle at 85% 5%, rgba(22, 119, 255, 0.035) 0%, transparent 40%); background-attachment: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 移除旧式表现标签的默认副作用 */ font { color: inherit; font-size: inherit; font-family: inherit; } center { display: block; text-align: center; } /* 链接基线与可访问焦点 */ a { color: var(--nx-link); text-decoration: none; transition: color var(--nx-dur-fast) var(--nx-ease-out); } a:hover { color: var(--nx-link-hover); text-decoration: none; } a:visited { color: var(--nx-link-visited); } :focus-visible { outline: 2px solid var(--nx-primary); outline-offset: 2px; border-radius: var(--nx-radius-sm); } /* 图片默认不溢出 */ img { max-width: 100%; height: auto; border: 0; vertical-align: middle; } /* 表格基线：去掉上古默认间距，统一由组件层接管 */ table { border-collapse: separate; border-spacing: 0; } /* 表单元素继承字体（上古页面大量依赖浏览器默认字体，这里统一） */ input, select, textarea, button, optgroup { font-family: inherit; font-size: inherit; color: inherit; } /* 代码/预格式 */ pre, code, kbd, samp { font-family: var(--nx-font-mono); font-size: 0.92em; } /* 滚动条（Webkit）—— 让长列表滚动不突兀 */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--nx-surface-sunken); } ::-webkit-scrollbar-thumb { background: var(--nx-border-strong); border-radius: var(--nx-radius-full); border: 2px solid var(--nx-surface-sunken); } ::-webkit-scrollbar-thumb:hover { background: var(--nx-text-tertiary); } /* 选中文字 */ ::selection { background: var(--nx-primary); color: var(--nx-on-primary); } /* -------------------------------------------------------------------------- 2. 版式骨架 · 页头 -------------------------------------------------------------------------- */ table.head { width: 100%; max-width: var(--nx-content-width); margin: 0 auto; background: var(--nx-gradient-surface); border: 0; border-bottom: var(--nx-border-thin) solid var(--nx-border); border-radius: 0 0 var(--nx-radius-xl) var(--nx-radius-xl); box-shadow: var(--nx-shadow-sm); border-spacing: 0; } table.head > tbody > tr > td { padding: var(--nx-space-5) var(--nx-space-6); vertical-align: middle; } /* 站名（文字 logo） */ .logo { font-size: var(--nx-font-3xl); font-weight: var(--nx-weight-bold); letter-spacing: -0.02em; line-height: var(--nx-leading-tight); /* 站名走渐变填充文字。深色主题的 header 是深底， 品牌蓝渐变会糊在底上（深蓝字压深蓝底）， 故留一个 --nx-gradient-logo 供主题覆盖为亮色渐变； 未定义该令牌的主题自动回落到品牌渐变。 */ background: var(--nx-gradient-logo, var(--nx-gradient-brand)); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; } .slogan { margin-top: var(--nx-space-2); font-size: var(--nx-font-sm); color: var(--nx-text-tertiary); letter-spacing: 0.02em; } .logo_img img { max-height: 56px; width: auto; } /* -------------------------------------------------------------------------- 3. 版式骨架 · 主导航 -------------------------------------------------------------------------- */ /* ⚠️ 2026-09-20：不再画「整页大卡」。 用户反馈「首页下面几块比上边窄一点」——根因在此：这张卡的 surface 底 实际只会在头部那一行露出来（#outer 自己铺了 --nx-canvas），于是头部凭空 多出一圈比正文宽 16px 的白边，正文反倒像缩进去了。 卡片感下放到各内容块自己画，全站左右边缘统一落在 #outer 的 16px 这一档。 */ table.mainouter { width: 100%; max-width: var(--nx-content-width); margin: 0 auto; background: transparent; border: 0; border-radius: 0; box-shadow: none; border-spacing: 0; } table.mainouter > tbody > tr > td { border: 0; } /* nav 容器：吸顶 + 毛玻璃 */ #nav_block { padding: 0 !important; background: var(--nx-surface); border-bottom: var(--nx-border-thin) solid var(--nx-border); border-radius: var(--nx-radius-xl) var(--nx-radius-xl) 0 0; position: sticky; top: 0; z-index: var(--nx-z-sticky); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); } /* ⚠️ 2026-09-20：导航页（nav_block 里真的有 ul.menu）不要这张卡。 它原本铺满 mainouter 整行（实测 0..1620），而正文卡片被 #outer 的 16px padding 收窄到 16..1604 —— 头部于是每页都比下面宽 16px，看起来就是用户 说的「两边比上边窄了一点」。判据用「有没有导航菜单」最稳： 登录 / 找回密码 / 注册关闭 这三页把 nav_block 当整页容器用（里面没有 ul.menu），它们仍然需要这张卡，所以只在这里摘掉导航页的。 顺带关掉毛玻璃：底色透明后 blur 已无意义，而它会把子树变成合成层 —— 切主题时子树样式不重算（下面 :has() 分支里有同款记录）。 */ #nav_block:has(ul.menu) { background: transparent; border: 0; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; } /* ⚠️ 登录页的 `#nav_block` 不是导航容器，而是**整个内容容器** （实测它里面装的是 #login-form，一条导航菜单都没有）。 同一个 id 承担两种语义带来两个问题： ① 整个登录内容区被套上 sticky，视觉上「整页吸顶」； ② `sticky + backdrop-filter` 形成合成层后，切换 data-nx-theme 时 其子树的样式**不会重新计算** —— 表现为「登录 / 注册」这两个链接 在切明暗后颜色不跟着变（刷新才正常）。 这里让它退化成普通容器，两个问题一起解决；普通页面的导航不受影响。 ⚠️ 2026-09-18 扩充①：原来只判 `:has(#login-form)`，导致**同为内容容器的 兄弟页漏网** —— recover.php（找回密码）/ confirm_resend.php（重发确认信）， 它们都往 `#nav_block` 里直接装一整个表单，却因为没有 `#login-form` 而拿到了**导航容器**的样式： · 内容被套上 sticky + 毛玻璃 · `padding: 0 !important` 让正文贴边 现在把判定放宽为「nav_block 里直接装着 form 且 form 里有裸表格」—— 这些页面的表格都是 ``，且是 nav_block 的子级， 而真正的导航页（有 ul.menu）不含这种结构，不会误伤。 ⚠️ 2026-09-18 扩充②：signup.php 的「注册已关闭」提示页结构又不一样 —— 它**根本没有 **（实测 `has ? NO`），是 nav_block > table > tbody > tr > td.embedded > h2 + table[border="1"] 所以光看 form 会漏掉它。补一条 `> table > tbody > tr > td.embedded` 作判据。 `td.embedded` 是 NexusPHP 里「嵌在页面中的一块内容卡」的语义类， 出现在 nav_block 正下方就说明这是内容页而非导航页。 */ #nav_block:has(#login-form), #nav_block:has(> form > table[border]), #nav_block:has(> table > tbody > tr > td.embedded) { position: static; z-index: auto; backdrop-filter: none; -webkit-backdrop-filter: none; /* 内容容器需要正常的内边距，不能是导航条的 0 */ padding: var(--nx-space-6) var(--nx-space-5) !important; border-radius: var(--nx-radius-xl); } /* 主导航菜单 */ nav#nav { padding: 0 var(--nx-space-3); } nav#nav ul.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: stretch; /* 2026-09-18：内容区放宽到 1680px 后，原来「默认左对齐 + gap:2px」 会让十几个菜单项全挤在左边、右侧空一大片，且相邻项几乎粘在一起。 改为两端对齐铺满整行；gap 提到 8px 只作最小间距， 实际间距由 space-between 按剩余空间均分。 */ justify-content: space-between; gap: var(--nx-space-3); } nav#nav ul.menu > li { position: relative; display: flex; } nav#nav ul.menu > li > a { position: relative; /* 给 ::after 下划线做定位基准 */ display: flex; align-items: center; gap: var(--nx-space-2); padding: var(--nx-space-4) var(--nx-space-4); font-size: var(--nx-font-md); font-weight: var(--nx-weight-medium); color: var(--nx-text-secondary); border: 0; background: transparent; border-radius: var(--nx-radius-md); white-space: nowrap; line-height: var(--nx-leading-snug); /* 2026-09-18 动效：时长从 fast 提到 base，并单列一条 transform， 配合下面的「上浮 + 下划线展开」形成完整反馈 */ transition: color var(--nx-dur-base) var(--nx-ease-out), background-color var(--nx-dur-base) var(--nx-ease-out), transform var(--nx-dur-fast) var(--nx-ease-out); } /* 老菜单靠    撑字距，与 flex gap 叠加后过宽 —— 这里把多余空白收窄 */ nav#nav ul.menu > li > a > i { margin-right: 2px; transition: transform var(--nx-dur-base) var(--nx-ease-spring); } nav#nav ul.menu > li > a:active { transform: translateY(1px); } /* 悬浮 / 当前所在页：玻璃拟态胶囊 —— 1px 主色描边 + 顶部一道内高光，让胶囊有「玻璃片」的厚度感。 用 box-shadow 而非 border：上方有 `border: 0 !important` 的中和规则， box-shadow 不受它影响，也省得再打一层 !important。 --nx-glass-inset 由主题 tokens 提供（Cyber 有），缺省回落到通用值。 */ nav#nav ul.menu > li > a:hover, nav#nav ul.menu > li.selected > a, nav#nav ul.menu > li.active > a, nav#nav ul.menu > li.current > a { color: var(--nx-primary-strong); background: var(--nx-primary-soft); box-shadow: inset 0 0 0 1px var(--nx-primary-border, rgba(127, 127, 127, 0.35)), var(--nx-glass-inset, inset 0 1px 0 rgba(255, 255, 255, 0.10)); } nav#nav ul.menu > li > a:hover { transform: translateY(-1px); } nav#nav ul.menu > li:hover > a > i { transform: translateY(-1px) scale(1.12); } /* ---- 底部金色弧光 ---- 用户反馈「最初下边那条金色弧边更好看」，故把它加回来。 ⚠️ 关键：贴在胶囊【下沿】（bottom:0）而不是像之前那样悬在底部上方 5px —— 贴着下沿时它与胶囊底边重合，视觉上是「底边被点亮」，不会看成两条线； 两端用渐变收细 + 圆角，所以看着是一道弧光而不是生硬的色块。 */ nav#nav ul.menu > li > a::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent 0%, var(--nx-primary) 25%, var(--nx-primary) 75%, transparent 100%); transform: translateX(-50%); transition: width var(--nx-dur-base) var(--nx-ease-out); pointer-events: none; } nav#nav ul.menu > li > a:hover::after, nav#nav ul.menu > li.selected > a::after, nav#nav ul.menu > li.active > a::after, nav#nav ul.menu > li.current > a::after { width: calc(100% - var(--nx-space-5)); } /* 当前所在页：再压一层字重，与悬浮态区分 */ nav#nav ul.menu > li.selected > a, nav#nav ul.menu > li.active > a, nav#nav ul.menu > li.current > a { font-weight: var(--nx-weight-semibold); } nav#nav ul.menu > li.dropdown:hover > a, nav#nav ul.menu > li.dropdown > a:hover { color: var(--nx-primary-strong); background: var(--nx-primary-soft); } /* 导航里被旧 CSS 当成按钮渲染的情况（如多级菜单给 li 加了 border/background）—— 一律中和 */ nav#nav ul.menu > li, nav#nav ul.menu > li > a { border: 0 !important; background-image: none !important; } nav#nav ul.menu > li > a:hover, nav#nav ul.menu > li.selected > a, nav#nav ul.menu > li.active > a { background-color: var(--nx-primary-soft) !important; } /* 多级菜单插件可能给 li 加的背景/阴影，显式清掉 */ nav#nav ul.menu > li button, nav#nav ul.menu > li > a + button { background: transparent !important; border: 0 !important; color: inherit !important; padding: 0 0 0 var(--nx-space-1) !important; box-shadow: none !important; cursor: pointer; font-size: var(--nx-font-xs); } /* 下拉指示箭头（「种子」菜单右侧） 图标本身是 fa-chevron-down（朝下）。原来 multilevel_menu.css 写的是 `:hover { rotate(180deg) }` → 悬浮反而翻转成【朝上】，语义反了。 改为：默认 rotate(-90deg) 呈横向「→」（表示可展开）， 悬浮时 rotate(0) 回到朝下「↓」（表示已展开），带过渡形成转动效果。 */ nav#nav .downarrowpointer { font-size: 0.75em; opacity: 0.6; display: inline-block; transform: rotate(-90deg); transition: transform var(--nx-dur-base) var(--nx-ease-out); } nav#nav ul.menu > li.dropdown:hover .downarrowpointer, nav#nav ul.menu > li.dropdown > a:hover .downarrowpointer { transform: rotate(0deg); opacity: 1; } /* 下拉抽屉（结构上在 nav 之外，详见 multilevel_menu.css 覆盖） */ .ddsubmenustyle { background: var(--nx-surface) !important; border: var(--nx-border-thin) solid var(--nx-border) !important; border-radius: var(--nx-radius-lg) !important; box-shadow: var(--nx-shadow-lg) !important; padding: var(--nx-space-2) !important; z-index: var(--nx-z-dropdown) !important; min-width: 180px; width: auto !important; height: auto !important; /* 永久覆盖全局 height:0，避免内容被裁掉“完全不显示” */ overflow: visible !important; visibility: visible !important; /* 强行压住全局 visibility:hidden；显隐改由 opacity 控制 */ /* 收起态：transform+opacity 走 GPU 合成；opacity/transform/pointer-events 不带 !important，以便 JS 内联样式能覆盖（样式表 !important 会压过内联普通样式） */ transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity var(--nx-dur-fast) var(--nx-ease-out), transform var(--nx-dur-fast) var(--nx-ease-out); } .ddsubmenustyle ul, .ddsubmenustyle li { list-style: none !important; margin: 0 !important; padding: 0 !important; } .ddsubmenustyle ul li a, .ddsubmenustyle li a { display: flex !important; align-items: center; gap: var(--nx-space-2); color: var(--nx-text) !important; background: transparent !important; border: 0 !important; border-radius: var(--nx-radius-md) !important; padding: var(--nx-space-3) var(--nx-space-4) !important; font-size: var(--nx-font-base) !important; font-weight: var(--nx-weight-normal) !important; line-height: var(--nx-leading-snug); transition: background-color var(--nx-dur-fast) var(--nx-ease-out), color var(--nx-dur-fast) var(--nx-ease-out); } .ddsubmenustyle ul li a:hover, .ddsubmenustyle li a:hover { background: var(--nx-surface-hover) !important; color: var(--nx-primary-strong) !important; } .ddsubmenustyle ul li a i, .ddsubmenustyle ul li a .fas, .ddsubmenustyle ul li a .far { color: var(--nx-primary-strong) !important; width: 16px; text-align: center; flex: 0 0 auto; } /* 展开态挂钩：显示/隐藏的实际状态由 JS 内联样式控制（可覆盖、无 !important 冲突）； 此规则仅作主题扩展钩子，值与非 !important 内联一致，不参与强制覆盖 */ .ddsubmenustyle.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } /* -------------------------------------------------------------------------- 4. 版式骨架 · 用户信息条 -------------------------------------------------------------------------- */ #info_block { width: 100%; border-spacing: 0; background: var(--nx-surface-alt); /* 2026-09-20：原来只有 border-bottom（那时它贴在 nav_block 这张大卡里， 四周不需要描边）。nav_block 的卡在导航页取消后，信息条成了独立的一块， 四边都得画，否则在浅色下只剩一层几乎看不出的色差。 */ border: var(--nx-border-thin) solid var(--nx-card-border); table-layout: auto; } #info_block td { border: 0; padding: var(--nx-space-4) var(--nx-space-5); vertical-align: top; } #info_block td.bottom { border: 0; } #info_block .medium { font-size: var(--nx-font-base); line-height: var(--nx-leading-loose); color: var(--nx-text-secondary); } #info_block .medium a { color: var(--nx-link); } #info_block .medium a:hover { color: var(--nx-link-hover); } /* 用户信息里的分隔符竖线 —— 老页面用 " | " 纯文本，视觉上太挤，这里弱化 */ #info_block .medium { word-spacing: 0.05em; } /* 右侧统计区（分享率/上传量/下载量/活跃/连接数）—— 给点呼吸，避免糊成一片 */ #info_block .medium br + * { margin-top: var(--nx-space-1); } /* 用户信息中的结构化数值行 */ #info_block font[class^="color_"] { font-weight: var(--nx-weight-semibold); margin-right: var(--nx-space-1); } /* ---- 数据卡（2026-09-18 重做）---- 原来「分享率: 8.018 上传量: 5.839 TB 下载量: 745.70 GB …」是一整行 同字号同颜色的灰字，十几个数字连成一串、没有主次。 改为横向排列的小卡片：标签小字在上、数值大字在下，关键指标一眼可辨。 用 inline-flex 而不是「外层再套一个 flex 容器」—— 这样同一 span 里 后面紧跟的 H&R / 领取等行内内容仍能自然接在下方，不必改更多标记。 ⚠️ 标签必须统一成同一个次要色：components.css 里 .color_ratio / .color_uploaded / .color_downloaded / .color_active 各自带 !important 的 彩色定义（金 / 绿 / 红 / 蓝），不写 !important 压不住 —— 五个标签 五颜六色正是用户说的「不好看」。这里用更高特异性 + !important 统一。 */ /* ⚠️ 选择器必须比 `#info_block .medium br + *`（特异性 1,1,1）更高： 数据卡正好紧跟在
之后，那条旧规则会把【第一个卡片】的 margin-top 改成 2px，导致「分享率」比其余卡片高 6px、整排看着不齐。 这里用 .medium 提一级特异性（1,2,0）压住它。 */ #info_block .medium .nx-stat { position: relative; /* 给左侧语义色条定位 */ isolation: isolate; /* 建层叠上下文：让 ::after 光晕稳定待在数字之下 */ display: inline-flex; flex-direction: column; justify-content: center; /* 内容垂直居中，高度一致时更稳 */ vertical-align: top; box-sizing: border-box; min-width: 118px; min-height: 62px; /* ⚠️ 统一高度：否则「可连接」比别的矮/高，参差不齐 */ margin: var(--nx-space-3) var(--nx-space-3) 0 0; padding: var(--nx-space-2) var(--nx-space-4) var(--nx-space-2) calc(var(--nx-space-4) + 3px); background: linear-gradient(180deg, var(--nx-surface) 0%, var(--nx-surface-alt) 100%); border: var(--nx-border-thin) solid var(--nx-border); border-radius: var(--nx-radius-md); box-shadow: var(--nx-shadow-sm); overflow: hidden; line-height: 1.3; /* 悬停动效（2026-09-21 重做）：上浮用 spring 曲线，抬起来带一点回弹手感 */ transition: box-shadow var(--nx-dur-base) var(--nx-ease-out), border-color var(--nx-dur-base) var(--nx-ease-out), transform var(--nx-dur-base) var(--nx-ease-spring); } /* 五个变体的语义色收进两个局部变量：色条色 accent + 柔光色 soft。 soft 直接复用各语义的 -soft 令牌（深浅两套值由 tokens 负责，不必写两次）。 */ #info_block .nx-stat--ratio { --nx-stat-accent: var(--nx-primary); --nx-stat-soft: var(--nx-primary-soft); } #info_block .nx-stat--up { --nx-stat-accent: var(--nx-success-text); --nx-stat-soft: var(--nx-success-soft); } #info_block .nx-stat--down { --nx-stat-accent: var(--nx-danger-text); --nx-stat-soft: var(--nx-danger-soft); } #info_block .nx-stat--active { --nx-stat-accent: var(--nx-info-text); --nx-stat-soft: var(--nx-info-soft); } #info_block .nx-stat--conn { --nx-stat-accent: var(--nx-text-tertiary); --nx-stat-soft: rgba(125, 139, 156, 0.14); } /* 左侧 3px 语义色条：保留「上传绿 / 下载红」这类语义信息， 但只占一条细边，不会像整块彩色那样花。悬停时加宽 1px 并透出同色微光。 */ #info_block .nx-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; width: 3px; background: var(--nx-stat-accent, var(--nx-border-strong)); transition: width var(--nx-dur-base) var(--nx-ease-out), box-shadow var(--nx-dur-base) var(--nx-ease-out); } /* 悬停柔光 + 一道扫光（2026-09-21 新增） 柔光层从左侧淡出，叠在卡片自身背景之上、数字之下； 扫光带只在「进入」时从左扫到右 —— transition 只写在 :hover 里， 离开时立即复位（反正 opacity 已归 0，看不见，不会倒着扫回来）。 两者都 pointer-events:none，不影响卡内 H&R / 领取之类链接的点选。 */ #info_block .nx-stat::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; background: linear-gradient(100deg, var(--nx-stat-soft, transparent) 0%, transparent 58%), linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.20) 50%, transparent 62%); background-size: 100% 100%, 240% 100%; background-position: 0 0, 150% 0; background-repeat: no-repeat; transition: opacity var(--nx-dur-base) var(--nx-ease-out); } /* 卡内内容提到柔光之上（否则数字会被灰蒙蒙地盖住，深色下尤其明显） */ #info_block .nx-stat > * { position: relative; z-index: 1; } #info_block .nx-stat:hover { border-color: var(--nx-stat-accent, var(--nx-border-strong)); box-shadow: var(--nx-shadow-lg); transform: translateY(-3px); } #info_block .nx-stat:hover::before { width: 4px; box-shadow: 0 0 10px 0 var(--nx-stat-soft, transparent); } #info_block .nx-stat:hover::after { opacity: 1; background-position: 0 0, -90% 0; transition: opacity var(--nx-dur-base) var(--nx-ease-out), background-position var(--nx-dur-slow) var(--nx-ease-out); } #info_block .nx-stat > font[class^="color_"] { font-size: var(--nx-font-xs) !important; font-weight: var(--nx-weight-normal) !important; color: var(--nx-text-tertiary) !important; margin: 0 0 3px !important; letter-spacing: 0.02em; } #info_block .nx-stat-v { font-size: var(--nx-font-xl); /* 18px，与 11px 的标签拉开主次 */ font-weight: var(--nx-weight-semibold); color: var(--nx-text); font-variant-numeric: tabular-nums; /* 等宽数字，多行之间对得齐 */ white-space: nowrap; } #info_block .nx-stat-v img { vertical-align: -2px; } /* ---- 数据卡图标（Font Awesome 5 Free）---- 站点已全局加载 FA 5.15.4，而每个指标都带了语义 class， 所以用 ::before 直接挂图标即可，**不必改标记**。 图标取语义色，与左侧那条 3px 色条呼应。 ⚠️ FA solid 必须 font-weight: 900，否则渲染成方框。 */ #info_block .nx-stat > font[class^="color_"]::before { font-family: "Font Awesome 5 Free"; font-weight: 900; font-style: normal; display: inline-block; /* transform 需要非 inline 盒子 */ width: 1.15em; margin-right: 3px; text-align: center; transition: transform var(--nx-dur-base) var(--nx-ease-spring); } /* 悬停时图标轻轻右移并放大一点点（spring 曲线 → 有回弹） */ #info_block .nx-stat:hover > font[class^="color_"]::before { transform: translateX(2px) scale(1.12); } #info_block .nx-stat--ratio > font[class^="color_"]::before { content: "\f24e"; color: var(--nx-primary); } /* balance-scale */ #info_block .nx-stat--up > font[class^="color_"]::before { content: "\f062"; color: var(--nx-success-text); } /* arrow-up */ #info_block .nx-stat--down > font[class^="color_"]::before { content: "\f063"; color: var(--nx-danger-text); } /* arrow-down */ #info_block .nx-stat--active > font[class^="color_"]::before { content: "\f362"; color: var(--nx-info-text); } /* exchange-alt */ #info_block .nx-stat--conn > font[class^="color_"]::before { content: "\f1e6"; color: var(--nx-text-tertiary); } /* plug */ /* ---- 欢迎区第一行的分组（2026-09-18 重做）---- 老标记形如「欢迎回来, X [退出] [控制面板] [站点设定] 魔力值[使用]: 数字 邀请[发送]: 数字」， 用方括号当分隔符、十几个元素挤成一行同号灰字，既看不出主次也很杂乱。 改为按语义分三组：问候 / 操作按钮（胶囊）/ 数据 chip（药丸）。 ⚠️ 方括号本身是文字节点，CSS 去不掉，所以同时改了 include/functions.php 的标记。 */ #info_block .nx-info-hello { display: inline-block; margin-right: var(--nx-space-4); font-size: var(--nx-font-md); color: var(--nx-text-secondary); } #info_block .nx-info-hello b { color: var(--nx-text); } #info_block .nx-info-actions { display: inline-flex; flex-wrap: wrap; gap: var(--nx-space-2); vertical-align: middle; } #info_block .nx-info-btn { display: inline-flex; align-items: center; padding: 1px var(--nx-space-3); font-size: var(--nx-font-sm); line-height: 1.8; color: var(--nx-text-secondary) !important; background: var(--nx-surface); border: var(--nx-border-thin) solid var(--nx-border); border-radius: 999px; text-decoration: none !important; transition: color var(--nx-dur-fast) var(--nx-ease-out), background-color var(--nx-dur-fast) var(--nx-ease-out), border-color var(--nx-dur-fast) var(--nx-ease-out); } #info_block .nx-info-btn:hover { color: var(--nx-primary-strong) !important; background: var(--nx-primary-soft); border-color: var(--nx-primary-border, var(--nx-border-strong)); } /* 数据 chip：魔力值 / 签到·勋章·任务 / 邀请 */ #info_block .nx-info-chips { display: inline-flex; flex-wrap: wrap; gap: var(--nx-space-2); margin-left: var(--nx-space-4); vertical-align: middle; } #info_block .nx-info-chip { display: inline-flex; align-items: center; gap: var(--nx-space-2); padding: 1px var(--nx-space-3); font-size: var(--nx-font-sm); line-height: 1.8; background: var(--nx-surface-alt); border: var(--nx-border-thin) solid var(--nx-border); border-radius: 999px; } #info_block .nx-info-chip b { color: var(--nx-text); font-variant-numeric: tabular-nums; } #info_block .nx-info-chip a { font-size: var(--nx-font-xs); } /* ---- 操作按钮 / chip 的图标（FA 5.15.4）---- 按钮用 `href` 前缀定位 —— 它们本来就带明确链接，不必再改标记； chip 里**一个 chip 含多个链接**（签到 / 勋章 / 任务），href 定位会打架， 所以改用上一轮加的语义 class。 ⚠️ FA solid 必须 font-weight: 900，否则方框。 */ #info_block .nx-info-btn::before, #info_block .nx-info-chip::before { font-family: "Font Awesome 5 Free"; font-weight: 900; font-style: normal; display: inline-block; text-align: center; opacity: 0.85; } #info_block .nx-info-btn::before { width: 1.1em; margin-right: 4px; } #info_block .nx-info-chip::before { width: 1.1em; margin-right: 1px; } /* 操作按钮 ⚠️ 必须用 `*=`（包含）而不是 `^=`（前缀）：href 是**绝对 URL** （http://host/logout.php），前缀匹配会全部落空 —— 实测只有用了 `*=` 的「收藏」和用属性匹配的「管理系统」出了图标。 */ #info_block .nx-info-btn[href*="logout.php"]::before { content: "\f2f5"; } /* sign-out-alt */ #info_block .nx-info-btn[href*="usercp.php"]::before { content: "\f013"; } /* cog */ #info_block .nx-info-btn[href*="staffpanel.php"]::before { content: "\f0c0"; } /* users */ #info_block .nx-info-btn[href*="settings.php"]::before { content: "\f085"; } /* cogs */ #info_block .nx-info-btn[href*="inclbookmarked=1"]::before { content: "\f02e"; } /* bookmark */ #info_block .nx-info-btn[target="_blank"]::before { content: "\f120"; } /* terminal */ /* 数据 chip */ #info_block .nx-info-chip--bonus::before { content: "\f3a5"; color: var(--nx-primary); } /* gem */ #info_block .nx-info-chip--attend::before { content: "\f274"; color: var(--nx-info-text); } /* calendar-check */ #info_block .nx-info-chip--invite::before { content: "\f0e0"; color: var(--nx-success-text); } /* envelope */ /* 右上角小图标行（消息/待办等）—— 老结构是散落的内联 img，这里给它们排齐 */ #info_block img { vertical-align: -3px; margin: 0 1px; } /* 2026-09-17 · 用户反馈「菜单下边的 div 没圆弧」 #info_block 宽度与 td#nav_block 完全相同、且是直角 —— 它的方角正好盖住了 nav_block 的圆角，于是菜单下方看起来是方的一块。 给同一半径（nav_block 用的是 --nx-radius-xl=18px）即可露出统一的圆角。 */ #info_block { border-radius: var(--nx-radius-xl); } /* 2026-09-17 · 用户反馈「红星号提示条比下边的表单表长，要对齐」 upload/edit 表单里首个

（红星号(*)标记的区域必须填写）默认占满 form(=726px)， 而下面的表单表是 width="97%" 居中(704px) → 左右各多出 11px。 让提示段也取 97% 居中，两者左右边缘就对齐了。 */ #outer form > p:first-child { width: 97%; margin-left: auto; margin-right: auto; } /* -------------------------------------------------------------------------- 5. 版式骨架 · 主内容区 & 页脚 -------------------------------------------------------------------------- */ .outer, td#outer { padding: var(--nx-space-6) var(--nx-space-5); background: var(--nx-canvas); } .infame, td.inframe { border: 0; } /* 页脚 */ #footer { max-width: var(--nx-content-width); margin: var(--nx-space-6) auto 0; padding: var(--nx-space-5) var(--nx-space-6); background: var(--nx-surface); border: var(--nx-border-thin) solid var(--nx-card-border); border-radius: var(--nx-radius-xl); box-shadow: var(--nx-shadow-sm); color: var(--nx-text-tertiary); font-size: var(--nx-font-sm); line-height: var(--nx-leading-loose); text-align: center; } /* 页脚内层那串上古内联 margin（functions.php 的 .nx-footer-meta：上 10 下 30） 在老主题上仍是它负责间距，所以 PHP 里没删，只在这里覆盖掉 —— 分层主题的页脚间距统一由 #footer 自己的 padding 说了算。 */ #footer .nx-footer-meta { margin: 0 !important; } #footer a { color: var(--nx-text-secondary); } #footer a:hover { color: var(--nx-primary-strong); } /* 招募公告块（替换原内联渐变） ⚠️ PHP 里那段内联 `linear-gradient(45deg, #a8edea, #fed6e3)`（青绿→粉）**不要删**： 老主题（2/3/4/6/7/8 单文件主题）没有分层设计系统、也没有 .recruitment 规则， 内联是它们唯一的样式来源。分层主题这边靠 !important 接管即可。 ⚠️ 2026-09-20：背景原为 `--nx-gradient-warm`（暖米→粉）。用户反馈「要和主题一致」 —— 暖色是独立色系，摆在 Cyber（蓝）里非常跳。 改成**主色柔光**：`--nx-primary-soft` 叠在各主题自己的 surface 上， 深色主题自动变暗、三主题各自泛自己的主色 ⇒ 天然跟随主题， 观感也更像「官方公告」而不是促销横幅。 */ .recruitment { /* 两层：主色从左上的柔光向右淡出 + 下沉面打底。 ⚠️ 底色**不能**用 --nx-surface（纯白）—— 实测那样整块只剩 #F2F8FF， 跟白卡相差不到 15/255，「公告」的存在感基本没有。 用 surface-sunken 打底，左右才有一道看得见的边界，深浅主题都成立。 */ background-image: linear-gradient(120deg, var(--nx-primary-soft), transparent 62%) !important; background-color: var(--nx-surface-sunken) !important; /* 外沿一律走 --nx-card-border（= border-strong）：浅色下 --nx-border(#e2e8f0) 摆在 canvas(#f4f7fb) 上只差 6/255，右侧和底边几乎看不见，用户因此以为 「这块没有外边框、所以看着比上边窄」。#cbd5e1 才立得住边界。 */ border: var(--nx-border-thin) solid var(--nx-card-border) !important; /* 左侧主色条：一眼区分「公告」与普通内容块 */ border-left: 4px solid var(--nx-primary) !important; border-radius: var(--nx-radius-xl) !important; padding: var(--nx-space-5) var(--nx-space-6) !important; margin: 0 0 var(--nx-space-5) !important; text-align: center; box-shadow: var(--nx-shadow-sm) !important; color: var(--nx-text) !important; font-weight: var(--nx-weight-medium) !important; /* 给下面的高光伪元素定位 + 裁切（圆角内扫过，不溢出到正文） */ position: relative; overflow: hidden; /* 自己成一个层叠上下文，光带只在本块内排序，不会盖到页面上别的东西 */ isolation: isolate; } /* 2026-09-20 · 让公告块「动起来」：一道主色微光从左扫到右。 只加一层伪元素高光，不动 DOM、不改排版。 ⚠ 光带必须在文字**下面**：::after 默认后绘制，70% 不透明度的主色带扫过会把 两行公告冲淡。所以给伪元素 z-index:0、把内容（functions.php:3626 就是两个 ，没有裸文本节点）抬到 z-index:1 ⇒ 光只刷背景。 高光色用 --nx-primary-border（各主题自己的主色描边档）⇒ 天然跟主题： 浅色下它是不透明的 brand-200，摆在 sunken(#eef2f7) 上有约 18/255 的差； 深色下是 rgba(主色,.35)，摆在 #141d2f 上同样读得出一道光。 ⚠ 没用 color-mix()：既有取舍见 components.css:343。 节奏：10s 一轮，前 75% 扫过（≈7.5s）、后 25% 停在画外（≈2.5s）—— 按用户要求「经过时间再长点、间隔时间再短点」，做成近乎连续的一道微光。 ⚠️ 2026-09-20 三次调参（改节奏就动下面这两个数：duration 与扫过终点百分比）： ① 7s/42% → 扫 2.9s、停 4.1s、≈977px/s —— 用户嫌「扫过去太快」； ② 14s/36% → 扫 5.0s、停 9.0s、≈570px/s —— 扫得慢了，但空档太长； ③ 10s/75% → 扫 7.5s、停 2.5s、≈383px/s —— 经过更长、间隔更短（当前）。 ⚠ 不加 will-change：它会把伪元素提成合成层，而本站已经踩过「合成层子树 切主题时不重算样式」的坑（见下方 :has 分支与 nexus.css 第 11 节的记录）。 */ .recruitment > * { position: relative; z-index: 1; } .recruitment::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(105deg, transparent 22%, var(--nx-primary-border) 47%, var(--nx-primary-border) 53%, transparent 78%); opacity: 0.7; transform: translateX(-105%); animation: nx-sheen 10s var(--nx-ease-in-out) 0.6s infinite; } @keyframes nx-sheen { 0% { transform: translateX(-105%); } 75% { transform: translateX(105%); } 100% { transform: translateX(105%); } } /* 令牌里的 reduce 分支只把 --nx-dur-* 归零，管不到这条 7s 的循环动画，得单独关 */ @media (prefers-reduced-motion: reduce) { .recruitment::after { animation: none; opacity: 0; } } .recruitment span { display: block; font-size: var(--nx-font-base) !important; line-height: var(--nx-leading-loose); } /* 第一行（QQ 群 / 抽奖）用主色文字承担「标题」的角色 —— 底色克制了，重量就得从文字上找回来，否则整块会像一段没人注意的说明。 */ .recruitment span:first-child { font-weight: var(--nx-weight-semibold); color: var(--nx-primary-strong) !important; } /* 第一条（QQ 群 / 抽奖）前挂一个喇叭，给这块一个视觉锚点。 与日志导航的「首页公告」用铃铛区分开，这里用喇叭（广播语义）。 */ .recruitment span:first-child::before { content: ""; display: inline-block; width: 15px; height: 15px; margin-right: var(--nx-space-2); vertical-align: -2px; background-color: var(--nx-primary); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } /* -------------------------------------------------------------------------- 5b. 广告位 / 公告位 -------------------------------------------------------------------------- 老站用裸

+ 表单按钮堆出来的，在窄屏或未加载时 会退化成一条突兀的深蓝空条。这里统一为「浅色卡片」， 无论是文字、图片还是 iframe 都能融进版式。 -------------------------------------------------------------------------- */ .advertisement, .ad, div[id^="ad_"], div[class^="ad_"] { max-width: var(--nx-content-width); margin: var(--nx-space-5) auto; padding: var(--nx-space-4) var(--nx-space-5); background: var(--nx-surface); border: var(--nx-border-thin) dashed var(--nx-border-strong); border-radius: var(--nx-radius-xl); text-align: center; color: var(--nx-text-secondary); font-size: var(--nx-font-sm); line-height: var(--nx-leading-normal); box-shadow: var(--nx-shadow-xs); } .advertisement img, .ad img { max-width: 100%; height: auto; border-radius: var(--nx-radius-md); } /* 老站用 form + input[type=submit] 当按钮的「公告条」，单独收敛 */ #outer > form:only-child, #outer > div > form:only-child { margin: var(--nx-space-5) auto; padding: var(--nx-space-4) var(--nx-space-5); background: var(--nx-surface); border: var(--nx-border-thin) dashed var(--nx-border-strong); border-radius: var(--nx-radius-xl); text-align: center; box-shadow: var(--nx-shadow-xs); } #outer > form:only-child input[type="submit"], #outer > div > form:only-child input[type="submit"] { margin-top: var(--nx-space-2); } /* 兜底：任何「深蓝底 + 白字但内容为空」的老式公告 div 都会被上面规则接管； 再补一层，把老页面常见的纯色块降级为柔和底色，避免死黑死蓝 */ #outer > div[align="center"]:empty, #outer > center:empty { display: none; } /* -------------------------------------------------------------------------- 6. 响应式断点 -------------------------------------------------------------------------- */ /* 窄屏菜单必然换行。此时 space-between 会把最后一行的少数项推到两端 （左一个、右一个，中间空一大片，比原来的左对齐更难看）。 1400 以下改为居中；宽屏（>1400）仍保持两端对齐铺满整行。 */ @media (max-width: 1400px) { nav#nav ul.menu { justify-content: center; } } @media (max-width: 1280px) { :root { --nx-content-width: 100%; } table.head, table.mainouter { border-radius: 0; } } @media (max-width: 768px) { body { font-size: var(--nx-font-md); } table.head > tbody > tr > td { padding: var(--nx-space-4); } .logo { font-size: var(--nx-font-2xl); } nav#nav ul.menu { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; } nav#nav ul.menu::-webkit-scrollbar { height: 0; } nav#nav ul.menu > li > a { padding: var(--nx-space-3); font-size: var(--nx-font-base); } /* 移动端横向溢出治理（计算样式探针实测：index 952 > 744、upload/edit 1321 > 744） 原因：上面把 ul.menu 设为 flex-wrap:nowrap 后，其 min-content 宽度 = 所有菜单项之和(~950px)， 所在单元格 / table.main / table.mainouter 都被撑到这个宽度且【无法收窄】 → 页面整体横向溢出；ul.menu 的 overflow-x:auto 因容器没被约束而形同虚设。 解法：让这两层表格用 table-layout:fixed 真正遵守 width:100%， 容器一收窄，ul.menu 的 overflow-x:auto 才会生效（导航变成可横滑）。 仅在 ≤768px 断点内，桌面零影响。 */ /* ⚠ 2026-09-17 修正：原先写 `table.main`，但【种子列表等数据表也是 table.main】 → 它们被一起固定布局，列宽被均分、标题列被压窄、行高暴涨（用户反馈）。 收窄为「含导航单元格 #nav_block 的那张 table.main」—— 只有真正包住导航的那张才需要 fixed 来让 ul.menu 的 overflow-x:auto 生效。 */ table.mainouter, table.main:has(td#nav_block) { table-layout: fixed; } #info_block td { display: block; width: 100%; text-align: left !important; } .outer, td#outer { padding: var(--nx-space-4) var(--nx-space-3); } #footer { border-radius: 0; padding: var(--nx-space-5); } }