/* panels.css — part 6 of 6 of the app stylesheet. Holds: calendar, settings, environments, connections, the tree, the management dashboard, people, rendered notes, the floating card window. ORDER MATTERS. These files were cut out of a single app.css at line boundaries with the sequence preserved, so concatenating them in the order index.html links them reproduces the original byte for byte — which is what makes the cascade provably unchanged. Equal-specificity rules still resolve by source order, so reordering the tags can change rendering. The names describe what ended up in each part, not a design: the original file interleaved the top bar, layout and per-feature rules, and moving rules to where they belong is a separate pass that this split exists to make possible. Palette is in theme.css, linked first. */ /* same reason as .update-banner: re-assert so `hidden` wins */ /* Settings · environments */ /* Settings is its own screen as of 6.88.0, not a modal: seven tabs had wrapped to two rows inside a dialog and the Branding panel wanted more room than one gives. The container rules live here beside the tab/panel rules rather than in screens.css, because keeping the settings styles together is worth more than the file's nominal theme (the six files were split at line boundaries, not by design). No `display` is set, so the bare `hidden` attribute hides it through the UA rule and needs no reassert. */ .settings-page { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px 22px; box-shadow: var(--shadow); } .settings-page-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; } .settings-page-head h2 { font-size: 18px; margin: 0; margin-right: auto; } /* The tabs are sticky against the page background, so the offset has to clear the page's own padding or the first row of a long panel slides under them. The tabs are `.ui-tabs` since 7.295.0. */ .settings-page .ui-tabs { top: -18px; padding-top: 4px; } .settings-intro { font-size: 13px; color: var(--muted); margin: 0 0 14px; line-height: 1.5; } /* Report a bug (7.22.0): its top-bar button is `.ui-chip-btn` since 7.398.0. */ .env-msg { font-size: 13px; margin: 12px 0 0; min-height: 18px; } .env-msg.ok { color: var(--ok); } .env-msg.err { color: var(--err); } /* create: parent note */ .nc-parent { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; font-size: 13px; color: var(--brand); margin-bottom: 4px; } /* tree view */ .pill.env { color: var(--muted); } /* People / identity map (settings) */ /* Access — the role × resource permission grid (settings) */ /* Scrolls in its own container: 14 rows by 4 roles is wide on a laptop, and the settings page body must never scroll sideways (the same rule the planning table follows). */ /* The permission grid is a `.ui-table` inside `.ui-table-scroll` since 7.311.0, and scrolls sideways inside itself. What stays here is the one state the component has no word for: a cell that differs from the grid the release ships, so a reviewer can see what this instance changed. An attribute, not a class. */ #ac-grid select[data-changed] { border-color: var(--link); color: var(--link); font-weight: 600; } /* Rendered note/description markup, shared vocabulary with the receipts page. Scoped under .nmd so content can never restyle the panel around it. */ .nmd > :first-child { margin-top: 0; } .nmd > :last-child { margin-bottom: 0; } .nmd p { margin: .45em 0; } .nmd ul, .nmd ol { margin: .45em 0; padding-left: 1.25em; } .nmd li { margin: .15em 0; } .nmd code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; background: var(--panel-2); padding: .05em .35em; border-radius: 4px; } .nmd pre { margin: .5em 0; padding: .6em .7em; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; overflow-x: auto; } .nmd pre code { background: none; padding: 0; white-space: pre; display: block; font-size: .86em; line-height: 1.45; } .nmd blockquote { margin: .5em 0; padding-left: .7em; border-left: 2px solid var(--line); color: var(--muted); } .nmd .nmd-h1, .nmd .nmd-h2, .nmd .nmd-h3, .nmd .nmd-h4 { font-weight: 700; margin: .7em 0 .3em; line-height: 1.35; } .nmd .nmd-h1 { font-size: 1.1em; } .nmd .nmd-h2 { font-size: 1.03em; } .nmd .nmd-h3 { font-size: .98em; color: var(--brand); } .nmd .nmd-h4 { font-size: .94em; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .nmd .nmd-hr { border-top: 1px solid var(--line); margin: .7em 0; } .nmd table.nmd-table { border-collapse: collapse; margin: .5em 0; font-size: .94em; } .nmd table.nmd-table th, .nmd table.nmd-table td { border: 1px solid var(--line); padding: 3px 7px; text-align: left; vertical-align: top; } .nmd table.nmd-table th { color: var(--muted); font-weight: 600; background: var(--panel-2); } .nmd { overflow-wrap: anywhere; } ul.tree { list-style: none; margin: 0; padding-left: 18px; } ul.tree.root-list { padding-left: 0; } /* The tree screens' filter grows from nothing (`flex: 1`), not from `.ui-toolbar__grow`'s 200px: at 390 the larger basis pushed "Collapse all" onto the toolbar's second line (7.421.0, measured). The rest of the row is `.ui-toolbar`. */ .tree-filter-input { flex: 1; } ul.tree li { position: relative; } ul.tree ul.tree { border-left: 1px solid var(--line); margin-left: 7px; } .tnode { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 10px; margin: 3px 0; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: var(--panel); } .tnode:hover { border-color: var(--brand-bright); background: var(--panel-2); } .tnode.root { border-color: var(--brand); background: var(--panel-2); } .tname { font-size: 14px; flex: 1; min-width: 0; } .tcaret, .tcaret-sp { flex: none; display: inline-block; width: 1em; text-align: center; color: var(--muted); user-select: none; } .tcaret { cursor: pointer; transition: transform .12s ease; } .tcaret:hover { color: var(--text); } li.collapsed > .tnode .tcaret { transform: rotate(-90deg); } li.collapsed > ul.tree { display: none; } /* On phones the bare glyph is a fiddly ~14px tap target wedged against the row's tap-to-open area, so an off-tap opens the card instead of collapsing it. Turn the caret into a proper chevron button and lift it out of the wrapping flow (position:absolute) so it sits vertically centered against the whole row — title plus the pills that wrap beneath it — rather than stuck to the top line. The row reserves a left gutter for it; leaves inherit the same gutter (their spacer is hidden) so every title lines up. Placed after the base rules so it wins on mobile. */ @media (max-width: 640px) { .tnode { position: relative; padding-left: 50px; } .tcaret { position: absolute; left: 10px; top: 50%; width: 32px; height: 32px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; transform: translateY(-50%) rotate(0deg); } .tcaret:active { background: var(--panel); border-color: var(--brand-bright); } li.collapsed > .tnode .tcaret { transform: translateY(-50%) rotate(-90deg); } .tcaret-sp { display: none; } /* gutter handled by .tnode padding-left */ .tmeta { padding-left: 0; } /* pills already sit inside the gutter */ } /* `flex-wrap: wrap` because this row does not fit a phone: its content measured 409px inside a 358px column, so "New Project" hung 35px past the viewport and took the whole document with it. Wrapping is what `.header-actions` already does at the same breakpoint. */ .tname .ttype { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; margin-right: 4px; } /* 12px, where a `.pill` used to bring 6px of margin to a 6px gap (7.479.0): the row's pills are `.ui-pill`, which carries none, so the spacing between them is unchanged at every width. This rule loads after layout.css, so it is also the phone's. */ .tmeta { display: flex; gap: 12px; white-space: nowrap; } /* The card's facts are `.ui-facts--grid` (7.416.0); this is only the space below them in the card. */ .cd-details { margin-bottom: 16px; } /* Every other action row in this panel is a flex row with a gap — `.cd-log-controls` (8px), `.cd-preview-actions` (8px), the Files section's `.ui-btn-row` (8px), `.cd-move-row` (8px). This one was `display: block`, and `cards.js` concatenates its seven buttons with no whitespace between them, so the panel's MAIN toolbar rendered its buttons edge to edge: measured 0px between Complete and Move…, with Complete being the control that resolves a client's ticket. */ /* The actions row is a `.ui-btn-row` since 7.423.0, which is the flex row with the 8px gap described above. */ /* The move picker grows from nothing, as it always did: `.ui-toolbar__grow`'s 200px start pushed Move here and Cancel onto a second line at 390 (7.423.0, measured). An id, because the row's own class is gone. */ #cd-move-select { flex: 1; min-width: 0; } /* The modal's Description is `.ui-disclosure--compact` over a `.ui-textbox` (7.492.0): where it sits, and its taller cap. */ .cd-desc-wrap { margin: 14px 0 8px; padding-top: 12px; border-top: 1px solid var(--line); --ui-textbox-max: 260px; } /* --- Branding settings panel (6.87.0) ------------------------------------ */ /* The image pickers' drop zones are `.ui-dropzone` (7.376.0). Since 7.497.0 a field's "Clear override" is `.ui-btn--link`, the logo size `.ui-range`, the show-name checkbox `.ui-field--inline` and the color grid a `.ui-table`; `br-reset`, `br-col-pick` and `br-col-hex` stay as the hooks settings.js finds them by. */ /* `.br-images` keeps its own auto-FIT grid (7.303.0), not `.ui-card-grid`'s auto-FILL: three pickers share the row at full width, and at `.ui-card-grid`'s narrower column a wide logo's thumbnail overflowed its drop zone. */ .br-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 12px 0 4px; } /* The show-name checkbox keeps the 16px box and the accent tint `.br-check input` gave it. `.ui-field--inline` leaves a checkbox's size and tint to the browser, and its other callers have the browser's today. By id, so no private class is added. */ #br-show-name { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; } /* A color cell of the brand-color table: the swatch and its hex. Private (listed in the baseline) because the marking is this editor's own: an overridden cell is outlined, so "what have I changed" is answerable at a glance rather than by comparing against a deploy config nobody has open, and an inherited swatch is dimmed so "not set here" is visible rather than inferred from the placeholder. The cell is a `.ui-btn-row`, which wraps: the hex keeps room for a 7-character value (8ch), so on a phone the swatch sits over it rather than the hex shrinking to "inhe" (measured at 38.5px wide at 390 before 7.497.0). */ .br-col-cell { padding: 3px 6px; border-radius: 6px; border: 1px solid transparent; } .br-col-cell.over { border-color: var(--accent); background: var(--panel-2); } .br-col-cell > input[type="color"] { width: 34px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); cursor: pointer; flex: none; } .br-col-cell:not(.over) > input[type="color"] { opacity: .45; } /* `width: 8ch` as well as the floor: a table sizes a column from its content's min-content width, and an input's is its intrinsic `size` (about 20 characters) whatever its `min-width` says, which pushed the page 441px wide at 390. */ .br-col-cell > input[type="text"] { flex: 1 1 8ch; width: 8ch; min-width: 8ch; } /* Preview. The chosen colors are set as --pv-* on this element only: writing them onto :root would restyle the live app while someone is still experimenting, so an unsaved edit would look saved. */ .br-preview { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 10px 0 4px; } .br-pv-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--pv-brand, var(--brand)); } .br-pv-logo { width: calc(26px * var(--pv-logo-scale, 1)); height: calc(26px * var(--pv-logo-scale, 1)); object-fit: contain; border-radius: 50%; background: #fff; flex: none; } .br-pv-logo.rect { width: auto; max-width: calc(132px * var(--pv-logo-scale, 1)); border-radius: 4px; background: transparent; } .br-pv-logo[hidden] { display: none; } .br-pv-name { font-weight: 700; font-size: 14px; color: #fff; } .br-pv-name[hidden] { display: none; } .br-pv-spacer { flex: 1; } .br-pv-btn { background: var(--pv-accent, var(--accent)); color: #fff; border: 0; border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 12px; font-weight: 600; cursor: default; } .br-pv-body { padding: 12px; background: var(--panel); } .br-pv-card { border: 1px solid var(--line); border-left: 3px solid var(--pv-accent, var(--accent)); border-radius: 8px; padding: 10px 12px; background: var(--panel-2); } .br-pv-card-title { font-size: 13px; font-weight: 600; color: var(--text); } .br-pv-card-meta { font-size: 11px; color: var(--muted); margin: 2px 0 6px; } .br-pv-link { font-size: 12px; color: var(--pv-link, var(--link, var(--accent))); } /* Create-dialog Client picker (6.94.0). Explicit background/color for the same reason every other select in this app carries them — a bare select renders white and ignores the dark theme. */ .nc-client { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--text); max-width: 320px; } /* Tag -> client migration report (6.95.0). Its groups are `.ui-callout`s since 7.298.0; what stays here is the list's wrapping (a card title can be one long unbroken token) and the inheritance warning, which is a phrase inside a sentence rather than a line of its own. */ .cl-mig-list li { overflow-wrap: anywhere; } .cl-mig-inherit { color: var(--warn, #d99a2b); }