chore: merge dev into v2 (#36770)
Co-authored-by: opencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com> Co-authored-by: Aiden Cline <63023139+rekram1-node@users.noreply.github.com> Co-authored-by: usrnk1 <7547651+usrnk1@users.noreply.github.com> Co-authored-by: Aarav Sareen <96787824+arvsrn@users.noreply.github.com> Co-authored-by: Luke Parker <10430890+Hona@users.noreply.github.com> Co-authored-by: Brendan Allan <git@brendonovich.dev> Co-authored-by: Kit Langton <kit.langton@gmail.com> Co-authored-by: James Long <longster@gmail.com> Co-authored-by: Adam <2363879+adamdotdevin@users.noreply.github.com> Co-authored-by: opencode-agent[bot] <219766164+opencode-agent[bot]@users.noreply.github.com> Co-authored-by: Jay <53023+jayair@users.noreply.github.com> Co-authored-by: Simon Klee <hello@simonklee.dk> Co-authored-by: Jay <air@live.ca> Co-authored-by: Jack <jack@anoma.ly> Co-authored-by: David Hill <1879069+iamdavidhill@users.noreply.github.com> Co-authored-by: Brendan Allan <14191578+Brendonovich@users.noreply.github.com> Co-authored-by: opencode <opencode@sst.dev> Co-authored-by: Aiden Cline <aidenpcline@gmail.com> Co-authored-by: James Long <jlongster@users.noreply.github.com> Co-authored-by: Dustin Deus <deusdustin@gmail.com> Co-authored-by: 冯基魁 <56265583+fengjikui@users.noreply.github.com> Co-authored-by: Frank <frank@anoma.ly> Co-authored-by: Aiden Cline <rekram1-node@users.noreply.github.com> Co-authored-by: Victor Navarro <vn4varro@gmail.com> Co-authored-by: Dax Raad <d@ironbay.co> Co-authored-by: Dax <mail@thdxr.com> Co-authored-by: Nabs <nabil@instafork.com> Co-authored-by: Vladimir Glafirov <vglafirov@gitlab.com> Co-authored-by: AidenGeunGeun <eastlandwyvern@gmail.com> Co-authored-by: Mark <geraint0923@users.noreply.github.com>
This commit is contained in:
opencode-agent[bot]
GitHub
parent
26e27c7a7f
commit
634386fe0f
116 changed files with 3764 additions and 1016 deletions
|
|
@ -39,6 +39,7 @@ import {
|
|||
uniqueComparisonPairs,
|
||||
type ComparisonModelRef,
|
||||
} from "../compare-cards"
|
||||
import { BreadcrumbSelect } from "../breadcrumb-select"
|
||||
import {
|
||||
applyThemePreference,
|
||||
Footer,
|
||||
|
|
@ -294,61 +295,46 @@ function ModelHero(props: {
|
|||
<Show
|
||||
when={labs().length > 0}
|
||||
fallback={
|
||||
<span data-slot="model-hero-crumb" data-current="true">
|
||||
<span data-slot="model-hero-crumb" data-menu="true">
|
||||
<span>{props.labName}</span>
|
||||
<ChevronDownIcon />
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<details data-component="model-hero-menu">
|
||||
<summary data-slot="model-hero-crumb" data-current="true">
|
||||
<span>{props.labName}</span>
|
||||
<ChevronDownIcon />
|
||||
</summary>
|
||||
<div data-slot="model-hero-options">
|
||||
<For each={labs()}>
|
||||
{(lab) => (
|
||||
<a
|
||||
data-slot="model-hero-option"
|
||||
data-current={lab.id === providerSlug(labId()) ? "true" : undefined}
|
||||
href={language.route(`${import.meta.env.BASE_URL}${lab.id}`)}
|
||||
>
|
||||
{lab.name}
|
||||
</a>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</details>
|
||||
<BreadcrumbSelect
|
||||
ariaLabel="Choose a lab"
|
||||
label={props.labName}
|
||||
options={labs().map((lab) => ({
|
||||
href: language.route(`${import.meta.env.BASE_URL}${lab.id}`),
|
||||
label: lab.name,
|
||||
value: lab.id,
|
||||
}))}
|
||||
value={providerSlug(labId())}
|
||||
variant="model"
|
||||
/>
|
||||
</Show>
|
||||
<span data-slot="model-hero-separator">/</span>
|
||||
<Show
|
||||
when={labModels().length > 0}
|
||||
fallback={
|
||||
<span data-slot="model-hero-crumb" data-current="true" aria-current="page">
|
||||
<span data-slot="model-hero-crumb" data-menu="true" data-current="true" aria-current="page">
|
||||
<span>{modelName()}</span>
|
||||
<ChevronDownIcon />
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<details data-component="model-hero-menu">
|
||||
<summary data-slot="model-hero-crumb" data-current="true" aria-current="page">
|
||||
<span>{modelName()}</span>
|
||||
<ChevronDownIcon />
|
||||
</summary>
|
||||
<div data-slot="model-hero-options">
|
||||
<For each={labModels()}>
|
||||
{(model) => (
|
||||
<a
|
||||
data-slot="model-hero-option"
|
||||
data-current={model.id === props.catalog?.id ? "true" : undefined}
|
||||
href={language.route(`${import.meta.env.BASE_URL}${model.id}`)}
|
||||
>
|
||||
{model.name}
|
||||
</a>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</details>
|
||||
<BreadcrumbSelect
|
||||
ariaLabel="Choose a model"
|
||||
current
|
||||
label={modelName()}
|
||||
options={labModels().map((model) => ({
|
||||
href: language.route(`${import.meta.env.BASE_URL}${model.id}`),
|
||||
label: model.name,
|
||||
value: model.id,
|
||||
}))}
|
||||
value={props.catalog?.id ?? ""}
|
||||
variant="model"
|
||||
/>
|
||||
</Show>
|
||||
</nav>
|
||||
<div data-slot="model-hero-title-row">
|
||||
|
|
@ -432,7 +418,7 @@ function ModelHeroSparkline(props: { data: StatsModelData }) {
|
|||
function ChevronDownIcon() {
|
||||
return (
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" fill="none">
|
||||
<path d="M4.75 6.25L8 9.5L11.25 6.25" stroke="currentColor" stroke-width="1.5" />
|
||||
<path d="M5 6.5L8 9.5L11 6.5" stroke="currentColor" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ import { SectionHeading } from "../section-heading"
|
|||
import { runStatsEffect } from "../../stats-runtime"
|
||||
import { setStatsPageCacheHeaders } from "../stats-cache"
|
||||
import { ComparisonCardsSection, modelRefFromCatalog, uniqueComparisonPairs } from "../compare-cards"
|
||||
import { BreadcrumbSelect } from "../breadcrumb-select"
|
||||
import {
|
||||
applyThemePreference,
|
||||
Footer,
|
||||
|
|
@ -205,6 +206,7 @@ function LabHero(props: { lab: ModelCatalogLab; labs: ModelCatalogLab[] }) {
|
|||
function LabHeroBreadcrumb(props: { label: string; labs?: ModelCatalogLab[] }) {
|
||||
const language = useLanguage()
|
||||
const labs = () => props.labs ?? []
|
||||
const current = () => labs().find((lab) => lab.name === props.label)
|
||||
return (
|
||||
<nav data-component="lab-hero-breadcrumb" aria-label="Data breadcrumb">
|
||||
<a data-slot="lab-hero-crumb" href={language.route(import.meta.env.BASE_URL)}>
|
||||
|
|
@ -217,32 +219,23 @@ function LabHeroBreadcrumb(props: { label: string; labs?: ModelCatalogLab[] }) {
|
|||
<span data-slot="lab-hero-crumb" data-current="true" aria-current="page">
|
||||
<span>{props.label}</span>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
|
||||
<path d="M4.75 6.25L8 9.5L11.25 6.25" fill="none" stroke="currentColor" stroke-width="1.5" />
|
||||
<path d="M5 6.5L8 9.5L11 6.5" fill="none" stroke="currentColor" />
|
||||
</svg>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<details data-component="lab-hero-menu">
|
||||
<summary data-slot="lab-hero-crumb" data-current="true" aria-current="page">
|
||||
<span>{props.label}</span>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
|
||||
<path d="M4.75 6.25L8 9.5L11.25 6.25" fill="none" stroke="currentColor" stroke-width="1.5" />
|
||||
</svg>
|
||||
</summary>
|
||||
<div data-slot="lab-hero-options">
|
||||
<For each={labs()}>
|
||||
{(lab) => (
|
||||
<a
|
||||
data-slot="lab-hero-option"
|
||||
data-current={lab.name === props.label ? "true" : undefined}
|
||||
href={language.route(`${import.meta.env.BASE_URL}${lab.id}`)}
|
||||
>
|
||||
{lab.name}
|
||||
</a>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</details>
|
||||
<BreadcrumbSelect
|
||||
ariaLabel="Choose a lab"
|
||||
current
|
||||
label={props.label}
|
||||
options={labs().map((lab) => ({
|
||||
href: language.route(`${import.meta.env.BASE_URL}${lab.id}`),
|
||||
label: lab.name,
|
||||
value: lab.id,
|
||||
}))}
|
||||
value={current()?.id ?? ""}
|
||||
variant="lab"
|
||||
/>
|
||||
</Show>
|
||||
</nav>
|
||||
)
|
||||
|
|
|
|||
71
packages/stats/app/src/routes/breadcrumb-select.tsx
Normal file
71
packages/stats/app/src/routes/breadcrumb-select.tsx
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
import { Select } from "@kobalte/core/select"
|
||||
import { createMemo } from "solid-js"
|
||||
|
||||
export type BreadcrumbSelectOption = {
|
||||
href: string
|
||||
label: string
|
||||
value: string
|
||||
}
|
||||
|
||||
export function BreadcrumbSelect(props: {
|
||||
ariaLabel: string
|
||||
current?: boolean
|
||||
label: string
|
||||
options: BreadcrumbSelectOption[]
|
||||
value: string
|
||||
variant: "lab" | "model"
|
||||
}) {
|
||||
const selected = createMemo(() => props.options.find((option) => option.value === props.value) ?? null)
|
||||
|
||||
return (
|
||||
<Select<BreadcrumbSelectOption>
|
||||
data-component="stats-breadcrumb-select"
|
||||
data-variant={props.variant}
|
||||
options={props.options}
|
||||
optionValue="value"
|
||||
optionTextValue="label"
|
||||
value={selected()}
|
||||
placeholder={props.label}
|
||||
disallowEmptySelection
|
||||
closeOnSelection
|
||||
shouldFocusWrap
|
||||
placement="bottom"
|
||||
gutter={8}
|
||||
sameWidth={false}
|
||||
itemComponent={(itemProps) => (
|
||||
<Select.Item
|
||||
item={itemProps.item}
|
||||
data-slot="stats-breadcrumb-select-option"
|
||||
data-current={itemProps.item.rawValue.value === props.value ? "true" : undefined}
|
||||
>
|
||||
<Select.ItemLabel>{itemProps.item.rawValue.label}</Select.ItemLabel>
|
||||
</Select.Item>
|
||||
)}
|
||||
onChange={(option) => {
|
||||
if (!option || option.value === props.value) return
|
||||
window.location.assign(option.href)
|
||||
}}
|
||||
>
|
||||
<Select.Trigger
|
||||
data-slot="stats-breadcrumb-select-trigger"
|
||||
data-current={props.current ? "true" : undefined}
|
||||
data-variant={props.variant}
|
||||
aria-label={props.ariaLabel}
|
||||
aria-current={props.current ? "page" : undefined}
|
||||
>
|
||||
<Select.Value<BreadcrumbSelectOption> data-slot="stats-breadcrumb-select-value">
|
||||
{(state) => <span>{state.selectedOption()?.label ?? props.label}</span>}
|
||||
</Select.Value>
|
||||
<Select.Icon data-slot="stats-breadcrumb-select-icon">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
|
||||
<path d="M5 6.5L8 9.5L11 6.5" fill="none" stroke="currentColor" />
|
||||
</svg>
|
||||
</Select.Icon>
|
||||
</Select.Trigger>
|
||||
<Select.HiddenSelect />
|
||||
<Select.Content data-component="stats-breadcrumb-select-content" data-variant={props.variant}>
|
||||
<Select.Listbox data-slot="stats-breadcrumb-select-listbox" />
|
||||
</Select.Content>
|
||||
</Select>
|
||||
)
|
||||
}
|
||||
|
|
@ -134,7 +134,7 @@ export default function ModelCompareIndex() {
|
|||
Data
|
||||
</a>
|
||||
<span data-slot="compare-home-separator">/</span>
|
||||
<span data-slot="compare-home-crumb" data-current="true">
|
||||
<span data-slot="compare-home-crumb" data-current="true" aria-current="page">
|
||||
Compare
|
||||
</span>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -2888,7 +2888,7 @@
|
|||
padding: 0 8px;
|
||||
overflow: hidden;
|
||||
background: var(--stats-layer-2);
|
||||
color: var(--stats-faint);
|
||||
color: var(--stats-hero-muted);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
|
|
@ -2897,21 +2897,7 @@
|
|||
}
|
||||
|
||||
[data-page="stats"] a[data-slot="lab-hero-crumb"] {
|
||||
color: var(--stats-faint);
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="lab-hero-menu"] {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="lab-hero-menu"] summary {
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="lab-hero-menu"] summary::-webkit-details-marker {
|
||||
display: none;
|
||||
color: var(--stats-hero-muted);
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="lab-hero-crumb"][data-current="true"] {
|
||||
|
|
@ -2920,9 +2906,7 @@
|
|||
}
|
||||
|
||||
[data-page="stats"] a[data-slot="lab-hero-crumb"]:hover,
|
||||
[data-page="stats"] a[data-slot="lab-hero-crumb"]:focus-visible,
|
||||
[data-page="stats"] summary[data-slot="lab-hero-crumb"]:hover,
|
||||
[data-page="stats"] summary[data-slot="lab-hero-crumb"]:focus-visible {
|
||||
[data-page="stats"] a[data-slot="lab-hero-crumb"]:focus-visible {
|
||||
color: var(--stats-text);
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
|
|
@ -2941,57 +2925,6 @@
|
|||
color: currentColor;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="lab-hero-menu"][open] [data-slot="lab-hero-crumb"] svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="lab-hero-options"] {
|
||||
position: absolute;
|
||||
top: calc(100% + 8px);
|
||||
left: 50%;
|
||||
z-index: 5;
|
||||
display: grid;
|
||||
width: max-content;
|
||||
min-width: 180px;
|
||||
max-width: min(280px, calc(100vw - 48px));
|
||||
max-height: min(360px, calc(100vh - 160px));
|
||||
padding: 6px;
|
||||
overflow: auto;
|
||||
border: 1px solid var(--stats-line);
|
||||
background: var(--stats-bg);
|
||||
box-shadow: 0 12px 32px #0000001a;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="lab-hero-option"] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
height: 30px;
|
||||
padding: 0 8px;
|
||||
overflow: hidden;
|
||||
color: var(--stats-muted);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="lab-hero-option"]:hover,
|
||||
[data-page="stats"] [data-slot="lab-hero-option"]:focus-visible {
|
||||
background: var(--stats-layer-2);
|
||||
color: var(--stats-text);
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="lab-hero-option"][data-current="true"] {
|
||||
background: var(--stats-layer-2);
|
||||
color: var(--stats-text);
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="lab-hero-separator"] {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -3113,29 +3046,147 @@
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="model-hero-crumb"][data-current="true"] {
|
||||
[data-page="stats"] a[data-slot="model-hero-crumb"] {
|
||||
color: var(--stats-hero-muted);
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="model-hero-crumb"][data-menu="true"] {
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-hero-menu"] {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
[data-page="stats"] [data-slot="model-hero-crumb"][data-current="true"] {
|
||||
color: var(--stats-text);
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="stats-breadcrumb-select"] {
|
||||
display: inline-flex;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-hero-menu"] summary {
|
||||
[data-page="stats"] [data-slot="stats-breadcrumb-select-trigger"] {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 4px;
|
||||
flex: 0 1 auto;
|
||||
max-width: min(100%, 280px);
|
||||
height: 24px;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0 4px 0 8px;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
appearance: none;
|
||||
background: var(--stats-layer-2);
|
||||
color: var(--stats-hero-muted);
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-hero-menu"] summary::-webkit-details-marker {
|
||||
display: none;
|
||||
[data-page="stats"] [data-slot="stats-breadcrumb-select-trigger"][data-current="true"],
|
||||
[data-page="stats"] [data-slot="stats-breadcrumb-select-trigger"]:hover,
|
||||
[data-page="stats"] [data-slot="stats-breadcrumb-select-trigger"][data-expanded] {
|
||||
color: var(--stats-text);
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="stats-breadcrumb-select-trigger"]:focus-visible {
|
||||
color: var(--stats-text);
|
||||
outline: 1px solid var(--stats-text);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="stats-breadcrumb-select-value"] {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="stats-breadcrumb-select-value"] span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="stats-breadcrumb-select-icon"] {
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
color: var(--stats-faint);
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="stats-breadcrumb-select-icon"] svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
[data-page="stats"]
|
||||
[data-slot="stats-breadcrumb-select-trigger"][data-expanded]
|
||||
[data-slot="stats-breadcrumb-select-icon"] {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-popper-positioner]:has([data-component="stats-breadcrumb-select-content"]) {
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="stats-breadcrumb-select-content"] {
|
||||
z-index: 20;
|
||||
width: max-content;
|
||||
min-width: 180px;
|
||||
max-width: min(360px, calc(100vw - 48px));
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--stats-line);
|
||||
background: var(--stats-bg);
|
||||
box-shadow: 0 12px 32px #0000001a;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="stats-breadcrumb-select-content"][data-variant="lab"] {
|
||||
max-width: min(280px, calc(100vw - 48px));
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="stats-breadcrumb-select-listbox"] {
|
||||
display: grid;
|
||||
max-height: min(360px, calc(100vh - 160px));
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 6px;
|
||||
overflow: auto;
|
||||
list-style: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="stats-breadcrumb-select-option"] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
height: 30px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 8px;
|
||||
overflow: hidden;
|
||||
color: var(--stats-muted);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="stats-breadcrumb-select-option"][data-highlighted],
|
||||
[data-page="stats"] [data-slot="stats-breadcrumb-select-option"][data-selected] {
|
||||
background: var(--stats-layer-2);
|
||||
color: var(--stats-text);
|
||||
}
|
||||
|
||||
[data-page="stats"] a[data-slot="model-hero-crumb"]:hover,
|
||||
[data-page="stats"] a[data-slot="model-hero-crumb"]:focus-visible,
|
||||
[data-page="stats"] summary[data-slot="model-hero-crumb"]:hover,
|
||||
[data-page="stats"] summary[data-slot="model-hero-crumb"]:focus-visible {
|
||||
[data-page="stats"] a[data-slot="model-hero-crumb"]:focus-visible {
|
||||
color: var(--stats-text);
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
|
|
@ -3151,58 +3202,7 @@
|
|||
flex: 0 0 auto;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--stats-faint);
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-hero-menu"][open] [data-slot="model-hero-crumb"] svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="model-hero-options"] {
|
||||
position: absolute;
|
||||
top: calc(100% + 8px);
|
||||
left: 50%;
|
||||
z-index: 5;
|
||||
display: grid;
|
||||
width: max-content;
|
||||
min-width: 180px;
|
||||
max-width: min(360px, calc(100vw - 48px));
|
||||
max-height: min(360px, calc(100vh - 160px));
|
||||
padding: 6px;
|
||||
overflow: auto;
|
||||
border: 1px solid var(--stats-line);
|
||||
background: var(--stats-bg);
|
||||
box-shadow: 0 12px 32px #0000001a;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="model-hero-option"] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
height: 30px;
|
||||
padding: 0 8px;
|
||||
overflow: hidden;
|
||||
color: var(--stats-muted);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="model-hero-option"]:hover,
|
||||
[data-page="stats"] [data-slot="model-hero-option"]:focus-visible {
|
||||
background: var(--stats-layer-2);
|
||||
color: var(--stats-text);
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="model-hero-option"][data-current="true"] {
|
||||
background: var(--stats-layer-2);
|
||||
color: var(--stats-text);
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="model-hero-separator"] {
|
||||
|
|
@ -5533,6 +5533,14 @@
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
[data-page="stats"] a[data-slot="compare-home-crumb"] {
|
||||
color: var(--stats-hero-muted);
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="compare-home-breadcrumb"] [data-slot="compare-home-crumb"][data-current="true"] {
|
||||
color: var(--stats-text);
|
||||
}
|
||||
|
||||
[data-page="stats"] a[data-slot="compare-home-crumb"]:hover,
|
||||
[data-page="stats"] a[data-slot="compare-home-crumb"]:focus-visible {
|
||||
color: var(--stats-text);
|
||||
|
|
@ -7876,6 +7884,10 @@
|
|||
max-width: min(100%, 240px);
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-hero-breadcrumb"] [data-slot="stats-breadcrumb-select-trigger"] {
|
||||
max-width: min(100%, 240px);
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="model-hero-title-row"] {
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
|
|
@ -7967,10 +7979,6 @@
|
|||
min-width: 48px;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="lab-hero-options"] {
|
||||
max-width: calc(100vw - 48px);
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="lab-related-list"] {
|
||||
grid-auto-columns: minmax(320px, 392px);
|
||||
grid-auto-flow: column;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue