/* ============================================================ Ospaces — mobile / narrow-screen refinements. The base responsive rules (sidebar becomes a fixed overlay at <=800px) live in css/style.css; this file layers touch sizing, the sidebar scrim, and small-screen layout fixes on top. ============================================================ */ /* scrim behind the open overlay sidebar (JS toggles .hidden) */ #sb-scrim { position: fixed; inset: 0; z-index: 49; background: rgba(15, 15, 15, 0.45); } @media (min-width: 801px) { #sb-scrim { display: none !important; } } @media (max-width: 800px) { /* --- topbar --- */ #topbar { padding: 0 8px; gap: 4px; } /* only the current location matters on a phone */ #breadcrumbs > :not(:last-child) { display: none; } /* --- touch targets --- */ .sb-action { padding: 8px 10px; font-size: 15px; } .tree-item { min-height: 36px; } .icon-btn { min-width: 34px; min-height: 34px; } /* --- library --- */ .lib-toolbar { flex-wrap: wrap; gap: 8px; } .lib-c-time { display: none; } .lib-head { flex-wrap: wrap; gap: 8px; } /* --- page --- */ #page-title { font-size: 30px; } #page-head { padding-top: 34px; } /* --- comments drawer: full width sheet --- */ #comments-drawer { width: 100% !important; max-width: 100vw; left: 0 !important; } /* --- modals fit the screen --- */ .modal { width: calc(100vw - 24px) !important; max-width: none !important; max-height: 86vh; overflow: auto; } /* --- full-screen feature views: let wide content scroll sideways --- */ #database-view, #tasks-view, #inbox-view, #daily-view { overflow-x: auto; } /* --- selection/format toolbar can wrap instead of overflowing --- */ .fmt-toolbar { flex-wrap: wrap; max-width: calc(100vw - 16px); } } /* ============================================================ Phone drawer (companion to js/mobilenav.js) — <=760px. ------------------------------------------------------------ A floating hamburger + scrim slide the existing #sidebar in and out, driven ENTIRELY by . This is kept independent of the desktop collapse system (body.sidebar-collapsed / #btn-expand / #sb-scrim): the rules below force the drawer's visibility from `sb-open` with !important, so app.js toggling `sidebar-collapsed` underneath is visually inert here and the two systems never conflict. Everything is scoped to <=760px, so desktop is untouched. ============================================================ */ /* injected controls do nothing on desktop */ .mnav-btn, .mnav-scrim { display: none; } @media (max-width: 760px) { /* ---- floating hamburger (top-left) ---- */ .mnav-btn { position: fixed; top: 3px; left: 8px; z-index: 46; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--text); background: var(--bg); border: 1px solid var(--border); box-shadow: var(--shadow-card); -webkit-tap-highlight-color: transparent; } .mnav-btn:active { background: var(--bg-hover); } body.sb-open .mnav-btn { display: none; } /* out of the way while open */ /* not on the login screen / logged-out reader */ #app.hidden ~ .mnav-btn, #app.hidden ~ .mnav-scrim { display: none; } /* the desktop topbar expander is redundant here — the hamburger replaces it */ #btn-expand { display: none !important; } /* reserve room so the breadcrumbs never sit under the hamburger */ #topbar { padding-left: 54px; } /* ---- off-canvas sidebar ---- */ #sidebar { width: min(84vw, 288px) !important; transform: translateX(-100%) !important; /* hidden by default… */ transition: transform 0.24s ease; will-change: transform; box-shadow: 12px 0 40px rgba(4, 5, 16, 0.5); /* --bg-sidebar is transparent by design (desktop shows the opaque frame behind the rail). As a drawer it floats over page content, so give it an opaque fill — the frame colour, keeping the redesign top-light. */ background: linear-gradient(180deg, rgba(255,251,240,0.03), rgba(255,251,240,0) 44%), var(--frame) !important; } body.sb-open #sidebar { transform: translateX(0) !important; } /* …slides in */ /* ---- dimming scrim ---- */ .mnav-scrim { position: fixed; inset: 0; z-index: 48; background: rgba(8, 8, 20, 0.5); -webkit-tap-highlight-color: transparent; } body.sb-open .mnav-scrim { display: block; } /* ---- content: full-width single column, comfortable padding ---- */ #main { border-radius: 0; } #page-body { padding: 0 16px 26vh; max-width: 100%; } .block-gutter { left: -16px; } #editor, #page-view, #library-view { max-width: 100%; } /* wide media must never blow out the page */ #page-scroll img, #page-scroll video, #page-scroll iframe, #page-scroll pre { max-width: 100%; } /* ---- tables / databases: horizontal scroll, page never scrolls sideways ---- */ #main { overflow-x: hidden; } #database-view, #tasks-view, #inbox-view, #daily-view, #calendar-view, #graph-view { overflow-x: auto; -webkit-overflow-scrolling: touch; } .db-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } /* ---- bigger touch targets (>=40px) ---- */ .sb-action, .topbar-btn, .db-tool-btn, .db-new-btn, .db-tab, .lib-tab, .lib-templates-btn, .menu-item { min-height: 40px; } .icon-btn { min-width: 40px; min-height: 40px; } /* ---- stack the toolbars instead of overflowing ---- */ .db-toolbar, .lib-toolbar, .lib-head, .fmt-toolbar { flex-wrap: wrap; gap: 8px; } .topbar-right { gap: 2px; } /* ---- popovers / menus fit the screen ---- */ #popover-layer > * { max-width: calc(100vw - 16px) !important; } /* ---- modals go near-fullscreen ---- */ .modal { width: calc(100vw - 12px) !important; max-width: none !important; max-height: 92vh; overflow: auto; } } /* ============================================================ Mobile EDITING ergonomics (companion to js/ui-polish.js) ------------------------------------------------------------ Everything below is additive and scoped to coarse pointers or the phone breakpoint, so the desktop layout is byte-for-byte unchanged. ui-polish.js publishes the VISIBLE viewport (window.visualViewport, i.e. the rect the on-screen keyboard leaves behind) as four custom properties on : --vv-height visible height --vv-top visible rect's offset inside the layout viewport --vv-bottom distance from the layout bottom to the visible bottom — i.e. how tall the keyboard is --vv-sheet-max how tall a bottom sheet may be right now The fallbacks below keep every rule sane if the script never runs. ============================================================ */ /* ---- popovers become bottom sheets on phones ---- A 220px-min floating popover anchored to a caret is unusable on a 375px screen and can render off-screen entirely. ui-polish.js adds `.polish-sheet` (a NEW class — nothing existing is renamed) to any `.popover` while the phone breakpoint is active; it is removed again as soon as the viewport grows, so this can never leak to desktop. The sheet sits on top of the keyboard, never behind it. */ @media (max-width: 760px) { #popover-layer > .popover.polish-sheet { position: fixed !important; top: auto !important; left: 8px !important; right: 8px !important; bottom: var(--vv-bottom, 8px) !important; width: auto !important; min-width: 0 !important; max-width: none !important; max-height: var(--vv-sheet-max, 52vh) !important; overflow-y: auto; overscroll-behavior: contain; border-radius: 16px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 44px rgba(4, 5, 16, 0.45), 0 0 0 1px var(--border); animation: polish-sheet-in 0.18s var(--ease-out, ease); } /* a grab affordance so it reads as a sheet, not a misplaced menu */ #popover-layer > .popover.polish-sheet::before { content: ""; display: block; width: 36px; height: 4px; margin: 2px auto 6px; border-radius: 999px; background: var(--border-strong); } @keyframes polish-sheet-in { from { transform: translateY(16px); opacity: 0; } } /* the selection toolbar is repositioned by JS; keep it above the sheet and never wider than the screen */ .fmt-toolbar { z-index: 160; max-width: calc(100vw - 16px); } } /* ---- >=44px effective touch targets on coarse pointers ---- Sized with a pseudo-element wherever growing the real box would move layout (the editor gutter), and with min-width/min-height where the control already lives in a wrapping flex row. */ @media (pointer: coarse) { /* editor gutter: the ⋮⋮ handle is 18x24 — extend the hit area LEFT into the empty page margin so it never steals taps from the first characters of the line. (mirrored under RTL, where the gutter sits on the right-hand side — see css/features/rtl.css) */ .bg-add, .bg-drag { position: relative; } .bg-add::after, .bg-drag::after { content: ""; position: absolute; top: 50%; right: -2px; width: 44px; height: 44px; transform: translateY(-50%); } html[dir="rtl"] .bg-add::after, html[dir="rtl"] .bg-drag::after { right: auto; left: -2px; } /* touch has no hover, so the gutter would never appear: reveal it for the block being edited */ .block:focus-within .block-gutter { opacity: 1; } /* formatting toolbar + menus */ .fmt-btn { min-width: 44px; min-height: 44px; } .menu-item { min-height: 44px; } .result-item { min-height: 44px; } /* row / card affordances inside databases */ .db-row-menu, .db-row-open, .db-card-menu, .db-tree-toggle, .db-list-toggle { min-width: 44px; min-height: 44px; } .db-row-select { width: 22px; height: 22px; } } /* ---- iOS zooms the whole page when a focused field is under 16px ---- Phones/small tablets only, so a desktop-sized touch screen keeps its compact form controls. */ @media (pointer: coarse) and (max-width: 900px) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select, .db-cell-text, .db-cell-input, .modal-search-input, .settings-input, .login-input { font-size: 16px; } } /* ---- horizontally scrolling surfaces ---- `overscroll-behavior-x: contain` stops a sideways swipe on a wide table from chaining into the page / triggering the browser's back gesture, while leaving VERTICAL chaining alone so the page still scrolls. */ @media (pointer: coarse) { .db-table-wrap, #database-view, #tasks-view, #inbox-view, #daily-view, #calendar-view, #graph-view, .table-wrap { overscroll-behavior-x: contain; overscroll-behavior-y: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; scrollbar-width: thin; } } @media (prefers-reduced-motion: reduce) { #popover-layer > .popover.polish-sheet { animation: none; } .db-table-wrap, #database-view, #tasks-view, #inbox-view, #daily-view, #calendar-view, #graph-view, .table-wrap { scroll-behavior: auto; } }