32 lines
1.7 KiB
HTML
32 lines
1.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Pigment States</title>
|
|
<link rel="stylesheet" href="../colors_and_type.css" />
|
|
<style>
|
|
html, body { margin: 0; background: var(--background); }
|
|
.card { padding: 22px 28px; box-sizing: border-box; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-family: var(--font-sans); }
|
|
.chip { padding: 12px 16px; border-radius: 10px; display: flex; align-items: center; gap: 12px; }
|
|
.dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
|
|
.chip.suc { background: rgba(109,140,124,0.12); }
|
|
.chip.suc .dot { background: #6d8c7c; }
|
|
.chip.war { background: rgba(194,157,89,0.14); }
|
|
.chip.war .dot { background: #c29d59; }
|
|
.chip.err { background: rgba(185,107,88,0.12); }
|
|
.chip.err .dot { background: #b96b58; }
|
|
.chip.inf { background: rgba(90,109,131,0.12); }
|
|
.chip.inf .dot { background: #5a6d83; }
|
|
.t { font-size: 13px; color: var(--on-surface); font-weight: 500; }
|
|
.s { font-size: 12px; color: var(--on-surface-variant); display: block; margin-top: 2px; font-style: italic; font-family: var(--font-serif); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<div class="chip suc"><div class="dot"></div><div><div class="t">Filed</div><span class="s">Saved to your archive.</span></div></div>
|
|
<div class="chip war"><div class="dot"></div><div><div class="t">Review before publishing</div><span class="s">Two citations are missing.</span></div></div>
|
|
<div class="chip err"><div class="dot"></div><div><div class="t">Could not reach the archive</div><span class="s">Retry?</span></div></div>
|
|
<div class="chip inf"><div class="dot"></div><div><div class="t">Reading your document</div><span class="s">Just a moment.</span></div></div>
|
|
</div>
|
|
</body>
|
|
</html>
|