mirror of
https://github.com/andwati/zitadel.git
synced 2026-10-24 16:22:16 +00:00
feat(console): integrate frontend (#95)
* feat: console frontend * chore(dependabot): cycle and npm * chore: rename citadel to zitadel, remove generated files * chore: delete go files * chore(frontend): ci steps * chore: remove docker and envoy files * chore: remove docker file * chore: working dir * chore: run proto build * add console start * chore: restructure folders * chore: remove gui build * statikFs * generate proto for console * add statik import * import * chore: try statik * chore: path * chore: path * chore: script in root * chore: order build steps * chore: go get * chore: folder traversal * chore: non empty test file * chore: gitignore * chore: gitignore * chore: statik path * chore: switch to failing FE build * fix: build * fix: project-grant-test * fix: rm test * add statik.go * go mod tidy * chore: place test, seperate test from build * chore: lint all the world * chore: ci the world instead * chore: tune docker * chore: undo container test * chore: fix run * chore: docker build * chore: test docker build * chore: go build flags * finaly * fix caos_local * go mod Co-authored-by: Livio Amstutz <[email protected]> Co-authored-by: Max Peintner <[email protected]>
This commit is contained in:
Florian Forster
co-authored by
Livio Amstutz
Max Peintner
Livio Amstutz
Max Peintner
parent
9e32740eb8
commit
92a294f5c8
@@ -0,0 +1,209 @@
|
||||
// Custom Theming for Angular Material
|
||||
// For more information: https://material.angular.io/guide/theming
|
||||
@import '~@angular/material/theming';
|
||||
@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!
|
||||
@include mat-core();
|
||||
|
||||
@font-face {
|
||||
font-family: ailerons;
|
||||
font-display: auto;
|
||||
src: url(assets/ailerons.otf) format('opentype');
|
||||
}
|
||||
|
||||
$caos-dark-brand: (
|
||||
50: #ffffff,
|
||||
100: #dde6f3,
|
||||
200: #b4c9e4,
|
||||
300: #7fa3d1,
|
||||
400: #6992c9,
|
||||
500: #5282c1,
|
||||
600: #4072b4,
|
||||
700: #38649d,
|
||||
800: #305687,
|
||||
900: #284770,
|
||||
A100: #ffffff,
|
||||
A200: #dde6f3,
|
||||
A300: #6992c9,
|
||||
A400: #38649d,
|
||||
A500: #666666,
|
||||
A600: #ffffff,
|
||||
A700: #81868a,
|
||||
A800: #2d2e30,
|
||||
A900: #212224,
|
||||
contrast: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: white,
|
||||
600: white,
|
||||
700: white,
|
||||
800: white,
|
||||
900: white,
|
||||
A100: $black-87-opacity,
|
||||
A200: $black-87-opacity,
|
||||
A400: $black-87-opacity,
|
||||
A700: white,
|
||||
)
|
||||
);
|
||||
|
||||
$caos-light-brand: (
|
||||
50: mat-color($mat-indigo, 50),
|
||||
100: mat-color($mat-indigo, 100),
|
||||
200: mat-color($mat-indigo, 200),
|
||||
300: mat-color($mat-indigo, 300),
|
||||
400: mat-color($mat-indigo, 400),
|
||||
500: mat-color($mat-indigo, 500),
|
||||
600: mat-color($mat-indigo, 600),
|
||||
700: mat-color($mat-indigo, 700),
|
||||
800: mat-color($mat-indigo, 800),
|
||||
900: mat-color($mat-indigo, 900),
|
||||
A100: mat-color($mat-indigo, A100),
|
||||
A200: mat-color($mat-indigo, A200),
|
||||
A300: mat-color($mat-indigo, A300),
|
||||
A400: mat-color($mat-indigo, A400),
|
||||
A500:#333333,
|
||||
A600: #000000,
|
||||
A700: #dadce0,
|
||||
A800: #ffffff,
|
||||
A900: #ffffff,
|
||||
contrast: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: white,
|
||||
600: white,
|
||||
700: white,
|
||||
800: white,
|
||||
900: white,
|
||||
A100: $black-87-opacity,
|
||||
A200: $black-87-opacity,
|
||||
A400: $black-87-opacity,
|
||||
A700: white,
|
||||
)
|
||||
);
|
||||
|
||||
$caos-custom: (
|
||||
500: rgb(144,212,210),
|
||||
700: rgb(176, 241, 239),
|
||||
A700: rgb(96, 139, 138),
|
||||
contrast: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: #000000,
|
||||
600: white,
|
||||
700: white,
|
||||
800: white,
|
||||
900: white,
|
||||
A100: $black-87-opacity,
|
||||
A200: $black-87-opacity,
|
||||
A400: $black-87-opacity,
|
||||
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-palette($caos-light-brand);
|
||||
$light-accent: mat-palette($mat-indigo);
|
||||
$light-warn: mat-palette($mat-red);
|
||||
|
||||
$dark-primary: mat-palette($caos-dark-brand);
|
||||
$dark-accent: mat-palette($caos-dark-brand, 500, 700, A700);
|
||||
$dark-warn: mat-palette($mat-red);
|
||||
|
||||
$light-theme: mat-light-theme($light-primary, $light-accent, $light-warn);
|
||||
|
||||
$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
|
||||
|
||||
// default theme
|
||||
@include component-themes($dark-theme);
|
||||
@include angular-material-theme($dark-theme);
|
||||
.light-theme {
|
||||
@include component-themes($light-theme);
|
||||
@include angular-material-theme($light-theme);
|
||||
color: #202124;
|
||||
|
||||
.crescent {
|
||||
background-color:white !important;
|
||||
}
|
||||
|
||||
mat-card, .side, .main-container {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.dark-theme {
|
||||
@include component-themes($dark-theme);
|
||||
@include angular-material-theme($dark-theme);
|
||||
|
||||
.crescent {
|
||||
background-color: #212224;
|
||||
}
|
||||
|
||||
mat-card, .side, .main-container {
|
||||
background-color: #212224;
|
||||
}
|
||||
|
||||
.mat-dialog-container {
|
||||
background-color: #2d2e30;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-dialog-container {
|
||||
border-radius: .5rem !important;
|
||||
}
|
||||
// @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: 'Rubik', -apple-system, BlinkMacSystemFont,
|
||||
"Segoe UI", "Roboto", "Oxygen",
|
||||
"Ubuntu", "Cantarell", "Fira Sans",
|
||||
"Droid Sans", "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
.max-width-container {
|
||||
max-width: 1350px;
|
||||
padding: 0 1.5rem;
|
||||
padding-top: 4rem;
|
||||
padding-left: 4rem;
|
||||
|
||||
@media only screen and (min-width: 1024px) {
|
||||
max-width: 1120px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 899px) {
|
||||
max-width: 899px;
|
||||
}
|
||||
}
|
||||
|
||||
.enlarged-container {
|
||||
padding: 0 1.5rem;
|
||||
padding-top: 4rem;
|
||||
padding-left: 4rem;
|
||||
}
|
||||
|
||||
.mat-dialog-container {
|
||||
border-radius: 0.5rem;
|
||||
background-color: #212224;
|
||||
}
|
||||
Reference in New Issue
Block a user