Fix search placeholder animation & dark theme compatibility

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

Author: skjnldsv

apps/accessibility/css/dark.scss

@@ -5,6 +5,9 @@ $color-main-background: #181818;
 $color-background-dark: lighten($color-main-background, 4%);
 $color-background-darker: lighten($color-main-background, 8%);
 
+$color-placeholder-light: lighten($color-main-background, 10%);
+$color-placeholder-dark: lighten($color-main-background, 20%);
+
 $color-text-maxcontrast: darken($color-main-text, 30%);
 $color-text-light: darken($color-main-text, 10%);
 $color-text-lighter: darken($color-main-text, 20%);

apps/accessibility/css/highcontrast.scss

@@ -5,6 +5,9 @@ $color-main-background: #fff;
 $color-background-dark: darken($color-main-background, 30%);
 $color-background-darker: darken($color-main-background, 30%);
 
+$color-placeholder-light: darken($color-main-background, 30%);
+$color-placeholder-dark: darken($color-main-background, 45%);
+
 $color-text-maxcontrast: $color-main-text;
 $color-text-light: $color-main-text;
 $color-text-lighter: $color-main-text;

core/css/css-variables.scss

@@ -11,6 +11,9 @@
 	--color-background-dark: $color-background-dark;
 	--color-background-darker: $color-background-darker;
 
+	--color-placeholder-light: $color-placeholder-light;
+	--color-placeholder-dark: $color-placeholder-dark;
+
 	--color-primary: $color-primary;
 	--color-primary-light: $color-primary-light;
 	--color-primary-text: $color-primary-text;

core/css/icons.scss

@@ -115,7 +115,8 @@ audio, canvas, embed, iframe, img, input, object, video {
 	}
 }
 
-/* ICONS -------------------------------------------------------------------
+/**
+ * ICONS -------------------------------------------------------------------
  * These icon classes are generated automatically with the following pattern
  * for icon-black-white('close', ...)
  * .icon-close (black icon)

core/css/variables.scss

@@ -40,6 +40,9 @@ $color-background-hover: nc-darken($color-main-background, 4%) !default;
 $color-background-dark: nc-darken($color-main-background, 7%) !default;
 $color-background-darker: nc-darken($color-main-background, 14%) !default;
 
+$color-placeholder-light: nc-darken($color-main-background, 10%) !default;
+$color-placeholder-dark: nc-darken($color-main-background, 20%) !default;
+
 $color-primary: #0082c9 !default;
 $color-primary-light: mix($color-primary, $color-main-background, 10%) !default;
 $color-primary-text: #ffffff !default;