27192dd69f
Frontend redesign in progress: updated styles, layout, and components across all pages to align with new design system. Includes Jira API compliance specs, property tests, and load test script.
16 lines
1.8 KiB
HTML
16 lines
1.8 KiB
HTML
<!doctype html><html><head><meta charset="utf-8"><title>Accent</title><link rel="stylesheet" href="_card.css"></head><body>
|
|
<div class="card">
|
|
<div class="card-row" style="gap:0;border-radius:8px;overflow:hidden;height:80px">
|
|
<div style="flex:1;background:var(--accent);display:flex;align-items:flex-end;padding:8px"><div><div style="font:600 11px/1 var(--font-mono);color:var(--fg-on-accent)">--accent</div><div style="font:400 10px/1.4 var(--font-mono);color:var(--fg-on-accent);opacity:.75;margin-top:3px">#38BDF8</div></div></div>
|
|
<div style="flex:1;background:var(--accent-hover);display:flex;align-items:flex-end;padding:8px"><div><div style="font:600 11px/1 var(--font-mono);color:var(--fg-on-accent)">accent-hover</div><div style="font:400 10px/1.4 var(--font-mono);color:var(--fg-on-accent);opacity:.75;margin-top:3px">#7DD3FC</div></div></div>
|
|
<div style="flex:1;background:var(--accent-press);display:flex;align-items:flex-end;padding:8px"><div><div style="font:600 11px/1 var(--font-mono);color:var(--fg-on-accent)">accent-press</div><div style="font:400 10px/1.4 var(--font-mono);color:var(--fg-on-accent);opacity:.75;margin-top:3px">#0EA5E9</div></div></div>
|
|
</div>
|
|
<div class="card-row" style="gap:8px">
|
|
<button style="background:var(--accent);color:var(--fg-on-accent);border:none;padding:8px 16px;border-radius:6px;font:600 13px var(--font-ui);cursor:pointer">Sync</button>
|
|
<button style="background:var(--accent-hover);color:var(--fg-on-accent);border:none;padding:8px 16px;border-radius:6px;font:600 13px var(--font-ui)">:hover</button>
|
|
<button style="background:var(--accent-press);color:var(--fg-on-accent);border:none;padding:8px 16px;border-radius:6px;font:600 13px var(--font-ui)">:active</button>
|
|
<span class="t-meta">Sky-blue accent — primary action, link, focused state</span>
|
|
</div>
|
|
</div>
|
|
</body></html>
|