/* * THE COOKIE NOTICE'S LAYOUT. It sets no colour, deliberately. * * The panel carries the theme's own `card` and the button carries `btn btn-primary`, so the * surface, the border and the whole light/dark pair come from the stylesheet that already knows * about both skins. Anything here that named a colour would be the one panel that looks wrong * after a theme change -- which is a defect this codebase has met before. * * ⚠️ A REAL STYLESHEET RATHER THAN INLINE STYLE, and the reason outlives the current CSP. The six * families that render this allow 'unsafe-inline' for styles today, so inline WOULD work -- but * that allowance is documented as temporary, and a panel that stops being styled the day it is * withdrawn is a trap laid for whoever withdraws it. * * ⚠️ NOT MODAL. Fixed to the bottom, above the page but with no overlay behind it: nothing is * covered, nothing is focus-trapped, the page stays usable. The only cookies here are the ones * that make signing in work, so there is nothing to hold the reader behind. */ /* * ⚠️ `.fx-cookie-notice.card`, NOT `.fx-cookie-notice`, AND THE SECOND CLASS IS LOAD-BEARING. * * The panel carries the theme's `.card` to inherit its surface and both skins -- and `.card` also * sets `position: relative` and `flex-direction: column`. Two single-class selectors tie on * specificity, so the cascade decides, and this sheet is linked BEFORE theme.min.css in every * family head: `.card` won. The panel rendered in normal flow, 919px tall, with the button stacked * under the text instead of fixed to the bottom of the viewport. * * Found by looking at it. Every structural check passed -- the element existed, the stylesheet had * loaded, the strings were right -- because none of them asks what `position` resolved to. * * Qualifying with `.card` beats it on specificity and does not depend on link order, which is the * part that matters: reordering the head to fix this would have left a rule that breaks the next * time anything moves. */ .fx-cookie-notice.card { position: fixed; z-index: 1040; /* under Bootstrap's modal (1055) and its backdrop: a real dialog outranks this. */ inset-inline: 1rem; inset-block-end: 1rem; margin-inline: auto; max-width: 46rem; padding: 1rem 1.25rem; display: flex; flex-direction: row; /* .card says column. */ flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; justify-content: space-between; } /* * inset-inline and margin-inline are logical properties, so the panel follows the document's * direction without a separate [dir="rtl"] block. The component sets dir explicitly from the * language preference, because is written by the i18n runtime and this must agree with * it rather than assume it. */ .fx-cookie-notice__text { flex: 1 1 22rem; min-width: 0; } .fx-cookie-notice__title { display: block; margin-block-end: .35rem; } .fx-cookie-notice__body { margin-block-end: .35rem; font-size: .875rem; } .fx-cookie-notice__body:last-child { margin-block-end: 0; } .fx-cookie-notice__action { flex: 0 0 auto; } /* * Narrow screens: the button goes full width under the text rather than being squeezed beside it. * A dismiss control that is hard to hit is how a notice stops being dismissable and starts being * something people put up with. */ @media (max-width: 36rem) { .fx-cookie-notice.card { inset-inline: .5rem; inset-block-end: .5rem; } .fx-cookie-notice__action { flex: 1 1 100%; } } /* Printing a page should not print a banner about cookies. */ @media print { .fx-cookie-notice.card { display: none; } }