/* ========================================================================== msrpg.com 设计系统 · 主题变量 默认 = 冷调浅灰（青玉主色）；[data-theme="dark"] = 中性石墨灰 换主色：改下面的 --accent 系列，或在 site.js 写 theme.accent（见 README 第三节） ========================================================================== */ :root{ /* 底色 / 面：冷调灰，不用暖米白 */ --bg:#eceff2; --bg-soft:#f7f9fa; --panel:#ffffff; --panel-2:#f1f4f6; --panel-3:#e6ebee; --line:#dbe1e6; --line-2:#c2ccd3; /* 文字：冷调中性，久看不累 */ --ink:#17202a; --body:#46525e; --muted:#616d78; /* 主色：青玉绿（可整体替换） */ --accent:#12695f; --accent-hi:#0b4f47; --accent-dim:#b7d3cf; --accent-soft:rgba(18,105,95,.08); --on-accent:#ffffff; /* 语义色 */ --blood:#a8452e; --jade:#2e7d4f; --azure:#2f5d8a; --warn:#8a6516; --danger:#b3412f; --radius:10px; --radius-lg:16px; --shadow:0 14px 34px rgba(28,38,48,.10); --shadow-sm:0 4px 14px rgba(28,38,48,.06); --maxw:1240px; --nav-h:58px; /* 操作控件（按钮/标签页）随视口连续缩放：窄了自动变小，避免撑破布局 */ --ctl-fs:clamp(11.5px,.34vw + 8.6px,13.5px); --ctl-fs-sm:clamp(10.5px,.3vw + 8px,12.5px); --ctl-ph:clamp(8px,.42vw + 5.4px,13px); --ctl-h:clamp(30px,.3vw + 28px,34px); --font-d:"Noto Serif SC","Source Han Serif SC","Songti SC",Georgia,serif; --font-b:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif; } [data-theme="dark"]{ --bg:#171a1d; --bg-soft:#1c2024; --panel:#20242a; --panel-2:#272c32; --panel-3:#2f353c; --line:#2d3339; --line-2:#3e454d; --ink:#e8ebee; --body:#b0b7be; --muted:#858d95; --accent:#6fb2a3; --accent-hi:#8fc9bc; --accent-dim:#2f4a46; --accent-soft:rgba(111,178,163,.12); --on-accent:#0d1a18; --blood:#d98a70; --jade:#7cbb9a; --azure:#8ab0d4; --warn:#d3b167; --danger:#d97a68; --shadow:0 18px 40px rgba(0,0,0,.42); --shadow-sm:0 4px 14px rgba(0,0,0,.3); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--bg);color:var(--body); font:15px/1.75 var(--font-b); -webkit-font-smoothing:antialiased; background-image:radial-gradient(900px 380px at 50% -8%,var(--accent-soft),transparent 72%); background-repeat:no-repeat; } h1,h2,h3,h4{font-family:var(--font-d);color:var(--ink);margin:0;line-height:1.3;font-weight:700} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} ::selection{background:var(--accent);color:var(--on-accent)} /* ---------- 布局 ---------- */ .wrap{width:min(var(--maxw),100% - 40px);margin:0 auto} .narrow{width:min(860px,100% - 40px);margin:0 auto} .section{padding:52px 0 8px} .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap} .section-head h2{font-size:24px;letter-spacing:.02em} .section-head .kicker{font:800 11px/1 var(--font-b);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;display:block} .section-head p{margin:6px 0 0;color:var(--muted);font-size:13.5px} .more-link{font-size:13px;font-weight:750;color:var(--accent);white-space:nowrap} .more-link:hover{color:var(--accent-hi)} .grid{display:grid;gap:14px} .cols-2{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))} .cols-3{grid-template-columns:repeat(auto-fill,minmax(min(272px,100%),1fr))} .cols-4{grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr))} .hr{height:1px;background:var(--line);margin:38px 0} /* ---------- 顶栏 ---------- */ .topbar{ position:sticky;top:0;z-index:60;min-height:var(--nav-h); backdrop-filter:blur(14px); background:color-mix(in srgb,var(--bg) 90%,transparent); border-bottom:1px solid var(--line); } .topbar-in{width:min(var(--maxw),100% - 40px);margin:0 auto;display:flex;align-items:center;gap:16px;min-height:var(--nav-h)} .brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;padding:8px 0} .brand-mark{width:34px;height:34px;flex:0 0 auto;border-radius:9px;border:1px solid var(--line-2);background:var(--panel-2);display:grid;place-items:center;color:var(--accent)} .brand-mark svg{width:19px;height:19px} .brand-txt{display:flex;flex-direction:column;line-height:1.1} .brand-title{font:800 16px/1.1 var(--font-d);color:var(--ink);letter-spacing:.03em} .brand-sub{font-size:10.5px;font-weight:750;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)} .nav{display:flex;align-items:center;gap:2px;margin-left:auto;flex-wrap:wrap} .nav > a{display:inline-flex;align-items:center;height:var(--ctl-h);padding:0 var(--ctl-ph);border-radius:8px;font-size:var(--ctl-fs);font-weight:700;color:var(--body);white-space:nowrap} .nav a:hover{background:var(--panel-2);color:var(--ink)} .nav a.on{color:var(--accent);background:var(--accent-soft)} .tb-btn{display:inline-flex;align-items:center;gap:7px;height:var(--ctl-h);padding:0 calc(var(--ctl-ph) - 1px);border:1px solid var(--line-2);border-radius:999px;background:var(--panel);color:var(--body);font:700 var(--ctl-fs-sm) var(--font-b);cursor:pointer;flex:0 0 auto} .tb-btn:hover{border-color:var(--accent-dim);color:var(--ink)} .tb-btn kbd{font:700 calc(var(--ctl-fs-sm) - 2px) var(--font-b);padding:2px 5px;border:1px solid var(--line-2);border-radius:4px;color:var(--muted)} @media(max-width:900px){.tb-btn kbd{display:none}.nav{gap:0}.nav > a{padding:0 calc(var(--ctl-ph) - 2px)}} /* ≤900：隐藏 Ctrl K、收窄导航间距与内边距，避免 768px 时导航折成 2 行（2026-09-14）*/ @media(max-width:760px){.brand-sub{display:none}} /* ---------- 门户 Hero ---------- */ .hero-doc{padding:70px 0 44px;text-align:center} .hero-doc .seal{display:inline-flex;align-items:center;gap:9px;padding:6px 14px;border:1px solid var(--line-2);border-radius:999px;font-size:12px;font-weight:750;color:var(--accent);background:var(--panel);margin-bottom:22px} .hero-doc h1{font-size:clamp(30px,5.2vw,52px);letter-spacing:.03em} .hero-doc h1 em{font-style:normal;color:var(--accent)} .hero-doc .lead{max-width:640px;margin:18px auto 0;font-size:15.5px;color:var(--body)} .hero-doc .rule{width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent);margin:26px auto} .btn-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 calc(var(--ctl-ph) + 7px);border-radius:999px;border:1px solid var(--line-2);background:var(--panel);color:var(--ink);font:750 var(--ctl-fs) var(--font-b);cursor:pointer} .btn:hover{border-color:var(--accent-dim)} .btn-primary{background:var(--accent);color:var(--on-accent);border-color:transparent} .btn-primary:hover{background:var(--accent-hi);border-color:transparent} /* ---------- 子站 Hero ---------- */ .hero-band{position:relative;border-bottom:1px solid var(--line);padding:44px 0 38px} .hero-band .badge-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px} .hero-band h1{font-size:clamp(28px,4.4vw,42px);letter-spacing:.04em} .hero-band .sub{margin:12px 0 0;max-width:680px;color:var(--body)} .hero-band .quick{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px} /* ---------- 卡片 ---------- */ .card{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel);overflow:hidden;transition:.16s;box-shadow:var(--shadow-sm);display:flex;flex-direction:column} .card:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:var(--shadow)} .card-body{padding:16px 17px 18px;display:flex;flex-direction:column;flex:1 1 auto;min-height:0} .card h3{font-size:16.5px;letter-spacing:.02em} .card p{margin:8px 0 0;font-size:14px;color:var(--muted)} /* 页脚（查看 / 阅读 标签 + 作者·日期 / 灰色小字）一律贴到卡片底部 —— 2026-09-13 用户：同一行卡片高度本来就相等，但描述长短不同会把页脚顶得上下错乱。 */ .card .foot{margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px} .card .thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(180deg,var(--panel-2),color-mix(in srgb,var(--accent) 7%,var(--panel-2)));border-bottom:1px solid var(--line);display:grid;place-items:center;color:var(--body);font:750 12px var(--font-b);letter-spacing:.12em} .site-card .thumb{aspect-ratio:16/5} /* 攻略卡片 · 可选缩略图与章节小标（P1/A1，2026-09-14 全站统一；不带 icon/chapter 的卡片不受影响） */ .card.has-thumb{flex-direction:row;align-items:stretch} .card.has-thumb .thumb{flex:0 0 132px;width:132px;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--line)} .card.has-thumb .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center} .card .card-ch{font-size:12px;font-weight:700;color:var(--accent);margin-right:6px;letter-spacing:.02em} @media(max-width:600px){.card.has-thumb .thumb{flex-basis:104px;width:104px}} /* 图鉴条目卡 */ .entry{display:flex;gap:12px;padding:13px;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;transition:.15s;width:100%;font-family:inherit;box-shadow:var(--shadow-sm)} .entry:hover{border-color:var(--accent-dim);background:var(--panel)} .entry-ic{width:44px;height:44px;flex:0 0 auto;border-radius:9px;border:1px solid var(--line);background:var(--panel-2);display:grid;place-items:center;font:800 12px var(--font-b);color:var(--accent);letter-spacing:.04em} .entry-main{min-width:0;flex:1} .entry-name{display:flex;align-items:center;gap:8px;font:750 14.5px var(--font-b);color:var(--ink);flex-wrap:wrap} .entry-name .sub{font-weight:600;font-size:12.5px;color:var(--muted)} .entry-desc{margin-top:5px;font-size:13px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* ---------- 标签 / 徽章 ---------- */ .tag{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--body);font:700 11.5px var(--font-b)} .tag-accent{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 42%,transparent);background:color-mix(in srgb,var(--accent) 9%,transparent)} .tag-jade{color:var(--jade);border-color:color-mix(in srgb,var(--jade) 40%,transparent);background:color-mix(in srgb,var(--jade) 9%,transparent)} .tag-warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 9%,transparent)} .tag-list{display:flex;gap:6px;flex-wrap:wrap;align-items:center} /* 卡片右上角的标签组（2026-09-16：一个卡片可以有多枚标签，如英雄 = 主属性 + 自身属性） 以前只有一枚 .entry-tag（各子站 theme.css 里绝对定位到右上角），这里包一层让它能并排 */ .entry-tags{position:absolute;top:10px;right:10px;display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;max-width:62%} .entry-tags .entry-tag{position:static;top:auto;right:auto} .chips{display:flex;gap:8px;flex-wrap:wrap;width:100%;align-items:flex-start} /* 分组 chips 的「两段式」规范（2026-09-15）：标签固定成左列 + 内层换行区—— 换行只在 .chips-list 里发生，所以左侧永远与标签列右侧对齐（不会钻到标签下），窄屏也不会溢出到文本区 */ .chips-label{flex:0 0 auto;min-width:4.6em;align-self:flex-start;line-height:calc(var(--ctl-h) - 4px)} .chips-list{display:flex;gap:8px;flex-wrap:wrap;flex:1 1 0;min-width:0;align-items:center} .chips .chip{min-width:3.4em;justify-content:center;text-align:center} .chip{height:calc(var(--ctl-h) - 4px);padding:0 var(--ctl-ph);border-radius:999px;border:1px solid var(--line-2);background:var(--panel);color:var(--body);font:700 var(--ctl-fs-sm) var(--font-b);cursor:pointer} .chip:hover{color:var(--ink);border-color:var(--accent-dim)} .chip.on{background:var(--accent);border-color:transparent;color:var(--on-accent)} /* ---------- 筛选栏 ---------- */ .toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:14px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel);position:sticky;top:calc(var(--nav-h) + 8px);z-index:40;box-shadow:var(--shadow-sm)} .search-field{position:relative;flex:1 1 240px;min-width:200px} .search-field svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--muted)} input[type=text],input[type=search],select{ width:100%;height:38px;padding:0 12px;border:1px solid var(--line-2);border-radius:9px; background:var(--bg-soft);color:var(--ink);font:700 13.5px var(--font-b);outline:none } .search-field input{padding-left:34px} input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} select{cursor:pointer;flex:0 0 auto;width:auto;min-width:118px} .count{font:750 12.5px var(--font-b);color:var(--muted);margin-left:auto;white-space:nowrap} .crumb{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--muted);padding:18px 0 0;flex-wrap:wrap} .crumb a:hover{color:var(--accent)} .crumb b{color:var(--body);font-weight:750} .empty{padding:60px 20px;text-align:center;color:var(--muted);border:1px dashed var(--line-2);border-radius:var(--radius-lg)} /* ---------- 详情抽屉 ---------- */ .drawer-mask{position:fixed;inset:0;background:rgba(24,20,14,.42);opacity:0;pointer-events:none;transition:.22s;z-index:90} .drawer-mask.on{opacity:1;pointer-events:auto} .drawer{ position:fixed;top:0;right:0;height:100%;width:min(560px,100%);z-index:100; background:var(--bg-soft);border-left:1px solid var(--line-2); transform:translateX(100%);transition:transform .26s cubic-bezier(.22,1,.36,1); display:flex;flex-direction:column;box-shadow:-20px 0 48px rgba(45,38,28,.18) } [data-theme="dark"] .drawer{box-shadow:-20px 0 48px rgba(0,0,0,.5)} .drawer.on{transform:none} .drawer-head{display:flex;gap:14px;align-items:flex-start;padding:20px 22px;border-bottom:1px solid var(--line);background:var(--panel)} .drawer-head h2{font-size:21px} .drawer-body{padding:20px 22px 56px;overflow-y:auto} .drawer-close{margin-left:auto;width:34px;height:34px;flex:0 0 auto;border-radius:9px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--body);cursor:pointer;font-size:17px;line-height:1} .drawer-close:hover{color:var(--ink);border-color:var(--accent-dim)} .kv{display:grid;grid-template-columns:96px 1fr;gap:6px 14px;padding:14px 0;border-bottom:1px dashed var(--line)} .kv dt{color:var(--muted);font-size:12.5px;font-weight:750} .kv dd{margin:0;color:var(--ink);font-weight:650;font-size:13.5px} .block{margin-top:22px} .block h4{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:10px} .skill-row{display:flex;gap:12px;padding:12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);margin-bottom:8px} .skill-key{width:30px;height:30px;flex:0 0 auto;border-radius:7px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);color:var(--accent);display:grid;place-items:center;font:800 13px var(--font-b)} .skill-row strong{color:var(--ink);font-size:14px} .skill-row p{margin:4px 0 0;font-size:12.5px;color:var(--muted)} /* 技能名那一行：名字 + 右侧的「技能标签」（地图文本里的 |c…技能标签：…|r，用户 2026-09-13） */ .sk-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .skill-row p.skill-meta{margin:3px 0 0;font-size:12px;color:var(--body);letter-spacing:.2px} .fold-body p.fold-meta{margin:0 0 6px;font-size:12.5px;color:var(--body)} /* 晋升（2026-09-19 用户）：独立于皮肤 / 升格的新增幅系统。折叠块内三段： 成长属性 / 技能成长数据 / 终末难度增幅；数值 +N 用主题色强调 */ .promo-row{margin:5px 0 0;font-size:13.5px;color:var(--body)} .promo-row b.promo-v{color:var(--accent);font-weight:800} .promo-row.promo-ex{margin-top:9px;font-size:12.8px;color:var(--muted)} /* 标签不带颜色 —— 用户 2026-09-13：照英雄的「标签：【范围】、【概率】」那种朴素写法 */ .sk-tag{font-size:12.5px;font-weight:400;color:var(--muted);white-space:nowrap} ul.plain{margin:0;padding-left:18px} ul.plain li{margin:6px 0;font-size:13.5px} /* ---------- 攻略正文 ---------- */ .prose{font-size:15.5px;line-height:1.85;color:var(--body)} .prose h2{font-size:22px;margin:38px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)} .prose h3{font-size:17px;margin:26px 0 8px} .prose p{margin:12px 0} .prose ul,.prose ol{padding-left:22px} .prose li{margin:6px 0} .prose code{background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:13px;color:var(--accent-hi)} .prose blockquote{margin:16px 0;padding:12px 16px;border-left:3px solid var(--accent-dim);background:var(--panel-2);border-radius:0 var(--radius) var(--radius) 0;color:var(--body)} .prose img{border-radius:var(--radius);border:1px solid var(--line);margin:16px 0} .prose table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px} .prose th,.prose td{border:1px solid var(--line);padding:9px 12px;text-align:left} .prose th{background:var(--panel-2);color:var(--ink)} /* 窄屏下宽表格（如「攻击类型 × 护甲类型」矩阵）改为横向滚动，不让它把页面撑破（2026-09-14） */ @media(max-width:820px){.prose table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}} .article-meta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:13px;margin-top:14px} /* ---------- 时间线 ---------- */ .timeline{position:relative;padding-left:26px} .timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:1px;background:var(--line-2)} .tl-item{position:relative;padding-bottom:30px} .tl-item::before{content:"";position:absolute;left:-24px;top:7px;width:11px;height:11px;border-radius:50%;background:var(--bg);border:2px solid var(--line-2)} .tl-item.now::before{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)} .tl-ver{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap} .tl-ver strong{font:800 18px var(--font-d);color:var(--ink)} .tl-ver time{font-size:12.5px;color:var(--muted)} /* ---------- 全局搜索 ---------- */ .search-mask{position:fixed;inset:0;background:rgba(24,20,14,.45);z-index:110;display:none;padding-top:12vh} [data-theme="dark"] .search-mask{background:rgba(0,0,0,.6)} .search-mask.on{display:block} .search-box{width:min(680px,92vw);margin:0 auto;background:var(--bg-soft);border:1px solid var(--line-2);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden} .search-box-top{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)} .search-box-top input{border:0;background:transparent;height:34px;font-size:15.5px;box-shadow:none!important} .search-hint{font:750 11px var(--font-b);color:var(--muted);white-space:nowrap} .search-res{max-height:56vh;overflow-y:auto;padding:8px} .sr{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:9px;cursor:pointer} .sr:hover,.sr.sel{background:var(--panel-2)} .sr-kind{width:52px;flex:0 0 auto;font:800 10.5px var(--font-b);letter-spacing:.1em;color:var(--accent);text-transform:uppercase} .sr-name{color:var(--ink);font-weight:700;font-size:14px} /* .sr-id 已废弃：搜索结果不展示任何内部 ID / 代号（2026-09-14） */ /* 手机端「返回上一层」悬浮胶囊（app.js 注入 #msrpg-up）：固定在右下角，贴着系统返回键的位置 */ .upfab{position:fixed;right:14px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:90; display:inline-flex;align-items:center;gap:5px;padding:10px 15px 10px 11px;border-radius:999px; background:var(--accent);color:#fff;font:600 13px/1 var(--font-b);box-shadow:0 8px 22px rgba(0,0,0,.26); text-decoration:none;transition:opacity .18s,transform .18s} .upfab:active{transform:scale(.95)} .upfab.hide{opacity:0;pointer-events:none;transform:translateY(6px)} .sr-sum{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .search-foot{padding:9px 16px;border-top:1px solid var(--line);color:var(--muted);font-size:11.5px;display:flex;gap:16px;flex-wrap:wrap} /* ---------- 页脚 ---------- */ .footer{margin-top:70px;border-top:1px solid var(--line);background:var(--bg-soft);padding:38px 0 30px;font-size:13px} .footer-grid{display:grid;grid-template-columns:1.4fr repeat(2,minmax(120px,auto));gap:28px} .footer h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px} .footer ul{list-style:none;margin:0;padding:0} .footer li{margin:7px 0} .footer a:hover{color:var(--accent)} .footer-bottom{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:12.5px} .notice-legal{font-size:12px;color:var(--muted);line-height:1.8} @media(max-width:720px){.footer-grid{grid-template-columns:1fr 1fr}} @media(max-width:520px){.footer-grid{grid-template-columns:1fr}} /* ========================================================================== 门户首页：右上角分组菜单 · 中间切换 · 地图卡片 （放在文件末尾，优先级高于上面的基础样式） ========================================================================== */ .grpnav{gap:4px} /* 提示文字 + 系列切换按钮：同一行、左起紧跟 */ .head-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:8px} .head-row p{margin:0} .navbtn{display:inline-flex;align-items:center;gap:6px;height:var(--ctl-h);padding:0 var(--ctl-ph);border:1px solid transparent;border-radius:9px;background:transparent;color:var(--body);font:750 var(--ctl-fs) var(--font-b);cursor:pointer;white-space:nowrap;text-decoration:none} .navbtn:hover{background:var(--panel-2);color:var(--ink)} .navbtn[aria-expanded="true"]{background:var(--accent-soft);color:var(--accent)} .navgrp{position:relative} .caret{width:6px;height:6px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);opacity:.65;margin-top:-3px} .navpanel{position:absolute;top:calc(100% + 10px);right:0;min-width:252px;max-width:min(420px,86vw);padding:8px;background:var(--bg-soft);border:1px solid var(--line-2);border-radius:var(--radius-lg);box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s;z-index:70} .navgrp.open .navpanel{opacity:1;visibility:visible;transform:none} .navpanel::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px} .npitem{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;color:var(--ink);font-size:13.5px;font-weight:700;width:100%} .npitem:hover{background:var(--panel-2)} .npitem .npname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .npitem .npver{margin-left:auto;font:700 11px var(--font-b);color:var(--muted)} .npitem .npnote{font:700 11px var(--font-b);color:var(--muted);flex:0 0 auto} .npitem.off{color:var(--muted);cursor:not-allowed} .npitem.off:hover{background:transparent} .npempty{padding:12px;color:var(--muted);font-size:12.5px;text-align:center} .segbar{display:inline-flex;align-items:center;gap:2px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--panel);box-shadow:var(--shadow-sm);max-width:100%;flex-wrap:wrap} .seg{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--ctl-h);padding:0 calc(var(--ctl-ph) + 3px);border:0;border-radius:999px;background:transparent;color:var(--body);font:750 var(--ctl-fs) var(--font-b);cursor:pointer;white-space:nowrap} .seg:hover{color:var(--ink);background:var(--panel-2)} .seg.on{background:var(--accent);color:var(--on-accent)} .seg-grp{position:relative;display:flex} .seg-grp>.navpanel{top:calc(100% + 12px)} .seg-grp.open>.seg{background:var(--panel-2);color:var(--ink)} .seg-grp>.seg .caret{margin-left:2px} .mapcard .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center} .mapcard.off{opacity:.62;cursor:default} .mapcard.off:hover{transform:none;box-shadow:var(--shadow-sm);border-color:var(--line)} .mapcard .desc{position:relative;margin:8px 0 0;max-height:calc(1.6em * 2.5);overflow:hidden;font-size:14px;color:var(--muted)} .mapcard .desc::after{content:"";position:absolute;right:0;bottom:0;width:3em;height:1.6em;background:linear-gradient(90deg,transparent,var(--panel) 72%)} .tag-mute{color:var(--muted);border-color:var(--line);background:var(--panel-2)} @media(max-width:760px){ /* 手机上按钮恢复成好点的触控尺寸（因为导航已单独占一行，不会撑破） */ :root{--ctl-fs:12.5px;--ctl-fs-sm:12px;--ctl-ph:11px;--ctl-h:34px} .topbar-in{flex-wrap:wrap;padding:6px 0 10px} .grpnav{margin-left:0;width:100%;order:3;flex-wrap:wrap;gap:2px} .navpanel{right:0} /* 手机端：二级菜单铺满整行、贴在所在栏下方，避免超出屏幕 */ .grpnav{position:relative} .grpnav .navgrp{position:static} .grpnav .navpanel{left:0;right:0;width:auto;min-width:0;max-width:none} .segbar{position:relative} .segbar .seg-grp{position:static} .segbar .navpanel{left:0;right:0;width:auto;min-width:0;max-width:none} /* 手机端：切换按钮另起一行，放在提示文字下面 */ .head-row{display:block;margin-top:0} .head-row .segbar{display:flex;width:100%;margin-top:14px;border-radius:var(--radius-lg)} } .mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px} .muted{color:var(--muted)}.small{font-size:12.5px} .center{text-align:center} .hide{display:none!important} /* ========================================================================== 系列页（/sd120000/ 这种系列首页）与门户里的系列入口 ========================================================================== */ .seg-link{font:750 var(--ctl-fs-sm) var(--font-b);color:var(--accent);white-space:nowrap;text-decoration:none;padding:0 2px} .seg-link:hover{text-decoration:underline} .npitem-lead{color:var(--accent);font-weight:800;margin-bottom:6px;border-bottom:1px dashed var(--line)} .npitem-lead:hover{background:var(--accent-soft)} .crumb{display:flex;align-items:center;gap:8px;padding:22px 0 0;font-size:12.5px;color:var(--muted)} .crumb a{color:var(--muted)} .crumb a:hover{color:var(--accent)} .crumb .sep{opacity:.5} .crumb .cur{color:var(--ink);font-weight:750} .series-hero{padding:22px 0 0;border-bottom:1px solid var(--line)} .series-hero .seal{display:inline-flex;align-items:center;gap:9px;padding:6px 14px;border:1px solid var(--line-2);border-radius:999px;font-size:12px;font-weight:750;color:var(--accent);background:var(--panel);margin-top:18px} .series-hero h1{margin-top:16px;font-size:clamp(28px,4.6vw,44px);letter-spacing:.03em} .series-hero .lead{max-width:680px;margin:16px 0 0;font-size:15.5px;color:var(--body)} .series-stats{padding:20px 0 22px;font:750 12.5px var(--font-b);color:var(--muted);letter-spacing:.02em} .author-card{padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel);box-shadow:var(--shadow-sm)} .author-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))} .author-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .author-name{font:800 17px var(--font-b);color:var(--ink);letter-spacing:.02em} .author-intro{margin:12px 0 0;font-size:14px;color:var(--body);line-height:1.72} .clamp3{display:-webkit-box;line-clamp:3;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* ===== 2026-09-12 用户提的这批细节：分享提示 / 弹窗底部提示 / 手机端顶部收窄 ===== */ #msrpg-toast { position: fixed; left: 50%; bottom: 12%; transform: translate(-50%, 12px); z-index: 9999; background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 999px; font-size: 13.5px; box-shadow: 0 10px 30px rgba(0, 0, 0, .22); opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s; } #msrpg-toast.on { opacity: 1; transform: translate(-50%, 0); } /* 信息弹窗最下面那行提示 */ .drawer-hint { margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--muted); text-align: center; } /* 装备抽屉「来源：在【支线-烈火】内获得」里的任务入口（用户 2026-09-13）—— 点一下开任务抽屉（和更新日志里的任务按钮同一套） */ .q-link { color: var(--accent); cursor: pointer; border-bottom: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); } .q-link:hover { color: var(--accent-hi); border-bottom-color: var(--accent); } @media (max-width: 760px) { /* 手机端口径（用户 2026-09-12）：顶栏只留 分享 / 搜索 / 昼夜 三个按钮，站点导航那排按钮一律收起来 （子站页下面本来就有 5 个页签；首页中部的系列页签也够用）——以前只对「有 .page-tabs 的页」生效， 首页在手机上还会把 首页/圣典/其他 那排按钮露出来。 */ .nav { display: none; } /* 手机端首页：顶部 logo + 大标题那块整体缩小，浏览重心上移 */ .hero-doc { padding: 30px 0 20px; } .hero-doc .seal { padding: 5px 12px; font-size: 11.5px; } .hero-doc h1 { font-size: clamp(22px, 6.4vw, 32px); } .hero-doc .lead { margin-top: 10px; font-size: 13.5px; line-height: 1.7; } .hero-doc .rule { margin: 14px auto; } .brand-mark { width: 30px; height: 30px; } .brand-mark svg { width: 17px; height: 17px; } .brand-title { font-size: 15px; } } /* ================= 手机端适配补丁（2026-09-13，用户反馈：文字被切 / 标签一排排很乱）================= 只新增规则、不改上面任何一条；要还原删掉本段即可。 */ /* 1) 地图卡片的描述：原来 max-height ≈2.5 行 + 渐变遮罩 → 第 3 行被切一半。 改成干净的多行截断（行尾自带「…」），任何宽度都不会出现半行字。 */ .mapcard .desc { max-height: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .mapcard .desc::after { content: none; } @media (max-width: 760px) { /* 2) 文字整体收一档：手机上原来偏大，行一多就装不下（并保证有「…」或完整） */ .entry-desc { font-size: 12.5px; line-height: 1.55; } .entry-name { font-size: 14.5px; } .mapcard .desc { font-size: 12.5px; line-height: 1.6; -webkit-line-clamp: 2; } .section-head h2 { font-size: 19px; } .page-head h1 { font-size: 26px; } .page-head p { font-size: 14px; } .crumb { font-size: 12.5px; } .prose { font-size: 15px; } /* 3) 筛选标签：矮一档 / 小一档 / 缝窄一档（手机上原来 6 行，现在 3~4 行） */ .chips { gap: 6px; } .chips-label { font-size: 12.5px; } .chip { height: 30px; padding: 0 10px; font-size: 12.5px; } /* 4) 页签与工具行：别让按钮挤在一起 */ .page-tabs { gap: 8px; } .page-tabs .btn { height: 36px; padding: 0 12px; font-size: 13px; } .toolbar { padding: 10px; gap: 8px; } .toolbar .count { font-size: 12px; } .search-field input { font-size: 13.5px; } /* 5) 卡片内边距收一档，少占地方 */ .card { padding: 14px; } .series-card, .mapcard { padding: 12px; } } /* ===== 更新日志里的实体按钮（装备 / 任务 / 角色）—— 通用规格（用户 2026-09-14） 所有子站共用，以终末圣典 zmsd120100 的日志按钮为准： 红=增强 / 深灰实心=削弱 / 绿=辨不清 / 绿(q)=主线章节·支线名（点了去攻略页）。 不要往子站 theme.css 里再写一份副本。渲染见 assets/app.js 的 linkEnt()/entTag()/entIcon()。 ===== */ .cl-ent { display: inline-block; padding: 0 7.25px; border: 0; border-radius: 3px; font-size: 14.6px; font-weight: 600; line-height: 1.7; cursor: pointer; transition: background .15s, box-shadow .15s; white-space: nowrap; } .cl-ent.up { background: rgba(244, 111, 96, .13); color: #c93a26; box-shadow: inset 0 0 0 1px rgba(244, 111, 96, .38); } .cl-ent.up:hover { background: rgba(244, 111, 96, .24); } .cl-ent.down { background: #5b6672; color: #f2f5f7; box-shadow: inset 0 0 0 1px #4b5560; } .cl-ent.down:hover { background: #4b5560; } .cl-ent.mid { background: rgba(46, 160, 120, .13); color: #1d7d5c; box-shadow: inset 0 0 0 1px rgba(46, 160, 120, .38); } .cl-ent.mid:hover { background: rgba(46, 160, 120, .24); } .cl-ent.q { background: rgba(46, 160, 120, .13); color: #1d7d5c; box-shadow: inset 0 0 0 1px rgba(46, 160, 120, .38); } .cl-ent.q:hover { background: rgba(46, 160, 120, .24); } [data-theme="dark"] .cl-ent.up { background: rgba(244, 111, 96, .2); color: #ff9b8c; } [data-theme="dark"] .cl-ent.down { background: #55606c; color: #e8edf1; } [data-theme="dark"] .cl-ent.mid { background: rgba(46, 160, 120, .22); color: #6fd3ab; } [data-theme="dark"] .cl-ent.q { background: rgba(46, 160, 120, .22); color: #6fd3ab; } /* 日志按钮上的小图标（装备用装备图标 / 角色用英雄图标 / 任务用任务图标） */ .cl-ent-ic { display: inline-block; width: 16px; height: 16px; border-radius: 3px; object-fit: cover; vertical-align: -2px; margin-right: 3px; } /* ============================================================ 攻略页通用样式（从 data/zmsd120100/guides-page.css 整块搬来，2026-09-14） —— 原来 4 个子站（zmsd120100 / llsd120001 / llsd220002 / mxjy150001）各抄一份， 现统一到共享层：子站不再各带一份；个别站要覆盖就写在自己 data//guides-page.css 里。 覆盖的类：.gd-portal* 一级页板块入口 / .gd-pill / .gd-cards / .gd-qcard / .gd-line / .gd-toc* 章节目录轨 / .gd-article / .gd-chap-sec / .gd-ref 正文内联引用按钮 / .gd-meta / .gd-jump / .gd-back / .gd-search / .gd-hcard* / .gd-drops / .gd-read / 以及攻略正文用的 .prose 规格（正文列宽、截图尺寸、图注） ============================================================ *//* 攻略页样式（左侧章节轨 / 章节隔断 / 传送门 / 关键提示）。配色全部走框架的 CSS 变量，明暗主题自动跟随。 */ /* ---- 第二级：主线 / 支线 / 隐藏 ---- */ .gd-parts { margin-bottom: 4px; } .gd-hold { margin-top: 6px; } /* ---- 一级页：三个大板块入口 ---- */ .gd-portal { display: grid; gap: 16px; margin-top: 22px; } .gd-portal-item { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .gd-portal-head { display: flex; align-items: center; gap: 18px; padding: 22px 24px; text-decoration: none; color: inherit; transition: background .18s ease; } .gd-portal-head:hover { background: var(--accent-soft); } .gd-portal-no { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-hi); font: 600 20px/1 var(--font-d, serif); } .gd-portal-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .gd-portal-t { font: 600 21px/1.3 var(--font-d, serif); color: var(--ink); letter-spacing: .02em; } .gd-portal-d { color: var(--muted); font-size: 14px; line-height: 1.7; } .gd-portal-go { flex: 0 0 auto; color: var(--accent-hi); font-size: 14px; font-weight: 600; white-space: nowrap; } .gd-portal-head:hover .gd-portal-go { text-decoration: underline; } .gd-portal-sub { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 24px 20px; margin-top: -4px; } .gd-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); color: var(--body); font-size: 13px; line-height: 1.6; text-decoration: none; transition: border-color .15s ease, background .15s ease, color .15s ease; } .gd-pill:hover { border-color: var(--accent); color: var(--accent-hi); background: var(--accent-soft); } .gd-pill.is-soon { opacity: .55; cursor: default; } .gd-pill.is-soon:hover { border-color: var(--line); color: var(--body); background: var(--panel-2); } /* 门户里的任务胶囊（button 版，2026-09-17）：还原 的胶囊外观 —— 正文里的 button.gd-pill 仍是文字链接样式（上面那条），别动 */ .gd-portal-sub button.gd-pill { background: var(--panel-2); text-decoration: none; } .gd-portal-sub button.gd-pill:hover { border-color: var(--accent); color: var(--accent-hi); background: var(--accent-soft); } /* ---- 主线部分：一条主线一块，下面是章节 ---- */ .gd-line { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 20px 22px 22px; margin: 18px 0 18px; } .gd-line-head { display: flex; align-items: baseline; gap: 14px; text-decoration: none; color: inherit; flex-wrap: wrap; } .gd-line-t { font: 600 19px/1.4 var(--font-d, serif); color: var(--ink); } .gd-line-d { flex: 1 1 320px; color: var(--muted); font-size: 13.5px; } .gd-chaps { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin-top: 16px; } .gd-chap { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); text-decoration: none; color: inherit; transition: border-color .15s ease, background .15s ease, transform .15s ease; } .gd-chap:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); } .gd-chap-no { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line); color: var(--accent-hi); font: 600 14px/1 var(--font-d, serif); } .gd-chap-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .gd-chap-t { font-weight: 600; color: var(--ink); font-size: 14.5px; } .gd-chap-d { color: var(--muted); font-size: 12.5px; line-height: 1.6; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .gd-chap-n { flex: 0 0 auto; font-size: 12px; color: var(--muted); white-space: nowrap; } .gd-empty { color: var(--muted); font-size: 13.5px; padding: 2px 4px; } /* ---- 攻略自己的层级：主线部分 / 支线部分 / 隐藏部分（主线页再接一条 主线一/二/三）。 故意用站点现成的 chip 样式，跟在上面那排按钮下面，读起来是「导航的第二层」而不是又一行标签页 ---- */ .chips.gd-parts { margin: 14px 0 0; align-items: center; } .chips.gd-parts a.chip, .chips.gd-parts span.chip { display: inline-flex; align-items: center; text-decoration: none; } .gd-div { width: 1px; height: calc(var(--ctl-h) - 12px); background: var(--line-2); margin: 0 2px; } .chip.is-soon { opacity: .55; cursor: default; } .chip.is-soon i { font-style: normal; font-size: 11px; color: var(--muted); margin-left: 5px; border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; } /* ---- 正文页那一行：小标签 + 作者/日期/时长/版本 ---- */ .gd-artmeta { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; margin: 0 0 18px; } .gd-artmeta .article-meta { margin-top: 0; } /* ---- 没有分节的正文页：左对齐的窄栏，跟着页头走 ---- */ .gd-read { max-width: 880px; } .gd-read > .gd-back { margin-top: 0; } /* ---- 正文页：左侧章节目录轨（默认折叠，点开才出章节按钮）+ 原地切换 ---- */ .gd-article { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 30px; align-items: start; margin-top: 0; } .gd-main { max-width: 880px; min-width: 0; } /* 搜索栏是 sticky 的（top: nav-h+8，高 68）→ 目录轨必须让开它，否则一滚就被盖住 */ .gd-toc { position: sticky; top: calc(var(--nav-h) + 86px); z-index: 20; width: 232px; align-self: start; } .gd-toc-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 13.5px; line-height: 1.5; cursor: pointer; text-align: left; } .gd-toc-btn:hover { border-color: var(--accent); color: var(--accent-hi); } .gd-toc-ic { flex: 0 0 auto; color: var(--accent-hi); font-size: 13px; } .gd-toc-t { flex: 0 0 auto; font-weight: 600; } .gd-toc-cur { flex: 1 1 auto; min-width: 0; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gd-toc-arw { flex: 0 0 auto; color: var(--muted); font-size: 11px; transition: transform .18s ease; } .gd-toc.is-open .gd-toc-arw { transform: rotate(90deg); } .gd-toc-list { display: none; margin-top: 8px; padding: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); max-height: calc(100vh - var(--nav-h) - 130px); overflow: auto; } .gd-toc.is-open .gd-toc-list { display: block; } .gd-toc-list a { display: block; padding: 7px 10px; border-radius: 8px; color: var(--body); text-decoration: none; font-size: 13.5px; line-height: 1.55; } .gd-toc-list a:hover { background: var(--accent-soft); color: var(--accent-hi); } .gd-toc-list a.on { background: var(--accent); color: var(--on-accent); font-weight: 600; } /* 一次只显示一章：其余整段收起来 */ .gd-chap-sec.is-off { display: none !important; } /* 章节锚点（`#cN`）给 sticky 顶栏 + sticky 搜索栏让位（2026-09-17 站长报「进入正文视角会突然向下滑一段」）： 从分栏页的章卡点进来时，浏览器会把 `#cN` 滚到视口最顶 —— 那正好被顶栏/搜索栏盖住， 章标题「第N章 xxx」看不见，只觉得“无缘无故往下滑了一截”。留出这段高度就好了。 */ .gd-chap-sec { scroll-margin-top: calc(var(--nav-h) + 100px); } .gd-chap-sec > .gd-sec-t:first-child { margin-top: 22px; } .gd-chap-nav { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); } .gd-chap-nav [hidden] { display: none !important; } @media (max-width: 900px) { .gd-article { grid-template-columns: 1fr; gap: 14px; } .gd-toc { position: sticky; top: calc(var(--nav-h) + 86px); width: auto; } .gd-toc-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); margin-top: 0; max-height: 62vh; z-index: 40; } .gd-main { max-width: none; } .gd-chap-sec > .gd-sec-t:first-child { margin-top: 18px; } } /* ---- 传送门（正文里第一次提到支线 / 隐藏就插一条） ---- */ .gd-jump { /* 用户 2026-09-14 第 2 条：原来是整条淡绿底 + 左边框，在正文里太突兀； 改成跟正文一体的行内提示：无底色、无边框，只有小标签 + 链接 */ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 9px; padding: 0; border: 0; background: transparent; } .gd-jump-t { font-size: 11.5px; letter-spacing: .06em; color: var(--muted); background: transparent; border: 1px solid var(--soft); border-radius: 3px; padding: 0 5px; line-height: 1.6; white-space: nowrap; } .gd-jump-a { color: var(--accent-hi); font-weight: 600; font-size: 14px; text-decoration: none; } .gd-jump-a i { font-style: normal; opacity: .7; } .gd-jump-a:hover { text-decoration: underline; } /* ---- 支线 / 隐藏页头部：反向传送 ---- */ .gd-back { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 6px; padding: 10px 14px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); font-size: 13.5px; color: var(--body); } .gd-back-k { font-size: 11.5px; letter-spacing: .08em; color: var(--muted); border-right: 1px solid var(--line); padding-right: 10px; white-space: nowrap; } .gd-back-ex { color: var(--muted); font-size: 13px; } .gd-rel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 16px; font-size: 13px; } .gd-rel > span:first-child { font-size: 11.5px; letter-spacing: .08em; color: var(--muted); white-space: nowrap; } .gd-dim { color: var(--muted); } /* ---- 列表式入口（支线部分 / 隐藏部分） ---- */ .gd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px,100%), 1fr)); gap: 12px; margin-top: 18px; } .gd-entry { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: inherit; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .gd-entry:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); transform: translateY(-1px); } .gd-entry-badge { flex: 0 0 auto; min-width: 34px; height: 26px; padding: 0 8px; border-radius: 7px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-hi); font-size: 12.5px; font-weight: 600; } .gd-entry-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .gd-entry-t { font: 600 16px/1.4 var(--font-d, serif); color: var(--ink); } .gd-entry-d { color: var(--muted); font-size: 13px; line-height: 1.65; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .gd-entry-loc { color: var(--accent-hi); font-size: 12.5px; } .gd-entry-go { flex: 0 0 auto; color: var(--muted); font-size: 18px; align-self: center; } /* ---- 正文里的「关键提示」 ---- */ .prose p.gd-tip { margin: 14px 0; padding: 10px 14px; background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; color: var(--ink); } .prose p.gd-note { color: var(--muted); font-size: 13.5px; padding-left: 4px; } @media (max-width: 760px) { /* 手机端：整体收一档，别让卡片和标签把屏占满（用户 2026-09-13 反馈） */ .gd-portal-head { padding: 16px 16px; gap: 14px; } .gd-portal-ic { width: 48px; height: 48px; } .gd-portal-t { font-size: 17px; } .gd-portal-d { font-size: 12.5px; } .gd-portal-sub { padding: 0 16px 14px; } .gd-pill { font-size: 12.5px; padding: 3px 10px; } .gd-qcard { padding: 14px 14px; gap: 12px; } .gd-qcard-ic { width: 46px; height: 46px; } .gd-qcard-t { font-size: 16px; } .gd-qcard-d { font-size: 12.5px; line-height: 1.7; } .gd-qcard-m { font-size: 12px; } .gd-artmeta { font-size: 12.5px; gap: 8px 12px; } .gd-sec-t { font-size: 23px; margin: 22px 0 10px; } .prose { font-size: 14.5px; line-height: 1.9; } .prose figure img { max-width: 100%; } .gd-jump { padding: 0; } } @media (max-width: 600px) { .gd-portal-head { padding: 18px 16px; gap: 12px; } .gd-portal-no { width: 38px; height: 38px; font-size: 17px; } .gd-portal-t { font-size: 18px; } .gd-portal-sub { padding: 0 16px 16px; } .gd-entry { padding: 14px; } .gd-qcard { padding: 14px 16px; gap: 12px; } .gd-qcard-ic { width: 44px; height: 44px; } .gd-qcard-t { font-size: 16.5px; } } /* ---- 入口页：横向卡片，向下排列（一章一张 / 一条支线一张） ---- */ .gd-cards { display: grid; gap: 14px; } .gd-qcard { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; text-align: left; font: inherit; cursor: pointer; /* 卡片可能是