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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

5
app/javascript/packs/application.js
View File

@@ -15,8 +15,6 @@ require('jquery-hotkeys');
// should start looking for nodejs replacements // should start looking for nodejs replacements
importAll(require.context('../vendor', true, /\.js$/)); importAll(require.context('../vendor', true, /\.js$/));
importAll(require.context('../src/styles/base', true, /\.scss$/));
require("jquery-ui/ui/widgets/autocomplete"); require("jquery-ui/ui/widgets/autocomplete");
require("jquery-ui/ui/widgets/button"); require("jquery-ui/ui/widgets/button");
require("jquery-ui/ui/widgets/dialog"); require("jquery-ui/ui/widgets/dialog");
@@ -31,8 +29,7 @@ require("jquery-ui/themes/base/resizable.css");
require("jquery-ui/themes/base/theme.css"); require("jquery-ui/themes/base/theme.css");
importAll(require.context('../src/javascripts', true, /\.js(\.erb)?$/)); importAll(require.context('../src/javascripts', true, /\.js(\.erb)?$/));
importAll(require.context('../src/styles/common', true, /\.scss(?:\.erb)?$/)); importAll(require.context('../src/styles', true, /\.s?css(?:\.erb)?$/));
importAll(require.context('../src/styles/specific', true, /\.scss(?:\.erb)?$/));
export { default as Autocomplete } from '../src/javascripts/autocomplete.js.erb'; export { default as Autocomplete } from '../src/javascripts/autocomplete.js.erb';
export { default as Blacklist } from '../src/javascripts/blacklists.js'; export { default as Blacklist } from '../src/javascripts/blacklists.js';

24
app/javascript/src/styles/base/000_vars.scss
View File

@@ -1,7 +1,3 @@
$menu_color: #F5F5FF;
$link_color: hsl(213, 100%, 50%);
$link_hover_color: lighten($link_color, 25%);
$highlight_color: lighten($link_color, 45%);
$h1_size: 2em; $h1_size: 2em;
$h2_size: 1.5em; $h2_size: 1.5em;
$h3_size: 1.16667em; $h3_size: 1.16667em;
@@ -17,26 +13,14 @@ $h2_padding: 0.8em 0 0.25em 0;
$h3_padding: 0.8em 0 0.25em 0; $h3_padding: 0.8em 0 0.25em 0;
$h4_padding: 0.8em 0 0.25em 0; $h4_padding: 0.8em 0 0.25em 0;
$base_font_family: Verdana, Helvetica, sans-serif; $base_font_family: Verdana, Helvetica, sans-serif;
$preview_has_children_color: #0F0;
$preview_has_parent_color: #CC0;
$preview_deleted_color: #000;
$preview_pending_color: #00F;
$preview_flagged_color: #F00;
$preview_sample_warning_color: hsl(0, 100%, 90%); // light red
$preview_quality_warning_color: hsl(50, 100%, 90%); // light yellow
$note_highlight_color: $preview_pending_color;
$error_color: hsl(0, 100%, 95%); // light red
$success_color: hsl(120, 100%, 95%); // light green
@mixin animated-icon { @mixin animated-icon {
content: "►"; content: "►";
position: absolute; position: absolute;
width: 20px; width: 20px;
height: 20px; height: 20px;
color: white; color: var(--preview-icon-color);
background-color: rgba(0,0,0,0.5); background: var(--preview-icon-background);
margin: 2px; margin: 2px;
text-align: center; text-align: center;
} }
@@ -46,8 +30,8 @@ $success_color: hsl(120, 100%, 95%); // light green
position: absolute; position: absolute;
width: 20px; width: 20px;
height: 20px; height: 20px;
color: white; color: var(--preview-icon-color);
background-color: rgba(0,0,0,0.5); background: var(--preview-icon-background);
margin: 2px; margin: 2px;
text-align: center; text-align: center;
} }

2
app/javascript/src/styles/base/010_reset.scss
View File

@@ -1,7 +1,5 @@
// Source: https://github.com/FrogBot/sassy_bootstrap/blob/master/lib/_reset.sass // Source: https://github.com/FrogBot/sassy_bootstrap/blob/master/lib/_reset.sass
@import "../base/000_vars.scss";
// Reset.sass // Reset.sass
// Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an // Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an
// adapted version here that cuts out some of the reset HTML elements we will // adapted version here that cuts out some of the reset HTML elements we will

15
app/javascript/src/styles/base/020_base.scss
View File

@@ -1,7 +1,7 @@
@import "../base/000_vars.scss"; @import "../base/000_vars.scss";
body { body {
background-color: #FFF; background-color: var(--body-background-color);
font-family: $base_font_family; font-family: $base_font_family;
font-size: 87.5%; font-size: 87.5%;
line-height: 1.25em; line-height: 1.25em;
@@ -11,13 +11,6 @@ abbr[title=required] {
display: none; display: none;
} }
blockquote {
margin: 0 0 1em 0;
padding: 1em 1em 0.2em;
border: 1px solid #666;
background: #EEE;
}
code { code {
font-family: monospace; font-family: monospace;
font-size: 1.2em; font-size: 1.2em;
@@ -88,17 +81,17 @@ table tfoot {
} }
.hint { .hint {
color: #666; color: var(--hint-color);
font-style: italic; font-style: italic;
} }
.tn { .tn {
font-size: 0.8em; font-size: 0.8em;
color: gray; color: var(--translation-note-color);
} }
p.info { p.info {
color: #AAA; color: var(--info-color);
font-style: italic; font-style: italic;
font-size: 80%; font-size: 80%;
} }

10
app/javascript/src/styles/base/030_links.scss
View File

@@ -1,22 +1,20 @@
@import "../base/000_vars.scss";
a:link { a:link {
color: $link_color; color: var(--link-color);
text-decoration: none; text-decoration: none;
} }
a:visited { a:visited {
color: $link_color; color: var(--link-color);
text-decoration: none; text-decoration: none;
} }
a:hover { a:hover {
color: $link_hover_color; color: var(--link-hover-color);
text-decoration: none; text-decoration: none;
} }
a:active { a:active {
color: $link_color; color: var(--link-color);
text-decoration: none; text-decoration: none;
} }

261
app/javascript/src/styles/base/040_colors.css Normal file
View File

@@ -0,0 +1,261 @@
:root {
--body-background-color: white;
--hint-color: #666;
--translation-note-color: gray;
--info-color: #AAA;
--link-color: hsl(213, 100%, 50%);
--link-hover-color: hsl(213, 100%, 75%);
--note-highlight-color: var(--preview-pending-color);
--subnav-menu-background-color: #F5F5FF;
--responsive-menu-background-color: var(--link-hover-color);
--responsive-sidebar-submit-button-background-color: #EEE;
--responsive-sidebar-submit-button-border: 1px solid rgb(197, 197, 197);
--responsive-form-input-border: 1px solid #c5c5c5;
--user-upgrade-gold-background-color: #FFF380;
--user-upgrade-platinum-background-color: #EEE;
--user-upgrade-table-row-hover-background-color: #FEF;
--user-upgrade-cost-footnote-color: gray;
--table-header-border: 2px solid #666;
--table-header-text-color: #333;
--table-row-border: 1px solid #CCC;
--table-row-hover-background: hsl(213, 100%, 95%);
--table-even-row-background: #FAFAFA;
--preview-pending-color: #00F;
--preview-flagged-color: #F00;
--preview-deleted-color: black;
--preview-has-children-color: #0F0;
--preview-has-parent-color: #CC0;
--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);
--uploads-dropzone-border: 4xp dashed #DDD;
--uploads-dropzone-placeholder-color: #333;
--uploads-dropzone-error-border-color: hsl(0, 43%, 61%);
--uploads-dropzone-error-background-color: hsl(0, 43%, 91%);
--uploads-dropzone-success-border-color: hsl(103, 44%, 59%);
--uploads-dropzone-success-background-color: hsl(103, 44%, 89%);
--uploads-dropzone-progress-border: 1px solid #CCC;
--uploads-dropzone-progress-background-color: 1px solid #CCC;
--forum-new-topic-color: red;
--forum-locked-topic-color: gray;
--forum-level-restricted-topic-color: #F66;
--forum-deleted-topic-color: gray;
--forum-info-color: #AAA;
--forum-vote-up-color: green;
--forum-vote-meh-color: goldrenrod;
--forum-vote-down-color: red;
--forum-post-box-shadow: 1px 1px 2px #AAA;
--forum-post-border: 1px solid #AAA;
--forum-post-highlight-background-color: #FFC;
--comment-sticky-background-color: var(--subnav-menu-background-color);
--post-tooltip-border-color: #767676;
--post-tooltip-header-background-color: var(--subnav-menu-background-color);
--post-tooltip-info-color: #555;
--post-tooltip-inactive-color: #777;
--post-tooltip-scrollbar-background: #999999;
--post-tooltip-scrollbar-border: 0px none white;
--post-tooltip-scrollbar-thumb-color: #AAAAAA;
--post-tooltip-scrollbar-track-background: #EEEEEE;
--post-tooltip-scrollbar-track-border: 0px none white;
--iqdb-preview-border: 1px solid lightgrey;
--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;
--diff-list-added-color: green;
--diff-list-removed-color: red;
--diff-list-obsolete-added-color: darkGreen;
--diff-list-obsolete-removed-color: darkRed;
--wiki-page-versions-diff-del-background: #FCC;
--wiki-page-versions-diff-ins-background: #CFC;
--wiki-page-versions-version-color: #AAA;
--post-parent-notice-border-color: #C0FCC0;
--post-parent-notice-background: #D8FCD9;
--post-child-notice-border-color: #FCFCC0;
--post-child-notice-background: #FBFCD8;
--post-pending-notice-border-color: #C0C0FC;
--post-pending-notice-background: #D8D8FC;
--post-flagged-notice-border-color: #FCC0C0;
--post-flagged-notice-background: #FCD9D8;
--post-deleted-notice-border-color: #FF8C8C;
--post-deleted-notice-background: #FFA7A5;
--post-appealed-notice-border-color: #C0ECFC;
--post-appealed-notice-background: #D8F2FC;
--post-resized-notice-border-color: #E4C0FC;
--post-resized-notice-background: #EED8FC;
--post-nav-notice-background: #EEE;
--post-nav-notice-border: 1px solid #AAA;
--post-seq-nav-hover-background: rgb(250, 250, 250);
--post-artist-commentary-container-background: #F8F8F8;
--post-artist-commentary-container-border: 1px solid #CCC;
--post-artist-commentary-disabled-color: gray;
--note-body-background: #FFE;
--note-body-border: 1px solid black;
--note-box-border: 1px solid white;
--note-box-background: transparent;
--note-box-inner-border: 1px solid black;
--unsaved-note-box-inner-border: 1px solid red;
--note-preview-border: 1px solid red;
--note-preview-background: white;
--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;
--collection-pool-color: var(--general-tag-color);
--collection-pool-hover-color: var(--general-tag-hover-color);
--profile-page-header-color: #333;
--settings-page-active-tab-color: black;
--fetch-source-data-border-color: #666;
--post-mode-menu-view-background: white;
--post-mode-menu-edit-background: #5C5;
--post-mode-menu-tag-script-background: #D6D;
--post-mode-menu-add-fav-background: #FFA;
--post-mode-menu-remove-fav-background: #FFA;
--post-mode-menu-vote-up-background: #AFA;
--post-mode-menu-vote-down-background: #FAA;
--post-mode-menu-lock-rating-background: #AA3;
--post-mode-menu-lock-note-background: #3AA;
--post-mode-menu-approve-background: #48C;
--post-mode-menu-translation-background: #5CD;
--post-mode-menu-ban-background: #F33;
--tag-count-color: #CCC;
--low-post-count-color: red;
--tag-count-indicator-frown-color: red;
--tag-count-indicator-meh-color: darkkhaki;
--tag-count-indicator-smile-color: green;
--remove-favorite-button: deeppink;
--ugoira-seek-slider-background: #EEE;
--ugoira-seek-slider-progressbar-background: white;
// used for "(deleted)" messages
--inactive-color: #AAA;
// used for "page N" links in /forum_topics and /pools
--last-page-link-color: #666;
--keyboard-shortcut-color: white;
--keyboard-shortcut-background-color: #333;
// XXX unused?
--error-color: red;
--error-message-color: #A00;
--new-artist-color: #A00;
--bulk-update-request-approved-color: green;
--bulk-update-request-failed-color: red;
--dmail-preview-border-color: #CCC;
--notice-background: #FFFBBF;
--notice-border: 1px solid #CCC999;
--sign-in-link-color: #E00;
--search-box-button-color: white;
--sidebar-submit-button-color: #EEE;
--footer-border: 1px solid #EEE;
--jquery-ui-button-border: 1px solid darkgrey;
--jquery-ui-button-background: #f6f6f6;
--jquery-ui-button-hover-background: #fefefe;
--jquery-ui-button-hover-box-shadow: grey;
--jquery-ui-state-error-background: #FDDFDE;
--jquery-ui-state-error-border: 1px solid #FBC7C6;
--jquery-ui-state-highlight-background: #FDF5D9;
--jquery-ui-state-highlight-border: 1px solid #FCEEC1;
--jquery-ui-state-highlight-color: #363636;
--jquery-ui-dialog-box-shadow: 2px 2px 1px grey;
--dtext-blockquote-border: 1px solid #666;
--dtext-blockquote-background: #EEE;
--dtext-code-background: #EEE;
--dtext-expand-border: 1px inset #666;
--dtext-spoiler-color: black;
--dtext-spoiler-background-color: black;
--dtext-spoiler-hover-color: white;
--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);
--general-tag-color: var(--link-color);
--general-tag-hover-color: var(--link-hover-color);
--character-tag-color: #0A0;
--character-tag-hover-color: #6B6;
--copyright-tag-color: #A0A;
--copyright-tag-hover-color: #B6B;
--artist-tag-color: #A00;
--artist-tag-hover-color: #B66;
--meta-tag-color: #F80;
--meta-tag-hover-color: #FA6;
--selected-tag-color: white;
--user-admin-color: red;
--user-moderator-color: orange;
--user-builder-color: #6633FF;
--user-platinum-color: gray;
--user-gold-color: blue;
--user-member-color: auto;
--news-updates-background: #EEE;
--news-updates-border: 2px solid #666;
--related-tags-container-background: #EEE;
--selected-related-tag-background-color: var(--link-color);
--selected-related-tag-color: white;
}

8
app/javascript/src/styles/common/autocomplete.scss
View File

@@ -1,14 +1,12 @@
@import "../base/000_vars.scss";
.ui-autocomplete { .ui-autocomplete {
font-size: 0.9em; font-size: 0.9em;
.ui-state-active { .ui-state-active {
border: none; border: none;
margin: 0 -1px; margin: 0 -1px;
background-color: #F0F0F0; background-color: var(--autocomplete-background-color);
border-left: 1px solid #C5C5C5; border-left: 1px solid var(--autocomplete-border-color);
border-right: 1px solid #C5C5C5; border-right: 1px solid var(--autocomplete-border-color);
} }
.ui-menu-item-wrapper { .ui-menu-item-wrapper {

2
app/javascript/src/styles/common/blacklists.scss
View File

@@ -1,5 +1,3 @@
@import "../base/000_vars.scss";
#blacklist-box { #blacklist-box {
display: none; display: none;
margin-bottom: 1em; margin-bottom: 1em;

16
app/javascript/src/styles/common/diffs.scss
View File

@@ -1,43 +1,43 @@
.diff-list { .diff-list {
.added, .added a { .added, .added a {
color: green; color: var(--diff-list-added-color);
text-decoration: none; text-decoration: none;
margin-right: 0.5em; margin-right: 0.5em;
} }
.added.obsolete, .added.obsolete a { .added.obsolete, .added.obsolete a {
color: darkGreen; color: var(--diff-list-obsolete-added-color);
} }
.removed, .removed a { .removed, .removed a {
color: red; color: var(--dif-list-removed-color);
text-decoration: line-through; text-decoration: line-through;
margin-right: 0.5em; margin-right: 0.5em;
} }
.removed.obsolete, .removed.obsolete a { .removed.obsolete, .removed.obsolete a {
color: darkRed; color: var(--diff-list-obsolete-removed-color);
} }
} }
.diff-list { .diff-list {
ins, ins a { ins, ins a {
color: green; color: var(--diff-list-added-color);
text-decoration: none; text-decoration: none;
margin-right: 0.5em; margin-right: 0.5em;
} }
del, del a { del, del a {
color: red; color: var(--diff-list-removed-color);
text-decoration: line-through; text-decoration: line-through;
margin-right: 0.5em; margin-right: 0.5em;
} }
ins.obsolete, ins.obsolete a { ins.obsolete, ins.obsolete a {
color: darkGreen; color: var(--diff-list-obsolete-added-color);
} }
del.obsolete, del.obsolete a { del.obsolete, del.obsolete a {
color: darkRed; color: var(--diff-list-obsolete-removed-color);
} }
} }

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

@@ -55,18 +55,25 @@ div.prose {
font-size: 1.2em; font-size: 1.2em;
margin: 0.5em 0; margin: 0.5em 0;
padding: 0.5em 1em; padding: 0.5em 1em;
background: #EEE; background: var(--dtext-code-background-color);
white-space: pre-wrap; white-space: pre-wrap;
} }
blockquote {
margin-bottom: 1em;
padding: 1em 1em 0.2em;
border: var(--dtext-blockquote-border);
background: var(--dtext-blockquote-background);
}
code { code {
font-family: monospace; font-family: monospace;
background: #EEE; background: var(--dtext-code-background);
} }
div.expandable { div.expandable {
margin-bottom: 1em; margin-bottom: 1em;
border: 1px inset #666; border: var(--dtext-expand-border);
} }
div.expandable-header { div.expandable-header {
@@ -81,7 +88,7 @@ div.prose {
div.expandable-content { div.expandable-content {
display: none; display: none;
padding: 0.4em; padding: 0.4em;
border-top: 1px solid #666; border-top: 1px solid var(--dtext-expand-border-color);
> :last-child { > :last-child {
margin-bottom: 0; margin-bottom: 0;

18
app/javascript/src/styles/common/inline.scss
View File

@@ -1,26 +1,24 @@
@import "../base/000_vars.scss";
span.error { span.error {
display: block; display: block;
font-weight: bold; font-weight: bold;
color: red; color: var(--error-color);
} }
span.link { span.link {
color: $link_color; color: var(--link-color);
cursor: pointer; cursor: pointer;
} }
span.count { span.count {
color: #CCC; color: var(--tag-count-color);
margin-left: 0.5em; margin-left: 0.5em;
} }
kbd.key { kbd.key {
background: #333; background: var(--keyboard-shortcut-background-color);
border: 1px solid #333; border: 1px solid var(--keyboard-shortcut-background-color);
padding: 1px 6px; padding: 1px 6px;
color: white; color: var(--keyboard-shortcut-color);
/* width: 1em;*/ /* width: 1em;*/
text-align: center; text-align: center;
display: inline-block; display: inline-block;
@@ -28,9 +26,9 @@ kbd.key {
} }
span.inactive { span.inactive {
color: #AAA; color: var(--inactive-color);
} }
td a.last-page { td a.last-page {
color: #666; color: var(--last-page-link-color);
} }

32
app/javascript/src/styles/common/jquery_ui_custom.scss
View File

@@ -9,11 +9,11 @@
} }
.ui-widget-content a { .ui-widget-content a {
color: $link_color; color: var(--link-color);
} }
.ui-widget-content a:hover { .ui-widget-content a:hover {
color: $link_hover_color; color: var(--link-hover-color);
} }
div.ui-dialog { div.ui-dialog {
@@ -21,7 +21,7 @@ div.ui-dialog {
overflow: visible; overflow: visible;
font-size: 1em; font-size: 1em;
z-index: 999 !important; z-index: 999 !important;
box-shadow: 2px 2px 1px grey; box-shadow: var(--jquery-ui-dialog-box-shadow);
padding: 0; padding: 0;
.ui-dialog-titlebar { .ui-dialog-titlebar {
@@ -36,33 +36,29 @@ div.ui-dialog {
} }
.ui-state-highlight { .ui-state-highlight {
border: 1px solid #FCEEC1; border: var(--jquery-ui-state-highlight-border);
background: #FDF5D9; background: var(--jquery-ui-state-highlight-background);
color: #363636; color: var(--jquery-ui-state-highlight-color);
a, a:active, a:visited { a, a:active, a:visited {
color: $link_color; color: var(--link-color);
} }
a:hover { a:hover {
color: $link_hover_color; color: var(--link-hover-color);
} }
} }
.ui-state-error { .ui-state-error {
border: 1px solid #FBC7C6; border: var(--jquery-ui-state-error-border);
background: #FDDFDE; background: var(--jquery-ui-state-error-background);
} }
.ui-button { .ui-button {
margin: 0; margin: 0;
padding: 0.25em 1em; padding: 0.25em 1em;
background-color: #f6f6f6; border: var(--jquery-ui-button-border);
border-top: 1px solid silver; background: var(--jquery-ui-button-background);
border-left: 1px solid silver;
border-bottom: 1px solid darkgrey;
border-right: 1px solid darkgrey;
background: linear-gradient(#f6f6f6, #e5e5e5);
&.sub { &.sub {
font-size: 90%; font-size: 90%;
@@ -75,8 +71,8 @@ div.ui-dialog {
} }
.ui-button:hover { .ui-button:hover {
box-shadow: 1px 1px grey; box-shadow: var(--jquery-ui-button-hover-box-shadow);
background: linear-gradient(#fefefe, #f0f0f0); background: var(--jquery-ui-button-hover-background);
} }
.ui-front { .ui-front {

14
app/javascript/src/styles/common/main_layout.scss
View File

@@ -6,12 +6,12 @@ div#search {
div#search-box button { div#search-box button {
-webkit-appearance: button; -webkit-appearance: button;
border: 1px solid $link_color; border: 1px solid var(--link-color);
background-color: $link_color; background-color: var(--link-color);
color: #FFF; color: var(--search-box-button-color);
&:hover, &:focus { &:hover, &:focus {
border: 1px solid $link_hover_color; border: 1px solid var(--link-hover-color);
background-color: $link_hover_color; background-color: var(--link-hover-color);
} }
} }
@@ -55,7 +55,7 @@ div#page {
button[type=submit] { button[type=submit] {
padding: 2px 6px; padding: 2px 6px;
background: #EEE; background: var(--sidebar-submit-button-color);
} }
#search-box button[type=submit] { #search-box button[type=submit] {
@@ -84,7 +84,7 @@ footer#page-footer {
margin-top: 1em; margin-top: 1em;
text-align: center; text-align: center;
padding: 1em 0 1em; padding: 1em 0 1em;
border-top: 1px solid #EEE; border-top: var(--footer-border);
} }
div.clearfix { div.clearfix {

4
app/javascript/src/styles/common/news.scss
View File

@@ -1,7 +1,7 @@
div#news-updates { div#news-updates {
padding: 5px; padding: 5px;
background: #EEE; background: var(--news-updates-background);
border-bottom: 2px solid #666; border-bottom: var(--news-updates-border);
overflow: hidden; overflow: hidden;
font-size: 0.8em; font-size: 0.8em;

6
app/javascript/src/styles/common/notices.scss
View File

@@ -4,7 +4,7 @@ div.error-messages {
h1 { h1 {
font-size: 1em; font-size: 1em;
color: #A00; color: var(--error-message-color);
} }
} }
@@ -17,8 +17,8 @@ div#notice {
z-index: 100; z-index: 100;
&:not(.ui-state-error) { &:not(.ui-state-error) {
background-color: #FFFBBF; background: var(--notice-background);
border: 1px solid #CCC999; border: var(--notice-border);
} }
} }

8
app/javascript/src/styles/common/page_header.scss
View File

@@ -1,5 +1,3 @@
@import "../base/000_vars.scss";
#maintoggle { #maintoggle {
display: none; display: none;
} }
@@ -12,7 +10,7 @@ header#top {
menu { menu {
margin-top: -2px; margin-top: -2px;
background: $menu_color; background: var(--subnav-menu-background-color);
padding: 6px 20px; padding: 6px 20px;
form { form {
@@ -39,13 +37,13 @@ header#top {
background: none; background: none;
li.current a { li.current a {
background: $menu_color; background: var(--subnav-menu-background-color);
font-weight: bold; font-weight: bold;
} }
li#nav-sign-in a { li#nav-sign-in a {
font-weight: bold; font-weight: bold;
color: #e00; color: var(--sign-in-link-color);
} }
li.forum-updated a { li.forum-updated a {

12
app/javascript/src/styles/common/paginator.scss
View File

@@ -1,5 +1,3 @@
@import "../base/000_vars.scss";
div.paginator { div.paginator {
display: block; display: block;
padding: 2em 0 1em 0; padding: 2em 0 1em 0;
@@ -13,17 +11,17 @@ div.paginator {
} }
&.more { &.more {
color: grey; color: var(--paginator-ellipsis-color);
} }
a.arrow:hover { a.arrow:hover {
background: white; background: var(--paginator-arrow-background-color);
color: $link_color; color: var(--paginator-arrow-color);
} }
a:hover { a:hover {
background: $link_color; background: var(--paginator-arrow-color);
color: white; color: var(--paginator-arrow-background-color);
} }
span { span {

18
app/javascript/src/styles/common/spoiler.scss
View File

@@ -1,16 +1,8 @@
.spoiler { .spoiler, .spoiler a {
color: black; color: var(--dtext-spoiler-color);
background: black; background: var(--dtext-spoiler-background-color);
} }
.spoiler a { .spoiler:hover, .spoiler:hover a {
color: black; color: var(--dtext-spoiler-hover-color);
}
.spoiler:hover {
color: white;
}
.spoiler:hover a{
color: white;
} }

12
app/javascript/src/styles/common/tables.scss
View File

@@ -1,5 +1,3 @@
@import "../base/000_vars.scss";
table.striped { table.striped {
td, th { td, th {
padding: 4px 6px; padding: 4px 6px;
@@ -7,10 +5,10 @@ table.striped {
tbody { tbody {
tr { tr {
border-bottom: 1px solid #CCC; border-bottom: var(--table-row-border);
&:hover { &:hover {
background-color: $highlight_color; background: var(--table-row-hover-background);
} }
} }
} }
@@ -21,18 +19,18 @@ table.striped {
thead { thead {
tr { tr {
border-bottom: 2px solid #666; border-bottom: var(--table-header-border);
} }
th { th {
font-weight: bold; font-weight: bold;
text-align: left; text-align: left;
color: #333; color: var(--table-header-text-color);
} }
} }
tr:nth-child(even) { tr:nth-child(even) {
background-color: #FAFAFA; background: var(--table-even-row-background);
} }
} }

6
app/javascript/src/styles/common/tags.scss.erb
View File

@@ -1,5 +1,3 @@
@import "../base/000_vars.scss";
<% TagCategory.css_mapping.each do |category,cssmap| %> <% TagCategory.css_mapping.each do |category,cssmap| %>
.category-<%= category %> a, .category-<%= category %> a,
a.tag-type-<%= category %>, a.tag-type-<%= category %>,
@@ -16,7 +14,7 @@
} }
&.selected { &.selected {
color: white; color: var(--selected-tag-color);
} }
} }
@@ -32,7 +30,7 @@
} }
&.selected { &.selected {
color: white; color: var(--selected-tag-color);
} }
} }
<% end %> <% end %>

16
app/javascript/src/styles/common/user_styles.scss
View File

@@ -1,27 +1,23 @@
a.user-admin.with-style { a.user-admin.with-style {
color: red; color: var(--user-admin-color);
} }
a.user-moderator.with-style { a.user-moderator.with-style {
color: orange; color: var(--user-moderator-color);
}
a.user-contributor.with-style {
color: purple;
} }
a.user-builder.with-style { a.user-builder.with-style {
color: #6633FF; color: var(--user-builder-color);
} }
a.user-platinum.with-style { a.user-platinum.with-style {
color: gray; color: var(--user-platinum-color);
} }
a.user-gold.with-style { a.user-gold.with-style {
color: #0000FF; color: var(--user-gold-color);
} }
a.user-member.with-style { a.user-member.with-style {
color: auto; color: var(--user-member-color);
} }

2
app/javascript/src/styles/specific/artists.scss
View File

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

10
app/javascript/src/styles/specific/bans.scss
View File

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

6
app/javascript/src/styles/specific/bulk_update_requests.scss
View File

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

2
app/javascript/src/styles/specific/comments.scss
View File

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

2
app/javascript/src/styles/specific/dmails.scss
View File

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

18
app/javascript/src/styles/specific/dropzone.scss
View File

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

2
app/javascript/src/styles/specific/error.scss
View File

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

2
app/javascript/src/styles/specific/explore.scss
View File

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

26
app/javascript/src/styles/specific/forum.scss
View File

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

2
app/javascript/src/styles/specific/iqdb_queries.scss
View File

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

8
app/javascript/src/styles/specific/mod_queue.scss.erb
View File

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

22
app/javascript/src/styles/specific/notes.scss
View File

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

8
app/javascript/src/styles/specific/pools.scss
View File

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

4
app/javascript/src/styles/specific/post_events.scss
View File

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

4
app/javascript/src/styles/specific/post_flags.scss
View File

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

26
app/javascript/src/styles/specific/post_mode_menu.scss
View File

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

26
app/javascript/src/styles/specific/post_tooltips.scss
View File

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

4
app/javascript/src/styles/specific/post_versions.scss
View File

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

84
app/javascript/src/styles/specific/posts.scss
View File

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

8
app/javascript/src/styles/specific/related_tags.scss
View File

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

2
app/javascript/src/styles/specific/sessions.scss
View File

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

8
app/javascript/src/styles/specific/tags.scss
View File

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

6
app/javascript/src/styles/specific/user_feedback.scss
View File

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

4
app/javascript/src/styles/specific/user_name_change_requests.scss
View File

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

8
app/javascript/src/styles/specific/user_upgrades.scss
View File

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

6
app/javascript/src/styles/specific/users.scss
View File

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

6
app/javascript/src/styles/specific/wiki_page_versions.scss
View File

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

2
app/javascript/src/styles/specific/wiki_pages.scss
View File

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

15
app/javascript/src/styles/specific/z_responsive.scss
View File

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

20
config/danbooru_default_config.rb
View File

@@ -250,8 +250,8 @@ module Danbooru
"humanized" => nil, "humanized" => nil,
"relatedbutton" => "General", "relatedbutton" => "General",
"css" => { "css" => {
"color" => "$link_color", "color" => "var(--general-tag-color)",
"hover" => "$link_hover_color" "hover" => "var(--general-tag-hover-color)"
} }
}, },
"character" => { "character" => {
@@ -267,8 +267,8 @@ module Danbooru
}, },
"relatedbutton" => "Characters", "relatedbutton" => "Characters",
"css" => { "css" => {
"color" => "#0A0", "color" => "var(--character-tag-color)",
"hover" => "#6B6" "hover" => "var(--character-tag-hover-color)"
} }
}, },
"copyright" => { "copyright" => {
@@ -284,8 +284,8 @@ module Danbooru
}, },
"relatedbutton" => "Copyrights", "relatedbutton" => "Copyrights",
"css" => { "css" => {
"color" => "#A0A", "color" => "var(--copyright-tag-color)",
"hover" => "#B6B" "hover" => "var(--copyright-tag-hover-color)"
} }
}, },
"artist" => { "artist" => {
@@ -301,8 +301,8 @@ module Danbooru
}, },
"relatedbutton" => "Artists", "relatedbutton" => "Artists",
"css" => { "css" => {
"color" => "#A00", "color" => "var(--artist-tag-color)",
"hover" => "#B66" "hover" => "var(--artist-tag-hover-color)"
} }
}, },
"meta" => { "meta" => {
@@ -313,8 +313,8 @@ module Danbooru
"humanized" => nil, "humanized" => nil,
"relatedbutton" => nil, "relatedbutton" => nil,
"css" => { "css" => {
"color" => "#F80", "color" => "var(--meta-tag-color)",
"hover" => "#FA6" "hover" => "var(--meta-tag-hover-color)"
} }
} }
} }

4
postcss.config.js
View File

@@ -6,6 +6,10 @@ module.exports = {
autoprefixer: { autoprefixer: {
flexbox: 'no-2009' flexbox: 'no-2009'
}, },
// https://github.com/csstools/postcss-preset-env#importfrom
importFrom: [
'app/javascript/src/styles/base/040_colors.css'
],
stage: 3 stage: 3
}) })
] ]