From 8fe5bfc3605100601f6eb16d752af7a46e2dd71d Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 26 Sep 2026 03:55:02 +0000 Subject: [PATCH] Give the toolbox page a more polished layout Turn the intro into an accent-tinted card, give the Toolbox Updates and Quick setup panels matching headers with a rotating chevron, make the category filters pill-shaped, add hover and selected states to tool rows with tinted icon tiles, keep the detail panel in view while scrolling, tidy the Personal tools panel and its search field, add focus rings to the search and select fields, and hide the catalog command box until it has content. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01BUhabxL4SPejg19jgbSyYN --- src/styles.css | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/src/styles.css b/src/styles.css index 587f00f..084f538 100644 --- a/src/styles.css +++ b/src/styles.css @@ -453,3 +453,44 @@ button:disabled { cursor:default; } @media (prefers-reduced-motion: reduce) { #repositories-view .repo-card:hover, #repositories-view .repo-card:focus-within { transform:none; } } :root[data-layout="list"] #repositories-view .repo-card-head .repo-glyph { display:none; } :root[data-layout="list"] #repositories-view .repo-card { grid-template-columns:minmax(140px,1fr) minmax(180px,1fr) 280px; } + +/* Toolbox page polish */ +#toolbox-view { --tb-tint: rgba(99,230,255,.12); --tb-tint: color-mix(in srgb, var(--cyan) 14%, transparent); --tb-tint-soft: rgba(99,230,255,.05); --tb-tint-soft: color-mix(in srgb, var(--cyan) 6%, transparent); } +#toolbox-view .toolbox-intro { border-left:0; border-radius:14px; padding:24px 26px; background:radial-gradient(circle at 92% 0%, var(--tb-tint), transparent 45%), linear-gradient(135deg, var(--tb-tint-soft), transparent 60%), var(--surface); } +#toolbox-view .toolbox-intro .eyebrow { color:var(--cyan); } +#toolbox-view #toolbox-updates, #toolbox-view .toolbox-setup { margin:14px 0 0; padding:0; overflow:hidden; } +#toolbox-view #toolbox-updates > summary, #toolbox-view .toolbox-setup > summary { display:flex; align-items:center; gap:10px; padding:16px 22px; font-size:13px; font-weight:700; list-style:none; cursor:pointer; transition:background .15s ease; } +#toolbox-view #toolbox-updates > summary::-webkit-details-marker, #toolbox-view .toolbox-setup > summary::-webkit-details-marker { display:none; } +#toolbox-view #toolbox-updates > summary::before, #toolbox-view .toolbox-setup > summary::before { content:"›"; display:grid; place-items:center; width:22px; height:22px; border-radius:6px; background:var(--tb-tint-soft); color:var(--cyan); font-size:15px; transition:transform .18s ease; } +#toolbox-view #toolbox-updates[open] > summary::before, #toolbox-view .toolbox-setup[open] > summary::before { transform:rotate(90deg); } +#toolbox-view #toolbox-updates > summary:hover, #toolbox-view .toolbox-setup > summary:hover { background:var(--tb-tint-soft); } +#toolbox-view .toolbox-setup summary span { font-weight:400; } +#toolbox-view #toolbox-updates > :not(summary), #toolbox-view .toolbox-setup > form { margin-inline:22px; } +#toolbox-view #toolbox-updates[open], #toolbox-view .toolbox-setup[open] { padding-bottom:20px; } +#toolbox-view #toolbox-updates > p { color:var(--muted); font-size:12px; line-height:1.65; } +#toolbox-view .toolbox-filters input[type=search], #toolbox-view #personal-search, #toolbox-view .toolbox-intro select, #toolbox-view .toolbox-setup select { transition:border-color .15s ease, box-shadow .15s ease; } +#toolbox-view .toolbox-filters input[type=search]:focus, #toolbox-view #personal-search:focus, #toolbox-view .toolbox-intro select:focus, #toolbox-view .toolbox-setup select:focus { outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px var(--tb-tint); } +#toolbox-view .toolbox-categories button { border-radius:999px; padding-inline:14px; font-weight:600; transition:color .15s ease, border-color .15s ease, background .15s ease; } +#toolbox-view .toolbox-categories button:hover { color:var(--cyan); border-color:var(--tb-tint); } +#toolbox-view .toolbox-categories button[aria-pressed=true], #toolbox-view #toolbox-favorites[aria-pressed=true] { background:var(--tb-tint-soft); } +#toolbox-view .toolbox-row { transition:border-color .15s ease, background .15s ease, transform .15s ease; } +#toolbox-view .toolbox-row:hover { border-color:var(--tb-tint); background:var(--tb-tint-soft); transform:translateX(2px); } +#toolbox-view .toolbox-row.selected { border-color:var(--cyan); background:var(--tb-tint-soft); box-shadow:inset 3px 0 var(--cyan); } +#toolbox-view .toolbox-row em { transition:transform .15s ease, color .15s ease; } +#toolbox-view .toolbox-row:hover em { color:var(--cyan); transform:translateX(3px); } +#toolbox-view .toolbox-icon { width:38px; height:38px; border-radius:10px; background:linear-gradient(145deg, var(--tb-tint), var(--tb-tint-soft)); } +#toolbox-view .toolbox-folder .toolbox-icon { background:rgba(255,190,90,.1); } +:root[data-theme="light"] #toolbox-view .toolbox-folder .toolbox-icon { color:var(--warning); } +#toolbox-view .toolbox-row small { font-size:10px; } +#toolbox-view #toolbox-detail { position:sticky; top:16px; } +#toolbox-view #toolbox-detail .module-empty { color:var(--muted); text-align:center; padding:24px 0; } +#toolbox-view .module-panel > .panel-heading p { color:var(--muted); font-size:12px; line-height:1.6; margin:6px 0 0; } +#toolbox-view .module-panel .panel-heading h3 { margin:0; font-size:15px; } +#toolbox-view .module-panel > .toolbar { align-items:center; padding:12px 0; border-top:1px solid var(--line); } +#toolbox-view #personal-breadcrumb { font-size:12px; color:var(--muted); } +#toolbox-view #personal-search { flex:1; min-width:180px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface-soft); color:var(--text); font-size:12px; } +#toolbox-view #personal-list { color:var(--muted); font-size:12px; } +@media (prefers-reduced-motion: reduce) { #toolbox-view .toolbox-row:hover, #toolbox-view .toolbox-row:hover em { transform:none; } } +#toolbox-view #toolbox-updates label { display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); } +#toolbox-view .toolbox-layout { margin-bottom:18px; } +#toolbox-view pre.output:empty { display:none; }