/* ============================================================================ aims-legacy-chrome.css — the POST-LOGIN legacy header/footer DOM contract ============================================================================ COMPANION TO aims-legacy-auth.css. That file restored the legacy contract on the LOGIN pages (Authenticate.razor). This one does the same job for everything AFTER login: the shells in Shared/PSLayout.razor and Shared/ModuleLayout.razor. WHY. A customer brands AIMS by writing CSS against the ASPX markup. Their sheet is served on the post-login pages too (/branding/css/global + /branding/css/{module} are linked from both layouts), but the migrated layouts emitted an invented `.aims-header / .aims-logo / .aims-twisted-logo / .aims-signout-area / .aims-footer` vocabulary with zero overlap against the legacy names, so those rules bound to nothing. CVS's production sheet, for example, targets `.headerdiv.PS .navbar`, `.headerdiv .twistedLogo.PS`, `.logo.PS`, `.headerdiv .subHeader`, `.signOutArea`, `#pagefooter`, `div#content` and `span#PsHeader_lblLoggedIn` — every one of which repainted the login and nothing after it. THE TWO LEGACY FAMILIES. Legacy post-login chrome comes in two genuinely different shapes, and the layouts select between them off the product token they already compute: FAMILY A — "responsive new headers" (avatier_bootstrap.css:358-566) .headerdiv.container-fluid. > .navbar.navbar-default.navbar-fixed-top > .twistedLogo. > .signOutArea > .signOutImage + .signOutText > .navbar-header > a.brand > div.logo. > .versionNumber, .midHeader, > .container-fluid.subHeader. > .LoggedInAs + .LastLogin + .ManagedUser > .homeButtonArea, .riskArea (+ " HasRisk" appended to .headerdiv) Controls: ASCX/HeaderPS.ascx (PS), HeaderHelpDesk.ascx (HD), HeaderAT.ascx (AT), Approver/Default.aspx inline (Approver). FAMILY B — "NON-RESPONSIVE NEW HEADERS" (AIMSBase.css:3365+) div.top-header.#header > .top-logo, .top-loggedIn, .top-lastlogin, .top-managing, .top-product, .top-version, .top-detail, .twisted-logo, .top-logout.hidden, .top-logout-area > .signOutImage + .signOutText Controls: HeaderGroupEnforcer/GroupRequester/StoreManager.ascx, CA/AuditHeader.aspx, IA/IAHeader.aspx, Client/Default.aspx. Both families close with the SAME grey `#pagefooter` bar from SelfService/Footer.htm. HOW THIS SHEET IS SCOPED — and why FAMILY A's THREE POSITIONED WRAPPERS ARE DIFFERENT. The general rule is still "ADD the legacy names to the elements that already carry the `.aims-*` product classes rather than swapping them out" (the same approach the login used for #page / #content / #CustomBanner), so aims-app.css keeps supplying the geometry and an unbranded install looks as it did before. THAT RULE HAS ONE DELIBERATE EXCEPTION, and it is the reason this file grew. The three ABSOLUTELY POSITIONED family-A wrappers — `.signOutArea`, `.subHeader` and `.twistedLogo` — cannot carry both vocabularies, because the two vocabularies place them with INCOMPATIBLE mechanisms: aims-app.css (modern) legacy avatier_bootstrap.css (family A) --------------------- --------------------------------------- .aims-signout-area .signOutArea position: absolute float: right <- NORMAL FLOW right: 170px; top: 10px margin-right: 15px/165px .aims-header-info .subHeader position: absolute position: absolute right: 250px right: 55px / 115px / 250px @>=1025px With BOTH class names present, a migrating customer's sheet was applied only HALF-way: the rules that happen to use the same mechanism landed, and the rest silently evaporated. Measured live against CVS Health's production Custom.css: their `.headerdiv .subHeader { right: 90px }` (0,2,0) DID beat `.aims-header .aims-header-info` (0,2,0) on source order and moved the sub-header, while their `.signOutArea { margin-right: 10px }` (0,1,0) was a NO-OP because the element was `position: absolute; right: 170px` and margins do not move an absolutely positioned box. The Sign Out icon ended up painted on top of the "Logged in as: … / Authenticated: …" text. Stock (unbranded) Classic did not overlap (250px vs 170px), so the defect only ever showed up for exactly the branded, migrating customer this whole feature exists to serve. So in CLASSIC family A the layouts emit the LEGACY names ONLY on those three wrappers (plus `.homeButtonArea` / `.riskArea`, which legacy places with the same float mechanism as `.signOutArea`), aims-app.css's modern geometry no longer matches them, and this sheet supplies the legacy geometry instead. MODERN mode is untouched — it still emits the `.aims-*` names exactly as before, and aims-app.css is not modified by any of this. Everything BELOW those wrappers keeps both names (`.signOutImage aims-signout-image`, `.signOutText aims-signout-text`, `.logo aims-logo`, …): those elements are sized/painted identically by the two vocabularies, so there is no mechanism mismatch, and this sheet is linked AFTER aims-app.css, which makes the ported legacy rule win every equal-specificity tie deterministically. This sheet's remaining jobs are unchanged: 1. make the structural elements the contract needs and the flat layout did not have — `.navbar` / `.navbar-header` / `a.brand` — behave as legacy pass-throughs, so the header lays out the way legacy does while a customer's `.headerdiv.PS .navbar { background: … }` has a real, full-bleed element to paint; 2. paint the family-A brand mark through `background-image` on `.logo.` instead of the CSS mask aims-app.css uses, because a mask CLIPS whatever image a customer sets — `.logo.PS { background-image: url(...) !important }` would otherwise be silently cropped to the Avatier wordmark silhouette. Same treatment, same asset and same selector shape the login already uses (aims-legacy-auth.css contract A). CASCADE POSITION — identical requirement to aims-legacy-auth.css: this file's MUST stay ABOVE /branding/css in App.razor and must never be loaded through (that renders at the HeadOutlet, i.e. AFTER the customer sheets, inverting the cascade). SPECIFICITY — THE LOAD-BEARING CONSTRAINT. Every rule is prefixed with a `:where(…)` that adds ZERO specificity, so each rule keeps exactly the weight its legacy counterpart had and a customer's equal-specificity rule still wins on source order. Two prefix shapes are used: :where(.aims-legacy-chrome) — for selectors that already name a family (`.headerdiv …`, `.top-header …`). :where(.aims-legacy-chrome .headerdiv) — for legacy's BARE single-class selectors (`.signOutArea`, `.homeButtonArea`, `.riskArea`, `.hamburgerArea`, `.navbar`, `.navbar-header`). The second shape exists because legacy wrote those rules at (0,1,0) and they MUST stay at (0,1,0): CVS ship `.signOutArea { margin-right: 10px }`, and writing `… .headerdiv .signOutArea` (0,2,0) here would silently beat them — reintroducing the exact bug class this change removes, in a new place. Putting `.headerdiv` INSIDE the `:where()` keeps the weight at (0,1,0) while still confining the rule to family A (family B's `.top-header` also emits `.riskArea` / `.homeButtonArea`, which legacy never styled with the family-A float rules). The family-A logo rules deliberately reproduce legacy's own 4-class shape (`.navbar .navbar-header .brand .logo.PS`), because that is the weight the customer sheet was written against — which is why customer logo swaps in the wild carry !important. ========================================================================== */ /* --------------------------------------------------------------- FAMILY A — PRODUCT COMPENSATION on .headerdiv. NOT part of the legacy contract: these three declarations exist only to undo aims-app.css inventions that legacy's `.headerdiv` never had, so that the ported legacy rules below can take effect at their legacy weight. display — aims-app.css makes `.aims-header` `display: flex` (and `display: grid` at <=720px). Legacy `.headerdiv.container-fluid` is a plain block whose children lay out with floats; a flex/grid container silently DISCARDS `float`, which is the mechanism legacy uses to place .signOutArea / .homeButtonArea / .riskArea. padding — aims-app.css adds 12px at <=720px; legacy has none (the ported <=767px rules place the phone header themselves). min/max-height — aims-app.css pins `.aims-header` to var(--aims-header-height) with BOTH, which would override legacy's `height: 50px/60px/90px` breakpoints no matter what `height` resolves to. `height` itself is deliberately NOT declared here: legacy owns it at (0,1,0) below, so a customer's `.headerdiv { height: … }` still ties and wins on source order. --------------------------------------------------------------- */ :where(.aims-legacy-chrome) .headerdiv.container-fluid { display: block; padding: 0; min-height: 0; max-height: none; } /* --------------------------------------------------------------- FAMILY A — .navbar / .navbar-header / .brand pass-through. These three wrappers exist in legacy between .headerdiv and its contents; the migrated header was flat. `.navbar` IS A BLOCK, exactly as in legacy (bootstrap-ms.css:3582 `.navbar { position: relative }` + avatier_bootstrap.css:505 `.navbar { margin-bottom: 0; overflow: hidden }`). It used to be a flex box here; it cannot be one any more, because `.signOutArea` / `.homeButtonArea` / `.riskArea` are placed by `float: right` and floats do not apply to flex items. `position: relative` also restores the legacy containing block for the absolutely positioned `.subHeader` / `.twistedLogo` (legacy's was the position:fixed `.navbar.navbar-fixed-top`); it spans the full .headerdiv box either way, so every legacy `right:` offset resolves to the same pixel. NOT reproduced: `position: fixed` from `.navbar-fixed-top`. The Blazor shell scrolls its own .ps-content-area rather than the document, so a fixed header would detach from the layout and legacy's matching `#content { margin-top:
}` offset does not exist here. `background: transparent` is the DEFAULT only — a customer's `.headerdiv.PS .navbar` (0,3,0, later source order) paints straight over it, which is the whole point. The whole rule is kept at (0,1,0), legacy's own weight for `.navbar`, by putting the `.headerdiv` confinement inside the `:where()`; a bare `.navbar { background: … }` from a customer sheet therefore ties and wins on source order too. --------------------------------------------------------------- */ :where(.aims-legacy-chrome .headerdiv) > .navbar { display: block; position: relative; overflow: hidden; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; min-height: 0; } /* HeaderPS.ascx:30 ships `style="display: flex"` on this wrapper; HeaderAT.ascx:7 and HeaderHelpDesk.ascx:6 ship none. It is declared here rather than inline so the responsive blocks below — and a customer sheet — can reach it. NO `align-items`: legacy has none either, and centring the items would fight the logo's own legacy `margin-top` (10px/15px), pushing the brand mark below the middle of the bar. */ :where(.aims-legacy-chrome) .headerdiv .navbar-header { display: flex; margin: 0; } /* bootstrap-ms.css:3601-3603 — `.navbar-header { float: left }` from 768px up ONLY, which is what puts the brand on the left of the floated .signOutArea. Below 768px legacy leaves it in normal flow and places the buttons absolutely instead. (0,1,0), legacy's own weight. */ @media (min-width: 768px) { :where(.aims-legacy-chrome .headerdiv) .navbar-header { float: left; } } :where(.aims-legacy-chrome) .headerdiv .navbar-header .brand { display: block; text-decoration: none; } /* --------------------------------------------------------------- FAMILY A — the brand mark. Painted with background-image, never an and never a mask, precisely so a customer's `.logo.PS { background-image: … }` can reskin it. Geometry ported from avatier_bootstrap.css:358-386/422-426 (and mirrored in aims-legacy-auth.css for the login). The per-token artwork keeps whatever each module ships today, so this is a branding fix, not a re-skin — the one deliberate change is PS/HD, which moves off the masked SVG wordmark onto the same header-PM.png the login already renders. NO `background-position`: legacy declares none, so the initial `0% 0%` (left top) applies, which is what the `background-size: 50%/66.66%` phone and tablet rules below scale against. --------------------------------------------------------------- */ :where(.aims-legacy-chrome) .navbar .navbar-header .brand .logo { display: block; float: left; height: 60px; margin-left: 14px; background-repeat: no-repeat; /* Cancels the CSS-mask treatment aims-app.css applies to the masked module wordmarks (.aims-header.module-ps/.module-ca/.module-ie/.module-gr/.module-sso .aims-logo). A mask cannot be repainted by a customer: it clips whatever background-image they set to the Avatier silhouette, so `.logo.PS { background-image: … !important }` — the exact rule a rebranded install ships — would appear to do nothing. Reproducing legacy's plain background-image is what makes the swap work. */ -webkit-mask: none; mask: none; background-color: transparent; } :where(.aims-legacy-chrome) .navbar .navbar-header .brand .logo.PS, :where(.aims-legacy-chrome) .navbar .navbar-header .brand .logo.HD { width: 336px; background-image: url('../img/header-PM.png'); } :where(.aims-legacy-chrome) .navbar .navbar-header .brand .logo.AT { width: 360px; background-image: url('../img/Header-AT.png'); } :where(.aims-legacy-chrome) .navbar .navbar-header .brand .logo.Approver { width: 340px; background-image: url('../img/workflow-approver-60x.png'); } /* The Workflow Admin surface shares the Approver token (legacy has no separate one) but ships its own wordmark; keyed off the product class the layout already emits. */ :where(.aims-legacy-chrome) .module-wfadmin .navbar .navbar-header .brand .logo.Approver { background-image: url('../img/header-workflow-admin.png'); } /* The AIMS token — the blue fallback pair every module without its own legacy header control falls back to (avatier_bootstrap.css; mirrored from aims-legacy-auth.css:809-818, which already ports it for the sign-in shell). Reached by the per-module route twins of the chromeless-four pages: /config/security-question, /client/auth-selection, /gr/…, /ia/…, /sso/…, /reports/…, /store-manager/…. Without it those routes rendered an empty brand box in Classic. Dimensions are legacy's own for this artwork (237x60, not the 336px PM wordmark). */ :where(.aims-legacy-chrome) .navbar .navbar-header .brand .logo.AIMS { width: 237px; background-image: url('../img/header-avatier.png'); } :where(.aims-legacy-chrome) .headerdiv.AIMS .navbar { background-color: #0082C8; } /* --------------------------------------------------------------- D-5 — the administrator's UniversalBranding LOGGED_LOGO in CLASSIC. PSLayout paints the uploaded image as this element's `background-image`, INLINE, because that is the only weight that reliably beats the (0,4,0) per-token rules above from a stylesheet the customer's sheet is loaded after (and it still loses to the `!important` a rebranded install writes its own logo swap with — CVS ship exactly that). What the inline style CANNOT carry is the fitting, because the responsive blocks further down set `background-size: 50%/66.66%/100%` against the token's fixed box and would crop or stretch an arbitrary upload. `contain` at (0,5,0) wins over every one of those without needing `!important`, and the box keeps its token width so the header geometry is unchanged. Nothing here applies unless a LOGGED_LOGO row is enabled and has an image, so an install without a customer logo renders exactly as before. --------------------------------------------------------------- */ :where(.aims-legacy-chrome) .navbar .navbar-header .brand .logo.aims-logo-custom { background-size: contain; background-position: left center; } /* --------------------------------------------------------------- FAMILY A — the sub-header block (avatier_bootstrap.css:537-583). This is the geometry `.aims-header-info` used to supply. It is NOT a like-for-like swap: legacy's resting offset is `right: 55px` (widened to 250px only from 1025px up, and to 115px/165px/320px/370px for the HD and AT tokens), and it has no `top` at all — the block sits at its static position inside .navbar-header plus `margin-top: 5px`. Weights are legacy's, exactly: `.headerdiv .subHeader` is (0,2,0), the token variants are (0,3,0) and the HasRisk/WELCOME variants (0,4,0). CVS's `.headerdiv .subHeader { right: 90px }` therefore still ties the base rule and still wins on source order. --------------------------------------------------------------- */ :where(.aims-legacy-chrome) .headerdiv .subHeader { display: inline-block; text-align: right; margin-top: 5px; padding: 0; position: absolute; } :where(.aims-legacy-chrome) .headerdiv .subHeader { right: 55px; } :where(.aims-legacy-chrome) .headerdiv.HD .subHeader, :where(.aims-legacy-chrome) .headerdiv.AT .subHeader { right: 115px; } :where(.aims-legacy-chrome) .headerdiv.HD.WELCOME .subHeader, :where(.aims-legacy-chrome) .headerdiv.AT.WELCOME .subHeader { right: 65px; } /* HeaderAT.ascx.cs:123 appends " HasRisk" to .headerdiv when the risk button shows. */ :where(.aims-legacy-chrome) .headerdiv.HD.HasRisk .subHeader, :where(.aims-legacy-chrome) .headerdiv.AT.HasRisk .subHeader { right: 165px; } /* avatier_bootstrap.css:566. Inert against the shipped markup — HeaderAT.ascx:10 gives the AT sub-header the HD token, which the layouts reproduce — but it is part of the contract a customer may have copied, so it is transcribed rather than silently dropped. */ :where(.aims-legacy-chrome) .headerdiv .subHeader.AT { display: none; } :where(.aims-legacy-chrome) .headerdiv .subHeader span { background-color: transparent; } /* avatier_bootstrap.css:580 — the four white-on-product-colour header regions. */ :where(.aims-legacy-chrome) .headerdiv .subHeader, :where(.aims-legacy-chrome) .headerdiv .signOutArea, :where(.aims-legacy-chrome) .headerdiv .homeButtonArea, :where(.aims-legacy-chrome) .headerdiv .riskArea { color: White; } /* avatier_bootstrap.css:574 — the per-label defaults. These used to come from `.aims-header .aims-header-info span`; legacy states them on the label classes themselves, at (0,1,0), so a customer's `.LoggedInAs { … }` ties and wins on source order. */ :where(.aims-legacy-chrome .headerdiv) .PSAuthSuccess, :where(.aims-legacy-chrome .headerdiv) .PSAuthFail, :where(.aims-legacy-chrome .headerdiv) .LoggedInAs, :where(.aims-legacy-chrome .headerdiv) .LastLogin, :where(.aims-legacy-chrome .headerdiv) .ManagedUser { line-height: 25px; display: block; font-size: 16px; } /* --------------------------------------------------------------- FAMILY A — .signOutArea / .homeButtonArea / .riskArea / .hamburgerArea (avatier_bootstrap.css:432-484). THE WHOLE POINT OF THIS BLOCK IS ITS WEIGHT. Legacy places these buttons in NORMAL FLOW with `float: right` + margins, at (0,1,0) on a bare class selector. Reproducing it at (0,2,0) (`… .headerdiv .signOutArea`) would beat a customer's `.signOutArea { margin-right: 10px }` and put us straight back where we started, so the `.headerdiv` confinement lives inside the zero-specificity `:where()` instead. `.hamburgerArea` and `.riskButtonArea` are not emitted by any Blazor layout; they are transcribed because they share legacy's rules and a customer sheet may key off them. --------------------------------------------------------------- */ :where(.aims-legacy-chrome .headerdiv) .signOutArea, :where(.aims-legacy-chrome .headerdiv) .homeButtonArea, :where(.aims-legacy-chrome .headerdiv) .riskArea, :where(.aims-legacy-chrome .headerdiv) .hamburgerArea { float: right; margin-top: 16px; text-align: center; } :where(.aims-legacy-chrome .headerdiv) .signOutArea { margin-right: 15px; } /* avatier_bootstrap.css:442 — legacy pairs this with `#pnlRiskButton` (1,0,0), an ASP.NET panel id no Blazor layout emits; only the (0,1,0) half is transcribed. `.riskArea` is commented out in legacy's own rule and is left out here for the same reason. */ :where(.aims-legacy-chrome .headerdiv) .homeButtonArea { margin-right: 10px; } :where(.aims-legacy-chrome .headerdiv) .signOutArea:hover, :where(.aims-legacy-chrome .headerdiv) .homeButtonArea:hover, :where(.aims-legacy-chrome .headerdiv) .riskArea:hover { opacity: .75; text-decoration: none; cursor: pointer; } :where(.aims-legacy-chrome .headerdiv) .signOutArea .signOutText, :where(.aims-legacy-chrome .headerdiv) .homeButtonArea .homeText, :where(.aims-legacy-chrome .headerdiv) .riskArea .riskText { line-height: 16px; font-size: 14px; margin-top: 4px; } /* The two-declaration background-image is legacy's SVG-with-PNG-fallback idiom, kept verbatim: a browser that cannot parse the second declaration keeps the PNG. */ :where(.aims-legacy-chrome .headerdiv) .signOutArea .signOutImage, :where(.aims-legacy-chrome .headerdiv) .homeButtonArea .homeImage, :where(.aims-legacy-chrome .headerdiv) .riskButtonArea .riskImage, :where(.aims-legacy-chrome .headerdiv) .riskArea .riskImage { height: 40px; width: 41px; background-image: url(../img/sprite.desktop.png); background-image: url(../img/sprite.desktop.svg), none; display: inline-block; margin-left: 29px; margin-right: 30px; } :where(.aims-legacy-chrome .headerdiv) .homeButtonArea .homeImage, :where(.aims-legacy-chrome .headerdiv) .riskButtonArea .riskImage, :where(.aims-legacy-chrome .headerdiv) .riskArea .riskImage { margin-left: 0; margin-right: 0; } :where(.aims-legacy-chrome .headerdiv) .signOutArea .signOutImage { background-position: -4px -270px; } :where(.aims-legacy-chrome .headerdiv) .homeButtonArea .homeImage { background-position: -105px -270px; } /* avatier_bootstrap.css:482 pairs this with `#riskButtonArea` (1,0,0); only the class half is transcribed. */ :where(.aims-legacy-chrome .headerdiv) .riskArea .riskImage { background-position: -155px -270px; } /* --------------------------------------------------------------- FAMILY A — the twisted logo (avatier_bootstrap.css:488, 860-901). Legacy HIDES it below 1025px and only paints it on the desktop tier, per module token. aims-app.css instead showed it from 721px up and keyed the artwork off `.module-*`. The `aims-twisted-logo` token is therefore dropped from the classic family-A element and the legacy rules take over — nothing is lost, because every family-A token (PS, HD, AT, Approver) has legacy artwork, and the mapping resolves to the same files aims-app.css was using. --------------------------------------------------------------- */ :where(.aims-legacy-chrome) .headerdiv .twistedLogo { display: none; } /* --------------------------------------------------------------- The bootstrap-ms.css responsive utility classes the legacy sub-header rows carry. They are part of the DOM contract (a customer sheet targets `.hidden-xs`/`.hidden-ms` directly) and they replace the `.MainDesc { display: none !important }`-style substitutes the port had reached for. `ms` is an Avatier-only tier: 640-767px. --------------------------------------------------------------- */ @media (max-width: 767px) { :where(.aims-legacy-chrome) .hidden-xs { display: none; } } @media (min-width: 640px) and (max-width: 767px) { :where(.aims-legacy-chrome) .hidden-ms { display: none; } } /* --------------------------------------------------------------- `.hidden` — stylesheets/bootstrap-ms.css:5455-5456, VERBATIM, `!important` and all. A MISSING HOOK, not a deviation. Legacy links bootstrap-ms.css on every PS page, so `.hidden` is the mechanism legacy uses to hide markup: ConfigurePhone.aspx:166 ships `