landmark. Bootstrap's .visually-hidden-focusable handles the offscreen-until-focus clip; these rules supply position + skin. */ .skip-link { position: absolute; top: -100%; left: 1rem; z-index: 9999; padding: 0.5rem 1rem; background: var(--varial-primary, #1B3AA0); color: #fff; border-radius: var(--varial-radius-md, 0.375rem); font-weight: 600; text-decoration: none; } .skip-link:focus { top: 1rem; } /* Impersonating banner */ .impersonating-banner { background-color: #dc3545; color: #fff; text-align: center; padding: 6px 12px; font-size: 14px; position: sticky; top: 0; z-index: 9999; } .impersonating-banner form { display: inline; } .impersonating-banner-button { background: none; border: 1px solid #fff; color: #fff; padding: 2px 10px; border-radius: 3px; cursor: pointer; font-size: 14px; font-weight: 500; } .impersonating-banner-button:hover { background-color: rgba(255, 255, 255, 0.1); } /* Clickable table rows */ #runs-table tbody tr[data-href] { cursor: pointer; } /* ── Flush tables inside cards — round bottom corners to match card radius ── */ /* Targets .table inside a p-0 card-body (standard HTML table pattern). */ /* Rounds the two bottom corner cells so the card border-radius shows through. */ .card-body.p-0 .table > tbody > tr:last-child > td:first-child, .card-body.p-0 .table > tbody > tr:last-child > th:first-child { border-bottom-left-radius: var(--varial-radius-md, 0.375rem); } .card-body.p-0 .table > tbody > tr:last-child > td:last-child, .card-body.p-0 .table > tbody > tr:last-child > th:last-child { border-bottom-right-radius: var(--varial-radius-md, 0.375rem); } /* Auth utility classes (used in base_auth.html) */ .flex-center { display: flex; align-items: center; justify-content: center; } .min-vh-75 { min-height: 75vh; } .py-6 { padding-top: 3.5rem; padding-bottom: 3.5rem; } /* Review page */ .progress-bar-init { width: 0%; } .json-preview-content { max-height: 60vh; overflow-y: auto; font-size: 0.875rem; } /* Utility: enable text-truncate inside a fluid table cell. */ .table-cell-truncate { max-width: 0; } /* Fixed-size circular tile for an icon (Font Awesome glyph inside a tinted rounded-circle on dashboard / stats / list cards). Combine with Bootstrap's bg-*-subtle / bg-opacity utilities to colour the tile and a text-* utility on the inner for the glyph colour. */ .icon-circle-md { width: var(--varial-space-2xl, 3rem); height: var(--varial-space-2xl, 3rem); } /* ── Fast hover/focus tooltip utility ────────────────────────────────────── Native `title` tooltips have a ~1s browser delay; `[data-tip]` shows instantly (a generalised sibling of list-workspace's .ws-action[data-ws-tip]). Put it on any element — e.g. a segmented-control label — and the tip text (attr value) pops above it on hover/focus. display:none when hidden so it takes no layout. */ [data-tip] { position: relative; } [data-tip]::after { content: attr(data-tip); display: none; position: absolute; bottom: calc(100% + 0.35rem); left: 50%; transform: translateX(-50%); padding: 0.2rem 0.45rem; border-radius: var(--varial-radius-sm, 0.375rem); background: var(--chart-tech-black-coal, #1C1917); color: #fff; font-size: 0.7rem; font-weight: 400; line-height: 1.2; text-transform: none; letter-spacing: normal; white-space: nowrap; pointer-events: none; z-index: 30; } [data-tip]:hover::after, [data-tip]:focus-visible::after { display: block; }