:root { --bg: #ffffff; --panel-bg: #f7f7f8; --border: #e3e3e8; --text: #1f2329; --muted: #8a8f99; --accent: #2563eb; --accent-soft: #e8f0fe; --hover: #eef1f5; --active: #dbe8ff; --topbar-h: 52px; --sidebar-w: 280px; --font-size: 16px; } /* Dark theme: applied via the .dark class on . The user can toggle it * with the theme button; the initial value follows the OS preference but the * choice is remembered in localStorage. Only the SHELL (topbar/sidebar) uses * these variables -- the content iframe is always white (see .content). */ html.dark { --bg: #1a1a1f; --panel-bg: #22222a; --border: #32323c; --text: #e6e6ea; --muted: #9a9aa3; --accent: #6ea8ff; --accent-soft: #1f2a44; --hover: #2a2a34; --active: #2f3a55; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", Roboto, Helvetica, Arial, sans-serif; font-size: var(--font-size); } /* CRITICAL: the HTML hidden attribute sets display:none, but author rules * like `.loading-overlay { display:flex }` override it (author > UA), which * makes the overlay ignore `hidden` and permanently cover the content. Force * hidden to always win so toggling the attribute reliably hides elements. */ [hidden] { display: none !important; } .app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; } /* ---------- top bar ---------- */ .topbar { flex: 0 0 var(--topbar-h); display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--panel-bg); border-bottom: 1px solid var(--border); } .doc-title { font-size: 15px; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; max-width: 30vw; } .search-wrap { position: relative; flex: 1 1 auto; max-width: 420px; margin-left: auto; } #searchBox { width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 14px; outline: none; } #searchBox:focus { border-color: var(--accent); } .search-results { position: absolute; top: 36px; left: 0; right: 0; max-height: 60vh; overflow-y: auto; margin: 4px 0 0; padding: 4px; list-style: none; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.12); z-index: 50; } .search-results li { padding: 7px 10px; border-radius: 4px; cursor: pointer; font-size: 14px; white-space: normal; overflow: hidden; } .search-results li:hover, .search-results li.active { background: var(--hover); } .search-results li mark { background: var(--accent-soft); color: var(--accent); padding: 0 1px; } .search-results li .res-title { display: block; font-weight: 600; } .search-results li .res-snip { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); /* clamp to two lines */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .toolbar-actions { display: flex; gap: 4px; } .icon-btn { height: 32px; min-width: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .icon-btn:hover { background: var(--hover); } /* ---------- layout ---------- */ .main { flex: 1 1 auto; display: flex; min-height: 0; } .sidebar { flex: 0 0 var(--sidebar-w); width: var(--sidebar-w); background: var(--panel-bg); border-right: 1px solid var(--border); overflow-y: auto; overflow-x: hidden; transition: margin-left .18s ease; } .sidebar.collapsed { margin-left: calc(-1 * var(--sidebar-w)); } .content { flex: 1 1 auto; position: relative; min-width: 0; /* The content pane holds the page iframe. CHM pages are authored for a * white background (black/red/blue text on white), so the content area is * always white regardless of the shell theme -- otherwise dark mode turns * black text invisible on a dark background. */ background: #ffffff; } .viewer { width: 100%; height: 100%; border: none; background: #ffffff; } /* ---------- table of contents ---------- */ .toc { padding: 8px 6px 40px; font-size: 14px; } .toc-loading { color: var(--muted); padding: 12px; } .toc ul { list-style: none; margin: 0; padding: 0 0 0 14px; } .toc > ul { padding-left: 4px; } .toc-row { display: flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 5px; color: var(--text); text-decoration: none; cursor: pointer; user-select: none; } .toc-row:hover { background: var(--hover); } .toc-row.active { background: var(--active); color: var(--accent); font-weight: 600; } .toc-row .twisty { flex: 0 0 14px; text-align: center; color: var(--muted); font-size: 10px; transition: transform .15s ease; } .toc-row .twisty.open { transform: rotate(90deg); } .toc-row .twisty.leaf { visibility: hidden; } .toc-row .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- states ---------- */ .loading-overlay { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.6); color: var(--muted); font-size: 14px; pointer-events: none; /* never block clicks meant for the content */ } html.dark .loading-overlay { background: rgba(26,26,31,.6); } .not-found { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); } /* ---------- responsive ---------- */ @media (max-width: 760px) { :root { --sidebar-w: 80vw; } .doc-title { max-width: 40vw; } .search-wrap { max-width: none; } .sidebar { position: absolute; z-index: 30; top: var(--topbar-h); bottom: 0; left: 0; box-shadow: 2px 0 10px rgba(0,0,0,.15); } .sidebar.collapsed { margin-left: -100%; } }