Further reduce differences with upstream (mainly private mention styling) (#2641)

* Use upstream's CSS for private mentions styling

* Further reduce differences with upstream

app/javascript/flavours/glitch/styles/components.scss

@@ -774,6 +774,28 @@ body > [data-popper-placement] {
     opacity 0.4s ease;
 }
 
+.compose-form__textarea-icons {
+  display: block;
+  position: absolute;
+  top: 29px;
+  inset-inline-end: 5px;
+  bottom: 5px;
+  overflow: hidden;
+
+  & > .textarea_icon {
+    display: block;
+    margin-top: 2px;
+    margin-inline-start: 2px;
+    width: 24px;
+    height: 24px;
+    color: $lighter-text-color;
+    font-size: 18px;
+    line-height: 24px;
+    text-align: center;
+    opacity: 0.8;
+  }
+}
+
 .sign-in-banner {
   padding: 10px;
 
@@ -933,10 +955,6 @@ body > [data-popper-placement] {
       outline: 0 !important;
     }
   }
-}
-
-.status__content {
-  overflow: visible;
 
   .status__content__spoiler {
     display: none;
@@ -947,6 +965,11 @@ body > [data-popper-placement] {
   }
 }
 
+.status__content {
+  // glitch: necessary for fullwidth media options
+  overflow: visible;
+}
+
 .announcements__item__content {
   word-wrap: break-word;
   overflow-y: auto;
@@ -990,6 +1013,30 @@ body > [data-popper-placement] {
   }
 }
 
+.status__content__read-more-button,
+.status__content__translate-button {
+  display: flex;
+  align-items: center;
+  font-size: 15px;
+  line-height: 22px;
+  color: $highlight-text-color;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  padding-top: 16px;
+  text-decoration: none;
+
+  &:hover,
+  &:active {
+    text-decoration: underline;
+  }
+
+  .icon {
+    width: 15px;
+    height: 15px;
+  }
+}
+
 .translate-button {
   margin-top: 16px;
   font-size: 15px;
@@ -1002,7 +1049,7 @@ body > [data-popper-placement] {
 .status__content__spoiler-link {
   display: inline-flex;
   border-radius: 2px;
-  background: lighten($ui-base-color, 30%);
+  background: transparent;
   border: 0;
   color: $inverted-text-color;
   font-weight: 700;
@@ -1064,14 +1111,6 @@ body > [data-popper-placement] {
     outline: 0;
     background: lighten($ui-base-color, 4%);
 
-    &.status.status-direct {
-      background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%);
-
-      &.muted {
-        background: transparent;
-      }
-    }
-
     .detailed-status,
     .detailed-status__action-bar {
       background: lighten($ui-base-color, 8%);
@@ -1105,11 +1144,6 @@ body > [data-popper-placement] {
     margin-top: 8px; // glitch: reduced margins
   }
 
-  &.status-direct {
-    background: mix($ui-base-color, $ui-highlight-color, 95%);
-    border-bottom-color: lighten($ui-base-color, 12%);
-  }
-
   &.light {
     .status__relative-time,
     .status__visibility-icon {
@@ -1157,6 +1191,10 @@ body > [data-popper-placement] {
       margin-inline-start: $thread-margin;
       width: calc(100% - ($thread-margin));
     }
+
+    .status__content__read-more-button {
+      margin-inline-start: $thread-margin;
+    }
   }
 
   &--first-in-thread {
@@ -1256,6 +1294,7 @@ body > [data-popper-placement] {
       );
     }
 
+    // TODO: review
     &.status-direct > .status__content::after {
       background: linear-gradient(
         rgba(mix($ui-base-color, $ui-highlight-color, 95%), 0),
@@ -1372,6 +1411,50 @@ body > [data-popper-placement] {
   }
 }
 
+@keyframes spring-flip-in {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  30% {
+    transform: rotate(-242.4deg);
+  }
+
+  60% {
+    transform: rotate(-158.35deg);
+  }
+
+  90% {
+    transform: rotate(-187.5deg);
+  }
+
+  100% {
+    transform: rotate(-180deg);
+  }
+}
+
+@keyframes spring-flip-out {
+  0% {
+    transform: rotate(-180deg);
+  }
+
+  30% {
+    transform: rotate(62.4deg);
+  }
+
+  60% {
+    transform: rotate(-21.635deg);
+  }
+
+  90% {
+    transform: rotate(7.5deg);
+  }
+
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
 .status-check-box__status {
   display: block;
   box-sizing: border-box;
@@ -1428,6 +1511,18 @@ body > [data-popper-placement] {
   }
 }
 
+.status__wrapper-direct {
+  background: mix($ui-base-color, $ui-highlight-color, 95%);
+
+  &:focus {
+    background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%);
+  }
+
+  .status__prepend {
+    color: $highlight-text-color;
+  }
+}
+
 .status__action-bar {
   display: flex;
   align-items: center;
@@ -1473,6 +1568,11 @@ body > [data-popper-placement] {
       height: 24px;
       margin: -1px 0 0;
     }
+
+    .status__content__spoiler-link {
+      line-height: 24px;
+      margin: -1px 0 0;
+    }
   }
 
   .media-gallery,
@@ -1508,25 +1608,29 @@ body > [data-popper-placement] {
   padding: 8px 0; // glitch: reduced padding
 }
 
-.compose-form__textarea-icons {
+.detailed-status__wrapper-direct {
-  display: block;
+  .detailed-status,
-  position: absolute;
+  .detailed-status__action-bar {
-  top: 29px;
+    background: mix($ui-base-color, $ui-highlight-color, 95%);
-  inset-inline-end: 5px;
+  }
-  bottom: 5px;
-  overflow: hidden;
 
-  & > .textarea_icon {
+  &:focus {
-    display: block;
+    .detailed-status,
-    margin-top: 2px;
+    .detailed-status__action-bar {
-    margin-inline-start: 2px;
+      background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%);
-    width: 24px;
+    }
-    height: 24px;
+  }
-    color: $lighter-text-color;
+
-    font-size: 18px;
+  .detailed-status__action-bar {
-    line-height: 24px;
+    border-top-color: mix(
-    text-align: center;
+      lighten($ui-base-color, 8%),
-    opacity: 0.8;
+      $ui-highlight-color,
+      95%
+    );
+  }
+
+  .status__prepend {
+    color: $highlight-text-color;
   }
 }
 
@@ -4659,10 +4763,10 @@ a.status-card {
   margin-bottom: 4px;
   display: block;
   background-color: rgba($black, 0.45);
-  text-transform: uppercase;
   font-size: 11px;
-  font-weight: 500;
+  text-transform: uppercase;
-  padding: 4px;
+  font-weight: 700;
+  padding: 2px 6px;
   border-radius: 4px;
   opacity: 0.7;
 
@@ -5217,50 +5321,6 @@ a.status-card {
   }
 }
 
-@keyframes spring-flip-in {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  30% {
-    transform: rotate(-242.4deg);
-  }
-
-  60% {
-    transform: rotate(-158.35deg);
-  }
-
-  90% {
-    transform: rotate(-187.5deg);
-  }
-
-  100% {
-    transform: rotate(-180deg);
-  }
-}
-
-@keyframes spring-flip-out {
-  0% {
-    transform: rotate(-180deg);
-  }
-
-  30% {
-    transform: rotate(62.4deg);
-  }
-
-  60% {
-    transform: rotate(-21.635deg);
-  }
-
-  90% {
-    transform: rotate(7.5deg);
-  }
-
-  100% {
-    transform: rotate(0deg);
-  }
-}
-
 .notif-cleaning {
   .status,
   .notification {
@@ -5268,18 +5328,6 @@ a.status-card {
   }
 }
 
-.notification-follow,
-.notification-follow-request {
-  position: relative;
-
-  // same like Status
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
-
-  .account {
-    border-bottom: 0 none;
-  }
-}
-
 .language-dropdown {
   &__dropdown {
     background: $simple-background-color;
@@ -8614,6 +8662,7 @@ noscript {
   inset-inline-end: 20px;
   width: 300px;
 
+  // glitch: feature to chose which side the pop-in player is displayed
   &.left {
     inset-inline-end: unset;
     inset-inline-start: 20px;