mirror of
https://github.com/PhoenixTwoFive/karaoqueue.git
synced 2025-05-19 19:11:49 +02:00
Readability fix
Adapt theme to make texts readable on dark backgrounds
This commit is contained in:
parent
e61c7a40cc
commit
673fde9ee6
@ -8,9 +8,11 @@
|
||||
// have to load a single css file for Angular Material in your app.
|
||||
|
||||
// Fonts
|
||||
@import 'https://fonts.googleapis.com/css?family=Material+Icons';
|
||||
@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-2: mat-typography-level(45px, 48px, 400, 'Roboto', 0.0000em),
|
||||
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),
|
||||
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));
|
||||
input: mat-typography-level(inherit, 1.125, 400, 'Roboto', 1.5px)
|
||||
);
|
||||
|
||||
// Foreground Elements
|
||||
|
||||
@ -34,7 +37,8 @@ $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,
|
||||
$mat-light-theme-foreground: (
|
||||
base: black,
|
||||
divider: $dark-dividers,
|
||||
dividers: $dark-dividers,
|
||||
disabled: $dark-disabled-text,
|
||||
@ -60,7 +64,8 @@ $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,
|
||||
$mat-dark-theme-foreground: (
|
||||
base: $light-text,
|
||||
divider: $light-dividers,
|
||||
dividers: $light-dividers,
|
||||
disabled: $light-disabled-text,
|
||||
@ -86,15 +91,18 @@ $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,
|
||||
$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,
|
||||
@ -115,12 +123,14 @@ $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,
|
||||
$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,
|
||||
@ -145,14 +155,17 @@ body {
|
||||
--text-primary-darker-color: #{$light-primary-text};
|
||||
}
|
||||
|
||||
$mat-primary: (main: #090a28,
|
||||
$mat-primary: (
|
||||
main: #090a28,
|
||||
lighter: #b5b6bf,
|
||||
darker: #050518,
|
||||
200: #090a28, // For slide toggle,
|
||||
contrast : (main: $light-primary-text,
|
||||
contrast : (
|
||||
main: $light-primary-text,
|
||||
lighter: $dark-primary-text,
|
||||
darker: $light-primary-text,
|
||||
));
|
||||
)
|
||||
);
|
||||
$theme-primary: mat-palette($mat-primary, main, lighter, darker);
|
||||
|
||||
body {
|
||||
@ -164,35 +177,40 @@ body {
|
||||
--text-accent-darker-color: #{$light-primary-text};
|
||||
}
|
||||
|
||||
$mat-accent: (main: #b70000,
|
||||
$mat-accent: (
|
||||
main: #b70000,
|
||||
lighter: #e9b3b3,
|
||||
darker: #9f0000,
|
||||
200: #b70000, // For slide toggle,
|
||||
contrast : (main: $light-primary-text,
|
||||
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};
|
||||
--warn-color: #ffc600;
|
||||
--warn-lighter-color: #ffeeb3;
|
||||
--warn-darker-color: #ffb100;
|
||||
--text-warn-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,
|
||||
lighter: #ffb3b3,
|
||||
darker: #ff0000,
|
||||
200: #ff0000, // For slide toggle,
|
||||
contrast : (main: $light-primary-text,
|
||||
$mat-warn: (
|
||||
main: #ffc600,
|
||||
lighter: #ffeeb3,
|
||||
darker: #ffb100,
|
||||
200: #ffc600, // For slide toggle,
|
||||
contrast : (
|
||||
main: $dark-primary-text,
|
||||
lighter: $dark-primary-text,
|
||||
darker: $light-primary-text,
|
||||
));
|
||||
$theme-warn: mat-palette($mat-warn, main, lighter, darker);
|
||||
;
|
||||
darker: $dark-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);
|
||||
@ -204,13 +222,10 @@ $altTheme: mat-light-theme($theme-primary, $theme-accent, $theme-warn);
|
||||
@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 {
|
||||
.mat-raised-button, .mat-stroked-button, .mat-flat-button {
|
||||
padding: 0 1.15em;
|
||||
margin: 0 .65em;
|
||||
min-width: 3em;
|
||||
@ -221,3 +236,45 @@ $altTheme: mat-light-theme($theme-primary, $theme-accent, $theme-warn);
|
||||
padding: .5em .85em;
|
||||
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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user