/* ============================================================ Alerts, badges, the lightbox modal, the FAQ accordion, and the handful of small pieces that do not deserve a file each. The alert tints reproduce Bootstrap's shade()/tint() exactly: shade(c, 60%) is color-mix(in srgb, c 40%, #000) and tint(c, 80%) is color-mix(in srgb, c 20%, #fff). ============================================================ */ @layer components { .alert { --alert-fg: inherit; --alert-bg: transparent; --alert-border: transparent; position: relative; padding: var(--space-3); margin-bottom: var(--space-3); color: var(--alert-fg); background-color: var(--alert-bg); border: 1px solid var(--alert-border); border-radius: var(--radius); } .alert-success { --alert-fg: color-mix(in srgb, var(--color-success) 40%, #000); --alert-bg: color-mix(in srgb, var(--color-success) 20%, #fff); --alert-border: color-mix(in srgb, var(--color-success) 40%, #fff); } .alert-danger { --alert-fg: color-mix(in srgb, var(--color-danger) 40%, #000); --alert-bg: color-mix(in srgb, var(--color-danger) 20%, #fff); --alert-border: color-mix(in srgb, var(--color-danger) 40%, #fff); } .alert-warning { --alert-fg: color-mix(in srgb, var(--color-warning) 40%, #000); --alert-bg: color-mix(in srgb, var(--color-warning) 20%, #fff); --alert-border: color-mix(in srgb, var(--color-warning) 40%, #fff); } .alert-info { --alert-fg: color-mix(in srgb, var(--color-info) 40%, #000); --alert-bg: color-mix(in srgb, var(--color-info) 20%, #fff); --alert-border: color-mix(in srgb, var(--color-info) 40%, #fff); } .badge { display: inline-block; padding: 0.35em 0.65em; font-size: 0.75em; font-weight: 700; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: var(--radius); } .badge:empty { display: none; } /* Lightbox. The Stimulus controller drives visibility; this only describes the two states it toggles between. */ .modal { --modal-margin: var(--space-2); --modal-width: 500px; position: fixed; inset: 0; z-index: 1055; display: none; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; outline: 0; } .modal.show { display: block; } /* lightbox_controller puts this on while an image is open. Bootstrap 5 never carried a rule for it — it locked scrolling from JavaScript, and only for modals it had opened itself, which this one never was — so the class has been inert all along and the page scrolled behind the image. */ .modal-open { overflow: hidden; } .modal-dialog { position: relative; width: auto; margin: var(--modal-margin); pointer-events: none; } .modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - var(--modal-margin) * 2); } .modal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background-color: var(--color-body-bg); background-clip: padding-box; border: 1px solid color-mix(in srgb, var(--color-dark) 15%, transparent); border-radius: var(--radius-lg); outline: 0; } .modal-body { position: relative; flex: 1 1 auto; padding: var(--space-3); } .fade { transition: opacity 0.15s linear; } .fade:not(.show) { opacity: 0; } /* The FAQ accordion. Panels are plain disclosures; the Stimulus controller toggles .show and the button's aria-expanded. */ .accordion-item { color: var(--color-body); background-color: var(--color-body-bg); border: 1px solid color-mix(in srgb, var(--color-dark) 15%, transparent); } .accordion-item:first-of-type { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); } .accordion-item:last-of-type { border-bottom-right-radius: var(--radius); border-bottom-left-radius: var(--radius); } .accordion-item:not(:first-of-type) { border-top: 0; } .accordion-header { margin-bottom: 0; } .accordion-button { position: relative; display: flex; align-items: center; width: 100%; padding: var(--space-3) 1.25rem; font-size: var(--font-size); color: var(--color-body); text-align: left; background-color: var(--color-body-bg); border: 0; border-radius: 0; overflow-anchor: none; transition: color var(--transition), background-color var(--transition), border-radius var(--transition); } .accordion-button[aria-expanded="true"] { color: var(--primary-hover); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--color-dark) 15%, transparent); } .accordion-button::after { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-left: auto; content: ""; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-size: 1.25rem; transition: transform 0.2s ease-in-out; } .accordion-button[aria-expanded="true"]::after { transform: rotate(-180deg); } .accordion-button:focus-visible { outline: 0; box-shadow: 0 0 0 0.25rem var(--primary-ring); } .accordion-body { padding: var(--space-3) 1.25rem; } .accordion-flush .accordion-item { border-right: 0; border-left: 0; border-radius: 0; } .accordion-flush .accordion-item:first-child { border-top: 0; } .accordion-flush .accordion-item:last-child { border-bottom: 0; } /* Small change. */ .spinner-border { display: inline-block; flex-shrink: 0; width: 2rem; height: 2rem; vertical-align: -0.125em; border: 0.25em solid currentcolor; border-right-color: transparent; border-radius: 50%; animation: 0.75s linear infinite spinner-border; } .spinner-border-sm { width: 1rem; height: 1rem; border-width: 0.2em; } .list-unstyled { padding-left: 0; list-style: none; } .table { /* The HQ tables sit inside a glass card, so the cells carry their own opaque fill rather than letting the translucent card show through. */ --table-bg: var(--color-body-bg); --table-fg: #000; width: 100%; margin-bottom: var(--space-3); vertical-align: top; border-color: var(--color-border); } .table > :not(caption) > * > * { padding: var(--space-2); color: var(--table-fg); background-color: var(--table-bg); border-bottom-width: 1px; } .table > tbody { vertical-align: inherit; } .table > thead { vertical-align: bottom; } .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } .tab-content > .tab-pane { display: none; } .tab-content > .active { display: block; } /* Icons are inlined SVG sized to the text they sit beside. */ .icon { width: 1em; height: 1em; vertical-align: -0.125em; flex-shrink: 0; } } @keyframes spinner-border { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { @layer components { .fade, .accordion-button, .accordion-button::after { transition: none; } .spinner-border { animation-duration: 1.5s; } } } @media (min-width: 576px) { @layer components { .modal { --modal-margin: 1.75rem; } .modal-dialog { max-width: var(--modal-width); margin-inline: auto; } } } @media (min-width: 992px) { @layer components { .modal-xl { --modal-width: 800px; } } } @media (min-width: 1200px) { @layer components { .modal-xl { --modal-width: 1140px; } } }