/* 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; } }