d36e14c767
Cada tema agora expõe variáveis próprias no theme.json (color pickers na config, injetadas no compile SCSS com !default): - aurora-glass: page-background + aurora-color-1/2/3 (gradientes e blobs) - nordic-minimal: page-background, panel-background e decor-color (grid, anéis e sombra do painel) - sunset-mesh: page-background, accent-color (links/foco) e mesh-color-1..4 (os 4 lóbulos do mesh) - carbon-neon: page-background, glow-color (bordas/glow/prompt/cursor) e terminal-background-color Tons translúcidos derivados de variável usam color-mix() do CSS (scssphp não avalia rgba($var) de cor injetada; color-mix passa direto e o browser resolve). Validado: injeção de variável altera o CSS compilado e os 4 temas servem color-mix na página de login. Temas legados removidos (aurora-boreal, baloons, cloud, desktop, light, neon, night, original, power-red, prompt-developer) — catálogo agora são só os 4 modernos. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
128 lines
3.2 KiB
SCSS
128 lines
3.2 KiB
SCSS
/* 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;
|
|
$page-background-color: #fff1eb !default;
|
|
$accent-color: #7828c8 !default;
|
|
$mesh-color-1: #ff7a59 !default;
|
|
$mesh-color-2: #ffbe5c !default;
|
|
$mesh-color-3: #c471f5 !default;
|
|
$mesh-color-4: #fa7185 !default;
|
|
|
|
body.welcome-anonymous,
|
|
body.login-page,
|
|
main.page-anonymous {
|
|
min-height: 100vh;
|
|
background-color: $page-background-color;
|
|
background-image:
|
|
radial-gradient(45% 55% at 10% 15%, color-mix(in srgb, #{$mesh-color-1} 55%, transparent) 0%, transparent 70%),
|
|
radial-gradient(50% 60% at 90% 10%, color-mix(in srgb, #{$mesh-color-2} 50%, transparent) 0%, transparent 70%),
|
|
radial-gradient(55% 65% at 85% 85%, color-mix(in srgb, #{$mesh-color-3} 40%, transparent) 0%, transparent 70%),
|
|
radial-gradient(45% 55% at 15% 90%, color-mix(in srgb, #{$mesh-color-4} 45%, transparent) 0%, transparent 70%);
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
/* coluna estreita, sem card nenhum */
|
|
.page-anonymous .container-tight {
|
|
max-width: 24rem !important;
|
|
}
|
|
|
|
.page-anonymous .main-content-card .card-body {
|
|
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 {
|
|
border: 0;
|
|
background: transparent;
|
|
|
|
h2 {
|
|
color: #2d1b45;
|
|
font-size: 1.6rem;
|
|
font-weight: 800;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
}
|
|
|
|
.page-anonymous .form-label {
|
|
color: #6b4a7e;
|
|
font-weight: 600;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
/* inputs underline: sem caixa */
|
|
.page-anonymous .form-control,
|
|
.page-anonymous .form-select {
|
|
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: transparent;
|
|
border-bottom-color: $accent-color;
|
|
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: 999px;
|
|
color: $btn-foreground-color;
|
|
padding: 0.8rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.02em;
|
|
margin-top: 0.5rem;
|
|
box-shadow: 0 14px 30px color-mix(in srgb, #{$btn-background-color} 35%, transparent);
|
|
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
|
|
|
&:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 20px 40px color-mix(in srgb, #{$btn-background-color} 45%, transparent);
|
|
}
|
|
}
|
|
|
|
.page-anonymous .text-muted,
|
|
.page-anonymous .copyright {
|
|
color: #8a6aa0 !important;
|
|
}
|
|
|
|
.page-anonymous a {
|
|
color: $accent-color !important;
|
|
font-weight: 600;
|
|
}
|