mirror of
https://github.com/zitadel/zitadel.git
synced 2025-12-03 09:22:15 +00:00
59af02b2f3
* custom color picker, delete font * delete asset, i18n * escape deep styles * ts, proto * remove fallback img, color clickable, remove font * stylelint * fix spinner * fix deprecated chipinput.input * improve logo on login * fix qr code * always use black on white for qr code * fix header and footer css Co-authored-by: Livio Amstutz <livio.a@gmail.com>
209 lines
7.8 KiB
SCSS
209 lines
7.8 KiB
SCSS
: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;
|
|
--zitadel-color-primary-100: #ccd2f2;
|
|
--zitadel-color-primary-200: #aab4ea;
|
|
--zitadel-color-primary-300: #8796e1;
|
|
--zitadel-color-primary-400: #6e80da;
|
|
--zitadel-color-primary-500: #5469d4;
|
|
--zitadel-color-primary-600: #4d61cf;
|
|
--zitadel-color-primary-700: #4356c9;
|
|
--zitadel-color-primary-800: #3a4cc3;
|
|
--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: #ffebee;
|
|
--zitadel-color-warn-100: #ffcdd2;
|
|
--zitadel-color-warn-200: #ef9a9a;
|
|
--zitadel-color-warn-300: #e57373;
|
|
--zitadel-color-warn-400: #ef5350;
|
|
--zitadel-color-warn-500: #f44336;
|
|
--zitadel-color-warn-600: #e53935;
|
|
--zitadel-color-warn-700: #d32f2f;
|
|
--zitadel-color-warn-800: #c62828;
|
|
--zitadel-color-warn-900: #b71c1c;
|
|
|
|
--zitadel-font-family: 'Lato';
|
|
|
|
--zitadel-color-background-50: rgb(255, 255, 255);
|
|
--zitadel-color-background-100: rgb(255, 255, 255);
|
|
--zitadel-color-background-200: rgb(255, 255, 255);
|
|
--zitadel-color-background-300: rgb(255, 255, 255);
|
|
--zitadel-color-background-400: rgb(255, 255, 255);
|
|
--zitadel-color-background-500: rgb(250, 250, 250);
|
|
--zitadel-color-background-600: rgb(222, 222, 222);
|
|
--zitadel-color-background-700: rgb(195, 195, 194);
|
|
--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-input-background: #fafafa50;
|
|
--zitadel-color-input-border: #00000040;
|
|
--zitadel-color-input-border-hover: #1a1b1b;
|
|
--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);
|
|
--zitadel-color-font-200: rgb(0, 0, 0);
|
|
--zitadel-color-font-300: rgb(0, 0, 0);
|
|
--zitadel-color-font-400: rgb(0, 0, 0);
|
|
--zitadel-color-font-500: rgb(0, 0, 0);
|
|
--zitadel-color-font-600: rgb(0, 0, 0);
|
|
--zitadel-color-font-700: rgb(0, 0, 0);
|
|
--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-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-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-raised-button-background: var(--zitadel-color-white);
|
|
|
|
|
|
--zitadel-color-white: #ffffff;
|
|
--zitadel-color-black: #000000;
|
|
--zitadel-color-grey-50: #fafafa;
|
|
--zitadel-color-grey-100: #f5f5f5;
|
|
--zitadel-color-grey-200: #eeeeee;
|
|
--zitadel-color-grey-300: #e0e0e0;
|
|
--zitadel-color-grey-400: #bdbdbd;
|
|
--zitadel-color-grey-500: #9e9e9e;
|
|
--zitadel-color-grey-600: #757575;
|
|
--zitadel-color-grey-700: #616161;
|
|
--zitadel-color-grey-800: #424242;
|
|
--zitadel-color-grey-900: #212121;
|
|
|
|
--zitadel-icon-select: url('../select_arrow_light.svg');
|
|
--zitadel-logo-powered-by: url('../logo-dark.svg');
|
|
|
|
--zitadel-color-google-text: #8b8d8d;
|
|
--zitadel-color-google-background: #ffffff;
|
|
|
|
--zitadel-color-qr: var(--zitadel-color-black);
|
|
--zitadel-color-qr-background: var(--zitadel-color-white);
|
|
}
|
|
|
|
.lgn-dark-theme {
|
|
--zitadel-color-primary-50: #ffffff;
|
|
--zitadel-color-primary-100: #dde6f3;
|
|
--zitadel-color-primary-200: #b4c9e4;
|
|
--zitadel-color-primary-300: #7fa3d1;
|
|
--zitadel-color-primary-400: #6992c9;
|
|
--zitadel-color-primary-500: #5282c1;
|
|
--zitadel-color-primary-600: #4072b4;
|
|
--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: #ffebee;
|
|
--zitadel-color-warn-100: #ffcdd2;
|
|
--zitadel-color-warn-200: #ef9a9a;
|
|
--zitadel-color-warn-300: #e57373;
|
|
--zitadel-color-warn-400: #ef5350;
|
|
--zitadel-color-warn-500: #f44336;
|
|
--zitadel-color-warn-600: #e53935;
|
|
--zitadel-color-warn-700: #d32f2f;
|
|
--zitadel-color-warn-800: #c62828;
|
|
--zitadel-color-warn-900: #b71c1c;
|
|
|
|
--zitadel-font-family: 'Lato';
|
|
|
|
--zitadel-color-background-50: rgb(60, 60, 60);
|
|
--zitadel-color-background-100: rgb(55, 55, 55);
|
|
--zitadel-color-background-200: rgb(49, 49, 49);
|
|
--zitadel-color-background-300: rgb(44, 44, 44);
|
|
--zitadel-color-background-400: rgb(36, 36, 36);
|
|
--zitadel-color-background-500: rgb(33, 33, 33);
|
|
--zitadel-color-background-600: rgb(30, 30, 30);
|
|
--zitadel-color-background-700: rgb(28, 28, 28);
|
|
--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-input-background: rgba(0, 0, 0, 0.2);
|
|
--zitadel-color-input-border: #403e3e;
|
|
--zitadel-color-input-border-hover: #aeafb1;
|
|
--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);
|
|
--zitadel-color-text-200: rgb(255, 255, 255);
|
|
--zitadel-color-text-300: rgb(255, 255, 255);
|
|
--zitadel-color-text-400: rgb(255, 255, 255);
|
|
--zitadel-color-text-500: rgb(255, 255, 255);
|
|
--zitadel-color-text-600: rgb(221, 222, 223);
|
|
--zitadel-color-text-700: rgb(194, 195, 195);
|
|
--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-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-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-raised-button-background: var(--zitadel-color-grey-800);
|
|
|
|
|
|
/*--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');
|
|
|
|
|
|
--zitadel-color-google-text: #8b8d8d;
|
|
--zitadel-color-google-background: #ffffff;
|
|
}
|