Update quote style and remove bottom margin from paragraphs within th…

…em (#1165) * Remove bottom margin from paragraphs in quote blocks Fixes #1163 * Ensure that spaces between paragraphs in quotes will remain #1163 * Ensure sufficient spacing above and below blockquotes This is similar to what wallabag web is doing and avoids cases where two blockquotes would be joined without space, or a blockquote could end up butted up against the following content. * Further fixes for blockquote extra bottom margin Brings in changes for #1143, removing all borders and padding between blockquote and children, allowing for margin collapsing * Whitespace fix * Quote accent colour change as requested * Sync quote high contrast change across themes Co-authored-by: Chris Heywood <[email protected]>
wallabag · Jun 14, 2021 · 3b59bcc · 3b59bcc
1 parent f38ffd8
commit 3b59bcc
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 18 deletions.
diff --git a/app/src/main/assets/dark.css b/app/src/main/assets/dark.css
@@ -74,7 +74,8 @@ img {
 }
 
 .high-contrast p,
-.high-contrast li {
+.high-contrast li,
+.high-contrast #article blockquote {
   color: #FFF;
   background: #000;
 }
@@ -225,13 +226,21 @@ header.mbm {
 }
 
 #article blockquote, #article pre {
-  border: 1px solid #999;
-  background: #222;
-  padding: 0.25em;
-  margin: 0;
+  margin: 1.25em 0;
+}
+
+#article blockquote {
+  border-left: 5px solid #ee6e73;
+  padding-left: 1.25rem;
+  padding-right: 0.25rem;
+  font-style: italic;
+  color: #ddd;
 }
 
 #article pre {
+  padding: 0.25em;
+  border: 1px solid #999;
+  background: #222;
   font-family: monospace;
   white-space: pre;
   text-justify: none;
@@ -245,7 +254,7 @@ header.mbm {
   white-space: pre-wrap;
 }
 
-#article blockquote *, #article pre * {
+#article pre * {
   background: inherit;
 }
 

diff --git a/app/src/main/assets/main.css b/app/src/main/assets/main.css
@@ -64,7 +64,8 @@ table, th, td {
 }
 
 .high-contrast p,
-.high-contrast li {
+.high-contrast li,
+.high-contrast #article blockquote {
   color: #000;
   background: #FFF;
 }
@@ -214,13 +215,21 @@ header.mbm {
 }
 
 #article blockquote, #article pre {
-  border: 1px solid #999;
-  background: #DDD;
-  padding: 0.25em;
-  margin: 0;
+  margin: 1.25em 0;
+}
+
+#article blockquote {
+  border-left: 5px solid #ee6e73;
+  padding-left: 1.25rem;
+  padding-right: 0.25rem;
+  font-style: italic;
+  color: #777;
 }
 
 #article pre {
+  padding: 0.25em;
+  border: 1px solid #999;
+  background: #DDD;
   font-family: monospace;
   white-space: pre;
   text-justify: none;
@@ -234,7 +243,7 @@ header.mbm {
   white-space: pre-wrap;
 }
 
-#article blockquote *, #article pre * {
+#article pre * {
   background: inherit;
 }
 

diff --git a/app/src/main/assets/solarized.css b/app/src/main/assets/solarized.css
@@ -78,7 +78,8 @@ table, th, td {
 }
 
 .high-contrast p,
-.high-contrast li {
+.high-contrast li,
+.high-contrast #article blockquote {
   color: #000;
   background: #FFF;
 }
@@ -229,13 +230,21 @@ header.mbm {
 }
 
 #article blockquote, #article pre {
-  border:1px solid #999;
-  background: #eee8d5; /* $base2*/
-  padding: 0.25em;
-  margin: 0;
+  margin: 1.25em 0;
+}
+
+#article blockquote {
+  border-left: 5px solid #b58900; /* $yellow; */
+  padding-left: 1.25rem;
+  padding-right: 0.25rem;
+  font-style: italic;
+  color: #657B83; /* $base00 */
 }
 
 #article pre {
+  padding: 0.25em;
+  background: #eee8d5; /* $base2*/
+  border: 1px solid #999;
   font-family: monospace;
   white-space: pre;
   text-justify: none;
@@ -249,7 +258,7 @@ header.mbm {
   white-space: pre-wrap;
 }
 
-#article blockquote *, #article pre * {
+#article pre * {
   background: inherit;
 }