kato/warpbox-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(ui): add color-coded accents and tags to shortcut cards
All checks were successful
Build and Publish Docker Image / deploy (push) Successful in 2m44s
Details

Browse Source 
Introduce per-card accent colors to enhance the visual hierarchy of the documentation shortcut cards. This includes adding left borders, colored eyebrows, and matching hover glows using CSS variables.

Additionally, this commit:
- Adds color-coded tags (GET, POST, JSON, etc.) for API links.
- Implements retro-themed styling for both the shortcut cards and tags to maintain consistency with the classic 16-color VGA palette.
- Applies the new accent classes to the API page template.
This commit is contained in:
Daniel Legt
2026-06-11 11:32:22 +03:00
parent a0027fbd18
commit e2cf7115b7
3 changed files with 110 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
backend/static/css/40-docs.css
View File

@@ -172,23 +172,32 @@
gap: 0.2rem;
padding: 1rem;
border: 1px solid var(--border);
border-left: 3px solid var(--accent-c, var(--border));
border-radius: var(--radius);
background: color-mix(in srgb, var(--card) 94%, transparent);
text-decoration: none;
transition: border-color 0.12s ease, transform 0.12s ease;
transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.shortcut-card:hover {
border-color: var(--ring);
border-color: var(--accent-c, var(--ring));
transform: translateY(-2px);
box-shadow: 0 6px 18px color-mix(in srgb, var(--accent-c, var(--ring)) 22%, transparent);
}
/* Per-card accent. Each home shortcut owns a colour, echoed by its eyebrow,
left edge, and hover glow. */
.accent-blue { --accent-c: #3b82f6; }
.accent-green { --accent-c: #22c55e; }
.accent-violet { --accent-c: #8b5cf6; }
.accent-amber { --accent-c: #f59e0b; }
.shortcut-eyebrow {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--primary);
color: var(--accent-c, var(--primary));
}
.shortcut-title {
@@ -239,6 +248,14 @@
letter-spacing: 0.03em;
}
/* Colour-coded tags on the home quick links (and reusable elsewhere). Tinted
background plus a saturated label so they read as accents, not loud chips. */
.link-pill .tag-get { background: color-mix(in srgb, #3b82f6 22%, transparent); color: #93c5fd; }
.link-pill .tag-post { background: color-mix(in srgb, #22c55e 22%, transparent); color: #86efac; }
.link-pill .tag-json { background: color-mix(in srgb, #8b5cf6 24%, transparent); color: #c4b5fd; }
.link-pill .tag-key { background: color-mix(in srgb, #eab308 24%, transparent); color: #fde047; }
.link-pill .tag-help { background: color-mix(in srgb, #06b6d4 24%, transparent); color: #67e8f9; }
/* --- Code blocks with copy button --- */
.code-block {
position: relative;