/* ============================================================
* webworks DOS/BBS 皮肤 · skin/dos.css
* 设计令牌(3 显管主题)+ CRT 外壳 + 文字模式组件 + 双栏/阅读器/demo 组件。
* 页面接入:
* (按相对路径调整)
*
* 主题:,配合 skin/txtui.js 的 DosTheme。
* 组件速查:.mrow 菜单行 .frow 文件行 .duo 双栏(.lpane/.lrow/.preview)
* .reader/.markdown-body 阅读器 .term 术语 .drow demos 行
* #ui.deck-ui demo 查看器(.deck-hintbar/.deck-wrap/.script-panel)
* ============================================================ */
/* ============ 主题(现代化柔化) ============ */
:root, [data-theme="nc"] {
--desk:#10142e; --panel:#131839; --frame:#5f7dc9;
--text:#c8d3f5; --dim:#7982a9; --hot:#e0af68; --acc:#7dcfff; --acc-rgb:125,207,255;
--bar-bg:#1d2447; --bar-text:#a9b8e8; --bar-hot:#f7768e;
--sel-bg:#33467c; --sel-text:#e8ecfa;
--err:#ff7a93; --ok:#9ece6a;
--chrome1:#ffffff; --chrome2:#9ecbff; --chrome3:#6cb3f7; --chrome4:#3d7dc9; --chrome5:#1e4a80;
--ink:#0a0d24;
}
[data-theme="green"] {
--desk:#0a120c; --panel:#0d1710; --frame:#2f6b3f;
--text:#b8e6c0; --dim:#5f8a68; --hot:#e0af68; --acc:#7ee787; --acc-rgb:126,231,135;
--bar-bg:#152019; --bar-text:#9fd3ab; --bar-hot:#f7768e;
--sel-bg:#1f6f3a; --sel-text:#e6f5ea;
--err:#ff7a93; --ok:#9ece6a;
--chrome1:#ffffff; --chrome2:#b9f6c2; --chrome3:#6fdc82; --chrome4:#3da85b; --chrome5:#1e5c34;
--ink:#06130a;
}
[data-theme="amber"] {
--desk:#171006; --panel:#1a1308; --frame:#8a6a2d;
--text:#f0dfb8; --dim:#9a7c4f; --hot:#ffe9a0; --acc:#ffb454; --acc-rgb:255,180,84;
--bar-bg:#241a0c; --bar-text:#e3c892; --bar-hot:#f7768e;
--sel-bg:#8a5a1a; --sel-text:#fff3d6;
--err:#ff7a93; --ok:#9ece6a;
--chrome1:#ffffff; --chrome2:#ffe9a0; --chrome3:#ffc966; --chrome4:#d89a35; --chrome5:#8a5f18;
--ink:#120b04;
}
/* ============ 基础 ============ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
:root { --mono:"Cascadia Code","JetBrains Mono","Fira Code",Consolas,"SF Mono","Microsoft YaHei","PingFang SC",monospace; }
html, body {
height:100%; background:#050505; overflow:hidden;
font-family:var(--mono); -webkit-font-smoothing:antialiased;
}
body { display:flex; align-items:center; justify-content:center; }
/* ============ CRT 外壳 ============ */
#bezel { position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
background:radial-gradient(ellipse at 50% 42%, #1a1a1a, #050505 75%); }
#glass {
position:relative; width:min(1540px, 98vw); height:min(980px, 98vh);
border-radius:1.7em / 2em; overflow:hidden;
background:var(--desk);
box-shadow:0 0 0 4px #000, 0 0 60px rgba(0,0,0,.9), 0 0 120px rgba(125,207,255,.05);
}
/* 光栅+光影:全屏静态扫描线(暗线+微亮磷光行)+ 竖彩条 + 椭圆高光 + 四角深晕 + 曲率暗带;
纯 CSS 质感,零位移零扭曲(滚动带/凸面效果已拍板移除)
像素感总开关: 时整层关闭(txtui.js 的 DosFx 管这个) */
#fx { position:absolute; inset:0; z-index:100; pointer-events:none; }
[data-fx="off"] #fx { display:none; }
#fx::before {
content:""; position:absolute; inset:-4%;
background:
repeating-linear-gradient(90deg, rgba(255,0,60,.022) 0 1px, rgba(0,255,120,.022) 1px 2px, rgba(40,80,255,.022) 2px 3px),
repeating-linear-gradient(0deg, rgba(0,0,0,.20) 0 1px, rgba(255,255,255,.018) 1px 2px, transparent 2px 3px);
}
#fx::after {
content:""; position:absolute; inset:0;
background:
radial-gradient(ellipse 130% 105% at 50% 40%, transparent 50%, rgba(0,0,0,.60) 100%),
radial-gradient(ellipse 75% 30% at 32% -6%, rgba(255,255,255,.07), transparent 70%),
linear-gradient(180deg, rgba(0,0,0,.24), transparent 12%, transparent 88%, rgba(0,0,0,.30));
}
/* ============ 文字模式 UI 骨架 ============ */
#ui { position:absolute; inset:10px 18px 6px; display:grid; grid-template-rows:auto 1fr auto auto; z-index:10; }
#ui.no-prompt { grid-template-rows:auto 1fr auto; }
#menubar {
display:flex; gap:2px; align-items:center; padding:0 10px;
background:var(--bar-bg); color:var(--bar-text);
font-size:13px; user-select:none; position:relative; z-index:70;
box-shadow:0 1px 0 rgba(0,0,0,.6); border-radius:3px 3px 0 0;
}
#menubar .brand { font-weight:700; padding:2px 8px 2px 0; color:var(--acc); }
.led { color:var(--ok); padding:2px 6px 2px 0; animation:led 2.4s ease-in-out infinite; }
@keyframes led { 0%,100% { opacity:1; text-shadow:0 0 7px currentColor; } 50% { opacity:.3; text-shadow:none; } }
#menubar .mi { padding:2px 9px; cursor:pointer; position:relative; }
#menubar .mi:hover, #menubar .mi.open { background:var(--sel-bg); color:var(--sel-text); }
#menubar .mi b { color:var(--bar-hot); font-weight:700; }
#menubar .mi:hover b, #menubar .mi.open b { color:inherit; }
#menubar .clock { margin-left:auto; padding:2px 0; font-variant-numeric:tabular-nums; }
.menu-drop {
position:absolute; top:100%; min-width:210px; z-index:80;
background:var(--bar-bg); color:var(--bar-text);
border:1px solid #000; box-shadow:6px 6px 0 rgba(0,0,0,.55);
display:none; border-radius:0 0 3px 3px;
}
.menu-drop.open { display:block; }
.menu-drop .di { padding:3px 12px; cursor:pointer; display:flex; justify-content:space-between; gap:18px; }
.menu-drop .di:hover { background:var(--sel-bg); color:var(--sel-text); }
.menu-drop .di .dk { color:var(--bar-hot); }
.menu-drop .di:hover .dk { color:inherit; }
.menu-drop .sep { border-top:1px solid rgba(127,147,207,.25); margin:2px 0; }
#term {
overflow-y:auto; padding:10px 16px 12px;
background:var(--panel); color:var(--text);
font-size:14.5px; line-height:1.5;
scrollbar-width:thin; scrollbar-color:var(--frame) transparent;
}
#term::-webkit-scrollbar { width:8px; }
#term::-webkit-scrollbar-thumb { background:var(--frame); }
.ln { white-space:pre-wrap; word-break:break-word; }
.ln.dim { color:var(--dim); }
.ln.err { color:var(--err); }
.ln.ok { color:var(--ok); }
.ln.hot { color:var(--hot); }
.ln.acc { color:var(--acc); }
.ln a, .ln .lk { color:var(--hot); cursor:pointer; text-decoration:none; }
.ln a:hover, .ln .lk:hover { background:var(--sel-bg); color:var(--sel-text); }
.glow { text-shadow:0 0 3px currentColor, 0 0 14px currentColor; }
/* 闪烁块光标 */
.cur::after { content:"█"; color:var(--text); animation:blink 1.06s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
/* canvas logo(逐格绘制,字体无关) */
canvas.logo { display:block; margin:2px 0 6px; }
/* 菜单行(热键选择条) */
.mrow { display:grid; grid-template-columns:52px 150px 1fr; gap:10px; padding:0 6px; cursor:pointer; line-height:1.7; border-radius:2px; }
.mrow:hover, .mrow.sel { background:var(--sel-bg); color:var(--sel-text); }
.mrow.sel { box-shadow:inset 3px 0 0 var(--hot); }
#term.attract .mrow.sel { animation:selPulse 1.6s ease-in-out infinite; }
@keyframes selPulse { 0%,100% { filter:none; } 50% { filter:brightness(1.5); } }
.mrow .hk { color:var(--hot); font-weight:700; }
.mrow:hover .hk, .mrow.sel .hk { color:inherit; }
.mrow .nm { color:inherit; font-weight:700; }
.mrow .ds { color:var(--dim); }
.mrow:hover .ds, .mrow.sel .ds { color:inherit; }
/* 列表行(文件区/信件区) */
.frow { display:grid; grid-template-columns:40px minmax(0,clamp(240px,32vw,460px)) 84px minmax(0,1fr); gap:12px; padding:0 6px; cursor:pointer; line-height:1.7; border-radius:2px; }
.frow:hover { background:var(--sel-bg); color:var(--sel-text); }
.frow:hover .dim { color:inherit; }
.frow .ic { color:var(--acc); white-space:nowrap; }
.frow:hover .ic { color:inherit; }
.frow .nm { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.frow .dt { color:var(--hot); white-space:nowrap; }
.frow:hover .dt { color:inherit; }
.frow > span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
a.frow:link, a.frow:visited { color:inherit; text-decoration:none; display:grid; }
.frow.no-dt { grid-template-columns:40px minmax(0,clamp(240px,32vw,460px)) minmax(0,1fr); }
.frow.no-dt .dt { display:none; }
.frow.wide { grid-template-columns:34px minmax(300px,480px) 92px minmax(0,1fr); }
.dim { color:var(--dim); }
.tag-prefix { color:var(--acc); font-weight:700; margin-right:.45em; white-space:nowrap; }
pre.fig { line-height:1.18; font-size:inherit; }
/* ANSI 半块图 */
.art-wrap { max-width:100%; overflow-x:auto; }
.ln.art { white-space:pre; line-height:1.0; letter-spacing:0; }
/* 图文混排:真图 + TUI 框(历史页/内容页用) */
.shot {
display:block; max-width:min(560px, 100%);
border:1px solid var(--frame);
box-shadow:6px 6px 0 rgba(0,0,0,.45);
margin:6px 0 4px;
}
.fb {
border-left:3px solid var(--hot); padding:2px 0 2px 10px; margin:4px 0;
color:var(--dim); white-space:pre-wrap; word-break:break-word;
}
.round-tag {
display:inline-block; border:1px solid var(--acc); color:var(--acc);
padding:0 7px; margin-right:8px; font-weight:700;
}
/* ============ 输入行 ============ */
#prompt-row {
display:flex; align-items:center; gap:8px;
padding:7px 16px; background:var(--panel);
border-top:1px solid color-mix(in srgb, var(--frame) 40%, transparent);
}
#ps1 { color:var(--text); }
#cmd {
flex:1; min-width:0; background:transparent; border:0; outline:0;
color:var(--text); font:inherit; font-size:14.5px; caret-color:var(--hot);
}
#cmd::placeholder { color:var(--dim); opacity:.7; }
/* ============ F 键条 ============ */
#fbar {
display:flex; overflow-x:auto; user-select:none;
background:var(--bar-bg); color:var(--bar-text);
font-size:12.5px; box-shadow:0 -1px 0 rgba(0,0,0,.6); border-radius:0 0 3px 3px;
}
#fbar .fk { padding:4px 11px; cursor:pointer; white-space:nowrap; }
#fbar .fk b { font-weight:700; margin-right:2px; color:var(--acc); }
#fbar .fk:hover { background:var(--sel-bg); color:var(--sel-text); }
#fbar .fk:hover b { color:inherit; }
#fbar .fk:active { transform:translateY(1px); }
/* 演示角标 */
.demo-tag { position:fixed; left:12px; bottom:10px; z-index:5; font-size:10.5px; color:#666; pointer-events:none; }
/* ============ 双栏应用布局 .duo(列表+预览,works/log/demos 共用) ============ */
#term.duo-host { overflow:hidden; padding:0; display:flex; }
.duo { flex:1; min-height:0; display:grid; grid-template-columns:minmax(252px,36%) 1fr; }
.lpane { min-height:0; overflow-y:auto; border-right:1px solid var(--frame); padding:6px 0; }
.lhead {
position:sticky; top:0; z-index:2; background:var(--panel);
color:var(--dim); font-size:12px; padding:2px 12px 6px;
border-bottom:1px dashed var(--frame);
}
.lrow {
display:grid; grid-template-columns:26px 1fr auto; gap:8px; align-items:baseline;
padding:2px 12px; cursor:pointer; line-height:1.75;
}
.lrow.dated { grid-template-columns:48px 1fr auto; }
.lrow.dated.no-st { grid-template-columns:48px minmax(0,1fr); }
.lrow .ic { color:var(--acc); white-space:nowrap; }
.lrow .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lrow .st { color:var(--dim); font-size:12px; white-space:nowrap; }
.lrow:hover, .lrow.sel { background:var(--sel-bg); color:var(--sel-text); }
.lrow.sel { box-shadow:inset 3px 0 0 var(--hot); }
.lrow:hover .ic, .lrow.sel .ic, .lrow:hover .st, .lrow.sel .st { color:inherit; }
#term.attract .lrow.sel { animation:selPulse 1.6s ease-in-out infinite; }
.preview { min-height:0; overflow-y:auto; padding:16px 20px; }
.pv-title { color:var(--hot); font-weight:700; font-size:16px; margin-bottom:8px; }
.pv-line { margin:3px 0; }
.pv-desc { margin:10px 0; color:var(--text); line-height:1.8; }
.pv-meta { color:var(--dim); font-size:12.5px; margin-top:10px; }
.pv-hint { margin-top:14px; color:var(--dim); }
.pv-hint b { color:var(--hot); }
.pv-shot { max-width:min(420px,100%); border:1px solid var(--frame); box-shadow:5px 5px 0 rgba(0,0,0,.45); margin:8px 0; display:block; }
@media (max-width:680px) {
.duo { grid-template-columns:1fr; grid-template-rows:minmax(120px,42%) 1fr; }
.lpane { border-right:0; border-bottom:1px solid var(--frame); }
}
/* ============ 阅读器:markdown 正文 + 文章头 ============ */
.reader { max-width:78ch; margin:0 auto; padding:14px 18px 26px; }
.post-meta { color:var(--dim); font-size:12.5px; margin:2px 0 10px; }
.post-source-tag {
display:inline-block; border:1px solid var(--acc); color:var(--acc);
padding:0 7px; margin-right:8px; font-weight:700; font-size:12px;
}
.heading-tag { color:var(--hot); font-size:.72em; margin-right:.45em; white-space:nowrap; }
.pnav { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 16px; font-size:13px; }
.pnav a {
color:var(--acc); text-decoration:none; padding:3px 10px;
border:1px solid color-mix(in srgb, var(--frame) 55%, transparent); border-radius:3px;
}
.pnav a:hover { background:var(--sel-bg); color:var(--sel-text); }
.pnav a::before { content:"» "; color:var(--dim); }
.markdown-body { color:var(--text); font-size:15px; line-height:1.85; padding:6px 0 12px; }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 {
color:var(--acc); margin:18px 0 8px; font-weight:800;
}
.markdown-body h1 { font-size:23px; border-bottom:1px solid color-mix(in srgb, var(--frame) 55%, transparent); padding-bottom:6px; }
.markdown-body h1::before { content:"## "; opacity:.45; }
.markdown-body h2 { font-size:19px; }
.markdown-body h2::before { content:"### "; opacity:.45; }
.markdown-body h3 { font-size:16.5px; }
.markdown-body h3::before { content:"#### "; opacity:.45; }
.markdown-body p { margin:10px 0; }
.markdown-body ul, .markdown-body ol { margin:10px 0 10px 24px; }
.markdown-body li { margin:4px 0; }
.markdown-body code {
background:color-mix(in srgb, var(--panel) 70%, #000);
color:var(--hot); padding:2px 5px; border-radius:3px;
border:1px solid color-mix(in srgb, var(--frame) 45%, transparent); font-size:13.5px;
}
.markdown-body pre {
background:color-mix(in srgb, var(--panel) 55%, #000);
border:1px solid color-mix(in srgb, var(--frame) 45%, transparent); border-radius:3px;
padding:12px 14px; overflow-x:auto; margin:12px 0; font-size:13px;
}
.markdown-body pre code { background:transparent; border:0; padding:0; color:var(--text); }
.markdown-body blockquote {
border-left:3px solid var(--acc);
background:color-mix(in srgb, var(--acc) 6%, transparent);
margin:12px 0; padding:6px 12px; color:var(--dim);
}
.markdown-body a { color:var(--hot); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--hot) 40%, transparent); }
.markdown-body a:hover { color:var(--acc); }
.markdown-body strong { color:var(--text); font-weight:800; }
.markdown-body em { color:var(--acc); }
.markdown-body hr { border:0; border-top:1px dashed color-mix(in srgb, var(--frame) 55%, transparent); margin:16px 0; }
.markdown-body table { border-collapse:collapse; margin:12px 0; width:100%; font-size:13.5px; }
.markdown-body th, .markdown-body td { border:1px solid color-mix(in srgb, var(--frame) 45%, transparent); padding:5px 8px; }
.markdown-body th { background:color-mix(in srgb, var(--acc) 8%, transparent); color:var(--acc); }
.markdown-body img { max-width:100%; border:1px solid var(--frame); margin:8px 0; }
.markdown-body .mermaid {
background:color-mix(in srgb, var(--panel) 55%, #000);
border:1px solid color-mix(in srgb, var(--frame) 45%, transparent);
padding:10px; margin:10px 0;
}
.demo-cta { margin:6px 0 16px; padding:8px 12px; border:1px solid color-mix(in srgb, var(--frame) 55%, transparent); background:color-mix(in srgb, var(--acc) 6%, transparent); }
.demo-cta a { color:var(--hot); }
/* 术语悬浮词条 */
.term {
border-bottom:1px dotted color-mix(in srgb, var(--acc) 60%, transparent);
cursor:help; color:var(--acc);
background:color-mix(in srgb, var(--acc) 6%, transparent);
padding:0 2px; border-radius:2px;
}
.term:hover { background:color-mix(in srgb, var(--acc) 18%, transparent); }
.term-tooltip {
position:absolute; z-index:9999; max-width:380px; padding:12px 14px;
background:var(--panel); border:1px solid var(--acc); border-radius:4px;
box-shadow:6px 6px 0 rgba(0,0,0,.55);
font-size:13px; line-height:1.7; color:var(--text); pointer-events:none;
}
.term-tooltip .tip-cn { color:var(--acc); font-weight:700; font-size:15px; margin-bottom:3px; }
.term-tooltip .tip-en { font-size:11px; margin-bottom:8px; color:var(--dim); }
.term-tooltip .tip-short { margin-bottom:6px; }
.term-tooltip .tip-detail { color:var(--dim); font-size:11.5px; padding-top:6px; border-top:1px dashed color-mix(in srgb, var(--frame) 45%, transparent); }
/* ============ demos 列表行(真图缩略) ============ */
.drow {
display:grid; grid-template-columns:128px 1fr; gap:14px; align-items:start;
padding:8px 12px; cursor:pointer; border-radius:2px;
}
.drow:hover, .drow.sel { background:var(--sel-bg); color:var(--sel-text); }
.drow.sel { box-shadow:inset 3px 0 0 var(--hot); }
.drow .th { width:128px; aspect-ratio:16/9; object-fit:cover; border:1px solid var(--frame); background:#000; }
.drow .tt { color:var(--hot); font-weight:700; }
.drow:hover .tt, .drow.sel .tt { color:inherit; }
.drow .dd { color:var(--dim); font-size:12.5px; margin-top:3px; line-height:1.6; }
.drow:hover .dd, .drow.sel .dd { color:inherit; }
a.drow:link, a.drow:visited { color:inherit; text-decoration:none; display:grid; }
/* 紧凑图行(首页仪表盘/分区卡片用) */
.drow.compact { grid-template-columns:96px 1fr; gap:10px; padding:5px 6px; }
.drow.compact .th { width:96px; }
.drow.compact .dd { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#term.attract .drow.sel { animation:selPulse 1.6s ease-in-out infinite; }
@media (max-width:680px) { .drow { grid-template-columns:96px 1fr; } .drow .th { width:96px; } }
@media (max-width:760px) {
#glass { width:100vw; height:100vh; border-radius:0; }
#ui { inset:4px 6px 3px; }
.frow, .frow.no-dt { grid-template-columns:34px minmax(0,1fr); gap:8px; }
.frow .dt, .frow > span:last-child { display:none; }
}
/* ============ demo 查看器(iframe deck + 讲解面板) ============ */
#ui.deck-ui { grid-template-rows:auto auto 1fr auto auto; }
.deck-hintbar {
display:flex; align-items:center; gap:14px; flex-wrap:wrap;
padding:5px 12px; font-size:12.5px; color:var(--dim);
background:var(--bar-bg); box-shadow:0 1px 0 rgba(0,0,0,.6);
}
.deck-hintbar a { color:var(--hot); text-decoration:none; cursor:pointer; }
.deck-hintbar a:hover { background:var(--sel-bg); color:var(--sel-text); }
.deck-hintbar kbd { border:1px solid var(--frame); border-radius:3px; padding:0 6px; color:var(--acc); font-size:11.5px; }
.deck-hintbar .spacer { flex:1; }
.deck-wrap { position:relative; min-height:0; background:#000; }
.deck-wrap iframe { width:100%; height:100%; border:0; display:block; }
.deck-missing { padding:40px; color:var(--err); }
/* 讲解面板:在文档流里占一行(deck 区域相应缩矮),不遮挡 deck 内容 */
.script-panel {
max-height:26%; min-height:120px;
display:flex; flex-direction:column;
border-top:1px solid var(--frame); background:color-mix(in srgb, var(--panel) 92%, #000);
}
.script-panel.hidden { display:none; }
.script-head {
display:flex; align-items:center; gap:10px; padding:5px 14px;
font-size:12px; color:var(--acc); border-bottom:1px dashed var(--frame);
}
.script-head .spacer { flex:1; }
.script-head a { color:var(--dim); cursor:pointer; }
.script-head a:hover { color:var(--hot); }
.script-body { flex:1; overflow-y:auto; padding:12px 16px; color:var(--text); font-size:14px; line-height:1.8; }
@media (max-width:680px) {
#glass { width:100vw; height:100vh; border-radius:0; }
#ui { inset:4px; }
#term { font-size:13px; padding:8px 10px; }
.mrow { grid-template-columns:46px 118px 1fr; gap:6px; }
.frow { grid-template-columns:34px 128px 1fr; }
.frow .dt { display:none; }
.frow.wide { grid-template-columns:30px 1fr; }
.demo-tag { display:none; }
#menubar { font-size:12px; }
}
@media (prefers-reduced-motion:reduce) {
#ui { animation:none !important; }
.cur::after { animation:none; }
.led { animation:none; }
#term.attract .mrow.sel { animation:none; }
}