Merge commit '69f298731e523f7f2e97ddd6a559dfb485d4495c' into glitch-soc/merge-upstream

app/javascript/styles/mastodon-light/diff.scss

@@ -530,9 +530,3 @@ a.sparkline {
     opacity: 0.25;
   }
 }
-
-.featured-carousel {
-  background: var(--nested-card-background);
-  border-bottom: var(--nested-card-border);
-  color: var(--nested-card-text);
-}

app/javascript/styles/mastodon/components.scss

@@ -708,7 +708,12 @@ body > [data-popper-placement] {
 
   &__upload {
     position: relative;
-    cursor: grab;
+
+    &.draggable {
+      will-change: transform, opacity;
+      touch-action: none;
+      cursor: grab;
+    }
 
     &.dragging {
       opacity: 0;
@@ -720,18 +725,6 @@ body > [data-popper-placement] {
       pointer-events: none;
     }
 
-    &__drag-handle {
-      position: absolute;
-      top: 50%;
-      inset-inline-start: 0;
-      transform: translateY(-50%);
-      color: $white;
-      background: transparent;
-      border: 0;
-      padding: 8px 3px;
-      cursor: grab;
-    }
-
     &__actions {
       display: flex;
       align-items: flex-start;
@@ -3144,10 +3137,9 @@ a.account__display-name {
       height: 100vh;
     }
 
-    .navigation-panel__sign-in-banner,
     .navigation-panel__banner,
-    .getting-started__trends,
-    .navigation-panel__logo {
+    .navigation-panel__logo,
+    .getting-started__trends {
       display: none;
     }
   }
@@ -3481,15 +3473,24 @@ a.account__display-name {
     &__header {
       display: flex;
       align-items: center;
-      padding-inline-end: 12px;
+
+      &__sep {
+        width: 0;
+        height: 24px;
+        border-left: 1px solid var(--background-border-color);
+      }
 
       .column-link {
         flex: 1 1 auto;
       }
+
+      .icon-button {
+        padding: 8px;
+      }
     }
 
     &__items {
-      padding-inline-start: 24px + 5px;
+      padding-inline-start: 24px + 8px;
 
       .icon {
         display: none;
@@ -3500,14 +3501,16 @@ a.account__display-name {
   &__compose-button {
     display: flex;
     justify-content: flex-start;
-    padding-top: 10px;
-    padding-bottom: 10px;
-    padding-inline-start: 13px - 7px;
-    padding-inline-end: 13px;
-    gap: 5px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    padding-inline-start: 12px - 7px;
+    padding-inline-end: 12px;
+    gap: 8px;
     margin: 12px;
-    margin-bottom: 4px;
     border-radius: 6px;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 18px;
 
     .icon {
       width: 24px;
@@ -3517,7 +3520,11 @@ a.account__display-name {
 
   .navigation-bar {
     padding: 16px;
-    border-bottom: 1px solid var(--background-border-color);
+  }
+
+  .search {
+    margin: 16px;
+    margin-bottom: 12px;
   }
 
   .logo {
@@ -3529,26 +3536,36 @@ a.account__display-name {
     margin-bottom: 12px;
   }
 
-  @media screen and (height <= 710px) {
-    &__portal {
+  .getting-started__trends h4 {
+    padding: 10px 12px;
+    padding-inline-start: 16px;
+  }
+
+  .getting-started__trends .trends__item {
+    padding: 10px 12px;
+    padding-inline-start: 16px;
+  }
+
+  @media screen and (height <= 930px) {
+    &__portal .trends__item:nth-child(n + 5) {
       display: none;
     }
   }
 
-  @media screen and (height <= 765px) {
-    &__portal .trends__item:nth-child(n + 3) {
-      display: none;
-    }
-  }
-
-  @media screen and (height <= 820px) {
+  @media screen and (height <= 930px - 56px) {
     &__portal .trends__item:nth-child(n + 4) {
       display: none;
     }
   }
 
-  @media screen and (height <= 920px) {
-    .column-link.column-link--optional {
+  @media screen and (height <= 930px - (56px * 2)) {
+    &__portal .trends__item:nth-child(n + 3) {
+      display: none;
+    }
+  }
+
+  @media screen and (height <= 930px - (56px * 3)) {
+    &__portal {
       display: none;
     }
   }
@@ -3821,9 +3838,10 @@ a.account__display-name {
 .column-link {
   display: flex;
   align-items: center;
-  gap: 5px;
+  gap: 8px;
   font-size: 16px;
-  padding: 13px;
+  font-weight: 400;
+  padding: 12px;
   text-decoration: none;
   overflow: hidden;
   white-space: nowrap;
@@ -4605,7 +4623,8 @@ a.status-card {
 }
 
 .load-more .loading-indicator,
-.button .loading-indicator {
+.button .loading-indicator,
+.icon-button .loading-indicator {
   position: static;
   transform: none;
 
@@ -4616,6 +4635,13 @@ a.status-card {
   }
 }
 
+.icon-button .loading-indicator .circular-progress {
+  color: lighten($ui-base-color, 26%);
+  width: 12px;
+  height: 12px;
+  margin: 6px;
+}
+
 .load-more .loading-indicator .circular-progress {
   color: lighten($ui-base-color, 26%);
 }
@@ -11118,7 +11144,6 @@ noscript {
 }
 
 .featured-carousel {
-  background: var(--surface-background-color);
   overflow: hidden;
   flex-shrink: 0;
   border-bottom: 1px solid var(--background-border-color);