zitadel/console/src/styles.scss

@use '~@angular/material' as mat;

@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;
  --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;
}

.light-theme {
  @include component-themes($caos-light-app-theme);
  @include mat.all-component-themes($caos-light-app-theme);

  --grey: #697386;
  --color-main: var(--theme-light-primary-500);
  $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);
  $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: .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;
}