30 lines
No EOL
1.3 KiB
HTML
30 lines
No EOL
1.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" href="../colors_and_type.css">
|
|
<link rel="stylesheet" href="_card.css">
|
|
<style>
|
|
body { padding:28px; display:flex; flex-direction:column; gap:18px; }
|
|
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
|
.btn { display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 12px; font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; border:1px solid #B5AE9F; border-radius:2px; background:transparent; color:#1A1814; cursor:pointer; }
|
|
.btn:hover { background:rgba(26,24,20,0.06); }
|
|
.btn.primary { background:#1A1814; color:#ECE7DC; border-color:#1A1814; }
|
|
.btn.danger { color:#B8362B; border-color:#B8362B; }
|
|
.btn.bracket { border:none; padding:0; background:transparent; color:#1A1814; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="row">
|
|
<button class="btn primary">Approve</button>
|
|
<button class="btn">Override</button>
|
|
<button class="btn">Skip</button>
|
|
<button class="btn danger">Reject</button>
|
|
</div>
|
|
<div class="row">
|
|
<span class="btn bracket">[ APPROVE ]</span>
|
|
<span class="btn bracket">[ OVERRIDE ]</span>
|
|
<span class="btn bracket">[ SKIP ]</span>
|
|
</div>
|
|
<div class="legend">solid primary · ghost · bracket (pi.dev style) · danger</div>
|
|
</body></html> |