feat: port reduction (#323)

* move mgmt pkg

* begin package restructure

* rename auth package to authz

* begin start api

* move auth

* move admin

* fix merge

* configs and interceptors

* interceptor

* revert generate-grpc.sh

* some cleanups

* console

* move console

* fix tests and merging

* js linting

* merge

* merging and configs

* change k8s base to current ports

* fixes

* cleanup

* regenerate proto

* remove unnecessary whitespace

* missing param

* go mod tidy

* fix merging

* move login pkg

* cleanup

* move api pkgs again

* fix pkg naming

* fix generate-static.sh for login

* update workflow

* fixes

* logging

* remove duplicate

* comment for optional gateway interfaces

* regenerate protos

* fix proto imports for grpc web

* protos

* grpc web generate

* grpc web generate

* fix changes

* add translation interceptor

* fix merging

* regenerate mgmt proto

internal/ui/login/static/resources/fonts/lato/OFL.txt

@@ -0,0 +1,93 @@
+Copyright (c) 2010-2014 by tyPoland Lukasz Dziedzic (team@latofonts.com) with Reserved Font Name "Lato"
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

internal/ui/login/static/resources/generate.go

@@ -0,0 +1,7 @@
+package resources
+
+// scss
+//go:generate sass themes/scss/zitadel/dark.scss themes/zitadel/css/dark.css
+//go:generate sass themes/scss/zitadel/light.scss themes/zitadel/css/light.css
+//go:generate sass themes/scss/caos/dark.scss themes/caos/css/dark.css
+//go:generate sass themes/scss/caos/light.scss themes/caos/css/light.css

internal/ui/login/static/resources/scripts/copy_to_clipboard.js

@@ -0,0 +1,6 @@
+const copyToClipboard = str => {
+    navigator.clipboard.writeText(str);
+}
+
+let copyButton = document.getElementsByClassName("copy")[0];
+copyButton.addEventListener("click", copyToClipboard(copyButton.getAttribute("data-copy")));

internal/ui/login/static/resources/themes/caos/css/dark.css

@@ -0,0 +1,356 @@
+@font-face {
+  font-family: Aileron;
+  src: url(../../../fonts/ailerons/ailerons.otf) format("opentype");
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-Thin.ttf) format("truetype");
+  font-style: normal;
+  font-weight: 100;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-ThinItalic.ttf) format("truetype");
+  font-style: italic;
+  font-weight: 100;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-Light.ttf) format("truetype");
+  font-style: normal;
+  font-weight: 200;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-LightItalic.ttf) format("truetype");
+  font-style: italic;
+  font-weight: 200;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-Regular.ttf) format("truetype");
+  font-style: normal;
+  font-weight: 400;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-Italic.ttf) format("truetype");
+  font-style: italic;
+  font-weight: 400;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-Bold.ttf) format("truetype");
+  font-style: normal;
+  font-weight: 700;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-BoldItalic.ttf) format("truetype");
+  font-style: italic;
+  font-weight: 700;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-Black.ttf) format("truetype");
+  font-style: normal;
+  font-weight: 800;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-BlackItalic.ttf) format("truetype");
+  font-style: italic;
+  font-weight: 800;
+}
+@font-face {
+  font-family: "Material Icons";
+  font-style: normal;
+  font-weight: 400;
+  src: url(../../../fonts/material/MaterialIcons-Regular.eot);
+  /* For IE6-8 */
+  src: local("Material Icons"), local("MaterialIcons-Regular"), url(../../../fonts/material/MaterialIcons-Regular.woff2) format("woff2"), url(../../../fonts/material/MaterialIcons-Regular.woff) format("woff"), url(../../../fonts/material/MaterialIcons-Regular.ttf) format("truetype");
+}
+*, *::before, *::after {
+  box-sizing: border-box;
+  font-family: Lato;
+  font-size: 18px;
+  font-weight: 400;
+}
+
+body {
+  margin: 0;
+}
+
+html {
+  height: 100%;
+  width: 100%;
+  font-weight: 300;
+  background-color: #282828;
+  color: white;
+  background-repeat: no-repeat;
+  background-position: bottom right;
+}
+
+h1 {
+  color: white;
+  font-family: Aileron;
+  font-weight: 300;
+  font-size: 40px;
+}
+
+p {
+  font-weight: 300;
+}
+
+header {
+  padding: 8px;
+}
+header .logo {
+  background-image: url("../logo-dark.png");
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 80px;
+  margin: 30px;
+}
+
+.content {
+  margin: auto;
+  padding: 20px;
+  width: 100%;
+  max-width: 500px;
+}
+
+a {
+  color: #760038;
+  text-decoration: none;
+  font-weight: 400;
+}
+a:hover {
+  color: #f60075;
+}
+
+button {
+  background-color: #282828;
+  color: #760038;
+  border: 2px solid #760038;
+  border-radius: 5px;
+  width: 100%;
+  max-width: 600px;
+  height: 50px;
+  transition: all 0.3s ease 0s;
+  cursor: pointer;
+  outline: none;
+}
+button:hover {
+  background-color: #f60075;
+  border: 2px solid #f60075;
+}
+button.primary {
+  background-color: #760038;
+  color: white;
+  border: none;
+}
+button.primary:hover {
+  background-color: #f60075;
+}
+
+input:not([type=radio]), select {
+  background-color: #252525;
+  color: white;
+  height: 50px;
+  border: 2px solid #505050;
+  border-radius: 5px;
+  padding-left: 15px;
+}
+
+form .field {
+  display: grid;
+  padding: 10px 0;
+}
+form .field.radio-button {
+  display: flex;
+}
+form .field.radio-button input[type=radio] {
+  height: 20px;
+  vertical-align: middle;
+}
+form .field.radio-button label {
+  height: 20px;
+  display: inline-block;
+  padding: 3px 0 0 15px;
+  width: 100%;
+}
+form label {
+  color: #898989;
+  text-transform: uppercase;
+  font-size: 0.9rem;
+  margin-bottom: 3px;
+}
+form label span.optional {
+  font-style: italic;
+  text-transform: none;
+}
+form .actions {
+  padding: 20px 0;
+}
+form .actions .right {
+  float: right;
+}
+form .actions button, form .actions a {
+  margin: 10px 0;
+}
+form button.clean {
+  border: none;
+  height: auto;
+  color: white;
+  text-align: left;
+  text-transform: unset;
+  display: flex;
+  padding: 15px;
+}
+form button.clean:hover {
+  border: none;
+  background-color: #252525;
+}
+form button.clean * {
+  font-weight: 300;
+}
+form .user-selection-list {
+  margin-bottom: 80px;
+}
+form button.user-selection .profile-image {
+  width: 100px;
+  height: 100px;
+  background-image: url("/resources/images/icon-user-dark.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  form button.user-selection .profile-image {
+    background-image: url("/resources/images/icon-user-dark@2x.png");
+    background-size: 100px 100px;
+  }
+}
+form button.user-selection:hover .profile-image {
+  background-image: url("/resources/images/icon-user-dark-hover.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  form button.user-selection:hover .profile-image {
+    background-image: url("/resources/images/icon-user-dark-hover@2x.png");
+    background-size: 100px 100px;
+  }
+}
+form button.user-selection .sessionstate {
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  border-radius: 20px;
+  border-color: #505050;
+  border-style: solid;
+  border-width: 1px;
+  position: absolute;
+  bottom: 0px;
+  right: 10px;
+}
+form button.user-selection .sessionstate.sessionstate-0 {
+  background-color: #138D00;
+}
+form button.user-selection .sessionstate.sessionstate-1 {
+  background-color: #BC372E;
+}
+form button.user-selection > div {
+  position: relative;
+}
+form button.user-selection > div.names {
+  margin: 15px;
+}
+form button.user-selection > div.names .displayname {
+  font-size: 1.4rem;
+}
+form button.user-selection > div.names .loginname {
+  color: #898989;
+}
+.user-selection + form button.other-user {
+  margin-top: 80px;
+}
+form button.other-user .other-user-image {
+  width: 100px;
+  height: 75px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-image: url("/resources/images/icon-newuser-dark.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  form button.other-user .other-user-image {
+    background-image: url("/resources/images/icon-newuser-dark@2x.png");
+    background-size: 100px 75px;
+  }
+}
+form button.other-user:hover .other-user-image {
+  background-repeat: no-repeat;
+  background-position: center;
+  background-image: url("/resources/images/icon-newuser-dark-hover.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  form button.other-user:hover .other-user-image {
+    background-image: url("/resources/images/icon-newuser-dark-hover@2x.png");
+    background-size: 100px 75px;
+  }
+}
+form button.other-user > div:nth-of-type(2) {
+  margin: 15px;
+  font-size: 1.4rem;
+}
+
+#copy-secret {
+  visibility: hidden;
+  position: absolute;
+}
+
+#qrcode {
+  text-align: center;
+}
+#qrcode svg rect.color {
+  fill: white;
+}
+#qrcode svg rect.bg-color {
+  fill: #282828;
+}
+
+#secret .copy {
+  float: right;
+  cursor: pointer;
+}
+
+footer {
+  background-image: url("../gradientdeco-full.svg");
+  width: 100%;
+  background-size: cover;
+  height: 44vw;
+  position: fixed;
+  bottom: 0;
+  z-index: -1;
+}
+
+.material-icons {
+  font-family: "Material Icons";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+  /* Support for IE. */
+  font-feature-settings: "liga";
+}
+
+/*# sourceMappingURL=dark.css.map */

internal/ui/login/static/resources/themes/caos/css/dark.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../scss/fonts.scss","../../scss/main.scss","../../scss/caos/variables.scss","../../scss/variables.scss"],"names":[],"mappings":"AACA;EACI;EACA;;AAIJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;AAA6D;EAC7D;;AC5EJ;EACI;EACA,aCMW;EDLX;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA,kBCDc;EDEd,OCDQ;EDER;EACA;;;AAMJ;EACI,OCVQ;EDWR,aCjBS;EDkBT;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;;;AAGJ;EACI,OCvCW;EDwCX;EACA;;AAEA;EACI,OC3CY;;;AD+CpB;EACI,kBCnDc;EDoDd,OClDW;EDmDX;EACA;EACA;EACA;EACA,QEpEU;EFqEV;EACA;EACA;;AACA;EACI,kBC3DY;ED4DZ;;AAGJ;EACI,kBCjEO;EDkEP,OCnEI;EDoEJ;;AACA;EACI,kBCpEQ;;;ADyEpB;EACI,kBEjEmB;EFkEnB,OC7EQ;ED8ER,QE1FU;EF2FV;EACA;EACA;;;AAIA;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAIR;EACI,OElGK;EFmGL;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;;AAEA;EACI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA,OCrII;EDsIJ;EACA;EACA;EACA;;AAEA;EACI;EACA,kBElIW;;AFqIf;EACI;;AAIR;EACI;;AAIA;EACI;EACA;EE/JV;;AACA;EF4JM;IE3JJ;IACA;;;AFiKQ;EEpKV;;AACA;EFmKU;IElKR;IACA;;;AFsKI;EACI;EACA;EACA;EACA;EACA,cEjKO;EFkKP;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAKR;EACI;;AAEA;EACI;;AAEA;EACI;;AAEJ;EACI,OE7LP;;AFoML;EACI;;AAEJ;EACI;EACA;EACA;EACA;EEvNV;;AACA;EFkNM;IEjNJ;IACA;;;AFyNQ;EACI;EACA;EE9Nd;;AACA;EF2NU;IE1NR;IACA;;;AFgOI;EACI;EACA;;;AAKZ;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI,MChPI;;ADmPR;EACI,MCrPU;;;AD0Pd;EACI;EACA;;;AAIR;EAEQ;EAEJ;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;AAAkB;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;AACA;EACA;AAEA;EACA;AAEA;EACA","file":"dark.css"}

internal/ui/login/static/resources/themes/caos/css/light.css

@@ -0,0 +1,440 @@
+@font-face {
+  font-family: Aileron;
+  src: url(../../../fonts/ailerons/ailerons.otf) format("opentype");
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-Thin.ttf) format("truetype");
+  font-style: normal;
+  font-weight: 100;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-ThinItalic.ttf) format("truetype");
+  font-style: italic;
+  font-weight: 100;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-Light.ttf) format("truetype");
+  font-style: normal;
+  font-weight: 200;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-LightItalic.ttf) format("truetype");
+  font-style: italic;
+  font-weight: 200;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-Regular.ttf) format("truetype");
+  font-style: normal;
+  font-weight: 400;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-Italic.ttf) format("truetype");
+  font-style: italic;
+  font-weight: 400;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-Bold.ttf) format("truetype");
+  font-style: normal;
+  font-weight: 700;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-BoldItalic.ttf) format("truetype");
+  font-style: italic;
+  font-weight: 700;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-Black.ttf) format("truetype");
+  font-style: normal;
+  font-weight: 800;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-BlackItalic.ttf) format("truetype");
+  font-style: italic;
+  font-weight: 800;
+}
+@font-face {
+  font-family: "Material Icons";
+  font-style: normal;
+  font-weight: 400;
+  src: url(../../../fonts/material/MaterialIcons-Regular.eot);
+  /* For IE6-8 */
+  src: local("Material Icons"), local("MaterialIcons-Regular"), url(../../../fonts/material/MaterialIcons-Regular.woff2) format("woff2"), url(../../../fonts/material/MaterialIcons-Regular.woff) format("woff"), url(../../../fonts/material/MaterialIcons-Regular.ttf) format("truetype");
+}
+*, *::before, *::after {
+  box-sizing: border-box;
+  font-family: Lato;
+  font-size: 18px;
+  font-weight: 400;
+}
+
+body {
+  margin: 0;
+}
+
+html {
+  height: 100%;
+  width: 100%;
+  font-weight: 300;
+  background-color: #282828;
+  color: white;
+  background-repeat: no-repeat;
+  background-position: bottom right;
+}
+
+h1 {
+  color: white;
+  font-family: Aileron;
+  font-weight: 300;
+  font-size: 40px;
+}
+
+p {
+  font-weight: 300;
+}
+
+header {
+  padding: 8px;
+}
+header .logo {
+  background-image: url("../logo-dark.png");
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 80px;
+  margin: 30px;
+}
+
+.content {
+  margin: auto;
+  padding: 20px;
+  width: 100%;
+  max-width: 500px;
+}
+
+a {
+  color: #760038;
+  text-decoration: none;
+  font-weight: 400;
+}
+a:hover {
+  color: #f60075;
+}
+
+button {
+  background-color: #282828;
+  color: #760038;
+  border: 2px solid #760038;
+  border-radius: 5px;
+  width: 100%;
+  max-width: 600px;
+  height: 50px;
+  transition: all 0.3s ease 0s;
+  cursor: pointer;
+  outline: none;
+}
+button:hover {
+  background-color: #f60075;
+  border: 2px solid #f60075;
+}
+button.primary {
+  background-color: #760038;
+  color: white;
+  border: none;
+}
+button.primary:hover {
+  background-color: #f60075;
+}
+
+input:not([type=radio]), select {
+  background-color: #252525;
+  color: white;
+  height: 50px;
+  border: 2px solid #505050;
+  border-radius: 5px;
+  padding-left: 15px;
+}
+
+form .field {
+  display: grid;
+  padding: 10px 0;
+}
+form .field.radio-button {
+  display: flex;
+}
+form .field.radio-button input[type=radio] {
+  height: 20px;
+  vertical-align: middle;
+}
+form .field.radio-button label {
+  height: 20px;
+  display: inline-block;
+  padding: 3px 0 0 15px;
+  width: 100%;
+}
+form label {
+  color: #898989;
+  text-transform: uppercase;
+  font-size: 0.9rem;
+  margin-bottom: 3px;
+}
+form label span.optional {
+  font-style: italic;
+  text-transform: none;
+}
+form .actions {
+  padding: 20px 0;
+}
+form .actions .right {
+  float: right;
+}
+form .actions button, form .actions a {
+  margin: 10px 0;
+}
+form button.clean {
+  border: none;
+  height: auto;
+  color: white;
+  text-align: left;
+  text-transform: unset;
+  display: flex;
+  padding: 15px;
+}
+form button.clean:hover {
+  border: none;
+  background-color: #252525;
+}
+form button.clean * {
+  font-weight: 300;
+}
+form .user-selection-list {
+  margin-bottom: 80px;
+}
+form button.user-selection .profile-image {
+  width: 100px;
+  height: 100px;
+  background-image: url("/resources/images/icon-user-dark.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  form button.user-selection .profile-image {
+    background-image: url("/resources/images/icon-user-dark@2x.png");
+    background-size: 100px 100px;
+  }
+}
+form button.user-selection:hover .profile-image {
+  background-image: url("/resources/images/icon-user-dark-hover.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  form button.user-selection:hover .profile-image {
+    background-image: url("/resources/images/icon-user-dark-hover@2x.png");
+    background-size: 100px 100px;
+  }
+}
+form button.user-selection .sessionstate {
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  border-radius: 20px;
+  border-color: #505050;
+  border-style: solid;
+  border-width: 1px;
+  position: absolute;
+  bottom: 0px;
+  right: 10px;
+}
+form button.user-selection .sessionstate.sessionstate-0 {
+  background-color: #138D00;
+}
+form button.user-selection .sessionstate.sessionstate-1 {
+  background-color: #BC372E;
+}
+form button.user-selection > div {
+  position: relative;
+}
+form button.user-selection > div.names {
+  margin: 15px;
+}
+form button.user-selection > div.names .displayname {
+  font-size: 1.4rem;
+}
+form button.user-selection > div.names .loginname {
+  color: #898989;
+}
+.user-selection + form button.other-user {
+  margin-top: 80px;
+}
+form button.other-user .other-user-image {
+  width: 100px;
+  height: 75px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-image: url("/resources/images/icon-newuser-dark.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  form button.other-user .other-user-image {
+    background-image: url("/resources/images/icon-newuser-dark@2x.png");
+    background-size: 100px 75px;
+  }
+}
+form button.other-user:hover .other-user-image {
+  background-repeat: no-repeat;
+  background-position: center;
+  background-image: url("/resources/images/icon-newuser-dark-hover.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  form button.other-user:hover .other-user-image {
+    background-image: url("/resources/images/icon-newuser-dark-hover@2x.png");
+    background-size: 100px 75px;
+  }
+}
+form button.other-user > div:nth-of-type(2) {
+  margin: 15px;
+  font-size: 1.4rem;
+}
+
+#copy-secret {
+  visibility: hidden;
+  position: absolute;
+}
+
+#qrcode {
+  text-align: center;
+}
+#qrcode svg rect.color {
+  fill: white;
+}
+#qrcode svg rect.bg-color {
+  fill: #282828;
+}
+
+#secret .copy {
+  float: right;
+  cursor: pointer;
+}
+
+footer {
+  background-image: url("../gradientdeco-full.svg");
+  width: 100%;
+  background-size: cover;
+  height: 44vw;
+  position: fixed;
+  bottom: 0;
+  z-index: -1;
+}
+
+.material-icons {
+  font-family: "Material Icons";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+  /* Support for IE. */
+  font-feature-settings: "liga";
+}
+
+html {
+  background-color: white;
+  color: #282828;
+}
+html header .logo {
+  background-image: url("../logo-light.png");
+}
+html h1 {
+  color: #282828;
+}
+html button {
+  background-color: white;
+  color: #760038;
+  border: 2px solid #760038;
+}
+html button:hover {
+  background-color: #f60075;
+  border: 2px solid #f60075;
+}
+html button.primary {
+  background-color: #760038;
+  color: white;
+  border: none;
+  box-shadow: 0px 10px 30px #760038;
+}
+html button.primary:hover {
+  background-color: #f60075;
+}
+html button.clean {
+  color: #282828;
+}
+html button.user-selection .profile-image {
+  background-image: url("/resources/images/icon-user-light.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  html button.user-selection .profile-image {
+    background-image: url("/resources/images/icon-user-light@2x.png");
+    background-size: 100px 100px;
+  }
+}
+html button.user-selection:hover {
+  background-color: #252525;
+}
+html button.user-selection:hover .profile-image {
+  background-image: url("/resources/images/icon-user-light-hover.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  html button.user-selection:hover .profile-image {
+    background-image: url("/resources/images/icon-user-light-hover@2x.png");
+    background-size: 100px 100px;
+  }
+}
+html button.other-user .other-user-image {
+  background-image: url("/resources/images/icon-newuser-light.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  html button.other-user .other-user-image {
+    background-image: url("/resources/images/icon-newuser-light@2x.png");
+    background-size: 100px 75px;
+  }
+}
+html button.other-user:hover .other-user-image {
+  background-image: url("/resources/images/icon-newuser-light-hover.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  html button.other-user:hover .other-user-image {
+    background-image: url("/resources/images/icon-newuser-light-hover@2x.png");
+    background-size: 100px 75px;
+  }
+}
+html input {
+  background-color: white;
+  color: #282828;
+}
+html #qrcode svg rect.color {
+  fill: #282828;
+}
+html #qrcode svg rect.bg-color {
+  fill: white;
+}
+html footer {
+  background-image: url("../gradientdeco-full.svg");
+}
+
+/*# sourceMappingURL=light.css.map */

internal/ui/login/static/resources/themes/caos/css/light.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../scss/fonts.scss","../../scss/main.scss","../../scss/caos/variables.scss","../../scss/variables.scss","../../scss/light.scss"],"names":[],"mappings":"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","file":"light.css"}

internal/ui/login/static/resources/themes/scss/caos/dark.scss

@@ -0,0 +1,3 @@
+@import "../variables";
+@import "variables";
+@import "../main";

internal/ui/login/static/resources/themes/scss/caos/light.scss

@@ -0,0 +1,4 @@
+@import "../variables";
+@import "variables";
+@import "../main";
+@import "../light";

internal/ui/login/static/resources/themes/scss/caos/variables.scss

@@ -0,0 +1,27 @@
+$logoImgDark: "../logo-dark.png";
+$logoImgLight: "../logo-light.png";
+
+$footerimgDark: "../gradientdeco-full.svg";
+$footerimgLight: "../gradientdeco-full.svg";
+
+$bodyImgDark: "";
+$bodyImgLight: "";
+
+// ----- FONTS ------------
+$standardFont: Lato;
+$headerFont: Aileron;
+
+// ----- COLORS ------------
+
+// ------ DARK-THEME -------
+$backgroundColor: #282828;
+$fontColor: white;
+$primaryColor: #760038;
+$primaryColorHover: lighten($primaryColor, 25%);
+
+
+// ------ LIGHT-THEME -------
+$backgroundColorLight: $fontColor;
+$fontColorLight: $backgroundColor;
+$primaryColorLight: $primaryColor;
+$primaryColorHoverLight: lighten($primaryColorLight, 25%);

internal/ui/login/static/resources/themes/scss/fonts.scss

@@ -0,0 +1,84 @@
+//Aileron
+@font-face {
+    font-family: Aileron;
+    src: url(../../../fonts/ailerons/ailerons.otf ) format('opentype');
+}
+
+//Lato
+@font-face {
+    font-family: Lato;
+    src: url(../../../fonts/lato/Lato-Thin.ttf ) format('truetype');
+    font-style: normal;
+    font-weight: 100;
+}
+@font-face {
+    font-family: Lato;
+    src: url(../../../fonts/lato/Lato-ThinItalic.ttf ) format('truetype');
+    font-style: italic;
+    font-weight: 100;
+}
+
+@font-face {
+    font-family: Lato;
+    src: url(../../../fonts/lato/Lato-Light.ttf ) format('truetype');
+    font-style: normal;
+    font-weight: 200;
+}
+@font-face {
+    font-family: Lato;
+    src: url(../../../fonts/lato/Lato-LightItalic.ttf ) format('truetype');
+    font-style: italic;
+    font-weight: 200;
+}
+
+@font-face {
+    font-family: Lato;
+    src: url(../../../fonts/lato/Lato-Regular.ttf ) format('truetype');
+    font-style: normal;
+    font-weight: 400;
+}
+@font-face {
+    font-family: Lato;
+    src: url(../../../fonts/lato/Lato-Italic.ttf ) format('truetype');
+    font-style: italic;
+    font-weight: 400;
+}
+
+@font-face {
+    font-family: Lato;
+    src: url(../../../fonts/lato/Lato-Bold.ttf ) format('truetype');
+    font-style: normal;
+    font-weight: 700;
+}
+@font-face {
+    font-family: Lato;
+    src: url(../../../fonts/lato/Lato-BoldItalic.ttf ) format('truetype');
+    font-style: italic;
+    font-weight: 700;
+}
+
+@font-face {
+    font-family: Lato;
+    src: url(../../../fonts/lato/Lato-Black.ttf ) format('truetype');
+    font-style: normal;
+    font-weight: 800;
+}
+@font-face {
+    font-family: Lato;
+    src: url(../../../fonts/lato/Lato-BlackItalic.ttf ) format('truetype');
+    font-style: italic;
+    font-weight: 800;
+}
+
+//Material Icons
+@font-face {
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: url(../../../fonts/material/MaterialIcons-Regular.eot); /* For IE6-8 */
+    src: local('Material Icons'),
+    local('MaterialIcons-Regular'),
+    url(../../../fonts/material/MaterialIcons-Regular.woff2) format('woff2'),
+    url(../../../fonts/material/MaterialIcons-Regular.woff) format('woff'),
+    url(../../../fonts/material/MaterialIcons-Regular.ttf) format('truetype');
+}

internal/ui/login/static/resources/themes/scss/light.scss

@@ -0,0 +1,88 @@
+// ---- LIGHT-THEME-------
+html {
+    background-color: $backgroundColorLight;
+    color: $fontColorLight;
+    @if($bodyImgLight != "") {
+        background-image: url($bodyImgLight);
+    }
+    
+    header .logo {
+        background-image: url($logoImgLight);
+    }
+
+    h1 {
+        color: $fontColorLight;
+    }
+
+    button {
+        background-color: $backgroundColorLight;
+        color: $primaryColorLight;
+        border: 2px solid $primaryColorLight;
+
+        &:hover {
+            background-color: $primaryColorHoverLight;
+            border: 2px solid $primaryColorHoverLight;
+        }
+
+        &.primary {
+            background-color: $primaryColor;
+            color: $fontColor;
+            border: none;
+            box-shadow: 0px 10px 30px $primaryColor;
+            &:hover {
+                background-color: $primaryColorHover;
+            }
+        }
+
+        &.clean {
+            color: $fontColorLight;
+        }
+
+        &.user-selection {
+            .profile-image {
+                @include retina-background-image($profileImgLight, "png", false, 100px, 100px);
+            }
+
+            &:hover {
+                background-color: $buttonBackgroundColorHover;
+
+                .profile-image {
+                    @include retina-background-image($profileImgLight, "png", true, 100px, 100px);
+                }
+            }
+        }
+
+        &.other-user {
+            .other-user-image {
+                @include retina-background-image($otherUserImgLight, "png", false, 100px, 75px);
+            }
+
+            &:hover {
+                .other-user-image {
+                    @include retina-background-image($otherUserImgLight, "png", true, 100px, 75px);
+                }
+            }
+        }
+    }
+
+    input {
+        background-color: $backgroundColorLight;
+        color: $fontColorLight;
+    }
+
+    #qrcode {
+        svg rect.color {
+            fill: $fontColorLight;
+        }
+
+        svg rect.bg-color {
+            fill: $backgroundColorLight;
+        }
+    }
+
+    footer {
+        @if($footerimgLight != "") {
+            background-image: url($footerimgLight);
+        }
+    }
+}

internal/ui/login/static/resources/themes/scss/main.scss

@@ -0,0 +1,308 @@
+@import "fonts";
+
+*, *::before, *::after {
+    box-sizing: border-box;
+    font-family: $standardFont;
+    font-size: 18px;
+    font-weight: 400;
+}
+
+body {
+    margin: 0;
+}
+
+html {
+    height: 100%;
+    width: 100%;
+    font-weight: 300;
+    background-color: $backgroundColor;
+    color: $fontColor;
+    background-repeat: no-repeat;
+    background-position: bottom right;
+    @if($bodyImgDark != "") {
+        background-image: url($bodyImgDark);
+    }
+}
+
+h1 {
+    color: $fontColor;
+    font-family: $headerFont;
+    font-weight: 300;
+    font-size: 40px;
+}
+
+p {
+    font-weight: 300;
+}
+
+header {
+    padding: 8px;
+
+    .logo {
+        background-image: url($logoImgDark);
+        background-repeat: no-repeat;
+        background-size: contain;
+        height: 80px;
+        margin: 30px;
+    }
+}
+
+.content {
+    margin: auto;
+    padding: 20px;
+    width: 100%;
+    max-width: 500px;
+}
+
+a {
+    color: $primaryColor;
+    text-decoration: none;
+    font-weight: 400;
+
+    &:hover {
+        color: $primaryColorHover;
+    }
+}
+
+button {
+    background-color: $backgroundColor;
+    color: $primaryColor;
+    border: 2px solid $primaryColor;
+    border-radius: 5px;
+    width: 100%;
+    max-width: 600px;
+    height: $inputHeight;
+    transition: all 0.3s ease 0s;
+    cursor: pointer;
+    outline: none;
+    &:hover {
+        background-color: $primaryColorHover;
+        border: 2px solid $primaryColorHover;
+    }
+
+    &.primary {
+        background-color: $primaryColor;
+        color: $fontColor;
+        border: none;
+        &:hover {
+            background-color: $primaryColorHover;
+        }
+    }
+}
+
+input:not([type='radio']), select {
+    background-color: $inputBackgroundColor;
+    color: $fontColor;
+    height: $inputHeight;
+    border: 2px solid $inputBorderColor;
+    border-radius: 5px;
+    padding-left: 15px;
+}
+
+form {
+    .field {
+        display: grid;
+        padding: 10px 0;
+    }
+
+    .field.radio-button {
+        display: flex;
+
+        input[type='radio'] {
+            height: 20px;
+            vertical-align: middle;
+        }
+
+        & label {
+            height: 20px;
+            display: inline-block;
+            padding: 3px 0 0 15px;
+            width: 100%;
+        }
+    }
+
+    label {
+        color: $labelColor;
+        text-transform: uppercase;
+        font-size: 0.9rem;
+        margin-bottom: 3px;
+
+        span.optional {
+            font-style: italic;
+            text-transform: none;
+        }
+    }
+
+    .actions {
+        padding: 20px 0;
+
+        .right {
+            float: right;
+        }
+
+        button, a {
+            margin: 10px 0;
+        }
+    }
+
+    button.clean {
+        border: none;
+        height: auto;
+        color: $fontColor;
+        text-align: left;
+        text-transform: unset;
+        display: flex;
+        padding: 15px;
+
+        &:hover {
+            border: none;
+            background-color: $buttonBackgroundColorHover;
+        }
+
+        * {
+            font-weight: 300;
+        }
+    }
+
+    .user-selection-list {
+        margin-bottom: 80px;
+    }
+
+    button.user-selection {
+        .profile-image {
+            width: 100px;
+            height: 100px;
+            @include retina-background-image($profileImgDark, "png", false, 100px, 100px);
+        }
+
+        &:hover {
+            .profile-image {
+                @include retina-background-image($profileImgDark, "png", true, 100px, 100px);
+            }
+        }
+
+        .sessionstate {
+            display: inline-block;
+            height: 20px;
+            width: 20px;
+            border-radius: 20px;
+            border-color: $inputBorderColor;
+            border-style: solid;
+            border-width: 1px;
+            position: absolute;
+            bottom: 0px;
+            right: 10px;
+
+            &.sessionstate-0 {
+                background-color: #138D00;
+            }
+
+            &.sessionstate-1 {
+                background-color: #BC372E;
+            }
+        }
+
+
+        & > div {
+            position: relative;
+
+            &.names {
+                margin: 15px;
+
+                .displayname {
+                    font-size: 1.4rem;
+                }
+                .loginname {
+                    color: $labelColor;
+                }
+            }
+        }
+    }
+
+    button.other-user {
+        .user-selection+&{
+            margin-top: 80px;
+        }
+        .other-user-image {
+            width: 100px;
+            height: 75px;
+            background-repeat: no-repeat;
+            background-position: center;
+            @include retina-background-image($otherUserImgDark, "png", false, 100px, 75px);
+        }
+
+        &:hover {
+            .other-user-image {
+                background-repeat: no-repeat;
+                background-position: center;
+                @include retina-background-image($otherUserImgDark, "png", true, 100px, 75px);
+            }
+        }
+
+        & > div:nth-of-type(2) {
+            margin: 15px;
+            font-size: 1.4rem;
+        }
+    }
+}
+
+#copy-secret {
+    visibility: hidden;
+    position: absolute;
+}
+
+#qrcode {
+    text-align: center;
+
+    svg rect.color {
+        fill: $fontColor;
+    }
+
+    svg rect.bg-color {
+        fill: $backgroundColor;
+    }
+}
+
+#secret {
+    .copy {
+        float: right;
+        cursor: pointer;
+    }
+}
+
+footer {
+    @if($footerimgDark != "") {
+        background-image: url($footerimgDark);
+    }
+    width: 100%;
+    background-size: cover;
+    height: 44vw;
+    position: fixed;
+    bottom: 0;
+    z-index: -1;
+}
+
+.material-icons {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;  /* Preferred icon size */
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+
+    /* Support for all WebKit browsers. */
+    -webkit-font-smoothing: antialiased;
+    /* Support for Safari and Chrome. */
+    text-rendering: optimizeLegibility;
+
+    /* Support for Firefox. */
+    -moz-osx-font-smoothing: grayscale;
+
+    /* Support for IE. */
+    font-feature-settings: 'liga';
+}

internal/ui/login/static/resources/themes/scss/variables.scss

@@ -0,0 +1,42 @@
+// ----- FONTS ------------
+$standardFont: Lato;
+$headerFont: Lato;
+
+// ----- LAYOUT ------------
+$inputHeight: 50px;
+$retina: "only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)";
+
+@mixin retina-background-image($file, $type, $hover, $width, $height) {
+  $hovername: '';
+  @if $hover {
+    $hovername: '-hover';
+  }
+  $filename :$file + $hovername;
+  background-image: url($filename + '.' + $type);
+  @media #{$retina} {
+    background-image: url($filename + '@2x.' + $type);
+    background-size: $width $height;
+  }
+}
+
+// ----- DARK-THEME --------
+$backgroundColor: #282828;
+$fontColor: #BBBBC8;
+$primaryColor: #3574C6;
+$primaryColorHover: lighten($primaryColor, 10%);
+$labelColor: #898989;
+$inputBorderColor: #505050;
+$inputBackgroundColor: #252525;
+$buttonBackgroundColorHover: $inputBackgroundColor;
+$profileImgDark: "/resources/images/icon-user-dark";
+$otherUserImgDark: "/resources/images/icon-newuser-dark";
+
+
+// ----- LIGHT-THEME --------
+$backgroundColorLight: $fontColor;
+$fontColorLight: $backgroundColor;
+$primaryColorLight: $primaryColor;
+$primaryColorHoverLight: lighten($primaryColorLight, 10%);
+$buttonBackgroundColorHoverLight: #EFEFEF;
+$profileImgLight: "/resources/images/icon-user-light";
+$otherUserImgLight: "/resources/images/icon-newuser-light";

internal/ui/login/static/resources/themes/scss/zitadel/dark.scss

@@ -0,0 +1,3 @@
+@import "../variables";
+@import "variables";
+@import "../main";

internal/ui/login/static/resources/themes/scss/zitadel/light.scss

@@ -0,0 +1,4 @@
+@import "../variables";
+@import "variables";
+@import "../main";
+@import "../light";

internal/ui/login/static/resources/themes/scss/zitadel/variables.scss

@@ -0,0 +1,8 @@
+$logoImgDark: "../logo-dark.png";
+$logoImgLight: "../logo-light.png";
+
+$footerimgDark: "";
+$footerimgLight: "";
+
+$bodyImgDark: "../flavor-spikes01-narrow.png";
+$bodyImgLight: "../flavor-spikes01-narrow.png";

internal/ui/login/static/resources/themes/zitadel/css/dark.css

@@ -0,0 +1,356 @@
+@font-face {
+  font-family: Aileron;
+  src: url(../../../fonts/ailerons/ailerons.otf) format("opentype");
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-Thin.ttf) format("truetype");
+  font-style: normal;
+  font-weight: 100;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-ThinItalic.ttf) format("truetype");
+  font-style: italic;
+  font-weight: 100;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-Light.ttf) format("truetype");
+  font-style: normal;
+  font-weight: 200;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-LightItalic.ttf) format("truetype");
+  font-style: italic;
+  font-weight: 200;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-Regular.ttf) format("truetype");
+  font-style: normal;
+  font-weight: 400;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-Italic.ttf) format("truetype");
+  font-style: italic;
+  font-weight: 400;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-Bold.ttf) format("truetype");
+  font-style: normal;
+  font-weight: 700;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-BoldItalic.ttf) format("truetype");
+  font-style: italic;
+  font-weight: 700;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-Black.ttf) format("truetype");
+  font-style: normal;
+  font-weight: 800;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-BlackItalic.ttf) format("truetype");
+  font-style: italic;
+  font-weight: 800;
+}
+@font-face {
+  font-family: "Material Icons";
+  font-style: normal;
+  font-weight: 400;
+  src: url(../../../fonts/material/MaterialIcons-Regular.eot);
+  /* For IE6-8 */
+  src: local("Material Icons"), local("MaterialIcons-Regular"), url(../../../fonts/material/MaterialIcons-Regular.woff2) format("woff2"), url(../../../fonts/material/MaterialIcons-Regular.woff) format("woff"), url(../../../fonts/material/MaterialIcons-Regular.ttf) format("truetype");
+}
+*, *::before, *::after {
+  box-sizing: border-box;
+  font-family: Lato;
+  font-size: 18px;
+  font-weight: 400;
+}
+
+body {
+  margin: 0;
+}
+
+html {
+  height: 100%;
+  width: 100%;
+  font-weight: 300;
+  background-color: #282828;
+  color: #BBBBC8;
+  background-repeat: no-repeat;
+  background-position: bottom right;
+  background-image: url("../flavor-spikes01-narrow.png");
+}
+
+h1 {
+  color: #BBBBC8;
+  font-family: Lato;
+  font-weight: 300;
+  font-size: 40px;
+}
+
+p {
+  font-weight: 300;
+}
+
+header {
+  padding: 8px;
+}
+header .logo {
+  background-image: url("../logo-dark.png");
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 80px;
+  margin: 30px;
+}
+
+.content {
+  margin: auto;
+  padding: 20px;
+  width: 100%;
+  max-width: 500px;
+}
+
+a {
+  color: #3574C6;
+  text-decoration: none;
+  font-weight: 400;
+}
+a:hover {
+  color: #5b8fd3;
+}
+
+button {
+  background-color: #282828;
+  color: #3574C6;
+  border: 2px solid #3574C6;
+  border-radius: 5px;
+  width: 100%;
+  max-width: 600px;
+  height: 50px;
+  transition: all 0.3s ease 0s;
+  cursor: pointer;
+  outline: none;
+}
+button:hover {
+  background-color: #5b8fd3;
+  border: 2px solid #5b8fd3;
+}
+button.primary {
+  background-color: #3574C6;
+  color: #BBBBC8;
+  border: none;
+}
+button.primary:hover {
+  background-color: #5b8fd3;
+}
+
+input:not([type=radio]), select {
+  background-color: #252525;
+  color: #BBBBC8;
+  height: 50px;
+  border: 2px solid #505050;
+  border-radius: 5px;
+  padding-left: 15px;
+}
+
+form .field {
+  display: grid;
+  padding: 10px 0;
+}
+form .field.radio-button {
+  display: flex;
+}
+form .field.radio-button input[type=radio] {
+  height: 20px;
+  vertical-align: middle;
+}
+form .field.radio-button label {
+  height: 20px;
+  display: inline-block;
+  padding: 3px 0 0 15px;
+  width: 100%;
+}
+form label {
+  color: #898989;
+  text-transform: uppercase;
+  font-size: 0.9rem;
+  margin-bottom: 3px;
+}
+form label span.optional {
+  font-style: italic;
+  text-transform: none;
+}
+form .actions {
+  padding: 20px 0;
+}
+form .actions .right {
+  float: right;
+}
+form .actions button, form .actions a {
+  margin: 10px 0;
+}
+form button.clean {
+  border: none;
+  height: auto;
+  color: #BBBBC8;
+  text-align: left;
+  text-transform: unset;
+  display: flex;
+  padding: 15px;
+}
+form button.clean:hover {
+  border: none;
+  background-color: #252525;
+}
+form button.clean * {
+  font-weight: 300;
+}
+form .user-selection-list {
+  margin-bottom: 80px;
+}
+form button.user-selection .profile-image {
+  width: 100px;
+  height: 100px;
+  background-image: url("/resources/images/icon-user-dark.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  form button.user-selection .profile-image {
+    background-image: url("/resources/images/icon-user-dark@2x.png");
+    background-size: 100px 100px;
+  }
+}
+form button.user-selection:hover .profile-image {
+  background-image: url("/resources/images/icon-user-dark-hover.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  form button.user-selection:hover .profile-image {
+    background-image: url("/resources/images/icon-user-dark-hover@2x.png");
+    background-size: 100px 100px;
+  }
+}
+form button.user-selection .sessionstate {
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  border-radius: 20px;
+  border-color: #505050;
+  border-style: solid;
+  border-width: 1px;
+  position: absolute;
+  bottom: 0px;
+  right: 10px;
+}
+form button.user-selection .sessionstate.sessionstate-0 {
+  background-color: #138D00;
+}
+form button.user-selection .sessionstate.sessionstate-1 {
+  background-color: #BC372E;
+}
+form button.user-selection > div {
+  position: relative;
+}
+form button.user-selection > div.names {
+  margin: 15px;
+}
+form button.user-selection > div.names .displayname {
+  font-size: 1.4rem;
+}
+form button.user-selection > div.names .loginname {
+  color: #898989;
+}
+.user-selection + form button.other-user {
+  margin-top: 80px;
+}
+form button.other-user .other-user-image {
+  width: 100px;
+  height: 75px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-image: url("/resources/images/icon-newuser-dark.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  form button.other-user .other-user-image {
+    background-image: url("/resources/images/icon-newuser-dark@2x.png");
+    background-size: 100px 75px;
+  }
+}
+form button.other-user:hover .other-user-image {
+  background-repeat: no-repeat;
+  background-position: center;
+  background-image: url("/resources/images/icon-newuser-dark-hover.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  form button.other-user:hover .other-user-image {
+    background-image: url("/resources/images/icon-newuser-dark-hover@2x.png");
+    background-size: 100px 75px;
+  }
+}
+form button.other-user > div:nth-of-type(2) {
+  margin: 15px;
+  font-size: 1.4rem;
+}
+
+#copy-secret {
+  visibility: hidden;
+  position: absolute;
+}
+
+#qrcode {
+  text-align: center;
+}
+#qrcode svg rect.color {
+  fill: #BBBBC8;
+}
+#qrcode svg rect.bg-color {
+  fill: #282828;
+}
+
+#secret .copy {
+  float: right;
+  cursor: pointer;
+}
+
+footer {
+  width: 100%;
+  background-size: cover;
+  height: 44vw;
+  position: fixed;
+  bottom: 0;
+  z-index: -1;
+}
+
+.material-icons {
+  font-family: "Material Icons";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+  /* Support for IE. */
+  font-feature-settings: "liga";
+}
+
+/*# sourceMappingURL=dark.css.map */

internal/ui/login/static/resources/themes/zitadel/css/dark.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../scss/fonts.scss","../../scss/main.scss","../../scss/variables.scss"],"names":[],"mappings":"AACA;EACI;EACA;;AAIJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;AAA6D;EAC7D;;AC5EJ;EACI;EACA,aCHW;EDIX;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA,kBCKc;EDJd,OCKQ;EDJR;EACA;EAEI;;;AAIR;EACI,OCJQ;EDKR,aC1BS;ED2BT;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;;;AAGJ;EACI,OCjCW;EDkCX;EACA;;AAEA;EACI,OCrCY;;;ADyCpB;EACI,kBC7Cc;ED8Cd,OC5CW;ED6CX;EACA;EACA;EACA;EACA,QCpEU;EDqEV;EACA;EACA;;AACA;EACI,kBCrDY;EDsDZ;;AAGJ;EACI,kBC3DO;ED4DP,OC7DI;ED8DJ;;AACA;EACI,kBC9DQ;;;ADmEpB;EACI,kBCjEmB;EDkEnB,OCvEQ;EDwER,QC1FU;ED2FV;EACA;EACA;;;AAIA;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAIR;EACI,OClGK;EDmGL;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;;AAEA;EACI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA,OC/HI;EDgIJ;EACA;EACA;EACA;;AAEA;EACI;EACA,kBClIW;;ADqIf;EACI;;AAIR;EACI;;AAIA;EACI;EACA;EC/JV;;AACA;ED4JM;IC3JJ;IACA;;;ADiKQ;ECpKV;;AACA;EDmKU;IClKR;IACA;;;ADsKI;EACI;EACA;EACA;EACA;EACA,cCjKO;EDkKP;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAKR;EACI;;AAEA;EACI;;AAEA;EACI;;AAEJ;EACI,OC7LP;;ADoML;EACI;;AAEJ;EACI;EACA;EACA;EACA;ECvNV;;AACA;EDkNM;ICjNJ;IACA;;;ADyNQ;EACI;EACA;EC9Nd;;AACA;ED2NU;IC1NR;IACA;;;ADgOI;EACI;EACA;;;AAKZ;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI,MC1OI;;AD6OR;EACI,MC/OU;;;ADoPd;EACI;EACA;;;AAIR;EAII;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;AAAkB;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;AACA;EACA;AAEA;EACA;AAEA;EACA","file":"dark.css"}

internal/ui/login/static/resources/themes/zitadel/css/light.css

@@ -0,0 +1,438 @@
+@font-face {
+  font-family: Aileron;
+  src: url(../../../fonts/ailerons/ailerons.otf) format("opentype");
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-Thin.ttf) format("truetype");
+  font-style: normal;
+  font-weight: 100;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-ThinItalic.ttf) format("truetype");
+  font-style: italic;
+  font-weight: 100;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-Light.ttf) format("truetype");
+  font-style: normal;
+  font-weight: 200;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-LightItalic.ttf) format("truetype");
+  font-style: italic;
+  font-weight: 200;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-Regular.ttf) format("truetype");
+  font-style: normal;
+  font-weight: 400;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-Italic.ttf) format("truetype");
+  font-style: italic;
+  font-weight: 400;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-Bold.ttf) format("truetype");
+  font-style: normal;
+  font-weight: 700;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-BoldItalic.ttf) format("truetype");
+  font-style: italic;
+  font-weight: 700;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-Black.ttf) format("truetype");
+  font-style: normal;
+  font-weight: 800;
+}
+@font-face {
+  font-family: Lato;
+  src: url(../../../fonts/lato/Lato-BlackItalic.ttf) format("truetype");
+  font-style: italic;
+  font-weight: 800;
+}
+@font-face {
+  font-family: "Material Icons";
+  font-style: normal;
+  font-weight: 400;
+  src: url(../../../fonts/material/MaterialIcons-Regular.eot);
+  /* For IE6-8 */
+  src: local("Material Icons"), local("MaterialIcons-Regular"), url(../../../fonts/material/MaterialIcons-Regular.woff2) format("woff2"), url(../../../fonts/material/MaterialIcons-Regular.woff) format("woff"), url(../../../fonts/material/MaterialIcons-Regular.ttf) format("truetype");
+}
+*, *::before, *::after {
+  box-sizing: border-box;
+  font-family: Lato;
+  font-size: 18px;
+  font-weight: 400;
+}
+
+body {
+  margin: 0;
+}
+
+html {
+  height: 100%;
+  width: 100%;
+  font-weight: 300;
+  background-color: #282828;
+  color: #BBBBC8;
+  background-repeat: no-repeat;
+  background-position: bottom right;
+  background-image: url("../flavor-spikes01-narrow.png");
+}
+
+h1 {
+  color: #BBBBC8;
+  font-family: Lato;
+  font-weight: 300;
+  font-size: 40px;
+}
+
+p {
+  font-weight: 300;
+}
+
+header {
+  padding: 8px;
+}
+header .logo {
+  background-image: url("../logo-dark.png");
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 80px;
+  margin: 30px;
+}
+
+.content {
+  margin: auto;
+  padding: 20px;
+  width: 100%;
+  max-width: 500px;
+}
+
+a {
+  color: #3574C6;
+  text-decoration: none;
+  font-weight: 400;
+}
+a:hover {
+  color: #5b8fd3;
+}
+
+button {
+  background-color: #282828;
+  color: #3574C6;
+  border: 2px solid #3574C6;
+  border-radius: 5px;
+  width: 100%;
+  max-width: 600px;
+  height: 50px;
+  transition: all 0.3s ease 0s;
+  cursor: pointer;
+  outline: none;
+}
+button:hover {
+  background-color: #5b8fd3;
+  border: 2px solid #5b8fd3;
+}
+button.primary {
+  background-color: #3574C6;
+  color: #BBBBC8;
+  border: none;
+}
+button.primary:hover {
+  background-color: #5b8fd3;
+}
+
+input:not([type=radio]), select {
+  background-color: #252525;
+  color: #BBBBC8;
+  height: 50px;
+  border: 2px solid #505050;
+  border-radius: 5px;
+  padding-left: 15px;
+}
+
+form .field {
+  display: grid;
+  padding: 10px 0;
+}
+form .field.radio-button {
+  display: flex;
+}
+form .field.radio-button input[type=radio] {
+  height: 20px;
+  vertical-align: middle;
+}
+form .field.radio-button label {
+  height: 20px;
+  display: inline-block;
+  padding: 3px 0 0 15px;
+  width: 100%;
+}
+form label {
+  color: #898989;
+  text-transform: uppercase;
+  font-size: 0.9rem;
+  margin-bottom: 3px;
+}
+form label span.optional {
+  font-style: italic;
+  text-transform: none;
+}
+form .actions {
+  padding: 20px 0;
+}
+form .actions .right {
+  float: right;
+}
+form .actions button, form .actions a {
+  margin: 10px 0;
+}
+form button.clean {
+  border: none;
+  height: auto;
+  color: #BBBBC8;
+  text-align: left;
+  text-transform: unset;
+  display: flex;
+  padding: 15px;
+}
+form button.clean:hover {
+  border: none;
+  background-color: #252525;
+}
+form button.clean * {
+  font-weight: 300;
+}
+form .user-selection-list {
+  margin-bottom: 80px;
+}
+form button.user-selection .profile-image {
+  width: 100px;
+  height: 100px;
+  background-image: url("/resources/images/icon-user-dark.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  form button.user-selection .profile-image {
+    background-image: url("/resources/images/icon-user-dark@2x.png");
+    background-size: 100px 100px;
+  }
+}
+form button.user-selection:hover .profile-image {
+  background-image: url("/resources/images/icon-user-dark-hover.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  form button.user-selection:hover .profile-image {
+    background-image: url("/resources/images/icon-user-dark-hover@2x.png");
+    background-size: 100px 100px;
+  }
+}
+form button.user-selection .sessionstate {
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  border-radius: 20px;
+  border-color: #505050;
+  border-style: solid;
+  border-width: 1px;
+  position: absolute;
+  bottom: 0px;
+  right: 10px;
+}
+form button.user-selection .sessionstate.sessionstate-0 {
+  background-color: #138D00;
+}
+form button.user-selection .sessionstate.sessionstate-1 {
+  background-color: #BC372E;
+}
+form button.user-selection > div {
+  position: relative;
+}
+form button.user-selection > div.names {
+  margin: 15px;
+}
+form button.user-selection > div.names .displayname {
+  font-size: 1.4rem;
+}
+form button.user-selection > div.names .loginname {
+  color: #898989;
+}
+.user-selection + form button.other-user {
+  margin-top: 80px;
+}
+form button.other-user .other-user-image {
+  width: 100px;
+  height: 75px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-image: url("/resources/images/icon-newuser-dark.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  form button.other-user .other-user-image {
+    background-image: url("/resources/images/icon-newuser-dark@2x.png");
+    background-size: 100px 75px;
+  }
+}
+form button.other-user:hover .other-user-image {
+  background-repeat: no-repeat;
+  background-position: center;
+  background-image: url("/resources/images/icon-newuser-dark-hover.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  form button.other-user:hover .other-user-image {
+    background-image: url("/resources/images/icon-newuser-dark-hover@2x.png");
+    background-size: 100px 75px;
+  }
+}
+form button.other-user > div:nth-of-type(2) {
+  margin: 15px;
+  font-size: 1.4rem;
+}
+
+#copy-secret {
+  visibility: hidden;
+  position: absolute;
+}
+
+#qrcode {
+  text-align: center;
+}
+#qrcode svg rect.color {
+  fill: #BBBBC8;
+}
+#qrcode svg rect.bg-color {
+  fill: #282828;
+}
+
+#secret .copy {
+  float: right;
+  cursor: pointer;
+}
+
+footer {
+  width: 100%;
+  background-size: cover;
+  height: 44vw;
+  position: fixed;
+  bottom: 0;
+  z-index: -1;
+}
+
+.material-icons {
+  font-family: "Material Icons";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+  /* Support for IE. */
+  font-feature-settings: "liga";
+}
+
+html {
+  background-color: #BBBBC8;
+  color: #282828;
+  background-image: url("../flavor-spikes01-narrow.png");
+}
+html header .logo {
+  background-image: url("../logo-light.png");
+}
+html h1 {
+  color: #282828;
+}
+html button {
+  background-color: #BBBBC8;
+  color: #3574C6;
+  border: 2px solid #3574C6;
+}
+html button:hover {
+  background-color: #5b8fd3;
+  border: 2px solid #5b8fd3;
+}
+html button.primary {
+  background-color: #3574C6;
+  color: #BBBBC8;
+  border: none;
+  box-shadow: 0px 10px 30px #3574C6;
+}
+html button.primary:hover {
+  background-color: #5b8fd3;
+}
+html button.clean {
+  color: #282828;
+}
+html button.user-selection .profile-image {
+  background-image: url("/resources/images/icon-user-light.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  html button.user-selection .profile-image {
+    background-image: url("/resources/images/icon-user-light@2x.png");
+    background-size: 100px 100px;
+  }
+}
+html button.user-selection:hover {
+  background-color: #252525;
+}
+html button.user-selection:hover .profile-image {
+  background-image: url("/resources/images/icon-user-light-hover.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  html button.user-selection:hover .profile-image {
+    background-image: url("/resources/images/icon-user-light-hover@2x.png");
+    background-size: 100px 100px;
+  }
+}
+html button.other-user .other-user-image {
+  background-image: url("/resources/images/icon-newuser-light.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  html button.other-user .other-user-image {
+    background-image: url("/resources/images/icon-newuser-light@2x.png");
+    background-size: 100px 75px;
+  }
+}
+html button.other-user:hover .other-user-image {
+  background-image: url("/resources/images/icon-newuser-light-hover.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  html button.other-user:hover .other-user-image {
+    background-image: url("/resources/images/icon-newuser-light-hover@2x.png");
+    background-size: 100px 75px;
+  }
+}
+html input {
+  background-color: #BBBBC8;
+  color: #282828;
+}
+html #qrcode svg rect.color {
+  fill: #282828;
+}
+html #qrcode svg rect.bg-color {
+  fill: #BBBBC8;
+}
+
+/*# sourceMappingURL=light.css.map */

internal/ui/login/static/resources/themes/zitadel/css/light.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../scss/fonts.scss","../../scss/main.scss","../../scss/variables.scss","../../scss/light.scss"],"names":[],"mappings":"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","file":"light.css"}