/** * Generated theme by Material Theme Generator * https://materialtheme.arcsine.dev * Fork at: https://materialtheme.arcsine.dev/?c=YHBhbGV0dGU$YHByaW1hcnk$YF48IzAwYThlOCIsIj9lcjwjYjNlNWY4IiwiO2VyPCMwMDhkZGV$LCIlPmBePCMwMDYzYWIiLCI~ZXI8I2IzZDBlNiIsIjtlcjwjMDA0Nzkxfiwid2Fybj5gXjwjZjliN2I3IiwiP2VyPCNmZGU5ZTkiLCI7ZXI8I2Y2OWY5Zn4sIj9UZXh0PCNkZmQ3ZDciLCI~PTwjMDAzNDU5IiwiO1RleHQ8I2RmZDdkNyIsIjs9PCMwMDM0NTl$LCJmb250cz5bYEA8KC00fixgQDwoLTN$LGBAPCgtMn4sYEA8KC0xfixgQDxoZWFkbGluZX4sYEA8dGl0bGV$LGBAPHN1YiktMn4sYEA8c3ViKS0xfixgQDxib2R5LTJ$LGBAPGJvZHktMX4sYEA8YnV0dG9ufixgQDxjYXB0aW9ufixgQDxpbnB1dCIsInNpemU$bnVsbH1dLCJpY29uczxGaWxsZWQiLCI~bmVzcz5mYWxzZSwidmVyc2lvbj4xM30= */ @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=Roboto:wght@300;400;500&display=swap'); $fontConfig: ( display-4: mat.define-typography-level(112px, 112px, 300, 'Roboto', -0.0134em), display-3: mat.define-typography-level(56px, 56px, 400, 'Roboto', -0.0089em), display-2: mat.define-typography-level(45px, 48px, 400, 'Roboto', 0.0000em), display-1: mat.define-typography-level(34px, 40px, 400, 'Roboto', 0.0074em), headline: mat.define-typography-level(24px, 32px, 400, 'Roboto', 0.0000em), title: mat.define-typography-level(20px, 32px, 500, 'Roboto', 0.0075em), subheading-2: mat.define-typography-level(16px, 28px, 400, 'Roboto', 0.0094em), subheading-1: mat.define-typography-level(15px, 24px, 500, 'Roboto', 0.0067em), body-2: mat.define-typography-level(14px, 24px, 500, 'Roboto', 0.0179em), body-1: mat.define-typography-level(14px, 20px, 400, 'Roboto', 0.0179em), button: mat.define-typography-level(14px, 14px, 500, 'Roboto', 0.0893em), caption: mat.define-typography-level(12px, 20px, 400, 'Roboto', 0.0333em), input: mat.define-typography-level(inherit, 1.125, 400, 'Roboto', 1.5px)); // Foreground Elements // Light Theme Text $dark-text: #dfd7d7; $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: #dfd7d7; $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 : #003459; $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(#003459, 20%); $dark-bg-alpha-4 : rgba(#003459, 0.04); $dark-bg-alpha-12 : rgba(#003459, 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 : #003459; $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(#003459, 0.04); $light-bg-alpha-12 : rgba(#003459, 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: #00a8e8; --primary-lighter-color: #b3e5f8; --primary-darker-color: #008dde; --text-primary-color: #{$light-primary-text}; --text-primary-lighter-color: #{$dark-primary-text}; --text-primary-darker-color: #{$light-primary-text}; } $mat-primary: ( main: #00a8e8, lighter: #b3e5f8, darker: #008dde, 200: #00a8e8, // 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: #0063ab; --accent-lighter-color: #b3d0e6; --accent-darker-color: #004791; --text-accent-color: #{$light-primary-text}; --text-accent-lighter-color: #{$dark-primary-text}; --text-accent-darker-color: #{$light-primary-text}; } $mat-accent: ( main: #0063ab, lighter: #b3d0e6, darker: #004791, 200: #0063ab, // 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: #f9b7b7; --warn-lighter-color: #fde9e9; --warn-darker-color: #f69f9f; --text-warn-color: #{$dark-primary-text}; --text-warn-lighter-color: #{$dark-primary-text}; --text-warn-darker-color: #{$dark-primary-text}; } $mat-warn: ( main: #f9b7b7, lighter: #fde9e9, darker: #f69f9f, 200: #f9b7b7, // For slide toggle, contrast: ( main: $dark-primary-text, lighter: $dark-primary-text, darker: $dark-primary-text, )); $theme-warn: mat.define-palette($mat-warn, main, lighter, darker); ; $theme: ( primary: $theme-primary, accent: $theme-accent, warn: $theme-warn, is-dark: true, foreground: $mat-dark-theme-foreground, background: $mat-dark-theme-background, ); $altTheme: ( primary: $theme-primary, accent: $theme-accent, warn: $theme-warn, is-dark: false, foreground: $mat-light-theme-foreground, background: $mat-light-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: 'Roboto'; } }