diff --git a/themes/aurora-glass/login.css b/themes/aurora-glass/login.css index 43dc6b5..5227fef 100644 --- a/themes/aurora-glass/login.css +++ b/themes/aurora-glass/login.css @@ -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; diff --git a/themes/aurora-glass/login.preview.jpg b/themes/aurora-glass/login.preview.jpg index c224515..01e3ef3 100644 Binary files a/themes/aurora-glass/login.preview.jpg and b/themes/aurora-glass/login.preview.jpg differ diff --git a/themes/aurora-glass/login.scss b/themes/aurora-glass/login.scss index 2f778b8..50ea157 100644 --- a/themes/aurora-glass/login.scss +++ b/themes/aurora-glass/login.scss @@ -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; diff --git a/themes/carbon-neon/login.css b/themes/carbon-neon/login.css index 8e3e331..403c14c 100644 --- a/themes/carbon-neon/login.css +++ b/themes/carbon-neon/login.css @@ -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; + } } \ No newline at end of file diff --git a/themes/carbon-neon/login.preview.jpg b/themes/carbon-neon/login.preview.jpg index b4b7f07..44edba6 100644 Binary files a/themes/carbon-neon/login.preview.jpg and b/themes/carbon-neon/login.preview.jpg differ diff --git a/themes/carbon-neon/login.scss b/themes/carbon-neon/login.scss index abbbd15..92d513d 100644 --- a/themes/carbon-neon/login.scss +++ b/themes/carbon-neon/login.scss @@ -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; + } +} diff --git a/themes/nordic-minimal/login.css b/themes/nordic-minimal/login.css index d0a9f96..b7f9d7a 100644 --- a/themes/nordic-minimal/login.css +++ b/themes/nordic-minimal/login.css @@ -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; } @@ -70,4 +137,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; + } } \ No newline at end of file diff --git a/themes/nordic-minimal/login.preview.jpg b/themes/nordic-minimal/login.preview.jpg index f770efc..daffa91 100644 Binary files a/themes/nordic-minimal/login.preview.jpg and b/themes/nordic-minimal/login.preview.jpg differ diff --git a/themes/nordic-minimal/login.scss b/themes/nordic-minimal/login.scss index 0fa5512..82e58e5 100644 --- a/themes/nordic-minimal/login.scss +++ b/themes/nordic-minimal/login.scss @@ -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; + } +} diff --git a/themes/sunset-mesh/login.css b/themes/sunset-mesh/login.css index 3d7a019..5033147 100644 --- a/themes/sunset-mesh/login.css +++ b/themes/sunset-mesh/login.css @@ -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; } \ No newline at end of file diff --git a/themes/sunset-mesh/login.preview.jpg b/themes/sunset-mesh/login.preview.jpg index 6ab9617..55c5b62 100644 Binary files a/themes/sunset-mesh/login.preview.jpg and b/themes/sunset-mesh/login.preview.jpg differ diff --git a/themes/sunset-mesh/login.scss b/themes/sunset-mesh/login.scss index 56b76da..52c09b5 100644 --- a/themes/sunset-mesh/login.scss +++ b/themes/sunset-mesh/login.scss @@ -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; }