/* * urSynergy shell bar. * * One variable controls the brand colour. urSynergy crimson, matching the * staff console -- as of 2026-08-04 all four sources finally agree * (branding_profiles -> codegen registry, DOMAIN_CONFIG, the * [data-brand="staff"] block in globals.css, and here). Change all of them * together or the console and its webmail drift apart again. */ :root { --us-brand: #C41E3A; --us-brand-dark: #9B1830; --us-bar-h: 44px; } #us-shell { position: fixed; top: 0; left: 0; right: 0; height: var(--us-bar-h); z-index: 1000; /* above Elastic's chrome, below its dialogs */ display: flex; align-items: center; gap: 1.25rem; padding: 0 0.9rem; background: var(--us-brand); color: #fff; font-size: 0.875rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22); box-sizing: border-box; } #us-shell .us-brand { display: flex; align-items: center; gap: 0.5rem; color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; } #us-shell .us-brand img { display: block; /* The mark is multi-coloured; on a saturated bar it reads as noise. */ filter: brightness(0) invert(1); } #us-shell .us-nav { display: flex; align-items: center; gap: 0.25rem; min-width: 0; overflow-x: auto; scrollbar-width: none; } #us-shell .us-nav::-webkit-scrollbar { display: none; } #us-shell .us-link { color: rgba(255, 255, 255, 0.9); text-decoration: none; padding: 0.3rem 0.6rem; border-radius: 6px; white-space: nowrap; } #us-shell .us-link:hover, #us-shell .us-link:focus-visible { background: var(--us-brand-dark); color: #fff; } #us-shell .us-who { margin-left: auto; padding-left: 0.75rem; color: rgba(255, 255, 255, 0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30ch; } /* * Elastic pins its whole UI with `position: absolute; top: 0; bottom: 0`, so * a fixed bar would sit ON TOP of the message list rather than above it. * Push the app down by exactly the bar height instead of padding , * which Elastic's height math does not account for. */ #layout { top: var(--us-bar-h) !important; } /* Dialogs and menus are portalled to , so they need the same offset only when they anchor to the top of the viewport. */ body > .ui-dialog { margin-top: var(--us-bar-h); } /* * Narrow screens. The links must SURVIVE here -- the whole point of the bar * is flipping between mail and the dashboard, and a phone is where that * matters most. So the nav stays and scrolls horizontally (it is already * overflow-x:auto); what goes is the wordmark and the address, which are * identity, not navigation, and which are what actually cost the width. */ @media (max-width: 640px) { :root { --us-bar-h: 40px; } #us-shell { gap: 0.5rem; padding: 0 0.5rem; font-size: 0.8125rem; } /* Logo alone still links to the console. */ #us-shell .us-brand span { display: none; } #us-shell .us-who { display: none; } #us-shell .us-nav { /* Take the width the wordmark and address gave up, and allow the row to scroll rather than compress the links into unreadable stubs. */ margin-left: auto; flex: 1 1 auto; justify-content: flex-end; -webkit-overflow-scrolling: touch; } #us-shell .us-link { padding: 0.3rem 0.45rem; /* Comfortable tap target without making the bar taller. */ min-height: 32px; display: flex; align-items: center; } }