From f999cde1596e8954952ae57d7c7d9f75318a14d2 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Tue, 2 Jan 2024 16:53:40 -0500
Subject: [PATCH] UX: update post background highlight (#25094)

---
 .../common/base/personal-message.scss         | 74 +++++++++----------
 .../stylesheets/common/base/topic-post.scss   |  4 +-
 2 files changed, 38 insertions(+), 40 deletions(-)

diff --git a/app/assets/stylesheets/common/base/personal-message.scss b/app/assets/stylesheets/common/base/personal-message.scss
index a8cae39a306..e51a95ff348 100644
--- a/app/assets/stylesheets/common/base/personal-message.scss
+++ b/app/assets/stylesheets/common/base/personal-message.scss
@@ -14,12 +14,11 @@
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    .topic-body.topic-body.highlighted .cooked {
-      animation: unset;
-    }
-
-    .topic-body.highlighted .regular.contents {
-      animation: background-fade-highlight 2.5s ease-out;
+    .topic-body.highlighted {
+      animation: none;
+      .regular.contents {
+        animation: background-fade-highlight 2.5s ease-out;
+      }
     }
   }
 
@@ -155,25 +154,17 @@
   // special post type colors
 
   .current-user-post {
-    &:not(.moderator):not(.whisper.current-user-post) {
-      .regular.contents {
-        background: var(--tertiary-very-low);
-        border-color: var(--tertiary-very-low);
-      }
+    .regular.contents {
+      background: var(--tertiary-very-low);
+      border-color: var(--tertiary-very-low);
+    }
+    @media (prefers-reduced-motion: no-preference) {
       .topic-body.highlighted {
-        @media (prefers-reduced-motion: no-preference) {
-          .cooked {
-            animation: unset;
-          }
-          .regular.contents {
-            animation: current-user-background-fade-highlight 2.5s ease-out;
-          }
+        .regular.contents {
+          animation: current-user-background-fade-highlight 2.5s ease-out;
         }
       }
     }
-    .topic-body .cooked {
-      border: 1px solid transparent;
-    }
     .embedded-posts {
       .topic-body .cooked {
         background: transparent;
@@ -182,26 +173,18 @@
   }
 
   .moderator {
+    .topic-body.highlighted {
+      .regular.contents {
+        animation: none;
+      }
+    }
+
     .regular.contents {
       background: var(--highlight-low);
       border-color: var(--highlight-low);
-    }
-    .regular.contents .cooked {
-      background: transparent;
-      border: 1px solid transparent;
-    }
-  }
-
-  .deleted {
-    .regular.contents {
-      background: var(--danger-low);
-      border-color: var(--danger-low);
-    }
-    .topic-body .regular .cooked {
-      background: transparent;
-    }
-    .topic-body.highlighted .regular.contents {
-      animation: unset;
+      .cooked {
+        background: transparent;
+      }
     }
   }
 
@@ -218,4 +201,19 @@
       }
     }
   }
+
+  .deleted {
+    .topic-body .regular.contents {
+      background: var(--danger-low);
+      border-color: transparent;
+      .cooked {
+        background: transparent;
+      }
+    }
+    &.whisper {
+      .topic-body .regular.contents {
+        border-color: var(--danger-low-mid);
+      }
+    }
+  }
 }
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 30e0d4ae1ef..e08864c631c 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -945,12 +945,12 @@ aside.quote {
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .topic-body.highlighted .cooked,
+  .topic-body.highlighted,
   .small-action-desc.highlighted {
     animation: background-fade-highlight 2.5s ease-out;
   }
   // Disable animation so deleted status is visible immediately
-  .deleted .topic-body.highlighted .cooked {
+  .deleted .topic-body.highlighted {
     animation: none;
   }
 }