src/styles.scss
/**
* Generated theme by Material Theme Generator
* https://materialtheme.arcsine.dev
* Fork at: http://localhost:4200/?c=YHBhbGV0dGU$YHByaW1hcnk$YF48JhKuLyIsIj9lcjwmuOfBIiwiO2VyPCYKlB1$LCIlPmBePCYWGRkiLCI~ZXI8Jrm6uiIsIjtlcjwmDA4Ofiwid2Fybj5gXjwm~wAAIiwiP2VyPCb~s7MiLCI7ZXI8Jv8AAH4sIj9UZXh0PCYAAAAiLCI~PTwm$vr6IiwiO1RleHQ8Jv~~~yIsIjs9PCYsLCx$LCJmb250cz5bYEA8KC00IiwiZmFtaWx5PFJhbGV3YXl$LGBAPCgtMyIsImZhbWlseTxSYWxld2F5fixgQDwoLTIiLCJmYW1pbHk8UmFsZXdheX4sYEA8KC0xIiwiZmFtaWx5PFJhbGV3YXl$LGBAPGhlYWRsaW5lIiwiZmFtaWx5PFJhbGV3YXl$LGBAPHRpdGxlIiwiZmFtaWx5PFJhbGV3YXl$LGBAPHN1YiktMiIsImZhbWlseTxSYWxld2F5fixgQDxzdWIpLTEiLCJmYW1pbHk8UmFsZXdheX4sYEA8Ym9keS0yIiwiZmFtaWx5PFJhbGV3YXl$LGBAPGJvZHktMSIsImZhbWlseTxSYWxld2F5fixgQDxidXR0b24iLCJmYW1pbHk8UmFsZXdheX4sYEA8Y2FwdGlvbiIsImZhbWlseTxSYWxld2F5fixgQDxpbnB1dCIsImZhbWlseTxSYWxld2F5Iiwic2l6ZT5udWxsfV0sImljb25zPEZpbGxlZCIsIj9uZXNzPnRydWUsInZlcnNpb24$MTJ9
*/

@use '@angular/material' as mat;

// 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.

// Fonts
@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
     
$fontConfig: (
  display-4: mat.define-typography-level(112px, 112px, 300, 'Raleway', -0.0134em),
  display-3: mat.define-typography-level(56px, 56px, 400, 'Raleway', -0.0089em),
  display-2: mat.define-typography-level(45px, 48px, 400, 'Raleway', 0.0000em),
  display-1: mat.define-typography-level(34px, 40px, 400, 'Raleway', 0.0074em),
  headline: mat.define-typography-level(24px, 32px, 400, 'Raleway', 0.0000em),
  title: mat.define-typography-level(20px, 32px, 500, 'Raleway', 0.0075em),
  subheading-2: mat.define-typography-level(16px, 28px, 400, 'Raleway', 0.0094em),
  subheading-1: mat.define-typography-level(15px, 24px, 500, 'Raleway', 0.0067em),
  body-2: mat.define-typography-level(14px, 24px, 500, 'Raleway', 0.0179em),
  body-1: mat.define-typography-level(14px, 20px, 400, 'Raleway', 0.0179em),
  button: mat.define-typography-level(14px, 14px, 500, 'Raleway', 0.0893em),
  caption: mat.define-typography-level(12px, 20px, 400, 'Raleway', 0.0333em),
  input: mat.define-typography-level(inherit, 1.125, 400, 'Raleway', 1.5px)
);

// Foreground Elements

// Light Theme Text
$dark-text: #000000;
$dark-primary-text: rgba($dark-text, 0.87);
$dark-accent-text: rgba($dark-primary-text, 0.54);
$dark-disabled-text: rgba($dark-primary-text, 0.38);
$dark-dividers: rgba($dark-primary-text, 0.12);
$dark-focused: rgba($dark-primary-text, 0.12);

$mat-light-theme-foreground: (
  base:              black,
  divider:           $dark-dividers,
  dividers:          $dark-dividers,
  disabled:          $dark-disabled-text,
  disabled-button:   rgba($dark-text, 0.26),
  disabled-text:     $dark-disabled-text,
  elevation:         black,
  secondary-text:    $dark-accent-text,
  hint-text:         $dark-disabled-text,
  accent-text:       $dark-accent-text,
  icon:              $dark-accent-text,
  icons:             $dark-accent-text,
  text:              $dark-primary-text,
  slider-min:        $dark-primary-text,
  slider-off:        rgba($dark-text, 0.26),
  slider-off-active: $dark-disabled-text,
);

;

// Dark Theme text
$light-text: #ffffff;
$light-primary-text: $light-text;
$light-accent-text: rgba($light-primary-text, 0.7);
$light-disabled-text: rgba($light-primary-text, 0.5);
$light-dividers: rgba($light-primary-text, 0.12);
$light-focused: rgba($light-primary-text, 0.12);

$mat-dark-theme-foreground: (
  base:              $light-text,
  divider:           $light-dividers,
  dividers:          $light-dividers,
  disabled:          $light-disabled-text,
  disabled-button:   rgba($light-text, 0.3),
  disabled-text:     $light-disabled-text,
  elevation:         black,
  hint-text:         $light-disabled-text,
  secondary-text:    $light-accent-text,
  accent-text:       $light-accent-text,
  icon:              $light-text,
  icons:             $light-text,
  text:              $light-text,
  slider-min:        $light-text,
  slider-off:        rgba($light-text, 0.3),
  slider-off-active: rgba($light-text, 0.3),
);

// Background config
// Light bg
$light-background:    #fafafa;
$light-bg-darker-5:   darken($light-background, 5%);
$light-bg-darker-10:  darken($light-background, 10%);
$light-bg-darker-20:  darken($light-background, 20%);
$light-bg-darker-30:  darken($light-background, 30%);
$light-bg-lighter-5:  lighten($light-background, 5%);
$dark-bg-tooltip:     lighten(#2c2c2c, 20%);
$dark-bg-alpha-4:     rgba(#2c2c2c, 0.04);
$dark-bg-alpha-12:    rgba(#2c2c2c, 0.12);

$mat-light-theme-background: (
  background:               $light-background,
  status-bar:               $light-bg-darker-20,
  app-bar:                  $light-bg-darker-5,
  hover:                    $dark-bg-alpha-4,
  card:                     $light-bg-lighter-5,
  dialog:                   $light-bg-lighter-5,
  tooltip:                  $dark-bg-tooltip,
  disabled-button:          $dark-bg-alpha-12,
  raised-button:            $light-bg-lighter-5,
  focused-button:           $dark-focused,
  selected-button:          $light-bg-darker-20,
  selected-disabled-button: $light-bg-darker-30,
  disabled-button-toggle:   $light-bg-darker-10,
  unselected-chip:          $light-bg-darker-10,
  disabled-list-option:     $light-bg-darker-10,
);

// Dark bg
$dark-background:     #2c2c2c;
$dark-bg-lighter-5:   lighten($dark-background, 5%);
$dark-bg-lighter-10:  lighten($dark-background, 10%);
$dark-bg-lighter-20:  lighten($dark-background, 20%);
$dark-bg-lighter-30:  lighten($dark-background, 30%);
$light-bg-alpha-4:    rgba(#fafafa, 0.04);
$light-bg-alpha-12:   rgba(#fafafa, 0.12);

// Background palette for dark themes.
$mat-dark-theme-background: (
  background:               $dark-background,
  status-bar:               $dark-bg-lighter-20,
  app-bar:                  $dark-bg-lighter-5,
  hover:                    $light-bg-alpha-4,
  card:                     $dark-bg-lighter-5,
  dialog:                   $dark-bg-lighter-5,
  tooltip:                  $dark-bg-lighter-20,
  disabled-button:          $light-bg-alpha-12,
  raised-button:            $dark-bg-lighter-5,
  focused-button:           $light-focused,
  selected-button:          $dark-bg-lighter-20,
  selected-disabled-button: $dark-bg-lighter-30,
  disabled-button-toggle:   $dark-bg-lighter-10,
  unselected-chip:          $dark-bg-lighter-20,
  disabled-list-option:     $dark-bg-lighter-10,
);

// Compute font config
@include mat.core($fontConfig);

// Theme Config

body {
  --primary-color: #12ae2f;
  --primary-lighter-color: #b8e7c1;
  --primary-darker-color: #0a941d;
  --text-primary-color: #{$light-primary-text};
  --text-primary-lighter-color: #{$dark-primary-text};
  --text-primary-darker-color: #{$light-primary-text};
}   
$mat-primary: (
  main: #12ae2f,
  lighter: #b8e7c1,
  darker: #0a941d,
  200: #12ae2f, // For slide toggle,
  contrast : (
    main: $light-primary-text,
    lighter: $dark-primary-text,
    darker: $light-primary-text,
  )
);
$theme-primary: mat.define-palette($mat-primary, main, lighter, darker);

body {
  --accent-color: #161919;
  --accent-lighter-color: #b9baba;
  --accent-darker-color: #0c0e0e;
  --text-accent-color: #{$light-primary-text};
  --text-accent-lighter-color: #{$dark-primary-text};
  --text-accent-darker-color: #{$light-primary-text};
}   
$mat-accent: (
  main: #161919,
  lighter: #b9baba,
  darker: #0c0e0e,
  200: #161919, // For slide toggle,
  contrast : (
    main: $light-primary-text,
    lighter: $dark-primary-text,
    darker: $light-primary-text,
  )
);
$theme-accent: mat.define-palette($mat-accent, main, lighter, darker);

body {
  --warn-color: #ff0000;
  --warn-lighter-color: #ffb3b3;
  --warn-darker-color: #ff0000;
  --text-warn-color: #{$light-primary-text};
  --text-warn-lighter-color: #{$dark-primary-text};
  --text-warn-darker-color: #{$light-primary-text};
}   
$mat-warn: (
  main: #ff0000,
  lighter: #ffb3b3,
  darker: #ff0000,
  200: #ff0000, // For slide toggle,
  contrast : (
    main: $light-primary-text,
    lighter: $dark-primary-text,
    darker: $light-primary-text,
  )
);
$theme-warn: mat.define-palette($mat-warn, main, lighter, darker);

$theme: (
  primary: $theme-primary,
  accent: $theme-accent,
  warn: $theme-warn,
  is-dark: false,
  foreground: $mat-light-theme-foreground,
  background: $mat-light-theme-background,
);
$altTheme: (
  primary: $theme-primary,
  accent: $theme-accent,
  warn: $theme-warn,
  is-dark: true,
  foreground: $mat-dark-theme-foreground,
  background: $mat-dark-theme-background,
);

// Theme Init
@include mat.all-component-themes($theme);

.theme-alternate {
  @include mat.all-component-themes($altTheme);
}

// Specific component overrides, pieces that are not in line with the general theming

// Handle buttons appropriately, with respect to line-height
.mat-raised-button, .mat-stroked-button, .mat-flat-button {
  padding: 0 1.15em;
  margin: 0 .65em;
  min-width: 3em;
  line-height: 36.4px
}

.mat-standard-chip {
  padding: .5em .85em;
  min-height: 2.5em;
}

.material-icons {
  font-size: 24px;
  font-family: 'Material Icons', 'Material Icons';  
  .mat-badge-content {
    font-family: 'Raleway';
  }
}

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

h2,h3,h4 {
  a.help {
    span.mat-badge-content {
      background:black;
      opacity: .7;
      z-index: 1;
      color: white;
      transition: all .15s ease-in-out;
    }
    &:hover {
      span.mat-badge-content {
        background: darkgreen;
      }
    }
  }  
}

mat-icon[data-close], mat-icon[svgicon="github"] {
  color: white;
}

mat-dialog-container.mat-dialog-container, 
mat-dialog-container [mat-dialog-content] {
  padding: 0;
  margin: 0;
}

.mat-simple-snackbar-action {
  a, button {
    color: white; 
  }
}

mat-divider {
  margin-top: 1em !important;
  margin-bottom: 1em !important;
}

.preview {
  app-icon-notify {
    a {
      color: inherit;
    }
  }
}