Merge tag 'v4.0.0rc3'

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

@@ -78,7 +78,7 @@ html {
 .column-header__back-button,
 .column-header__button,
 .column-header__button.active,
-.account__header__bar {
+.account__header {
   background: $white;
 }
 
@@ -203,7 +203,8 @@ html {
 // Change the colors used in compose-form
 .compose-form {
   .compose-form__modifiers {
-    .compose-form__upload__actions .icon-button {
+    .compose-form__upload__actions .icon-button,
+    .compose-form__upload__warning .icon-button {
       color: lighten($white, 7%);
 
       &:active,
@@ -212,14 +213,6 @@ html {
         color: $white;
       }
     }
-
-    .compose-form__upload-description input {
-      color: lighten($white, 7%);
-
-      &::placeholder {
-        color: lighten($white, 7%);
-      }
-    }
   }
 
   .compose-form__buttons-wrapper {
@@ -268,7 +261,8 @@ html {
 .status__content .status__content__spoiler-link {
   background: $ui-base-color;
 
-  &:hover {
+  &:hover,
+  &:focus {
     background: lighten($ui-base-color, 4%);
   }
 }

app/javascript/styles/mastodon/components.scss

@@ -1303,6 +1303,7 @@
   display: inline-block;
   font-weight: 500;
   font-size: 12px;
+  line-height: 17px;
   margin-left: 6px;
 }
 
@@ -8556,28 +8557,45 @@ noscript {
 
   &__domain-blocks {
     margin-top: 30px;
-    width: 100%;
-    border-collapse: collapse;
-    break-inside: auto;
+    background: darken($ui-base-color, 4%);
+    border: 1px solid lighten($ui-base-color, 4%);
+    border-radius: 4px;
 
-    th {
-      text-align: left;
-      font-weight: 500;
+    &__domain {
+      border-bottom: 1px solid lighten($ui-base-color, 4%);
+      padding: 10px;
+      font-size: 15px;
       color: $darker-text-color;
-    }
 
-    thead tr,
-    tbody tr {
-      border-bottom: 1px solid lighten($ui-base-color, 8%);
-    }
+      &:nth-child(2n) {
+        background: darken($ui-base-color, 2%);
+      }
 
-    tbody tr:last-child {
-      border-bottom: 0;
-    }
+      &:last-child {
+        border-bottom: 0;
+      }
 
-    th,
-    td {
-      padding: 8px;
+      &__header {
+        display: flex;
+        gap: 10px;
+        justify-content: space-between;
+        font-weight: 500;
+        margin-bottom: 4px;
+      }
+
+      h6 {
+        color: $secondary-text-color;
+        font-size: inherit;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      p {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
   }
 }

app/javascript/styles/mastodon/emoji_picker.scss

@@ -132,6 +132,10 @@
     &:active {
       outline: 0 !important;
     }
+
+    &::-webkit-search-cancel-button {
+      display: none;
+    }
   }
 }
 

app/javascript/styles/mastodon/forms.scss

@@ -1064,11 +1064,18 @@ code {
 
     &:last-child {
       border-bottom: 0;
-      padding-bottom: 0;
     }
   }
 }
 
+// Only remove padding when listing applications, to prevent styling issues on
+// the Authorization page.
+.applications-list {
+  .permissions-list__item:last-child {
+    padding-bottom: 0;
+  }
+}
+
 .keywords-table {
   thead {
     th {