/* ═══════════════════════════════════════════════════ MAKER — MOBILE LAYOUT (portrait phone, < 900px) Additive: nothing here applies above 899px, and nothing moves in the DOM. js/maker/mobile-shell.js sets `body.is-mobile`, marks each supported pane `.is-deck`, tags its panels `[data-mobile-panel]`, and toggles `.is-deck-active` on the one panel the deck shows. This sheet re-flows the pane's existing pieces into a column grid: toolbar — the tab's .preview-toolbar viewer — the tab's .canvas-frame (fills) handle — drag to resize the split (.mobile-handle, injected) strip — panel tabs (.mobile-strip, injected) deck — every panel shares this cell; one is visible The wrappers between the grid and those pieces (.preview-col, .preview-main) become `display: contents`, which is the whole trick — the toolbar, canvas, side docks, bottom dock and settings rail are then direct grid items and the tab code's ids / .open classes keep working. See docs/mobile-layout-plan.md. ═══════════════════════════════════════════════════ */ /* The shell's injected nodes belong to the phone layout only. If the viewport grows past 899px after they were created (tablet rotation, window resize) they must not leak into the desktop layout. */ body:not(.is-mobile) .mobile-strip, body:not(.is-mobile) .mobile-handle, body:not(.is-mobile) .mobile-zoom-hud, body:not(.is-mobile) .mobile-tab-btn, body:not(.is-mobile) .mobile-curtain, body:not(.is-mobile) .mobile-sheet-backdrop { display: none !important; } @media (max-width: 899px) { body.is-mobile { overscroll-behavior: none; } /* The old "best on desktop" overlay is retired at these widths. Not scoped to body.is-mobile on purpose: that class arrives with the script at the end of , and the overlay would flash on a slow connection until then. */ .mobile-gate { display: none !important; } /* ── App bar: brand · current-tab button · era · account ── */ body.is-mobile .maker .app-bar { height: 44px; padding: 0 var(--sp-4); gap: var(--sp-2); padding-top: env(safe-area-inset-top); } body.is-mobile .maker .app-bar .tabbar { display: none; } body.is-mobile .maker .app-bar .app-brand-logo { height: 18px; } body.is-mobile .maker .app-bar .app-bar-right { margin-left: auto; gap: var(--sp-2); min-width: 0; } /* logged-out: "Login with Discord" → "Login" (auth.js swaps this node for the account chip once signed in, so only the anonymous state is touched) */ body.is-mobile .maker .app-bar .btn-discord { font-size: 0 !important; padding: 0 10px !important; height: 32px; display: inline-flex; align-items: center; white-space: nowrap; } body.is-mobile .maker .app-bar .btn-discord::before { content: "Login"; font-size: 12px; font-weight: 600; } /* signed-in chip: avatar + caret only */ body.is-mobile .maker .app-bar .header-username { display: none; } body.is-mobile .maker .app-bar .header-user-btn { padding-left: 4px; padding-right: 6px; } body.is-mobile .maker .mobile-tab-btn { display: inline-flex; align-items: center; gap: var(--sp-2); height: 32px; padding: 0 var(--sp-4) 0 var(--sp-5); border: 1px solid var(--border-lo); border-radius: var(--r); background: var(--chrome-hi); color: var(--text); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; max-width: 46vw; min-width: 84px; flex: 0 1 auto; } body.is-mobile .maker .mobile-tab-btn .label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.is-mobile .maker .mobile-tab-btn .caret { flex-shrink: 0; font-size: 10px; color: var(--text-dim); } /* ── Shell fills the screen edge to edge ── */ body.is-mobile .maker .shell { margin: 0; border-radius: 0; border-left: none; border-right: none; box-shadow: none; } body.is-mobile .maker .statusbar { height: 20px; font-size: var(--fs-2); padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box; } body.is-mobile .maker .statusbar .status-tooltip { display: none; } /* ── The pane grid ── */ body.is-mobile .maker .tab-pane.is-deck > .panel-body { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) 14px auto minmax(0, var(--mobile-deck-h, 46%)) !important; grid-template-areas: "toolbar" "viewer" "handle" "strip" "deck"; height: 100%; min-height: 0; overflow: hidden; } body.is-mobile .maker .tab-pane.is-deck .preview-col, body.is-mobile .maker .tab-pane.is-deck .preview-main { display: contents !important; } /* toolbar: one scrollable row, thumb-sized controls */ body.is-mobile .maker .tab-pane.is-deck .preview-toolbar { grid-area: toolbar; height: 40px; padding: 0 var(--sp-4); gap: var(--sp-3); overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: none; } body.is-mobile .maker .tab-pane.is-deck .preview-toolbar::-webkit-scrollbar { display: none; } body.is-mobile .maker .tab-pane.is-deck .preview-toolbar > * { flex-shrink: 0; } body.is-mobile .maker .zoom-btn { width: 30px; height: 30px; font-size: 16px; } body.is-mobile .maker .bg-dot { width: 20px; height: 20px; } body.is-mobile .maker .toolbar-file-btn { height: 30px; } /* viewer: the canvas frame fills its row; side-dock padding shifts are moot */ body.is-mobile .maker .tab-pane.is-deck .canvas-frame { grid-area: viewer; min-height: 0; padding: 12px !important; touch-action: pan-x pan-y; /* we own two-finger pinch (mobile-shell.js) */ -webkit-overflow-scrolling: touch; } body.is-mobile .maker .tab-pane.is-deck .preview-toolbar, body.is-mobile .maker .tab-pane.is-deck .picker-dock-collapse { margin-left: 0 !important; } /* floating zoom HUD — a grid item sharing the viewer cell, pinned top-right, so it stays put while the canvas frame scrolls underneath */ body.is-mobile .maker .mobile-zoom-hud { grid-area: viewer; justify-self: end; align-self: start; margin: 8px; display: flex; flex-direction: column; gap: 6px; z-index: 25; } body.is-mobile .maker .mobile-zoom-hud[hidden] { display: none; } body.is-mobile .maker .mobile-zoom-hud button { width: 34px; height: 34px; border: 1px solid var(--border-lo); border-radius: var(--r); background: rgba(255, 255, 255, 0.88); color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } /* split handle */ body.is-mobile .maker .mobile-handle { grid-area: handle; display: grid; place-items: center; background: var(--chrome); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); cursor: ns-resize; touch-action: none; user-select: none; } body.is-mobile .maker .mobile-handle::before { content: ""; width: 40px; height: 4px; border-radius: 2px; background: var(--border-lo); } /* panel strip */ body.is-mobile .maker .mobile-strip { grid-area: strip; display: flex; gap: 4px; padding: 6px var(--sp-4) 0; background: var(--chrome); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; } body.is-mobile .maker .mobile-strip::-webkit-scrollbar { display: none; } body.is-mobile .maker .mobile-strip button { flex-shrink: 0; height: 32px; padding: 0 12px; border: 1px solid transparent; border-bottom: none; border-radius: var(--r) var(--r) 0 0; background: var(--tab-inactive); color: var(--text-dim); font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; } body.is-mobile .maker .mobile-strip button.is-active { background: color-mix(in srgb, var(--accent) 15%, var(--tab-active)); border-color: var(--border); color: var(--accent); font-weight: 600; } /* deck panels: every registered panel becomes a plain scrolling block in the deck cell; exactly one is shown. The desktop rules that positioned them (absolute + translate side docks, flex-basis bottom docks, the 220px rail) are all overridden here. */ body.is-mobile .maker .tab-pane.is-deck [data-mobile-panel] { grid-area: deck; display: none !important; position: static !important; transform: none !important; transition: none !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; flex: none !important; margin: 0 !important; border: none !important; box-shadow: none !important; z-index: auto !important; overflow: auto !important; background: var(--tab-active); } body.is-mobile .maker .tab-pane.is-deck [data-mobile-panel].is-deck-active { display: flex !important; flex-direction: column; } /* bottom docks: never collapsed, no resize handles, no in-dock headers' collapse affordance */ body.is-mobile .maker .tab-pane.is-deck [data-mobile-panel].is-collapsed .bd-main { display: flex !important; } body.is-mobile .maker .tab-pane.is-deck [data-mobile-panel] .bd-resize-handle, body.is-mobile .maker .tab-pane.is-deck [data-mobile-panel] .cv-dock-resize-handle, body.is-mobile .maker .tab-pane.is-deck [data-mobile-panel] [class*="-resize-handle"], body.is-mobile .maker .tab-pane.is-deck [data-mobile-panel] .bd-chevron { display: none !important; } body.is-mobile .maker .tab-pane.is-deck [data-mobile-panel] .bd-main { min-height: 0; } /* browse-dock rail: fold to a narrow column so the grid gets the width */ body.is-mobile .maker .tab-pane.is-deck [data-mobile-panel] .bd-rail { flex-basis: 112px; } /* settings rail: comfortable rows */ body.is-mobile .maker .tab-pane.is-deck .controls-col { padding: var(--sp-4) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom)); gap: var(--sp-4); } body.is-mobile .maker .tab-pane.is-deck .controls-col .btn, body.is-mobile .maker .tab-pane.is-deck .controls-col .cv-shell-btn, body.is-mobile .maker .tab-pane.is-deck .controls-col .cv-panel-row { min-height: 34px; } /* inputs at 16px so iOS doesn't zoom the page on focus */ body.is-mobile .maker .tab-pane.is-deck input[type="text"], body.is-mobile .maker .tab-pane.is-deck input[type="search"], body.is-mobile .maker .tab-pane.is-deck .bd-search { font-size: 16px; } /* anything else the tab keeps inside its preview column (the Chat Balloon host on Interface, Characters' pose/emote popovers, loading overlays) shares the viewer cell instead of opening an implicit grid row */ body.is-mobile .maker .tab-pane.is-deck > .panel-body { position: relative; } body.is-mobile .maker .tab-pane.is-deck .preview-col > :not([data-mobile-panel]):not(.preview-toolbar):not(.canvas-frame), body.is-mobile .maker .tab-pane.is-deck .preview-main > :not([data-mobile-panel]):not(.preview-toolbar):not(.canvas-frame) { grid-area: viewer; } /* ── Maps ── */ /* color dock: three side-by-side columns become a stack */ body.is-mobile .maker .tab-map .map-color-dock.is-deck-active { flex-direction: column; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom)); border-top: none; border-radius: 0; } body.is-mobile .maker .tab-map .map-color-col { flex: none !important; width: auto; } body.is-mobile .maker .tab-map .map-right-dock.is-deck-active { padding: var(--sp-4) var(--sp-5); gap: var(--sp-4); } /* the map frame pans by scrolling; one finger drags it natively */ body.is-mobile .maker .tab-map .canvas-frame { cursor: default; } /* ── Interface ── */ /* Chat Balloon swaps in its own preview column (toolbar + frame) as the stage; it is not part of the pane grid, so it keeps its column layout instead of dissolving into `display: contents`. */ body.is-mobile .maker .tab-interface.is-deck .if-chat-stage .preview-col { display: flex !important; flex-direction: column; } body.is-mobile .maker .tab-interface.is-deck .if-chat-stage .canvas-frame { flex: 1 1 auto; } body.is-mobile .maker .tab-interface .if-side-dock.is-deck-active { animation: none; } body.is-mobile .maker .tab-interface .if-side-dock .if-side-dock-body { padding: var(--sp-4) var(--sp-5); } /* ── Characters ── */ body.is-mobile .maker .tab-character .cv-adjust-panel.is-deck-active { border-top: none; border-radius: 0; } body.is-mobile .maker .tab-character .cv-picker-panel.is-deck-active, body.is-mobile .maker .tab-character .cv-pose-picker-panel.is-deck-active, body.is-mobile .maker .tab-character .cv-edit-layers-panel.is-deck-active, body.is-mobile .maker .tab-character .cv-export-panel.is-deck-active { box-shadow: none; } /* ── Desktop-only curtain (Scenes, Tile Maps): replaces the pane's content ── */ body.is-mobile .maker .tab-pane.is-mobile-unsupported > :not(.mobile-curtain) { display: none !important; } body.is-mobile .maker .mobile-curtain { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); padding: 32px; text-align: center; background: var(--bg); } body.is-mobile .maker .mobile-curtain h2 { font-size: 16px; font-weight: 700; color: var(--text); margin: 0; } body.is-mobile .maker .mobile-curtain p { font-size: var(--fs-4); color: var(--text-dim); line-height: 1.6; max-width: 300px; margin: 0; } body.is-mobile .maker .mobile-curtain .actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-3); } body.is-mobile .maker .mobile-curtain .btn { width: auto; min-height: 40px; padding: 0 16px; } /* no dead-end from Files: scenes can't be authored on a phone */ body.is-mobile .maker .tab-home #home-new-scene { display: none; } /* ── Files (home): rail + library stack into one scrolling column ── */ body.is-mobile .maker .tab-home .home-body { flex-direction: column; overflow-y: auto; } body.is-mobile .maker .tab-home .home-rail { flex: 0 0 auto; width: auto; border-right: none; border-bottom: 1px solid var(--border); padding: var(--sp-4) var(--sp-5); overflow: visible; } body.is-mobile .maker .tab-home .home-rail .home-create-btn { min-height: 44px; } body.is-mobile .maker .tab-home .home-main { flex: 1 0 auto; overflow: visible; padding-bottom: calc(24px + env(safe-area-inset-bottom)); } body.is-mobile .maker .tab-home .home-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); } /* ── Tab sheet ── */ body.is-mobile .mobile-sheet-backdrop { position: fixed; inset: 0; z-index: 250; background: rgba(20, 24, 40, 0.38); display: flex; align-items: flex-end; } body.is-mobile .mobile-sheet { width: 100%; max-height: 80vh; overflow-y: auto; background: var(--chrome-hi); border-radius: 14px 14px 0 0; padding: 10px 14px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2); } body.is-mobile .mobile-sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--border-lo); margin: 0 auto 10px; } body.is-mobile .mobile-sheet h6 { margin: 10px 0 6px; font-size: var(--fs-2); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); } body.is-mobile .mobile-sheet .tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } body.is-mobile .mobile-sheet .tabs button { height: 40px; border: 1px solid var(--border); border-radius: var(--r); background: var(--chrome); color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer; } body.is-mobile .mobile-sheet .tabs button.is-active { background: color-mix(in srgb, var(--accent) 15%, var(--tab-active)); border-color: var(--accent); color: var(--accent); font-weight: 600; } body.is-mobile .mobile-sheet .tabs button:disabled { opacity: 0.45; cursor: default; } body.is-mobile .mobile-sheet .tabs button small { display: block; font-size: 9px; font-weight: 400; color: var(--text-dim); } /* ── Modals become sheets ── */ body.is-mobile .maker .cv-modal-dialog, body.is-mobile .app-modal, body.is-mobile .bugreport-modal { width: 100vw !important; max-width: none !important; max-height: 92vh; border-radius: 14px 14px 0 0; } body.is-mobile .maker .cv-modal-backdrop, body.is-mobile .app-modal-backdrop { align-items: flex-end; padding: 0; } }