/* ========================================================================== Telas de autenticação (prefixo .auth-) -------------------------------------------------------------------------- Login, esqueci minha senha, redefinir senha e criar conta. Carregado por templates/auth_base.html, junto do tokens.css — estas páginas não passam pelo base.html, então nada aqui depende do shell da aplicação. Substitui static/login.css, static/alterar_senha.css e static/sign_up.css, os três apagados. O que saiu com eles: - a paleta fixa de tema escuro (#0f172a, #1e293b, #f8fafc, #cbd5e1) e os `style="color:#fecaca"` espalhados nos templates: no tema claro era texto claro sobre fundo claro; - os SVG de olho colados inline com `style="color: wheat"`; - o `display: none !important` que alternava os dois ícones de senha. Só tokens --edt-*, com uma exceção comentada no fim (o realce do preenchimento automático do Chrome). ========================================================================== */ .auth-corpo { display: grid; place-items: center; min-height: 100dvh; margin: 0; padding: var(--edt-space-6) var(--edt-space-4); background-color: var(--edt-surface-0); color: var(--edt-text); font-family: var(--edt-font); /* O fundo tem duas manchas muito suaves da cor da marca, uma em cada canto. `color-mix` com transparent mantém isto preso ao token: no tema escuro a marca é mais clara e a mancha aparece um pouco mais, que é o comportamento desejado. */ background-image: radial-gradient(60rem 40rem at 85% 12%, color-mix(in srgb, var(--edt-brand) 7%, transparent), transparent 70%), radial-gradient(50rem 40rem at 10% 90%, color-mix(in srgb, var(--edt-brand) 5%, transparent), transparent 70%); background-repeat: no-repeat; background-attachment: fixed; } @supports not (color: color-mix(in srgb, red 50%, transparent)) { .auth-corpo { background-image: none; } } /* -------------------------------------------------------------------------- Alternador de tema — canto superior direito -------------------------------------------------------------------------- */ .auth-tema { position: fixed; top: var(--edt-space-4); right: var(--edt-space-5); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: var(--edt-radius-md); background: transparent; color: var(--edt-text-muted); font-size: 1.05rem; cursor: pointer; } .auth-tema:hover { background-color: var(--edt-surface-2); color: var(--edt-text); } .auth-tema:focus-visible { outline: 2px solid var(--edt-brand); outline-offset: 2px; } /* Um ícone por tema: sol quando está escuro (o clique vai clarear), lua quando está claro. Quem troca é o CSS, pelo `data-theme` que o script do já carimbou — o js/theme_toggle.js só cuida do clique. */ .auth-tema__escuro { display: none; } :root[data-theme="dark"] .auth-tema__claro { display: block; } :root[data-theme="dark"] .auth-tema__escuro { display: none; } :root:not([data-theme="dark"]) .auth-tema__claro { display: none; } :root:not([data-theme="dark"]) .auth-tema__escuro { display: block; } /* -------------------------------------------------------------------------- Coluna central -------------------------------------------------------------------------- */ .auth-centro { display: flex; flex-direction: column; align-items: stretch; gap: var(--edt-space-5); width: 100%; max-width: 27rem; margin: 0 auto; } .auth-marca { margin: 0; text-align: center; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; color: var(--edt-text); } .auth-marca__mais { color: var(--edt-brand); } .auth-marca__sufixo { color: var(--edt-brand); font-weight: 700; } /* -------------------------------------------------------------------------- Cartão -------------------------------------------------------------------------- */ .auth-cartao { display: flex; flex-direction: column; gap: var(--edt-space-4); padding: var(--edt-space-5); background-color: var(--edt-surface-1); border: 1px solid var(--edt-border); border-radius: var(--edt-radius-lg); box-shadow: var(--edt-shadow-md); } /* O espaçamento entre os campos é `gap` do formulário, não `margin` em cada bloco: assim o template não precisa de `style=` e a última linha não deixa sobra no fim do cartão. */ .auth-form { display: flex; flex-direction: column; gap: var(--edt-space-4); } .auth-titulo { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--edt-text); } .auth-texto { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--edt-text-muted); } /* -------------------------------------------------------------------------- Campos -------------------------------------------------------------------------- */ .auth-campo { display: flex; flex-direction: column; gap: var(--edt-space-2); } .auth-campo__rotulo { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--edt-text-muted); } /* O ícone e o botão do olho ficam DENTRO da caixa; o ganha padding dos dois lados para o texto não passar por baixo deles. */ .auth-campo__caixa { position: relative; display: flex; align-items: center; } .auth-campo__icone { position: absolute; left: var(--edt-space-3); display: grid; place-items: center; color: var(--edt-text-muted); font-size: 0.95rem; pointer-events: none; } .auth-campo__controle { width: 100%; min-width: 0; padding: 0.7rem var(--edt-space-3) 0.7rem 2.5rem; background-color: var(--edt-surface-1); border: 1px solid var(--edt-border-strong); border-radius: var(--edt-radius-md); color: var(--edt-text); font-family: inherit; font-size: 0.9375rem; } .auth-campo__controle::placeholder { color: var(--edt-text-muted); } .auth-campo__controle:focus { outline: 0; border-color: var(--edt-brand); box-shadow: 0 0 0 3px var(--edt-brand-soft); } .auth-campo--senha .auth-campo__controle { padding-right: 2.75rem; } .auth-olho { position: absolute; right: var(--edt-space-2); display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: var(--edt-radius-sm); background: transparent; color: var(--edt-text-muted); font-size: 0.95rem; cursor: pointer; } .auth-olho:hover { color: var(--edt-text); } .auth-olho:focus-visible { outline: 2px solid var(--edt-brand); outline-offset: 1px; } /* -------------------------------------------------------------------------- Linha "Manter conectado" + "Esqueci minha senha" -------------------------------------------------------------------------- */ .auth-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--edt-space-3); } .auth-check { display: inline-flex; align-items: center; gap: var(--edt-space-2); margin: 0; font-size: 0.875rem; color: var(--edt-text); cursor: pointer; } .auth-check input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--edt-brand); cursor: pointer; } .auth-link { color: var(--edt-brand); font-size: 0.875rem; font-weight: 600; text-decoration: none; } .auth-link:hover { text-decoration: underline; color: var(--edt-brand-hover); } /* -------------------------------------------------------------------------- Botão principal — o .edt-btn do tokens.css, esticado -------------------------------------------------------------------------- */ .auth-botao { width: 100%; padding-top: 0.7rem; padding-bottom: 0.7rem; font-size: 0.9375rem; font-weight: 700; } /* -------------------------------------------------------------------------- Faixa de resultado (substitui os alert() e os `style=` inline) -------------------------------------------------------------------------- */ .auth-msg { margin: 0; padding: var(--edt-space-3); border-radius: var(--edt-radius-md); font-size: 0.875rem; line-height: 1.5; } .auth-msg[hidden] { display: none; } .auth-msg--ok { background-color: var(--edt-success-soft); border: 1px solid var(--edt-success); color: color-mix(in srgb, var(--edt-success) 72%, black); } .auth-msg--erro { background-color: var(--edt-danger-soft); border: 1px solid var(--edt-danger); color: color-mix(in srgb, var(--edt-danger) 72%, black); } :root[data-theme="dark"] .auth-msg--ok { color: var(--edt-success); } :root[data-theme="dark"] .auth-msg--erro { color: var(--edt-danger); } @supports not (color: color-mix(in srgb, red 50%, black)) { .auth-msg--ok { color: var(--edt-success); } .auth-msg--erro { color: var(--edt-danger); } } /* -------------------------------------------------------------------------- Link abaixo do cartão -------------------------------------------------------------------------- */ .auth-abaixo { display: flex; justify-content: center; margin: 0; font-size: 0.875rem; color: var(--edt-text-muted); } .auth-abaixo a { display: inline-flex; align-items: center; gap: var(--edt-space-2); color: var(--edt-brand); font-weight: 600; text-decoration: none; } .auth-abaixo a:hover { text-decoration: underline; } /* -------------------------------------------------------------------------- Preenchimento automático do navegador O Chrome pinta o campo autopreenchido com um amarelo próprio e ignora `background-color`. O truque conhecido é empurrar a cor por uma sombra interna gigante; `-webkit-text-fill-color` é o único jeito de recolorar o texto. Os dois usam token, então seguem o tema. -------------------------------------------------------------------------- */ .auth-campo__controle:-webkit-autofill, .auth-campo__controle:-webkit-autofill:hover, .auth-campo__controle:-webkit-autofill:focus { box-shadow: 0 0 0 1000px var(--edt-surface-1) inset; -webkit-text-fill-color: var(--edt-text); caret-color: var(--edt-text); } /* -------------------------------------------------------------------------- Telas baixas: o cartão não pode empurrar a marca para fora -------------------------------------------------------------------------- */ @media (max-height: 640px) { .auth-corpo { place-items: start center; padding-top: var(--edt-space-5); } }