TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2024-12-20 14:57:31 +00:00
Code Issues Packages Projects Releases Wiki Activity
zitadel/console/src/styles.scss
Max Peintner 7bf7379a05
feat(console): codemirror code editor for actions (#2736) 
* feat: codemirror code editor

* cleanup

* lint

* mat import

* lint
2021-12-08 10:48:23 +01:00

507 lines
15 KiB
SCSS
Raw Blame History

@use '@angular/material' as mat;
@import '~codemirror/lib/codemirror';
@import './component-themes';
@import '@angular/material/theming';
// 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;
--warn: #ff3b5b;
--success: #10b981;
--table-row-back: #363738;
}
$caos-dark-primary: (
50: var(--theme-dark-primary-50),
100: var(--theme-dark-primary-100),
200: var(--theme-dark-primary-200),
300: var(--theme-dark-primary-300),
400: var(--theme-dark-primary-400),
500: var(--theme-dark-primary-500),
600: var(--theme-dark-primary-600),
700: var(--theme-dark-primary-700),
800: var(--theme-dark-primary-800),
900: var(--theme-dark-primary-900),
A100: var(--theme-dark-primary-A100),
A200: var(--theme-dark-primary-A200),
A400: var(--theme-dark-primary-A400),
A700: var(--theme-dark-primary-A700),
contrast: (
50: var(--theme-dark-primary-contrast-50),
100: var(--theme-dark-primary-contrast-100),
200: var(--theme-dark-primary-contrast-200),
300: var(--theme-dark-primary-contrast-300),
400: var(--theme-dark-primary-contrast-400),
500: var(--theme-dark-primary-contrast-500),
600: var(--theme-dark-primary-contrast-600),
700: var(--theme-dark-primary-contrast-700),
800: var(--theme-dark-primary-contrast-800),
900: var(--theme-dark-primary-contrast-900),
A100: var(--theme-dark-primary-contrast-A100),
A200: var(--theme-dark-primary-contrast-A200),
A400: var(--theme-dark-primary-contrast-A400),
A700: var(--theme-dark-primary-contrast-A700),
),
);
$caos-light-primary: (
50: var(--theme-light-primary-50),
100: var(--theme-light-primary-100),
200: var(--theme-light-primary-200),
300: var(--theme-light-primary-300),
400: var(--theme-light-primary-400),
500: var(--theme-light-primary-500),
600: var(--theme-light-primary-600),
700: var(--theme-light-primary-700),
800: var(--theme-light-primary-800),
900: var(--theme-light-primary-900),
A100: var(--theme-light-primary-A100),
A200: var(--theme-light-primary-A200),
A400: var(--theme-light-primary-A400),
A700: var(--theme-light-primary-A700),
contrast: (
50: var(--theme-light-primary-contrast-50),
100: var(--theme-light-primary-contrast-100),
200: var(--theme-light-primary-contrast-200),
300: var(--theme-light-primary-contrast-300),
400: var(--theme-light-primary-contrast-400),
500: var(--theme-light-primary-contrast-500),
600: var(--theme-light-primary-contrast-600),
700: var(--theme-light-primary-contrast-700),
800: var(--theme-light-primary-contrast-800),
900: var(--theme-light-primary-contrast-900),
A100: var(--theme-light-primary-contrast-A100),
A200: var(--theme-light-primary-contrast-A200),
A400: var(--theme-light-primary-contrast-A400),
A700: var(--theme-light-primary-contrast-A700),
),
);
$caos-dark-background: (
50: var(--theme-dark-background-50),
100: var(--theme-dark-background-100),
200: var(--theme-dark-background-200),
300: var(--theme-dark-background-300),
400: var(--theme-dark-background-400),
500: var(--theme-dark-background-500),
600: var(--theme-dark-background-600),
700: var(--theme-dark-background-700),
800: var(--theme-dark-background-800),
900: var(--theme-dark-background-900),
A100: var(--theme-dark-background-A100),
A200: var(--theme-dark-background-A200),
A400: var(--theme-dark-background-A400),
A700: var(--theme-dark-background-A700),
contrast: (
50: var(--theme-dark-background-contrast-50),
100: var(--theme-dark-background-contrast-100),
200: var(--theme-dark-background-contrast-200),
300: var(--theme-dark-background-contrast-300),
400: var(--theme-dark-background-contrast-400),
500: var(--theme-dark-background-contrast-500),
600: var(--theme-dark-background-contrast-600),
700: var(--theme-dark-background-contrast-700),
800: var(--theme-dark-background-contrast-800),
900: var(--theme-dark-background-contrast-900),
A100: var(--theme-dark-background-contrast-A100),
A200: var(--theme-dark-background-contrast-A200),
A400: var(--theme-dark-background-contrast-A400),
A700: var(--theme-dark-background-contrast-A700),
),
);
$caos-light-background: (
50: var(--theme-light-background-50),
100: var(--theme-light-background-100),
200: var(--theme-light-background-200),
300: var(--theme-light-background-300),
400: var(--theme-light-background-400),
500: var(--theme-light-background-500),
600: var(--theme-light-background-600),
700: var(--theme-light-background-700),
800: var(--theme-light-background-800),
900: var(--theme-light-background-900),
A100: var(--theme-light-background-A100),
A200: var(--theme-light-background-A200),
A400: var(--theme-light-background-A400),
A700: var(--theme-light-background-A700),
contrast: (
50: var(--theme-light-background-contrast-50),
100: var(--theme-light-background-contrast-100),
200: var(--theme-light-background-contrast-200),
300: var(--theme-light-background-contrast-300),
400: var(--theme-light-background-contrast-400),
500: var(--theme-light-background-contrast-500),
600: var(--theme-light-background-contrast-600),
700: var(--theme-light-background-contrast-700),
800: var(--theme-light-background-contrast-800),
900: var(--theme-light-background-contrast-900),
A100: var(--theme-light-background-contrast-A100),
A200: var(--theme-light-background-contrast-A200),
A400: var(--theme-light-background-contrast-A400),
A700: var(--theme-light-background-contrast-A700),
),
);
$caos-dark-warn: (
50: var(--theme-dark-warn-50),
100: var(--theme-dark-warn-100),
200: var(--theme-dark-warn-200),
300: var(--theme-dark-warn-300),
400: var(--theme-dark-warn-400),
500: var(--theme-dark-warn-500),
600: var(--theme-dark-warn-600),
700: var(--theme-dark-warn-700),
800: var(--theme-dark-warn-800),
900: var(--theme-dark-warn-900),
A100: var(--theme-dark-warn-A100),
A200: var(--theme-dark-warn-A200),
A400: var(--theme-dark-warn-A400),
A700: var(--theme-dark-warn-A700),
contrast: (
50: var(--theme-dark-warn-contrast-50),
100: var(--theme-dark-warn-contrast-100),
200: var(--theme-dark-warn-contrast-200),
300: var(--theme-dark-warn-contrast-300),
400: var(--theme-dark-warn-contrast-400),
500: var(--theme-dark-warn-contrast-500),
600: var(--theme-dark-warn-contrast-600),
700: var(--theme-dark-warn-contrast-700),
800: var(--theme-dark-warn-contrast-800),
900: var(--theme-dark-warn-contrast-900),
A100: var(--theme-dark-warn-contrast-A100),
A200: var(--theme-dark-warn-contrast-A200),
A400: var(--theme-dark-warn-contrast-A400),
A700: var(--theme-dark-warn-contrast-A700),
),
);
$caos-light-warn: (
50: var(--theme-light-warn-50),
100: var(--theme-light-warn-100),
200: var(--theme-light-warn-200),
300: var(--theme-light-warn-300),
400: var(--theme-light-warn-400),
500: var(--theme-light-warn-500),
600: var(--theme-light-warn-600),
700: var(--theme-light-warn-700),
800: var(--theme-light-warn-800),
900: var(--theme-light-warn-900),
A100: var(--theme-light-warn-A100),
A200: var(--theme-light-warn-A200),
A400: var(--theme-light-warn-A400),
A700: var(--theme-light-warn-A700),
contrast: (
50: var(--theme-light-warn-contrast-50),
100: var(--theme-light-warn-contrast-100),
200: var(--theme-light-warn-contrast-200),
300: var(--theme-light-warn-contrast-300),
400: var(--theme-light-warn-contrast-400),
500: var(--theme-light-warn-contrast-500),
600: var(--theme-light-warn-contrast-600),
700: var(--theme-light-warn-contrast-700),
800: var(--theme-light-warn-contrast-800),
900: var(--theme-light-warn-contrast-900),
A100: var(--theme-light-warn-contrast-A100),
A200: var(--theme-light-warn-contrast-A200),
A400: var(--theme-light-warn-contrast-A400),
A700: var(--theme-light-warn-contrast-A700),
),
);
$caos-dark-theme-background: (
status-bar: map_get($caos-dark-background, 300),
app-bar: map_get($caos-dark-background, 500),
background: map_get($caos-dark-background, 500),
hover: rgba(black, .04),
card: map_get($caos-dark-background, 400),
dialog: map_get($caos-dark-background, 500),
disabled-button: rgba(black, .12),
raised-button: white,
focused-button: $dark-focused,
selected-button: map_get($caos-dark-background, 300),
selected-disabled-button: map_get($caos-dark-background, 400),
disabled-button-toggle: map_get($caos-dark-background, 200),
unselected-chip: map_get($caos-dark-background, 300),
disabled-list-option: map_get($caos-dark-background, 200),
tooltip: map_get($mat-gray, 700),
infosection: map_get($caos-dark-background, 300),
warninfosection: #4f566b,
successinfosection: #4f566b,
);
$caos-light-theme-background: (
status-bar: map_get($caos-light-background, 300),
app-bar: map_get($caos-light-background, 100),
background: map_get($caos-light-background, 500),
hover: rgba(black, .04),
card: map_get($caos-light-background, 400),
dialog: map_get($caos-light-background, 500),
disabled-button: rgba(black, .12),
raised-button: white,
focused-button: $light-focused,
selected-button: map_get($caos-light-background, 300),
selected-disabled-button: map_get($caos-light-background, 400),
disabled-button-toggle: map_get($caos-light-background, 200),
unselected-chip: map_get($caos-light-background, 300),
disabled-list-option: map_get($caos-light-background, 200),
tooltip: map_get($mat-gray, 700),
infosection: #e4e4e4,
warninfosection: #ffc1c1,
successinfosection: #cbf4c9,
);
$caos-dark-theme-foreground: (
base: white,
divider: $light-dividers,
dividers: $light-dividers,
disabled: $light-disabled-text,
disabled-button: rgba(white, .26),
disabled-text: $light-disabled-text,
elevation: black,
hint-text: $light-disabled-text,
secondary-text: $light-secondary-text,
icon: rgba(white, .54),
icons: rgba(white, .54),
text: rgba(white, .87),
slider-min: rgba(white, .87),
slider-off: rgba(white, .26),
slider-off-active: rgba(white, .38),
infosection: #f0f0f0,
warninfosection: #ffc1c1,
successinfosection: #cbf4c9,
);
$caos-light-theme-foreground: (
base: black,
divider: $dark-dividers,
dividers: $dark-dividers,
disabled: $dark-disabled-text,
disabled-button: rgba(black, .26),
disabled-text: $dark-disabled-text,
elevation: black,
hint-text: $dark-disabled-text,
secondary-text: $dark-secondary-text,
icon: rgba(black, .54),
icons: rgba(black, .54),
text: rgba(black, .87),
slider-min: rgba(black, .87),
slider-off: rgba(black, .26),
slider-off-active: rgba(black, .38),
infosection: #4a4a4a,
warninfosection: #620e0e,
successinfosection: #0e6245,
);
$caos-dark-app-theme: (
primary: mat-palette($caos-dark-primary),
accent: mat-palette($caos-dark-primary),
warn: mat-palette($caos-dark-warn),
is-dark: true,
foreground: $caos-dark-theme-foreground,
background: $caos-dark-theme-background,
);
$caos-light-app-theme: (
primary: mat-palette($caos-light-primary),
accent: mat-palette($caos-light-primary),
warn: mat-palette($caos-light-warn),
is-dark: false,
foreground: $caos-light-theme-foreground,
background: $caos-light-theme-background,
);
$custom-typography:
mat.define-typography-config(
$font-family: 'Lato',
);
@include mat.core($custom-typography);
@include component-themes($caos-dark-app-theme);
@include mat.all-component-themes($caos-dark-app-theme);
.mat-dialog-container,
.mat-raised-button,
.mat-stroked-button {
border-radius: 6px !important;
}
.mat-menu-item {
line-height: 35px !important;
height: 35px !important;
}
.light-theme {
@include component-themes($caos-light-app-theme);
@include mat.all-component-themes($caos-light-app-theme);
--color-main: var(--theme-light-primary-500);
--warn: #cd3d56;
--success: #10b981;
$background: map-get($caos-light-app-theme, background);
.sidenav,
.main-container,
.mat-dialog-container {
background-color: map-get($background, background);
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: map-get($background, background);
border-radius: 8px;
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: map-get($background, background);
}
::-webkit-scrollbar-thumb {
background-color: #737c8850;
border-radius: 8px;
cursor: pointer;
}
.root-header {
box-shadow: inset 0 -1px map-get($caos-light-theme-foreground, divider);
}
}
.dark-theme {
@include component-themes($caos-dark-app-theme);
@include mat.all-component-themes($caos-dark-app-theme);
--color-main: var(--theme-dark-primary-500);
--warn: #ff3b5b;
--success: #10b981;
$background: map-get($caos-dark-app-theme, background);
.sidenav,
.main-container,
.mat-dialog-container {
background-color: map-get($background, background);
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: map-get($background, background);
border-radius: 8px;
transition: all .3s cubic-bezier(.645, .045, .355, 1) !important;
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: map-get($background, background);
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 map-get($caos-dark-theme-foreground, divider);
}
}
// @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: 1rem;
padding-right: 1rem;
}
}
.enlarged-container {
padding: 0 1.5rem;
padding-top: 2rem;
padding-left: 2rem;
max-width: 1690px;
@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;
}
Reference in New Issue View Git Blame Copy Permalink