Spaces:
Running
Running
| /* | |
| * Explicit Edit Explorer styles. | |
| * | |
| * Colours are the Hugging Face tokens: HF's gray ramp, black text on white in | |
| * light mode, and HF's navy dark page colour (#0b0f19) in dark mode. Nothing | |
| * here invents its own palette. | |
| * | |
| * The score scale in the matrix is a single green (best) to red (worst) ramp. | |
| * app.mjs computes both the per-cell bar colour and the legend gradient from | |
| * the same stops, so the two can never drift apart. | |
| * | |
| * The four comparison series use the Okabe-Ito colour-blind safe hues, spread | |
| * across the spectrum. Measured worst pairwise OKLab distance stays above 0.07 | |
| * after protanopia, deuteranopia and tritanopia simulation, several times the | |
| * just-noticeable difference. Series also differ by marker shape. | |
| */ | |
| :root { | |
| color-scheme: light; | |
| /* Hugging Face gray ramp. */ | |
| --gray-50: oklch(98.5% 0.002 247.839); | |
| --gray-100: oklch(96.7% 0.003 264.542); | |
| --gray-200: oklch(92.8% 0.006 264.531); | |
| --gray-300: oklch(87.2% 0.01 258.338); | |
| --gray-400: oklch(70.7% 0.022 261.325); | |
| --gray-500: oklch(55.1% 0.027 264.364); | |
| --gray-700: oklch(37.3% 0.034 259.733); | |
| --gray-800: oklch(27.8% 0.033 256.848); | |
| --gray-925: #101623; | |
| --gray-950: #0b0f19; | |
| --blue-400: oklch(70.7% 0.165 254.624); | |
| --blue-600: oklch(54.6% 0.245 262.881); | |
| --page: #ffffff; | |
| --surface: #ffffff; | |
| --surface-muted: var(--gray-50); | |
| --surface-hover: var(--gray-100); | |
| --text: #000000; | |
| --muted: var(--gray-500); | |
| --faint: var(--gray-400); | |
| --border: var(--gray-200); | |
| --border-strong: var(--gray-300); | |
| --blue: var(--blue-600); | |
| --focus: var(--blue-600); | |
| --green: oklch(59.6% 0.145 163.225); | |
| --amber: oklch(64.6% 0.222 41.116); | |
| --red: oklch(57.7% 0.245 27.325); | |
| --red-soft: oklch(93.6% 0.032 17.717); | |
| /* | |
| * Comparison series: Okabe-Ito blue, vermillion, bluish green and reddish | |
| * purple, on white. Contrast stays above 3:1 for every series. | |
| */ | |
| --series-1: #0072b2; | |
| --series-2: #d55e00; | |
| --series-3: #009e73; | |
| --series-4: #b0468a; | |
| --plot-stroke: #ffffff; | |
| --page-pad: 16px; | |
| /* Spacing scale: the page inset, the gap between blocks, the padding inside a | |
| panel or a table cell, and the space under a heading. */ | |
| --gap: 16px; | |
| --pad-panel: 12px; | |
| --pad-cell: 8px; | |
| --pad-bar: 6px; | |
| --gap-head: 8px; | |
| /* One row height for every table on the page. */ | |
| --row-height: 38px; | |
| --radius-sm: 6px; | |
| --radius: 8px; | |
| --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; | |
| --sans: | |
| "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", | |
| "Noto Sans", Arial, sans-serif; | |
| /* Type scale: four sizes, one role each, and the only sizes this file uses. | |
| Monospace numerals read larger than sans at the same size, so the numbers | |
| and the text beside them take different steps on purpose. */ | |
| --text-display: 18px; /* the page title */ | |
| --text-heading: 15px; /* panel, section, and dialog headings */ | |
| --text-body: 13px; /* every readable label, cell, button, and note */ | |
| --text-small: 12px; /* monospace numerals and dense small labels */ | |
| --leading-title: 24px; | |
| --leading-body: 20px; | |
| --leading-tight: 16px; | |
| font-family: var(--sans); | |
| color: var(--text); | |
| background: var(--page); | |
| font-synthesis: none; | |
| } | |
| :root[data-theme="dark"] { | |
| color-scheme: dark; | |
| --page: var(--gray-950); | |
| --surface: var(--gray-950); | |
| --surface-muted: var(--gray-925); | |
| --surface-hover: #141c2e; | |
| --text: var(--gray-200); | |
| --muted: var(--gray-400); | |
| --faint: var(--gray-500); | |
| --border: var(--gray-800); | |
| --border-strong: var(--gray-700); | |
| --blue: var(--blue-400); | |
| --focus: var(--blue-400); | |
| --red-soft: oklch(25.8% 0.092 26.042); | |
| /* | |
| * The same four hue families, lifted for the dark page. Lightness is spread | |
| * on purpose: under dichromacy lightness is what keeps the series apart. | |
| */ | |
| --series-1: #6cb6f0; | |
| --series-2: #ff9b60; | |
| --series-3: #87e8bf; | |
| --series-4: #d168a7; | |
| --plot-stroke: #0b0f19; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root:not([data-theme="light"]) { | |
| color-scheme: dark; | |
| --page: var(--gray-950); | |
| --surface: var(--gray-950); | |
| --surface-muted: var(--gray-925); | |
| --surface-hover: #141c2e; | |
| --text: var(--gray-200); | |
| --muted: var(--gray-400); | |
| --faint: var(--gray-500); | |
| --border: var(--gray-800); | |
| --border-strong: var(--gray-700); | |
| --blue: var(--blue-400); | |
| --focus: var(--blue-400); | |
| --red-soft: oklch(25.8% 0.092 26.042); | |
| --series-1: #6cb6f0; | |
| --series-2: #ff9b60; | |
| --series-3: #87e8bf; | |
| --series-4: #d168a7; | |
| --plot-stroke: #0b0f19; | |
| } | |
| } | |
| /* --------------------------------------------------------------- loading */ | |
| .loader { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 50; | |
| display: grid; | |
| place-content: center; | |
| justify-items: center; | |
| gap: 18px; | |
| background: var(--page); | |
| } | |
| .loader[hidden] { | |
| display: none; | |
| } | |
| /* A conic arc reads as motion far better than a plain ring. */ | |
| .loader-ring { | |
| width: 54px; | |
| height: 54px; | |
| border-radius: 50%; | |
| background: conic-gradient(from 0deg, transparent 0 30%, var(--blue)); | |
| mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); | |
| animation: loader-spin 900ms linear infinite; | |
| } | |
| .loader-text { | |
| margin: 0; | |
| color: var(--muted); | |
| font-size: var(--text-body); | |
| } | |
| .loader-bar { | |
| width: 220px; | |
| height: 4px; | |
| overflow: hidden; | |
| border-radius: 999px; | |
| background: var(--surface-muted); | |
| } | |
| .loader-detail { | |
| margin: 0; | |
| color: var(--faint); | |
| font-size: var(--text-small); | |
| } | |
| .loader-bar i { | |
| display: block; | |
| width: 0; | |
| height: 100%; | |
| border-radius: 999px; | |
| background: var(--blue); | |
| transition: width 220ms ease; | |
| } | |
| @keyframes loader-spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .loader-ring { | |
| animation-duration: 3s; | |
| } | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html { | |
| background: var(--page); | |
| } | |
| body { | |
| margin: 0; | |
| min-width: 320px; | |
| overflow-x: hidden; | |
| background: var(--page); | |
| color: var(--text); | |
| /* One type scale for the whole page: four steps, one role each. Every | |
| font-size in this file is one of them, so text cannot drift apart. */ | |
| font-size: var(--text-body); | |
| line-height: var(--leading-body); | |
| } | |
| button, | |
| input { | |
| font: inherit; | |
| } | |
| button, | |
| a { | |
| touch-action: manipulation; | |
| } | |
| a { | |
| color: var(--blue); | |
| text-underline-offset: 2px; | |
| } | |
| button:focus-visible, | |
| a:focus-visible, | |
| [tabindex]:focus-visible { | |
| outline: 2px solid var(--focus); | |
| outline-offset: 2px; | |
| } | |
| [hidden] { | |
| display: none ; | |
| } | |
| main { | |
| width: 100%; | |
| } | |
| /* ---------------------------------------------------------------- status bar */ | |
| .status-bar { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| min-height: 48px; | |
| padding-inline: var(--page-pad); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .status-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 3px 10px 3px 8px; | |
| border: 1px solid var(--border); | |
| border-radius: 999px; | |
| background: var(--surface-muted); | |
| font-size: var(--text-body); | |
| font-weight: 600; | |
| } | |
| .status-dot { | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 999px; | |
| background: var(--green); | |
| } | |
| .status-badge:has(#load-status[data-kind="loading"]) .status-dot { | |
| background: var(--amber); | |
| } | |
| #load-status[data-kind="error"] { | |
| color: var(--red); | |
| } | |
| .status-meta { | |
| margin: 0 0 0 auto; | |
| display: flex; | |
| gap: 20px; | |
| font-size: var(--text-small); | |
| } | |
| .status-meta div { | |
| min-width: 0; | |
| } | |
| .status-meta dt { | |
| color: var(--faint); | |
| } | |
| .status-meta dd { | |
| margin: 0; | |
| color: var(--muted); | |
| font-family: var(--mono); | |
| font-size: var(--text-small); | |
| } | |
| .error-help { | |
| margin: 0; | |
| color: var(--red); | |
| font-size: var(--text-body); | |
| } | |
| /* ----------------------------------------------------------------- toolbar */ | |
| .explorer-toolbar { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| padding: 16px 0 14px; | |
| padding-inline: var(--page-pad); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .toolbar-heading { | |
| min-width: 0; | |
| } | |
| .explorer-toolbar h1 { | |
| margin: 0; | |
| font-size: var(--text-display); | |
| font-weight: 600; | |
| line-height: var(--leading-title); | |
| } | |
| .toolbar-heading p { | |
| margin: 2px 0 0; | |
| color: var(--muted); | |
| font-size: var(--text-body); | |
| } | |
| .view-actions { | |
| margin-left: auto; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| min-width: 0; | |
| } | |
| .icon-button { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 6px; | |
| height: 34px; | |
| min-width: 32px; | |
| padding: 0 9px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| background: var(--surface); | |
| color: var(--muted); | |
| font-size: var(--text-body); | |
| font-weight: 500; | |
| cursor: pointer; | |
| } | |
| .icon-button:hover { | |
| background: var(--surface-hover); | |
| color: var(--text); | |
| } | |
| .resource-link { | |
| text-decoration: none; | |
| white-space: nowrap; | |
| } | |
| .icon-button svg { | |
| width: 15px; | |
| height: 15px; | |
| fill: none; | |
| stroke: currentColor; | |
| stroke-width: 1.8; | |
| } | |
| .active-filters { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| min-width: 0; | |
| overflow-x: auto; | |
| scrollbar-width: none; | |
| } | |
| .active-filters::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .active-filter { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| height: 34px; | |
| padding: 0 4px 0 9px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| background: var(--surface); | |
| font-size: var(--text-body); | |
| white-space: nowrap; | |
| } | |
| .active-filter b { | |
| color: var(--faint); | |
| font-weight: 500; | |
| } | |
| .active-filter span { | |
| color: var(--text); | |
| font-weight: 500; | |
| max-width: 12rem; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .active-filter button { | |
| width: 20px; | |
| height: 20px; | |
| display: grid; | |
| place-items: center; | |
| border: 0; | |
| border-radius: 999px; | |
| background: transparent; | |
| color: var(--faint); | |
| font-size: var(--text-body); | |
| line-height: 1; | |
| cursor: pointer; | |
| } | |
| .active-filter button:hover { | |
| background: var(--border); | |
| color: var(--text); | |
| } | |
| /* ------------------------------------------------------------ section header */ | |
| .results-section { | |
| padding: 0; | |
| } | |
| .results-subhead { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| padding: 12px 0; | |
| padding-inline: var(--page-pad); | |
| color: var(--muted); | |
| font-size: var(--text-body); | |
| } | |
| .results-subhead p { | |
| margin: 0; | |
| } | |
| .results-subhead a { | |
| white-space: nowrap; | |
| } | |
| /* ------------------------------------------------------- summary and panels */ | |
| .summary-row { | |
| display: grid; | |
| /* One panel: the matrix holds the model totals and every harness beside them. */ | |
| grid-template-columns: minmax(0, 1fr); | |
| gap: var(--gap); | |
| padding: var(--gap) 0; | |
| padding-inline: var(--page-pad); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .panel { | |
| min-width: 0; | |
| } | |
| /* Each panel is its own surface, so the page reads as a set of blocks. */ | |
| .matrix-panel, | |
| .selection-block { | |
| padding: var(--pad-panel); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| background: var(--surface-muted); | |
| } | |
| .matrix-panel .matrix-shell { | |
| border: 0; | |
| } | |
| .panel-heading { | |
| display: flex; | |
| align-items: baseline; | |
| justify-content: space-between; | |
| gap: var(--pad-panel); | |
| margin-bottom: var(--gap-head); | |
| } | |
| .panel-heading h2 { | |
| margin: 0; | |
| font-size: var(--text-heading); | |
| font-weight: 600; | |
| } | |
| .panel-heading p { | |
| margin: 0; | |
| color: var(--muted); | |
| font-size: var(--text-body); | |
| } | |
| .matrix-heading-meta { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| } | |
| .matrix-metric-control { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| color: var(--muted); | |
| font-size: var(--text-small); | |
| } | |
| .matrix-metric-control select { | |
| min-height: 30px; | |
| padding: 4px 24px 4px 8px; | |
| border: 1px solid var(--border-strong); | |
| border-radius: var(--radius-sm); | |
| background: var(--surface); | |
| color: var(--text); | |
| font: inherit; | |
| } | |
| .panel-heading button { | |
| height: 28px; | |
| padding: 0 10px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| background: var(--surface); | |
| color: var(--muted); | |
| font-size: var(--text-body); | |
| cursor: pointer; | |
| } | |
| .panel-heading button:hover { | |
| background: var(--surface-hover); | |
| color: var(--text); | |
| } | |
| /* ------------------------------------------------------------------- matrix */ | |
| .matrix-shell { | |
| overflow-x: auto; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| scrollbar-color: var(--border-strong) transparent; | |
| scrollbar-width: thin; | |
| } | |
| .matrix-shell::-webkit-scrollbar { | |
| height: 7px; | |
| } | |
| .matrix-shell::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| .matrix-shell::-webkit-scrollbar-thumb { | |
| border-radius: 999px; | |
| background: var(--border-strong); | |
| } | |
| .matrix-shell.can-scroll-right { | |
| box-shadow: inset -12px 0 10px -12px rgb(0 0 0 / 45%); | |
| } | |
| .matrix-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| table-layout: fixed; | |
| font-size: var(--text-body); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .matrix-table th, | |
| .matrix-table td { | |
| min-height: calc(var(--row-height) + 12px); | |
| padding: 0; | |
| border-right: 1px solid var(--border); | |
| border-bottom: 1px solid var(--border); | |
| text-align: center; | |
| } | |
| .matrix-table tr:last-child > * { | |
| border-bottom: 0; | |
| } | |
| .matrix-table tr > *:last-child { | |
| border-right: 0; | |
| } | |
| .matrix-table thead th { | |
| min-height: calc(var(--row-height) + 12px); | |
| padding: 0; | |
| background: var(--surface); | |
| color: var(--text); | |
| font-family: var(--mono); | |
| font-size: var(--text-body); | |
| font-weight: 500; | |
| text-align: left; | |
| white-space: normal; | |
| overflow-wrap: anywhere; | |
| } | |
| /* The overall column summarises the row, so it reads as a label, not a button. */ | |
| .matrix-overall-head { | |
| width: 6rem; | |
| padding-inline: var(--pad-cell) ; | |
| color: var(--text); | |
| } | |
| .matrix-model-column { | |
| position: sticky; | |
| left: 0; | |
| z-index: 2; | |
| width: 10rem; | |
| } | |
| /* A continuous left stripe ties the model summary to its provider rows. */ | |
| .matrix-table tbody .matrix-expanded-model::before { | |
| content: ""; | |
| position: absolute; | |
| z-index: 1; | |
| top: 0; | |
| bottom: -1px; | |
| left: 0; | |
| width: 2px; | |
| background: var(--blue); | |
| pointer-events: none; | |
| } | |
| .matrix-table thead .matrix-model-column { | |
| z-index: 3; | |
| background: var(--surface); | |
| } | |
| .matrix-model-column::after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| width: 1px; | |
| background: var(--border-strong); | |
| pointer-events: none; | |
| } | |
| .matrix-shell.can-scroll-left .matrix-model-column::after { | |
| box-shadow: 5px 0 8px rgb(0 0 0 / 28%); | |
| } | |
| .matrix-table tbody th { | |
| width: 10rem; | |
| padding: 0; | |
| background: var(--surface); | |
| color: var(--text); | |
| text-align: left; | |
| font-family: var(--mono); | |
| font-size: var(--text-body); | |
| font-weight: 500; | |
| white-space: normal; | |
| overflow-wrap: anywhere; | |
| } | |
| .matrix-table tbody th.matrix-model-column .matrix-header { | |
| padding-right: 58px; | |
| } | |
| /* | |
| * Cells stay neutral: the score is plain text and the scale is carried by a | |
| * thin bar under the number, so the table never turns into a colour patchwork. | |
| */ | |
| .matrix-cell { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| border: 0; | |
| border-radius: 0; | |
| background: transparent; | |
| color: var(--text); | |
| cursor: pointer; | |
| font-family: var(--mono); | |
| font-size: var(--text-body); | |
| } | |
| .matrix-cell::after { | |
| content: ""; | |
| position: absolute; | |
| right: 8px; | |
| bottom: 4px; | |
| left: 8px; | |
| height: 2px; | |
| background: var(--score-color, var(--border-strong)); | |
| } | |
| .matrix-table td:hover { | |
| background: var(--surface-hover); | |
| } | |
| /* | |
| * A selected cell is a thin rectangle in the colour of its series. The frame | |
| * says which comparison the cell belongs to; the score strip below the number | |
| * keeps saying how good the score is. | |
| */ | |
| .matrix-table td.selected .matrix-cell { | |
| box-shadow: inset 0 0 0 1px var(--selection-color, var(--blue)); | |
| } | |
| .matrix-missing { | |
| color: var(--faint); | |
| } | |
| .matrix-value-missing { | |
| color: var(--faint); | |
| } | |
| .matrix-value-missing::after { | |
| display: none; | |
| } | |
| /* Header labels open the model or harness behind the row or column. */ | |
| .matrix-header { | |
| width: 100%; | |
| min-height: calc(var(--row-height) + 12px); | |
| display: flex; | |
| align-items: center; | |
| justify-content: flex-start; | |
| padding: 0 32px 0 8px; | |
| border: 0; | |
| background: transparent; | |
| color: inherit; | |
| font: inherit; | |
| font-weight: inherit; | |
| text-align: inherit; | |
| cursor: pointer; | |
| } | |
| .matrix-header-label { | |
| display: block; | |
| padding-block: var(--pad-cell); | |
| overflow-wrap: anywhere; | |
| line-height: 1.2; | |
| white-space: normal; | |
| } | |
| .matrix-table tbody .matrix-header { | |
| justify-content: flex-start; | |
| } | |
| .matrix-table thead th:not(.matrix-model-column) { | |
| position: relative; | |
| } | |
| .matrix-quick-filter { | |
| position: absolute; | |
| top: 50%; | |
| right: 5px; | |
| width: 24px; | |
| height: 24px; | |
| display: grid; | |
| place-items: center; | |
| padding: 0; | |
| border: 0; | |
| border-radius: 3px; | |
| background: transparent; | |
| color: var(--faint); | |
| cursor: pointer; | |
| transform: translateY(-50%); | |
| } | |
| .matrix-table thead .matrix-header { | |
| padding-right: 58px; | |
| } | |
| .matrix-header-actions { | |
| position: absolute; | |
| top: 50%; | |
| right: 4px; | |
| display: flex; | |
| align-items: center; | |
| transform: translateY(-50%); | |
| } | |
| .matrix-header-actions .matrix-quick-filter { | |
| position: static; | |
| transform: none; | |
| } | |
| .matrix-expand-toggle { | |
| width: 24px; | |
| height: 24px; | |
| display: grid; | |
| place-items: center; | |
| padding: 0; | |
| border: 0; | |
| border-radius: 3px; | |
| background: transparent; | |
| color: var(--blue); | |
| cursor: pointer; | |
| font: 600 20px/1 var(--sans); | |
| } | |
| .matrix-model-toggle span { | |
| display: inline-block; | |
| line-height: 1; | |
| } | |
| .matrix-model-toggle[aria-expanded="true"] span { | |
| transform: rotate(90deg); | |
| } | |
| .matrix-expand-toggle:hover, | |
| .matrix-expand-toggle:focus-visible { | |
| background: var(--surface-hover); | |
| color: var(--text); | |
| } | |
| .matrix-expanded-head { | |
| box-shadow: inset 0 2px var(--blue); | |
| } | |
| .matrix-quick-filter:hover, | |
| .matrix-quick-filter:focus-visible { | |
| background: var(--surface-hover); | |
| color: var(--text); | |
| } | |
| .matrix-quick-filter.active { | |
| color: var(--blue); | |
| } | |
| .matrix-quick-filter svg { | |
| width: 14px; | |
| height: 14px; | |
| fill: none; | |
| stroke: currentColor; | |
| stroke-width: 1.8; | |
| } | |
| .matrix-header:hover, | |
| .matrix-header:focus-visible { | |
| background: var(--surface-hover); | |
| color: var(--blue); | |
| } | |
| .matrix-legend { | |
| display: flex; | |
| align-items: center; | |
| justify-content: flex-end; | |
| gap: 8px; | |
| padding-top: 10px; | |
| color: var(--faint); | |
| font-size: var(--text-small); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| #matrix-scale-label { | |
| margin-right: 2px; | |
| color: var(--muted); | |
| font-weight: 600; | |
| } | |
| .matrix-legend-ramp { | |
| width: 120px; | |
| height: 6px; | |
| border-radius: 999px; | |
| } | |
| /* --------------------------------------------------------------- selection */ | |
| .selection-panel { | |
| padding: var(--gap) 0; | |
| padding-inline: var(--page-pad); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| /* The comparison names what it shows and how to stop it. */ | |
| .selection-bar { | |
| margin-bottom: var(--gap); | |
| } | |
| /* The two comparison tables sit side by side and share the row. */ | |
| .selection-body { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); | |
| grid-template-areas: "families tools"; | |
| gap: var(--gap); | |
| align-items: start; | |
| } | |
| .selection-block { | |
| min-width: 0; | |
| } | |
| .selection-block-families { | |
| grid-area: families; | |
| } | |
| .selection-block-tools { | |
| grid-area: tools; | |
| } | |
| /* | |
| * The header must fit a long model name in a narrow column, so it wraps instead | |
| * of running into the neighbouring header. Its colour is painted on an inset | |
| * layer, not on the cell, so the block is exactly as wide as the value bar | |
| * below it and neighbouring headers keep the same gap as neighbouring bars. | |
| */ | |
| .tool-usage-table thead th.selection-head { | |
| position: relative; | |
| background: transparent; | |
| white-space: normal; | |
| } | |
| .tool-usage-table thead th.selection-head::before { | |
| position: absolute; | |
| inset: 0 var(--pad-cell); | |
| background: color-mix(in oklch, var(--selection-color, var(--blue)), transparent 84%); | |
| content: ""; | |
| } | |
| /* An inline-block button inside a table cell adds its own line box, which made | |
| a two-line header twice as tall as the text in it. */ | |
| .tool-usage-table thead th.selection-head .selection-label { | |
| position: relative; | |
| display: block; | |
| /* The same inner padding the value bar uses, so the two texts line up. */ | |
| padding-inline: var(--pad-bar); | |
| /* Two lines inside one row height. */ | |
| line-height: var(--leading-tight); | |
| } | |
| /* The harness names the column and the model separates two columns that share | |
| a harness, so the harness leads and the longer model name follows it. */ | |
| .selection-model, | |
| .selection-source, | |
| .selection-harness { | |
| display: block; | |
| overflow-wrap: break-word; | |
| } | |
| .selection-model { | |
| color: var(--muted); | |
| font-size: var(--text-small); | |
| font-weight: 400; | |
| } | |
| .selection-source { | |
| overflow: hidden; | |
| color: var(--faint); | |
| font-size: 10px; | |
| font-weight: 400; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .selection-label { | |
| max-width: 100%; | |
| padding: 0; | |
| border: 0; | |
| background: transparent; | |
| color: inherit; | |
| font: inherit; | |
| text-align: inherit; | |
| cursor: pointer; | |
| } | |
| .selection-label:hover, | |
| .selection-label:focus-visible { | |
| color: var(--blue); | |
| text-decoration: underline; | |
| } | |
| .tool-usage-section { | |
| border-top: 1px solid var(--border); | |
| margin-top: 20px; | |
| padding-top: 16px; | |
| } | |
| .tool-usage-section h3 { | |
| margin: 0; | |
| font-size: var(--text-heading); | |
| } | |
| .tool-usage-shell { | |
| margin-top: 10px; | |
| overflow-x: auto; | |
| } | |
| .tool-usage-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| table-layout: fixed; | |
| font-size: var(--text-body); | |
| } | |
| .tool-usage-table th, | |
| .tool-usage-table td { | |
| height: var(--row-height); | |
| padding: 0 var(--pad-cell); | |
| border-top: 1px solid var(--border); | |
| text-align: left; | |
| vertical-align: middle; | |
| } | |
| .tool-usage-table thead th { | |
| border-top: 0; | |
| overflow: hidden; | |
| color: var(--text); | |
| font-weight: 600; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .tool-usage-table th:first-child { | |
| width: 8.5rem; | |
| font-family: var(--mono); | |
| font-weight: 600; | |
| } | |
| .tool-usage-bar { | |
| position: relative; | |
| display: block; | |
| width: 100%; | |
| padding: 5px var(--pad-bar); | |
| overflow: hidden; | |
| border: 0; | |
| border-radius: 3px; | |
| /* The track must differ from the panel behind it, or the bar reads as | |
| shorter than the header above it. */ | |
| background: var(--border); | |
| color: inherit; | |
| font: inherit; | |
| text-align: left; | |
| cursor: pointer; | |
| } | |
| .tool-usage-bar:hover { | |
| outline: 1px solid var(--blue); | |
| } | |
| .tool-usage-bar::before { | |
| position: absolute; | |
| inset: 0 auto 0 0; | |
| width: var(--bar-width); | |
| background: color-mix(in oklch, var(--bar-color), transparent 72%); | |
| content: ""; | |
| } | |
| .tool-usage-bar span { | |
| position: relative; | |
| font-family: var(--mono); | |
| font-size: var(--text-body); | |
| } | |
| /* A shape, not only a colour, marks the better and worse end of a row. */ | |
| .tool-usage-mark { | |
| position: relative; | |
| margin-right: 5px; | |
| font-size: var(--text-small); | |
| } | |
| .tool-usage-mark-best { | |
| color: var(--green); | |
| } | |
| .tool-usage-mark-worst { | |
| color: var(--red); | |
| } | |
| .tool-usage-missing { | |
| color: var(--faint); | |
| } | |
| /* ------------------------------------------------------- leaderboard table */ | |
| .table-guide { | |
| max-width: 48rem; | |
| margin: 0 var(--page-pad) 10px; | |
| color: var(--muted); | |
| font-size: var(--text-body); | |
| } | |
| .matrix-guide { | |
| margin: 0 0 var(--gap-head); | |
| } | |
| .table-guide summary { | |
| width: max-content; | |
| color: var(--blue); | |
| cursor: pointer; | |
| } | |
| .table-guide p { | |
| margin: 6px 0 0; | |
| line-height: 1.5; | |
| } | |
| .results-controls { | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| justify-content: flex-end; | |
| gap: 8px; | |
| } | |
| .column-settings { | |
| position: relative; | |
| } | |
| .column-settings > summary { | |
| min-height: 30px; | |
| display: flex; | |
| align-items: center; | |
| padding: 0 10px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| background: var(--surface); | |
| color: var(--text); | |
| cursor: pointer; | |
| list-style: none; | |
| white-space: nowrap; | |
| } | |
| .column-settings > summary::-webkit-details-marker { | |
| display: none; | |
| } | |
| .column-settings-panel { | |
| position: absolute; | |
| z-index: 20; | |
| top: calc(100% + 5px); | |
| right: 0; | |
| width: 260px; | |
| max-height: min(65vh, 560px); | |
| padding: 10px; | |
| border: 1px solid var(--border-strong); | |
| border-radius: var(--radius); | |
| background: var(--surface); | |
| box-shadow: 0 12px 28px rgb(0 0 0 / 14%); | |
| overflow-y: auto; | |
| } | |
| .column-settings-heading { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 8px; | |
| } | |
| .column-settings-heading button { | |
| padding: 3px 7px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| background: transparent; | |
| color: var(--muted); | |
| cursor: pointer; | |
| } | |
| .column-settings-panel > p { | |
| margin: 5px 0 8px; | |
| color: var(--muted); | |
| font-size: var(--text-small); | |
| } | |
| .column-settings-list { | |
| display: grid; | |
| gap: 2px; | |
| } | |
| .column-setting { | |
| position: relative; | |
| min-height: 30px; | |
| display: grid; | |
| grid-template-columns: 20px 18px minmax(0, 1fr) 24px 24px; | |
| align-items: center; | |
| gap: 4px; | |
| padding: 3px 5px; | |
| border-radius: var(--radius-sm); | |
| cursor: grab; | |
| user-select: none; | |
| } | |
| .column-setting:hover { | |
| background: var(--surface-hover); | |
| } | |
| .column-setting.dragging { | |
| opacity: 0.45; | |
| } | |
| .column-setting.column-drop-before::before, | |
| .column-setting.column-drop-after::after { | |
| content: ""; | |
| position: absolute; | |
| z-index: 2; | |
| left: 2px; | |
| right: 2px; | |
| height: 2px; | |
| border-radius: 2px; | |
| background: var(--blue); | |
| box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue) 24%, transparent); | |
| pointer-events: none; | |
| } | |
| .column-setting.column-drop-before::before { | |
| top: -2px; | |
| } | |
| .column-setting.column-drop-after::after { | |
| bottom: -2px; | |
| } | |
| .column-drag-handle { | |
| color: var(--faint); | |
| font-family: var(--mono); | |
| } | |
| .column-move { | |
| width: 24px; | |
| height: 24px; | |
| padding: 0; | |
| border: 1px solid transparent; | |
| border-radius: var(--radius-sm); | |
| background: transparent; | |
| color: var(--muted); | |
| cursor: pointer; | |
| } | |
| .column-move:hover:not(:disabled), | |
| .column-move:focus-visible { | |
| border-color: var(--border); | |
| background: var(--surface-hover); | |
| color: var(--text); | |
| } | |
| .column-move:disabled { | |
| color: var(--faint); | |
| cursor: default; | |
| } | |
| #range-filters { | |
| flex: 1; | |
| } | |
| #range-filters:empty { | |
| display: none; | |
| } | |
| /* Clickable table cells: plain text until hovered. */ | |
| .cell-detail { | |
| display: inline-block; | |
| padding: 0; | |
| border: 0; | |
| border-bottom: 1px dotted transparent; | |
| background: transparent; | |
| color: inherit; | |
| font: inherit; | |
| font-variant-numeric: inherit; | |
| text-align: inherit; | |
| cursor: pointer; | |
| } | |
| .cell-detail:hover, | |
| .cell-detail:focus-visible { | |
| border-bottom-color: var(--faint); | |
| color: var(--blue); | |
| } | |
| /* Column filter button, always visible next to the sort slot. */ | |
| .column-filter { | |
| display: inline-block; | |
| vertical-align: middle; | |
| width: 14px; | |
| height: 14px; | |
| margin: 0 0 0 5px; | |
| padding: 0; | |
| border: 0; | |
| border-radius: 3px; | |
| background: transparent; | |
| color: var(--faint); | |
| cursor: pointer; | |
| } | |
| .column-filter svg { | |
| display: block; | |
| width: 12px; | |
| height: 12px; | |
| fill: none; | |
| stroke: currentColor; | |
| stroke-width: 2; | |
| stroke-linecap: round; | |
| } | |
| .column-filter:hover, | |
| .column-filter:focus-visible { | |
| color: var(--text); | |
| } | |
| .column-filter-active { | |
| color: var(--blue); | |
| } | |
| .cell-details { | |
| /* Wide enough that a metric row stays on one line. */ | |
| width: min(880px, calc(100vw - 24px)); | |
| max-height: calc(100vh - 24px); | |
| padding: 20px; | |
| overflow: auto; | |
| border: 1px solid var(--border-strong); | |
| border-radius: var(--radius); | |
| background: var(--surface); | |
| color: var(--text); | |
| box-shadow: 0 18px 50px rgb(0 0 0 / 25%); | |
| } | |
| .cell-details::backdrop { | |
| background: rgb(0 0 0 / 35%); | |
| } | |
| .cell-details-heading { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| gap: 16px; | |
| } | |
| .cell-details-heading h2 { | |
| margin: 0; | |
| font-size: var(--text-heading); | |
| } | |
| .cell-details-heading p { | |
| margin: 4px 0 0; | |
| color: var(--muted); | |
| font-size: var(--text-body); | |
| } | |
| /* Header tokens are links, so they must look like links before hover. */ | |
| .cell-details-heading .details-link { | |
| text-decoration: underline; | |
| text-decoration-color: var(--border-strong); | |
| text-underline-offset: 2px; | |
| } | |
| .cell-details-heading .details-link:hover { | |
| text-decoration-color: currentColor; | |
| } | |
| /* Grid centring keeps the glyph on the optical centre of the button. */ | |
| .cell-details-heading .dialog-close { | |
| display: grid; | |
| place-items: center; | |
| width: 30px; | |
| height: 30px; | |
| padding: 0; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| background: transparent; | |
| color: var(--muted); | |
| font-family: var(--mono); | |
| font-size: var(--text-heading); | |
| line-height: 1; | |
| cursor: pointer; | |
| } | |
| .cell-details-heading .dialog-close:hover { | |
| border-color: var(--border-strong); | |
| color: var(--text); | |
| } | |
| .details-section { | |
| margin-top: 18px; | |
| } | |
| .details-section h3 { | |
| margin: 0 0 6px; | |
| font-size: var(--text-heading); | |
| } | |
| .details-section p { | |
| margin: 0 0 8px; | |
| color: var(--muted); | |
| font-size: var(--text-body); | |
| line-height: 1.5; | |
| } | |
| /* auto-fit fits every observed value on one line when the width allows. Cells | |
| draw their own borders, so a short last row leaves no grey hole. */ | |
| .details-metrics { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); | |
| margin: 0; | |
| overflow: hidden; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| background: var(--surface); | |
| } | |
| .details-metrics div { | |
| padding: 10px; | |
| border-right: 1px solid var(--border); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .details-metrics dt { | |
| color: var(--muted); | |
| font-size: var(--text-small); | |
| } | |
| .details-metrics dd { | |
| margin: 3px 0 0; | |
| font-family: var(--mono); | |
| font-size: var(--text-body); | |
| font-weight: 600; | |
| } | |
| .details-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: var(--text-body); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .details-table th, | |
| .details-table td { | |
| padding: 6px 8px; | |
| border-top: 1px solid var(--border); | |
| text-align: right; | |
| white-space: nowrap; | |
| } | |
| .details-table thead th { | |
| color: var(--muted); | |
| font-weight: 600; | |
| } | |
| .details-table thead th:first-child, | |
| .details-table tbody th { | |
| font-family: var(--mono); | |
| font-size: var(--text-small); | |
| font-weight: 500; | |
| text-align: left; | |
| white-space: normal; | |
| } | |
| .distribution-track { | |
| position: relative; | |
| height: 10px; | |
| margin: 2px 0 8px; | |
| border-radius: 999px; | |
| background: var(--surface-muted); | |
| } | |
| .distribution-band { | |
| position: absolute; | |
| inset-block: 0; | |
| border-radius: 999px; | |
| background: color-mix(in oklch, var(--blue), transparent 70%); | |
| } | |
| .distribution-median { | |
| position: absolute; | |
| top: -3px; | |
| bottom: -3px; | |
| width: 2px; | |
| border-radius: 2px; | |
| background: var(--text); | |
| } | |
| .distribution-legend { | |
| color: var(--muted); | |
| font-family: var(--mono); | |
| font-size: var(--text-small); | |
| } | |
| .details-scroll { | |
| max-height: 260px; | |
| margin-top: 8px; | |
| overflow: auto; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| } | |
| .details-scroll .details-table th, | |
| .details-scroll .details-table td { | |
| padding: 4px 8px; | |
| } | |
| .details-scroll .details-table thead th { | |
| position: sticky; | |
| top: 0; | |
| background: var(--surface); | |
| } | |
| .details-link { | |
| padding: 0; | |
| border: 0; | |
| background: transparent; | |
| color: inherit; | |
| font: inherit; | |
| text-align: left; | |
| cursor: pointer; | |
| } | |
| .details-link:hover, | |
| .details-link:focus-visible { | |
| color: var(--blue); | |
| text-decoration: underline; | |
| } | |
| .details-sources { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| font-family: var(--mono); | |
| font-size: var(--text-small); | |
| } | |
| .details-sources li { | |
| padding: 7px 0; | |
| overflow-wrap: anywhere; | |
| border-top: 1px solid var(--border); | |
| } | |
| .details-sources a { | |
| color: var(--blue); | |
| overflow-wrap: anywhere; | |
| } | |
| .details-note { | |
| margin: 4px 0 0; | |
| color: var(--muted); | |
| font-family: var(--sans); | |
| } | |
| .details-actions { | |
| margin-top: 18px; | |
| } | |
| /* Same quiet button language as the toolbar: a border and muted text, not a | |
| solid accent fill that glares against the page. */ | |
| .details-actions button { | |
| height: 30px; | |
| padding: 0 12px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| background: var(--surface); | |
| color: var(--muted); | |
| font: inherit; | |
| font-size: var(--text-body); | |
| cursor: pointer; | |
| } | |
| .details-actions button:hover, | |
| .details-actions button:focus-visible { | |
| border-color: var(--border-strong); | |
| background: var(--surface-hover); | |
| color: var(--text); | |
| } | |
| /* Numeric range popover, shared by every numeric column header. */ | |
| .range-panel { | |
| display: block; | |
| width: 250px; | |
| padding: 12px; | |
| max-width: calc(100vw - 24px); | |
| } | |
| .range-title { | |
| margin: 0 0 4px; | |
| font-size: var(--text-body); | |
| font-weight: 600; | |
| } | |
| .range-note { | |
| margin: 0 0 10px; | |
| color: var(--muted); | |
| font-size: var(--text-small); | |
| line-height: 1.5; | |
| } | |
| .range-field { | |
| display: grid; | |
| gap: 4px; | |
| margin-bottom: 8px; | |
| color: var(--muted); | |
| font-size: var(--text-small); | |
| } | |
| .range-field input { | |
| width: 100%; | |
| padding: 5px 7px; | |
| border: 1px solid var(--border-strong); | |
| border-radius: var(--radius-sm); | |
| background: var(--surface); | |
| color: var(--text); | |
| font: inherit; | |
| font-size: var(--text-body); | |
| } | |
| .range-actions { | |
| display: flex; | |
| gap: 8px; | |
| margin-top: 10px; | |
| } | |
| .range-actions button { | |
| flex: 1; | |
| padding: 6px 8px; | |
| border: 1px solid var(--border-strong); | |
| border-radius: var(--radius-sm); | |
| background: var(--surface); | |
| color: var(--text); | |
| font: inherit; | |
| font-size: var(--text-body); | |
| cursor: pointer; | |
| } | |
| .range-actions button[type="submit"] { | |
| border-color: var(--border-strong); | |
| color: var(--text); | |
| } | |
| #results-grid { | |
| width: 100%; | |
| /* Keep wide columns inside the leaderboard instead of widening the whole page. */ | |
| overflow-x: auto; | |
| /* Same inset as every other block, so the table lines up with the page. */ | |
| padding-inline: var(--page-pad); | |
| background: transparent; | |
| } | |
| .gridjs-container { | |
| width: max-content ; | |
| min-width: 100% ; | |
| color: inherit ; | |
| } | |
| .gridjs-head, | |
| .gridjs-footer { | |
| display: none ; | |
| } | |
| .gridjs-wrapper { | |
| width: max-content ; | |
| min-width: 100% ; | |
| overflow: visible ; | |
| border: 0 ; | |
| box-shadow: none ; | |
| } | |
| .gridjs-table, | |
| .results-table-table { | |
| width: max-content ; | |
| min-width: 100% ; | |
| table-layout: auto ; | |
| /* Separate borders keep the sticky header border visible while scrolling. */ | |
| border-collapse: separate ; | |
| border-spacing: 0 ; | |
| border: 0 ; | |
| background: transparent ; | |
| } | |
| /* Flat table with the Hugging Face data-viewer layout, one type step larger. */ | |
| .gridjs-th, | |
| .gridjs-td { | |
| height: var(--row-height); | |
| padding: 0 var(--pad-cell) ; | |
| border: 0 ; | |
| border-bottom: 1px solid var(--border) ; | |
| background: transparent ; | |
| color: var(--text) ; | |
| font-size: var(--text-body); | |
| text-align: left; | |
| white-space: nowrap ; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .gridjs-th { | |
| position: sticky; | |
| top: 0; | |
| z-index: 2; | |
| background: var(--page) ; | |
| border-bottom: 1px solid var(--border-strong) ; | |
| font-weight: 600; | |
| } | |
| .gridjs-th-sort { | |
| cursor: pointer; | |
| } | |
| /* The label and the sort slot are equal-height inline boxes, so every header | |
| shares one baseline. The slot is always reserved and only fades in. */ | |
| .gridjs-th-content { | |
| display: inline-block; | |
| vertical-align: middle; | |
| height: 12px; | |
| line-height: var(--leading-tight); | |
| } | |
| .gridjs-sort { | |
| display: inline-block; | |
| vertical-align: middle; | |
| width: 10px; | |
| height: 12px; | |
| margin: 0 0 0 4px; | |
| padding: 0; | |
| border: 0; | |
| background: transparent; | |
| color: var(--faint); | |
| font-size: var(--text-small); | |
| line-height: var(--leading-tight); | |
| text-align: center; | |
| pointer-events: none; | |
| } | |
| .gridjs-th-sort:hover .gridjs-sort, | |
| .gridjs-sort-asc, | |
| .gridjs-sort-desc { | |
| color: var(--text); | |
| } | |
| .gridjs-sort::after { | |
| content: "↕"; | |
| } | |
| .gridjs-sort-asc::after { | |
| content: "↑"; | |
| } | |
| .gridjs-sort-desc::after { | |
| content: "↓"; | |
| } | |
| .gridjs-tr:last-child .gridjs-td { | |
| border-bottom: 0 ; | |
| } | |
| .gridjs-tr:hover .gridjs-td { | |
| background: var(--surface-hover) ; | |
| } | |
| /* Right-align every numeric column, even after the user moves it. */ | |
| .gridjs-th[data-value-kind="number"], | |
| .gridjs-td[data-value-kind="number"] { | |
| text-align: right; | |
| } | |
| .gridjs-th[data-column-id="#"], | |
| .gridjs-td[data-column-id="#"] { | |
| width: 3rem; | |
| color: var(--faint) ; | |
| font-weight: 400; | |
| } | |
| .gridjs-td[data-column-id="score"] { | |
| font-weight: 600; | |
| } | |
| .gridjs-td[data-column-id="model"] { | |
| max-width: 15rem; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .gridjs-th[draggable="true"] { | |
| cursor: grab; | |
| } | |
| .gridjs-th.column-dragging { | |
| opacity: 0.45; | |
| } | |
| .gridjs-th.column-drop-before { | |
| box-shadow: inset 3px 0 var(--blue); | |
| } | |
| .gridjs-th.column-drop-after { | |
| box-shadow: inset -3px 0 var(--blue); | |
| } | |
| @media (forced-colors: active) { | |
| .column-setting.column-drop-before::before, | |
| .column-setting.column-drop-after::after { | |
| height: 0; | |
| border-top: 2px solid Highlight; | |
| background: transparent; | |
| box-shadow: none; | |
| forced-color-adjust: none; | |
| } | |
| .gridjs-th.column-drop-before { | |
| border-left: 3px solid Highlight ; | |
| box-shadow: none; | |
| } | |
| .gridjs-th.column-drop-after { | |
| border-right: 3px solid Highlight ; | |
| box-shadow: none; | |
| } | |
| } | |
| /* ------------------------------------------------------------ filter popover */ | |
| .filter-popover:not(:popover-open) { | |
| display: none; | |
| } | |
| .filter-popover { | |
| /* inset: auto clears the UA popover default so left/top from JS win. */ | |
| position: fixed; | |
| inset: auto; | |
| margin: 0; | |
| padding: 0; | |
| border: 1px solid var(--border-strong); | |
| border-radius: var(--radius); | |
| background: var(--surface); | |
| color: var(--text); | |
| box-shadow: | |
| 0 1px 2px rgb(0 0 0 / 6%), | |
| 0 12px 28px rgb(0 0 0 / 14%); | |
| overflow: visible; | |
| } | |
| .filter-popover::backdrop { | |
| background: transparent; | |
| } | |
| .filter-panel { | |
| display: block; | |
| width: 300px; | |
| max-width: calc(100vw - 24px); | |
| padding: 4px; | |
| overflow-y: auto; | |
| } | |
| .matrix-group-options { | |
| border-bottom: 1px solid var(--border-strong); | |
| margin-bottom: 4px; | |
| padding-bottom: 4px; | |
| } | |
| .matrix-group-options label { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| min-height: 34px; | |
| padding: 6px 8px; | |
| color: var(--text); | |
| font-size: var(--text-body); | |
| cursor: pointer; | |
| } | |
| .matrix-group-options label:hover { | |
| background: var(--surface-hover); | |
| } | |
| .filter-categories, | |
| .filter-submenu { | |
| min-width: 0; | |
| } | |
| .filter-back { | |
| width: 100%; | |
| min-height: 34px; | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 2px; | |
| padding: 6px 8px; | |
| border: 0; | |
| border-radius: var(--radius-sm); | |
| background: transparent; | |
| color: var(--text); | |
| font-size: var(--text-body); | |
| font-weight: 600; | |
| text-align: left; | |
| cursor: pointer; | |
| } | |
| .filter-back:hover { | |
| background: var(--surface-hover); | |
| } | |
| .filter-category, | |
| .filter-value { | |
| width: 100%; | |
| min-height: 34px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| padding: 6px 8px; | |
| border: 0; | |
| border-radius: var(--radius-sm); | |
| background: transparent; | |
| color: var(--text); | |
| font-size: var(--text-body); | |
| text-align: left; | |
| cursor: pointer; | |
| } | |
| .filter-category:hover, | |
| .filter-value:hover { | |
| background: var(--surface-hover); | |
| } | |
| .filter-value-label { | |
| min-width: 0; | |
| flex: 1; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .filter-value-count { | |
| color: var(--faint); | |
| text-align: right; | |
| font-size: var(--text-small); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .filter-value-check { | |
| width: 1rem; | |
| height: 1rem; | |
| margin: 0; | |
| accent-color: var(--blue); | |
| cursor: pointer; | |
| } | |
| /* ------------------------------------------------------------------- footer */ | |
| footer { | |
| margin: 24px var(--page-pad) 0; | |
| padding: 16px 0 28px; | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 20px; | |
| border-top: 1px solid var(--border); | |
| color: var(--muted); | |
| font-size: var(--text-body); | |
| } | |
| footer p { | |
| margin: 0; | |
| } | |
| @media (max-width: 1000px) { | |
| .summary-row { | |
| grid-template-columns: minmax(0, 1fr); | |
| } | |
| } | |
| @media (max-width: 900px) { | |
| :root { | |
| --page-pad: 12px; | |
| } | |
| .status-bar { | |
| flex-wrap: wrap; | |
| gap: 8px 12px; | |
| padding-block: 10px; | |
| } | |
| .status-meta { | |
| margin: 0; | |
| width: 100%; | |
| justify-content: space-between; | |
| } | |
| .explorer-toolbar { | |
| flex-direction: column; | |
| align-items: stretch; | |
| gap: 12px; | |
| } | |
| .view-actions { | |
| margin-left: 0; | |
| overflow-x: auto; | |
| } | |
| .matrix-table { | |
| min-width: 520px; | |
| } | |
| .selection-body { | |
| grid-template-columns: minmax(0, 1fr); | |
| grid-template-areas: | |
| "families" | |
| "tools"; | |
| } | |
| .matrix-legend { | |
| justify-content: flex-start; | |
| } | |
| .details-metrics { | |
| grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); | |
| } | |
| .filter-panel { | |
| width: min(300px, calc(100vw - 24px)); | |
| } | |
| footer { | |
| margin: 20px var(--page-pad) 0; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| } | |