workspace.css (7937B)
1 .workbench { padding-block:2rem 4rem; --command-size:13px; } 2 .workbench__heading { display:flex; align-items:center; justify-content:space-between; gap:2rem; margin-bottom:1.6rem; } 3 .workbench__heading .eyebrow { color:var(--rose); font-size:11px; margin:0 0 .6rem; } 4 .workbench__heading h1 { font-family:var(--font-archivo); font-size:clamp(1.8rem,3vw,2.7rem); letter-spacing:-.04em; line-height:1.1; margin:0; text-transform:none; } 5 .workbench__heading h1 span { color:var(--love); } 6 .workbench__heading p:last-child { color:var(--fg-dim); margin:.6rem 0 0; font-size:14px; } 7 .workbench__stats { font-family:var(--font-mono); font-size:12px; color:var(--fg-dim); white-space:nowrap; }.workbench__stats strong { color:var(--fg); }.workbench__stats span { color:var(--rose); margin:0 .5rem; } 8 .workbench__search { display:flex; align-items:center; border:1px solid var(--rule-hi,var(--rule)); background:var(--surface); padding:.4rem .7rem; gap:.7rem; } 9 .workbench__search:focus-within { outline:2px solid var(--foam); outline-offset:2px; }.workbench__search>span { font-size:25px; color:var(--foam); } 10 .workbench__search input { flex:1; min-width:0; background:transparent; border:0; color:var(--fg); font-size:16px; padding:.5rem 0; outline:none; } 11 .workbench button,.workbench select,.workbench summary { font-family:var(--font-mono); font-size:12px; } 12 .workbench button,.workbench select { color:var(--fg); background:var(--surface); border:1px solid var(--rule); padding:.45rem .65rem; border-radius:3px; } 13 .workbench button { cursor:pointer; }.workbench button:hover { border-color:var(--foam); }.workbench button:disabled { opacity:.45; cursor:default; } 14 .workbench button[aria-pressed=true] { border-color:var(--rose); color:var(--rose); background:var(--wash); } 15 .workbench :is(button,select,summary,a,input):focus-visible { outline:2px solid var(--foam); outline-offset:3px; } 16 .workbench__toolbar { display:flex; gap:.5rem .8rem; align-items:center; flex-wrap:wrap; padding:.8rem 0; border-bottom:1px solid var(--rule); } 17 .workbench__toolbar label { font-size:12px; color:var(--fg-dim); display:flex; align-items:center; gap:.45rem; } 18 .workbench__toolbar [data-filters-toggle] { display:none; }.display-options { position:relative; }.display-options summary { cursor:pointer; padding:.5rem; } 19 .display-options>div { position:absolute; z-index:10; background:var(--bg); border:1px solid var(--rule); padding:1rem; min-width:230px; box-shadow:0 8px 24px #0003; display:grid; gap:.8rem; right:0; } 20 .active-filters { display:flex; gap:.5rem; flex-wrap:wrap; }.active-filters:not(:empty) { padding-top:.8rem; }.active-filters button { color:var(--foam); } 21 .workbench__status { color:var(--fg-dim); font-size:12px; margin:.5rem 0; min-height:1em; } 22 .workbench__body { display:grid; grid-template-columns:220px minmax(0,1fr); border-top:1px solid var(--rule); align-items:start; } 23 .workbench__body:has(.inspector:not([hidden])) { grid-template-columns:210px minmax(280px,1fr) minmax(320px,.9fr); } 24 .workbench__filters { position:sticky; top:5rem; max-height:calc(100dvh - 5rem); overflow-y:auto; border-right:1px solid var(--rule); padding:1rem 1rem 2rem 0; } 25 .filter-heading { margin-bottom:1.2rem; }.filter-heading h2 { font-size:14px; margin:0 0 .4rem; }.filter-heading span { font-size:10px; color:var(--fg-dim); } 26 .workbench .cat-facet__head { font-size:11px; letter-spacing:.03em; }.workbench .cat-chip { font-size:12px; padding:.4rem .5rem; border-radius:3px; }.workbench .cat-chip__n { font-size:11px; }.workbench .cat-facet { margin-bottom:1.4rem; } 27 .workbench__results { min-width:0; padding:0 0 0 1.2rem; }.workbench__result-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:3.2rem; } 28 .workbench__result-heading p { font-size:12px; color:var(--fg-dim); margin:0; }.workbench__result-heading>span { font:10px var(--font-mono); color:var(--fg-faint); } 29 .workbench .trow__head { cursor:default; padding:1rem .9rem .6rem; grid-template-columns:28px minmax(0,1fr) auto; }.workbench .trow__head:hover { background:transparent; } 30 .workbench .trow__inspect { padding:.1rem; width:28px; height:28px; color:var(--foam); }.workbench .trow__tool { font-size:16px; }.workbench .tbadge { font-size:10px; letter-spacing:.02em; } 31 .workbench .trow__sub { font-size:12px; color:var(--fg-dim); }.workbench .trow__badges { max-width:220px; }.workbench .trow__badges .tbadge:not(.tbadge--src):not(.tbadge--new) { display:none; } 32 .trow__variants { display:flex; gap:.5rem; align-items:center; font:11px var(--font-mono); color:var(--fg-dim); padding:0 .9rem .6rem; }.trow__variants select { flex:1; min-width:0; width:100%; } 33 .workbench .trow__cmd { font-size:var(--command-size); }.trow__actions { display:flex; align-items:center; gap:.5rem; padding:0 .9rem .8rem; }.trow__actions>span { flex:1; color:var(--fg-dim); font:11px var(--font-mono); } 34 .workbench[data-density=compact] .trow__head { padding-top:.5rem; }.workbench[data-density=compact] .trow__cmd { padding:.35rem .6rem; }.workbench[data-wrap=true] pre code { white-space:pre-wrap; overflow-wrap:anywhere; } 35 .workbench .cat__more { display:block; margin:1.2rem auto; }.workbench .cat__more[hidden] { display:none; } 36 .inspector { position:sticky; top:5rem; max-height:calc(100dvh - 5rem); overflow:auto; margin-left:1rem; padding:1.1rem; border-left:1px solid var(--rule); background:var(--surface); } 37 .inspector[hidden] { display:none; }.inspector__top { display:flex; justify-content:space-between; gap:1rem; align-items:center; }.inspector h2 { font-family:var(--font-archivo); font-size:23px; margin:.8rem 0; }.inspector h3 { font-size:14px; margin:1.2rem 0 .4rem; }.inspector p,.inspector li { font-size:13px; line-height:1.7; color:var(--fg-dim); }.inspector ul { padding-left:1.2rem; }.inspector a { color:var(--foam); overflow-wrap:anywhere; }.inspector pre { font-size:var(--command-size); overflow:auto; background:#191724; color:#e0def4; padding:.8rem; }.inspector pre code { color:inherit; } 38 .command-fields { display:grid; gap:.7rem; }.command-fields label { display:grid; gap:.3rem; color:var(--fg-dim); font-size:12px; }.command-fields input { width:100%; box-sizing:border-box; padding:.5rem; background:var(--bg); color:var(--fg); border:1px solid var(--rule); font-family:var(--font-mono); }.inspector .template-error { color:var(--love); } 39 html[data-motion=reduce] *,html[data-motion=reduce] *::before,html[data-motion=reduce] *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } 40 @media(max-width:1200px) { .workbench__body:has(.inspector:not([hidden])) { grid-template-columns:190px minmax(0,1fr); }.inspector { grid-column:2; grid-row:1; position:relative; top:0; max-height:none; margin:0 0 1rem 1rem; border:1px solid var(--rule); }.workbench__body:has(.inspector:not([hidden])) .workbench__results { grid-column:2; grid-row:2; }.workbench__filters { grid-row:1 / span 2; } } 41 @media(max-width:760px) { .workbench { padding-top:1.2rem; }.workbench__heading { display:block; }.workbench__stats { margin-top:.8rem; }.workbench__heading h1 { font-size:1.8rem; }.workbench__toolbar [data-filters-toggle] { display:block; }.workbench__body,.workbench__body:has(.inspector:not([hidden])) { display:flex; flex-direction:column; }.workbench__filters { display:none; width:100%; position:static; max-height:none; border:0; }.workbench[data-filters-open=true] .workbench__filters { display:block; }.workbench__results { width:100%; padding:0; }.workbench__result-heading>span { display:none; }.inspector { order:-1; margin:0 0 1rem; width:100%; box-sizing:border-box; }.workbench__toolbar { gap:.5rem; }.workbench .trow__head { grid-template-columns:28px minmax(0,1fr); }.workbench .trow__badges { grid-column:2; justify-content:flex-start; }.trow__variants { align-items:start; flex-direction:column; }.trow__actions { flex-wrap:wrap; }.trow__actions>span { flex-basis:100%; } }