landmark, leaving the main content region with no heading at all (WCAG 2.4.6 / 1.3.1). This keeps the

in the DOM and in the accessibility tree while removing it from the visual layout entirely, so there is no visual regression. `position: absolute` + 1px box + `clip`/`clip-path` is the standard visually-hidden recipe. `display: none` / `visibility: hidden` would remove the heading from the accessibility tree too and defeat the point. The `!important` overrides the flex/padding/margin block above without needing a more specific selector on every property. / .cn-page-header--visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } / CnActionsBar — Reusable actions toolbar styles / .cn-actions-bar { display: flex; justify-content: space-between; align-items: center; / Wrap the actions cluster below the search on narrow containers instead of overflowing (clipping the Add button / Actions menu). / flex-wrap: wrap; gap: calc(2 var(--default-grid-baseline)); margin-bottom: calc(5 * var(--default-grid-baseline)); padding: calc(2 * var(--default-grid-baseline)); background: var(--color-background-hover); border-radius: var(--border-radius); /* Named inline-size container so the narrow-layout rules below respond to the BAR's own width (page content minus nav/sidebar), not the viewport. / container: cn-actions-bar / inline-size; } .cn-actions-barinfo { font-weight: 500; font-size: var(--default-font-size); / Let the search area grow to fill the row but shrink (min-width:0) so the actions can stay beside it until there's genuinely no room, then wrap. Flex row so `#after-search` controls (filter buttons) sit BESIDE the search field — the left side groups "narrow what you see". / display: flex; align-items: center; gap: calc(2 var(--default-grid-baseline)); flex: 1 1 220px; min-width: 0; } .cn-actions-barcount { color: var(--color-text-maxcontrast); } /* Inline search field / .cn-actions-barsearch { position: relative; display: flex; align-items: center; / Fill the (flexible) info area up to a comfortable cap; shrinks below it. / width: 100%; max-width: 320px; } .cn-actions-barsearch-icon { position: absolute; left: 12px; color: var(--color-text-maxcontrast); pointer-events: none; display: inline-flex; } / Scoped under the search wrapper (specificity 0,2,0) + !important on the inline padding so NC core's global `input` rule can't reset the left inset and let the placeholder slide under the magnifier icon. / .cn-actions-barsearch .cn-actions-barsearch-input { width: 100%; height: 40px; margin: 0; padding-block: 0; padding-inline: 38px 12px !important; border: 1px solid var(--color-border); border-radius: var(--border-radius-pill); background: var(--color-main-background); font-size: var(--default-font-size); font-weight: 400; } .cn-actions-barview-toggle-icon { display: inline-flex; } / Standalone sort control: a leading icon + a compact select, kept on one line (the visible "Sort by" label is dropped; it lives on the icon's aria-label and the combobox's accessible name instead). / .cn-actions-barsort { display: flex; align-items: center; gap: 4px; } .cn-actions-barsort-icon { display: inline-flex; color: var(--color-text-maxcontrast); } .cn-actions-barsort .cn-actions-barsort-select { min-width: 140px; } .cn-actions-baractions { display: flex; align-items: center; / Wrap the toggle / sort / add / overflow cluster onto a second line rather than overflowing when the container is narrow. / flex-wrap: wrap; justify-content: flex-end; gap: calc(2 var(--default-grid-baseline)); } .cn-actions-baractions .button-vue { /* fix issue when adding custom content, button gets squished when not needed / / this is a quick and dirty fix and its possible that this will caused issue of its own when there are too many buttons / min-width: fit-content !important; } / View mode toggle — segmented control with a sliding thumb. Styled entirely with Nextcloud CSS variables so any active theme (incl. the nldesign design systems) colours it automatically. The thumb is an absolutely-positioned pill that animates with `transform` between the two segments, giving the toggle its sliding feel. / .cn-actions-barview-toggle { position: relative; display: inline-flex; align-items: center; box-sizing: border-box; padding: 4px; border-radius: var(--border-radius-pill); background: var(--color-background-dark); / Lives in the (shrinkable) left info group — never crush the segments; the search field is the one that gives up width. / flex: 0 0 auto; } / Scoped under the toggle (specificity 0,2,0) so it beats any stale copy of the PREVIOUS actions-bar.css that other apps may co-load on the same page. Older builds shipped `.cn-actions-barview-toggle span { max-height: 34px }` (specificity 0,1,1); since the thumb is a , that rule would cap it at 34px and break the vertical centring. `max-height: none` here overrides it. The inset top/bottom (not a calc'd height) keeps the thumb centred and 40px. / .cn-actions-barview-toggle .cn-actions-barview-toggle-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); max-height: none; border-radius: var(--border-radius-pill); background: var(--color-main-background); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); transition: transform 0.25s ease; will-change: transform; } .cn-actions-barview-toggle-thumb--right, .cn-actions-barview-toggle-thumb--pos-1 { transform: translateX(100%); } .cn-actions-barview-toggle-thumb--pos-2 { transform: translateX(200%); } / Three-segment layout (Cards / Table / Map): the thumb shrinks to one third of the track so a single translateX(100%) step lands it exactly on the next segment. The two-segment default above (50% - 4px) is untouched. / .cn-actions-barview-toggle--three .cn-actions-barview-toggle-thumb { width: calc((100% - 8px) / 3); } / Segment buttons must shed Nextcloud core's global