phillip/karaoqueue
1
0
Fork 0
mirror of https://github.com/PhoenixTwoFive/karaoqueue.git synced 2025-05-19 19:11:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

Readability fix

Browse Source 
Adapt theme to make texts readable on dark backgrounds
This commit is contained in:
Phillip Kühne 2020-04-15 00:48:45 +02:00
parent e61c7a40cc
commit 673fde9ee6
1 changed files with 154 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

251
frontend/ng-karaoqueue/src/custom-theme.scss
View File

@ -8,9 +8,11 @@
// have to load a single css file for Angular Material in your app. // have to load a single css file for Angular Material in your app.
// Fonts // Fonts
@import 'https://fonts.googleapis.com/css?family=Material+Icons';
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500'); @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
$fontConfig: (display-4: mat-typography-level(112px, 112px, 300, 'Roboto', -0.0134em), $fontConfig: (
display-4: mat-typography-level(112px, 112px, 300, 'Roboto', -0.0134em),
display-3: mat-typography-level(56px, 56px, 400, 'Roboto', -0.0089em), display-3: mat-typography-level(56px, 56px, 400, 'Roboto', -0.0089em),
display-2: mat-typography-level(45px, 48px, 400, 'Roboto', 0.0000em), display-2: mat-typography-level(45px, 48px, 400, 'Roboto', 0.0000em),
display-1: mat-typography-level(34px, 40px, 400, 'Roboto', 0.0074em), display-1: mat-typography-level(34px, 40px, 400, 'Roboto', 0.0074em),
@ -22,7 +24,8 @@ $fontConfig: (display-4: mat-typography-level(112px, 112px, 300, 'Roboto', -0.01
body-1: mat-typography-level(14px, 20px, 400, 'Roboto', 0.0179em), body-1: mat-typography-level(14px, 20px, 400, 'Roboto', 0.0179em),
button: mat-typography-level(14px, 14px, 500, 'Roboto', 0.0893em), button: mat-typography-level(14px, 14px, 500, 'Roboto', 0.0893em),
caption: mat-typography-level(12px, 20px, 400, 'Roboto', 0.0333em), caption: mat-typography-level(12px, 20px, 400, 'Roboto', 0.0333em),
input: mat-typography-level(inherit, 1.125, 400, 'Roboto', 1.5px)); input: mat-typography-level(inherit, 1.125, 400, 'Roboto', 1.5px)
);
// Foreground Elements // Foreground Elements
@ -34,21 +37,22 @@ $dark-disabled-text: rgba($dark-primary-text, 0.38);
$dark-dividers: rgba($dark-primary-text, 0.12); $dark-dividers: rgba($dark-primary-text, 0.12);
$dark-focused: rgba($dark-primary-text, 0.12); $dark-focused: rgba($dark-primary-text, 0.12);
$mat-light-theme-foreground: (base: black, $mat-light-theme-foreground: (
divider: $dark-dividers, base: black,
dividers: $dark-dividers, divider: $dark-dividers,
disabled: $dark-disabled-text, dividers: $dark-dividers,
disabled-button: rgba($dark-text, 0.26), disabled: $dark-disabled-text,
disabled-text: $dark-disabled-text, disabled-button: rgba($dark-text, 0.26),
elevation: black, disabled-text: $dark-disabled-text,
secondary-text: $dark-accent-text, elevation: black,
hint-text: $dark-disabled-text, secondary-text: $dark-accent-text,
accent-text: $dark-accent-text, hint-text: $dark-disabled-text,
icon: $dark-accent-text, accent-text: $dark-accent-text,
icons: $dark-accent-text, icon: $dark-accent-text,
text: $dark-primary-text, icons: $dark-accent-text,
slider-min: $dark-primary-text, text: $dark-primary-text,
slider-off: rgba($dark-text, 0.26), slider-min: $dark-primary-text,
slider-off: rgba($dark-text, 0.26),
slider-off-active: $dark-disabled-text, slider-off-active: $dark-disabled-text,
); );
@ -60,75 +64,81 @@ $light-disabled-text: rgba($light-primary-text, 0.5);
$light-dividers: rgba($light-primary-text, 0.12); $light-dividers: rgba($light-primary-text, 0.12);
$light-focused: rgba($light-primary-text, 0.12); $light-focused: rgba($light-primary-text, 0.12);
$mat-dark-theme-foreground: (base: $light-text, $mat-dark-theme-foreground: (
divider: $light-dividers, base: $light-text,
dividers: $light-dividers, divider: $light-dividers,
disabled: $light-disabled-text, dividers: $light-dividers,
disabled-button: rgba($light-text, 0.3), disabled: $light-disabled-text,
disabled-text: $light-disabled-text, disabled-button: rgba($light-text, 0.3),
elevation: black, disabled-text: $light-disabled-text,
hint-text: $light-disabled-text, elevation: black,
secondary-text: $light-accent-text, hint-text: $light-disabled-text,
accent-text: $light-accent-text, secondary-text: $light-accent-text,
icon: $light-text, accent-text: $light-accent-text,
icons: $light-text, icon: $light-text,
text: $light-text, icons: $light-text,
slider-min: $light-text, text: $light-text,
slider-off: rgba($light-text, 0.3), slider-min: $light-text,
slider-off: rgba($light-text, 0.3),
slider-off-active: rgba($light-text, 0.3), slider-off-active: rgba($light-text, 0.3),
); );
// Background config // Background config
// Light bg // Light bg
$light-background: #fafafa; $light-background: #fafafa;
$light-bg-darker-5: darken($light-background, 5%); $light-bg-darker-5: darken($light-background, 5%);
$light-bg-darker-10: darken($light-background, 10%); $light-bg-darker-10: darken($light-background, 10%);
$light-bg-darker-20: darken($light-background, 20%); $light-bg-darker-20: darken($light-background, 20%);
$light-bg-darker-30: darken($light-background, 30%); $light-bg-darker-30: darken($light-background, 30%);
$light-bg-lighter-5: lighten($light-background, 5%); $light-bg-lighter-5: lighten($light-background, 5%);
$dark-bg-alpha-4: rgba(#2c2c2c, 0.04); $dark-bg-tooltip: lighten(#2c2c2c, 20%);
$dark-bg-alpha-12: rgba(#2c2c2c, 0.12); $dark-bg-alpha-4: rgba(#2c2c2c, 0.04);
$dark-bg-alpha-12: rgba(#2c2c2c, 0.12);
$mat-light-theme-background: (background: $light-background, $mat-light-theme-background: (
status-bar: $light-bg-darker-20, background: $light-background,
app-bar: $light-bg-darker-5, status-bar: $light-bg-darker-20,
hover: $dark-bg-alpha-4, app-bar: $light-bg-darker-5,
card: $light-bg-lighter-5, hover: $dark-bg-alpha-4,
dialog: $light-bg-lighter-5, card: $light-bg-lighter-5,
disabled-button: $dark-bg-alpha-12, dialog: $light-bg-lighter-5,
raised-button: $light-bg-lighter-5, tooltip: $dark-bg-tooltip,
focused-button: $dark-focused, disabled-button: $dark-bg-alpha-12,
selected-button: $light-bg-darker-20, raised-button: $light-bg-lighter-5,
focused-button: $dark-focused,
selected-button: $light-bg-darker-20,
selected-disabled-button: $light-bg-darker-30, selected-disabled-button: $light-bg-darker-30,
disabled-button-toggle: $light-bg-darker-10, disabled-button-toggle: $light-bg-darker-10,
unselected-chip: $light-bg-darker-10, unselected-chip: $light-bg-darker-10,
disabled-list-option: $light-bg-darker-10, disabled-list-option: $light-bg-darker-10,
); );
// Dark bg // Dark bg
$dark-background: #2c2c2c; $dark-background: #2c2c2c;
$dark-bg-lighter-5: lighten($dark-background, 5%); $dark-bg-lighter-5: lighten($dark-background, 5%);
$dark-bg-lighter-10: lighten($dark-background, 10%); $dark-bg-lighter-10: lighten($dark-background, 10%);
$dark-bg-lighter-20: lighten($dark-background, 20%); $dark-bg-lighter-20: lighten($dark-background, 20%);
$dark-bg-lighter-30: lighten($dark-background, 30%); $dark-bg-lighter-30: lighten($dark-background, 30%);
$light-bg-alpha-4: rgba(#fafafa, 0.04); $light-bg-alpha-4: rgba(#fafafa, 0.04);
$light-bg-alpha-12: rgba(#fafafa, 0.12); $light-bg-alpha-12: rgba(#fafafa, 0.12);
// Background palette for dark themes. // Background palette for dark themes.
$mat-dark-theme-background: (background: $dark-background, $mat-dark-theme-background: (
status-bar: $dark-bg-lighter-20, background: $dark-background,
app-bar: $dark-bg-lighter-5, status-bar: $dark-bg-lighter-20,
hover: $light-bg-alpha-4, app-bar: $dark-bg-lighter-5,
card: $dark-bg-lighter-5, hover: $light-bg-alpha-4,
dialog: $dark-bg-lighter-5, card: $dark-bg-lighter-5,
disabled-button: $light-bg-alpha-12, dialog: $dark-bg-lighter-5,
raised-button: $dark-bg-lighter-5, tooltip: $dark-bg-lighter-20,
focused-button: $light-focused, disabled-button: $light-bg-alpha-12,
selected-button: $dark-bg-lighter-20, raised-button: $dark-bg-lighter-5,
focused-button: $light-focused,
selected-button: $dark-bg-lighter-20,
selected-disabled-button: $dark-bg-lighter-30, selected-disabled-button: $dark-bg-lighter-30,
disabled-button-toggle: $dark-bg-lighter-10, disabled-button-toggle: $dark-bg-lighter-10,
unselected-chip: $dark-bg-lighter-20, unselected-chip: $dark-bg-lighter-20,
disabled-list-option: $dark-bg-lighter-10, disabled-list-option: $dark-bg-lighter-10,
); );
// Compute font config // Compute font config
@ -145,14 +155,17 @@ body {
--text-primary-darker-color: #{$light-primary-text}; --text-primary-darker-color: #{$light-primary-text};
} }
$mat-primary: (main: #090a28, $mat-primary: (
main: #090a28,
lighter: #b5b6bf, lighter: #b5b6bf,
darker: #050518, darker: #050518,
200: #090a28, // For slide toggle, 200: #090a28, // For slide toggle,
contrast : (main: $light-primary-text, contrast : (
main: $light-primary-text,
lighter: $dark-primary-text, lighter: $dark-primary-text,
darker: $light-primary-text, darker: $light-primary-text,
)); )
);
$theme-primary: mat-palette($mat-primary, main, lighter, darker); $theme-primary: mat-palette($mat-primary, main, lighter, darker);
body { body {
@ -164,35 +177,40 @@ body {
--text-accent-darker-color: #{$light-primary-text}; --text-accent-darker-color: #{$light-primary-text};
} }
$mat-accent: (main: #b70000, $mat-accent: (
main: #b70000,
lighter: #e9b3b3, lighter: #e9b3b3,
darker: #9f0000, darker: #9f0000,
200: #b70000, // For slide toggle, 200: #b70000, // For slide toggle,
contrast : (main: $light-primary-text, contrast : (
main: $light-primary-text,
lighter: $dark-primary-text, lighter: $dark-primary-text,
darker: $light-primary-text, darker: $light-primary-text,
)); )
);
$theme-accent: mat-palette($mat-accent, main, lighter, darker); $theme-accent: mat-palette($mat-accent, main, lighter, darker);
body { body {
--warn-color: #ff0000; --warn-color: #ffc600;
--warn-lighter-color: #ffb3b3; --warn-lighter-color: #ffeeb3;
--warn-darker-color: #ff0000; --warn-darker-color: #ffb100;
--text-warn-color: #{$light-primary-text}; --text-warn-color: #{$dark-primary-text};
--text-warn-lighter-color: #{$dark-primary-text}; --text-warn-lighter-color: #{$dark-primary-text};
--text-warn-darker-color: #{$light-primary-text}; --text-warn-darker-color: #{$dark-primary-text};
} }
$mat-warn: (main: #ff0000, $mat-warn: (
lighter: #ffb3b3, main: #ffc600,
darker: #ff0000, lighter: #ffeeb3,
200: #ff0000, // For slide toggle, darker: #ffb100,
contrast : (main: $light-primary-text, 200: #ffc600, // For slide toggle,
contrast : (
main: $dark-primary-text,
lighter: $dark-primary-text, lighter: $dark-primary-text,
darker: $light-primary-text, darker: $dark-primary-text,
)); )
$theme-warn: mat-palette($mat-warn, main, lighter, darker); );
; $theme-warn: mat-palette($mat-warn, main, lighter, darker);;
$theme: mat-dark-theme($theme-primary, $theme-accent, $theme-warn); $theme: mat-dark-theme($theme-primary, $theme-accent, $theme-warn);
$altTheme: mat-light-theme($theme-primary, $theme-accent, $theme-warn); $altTheme: mat-light-theme($theme-primary, $theme-accent, $theme-warn);
@ -204,13 +222,10 @@ $altTheme: mat-light-theme($theme-primary, $theme-accent, $theme-warn);
@include angular-material-theme($altTheme); @include angular-material-theme($altTheme);
} }
// Specific component overrides, pieces that are not in line with the general theming // Specific component overrides, pieces that are not in line with the general theming
// Handle buttons appropriately, with respect to line-height // Handle buttons appropriately, with respect to line-height
.mat-raised-button, .mat-raised-button, .mat-stroked-button, .mat-flat-button {
.mat-stroked-button,
.mat-flat-button {
padding: 0 1.15em; padding: 0 1.15em;
margin: 0 .65em; margin: 0 .65em;
min-width: 3em; min-width: 3em;
@ -221,3 +236,45 @@ $altTheme: mat-light-theme($theme-primary, $theme-accent, $theme-warn);
padding: .5em .85em; padding: .5em .85em;
min-height: 2.5em; min-height: 2.5em;
} }
.material-icons {
font-size: 24px;
font-family: 'Material Icons', 'Material Icons';
.mat-badge-content {
font-family: 'Roboto';
}
}
mat-form-field.mat-form-field {
&.mat-focused {
.mat-form-field-label {
color: $light-text;
}
.mat-form-field-ripple {
background-color: $light-text !important;
}
}
.mat-form-field-label.mat-focused,
.mat-form-field.mat-focused.matform-field-should-float {
color: $light-text;
}
.mat-form-field-underline, .mat-form-field-label {
color: $light-accent-text;
}
.mat-form-field-underline.mat-focused {
background-color: $light-text;
}
}
button.mat-menu-item {
line-height: 24px !important;
}
a.mat-menu-item > mat-icon {
margin-bottom: 14px;
}
.mat-icon svg {
height: 24px;
width: 24px;
}