fix(core): Ungroup `placeholder` css rules to prevent browsers from removing all rules

When rules are grouped using the comma operator and one selector is invalid / unknown then the whole group is invalidated[1].
In this case `::-ms-input-placeholder` is unknown to Firefox and Chrome, so the `::placeholder` rule is never applied.
[1]: https://www.w3.org/TR/selectors-3/#grouping

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

1 files changed, 17 insertions, 4 deletions

diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index a6eed6b31bf..5145fc782d8 100644
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@@ -826,9 +826,22 @@ label.infield {
 	overflow: hidden;
 }
 
-::placeholder,
-::-ms-input-placeholder,
-::-webkit-input-placeholder {
+// when rules are grouped using the comma operator and one selector is invalid / unknown then the whole group is invalidated.
+// https://www.w3.org/TR/selectors-3/#grouping
+// In this case `::-ms-input-placeholder` is unknown to Firefox and Chrome
+@mixin placeholder-style {
 	color: var(--color-text-maxcontrast);
-    font-size: var(--default-font-size);
+	font-size: var(--default-font-size);
+}
+
+::placeholder {
+	@include placeholder-style;
+}
+
+::-ms-input-placeholder {
+	@include placeholder-style;
+}
+
+::-webkit-input-placeholder {
+	@include placeholder-style;
 }