diff --git a/themes/aurora-boreal/login.background.jpg b/themes/aurora-boreal/login.background.jpg deleted file mode 100644 index 6aea8c1..0000000 Binary files a/themes/aurora-boreal/login.background.jpg and /dev/null differ diff --git a/themes/aurora-boreal/login.css b/themes/aurora-boreal/login.css deleted file mode 100644 index 636f8ae..0000000 --- a/themes/aurora-boreal/login.css +++ /dev/null @@ -1,108 +0,0 @@ -@charset "UTF-8"; -/*Tema - Aurora Boreal*/ -body .card { - border: 0; - background: transparent; -} -.flex-fill.d-flex.flex-column.justify-content-center.py-4.mt-4 { - width: 525px; - background: transparent; - margin: 0px auto !important; -} -.col-md-5 { - margin: 0 !important; - width: 100%; -} -h2.card-header.text-center.mb-4, div.card-header:has(.mx-auto) { - display: none; -} -.flex-fill.d-flex.flex-column.justify-content-center.py-4.mt-4 { - min-height: 711px; - width: 525px; - background: transparent; - border-radius: 0; - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - -webkit-backdrop-filter: blur(5px); - border: 1px solid rgba(255, 255, 255, 0.3); - margin: 0px auto !important; - height: 100% !important; -} -span.glpi-logo.mb-4 { - margin: 0 !important; -} -.btn-primary, .btn-outline-primary, .btn-ghost-primary { - --tblr-btn-color: #71090e; - --tblr-btn-color-interactive: #8d0a10; - --tblr-btn-color-text: #1e293b; -} -body .form-control:focus { - color: inherit; - background-color: #fdfdfd; - border-color: #1b5ca3c2; - outline: 0; - box-shadow: 0 0 0 0.25rem #1b5ca3c2; -} -.mb-3, .mb-4 { - position: relative; -} -.mb-3:after { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: ""; - position: absolute; - right: 20px; - color: #6a696982; - top: 12px; -} -.mb-4:before { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: ""; - position: absolute; - right: 20px; - color: #6a696982; - top: 12px; -} -.col-md-5 { - margin: 0 !important; - width: 100%; - max-width: 289px; -} -body .form-control { - display: block; - width: 100%; - padding: 0.7375rem 0.75rem; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.4285714286; - color: inherit; - background-color: #fdfdfd; - background-clip: padding-box; - border: 1px solid #d9dbde; - appearance: none; - border-radius: 34px; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -} -button.btn.btn-primary.w-100 { - background: transparent; - color: #ffffff; - padding: 11px; - border-radius: 30px; - border: 1px solid #fff; -} -label.form-label { - color: #fff; -} -a { - color: #73fff9 !important; - text-decoration: none; -} -label.form-label { - display: none; - color: #fff; -} -.card-body { - margin: 0 auto; - width: 350px; - max-width: 100%; -} diff --git a/themes/aurora-boreal/login.logo.png b/themes/aurora-boreal/login.logo.png deleted file mode 100644 index 31324fb..0000000 Binary files a/themes/aurora-boreal/login.logo.png and /dev/null differ diff --git a/themes/aurora-boreal/login.preview.jpg b/themes/aurora-boreal/login.preview.jpg deleted file mode 100644 index b6311b1..0000000 Binary files a/themes/aurora-boreal/login.preview.jpg and /dev/null differ diff --git a/themes/aurora-boreal/login.scss b/themes/aurora-boreal/login.scss deleted file mode 100644 index fcabbf8..0000000 --- a/themes/aurora-boreal/login.scss +++ /dev/null @@ -1,129 +0,0 @@ -/*Tema - Aurora Boreal*/ - -$btn-foreground-color: #ffffff !default; - -body .card { - border: 0; - background: transparent; -} - -.flex-fill.d-flex.flex-column.justify-content-center.py-4.mt-4 { - width: 525px; - background: transparent; - margin: 0px auto !important; -} - -.col-md-5 { - margin: 0 !important; - width: 100%; -} - -h2.card-header.text-center.mb-4, -div.card-header:has(.mx-auto) { - display: none; -} - -.flex-fill.d-flex.flex-column.justify-content-center.py-4.mt-4 { - min-height: 711px; - width: 525px; - background: transparent; - border-radius: 0; - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - -webkit-backdrop-filter: blur(5px); - border: 1px solid rgba(255, 255, 255, 0.3); - margin: 0px auto !important; - height: 100% !important; -} - -span.glpi-logo.mb-4 { - margin: 0 !important; -} - -.btn-primary, -.btn-outline-primary, -.btn-ghost-primary { - --tblr-btn-color: #71090e; - --tblr-btn-color-interactive: #8d0a10; - --tblr-btn-color-text: #1e293b; -} - -body .form-control:focus { - color: inherit; - background-color: #fdfdfd; - border-color: #1b5ca3c2; - outline: 0; - box-shadow: 0 0 0 0.25rem #1b5ca3c2; -} - -.mb-3, -.mb-4 { - position: relative; -} - -.mb-3:after { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: "\f007"; - position: absolute; - right: 20px; - color: #6a696982; - top: 12px; -} - -.mb-4:before { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: "\f023"; - position: absolute; - right: 20px; - color: #6a696982; - top: 12px; -} - -.col-md-5 { - margin: 0 !important; - width: 100%; - max-width: 289px; -} - -body .form-control { - display: block; - width: 100%; - padding: 0.7375rem 0.75rem; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.4285714286; - color: inherit; - background-color: #fdfdfd; - background-clip: padding-box; - border: 1px solid #d9dbde; - appearance: none; - border-radius: 34px; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -} - -button.btn.btn-primary.w-100 { - background: transparent; - color: $btn-foreground-color; - padding: 11px; - border-radius: 30px; - border: 1px solid #fff; -} - -label.form-label { - color: #fff; -} - -a { - color: #73fff9 !important; - text-decoration: none; -} -label.form-label { - display: none; - color: #fff; -} -.card-body { - margin: 0 auto; - width: 350px; - max-width: 100%; -} diff --git a/themes/aurora-boreal/theme.json b/themes/aurora-boreal/theme.json deleted file mode 100644 index 87b0739..0000000 --- a/themes/aurora-boreal/theme.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "name": "Aurora Boreal", - "description": "Aurora Boreal Theme", - "variables": { - "btn-foreground-color": { - "name": "Cor do texto dos Botões", - "default": "#ffffff" - }, - "card-background-color": { - "name": "Cor do cartão", - "default": "" - } - } -} diff --git a/themes/aurora-glass/login.css b/themes/aurora-glass/login.css index 5227fef..3f919f3 100644 --- a/themes/aurora-glass/login.css +++ b/themes/aurora-glass/login.css @@ -6,7 +6,7 @@ body.login-page, main.page-anonymous { min-height: 100vh; background-color: #0b0e1a; - background-image: radial-gradient(40% 55% at 15% 20%, rgba(124, 108, 255, 0.45) 0%, transparent 70%), radial-gradient(45% 60% at 85% 15%, rgba(45, 212, 191, 0.35) 0%, transparent 70%), radial-gradient(50% 65% at 70% 90%, rgba(168, 85, 247, 0.35) 0%, transparent 70%), radial-gradient(35% 45% at 30% 80%, rgba(59, 130, 246, 0.3) 0%, transparent 70%); + background-image: radial-gradient(40% 55% at 15% 20%, color-mix(in srgb, #7c6cff 45%, transparent) 0%, transparent 70%), radial-gradient(45% 60% at 85% 15%, color-mix(in srgb, #2dd4bf 35%, transparent) 0%, transparent 70%), radial-gradient(50% 65% at 70% 90%, color-mix(in srgb, #a855f7 35%, transparent) 0%, transparent 70%), radial-gradient(35% 45% at 30% 80%, color-mix(in srgb, #7c6cff 25%, transparent) 0%, transparent 70%); background-attachment: fixed; } @@ -27,13 +27,13 @@ main.page-anonymous::before, main.page-anonymous::after { z-index: 0; } main.page-anonymous::before { - background: radial-gradient(circle, rgba(124, 108, 255, 0.55), transparent 65%); + background: radial-gradient(circle, color-mix(in srgb, #7c6cff 55%, transparent), 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%); + background: radial-gradient(circle, color-mix(in srgb, #2dd4bf 45%, transparent), transparent 65%); bottom: -140px; right: -60px; animation: butterfly-float-b 17s ease-in-out infinite alternate; @@ -111,8 +111,8 @@ main.page-anonymous::after { .page-anonymous .form-control:focus, .page-anonymous .form-select:focus { background: rgba(255, 255, 255, 0.12); - border-color: rgba(124, 108, 255, 0.65); - box-shadow: 0 0 0 0.25rem rgba(124, 108, 255, 0.22); + border-color: color-mix(in srgb, #7c6cff 65%, transparent); + box-shadow: 0 0 0 0.25rem color-mix(in srgb, #7c6cff 22%, transparent); color: #ffffff; } @@ -128,7 +128,7 @@ main.page-anonymous::after { } .page-anonymous .btn.btn-primary { - background: linear-gradient(135deg, #7c6cff 0%, #4f8bff 100%); + background: linear-gradient(135deg, #7c6cff, color-mix(in srgb, #7c6cff 45%, #4f8bff)); border: 0; border-radius: 999px; color: #ffffff; @@ -136,11 +136,11 @@ main.page-anonymous::after { font-weight: 600; letter-spacing: 0.02em; transition: transform 0.15s ease, box-shadow 0.15s ease; - box-shadow: 0 10px 24px rgba(124, 108, 255, 0.35); + box-shadow: 0 10px 24px color-mix(in srgb, #7c6cff 35%, transparent); } .page-anonymous .btn.btn-primary:hover { transform: translateY(-1px); - box-shadow: 0 14px 30px rgba(124, 108, 255, 0.45); + box-shadow: 0 14px 30px color-mix(in srgb, #7c6cff 45%, transparent); } .page-anonymous .glpi-logo { diff --git a/themes/aurora-glass/login.scss b/themes/aurora-glass/login.scss index 50ea157..cd28d3b 100644 --- a/themes/aurora-glass/login.scss +++ b/themes/aurora-glass/login.scss @@ -3,17 +3,21 @@ $btn-background-color: #7c6cff !default; $btn-foreground-color: #ffffff !default; +$page-background-color: #0b0e1a !default; +$aurora-color-1: #7c6cff !default; +$aurora-color-2: #2dd4bf !default; +$aurora-color-3: #a855f7 !default; body.welcome-anonymous, body.login-page, main.page-anonymous { min-height: 100vh; - background-color: #0b0e1a; + background-color: $page-background-color; background-image: - radial-gradient(40% 55% at 15% 20%, rgba(124, 108, 255, 0.45) 0%, transparent 70%), - radial-gradient(45% 60% at 85% 15%, rgba(45, 212, 191, 0.35) 0%, transparent 70%), - radial-gradient(50% 65% at 70% 90%, rgba(168, 85, 247, 0.35) 0%, transparent 70%), - radial-gradient(35% 45% at 30% 80%, rgba(59, 130, 246, 0.30) 0%, transparent 70%); + radial-gradient(40% 55% at 15% 20%, color-mix(in srgb, #{$aurora-color-1} 45%, transparent) 0%, transparent 70%), + radial-gradient(45% 60% at 85% 15%, color-mix(in srgb, #{$aurora-color-2} 35%, transparent) 0%, transparent 70%), + radial-gradient(50% 65% at 70% 90%, color-mix(in srgb, #{$aurora-color-3} 35%, transparent) 0%, transparent 70%), + radial-gradient(35% 45% at 30% 80%, color-mix(in srgb, #{$aurora-color-1} 25%, transparent) 0%, transparent 70%); background-attachment: fixed; } @@ -36,14 +40,14 @@ main.page-anonymous { } &::before { - background: radial-gradient(circle, rgba(124, 108, 255, 0.55), transparent 65%); + background: radial-gradient(circle, color-mix(in srgb, #{$aurora-color-1} 55%, transparent), 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%); + background: radial-gradient(circle, color-mix(in srgb, #{$aurora-color-2} 45%, transparent), transparent 65%); bottom: -140px; right: -60px; animation: butterfly-float-b 17s ease-in-out infinite alternate; @@ -116,8 +120,8 @@ main.page-anonymous { &:focus { background: rgba(255, 255, 255, 0.12); - border-color: rgba(124, 108, 255, 0.65); - box-shadow: 0 0 0 0.25rem rgba(124, 108, 255, 0.22); + border-color: color-mix(in srgb, #{$btn-background-color} 65%, transparent); + box-shadow: 0 0 0 0.25rem color-mix(in srgb, #{$btn-background-color} 22%, transparent); color: #ffffff; } } @@ -134,7 +138,7 @@ main.page-anonymous { } .page-anonymous .btn.btn-primary { - background: linear-gradient(135deg, $btn-background-color 0%, #4f8bff 100%); + background: linear-gradient(135deg, #{$btn-background-color}, color-mix(in srgb, #{$btn-background-color} 45%, #4f8bff)); border: 0; border-radius: 999px; color: $btn-foreground-color; @@ -142,11 +146,11 @@ main.page-anonymous { font-weight: 600; letter-spacing: 0.02em; transition: transform 0.15s ease, box-shadow 0.15s ease; - box-shadow: 0 10px 24px rgba(124, 108, 255, 0.35); + box-shadow: 0 10px 24px color-mix(in srgb, #{$btn-background-color} 35%, transparent); &:hover { transform: translateY(-1px); - box-shadow: 0 14px 30px rgba(124, 108, 255, 0.45); + box-shadow: 0 14px 30px color-mix(in srgb, #{$btn-background-color} 45%, transparent); } } diff --git a/themes/aurora-glass/theme.json b/themes/aurora-glass/theme.json index ff73881..3092c83 100644 --- a/themes/aurora-glass/theme.json +++ b/themes/aurora-glass/theme.json @@ -13,6 +13,22 @@ "card-background-color": { "name": "Cor do cartão", "default": "" + }, + "page-background-color": { + "name": "Cor de fundo da página", + "default": "#0b0e1a" + }, + "aurora-color-1": { + "name": "Aurora — cor 1", + "default": "#7c6cff" + }, + "aurora-color-2": { + "name": "Aurora — cor 2", + "default": "#2dd4bf" + }, + "aurora-color-3": { + "name": "Aurora — cor 3", + "default": "#a855f7" } } } diff --git a/themes/baloons/login.background.jpg b/themes/baloons/login.background.jpg deleted file mode 100644 index ecfea95..0000000 Binary files a/themes/baloons/login.background.jpg and /dev/null differ diff --git a/themes/baloons/login.css b/themes/baloons/login.css deleted file mode 100644 index 096ff48..0000000 --- a/themes/baloons/login.css +++ /dev/null @@ -1,114 +0,0 @@ -@charset "UTF-8"; -/*Tema 9 - Baloons*/ -body .card { - border: 0; - background: transparent; -} -.col-md-5 { - margin: 0 !important; - width: 100%; -} -h2.card-header.text-center.mb-4, div.card-header:has(.mx-auto) { - display: none; -} -span.glpi-logo.mb-4 { - margin: 0 !important; -} -.btn-primary, .btn-outline-primary, .btn-ghost-primary { - --tblr-btn-color: #71090e; - --tblr-btn-color-interactive: #8d0a10; - --tblr-btn-color-text: #1e293b; -} -.mb-3, .mb-4 { - position: relative; -} -.mb-3:after { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: ""; - position: absolute; - right: 20px; - color: #6a696982; - top: 12px; -} -.mb-4:before { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: ""; - position: absolute; - right: 20px; - color: #6a696982; - top: 12px; -} -.col-md-5 { - margin: 0 !important; - width: 100%; - max-width: 289px; -} -label.form-label { - color: #a6abb1; -} -.flex-fill.d-flex.flex-column.justify-content-center.py-4.mt-4 { - width: 383px; - background: #e6eef8; - border-radius: 0; - margin: 114px auto !important; - outline: 28px solid #ffffff30; - outline-offset: 0; - box-shadow: 0px 6px 13px 1px #00000047; - height: 100% !important; -} -button.btn.btn-primary.w-100 { - background: transparent; - color: #ffffff; - padding: 11px; - border-radius: 30px; - border: 1px solid #fff; - background: #593a90; - background: linear-gradient(0deg, #593a90 0%, #7551b5 48%, 1 100%); -} -a { - color: #7551b5 !important; - text-decoration: none; -} -body .form-control { - display: block; - width: 100%; - padding: 0.7375rem 0.75rem; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.4285714286; - color: inherit; - background-color: #fdfdfd; - background-clip: padding-box; - border: 0; - appearance: none; - border-radius: 34px; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - background: linear-gradient(0deg, #e6eef8, #e6eef8), #cfd8dc; - box-shadow: inset -4px -4px 12px rgba(253, 255, 255, 0.8), inset 4px 4px 12px rgba(187, 195, 206, 0.6); - border-radius: 16px; -} -label.form-label { - display: none; - color: #fff; -} -span.form-label-description { - margin-top: 10px; - margin-bottom: 10px; - text-align: left; - width: 100%; - display: block; -} -.card-body { - margin: 0 auto; - width: 350px; - max-width: 100%; -} -.form-control:focus { - color: inherit; - background-color: #fdfdfd; - border-color: #673ab7; - outline: 0; - box-shadow: 0 0 0 0.25rem rgba(103, 58, 183, 0.26); -} diff --git a/themes/baloons/login.logo.png b/themes/baloons/login.logo.png deleted file mode 100644 index 407a903..0000000 Binary files a/themes/baloons/login.logo.png and /dev/null differ diff --git a/themes/baloons/login.preview.jpg b/themes/baloons/login.preview.jpg deleted file mode 100644 index 72967c8..0000000 Binary files a/themes/baloons/login.preview.jpg and /dev/null differ diff --git a/themes/baloons/login.scss b/themes/baloons/login.scss deleted file mode 100644 index bc6ba28..0000000 --- a/themes/baloons/login.scss +++ /dev/null @@ -1,137 +0,0 @@ -/*Tema 9 - Baloons*/ - -$btn-background-color1: #593a90 !default; -$btn-background-color2: #7551b5 !default; -$btn-foreground-color: #ffffff !default; - -body .card { - border: 0; - background: transparent; -} - -.col-md-5 { - margin: 0 !important; - width: 100%; -} - -h2.card-header.text-center.mb-4, -div.card-header:has(.mx-auto) { - display: none; -} - -span.glpi-logo.mb-4 { - margin: 0 !important; -} - -.btn-primary, -.btn-outline-primary, -.btn-ghost-primary { - --tblr-btn-color: #71090e; - --tblr-btn-color-interactive: #8d0a10; - --tblr-btn-color-text: #1e293b; -} - -.mb-3, -.mb-4 { - position: relative; -} - -.mb-3:after { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: "\f007"; - position: absolute; - right: 20px; - color: #6a696982; - top: 12px; -} - -.mb-4:before { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: "\f023"; - position: absolute; - right: 20px; - color: #6a696982; - top: 12px; -} - -.col-md-5 { - margin: 0 !important; - width: 100%; - max-width: 289px; -} - -label.form-label { - color: #a6abb1; -} - -.flex-fill.d-flex.flex-column.justify-content-center.py-4.mt-4 { - width: 383px; - background: rgb(230 238 248); - border-radius: 0; - margin: 114px auto !important; - outline: 28px solid #ffffff30; - outline-offset: 0; - box-shadow: 0px 6px 13px 1px #00000047; - height: 100% !important; -} - -button.btn.btn-primary.w-100 { - background: transparent; - color: $btn-foreground-color; - padding: 11px; - border-radius: 30px; - border: 1px solid #fff; - background: $btn-background-color1; - background: linear-gradient(0deg, $btn-background-color1 0%, $btn-background-color2 48%, 1 100%); -} - -a { - color: #7551b5 !important; - text-decoration: none; -} - -body .form-control { - display: block; - width: 100%; - padding: 0.7375rem 0.75rem; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.4285714286; - color: inherit; - background-color: #fdfdfd; - background-clip: padding-box; - border: 0; - appearance: none; - border-radius: 34px; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - background: linear-gradient(0deg, #e6eef8, #e6eef8), #cfd8dc; - box-shadow: inset -4px -4px 12px rgb(253 255 255 / 80%), - inset 4px 4px 12px rgb(187 195 206 / 60%); - border-radius: 16px; -} - -label.form-label { - display: none; - color: #fff; -} -span.form-label-description { - margin-top: 10px; - margin-bottom: 10px; - text-align: left; - width: 100%; - display: block; -} -.card-body { - margin: 0 auto; - width: 350px; - max-width: 100%; -} -.form-control:focus { - color: inherit; - background-color: #fdfdfd; - border-color: #673ab7; - outline: 0; - box-shadow: 0 0 0 0.25rem rgb(103 58 183 / 26%); -} diff --git a/themes/baloons/theme.json b/themes/baloons/theme.json deleted file mode 100644 index 36e6b95..0000000 --- a/themes/baloons/theme.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "name": "Ballons", - "description": "Ballons Theme", - "variables": { - "btn-background-color1": { - "name": "Cor de fundo 1 dos Botões", - "default": "#593a90" - }, - "btn-background-color2": { - "name": "Cor de fundo 2 dos Botões", - "default": "#7551b5" - }, - "btn-foreground-color": { - "name": "Cor do texto dos Botões", - "default": "#ffffff" - }, - "card-background-color": { - "name": "Cor do cartão", - "default": "" - } - } -} diff --git a/themes/carbon-neon/login.css b/themes/carbon-neon/login.css index 403c14c..defe946 100644 --- a/themes/carbon-neon/login.css +++ b/themes/carbon-neon/login.css @@ -6,7 +6,7 @@ body.login-page, main.page-anonymous { min-height: 100vh; background-color: #07090d; - 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-image: radial-gradient(55% 45% at 30% 0%, color-mix(in srgb, #00e5c7 13%, transparent) 0%, transparent 70%), radial-gradient(40% 40% at 95% 90%, color-mix(in srgb, #00e5c7 8%, rgba(56, 189, 248, 0)) 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; } @@ -35,8 +35,8 @@ main.page-anonymous { .page-anonymous .main-content-card > .card-header { display: block !important; height: 38px; - background: #161d27; - border: 1px solid rgba(0, 229, 199, 0.22); + background: color-mix(in srgb, #0d1117 80%, #2a3646); + border: 1px solid color-mix(in srgb, #00e5c7 22%, transparent); border-bottom: 1px solid rgba(148, 163, 184, 0.15); border-radius: 12px 12px 0 0; position: relative; @@ -64,12 +64,12 @@ main.page-anonymous { } .page-anonymous .main-content-card .card-body { - background: rgba(13, 17, 23, 0.96); - border: 1px solid rgba(0, 229, 199, 0.22); + background: color-mix(in srgb, #0d1117 96%, transparent); + border: 1px solid color-mix(in srgb, #00e5c7 22%, transparent); 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); + box-shadow: 0 0 45px color-mix(in srgb, #00e5c7 10%, transparent), 0 26px 60px rgba(0, 0, 0, 0.6); } .page-anonymous .main-content-card .col-md-5 { @@ -103,7 +103,7 @@ main.page-anonymous { } /* labels como prompt */ .page-anonymous .form-label { - color: #7dd3c8; + color: color-mix(in srgb, #00e5c7 55%, #cbd5e1); font-size: 0.78rem; letter-spacing: 0.04em; } @@ -117,7 +117,7 @@ main.page-anonymous { .page-anonymous .form-select { 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-left: 3px solid color-mix(in srgb, #00e5c7 45%, transparent); border-radius: 4px; color: #e2e8f0; font-family: inherit; @@ -130,16 +130,16 @@ main.page-anonymous { .page-anonymous .form-control:focus, .page-anonymous .form-select:focus { background: rgba(2, 6, 12, 0.95); - border-color: rgba(0, 229, 199, 0.65); + border-color: color-mix(in srgb, #00e5c7 65%, transparent); border-left-color: #00e5c7; - box-shadow: 0 0 18px rgba(0, 229, 199, 0.18); + box-shadow: 0 0 18px color-mix(in srgb, #00e5c7 18%, transparent); 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-left: 3px solid color-mix(in srgb, #00e5c7 45%, transparent); border-radius: 4px; color: #e2e8f0; } @@ -165,7 +165,7 @@ main.page-anonymous { letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; - box-shadow: 0 0 18px rgba(0, 229, 199, 0.15); + box-shadow: 0 0 18px color-mix(in srgb, #00e5c7 15%, transparent); transition: all 0.15s ease; } .page-anonymous .btn.btn-primary::before { @@ -174,7 +174,7 @@ main.page-anonymous { .page-anonymous .btn.btn-primary:hover { background: #00e5c7; color: #031a17; - box-shadow: 0 0 34px rgba(0, 229, 199, 0.5); + box-shadow: 0 0 34px color-mix(in srgb, #00e5c7 50%, transparent); } .page-anonymous .text-muted, diff --git a/themes/carbon-neon/login.scss b/themes/carbon-neon/login.scss index 92d513d..3175b8f 100644 --- a/themes/carbon-neon/login.scss +++ b/themes/carbon-neon/login.scss @@ -3,15 +3,18 @@ $btn-background-color: #00e5c7 !default; $btn-foreground-color: #031a17 !default; +$page-background-color: #07090d !default; +$glow-color: #00e5c7 !default; +$terminal-background-color: #0d1117 !default; body.welcome-anonymous, body.login-page, main.page-anonymous { min-height: 100vh; - background-color: #07090d; + background-color: $page-background-color; 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.10) 0%, transparent 70%), + radial-gradient(55% 45% at 30% 0%, color-mix(in srgb, #{$glow-color} 13%, transparent) 0%, transparent 70%), + radial-gradient(40% 40% at 95% 90%, color-mix(in srgb, #{$glow-color} 8%, #38bdf800) 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; @@ -42,8 +45,8 @@ main.page-anonymous { .page-anonymous .main-content-card > .card-header { display: block !important; height: 38px; - background: #161d27; - border: 1px solid rgba(0, 229, 199, 0.22); + background: color-mix(in srgb, #{$terminal-background-color} 80%, #2a3646); + border: 1px solid color-mix(in srgb, #{$glow-color} 22%, transparent); border-bottom: 1px solid rgba(148, 163, 184, 0.15); border-radius: 12px 12px 0 0; position: relative; @@ -73,12 +76,12 @@ main.page-anonymous { } .page-anonymous .main-content-card .card-body { - background: rgba(13, 17, 23, 0.96); - border: 1px solid rgba(0, 229, 199, 0.22); + background: color-mix(in srgb, #{$terminal-background-color} 96%, transparent); + border: 1px solid color-mix(in srgb, #{$glow-color} 22%, transparent); 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); + box-shadow: 0 0 45px color-mix(in srgb, #{$glow-color} 10%, transparent), 0 26px 60px rgba(0, 0, 0, 0.60); } .page-anonymous .main-content-card .col-md-5 { @@ -101,7 +104,7 @@ main.page-anonymous { &::after { content: "_"; - color: #00e5c7; + color: $glow-color; animation: butterfly-blink 1.1s steps(1) infinite; } } @@ -113,13 +116,13 @@ main.page-anonymous { /* labels como prompt */ .page-anonymous .form-label { - color: #7dd3c8; + color: color-mix(in srgb, #{$glow-color} 55%, #cbd5e1); font-size: 0.78rem; letter-spacing: 0.04em; &::before { content: "> "; - color: #00e5c7; + color: $glow-color; font-weight: 700; } } @@ -128,7 +131,7 @@ main.page-anonymous { .page-anonymous .form-select { 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-left: 3px solid color-mix(in srgb, #{$glow-color} 45%, transparent); border-radius: 4px; color: #e2e8f0; font-family: inherit; @@ -140,9 +143,9 @@ main.page-anonymous { &:focus { background: rgba(2, 6, 12, 0.95); - border-color: rgba(0, 229, 199, 0.65); - border-left-color: #00e5c7; - box-shadow: 0 0 18px rgba(0, 229, 199, 0.18); + border-color: color-mix(in srgb, #{$glow-color} 65%, transparent); + border-left-color: $glow-color; + box-shadow: 0 0 18px color-mix(in srgb, #{$glow-color} 18%, transparent); color: #ffffff; } } @@ -150,7 +153,7 @@ main.page-anonymous { .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-left: 3px solid color-mix(in srgb, #{$glow-color} 45%, transparent); border-radius: 4px; color: #e2e8f0; } @@ -176,7 +179,7 @@ main.page-anonymous { letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; - box-shadow: 0 0 18px rgba(0, 229, 199, 0.15); + box-shadow: 0 0 18px color-mix(in srgb, #{$btn-background-color} 15%, transparent); transition: all 0.15s ease; &::before { @@ -186,7 +189,7 @@ main.page-anonymous { &:hover { background: $btn-background-color; color: $btn-foreground-color; - box-shadow: 0 0 34px rgba(0, 229, 199, 0.5); + box-shadow: 0 0 34px color-mix(in srgb, #{$btn-background-color} 50%, transparent); } } @@ -197,7 +200,7 @@ main.page-anonymous { } .page-anonymous a { - color: #00e5c7 !important; + color: $glow-color !important; } @media (max-width: 768px) { diff --git a/themes/carbon-neon/theme.json b/themes/carbon-neon/theme.json index 7491678..a3e6545 100644 --- a/themes/carbon-neon/theme.json +++ b/themes/carbon-neon/theme.json @@ -1,6 +1,6 @@ { "name": "Carbon Neon", - "description": "Dark tech com glow ciano sobre carbono", + "description": "Janela de terminal com glow neon sobre carbono", "variables": { "btn-background-color": { "name": "Cor de fundo dos Botões", @@ -13,6 +13,18 @@ "card-background-color": { "name": "Cor do cartão", "default": "" + }, + "page-background-color": { + "name": "Cor de fundo da página", + "default": "#07090d" + }, + "glow-color": { + "name": "Cor do neon (bordas, glow e prompt)", + "default": "#00e5c7" + }, + "terminal-background-color": { + "name": "Cor de fundo do terminal", + "default": "#0d1117" } } } diff --git a/themes/cloud/login.background.jpg b/themes/cloud/login.background.jpg deleted file mode 100644 index 54c4318..0000000 Binary files a/themes/cloud/login.background.jpg and /dev/null differ diff --git a/themes/cloud/login.css b/themes/cloud/login.css deleted file mode 100644 index 3bf0970..0000000 --- a/themes/cloud/login.css +++ /dev/null @@ -1,119 +0,0 @@ -@charset "UTF-8"; -/*Tema 3 - Cloud*/ -body .card { - border: 0; - background: transparent; -} -.col-md-5 { - margin: 0 !important; - width: 100%; -} -h2.card-header.text-center.mb-4, div.card-header:has(.mx-auto) { - display: none; -} -span.glpi-logo.mb-4 { - margin: 0 !important; -} -.btn-primary, .btn-outline-primary, .btn-ghost-primary { - --tblr-btn-color: #71090e; - --tblr-btn-color-interactive: #8d0a10; - --tblr-btn-color-text: #1e293b; -} -.mb-3, .mb-4 { - position: relative; -} -.mb-3:after { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: ""; - position: absolute; - right: 20px; - color: #6a696982; - top: 12px; -} -.mb-4:before { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: ""; - position: absolute; - right: 20px; - color: #6a696982; - top: 12px; -} -.col-md-5 { - margin: 0 !important; - width: 100%; - max-width: 289px; -} -label.form-label { - color: #a6abb1; -} -.card-body { - padding: 0px !important; - margin: auto; -} -.flex-fill.d-flex.flex-column.justify-content-center.py-4.mt-4 { - width: 383px; - background: #ffffff; - border-radius: 30px; - margin: 114px auto !important; - outline-offset: 0; - box-shadow: 0px 6px 13px 1px #00000047; - height: 100% !important; -} -button.btn.btn-primary.w-100 { - color: #ffffff; - padding: 11px; - border-radius: 30px; - border: 1px solid #fff; - background: #000000; -} -a { - color: #000000 !important; - text-decoration: underline; -} -body .form-control { - display: block; - width: 100%; - min-width: 250px; - padding: 0.7375rem 0.75rem; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.4285714286; - color: inherit; - background-color: #fdfdfd; - background-clip: padding-box; - border: 0; - appearance: none; - border-radius: 34px; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - background: #fff; - border-radius: 0; - border-bottom: 1px solid; -} -label.form-label { - display: none; - color: #fff; -} -span.form-label-description { - margin-top: 10px; - margin-bottom: 10px; - text-align: left; - width: 100%; - display: block; -} -.card-body { - margin: 0 auto; - width: 350px; - max-width: 100%; -} -.col-auto.offset-md-1.p-2.text-center { - display: none; -} -.form-control:focus { - color: inherit; - background-color: #fdfdfd; - border-color: #013453; - outline: 0; - box-shadow: 0 0 0 0.25rem #5e5e5e3b; -} diff --git a/themes/cloud/login.logo.png b/themes/cloud/login.logo.png deleted file mode 100644 index 0edaf00..0000000 Binary files a/themes/cloud/login.logo.png and /dev/null differ diff --git a/themes/cloud/login.preview.jpg b/themes/cloud/login.preview.jpg deleted file mode 100644 index 9c2b088..0000000 Binary files a/themes/cloud/login.preview.jpg and /dev/null differ diff --git a/themes/cloud/login.scss b/themes/cloud/login.scss deleted file mode 100644 index 4bbd925..0000000 --- a/themes/cloud/login.scss +++ /dev/null @@ -1,140 +0,0 @@ -/*Tema 3 - Cloud*/ - -$btn-background-color: #000000 !default; -$btn-foreground-color: #ffffff !default; - -body .card { - border: 0; - background: transparent; -} - -.col-md-5 { - margin: 0 !important; - width: 100%; -} - -h2.card-header.text-center.mb-4, -div.card-header:has(.mx-auto) { - display: none; -} - -span.glpi-logo.mb-4 { - margin: 0 !important; -} - -.btn-primary, -.btn-outline-primary, -.btn-ghost-primary { - --tblr-btn-color: #71090e; - --tblr-btn-color-interactive: #8d0a10; - --tblr-btn-color-text: #1e293b; -} - -.mb-3, -.mb-4 { - position: relative; -} - -.mb-3:after { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: "\f007"; - position: absolute; - right: 20px; - color: #6a696982; - top: 12px; -} - -.mb-4:before { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: "\f023"; - position: absolute; - right: 20px; - color: #6a696982; - top: 12px; -} - -.col-md-5 { - margin: 0 !important; - width: 100%; - max-width: 289px; -} - -label.form-label { - color: #a6abb1; -} - -.card-body { - padding: 0px !important; - margin: auto; -} - -.flex-fill.d-flex.flex-column.justify-content-center.py-4.mt-4 { - width: 383px; - background: #ffffff; - border-radius: 30px; - margin: 114px auto !important; - outline-offset: 0; - box-shadow: 0px 6px 13px 1px #00000047; - height: 100% !important; -} - -button.btn.btn-primary.w-100 { - color: $btn-foreground-color; - padding: 11px; - border-radius: 30px; - border: 1px solid #fff; - background: $btn-background-color; -} - -a { - color: #000000 !important; - text-decoration: underline; -} - -body .form-control { - display: block; - width: 100%; - min-width: 250px; - padding: 0.7375rem 0.75rem; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.4285714286; - color: inherit; - background-color: #fdfdfd; - background-clip: padding-box; - border: 0; - appearance: none; - border-radius: 34px; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - background: #fff; - border-radius: 0; - border-bottom: 1px solid; -} -label.form-label { - display: none; - color: #fff; -} -span.form-label-description { - margin-top: 10px; - margin-bottom: 10px; - text-align: left; - width: 100%; - display: block; -} -.card-body { - margin: 0 auto; - width: 350px; - max-width: 100%; -} -.col-auto.offset-md-1.p-2.text-center { - display: none; -} -.form-control:focus { - color: inherit; - background-color: #fdfdfd; - border-color: #013453; - outline: 0; - box-shadow: 0 0 0 0.25rem #5e5e5e3b; -} diff --git a/themes/cloud/theme.json b/themes/cloud/theme.json deleted file mode 100644 index cb900dd..0000000 --- a/themes/cloud/theme.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "name": "Cloud", - "description": "Cloud Theme", - "variables": { - "btn-background-color": { - "name": "Cor de fundo dos Botões", - "default": "#000000" - }, - "btn-foreground-color": { - "name": "Cor do texto dos Botões", - "default": "#ffffff" - }, - "card-background-color": { - "name": "Cor do cartão", - "default": "" - } - } -} diff --git a/themes/desktop/login.background.jpg b/themes/desktop/login.background.jpg deleted file mode 100644 index 7364c0a..0000000 Binary files a/themes/desktop/login.background.jpg and /dev/null differ diff --git a/themes/desktop/login.css b/themes/desktop/login.css deleted file mode 100644 index 956bfb9..0000000 --- a/themes/desktop/login.css +++ /dev/null @@ -1,125 +0,0 @@ -@charset "UTF-8"; -/*Tema 1 - Desktop*/ -body .card { - border: 0; - background: transparent; -} -.col-md-5 { - margin: 0 !important; - width: 100%; -} -h2.card-header.text-center.mb-4, div.card-header:has(.mx-auto) { - display: none; -} -span.glpi-logo.mb-4 { - margin: 0 !important; -} -.btn-primary, .btn-outline-primary, .btn-ghost-primary { - --tblr-btn-color: #71090e; - --tblr-btn-color-interactive: #8d0a10; - --tblr-btn-color-text: #1e293b; -} -.mb-3, .mb-4 { - position: relative; -} -.mb-3:after { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: ""; - position: absolute; - right: 20px; - color: #6a696982; - top: 12px; -} -.mb-4:before { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: ""; - position: absolute; - right: 20px; - color: #6a696982; - top: 12px; -} -.col-md-5 { - margin: 0 !important; - width: 100%; - max-width: 289px; -} -label.form-label { - color: #a6abb1; -} -.card-body { - padding: 0px !important; - margin: auto; -} -.flex-fill.d-flex.flex-column.justify-content-center.py-4.mt-4 { - width: 50%; - background: #ffffffc9; - border-radius: 30px; - margin: 0; - outline-offset: 0; - box-shadow: 0px 6px 13px 1px #00000047; - left: 0; - height: 100% !important; - top: -32px; - border-radius: 0; - position: absolute; - padding-top: 130px !important; - padding-bottom: 110px !important; -} -button.btn.btn-primary.w-100 { - color: #ffffff; - padding: 11px; - border-radius: 30px; - border: 1px solid #fff; - background: #000000; -} -a { - color: #000000 !important; - text-decoration: underline; -} -body .form-control { - display: block; - width: 100%; - min-width: 250px; - padding: 0.7375rem 0.75rem; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.4285714286; - color: inherit; - background-color: #fdfdfd; - background-clip: padding-box; - border: 0; - appearance: none; - border-radius: 34px; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - background: #fff; - border-radius: 0; - border-bottom: 1px solid; -} -label.form-label { - display: none; - color: #fff; -} -span.form-label-description { - margin-top: 10px; - margin-bottom: 10px; - text-align: left; - width: 100%; - display: block; -} -.card-body { - margin: 0 auto; - width: 350px; - max-width: 100%; -} -.col-auto.offset-md-1.p-2.text-center { - display: none; -} -.form-control:focus { - color: inherit; - background-color: #fdfdfd; - border-color: #013453; - outline: 0; - box-shadow: 0 0 0 0.25rem #5e5e5e3b; -} diff --git a/themes/desktop/login.logo.png b/themes/desktop/login.logo.png deleted file mode 100644 index 0edaf00..0000000 Binary files a/themes/desktop/login.logo.png and /dev/null differ diff --git a/themes/desktop/login.preview.jpg b/themes/desktop/login.preview.jpg deleted file mode 100644 index b4ae88c..0000000 Binary files a/themes/desktop/login.preview.jpg and /dev/null differ diff --git a/themes/desktop/login.scss b/themes/desktop/login.scss deleted file mode 100644 index 3ab0fd6..0000000 --- a/themes/desktop/login.scss +++ /dev/null @@ -1,147 +0,0 @@ -/*Tema 1 - Desktop*/ - -$btn-background-color: #000000 !default; -$btn-foreground-color: #ffffff !default; - -body .card { - border: 0; - background: transparent; -} - -.col-md-5 { - margin: 0 !important; - width: 100%; -} - -h2.card-header.text-center.mb-4, -div.card-header:has(.mx-auto) { - display: none; -} - -span.glpi-logo.mb-4 { - margin: 0 !important; -} - -.btn-primary, -.btn-outline-primary, -.btn-ghost-primary { - --tblr-btn-color: #71090e; - --tblr-btn-color-interactive: #8d0a10; - --tblr-btn-color-text: #1e293b; -} - -.mb-3, -.mb-4 { - position: relative; -} - -.mb-3:after { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: "\f007"; - position: absolute; - right: 20px; - color: #6a696982; - top: 12px; -} - -.mb-4:before { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: "\f023"; - position: absolute; - right: 20px; - color: #6a696982; - top: 12px; -} - -.col-md-5 { - margin: 0 !important; - width: 100%; - max-width: 289px; -} - -label.form-label { - color: #a6abb1; -} - -.card-body { - padding: 0px !important; - margin: auto; -} - -.flex-fill.d-flex.flex-column.justify-content-center.py-4.mt-4 { - width: 50%; - background: #ffffffc9; - border-radius: 30px; - margin: 0; - outline-offset: 0; - box-shadow: 0px 6px 13px 1px #00000047; - left: 0; - height: 100% !important; - top: -32px; - border-radius: 0; - position: absolute; - padding-top: 130px !important; - padding-bottom: 110px !important; -} - -button.btn.btn-primary.w-100 { - color: $btn-foreground-color; - padding: 11px; - border-radius: 30px; - border: 1px solid #fff; - background: $btn-background-color; -} - -a { - color: #000000 !important; - text-decoration: underline; -} - -body .form-control { - display: block; - width: 100%; - min-width: 250px; - padding: 0.7375rem 0.75rem; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.4285714286; - color: inherit; - background-color: #fdfdfd; - background-clip: padding-box; - border: 0; - appearance: none; - border-radius: 34px; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - background: #fff; - border-radius: 0; - border-bottom: 1px solid; -} - -label.form-label { - display: none; - color: #fff; -} -span.form-label-description { - margin-top: 10px; - margin-bottom: 10px; - text-align: left; - width: 100%; - display: block; -} -.card-body { - margin: 0 auto; - width: 350px; - max-width: 100%; -} -.col-auto.offset-md-1.p-2.text-center { - display: none; -} -.form-control:focus { - color: inherit; - background-color: #fdfdfd; - border-color: #013453; - outline: 0; - box-shadow: 0 0 0 0.25rem #5e5e5e3b; -} diff --git a/themes/desktop/theme.json b/themes/desktop/theme.json deleted file mode 100644 index 8aeb1f5..0000000 --- a/themes/desktop/theme.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "name": "Desktop", - "description": "Desktop Theme", - "variables": { - "btn-background-color": { - "name": "Cor de fundo dos Botões", - "default": "#000000" - }, - "btn-foreground-color": { - "name": "Cor do texto dos Botões", - "default": "#ffffff" - }, - "card-background-color": { - "name": "Cor do cartão", - "default": "" - } - } -} diff --git a/themes/light/login.background.jpg b/themes/light/login.background.jpg deleted file mode 100644 index 02b002d..0000000 Binary files a/themes/light/login.background.jpg and /dev/null differ diff --git a/themes/light/login.css b/themes/light/login.css deleted file mode 100644 index 095e95d..0000000 --- a/themes/light/login.css +++ /dev/null @@ -1,117 +0,0 @@ -@charset "UTF-8"; -/*Tema 8 - Light*/ -body .card { - border: 0; - background: transparent; -} -.col-md-5 { - margin: 0 !important; - width: 100%; -} -h2.card-header.text-center.mb-4, div.card-header:has(.mx-auto) { - display: none; -} -span.glpi-logo.mb-4 { - margin: 0 !important; -} -.btn-primary, .btn-outline-primary, .btn-ghost-primary { - --tblr-btn-color: #71090e; - --tblr-btn-color-interactive: #8d0a10; - --tblr-btn-color-text: #1e293b; -} -.mb-3, .mb-4 { - position: relative; -} -.mb-3:after { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: ""; - position: absolute; - right: 20px; - color: #013453; - top: 12px; -} -.mb-4:before { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: ""; - position: absolute; - right: 20px; - color: #013453; - top: 12px; -} -.col-md-5 { - margin: 0 !important; - width: 100%; - max-width: 289px; -} -button.btn.btn-primary.w-100 { - color: #ffffff; - padding: 11px; - border-radius: 30px; - background: #013453; -} -label.form-label { - color: #023454; -} -.card-body { - padding: 0px !important; - margin: auto; -} -.flex-fill.d-flex.flex-column.justify-content-center.py-4.mt-4 { - background: transparent; - border-radius: 30px; - margin: 0; - outline-offset: 0; - height: 100% !important; - border-radius: 0; - padding-bottom: 10px !important; - width: 320px; - margin: 0 auto; -} -a { - color: #000000 !important; - text-decoration: underline; -} -body .form-control { - display: block; - width: 100%; - min-width: 250px; - padding: 0.7375rem 0.75rem; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.4285714286; - color: inherit; - background-color: #fdfdfd; - background-clip: padding-box; - border: 0; - appearance: none; - border-radius: 34px; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - background: #fff; - border-radius: 0; - border-bottom: 1px solid; -} -label.form-label { - display: none; - color: #fff; -} -span.form-label-description { - margin-top: 10px; - margin-bottom: 10px; - text-align: left; - width: 100%; - display: block; -} -.card-body { - margin: 0 auto; - width: 350px; - max-width: 100%; -} -.form-control:focus { - color: inherit; - background-color: #fdfdfd; - border-color: #013453; - outline: 0; - box-shadow: 0 0 0 0.25rem #0133533b; -} diff --git a/themes/light/login.logo.png b/themes/light/login.logo.png deleted file mode 100644 index fb04646..0000000 Binary files a/themes/light/login.logo.png and /dev/null differ diff --git a/themes/light/login.preview.jpg b/themes/light/login.preview.jpg deleted file mode 100644 index b55fd68..0000000 Binary files a/themes/light/login.preview.jpg and /dev/null differ diff --git a/themes/light/login.scss b/themes/light/login.scss deleted file mode 100644 index edc8d31..0000000 --- a/themes/light/login.scss +++ /dev/null @@ -1,138 +0,0 @@ -/*Tema 8 - Light*/ - -$btn-background-color: #013453 !default; -$btn-foreground-color: #ffffff !default; - -body .card { - border: 0; - background: transparent; -} - -.col-md-5 { - margin: 0 !important; - width: 100%; -} - -h2.card-header.text-center.mb-4, -div.card-header:has(.mx-auto) { - display: none; -} - -span.glpi-logo.mb-4 { - margin: 0 !important; -} - -.btn-primary, -.btn-outline-primary, -.btn-ghost-primary { - --tblr-btn-color: #71090e; - --tblr-btn-color-interactive: #8d0a10; - --tblr-btn-color-text: #1e293b; -} - -.mb-3, -.mb-4 { - position: relative; -} - -.mb-3:after { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: "\f007"; - position: absolute; - right: 20px; - color: #013453; - top: 12px; -} - -.mb-4:before { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: "\f023"; - position: absolute; - right: 20px; - color: #013453; - top: 12px; -} - -.col-md-5 { - margin: 0 !important; - width: 100%; - max-width: 289px; -} - -button.btn.btn-primary.w-100 { - color: $btn-foreground-color; - padding: 11px; - border-radius: 30px; - background: $btn-background-color; -} - -label.form-label { - color: #023454; -} - -.card-body { - padding: 0px !important; - margin: auto; -} - -.flex-fill.d-flex.flex-column.justify-content-center.py-4.mt-4 { - background: transparent; - border-radius: 30px; - margin: 0; - outline-offset: 0; - height: 100% !important; - border-radius: 0; - padding-bottom: 10px !important; - width: 320px; - margin: 0 auto; -} - -a { - color: #000000 !important; - text-decoration: underline; -} - -body .form-control { - display: block; - width: 100%; - min-width: 250px; - padding: 0.7375rem 0.75rem; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.4285714286; - color: inherit; - background-color: #fdfdfd; - background-clip: padding-box; - border: 0; - appearance: none; - border-radius: 34px; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - background: #fff; - border-radius: 0; - border-bottom: 1px solid; -} -label.form-label { - display: none; - color: #fff; -} -span.form-label-description { - margin-top: 10px; - margin-bottom: 10px; - text-align: left; - width: 100%; - display: block; -} -.card-body { - margin: 0 auto; - width: 350px; - max-width: 100%; -} -.form-control:focus { - color: inherit; - background-color: #fdfdfd; - border-color: #013453; - outline: 0; - box-shadow: 0 0 0 0.25rem #0133533b; -} diff --git a/themes/light/theme.json b/themes/light/theme.json deleted file mode 100644 index bc2ff97..0000000 --- a/themes/light/theme.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "name": "Light", - "description": "Light Theme", - "variables": { - "btn-background-color": { - "name": "Cor de fundo dos Botões", - "default": "#013453" - }, - "btn-foreground-color": { - "name": "Cor do texto dos Botões", - "default": "#ffffff" - }, - "card-background-color": { - "name": "Cor do cartão", - "default": "" - } - } -} diff --git a/themes/neon/login.background.jpg b/themes/neon/login.background.jpg deleted file mode 100644 index 3ae1d9c..0000000 Binary files a/themes/neon/login.background.jpg and /dev/null differ diff --git a/themes/neon/login.css b/themes/neon/login.css deleted file mode 100644 index fa0be97..0000000 --- a/themes/neon/login.css +++ /dev/null @@ -1,122 +0,0 @@ -@charset "UTF-8"; -/*Tema 5 - Neon*/ -body .card { - border: 0; - background: transparent; -} -.col-md-5 { - margin: 0 !important; - width: 100%; -} -h2.card-header.text-center.mb-4, div.card-header:has(.mx-auto) { - display: none; -} -span.glpi-logo.mb-4 { - margin: 0 !important; -} -.btn-primary, .btn-outline-primary, .btn-ghost-primary { - --tblr-btn-color: #71090e; - --tblr-btn-color-interactive: #8d0a10; - --tblr-btn-color-text: #1e293b; -} -.mb-3, .mb-4 { - position: relative; -} -.mb-3:after { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: ""; - position: absolute; - right: 20px; - color: #fff; - top: 12px; -} -.mb-4:before { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: ""; - position: absolute; - right: 20px; - color: #fff; - top: 12px; -} -.col-md-5 { - margin: 0 !important; - width: 100%; - max-width: 289px; -} -label.form-label { - color: #fff; -} -.card-body { - padding: 0px !important; - margin: auto; -} -.flex-fill.d-flex.flex-column.justify-content-center.py-4.mt-4 { - width: 50%; - background: transparent; - border-radius: 30px; - margin: 0; - outline-offset: 0; - box-shadow: 0px 6px 13px 1px #00000047; - left: 0; - height: 100% !important; - top: -32px; - border-radius: 0; - position: absolute; - padding-top: 130px !important; - padding-bottom: 110px !important; -} -button.btn.btn-primary.w-100 { - color: #ffffff; - padding: 11px; - border-radius: 30px; - border: 1px solid #fff; - background: #000000; -} -a { - color: #ffffff !important; - text-decoration: underline; -} -body .form-control { - display: block; - width: 100%; - min-width: 250px; - padding: 0.7375rem 0.75rem; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.4285714286; - color: inherit; - border: 0; - appearance: none; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - background: #ffffff05; - border-radius: 0; - border-bottom: 1px solid #fff; -} -label.form-label { - display: none; - color: #fff; -} -span.form-label-description { - margin-top: 10px; - margin-bottom: 10px; - text-align: left; - width: 100%; - display: block; -} -.card-body { - margin: 0 auto; - width: 350px; - max-width: 100%; -} -.col-auto.offset-md-1.p-2.text-center { - display: none; -} -.form-control:focus { - color: inherit; - background-color: #fdfdfd; - border-color: #013453; - outline: 0; - box-shadow: 0 0 0 0.25rem #5e5e5e3b; -} diff --git a/themes/neon/login.logo.png b/themes/neon/login.logo.png deleted file mode 100644 index 31324fb..0000000 Binary files a/themes/neon/login.logo.png and /dev/null differ diff --git a/themes/neon/login.preview.jpg b/themes/neon/login.preview.jpg deleted file mode 100644 index d42006f..0000000 Binary files a/themes/neon/login.preview.jpg and /dev/null differ diff --git a/themes/neon/login.scss b/themes/neon/login.scss deleted file mode 100644 index a9b13d3..0000000 --- a/themes/neon/login.scss +++ /dev/null @@ -1,143 +0,0 @@ -/*Tema 5 - Neon*/ - -$btn-background-color: #000000 !default; -$btn-foreground-color: #ffffff !default; - -body .card { - border: 0; - background: transparent; -} - -.col-md-5 { - margin: 0 !important; - width: 100%; -} - -h2.card-header.text-center.mb-4, -div.card-header:has(.mx-auto) { - display: none; -} - -span.glpi-logo.mb-4 { - margin: 0 !important; -} - -.btn-primary, -.btn-outline-primary, -.btn-ghost-primary { - --tblr-btn-color: #71090e; - --tblr-btn-color-interactive: #8d0a10; - --tblr-btn-color-text: #1e293b; -} - -.mb-3, -.mb-4 { - position: relative; -} - -.mb-3:after { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: "\f007"; - position: absolute; - right: 20px; - color: #fff; - top: 12px; -} - -.mb-4:before { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: "\f023"; - position: absolute; - right: 20px; - color: #fff; - top: 12px; -} - -.col-md-5 { - margin: 0 !important; - width: 100%; - max-width: 289px; -} - -label.form-label { - color: #fff; -} - -.card-body { - padding: 0px !important; - margin: auto; -} - -.flex-fill.d-flex.flex-column.justify-content-center.py-4.mt-4 { - width: 50%; - background: transparent; - border-radius: 30px; - margin: 0; - outline-offset: 0; - box-shadow: 0px 6px 13px 1px #00000047; - left: 0; - height: 100% !important; - top: -32px; - border-radius: 0; - position: absolute; - padding-top: 130px !important; - padding-bottom: 110px !important; -} - -button.btn.btn-primary.w-100 { - color: $btn-foreground-color; - padding: 11px; - border-radius: 30px; - border: 1px solid #fff; - background: $btn-background-color; -} - -a { - color: #ffffff !important; - text-decoration: underline; -} - -body .form-control { - display: block; - width: 100%; - min-width: 250px; - padding: 0.7375rem 0.75rem; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.4285714286; - color: inherit; - border: 0; - appearance: none; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - background: #ffffff05; - border-radius: 0; - border-bottom: 1px solid #fff; -} -label.form-label { - display: none; - color: #fff; -} -span.form-label-description { - margin-top: 10px; - margin-bottom: 10px; - text-align: left; - width: 100%; - display: block; -} -.card-body { - margin: 0 auto; - width: 350px; - max-width: 100%; -} -.col-auto.offset-md-1.p-2.text-center { - display: none; -} -.form-control:focus { - color: inherit; - background-color: #fdfdfd; - border-color: #013453; - outline: 0; - box-shadow: 0 0 0 0.25rem #5e5e5e3b; -} diff --git a/themes/neon/theme.json b/themes/neon/theme.json deleted file mode 100644 index c4962f2..0000000 --- a/themes/neon/theme.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "name": "Neon", - "description": "Neon Theme", - "variables": { - "btn-background-color": { - "name": "Cor de fundo dos Botões", - "default": "#000000" - }, - "btn-foreground-color": { - "name": "Cor do texto dos Botões", - "default": "#ffffff" - }, - "card-background-color": { - "name": "Cor do cartão", - "default": "" - } - } -} diff --git a/themes/night/login.background.jpg b/themes/night/login.background.jpg deleted file mode 100644 index 00703ad..0000000 Binary files a/themes/night/login.background.jpg and /dev/null differ diff --git a/themes/night/login.css b/themes/night/login.css deleted file mode 100644 index efa6aca..0000000 --- a/themes/night/login.css +++ /dev/null @@ -1,127 +0,0 @@ -@charset "UTF-8"; -/*Tema 4 - Night*/ -body .card { - border: 0; - background: transparent; -} -.col-md-5 { - margin: 0 !important; - width: 100%; -} -h2.card-header.text-center.mb-4, div.card-header:has(.mx-auto) { - display: none; -} -span.glpi-logo.mb-4 { - margin: 0 !important; -} -.btn-primary, .btn-outline-primary, .btn-ghost-primary { - --tblr-btn-color: #71090e; - --tblr-btn-color-interactive: #8d0a10; - --tblr-btn-color-text: #1e293b; -} -.mb-3, .mb-4 { - position: relative; -} -.mb-3:after { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: ""; - position: absolute; - right: 20px; - color: #fff; - top: 12px; -} -.mb-4:before { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: ""; - position: absolute; - right: 20px; - color: #fff; - top: 12px; -} -.col-md-5 { - margin: 0 !important; - width: 100%; - max-width: 289px; -} -label.form-label { - color: #fff; -} -.card-body { - padding: 0px !important; - margin: auto; -} -.flex-fill.d-flex.flex-column.justify-content-center.py-4.mt-4 { - width: 50%; - background: transparent; - border-radius: 30px; - margin: 0; - outline-offset: 0; - box-shadow: 0px 6px 13px 1px #00000047; - left: 0; - height: 100% !important; - top: -32px; - border-radius: 0; - position: absolute; - padding-top: 130px !important; - padding-bottom: 110px !important; - background: rgba(255, 255, 255, 0.04); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(5px); - -webkit-backdrop-filter: blur(5px); - border: 1px solid rgba(255, 255, 255, 0.3); -} -button.btn.btn-primary.w-100 { - color: #000000; - padding: 11px; - border-radius: 30px; - border: 1px solid #fff; - background: #ffffff; -} -a { - color: #ffffff !important; - text-decoration: underline; -} -body .form-control { - display: block; - width: 100%; - min-width: 250px; - padding: 0.7375rem 0.75rem; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.4285714286; - color: inherit; - border: 0; - appearance: none; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - background: #ffffff05; - border-radius: 0; - border-bottom: 1px solid #fff; -} -label.form-label { - display: none; - color: #fff; -} -span.form-label-description { - margin-top: 10px; - margin-bottom: 10px; - text-align: left; - width: 100%; - display: block; -} -.card-body { - margin: 0 auto; - width: 350px; - max-width: 100%; -} -.col-auto.offset-md-1.p-2.text-center { - display: none; -} -.form-control:focus { - color: inherit; - background-color: #fdfdfd; - border-color: #013453; - outline: 0; - box-shadow: 0 0 0 0.25rem #5e5e5e3b; -} diff --git a/themes/night/login.logo.png b/themes/night/login.logo.png deleted file mode 100644 index 31324fb..0000000 Binary files a/themes/night/login.logo.png and /dev/null differ diff --git a/themes/night/login.preview.jpg b/themes/night/login.preview.jpg deleted file mode 100644 index d1f5244..0000000 Binary files a/themes/night/login.preview.jpg and /dev/null differ diff --git a/themes/night/login.scss b/themes/night/login.scss deleted file mode 100644 index 173d4c7..0000000 --- a/themes/night/login.scss +++ /dev/null @@ -1,151 +0,0 @@ -/*Tema 4 - Night*/ - -$btn-background-color: #ffffff !default; -$btn-foreground-color: #000000 !default; - -body .card { - border: 0; - background: transparent; -} - -.col-md-5 { - margin: 0 !important; - width: 100%; -} - -h2.card-header.text-center.mb-4, -div.card-header:has(.mx-auto) { - display: none; -} - -span.glpi-logo.mb-4 { - margin: 0 !important; -} - -.btn-primary, -.btn-outline-primary, -.btn-ghost-primary { - --tblr-btn-color: #71090e; - --tblr-btn-color-interactive: #8d0a10; - --tblr-btn-color-text: #1e293b; -} - -.mb-3, -.mb-4 { - position: relative; -} - -.mb-3:after { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: "\f007"; - position: absolute; - right: 20px; - color: #fff; - top: 12px; -} - -.mb-4:before { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: "\f023"; - position: absolute; - right: 20px; - color: #fff; - top: 12px; -} - -.col-md-5 { - margin: 0 !important; - width: 100%; - max-width: 289px; -} - -label.form-label { - color: #fff; -} - -.card-body { - padding: 0px !important; - margin: auto; -} - -.flex-fill.d-flex.flex-column.justify-content-center.py-4.mt-4 { - width: 50%; - background: transparent; - border-radius: 30px; - margin: 0; - outline-offset: 0; - box-shadow: 0px 6px 13px 1px #00000047; - left: 0; - height: 100% !important; - top: -32px; - border-radius: 0; - position: absolute; - padding-top: 130px !important; - padding-bottom: 110px !important; - background: rgb(255 255 255 / 4%); - box-shadow: 0 4px 30px rgb(0 0 0 / 10%); - backdrop-filter: blur(5px); - -webkit-backdrop-filter: blur(5px); - border: 1px solid rgba(255, 255, 255, 0.3); -} - -button.btn.btn-primary.w-100 { - color: $btn-foreground-color; - padding: 11px; - border-radius: 30px; - border: 1px solid #fff; - background: $btn-background-color; -} - -a { - color: #ffffff !important; - text-decoration: underline; -} - -body .form-control { - display: block; - width: 100%; - min-width: 250px; - padding: 0.7375rem 0.75rem; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.4285714286; - color: inherit; - border: 0; - appearance: none; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - background: #ffffff05; - border-radius: 0; - border-bottom: 1px solid #fff; -} - -label.form-label { - display: none; - color: #fff; -} - -span.form-label-description { - margin-top: 10px; - margin-bottom: 10px; - text-align: left; - width: 100%; - display: block; -} - -.card-body { - margin: 0 auto; - width: 350px; - max-width: 100%; -} -.col-auto.offset-md-1.p-2.text-center { - display: none; -} -.form-control:focus { - color: inherit; - background-color: #fdfdfd; - border-color: #013453; - outline: 0; - box-shadow: 0 0 0 0.25rem #5e5e5e3b; -} diff --git a/themes/night/theme.json b/themes/night/theme.json deleted file mode 100644 index 64033b2..0000000 --- a/themes/night/theme.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "name": "Night", - "description": "Night Theme", - "variables": { - "btn-background-color": { - "name": "Cor de fundo dos Botões", - "default": "#ffffff" - }, - "btn-foreground-color": { - "name": "Cor do texto dos Botões", - "default": "#000000" - }, - "card-background-color": { - "name": "Cor do cartão", - "default": "" - } - } -} diff --git a/themes/nordic-minimal/login.css b/themes/nordic-minimal/login.css index b7f9d7a..3a76cae 100644 --- a/themes/nordic-minimal/login.css +++ b/themes/nordic-minimal/login.css @@ -6,7 +6,7 @@ body.login-page, main.page-anonymous { min-height: 100vh; 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-image: linear-gradient(color-mix(in srgb, #1e3a5f 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, #1e3a5f 5%, transparent) 1px, transparent 1px), radial-gradient(45% 60% at 25% 35%, color-mix(in srgb, #1e3a5f 16%, transparent) 0%, transparent 70%), radial-gradient(35% 45% at 10% 80%, color-mix(in srgb, #1e3a5f 12%, rgba(96, 165, 250, 0)) 0%, transparent 70%); background-size: 36px 36px, 36px 36px, 100% 100%, 100% 100%; background-attachment: fixed; } @@ -23,7 +23,7 @@ main.page-anonymous::before { transform: translateY(-50%); width: 340px; height: 340px; - border: 2px solid rgba(30, 58, 95, 0.14); + border: 2px solid color-mix(in srgb, #1e3a5f 14%, transparent); border-radius: 50%; pointer-events: none; } @@ -34,12 +34,12 @@ main.page-anonymous::after { top: calc(50% - 110px); width: 220px; height: 220px; - border: 2px dashed rgba(30, 58, 95, 0.2); + border: 2px dashed color-mix(in srgb, #1e3a5f 20%, transparent); border-radius: 50%; pointer-events: none; } -/* painel branco ancorado à direita, altura total */ +/* painel ancorado à direita, altura total */ .page-anonymous .flex-fill.d-flex.flex-column { padding: 0 !important; margin: 0 !important; @@ -57,7 +57,7 @@ main.page-anonymous::after { justify-content: center; background: #ffffff; padding: 2rem 3.2rem !important; - box-shadow: -32px 0 70px rgba(30, 58, 95, 0.16); + box-shadow: -32px 0 70px color-mix(in srgb, #1e3a5f 16%, transparent); } .page-anonymous .container-tight .text-center { @@ -107,7 +107,7 @@ main.page-anonymous::after { .page-anonymous .form-select:focus { background: #ffffff; border-color: #1e3a5f; - box-shadow: 0 0 0 0.25rem rgba(30, 58, 95, 0.12); + box-shadow: 0 0 0 0.25rem color-mix(in srgb, #1e3a5f 12%, transparent); } .page-anonymous .select2-container .select2-selection { diff --git a/themes/nordic-minimal/login.scss b/themes/nordic-minimal/login.scss index 82e58e5..60d92ab 100644 --- a/themes/nordic-minimal/login.scss +++ b/themes/nordic-minimal/login.scss @@ -3,17 +3,20 @@ $btn-background-color: #1e3a5f !default; $btn-foreground-color: #ffffff !default; +$page-background-color: #eef2f6 !default; +$panel-background-color: #ffffff !default; +$decor-color: #1e3a5f !default; body.welcome-anonymous, body.login-page, main.page-anonymous { min-height: 100vh; - background-color: #eef2f6; + background-color: $page-background-color; 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%); + linear-gradient(color-mix(in srgb, #{$decor-color} 5%, transparent) 1px, transparent 1px), + linear-gradient(90deg, color-mix(in srgb, #{$decor-color} 5%, transparent) 1px, transparent 1px), + radial-gradient(45% 60% at 25% 35%, color-mix(in srgb, #{$decor-color} 16%, transparent) 0%, transparent 70%), + radial-gradient(35% 45% at 10% 80%, color-mix(in srgb, #{$decor-color} 12%, #60a5fa00) 0%, transparent 70%); background-size: 36px 36px, 36px 36px, 100% 100%, 100% 100%; background-attachment: fixed; } @@ -30,7 +33,7 @@ main.page-anonymous { transform: translateY(-50%); width: 340px; height: 340px; - border: 2px solid rgba(30, 58, 95, 0.14); + border: 2px solid color-mix(in srgb, #{$decor-color} 14%, transparent); border-radius: 50%; pointer-events: none; } @@ -42,13 +45,13 @@ main.page-anonymous { top: calc(50% - 110px); width: 220px; height: 220px; - border: 2px dashed rgba(30, 58, 95, 0.20); + border: 2px dashed color-mix(in srgb, #{$decor-color} 20%, transparent); border-radius: 50%; pointer-events: none; } } -/* painel branco ancorado à direita, altura total */ +/* painel ancorado à direita, altura total */ .page-anonymous .flex-fill.d-flex.flex-column { padding: 0 !important; margin: 0 !important; @@ -64,9 +67,9 @@ main.page-anonymous { display: flex; flex-direction: column; justify-content: center; - background: #ffffff; + background: $panel-background-color; padding: 2rem 3.2rem !important; - box-shadow: -32px 0 70px rgba(30, 58, 95, 0.16); + box-shadow: -32px 0 70px color-mix(in srgb, #{$decor-color} 16%, transparent); } .page-anonymous .container-tight .text-center { @@ -116,7 +119,7 @@ main.page-anonymous { &:focus { background: #ffffff; border-color: $btn-background-color; - box-shadow: 0 0 0 0.25rem rgba(30, 58, 95, 0.12); + box-shadow: 0 0 0 0.25rem color-mix(in srgb, #{$btn-background-color} 12%, transparent); } } @@ -147,7 +150,7 @@ main.page-anonymous { } .page-anonymous a { - color: #1e3a5f !important; + color: $btn-background-color !important; } @media (max-width: 900px) { diff --git a/themes/nordic-minimal/theme.json b/themes/nordic-minimal/theme.json index c8cef80..4d44cad 100644 --- a/themes/nordic-minimal/theme.json +++ b/themes/nordic-minimal/theme.json @@ -1,6 +1,6 @@ { "name": "Nordic Minimal", - "description": "Minimalista claro escandinavo com acento azul profundo", + "description": "Split-screen minimalista com painel branco à direita", "variables": { "btn-background-color": { "name": "Cor de fundo dos Botões", @@ -13,6 +13,18 @@ "card-background-color": { "name": "Cor do cartão", "default": "" + }, + "page-background-color": { + "name": "Cor de fundo da página", + "default": "#eef2f6" + }, + "panel-background-color": { + "name": "Cor do painel de login", + "default": "#ffffff" + }, + "decor-color": { + "name": "Cor da decoração (grid e anéis)", + "default": "#1e3a5f" } } } diff --git a/themes/original/login.css b/themes/original/login.css deleted file mode 100644 index f7cf1c3..0000000 --- a/themes/original/login.css +++ /dev/null @@ -1,113 +0,0 @@ -@charset "UTF-8"; -/*Tema 10 - Original*/ -body .card { - border: 0; - background: transparent; -} -.flex-fill.d-flex.flex-column.justify-content-center.py-4.mt-4 { - width: 525px; - background: transparent; - margin: 0px auto !important; -} -.col-md-5 { - margin: 0 !important; - width: 100%; -} -h2.card-header.text-center.mb-4, div.card-header:has(.mx-auto) { - display: none; -} -.flex-fill.d-flex.flex-column.justify-content-center.py-4.mt-4 { - min-height: 711px; - width: 525px; - background: transparent; - border-radius: 0; - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(5px); - -webkit-backdrop-filter: blur(5px); - border: 1px solid rgba(255, 255, 255, 0.3); - margin: 0px auto !important; - height: 100% !important; -} -span.glpi-logo.mb-4 { - margin: 0 !important; -} -.btn-primary, .btn-outline-primary, .btn-ghost-primary { - --tblr-btn-color: #71090e; - --tblr-btn-color-interactive: #8d0a10; - --tblr-btn-color-text: #1e293b; -} -.mb-3, .mb-4 { - position: relative; -} -.mb-3:after { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: ""; - position: absolute; - right: 20px; - color: #6a696982; - top: 12px; -} -.mb-4:before { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: ""; - position: absolute; - right: 20px; - color: #6a696982; - top: 12px; -} -.col-md-5 { - margin: 0 !important; - width: 100%; - max-width: 289px; -} -body .form-control { - display: block; - width: 100%; - padding: 0.7375rem 0.75rem; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.4285714286; - color: inherit; - background-color: #fdfdfd; - background-clip: padding-box; - border: 1px solid #d9dbde; - appearance: none; - border-radius: 34px; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -} -label.form-label { - color: #fff; -} -a { - color: #73fff9 !important; - text-decoration: none; -} -body { - background: #1c2e63; - background: linear-gradient(360deg, #1c2e63 65%, #3a5693 65%); -} -button.btn.btn-primary.w-100 { - background: #fdc95c; - color: #1c2e63; - padding: 11px; - border-radius: 30px; - border: 1px solid #fff; -} -label.form-label { - display: none; - color: #fff; -} -span.form-label-description { - margin-top: 10px; - margin-bottom: 10px; - text-align: left; - width: 100%; - display: block; -} -.card-body { - margin: 0 auto; - width: 350px; - max-width: 100%; -} diff --git a/themes/original/login.logo.png b/themes/original/login.logo.png deleted file mode 100644 index 31324fb..0000000 Binary files a/themes/original/login.logo.png and /dev/null differ diff --git a/themes/original/login.preview.jpg b/themes/original/login.preview.jpg deleted file mode 100644 index 7df9240..0000000 Binary files a/themes/original/login.preview.jpg and /dev/null differ diff --git a/themes/original/login.scss b/themes/original/login.scss deleted file mode 100644 index d308590..0000000 --- a/themes/original/login.scss +++ /dev/null @@ -1,136 +0,0 @@ -/*Tema 10 - Original*/ - -$btn-background-color: #fdc95c !default; -$btn-foreground-color: #1c2e63 !default; - -body .card { - border: 0; - background: transparent; -} - -.flex-fill.d-flex.flex-column.justify-content-center.py-4.mt-4 { - width: 525px; - background: transparent; - margin: 0px auto !important; -} - -.col-md-5 { - margin: 0 !important; - width: 100%; -} - -h2.card-header.text-center.mb-4, -div.card-header:has(.mx-auto) { - display: none; -} - -.flex-fill.d-flex.flex-column.justify-content-center.py-4.mt-4 { - min-height: 711px; - width: 525px; - background: transparent; - border-radius: 0; - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - -webkit-backdrop-filter: blur(5px); - border: 1px solid rgba(255, 255, 255, 0.3); - margin: 0px auto !important; - height: 100% !important; -} - -span.glpi-logo.mb-4 { - margin: 0 !important; -} - -.btn-primary, -.btn-outline-primary, -.btn-ghost-primary { - --tblr-btn-color: #71090e; - --tblr-btn-color-interactive: #8d0a10; - --tblr-btn-color-text: #1e293b; -} - -.mb-3, -.mb-4 { - position: relative; -} - -.mb-3:after { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: "\f007"; - position: absolute; - right: 20px; - color: #6a696982; - top: 12px; -} - -.mb-4:before { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: "\f023"; - position: absolute; - right: 20px; - color: #6a696982; - top: 12px; -} - -.col-md-5 { - margin: 0 !important; - width: 100%; - max-width: 289px; -} - -body .form-control { - display: block; - width: 100%; - padding: 0.7375rem 0.75rem; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.4285714286; - color: inherit; - background-color: #fdfdfd; - background-clip: padding-box; - border: 1px solid #d9dbde; - appearance: none; - border-radius: 34px; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -} - -label.form-label { - color: #fff; -} - -a { - color: #73fff9 !important; - text-decoration: none; -} - -body { - background: #1c2e63; - background: linear-gradient(360deg, #1c2e63 65%, #3a5693 65%); -} - -button.btn.btn-primary.w-100 { - background: $btn-background-color; - color: $btn-foreground-color; - padding: 11px; - border-radius: 30px; - border: 1px solid #fff; -} -label.form-label { - display: none; - color: #fff; -} - -span.form-label-description { - margin-top: 10px; - margin-bottom: 10px; - text-align: left; - width: 100%; - display: block; -} - -.card-body { - margin: 0 auto; - width: 350px; - max-width: 100%; -} diff --git a/themes/original/theme.json b/themes/original/theme.json deleted file mode 100644 index 2c284f7..0000000 --- a/themes/original/theme.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "name": "GLPI Original", - "description": "GLPI Original Theme", - "variables": { - "btn-background-color": { - "name": "Cor de fundo dos Botões", - "default": "#fdc95c" - }, - "btn-foreground-color": { - "name": "Cor do texto dos Botões", - "default": "#1c2e63" - }, - "card-background-color": { - "name": "Cor do cartão", - "default": "" - } - } -} diff --git a/themes/power-red/login.background.jpg b/themes/power-red/login.background.jpg deleted file mode 100644 index e3822a2..0000000 Binary files a/themes/power-red/login.background.jpg and /dev/null differ diff --git a/themes/power-red/login.css b/themes/power-red/login.css deleted file mode 100644 index 786838f..0000000 --- a/themes/power-red/login.css +++ /dev/null @@ -1,94 +0,0 @@ -@charset "UTF-8"; -/*Tema - Power Red*/ -body .card { - border: 0; - background: transparent; -} -.flex-fill.d-flex.flex-column.justify-content-center.py-4.mt-4 { - width: 525px; - background: #ffffffde; - margin: 0px auto !important; -} -.col-md-5 { - margin: 0 !important; - width: 100%; -} -h2.card-header.text-center.mb-4, div.card-header:has(.mx-auto) { - display: none; -} -.flex-fill.d-flex.flex-column.justify-content-center.py-4.mt-4 { - min-height: 711px; - width: 525px; - background: rgba(255, 255, 255, 0.9); - border-radius: 0; - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(5px); - -webkit-backdrop-filter: blur(5px); - border: 1px solid rgba(255, 255, 255, 0.3); - margin: 0px auto !important; - height: 100% !important; - top: 0 !important; -} -span.glpi-logo.mb-4 { - margin: 0 !important; -} -button.btn.btn-primary.w-100 { - color: #ffffff; - padding: 11px; - border-radius: 30px; - background: #013453; - border: 0; -} -.btn-primary, .btn-outline-primary, .btn-ghost-primary { - --tblr-btn-color: #71090e; - --tblr-btn-color-interactive: #8d0a10; - --tblr-btn-color-text: #1e293b; -} -body .form-control:focus { - color: inherit; - background-color: #fdfdfd; - border-color: #b90e16; - outline: 0; - box-shadow: 0 0 0 0.25rem rgba(185, 14, 22, 0.27); -} -.mb-3, .mb-4 { - position: relative; -} -.mb-3:after { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: ""; - position: absolute; - right: 20px; - color: #6a6969; - top: 8px; -} -.mb-4:before { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: ""; - position: absolute; - right: 20px; - color: #6a6969; - top: 8px; -} -body .card { - border: 0 none; - box-shadow: none !important; -} -label.form-label { - display: none; - color: #fff; -} -span.form-label-description { - margin-top: 10px; - margin-bottom: 10px; - text-align: left; - width: 100%; - display: block; -} -.card-body { - margin: 0 auto; - width: 350px; - max-width: 100%; -} diff --git a/themes/power-red/login.logo.png b/themes/power-red/login.logo.png deleted file mode 100644 index 772ac73..0000000 Binary files a/themes/power-red/login.logo.png and /dev/null differ diff --git a/themes/power-red/login.preview.jpg b/themes/power-red/login.preview.jpg deleted file mode 100644 index 42cd614..0000000 Binary files a/themes/power-red/login.preview.jpg and /dev/null differ diff --git a/themes/power-red/login.scss b/themes/power-red/login.scss deleted file mode 100644 index fabd1e7..0000000 --- a/themes/power-red/login.scss +++ /dev/null @@ -1,113 +0,0 @@ -/*Tema - Power Red*/ - -$btn-background-color: #013453 !default; -$btn-foreground-color: #ffffff !default; - -body .card { - border: 0; - background: transparent; -} - -.flex-fill.d-flex.flex-column.justify-content-center.py-4.mt-4 { - width: 525px; - background: #ffffffde; - margin: 0px auto !important; -} - -.col-md-5 { - margin: 0 !important; - width: 100%; -} - -h2.card-header.text-center.mb-4, -div.card-header:has(.mx-auto) { - display: none; -} - -.flex-fill.d-flex.flex-column.justify-content-center.py-4.mt-4 { - min-height: 711px; - width: 525px; - background: rgb(255 255 255 / 90%); - border-radius: 0; - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(5px); - -webkit-backdrop-filter: blur(5px); - border: 1px solid rgba(255, 255, 255, 0.3); - margin: 0px auto !important; - height: 100% !important; - top: 0 !important; -} - -span.glpi-logo.mb-4 { - margin: 0 !important; -} - -button.btn.btn-primary.w-100 { - color: $btn-foreground-color; - padding: 11px; - border-radius: 30px; - background: $btn-background-color; - border: 0; -} - -.btn-primary, -.btn-outline-primary, -.btn-ghost-primary { - --tblr-btn-color: #71090e; - --tblr-btn-color-interactive: #8d0a10; - --tblr-btn-color-text: #1e293b; -} - -body .form-control:focus { - color: inherit; - background-color: #fdfdfd; - border-color: #b90e16; - outline: 0; - box-shadow: 0 0 0 0.25rem rgb(185 14 22 / 27%); -} - -.mb-3, -.mb-4 { - position: relative; -} - -.mb-3:after { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: "\f007"; - position: absolute; - right: 20px; - color: #6a6969; - top: 8px; -} - -.mb-4:before { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: "\f023"; - position: absolute; - right: 20px; - color: #6a6969; - top: 8px; -} - -body .card { - border: 0 none; - box-shadow: none !important; -} -label.form-label { - display: none; - color: #fff; -} -span.form-label-description { - margin-top: 10px; - margin-bottom: 10px; - text-align: left; - width: 100%; - display: block; -} -.card-body { - margin: 0 auto; - width: 350px; - max-width: 100%; -} diff --git a/themes/power-red/theme.json b/themes/power-red/theme.json deleted file mode 100644 index b123eda..0000000 --- a/themes/power-red/theme.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "name": "Power Red", - "description": "Power Red Theme", - "variables": { - "btn-background-color": { - "name": "Cor de fundo dos Botões", - "default": "#013453" - }, - "btn-foreground-color": { - "name": "Cor do texto dos Botões", - "default": "#ffffff" - }, - "card-background-color": { - "name": "Cor do cartão", - "default": "" - } - } -} diff --git a/themes/prompt-developer/login.background.jpg b/themes/prompt-developer/login.background.jpg deleted file mode 100644 index 6acfb81..0000000 Binary files a/themes/prompt-developer/login.background.jpg and /dev/null differ diff --git a/themes/prompt-developer/login.css b/themes/prompt-developer/login.css deleted file mode 100644 index 24efb33..0000000 --- a/themes/prompt-developer/login.css +++ /dev/null @@ -1,127 +0,0 @@ -@charset "UTF-8"; -/*Tema - Prompt Developer*/ -body .card { - border: 0; - background: transparent; -} -.col-md-5 { - margin: 0 !important; - width: 100%; -} -h2.card-header.text-center.mb-4, div.card-header:has(.mx-auto) { - display: none; -} -span.glpi-logo.mb-4 { - margin: 0 !important; -} -.btn-primary, .btn-outline-primary, .btn-ghost-primary { - --tblr-btn-color: #71090e; - --tblr-btn-color-interactive: #8d0a10; - --tblr-btn-color-text: #1e293b; -} -.mb-3, .mb-4 { - position: relative; -} -.mb-3:after { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: ""; - position: absolute; - right: 20px; - color: #fff; - top: 12px; -} -.mb-4:before { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: ""; - position: absolute; - right: 20px; - color: #fff; - top: 12px; -} -.col-md-5 { - margin: 0 !important; - width: 100%; - max-width: 289px; -} -label.form-label { - color: #fff; -} -.card-body { - padding: 0px !important; - margin: auto; -} -.flex-fill.d-flex.flex-column.justify-content-center.py-4.mt-4 { - width: 50%; - background: transparent; - border-radius: 30px; - margin: 0; - outline-offset: 0; - box-shadow: 0px 6px 13px 1px #00000047; - height: 100% !important; - top: -32px; - border-radius: 0; - right: 1px !important; - position: absolute; - padding-top: 130px !important; - padding-bottom: 110px !important; - background: rgba(0, 0, 0, 0.38); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(5px); - -webkit-backdrop-filter: blur(5px); - border: 1px solid rgba(255, 255, 255, 0.3); -} -button.btn.btn-primary.w-100 { - color: #000000; - padding: 11px; - border-radius: 30px; - border: 1px solid #fff; - background: #ffffff; -} -a { - color: #ffffff !important; - text-decoration: underline; -} -body .form-control { - display: block; - width: 100%; - min-width: 250px; - padding: 0.7375rem 0.75rem; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.4285714286; - color: inherit; - border: 0; - appearance: none; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - background: #ffffff05; - border-radius: 0; - border-bottom: 1px solid #fff; -} -label.form-label { - display: none; - color: #fff; -} -span.form-label-description { - margin-top: 10px; - margin-bottom: 10px; - text-align: left; - width: 100%; - display: block; -} -.card-body { - margin: 0 auto; - width: 350px; - max-width: 100%; -} -.col-auto.offset-md-1.p-2.text-center { - display: none; -} -.form-control:focus { - color: inherit; - background-color: #fdfdfd; - border-color: #013453; - outline: 0; - box-shadow: 0 0 0 0.25rem #5e5e5e3b; -} diff --git a/themes/prompt-developer/login.logo.png b/themes/prompt-developer/login.logo.png deleted file mode 100644 index 31324fb..0000000 Binary files a/themes/prompt-developer/login.logo.png and /dev/null differ diff --git a/themes/prompt-developer/login.preview.jpg b/themes/prompt-developer/login.preview.jpg deleted file mode 100644 index d2493e6..0000000 Binary files a/themes/prompt-developer/login.preview.jpg and /dev/null differ diff --git a/themes/prompt-developer/login.scss b/themes/prompt-developer/login.scss deleted file mode 100644 index e80a726..0000000 --- a/themes/prompt-developer/login.scss +++ /dev/null @@ -1,148 +0,0 @@ -/*Tema - Prompt Developer*/ - -$btn-background-color: #ffffff !default; -$btn-foreground-color: #000000 !default; - -body .card { - border: 0; - background: transparent; -} - -.col-md-5 { - margin: 0 !important; - width: 100%; -} - -h2.card-header.text-center.mb-4, -div.card-header:has(.mx-auto) { - display: none; -} - -span.glpi-logo.mb-4 { - margin: 0 !important; -} - -.btn-primary, -.btn-outline-primary, -.btn-ghost-primary { - --tblr-btn-color: #71090e; - --tblr-btn-color-interactive: #8d0a10; - --tblr-btn-color-text: #1e293b; -} - -.mb-3, -.mb-4 { - position: relative; -} - -.mb-3:after { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: "\f007"; - position: absolute; - right: 20px; - color: #fff; - top: 12px; -} - -.mb-4:before { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: "\f023"; - position: absolute; - right: 20px; - color: #fff; - top: 12px; -} - -.col-md-5 { - margin: 0 !important; - width: 100%; - max-width: 289px; -} - -label.form-label { - color: #fff; -} - -.card-body { - padding: 0px !important; - margin: auto; -} - -.flex-fill.d-flex.flex-column.justify-content-center.py-4.mt-4 { - width: 50%; - background: transparent; - border-radius: 30px; - margin: 0; - outline-offset: 0; - box-shadow: 0px 6px 13px 1px #00000047; - height: 100% !important; - top: -32px; - border-radius: 0; - right: 1px !important; - position: absolute; - padding-top: 130px !important; - padding-bottom: 110px !important; - background: rgb(0 0 0 / 38%); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(5px); - -webkit-backdrop-filter: blur(5px); - border: 1px solid rgba(255, 255, 255, 0.3); -} - -button.btn.btn-primary.w-100 { - color: $btn-foreground-color; - padding: 11px; - border-radius: 30px; - border: 1px solid #fff; - background: $btn-background-color; -} - -a { - color: #ffffff !important; - text-decoration: underline; -} - -body .form-control { - display: block; - width: 100%; - min-width: 250px; - padding: 0.7375rem 0.75rem; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.4285714286; - color: inherit; - border: 0; - appearance: none; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - background: #ffffff05; - border-radius: 0; - border-bottom: 1px solid #fff; -} -label.form-label { - display: none; - color: #fff; -} -span.form-label-description { - margin-top: 10px; - margin-bottom: 10px; - text-align: left; - width: 100%; - display: block; -} -.card-body { - margin: 0 auto; - width: 350px; - max-width: 100%; -} -.col-auto.offset-md-1.p-2.text-center { - display: none; -} -.form-control:focus { - color: inherit; - background-color: #fdfdfd; - border-color: #013453; - outline: 0; - box-shadow: 0 0 0 0.25rem #5e5e5e3b; -} diff --git a/themes/prompt-developer/theme.json b/themes/prompt-developer/theme.json deleted file mode 100644 index 973c92f..0000000 --- a/themes/prompt-developer/theme.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "name": "Prompt Developer", - "description": "Prompt Developer Theme", - "variables": { - "btn-background-color": { - "name": "Cor de fundo dos Botões", - "default": "#0000003b" - }, - "btn-foreground-color": { - "name": "Cor do texto dos Botões", - "default": "#ffffff" - }, - "card-background-color": { - "name": "Cor do cartão", - "default": "" - } - } -} diff --git a/themes/sunset-mesh/login.css b/themes/sunset-mesh/login.css index 5033147..15b161b 100644 --- a/themes/sunset-mesh/login.css +++ b/themes/sunset-mesh/login.css @@ -6,7 +6,7 @@ body.login-page, main.page-anonymous { min-height: 100vh; background-color: #fff1eb; - background-image: radial-gradient(45% 55% at 10% 15%, rgba(255, 122, 89, 0.55) 0%, transparent 70%), radial-gradient(50% 60% at 90% 10%, rgba(255, 190, 92, 0.5) 0%, transparent 70%), radial-gradient(55% 65% at 85% 85%, rgba(196, 113, 245, 0.4) 0%, transparent 70%), radial-gradient(45% 55% at 15% 90%, rgba(250, 113, 133, 0.45) 0%, transparent 70%); + background-image: radial-gradient(45% 55% at 10% 15%, color-mix(in srgb, #ff7a59 55%, transparent) 0%, transparent 70%), radial-gradient(50% 60% at 90% 10%, color-mix(in srgb, #ffbe5c 50%, transparent) 0%, transparent 70%), radial-gradient(55% 65% at 85% 85%, color-mix(in srgb, #c471f5 40%, transparent) 0%, transparent 70%), radial-gradient(45% 55% at 15% 90%, color-mix(in srgb, #fa7185 45%, transparent) 0%, transparent 70%); background-attachment: fixed; } @@ -94,12 +94,12 @@ main.page-anonymous { font-weight: 700; letter-spacing: 0.02em; margin-top: 0.5rem; - box-shadow: 0 14px 30px rgba(31, 18, 53, 0.35); + box-shadow: 0 14px 30px color-mix(in srgb, #1f1235 35%, transparent); transition: transform 0.15s ease, box-shadow 0.15s ease; } .page-anonymous .btn.btn-primary:hover { transform: translateY(-2px); - box-shadow: 0 20px 40px rgba(31, 18, 53, 0.45); + box-shadow: 0 20px 40px color-mix(in srgb, #1f1235 45%, transparent); } .page-anonymous .text-muted, diff --git a/themes/sunset-mesh/login.scss b/themes/sunset-mesh/login.scss index 52c09b5..af2e39e 100644 --- a/themes/sunset-mesh/login.scss +++ b/themes/sunset-mesh/login.scss @@ -3,17 +3,23 @@ $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: #fff1eb; + background-color: $page-background-color; background-image: - radial-gradient(45% 55% at 10% 15%, rgba(255, 122, 89, 0.55) 0%, transparent 70%), - radial-gradient(50% 60% at 90% 10%, rgba(255, 190, 92, 0.50) 0%, transparent 70%), - radial-gradient(55% 65% at 85% 85%, rgba(196, 113, 245, 0.40) 0%, transparent 70%), - radial-gradient(45% 55% at 15% 90%, rgba(250, 113, 133, 0.45) 0%, transparent 70%); + 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; } @@ -70,7 +76,7 @@ main.page-anonymous { &:focus { background: transparent; - border-bottom-color: #7828c8; + border-bottom-color: $accent-color; box-shadow: none; outline: 0; } @@ -102,12 +108,12 @@ main.page-anonymous { font-weight: 700; letter-spacing: 0.02em; margin-top: 0.5rem; - box-shadow: 0 14px 30px rgba(31, 18, 53, 0.35); + 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 rgba(31, 18, 53, 0.45); + box-shadow: 0 20px 40px color-mix(in srgb, #{$btn-background-color} 45%, transparent); } } @@ -117,6 +123,6 @@ main.page-anonymous { } .page-anonymous a { - color: #7828c8 !important; + color: $accent-color !important; font-weight: 600; } diff --git a/themes/sunset-mesh/theme.json b/themes/sunset-mesh/theme.json index 8fd66d1..fe6ef95 100644 --- a/themes/sunset-mesh/theme.json +++ b/themes/sunset-mesh/theme.json @@ -1,6 +1,6 @@ { "name": "Sunset Mesh", - "description": "Mesh gradient quente em coral, âmbar e violeta", + "description": "Borderless sobre mesh gradient quente", "variables": { "btn-background-color": { "name": "Cor de fundo dos Botões", @@ -13,6 +13,30 @@ "card-background-color": { "name": "Cor do cartão", "default": "" + }, + "page-background-color": { + "name": "Cor de fundo da página", + "default": "#fff1eb" + }, + "accent-color": { + "name": "Cor de destaque (links e foco)", + "default": "#7828c8" + }, + "mesh-color-1": { + "name": "Mesh — cor 1", + "default": "#ff7a59" + }, + "mesh-color-2": { + "name": "Mesh — cor 2", + "default": "#ffbe5c" + }, + "mesh-color-3": { + "name": "Mesh — cor 3", + "default": "#c471f5" + }, + "mesh-color-4": { + "name": "Mesh — cor 4", + "default": "#fa7185" } } }