css: Explicitly set placeholder text style.

Previously, we relied on the browser placeholder text style, but this
makes it impossible to style text to look like a placeholder.

Chrome uses `color` to set the placeholder, while Firefox uses
`opacity`. This commit sets both, since setting one without the other
will lead to strange behaviour.

We pick the color for the light and day themes to ensure that we meet
WCAG standards for accessibility.

static/styles/app_components.css

@@ -48,6 +48,26 @@
     visibility: hidden;
 }
 
+/*
+Consistent placeholder styling, introduced to allow us to style the
+Reply box like a placeholder.  Chrome uses color to set placeholder,
+while Firefox uses opacity, so we need to set both properties to avoid
+mixed styling.
+
+While we usually prefer opacity for text color in Zulip, there's some
+evidence Edge may have bugs in its handling of placeholder opacity
+CSS: https://github.com/necolas/normalize.css/issues/741
+*/
+.placeholder {
+    color: hsl(0, 0%, 45%);
+    opacity: 1;
+}
+
+textarea::placeholder,
+input::placeholder {
+    @extend .placeholder;
+}
+
 .new-style {
     /* -- base button styling -- */
     .button {

static/styles/night_mode.css

@@ -2,6 +2,16 @@ body.night-mode {
     background-color: hsl(212, 28%, 18%);
     color: hsl(236, 33%, 90%);
 
+    .placeholder {
+        color: hsl(0, 0%, 55%);
+        opacity: 1;
+    }
+
+    textarea::placeholder,
+    input::placeholder {
+        @extend .placeholder;
+    }
+
     a:hover {
         color: hsl(200, 79%, 66%);
     }