/* ========================================================================== THE PHONE FEELS LIKE AN APP — 15 October. Matt: "I LOVE LUCID. It is beautiful. The UI is not what is making the phone app cheap. It is the feel and poor navigation. There are some things like the lucid line that should be removed from the phone and keep the hamburger in the top left to open lucid. Depth to button push, larger tiles/font....just a couple of tweaks should get us there." So nothing here changes how Lucid LOOKS: the colours, the fonts, the cards and the themes are all app.css's. This changes how it holds still, how it gives under a finger and how you get out of things. EVERY RULE IN THIS FILE IS INSIDE (max-width:780px), which is the same test lucidPhoneAsk() in app.js uses to decide "phone". The one rule outside it hides the phone's top bar, the way .bottom-nav is hidden at every other width, so the Mac and the desktop web render byte-for-byte as they did. tests/test-the-phone-feels-real.js checks both halves of that. ========================================================================== */ .pf-top{ display:none; } @media (max-width:780px){ :root{ /* The top bar: a 44pt button with a step of air above and below. */ --pf-top-h: calc(44px + var(--space-2) * 2 + env(safe-area-inset-top)); /* The page clears the bar the way it clears the bottom nav: off .main's own band variable, which was the Lucid line's row until now. A plain number, because tests/test-home-top-gap.js reads it as one: the bar's 60 (44 + 8 + 8) and a 12px step of air. The safe area is added on .main below, where it is a length and not a declaration anybody reads. */ --lth-band: 72px; /* A press: down fast, back on a short spring. */ --pf-press: .96; --pf-press-wide: .985; --pf-press-in: var(--dur-press); /* app.css's phone press, 80ms */ --pf-release: 170ms; --pf-spring: cubic-bezier(.34, 1.56, .64, 1); /* What a control's words are drawn at. Secondary text keeps app.css's 13px floor (--type-label on the phone); the words ON a control are a step above it. */ --pf-control-text: 15px; /* THE PRESS EVERY CONTROL ALREADY HAS (THE TRAVEL, in rooms/mail.css, which is where the house put it) reads this. app.css's phone block set it to .97 and, being later than its own reduced-motion rule, also took the "no travel" away from anyone who had asked for less motion. Set here, and put back to none below for reduced motion. */ --press-scale: var(--pf-press); } /* ---- 1. THE LUCID LINE IS GONE FROM THE PHONE ---------------------------- The thread, its rail, its hint and its rungs. Nothing it did is lost: the line opened the Ask card, and so does #phoneLucidOpen, top left, on every screen. The rungs opened the one surface, which on a phone is the same Ask card (oneOpen() hands every face to it below 780px). */ .lth{ display:none !important; } .main{ --main-pad-top: calc(var(--lth-band) + env(safe-area-inset-top)); padding-top: calc(var(--lth-band) + env(safe-area-inset-top)); } /* ---- THE TOP BAR ---------------------------------------------------------- Fixed, so it stays put while the page scrolls under it, and drawn with the bottom nav's own glass so the two bars read as one frame. */ .pf-top{ display:flex; align-items:center; gap:var(--space-1); position:fixed; top:0; left:0; right:0; z-index:10; height:var(--pf-top-h); box-sizing:border-box; padding:env(safe-area-inset-top) var(--space-2) 0; background:color-mix(in srgb, var(--bg-base) 85%, transparent); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--glass-border); } .pf-top-btn{ -webkit-appearance:none; appearance:none; flex:none; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; margin:0; border:0; border-radius:var(--radius-card); background:transparent; color:var(--text); cursor:pointer; -webkit-tap-highlight-color:transparent; } .pf-top-btn svg{ width:24px; height:24px; } .pf-top-btn:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; } .pf-top-btn[hidden]{ display:none; } /* While the Ask card is open the hamburger says so, the way a lit tab does. */ .pf-top-btn[aria-expanded="true"]{ color:var(--accent); } /* The iPhone app's Ask card is a full-height sheet from the safe area down; it already covers the bar, and this keeps the bar from showing through its rounded corners. */ html.ios-shell body.ask-open .pf-top{ visibility:hidden; } /* ONE HAMBURGER PER SCREEN. Mail's folder-list toggle (#tbSpineToggle) is three lines too, and on the phone it sat one row under the Lucid one. The rule: the three lines top left are Lucid, everywhere. Mail's toggle keeps its place, its size, its label and what it does, and is drawn as a folder, which is what it opens. ::before, because ::after is the house's tooltip slot ([data-tooltip]::after in app.css). */ #tbSpineToggle svg{ display:none; } #tbSpineToggle::before{ content:""; display:block; flex:none; width:20px; height:20px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3 6.5A1.5 1.5 0 0 1 4.5 5H9l2 2h8.5A1.5 1.5 0 0 1 21 8.5v9a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 17.5z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3 6.5A1.5 1.5 0 0 1 4.5 5H9l2 2h8.5A1.5 1.5 0 0 1 21 8.5v9a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 17.5z'/%3E%3C/svg%3E") center/contain no-repeat; } /* ---- 2. DEPTH WHEN A BUTTON IS PRESSED ------------------------------------ app.css already lays a wash over anything pressed (THE TINT) and app.js already has the touchstart listener iOS needs before :active fires on a touch, and the haptic tick through LucidHaptics. What was missing is the travel: the control going DOWN under the finger and springing back. :where() keeps this at the weight of a bare :active, so any control that already has a press of its own (Mail's, the Board's) keeps it. A wide thing (a card, a row, a tile) travels less, because a whole row shrinking by 4% reads as the page moving rather than the row being pressed. */ /* THE SPRING IS ON THE RESTING STATE, because a transition is taken from the state being entered: going down uses :active's 70ms, coming back up uses this. It is declared at :is() weight and loaded last, so it reaches the controls that already had a transition of their own, and it carries the properties those transitions were for (colour, background, border, shadow, opacity, transform) at the house's own speed so none of them stops animating on the phone. */ :is(button, a[href], summary, [onclick], [role="button"], [role="tab"], [role="menuitem"], [role="switch"], [role="option"], label[for], input[type="button"], input[type="submit"], .btn, .chip, [data-open], [data-ev], .mc-cell[data-iso]){ transition: scale var(--pf-release) var(--pf-spring), filter var(--pf-release) var(--ease-out), color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } :where(button, a[href], summary, [onclick], [role="button"], [role="tab"], [role="menuitem"], [role="switch"], [role="option"], label[for], input[type="button"], input[type="submit"], .btn, .chip, [data-open], [data-ev], .mc-cell[data-iso]):active:not(:disabled, [aria-disabled="true"], .is-unavailable){ scale: var(--pf-press); filter: var(--press-filter); transition-duration: var(--pf-press-in); } /* Wide things travel less: a pressable card, row or tile. */ :where(.glass, [class*="row"], [class*="card"], [class*="tile"]):where([onclick], [role="button"], a[href], button, [data-open], [data-ev]):active:not(:disabled, .bn-item, .bn-more-item){ scale: var(--pf-press-wide); } /* ONLY THE THING UNDER THE FINGER MOVES. :active is true of every ancestor of the pressed element too, so a button inside a pressable row would shrink the row around it; the outer one stands still when something pressable inside it is the one being pressed. */ :where(button, a[href], summary, [onclick], [role="button"], [role="tab"], [role="menuitem"], [role="switch"], [role="option"], label[for], .btn, .chip, [data-open], [data-ev]):active:has(:is(button, a[href], summary, [onclick], [role="button"], [role="tab"], [role="menuitem"], [role="switch"], [role="option"], label[for], input, select, textarea, .btn, .chip, [data-open], [data-ev]):active){ scale:none; filter:none; } /* The whole page is not a button, even where a view carries an onclick. */ :where(.view, .main, .app, body):active{ scale:none; filter:none; } /* ---- 3. BIGGER WORDS ON CONTROLS, BIGGER TILES ---------------------------- THE CAUSE, NOT EACH SIZE. Nearly every small word on a control is drawn at var(--type-label), which app.css lifts to 13px on the phone for the whole page. Re-declared ON the controls, the same token is 15px inside a button and still 13px for a timestamp, so every control that uses the token is lifted at once and nothing that is not a control moves. */ :where(button, summary, select, [role="button"], [role="tab"], [role="switch"], .btn, .chip, .bn-item, .bn-more-item, .ht-verb, .chat-clear, .mc-cell, .work-pill, .bc-tool, .bc-board-tab, .mini-link, .ask-note-go){ --type-label: var(--pf-control-text); } /* The handful that set a raw size instead of the token, measured on the phone at 12-13px. */ :where(.bn-item, .bn-more-item, .ht-verb, .chat-clear, .work-pill, .work-prov-say, .hs-tog button, .mini-link, .ask-note-go, .bc-tool, .bc-board-tab, .mc-cell, .pw-act, #cdIconBtn, #weatherChip){ font-size: var(--pf-control-text); } /* 44 x 44, the ones the ruler found under it (tests/_phone-feel-measure.js). */ :where(.ht-verb, .chat-clear, .agenda-act, .bc-board-add, .work-pill, .work-prov-say, #goalsViewBtn, .hs-tog button, .pw-act, .ask-note-go, .mini-link, .chip){ min-height:44px; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; } :where(.chat-clear, .agenda-act, .bc-board-add, .ask-note-go){ min-width:44px; } #goalsViewBtn, #goalsViewBtn + .btn{ min-height:44px; } .work-prov-say{ display:flex; } /* A link inside a sentence keeps the sentence's line height and gets an invisible reach around it instead. */ .ht-empty a{ position:relative; } .ht-empty a::after{ content:""; position:absolute; inset:calc(-1 * var(--space-3)) calc(-1 * var(--space-1)); } /* THE BOARD'S OWN ROW. At 390px the zoom, Fit and Share link took the whole bar and the board tabs were squeezed to nothing, so the "0" tab and the "+" sat on top of the zoom control. The tabs get a row of their own. */ .bc-bar{ flex-wrap:wrap; } .bc-boards{ flex:1 1 100%; } .ask-note-x{ min-width:44px; min-height:44px; } #micBtn, #voiceToggle, .chat-send{ width:44px; height:44px; min-width:44px; flex:none; } #chatInput{ min-height:44px; } #askAllowance{ min-height:44px; display:flex; align-items:center; } /* A checkbox is drawn at the size of its box, so the box is 44 and the tick inside it is drawn at the size it always was, in the same blue. */ input.contact-pick{ -webkit-appearance:none; appearance:none; position:relative; width:44px; height:44px; margin:-13px; flex:none; cursor:pointer; background:transparent; border:0; } input.contact-pick::before{ content:""; position:absolute; left:50%; top:50%; width:18px; height:18px; translate:-50% -50%; box-sizing:border-box; border:1.5px solid var(--text-dim); border-radius:var(--radius-tight); } input.contact-pick:checked::before{ background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat; border-color:var(--blue); } input.contact-pick:focus-visible::before{ outline:2px solid var(--blue); outline-offset:2px; } /* THE LAUNCHPAD ON THE PHONE IS THE MORE SHEET, and it goes to rows of two (Matt, 14 Oct: "launchpad should be rows of 2"). Each room is a tile: the icon beside the name, a 56px target, the name at 15px on one line. The sheet scrolls if a phone is too short for all of it. */ .bn-sheet-card{ max-height:calc(100dvh - var(--pf-top-h)); overflow-y:auto; overscroll-behavior:contain; } .bn-sheet-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-2); } .bn-more-item{ flex-direction:row; justify-content:flex-start; gap:var(--space-3); min-height:56px; padding:var(--space-2) var(--space-4); text-align:left; color:var(--text); background:color-mix(in srgb, var(--text) 5%, transparent); border:1px solid var(--glass-border); } .bn-more-item .bn-icon{ width:24px; height:24px; flex:none; } .bn-more-item.active{ color:var(--blue); border-color:color-mix(in srgb, var(--blue) 45%, transparent); } /* The bottom bar's words, one step bigger, in the same five columns. */ .bn-item{ font-size:var(--pf-control-text); } /* ---- 4. SHEETS FOLLOW THE FINGER ----------------------------------------- phone-feel.js moves a sheet down with a downward drag (--pf-drag) and either lets it go or springs it back. */ .pf-dragging{ translate:0 var(--pf-drag, 0px); transition:none !important; } .pf-settle{ transition:translate var(--pf-release) var(--pf-spring) !important; } @media (prefers-reduced-motion: reduce){ /* No travel. The wash stays, because a press must still be SEEN. */ :root{ --pf-press: none; --pf-press-wide: none; --press-scale: none; } :is(button, a[href], summary, [onclick], [role="button"], [role="tab"], [role="menuitem"], [role="switch"], [role="option"], label[for], input[type="button"], input[type="submit"], .btn, .chip, [data-open], [data-ev], .mc-cell[data-iso]){ transition-property:color, background-color, border-color, box-shadow, opacity; } .pf-settle{ transition:none !important; } } }