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

Status tags, output box and layout helpers

Browse Source 
Adds --color-warn, .wt-tag--good/--warn/--bad/--accent (tinted surface,
theme text, readable in every palette), .wt-pre for logs and terminal
captures, and .wt-row/.wt-stack so small apps need no own CSS.

Claude-Session: https://claude.ai/code/session_01QhLkBGEip8wQdaZ54z4AqJ
This commit is contained in:
agw
2026-10-20 17:35:25 +02:00
parent 86086de662
commit 9ac6a69d8a
3 changed files with 25 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
weirsoe-theme.css
+20
View File
@@ -24,6 +24,7 @@
--color-accent-ink: #06121c;
--color-good: #7dffa8;
--color-bad: #ff8ba0;
--color-warn: #fbbf24;
--wt-radius: 0.85rem;
--wt-radius-sm: 0.55rem;
@@ -225,6 +226,25 @@ body::before {
color: var(--color-text); font-size: 0.8rem;
}
.wt-muted { color: var(--color-muted); }
/* 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);
background: color-mix(in srgb, var(--wt-tag-tone) 16%, var(--color-surface));
border-color: color-mix(in srgb, var(--wt-tag-tone) 55%, var(--color-border));
}
.wt-tag--good { --wt-tag-tone: var(--color-good); }
.wt-tag--warn { --wt-tag-tone: var(--color-warn); }
.wt-tag--bad { --wt-tag-tone: var(--color-bad); }
/* layout helpers: a wrapping row and a vertical stack with the theme gap */
.wt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.wt-row--between { justify-content: space-between; }
.wt-stack { display: grid; gap: 0.75rem; }
/* monospace output box (logs, terminal captures); keeps columns, scrolls sideways */
.wt-pre {
margin: 0; padding: 0.75rem 0.9rem; overflow-x: auto; white-space: pre;
background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--wt-radius-sm);
font: 0.75rem/1.35 var(--wt-font-mono); color: var(--color-text);
}
/* ---------- theme toggle (sun ⇄ moon), used by weirsoe-theme.js ---------- */
.theme-toggle {