css: factor out colors from main css (#4158).

This commit is contained in:
evazion
2019-09-17 00:28:41 -05:00
parent d203a543d0
commit c325bfa199
52 changed files with 519 additions and 332 deletions

View File

@@ -3,7 +3,7 @@
div#c-artists, div#excerpt {
span.new-artist {
font-weight: bold;
color: #A00;
color: var(--new-artist-color);
}
ul ul {

View File

@@ -1,19 +1,17 @@
@import "../base/000_vars.scss";
#c-bans #a-index {
tr[data-expired="true"] {
background-color: $success_color !important;
background-color: var(--success-color) !important;
&:hover {
background-color: darken($success_color, 5%) !important;
background-color: var(--success-hover-color) !important;
}
}
tr[data-expired="false"] {
background-color: $error_color !important;
background-color: var(--error-color) !important;
&:hover {
background-color: darken($error_color, 5%) !important;
background-color: var(--error-hover-color) !important;
}
}
}

View File

@@ -1,9 +1,9 @@
#c-bulk-update-requests {
s.approved {
color: green;
color: var(--bulk-update-request-approved-color);
}
s.failed {
color: red;
color: var(--bulk-update-request-rejected-color);
}
}
}

View File

@@ -12,7 +12,7 @@ div.comments-for-post {
padding: 5px;
&[data-is-sticky="true"] {
background: $menu_color;
background: var(--comment-sticky-background-color);
}
&[data-is-voted="true"] {

View File

@@ -7,7 +7,7 @@ div#c-dmails {
div#preview {
margin: 1em 0;
border: 1px solid #CCC;
border: 1px solid var(--dmail-preview-border-color);
padding: 1em;
width: 40em;

View File

@@ -1,5 +1,5 @@
#filedropzone {
border: 4px dashed #DDD;
border: var(--uploads-dropzone-border);
padding: 0;
min-height: 100px;
display: flex;
@@ -9,18 +9,18 @@
.placeholder {
font-style: italic;
color: #333;
color: var(--uploads-dropzone-place-holder-color);
height: 100%;
}
&.error {
border-color: darken(#f2dede, 30%);
background-color: #f2dede;
border-color: var(--uploads-dropzone-error-border-color);
background-color: var(--uploads-dropzone-error-background-color);
}
&.success {
border-color: darken(#dff0d8, 30%);
background-color: #dff0d8;
border-color: var(--uploads-dropzone-success-border-color);
background-color: var(--uploads-dropzone-success-background-color);
}
}
@@ -31,11 +31,11 @@
.dz-progress {
height: 20px;
width: 300px;
border: 1px solid #CCC;
background-color: var(--uploads-dropzone-progress-border);
.dz-upload {
background-color: #F5F5FF;
background-color: var(--uploads-dropzone-progress-background-color);
display: block;
height: 20px;
}
}
}

View File

@@ -2,7 +2,7 @@ ul.backtrace {
font-family: monospace;
font-size: 1.2em;
list-style-type: none;
background: #EEE;
background: var(--dtext-code-background-color);
padding: 1em;
margin-bottom: 1em;
}

View File

@@ -1,5 +1,3 @@
@import "../base/000_vars.scss";
div#c-explore-posts {
header {
text-align: center;

View File

@@ -1,32 +1,28 @@
div.list-of-forum-posts {
article {
border: 1px solid #AAA;
border: var(--forum-post-border);
margin: 1em 0em;
word-wrap: break-word;
box-shadow: 1px 1px 2px #AAA;
box-shadow: var(--forum-post-box-shadow);
a.voted {
font-weight: bold;
}
span.desc {
color: grey;
}
&:target {
background-color: #FFC;
background-color: var(--forum-post-highlight-background-color);
}
.vote-score-up {
color: green;
color: var(--forum-vote-up-color);
}
.vote-score-meh {
color: goldenrod;
color: var(--forum-vote-meh-color);
}
.vote-score-down {
color: red;
color: var(--forum-vote-down-color);
}
div.author {
@@ -64,21 +60,21 @@ div.list-of-forum-posts {
div#c-forum-topics {
span.info {
color: #AAA;
color: var(--forum-info-color);
}
span.new {
font-size: 80%;
color: red;
color: var(--forum-new-topic-color);
margin-right: 0.5em;
}
span.locked-topic {
color: gray;
color: var(--forum-locked-topic-color);
}
span.level-topic {
color: #f66;
color: var(--forum-level-restricted-topic-color);
font-weight: bold;
}
@@ -91,6 +87,6 @@ div#c-forum-topics {
tr[data-topic-is-deleted="true"] .forum-post-topic-title::after,
tr[data-is-deleted="true"] .forum-post-excerpt::after {
content: " (deleted)";
color: gray;
color: var(--forum-deleted-topic-color);
}
}

View File

@@ -3,7 +3,7 @@ div#c-iqdb-queries {
article.post-preview {
height: 180px;
width: 180px;
border: lightgrey solid 1px;
border: var(--iqdb-preview-border);
img {
margin-top: 10px;

View File

@@ -6,11 +6,11 @@ div#c-moderator-post-queues {
overflow: hidden;
&.post-pos-score {
background: rgb(230, 255, 230);
background: var(--modqueue-positive-score-background-color);
}
&.post-neg-score {
background: rgb(255, 230, 230);
background: var(--modqueue-negative-score-background-color);
}
aside {
@@ -27,13 +27,13 @@ div#c-moderator-post-queues {
<% Danbooru.config.modqueue_quality_warning_tags.each do |tag| %>
&[data-tags~="<%= tag %>"] {
background-color: $preview_quality_warning_color;
background-color: var(--modqueue-quality-warning-color);
}
<% end %>
<% Danbooru.config.modqueue_sample_warning_tags.each do |tag| %>
&[data-tags~="<%= tag %>"] {
background-color: $preview_sample_warning_color;
background-color: var(--modqueue-sample-warning-color);
}
<% end %>

View File

@@ -1,13 +1,11 @@
@import "../base/000_vars.scss";
div#note-container {
position: absolute;
z-index: 50;
div.note-body {
position: absolute;
border: 1px solid black;
background: #FFE;
border: var(--note-body-border);
background: var(--note-body-background);
min-width: 140px;
min-height: 1em;
line-height: normal;
@@ -62,22 +60,22 @@ div#note-container {
div.note-box {
position: absolute;
border: 1px solid white;
border: var(--note-box-border);
min-width: 5px;
min-height: 5px;
width: 100px;
height: 100px;
cursor: move;
background: transparent;
background: var(--note-box-background);
line-height: normal;
div.note-box-inner-border {
border: 1px solid black;
background: #FFE;
border: var(--note-box-inner-border);
background: var(--note-body-background);
}
div.note-box-inner-border.unsaved {
border: 1px solid red;
border: var(--unsaved-note-box-inner-border);
}
&.embedded {
@@ -96,17 +94,17 @@ div#note-container {
}
&.note-box-highlighted {
outline: 2px solid $note_highlight_color;
outline: 2px solid var(--note-highlight-color);
}
}
}
div#note-preview {
position: absolute;
border: 1px solid red;
border: var(--note-preview-border);
opacity: 0.6;
display: none;
background: white;
background: var(--note-preview-background);
}
div.note-edit-dialog {

View File

@@ -1,18 +1,18 @@
@import "../base/000_vars.scss";
a.pool-category-series, .pool-category-series a {
color: #A0A;
color: var(--series-pool-color);
&:hover {
color: #B6B;
color: var(--series-pool-hover-color);
}
}
a.pool-category-collection, .pool-category-collection a {
color: $link_color;
color: var(--collection-pool-color);
&:hover {
color: $link_hover_color;
color: var(--collection-pool-hover-color);
}
}

View File

@@ -1,11 +1,11 @@
div#c-post-events {
#a-index {
tr.resolved-true {
background: #DDD;
background: var(--post-events-resolved-background);
}
tr.resolved-false {
background: #FFF;
background: var(--post-events-unresolved-background);
}
}
}

View File

@@ -1,9 +1,9 @@
div#c-post-flags {
tr.resolved-true {
background: #DDD !important;
background: var(--post-events-resolved-background) !important;
}
tr.resolved-false {
background: #FFF !important;
background: var(--post-events-unresolved-background) !important;
}
}

View File

@@ -1,51 +1,51 @@
body.mode-view {
background-color: #FFF;
background-color: var(--post-mode-menu-view-background);
}
body.mode-edit {
background-color: #5C5;
background-color: var(--post-mode-menu-edit-background);
}
body.mode-tag-script {
background-color: #D6D;
background-color: var(--post-mode-menu-tag-script-background);
}
body.mode-add-fav {
background-color: #FFA;
background-color: var(--post-mode-menu-add-fav-background);
}
body.mode-remove-fav {
background-color: #FFA;
background-color: var(--post-mode-menu-remove-fav-background);
}
body.mode-vote-up {
background-color: #AFA;
background-color: var(--post-mode-menu-vote-up-background);
}
body.mode-vote-down {
background-color: #FAA;
background-color: var(--post-mode-menu-vote-down-background);
}
body.mode-lock-rating {
background-color: #AA3;
background-color: var(--post-mode-menu-lock-rating-background);
}
body.mode-lock-note {
background-color: #3AA;
background-color: var(--post-mode-menu-lock-note-background);
}
body.mode-approve {
background-color: #48C;
background-color: var(--post-mode-menu-approve-background);
}
body.mode-translation {
background-color: #5CD;
background-color: var(--post-mode-menu-translation-background);
}
body.mode-ban {
background-color: #F33;
background-color: var(--post-mode-menu-ban-background);
}
#page, #top, #page-footer {
background-color: white;
background-color: var(--body-background-color);
}

View File

@@ -1,5 +1,3 @@
@import "../base/000_vars.scss";
$tooltip-line-height: 16px;
$tooltip-body-height: $tooltip-line-height * 6; // 6 lines high.
$tooltip-width: 164px * 3 - 10; // 3 thumbnails wide.
@@ -16,31 +14,31 @@ $tooltip-width: 164px * 3 - 10; // 3 thumbnails wide.
}
&::-webkit-scrollbar-thumb {
background: #999999;
border: 0px none #FFFFFF;
background: var(--post-tooltip-scrollbar-background);
border: none;
border-radius: 0px;
}
&::-webkit-scrollbar-thumb:hover {
background: #AAAAAA;
background: var(--post-tooltip-scrollbar-thumb-color);
}
&::-webkit-scrollbar-thumb:active {
background: #AAAAAA;
background: var(--post-tooltip-scrollbar-thumb-color);
}
&::-webkit-scrollbar-track {
background: #EEEEEE;
border: 0px none #ffffff;
background: var(--post-tooltip-scrollbar-track-background);
border: none;
border-radius: 0px;
}
&::-webkit-scrollbar-track:hover {
background: #EEEEEE;
background: var(--post-tooltip-scrollbar-track-background);
}
&::-webkit-scrollbar-track:active {
background: #EEEEEE;
background: var(--post-tooltip-scrollbar-track-background);
}
&::-webkit-scrollbar-corner {
@@ -55,7 +53,7 @@ $tooltip-width: 164px * 3 - 10; // 3 thumbnails wide.
box-sizing: border-box;
font-size: 11px;
line-height: $tooltip-line-height;
border-color: #767676;
border-color: var(--post-tooltip-border-color);
.qtip-content {
padding: 0;
@@ -75,7 +73,7 @@ $tooltip-width: 164px * 3 - 10; // 3 thumbnails wide.
}
.post-tooltip-header {
background-color: $menu_color;
background-color: var(--post-tooltip-header-background-color);
display: flex;
white-space: nowrap;
overflow: hidden;
@@ -100,14 +98,14 @@ $tooltip-width: 164px * 3 - 10; // 3 thumbnails wide.
.post-tooltip-info {
margin-left: 0.5em;
color: #555;
color: var(--post-tooltip-info-color);
font-size: 10px;
}
}
&:not(:hover) {
a, span {
color: #777 !important;
color: var(--post-tooltip-inactive-color) !important;
}
}

View File

@@ -1,9 +1,7 @@
@import "../base/000_vars.scss";
div#c-post-versions {
div#a-index {
tr.hilite {
background: $highlight_color;
background: var(--table-row-hover-color);
}
}
}

View File

@@ -76,78 +76,78 @@ article.post-preview {
}
&.post-status-has-children img {
border-color: $preview_has_children_color;
border-color: var(--preview-has-children-color);
}
&.post-status-has-parent img {
border-color: $preview_has_parent_color;
border-color: var(--preview-has-parent-color);
}
&.post-status-has-children.post-status-has-parent img {
border-color: $preview_has_children_color $preview_has_parent_color $preview_has_parent_color $preview_has_children_color;
border-color: var(--preview-has-children-color) var(--preview-has-parent-color) var(--preview-has-parent-color) var(--preview-has-children-color);
}
&.post-status-deleted img {
border-color: $preview_deleted_color;
border-color: var(--preview-deleted-color);
}
&.post-status-has-children.post-status-deleted img {
border-color: $preview_has_children_color $preview_deleted_color $preview_deleted_color $preview_has_children_color;
border-color: var(--preview-has-children-color) var(--preview-deleted-color) var(--preview-deleted-color) var(--preview-has-children-color);
}
&.post-status-has-parent.post-status-deleted img {
border-color: $preview_has_parent_color $preview_deleted_color $preview_deleted_color $preview_has_parent_color;
border-color: var(--preview-has-parent-color) var(--preview-deleted-color) var(--preview-deleted-color) var(--preview-has-parent-color);
}
&.post-status-has-children.post-status-has-parent.post-status-deleted img {
border-color: $preview_has_children_color $preview_deleted_color $preview_deleted_color $preview_has_parent_color;
border-color: var(--preview-has-children-color) var(--preview-deleted-color) var(--preview-deleted-color) var(--preview-has-parent-color);
}
/* Pending and flagged posts have blue borders (except in the modqueue). */
&.post-status-pending:not(.mod-queue-preview) img,
&.post-status-flagged:not(.mod-queue-preview) img {
border-color: $preview_pending_color;
border-color: var(--preview-pending-color);
}
&.post-status-has-children.post-status-pending:not(.mod-queue-preview) img,
&.post-status-has-children.post-status-flagged:not(.mod-queue-preview) img {
border-color: $preview_has_children_color $preview_pending_color $preview_pending_color $preview_has_children_color;
border-color: var(--preview-has-children-color) var(--preview-pending-color) var(--preview-pending-color) var(--preview-has-children-color);
}
&.post-status-has-parent.post-status-pending:not(.mod-queue-preview) img,
&.post-status-has-parent.post-status-flagged:not(.mod-queue-preview) img {
border-color: $preview_has_parent_color $preview_pending_color $preview_pending_color $preview_has_parent_color;
border-color: var(--preview-has-parent-color) var(--preview-pending-color) var(--preview-pending-color) var(--preview-has-parent-color);
}
&.post-status-has-children.post-status-has-parent.post-status-pending:not(.mod-queue-preview) img,
&.post-status-has-children.post-status-has-parent.post-status-flagged:not(.mod-queue-preview) img {
border-color: $preview_has_children_color $preview_pending_color $preview_pending_color $preview_has_parent_color;
border-color: var(--preview-has-children-color) var(--preview-pending-color) var(--preview-pending-color) var(--preview-has-parent-color);
}
}
/* Flagged posts have red borders for approvers. */
body[data-user-can-approve-posts="true"] .post-preview {
&.post-status-flagged img {
border-color: $preview_flagged_color;
border-color: var(--preview-flagged-color);
}
&.post-status-has-children.post-status-flagged img {
border-color: $preview_has_children_color $preview_flagged_color $preview_flagged_color $preview_has_children_color;
border-color: var(--preview-has-children-color) var(--preview-flagged-color) var(--preview-flagged-color) var(--preview-has-children-color);
}
&.post-status-has-parent.post-status-flagged img {
border-color: $preview_has_parent_color $preview_flagged_color $preview_flagged_color $preview_has_parent_color;
border-color: var(--preview-has-parent-color) var(--preview-flagged-color) var(--preview-flagged-color) var(--preview-has-parent-color);
}
&.post-status-has-children.post-status-has-parent.post-status-flagged img {
border-color: $preview_has_children_color $preview_flagged_color $preview_flagged_color $preview_has_parent_color;
border-color: var(--preview-has-children-color) var(--preview-flagged-color) var(--preview-flagged-color) var(--preview-has-parent-color);
}
}
.post-preview.current-post {
background-color: rgba(0,0,0,0.1);
background-color: var(--preview-current-post-background);
}
#has-parent-relationship-preview, #has-children-relationship-preview {
@@ -163,12 +163,12 @@ body[data-user-can-approve-posts="true"] .post-preview {
}
.post-count {
color: #CCC;
color: var(--tag-count-color);
margin-left: 0.2em;
}
.low-post-count {
color: red;
color: var(--low-post-count-color);
}
div#c-posts {
@@ -186,7 +186,7 @@ div#c-posts {
}
#remove-fav-button i.fa-heart {
color: deeppink;
color: var(--remove-favorite-button);
}
#remove-fav-button.animate i {
@@ -206,10 +206,10 @@ div#c-posts {
margin-top: 0.5em;
float: right;
overflow: visible;
background: #EEE;
background: var(--ugoira-seek-slider-background);
.ui-progressbar-value {
background: white;
background: var(--ugoira-seek-slider-progressbar-background);
}
}
@@ -251,46 +251,46 @@ div#c-posts {
}
&.notice-parent {
border-color: #C0FCC0;
background: #D8FCD9;
border-color: var(--post-parent-notice-border-color);
background: var(--post-parent-notice-background);
}
&.notice-child {
border-color: #FCFCC0;
background: #FBFCD8;
border-color: var(--post-child-notice-border-color);
background: var(--post-child-notice-background);
}
&.notice-pending {
border-color: #C0C0FC;
background: #D8D8FC;
border-color: var(--post-pending-notice-border-color);
background: var(--post-pending-notice-background);
}
&.notice-flagged {
border-color: #FCC0C0;
background: #FCD9D8;
border-color: var(--post-flagged-notice-border-color);
background: var(--post-flagged-notice-background);
}
&.notice-deleted {
border-color: #FF8C8C;
background: #FFA7A5;
border-color: var(--post-deleted-notice-border-color);
background: var(--post-deleted-notice-background);
}
&.notice-appealed {
border-color: #C0ECFC;
background: #D8F2FC;
border-color: var(--post-appealed-notice-border-color);
background: var(--post-appealed-notice-background);
}
&.notice-resized {
border-color: #E4C0FC;
background: #EED8FC;
border-color: var(--post-resized-notice-border-color);
background: var(--post-resized-notice-background);
}
}
div.nav-notice {
padding: 0.5em;
margin: 1em 0;
background: #EEE;
border: 1px solid #AAA;
background: var(--post-nav-notice-background);
border: var(--post-nav-notice-border);
position: relative;
p {
@@ -416,7 +416,7 @@ div#c-posts {
}
&:hover {
background: rgb(250, 250, 250);
background: var(--post-seq-nav-hover-background);
}
}
}
@@ -433,9 +433,9 @@ div#c-posts {
}
#artist-commentary {
border: 1px solid #CCC;
border: var(--post-artist-commentary-container-border);
border-radius: 8px;
background-color: #F8F8F8;
background: var(--post-artist-commentary-container-background);
margin-top: 1em;
padding: 0.5em;
@@ -445,7 +445,7 @@ div#c-posts {
}
.disabled {
color: gray;
color: var(--post-artist-commentary-disabled-color);
}
}
}
@@ -473,7 +473,7 @@ div#c-posts, div#c-uploads {
border-radius: 4px;
margin: 1em 0;
padding: 1em;
border: 1px solid #666;
border: 1px solid var(--fetch-source-data-border-color);
&:not(.loading) #source-info-loading { display: none; }
&.loading #source-info-content { display: none; }

View File

@@ -1,5 +1,3 @@
@import "../base/000_vars.scss";
div#related-tags-container {
&.visible a#show-related-tags-link,
&.hidden a#hide-related-tags-link,
@@ -12,7 +10,7 @@ div.related-tags {
width: 100%;
margin-bottom: 1em;
padding: 1em;
background: #EEE;
background: var(--related-tags-container-background);
overflow: auto;
border-radius: 4px;
display: flex;
@@ -52,8 +50,8 @@ div.related-tags {
}
a.selected {
background-color: $link_color;
color: white;
background: var(--selected-related-tag-background-color);
color: var(--selected-related-tag-color);
}
}
}

View File

@@ -1,5 +1,3 @@
@import "../base/000_vars.scss";
div#c-sessions {
div#a-new {
label#remember-label {

View File

@@ -30,7 +30,7 @@ div#c-tags {
justify-self: end;
.count {
color: gray;
color: var(--tag-count-color);
text-decoration: italic;
margin-left: 0.25em;
padding-bottom: 0.2em;
@@ -42,15 +42,15 @@ div#c-tags {
}
.fa-frown {
color: red;
color: var(--tag-count-indicator-frown-color);
}
.fa-meh {
color: darkkhaki;
color: var(--tag-count-indicator-meh-color);
}
.fa-smile {
color: green;
color: var(--tag-count-indicator-smile-color);
}
}
}

View File

@@ -1,14 +1,14 @@
div#c-user-feedbacks, div#c-moderator-dashboards div#col2 {
.feedback-category-positive {
background: #DDFFDD !important;
background: var(--user-feedback-positive-background-color);
}
.feedback-category-negative {
background: #FFDDDD !important;
background: var(--user-feedback-negative-background-color);
}
.feedback-category-neutral {
background: #FFFFFF !important;
background: var(--user-feedback-neutral-background-color);
}
#negative-policy {

View File

@@ -1,10 +1,10 @@
#c-user-name-change-requests {
.feedback-category-positive {
background: #DDFFDD !important;
background: var(--user-name-change-requests-positive-background) !important;
}
.feedback-category-negative {
background: #FFDDDD !important;
background: var(--user-name-change-requests-negative-background) !important;
}
li {

View File

@@ -26,11 +26,11 @@ div#c-user-upgrades {
}
colgroup#gold {
background-color: #FFF380;
background-color: var(--user-upgrade-gold-background-color);
}
colgroup#platinum {
background-color: #eee;
background-color: var(--user-upgrade-platinum-background-color);
}
td, th {
@@ -41,13 +41,13 @@ div#c-user-upgrades {
tbody {
tr:hover {
background-color: #FEF;
background-color: var(--user-upgrade-table-row-hover-background-color);
}
}
p.cost-footnote {
font-size: 80%;
color: gray;
color: var(--user-upgrade-cost-footnote-color);
margin: 0;
}
}

View File

@@ -1,10 +1,8 @@
@import "../base/000_vars.scss";
div#c-users {
div#a-show {
div.box {
h2, h3 {
color: #333;
color: var(--profile-page-header-color);
}
margin-bottom: 2em;
@@ -57,7 +55,7 @@ div#c-users {
}
.active {
color: black;
color: var(--settings-page-active-tab-color);
}
}

View File

@@ -1,12 +1,12 @@
div#c-wiki-page-versions {
#a-diff {
del {
background: #FCC;
background: var(--wiki-page-versions-diff-del-background);
text-decoration: none;
}
ins {
background: #CFC;
background: var(--wiki-page-versions-diff-ins-background);
text-decoration: none;
}
}
@@ -19,7 +19,7 @@ div#c-wiki-page-versions {
#a-show {
span.version {
color: #AAA;
color: var(--wiki-page-versions-version-color);
}
}
}

View File

@@ -9,7 +9,7 @@ div#c-wiki-pages {
}
.wiki-other-name {
background-color: #EEE;
background-color: var(--wiki-page-other-name-background-color);
padding: 3px;
border-radius: 3px;
}

View File

@@ -38,10 +38,10 @@
button[type=submit] {
font-size: 1.2em;
background-color: #EEE;
background-color: var(--responsive-sidebar-submit-button-background-color);
height: 42px;
padding: 2px 10px;
border: 1px solid rgb(197, 197, 197);
border: var(--responsive-sidebar-submit-button-border);
}
}
@@ -74,11 +74,6 @@
top: 2vw;
right: 3vw;
font-size: 2em;
&.toggler-active {
background-color: lighten($link_color, 25%);
color: #000;
}
}
/* Make the quick search box in the navbar full width. */
@@ -94,12 +89,12 @@
input[type=text] {
vertical-align: top;
font-size: 24pt;
border: 1px solid #c5c5c5;
border: var(--responsive-form-input-border);
}
textarea {
vertical-align: top;
border: 1px solid #c5c5c5;
border: var(--responsive-form-input-border);
}
input[type=submit] {
@@ -245,7 +240,7 @@
}
header#top menu.main {
background-color: lighten($link_color, 25%);
background-color: var(--responsive-menu-background-color);
padding: 5px 10px;
}