/* ============================================================ Battle24 admin redesign (branch feat/admin-ui-redesign-v1). Loaded for the APP shell only, after components.css. Token-driven: improves every theme; tuned for `modern`. Never touches identifiers, routes or behaviour — visuals only. ============================================================ */ /* ---------- Redesign tokens (fallbacks for pre-modern themes) ---------- */ :root { --scb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18); --scb-shadow-md: 0 4px 16px -4px rgba(0, 0, 0, 0.35); --scb-shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, 0.45); --scb-topbar-bg: color-mix(in srgb, var(--color-surface-2) 88%, transparent); --scb-sidebar-bg: var(--color-surface-2); --scb-icon-chip: color-mix(in srgb, var(--color-text) 7%, transparent); --scb-ring: color-mix(in srgb, var(--color-accent) 28%, transparent); --scb-soft-danger: color-mix(in srgb, var(--bs-danger, #dc3545) 12%, var(--color-surface)); --scb-soft-success: color-mix(in srgb, var(--bs-success, #198754) 12%, var(--color-surface)); --scb-soft-warning: color-mix(in srgb, var(--bs-warning, #ffc107) 14%, var(--color-surface)); --scb-soft-info: color-mix(in srgb, var(--bs-info, #0dcaf0) 12%, var(--color-surface)); } /* ---------- Base ---------- */ body { font-size: 14.5px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: color-mix(in srgb, var(--color-accent) 28%, transparent); } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* ---------- Topbar ---------- */ .scb-topbar { position: sticky; top: 0; z-index: 1030; background: var(--scb-topbar-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); } .scb-topbar .navbar-brand { font-weight: 800; letter-spacing: -0.01em; } .scb-topbar .nav-link { border-radius: 999px; padding: 0.42rem 0.8rem !important; font-weight: 500; font-size: 0.875rem; color: var(--color-muted); transition: background 0.15s ease, color 0.15s ease; } .scb-topbar .nav-link:hover { background: var(--bb-hover); color: var(--color-text); } .scb-topbar .nav-link.active, .scb-topbar .nav-link[aria-current="page"] { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent-text); font-weight: 600; } .scb-topbar .nav-link i { margin-right: 0.15rem; } /* Global search in the topbar (progressive enhancement; filters sidebar). */ .scb-topbar-search { position: relative; min-width: 200px; max-width: 320px; flex: 1 1 auto; } .scb-topbar-search > i { position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); color: var(--color-muted); font-size: 0.9rem; pointer-events: none; } .scb-topbar-search input { width: 100%; padding: 0.42rem 0.8rem 0.42rem 2.2rem; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface-3); color: var(--color-text); font-size: 0.875rem; } .scb-topbar-search input::placeholder { color: var(--color-muted); } .scb-topbar-search input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--scb-ring); background: var(--color-surface); } /* User chip */ .scb-user-chip { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.25rem 0.7rem 0.25rem 0.25rem; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-size: 0.85rem; font-weight: 600; max-width: 220px; } .scb-user-chip:hover { border-color: var(--color-accent); color: var(--color-text); } .scb-user-chip .scb-avatar { width: 30px; height: 30px; font-size: 0.72rem; } .scb-user-chip span.scb-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* #1710 — between 992 and 1199 px the expanded top bar was wider than the window for an admin (54 px in EN at 992, 155 px in LT; up to 240 px on a live event page with a long name), and the page scrolled sideways. In that band a signed-in user's top links show their icon only (the label stays for screen readers, as .visually-hidden does, and in aria-label and title) and the user chip's name is cut shorter, with an ellipsis (the chip's title shows it whole). From 1200 px and below 992 nothing changes (#1714, below: except the Host panel link, and a bar that does not fit). Events has no icon outside the band. */ .scb-topbar .scb-nav-band-icon { display: none; } @media (min-width: 992px) and (max-width: 1199.98px) { .scb-topbar .scb-nav-compact .scb-nav-band-icon { display: inline; } .scb-topbar .scb-nav-compact i { margin-right: 0; } .scb-topbar .scb-nav-compact .scb-nav-label { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .scb-user-chip span.scb-user-name { max-width: 7.5rem; } } /* #1714 — from 1200 px the bar still did not fit for an admin or organizer: the Host panel link pushed a host past the window in LT (48 px at 1200 on admin pages, 82 px on the live event page, 103 px with a long name), and where it did not overflow, the links wrapped onto two lines (an admin's bar at 1200 in EN; a host's in LT up to 1440). The Host panel link (.scb-nav-icon-only) shows its icon only from 1200 px too (the band above already hides its label). And when the bar still does not fit on one line, the script at the end of layouts/main.php marks it .scb-topbar-compact, which gives it the band's compact form: icons only, the chip's name cut to 7.5rem. A bar that fits is not marked and draws what it drew before. */ @media (min-width: 1200px) { .scb-topbar .scb-nav-icon-only i, .scb-topbar.scb-topbar-compact .scb-nav-compact i { margin-right: 0; } .scb-topbar .scb-nav-icon-only .scb-nav-label, .scb-topbar.scb-topbar-compact .scb-nav-compact .scb-nav-label { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .scb-topbar.scb-topbar-compact .scb-nav-compact .scb-nav-band-icon { display: inline; } .scb-topbar.scb-topbar-compact .scb-user-chip span.scb-user-name { max-width: 7.5rem; } } /* #1714 — the live event page appends the event's name to the brand (live/event.php), which marks it .scb-live-brand. The name is capped with an ellipsis (its title has it whole), and when the bar is still too narrow the brand gives way instead of the page scrolling sideways or a link wrapping. The script that sets .scb-topbar-compact measures the bar with the brand held at its full width (.scb-topbar-measure), so the compact form comes first and the brand shrinks only past that. Below 992 px the bar wraps instead of shrinking, so there the brand takes only the room beside the menu button (flex-basis 0), which keeps that button on the first row (a phone put it on a row of its own, 106 px tall, before). */ .scb-topbar .bb-brand.scb-live-brand { min-width: 0; } .scb-topbar.scb-topbar-measure .bb-brand.scb-live-brand { flex-shrink: 0; } .scb-topbar .bb-brand.scb-live-brand ~ .navbar-collapse .nav-link { white-space: nowrap; } @media (max-width: 991.98px) { .scb-topbar .bb-brand.scb-live-brand { flex: 1 1 0; } } .scb-topbar .bb-brand .scb-live-brand-name { min-width: 0; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Avatar initials */ .scb-avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.02em; color: var(--color-on-accent); background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hot)); } /* Mobile sidebar button in the topbar */ .scb-nav-toggle { border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); border-radius: calc(var(--radius-sm) * 1.25); padding: 0.4rem 0.6rem; line-height: 1; } .scb-nav-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); } /* ---------- Sidebar ---------- */ /* Default sidebar width. It must NOT be declared on .bb-sidebar itself: a declaration on the element shadows the value inherited from html[data-layout="compact|comfortable"] and kills the Layout setting. */ html[data-layout="default"] { --layout-sidebar-w: 272px; } .bb-sidebar { background: var(--scb-sidebar-bg); padding: 0.75rem 0 1rem; } .bb-sidebar .list-group-item { padding: 0.52rem 0.7rem; margin: 1px 10px; border-radius: calc(var(--radius-sm) * 1.25); font-weight: 500; color: var(--color-muted); border: 1px solid transparent; } .bb-sidebar .list-group-item:hover { color: var(--color-text); } .bb-sidebar .list-group-item i:first-child { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: calc(var(--radius-sm) * 1.125); background: var(--scb-icon-chip); font-size: 0.95rem; opacity: 1; flex-shrink: 0; } /* #1186: the hot accent as text on the 11% tint was 3.4-4.4:1 on street, semidark, studio and live (Dev Scenarios; .text-light items take the page text below). The accent text shade reads there (5.0:1 or more). */ .bb-sidebar .list-group-item.active { background: color-mix(in srgb, var(--color-accent) 11%, transparent) !important; color: var(--color-accent-text) !important; font-weight: 700; border-color: color-mix(in srgb, var(--color-accent) 22%, transparent); } .bb-sidebar .list-group-item.active i:first-child { background: var(--color-accent); color: var(--color-on-accent); } .bb-sidebar-section { padding: 1rem 1.35rem 0.35rem; font-size: 0.66rem; letter-spacing: 1.4px; } .bb-sidebar-back { border-bottom: 1px solid var(--color-border) !important; border-radius: 0 !important; margin: 0 0 0.5rem !important; padding: 0.6rem 1.35rem !important; } /* Event context card */ .bb-sidebar-event-name { margin: 0.35rem 10px 0.6rem; padding: 0.7rem 0.8rem; background: var(--color-surface-3); border: 1px solid var(--color-border); border-radius: var(--radius); gap: 0.4rem; } .bb-sidebar-event-title { font-size: 0.86rem; font-weight: 700; line-height: 1.3; white-space: normal; } html[data-bs-theme="dark"] .bb-sidebar-event-name { background: color-mix(in srgb, var(--color-text) 4%, var(--color-surface-2)); } /* Sidebar footer */ .scb-sidebar-foot { margin: auto 10px 0; padding: 0.7rem 0.8rem 0.2rem; border-top: 1px solid var(--color-border); font-size: 0.72rem; color: var(--color-muted); display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; } #adminSidebar { display: flex; flex-direction: column; } #adminSidebar > .list-group { flex: 1 1 auto; } /* Collapsed rail keeps chips centred */ .bb-sidebar.collapsed .list-group-item i:first-child { width: 2rem; height: 2rem; } /* Sidebar live filter (driven by the topbar search box) */ #adminSidebar.scb-filtering .bb-sidebar-section, #adminSidebar.scb-filtering .bb-sidebar-group > summary, #adminSidebar.scb-filtering .scb-sidebar-foot { display: none; } #adminSidebar.scb-filtering .list-group-item.scb-hide { display: none; } #adminSidebar.scb-filtering .bb-sidebar-group:not([open]) { display: contents; } #adminSidebar.scb-filtering .bb-sidebar-group:not([open]) > a { display: flex !important; } /* ---------- Main content ---------- */ .bb-admin-main { padding: 1.5rem clamp(1rem, 3vw, 2.25rem) 3rem; } .scb-content { /* #1295 — no width cap: admin pages are mostly wide data tables, and a 1280px cap pushed the participants table's actions off screen on wide monitors while the rest of the screen stayed empty. */ margin: 0 auto; animation: scb-rise 0.25s ease; } @keyframes scb-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .scb-content { animation: none; } } /* ---------- Page head ---------- */ .scb-page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .scb-page-head h1, .scb-page-head h2 { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.015em; margin: 0; display: flex; align-items: center; gap: 0.6rem; } .scb-page-head h1 i:first-child, .scb-page-head h2 i:first-child { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: var(--radius); font-size: 1.15rem; color: var(--color-on-accent); background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hot)); box-shadow: var(--scb-shadow-sm); } .scb-page-sub { margin: 0.3rem 0 0; color: var(--color-muted); font-size: 0.9rem; } .scb-page-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } .scb-eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--color-accent-text); margin-bottom: 0.3rem; } /* Breadcrumbs */ .scb-crumbs { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--color-muted); margin-bottom: 0.9rem; } .scb-crumbs a { color: var(--color-muted); text-decoration: none; font-weight: 500; } .scb-crumbs a:hover { color: var(--color-accent); } .scb-crumbs .bi-chevron-right { font-size: 0.65rem; opacity: 0.6; } .scb-crumbs [aria-current="page"] { color: var(--color-text); font-weight: 700; } /* ---------- Stat cards ---------- */ .scb-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.8rem; margin-bottom: 1.25rem; } @media (max-width: 1200px) { .scb-stats { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 575.98px) { .scb-stats { grid-template-columns: repeat(2, 1fr); } } .scb-stat { display: flex; align-items: center; gap: 0.8rem; padding: 0.95rem 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: calc(var(--radius) * 1.1667); box-shadow: var(--scb-shadow-sm); text-decoration: none; color: var(--color-text); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; min-width: 0; } a.scb-stat:hover { transform: translateY(-2px); box-shadow: var(--scb-shadow-md); border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border)); color: var(--color-text); } .scb-stat-ic { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: var(--radius); font-size: 1.2rem; flex-shrink: 0; color: var(--color-on-accent); background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hot)); } .scb-stat-ic.is-blue { background: linear-gradient(135deg, #3B82F6, #1D4ED8); } .scb-stat-ic.is-green { background: linear-gradient(135deg, #10B981, #047857); } .scb-stat-ic.is-amber { background: linear-gradient(135deg, #F59E0B, #B45309); } .scb-stat-ic.is-violet { background: linear-gradient(135deg, #8B5CF6, #6D28D9); } .scb-stat-ic.is-cyan { background: linear-gradient(135deg, #06B6D4, #0E7490); } .scb-stat-num { font-size: 1.35rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .scb-stat-label { font-size: 0.76rem; font-weight: 600; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- Cards ---------- */ .bb-card { border: 1px solid var(--color-border); border-radius: calc(var(--radius) * 1.1667); box-shadow: var(--scb-shadow-sm); overflow: hidden; } .bb-card .card-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--color-border); } .bb-card .card-header h5 { font-size: 0.95rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; } .bb-card .card-header h5 i { color: var(--color-accent); } .bb-card .card-body { padding: 1.25rem; } .bb-card .card-footer { border-top: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-text) 2%, transparent); } /* Plain bootstrap cards in admin get the same treatment */ .bb-admin-main .card:not(.bb-card):not(.scb-stat) { border: 1px solid var(--color-border); border-radius: calc(var(--radius) * 1.1667); box-shadow: var(--scb-shadow-sm); } /* ---------- Tables ---------- */ /* #1295 — a wide table's row actions stay in view: the last column sticks to the right edge of its .table-responsive scroller, so Edit / Reject are reachable without scrolling the table sideways. The page background (tables are transparent) keeps the columns scrolling under it hidden. */ .table-responsive > .scb-sticky-actions > :is(thead, tbody) > tr > :last-child { position: sticky; right: 0; z-index: 1; background-color: var(--color-bg); border-left: 1px solid var(--color-border); } /* The header cell keeps the header row's tint (below), laid over the opaque page background so the scrolling headers stay hidden under it. */ .table-responsive > .scb-sticky-actions > thead > tr > :last-child { background-image: linear-gradient(color-mix(in srgb, var(--color-text) 3%, transparent), color-mix(in srgb, var(--color-text) 3%, transparent)); } /* #1598 — Admin → Battles on a phone: each battle is a card instead of a row 880 px wide (V27 measured 554 px off-screen at 360 in LT), where the actions sat at the far right and a sticky column could not keep both the pairing and the buttons in view. Line 1: round, number and status; line 2: the two sides and "vs"; then the winner, labelled, and the actions. The header row is kept for screen readers only (the markup carries the table roles, so a changed display does not drop them). The row carries the row tint (.table-danger on a live battle), so the gaps between cells are painted too. The hide-finished toggle sets each row's inline display to none or '' and so still works. */ @media (max-width: 575.98px) { .table-responsive > table.scb-battles-stack, .table-responsive > table.scb-battles-stack > tbody { display: block; } .table-responsive > table.scb-battles-stack > thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .table-responsive > table.scb-battles-stack > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; padding: 0.75rem 1rem; color: var(--bs-table-color); background-color: var(--bs-table-bg); border-bottom: 1px solid var(--bb-border-soft); } .table-responsive > table.scb-battles-stack > tbody > tr:last-child { border-bottom: 0; } /* Ends line 1: the round, number and status come first (order 0). */ .table-responsive > table.scb-battles-stack > tbody > tr::after { content: ''; flex: 0 0 100%; order: 1; } .table-responsive > table.scb-battles-stack > tbody > tr > td { display: block; padding: 0; border: 0; background: transparent; box-shadow: none; order: 2; min-width: 0; } .table-responsive > table.scb-battles-stack > tbody > tr > td:nth-child(-n+2) { order: 0; font-weight: 700; } .table-responsive > table.scb-battles-stack > tbody > tr > td:nth-child(2)::before { content: '#'; } .table-responsive > table.scb-battles-stack > tbody > tr > td:nth-child(7) { order: 0; margin-left: auto; text-align: end; } .table-responsive > table.scb-battles-stack > tbody > tr > td:is(:nth-child(3), :nth-child(5)) { flex: 1 1 0; } .table-responsive > table.scb-battles-stack > tbody > tr > td:nth-child(5) { text-align: end; } .table-responsive > table.scb-battles-stack > tbody > tr > td:nth-child(4) { flex: 0 0 auto; } .table-responsive > table.scb-battles-stack > tbody > tr > td:is(:nth-child(6), :nth-child(8)) { flex: 0 0 100%; } .table-responsive > table.scb-battles-stack > tbody > tr > td:nth-child(6) { order: 3; } .table-responsive > table.scb-battles-stack > tbody > tr > td:nth-child(6):empty { display: none; } .table-responsive > table.scb-battles-stack > tbody > tr > td[data-label]::before { content: attr(data-label) ': '; color: var(--color-muted); font-weight: 600; } .table-responsive > table.scb-battles-stack > tbody > tr > td:nth-child(8) { order: 4; } .table-responsive > table.scb-battles-stack > tbody > tr > td:nth-child(8) .btn-group { flex-wrap: wrap; } } /* #1598 — the same tint on the sticky naming column's header (components.css). #1657 — and on a .scb-sticky-name header cell. */ @media (max-width: 991.98px) { .table-responsive > .scb-sticky-first > thead > tr > :first-child:not([colspan]), .table-responsive > .scb-sticky-second > thead > tr > :nth-child(2):not([colspan]), .table-responsive > table > thead > tr > .scb-sticky-name { background-image: linear-gradient(color-mix(in srgb, var(--color-text) 3%, transparent), color-mix(in srgb, var(--color-text) 3%, transparent)); } } /* #1615 — a .scb-sticky-always column at every width: the header tint, and the row hover tint below (.table > tbody > tr:hover > td), which the sticky cell's opaque background would otherwise hide on a desktop. */ .table-responsive > .scb-sticky-always.scb-sticky-first > thead > tr > :first-child:not([colspan]), .table-responsive > .scb-sticky-always.scb-sticky-second > thead > tr > :nth-child(2):not([colspan]) { background-image: linear-gradient(color-mix(in srgb, var(--color-text) 3%, transparent), color-mix(in srgb, var(--color-text) 3%, transparent)); } .table-responsive > .scb-sticky-always.scb-sticky-first > tbody > tr:hover > td:first-child:not([colspan]), .table-responsive > .scb-sticky-always.scb-sticky-second > tbody > tr:hover > td:nth-child(2):not([colspan]) { background-image: linear-gradient(color-mix(in srgb, var(--color-accent) 5%, transparent), color-mix(in srgb, var(--color-accent) 5%, transparent)); } .bb-card .table-responsive { border-radius: 0 0 calc(var(--radius) * 1.1667) calc(var(--radius) * 1.1667); } /* #1607 — Admin → Heats, the combined leaderboard's header: its badges and the publish button wrap onto more rows, and a badge longer than the row ("Paskelbta — matoma tiesioginės transliacijos puslapyje", 343 px) wraps its own text, instead of running past the card's edge, where .bb-card's overflow: hidden cut them off with no way to reach them. A header that fits (every desktop) lays out as before. */ .scb-heats-lb-controls { min-width: 0; } .scb-heats-lb-controls > .badge { white-space: normal; text-align: start; } .table { margin-bottom: 0; } .table td, .table th { padding: 0.75rem 1rem; } .table > thead > tr > th { background: color-mix(in srgb, var(--color-text) 3%, transparent); border-bottom: 1px solid var(--color-border); white-space: nowrap; } .table > thead > tr > th:first-child { padding-left: 1.25rem; } .table > tbody > tr > td:first-child { padding-left: 1.25rem; } .table > tbody > tr { transition: background 0.12s ease; } .table > tbody > tr:hover > td { background: color-mix(in srgb, var(--color-accent) 5%, transparent); } .table a:not(.btn) { color: var(--color-text); font-weight: 600; text-decoration: none; } .table a:not(.btn):hover { color: var(--color-accent); } /* Numeric tabular alignment */ .table td.scb-num, .table th.scb-num { font-variant-numeric: tabular-nums; text-align: right; } /* #1607 — Admin → Judges fits its card at desktop widths: in LT at 1440 the one-line headers and badges ("Vyriausiasis teisėjas") made the table 101 px wider than the card, so the actions scrolled out of view. The headers, the head judge badge and the inactivity badge may now wrap; a category badge stays on one line (it names the category) and the two action buttons stay side by side; the cells' side padding is 0.75rem instead of 1rem (the first column keeps its 1.25rem edge). When there is room an auto-layout table still gives each column its one-line width, so EN only gains the narrower padding. After the .table rules, which set the headers nowrap. */ .scb-judges-table > thead > tr > th { white-space: normal; } /* #1657 — and from 1280 in LT too: it still scrolled 75 px at 1280 and 18 px at 1366 (689 px in a 614 and a 671 px card). The category badge may now wrap as well (its one-line "1vs1 Breaking Open" set the column at 153 px; it wraps only where the card is too narrow for it), and the side padding of every cell after the first is 0.5rem: 594 px at its narrowest in LT (522 in EN), so it fits from about 1250 px in LT and 1200 in EN (measured on the seeded fixture: 614/614 at 1280). Narrower, it scrolls with the judge's name in view (.scb-sticky-always). */ .scb-judges-table > :is(thead, tbody) > tr > :not(:first-child) { padding-left: 0.5rem; padding-right: 0.5rem; } .scb-judges-table > :is(thead, tbody) > tr > :first-child { padding-right: 0.75rem; } .scb-judges-table > tbody > tr > td .badge { white-space: normal; text-align: start; } .scb-judges-table > tbody > tr > td:last-child { white-space: nowrap; } /* #1615 — Admin → Scores, the combined leaderboard: a judge's column header (their name, "*" for the head judge) may wrap, so with three judges the table fits its card at 1440 (it scrolled 25 px in EN and 58 px in LT, two one-line names taking 139 and 127 px over scores 30 px wide). More judges, or a narrower window, still scroll, with the dancer column kept in view (.scb-sticky-always). After the .table rule that sets headers nowrap. */ .scb-scores-leaderboard > thead > tr > th.scb-lb-judge { white-space: normal; } /* #1657 — and below 1366: the cells' side padding is 0.75rem instead of 1rem (nine columns with the seeded two judges), so it is 591 px at its narrowest in LT and 558 in EN: it fits from about 1250 in LT (614/614 at 1280; it was 659/614) and from 1200 in EN (626/614 at 1280 before). Each judge adds a column of about 65 px, so a third judge scrolls it at 1280 again and a fifth at 1440: a larger panel, or a narrower window, still scrolls, with the dancer kept in view. The first column keeps its 1.25rem edge. */ .scb-scores-leaderboard > :is(thead, tbody) > tr > :not(:first-child) { padding-left: 0.75rem; padding-right: 0.75rem; } .scb-scores-leaderboard > :is(thead, tbody) > tr > :first-child { padding-right: 0.75rem; } /* #2198 — the Score Audit page's tables, one style: numbers to the right in tabular digits (a thead cell too), and a neutral box around a dancer's or a round's table instead of a fixed navy one. With no --scb-sticky-bg of its own, a sticky column takes the card's surface, which the box lets show through. */ .scb-score-audit .scb-num { text-align: right; font-variant-numeric: tabular-nums; } .scb-audit-box { padding: 1rem; border: 1px solid var(--bb-border-soft); border-radius: var(--radius); } /* The issue's printing edge case: the picker and the controls stay off paper, the audit takes the page's width and a wide table is not cut at a scroller. */ @media print { .scb-score-audit > .scb-audit-picker, .scb-score-audit .btn { display: none !important; } .scb-score-audit > .scb-audit-main { flex: 0 0 100%; max-width: 100%; } .scb-score-audit .table-responsive { overflow: visible; } .scb-score-audit .table > :is(thead, tbody) > tr > * { position: static !important; } .scb-audit-box { break-inside: avoid; } } /* ---------- User management directory and slide-over (#1540) ---------- */ .scb-user-directory { border: 1px solid var(--color-border); border-radius: var(--radius); } .scb-user-directory .table { --bs-table-hover-bg: transparent; --scb-user-row-hover: color-mix(in srgb, var(--color-text) 6%, transparent); /* #1584: a Site Settings colour override sets --scb-chip-border, the same mix held at 3:1 by ThemeEngine::chipBorder(). */ --scb-user-chip-border: var(--scb-chip-border, color-mix(in srgb, var(--color-muted) 70%, var(--color-border))); min-width: 760px; } .scb-user-directory th { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .scb-user-directory-row { cursor: pointer; } .scb-user-directory .table > tbody > tr.scb-user-directory-row > td { background: transparent; box-shadow: none; } .scb-user-directory .scb-user-directory-row:is(:hover, :focus-within) { background: var(--scb-user-row-hover); } .scb-user-directory .scb-user-directory-row :is(.scb-role-badge, .scb-feature-pill, .scb-status-pill, .scb-count-chip, .scb-user-id) { border-color: var(--scb-user-chip-border); } .scb-user-directory .scb-user-directory-row .scb-manage-user:not(:hover, :focus-visible) { border-color: var(--color-muted); color: var(--color-text); } .scb-user-directory .table td { padding-top: 0.55rem; padding-bottom: 0.55rem; vertical-align: middle; } .scb-user-directory .scb-user-cell-user { width: 34%; max-width: 0; } .scb-user-identity { display: flex; gap: 0.65rem; align-items: center; min-width: 200px; } .scb-user-identity-text { min-width: 0; overflow: hidden; } .scb-user-avatar { display: inline-grid; place-items: center; flex: 0 0 auto; width: 2rem; height: 2rem; border: 1px solid var(--color-border); border-radius: 50%; background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface-2)); color: var(--color-accent-text); font-size: 0.72rem; font-weight: 700; } .scb-user-avatar-lg { width: 2.75rem; height: 2.75rem; font-size: 0.9rem; } .scb-user-identity .scb-user-name { display: flex; align-items: baseline; gap: 0.3rem; min-width: 0; color: var(--color-text); font-weight: 600; white-space: nowrap; } .scb-user-name-text { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .scb-user-name .scb-user-id { flex: 0 0 auto; } .scb-user-email .scb-user-handle { margin-left: 0.2rem; } .scb-user-email { display: block; overflow: hidden; color: var(--color-muted); font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; } /* #1571 — the directory's email line never cuts the address. The address keeps its width and wraps only when it is longer than the cell, before the @domain first (an inline-block) and anywhere after that; the handle takes what is left of the line and is what ellipsises. The drawer header's small.scb-user-email keeps the one-line rule above. */ .scb-user-identity .scb-user-email { display: flex; white-space: normal; } .scb-user-identity .scb-user-email-addr { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; } .scb-user-identity .scb-user-email-domain { display: inline-block; max-width: 100%; } .scb-user-identity .scb-user-email .scb-user-handle { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .scb-user-directory td small { display: block; color: var(--color-muted); font-size: 0.76rem; } .scb-user-handle, .scb-user-id { color: var(--color-muted); font-family: var(--bs-font-monospace, monospace); font-size: 0.72rem; font-weight: 500; } .scb-user-id { border: 1px solid var(--color-border); border-radius: 0.25rem; padding: 0.05rem 0.22rem; } .scb-role-badge, .scb-feature-pill, .scb-status-pill, .scb-count-chip { display: inline-flex; align-items: center; gap: 0.3rem; border: 1px solid var(--color-border); border-radius: 999px; padding: 0.18rem 0.45rem; color: var(--color-text); font-size: 0.72rem; font-weight: 600; white-space: nowrap; } .scb-user-cell-role { white-space: normal; } .scb-user-cell-status, .scb-user-cell-actions { white-space: nowrap; } .scb-user-directory td.scb-user-secondary:nth-child(3) { max-width: 11rem; } .scb-user-ops { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; } .scb-user-cell-role > * + *, .scb-user-cell-status > .scb-status-pill + .scb-status-pill { margin-left: 0.25rem; } .scb-feature-pill { color: var(--color-muted); } .scb-dot { display: inline-block; flex: 0 0 auto; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--color-muted); } .scb-feature-pill .scb-dot { background: var(--bs-success, #198754); } .scb-host-pill { background: var(--scb-soft-warning); color: var(--color-text); } .scb-connection { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--color-muted); font-size: 0.76rem; white-space: nowrap; } .scb-connection.is-active .scb-dot { background: var(--bs-success, #198754); } .scb-connection.is-pending .scb-dot { background: var(--bs-warning, #ffc107); } .scb-connection.is-restricted { color: var(--color-danger-text); font-weight: 600; } .scb-connection.is-restricted .scb-dot { background: var(--bs-danger, #dc3545); } .scb-count-chip { color: var(--color-muted); font-weight: 500; } .scb-count-chip.has-count { color: var(--color-text); font-weight: 600; } .scb-status-pill.is-active { background: var(--scb-soft-success); color: var(--color-text); } .scb-status-pill.is-inactive { color: var(--color-muted); } .scb-status-pill.is-flag { background: var(--scb-soft-danger); color: var(--color-danger-text); } .scb-user-drawer-backdrop { position: fixed; z-index: 1045; inset: 0; background: rgba(0, 0, 0, 0.55); } .scb-user-drawer { position: fixed; z-index: 1050; top: 0; right: 0; width: min(420px, 100vw); height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--color-surface); border-left: 1px solid var(--color-border); box-shadow: var(--scb-shadow-lg); } .scb-user-drawer:focus { outline: none; } .scb-user-drawer-content { min-height: 100%; } .scb-user-drawer-header { display: flex; gap: 0.7rem; align-items: flex-start; padding: 1.15rem; border-bottom: 1px solid var(--color-border); } .scb-user-drawer-title { min-width: 0; color: var(--color-muted); font-size: 0.82rem; } .scb-user-drawer-header h2 { margin: 0 0 0.15rem; color: var(--color-text); font-size: 1.05rem; overflow-wrap: anywhere; } .scb-user-drawer-section { padding: 1rem 1.15rem; border-bottom: 1px solid var(--color-border); } .scb-user-drawer-section h3, .scb-user-drawer-features .scb-experimental-features > .fw-semibold { margin: 0 0 0.8rem; color: var(--color-muted); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .scb-user-drawer-features form { gap: 0.4rem !important; } .scb-user-drawer-features form button { margin-left: auto; } .scb-user-drawer-features .text-muted { margin-top: 0.35rem; font-size: 0.76rem; } .scb-user-drawer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .scb-user-drawer-grid > div, .scb-user-drawer-grid label { display: grid; gap: 0.18rem; color: var(--color-muted); font-size: 0.72rem; } .scb-user-drawer-grid strong { color: var(--color-text); font-size: 0.82rem; font-weight: 600; overflow-wrap: anywhere; } .scb-user-active-toggle { margin-top: 1rem; } .scb-user-active-toggle span { margin-left: 0.4rem; } .scb-user-danger-zone { background: var(--scb-soft-danger); } .scb-user-danger-zone h3 { color: var(--color-danger-text); } .scb-user-danger-zone form { display: inline-block; margin: 0 0.35rem 0.35rem 0; } body.scb-user-drawer-open { overflow: hidden; } @media (max-width: 992px) { .scb-user-directory .table { min-width: 620px; } .scb-user-directory .scb-user-secondary { display: none; } } @media (max-width: 768px) { .scb-user-drawer { width: 100vw; border-left: 0; } .scb-user-drawer .btn { min-height: 2.5rem; } .scb-user-directory .table { min-width: 0; } .scb-user-directory thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .scb-user-directory .table, .scb-user-directory tbody { display: block; } .scb-user-directory .scb-user-directory-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem 0.6rem; padding: 0.7rem; border-bottom: 1px solid var(--color-border); } .scb-user-directory .scb-user-directory-row > td, .scb-user-directory .scb-user-directory-row > td:first-child { display: block; padding: 0; border: 0; } .scb-user-directory .scb-user-directory-row > td.scb-user-secondary { display: none; } .scb-user-directory .scb-user-cell-user { width: auto; max-width: none; } .scb-user-directory .scb-user-cell-user { grid-column: 1; grid-row: 1; } .scb-user-directory .scb-user-cell-actions { grid-column: 2; grid-row: 1; align-self: center; } .scb-user-directory .scb-user-cell-role { grid-column: 1 / -1; grid-row: 2; } .scb-user-directory .scb-user-cell-status { grid-column: 1 / -1; grid-row: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; } .scb-user-directory .scb-user-cell-status > .scb-status-pill + .scb-status-pill { margin-left: 0; } .scb-user-directory td small { display: inline; } .scb-user-identity { min-width: 0; } .scb-user-identity .scb-user-name { flex-wrap: wrap; white-space: normal; } .scb-user-name-text { overflow-wrap: anywhere; } .scb-user-identity .scb-user-email { display: block; overflow: visible; text-overflow: clip; white-space: normal; } .scb-user-identity .scb-user-email-addr, .scb-user-identity .scb-user-email .scb-user-handle { display: block; margin-left: 0; overflow: visible; overflow-wrap: anywhere; white-space: normal; } .scb-user-directory .scb-manage-user { min-height: 2.5rem; } } /* Toolbar above tables: search + filters */ .scb-toolbar { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.9rem; } .scb-toolbar .form-control, .scb-toolbar .form-select { max-width: 280px; } .scb-search-wrap { position: relative; } .scb-search-wrap > i { position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); color: var(--color-muted); pointer-events: none; } .scb-search-wrap input { padding-left: 2.2rem; } /* Segmented filter */ .scb-segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface-3); } .scb-segmented .btn { border: 0; border-radius: 999px !important; font-weight: 600; font-size: 0.82rem; padding: 0.35rem 0.9rem; color: var(--color-muted); background: transparent; box-shadow: none; } .scb-segmented .btn:hover { color: var(--color-text); } .scb-segmented .btn.active, .scb-segmented .btn[aria-pressed="true"] { background: var(--color-surface); color: var(--color-text); box-shadow: var(--scb-shadow-sm); } /* Row action buttons: icon-first */ .btn-group-sm > .btn { padding: 0.32rem 0.5rem; } td .btn-group .btn { border-radius: var(--radius-sm) !important; margin-right: 2px; } td .btn-group .btn:last-child { margin-right: 0; } /* Bootstrap's dark-era utilities hardcode white, so the Appearance "text" colour never reached table cells or sidebar links. Follow the token. */ .table-dark { --bs-table-color: var(--color-text); --bs-table-striped-color: var(--color-text); --bs-table-hover-color: var(--color-text); --bs-table-active-color: var(--color-text); } .bb-sidebar .list-group-item.text-light { color: var(--color-text) !important; } /* ---------- Buttons ---------- */ .btn { font-weight: 600; border-radius: calc(var(--radius-sm) * 1.25); transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .btn:active { transform: translateY(1px); } .btn-primary { box-shadow: 0 2px 8px -2px var(--color-accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.18); } .btn-primary:hover { box-shadow: 0 6px 16px -4px var(--color-accent-glow); transform: translateY(-1px); } .btn-outline-secondary { --bs-btn-color: var(--color-muted); --bs-btn-border-color: var(--color-border); --bs-btn-hover-bg: var(--color-surface-3); --bs-btn-hover-border-color: var(--color-muted); --bs-btn-hover-color: var(--color-text); --bs-btn-active-bg: var(--color-surface-3); --bs-btn-active-border-color: var(--color-muted); } /* #1172 — the hover/active fill is Bootstrap's light info cyan (#0dcaf0) on every theme: white on it is 1.96:1, near-black 10.7:1 (as .btn-info has). */ .btn-outline-info { --bs-btn-hover-color: #000; --bs-btn-active-color: #000; } /* Danger soft button */ .btn-outline-danger { box-shadow: none; } /* Focus rings everywhere */ .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--scb-ring); } /* ---------- Badges: soft pills ---------- */ .badge { border-radius: 999px; font-size: 0.7rem; letter-spacing: 0.02em; padding: 0.32em 0.7em; border: 1px solid transparent; white-space: nowrap; } [class*="bb-status-"] { display: inline-flex; align-items: center; gap: 0.35em; font-weight: 700; text-transform: uppercase; font-size: 0.66rem; letter-spacing: 0.06em; } [class*="bb-status-"]::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; flex-shrink: 0; } .bb-status-draft, .bb-status-archived, .bb-status-pending, .bb-status-withdrawn, .bb-status-bye { background: color-mix(in srgb, var(--color-muted) 14%, var(--color-surface)); color: color-mix(in srgb, var(--color-muted) 80%, var(--color-text)); border-color: color-mix(in srgb, var(--color-muted) 30%, transparent); } .bb-status-registration, .bb-status-active, .bb-status-waitlist { background: color-mix(in srgb, var(--bs-blue, #0d6efd) 13%, var(--color-surface)); color: color-mix(in srgb, var(--bs-blue, #0d6efd) 75%, var(--color-text)); border-color: color-mix(in srgb, var(--bs-blue, #0d6efd) 32%, transparent); } .bb-status-running, .bb-status-live, .bb-status-rejected, .bb-status-tiebreaker { background: color-mix(in srgb, var(--color-accent) 13%, var(--color-surface)); color: var(--color-accent-hot); border-color: color-mix(in srgb, var(--color-accent) 35%, transparent); } /* #1193: these follow the page as painted (data-scb-scheme), not the theme's Bootstrap mode, so a background override that flips the page flips them: a dark theme painted white kept the light pink at 1.9:1. */ html[data-scb-scheme="dark"] .bb-status-running, html[data-scb-scheme="dark"] .bb-status-live, html[data-scb-scheme="dark"] .bb-status-rejected, html[data-scb-scheme="dark"] .bb-status-tiebreaker { color: color-mix(in srgb, var(--color-accent-hot) 55%, #fff); } html[data-bs-theme="dark"][data-scb-scheme="light"] .bb-status-running, html[data-bs-theme="dark"][data-scb-scheme="light"] .bb-status-live, html[data-bs-theme="dark"][data-scb-scheme="light"] .bb-status-rejected, html[data-bs-theme="dark"][data-scb-scheme="light"] .bb-status-tiebreaker { color: color-mix(in srgb, var(--color-accent-hot) 55%, #000); } /* #1155: the soft badges' text was 3.9-4.4:1 on semidark and studio (and the running badge under live's #E11D48 accent). Less hue, more text colour. */ html[data-scb-scheme="dark"] .bb-status-registration, html[data-scb-scheme="dark"] .bb-status-active, html[data-scb-scheme="dark"] .bb-status-waitlist { color: color-mix(in srgb, var(--bs-blue, #0d6efd) 55%, var(--color-text)); } html[data-scb-scheme="dark"] .bb-status-finished, html[data-scb-scheme="dark"] .bb-status-completed, html[data-scb-scheme="dark"] .bb-status-approved { color: color-mix(in srgb, var(--bs-success, #198754) 55%, var(--color-text)); } .bb-status-live::before, .bb-status-running::before { animation: scb-pulse 1.6s ease-in-out infinite; } @keyframes scb-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; } 50% { opacity: 0.55; } } @media (prefers-reduced-motion: reduce) { .bb-status-live::before, .bb-status-running::before { animation: none; } } .bb-status-finished, .bb-status-completed, .bb-status-approved { background: var(--scb-soft-success); color: color-mix(in srgb, var(--bs-success, #198754) 72%, var(--color-text)); border-color: color-mix(in srgb, var(--bs-success, #198754) 32%, transparent); } /* #1196: a tiebreaker round waiting for the judges' confirmation had no style of its own: Bootstrap's white badge text on the light themes' white card (1:1). It is a tie waiting on judges, like the head judge's decision. */ .bb-status-pending_head_judge, .bb-status-pending_confirmation { background: var(--scb-soft-warning); color: color-mix(in srgb, var(--bs-warning, #ffc107) 62%, var(--color-text)); border-color: color-mix(in srgb, var(--bs-warning, #ffc107) 40%, transparent); } /* On a page painted light the amber mix was 3.2-3.4:1 on its own tint; the warning text shade (the theme's, or the override's, #1169/#1173) reads. */ html[data-scb-scheme="light"] .bb-status-pending_head_judge, html[data-scb-scheme="light"] .bb-status-pending_confirmation { color: var(--color-warn-text); } /* ---------- Forms ---------- */ .form-control, .form-select { border-radius: calc(var(--radius-sm) * 1.25); padding: 0.55rem 0.85rem; border-width: 1px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .form-control:focus, .form-select:focus { box-shadow: 0 0 0 3px var(--scb-ring); } .form-label { font-weight: 600; font-size: 0.82rem; color: var(--color-text); } .form-text { color: var(--color-muted); font-size: 0.8rem; } .input-group > .form-control:not(:last-child), .input-group > .form-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group > .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } .form-check-input { width: 1.1em; height: 1.1em; border-color: var(--color-muted); } .form-check-input:checked { background-color: var(--color-accent); border-color: var(--color-accent); } .form-check-input:focus { box-shadow: 0 0 0 3px var(--scb-ring); } .form-switch .form-check-input { width: 2.2em; height: 1.25em; } /* ---------- Alerts ---------- */ .alert { border-radius: var(--radius); border: 1px solid var(--color-border); border-left-width: 4px; box-shadow: var(--scb-shadow-sm); } /* Icon + text row is opt-in (`.scb-alert`, the layout flash markup only). A blanket `.alert { display:flex }` turned every inline // inside the ~130 other alerts (host panel banners included) into separate flex items and dropped `text-center`. */ .alert.scb-alert { display: flex; gap: 0.6rem; align-items: flex-start; } .alert-dismissible .btn-close { padding: 1rem; } .alert-success { border-left-color: var(--bs-success); } .alert-danger { border-left-color: var(--bs-danger); } .alert-warning { border-left-color: var(--bs-warning); } .alert-info { border-left-color: var(--bs-info); } /* #1193: and on a dark theme painted light, whose Bootstrap alerts stayed dark. */ html:is([data-bs-theme="light"], [data-scb-scheme="light"]) .alert-success { background: var(--scb-soft-success); color: var(--color-text); } html:is([data-bs-theme="light"], [data-scb-scheme="light"]) .alert-danger { background: var(--scb-soft-danger); color: var(--color-text); } html:is([data-bs-theme="light"], [data-scb-scheme="light"]) .alert-warning { background: var(--scb-soft-warning); color: var(--color-text); } html:is([data-bs-theme="light"], [data-scb-scheme="light"]) .alert-info { background: var(--scb-soft-info); color: var(--color-text); } /* ---------- Modals ---------- */ .modal-content { border-radius: calc(var(--radius) * 1.3333); border: 1px solid var(--color-border); box-shadow: var(--scb-shadow-lg); overflow: hidden; } .modal-header { border-bottom: 1px solid var(--color-border); padding: 1rem 1.35rem; } .modal-header .modal-title { font-weight: 700; font-size: 1.05rem; } .modal-body { padding: 1.35rem; } .modal-footer { border-top: 1px solid var(--color-border); padding: 0.9rem 1.35rem; background: color-mix(in srgb, var(--color-text) 2%, transparent); } /* ---------- Dropdowns ---------- */ .dropdown-menu { border-radius: var(--radius); border: 1px solid var(--color-border); box-shadow: var(--scb-shadow-lg); padding: 0.4rem; font-size: 0.88rem; } .dropdown-item { border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; font-weight: 500; } .dropdown-item i { margin-right: 0.4rem; opacity: 0.7; } /* ---------- List groups ---------- */ .list-group-item { border-color: var(--color-border); } .bb-admin-main .list-group-item-action:hover { background: var(--bb-hover); } .bb-card > .list-group:last-child .list-group-item:last-child { border-radius: 0 0 calc(var(--radius) * 1.1667) calc(var(--radius) * 1.1667); } /* ---------- Quick-action tiles ---------- */ .scb-qa-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; padding: 1rem 1.25rem 1.25rem; } .scb-qa { display: flex; align-items: center; gap: 0.65rem; padding: 0.75rem 0.8rem; border: 1px solid var(--color-border); border-radius: var(--radius); text-decoration: none; color: var(--color-text); font-weight: 600; font-size: 0.85rem; background: var(--color-surface); transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .scb-qa:hover { color: var(--color-text); border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border)); box-shadow: var(--scb-shadow-sm); transform: translateY(-1px); } .scb-qa i { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: calc(var(--radius-sm) * 1.25); background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent-hot); font-size: 1rem; flex-shrink: 0; } .scb-qa.is-danger { color: var(--color-danger-text); } .scb-qa.is-danger i { background: var(--scb-soft-danger); color: var(--color-danger-text); } /* ---------- Timeline list (recent registrations etc.) ---------- */ .scb-timeline { padding: 0.4rem 0; } .scb-timeline-item { display: flex; gap: 0.75rem; padding: 0.7rem 1.25rem; border-bottom: 1px solid var(--color-border); align-items: flex-start; } .scb-timeline-item:last-child { border-bottom: 0; } .scb-timeline-item .scb-avatar { width: 36px; height: 36px; } .scb-timeline-body { min-width: 0; flex: 1 1 auto; } .scb-timeline-name { font-weight: 700; font-size: 0.9rem; } .scb-timeline-name small { display: block; font-weight: 500; font-size: 0.78rem; color: var(--color-muted); } .scb-timeline-meta { font-size: 0.78rem; color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- Network pill ---------- */ #networkStatus { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.8rem !important; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface) !important; box-shadow: var(--scb-shadow-sm); } #networkStatusText { font-weight: 600; font-size: 0.78rem; } /* ---------- Empty states ---------- */ .scb-empty { text-align: center; padding: 2.5rem 1.5rem; color: var(--color-muted); } .scb-empty i { font-size: 2.2rem; display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: calc(var(--radius) * 1.6667); background: var(--color-surface-3); margin-bottom: 0.8rem; } .scb-empty h6 { color: var(--color-text); font-weight: 700; } .scb-empty p { font-size: 0.88rem; margin-bottom: 1rem; } /* ---------- Pagination ---------- */ .pagination { gap: 0.25rem; } .page-link { border-radius: calc(var(--radius-sm) * 1.125) !important; border: 1px solid var(--color-border); color: var(--color-text); background: var(--color-surface); font-weight: 600; min-width: 2.3rem; text-align: center; } .page-link:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-surface); } .page-item.active .page-link { background: var(--color-accent); border-color: var(--color-accent); } /* ---------- Nav pills / tabs in content ---------- */ .bb-admin-main .nav-pills { gap: 0.3rem; } .bb-admin-main .nav-pills .nav-link { font-weight: 600; } .nav-tabs { border-color: var(--color-border); } .nav-tabs .nav-link { color: var(--color-muted); font-weight: 600; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 0.6rem 1rem; } .nav-tabs .nav-link:hover { color: var(--color-text); } .nav-tabs .nav-link.active { color: var(--color-accent-text); background: transparent; border-bottom-color: var(--color-accent); } /* ---------- Scrollbars ---------- */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--color-muted) 45%, transparent); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--color-muted) 70%, transparent); background-clip: content-box; } /* ---------- Appearance theme cards ---------- */ .scb-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 0.7rem; } .scb-theme-card { cursor: pointer; margin: 0; } .scb-theme-card input { position: absolute; opacity: 0; pointer-events: none; } .scb-theme-card-face { display: flex; flex-direction: column; gap: 0.55rem; height: 100%; padding: 0.55rem; border: 2px solid var(--color-border); border-radius: calc(var(--radius) * 1.1667); background: var(--color-surface); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .scb-theme-card input:checked + .scb-theme-card-face { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--scb-ring); } .scb-theme-card input:focus-visible + .scb-theme-card-face { outline: 2px solid var(--color-accent-hot); outline-offset: 2px; } .scb-theme-card:hover .scb-theme-card-face { border-color: var(--color-muted); } .scb-theme-mini { display: flex; height: 72px; border-radius: calc(var(--radius-sm) * 1.25); overflow: hidden; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); } .scb-theme-mini-rail { width: 22%; opacity: 0.22; } .scb-theme-mini-body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 0; } .scb-theme-mini-dot { width: 28px; height: 8px; border-radius: 99px; } .scb-theme-mini-line { height: 6px; border-radius: 99px; opacity: 0.35; } .scb-theme-mini-line.is-short { width: 62%; } .scb-theme-card-copy { display: flex; flex-direction: column; gap: 0.1rem; padding: 0 0.2rem 0.15rem; } .scb-theme-card-name { font-weight: 800; font-size: 0.9rem; color: var(--color-text); } .scb-theme-card-hint { font-size: 0.75rem; color: var(--color-muted); line-height: 1.3; } .scb-color-chip { width: 2.75rem; height: 2.75rem; } /* A submit button that is the only control in a grid column (Add member, Save, and the same pattern elsewhere) was forced into a narrow column. The label wrapped onto a second line, or the column dropped to the next row. Let the fields share the leftover space and size the button to its label so it stays on the same row as the inputs. */ .bb-admin-main form.row:has(> [class*="col-"] > .btn:only-child) > [class*="col-"]:not(:has(> .btn)) { flex: 1 1 0; width: auto; min-width: 8rem; } .bb-admin-main form.row > [class*="col-"]:has(> .btn:only-child), .bb-admin-main form.row > [class*="col-"]:has(> .btn:first-child:last-child) { flex: 0 0 auto; width: auto; max-width: 100%; /* Sit next to the inputs, not under the help text of a taller column. Bootstrap's .align-self-end is !important, so this has to be too. */ align-self: flex-start !important; /* Gutter margin plus the label line, so the button meets the inputs. */ margin-top: calc(var(--bs-gutter-y, 0px) + 1.62rem); } /* #1627 — Admin → Users on a phone: the rule above put search, role filter and Filter button on one row, and the role select cut off three LT role names ("Visi vaidmenys", "Administratorius", "Organizatorius") at 390 px. The search takes a row of its own; the select shares the next with the button. An id: the rule above is the more specific. V30 measures it. */ @media (max-width: 767.98px) { #userFilterForm > .scb-user-filter-q { flex: 0 0 100%; width: 100%; } } .bb-admin-main form.row > [class*="col-"] > .btn:only-child { width: auto; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-height: 44px; } /* ---------- Density: comfortable app layout gets airier cards ---------- */ html[data-layout="comfortable"] .bb-admin-main { padding: 2rem clamp(1.25rem, 4vw, 3rem) 4rem; } html[data-layout="comfortable"] .scb-stats { gap: 1rem; } html[data-layout="compact"] .bb-admin-main { padding: 1rem 1.25rem 2rem; } html[data-layout="compact"] .table td, html[data-layout="compact"] .table th { padding: 0.5rem 0.75rem; } /* ---------- Responsive ---------- */ @media (max-width: 991.98px) { .scb-topbar-search { display: none; } .scb-user-chip span.scb-user-name { display: none; } .scb-user-chip { padding: 0.25rem; } .scb-page-head h1, .scb-page-head h2 { font-size: 1.2rem; } .scb-qa-grid { grid-template-columns: 1fr 1fr; } #adminSidebar { padding-top: 0.75rem; } /* #1013: the #adminSidebar flex rule above outranks layout-app.css's mobile `.bb-sidebar { display: none }`, so the drawer stays shut until toggled. The open drawer keeps layout-app.css's `.bb-sidebar.open` rule, which the host-fullscreen and projector hide rules can still override. */ #adminSidebar:not(.open) { display: none; } .scb-sidebar-foot { display: none; } } @media (max-width: 575.98px) { .scb-qa-grid { grid-template-columns: 1fr; } .scb-page-actions { width: 100%; } .scb-page-actions .btn { flex: 1 1 auto; } } .scb-part-view { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .scb-part-view-label { color: var(--color-muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .scb-part-view-options { display: inline-flex; padding: 0.15rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); } .scb-part-view-item { padding: 0.2rem 0.7rem; border-radius: var(--radius); color: var(--color-muted); font-size: 0.8rem; font-weight: 600; text-decoration: none; white-space: nowrap; } .scb-part-view-item:hover { color: var(--color-text); background: var(--color-surface-2); } .scb-part-view-item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; } .scb-part-view-item.is-active { background: var(--color-accent); color: var(--color-on-accent); } .scb-part-toolbar { align-items: flex-start; } .scb-part-payments { position: relative; } .scb-part-payments > summary { list-style: none; } .scb-part-payments > summary::-webkit-details-marker { display: none; } .scb-part-payments-body { position: absolute; z-index: 20; top: calc(100% + 0.35rem); left: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-start; width: min(380px, calc(100vw - 2rem)); padding: 0.85rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); box-shadow: var(--scb-shadow-lg); } .scb-part-summary { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .scb-part-kpis { display: flex; flex-wrap: wrap; gap: 0.35rem; } .scb-part-kpi { display: inline-flex; align-items: baseline; gap: 0.35rem; padding: 0.35rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-muted); font-size: 0.8rem; line-height: 1.2; /* #1627 — a link (the no-JS filter), drawn as the button it was. */ text-decoration: none; cursor: pointer; } .scb-part-kpi:hover { border-color: var(--color-muted); color: var(--color-muted); } .scb-part-kpi[aria-pressed="true"] { border-color: var(--color-accent); box-shadow: inset 0 -2px 0 var(--color-accent); } .scb-part-kpi-num { color: var(--color-text); font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; } .scb-part-progress { position: relative; flex: 1 1 220px; min-width: 200px; height: 2.1rem; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); } .scb-part-progress-fill { position: absolute; inset: 0 auto 0 0; background: var(--scb-soft-success); transition: width var(--transition); } .scb-part-progress-text { position: relative; display: flex; align-items: center; height: 100%; padding: 0 0.75rem; color: var(--color-text); font-size: 0.8rem; font-weight: 600; } .scb-part-filterbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .scb-part-search { flex: 0 1 200px; min-width: 160px; } /* #1627 — on a desktop the search box gives way before anything wraps: it is 200 px wide while the row has room, and narrows (to 120 px at most) so the "Showing N / M" count stays on the row while a filter is on. LT's "Rodoma 8 / 11" wrapped under the fee roster's bar at 1440. A flex row breaks on the flex basis, so the basis is the floor and the box grows back to its 200 px. Phones keep their own rule below. #1647 — the count sits at the bar's right end. When it still does not fit (no JS, LT, the fee roster: a Filter button and a Clear link where JS has one Clear button; or longer names in real data) it moves, whole, onto a row of its own, right-aligned under the bar, and the controls keep theirs. The auto margin takes only the space the search box leaves: it grows to its 200 px first. V30 checks both cases. #1668 — the search box still gave way to the count: with JS, LT, the fee roster, it narrowed from 200 to about 150 px as a filter turned on. The controls are now one flex item (.scb-part-filterbar-controls) and the count another. The bar breaks on the controls' full width, the search box at its 200 px, so the count joins their row only where that leaves it room, and otherwise takes a row of its own, right-aligned. Inside, the search box still narrows for the controls themselves (no JS, LT, the fee roster: the Filter button and the Clear link), as before. An empty count is no flex item, so it takes no gap. V30 checks that turning a filter on moves no control. Phones have their rule below. #1677 — but where the count took a row of its own (LT, the fee roster at 1440; every phone) that row came with the filter, and the table moved down by about 28 px. The count now always shows ("Showing 11 / 11" with no filter, participants.php), so its row is there from the start and never empty. Its digits are tabular: a filtered count is never wider than the unfiltered one (it has no more digits), so it never leaves the row it started on. V30 checks that the bar's bottom stays put. */ .scb-part-filterbar-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; flex: 1 1 auto; min-width: 0; } #filteredCount { white-space: nowrap; margin-inline-start: auto; font-variant-numeric: tabular-nums; } @media (min-width: 769px) { .scb-part-search { flex: 1 1 120px; min-width: 120px; max-width: 200px; width: 200px; } } .scb-part-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } /* #1593 — a filter select is as wide as its longest option, within the row. The 150 px cap cut off a picked category name ("Fee Open 1vs1 (solo_bboy)") and the LT fee options; tools/lib/select_clip.mjs (V30) measures them. */ .scb-part-filters .form-select { width: auto; max-width: 100%; } .scb-part-filters-toggle { display: none; } /* #1609 — the filter bar is a GET form (.scb-nojs-only, components.css, shows its Filter button and Clear link without JS). The server marks the rows, and By category groups, that do not match the query .scb-part-srv-out, hidden without JS; with JS filterTable() hides rows, as before. !important: a phone lays the rows out as cards with more specific display rules. */ .no-js .scb-part-srv-out { display: none !important; } .scb-part-roster { border: 1px solid var(--color-border); border-radius: var(--radius); } .scb-part-roster > .scb-part-table > thead > tr > th { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); } .scb-part-roster > .scb-part-table > tbody > tr > td.scb-part-cell { padding-top: 0.5rem; padding-bottom: 0.5rem; vertical-align: middle; } .scb-part-roster > .scb-part-table > :is(thead, tbody) > tr > .scb-part-col-select { width: 2.5rem; padding-right: 0.25rem; } .scb-part-roster .scb-part-col-next, .scb-part-roster .scb-part-col-door { white-space: nowrap; } .scb-part-roster .scb-part-col-dancer { width: 34%; max-width: 0; } /* #1593 — max-width: 0 (for the meta line's ellipsis) lets the auto table take the dancer column down to its padding when another column grows, and the no-JS forms grow the door column: the name then ran one letter per line. A floor keeps the column readable; below it, .table-responsive scrolls. */ @media (min-width: 769px) { .scb-part-roster .scb-part-col-dancer { min-width: 10rem; } } .scb-part-row { cursor: pointer; } .scb-part-row.is-inactive .scb-part-name { color: var(--color-muted); text-decoration: line-through; } .scb-part-row.is-inactive .scb-user-avatar { opacity: 0.55; } .scb-part-identity { display: flex; gap: 0.65rem; align-items: center; min-width: 0; } .scb-part-identity-text { min-width: 0; } .scb-part-name-line { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; } .scb-part-name { color: var(--color-text); font-weight: 600; overflow-wrap: anywhere; } .scb-part-meta { display: block; overflow: hidden; color: var(--color-muted); font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; } .scb-part-flag { display: inline-flex; align-items: center; gap: 0.2rem; color: var(--color-muted); font-size: 0.72rem; font-weight: 600; } .scb-part-flag.is-warn { color: var(--color-warn-text); } .scb-part-flag.is-info { color: var(--color-info-text); } .scb-part-flag.is-note { color: var(--color-info-text); } .scb-part-chip, .scb-part-state { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0.1rem 0.15rem 0.1rem 0; padding: 0.18rem 0.5rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface-2); color: var(--color-text); font-size: 0.72rem; font-weight: 600; white-space: nowrap; } .scb-part-chip.is-current { border-color: var(--color-muted); } .scb-part-chip-seed { padding: 0 0.3rem; border-radius: 999px; background: var(--color-surface-3); color: var(--color-text); font-variant-numeric: tabular-nums; } .scb-part-state.is-checked_in { background: var(--scb-soft-success); color: var(--color-ok-text); } .scb-part-state.is-approved { background: var(--scb-soft-info); color: var(--color-info-text); } .scb-part-state.is-pending, .scb-part-state.is-waitlisted { background: var(--scb-soft-warning); color: var(--color-warn-text); } .scb-part-state.is-no_show, .scb-part-state.is-rejected { background: var(--scb-soft-danger); color: var(--color-danger-text); } .scb-part-state.is-withdrawn { color: var(--color-muted); } .scb-part-state.is-flag { background: var(--scb-soft-warning); color: var(--color-warn-text); } .scb-part-state.is-special { color: var(--color-warn-text); } .scb-part-next { display: flex; gap: 0.4rem; align-items: center; justify-content: flex-end; } .scb-part-primary { display: inline-flex; gap: 0.35rem; align-items: center; } .scb-part-primary form { margin: 0; } /* #1593 — without JS, a row's