Style Changes

frontend/ng-karaoqueue/src/app/app.component.scss

@@ -0,0 +1,7 @@
+.spacer {
+  flex: 1 1 auto;
+}
+
+.is-active {
+  background-color: rgba(255,255,255,0.1);
+}

frontend/ng-karaoqueue/src/custom-theme.scss

@@ -1,32 +1,223 @@
+/**
+* Generated theme by Material Theme Generator
+* https://materialtheme.arcsine.dev
+*/
 
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
 @import '~@angular/material/theming';
-// 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();
 
-@import 'palettes.scss';
+// Fonts
+@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
+$fontConfig: (display-4: mat-typography-level(112px, 112px, 300, 'Roboto', -0.0134em),
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+  display-3: mat-typography-level(56px, 56px, 400, 'Roboto', -0.0089em),
-// hue. Available color palettes: https://material.io/design/color/
+  display-2: mat-typography-level(45px, 48px, 400, 'Roboto', 0.0000em),
-$ng-karaoqueue-primary: mat-palette($md-stukblue);
+  display-1: mat-typography-level(34px, 40px, 400, 'Roboto', 0.0074em),
-$ng-karaoqueue-accent: mat-palette($md-stukred, A200, A100, A400);
+  headline: mat-typography-level(24px, 32px, 400, 'Roboto', 0.0000em),
-// $ng-karaoqueue-primary: mat-palette($mat-indigo);
+  title: mat-typography-level(20px, 32px, 500, 'Roboto', 0.0075em),
-// $ng-karaoqueue-accent: mat-palette($mat-pink, A200, A100, A400);
+  subheading-2: mat-typography-level(16px, 28px, 400, 'Roboto', 0.0094em),
+  subheading-1: mat-typography-level(15px, 24px, 500, 'Roboto', 0.0067em),
+  body-2: mat-typography-level(14px, 24px, 500, 'Roboto', 0.0179em),
+  body-1: mat-typography-level(14px, 20px, 400, 'Roboto', 0.0179em),
+  button: mat-typography-level(14px, 14px, 500, 'Roboto', 0.0893em),
+  caption: mat-typography-level(12px, 20px, 400, 'Roboto', 0.0333em),
+  input: mat-typography-level(inherit, 1.125, 400, 'Roboto', 1.5px));
 
-// The warn palette is optional (defaults to red).
+// Foreground Elements
-$ng-karaoqueue-warn: mat-palette($mat-red);
 
-// Create the theme object (a Sass map containing all of the palettes).
+// Light Theme Text
-$ng-karaoqueue-theme: mat-light-theme($ng-karaoqueue-primary, $ng-karaoqueue-accent, $ng-karaoqueue-warn);
+$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);
 
-// Include theme styles for core and each component used in your app.
+$mat-light-theme-foreground: (base: black,
-// Alternatively, you can import and @include the theme mixins for each component
+  divider: $dark-dividers,
-// that you are using.
+  dividers: $dark-dividers,
-@include angular-material-theme($ng-karaoqueue-theme);
+  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-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,
+  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,
+  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: #090a28;
+  --primary-lighter-color: #b5b6bf;
+  --primary-darker-color: #050518;
+  --text-primary-color: #{$light-primary-text};
+  --text-primary-lighter-color: #{$dark-primary-text};
+  --text-primary-darker-color: #{$light-primary-text};
+}
+
+$mat-primary: (main: #090a28,
+  lighter: #b5b6bf,
+  darker: #050518,
+  200: #090a28, // For slide toggle,
+  contrast : (main: $light-primary-text,
+    lighter: $dark-primary-text,
+    darker: $light-primary-text,
+  ));
+$theme-primary: mat-palette($mat-primary, main, lighter, darker);
+
+body {
+  --accent-color: #b70000;
+  --accent-lighter-color: #e9b3b3;
+  --accent-darker-color: #9f0000;
+  --text-accent-color: #{$light-primary-text};
+  --text-accent-lighter-color: #{$dark-primary-text};
+  --text-accent-darker-color: #{$light-primary-text};
+}
+
+$mat-accent: (main: #b70000,
+  lighter: #e9b3b3,
+  darker: #9f0000,
+  200: #b70000, // For slide toggle,
+  contrast : (main: $light-primary-text,
+    lighter: $dark-primary-text,
+    darker: $light-primary-text,
+  ));
+$theme-accent: mat-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-palette($mat-warn, main, lighter, darker);
+;
+
+$theme: mat-dark-theme($theme-primary, $theme-accent, $theme-warn);
+$altTheme: mat-light-theme($theme-primary, $theme-accent, $theme-warn);
+
+// Theme Init
+@include angular-material-theme($theme);
+
+.theme-alternate {
+  @include angular-material-theme($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;
+}

frontend/ng-karaoqueue/src/palettes.scss

@@ -1,60 +0,0 @@
-/* For use in src/lib/core/theming/_palette.scss */
-$md-stukblue: (50 : #e1e2e5,
-  100 : #b5b6bf,
-  200 : #848594,
-  300 : #535469,
-  400 : #2e2f48,
-  500 : #090a28,
-  600 : #080924,
-  700 : #06071e,
-  800 : #050518,
-  900 : #02030f,
-  A100 : #5252ff,
-  A200 : #1f1fff,
-  A400 : #0000eb,
-  A700 : #0000d1,
-  contrast: (50 : #000000,
-    100 : #000000,
-    200 : #000000,
-    300 : #ffffff,
-    400 : #ffffff,
-    500 : #ffffff,
-    600 : #ffffff,
-    700 : #ffffff,
-    800 : #ffffff,
-    900 : #ffffff,
-    A100 : #ffffff,
-    A200 : #ffffff,
-    A400 : #ffffff,
-    A700 : #ffffff,
-  ));
-
-$md-stukred: (50 : #f6e0e0,
-  100 : #e9b3b3,
-  200 : #db8080,
-  300 : #cd4d4d,
-  400 : #c22626,
-  500 : #b70000,
-  600 : #b00000,
-  700 : #a70000,
-  800 : #9f0000,
-  900 : #900000,
-  A100 : #ffbcbc,
-  A200 : #ff8989,
-  A400 : #ff5656,
-  A700 : #ff3c3c,
-  contrast: (50 : #000000,
-    100 : #000000,
-    200 : #000000,
-    300 : #ffffff,
-    400 : #ffffff,
-    500 : #ffffff,
-    600 : #ffffff,
-    700 : #ffffff,
-    800 : #ffffff,
-    900 : #ffffff,
-    A100 : #000000,
-    A200 : #000000,
-    A400 : #000000,
-    A700 : #ffffff,
-  ));