mirror of
https://github.com/andwati/zitadel.git
synced 2026-10-20 14:34:25 +00:00
465081ee6d
* set avatarurl if available * lint * force sidemargin * dont load image via asset * rm log * stylelint * add ZITADEL domain to csp img src * sanitize url * fix undefined link projects * use name as fallback * operator: rename uploadServiceURL to assetServiceURL in environment json for console * remove data * rm logs * center crop image * add avatar to changes Co-authored-by: Livio Amstutz <[email protected]>
319 lines
6.3 KiB
SCSS
319 lines
6.3 KiB
SCSS
// Custom Theming for Angular Material
|
|
// For more information: https://material.angular.io/guide/theming
|
|
|
|
@use '~@angular/material' as mat;
|
|
|
|
@import './component-themes';
|
|
|
|
// Plus imports for other components in your app.
|
|
|
|
// Include the common styles for Angular Material. We include this here so that you only
|
|
// have to load a single css file for Angular Material in your app.
|
|
// Be sure that you only ever include this mixin once!
|
|
|
|
@font-face {
|
|
font-family: ailerons;
|
|
font-display: auto;
|
|
src: url(assets/ailerons.otf) format('opentype');
|
|
}
|
|
|
|
:root {
|
|
--grey: #8795a1;
|
|
--table-row-back: #363738;
|
|
}
|
|
|
|
$caos-dark-brand: (
|
|
50: #fff,
|
|
100: #dde6f3,
|
|
200: #b4c9e4,
|
|
300: #7fa3d1,
|
|
400: #6992c9,
|
|
500: #5282c1,
|
|
600: #4072b4,
|
|
700: #38649d,
|
|
800: #305687,
|
|
900: #284770,
|
|
A100: #fff,
|
|
A200: #dde6f3,
|
|
A300: #6992c9,
|
|
A400: #38649d,
|
|
A500: #666,
|
|
A600: #fff,
|
|
A700: #8795a1,
|
|
A800: #2d2e30,
|
|
A900: #212224,
|
|
contrast:
|
|
(
|
|
50: rgba(black, .87),
|
|
100: rgba(black, .87),
|
|
200: rgba(black, .87),
|
|
300: rgba(black, .87),
|
|
400: rgba(black, .87),
|
|
500: white,
|
|
600: white,
|
|
700: white,
|
|
800: white,
|
|
900: white,
|
|
A100: rgba(black, .87),
|
|
A200: rgba(black, .87),
|
|
A400: rgba(black, .87),
|
|
A700: white
|
|
)
|
|
);
|
|
|
|
$caos-light-brand: (
|
|
50: #eaedfa,
|
|
100: #ccd2f2,
|
|
200: #aab4ea,
|
|
300: #8796e1,
|
|
400: #6e80da,
|
|
500: #5469d4,
|
|
600: #4d61cf,
|
|
700: #4356c9,
|
|
800: #3a4cc3,
|
|
900: #293bb9,
|
|
A100: #f9faff,
|
|
A200: #c6ccff,
|
|
A300: #939fff,
|
|
A400: #7a88ff,
|
|
A500:#333,
|
|
A600: #000,
|
|
A700: #8795a1,
|
|
A800: white,
|
|
A900: #fafafa,
|
|
contrast:
|
|
(
|
|
50: #3d4852,
|
|
100: #3d4852,
|
|
200: #3d4852,
|
|
300: #3d4852,
|
|
400: #3d4852,
|
|
500: white,
|
|
600: white,
|
|
700: white,
|
|
800: white,
|
|
900: white,
|
|
A100: #3d4852,
|
|
A200: #3d4852,
|
|
A400: #3d4852,
|
|
A700: white
|
|
)
|
|
);
|
|
|
|
$caos-accent-color: (
|
|
50: #ebf4f2,
|
|
100: #cce3de,
|
|
200: #abd1c9,
|
|
300: #89bfb3,
|
|
400: #6fb1a2,
|
|
500: #56a392,
|
|
600: #4f9b8a,
|
|
700: #45917f,
|
|
800: #3c8875,
|
|
900: #2b7763,
|
|
A100: #beffed,
|
|
A200: #8bffde,
|
|
A400: #58ffd0,
|
|
A700: #3effc9,
|
|
contrast:
|
|
(
|
|
50: rgba(black, .87),
|
|
100: rgba(black, .87),
|
|
200: rgba(black, .87),
|
|
300: rgba(black, .87),
|
|
400: rgba(black, .87),
|
|
500: white,
|
|
600: white,
|
|
700: white,
|
|
800: white,
|
|
900: white,
|
|
A100: rgba(black, .87),
|
|
A200: rgba(black, .87),
|
|
A400: rgba(black, .87),
|
|
A700: white
|
|
)
|
|
);
|
|
// Define the palettes for your theme using the Material Design palettes available in palette.scss
|
|
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
|
|
// hue. Available color palettes: https://material.io/design/color/
|
|
|
|
$light-primary: mat.define-palette($caos-light-brand);
|
|
$light-accent: mat.define-palette($caos-accent-color);
|
|
$light-warn: mat.define-palette(mat.$red-palette);
|
|
|
|
$dark-primary: mat.define-palette($caos-dark-brand);
|
|
$dark-accent: mat.define-palette(mat.$pink-palette);
|
|
$dark-warn: mat.define-palette(mat.$red-palette);
|
|
|
|
$light-theme: mat.define-light-theme($light-primary, $light-accent, $light-warn);
|
|
$dark-theme: mat.define-dark-theme($dark-primary, $dark-accent, $dark-warn);
|
|
|
|
$custom-typography: mat.define-typography-config($font-family: 'Lato');
|
|
|
|
@include mat.core($custom-typography);
|
|
|
|
// default theme
|
|
@include component-themes($dark-theme);
|
|
@include mat.all-component-themes($dark-theme);
|
|
|
|
.mat-dialog-container,
|
|
.mat-raised-button,
|
|
.mat-stroked-button {
|
|
border-radius: 6px !important;
|
|
}
|
|
|
|
.light-theme {
|
|
@include component-themes($light-theme);
|
|
@include mat.all-component-themes($light-theme);
|
|
|
|
--grey: #697386;
|
|
--color-main: #5469d4;
|
|
|
|
.sidenav,
|
|
.main-container,
|
|
.mat-dialog-container {
|
|
background-color: #fafafa;
|
|
transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
|
|
box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
|
|
background-color: #fafafa;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
background-color: #fafafa;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: #737c8850;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.root-header {
|
|
box-shadow: inset 0 -1px #e3e8ee;
|
|
}
|
|
}
|
|
|
|
.dark-theme {
|
|
@include component-themes($dark-theme);
|
|
@include mat.all-component-themes($dark-theme);
|
|
|
|
--color-main: #5282c1;
|
|
|
|
.sidenav,
|
|
.main-container,
|
|
.mat-dialog-container {
|
|
background-color: #212224;
|
|
transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
|
|
box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
|
|
background-color: #2d2e30;
|
|
border-radius: 8px;
|
|
transition: all .3s cubic-bezier(.645, .045, .355, 1) !important;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
background-color: #2d2e30;
|
|
transition: all .3s cubic-bezier(.645, .045, .355, 1) !important;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: #737c8870;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all .3s cubic-bezier(.645, .045, .355, 1) !important;
|
|
}
|
|
|
|
.root-header {
|
|
box-shadow: inset 0 -1px #303131;
|
|
}
|
|
}
|
|
// @include mat.checkbox-theme($candy-app-theme);
|
|
|
|
/* You can add global styles to this file, and also import other style files */
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family:
|
|
'Lato',
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
"Segoe UI",
|
|
"Roboto",
|
|
"Oxygen",
|
|
"Ubuntu",
|
|
"Cantarell",
|
|
"Fira Sans",
|
|
"Droid Sans",
|
|
"Helvetica Neue",
|
|
sans-serif;
|
|
}
|
|
|
|
h1 {
|
|
font-weight: 400;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.3rem;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.mat-paginator .mat-select {
|
|
border: none;
|
|
}
|
|
|
|
.max-width-container {
|
|
max-width: 1350px;
|
|
padding: 0 2rem;
|
|
padding-top: 2rem;
|
|
padding-left: 2rem;
|
|
|
|
@media only screen and (min-width: 1024px) {
|
|
max-width: 1120px;
|
|
}
|
|
|
|
@media only screen and (min-width: 899px) {
|
|
max-width: 899px;
|
|
}
|
|
|
|
@media only screen and (max-width: 500px) {
|
|
padding-left: .5rem;
|
|
padding-right: .5rem;
|
|
}
|
|
}
|
|
|
|
.enlarged-container {
|
|
padding: 0 1.5rem;
|
|
padding-top: 2rem;
|
|
padding-left: 2rem;
|
|
|
|
@media only screen and (max-width: 500px) {
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
}
|
|
|
|
i {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.mat-checkbox-inner-container.mat-checkbox-inner-container-no-side-margin {
|
|
margin-right: .5rem !important;
|
|
}
|