/* This file is part of Chaos Accelerator, licensed under the Common Public Attribution License, Version 1.0 (CPAL-1.0) - see LICENSE in the project root, or https://chaosaccelerator.com/license for a hosted copy. */ /* Phones, and fingers. Three separate questions are answered here, by three separate sets of classes that layout-mode.js keeps on (see its header for why they are separate - a touch laptop and a phone with a mouse are both real): html.layout-mobile the window is small: the grid's menus html.layout-mobile-portrait dock along the bottom edge, or - a phone html.layout-mobile-landscape on its side - along the right one. html.input-touch a touchscreen exists (maybe beside a mouse) html.input-coarse ...and is the PRIMARY pointer: bigger targets, no text selection, 16px fields. Loaded last (see chaos.html), so a rule here beats the same selector in any of the view stylesheets without !important. Nothing outside a class above changes the desktop layout, with four deliberate exceptions, all at the top: the viewport-height unit, overscroll, and the two new elements (the dock, the touch-only Inspect (Point) button) that have to be HIDDEN there. */ :root { /* A phone's notch, status bar and home indicator, which viewport-fit=cover (see chaos.html) lets the canvas run underneath. Zero everywhere else. Named once because nearly every floating control needs one of them. */ --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); /* How much of the window's bottom/right edge the editor's panel or the grid's dock is covering right now - measured and kept up to date by layout-mode.js, read by the watermark below. */ --chrome-bottom: 0px; --chrome-right: 0px; --dock-tab-size: 56px; } /* ---- Every layout ---- */ /* 100vh on a phone is the viewport with the browser's toolbars RETRACTED - taller than what is actually showing, so the bottom of the app (which on a phone is where all of its controls are) sits under the toolbar. dvh is the part you can see. Identical on a desktop; the vh line is for browsers from before the unit existed. */ #app { height: 100vh; height: 100dvh; } /* The same correction for the grid's floating menus, whose height caps are spelled in vh for a reason of their own (see #grid-menu-stack in fractal-grid.css): on a tablet - desktop layout, mobile browser - a cap measured against the taller viewport lets a card run under the browser's toolbar. Same selectors as the rules they correct, so the portrait overrides in responsive-layout.css still outrank these exactly as they outrank those. */ @supports (height: 100dvh) { #grid-menu-stack { max-height: calc(100dvh - var(--panel-inset) * 2); } .menu-card { max-height: calc(100dvh - var(--panel-inset) * 2 - var(--menu-reserved)); } #grid-right-menu-column { max-height: calc(100dvh - var(--panel-inset) * 2); } #grid-right-menu-column .menu-card { max-height: calc(100dvh - var(--panel-inset) * 2 - (var(--settings-btn-size) + 8px) * 2); } .render-progress-card { max-height: none; } } html { /* iOS inflates text it judges too small when a phone is turned on its side, which here means every label in a layout sized to the pixel. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* Double-tap is not zoom anywhere in this app - it is two taps, on controls that are routinely pressed twice (a speed step, a keyframe nudge). Pinch-zoom of the page itself is left alone. */ touch-action: manipulation; } html, body { /* No pull-to-refresh and no rubber-band: a drag that starts on the map and runs off its edge must not take the page with it. */ overscroll-behavior: none; } body { -webkit-tap-highlight-color: transparent; } /* The app is exactly one screen; only its panels scroll. Without this a phone will still drag the whole page by a few pixels whenever anything in it measures a hair larger than the viewport. */ html.layout-mobile, html.layout-mobile body { overflow: hidden; } /* The editor's canvas handles its own pointers (see "Canvas interaction" in physics-ui.js) - every drag on it is a shape, a move or a handle, never a scroll. The grid's canvas already says the same (see fractal-grid.css). */ #physics-canvas { touch-action: none; } /* A backing store capped below the display's own density (see gridDpr in fractal-grid.js) is stretched by a ratio that is not a whole number, where the pixelated rendering fractal-grid.css asks for turns into uneven stripes. Smooth scaling is the lesser evil there. */ #grid-canvas.is-upscaled { image-rendering: auto; } /* The back link's phone face (see #back-link in chaos.html) - not shown anywhere else. */ .menu-back-chevron { display: none; } /* Touch only - see its comment in chaos.html. */ #btn-inspect-point { display: none; /* The same idle/armed pair Line and Grid have in fractal-grid.css. */ background: transparent; border-color: var(--border); color: var(--text); } #btn-inspect-point.inspect-armed { background: var(--accent); border-color: var(--accent); color: white; } html.input-touch #btn-inspect-point, html.layout-mobile #btn-inspect-point { display: inline-block; } /* Three buttons where the card was laid out for two: they share the row evenly and may break their label across two lines to do it. */ html.input-touch #inspect-arm-row, html.layout-mobile #inspect-arm-row { gap: 6px; align-items: stretch; } html.input-touch #inspect-arm-row > button, html.layout-mobile #inspect-arm-row > button { flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; line-height: 1.2; } /* Empty and out of the layout until the small-window layout fills it (see "The dock" in fractal-grid.js). */ #grid-dock { display: none; } /* See "Losing the WebGL context" in fractal-grid.js. Over the map and everything floating on it, since none of that works until the reload. */ #grid-context-lost { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--text); background: rgba(12, 13, 17, 0.9); } #grid-context-lost[hidden] { display: none; } #grid-context-lost p { margin: 0; max-width: 340px; } /* The editor's counterpart to the grid's .inspect-toast, and built the same way (opacity, never [hidden]) for the same reason. Under the Play transport rather than at the bottom: the bottom of the editor's canvas is where the Fractal-ize button lives. */ .editor-hint-toast { position: absolute; left: 50%; top: calc(var(--panel-inset) + var(--safe-top) + 64px); transform: translateX(-50%); z-index: 11; width: max-content; max-width: min(340px, calc(100% - 24px)); text-align: center; background: rgba(12, 13, 17, 0.92); border: 1px solid var(--accent); border-radius: 8px; padding: 9px 14px; color: var(--text); font-size: 13px; line-height: 1.4; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; } .editor-hint-toast.visible { opacity: 1; } /* An absolutely positioned box at left:50% is laid out in the half of its container to the right of that line, so on a narrow screen the toast wrapped at half the width it had to itself. */ .inspect-toast { width: max-content; max-width: min(320px, calc(100% - 24px)); } /* A tip that had no room under its anchor sits above it instead (see positionTip in fractal-grid.js), with its arrow on the bottom edge pointing down. */ .tip-popover.tip-above::before { top: auto; bottom: -6px; transform: rotate(225deg); } /* ...unless the tip asked to go without (showTip's noArrowAbove): one that explains the picture has nothing below it to point at. */ .tip-popover.tip-no-arrow::before { display: none; } /* ---- A finger as the primary pointer ---- */ /* Hover styles that STICK after a tap, on a device that cannot hover: the tapped control keeps its hover look until something else is tapped. Only the ones where that misleads - a marker that stays showing its "click to remove" X, a Fractal-ize button frozen mid-leap - are put back; a button that stays a shade darker is harmless. */ @media (hover: none) { .fractalize-btn:hover { transform: none; filter: none; box-shadow: 0 4px 18px rgba(255, 107, 53, 0.55); } .inspect-marker:hover { background: var(--marker-color); border-color: #000; display: block; } .inspect-marker:hover::after { content: none; } /* In the dock a tab stays where it was tapped, so its hover fill would stay too - reading as a second lit tab next to the one that is. */ #grid-dock-tabs > .menu-toggle:hover { background: transparent; } } html.input-coarse #app { /* A long press on a label or a button otherwise starts a text selection (and on iOS a callout), which is never what it was for. */ -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } html.input-coarse #app textarea, html.input-coarse #app input, html.input-coarse #app .inspect-coords, html.input-coarse #app .inspect-coords-group { /* ...except where selecting text is the point: the scene JSON, a number field, an inspected point's coordinates. */ -webkit-user-select: text; user-select: text; } /* iOS zooms the whole page in when a field with text smaller than 16px takes focus, and never zooms back out - in a layout pinned to the viewport that leaves half the app off screen. 16px is the documented threshold. */ html.input-coarse select, html.input-coarse textarea, html.input-coarse input[type="number"], html.input-coarse input[type="text"] { font-size: 16px; } html.input-coarse #grid-view .field select { font-size: 16px; padding: 8px 8px; } html.input-coarse .movie-field input { font-size: 16px; width: 78px; padding: 4px 6px; } html.input-coarse .movie-field-arrows button { width: 28px; height: 18px; min-height: 0; font-size: 10px; } /* Targets. 44px is Apple's minimum and 48dp Android's; the desktop sizes (32px icon buttons, 26x24 keyframe buttons, a 14px slider thumb) were chosen for a cursor. */ html.input-coarse button { min-height: 40px; } html.input-coarse .tool-btn { min-height: 44px; } html.input-coarse .icon-button { width: 40px; height: 40px; } html.input-coarse .speed-btn { width: auto; min-width: 44px; } html.input-coarse .movie-keyframe-actions { gap: 6px; } html.input-coarse .movie-keyframe-actions .icon-button { width: 40px; height: 36px; min-height: 36px; font-size: 15px; } html.input-coarse .inspect-row { font-size: 13px; } html.input-coarse .inspect-row-remove { min-width: 40px; min-height: 36px; font-size: 18px; } html.input-coarse .tip-popover-actions button { font-size: 13px; padding: 6px 12px; } html.input-coarse .collapsible > summary { font-size: 13px; padding: 8px 0; } html.input-coarse .collapsible[open] > summary { /* Still the legend sitting on the dashed border - just with the taller hit area above pulled back up by as much. */ top: -17px; } /* A range input's whole box is its hit area, so a taller box is a bigger target without a custom thumb (which would mean restyling every slider in both views for every engine). */ html.input-coarse input[type="range"] { min-height: 32px; } html.input-coarse .toggle-field { min-height: 36px; } /* The two-handled slider DOES draw its own thumbs, and only the thumbs take pointer events (see .dual-range in fractal-grid.css) - so they are the target, and 14px of target is a coin toss between the two handles. */ html.input-coarse .dual-range { height: 40px; } html.input-coarse .dual-range input[type="range"] { min-height: 0; } html.input-coarse .dual-range input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -12px; } html.input-coarse .dual-range input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; } /* The speed popup's slider is a horizontal one turned on its side (see app-shell.css): wider here is the column a thumb has to land in. */ html.input-coarse .speed-slider-track { width: 44px; height: 160px; } html.input-coarse .speed-slider-track input[type="range"] { width: 160px; min-height: 44px; } /* ---- The small-window layout: both views ---- */ html.layout-mobile #watermark { right: calc(var(--chrome-right) + var(--safe-right) + 10px); bottom: calc(max(var(--chrome-bottom), var(--safe-bottom)) + 8px); font-size: 11px; opacity: 0.85; } /* Above the bottom chrome rather than on top of it: upright, the strip it sits over on a desktop is the editor's panel fading into the grid's tab bar, and a button floating over a row of other buttons reads as one of them. */ html.layout-mobile #transition-skip { bottom: calc(max(var(--chrome-bottom), var(--safe-bottom)) + 16px); } html.layout-mobile .modal { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom)); } html.layout-mobile .modal-textarea { /* 260px is most of a phone on its side. */ height: min(260px, 38dvh); } /* ---- The small-window layout: the editor ---- */ /* The top bar: the Play transport and the settings button, which float over the scene on a desktop, locked to the top of the screen instead - both are moved into #editor-topbar by physics-ui.js (see "The top bar" there), and the canvas starts below it. Out of the layout until then. */ #editor-topbar { display: none; } html.layout-mobile #editor-topbar { display: flex; flex-shrink: 0; align-items: center; gap: 8px; padding: calc(6px + var(--safe-top)) calc(10px + var(--safe-right)) 6px calc(10px + var(--safe-left)); background: var(--bg-panel); border-bottom: 1px solid var(--border); } /* In the bar, neither is a floating card any more: no position of its own, no fill, no shadow. The transport takes the width the button leaves. */ #editor-topbar #playback-toolbar { position: static; transform: none; flex: 1 1 auto; min-width: 0; align-items: stretch; gap: 2px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } #editor-topbar #playback-toolbar .playback-controls { gap: 6px; } #editor-topbar #playback-toolbar .readout { text-align: center; } #editor-topbar .floating-settings-btn, #editor-topbar .floating-home-btn { position: static; flex-shrink: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; background: transparent; } /* The panel that button opens takes the whole screen here, not a corner of it: a 280px card is most of a phone's width anyway, and what it left showing around its edges was only clutter. Above both views' own chrome. */ html.layout-mobile .settings-panel { top: 0; right: 0; bottom: 0; left: 0; width: auto; max-width: none; max-height: none; border: 0; border-radius: 0; z-index: 60; background: var(--bg-panel); -webkit-backdrop-filter: none; backdrop-filter: none; transform-origin: top center; } html.layout-mobile .settings-panel-header { padding: calc(14px + var(--safe-top)) calc(16px + var(--safe-right)) 14px calc(16px + var(--safe-left)); } html.layout-mobile .settings-panel-body { padding: 16px calc(16px + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(16px + var(--safe-left)); } html.layout-mobile #fractalize-wrap { bottom: 16px; } html.layout-mobile .editor-hint-toast { top: 12px; } html.layout-mobile .fractalize-btn { font-size: 16px; padding: 12px 28px; } /* Upright, responsive-layout.css has already moved #panel under the canvas. dvh for the reason #app uses it, and the home indicator's strip added to the bottom padding so the last control can be scrolled clear of it. */ html.layout-mobile-portrait #panel { max-height: 45dvh; padding: 14px 14px calc(14px + var(--safe-bottom)) 14px; gap: 16px; overscroll-behavior: contain; } /* On its side the panel stays docked left, a little narrower, and clear of the notch - which on a phone held this way is on the left or right edge. */ html.layout-mobile-landscape #panel { width: calc(268px + var(--safe-left)); padding: 12px 12px 12px calc(12px + var(--safe-left)); gap: 14px; overscroll-behavior: contain; } /* ---- The small-window layout: the grid ---- */ /* What is left floating over the map: the way back (upper left), the rendering-progress ring (lower left), the toast. Everything else has moved into the dock. */ html.layout-mobile #grid-menu-column { top: calc(var(--panel-inset) + var(--safe-top)); left: calc(var(--panel-inset) + var(--safe-left)); width: auto; max-width: calc(100% - var(--panel-inset) * 2 - var(--safe-left) - var(--safe-right)); } /* Just the chevron: a square button the size of the desktop's menu buttons, no words. */ html.layout-mobile .menu-back { width: var(--settings-btn-size); height: var(--settings-btn-size); padding: 0; justify-content: center; } html.layout-mobile .menu-back-label { display: none; } html.layout-mobile .menu-back-chevron { display: block; /* The chevron's own point sits left of its box's middle. */ margin-right: 2px; } html.layout-mobile #menu-render-progress { left: calc(var(--panel-inset) + var(--safe-left)); bottom: var(--panel-inset); } /* Nothing in the left column but the back link: the menus it held are in the dock. The right one is hidden whole - what is left in it is the Movie menu, which this layout deliberately does without (see "The dock" in fractal-grid.js). (.dock-active, not just the layout class: the column only gives up its other menus once the dock has actually taken them - see setDockActive - which a grid that never got a readable scene never reaches.) */ #grid-view.dock-active #grid-right-menu-column { display: none; } html.layout-mobile #grid-main { min-width: 0; min-height: 0; } html.layout-mobile-landscape #grid-view { flex-direction: row; } html.layout-mobile #grid-dock { display: flex; flex-shrink: 0; position: relative; /* Below the 4 that app-shell.css gives the editor's #panel for the length of a transition: upright, that panel and this dock occupy the same strip of the window, and the panel is supposed to be seen fading away over the grid rather than be covered by it from the first frame. (Neither .view is a stacking context, so the two numbers really do compete.) */ z-index: 2; min-width: 0; min-height: 0; background: var(--bg-panel); } html.layout-mobile-portrait #grid-dock { flex-direction: column; width: 100%; border-top: 1px solid var(--border); } html.layout-mobile-landscape #grid-dock { flex-direction: row; height: 100%; border-left: 1px solid var(--border); } /* The sheet: the one open card, scrolling if it is taller. Out of the layout entirely while nothing is open (.dock-sheet-open is kept by layoutDock in fractal-grid.js, which also sets the upright height). */ #grid-dock-sheet { display: none; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } #grid-view.dock-sheet-open #grid-dock-sheet { display: block; } html.layout-mobile-portrait #grid-dock-sheet { width: 100%; border-bottom: 1px solid var(--border); } html.layout-mobile-landscape #grid-dock-sheet { width: min(340px, 46vw); height: 100%; border-right: 1px solid var(--border); } /* A card in the sheet is a section of it, not a floating panel: full width, no chrome of its own, as tall as its content - the SHEET is what scrolls, so a card's body must not also. And no title line. On a desktop that line is how a card is named and put away; here the lit tab directly underneath does both - same icon, same name, press it to shut the card - so the line was a fifth of the sheet spent saying it twice. */ #grid-dock-sheet > .menu-card { width: 100%; max-width: none; max-height: none; overflow: visible; border: 0; border-radius: 0; box-shadow: none; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; } #grid-dock-sheet > .menu-card > .menu-card-header { display: none; } #grid-dock-sheet > .menu-card > .menu-card-body { overflow: visible; padding: 12px 14px 14px 14px; } #grid-dock-sheet > #grid-display-panel > .menu-card-body { padding: 12px 6px 8px 6px; } /* The display-mode thumbnails were sized as a share of a 320px card; at a phone's full width the same share is a picture twice the height of the sentence beside it. */ #grid-dock-sheet .display-mode-row img { width: 34%; max-width: 150px; } /* Inspect, re-ordered. Upright, the sheet shows about 300px of a card before it scrolls, and as laid out for the desktop that is the preview and its transport - with the buttons that ARE how a finger inspects anything (there is no hover) below the fold. So the card's two sections are dissolved (display: contents) and their children re-ordered as one column: the arm buttons first, then the preview they fill, then the rest. */ #grid-dock-sheet > #grid-inspect-panel > .menu-card-body > .panel-section { display: contents; } #grid-dock-sheet #inspect-arm-row { order: 1; } #grid-dock-sheet #hover-preview { order: 2; } #grid-dock-sheet #hover-playback-controls { order: 3; margin-top: 0; } #grid-dock-sheet #hover-readout { order: 4; margin: 0; } #grid-dock-sheet #grid-inspect-panel .section-label { order: 5; margin: 4px 0 0 0; } #grid-dock-sheet #grid-inspect-panel .tool-grid { order: 6; } #grid-dock-sheet #btn-inspect-clear-all { order: 7; margin-top: 0; } #grid-dock-sheet #inspect-list { order: 8; margin-top: 0; } #grid-dock-sheet #inspect-list:empty { display: none; } /* Full width would make the preview taller than the sheet it is in. */ #grid-dock-sheet #hover-preview { width: min(100%, 230px); align-self: center; } /* The tab bar. Every menu's own button, restyled: no card chrome, the icon over a short label (a finger gets no tooltip to learn an icon from), and lit while its card is open. */ #grid-dock-tabs { display: flex; flex-shrink: 0; min-width: 0; min-height: 0; } html.layout-mobile-portrait #grid-dock-tabs { flex-direction: row; width: 100%; padding: 0 var(--safe-right) var(--safe-bottom) var(--safe-left); } html.layout-mobile-landscape #grid-dock-tabs { flex-direction: column; width: calc(var(--dock-tab-size) + 8px + var(--safe-right)); height: 100%; padding: 0 var(--safe-right) var(--safe-bottom) 0; overflow-y: auto; scrollbar-width: none; } #grid-dock-tabs > .menu-toggle { flex: 1 1 0; min-width: 0; width: auto; height: var(--dock-tab-size); min-height: 44px; flex-direction: column; gap: 4px; padding: 0 2px; font-size: 18px; color: var(--text-dim); background: transparent; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; position: relative; } html.layout-mobile-landscape #grid-dock-tabs > .menu-toggle { width: 100%; height: auto; flex: 1 1 var(--dock-tab-size); max-height: 72px; } #grid-dock-tabs > .menu-toggle::after { content: attr(data-tab-label); font-size: 10px; font-weight: 500; line-height: 1; letter-spacing: 0.01em; white-space: nowrap; } #grid-dock-tabs > .menu-toggle > svg { flex-shrink: 0; } #grid-dock-tabs > .menu-toggle[aria-expanded="true"] { color: var(--accent); } /* A rule along the edge the tab shares with its sheet. */ #grid-dock-tabs > .menu-toggle[aria-expanded="true"]::before { content: ""; position: absolute; background: var(--accent); border-radius: 2px; } html.layout-mobile-portrait #grid-dock-tabs > .menu-toggle[aria-expanded="true"]::before { top: -1px; left: 18%; right: 18%; height: 2px; } html.layout-mobile-landscape #grid-dock-tabs > .menu-toggle[aria-expanded="true"]::before { left: -1px; top: 18%; bottom: 18%; width: 2px; } /* The shared settings body in the builder's full-screen panel: clear of the home indicator, which the mount's own padding (now zero) used to see to. */ html.layout-mobile #editor-settings-mount > .menu-card-body { padding: 16px calc(16px + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(16px + var(--safe-left)); }