butterfly/themes/carbon-neon/login.scss
Claude fc6e04e659 Fix temas: background não aparecia (body do login é .welcome-anonymous)
O body da tela de login do GLPI 11 é <body class="welcome-anonymous">;
.page-anonymous fica no <main>. Os seletores body.page-anonymous nunca
casavam e o cinza padrão do Tabler ficava por cima. Agora o fundo é
aplicado em body.welcome-anonymous, body.login-page e main.page-anonymous
(background-attachment: fixed alinha as camadas no viewport).

Gotcha de dev: o cache do compileScss é chaveado pelo texto do @import,
não pelo conteúdo do arquivo — editar login.scss exige ?reload=1 na URL
do login para recompilar.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-03 20:31:32 -03:00

97 lines
2.5 KiB
SCSS

/* Tema Carbon Neon — dark tech com glow ciano */
$btn-background-color: #00e5c7 !default;
$btn-foreground-color: #031a17 !default;
body.welcome-anonymous,
body.login-page,
main.page-anonymous {
min-height: 100vh;
background-color: #07090d;
background-image:
radial-gradient(55% 45% at 50% 0%, rgba(0, 229, 199, 0.14) 0%, transparent 70%),
radial-gradient(40% 40% at 90% 90%, rgba(56, 189, 248, 0.10) 0%, transparent 70%),
linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
background-size: 100% 100%, 100% 100%, 44px 44px, 44px 44px;
background-attachment: fixed;
}
.page-anonymous .main-content-card .card-body {
background: rgba(15, 20, 28, 0.92);
border: 1px solid rgba(0, 229, 199, 0.22);
border-radius: 16px;
padding: 2.3rem !important;
box-shadow:
0 0 0 1px rgba(0, 229, 199, 0.06),
0 0 45px rgba(0, 229, 199, 0.10),
0 26px 60px rgba(0, 0, 0, 0.60);
}
.page-anonymous .card-header {
color: #e2e8f0;
border: 0;
background: transparent;
font-weight: 600;
}
.page-anonymous .form-label {
color: #7dd3c8;
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.page-anonymous .form-control,
.page-anonymous .form-select {
background: rgba(2, 6, 12, 0.75);
border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: 10px;
color: #e2e8f0;
padding: 0.65rem 0.85rem;
&::placeholder {
color: rgba(148, 163, 184, 0.45);
}
&:focus {
background: rgba(2, 6, 12, 0.9);
border-color: rgba(0, 229, 199, 0.65);
box-shadow: 0 0 0 0.25rem rgba(0, 229, 199, 0.15), 0 0 18px rgba(0, 229, 199, 0.20);
color: #ffffff;
}
}
.page-anonymous .form-check-input {
background-color: rgba(2, 6, 12, 0.75);
border-color: rgba(148, 163, 184, 0.35);
}
.page-anonymous .btn.btn-primary {
background: $btn-background-color;
border: 0;
border-radius: 10px;
color: $btn-foreground-color;
padding: 0.7rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
font-size: 0.82rem;
box-shadow: 0 0 22px rgba(0, 229, 199, 0.35);
transition: box-shadow 0.15s ease, transform 0.15s ease;
&:hover {
transform: translateY(-1px);
box-shadow: 0 0 34px rgba(0, 229, 199, 0.55);
}
}
.page-anonymous .text-muted,
.page-anonymous .copyright {
color: #64748b !important;
}
.page-anonymous a {
color: #00e5c7 !important;
}