/* Copyright 2026 i8i.io | ManageTicketsDashboard.css */ /* The dashboard's and the admin page's one stylesheet - the frame, the bar, the stock, every dialog, and the shell */ /* System: ManageTickets | Part: Dashboard */ /* No breakpoint stands in this file. Every layout answers its own container's width: a row of parts wraps where its own width runs short, a grid fills as many columns as fit by repeat(auto-fill, minmax(min(100%, Width), 1fr)) - auto-fit where a short set of parts should stretch over the whole row, as the tiles, the board, and the ways to add do - and the rail and the stock share a row by their flex bases, the stock dropping under the rail where the frame runs narrow. */ /* =============================================================== */ /* FONTS */ /* =============================================================== */ /* Inter, the variable font that carries every weight */ @font-face { font-family: "Inter"; src: url("../Font/Inter.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } /* =============================================================== */ /* TOKENS */ /* =============================================================== */ /* ....... Shared ....... */ /* The values the dashboard's parts share, each written once - the homepage's colors and type */ .i8iManageTicketsDashboardFrame { /* ... Color ... */ --i8i-ManageTickets-Color-Ground: oklch(0.162 0.021 275.1); --i8i-ManageTickets-Color-Panel: oklch(0.211 0.036 275.7); --i8i-ManageTickets-Color-Line: oklch(0.295 0.049 276.5); --i8i-ManageTickets-Color-Edge: oklch(0.540 0.050 277.0); --i8i-ManageTickets-Color-Ink: oklch(0.958 0.020 279.9); --i8i-ManageTickets-Color-Muted: oklch(0.713 0.051 277.4); --i8i-ManageTickets-Color-Accent: oklch(0.546 0.251 262.4); --i8i-ManageTickets-Color-Glow: oklch(0.776 0.149 226.6); --i8i-ManageTickets-Color-Good: oklch(0.773 0.153 163.2); --i8i-ManageTickets-Color-Alert: oklch(0.725 0.175 349.8); --i8i-ManageTickets-Color-Warn: oklch(0.820 0.140 78.0); --i8i-ManageTickets-Color-OnAccent: oklch(1 0 0); --i8i-ManageTickets-Color-OnGlow: oklch(0.162 0.021 275.1); --i8i-ManageTickets-Color-Hover: oklch(from var(--i8i-ManageTickets-Color-Accent) calc(l - 0.06) c h); --i8i-ManageTickets-Color-Lift: oklch(from var(--i8i-ManageTickets-Color-Panel) calc(l + 0.04) c h); --i8i-ManageTickets-Color-Field: oklch(from var(--i8i-ManageTickets-Color-Ground) calc(l + 0.02) c h); --i8i-ManageTickets-Color-Wash: oklch(from var(--i8i-ManageTickets-Color-Accent) l c h / 0.22); --i8i-ManageTickets-Color-Mist: oklch(from var(--i8i-ManageTickets-Color-Glow) l c h / 0.14); --i8i-ManageTickets-Color-AlertWash: oklch(from var(--i8i-ManageTickets-Color-Alert) l c h / 0.16); --i8i-ManageTickets-Color-WarnWash: oklch(from var(--i8i-ManageTickets-Color-Warn) l c h / 0.16); --i8i-ManageTickets-Color-Shade: oklch(0 0 0 / 0.55); --i8i-ManageTickets-Color-Badge: linear-gradient(90deg, var(--i8i-ManageTickets-Color-Glow), var(--i8i-ManageTickets-Color-Good)); /* ... Text ... */ --i8i-ManageTickets-Text-Font: "Inter", system-ui, sans-serif; --i8i-ManageTickets-Text-Mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; --i8i-ManageTickets-Text-Body: var(--i8i-FontSize-014); --i8i-ManageTickets-Text-Small: var(--i8i-FontSize-012); --i8i-ManageTickets-Text-Lead: var(--i8i-FontSize-018); --i8i-ManageTickets-Text-Head: var(--i8i-FontSize-016); --i8i-ManageTickets-Text-Title: var(--i8i-FontSize-024); --i8i-ManageTickets-Text-Big: var(--i8i-FontSize-022); --i8i-ManageTickets-Text-Height: var(--i8i-LineHeight-150); --i8i-ManageTickets-Text-Tight: var(--i8i-LineHeight-120); --i8i-ManageTickets-Text-Bold: var(--i8i-FontWeight-800); --i8i-ManageTickets-Text-Semi: var(--i8i-FontWeight-600); --i8i-ManageTickets-Text-Squeeze: var(--i8i-LetterSpacing-n025); --i8i-ManageTickets-Text-Spread: var(--i8i-LetterSpacing-075); /* ... Space ... */ --i8i-ManageTickets-Space-Page: clamp(var(--i8i-Padding-016), calc(var(--i8i-Padding-008) + var(--i8i-cqi-005)), var(--i8i-Padding-024)); --i8i-ManageTickets-Space-Group: var(--i8i-Gap-24); --i8i-ManageTickets-Space-Stack: var(--i8i-Gap-16); --i8i-ManageTickets-Space-Near: var(--i8i-Gap-12); --i8i-ManageTickets-Space-Tight: var(--i8i-Gap-08); --i8i-ManageTickets-Space-Hair: var(--i8i-Gap-04); --i8i-ManageTickets-Space-Box: var(--i8i-Padding-016); --i8i-ManageTickets-Space-Cell: var(--i8i-Padding-008) var(--i8i-Padding-012); --i8i-ManageTickets-Space-Control: var(--i8i-Padding-008) var(--i8i-Padding-016); --i8i-ManageTickets-Space-Small: var(--i8i-Padding-004) var(--i8i-Padding-012); --i8i-ManageTickets-Space-Badge: var(--i8i-Padding-004) var(--i8i-Padding-012); --i8i-ManageTickets-Space-Chip: var(--i8i-Padding-002) var(--i8i-Padding-008); --i8i-ManageTickets-Space-Bar: var(--i8i-Padding-012); --i8i-ManageTickets-Space-Target: var(--i8i-Height-0040); --i8i-ManageTickets-Space-TargetSmall: var(--i8i-Height-0032); --i8i-ManageTickets-Space-Dot: var(--i8i-Width-0008); --i8i-ManageTickets-Space-Width: var(--i8i-MaxWidth-1600); --i8i-ManageTickets-Space-Cover: var(--i8i-svb-100); --i8i-ManageTickets-Space-Spread: 999; /* ... Shape ... */ --i8i-ManageTickets-Shape-Round: var(--i8i-BorderRadius-Full); --i8i-ManageTickets-Shape-Corner: var(--i8i-BorderRadius-12); --i8i-ManageTickets-Shape-CornerSmall: var(--i8i-BorderRadius-08); --i8i-ManageTickets-Shape-BorderWidth: var(--i8i-BorderWidth-02); /* ... Motion ... */ --i8i-ManageTickets-Motion-Duration: var(--i8i-Duration-00150); --i8i-ManageTickets-Motion-Curve: var(--i8i-Ease-Out); --i8i-ManageTickets-Motion-Delay: 0s; /* ... Depth ... */ --i8i-ManageTickets-Depth-Bar: var(--i8i-zIndex-0010); --i8i-ManageTickets-Depth-Menu: var(--i8i-zIndex-0020); --i8i-ManageTickets-Depth-Bulk: var(--i8i-zIndex-0010); --i8i-ManageTickets-Depth-Shadow: 0 var(--i8i-Padding-008) var(--i8i-Padding-032) oklch(0 0 0 / 0.45); } /* ....... Frame ....... */ /* The values the page in flow uses */ .i8iManageTicketsDashboardFrame { /* ... Color ... */ --i8i-ManageTickets-Frame-Color-Surface: var(--i8i-ManageTickets-Color-Ground); --i8i-ManageTickets-Frame-Color-Ink: var(--i8i-ManageTickets-Color-Ink); /* ... Text ... */ --i8i-ManageTickets-Frame-Text-Font: var(--i8i-ManageTickets-Text-Font); --i8i-ManageTickets-Frame-Text-Size: var(--i8i-ManageTickets-Text-Body); --i8i-ManageTickets-Frame-Text-Height: var(--i8i-ManageTickets-Text-Height); /* ... Space ... */ --i8i-ManageTickets-Frame-Space-Cover: var(--i8i-ManageTickets-Space-Cover); --i8i-ManageTickets-Frame-Space-Width: var(--i8i-ManageTickets-Space-Width); --i8i-ManageTickets-Frame-Space-Padding: var(--i8i-ManageTickets-Space-Page); } /* ....... Bar ....... */ /* The values the bar across the top uses */ .i8iManageTicketsDashboardFrame { /* ... Color ... */ --i8i-ManageTickets-Bar-Color-Line: var(--i8i-ManageTickets-Color-Line); --i8i-ManageTickets-Bar-Color-Surface: oklch(from var(--i8i-ManageTickets-Color-Ground) l c h / 0.92); --i8i-ManageTickets-BarBrand-Color-Ink: var(--i8i-ManageTickets-Color-Ink); --i8i-ManageTickets-BarBrandLabelBeta-Color-Surface: var(--i8i-ManageTickets-Color-Badge); --i8i-ManageTickets-BarBrandLabelBeta-Color-Ink: var(--i8i-ManageTickets-Color-OnGlow); --i8i-ManageTickets-BarSearch-Color-Key: var(--i8i-ManageTickets-Color-Muted); --i8i-ManageTickets-BarLabelDot-Color-Surface: var(--i8i-ManageTickets-Color-Alert); /* ... Text ... */ --i8i-ManageTickets-BarBrandTextName-Size: var(--i8i-ManageTickets-Text-Lead); --i8i-ManageTickets-BarBrandTextName-Weight: var(--i8i-ManageTickets-Text-Bold); --i8i-ManageTickets-BarBrandTextName-Spacing: var(--i8i-ManageTickets-Text-Squeeze); --i8i-ManageTickets-BarBrandLabelBeta-Text-Size: var(--i8i-ManageTickets-Text-Small); --i8i-ManageTickets-BarBrandLabelBeta-Text-Weight: var(--i8i-ManageTickets-Text-Bold); --i8i-ManageTickets-BarBrandLabelBeta-Text-Spacing: var(--i8i-ManageTickets-Text-Spread); --i8i-ManageTickets-BarBrandLabelBeta-Text-Height: var(--i8i-ManageTickets-Text-Tight); --i8i-ManageTickets-BarTextBusiness-Weight: var(--i8i-ManageTickets-Text-Semi); /* ... Space ... */ --i8i-ManageTickets-Bar-Space-Gap: var(--i8i-ManageTickets-Space-Near); --i8i-ManageTickets-Bar-Space-Padding: var(--i8i-ManageTickets-Space-Bar); --i8i-ManageTickets-BarBrand-Space-Gap: var(--i8i-ManageTickets-Space-Tight); --i8i-ManageTickets-BarBrand-Space-Height: var(--i8i-ManageTickets-Space-Target); --i8i-ManageTickets-BarBrandLabelBeta-Space-Padding: var(--i8i-ManageTickets-Space-Badge); --i8i-ManageTickets-BarSearch-Space-Basis: var(--i8i-MinWidth-200); --i8i-ManageTickets-BarMenuList-Space-Width: var(--i8i-MinWidth-240); --i8i-ManageTickets-BarMenuList-Space-Top: 0px; --i8i-ManageTickets-BarMenuList-Space-End: 0px; --i8i-ManageTickets-BarMenuTextShort-Space-Width: var(--i8i-MaxWidth-0200); /* ... Shape ... */ --i8i-ManageTickets-Bar-Shape-BorderWidth: var(--i8i-ManageTickets-Shape-BorderWidth); --i8i-ManageTickets-BarBrandLabelBeta-Shape-Corner: var(--i8i-ManageTickets-Shape-Round); /* ... Depth ... */ --i8i-ManageTickets-Bar-Depth-Order: var(--i8i-ManageTickets-Depth-Bar); } /* ....... Main ....... */ /* The values the working area, its states, and its summary use */ .i8iManageTicketsDashboardFrame { /* ... Color ... */ --i8i-ManageTickets-MainTextWho-Color-Ink: var(--i8i-ManageTickets-Color-Muted); --i8i-ManageTickets-Card-Color-Surface: var(--i8i-ManageTickets-Color-Panel); --i8i-ManageTickets-Card-Color-Line: var(--i8i-ManageTickets-Color-Line); --i8i-ManageTickets-SummaryGroup-Color-Surface: var(--i8i-ManageTickets-Color-Panel); --i8i-ManageTickets-SummaryGroup-Color-Line: var(--i8i-ManageTickets-Color-Line); --i8i-ManageTickets-SummaryGroupSample-Color-Line: var(--i8i-ManageTickets-Color-Warn); --i8i-ManageTickets-SummaryGroupHeadLabel-Color-Ink: var(--i8i-ManageTickets-Color-Muted); --i8i-ManageTickets-SummaryGroupHeadTextSample-Color-Ink: var(--i8i-ManageTickets-Color-Warn); --i8i-ManageTickets-SummaryGroupFacts-Color-Line: var(--i8i-ManageTickets-Color-Line); --i8i-ManageTickets-SummaryGroupFactsButtonFact-Color-Surface: var(--i8i-ManageTickets-Color-Panel); --i8i-ManageTickets-SummaryGroupFactsButtonFact-Color-Hover: var(--i8i-ManageTickets-Color-Lift); --i8i-ManageTickets-SummaryGroupFactsButtonFact-Color-Muted: var(--i8i-ManageTickets-Color-Muted); --i8i-ManageTickets-SummaryGroupFactsButtonFact-Color-Good: var(--i8i-ManageTickets-Color-Good); /* ... Text ... */ --i8i-ManageTickets-MainTextTitle-Size: var(--i8i-ManageTickets-Text-Title); --i8i-ManageTickets-MainTextTitle-Weight: var(--i8i-ManageTickets-Text-Bold); --i8i-ManageTickets-SummaryGroupFactsButtonFact-Text-Value: var(--i8i-ManageTickets-Text-Big); /* ... Space ... */ --i8i-ManageTickets-Main-Space-Gap: var(--i8i-ManageTickets-Space-Group); --i8i-ManageTickets-Main-Space-Padding: var(--i8i-ManageTickets-Space-Group); --i8i-ManageTickets-Card-Space-Padding: var(--i8i-ManageTickets-Space-Box); --i8i-ManageTickets-Summary-Space-Gap: var(--i8i-ManageTickets-Space-Near); --i8i-ManageTickets-Summary-Space-Turn: var(--i8i-Width-1050); --i8i-ManageTickets-Summary-Space-Spread: var(--i8i-ManageTickets-Space-Spread); --i8i-ManageTickets-SummaryGroup-Space-Padding: var(--i8i-ManageTickets-Space-Tight); --i8i-ManageTickets-SummaryGroup-Space-Gap: var(--i8i-ManageTickets-Space-Hair); --i8i-ManageTickets-SummaryGroupHead-Space-Padding: var(--i8i-ManageTickets-Space-Tight); --i8i-ManageTickets-SummaryGroupFacts-Space-Turn: var(--i8i-Width-0600); --i8i-ManageTickets-SummaryGroupFactsButtonFact-Space-Padding: var(--i8i-ManageTickets-Space-Tight); --i8i-ManageTickets-SummaryGroupFactsButtonFact-Space-Gap: var(--i8i-ManageTickets-Space-Hair); --i8i-ManageTickets-Rail-Space-Basis: var(--i8i-MinWidth-280); --i8i-ManageTickets-Stock-Space-Basis: var(--i8i-MaxWidth-0480); /* ... Shape ... */ --i8i-ManageTickets-Card-Shape-Corner: var(--i8i-ManageTickets-Shape-Corner); --i8i-ManageTickets-SummaryGroup-Shape-Corner: var(--i8i-ManageTickets-Shape-Corner); --i8i-ManageTickets-SummaryGroup-Shape-BorderWidth: var(--i8i-ManageTickets-Shape-BorderWidth); --i8i-ManageTickets-SummaryGroupFacts-Shape-Line: var(--i8i-ManageTickets-Shape-BorderWidth); --i8i-ManageTickets-SummaryGroupFacts-Shape-Corner: var(--i8i-ManageTickets-Shape-CornerSmall); } /* ....... Stock ....... */ /* The values the stock's groups, tables, board, and ticket cards use */ .i8iManageTicketsDashboardFrame { /* ... Color ... */ --i8i-ManageTickets-StockTable-Color-Head: var(--i8i-ManageTickets-Color-Muted); --i8i-ManageTickets-StockRow-Color-Hover: var(--i8i-ManageTickets-Color-Lift); --i8i-ManageTickets-StockRowPicked-Color-Surface: var(--i8i-ManageTickets-Color-Wash); --i8i-ManageTickets-StockRowAttention-Color-Line: var(--i8i-ManageTickets-Color-Warn); --i8i-ManageTickets-Board-Color-Surface: var(--i8i-ManageTickets-Color-Ground); --i8i-ManageTickets-CardTicket-Color-Surface: var(--i8i-ManageTickets-Color-Lift); --i8i-ManageTickets-CardTicket-Color-Tear: var(--i8i-ManageTickets-Color-Edge); --i8i-ManageTickets-CardTicketListed-Color-Line: var(--i8i-ManageTickets-Color-Good); --i8i-ManageTickets-CardTicketDraft-Color-Line: var(--i8i-ManageTickets-Color-Muted); --i8i-ManageTickets-CardTicketScheduled-Color-Line: var(--i8i-ManageTickets-Color-Glow); --i8i-ManageTickets-CardTicketSold-Color-Line: var(--i8i-ManageTickets-Color-Accent); --i8i-ManageTickets-CardTicketExpired-Color-Line: var(--i8i-ManageTickets-Color-Alert); --i8i-ManageTickets-CardTicketPartly-Color-Line: var(--i8i-ManageTickets-Color-Warn); /* ... Space ... */ --i8i-ManageTickets-Board-Space-Column: var(--i8i-MinWidth-240); --i8i-ManageTickets-Board-Space-Gap: var(--i8i-ManageTickets-Space-Near); --i8i-ManageTickets-Board-Space-Turn: calc(3 * var(--i8i-ManageTickets-Board-Space-Column) + 2 * var(--i8i-ManageTickets-Board-Space-Gap)); --i8i-ManageTickets-Board-Space-Spread: var(--i8i-ManageTickets-Space-Spread); --i8i-ManageTickets-Board-Space-Height: var(--i8i-MinHeight-200); --i8i-ManageTickets-StockPrice-Space-Width: var(--i8i-Width-0080); --i8i-ManageTickets-StockCellWords-Space-Width: var(--i8i-MinWidth-080); --i8i-ManageTickets-StockTable-Space-Cell: var(--i8i-Padding-008); /* ... Shape ... */ --i8i-ManageTickets-CardTicket-Shape-Stripe: var(--i8i-BorderWidth-04); } /* ....... Controls ....... */ /* The values the buttons, fields, tabs, and labels use */ .i8iManageTicketsDashboardFrame { /* ... Color ... */ --i8i-ManageTickets-ButtonPrimary-Color-Surface: var(--i8i-ManageTickets-Color-Accent); --i8i-ManageTickets-ButtonPrimary-Color-Hover: var(--i8i-ManageTickets-Color-Hover); --i8i-ManageTickets-ButtonPrimary-Color-Ink: var(--i8i-ManageTickets-Color-OnAccent); --i8i-ManageTickets-ButtonQuiet-Color-Surface: var(--i8i-ManageTickets-Color-Panel); --i8i-ManageTickets-ButtonQuiet-Color-Hover: var(--i8i-ManageTickets-Color-Lift); --i8i-ManageTickets-ButtonQuiet-Color-Line: var(--i8i-ManageTickets-Color-Line); --i8i-ManageTickets-ButtonDanger-Color-Surface: var(--i8i-ManageTickets-Color-AlertWash); --i8i-ManageTickets-ButtonDanger-Color-Ink: var(--i8i-ManageTickets-Color-Alert); --i8i-ManageTickets-Control-Color-Focus: var(--i8i-ManageTickets-Color-Ink); --i8i-ManageTickets-Control-Color-Selected: var(--i8i-ManageTickets-Color-Accent); --i8i-ManageTickets-Check-Color-Rest: var(--i8i-ManageTickets-Color-Edge); --i8i-ManageTickets-Check-Color-Surface: var(--i8i-ManageTickets-Color-Ground); --i8i-ManageTickets-Check-Color-Checked: var(--i8i-ManageTickets-Color-Accent); --i8i-ManageTickets-Check-Color-Mark: var(--i8i-ManageTickets-Color-OnAccent); --i8i-ManageTickets-Input-Color-Surface: var(--i8i-ManageTickets-Color-Field); --i8i-ManageTickets-Input-Color-Line: var(--i8i-ManageTickets-Color-Line); --i8i-ManageTickets-Input-Color-Invalid: var(--i8i-ManageTickets-Color-Alert); --i8i-ManageTickets-Input-Color-Holder: var(--i8i-ManageTickets-Color-Muted); --i8i-ManageTickets-Tabs-Color-Pressed: var(--i8i-ManageTickets-Color-Wash); --i8i-ManageTickets-Choices-Color-Selected: var(--i8i-ManageTickets-Color-Accent); --i8i-ManageTickets-LabelTag-Color-Surface: var(--i8i-ManageTickets-Color-Mist); --i8i-ManageTickets-LabelTag-Color-Ink: var(--i8i-ManageTickets-Color-Glow); --i8i-ManageTickets-LabelWarn-Color-Surface: var(--i8i-ManageTickets-Color-WarnWash); --i8i-ManageTickets-LabelWarn-Color-Ink: var(--i8i-ManageTickets-Color-Warn); --i8i-ManageTickets-LabelSample-Color-Surface: var(--i8i-ManageTickets-Color-WarnWash); --i8i-ManageTickets-LabelSample-Color-Ink: var(--i8i-ManageTickets-Color-Warn); --i8i-ManageTickets-LabelLock-Color-Ink: var(--i8i-ManageTickets-Color-Muted); --i8i-ManageTickets-LabelStatusListed-Color-Ink: var(--i8i-ManageTickets-Color-Good); --i8i-ManageTickets-LabelStatusDraft-Color-Ink: var(--i8i-ManageTickets-Color-Muted); --i8i-ManageTickets-LabelStatusScheduled-Color-Ink: var(--i8i-ManageTickets-Color-Glow); --i8i-ManageTickets-LabelStatusSold-Color-Ink: var(--i8i-ManageTickets-Color-Ink); --i8i-ManageTickets-LabelStatusExpired-Color-Ink: var(--i8i-ManageTickets-Color-Alert); --i8i-ManageTickets-LabelStatusPartly-Color-Ink: var(--i8i-ManageTickets-Color-Warn); --i8i-ManageTickets-Menu-Color-Surface: var(--i8i-ManageTickets-Color-Panel); --i8i-ManageTickets-Menu-Color-Line: var(--i8i-ManageTickets-Color-Line); --i8i-ManageTickets-Menu-Color-Hover: var(--i8i-ManageTickets-Color-Lift); --i8i-ManageTickets-Menu-Color-Ink: var(--i8i-ManageTickets-Color-Ink); /* ... Text ... */ --i8i-ManageTickets-Button-Text-Weight: var(--i8i-ManageTickets-Text-Semi); --i8i-ManageTickets-FieldLabel-Text-Size: var(--i8i-ManageTickets-Text-Small); --i8i-ManageTickets-Label-Text-Size: var(--i8i-ManageTickets-Text-Small); /* ... Space ... */ --i8i-ManageTickets-Button-Space-Padding: var(--i8i-ManageTickets-Space-Control); --i8i-ManageTickets-Button-Space-Height: var(--i8i-ManageTickets-Space-Target); --i8i-ManageTickets-ButtonSmall-Space-Padding: var(--i8i-ManageTickets-Space-Small); --i8i-ManageTickets-ButtonSmall-Space-Height: var(--i8i-ManageTickets-Space-TargetSmall); --i8i-ManageTickets-Input-Space-Padding: var(--i8i-ManageTickets-Space-Cell); --i8i-ManageTickets-Input-Space-Height: var(--i8i-ManageTickets-Space-Target); --i8i-ManageTickets-InputShort-Space-Width: var(--i8i-Width-0080); --i8i-ManageTickets-InputPick-Space-Width: var(--i8i-Width-0024); --i8i-ManageTickets-InputPick-Space-Height: var(--i8i-Height-0024); --i8i-ManageTickets-Check-Space-Size: var(--i8i-Width-0020); --i8i-ManageTickets-Check-Space-MarkWidth: var(--i8i-Width-0010); --i8i-ManageTickets-Check-Space-MarkHeight: var(--i8i-Height-0006); --i8i-ManageTickets-Check-Space-Dot: var(--i8i-Width-0008); --i8i-ManageTickets-Grid-Space-Column: var(--i8i-MinWidth-180); --i8i-ManageTickets-GridWide-Space-Column: var(--i8i-MinWidth-280); --i8i-ManageTickets-Choices-Space-Column: var(--i8i-MinWidth-180); --i8i-ManageTickets-Label-Space-Padding: var(--i8i-ManageTickets-Space-Chip); --i8i-ManageTickets-Menu-Space-Padding: var(--i8i-Padding-008); --i8i-ManageTickets-Menu-Space-Gap: var(--i8i-ManageTickets-Space-Tight); --i8i-ManageTickets-DropdownButton-Space-Gap: var(--i8i-ManageTickets-Space-Tight); --i8i-ManageTickets-DropdownList-Space-Gap: var(--i8i-Gap-08); --i8i-ManageTickets-DropdownList-Space-Height: var(--i8i-MaxHeight-0320); --i8i-ManageTickets-DropdownList-Space-Room: var(--i8i-MaxHeight-0320); --i8i-ManageTickets-DropdownList-Space-Top: 0px; --i8i-ManageTickets-DropdownList-Space-Bottom: 0px; --i8i-ManageTickets-DropdownList-Space-Left: 0px; --i8i-ManageTickets-DropdownList-Space-Width: 0px; --i8i-ManageTickets-DropdownListButtonOption-Space-Mark: var(--i8i-Width-0016); /* ... Shape ... */ --i8i-ManageTickets-Control-Shape-Corner: var(--i8i-ManageTickets-Shape-CornerSmall); --i8i-ManageTickets-Control-Shape-BorderWidth: var(--i8i-ManageTickets-Shape-BorderWidth); --i8i-ManageTickets-Label-Shape-Corner: var(--i8i-ManageTickets-Shape-Round); --i8i-ManageTickets-Check-Shape-Corner: var(--i8i-BorderRadius-04); --i8i-ManageTickets-Check-Shape-Round: var(--i8i-ManageTickets-Shape-Round); --i8i-ManageTickets-Menu-Shape-Corner: var(--i8i-ManageTickets-Shape-Corner); /* ... Motion ... */ --i8i-ManageTickets-Control-Motion-Duration: var(--i8i-ManageTickets-Motion-Duration); --i8i-ManageTickets-Control-Motion-Curve: var(--i8i-ManageTickets-Motion-Curve); --i8i-ManageTickets-Control-Motion-Delay: var(--i8i-ManageTickets-Motion-Delay); } /* ....... Dialog ....... */ /* The values every dialog uses */ .i8iManageTicketsDashboardFrame { /* ... Color ... */ --i8i-ManageTickets-Dialog-Color-Surface: var(--i8i-ManageTickets-Color-Panel); --i8i-ManageTickets-Dialog-Color-Ink: var(--i8i-ManageTickets-Color-Ink); --i8i-ManageTickets-Dialog-Color-Line: var(--i8i-ManageTickets-Color-Line); --i8i-ManageTickets-Dialog-Color-Shade: var(--i8i-ManageTickets-Color-Shade); /* ... Space ... */ --i8i-ManageTickets-Dialog-Space-Width: var(--i8i-MaxWidth-0600); --i8i-ManageTickets-DialogWide-Space-Width: var(--i8i-MaxWidth-1000); --i8i-ManageTickets-DialogSmall-Space-Width: var(--i8i-MaxWidth-0420); --i8i-ManageTickets-DialogSide-Space-Width: var(--i8i-MaxWidth-0550); --i8i-ManageTickets-Dialog-Space-Height: var(--i8i-dvb-090); --i8i-ManageTickets-DialogSide-Space-Height: var(--i8i-dvb-100); --i8i-ManageTickets-Dialog-Space-Padding: var(--i8i-ManageTickets-Space-Box); --i8i-ManageTickets-Dialog-Space-Edge: var(--i8i-ManageTickets-Space-Box); /* ... Shape ... */ --i8i-ManageTickets-Dialog-Shape-Corner: var(--i8i-BorderRadius-16); } /* ....... Shell ....... */ /* The values the layer over the page uses - the notice, the toasts, and the bulk bar */ .i8iManageTicketsDashboardFrame { /* ... Color ... */ --i8i-ManageTickets-Notice-Color-Surface: var(--i8i-ManageTickets-Color-Panel); --i8i-ManageTickets-Notice-Color-Line: var(--i8i-ManageTickets-Color-Warn); --i8i-ManageTickets-NoticeGood-Color-Line: var(--i8i-ManageTickets-Color-Good); --i8i-ManageTickets-Toast-Color-Surface: var(--i8i-ManageTickets-Color-Lift); --i8i-ManageTickets-Toast-Color-Line: var(--i8i-ManageTickets-Color-Good); --i8i-ManageTickets-ToastAlert-Color-Line: var(--i8i-ManageTickets-Color-Alert); --i8i-ManageTickets-Bulk-Color-Surface: var(--i8i-ManageTickets-Color-Lift); /* ... Space ... */ --i8i-ManageTickets-Shell-Space-Padding: var(--i8i-ManageTickets-Space-Page); --i8i-ManageTickets-Shell-Space-Gap: var(--i8i-ManageTickets-Space-Tight); --i8i-ManageTickets-Toast-Space-Width: var(--i8i-MaxWidth-0420); --i8i-ManageTickets-Notice-Space-Width: var(--i8i-MaxWidth-0550); --i8i-ManageTickets-NoticeInputReason-Space-Height: calc(3lh + 2 * var(--i8i-Padding-008) + 2 * var(--i8i-ManageTickets-Shape-BorderWidth)); --i8i-ManageTickets-Notice-Space-Room: calc(var(--i8i-Padding-256) + var(--i8i-Padding-080)); /* ... Depth ... */ --i8i-ManageTickets-Shell-Depth-Order: var(--i8i-ManageTickets-Depth-Menu); --i8i-ManageTickets-Bulk-Depth-Order: var(--i8i-ManageTickets-Depth-Bulk); } /* =============================================================== */ /* STRUCTURE */ /* =============================================================== */ /* ....... Frame ....... */ /* The document's own margin taken away, so the frame meets every edge */ .i8iManageTicketsDashboardBody { box-sizing: border-box; margin: 0; background-color: oklch(0.162 0.021 275.1); } /* The page in flow - one column as wide as the dashboard needs, covering the viewport */ .i8iManageTicketsDashboardFrame { box-sizing: border-box; min-block-size: var(--i8i-ManageTickets-Frame-Space-Cover); container-type: inline-size; container-name: i8i-ManageTickets-Frame; display: grid; grid-template-columns: minmax(0, var(--i8i-ManageTickets-Frame-Space-Width)); grid-template-rows: auto 1fr; justify-content: center; padding-inline: var(--i8i-ManageTickets-Frame-Space-Padding); background-color: var(--i8i-ManageTickets-Frame-Color-Surface); color-scheme: dark; color: var(--i8i-ManageTickets-Frame-Color-Ink); font-family: var(--i8i-ManageTickets-Frame-Text-Font); font-size: var(--i8i-ManageTickets-Frame-Text-Size); line-height: var(--i8i-ManageTickets-Frame-Text-Height); } /* The frame stays out of sight until the session is proven */ .i8iManageTicketsDashboardFrame[hidden] { display: none; } /* Every part the code hides stays hidden, whatever display its own rule gives it */ .i8iManageTicketsDashboardFrame [hidden] { display: none; } /* Every part sizes from its border */ .i8iManageTicketsDashboardFrame *, .i8iManageTicketsDashboardFrame *::before, .i8iManageTicketsDashboardFrame *::after { box-sizing: border-box; } /* Headings, paragraphs, and lists start without the browser's own margins - at the lowest weight, so a part's own rule wins */ :where(.i8iManageTicketsDashboardFrame) :where(h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset, pre) { margin: 0; } /* A fieldset carries no frame of its own, and its legend sits in its flow */ .i8iManageTicketsDashboardFrame fieldset { min-inline-size: 0; padding: 0; border: 0; } /* A legend reads as the fieldset's heading */ .i8iManageTicketsDashboardFrame legend { padding: 0; margin-block-end: var(--i8i-ManageTickets-Space-Tight); } /* A link reads in the glow color - at the lowest weight, so a part's own rule wins */ :where(.i8iManageTicketsDashboardFrame) :where(a) { color: var(--i8i-ManageTickets-Color-Glow); } /* Every control speaks the frame's font - at the lowest weight, so a part's own size wins */ :where(.i8iManageTicketsDashboardFrame) :where(button, input, select, textarea) { font: inherit; color: inherit; } /* A choice whose picked words run past its box marks the cut - at the lowest weight, so a part's own rule wins */ :where(.i8iManageTicketsDashboardFrame) :where(select) { text-overflow: ellipsis; } /* Every control the keyboard reaches rests in its own border, transparent where the control draws none, so focus changes that border alone and nothing on the page moves - at the lowest weight, so a part's own border wins */ :where(.i8iManageTicketsDashboardFrame) :where(button, a, input, select, textarea, summary, [tabindex="0"]) { border: var(--i8i-ManageTickets-Control-Shape-BorderWidth) solid transparent; } /* Focus shows on the control's own border - no frame stands around it, so no scrolling box can clip it */ .i8iManageTicketsDashboardFrame :is(button, a, input, select, textarea, summary, [tabindex="0"]):focus-visible { outline: none; border-style: solid; border-color: var(--i8i-ManageTickets-Control-Color-Focus); } /* Where forced colors are active, focus stands as an outline - forced colors paint every border in one color */ @media (forced-colors: active) { .i8iManageTicketsDashboardFrame :is(button, a, input, select, textarea, summary, [tabindex="0"]):focus-visible { outline: var(--i8i-ManageTickets-Control-Shape-BorderWidth) solid Highlight; } } /* ....... Bar ....... */ /* The bar across the top - the brand, the Business, search, and the doors */ .i8iManageTicketsDashboardBar { position: sticky; inset-block-start: 0; z-index: var(--i8i-ManageTickets-Bar-Depth-Order); display: flex; flex-wrap: wrap; align-items: center; gap: var(--i8i-ManageTickets-Bar-Space-Gap); padding-block: var(--i8i-ManageTickets-Bar-Space-Padding); border-block-end: var(--i8i-ManageTickets-Bar-Shape-BorderWidth) solid var(--i8i-ManageTickets-Bar-Color-Line); background-color: var(--i8i-ManageTickets-Bar-Color-Surface); } /* The logo, the name, and the Beta badge - one link home */ .i8iManageTicketsDashboardBarBrand { display: flex; align-items: center; gap: var(--i8i-ManageTickets-BarBrand-Space-Gap); min-block-size: var(--i8i-ManageTickets-BarBrand-Space-Height); color: var(--i8i-ManageTickets-BarBrand-Color-Ink); text-decoration: none; } /* The logo picture */ .i8iManageTicketsDashboardBarBrandImageLogo { inline-size: auto; block-size: 1.875rem; } /* The name beside the logo */ .i8iManageTicketsDashboardBarBrandTextName { font-size: var(--i8i-ManageTickets-BarBrandTextName-Size); font-weight: var(--i8i-ManageTickets-BarBrandTextName-Weight); letter-spacing: var(--i8i-ManageTickets-BarBrandTextName-Spacing); } /* The Beta badge beside the name */ .i8iManageTicketsDashboardBarBrandLabelBeta { padding: var(--i8i-ManageTickets-BarBrandLabelBeta-Space-Padding); border-radius: var(--i8i-ManageTickets-BarBrandLabelBeta-Shape-Corner); background-image: var(--i8i-ManageTickets-BarBrandLabelBeta-Color-Surface); color: var(--i8i-ManageTickets-BarBrandLabelBeta-Color-Ink); font-size: var(--i8i-ManageTickets-BarBrandLabelBeta-Text-Size); font-weight: var(--i8i-ManageTickets-BarBrandLabelBeta-Text-Weight); letter-spacing: var(--i8i-ManageTickets-BarBrandLabelBeta-Text-Spacing); line-height: var(--i8i-ManageTickets-BarBrandLabelBeta-Text-Height); text-transform: uppercase; } /* The Business's name, where the person works in one */ .i8iManageTicketsDashboardBarTextBusiness { font-weight: var(--i8i-ManageTickets-BarTextBusiness-Weight); } /* The Business switcher, where the person works in more than one */ .i8iManageTicketsDashboardBarSwitch { display: flex; } /* The switcher's choice */ .i8iManageTicketsDashboardBarSwitchInputBusiness { min-block-size: var(--i8i-ManageTickets-Input-Space-Height); padding: var(--i8i-ManageTickets-Input-Space-Padding); border: var(--i8i-ManageTickets-Control-Shape-BorderWidth) solid var(--i8i-ManageTickets-Input-Color-Line); border-radius: var(--i8i-ManageTickets-Control-Shape-Corner); background-color: var(--i8i-ManageTickets-Input-Color-Surface); font-weight: var(--i8i-ManageTickets-BarTextBusiness-Weight); } /* Search - the box grows into the bar's spare width */ .i8iManageTicketsDashboardBarSearch { position: relative; flex: 1 1 var(--i8i-ManageTickets-BarSearch-Space-Basis); display: flex; } /* The search box */ .i8iManageTicketsDashboardBarSearchInputText { inline-size: 100%; min-block-size: var(--i8i-ManageTickets-Input-Space-Height); padding: var(--i8i-ManageTickets-Input-Space-Padding); padding-inline-end: var(--i8i-Padding-032); border: var(--i8i-ManageTickets-Control-Shape-BorderWidth) solid var(--i8i-ManageTickets-Input-Color-Line); border-radius: var(--i8i-ManageTickets-Control-Shape-Corner); background-color: var(--i8i-ManageTickets-Input-Color-Surface); } /* The "/" key the search answers to */ .i8iManageTicketsDashboardBarSearchLabelKey { position: absolute; inset-inline-end: var(--i8i-Inset-012); inset-block-start: 50%; translate: 0 -50%; color: var(--i8i-ManageTickets-BarSearch-Color-Key); font-family: var(--i8i-ManageTickets-Text-Mono); pointer-events: none; } /* The doors at the bar's end - Requests, Add tickets, and the menu */ .i8iManageTicketsDashboardBarDoors { display: flex; flex-wrap: wrap; align-items: center; gap: var(--i8i-ManageTickets-Space-Tight); } /* The menu - its button, and its list under the bar; the list stands at the bar's end, so it never leaves the screen where the button wraps to the bar's start */ .i8iManageTicketsDashboardBarMenu { position: static; } /* The menu's list - in the top layer, a gap under the bar, at the bar's end, placed by the page as it opens */ .i8iManageTicketsDashboardBarMenuList { position: fixed; inset: auto; inset-block-start: calc(var(--i8i-ManageTickets-BarMenuList-Space-Top) + var(--i8i-Inset-008)); inset-inline-end: var(--i8i-ManageTickets-BarMenuList-Space-End); margin: 0; min-inline-size: min(100% - var(--i8i-Inset-008) * 2, var(--i8i-ManageTickets-BarMenuList-Space-Width)); } /* An open menu stacks its items */ .i8iManageTicketsDashboardBarMenuList:popover-open { display: flex; flex-direction: column; } /* The person's short name on the menu's button - one line, cut where it runs past its room */ .i8iManageTicketsDashboardBarMenuTextShort { max-inline-size: var(--i8i-ManageTickets-BarMenuTextShort-Space-Width); overflow: hidden; text-overflow: ellipsis; } /* Who is signed in, at the menu's top */ .i8iManageTicketsDashboardBarMenuTextWho { padding: var(--i8i-ManageTickets-Space-Cell); color: var(--i8i-ManageTickets-Color-Muted); font-size: var(--i8i-ManageTickets-Text-Small); overflow-wrap: anywhere; } /* The panel the account menu and every dropdown list open in - one look for both */ .i8iManageTicketsDashboardBarMenuList, .i8iManageTicketsDashboardDropdownList { box-sizing: border-box; padding: var(--i8i-ManageTickets-Menu-Space-Padding); border: var(--i8i-ManageTickets-Control-Shape-BorderWidth) solid var(--i8i-ManageTickets-Menu-Color-Line); border-radius: var(--i8i-ManageTickets-Menu-Shape-Corner); background-color: var(--i8i-ManageTickets-Menu-Color-Surface); color: var(--i8i-ManageTickets-Menu-Color-Ink); box-shadow: var(--i8i-ManageTickets-Depth-Shadow); } /* One row of a menu or of a dropdown list - one look for both */ .i8iManageTicketsDashboardBarMenuButtonItem, .i8iManageTicketsDashboardDropdownListButtonOption { box-sizing: border-box; display: flex; align-items: center; gap: var(--i8i-ManageTickets-Menu-Space-Gap); min-block-size: var(--i8i-ManageTickets-Space-Target); padding: var(--i8i-ManageTickets-Space-Cell); border: var(--i8i-ManageTickets-Control-Shape-BorderWidth) solid transparent; border-radius: var(--i8i-ManageTickets-Control-Shape-Corner); background-color: transparent; color: var(--i8i-ManageTickets-Menu-Color-Ink); text-align: start; text-decoration: none; cursor: pointer; } /* A row under the pointer */ .i8iManageTicketsDashboardBarMenuButtonItem:hover, .i8iManageTicketsDashboardDropdownListButtonOption:hover { background-color: var(--i8i-ManageTickets-Menu-Color-Hover); } /* The red dot of something new - a reply, an update */ .i8iManageTicketsDashboardBarLabelDot { display: inline-block; inline-size: var(--i8i-ManageTickets-Space-Dot); block-size: var(--i8i-ManageTickets-Space-Dot); border-radius: var(--i8i-ManageTickets-Shape-Round); background-color: var(--i8i-ManageTickets-BarLabelDot-Color-Surface); } /* ....... Main ....... */ /* The working area under the bar */ .i8iManageTicketsDashboardMain { display: flex; flex-direction: column; gap: var(--i8i-ManageTickets-Main-Space-Gap); padding-block: var(--i8i-ManageTickets-Main-Space-Padding); padding-block-end: var(--i8i-Padding-096); min-inline-size: 0; } /* While the restart notice stands at the foot, the page leaves room under its end, so the notice covers nothing the person cannot scroll up into view */ .i8iManageTicketsDashboardFrame:has(.i8iManageTicketsDashboardNotice:not([hidden])) .i8iManageTicketsDashboardMain { padding-block-end: var(--i8i-ManageTickets-Notice-Space-Room); } /* The page's title */ .i8iManageTicketsDashboardMainTextTitle { font-size: var(--i8i-ManageTickets-MainTextTitle-Size); font-weight: var(--i8i-ManageTickets-MainTextTitle-Weight); } /* Who is signed in, under the title */ .i8iManageTicketsDashboardMainTextWho { color: var(--i8i-ManageTickets-MainTextWho-Color-Ink); } /* The words of the last admin act */ .i8iManageTicketsDashboardAdminSaid { color: var(--i8i-ManageTickets-Color-Glow); font-weight: var(--i8i-ManageTickets-Text-Semi); } /* The words of the last admin act take no room while they say nothing */ .i8iManageTicketsDashboardAdminSaid:empty { display: none; } /* A state in place of the work - paused, or no Business */ .i8iManageTicketsDashboardState { display: flex; flex-direction: column; gap: var(--i8i-ManageTickets-Space-Tight); max-inline-size: var(--i8i-MaxWidth-0600); padding: var(--i8i-Padding-032); border: var(--i8i-ManageTickets-Shape-BorderWidth) solid var(--i8i-ManageTickets-Card-Color-Line); border-radius: var(--i8i-ManageTickets-Card-Shape-Corner); background-color: var(--i8i-ManageTickets-Card-Color-Surface); } /* The state's heading */ .i8iManageTicketsDashboardStateTextTitle { font-size: var(--i8i-ManageTickets-Text-Title); font-weight: var(--i8i-ManageTickets-Text-Bold); line-height: var(--i8i-ManageTickets-Text-Tight); } /* The state's words under the heading */ .i8iManageTicketsDashboardStateTextLead { color: var(--i8i-ManageTickets-Color-Muted); font-size: var(--i8i-ManageTickets-Text-Lead); } /* The work - the summary, the tools, and the rail beside the stock */ .i8iManageTicketsDashboardWork { display: flex; flex-direction: column; gap: var(--i8i-ManageTickets-Space-Stack); min-inline-size: 0; } /* The summary - the Stock card and the Sales card on one row past the Turn, Stock taking two shares of the width and Sales one, and under the Turn each card across the whole width */ .i8iManageTicketsDashboardSummary { box-sizing: border-box; display: flex; flex-wrap: wrap; gap: var(--i8i-ManageTickets-Summary-Space-Gap); } /* One card of facts - its head over its facts, one share of the summary's row */ .i8iManageTicketsDashboardSummaryGroup { box-sizing: border-box; flex: 1 1 calc((var(--i8i-ManageTickets-Summary-Space-Turn) - 100%) * var(--i8i-ManageTickets-Summary-Space-Spread)); min-inline-size: 0; display: flex; flex-direction: column; gap: var(--i8i-ManageTickets-SummaryGroup-Space-Gap); padding: var(--i8i-ManageTickets-SummaryGroup-Space-Padding); border: var(--i8i-ManageTickets-SummaryGroup-Shape-BorderWidth) solid var(--i8i-ManageTickets-SummaryGroup-Color-Line); border-radius: var(--i8i-ManageTickets-SummaryGroup-Shape-Corner); background-color: var(--i8i-ManageTickets-SummaryGroup-Color-Surface); } /* The Stock card - two shares of the row, as it holds twice the facts */ .i8iManageTicketsDashboardSummaryGroupWide { flex-grow: 2; } /* A card whose numbers are a sample - edged dashed in the warning color, and marked in words in its head */ .i8iManageTicketsDashboardSummaryGroupSample { border-style: dashed; border-color: var(--i8i-ManageTickets-SummaryGroupSample-Color-Line); } /* A card's head - its name, and the sample's words where the numbers are a sample */ .i8iManageTicketsDashboardSummaryGroupHead { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--i8i-ManageTickets-SummaryGroup-Space-Gap); padding-inline: var(--i8i-ManageTickets-SummaryGroupHead-Space-Padding); padding-block: var(--i8i-ManageTickets-SummaryGroup-Space-Gap); } /* The card's name */ .i8iManageTicketsDashboardSummaryGroupHeadLabel { box-sizing: border-box; color: var(--i8i-ManageTickets-SummaryGroupHeadLabel-Color-Ink); font-size: var(--i8i-ManageTickets-Text-Small); font-weight: var(--i8i-ManageTickets-Text-Semi); letter-spacing: var(--i8i-ManageTickets-Text-Spread); text-transform: uppercase; } /* The sample's words */ .i8iManageTicketsDashboardSummaryGroupHeadTextSample { box-sizing: border-box; color: var(--i8i-ManageTickets-SummaryGroupHeadTextSample-Color-Ink); font-size: var(--i8i-ManageTickets-Text-Small); font-weight: var(--i8i-ManageTickets-Text-Semi); } /* The card's facts - four across past the facts' Turn and two across under it, a fact never standing alone on a row; the line between the facts is the card's line, showing through the gap */ .i8iManageTicketsDashboardSummaryGroupFacts { box-sizing: border-box; display: grid; grid-template-columns: repeat( auto-fit, minmax( max( calc((100% - 3 * var(--i8i-ManageTickets-SummaryGroupFacts-Shape-Line)) / 4), min( calc((100% - var(--i8i-ManageTickets-SummaryGroupFacts-Shape-Line)) / 2), calc((var(--i8i-ManageTickets-SummaryGroupFacts-Space-Turn) - 100%) * var(--i8i-ManageTickets-Summary-Space-Spread)) ) ), 1fr ) ); gap: var(--i8i-ManageTickets-SummaryGroupFacts-Shape-Line); border-radius: var(--i8i-ManageTickets-SummaryGroupFacts-Shape-Corner); background-color: var(--i8i-ManageTickets-SummaryGroupFacts-Color-Line); overflow: hidden; } /* One fact - its name, its number, and its detail, each on one line; a button that opens the numbers */ .i8iManageTicketsDashboardSummaryGroupFactsButtonFact { box-sizing: border-box; min-inline-size: 0; display: flex; flex-direction: column; align-items: stretch; gap: var(--i8i-ManageTickets-SummaryGroupFactsButtonFact-Space-Gap); padding: var(--i8i-ManageTickets-SummaryGroupFactsButtonFact-Space-Padding); border: var(--i8i-ManageTickets-Shape-BorderWidth) solid transparent; background-color: var(--i8i-ManageTickets-SummaryGroupFactsButtonFact-Color-Surface); color: inherit; font: inherit; text-align: start; cursor: pointer; transition-property: background-color, border-color; transition-duration: var(--i8i-ManageTickets-Control-Motion-Duration); transition-timing-function: var(--i8i-ManageTickets-Control-Motion-Curve); transition-delay: var(--i8i-ManageTickets-Control-Motion-Delay); } /* A fact under the pointer */ .i8iManageTicketsDashboardSummaryGroupFactsButtonFact:hover { background-color: var(--i8i-ManageTickets-SummaryGroupFactsButtonFact-Color-Hover); } /* The fact's name and its detail - one line each, cut with an ellipsis rather than broken */ .i8iManageTicketsDashboardSummaryGroupFactsButtonFactLabel { box-sizing: border-box; overflow: hidden; color: var(--i8i-ManageTickets-SummaryGroupFactsButtonFact-Color-Muted); font-size: var(--i8i-ManageTickets-Text-Small); white-space: nowrap; text-overflow: ellipsis; } /* The fact's number */ .i8iManageTicketsDashboardSummaryGroupFactsButtonFactValue { box-sizing: border-box; overflow: hidden; font-size: var(--i8i-ManageTickets-SummaryGroupFactsButtonFact-Text-Value); font-weight: var(--i8i-ManageTickets-Text-Bold); line-height: var(--i8i-ManageTickets-Text-Tight); font-variant-numeric: tabular-nums; white-space: nowrap; text-overflow: ellipsis; } /* A number that is profit - in the good color */ .i8iManageTicketsDashboardSummaryGroupFactsButtonFactValueGood { color: var(--i8i-ManageTickets-SummaryGroupFactsButtonFact-Color-Good); } /* The tools over the stock - the filters, the grouping, the sort, and the views */ .i8iManageTicketsDashboardTools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--i8i-ManageTickets-Space-Tight); } /* One labelled choice among the tools */ .i8iManageTicketsDashboardToolsField { display: inline-flex; align-items: center; gap: var(--i8i-ManageTickets-Space-Tight); color: var(--i8i-ManageTickets-Color-Muted); font-size: var(--i8i-ManageTickets-Text-Small); } /* The chips of the filters standing */ .i8iManageTicketsDashboardToolsActive { display: flex; flex-wrap: wrap; gap: var(--i8i-ManageTickets-Space-Hair); } /* The spare width that pushes the trash, the export, and the views to the row's end */ .i8iManageTicketsDashboardToolsSpace { flex: 1 1 0; } /* The trash, the export, and the views - one group that wraps whole, so its parts never split across two lines */ .i8iManageTicketsDashboardToolsEnd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--i8i-ManageTickets-Space-Tight); } /* The rail beside the stock - the stock drops under it where the frame runs narrow */ .i8iManageTicketsDashboardLayout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--i8i-ManageTickets-Space-Stack); } /* The rail - the suggestions, the games, and the tags */ .i8iManageTicketsDashboardRail { display: flex; flex: 1 1 var(--i8i-ManageTickets-Rail-Space-Basis); flex-direction: column; gap: var(--i8i-ManageTickets-Space-Near); min-inline-size: 0; } /* The stock - every group of listings */ .i8iManageTicketsDashboardStock { display: flex; flex: 999 1 var(--i8i-ManageTickets-Stock-Space-Basis); flex-direction: column; gap: var(--i8i-ManageTickets-Space-Near); min-inline-size: 0; } /* A card - one panel of the rail, or one section of a page */ .i8iManageTicketsDashboardCard { display: flex; flex-direction: column; gap: var(--i8i-ManageTickets-Space-Tight); padding: var(--i8i-ManageTickets-Card-Space-Padding); border: var(--i8i-ManageTickets-Shape-BorderWidth) solid var(--i8i-ManageTickets-Card-Color-Line); border-radius: var(--i8i-ManageTickets-Card-Shape-Corner); background-color: var(--i8i-ManageTickets-Card-Color-Surface); } /* A card's heading */ .i8iManageTicketsDashboardCardTextHead { color: var(--i8i-ManageTickets-Color-Muted); font-size: var(--i8i-ManageTickets-Text-Small); font-weight: var(--i8i-ManageTickets-Text-Semi); letter-spacing: var(--i8i-ManageTickets-Text-Spread); text-transform: uppercase; } /* The upcoming games in the rail */ .i8iManageTicketsDashboardRailGames { display: flex; flex-direction: column; gap: var(--i8i-ManageTickets-Space-Hair); max-block-size: var(--i8i-MaxHeight-0420); overflow-y: auto; } /* One upcoming game - its date, its name, and its ticket count */ .i8iManageTicketsDashboardRailGame { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--i8i-ManageTickets-Space-Tight); min-block-size: var(--i8i-ManageTickets-Space-Target); padding: var(--i8i-ManageTickets-Space-Chip); border-radius: var(--i8i-ManageTickets-Control-Shape-Corner); background-color: transparent; text-align: start; cursor: pointer; } /* A game under the pointer, or the game picked */ .i8iManageTicketsDashboardRailGame:hover, .i8iManageTicketsDashboardRailGame[aria-pressed="true"] { border-color: var(--i8i-ManageTickets-Control-Color-Selected); background-color: var(--i8i-ManageTickets-Color-Lift); } /* The game's date block - the month over the day */ .i8iManageTicketsDashboardRailGameLabelDate { display: flex; flex-direction: column; align-items: center; min-inline-size: var(--i8i-Width-0048); color: var(--i8i-ManageTickets-Color-Glow); font-size: var(--i8i-ManageTickets-Text-Small); font-weight: var(--i8i-ManageTickets-Text-Semi); line-height: var(--i8i-ManageTickets-Text-Tight); } /* The game's name over its venue - the name wraps, the venue keeps one line */ .i8iManageTicketsDashboardRailGameText { display: flex; flex-direction: column; min-inline-size: 0; line-height: var(--i8i-ManageTickets-Text-Tight); overflow-wrap: break-word; } /* The game's name - two lines at most, the rest marked as cut */ .i8iManageTicketsDashboardRailGameText b { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /* The venue under the game's name */ .i8iManageTicketsDashboardRailGameText small { overflow: hidden; font-size: var(--i8i-ManageTickets-Text-Small); text-overflow: ellipsis; white-space: nowrap; } /* The game's ticket count - the number over its words */ .i8iManageTicketsDashboardRailGameLabelCount { display: flex; flex-direction: column; align-items: flex-end; color: var(--i8i-ManageTickets-Color-Muted); font-size: var(--i8i-ManageTickets-Text-Small); line-height: var(--i8i-ManageTickets-Text-Tight); font-variant-numeric: tabular-nums; } /* The tags in the rail */ .i8iManageTicketsDashboardRailTags { display: flex; flex-wrap: wrap; gap: var(--i8i-ManageTickets-Space-Hair); } /* A suggestion to join a hand-added game to the catalog's */ .i8iManageTicketsDashboardRailSuggest { display: flex; flex-direction: column; gap: var(--i8i-ManageTickets-Space-Tight); } /* ....... Stock ....... */ /* One group of listings - its head, and its table */ .i8iManageTicketsDashboardStockGroup { border: var(--i8i-ManageTickets-Shape-BorderWidth) solid var(--i8i-ManageTickets-Card-Color-Line); border-radius: var(--i8i-ManageTickets-Card-Shape-Corner); background-color: var(--i8i-ManageTickets-Card-Color-Surface); overflow: hidden; } /* The group's head - the pick, the fold with the totals under it, and the plus at the end, at every width */ .i8iManageTicketsDashboardStockGroupHead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--i8i-ManageTickets-Space-Hair) var(--i8i-ManageTickets-Space-Near); padding: var(--i8i-ManageTickets-StockTable-Space-Cell); } /* The head's pick stands at the fold's first line */ .i8iManageTicketsDashboardStockGroupHead > .i8iManageTicketsDashboardInputPick { grid-column: 1; grid-row: 1; } /* The head's fold takes the middle of the first line */ .i8iManageTicketsDashboardStockGroupHead > .i8iManageTicketsDashboardStockGroupHeadButtonFold { grid-column: 2; grid-row: 1; } /* The head's totals stand under the fold */ .i8iManageTicketsDashboardStockGroupHead > .i8iManageTicketsDashboardStockGroupHeadTextTotals { grid-column: 2; grid-row: 2; } /* The head's plus stands at the end, over both lines */ .i8iManageTicketsDashboardStockGroupHead > .i8iManageTicketsDashboardButtonPlus { grid-column: 3; grid-row: 1 / span 2; } /* The fold - the group's name, a button that opens and closes it */ .i8iManageTicketsDashboardStockGroupHeadButtonFold { display: flex; flex-wrap: wrap; align-items: baseline; align-content: center; gap: var(--i8i-ManageTickets-Space-Tight); min-block-size: var(--i8i-ManageTickets-Space-Target); padding: 0; background-color: transparent; text-align: start; cursor: pointer; } /* The fold's arrow */ .i8iManageTicketsDashboardStockGroupHeadLabelChevron { color: var(--i8i-ManageTickets-Color-Muted); } /* The group's name */ .i8iManageTicketsDashboardStockGroupHeadTextTitle { font-size: var(--i8i-ManageTickets-Text-Head); } /* The group's totals */ .i8iManageTicketsDashboardStockGroupHeadTextTotals { display: flex; flex-wrap: wrap; gap: var(--i8i-ManageTickets-Space-Near); color: var(--i8i-ManageTickets-Color-Muted); font-size: var(--i8i-ManageTickets-Text-Small); font-variant-numeric: tabular-nums; } /* A table's sideways scroll, where its columns run past its width */ .i8iManageTicketsDashboardStockScroll { max-inline-size: 100%; overflow-x: auto; } /* A table of rows - the stock, the sales, the numbers */ .i8iManageTicketsDashboardStockTable { inline-size: 100%; border-collapse: collapse; font-size: var(--i8i-ManageTickets-Text-Body); } /* A table's head cells */ .i8iManageTicketsDashboardStockTable th { padding: var(--i8i-ManageTickets-StockTable-Space-Cell); border-block-end: var(--i8i-ManageTickets-Shape-BorderWidth) solid var(--i8i-ManageTickets-Card-Color-Line); color: var(--i8i-ManageTickets-StockTable-Color-Head); font-size: var(--i8i-ManageTickets-Text-Small); font-weight: var(--i8i-ManageTickets-Text-Semi); text-align: start; white-space: nowrap; } /* A table's cells */ .i8iManageTicketsDashboardStockTable td { padding: var(--i8i-ManageTickets-StockTable-Space-Cell); border-block-end: var(--i8i-ManageTickets-Shape-BorderWidth) solid var(--i8i-ManageTickets-Card-Color-Line); vertical-align: middle; } /* A table row under the pointer */ .i8iManageTicketsDashboardStockTable tbody tr:hover { background-color: var(--i8i-ManageTickets-StockRow-Color-Hover); } /* One listing's row - it opens the listing */ .i8iManageTicketsDashboardStockRow { cursor: pointer; } /* A row that is picked for a bulk change */ .i8iManageTicketsDashboardStockRowPicked { background-color: var(--i8i-ManageTickets-StockRowPicked-Color-Surface); } /* A row that needs the person's attention - edged in the warning color */ .i8iManageTicketsDashboardStockRowAttention { box-shadow: inset var(--i8i-ManageTickets-CardTicket-Shape-Stripe) 0 0 var(--i8i-ManageTickets-StockRowAttention-Color-Line); } /* A cell of seats and sections - tabular and steady */ .i8iManageTicketsDashboardStockCellMono { font-variant-numeric: tabular-nums; white-space: nowrap; } /* A cell of words that may run long - a game, a section, a row - kept readable, and wrapped between its words */ .i8iManageTicketsDashboardStockCellWords { min-inline-size: var(--i8i-ManageTickets-StockCellWords-Space-Width); font-variant-numeric: tabular-nums; overflow-wrap: break-word; } /* A cell of money - right-aligned so the amounts line up */ .i8iManageTicketsDashboardStockCellNumber { font-variant-numeric: tabular-nums; text-align: end; white-space: nowrap; } /* A short cell that reads as one line - the delivery and its split, the in hand dot and its word */ .i8iManageTicketsDashboardStockCellLine { white-space: nowrap; } /* A row's tags - side by side, a small gap between, wrapping where the column runs short */ .i8iManageTicketsDashboardStockTags { display: inline-flex; flex-wrap: wrap; gap: var(--i8i-ManageTickets-Space-Hair); } /* The price changed in place */ .i8iManageTicketsDashboardStockPrice { display: inline-flex; align-items: center; gap: var(--i8i-ManageTickets-Space-Hair); } /* The price's box */ .i8iManageTicketsDashboardStockPriceInputAmount { inline-size: var(--i8i-ManageTickets-StockPrice-Space-Width); min-block-size: var(--i8i-ManageTickets-ButtonSmall-Space-Height); padding: var(--i8i-ManageTickets-Space-Chip); border: var(--i8i-ManageTickets-Shape-BorderWidth) solid var(--i8i-ManageTickets-Input-Color-Line); border-radius: var(--i8i-ManageTickets-Control-Shape-Corner); background-color: var(--i8i-ManageTickets-Input-Color-Surface); font-variant-numeric: tabular-nums; text-align: end; } /* The board - its three status columns side by side past the Turn, and one under another below it, never two beside one; the Turn is three columns and their gaps */ .i8iManageTicketsDashboardBoard { display: grid; grid-template-columns: repeat( auto-fit, minmax( max( calc((100% - 2 * var(--i8i-ManageTickets-Board-Space-Gap)) / 3), min(100%, calc((var(--i8i-ManageTickets-Board-Space-Turn) - 100%) * var(--i8i-ManageTickets-Board-Space-Spread))) ), 1fr ) ); gap: var(--i8i-ManageTickets-Board-Space-Gap); align-items: start; } /* One board column - its cards, and the drop it takes */ .i8iManageTicketsDashboardBoardColumn { display: flex; flex-direction: column; gap: var(--i8i-ManageTickets-Space-Tight); min-block-size: var(--i8i-ManageTickets-Board-Space-Height); padding: var(--i8i-ManageTickets-Space-Near); border: var(--i8i-ManageTickets-Shape-BorderWidth) dashed var(--i8i-ManageTickets-Card-Color-Line); border-radius: var(--i8i-ManageTickets-Card-Shape-Corner); background-color: var(--i8i-ManageTickets-Board-Color-Surface); } /* A column's heading */ .i8iManageTicketsDashboardBoardColumnTextHead { display: flex; justify-content: space-between; font-weight: var(--i8i-ManageTickets-Text-Semi); } /* A game's name between a column's cards */ .i8iManageTicketsDashboardBoardColumnTextGame { margin-block-start: var(--i8i-Margin-008); color: var(--i8i-ManageTickets-Color-Muted); font-size: var(--i8i-ManageTickets-Text-Small); } /* One ticket card - the game on the left, a torn edge, and the stub with the price */ .i8iManageTicketsDashboardCardTicket { position: relative; display: grid; grid-template-columns: 1fr auto; border-radius: var(--i8i-ManageTickets-Control-Shape-Corner); border-inline-start: var(--i8i-ManageTickets-CardTicket-Shape-Stripe) solid var(--i8i-ManageTickets-CardTicketDraft-Color-Line); background-color: var(--i8i-ManageTickets-CardTicket-Color-Surface); cursor: pointer; } /* A listed card */ .i8iManageTicketsDashboardCardTicketListed { border-inline-start-color: var(--i8i-ManageTickets-CardTicketListed-Color-Line); } /* A scheduled card */ .i8iManageTicketsDashboardCardTicketScheduled { border-inline-start-color: var(--i8i-ManageTickets-CardTicketScheduled-Color-Line); } /* A sold card */ .i8iManageTicketsDashboardCardTicketSold { border-inline-start-color: var(--i8i-ManageTickets-CardTicketSold-Color-Line); } /* A card whose game passed unsold */ .i8iManageTicketsDashboardCardTicketExpired { border-inline-start-color: var(--i8i-ManageTickets-CardTicketExpired-Color-Line); } /* A card partly sold */ .i8iManageTicketsDashboardCardTicketPartly { border-inline-start-color: var(--i8i-ManageTickets-CardTicketPartly-Color-Line); } /* The card's game part */ .i8iManageTicketsDashboardCardTicketMain { display: flex; flex-direction: column; gap: var(--i8i-ManageTickets-Space-Hair); min-inline-size: 0; padding: var(--i8i-ManageTickets-Space-Cell); } /* The card's league, moment, and venue */ .i8iManageTicketsDashboardCardTicketTextLine { color: var(--i8i-ManageTickets-Color-Muted); font-size: var(--i8i-ManageTickets-Text-Small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The card's game */ .i8iManageTicketsDashboardCardTicketTextGame { line-height: var(--i8i-ManageTickets-Text-Tight); } /* The card's seats */ .i8iManageTicketsDashboardCardTicketTextSeats { font-variant-numeric: tabular-nums; font-weight: var(--i8i-ManageTickets-Text-Semi); } /* The seats' small words - SEC, ROW, SEATS */ .i8iManageTicketsDashboardCardTicketTextSeats i { color: var(--i8i-ManageTickets-Color-Muted); font-size: var(--i8i-ManageTickets-Text-Small); font-style: normal; font-weight: var(--i8i-ManageTickets-Text-Semi); } /* The card's stub - the price, past the torn edge */ .i8iManageTicketsDashboardCardTicketStub { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; padding: var(--i8i-ManageTickets-Space-Cell); border-inline-start: var(--i8i-ManageTickets-Shape-BorderWidth) dashed var(--i8i-ManageTickets-CardTicket-Color-Tear); font-variant-numeric: tabular-nums; } /* The stub's small line under the price */ .i8iManageTicketsDashboardCardTicketStub small { color: var(--i8i-ManageTickets-Color-Muted); font-size: var(--i8i-ManageTickets-Text-Small); } /* The card's dot where it needs attention */ .i8iManageTicketsDashboardCardTicketLabelWarn { position: absolute; inset-block-start: var(--i8i-Inset-006); inset-inline-end: var(--i8i-Inset-006); inline-size: var(--i8i-ManageTickets-Space-Dot); block-size: var(--i8i-ManageTickets-Space-Dot); border-radius: var(--i8i-ManageTickets-Shape-Round); background-color: var(--i8i-ManageTickets-Color-Warn); } /* The words where nothing stands to show */ .i8iManageTicketsDashboardEmpty { display: flex; flex-direction: column; align-items: center; gap: var(--i8i-ManageTickets-Space-Near); padding: var(--i8i-Padding-048) var(--i8i-ManageTickets-Space-Box); border: var(--i8i-ManageTickets-Shape-BorderWidth) dashed var(--i8i-ManageTickets-Card-Color-Line); border-radius: var(--i8i-ManageTickets-Card-Shape-Corner); color: var(--i8i-ManageTickets-Color-Muted); text-align: center; } /* The bulk bar - pinned to the foot while listings are picked */ .i8iManageTicketsDashboardBulk { position: sticky; inset-block-end: var(--i8i-Inset-016); z-index: var(--i8i-ManageTickets-Bulk-Depth-Order); display: flex; flex-wrap: wrap; align-items: center; gap: var(--i8i-ManageTickets-Space-Tight); margin-block-end: var(--i8i-Margin-016); padding: var(--i8i-ManageTickets-Space-Near); border: var(--i8i-ManageTickets-Shape-BorderWidth) solid var(--i8i-ManageTickets-Color-Accent); border-radius: var(--i8i-ManageTickets-Card-Shape-Corner); background-color: var(--i8i-ManageTickets-Bulk-Color-Surface); box-shadow: var(--i8i-ManageTickets-Depth-Shadow); } /* The bulk bar's close stands as tall as the small buttons beside it */ .i8iManageTicketsDashboardBulk > .i8iManageTicketsDashboardButtonClose { inline-size: var(--i8i-ManageTickets-ButtonSmall-Space-Height); block-size: var(--i8i-ManageTickets-ButtonSmall-Space-Height); font-size: var(--i8i-ManageTickets-Text-Lead); } /* One labelled field of the bulk bar */ .i8iManageTicketsDashboardBulkField { display: inline-flex; align-items: center; gap: var(--i8i-ManageTickets-Space-Hair); } /* ....... Controls ....... */ /* The shared shape of every button */ .i8iManageTicketsDashboardButtonPrimary, .i8iManageTicketsDashboardButtonQuiet, .i8iManageTicketsDashboardButtonDanger, .i8iManageTicketsDashboardButtonSmall, .i8iManageTicketsDashboardButtonSmallDanger { display: inline-flex; align-items: center; justify-content: center; gap: var(--i8i-ManageTickets-Space-Tight); min-block-size: var(--i8i-ManageTickets-Button-Space-Height); padding: var(--i8i-ManageTickets-Button-Space-Padding); border: var(--i8i-ManageTickets-Control-Shape-BorderWidth) solid transparent; border-radius: var(--i8i-ManageTickets-Control-Shape-Corner); font-weight: var(--i8i-ManageTickets-Button-Text-Weight); line-height: var(--i8i-ManageTickets-Text-Tight); text-decoration: none; white-space: nowrap; cursor: pointer; transition-property: background-color, border-color; transition-duration: var(--i8i-ManageTickets-Control-Motion-Duration); transition-timing-function: var(--i8i-ManageTickets-Control-Motion-Curve); transition-delay: var(--i8i-ManageTickets-Control-Motion-Delay); } /* The button that does the step's main job */ .i8iManageTicketsDashboardButtonPrimary { background-color: var(--i8i-ManageTickets-ButtonPrimary-Color-Surface); color: var(--i8i-ManageTickets-ButtonPrimary-Color-Ink); } /* The main button under the pointer */ .i8iManageTicketsDashboardButtonPrimary:hover { background-color: var(--i8i-ManageTickets-ButtonPrimary-Color-Hover); } /* A quiet button - every other step */ .i8iManageTicketsDashboardButtonQuiet, .i8iManageTicketsDashboardButtonSmall { border-color: var(--i8i-ManageTickets-ButtonQuiet-Color-Line); background-color: var(--i8i-ManageTickets-ButtonQuiet-Color-Surface); color: var(--i8i-ManageTickets-Color-Ink); } /* A quiet button under the pointer, or pressed */ .i8iManageTicketsDashboardButtonQuiet:hover, .i8iManageTicketsDashboardButtonSmall:hover, .i8iManageTicketsDashboardButtonQuiet[aria-pressed="true"] { border-color: var(--i8i-ManageTickets-Control-Color-Selected); background-color: var(--i8i-ManageTickets-ButtonQuiet-Color-Hover); } /* A button that takes something away */ .i8iManageTicketsDashboardButtonDanger, .i8iManageTicketsDashboardButtonSmallDanger { border-color: var(--i8i-ManageTickets-ButtonDanger-Color-Ink); background-color: var(--i8i-ManageTickets-ButtonDanger-Color-Surface); color: var(--i8i-ManageTickets-ButtonDanger-Color-Ink); } /* A small button, inside a row or a table */ .i8iManageTicketsDashboardButtonSmall, .i8iManageTicketsDashboardButtonSmallDanger { min-block-size: var(--i8i-ManageTickets-ButtonSmall-Space-Height); padding: var(--i8i-ManageTickets-ButtonSmall-Space-Padding); font-size: var(--i8i-ManageTickets-Text-Small); } /* A button resting while its work runs, or while it cannot run */ .i8iManageTicketsDashboardFrame button:disabled { opacity: var(--i8i-Opacity-050); cursor: not-allowed; } /* A summary that reads as a button - it opens its details */ .i8iManageTicketsDashboardFrame summary:is(.i8iManageTicketsDashboardButtonPrimary, .i8iManageTicketsDashboardButtonQuiet) { inline-size: fit-content; list-style: none; } /* A summary's own marker taken away where it reads as a button */ .i8iManageTicketsDashboardFrame summary:is(.i8iManageTicketsDashboardButtonPrimary, .i8iManageTicketsDashboardButtonQuiet)::-webkit-details-marker { display: none; } /* A summary that heads a fold */ .i8iManageTicketsDashboardFrame summary { cursor: pointer; } /* A summary, and a label holding a box to check, stand at least a small target tall, their words centred - at the lowest weight, so a button's own height wins */ :where(.i8iManageTicketsDashboardFrame) :where(summary, label:has(> :is(input[type="checkbox"], input[type="radio"]))) { min-block-size: var(--i8i-ManageTickets-Space-TargetSmall); align-content: center; } /* The close button of a dialog */ .i8iManageTicketsDashboardButtonClose { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--i8i-ManageTickets-Space-Target); block-size: var(--i8i-ManageTickets-Space-Target); flex: 0 0 auto; border-radius: var(--i8i-ManageTickets-Shape-Round); background-color: transparent; font-size: var(--i8i-ManageTickets-Text-Title); line-height: 1; cursor: pointer; } /* The close button under the pointer */ .i8iManageTicketsDashboardButtonClose:hover { background-color: var(--i8i-ManageTickets-Color-Lift); } /* The plus that adds tickets to a group's game */ .i8iManageTicketsDashboardButtonPlus { inline-size: var(--i8i-ManageTickets-ButtonSmall-Space-Height); block-size: var(--i8i-ManageTickets-ButtonSmall-Space-Height); border-radius: var(--i8i-ManageTickets-Shape-Round); background-color: var(--i8i-ManageTickets-ButtonPrimary-Color-Surface); color: var(--i8i-ManageTickets-ButtonPrimary-Color-Ink); font-weight: var(--i8i-ManageTickets-Text-Bold); cursor: pointer; } /* A row of segmented buttons - the filters, the views */ .i8iManageTicketsDashboardTabs { display: inline-flex; flex-wrap: wrap; gap: var(--i8i-ManageTickets-Space-Hair); padding: var(--i8i-Padding-002); border: var(--i8i-ManageTickets-Shape-BorderWidth) solid var(--i8i-ManageTickets-ButtonQuiet-Color-Line); border-radius: var(--i8i-ManageTickets-Control-Shape-Corner); } /* One segment */ .i8iManageTicketsDashboardTabsButtonTab, .i8iManageTicketsDashboardTabsButtonWarn { display: inline-flex; align-items: center; gap: var(--i8i-ManageTickets-Space-Hair); min-block-size: var(--i8i-ManageTickets-ButtonSmall-Space-Height); padding: var(--i8i-ManageTickets-ButtonSmall-Space-Padding); border-radius: var(--i8i-ManageTickets-Control-Shape-Corner); background-color: transparent; color: var(--i8i-ManageTickets-Color-Muted); font-size: var(--i8i-ManageTickets-Text-Small); font-weight: var(--i8i-ManageTickets-Text-Semi); cursor: pointer; } /* The segment that names what needs attention */ .i8iManageTicketsDashboardTabsButtonWarn { color: var(--i8i-ManageTickets-Color-Warn); } /* The segment pressed */ .i8iManageTicketsDashboardTabsButtonTab[aria-pressed="true"], .i8iManageTicketsDashboardTabsButtonWarn[aria-pressed="true"] { border-color: var(--i8i-ManageTickets-Control-Color-Selected); background-color: var(--i8i-ManageTickets-Tabs-Color-Pressed); color: var(--i8i-ManageTickets-Color-Ink); } /* A segment's count */ .i8iManageTicketsDashboardTabsLabelCount { padding: 0 var(--i8i-Padding-006); border-radius: var(--i8i-ManageTickets-Shape-Round); background-color: var(--i8i-ManageTickets-Color-Line); font-variant-numeric: tabular-nums; } /* The big choices - the ways to add tickets */ .i8iManageTicketsDashboardChoices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--i8i-ManageTickets-Choices-Space-Column)), 1fr)); gap: var(--i8i-ManageTickets-Space-Tight); padding: 0 var(--i8i-ManageTickets-Dialog-Space-Padding) var(--i8i-ManageTickets-Dialog-Space-Padding); border-block-end: var(--i8i-ManageTickets-Shape-BorderWidth) solid var(--i8i-ManageTickets-Dialog-Color-Line); } /* One big choice - its name, and its line */ .i8iManageTicketsDashboardChoicesButtonChoice { display: flex; flex-direction: column; align-items: flex-start; gap: var(--i8i-ManageTickets-Space-Hair); padding: var(--i8i-ManageTickets-Space-Cell); border: var(--i8i-ManageTickets-Control-Shape-BorderWidth) solid var(--i8i-ManageTickets-ButtonQuiet-Color-Line); border-radius: var(--i8i-ManageTickets-Control-Shape-Corner); background-color: var(--i8i-ManageTickets-ButtonQuiet-Color-Surface); text-align: start; cursor: pointer; } /* A big choice's line */ .i8iManageTicketsDashboardChoicesButtonChoice span { color: var(--i8i-ManageTickets-Color-Muted); font-size: var(--i8i-ManageTickets-Text-Small); } /* The big choice picked */ .i8iManageTicketsDashboardChoicesButtonChoice[aria-selected="true"] { border-color: var(--i8i-ManageTickets-Choices-Color-Selected); background-color: var(--i8i-ManageTickets-Tabs-Color-Pressed); } /* A labelled field - its words over its box */ .i8iManageTicketsDashboardField { display: flex; flex-direction: column; gap: var(--i8i-ManageTickets-Space-Hair); min-inline-size: 0; } /* A field's words */ .i8iManageTicketsDashboardFieldLabel { color: var(--i8i-ManageTickets-Color-Muted); font-size: var(--i8i-ManageTickets-FieldLabel-Text-Size); font-weight: var(--i8i-ManageTickets-Text-Semi); } /* A text box, a choice, and a long box */ .i8iManageTicketsDashboardInput, .i8iManageTicketsDashboardInputChoice, .i8iManageTicketsDashboardInputShort, .i8iManageTicketsDashboardInputSmall, .i8iManageTicketsDashboardInputSmallWide { min-block-size: var(--i8i-ManageTickets-Input-Space-Height); padding: var(--i8i-ManageTickets-Input-Space-Padding); border: var(--i8i-ManageTickets-Control-Shape-BorderWidth) solid var(--i8i-ManageTickets-Input-Color-Line); border-radius: var(--i8i-ManageTickets-Control-Shape-Corner); background-color: var(--i8i-ManageTickets-Input-Color-Surface); } /* A text box fills its field */ .i8iManageTicketsDashboardInput { inline-size: 100%; } /* A long box grows only up and down */ textarea.i8iManageTicketsDashboardInput { resize: vertical; } /* A dropdown's box - its picked words and its arrow on one line, its look taken from the select it stands for */ .i8iManageTicketsDashboardDropdownButton { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--i8i-ManageTickets-DropdownButton-Space-Gap); max-inline-size: 100%; text-align: start; cursor: pointer; } /* A dropdown's picked words - every choice's words stacked in one cell, so the box stands as wide as its longest choice */ .i8iManageTicketsDashboardDropdownButtonValue { display: grid; grid-template-columns: minmax(0, max-content); min-inline-size: 0; } /* One choice's words in the stack - held in place unseen */ .i8iManageTicketsDashboardDropdownButtonValueText { grid-area: 1 / 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; visibility: hidden; } /* The picked choice's words - the ones seen */ .i8iManageTicketsDashboardDropdownButtonValueTextShown { visibility: visible; } /* A dropdown's arrow - never squeezed */ .i8iManageTicketsDashboardDropdownButtonArrow { flex-shrink: 0; } /* A dropdown's open list - in the top layer, a gap below its box, at least as wide as the box, scrolling past its room */ .i8iManageTicketsDashboardDropdownList { position: fixed; inset: auto; inset-block-start: calc(var(--i8i-ManageTickets-DropdownList-Space-Top) + var(--i8i-ManageTickets-DropdownList-Space-Gap)); inset-inline-start: var(--i8i-ManageTickets-DropdownList-Space-Left); margin: 0; min-inline-size: var(--i8i-ManageTickets-DropdownList-Space-Width); max-inline-size: calc(100% - var(--i8i-ManageTickets-DropdownList-Space-Gap) * 2); max-block-size: min(var(--i8i-ManageTickets-DropdownList-Space-Height), var(--i8i-ManageTickets-DropdownList-Space-Room)); overflow-y: auto; overscroll-behavior: contain; } /* An open list stacks its rows */ .i8iManageTicketsDashboardDropdownList:popover-open { display: flex; flex-direction: column; } /* A list with no room below opens a gap above its box */ .i8iManageTicketsDashboardDropdownListAbove { inset-block-start: auto; inset-block-end: calc(var(--i8i-ManageTickets-DropdownList-Space-Bottom) + var(--i8i-ManageTickets-DropdownList-Space-Gap)); } /* One choice - one line, a slot for its check before its words */ .i8iManageTicketsDashboardDropdownListButtonOption { flex-shrink: 0; white-space: nowrap; } /* A choice's words - its name, and its line under it where it carries one */ .i8iManageTicketsDashboardDropdownListButtonOptionText { display: flex; flex-direction: column; } /* A choice's line under its name */ .i8iManageTicketsDashboardDropdownListButtonOptionTextDetail { color: var(--i8i-ManageTickets-Color-Muted); font-size: var(--i8i-ManageTickets-Label-Text-Size); } /* The check's slot, empty on a choice not picked */ .i8iManageTicketsDashboardDropdownListButtonOption::before { content: ""; flex-shrink: 0; inline-size: var(--i8i-ManageTickets-DropdownListButtonOption-Space-Mark); text-align: center; } /* The picked choice - its check, and its own border marking it out */ .i8iManageTicketsDashboardDropdownListButtonOptionPicked { border-color: var(--i8i-ManageTickets-Control-Color-Selected); } /* The picked choice's check */ .i8iManageTicketsDashboardDropdownListButtonOptionPicked::before { content: "\2713"; } /* A choice that cannot be picked */ .i8iManageTicketsDashboardDropdownListButtonOption[aria-disabled="true"] { opacity: var(--i8i-Opacity-050); cursor: default; } /* The choice the keyboard stands on - its own border */ .i8iManageTicketsDashboardDropdownListButtonOption:focus-visible { outline: none; border-style: solid; border-color: var(--i8i-ManageTickets-Control-Color-Focus); } /* Where forced colors are active, the choice the keyboard stands on shows an outline */ @media (forced-colors: active) { .i8iManageTicketsDashboardDropdownListButtonOption:focus-visible { outline: var(--i8i-ManageTickets-Control-Shape-BorderWidth) solid Highlight; } } /* A box's words before anything is typed */ .i8iManageTicketsDashboardFrame ::placeholder { color: var(--i8i-ManageTickets-Input-Color-Holder); opacity: 1; } /* A box the server refused */ .i8iManageTicketsDashboardFrame [aria-invalid="true"] { border-color: var(--i8i-ManageTickets-Input-Color-Invalid); } /* A short box - a percent, a fee */ .i8iManageTicketsDashboardInputShort { inline-size: var(--i8i-ManageTickets-InputShort-Space-Width); } /* A small box in the bulk bar */ .i8iManageTicketsDashboardInputSmall { inline-size: var(--i8i-ManageTickets-InputShort-Space-Width); min-block-size: var(--i8i-ManageTickets-ButtonSmall-Space-Height); padding: var(--i8i-ManageTickets-Space-Chip); } /* A wider small box in the bulk bar */ .i8iManageTicketsDashboardInputSmallWide { inline-size: calc(var(--i8i-ManageTickets-InputShort-Space-Width) * 2); min-block-size: var(--i8i-ManageTickets-ButtonSmall-Space-Height); padding: var(--i8i-ManageTickets-Space-Chip); } /* Every checkbox and radio, drawn by the page - a box in its own border, so its focus shows on that border as every other control's does; checked, it fills with the accent and carries its mark */ .i8iManageTicketsDashboardFrame :is(input[type="checkbox"], input[type="radio"]) { box-sizing: border-box; appearance: none; flex-shrink: 0; display: inline-grid; place-content: center; inline-size: var(--i8i-ManageTickets-Check-Space-Size); block-size: var(--i8i-ManageTickets-Check-Space-Size); margin: 0; border: var(--i8i-ManageTickets-Control-Shape-BorderWidth) solid var(--i8i-ManageTickets-Check-Color-Rest); border-radius: var(--i8i-ManageTickets-Check-Shape-Corner); background-color: var(--i8i-ManageTickets-Check-Color-Surface); vertical-align: middle; cursor: pointer; } /* A radio is round */ .i8iManageTicketsDashboardFrame input[type="radio"] { border-radius: var(--i8i-ManageTickets-Check-Shape-Round); } /* A checked box or radio fills with the accent */ .i8iManageTicketsDashboardFrame :is(input[type="checkbox"], input[type="radio"]):checked { border-color: var(--i8i-ManageTickets-Check-Color-Checked); background-color: var(--i8i-ManageTickets-Check-Color-Checked); } /* A checked box's tick - two edges of a small box, turned */ .i8iManageTicketsDashboardFrame input[type="checkbox"]:checked::before { content: ""; box-sizing: border-box; inline-size: var(--i8i-ManageTickets-Check-Space-MarkWidth); block-size: var(--i8i-ManageTickets-Check-Space-MarkHeight); border-inline-start: var(--i8i-ManageTickets-Control-Shape-BorderWidth) solid var(--i8i-ManageTickets-Check-Color-Mark); border-block-end: var(--i8i-ManageTickets-Control-Shape-BorderWidth) solid var(--i8i-ManageTickets-Check-Color-Mark); transform: rotate(-45deg); pointer-events: none; } /* A checked radio's dot */ .i8iManageTicketsDashboardFrame input[type="radio"]:checked::before { content: ""; box-sizing: border-box; inline-size: var(--i8i-ManageTickets-Check-Space-Dot); block-size: var(--i8i-ManageTickets-Check-Space-Dot); border-radius: var(--i8i-ManageTickets-Check-Shape-Round); background-color: var(--i8i-ManageTickets-Check-Color-Mark); pointer-events: none; } /* A box that cannot be changed - dimmed, and the pointer says so */ .i8iManageTicketsDashboardFrame :is(input[type="checkbox"], input[type="radio"]):disabled { opacity: var(--i8i-Opacity-050); cursor: not-allowed; } /* The checkbox that picks a listing or a group - as large as the smallest pointer target */ .i8iManageTicketsDashboardInputPick { inline-size: var(--i8i-ManageTickets-InputPick-Space-Width); block-size: var(--i8i-ManageTickets-InputPick-Space-Height); } /* A grid of fields - as many across as fit */ .i8iManageTicketsDashboardGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--i8i-ManageTickets-Grid-Space-Column)), 1fr)); gap: var(--i8i-ManageTickets-Space-Near); } /* A link standing on its own in a row of parts - not inside a sentence - stands a small target tall, its words centred - at the lowest weight, so a button's own height wins */ :where(.i8iManageTicketsDashboardRow) > :where(a) { display: inline-flex; align-items: center; min-block-size: var(--i8i-ManageTickets-Space-TargetSmall); } /* A grid of fields whose choices carry long words - a column matched to a file's column and its sample - fewer and wider across */ .i8iManageTicketsDashboardGridWide { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--i8i-ManageTickets-GridWide-Space-Column)), 1fr)); gap: var(--i8i-ManageTickets-Space-Near); } /* A row of parts - it wraps where it runs short */ .i8iManageTicketsDashboardRow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--i8i-ManageTickets-Space-Tight); } /* A box to check beside its words - the box keeps the words' first line, and long words wrap beside it, never under it */ .i8iManageTicketsDashboardCheck { display: flex; align-items: flex-start; gap: var(--i8i-ManageTickets-Space-Tight); cursor: pointer; } /* The box itself never shrinks beside long words */ .i8iManageTicketsDashboardCheck > input { flex: 0 0 auto; } /* A stack of parts, one over another */ .i8iManageTicketsDashboardStack { display: flex; flex-direction: column; gap: var(--i8i-ManageTickets-Space-Near); min-inline-size: 0; } /* A stack that is a list carries no bullets */ .i8iManageTicketsDashboardFrame :is(ul, ol).i8iManageTicketsDashboardStack { padding: 0; list-style: none; } /* ....... Labels ....... */ /* The shared shape of every pill */ .i8iManageTicketsDashboardLabelTag, .i8iManageTicketsDashboardLabelTagButton, .i8iManageTicketsDashboardLabelChip, .i8iManageTicketsDashboardLabelLeague, .i8iManageTicketsDashboardLabelSample, .i8iManageTicketsDashboardLabelWarn, .i8iManageTicketsDashboardLabelStatus { display: inline-flex; align-items: center; gap: var(--i8i-ManageTickets-Space-Hair); padding: var(--i8i-ManageTickets-Label-Space-Padding); border: var(--i8i-ManageTickets-Control-Shape-BorderWidth) solid transparent; border-radius: var(--i8i-ManageTickets-Label-Shape-Corner); font-size: var(--i8i-ManageTickets-Label-Text-Size); font-weight: var(--i8i-ManageTickets-Text-Semi); line-height: var(--i8i-ManageTickets-Text-Height); white-space: nowrap; } /* A tag */ .i8iManageTicketsDashboardLabelTag, .i8iManageTicketsDashboardLabelTagButton, .i8iManageTicketsDashboardLabelChip { background-color: var(--i8i-ManageTickets-LabelTag-Color-Surface); color: var(--i8i-ManageTickets-LabelTag-Color-Ink); } /* A tag that filters, and a chip that clears a filter */ .i8iManageTicketsDashboardLabelTagButton, .i8iManageTicketsDashboardLabelChip { min-block-size: var(--i8i-Height-0028); cursor: pointer; } /* A tag that filters, pressed */ .i8iManageTicketsDashboardLabelTagButton[aria-pressed="true"] { border-color: var(--i8i-ManageTickets-Control-Color-Selected); background-color: var(--i8i-ManageTickets-Color-Glow); color: var(--i8i-ManageTickets-Color-OnGlow); } /* A league's short name */ .i8iManageTicketsDashboardLabelLeague { background-color: var(--i8i-ManageTickets-Color-Line); color: var(--i8i-ManageTickets-Color-Ink); letter-spacing: var(--i8i-ManageTickets-Text-Spread); } /* The Sample mark */ .i8iManageTicketsDashboardLabelSample { background-color: var(--i8i-ManageTickets-LabelSample-Color-Surface); color: var(--i8i-ManageTickets-LabelSample-Color-Ink); } /* A warning pill - paused, needs a fix */ .i8iManageTicketsDashboardLabelWarn { background-color: var(--i8i-ManageTickets-LabelWarn-Color-Surface); color: var(--i8i-ManageTickets-LabelWarn-Color-Ink); } /* The lock where a value is hidden */ .i8iManageTicketsDashboardLabelLock { color: var(--i8i-ManageTickets-LabelLock-Color-Ink); font-size: var(--i8i-ManageTickets-Text-Small); } /* The lock's picture, drawn before its word */ .i8iManageTicketsDashboardLabelLock::before { content: "\1F512"; margin-inline-end: var(--i8i-Margin-004); } /* A listing's status - a pill, or a choice in the pill's dress */ .i8iManageTicketsDashboardLabelStatus { background-color: var(--i8i-ManageTickets-Color-Line); color: var(--i8i-ManageTickets-LabelStatusDraft-Color-Ink); } /* A status that is a choice */ :is(select, button).i8iManageTicketsDashboardLabelStatus { min-block-size: var(--i8i-Height-0028); cursor: pointer; } /* A listed status */ .i8iManageTicketsDashboardLabelStatusListed { color: var(--i8i-ManageTickets-LabelStatusListed-Color-Ink); } /* A scheduled status */ .i8iManageTicketsDashboardLabelStatusScheduled { color: var(--i8i-ManageTickets-LabelStatusScheduled-Color-Ink); } /* A sold status */ .i8iManageTicketsDashboardLabelStatusSold { color: var(--i8i-ManageTickets-LabelStatusSold-Color-Ink); } /* An expired status */ .i8iManageTicketsDashboardLabelStatusExpired { color: var(--i8i-ManageTickets-LabelStatusExpired-Color-Ink); } /* A partly sold status */ .i8iManageTicketsDashboardLabelStatusPartly { color: var(--i8i-ManageTickets-LabelStatusPartly-Color-Ink); } /* The dots before an in-hand word - in hand, not yet, and waiting */ .i8iManageTicketsDashboardLabelDotGood, .i8iManageTicketsDashboardLabelDotQuiet, .i8iManageTicketsDashboardLabelDotWarn { display: inline-block; inline-size: var(--i8i-ManageTickets-Space-Dot); block-size: var(--i8i-ManageTickets-Space-Dot); margin-inline-end: var(--i8i-Margin-006); border-radius: var(--i8i-ManageTickets-Shape-Round); background-color: var(--i8i-ManageTickets-Color-Edge); } /* The dot of tickets in hand */ .i8iManageTicketsDashboardLabelDotGood { background-color: var(--i8i-ManageTickets-Color-Good); } /* The dot of tickets not in hand while the game draws near */ .i8iManageTicketsDashboardLabelDotWarn { background-color: var(--i8i-ManageTickets-Color-Warn); } /* ....... Text ....... */ /* A section's heading inside a panel */ .i8iManageTicketsDashboardTextHead { font-size: var(--i8i-ManageTickets-Text-Head); font-weight: var(--i8i-ManageTickets-Text-Semi); line-height: var(--i8i-ManageTickets-Text-Tight); } /* Words that matter less */ .i8iManageTicketsDashboardTextMuted { color: var(--i8i-ManageTickets-Color-Muted); } /* Words a step leads with */ .i8iManageTicketsDashboardTextLead { font-size: var(--i8i-ManageTickets-Text-Lead); } /* Words of something that went well */ .i8iManageTicketsDashboardTextGood { color: var(--i8i-ManageTickets-Color-Good); } /* Words of something that failed or needs a fix */ .i8iManageTicketsDashboardTextAlert { color: var(--i8i-ManageTickets-Color-Alert); } /* Words of something to watch */ .i8iManageTicketsDashboardTextWarn { color: var(--i8i-ManageTickets-Color-Warn); } /* An alert line with nothing in it takes no room */ .i8iManageTicketsDashboardTextAlert:empty { display: none; } /* Words a screen reader speaks and no eye sees */ .i8iManageTicketsDashboardTextHidden { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Code and file headers - steady letters, wrapped */ .i8iManageTicketsDashboardCode { padding: var(--i8i-ManageTickets-Space-Cell); border-radius: var(--i8i-ManageTickets-Control-Shape-Corner); background-color: var(--i8i-ManageTickets-Input-Color-Surface); font-family: var(--i8i-ManageTickets-Text-Mono); font-size: var(--i8i-ManageTickets-Text-Small); white-space: pre-wrap; overflow-wrap: anywhere; } /* ....... Dialog ....... */ /* The shared shape of every dialog */ .i8iManageTicketsDashboardDialog, .i8iManageTicketsDashboardDialogWide, .i8iManageTicketsDashboardDialogSmall, .i8iManageTicketsDashboardDialogSide { inline-size: min(100% - 2 * var(--i8i-ManageTickets-Dialog-Space-Edge), var(--i8i-ManageTickets-Dialog-Space-Width)); max-inline-size: none; max-block-size: var(--i8i-ManageTickets-Dialog-Space-Height); padding: 0; border: var(--i8i-ManageTickets-Shape-BorderWidth) solid var(--i8i-ManageTickets-Dialog-Color-Line); border-radius: var(--i8i-ManageTickets-Dialog-Shape-Corner); background-color: var(--i8i-ManageTickets-Dialog-Color-Surface); color: var(--i8i-ManageTickets-Dialog-Color-Ink); box-shadow: var(--i8i-ManageTickets-Depth-Shadow); overflow: hidden; } /* A wide dialog - adding tickets, the panels */ .i8iManageTicketsDashboardDialogWide { inline-size: min(100% - 2 * var(--i8i-ManageTickets-Dialog-Space-Edge), var(--i8i-ManageTickets-DialogWide-Space-Width)); } /* A small dialog - a confirm */ .i8iManageTicketsDashboardDialogSmall { inline-size: min(100% - 2 * var(--i8i-ManageTickets-Dialog-Space-Edge), var(--i8i-ManageTickets-DialogSmall-Space-Width)); } /* The side dialog - one listing, standing against the viewport's end */ .i8iManageTicketsDashboardDialogSide { inline-size: min(100%, var(--i8i-ManageTickets-DialogSide-Space-Width)); block-size: var(--i8i-ManageTickets-DialogSide-Space-Height); max-block-size: var(--i8i-ManageTickets-DialogSide-Space-Height); margin-block: 0; margin-inline-end: 0; border-block: 0; border-inline-end: 0; border-radius: 0; } /* The shade behind an open dialog */ .i8iManageTicketsDashboardFrame dialog::backdrop { background-color: var(--i8i-ManageTickets-Dialog-Color-Shade); } /* A dialog's box - its head, its scrolling body, and its foot */ .i8iManageTicketsDashboardDialogBox { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; max-block-size: calc(var(--i8i-ManageTickets-Dialog-Space-Height) - 2 * var(--i8i-ManageTickets-Shape-BorderWidth)); } /* The side dialog's box runs the viewport's whole height */ .i8iManageTicketsDashboardDialogSide .i8iManageTicketsDashboardDialogBox { block-size: var(--i8i-ManageTickets-DialogSide-Space-Height); max-block-size: var(--i8i-ManageTickets-DialogSide-Space-Height); } /* The box's body takes the row that scrolls, whatever stands before it */ .i8iManageTicketsDashboardDialogBox > .i8iManageTicketsDashboardDialogBody { grid-row: 3; } /* The box's foot takes the last row, under the body */ .i8iManageTicketsDashboardDialogBox > .i8iManageTicketsDashboardDialogFoot { grid-row: 4; } /* A dialog's head - its title, and its close */ .i8iManageTicketsDashboardDialogHead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--i8i-ManageTickets-Space-Near); padding: var(--i8i-ManageTickets-Dialog-Space-Padding); } /* A dialog's title */ .i8iManageTicketsDashboardDialogHeadTextTitle { font-size: var(--i8i-ManageTickets-Text-Lead); font-weight: var(--i8i-ManageTickets-Text-Bold); line-height: var(--i8i-ManageTickets-Text-Tight); } /* A dialog's line under its title */ .i8iManageTicketsDashboardDialogHeadTextSub { margin-block-start: var(--i8i-Margin-004); color: var(--i8i-ManageTickets-Color-Muted); } /* A dialog's body - it scrolls where it runs long */ .i8iManageTicketsDashboardDialogBody { display: flex; flex-direction: column; gap: var(--i8i-ManageTickets-Space-Stack); min-block-size: 0; padding: var(--i8i-ManageTickets-Dialog-Space-Padding); overflow-y: auto; overscroll-behavior: contain; } /* A dialog's foot - its buttons at the end */ .i8iManageTicketsDashboardDialogFoot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--i8i-ManageTickets-Space-Tight); padding: var(--i8i-ManageTickets-Dialog-Space-Padding); border-block-start: var(--i8i-ManageTickets-Shape-BorderWidth) solid var(--i8i-ManageTickets-Dialog-Color-Line); } /* A foot with nothing in it takes no room */ .i8iManageTicketsDashboardDialogFoot:empty { display: none; } /* ....... Panels ....... */ /* One listing's facts - each name beside its value */ .i8iManageTicketsDashboardFacts { display: grid; grid-template-columns: max-content 1fr; gap: var(--i8i-ManageTickets-Space-Tight) var(--i8i-ManageTickets-Space-Stack); } /* A fact's name */ .i8iManageTicketsDashboardFacts dt { color: var(--i8i-ManageTickets-Color-Muted); } /* The seats of a listing - each one a chip */ .i8iManageTicketsDashboardSeats { display: flex; flex-wrap: wrap; gap: var(--i8i-ManageTickets-Space-Hair); padding: 0; list-style: none; } /* One seat - its number, and its state */ .i8iManageTicketsDashboardSeat { display: flex; flex-direction: column; align-items: center; min-inline-size: var(--i8i-Width-0056); padding: var(--i8i-ManageTickets-Space-Chip); border: var(--i8i-ManageTickets-Shape-BorderWidth) solid var(--i8i-ManageTickets-Color-Line); border-radius: var(--i8i-ManageTickets-Control-Shape-Corner); font-variant-numeric: tabular-nums; } /* A seat's state under its number */ .i8iManageTicketsDashboardSeat span { color: var(--i8i-ManageTickets-Color-Muted); font-size: var(--i8i-ManageTickets-Text-Small); } /* A seat in stock */ .i8iManageTicketsDashboardSeatStock { border-color: var(--i8i-ManageTickets-Color-Good); } /* A seat sold */ .i8iManageTicketsDashboardSeatSold { background-color: var(--i8i-ManageTickets-Color-Wash); } /* A seat whose game passed */ .i8iManageTicketsDashboardSeatExpired { border-color: var(--i8i-ManageTickets-Color-Alert); } /* A seat to pick for a sale */ .i8iManageTicketsDashboardSeatPick { display: inline-flex; align-items: center; gap: var(--i8i-ManageTickets-Space-Hair); min-block-size: var(--i8i-ManageTickets-ButtonSmall-Space-Height); padding: var(--i8i-ManageTickets-Space-Chip); border: var(--i8i-ManageTickets-Shape-BorderWidth) solid var(--i8i-ManageTickets-Color-Line); border-radius: var(--i8i-ManageTickets-Control-Shape-Corner); cursor: pointer; } /* A history - each action one line */ .i8iManageTicketsDashboardHistory { display: flex; flex-direction: column; padding: 0; list-style: none; } /* One line of the history */ .i8iManageTicketsDashboardHistory li { padding-block: var(--i8i-Padding-008); border-block-end: var(--i8i-ManageTickets-Shape-BorderWidth) solid var(--i8i-ManageTickets-Color-Line); } /* The drop zone a file lands on */ .i8iManageTicketsDashboardDrop { display: flex; flex-direction: column; align-items: center; gap: var(--i8i-ManageTickets-Space-Tight); padding: var(--i8i-Padding-040) var(--i8i-ManageTickets-Space-Box); border: var(--i8i-ManageTickets-Shape-BorderWidth) dashed var(--i8i-ManageTickets-Color-Edge); border-radius: var(--i8i-ManageTickets-Card-Shape-Corner); background-color: var(--i8i-ManageTickets-Color-Mist); text-align: center; } /* One game of a file being imported - its words, and its pick */ .i8iManageTicketsDashboardImportGame { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--i8i-MinWidth-280)), 1fr)); align-items: center; gap: var(--i8i-ManageTickets-Space-Tight); padding: var(--i8i-ManageTickets-Space-Cell); border: var(--i8i-ManageTickets-Shape-BorderWidth) solid var(--i8i-ManageTickets-Color-Line); border-radius: var(--i8i-ManageTickets-Control-Shape-Corner); } /* A file row that needs a fix */ .i8iManageTicketsDashboardImportRowBad { background-color: var(--i8i-ManageTickets-Color-AlertWash); } /* The game picked for new listings */ .i8iManageTicketsDashboardAddPicked { display: flex; flex-wrap: wrap; align-items: center; gap: var(--i8i-ManageTickets-Space-Tight); padding: var(--i8i-ManageTickets-Space-Cell); border-radius: var(--i8i-ManageTickets-Control-Shape-Corner); background-color: var(--i8i-ManageTickets-Color-Lift); } /* The games a search found */ .i8iManageTicketsDashboardAddResults { display: flex; flex-direction: column; gap: var(--i8i-ManageTickets-Space-Hair); max-block-size: var(--i8i-MaxHeight-0320); overflow-y: auto; } /* The search's results take no room while empty */ .i8iManageTicketsDashboardAddResults:empty { display: none; } /* One game a search found - a button that picks it */ .i8iManageTicketsDashboardAddResult { display: flex; flex-direction: column; align-items: flex-start; gap: var(--i8i-Gap-02); padding: var(--i8i-ManageTickets-Space-Cell); border: var(--i8i-ManageTickets-Shape-BorderWidth) solid var(--i8i-ManageTickets-Color-Line); border-radius: var(--i8i-ManageTickets-Control-Shape-Corner); background-color: var(--i8i-ManageTickets-ButtonQuiet-Color-Surface); text-align: start; cursor: pointer; } /* A found game under the pointer */ .i8iManageTicketsDashboardAddResult:hover { background-color: var(--i8i-ManageTickets-Color-Lift); } /* The grid that takes many rows */ .i8iManageTicketsDashboardAddGrid { border-collapse: collapse; inline-size: 100%; } /* The grid's head cells */ .i8iManageTicketsDashboardAddGrid th { padding: var(--i8i-Padding-004); color: var(--i8i-ManageTickets-Color-Muted); font-size: var(--i8i-ManageTickets-Text-Small); text-align: start; white-space: nowrap; } /* The grid's cells */ .i8iManageTicketsDashboardAddGrid td { padding: var(--i8i-Padding-002); } /* One cell of the grid */ .i8iManageTicketsDashboardAddCell { inline-size: 100%; min-inline-size: var(--i8i-Width-0064); min-block-size: var(--i8i-ManageTickets-ButtonSmall-Space-Height); padding: var(--i8i-ManageTickets-Space-Chip); border: var(--i8i-ManageTickets-Shape-BorderWidth) solid var(--i8i-ManageTickets-Input-Color-Line); border-radius: var(--i8i-BorderRadius-04); background-color: var(--i8i-ManageTickets-Input-Color-Surface); } /* One message of a Request */ .i8iManageTicketsDashboardMessage { display: flex; flex-direction: column; gap: var(--i8i-ManageTickets-Space-Hair); padding: var(--i8i-ManageTickets-Space-Cell); border: var(--i8i-ManageTickets-Shape-BorderWidth) solid var(--i8i-ManageTickets-Color-Line); border-radius: var(--i8i-ManageTickets-Control-Shape-Corner); } /* A message from the manage.tickets team */ .i8iManageTicketsDashboardMessageTeam { border-color: var(--i8i-ManageTickets-Color-Glow); background-color: var(--i8i-ManageTickets-Color-Mist); } /* A message's words, their line breaks kept */ .i8iManageTicketsDashboardMessageBody { white-space: pre-wrap; overflow-wrap: anywhere; } /* One Request in the person's list - a button that opens it */ .i8iManageTicketsDashboardRequestItem { display: flex; flex-wrap: wrap; align-items: center; gap: var(--i8i-ManageTickets-Space-Tight); inline-size: 100%; padding: var(--i8i-ManageTickets-Space-Cell); border: var(--i8i-ManageTickets-Shape-BorderWidth) solid var(--i8i-ManageTickets-Color-Line); border-radius: var(--i8i-ManageTickets-Control-Shape-Corner); background-color: var(--i8i-ManageTickets-ButtonQuiet-Color-Surface); text-align: start; cursor: pointer; } /* A Request under the pointer */ .i8iManageTicketsDashboardRequestItem:hover { background-color: var(--i8i-ManageTickets-Color-Lift); } /* One update of What's new */ .i8iManageTicketsDashboardNewsItem { display: flex; flex-direction: column; gap: var(--i8i-ManageTickets-Space-Hair); padding-block-end: var(--i8i-Padding-012); border-block-end: var(--i8i-ManageTickets-Shape-BorderWidth) solid var(--i8i-ManageTickets-Color-Line); } /* One member of the team */ .i8iManageTicketsDashboardTeamMember { display: flex; flex-direction: column; gap: var(--i8i-ManageTickets-Space-Tight); padding: var(--i8i-ManageTickets-Space-Box); border: var(--i8i-ManageTickets-Shape-BorderWidth) solid var(--i8i-ManageTickets-Color-Line); border-radius: var(--i8i-ManageTickets-Control-Shape-Corner); } /* A person's switches - as many across as fit */ .i8iManageTicketsDashboardTeamSwitches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--i8i-MinWidth-240)), 1fr)); gap: var(--i8i-ManageTickets-Space-Tight); } /* One settings section */ .i8iManageTicketsDashboardSettingsSection { display: flex; flex-direction: column; gap: var(--i8i-ManageTickets-Space-Tight); padding: var(--i8i-ManageTickets-Space-Box); border: var(--i8i-ManageTickets-Shape-BorderWidth) solid var(--i8i-ManageTickets-Color-Line); border-radius: var(--i8i-ManageTickets-Card-Shape-Corner); background-color: var(--i8i-ManageTickets-Card-Color-Surface); } /* A marketplace's name beside its fee */ .i8iManageTicketsDashboardSettingsName { min-inline-size: var(--i8i-MinWidth-120); } /* The welcome's sharing switch, and its words */ .i8iManageTicketsDashboardWelcomeSwitch, .i8iManageTicketsDashboardWelcomeAgree { display: flex; align-items: flex-start; gap: var(--i8i-ManageTickets-Space-Near); padding: var(--i8i-ManageTickets-Space-Box); border: var(--i8i-ManageTickets-Shape-BorderWidth) solid var(--i8i-ManageTickets-Color-Line); border-radius: var(--i8i-ManageTickets-Control-Shape-Corner); background-color: var(--i8i-ManageTickets-Color-Lift); cursor: pointer; } /* The welcome's boxes stand at the words' first line, and large */ .i8iManageTicketsDashboardWelcomeSwitch input, .i8iManageTicketsDashboardWelcomeAgree input { flex: 0 0 auto; inline-size: var(--i8i-Width-0020); block-size: var(--i8i-Height-0020); margin: var(--i8i-Margin-002) 0 0; } /* ....... Legal ....... */ /* The link from one legal page to the other, at the bar's end */ .i8iManageTicketsDashboardBarLegalLink { display: inline-flex; align-items: center; min-block-size: var(--i8i-ManageTickets-Space-Target); margin-inline-start: auto; font-weight: var(--i8i-ManageTickets-Text-Semi); } /* A legal page's text - one readable column */ .i8iManageTicketsDashboardLegal { display: flex; flex-direction: column; gap: var(--i8i-ManageTickets-Space-Near); max-inline-size: var(--i8i-MaxWidth-0800); font-size: var(--i8i-ManageTickets-Text-Head); line-height: var(--i8i-LineHeight-160); } /* The legal page's title */ .i8iManageTicketsDashboardLegal h1 { font-size: var(--i8i-ManageTickets-Text-Title); font-weight: var(--i8i-ManageTickets-Text-Bold); line-height: var(--i8i-ManageTickets-Text-Tight); } /* A legal section's heading */ .i8iManageTicketsDashboardLegal h2 { margin-block-start: var(--i8i-Margin-024); font-size: var(--i8i-ManageTickets-Text-Lead); font-weight: var(--i8i-ManageTickets-Text-Bold); } /* A legal part's heading */ .i8iManageTicketsDashboardLegal h3 { margin-block-start: var(--i8i-Margin-012); font-size: var(--i8i-ManageTickets-Text-Head); font-weight: var(--i8i-ManageTickets-Text-Semi); } /* A legal list */ .i8iManageTicketsDashboardLegal ul { display: flex; flex-direction: column; gap: var(--i8i-ManageTickets-Space-Hair); padding-inline-start: var(--i8i-Padding-024); } /* A legal table's cells read top-down */ .i8iManageTicketsDashboardLegal td { vertical-align: top; } /* ....... Shell ....... */ /* The layer over the page - the notice and the toasts, at the foot's end, passing every click through */ .i8iManageTicketsDashboardShell { position: fixed; inset: 0; z-index: var(--i8i-ManageTickets-Shell-Depth-Order); display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: var(--i8i-ManageTickets-Shell-Space-Gap); inline-size: auto; block-size: auto; margin: 0; padding: var(--i8i-ManageTickets-Shell-Space-Padding); padding-block-end: max(var(--i8i-ManageTickets-Shell-Space-Padding), env(safe-area-inset-bottom)); border: 0; background: transparent; color: var(--i8i-ManageTickets-Color-Ink); overflow: visible; pointer-events: none; } /* The restart notice */ .i8iManageTicketsDashboardNotice { display: flex; flex-direction: column; gap: var(--i8i-ManageTickets-Space-Tight); inline-size: min(100%, var(--i8i-ManageTickets-Notice-Space-Width)); padding: var(--i8i-ManageTickets-Space-Box); border: var(--i8i-ManageTickets-Shape-BorderWidth) solid var(--i8i-ManageTickets-Notice-Color-Line); border-radius: var(--i8i-ManageTickets-Card-Shape-Corner); background-color: var(--i8i-ManageTickets-Notice-Color-Surface); box-shadow: var(--i8i-ManageTickets-Depth-Shadow); pointer-events: auto; } /* The notice once the system is back */ .i8iManageTicketsDashboardNoticeGood { border-color: var(--i8i-ManageTickets-NoticeGood-Color-Line); } /* The notice's words */ .i8iManageTicketsDashboardNoticeText { font-weight: var(--i8i-ManageTickets-Text-Semi); } /* The notice's ask for more time */ .i8iManageTicketsDashboardNoticeMore { display: flex; flex-direction: column; gap: var(--i8i-ManageTickets-Space-Tight); } /* The reason box of the ask for more time */ .i8iManageTicketsDashboardNoticeInputReason { inline-size: 100%; min-block-size: var(--i8i-ManageTickets-NoticeInputReason-Space-Height); padding: var(--i8i-ManageTickets-Input-Space-Padding); border: var(--i8i-ManageTickets-Control-Shape-BorderWidth) solid var(--i8i-ManageTickets-Input-Color-Line); border-radius: var(--i8i-ManageTickets-Control-Shape-Corner); background-color: var(--i8i-ManageTickets-Input-Color-Surface); resize: vertical; } /* The toasts - newest at the foot */ .i8iManageTicketsDashboardToasts { display: flex; flex-direction: column; align-items: flex-end; gap: var(--i8i-ManageTickets-Shell-Space-Gap); } /* One toast */ .i8iManageTicketsDashboardToast, .i8iManageTicketsDashboardToastAlert { max-inline-size: var(--i8i-ManageTickets-Toast-Space-Width); margin: 0; padding: var(--i8i-ManageTickets-Space-Cell); border-inline-start: var(--i8i-ManageTickets-CardTicket-Shape-Stripe) solid var(--i8i-ManageTickets-Toast-Color-Line); border-radius: var(--i8i-ManageTickets-Control-Shape-Corner); background-color: var(--i8i-ManageTickets-Toast-Color-Surface); box-shadow: var(--i8i-ManageTickets-Depth-Shadow); pointer-events: auto; } /* A toast of something that failed */ .i8iManageTicketsDashboardToastAlert { border-inline-start-color: var(--i8i-ManageTickets-ToastAlert-Color-Line); } /* Where reduced motion is preferred, every change lands at once */ @media (prefers-reduced-motion: reduce) { .i8iManageTicketsDashboardFrame { --i8i-ManageTickets-Motion-Duration: 0s; --i8i-ManageTickets-Motion-Delay: 0s; } }