TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-04-14 20:36:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(login): checkbox, label, container styles (#3732)

Browse Source 
fix: checkbox, label styles
This commit is contained in:
Max Peintner 2022-05-31 09:20:39 +02:00 committed by GitHub
parent 47feced1cb
commit ac65d9d331
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 328 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
internal/api/ui/login/static/resources/themes/scss/styles/account_selection/account_selection.scss
View File

@ -62,6 +62,11 @@ $lgn-container-margin: 0px auto 50px auto;
i { i {
font-size: 1.2rem; font-size: 1.2rem;
&.account-add {
font-size: 1.4rem;
margin-left: 3px;
}
} }
} }
} }

102
internal/api/ui/login/static/resources/themes/scss/styles/checkbox/checkbox_base.scss
View File

@ -1,54 +1,60 @@
$lgn-checkbox-font-size: 14px !default; $lgn-checkbox-font-size: 14px !default;
@mixin lgn-checkbox-base { @mixin lgn-checkbox-base {
display: inline-block; display: inline-block;
position: relative; position: relative;
margin: 0 0 10px; margin: 0 0 10px;
font-size: $lgn-checkbox-font-size; font-size: $lgn-checkbox-font-size;
line-height: 24px; line-height: 24px;
box-sizing: border-box;
input[type="checkbox"] {
position: absolute;
top: 4px;
left: 0;
width: 16px;
height: 16px;
opacity: 0;
z-index: 0;
box-sizing: inherit; box-sizing: inherit;
margin: 2px;
input[type='checkbox'] { }
position: absolute;
top: 4px; // Unchecked
left: 0; label {
width: 16px; display: block;
height: 16px; padding: 0 0 0 30px;
opacity: 0; cursor: pointer;
z-index: 0; box-sizing: inherit;
box-sizing: inherit; font-size: $lgn-checkbox-font-size;
line-height: 28px;
a {
text-decoration: underline;
} }
// Unchecked &:before {
label { content: "";
display: block; position: absolute;
padding: 0 0 0 30px; top: 6px;
cursor: pointer; left: 0;
box-sizing: inherit; width: 16px;
font-size: $lgn-checkbox-font-size; height: 16px;
line-height: 28px; box-sizing: border-box;
border-radius: 2px;
&:before { transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
content: ''; transition-property: background-color, border-color;
position: absolute; }
top: 4px;
left: 0; &:after {
width: 16px; content: "";
height: 16px; position: absolute;
border-radius: 2px; top: 7px;
transition: all .28s cubic-bezier(.4, 0, .2, 1); left: 5px;
transition-property: background-color, border-color; width: 4px;
} height: 10px;
transform: rotate(45deg);
&:after { transition: border-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
content: ''; }
position: absolute; }
top: 5px;
left: 5px;
width: 6px;
height: 12px;
transform: rotate(45deg);
transition: border-color .28s cubic-bezier(.4, 0, .2, 1);
}
}
} }

69
internal/api/ui/login/static/resources/themes/scss/styles/checkbox/checkbox_theme.scss
View File

@ -1,45 +1,44 @@
@import '../theming/theming'; @import "../theming/theming";
@import 'checkbox'; @import "checkbox";
@mixin lgn-checkbox-theme() { @mixin lgn-checkbox-theme() {
@include lgn-checkbox-color(); @include lgn-checkbox-color();
} }
@mixin lgn-checkbox-color() { @mixin lgn-checkbox-color() {
input[type="checkbox"] {
position: absolute;
top: 4px;
left: 0;
width: 16px;
height: 16px;
opacity: 0;
z-index: 0;
}
input[type='checkbox'] { // Unchecked
position: absolute; .lgn-checkbox label {
top: 4px; &:before {
left: 0; background-color: transparent;
width: 16px; border: 2px solid var(--zitadel-color-input-border);
height: 16px;
opacity: 0;
z-index: 0;
} }
// Unchecked &:after {
.lgn-checkbox label { border-bottom: 2px solid transparent;
&:before { border-right: 2px solid transparent;
background-color: transparent; background: transparent;
border: 2px solid var(--zitadel-color-input-border);
}
&:after {
border-bottom: 2px solid transparent;
border-right: 2px solid transparent;
background: transparent;
}
} }
}
// Checked
input[type='checkbox']:checked + label { // Checked
&:before { input[type="checkbox"]:checked + label {
background-color: var(--zitadel-color-primary); &:before {
border-color: var(--zitadel-color-primary); background-color: var(--zitadel-color-primary);
} border-color: var(--zitadel-color-primary);
&:after {
border-color: #fff;
}
} }
&:after {
border-color: #fff; // TODO replace with contrast to background color
}
}
} }

204
internal/api/ui/login/static/resources/themes/scss/styles/container/container.scss
View File

@ -1,125 +1,125 @@
$lgn-container-max-width: 400px; $lgn-container-max-width: 440px;
$lgn-container-padding: 20px; $lgn-container-padding: 20px;
$lgn-container-margin: 0 auto 0 auto; $lgn-container-margin: 0 auto 0 auto;
$lgn-container-top-offset: 100px; $lgn-container-top-offset: 100px;
$lgn-container-bottom-margin: 50px; $lgn-container-bottom-margin: 50px;
.lgn-max-width-wrapper { .lgn-max-width-wrapper {
max-width: $lgn-container-max-width; max-width: $lgn-container-max-width;
margin: auto; margin: auto;
margin-top: 50px; margin-top: 50px;
margin-bottom: $lgn-container-bottom-margin; margin-bottom: $lgn-container-bottom-margin;
display: block; display: block;
@media only screen and (min-width: 600px) { @media only screen and (min-width: 600px) {
margin-top: $lgn-container-top-offset; margin-top: $lgn-container-top-offset;
} }
} }
.content-container { .content-container {
position: relative; // used to position a button element relative to the left upper corner of the content wrapper position: relative; // used to position a button element relative to the left upper corner of the content wrapper
display: block; display: block;
margin: $lgn-container-margin; margin: $lgn-container-margin;
padding: $lgn-container-padding; padding: $lgn-container-padding;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
.lgn-head { .lgn-head {
h1 { h1 {
text-align: center; text-align: center;
} }
p {
text-align: center;
}
}
.lgn-actions {
display: flex;
align-items: center;
padding: 0.5rem 0;
margin-top: 1rem;
// this is used to reverse the submit button order.
//The form submits the htmls first element thus for displaying the desired button on the right side, items have to be reversed.
&.lgn-reverse-order {
flex-direction: row-reverse;
}
.fill-space {
flex: 1;
}
}
.lgn-row {
display: flex;
align-items: center;
padding: 0;
// this is used to reverse the submit button order.
//The form submits the htmls first element thus for displaying the desired button on the right side, items have to be reversed.
&.lgn-reverse-order {
flex-direction: row-reverse;
}
.fill-space {
flex: 1;
}
}
.lgn-login-profile {
margin-bottom: 0.5rem;
.lgn-profile-image {
display: block;
margin: 0.5rem;
}
.lgn-names {
border-width: 1px;
border-style: solid;
border-radius: 50vw;
display: flex;
align-items: center;
.inline-block {
display: inline-block;
margin: 0 2px;
}
.lgn-displayname {
margin: 0.5rem 1rem;
}
.lgn-loginname {
p { p {
text-align: center; margin: 0.5rem 1rem;
} }
}
} }
}
.lgn-actions { .lgn-left-action {
display: flex; position: absolute;
align-items: center; left: 1rem;
padding: .5rem 0; top: -75px;
margin-top: 1rem; transform: translateY(-50%);
}
// this is used to reverse the submit button order. .lgn-register-options {
//The form submits the htmls first element thus for displaying the desired button on the right side, items have to be reversed. display: flex;
&.lgn-reverse-order { flex-direction: column;
flex-direction: row-reverse; }
}
.fill-space { .lgn-mfa-other {
flex: 1; display: flex;
} flex-direction: column;
}
button {
.lgn-row { width: 100%;
display: flex; margin: 0.5rem 0;
align-items: center;
padding: 0;
// this is used to reverse the submit button order.
//The form submits the htmls first element thus for displaying the desired button on the right side, items have to be reversed.
&.lgn-reverse-order {
flex-direction: row-reverse;
}
.fill-space {
flex: 1;
}
}
.lgn-login-profile {
margin-bottom: .5rem;
.lgn-profile-image {
display: block;
margin: .5rem;
}
.lgn-names {
border-width: 1px;
border-style: solid;
border-radius: 50vw;
display: flex;
align-items: center;
.inline-block {
display: inline-block;
margin: 0 2px;
}
.lgn-displayname{
margin: .5rem 1rem;
}
.lgn-loginname{
p {
margin: .5rem 1rem;
}
}
}
}
.lgn-left-action {
position: absolute;
left: 1rem;
top: -75px;
transform: translateY(-50%);
}
.lgn-register-options {
display: flex;
flex-direction: column;
}
.lgn-mfa-other {
display: flex;
flex-direction: column;
button {
width: 100%;
margin: .5rem 0;
}
} }
}
} }
i { i {
font-size: 1.2rem; font-size: 1.2rem;
} }

6
internal/api/ui/login/static/resources/themes/scss/styles/footer/footer_theme.scss
View File

@ -11,6 +11,12 @@
footer { footer {
background-color: var(--zitadel-color-footer-background); background-color: var(--zitadel-color-footer-background);
border-top: 1px solid var(--zitadel-color-footer-line); border-top: 1px solid var(--zitadel-color-footer-line);
backdrop-filter: blur(10px);
@-moz-document url-prefix() {
background-color: var(--zitadel-color-footer-background-mozilla);
backdrop-filter: none;
}
a { a {
color: var(--zitadel-color-font-500); color: var(--zitadel-color-font-500);

6
internal/api/ui/login/static/resources/themes/scss/styles/label/label.scss
View File

@ -1,5 +1,9 @@
@import 'label_base'; @import "label_base";
.lgn-label { .lgn-label {
@include lgn-label-base; @include lgn-label-base;
* {
font-size: 12px;
}
} }

35
internal/api/ui/login/static/resources/themes/scss/styles/list/list_theme.scss
View File

@ -1,24 +1,25 @@
@import '../theming/theming'; @import "../theming/theming";
@import 'list'; @import "list";
@mixin lgn-list-theme() { @mixin lgn-list-theme() {
@include lgn-list-color(); @include lgn-list-color();
} }
@mixin lgn-list-color() { @mixin lgn-list-color() {
.lgn-list, ul { .lgn-list,
li::before { ul {
color: var(--zitadel-color-primary); li::before {
} color: var(--zitadel-color-primary);
li i {
&.lgn-warn {
color: var(--zitadel-color-warn);
}
&.lgn-valid {
color: #85d996;
}
}
} }
li i {
&.lgn-warn {
color: var(--zitadel-color-warn);
}
&.lgn-valid {
color: var(--zitadel-color-success);
}
}
}
} }

29
internal/api/ui/login/static/resources/themes/scss/styles/select/select_base.scss
View File

@ -1,14 +1,19 @@
@mixin lgn-select-base { @mixin lgn-select-base {
// background-image: url(select_arrow.svg); // background-image: url(select_arrow.svg);
// background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20448%22%20enable-background%3D%22new%200%200%20256%20448%22%3E%3Cpath%20class%3D%22arrow%22%20d%3D%22M255.9%20168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2%200-7.9%201.6-11.2%204.8S0%20163.8%200%20168c0%204.4%201.6%208.2%204.8%2011.4l112%20112c3.1%203.1%206.8%204.6%2011.2%204.6%204.4%200%208.2-1.5%2011.4-4.6l112-112c3-3.2%204.5-7%204.5-11.4z%22%2F%3E%3C%2Fsvg%3E%0A"); // background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20448%22%20enable-background%3D%22new%200%200%20256%20448%22%3E%3Cpath%20class%3D%22arrow%22%20d%3D%22M255.9%20168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2%200-7.9%201.6-11.2%204.8S0%20163.8%200%20168c0%204.4%201.6%208.2%204.8%2011.4l112%20112c3.1%203.1%206.8%204.6%2011.2%204.6%204.4%200%208.2-1.5%2011.4-4.6l112-112c3-3.2%204.5-7%204.5-11.4z%22%2F%3E%3C%2Fsvg%3E%0A");
background-position: right 10px center; background-position: right 10px center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: auto 50%; background-size: auto 50%;
color: white; color: white;
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
&::-ms-expand {
display: none; &:not([disabled]) {
}; cursor: pointer;
}
&::-ms-expand {
display: none;
}
} }

8
internal/api/ui/login/static/resources/themes/scss/styles/success_label/success_label.scss
View File

@ -1,8 +1,6 @@
@import 'success_label_base'; @import "success_label_base";
.lgn-success-label { .lgn-success-label {
color: #0e6245; border-radius: 0.5rem;
background: #cbf4c9; padding: 0.5rem;
border-radius: .5rem;
padding: .5rem;
} }

17
internal/api/ui/login/static/resources/themes/scss/styles/success_label/success_label_theme.scss
View File

@ -1,16 +1,13 @@
@import '../theming/theming'; @import "../theming/theming";
@import 'success_label'; @import "success_label";
@mixin lgn-success-label-theme() { @mixin lgn-success-label-theme() {
@include lgn-success-label-color(); @include lgn-success-label-color();
} }
@mixin lgn-success-label-color() { @mixin lgn-success-label-color() {
.lgn-success-label {
.lgn-success-label { color: var(--zitadel-color-success);
color: var(--zitadel-color-success); background-color: var(--zitadel-color-success-background);
background-color: var(--zitadel-color-success-background); }
}
} }

12
internal/api/ui/login/static/resources/themes/scss/styles/vars.scss
View File

@ -42,7 +42,7 @@
--zitadel-color-background-900: rgb(142, 142, 142); --zitadel-color-background-900: rgb(142, 142, 142);
--zitadel-color-background-contrast: rgb(0, 0, 0); --zitadel-color-background-contrast: rgb(0, 0, 0);
--zitadel-color-footer-line: #e3e8ee; --zitadel-color-footer-line: rgba(0, 0, 0, 0.12);
--zitadel-color-input-background: #00000003; --zitadel-color-input-background: #00000003;
--zitadel-color-input-border: #00000040; --zitadel-color-input-border: #00000040;
@ -73,7 +73,10 @@
--zitadel-color-state-warn-font: #620e0e; --zitadel-color-state-warn-font: #620e0e;
--zitadel-color-state-warn-background: #ffc1c1; --zitadel-color-state-warn-background: #ffc1c1;
--zitadel-color-footer-background: #00000008; --zitadel-color-footer-background: #00000002;
--zitadel-color-footer-background-mozilla: var(
--zitadel-color-background-600
);
--zitadel-color-divider: rgba(0, 0, 0, 0.12); --zitadel-color-divider: rgba(0, 0, 0, 0.12);
@ -150,7 +153,7 @@
--zitadel-color-background-900: rgb(23, 23, 23); --zitadel-color-background-900: rgb(23, 23, 23);
--zitadel-color-background-contrast: rgb(255, 255, 255); --zitadel-color-background-contrast: rgb(255, 255, 255);
--zitadel-color-footer-line: #303131; --zitadel-color-footer-line: rgba(255, 255, 255, 0.12);
--zitadel-color-input-background: rgba(0, 0, 0, 0.2); --zitadel-color-input-background: rgba(0, 0, 0, 0.2);
--zitadel-color-input-border: #403e3e; --zitadel-color-input-border: #403e3e;
@ -182,6 +185,9 @@
--zitadel-color-state-warn-background: #af455359; --zitadel-color-state-warn-background: #af455359;
--zitadel-color-footer-background: #00000020; --zitadel-color-footer-background: #00000020;
--zitadel-color-footer-background-mozilla: var(
--zitadel-color-background-600
);
--zitadel-color-divider: rgba(255, 255, 255, 0.12); --zitadel-color-divider: rgba(255, 255, 255, 0.12);

90
internal/api/ui/login/static/resources/themes/zitadel/css/zitadel.css
View File

@ -38,7 +38,7 @@
--zitadel-color-background-800: rgb(168, 168, 168); --zitadel-color-background-800: rgb(168, 168, 168);
--zitadel-color-background-900: rgb(142, 142, 142); --zitadel-color-background-900: rgb(142, 142, 142);
--zitadel-color-background-contrast: rgb(0, 0, 0); --zitadel-color-background-contrast: rgb(0, 0, 0);
--zitadel-color-footer-line: #e3e8ee; --zitadel-color-footer-line: rgba(0, 0, 0, 0.12);
--zitadel-color-input-background: #00000003; --zitadel-color-input-background: #00000003;
--zitadel-color-input-border: #00000040; --zitadel-color-input-border: #00000040;
--zitadel-color-input-border-hover: #1a1b1b; --zitadel-color-input-border-hover: #1a1b1b;
@ -64,7 +64,10 @@
--zitadel-color-state-success-background: #cbf4c9; --zitadel-color-state-success-background: #cbf4c9;
--zitadel-color-state-warn-font: #620e0e; --zitadel-color-state-warn-font: #620e0e;
--zitadel-color-state-warn-background: #ffc1c1; --zitadel-color-state-warn-background: #ffc1c1;
--zitadel-color-footer-background: #00000008; --zitadel-color-footer-background: #00000002;
--zitadel-color-footer-background-mozilla: var(
--zitadel-color-background-600
);
--zitadel-color-divider: rgba(0, 0, 0, 0.12); --zitadel-color-divider: rgba(0, 0, 0, 0.12);
--zitadel-color-button-disabled: rgba(0, 0, 0, 0.26); --zitadel-color-button-disabled: rgba(0, 0, 0, 0.26);
--zitadel-color-button-disabled-background: rgba(0, 0, 0, 0.12); --zitadel-color-button-disabled-background: rgba(0, 0, 0, 0.12);
@ -131,7 +134,7 @@
--zitadel-color-background-800: rgb(25, 25, 25); --zitadel-color-background-800: rgb(25, 25, 25);
--zitadel-color-background-900: rgb(23, 23, 23); --zitadel-color-background-900: rgb(23, 23, 23);
--zitadel-color-background-contrast: rgb(255, 255, 255); --zitadel-color-background-contrast: rgb(255, 255, 255);
--zitadel-color-footer-line: #303131; --zitadel-color-footer-line: rgba(255, 255, 255, 0.12);
--zitadel-color-input-background: rgba(0, 0, 0, 0.2); --zitadel-color-input-background: rgba(0, 0, 0, 0.2);
--zitadel-color-input-border: #403e3e; --zitadel-color-input-border: #403e3e;
--zitadel-color-input-border-hover: #aeafb1; --zitadel-color-input-border-hover: #aeafb1;
@ -158,6 +161,9 @@
--zitadel-color-state-warn-font: #ffc1c1; --zitadel-color-state-warn-font: #ffc1c1;
--zitadel-color-state-warn-background: #af455359; --zitadel-color-state-warn-background: #af455359;
--zitadel-color-footer-background: #00000020; --zitadel-color-footer-background: #00000020;
--zitadel-color-footer-background-mozilla: var(
--zitadel-color-background-600
);
--zitadel-color-divider: rgba(255, 255, 255, 0.12); --zitadel-color-divider: rgba(255, 255, 255, 0.12);
--zitadel-color-button-disabled: rgba(0, 0, 0, 0.26); --zitadel-color-button-disabled: rgba(0, 0, 0, 0.26);
--zitadel-color-button-disabled-background: rgba(255, 255, 255, 0.12); --zitadel-color-button-disabled-background: rgba(255, 255, 255, 0.12);
@ -405,6 +411,9 @@ select::placeholder, .lgn-select::placeholder {
margin: 0 0 2px 0; margin: 0 0 2px 0;
font-weight: 400; font-weight: 400;
} }
.lgn-label * {
font-size: 12px;
}
@keyframes ripple { @keyframes ripple {
0% { 0% {
@ -558,7 +567,7 @@ a.block {
} }
.lgn-max-width-wrapper { .lgn-max-width-wrapper {
max-width: 400px; max-width: 440px;
margin: auto; margin: auto;
margin-top: 50px; margin-top: 50px;
margin-bottom: 50px; margin-bottom: 50px;
@ -708,6 +717,10 @@ i {
.lgn-account-selection .lgn-account i { .lgn-account-selection .lgn-account i {
font-size: 1.2rem; font-size: 1.2rem;
} }
.lgn-account-selection .lgn-account i.account-add {
font-size: 1.4rem;
margin-left: 3px;
}
.lgn-avatar { .lgn-avatar {
height: 32px; height: 32px;
@ -737,7 +750,7 @@ i {
margin: 0 0 10px; margin: 0 0 10px;
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
box-sizing: inherit; box-sizing: border-box;
} }
.lgn-checkbox input[type=checkbox] { .lgn-checkbox input[type=checkbox] {
position: absolute; position: absolute;
@ -748,6 +761,7 @@ i {
opacity: 0; opacity: 0;
z-index: 0; z-index: 0;
box-sizing: inherit; box-sizing: inherit;
margin: 2px;
} }
.lgn-checkbox label { .lgn-checkbox label {
display: block; display: block;
@ -757,13 +771,17 @@ i {
font-size: 14px; font-size: 14px;
line-height: 28px; line-height: 28px;
} }
.lgn-checkbox label a {
text-decoration: underline;
}
.lgn-checkbox label:before { .lgn-checkbox label:before {
content: ""; content: "";
position: absolute; position: absolute;
top: 4px; top: 6px;
left: 0; left: 0;
width: 16px; width: 16px;
height: 16px; height: 16px;
box-sizing: border-box;
border-radius: 2px; border-radius: 2px;
transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
transition-property: background-color, border-color; transition-property: background-color, border-color;
@ -771,10 +789,10 @@ i {
.lgn-checkbox label:after { .lgn-checkbox label:after {
content: ""; content: "";
position: absolute; position: absolute;
top: 5px; top: 7px;
left: 5px; left: 5px;
width: 6px; width: 4px;
height: 12px; height: 10px;
transform: rotate(45deg); transform: rotate(45deg);
transition: border-color 0.28s cubic-bezier(0.4, 0, 0.2, 1); transition: border-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
} }
@ -788,6 +806,9 @@ i {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
.lgn-select:not([disabled]), select:not([disabled]) {
cursor: pointer;
}
.lgn-select::-ms-expand, select::-ms-expand { .lgn-select::-ms-expand, select::-ms-expand {
display: none; display: none;
} }
@ -1092,8 +1113,6 @@ i {
font-weight: 400; font-weight: 400;
} }
.lgn-success-label { .lgn-success-label {
color: #0e6245;
background: #cbf4c9;
border-radius: 0.5rem; border-radius: 0.5rem;
padding: 0.5rem; padding: 0.5rem;
} }
@ -1304,6 +1323,9 @@ select::placeholder, .lgn-select::placeholder {
margin: 0 0 2px 0; margin: 0 0 2px 0;
font-weight: 400; font-weight: 400;
} }
.lgn-label * {
font-size: 12px;
}
@keyframes ripple { @keyframes ripple {
0% { 0% {
@ -1457,7 +1479,7 @@ a.block {
} }
.lgn-max-width-wrapper { .lgn-max-width-wrapper {
max-width: 400px; max-width: 440px;
margin: auto; margin: auto;
margin-top: 50px; margin-top: 50px;
margin-bottom: 50px; margin-bottom: 50px;
@ -1607,6 +1629,10 @@ i {
.lgn-account-selection .lgn-account i { .lgn-account-selection .lgn-account i {
font-size: 1.2rem; font-size: 1.2rem;
} }
.lgn-account-selection .lgn-account i.account-add {
font-size: 1.4rem;
margin-left: 3px;
}
.lgn-avatar { .lgn-avatar {
height: 32px; height: 32px;
@ -1636,7 +1662,7 @@ i {
margin: 0 0 10px; margin: 0 0 10px;
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
box-sizing: inherit; box-sizing: border-box;
} }
.lgn-checkbox input[type=checkbox] { .lgn-checkbox input[type=checkbox] {
position: absolute; position: absolute;
@ -1647,6 +1673,7 @@ i {
opacity: 0; opacity: 0;
z-index: 0; z-index: 0;
box-sizing: inherit; box-sizing: inherit;
margin: 2px;
} }
.lgn-checkbox label { .lgn-checkbox label {
display: block; display: block;
@ -1656,13 +1683,17 @@ i {
font-size: 14px; font-size: 14px;
line-height: 28px; line-height: 28px;
} }
.lgn-checkbox label a {
text-decoration: underline;
}
.lgn-checkbox label:before { .lgn-checkbox label:before {
content: ""; content: "";
position: absolute; position: absolute;
top: 4px; top: 6px;
left: 0; left: 0;
width: 16px; width: 16px;
height: 16px; height: 16px;
box-sizing: border-box;
border-radius: 2px; border-radius: 2px;
transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
transition-property: background-color, border-color; transition-property: background-color, border-color;
@ -1670,10 +1701,10 @@ i {
.lgn-checkbox label:after { .lgn-checkbox label:after {
content: ""; content: "";
position: absolute; position: absolute;
top: 5px; top: 7px;
left: 5px; left: 5px;
width: 6px; width: 4px;
height: 12px; height: 10px;
transform: rotate(45deg); transform: rotate(45deg);
transition: border-color 0.28s cubic-bezier(0.4, 0, 0.2, 1); transition: border-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
} }
@ -1687,6 +1718,9 @@ i {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
.lgn-select:not([disabled]), select:not([disabled]) {
cursor: pointer;
}
.lgn-select::-ms-expand, select::-ms-expand { .lgn-select::-ms-expand, select::-ms-expand {
display: none; display: none;
} }
@ -1991,8 +2025,6 @@ i {
font-weight: 400; font-weight: 400;
} }
.lgn-success-label { .lgn-success-label {
color: #0e6245;
background: #cbf4c9;
border-radius: 0.5rem; border-radius: 0.5rem;
padding: 0.5rem; padding: 0.5rem;
} }
@ -2266,7 +2298,7 @@ i {
font-weight: 400; font-weight: 400;
} }
.lgn-max-width-wrapper { .lgn-max-width-wrapper {
max-width: 400px; max-width: 440px;
margin: auto; margin: auto;
margin-top: 50px; margin-top: 50px;
margin-bottom: 50px; margin-bottom: 50px;
@ -2756,6 +2788,13 @@ input[type=checkbox]:checked + label:after {
footer { footer {
background-color: var(--zitadel-color-footer-background); background-color: var(--zitadel-color-footer-background);
border-top: 1px solid var(--zitadel-color-footer-line); border-top: 1px solid var(--zitadel-color-footer-line);
backdrop-filter: blur(10px);
}
@-moz-document url-prefix() {
footer {
background-color: var(--zitadel-color-footer-background-mozilla);
backdrop-filter: none;
}
} }
footer a { footer a {
color: var(--zitadel-color-font-500); color: var(--zitadel-color-font-500);
@ -2847,14 +2886,17 @@ a:not(.lgn-stroked-button):not(.lgn-button):not(.lgn-raised-button):hover, a:not
background-image: var(--zitadel-icon-select); background-image: var(--zitadel-icon-select);
} }
.lgn-list li::before, ul li::before { .lgn-list li::before,
ul li::before {
color: var(--zitadel-color-primary); color: var(--zitadel-color-primary);
} }
.lgn-list li i.lgn-warn, ul li i.lgn-warn { .lgn-list li i.lgn-warn,
ul li i.lgn-warn {
color: var(--zitadel-color-warn); color: var(--zitadel-color-warn);
} }
.lgn-list li i.lgn-valid, ul li i.lgn-valid { .lgn-list li i.lgn-valid,
color: #85d996; ul li i.lgn-valid {
color: var(--zitadel-color-success);
} }
.lgn-idp { .lgn-idp {

2
internal/api/ui/login/static/resources/themes/zitadel/css/zitadel.css.map
View File

File diff suppressed because one or more lines are too long

2
internal/api/ui/login/static/templates/select_user.html
View File

@ -53,7 +53,7 @@
<button type="submit" name="userID" value="0" class="lgn-account"> <button type="submit" name="userID" value="0" class="lgn-account">
<div class="left"> <div class="left">
<div class="lgn-avatar transparent"> <div class="lgn-avatar transparent">
<i class="lgn-icon-user-plus-solid"></i> <i class="lgn-icon-user-plus-solid account-add"></i>
</div> </div>
</div> </div>
<div class="lgn-names"> <div class="lgn-names">