/* ============================================================================ toc.css — unified table-of-contents for every article Desktop: a quiet left-margin spine that expands to a labelled panel. Mobile: a discreet corner button that opens a right drawer. Reads the existing a[data-toc] list; themes with the site (light + dark) and the seasonal --acc; honours prefers-reduced-motion. The overlay lives on (so position:fixed is never trapped by a transformed ancestor), which means the article-scoped tokens (--ink/--surf…) don't reach it. The site also keeps --color-* at light values in dark mode and recolours via .oa-* classes, so we map our own --t-* palette: global --color-* for light, the global --d-* tokens under html[data-theme="dark"]. ============================================================================ */ .oatoc { --t-surf: var(--color-surface, #fff); --t-surf2: #faf8f4; --t-ink: var(--color-text, #14110f); --t-ink3: var(--color-text-2, #4b4540); --t-mut: var(--color-muted, #7a736b); --t-bd: var(--color-border, #e4e0d8); --t-bds: #d8d2c7; --t-acc: var(--acc, var(--color-accent, #9e2b25)); --t-shadow: rgba(20, 17, 15, .11); --t-shadow-strong: rgba(20, 17, 15, .20); } html[data-theme="dark"] .oatoc { --t-surf: var(--d-surface, #211c17); --t-surf2: var(--d-surface-2, #272119); --t-ink: var(--d-text, #ece6dc); --t-ink3: var(--d-text-2, #cbc3b6); --t-mut: var(--d-text-3, #a49a8c); --t-bd: var(--d-border, #35302a); --t-bds: var(--d-border-strong, #453f36); --t-acc: var(--acc, var(--d-accent, #e46a60)); --t-shadow: rgba(0, 0, 0, .5); --t-shadow-strong: rgba(0, 0, 0, .62); } /* --- retire the old table-of-contents on every article --- (.oatoc-host is stamped by toc.js on whichever article view is active, so this reaches both the companion articles (.oa-artview) and the volumes (.dc-view)) */ .oatoc-host .oa-toc { display: none !important; } .oatoc-host [data-toc-rail] { display: none !important; } /* the volume layout reserved a 228px TOC column — collapse it to one centred column (inline styles set display:grid + max-width:1180px, so override both) */ .oatoc-host [data-article-grid] { display: block !important; max-width: 820px !important; margin: 0 auto !important; } /* land section jumps just below the sticky header */ .oatoc-host [id^="sec-"] { scroll-margin-top: 88px; } /* ---- shared chapter list (spine panel + drawer) ---- */ .oatoc-list { display: flex; flex-direction: column; gap: 1px; } .oatoc-list a { display: flex; gap: 11px; align-items: baseline; padding: 8px 12px; border-radius: 9px; text-decoration: none; color: var(--t-ink3); border-left: 2px solid transparent; font-family: 'Inter', system-ui, sans-serif; } .oatoc-list a .n { font-size: 10.5px; color: var(--t-mut); min-width: 15px; font-variant-numeric: tabular-nums; } .oatoc-list a .t { font-size: 13px; line-height: 1.32; } .oatoc-list a:hover { background: var(--t-surf2); } .oatoc-list a.is-cur { color: var(--t-ink); background: var(--t-surf2); border-left-color: var(--t-acc); } .oatoc-list a.is-cur .n { color: var(--t-acc); font-weight: 700; } .oatoc-list a.is-cur .t { font-weight: 600; } .oatoc-list a:focus-visible { outline: none; box-shadow: var(--focus-ring, 0 0 0 3px rgba(158,43,37,.32)); } .oatoc-hd { font-family: 'Inter', system-ui, sans-serif; font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--t-mut); padding: 0 12px 9px; } /* ================= DESKTOP · left spine ================= */ .oatoc-spine { position: fixed; left: 0; top: 64px; bottom: 0; z-index: 44; display: flex; align-items: center; } .oatoc-spine .oatoc-hit { padding: 16px 12px 16px 16px; cursor: pointer; } .oatoc-ticks { display: flex; flex-direction: column; gap: 13px; transition: opacity .2s; } .oatoc-tick { display: block; } .oatoc-tick .bar { display: block; height: 2px; width: 20px; background: var(--t-bds); border-radius: 2px; transition: width .2s, background .2s, opacity .2s; } .oatoc-tick.is-done .bar { background: var(--t-mut); opacity: .45; } .oatoc-tick.is-cur .bar { width: 32px; height: 2.5px; background: var(--t-acc); opacity: 1; } .oatoc-spine .oatoc-panel { position: absolute; left: 0; top: 50%; transform: translateY(-50%) translateX(-10px); opacity: 0; pointer-events: none; width: 266px; max-height: 80vh; overflow: auto; background: var(--t-surf); border: 1px solid var(--t-bd); border-radius: 12px; box-shadow: 16px 0 46px var(--t-shadow); padding: 16px 10px; transition: opacity .22s var(--ease-out, ease), transform .22s var(--ease-out, ease); } .oatoc-spine:hover .oatoc-panel, .oatoc-spine:focus-within .oatoc-panel, .oatoc-spine.is-open .oatoc-panel { opacity: 1; transform: translateY(-50%) translateX(14px); pointer-events: auto; } .oatoc-spine:hover .oatoc-ticks, .oatoc-spine:focus-within .oatoc-ticks, .oatoc-spine.is-open .oatoc-ticks { opacity: .22; } /* ================= MOBILE · button + drawer ================= */ .oatoc-fab, .oatoc-scrim, .oatoc-sheet { display: none; } @media (max-width: 860px) { .oatoc-spine { display: none; } .oatoc-fab { display: flex; align-items: center; gap: 8px; position: fixed; right: 16px; bottom: 16px; z-index: 60; background: var(--t-surf); border: 1px solid var(--t-bds); border-radius: 12px; box-shadow: 0 12px 30px var(--t-shadow-strong); padding: 10px 14px; font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; font-weight: 600; color: var(--t-ink); cursor: pointer; } .oatoc-fab svg { color: var(--t-acc); flex: none; } .oatoc-fab .count { color: var(--t-mut); font-weight: 500; font-variant-numeric: tabular-nums; } .oatoc-fab:focus-visible { outline: none; box-shadow: var(--focus-ring, 0 0 0 3px rgba(158,43,37,.32)); } .oatoc-scrim { display: block; position: fixed; inset: 0; z-index: 89; background: rgba(20, 17, 15, .30); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease-out, ease); } .oatoc-sheet { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; width: 304px; max-width: 86vw; z-index: 90; background: var(--t-surf); border-left: 1px solid var(--t-bd); box-shadow: -18px 0 52px var(--t-shadow-strong); transform: translateX(100%); transition: transform .3s var(--ease-out, ease); font-family: 'Inter', system-ui, sans-serif; } .oatoc.is-open .oatoc-scrim { opacity: 1; pointer-events: auto; } .oatoc.is-open .oatoc-sheet { transform: none; } .oatoc-sheet-hd { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 14px; border-bottom: 1px solid var(--t-bd); } .oatoc-sheet-hd .ttl { font-family: 'Spectral', Georgia, serif; font-size: 16px; color: var(--t-ink); } .oatoc-sheet-hd .zh { font-family: 'Noto Serif TC', serif; font-size: 12px; color: var(--t-mut); } .oatoc-x { border: 0; background: none; color: var(--t-mut); font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 6px; } .oatoc-x:focus-visible { outline: none; box-shadow: var(--focus-ring, 0 0 0 3px rgba(158,43,37,.32)); border-radius: 6px; } .oatoc-bar { height: 2px; background: var(--t-bd); } .oatoc-bar i { display: block; height: 100%; width: 0; background: var(--t-acc); transition: width .25s; } .oatoc-sheet .oatoc-list { padding: 10px 12px; overflow: auto; } .oatoc-sheet .oatoc-list a .t { font-size: 13.5px; } .oatoc-sheet-ft { margin-top: auto; padding: 12px 20px; border-top: 1px solid var(--t-bd); font-size: 10.5px; color: var(--t-mut); font-variant-numeric: tabular-nums; } } @media (prefers-reduced-motion: reduce) { .oatoc-spine .oatoc-panel, .oatoc-scrim, .oatoc-sheet, .oatoc-bar i, .oatoc-tick .bar { transition: none !important; } }