mirror of
https://github.com/zitadel/zitadel.git
synced 2024-12-13 11:34:26 +00:00
fix(login): checkbox, label, container styles (#3732)
fix: checkbox, label styles
This commit is contained in:
Max Peintner
GitHub
parent
47feced1cb
commit
ac65d9d331
@ -62,6 +62,11 @@ $lgn-container-margin: 0px auto 50px auto;
|
||||
|
||||
i {
|
||||
font-size: 1.2rem;
|
||||
|
||||
&.account-add {
|
||||
font-size: 1.4rem;
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,54 +1,60 @@
|
||||
$lgn-checkbox-font-size: 14px !default;
|
||||
|
||||
@mixin lgn-checkbox-base {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin: 0 0 10px;
|
||||
font-size: $lgn-checkbox-font-size;
|
||||
line-height: 24px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin: 0 0 10px;
|
||||
font-size: $lgn-checkbox-font-size;
|
||||
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;
|
||||
|
||||
input[type='checkbox'] {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
box-sizing: inherit;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
// Unchecked
|
||||
label {
|
||||
display: block;
|
||||
padding: 0 0 0 30px;
|
||||
cursor: pointer;
|
||||
box-sizing: inherit;
|
||||
font-size: $lgn-checkbox-font-size;
|
||||
line-height: 28px;
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
// Unchecked
|
||||
label {
|
||||
display: block;
|
||||
padding: 0 0 0 30px;
|
||||
cursor: pointer;
|
||||
box-sizing: inherit;
|
||||
font-size: $lgn-checkbox-font-size;
|
||||
line-height: 28px;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
transition: all .28s cubic-bezier(.4, 0, .2, 1);
|
||||
transition-property: background-color, border-color;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
width: 6px;
|
||||
height: 12px;
|
||||
transform: rotate(45deg);
|
||||
transition: border-color .28s cubic-bezier(.4, 0, .2, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 2px;
|
||||
transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-property: background-color, border-color;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 5px;
|
||||
width: 4px;
|
||||
height: 10px;
|
||||
transform: rotate(45deg);
|
||||
transition: border-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,45 +1,44 @@
|
||||
@import '../theming/theming';
|
||||
@import 'checkbox';
|
||||
@import "../theming/theming";
|
||||
@import "checkbox";
|
||||
|
||||
@mixin lgn-checkbox-theme() {
|
||||
@include lgn-checkbox-color();
|
||||
@include 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'] {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
// Unchecked
|
||||
.lgn-checkbox label {
|
||||
&:before {
|
||||
background-color: transparent;
|
||||
border: 2px solid var(--zitadel-color-input-border);
|
||||
}
|
||||
|
||||
// Unchecked
|
||||
.lgn-checkbox label {
|
||||
&:before {
|
||||
background-color: transparent;
|
||||
border: 2px solid var(--zitadel-color-input-border);
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-bottom: 2px solid transparent;
|
||||
border-right: 2px solid transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-bottom: 2px solid transparent;
|
||||
border-right: 2px solid transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// Checked
|
||||
input[type='checkbox']:checked + label {
|
||||
&:before {
|
||||
background-color: var(--zitadel-color-primary);
|
||||
border-color: var(--zitadel-color-primary);
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// Checked
|
||||
input[type="checkbox"]:checked + label {
|
||||
&:before {
|
||||
background-color: var(--zitadel-color-primary);
|
||||
border-color: var(--zitadel-color-primary);
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-color: #fff; // TODO replace with contrast to background color
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,125 +1,125 @@
|
||||
$lgn-container-max-width: 400px;
|
||||
$lgn-container-max-width: 440px;
|
||||
$lgn-container-padding: 20px;
|
||||
$lgn-container-margin: 0 auto 0 auto;
|
||||
$lgn-container-top-offset: 100px;
|
||||
$lgn-container-bottom-margin: 50px;
|
||||
|
||||
.lgn-max-width-wrapper {
|
||||
max-width: $lgn-container-max-width;
|
||||
margin: auto;
|
||||
margin-top: 50px;
|
||||
margin-bottom: $lgn-container-bottom-margin;
|
||||
display: block;
|
||||
max-width: $lgn-container-max-width;
|
||||
margin: auto;
|
||||
margin-top: 50px;
|
||||
margin-bottom: $lgn-container-bottom-margin;
|
||||
display: block;
|
||||
|
||||
@media only screen and (min-width: 600px) {
|
||||
margin-top: $lgn-container-top-offset;
|
||||
}
|
||||
@media only screen and (min-width: 600px) {
|
||||
margin-top: $lgn-container-top-offset;
|
||||
}
|
||||
}
|
||||
|
||||
.content-container {
|
||||
position: relative; // used to position a button element relative to the left upper corner of the content wrapper
|
||||
display: block;
|
||||
margin: $lgn-container-margin;
|
||||
padding: $lgn-container-padding;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative; // used to position a button element relative to the left upper corner of the content wrapper
|
||||
display: block;
|
||||
margin: $lgn-container-margin;
|
||||
padding: $lgn-container-padding;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.lgn-head {
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
.lgn-head {
|
||||
h1 {
|
||||
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 {
|
||||
text-align: center;
|
||||
margin: 0.5rem 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lgn-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .5rem 0;
|
||||
margin-top: 1rem;
|
||||
.lgn-left-action {
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
top: -75px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
.lgn-register-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.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: .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;
|
||||
}
|
||||
.lgn-mfa-other {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 1.2rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
@ -11,6 +11,12 @@
|
||||
footer {
|
||||
background-color: var(--zitadel-color-footer-background);
|
||||
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 {
|
||||
color: var(--zitadel-color-font-500);
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
@import 'label_base';
|
||||
@import "label_base";
|
||||
|
||||
.lgn-label {
|
||||
@include lgn-label-base;
|
||||
|
||||
* {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,24 +1,25 @@
|
||||
@import '../theming/theming';
|
||||
@import 'list';
|
||||
@import "../theming/theming";
|
||||
@import "list";
|
||||
|
||||
@mixin lgn-list-theme() {
|
||||
@include lgn-list-color();
|
||||
@include lgn-list-color();
|
||||
}
|
||||
|
||||
@mixin lgn-list-color() {
|
||||
.lgn-list, ul {
|
||||
li::before {
|
||||
color: var(--zitadel-color-primary);
|
||||
}
|
||||
|
||||
li i {
|
||||
&.lgn-warn {
|
||||
color: var(--zitadel-color-warn);
|
||||
}
|
||||
|
||||
&.lgn-valid {
|
||||
color: #85d996;
|
||||
}
|
||||
}
|
||||
.lgn-list,
|
||||
ul {
|
||||
li::before {
|
||||
color: var(--zitadel-color-primary);
|
||||
}
|
||||
|
||||
li i {
|
||||
&.lgn-warn {
|
||||
color: var(--zitadel-color-warn);
|
||||
}
|
||||
|
||||
&.lgn-valid {
|
||||
color: var(--zitadel-color-success);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,14 +1,19 @@
|
||||
@mixin lgn-select-base {
|
||||
// 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-position: right 10px center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 50%;
|
||||
color: white;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
&::-ms-expand {
|
||||
display: none;
|
||||
};
|
||||
// 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-position: right 10px center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 50%;
|
||||
color: white;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
&:not([disabled]) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
@import 'success_label_base';
|
||||
@import "success_label_base";
|
||||
|
||||
.lgn-success-label {
|
||||
color: #0e6245;
|
||||
background: #cbf4c9;
|
||||
border-radius: .5rem;
|
||||
padding: .5rem;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
@ -1,16 +1,13 @@
|
||||
@import '../theming/theming';
|
||||
@import 'success_label';
|
||||
@import "../theming/theming";
|
||||
@import "success_label";
|
||||
|
||||
@mixin lgn-success-label-theme() {
|
||||
@include lgn-success-label-color();
|
||||
@include lgn-success-label-color();
|
||||
}
|
||||
|
||||
@mixin lgn-success-label-color() {
|
||||
|
||||
.lgn-success-label {
|
||||
color: var(--zitadel-color-success);
|
||||
background-color: var(--zitadel-color-success-background);
|
||||
}
|
||||
|
||||
|
||||
.lgn-success-label {
|
||||
color: var(--zitadel-color-success);
|
||||
background-color: var(--zitadel-color-success-background);
|
||||
}
|
||||
}
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
--zitadel-color-background-900: rgb(142, 142, 142);
|
||||
--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-border: #00000040;
|
||||
@ -73,7 +73,10 @@
|
||||
--zitadel-color-state-warn-font: #620e0e;
|
||||
--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);
|
||||
|
||||
@ -150,7 +153,7 @@
|
||||
--zitadel-color-background-900: rgb(23, 23, 23);
|
||||
--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-border: #403e3e;
|
||||
@ -182,6 +185,9 @@
|
||||
--zitadel-color-state-warn-background: #af455359;
|
||||
|
||||
--zitadel-color-footer-background: #00000020;
|
||||
--zitadel-color-footer-background-mozilla: var(
|
||||
--zitadel-color-background-600
|
||||
);
|
||||
|
||||
--zitadel-color-divider: rgba(255, 255, 255, 0.12);
|
||||
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
--zitadel-color-background-800: rgb(168, 168, 168);
|
||||
--zitadel-color-background-900: rgb(142, 142, 142);
|
||||
--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-border: #00000040;
|
||||
--zitadel-color-input-border-hover: #1a1b1b;
|
||||
@ -64,7 +64,10 @@
|
||||
--zitadel-color-state-success-background: #cbf4c9;
|
||||
--zitadel-color-state-warn-font: #620e0e;
|
||||
--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-button-disabled: rgba(0, 0, 0, 0.26);
|
||||
--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-900: rgb(23, 23, 23);
|
||||
--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-border: #403e3e;
|
||||
--zitadel-color-input-border-hover: #aeafb1;
|
||||
@ -158,6 +161,9 @@
|
||||
--zitadel-color-state-warn-font: #ffc1c1;
|
||||
--zitadel-color-state-warn-background: #af455359;
|
||||
--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-button-disabled: rgba(0, 0, 0, 0.26);
|
||||
--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;
|
||||
font-weight: 400;
|
||||
}
|
||||
.lgn-label * {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@keyframes ripple {
|
||||
0% {
|
||||
@ -558,7 +567,7 @@ a.block {
|
||||
}
|
||||
|
||||
.lgn-max-width-wrapper {
|
||||
max-width: 400px;
|
||||
max-width: 440px;
|
||||
margin: auto;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 50px;
|
||||
@ -708,6 +717,10 @@ i {
|
||||
.lgn-account-selection .lgn-account i {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.lgn-account-selection .lgn-account i.account-add {
|
||||
font-size: 1.4rem;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.lgn-avatar {
|
||||
height: 32px;
|
||||
@ -737,7 +750,7 @@ i {
|
||||
margin: 0 0 10px;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
box-sizing: inherit;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.lgn-checkbox input[type=checkbox] {
|
||||
position: absolute;
|
||||
@ -748,6 +761,7 @@ i {
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
box-sizing: inherit;
|
||||
margin: 2px;
|
||||
}
|
||||
.lgn-checkbox label {
|
||||
display: block;
|
||||
@ -757,13 +771,17 @@ i {
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
}
|
||||
.lgn-checkbox label a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.lgn-checkbox label:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
top: 6px;
|
||||
left: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 2px;
|
||||
transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-property: background-color, border-color;
|
||||
@ -771,10 +789,10 @@ i {
|
||||
.lgn-checkbox label:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
top: 7px;
|
||||
left: 5px;
|
||||
width: 6px;
|
||||
height: 12px;
|
||||
width: 4px;
|
||||
height: 10px;
|
||||
transform: rotate(45deg);
|
||||
transition: border-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
@ -788,6 +806,9 @@ i {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
.lgn-select:not([disabled]), select:not([disabled]) {
|
||||
cursor: pointer;
|
||||
}
|
||||
.lgn-select::-ms-expand, select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
@ -1092,8 +1113,6 @@ i {
|
||||
font-weight: 400;
|
||||
}
|
||||
.lgn-success-label {
|
||||
color: #0e6245;
|
||||
background: #cbf4c9;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
@ -1304,6 +1323,9 @@ select::placeholder, .lgn-select::placeholder {
|
||||
margin: 0 0 2px 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
.lgn-label * {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@keyframes ripple {
|
||||
0% {
|
||||
@ -1457,7 +1479,7 @@ a.block {
|
||||
}
|
||||
|
||||
.lgn-max-width-wrapper {
|
||||
max-width: 400px;
|
||||
max-width: 440px;
|
||||
margin: auto;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 50px;
|
||||
@ -1607,6 +1629,10 @@ i {
|
||||
.lgn-account-selection .lgn-account i {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.lgn-account-selection .lgn-account i.account-add {
|
||||
font-size: 1.4rem;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.lgn-avatar {
|
||||
height: 32px;
|
||||
@ -1636,7 +1662,7 @@ i {
|
||||
margin: 0 0 10px;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
box-sizing: inherit;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.lgn-checkbox input[type=checkbox] {
|
||||
position: absolute;
|
||||
@ -1647,6 +1673,7 @@ i {
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
box-sizing: inherit;
|
||||
margin: 2px;
|
||||
}
|
||||
.lgn-checkbox label {
|
||||
display: block;
|
||||
@ -1656,13 +1683,17 @@ i {
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
}
|
||||
.lgn-checkbox label a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.lgn-checkbox label:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
top: 6px;
|
||||
left: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 2px;
|
||||
transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-property: background-color, border-color;
|
||||
@ -1670,10 +1701,10 @@ i {
|
||||
.lgn-checkbox label:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
top: 7px;
|
||||
left: 5px;
|
||||
width: 6px;
|
||||
height: 12px;
|
||||
width: 4px;
|
||||
height: 10px;
|
||||
transform: rotate(45deg);
|
||||
transition: border-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
@ -1687,6 +1718,9 @@ i {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
.lgn-select:not([disabled]), select:not([disabled]) {
|
||||
cursor: pointer;
|
||||
}
|
||||
.lgn-select::-ms-expand, select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
@ -1991,8 +2025,6 @@ i {
|
||||
font-weight: 400;
|
||||
}
|
||||
.lgn-success-label {
|
||||
color: #0e6245;
|
||||
background: #cbf4c9;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
@ -2266,7 +2298,7 @@ i {
|
||||
font-weight: 400;
|
||||
}
|
||||
.lgn-max-width-wrapper {
|
||||
max-width: 400px;
|
||||
max-width: 440px;
|
||||
margin: auto;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 50px;
|
||||
@ -2756,6 +2788,13 @@ input[type=checkbox]:checked + label:after {
|
||||
footer {
|
||||
background-color: var(--zitadel-color-footer-background);
|
||||
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 {
|
||||
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);
|
||||
}
|
||||
|
||||
.lgn-list li::before, ul li::before {
|
||||
.lgn-list li::before,
|
||||
ul li::before {
|
||||
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);
|
||||
}
|
||||
.lgn-list li i.lgn-valid, ul li i.lgn-valid {
|
||||
color: #85d996;
|
||||
.lgn-list li i.lgn-valid,
|
||||
ul li i.lgn-valid {
|
||||
color: var(--zitadel-color-success);
|
||||
}
|
||||
|
||||
.lgn-idp {
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -53,7 +53,7 @@
|
||||
<button type="submit" name="userID" value="0" class="lgn-account">
|
||||
<div class="left">
|
||||
<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 class="lgn-names">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user