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; }