/** * mobile-nav.css * Mobile-only bottom tab bar + sheet navigation (≤768px). Every rule here is * either scoped inside the 768px media query or targets elements that only * exist for mobile (the tab bar, backdrop, sheet-head bars, export button), * so nothing in this file changes the desktop layout — desktop keeps using * the plain multi-column rules in styles-core.css / styles-components.css. * * What shows in each sheet is controlled by a single `data-mnav-sheet` * attribute on , set by js/mobile-nav.js. The elements themselves * (Setup fields, TTS panel, toggles, alignment tools, export actions) are * not duplicated or moved — this file only decides which existing group is * visible at a time. */ /* New mobile-only elements: invisible by default so they never appear on desktop even before the media query below is evaluated. */ .mnav-tabbar, .mnav-backdrop, .mnav-export-btn, .mnav-delete-btn, .mnav-sheet-head { display: none; } @media (max-width: 768px) { :root { --mnav-tabbar-h: 58px; } /* ============================================================ TOP BAR — compact: drop the tagline + breadcrumb, shrink the theme switch to icon-only, show the Export trigger. ============================================================ */ .header-center-text { display: none; } .app-breadcrumb { position: absolute !important; width: 1px; height: 1px; padding: 0 !important; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .theme-toggle-label { display: none; } .mnav-export-btn { display: none; /* shown only once a document exists, below */ width: 34px; height: 34px; align-items: center; justify-content: center; background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.35); border-radius: 8px; color: #4ade80; font-size: 1rem; cursor: pointer; flex: none; } body:has(#outputPanel.visible) .mnav-export-btn { display: inline-flex; } body.light-mode .mnav-export-btn { background: rgba(34, 197, 94, 0.1); color: #16a34a; } .mnav-delete-btn { display: none; /* shown only once a document exists, below */ width: 34px; height: 34px; align-items: center; justify-content: center; background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.35); border-radius: 8px; color: #f87171; font-size: 0.95rem; cursor: pointer; flex: none; } body:has(#outputPanel.visible) .mnav-delete-btn { display: inline-flex; } body.light-mode .mnav-delete-btn { background: rgba(239, 68, 68, 0.08); } /* ============================================================ BOTTOM TAB BAR ============================================================ */ .mnav-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: var(--mnav-tabbar-h); padding-bottom: env(safe-area-inset-bottom, 0px); background: rgba(15, 15, 15, 0.97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid rgba(255,255,255,0.08); z-index: 600; } body.light-mode .mnav-tabbar { background: rgba(250, 250, 252, 0.97); border-top-color: rgba(0,0,0,0.08); } .mnav-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; background: none; border: none; font-family: inherit; color: #9a9a9f; font-size: 0.62rem; font-weight: 600; cursor: pointer; } .mnav-tab-icon { font-size: 1.1rem; line-height: 1; } .mnav-tab.active { color: #4ade80; } body.light-mode .mnav-tab { color: #6b6b6f; } body.light-mode .mnav-tab.active { color: #16a34a; } /* Listen / Format / Display only make sense once there's a document. */ body:not(:has(#outputPanel.visible)) .mnav-tab[data-sheet="listen"], body:not(:has(#outputPanel.visible)) .mnav-tab[data-sheet="format"], body:not(:has(#outputPanel.visible)) .mnav-tab[data-sheet="display"] { opacity: 0.35; pointer-events: none; } /* ============================================================ BACKDROP + SHEET SHELLS ============================================================ */ .mnav-backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.15s ease; z-index: 550; } body[data-mnav-sheet] .mnav-backdrop { opacity: 1; pointer-events: auto; } body[data-mnav-sheet] { overflow: hidden; } /* .input-panel and #ttsPanel double as the two sheet "shells": whichever one is relevant for the open sheet gets shown (rules further down), positioned as a bottom sheet that stops above the tab bar. */ .input-panel, #ttsPanel { position: fixed !important; left: 0; right: 0; bottom: var(--mnav-tabbar-h) !important; max-height: 72vh; overflow-y: auto; z-index: 560; border-radius: 16px 16px 0 0; box-shadow: 0 -12px 30px -10px rgba(0,0,0,0.55); background: #141414; margin: 0 !important; box-sizing: border-box; } body.light-mode .input-panel, body.light-mode #ttsPanel { background: #fafafc; } .mnav-sheet-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 0.9rem; margin: 0 0 0.5rem; background: inherit; border-bottom: 1px solid rgba(255,255,255,0.08); z-index: 2; } body.light-mode .mnav-sheet-head { border-bottom-color: rgba(0,0,0,0.08); } .mnav-sheet-title { font-size: 0.9rem; font-weight: 700; color: #4ade80; } body.light-mode .mnav-sheet-title { color: #16a34a; } .mnav-sheet-close { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.08); border: none; border-radius: 6px; color: inherit; font-size: 0.75rem; cursor: pointer; flex: none; } body.light-mode .mnav-sheet-close { background: rgba(0,0,0,0.06); } /* ============================================================ WHICH CONTENT SHOWS FOR EACH SHEET Everything below defaults to hidden, then a `body[data-mnav-sheet="…"]` rule reveals just the group for the open sheet. .input-panel itself is hidden by default too — with no sheet open, the document canvas gets the full screen. ============================================================ */ .input-panel, #ttsPanel, #libraryLauncher, #templateBlock, #uploadBlock, #actionStatsRow, #outputHeader, #readingStatsSection, #outputTogglesBar, #bionicSliderContainer, #alignCustomizeRow { display: none !important; } body[data-mnav-sheet="import"] .input-panel, body[data-mnav-sheet="format"] .input-panel, body[data-mnav-sheet="display"] .input-panel, body[data-mnav-sheet="export"] .input-panel { display: block !important; } body:is([data-mnav-sheet="import"], [data-mnav-sheet="format"], [data-mnav-sheet="display"], [data-mnav-sheet="export"]) #mnavPanelHead { display: flex !important; } /* :not([hidden]) so this never overrides library.js hiding the launcher when there's nothing saved yet. Note: .input-area (the raw paste textarea + Load Sample/Clear) is deliberately left out — it's hidden everywhere in the app today (styles-core.css), not just on mobile, so this sheet doesn't resurrect a UI the product doesn't currently expose. */ body[data-mnav-sheet="import"] #libraryLauncher:not([hidden]) { display: flex !important; } body[data-mnav-sheet="import"] #templateBlock, body[data-mnav-sheet="import"] #uploadBlock { display: block !important; } body[data-mnav-sheet="import"] #actionStatsRow { display: flex !important; } body[data-mnav-sheet="format"] #alignCustomizeRow { display: flex !important; flex-direction: column; } body[data-mnav-sheet="display"] #readingStatsSection { display: block !important; } body[data-mnav-sheet="display"] #outputTogglesBar { display: flex !important; flex-direction: column; } /* Bionic intensity belongs with the Bionic toggle above, not in Format — #bionicSliderContainer sits right after #outputTogglesBar in the DOM (see core-formatting.js init()'s relocation), so showing both here puts the slider directly under the Bionic switch with no extra markup. */ body[data-mnav-sheet="display"] #bionicSliderContainer { display: flex !important; flex-direction: column; } body[data-mnav-sheet="export"] #outputHeader { display: flex !important; flex-direction: column; align-items: flex-start; } body[data-mnav-sheet="listen"] #ttsPanel { display: block !important; } body[data-mnav-sheet="listen"] #mnavListenHead { display: flex !important; } /* Hide Panel / Fullscreen (canvas-view.js) must win over an open sheet — both use body classes with equal specificity to the rules above, so repeat the hide here, later in the cascade, to settle the tie. */ body.controls-hidden .input-panel, body.app-fullscreen .input-panel, body.controls-hidden #ttsPanel, body.app-fullscreen #ttsPanel { display: none !important; } /* ============================================================ MISC — toast clears the tab bar; page leaves room for it. ============================================================ */ .toast { bottom: calc(var(--mnav-tabbar-h) + 0.75rem); } #mainContainer { padding-bottom: var(--mnav-tabbar-h); } }