zitadel/console/src/styles.scss

@use '@angular/material' as mat;

@import 'codemirror/lib/codemirror.css';
@import './component-themes';
@import './styles/lato-font.scss';
@import './styles/ailerons.scss';
@import '@angular/material/theming';
@import '/node_modules/flag-icons/css/flag-icons.min.css';
@import './styles/palette-helper.scss';
@import './styles/palette.scss';

$material-design-icons-font-directory-path: '~material-design-icons-iconfont/dist/fonts/';

@import 'material-design-icons-iconfont/src/material-design-icons.scss';

:root {
  --mat-table-row-item-label-text-size: 14px;
  --mat-menu-item-label-text-size: 14px;

  --grey: #8795a1;
  --warn: #ff3b5b;
  --success: #10b981;
  --table-row-back: #363738;

  --theme-dark-background-50: #7c93c6;
  --theme-dark-background-contrast-50: hsla(0, 0%, 0%, 0.87);
  --theme-dark-background-100: #4a69aa;
  --theme-dark-background-contrast-100: #ffffff;
  --theme-dark-background-200: #395183;
  --theme-dark-background-contrast-200: #ffffff;
  --theme-dark-background-300: #243252;
  --theme-dark-background-contrast-300: #ffffff;
  --theme-dark-background-400: #1a253c;
  --theme-dark-background-contrast-400: #ffffff;
  --theme-dark-background-500: #111827;
  --theme-dark-background-contrast-500: #ffffff;
  --theme-dark-background-600: #080b12;
  --theme-dark-background-contrast-600: #ffffff;
  --theme-dark-background-700: #000000;
  --theme-dark-background-contrast-700: #ffffff;
  --theme-dark-background-800: #000000;
  --theme-dark-background-contrast-800: #ffffff;
  --theme-dark-background-900: #000000;
  --theme-dark-background-contrast-900: #ffffff;
  --theme-dark-background-A100: #5782e0;
  --theme-dark-background-contrast-A100: hsla(0, 0%, 0%, 0.87);
  --theme-dark-background-A200: #204eb1;
  --theme-dark-background-contrast-A200: #ffffff;
  --theme-dark-background-A400: #182b53;
  --theme-dark-background-contrast-A400: #ffffff;
  --theme-dark-background-A700: #17223b;
  --theme-dark-background-contrast-A700: #ffffff;

  --theme-light-background-50: #ffffff;
  --theme-light-background-contrast-50: hsla(0, 0%, 0%, 0.87);
  --theme-light-background-100: #ffffff;
  --theme-light-background-contrast-100: hsla(0, 0%, 0%, 0.87);
  --theme-light-background-200: #ffffff;
  --theme-light-background-contrast-200: hsla(0, 0%, 0%, 0.87);
  --theme-light-background-300: #ffffff;
  --theme-light-background-contrast-300: hsla(0, 0%, 0%, 0.87);
  --theme-light-background-400: #ffffff;
  --theme-light-background-contrast-400: hsla(0, 0%, 0%, 0.87);
  --theme-light-background-500: #fafafa;
  --theme-light-background-contrast-500: hsla(0, 0%, 0%, 0.87);
  --theme-light-background-600: #ebebeb;
  --theme-light-background-contrast-600: hsla(0, 0%, 0%, 0.87);
  --theme-light-background-700: #dbdbdb;
  --theme-light-background-contrast-700: hsla(0, 0%, 0%, 0.87);
  --theme-light-background-800: #cccccc;
  --theme-light-background-contrast-800: hsla(0, 0%, 0%, 0.87);
  --theme-light-background-900: #bdbdbd;
  --theme-light-background-contrast-900: hsla(0, 0%, 0%, 0.87);
  --theme-light-background-A100: #ffffff;
  --theme-light-background-contrast-A100: hsla(0, 0%, 0%, 0.87);
  --theme-light-background-A200: #ffffff;
  --theme-light-background-contrast-A200: hsla(0, 0%, 0%, 0.87);
  --theme-light-background-A400: #ffffff;
  --theme-light-background-contrast-A400: hsla(0, 0%, 0%, 0.87);
  --theme-light-background-A700: #ffffff;
  --theme-light-background-contrast-A700: hsla(0, 0%, 0%, 0.87);

  --theme-dark-text: #ffffff;
  --theme-dark-secondary-text: #ffffffc7;
  --theme-light-text: #000000;
  --theme-light-secondary-text: #000000c7;
}

$cnsl-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),
  ),
);

$cnsl-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),
  ),
);

$cnsl-dark-theme-secondary-text: var(--theme-dark-secondary-text);
$cnsl-light-theme-secondary-text: var(--theme-light-secondary-text);

$cnsl-dark-theme-background: (
  status-bar: map_get($cnsl-dark-background, 300),
  app-bar: map_get($cnsl-dark-background, 500),
  background: map_get($cnsl-dark-background, 500),
  hover: rgba(black, 0.04),
  card: #222,
  // set fixed color due to https://github.com/angular/components/pull/14253
  // change where a scss mix function can't use a css var
  cards: map_get($cnsl-dark-background, 400),
  cardhovered: map_get($cnsl-dark-background, 300),
  contributor: map_get($cnsl-dark-background, 400),
  contributor-avatar: map_get($cnsl-dark-background, 300),
  dialog: map_get($cnsl-dark-background, 500),
  disabled-button: rgba(black, 0.12),
  raised-button: white,
  focused-button: $dark-focused,
  selected-button: map_get($cnsl-dark-background, 300),
  selected-disabled-button: map_get($cnsl-dark-background, 400),
  disabled-button-toggle: map_get($cnsl-dark-background, 200),
  unselected-chip: map_get($cnsl-dark-background, 300),
  disabled-list-option: map_get($cnsl-dark-background, 200),
  tooltip: map_get($mat-gray, 700),
  infosection: map_get($cnsl-dark-background, 300),
  warninfosection: #741f2c4a,
  alertinfosection: #92400e50,
  successinfosection: map_get($cnsl-dark-background, 300),
  state: map_get($cnsl-dark-background, 300),
  state-active: #68cf8340,
  state-inactive: #af455359,
  toolbar: rgba(map_get($cnsl-dark-background, 500), 0.9),
  moz-toolbar: map_get($cnsl-dark-background, 500),
  footer: #00000020,
  metadata-section: #00000020,
  alert: #fbbf24,
  toast: map_get($cnsl-dark-background, 400),
);

$cnsl-light-theme-background: (
  status-bar: map_get($cnsl-light-background, 300),
  app-bar: map_get($cnsl-light-background, 100),
  background: map_get($cnsl-light-background, 500),
  hover: rgba(black, 0.04),
  contributor: #00000010,
  contributor-avatar: map_get($caos-light-primary, 300),
  card: #fff,
  // set fixed color due to https://github.com/angular/components/pull/14253
  // change where a scss mix function can't use a css var
  cards: map_get($cnsl-light-background, 400),
  cardhovered: map_get($cnsl-light-background, 300),
  dialog: map_get($cnsl-light-background, 500),
  disabled-button: rgba(black, 0.12),
  raised-button: white,
  focused-button: $light-focused,
  selected-button: map_get($cnsl-light-background, 300),
  selected-disabled-button: map_get($cnsl-light-background, 400),
  disabled-button-toggle: map_get($cnsl-light-background, 200),
  unselected-chip: map_get($cnsl-light-background, 300),
  disabled-list-option: map_get($cnsl-light-background, 200),
  tooltip: map_get($mat-gray, 700),
  infosection: map_get($cnsl-light-background, 600),
  warninfosection: #ffc1c1,
  alertinfosection: rgb(251, 191, 36),
  successinfosection: #cbf4c9,
  toolbar: rgba(map_get($cnsl-light-background, 500), 0.9),
  moz-toolbar: map_get($cnsl-light-background, 500),
  footer: #00000008,
  metadata-section: #605f5f08,
  alert: rgb(251, 191, 36),
  toast: map_get($cnsl-light-background, 400),
);

$cnsl-dark-theme-foreground: (
  base: white,
  divider: $light-dividers,
  dividers: $light-dividers,
  disabled: $light-disabled-text,
  disabled-button: rgba(white, 0.26),
  disabled-text: $light-disabled-text,
  elevation: black,
  hint-text: $light-disabled-text,
  secondary-text: $cnsl-dark-theme-secondary-text,
  placeholder-text: rgba(white, 0.4),
  icon: rgba(white, 0.54),
  icons: rgba(white, 0.54),
  text: $cnsl-dark-theme-text,
  slider-min: rgba(white, 0.87),
  slider-off: rgba(white, 0.26),
  slider-off-active: rgba(white, 0.38),
  infosection: #f0f0f0,
  warninfosection: #ffc1c1,
  alertinfosection: rgb(251, 191, 36),
  successinfosection: #cbf4c9,
  toolbar-items: map-get(map-get($caos-dark-primary, contrast), 500),
  slash: #ffffff6e,
);

$cnsl-light-theme-foreground: (
  base: black,
  divider: $dark-dividers,
  dividers: $dark-dividers,
  disabled: $dark-disabled-text,
  disabled-button: rgba(black, 0.26),
  disabled-text: $dark-disabled-text,
  elevation: black,
  hint-text: $dark-disabled-text,
  secondary-text: $cnsl-light-theme-secondary-text,
  placeholder-text: rgba(black, 0.3),
  icon: rgba(black, 0.54),
  icons: rgba(black, 0.54),
  text: $cnsl-light-theme-text,
  slider-min: rgba(black, 0.87),
  slider-off: rgba(black, 0.26),
  slider-off-active: rgba(black, 0.38),
  infosection: map-get(map-get($cnsl-light-background, contrast), 600),
  warninfosection: #620e0e,
  alertinfosection: rgb(146, 64, 14),
  successinfosection: #0e6245,
  toolbar-items: map-get(map-get($caos-light-primary, contrast), 500),
  slash: #0000006e,
);

$custom-level: mat.define-typography-level(
  $font-family: Lato,
  $font-weight: 500,
  $font-size: 14px,
  $line-height: 1,
  $letter-spacing: normal,
);

$custom-body-level: mat.define-typography-level(
  $font-family: Lato,
  $font-weight: 500,
  $font-size: 16px,
  $letter-spacing: normal,
);

$custom-caption-level: mat.define-typography-level(
  $font-family: Lato,
  $font-weight: 500,
  $font-size: 12px,
  $letter-spacing: normal,
);

$custom-typography: mat.define-typography-config(
  $font-family: Lato,
  $button: $custom-level,
  $body-1: $custom-body-level,
  $caption: $custom-caption-level,
);

$caos-light-app-theme: mat.define-light-theme(
  (
    color: (
      primary: mat-palette($caos-light-primary),
      accent: mat-palette($caos-light-primary),
      warn: mat-palette($caos-light-warn),
    ),
    typography: $custom-typography,
    density: 0,
  )
);

$caos-dark-app-theme: mat.define-dark-theme(
  (
    color: (
      primary: mat-palette($caos-dark-primary),
      accent: mat-palette($caos-dark-primary),
      warn: mat-palette($caos-dark-warn),
    ),
    typography: $custom-typography,
    density: 0,
  )
);

$caos-light-app-theme: modify-palette($caos-light-app-theme, background, $cnsl-light-theme-background);
$caos-dark-app-theme: modify-palette($caos-dark-app-theme, background, $cnsl-dark-theme-background);

$caos-light-app-theme: modify-palette($caos-light-app-theme, foreground, $cnsl-light-theme-foreground);
$caos-dark-app-theme: modify-palette($caos-dark-app-theme, foreground, $cnsl-dark-theme-foreground);

@include mat.all-component-typographies($custom-typography);
@include mat.core();

.mat-mdc-dialog-container,
.mat-mdc-raised-button,
.mat-mdc-outlined-button {
  border-radius: 6px !important;
}

.mdc-dialog__actions {
  padding: 0 1.5rem 1.5rem 1.5rem !important;
}

.mat-mdc-menu-item {
  line-height: 35px !important;
  height: 35px !important;
}

.cnsl-action-button {
  display: flex;
  align-items: center;
  margin-left: -0.5rem;
  height: 100%;
  padding-left: 0.25rem;
  height: 36px;

  i:not(.no-margin) {
    margin-right: 0.25rem;
    font-size: 1.3rem;
  }

  .mat-icon {
    margin-right: 0.25rem;
  }
}

.mat-calendar-table {
  height: 280px;
}

.mat-mdc-select-panel {
  margin-left: -11px;
}

.mat-mdc-select {
  padding-top: 7px !important;
}

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

.progress {
  --mdc-linear-progress-active-indicator-color: var(--success);
  --mdc-linear-progress-track-height: 8px !important;
  --mdc-linear-progress-track-color: #00000010;
  --mat-select-enabled-trigger-text-color: #000;
  --mdc-linear-progress-active-indicator-height: 8px !important;
}

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

  $background: map-get($caos-light-app-theme, background);
  $foreground: map-get($caos-light-app-theme, foreground);

  --warn: #cd3d56;
  --success: #10b981;
  $border-color: map-get($foreground, divider);

  --mat-select-enabled-trigger-text-color: #000;
  --mat-table-row-item-label-text-size: 14px;
  --mat-menu-item-label-text-size: 14px;

  .progress {
    --mdc-linear-progress-track-color: #00000010;
    --mdc-linear-progress-active-indicator-color: var(--success);
  }

  .mat-mdc-menu-panel {
    background-color: map-get($background, cards);
    transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    border-radius: 6px;
    min-height: fit-content;
  }

  .mat-mdc-select-panel {
    background-color: map-get($background, cards);
  }

  .mat-mdc-option {
    background-color: map-get($background, cards);

    &:hover {
      background-color: map-get($background, cardhovered);
    }
  }

  .mat-button-toggle {
    background-color: mat.get-color-from-palette($background, cards);
    transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

    &.mat-button-toggle-checked {
      background-color: mat.get-color-from-palette($background, background);
    }
  }

  .main-container,
  .mat-mdc-dialog-container,
  .mat-calendar {
    background-color: map-get($background, background);
    transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 0 6px rgba(0, 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($cnsl-light-theme-foreground, divider);
  }
}

.dark-theme {
  $background: map-get($caos-dark-app-theme, background);
  $foreground: map-get($caos-dark-app-theme, foreground);

  --warn: #ff3b5b;
  --success: #10b981;
  $border-color: map-get($foreground, divider);

  --mat-select-enabled-trigger-text-color: #fff;
  --mat-table-row-item-label-text-size: 14px;
  --mat-menu-item-label-text-size: 14px;

  .progress {
    --mdc-linear-progress-track-color: #ffffff20;
    --mdc-linear-progress-active-indicator-color: var(--success);
  }

  .main-container {
    background-color: mat.get-color-from-palette($background, background);
    color: map-get($foreground, text);
  }

  .mat-mdc-menu-panel {
    background-color: map-get($background, cards);
    transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    border-radius: 6px;
    min-height: fit-content;
  }

  .mat-mdc-select-panel {
    background-color: map-get($background, cards);
  }

  .mat-mdc-option {
    background-color: map-get($background, cards);

    &:hover {
      background-color: map-get($background, cardhovered);
    }
  }

  .mat-button-toggle {
    background-color: mat.get-color-from-palette($background, cards);
    transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

    &.mat-button-toggle-checked {
      background-color: mat.get-color-from-palette($background, background);
    }
  }

  .main-container,
  .mat-mdc-dialog-container,
  .mat-calendar {
    background-color: mat.get-color-from-palette($background, background);
    transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: map-get($background, background);
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: map-get($background, background);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #737c8870;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
  }

  .root-header {
    box-shadow: inset 0 -1px map-get($cnsl-dark-theme-foreground, divider);
  }
}

/* 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;
  -moz-osx-font-smoothing: inherit;
  -webkit-font-smoothing: auto;

  * {
    -moz-osx-font-smoothing: inherit !important;
    -webkit-font-smoothing: auto !important;
  }
}

h1 {
  font-weight: 400;
}

h2 {
  font-size: 1.3rem;
  font-weight: 400;
}

.transparent-backdrop {
  background: transparent !important;
  opacity: 0;
}

.mat-mdc-paginator .mat-mdc-select {
  border: none;
}

.max-width-container {
  max-width: 80rem;
  margin: 0 auto;
}

.max-width-description {
  max-width: 50rem;
}

.enlarged-container {
  padding: 2rem 0 0 0;
}

i {
  font-size: 1.5rem;
}

.mat-button-toggle-button {
  display: flex;
  height: 36px;
  line-height: 36px !important;
  align-items: center;
  font-size: 14px !important;
}