gustavosantos/GTI_GERENCIADOR_FISCAL
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: botao de ver senha no login ficava esticado pra largura total

Browse Source 
.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 <noreply@anthropic.com>
This commit is contained in:
Gustavo
2026-08-14 08:56:20 -03:00
co-authored by Claude Sonnet 5
parent 1728a2dbdd
commit f6cf0f2e53
1 changed files with 16 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/login.html
+16 -9
View File
@@ -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; }
</style>
</head>
<body>