/* * Touch layer for MDView. Loaded after viewer.css and only by the mobile * shell; the desktop app never sees this file. * * Two things drive most of what is here: * * 1. The contents pane is a sidebar on the desktop and a drawer on a phone. * viewer.js does not know the difference - it still just toggles the * "toc-collapsed" class on , and the rules below turn that into a * slide-in overlay instead of a column. * * 2. Text size replaces the desktop's Ctrl+Scroll zoom. Everything the * markdown styles use is rem-based, so scaling the root font size scales * the document. The toolbar is therefore pinned in px so it stays put. */ html { font-size: calc(16px * var(--doc-scale, 1)); } :root { --toolbar-height: 52px; --toc-width: min(82vw, 300px); --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); } /* viewer.css sizes the app to 100% of the viewport. In a browser tab on Android that height changes as the URL bar slides away, which shifts the layout under the reader mid-scroll. dvh is the height that accounts for it. An installed app has no URL bar and never notices. */ @supports (height: 100dvh) { html, body { height: 100dvh; } } body.mobile { /* A phone browser's own overscroll glow and back-swipe fight a scroll container; the document inside still scrolls normally. */ overscroll-behavior: none; -webkit-tap-highlight-color: transparent; } /* -------------------------------------------------------------- toolbar --- */ body.mobile .toolbar { height: calc(var(--toolbar-height) + var(--safe-top)); padding: var(--safe-top) calc(0.35rem + var(--safe-right)) 0 calc(0.35rem + var(--safe-left)); gap: 0.1rem; /* The toolbar must not grow with the document text size. */ font-size: 16px; } body.mobile .doc-title { font-size: 13px; padding: 0 0.2rem; } body.mobile .icon-button { width: 44px; height: 44px; border-radius: 10px; } body.mobile .icon-button svg { width: 21px; height: 21px; } /* Hover is a lie on touch; the pressed state is what the finger gets. */ body.mobile .icon-button:hover { background: transparent; color: var(--text-muted); } body.mobile .icon-button:active { background: var(--accent-soft); color: var(--text); } body.mobile .primary-button:hover { filter: none; } body.mobile .primary-button:active { filter: brightness(0.92); } body.mobile .toc-list a:hover { background: transparent; color: var(--text-muted); } body.mobile .toc-list a:active { background: var(--accent-soft); color: var(--text); } body.mobile .toc-list a.active { color: var(--accent); } /* ---------------------------------------------------------------- drawer --- */ body.mobile .body { position: relative; } body.mobile .toc { position: fixed; top: calc(var(--toolbar-height) + var(--safe-top)); bottom: 0; left: 0; z-index: 20; width: var(--toc-width); flex: none; padding: 0.9rem 0.5rem calc(2rem + var(--safe-bottom)) calc(0.7rem + var(--safe-left)); font-size: 16px; box-shadow: 2px 0 14px rgba(0, 0, 0, 0.18); transform: translateX(0); transition: transform 0.18s ease-out; overscroll-behavior: contain; } /* viewer.css hides the pane outright when collapsed. On a phone it has to stay in the layout so it can slide, so this rule has to undo that display:none - it wins on source order, both selectors being equally specific. */ body.mobile.toc-collapsed .toc { display: block; transform: translateX(-102%); box-shadow: none; } body.mobile .toc-head { font-size: 11px; padding: 0 0.5rem 0.5rem; } body.mobile .toc-list a { font-size: 15px; line-height: 1.35; padding-top: 0.55rem; padding-bottom: 0.55rem; white-space: normal; overflow: visible; } body.mobile .toc-level-2 a { font-size: 14px; } body.mobile .toc-level-3 a { font-size: 13px; } .toc-scrim { position: fixed; inset: calc(var(--toolbar-height) + var(--safe-top)) 0 0 0; z-index: 15; background: rgba(0, 0, 0, 0.42); opacity: 1; transition: opacity 0.18s ease-out; } body.toc-collapsed .toc-scrim { display: none; } /* Wide enough to be a tablet in landscape: go back to a real sidebar. */ @media (min-width: 60rem) { body.mobile .toc { position: static; flex: 0 0 var(--toc-width); transform: none; box-shadow: none; transition: none; } body.mobile.toc-collapsed .toc { display: none; } .toc-scrim { display: none !important; } } /* -------------------------------------------------------------- content --- */ body.mobile .scroller { -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; } body.mobile .content { padding: 1.4rem calc(1.1rem + var(--safe-left)) calc(5rem + var(--safe-bottom)) calc(1.1rem + var(--safe-right)); } /* Long unbroken tokens - URLs, hashes, paths - are what actually overflow a phone-width column. */ body.mobile .markdown-body p, body.mobile .markdown-body li, body.mobile .markdown-body td, body.mobile .markdown-body th { overflow-wrap: break-word; } body.mobile .markdown-body h1 { font-size: 1.6rem; } body.mobile .markdown-body h2 { font-size: 1.32rem; } body.mobile .markdown-body h3 { font-size: 1.12rem; } /* Code and diagrams cannot reflow, so they scroll inside their own box rather than making the whole page scroll sideways. */ body.mobile .code-block pre, body.mobile .table-wrap { -webkit-overflow-scrolling: touch; } body.mobile .mermaid-block { overflow-x: auto; overscroll-behavior-x: contain; } body.mobile .markdown-body a { padding: 0.1rem 0; } /* -------------------------------------------------------------- landing --- */ body.mobile .state-panel { padding: 1.1rem calc(1rem + var(--safe-left)) calc(2rem + var(--safe-bottom)) calc(1rem + var(--safe-right)); align-items: flex-start; padding-top: 2rem; } body.mobile .state-card { padding: 1.8rem 1.3rem; } .recents { margin-top: 1.8rem; text-align: left; } .recents-head { display: flex; align-items: baseline; justify-content: space-between; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-faint); padding: 0 0.2rem 0.4rem; border-bottom: 1px solid var(--border); } .link-button { font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 0.2rem 0.3rem; border: 0; background: none; color: var(--accent); cursor: pointer; } .recents-list { list-style: none; margin: 0; padding: 0; } .recents-list li { border-bottom: 1px solid var(--border); } .recents-list button { display: block; width: 100%; font: inherit; text-align: left; padding: 0.75rem 0.3rem; border: 0; background: none; color: var(--text); cursor: pointer; } .recents-list button:active { background: var(--accent-soft); } .recents-name { display: block; font-size: 0.94rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .recents-meta { display: block; font-size: 0.78rem; color: var(--text-faint); } /* ---------------------------------------------------------------- toast --- */ .toast { position: fixed; left: 50%; bottom: calc(1.4rem + var(--safe-bottom)); z-index: 40; transform: translateX(-50%); max-width: min(90vw, 30rem); padding: 0.7rem 1.1rem; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--bg-raised); color: var(--text); font-size: 0.85rem; text-align: center; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }