behind. * COUNTED in the rendered HTML for a tenant administrator: 28 of the 86 * `.fi-dropdown-list` blocks contain no item. Each is 7.75px tall AND draws a * 1px divider, because Filament's divide-y rule gives every non-last child of * the panel a bottom border - so what the eye sees is a double rule with 7.75px * of nothing between it, 28 times across the eight menus. Finance carries five * of them: 43.75px of blank and five stray hairlines. * * `:empty` DOES NOT MATCH THEM - measured, 0 of 28 - because the divs contain * Livewire's `` comments and whitespace. `:not(:has(...))` * matched all 28. In a browser without `:has()` the whole rule is dropped and * the menus are exactly what they are today, which is the correct fallback. */ html.gyro-layout-top .fi-topbar-nav-groups .fi-dropdown-list:not(:has(.fi-dropdown-list-item)) { display: none; } /* (b) ONE COLUMN — clamp it instead of cutting it. * * This is the fallback shape (a group under MegaMenu::MIN_ROWS, or a viewport * too narrow for a second column), and it is also the honest floor for the * whole feature: even if every measurement above is wrong, a menu that scrolls * is reachable and a menu that is cut is not. The height comes from the script, * which is the only thing that knows where the trigger's bottom edge is. */ html.gyro-layout-top .fi-topbar-nav-groups .fi-dropdown-panel[data-gyro-mega-cols="1"] { overflow-y: auto; /* A menu that has run out of scroll must not then scroll the page behind it. */ overscroll-behavior: contain; } /* (c) TWO AND THREE COLUMNS. * * CSS multi-column and NOT grid: measured, grid's row-major auto-flow scatters * the sections across rows and leaves Finance 185px taller than the same * content balanced into columns. `column-fill: balance` is the default for an * auto-height element and is written out because it is load-bearing - it is * what makes three columns three EQUAL columns instead of two full ones and a * stub. No `max-height` here, deliberately: a multi-column box with a * restricted height fragments into MORE columns sideways rather than * scrolling, which would be a worse bug than the one being fixed. The script * chooses a column count that fits instead. */ html.gyro-layout-top .fi-topbar-nav-groups .fi-dropdown-panel[data-gyro-mega-cols="2"], html.gyro-layout-top .fi-topbar-nav-groups .fi-dropdown-panel[data-gyro-mega-cols="3"] { column-fill: balance; column-gap: var(--space-4); column-rule: 1px solid var(--color-border-hairline); padding-inline: var(--space-1); padding-block: var(--space-1); } html.gyro-layout-top .fi-topbar-nav-groups .fi-dropdown-panel[data-gyro-mega-cols="2"] { column-count: 2; } html.gyro-layout-top .fi-topbar-nav-groups .fi-dropdown-panel[data-gyro-mega-cols="3"] { column-count: 3; } /* A section is the group's own parent/child structure - `Chart of accounts` and * its six children are one `.fi-dropdown-list` - so a section split down the * middle of a column break would be the menu lying about the tree. `break-inside` * is the whole reason this reads as a mega menu rather than as a wrapped list. * * MEASURED IN ONE ENGINE ONLY. `break-inside: avoid` in CSS multi-column was * verified in the target browser and NOT in Firefox or Safari. If it is ignored * there the sections split across columns: untidy, still complete, still * reachable. That is the failure this was chosen for. * * The vendor divide-y border comes off in this shape. A horizontal hairline at * the foot of a column separates nothing from nothing; the column rule above is * what does the separating, and the margin is what groups the sections. */ html.gyro-layout-top .fi-topbar-nav-groups .fi-dropdown-panel[data-gyro-mega-cols="2"] > .fi-dropdown-list, html.gyro-layout-top .fi-topbar-nav-groups .fi-dropdown-panel[data-gyro-mega-cols="3"] > .fi-dropdown-list { break-inside: avoid; border-bottom-width: 0; margin-block-end: var(--space-2); } /* ============================================================================= * 5. CONTEXT SWITCHER — the company (1.1) and branch (1.33) controls that * spec 28.2 puts in the top bar. Sprint 47 wave 1. * * WHY THESE RULES LIVE IN THIS FILE. They are panel chrome rather than a * layout preset, and on ownership grounds this is the stylesheet the switcher * work owns. It is also the right one on the merits: it is linked LAST of the * four project sheets (see preset-head.blade.php), all four are unlayered, so * source order decides between them and these rules cannot be quietly * overridden by gyro-theme.css or gyro-chrome.css. Every rule below is scoped * to `.gyro-switcher*`, so it applies in all four presets and to nothing else. * * NO !important, for the same reason as the rest of this file: Filament's * compiled theme.css sits inside @layer, and an unlayered rule beats every * layered rule whatever the specificity. * * WHERE THE SURROUNDING SELECTORS COME FROM. Read off the installed v5.7 * source on the server, not inferred: * * vendor/filament/filament/resources/views/livewire/topbar.blade.php:256 * renders panels::global-search.before INSIDE `.fi-topbar-end` * vendor/filament/filament/dist/theme.css * `.fi-topbar-end { display:flex; align-items:center; column-gap:16px }` * `.fi-topbar-ctn { position:sticky; z-index:30; overflow-x:clip }` * * The `overflow-x: clip` is the one that decides how the menu is positioned. * `clip` on one axis does NOT force the other axis to become a scroll * container - that is exactly what distinguishes it from `hidden` - so a menu * hanging BELOW the bar is visible, while anything hanging past the left or * right edge would be cut. Hence the menu is anchored to the trigger's inline * END and grows inwards, never outwards. No teleport is needed, and the * z-index of 30 on the container means these menus already paint above the * page without a z-index war. * * COLOUR. Everything here is a token. The accent appears in exactly two * places, both of them permitted by spec 28.5: the focus ring, and the ONE * item that is currently active. Hover is neutral, because hover is not one of * the four accent uses. * ============================================================================= */ .gyro-switcher { display: flex; align-items: center; gap: var(--space-2); } /* A tenant user on a single-site company has NEITHER control, and Livewire * still needs a single root element to hydrate. Left as an empty flex child it * would contribute another 16px column-gap and push the search box left on * every page, for every customer - so the component stamps this class and the * element stops taking part in the layout. `:empty` would not do: the root * contains whitespace, and `:has()` is not something to depend on here. */ .gyro-switcher--empty { display: none; } .gyro-switcher__control { position: relative; } .gyro-switcher__trigger { display: inline-flex; align-items: center; gap: var(--space-1); /* Long enough for "Northwind Trading Ltd", short enough that two of these * plus the search box still fit a laptop. The label ellipses past it and the * full name is on the button's aria-label either way. */ max-width: 11rem; /* Was --size-control-button-compact (24px), which made these two the * shortest of the six controls in a row where every one was a different * height. Section 6 owns that number now. */ height: var(--gyro-topbar-control-height); padding-block: var(--space-0); padding-inline: var(--space-2); border: 1px solid var(--color-border-hairline); border-radius: var(--radius-control); background: var(--color-bg-surface); color: var(--color-text-secondary); font-family: var(--type-family-ui); font-size: var(--type-size-small); line-height: var(--type-line-small); cursor: pointer; transition: background-color var(--motion-duration-fast) var(--motion-easing-out), color var(--motion-duration-fast) var(--motion-easing-out); } .gyro-switcher__trigger:hover { background: var(--color-bg-hover); color: var(--color-text-primary); } .gyro-switcher__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gyro-switcher__chevron { width: var(--space-3); height: var(--space-3); flex-shrink: 0; color: var(--color-text-muted); } /* The one shadow on the control, and the only elevation token there is. A * closed switcher is flat by design: spec 28.5's density target is a bar that * reads as one surface, not a row of floating chips. */ .gyro-switcher__menu { position: absolute; inset-inline-end: 0; top: calc(100% + var(--space-1)); z-index: 1; min-width: 13rem; max-height: 60vh; overflow-y: auto; padding-block: var(--space-1); border: 1px solid var(--color-border-hairline); border-radius: var(--radius-control); background: var(--color-bg-surface); box-shadow: var(--elevation-overlay); } /* Alpine removes x-cloak once it has initialised, after which x-show's inline * style is what hides the menu. Without this rule the menu is briefly open on * every page load, for both controls. Filament defines a global [x-cloak] too; * this one is scoped and needs no !important because nothing else sets display * on this element before Alpine does. */ .gyro-switcher__menu[x-cloak] { display: none; } .gyro-switcher__heading { margin: 0; padding-block: var(--space-1); padding-inline: var(--space-2); color: var(--color-text-muted); font-size: var(--type-size-micro); line-height: var(--type-line-micro); } .gyro-switcher__item { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding-block: var(--space-1); padding-inline: var(--space-2); border: 0; background: transparent; color: var(--color-text-primary); font-family: var(--type-family-ui); font-size: var(--type-size-small); line-height: var(--type-line-small); text-align: start; cursor: pointer; transition: background-color var(--motion-duration-fast) var(--motion-easing-out); } .gyro-switcher__item:hover { background: var(--color-bg-hover); } /* Spec 28.5 lists the four things the single accent is for, and "active item" * is one of them. Not a background wash: in a menu this dense a filled row * reads as a hover state that will not go away. */ .gyro-switcher__item[aria-checked="true"] { color: var(--color-accent-base); font-weight: var(--type-weight-medium); } /* Reserved whether or not there is a tick in it, so the labels line up and the * list does not jump by a glyph width when the choice changes. */ .gyro-switcher__tick { display: inline-flex; align-items: center; justify-content: center; width: var(--space-3); height: var(--space-3); flex-shrink: 0; } .gyro-switcher__tick svg { width: 100%; height: 100%; } .gyro-switcher__item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Spec 28.10: an always-visible 2px accent ring, and `outline: none` is * forbidden outright. tokens.css already gives every button one through a * zero-specificity :where() rule; these two restate it so that a later rule * which happens to set `outline` on a topbar button cannot silently win. The * menu item's ring is drawn INSIDE its own box - at the stock +2px offset it * would be clipped by the menu's own border on the first and last row. */ .gyro-switcher__trigger:focus-visible { outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } .gyro-switcher__item:focus-visible { outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color); outline-offset: calc(var(--focus-ring-offset) * -1); } /* A phone topbar is the brand, the search and the user menu. The switchers * stay - which company you are in is not optional information - but the label * gives up its width first, since the full name is still on the aria-label and * in the menu underneath. */ @media (max-width: 48rem) { .gyro-switcher__trigger { max-width: 6rem; } } /* ============================================================================= * 6. THE TOP-BAR CONTROL ROW — spec 28.2's controls, one height, one radius, * one hairline. Sprint 47 wave 3. * * WHY THIS EXISTS. The owner opened the panel on 21 August 2026 and reported * that the profile and the bell were in the wrong place, the search looked * broken and the timer button was broken. Measured in his browser at 1280px, * in the Top preset, before a line of this section was written: * * .fi-topbar-end flex-shrink: 1, six children, overflowing * gyro-switcher 102 x 24 * fi-global-search-ctn 52 x 34 <- a magnifier in a box, no field * gyro-palette-hint 44 x 32 <- a SECOND bordered box saying Ctrl K * gyro-timer 66 x 24 <- "Start" / "timer", on two lines * fi-no-database 20 x 20 with a 24 x 18 count badge beside it * fi-user-menu 27 x 27 right edge 1278.4 in a 1264.9 bar * * Six controls, five heights, three radii, and the avatar 13.5px past the end * of the bar it lives in - underneath the page scrollbar. None of that is a * Filament defect: `.fi-topbar-end` ships `flex-shrink: 1`, so a navigation * list too wide for the screen does not overflow, it CRUSHES the controls to * its right. That is the single root cause of four of the six symptoms, and * `flex-shrink: 0` is the whole fix for them. * * SCOPED TO `.fi-topbar-end` AND NOT TO A PRESET, deliberately. Spec 28.2 * describes one top bar, and these same controls sit in it in all four * presets - the crush is worst in Top because that is where the navigation * shares the bar, but the five mismatched heights were in every preset. * * WHERE THE SELECTORS COME FROM. Rule 1: read, never guess. All of these were * read off the installed v5.7.6 source on the server and then confirmed * present in the hydrated DOM - * * vendor/filament/filament/resources/views/livewire/topbar.blade.php * `.fi-topbar-end`, and the three render-hook positions inside it * vendor/filament/filament/resources/views/livewire/global-search.blade.php * `.fi-global-search-ctn` > `.fi-global-search` > `.fi-global-search-field` * vendor/filament/support/resources/views/components/input/wrapper.blade.php * `.fi-input-wrp`, `.fi-input-wrp-prefix`, `.fi-input-wrp-suffix`, * and `.fi-input-wrp-label`, which is the span the suffix text lands in * vendor/filament/filament/resources/views/components/topbar/database-notifications-trigger.blade.php * `.fi-topbar-database-notifications-btn`, which is an `.fi-icon-btn` * vendor/filament/support/resources/views/components/icon-button.blade.php * `.fi-icon-btn-badge-ctn` > `.fi-badge` * vendor/filament/filament/resources/views/components/user-menu.blade.php * `.fi-user-menu-trigger` > `.fi-user-avatar`, which is an `.fi-avatar`, * and an `` - which is why the initials cannot come from inside it * * NO !important, for the reason at the top of this file: everything here is * unlayered and Filament's whole theme.css is inside @layer, so a single class * already wins. Where a project sheet is being overridden instead of Filament * (`.gyro-timer__*` carries its own style block inside the Livewire view, and * an element's own style block appears later in the document than this * stylesheet's link), the `.fi-topbar-end` prefix supplies the specificity and * source order never has to be argued about. * ============================================================================= */ /* THE ONE RULE THAT MATTERS. Everything to the right of the navigation is * fixed furniture: it is the same controls on every screen in the product, and * no amount of navigation may take a pixel off it. */ .fi-topbar-end { flex-shrink: 0; column-gap: var(--gyro-topbar-control-gap); /* AND THE CLUSTER GOES ON THE RIGHT. THIS IS "the profile and the bell are in * the wrong place", and `flex-shrink: 0` above does not fix it - it stops the * controls being CRUSHED, it does not decide where they sit. * * Filament ships `.fi-topbar-end { margin-inline-start: auto }`, which is the * whole mechanism that pins this cluster flush right. gyro-theme.css section 3 * zeroes it: * * .fi-topbar-end { order: 100; margin-inline-start: 0; } * * That rule is tagged `[guess]` in its own file and its comment says the auto * margin "must be zeroed or the topbar cluster centers instead of the user-menu * sitting flush right". MEASURED IN CHROME AT 1280px ON THE CLASSIC PRESET, * which is the default and therefore what most people see: with it zeroed the * cluster's left edge is at x=180, immediately after the logo, with 558px of * empty top bar to its right. Restoring the auto margin puts it at x=725, and * its right edge at 1251 against a bar ending at 1265 - the bar's own 14px of * padding. The guess was backwards. * * `order: 100` cannot stand in for it. Order only decides the SEQUENCE of flex * items; it distributes no free space. It looks like it works in the Top preset * at >=1024px, and only because the navigation list next door carries * `flex: 1 1 auto` and eats the gap itself - which is why this survived: the * one configuration anybody checked was the one where a different rule was * doing the job. Measured with the nav present, this declaration changes * nothing (endL 739 both ways); measured in Classic, and in Top below 1024px * where the nav is `display: none`, it is the only thing holding the cluster. * * Here rather than in gyro-theme.css because both rules are unlayered and this * stylesheet is registered second on `panels::head.end`, so source order * decides and this wins without an !important. */ margin-inline-start: auto; } /* One height, one radius, and the vertical centring that stops a 24px control * from sitting a few pixels high next to a 32px one. `min-height` as well as * `height`, because two of these are flex containers whose own content would * otherwise push them taller than the row. * * TWO DELIBERATE EXCEPTIONS TO "ONE RADIUS", SO NEITHER READS AS DRIFT LATER. * The avatar (6.4) is a circle, because that is what an avatar is and what the * brief asked for, and the unread count (6.3) is a pill, because * `--radius-chip` is what every count in this product already uses. Both are * round by identity rather than by decoration; every rectangular control in the * row is `--radius-control` and stays that way. * * "ONE HAIRLINE" MEANS THE CONTROLS THAT HAVE AN EDGE SHARE ONE, and sprint 49 * moved two controls across that line. The switcher is a read-from surface with * a label in it and still carries `--color-border-hairline`. The search and the * timer are now ICON-ONLY TARGETS, like the bell and the avatar, so they carry * no border at all - which is the rule this paragraph already stated and is what * every product this is measured against does. A bordered box round a bell reads * as a button that is disabled, and the same is true of a bordered magnifier. */ .fi-topbar-end .gyro-switcher__trigger, .fi-topbar-end .gyro-timer__bar, .fi-topbar-end .gyro-timer__button, .fi-topbar-end .gyro-search-trigger, .fi-topbar-end .fi-icon-btn, .fi-topbar-end .fi-user-menu-trigger { height: var(--gyro-topbar-control-height); min-height: var(--gyro-topbar-control-height); border-radius: var(--radius-control); box-sizing: border-box; } /* Filament's `.fi-icon-btn` ships `margin: -0.5rem` so an icon button can sit * flush inside a table cell. In a control row that negative margin is what * makes the bell look like it is floating between the timer and the avatar * rather than standing in the row with them. */ .fi-topbar-end .fi-icon-btn { width: var(--gyro-topbar-control-height); margin: var(--space-0); flex-shrink: 0; } /* ----------------------------------------------------------------------------- * 6.1 SEARCH — an icon, not a bar. Sprint 49, owner item 3. * * HIS WORDS: "The search bar only open once click on the icon, default state * should be an icon, and upon click or ctrl+k should open the same popup, there * is no need to have a bar." * * WHAT THIS REPLACES, AND WHAT IT BUYS. Measured on the live sandbox at 1280px * in the Top preset, `.fi-global-search-ctn` was 240px - a prefix magnifier at * 33.8, an input at 144.5, a `Ctrl K` key cap at 59.8 - inside a bar whose * navigation strip had 560px to show 954.5px of sections. Four of the nine * sections were on the bar and five were behind "More". A 32px icon gives 208px * of that back; item 4's timer gives another 60.5px stopped and 234.4px running. * * THE FIELD IS NOT HIDDEN, IT IS NOT RENDERED. `AdminPanelProvider` passes * `->globalSearch(false)`, which makes the vendor topbar skip the `@if` around * `@livewire(Filament\Livewire\GlobalSearch::class)` outright, so there is no * `.fi-global-search-ctn` in the document to write a rule against and nothing * invisible left in the tab order. Every rule that used to be in this section - * the 240px width, the field's `width: 100%`, and the `.fi-input-wrp-suffix * .fi-input-wrp-label` key cap - selected markup that no longer exists, so they * are gone rather than kept "just in case". A stylesheet that describes markup * the product does not emit is how three shipped rules in this file came to do * nothing at all. * * NO BORDER AND NO FILL. It is an icon-only target, so it follows the bell and * the avatar rather than the switcher; see the "one hairline" paragraph above. * The 32px height comes from the shared rule, so the icon cannot drift off the * row the way six controls at five heights once did. * -------------------------------------------------------------------------- */ .fi-topbar-end .gyro-search-trigger { display: inline-flex; align-items: center; justify-content: center; width: var(--gyro-topbar-control-height); padding: var(--space-0); border: 0; background: transparent; color: var(--color-text-secondary); cursor: pointer; flex-shrink: 0; } .fi-topbar-end .gyro-search-trigger:hover { background: var(--color-bg-hover); color: var(--color-text-primary); } /* Sized from the toolbar icon token, the same one the bell is drawn at, so the * two icon-only controls in this row are optically the same weight. `stroke` * rather than `fill` on this one: an outlined magnifier next to a filled bell * is how every product this is measured against draws the pair. */ .fi-topbar-end .gyro-search-trigger__icon { width: var(--icon-toolbar); height: var(--icon-toolbar); stroke-width: var(--icon-stroke); flex: none; } /* ----------------------------------------------------------------------------- * 6.2 THE TIMER — an icon too, and never wider than one. Sprint 49, owner * item 4: "The timer bar should only have an timer icon, pause and play * icon makes sense too. No need for the text." * * WHAT THIS SECTION USED TO SAY, AND WHY IT IS KEPT IN THE PAST TENSE: * `.gyro-timer__button` had no `white-space`, so "Start timer" broke across two * lines the moment the row was squeezed, and a two-line button in a one-line bar * is the single most visible way a top bar can look unfinished. There is no * label left to wrap - the accessible name and the tooltip carry the words now - * but `white-space: nowrap` stays, because the panel's own "Start" button is the * same class and is still text, and because relying on nobody putting a label * back is how it happened the first time. * * THE WIDTH IS THE CONTRACT NOW. An icon-only button with no width is a button * whose size is decided by its padding, which is exactly how the timer came to * be 92.5px stopped and 306.4px running - measured on the live sandbox at * 1280px, where the running bar took 213.9px straight out of the navigation * strip beside it. Square, from the same token as the height. * -------------------------------------------------------------------------- */ .fi-topbar-end .gyro-timer, .fi-topbar-end .gyro-timer__bar, .fi-topbar-end .gyro-timer__button { white-space: nowrap; flex-shrink: 0; } /* The two states are one square each: an outline play when stopped, a solid * pause plus a quiet disclosure when running. `padding-inline: 0` because the * width is doing the work; leaving the text button's padding on would make the * square a rectangle again. */ .fi-topbar-end .gyro-timer__button--icon { width: var(--gyro-topbar-control-height); padding-inline: var(--space-0); } /* ----------------------------------------------------------------------------- * 6.3 THE BELL — the count belongs ON the icon. * * Filament already anchors `.fi-icon-btn-badge-ctn` absolutely at the top-right * corner of the button, which is the reason a three-character count can never * resize the control: an absolutely positioned box is out of flow, so "99+" is * exactly as wide as the button as "1" is. What was wrong was the size of the * thing being anchored - gyro-theme.css styles every `.fi-badge` in the product * as an 18px status chip, and an 18px pill 24px wide hung off a 20px bell reads * as two controls rather than one. Sixteen square, centred, tabular. * -------------------------------------------------------------------------- */ /* SIZED BY ITS OWN LINE BOX, like every other chip in the product since sprint * 48 - see gyro-theme.css section 5 for the arithmetic and the measurements. * The bell is the one chip that must stay SIXTEEN and not eighteen, because it * hangs off a 20px icon rather than sitting in a 34px row, so it gives up the * hairline instead of the two pixels: 0 border + 16px line-height = 16px, and * the fill plus the count still carry the status. `min-height` rather than * `height` for the same reason as everywhere else - a box shorter than its own * line box only looks right because `overflow: hidden` is hiding the rest. */ .fi-topbar-end .fi-icon-btn-badge-ctn .fi-badge { min-height: var(--space-4); padding-block: var(--space-0); border-width: 0; min-width: var(--space-4); padding-inline: var(--space-1); border-radius: var(--radius-chip); font-size: var(--type-size-micro); line-height: var(--type-line-micro); font-weight: var(--type-weight-medium); /* Tabular figures, for the same reason as the timer's clock: a number that * changes must not change the width of what is around it. */ font-variant-numeric: tabular-nums; justify-content: center; } /* ----------------------------------------------------------------------------- * 6.4 THE AVATAR — initials in a circle, drawn here, fetched from nobody. * * WHAT IT WAS. Filament's stock avatar provider builds an img whose src is a * ui-avatars.com URL. Confirmed in the live DOM: the currentSrc host was * ui-avatars.com. So a self-hosted business suite made a third-party request * on every page load of every screen, told that third party the name of the * signed-in person, and rendered the result at 27px with a radius and a * palette belonging to somebody else's design system. Offline - which is what * "self-hosted, on the customer's own server" often means - it is a broken * image, and a broken image with alt text is a bare letter, which is what the * owner saw and reported. * * WHAT IT IS. `App\Filament\Components\InitialsAvatarProvider` returns a * transparent SVG data URI, so no request leaves the machine and the img still * exists to carry the alt text a screen reader reads. The disc and the ink are * drawn here, from tokens, so dark mode is right for free. The initials * themselves arrive as a custom property set per request by * `resources/views/filament/components/avatar-initials.blade.php` - CSS cannot * take the first letters of a name, and an img cannot read a custom property, * so the two halves have to meet somewhere and a custom property is the only * place they can. * * `--color-bg-selected` and `--color-text-secondary` are the pair, not an * accent: spec 28.5 lists the four things the accent is for and an avatar is * not one of them. From the token file they clear 4.5:1 in both modes * (#565a61 on #e2e4e6 light, #b7bac0 on #454749 dark). * -------------------------------------------------------------------------- */ .fi-topbar-end .fi-user-menu-trigger { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--gyro-topbar-control-height); flex-shrink: 0; border-radius: var(--radius-chip); background-color: var(--color-bg-selected); color: var(--color-text-secondary); font-family: var(--type-family-ui); font-size: var(--type-size-small); line-height: var(--type-line-small); font-weight: var(--type-weight-medium); } /* The fallback is an empty string and not a letter: an empty disc is a person * with no name on file, a wrong letter is a lie about who is signed in. */ .fi-topbar-end .fi-user-menu-trigger::before { content: var(--gyro-avatar-initials, ""); } .fi-topbar-end .fi-user-menu-trigger .fi-avatar { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--radius-chip); } /* ----------------------------------------------------------------------------- * 6.5 KEYBOARD AND FOCUS — spec 28.10. * * Every control in this row is a real button or a real input in DOM order, so * Tab reaches them left to right, Enter and Space activate them and nothing * traps focus - none of which is this stylesheet's doing and all of which it * could undo, which is why the ring is restated here. tokens.css already draws * one through a zero-specificity :where() rule; this repeats it at a * specificity a later top-bar rule cannot quietly outrank, exactly as section 5 * does for the switcher. * * There is no `outline: none` anywhere in this file and spec 28.10 forbids one * being added. The token linter enforces it as OUTLINE_NONE. * -------------------------------------------------------------------------- */ .fi-topbar-end :is(a, button, input, select, textarea, [tabindex]):focus-visible { outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } /* Hover and focus move colour only, at the 140ms the motion tokens name. * Nothing here animates on load: spec 28.9 forbids an entrance animation and a * top bar that assembles itself is the most obvious place to break that. */ .fi-topbar-end .gyro-switcher__trigger, .fi-topbar-end .gyro-search-trigger, .fi-topbar-end .gyro-timer__button, .fi-topbar-end .fi-icon-btn, .fi-topbar-end .fi-user-menu-trigger { transition-property: var(--motion-allowed-hover-and-focus-state); transition-duration: var(--motion-duration-fast); transition-timing-function: var(--motion-easing-out); } @media (prefers-reduced-motion: reduce) { .fi-topbar-end .gyro-switcher__trigger, .fi-topbar-end .gyro-search-trigger, .fi-topbar-end .gyro-timer__button, .fi-topbar-end .fi-icon-btn, .fi-topbar-end .fi-user-menu-trigger { transition-duration: var(--motion-reduced-duration); transition-timing-function: var(--motion-reduced-easing); } } /* ----------------------------------------------------------------------------- * 6.6 NARROW SCREENS. * * THIS SECTION USED TO DO TWO JOBS AND SPRINT 49 REMOVED THE NEED FOR BOTH, so * what is left is one line. It shrank `--gyro-topbar-search-width` twice, and * there is no search width any more - the control is a 32px square at every * viewport. And it CLIPPED the timer button's label rather than hiding it, * because that label was the button's whole accessible name and `display: none` * would have left a screen reader announcing an unnamed button; there is no * label now, the name is an `aria-label`, and the clipping rule selected a * `> span` the view no longer emits. * * What remains is the gap: on a phone the five controls sit 4px apart instead of * 8px. Nothing gives up width, because after items 3 and 4 nothing in this row * is wider than one square except the company switcher, which has its own * `max-width` in section 5. * -------------------------------------------------------------------------- */ @media (max-width: 48rem) { :root { --gyro-topbar-control-gap: var(--space-1); } } /* ============================================================================= * 7. THE TOP BAR'S OVERFLOW MENU — the "More" control at the end of the group * strip. Sprint 47, wave 3 follow-up. * * WHAT IT ANSWERS. Measured in the owner's browser on the sandbox at 5970de3, * Top preset, 1280px, signed in: * * .fi-topbar-nav-groups children 9 scrollWidth 954 clientWidth 545 * * 409px of navigation — three of the nine top-level entries — reachable only by * dragging a strip whose scrollbar section 4 deliberately hides. Section 4 says * in its own words that the honest fix "is fewer than fourteen top-level * groups, which is a navigation decision and not a stylesheet's to take". That * decision was taken (NavigationMap cut fourteen to eight) and it was not * enough: eight groups plus the Dashboard link plus a search field, a company * picker, a timer, a bell and an avatar still do not fit a 1280px laptop. An * overflow menu is what Odoo and Bitrix24 do at exactly this point, and it is * the difference between navigation that adapts and navigation that hides. * * NOTHING IN THIS SECTION CLIPS OR PAINTS OVER A MENU, and that sentence is * load-bearing. Read section 4's long block before editing anything here: a * `mask-image` on `.fi-topbar-nav-groups` took every top-bar dropdown off the * screen for two sprints while leaving its rect, its aria state and its markup * perfect. So this section adds NO mask, NO filter, NO transform, NO contain * and NO non-visible overflow to any element a Filament dropdown panel is * inside. The only `overflow` below is on `.gyro-navmore__panel`, which is a * leaf: it contains nothing but this control's own links, and Filament's * dropdowns are neither inside it nor beneath it. * * THE PANEL IS `position: fixed`, WHICH IS THE WHOLE ANTI-CLIPPING ARGUMENT. * A fixed box's containing block is the viewport unless an ancestor creates * one, so an ancestor's overflow — `overflow-x: auto` on the

` and the indented per-item anchor from topbar-overflow.blade.php * when the panel became one lead link per section; the two rules stayed, so * roughly twenty lines of stylesheet shipped on every Top-preset page selecting * markup that had not existed for a sprint. If the panel ever lists items under * a heading again, write the rules again with the markup, in the same commit. */ .gyro-navmore__item { display: block; padding-block: var(--space-1); padding-inline: var(--space-2); color: var(--color-text-primary); font-family: var(--type-family-ui); font-size: var(--type-size-small); line-height: var(--type-line-small); text-decoration: none; transition-property: var(--motion-allowed-hover-and-focus-state); transition-duration: var(--motion-duration-fast); transition-timing-function: var(--motion-easing-out); } /* The lead link is a group that has no menu of its own — Dashboard, today. It * is a destination rather than a heading, so it carries the heading's weight * and the item's colour. */ .gyro-navmore__item--lead { font-weight: var(--type-weight-medium); } .gyro-navmore__item:hover { background: var(--color-bg-hover); } .gyro-navmore__item:focus-visible { outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color); outline-offset: calc(var(--focus-ring-offset) * -1); } /* One of spec 28.5's four accent uses: the item you are looking at. Colour and * weight rather than a filled row — in a list this dense a wash reads as a * hover state that will not go away. The active entry is never offered up by * the script, so it should not be in here at all; this covers the one case * where it can be, which is a strip narrow enough that the active entry is the * only thing left on it. */ .gyro-navmore__item[aria-current="page"] { color: var(--color-accent-base); font-weight: var(--type-weight-medium); } @media (prefers-reduced-motion: reduce) { .gyro-navmore__trigger, .gyro-navmore__item { transition-duration: var(--motion-reduced-duration); transition-timing-function: var(--motion-reduced-easing); } }