From 8c86662a5a870702d03fe860b4a7a3ec60ad1750 Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Mon, 22 Feb 2021 05:45:18 -0600
Subject: [PATCH] css: revert styling of selected post in parent/child box.

Partial revert of b9ea9d2f5. Go back to using a semi-transparent
background to indicate the selected parent/child post, but add more
padding and adjust the transparency to make it more legible.
---
 app/javascript/src/styles/base/040_colors.css | 4 ++--
 app/javascript/src/styles/specific/posts.scss | 7 ++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/javascript/src/styles/base/040_colors.css b/app/javascript/src/styles/base/040_colors.css
index 95a1a73c0..834ebcfac 100644
--- a/app/javascript/src/styles/base/040_colors.css
+++ b/app/javascript/src/styles/base/040_colors.css
@@ -145,7 +145,7 @@ html {
   --preview-deleted-color: var(--grey-9);
   --preview-has-children-color: var(--green-3);
   --preview-has-parent-color: var(--orange-3);
-  --preview-selected-color: var(--blue-3);
+  --preview-selected-color: rgba(0, 0, 0, 0.15);
 
   --preview-icon-color: var(--inverse-text-color);
   --preview-icon-background: rgba(0, 0, 0, 0.5);
@@ -356,7 +356,7 @@ body[data-current-user-theme="dark"] {
   --preview-deleted-color: var(--grey-3);
   --preview-has-children-color: var(--green-3);
   --preview-has-parent-color: var(--orange-3);
-  --preview-selected-color: var(--blue-3);
+  --preview-selected-color: rgba(255, 255, 255, 0.25);
 
   --modqueue-tag-warning-color: var(--red-7);
 
diff --git a/app/javascript/src/styles/specific/posts.scss b/app/javascript/src/styles/specific/posts.scss
index 87b91f473..51c90fddf 100644
--- a/app/javascript/src/styles/specific/posts.scss
+++ b/app/javascript/src/styles/specific/posts.scss
@@ -38,13 +38,14 @@
   article.post-preview {
     width: auto;
     height: auto;
-    margin: 0.5rem 0.25rem;
-    padding: 0.25rem;
+    margin: 0.5rem 0;
+    padding: 0.5rem;
     overflow: hidden;
     vertical-align: top;
+    border-radius: 0.25rem;
 
     &.current-post {
-      outline: 3px solid var(--preview-selected-color);
+      background-color: var(--preview-selected-color);
     }
 
     img {