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

92
backend/static/css/16-retro.css
View File

@@ -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 <h2> 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%);

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;

24
backend/templates/pages/api.html
View File

@@ -30,22 +30,22 @@
</header>
<div class="shortcut-grid">
<a class="shortcut-card" href="#examples" data-doc-link>
<a class="shortcut-card accent-blue" href="#examples" data-doc-link>
<span class="shortcut-eyebrow">60-second start</span>
<span class="shortcut-title">Copy-paste examples</span>
<span class="shortcut-sub">curl, wget, HTTPie, Python &amp; more</span>
</a>
<a class="shortcut-card" href="#cli" data-doc-link>
<a class="shortcut-card accent-green" href="#cli" data-doc-link>
<span class="shortcut-eyebrow">Terminal</span>
<span class="shortcut-title">Install the CLI</span>
<span class="shortcut-sub">One command for macOS, Linux &amp; Windows</span>
</a>
<a class="shortcut-card" href="#endpoints" data-doc-link>
<a class="shortcut-card accent-violet" href="#endpoints" data-doc-link>
<span class="shortcut-eyebrow">Reference</span>
<span class="shortcut-title">All endpoints</span>
<span class="shortcut-sub">Payloads, responses &amp; status codes</span>
</a>
<a class="shortcut-card" href="#integrations" data-doc-link>
<a class="shortcut-card accent-amber" href="#integrations" data-doc-link>
<span class="shortcut-eyebrow">Screenshots</span>
<span class="shortcut-title">ShareX integration</span>
<span class="shortcut-sub">Import once, upload as your account</span>
@@ -65,14 +65,14 @@
<h3 class="section-label">Quick links</h3>
<div class="link-grid">
<a class="link-pill" href="#ep-upload" data-doc-link><span>POST</span> Upload endpoint</a>
<a class="link-pill" href="/static/api/warpbox.sh" download><span>GET</span> warpbox.sh (macOS/Linux)</a>
<a class="link-pill" href="/static/api/warpbox.ps1" download><span>GET</span> warpbox.ps1 (Windows)</a>
<a class="link-pill" href="{{.Data.ShareXDownloadURL}}" download><span>GET</span> ShareX .sxcu config</a>
<a class="link-pill" href="{{.Data.RequestSchemaURL}}"><span>JSON</span> Request schema</a>
<a class="link-pill" href="{{.Data.ResponseSchemaURL}}"><span>JSON</span> Response schema</a>
<a class="link-pill" href="/account/settings"><span>KEY</span> Create an API token</a>
<a class="link-pill" href="#faq" data-doc-link><span>?</span> FAQ &amp; troubleshooting</a>
<a class="link-pill" href="#ep-upload" data-doc-link><span class="link-tag tag-post">POST</span> Upload endpoint</a>
<a class="link-pill" href="/static/api/warpbox.sh" download><span class="link-tag tag-get">GET</span> warpbox.sh (macOS/Linux)</a>
<a class="link-pill" href="/static/api/warpbox.ps1" download><span class="link-tag tag-get">GET</span> warpbox.ps1 (Windows)</a>
<a class="link-pill" href="{{.Data.ShareXDownloadURL}}" download><span class="link-tag tag-get">GET</span> ShareX .sxcu config</a>
<a class="link-pill" href="{{.Data.RequestSchemaURL}}"><span class="link-tag tag-json">JSON</span> Request schema</a>
<a class="link-pill" href="{{.Data.ResponseSchemaURL}}"><span class="link-tag tag-json">JSON</span> Response schema</a>
<a class="link-pill" href="/account/settings"><span class="link-tag tag-key">KEY</span> Create an API token</a>
<a class="link-pill" href="#faq" data-doc-link><span class="link-tag tag-help">?</span> FAQ &amp; troubleshooting</a>
</div>
</section>