/* SPDX-License-Identifier: Apache-2.0 */ /* App shell — an app's browser UI fills the window under one slim bar (app-shell.inc, * app-bar.inc). The app's own stylesheet lays out
. Sizes in rem; px only for pens. */ body.app-shell { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--sheet); } body.app-shell > main { flex: 1 1 auto; min-height: 0; } .app-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 1rem; min-height: 3rem; padding: .35rem 1rem; background: var(--sheet-2); border-bottom: var(--pen-2) solid var(--ink); } .app-bar-mark { display: inline-flex; color: var(--ink); } .app-bar-name { display: flex; align-items: center; gap: .55rem; margin: 0; font-weight: 700; font-stretch: 112%; } .app-bar-area { font-size: var(--fs-sm); font-weight: 600; font-stretch: 100%; padding: .05rem .5rem; color: var(--layer); border: var(--pen-1) solid var(--layer); border-radius: var(--radius); text-decoration: none; } .app-bar-area:hover { text-decoration: underline; } .app-bar-ver { position: relative; font-size: var(--fs-sm); font-weight: 600; font-stretch: 100%; } .app-bar-ver summary { list-style: none; cursor: pointer; white-space: nowrap; padding: .05rem .45rem; border: var(--pen-1) solid var(--ink); border-radius: var(--radius); font-variant-numeric: tabular-nums; } .app-bar-ver summary::-webkit-details-marker { display: none; } .app-bar-ver summary .bi { font-size: .7em; } .app-bar-ver ul { position: absolute; z-index: 20; top: calc(100% + .3rem); left: 0; min-width: 11rem; margin: 0; padding: .25rem 0; list-style: none; background: var(--sheet-2); border: var(--pen-2) solid var(--ink); border-radius: var(--radius); } .app-bar-ver a { display: flex; gap: .75rem; padding: .3rem .75rem; border-left: var(--pen-3) solid transparent; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; } .app-bar-ver a:hover { background: var(--sheet); text-decoration: underline; } .app-bar-ver a[aria-current="page"] { font-weight: 700; border-left-color: var(--layer); } .app-bar-ver .n { margin-left: auto; color: var(--ink-2); font-weight: 500; } .app-bar-older { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); } .app-bar-links { display: flex; gap: 1.1rem; margin-left: auto; font-size: var(--fs-sm); } .app-bar-links a { color: var(--ink-2); } .app-bar .space-toggle { flex: 0 0 auto; } @media (max-width: 760px) { body.app-shell { height: auto; min-height: 100dvh; overflow: visible; } .app-bar { gap: .6rem; padding-inline: .75rem; } .app-bar-links { display: none; } .app-bar .space-toggle { margin-left: auto; } } @media (max-width: 480px) { /* phone: everything on one line inside the screen; the app name gives way first (ellipsis) */ .app-bar { gap: .45rem; padding-inline: .5rem; } .app-bar-name { min-width: 0; gap: .4rem; } .app-bar-name > span:not(.layer-swatch) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-bar-name > .layer-swatch, .app-bar-area { display: none; } /* the name and version chip matter more */ .app-bar-ver { flex: 0 0 auto; } } /* ---- Narrow screens (phones, the Studio APK; owner 2026-10-15): the bar keeps the app name, Help, Save for offline, Settings and the screen mode; the mark, version, Paper/Model, Find and the links move into "More" (details.app-bar-more in app-bar.inc, which prints copies of them). Every control at least 2.75rem square. ---- */ .app-bar-more { display: none; position: relative; flex: 0 0 auto; } @media (max-width: 47.5rem) { .app-bar { gap: .35rem; padding-inline: .5rem; } .app-bar > .app-bar-mark, .app-bar-name > .app-bar-ver, .app-bar > .app-bar-older, .app-bar > .space-toggle, .app-bar > .app-bar-palette { display: none; } .app-bar-name { flex: 1 1 auto; min-width: 0; gap: .4rem; } .app-bar-name > span:not(.layer-swatch) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-bar-area { flex: 0 0 auto; } .app-bar > .app-bar-btn, .app-bar > .app-bar-fs, .app-bar-more > summary { min-width: 2.75rem; min-height: 2.75rem; justify-content: center; padding: .2rem .45rem; } .app-bar-more { display: block; } .app-bar-more > summary { display: inline-flex; align-items: center; list-style: none; cursor: pointer; color: var(--ink); border: var(--pen-1) solid var(--ink); border-radius: var(--radius); } .app-bar-more > summary::-webkit-details-marker { display: none; } .app-bar-more > summary .bi { font-size: 1.1rem; } .app-bar-more[open] > summary { color: var(--sheet); background: var(--ink); } .app-bar-more-menu { position: absolute; z-index: 70; top: calc(100% + .3rem); right: 0; width: min(18rem, calc(100vw - 1rem)); max-height: calc(100dvh - 4.5rem); overflow-y: auto; padding: .25rem 0; background: var(--sheet-2); color: var(--ink); border: var(--pen-2) solid var(--ink); border-radius: var(--radius); font-size: var(--fs-sm); } .app-bar-more-item { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 2.75rem; padding: 0 .9rem; font: inherit; font-weight: 600; text-align: left; color: var(--ink); text-decoration: none; background: transparent; border: 0; border-left: var(--pen-3) solid transparent; } .app-bar-more-item:hover { background: var(--sheet); text-decoration: underline; } .app-bar-more-item .bi { color: var(--layer); } .app-bar-more-item[aria-current="page"] { font-weight: 700; border-left-color: var(--layer); } .app-bar-more-item .n { margin-left: auto; color: var(--ink-2); font-weight: 500; } .app-bar:has(.app-bar-palette[hidden]) .app-bar-more-find { display: none; } .app-bar-more-h { margin: .4rem 0 0; padding: .35rem .9rem 0; border-top: var(--pen-1) solid var(--line); font-size: .75rem; font-weight: 700; color: var(--ink-2); } .app-bar-more-ver { margin: 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; } .app-bar-more-note { margin: 0; padding: .5rem .9rem; color: var(--ink-2); } .app-bar-more .space-toggle { display: flex; margin: .3rem .9rem .5rem; } .app-bar-more .space-toggle button { flex: 1 1 0; min-height: 2.75rem; } .app-bar-more .space-toggle + .app-bar-more-item { border-top: var(--pen-1) solid var(--line); } } /* ---- 0.6 DF.28: Interface size (app-settings.js s.ui; only builds with the 0.6 layout tools set the class). The root font size of tokens.css × the size, so every rem of the bars, toolbars, panels and dialogs scales; the drawing keeps its own zoom. ---- */ html.shell-ui-sized { font-size: calc(clamp(100%, 0.75rem + 0.2083vw, 125%) * var(--shell-ui, 1)); } /* Bigger bars must overflow, not wrap, so app-phone.js's measure switches the app bar to its narrow "More" layout. */ html.shell-ui-sized .app-bar-links a { white-space: nowrap; } /* ---- Screen modes (assets/js/app-shell.js): normal → full screen → full screen with the bars hidden ---- */ .app-bar-fs { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .6rem; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); background: transparent; border: var(--pen-1) solid var(--ink); border-radius: var(--radius); cursor: pointer; white-space: nowrap; } .app-bar-fs[hidden] { display: none; } .app-bar-fs .bi { color: var(--layer); } .app-bar-fs:hover { background: var(--sheet); } .app-bar-fs:focus-visible { outline: var(--pen-3) solid var(--action); outline-offset: 1px; } .app-bar-fs[aria-pressed="true"] { border-width: var(--pen-2); } /* Bars hidden: the app bar and the app's top toolbar stack at the top (fixed, so the drawing keeps the whole window) and slide out of sight until the pointer reaches the top edge. */ body.shell-autohide .shell-bar { position: fixed; top: var(--bar-top, 0); left: 0; right: 0; z-index: 60; transform: translateY(calc(-1 * var(--bars-h, 6rem) - 4px)); visibility: hidden; } body.shell-autohide.shell-reveal .shell-bar { transform: none; visibility: visible; } @media (prefers-reduced-motion: no-preference) { body.shell-autohide .shell-bar { transition: transform .16s ease-out, visibility 0s linear .16s; } body.shell-autohide.shell-reveal .shell-bar { transition: transform .16s ease-out, visibility 0s; } } .shell-edge { display: none; } body.shell-autohide .shell-edge { display: block; position: fixed; top: 0; left: 0; right: 0; height: .5rem; z-index: 59; } body.shell-autohide.shell-reveal .shell-edge { height: calc(var(--bars-h, 6rem) + .5rem); } /* 0.6 DF.8: the "Show bars" tab hangs from the top middle while the bars are hidden (app-shell.js; only builds with the 0.6 layout tools create it). Above the edge strip, under the bars when they slide in. */ .shell-showbars { display: none; } body.shell-autohide:not(.shell-reveal) .shell-showbars { display: inline-flex; align-items: center; gap: .3rem; position: fixed; top: 0; left: 50%; z-index: 61; transform: translateX(-50%); min-height: 1.75rem; padding: .1rem .7rem .2rem; font: inherit; font-size: .75rem; font-weight: 600; color: var(--ink); background: var(--sheet-2); border: var(--pen-1) solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); opacity: .8; cursor: pointer; } body.shell-autohide:not(.shell-reveal) .shell-showbars:is(:hover, :focus-visible) { opacity: 1; border-color: var(--ink); } .shell-showbars:focus-visible { outline: var(--pen-3) solid var(--action); outline-offset: 1px; } .shell-showbars .bi { color: var(--layer); } html.cc-touch body.shell-autohide:not(.shell-reveal) .shell-showbars, html.cc-phone body.shell-autohide:not(.shell-reveal) .shell-showbars { min-height: 2.75rem; } /* A short note when the mode changes (role=status, so screen readers hear it too). */ .shell-hint { position: fixed; left: 50%; top: 1rem; z-index: 70; margin: 0; padding: .45rem .8rem; max-width: calc(100vw - 2rem); font-size: var(--fs-sm); color: var(--sheet); background: var(--ink); border-radius: var(--radius); transform: translateX(-50%); opacity: 0; pointer-events: none; } body.shell-hinting .shell-hint { opacity: 1; } @media (prefers-reduced-motion: no-preference) { .shell-hint { transition: opacity .2s; } } @media (max-width: 1100px) { .app-bar-fs-label { display: none; } } /* ---- Help (assets/js/help-panel.js) and Save for offline (assets/js/app-offline.js) ---- */ .app-bar-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .6rem; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); background: transparent; border: var(--pen-1) solid var(--ink); border-radius: var(--radius); white-space: nowrap; } .app-bar-btn:hover:not(:disabled) { background: var(--sheet); } .app-bar-btn:disabled { opacity: .6; } .app-bar-help[aria-expanded="true"] { color: var(--on-action, var(--sheet)); background: var(--ink); } .app-bar-offline[data-state="ready"] .bi { color: var(--layer-green); } .app-bar-offline[data-state="failed"] .bi { color: var(--layer-red); } .app-bar-offline[data-state="saving"] { font-variant-numeric: tabular-nums; } .offline-menu { position: fixed; z-index: 1050; width: 18rem; padding: .6rem; background: var(--sheet-2); color: var(--ink); border: var(--pen-2) solid var(--ink); border-radius: var(--radius); font-size: var(--fs-sm); } .offline-menu p { margin: 0 0 .5rem; color: var(--ink-2); } .offline-menu button { display: block; width: 100%; margin-top: .25rem; padding: .35rem .5rem; font: inherit; text-align: left; color: var(--ink); background: transparent; border: var(--pen-1) solid var(--line); border-radius: var(--radius); } .offline-menu button:hover { border-color: var(--ink); } @media (max-width: 1100px) { .app-bar-btn-label { display: none; } /* icons only; the title says what they do */ .app-bar-offline[data-state="saving"] .app-bar-btn-label { display: inline; } } /* ---- Settings (assets/js/app-settings.js, core/components/app-settings.inc) ---- */ body.app-shell > main { position: relative; } /* the panel resize handles are placed over it */ /* Panel text size: zoom scales rem sizes too, which font-size alone would not. */ body.app-shell.shell-zoomed > main > aside { zoom: var(--shell-panel-zoom, 1); } /* 0.7 PANEL-COMPACT: the Compact density folds its own factor into the same zoom (§ Compact density, end of file). */ .shell-split { position: absolute; z-index: 15; width: .55rem; transform: translateX(-50%); cursor: col-resize; touch-action: none; } .shell-split[hidden] { display: none; } .shell-split::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: var(--pen-3); transform: translateX(-50%); background: transparent; } .shell-split:hover::after, .shell-split:focus-visible::after, body.shell-resizing .shell-split::after { background: var(--layer); } .shell-split:focus-visible { outline: none; } body.shell-resizing, body.shell-resizing * { cursor: col-resize !important; user-select: none; } .shell-settings { width: min(32rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2.5rem); padding: 0; color: var(--ink); background: var(--sheet-2); border: var(--pen-2) solid var(--ink); border-radius: var(--radius); } .shell-settings::backdrop { background: color-mix(in srgb, var(--ink) 35%, transparent); } .shell-dlg { display: flex; flex-direction: column; max-height: calc(100dvh - 2.5rem); margin: 0; } .shell-dlg-head, .shell-dlg-foot { display: flex; align-items: center; gap: .75rem; padding: .65rem 1rem; } .shell-dlg-head { justify-content: space-between; border-bottom: var(--pen-1) solid var(--line); } .shell-dlg-head h2 { margin: 0; font-size: var(--fs-md); font-weight: 700; font-stretch: 112%; } .shell-dlg-foot { justify-content: space-between; flex-wrap: wrap; border-top: var(--pen-1) solid var(--line); } .shell-dlg-body { padding: .9rem 1rem; overflow: auto; min-height: 0; display: grid; gap: 1rem; font-size: var(--fs-sm); } .shell-tabs { display: flex; gap: .25rem; padding: .5rem 1rem 0; border-bottom: var(--pen-1) solid var(--line); } .shell-tabs[hidden] { display: none; } .shell-tabs [role="tab"] { margin-bottom: -1px; padding: .4rem .8rem; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); background: transparent; border: var(--pen-1) solid transparent; border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; cursor: pointer; } .shell-tabs [role="tab"]:hover { color: var(--ink); } .shell-tabs [role="tab"][aria-selected="true"] { color: var(--ink); background: var(--sheet-2); border-color: var(--line); box-shadow: inset 0 var(--pen-2) 0 var(--layer); } .shell-pane { display: grid; gap: 1rem; min-width: 0; } .shell-pane[hidden] { display: none; } .shell-pane-lede { padding-bottom: .1rem; } .shell-x { display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0; color: var(--ink); background: transparent; border: var(--pen-1) solid transparent; border-radius: var(--radius); } .shell-x:hover { border-color: var(--ink); } .shell-set { margin: 0; padding: 0; border: 0; display: grid; gap: .55rem; min-width: 0; } .shell-set legend { float: none; margin: 0 0 .15rem; padding: 0; font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); } .shell-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; } .shell-seg label { display: flex; align-items: center; gap: .4rem; padding: .4rem .55rem; border: var(--pen-1) solid var(--line); border-radius: var(--radius); cursor: pointer; } .shell-seg label:has(input:checked) { border: var(--pen-2) solid var(--layer); font-weight: 600; } .shell-seg input { accent-color: var(--layer); margin: 0; } .shell-row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .75rem; align-items: center; } .shell-row[hidden] { display: none; } .shell-row .select-cc { width: 100%; } .shell-range { display: flex; align-items: center; gap: .6rem; min-width: 0; } .shell-range input { flex: 1 1 auto; min-width: 0; accent-color: var(--layer); } .shell-range input:disabled { opacity: .5; } .shell-range output { flex: 0 0 auto; min-width: 6.5rem; color: var(--ink-2); } .shell-check { display: flex; gap: .5rem; align-items: baseline; cursor: pointer; } .shell-check input { accent-color: var(--layer); } .shell-hint-text { margin: 0; color: var(--ink-2); } @media (max-width: 480px) { .shell-seg, .shell-row { grid-template-columns: minmax(0, 1fr); } } /* ---- IP.6 (0.5 track IP, session input-shell): the wider two-column Settings dialog for every app ---- Only on .shell-settings-wide, which app-settings.inc sets for dev builds and releases from 0.5 on (AppBuilds::wideSettings), so the 0.4 releases in /use keep their narrow dialog until the owner's next release. 46rem wide, 0.8125rem text, each pane's fieldsets in two columns; .shell-set-wide (style cards) and anything that is not a fieldset span both. One column again on narrow screens. Phone rules live in their own block (session phones). */ .shell-settings.shell-settings-wide { width: min(46rem, calc(100vw - 2rem)); } .shell-settings-wide .shell-dlg-body { font-size: .8125rem; } .shell-settings-wide .shell-set legend { font-size: var(--fs-sm); font-weight: 700; font-stretch: 112%; text-transform: none; letter-spacing: 0; color: var(--ink); margin-bottom: .25rem; } /* same as a panel title (.cc-h) */ .shell-settings-wide .shell-dlg-body .select-cc { min-height: 2rem; padding: .25rem 2rem .25rem .6rem; font-size: .8125rem; background-position: calc(100% - 1rem) 50%, calc(100% - .625rem) 50%; } .shell-settings-wide .shell-pane { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; align-items: start; } .shell-settings-wide .shell-pane > :not(fieldset), .shell-settings-wide .shell-pane > .shell-set-wide { grid-column: 1 / -1; } .shell-settings-wide .shell-seg { gap: .25rem; } .shell-settings-wide .shell-seg label { gap: .3rem; padding: .3rem .4rem; line-height: 1.2; } .shell-settings-wide .shell-row { grid-template-columns: minmax(0, 1fr); gap: .25rem; } /* label over its control */ .shell-settings-wide .shell-dlg-body .btn-sm-cc { min-height: 2rem; padding: .3rem .65rem; font-size: .8125rem; } .shell-settings-wide .shell-btns { display: flex; flex-wrap: wrap; gap: .4rem; } @media (max-width: 45rem) { .shell-settings-wide .shell-pane { grid-template-columns: minmax(0, 1fr); } } /* ---- end IP.6 ---- */ /* ---- 0.7 sections (dev builds and releases from 0.7: dialog[data-shell-07], app-settings.js adds .shell-settings-secs) ---- The tabs ( | Global) pick the section list on the left, the one section picked on the right; a fixed height so the dialog does not jump as sections change. Narrow screens: the list becomes one row above that scrolls sideways. */ .shell-settings.shell-settings-secs { width: min(52rem, calc(100vw - 2rem)); } .shell-settings-secs:not(.shell-dw-dialog) .shell-dlg { height: min(47.5rem, calc(100dvh - 2.5rem)); } /* 38rem + 25%, as far as the window allows */ .shell-settings-secs .shell-dlg-body { grid-template-columns: 13rem minmax(0, 1fr); align-items: start; grid-template-rows: minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; flex: 1 1 auto; } .shell-settings-secs .shell-sec-nav { align-self: stretch; overflow: auto; padding: .6rem 0; border-right: var(--pen-1) solid var(--line); background: var(--sheet); } .shell-settings-secs .shell-pane { align-self: stretch; overflow: auto; padding: .9rem 1.1rem; grid-template-columns: minmax(0, 1fr); align-content: start; } .shell-settings-secs .shell-pane > * { grid-column: auto; } .shell-settings-secs .shell-sec-off { display: none !important; } .shell-sec-nav ul { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .125rem; } /* owner 2026-10-24: more breathing room */ .shell-sec-eyebrow { display: flex; gap: .35rem; align-items: center; margin: .5rem .9rem .3rem .75rem; padding-top: .6rem; border-top: var(--pen-1) solid var(--line); font-size: .6875rem; font-weight: 700; letter-spacing: .04em; color: var(--ink-2); } .shell-sec-eyebrow .bi { color: var(--layer, var(--action)); } .shell-sec-nav button { display: block; width: 100%; padding: .7rem 1rem .7rem .875rem; font: inherit; font-size: .875rem; line-height: 1.3; text-align: left; color: var(--ink-2); background: transparent; border: 0; border-left: var(--pen-3) solid transparent; cursor: pointer; } .shell-sec-nav button:hover { color: var(--ink); background: var(--sheet-2); } .shell-sec-nav button:focus-visible { outline: var(--pen-2) solid var(--layer, var(--action)); outline-offset: -2px; } .shell-sec-nav button[aria-current="true"] { color: var(--ink); font-weight: 600; background: var(--sheet-2); border-left-color: var(--layer, var(--action)); } .shell-units-global { display: flex; gap: .45rem; align-items: baseline; margin: 0; font-weight: 600; } .shell-units-global .bi { color: var(--layer, var(--action)); } @media (max-width: 40rem) { .shell-settings-secs .shell-dlg-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); } .shell-settings-secs .shell-sec-nav { display: flex; gap: .25rem; align-items: center; overflow-x: auto; padding: .4rem .5rem; border-right: 0; border-bottom: var(--pen-1) solid var(--line); } .shell-sec-nav ul { display: flex; gap: .25rem; margin: 0; } .shell-sec-eyebrow { margin: 0 0 0 .4rem; padding: 0 0 0 .6rem; border-top: 0; border-left: var(--pen-1) solid var(--line); white-space: nowrap; } .shell-sec-nav button { white-space: nowrap; border-left: 0; border-bottom: var(--pen-3) solid transparent; padding: .35rem .6rem; } .shell-sec-nav button[aria-current="true"] { border-bottom-color: var(--layer, var(--action)); } } /* breathing room inside a section: the section's parts, the app's lede line, and the Menus, keys and mouse box */ .shell-settings-secs .shell-pane { row-gap: 1.25rem; } .shell-settings-secs .shell-set { gap: .75rem; } .shell-settings-secs .shell-set legend { margin-bottom: .35rem; font-size: var(--fs-md); } .shell-settings-secs [data-input-settings] { display: grid; gap: .75rem; } .shell-settings-secs [data-input-settings] .cc-in-cards { gap: .75rem; margin-bottom: .25rem; } .shell-settings-secs .shell-check + .shell-hint-text { margin-top: -.4rem; padding-left: 1.6rem; } /* a switch's hint sits with it */ .shell-settings-secs [data-input-settings] .cc-in-setbtns { gap: .5rem; margin-top: .25rem; } /* ---- end 0.7 sections ---- */ /* Tooltips with the full text of anything cut off (…) */ .tooltip.shell-tip { --bs-tooltip-bg: var(--ink); --bs-tooltip-color: var(--sheet); --bs-tooltip-max-width: 28rem; --bs-tooltip-font-size: var(--fs-sm); --bs-tooltip-border-radius: var(--radius); --bs-tooltip-opacity: 1; pointer-events: none; } .tooltip.shell-tip .tooltip-inner { text-align: left; overflow-wrap: anywhere; } /* Settings button in the app bar */ .app-bar-settings[aria-expanded="true"] { color: var(--on-action, var(--sheet)); background: var(--ink); } /* Toolbar buttons (app-settings.js): icons only keeps the label for screen readers; labels only drops the icon. */ body[data-shell-tb="icons"] .shell-tb :is(button:not([role="menuitem"]), summary) > span { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } body[data-shell-tb="icons"] .shell-tb :is(button:not([role="menuitem"]), summary) > .bi { font-size: 1.15em; } body[data-shell-tb="labels"] .shell-tb :is(button:not([role="menuitem"]), summary) > .bi { display: none; } body.shell-tb-nogroups:not(.shell-arranging) .shell-tb > [role="group"] > [class$="-tool-label"] { display: none; } .shell-btns { display: flex; flex-wrap: wrap; gap: .5rem; } /* 0.7 WS.24 work environments (Settings › Global › Layout) */ .shell-env { display: grid; gap: .5rem; margin-block: .75rem; padding-top: .75rem; border-top: var(--pen-1) solid var(--line); } .shell-env-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .shell-env-row .select-cc { flex: 1 1 12rem; min-width: 0; width: auto; } .shell-env-name { flex: 1 1 12rem; min-width: 0; padding: .3rem .5rem; font: inherit; color: var(--ink); background: var(--sheet); border: var(--pen-1) solid var(--line); border-radius: var(--radius); } .shell-env-name::placeholder { color: var(--placeholder); } .shell-set[hidden], .shell-check[hidden] { display: none; } /* Arrange the toolbar: every tool and group name is a drag handle; clicks do nothing. */ body.shell-arranging .shell-tb { outline: var(--pen-2) dashed var(--layer); outline-offset: -2px; } body.shell-arranging .shell-tb :is(button, summary, [role="group"] > [class$="-tool-label"]), body.shell-arranging .shell-tb [class$="-tool-row"] > * { cursor: grab; touch-action: none; } body.shell-arranging .shell-tb [role="group"] > [class$="-tool-label"] { text-decoration: underline dotted; } body.shell-arranging .shell-tb [class$="-tool-row"] > *:hover, body.shell-arranging .shell-tb > :is(button, span):hover { outline: var(--pen-1) dashed var(--ink-2); } .shell-dragging { opacity: .45; outline: var(--pen-2) solid var(--layer) !important; } .shell-arrange-bar { position: fixed; left: 50%; bottom: 1rem; z-index: 80; display: flex; align-items: center; gap: .75rem; max-width: calc(100vw - 2rem); padding: .55rem .75rem; font-size: var(--fs-sm); color: var(--ink); background: var(--sheet-2); border: var(--pen-2) solid var(--layer); border-radius: var(--radius); transform: translateX(-50%); } .shell-arrange-bar[hidden] { display: none; } .shell-arrange-bar p { margin: 0; } .shell-arrange-bar .bi { color: var(--layer); } @media (max-width: 760px) { .shell-arrange-bar { flex-wrap: wrap; } } .shell-arrange-bar button { flex: 0 0 auto; white-space: nowrap; } /* 0.6 DF.27: the toolbar's right-click menu (app-settings.js; builds with the 0.6 layout tools only) */ .shell-ctx { position: fixed; z-index: 90; min-width: 13rem; max-width: calc(100vw - .5rem); padding: .25rem 0; font-size: var(--fs-sm); color: var(--ink); background: var(--sheet-2); border: var(--pen-2) solid var(--ink); border-radius: var(--radius); } .shell-ctx[hidden] { display: none; } .shell-ctx hr { margin: .25rem 0; border: 0; border-top: var(--pen-1) solid var(--line); opacity: 1; } .shell-ctx [role="menuitem"] { display: flex; align-items: center; gap: .55rem; width: 100%; min-height: 2rem; padding: .25rem .8rem; font: inherit; color: inherit; text-align: left; background: none; border: 0; cursor: pointer; white-space: nowrap; } .shell-ctx [role="menuitem"] .bi { width: 1rem; color: var(--layer); } .shell-ctx [role="menuitem"]:is(:hover, :focus) { background: var(--sheet); outline: none; box-shadow: inset var(--pen-2) 0 0 var(--action); } .shell-ctx [role="menuitem"][aria-disabled="true"] { color: var(--ink-2); cursor: default; } .shell-ctx [role="menuitem"][aria-disabled="true"] .bi { color: var(--ink-2); } html.cc-touch .shell-ctx [role="menuitem"], html.cc-phone .shell-ctx [role="menuitem"] { min-height: 2.75rem; } /* ---- Movable panels and the panels window (assets/js/app-panels.js; only builds with manifest "panels") ---- * Every rule hangs off a class app-panels.js adds, so builds without the flag are untouched. */ .shell-grip { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .25rem; min-height: 1.75rem; padding: 0 .25rem 0 .35rem; font-size: .75rem; font-weight: 600; color: var(--ink-2); background: var(--sheet-2); border-bottom: var(--pen-1) solid var(--line); } .shell-grip-handle { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .3rem; padding: .25rem 0; cursor: grab; touch-action: none; user-select: none; } .shell-grip-handle .bi { color: var(--layer); } .shell-grip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shell-grip-menu, .shell-grip-btn { flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.6rem; height: 1.4rem; padding: 0; color: var(--ink); background: transparent; border: var(--pen-1) solid transparent; border-radius: var(--radius); cursor: pointer; } .shell-grip-menu:hover, .shell-grip-menu[aria-expanded="true"], .shell-grip-btn:hover, .shell-grip-btn[aria-pressed="true"] { border-color: var(--ink); } .shell-grip-menu:focus-visible, .shell-grip-btn:focus-visible { outline: var(--pen-3) solid var(--action); outline-offset: 1px; } .shell-grip-btn[hidden] { display: none; } body.shell-pw .shell-grip-pin, body.shell-pw .shell-grip-close { display: none; } /* a panel in the panels window can't pin or hide */ /* 0.7 PANEL-COMPACT item 2: hidden panels and pinned (auto-hide) panels, and their edge tabs (assets/js/app-panels.js) */ body.app-shell > main > aside.shell-hidden { display: none !important; } body.app-shell > main > aside.shell-pinned { position: absolute; z-index: 44; grid-area: auto; box-sizing: border-box; overflow: auto; background: var(--sheet-2); border: var(--pen-2) solid var(--ink); visibility: hidden; } body.app-shell > main > aside.shell-pinned[data-shell-dock="left"] { left: 0; transform: translateX(-100%); } body.app-shell > main > aside.shell-pinned[data-shell-dock="right"] { right: 0; transform: translateX(100%); } body.app-shell > main > aside.shell-pinned[data-shell-dock="bottom"] { transform: translateY(100%); } body.app-shell > main > aside.shell-pinned.is-open { visibility: visible; transform: none; } @media (prefers-reduced-motion: no-preference) { body.app-shell > main > aside.shell-pinned { transition: transform .16s ease-out, visibility 0s linear .16s; } body.app-shell > main > aside.shell-pinned.is-open { transition: transform .16s ease-out, visibility 0s; } } .shell-pintabs { position: absolute; z-index: 43; display: flex; gap: .15rem; } .shell-pintabs[hidden] { display: none; } .shell-pintabs[data-shell-dock="left"] { left: 0; flex-direction: column; } .shell-pintabs[data-shell-dock="right"] { right: 0; flex-direction: column; } .shell-pintabs[data-shell-dock="bottom"] { left: 0; flex-direction: row; transform: translateY(-100%); } .shell-pintab { display: inline-flex; align-items: center; gap: .3rem; max-width: 12rem; padding: .3rem .25rem; font: inherit; font-size: .75rem; font-weight: 600; color: var(--ink); background: var(--sheet-2); border: var(--pen-2) solid var(--ink); cursor: pointer; white-space: nowrap; } .shell-pintab span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .shell-pintab .bi { color: var(--layer); } .shell-pintab[data-kind="hidden"] { border-style: dashed; } .shell-pintab:hover, .shell-pintab[aria-expanded="true"] { border-color: var(--layer); } .shell-pintab:focus-visible { outline: var(--pen-3) solid var(--action); outline-offset: 1px; } .shell-pintabs[data-shell-dock="left"] .shell-pintab, .shell-pintabs[data-shell-dock="right"] .shell-pintab { flex-direction: column; writing-mode: vertical-rl; padding: .25rem .3rem; min-height: 2.75rem; max-height: 12rem; } @media (pointer: coarse) { .shell-pintab { min-width: 2.75rem; min-height: 2.75rem; } .shell-grip-btn { width: 2.75rem; height: 2.75rem; } } main.shell-panels-narrow .shell-grip-handle { cursor: default; } body.shell-panel-dragging, body.shell-panel-dragging * { cursor: grabbing !important; user-select: none; } .shell-panel-menu { position: fixed; z-index: 1060; min-width: 15rem; margin: 0; padding: .25rem 0; list-style: none; font-size: var(--fs-sm); background: var(--sheet-2); border: var(--pen-2) solid var(--ink); border-radius: var(--radius); } .shell-panel-menu button { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .35rem .75rem; font: inherit; text-align: left; color: var(--ink); background: transparent; border: 0; border-left: var(--pen-3) solid transparent; } .shell-panel-menu button:hover, .shell-panel-menu button:focus { background: var(--sheet); border-left-color: var(--layer); outline: none; } .shell-panel-menu .bi { color: var(--layer); } /* 0.7 PANEL-COMPACT item 3: panels grouped as tabs in one frame. The tab strip replaces the name in the showing panel's bar. */ body.app-shell > main > aside.shell-tab-off { display: none !important; } .shell-grip.has-tabs .shell-grip-name { display: none; } .shell-grip-tabs { flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; align-self: stretch; gap: 0; overflow: hidden; } .shell-grip-tab { flex: 0 1 auto; min-width: 0; max-width: 9rem; padding: 0 .5rem; font: inherit; color: var(--ink-2); background: transparent; border: 0; border-bottom: var(--pen-3) solid transparent; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .shell-grip-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--layer); } .shell-grip-tab:hover { color: var(--ink); } .shell-grip-tab:focus-visible { outline: var(--pen-3) solid var(--action); outline-offset: -2px; } .shell-grip.shell-grip-drop { outline: var(--pen-3) solid var(--action); outline-offset: -3px; background: var(--sheet); } @media (pointer: coarse) { .shell-grip-tab { min-height: 2.75rem; } } /* Managed layout: docked panels fill their dock; floating ones sit over the drawing. */ main.shell-panels-managed > aside.shell-docked { min-width: 0; min-height: 0; overflow: auto; box-sizing: border-box; } /* a frame is exactly its share of the dock */ main.shell-panels-managed > aside[data-shell-dock="left"] { border-left: 0; border-right: var(--pen-2) solid var(--ink); } main.shell-panels-managed > aside[data-shell-dock="right"] { border-right: 0; border-left: var(--pen-2) solid var(--ink); } main.shell-panels-managed > aside[data-shell-dock="bottom"] { border-left: 0; border-right: 0; border-top: var(--pen-2) solid var(--ink); } main.shell-panels-managed > aside[data-shell-dock="bottom"][style*="justify-self: end"] { border-left: var(--pen-1) solid var(--line); } main.shell-panels-managed > aside[data-shell-dock][style*="align-self: end"] { border-top: var(--pen-2) solid var(--ink); } body.app-shell > main > aside.shell-float { position: absolute; z-index: 40; grid-area: auto; min-width: 10rem; min-height: 6rem; overflow: auto; border: var(--pen-2) solid var(--ink); border-radius: var(--radius); background: var(--sheet-2); } /* A floating panel's corner (assets/js/app-panels.js sizer, 1.6): mouse, touch and pen; arrows with focus. */ .shell-float-size { position: absolute; z-index: 41; width: 1.1rem; height: 1.1rem; cursor: nwse-resize; touch-action: none; } .shell-float-size[hidden] { display: none; } .shell-float-size::after { content: ""; position: absolute; right: .2rem; bottom: .2rem; width: .55rem; height: .55rem; border-right: var(--pen-2) solid var(--ink-2); border-bottom: var(--pen-2) solid var(--ink-2); } .shell-float-size:hover::after, .shell-float-size:focus-visible::after { border-color: var(--layer); } .shell-float-size:focus-visible { outline: none; } @media (pointer: coarse) { .shell-float-size { width: 1.8rem; height: 1.8rem; } .shell-float-size::after { width: .8rem; height: .8rem; } } /* A panels window under a panel dragged from another window. */ body.shell-pw.shell-pw-drop { box-shadow: inset 0 0 0 var(--pen-3) var(--layer); } .shell-dock-split { position: absolute; z-index: 16; touch-action: none; } .shell-dock-split[hidden] { display: none; } .shell-dock-split.is-vertical { width: .55rem; transform: translateX(-50%); cursor: col-resize; } .shell-dock-split:not(.is-vertical) { height: .55rem; transform: translateY(-50%); cursor: row-resize; } .shell-dock-split::after { content: ""; position: absolute; background: transparent; } .shell-dock-split.is-vertical::after { top: 0; bottom: 0; left: 50%; width: var(--pen-3); transform: translateX(-50%); } .shell-dock-split:not(.is-vertical)::after { left: 0; right: 0; top: 50%; height: var(--pen-3); transform: translateY(-50%); } .shell-dock-split:hover::after, .shell-dock-split:focus-visible::after { background: var(--layer); } .shell-dock-split:focus-visible { outline: none; } /* Drop zones while a panel is dragged by its grip. */ .shell-drop { position: absolute; inset: 0; z-index: 45; pointer-events: none; } .shell-drop[hidden] { display: none; } .shell-drop-zone { position: absolute; display: grid; place-items: center; padding: .5rem; font-size: var(--fs-sm); font-weight: 700; text-align: center; color: var(--ink); background: color-mix(in srgb, var(--layer) 10%, transparent); border: var(--pen-2) dashed var(--layer); border-radius: var(--radius); } .shell-drop-zone[data-zone="left"] { left: .4rem; top: 15%; bottom: 15%; width: min(9rem, 22%); } .shell-drop-zone[data-zone="right"] { right: .4rem; top: 15%; bottom: 15%; width: min(9rem, 22%); } .shell-drop-zone[data-zone="bottom"] { left: 30%; right: 30%; bottom: .4rem; height: min(6rem, 18%); } .shell-drop-zone.is-hot { background: color-mix(in srgb, var(--layer) 35%, transparent); border-style: solid; } .shell-drag-ghost { position: absolute; z-index: 46; padding: .4rem .6rem; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); background: color-mix(in srgb, var(--sheet-2) 80%, transparent); border: var(--pen-2) solid var(--layer); border-radius: var(--radius); pointer-events: none; } /* "Your panels were in their own window — Open it" after a reload. */ .shell-pw-offer { position: fixed; right: 1rem; bottom: 1rem; z-index: 80; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; max-width: calc(100vw - 2rem); padding: .55rem .75rem; font-size: var(--fs-sm); color: var(--ink); background: var(--sheet-2); border: var(--pen-2) solid var(--layer); border-radius: var(--radius); } .shell-pw-offer[hidden] { display: none; } .shell-pw-offer p { margin: 0; } .shell-pw-offer .bi { color: var(--layer); } /* The panels window (the pop-up): a bar, then the panels side by side, each scrolling on its own. */ body.shell-pw { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; } .shell-pw-bar { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .4rem .75rem; background: var(--sheet-2); border-bottom: var(--pen-2) solid var(--ink); } .shell-pw-title { margin: 0 auto 0 0; font-size: var(--fs-sm); font-weight: 700; font-stretch: 112%; } .shell-pw-title .bi { color: var(--layer); } .shell-pw-orphan { display: none; margin: 0; padding: .5rem .75rem; font-size: var(--fs-sm); color: var(--sheet); background: var(--layer-red); } body.shell-pw-lost .shell-pw-orphan { display: block; } body.shell-pw > main.shell-pw-main { display: flex !important; flex: 1 1 auto; flex-wrap: wrap; min-height: 0; height: auto !important; grid-template-areas: none !important; grid-template-columns: none !important; grid-template-rows: none !important; overflow: auto; } body.shell-pw > main.shell-pw-main > aside { flex: 1 1 16rem; min-width: 0; max-height: 100%; height: 100%; overflow: auto; grid-area: auto; border: 0; border-right: var(--pen-2) solid var(--ink); } body.shell-pw > main.shell-pw-main > aside:last-child { border-right: 0; } body.shell-pw.shell-zoomed > main > aside { zoom: var(--shell-panel-zoom, 1); } /* Recover your work? (assets/js/app-autosave.js, 0.4 item 1.1) — the Settings dialog's frame, one row per copy. */ .shell-recover { width: min(36rem, calc(100vw - 2rem)); } .shell-recover-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: var(--pen-1) solid var(--line); } .shell-recover-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .35rem 1rem; padding: .6rem 0; border-bottom: var(--pen-1) solid var(--line); } .shell-recover-what { display: grid; gap: .1rem; min-width: 0; } .shell-recover-what strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shell-recover-meta { color: var(--ink-2); } .shell-recover-msg { grid-column: 1 / -1; margin: 0; color: var(--ink-2); } .shell-recover-msg:empty { display: none; } @media (max-width: 30rem) { .shell-recover-row { grid-template-columns: minmax(0, 1fr); } } /* Settings › Add-ons (assets/js/addons.js, 0.4 item A.2). */ .shell-addons { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; } .shell-addon { display: grid; gap: .2rem; padding: .5rem .6rem; border: var(--pen-1) solid var(--line); border-radius: var(--radius); } .shell-addon[data-state="refused"], .shell-addon[data-state="failed"] { border-style: dashed; } .shell-addon-ver { color: var(--ink-2); font-variant-numeric: tabular-nums; } .shell-addon-meta { margin: 0; color: var(--ink-2); } .shell-addon-status { margin: 0; color: var(--ink); } .shell-addon[data-state="failed"] .shell-addon-status, .shell-addon[data-state="refused"] .shell-addon-status { color: var(--layer-red); } /* Settings › General › Units (0.7 UNITS; lib/units/unit-settings.js): one
per kind, a switch and a star per unit. */ .shell-units-kind { border: var(--pen-1) solid var(--line); border-radius: var(--radius); padding: 0 .6rem; margin: 0 0 .4rem; } .shell-units-kind > summary { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; padding: .4rem 0; cursor: pointer; } .shell-units-kname { font-weight: 600; } .shell-units-sum { color: var(--ink-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; } .shell-units { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0 .75rem; } .shell-unit { display: flex; align-items: center; gap: .25rem; min-width: 0; } .shell-unit-on { display: flex; align-items: center; gap: .4rem; flex: 1 1 auto; min-width: 0; margin: 0; padding-block: .15rem; cursor: pointer; } .shell-unit-on .form-check-input { float: none; margin: 0; flex: none; } .shell-unit-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shell-unit-mark { color: var(--ink-2); font-size: var(--fs-sm); white-space: nowrap; } .shell-unit.is-off .shell-unit-name { color: var(--ink-2); } .shell-unit-star { flex: none; padding: .1rem .3rem; font: inherit; line-height: 1; color: var(--ink-2); background: none; border: 0; border-radius: var(--radius); cursor: pointer; } .shell-unit-star:hover, .shell-unit-star:focus-visible { color: var(--ink); } .shell-unit-star.is-star { color: var(--layer); } .shell-set[data-units-set] .shell-btns { margin-top: .25rem; } html.cc-touch .shell-unit-star, html.cc-touch .shell-unit-on { min-height: 2.75rem; } html.cc-touch .shell-unit-star { min-width: 2.75rem; } /* Recent files on an app's start screen ([data-recent-files], assets/js/host.js mountRecent; 0.4 item 1.4). */ .shell-recent { display: grid; gap: .5rem; width: min(32rem, 100%); text-align: start; } .shell-recent[hidden] { display: none; } .shell-recent-h { margin: 0; font-size: var(--fs-base); font-weight: 700; color: var(--ink); } .shell-recent-list { list-style: none; margin: 0; padding: 0; border-top: var(--pen-1) solid var(--line); } .shell-recent-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: var(--pen-1) solid var(--line); } .shell-recent-open { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "i n w" ". p p"; align-items: baseline; gap: 0 .5rem; padding: .45rem .25rem; font: inherit; text-align: start; color: var(--ink); background: transparent; border: 0; cursor: pointer; min-width: 0; } .shell-recent-open:hover .shell-recent-name, .shell-recent-open:focus-visible .shell-recent-name { text-decoration: underline; } .shell-recent-open .bi { grid-area: i; color: var(--layer); } .shell-recent-name { grid-area: n; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .shell-recent-when { grid-area: w; font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; } .shell-recent-where { grid-area: p; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); color: var(--ink-2); } .shell-recent-msg { grid-column: 1 / -1; margin: 0 0 .4rem; font-size: var(--fs-sm); color: var(--ink-2); } .shell-recent-msg:empty { display: none; } .shell-recent-clear { justify-self: start; padding: 0; font: inherit; font-size: var(--fs-sm); color: var(--ink-2); background: none; border: 0; text-decoration: underline; cursor: pointer; } .shell-recent-clear:hover { color: var(--ink); } /* Add-ons' shared UI (assets/js/app-addons.js, 0.4 item A.6): a run of buttons in a toolbar without groups, and a section at the end of a side panel. */ .shell-addon-run { display: inline-flex; align-items: center; gap: .25rem; padding-left: .5rem; margin-left: .25rem; border-left: var(--pen-1) solid var(--line); } .shell-addon-section { margin-top: .75rem; padding: .5rem 1rem 0; border-top: var(--pen-1) solid var(--line); } .shell-addon-section-h { display: flex; align-items: center; gap: .25rem; margin: 0 0 .4rem; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); } .shell-addon-section.is-collapsed .shell-addon-section-h { margin-bottom: .5rem; } .shell-addon-section-tog { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .4rem; padding: .2rem 0; font: inherit; color: inherit; text-align: start; background: none; border: 0; cursor: pointer; } .shell-addon-section-tog > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shell-addon-section-tog .bi { flex: 0 0 auto; font-size: .75em; } .shell-addon-section.is-collapsed .shell-addon-section-tog .bi { transform: rotate(-90deg); } .shell-addon-section-grip { flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; padding: 0; color: var(--ink-2); background: transparent; border: var(--pen-1) solid transparent; border-radius: var(--radius); cursor: grab; touch-action: none; } .shell-addon-section-grip:hover { color: var(--ink); border-color: var(--line); } .shell-addon-section-grip[hidden] { display: none; } .shell-addon-section-tog:focus-visible, .shell-addon-section-grip:focus-visible { outline: var(--pen-3) solid var(--action); outline-offset: 1px; } .shell-addon-section-body { font-size: var(--fs-sm); padding-bottom: .5rem; } /* While a section is dragged by its grip, every add-on section folds to its heading so the drop is a short move. */ .shell-addon-sorting > .shell-addon-section > .shell-addon-section-body { display: none; } .shell-addon-sorting, .shell-addon-sorting .shell-addon-section-grip { cursor: grabbing; } .shell-addon-section.is-dragging { background: var(--sheet-2); } .shell-addon-section.is-drop-before { border-top: var(--pen-3) solid var(--action); } .shell-addon-section.is-drop-after { border-bottom: var(--pen-3) solid var(--action); } @media (prefers-reduced-motion: no-preference) { .shell-addon-section-tog .bi { transition: transform .15s ease; } } /* Command palette (assets/js/app-palette.js, 0.4 item 1.8): Ctrl+K / ⌘K. */ .shell-palette { width: min(40rem, calc(100vw - 2rem)); max-height: min(34rem, calc(100dvh - 6rem)); margin: 4.5rem auto auto; padding: 0; color: var(--ink); background: var(--sheet-2); border: var(--pen-2) solid var(--ink); border-radius: var(--radius); display: flex; flex-direction: column; } .shell-palette:not([open]) { display: none; } .shell-palette::backdrop { background: color-mix(in srgb, var(--ink) 25%, transparent); } .shell-palette-input { flex: 0 0 auto; width: 100%; padding: .7rem .9rem; font: inherit; font-size: var(--fs-md); color: var(--ink); background: var(--sheet); border: 0; border-bottom: var(--pen-1) solid var(--line); outline: none; } .shell-palette-input::placeholder { color: var(--placeholder, var(--ink-2)); } .shell-palette-list { flex: 1 1 auto; min-height: 0; overflow: auto; margin: 0; padding: .25rem 0; list-style: none; } .shell-palette-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "n g k" "h h h"; align-items: baseline; gap: 0 .75rem; padding: .4rem .9rem; border-left: var(--pen-3) solid transparent; cursor: pointer; } .shell-palette-opt[aria-selected="true"] { background: var(--sheet); border-left-color: var(--layer); } .shell-palette-opt.is-disabled { color: var(--ink-2); cursor: default; } .shell-palette-name { grid-area: n; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .shell-palette-group { grid-area: g; font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16rem; } .shell-palette-opt kbd { grid-area: k; font-size: .75rem; padding: .05rem .35rem; color: var(--ink); background: var(--sheet); border: var(--pen-1) solid var(--line); border-radius: var(--radius); } .shell-palette-hint { grid-area: h; font-size: var(--fs-sm); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shell-palette-status { margin: 0; padding: .35rem .9rem; font-size: var(--fs-sm); color: var(--ink-2); border-top: var(--pen-1) solid var(--line); } .shell-palette-foot { margin: 0; padding: 0 .9rem .45rem; font-size: .75rem; color: var(--ink-2); } .shell-set.shell-palette-flash { outline: var(--pen-2) solid var(--layer); outline-offset: .3rem; } @media (max-width: 30rem) { .shell-palette-opt { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n k" "g g" "h h"; } } /* ---- Settings › Assistants and the "assistant connected" button (assets/js/host.js; session agents, docs/AGENTS-SPEC.md §7) ---- */ .shell-assist-groups { display: grid; gap: .35rem; padding-left: 1.4rem; } .shell-assist-groups .shell-check:has(input:disabled) { color: var(--ink-2); cursor: default; } .shell-assist-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; } .shell-assist-btn { padding: .25rem .6rem; font: inherit; font-size: var(--fs-sm); color: var(--ink); background: transparent; border: var(--pen-1) solid var(--ink); border-radius: var(--radius); } .shell-assist-btn:hover:not(:disabled) { background: var(--sheet-2); } .shell-assist-btn:disabled { opacity: .6; } .shell-assist-btn[hidden] { display: none; } .shell-assist-activity summary { cursor: pointer; font-weight: 600; } .shell-assist-log { list-style: none; margin: .4rem 0; padding: 0; max-height: 12rem; overflow: auto; font-size: var(--fs-sm); border-top: var(--pen-1) solid var(--line); } .shell-assist-entry, .shell-assist-empty { padding: .2rem 0; border-bottom: var(--pen-1) solid var(--line); overflow-wrap: anywhere; } .shell-assist-entry time { font-variant-numeric: tabular-nums; color: var(--ink-2); } .shell-assist-tool { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .shell-assist-entry[data-outcome="refused"] .shell-assist-outcome, .shell-assist-entry[data-outcome="error"] .shell-assist-outcome { color: var(--layer-red); font-weight: 600; } .app-bar-assist { border-color: var(--layer-orange); } .app-bar-assist .bi { color: var(--layer-orange); } .app-bar-assist[hidden] { display: none; } /* ==== Phones and fold phones (assets/js/app-phone.js; 0.5 Track PH, session `phones`, owner 2026-10-15) ==== * Every rule below hangs off a class only app-phone.js sets (html.cc-phone, cc-compact, cc-land, cc-tb-closed, cc-tb-bottom, * cc-kbd, cc-fold-h / cc-fold-v, and shell-phone-* / shell-sheet on elements), and app-shell.inc loads it only for builds * whose manifest has "phone" — frozen releases never get these classes, so they look as they did. Settings rules (IP.6) * are not here. Layout on a phone: [toolbar] [drawing] [command line …] [status] [toolbar when at the bottom] [bar]. */ .shell-phone-bar, .shell-sheet-close { display: none; } html.cc-phone { --shell-bar-h: 3rem; } html.cc-compact { --shell-bar-h: 2.75rem; } html.cc-phone, html.cc-phone body.app-shell { overflow: clip; } /* clip: an app's scrollIntoView can't shift the page */ html.cc-phone body.app-shell { height: var(--cc-vvh, 100dvh) !important; min-height: 0 !important; } html.cc-phone body.app-shell > main { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; height: auto !important; min-height: 0 !important; overflow: clip !important; } html.cc-phone body.app-shell > main > * { order: 2; flex: 0 0 auto; min-width: 0; max-width: 100%; } html.cc-phone body.app-shell > main > .shell-phone-tb { order: 0; } html.cc-phone body.app-shell > main > .shell-phone-stage { order: 1; flex: 1 1 auto !important; width: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; } html.cc-phone body.app-shell > main > .shell-phone-status { order: 3; } html.cc-phone.cc-tb-bottom body.app-shell > main > .shell-phone-tb { order: 4; } html.cc-phone body.app-shell > main > .shell-phone-bar { order: 5; } html.cc-phone body.app-shell > main > .shell-split, html.cc-phone .shell-dock-split, html.cc-phone .shell-float-size, html.cc-phone .shell-pintabs, html.cc-phone .shell-grip-pin, html.cc-phone .shell-grip-close { display: none !important; } /* The bar at the bottom: Tools (show / hide the toolbar), Move (toolbar at the top / bottom), then one button per panel. */ html.cc-phone .shell-phone-bar { display: flex; position: relative; z-index: 42; height: var(--shell-bar-h); overflow-x: auto; scrollbar-width: none; background: var(--sheet-2); border-top: var(--pen-2) solid var(--ink); } .shell-phone-btn { flex: 1 1 0; min-width: 3rem; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .05rem; padding: 0 .35rem; font: inherit; font-size: .75rem; font-weight: 600; line-height: 1.1; color: var(--ink); background: none; border: 0; border-right: var(--pen-1) solid var(--line); cursor: pointer; } .shell-phone-btn:last-child { border-right: 0; } .shell-phone-btn[hidden] { display: none; } .shell-phone-btn .bi { font-size: 1.1rem; color: var(--layer); } .shell-phone-btn:disabled { opacity: .45; } .shell-phone-btn-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shell-phone-btn[data-phone-sheet][aria-pressed="true"] { color: var(--sheet); background: var(--ink); } .shell-phone-btn[data-phone-sheet][aria-pressed="true"] .bi { color: inherit; } .shell-phone-btn:focus-visible { outline: var(--pen-3) solid var(--action); outline-offset: -3px; } html.cc-compact .shell-phone-btn { font-size: .6875rem; } html.cc-kbd .shell-phone-bar, html.cc-kbd .shell-phone-status { display: none !important; } /* Panels as sheets over the drawing (one at a time). Upright on a compact screen: from the bottom. Sideways, and on a fold phone's inner screen: from their own side. (Tablets in Studio: the tablet sheets below — app-phone.js never turns both on.) !important beats the inline places app-panels.js gives docked and floating panels; their remembered layout is untouched. */ html.cc-phone body.app-shell > main > .shell-sheet { position: absolute !important; z-index: 41; inset: 0 auto var(--shell-bar-h) 0 !important; width: min(22rem, 85vw) !important; height: auto !important; max-width: none !important; max-height: none !important; margin: 0 !important; overflow-y: auto !important; overscroll-behavior: contain; visibility: hidden; background: var(--sheet-2); border: 0 solid var(--ink) !important; border-right-width: var(--pen-2) !important; border-radius: 0 !important; transform: translateX(-102%); } html.cc-phone body.app-shell > main > .shell-sheet[data-sheet-side="right"] { inset: 0 0 var(--shell-bar-h) auto !important; border-right-width: 0 !important; border-left-width: var(--pen-2) !important; transform: translateX(102%); } html.cc-phone body.app-shell > main > .shell-sheet[data-sheet-side="bottom"], html.cc-compact:not(.cc-land) body.app-shell > main > .shell-sheet { inset: auto 0 var(--shell-bar-h) 0 !important; width: auto !important; max-height: 72% !important; border-width: var(--pen-2) 0 0 0 !important; transform: translateY(calc(100% + var(--shell-bar-h))); } html.cc-phone body.app-shell > main > .shell-sheet.shell-sheet-open { visibility: visible; transform: none !important; } @media (prefers-reduced-motion: no-preference) { html.cc-phone body.app-shell > main > .shell-sheet { transition: transform .18s ease, visibility .18s; } } html.cc-phone body.app-shell > main > .shell-sheet > .shell-grip { display: none !important; } /* nowhere to move them on a phone */ html.cc-phone .shell-sheet > .shell-sheet-close { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; position: sticky; top: 0; z-index: 6; min-height: 2.75rem; padding: .3rem 1rem; font: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); text-align: left; background: var(--sheet-2); border: 0; border-bottom: var(--pen-1) solid var(--line); cursor: pointer; } .shell-sheet-close:focus-visible { outline: var(--pen-3) solid var(--action); outline-offset: -3px; } /* Tablets in Studio (app-phone.js tablet mode, `ccShellPhone.tablet(true)` from studio/hub/window.js; html.cc-sheets): held upright, 600–999 px wide, the side panels float and slide in from their edge under the app bar, a button each in the bar (.app-bar-sheet). Under 600 px the phone layout above takes over instead: never both. */ html.cc-sheets body.app-shell > main > aside.cc-sheet { position: fixed !important; top: var(--cc-sheet-top, 0) !important; bottom: var(--cc-sheet-bottom, 0) !important; height: auto !important; width: min(24rem, 85vw) !important; max-width: none !important; z-index: 60; visibility: hidden; overflow: auto; background: var(--sheet); border: 0 solid var(--line); } html.cc-sheets body.app-shell > main > aside.cc-sheet.cc-left { left: 0 !important; right: auto !important; border-right-width: var(--pen-2); transform: translateX(-102%); } html.cc-sheets body.app-shell > main > aside.cc-sheet.cc-right { right: 0 !important; left: auto !important; border-left-width: var(--pen-2); transform: translateX(102%); } html.cc-sheets body.app-shell > main > aside.cc-sheet.cc-open { visibility: visible; transform: none; } @media (prefers-reduced-motion: no-preference) { html.cc-sheets body.app-shell > main > aside.cc-sheet { transition: transform .18s ease, visibility .18s; } } .app-bar-sheet[hidden] { display: none !important; } .app-bar-sheet[aria-pressed="true"] { color: var(--sheet); background: var(--ink); } /* upright, the app bar keeps one row with the panel buttons: the About links and the version chip step aside */ html.cc-sheets .app-bar-links, html.cc-sheets .app-bar-ver { display: none !important; } /* Toolbars: one row each that scrolls sideways (never wraps); at most two lines on a phone — the toolbar and the active tool's options. Hidden with Tools; at the bottom with Move. On a compact screen: icons first, labels .75rem or smaller, every button still 2.75rem tall. */ html.cc-phone .shell-phone-tb { display: flex !important; flex-wrap: nowrap !important; align-items: stretch; max-height: none !important; overflow-x: auto !important; overflow-y: hidden !important; overscroll-behavior-x: contain; scrollbar-width: thin; } /* the toolbar holds its own hidden words (position: absolute), so they scroll with it instead of widening the page */ html.cc-phone .shell-phone-tb:not(.shell-phone-tb-over) { position: relative; } html.cc-phone .shell-phone-tb > *, html.cc-phone .shell-phone-tb [class$="-tool-row"] > * { flex: 0 0 auto !important; } html.cc-phone .shell-phone-tb [class$="-tool-row"] { flex-wrap: nowrap !important; } html.cc-phone .shell-phone-tb [class$="-tool-label"] { white-space: nowrap; overflow: visible; text-overflow: clip; } html.cc-phone.cc-tb-closed .shell-phone-tb { display: none !important; } html.cc-phone .shell-phone-tb-over { left: .25rem !important; right: .25rem !important; max-width: calc(100% - .5rem) !important; } html.cc-phone.cc-tb-bottom .shell-phone-tb-over { top: auto !important; bottom: .25rem !important; } html.cc-compact .shell-phone-tb { font-size: .75rem; } html.cc-phone .shell-phone-tb > [role="group"] { padding-block: .1rem !important; } /* on a phone (and a fold's inner screen) group names give way (the groups keep their dividers; each tool keeps its title and words for screen readers): the toolbar is one row of 2.75rem icon buttons */ html.cc-phone body:not(.shell-arranging) .shell-phone-tb [class$="-tool-label"] { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } html.cc-phone .shell-phone-tb :is(button:not([role="menuitem"]), summary):has(> .bi) > span { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } html.cc-phone .shell-phone-tb :is(button:not([role="menuitem"]), summary) { min-width: 2.75rem; min-height: 2.75rem; justify-content: center; font-size: .75rem !important; white-space: nowrap; } html.cc-phone .shell-phone-tb :is(button:not([role="menuitem"]), summary) > .bi { font-size: 1.15rem; } html.cc-compact .shell-phone-tb select, html.cc-compact .shell-phone-tb input { font-size: .75rem; } /* a toolbar's own menus open over the page (the sideways scroll would clip them) */ html.cc-phone .shell-phone-pop, html.cc-touch .shell-phone-pop { position: fixed !important; z-index: 1055 !important; left: var(--pop-x, .25rem) !important; right: auto !important; top: var(--pop-y, auto) !important; bottom: var(--pop-b, auto) !important; max-width: calc(100vw - .5rem) !important; max-height: min(60dvh, 26rem) !important; overflow-y: auto !important; } /* Touch tablets (html.cc-touch: pointer coarse, not a phone): the app's own layout, but each toolbar is one row that scrolls sideways instead of wrapping onto two or three lines — unless Settings › General › Toolbar says "Wrap" (data-shell-tb-touch). The button style and group-name settings still apply. */ html.cc-touch body:not([data-shell-tb-touch="wrap"]) .shell-touch-tb { flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; overscroll-behavior-x: contain; scrollbar-width: thin; position: relative; } html.cc-touch body:not([data-shell-tb-touch="wrap"]) .shell-touch-tb > *, html.cc-touch body:not([data-shell-tb-touch="wrap"]) .shell-touch-tb [class$="-tool-row"] > * { flex: 0 0 auto !important; } html.cc-touch body:not([data-shell-tb-touch="wrap"]) .shell-touch-tb [class$="-tool-row"] { flex-wrap: nowrap !important; } /* Tool-option bars: one line that scrolls sideways (the second toolbar line). */ html.cc-phone .shell-phone-opts { display: flex !important; flex-wrap: nowrap !important; align-items: center; overflow-x: auto !important; overflow-y: hidden !important; white-space: nowrap; scrollbar-width: thin; } html.cc-phone .shell-phone-opts > * { flex: 0 0 auto !important; } html.cc-compact .shell-phone-opts { font-size: .75rem !important; } html.cc-compact .shell-phone-opts :is(select, input, button) { font-size: .75rem !important; } /* Hints: one line; a tap shows all of it. */ html.cc-compact .shell-phone-hint:not(.is-expanded) { max-height: 2.25rem !important; overflow: hidden !important; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; } html.cc-compact .shell-phone-hint { font-size: .75rem !important; pointer-events: auto !important; } /* The status line: one line that scrolls sideways. */ html.cc-phone .shell-phone-status { flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; white-space: nowrap; scrollbar-width: none; } html.cc-compact .shell-phone-status { font-size: .75rem; } /* The view cube / axis icon (viewcube.js, every 3D app): small, in the drawing's lower right corner — never over a hint. */ html.cc-phone :is(.cc-vc, .cc-axes) { top: auto !important; left: auto !important; right: .35rem !important; bottom: .35rem !important; } html.cc-phone .cc-vc, html.cc-phone .cc-vc svg { width: 4.75rem !important; } html.cc-phone .cc-vc svg { height: 4.75rem !important; } /* Dialogs fit the screen (and the part of it above the keyboard). */ html.cc-phone dialog[open] { max-width: calc(100vw - 1rem) !important; max-height: calc(var(--cc-vvh, 100dvh) - 1rem) !important; overflow: auto; } html.cc-compact dialog[open] { min-width: 0 !important; } /* A hinge (two viewport segments): dialogs and the command line keep to one segment; the drawing may span it. */ html.cc-fold-h dialog[open]:modal, html.cc-fold-v dialog[open]:modal { inset: var(--cc-seg-y) var(--cc-seg-r) var(--cc-seg-b) var(--cc-seg-x) !important; margin: auto !important; max-width: calc(var(--cc-seg-w) - 1rem) !important; max-height: calc(var(--cc-seg-h) - 1rem) !important; } html.cc-fold-h .shell-phone-whole { margin-left: var(--cc-seg-x) !important; width: var(--cc-seg-w) !important; max-width: var(--cc-seg-w) !important; } /* The app bar on a short sideways phone (wider than 760 px, so the narrow rules above do not apply), and wherever app-phone.js finds it too full for its window (html.cc-bar-narrow: tablets turned sideways, 800–1104 px): the same "More" layout. */ :is(html.cc-phone, html.cc-bar-narrow) .app-bar-links { display: none; } html.cc-compact .app-bar { min-height: 0; padding-block: .15rem; } /* every pixel goes to the drawing */ :is(html.cc-phone, html.cc-bar-narrow) .app-bar { gap: .35rem; padding-inline: .5rem; } :is(html.cc-phone, html.cc-bar-narrow) .app-bar > .app-bar-mark, :is(html.cc-phone, html.cc-bar-narrow) .app-bar-name > .app-bar-ver, :is(html.cc-phone, html.cc-bar-narrow) .app-bar > .app-bar-older, :is(html.cc-phone, html.cc-bar-narrow) .app-bar > .space-toggle, :is(html.cc-phone, html.cc-bar-narrow) .app-bar > .app-bar-palette { display: none; } :is(html.cc-phone, html.cc-bar-narrow) .app-bar-name { flex: 1 1 auto; min-width: 0; gap: .4rem; } :is(html.cc-phone, html.cc-bar-narrow) .app-bar-name > span:not(.layer-swatch) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :is(html.cc-phone, html.cc-bar-narrow) .app-bar-area { flex: 0 0 auto; } :is(html.cc-phone, html.cc-bar-narrow) .app-bar > .app-bar-btn, :is(html.cc-phone, html.cc-bar-narrow) .app-bar > .app-bar-fs, :is(html.cc-phone, html.cc-bar-narrow) .app-bar-more > summary { min-width: 2.75rem; min-height: 2.75rem; justify-content: center; padding: .2rem .45rem; } :is(html.cc-phone, html.cc-bar-narrow) .app-bar-more { display: block; } :is(html.cc-phone, html.cc-bar-narrow) .app-bar-more > summary { display: inline-flex; align-items: center; list-style: none; cursor: pointer; color: var(--ink); border: var(--pen-1) solid var(--ink); border-radius: var(--radius); } :is(html.cc-phone, html.cc-bar-narrow) .app-bar-more > summary::-webkit-details-marker { display: none; } :is(html.cc-phone, html.cc-bar-narrow) .app-bar-more > summary .bi { font-size: 1.1rem; } :is(html.cc-phone, html.cc-bar-narrow) .app-bar-more[open] > summary { color: var(--sheet); background: var(--ink); } :is(html.cc-phone, html.cc-bar-narrow) .app-bar-more-menu { position: absolute; z-index: 70; top: calc(100% + .3rem); right: 0; width: min(18rem, calc(100vw - 1rem)); max-height: calc(100dvh - 4.5rem); overflow-y: auto; padding: .25rem 0; background: var(--sheet-2); color: var(--ink); border: var(--pen-2) solid var(--ink); border-radius: var(--radius); font-size: var(--fs-sm); } :is(html.cc-phone, html.cc-bar-narrow) .app-bar-more-item { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 2.75rem; padding: 0 .9rem; font: inherit; font-weight: 600; text-align: left; color: var(--ink); text-decoration: none; background: transparent; border: 0; border-left: var(--pen-3) solid transparent; } :is(html.cc-phone, html.cc-bar-narrow) .app-bar-more-item:hover { background: var(--sheet); text-decoration: underline; } :is(html.cc-phone, html.cc-bar-narrow) .app-bar-more-item .bi { color: var(--layer); } :is(html.cc-phone, html.cc-bar-narrow) .app-bar-more-item[aria-current="page"] { font-weight: 700; border-left-color: var(--layer); } :is(html.cc-phone, html.cc-bar-narrow) .app-bar-more-item .n { margin-left: auto; color: var(--ink-2); font-weight: 500; } :is(html.cc-phone, html.cc-bar-narrow) .app-bar:has(.app-bar-palette[hidden]) .app-bar-more-find { display: none; } :is(html.cc-phone, html.cc-bar-narrow) .app-bar-more-h { margin: .4rem 0 0; padding: .35rem .9rem 0; border-top: var(--pen-1) solid var(--line); font-size: .75rem; font-weight: 700; color: var(--ink-2); } :is(html.cc-phone, html.cc-bar-narrow) .app-bar-more-ver { margin: 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; } :is(html.cc-phone, html.cc-bar-narrow) .app-bar-more-note { margin: 0; padding: .5rem .9rem; color: var(--ink-2); } :is(html.cc-phone, html.cc-bar-narrow) .app-bar-more .space-toggle { display: flex; margin: .3rem .9rem .5rem; } :is(html.cc-phone, html.cc-bar-narrow) .app-bar-more .space-toggle button { flex: 1 1 0; min-height: 2.75rem; } :is(html.cc-phone, html.cc-bar-narrow) .app-bar-more .space-toggle + .app-bar-more-item { border-top: var(--pen-1) solid var(--line); } /* The staff panel's tab (staff-panel.inc; staff and lab testers only) would sit on the bar's first button: above the bar. */ html.cc-phone .sp-tab { bottom: 3.35rem !important; left: .35rem !important; padding: .2rem .45rem !important; font-size: .75rem !important; opacity: .8; } /* The status line's own toggles stay one short row on a compact screen. */ html.cc-compact .shell-phone-status :is(button, select, summary) { min-height: 2.25rem !important; padding-block: .1rem !important; font-size: .75rem; } /* ---- Compact density (0.7 PANEL-COMPACT item 1; session shell-07; Settings › General › Layout density) ---- html[data-cc-density="compact"] is set by app-settings.js (before first paint by app-settings.inc); Comfortable sets no attribute, so nothing below applies and today's look stays. Rules are shape-based (every app's panels and toolbars follow the same markup rules:
's direct-child