Change how content warnings and filters are displayed in web UI (#31365)

app/javascript/styles/mastodon/components.scss

@@ -620,7 +620,7 @@ body > [data-popper-placement] {
 
   .spoiler-input__input {
     padding: 12px 12px - 5px;
-    background: mix($ui-base-color, $ui-highlight-color, 85%);
+    background: rgba($ui-highlight-color, 0.05);
     color: $highlight-text-color;
   }
 
@@ -1383,6 +1383,14 @@ body > [data-popper-placement] {
     }
   }
 
+  .content-warning {
+    margin-bottom: 10px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
   .media-gallery,
   .video-player,
   .audio-player,
@@ -1441,7 +1449,9 @@ body > [data-popper-placement] {
     .picture-in-picture-placeholder,
     .more-from-author,
     .status-card,
-    .hashtag-bar {
+    .hashtag-bar,
+    .content-warning,
+    .filter-warning {
       margin-inline-start: $thread-margin;
       width: calc(100% - $thread-margin);
     }
@@ -1690,6 +1700,14 @@ body > [data-popper-placement] {
     padding: 0;
     margin-bottom: 16px;
   }
+
+  .content-warning {
+    margin-bottom: 16px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
 }
 
 .scrollable > div:first-child .detailed-status {
@@ -10518,39 +10536,53 @@ noscript {
   }
 
   &__embedded-status {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
     cursor: pointer;
 
     &__account {
       display: flex;
       align-items: center;
       gap: 4px;
-      margin-bottom: 8px;
       color: $dark-text-color;
+      font-size: 15px;
+      line-height: 22px;
 
       bdi {
-        color: inherit;
+        color: $darker-text-color;
       }
     }
 
-    .account__avatar {
-      opacity: 0.5;
-    }
-
     &__content {
       display: -webkit-box;
       font-size: 15px;
       line-height: 22px;
-      color: $dark-text-color;
+      color: $darker-text-color;
       -webkit-line-clamp: 4;
       -webkit-box-orient: vertical;
       max-height: 4 * 22px;
       overflow: hidden;
 
+      p {
+        display: none;
+
+        &:first-child {
+          display: initial;
+        }
+      }
+
       p,
       a {
         color: inherit;
       }
     }
+
+    .reply-indicator__attachments {
+      font-size: 15px;
+      line-height: 22px;
+      color: $dark-text-color;
+    }
   }
 }
 
@@ -10625,7 +10657,9 @@ noscript {
   .picture-in-picture-placeholder,
   .more-from-author,
   .status-card,
-  .hashtag-bar {
+  .hashtag-bar,
+  .content-warning,
+  .filter-warning {
     margin-inline-start: $icon-margin;
     width: calc(100% - $icon-margin);
   }
@@ -10833,3 +10867,53 @@ noscript {
     }
   }
 }
+
+.content-warning {
+  background: rgba($ui-highlight-color, 0.05);
+  color: $secondary-text-color;
+  border-top: 1px solid;
+  border-bottom: 1px solid;
+  border-color: rgba($ui-highlight-color, 0.15);
+  padding: 8px (5px + 8px);
+  position: relative;
+  font-size: 15px;
+  line-height: 22px;
+
+  p {
+    margin-bottom: 8px;
+  }
+
+  .link-button {
+    font-size: inherit;
+    line-height: inherit;
+    font-weight: 500;
+  }
+
+  &::before,
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    height: 100%;
+    background: url('../images/warning-stripes.svg') repeat-y;
+    width: 5px;
+    top: 0;
+  }
+
+  &::before {
+    border-start-start-radius: 4px;
+    border-end-start-radius: 4px;
+    inset-inline-start: 0;
+  }
+
+  &::after {
+    border-start-end-radius: 4px;
+    border-end-end-radius: 4px;
+    inset-inline-end: 0;
+  }
+
+  &--filter::before,
+  &--filter::after {
+    background-image: url('../images/filter-stripes.svg');
+  }
+}