mirror of
https://github.com/zitadel/zitadel.git
synced 2025-01-06 13:27:45 +00:00
fix: login ui for v2 (#3712)
* fix: login ui for v2 * a color * footer Co-authored-by: Livio Amstutz <livio.a@gmail.com>
This commit is contained in:
Max Peintner
GitHub
parent
fa57a4c509
commit
e79aab3671
4
go.mod
4
go.mod
@ -89,7 +89,7 @@ require (
|
||||
github.com/davecgh/go-spew v1.1.1 // indirect
|
||||
github.com/desertbit/timer v0.0.0-20180107155436-c41aec40b27f // indirect
|
||||
github.com/dlclark/regexp2 v1.4.1-0.20201116162257-a2a8dda75c91 // indirect
|
||||
github.com/drone/envsubst v1.0.3 // indirect
|
||||
github.com/drone/envsubst v1.0.3
|
||||
github.com/dsoprea/go-exif v0.0.0-20210131231135-d154f10435cc // indirect
|
||||
github.com/dsoprea/go-exif/v2 v2.0.0-20200604193436-ca8584a0e1c4 // indirect
|
||||
github.com/dsoprea/go-iptc v0.0.0-20200609062250-162ae6b44feb // indirect
|
||||
@ -125,7 +125,7 @@ require (
|
||||
github.com/huandu/xstrings v1.3.2 // indirect
|
||||
github.com/imdario/mergo v0.3.12 // indirect
|
||||
github.com/inconshreveable/mousetrap v1.0.0 // indirect
|
||||
github.com/jarcoal/jpath v0.0.0-20140328210829-f76b8b2dbf52 // indirect
|
||||
github.com/jarcoal/jpath v0.0.0-20140328210829-f76b8b2dbf52
|
||||
github.com/jinzhu/inflection v1.0.0 // indirect
|
||||
github.com/json-iterator/go v1.1.12 // indirect
|
||||
github.com/kevinburke/go-types v0.0.0-20210723172823-2deba1f80ba7 // indirect
|
||||
|
||||
@ -270,27 +270,27 @@ func (m *Styling) generateColorPaletteRGBA255(hex string) map[string]string {
|
||||
palette := make(map[string]string)
|
||||
defaultColor := gamut.Hex(hex)
|
||||
|
||||
color50, ok := colorful.MakeColor(gamut.Lighter(defaultColor, 1.0))
|
||||
color50, ok := colorful.MakeColor(gamut.Lighter(defaultColor, 0.52))
|
||||
if ok {
|
||||
palette["50"] = cssRGB(color50.RGB255())
|
||||
}
|
||||
|
||||
color100, ok := colorful.MakeColor(gamut.Lighter(defaultColor, 0.8))
|
||||
color100, ok := colorful.MakeColor(gamut.Lighter(defaultColor, 0.37))
|
||||
if ok {
|
||||
palette["100"] = cssRGB(color100.RGB255())
|
||||
}
|
||||
|
||||
color200, ok := colorful.MakeColor(gamut.Lighter(defaultColor, 0.6))
|
||||
color200, ok := colorful.MakeColor(gamut.Lighter(defaultColor, 0.26))
|
||||
if ok {
|
||||
palette["200"] = cssRGB(color200.RGB255())
|
||||
}
|
||||
|
||||
color300, ok := colorful.MakeColor(gamut.Lighter(defaultColor, 0.4))
|
||||
color300, ok := colorful.MakeColor(gamut.Lighter(defaultColor, 0.12))
|
||||
if ok {
|
||||
palette["300"] = cssRGB(color300.RGB255())
|
||||
}
|
||||
|
||||
color400, ok := colorful.MakeColor(gamut.Lighter(defaultColor, 0.1))
|
||||
color400, ok := colorful.MakeColor(gamut.Lighter(defaultColor, 0.06))
|
||||
if ok {
|
||||
palette["400"] = cssRGB(color400.RGB255())
|
||||
}
|
||||
@ -299,23 +299,23 @@ func (m *Styling) generateColorPaletteRGBA255(hex string) map[string]string {
|
||||
if ok {
|
||||
palette["500"] = cssRGB(color500.RGB255())
|
||||
}
|
||||
|
||||
color600, ok := colorful.MakeColor(gamut.Darker(defaultColor, 0.1))
|
||||
|
||||
color600, ok := colorful.MakeColor(gamut.Darker(defaultColor, 0.06))
|
||||
if ok {
|
||||
palette["600"] = cssRGB(color600.RGB255())
|
||||
}
|
||||
|
||||
color700, ok := colorful.MakeColor(gamut.Darker(defaultColor, 0.2))
|
||||
color700, ok := colorful.MakeColor(gamut.Darker(defaultColor, 0.12))
|
||||
if ok {
|
||||
palette["700"] = cssRGB(color700.RGB255())
|
||||
}
|
||||
|
||||
color800, ok := colorful.MakeColor(gamut.Darker(defaultColor, 0.3))
|
||||
color800, ok := colorful.MakeColor(gamut.Darker(defaultColor, 0.18))
|
||||
if ok {
|
||||
palette["800"] = cssRGB(color800.RGB255())
|
||||
}
|
||||
|
||||
color900, ok := colorful.MakeColor(gamut.Darker(defaultColor, 0.4))
|
||||
color900, ok := colorful.MakeColor(gamut.Darker(defaultColor, 0.24))
|
||||
if ok {
|
||||
palette["900"] = cssRGB(color900.RGB255())
|
||||
}
|
||||
|
||||
@ -1,18 +1,16 @@
|
||||
@import 'a';
|
||||
@import "a";
|
||||
|
||||
@mixin lgn-a-theme() {
|
||||
|
||||
@include lgn-a-color();
|
||||
|
||||
@include lgn-a-color();
|
||||
}
|
||||
|
||||
@mixin lgn-a-color() {
|
||||
a {
|
||||
color: var(--zitadel-color-primary);
|
||||
a:not(.lgn-stroked-button):not(.lgn-button):not(.lgn-raised-button) {
|
||||
color: var(--zitadel-color-font);
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: var(--zitadel-color-primary-400);
|
||||
}
|
||||
&:hover,
|
||||
&:active {
|
||||
color: var(--zitadel-color-primary-500);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,60 +2,66 @@ $lgn-container-max-width: 380px;
|
||||
$lgn-container-padding: 20px;
|
||||
$lgn-container-margin: 0px auto 50px auto;
|
||||
|
||||
.lgn-account-selection{
|
||||
.lgn-account-selection {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
.lgn-account {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
.lgn-account {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.left {
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
|
||||
.lgn-names {
|
||||
display: block;
|
||||
margin: .5rem;
|
||||
text-align: start;
|
||||
overflow: hidden;
|
||||
|
||||
.lgn-displayname{
|
||||
font-size: 16px;
|
||||
margin: .5rem 0;
|
||||
margin-bottom: 0;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lgn-loginname{
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lgn-session-state {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.fill-space {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.lgn-names {
|
||||
display: block;
|
||||
margin: 0.5rem;
|
||||
text-align: start;
|
||||
overflow: hidden;
|
||||
|
||||
.lgn-displayname {
|
||||
font-size: 16px;
|
||||
margin: 0.5rem 0;
|
||||
margin-bottom: 0;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lgn-loginname {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lgn-session-state {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.fill-space {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,51 +1,50 @@
|
||||
@import 'account_selection';
|
||||
@import "account_selection";
|
||||
|
||||
@mixin lgn-account-selection-theme() {
|
||||
|
||||
@include lgn-account-selection-color();
|
||||
|
||||
@include lgn-account-selection-color();
|
||||
}
|
||||
|
||||
@mixin lgn-account-selection-color() {
|
||||
.lgn-account-selection {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
.lgn-account-selection{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
.lgn-account {
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
box-shadow: inset 0 -1px var(--zitadel-color-footer-line);
|
||||
.lgn-account {
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
box-shadow: inset 0 -1px var(--zitadel-color-footer-line);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--zitadel-color-account-selector-hover);
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--zitadel-color-account-selector-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: var(--zitadel-color-account-selector-active);
|
||||
}
|
||||
&:focus {
|
||||
background-color: var(--zitadel-color-account-selector-active);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--zitadel-color-account-selector-active);
|
||||
}
|
||||
&:active {
|
||||
background-color: var(--zitadel-color-account-selector-active);
|
||||
}
|
||||
|
||||
.lgn-loginname{
|
||||
font-size: 14px;
|
||||
color: var(--zitadel-color-label);
|
||||
}
|
||||
.lgn-loginname {
|
||||
font-size: 14px;
|
||||
color: var(--zitadel-color-label);
|
||||
}
|
||||
|
||||
.lgn-session-state {
|
||||
color: var(--zitadel-color-label);
|
||||
.lgn-session-state {
|
||||
color: var(--zitadel-color-label);
|
||||
|
||||
&.i0 {
|
||||
color: #85d996;
|
||||
}
|
||||
|
||||
&.i1 {
|
||||
color: var(--zitadel-color-warn);
|
||||
}
|
||||
}
|
||||
&.i0 {
|
||||
color: var(--zitadel-color-state-success-font);
|
||||
background: var(--zitadel-color-state-success-background);
|
||||
}
|
||||
|
||||
&.i1 {
|
||||
color: var(--zitadel-color-state-warn-font);
|
||||
background: var(--zitadel-color-state-warn-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
@import "../elevation/elevation";
|
||||
|
||||
@mixin lgn-button-theme() {
|
||||
@include lgn-button-color();
|
||||
@include lgn-button-color();
|
||||
}
|
||||
|
||||
@mixin lgn-button-color() {
|
||||
@ -16,10 +16,18 @@
|
||||
@include _lgn-button-theme-color(false);
|
||||
}
|
||||
|
||||
.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 {
|
||||
@include lgn-button-elevation(8);
|
||||
@include lgn-button-elevation(5);
|
||||
background: var(--zitadel-color-background);
|
||||
}
|
||||
|
||||
@ -50,7 +58,7 @@
|
||||
@include _lgn-button-theme-background-color();
|
||||
|
||||
&:active {
|
||||
background-color: rgba(var(--zitadel-color-primary-rgb), 0.8);
|
||||
background-color: var(--zitadel-color-raised-button-active-background);
|
||||
}
|
||||
}
|
||||
|
||||
@ -63,7 +71,7 @@
|
||||
@include lgn-button-elevation(2);
|
||||
|
||||
&:not([disabled]):active {
|
||||
@include lgn-button-elevation(8);
|
||||
@include lgn-button-elevation(5);
|
||||
}
|
||||
|
||||
// &:focus {
|
||||
@ -81,7 +89,7 @@
|
||||
color: var(--zitadel-color-primary);
|
||||
}
|
||||
&.lgn-accent {
|
||||
color: var(--zitadel-color-secondary);
|
||||
color: var(--zitadel-color-primary);
|
||||
}
|
||||
&.lgn-warn {
|
||||
color: var(--zitadel-color-warn);
|
||||
@ -91,9 +99,9 @@
|
||||
&.lgn-accent,
|
||||
&.lgn-warn,
|
||||
&[disabled] {
|
||||
&[disabled] {
|
||||
color: var(--zitadel-color-button-disabled);
|
||||
}
|
||||
&[disabled] {
|
||||
color: var(--zitadel-color-button-disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -102,7 +110,7 @@
|
||||
background-color: var(--zitadel-color-primary);
|
||||
}
|
||||
&.lgn-accent {
|
||||
background-color: var(--zitadel-color-secondary);
|
||||
background-color: var(--zitadel-color-primary);
|
||||
}
|
||||
&.lgn-warn {
|
||||
background-color: var(--zitadel-color-warn);
|
||||
@ -112,14 +120,18 @@
|
||||
&.lgn-accent,
|
||||
&.lgn-warn,
|
||||
&[disabled] {
|
||||
&[disabled] {
|
||||
background-color: var(--zitadel-color-button-disabled-background);
|
||||
}
|
||||
&[disabled] {
|
||||
background-color: var(--zitadel-color-button-disabled-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _lgn-button-theme-color($contrast) {
|
||||
$color: if($contrast, var(--zitadel-color-primary-contrast), var(--zitadel-color-primary));
|
||||
$color: if(
|
||||
$contrast,
|
||||
var(--zitadel-color-primary-contrast),
|
||||
var(--zitadel-color-primary)
|
||||
);
|
||||
|
||||
&.lgn-primary {
|
||||
color: $color;
|
||||
@ -135,14 +147,13 @@
|
||||
&.lgn-accent,
|
||||
&.lgn-warn,
|
||||
&[disabled] {
|
||||
&[disabled] {
|
||||
color: var(--zitadel-color-button-disabled);
|
||||
}
|
||||
&[disabled] {
|
||||
color: var(--zitadel-color-button-disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _lgn-button-theme-background-color() {
|
||||
|
||||
&.lgn-primary {
|
||||
background-color: var(--zitadel-color-primary);
|
||||
}
|
||||
@ -157,20 +168,19 @@
|
||||
&.lgn-accent,
|
||||
&.lgn-warn,
|
||||
&[disabled] {
|
||||
&[disabled] {
|
||||
background-color: var(--zitadel-color-button-disabled-background);
|
||||
}
|
||||
&[disabled] {
|
||||
background-color: var(--zitadel-color-button-disabled-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _lgn-button-focus-overlay-color() {
|
||||
|
||||
&.lgn-primary:focus {
|
||||
background-color: var(--zitadel-color-primary);
|
||||
}
|
||||
|
||||
&.lgn-accent:focus {
|
||||
background-color: var(--zitadel-color-secondary);
|
||||
background-color: var(--zitadel-color-primary);
|
||||
}
|
||||
|
||||
&.lgn-warn:focus {
|
||||
|
||||
@ -1,26 +1,25 @@
|
||||
@import 'footer';
|
||||
@import "footer";
|
||||
|
||||
@mixin lgn-footer-theme() {
|
||||
// @include lgn-private-check-duplicate-theme-styles($theme, 'mat-button') {
|
||||
// @include lgn-private-check-duplicate-theme-styles($theme, 'mat-button') {
|
||||
|
||||
@include lgn-footer-color();
|
||||
// }
|
||||
@include lgn-footer-color();
|
||||
// }
|
||||
}
|
||||
|
||||
@mixin lgn-footer-color() {
|
||||
|
||||
footer {
|
||||
background-color: var(--zitadel-color-background);
|
||||
border-top: 1px solid var(--zitadel-color-footer-line);
|
||||
footer {
|
||||
background-color: var(--zitadel-color-footer-background);
|
||||
border-top: 1px solid var(--zitadel-color-footer-line);
|
||||
|
||||
a {
|
||||
color: var(--zitadel-color-primary);
|
||||
}
|
||||
|
||||
.lgn-logo-watermark {
|
||||
background: var(--zitadel-logo-powered-by) no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
}
|
||||
a {
|
||||
color: var(--zitadel-color-font-500);
|
||||
}
|
||||
|
||||
.lgn-logo-watermark {
|
||||
background: var(--zitadel-logo-powered-by) no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,43 +1,44 @@
|
||||
@import '../theming/theming';
|
||||
@import 'input';
|
||||
@import "../theming/theming";
|
||||
@import "input";
|
||||
|
||||
@mixin lgn-input-theme() {
|
||||
@include lgn-input-color();
|
||||
@include lgn-input-color();
|
||||
}
|
||||
|
||||
@mixin lgn-input-color() {
|
||||
|
||||
.lgn-input:not([disabled]),
|
||||
select:not([disabled]), .lgn-select:not([disabled]) {
|
||||
border-color: var(--zitadel-color-input-border);
|
||||
}
|
||||
|
||||
.lgn-input,
|
||||
select, .lgn-select {
|
||||
color: var(--zitadel-color-text);
|
||||
background-color: var(--zitadel-color-input-background);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--zitadel-color-input-border-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: var(--zitadel-color-input-border);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--zitadel-color-input-border);
|
||||
}
|
||||
|
||||
// overwrite if state is warn
|
||||
&[color='warn'] {
|
||||
border-color: var(--zitadel-color-warn);
|
||||
}
|
||||
}
|
||||
|
||||
.lgn-input::placeholder,
|
||||
select::placeholder,
|
||||
.lgn-select::placeholder {
|
||||
color: var(--zitadel-color-input-placeholder);
|
||||
}
|
||||
.lgn-input:not([disabled]),
|
||||
select:not([disabled]),
|
||||
.lgn-select:not([disabled]) {
|
||||
border-color: var(--zitadel-color-input-border);
|
||||
}
|
||||
|
||||
.lgn-input,
|
||||
select,
|
||||
.lgn-select {
|
||||
color: var(--zitadel-color-text);
|
||||
background-color: var(--zitadel-color-input-background);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--zitadel-color-input-border-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: var(--zitadel-color-input-border-active);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--zitadel-color-input-border-active);
|
||||
}
|
||||
|
||||
// overwrite if state is warn
|
||||
&[color="warn"] {
|
||||
border-color: var(--zitadel-color-warn);
|
||||
}
|
||||
}
|
||||
|
||||
.lgn-input::placeholder,
|
||||
select::placeholder,
|
||||
.lgn-select::placeholder {
|
||||
color: var(--zitadel-color-input-placeholder);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,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);
|
||||
|
||||
@ -18,30 +17,18 @@
|
||||
--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-font-family: "Lato";
|
||||
|
||||
--zitadel-color-background-50: rgb(255, 255, 255);
|
||||
--zitadel-color-background-100: rgb(255, 255, 255);
|
||||
@ -57,9 +44,10 @@
|
||||
|
||||
--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);
|
||||
@ -73,23 +61,34 @@
|
||||
--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;
|
||||
@ -104,8 +103,8 @@
|
||||
--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-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;
|
||||
@ -126,29 +125,18 @@
|
||||
--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-font-family: "Lato";
|
||||
|
||||
--zitadel-color-background-50: rgb(60, 60, 60);
|
||||
--zitadel-color-background-100: rgb(55, 55, 55);
|
||||
@ -167,6 +155,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);
|
||||
@ -180,28 +169,38 @@
|
||||
--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');
|
||||
|
||||
--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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -40,7 +40,7 @@
|
||||
{{ template "error-message" .}}
|
||||
|
||||
<div class="lgn-actions">
|
||||
<a class="lgn-stroked-button lgn-primary" href="{{ loginUrl }}">
|
||||
<a class="lgn-stroked-button" href="{{ loginUrl }}">
|
||||
{{t "PasswordChange.CancelButtonText"}}
|
||||
</a>
|
||||
<span class="fill-space"></span>
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
{{ template "error-message" .}}
|
||||
|
||||
<div class="lgn-actions">
|
||||
<a class="lgn-stroked-button lgn-primary" href="{{ loginUrl }}">
|
||||
<a class="lgn-stroked-button" href="{{ loginUrl }}">
|
||||
{{t "UsernameChange.CancelButtonText"}}
|
||||
</a>
|
||||
<span class="fill-space"></span>
|
||||
|
||||
@ -100,7 +100,7 @@
|
||||
{{template "error-message" .}}
|
||||
|
||||
<div class="lgn-actions">
|
||||
<a class="lgn-stroked-button lgn-primary" href="{{ registerOptionUrl }}">
|
||||
<a class="lgn-stroked-button" href="{{ registerOptionUrl }}">
|
||||
{{t "ExternalRegistrationUserOverview.BackButtonText"}}
|
||||
</a>
|
||||
<span class="fill-space"></span>
|
||||
|
||||
@ -1,28 +1,28 @@
|
||||
{{template "main-top" .}}
|
||||
|
||||
<div class="lgn-head">
|
||||
<h1>{{t "InitUserDone.Title"}}</h1>
|
||||
<h1>{{t "InitUserDone.Title"}}</h1>
|
||||
|
||||
{{ template "user-profile" . }}
|
||||
{{ template "user-profile" . }}
|
||||
|
||||
<p>{{t "InitUserDone.Description"}}</p>
|
||||
<p>{{t "InitUserDone.Description"}}</p>
|
||||
</div>
|
||||
|
||||
<form action="{{ loginUrl }}" method="POST">
|
||||
{{ .CSRF }}
|
||||
|
||||
{{ .CSRF }}
|
||||
<input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
|
||||
<input type="hidden" name="orgID" value="{{ .OrgID }}" />
|
||||
|
||||
<input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
|
||||
<input type="hidden" name="orgID" value="{{ .OrgID }}" />
|
||||
|
||||
<div class="lgn-actions lgn-reverse-order">
|
||||
<button class="lgn-raised-button lgn-primary" type="submit">{{t "InitUserDone.NextButtonText"}}</button>
|
||||
<span class="fill-space"></span>
|
||||
<a class="lgn-stroked-button lgn-primary" href="{{ loginUrl }}">
|
||||
{{t "InitUserDone.CancelButtonText"}}
|
||||
</a>
|
||||
</div>
|
||||
<div class="lgn-actions lgn-reverse-order">
|
||||
<button class="lgn-raised-button lgn-primary" type="submit">
|
||||
{{t "InitUserDone.NextButtonText"}}
|
||||
</button>
|
||||
<span class="fill-space"></span>
|
||||
<a class="lgn-stroked-button" href="{{ loginUrl }}">
|
||||
{{t "InitUserDone.CancelButtonText"}}
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
{{template "main-bottom" .}}
|
||||
|
||||
@ -1,26 +1,26 @@
|
||||
{{template "main-top" .}}
|
||||
|
||||
<div class="lgn-head">
|
||||
<h1>{{t "LinkingUsersDone.Title"}}</h1>
|
||||
{{ template "user-profile" . }}
|
||||
<h1>{{t "LinkingUsersDone.Title"}}</h1>
|
||||
{{ template "user-profile" . }}
|
||||
|
||||
<p>{{t "LinkingUsersDone.Description"}}</p>
|
||||
<p>{{t "LinkingUsersDone.Description"}}</p>
|
||||
</div>
|
||||
|
||||
<form action="{{ loginUrl }}" method="POST">
|
||||
{{ .CSRF }}
|
||||
|
||||
{{ .CSRF }}
|
||||
<input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
|
||||
|
||||
<input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
|
||||
|
||||
<div class="lgn-actions">
|
||||
<a class="lgn-stroked-button lgn-primary" href="{{ loginUrl }}">
|
||||
{{t "LinkingUsersDone.CancelButtonText"}}
|
||||
</a>
|
||||
<span class="fill-space"></span>
|
||||
<button class="lgn-raised-button lgn-primary" type="submit">{{t "LinkingUsersDone.NextButtonText"}}</button>
|
||||
</div>
|
||||
<div class="lgn-actions">
|
||||
<a class="lgn-stroked-button" href="{{ loginUrl }}">
|
||||
{{t "LinkingUsersDone.CancelButtonText"}}
|
||||
</a>
|
||||
<span class="fill-space"></span>
|
||||
<button class="lgn-raised-button lgn-primary" type="submit">
|
||||
{{t "LinkingUsersDone.NextButtonText"}}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
{{template "main-bottom" .}}
|
||||
{{template "main-bottom" .}}
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
<button class="lgn-raised-button lgn-primary lgn-initial-focus" id="submit-button" type="submit">{{t "Login.NextButtonText"}}</button>
|
||||
<span class="fill-space"></span>
|
||||
{{if .LoginPolicy.AllowRegister}}
|
||||
<button class="lgn-stroked-button lgn-primary" name="register" value="true" formnovalidate>{{t "Login.RegisterButtonText"}}</button>
|
||||
<button class="lgn-stroked-button" name="register" value="true" formnovalidate>{{t "Login.RegisterButtonText"}}</button>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
<span class="fill-space"></span>
|
||||
|
||||
{{ if .UserID }}
|
||||
<button type="submit" name="resend" value="true" class="lgn-stroked-button lgn-primary" formnovalidate>{{t "EmailVerification.ResendButtonText"}}</button>
|
||||
<button type="submit" name="resend" value="true" class="lgn-stroked-button" formnovalidate>{{t "EmailVerification.ResendButtonText"}}</button>
|
||||
{{ end }}
|
||||
|
||||
<a class="lgn-icon-button lgn-left-action" name="resetlinking" value="true" href="{{ loginUrl }}"
|
||||
|
||||
@ -1,33 +1,28 @@
|
||||
{{template "main-top" .}}
|
||||
|
||||
<div class="lgn-head">
|
||||
<h1>{{t "EmailVerificationDone.Title"}}</h1>
|
||||
{{ template "user-profile" . }}
|
||||
<h1>{{t "EmailVerificationDone.Title"}}</h1>
|
||||
{{ template "user-profile" . }}
|
||||
|
||||
<p>{{t "EmailVerificationDone.Description"}}</p>
|
||||
<p>{{t "EmailVerificationDone.Description"}}</p>
|
||||
</div>
|
||||
|
||||
<form action="{{ loginUrl }}" method="POST">
|
||||
{{ .CSRF }}
|
||||
|
||||
{{ .CSRF }}
|
||||
<input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
|
||||
<input type="hidden" name="orgID" value="{{ .OrgID }}" />
|
||||
|
||||
<input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
|
||||
<input type="hidden" name="orgID" value="{{ .OrgID }}" />
|
||||
|
||||
<div class="lgn-actions">
|
||||
<a class="lgn-stroked-button lgn-primary" href="{{ loginUrl }}">
|
||||
{{t "EmailVerificationDone.CancelButtonText"}}
|
||||
</a>
|
||||
<span class="fill-space"></span>
|
||||
<button class="lgn-raised-button lgn-primary" type="submit">
|
||||
{{if .AuthReqID }}
|
||||
{{t "EmailVerificationDone.NextButtonText"}}
|
||||
{{else}}
|
||||
{{t "EmailVerificationDone.LoginButtonText"}}
|
||||
{{end}}
|
||||
</button>
|
||||
</div>
|
||||
<div class="lgn-actions">
|
||||
<a class="lgn-stroked-button" href="{{ loginUrl }}">
|
||||
{{t "EmailVerificationDone.CancelButtonText"}}
|
||||
</a>
|
||||
<span class="fill-space"></span>
|
||||
<button class="lgn-raised-button lgn-primary" type="submit">
|
||||
{{if .AuthReqID }} {{t "EmailVerificationDone.NextButtonText"}} {{else}}
|
||||
{{t "EmailVerificationDone.LoginButtonText"}} {{end}}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
{{template "main-bottom" .}}
|
||||
|
||||
@ -1,28 +1,28 @@
|
||||
{{template "main-top" .}}
|
||||
|
||||
<div class="lgn-head">
|
||||
<h1>{{t "InitMFADone.Title"}}</h1>
|
||||
<h1>{{t "InitMFADone.Title"}}</h1>
|
||||
|
||||
{{ template "user-profile" . }}
|
||||
{{ template "user-profile" . }}
|
||||
|
||||
<p>{{t "InitMFADone.Description"}}</p>
|
||||
<p>{{t "InitMFADone.Description"}}</p>
|
||||
</div>
|
||||
|
||||
<form action="{{ loginUrl }}" method="POST">
|
||||
{{ .CSRF }}
|
||||
|
||||
{{ .CSRF }}
|
||||
<input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
|
||||
<input type="hidden" name="mfaType" value="{{ .MFAType }}" />
|
||||
|
||||
<input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
|
||||
<input type="hidden" name="mfaType" value="{{ .MFAType }}" />
|
||||
|
||||
<div class="lgn-actions">
|
||||
<a class="lgn-stroked-button lgn-primary" href="{{ loginUrl }}">
|
||||
{{t "InitMFADone.CancelButtonText"}}
|
||||
</a>
|
||||
<span class="fill-space"></span>
|
||||
<button class="lgn-raised-button lgn-primary" type="submit">{{t "InitMFADone.NextButtonText"}}</button>
|
||||
</div>
|
||||
<div class="lgn-actions">
|
||||
<a class="lgn-stroked-button" href="{{ loginUrl }}">
|
||||
{{t "InitMFADone.CancelButtonText"}}
|
||||
</a>
|
||||
<span class="fill-space"></span>
|
||||
<button class="lgn-raised-button lgn-primary" type="submit">
|
||||
{{t "InitMFADone.NextButtonText"}}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
{{template "main-bottom" .}}
|
||||
{{template "main-bottom" .}}
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
<i class="lgn-icon-arrow-left-solid"></i>
|
||||
</a>
|
||||
|
||||
<a class="lgn-stroked-button lgn-primary" href="{{ loginUrl }}">
|
||||
<a class="lgn-stroked-button" href="{{ loginUrl }}">
|
||||
{{t "InitMFAOTP.CancelButtonText"}}
|
||||
</a>
|
||||
<span class="fill-space"></span>
|
||||
|
||||
@ -1,41 +1,54 @@
|
||||
{{template "main-top" .}}
|
||||
|
||||
<div class="lgn-head">
|
||||
<h1>{{t "InitMFAPrompt.Title"}}</h1>
|
||||
{{ template "user-profile" . }}
|
||||
<h1>{{t "InitMFAPrompt.Title"}}</h1>
|
||||
{{ template "user-profile" . }}
|
||||
|
||||
<p>{{t "InitMFAPrompt.Description"}}</p>
|
||||
<p>{{t "InitMFAPrompt.Description"}}</p>
|
||||
</div>
|
||||
|
||||
<form action="{{ mfaPromptUrl }}" method="POST">
|
||||
{{ .CSRF }}
|
||||
|
||||
{{ .CSRF }}
|
||||
<input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
|
||||
|
||||
<input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
|
||||
|
||||
<div class="fields">
|
||||
{{ range $provider := .MFAProviders}}
|
||||
{{ $providerName := (t (printf "InitMFAPrompt.Provider%v" $provider)) }}
|
||||
<div class="lgn-radio block">
|
||||
<input id="{{ $provider }}" type="radio" name="provider" value="{{ $provider }}">
|
||||
<label for="{{ $provider }}">{{ $providerName }}</label>
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="fields">
|
||||
{{ range $provider := .MFAProviders}} {{ $providerName := (t (printf
|
||||
"InitMFAPrompt.Provider%v" $provider)) }}
|
||||
<div class="lgn-radio block">
|
||||
<input
|
||||
id="{{ $provider }}"
|
||||
type="radio"
|
||||
name="provider"
|
||||
value="{{ $provider }}"
|
||||
/>
|
||||
<label for="{{ $provider }}">{{ $providerName }}</label>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="lgn-actions">
|
||||
<!-- position element in header -->
|
||||
<a class="lgn-icon-button lgn-left-action" href="{{ loginUrl }}">
|
||||
<i class="lgn-icon-arrow-left-solid"></i>
|
||||
</a>
|
||||
<div class="lgn-actions">
|
||||
<!-- position element in header -->
|
||||
<a class="lgn-icon-button lgn-left-action" href="{{ loginUrl }}">
|
||||
<i class="lgn-icon-arrow-left-solid"></i>
|
||||
</a>
|
||||
|
||||
{{if not .MFARequired}}
|
||||
<button class="lgn-stroked-button lgn-primary" name="skip" value="true" type="submit" formnovalidate>{{t "InitMFAPrompt.SkipButtonText"}}</button>
|
||||
{{end}}
|
||||
<span class="fill-space"></span>
|
||||
<button class="lgn-raised-button lgn-primary" type="submit">{{t "InitMFAPrompt.NextButtonText"}}</button>
|
||||
</div>
|
||||
{{if not .MFARequired}}
|
||||
<button
|
||||
class="lgn-stroked-button"
|
||||
name="skip"
|
||||
value="true"
|
||||
type="submit"
|
||||
formnovalidate
|
||||
>
|
||||
{{t "InitMFAPrompt.SkipButtonText"}}
|
||||
</button>
|
||||
{{end}}
|
||||
<span class="fill-space"></span>
|
||||
<button class="lgn-raised-button lgn-primary" type="submit">
|
||||
{{t "InitMFAPrompt.NextButtonText"}}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
{{template "main-bottom" .}}
|
||||
{{template "main-bottom" .}}
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
<p>{{t "MFAProvider.ChooseOther"}}</p>
|
||||
{{ range $provider := .MFAProviders}}
|
||||
{{ $providerName := (t (printf "MFAProvider.Provider%v" $provider)) }}
|
||||
<button class="lgn-stroked-button lgn-primary" type="submit" name="provider" value="{{$provider}}">{{$providerName}}</button>
|
||||
<button class="lgn-stroked-button" type="submit" name="provider" value="{{$provider}}">{{$providerName}}</button>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
<p>{{t "MFAProvider.ChooseOther"}}</p>
|
||||
{{ range $provider := .MFAProviders}}
|
||||
{{ $providerName := (t (printf "MFAProvider.Provider%v" $provider)) }}
|
||||
<button class="lgn-stroked-button lgn-primary" type="submit" name="provider" value="{{$provider}}"
|
||||
<button class="lgn-stroked-button" type="submit" name="provider" value="{{$provider}}"
|
||||
formnovalidate>{{$providerName}}</button>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
|
||||
<div class="lgn-actions">
|
||||
<a href="{{ loginNameChangeUrl .AuthReqID }}">
|
||||
<button class="lgn-stroked-button lgn-primary" type="button">{{t "Password.BackButtonText"}}</button>
|
||||
<button class="lgn-stroked-button" type="button">{{t "Password.BackButtonText"}}</button>
|
||||
</a>
|
||||
<span class="fill-space"></span>
|
||||
<button id="submit-button" class="lgn-raised-button lgn-primary right" type="submit">{{t "Password.NextButtonText"}}</button>
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
</a>
|
||||
|
||||
{{if .PasswordLogin}}
|
||||
<button class="lgn-stroked-button lgn-primary" name="passwordlogin" value="true" type="submit">{{t "Passwordless.LoginWithPwButtonText"}}</button>
|
||||
<button class="lgn-stroked-button" name="passwordlogin" value="true" type="submit">{{t "Passwordless.LoginWithPwButtonText"}}</button>
|
||||
{{end}}
|
||||
<span class="fill-space"></span>
|
||||
<a id="btn-login" class="lgn-raised-button lgn-primary wa-support">{{t "Passwordless.ValidateTokenButtonText"}}</a>
|
||||
|
||||
@ -128,7 +128,7 @@
|
||||
{{template "error-message" .}}
|
||||
|
||||
<div class="lgn-actions">
|
||||
<a class="lgn-stroked-button lgn-primary" href="{{ loginNameChangeUrl .AuthReqID }}">
|
||||
<a class="lgn-stroked-button" href="{{ loginNameChangeUrl .AuthReqID }}">
|
||||
{{t "RegistrationUser.BackButtonText"}}
|
||||
</a>
|
||||
<span class="fill-space"></span>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user