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 */