mirror of
https://github.com/PhoenixTwoFive/karaoqueue.git
synced 2025-05-21 20:11:47 +02:00
Style Changes
This commit is contained in:
parent
8652abe8dc
commit
8780e6c595
@ -0,0 +1,7 @@
|
||||
.spacer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.is-active {
|
||||
background-color: rgba(255,255,255,0.1);
|
||||
}
|
||||
@ -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
|
||||
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
|
||||
// hue. Available color palettes: https://material.io/design/color/
|
||||
$ng-karaoqueue-primary: mat-palette($md-stukblue);
|
||||
$ng-karaoqueue-accent: mat-palette($md-stukred, A200, A100, A400);
|
||||
// $ng-karaoqueue-primary: mat-palette($mat-indigo);
|
||||
// $ng-karaoqueue-accent: mat-palette($mat-pink, A200, A100, A400);
|
||||
$fontConfig: (display-4: mat-typography-level(112px, 112px, 300, 'Roboto', -0.0134em),
|
||||
display-3: mat-typography-level(56px, 56px, 400, 'Roboto', -0.0089em),
|
||||
display-2: mat-typography-level(45px, 48px, 400, 'Roboto', 0.0000em),
|
||||
display-1: mat-typography-level(34px, 40px, 400, 'Roboto', 0.0074em),
|
||||
headline: mat-typography-level(24px, 32px, 400, 'Roboto', 0.0000em),
|
||||
title: mat-typography-level(20px, 32px, 500, 'Roboto', 0.0075em),
|
||||
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).
|
||||
$ng-karaoqueue-warn: mat-palette($mat-red);
|
||||
// Foreground Elements
|
||||
|
||||
// Create the theme object (a Sass map containing all of the palettes).
|
||||
$ng-karaoqueue-theme: mat-light-theme($ng-karaoqueue-primary, $ng-karaoqueue-accent, $ng-karaoqueue-warn);
|
||||
// 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);
|
||||
|
||||
// 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($ng-karaoqueue-theme);
|
||||
$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-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;
|
||||
}
|
||||
|
||||
@ -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,
|
||||
));
|
||||
Loading…
x
Reference in New Issue
Block a user