/* ========================================================================== 懒人之家 LAZYhome · 全站基础样式（Atomic Design） 依赖：tokens.css（必须先引入）；页面级 section 与 UTILITIES 工具类层 在 pages.css（之后引入）—— .mb-N/.text-* 等纯工具类在那边末尾。 分层：Reset → Atoms → Molecules → Organisms → Layout → 语义工具类 （.page/.form-row/.box/.stack--2 …）→ 全站组件 （tabbar / toast / 页脚 / 主题切换器 / SVG 图标 / 骨架屏 / A2HS …） 规则：组件内部只用语义 token 与 --accent，禁止写死色值 2026-08-30 拆分：原单文件 3784 行 → components.css（全站基础）+ pages.css （页面级 + 末尾 utilities 层）。引入顺序即层叠顺序，见 base.html 与 tests/test_theme_tokens.py。 ========================================================================== */ /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--navbar-h) + var(--sp-3)); scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: var(--text-md); line-height: var(--leading-normal); color: var(--fg-primary); background: var(--bg-canvas); transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } /* 版块氛围底：整页顶部注入一层极淡的品牌色雾，制造沉浸感（MC 草绿 / COC 墨青）。 用 fixed 伪元素铺在最底层，不参与布局、不拦点击；随 scope 切换自动变色。 */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 80% at 50% -20%, var(--ambient-tint) 0%, transparent 55%); } a { color: var(--fg-link); text-decoration: none; } a:hover { text-decoration: underline; } button { font: inherit; cursor: pointer; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4 { margin: 0; line-height: var(--leading-tight); font-weight: var(--weight-semibold); } /* 全局可见焦点环：键盘可达性底线，不要移除 */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); } /* ========================================================================== ATOMS ========================================================================== */ /* --- Button --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: 34px; padding: 0 var(--sp-4); border: 1px solid transparent; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--weight-medium); background: transparent; color: var(--fg-primary); /* 按钮文案永不折行：中文 2 字按钮（登录/注册）在 flex 容器里被压窄时， 默认会断成上下两行并冲出固定 height，视觉上就是文字和边框重叠。 flex: none 再保证它不被父级 flex 压到内容宽度以下。 */ white-space: nowrap; flex: none; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .btn:active { transform: translateY(1px); } /* 主按钮用品牌渐变而不是纯色：同一个类在 MC 下是草绿渐变、在 COC 下是墨青渐变， 比纯色更有"质感"，也顺手把两个板块的气质带进最高频的交互元素里。 */ .btn--primary { background: var(--accent-gradient); color: var(--fg-on-accent, #fff); border-color: transparent; } /* 深色系主题的主按钮用深色文字压在亮渐变上（白字压亮青/亮蓝会糊）。 用 --fg-on-accent token 而不是硬编码 —— 各主题已各自声明了正确的前景色。 2026-08-16 主题重组后深色系 = forest / abyss / ember（旧名 dark 是 forest 别名）。 */ [data-theme="forest"] .btn--primary, [data-theme="abyss"] .btn--primary, [data-theme="ember"] .btn--primary { color: var(--fg-on-accent); } .btn--primary:hover { filter: brightness(1.08); } .btn--secondary { background: var(--bg-surface); border-color: var(--border-subtle); } .btn--secondary:hover { background: var(--bg-hover); border-color: var(--border-strong); } .btn--ghost:hover { background: var(--bg-hover); } .btn--danger { background: var(--state-error); color: #fff; } .btn--sm { height: 28px; padding: 0 var(--sp-3); font-size: var(--text-xs); } .btn--icon { width: 34px; padding: 0; } .btn:disabled { opacity: .45; cursor: not-allowed; } /* 提交中：文字保留（别让按钮宽度跳变），左侧插一个转圈。 由 app.js 在 form submit 时加上，PRG 跳转后页面刷新自动消失。 opacity 比 :disabled 的 .45 高一点 —— "正在做事"和"不可用"是两种状态。 */ .btn.is-loading { opacity: .7; cursor: progress; } .btn.is-loading::before { content: ""; flex: none; width: 12px; height: 12px; border: 2px solid currentColor; border-top-color: transparent; border-radius: var(--radius-full); animation: btn-spin .6s linear infinite; } @keyframes btn-spin { to { transform: rotate(360deg); } } /* --- Input / Textarea / Select --- */ .field { width: 100%; height: 36px; padding: 0 var(--sp-3); background: var(--bg-surface); color: var(--fg-primary); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font-size: var(--text-md); font-family: inherit; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .field::placeholder { color: var(--fg-tertiary); } .field.field--sm, select.field.field--sm { height: 28px; font-size: var(--text-xs); padding: 0 var(--sp-2); } .field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); } textarea.field { height: auto; min-height: 120px; padding: var(--sp-3); resize: vertical; line-height: var(--leading-normal); } .field-label { display: block; margin-bottom: var(--sp-2); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-secondary); } .field-hint { margin-top: var(--sp-1); font-size: var(--text-xs); color: var(--fg-tertiary); } .field-error { margin-top: var(--sp-1); font-size: var(--text-xs); color: var(--state-error); } /* --- 登录 / 注册页 --- */ /* 卡片垂直居中。用 navbar-h token 而不是写死 120px —— 导航栏高度改了这里跟着走， 否则算多了卡片会被推下去、算少了会顶到导航栏底下 */ .auth-page { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - var(--navbar-h) - var(--sp-12)); padding: var(--sp-6) var(--sp-4); } /* 精简布局（body.is-bare，即 scope=='auth'）下导航栏恢复显示， 但 .auth-page 居中仍然占满整屏减去 navbar 高度（因为页脚不渲染了）。 */ body.is-bare .auth-page { min-height: calc(100vh - var(--navbar-h)); } .auth-card { width: 100%; max-width: 400px; overflow: hidden; } /* 品牌头：主题色渐变背景 + logo + 欢迎语，让登录页有社区感 */ .auth-card__brand { padding: var(--sp-6) var(--sp-5) var(--sp-5); text-align: center; background: linear-gradient(135deg, var(--accent), var(--accent-weak)); color: #fff; } .auth-card__logo { width: 48px; height: 48px; margin: 0 auto var(--sp-3); display: flex; align-items: center; justify-content: center; font-size: 26px; border-radius: var(--radius-full); background: rgba(255,255,255,.18); /* 现在 logo 是 元素（点它回门户首页），需要显式清掉浏览器默认的链接色和下划线 */ color: inherit; text-decoration: none; transition: background .15s ease, transform .15s ease; } .auth-card__logo:hover { background: rgba(255,255,255,.28); transform: scale(1.04); } .auth-card__logo:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .auth-card__title { font-size: var(--text-xl); font-weight: var(--weight-bold); } .auth-card__sub { margin-top: var(--sp-1); font-size: var(--text-sm); opacity: .9; } /* 页内提示条（登录失败 / 重置成功） */ .auth-alert { margin-bottom: var(--sp-4); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); font-size: var(--text-sm); } .auth-alert--error { background: var(--state-error-weak, rgba(220,50,50,.1)); color: var(--state-error); border: 1px solid currentColor; } .auth-alert--info { background: var(--bg-subtle); color: var(--fg-secondary); } /* 密码框 + 眼睛按钮：绝对定位按钮压在字段右侧，字段留出右内边距不压字 */ .field-with-toggle { position: relative; } .field-with-toggle .field { padding-right: 40px; } /* 隐藏 Edge/IE 自带的密码显示按钮(::-ms-reveal)与清除按钮(::-ms-clear)： 它们只在聚焦时出现、失焦即消失，和我们自己的 .field-toggle 并存会变成"两个眼睛"， 且原生那个点别处就没了。统一只用自定义按钮，行为可控。 */ .field-with-toggle .field::-ms-reveal, .field-with-toggle .field::-ms-clear { display: none; } .field-toggle { position: absolute; top: 0; right: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; font-size: var(--text-md); color: var(--fg-tertiary); } .field-toggle:hover { color: var(--fg-secondary); } /* 两个眼睛 inline SVG 叠在按钮里，用 aria-pressed 切显隐： aria-pressed=false（密码隐藏中） -> 显示 pwd-eye--off（眼睛被划掉） aria-pressed=true （密码显示中） -> 显示 pwd-eye--open（睁眼） JS 只翻状态位（app.js），完全不动 DOM —— 图标要换成 MC 皮肤时只改模板。 */ .field-toggle .pwd-eye { width: 20px; height: 20px; display: none; } .field-toggle .pwd-eye--off { display: block; } .field-toggle[aria-pressed="true"] .pwd-eye--off { display: none; } .field-toggle[aria-pressed="true"] .pwd-eye--open { display: block; } /* 心跳 Token 显隐（服务器详情页）。和上面的密码显隐是同一套思路： 状态在类名上，JS（app.js 的 [data-token-toggle] 委托）只负责翻 .is-open。 ⚠️ 默认 display:none 是**安全默认值** —— Token 是密钥，JS 万一没加载， 最坏结果是服主看不到它（重置一次即可），而不是把密钥直接亮在页面上。 */ .token-reveal__value { display: none; margin-bottom: var(--sp-2); } .token-reveal.is-open .token-reveal__value { display: block; } /* 邀请码折叠 —— 给
/ 加视觉提示让用户知道这里能点 */ details.stack > summary { list-style: none; /* 去掉默认三角（被 .stack 的 flex 干掉后部分浏览器还保留着） */ color: var(--fg-secondary); font-size: var(--text-sm); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; } details.stack > summary::before { content: "+ "; font-weight: bold; } details.stack[open] > summary::before { content: "- "; } details.stack > summary::-webkit-details-marker { display: none; } .auth-links { margin-top: var(--sp-4); text-align: center; font-size: var(--text-sm); color: var(--fg-tertiary); } .auth-links span { margin: 0 var(--sp-2); opacity: .5; } /* --- 第三方登录（OAuth）按钮 --- 分割线用 flex + 两侧伪元素拉线，比
加绝对定位文字更好维护。 按钮走 currentColor 填充 SVG，深浅色主题各自继承文字色，不用两套图标。 */ .oauth-divider { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-4) 0 var(--sp-3); font-size: var(--text-xs); color: var(--fg-tertiary); } .oauth-divider::before, .oauth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .oauth-row { display: flex; flex-direction: column; gap: var(--sp-2); } .oauth-btn { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--fg-primary); font-size: var(--text-sm); font-weight: var(--weight-medium, 500); text-decoration: none; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .oauth-btn:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--bg-subtle, rgba(0, 0, 0, .03)); transform: translateY(-1px); } .oauth-btn:active { transform: none; } .oauth-btn__icon { flex: none; } /* --- Avatar --- */ .avatar { display: inline-block; width: 32px; height: 32px; flex: none; border-radius: var(--radius-full); object-fit: cover; background: var(--bg-subtle); /* 品牌色光环：用 box-shadow 而非 border —— border 会撑大尺寸影响布局， shadow 纯视觉，不占文档流。透明度 40% 刚好有存在感但不喧宾夺主。 */ box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent); } .avatar--sm { width: 24px; height: 24px; } .avatar--lg { width: 48px; height: 48px; } .avatar--xl { width: 76px; height: 76px; } /* --- Tag / Badge --- */ .tag { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 var(--sp-2); border-radius: var(--radius-xs); font-size: var(--text-2xs); font-weight: var(--weight-medium); background: var(--bg-subtle); color: var(--fg-secondary); white-space: nowrap; } .tag--accent { background: var(--accent-weak); color: var(--accent); } .tag--warn { background: rgba(217,139,22,.14); color: var(--state-warn); } .tag--error { background: rgba(214,69,69,.14); color: var(--state-error); } .tag--outline { background: transparent; border: 1px solid var(--border-subtle); } /* --- Title 高亮称号 --- */ .title-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--sp-2); border-radius: var(--radius-xs); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: .02em; white-space: nowrap; } .title-badge--member { color: var(--title-member-fg); background: var(--title-member-bg); } .title-badge--veteran { color: var(--title-veteran-fg); background: var(--title-veteran-bg); } .title-badge--mod { color: var(--title-mod-fg); background: var(--title-mod-bg); } .title-badge--admin { color: var(--title-admin-fg); background: var(--title-admin-bg); } .title-badge--sponsor { background: var(--title-sponsor-gradient); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; border: 1px solid rgba(217,139,22,.4); text-shadow: var(--title-sponsor-glow); animation: title-shimmer 4s linear infinite; } @keyframes title-shimmer { to { background-position: 200% center; } } @media (prefers-reduced-motion: reduce) { .title-badge--sponsor { animation: none; } /* 断点跨越时的布局过渡也一并关掉 */ .layout-forum, .layout-shelf, .server-filter__row, .server-grid, .link-grid { transition: none !important; } } /* --- Divider --- */ .divider { height: 1px; background: var(--border-subtle); border: 0; margin: var(--sp-4) 0; } /* ========================================================================== MOLECULES ========================================================================== */ /* --- Card --- */ /* 视觉分层三件套：surface 底 + 1px 边框 + 柔性阴影。 hover 时不只是加深阴影，还把边框染上一点品牌色 —— 让"这张卡是可交互的" 在两个板块里呈现出各自的颜色语言（MC 草绿 / COC 墨青）。 */ .card { position: relative; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .card:hover { box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 32%, var(--border-subtle)); } /* 整卡可点（列表里的 、门户瓷砖）时再加一点"抬起"手感： hover 微微上浮 + 更重的阴影。只对可点卡片生效，避免静态卡片无谓晃动。 */ a.card:hover, .portal-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } a.card:active, .portal-tile:active { transform: translateY(0); } /* 品牌装饰条：卡片顶部 2px 渐变，默认收起（scaleX 0），hover 时从左展开。 只在显式标了 .card--accent 的卡片上出现，避免全站每张卡都花。 */ .card--accent::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--card-accent-bar); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-slow) var(--ease-out); } .card--accent:hover::before { transform: scaleX(1); } .card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-subtle); } .card__title { font-size: var(--text-md); font-weight: var(--weight-semibold); } .card__body { padding: var(--sp-5); } .card__footer { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; border-top: 1px solid var(--border-subtle); padding: var(--sp-3) var(--sp-5) var(--sp-4); } /* 嵌在 body 里的 footer：body 已有 sp-5 padding，横向归零免得二次缩进 */ .card__body .card__footer { padding: var(--sp-3) 0 0; } /* --- SearchBar --- */ /* min-width:0 是关键：不给的话搜索框在导航栏里不肯缩，会把右侧账号区顶出去重叠 */ .searchbar { position: relative; flex: 1 1 auto; min-width: 0; max-width: 420px; } .searchbar .field { padding-left: 34px; } .searchbar__icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--fg-tertiary); pointer-events: none; font-size: var(--text-md); } /* --- ServerSwitcher 多服务器选择 --- */ .server-chip { display: inline-flex; align-items: center; gap: var(--sp-2); height: 30px; padding: 0 var(--sp-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); background: var(--bg-surface); font-size: var(--text-xs); color: var(--fg-secondary); transition: all var(--dur-fast) var(--ease-out); } .server-chip:hover { border-color: var(--border-strong); background: var(--bg-hover); } .server-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-weak); color: var(--accent); font-weight: var(--weight-medium); } .server-chip__dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--fg-tertiary); flex: none; } .server-chip__dot--online { background: var(--state-success); box-shadow: 0 0 0 3px var(--brand-mc-weak); } .server-chip__dot--offline { background: var(--state-error); } .server-chip__ping { color: var(--fg-tertiary); font-family: var(--font-mono); font-size: var(--text-2xs); } /* --- EmojiPicker --- 2026-08-16 起原生开合（app.js 的 [data-emoji-toggle] 段）：默认 [hidden]， 只有 CSS 的 .emoji-picker[hidden]{display:none} 一条管默认藏。 之前由 Alpine x-show 控制，CDN 半死时面板会永久展开盖住编辑器（实报）。 */ .emoji-picker { position: absolute; bottom: calc(100% + var(--sp-2)); left: 0; z-index: var(--z-dropdown); width: 280px; padding: var(--sp-3); background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } .emoji-picker__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 180px; overflow-y: auto; } .emoji-picker__item { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: var(--radius-xs); background: transparent; font-size: 18px; } .emoji-picker__item:hover { background: var(--bg-hover); } .emoji-picker[hidden] { display: none; } /* --- 通用弹出菜单（原生开合，不依赖 Alpine）--- 契约见 app.js 的 [data-popmenu] 段。显隐的唯一真值是 .is-open 类。 */ .popmenu { position: absolute; z-index: var(--z-dropdown); padding: var(--sp-2); background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); display: none; } .popmenu.is-open { display: block; } /* 顶栏账号菜单：右对齐挂在触发按钮正下方 */ .popmenu--account { width: 180px; right: 0; left: auto; top: calc(100% + 8px); } /* --- UserMeta 作者行 --- */ .user-meta { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; } .user-meta__name { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-primary); } .user-meta__time { font-size: var(--text-xs); color: var(--fg-tertiary); } /* --- FileCard 剧本上传/下载 --- */ .file-card { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); } .file-card__icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--radius-sm); background: var(--accent-weak); color: var(--accent); font-size: var(--text-lg); } .file-card__main { flex: 1; min-width: 0; } .file-card__name { font-size: var(--text-sm); font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-card__desc { font-size: var(--text-xs); color: var(--fg-tertiary); } /* --- Upload Dropzone --- */ .dropzone { display: grid; place-items: center; gap: var(--sp-2); padding: var(--sp-8); text-align: center; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--bg-subtle); color: var(--fg-secondary); transition: all var(--dur-base) var(--ease-out); } .dropzone:hover, .dropzone.is-dragover { border-color: var(--accent); background: var(--accent-weak); color: var(--accent); } /* --- Pagination --- */ .pagination { display: flex; gap: var(--sp-1); justify-content: center; padding: var(--sp-6) 0; } .pagination__item { min-width: 32px; height: 32px; padding: 0 var(--sp-2); display: grid; place-items: center; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-surface); font-size: var(--text-sm); color: var(--fg-secondary); } .pagination__item:hover { background: var(--bg-hover); } .pagination__item[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--fg-on-accent, #fff); } /* 省略号占位（_pagination.html 窗口分页）：去边框去底，别让它长得像可点的页码 */ .pagination__gap { border: none; background: none; cursor: default; color: var(--fg-tertiary); } /* ========================================================================== ORGANISMS ========================================================================== */ /* --- Navbar --- */ .navbar { position: sticky; top: 0; z-index: var(--z-sticky); height: var(--navbar-h); display: flex; align-items: center; gap: var(--sp-5); padding: 0 var(--sp-6); background: color-mix(in srgb, var(--bg-surface) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); } /* 导航栏底部品牌渐变细线：1px 的"当前在哪个板块"提示。 比给整条导航栏染色克制得多，但视觉上足够把 MC 和 COC 区分开。 */ .navbar::after { content: ""; position: absolute; inset: auto 0 -1px 0; height: 2px; background: var(--accent-gradient); opacity: .85; } /* flex 子项默认 min-width:auto，宁可溢出也不肯缩 —— 中等宽度下 6 个导航链接 + 搜索框 + 头衔徽章会互相挤到重叠。下面逐项交代能不能缩。 */ .navbar__logo { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--fg-primary); white-space: nowrap; } .navbar__nav { display: flex; gap: var(--sp-1); /* 放不下时本行横向滚动，而不是把字压到隔壁元素上 */ min-width: 0; overflow-x: auto; scrollbar-width: none; } .navbar__nav::-webkit-scrollbar { display: none; } .navbar__link { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--fg-secondary); text-decoration: none; white-space: nowrap; } .navbar__link:hover { background: var(--bg-hover); color: var(--fg-primary); text-decoration: none; } .navbar__link[aria-current="page"] { background: var(--accent-weak); color: var(--accent); font-weight: var(--weight-medium); } .navbar__spacer { flex: 1; min-width: var(--sp-2); } /* 账号区（头像 + 头衔）不参与压缩，头衔过长时自己截断 */ .navbar > div:last-of-type { flex-shrink: 0; } .navbar .title-badge { max-width: 10em; overflow: hidden; text-overflow: ellipsis; } /* 说明：每日事件导览已从"论坛首页横向滚动 rail"改为"门户主页竖向列表" （.portal-events / .portal-event，见 V10 段）。原来的 .event-rail 是横向 scroll-snap 卡带，在窄屏上只能横滑、不能压缩堆叠，交互不符合直觉，已废弃删除。 */ /* --- ThreadList 论坛帖子列表 --- */ .thread-list { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; } .thread-item { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-subtle); transition: background var(--dur-fast) var(--ease-out); } .thread-item:last-child { border-bottom: 0; } .thread-item:hover { background: var(--bg-hover); } .thread-item--pinned { background: var(--accent-weak); } .thread-item__main { flex: 1; min-width: 0; } .thread-item__title { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--fg-primary); } .thread-item__meta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); font-size: var(--text-xs); color: var(--fg-tertiary); } .thread-item__stat { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; min-width: 48px; } .thread-item__stat b { font-size: var(--text-md); font-weight: var(--weight-semibold); font-family: var(--font-mono); } .thread-item__stat span { font-size: var(--text-2xs); color: var(--fg-tertiary); } /* 版主操作栏：帖子列表 / 详情里的管理按钮组 */ .mod-bar { margin-top: var(--sp-2); display: flex; gap: var(--sp-2); flex-wrap: wrap; } /* --- PostEditor --- */ .post-editor { position: relative; } .post-editor__toolbar { display: flex; align-items: center; gap: var(--sp-1); padding: var(--sp-2); border: 1px solid var(--border-subtle); border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--bg-subtle); } .post-editor__toolbar .btn--icon { width: 28px; height: 28px; } .post-editor textarea.field { border-radius: 0 0 var(--radius-sm) var(--radius-sm); } .post-editor__footer { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-3); } /* --- RecruitList 招人信息（时间排序） --- */ .recruit-item { display: grid; grid-template-columns: 76px 1fr auto; gap: var(--sp-4); align-items: center; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-subtle); } .recruit-item:hover { background: var(--bg-hover); } .recruit-item__when { text-align: center; font-family: var(--font-mono); } .recruit-item__when b { display: block; font-size: var(--text-lg); color: var(--accent); } .recruit-item__when span { font-size: var(--text-2xs); color: var(--fg-tertiary); } .recruit-item__slots { font-size: var(--text-xs); color: var(--fg-secondary); } .recruit-item__slots.is-full { color: var(--state-error); } /* --- Table（管理后台） --- */ .table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .table th, .table td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--border-subtle); } .table th { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--fg-tertiary); text-transform: uppercase; letter-spacing: .04em; background: var(--bg-subtle); } .table tbody tr:hover { background: var(--bg-hover); } /* --- Empty State --- */ .empty { display: grid; place-items: center; gap: var(--sp-2); padding: var(--sp-12) var(--sp-6); text-align: center; color: var(--fg-tertiary); } .empty__icon { font-size: 32px; opacity: .6; } /* ========================================================================== LAYOUT ========================================================================== */ /* 布局容器统一用 clamp() 做流体内距/间距：视口在断点之间连续变化时， padding/gap 也平滑跟随，而不是卡在固定值上等断点“咔”地跳一下。 --layout-motion 则给列数/间距切换补一段过渡，让断点跨越不那么生硬。 */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 clamp(var(--sp-4), 3.2vw, var(--sp-6)); } .layout-forum { display: grid; grid-template-columns: 1fr var(--sidebar-w); gap: clamp(var(--sp-4), 2.4vw, var(--sp-6)); align-items: start; padding: clamp(var(--sp-4), 2.4vw, var(--sp-6)) 0 var(--sp-12); transition: grid-template-columns var(--dur-slow) var(--ease-in-out), gap var(--dur-slow) var(--ease-in-out); } /* grid/flex 子项默认 min-width:auto —— 内容比轨道宽时会顶开轨道， 导致里面 overflow-x:auto 的元素（事件卡横滑条、代码块、宽表格） 根本滚不起来，整页反而横向溢出。这里显式归零。 */ .layout-forum > * { min-width: 0; } /* 侧栏为空时收成单列。COC 分支不传 servers、游客又拿不到快捷入口， 于是