From c31f2003d9e214b4e1fa4d8edaec44a8c0a57922 Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Wed, 20 Jan 2021 03:24:38 -0600
Subject: [PATCH] dtext: change [quote] styling.

Change [quote] styling to Reddit/Github style (greyed out, with a bar on
the left side) instead of traditional forum style (big grey box around
the quote).

Reasons for this change:

* Box style is bulkier, especially for short quotes in comments.
* Box style works poorly for deeply nested quotes.
* Box style looks bad on widescreen monitors, since the quote stretches
  across the full width of the screen.
---
 CHANGELOG.md                                  |  3 +++
 app/javascript/src/styles/base/040_colors.css |  6 ++----
 app/javascript/src/styles/common/dtext.scss   | 10 +++++++---
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 10c9e0938..c1a465924 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -33,6 +33,9 @@
 * The maximum comment threshold is now 5 and the minumum threshold is now
   -100. You can't set your threshold any higher or lower than this.
 
+* Changed the way [quote] tags look. Now quotes are Reddit-style instead of
+  traditional forum style.
+
 ### API Changes
 
 * Deleted comments now have some of their fields hidden in the API. The
diff --git a/app/javascript/src/styles/base/040_colors.css b/app/javascript/src/styles/base/040_colors.css
index 3b3cb32bc..7d5dd084c 100644
--- a/app/javascript/src/styles/base/040_colors.css
+++ b/app/javascript/src/styles/base/040_colors.css
@@ -174,8 +174,7 @@
   --notice-info-background: var(--warning-background-color);
   --notice-info-border: 1px solid #CCC999;
 
-  --dtext-blockquote-border: 1px solid #666;
-  --dtext-blockquote-background: #EEE;
+  --dtext-blockquote-border-color: #999;
   --dtext-code-background: #EEE;
   --dtext-expand-border: 1px inset #666;
   --dtext-spoiler-background-color: black;
@@ -320,8 +319,7 @@ body[data-current-user-theme="dark"] {
   --diff-list-obsolete-added-color: var(--green-3);
   --diff-list-obsolete-removed-color: var(--red-3);
 
-  --dtext-blockquote-background: var(--grey-3);
-  --dtext-blockquote-border: 1px solid var(--grey-4);
+  --dtext-blockquote-border-color: var(--grey-4);
   --dtext-code-background: var(--grey-2);
   --dtext-expand-border: 1px inset var(--grey-4);
   --dtext-spoiler-background-color: black;
diff --git a/app/javascript/src/styles/common/dtext.scss b/app/javascript/src/styles/common/dtext.scss
index 5c628c9ba..e56a37ebb 100644
--- a/app/javascript/src/styles/common/dtext.scss
+++ b/app/javascript/src/styles/common/dtext.scss
@@ -70,9 +70,13 @@ div.prose {
 
   blockquote {
     margin-bottom: 1em;
-    padding: 1em 1em 0.2em;
-    border: var(--dtext-blockquote-border);
-    background: var(--dtext-blockquote-background);
+    padding-left: 0.5em;
+    opacity: 0.75;
+    border-left: 3px solid var(--dtext-blockquote-border-color);
+
+    blockquote {
+      opacity: 1.0;
+    }
   }
 
   .tn {