Improve display of content warnings in Admin UI with pure css

app/javascript/styles/mastodon/admin.scss

@@ -1935,7 +1935,6 @@ a.sparkline {
 .status__card {
   padding: 15px;
   border-radius: 4px;
-  background: $ui-base-color;
   font-size: 15px;
   line-height: 20px;
   word-wrap: break-word;
@@ -1954,8 +1953,50 @@ a.sparkline {
   .status__content {
     padding-top: 0;
 
-    summary {
+    > details {
-      display: list-item;
+      summary {
+        display: block;
+        box-sizing: border-box;
+        background: var(--nested-card-background);
+        color: var(--nested-card-text);
+        border: var(--nested-card-border);
+        border-radius: 8px;
+        padding: 8px 13px;
+        position: relative;
+        font-size: 15px;
+        line-height: 22px;
+        cursor: pointer;
+
+        &::after {
+          content: attr(data-show, 'Show more');
+          margin-top: 8px;
+          display: block;
+          font-size: 15px;
+          line-height: 20px;
+          color: $highlight-text-color;
+          cursor: pointer;
+          border: 0;
+          background: transparent;
+          padding: 0;
+          text-decoration: none;
+          font-weight: 500;
+        }
+
+        &:hover,
+        &:focus-visible {
+          &::after {
+            text-decoration: underline !important;
+          }
+        }
+      }
+
+      &[open] summary {
+        margin-bottom: 16px;
+
+        &::after {
+          content: attr(data-hide, 'Hide post');
+        }
+      }
     }
   }
 }

app/views/admin/shared/_status_content.html.haml

@@ -1,8 +1,14 @@
 .status__content><
   - if status.spoiler_text.present?
     %details<
-      %summary><
+      %summary{
-        %strong> Content warning: #{prerender_custom_emojis(h(status.spoiler_text), status.emojis)}
+        data: {
+          show: t('statuses.content_warning.show'),
+          hide: t('statuses.content_warning.hide'),
+        }
+      }><
+        %strong>
+          = t('statuses.content_warning.warning', warning: prerender_custom_emojis(h(status.spoiler_text), status.emojis))
       = prerender_custom_emojis(status_content_format(status), status.emojis)
       = render partial: 'admin/shared/status_attachments', locals: { status: status.proper }
   - else

config/locales/en.yml

@@ -1897,7 +1897,10 @@ en:
         one: "%{count} video"
         other: "%{count} videos"
     boosted_from_html: Boosted from %{acct_link}
-    content_warning: 'Content warning: %{warning}'
+    content_warning:
+      hide: Hide post
+      show: Show more
+      warning: 'Content warning: %{warning}'
     default_language: Same as interface language
     disallowed_hashtags:
       one: 'contained a disallowed hashtag: %{tags}'