17 lines
1.3 KiB
CSS
17 lines
1.3 KiB
CSS
/* hotdog-cms forms: the minimum. A site's own stylesheet can restyle all of it. */
|
|
.hotdog-form { display: grid; gap: 1rem; max-width: 40rem; }
|
|
.hotdog-field { display: grid; gap: 0.35rem; }
|
|
.hotdog-field input:not([type="checkbox"]), .hotdog-field textarea, .hotdog-field select { font: inherit; padding: 0.55rem 0.7rem; border: 1px solid currentColor; border-radius: 8px; background: transparent; color: inherit; width: 100%; box-sizing: border-box; }
|
|
.hotdog-field textarea { resize: vertical; }
|
|
.hotdog-help { margin: 0; font-size: 0.9em; opacity: 0.75; }
|
|
.hotdog-error { margin: 0; font-size: 0.9em; color: #b42318; }
|
|
.hotdog-error:empty { display: none; }
|
|
.hotdog-field [aria-invalid="true"] { border-color: #b42318; }
|
|
.hotdog-status:empty { display: none; }
|
|
.hotdog-status { margin: 0; }
|
|
.hotdog-form button[type="submit"] { justify-self: start; font: inherit; padding: 0.6rem 1.2rem; border-radius: 8px; cursor: pointer; }
|
|
.hotdog-form button[disabled] { opacity: 0.6; cursor: progress; }
|
|
/* The trap field: off-screen rather than display:none, which some bots skip. */
|
|
.hotdog-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
|
|
@media (prefers-color-scheme: dark) { .hotdog-error { color: #f97066; } .hotdog-field [aria-invalid="true"] { border-color: #f97066; } }
|