/* ============================================================================= * Atlas Cloud Tools — the platform COMPONENTS. ACT-87. * * CANONICAL COPY. scripts\Sync-AtlasTokens.ps1 copies it into every tool; * -Check fails on drift. Edit here, never in a copy. * * WHY THIS FILE EXISTS * The busy overlay, the platform dropdown, the platform calendar and the * session warning are PLATFORM components: their behaviour is in * UnifiedLogin/shared and has been synced to every app for months. Their PAINT * was not. It lived in atlas-theme.css, which only the Bootstrap-shaped tools * take — so each React app carried its own copy in index.css, byte-identical * and separately maintained. Three copies that agree today and drift the moment * one is touched, which is exactly what kept happening. * * A token is not a design system; a component is. Behaviour and paint ship * together now, to all six tools, from one file. * * Load order: atlas-tokens.css, then this, then the app's own stylesheet. * ========================================================================== */ /* --- Navigation busy overlay --------------------------------------------------- * A tab is a routed page, so switching one is a round trip and the screen sits * still while it happens. With nothing moving a slow tab reads as a frozen app, * and the natural response is to click again — which queues a second round trip * behind the first. The overlay swallows those clicks. * * IT COVERS THE CONTENT, NOT THE CHROME. It starts below the app bar and stops * above the footer, so the company switcher and Return to Tools stay live while * a page loads — they are the two things a user reaches for when a screen is * taking too long. * * NO SCRIM AND NO FADE. A translucent layer over the whole page, animating in * and straight back out on a quick navigation, read as the page flashing. The * overlay is invisible: the spinner and the cursor say what is happening, and * nothing under them changes appearance at all. */ .atlas-busy { position: fixed; /* The whole viewport, and the chrome is lifted OVER it below. It used to be inset by --app-bar-h and --app-footer-h, which only lines up while those tokens match the header and footer a given tool actually renders — when they do not, the scrim starts below the tab strip and the dim looks like it has slipped down the page. */ inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; cursor: progress; /* A translucent scrim. It was deliberately invisible once, on the argument that a layer flashing in and out on a quick navigation read as the page blinking — but the 250ms delay before the overlay appears already covers that, and with nothing behind it the spinner was easy to miss against a busy screen. The page dims, the spinner sits on it, and it is obvious that the screen is not accepting input. */ background: rgba(31, 41, 55, 0.22); } .atlas-busy__spinner { width: 122px; height: 122px; border-radius: 50%; border: 11px solid var(--color-border); border-top-color: var(--color-action-ink); animation: atlas-busy-spin 700ms linear infinite; } /* The word, in the middle of the ring. Obvious to most, but a spinner alone still asks the reader to interpret it, and this costs nothing. It rides on the overlay rather than inside the spinner — the spinner is rotating. */ .atlas-busy::after { content: "Loading"; position: absolute; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; color: var(--color-action-ink); pointer-events: none; } @keyframes atlas-busy-spin { to { transform: rotate(360deg); } } /* ONLY WHILE THE OVERLAY IS UP. Lifting the bar permanently gave .header-wrapper a z-index, and a z-index on a positioned element makes it a STACKING CONTEXT: every z-index inside it is then scoped to it. BIReports' hamburger is absolutely positioned at 1101 and had been winning against .header-left across the whole page; confined to the new context it lost, and the button stopped taking clicks — the nav opened on load and could not be reopened after a collapse. The lift only matters while there is a scrim to sit above, so it only applies then. */ body:has(.atlas-busy) :is(.app-header, .header-wrapper, .header-content, .header-inner, .app-bar) { z-index: 3100 !important; } body:has(.atlas-busy) :is(.app-footer, .main-content-area > footer) { position: relative; z-index: 3100; } /* --- The platform dropdown ------------------------------------------------------ * atlas-select.js replaces a native opens a * calendar the OPERATING SYSTEM draws — system accent, system type, unreachable * by CSS, exactly like a closed select's popup. Sites whose calendars match their * design are not styling that popup either; they draw their own. * * The native field stays, and stays typable. Only the picker is ours. */ .atlas-date-wrap { position: relative; display: inline-flex; align-items: center; align-self: center; } /* The field has to make room for the trigger that sits inside it. `padding-right` alone lost: the bare-input rule in atlas-theme.css is `input:not([type=button]):not([type=submit])…` — five :not() compounds, so (0,5,1) against this class's (0,1,0) — and set the padding shorthand, which reset the right side to 10px. The text then ran under the calendar glyph. Stated as the shorthand on the same compound the theme uses, so it wins on order rather than on a flag. */ input.atlas-date-input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]) { /* the trigger's own width, plus its inset, plus the same gap again */ padding-right: calc(var(--space-6) + var(--space-2) * 2); } /* Chrome's own calendar button is hidden — the trigger below replaces it, and two calendar icons on one field is the tell that a picker was bolted on. */ .atlas-date-input::-webkit-calendar-picker-indicator { opacity: 0; pointer-events: none; width: 0; } /* THE CALENDAR BUTTON IS AN ICON, THE SAME ONE A TABLE ROW USES. * * It is a bare