TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-08-26 07:27:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: rehauled console (#3525)

Browse Source 
* new console

* move npm ci to angular build

* rel path for assets

* local grpc copy

* login policy, rm clear views, features rel path

* lock

Co-authored-by: Livio Amstutz <livio.a@gmail.com>
This commit is contained in:
Max Peintner
2022-04-28 12:35:02 +02:00
committed by GitHub
parent 00f7dbe875
commit 08ae39ae19
668 changed files with 47747 additions and 19118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
console/src/styles/codemirror.scss
View File

@@ -1,9 +1,3 @@
/*
Name: material
Author: Mattia Astorino (http://github.com/equinusocio)
Website: https://material-theme.site/
*/
@mixin codemirror-theme($theme) {
$is-dark-theme: map-get($theme, is-dark);
@@ -41,27 +35,27 @@
}
.cm-s-material div.CodeMirror-selected {
background: rgba(128, 203, 196, .2);
background: rgba(128, 203, 196, 0.2);
}
.cm-s-material.CodeMirror-focused div.CodeMirror-selected {
background: rgba(128, 203, 196, .2);
background: rgba(128, 203, 196, 0.2);
}
.cm-s-material .CodeMirror-line::selection,
.cm-s-material .CodeMirror-line > span::selection,
.cm-s-material .CodeMirror-line > span > span::selection {
background: rgba(128, 203, 196, .2);
background: rgba(128, 203, 196, 0.2);
}
.cm-s-material .CodeMirror-line::-moz-selection,
.cm-s-material .CodeMirror-line > span::-moz-selection,
.cm-s-material .CodeMirror-line > span > span::-moz-selection {
background: rgba(128, 203, 196, .2);
background: rgba(128, 203, 196, 0.2);
}
.cm-s-material .CodeMirror-activeline-background {
background: rgba(0, 0, 0, .5);
background: rgba(0, 0, 0, 0.5);
}
.cm-s-material .cm-keyword {

10
console/src/styles/color.scss Normal file
View File

@@ -0,0 +1,10 @@
@use '@angular/material' as mat;
@mixin cnsl-color-theme($theme) {
$foreground: map-get($theme, foreground);
$secondary-text: map-get($foreground, secondary-text);
.cnsl-secondary-text {
color: $secondary-text;
}
}

18
console/src/styles/input.scss
View File

@@ -1,7 +1,6 @@
@use '@angular/material' as mat;
@mixin input-theme($theme) {
/* stylelint-disable */
$primary: map-get($theme, primary);
$primary-color: mat.get-color-from-palette($primary, 500);
$primary-light-color: mat.get-color-from-palette($primary, 200);
@@ -12,25 +11,24 @@
[cnslInput],
.mat-select {
display: block;
box-sizing: border-box;
padding-inline-start: 10px;
outline: none;
display: inline-block;
text-align: start;
background-color: inherit;
cursor: text;
border-radius: 8px;
transform: all .2 linear;
transform: all 0.2 linear;
font-size: 1rem;
border: none;
border: 1px solid if($is-dark-theme, #403e3e, #00000040);
background-color: if($is-dark-theme, #00000020, #fafafa50);
border: 1px solid if($is-dark-theme, #f9f7f725, #1a191938);
background-color: if($is-dark-theme, #00000020, #00000005);
border-radius: 4px;
height: 40px;
padding: 10px;
transition: border-color .2s ease-in-out, background-color .3s cubic-bezier(.645, .045, .355, 1),
color .3s cubic-bezier(.645, .045, .355, 1);
transition:
border-color 0.15s ease-in-out,
background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
width: 100%;
color: mat.get-color-from-palette($foreground, text);
margin-bottom: 2px;
@@ -62,7 +60,7 @@
[cnslInput]::placeholder {
font-size: 14px;
color: var(--grey);
color: map-get($foreground, placeholder-text);
font-style: italic;
}

20
console/src/styles/lato-font.scss
View File

@@ -2,68 +2,68 @@
font-family: Lato;
font-style: normal;
font-weight: 400;
src: url(/assets/fonts/lato/Lato-Regular.ttf) format('truetype');
src: url(../assets/fonts/lato/Lato-Regular.ttf) format('truetype');
}
@font-face {
font-family: Lato;
font-style: normal;
font-weight: 900;
src: url(/assets/fonts/lato/Lato-Black.ttf) format('truetype');
src: url(../assets/fonts/lato/Lato-Black.ttf) format('truetype');
}
@font-face {
font-family: Lato;
font-style: italic;
font-weight: 900;
src: url(/assets/fonts/lato/Lato-BlackItalic.ttf) format('truetype');
src: url(../assets/fonts/lato/Lato-BlackItalic.ttf) format('truetype');
}
@font-face {
font-family: Lato;
font-style: normal;
font-weight: 700;
src: url(/assets/fonts/lato/Lato-Bold.ttf) format('truetype');
src: url(../assets/fonts/lato/Lato-Bold.ttf) format('truetype');
}
@font-face {
font-family: Lato;
font-style: italic;
font-weight: 700;
src: url(/assets/fonts/lato/Lato-BoldItalic.ttf) format('truetype');
src: url(../assets/fonts/lato/Lato-BoldItalic.ttf) format('truetype');
}
@font-face {
font-family: Lato;
font-style: italic;
font-weight: 400;
src: url(/assets/fonts/lato/Lato-Italic.ttf) format('truetype');
src: url(../assets/fonts/lato/Lato-Italic.ttf) format('truetype');
}
@font-face {
font-family: Lato;
font-style: normal;
font-weight: 300;
src: url(/assets/fonts/lato/Lato-Light.ttf) format('truetype');
src: url(../assets/fonts/lato/Lato-Light.ttf) format('truetype');
}
@font-face {
font-family: Lato;
font-style: italic;
font-weight: 300;
src: url(/assets/fonts/lato/Lato-LightItalic.ttf) format('truetype');
src: url(../assets/fonts/lato/Lato-LightItalic.ttf) format('truetype');
}
@font-face {
font-family: Lato;
font-style: normal;
font-weight: 100;
src: url(/assets/fonts/lato/Lato-Thin.ttf) format('truetype');
src: url(../assets/fonts/lato/Lato-Thin.ttf) format('truetype');
}
@font-face {
font-family: Lato;
font-style: italic;
font-weight: 100;
src: url(/assets/fonts/lato/Lato-ThinItalic.ttf) format('truetype');
src: url(../assets/fonts/lato/Lato-ThinItalic.ttf) format('truetype');
}

5
console/src/styles/link.scss
View File

@@ -1,16 +1,15 @@
@use '@angular/material' as mat;
@mixin link-theme($theme) {
/* stylelint-disable */
$primary: map-get($theme, primary);
$primary-color: mat.get-color-from-palette($primary, 500);
$primary-color-lighter: mat.get-color-from-palette($primary, A300);
a {
color: $primary-color;
color: $primary-color;
}
a:hover {
color: $primary-color-lighter;
color: $primary-color-lighter;
}
}

139
console/src/styles/sidenav-list.scss
View File

@@ -1,139 +0,0 @@
@use '@angular/material' as mat;
@mixin sidenav-list-theme($theme) {
/* stylelint-disable */
$primary: map-get($theme, primary);
$background: map-get($theme, background);
$accent: map-get($theme, accent);
$primary-color: mat.get-color-from-palette($primary, 500);
$accent-color: mat.get-color-from-palette($accent, 500);
$foreground: map-get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark);
$back: map-get($background, background);
/* stylelint-enable */
.meta {
box-shadow: inset 1px 0 map-get($foreground, divider);
}
.sidenav {
box-shadow: inset -1px 0 map-get($foreground, divider);
transition: all .3s cubic-bezier(.645, .045, .355, 1) !important;
}
.nav-item {
color: mat.get-color-from-palette($foreground, text) !important;
transition: all .2s ease;
i {
opacity: .6;
}
&:hover {
// font-weight: 600;
border-top-right-radius: 1.5rem;
border-bottom-right-radius: 1.5rem;
i {
opacity: 1;
}
}
&.active {
color: $primary-color !important;
// background-color: if($is-dark-theme, rgba($color: $primary-color, $alpha: .1), rgb(84 105 212 / 6%)) !important;
i {
opacity: 1;
}
}
.c_label {
.count {
padding: 3px 6px;
border-radius: 50vw;
}
}
}
.mat-menu-content,
.mat-menu-panel {
background-color: $back;
border-radius: .5rem;
@include mat.elevation(5);
.active {
color: $primary-color !important;
background-color: rgba($color: $primary-color, $alpha: .1) !important;
}
}
.root-header {
background-color: $back !important;
transition: all .3s cubic-bezier(.645, .045, .355, 1);
.slash {
color: if($is-dark-theme, #525454, #d1d5d9);
}
.org-button {
transition: all .3s cubic-bezier(.645, .045, .355, 1) !important;
}
}
.admin-line {
position: fixed;
display: flex;
align-items: center;
bottom: 0;
left: 0;
right: calc(100vw - 280px);
background-color: $primary-color;
color: white;
z-index: 1;
font-size: 13px;
padding: 3px 2rem;
transform: translateY(75%);
transition: all .2s;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
span {
display: none;
}
button {
height: 1.2rem;
width: 1.2rem;
line-height: 1.2rem;
margin-right: 1rem;
* {
height: 1.2rem;
width: 1.2rem;
line-height: 1rem;
}
}
&.expanded,
&:hover {
transform: translateY(0%);
right: 0;
span {
display: inline-block;
}
}
}
.divider {
.span {
border-color: map-get($foreground, divider);
}
.line {
background-color: map-get($foreground, divider);
}
}
}

93
console/src/styles/table.scss
View File

@@ -1,7 +1,6 @@
@use '@angular/material' as mat;
@mixin table-theme($theme) {
/* stylelint-disable */
$primary: map-get($theme, primary);
$primary-color: mat.get-color-from-palette($primary, 500);
$is-dark-theme: map-get($theme, is-dark);
@@ -11,53 +10,72 @@
.mat-table,
.mat-paginator {
background-color: inherit !important;
transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
/* stylelint-enable */
.app-label {
font-size: 12px;
border-radius: 1rem;
color: mat.get-color-from-palette($foreground, text);
white-space: nowrap;
background-color: var(--grey);
padding: 3px 1rem;
.table-wrapper {
overflow: auto;
.table,
.paginator {
width: 100%;
}
}
th {
text-transform: uppercase;
letter-spacing: .05em;
letter-spacing: 0.05em;
font-weight: bold;
white-space: nowrap;
&.mat-header-cell {
color: var(--grey);
color: map-get($foreground, text);
font-size: 11px;
font-weight: 400;
font-weight: 500;
}
}
td {
.cnsl-form-field-wrapper {
padding-bottom: 0;
}
.pointer {
cursor: pointer;
}
tr {
&.mat-header-row {
height: 40px;
height: 40px !important;
padding-bottom: 4px;
}
&.highlight {
cursor: pointer;
&:hover {
td {
transition: background 0.1s ease;
background: map-get($background, hover);
}
}
}
.cnsl-table-action {
visibility: hidden;
transition: color 0.2s ease;
&:active,
&:hover,
&:focus,
&:focus-within {
visibility: visible;
}
}
&:hover {
.cnsl-table-action {
visibility: visible;
}
}
}
th,
td {
padding: 0 0.5rem !important;
}
td .mat-checkbox,
@@ -67,12 +85,11 @@
.no-content-row {
background-color: if($is-dark-theme, #00000030, #f4f4f470);
// color: $primary-color;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
display: flex;
align-items: center;
padding: .5rem;
padding: 0.5rem;
font-size: 14px;
justify-content: center;
}
@@ -80,23 +97,45 @@
.selection {
width: 65px;
max-width: 65px;
padding-right: 1rem !important;
}
.state {
border-radius: 50vw;
padding: 2px .5rem;
letter-spacing: .05em;
padding: 2px 0.5rem;
letter-spacing: 0.05em;
font-size: 12px;
background-color: if($is-dark-theme, #4f566b, #e4e7e4);
white-space: nowrap;
background-color: if($is-dark-theme, map-get($background, state), #e4e7e4);
box-shadow: 0 0 3px #0000001a;
&.active {
background-color: if($is-dark-theme, #4f566b, #cbf4c9);
background-color: if($is-dark-theme, map-get($background, state-active), #cbf4c9);
color: if($is-dark-theme, #cbf4c9, #0e6245);
}
&.inactive {
color: if($is-dark-theme, #ffc1c1, #620e0e);
background-color: if($is-dark-theme, #4f566b, #ffc1c1);
background-color: if($is-dark-theme, map-get($background, state-inactive), #ffc1c1);
}
}
.bg-state {
background-color: if($is-dark-theme, map-get($background, state), #e4e7e4) !important;
&.active {
background-color: if($is-dark-theme, map-get($background, state-active), #cbf4c9) !important;
color: if($is-dark-theme, #cbf4c9, #0e6245) !important;
}
&.inactive {
color: if($is-dark-theme, #ffc1c1, #620e0e) !important;
background-color: if($is-dark-theme, map-get($background, state-inactive), #ffc1c1) !important;
}
}
.color-shadow {
border: 1px solid if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2));
box-shadow: 0 0 3px #0000001a;
}
}