/* 素笺 · components.css — 白卡 / 四按钮 / 类型角标 / 按钮 / 分页 / 筛选 / 详情 铁律：颜色走 --token（生成器发射的 --accent/--muted/--line/--t-* 等），零 --hx- 写死（守禁六/D6）。 */ /* 列表网格：固定列数（v19.19 恢复用户铁律：右栏显示 5 列 / 不显示 6 列） 之前某轮误改成 auto-fill 自适应按宽度决定列数，会随屏宽漂到 3-4 列，破坏"固定 5/6 列"要求 → 改固定列数 注：右栏状态挂在 .sj-three-col 的 data-right 上（hidden=不显示 / 默认&expanded=显示），旧版 #sjThreeCol[id] 选择器是笔误永不生效，已废 */ .card-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--spacing-lg); } /* 默认：右栏显示 → 5 列 */ .sj-three-col[data-right="hidden"] .card-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } /* 右栏隐藏 → 6 列（主区更宽多一列） */ /* 窄屏兜底（移动端 5/6 列会挤成细条，按宽度逐步降列保持可读，守禁六 gap 用 --spacing-lg） */ @media (max-width: 1100px) { .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 820px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 560px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 400px) { .card-grid { grid-template-columns: 1fr; } } /* ===== 素笺白卡（v19.13 对齐原型「封面三件套」：左上类型角标 + 居中水印字形 + 静止阴影） ===== */ .card { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--card-pad, 12px); /* 卡片内边距（令牌，守禁六） */ box-shadow: var(--shadow); /* 静止极淡阴影（原型 v4，非仅 hover） */ overflow: hidden; display: flex; flex-direction: column; position: relative; transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease; } .card:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); border-color: var(--line-hover); } /* 封面：统一 3:2，顶部圆角，素笺纸感底；始终渲染（有图出图、无图出水印） */ .card-cover { position: relative; aspect-ratio: 3 / 2; background: var(--bg-soft); overflow: hidden; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; } .card-cover-link { position: absolute; inset: 0; display: block; } .card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } /* 无图水印字形（素笺墨痕 · 令牌化，守禁六：用 --ink + 透明度，不写死 rgba） */ .cf-glyph { font-family: var(--font-heading, "Noto Serif SC", serif); font-size: 56px; line-height: 1; color: var(--ink); opacity: .14; user-select: none; } /* 封面左上角标：白底深字 pill（v19.17 + v19.18） 历经 5 版迭代： - v19.13：类型色实底 + 白字 ribbon —— 在浅色封面上字色与背景融 - v19.15：缩尺寸 + 加粗 + 文字阴影 —— 解决尺寸感，但弱类型色底+白字仍融 - v19.16：加 1px 白边 + 浮起阴影 + 文字加深 —— 削弱渐强，但浅绿/浅赭类型色和白字仍偏弱 - v19.17：彻底改黑白反差 + 左 3px 类型色边线（白底92%透 + 深墨字 + pill） - v19.18（精简）：删左 3px 类型色条 —— 用户"简单一点，左侧不要再来一个色框了"， 类型色线索由 `.card[data-type]` 容器承担（卡片本身在网格中已区分），pill 不再夹带。 守禁六：底色 / 字色 / 阴影全走 var()，零写死 rgba/hex。 */ .card-cover .cf-tag { position: absolute; left: 10px; top: 10px; z-index: 3; font-size: 12px; color: var(--tag-fg); background: var(--tag-bg); padding: 3px 10px; border-radius: var(--radius-pill, 999px); font-weight: 600; letter-spacing: 0; line-height: 1.5; white-space: nowrap; } .card-body { margin-top: var(--spacing-sm); padding: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); flex: 1 1 auto; } .card-title { font-family: var(--font-heading, "Noto Serif SC", serif); font-size: var(--fs-lg); margin: 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-title a { color: var(--ink); } .card-title a:hover { color: var(--accent); text-decoration: none; } .card-excerpt { color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* 类型角标（消费 C1 发射的 --t-*，禁六零写死） */ .cf-tag { display: inline-block; font-size: var(--fs-xs); padding: 2px 10px; border-radius: var(--radius-full); font-weight: 500; line-height: 1.6; } .cf-tag[data-type="article"] { color: var(--t-article); background: var(--t-article-bg); } .cf-tag[data-type="encyclopedia"] { color: var(--t-encyclopedia); background: var(--t-encyclopedia-bg); } .cf-tag[data-type="album"] { color: var(--t-album); background: var(--t-album-bg); } .cf-tag[data-type="library"] { color: var(--t-library); background: var(--t-library-bg); } .cf-tag[data-type="video"] { color: var(--t-video); background: var(--t-video-bg); } .cf-tag[data-type="costume"] { color: var(--t-costume); background: var(--t-costume-bg); } /* 卡片页脚 v19.14（结构由 core/helpers.php::card_acts_html() 产出：头像左 / 裸图标右 / 文内引用关联信息行） 视觉铁律（v19.14）： - .card-act 无 border、无 bg、无胶囊圆角 → 裸图标 + 计数（仅 hover/active 变 accent 色） - .card-foot-av 左侧 24×24 圆头像，无边框（仅底色），缺作者时回退管理员"虫哥" - .card-refs 仅在 cite_count 或 rel_count > 0 时渲染（守禁五·零冗余兜底） */ .card-foot { display: flex; align-items: center; gap: var(--spacing-sm); margin-top: auto; padding-top: var(--spacing-sm); border-top: 1px solid var(--line); min-width: 0; } .card-foot-av { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; background: var(--bg-soft); display: inline-flex; align-items: center; justify-content: center; } .card-foot-av img { width: 100%; height: 100%; object-fit: cover; display: block; } .card-foot-acts { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; } .card-act { display: inline-flex; align-items: center; gap: 3px; background: transparent; border: 0; cursor: pointer; color: var(--muted); font-size: var(--fs-xs); padding: 4px 2px; border-radius: 0; font-family: inherit; line-height: 1; transition: color var(--transition-fast); } .card-act:hover { color: var(--accent); } .card-act.active { color: var(--accent); font-weight: 600; } /* 守用户强指令：active 仅变色，不再画边框胶囊 */ .card-act .ic { width: 12px; height: 12px; display: block; opacity: .85; } .card-act .cnt { font-size: var(--fs-xs); font-weight: 500; min-width: 14px; text-align: center; } /* 文内引用 / 关联信息行（v19.14 新增，可选：counts 为 0 时不渲染） */ .card-refs { display: inline-flex; align-items: center; gap: 4px 8px; margin-left: 10px; font-size: var(--fs-xs); color: var(--ink-3); flex-wrap: wrap; min-width: 0; } .card-refs .cr-sep { font-style: normal; opacity: .55; user-select: none; } .card-refs .cr-cite, .card-refs .cr-rel { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; } .card-refs .cr-cite:hover, .card-refs .cr-rel:hover { color: var(--accent); } /* 小屏：脚紧凑（头像缩到 22，refs 允许换行） */ @media (max-width: 480px) { .card-foot { gap: 6px; } .card-foot-av { width: 22px; height: 22px; } .card-foot-acts { gap: 6px; } } /* ===== 按钮 ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 18px; border-radius: var(--button-radius); border: 1px solid transparent; cursor: pointer; font-size: var(--fs-sm); font-family: inherit; transition: background .15s, color .15s, border-color .15s; } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--accent-dark); text-decoration: none; } .btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; } .btn-danger { background: var(--danger); color: var(--on-accent); } .btn-danger:hover { background: var(--danger-dark); text-decoration: none; } .btn-sm { padding: 5px 12px; font-size: var(--fs-xs); border-radius: var(--button-radius); } /* ===== 统一表单基类（FY01-08 §11.1：输入框走 token + focus 金色描边，零写死） ===== */ .sj-field, input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], textarea, select { display: block; width: 100%; box-sizing: border-box; padding: 9px 12px; font-size: var(--fs-sm); font-family: inherit; line-height: 1.5; color: var(--ink); background: var(--bg-main); border: 1px solid var(--line); border-radius: var(--radius-sm); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .sj-field:focus, input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="url"]:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); } /* ===== 分页 ===== */ .pagination { display: flex; gap: 6px; justify-content: center; margin: var(--spacing-xl) 0; flex-wrap: wrap; } .pagination a, .pagination span { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); font-size: var(--fs-sm); padding: 0 8px; } .pagination a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; } .pagination .current { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } /* ===== 筛选栏（与全站 .filter-topbar 视觉一致） ===== */ /* 独立使用场景（如 _special.php filter 视图）：保留底色+底边；融入 .sj-list-pagehead 时由容器承担框 */ .sj-filter-topbar { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: var(--spacing-sm) 0; } .sj-list-pagehead > .sj-filter-topbar { background: transparent; border: 0; padding: 0; } /* 融入统一卡片（守禁三/四 去冗余） */ .sj-filter-topbar .ft-panel { max-width: var(--container-max); margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; gap: var(--spacing-md); } .sj-list-pagehead .sj-filter-topbar .ft-panel { max-width: 100%; margin: 0; } .ft-group { display: flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; } .ft-label { font-size: var(--fs-xs); color: var(--ink-2); font-family: var(--font-heading, "Noto Serif SC", serif); font-weight: 600; letter-spacing: 1px; flex: 0 0 auto; padding-right: 4px; position: relative; display: inline-flex; align-items: center; gap: 4px; } .ft-label::after { content: ""; display: inline-block; width: 1px; height: 12px; background: var(--line); margin-left: var(--spacing-xs); opacity: .6; } /* 标签与 chips 之间的细分隔（与原型 pagebar 一致） */ .ft-items { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); } .ft-item { padding: 5px 12px; border-radius: var(--radius-full); font-size: var(--fs-sm); color: var(--ink-2); border: 1px solid var(--line); background: var(--card-bg); transition: color .15s, border-color .15s, background .15s, box-shadow .15s; display: inline-flex; align-items: center; gap: 4px; } .ft-item:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; background: var(--bg); } .ft-item.active { color: var(--on-accent); background: var(--ink); border-color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(var(--ink-rgb), .15); } /* 对齐原型 .ftab.on：墨底白字加粗，加微阴影让激活态更跳 */ .ft-item .ft-count { font-size: var(--fs-xs); opacity: .55; font-weight: normal; } .ft-item.active .ft-count { opacity: .75; } /* ===== 详情页 ===== */ .detail-wrap { display: flex; gap: var(--spacing-xl); align-items: flex-start; } .detail-main { flex: 1 1 auto; min-width: 0; } .detail-meta { color: var(--muted); font-size: var(--fs-sm); display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: var(--spacing-md); } @media (max-width: 960px) { .detail-wrap { flex-direction: column; } } /* 详情页：作者块 + 关注（port 自原型 .detail-author，令牌化，零写死） */ .detail-author { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); margin-bottom: var(--spacing-lg); } .da-av { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--card-bg); flex: 0 0 auto; } .da-info { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; } .da-line { display: flex; align-items: center; gap: 8px; } .da-name { font-family: var(--font-heading, "Noto Serif SC", serif); font-size: var(--fs-md); font-weight: 600; color: var(--ink); } .da-badge { font-size: var(--fs-xs); color: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius-full); padding: 1px 8px; line-height: 1.5; } .da-badge--owner { color: var(--muted); border-color: var(--line); } /* 默认站点作者（管理员）徽章：去强调，区别于认证作者 */ .da-bio { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .da-follow { align-self: flex-start; margin-left: auto; padding: 5px 18px; border: 1px solid var(--accent); color: var(--accent); background: var(--card-bg); border-radius: var(--radius-full); font-size: var(--fs-sm); cursor: pointer; font-family: inherit; white-space: nowrap; transition: background .15s, color .15s; } .da-follow:hover { background: var(--accent-weak); } .da-follow.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } @media (max-width: 560px) { .detail-author { flex-wrap: wrap; } .da-follow { margin-left: 0; } } /* ===== 详情页增强（对齐原型 FY26-08 图书馆立轴 / 阅读进度，令牌化·零写死·双主题自适应） ===== */ /* 图书馆内页：立轴封面（原型 .lib-hero；颜色走 --lib-* 令牌，深色自动覆盖） */ .lib-hero { display:flex; gap:28px; align-items:stretch; background:linear-gradient(135deg,var(--lib-paper-1),var(--lib-paper-2)); border:1px solid var(--line); border-radius:var(--radius-card); padding:30px; box-shadow:var(--shadow); margin-top:8px; } .lib-hero-cover { position:relative; width:160px; min-height:240px; background:linear-gradient(150deg,var(--lib-cover-1),var(--lib-cover-2) 60%,var(--lib-cover-3)); border-radius:6px 16px 16px 6px; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:8px 12px 24px var(--lib-cover-shadow), inset 0 0 0 1px var(--lib-cover-inner); overflow:hidden; } .lib-hero-cover img { width:100%; height:100%; object-fit:cover; display:block; } .lib-hero-spine { position:absolute; left:0; top:0; bottom:0; width:14px; background:linear-gradient(180deg,var(--lib-spine-1),var(--lib-spine-2) 50%,var(--lib-spine-1)); box-shadow:inset 0 0 0 1px var(--lib-spine-inner); } .lib-hero-spine::after { content:''; position:absolute; left:50%; top:14px; bottom:14px; width:1.5px; background:var(--lib-spine-line); transform:translateX(-50%); } .lib-hero-title { font-family:var(--serif); font-size:78px; font-weight:700; color:var(--lib-ink); line-height:1; letter-spacing:-.02em; text-shadow:0 1px 0 var(--lib-title-shadow); position:relative; z-index:2; } .lib-hero-foot { position:absolute; left:20px; right:12px; bottom:14px; font-family:var(--serif); font-size:13px; color:var(--lib-ink-2); text-align:center; letter-spacing:.22em; opacity:.85; z-index:2; } .lib-hero-corner { position:absolute; top:0; right:0; width:24px; height:24px; background:linear-gradient(135deg,transparent 50%,var(--lib-ink-2) 50%); border-radius:0 8px 0 0; } .lib-hero-seal { position:absolute; right:12px; top:62px; width:54px; height:54px; border-radius:6px; background:var(--lib-seal); color:var(--on-accent); display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; line-height:1; box-shadow:2px 3px 8px var(--lib-seal-shadow); transform:rotate(-4deg); z-index:3; } .lib-hero-seal::before { content:''; position:absolute; inset:3px; border:1px solid var(--lib-seal-border); border-radius:4px; } .lib-hero-seal { font-size:22px; } .lib-hero-seal span { font-size:11px; letter-spacing:.06em; margin-top:2px; opacity:.95; } .lib-hero-side { flex:1; display:flex; flex-direction:column; min-width:0; } .lib-hero-type { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--accent); font-weight:600; padding:4px 12px; border-radius:var(--radius-pill); background:var(--accent-bg); width:fit-content; margin-bottom:12px; } .lib-hero-side .lib-hero-title-main { font-family:var(--serif); font-size:30px; font-weight:700; color:var(--ink); line-height:1.3; margin:0 0 16px; } .lib-hero-meta { display:grid; grid-template-columns:repeat(2,1fr); gap:8px 24px; padding:14px 18px; background:var(--lib-meta-bg); border:1px dashed var(--line); border-radius:12px; margin-bottom:16px; } .lib-hero-meta div { display:flex; justify-content:space-between; gap:14px; font-size:13px; padding:4px 0; border-bottom:1px dashed var(--lib-meta-line); } .lib-hero-meta div:last-child, .lib-hero-meta div:nth-last-child(2) { border-bottom:none; } .lib-hero-meta .k { color:var(--ink-3); font-family:var(--serif); font-size:12px; } .lib-hero-meta .v { color:var(--ink); font-weight:600; text-align:right; } @media (max-width: 640px) { .lib-hero { flex-direction:column; gap:18px; padding:20px; } .lib-hero-cover { width:100%; min-height:200px; } } /* 阅读进度（原型 .detail-progress，令牌化；全页详情 + 右栏内页共用 base，定位各自上下文） */ .detail-progress { height:3px; background:transparent; flex-shrink:0; overflow:hidden; } .detail-progress > i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--accent),var(--accent-dark)); transition:width .08s linear; } .detail-main > .detail-progress { position:sticky; top:0; z-index:5; } /* ===== 详情页：限宽栅格 + 浮动快速导航侧栏（port 自原型 .detail-side；令牌化·零写死） ===== */ .detail-layout { display: grid; grid-template-columns: 56px minmax(0, 760px); gap: 40px; max-width: 880px; margin: 0 auto; align-items: start; } .detail-layout > .detail-main { min-width: 0; } /* 全页详情：侧栏默认 sticky 贴随正文滚动（右栏内嵌详情由 layout.css 覆写为 fixed，见 Task #440） */ .detail-side { position: sticky; top: 88px; align-self: start; width: 56px; display: flex; flex-direction: column; align-items: center; padding: 8px 0 6px; background: var(--card-bg); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); z-index: 45; } .ds-item { width: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 7px 0; cursor: pointer; color: var(--ink-2); border-radius: 8px; background: none; border: none; font-family: inherit; transition: background .15s, color .15s; } .ds-item:hover { background: var(--bg-soft); color: var(--accent); } .ds-item.active { color: var(--accent); } .ds-item.active .ds-cnt { color: var(--accent); font-weight: 600; } .ds-item svg { width: 17px; height: 17px; opacity: .85; display: block; } .ds-item:hover svg { opacity: 1; } .ds-item .ds-cnt { font-size: 10px; color: var(--ink-3); line-height: 1.2; font-variant-numeric: tabular-nums; } /* 朗读按钮：对齐 candy 实心圆 + 三态（idle/playing/paused），复用现有令牌，零写死（守禁六） */ .ds-item.ds-tts { position: relative; width: 48px; height: 48px; padding: 0; border-radius: 50%; background: var(--bg-soft); overflow: hidden; flex-direction: row; color: var(--ink-2); } .ds-item.ds-tts:hover { background: var(--gold-soft); color: var(--gold); } .ds-item.ds-tts.is-playing, .ds-item.ds-tts.is-paused { background: var(--gold-soft); color: var(--gold); } /* 三态叠层：absolute 撑满 48×48，z 序 封面(1)→三角(2)→中心图标(3) */ .ds-item.ds-tts .tts-idle, .ds-item.ds-tts .tts-thumb, .ds-item.ds-tts .tts-thumb-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .ds-item.ds-tts .tts-thumb { z-index: 1; } .ds-item.ds-tts .tts-idle { z-index: 2; } .ds-item.ds-tts .tts-thumb-play { z-index: 3; } /* idle：柔色圆 + ▶ 三角 */ .ds-item.ds-tts .tts-thumb-play { display: none; } .ds-item.ds-tts .tts-idle .ic-play { width: 20px; height: 20px; background: rgba(var(--ink-rgb), .4); border-radius: 50%; padding: 4px; box-sizing: content-box; color: var(--bg, #fff); opacity: 1; } /* playing / paused：封面旋转/静止 + 中心图标叠加（隐藏 ▶） */ .ds-item.ds-tts.is-playing .tts-idle, .ds-item.ds-tts.is-paused .tts-idle { display: none; } .ds-item.ds-tts.is-playing .tts-thumb, .ds-item.ds-tts.is-paused .tts-thumb { display: flex; } .ds-item.ds-tts.is-playing .tts-thumb-img, .ds-item.ds-tts.is-paused .tts-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; animation: tts-spin 6s linear infinite; } .ds-item.ds-tts.is-paused .tts-thumb-img { animation-play-state: paused; } .ds-item.ds-tts.is-playing .tts-thumb-play, .ds-item.ds-tts.is-paused .tts-thumb-play { display: flex; background: radial-gradient(circle, rgba(var(--ink-rgb), .4) 11px, transparent 12px); color: var(--bg, #fff); } .ds-item.ds-tts .tts-thumb-play .ic-pause, .ds-item.ds-tts .tts-thumb-play .ic-play { width: 14px; height: 14px; opacity: 1; } .ds-item.ds-tts.is-playing .tts-thumb-play .ic-pause { display: block; } .ds-item.ds-tts.is-playing .tts-thumb-play .ic-play { display: none; } .ds-item.ds-tts.is-paused .tts-thumb-play .ic-pause { display: none; } .ds-item.ds-tts.is-paused .tts-thumb-play .ic-play { display: block; } @keyframes tts-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .ds-divider { width: 26px; height: 1px; background: var(--line); margin: 6px 0; } .ds-round { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading, "Noto Serif SC", serif); font-weight: 700; font-size: 15px; cursor: pointer; border: none; text-decoration: none; transition: transform .15s, box-shadow .15s; box-shadow: 0 4px 12px rgba(var(--accent-rgb), .28); } .ds-round:hover { transform: scale(1.06); box-shadow: 0 6px 16px rgba(var(--accent-rgb), .35); color: #fff; text-decoration: none; } .ds-round:active { transform: scale(.96); } .ds-item.ds-share { padding-top: 9px; padding-bottom: 4px; } .ds-item.ds-share svg { width: 16px; height: 16px; } /* 目录浮层（dsToc 点击展开 .sj-prose 章节锚点） */ .ds-toc-pop { position: fixed; left: 50%; transform: translateX(-50%); top: 96px; width: min(320px, 88vw); max-height: 70vh; overflow-y: auto; background: var(--card-bg); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg, 0 16px 48px rgba(31,30,27,.18)); padding: 12px 14px; z-index: 60; } .ds-toc-pop[hidden] { display: none; } .ds-toc-pop h4 { margin: 0 0 8px; font-family: var(--font-heading, "Noto Serif SC", serif); font-size: var(--fs-sm); color: var(--ink); } .ds-toc-pop a { display: block; padding: 6px 8px; border-radius: 8px; color: var(--ink-2); font-size: var(--fs-sm); text-decoration: none; } .ds-toc-pop a:hover { background: var(--bg-soft); color: var(--accent); } .ds-toc-pop .ds-toc-lv3 { padding-left: 20px; font-size: var(--fs-xs); color: var(--muted); } /* 分享浮层（dsShare 点击展开：阅读数 + 三渠道；参照 .ds-toc-pop 范式，令牌化·零写死） */ .ds-share-pop { position: fixed; left: 50%; transform: translateX(-50%); top: 96px; width: min(280px, 88vw); background: var(--card-bg); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg, 0 16px 48px rgba(31,30,27,.18)); padding: 14px; z-index: 60; } .ds-share-pop[hidden] { display: none; } .ds-share-views { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 10px; text-align: center; } .ds-share-views b { color: var(--accent); font-size: var(--fs-lg); font-variant-numeric: tabular-nums; } .ds-share-channels { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .ds-share-btn { padding: 6px 14px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--card-bg); color: var(--muted); font-size: var(--fs-sm); cursor: pointer; font-family: inherit; transition: color .15s, border-color .15s, background .15s; } .ds-share-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-weak); } /* 折叠：窄屏隐藏浮动侧栏，正文铺满（右栏内嵌详情上下文不受影响） */ @media (max-width: 920px) { body:not([data-rightmode="detail"]) .detail-layout { grid-template-columns: minmax(0, 1fr); max-width: 760px; } body:not([data-rightmode="detail"]) .detail-side { display: none; } } /* ===== 分页增强 ===== */ .pagination .sj-page-prev, .pagination .sj-page-next { padding: 0 12px; } .pagination .disabled { opacity: .5; pointer-events: none; border-style: dashed; } .pagination .sj-page-ellipsis { min-width: 24px; border: none; color: var(--faint); } .pagination .sj-page-info { min-width: auto; border: none; color: var(--muted); font-size: var(--fs-xs); align-self: center; margin-left: 4px; } /* ===== 侧栏小工具（render_sidebar 输出） ===== */ .sj-widget { background: var(--card-bg); border: none; border-radius: var(--radius-widget, 12px); padding: var(--spacing-md); margin-bottom: var(--spacing-md); } /* v19.20.9b：去边框（用户原话".sj-widget不要边框"）；其余对齐原型右栏 .lt-mini：12px 圆角 + 紧凑堆叠（gap≈14px） */ .sj-widget-title { font-family: var(--font-heading, "Noto Serif SC", serif); font-size: var(--fs-sm); font-weight: 600; color: var(--ink); letter-spacing: 1px; margin: 0 0 var(--spacing-sm); padding-bottom: var(--spacing-sm); border-bottom: 1px solid var(--line); } /* 对齐原型右栏标题语言（.rh-title/.ei-kicker）：小字距 + 细分隔线，区别于主区 .sj-section-title 的朱砂竖条 */ .sj-widget-body { font-size: var(--fs-sm); } .sj-widget-empty { color: var(--muted); margin: 0; font-size: var(--fs-sm); } .sj-mini-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .sj-mini-item { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); } .sj-mini-item:last-child { border-bottom: none; } .sj-mini-item a { color: var(--ink); flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sj-mini-item a:hover { color: var(--accent); text-decoration: none; } .sj-mini-meta { color: var(--faint); font-size: var(--fs-xs); flex: 0 0 auto; } .sj-cat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .sj-cat-list li a { display: inline-block; padding: 4px 11px; border-radius: var(--radius-full); background: var(--bg-soft); color: var(--muted); font-size: var(--fs-xs); } .sj-cat-list li a:hover { color: var(--accent); text-decoration: none; } .sj-cat-list li.active a { background: var(--accent); color: var(--on-accent); } /* 相关推荐 · tab（分类相关 / 朝代相关 / 名称相关）— 纯前端切换，令牌化·零写死·守禁六 */ .sj-rel-tabs { display: flex; flex-direction: column; gap: var(--spacing-sm); } .sj-rel-tabbar { display: flex; gap: 4px; border-bottom: 1px solid var(--line); } .sj-rel-tab { flex: 1 1 0; margin: 0 0 -1px; padding: 7px 4px; border: none; background: transparent; color: var(--muted); font-family: inherit; font-size: var(--fs-xs); cursor: pointer; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; } .sj-rel-tab:hover { color: var(--ink); } .sj-rel-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; } .sj-rel-panel { display: none; } .sj-rel-panel.is-active { display: block; } /* ===== 详情页：标签 / 分享 / 相关 / 上下篇 ===== */ .sj-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--spacing-md) 0; } .sj-tag-pill { display: inline-block; padding: 3px 12px; border-radius: var(--radius-full); background: var(--bg-soft); color: var(--muted); font-size: var(--fs-xs); } .sj-tag-pill:hover { color: var(--accent); text-decoration: none; } .sj-share { display: flex; align-items: center; gap: 8px; margin: var(--spacing-md) 0; flex-wrap: wrap; } .sj-share-label { font-size: var(--fs-sm); color: var(--muted); } .sj-share-btn { padding: 5px 14px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--card-bg); color: var(--muted); font-size: var(--fs-sm); cursor: pointer; font-family: inherit; } .sj-share-btn:hover { border-color: var(--accent); color: var(--accent); } /* 相关推荐 · 图右内容横向列表（有封面显缩略图在右、无封面文字自适应占满，令牌化零写死·守禁六） 注：本列表（.sj-rel-list/.sj-rel-item/.sj-rel-link/.sj-rel-text/.sj-rel-type/.sj-rel-title/.sj-rel-excerpt/.sj-rel-thumb） 由 _widgets.php 详情页右栏"相关推荐"tab 面板渲染（_sj_rel_list 在 _render.php）；正文底部相关推荐块已于 v19.20.7 删除。 */ .sj-rel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .sj-rel-item { border-bottom: 1px solid var(--line); } .sj-rel-item:last-child { border-bottom: none; } .sj-rel-link { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md) 0; color: var(--ink); } .sj-rel-link:hover { text-decoration: none; } .sj-rel-link:hover .sj-rel-title { color: var(--accent); } .sj-rel-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .sj-rel-type { align-self: flex-start; font-size: var(--fs-xs); padding: 1px 9px; border-radius: var(--radius-full); background: var(--accent-weak); color: var(--accent); line-height: 1.7; } .sj-rel-title { margin: 0; font-size: var(--fs-md); font-weight: 600; color: var(--ink); line-height: 1.45; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .sj-rel-excerpt { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .sj-rel-thumb { flex: 0 0 auto; width: 96px; height: 72px; border-radius: var(--radius-md); overflow: hidden; background: var(--bg-soft); } .sj-rel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .sj-pager-detail { display: flex; justify-content: space-between; gap: 12px; margin: var(--spacing-xl) 0; flex-wrap: wrap; } .sj-pager-detail a { flex: 1 1 0; min-width: 140px; padding: var(--spacing-md); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); display: flex; flex-direction: column; gap: 4px; } .sj-pager-detail a:hover { border-color: var(--accent); text-decoration: none; } .sj-pager-detail .dir { font-size: var(--fs-xs); color: var(--faint); } .sj-pager-detail .tt { font-size: var(--fs-sm); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sj-pager-detail .sj-next { text-align: right; align-items: flex-end; } /* 版权声明（port 自 candy .detail-copyright；开关走 setting('show_copyright')，站点级声明走 setting('site_copyright')；令牌化·零写死） */ .sj-copyright { display: flex; align-items: flex-start; gap: 10px; margin: var(--spacing-lg) 0; padding: var(--spacing-md) var(--spacing-lg); background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); } .sj-cp-ic { flex: 0 0 auto; margin-top: 2px; color: var(--muted); } .sj-cp-text { min-width: 0; } .sj-cp-main { margin: 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; } .sj-cp-site { margin: 4px 0 0; font-size: var(--fs-xs); color: var(--faint); line-height: 1.6; } /* ===== 评论 ===== */ .sj-comments { margin-top: var(--spacing-xl); } .sj-comment-list { list-style: none; margin: var(--spacing-md) 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-md); } .sj-comment { display: flex; gap: 12px; } .sj-comment-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--bg-soft); flex: 0 0 auto; } .sj-comment-body { flex: 1 1 auto; min-width: 0; } .sj-comment-head { display: flex; align-items: baseline; gap: 8px; } .sj-comment-name { font-weight: 600; color: var(--ink); font-size: var(--fs-sm); } .sj-comment-time { font-size: var(--fs-xs); color: var(--faint); } .sj-comment-text { color: var(--ink); font-size: var(--fs-sm); line-height: 1.7; margin: 4px 0; word-break: break-word; } .sj-comment-reply { background: none; border: none; color: var(--muted); font-size: var(--fs-xs); cursor: pointer; padding: 0; font-family: inherit; } .sj-comment-reply:hover { color: var(--accent); } .sj-comment-children { list-style: none; margin: var(--spacing-sm) 0 0; padding: 0 0 0 var(--spacing-lg); border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: var(--spacing-sm); } .sj-comment-form { margin-top: var(--spacing-md); } .sj-comment-form textarea { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; font-size: var(--fs-sm); font-family: inherit; color: var(--ink); background: var(--card-bg); resize: vertical; box-sizing: border-box; } .sj-comment-form textarea:focus { outline: none; border-color: var(--accent); } .sj-comment-form-actions { display: flex; gap: 8px; margin-top: 8px; } .sj-comment-login { color: var(--muted); font-size: var(--fs-sm); } .sj-comment-login a { color: var(--accent); } .sj-comment-pending { opacity: .7; } .sj-comment-pending .sj-comment-name { color: var(--accent); } /* ===== 加载更多（卡片瀑布流 / 评论区，AJAX 接管·守禁六 token 化）===== */ .sj-load-more { display: flex; width: fit-content; align-items: center; justify-content: center; gap: 8px; margin: var(--spacing-lg) auto 0; padding: 10px 22px; border: 1px solid var(--line); border-radius: var(--radius-pill, 999px); background: var(--card-bg); color: var(--muted); font-size: var(--fs-sm); font-family: inherit; cursor: pointer; transition: border-color .15s, color .15s, background .15s; } .sj-load-more:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .sj-load-more:disabled { cursor: default; color: var(--faint); } .sj-load-more:disabled::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: sj-spin .7s linear infinite; } @keyframes sj-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .sj-load-more:disabled::before { animation: none; } } .sj-comment-load-more-wrap { display: flex; justify-content: center; margin: var(--spacing-md) 0; } .sj-load-sentinel { width: 100%; height: 1px; } /* ===== 文内链接 → 右栏即时预览（详情页增强：点击 .sj-prose a 右栏展示目标内容） ===== */ .sj-preview { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; background: var(--card-bg, #fff); border-radius: var(--radius-widget, 12px); overflow: hidden; } .sj-preview[hidden] { display: none; } /* ===== preview 独占右栏视野（点击文内链接后，原 sidebar widget 让位） ===== */ /* 现代浏览器：:has() 选父容器内非 preview 兄弟并隐藏（让 preview 真正覆盖 widget） */ .sj-right-inner:has(.sj-preview:not([hidden])) > :not(.sj-preview) { display: none; } .sj-right-inner:has(.sj-preview:not([hidden])) .sj-preview { flex: 1 1 auto; height: auto; min-height: 100%; } /* 旧浏览器兜底：JS 在 .sj-right-inner 上加 data-preview-on="1" 时同样生效 */ .sj-right-inner[data-preview-on="1"] > :not(.sj-preview) { display: none; } .sj-right-inner[data-preview-on="1"] .sj-preview { flex: 1 1 auto; height: auto; min-height: 100%; } /* 注：.sj-preview[hidden] { display: none } 在上方已定义；openTermPreview 解除 hidden 后， 上述两条让 preview 占据 .sj-right-inner 全部视野，原 sidebar widget 让位 */ .sj-pv-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--bg-soft, #faf9f7); flex: 0 0 auto; } .sj-pv-back { background: none; border: none; cursor: pointer; color: var(--muted); font-size: var(--fs-sm); font-family: inherit; padding: 2px 4px; } .sj-pv-back:hover { color: var(--accent); } .sj-pv-label { font-size: var(--fs-xs); color: var(--on-accent, #fff); padding: 2px 10px; border-radius: var(--radius-pill, 999px); white-space: nowrap; } .sj-pv-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; } .sj-pv-title { font-family: var(--font-heading, "Noto Serif SC", serif); font-size: var(--fs-lg); font-weight: 600; color: var(--ink); line-height: 1.4; } .sj-pv-meta { display: flex; gap: 10px; color: var(--faint); font-size: var(--fs-xs); flex-wrap: wrap; } .sj-pv-meta .sep { opacity: .4; } .sj-pv-hero { border-radius: var(--radius, 10px); overflow: hidden; background: var(--bg-soft); aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; } .sj-pv-hero img { width: 100%; height: 100%; object-fit: cover; display: block; } .sj-pv-hero.is-char { font-family: var(--font-heading, "Noto Serif SC", serif); font-size: 44px; color: var(--accent); background: var(--accent-weak, #fbefec); } .sj-pv-excerpt { font-size: var(--fs-sm); color: var(--ink-2, #6e6c64); line-height: 1.8; margin: 0; } /* 来源出处（点击文内链接后右栏预览卡内展示；仅接口返回 source/author/dynasty 时渲染） */ .sj-pv-source { display: flex; gap: 8px; align-items: flex-start; background: var(--bg-soft, #faf9f7); border: 1px solid var(--line); border-radius: var(--radius, 10px); padding: 10px 12px; } .sj-pv-source-k { flex: 0 0 auto; font-size: var(--fs-xs); color: var(--on-accent, #fff); background: var(--accent); padding: 2px 8px; border-radius: var(--radius-pill, 999px); line-height: 1.6; white-space: nowrap; } .sj-pv-source-b { min-width: 0; } .sj-pv-source-main { margin: 0; font-size: var(--fs-sm); color: var(--ink); line-height: 1.7; } /* 释文出处可点击（接口返回 desc_source_url 时渲染为链接） */ a.sj-pv-source-main { color: var(--accent); text-decoration: none; } a.sj-pv-source-main:hover { text-decoration: underline; } .sj-pv-source-sub { margin: 4px 0 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; } .sj-pv-tags { display: flex; flex-wrap: wrap; gap: 6px; } .sj-pv-tag { font-size: var(--fs-xs); color: var(--ink-2); background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-pill, 999px); padding: 2px 10px; } .sj-pv-acts { margin-top: 2px; } .sj-pv-go { display: inline-block; padding: 8px 18px; border: 1px solid var(--accent); border-radius: var(--radius-pill, 999px); color: var(--accent); font-size: var(--fs-sm); text-decoration: none; transition: background .15s, color .15s; } .sj-pv-go:hover { background: var(--accent); color: var(--on-accent, #fff); text-decoration: none; } .sj-pv-comments { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; } .sj-pv-comments h4 { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; } .sj-pv-cmt { font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; } .sj-pv-cmt b { color: var(--ink-2); font-weight: 600; margin-right: 6px; } .sj-pv-cmt p { margin: 2px 0 0; } .sj-pv-loading, .sj-pv-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px 16px; color: var(--faint); font-size: var(--fs-sm); text-align: center; } /* 正文术语高亮（点击 → 右栏展开，不跳术语页/不弹 modal） */ .term-word { color: var(--accent); cursor: pointer; border-bottom: 1px dotted var(--accent); transition: background .15s ease; } .term-word:hover { background: var(--accent-weak); } /* 右栏术语卡：参考文献 + 相关词条/内容（复用 .sj-pv-* 体系，零写死） */ .sj-pv-term-ref { font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; margin: 10px 0 0; } .sj-pv-term-rel { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .sj-pv-term-rel h4 { flex: 0 0 100%; margin: 0; font-size: var(--fs-sm); color: var(--ink-2); font-family: var(--font-heading, "Noto Serif SC", serif); } .sj-pv-term-chip { font-size: var(--fs-xs); color: var(--ink); background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-pill, 999px); padding: 3px 11px; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; } .sj-pv-term-chip:hover { background: var(--accent-weak); border-color: var(--accent); color: var(--accent); } /* v19.20.8：术语 tab 内的 chips 包裹（原独立块靠 .sj-pv-term-rel 横排，现并入 .sj-rel-panel 需自带 flex） */ .sj-pv-term-chips { display: flex; flex-wrap: wrap; gap: 8px; } /* v19.20.9 清理：原 .sj-pv-term-link/.sj-pv-term-link-wrap/.sj-pv-rel-src/.sj-pv-term-link--{key} 全部死代码（v19.20.9 内容改 .sj-rel-list/.sj-rel-link）——守禁五·死开关清理 */ /* 各类型 token 配色迁移到 .sj-rel-type--{key}（弹窗内容列表项的类型标签与 _widgets.php 右栏"相关推荐"同款派生——守禁三·单一事实源） */ .sj-rel-type--encyclopedia { color: var(--t-encyclopedia); background: var(--t-encyclopedia-bg, var(--accent-weak)); } .sj-rel-type--article { color: var(--t-article); background: var(--t-article-bg, var(--accent-weak)); } .sj-rel-type--album { color: var(--t-album); background: var(--t-album-bg, var(--accent-weak)); } .sj-rel-type--library { color: var(--t-library); background: var(--t-library-bg, var(--accent-weak)); } /* v19.20.6：tab 文本带计数 chip（5-tab 栏每个 tab 后面带 N）；v19.20.9 复用 */ .sj-rel-tab-cnt { display: inline-block; margin-left: 3px; font-size: calc(var(--fs-xs) - 1px); opacity: 0.65; font-weight: 400; } /* v19.20.9：术语弹窗 4 内容类型 panel 内空态/全空兜底（直接挂在 .sj-pv-rel-empty-tip，无外层 .sj-pv-term-rel-empty 嵌套时也生效） */ .sj-pv-rel-empty-tip { font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; font-style: normal; margin: 4px 0; } .sj-pv-term-rel-empty .sj-pv-rel-empty-tip { flex: 0 0 100%; } /* 详情标题（v19.20.3f：选择器升级到 h1.detail-title，特异性 (0,1,1) 全站最高 —— 防御任何外部样式/缓存副本（含浏览器 SW/CDN 中的旧 .detail-title 27px 规则）压住 v19.20.3d 的 40px/28px。 字号 calc(var(--fs-xl) + 20px) = 40px；标题到 meta 间距 calc(var(--spacing-md) + 12px) = 28px） */ h1.detail-title { font-family: var(--font-heading, "Noto Serif SC", serif); font-size: calc(var(--fs-xl) + 20px); font-weight: 700; margin: 0 0 calc(var(--spacing-md) + 12px); line-height: 1.3; } /* ===== 标注 / 笔记 / 朗读 已迁到快捷导航侧栏（见 .detail-side 与 #dsAnno/#dsNote/#dsTts）===== 原正文底部 .detail-tools / .dt-btn 已下线（守禁五·死开关清理） */ /* 标注模式态 + 标注高亮（仍由侧栏 dsAnno 触发；样式靠 token） */ .sj-prose.sj-annotating { cursor: text; background: var(--accent-weak); border-radius: var(--radius); } mark.sj-hl { background: var(--accent-weak); color: inherit; border-radius: 3px; padding: 0 2px; cursor: pointer; } /* ===== 图片灯箱（封面 + 正文内图放大） ===== */ .sj-lightbox { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: center; justify-content: center; z-index: 9998; padding: 24px; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .sj-lightbox.open { opacity: 1; pointer-events: auto; } .sj-lightbox-media { position: relative; display: inline-flex; align-items: center; justify-content: center; } .sj-lightbox-media img { max-width: 92vw; max-height: 88vh; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg, 0 16px 48px rgba(31,30,27,.18)); display: block; } .sj-lightbox-close { position: absolute; top: 20px; right: 24px; width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--glass-light); color: var(--on-accent); font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .sj-lightbox-close:hover { background: var(--glass-light-hover); } /* ===== 笔记侧栏（localStorage，纯前端） ===== */ .sj-notes { position: fixed; top: 0; right: 0; height: 100vh; width: var(--sujian-right-w); max-width: 86vw; background: var(--card-bg); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg, 0 16px 48px rgba(31,30,27,.18)); transform: translateX(100%); transition: transform .25s ease; z-index: 9997; display: flex; flex-direction: column; } .sj-notes.open { transform: translateX(0); } .sj-notes-head { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-md); border-bottom: 1px solid var(--line); font-family: var(--font-heading, "Noto Serif SC", serif); font-size: var(--fs-md); color: var(--ink); } .sj-notes-x { border: none; background: none; color: var(--faint); font-size: 22px; line-height: 1; cursor: pointer; } .sj-notes-x:hover { color: var(--accent); } .sj-notes-body { flex: 1 1 auto; overflow-y: auto; padding: var(--spacing-md); display: flex; flex-direction: column; gap: var(--spacing-sm); } .sj-note-item { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 28px 10px 12px; font-size: var(--fs-sm); color: var(--ink); line-height: 1.6; position: relative; } .sj-note-item .sj-note-del { position: absolute; top: 6px; right: 8px; border: none; background: none; color: var(--faint); cursor: pointer; font-size: 15px; line-height: 1; } .sj-note-item .sj-note-del:hover { color: var(--accent); } .sj-notes-empty { color: var(--muted); font-size: var(--fs-sm); text-align: center; padding: var(--spacing-xl) 0; margin: 0; } .sj-notes-foot { padding: var(--spacing-md); border-top: 1px solid var(--line); } .sj-notes-foot textarea { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; font-size: var(--fs-sm); font-family: inherit; color: var(--ink); background: var(--card-bg); resize: vertical; box-sizing: border-box; } .sj-notes-foot textarea:focus { outline: none; border-color: var(--accent); } .sj-notes-add { margin-top: 8px; width: 100%; } /* ============================================================ 特殊视图（时间轴 / 搜索 / 标签 / 朝代 / 术语 / 专题 / 动态 / 收藏 / 相册 / 博物馆 / 知识图谱 / 对比 / AI） 颜色 / 圆角 / 间距一律走 --token（守禁六）。 ============================================================ */ .sj-list-sub { color: var(--muted); font-size: var(--fs-sm); margin: 4px 0 0; line-height: 1.6; } .sj-inline-search { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; } /* 父容器 min-width:0 防止 input 推爆按钮 */ .sj-inline-input { border: 1px solid var(--line); border-radius: var(--radius-full); padding: 7px 14px; font-size: var(--fs-sm); font-family: inherit; color: var(--ink); background: var(--card-bg); min-width: 180px; flex: 0 1 240px; transition: border-color .15s, box-shadow .15s; } .sj-inline-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .1); } .sj-inline-go { border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); border-radius: var(--radius-full); padding: 7px 18px; cursor: pointer; font-size: var(--fs-sm); font-family: inherit; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; min-width: 80px; justify-content: center; transition: background .15s, border-color .15s, transform .1s, box-shadow .15s; } .sj-inline-go:hover { background: var(--accent-dark); border-color: var(--accent-dark); } .sj-inline-go:active { transform: scale(0.97); } .sj-inline-go::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat; flex-shrink: 0; } /* 搜索图标：CSS mask + currentColor 继承（按钮文字「搜索」由 PHP 输出） */ /* ---------- 时间轴：双轨对照（中国朝代 / 西方时期） ---------- */ .tl-ctrl { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); align-items: center; justify-content: space-between; margin: var(--spacing-md) 0 var(--spacing-lg); padding: 0 0 var(--spacing-sm); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; background: var(--card-bg); } .tl-ctrl-group { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); } .tl-ctrl-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--bg-main); color: var(--muted); border-radius: var(--radius-full); padding: var(--spacing-xs) var(--spacing-md); font-family: var(--font-body, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif); font-size: var(--fs-sm); cursor: pointer; transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast); } .tl-ctrl-btn .ic { width: 14px; height: 14px; flex-shrink: 0; } .tl-ctrl-btn:hover { color: var(--accent); border-color: var(--accent); } .tl-ctrl-btn.active { color: var(--on-accent); background: var(--ink); border-color: var(--ink); font-weight: 600; } /* 对齐原型 .pagebar 选中态：墨底白字加粗（.ftab.on） */ .tl-dual { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); align-items: start; margin-top: 0; /* 2026-08-29 去掉顶层边距（原型无此层）；顶距现由 .tl-container 24px 提供，对齐原型 .timeline */ } .tl-rail-col { min-width: 0; } .tl-rail-col.is-hidden { display: none; } .tl-rail-h { font-family: var(--font-heading, "Noto Serif SC", serif); font-size: var(--fs-sm); color: var(--muted); letter-spacing: 2px; margin: 0 0 var(--spacing-md); padding-bottom: var(--spacing-xs); border-bottom: 1px solid var(--line); } .tl-rail-h.is-active-side { color: var(--accent); } .tl-axis { list-style: none; margin: 0; padding: 0; position: relative; } .tl-axis::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--line); } .tl-era { position: relative; padding: 0 0 var(--spacing-md) 28px; } .tl-era[hidden] { display: none !important; } /* 数量上限折叠：JS 加 hidden 属性，防御内联样式覆盖 */ .tl-era-dot { position: absolute; left: 1px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--card-bg); border: 2px solid var(--line); cursor: pointer; z-index: 2; transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast); } .tl-era-dot:hover { transform: scale(1.2); border-color: var(--line-hover); } .tl-era.active .tl-era-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 6px var(--accent-weak); } .tl-era-name { font-family: var(--font-heading, "Noto Serif SC", serif); font-size: var(--fs-era, 22px); font-weight: 700; letter-spacing: 2px; line-height: 1.15; color: var(--ink); margin: 0 0 var(--spacing-sm); } .tl-era-items { display: grid; grid-template-columns: repeat(var(--tl-era-cols, 6), minmax(0, 1fr)); gap: var(--spacing-md); } /* 列数 token 化（守禁六）；默认 6 列，桌面右栏展开降为 5 列（守用户明确要求 默认6/右栏5） */ .tl-era-empty { color: var(--muted); font-size: var(--fs-sm); margin: 0; } .tl-rail-more-btn { display: inline-flex; align-items: center; gap: 6px; margin: var(--spacing-sm) 0 0 28px; padding: 6px 16px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--card-bg); color: var(--accent); font-family: var(--font-body, inherit); font-size: var(--fs-sm); cursor: pointer; line-height: 1.4; transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast); } .tl-rail-more-btn:hover { border-color: var(--accent); background: var(--accent-weak); } .tl-rail-more-btn[aria-expanded="true"] { color: var(--muted); } .tl-item { margin: 0; } /* ===== 时间轴子分类（node=朝代/时期 → subs=子分期 → 内容；照搬原型，默认全展开） ===== */ .tl-era-name { cursor: pointer; user-select: none; } /* 子分类容器 */ .tl-subs { margin-top: var(--spacing-sm); } .tl-era-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--spacing-md); } .tl-echip { border: 1px solid var(--line); background: var(--card-bg); color: var(--muted); border-radius: var(--radius-full); padding: 4px 14px; font-size: var(--fs-sm); font-family: var(--font-body, inherit); cursor: pointer; line-height: 1.4; transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast); } .tl-echip:hover { border-color: var(--accent); color: var(--accent); } .tl-echip.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .tl-sub-blocks { display: flex; flex-direction: column; gap: var(--spacing-md); } .tl-sub-block { position: relative; } .tl-sb-head { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-heading, "Noto Serif SC", serif); margin: 0 0 var(--spacing-sm); padding-bottom: 6px; border-bottom: 1px dashed var(--line); } .tl-sb-head b { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); letter-spacing: 1px; } .tl-sb-head em { font-style: normal; font-size: var(--fs-xs); color: var(--muted); } .tl-sub-empty { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 var(--spacing-sm); } /* 单轨：仅显示选中一轨，占满整列（另一轨由 JS 加 .is-hidden） */ .tl-dual[data-track="single"] { grid-template-columns: 1fr; } /* 双轨 - 上下叠放 */ .tl-dual[data-layout="stack"] { grid-template-columns: 1fr; gap: 0; } .tl-dual[data-layout="stack"] .tl-rail-col { margin-bottom: var(--spacing-xl); } /* 控制条：按轨道模式显示对应子组（双轨布局 / 单轨选择 互斥） */ .tl-ctrl[data-track="single"] .tl-ctrl-group[data-for="dual"] { display: none; } .tl-ctrl[data-track="dual"] .tl-ctrl-group[data-for="single"] { display: none; } /* 视图：网格 → era 内容改为网格排布（同样走 --tl-era-cols，固定列数） */ .tl-dual[data-view="grid"] .tl-era-items { display: grid; grid-template-columns: repeat(var(--tl-era-cols, 6), minmax(0, 1fr)); gap: var(--spacing-md); } /* 网格视图：默认 6 列，桌面右栏展开降 5（同基础规则） */ /* 双轨模式：每轨 3 列（视觉共 6，避免半宽挤压） */ .tl-dual[data-track="dual"] .tl-era-items { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* 仅桌面（≥1280px）右栏展开(expanded)挤占主区 → 单轨 6→5 列（守用户明确要求 默认6/右栏5）；平板/移动右栏为浮层不挤主区，不降列 */ @media (min-width: 1280px) { #sjThreeCol[data-right="expanded"] .tl-era-items { grid-template-columns: repeat(5, minmax(0, 1fr)); } #sjThreeCol[data-right="expanded"] .tl-dual[data-view="grid"] .tl-era-items { grid-template-columns: repeat(5, minmax(0, 1fr)); } #sjThreeCol[data-right="expanded"] .tl-dual[data-track="dual"] .tl-era-items { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* 双轨半宽挤不下 5 列，保持每轨 3 */ } /* 时间轴主网格响应式兜底：窄屏降列，避免固定列数在小屏过挤 */ @media (max-width: 960px) { .tl-era-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tl-dual[data-view="grid"] .tl-era-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .tl-era-items { grid-template-columns: 1fr; } .tl-dual[data-view="grid"] .tl-era-items { grid-template-columns: 1fr; } } /* ---------- 搜索结果页 ---------- 注：外层类名 .sj-search-page 是有意避开 layout.css:244 全局 .sj-search （导航栏胶囊，display:flex + radius-full），避免被误命中同款样式。 全 token、不写死。*/ .sj-search-page { display: block; margin-top: var(--spacing-lg); } .sj-search-head { margin-bottom: var(--spacing-md); } .sj-search-sub { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-sm); } /* 顶部搜索框 + 类型芯片（同一卡片） */ .sj-search-bar { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm); box-shadow: var(--shadow); } .sj-search-bar .sj-search-form { position: relative; max-width: 100%; margin-bottom: var(--spacing-sm); } /* 双栏布局：主栏结果 + 侧栏辅助 */ .sj-search-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--spacing-xl); margin-top: var(--spacing-xl); align-items: start; } .sj-search-main { min-width: 0; } /* grid 子项内含 overflow，圆角卡需 min-width:0 避免撑破容器 */ .sj-search-side { display: flex; flex-direction: column; gap: var(--spacing-md); position: sticky; top: var(--spacing-md); } /* 侧栏滚动跟随主栏（不能全屏滚） */ /* 窄屏双栏变单列 */ @media (max-width: 900px) { .sj-search-body { grid-template-columns: 1fr; } .sj-search-side { position: static; } } @media (max-width: 900px) { .sj-search-side { order: -1; } /* 窄屏：侧栏前置，避免压在结果下方看不见 */ } .sj-search-side-card { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--spacing-md); } .sj-search-side-h { font-family: var(--font-heading, "Noto Serif SC", serif); font-size: var(--fs-md); margin: 0 0 var(--spacing-sm); padding: 0; border: none; color: var(--ink); } .sj-search-side-h-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-sm); } .sj-search-side-empty { color: var(--faint); font-size: var(--fs-xs); margin: 0; } /* v19.20.17：统一成首页 .home-search 同款"无框透明"搜索框（用户原话「统一成首页的这种搜索框」） 形态特征：无背景、无边框、无圆角、SVG icon 绝对定位在右端、input 留 padding-right 让位图标、 hover/focus 反馈仅 SVG icon 变 accent 色（不靠 border/box-shadow，符合素笺纸面感）。 影响范围：左栏、搜索页（_special.php）等所有带 .sj-search-field 类的搜索框。 */ .sj-search-field { display: flex; align-items: center; gap: 8px; background: var(--bg-left); border: 0; border-radius: 0; padding: 8px 10px; position: relative; transition: color var(--transition-fast); cursor: text; } .sj-search-field:hover, .sj-search-field:focus-within { /* 无外框态：仅 SVG icon 变 accent 作聚焦反馈 */ } .sj-search-field:hover .sj-search-ico, .sj-search-field:focus-within .sj-search-ico { color: var(--accent); transition: color var(--transition-fast); } .sj-search-ico { color: var(--ink-3); flex-shrink: 0; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); } /* v19.20.16→v19.20.17：原 order:2 改为绝对定位（v19.20.17 视觉对齐 .home-search 的 icon 绝对定位方案） */ .sj-search-input { flex: 1; min-width: 0; border: none; background: var(--bg-left); outline: none; padding: 4px 40px 4px 4px; font-size: var(--fs-sm); font-family: inherit; color: var(--ink); appearance: none; -webkit-appearance: none; } /* v19.20.21：padding-right 40px = icon right 18px + icon 14px + 8px 留白，防图标压字 */ .sj-search-input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; } /* 去掉原生清除 ✕ */ .sj-search-input::-webkit-search-decoration { display: none; -webkit-appearance: none; } .sj-search-go { flex-shrink: 0; border: none; background: var(--accent); color: var(--on-accent); border-radius: var(--radius-full); padding: 9px 22px; cursor: pointer; font-size: var(--fs-sm); font-family: inherit; } .sj-search-go:hover { background: var(--accent-dark); } /* 实时联想下拉（复用 /api/content_search.php?action=suggest） */ .sj-suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 6px; z-index: 50; max-height: 360px; overflow: auto; } .sj-suggest[hidden] { display: none; } .sj-suggest-group { padding: 2px 0; } .sj-suggest-gt { font-size: var(--fs-xs); color: var(--faint); padding: 6px 10px 2px; } .sj-suggest-item { display: block; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--ink); font-size: var(--fs-sm); text-decoration: none; } .sj-suggest-item:hover, .sj-suggest-item.active { background: var(--bg-soft); color: var(--accent); text-decoration: none; } /* 搜索词高亮：搜索列表标题/摘要 + 详情页正文区，统一样式（取详情页更醒目的样式，含 font-weight:600） */ mark.sj-kw-hl, .sj-search mark { background: var(--accent-weak); color: var(--ink); border-radius: 3px; padding: 0 2px; font-weight: 600; } /* v19.5 搜索结果横排列表（图左文右，参考用户截图布局）。放弃 .card-grid 网格，纵向堆叠每条结果，阅读节奏更稳 */ .sj-search-list { display: flex; flex-direction: column; gap: var(--spacing-md); } .sj-list-card { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--spacing-md); padding: var(--spacing-md); background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: box-shadow .15s, transform .15s, border-color .15s; } .sj-list-card:hover { box-shadow: var(--shadow); border-color: var(--line-hover); transform: translateY(-1px); } .sj-list-card-cover { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-md); background: var(--bg-soft); } .sj-list-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } /* 无封面卡片：封面列不渲染，正文占满整行（specificity 高于 .sj-list-card，窄屏 120px 1fr 规则亦被覆盖） */ .sj-list-card.no-cover { grid-template-columns: 1fr; } .sj-list-card-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .sj-list-card-title { font-family: var(--font-heading, "Noto Serif SC", serif); font-size: var(--fs-lg); line-height: 1.4; margin: 0; font-weight: 600; } .sj-list-card-title a { color: var(--ink); } .sj-list-card-title a:hover { color: var(--accent); text-decoration: none; } .sj-list-card-excerpt { color: var(--muted); font-size: var(--fs-sm); line-height: 1.65; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .sj-list-card-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: var(--spacing-sm); flex-wrap: wrap; } .sj-list-card-foot .cf-tag { flex-shrink: 0; } .sj-list-card-cat { color: var(--muted); font-size: var(--fs-xs); } @media (max-width: 640px) { .sj-list-card { grid-template-columns: 120px minmax(0, 1fr); gap: var(--spacing-sm); padding: var(--spacing-sm); } .sj-list-card-title { font-size: var(--fs-md); } .sj-list-card-excerpt { -webkit-line-clamp: 2; line-clamp: 2; } } .sj-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--spacing-md) 0 var(--spacing-lg); } .sj-chip { padding: 5px 16px; border-radius: var(--radius-full); font-size: var(--fs-sm); color: var(--muted); border: 1px solid var(--line); } .sj-chip:hover, .sj-chip.active { color: var(--accent); border-color: var(--accent); background: var(--accent-weak); text-decoration: none; } /* 类型命中数量（对齐 candy 类型 pill 带 cnt，全 token） */ .sj-chip-cnt { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 6px; border-radius: var(--radius-full); font-size: var(--fs-xs); line-height: 18px; text-align: center; color: var(--faint); background: var(--bg-soft); } .sj-chip.active .sj-chip-cnt { color: var(--on-accent, #fff); background: var(--accent); } .sj-search-hint { color: var(--muted); font-size: var(--fs-sm); } .sj-search-group { margin-bottom: var(--spacing-xl); } .sj-search-group-h { font-family: var(--font-heading, "Noto Serif SC", serif); font-size: var(--fs-md); margin: 0 0 var(--spacing-md); } .sj-search-count { color: var(--muted); font-size: var(--fs-sm); font-weight: 400; } /* 热门搜索 + 搜索历史（localStorage） */ .sj-search-hot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: var(--spacing-sm) 0 var(--spacing-md); } .sj-search-hot-label { font-size: var(--fs-sm); color: var(--muted); flex-shrink: 0; } .sj-search-hot-list { display: flex; flex-wrap: wrap; gap: 8px; } .sj-search-hist { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .sj-search-hist-list { display: flex; flex-wrap: wrap; gap: 8px; } .sj-hist-item { display: inline-flex; align-items: center; gap: 2px; padding: 3px 6px 3px 14px; border-radius: var(--radius-full); background: var(--bg-soft); color: var(--muted); font-size: var(--fs-xs); cursor: pointer; } .sj-hist-item:hover { color: var(--accent); } .sj-hist-del { border: none; background: transparent; color: var(--faint); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; } .sj-hist-del:hover { color: var(--accent); } .sj-search-hist-clear { border: none; background: transparent; color: var(--faint); cursor: pointer; font-size: var(--fs-xs); text-decoration: underline; margin-left: 4px; } .sj-search-hist-clear[hidden] { display: none; } /* 热门搜索榜（对齐 candy 热门搜索：排名+次数，全 token） */ .sj-hot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .sj-hot-item { margin: 0; } .sj-hot-link { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--radius-md); color: var(--ink-2); font-size: var(--fs-sm); text-decoration: none; transition: background .15s, color .15s; } .sj-hot-link:hover { background: var(--bg-soft); color: var(--accent); text-decoration: none; } .sj-hot-rank { flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; font-family: var(--font-heading, "Noto Serif SC", serif); color: var(--muted); background: var(--bg-soft); } .sj-hot-rank.top { color: var(--on-accent, #fff); background: var(--accent); } /* Top3 高亮 */ .sj-hot-kw { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sj-hot-cnt { flex-shrink: 0; font-size: var(--fs-xs); color: var(--faint); } /* 相关搜索（空结果态） */ .sj-search-related { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: var(--spacing-md); } .sj-search-related > span { color: var(--muted); font-size: var(--fs-sm); } /* 分页 */ .sj-pager { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: var(--spacing-xl) 0; } .sj-pager a { padding: 8px 20px; border: 1px solid var(--line); border-radius: var(--radius-full); color: var(--ink); font-size: var(--fs-sm); text-decoration: none; } .sj-pager a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; } .sj-pager-cur { color: var(--muted); font-size: var(--fs-sm); } /* 跳页表单（对齐 candy pager-jump，GET 提交，无内联 JS，全 token） */ .sj-page-jump { display: inline-flex; align-items: center; gap: 6px; margin-left: var(--spacing-sm); color: var(--muted); font-size: var(--fs-sm); } .sj-page-jump-lbl { display: inline-flex; align-items: center; gap: 4px; } .sj-page-jump-in { width: 56px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-soft); color: var(--ink); font-size: var(--fs-sm); font-family: inherit; text-align: center; } .sj-page-jump-in:focus { outline: none; border-color: var(--accent); } .sj-page-go { border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--card-bg); color: var(--ink); padding: 6px 16px; cursor: pointer; font-size: var(--fs-sm); font-family: inherit; } .sj-page-go:hover { border-color: var(--accent); color: var(--accent); } /* 无结果兜底"大家都在看"推荐区（复用 .sj-search-group，仅加轻量区分，不写死） */ .sj-search-rec .sj-search-group-h { color: var(--accent); } /* 聚合筛选中心（_sj_view_filter）：关键词 + 排序条，复用 token 不写死 */ .sj-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: var(--spacing-md) 0 var(--spacing-lg); } .sj-filter-bar .sj-search-input { flex: 1 1 260px; } .sj-list-meta { color: var(--muted); font-size: var(--fs-sm); margin: var(--spacing-md) 0 var(--spacing-sm); } .sj-tagcloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .sj-tag-pill { display: inline-block; padding: 4px 14px; border-radius: var(--radius-full); font-size: var(--fs-sm); color: var(--ink); background: var(--bg-soft); border: 1px solid var(--line); } .sj-tag-pill:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; } .sj-tag-dyn { background: var(--accent-weak); border-color: transparent; color: var(--accent); } /* ---------- 朝代库 ---------- */ .sj-dynasty-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--spacing-md); margin-top: var(--spacing-lg); } .sj-dynasty { display: flex; flex-direction: column; gap: 6px; padding: var(--spacing-sm); background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow .15s, transform .15s; } .sj-dynasty:hover { box-shadow: var(--shadow, 0 1px 2px rgba(31,30,27,.03), 0 8px 24px rgba(31,30,27,.05)); transform: translateY(-2px); text-decoration: none; } .sj-dynasty-cover { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); } .sj-dynasty-name { font-family: var(--font-heading, "Noto Serif SC", serif); font-size: var(--fs-md); color: var(--ink); } .sj-dynasty-desc { font-size: var(--fs-xs); color: var(--muted); } /* ---------- 动态广场 ---------- */ .sj-feed { list-style: none; margin: var(--spacing-lg) 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .sj-feed-item { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); } .sj-feed-type { flex: none; } .sj-feed-title { color: var(--ink); font-size: var(--fs-sm); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sj-feed-title:hover { color: var(--accent); text-decoration: none; } .sj-feed-time { color: var(--muted); font-size: var(--fs-xs); flex: none; } /* ---------- 收藏卡片 ---------- */ .sj-fav-card { position: relative; } .sj-fav-remove { margin-top: var(--spacing-sm); border: 1px solid var(--line); background: var(--card-bg); color: var(--muted); border-radius: var(--radius-full); padding: 4px 14px; font-size: var(--fs-xs); cursor: pointer; font-family: inherit; } .sj-fav-remove:hover { color: var(--accent); border-color: var(--accent); } /* ---------- 相册时光长廊（瀑布流） ---------- */ .sj-masonry { columns: var(--album-tl-cols, 6); gap: var(--spacing-md); margin-top: var(--spacing-lg); } .sj-masonry-item { display: block; break-inside: avoid; margin-bottom: var(--spacing-md); border-radius: var(--radius-lg); overflow: hidden; position: relative; border: 1px solid var(--line); } .sj-masonry-item img { width: 100%; display: block; } .sj-masonry-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 12px 10px; font-size: var(--fs-sm); color: var(--on-accent); background: linear-gradient(transparent, var(--overlay-dark)); } .sj-masonry-item:hover { text-decoration: none; } /* 相册时光长廊：固定列数，随视口收窄（列数由 --album-tl-cols 统一控制） */ @media (max-width: 1280px) { :root { --album-tl-cols: 4; } } @media (max-width: 980px) { :root { --album-tl-cols: 3; } } @media (max-width: 720px) { :root { --album-tl-cols: 2; } } @media (max-width: 480px) { :root { --album-tl-cols: 1; } } /* ---------- 知识图谱 / 标签云 ---------- */ .sj-kg-block { margin-top: var(--spacing-xl); } .sj-kg-h { font-size: var(--fs-md); } /* ---------- 对比 ---------- */ .sj-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); margin-top: var(--spacing-lg); } .sj-compare-col { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--spacing-md); } .sj-compare-title { font-family: var(--font-heading, "Noto Serif SC", serif); font-size: var(--fs-md); color: var(--ink); display: block; margin-bottom: 8px; } .sj-compare-title:hover { color: var(--accent); text-decoration: none; } .sj-compare-cover { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); margin-bottom: 10px; } .sj-compare-body { font-size: var(--fs-sm); color: var(--muted); } /* ---------- AI 功能 ---------- */ .sj-ai-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--spacing-md); margin-top: var(--spacing-lg); } .sj-ai-card { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--spacing-lg); display: flex; flex-direction: column; gap: 8px; } .sj-ai-icon { width: 36px; height: 36px; border-radius: var(--radius); background: var(--accent-weak); } .sj-ai-name { font-family: var(--font-heading, "Noto Serif SC", serif); font-size: var(--fs-md); color: var(--ink); margin: 0; } .sj-ai-desc { color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; margin: 0; flex: 1; } .sj-ai-go { color: var(--accent); font-size: var(--fs-sm); } .sj-ai-go:hover { text-decoration: none; } @media (max-width: 1024px) { .tl-dual { grid-template-columns: 1fr; gap: var(--spacing-lg); } .tl-ctrl { flex-direction: column; align-items: stretch; justify-content: flex-start; } .sj-compare { grid-template-columns: 1fr; } } /* ===== Toast（原 sujian.js 内联 cssText 抽离，守禁六·零写死，2026-08-29） ===== */ .sj-toast { position: fixed; left: 50%; bottom: var(--toast-bottom); transform: translateX(-50%); background: var(--toast-bg); color: var(--on-accent); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-full); font-size: var(--fs-sm); z-index: 9999; max-width: 80vw; } /* ===== 骨架屏（加载态；token 化，prefers-reduced-motion 关闭 shimmer，守禁六零写死） ===== */ .sj-skeleton { --sk-bg: var(--bg-soft); --sk-shine: var(--accent-weak); position: relative; overflow: hidden; background: var(--sk-bg); border-radius: var(--radius); } .sj-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--sk-shine), transparent); animation: sj-shimmer 1.2s infinite; } @keyframes sj-shimmer { 100% { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .sj-skeleton::after { animation: none; } } .sj-skeleton--text { height: .85em; border-radius: var(--radius-sm); margin: .4em 0; } .sj-skeleton--circle { border-radius: 50%; aspect-ratio: 1; } .sj-skeleton--media { width: 100%; aspect-ratio: 3 / 2; } .sj-skeleton--block { height: 220px; } /* 灯箱媒体骨架占位（绝对定位覆盖在图位之上，图解码完由 JS 隐藏） */ .sj-lightbox-media .sj-skeleton { position: absolute; inset: 0; width: min(70vw, 560px); height: min(56vh, 420px); border-radius: var(--radius-lg); } /* 列表 / 卡片骨架占位（可复用：灯箱媒体外，列表加载态亦可复用 .sj-skeleton 词汇） */ .sj-skeleton--card { width: 100%; aspect-ratio: 3 / 4; } .sj-skeleton--line { width: 100%; height: .8em; border-radius: var(--radius-sm); margin: .5em 0; } .sj-skeleton--line.short { width: 60%; } /* 页面级导航骨架（命中站内链接时短暂呈现，提供加载态反馈；非死类：由 sujian.js 真实消费每次站内导航） */ .sj-page-loading { position: fixed; inset: 0; z-index: 9995; background: var(--bg-main); display: flex; flex-direction: column; gap: 14px; padding: calc(var(--sj-nav-h, 56px) + 24px) var(--spacing-lg) var(--spacing-lg); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease; } .sj-page-loading.show { opacity: 1; visibility: visible; pointer-events: auto; } .sj-page-loading .sj-pl-bar { max-width: var(--container-max); margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 12px; } .sj-page-loading .sj-pl-row { display: flex; gap: 14px; align-items: center; } .sj-page-loading .sj-pl-thumb { width: 96px; height: 96px; flex: 0 0 auto; } .sj-page-loading .sj-pl-lines { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; } @media (prefers-reduced-motion: reduce) { .sj-page-loading { transition: none; } } /* ===== 回到顶部（框架级；token 化，.show 显隐，reduce-motion 关过渡） ===== */ .sj-totop { position: fixed; right: 20px; bottom: 24px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--card-bg); color: var(--accent); font-size: 20px; line-height: 1; cursor: pointer; z-index: 9990; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s ease, transform .2s ease, background .15s ease, color .15s ease; box-shadow: var(--shadow, 0 2px 8px rgba(31,30,27,.12)); } .sj-totop.show { opacity: 1; transform: translateY(0); pointer-events: auto; } .sj-totop:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } @media (prefers-reduced-motion: reduce) { .sj-totop { transition: none; } } /* ===== 登录 / 注册弹窗（照搬原型 .sj-modal，颜色全走 --token，守禁六） ===== */ .sj-modal-mask { position:fixed; inset:0; background:var(--scrim-mid); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; z-index:90; opacity:0; transition:opacity .2s ease; } .sj-modal-mask.show { display:flex; opacity:1; } .sj-modal { width:min(92vw,560px); max-height:86vh; background:var(--bg-main); border-radius:var(--radius-card); box-shadow:var(--shadow-lg); display:flex; flex-direction:column; overflow:hidden; transform:translateY(10px) scale(.98); transition:transform .2s ease; } .sj-modal-mask.show .sj-modal { transform:translateY(0) scale(1); } .sj-modal-head { display:flex; align-items:center; gap:10px; padding:16px 20px; border-bottom:1px solid var(--line); flex-shrink:0; } .sj-modal-head h3 { font-family:var(--serif); font-size:16px; font-weight:700; margin:0; flex:1; color:var(--ink); } .sj-modal-close { border:none; background:var(--bg-left); width:32px; height:32px; border-radius:50%; cursor:pointer; color:var(--ink-2); font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center; transition:var(--transition-fast); } .sj-modal-close:hover { background:var(--bg-left-hover); color:var(--ink); } .sj-modal-body { padding:18px 20px; overflow-y:auto; } /* 弹窗内登录 / 注册表单 */ .sj-auth-error { margin-bottom:12px; padding:10px 12px; background:var(--accent-weak); color:var(--accent); border:1px solid var(--accent); border-radius:var(--radius-sm); font-size:13px; line-height:1.5; } .sj-auth-tabs { display:flex; gap:8px; margin-bottom:16px; border-bottom:1px solid var(--line); } .sj-auth-tab { flex:1; border:none; background:none; padding:10px 0; cursor:pointer; font-family:var(--sans); font-size:14px; color:var(--ink-2); border-bottom:2px solid transparent; margin-bottom:-1px; transition:var(--transition-fast); } .sj-auth-tab.is-active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; } .sj-auth-panel { display:flex; flex-direction:column; gap:12px; } .sj-auth-panel[hidden] { display:none; } .sj-auth-field { display:flex; } .sj-auth-field input { width:100%; height:44px; border:1px solid var(--line); border-radius:var(--radius); padding:0 14px; font-family:var(--sans); font-size:14px; color:var(--ink); background:var(--bg-main); outline:none; transition:var(--transition-fast); } .sj-auth-field input:focus { border-color:var(--accent); } .sj-auth-row { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); } .sj-auth-row input { width:auto; } .sj-auth-agree { display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color:var(--ink-2); line-height:1.5; } .sj-auth-agree input { width:auto; margin-top:2px; } .sj-auth-agree a { color:var(--accent); } .sj-auth-submit { height:44px; border:none; border-radius:var(--radius-pill); background:var(--accent); color:var(--on-accent); font-family:var(--sans); font-size:15px; font-weight:600; cursor:pointer; transition:var(--transition-fast); } .sj-auth-submit:hover { background:var(--accent-dark); } .sj-auth-submit:disabled { opacity:.6; cursor:not-allowed; } .sj-auth-switch { text-align:center; font-size:13px; color:var(--ink-2); margin:2px 0 0; } .sj-auth-switch a { color:var(--accent); font-weight:600; } @media (prefers-reduced-motion: reduce) { .sj-modal-mask, .sj-modal, .sj-modal-close, .sj-auth-tab, .sj-auth-field input, .sj-auth-submit { transition:none; } } /* ===== 左下角用户菜单（已登录，点击用户卡弹出；颜色全走 --token，守禁六） ===== */ .sj-user-pop { position: fixed; z-index: 1300; width: min(86vw, 256px); background: var(--bg-main); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-lg); padding: 8px; color: var(--ink); font-family: var(--font-body); } .sj-user-pop[hidden] { display: none; } .sj-user-pop-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; } .sj-user-pop-av { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: var(--bg-soft); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--ink-3); } .sj-user-pop-av img { width: 100%; height: 100%; object-fit: cover; } .sj-user-pop-meta { display: flex; flex-direction: column; min-width: 0; } .sj-user-pop-name { font-weight: 600; font-size: 14px; color: var(--ink); } .sj-user-pop-sub { font-size: var(--fs-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sj-user-pop-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-size: 14px; line-height: 1; cursor: pointer; } .sj-user-pop-item .ic { width: 18px; height: 18px; color: var(--ink-2); flex: 0 0 auto; } .sj-user-pop-item:hover { background: var(--bg-left); color: var(--ink); } .sj-user-pop-item:hover .ic { color: var(--accent); } .sj-user-pop-item--danger { color: var(--accent); } .sj-user-pop-item--danger .ic { color: var(--accent); } .sj-user-pop-item--danger:hover { background: var(--accent-weak); color: var(--accent); } .sj-user-pop-sep { height: 1px; background: var(--line); margin: 6px 4px; } @media (prefers-reduced-motion: reduce) { .sj-user-pop { transition: none; } } /* ===== 右栏底部：元信息链接 + 版权（与左栏「关于」组共用 sj_meta_links()；颜色全走 --token，守禁六） ===== */ .sj-right-footer { margin-top: auto; /* 推到右栏底部（.sj-right-inner 是 flex column） */ flex: 0 0 auto; padding: var(--spacing-md) var(--spacing-sm); border-top: 1px solid var(--line); background: transparent; } .sj-right-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 8px; } .sj-right-meta-link { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: var(--fs-xs); text-decoration: none; line-height: 1.6; transition: color .15s; } .sj-right-meta-link .sj-rm-ic { width: 13px; height: 13px; flex: 0 0 auto; opacity: .8; } .sj-right-meta-link:hover { color: var(--accent); text-decoration: none; } .sj-right-copy { color: var(--faint); font-size: var(--fs-xs); line-height: 1.7; } .sj-right-copy p { margin: 0; } .sj-right-copy-main { color: var(--faint); } /* v19.20.11：版权主行也用 --faint（用户原话「文字颜色变浅」） */ .sj-right-copy-beian { color: var(--faint); }