zitadel/console/src/styles.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;
}