From e3406d1bc7741f437c124ac22a3d56d48ed0af93 Mon Sep 17 00:00:00 2001 From: evazion Date: Tue, 17 Sep 2019 00:28:41 -0500 Subject: [PATCH] css: standardize success/error background colors. Standardize background colors to light green or light red in several places: * Modqueue positive/negative score backgrounds. * Modqueue quality/sample warning backgrounds. * User feedback positive/negative backgrounds. * Ban expired/unexpired backgrounds. * Flag resolved/unresolved backgrounds (removed; resolved flags no longer have a grey background because of inconsistencies in what resolved means). --- app/javascript/src/styles/base/040_colors.css | 33 ++++++------------- app/javascript/src/styles/specific/bans.scss | 12 ++----- .../src/styles/specific/post_events.scss | 11 ------- .../src/styles/specific/post_flags.scss | 9 ----- .../src/styles/specific/user_feedback.scss | 8 ++--- .../specific/user_name_change_requests.scss | 4 +-- 6 files changed, 16 insertions(+), 61 deletions(-) delete mode 100644 app/javascript/src/styles/specific/post_events.scss diff --git a/app/javascript/src/styles/base/040_colors.css b/app/javascript/src/styles/base/040_colors.css index 04adb90d3..140768aca 100644 --- a/app/javascript/src/styles/base/040_colors.css +++ b/app/javascript/src/styles/base/040_colors.css @@ -1,11 +1,15 @@ :root { --body-background-color: white; - --fineprint-color: #888; - --link-color: hsl(213, 100%, 50%); --link-hover-color: hsl(213, 100%, 75%); + --fineprint-color: #888; + + --error-background-color: hsl(0, 100%, 95%); // light red + --success-background-color: hsl(120, 100%, 95%); // light green + --warning-background-color: hsl(50, 100%, 95%); // light yellow + --subnav-menu-background-color: #F5F5FF; --responsive-menu-background-color: var(--link-hover-color); @@ -32,10 +36,10 @@ --preview-icon-color: white; --preview-icon-background: rgba(0, 0, 0, 0.5); - --modqueue-sample-warning-color: hsl(0, 100%, 90%); // light red - --modqueue-quality-warning-color: hsl(50, 100%, 90%); // light yellow - --modqueue-postive-score-background-color: rgb(230, 255, 230); - --modqueue-negative-score-background-color: rgb(255, 230, 230); + --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-negative-score-background-color: var(--error-background-color); --uploads-dropzone-border: 4xp dashed #DDD; --uploads-dropzone-placeholder-color: #333; @@ -73,11 +77,6 @@ --preview-current-post-background: rgba(0, 0, 0, 0.1); - --error-color: hsl(0, 100%, 95%); // light red - --error-hover-color: hsl(0, 100%, 90%); - --success-color: hsl(120, 100%, 95%); // light green - --success-hover-color: hsl(120, 100%, 90%); - --autocomplete-background-color: #F0F0F0; --autocomplete-border-color: #C5C5C5; @@ -124,12 +123,6 @@ --note-highlight-color: blue; --note-tn-color: gray; - --post-events-resolved-background: #DDD; - --post-events-unresolved-background: white; - - --user-name-change-requests-positive-background: #DDFFDD; - --user-name-change-requests-negative-background: #FFDDDD; - --series-pool-color: #A0A; --series-pool-hover-color: #B6B; @@ -175,8 +168,6 @@ --keyboard-shortcut-color: white; --keyboard-shortcut-background-color: #333; - // XXX unused? - --error-color: red; --error-message-color: #A00; --new-artist-color: #A00; @@ -219,10 +210,6 @@ --wiki-page-other-name-background-color: #EEE; - --user-feedback-positive-background-color: #DDFFDD !important; - --user-feedback-negative-background-color: #FFDDDD !important; - --user-feedback-neutral-background-color: #FFFFFF !important; - --paginator-ellipsis-color: grey; --paginator-arrow-background-color: white; --paginator-arrow-color: var(--link-color); diff --git a/app/javascript/src/styles/specific/bans.scss b/app/javascript/src/styles/specific/bans.scss index 57ffd4e0c..5f822d135 100644 --- a/app/javascript/src/styles/specific/bans.scss +++ b/app/javascript/src/styles/specific/bans.scss @@ -1,17 +1,9 @@ #c-bans #a-index { tr[data-expired="true"] { - background-color: var(--success-color) !important; - - &:hover { - background-color: var(--success-hover-color) !important; - } + background-color: var(--success-background-color); } tr[data-expired="false"] { - background-color: var(--error-color) !important; - - &:hover { - background-color: var(--error-hover-color) !important; - } + background-color: var(--error-background-color); } } diff --git a/app/javascript/src/styles/specific/post_events.scss b/app/javascript/src/styles/specific/post_events.scss deleted file mode 100644 index 985f48be6..000000000 --- a/app/javascript/src/styles/specific/post_events.scss +++ /dev/null @@ -1,11 +0,0 @@ -div#c-post-events { - #a-index { - tr.resolved-true { - background: var(--post-events-resolved-background); - } - - tr.resolved-false { - background: var(--post-events-unresolved-background); - } - } -} diff --git a/app/javascript/src/styles/specific/post_flags.scss b/app/javascript/src/styles/specific/post_flags.scss index 825a94a47..e69de29bb 100644 --- a/app/javascript/src/styles/specific/post_flags.scss +++ b/app/javascript/src/styles/specific/post_flags.scss @@ -1,9 +0,0 @@ -div#c-post-flags { - tr.resolved-true { - background: var(--post-events-resolved-background) !important; - } - - tr.resolved-false { - background: var(--post-events-unresolved-background) !important; - } -} diff --git a/app/javascript/src/styles/specific/user_feedback.scss b/app/javascript/src/styles/specific/user_feedback.scss index 153c08dc1..3c165aa2b 100644 --- a/app/javascript/src/styles/specific/user_feedback.scss +++ b/app/javascript/src/styles/specific/user_feedback.scss @@ -1,14 +1,10 @@ div#c-user-feedbacks, div#c-moderator-dashboards div#col2 { .feedback-category-positive { - background: var(--user-feedback-positive-background-color); + background: var(--success-background-color); } .feedback-category-negative { - background: var(--user-feedback-negative-background-color); - } - - .feedback-category-neutral { - background: var(--user-feedback-neutral-background-color); + background: var(--error-background-color); } #negative-policy { diff --git a/app/javascript/src/styles/specific/user_name_change_requests.scss b/app/javascript/src/styles/specific/user_name_change_requests.scss index c9e518e76..190097e27 100644 --- a/app/javascript/src/styles/specific/user_name_change_requests.scss +++ b/app/javascript/src/styles/specific/user_name_change_requests.scss @@ -1,10 +1,10 @@ #c-user-name-change-requests { .feedback-category-positive { - background: var(--user-name-change-requests-positive-background) !important; + background: var(--success-background-color); } .feedback-category-negative { - background: var(--user-name-change-requests-negative-background) !important; + background: var(--error-background-color); } li {