/* ==========================================================================
Paperlog · Win2000 复古工业风主题
--------------------------------------------------------------------------
整站外观重做：首页 / 列表 / 文章页 / 导航 / 页脚
与探针主题（monitor-theme-win2000 / CF-Server-Monitor-theme-win2000）共用
同一套视觉语言：同一个 CSS 变量命名、同一套立体边框配方、同一套配色。
设计原则
1. 整个页面 = 桌面上的一个 Windows 2000 窗口：标题栏 / 菜单栏 / 工具栏 /
客户区 / 状态栏，没有任务栏与开始菜单。
2. 只在现有 DOM 上换皮，不改动数据、路由、Markdown 渲染或任何后台功能。
3. 全部立体感用 CSS 实现（凸起 / 凹陷 / 蚀刻 / 抖动底纹），不引入图片素材。
4. 颜色全部走 CSS 变量：默认（无 html.dark）= 经典标准配色，
html.dark = 深色配色，结构完全一致，只换一套颜色。
颜色与变量直接对齐探针主题的 win2000.css，因此博客与探针页是同一套视觉。
========================================================================== */
/* 主题作用域
--------------------------------------------------------------------------
所有组件规则都以 `body.w2k#top` 开头，原因有两个：
1. `#top` 是模板里 上固定的锚点 id，加上它以后主题选择器的权重
必然高过旧主题里那些 `!important` 的高权重规则（例如
`.unified-filter .compact-filter-group[aria-label="排序"] .compact-pill`），
不需要在每条声明后面堆 `!important` 去比拼权重。
2. `w2k` 类用于把自己和后台页面的 app.css 区分开。
因此本文件必须最后加载。 */
/* ==========================================================================
1. 设计令牌
========================================================================== */
:root {
/* 桌面与窗口表面（Windows 经典标准色） */
--desktop: #3a6ea5;
--face: #c0c0c0;
--hilight: #ffffff;
--light: #dfdfdf;
--shadow: #808080;
/* 影子色令牌的命名空间版本：旧主题把 --shadow 定义成 box-shadow，
并在 .dark body 上又覆盖一次，所以暗色下主题里的 var(--shadow) 会被
"污染"成无效值（border-color 直接退回 currentColor，白线就冒出来了）。
主题内部一律用这个带前缀的别名，绕开旧主题的同名变量。 */
--w2k-shadow: #808080;
--dkshadow: #000000;
/* 内凹面：大面积内容区只用柔和灰白，避免纯白与外壳灰之间出现刺眼断层 */
--window: #f2f2f2;
--window-alt: #e6e6e6;
/* 代码区：内凹柔和浅底（整站一致），暗色下走近黑控制台 */
--code-surface: #f8f8f8;
/* 可编辑输入控件才用纯白，保留"能输入"的视觉暗示 */
--field: #ffffff;
--text: #000000;
--text-muted: #404040;
--gray-text: #808080;
--gray-text-shadow: #ffffff;
--tree-count: #707070;
/* 标题栏：经典蓝渐变 */
--title-a: #000080;
--title-b: #1084d0;
--title-text: #ffffff;
--title-off-a: #808080;
--title-off-b: #b5b5b5;
--title-off-text: #d4d0c8;
/* 选中 / 悬停高亮：灰色（不再用深蓝），配纯白字 */
--select-bg: #808080;
--select-text: #ffffff;
/* 列表失焦后的「非活动选中」：更浅的灰配黑字 */
--select-blur-bg: #c0c0c0;
--select-blur-text: #000000;
--focus-dot: #ffff00;
--bar: #000080;
--bar-hot: #a04000;
--trough: #dfdfdf;
--online: #00b000;
--offline: #c00000;
--tip-bg: #ffffe1;
--tip-text: #000000;
/* 文字与链接一律系统黑：不再有默认蓝字，悬停只加下划线（见 §2 的 a:hover） */
--link: #000000;
--link-hover: #000000;
--row-line: #e8e8e8;
--dither-a: #ffffff;
--dither-b: #c0c0c0;
--overlay: rgba(0, 0, 0, .15);
/* 图表 / 任务管理器配色（探针图表同款） */
--graph-bg: #000000;
--graph-grid: #008040;
--graph-axis: #404040;
/* 语义色 */
--accent-green: #007a00;
--accent-blue: #0a246a;
--accent-yellow: #a06a00;
--accent-red: #c00000;
--accent-cyan: #007878;
--accent-purple: #6a2a9a;
/* 版式
- UI：拉丁走 Segoe UI / Tahoma，中文走宋体，末尾再兜一层雅黑与系统字体，
小众字符不会掉成方框（Tofu）；基准 12px，行高紧凑。
- 等宽：Consolas 优先（笔画最实），中英混排时中文落到 SimSun / 宋体，
两边都是同一种"实心"笔画，不会出现西文粗、中文发虚的脱节感；
Courier New 作为 Windows 上一定存在的兜底，最后才是通用 monospace。 */
--w2k-font: "Segoe UI", Tahoma, "SimSun", "宋体", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif;
--w2k-mono: Consolas, "Liberation Mono", "Fira Code", "Courier New", "SimSun", "宋体", monospace;
/* 列表空白区的虚拟占位网格：只用极细网格线，不再做灰白交替斑马纹。
第十三版起与 --row-line 同色：真实行的下边线和空白区的虚线必须一模一样，
否则文章少时能看出"真行有线、空行没线"。 */
--grid-line: #e8e8e8;
/* 详细信息列表：只有「名称 + 日期」两列，紧凑固定、整体靠左，
最后一列之后的宽度留给容器底色。
名称列 320px ~ 460px 之间随窗口伸缩（clamp 只有一个取值，列头与数据行才对齐），
合计 = 名称 + 90px，虚拟网格的 background-size 跟着它收口。 */
--list-name: clamp(320px, 34vw, 460px);
--list-date: 90px;
--list-total: calc(var(--list-name) + var(--list-date));
/* 接管旧主题的字体变量，避免残留的 !important 规则回退到 Inter */
--font-ui: var(--w2k-font);
--font-mono: var(--w2k-mono);
/* 尺寸 */
--w2k-window-max: 1400px;
--w2k-read-max: 780px;
--w2k-radius: 0px;
}
html.dark {
--desktop: #1b2b40;
/* 窗口表面：从 #3c3c3c 压到 #2e2e2e，和内凹工作区拉开一个明显的灰阶 */
--face: #2e2e2e;
/* 深色立体边框：上左 #0d0d0d（凹）、下右 #484848（凸），对比拉满，
内凹轮廓在暗色下重新变得"硬"。不做纯白高光 —— 黑底上的 #ffffff 会发光刺眼。
--light 是外凸内部 1px 高光 / 内凹内部 1px 反光（比外缘 #484848 暗一档，
形成两级斜角），--dkshadow 是下右暗边与内凹内侧暗边。 */
--hilight: #484848;
--light: #3a3a3a;
--shadow: #0d0d0d;
--w2k-shadow: #0d0d0d;
--dkshadow: #0d0d0d;
/* 内凹工作区：沉降到 #1a1a1a，与 #2e2e2e 的窗口表面形成清晰层次 */
--window: #1a1a1a;
--window-alt: #141414;
--code-surface: #141414;
--field: #1b1b1b;
--text: #e8e8e8;
--text-muted: #b4b4b4;
--gray-text: #808080;
--gray-text-shadow: transparent;
--tree-count: #9a9a9a;
--title-a: #0a246a;
--title-b: #3a6ea5;
--title-text: #ffffff;
--title-off-a: #2a2a2a;
--title-off-b: #505050;
--title-off-text: #a8a8a8;
--select-bg: #6a6a6a;
--select-text: #ffffff;
--select-blur-bg: #4a4a4a;
--select-blur-text: #c8c8c8;
--bar: #4a6fa5;
--bar-hot: #e07030;
--trough: #242424;
--online: #3ccb5a;
--offline: #ff5a5a;
--tip-bg: #ffffe1;
--tip-text: #000000;
/* 深色下对应"黑字"的仍是正文字色：不做蓝色链接，悬停同样只加下划线 */
--link: #e8e8e8;
--link-hover: #ffffff;
--row-line: #252525;
--dither-a: #4a4a4a;
--dither-b: #3c3c3c;
--overlay: rgba(0, 0, 0, .45);
--graph-bg: #000000;
--graph-grid: #008040;
--graph-axis: #9fd9a8;
--accent-green: #3ccb5a;
--accent-blue: #6fa8ff;
--accent-yellow: #e0b040;
--accent-red: #ff5a5a;
--accent-cyan: #40d0d0;
--accent-purple: #c090ff;
--grid-line: #2c2c2c;
--font-ui: var(--w2k-font);
--font-mono: var(--w2k-mono);
}
/* ==========================================================================
2. 页面基调：桌面色 + 经典字体
========================================================================== */
html {
background-color: var(--desktop) !important;
color-scheme: light;
scroll-behavior: smooth;
}
html.dark {
background-color: var(--desktop) !important;
color-scheme: dark;
}
html,
body {
scroll-behavior: auto;
}
/* 旧主题用 `html.dark, html.dark body { background-color: … !important }` 这类
分组选择器锁死了页面底色；这里用同权重或更高权重的选择器接管，
保证桌面底色永远由主题令牌决定。 */
html body.w2k#top,
body.w2k#top {
margin: 0 !important;
padding: 0 !important;
min-height: 100vh;
background: var(--desktop) !important;
background-image: none !important;
color: var(--text) !important;
font-family: var(--w2k-font) !important;
font-size: 12px !important;
line-height: 1.5 !important;
letter-spacing: 0 !important;
-webkit-font-smoothing: auto !important;
-moz-osx-font-smoothing: auto !important;
text-rendering: optimizeSpeed;
}
/* 像素级硬朗感：整站关闭过渡，字距保持紧凑克制。
注意只关 transition，动画（例如解锁失败的抖动）仍然保留；
::view-transition-* 是伪元素，不受这条规则影响，跨页过渡照旧。 */
body.w2k#top *,
body.w2k#top *::before,
body.w2k#top *::after {
transition: none !important;
letter-spacing: 0 !important;
}
/* 全站按边框盒计算尺寸：复古控件依赖精确的像素高度
（例如 ListView 行高必须正好 22px，虚拟占位网格才能和真实行对齐）。 */
body.w2k#top *,
body.w2k#top *::before,
body.w2k#top *::after {
box-sizing: border-box;
}
html.dark body.w2k#top {
background: var(--desktop) !important;
background-image: none !important;
color: var(--text) !important;
}
body.w2k#top h1,
body.w2k#top h2,
body.w2k#top h3,
body.w2k#top h4,
body.w2k#top h5,
body.w2k#top h6 {
font-family: var(--w2k-font) !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
color: inherit;
}
body.w2k#top code,
body.w2k#top pre,
body.w2k#top kbd,
body.w2k#top samp,
body.w2k#top .font-mono,
body.w2k#top .font-code {
font-family: var(--w2k-mono) !important;
font-variant-numeric: tabular-nums;
}
/* 旧主题里少数元素把等宽字体写死在声明里，这里统一拉回经典 UI 字体 */
body.w2k#top .front-page-count,
body.w2k#top .front-count,
body.w2k#top .compact-filter-count,
body.w2k#top .compact-filter-count b,
body.w2k#top .compact-option small,
body.w2k#top .taxonomy-tile small,
body.w2k#top .w2k-card-state,
body.w2k#top .download-head small,
body.w2k#top .hide-lock-status,
body.w2k#top .paper-audio-credits,
body.w2k#top .paper-audio-track-artist,
body.w2k#top .front-eyebrow {
font-family: var(--w2k-font) !important;
}
/* 文字与链接：全站统一系统黑。悬停只瞬时加下划线，不改颜色、不加过渡
（--link-hover 与 --link 同色，个别组件若还用旧令牌也不会变红）。 */
body.w2k#top a {
color: var(--link);
text-decoration: none;
transition: none !important;
}
body.w2k#top a:hover {
color: var(--link-hover);
text-decoration: underline;
}
/* 行类控件（列表行 / 树节点 / 归档行 / 磁贴）的悬停仍是经典深蓝反白，
由各组件自己的 :hover 规则负责，这里不加下划线以免打架。 */
body.w2k#top .w2k-details-row:hover,
body.w2k#top .w2k-tree-node:hover,
body.w2k#top .w2k-tree-summary:hover,
body.w2k#top .archive-item:hover,
body.w2k#top .archive-timeline-item:hover,
body.w2k#top .taxonomy-tile:hover,
body.w2k#top .w2k-metalist-item:hover,
body.w2k#top .toc-link:hover {
text-decoration: none;
}
body.w2k#top img {
max-width: 100%;
border: 0;
}
/* 除选项卡的上角外，整站不使用圆角。
旧主题在按钮、卡片、图标上留下大量圆角声明（部分还是 !important），
与其逐条覆盖，不如在这里一次性清零；例外只有两处：选项卡 .reading-pill / .tab，以及图片查看器里那对半透明胶囊翻页键 .w2k-lb-arrow（29.2.1 要的圆角）。 */
body.w2k#top *:not(.reading-pill):not(.tab):not(.w2k-lb-arrow) {
border-radius: 0 !important;
}
/* 只有可编辑控件保留纯白：其余内凹面统一柔和灰白，避免大面积刺眼纯白 */
body.w2k#top input[type="text"],
body.w2k#top input[type="search"],
body.w2k#top input[type="password"],
body.w2k#top input[type="email"],
body.w2k#top input[type="url"],
body.w2k#top input[type="number"],
body.w2k#top input[type="tel"],
body.w2k#top textarea,
body.w2k#top select {
background: var(--field) !important;
}
/* 键盘焦点：经典点状焦点框 */body.w2k#top a:focus-visible,
body.w2k#top button:focus-visible,
body.w2k#top input:focus-visible,
body.w2k#top select:focus-visible,
body.w2k#top summary:focus-visible,
body.w2k#top [tabindex]:focus-visible {
outline: 1px dotted var(--text);
outline-offset: 1px;
}
/* x-cloak 在 Alpine 接管前隐藏；沿用 app.css 的既有约定 */
[x-cloak] {
display: none !important;
}
/* `hidden` 属性必须永远生效：相册分页、歌词行、封面回退都靠它，
而主题里给这些元素写了 display，所以这里用 :not() 抬一档权重确保关闭。 */
body.w2k#top [hidden]:not(.w2k-never-hidden) {
display: none !important;
}
/* ==========================================================================
3. 立体边框原语（Win98 Bevel / Inset Matrix）
--------------------------------------------------------------------------
统一基于「光源自左上方射入」：左上亮、右下暗。三件套 + 一个凹槽线：
外凸：窗口 / 按钮 / 面板 / 卡片
内凹：输入框 / 正文 / ListView 容器
凹槽分割线（灰线 + 白色投影）
外凸 .win-outset
border: 上左 #ffffff / 下右 #808080
shadow: inset 1px 1px #dfdfdf, inset -1px -1px #000000
底色: #c0c0c0
内凹 .win-inset
border: 上左 #808080 / 下右 #ffffff
shadow: inset 1px 1px #000000, inset -1px -1px #dfdfdf
底色: #ffffff
交互：凸起按钮在 :active 时上下左右反转，并按压位移 1px（translate(1px,1px)）。
========================================================================== */
/* 外凸：窗口、按钮、分组框表面 */
.win-outset,
.w2k-raised,
.w2k-btn,
.w2k-tbtn,
.w2k-tool-btn,
.w2k-btn-search,
body.w2k#top .w2k-raised {
background: var(--face);
color: var(--text);
border: 1px solid;
border-color: var(--hilight) var(--dkshadow) var(--dkshadow) var(--hilight);
box-shadow: inset 1px 1px var(--light), inset -1px -1px var(--dkshadow);
}
/* 内凹：输入区、表格、列表、进度条槽 */
.win-inset,
.w2k-sunken {
background: var(--window);
border: 1px solid;
border-color: var(--w2k-shadow) var(--hilight) var(--hilight) var(--w2k-shadow);
box-shadow: inset 1px 1px var(--dkshadow), inset -1px -1px var(--light);
}
/* 细边框：只要 1px 双色边，不要内阴影（小徽章、分隔块） */
.win-thin-outset,
.w2k-thin-raised {
border: 1px solid;
border-color: var(--hilight) var(--w2k-shadow) var(--w2k-shadow) var(--hilight);
}
.win-thin-inset,
.w2k-thin-sunken {
border: 1px solid;
border-color: var(--w2k-shadow) var(--hilight) var(--hilight) var(--w2k-shadow);
}
/* 凹槽分割线：1px 灰线 + 下/右侧 1px 白色投影 */
.win-groove,
hr.win-groove {
display: block;
height: 0;
margin: 0;
border: 0;
border-top: 1px solid var(--w2k-shadow);
background: transparent;
box-shadow: 0 1px 0 0 var(--hilight);
}
.win-groove.is-vertical {
width: 0;
height: auto;
align-self: stretch;
border-top: 0;
border-left: 1px solid var(--w2k-shadow);
box-shadow: 1px 0 0 0 var(--hilight);
}
/* 蚀刻边框：分组框用的 #808080 线 + 白色投影 */
.win-etched,
.w2k-etched,
body.w2k#top .magazine-section,
body.w2k#top .reading-related,
body.w2k#top .reading-meta-group {
border: 1px solid var(--w2k-shadow);
box-shadow: inset 1px 1px var(--hilight), 1px 1px var(--hilight);
}
/* 按下反馈：光影反转 + 1px 按压位移（取代旧主题的 padding 抖动） */
.win-outset:active,
.w2k-btn:active,
.w2k-tbtn:active,
.w2k-tool-btn:active,
.w2k-toc-toggle:active,
.w2k-dialog-buttons .w2k-btn:active,
body.w2k#top .reading-action:active,
body.w2k#top .front-page-btn:active,
body.w2k#top .copy-code:active,
body.w2k#top .collapse-code:active,
body.w2k#top .paper-gallery-switcher button:active,
body.w2k#top .paper-audio-icon:active {
border-color: var(--dkshadow) var(--hilight) var(--hilight) var(--dkshadow) !important;
box-shadow: inset 1px 1px var(--dkshadow), inset -1px -1px var(--light) !important;
padding-top: 1px !important;
transform: translate(1px, 1px) !important;
}
/* ==========================================================================
4. 桌面与窗口外壳
========================================================================== */
.w2k-desktop {
min-height: 100vh;
padding: 18px 18px 46px;
display: flex;
justify-content: center;
align-items: flex-start;
box-sizing: border-box;
}
.w2k-window {
width: min(100%, var(--w2k-window-max));
min-width: 0;
display: flex;
flex-direction: column;
padding: 3px;
background: var(--face);
border: 1px solid;
border-color: var(--light) var(--dkshadow) var(--dkshadow) var(--light);
box-shadow:
inset 1px 1px var(--hilight),
inset -1px -1px var(--w2k-shadow),
5px 5px 0 rgba(0, 0, 0, .22);
}
/* ---------- 标题栏 ---------- */
.w2k-titlebar {
display: flex;
align-items: center;
gap: 5px;
height: 22px;
flex: 0 0 auto;
padding: 0 2px 0 3px;
background: linear-gradient(90deg, var(--title-a), var(--title-b));
color: var(--title-text);
font-size: 12px;
font-weight: 700;
user-select: none;
view-transition-name: w2k-titlebar;
}
.w2k-titlebar-icon {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
width: 16px;
height: 16px;
}
.w2k-titlebar-text {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.w2k-titlebar-sep {
opacity: .75;
padding: 0 1px;
}
.w2k-titlebar-buttons {
display: inline-flex;
align-items: center;
gap: 2px;
flex: 0 0 auto;
}
/* 标题栏按钮：14px 高的小立体按钮（探针主题同款） */
.w2k-tbtn {
height: 16px;
min-width: 18px;
padding: 0 3px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 3px;
font: inherit;
font-size: 10px;
line-height: 1;
cursor: pointer;
text-decoration: none;
/* 立体边框与底色来自 .win-outset */
}
.w2k-tbtn svg {
display: block;
}
.w2k-tbtn:active {
border-color: var(--dkshadow) var(--hilight) var(--hilight) var(--dkshadow);
box-shadow: inset 1px 1px var(--dkshadow), inset -1px -1px var(--light);
}
/* 明暗图标用 CSS 切换，避免 Alpine 接管前的双图标闪烁 */
html:not(.dark) .w2k-ico-moon {
display: none;
}
html.dark .w2k-ico-sun {
display: none;
}
.w2k-ico-sun,
.w2k-ico-moon {
display: inline-flex;
align-items: center;
}
/* ---------- 菜单栏 ---------- */
.w2k-menubar {
display: flex;
align-items: stretch;
flex: 0 0 auto;
/* 菜单行收紧到 20px / 11px，和下面的工具栏合成紧凑的两层 */
min-height: 20px;
height: 20px;
padding: 0;
border-bottom: 1px solid var(--w2k-shadow);
box-shadow: 0 1px var(--hilight);
}
.w2k-menu {
display: flex;
align-items: stretch;
flex: 1 1 auto;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
.w2k-menu::-webkit-scrollbar {
display: none;
}
.w2k-menu a {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
padding: 0 11px;
color: var(--text) !important;
font-size: 11px;
line-height: 1;
white-space: nowrap;
}
.w2k-menu a u {
text-decoration: underline;
text-underline-offset: 2px;
}
.w2k-menu a:hover {
background: var(--select-bg);
color: var(--select-text) !important;
}
.w2k-menu a.is-active {
background: var(--select-bg);
color: var(--select-text) !important;
font-weight: 700;
}
.w2k-menubar-tail {
display: block;
flex: 0 0 auto;
width: 12px;
}
/* ---------- 工具栏：一排凸起小控件（排序 / 分类 / 标签 / 归档 / 搜索 / 计数） ---------- */
.w2k-toolbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
flex: 0 0 auto;
margin: 0 0 6px;
padding: 3px 4px;
background: var(--face);
border: 1px solid;
border-color: var(--hilight) var(--dkshadow) var(--dkshadow) var(--hilight);
box-shadow: inset 1px 1px var(--light), inset -1px -1px var(--dkshadow);
}
/* 工具栏按钮：凸起小按钮（归档、下拉触发器等） */
.w2k-tool-btn {
display: inline-flex;
align-items: center;
gap: 5px;
flex: 0 0 auto;
height: 21px;
padding: 0 9px;
font-family: var(--w2k-font);
font-size: 12px;
white-space: nowrap;
border-radius: 0;
cursor: pointer;
/* 立体边框与底色来自 .win-outset */
}
.w2k-tool-btn:hover {
color: var(--text);
}
.w2k-tool-btn:active {
border-color: var(--dkshadow) var(--hilight) var(--hilight) var(--dkshadow);
box-shadow: inset 1px 1px var(--dkshadow), inset -1px -1px var(--light);
}
.w2k-tool-btn .w2k-ico {
flex: 0 0 auto;
}
/* 占位：把搜索与计数推到工具栏右端 */
.w2k-tool-fill {
flex: 1 1 auto;
min-width: 6px;
}
.w2k-tool-sep {
flex: 0 0 auto;
width: 2px;
align-self: stretch;
min-height: 18px;
margin: 1px 3px;
border-left: 1px solid var(--w2k-shadow);
border-right: 1px solid var(--hilight);
}
/* 计数卡片：内凹分段字段 */
.w2k-count-field {
display: inline-flex;
align-items: baseline;
gap: 4px;
flex: 0 0 auto;
height: 21px;
padding: 0 6px;
font-size: 11px;
line-height: 19px;
color: var(--text-muted);
white-space: nowrap;
border: 1px solid;
border-color: var(--w2k-shadow) var(--hilight) var(--hilight) var(--w2k-shadow);
}
.w2k-count-field b {
font-size: 12px;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.w2k-search {
display: flex;
align-items: center;
gap: 3px;
flex: 0 1 330px;
min-width: 0;
}
.w2k-search-icon {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
color: var(--text);
margin-right: -20px;
padding-left: 4px;
z-index: 1;
pointer-events: none;
}
.w2k-input {
flex: 1 1 auto;
min-width: 0;
height: 20px;
padding: 0 4px 0 20px;
background: var(--field);
color: var(--text);
font-family: var(--w2k-font);
font-size: 12px;
border: 1px solid;
border-color: var(--w2k-shadow) var(--hilight) var(--hilight) var(--w2k-shadow);
box-shadow: inset 1px 1px var(--dkshadow), inset -1px -1px var(--light);
border-radius: 0;
outline: none;
}
.w2k-input::placeholder {
color: var(--gray-text);
}
/* 经典按钮：最小宽 75px 的可点控件（探针主题同款配方） */
.w2k-btn {
flex: 0 0 auto;
min-width: 62px;
min-height: 21px;
padding: 0 10px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
font-family: var(--w2k-font);
font-size: 12px;
text-decoration: none;
border-radius: 0;
cursor: pointer;
/* 立体边框与底色来自 .win-outset */
}
.w2k-btn:hover {
color: var(--text);
}
.w2k-btn:active {
border-color: var(--dkshadow) var(--hilight) var(--hilight) var(--dkshadow);
box-shadow: inset 1px 1px var(--dkshadow), inset -1px -1px var(--light);
}
.w2k-btn.is-disabled,
.w2k-btn:disabled {
color: var(--gray-text) !important;
text-shadow: 1px 1px var(--gray-text-shadow);
cursor: default;
}
.w2k-btn-search {
height: 21px;
}
/* ---------- 客户区 ---------- */
.w2k-client {
flex: 1 1 auto;
min-width: 0;
min-height: 60vh;
padding: 6px;
background: var(--face);
color: var(--text);
}
/* 资源管理器客户区：左目录树 240px + 右主区自适应 */
.w2k-client-explorer {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: 6px;
align-items: start;
}
.w2k-main {
min-width: 0;
padding: 5px;
/* 内凹边框来自 .win-inset；工作区底色覆盖原语默认的白色 */
background: var(--face);
}
/* 文章页客户区：左侧栏 240px（上层文章信息 / 下层文章大纲）+ 右侧正文自适应 */
.w2k-client-doc {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: 6px;
align-items: start;
}
.w2k-pane {
position: relative;
min-width: 0;
display: flex;
flex-direction: column;
/* 内凹边框来自 .win-inset；栏底色覆盖原语默认的白色 */
background: var(--face);
}
/* 文章页左栏：信息在上、大纲在下，整栏随页面滚动保持可见，栏内各自滚动 */
.w2k-rail {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
position: sticky;
top: 8px;
max-height: calc(100vh - 24px);
}
/* 栏内的两块面板不再各自 sticky，由整栏统一粘住 */
.w2k-rail > .w2k-pane {
position: static;
min-height: 0;
max-height: none;
}
.w2k-rail > .w2k-pane-meta {
flex: 0 1 auto;
min-height: 200px;
}
.w2k-rail > .w2k-pane-nav {
flex: 1 1 auto;
}
/* 大纲在栏内跟着栏高伸展，超出时由面板主体自己滚动 */
.w2k-rail .w2k-toc {
max-height: none !important;
}
/* 可拖拽分割条外观：凹槽立面的窄条 + 中间三道抓手（挂在左栏右缘） */
.w2k-rail::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: -5px;
width: 4px;
background-color: var(--face);
background-image:
linear-gradient(var(--w2k-shadow), var(--w2k-shadow)),
linear-gradient(var(--w2k-shadow), var(--w2k-shadow)),
linear-gradient(var(--w2k-shadow), var(--w2k-shadow));
background-size: 100% 1px, 100% 1px, 100% 1px;
background-position: 0 calc(50% - 4px), 0 50%, 0 calc(50% + 4px);
background-repeat: no-repeat;
border-left: 1px solid var(--hilight);
border-right: 1px solid var(--w2k-shadow);
cursor: col-resize;
}
.w2k-pane-doc {
background: transparent;
border: 0;
box-shadow: none;
}
.w2k-pane-title {
display: flex;
align-items: center;
gap: 5px;
flex: 0 0 auto;
height: 20px;
padding: 0 4px;
background: linear-gradient(90deg, var(--title-a), var(--title-b));
color: var(--title-text);
font-size: 11px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
}
.w2k-pane-title .w2k-ico {
flex: 0 0 auto;
}
.w2k-pane-body {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
padding: 5px;
}
/* ==========================================================================
5. 左侧目录树（Active Desktop / 系统目录）
========================================================================== */
.w2k-sidebar {
min-width: 0;
display: flex;
flex-direction: column;
position: sticky;
top: 6px;
max-height: calc(100vh - 24px);
/* 内凹边框来自 .win-inset */
}
.w2k-sidebar-details {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
.w2k-sidebar-details > .w2k-sidebar-body {
flex: 1 1 auto;
min-height: 0;
}
/* 折叠后只剩标题栏，便于手机上让出阅读空间 */
.w2k-sidebar-details:not([open]) > .w2k-sidebar-body {
display: none;
}
.w2k-sidebar-title {
display: flex;
align-items: center;
gap: 5px;
flex: 0 0 auto;
height: 20px;
padding: 0 4px;
background: linear-gradient(90deg, var(--title-a), var(--title-b));
color: var(--title-text);
font-size: 11px;
font-weight: 700;
cursor: pointer;
list-style: none;
user-select: none;
}
.w2k-sidebar-title::-webkit-details-marker {
display: none;
}
.w2k-sidebar-title::after {
content: "\2212";
display: grid;
place-items: center;
margin-left: auto;
width: 12px;
height: 12px;
font-size: 9px;
line-height: 1;
color: var(--text);
background: var(--face);
border: 1px solid;
border-color: var(--hilight) var(--dkshadow) var(--dkshadow) var(--hilight);
}
.w2k-sidebar-details:not([open]) > .w2k-sidebar-title::after {
content: "+";
}
.w2k-sidebar-title-ico {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
.w2k-sidebar-body {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
padding: 4px;
}
.w2k-tree {
display: flex;
flex-direction: column;
gap: 1px;
}
.w2k-tree-node,
.w2k-tree-summary {
display: flex;
align-items: center;
gap: 5px;
min-height: 21px;
padding: 1px 4px;
color: var(--text);
font-size: 12px;
line-height: 1.3;
cursor: pointer;
text-decoration: none;
}
.w2k-tree-node .w2k-ico,
.w2k-tree-summary .w2k-ico {
flex: 0 0 auto;
}
.w2k-tree-label {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* 计数：不用线框小方块，弱化成纯文本 (n) */
.w2k-tree-count {
flex: 0 0 auto;
margin-left: 6px;
padding: 0;
font-size: 11px;
font-style: normal;
font-weight: 400;
color: var(--tree-count);
font-variant-numeric: tabular-nums;
border: 0;
background: transparent;
}
.w2k-tree-count::before {
content: "(";
}
.w2k-tree-count::after {
content: ")";
}
.w2k-tree-node:hover,
.w2k-tree-summary:hover {
background: var(--select-bg);
/* 注意：节点本身是 ，会被上面 `body.w2k#top a` 那条全站黑字规则盖掉，
所以状态色必须带 !important */
color: var(--select-text) !important;
}
/* 高亮行里的每一块文字都跟着变白：标签、计数、置顶徽章都不会再"深字压深底" */
.w2k-tree-node:hover:not(.is-bin) *,
.w2k-tree-summary:hover *,
.w2k-tree-node.is-active * {
color: var(--select-text) !important;
}
.w2k-tree-node.is-active {
background: var(--select-bg);
color: var(--select-text) !important;
font-weight: 700;
}
.w2k-tree-node.is-root {
font-weight: 700;
}
.w2k-tree-node.is-bin {
color: var(--gray-text) !important;
text-shadow: 1px 1px var(--gray-text-shadow);
cursor: default;
}
.w2k-tree-node.is-bin:hover {
background: transparent;
color: var(--gray-text) !important;
}
.w2k-tree-node.is-bin .w2k-tree-count {
color: var(--gray-text) !important;
}
/* 展开 / 折叠：经典 +/− 小方块 */
.w2k-tree-summary {
font-weight: 700;
list-style: none;
}
.w2k-tree-summary::-webkit-details-marker {
display: none;
}
.w2k-tree-summary::before {
content: "+";
display: grid;
place-items: center;
flex: 0 0 auto;
width: 11px;
height: 11px;
font-size: 9px;
font-weight: 700;
line-height: 1;
color: var(--text);
background: var(--window);
border: 1px solid;
border-color: var(--w2k-shadow) var(--hilight) var(--hilight) var(--w2k-shadow);
}
.w2k-tree-group[open] > .w2k-tree-summary::before {
content: "\2212";
}
.w2k-tree-group.is-static > .w2k-tree-summary {
cursor: default;
}
.w2k-tree-group.is-static > .w2k-tree-summary::before {
content: "";
border: 0;
background: transparent;
}
.w2k-tree-kids {
display: flex;
flex-direction: column;
gap: 1px;
margin: 1px 0 3px 12px;
padding-left: 8px;
border-left: 1px dotted var(--w2k-shadow);
}
.w2k-tree-kids .w2k-tree-node {
padding-left: 2px;
}
.w2k-tree-empty,
.w2k-tree-more {
display: block;
padding: 1px 2px;
font-size: 11px;
color: var(--gray-text);
}
.w2k-tree-more {
color: var(--link);
}
.w2k-tree-more:hover {
color: var(--link-hover);
text-decoration: underline;
}
/* 标签在树里是普通叶子节点，和分类节点同一条点状引导线；
只有文章属性表里的标签值还用小标签块。 */
.w2k-tag-chip {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 0 5px;
background: var(--face);
color: var(--text);
font-size: 11px;
line-height: 17px;
border: 1px solid;
border-color: var(--hilight) var(--w2k-shadow) var(--w2k-shadow) var(--hilight);
text-decoration: none;
white-space: nowrap;
}
.w2k-tag-chip em {
font-style: normal;
font-size: 10px;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
.w2k-tag-chip:hover {
color: var(--text);
background: var(--window);
}
.w2k-tag-chip.is-active {
background: var(--select-bg);
color: var(--select-text) !important;
border-color: var(--dkshadow) var(--hilight) var(--hilight) var(--dkshadow);
}
.w2k-tag-chip.is-active em {
color: var(--select-text) !important;
}
.w2k-sidebar-status {
display: flex;
flex-direction: column;
gap: 2px;
flex: 0 0 auto;
padding: 4px;
border-top: 1px solid var(--w2k-shadow);
box-shadow: 0 -1px var(--hilight);
}
.w2k-sidebar-status .w2k-status-field {
font-size: 11px;
}
/* ==========================================================================
6. Windows 详细信息列表（ListView）
--------------------------------------------------------------------------
DOM 范例：
← .win-inset 容器，占满父级
…
← 凸起列头
不再自带右侧留白，滚动宽度就是纯代码宽度 */
body.w2k#top .prose-paper .code-block-wrapper pre.code-body > code {
padding: 0 !important;
margin: 0 !important;
}
body.w2k#top .code-block-wrapper.is-collapsed pre.code-body {
display: none !important;
}
/* 表格 = 经典列表控件 */
body.w2k#top .table-scroll {
margin: 1.2em 0 !important;
overflow-x: auto !important;
background: var(--window) !important;
border: 1px solid !important;
border-color: var(--w2k-shadow) var(--hilight) var(--hilight) var(--w2k-shadow) !important;
box-shadow: inset 1px 1px var(--dkshadow), inset -1px -1px var(--light) !important;
border-radius: 0 !important;
}
body.w2k#top .prose-paper table {
width: 100% !important;
margin: 0 !important;
/* 按规范用 separate + 0 间距，表格自带一圈外框，和内层网格接成闭环 */
border-collapse: separate !important;
border-spacing: 0 !important;
background: var(--window) !important;
color: var(--text) !important;
border: 1px solid var(--w2k-shadow) !important;
border-radius: 0 !important;
overflow: visible !important;
font-size: 13px !important;
}
body.w2k#top .prose-paper th {
padding: 3px 8px !important;
background: var(--face) !important;
color: var(--text) !important;
font-weight: 700 !important;
font-size: 12px !important;
text-align: left !important;
border: 0 !important;
/* 表头网格：右侧与底部都是完整的 1px #808080 */
border-right: 1px solid var(--w2k-shadow) !important;
border-bottom: 1px solid var(--w2k-shadow) !important;
box-shadow: inset 1px 1px var(--hilight), inset -1px -1px var(--light) !important;
white-space: nowrap;
}
body.w2k#top .prose-paper td {
padding: 4px 8px !important;
background: transparent !important;
color: var(--text) !important;
border: 0 !important;
/* 每个单元格右侧都有竖线，和表头、外框一起闭合成工业网格 */
border-right: 1px solid var(--w2k-shadow) !important;
border-bottom: 1px solid var(--w2k-shadow) !important;
box-shadow: inset -1px -1px var(--hilight) !important;
font-size: 13px !important;
}
/* 最右一列 / 最后一行的边线交给表格外框，避免出现 2px 双线。
注意只能限定 tbody：表头那一行也是 thead 的 last-child，
如果写成 tr:last-child 会把表头下边线一起干掉。 */
body.w2k#top .prose-paper tr > *:last-child {
border-right: 0 !important;
}
body.w2k#top .prose-paper tbody tr:last-child > * {
border-bottom: 0 !important;
}
body.w2k#top .prose-paper tbody tr:hover td {
background: var(--select-bg) !important;
color: var(--select-text) !important;
}
body.w2k#top .prose-paper tbody tr:hover td a {
color: var(--select-text) !important;
}
/* 代码高亮：浅色主题保持 github 亮色，深色主题换成经典控制台配色 */
html.dark body.w2k#top .hljs,
html.dark body.w2k#top .hljs-subst {
color: #e8e8e8 !important;
}
html.dark body.w2k#top .hljs-comment,
html.dark body.w2k#top .hljs-quote {
color: #808080 !important;
font-style: italic;
}
html.dark body.w2k#top .hljs-keyword,
html.dark body.w2k#top .hljs-selector-tag,
html.dark body.w2k#top .hljs-literal,
html.dark body.w2k#top .hljs-doctag,
html.dark body.w2k#top .hljs-formula,
html.dark body.w2k#top .hljs-name {
color: #6fa8ff !important;
font-weight: 700;
}
html.dark body.w2k#top .hljs-string,
html.dark body.w2k#top .hljs-regexp,
html.dark body.w2k#top .hljs-addition,
html.dark body.w2k#top .hljs-attribute,
html.dark body.w2k#top .hljs-meta .hljs-string {
color: #3ccb5a !important;
}
html.dark body.w2k#top .hljs-number,
html.dark body.w2k#top .hljs-variable,
html.dark body.w2k#top .hljs-template-variable,
html.dark body.w2k#top .hljs-type,
html.dark body.w2k#top .hljs-selector-attr,
html.dark body.w2k#top .hljs-selector-pseudo {
color: #e0b040 !important;
}
html.dark body.w2k#top .hljs-title,
html.dark body.w2k#top .hljs-section,
html.dark body.w2k#top .hljs-title.class_,
html.dark body.w2k#top .hljs-title.function_ {
color: #40d0d0 !important;
font-weight: 700;
}
html.dark body.w2k#top .hljs-attr,
html.dark body.w2k#top .hljs-symbol,
html.dark body.w2k#top .hljs-bullet,
html.dark body.w2k#top .hljs-link,
html.dark body.w2k#top .hljs-selector-id,
html.dark body.w2k#top .hljs-selector-class {
color: #c090ff !important;
}
html.dark body.w2k#top .hljs-built_in,
html.dark body.w2k#top .hljs-builtin-name,
html.dark body.w2k#top .hljs-params {
color: #b4b4b4 !important;
}
html.dark body.w2k#top .hljs-deletion {
color: #ff5a5a !important;
}
html.dark body.w2k#top .hljs-meta,
html.dark body.w2k#top .hljs-tag {
color: #808080 !important;
}
html.dark body.w2k#top .hljs-emphasis {
font-style: italic;
}
html.dark body.w2k#top .hljs-strong {
font-weight: 700;
}
html.dark body.w2k#top .prose-paper :not(pre) > code {
background: var(--window-alt) !important;
color: #ff8a8a !important;
border-color: var(--row-line) !important;
}
/* ==========================================================================
14. 正文内的自定义块：提示框 / 相册 / 下载卡 / 密码隐藏
========================================================================== */
/* 提示框 = 经典信息面板 */
body.w2k#top .prose-paper .paper-callout {
display: block !important;
margin: 1.2em 0 !important;
padding: 8px 12px 8px 12px !important;
background: var(--window-alt) !important;
border: 1px solid !important;
border-color: var(--w2k-shadow) var(--hilight) var(--hilight) var(--w2k-shadow) !important;
border-left: 3px solid var(--accent-blue) !important;
border-radius: 0 !important;
box-shadow: none !important;
color: var(--text) !important;
font-family: var(--w2k-font) !important;
}
body.w2k#top .prose-paper .paper-callout p,
body.w2k#top .prose-paper .paper-callout .callout-body {
font-size: 14px !important;
line-height: 1.75 !important;
color: var(--text) !important;
}
body.w2k#top .prose-paper .paper-callout .callout-title,
body.w2k#top .prose-paper details.paper-callout > summary .callout-title {
color: var(--text) !important;
font-weight: 700 !important;
}
body.w2k#top .prose-paper details.paper-callout {
padding: 0 !important;
overflow: hidden !important;
}
body.w2k#top .prose-paper details.paper-callout > summary {
display: flex !important;
align-items: center !important;
gap: 6px !important;
padding: 8px 12px !important;
color: var(--text) !important;
font-weight: 700 !important;
cursor: pointer;
}
body.w2k#top .prose-paper details.paper-callout > .callout-body {
padding: 0 12px 8px !important;
}
body.w2k#top .prose-paper .callout-chevron {
color: var(--text-muted) !important;
margin-left: auto;
}
body.w2k#top .prose-paper .callout-icon {
display: none !important;
}
body.w2k#top .prose-paper .callout-default {
border-left-color: var(--w2k-shadow) !important;
}
body.w2k#top .prose-paper .callout-primary,
body.w2k#top .prose-paper .callout-info {
border-left-color: var(--accent-blue) !important;
}
body.w2k#top .prose-paper .callout-success {
border-left-color: var(--accent-green) !important;
}
body.w2k#top .prose-paper .callout-warning {
border-left-color: var(--accent-yellow) !important;
}
body.w2k#top .prose-paper .callout-danger,
body.w2k#top .prose-paper .callout-error {
border-left-color: var(--accent-red) !important;
}
/* 相册 = 凹陷照片框墙 */
body.w2k#top .paper-gallery,
body.w2k#top .prose-paper .paper-gallery,
body.w2k#top .paper-gallery[data-gallery] {
display: block !important;
width: 100% !important;
max-width: none !important;
margin: 1.3em 0 !important;
padding: 3px !important;
column-count: initial !important;
background: var(--face) !important;
border: 1px solid !important;
border-color: var(--light) var(--dkshadow) var(--dkshadow) var(--light) !important;
box-shadow: inset 1px 1px var(--hilight), inset -1px -1px var(--w2k-shadow) !important;
border-radius: 0 !important;
}
body.w2k#top .paper-gallery-head {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
height: 20px !important;
margin: 0 0 3px !important;
padding: 0 4px !important;
background: linear-gradient(90deg, var(--title-a), var(--title-b)) !important;
color: var(--title-text) !important;
}
body.w2k#top .paper-gallery-title,
body.w2k#top .paper-gallery[data-gallery] .paper-gallery-title {
flex: 1 1 auto !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
color: var(--title-text) !important;
font-size: 11px !important;
font-weight: 700 !important;
line-height: 1 !important;
}
body.w2k#top .paper-gallery-title span,
body.w2k#top .paper-gallery[data-gallery] .paper-gallery-title span {
color: var(--title-text) !important;
font-size: 11px !important;
font-weight: 400 !important;
}
body.w2k#top .paper-gallery-switcher {
display: inline-flex !important;
align-items: center !important;
gap: 2px !important;
flex: 0 0 auto !important;
}
body.w2k#top .paper-gallery-switcher button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 18px !important;
height: 16px !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: none !important;
max-height: none !important;
padding: 0 !important;
background: var(--face) !important;
color: var(--text) !important;
border: 1px solid !important;
border-color: var(--hilight) var(--dkshadow) var(--dkshadow) var(--hilight) !important;
box-shadow: inset 1px 1px var(--light), inset -1px -1px var(--dkshadow) !important;
border-radius: 0 !important;
font-size: 9px !important;
line-height: 1 !important;
}
body.w2k#top .paper-gallery-layout-icon {
width: 12px !important;
height: 12px !important;
min-width: 0 !important;
min-height: 0 !important;
}
body.w2k#top .paper-gallery-switcher button.is-active {
border-color: var(--dkshadow) var(--hilight) var(--hilight) var(--dkshadow) !important;
box-shadow: inset 1px 1px var(--dkshadow), inset -1px -1px var(--light) !important;
}
body.w2k#top .paper-gallery-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 3px !important;
column-count: initial !important;
}
body.w2k#top .paper-gallery.is-layout-single .paper-gallery-grid {
grid-template-columns: minmax(0, 1fr) !important;
}
body.w2k#top .paper-gallery.is-layout-double .paper-gallery-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body.w2k#top .paper-gallery.is-layout-three .paper-gallery-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
body.w2k#top .paper-photo-card,
body.w2k#top .prose-paper .paper-photo-card {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 1px !important;
background: var(--window) !important;
border: 1px solid !important;
border-color: var(--w2k-shadow) var(--hilight) var(--hilight) var(--w2k-shadow) !important;
box-shadow: inset 1px 1px var(--dkshadow), inset -1px -1px var(--light) !important;
border-radius: 0 !important;
overflow: hidden !important;
break-inside: auto !important;
transform: none !important;
transition: none !important;
}
body.w2k#top .paper-photo-link {
display: block !important;
position: relative !important;
line-height: 0 !important;
border: 0 !important;
background: transparent !important;
}
body.w2k#top .paper-photo-image,
body.w2k#top .prose-paper .paper-photo-image {
display: block !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
object-fit: cover !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
transform: none !important;
filter: none !important;
transition: none !important;
}
body.w2k#top .paper-photo-zoom {
color: #fff !important;
text-shadow: 1px 1px 0 #000;
}
body.w2k#top .paper-gallery-pagination {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
margin: 3px 0 0 !important;
padding: 3px !important;
background: var(--window) !important;
border: 1px solid !important;
border-color: var(--w2k-shadow) var(--hilight) var(--hilight) var(--w2k-shadow) !important;
}
body.w2k#top .paper-gallery-prev,
body.w2k#top .paper-gallery-next,
body.w2k#top .paper-gallery-pages {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
height: 19px !important;
padding: 0 8px !important;
background: var(--face) !important;
color: var(--text) !important;
font-family: var(--w2k-font) !important;
font-size: 11px !important;
border: 1px solid !important;
border-color: var(--hilight) var(--dkshadow) var(--dkshadow) var(--hilight) !important;
box-shadow: inset 1px 1px var(--light), inset -1px -1px var(--dkshadow) !important;
border-radius: 0 !important;
}
/* 下载卡 = 标准 Win98 外凸卡片（与 .win-outset 同一套光影配方）+ 三行弹性流：
左「文件元信息」/ 中「提取码 · 解压码」/ 右「前往下载」，移动端改纵向（见第 22 节）。 */
body.w2k#top .paper-download-card {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 10px !important;
margin: 1.3em 0 !important;
padding: 8px 10px !important;
background: var(--face) !important;
border: 1px solid !important;
border-color: var(--hilight) var(--dkshadow) var(--dkshadow) var(--hilight) !important;
box-shadow: inset 1px 1px var(--light), inset -1px -1px var(--dkshadow) !important;
border-radius: 0 !important;
}
body.w2k#top .download-left {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex: 1 1 260px !important;
min-width: 0 !important;
}
body.w2k#top .download-head {
display: flex !important;
align-items: center !important;
gap: 8px !important;
min-width: 0 !important;
}
/* 下载卡 = Windows「文件属性与传输」面板：左图标 + 中提取码 + 右默认按钮 */
body.w2k#top .download-filetype {
position: relative;
display: inline-flex !important;
align-items: flex-end !important;
justify-content: center !important;
flex: 0 0 auto !important;
width: 32px !important;
height: 32px !important;
padding: 0 0 4px !important;
/* 32x32 像素软盘：黑色外框 + 白色滑盖 + 灰色标签区 */
background-color: var(--face) !important;
background-image:
linear-gradient(var(--hilight), var(--hilight)),
linear-gradient(var(--w2k-shadow), var(--w2k-shadow)),
linear-gradient(var(--window), var(--window)),
linear-gradient(var(--dkshadow), var(--dkshadow));
background-size: 14px 7px, 5px 7px, 20px 8px, 4px 4px;
background-position: 8px 2px, 16px 2px, 5px 13px, 4px 3px;
background-repeat: no-repeat;
color: var(--text) !important;
font-family: var(--w2k-mono) !important;
font-size: 8px !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
text-transform: uppercase !important;
border: 1px solid #000 !important;
box-shadow: inset 1px 1px var(--hilight), inset -1px -1px var(--w2k-shadow) !important;
border-radius: 0 !important;
}
body.w2k#top .download-head strong {
display: block !important;
font-size: 13px !important;
font-weight: 700 !important;
color: var(--text) !important;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
body.w2k#top .download-head small {
display: block !important;
margin-top: 2px !important;
font-size: 11px !important;
color: var(--text-muted) !important;
}
body.w2k#top .download-codes {
display: flex !important;
flex-wrap: wrap !important;
gap: 5px !important;
flex: 0 1 auto !important;
}
body.w2k#top .download-code {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
height: 22px !important;
padding: 0 3px 0 6px !important;
/* 只读内凹小胶囊：标签 + 值 + 复制 */
background: #f5f5f5 !important;
color: #000000 !important;
font-family: var(--w2k-font) !important;
font-size: 11px !important;
border: 1px solid !important;
border-color: var(--w2k-shadow) var(--hilight) var(--hilight) var(--w2k-shadow) !important;
box-shadow: inset 1px 1px var(--dkshadow), inset -1px -1px var(--light) !important;
border-radius: 0 !important;
cursor: pointer;
}
/* 标签后面补一个冒号：提取码 → 提取码: */
body.w2k#top .download-code span::after {
content: ":";
}
body.w2k#top .download-code b {
font-family: var(--w2k-mono) !important;
font-size: 12px !important;
font-weight: 700 !important;
color: #000000 !important;
letter-spacing: 0.5px !important;
}
body.w2k#top .download-code em {
display: inline-flex !important;
align-items: center !important;
height: 14px !important;
margin-left: 3px !important;
padding: 0 4px !important;
font-style: normal !important;
font-size: 10px !important;
color: var(--text) !important;
background: var(--face) !important;
border: 1px solid !important;
border-color: var(--hilight) var(--dkshadow) var(--dkshadow) var(--hilight) !important;
border-radius: 0 !important;
}
body.w2k#top .download-code:active em {
border-color: var(--dkshadow) var(--hilight) var(--hilight) var(--dkshadow) !important;
}
body.w2k#top .download-action {
flex: 0 0 auto !important;
margin-left: auto !important;
}
/* 前往下载 = 默认按钮：纯黑外圈 + 外凸面 + 内侧 1px 黑色点状焦点框 */
body.w2k#top .download-main {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
min-width: 104px !important;
min-height: 24px !important;
padding: 0 14px !important;
background: var(--face) !important;
color: #000000 !important;
font-family: var(--w2k-font) !important;
font-size: 12px !important;
font-weight: 700 !important;
border: 1px solid #000 !important;
box-shadow: inset 1px 1px var(--hilight), inset -1px -1px var(--w2k-shadow) !important;
outline: 1px dotted #000 !important;
outline-offset: -4px !important;
border-radius: 0 !important;
transform: none !important;
}
body.w2k#top .download-main:active {
box-shadow: inset 1px 1px var(--w2k-shadow), inset -1px -1px var(--hilight) !important;
}
/* ---------------------------------------------------------------- 密码便签
受保护内容 = 一个小的 Windows 面板：外凸立体边框 + 微型蓝色标题栏，
里面是内凹的密码槽 + 右侧"解开便签"外凸按键（按下时下沉 1px）。 */
body.w2k#top .paper-hide-lock,
body.w2k#top .prose-paper .paper-hide-lock {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
max-width: 460px !important;
margin: 1.3em auto !important;
padding: 0 0 10px !important;
background: var(--face) !important;
border: 1px solid !important;
border-color: var(--hilight) var(--dkshadow) var(--dkshadow) var(--hilight) !important;
box-shadow: inset 1px 1px var(--light), inset -1px -1px var(--dkshadow) !important;
border-radius: 0 !important;
}
/* 微型标题栏：贴在面板内沿，像窗口的标题条 */
body.w2k#top .paper-hide-lock::before {
content: "受保护的内容";
display: flex !important;
align-items: center !important;
height: 20px !important;
padding: 0 6px !important;
background: linear-gradient(90deg, var(--title-a) 0%, var(--title-b) 100%) !important;
color: #ffffff !important;
font-family: var(--w2k-font) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
white-space: nowrap;
}
body.w2k#top .hide-lock-form {
display: flex !important;
align-items: center !important;
gap: 6px !important;
width: auto !important;
margin: 0 10px !important;
}
/* 徽标：emoji 换成 16x16 像素挂锁（font-size:0 把 emoji 藏掉） */
body.w2k#top .hide-lock-badge {
flex: 0 0 auto !important;
width: 16px !important;
height: 16px !important;
font-size: 0 !important;
line-height: 1 !important;
background-repeat: no-repeat;
background-position: center;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect x='5' y='1' width='6' height='1' fill='%23808080'/%3E%3Crect x='4' y='2' width='1' height='4' fill='%23808080'/%3E%3Crect x='11' y='2' width='1' height='4' fill='%23808080'/%3E%3Crect x='2' y='6' width='12' height='9' fill='%23ffd000'/%3E%3Crect x='2' y='6' width='12' height='1' fill='%23000'/%3E%3Crect x='2' y='14' width='12' height='1' fill='%23000'/%3E%3Crect x='2' y='6' width='1' height='9' fill='%23000'/%3E%3Crect x='13' y='6' width='1' height='9' fill='%23000'/%3E%3Crect x='2' y='6' width='12' height='1' fill='%23a08000'/%3E%3Crect x='7' y='9' width='2' height='3' fill='%23000'/%3E%3C/svg%3E");
}
/* 密码槽：标准深内凹 + 柔和复古灰底（#eaeaea）+ 纯黑文字与光标 */
body.w2k#top .hide-lock-form input {
flex: 1 1 auto !important;
min-width: 0 !important;
height: 22px !important;
padding: 0 6px !important;
background: #eaeaea !important;
color: #000000 !important;
caret-color: #000000 !important;
font-family: var(--w2k-font) !important;
font-size: 12px !important;
border: 1px solid !important;
border-color: var(--w2k-shadow) var(--hilight) var(--hilight) var(--w2k-shadow) !important;
box-shadow: inset 1px 1px var(--dkshadow), inset -1px -1px var(--light) !important;
border-radius: 0 !important;
outline: none !important;
}
body.w2k#top .hide-lock-form input::placeholder {
color: var(--gray-text) !important;
}
/* 深色下这几个"浅色字段"跟着整站输入区走，避免暗色页面里出现纯白块 */
html.dark body.w2k#top .hide-lock-form input,
html.dark body.w2k#top .download-code {
background: var(--field) !important;
color: var(--text) !important;
caret-color: var(--text) !important;
}
html.dark body.w2k#top .download-code b {
color: var(--text) !important;
}
/* 解开便签：标准外凸按键，按下时下沉 1px */
body.w2k#top .hide-lock-form button {
flex: 0 0 auto !important;
min-width: 88px !important;
height: 22px !important;
padding: 0 10px !important;
background: var(--face) !important;
color: #000000 !important;
font-family: var(--w2k-font) !important;
font-size: 12px !important;
border: 1px solid !important;
border-color: var(--hilight) var(--dkshadow) var(--dkshadow) var(--hilight) !important;
box-shadow: inset 1px 1px var(--light), inset -1px -1px var(--dkshadow) !important;
border-radius: 0 !important;
cursor: pointer;
}
/* 按下：光影反转 + 下沉 1px */
body.w2k#top .hide-lock-form button:active {
border-color: var(--dkshadow) var(--hilight) var(--hilight) var(--dkshadow) !important;
box-shadow: inset 1px 1px var(--dkshadow), inset -1px -1px var(--light) !important;
transform: translate(1px, 1px) !important;
}
body.w2k#top .hide-lock-status {
min-height: 14px !important;
margin: 0 10px !important;
font-size: 11px !important;
color: var(--accent-red) !important;
}
body.w2k#top .paper-hide-revealed {
margin: 1.2em 0 !important;
}
body.w2k#top .paper-hide-lock.is-shake {
animation: w2k-shake .3s steps(2, end) 2;
}
@keyframes w2k-shake {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(3px); }
}
/* 悬浮提示 = 黄底黑字工具提示 */
body.w2k#top .paper-toast {
position: fixed !important;
left: 50% !important;
bottom: 26px !important;
z-index: 90 !important;
min-width: 120px !important;
max-width: 320px !important;
padding: 3px 10px !important;
transform: translateX(-50%) !important;
background: var(--tip-bg) !important;
color: var(--tip-text) !important;
font-family: var(--w2k-font) !important;
font-size: 12px !important;
text-align: center !important;
border: 1px solid #000 !important;
box-shadow: 2px 2px 0 rgba(0, 0, 0, .35) !important;
border-radius: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
transition: opacity .12s linear !important;
}
body.w2k#top .paper-toast.is-visible {
opacity: 1 !important;
}
/* ==========================================================================
15. 音频 / 视频播放器
========================================================================== */
body.w2k#top .paper-audio-player {
margin: 0 0 12px !important;
padding: 3px !important;
background: var(--face) !important;
border: 1px solid !important;
border-color: var(--light) var(--dkshadow) var(--dkshadow) var(--light) !important;
box-shadow: inset 1px 1px var(--hilight), inset -1px -1px var(--w2k-shadow) !important;
border-radius: 0 !important;
}
body.w2k#top .paper-audio-main {
display: flex !important;
align-items: stretch !important;
gap: 4px !important;
padding: 4px !important;
}
body.w2k#top .paper-audio-cover {
position: relative !important;
flex: 0 0 auto !important;
width: 92px !important;
height: 92px !important;
padding: 0 !important;
overflow: hidden !important;
background: var(--window) !important;
border: 1px solid !important;
border-color: var(--w2k-shadow) var(--hilight) var(--hilight) var(--w2k-shadow) !important;
box-shadow: inset 1px 1px var(--dkshadow), inset -1px -1px var(--light) !important;
border-radius: 0 !important;
cursor: pointer;
}
body.w2k#top .paper-audio-cover img,
body.w2k#top .paper-audio-cover-fallback {
display: block !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
object-fit: cover !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
transform: none !important;
}
body.w2k#top .paper-audio-cover-fallback {
display: grid !important;
place-items: center !important;
background: var(--window-alt) !important;
color: var(--gray-text) !important;
font-size: 30px !important;
}
body.w2k#top #paper-audio-play-icon {
position: absolute !important;
left: 50% !important;
top: 50% !important;
width: 26px !important;
height: 22px !important;
margin: 0 !important;
display: grid !important;
place-items: center !important;
transform: translate(-50%, -50%) !important;
background: var(--face) !important;
color: var(--text) !important;
font-size: 11px !important;
font-style: normal !important;
border: 1px solid !important;
border-color: var(--hilight) var(--dkshadow) var(--dkshadow) var(--hilight) !important;
box-shadow: inset 1px 1px var(--light), inset -1px -1px var(--dkshadow) !important;
}
body.w2k#top .paper-audio-control {
flex: 1 1 auto !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: 5px !important;
padding: 4px 2px !important;
}
body.w2k#top .paper-audio-info-row {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 8px !important;
}
body.w2k#top .paper-audio-title-line {
display: flex !important;
align-items: baseline !important;
gap: 6px !important;
min-width: 0 !important;
font-family: var(--w2k-font) !important;
}
body.w2k#top .paper-audio-title-line strong {
font-size: 13px !important;
font-weight: 700 !important;
color: var(--text) !important;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
body.w2k#top .paper-audio-title-line span,
body.w2k#top .paper-audio-credits {
font-size: 11px !important;
color: var(--text-muted) !important;
font-family: var(--w2k-font) !important;
}
body.w2k#top .paper-audio-credits {
margin-top: 2px !important;
}
body.w2k#top .paper-audio-time {
flex: 0 0 auto !important;
padding: 0 5px !important;
font-family: var(--w2k-mono) !important;
font-size: 11px !important;
color: var(--text) !important;
font-variant-numeric: tabular-nums;
border: 1px solid !important;
border-color: var(--w2k-shadow) var(--hilight) var(--hilight) var(--w2k-shadow) !important;
}
body.w2k#top .paper-audio-control-row {
display: flex !important;
align-items: center !important;
gap: 6px !important;
}
body.w2k#top .paper-audio-progress {
flex: 1 1 auto !important;
min-width: 0 !important;
height: 16px !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
-webkit-appearance: none !important;
appearance: none !important;
cursor: pointer;
}
body.w2k#top .paper-audio-progress::-webkit-slider-runnable-track {
height: 12px;
background: var(--trough);
border: 1px solid;
border-color: var(--w2k-shadow) var(--hilight) var(--hilight) var(--w2k-shadow);
box-shadow: inset 1px 1px var(--dkshadow), inset -1px -1px var(--light);
}
body.w2k#top .paper-audio-progress::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 11px;
height: 20px;
margin-top: -5px;
background: var(--face);
border: 1px solid;
border-color: var(--hilight) var(--dkshadow) var(--dkshadow) var(--hilight);
box-shadow: inset 1px 1px var(--light), inset -1px -1px var(--dkshadow);
}
body.w2k#top .paper-audio-progress::-moz-range-track {
height: 12px;
background: var(--trough);
border: 1px solid;
border-color: var(--w2k-shadow) var(--hilight) var(--hilight) var(--w2k-shadow);
}
body.w2k#top .paper-audio-progress::-moz-range-thumb {
width: 9px;
height: 18px;
border-radius: 0;
background: var(--face);
border: 1px solid;
border-color: var(--hilight) var(--dkshadow) var(--dkshadow) var(--hilight);
}
body.w2k#top .paper-audio-actions {
display: inline-flex !important;
align-items: center !important;
gap: 3px !important;
flex: 0 0 auto !important;
}
body.w2k#top .paper-audio-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 22px !important;
height: 21px !important;
padding: 0 !important;
background: var(--face) !important;
color: var(--text) !important;
font-size: 12px !important;
line-height: 1 !important;
border: 1px solid !important;
border-color: var(--hilight) var(--dkshadow) var(--dkshadow) var(--hilight) !important;
box-shadow: inset 1px 1px var(--light), inset -1px -1px var(--dkshadow) !important;
border-radius: 0 !important;
cursor: pointer;
}
body.w2k#top .paper-audio-lyric {
margin-top: 4px !important;
padding: 3px 6px !important;
background: var(--window) !important;
color: var(--text) !important;
font-size: 12px !important;
text-align: center !important;
border: 1px solid !important;
border-color: var(--w2k-shadow) var(--hilight) var(--hilight) var(--w2k-shadow) !important;
}
/* 播放列表 = 列表控件 */
body.w2k#top .paper-audio-playlist {
display: flex !important;
flex-direction: column !important;
max-height: 260px !important;
overflow-y: auto !important;
margin: 0 !important;
background: var(--window) !important;
border: 1px solid !important;
border-color: var(--w2k-shadow) var(--hilight) var(--hilight) var(--w2k-shadow) !important;
box-shadow: inset 1px 1px var(--dkshadow), inset -1px -1px var(--light) !important;
}
body.w2k#top .paper-audio-playlist.is-collapsed {
display: none !important;
}
body.w2k#top .paper-audio-track {
display: grid !important;
grid-template-columns: 34px minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 6px !important;
padding: 3px 8px !important;
min-height: 22px !important;
background: var(--window) !important;
color: var(--text) !important;
font-family: var(--w2k-font) !important;
font-size: 12px !important;
text-align: left !important;
border: 0 !important;
border-bottom: 1px solid var(--row-line) !important;
border-radius: 0 !important;
cursor: pointer;
}
body.w2k#top .paper-audio-track:last-child {
border-bottom: 0 !important;
}
body.w2k#top .paper-audio-track:hover {
background: var(--select-bg) !important;
color: var(--select-text) !important;
}
body.w2k#top .paper-audio-track:hover * {
color: var(--select-text) !important;
}
body.w2k#top .paper-audio-track.is-active {
background: var(--select-bg) !important;
color: var(--select-text) !important;
font-weight: 700 !important;
}
body.w2k#top .paper-audio-track.is-active * {
color: var(--select-text) !important;
}
body.w2k#top .paper-audio-index {
font-family: var(--w2k-mono) !important;
font-size: 11px !important;
color: var(--text-muted) !important;
font-variant-numeric: tabular-nums;
}
body.w2k#top .paper-audio-track-name {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
body.w2k#top .paper-audio-track-artist {
font-size: 11px !important;
color: var(--text-muted) !important;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* 视频 = 凹陷黑底播放区 */
body.w2k#top .paper-video-shell,
body.w2k#top .reading-stage {
width: 100% !important;
margin: 0 0 12px !important;
padding: 3px !important;
background: var(--face) !important;
border: 1px solid !important;
border-color: var(--light) var(--dkshadow) var(--dkshadow) var(--light) !important;
box-shadow: inset 1px 1px var(--hilight), inset -1px -1px var(--w2k-shadow) !important;
border-radius: 0 !important;
}
body.w2k#top .paper-video-player {
width: 100% !important;
aspect-ratio: 16 / 9 !important;
overflow: hidden !important;
background: #000 !important;
border: 1px solid !important;
border-color: var(--w2k-shadow) var(--hilight) var(--hilight) var(--w2k-shadow) !important;
box-shadow: none !important;
border-radius: 0 !important;
}
body.w2k#top .paper-video-player .art-video-player,
body.w2k#top .paper-video-player video {
border-radius: 0 !important;
background: #000 !important;
}
body.w2k#top .paper-video-player .art-progress-played {
background: var(--bar) !important;
}
/* ==========================================================================
16. 大纲条目（detail.js 从正文标题生成）
========================================================================== */
body.w2k#top .toc-link {
display: block !important;
padding: 2px 6px !important;
background: transparent !important;
color: var(--link) !important;
font-size: 12px !important;
line-height: 1.5 !important;
text-decoration: none !important;
border-radius: 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
body.w2k#top .toc-h3 {
padding-left: 18px !important;
}
body.w2k#top .toc-h4 {
padding-left: 30px !important;
font-size: 11px !important;
color: var(--text-muted) !important;
}
body.w2k#top .toc-link::before {
display: none !important;
content: none !important;
}
body.w2k#top .toc-link:hover {
background: var(--select-bg) !important;
color: var(--select-text) !important;
transform: none !important;
}
body.w2k#top .toc-link.is-active {
background: var(--select-bg) !important;
color: var(--select-text) !important;
font-weight: 700 !important;
}
/* ==========================================================================
17. 经典对话框（404 等）
========================================================================== */
body.w2k#top .w2k-dialog-overlay {
min-height: 100vh;
padding: 18px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
background: var(--desktop);
}
body.w2k#top .w2k-dialog {
width: min(100%, 460px);
display: flex;
flex-direction: column;
padding: 3px;
background: var(--face);
border: 1px solid;
border-color: var(--light) var(--dkshadow) var(--dkshadow) var(--light);
box-shadow: inset 1px 1px var(--hilight), inset -1px -1px var(--w2k-shadow), 4px 4px 0 rgba(0, 0, 0, .22);
}
body.w2k#top .w2k-dialog .w2k-titlebar-buttons {
display: inline-flex;
}
body.w2k#top .w2k-dialog-body {
display: flex;
gap: 14px;
padding: 16px 16px 12px;
}
body.w2k#top .w2k-dialog-icon {
flex: 0 0 auto;
width: 32px;
height: 32px;
}
body.w2k#top .w2k-dialog-message {
flex: 1 1 auto;
min-width: 0;
font-size: 12px;
line-height: 1.7;
color: var(--text);
}
body.w2k#top .w2k-dialog-message b {
display: block;
margin-bottom: 4px;
font-size: 14px;
}
body.w2k#top .w2k-dialog-message p {
margin: 0 0 6px;
color: var(--text-muted);
}
body.w2k#top .w2k-dialog-message code {
font-family: var(--w2k-mono);
font-size: 12px;
color: var(--accent-red);
}
body.w2k#top .w2k-dialog-buttons {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 4px 12px 12px;
}
body.w2k#top .w2k-dialog-buttons .w2k-btn {
min-width: 88px;
min-height: 23px;
}
body.w2k#top .w2k-btn-default {
outline: 1px solid var(--dkshadow);
outline-offset: 0;
border-color: var(--hilight) var(--dkshadow) var(--dkshadow) var(--hilight);
box-shadow: inset 1px 1px var(--light), inset -1px -1px var(--dkshadow), 0 0 0 1px var(--dkshadow);
}
/* ==========================================================================
18. 响应式
========================================================================== */
/* 中等屏幕：三列降为两列 */
@media (max-width: 1200px) {
body.w2k#top .magazine-poster-grid,
body.w2k#top .portrait-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
@media (max-width: 1100px) {
body.w2k#top .post-grid,
body.w2k#top .magazine-featured-grid,
body.w2k#top .reading-related-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 900px) {
body.w2k#top .magazine-poster-grid,
body.w2k#top .portrait-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.w2k-desktop {
padding: 12px 12px 34px;
}
}
/* 手机：窗口铺满，去掉四周边距与内层按钮投影 */
@media (max-width: 767px) {
.w2k-desktop {
padding: 0;
}
.w2k-window {
width: 100%;
min-height: 100vh;
border-left: 0;
border-right: 0;
border-bottom: 0;
box-shadow: none;
}
.w2k-titlebar {
height: 24px;
padding-right: 3px;
}
.w2k-toolbar {
flex-wrap: wrap;
gap: 4px;
}
body.w2k#top .w2k-tool-label,
body.w2k#top .w2k-tool-sep,
body.w2k#top .w2k-address {
display: none !important;
}
.w2k-search {
flex: 1 1 100% !important;
}
.w2k-client {
padding: 8px 6px;
}
body.w2k#top .post-grid,
body.w2k#top .magazine-featured-grid,
body.w2k#top .portrait-grid,
body.w2k#top .magazine-poster-grid {
grid-template-columns: minmax(0, 1fr) !important;
}
body.w2k#top .reading-related-grid {
grid-template-columns: minmax(0, 1fr) !important;
}
body.w2k#top .reading-article-single {
max-width: none !important;
}
body.w2k#top .reading-content,
body.w2k#top .prose-paper {
padding: 12px 11px !important;
font-size: 14px !important;
}
body.w2k#top .magazine-section,
body.w2k#top .archive-year,
body.w2k#top .reading-related {
padding: 18px 7px 7px !important;
}
body.w2k#top .archive-timeline-item {
grid-template-columns: 46px auto minmax(0, 1fr) !important;
}
body.w2k#top .archive-timeline-item strong {
white-space: normal !important;
}
body.w2k#top .archive-category {
display: none !important;
}
body.w2k#top .paper-audio-cover {
width: 72px !important;
height: 72px !important;
}
body.w2k#top .w2k-status-field.w2k-status-brand {
display: none !important;
}
body.w2k#top .taxonomy-grid {
grid-template-columns: minmax(0, 1fr) !important;
}
}
@media (max-width: 480px) {
body.w2k#top .compact-filter {
align-items: stretch !important;
}
body.w2k#top .compact-filter-group {
flex-wrap: wrap !important;
}
body.w2k#top .w2k-status-field:not(.w2k-status-grow):not(.w2k-status-clock) {
display: none !important;
}
}
/* 尊重系统"减少动态效果"设置 */
@media (prefers-reduced-motion: reduce) {
body.w2k#top *,
body.w2k#top *::before,
body.w2k#top *::after {
animation: none !important;
transition: none !important;
}
}
/* ==========================================================================
19. 布局响应式（双栏资源管理器 / 左栏 + 正文的文章页）
========================================================================== */
/* 窄桌面：左栏收窄，正文继续吃满剩余宽度 */
@media (max-width: 1180px) {
body.w2k#top .w2k-client-doc {
grid-template-columns: 200px minmax(0, 1fr);
}
}
/* 双栏资源管理器收成单栏：目录树堆到主区上方 */
@media (max-width: 1000px) {
body.w2k#top .w2k-client-explorer {
grid-template-columns: minmax(0, 1fr);
}
body.w2k#top .w2k-sidebar {
position: static;
max-height: 40vh;
}
/* 归档页：时间轴单栏，摘要卡片收成一条挪到上面 */
body.w2k#top .w2k-archive-layout {
grid-template-columns: minmax(0, 1fr) !important;
}
body.w2k#top .w2k-archive-side {
position: static;
max-height: none;
order: -1;
}
body.w2k#top .w2k-archive-side .w2k-pane-body {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
gap: 5px !important;
max-height: none;
}
/* 标签云已改为标准叶子节点，不再需要独立容器样式 */
}
/* 窄屏：名称列跟着窗口收窄（仍然 ≥280px），两列不变 */
@media (max-width: 900px) {
body.w2k#top .w2k-details {
--list-name: clamp(280px, 44vw, 400px);
}
/* 双列表流收成单列，两个窗口上下叠 */
body.w2k#top .w2k-list-grid {
grid-template-columns: minmax(0, 1fr) !important;
gap: 8px !important;
}
}
/* 单栏：左栏两块面板原地出栈（display: contents），排成 大纲 → 正文 → 文章信息 */
@media (max-width: 820px) {
body.w2k#top .w2k-client-doc {
grid-template-columns: minmax(0, 1fr);
}
body.w2k#top .w2k-rail {
display: contents;
}
body.w2k#top .w2k-rail > .w2k-pane {
position: static;
max-height: none;
min-height: 0;
}
body.w2k#top .w2k-pane-nav {
order: 1;
}
body.w2k#top .w2k-pane-doc {
order: 2;
}
body.w2k#top .w2k-pane-meta {
order: 3;
}
body.w2k#top .w2k-toc {
max-height: 34vh !important;
}
}
/* 手机：工具栏整行铺开，搜索独占一行 */
@media (max-width: 767px) {
body.w2k#top .compact-filter,
.w2k-toolbar {
gap: 3px;
}
body.w2k#top .w2k-tool-fill {
display: none !important;
}
body.w2k#top .w2k-search {
flex: 1 1 100% !important;
order: 9;
}
body.w2k#top .w2k-tool-sep {
display: none !important;
}
body.w2k#top .w2k-client {
padding: 5px;
min-height: 0;
}
body.w2k#top .w2k-client-explorer,
body.w2k#top .w2k-client-doc {
gap: 5px;
}
body.w2k#top .w2k-sidebar {
max-height: 44vh;
}
}
/* 明细列表只留「名称 + 日期」 */
@media (max-width: 620px) {
body.w2k#top .w2k-details {
--list-name: 250px;
--list-date: 84px;
}
body.w2k#top .w2k-details-row .w2k-col-name .w2k-ico {
display: none !important;
}
body.w2k#top .w2k-count-field {
display: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
/* ==========================================================================
20. 收尾：分割条与虚拟网格随断点调整
========================================================================== */
/* 单栏时左栏已经出栈，分割条没有意义 */
@media (max-width: 820px) {
body.w2k#top .w2k-rail::after {
display: none !important;
}
}
/* 窄屏：列宽已经由 --list-name / --list-total 收窄，虚拟网格跟着表格宽度收口，
这里不再单独画斑马纹或竖分隔线，保持"整块底色 + 行线只到表格右边界"。 */
@media (max-width: 620px) {
body.w2k#top .w2k-details-body {
background-image: repeating-linear-gradient(180deg, transparent 0 21px, var(--grid-line) 21px 22px);
background-position: 0 0;
background-size: var(--list-total) 100%;
background-repeat: no-repeat;
}
}
/* ==========================================================================
21. 第十版：代码块排版强化 / 站点统计移入左栏 / 深色光影降对比
========================================================================== */
/* ---------- 21.1 左侧栏底部的「站点统计」：紧凑双列键值对 ---------- */
/* 目录树吃满侧栏可用高度，统计面板贴在左下方，正好填掉原来的空白 */
body.w2k#top .w2k-sidebar > .w2k-sidebar-details {
flex: 1 1 auto !important;
min-height: 0 !important;
}
body.w2k#top .w2k-sidebar > .win-groupbox,
body.w2k#top .w2k-sidebar > .w2k-sys-summary {
flex: 0 0 auto !important;
min-height: 0 !important;
margin: 3px !important;
padding: 9px 7px 7px !important;
gap: 4px !important;
}
/* 双列：左列一项、右列一项；行高压到 16px，11px 字号，信息密度对齐目录树 */
body.w2k#top .w2k-sidebar .w2k-sys-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0 10px !important;
}
body.w2k#top .w2k-sidebar .w2k-sys-item {
font-size: 11px !important;
line-height: 16px !important;
}
/* 侧栏只有 240px，点状引导线缩短到 4px，保证「键 + 值」永远同排 */
body.w2k#top .w2k-sidebar .w2k-sys-key::after {
min-width: 4px;
margin: 0 3px;
}
body.w2k#top .w2k-sidebar .w2k-sys-val {
font-size: 11px !important;
font-weight: 500 !important;
}
/* 配额条：宽度 100% 自适应充满、高 14px，贴着面板底边不留空白 */
body.w2k#top .w2k-sidebar .w2k-sys-bar {
width: 100% !important;
height: 14px !important;
margin: 4px 0 0 !important;
}
/* 窄屏侧栏堆到列表上方时：统计面板跟着走、不再抢高度，
同时把双列键值对摊成一行（auto-fit），宽出来的横向空间不浪费 */
@media (max-width: 1000px) {
body.w2k#top .w2k-sidebar > .win-groupbox,
body.w2k#top .w2k-sidebar > .w2k-sys-summary {
flex: 0 0 auto !important;
}
body.w2k#top .w2k-sidebar .w2k-sys-grid {
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
}
}
/* ---------- 21.2 深色光影系统：去掉刺眼的纯白高光与浅灰网格 ---------- */
/* 内凹：上左 #202020 / 下右 #3a3a3a，比外凸更"沉"一档，黑底上不出现亮线。
外凸（按钮 / 窗口 / 分组框）的高光已在 --hilight: #4a4a4a 里收口，
内阴影由 --light: #3a3a3a 与 --dkshadow: #202020 自动变soft，不需要再逐条重写。 */
html.dark body.w2k#top .win-inset,
html.dark body.w2k#top .w2k-sunken,
html.dark body.w2k#top .win-thin-inset,
html.dark body.w2k#top .w2k-thin-sunken {
/* 内凹立体边框：上左 #0d0d0d（凹下去）、下右 #484848（抬起来），
暗色下窗口边缘重新呈现工业凹陷感 */
border-color: #0d0d0d #484848 #484848 #0d0d0d !important;
}
/* 内凹区域底色沉降到深碳灰 #181818。
「窗口表面」例外：客户区（.w2k-main）、状态栏（.w2k-statusbar）、
文章页左栏面板（.w2k-pane / .w2k-toc）与列表行区（.w2k-details-body / .w2k-details-row）
保留各自的 --face / --window 底色 —— 它们是窗口本体，不该跟着输入区一起变黑。 */
html.dark body.w2k#top .w2k-sidebar,
html.dark body.w2k#top .table-scroll,
html.dark body.w2k#top .prose-paper table,
html.dark body.w2k#top table.win-propsheet {
background-color: #181818 !important;
}
/* 表格网格线：浅灰实线换成微弱暗线 #2e2e2e，长表格不再一格一格发亮 */
html.dark body.w2k#top .prose-paper table,
html.dark body.w2k#top table.win-propsheet {
border-color: #2e2e2e !important;
}
html.dark body.w2k#top .prose-paper th,
html.dark body.w2k#top .prose-paper td,
html.dark body.w2k#top table.win-propsheet thead th,
html.dark body.w2k#top table.win-propsheet tbody th,
html.dark body.w2k#top table.win-propsheet tbody td {
border-right-color: #2e2e2e !important;
border-bottom-color: #2e2e2e !important;
}
/* 表头保留一点"凸起"的暗示，但高光只给 4% 白；单元格不再有内阴影 */
html.dark body.w2k#top .prose-paper th {
box-shadow: inset 1px 1px rgba(255, 255, 255, .04), inset -1px -1px rgba(0, 0, 0, .4) !important;
}
html.dark body.w2k#top .prose-paper td {
box-shadow: none !important;
}
/* 深色代码块：容器与客户区统一 #141414，外围只有一圈沉稳暗灰凹凸槽，
不再出现"容器亮、正文暗"的断层高亮 */
html.dark body.w2k#top .code-block-wrapper {
background: #141414 !important;
border-color: #3a3a3a #202020 #202020 #3a3a3a !important;
box-shadow: inset 1px 1px rgba(255, 255, 255, .04), inset -1px -1px rgba(0, 0, 0, .5) !important;
}
html.dark body.w2k#top .prose-paper .code-block-wrapper pre.code-body,
html.dark body.w2k#top .prose-paper pre.code-body {
background: #141414 !important;
border-color: #202020 #3a3a3a #3a3a3a #202020 !important;
box-shadow: inset 1px 1px rgba(0, 0, 0, .5) !important;
}
/* 深色下代码区滚动条跟着压暗，别再是一条浅灰亮带 */
html.dark body.w2k#top .prose-paper .code-block-wrapper pre.code-body::-webkit-scrollbar-track {
background: #141414 !important;
}
html.dark body.w2k#top .prose-paper .code-block-wrapper pre.code-body::-webkit-scrollbar-thumb {
background: #3a3a3a !important;
border-color: #202020 !important;
}
/* 深色分组框（侧栏站点统计 / 属性面板）：刻线压暗，legend 底色跟着面板走 */
html.dark body.w2k#top .win-groupbox {
background: #2f2f2f !important;
border-color: #4a4a4a !important;
box-shadow: inset 1px 1px #3a3a3a, 1px 1px #202020 !important;
}
html.dark body.w2k#top .win-groupbox > legend {
background: #2f2f2f !important;
}
/* ==========================================================================
22. 第十一版：移动端（< 768px）减负与排版修复
========================================================================== */
/* ---------- 22.1 移动端功能精简：只留内容，不留外壳 ---------- */
@media (max-width: 767px) {
/* 首页 / 列表页：整块左栏（系统目录树 + 站点统计 / 存储配额面板）下线，
首屏直接从工具栏（排序 / 最新 / 热门 / 搜索）开始，接着就是文章列表。 */
body.w2k#top .w2k-sidebar {
display: none !important;
}
/* 文章页：文章信息（作者卡 / 属性表 / 操作按钮）、文章大纲（TOC）、最新文章
三块面板一并下线，正文独占整屏。DOM 保留（detail.js 仍会填充大纲），
只是不再占位、不再滚动。 */
body.w2k#top .w2k-rail > .w2k-pane-nav,
body.w2k#top .w2k-rail > .w2k-pane-meta,
body.w2k#top .w2k-rail > .w2k-pane-latest,
body.w2k#top .w2k-pane-nav,
body.w2k#top .w2k-pane-meta,
body.w2k#top .w2k-pane-latest {
display: none !important;
}
/* 文章页变成单栏、满宽，正文视窗不设高度上限，交给页面本身滚动（不出嵌套滚动条） */
body.w2k#top .w2k-client-doc {
grid-template-columns: minmax(0, 1fr) !important;
gap: 0 !important;
}
body.w2k#top .w2k-rail {
display: contents !important;
}
body.w2k#top .w2k-rail::after {
display: none !important;
}
body.w2k#top .w2k-pane-doc,
body.w2k#top .w2k-pane-doc .w2k-pane-body {
display: block !important;
max-height: none !important;
min-height: 0 !important;
overflow: visible !important;
padding: 4px !important;
}
/* 正文、播放器、相册、下载卡一起铺满可视宽度 */
body.w2k#top .w2k-pane-doc .reading-article,
body.w2k#top .w2k-pane-doc .prose-paper,
body.w2k#top #article-content {
max-width: none !important;
width: 100% !important;
}
/* 唯一允许的横向滚动：代码块与宽表格自己的那一层（缩进也被压到最小） */
body.w2k#top .prose-paper .code-block-wrapper pre.code-body,
body.w2k#top .prose-paper pre.code-body {
padding: 7px 8px !important;
}
body.w2k#top .table-scroll {
margin: 1em 0 !important;
}
body.w2k#top .w2k-breadcrumb {
flex-wrap: nowrap !important;
padding: 3px 5px !important;
font-size: 11px !important;
}
/* 面包屑：前两段不许断行（"首页"被拆成两行会很难看），最后一段自己省略 */
body.w2k#top .w2k-breadcrumb > a,
body.w2k#top .w2k-breadcrumb > .w2k-crumb-sep {
flex: 0 0 auto !important;
white-space: nowrap !important;
}
body.w2k#top .w2k-crumb-current {
flex: 1 1 auto !important;
min-width: 0 !important;
}
}
/* ---------- 22.2 密码便签：复古微灰输入框 + 单行弹性对齐 ---------- */
@media (max-width: 767px) {
body.w2k#top .paper-hide-lock,
body.w2k#top .prose-paper .paper-hide-lock {
max-width: none !important;
margin: 1em 0 !important;
padding: 0 0 8px !important;
}
/* 输入框 + 解开按钮：水平单行，输入框 flex:1 撑满剩余宽度 */
body.w2k#top .hide-lock-form {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 4px !important;
margin: 0 8px !important;
}
/* 复古微灰底 #eaeaea（不是刺眼的纯白）+ Win98 深内凹 */
body.w2k#top .hide-lock-form input {
flex: 1 1 auto !important;
min-width: 0 !important;
height: 24px !important;
background: #eaeaea !important;
color: #000000 !important;
caret-color: #000000 !important;
font-size: 12px !important;
border: 1px solid #808080 !important;
box-shadow: inset 1px 1px 0 0 #000000, inset -1px -1px 0 0 #dfdfdf !important;
}
body.w2k#top .hide-lock-form button {
flex: 0 0 auto !important;
min-width: 76px !important;
height: 24px !important;
padding: 0 8px !important;
}
body.w2k#top .hide-lock-status {
margin: 0 8px !important;
}
/* 暗色下这两个浅色字段跟着输入区令牌走，不出白块 */
html.dark body.w2k#top .hide-lock-form input {
background: var(--field) !important;
color: var(--text) !important;
caret-color: var(--text) !important;
border-color: var(--w2k-shadow) var(--hilight) var(--hilight) var(--w2k-shadow) !important;
box-shadow: inset 1px 1px var(--dkshadow), inset -1px -1px var(--light) !important;
}
}
/* ---------- 22.3 下载卡：纵向紧凑流（元信息 / 双列码 / 整行按钮） ---------- */
/* 先修桌面：左块改成弹性收缩 + 文件名省略号，杜绝"文件名把码挤到换行"的错位 */
body.w2k#top .download-left {
flex: 1 1 auto !important;
min-width: 0 !important;
}
body.w2k#top .download-codes {
min-width: 0 !important;
}
body.w2k#top .download-code b {
min-width: 0 !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 767px) {
/* 容器：外凸卡片 + 纵向紧凑流，没有绝对定位、没有固定宽高 */
body.w2k#top .paper-download-card {
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
gap: 6px !important;
margin: 1em 0 !important;
padding: 7px !important;
}
/* 第一行：32x32 软盘图标 + 文件名 / 大小 */
body.w2k#top .download-left {
flex: 0 0 auto !important;
width: 100% !important;
gap: 7px !important;
}
body.w2k#top .download-head {
flex: 1 1 auto !important;
gap: 7px !important;
align-items: center !important;
}
body.w2k#top .download-head > div {
flex: 1 1 auto !important;
min-width: 0 !important;
}
body.w2k#top .download-head strong {
font-size: 12px !important;
font-weight: 700 !important;
}
body.w2k#top .download-head small {
margin-top: 1px !important;
font-size: 11px !important;
}
/* 第二行：提取码 / 解压码各占一半，够宽就是 2 列（低于 300px 才回落成 1 列），
每个码都是内凹只读小标签，点一下即复制 */
body.w2k#top .download-codes {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
gap: 4px !important;
width: 100% !important;
}
body.w2k#top .download-code {
display: flex !important;
width: 100% !important;
height: 24px !important;
padding: 0 3px 0 6px !important;
}
body.w2k#top .download-code em {
margin-left: auto !important;
}
/* 第三行：前往下载横向撑满整行、26px 高，完整外凸按钮样式 */
body.w2k#top .download-action {
flex: 0 0 auto !important;
width: 100% !important;
margin-left: 0 !important;
}
body.w2k#top .download-main {
width: 100% !important;
min-width: 0 !important;
height: 26px !important;
min-height: 26px !important;
padding: 0 10px !important;
}
}
/* ==========================================================================
23. 第十二版：导航重组 / 移动端工具栏精简 / 内容页组件压实
========================================================================== */
/* ---------- 23.1 工具栏里的「排序筛选组」独立成块 ---------- */
/* 模板把「排序 / 分类 / 标签 / 清除」包进 .compact-filter-sorts，
桌面端用 display: contents 让它们照旧直接参与 .compact-filter-main 的 flex 布局
（加这层包装纯粹是为了移动端能整块隐藏，桌面零变化）。 */
body.w2k#top .compact-filter-sorts {
display: contents !important;
}
/* ---------- 23.2 左侧「站点统计」融进目录树底色 ---------- */
/* 面板内部改成与目录树内凹面完全同色：浅色 #f2f2f2（= --window，视觉上的"内凹白底"）、
暗色 #181818（与暗色侧栏同色）。这样上下两块只剩一圈蚀刻线，
不会出现"灰面板压在灰树上"的色块感。
注意：直接写 #ffffff 反而会在 #f2f2f2 的树面上重新造出一条边。 */
body.w2k#top .w2k-sidebar .win-groupbox {
background: var(--window) !important;
}
body.w2k#top .w2k-sidebar .win-groupbox > legend {
background: var(--window) !important;
}
html.dark body.w2k#top .w2k-sidebar .win-groupbox {
background: #181818 !important;
}
html.dark body.w2k#top .w2k-sidebar .win-groupbox > legend {
background: #181818 !important;
}
/* ---------- 23.3 移动端工具栏：整行排序筛选下线，只留搜索 ---------- */
@media (max-width: 767px) {
/* 排序 / 最新 / 热门 / 随机 / 分类下拉 / 标签下拉 / 清除 —— 整组隐藏 */
body.w2k#top .compact-filter-sorts {
display: none !important;
}
/* 工具栏盒子收成一条搜索行，紧贴菜单栏下方 */
body.w2k#top .compact-filter {
margin: 0 0 4px !important;
padding: 2px !important;
}
body.w2k#top .compact-filter-main {
gap: 0 !important;
}
/* 搜索框 + 搜索按钮：整行弹性铺开，输入区加高到 26px 方便点按 */
body.w2k#top .compact-filter .w2k-search {
flex: 1 1 100% !important;
order: 0 !important;
gap: 4px !important;
}
body.w2k#top .compact-filter .w2k-search .w2k-input {
height: 26px !important;
}
body.w2k#top .compact-filter .w2k-search .w2k-btn-search {
height: 26px !important;
padding: 0 12px !important;
}
/* 分隔块、弹性填充、计数都收掉：移动端这一行只留搜索 */
body.w2k#top .compact-filter .w2k-tool-sep,
body.w2k#top .compact-filter .w2k-tool-fill,
body.w2k#top .compact-filter .w2k-count-field {
display: none !important;
}
}
/* ---------- 23.4 密码便签：压掉多余高度 ---------- */
body.w2k#top .paper-hide-lock,
body.w2k#top .prose-paper .paper-hide-lock {
gap: 6px !important;
/* 紧凑外壳：左右 8px + 底部 6px（等价 p-2 的观感），顶部留给通栏标题条 */
padding: 0 8px 6px !important;
}
/* 标题条依然通栏贴顶：负的左右外边距抵消面板的 8px 内边距 */
body.w2k#top .paper-hide-lock::before {
margin: 0 -8px !important;
}
/* 空状态不再预占一行高度 */
body.w2k#top .hide-lock-status {
min-height: 0 !important;
margin-top: 0 !important;
}
/* 输入框与按钮仍是 22px，但面板上下不再有 10px 空槽 */
body.w2k#top .hide-lock-form input,
body.w2k#top .hide-lock-form button {
height: 22px !important;
}
/* ---------- 23.5 下载码签：整块就是复制按钮 ---------- */
/* main.go 已不再输出 复制，码签自己做按钮：
指针形状、禁止选中、按下凹陷 1px + 光影反转。点击走 detail.js 的 [data-copy-value] 复制并弹 toast。 */
body.w2k#top .download-code {
cursor: pointer !important;
user-select: none !important;
-webkit-user-select: none !important;
-webkit-tap-highlight-color: transparent;
}
/* 兜底：万一命中缓存里的旧标记，也把"复制"两个汉字藏掉 */
body.w2k#top .download-code em {
display: none !important;
}
body.w2k#top .download-code:hover {
background: var(--window) !important;
}
body.w2k#top .download-code:active {
border-color: var(--dkshadow) var(--hilight) var(--hilight) var(--dkshadow) !important;
box-shadow: inset 1px 1px var(--dkshadow), inset -1px -1px var(--light) !important;
transform: translateY(1px) !important;
}
body.w2k#top .download-code:focus-visible {
outline: 1px dotted var(--text) !important;
outline-offset: -3px !important;
}
html.dark body.w2k#top .download-code:hover {
background: var(--window-alt) !important;
}
/* ---------- 23.6 正文提示框：压掉上下空白槽 ---------- */
body.w2k#top .prose-paper .paper-callout {
margin: 0.9em 0 !important;
padding: 6px 10px !important;
}
/* 提示框里的段落不再带 1em 的上下外边距（"大块无文本空白"的来源） */
body.w2k#top .prose-paper .paper-callout > :first-child {
margin-top: 0 !important;
}
body.w2k#top .prose-paper .paper-callout > :last-child {
margin-bottom: 0 !important;
}
body.w2k#top .prose-paper .paper-callout p,
body.w2k#top .prose-paper .paper-callout .callout-body,
body.w2k#top .prose-paper .paper-callout .callout-body > :first-child {
margin-top: 0 !important;
}
body.w2k#top .prose-paper .paper-callout .callout-body > :last-child {
margin-bottom: 0 !important;
}
body.w2k#top .prose-paper .paper-callout p,
body.w2k#top .prose-paper .paper-callout .callout-body {
font-size: 13px !important;
line-height: 1.6 !important;
}
/* 可折叠提示框：summary 与展开区分左右 10px、上下各 6px */
body.w2k#top .prose-paper details.paper-callout > summary {
padding: 6px 10px !important;
}
body.w2k#top .prose-paper details.paper-callout > .callout-body {
padding: 0 10px 6px !important;
}
/* ==========================================================================
24. 第十三版：索引页紧凑卡片 / 菜单下划线 / 列表虚拟行线 / 移动端封面卡片流
========================================================================== */
/* ---------- 24.1 顶部菜单：默认无下划线，悬停才给 ---------- */
/* 菜单项的助记字母放在 里（Win98 的访问键写法），默认不画下划线；
鼠标悬停时才出现，其余状态只靠灰底高亮。 */
.w2k-menu a,
.w2k-menu a u {
text-decoration: none !important;
}
.w2k-menu a:hover,
.w2k-menu a:hover u {
text-decoration: underline !important;
text-underline-offset: 2px;
}
/* ---------- 24.2 分类磁贴：单行紧凑（高度约减半） ---------- */
/* 从"两行竖排卡片"压成"一行条目"：图标 + 名称 + 计数同一行，
高度 = 6 + 16 + 6 + 边框 ≈ 30px（原来约 51px）。
注意 front-theme.css 给 .taxonomy-tile 留了 min-height: 96px，必须显式清零。 */
body.w2k#top .taxonomy-tile {
flex-direction: row !important;
align-items: center !important;
gap: 7px !important;
padding: 6px 10px !important;
min-height: 0 !important;
}
/* 图标从绝对定位改成普通 flex 项，才能跟文字同一行 */
body.w2k#top .taxonomy-tile::before {
position: static !important;
left: auto !important;
top: auto !important;
flex: 0 0 auto !important;
width: 16px !important;
height: 16px !important;
}
body.w2k#top .taxonomy-tile strong {
flex: 0 1 auto !important;
min-width: 0 !important;
font-size: 12px !important;
}
body.w2k#top .taxonomy-tile small {
flex: 0 0 auto !important;
margin-left: auto !important;
font-size: 10px !important;
}
/* 分类网格更密一点，一行能多放几个 */
body.w2k#top .taxonomy-grid {
grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)) !important;
gap: 6px !important;
}
/* ---------- 24.3 标签磁贴：窄高各减半，密集网格并排 ---------- */
/* 标签索引用 .taxonomy-grid.is-tags：列宽收到 124~140px，
每块最多 140px 宽、至少 50px 高，密集排布，不再是一条条横跨的宽条。 */
body.w2k#top .taxonomy-grid.is-tags {
grid-template-columns: repeat(auto-fill, minmax(124px, 140px)) !important;
gap: 6px !important;
justify-content: start !important;
}
body.w2k#top .taxonomy-grid.is-tags .taxonomy-tile {
flex-direction: column !important;
align-items: flex-start !important;
gap: 2px !important;
max-width: 140px !important;
min-height: 50px !important;
padding: 7px 8px 7px 28px !important;
}
body.w2k#top .taxonomy-grid.is-tags .taxonomy-tile::before {
position: absolute !important;
left: 8px !important;
top: 8px !important;
width: 14px !important;
height: 14px !important;
background-size: 14px 14px !important;
}
body.w2k#top .taxonomy-grid.is-tags .taxonomy-tile small {
margin-left: 0 !important;
}
/* ---------- 24.4 列表虚拟行线：与真实行严格同一节拍，铺满整个内凹容器 ---------- */
/* 行高收口成变量：真实行与背景条纹共用它，永远对齐。
background-size: 100% 100% 让条纹横向铺满容器（不再只画到 --list-total，
文章少时右侧/下方的空白区也会一直平铺下去，不会出现"半块没有线"的空洞）。 */
body.w2k#top .w2k-details {
--list-row: 22px;
}
body.w2k#top .w2k-details-body {
background-image: repeating-linear-gradient(to bottom,
transparent 0 calc(var(--list-row) - 1px),
var(--grid-line) calc(var(--list-row) - 1px),
var(--grid-line) var(--list-row)) !important;
background-size: 100% 100% !important;
background-position: 0 0 !important;
background-repeat: repeat !important;
}
body.w2k#top .w2k-details-row {
height: var(--list-row) !important;
min-height: var(--list-row) !important;
}
/* ---------- 24.5 卡片外壳：与 .win-outset 完全同一套配方 ---------- */
/* 图文卡片就是"小窗口"：外凸立体边框 + #c0c0c0 表面，
配方与 .win-outset / 下载卡 / 便签面板保持一致（亮边 in、暗边 out）。 */
body.w2k#top .w2k-card {
background: var(--face) !important;
border: 1px solid !important;
border-color: var(--hilight) var(--dkshadow) var(--dkshadow) var(--hilight) !important;
box-shadow: inset 1px 1px var(--light), inset -1px -1px var(--dkshadow) !important;
}
/* 卡片标题一律加粗（链接是 ，会被全站链接字重规则冲淡） */
body.w2k#top .post-card-title,
body.w2k#top .post-card-title a,
body.w2k#top .magazine-post-copy h3,
body.w2k#top .magazine-post-copy h3 a,
body.w2k#top .poster-copy h2,
body.w2k#top .poster-copy h2 a,
body.w2k#top .magazine-poster-copy h3,
body.w2k#top .magazine-poster-copy h3 a {
font-weight: 700 !important;
}
/* ---------- 24.6 移动端：1 行 2 列封面卡片流（Win98 小窗口卡片） ---------- */
@media (max-width: 767px) {
/* 所有图文封面卡片流都收成两列（首页楼层 + 列表页两种视图） */
body.w2k#top .post-grid,
body.w2k#top .portrait-grid,
body.w2k#top .magazine-featured-grid,
body.w2k#top .magazine-poster-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 6px !important;
}
/* 封面统一 3/4 竖版 + cover 裁切：横图竖图在手机上一模一样高 */
body.w2k#top .post-card-media,
body.w2k#top .magazine-post-media,
body.w2k#top .poster-media,
body.w2k#top .magazine-poster-media {
aspect-ratio: 3 / 4 !important;
}
/* 卡片外壳：外凸 + #c0c0c0，内边距收到 2px */
body.w2k#top .w2k-card {
padding: 2px !important;
}
/* 标题栏 18px：左侧图标 + 大类名（纯白），右侧微型 [_ □ ×] */
body.w2k#top .w2k-card-bar {
height: 18px !important;
min-height: 18px !important;
gap: 3px !important;
margin-bottom: 2px !important;
padding: 0 2px !important;
font-size: 10px !important;
}
body.w2k#top .w2k-card-ico {
width: 10px !important;
height: 11px !important;
background-size: 10px 11px !important;
}
body.w2k#top .w2k-card-name {
font-size: 10px !important;
}
/* 右端只留控制按键：状态灯与"置顶/已发布"文案在窄卡片里太挤，整块收掉 */
body.w2k#top .w2k-card-state {
display: none !important;
}
/* 底部属性区第一行：标题加粗、单行省略号 */
body.w2k#top .post-card-body,
body.w2k#top .magazine-post-copy,
body.w2k#top .poster-copy,
body.w2k#top .magazine-poster-copy {
padding: 4px 3px 2px !important;
}
body.w2k#top .post-card-title,
body.w2k#top .magazine-post-copy h3,
body.w2k#top .poster-copy h2,
body.w2k#top .magazine-poster-copy h3 {
font-size: 12px !important;
line-height: 1.3 !important;
margin: 0 0 2px !important;
}
/* 第二行：日期左、阅读时长右，10px 系统灰 */
body.w2k#top .post-card-meta-row,
body.w2k#top .magazine-post-meta,
body.w2k#top .poster-meta,
body.w2k#top .magazine-poster-copy > div {
gap: 4px !important;
margin-top: 3px !important;
padding: 2px 0 0 !important;
font-size: 10px !important;
}
/* 两列卡片里的封面占位文案跟着缩小 */
body.w2k#top .post-card-placeholder b,
body.w2k#top .magazine-placeholder b {
font-size: 9px !important;
}
}
/* ==========================================================================
25. 第十四版：空正文兜底 / 标签结果页统一列表 / PJAX 置换期细节
========================================================================== */
/* 影视类文章只有播放器、没有正文时，正文容器不再占位。
模板层已经用 {{if .Post.HTML}} 不渲染它，这里再兜一层：
万一输出了空容器（或只剩空白字符），也直接隐藏，不留白槽。 */
body.w2k#top #article-content:empty,
body.w2k#top .reading-content:empty {
display: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
min-height: 0 !important;
}
/* 正文容器为空时，工作区与文章外框不要保留额外下边距 */
body.w2k#top .reading-article:not(:has(> *:not(:empty))) {
padding-bottom: 0 !important;
}
/* 标签结果页与分类页共用同一条双列表流：容器左侧不需要额外缩进，
空白区由 .w2k-details-body 的虚拟横线自动补满（见第 24.4 节）。 */
body.w2k#top .w2k-list-grid,
body.w2k#top .w2k-main > .w2k-list-grid {
width: 100% !important;
}
/* 「ListView 打开网格线」效果：内容不足时列表容器向上撑到可用高度
（上限仍是 480px），于是 .w2k-details-body 的虚拟横线一直平铺到底，
只有 1-2 篇文章也不会在下面留一大块没有线的空洞。
只在双栏桌面生效；窄屏单栏时列表按内容高度堆叠，不做纵向拉伸。 */
@media (min-width: 1001px) {
body.w2k#top .w2k-client-explorer {
align-items: stretch !important;
}
body.w2k#top .w2k-main {
display: flex !important;
flex-direction: column !important;
}
body.w2k#top .w2k-main > .article-region {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
min-height: 0 !important;
}
body.w2k#top .w2k-list-grid {
flex: 1 1 auto !important;
align-items: stretch !important;
}
body.w2k#top .w2k-list-grid > .w2k-details {
height: 100% !important;
max-height: 480px !important;
}
body.w2k#top .w2k-list-grid .w2k-details-body {
flex: 1 1 auto !important;
min-height: 0 !important;
max-height: calc(480px - 24px) !important;
}
}
/* PJAX 置换的那一帧：不做任何淡入淡出（Win98 没有过渡动画），
只保证内容立刻可见，避免"闪一下再出现"。 */
body.w2k#top #w2k-client {
animation: none !important;
transition: none !important;
opacity: 1 !important;
}
/* ==========================================================================
26. 相册：纯 CSS 多列瀑布流（Masonry）+ 分批懒加载
--------------------------------------------------------------------------
布局只用 column-count / column-gap：浏览器自己排多列，卡片断列由
break-inside: avoid 兜住；JS 只负责"往容器里追加下一批"，不参与排版。
PC 3 列 → 平板 2 列 → 手机 2 列。
========================================================================== */
/* 外壳：多列容器（相当于 Tailwind 的 columns-2 md:columns-3 gap-2） */
body.w2k#top .paper-gallery,
body.w2k#top .prose-paper .paper-gallery {
column-count: initial !important;
}
body.w2k#top .paper-gallery-grid {
display: block !important;
grid-template-columns: none !important;
gap: 0 !important;
column-count: 3 !important;
column-gap: 8px !important;
}
/* 列数由"切换按钮"决定，桌面默认三列 */
body.w2k#top .paper-gallery.is-layout-single .paper-gallery-grid {
column-count: 1 !important;
}
body.w2k#top .paper-gallery.is-layout-double .paper-gallery-grid {
column-count: 2 !important;
}
body.w2k#top .paper-gallery.is-layout-three .paper-gallery-grid {
column-count: 3 !important;
}
/* 卡片：绝不跨列截断，块间距 8px（相当于 break-inside-avoid mb-2） */
body.w2k#top .paper-photo-card,
body.w2k#top .prose-paper .paper-photo-card {
display: block !important;
width: 100% !important;
break-inside: avoid !important;
page-break-inside: avoid !important;
-webkit-column-break-inside: avoid !important;
margin: 0 0 8px !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* 关键：旧主题按布局给卡片写死了 aspect-ratio（1/1、4/3、16/10）并把链接绝对定位，
瀑布流必须全部解除 —— 卡片高度交给图片的原始比例。 */
body.w2k#top .paper-gallery .paper-photo-card,
body.w2k#top .paper-gallery[data-gallery] .paper-photo-card {
aspect-ratio: auto !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
}
/* 图片外层 = 网格单元：四条边统一 1px 浅灰细线 #dfdfdf，底色 #f7f7f7。
这里刻意**不用** .win-inset 内凹（左上 #808080 深灰 + 右下白 + 内阴影）：
瀑布流 3 列拼合时，每张卡片左上那道深线会连成一片，视觉上"左上发黑、右下干净"，
又重又割裂。悬停时才瞬时翻成外凸高光（左上白、右下深灰）给一点可点反馈。 */
body.w2k#top .paper-photo-link,
body.w2k#top .paper-gallery .paper-photo-link,
body.w2k#top .paper-gallery[data-gallery] .paper-photo-link {
position: relative !important;
inset: auto !important;
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
aspect-ratio: auto !important;
padding: 0 !important;
background: #f7f7f7 !important;
border: 1px solid #dfdfdf !important;
box-shadow: none !important;
border-radius: 0 !important;
text-decoration: none !important;
overflow: hidden !important;
}
/* 悬停：只翻边框光影（微外凸高光），不加粗任何一条边、不加投影 */
body.w2k#top .paper-photo-link:hover,
body.w2k#top .paper-gallery .paper-photo-link:hover,
body.w2k#top .paper-gallery[data-gallery] .paper-photo-link:hover,
body.w2k#top .paper-photo-link:focus-visible {
background: #ffffff !important;
border-color: var(--hilight) var(--w2k-shadow) var(--w2k-shadow) var(--hilight) !important;
}
html.dark body.w2k#top .paper-photo-link,
html.dark body.w2k#top .paper-gallery .paper-photo-link,
html.dark body.w2k#top .paper-gallery[data-gallery] .paper-photo-link {
background: #2b2b2b !important;
border-color: #3c3c3c !important;
}
html.dark body.w2k#top .paper-photo-link:hover,
html.dark body.w2k#top .paper-gallery .paper-photo-link:hover {
background: #333333 !important;
border-color: #6a6a6a #1f1f1f #1f1f1f #6a6a6a !important;
}
/* 图片：块级 + 撑满列宽 + 原始比例（相当于 w-full h-auto block） */
body.w2k#top .paper-gallery .paper-photo-image,
body.w2k#top .paper-gallery[data-gallery] .paper-photo-image,
body.w2k#top .paper-photo-image,
body.w2k#top .prose-paper .paper-photo-image {
display: block !important;
width: 100% !important;
height: auto !important;
max-height: none !important;
object-fit: contain !important;
border: 0 !important;
border-radius: 0 !important;
background: var(--window) !important;
}
/* 还没下载完的图先按 4:3 占位，图片到货时瀑布流不再"跳一下" */
body.w2k#top .paper-gallery .paper-photo-card.is-pending .paper-photo-link {
aspect-ratio: 4 / 3 !important;
}
body.w2k#top .paper-gallery .paper-photo-card.is-pending .paper-photo-image {
height: 100% !important;
object-fit: cover !important;
opacity: .88;
}
/* 新追加的卡片淡入（主题把 transition 全关了，所以用 animation） */
body.w2k#top .paper-photo-card.is-entering {
animation: w2k-photo-in .18s steps(4, end) 1 both;
}
@keyframes w2k-photo-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* 加载更多：居中 + Win98 外凸按钮（按下下沉 1px、光影反转） */
body.w2k#top .paper-gallery-more {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
margin: 6px 0 0 !important;
padding: 5px 4px !important;
background: var(--face) !important;
border: 1px solid !important;
border-color: var(--hilight) var(--dkshadow) var(--dkshadow) var(--hilight) !important;
box-shadow: inset 1px 1px var(--light), inset -1px -1px var(--dkshadow) !important;
}
body.w2k#top .paper-gallery-more[hidden] {
display: none !important;
}
body.w2k#top .paper-gallery-loadmore {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 23px !important;
min-width: 150px !important;
padding: 0 14px !important;
background: var(--face) !important;
color: var(--text) !important;
font-family: var(--w2k-font) !important;
font-size: 12px !important;
letter-spacing: 0 !important;
border: 1px solid !important;
border-color: var(--hilight) var(--dkshadow) var(--dkshadow) var(--hilight) !important;
box-shadow: inset 1px 1px var(--light), inset -1px -1px var(--dkshadow) !important;
border-radius: 0 !important;
cursor: pointer;
}
body.w2k#top .paper-gallery-loadmore:active {
border-color: var(--dkshadow) var(--hilight) var(--hilight) var(--dkshadow) !important;
box-shadow: inset 1px 1px var(--dkshadow), inset -1px -1px var(--light) !important;
padding-top: 1px !important;
transform: translate(1px, 1px) !important;
}
/* 全部加载完：按钮退化成一行纯文本状态 */
body.w2k#top .paper-gallery-loadmore[disabled],
body.w2k#top .paper-gallery-loadmore.is-done {
height: auto !important;
min-width: 0 !important;
padding: 2px 4px !important;
background: transparent !important;
color: var(--gray-text) !important;
border-color: transparent !important;
box-shadow: none !important;
transform: none !important;
cursor: default;
}
body.w2k#top .paper-gallery-more.is-done {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
body.w2k#top .paper-gallery-more-hint {
font-size: 11px !important;
color: var(--text-muted) !important;
}
/* 平板：三列收成两列（单列布局不受影响） */
@media (max-width: 1024px) {
body.w2k#top .paper-gallery.is-layout-three .paper-gallery-grid {
column-count: 2 !important;
}
}
/* 手机：三列同样收成两列，按钮整行更好点 */
@media (max-width: 767px) {
body.w2k#top .paper-gallery.is-layout-three .paper-gallery-grid {
column-count: 2 !important;
}
body.w2k#top .paper-gallery-grid {
column-gap: 6px !important;
}
body.w2k#top .paper-gallery-loadmore {
flex: 1 1 auto !important;
}
}
/* ==========================================================================
27. 第十七版：相册去壳 + 视图切换上移面包屑工具条（方案 A）
--------------------------------------------------------------------------
① 相册不再自带 Windows 窗口壳 —— 蓝色标题栏（图片预览（已购）+ 微缩按钮组）
与外凸大边框整块拆掉，图片网格直接顶格平铺，单张图片仍是 .win-inset 内凹相框；
② 视图切换按钮组上移到文章面包屑工具条右端：左侧路径 / 右侧按钮，两端对齐，
20px 微型外凸按钮，当前项呈内凹下沉激活态；
③ 视图模式：grid（等高网格 = grid-cols-2 md:grid-cols-3 gap-2）/
masonry（纯 CSS 多列瀑布流，默认）/ two（两列瀑布流）/ single（单列大图）。
========================================================================== */
/* ---------- 27.1 拆壳：无底色、无边框、无内边距，图片直接顶格 ---------- */
body.w2k#top .paper-gallery,
body.w2k#top .prose-paper .paper-gallery,
body.w2k#top .paper-gallery[data-gallery] {
margin: 10px 0 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* 相册是正文第一块时彻底顶格 */
body.w2k#top .prose-paper > .paper-gallery:first-child {
margin-top: 0 !important;
}
/* 旧缓存 / 旧主题里残留的相册标题栏与内嵌切换组一律不再出现 */
body.w2k#top .paper-gallery-head,
body.w2k#top .paper-gallery[data-gallery] .paper-gallery-head,
body.w2k#top .paper-gallery > .paper-gallery-switcher {
display: none !important;
}
/* ---------- 27.2 面包屑工具条：左路径 + 右视图按钮，两端对齐 ---------- */
body.w2k#top .w2k-breadcrumb {
justify-content: space-between !important;
gap: 8px !important;
}
body.w2k#top .w2k-crumb-tools {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 4px !important;
flex: 0 0 auto !important;
margin-left: auto !important;
min-width: 0 !important;
}
body.w2k#top .w2k-crumb-tools[hidden] {
display: none !important;
}
body.w2k#top .w2k-view-switch {
display: inline-flex !important;
align-items: center !important;
gap: 2px !important;
flex: 0 0 auto !important;
}
/* ---------- 27.3 微型切换按钮：外凸 20px / 按下下沉 1px / 激活内凹 ---------- */
body.w2k#top .w2k-view-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 20px !important;
height: 20px !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
background: var(--face) !important;
color: var(--text) !important;
border: 1px solid !important;
border-color: var(--hilight) var(--dkshadow) var(--dkshadow) var(--hilight) !important;
box-shadow: inset 1px 1px var(--light), inset -1px -1px var(--dkshadow) !important;
border-radius: 0 !important;
font-family: var(--w2k-font) !important;
font-size: 11px !important;
line-height: 1 !important;
cursor: pointer;
}
body.w2k#top .w2k-view-btn:active {
border-color: var(--dkshadow) var(--hilight) var(--hilight) var(--dkshadow) !important;
box-shadow: inset 1px 1px var(--dkshadow), inset -1px -1px var(--light) !important;
padding-top: 1px !important;
transform: translate(1px, 1px) !important;
}
body.w2k#top .w2k-view-btn.is-active {
background: var(--window) !important;
border-color: var(--dkshadow) var(--hilight) var(--hilight) var(--dkshadow) !important;
box-shadow: inset 1px 1px var(--dkshadow), inset -1px -1px var(--light) !important;
padding-top: 1px !important;
transform: none !important;
}
body.w2k#top .w2k-view-icon {
display: block !important;
width: 12px !important;
height: 12px !important;
min-width: 0 !important;
min-height: 0 !important;
font-size: 11px !important;
line-height: 12px !important;
text-align: center !important;
}
/* ---------- 27.4 四种视图模式（排版全部在 CSS 里） ---------- */
/* 瀑布流（默认）：纯 CSS 多列 */
body.w2k#top .paper-gallery.is-view-masonry .paper-gallery-grid {
display: block !important;
column-count: 3 !important;
column-gap: 8px !important;
}
/* 两列瀑布流 */
body.w2k#top .paper-gallery.is-view-two .paper-gallery-grid {
display: block !important;
column-count: 2 !important;
column-gap: 8px !important;
}
/* 单列大图 */
body.w2k#top .paper-gallery.is-view-single .paper-gallery-grid {
display: block !important;
column-count: 1 !important;
}
/* 网格视图：等高网格，空格子靠 grid 自动补齐，图片 cover 填满 */
body.w2k#top .paper-gallery.is-view-grid .paper-gallery-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
column-count: auto !important;
}
body.w2k#top .paper-gallery.is-view-grid .paper-photo-card {
margin: 0 !important;
break-inside: auto !important;
page-break-inside: auto !important;
-webkit-column-break-inside: auto !important;
}
body.w2k#top .paper-gallery.is-view-grid .paper-photo-card .paper-photo-link,
body.w2k#top .paper-gallery.is-view-grid .paper-photo-card.is-pending .paper-photo-link {
aspect-ratio: 1 / 1 !important;
height: auto !important;
}
body.w2k#top .paper-gallery.is-view-grid .paper-photo-image {
height: 100% !important;
object-fit: cover !important;
}
/* ---------- 27.5 响应式：平板收两列（网格同步收两格），手机 gap 收紧 ---------- */
@media (max-width: 1024px) {
body.w2k#top .paper-gallery.is-view-masonry .paper-gallery-grid {
column-count: 2 !important;
}
body.w2k#top .paper-gallery.is-view-grid .paper-gallery-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 767px) {
body.w2k#top .paper-gallery.is-view-masonry .paper-gallery-grid,
body.w2k#top .paper-gallery.is-view-two .paper-gallery-grid {
column-count: 2 !important;
column-gap: 6px !important;
}
body.w2k#top .paper-gallery.is-view-grid .paper-gallery-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 6px !important;
}
body.w2k#top .w2k-crumb-tools {
gap: 2px !important;
}
}
/* ==========================================================================
28. 第十八版：暗色统一 + 状态栏精简 + 归档页减负 + 角标/边线/便签修复
--------------------------------------------------------------------------
① 暗色左侧目录树不再"死黑"：底色与工作区统一为深炭灰 #262626，
内凹边框调成柔和的深暗光影（#383838 / #1a1a1a），消除左右割裂感；
② 状态栏只留 就绪 / 文章数 / 分类·标签 / 版权 —— 红色连接指示灯与时钟整块下线；
③ 移动端（≤767px）归档页隐藏「归档统计」大卡片，首屏直接从年份分组开始；
④ 相册单图上的放大镜角标（.paper-photo-zoom）彻底删除，DOM 不再输出、CSS 再兜底隐藏；
⑤ 正文表格与代码块的左边线回到 1px 蚀刻灰线（浅 #808080 / 暗 #3a3a3a），不再深黑加粗；
⑥ 密码便签：暗色下按钮文字纯白，输入槽抹掉旧主题的白底内衬（#c0c0c0 / 暗 #2b2b2b）。
========================================================================== */
/* ---------- 28.1 暗色：左侧目录树底色与工作区统一为深炭灰 ---------- */
html.dark body.w2k#top .w2k-sidebar,
html.dark body.w2k#top .w2k-sidebar.win-inset {
background-color: #262626 !important;
border-color: #383838 #1a1a1a #1a1a1a #383838 !important;
}
/* 侧栏内部的树面、滚动区与「站点统计」分组框同步换色，不留深浅两块拼接 */
html.dark body.w2k#top .w2k-sidebar .w2k-sidebar-body,
html.dark body.w2k#top .w2k-sidebar .w2k-tree,
html.dark body.w2k#top .w2k-sidebar .win-groupbox,
html.dark body.w2k#top .w2k-sidebar .w2k-sys-summary {
background-color: #262626 !important;
}
html.dark body.w2k#top .w2k-sidebar .win-groupbox,
html.dark body.w2k#top .w2k-sidebar .w2k-sys-summary {
border-color: #383838 !important;
}
/* ---------- 28.2 状态栏：删掉红点+在线 与时钟后的收尾 ---------- */
/* 模板已不再输出这两个节点；旧缓存里残留的也一并关掉（含 ::has 兜住外层空字段） */
body.w2k#top .w2k-statusbar .w2k-led,
body.w2k#top .w2k-statusbar .w2k-status-clock,
body.w2k#top .w2k-statusbar #w2k-net-led,
body.w2k#top .w2k-statusbar #w2k-net-text,
body.w2k#top #w2k-clock,
body.w2k#top .w2k-statusbar .w2k-status-field:has(.w2k-led) {
display: none !important;
}
/* 就绪位继续吃掉中间余量，右侧只剩计数与版权一行，状态栏不再拥挤 */
body.w2k#top .w2k-statusbar .w2k-status-grow {
flex: 1 1 auto !important;
}
body.w2k#top .w2k-statusbar .w2k-status-brand {
margin-left: 0 !important;
}
/* ---------- 28.3 移动端：归档页隐藏「归档统计」大卡片 ---------- */
@media (max-width: 767px) {
body.w2k#top .w2k-hide-sm,
body.w2k#top .w2k-archive-side,
body.w2k#top .w2k-archive-layout > .w2k-archive-side {
display: none !important;
}
/* 侧栏卡片藏了以后，时间轴独占单栏（顺序上也不再被 order:-1 顶到前面） */
body.w2k#top .w2k-archive-layout {
grid-template-columns: minmax(0, 1fr) !important;
}
}
/* ---------- 28.4 相册：单图角标（放大镜 / 徽标 / 伪元素）彻底清除 ---------- */
/* 卡片与链接上不留任何角标图层，只有 .win-inset 内凹相框 + 图片本身 */
body.w2k#top .paper-gallery .paper-photo-zoom,
body.w2k#top .paper-gallery .paper-photo-badge,
body.w2k#top .paper-gallery .paper-photo-card::before,
body.w2k#top .paper-gallery .paper-photo-card::after,
body.w2k#top .paper-gallery .paper-photo-link::before,
body.w2k#top .paper-gallery .paper-photo-link::after,
body.w2k#top .paper-gallery .paper-photo-image::before,
body.w2k#top .paper-gallery .paper-photo-image::after {
display: none !important;
content: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
/* ---------- 28.5 正文表格与代码块：左边线回到 1px 蚀刻灰线 ---------- */
/* 包裹层（.table-scroll / .code-block-wrapper）本身就是 1px 内凹框，
内层的表格与代码面不再重复描边，只保留一条 1px 左边线，杜绝"双层粗线" */
body.w2k#top .table-scroll > table,
body.w2k#top .code-block-wrapper > pre.code-body,
body.w2k#top .prose-paper .code-block-wrapper > pre.code-body {
border-top: 0 !important;
border-right: 0 !important;
border-bottom: 0 !important;
border-left: 1px solid #808080 !important;
box-shadow: none !important;
}
body.w2k#top .table-scroll,
body.w2k#top .code-block-wrapper {
border-left: 1px solid #808080 !important;
}
html.dark body.w2k#top .table-scroll > table,
html.dark body.w2k#top .code-block-wrapper > pre.code-body,
html.dark body.w2k#top .prose-paper .code-block-wrapper > pre.code-body,
html.dark body.w2k#top .table-scroll,
html.dark body.w2k#top .code-block-wrapper {
border-left: 1px solid #3a3a3a !important;
}
/* ---------- 28.6 密码便签：去白底内衬 + 暗色白字 ---------- */
/* 旧主题（app.css / front-theme.css）给 .hide-lock-form 留了一层白底圆角"卡槽"
（#fffdf9 / #fafafa + 10px 圆角 + overflow:hidden），这里换成系统灰 */
body.w2k#top .hide-lock-form,
body.w2k#top .prose-paper .hide-lock-form,
body.w2k#top .paper-hide-lock .hide-lock-form {
height: auto !important;
padding: 0 !important;
background: #c0c0c0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
html.dark body.w2k#top .hide-lock-form {
background: #2b2b2b !important;
}
/* 暗色下「解开便签」是深灰外凸面，文字必须纯白才读得出来 */
html.dark body.w2k#top .hide-lock-form button,
html.dark body.w2k#top .hide-lock-form button:active {
color: #ffffff !important;
}
/* ==========================================================================
29. 第十九版：正文细虚线超链接 + 原生 Win98 图片查看器
--------------------------------------------------------------------------
① 正文里的超链接不再用浏览器默认的粗实线下划线，改成贴着文字底部的 1px 点线
（浅色 #555555 / 暗色 #9a9a9a），悬停瞬时换成深蓝实线（暗色纯白）；
② 图片放大改用原生实现（static/js/lightbox.js）：整屏遮罩 + 标准 Win98 窗口
（蓝渐变标题栏「图片查看器」+ [ ‹ ] [ › ] [ × ]），内凹相框里等比完整显示，
零缓动；顺手把任何残留的第三方灯箱 DOM（.fancybox__* / .pswp / .viewer-*）
彻底屏蔽 —— 它们绝不允许再裸露在桌面壁纸上。
========================================================================== */
/* ---------- 29.1 正文超链接：1px 细点线（浅色） ---------- */
/* 正文容器三套写法都覆盖：.reading-content（详情页正文根节点）、.prose-paper、
.prose（别名 / 旧模板）。被排除的四类各有自己的块级外观，不能多出一条点线：
相册图链 .paper-photo-link、下载主按钮 .download-main、提取码 .download-code、
音轨 .paper-audio-track。全部 !important：正文里 app.css 的
`underline wavy` 与 front-theme.css 的 text-decoration-color 都带 !important，
不加就压不住，链接会退回浏览器默认的粗实线下划线。 */
body.w2k#top .reading-content a:not(.paper-photo-link):not(.download-main):not(.download-code):not(.paper-audio-track),
body.w2k#top .prose-paper a:not(.paper-photo-link):not(.download-main):not(.download-code):not(.paper-audio-track),
body.w2k#top .prose a:not(.paper-photo-link):not(.download-main):not(.download-code):not(.paper-audio-track) {
text-decoration: none !important;
color: #111111 !important;
border-bottom: 1px dotted #555555 !important;
background: none !important;
}
body.w2k#top .reading-content a:not(.paper-photo-link):not(.download-main):not(.download-code):not(.paper-audio-track):hover,
body.w2k#top .reading-content a:not(.paper-photo-link):not(.download-main):not(.download-code):not(.paper-audio-track):focus-visible,
body.w2k#top .prose-paper a:not(.paper-photo-link):not(.download-main):not(.download-code):not(.paper-audio-track):hover,
body.w2k#top .prose-paper a:not(.paper-photo-link):not(.download-main):not(.download-code):not(.paper-audio-track):focus-visible,
body.w2k#top .prose a:not(.paper-photo-link):not(.download-main):not(.download-code):not(.paper-audio-track):hover,
body.w2k#top .prose a:not(.paper-photo-link):not(.download-main):not(.download-code):not(.paper-audio-track):focus-visible {
border-bottom: 1px solid #000080 !important;
color: #000080 !important;
}
/* 暗色：点线换成柔和灰，悬停瞬时纯白实线 */
html.dark body.w2k#top .reading-content a:not(.paper-photo-link):not(.download-main):not(.download-code):not(.paper-audio-track),
html.dark body.w2k#top .prose-paper a:not(.paper-photo-link):not(.download-main):not(.download-code):not(.paper-audio-track),
html.dark body.w2k#top .prose a:not(.paper-photo-link):not(.download-main):not(.download-code):not(.paper-audio-track) {
color: #e8e8e8 !important;
border-bottom-color: #9a9a9a !important;
}
html.dark body.w2k#top .reading-content a:not(.paper-photo-link):not(.download-main):not(.download-code):not(.paper-audio-track):hover,
html.dark body.w2k#top .reading-content a:not(.paper-photo-link):not(.download-main):not(.download-code):not(.paper-audio-track):focus-visible,
html.dark body.w2k#top .prose-paper a:not(.paper-photo-link):not(.download-main):not(.download-code):not(.paper-audio-track):hover,
html.dark body.w2k#top .prose-paper a:not(.paper-photo-link):not(.download-main):not(.download-code):not(.paper-audio-track):focus-visible,
html.dark body.w2k#top .prose a:not(.paper-photo-link):not(.download-main):not(.download-code):not(.paper-audio-track):hover,
html.dark body.w2k#top .prose a:not(.paper-photo-link):not(.download-main):not(.download-code):not(.paper-audio-track):focus-visible {
border-bottom: 1px solid #ffffff !important;
color: #ffffff !important;
}
/* ---------- 29.2 原生图片查看器：遮罩 + 标准 Win98 窗口 ---------- */
body.w2k#top .w2k-lightbox {
position: fixed !important;
inset: 0 !important;
z-index: 9999 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 8px !important;
background: rgba(0, 0, 0, .45) !important;
/* overflow: hidden 而不是 auto：遮罩绝不产生外部滚动条。
（以前用 auto 时，超宽图会把窗口撑出视口，flex 居中溢出后右侧标题栏
和 [ × ] 直接被切掉、还滚不到 —— 就是"标题栏顶飞/错位"的根源。） */
overflow: hidden !important;
transition: none !important;
animation: none !important;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
body.w2k#top .w2k-lightbox[hidden] {
display: none !important;
}
body.w2k#top .w2k-lb-window {
display: flex !important;
flex-direction: column !important;
/* 尺寸天花板：宽高都由图片自适应，但绝不允许越出视口 */
max-width: min(92vw, 1100px) !important;
max-height: 90vh !important;
min-width: 0 !important;
min-height: 0 !important;
margin: auto !important;
overflow: hidden !important;
background: var(--face) !important;
border: 1px solid !important;
border-color: var(--hilight) var(--dkshadow) var(--dkshadow) var(--hilight) !important;
box-shadow: inset 1px 1px var(--light), inset -1px -1px var(--dkshadow) !important;
border-radius: 0 !important;
transition: none !important;
animation: none !important;
}
body.w2k#top .w2k-lb-titlebar {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
height: 20px !important;
padding: 0 3px 0 5px !important;
background: linear-gradient(90deg, var(--title-a), var(--title-b)) !important;
color: var(--title-text) !important;
font-family: var(--w2k-font) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
white-space: nowrap !important;
cursor: default !important;
user-select: none !important;
}
body.w2k#top .w2k-lb-title {
flex: 1 1 auto !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
body.w2k#top .w2k-lb-tools {
display: inline-flex !important;
align-items: center !important;
gap: 2px !important;
flex: 0 0 auto !important;
}
body.w2k#top .w2k-lb-nav,
body.w2k#top .w2k-lb-close {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 16px !important;
height: 14px !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: var(--face) !important;
color: var(--text) !important;
border: 1px solid !important;
border-color: var(--hilight) var(--dkshadow) var(--dkshadow) var(--hilight) !important;
box-shadow: inset 1px 1px var(--light), inset -1px -1px var(--dkshadow) !important;
border-radius: 0 !important;
font-family: var(--w2k-font) !important;
font-size: 10px !important;
line-height: 1 !important;
cursor: pointer;
}
body.w2k#top .w2k-lb-nav:active,
body.w2k#top .w2k-lb-close:active {
border-color: var(--dkshadow) var(--hilight) var(--hilight) var(--dkshadow) !important;
box-shadow: inset 1px 1px var(--dkshadow), inset -1px -1px var(--light) !important;
transform: translate(1px, 1px) !important;
}
body.w2k#top .w2k-lb-nav[disabled] {
color: var(--gray-text) !important;
cursor: default;
box-shadow: inset 1px 1px var(--light), inset -1px -1px var(--dkshadow) !important;
transform: none !important;
}
/* 图片区：relative 供左右立体箭头绝对定位；min-height:0 让 flex 子项能被压小 */
body.w2k#top .w2k-lb-body {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 8px !important;
min-width: 0 !important;
min-height: 0 !important;
overflow: hidden !important;
}
/* 内凹相框：85vw / 1100px 这道"视口天花板"钉在相框上，图片再按相框的 100% 收缩。
为什么不让图片自己写 min(85vw,1100px)：那样是两道互不知情的上限，窗口被压缩时
图片不会跟着缩，只会被相框 overflow:hidden 切掉一块（宽屏上正好切掉右边一条）。
钉在相框上、图片取 100%，图片在任何视口下都必然小于相框，是数学上封闭的。
line-height:0 顺带消掉行内基线多出来的几像素。 */
body.w2k#top .w2k-lb-frame {
display: block !important;
max-width: min(85vw, 1100px) !important;
max-height: 100% !important;
min-width: 0 !important;
padding: 2px !important;
line-height: 0 !important;
overflow: hidden !important;
background: var(--window) !important;
border: 1px solid !important;
border-color: var(--w2k-shadow) var(--hilight) var(--hilight) var(--w2k-shadow) !important;
box-shadow: inset 1px 1px var(--dkshadow), inset -1px -1px var(--light) !important;
border-radius: 0 !important;
}
/* 等比完整展示：横图、竖图、超大原图都锁死在视口内，绝不错位、绝不撑破标题栏。
相框已经有 85vw/1100px 上限，这里 100% 跟着相框缩；高度再留出
标题栏 20 + 状态栏 28 + 各处内衬的余量（calc(85vh - 70px)）。 */
body.w2k#top .w2k-lb-image {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: calc(85vh - 70px) !important;
margin: 0 auto !important;
object-fit: contain !important;
background: var(--window) !important;
border: 0 !important;
border-radius: 0 !important;
transition: none !important;
animation: none !important;
}
/* ---------- 29.2.1 左右翻页箭头：半透明胶囊，悬浮图片区才淡入 ---------- */
/* 不再用 Win98 外凸灰色小方块（死板、突兀、还压住图片边缘），改成轻量半透明圆形
悬浮键：默认 opacity 0 完全隐形，鼠标进入图片区才淡入到 .65、指针落到键上到 1。
移动端（<768px）整体 display:none —— 窄屏不遮挡、不误触，翻页全靠点图左右半边
与左右滑动。显隐需要 transition，所以这里显式把主题的 transition:none 覆盖回来
（只作用于 opacity，120ms，不是"繁重缓动"）。 */
body.w2k#top .w2k-lb-arrow {
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 2 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 30px !important;
height: 30px !important;
min-width: 0 !important;
min-height: 0 !important;
padding: 0 !important;
background: rgba(0, 0, 0, .4) !important;
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, .3) !important;
border-radius: 999px !important; /* 胶囊/圆形；想要更硬的复古方角就改 2px */
box-shadow: none !important;
font-family: var(--w2k-font) !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1 !important;
text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
opacity: 0;
pointer-events: none; /* 隐形时也不接受点击 */
transition: opacity .12s linear !important;
}
body.w2k#top .w2k-lb-arrow[data-lb="prev"] { left: 6px !important; }
body.w2k#top .w2k-lb-arrow[data-lb="next"] { right: 6px !important; }
/* 鼠标悬浮图片区 → 淡入 .65；键盘 Tab 聚焦也让它现身（否则键盘用户看不到焦点） */
body.w2k#top .w2k-lb-body:hover .w2k-lb-arrow:not([disabled]),
body.w2k#top .w2k-lb-arrow:not([disabled]):focus-visible {
opacity: .65;
pointer-events: auto;
}
/* 指针落到箭头本身 → 完全不透明。
选择器必须带上 .w2k-lb-body:hover 前缀：只写 :hover 的权重是 1 id / 4 类，
低于上面那条"图片区悬浮"（1 id / 5 类），opacity: 1 会被 .65 压住。 */
body.w2k#top .w2k-lb-body:hover .w2k-lb-arrow:not([disabled]):hover,
body.w2k#top .w2k-lb-arrow:not([disabled]):focus-visible {
opacity: 1;
background: rgba(0, 0, 0, .55) !important;
border-color: rgba(255, 255, 255, .55) !important;
}
/* 按下：保持垂直居中偏移，只做 1px 下沉（覆盖 .w2k-lb-nav:active 的 transform） */
body.w2k#top .w2k-lb-arrow:active {
transform: translateY(-50%) translate(1px, 1px) !important;
}
/* 只有一张图时翻页键始终隐形（JS 会同时置 disabled） */
body.w2k#top .w2k-lb-arrow[disabled] {
opacity: 0 !important;
pointer-events: none !important;
}
/* 移动端：物理箭头整体撤掉（等价 Tailwind 的 hidden md:flex） */
@media (max-width: 767px) {
body.w2k#top .w2k-lb-arrow {
display: none !important;
}
}
body.w2k#top .w2k-lb-status {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
height: 20px !important;
margin: 0 8px 8px !important;
padding: 0 6px !important;
background: var(--face) !important;
color: var(--text) !important;
font-family: var(--w2k-font) !important;
font-size: 11px !important;
border: 1px solid !important;
border-color: var(--w2k-shadow) var(--hilight) var(--hilight) var(--w2k-shadow) !important;
border-radius: 0 !important;
}
body.w2k#top .w2k-lb-caption {
flex: 1 1 auto !important;
min-width: 0 !important;
overflow: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
}
body.w2k#top .w2k-lb-counter {
flex: 0 0 auto !important;
color: var(--text-muted) !important;
font-variant-numeric: tabular-nums;
}
/* ---------- 29.3 第三方灯箱残留一律不许露面 ---------- */
body.w2k#top > .fancybox__container,
body.w2k#top .fancybox__container,
.fancybox__backdrop,
.fancybox__carousel,
.pswp,
.viewer-container,
[class*="viewbigimg"],
[class*="lightbox-container"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
/* ---------- 29.4 触发区与触控：消除移动端 300ms 延迟 ---------- */
/* 能点开放大的图片：手型光标 + touch-action: manipulation。
后者告诉浏览器「这里不做双击缩放判定」，点下去立刻派发事件，不再干等 300ms；
cursor: pointer 同时修掉 iOS Safari 不给非链接元素派发委托 click 的老毛病
—— 正文里没被 包住的裸 ![]()
也能一击放大。 */
body.w2k#top .reading-content img,
body.w2k#top .prose-paper img,
body.w2k#top .prose img,
body.w2k#top .gallery-item img,
body.w2k#top .paper-gallery .paper-photo-link,
body.w2k#top .paper-gallery .paper-photo-image {
cursor: pointer;
touch-action: manipulation;
}
/* 查看器内部：黑底上的滚动不传染给背后的正文（移动端最明显的手感问题） */
body.w2k#top .w2k-lightbox {
overscroll-behavior: contain;
}
body.w2k#top .w2k-lb-image {
cursor: pointer;
}
/* 打开查看器时锁住背景滚动。窗口本身是 position:fixed，背景一旦还能滚，
手机上滑动画面就会把正文一起带走，看着就像模态框「错位」了。 */
html.w2k-lb-open,
html.w2k-lb-open body {
overflow: hidden !important;
}
/* 查看器里的图与相框不参与文本选择，避免长按选中 / 拖拽图片 */
body.w2k#top .w2k-lb-frame,
body.w2k#top .w2k-lb-image {
user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
}
/* ==========================================================================
29.5 正文普通配图：去外框 + 视口高度自适应
--------------------------------------------------------------------------
正文配图和相册缩略图是两件事，必须分开：
· 相册缩略图（.paper-gallery .paper-photo-image）保留 29.2 之前的 1px 浅灰网格边框；
· 正文配图彻底去框 —— 上面 `.prose-paper img` 给它加过 Win98 凸起外框
（3px 内衬 + 面底色 + 内外两层阴影），app.css 又加过 8px 白边 + 大投影 +
0.2° 旋转，正文里读起来像贴了三层相框，全部清掉。
· 尺寸：max-height: 70vh，超大单反横图与超长竖图都收在阅读舒适区内，
不必为了看全一张图滚三屏。
Tailwind 等价写法（供 admin/编辑器侧复用）：
class="block w-auto h-auto max-w-full max-h-[70vh] object-contain
mx-auto my-3 border-0 shadow-none p-0 bg-transparent"
========================================================================== */
/* 正文容器：.reading-content / .prose-paper / .prose / article.reading-article。
组件外壳里的图一律排除：相册缩略图、播放器封面、视频海报、下载卡图标、头像
—— 它们各自的 .paper-audio-cover img { object-fit:cover; width:100% } 之类
规则不能被 70vh / margin:auto 污染。
刻意用 article.reading-article 而不是裸 article：首页/列表卡片也是 ，
裸 article img 会把卡片封面的边框一起拆掉。 */
body.w2k#top :is(.reading-content, .prose-paper, .prose, article.reading-article) img:not(.paper-photo-image):not(.gallery-img):not(.paper-gallery img):not(.paper-audio-player img):not(.paper-video-shell img):not(.paper-download-card img):not(.w2k-avatar img) {
/* 1) 去框：边框、外凸阴影、内边距、底色、圆角、旋转全部归零 */
border: none !important;
box-shadow: none !important;
padding: 0 !important;
background: transparent !important;
border-radius: 0 !important;
transform: none !important;
/* 2) 尺寸自适应：等比、不裁切、不放大，居中在 70vh 舒适区内 */
display: block !important;
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 70vh !important;
object-fit: contain !important;
margin: 12px auto !important;
}
/* 去掉 包裹时上下多余的空白（图片自带 12px 外边距） */
body.w2k#top :is(.reading-content, .prose-paper, .prose) p:has(> img) {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* ==========================================================================
30. 详细信息表格（Details View / ListView 全宽版）
--------------------------------------------------------------------------
取代原来的「左右两个窄双列表」（.w2k-list-grid 里塞两个 .w2k-details）。
现在是**一个通栏内凹视窗**里的一张语义化
：六个属性列把横向铺满，
行下方用 repeating-linear-gradient 每 28px 补一条浅灰线，只有 1-2 篇文章时
底部也不会留出没有线的空洞。
列宽：图标 28 / 名称自适应（文本上限 420px，超出打点）/ 分类 75 / 字数 75
/ 时长 75 / 日期 95。<768px 时分类·字数·时长整列隐藏，只留
图标 + 名称（吃满剩余宽度）+ 日期（11px 系统灰），行高 32px。
DOM：
整行可点： 设 position:relative，名称列的 用 ::after 铺满整行 ——
仍然只在单元格里（合法 HTML），但整行任意位置都能点，PJAX 照常接管。
========================================================================== */
/* ---------- 30.1 外壳：一个通栏内凹视窗 + 每 28px 一条行分割线 ---------- */
body.w2k#top .w2k-dt {
--dt-row: 28px; /* 行高 = 网格线周期，两者必须一致 */
--dt-line: var(--row-line, #e8e8e8); /* 行分割线：沿用主题的浅灰线令牌 */
--dt-hover: rgba(0, 0, 128, .07); /* 悬停：轻浅高亮 */
--dt-sel-bg: #000080; /* 选中：经典高亮深蓝（本组件指定） */
--dt-sel-fg: #ffffff;
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
min-height: calc(var(--dt-row) * 4) !important; /* 空列表也留出 4 行线的视窗 */
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
/* 行线画在视窗上、不画在行上：铺满整个容器高度，底部不留真空 */
background-color: var(--window) !important;
background-image: repeating-linear-gradient(
to bottom,
transparent 0,
transparent calc(var(--dt-row) - 1px),
var(--dt-line) calc(var(--dt-row) - 1px),
var(--dt-line) var(--dt-row)
) !important;
background-repeat: repeat !important;
background-size: 100% var(--dt-row) !important;
background-position: 0 0 !important;
}
/* ---------- 30.2 表格本体 ---------- */
body.w2k#top .w2k-dt-table {
width: 100% !important;
max-width: 100% !important;
table-layout: fixed !important; /* 必须 fixed：auto 布局下表格缩不到 min-content 以下，
而名称列是 nowrap + 打点省略，min-content 就是整条标题，
表格会被撑到容器之外（日期列直接被裁掉）。
fixed 用第一行 的宽度分配，表格严格 = 100%，
名称列的块级 再在这条固定宽度里打点省略。 */
border-collapse: collapse !important;
border-spacing: 0 !important;
background: transparent !important; /* 透出容器上的行线 */
font-family: var(--w2k-font) !important;
font-size: 12px !important;
color: var(--text) !important;
}
body.w2k#top .w2k-dt-body {
background: transparent !important;
}
/* ---------- 30.3 表头：外凸立体按键质感（与 .win-outset 同一套光影） ---------- */
body.w2k#top .w2k-dt-head th {
height: var(--dt-row) !important; /* 与行线周期同高，第一行正好压在线上 */
padding: 0 6px !important;
background: var(--face) !important;
color: var(--text) !important;
font-family: var(--w2k-font) !important;
font-size: 11px !important;
font-weight: 700 !important;
text-align: left !important;
white-space: nowrap !important;
border: 1px solid !important;
border-color: var(--hilight) var(--dkshadow) var(--dkshadow) var(--hilight) !important;
box-shadow: inset 1px 1px var(--light), inset -1px -1px var(--dkshadow) !important;
cursor: default !important;
user-select: none !important;
}
/* ---------- 30.4 数据行：悬停浅高亮 / 选中深蓝反白 ---------- */
body.w2k#top .w2k-dt-row {
position: relative !important; /* 供整行热区的 ::after 定位 */
height: var(--dt-row) !important;
}
body.w2k#top .w2k-dt-row > td {
height: var(--dt-row) !important;
padding: 0 6px !important;
line-height: calc(var(--dt-row) - 2px) !important;
vertical-align: middle !important;
color: var(--text) !important;
border: 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
}
body.w2k#top .w2k-dt-row:hover {
background: var(--dt-hover) !important;
}
/* 选中态排在 hover 之后：已选中的行不会被悬停高亮盖掉 */
body.w2k#top .w2k-dt-row:focus-within,
body.w2k#top .w2k-dt-row.is-selected {
background: var(--dt-sel-bg) !important;
}
body.w2k#top .w2k-dt-row:focus-within > td,
body.w2k#top .w2k-dt .w2k-dt-row.is-selected > td,
body.w2k#top .w2k-dt-row:focus-within .w2k-dt-name a,
body.w2k#top .w2k-dt .w2k-dt-row.is-selected .w2k-dt-name a {
color: var(--dt-sel-fg) !important;
}
/* 列表失焦后的「非活动选中」：Win98 会退成灰底黑字 */
body.w2k#top .w2k-dt.is-blur .w2k-dt-row.is-selected {
background: var(--select-blur-bg, #c0c0c0) !important;
}
body.w2k#top .w2k-dt.is-blur .w2k-dt-row.is-selected > td,
body.w2k#top .w2k-dt.is-blur .w2k-dt-row.is-selected .w2k-dt-name a {
color: var(--select-blur-text, #000000) !important;
}
/* ---------- 30.5 列宽与对齐 ---------- */
body.w2k#top .w2k-dt-icon {
width: 28px !important;
max-width: 28px !important;
padding: 0 !important;
text-align: center !important;
line-height: 0 !important; /* 图标用块级居中，不参与行盒高度 */
}
body.w2k#top .w2k-dt-icon .w2k-ico {
display: block !important;
margin: 0 auto !important;
}
body.w2k#top .w2k-dt-name { width: auto !important; text-align: left !important; }
/* 分类用系统灰弱化：必须写成 `> td.` 才压得住上面通用单元格的 color: var(--text) */
body.w2k#top .w2k-dt-row > td.w2k-dt-cat,
body.w2k#top .w2k-dt-head th.w2k-dt-cat { color: var(--text-muted) !important; }
body.w2k#top .w2k-dt-row > td.w2k-dt-cat { width: 75px !important; max-width: 75px !important; text-align: center !important; }
body.w2k#top .w2k-dt-row > td.w2k-dt-words { width: 75px !important; max-width: 75px !important; text-align: right !important; font-family: var(--w2k-mono) !important; font-variant-numeric: tabular-nums; }
body.w2k#top .w2k-dt-row > td.w2k-dt-time { width: 75px !important; max-width: 75px !important; text-align: center !important; }
body.w2k#top .w2k-dt-row > td.w2k-dt-date,
body.w2k#top .w2k-dt-head th.w2k-dt-date { width: 95px !important; max-width: 95px !important; text-align: center !important; }
body.w2k#top .w2k-dt-head th.w2k-dt-words { width: 75px !important; max-width: 75px !important; text-align: right !important; }
body.w2k#top .w2k-dt-head th.w2k-dt-time { width: 75px !important; max-width: 75px !important; text-align: center !important; }
body.w2k#top .w2k-dt-head th.w2k-dt-icon { width: 28px !important; max-width: 28px !important; }
/* 名称：单行 + 打点省略，文本上限 420px，超长标题不会把右侧属性列挤走 */
body.w2k#top .w2k-dt-name a,
body.w2k#top .w2k-dt-name a:hover,
body.w2k#top .w2k-dt-name a:focus {
display: block !important;
max-width: 420px !important;
overflow: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
color: inherit !important;
text-decoration: none !important;
border-bottom: 0 !important;
background: none !important;
}
body.w2k#top .w2k-dt-name a { cursor: pointer; }
/* 整行热区：链接的 ::after 铺满整行（ 是定位祖先） */
body.w2k#top .w2k-dt-name a::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
}
/* 表头里给「图标」列一个无障碍名称（视觉隐藏，不占位） */
body.w2k#top .w2k-dt-sr {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* ---------- 30.6 桌面宽屏：文章少时把行线一直铺到底 ---------- */
@media (min-width: 1001px) {
body.w2k#top .w2k-dt {
flex: 1 1 auto !important;
min-height: 220px !important;
max-height: 480px !important;
}
}
/* ---------- 30.7 移动端（<768px）：紧凑降维 ---------- */
@media (max-width: 767px) {
body.w2k#top .w2k-dt {
--dt-row: 32px; /* 行高收紧到 32px */
min-height: calc(var(--dt-row) * 5) !important;
}
/* 次要列整列隐藏：分类 / 字数 / 时长
（标记里同时挂了 Tailwind 的 hidden md:table-cell，两条路互为保险） */
body.w2k#top .w2k-dt-cat,
body.w2k#top .w2k-dt-words,
body.w2k#top .w2k-dt-time {
display: none !important;
}
/* 名称吃满左侧剩余宽度 */
body.w2k#top .w2k-dt-name a {
max-width: 100% !important;
}
/* 日期紧靠右侧：字号 11px、柔和系统灰（`> td.` 才压得住通用单元格的 color） */
body.w2k#top .w2k-dt-row > td.w2k-dt-date,
body.w2k#top .w2k-dt-head th.w2k-dt-date {
width: 84px !important;
max-width: 84px !important;
font-size: 11px !important;
color: var(--text-muted) !important;
}
}
/* ==========================================================================
31. 文章详情页左栏（信息 → 大纲 → 最新文章）与顶部面包屑
--------------------------------------------------------------------------
① 左栏顺序：文章信息 → 文章大纲 → 最新文章（多出来的「归档」按钮已删除）；
② 最新文章列表固定 220px 高，条目超出时**列表自身**出现复古滚动条
（滚动条皮肤见第 7 节 body.w2k#top ::-webkit-scrollbar，无需另写）；
③ 面包屑精简为「分类 › 标题」，12px 默认黑、全程无下划线；
④ 正文小标题补 scroll-margin-top，锚点跳转后标题不贴视口顶边。
========================================================================== */
/* ---------- 31.1 左栏第三块面板的伸缩分配 ---------- */
/* .w2k-rail 是纵向 flex 列（见第 4 节），面板顺序 = DOM 顺序，模板里换位置即可生效。
这里只补「最新文章」的收缩行为：不参与拉伸，让中间的大纲继续吃满剩余高度。 */
body.w2k#top .w2k-rail > .w2k-pane-latest {
flex: 0 0 auto;
min-height: 0;
}
/* ---------- 31.2 最新文章：固定高度 + 内部滚动 ---------- */
body.w2k#top .w2k-pane-latest .w2k-pane-body {
display: flex !important;
flex-direction: column !important;
min-height: 0 !important;
gap: 4px !important;
/* 面板本身不再滚动，只让下面的列表滚 —— 否则会出现嵌套双滚动条 */
overflow: hidden !important;
}
/* 只有条目列表滚动；面板标题与「全部文章 →」始终留在视窗内 */
body.w2k#top .w2k-pane-latest .w2k-metalist {
max-height: 220px !important;
overflow-y: auto !important;
overscroll-behavior: contain;
}
body.w2k#top .w2k-pane-latest .w2k-metalist-more {
flex: 0 0 auto !important;
}
/* ---------- 31.3 面包屑：分类 › 标题，12px 默认黑，无下划线 ---------- */
body.w2k#top .w2k-breadcrumb {
font-size: 12px !important;
}
body.w2k#top .w2k-breadcrumb a,
body.w2k#top .w2k-breadcrumb a:hover,
body.w2k#top .w2k-breadcrumb a:focus,
body.w2k#top .w2k-breadcrumb a:focus-visible {
color: var(--text) !important; /* 默认黑 */
text-decoration: none !important; /* 全程无下划线 */
}
body.w2k#top .w2k-breadcrumb a:hover {
color: var(--w2k-shadow) !important; /* 悬停用灰度变化代替下划线 */
}
/* ---------- 31.4 锚点落点：标题不贴视口顶边 ---------- */
body.w2k#top .reading-content :is(h1, h2, h3, h4, h5, h6) {
scroll-margin-top: 10px;
}
/* ==========================================================================
32. 细节打磨：分类横条间距 / 分类列宽 / 正文表格去竖线 / 暗色层次
--------------------------------------------------------------------------
① 首页楼层标签（「📁 分类名」那条横条）与上方工具栏之间补呼吸；
② 文字列表「分类」列 75px → 70px，宽度还给「名称」列；
③ 正文表格去掉孤立的左侧竖线，只留极弱底边横线；
④ 暗色下把表面/内凹/边界的灰阶拉开，并给列表工作区铺等距暗线。
========================================================================== */
/* ---------- 32.1 分类横条（首页楼层标签）与上方工具栏的间距 ---------- */
/* .magazine-section-head 是 position:absolute; top:-9px 的蚀刻标签，压在分组框上缘，
所以"上边距"要加在它所属的分组框 .magazine-section 上，标签才会跟着下移。
楼层之间原本靠 .magazine-feed 的 22px gap；这里把 gap 收到 8px，
再由 8px 上边距 + 6px 下边距补回同样的节奏 —— 总间距不变，
但第一个楼层与上方搜索/工具栏之间从此多出 8px 呼吸，不再贴死。 */
body.w2k#top .magazine-feed {
gap: 8px !important;
}
body.w2k#top .magazine-section {
margin-top: 8px !important;
margin-bottom: 6px !important;
}
/* ---------- 32.2 文字列表「分类」列收紧 ---------- */
/* 注意：第 30 节的详细信息表格是 table-layout: fixed，列宽只由表头 决定，
固定布局下 min-width 对单元格是无效属性（浏览器直接忽略）——
所以这里用 width 把列宽钉死在 70px；70 > 65，最小宽度的诉求天然满足。
Tailwind 等价：.w2k-dt-cat = w-[70px] text-center（表格场景仍建议走这里的 CSS）。 */
body.w2k#top .w2k-dt-head th.w2k-dt-cat,
body.w2k#top .w2k-dt-row > td.w2k-dt-cat {
width: 70px !important;
max-width: 70px !important;
min-width: 0 !important;
text-align: center !important;
}
/* ---------- 32.3 正文表格：去竖线，只留极弱底边横线 ---------- */
/* 现状： 自带 border-left: 1px #808080（而上/右/下都是 0），
单元格又各带 border-right + border-bottom 的 #808080 网格线 ——
左边那条线没有对应边，孤零零地突兀。现在整表不封口，
单元格只保留 1px #e0e0e0 的极弱底边横线，右侧与底部保持通透。 */
body.w2k#top .prose-paper table {
border: 0 !important;
}
body.w2k#top .prose-paper th,
body.w2k#top .prose-paper td {
border-left: none !important;
border-right: none !important;
border-bottom: 1px solid #e0e0e0 !important;
}
/* 最后一行不再收口，表格底部保持通透 */
body.w2k#top .prose-paper tbody tr:last-child > th,
body.w2k#top .prose-paper tbody tr:last-child > td {
border-bottom: 0 !important;
}
/* 暗色下 #e0e0e0 会亮得刺眼，换成与内凹底 (#1a1a1a) 只差一档的暗线 */
html.dark body.w2k#top .prose-paper th,
html.dark body.w2k#top .prose-paper td {
border-bottom-color: #333333 !important;
}
/* ---------- 32.4 暗色：列表工作区的等距暗线 ---------- */
/* 第 30 节的 .w2k-dt 已经按 --dt-row 铺线，这里只需把暗色下的线色钉到 #252525：
desktop（--dt-row: 28px）得到的正好是
repeating-linear-gradient(to bottom, transparent, transparent 27px,
#252525 27px, #252525 28px)
移动端（--dt-row: 32px）则自动跟着变 32px 周期，仍然与行高严格对齐。
文章只有 1-2 篇时，下方整块空白会被这些线填满，不再是一片死黑。 */
html.dark body.w2k#top .w2k-dt {
--dt-line: #252525;
}
| |