Estiliza formulário de configuração do microsite

Adiciona biblioteca CSS 'form' ao tema do microsite com estilos para
labels, campos, descrições e botão de submit, seguindo a paleta de cores
do tema. O formulário aplica a classe .microsite-form e anexa a biblioteca
automaticamente.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-21 10:21:57 -03:00
parent 85bc63b250
commit 18a7aa81cb
3 changed files with 97 additions and 0 deletions

View File

@@ -0,0 +1,87 @@
/**
* Microsite theme — estilos para formulários de configuração do usuário.
*/
.microsite-form {
background: #fff;
border-radius: 6px;
padding: 2rem;
max-width: 600px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.microsite-form .form-item {
margin-bottom: 1.5rem;
}
.microsite-form label {
display: block;
margin-bottom: 0.4rem;
font-weight: 600;
font-size: 0.95rem;
color: #333;
}
.microsite-form select,
.microsite-form input[type="text"],
.microsite-form input[type="email"],
.microsite-form textarea {
display: block;
width: 100%;
padding: 0.5rem 0.75rem;
font-size: 0.95rem;
font-family: inherit;
color: #222;
background: #fff;
border: 1px solid #ccc;
border-radius: 4px;
transition: border-color 0.15s, box-shadow 0.15s;
appearance: auto;
}
.microsite-form select:focus,
.microsite-form input:focus,
.microsite-form textarea:focus {
outline: none;
border-color: hsl(202, 79%, 50%);
box-shadow: 0 0 0 3px hsla(202, 79%, 50%, 0.2);
}
.microsite-form .form-item__description,
.microsite-form .description {
margin-top: 0.35rem;
font-size: 0.85rem;
color: #666;
}
.microsite-form .form-actions {
margin-top: 2rem;
padding-top: 1.25rem;
border-top: 1px solid #eee;
}
.microsite-form .button,
.microsite-form input[type="submit"] {
display: inline-block;
padding: 0.55rem 1.5rem;
font-size: 0.95rem;
font-weight: 600;
font-family: inherit;
color: #fff;
background: hsl(202, 79%, 50%);
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.15s;
}
.microsite-form .button:hover,
.microsite-form input[type="submit"]:hover {
background: hsl(202, 79%, 42%);
}
.microsite-form .button:focus,
.microsite-form input[type="submit"]:focus {
outline: none;
box-shadow: 0 0 0 3px hsla(202, 79%, 50%, 0.35);
}