Further reduce differences with upstream

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

@@ -931,6 +931,255 @@ body > [data-popper-placement] {
   }
 }
 
+.translate-button {
+  margin-top: 16px;
+  font-size: 15px;
+  line-height: 20px;
+  display: flex;
+  justify-content: space-between;
+  color: $dark-text-color;
+}
+
+.status__content__spoiler-link {
+  display: inline-flex;
+  border-radius: 2px;
+  background: lighten($ui-base-color, 30%);
+  border: 0;
+  color: $inverted-text-color;
+  font-weight: 700;
+  font-size: 11px;
+  padding: 0 5px;
+  text-transform: uppercase;
+  line-height: inherit;
+  cursor: pointer;
+  vertical-align: top;
+  align-items: center;
+
+  &:hover {
+    background: lighten($ui-base-color, 33%);
+    text-decoration: none;
+  }
+
+  .status__content__spoiler-icon {
+    display: inline-block;
+    margin-inline-start: 5px;
+    border-inline-start: 1px solid currentColor;
+    padding: 0;
+    padding-inline-start: 4px;
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.status__wrapper--filtered {
+  color: $dark-text-color;
+  border: 0;
+  font-size: inherit;
+  text-align: center;
+  line-height: inherit;
+  margin: 0;
+  padding: 15px;
+  box-sizing: border-box;
+  width: 100%;
+  clear: both;
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
+
+  &__button {
+    display: inline;
+    color: lighten($ui-highlight-color, 8%);
+    border: 0;
+    background: transparent;
+    padding: 0;
+    font-size: inherit;
+    line-height: inherit;
+
+    &:hover,
+    &:active {
+      text-decoration: underline;
+    }
+  }
+}
+
+.focusable {
+  &:focus {
+    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%);
+    }
+  }
+}
+
+.status {
+  padding: 10px 14px;
+  position: relative;
+  height: auto;
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  cursor: auto;
+
+  @supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
+    // Add margin to avoid Edge auto-hiding scrollbar appearing over content.
+    // On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px.
+    padding-inline-end: 28px; // 12px + 16px
+  }
+
+  @keyframes fade {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  opacity: 1;
+  animation: fade 150ms linear;
+
+  .video-player,
+  .audio-player {
+    margin-top: 8px;
+  }
+
+  &.status-direct {
+    background: mix($ui-base-color, $ui-highlight-color, 95%);
+    border-bottom-color: lighten($ui-base-color, 12%);
+  }
+
+  &.light {
+    .status__relative-time {
+      color: $lighter-text-color;
+    }
+
+    .status__display-name {
+      color: $inverted-text-color;
+    }
+
+    .display-name {
+      color: $light-text-color;
+
+      strong {
+        color: $inverted-text-color;
+      }
+    }
+
+    .status__content {
+      color: $inverted-text-color;
+
+      a {
+        color: $highlight-text-color;
+      }
+
+      a.status__content__spoiler-link {
+        color: $primary-text-color;
+        background: $ui-primary-color;
+
+        &:hover {
+          background: lighten($ui-primary-color, 8%);
+        }
+      }
+    }
+  }
+
+  &.collapsed {
+    background-position: center;
+    background-size: cover;
+    user-select: none;
+
+    &.has-background::before {
+      display: block;
+      position: absolute;
+      inset-inline-start: 0;
+      inset-inline-end: 0;
+      top: 0;
+      bottom: 0;
+      background-image: linear-gradient(
+        to bottom,
+        rgba($base-shadow-color, 0.75),
+        rgba($base-shadow-color, 0.65) 24px,
+        rgba($base-shadow-color, 0.8)
+      );
+      pointer-events: none;
+      content: '';
+    }
+
+    .display-name:hover .display-name__html {
+      text-decoration: none;
+    }
+
+    .status__content {
+      height: 20px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding-top: 0;
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
+        background: linear-gradient(
+          rgba($ui-base-color, 0),
+          rgba($ui-base-color, 1)
+        );
+        pointer-events: none;
+      }
+
+      a:hover {
+        text-decoration: none;
+      }
+    }
+
+    &:focus > .status__content::after {
+      background: linear-gradient(
+        rgba(lighten($ui-base-color, 4%), 0),
+        rgba(lighten($ui-base-color, 4%), 1)
+      );
+    }
+
+    &.status-direct > .status__content::after {
+      background: linear-gradient(
+        rgba(mix($ui-base-color, $ui-highlight-color, 95%), 0),
+        rgba(mix($ui-base-color, $ui-highlight-color, 95%), 1)
+      );
+    }
+
+    .notification__message {
+      margin-bottom: 0;
+    }
+
+    .status__info .notification__message > span {
+      white-space: nowrap;
+    }
+  }
+
+  .notification__message {
+    margin: -10px 0 10px;
+  }
+}
+
+.status__relative-time {
+  display: inline-block;
+  color: $dark-text-color;
+  font-size: 14px;
+  text-align: end;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .compose-form__textarea-icons {
   display: block;
   position: absolute;
@@ -1966,74 +2215,6 @@ $ui-header-height: 55px;
     padding: 10px 0;
     padding-top: 0;
   }
-
-  .detailed-status {
-    padding: 15px;
-
-    .media-gallery,
-    .video-player,
-    .audio-player {
-      margin-top: 15px;
-    }
-  }
-
-  .account__header__bar {
-    padding: 5px 10px;
-  }
-
-  .navigation-bar,
-  .compose-form {
-    padding: 15px;
-  }
-
-  .compose-form .compose-form__publish .compose-form__publish-button-wrapper {
-    padding-top: 15px;
-  }
-
-  .notification__report {
-    padding: 15px;
-    padding-inline-start: (48px + 15px * 2);
-    min-height: 48px + 2px;
-
-    &__avatar {
-      inset-inline-start: 15px;
-      top: 17px;
-    }
-  }
-
-  .status {
-    padding: 15px;
-    min-height: 48px + 2px;
-
-    .media-gallery,
-    &__action-bar,
-    .video-player,
-    .audio-player {
-      margin-top: 10px;
-    }
-  }
-
-  .account {
-    padding: 15px 10px;
-
-    &__header__bio {
-      margin: 0 -10px;
-    }
-  }
-
-  .notification {
-    &__message {
-      padding-top: 15px;
-    }
-
-    .status {
-      padding-top: 8px;
-    }
-
-    .account {
-      padding-top: 8px;
-    }
-  }
 }
 
 @media screen and (min-width: $no-gap-breakpoint) {
@@ -4761,400 +4942,161 @@ a.status-card.compact:hover {
   &__icon-wrapper {
     inset-inline-start: -26px;
     position: absolute;
-  }
+  }
-
-  .detailed-status__display-avatar {
-    position: relative;
-  }
-
-  .detailed-status__display-name {
-    margin-bottom: 0;
-  }
-}
-
-@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__content {
-  position: relative;
-  margin: 10px 0;
-  font-size: 15px;
-  line-height: 20px;
-  word-wrap: break-word;
-  font-weight: 400;
-  overflow: visible;
-  padding-top: 5px;
-
-  &:focus {
-    outline: 0;
-  }
-
-  .emojione {
-    width: 20px;
-    height: 20px;
-    margin: -3px 0 0;
-  }
-
-  p,
-  pre {
-    margin-bottom: 20px;
-    white-space: pre-wrap;
-    unicode-bidi: plaintext;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  a {
-    color: $secondary-text-color;
-    text-decoration: none;
-    unicode-bidi: isolate;
-
-    &:hover {
-      text-decoration: underline;
-    }
-
-    &.mention {
-      &:hover {
-        text-decoration: none;
-
-        span {
-          text-decoration: underline;
-        }
-      }
-    }
-  }
-
-  .status__content__spoiler {
-    display: none;
-
-    &.status__content__spoiler--visible {
-      display: block;
-    }
-  }
-
-  a.unhandled-link {
-    color: $highlight-text-color;
-
-    .link-origin-tag {
-      color: $gold-star;
-      font-size: 0.8em;
-    }
-  }
-
-  .status__content__spoiler-link {
-    background: lighten($ui-base-color, 30%);
-
-    &:hover,
-    &:focus {
-      background: lighten($ui-base-color, 33%);
-      text-decoration: none;
-    }
-  }
-}
-
-.translate-button {
-  margin-top: 16px;
-  font-size: 15px;
-  line-height: 20px;
-  display: flex;
-  justify-content: space-between;
-  color: $dark-text-color;
-}
-
-.status__content__spoiler-link {
-  display: inline-flex;
-  border-radius: 2px;
-  background: lighten($ui-base-color, 30%);
-  border: 0;
-  color: $inverted-text-color;
-  font-weight: 700;
-  font-size: 11px;
-  padding: 0 5px;
-  text-transform: uppercase;
-  line-height: inherit;
-  cursor: pointer;
-  vertical-align: top;
-  align-items: center;
-
-  &:hover {
-    background: lighten($ui-base-color, 33%);
-    text-decoration: none;
-  }
-
-  .status__content__spoiler-icon {
-    display: inline-block;
-    margin-inline-start: 5px;
-    border-inline-start: 1px solid currentColor;
-    padding: 0;
-    padding-inline-start: 4px;
-    width: 16px;
-    height: 16px;
-  }
-}
-
-.notif-cleaning {
-  .status,
-  .notification {
-    padding-inline-end: ($dismiss-overlay-width + 0.5rem);
-  }
-}
-
-.status__wrapper--filtered {
-  color: $dark-text-color;
-  border: 0;
-  font-size: inherit;
-  text-align: center;
-  line-height: inherit;
-  margin: 0;
-  padding: 15px;
-  box-sizing: border-box;
-  width: 100%;
-  clear: both;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
-
-  &__button {
-    display: inline;
-    color: lighten($ui-highlight-color, 8%);
-    border: 0;
-    background: transparent;
-    padding: 0;
-    font-size: inherit;
-    line-height: inherit;
-
-    &:hover,
-    &:active {
-      text-decoration: underline;
-    }
-  }
-}
-
-.status__prepend-icon-wrapper {
-  inset-inline-start: -26px;
-  position: absolute;
-}
-
-.notification-follow,
-.notification-follow-request {
-  position: relative;
 
-  // same like Status
+  .detailed-status__display-avatar {
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+    position: relative;
+  }
 
-  .account {
+  .detailed-status__display-name {
-    border-bottom: 0 none;
+    margin-bottom: 0;
   }
 }
 
-.focusable {
+@keyframes spring-flip-in {
-  &:focus {
+  0% {
-    outline: 0;
+    transform: rotate(0deg);
-    background: lighten($ui-base-color, 4%);
+  }
 
-    &.status.status-direct {
+  30% {
-      background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%);
+    transform: rotate(-242.4deg);
+  }
 
-      &.muted {
+  60% {
-        background: transparent;
+    transform: rotate(-158.35deg);
-      }
+  }
-    }
 
-    .detailed-status,
+  90% {
-    .detailed-status__action-bar {
+    transform: rotate(-187.5deg);
-      background: lighten($ui-base-color, 8%);
+  }
-    }
+
+  100% {
+    transform: rotate(-180deg);
   }
 }
 
-.status {
+@keyframes spring-flip-out {
-  padding: 10px 14px;
+  0% {
-  position: relative;
+    transform: rotate(-180deg);
-  height: auto;
+  }
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
-  cursor: auto;
 
-  @supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
+  30% {
-    // Add margin to avoid Edge auto-hiding scrollbar appearing over content.
+    transform: rotate(62.4deg);
-    // On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px.
-    padding-inline-end: 28px; // 12px + 16px
   }
 
-  @keyframes fade {
+  60% {
-    0% {
+    transform: rotate(-21.635deg);
-      opacity: 0;
+  }
-    }
 
-    100% {
+  90% {
-      opacity: 1;
+    transform: rotate(7.5deg);
-    }
   }
 
-  opacity: 1;
+  100% {
-  animation: fade 150ms linear;
+    transform: rotate(0deg);
+  }
+}
 
-  .video-player,
+.status__content {
-  .audio-player {
+  position: relative;
-    margin-top: 8px;
+  margin: 10px 0;
+  font-size: 15px;
+  line-height: 20px;
+  word-wrap: break-word;
+  font-weight: 400;
+  overflow: visible;
+  padding-top: 5px;
+
+  &:focus {
+    outline: 0;
   }
 
-  &.status-direct {
+  .emojione {
-    background: mix($ui-base-color, $ui-highlight-color, 95%);
+    width: 20px;
-    border-bottom-color: lighten($ui-base-color, 12%);
+    height: 20px;
+    margin: -3px 0 0;
   }
 
-  &.light {
+  p,
-    .status__relative-time {
+  pre {
-      color: $lighter-text-color;
+    margin-bottom: 20px;
-    }
+    white-space: pre-wrap;
+    unicode-bidi: plaintext;
 
-    .status__display-name {
+    &:last-child {
-      color: $inverted-text-color;
+      margin-bottom: 0;
     }
+  }
 
-    .display-name {
+  a {
-      color: $light-text-color;
+    color: $secondary-text-color;
+    text-decoration: none;
+    unicode-bidi: isolate;
 
-      strong {
+    &:hover {
-        color: $inverted-text-color;
+      text-decoration: underline;
-      }
     }
 
-    .status__content {
+    &.mention {
-      color: $inverted-text-color;
+      &:hover {
-
+        text-decoration: none;
-      a {
-        color: $highlight-text-color;
-      }
-
-      a.status__content__spoiler-link {
-        color: $primary-text-color;
-        background: $ui-primary-color;
 
-        &:hover {
+        span {
-          background: lighten($ui-primary-color, 8%);
+          text-decoration: underline;
         }
       }
     }
   }
 
-  &.collapsed {
+  .status__content__spoiler {
-    background-position: center;
+    display: none;
-    background-size: cover;
-    user-select: none;
 
-    &.has-background::before {
+    &.status__content__spoiler--visible {
       display: block;
-      position: absolute;
-      inset-inline-start: 0;
-      inset-inline-end: 0;
-      top: 0;
-      bottom: 0;
-      background-image: linear-gradient(
-        to bottom,
-        rgba($base-shadow-color, 0.75),
-        rgba($base-shadow-color, 0.65) 24px,
-        rgba($base-shadow-color, 0.8)
-      );
-      pointer-events: none;
-      content: '';
     }
+  }
 
-    .display-name:hover .display-name__html {
+  a.unhandled-link {
-      text-decoration: none;
+    color: $highlight-text-color;
-    }
 
-    .status__content {
+    .link-origin-tag {
-      height: 20px;
+      color: $gold-star;
-      overflow: hidden;
+      font-size: 0.8em;
-      text-overflow: ellipsis;
+    }
-      padding-top: 0;
+  }
 
-      &::after {
+  .status__content__spoiler-link {
-        content: '';
+    background: lighten($ui-base-color, 30%);
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        inset-inline-start: 0;
-        inset-inline-end: 0;
-        background: linear-gradient(
-          rgba($ui-base-color, 0),
-          rgba($ui-base-color, 1)
-        );
-        pointer-events: none;
-      }
 
-      a:hover {
+    &:hover,
-        text-decoration: none;
+    &:focus {
-      }
+      background: lighten($ui-base-color, 33%);
+      text-decoration: none;
     }
+  }
+}
 
-    &:focus > .status__content::after {
+.notif-cleaning {
-      background: linear-gradient(
+  .status,
-        rgba(lighten($ui-base-color, 4%), 0),
+  .notification {
-        rgba(lighten($ui-base-color, 4%), 1)
+    padding-inline-end: ($dismiss-overlay-width + 0.5rem);
-      );
+  }
-    }
+}
 
-    &.status-direct > .status__content::after {
+.status__prepend-icon-wrapper {
-      background: linear-gradient(
+  inset-inline-start: -26px;
-        rgba(mix($ui-base-color, $ui-highlight-color, 95%), 0),
+  position: absolute;
-        rgba(mix($ui-base-color, $ui-highlight-color, 95%), 1)
+}
-      );
-    }
 
-    .notification__message {
+.notification-follow,
-      margin-bottom: 0;
+.notification-follow-request {
-    }
+  position: relative;
 
-    .status__info .notification__message > span {
+  // same like Status
-      white-space: nowrap;
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
-    }
-  }
 
-  .notification__message {
+  .account {
-    margin: -10px 0 10px;
+    border-bottom: 0 none;
   }
 }
 
@@ -5168,16 +5110,6 @@ a.status-card.compact:hover {
   }
 }
 
-.status__relative-time {
-  display: inline-block;
-  color: $dark-text-color;
-  font-size: 14px;
-  text-align: end;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 .status__display-name {
   color: $dark-text-color;
   overflow: hidden;
@@ -6861,16 +6793,6 @@ img.modal-warning {
   }
 }
 
-.search {
-  @media screen and (max-width: $no-gap-breakpoint) {
-    margin-bottom: 0;
-  }
-
-  @media screen and (width <= 630px) {
-    font-size: 16px;
-  }
-}
-
 .media-gallery__item__badges {
   position: absolute;
   bottom: 6px;