html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
@media (prefers-color-scheme: dark) {
body {
background: black;
}
}
.root {
display: flex;
flex-direction: column;
height: 100%;
}
@media print {
* {
height: auto !important;
overflow: visible !important;
}
}
/* ==========================================================
TWF GPS - TELA DE LOGIN
Desktop: fundo.png
Mobile / Traccar Manager: fundo_app.png
========================================================== */
/* ==========================================================
DESKTOP / PADRÃO
========================================================== */
main:has(> .MuiPaper-root > form input[name="email"]) {
min-height: 100vh !important;
width: 100% !important;
position: relative !important;
background:
linear-gradient(
rgba(2, 22, 45, 0.05),
rgba(2, 22, 45, 0.05)
),
url('/fundo.png') center center / cover no-repeat !important;
overflow: auto !important;
}
/* Remove a lateral padrão do Traccar */
main:has(> .MuiPaper-root > form input[name="email"]) > div:first-child {
display: none !important;
}
/* Área onde fica o formulário */
main:has(> .MuiPaper-root > form input[name="email"]) > .MuiPaper-root {
width: 100% !important;
min-height: 100vh !important;
background: transparent !important;
box-shadow: none !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
padding: 30px !important;
}
/* Card branco */
main:has(> .MuiPaper-root > form input[name="email"]) > .MuiPaper-root > form {
box-sizing: border-box !important;
width: 460px !important;
max-width: calc(100vw - 40px) !important;
padding: 30px 40px 40px 40px !important;
background: rgba(255, 255, 255, 0.97) !important;
border-radius: 22px !important;
box-shadow:
0 25px 70px rgba(0, 0, 0, 0.35),
0 0 0 1px rgba(255, 255, 255, 0.20) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* Logo TWF GPS no topo do card */
main:has(> .MuiPaper-root > form input[name="email"]) > .MuiPaper-root > form::before {
content: "";
display: block;
width: 100%;
height: 125px;
margin: 0 auto 20px auto;
background:
url('/logo.png')
center center
/ contain
no-repeat;
}
/*
Esconde o LogoImage nativo do Traccar,
evitando logo duplicada.
*/
main:has(> .MuiPaper-root > form input[name="email"])
form > div:has(input[name="email"]) > img:first-child,
main:has(> .MuiPaper-root > form input[name="email"])
form > div:has(input[name="email"]) > svg:first-child {
display: none !important;
}
/* Campos */
main:has(> .MuiPaper-root > form input[name="email"]) .MuiOutlinedInput-root {
background: rgba(255, 255, 255, 0.92) !important;
border-radius: 10px !important;
}
/* Campo selecionado */
main:has(> .MuiPaper-root > form input[name="email"])
.MuiOutlinedInput-root.Mui-focused
.MuiOutlinedInput-notchedOutline {
border-color: #084A7E !important;
}
/* Label selecionada */
main:has(> .MuiPaper-root > form input[name="email"])
.MuiInputLabel-root.Mui-focused {
color: #084A7E !important;
}
/* Botão ENTRAR */
main:has(> .MuiPaper-root > form input[name="email"]) button[type="submit"] {
min-height: 48px !important;
border-radius: 9px !important;
background:
linear-gradient(
90deg,
#F9681E,
#FF7A20
) !important;
color: #ffffff !important;
font-size: 16px !important;
font-weight: 700 !important;
text-transform: none !important;
box-shadow:
0 8px 22px
rgba(249, 104, 30, 0.28) !important;
}
/* Botão hover */
main:has(> .MuiPaper-root > form input[name="email"]) button[type="submit"]:hover {
background:
linear-gradient(
90deg,
#E95B14,
#F9681E
) !important;
box-shadow:
0 10px 26px
rgba(249, 104, 30, 0.38) !important;
}
/* Links */
main:has(> .MuiPaper-root > form input[name="email"]) a {
color: #084A7E !important;
}
/* ==========================================================
MOBILE / TRACCAR MANAGER
========================================================== */
@media (max-width: 700px) {
/* ------------------------------------------------------
FUNDO EXCLUSIVO DO APP / CELULAR
------------------------------------------------------ */
main:has(> .MuiPaper-root > form input[name="email"]) {
min-height: 100vh !important;
min-height: 100dvh !important;
width: 100% !important;
background-image: url('/fundo_app.png') !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-attachment: scroll !important;
overflow-x: hidden !important;
overflow-y: auto !important;
}
/* ------------------------------------------------------
ÁREA DO FORMULÁRIO
------------------------------------------------------ */
main:has(> .MuiPaper-root > form input[name="email"]) > .MuiPaper-root {
width: 100% !important;
min-height: 100vh !important;
min-height: 100dvh !important;
padding:
max(55px, env(safe-area-inset-top))
14px
45px
14px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
background: transparent !important;
box-shadow: none !important;
}
/* ------------------------------------------------------
CARD
------------------------------------------------------ */
main:has(> .MuiPaper-root > form input[name="email"]) > .MuiPaper-root > form {
box-sizing: border-box !important;
width: calc(100vw - 28px) !important;
max-width: 420px !important;
margin-left: auto !important;
margin-right: auto !important;
padding:
20px
22px
30px
22px !important;
border-radius: 20px !important;
background: rgba(255, 255, 255, 0.96) !important;
color: #163852 !important;
box-shadow:
0 20px 55px rgba(0, 0, 0, 0.38),
0 0 0 1px rgba(255, 255, 255, 0.25) !important;
/*
Importante para o WebView:
evita problemas de posicionamento do seletor de idioma.
*/
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* ------------------------------------------------------
LOGO
------------------------------------------------------ */
main:has(> .MuiPaper-root > form input[name="email"]) > .MuiPaper-root > form::before {
content: "" !important;
display: block !important;
width: 100% !important;
height: 105px !important;
margin:
0
auto
4px
auto !important;
background-image: url('/logo.png') !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: contain !important;
}
/* ------------------------------------------------------
SERVIDOR / QR / IDIOMA
------------------------------------------------------ */
main:has(> .MuiPaper-root > form input[name="email"])
> .MuiPaper-root
> form
> div:first-child {
position: static !important;
width: 100% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
margin:
0
0
18px
0 !important;
gap: 6px !important;
}
/* Seletor de idioma */
main:has(> .MuiPaper-root > form input[name="email"])
> .MuiPaper-root
> form
> div:first-child
.MuiFormControl-root {
max-width: 220px !important;
}
/* ------------------------------------------------------
CONTAINER DOS CAMPOS
------------------------------------------------------ */
main:has(> .MuiPaper-root > form input[name="email"])
> .MuiPaper-root
> form
> div:nth-child(2) {
width: 100% !important;
gap: 16px !important;
}
/* ------------------------------------------------------
CAMPOS
------------------------------------------------------ */
main:has(> .MuiPaper-root > form input[name="email"])
.MuiOutlinedInput-root {
min-height: 54px !important;
background: #ffffff !important;
border-radius: 10px !important;
color: #163852 !important;
}
/* Texto digitado */
main:has(> .MuiPaper-root > form input[name="email"])
.MuiInputBase-input {
color: #163852 !important;
-webkit-text-fill-color: #163852 !important;
opacity: 1 !important;
}
/* Labels Email / Senha */
main:has(> .MuiPaper-root > form input[name="email"])
.MuiInputLabel-root {
color: #53697c !important;
opacity: 1 !important;
}
/* Label selecionada */
main:has(> .MuiPaper-root > form input[name="email"])
.MuiInputLabel-root.Mui-focused {
color: #084A7E !important;
}
/* Label preenchida */
main:has(> .MuiPaper-root > form input[name="email"])
.MuiInputLabel-root.MuiInputLabel-shrink {
color: #084A7E !important;
}
/* Borda normal */
main:has(> .MuiPaper-root > form input[name="email"])
.MuiOutlinedInput-notchedOutline {
border-color: #ccd6de !important;
}
/* Borda selecionada */
main:has(> .MuiPaper-root > form input[name="email"])
.MuiOutlinedInput-root.Mui-focused
.MuiOutlinedInput-notchedOutline {
border-color: #084A7E !important;
border-width: 2px !important;
}
/* Ícones */
main:has(> .MuiPaper-root > form input[name="email"])
.MuiInputAdornment-root,
main:has(> .MuiPaper-root > form input[name="email"])
.MuiIconButton-root {
color: #53697c !important;
}
/* Seletor de idioma */
main:has(> .MuiPaper-root > form input[name="email"])
.MuiSelect-select {
color: #304b61 !important;
-webkit-text-fill-color: #304b61 !important;
}
/* ------------------------------------------------------
BOTÃO ENTRAR
------------------------------------------------------ */
main:has(> .MuiPaper-root > form input[name="email"])
button[type="submit"] {
width: 100% !important;
min-height: 52px !important;
margin-top: 2px !important;
border-radius: 10px !important;
font-size: 17px !important;
font-weight: 700 !important;
color: #ffffff !important;
background:
linear-gradient(
90deg,
#F9681E,
#FF7A20
) !important;
box-shadow:
0 8px 22px
rgba(249, 104, 30, 0.28) !important;
}
main:has(> .MuiPaper-root > form input[name="email"])
button[type="submit"]:hover {
background:
linear-gradient(
90deg,
#E95B14,
#F9681E
) !important;
}
}
/* ==========================================================
CELULARES ESTREITOS
========================================================== */
@media (max-width: 400px) {
main:has(> .MuiPaper-root > form input[name="email"]) > .MuiPaper-root {
padding:
max(45px, env(safe-area-inset-top))
10px
30px
10px !important;
}
main:has(> .MuiPaper-root > form input[name="email"]) > .MuiPaper-root > form {
width: calc(100vw - 20px) !important;
padding:
18px
18px
26px
18px !important;
}
main:has(> .MuiPaper-root > form input[name="email"]) > .MuiPaper-root > form::before {
height: 90px !important;
}
}
/* TWF GPS - Label de login */
main:has(> .MuiPaper-root > form input[name="email"])
.MuiFormControl-root:has(input[name="email"])
> .MuiInputLabel-root {
font-size: 0 !important;
}
main:has(> .MuiPaper-root > form input[name="email"])
.MuiFormControl-root:has(input[name="email"])
> .MuiInputLabel-root::after {
content: "Usuário ou Email *";
font-size: 1rem;
}
/* ==========================================================
TWF GPS - Corrige label Usuário ou Email
========================================================== */
main:has(> .MuiPaper-root > form input[name="email"])
.MuiFormControl-root:has(input[name="email"])
> .MuiInputLabel-root {
font-size: 1rem !important;
line-height: 1.4375em !important;
/* esconde somente o texto original */
color: transparent !important;
overflow: visible !important;
white-space: nowrap !important;
}
/* Novo texto */
main:has(> .MuiPaper-root > form input[name="email"])
.MuiFormControl-root:has(input[name="email"])
> .MuiInputLabel-root::after {
content: "Usuário ou Email *";
position: absolute;
left: 0;
top: 0;
font-size: inherit !important;
line-height: inherit !important;
color: #53697c !important;
white-space: nowrap !important;
}
/* Quando o campo está preenchido ou a label sobe */
main:has(> .MuiPaper-root > form input[name="email"])
.MuiFormControl-root:has(input[name="email"])
> .MuiInputLabel-root.MuiInputLabel-shrink::after {
color: #084A7E !important;
}
/* Quando está selecionado */
main:has(> .MuiPaper-root > form input[name="email"])
.MuiFormControl-root:has(input[name="email"])
> .MuiInputLabel-root.Mui-focused::after {
color: #084A7E !important;
}
/* ==========================================================
TWF GPS - Corrige recorte da label Usuário ou Email
========================================================== */
main:has(> .MuiPaper-root > form input[name="email"])
.MuiFormControl-root:has(input[name="email"])
> .MuiInputLabel-root::after {
content: "Usuário ou Email *" !important;
background: #ffffff !important;
padding-left: 4px !important;
padding-right: 4px !important;
margin-left: -4px !important;
position: relative !important;
z-index: 10 !important;
white-space: nowrap !important;
}
/* Mantém a cor correta quando a label está acima do campo */
main:has(> .MuiPaper-root > form input[name="email"])
.MuiFormControl-root:has(input[name="email"])
> .MuiInputLabel-root.MuiInputLabel-shrink::after {
color: #084A7E !important;
}
/* Campo selecionado */
main:has(> .MuiPaper-root > form input[name="email"])
.MuiFormControl-root:has(input[name="email"])
> .MuiInputLabel-root.Mui-focused::after {
color: #084A7E !important;
}
/* ==========================================================
TWF GPS - Alinha corretamente "Usuário ou Email *"
========================================================== */
main:has(> .MuiPaper-root > form input[name="email"])
.MuiFormControl-root:has(input[name="email"])
> .MuiInputLabel-root {
position: absolute !important;
overflow: visible !important;
white-space: nowrap !important;
}
/* Texto personalizado */
main:has(> .MuiPaper-root > form input[name="email"])
.MuiFormControl-root:has(input[name="email"])
> .MuiInputLabel-root::after {
content: "Usuário ou Email *" !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
margin: 0 !important;
padding-left: 4px !important;
padding-right: 6px !important;
background: #ffffff !important;
color: #53697c !important;
font-size: 1rem !important;
line-height: 1.4375em !important;
white-space: nowrap !important;
z-index: 10 !important;
}
/* Quando a label está em cima da borda */
main:has(> .MuiPaper-root > form input[name="email"])
.MuiFormControl-root:has(input[name="email"])
> .MuiInputLabel-root.MuiInputLabel-shrink::after {
color: #084A7E !important;
}
/* Campo selecionado */
main:has(> .MuiPaper-root > form input[name="email"])
.MuiFormControl-root:has(input[name="email"])
> .MuiInputLabel-root.Mui-focused::after {
color: #084A7E !important;
}