Merge pull request #1721 from ClearlyClaire/glitch-soc/merge-upstream

Merge upstream changes

5 files changed, 33 insertions, 59 deletions

diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss
index 40cd899b3..27be22f1b 100644
--- a/app/javascript/flavours/glitch/styles/admin.scss
+++ b/app/javascript/flavours/glitch/styles/admin.scss
@@ -1322,7 +1322,7 @@ a.sparkline {
       width: 50px;
       height: 21px;
       position: absolute;
-      bottom: 8px;
+      bottom: 0;
       right: 15px;
       background: linear-gradient(to left, $ui-base-color, transparent);
       pointer-events: none;
diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/composer.scss
index 937751d00..96ea096e1 100644
--- a/app/javascript/flavours/glitch/styles/components/composer.scss
+++ b/app/javascript/flavours/glitch/styles/components/composer.scss
@@ -425,54 +425,12 @@
     background-repeat: no-repeat;
     overflow: hidden;
 
-    textarea {
-      display: block;
-      position: absolute;
-      box-sizing: border-box;
-      bottom: 0;
-      left: 0;
-      margin: 0;
-      border: 0;
-      padding: 10px;
-      width: 100%;
-      color: $secondary-text-color;
-      background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
-      font-size: 14px;
-      font-family: inherit;
-      font-weight: 500;
-      opacity: 0;
-      z-index: 2;
-      transition: opacity .1s ease;
-
-      &:focus { color: $white }
-
-      &::placeholder {
-        opacity: 0.54;
-        color: $secondary-text-color;
-      }
-    }
-
     & > .close { mix-blend-mode: difference }
   }
 
-  &.active {
-    & > div {
-      textarea { opacity: 1 }
-    }
-  }
-}
-
-.composer--upload_form--actions {
-  background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  opacity: 0;
-  transition: opacity .1s ease;
-
   .icon-button {
     flex: 0 1 auto;
-    color: $ui-secondary-color;
+    color: $secondary-text-color;
     font-size: 14px;
     font-weight: 500;
     padding: 10px;
@@ -481,15 +439,28 @@
     &:hover,
     &:focus,
     &:active {
-      color: lighten($ui-secondary-color, 4%);
+      color: lighten($secondary-text-color, 7%);
     }
   }
 
-  &.active {
-    opacity: 1;
+  &__warning {
+    position: absolute;
+    z-index: 2;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    box-sizing: border-box;
+    background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
   }
 }
 
+.composer--upload_form--actions {
+  background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
 .composer--upload_form--progress {
   display: flex;
   padding: 10px;
diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss
index 7e6918356..61c292b19 100644
--- a/app/javascript/flavours/glitch/styles/components/modal.scss
+++ b/app/javascript/flavours/glitch/styles/components/modal.scss
@@ -609,6 +609,15 @@
     color: $inverted-text-color;
   }
 
+  .status__content__spoiler-link {
+    color: $primary-text-color;
+    background: $ui-primary-color;
+
+    &:hover {
+      background: lighten($ui-primary-color, 8%);
+    }
+  }
+
   .dialog-option .poll__input {
     border-color: $inverted-text-color;
     color: $ui-secondary-color;
diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
index ad6c24ea6..0d7dfd64d 100644
--- a/app/javascript/flavours/glitch/styles/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/components/status.scss
@@ -198,7 +198,8 @@
   .status__content__spoiler-link {
     background: lighten($ui-base-color, 30%);
 
-    &:hover {
+    &:hover,
+    &:focus {
       background: lighten($ui-base-color, 33%);
       text-decoration: none;
     }
@@ -222,13 +223,13 @@
   background: lighten($ui-base-color, 30%);
   border: 0;
   color: $inverted-text-color;
-  font-weight: 500;
+  font-weight: 700;
   font-size: 11px;
   padding: 0 5px;
   text-transform: uppercase;
   line-height: inherit;
   cursor: pointer;
-  vertical-align: bottom;
+  vertical-align: top;
 
   &:hover {
     background: lighten($ui-base-color, 33%);
@@ -760,7 +761,8 @@ a.status__display-name,
     background: $ui-base-lighter-color;
     color: $inverted-text-color;
 
-    &:hover {
+    &:hover,
+    &:focus {
       background: lighten($ui-base-color, 29%);
       text-decoration: none;
     }
diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
index 020d39aff..bb91abdac 100644
--- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
@@ -165,14 +165,6 @@
   }
 }
 
-.composer--upload_form--item > div input {
-  color: lighten($white, 7%);
-
-  &::placeholder {
-    color: lighten($white, 10%);
-  }
-}
-
 .dropdown-menu__separator,
 .dropdown-menu__item.edited-timestamp__history__item,
 .dropdown-menu__container__header,