65 lines
2.5 KiB
CSS
65 lines
2.5 KiB
CSS
/* retoor <retoor@molodetz.nl> */
|
|
.form { display: grid; gap: var(--space-lg); max-width: 34rem; }
|
|
.form.wide { max-width: none; }
|
|
|
|
.field { display: grid; gap: var(--space-xs); min-width: 0; }
|
|
.field label { font-family: var(--font-sans); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
|
|
.field .help { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--faint); }
|
|
|
|
input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="number"], input[type="search"], select, textarea {
|
|
width: 100%;
|
|
background: var(--bg-sunken);
|
|
color: var(--ink);
|
|
border: var(--border-strong);
|
|
border-radius: var(--radius);
|
|
padding: var(--space-sm) var(--space-md);
|
|
font: inherit;
|
|
font-size: var(--text-base);
|
|
}
|
|
|
|
textarea { min-height: 10rem; line-height: var(--leading-body); resize: vertical; font-family: var(--font-mono); font-size: var(--text-sm); }
|
|
|
|
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
|
|
|
|
.check { display: flex; gap: var(--space-sm); align-items: center; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink-soft); }
|
|
|
|
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
|
|
|
|
.button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
background: var(--accent);
|
|
color: var(--accent-ink);
|
|
border: 1px solid var(--accent);
|
|
border-radius: var(--radius);
|
|
padding: var(--space-sm) var(--space-lg);
|
|
font-family: var(--font-sans);
|
|
font-size: var(--text-sm);
|
|
font-weight: 700;
|
|
letter-spacing: 0.06em;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.button:hover { color: var(--accent-ink); filter: brightness(1.08); }
|
|
.button.ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); font-weight: 500; }
|
|
.button.ghost:hover { border-color: var(--ink-soft); }
|
|
.button.danger { background: transparent; color: var(--danger); border-color: var(--danger); }
|
|
.button.small { padding: var(--space-xs) var(--space-sm); font-size: var(--text-xs); }
|
|
|
|
.button.is-loading { opacity: 0.6; pointer-events: none; }
|
|
.button .spinner {
|
|
width: 0.8em;
|
|
height: 0.8em;
|
|
border: 2px solid currentColor;
|
|
border-right-color: transparent;
|
|
border-radius: var(--radius-pill);
|
|
animation: spin 700ms linear infinite;
|
|
}
|
|
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
|
|
.actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: center; }
|
|
.actions form { margin: 0; }
|