control-panel/cp-frontend/src/custom-theme.scss

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@import '~@angular/material/theming';
@import "src/app/styles/colors";
@import "src/app/styles/variables";
@import "src/app/styles/font";
// 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();

// 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/
$angular-material-admin-primary: mat-palette($mat-indigo);
$angular-material-admin-accent: mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$angular-material-admin-warn: mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$angular-material-admin-theme: mat-light-theme($angular-material-admin-primary, $angular-material-admin-accent, $angular-material-admin-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($angular-material-admin-theme);


$ama-yellow: (
  50: $yellow,
  100: #ECECEC,
  200: $yellow,
  300: $yellow,
  400: $yellow,
  500: $yellow,
  600: $yellow,
  700: $yellow,
  800: $yellow,
  900: $yellow,
  A100: $yellow,
  A200: $yellow,
  A400: $yellow,
  A700: $yellow,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  )
);

$ama-pink: (
  50: $pink,
  100: #ECECEC,
  200: $pink,
  300: $pink,
  400: $pink,
  500: $pink,
  600: $pink,
  700: $pink,
  800: $pink,
  900: $pink,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  )
);

$ama-blue: (
  50: $blue,
  100: #ECECEC,
  200: $blue,
  300: $blue,
  400: $blue,
  500: $blue,
  600: $blue,
  700: $blue,
  800: $blue,
  900: $blue,
  A100: $blue,
  A200: $blue,
  A400: $blue,
  A700: $blue,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  )
);

$ama-primary: mat-palette($ama-blue);
$ama-accent: mat-palette($ama-yellow);
$ama-warn: mat-palette($ama-pink);

$ama-theme: mat-light-theme($ama-primary, $ama-accent, $ama-warn);
@include angular-material-theme($ama-theme);

button.mat-menu-item {
  font-size: 16px;
}

button.mat-menu-item:hover:not([disabled]), .mat-menu-item.cdk-program-focused:not([disabled]), .mat-menu-item.cdk-keyboard-focused:not([disabled]), .mat-menu-item-highlighted:not([disabled]) {
  font-size: 16px;
}


mat-select.mat-select {
  width: auto;
  display: inline;
  font-size: 16px;
  font-weight: 300;
  color: $dark-grey;
  border: 1px solid $light-grey;
  border-radius: 4px;
  padding: 8px 10px;

  & .mat-select-value {
    width: auto;
    display: inline;
  }

  & .mat-select-arrow {
    color: $light-grey;
    margin-right: 0;
  }
}

.mat-option {
  font-size: 16px;
  height: 36px;
  padding: 6px 16px;
  color: $dark-grey;

  &.mat-focus-indicator.mat-selected.mat-active {
    background-color: $blue-white;
    color: $dark-grey;
  }

  &:hover:not(.mat-option-disabled) {
    background-color: $blue-white;
  }
}

.mat-form-field-underline {
  display: none;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

.mat-h1, .mat-headline, .mat-typography h1 {
  font-weight: 400;
  font-size: 48px;
}

.mat-h2, .mat-headline, .mat-typography h2 {
  font-weight: 400;
  font-size: 36px;
}

.mat-h3, .mat-headline, .mat-typography h3 {
  font-weight: 400;
  font-size: 26px;
}

.mat-h4, .mat-headline, .mat-typography h4 {
  font-weight: 400;
  font-size: 24px;
}

.mat-h5, .mat-headline, .mat-typography h5 {
  font-weight: 400;
  font-size: 21px;
}

.mat-h6, .mat-headline, .mat-typography h6 {
  font-weight: 400;
  font-size: 18px;
}

.mat-body p, .mat-body-1 p, .mat-typography p {
  margin-bottom: 16px;
  line-height: normal;
}

button.mat-fab .mat-button-wrapper {
  padding: 0;
}

.mat-card {
  color: $card-font-color;
  margin: 16px;
}

.mat-card-title p {
  font-size: 21px;
  font-weight: 400;
  color: $card-title-font-color;
}

mat-toolbar.page-header {
  display: flex;
  justify-content: space-between;
  padding: 50px 24px 16px 24px;
  background: none;
  height: auto;

  @media (max-width: $small) {
    flex-direction: column;
    align-items: baseline;
  }
}

.mat-toolbar h1 {
  font-weight: 400;
  font-size: 38.4px;
  color: $toolbar-title-font-color;
  line-height: 1;
  letter-spacing: -0.2186px;

  @media (max-width: $small) {
    white-space: normal;
  }
}

.mat-toolbar button {
  height: 41.6px;
  width: auto;
  color: $toolbar-button-font-color;
  background-color: $toolbar-button-background-color;
  line-height: 1.75;
  font-size: 0.9375rem;
  font-weight: 400;

  @media (max-width: $small) {
    margin-top: 16px;
  }
}

.mat-toolbar button:hover {
  background-color: $toolbar-button-background-color-active;
}

mat-tab-header .mat-tab-label, .mat-tab-link {
  text-transform: uppercase;
  color: $tabs-header-font-color;
  font-weight: $fw-normal;
  width: 50%;
  min-width: 0;
  padding: 0;
  opacity: 1;
}

mat-tab-header .mat-tab-label-active {
  color: $tabs-header-font-color-active;
}

mat-tab-group.mat-tab-group.mat-primary .mat-ink-bar {
  background-color: $tabs-ink-bar-color;
}

mat-tab-body div.mat-tab-body-content {
  overflow: hidden;
}

.toast-top-center {
  top: 76px;
}

.toast-top-left {
  top: 76px;
}

.toast-top-right {
  top: 76px;
}

.toast-bottom-center {
  bottom: 12px;
}

.toast-container .ngx-toastr {
  padding: 16px;
  border-radius: 45px;
}

.toast-container .ngx-toastr:hover {
  box-shadow: 0 0 12px $light-grey;
}

.mat-icon {
  padding-right: 3px;
  padding-bottom: 5px;
}

.material-icons {
  font-size: 28px;
}

button.mat-mini-fab .mat-button-wrapper {
  padding: 0;
}

button.mat-mini-fab {
  height: 36px;
  width: 36px;
}

div.mat-menu-panel {
  margin-top: 20px;
}

.fa {
  font-size: 1.5em;
}

.apexcharts-xaxistooltip.apexcharts-xaxistooltip-bottom.apexcharts-theme-light {
  background-color: $chart-tooltip-background-color;
  color: $chart-tooltip-font-color;
  border: none;
}

div.apexcharts-xaxistooltip-bottom:after {
  border-bottom-color: $chart-tooltip-border-color;
}

.mat-drawer-backdrop.mat-drawer-shown {
  background-color: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar {
  width: 6px;
  height: 3px;
}

::-webkit-scrollbar-button {
  display: none
}

::-webkit-scrollbar-track {
  background-color: $scrollbar-track-color;
}

::-webkit-scrollbar-track-piece {
  background-color: $scrollbar-track-piece-color;
}

::-webkit-scrollbar-thumb {
  height: 50px;
  background-color: $light-grey;
  border-radius: 36px;
}

::-webkit-scrollbar-corner {
  background-color: $scrollbar-corner-color;
}

::-webkit-resizer {
  background-color: $dark-grey;
}


//global define
a[cdk-describedby-host][ng-reflect-message] {
  text-decoration: underline;
  color: $light-blue;
  cursor: pointer;
}

.tooltipBreakLine {
  white-space: pre-line;
}