TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-12-12 07:02:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: login ui for v2 (#3712)

Browse Source 
* fix: login ui for v2

* a color

* footer

Co-authored-by: Livio Amstutz <livio.a@gmail.com>
This commit is contained in:
Max Peintner
2022-05-30 11:03:40 +02:00
committed by GitHub
parent fa57a4c509
commit e79aab3671
27 changed files with 478 additions and 426 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,6 @@
:root {
--zitadel-color-primary: var(--zitadel-color-primary-500);
--zitadel-color-background: var(--zitadel-color-background-500);
--zitadel-color-secondary: var(--zitadel-color-secondary-500);
--zitadel-color-warn: var(--zitadel-color-warn-500);
--zitadel-color-text: var(--zitadel-color-text-500);
--zitadel-color-primary-50: #eaedfa;
@@ -17,27 +16,16 @@
--zitadel-color-primary-900: #293bb9;
--zitadel-color-primary-rgb: rgb(84, 105, 212);
--zitadel-color-primary-contrast: var(--zitadel-color-white);
--zitadel-color-secondary-50: #eaedfa;
--zitadel-color-secondary-100: #ccd2f2;
--zitadel-color-secondary-200: #aab4ea;
--zitadel-color-secondary-300: #8796e1;
--zitadel-color-secondary-400: #6e80da;
--zitadel-color-secondary-500: #5469d4;
--zitadel-color-secondary-600: #4d61cf;
--zitadel-color-secondary-700: #4356c9;
--zitadel-color-secondary-800: #3a4cc3;
--zitadel-color-secondary-900: #293bb9;
--zitadel-color-secondary-contrast: var(--zitadel-color-white);
--zitadel-color-warn-50: #F9E7EB;
--zitadel-color-warn-100: #F0C4CC;
--zitadel-color-warn-200: #E69DAB;
--zitadel-color-warn-300: #DC7689;
--zitadel-color-warn-400: #D5586F;
--zitadel-color-warn-500: #CD3B56;
--zitadel-color-warn-600: #C8354F;
--zitadel-color-warn-700: #C12D45;
--zitadel-color-warn-800: #BA263C;
--zitadel-color-warn-900: #AE192B;
--zitadel-color-warn-50: #f9e7eb;
--zitadel-color-warn-100: #f0c4cc;
--zitadel-color-warn-200: #e69dab;
--zitadel-color-warn-300: #dc7689;
--zitadel-color-warn-400: #d5586f;
--zitadel-color-warn-500: #cd3b56;
--zitadel-color-warn-600: #c8354f;
--zitadel-color-warn-700: #c12d45;
--zitadel-color-warn-800: #ba263c;
--zitadel-color-warn-900: #ae192b;
--zitadel-font-family: "Lato";
--zitadel-color-background-50: rgb(255, 255, 255);
--zitadel-color-background-100: rgb(255, 255, 255);
@@ -51,9 +39,10 @@
--zitadel-color-background-900: rgb(142, 142, 142);
--zitadel-color-background-contrast: rgb(0, 0, 0);
--zitadel-color-footer-line: #e3e8ee;
--zitadel-color-input-background: #fafafa50;
--zitadel-color-input-background: #00000003;
--zitadel-color-input-border: #00000040;
--zitadel-color-input-border-hover: #1a1b1b;
--zitadel-color-input-border-active: var(--zitadel-color-primary-500);
--zitadel-color-input-placeholder: var(--zitadel-color-grey-600);
--zitadel-color-font-50: rgb(0, 0, 0);
--zitadel-color-font-100: rgb(0, 0, 0);
@@ -66,17 +55,29 @@
--zitadel-color-font-800: rgb(0, 0, 0);
--zitadel-color-font-900: rgb(0, 0, 0);
--zitadel-color-font-contrast: rgb(255, 255, 255);
--zitadel-color-label: var(--zitadel-color-grey-600);
--zitadel-color-label: #0000008a;
--zitadel-color-account-selector-hover: rgba(0, 0, 0, 0.02);
--zitadel-color-account-selector-active: rgba(0, 0, 0, 0.05);
--zitadel-color-success: #0e6245;
--zitadel-color-success-background: #cbf4c9;
--zitadel-color-state-success-font: #0e6245;
--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-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);
--zitadel-color-button-selected-background: var(--zitadel-color-grey-900);
--zitadel-color-button-disabled-selected-background: var(--zitadel-color-grey-800);
--zitadel-color-button-disabled-selected-background: var(
--zitadel-color-grey-800
);
--zitadel-color-raised-button-background: var(--zitadel-color-white);
--zitadel-color-stroked-button-hover-background: #00000010;
--zitadel-color-stroked-button-active-background: #00000020;
--zitadel-color-raised-button-active-background: var(
--zitadel-color-primary-700
);
--zitadel-color-white: #ffffff;
--zitadel-color-black: #000000;
--zitadel-color-grey-50: #fafafa;
@@ -108,26 +109,16 @@
--zitadel-color-primary-700: #38649d;
--zitadel-color-primary-800: #305687;
--zitadel-color-primary-900: #284770;
--zitadel-color-secondary-50: #ffffff;
--zitadel-color-secondary-100: #dde6f3;
--zitadel-color-secondary-200: #b4c9e4;
--zitadel-color-secondary-300: #7fa3d1;
--zitadel-color-secondary-400: #6992c9;
--zitadel-color-secondary-500: #5282c1;
--zitadel-color-secondary-600: #4072b4;
--zitadel-color-secondary-700: #38649d;
--zitadel-color-secondary-800: #305687;
--zitadel-color-secondary-900: #284770;
--zitadel-color-warn-50: #FFE7EB;
--zitadel-color-warn-100: #FFC4CE;
--zitadel-color-warn-200: #FF9DAD;
--zitadel-color-warn-300: #FF768C;
--zitadel-color-warn-400: #FF5874;
--zitadel-color-warn-50: #ffe7eb;
--zitadel-color-warn-100: #ffc4ce;
--zitadel-color-warn-200: #ff9dad;
--zitadel-color-warn-300: #ff768c;
--zitadel-color-warn-400: #ff5874;
--zitadel-color-warn-500: #ff3b5b;
--zitadel-color-warn-600: #FF3553;
--zitadel-color-warn-700: #FF2D49;
--zitadel-color-warn-800: #FF2640;
--zitadel-color-warn-900: #FF192F;
--zitadel-color-warn-600: #ff3553;
--zitadel-color-warn-700: #ff2d49;
--zitadel-color-warn-800: #ff2640;
--zitadel-color-warn-900: #ff192f;
--zitadel-font-family: "Lato";
--zitadel-color-background-50: rgb(60, 60, 60);
--zitadel-color-background-100: rgb(55, 55, 55);
@@ -144,6 +135,7 @@
--zitadel-color-input-background: rgba(0, 0, 0, 0.2);
--zitadel-color-input-border: #403e3e;
--zitadel-color-input-border-hover: #aeafb1;
--zitadel-color-input-border-active: var(--zitadel-color-primary-500);
--zitadel-color-input-placeholder: var(--zitadel-color-grey-600);
--zitadel-color-text-50: rgb(255, 255, 255);
--zitadel-color-text-100: rgb(255, 255, 255);
@@ -156,17 +148,29 @@
--zitadel-color-text-800: rgb(167, 168, 169);
--zitadel-color-text-900: rgb(141, 142, 143);
--zitadel-color-text-contrast: rgb(0, 0, 0);
--zitadel-color-label: var(--zitadel-color-grey-600);
--zitadel-color-label: #ffffffb3;
--zitadel-color-account-selector-hover: rgba(255, 255, 255, 0.02);
--zitadel-color-account-selector-active: rgba(255, 255, 255, 0.05);
--zitadel-color-success: #cbf4c9;
--zitadel-color-success-background: #4f566b;
--zitadel-color-state-success-font: #cbf4c9;
--zitadel-color-state-success-background: #68cf8340;
--zitadel-color-state-warn-font: #ffc1c1;
--zitadel-color-state-warn-background: #af455359;
--zitadel-color-footer-background: #00000020;
--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);
--zitadel-color-button-selected-background: var(--zitadel-color-grey-900);
--zitadel-color-button-disabled-selected-background: var(--zitadel-color-grey-800);
--zitadel-color-button-disabled-selected-background: var(
--zitadel-color-grey-800
);
--zitadel-color-raised-button-background: var(--zitadel-color-grey-800);
--zitadel-color-stroked-button-hover-background: #ffffff10;
--zitadel-color-stroked-button-active-background: #ffffff20;
--zitadel-color-raised-button-active-background: var(
--zitadel-color-primary-300
);
/*--zitadel-color-label: var(--zitadel-color-grey-600); same */
--zitadel-icon-select: url("../select_arrow_dark.svg");
--zitadel-logo-powered-by: url("../logo-light.svg");
@@ -688,9 +692,15 @@ i {
overflow: hidden;
}
.lgn-account-selection .lgn-account .lgn-names .lgn-session-state {
margin: 0;
font-size: 14px;
margin-bottom: 0.5rem;
margin: 0.25rem 0;
border-radius: 50vw;
padding: 2px 0.5rem;
letter-spacing: 0.05em;
font-size: 12px;
white-space: nowrap;
box-shadow: 0 0 3px #0000001a;
width: fit-content;
line-height: 1rem;
}
.lgn-account-selection .lgn-account .fill-space {
flex: 1;
@@ -1581,9 +1591,15 @@ i {
overflow: hidden;
}
.lgn-account-selection .lgn-account .lgn-names .lgn-session-state {
margin: 0;
font-size: 14px;
margin-bottom: 0.5rem;
margin: 0.25rem 0;
border-radius: 50vw;
padding: 2px 0.5rem;
letter-spacing: 0.05em;
font-size: 12px;
white-space: nowrap;
box-shadow: 0 0 3px #0000001a;
width: fit-content;
line-height: 1rem;
}
.lgn-account-selection .lgn-account .fill-space {
flex: 1;
@@ -2548,10 +2564,18 @@ label, .lgn-label, .lgn-typography .lgn-label, .lgn-typography label {
color: var(--zitadel-color-button-disabled);
}
.lgn-stroked-button:hover,
.lgn-stroked-button:focus {
background: var(--zitadel-color-stroked-button-hover-background);
}
.lgn-stroked-button:active {
background: var(--zitadel-color-stroked-button-active-background);
}
.lgn-button:focus,
.lgn-stroked-button:focus,
.lgn-raised-button:focus {
box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
background: var(--zitadel-color-background);
}
@@ -2610,7 +2634,7 @@ label, .lgn-label, .lgn-typography .lgn-label, .lgn-typography label {
background-color: var(--zitadel-color-button-disabled-background);
}
.lgn-raised-button:active {
background-color: rgba(var(--zitadel-color-primary-rgb), 0.8);
background-color: var(--zitadel-color-raised-button-active-background);
}
.lgn-button,
@@ -2622,36 +2646,42 @@ label, .lgn-label, .lgn-typography .lgn-label, .lgn-typography label {
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}
.lgn-raised-button:not([disabled]):active {
box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
}
.lgn-raised-button[disabled] {
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.lgn-input:not([disabled]),
select:not([disabled]), .lgn-select:not([disabled]) {
select:not([disabled]),
.lgn-select:not([disabled]) {
border-color: var(--zitadel-color-input-border);
}
.lgn-input,
select, .lgn-select {
select,
.lgn-select {
color: var(--zitadel-color-text);
background-color: var(--zitadel-color-input-background);
}
.lgn-input:hover,
select:hover, .lgn-select:hover {
select:hover,
.lgn-select:hover {
border-color: var(--zitadel-color-input-border-hover);
}
.lgn-input:active,
select:active, .lgn-select:active {
border-color: var(--zitadel-color-input-border);
select:active,
.lgn-select:active {
border-color: var(--zitadel-color-input-border-active);
}
.lgn-input:focus,
select:focus, .lgn-select:focus {
border-color: var(--zitadel-color-input-border);
select:focus,
.lgn-select:focus {
border-color: var(--zitadel-color-input-border-active);
}
.lgn-input[color=warn],
select[color=warn], .lgn-select[color=warn] {
select[color=warn],
.lgn-select[color=warn] {
border-color: var(--zitadel-color-warn);
}
@@ -2724,11 +2754,11 @@ input[type=checkbox]:checked + label:after {
}
footer {
background-color: var(--zitadel-color-background);
background-color: var(--zitadel-color-footer-background);
border-top: 1px solid var(--zitadel-color-footer-line);
}
footer a {
color: var(--zitadel-color-primary);
color: var(--zitadel-color-font-500);
}
footer .lgn-logo-watermark {
background: var(--zitadel-logo-powered-by) no-repeat;
@@ -2736,11 +2766,11 @@ footer .lgn-logo-watermark {
background-size: contain;
}
a {
color: var(--zitadel-color-primary);
a:not(.lgn-stroked-button):not(.lgn-button):not(.lgn-raised-button) {
color: var(--zitadel-color-font);
}
a:hover, a:active {
color: var(--zitadel-color-primary-400);
a:not(.lgn-stroked-button):not(.lgn-button):not(.lgn-raised-button):hover, a:not(.lgn-stroked-button):not(.lgn-button):not(.lgn-raised-button):active {
color: var(--zitadel-color-primary-500);
}
.lgn-error {
@@ -2792,10 +2822,12 @@ a:hover, a:active {
color: var(--zitadel-color-label);
}
.lgn-account-selection .lgn-account .lgn-session-state.i0 {
color: #85d996;
color: var(--zitadel-color-state-success-font);
background: var(--zitadel-color-state-success-background);
}
.lgn-account-selection .lgn-account .lgn-session-state.i1 {
color: var(--zitadel-color-warn);
color: var(--zitadel-color-state-warn-font);
background: var(--zitadel-color-state-warn-background);
}
.lgn-avatar:not(.transparent).lgn-primary {

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