From f989be36adf47029c5971fb9f011fc0523d57cfd Mon Sep 17 00:00:00 2001 From: GabrielMeyer Date: Fri, 22 Feb 2019 09:05:53 +0100 Subject: [PATCH] Changes the primary palette for dark theme - Added a custom palette (`#c31c23`) - Set the new primary palette for dark theme Changes some styles depending on theme - Removed hard-coded colors - Set color depending on theme Prettified --- .../projection-dialog.component.html | 4 +- .../projector-button.component.scss | 30 ++++++------- .../config-field/config-field.component.html | 4 +- .../config-field/config-field.component.scss | 12 ------ .../group-list/group-list.component.scss | 1 - .../styles/global-components-style.scss | 14 +++++++ .../assets/styles/openslides-dark-theme.scss | 42 +++++++++++++++++-- client/src/styles.scss | 6 +-- 8 files changed, 75 insertions(+), 38 deletions(-) diff --git a/client/src/app/shared/components/projection-dialog/projection-dialog.component.html b/client/src/app/shared/components/projection-dialog/projection-dialog.component.html index 5c68acc25..c2584c7e6 100644 --- a/client/src/app/shared/components/projection-dialog/projection-dialog.component.html +++ b/client/src/app/shared/components/projection-dialog/projection-dialog.component.html @@ -8,7 +8,9 @@ {{ projector.name | translate }} - videocam + + videocam + diff --git a/client/src/app/shared/components/projector-button/projector-button.component.scss b/client/src/app/shared/components/projector-button/projector-button.component.scss index 8cb69302f..545fa07d5 100644 --- a/client/src/app/shared/components/projector-button/projector-button.component.scss +++ b/client/src/app/shared/components/projector-button/projector-button.component.scss @@ -1,18 +1,18 @@ -.projector-inactive { - background-color: white !important; +@import '~@angular/material/theming'; - mat-icon { - color: grey !important; +@mixin os-projector-button-style($theme) { + $primary: map-get($theme, primary); + $accent: map-get($theme, accent); + $warn: map-get($theme, warn); + $contrast: map-get($primary, contrast); + + .mat-mini-fab.projector-inactive { + color: mat-color($contrast, A200) !important; + background-color: mat-color($contrast, 500) !important; + } + + .mat-menu-item.projector-active, + .projector-active > .mat-icon { + color: mat-color($primary) !important; } } - -/** TODO: Take this from the accent color. Make the hovering visible */ - -.projector-active { - background-color: #03a9f4; - color: white !important; -} - -button.mat-menu-item.projector-active:hover { - background-color: #03a9f4; -} diff --git a/client/src/app/site/config/components/config-field/config-field.component.html b/client/src/app/site/config/components/config-field/config-field.component.html index 8f0c3af1a..0dd509d2d 100644 --- a/client/src/app/site/config/components/config-field/config-field.component.html +++ b/client/src/app/site/config/components/config-field/config-field.component.html @@ -44,7 +44,7 @@
{{ configItem.label | translate }} -
{{ configItem.helpText | translate }}
+ {{ configItem.helpText | translate }}
{{ error }}
@@ -52,7 +52,7 @@
-
{{ configItem.helpText | translate }}
+ {{ configItem.helpText | translate }}
diff --git a/client/src/app/site/config/components/config-field/config-field.component.scss b/client/src/app/site/config/components/config-field/config-field.component.scss index 0552f594b..b7475bb00 100644 --- a/client/src/app/site/config/components/config-field/config-field.component.scss +++ b/client/src/app/site/config/components/config-field/config-field.component.scss @@ -13,18 +13,6 @@ input[type='color'] { margin-bottom: 15px; } -/* Custom hint and error classes for the checkbox. Same values as .mat-hint and -mat-error */ -.hint, -.error { - font-size: 75%; -} -.hint { - color: rgba(0, 0, 0, 0.54); -} -.error { - color: #f44336; -} - .config-field-wrapper { width: 100%; display: flex; diff --git a/client/src/app/site/users/components/group-list/group-list.component.scss b/client/src/app/site/users/components/group-list/group-list.component.scss index e42a0e912..041ccca6f 100644 --- a/client/src/app/site/users/components/group-list/group-list.component.scss +++ b/client/src/app/site/users/components/group-list/group-list.component.scss @@ -22,7 +22,6 @@ table { .hint-text { padding-top: 30px; padding-left: 25px; - background-color: #ffffff; // put in theme later } .new-group-form { diff --git a/client/src/assets/styles/global-components-style.scss b/client/src/assets/styles/global-components-style.scss index dd0245fa3..de74c45aa 100644 --- a/client/src/assets/styles/global-components-style.scss +++ b/client/src/assets/styles/global-components-style.scss @@ -27,8 +27,22 @@ color: mat-color($primary); } + .projected .mat-icon { + color: mat-color($primary); + } + //custom table header for search button, filtering and more. Used in ListViews .custom-table-header { background: mat-color($background, background); } + + /* Custom hint and error classes. Same values as .mat-hint and -mat-error */ + .hint, + .error { + font-size: 75%; + display: block; + } + .error { + color: mat-color($warn); + } } diff --git a/client/src/assets/styles/openslides-dark-theme.scss b/client/src/assets/styles/openslides-dark-theme.scss index 2cdf28e8e..18f1d40a3 100644 --- a/client/src/assets/styles/openslides-dark-theme.scss +++ b/client/src/assets/styles/openslides-dark-theme.scss @@ -1,6 +1,42 @@ -$openslides-primary: mat-palette($mat-light-blue, 500, 100, 700); -$openslides-accent: mat-palette($mat-orange, 700, 300, 900); -$openslides-warn: mat-palette($mat-red, 600, 500, 700); +// Defines the primary palette using the dark theme +$openslides-primary-red: ( + 50 : #f8e4e5, + 100 : #edbbbd, + 200 : #e18e91, + 300 : #d56065, + 400 : #cc3e44, + 500 : #c31c23, + 600 : #bd191f, + 700 : #b5141a, + 800 : #ae1115, + 900 : #a1090c, + A100 : #ffcece, + A200 : #ff9b9b, + A400 : #ff6869, + A700 : #ff4e50, + contrast: ( + 50 : #000000, + 100 : #000000, + 200 : #000000, + 300 : #000000, + 400 : #ffffff, + 500 : #ffffff, + 600 : #ffffff, + 700 : #ffffff, + 800 : #ffffff, + 900 : #ffffff, + A100: #404040, + A200 : #303030, + A400 : #262626, + A700 : #1a1a1a + ) +); + +// TODO: /projectors/detail/* + +$openslides-primary: mat-palette($openslides-primary-red, 500, 300, 900); +$openslides-accent: mat-palette($openslides-primary-red, 500, 300, 900); +$openslides-warn: mat-palette($mat-orange, 700, 300, 900); $openslides-dark-theme: mat-dark-theme( $openslides-primary, diff --git a/client/src/styles.scss b/client/src/styles.scss index 3d700b587..83377b9c8 100644 --- a/client/src/styles.scss +++ b/client/src/styles.scss @@ -10,6 +10,7 @@ /** Import the component-related stylesheets here */ @import './app/site/site.component.scss-theme.scss'; @import './assets/styles/global-components-style.scss'; +@import './app/shared/components/projector-button/projector-button.component.scss'; /** fonts */ @import './assets/styles/fonts.scss'; @@ -19,6 +20,7 @@ @mixin openslides-components-theme($theme) { @include os-site-theme($theme); @include os-components-style($theme); + @include os-projector-button-style($theme); /** More components are added here */ } @@ -505,10 +507,6 @@ button.mat-menu-item.selected { color: rgba(0, 0, 0, 0.87) !important; } -.projected { - background-color: lightblue; -} - /* TODO: move to site.component.scss-theme.scss (does not work currently) */ /* make the .user-menu expansion panel look like the nav-toolbar above */