156 lines
7.3 KiB
HTML
156 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<!-- @dsCard group="Brand" name="Borders & Radius" subtitle="6px default (medium) — shape comparison across button/card/input" viewport="800x360" -->
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="../styles.css">
|
|
<style>
|
|
body { margin: 0; padding: 20px 24px; background: var(--bg-page); font-family: var(--font-body); }
|
|
|
|
.section-label {
|
|
font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em;
|
|
text-transform: uppercase; color: var(--fg-muted);
|
|
margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle);
|
|
}
|
|
.section { margin-bottom: 28px; }
|
|
|
|
/* ── RADIUS COMPARISON GRID ── */
|
|
.radius-grid {
|
|
display: grid;
|
|
grid-template-columns: 80px repeat(5, 1fr);
|
|
gap: 0; border: 1px solid var(--border); border-radius: 2px; overflow: hidden;
|
|
}
|
|
.rg-header {
|
|
background: var(--bg-shell); border-bottom: 1px solid var(--border);
|
|
padding: 7px 12px; font-family: var(--font-mono); font-size: 9px;
|
|
letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-dim);
|
|
display: flex; align-items: center;
|
|
}
|
|
.rg-cell {
|
|
padding: 14px 12px; border-right: 1px solid var(--border);
|
|
display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
|
|
background: var(--bg-surface);
|
|
}
|
|
.rg-cell:last-child { border-right: none; }
|
|
.rg-label { font-family: var(--font-mono); font-size: 9px; color: var(--fg-muted); letter-spacing: 0.06em; }
|
|
.rg-row-label { background: var(--bg-shell); padding: 0 12px; display: flex; align-items: center;
|
|
font-family: var(--font-mono); font-size: 9px; color: var(--fg-muted); letter-spacing: 0.06em;
|
|
border-right: 1px solid var(--border); }
|
|
|
|
/* Base component styles */
|
|
.btn {
|
|
font-family: var(--font-body); font-size: 12px; font-weight: 700;
|
|
letter-spacing: 0.06em; text-transform: uppercase;
|
|
padding: 8px 18px; border: 1px solid var(--gold-dim);
|
|
background: var(--gold-dim); color: var(--bg-shell);
|
|
cursor: default; display: inline-block;
|
|
}
|
|
.btn-ghost {
|
|
background: transparent; color: var(--fg-secondary); border-color: var(--border);
|
|
}
|
|
.card-sample {
|
|
background: var(--bg-active); border: 1px solid var(--border);
|
|
padding: 10px 12px; width: 100%;
|
|
}
|
|
.card-sample-title { font-size: 12px; font-weight: 700; color: var(--fg-body); margin-bottom: 2px; }
|
|
.card-sample-sub { font-family: var(--font-mono); font-size: 9px; color: var(--fg-muted); }
|
|
.input-sample {
|
|
background: var(--bg-shell); border: 1px solid var(--border);
|
|
padding: 7px 10px; font-family: var(--font-mono); font-size: 11px;
|
|
color: var(--fg-caption); width: 100%;
|
|
}
|
|
|
|
/* ── STATES GRID ── */
|
|
.states-grid {
|
|
display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
|
|
}
|
|
.state-cell {
|
|
background: var(--bg-surface); border: 1px solid var(--border);
|
|
border-radius: 2px; padding: 14px;
|
|
}
|
|
.state-cell-label {
|
|
font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
|
|
text-transform: uppercase; color: var(--gold-dim); margin-bottom: 10px;
|
|
}
|
|
.state-btn {
|
|
font-family: var(--font-body); font-size: 12px; font-weight: 700;
|
|
letter-spacing: 0.06em; text-transform: uppercase;
|
|
padding: 8px 18px; border-radius: 2px; cursor: default; display: inline-block;
|
|
margin-bottom: 8px;
|
|
}
|
|
.note { font-family: var(--font-mono); font-size: 9px; color: var(--fg-muted); line-height: 1.5; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- SECTION 1: RADIUS COMPARISON -->
|
|
<div class="section">
|
|
<div class="section-label">Section 1 — Shape exploration · buttons · cards · inputs</div>
|
|
|
|
<div class="radius-grid">
|
|
<!-- Headers -->
|
|
<div class="rg-header"></div>
|
|
<div class="rg-header">Sharp<br><span style="color:var(--fg-muted)">0px</span></div>
|
|
<div class="rg-header">Slight<br><span style="color:var(--fg-muted)">2px</span></div>
|
|
<div class="rg-header">Medium<br><span style="color:var(--fg-muted)">6px</span></div>
|
|
<div class="rg-header">Round<br><span style="color:var(--fg-muted)">12px</span></div>
|
|
<div class="rg-header">Pill<br><span style="color:var(--fg-muted)">999px</span></div>
|
|
|
|
<!-- Buttons row -->
|
|
<div class="rg-row-label" style="border-bottom:1px solid var(--border)">Button</div>
|
|
<div class="rg-cell" style="border-bottom:1px solid var(--border)">
|
|
<div class="btn" style="border-radius:0">Execute</div>
|
|
<div class="btn btn-ghost" style="border-radius:0;margin-top:4px">Cancel</div>
|
|
</div>
|
|
<div class="rg-cell" style="border-bottom:1px solid var(--border)">
|
|
<div class="btn" style="border-radius:2px">Execute</div>
|
|
<div class="btn btn-ghost" style="border-radius:2px;margin-top:4px">Cancel</div>
|
|
</div>
|
|
<div class="rg-cell" style="border-bottom:1px solid var(--border)">
|
|
<div class="btn" style="border-radius:6px">Execute</div>
|
|
<div class="btn btn-ghost" style="border-radius:6px;margin-top:4px">Cancel</div>
|
|
</div>
|
|
<div class="rg-cell" style="border-bottom:1px solid var(--border)">
|
|
<div class="btn" style="border-radius:12px">Execute</div>
|
|
<div class="btn btn-ghost" style="border-radius:12px;margin-top:4px">Cancel</div>
|
|
</div>
|
|
<div class="rg-cell" style="border-bottom:1px solid var(--border)">
|
|
<div class="btn" style="border-radius:999px">Execute</div>
|
|
<div class="btn btn-ghost" style="border-radius:999px;margin-top:4px">Cancel</div>
|
|
</div>
|
|
|
|
<!-- Cards row -->
|
|
<div class="rg-row-label" style="border-bottom:1px solid var(--border)">Card</div>
|
|
<div class="rg-cell" style="border-bottom:1px solid var(--border)">
|
|
<div class="card-sample" style="border-radius:0"><div class="card-sample-title">Node Alpha</div><div class="card-sample-sub">99.97% uptime</div></div>
|
|
</div>
|
|
<div class="rg-cell" style="border-bottom:1px solid var(--border)">
|
|
<div class="card-sample" style="border-radius:2px"><div class="card-sample-title">Node Alpha</div><div class="card-sample-sub">99.97% uptime</div></div>
|
|
</div>
|
|
<div class="rg-cell" style="border-bottom:1px solid var(--border)">
|
|
<div class="card-sample" style="border-radius:6px"><div class="card-sample-title">Node Alpha</div><div class="card-sample-sub">99.97% uptime</div></div>
|
|
</div>
|
|
<div class="rg-cell" style="border-bottom:1px solid var(--border)">
|
|
<div class="card-sample" style="border-radius:12px"><div class="card-sample-title">Node Alpha</div><div class="card-sample-sub">99.97% uptime</div></div>
|
|
</div>
|
|
<div class="rg-cell" style="border-bottom:1px solid var(--border)">
|
|
<div class="card-sample" style="border-radius:16px"><div class="card-sample-title">Node Alpha</div><div class="card-sample-sub">99.97% uptime</div></div>
|
|
</div>
|
|
|
|
<!-- Input row -->
|
|
<div class="rg-row-label">Input</div>
|
|
<div class="rg-cell"><div class="input-sample" style="border-radius:0">192.168.1.1</div></div>
|
|
<div class="rg-cell"><div class="input-sample" style="border-radius:2px">192.168.1.1</div></div>
|
|
<div class="rg-cell"><div class="input-sample" style="border-radius:6px">192.168.1.1</div></div>
|
|
<div class="rg-cell"><div class="input-sample" style="border-radius:12px">192.168.1.1</div></div>
|
|
<div class="rg-cell"><div class="input-sample" style="border-radius:999px">192.168.1.1</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
</style>
|
|
|
|
</body>
|
|
</html>
|