From 3f89cec3c9724c3a1bae0f55ddf2cb3e1144f735 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Thu, 8 Feb 2024 19:52:03 +0100
Subject: [PATCH] Further reduce differences with upstream

---
 .../flavours/glitch/styles/components.scss    | 576 ++++++++----------
 1 file changed, 249 insertions(+), 327 deletions(-)

diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
index 2ff1e997f7..8e5bc45383 100644
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/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) {
@@ -4895,46 +5076,6 @@ a.status-card.compact:hover {
   }
 }
 
-.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 {
@@ -4942,35 +5083,6 @@ a.status-card.compact:hover {
   }
 }
 
-.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;
@@ -4988,176 +5100,6 @@ a.status-card.compact:hover {
   }
 }
 
-.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;
-  }
-}
-
 .notification-favourite {
   .status.status-direct {
     background: transparent;
@@ -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;