/* ========================================================================== THE PHONE'S ONE BOTTOM BAR (R23u; one bar for every chrome since round 6 B32). Markup: templates/_tabbar.html. Loaded by base.html and floor/shell.html. The phone widths only, the same two cases floor/phone.css answers to (a phone upright, and a phone on its side, which is under 500px tall with a touch pointer). It stays out of the desktop sheets on purpose (floor/tests_phone_r18g.py pins that tokens.css and nav.css carry no phone rule). On base.html's pages it is a fixed row at the bottom, and the body's bottom padding keeps the page's last line clear of it. Inside a phone shell (#mphone: a desk, All accounts) it is the shell's last flex row, so it never moves while the screens above it scroll. ========================================================================== */ .gtab { display: none; } /* R31 B71: the menu icon at the right end of every phone header (templates/_menubtn.html). */ .menubtn { display: none; } /* R31 B75 part 5: the tap bar (static/app/tapfeedback.js) is the phone's. */ #ik-tapbar { display: none; } @media screen and (max-width: 767.98px), screen and (orientation: landscape) and (max-height: 500px) and (pointer: coarse) { .gtab { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); flex: 0 0 auto; box-sizing: border-box; height: calc(56px + env(safe-area-inset-bottom)); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background: var(--panel); border-top: 1px solid var(--line); } body.railed > .gtab { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; } /* The desk page's rail (and the bar _nav.html draws with it) sits inside #app, which the phone shell replaces; the shell draws its own copy. */ #app .gtab { display: none !important; } /* body.railed button (tokens.css) and #mphone's button reset are both more specific than a plain .gtab > button, so the bar names them to win. */ .gtab > a, .gtab > button, html body .gtab > button, #mphone .gtab > a, #mphone .gtab > button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; width: auto; height: 55px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font: 600 12px/14px "Open Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif; color: var(--muted); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* No hover colour: on a touch screen a hover sticks to the last tab tapped. */ html body .gtab > button:hover { background: none; border: 0; } .gtab > a:active, .gtab > button:active { background: var(--hover); } .gtab > [aria-current="page"], #mphone .gtab > [aria-current="page"], html body .gtab > button[aria-expanded="true"], #mphone .gtab > button[aria-expanded="true"] { color: var(--accent-ink); } /* R31 B96 (round 4): the current tab's mark is a short Ember tab at the top. */ .gtab > [aria-current="page"]::before, html body .gtab > button[aria-expanded="true"]::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; background: var(--accent); border-radius: 0 0 3px 3px; } html.live .gtab { border-top: 3px solid var(--accent); } /* The bar has no Alerts tab now, so the desk's and All accounts' own phone headers show their bell again (floor/phone.css stepped it aside while the bar carried one). */ html body #mphone .mp-head .alertbell { display: inline-flex; align-items: center; justify-content: center; } .gtab .alertbadge, .gtab .tabbadge { position: absolute; top: 5px; left: calc(50% + 5px); right: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font: 700 12px/18px "Open Sans", "Segoe UI", Arial, sans-serif; text-align: center; } .gtab .alertbadge { background: var(--down); color: var(--on-fill); } .gtab .tabbadge { background: var(--warn); color: var(--bg); } .gtab .alertbadge[hidden] { display: none; } /* THE ICONS ARE CSS MASKS, not inline svg: a page's own "no chart" checks count nav.ikrail .brand .alertbell, body.railed > nav.ikrail .navtog { display: none; } body.railed > nav.ikrail .qsbtn, body.railed > nav.ikrail .apprefresh { width: 44px; height: 44px; flex: 0 0 44px; } body.railed > nav.ikrail .brand .lockup { min-width: 44px; } body.railed > nav.ikrail .appback:not([hidden]) { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; margin: 0 -4px 0 -8px; padding: 0; border: 0; background: none; color: var(--text); font-size: 30px; line-height: 1; } /* EVERY FIELD AND BUTTON ON A DOCUMENT PAGE: a 44px thumb target, and 16px text in a field, because iOS zooms the whole page when a field under 16px takes the focus (the Reports filters, Connections' key fields and Portfolio's were 14px). The phone shell (#mphone) sizes its own and its id outranks this. */ html body :is(button, .btn, select, summary, input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden])) { min-height: 44px; } html body :is(select, textarea, input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden])) { font-size: 16px; } html body :is(input[type=checkbox], input[type=radio]) { width: 22px; height: 22px; } /* R31 B84 (audit item 18): the whole row is the control, not the 22px box. */ html body label:has(> input[type=checkbox]) { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; } #alertpanel .alertreadall { min-height: 44px; } #alertpanel .alertclose { width: 44px; height: 44px; } #alertpanel .alertsheet a, #alertpanel .alertrow { min-height: 44px; } /* No cross-page fade on a phone (tokens.css turns it on): a tab tap switches pages at once, and leaving the desk shell mid-fade threw "Transition was aborted" on every tap. */ @view-transition { navigation: none; } /* The page's last line stays clear of the bar and the home bar. */ body.railed { padding-bottom: calc(72px + env(safe-area-inset-bottom)); } /* B50 part 3 (Kevin 2026-10-02): base.html carries the right bar on every document page (floor/_rightbar.html). Here the Watch tab above is the way in, so the bar and its drawer are not drawn and the body keeps this bar's padding, not rightbar.css's. The desk page's phone shell has its own rules (floor/phone.css). */ body.railed:not(.dshell) > #rbar, body.railed:not(.dshell) > #rpanel { display: none !important; } html.hasrbar body.railed:not(.dshell), html.hasrbar.rpanel-open body.railed:not(.dshell) { padding-right: max(16px, env(safe-area-inset-right)); padding-bottom: calc(72px + env(safe-area-inset-bottom)); } /* A page that renders a phone shell (All accounts) draws the bar inside it. */ body:has(#mphone) > .gtab { display: none !important; } /* The alerts sheet stops above the bar, so the bar (and its Alerts tab, which closes it) stays in reach while the sheet is open. */ #alertpanel { bottom: calc(56px + env(safe-area-inset-bottom)); height: auto; z-index: 44; } #alertpanel .alertsheet { padding-bottom: 14px; max-height: calc(100% - env(safe-area-inset-top) - 24px); } /* R31 B75 part 5 (Kevin 2026-10-05: a tap gave no sign it registered). THE PRESSED STATE, from the touch itself: the control dims and sinks a hair; while the page it opens is on its way (.ik-loading) it stays dimmed. THE BAR: a 3 px line under the status bar that runs from the tap until the next screen paints. */ .ik-pressed { opacity: .55 !important; transform: scale(.97); transition: none !important; } .gtab > .ik-pressed, #mphone .gtab > .ik-pressed, .ik-pressed.mp-prow, .ik-pressed.menubtn, .ik-pressed.mp-icon { opacity: 1 !important; transform: none; background: var(--hover) !important; } .gtab > .ik-pressed, #mphone .gtab > .ik-pressed { color: var(--accent-ink) !important; box-shadow: inset 0 2px 0 var(--accent); } .ik-loading, .gtab > .ik-loading { opacity: .7 !important; } #ik-tapbar { display: block; position: fixed; top: 0; left: 0; right: 0; height: calc(3px + env(safe-area-inset-top)); z-index: 2147483000; pointer-events: none; opacity: 0; overflow: hidden; } #ik-tapbar::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 40%; background: var(--accent); border-radius: 0 2px 2px 0; transform: translateX(-100%); } #ik-tapbar.on { opacity: 1; } #ik-tapbar.on::after { animation: ik-tapbar 1.1s cubic-bezier(.4, 0, .2, 1) infinite; } @keyframes ik-tapbar { from { transform: translateX(-100%); } to { transform: translateX(250%); } } @media (prefers-reduced-motion: reduce) { #ik-tapbar.on::after { animation: none; transform: none; width: 100%; opacity: .8; } .ik-pressed { transform: none; } } /* On a desk and All accounts the bar lives inside the phone shell (z-index 40), so the panel stops above it rather than out-stacking it. */ /* R31 B96 (round 4): Menu is this bar's last tab, so the top bar's own menu icon steps aside here (it serves the 768 to 860px band, where this bar is not drawn; nav/shell.css). */ html body .ktop .menubtn { display: none; } }