/* dalai-layout.css * * LAYOUT OVERRIDES FOR THE UPSTREAM CONSOLE. READ THIS BEFORE ADDING ANYTHING. * * Separate from dalai-tokens.css on purpose: * * dalai-tokens.css redefines design tokens (--primary, --radius, --font-*). * Token names are stable vocabulary. Effectively * release-proof. * * dalai-layout.css targets upstream's DOM STRUCTURE. NOT release-proof. An * upstream header refactor will silently stop these rules * matching, and the layout will quietly revert. * * CHECK AFTER EVERY UPSTREAM UPGRADE, at full width: nav roughly centred, * action icons hard right, and exactly ONE set of action icons. * * =========================================================================== * TWO RULES, BOTH LEARNED BY BREAKING THE HEADER: * * 1. NEVER SET `display` ON AN UPSTREAM ELEMENT. * Tailwind hides the mobile action group with `hidden` (display:none). Our * stylesheet is UNLAYERED, and unlayered rules beat Tailwind's layered * utilities regardless of specificity. One `display:flex` here un-hid the * mobile menu on desktop: two sets of action icons and a hamburger appeared, * and it looked like upstream had broken rather than like we had. * Use only properties that are inert when they do not apply: margin, * justify-content, white-space, position. * * 2. THE HEADER'S REAL STRUCTURE IS NOT WHAT IT LOOKS LIKE. * The bar has three children, and the middle one holds BOTH the nav links * and the action icons in a single flex row: * * * * So centring "the nav" centred the icons with it, which is why the icons * sat beside Docs instead of at the right edge. They were never misplaced; * they were being carried along. * =========================================================================== */ /* --------------------------------------------------------------------------- * Split that single group into "links, centred" and "icons, hard right", * using nothing but auto margins. * * An `auto` margin in a flex row absorbs free space. Two of them absorb it * equally. So: * * logo │←auto→│ Home … Docs │←auto→│ ┊ 文A ☀ 🔔 K * * The first auto sits before the first link, the second before the separator. * Equal shares put the links midway between the logo and the icons, and push * everything from the separator onward to the far right. * * Auto margins are the right instrument here precisely because they are inert * on a hidden element, so the mobile group cannot be disturbed by them. * ------------------------------------------------------------------------- */ /* WHICH CHILD IS THE GROUP (s1009b, 2026-10-09). The group is matched by its first separator, which only it has. Until 2026-10-09 it was matched by `:has(> a[href])`, which upstream's logo box (`div.flex.items-center`, a wrapper added after these rules were written) also satisfies: the logo box got `flex: 1 1 auto` and the logo link the auto margin, so the logo sat about 190 px in from the bar's left edge instead of at it. The first link is matched as `a:first-child` because from f8 a link is no longer the group's first child (see the wrapper below), and Sign in, an `a` too, must never take the margin. Let the combined group claim the width between the logo and the bar's edge. Without this it shrink-wraps its content and there is no free space for the auto margins to absorb. */ header nav.justify-between > div.items-center:has(> div.mx-2.w-px) { flex: 1 1 auto; /* Nav labels are short by nature. Never let "Model Square" wrap and grow the header. */ white-space: nowrap; } /* Push the links away from the logo. */ header nav.justify-between > div.items-center:has(> div.mx-2.w-px) > a:first-child { margin-inline-start: auto; } /* FROM RELEASE f8 the links sit in a wrapper of their own (feat/header-keep-ltr): `display: contents` while the bar follows the page, so the first link is still a flex item of the group; and a flex box with dir="rtl" when interface_setting.keep_header_ltr pins the bar left to right in a right-to-left page. The pinned bar is always left to right, so the wrapper is pushed from the logo with a physical left margin: its own margin-inline-start would be its right side. */ header nav.justify-between > div.items-center:has(> div.mx-2.w-px) > div.contents > a:first-child { margin-inline-start: auto; } header nav.justify-between[dir="ltr"] > div.items-center:has(> div.mx-2.w-px) > div[dir="rtl"] { margin-left: auto; } /* Push the FIRST separator, and therefore every icon after it, to the right. * * THERE ARE TWO SEPARATORS, and matching both is a bug: * * div.mx-2.w-px before the icon cluster (language, theme, notifications) * div.mx-1.w-px before the auth section (profile avatar, or Sign in) * * A bare `div.w-px` selector gives BOTH an auto margin, so the free space is * split three ways and the avatar is pushed off on its own, away from the icons * it belongs with. Match only the first, by its Tailwind margin class, and the * whole cluster travels right together. */ header nav.justify-between > div.items-center:has(> div.mx-2.w-px) > div.mx-2.w-px { margin-inline-start: auto; } /* Belt and braces: if upstream adds another separator, it must not absorb space and split the cluster again. */ header nav.justify-between > div.items-center:has(> div.mx-2.w-px) > div.mx-1.w-px { margin-inline-start: 0; } /* =========================================================================== * THE AUTHENTICATED HEADER IS A DIFFERENT COMPONENT ENTIRELY. * * Everything above applies to the PUBLIC pages (/, /about, /pricing), rendered * by public-header.tsx. The signed-in console (/dashboard/…, /keys, /wallet) * uses AppHeader -> Header, which shares no markup with it. * * NOTE: NEVER WRITE A COMMENT DELIMITER INSIDE A COMMENT, not even as prose or * in quotes. A path glob such as "/dashboard" plus a star is literally the two * characters that open a comment; a star plus a slash CLOSES one, turning the * rest of the prose into live CSS. Both were written here while documenting * this file, and 30-deploy-tokens.sh rejected each one by counting delimiters. * That check exists because a stray close once silently killed an @font-face. * Write "the star form" in words instead. * * *
no
* * The two selector sets cannot collide: the public header keys off * `nav.justify-between`, and this one has no