From e2cf7115b764bbb88e0665a7be5b2cdab0783cd4 Mon Sep 17 00:00:00 2001 From: Daniel Legt Date: Thu, 11 Jun 2026 11:32:22 +0300 Subject: [PATCH] style(ui): add color-coded accents and tags to shortcut cards 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. --- backend/static/css/16-retro.css | 92 +++++++++++++++++++++++++++----- backend/static/css/40-docs.css | 23 ++++++-- backend/templates/pages/api.html | 24 ++++----- 3 files changed, 110 insertions(+), 29 deletions(-) diff --git a/backend/static/css/16-retro.css b/backend/static/css/16-retro.css index 8d255c3..ef17fe0 100644 --- a/backend/static/css/16-retro.css +++ b/backend/static/css/16-retro.css @@ -801,26 +801,81 @@ margin-top: 0.5rem; } -/* Section intros sit on the black desktop: gold kicker, white title, light - subtitle, and readable inline code (not the default black-on-black). */ -:root[data-theme="retro"] .panel-head .kicker { - color: #ffd966; - display: block; +/* Section intro becomes a real Win98 window: silver body, the

a navy + title bar with a fake close button, and the subtitle as black body text. + This fixes the default black-on-black inline code in headings/intros. */ +:root[data-theme="retro"] .panel-head { + max-width: none; + margin-bottom: 1.5rem; + padding: 1rem; + background: linear-gradient(to bottom, #ffffff, 4%, #c0c0c0 8%); + background-color: #c0c0c0; + border: 1px solid #000000; + box-shadow: var(--shadow); } -:root[data-theme="retro"] .panel-head h2, +/* The kicker is redundant once the title sits in a title bar; hide it so the + bar can hug the top edge (the markup puts the kicker before the h2). */ +:root[data-theme="retro"] .panel-head .kicker { + display: none; +} + +:root[data-theme="retro"] .panel-head h2 { + position: relative; + margin: -1rem -1rem 1rem; + padding: 0.35rem 1.8rem 0.35rem 0.5rem; + background: linear-gradient(to right, #000078, 80%, #0f80cd); + color: #ffffff; + font-size: 1rem; + font-weight: 700; +} + +/* Inline code in the title (e.g. "The warpbox CLI") reads white on the bar + instead of the default black. */ +:root[data-theme="retro"] .panel-head h2 code { + color: #ffffff; + background: transparent; + padding: 0; +} + +:root[data-theme="retro"] .panel-head h2::after { + content: "\2715"; + position: absolute; + top: 50%; + right: 0.4rem; + transform: translateY(-50%); + display: grid; + place-items: center; + width: 1.15rem; + height: 1rem; + background: #c0c0c0; + color: #000000; + font-size: 0.7rem; + font-weight: 700; + box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #ffffff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf; +} + +:root[data-theme="retro"] .panel-head .lead { + color: #1a1a1a; + margin: 0; +} + +/* Inline code in the subtitle: sunken white field, black text. */ +:root[data-theme="retro"] .panel-head .lead code { + color: #000000; + background: #ffffff; + border: 1px solid #808080; + padding: 0 0.2rem; +} + +/* The lone "Quick links" label on the home desktop stays light. */ :root[data-theme="retro"] .section-label { color: #ffffff; } -:root[data-theme="retro"] .panel-head .lead { - color: #cfd8ff; -} - -:root[data-theme="retro"] .panel-head .lead code { - color: #ffffff; - background: #000078; - padding: 0 0.2rem; +/* ShareX step lists are light-muted by default; black on the silver window. */ +:root[data-theme="retro"] .docs-steps { + color: #1a1a1a; } /* Each card heading becomes a Win98 title bar with a fake close button. @@ -903,6 +958,7 @@ :root[data-theme="retro"] .shortcut-card:hover { transform: none; background-color: #d4d0c8; + box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #ffffff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf; } :root[data-theme="retro"] .shortcut-eyebrow { @@ -927,6 +983,14 @@ border: 1px solid #000000; } +/* Colour-coded badges in the classic 16-colour VGA palette, with black + borders so they read like little Win98 toolbar icons. */ +:root[data-theme="retro"] .link-pill .tag-get { background: #0000aa; color: #ffffff; } +:root[data-theme="retro"] .link-pill .tag-post { background: #008000; color: #ffffff; } +:root[data-theme="retro"] .link-pill .tag-json { background: #aa00aa; color: #ffffff; } +:root[data-theme="retro"] .link-pill .tag-key { background: #aa5500; color: #ffffff; } +:root[data-theme="retro"] .link-pill .tag-help { background: #00aaaa; color: #000000; } + /* CLI download cards = silver windows. */ :root[data-theme="retro"] .download-card { background: linear-gradient(to bottom, #ffffff, 4%, #c0c0c0 8%); diff --git a/backend/static/css/40-docs.css b/backend/static/css/40-docs.css index 8b3aced..2c86a86 100644 --- a/backend/static/css/40-docs.css +++ b/backend/static/css/40-docs.css @@ -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; diff --git a/backend/templates/pages/api.html b/backend/templates/pages/api.html index 542f8d3..49b96da 100644 --- a/backend/templates/pages/api.html +++ b/backend/templates/pages/api.html @@ -30,22 +30,22 @@
- + 60-second start Copy-paste examples curl, wget, HTTPie, Python & more - + Terminal Install the CLI One command for macOS, Linux & Windows - + Reference All endpoints Payloads, responses & status codes - + Screenshots ShareX integration Import once, upload as your account @@ -65,14 +65,14 @@

Quick links

- POST Upload endpoint - GET warpbox.sh (macOS/Linux) - GET warpbox.ps1 (Windows) - GET ShareX .sxcu config - JSON Request schema - JSON Response schema - KEY Create an API token - ? FAQ & troubleshooting + POST Upload endpoint + GET warpbox.sh (macOS/Linux) + GET warpbox.ps1 (Windows) + GET ShareX .sxcu config + JSON Request schema + JSON Response schema + KEY Create an API token + ? FAQ & troubleshooting