Merge commit 'b48f907b20e2c9909665a484041845697d26f17c' into glitch-soc/merge-upstream

Conflicts:
- `app/helpers/settings_helper.rb`:
  Upstream added a new helper.
  Conflict caused by the fact there is a glitch-soc specific helper.
  Added upstream's new helper in addition to glitch-soc's.

app/javascript/styles/mastodon/admin.scss

@@ -457,6 +457,7 @@ $content-width: 840px;
     color: var(--color-text-primary);
     border-radius: 12px;
     font-size: 15px;
+    line-height: 1.3333;
     margin-bottom: 30px;
 
     .icon {
@@ -464,10 +465,26 @@ $content-width: 840px;
       border-radius: 9999px;
       width: 1rem;
       height: 1rem;
-      margin-top: -2px;
+      margin-block: -2px;
       background-color: var(--color-bg-brand-soft);
     }
 
+    &.variantWarning {
+      background-color: var(--color-bg-warning-softest);
+
+      .icon {
+        background-color: var(--color-bg-warning-soft);
+      }
+    }
+
+    &.variantError {
+      background-color: var(--color-bg-error-softest);
+
+      .icon {
+        background-color: var(--color-bg-error-soft);
+      }
+    }
+
     .content {
       display: flex;
       flex-direction: column;
@@ -486,7 +503,7 @@ $content-width: 840px;
 
     .title {
       font-weight: 600;
-      margin-bottom: 8px;
+      margin-bottom: 6px;
       font-size: inherit;
       line-height: inherit;
     }
@@ -2467,4 +2484,46 @@ a.sparkline {
   background: var(--color-bg-success-softest);
   font-size: 13px;
   font-weight: 600;
+
+  &.positive {
+    background: var(--color-bg-success-softest);
+  }
+
+  &.negative {
+    background: var(--color-bg-error-softest);
+  }
+}
+
+.metadata {
+  display: flex;
+  gap: 40px;
+  margin: 16px 0;
+
+  & > div {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    flex-shrink: 0;
+  }
+
+  dt {
+    font-size: 13px;
+    color: var(--color-text-secondary);
+  }
+
+  dd {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 22.4px;
+
+    .status-badge {
+      box-sizing: border-box;
+      padding: 4px;
+      font-size: inherit;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
 }

app/javascript/styles/mastodon/components.scss

@@ -4638,10 +4638,16 @@ a.status-card {
   z-index: 2;
   outline: 0;
 
+  &__title-wrapper {
+    display: flex;
+    flex-grow: 1;
+  }
+
   &__title {
     display: flex;
     align-items: center;
     gap: 5px;
+    flex-grow: 1;
     margin: 0;
     border: 0;
     padding: 13px;
@@ -4653,7 +4659,10 @@ a.status-card {
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
-    flex: 1;
+
+    &--with-back-button {
+      padding-inline-start: 0;
+    }
 
     &:focus-visible {
       outline: var(--outline-focus-default);
@@ -4664,10 +4673,6 @@ a.status-card {
     }
   }
 
-  .column-header__back-button + &__title {
-    padding-inline-start: 0;
-  }
-
   .column-header__back-button {
     flex: 1;
     color: var(--color-text-brand);
@@ -9838,6 +9843,10 @@ noscript {
   display: flex;
   flex-direction: column;
   gap: 4px;
+
+  &:empty {
+    display: none;
+  }
 }
 
 .notification-bar {

app/javascript/styles/mastodon/forms.scss

@@ -500,6 +500,8 @@ code {
 
     input[type='radio'] {
       accent-color: var(--color-text-brand);
+      width: 15px;
+      height: 15px;
     }
   }
 
@@ -533,6 +535,8 @@ code {
   label.checkbox {
     input[type='checkbox'] {
       accent-color: var(--color-text-brand);
+      width: 15px;
+      height: 15px;
     }
   }
 

app/javascript/styles/mastodon/tables.scss

@@ -129,6 +129,10 @@
       color: var(--color-text-primary);
       font-weight: 600;
     }
+
+    .status-badge {
+      padding: 0;
+    }
   }
 
   &.batch-table {
@@ -194,6 +198,12 @@ a.table-action-link {
   justify-content: center;
   padding: 4px;
   aspect-ratio: 1;
+
+  &.table-icon-link--danger {
+    border-radius: 8px;
+    border: 1px solid var(--color-border-primary);
+    color: var(--color-text-error);
+  }
 }
 
 .batch-table {