From f6cf0f2e5375bf71595bf22bf413b3461680da4e Mon Sep 17 00:00:00 2001 From: Gustavo Date: Fri, 14 Aug 2026 08:56:20 -0300 Subject: [PATCH] fix: botao de ver senha no login ficava esticado pra largura total .login-cartao button { width: 100%; } tinha mais especificidade CSS que .botao-ver-senha e forcava o botao do olho a ocupar 100% da largura do campo, jogando o icone (alinhado por padrao a esquerda no flex) pro canto esquerdo por cima do input. Regra do width:100% agora so mira o botao de submit; o campo de senha vira um wrapper flex (input + botao lado a lado), mais robusto que posicionamento absoluto. Co-Authored-By: Claude Sonnet 5 --- app/templates/login.html | 25 ++++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/app/templates/login.html b/app/templates/login.html index ae4567e..ee561c8 100644 --- a/app/templates/login.html +++ b/app/templates/login.html @@ -17,16 +17,23 @@ .login-cartao h1 { font-size: 1.3rem; margin-bottom: 4px; } .login-subtitulo { color: var(--cor-texto-secundario); font-size: 0.9rem; margin: 0 0 20px; } .login-cartao form { text-align: left; } - .login-cartao button { width: 100%; } - .campo-senha { position: relative; } - .campo-senha input { padding-right: 40px; } - .botao-ver-senha { - position: absolute; right: 4px; top: 50%; transform: translateY(-50%); - margin: 0; padding: 6px; width: auto; background: transparent; border: none; - color: var(--cor-texto-secundario); cursor: pointer; display: flex; align-items: center; + .login-cartao > form > button[type="submit"] { width: 100%; } + .campo-senha { + display: flex; align-items: center; + border: 1px solid var(--cor-borda); border-radius: 8px; background: var(--cor-fundo); } - .botao-ver-senha:hover { color: var(--cor-texto); } - .botao-ver-senha svg { width: 18px; height: 18px; } + .campo-senha input { + flex: 1; min-width: 0; border: none; background: transparent; + } + .campo-senha input:focus-visible { outline: none; } + .campo-senha:focus-within { outline: 2px solid var(--cor-acento); outline-offset: 2px; } + .campo-senha .botao-ver-senha { + flex-shrink: 0; margin: 0; padding: 0 12px; width: auto; height: 100%; + background: transparent; border: none; color: var(--cor-texto-secundario); + cursor: pointer; display: flex; align-items: center; justify-content: center; + } + .campo-senha .botao-ver-senha:hover { color: var(--cor-texto); } + .campo-senha .botao-ver-senha svg { width: 18px; height: 18px; }