jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

dtext: change [quote] styling.

Browse Source 
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.
This commit is contained in:
evazion
2021-01-20 03:24:38 -06:00
parent 5780ed5768
commit c31f2003d9
3 changed files with 12 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

@@ -33,6 +33,9 @@
* The maximum comment threshold is now 5 and the minumum threshold is now * 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. -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 ### API Changes
* Deleted comments now have some of their fields hidden in the API. The * Deleted comments now have some of their fields hidden in the API. The

6
app/javascript/src/styles/base/040_colors.css
View File

@@ -174,8 +174,7 @@
--notice-info-background: var(--warning-background-color); --notice-info-background: var(--warning-background-color);
--notice-info-border: 1px solid #CCC999; --notice-info-border: 1px solid #CCC999;
--dtext-blockquote-border: 1px solid #666; --dtext-blockquote-border-color: #999;
--dtext-blockquote-background: #EEE;
--dtext-code-background: #EEE; --dtext-code-background: #EEE;
--dtext-expand-border: 1px inset #666; --dtext-expand-border: 1px inset #666;
--dtext-spoiler-background-color: black; --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-added-color: var(--green-3);
--diff-list-obsolete-removed-color: var(--red-3); --diff-list-obsolete-removed-color: var(--red-3);
--dtext-blockquote-background: var(--grey-3); --dtext-blockquote-border-color: var(--grey-4);
--dtext-blockquote-border: 1px solid var(--grey-4);
--dtext-code-background: var(--grey-2); --dtext-code-background: var(--grey-2);
--dtext-expand-border: 1px inset var(--grey-4); --dtext-expand-border: 1px inset var(--grey-4);
--dtext-spoiler-background-color: black; --dtext-spoiler-background-color: black;

10
app/javascript/src/styles/common/dtext.scss
View File

@@ -70,9 +70,13 @@ div.prose {
blockquote { blockquote {
margin-bottom: 1em; margin-bottom: 1em;
padding: 1em 1em 0.2em; padding-left: 0.5em;
border: var(--dtext-blockquote-border); opacity: 0.75;
background: var(--dtext-blockquote-background); border-left: 3px solid var(--dtext-blockquote-border-color);
blockquote {
opacity: 1.0;
}
} }
.tn { .tn {