From c86a24743ad9488c1fc66fa3f9f3c9efc801f9d8 Mon Sep 17 00:00:00 2001 From: evazion Date: Thu, 19 Sep 2019 04:20:44 -0500 Subject: [PATCH] css: add more variables for dark mode. Add some more variables that will be needed for dark mode. --- app/javascript/src/styles/base/040_colors.css | 22 +++++++++---------- app/javascript/src/styles/common/dtext.scss | 2 +- .../src/styles/common/jquery_ui_custom.scss | 8 ++++++- app/javascript/src/styles/common/notices.scss | 1 + app/javascript/src/styles/specific/error.scss | 2 +- app/javascript/src/styles/specific/notes.scss | 1 + .../src/styles/specific/post_tooltips.scss | 1 + 7 files changed, 22 insertions(+), 15 deletions(-) diff --git a/app/javascript/src/styles/base/040_colors.css b/app/javascript/src/styles/base/040_colors.css index 8ccbd030a..383125683 100644 --- a/app/javascript/src/styles/base/040_colors.css +++ b/app/javascript/src/styles/base/040_colors.css @@ -1,16 +1,8 @@ -:root { - --very-light-grey: hsl(0, 0%, 95%); - --light-grey: hsl(0, 0%, 90%); - --grey: hsl(0, 0%, 55%); - --dark-grey: hsl(0, 0%, 40%); - --very-dark-grey: hsl(0, 0%, 15%); -} - :root { --body-background-color: white; - --text-color: var(--very-dark-grey); - --muted-text-color: var(--grey); + --text-color: hsl(0, 0%, 15%); + --muted-text-color: hsl(0, 0%, 55%); --link-color: hsl(213, 100%, 50%); --link-hover-color: hsl(213, 100%, 75%); @@ -61,7 +53,7 @@ --modqueue-sample-warning-color: var(--error-background-color); --modqueue-quality-warning-color: var(--warning-background-color); - --modqueue-postive-score-background-color: var(--success-background-color); + --modqueue-positive-score-background-color: var(--success-background-color); --modqueue-negative-score-background-color: var(--error-background-color); --uploads-dropzone-background: #EEE; @@ -79,6 +71,7 @@ --comment-sticky-background-color: var(--subnav-menu-background-color); + --post-tooltip-background-color: var(--body-background-color); --post-tooltip-border-color: #767676; --post-tooltip-header-background-color: var(--subnav-menu-background-color); --post-tooltip-info-color: #555; @@ -118,6 +111,7 @@ --post-artist-commentary-container-border: 1px solid #CCC; --note-body-background: #FFE; + --note-body-text-color: var(--text-color); --note-body-border: 1px solid black; --note-box-border: 1px solid white; --note-box-background: transparent; @@ -171,17 +165,21 @@ --bulk-update-request-approved-color: green; --bulk-update-request-failed-color: red; + --notice-text-color: var(--text-color); --notice-background: #FFFBBF; --notice-border: 1px solid #CCC999; --sign-in-link-color: #E00; --footer-border: 1px solid #EEE; + --jquery-ui-widget-content-background: var(--body-background-color); + --jquery-ui-widget-content-text-color: var(--text-color); --jquery-ui-state-error-background: #FDDFDE; --jquery-ui-state-error-border: 1px solid #FBC7C6; + --jquery-ui-state-error-text-color: var(--text-color); --jquery-ui-state-highlight-background: #FDF5D9; --jquery-ui-state-highlight-border: 1px solid #FCEEC1; - --jquery-ui-state-highlight-color: #363636; + --jquery-ui-state-highlight-text-color: var(--text-color); --jquery-ui-dialog-box-shadow: 2px 2px 1px grey; --dtext-blockquote-border: 1px solid #666; diff --git a/app/javascript/src/styles/common/dtext.scss b/app/javascript/src/styles/common/dtext.scss index 7c043743a..7dd137b8f 100644 --- a/app/javascript/src/styles/common/dtext.scss +++ b/app/javascript/src/styles/common/dtext.scss @@ -55,7 +55,7 @@ div.prose { font-size: 1.2em; margin: 0.5em 0; padding: 0.5em 1em; - background: var(--dtext-code-background-color); + background: var(--dtext-code-background); white-space: pre-wrap; } diff --git a/app/javascript/src/styles/common/jquery_ui_custom.scss b/app/javascript/src/styles/common/jquery_ui_custom.scss index bb5e0f5ba..29f2db4b7 100644 --- a/app/javascript/src/styles/common/jquery_ui_custom.scss +++ b/app/javascript/src/styles/common/jquery_ui_custom.scss @@ -8,6 +8,11 @@ } } +.ui-widget-content { + background: var(--jquery-ui-widget-content-background); + color: var(--jquery-ui-widget-content-text-color); +} + .ui-widget-content a { color: var(--link-color); } @@ -38,7 +43,7 @@ div.ui-dialog { .ui-state-highlight { border: var(--jquery-ui-state-highlight-border); background: var(--jquery-ui-state-highlight-background); - color: var(--jquery-ui-state-highlight-color); + color: var(--jquery-ui-state-highlight-text-color); a, a:active, a:visited { color: var(--link-color); @@ -52,6 +57,7 @@ div.ui-dialog { .ui-state-error { border: var(--jquery-ui-state-error-border); background: var(--jquery-ui-state-error-background); + color: var(--jquery-ui-state-error-text-color); } .ui-button { diff --git a/app/javascript/src/styles/common/notices.scss b/app/javascript/src/styles/common/notices.scss index dcf2974d1..d64309af6 100644 --- a/app/javascript/src/styles/common/notices.scss +++ b/app/javascript/src/styles/common/notices.scss @@ -19,6 +19,7 @@ div#notice { &:not(.ui-state-error) { background: var(--notice-background); border: var(--notice-border); + color: var(--notice-text-color); } } diff --git a/app/javascript/src/styles/specific/error.scss b/app/javascript/src/styles/specific/error.scss index a0f389c32..849f956ed 100644 --- a/app/javascript/src/styles/specific/error.scss +++ b/app/javascript/src/styles/specific/error.scss @@ -2,7 +2,7 @@ ul.backtrace { font-family: monospace; font-size: 1.2em; list-style-type: none; - background: var(--dtext-code-background-color); + background: var(--dtext-code-background); padding: 1em; margin-bottom: 1em; } diff --git a/app/javascript/src/styles/specific/notes.scss b/app/javascript/src/styles/specific/notes.scss index b0ec5bb59..a5064a62b 100644 --- a/app/javascript/src/styles/specific/notes.scss +++ b/app/javascript/src/styles/specific/notes.scss @@ -6,6 +6,7 @@ div#note-container { position: absolute; border: var(--note-body-border); background: var(--note-body-background); + color: var(--note-body-text-color); min-width: 140px; min-height: 1em; line-height: normal; diff --git a/app/javascript/src/styles/specific/post_tooltips.scss b/app/javascript/src/styles/specific/post_tooltips.scss index 9b9828c80..31e4e4bb8 100644 --- a/app/javascript/src/styles/specific/post_tooltips.scss +++ b/app/javascript/src/styles/specific/post_tooltips.scss @@ -54,6 +54,7 @@ $tooltip-width: 164px * 3 - 10; // 3 thumbnails wide. font-size: 11px; line-height: $tooltip-line-height; border-color: var(--post-tooltip-border-color); + background-color: var(--post-tooltip-background-color); .qtip-content { padding: 0;