[Glitch] Fix placeholder colors for inputs not being explicitly defined

Port b6df9c10671cd7bf48de3dbd7a94a92fb0a148ec to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>

diff --git a/app/javascript/flavours/glitch/styles/_mixins.scss b/app/javascript/flavours/glitch/styles/_mixins.scss
index d542b1083cbabf3dee296203c372a789298191da..088b41e76a18fc9cda4ae76bfebbea7be26a10c5 100644 (file)
--- a/app/javascript/flavours/glitch/styles/_mixins.scss
+++ b/app/javascript/flavours/glitch/styles/_mixins.scss
@@ -62,24 +62,6 @@
   color: $darker-text-color;
   font-size: 14px;
   margin: 0;
-
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  &::-moz-focus-inner,
-  &:focus,
-  &:active {
-    outline: 0 !important;
-  }
-
-  &:focus {
-    background: lighten($ui-base-color, 4%);
-  }
-
-  @media screen and (max-width: 600px) {
-    font-size: 16px;
-  }
 }
 
 @mixin search-popout() {

diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss
index dc49e083c5f61d21b0d2bd3b98614c63c097d974..b5a07239fdb12831950a665f2fa8109d60902263 100644 (file)
--- a/app/javascript/flavours/glitch/styles/components/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/components/accounts.scss
@@ -245,6 +245,28 @@
   .column-select {
     &__control {
       @include search-input();
+
+      &::placeholder {
+        color: lighten($darker-text-color, 4%);
+      }
+
+      &::-moz-focus-inner {
+        border: 0;
+      }
+
+      &::-moz-focus-inner,
+      &:focus,
+      &:active {
+        outline: 0 !important;
+      }
+
+      &:focus {
+        background: lighten($ui-base-color, 4%);
+      }
+
+      @media screen and (max-width: 600px) {
+        font-size: 16px;
+      }
     }
 
     &__placeholder {

diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/composer.scss
index 656615f4f22fef1e67ea67f1a6f7ef164dec8c90..43697491993db552280094cbb596421a65c6414a 100644 (file)
--- a/app/javascript/flavours/glitch/styles/components/composer.scss
+++ b/app/javascript/flavours/glitch/styles/components/composer.scss
@@ -44,6 +44,10 @@
     font-family: inherit;
     resize: vertical;
 
+    &::placeholder {
+      color: $dark-text-color;
+    }
+
     &:focus { outline: 0 }
     @include single-column('screen and (max-width: 630px)') { font-size: 16px }
   }
@@ -263,6 +267,10 @@
       resize: none;
       scrollbar-color: initial;
 
+      &::placeholder {
+        color: $dark-text-color;
+      }
+
       &::-webkit-scrollbar {
         all: unset;
       }

diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss
index c3ea47eb03439174115b6d13d8b85ed10abe2385..30d69d05cc1a4c6a6df5f7e59fbff9515ce01676 100644 (file)
--- a/app/javascript/flavours/glitch/styles/components/search.scss
+++ b/app/javascript/flavours/glitch/styles/components/search.scss
@@ -10,6 +10,28 @@
   padding-right: 30px;
   line-height: 18px;
   font-size: 16px;
+
+  &::placeholder {
+    color: lighten($darker-text-color, 4%);
+  }
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  &::-moz-focus-inner,
+  &:focus,
+  &:active {
+    outline: 0 !important;
+  }
+
+  &:focus {
+    background: lighten($ui-base-color, 4%);
+  }
+
+  @media screen and (max-width: 600px) {
+    font-size: 16px;
+  }
 }
 
 .search__icon {

diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss
index c93464cede7e58ba0e4884ea8c44e584d376a4ec..747c5309d7dbd356e475e562ebea8ec90c21a322 100644 (file)
--- a/app/javascript/flavours/glitch/styles/forms.scss
+++ b/app/javascript/flavours/glitch/styles/forms.scss
@@ -329,6 +329,10 @@ code {
     border-radius: 4px;
     padding: 10px;
 
+    &::placeholder {
+      color: lighten($darker-text-color, 4%);
+    }
+
     &:invalid {
       box-shadow: none;
     }