3 files changed, 17 insertions, 20 deletions

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index fd0d5e458..b96cf07c0 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -1,9 +1,9 @@
-@import '_variables';
-@import '_mixins';
-
 $icon-font-path: '../../node_modules/@neos21/bootstrap3-glyphicons/assets/fonts/';
 @import '_bootstrap';
 
+@import '_variables';
+@import '_mixins';
+
 @import '_fonts';
 
 @import '~video.js/dist/video-js.css';
@@ -19,6 +19,17 @@ $assets-path: '../assets/';
 }
 
 body {
+  /*** theme ***/
+  // now beware node-sass requires interpolation
+  // for css custom properties #{$var}
+  --mainColor: #{$orange-color};
+  --mainHoverColor: #{$orange-hoover-color};
+  --mainBackgroundColor: #{$bg-color};
+  --mainForegroundColor: #{$fg-color};
+  --submenuColor: #{$sub-menu-color};
+  --inputColor: #{$input-color};
+  --inputPlaceholderColor: #{$input-placeholder-color};
+
   font-family: $main-fonts;
   font-weight: $font-regular;
   color: var(--mainForegroundColor);
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 6e2feb748..03cb337c2 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -297,8 +297,8 @@
       height: 12px;
       opacity: 0;
       transform: rotate(45deg) scale(0);
-      border-right: 2px solid var(--mainForegroundColor);
-      border-bottom: 2px solid var(--mainForegroundColor);
+      border-right: 2px solid var(--mainBackgroundColor);
+      border-bottom: 2px solid var(--mainBackgroundColor);
     }
   }
 
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index fb253fc1f..0735a00a0 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -46,23 +46,9 @@ $video-thumbnail-width: 200px;
 
 $theater-bottom-space: 85px;
 
-$input-color: $bg-color;
+$input-color: inherit;
 $input-placeholder-color: #898989;
 
-/*** theme ***/
-
-body {
-  // now beware node-sass requires interpolation
-  // for css custom properties #{$var}
-  --mainColor: #{$orange-color};
-  --mainHoverColor: #{$orange-hoover-color};
-  --mainBackgroundColor: #{$bg-color};
-  --mainForegroundColor: #{$fg-color};
-  --submenuColor: #{$sub-menu-color};
-  --inputColor: #{$input-color};
-  --inputPlaceholderColor: #{$input-placeholder-color};
-}
-
 /*** map theme ***/
 
 // pass variables into a sass map,