agw/Weircon-wind
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Button sizes, ghost and toggle state, compact/flush/alt cards, drop zone, kbd

Browse Source 
Everything asger.weirsøe.dk still wrote by hand: call-to-action buttons,
filter buttons with aria-pressed, the big input next to them, compact and
table-wrapping cards, the chat's second voice, the file drop area and the
shortcut key. Additive only.

Claude-Session: https://claude.ai/code/session_012LCTmU2ewo8tnM1dByYAoG
This commit is contained in:
Asger Geel Weirsøe
2026-10-29 18:40:00 +01:00
parent b4cad8fef3
commit 495acc9155
4 changed files with 50 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
weirsoe-theme.css
+30
View File
@@ -168,6 +168,18 @@ body::before {
.wt-card-title { margin-top: 0.25rem; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
.wt-card--link:hover .wt-card-title, a.wt-card--hover:hover .wt-card-title { color: var(--color-accent); }
.wt-card-desc { margin-top: 0.5rem; font-size: 0.875rem; color: var(--color-muted); }
.wt-card--compact { padding: 0.5rem 0.75rem; border-radius: var(--wt-radius-sm); }
/* flush: content touches the edge (a table or list inside the card) */
.wt-card--flush { padding: 0; overflow: hidden; }
/* alt: the second voice next to plain cards, e.g. the user's side of a chat */
.wt-card--alt { background: var(--color-surface-2); }
/* file drop area; add .is-over while a file is dragged over it */
.wt-dropzone {
border: 1px dashed var(--color-border); border-radius: 1rem; padding: 2rem; text-align: center;
background: color-mix(in srgb, var(--color-surface) 40%, transparent);
transition: border-color 0.2s, background-color 0.2s;
}
.wt-dropzone.is-over { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface)); }
/* Drag-and-drop sortable lists (paired with weirsoe-ui.js). Mark the container
with [data-wt-sortable] + data-order-url; children need [data-item-id]; add a
@@ -212,6 +224,18 @@ body::before {
.wt-btn:hover { border-color: color-mix(in srgb, var(--color-accent) 50%, var(--color-border)); }
.wt-btn--primary { background: var(--color-accent); border-color: transparent; color: var(--color-accent-ink); font-weight: 650; }
.wt-btn--primary:hover { filter: brightness(1.08); }
.wt-btn:disabled { opacity: 0.55; cursor: not-allowed; filter: none; }
/* sizes: --sm for filter rows and toolbars, --lg for calls to action (same height as .wt-input--lg) */
.wt-btn--sm { padding: 0.35rem 0.8rem; font-size: 0.85rem; gap: 0.35rem; }
.wt-btn--lg { padding: 0.625rem 1.25rem; border-radius: var(--wt-radius); }
/* ghost: no fill and muted text until hovered (secondary actions, filter rows) */
.wt-btn--ghost { background: transparent; color: var(--color-muted); }
.wt-btn--ghost:hover { color: var(--color-text); }
/* toggle state for filter and segment buttons: aria-pressed="true" (or .is-active) */
.wt-btn[aria-pressed="true"], .wt-btn.is-active {
background: var(--color-surface-2); color: var(--color-text);
border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
}
.wt-input {
background: var(--color-surface-2);
border: 1px solid var(--color-border);
@@ -221,6 +245,7 @@ body::before {
}
.wt-input::placeholder { color: color-mix(in srgb, var(--color-muted) 80%, transparent); }
.wt-input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 25%, transparent); }
.wt-input--lg { padding: 0.625rem 1rem; border-radius: var(--wt-radius); }
.wt-tag {
display: inline-flex; align-items: center;
padding: 0.15rem 0.6rem; border-radius: 999px;
@@ -228,6 +253,11 @@ body::before {
color: var(--color-text); font-size: 0.8rem;
}
.wt-muted { color: var(--color-muted); }
/* keyboard key, e.g. a shortcut hint */
.wt-kbd {
display: inline-block; padding: 0.05rem 0.4rem; border: 1px solid var(--color-border); border-radius: 0.3rem;
background: var(--color-surface-2); color: var(--color-text); font: 0.7rem/1.4 var(--wt-font-mono);
}
/* status tags: tinted surface + coloured edge, text stays theme text so it reads in every palette */
.wt-tag--good, .wt-tag--warn, .wt-tag--bad, .wt-tag--accent {
--wt-tag-tone: var(--color-accent);