Temas com layouts estruturalmente distintos (não só cores)
- nordic-minimal: split-screen padrão Stripe/Notion — painel branco full-height ancorado à direita, anéis decorativos no lado livre, form alinhado à esquerda dentro do painel. - carbon-neon: janela de terminal ancorada à esquerda — title bar com os 3 botões (no .card-header vazio do card), título user@glpi:~/login, labels com prompt '>', cursor '_' piscando no h2, botão '$ ENTRAR' outline que preenche no hover. - sunset-mesh: borderless padrão Linear/Vercel — sem card, coluna estreita direto no mesh, inputs underline, botão pill. - aurora-glass: glass compacto centrado (26rem) abraçando o form, inputs pill e dois blobs de aurora animados (keyframes) atrás. Todos estilizam select2 do dropdown de origem de login e têm fallback responsivo (painel/terminal centralizam em telas estreitas). Previews regenerados refletindo o layout de cada tema. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Claude
parent
fc6e04e659
commit
b276342d9f
12 changed files with 762 additions and 163 deletions
|
|
@ -1,5 +1,6 @@
|
|||
@charset "UTF-8";
|
||||
/* Tema Aurora Glass — glassmorphism escuro com aurora */
|
||||
/* Tema Aurora Glass — cartão de vidro compacto centrado, inputs pill,
|
||||
blobs de aurora animados flutuando */
|
||||
body.welcome-anonymous,
|
||||
body.login-page,
|
||||
main.page-anonymous {
|
||||
|
|
@ -9,21 +10,82 @@ main.page-anonymous {
|
|||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
/* blobs animados flutuando atrás do cartão */
|
||||
main.page-anonymous {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
main.page-anonymous::before, main.page-anonymous::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
width: 420px;
|
||||
height: 420px;
|
||||
border-radius: 50%;
|
||||
filter: blur(70px);
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
main.page-anonymous::before {
|
||||
background: radial-gradient(circle, rgba(124, 108, 255, 0.55), transparent 65%);
|
||||
top: -120px;
|
||||
left: -80px;
|
||||
animation: butterfly-float-a 14s ease-in-out infinite alternate;
|
||||
}
|
||||
main.page-anonymous::after {
|
||||
background: radial-gradient(circle, rgba(45, 212, 191, 0.45), transparent 65%);
|
||||
bottom: -140px;
|
||||
right: -60px;
|
||||
animation: butterfly-float-b 17s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes butterfly-float-a {
|
||||
from {
|
||||
transform: translate(0, 0) scale(1);
|
||||
}
|
||||
to {
|
||||
transform: translate(70px, 50px) scale(1.15);
|
||||
}
|
||||
}
|
||||
@keyframes butterfly-float-b {
|
||||
from {
|
||||
transform: translate(0, 0) scale(1.1);
|
||||
}
|
||||
to {
|
||||
transform: translate(-60px, -50px) scale(0.95);
|
||||
}
|
||||
}
|
||||
/* cartão compacto que abraça o form */
|
||||
.page-anonymous .container-tight {
|
||||
max-width: 26rem !important;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.page-anonymous .main-content-card .card-body {
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
backdrop-filter: blur(18px);
|
||||
-webkit-backdrop-filter: blur(18px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
border-radius: 20px;
|
||||
border-radius: 26px;
|
||||
padding: 2.2rem !important;
|
||||
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
.page-anonymous .main-content-card .col-md-5 {
|
||||
width: 100% !important;
|
||||
max-width: none;
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
.page-anonymous .card-header {
|
||||
color: #f1f5f9;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
.page-anonymous .card-header h2 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.page-anonymous .form-label,
|
||||
.page-anonymous .form-check-label,
|
||||
|
|
@ -33,13 +95,14 @@ main.page-anonymous {
|
|||
color: #cbd5e1 !important;
|
||||
}
|
||||
|
||||
/* inputs pill */
|
||||
.page-anonymous .form-control,
|
||||
.page-anonymous .form-select {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||
border-radius: 12px;
|
||||
border-radius: 999px;
|
||||
color: #f8fafc;
|
||||
padding: 0.65rem 0.85rem;
|
||||
padding: 0.65rem 1.2rem;
|
||||
}
|
||||
.page-anonymous .form-control::placeholder,
|
||||
.page-anonymous .form-select::placeholder {
|
||||
|
|
@ -53,6 +116,12 @@ main.page-anonymous {
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.page-anonymous .select2-container .select2-selection {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.page-anonymous .form-check-input {
|
||||
background-color: rgba(255, 255, 255, 0.12);
|
||||
border-color: rgba(255, 255, 255, 0.25);
|
||||
|
|
@ -61,9 +130,9 @@ main.page-anonymous {
|
|||
.page-anonymous .btn.btn-primary {
|
||||
background: linear-gradient(135deg, #7c6cff 0%, #4f8bff 100%);
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
border-radius: 999px;
|
||||
color: #ffffff;
|
||||
padding: 0.7rem;
|
||||
padding: 0.72rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 7.7 KiB After Width: | Height: | Size: 7.6 KiB |
|
|
@ -1,4 +1,5 @@
|
|||
/* Tema Aurora Glass — glassmorphism escuro com aurora */
|
||||
/* Tema Aurora Glass — cartão de vidro compacto centrado, inputs pill,
|
||||
blobs de aurora animados flutuando */
|
||||
|
||||
$btn-background-color: #7c6cff !default;
|
||||
$btn-foreground-color: #ffffff !default;
|
||||
|
|
@ -16,20 +17,80 @@ main.page-anonymous {
|
|||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
/* blobs animados flutuando atrás do cartão */
|
||||
main.page-anonymous {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
width: 420px;
|
||||
height: 420px;
|
||||
border-radius: 50%;
|
||||
filter: blur(70px);
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background: radial-gradient(circle, rgba(124, 108, 255, 0.55), transparent 65%);
|
||||
top: -120px;
|
||||
left: -80px;
|
||||
animation: butterfly-float-a 14s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: radial-gradient(circle, rgba(45, 212, 191, 0.45), transparent 65%);
|
||||
bottom: -140px;
|
||||
right: -60px;
|
||||
animation: butterfly-float-b 17s ease-in-out infinite alternate;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes butterfly-float-a {
|
||||
from { transform: translate(0, 0) scale(1); }
|
||||
to { transform: translate(70px, 50px) scale(1.15); }
|
||||
}
|
||||
|
||||
@keyframes butterfly-float-b {
|
||||
from { transform: translate(0, 0) scale(1.1); }
|
||||
to { transform: translate(-60px, -50px) scale(0.95); }
|
||||
}
|
||||
|
||||
/* cartão compacto que abraça o form */
|
||||
.page-anonymous .container-tight {
|
||||
max-width: 26rem !important;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.page-anonymous .main-content-card .card-body {
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
backdrop-filter: blur(18px);
|
||||
-webkit-backdrop-filter: blur(18px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
border-radius: 20px;
|
||||
border-radius: 26px;
|
||||
padding: 2.2rem !important;
|
||||
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
.page-anonymous .main-content-card .col-md-5 {
|
||||
width: 100% !important;
|
||||
max-width: none;
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
.page-anonymous .card-header {
|
||||
color: #f1f5f9;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
|
||||
h2 {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.page-anonymous .form-label,
|
||||
|
|
@ -40,13 +101,14 @@ main.page-anonymous {
|
|||
color: #cbd5e1 !important;
|
||||
}
|
||||
|
||||
/* inputs pill */
|
||||
.page-anonymous .form-control,
|
||||
.page-anonymous .form-select {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||
border-radius: 12px;
|
||||
border-radius: 999px;
|
||||
color: #f8fafc;
|
||||
padding: 0.65rem 0.85rem;
|
||||
padding: 0.65rem 1.2rem;
|
||||
|
||||
&::placeholder {
|
||||
color: rgba(241, 245, 249, 0.45);
|
||||
|
|
@ -60,6 +122,12 @@ main.page-anonymous {
|
|||
}
|
||||
}
|
||||
|
||||
.page-anonymous .select2-container .select2-selection {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.page-anonymous .form-check-input {
|
||||
background-color: rgba(255, 255, 255, 0.12);
|
||||
border-color: rgba(255, 255, 255, 0.25);
|
||||
|
|
@ -68,9 +136,9 @@ main.page-anonymous {
|
|||
.page-anonymous .btn.btn-primary {
|
||||
background: linear-gradient(135deg, $btn-background-color 0%, #4f8bff 100%);
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
border-radius: 999px;
|
||||
color: $btn-foreground-color;
|
||||
padding: 0.7rem;
|
||||
padding: 0.72rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
|
|
|
|||
|
|
@ -1,45 +1,127 @@
|
|||
@charset "UTF-8";
|
||||
/* Tema Carbon Neon — dark tech com glow ciano */
|
||||
/* Tema Carbon Neon — janela de terminal ancorada à esquerda,
|
||||
prompt nos labels e cursor piscando (estética dev/hacker) */
|
||||
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.1) 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-image: radial-gradient(55% 45% at 30% 0%, rgba(0, 229, 199, 0.13) 0%, transparent 70%), radial-gradient(40% 40% at 95% 90%, rgba(56, 189, 248, 0.1) 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.1), 0 26px 60px rgba(0, 0, 0, 0.6);
|
||||
/* janela ancorada à esquerda */
|
||||
.page-anonymous .flex-fill.d-flex.flex-column {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.page-anonymous .card-header {
|
||||
color: #e2e8f0;
|
||||
.page-anonymous .container-tight {
|
||||
margin-left: 7vw !important;
|
||||
margin-right: auto !important;
|
||||
width: 30rem;
|
||||
max-width: 92vw !important;
|
||||
}
|
||||
|
||||
.page-anonymous .container-tight .text-center {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.page-anonymous .main-content-card {
|
||||
font-family: "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", monospace;
|
||||
}
|
||||
|
||||
/* title bar do terminal (usa o .card-header vazio do card) */
|
||||
.page-anonymous .main-content-card > .card-header {
|
||||
display: block !important;
|
||||
height: 38px;
|
||||
background: #161d27;
|
||||
border: 1px solid rgba(0, 229, 199, 0.22);
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.15);
|
||||
border-radius: 12px 12px 0 0;
|
||||
position: relative;
|
||||
}
|
||||
.page-anonymous .main-content-card > .card-header::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 13px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #ff5f56;
|
||||
box-shadow: 22px 0 0 #ffbd2e, 44px 0 0 #27c93f;
|
||||
}
|
||||
.page-anonymous .main-content-card > .card-header::after {
|
||||
content: "user@glpi: ~/login";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 9px;
|
||||
text-align: center;
|
||||
color: #64748b;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.page-anonymous .main-content-card .card-body {
|
||||
background: rgba(13, 17, 23, 0.96);
|
||||
border: 1px solid rgba(0, 229, 199, 0.22);
|
||||
border-top: 0;
|
||||
border-radius: 0 0 12px 12px;
|
||||
padding: 2rem !important;
|
||||
box-shadow: 0 0 45px rgba(0, 229, 199, 0.1), 0 26px 60px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.page-anonymous .main-content-card .col-md-5 {
|
||||
width: 100% !important;
|
||||
max-width: none;
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
.page-anonymous .card-body .card-header {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding-left: 0;
|
||||
}
|
||||
.page-anonymous .card-body .card-header h2 {
|
||||
color: #e2e8f0;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.page-anonymous .card-body .card-header h2::after {
|
||||
content: "_";
|
||||
color: #00e5c7;
|
||||
animation: butterfly-blink 1.1s steps(1) infinite;
|
||||
}
|
||||
|
||||
@keyframes butterfly-blink {
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
/* labels como prompt */
|
||||
.page-anonymous .form-label {
|
||||
color: #7dd3c8;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.page-anonymous .form-label::before {
|
||||
content: "> ";
|
||||
color: #00e5c7;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.page-anonymous .form-control,
|
||||
.page-anonymous .form-select {
|
||||
background: rgba(2, 6, 12, 0.75);
|
||||
background: rgba(2, 6, 12, 0.8);
|
||||
border: 1px solid rgba(148, 163, 184, 0.22);
|
||||
border-radius: 10px;
|
||||
border-left: 3px solid rgba(0, 229, 199, 0.45);
|
||||
border-radius: 4px;
|
||||
color: #e2e8f0;
|
||||
padding: 0.65rem 0.85rem;
|
||||
font-family: inherit;
|
||||
padding: 0.6rem 0.85rem;
|
||||
}
|
||||
.page-anonymous .form-control::placeholder,
|
||||
.page-anonymous .form-select::placeholder {
|
||||
|
|
@ -47,40 +129,66 @@ main.page-anonymous {
|
|||
}
|
||||
.page-anonymous .form-control:focus,
|
||||
.page-anonymous .form-select:focus {
|
||||
background: rgba(2, 6, 12, 0.9);
|
||||
background: rgba(2, 6, 12, 0.95);
|
||||
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.2);
|
||||
border-left-color: #00e5c7;
|
||||
box-shadow: 0 0 18px rgba(0, 229, 199, 0.18);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.page-anonymous .select2-container .select2-selection {
|
||||
background: rgba(2, 6, 12, 0.8);
|
||||
border: 1px solid rgba(148, 163, 184, 0.22);
|
||||
border-left: 3px solid rgba(0, 229, 199, 0.45);
|
||||
border-radius: 4px;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.page-anonymous .form-check-input {
|
||||
background-color: rgba(2, 6, 12, 0.75);
|
||||
background-color: rgba(2, 6, 12, 0.8);
|
||||
border-color: rgba(148, 163, 184, 0.35);
|
||||
}
|
||||
|
||||
.page-anonymous .form-check-label {
|
||||
color: #94a3b8;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.page-anonymous .btn.btn-primary {
|
||||
background: #00e5c7;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
color: #031a17;
|
||||
padding: 0.7rem;
|
||||
background: transparent;
|
||||
border: 1px solid #00e5c7;
|
||||
border-radius: 4px;
|
||||
color: #00e5c7;
|
||||
padding: 0.65rem;
|
||||
font-family: inherit;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.03em;
|
||||
letter-spacing: 0.08em;
|
||||
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;
|
||||
font-size: 0.8rem;
|
||||
box-shadow: 0 0 18px rgba(0, 229, 199, 0.15);
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
.page-anonymous .btn.btn-primary::before {
|
||||
content: "$ ";
|
||||
}
|
||||
.page-anonymous .btn.btn-primary:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 0 34px rgba(0, 229, 199, 0.55);
|
||||
background: #00e5c7;
|
||||
color: #031a17;
|
||||
box-shadow: 0 0 34px rgba(0, 229, 199, 0.5);
|
||||
}
|
||||
|
||||
.page-anonymous .text-muted,
|
||||
.page-anonymous .copyright {
|
||||
color: #64748b !important;
|
||||
color: #475569 !important;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.page-anonymous a {
|
||||
color: #00e5c7 !important;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-anonymous .container-tight {
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 6.7 KiB |
|
|
@ -1,4 +1,5 @@
|
|||
/* Tema Carbon Neon — dark tech com glow ciano */
|
||||
/* Tema Carbon Neon — janela de terminal ancorada à esquerda,
|
||||
prompt nos labels e cursor piscando (estética dev/hacker) */
|
||||
|
||||
$btn-background-color: #00e5c7 !default;
|
||||
$btn-foreground-color: #031a17 !default;
|
||||
|
|
@ -9,89 +10,198 @@ 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%),
|
||||
radial-gradient(55% 45% at 30% 0%, rgba(0, 229, 199, 0.13) 0%, transparent 70%),
|
||||
radial-gradient(40% 40% at 95% 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);
|
||||
/* janela ancorada à esquerda */
|
||||
.page-anonymous .flex-fill.d-flex.flex-column {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.page-anonymous .card-header {
|
||||
color: #e2e8f0;
|
||||
.page-anonymous .container-tight {
|
||||
margin-left: 7vw !important;
|
||||
margin-right: auto !important;
|
||||
width: 30rem;
|
||||
max-width: 92vw !important;
|
||||
}
|
||||
|
||||
.page-anonymous .container-tight .text-center {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.page-anonymous .main-content-card {
|
||||
font-family: "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", monospace;
|
||||
}
|
||||
|
||||
/* title bar do terminal (usa o .card-header vazio do card) */
|
||||
.page-anonymous .main-content-card > .card-header {
|
||||
display: block !important;
|
||||
height: 38px;
|
||||
background: #161d27;
|
||||
border: 1px solid rgba(0, 229, 199, 0.22);
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.15);
|
||||
border-radius: 12px 12px 0 0;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 13px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #ff5f56;
|
||||
box-shadow: 22px 0 0 #ffbd2e, 44px 0 0 #27c93f;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "user@glpi: ~/login";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 9px;
|
||||
text-align: center;
|
||||
color: #64748b;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.page-anonymous .main-content-card .card-body {
|
||||
background: rgba(13, 17, 23, 0.96);
|
||||
border: 1px solid rgba(0, 229, 199, 0.22);
|
||||
border-top: 0;
|
||||
border-radius: 0 0 12px 12px;
|
||||
padding: 2rem !important;
|
||||
box-shadow: 0 0 45px rgba(0, 229, 199, 0.10), 0 26px 60px rgba(0, 0, 0, 0.60);
|
||||
}
|
||||
|
||||
.page-anonymous .main-content-card .col-md-5 {
|
||||
width: 100% !important;
|
||||
max-width: none;
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
.page-anonymous .card-body .card-header {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font-weight: 600;
|
||||
padding-left: 0;
|
||||
|
||||
h2 {
|
||||
color: #e2e8f0;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
margin: 0 !important;
|
||||
|
||||
&::after {
|
||||
content: "_";
|
||||
color: #00e5c7;
|
||||
animation: butterfly-blink 1.1s steps(1) infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes butterfly-blink {
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
|
||||
/* labels como prompt */
|
||||
.page-anonymous .form-label {
|
||||
color: #7dd3c8;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
letter-spacing: 0.04em;
|
||||
|
||||
&::before {
|
||||
content: "> ";
|
||||
color: #00e5c7;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.page-anonymous .form-control,
|
||||
.page-anonymous .form-select {
|
||||
background: rgba(2, 6, 12, 0.75);
|
||||
background: rgba(2, 6, 12, 0.8);
|
||||
border: 1px solid rgba(148, 163, 184, 0.22);
|
||||
border-radius: 10px;
|
||||
border-left: 3px solid rgba(0, 229, 199, 0.45);
|
||||
border-radius: 4px;
|
||||
color: #e2e8f0;
|
||||
padding: 0.65rem 0.85rem;
|
||||
font-family: inherit;
|
||||
padding: 0.6rem 0.85rem;
|
||||
|
||||
&::placeholder {
|
||||
color: rgba(148, 163, 184, 0.45);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: rgba(2, 6, 12, 0.9);
|
||||
background: rgba(2, 6, 12, 0.95);
|
||||
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);
|
||||
border-left-color: #00e5c7;
|
||||
box-shadow: 0 0 18px rgba(0, 229, 199, 0.18);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.page-anonymous .select2-container .select2-selection {
|
||||
background: rgba(2, 6, 12, 0.8);
|
||||
border: 1px solid rgba(148, 163, 184, 0.22);
|
||||
border-left: 3px solid rgba(0, 229, 199, 0.45);
|
||||
border-radius: 4px;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.page-anonymous .form-check-input {
|
||||
background-color: rgba(2, 6, 12, 0.75);
|
||||
background-color: rgba(2, 6, 12, 0.8);
|
||||
border-color: rgba(148, 163, 184, 0.35);
|
||||
}
|
||||
|
||||
.page-anonymous .form-check-label {
|
||||
color: #94a3b8;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.page-anonymous .btn.btn-primary {
|
||||
background: $btn-background-color;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
color: $btn-foreground-color;
|
||||
padding: 0.7rem;
|
||||
background: transparent;
|
||||
border: 1px solid $btn-background-color;
|
||||
border-radius: 4px;
|
||||
color: $btn-background-color;
|
||||
padding: 0.65rem;
|
||||
font-family: inherit;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.03em;
|
||||
letter-spacing: 0.08em;
|
||||
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;
|
||||
font-size: 0.8rem;
|
||||
box-shadow: 0 0 18px rgba(0, 229, 199, 0.15);
|
||||
transition: all 0.15s ease;
|
||||
|
||||
&::before {
|
||||
content: "$ ";
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 0 34px rgba(0, 229, 199, 0.55);
|
||||
background: $btn-background-color;
|
||||
color: $btn-foreground-color;
|
||||
box-shadow: 0 0 34px rgba(0, 229, 199, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.page-anonymous .text-muted,
|
||||
.page-anonymous .copyright {
|
||||
color: #64748b !important;
|
||||
color: #475569 !important;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.page-anonymous a {
|
||||
color: #00e5c7 !important;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-anonymous .container-tight {
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,36 +1,97 @@
|
|||
@charset "UTF-8";
|
||||
/* Tema Nordic Minimal — claro, limpo, escandinavo */
|
||||
/* Tema Nordic Minimal — split-screen: painel branco full-height à direita,
|
||||
fundo decorativo à esquerda (padrão Stripe/Notion) */
|
||||
body.welcome-anonymous,
|
||||
body.login-page,
|
||||
main.page-anonymous {
|
||||
min-height: 100vh;
|
||||
background-color: #f4f6f8;
|
||||
background-image: linear-gradient(rgba(30, 58, 95, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(30, 58, 95, 0.045) 1px, transparent 1px), radial-gradient(60% 50% at 100% 0%, rgba(30, 58, 95, 0.07) 0%, transparent 70%);
|
||||
background-size: 32px 32px, 32px 32px, 100% 100%;
|
||||
background-color: #eef2f6;
|
||||
background-image: linear-gradient(rgba(30, 58, 95, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(30, 58, 95, 0.05) 1px, transparent 1px), radial-gradient(45% 60% at 25% 35%, rgba(30, 58, 95, 0.16) 0%, transparent 70%), radial-gradient(35% 45% at 10% 80%, rgba(96, 165, 250, 0.18) 0%, transparent 70%);
|
||||
background-size: 36px 36px, 36px 36px, 100% 100%, 100% 100%;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.page-anonymous .main-content-card .card-body {
|
||||
/* anéis decorativos no lado esquerdo livre */
|
||||
main.page-anonymous {
|
||||
position: relative;
|
||||
}
|
||||
main.page-anonymous::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
left: 8vw;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 340px;
|
||||
height: 340px;
|
||||
border: 2px solid rgba(30, 58, 95, 0.14);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
}
|
||||
main.page-anonymous::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
left: calc(8vw + 60px);
|
||||
top: calc(50% - 110px);
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
border: 2px dashed rgba(30, 58, 95, 0.2);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* painel branco ancorado à direita, altura total */
|
||||
.page-anonymous .flex-fill.d-flex.flex-column {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
min-height: 100vh;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.page-anonymous .container-tight {
|
||||
margin: 0 !important;
|
||||
width: 30rem;
|
||||
max-width: 100vw !important;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e8ecf1;
|
||||
border-radius: 16px;
|
||||
padding: 2.4rem !important;
|
||||
box-shadow: 0 20px 50px rgba(30, 58, 95, 0.1), 0 2px 8px rgba(30, 58, 95, 0.05);
|
||||
padding: 2rem 3.2rem !important;
|
||||
box-shadow: -32px 0 70px rgba(30, 58, 95, 0.16);
|
||||
}
|
||||
|
||||
.page-anonymous .container-tight .text-center {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.page-anonymous .main-content-card .card-body {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.page-anonymous .main-content-card .col-md-5 {
|
||||
width: 100% !important;
|
||||
max-width: none;
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
.page-anonymous .card-header {
|
||||
color: #1e293b;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font-weight: 600;
|
||||
padding-left: 0;
|
||||
}
|
||||
.page-anonymous .card-header h2 {
|
||||
color: #1e293b;
|
||||
font-weight: 700;
|
||||
margin: 0 !important;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.page-anonymous .form-label {
|
||||
color: #475569;
|
||||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.76rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.page-anonymous .form-control,
|
||||
|
|
@ -39,7 +100,7 @@ main.page-anonymous {
|
|||
border: 1px solid #dfe5ec;
|
||||
border-radius: 10px;
|
||||
color: #1e293b;
|
||||
padding: 0.65rem 0.85rem;
|
||||
padding: 0.7rem 0.9rem;
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
.page-anonymous .form-control:focus,
|
||||
|
|
@ -49,12 +110,18 @@ main.page-anonymous {
|
|||
box-shadow: 0 0 0 0.25rem rgba(30, 58, 95, 0.12);
|
||||
}
|
||||
|
||||
.page-anonymous .select2-container .select2-selection {
|
||||
background: #fafbfc;
|
||||
border: 1px solid #dfe5ec;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.page-anonymous .btn.btn-primary {
|
||||
background: #1e3a5f;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
color: #ffffff;
|
||||
padding: 0.7rem;
|
||||
padding: 0.75rem;
|
||||
font-weight: 600;
|
||||
transition: filter 0.15s ease, transform 0.15s ease;
|
||||
}
|
||||
|
|
@ -71,3 +138,14 @@ main.page-anonymous {
|
|||
.page-anonymous a {
|
||||
color: #1e3a5f !important;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.page-anonymous .container-tight {
|
||||
width: 100vw;
|
||||
box-shadow: none;
|
||||
}
|
||||
main.page-anonymous::before,
|
||||
main.page-anonymous::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 8.1 KiB |
|
|
@ -1,4 +1,5 @@
|
|||
/* Tema Nordic Minimal — claro, limpo, escandinavo */
|
||||
/* Tema Nordic Minimal — split-screen: painel branco full-height à direita,
|
||||
fundo decorativo à esquerda (padrão Stripe/Notion) */
|
||||
|
||||
$btn-background-color: #1e3a5f !default;
|
||||
$btn-foreground-color: #ffffff !default;
|
||||
|
|
@ -7,36 +8,100 @@ body.welcome-anonymous,
|
|||
body.login-page,
|
||||
main.page-anonymous {
|
||||
min-height: 100vh;
|
||||
background-color: #f4f6f8;
|
||||
background-color: #eef2f6;
|
||||
background-image:
|
||||
linear-gradient(rgba(30, 58, 95, 0.045) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(30, 58, 95, 0.045) 1px, transparent 1px),
|
||||
radial-gradient(60% 50% at 100% 0%, rgba(30, 58, 95, 0.07) 0%, transparent 70%);
|
||||
background-size: 32px 32px, 32px 32px, 100% 100%;
|
||||
linear-gradient(rgba(30, 58, 95, 0.05) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(30, 58, 95, 0.05) 1px, transparent 1px),
|
||||
radial-gradient(45% 60% at 25% 35%, rgba(30, 58, 95, 0.16) 0%, transparent 70%),
|
||||
radial-gradient(35% 45% at 10% 80%, rgba(96, 165, 250, 0.18) 0%, transparent 70%);
|
||||
background-size: 36px 36px, 36px 36px, 100% 100%, 100% 100%;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.page-anonymous .main-content-card .card-body {
|
||||
/* anéis decorativos no lado esquerdo livre */
|
||||
main.page-anonymous {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
left: 8vw;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 340px;
|
||||
height: 340px;
|
||||
border: 2px solid rgba(30, 58, 95, 0.14);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
left: calc(8vw + 60px);
|
||||
top: calc(50% - 110px);
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
border: 2px dashed rgba(30, 58, 95, 0.20);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* painel branco ancorado à direita, altura total */
|
||||
.page-anonymous .flex-fill.d-flex.flex-column {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
min-height: 100vh;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.page-anonymous .container-tight {
|
||||
margin: 0 !important;
|
||||
width: 30rem;
|
||||
max-width: 100vw !important;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e8ecf1;
|
||||
border-radius: 16px;
|
||||
padding: 2.4rem !important;
|
||||
box-shadow: 0 20px 50px rgba(30, 58, 95, 0.10), 0 2px 8px rgba(30, 58, 95, 0.05);
|
||||
padding: 2rem 3.2rem !important;
|
||||
box-shadow: -32px 0 70px rgba(30, 58, 95, 0.16);
|
||||
}
|
||||
|
||||
.page-anonymous .container-tight .text-center {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.page-anonymous .main-content-card .card-body {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.page-anonymous .main-content-card .col-md-5 {
|
||||
width: 100% !important;
|
||||
max-width: none;
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
.page-anonymous .card-header {
|
||||
color: #1e293b;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font-weight: 600;
|
||||
padding-left: 0;
|
||||
|
||||
h2 {
|
||||
color: #1e293b;
|
||||
font-weight: 700;
|
||||
margin: 0 !important;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.page-anonymous .form-label {
|
||||
color: #475569;
|
||||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.76rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.page-anonymous .form-control,
|
||||
|
|
@ -45,7 +110,7 @@ main.page-anonymous {
|
|||
border: 1px solid #dfe5ec;
|
||||
border-radius: 10px;
|
||||
color: #1e293b;
|
||||
padding: 0.65rem 0.85rem;
|
||||
padding: 0.7rem 0.9rem;
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
|
||||
&:focus {
|
||||
|
|
@ -55,12 +120,18 @@ main.page-anonymous {
|
|||
}
|
||||
}
|
||||
|
||||
.page-anonymous .select2-container .select2-selection {
|
||||
background: #fafbfc;
|
||||
border: 1px solid #dfe5ec;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.page-anonymous .btn.btn-primary {
|
||||
background: $btn-background-color;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
color: $btn-foreground-color;
|
||||
padding: 0.7rem;
|
||||
padding: 0.75rem;
|
||||
font-weight: 600;
|
||||
transition: filter 0.15s ease, transform 0.15s ease;
|
||||
|
||||
|
|
@ -78,3 +149,15 @@ main.page-anonymous {
|
|||
.page-anonymous a {
|
||||
color: #1e3a5f !important;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.page-anonymous .container-tight {
|
||||
width: 100vw;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
main.page-anonymous::before,
|
||||
main.page-anonymous::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@charset "UTF-8";
|
||||
/* Tema Sunset Mesh — mesh gradient quente */
|
||||
/* Tema Sunset Mesh — borderless: sem card, form flutua direto no mesh,
|
||||
inputs underline (padrão Linear/Vercel) */
|
||||
body.welcome-anonymous,
|
||||
body.login-page,
|
||||
main.page-anonymous {
|
||||
|
|
@ -9,57 +10,96 @@ main.page-anonymous {
|
|||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
/* coluna estreita, sem card nenhum */
|
||||
.page-anonymous .container-tight {
|
||||
max-width: 24rem !important;
|
||||
}
|
||||
|
||||
.page-anonymous .main-content-card .card-body {
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
backdrop-filter: blur(14px);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.85);
|
||||
border-radius: 22px;
|
||||
padding: 2.3rem !important;
|
||||
box-shadow: 0 22px 55px rgba(148, 63, 106, 0.22);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.page-anonymous .main-content-card .col-md-5 {
|
||||
width: 100% !important;
|
||||
max-width: none;
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
.page-anonymous .card-header {
|
||||
color: #3b1d54;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font-weight: 700;
|
||||
}
|
||||
.page-anonymous .card-header h2 {
|
||||
color: #2d1b45;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.page-anonymous .form-label {
|
||||
color: #6b4a7e;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
/* inputs underline: sem caixa */
|
||||
.page-anonymous .form-control,
|
||||
.page-anonymous .form-select {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border: 1px solid rgba(196, 113, 245, 0.3);
|
||||
border-radius: 12px;
|
||||
color: #3b1d54;
|
||||
padding: 0.65rem 0.85rem;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-bottom: 2px solid rgba(59, 29, 84, 0.3);
|
||||
border-radius: 0;
|
||||
color: #2d1b45;
|
||||
padding: 0.55rem 0.15rem;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
.page-anonymous .form-control::placeholder,
|
||||
.page-anonymous .form-select::placeholder {
|
||||
color: rgba(59, 29, 84, 0.35);
|
||||
}
|
||||
.page-anonymous .form-control:focus,
|
||||
.page-anonymous .form-select:focus {
|
||||
background: #ffffff;
|
||||
border-color: #c471f5;
|
||||
box-shadow: 0 0 0 0.25rem rgba(196, 113, 245, 0.2);
|
||||
background: transparent;
|
||||
border-bottom-color: #7828c8;
|
||||
box-shadow: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.page-anonymous .select2-container .select2-selection {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-bottom: 2px solid rgba(59, 29, 84, 0.3);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.page-anonymous .form-check-input {
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
border-color: rgba(59, 29, 84, 0.35);
|
||||
}
|
||||
|
||||
.page-anonymous .form-check-label {
|
||||
color: #6b4a7e;
|
||||
}
|
||||
|
||||
/* botão pill largo */
|
||||
.page-anonymous .btn.btn-primary {
|
||||
background: #1f1235;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
border-radius: 999px;
|
||||
color: #ffffff;
|
||||
padding: 0.7rem;
|
||||
font-weight: 600;
|
||||
padding: 0.8rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
box-shadow: 0 12px 26px rgba(31, 18, 53, 0.35);
|
||||
margin-top: 0.5rem;
|
||||
box-shadow: 0 14px 30px rgba(31, 18, 53, 0.35);
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
.page-anonymous .btn.btn-primary:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 16px 32px rgba(31, 18, 53, 0.45);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 20px 40px rgba(31, 18, 53, 0.45);
|
||||
}
|
||||
|
||||
.page-anonymous .text-muted,
|
||||
|
|
@ -69,4 +109,5 @@ main.page-anonymous {
|
|||
|
||||
.page-anonymous a {
|
||||
color: #7828c8 !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 7 KiB After Width: | Height: | Size: 6.8 KiB |
|
|
@ -1,4 +1,5 @@
|
|||
/* Tema Sunset Mesh — mesh gradient quente */
|
||||
/* Tema Sunset Mesh — borderless: sem card, form flutua direto no mesh,
|
||||
inputs underline (padrão Linear/Vercel) */
|
||||
|
||||
$btn-background-color: #1f1235 !default;
|
||||
$btn-foreground-color: #ffffff !default;
|
||||
|
|
@ -16,57 +17,97 @@ main.page-anonymous {
|
|||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
/* coluna estreita, sem card nenhum */
|
||||
.page-anonymous .container-tight {
|
||||
max-width: 24rem !important;
|
||||
}
|
||||
|
||||
.page-anonymous .main-content-card .card-body {
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
backdrop-filter: blur(14px);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.85);
|
||||
border-radius: 22px;
|
||||
padding: 2.3rem !important;
|
||||
box-shadow: 0 22px 55px rgba(148, 63, 106, 0.22);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.page-anonymous .main-content-card .col-md-5 {
|
||||
width: 100% !important;
|
||||
max-width: none;
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
.page-anonymous .card-header {
|
||||
color: #3b1d54;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font-weight: 700;
|
||||
|
||||
h2 {
|
||||
color: #2d1b45;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
}
|
||||
|
||||
.page-anonymous .form-label {
|
||||
color: #6b4a7e;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
/* inputs underline: sem caixa */
|
||||
.page-anonymous .form-control,
|
||||
.page-anonymous .form-select {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border: 1px solid rgba(196, 113, 245, 0.30);
|
||||
border-radius: 12px;
|
||||
color: #3b1d54;
|
||||
padding: 0.65rem 0.85rem;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-bottom: 2px solid rgba(59, 29, 84, 0.30);
|
||||
border-radius: 0;
|
||||
color: #2d1b45;
|
||||
padding: 0.55rem 0.15rem;
|
||||
transition: border-color 0.2s ease;
|
||||
|
||||
&::placeholder {
|
||||
color: rgba(59, 29, 84, 0.35);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: #ffffff;
|
||||
border-color: #c471f5;
|
||||
box-shadow: 0 0 0 0.25rem rgba(196, 113, 245, 0.20);
|
||||
background: transparent;
|
||||
border-bottom-color: #7828c8;
|
||||
box-shadow: none;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.page-anonymous .select2-container .select2-selection {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-bottom: 2px solid rgba(59, 29, 84, 0.30);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.page-anonymous .form-check-input {
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
border-color: rgba(59, 29, 84, 0.35);
|
||||
}
|
||||
|
||||
.page-anonymous .form-check-label {
|
||||
color: #6b4a7e;
|
||||
}
|
||||
|
||||
/* botão pill largo */
|
||||
.page-anonymous .btn.btn-primary {
|
||||
background: $btn-background-color;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
border-radius: 999px;
|
||||
color: $btn-foreground-color;
|
||||
padding: 0.7rem;
|
||||
font-weight: 600;
|
||||
padding: 0.8rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
box-shadow: 0 12px 26px rgba(31, 18, 53, 0.35);
|
||||
margin-top: 0.5rem;
|
||||
box-shadow: 0 14px 30px rgba(31, 18, 53, 0.35);
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 16px 32px rgba(31, 18, 53, 0.45);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 20px 40px rgba(31, 18, 53, 0.45);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -77,4 +118,5 @@ main.page-anonymous {
|
|||
|
||||
.page-anonymous a {
|
||||
color: #7828c8 !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue