mirror of
https://github.com/andwati/zitadel.git
synced 2026-11-06 22:32:16 +00:00
feat(console): apply private labeling settings (#2059)
* fetch org design an calc palette * distinct theme deriv * calculate self theme * background palette, fix styles * component fixes, warn color * warn color * stylelint config, set warn color * lint * fallback theme * lint * granted, owned proejct grid * dynamic privacy policy, fix home layout, dismissables, info-section * lint * apply theme from settings * enable cache * fix: add primary tint
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
<app-detail-layout [backRouterLink]="[ '/users/list/machines']" title="{{ 'USER.CREATE.TITLE' | translate }}"
|
||||
description="{{ 'USER.CREATE.DESCRIPTION' | translate }}">
|
||||
<mat-progress-bar *ngIf="loading" color="accent" mode="indeterminate"></mat-progress-bar>
|
||||
<mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>
|
||||
|
||||
<form *ngIf="userForm" [formGroup]="userForm" (ngSubmit)="createUser()" class="form">
|
||||
<div class="content">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<app-detail-layout [backRouterLink]="[ '/users/list/humans']" title="{{ 'USER.CREATE.TITLE' | translate }}"
|
||||
description="{{ 'USER.CREATE.DESCRIPTION' | translate }}">
|
||||
<mat-progress-bar *ngIf="loading" color="accent" mode="indeterminate"></mat-progress-bar>
|
||||
<mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>
|
||||
|
||||
<form *ngIf="userForm" [formGroup]="userForm" (ngSubmit)="createUser()" class="form">
|
||||
<div class="content">
|
||||
|
||||
+1
-1
@@ -10,7 +10,7 @@
|
||||
<app-theme-setting></app-theme-setting>
|
||||
</div>
|
||||
</div>
|
||||
<mat-progress-bar *ngIf="loading" color="accent" mode="indeterminate"></mat-progress-bar>
|
||||
<mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>
|
||||
|
||||
<span *ngIf="!loading && !user">{{ 'USER.PAGES.NOUSER' | translate }}</span>
|
||||
|
||||
|
||||
+4
-2
@@ -3,12 +3,14 @@
|
||||
@mixin theme-card($theme) {
|
||||
/* stylelint-disable */
|
||||
$primary: map-get($theme, primary);
|
||||
$primary-dark: mat.get-color-from-palette($primary, A900);
|
||||
$background: map-get($theme, background);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
$back: map-get($background, background);
|
||||
/* stylelint-enable */
|
||||
|
||||
.theme-conent,
|
||||
.crescent {
|
||||
background-color: $primary-dark;
|
||||
background-color: $back;
|
||||
transition: background-color .3s cubic-bezier(.645, .045, .355, 1); // cubic-bezier(.645, .045, .355, 1);
|
||||
}
|
||||
}
|
||||
|
||||
-12
@@ -1,6 +1,3 @@
|
||||
$dark-background: #212224;
|
||||
$light-background: rgb(220, 220, 220);
|
||||
|
||||
:root {
|
||||
transition: none;
|
||||
}
|
||||
@@ -31,7 +28,6 @@ $light-background: rgb(220, 220, 220);
|
||||
right: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: $light-background;
|
||||
transform: scale(0);
|
||||
transform-origin: top right;
|
||||
transition: transform .2s cubic-bezier(.645, .045, .355, 1);
|
||||
@@ -57,7 +53,6 @@ label {
|
||||
|
||||
.toggle {
|
||||
position: absolute;
|
||||
background-color: $light-background;
|
||||
box-shadow: 0 2px 15px rgba(0, 0, 0, .15);
|
||||
}
|
||||
|
||||
@@ -82,7 +77,6 @@ label {
|
||||
[type="checkbox"]:checked {
|
||||
.toggle {
|
||||
transform: translateX(100%);
|
||||
background-color: $dark-background;
|
||||
}
|
||||
|
||||
.light {
|
||||
@@ -101,7 +95,6 @@ label {
|
||||
|
||||
[type="checkbox"]:checked + .theme-app .crescent {
|
||||
transform: scale(1);
|
||||
background: $dark-background;
|
||||
}
|
||||
|
||||
[type="checkbox"]:checked + .theme-app .circle {
|
||||
@@ -111,8 +104,3 @@ label {
|
||||
[type="checkbox"]:checked + .theme-app .main-circle {
|
||||
background: linear-gradient(40deg, #8983f7, #a3dafb 70%);
|
||||
}
|
||||
|
||||
[type="checkbox"]:checked + .app .toggle {
|
||||
transform: translateX(100%);
|
||||
background-color: #34323d;
|
||||
}
|
||||
|
||||
@@ -3,9 +3,8 @@
|
||||
@mixin membership-theme($theme) {
|
||||
/* stylelint-disable */
|
||||
$primary: map-get($theme, primary);
|
||||
$primary-dark: mat.get-color-from-palette($primary, A900);
|
||||
$accent: map-get($theme, accent);
|
||||
$accent-color: mat.get-color-from-palette($accent, 500);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
$primary-color: mat.get-color-from-palette($primary, 500);
|
||||
/* stylelint-enable */
|
||||
|
||||
.membership-groups {
|
||||
@@ -91,7 +90,7 @@
|
||||
font-size: 8px;
|
||||
border-radius: .5rem;
|
||||
transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
|
||||
background-color: $accent-color;
|
||||
background-color: $primary-color;
|
||||
cursor: pointer;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
</ng-template>
|
||||
</div>
|
||||
|
||||
<mat-progress-bar *ngIf="loading" color="accent" mode="indeterminate"></mat-progress-bar>
|
||||
<mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>
|
||||
|
||||
<span *ngIf="!loading && !user">{{ 'USER.PAGES.NOUSER' | translate }}</span>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user