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

css: rework color scheme to use new color palette.

Browse Source 
Add a new color palette and rework all site colors (both light mode and dark mode) to
use the new palette.

This ensures that colors are used consistently, from a carefully designed color palette,
instead of being chosen at random.

Before, colors in light mode were chosen on an ad-hoc basis, which resulted in a lot of
random colors and inconsistent design.

The new palette has 7 hues: red, orange, yellow, green, blue, azure (a lighter blue), and
purple. There's also a greyscale. Each hue has 10 shades of brightness, which (including
grey) gives us 80 total colors.

Colors are named like this:

    var(--red-0);    /* very light red */
    var(--red-2);    /* light red */
    var(--red-5);    /* medium red */
    var(--red-7);    /* dark red */
    var(--red-9);    /* very dark red */
    var(--green-7);  /* dark green */
    var(--blue-5);   /* medium blue */
    var(--purple-3); /* light purple */
                     /* etc */

The color palette is designed to meet the following criteria:

* To have close equivalents to the main colors used in the old color scheme,
  especially tag colors, so that changes to major colors are minimized.
* To produce a set of colors that can be used as as main text colors, as background
  colors, and as accent colors, both in light mode and dark mode.
* To ensure that colors at the same brightness level have the same perceived brightness.
  Green-4, blue-4, red-4, purple-4, etc should all have the same brightness and contrast
  ratios. This way colors look balanced. This is actually a difficult problem, because human
  color perception is non-linear, so you can't just scale brightness values linearly.

There's a color palette test page at https://danbooru.donmai/static/colors

Notable changes to colors in light mode:

* Username colors are the same as tag colors.
* Copyright tags are a deeper purple.
* Builders are a deeper purple (fixes #4626).
* Moderators are green.
* Gold users are orange.
* Parent borders are a darker green.
* Child borders are a darker orange.
* Unsaved notes have a thicker red border.
* Selected notes have a thicker blue (not green) border.
This commit is contained in:
evazion
2021-02-21 02:21:42 -06:00
parent b598a11f02
commit 1c1d784547
20 changed files with 562 additions and 362 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -65,7 +65,7 @@ img {
input, select, textarea {
background: var(--form-input-background);
border: var(--form-input-border);
border: 1px solid var(--form-input-border-color);
color: var(--form-input-text-color);
padding-left: 0.25em;
font: var(--body-font);
@@ -112,7 +112,7 @@ table tfoot {
}
details {
border-bottom: 1px solid var(--details-border);
border-bottom: 1px solid var(--details-border-color);
summary {
cursor: pointer;

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

@@ -1,442 +1,502 @@
:root {
--body-background-color: white;
html {
/*
* Generated by app/logical/color_palette.rb.
* See https://danbooru.donmai.us/static/colors.
*
* <%= ColorPalette.css_rules %>
* bin/rails runner "puts ColorPalette.css_rules"
*/
--text-color: hsl(0, 0%, 15%);
--inverse-text-color: white;
--muted-text-color: hsl(0, 0%, 55%);
--header-color: hsl(0, 0%, 15%);
--grey-0: #f6f6f8; /* hsluv(265, 17.5, 97.0) */
--grey-1: #e8e8ec; /* hsluv(265, 17.5, 92.0) */
--grey-2: #d1d1da; /* hsluv(265, 17.5, 84.0) */
--grey-3: #ababbc; /* hsluv(265, 17.5, 70.5) */
--grey-4: #9192a7; /* hsluv(265, 17.5, 61.0) */
--grey-5: #777892; /* hsluv(265, 17.5, 51.2) */
--grey-6: #5b5c79; /* hsluv(265, 17.5, 40.0) */
--grey-7: #3f4058; /* hsluv(265, 17.5, 28.0) */
--grey-8: #2c2d3f; /* hsluv(265, 17.5, 19.0) */
--grey-9: #1e1e2c; /* hsluv(265, 17.5, 12.0) */
--red-0: #fff4f4; /* hsluv(12, 100, 97.0) */
--red-1: #fbe3e3; /* hsluv(12, 80, 92.0) */
--red-2: #ffc3c3; /* hsluv(12, 100, 84.0) */
--red-3: #ff8a8b; /* hsluv(12, 100, 70.5) */
--red-4: #ff5a5b; /* hsluv(12, 100, 61.0) */
--red-5: #ed2426; /* hsluv(12, 90, 51.2) */
--red-6: #c00004; /* hsluv(12, 100, 40.0) */
--red-7: #861011; /* hsluv(12, 90, 28.0) */
--red-8: #5c1313; /* hsluv(12, 75, 19.0) */
--red-9: #391313; /* hsluv(12, 50, 12.0) */
--orange-0: #fff4f0; /* hsluv(37, 100, 97.0) */
--orange-1: #ffe2d5; /* hsluv(37, 100, 92.0) */
--orange-2: #ffc5a5; /* hsluv(37, 100, 84.0) */
--orange-3: #fd9200; /* hsluv(37, 100, 70.5) */
--orange-4: #d97c00; /* hsluv(37, 100, 61.0) */
--orange-5: #b56700; /* hsluv(37, 100, 51.2) */
--orange-6: #8d4f00; /* hsluv(37, 100, 40.0) */
--orange-7: #653700; /* hsluv(37, 100, 28.0) */
--orange-8: #482500; /* hsluv(37, 100, 19.0) */
--orange-9: #331900; /* hsluv(37, 100, 12.0) */
--yellow-0: #fcf6ea; /* hsluv(68, 60, 97.0) */
--yellow-1: #f7e7c3; /* hsluv(68, 60, 92.0) */
--yellow-2: #ead084; /* hsluv(68, 60, 84.0) */
--yellow-3: #ccaa00; /* hsluv(68, 100, 70.5) */
--yellow-4: #ae9100; /* hsluv(68, 100, 61.0) */
--yellow-5: #917800; /* hsluv(68, 100, 51.2) */
--yellow-6: #705d00; /* hsluv(68, 100, 40.0) */
--yellow-7: #504100; /* hsluv(68, 100, 28.0) */
--yellow-8: #382d00; /* hsluv(68, 100, 19.0) */
--yellow-9: #271f04; /* hsluv(68, 90, 12.0) */
--green-0: #edfaee; /* hsluv(130, 40, 97.0) */
--green-1: #cbf2ce; /* hsluv(130, 40, 92.0) */
--green-2: #93e49a; /* hsluv(130, 50, 84.0) */
--green-3: #35c64a; /* hsluv(130, 90, 70.5) */
--green-4: #00ab2c; /* hsluv(130, 100, 61.0) */
--green-5: #008e23; /* hsluv(130, 100, 51.2) */
--green-6: #006e19; /* hsluv(130, 100, 40.0) */
--green-7: #004e0f; /* hsluv(130, 100, 28.0) */
--green-8: #003708; /* hsluv(130, 100, 19.0) */
--green-9: #002604; /* hsluv(130, 100, 12.0) */
--azure-0: #f1f7ff; /* hsluv(242, 100, 97.0) */
--azure-1: #d9eaff; /* hsluv(242, 100, 92.0) */
--azure-2: #afd5ff; /* hsluv(242, 100, 84.0) */
--azure-3: #4bb4ff; /* hsluv(242, 100, 70.5) */
--azure-4: #009be6; /* hsluv(242, 100, 61.0) */
--azure-5: #0081c0; /* hsluv(242, 100, 51.2) */
--azure-6: #006496; /* hsluv(242, 100, 40.0) */
--azure-7: #00466b; /* hsluv(242, 100, 28.0) */
--azure-8: #00314d; /* hsluv(242, 100, 19.0) */
--azure-9: #002237; /* hsluv(242, 100, 12.0) */
--blue-0: #f4f6ff; /* hsluv(257, 100, 97.0) */
--blue-1: #e1e8ff; /* hsluv(257, 100, 92.0) */
--blue-2: #c3d0ff; /* hsluv(257, 100, 84.0) */
--blue-3: #8caaff; /* hsluv(257, 100, 70.5) */
--blue-4: #5d8fff; /* hsluv(257, 100, 61.0) */
--blue-5: #0075f8; /* hsluv(257, 100, 51.2) */
--blue-6: #005ac3; /* hsluv(257, 100, 40.0) */
--blue-7: #003f8d; /* hsluv(257, 100, 28.0) */
--blue-8: #002c66; /* hsluv(257, 100, 19.0) */
--blue-9: #001e4a; /* hsluv(257, 100, 12.0) */
--purple-0: #f9f5ff; /* hsluv(282, 100, 97.0) */
--purple-1: #ece5f8; /* hsluv(282, 70, 92.0) */
--purple-2: #ddc9fb; /* hsluv(282, 90, 84.0) */
--purple-3: #c797ff; /* hsluv(282, 100, 70.5) */
--purple-4: #b871ff; /* hsluv(282, 100, 61.0) */
--purple-5: #ab3fff; /* hsluv(282, 100, 51.2) */
--purple-6: #9000df; /* hsluv(282, 100, 40.0) */
--purple-7: #6700a1; /* hsluv(282, 100, 28.0) */
--purple-8: #421765; /* hsluv(282, 80, 19.0) */
--purple-9: #2f0e49; /* hsluv(282, 80, 12.0) */
--link-color: hsl(213, 100%, 50%);
--link-hover-color: hsl(213, 100%, 75%);
--white: #FFFFFF;
--black: #000000;
}
--error-background-color: hsl(0, 100%, 95%); /* light red */
--success-background-color: hsl(120, 100%, 95%); /* light green */
--warning-background-color: hsl(50, 100%, 93%); /* light yellow */
--target-background: #FFC;
html {
--body-background-color: var(--white);
--text-color: var(--black);
--subnav-menu-background-color: #F5F5FF;
--inverse-text-color: var(--white);
--muted-text-color: var(--grey-4);
--header-color: var(--grey-9);
--link-color: var(--blue-5);
--link-hover-color: var(--blue-3);
--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);
--error-background-color: var(--red-1);
--success-background-color: var(--green-0);
--target-background: var(--yellow-0);
--subnav-menu-background-color: var(--blue-0);
--responsive-menu-background-color: var(--blue-1);
--form-input-text-color: var(--text-color);
--form-input-background: var(--body-background-color);
--form-input-border: 1px solid #CCC;
--form-input-placeholder-text-color: grey;
--form-input-validation-error-border-color: red;
--form-input-border-color: var(--grey-2);
--form-input-placeholder-text-color: var(--grey-4);
--form-input-validation-error-border-color: var(--red-4);
--form-button-text-color: var(--form-input-text-color);
--form-button-background: #EEE;
--form-button-border: var(--form-input-border);
--form-button-hover-background: #F5F5F5;
--form-button-hover-box-shadow: 0 0 2px grey;
--form-button-active-background: #DDD;
--form-button-active-border: var(--form-button-border);
--form-button-active-color: var(--form-button-text-color);
--button-primary-text-color: white;
--form-button-text-color: var(--text-color);
--form-button-background: var(--grey-1);
--form-button-border-color: var(--grey-2);
--form-button-hover-background: var(--grey-0);
--form-button-hover-box-shadow-color: var(--grey-5);
--form-button-active-background: var(--grey-2);
--button-primary-text-color: var(--white);
--button-primary-background-color: var(--link-color);
--button-primary-hover-background-color: hsl(213, 100%, 40%);
--button-primary-disabled-color: grey;
--button-primary-hover-background-color: var(--link-hover-color);
--button-primary-disabled-color: var(--grey-5);
--button-outline-primary-color: var(--link-color);
--quick-search-form-background: var(--body-background-color);
--user-upgrade-basic-background-color: #F5F5FF;
--user-upgrade-gold-background-color: #FFF380;
--user-upgrade-platinum-background-color: #EEE;
--user-upgrade-basic-background-color: var(--blue-0);
--user-upgrade-gold-background-color: var(--yellow-1);
--user-upgrade-platinum-background-color: var(--blue-1);
--table-header-border: 2px solid #666;
--table-row-border: 1px solid #CCC;
--table-row-hover-background: hsl(213, 100%, 95%);
--table-even-row-background: #FAFAFA;
--table-header-border-color: var(--grey-2);
--table-row-border-color: var(--grey-2);
--table-row-hover-background: var(--blue-1);
--table-even-row-background: var(--grey-0);
--preview-pending-color: #00F;
--preview-flagged-color: #F00;
--preview-deleted-color: black;
--preview-has-children-color: #0F0;
--preview-has-parent-color: #CC0;
--preview-pending-color: var(--blue-5);
--preview-flagged-color: var(--red-4);
--preview-deleted-color: var(--grey-9);
--preview-has-children-color: var(--green-3);
--preview-has-parent-color: var(--orange-3);
--preview-icon-color: white;
--preview-icon-color: var(--inverse-text-color);
--preview-icon-background: rgba(0, 0, 0, 0.5);
--modqueue-tag-warning-color: var(--error-background-color);
--modqueue-tag-warning-color: var(--red-1);
--uploads-dropzone-background: #EEE;
--uploads-dropzone-background: var(--grey-1);
--uploads-dropzone-progress-bar-foreground-color: var(--link-color);
--uploads-dropzone-progress-bar-background-color: var(--link-hover-color);
--forum-vote-up-color: green;
--forum-vote-meh-color: goldenrod;
--forum-vote-down-color: red;
--forum-topic-status-new-color: hsla(0, 50%, 55%, 1);
--forum-topic-status-pending-color: hsla(210, 25%, 55%, 1);
--forum-topic-status-approved-color: hsla(120, 25%, 55%, 1);
--forum-topic-status-rejected-color: hsla(0, 25%, 55%, 1);
--forum-vote-up-color: var(--green-5);
--forum-vote-meh-color: var(--orange-3);
--forum-vote-down-color: var(--red-5);
--moderation-report-text-color: red;
--moderation-report-background-color: var(--error-background-color);
--forum-topic-status-new-color: var(--red-4);
--forum-topic-status-pending-color: var(--azure-5);
--forum-topic-status-approved-color: var(--green-4);
--forum-topic-status-rejected-color: var(--red-4);
--comment-sticky-background-color: var(--subnav-menu-background-color);
--moderation-report-text-color: var(--red-5);
--moderation-report-background-color: var(--red-1);
--details-border: #DDD;
--comment-sticky-background-color: var(--blue-0);
--post-tooltip-background-color: var(--body-background-color);
--post-tooltip-border-color: hsla(210, 100%, 3%, 0.15);
--post-tooltip-box-shadow: 0 4px 14px -2px hsla(210, 100%, 3%, 0.10);
--post-tooltip-header-background-color: var(--subnav-menu-background-color);
--post-tooltip-info-color: #555;
--post-tooltip-scrollbar-background: #999999;
--post-tooltip-scrollbar-border: 0 none white;
--post-tooltip-scrollbar-thumb-color: #AAAAAA;
--post-tooltip-scrollbar-track-background: #EEEEEE;
--post-tooltip-scrollbar-track-border: 0 none white;
--post-tooltip-border-color: var(--grey-2);
--post-tooltip-box-shadow-color: rgba(0, 0, 0, 0.15);
--post-tooltip-header-background-color: var(--blue-0);
--post-tooltip-info-color: var(--muted-text-color);
--user-tooltip-positive-feedback-color: orange;
--user-tooltip-negative-feedback-color: red;
--post-tooltip-scrollbar-background: var(--grey-4);
--post-tooltip-scrollbar-thumb-color: var(--grey-5);
--post-tooltip-scrollbar-track-background: var(--grey-1);
--user-tooltip-positive-feedback-color: var(--orange-3);
--user-tooltip-negative-feedback-color: var(--red-5);
--preview-current-post-background: rgba(0, 0, 0, 0.1);
--autocomplete-selected-background-color: var(--subnav-menu-background-color);
--autocomplete-border: 1px solid #CCC;
--autocomplete-selected-background-color: var(--blue-0);
--autocomplete-border-color: var(--grey-2);
--autocomplete-tag-autocorrect-underline: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAHElEQVQYV2NkQAL/GRj+M4IJBgY4zQhSABMEsQHMOAgCT5YN9gAAAABJRU5ErkJggg==);
--diff-list-added-color: green;
--diff-list-removed-color: red;
--diff-list-obsolete-added-color: darkGreen;
--diff-list-obsolete-removed-color: darkRed;
--diff-list-added-color: var(--green-5);
--diff-list-removed-color: var(--red-5);
--diff-list-obsolete-added-color: var(--green-7);
--diff-list-obsolete-removed-color: var(--red-7);
--wiki-page-versions-diff-del-background: #FCC;
--wiki-page-versions-diff-ins-background: #CFC;
--wiki-page-versions-diff-del-background: var(--red-2);
--wiki-page-versions-diff-ins-background: var(--green-2);
--post-notice-border: 1px solid #DDD;
--post-parent-notice-background: var(--success-background-color);
--post-child-notice-background: var(--warning-background-color);
--post-pending-notice-background: #D8D8FC;
--post-banned-notice-background: var(--error-background-color);
--post-deleted-notice-background: var(--error-background-color);
--post-resized-notice-background: #EED8FC;
--post-search-notice-background: #EEE;
--post-notice-border-color: var(--grey-1);
--post-parent-notice-background: var(--green-0);
--post-child-notice-background: var(--yellow-0);
--post-pending-notice-background: var(--blue-0);
--post-banned-notice-background: var(--red-1);
--post-deleted-notice-background: var(--red-1);
--post-resized-notice-background: var(--purple-1);
--post-search-notice-background: var(--grey-0);
--post-artist-commentary-container-background: #F8F8F8;
--post-artist-commentary-container-border: 1px solid #CCC;
--post-artist-commentary-container-background: var(--grey-0);
--post-artist-commentary-container-border-color: var(--grey-1);
--note-body-background: #FFE;
--note-body-text-color: var(--text-color);
--note-body-border: 1px solid black;
--note-box-border: 1px solid black;
--note-body-text-color: var(--black);
--note-body-border-color: var(--black);
--note-box-border-color: var(--black);
--note-box-shadow: 0 0 0 1px white;
--unsaved-note-box-border: 1px solid red;
--movable-note-box-border: 1px solid green;
--note-preview-border: 1px solid red;
--note-preview-background: white;
--note-highlight-color: blue;
--unsaved-note-box-border-color: var(--red-4);
--movable-note-box-border-color: var(--blue-5);
--note-preview-border-color: var(--red-4);
--note-preview-background: var(--note-body-background);
--note-highlight-color: var(--blue-5);
--note-tn-color: var(--muted-text-color);
--series-pool-color: #A0A;
--series-pool-hover-color: #B6B;
--series-pool-color: var(--copyright-tag-color);
--series-pool-hover-color: var(--copyright-tag-hover-color);
--collection-pool-color: var(--general-tag-color);
--collection-pool-hover-color: var(--general-tag-hover-color);
--fetch-source-data-border: 1px solid #666;
--fetch-source-data-border-color: var(--grey-2);
--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-translation-background: #5CD;
--post-mode-menu-edit-background: var(--green-2);
--post-mode-menu-tag-script-background: var(--purple-2);
--post-mode-menu-add-fav-background: var(--yellow-2);
--post-mode-menu-remove-fav-background: var(--yellow-2);
--post-mode-menu-vote-up-background: var(--blue-2);
--post-mode-menu-vote-down-background: var(--red-2);
--post-mode-menu-translation-background: var(--blue-2);
--tag-count-color: var(--muted-text-color);
--low-post-count-color: red;
--low-post-count-color: var(--red-5);
--remove-favorite-button: deeppink;
--remove-favorite-button: var(--red-4);
--ugoira-seek-slider-background: #EEE;
--ugoira-seek-slider-progressbar-background: white;
--ugoira-seek-slider-background: var(--grey-0);
--ugoira-seek-slider-progressbar-background: var(--white);
--keyboard-shortcut-color: white;
--keyboard-shortcut-background-color: #333;
--keyboard-shortcut-color: var(--inverse-text-color);
--keyboard-shortcut-background-color: var(--grey-6);
--error-message-color: #A00;
--error-message-color: var(--red-5);
--login-link-color: #E00;
--footer-border: 1px solid #DDD;
--details-border: #DDD;
--login-link-color: var(--red-5);
--footer-border-color: var(--grey-1);
--details-border-color: var(--grey-2);
--jquery-ui-widget-content-background: var(--body-background-color);
--jquery-ui-widget-content-text-color: var(--text-color);
--jquery-ui-dialog-box-shadow: 2px 2px 1px grey;
--jquery-ui-dialog-box-shadow: 0 4px 14px -2px var(--post-tooltip-box-shadow-color);
--notice-error-background: var(--error-background-color);
--notice-error-border: 1px solid #FBC7C6;
--notice-info-background: var(--warning-background-color);
--notice-info-border: 1px solid #CCC999;
--notice-error-background: var(--red-1);
--notice-error-border-color: var(--red-2);
--notice-info-background: var(--yellow-0);
--notice-info-border-color: var(--yellow-1);
--dtext-blockquote-border-color: #999;
--dtext-code-background: #EEE;
--dtext-expand-border: 1px inset #666;
--dtext-spoiler-background-color: black;
--dtext-spoiler-hover-color: white;
--dtext-blockquote-border-color: var(--grey-4);
--dtext-code-background: var(--grey-1);
--dtext-expand-border: 1px solid var(--grey-3);
--dtext-spoiler-background-color: var(--text-color);
--dtext-spoiler-hover-color: var(--inverse-text-color);
--wiki-page-other-name-background-color: #EEE;
--wiki-page-other-name-background-color: var(--blue-0);
--paginator-arrow-background-color: white;
--paginator-arrow-background-color: var(--inverse-text-color);
--paginator-arrow-color: var(--link-color);
--artist-tag-color: var(--red-6);
--artist-tag-hover-color: var(--red-5);
--copyright-tag-color: var(--purple-6);
--copyright-tag-hover-color: var(--purple-5);
--character-tag-color: var(--green-4);
--character-tag-hover-color: var(--green-3);
--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;
--meta-tag-color: var(--orange-3);
--meta-tag-hover-color: var(--orange-2);
--user-admin-color: red;
--user-moderator-color: orange;
--user-builder-color: #6633FF;
--user-platinum-color: gray;
--user-gold-color: #00F;
--user-member-color: var(--link-color);
--user-restricted-color: var(--link-color);
--user-banned-color: black;
--user-admin-color: var(--artist-tag-color);
--user-moderator-color: var(--character-tag-color);
--user-builder-color: var(--copyright-tag-color);
--user-platinum-color: var(--grey-5);
--user-gold-color: var(--meta-tag-color);
--user-member-color: var(--general-tag-color);
--user-restricted-color: var(--general-tag-color);
--user-banned-color: var(--grey-8);
--user-verified-email-color: #0A0;
--user-unverified-email-color: #F80;
--user-verified-email-color: var(--green-4);
--user-unverified-email-color: var(--yellow-2);
--news-updates-background: #EEE;
--news-updates-border: 2px solid #666;
--news-updates-background: var(--grey-0);
--news-updates-border-color: var(--grey-1);
--related-tags-container-background: #EEE;
--related-tags-container-background: var(--blue-0);
--selected-related-tag-background-color: var(--link-color);
--selected-related-tag-color: white;
--selected-related-tag-color: var(--inverse-text-color);
}
/* variables that aren't defined in the dark theme fall back to the :root theme */
body[data-current-user-theme="dark"] {
--grey-1: #1f202c; /* hsluv(265, 15, 12.50); */
--grey-2: #2c2c3c; /* hsluv(265, 15, 18.75); */
--grey-3: #393a4d; /* hsluv(265, 15, 25.00); */
--grey-4: #9596a8; /* hsluv(265, 15, 62.50); */
--grey-5: #c9c9d2; /* hsluv(265, 15, 81.25); */
--grey-6: #e4e4e8; /* hsluv(265, 15, 90.625); */
--red-0: #652828; /* hsluv(12, 50, 25); */
--red-3: #af4a4b; /* hsluv(12, 50, 45); */
--red-1: #f07a7b; /* hsluv(12, 80, 65); */
--red-2: #f3a4a4; /* hsluv(12, 80, 75); */
--yellow-0: #625121; /* hsluv(65, 80, 35); */
--yellow-1: #e8c259; /* hsluv(65, 80, 80); */
--yellow-2: #fae0a8; /* hsluv(65, 80, 90); */
--green-0: #164423; /* hsluv(135, 80, 25); */
--green-3: #2d7942; /* hsluv(135, 80, 45); */
--green-1: #46b265; /* hsluv(135, 80, 65); */
--green-2: #53d077; /* hsluv(135, 80, 75); */
--aqua-0: #293f3d; /* hsluv(180, 50, 25); */
--aqua-1: #4aada3; /* hsluv(180, 80, 65); */
--aqua-2: #57cabe; /* hsluv(180, 80, 75); */
--blue-0: #2c3d51; /* hsluv(245, 50, 25); */
--blue-3: #356ea1; /* hsluv(245, 80, 45); */
--blue-1: #51a3ec; /* hsluv(245, 80, 65); */
--blue-2: #8fbcf1; /* hsluv(245, 80, 75); */
--indigo-0: #323573; /* hsluv(265, 50, 25); */
--indigo-1: #9396ec; /* hsluv(265, 80, 65); */
--indigo-2: #b2b4f1; /* hsluv(265, 80, 75); */
--purple-0: #473067; /* hsluv(280, 50, 25); */
--purple-1: #b38bec; /* hsluv(280, 80, 65); */
--purple-2: #c7adf1; /* hsluv(280, 80, 75); */
--body-background-color: var(--grey-9);
--text-color: var(--grey-2);
/* main background colors */
--body-background-color: var(--grey-1);
--error-background-color: var(--red-0);
--success-background-color: var(--green-0);
--warning-background-color: var(--yellow-0);
--subnav-menu-background-color: var(--grey-2);
--responsive-menu-background-color: var(--grey-3);
--footer-border: 1px solid var(--grey-3);
--details-border: var(--grey-3);
--table-header-border: 2px solid var(--grey-3);
--table-even-row-background: var(--grey-2);
--table-row-hover-background: var(--grey-3);
--table-row-border: 1px solid var(--grey-3);
/* main text colors */
--text-color: var(--grey-5);
--inverse-text-color: white;
--inverse-text-color: var(--grey-0);
--muted-text-color: var(--grey-4);
--header-color: var(--grey-6);
--header-color: var(--grey-1);
--link-color: var(--azure-4);
--link-hover-color: var(--azure-3);
--link-color: var(--blue-1);
--link-hover-color: var(--blue-2);
--error-background-color: var(--red-9);
--success-background-color: var(--green-9);
--target-background: var(--azure-8);
--artist-tag-color: var(--red-1);
--artist-tag-hover-color: var(--red-2);
--copyright-tag-color: var(--purple-1);
--copyright-tag-hover-color: var(--purple-2);
--character-tag-color: var(--green-1);
--character-tag-hover-color: var(--green-2);
--general-tag-color: var(--blue-1);
--general-tag-hover-color: var(--blue-2);
--meta-tag-color: var(--yellow-1);
--meta-tag-hover-color: var(--yellow-2);
--subnav-menu-background-color: var(--grey-8);
--responsive-menu-background-color: var(--grey-8);
--series-pool-color: var(--copyright-tag-color);
--series-pool-hover-color: var(--copyright-tag-hover-color);
--collection-pool-color: var(--general-tag-color);
--collection-pool-hover-color: var(--general-tag-hover-color);
--form-input-text-color: var(--grey-2);
--form-input-background: var(--grey-7);
--form-input-border-color: var(--grey-5);
--form-input-placeholder-text-color: var(--grey-3);
--form-input-validation-error-border-color: var(--red-4);
--user-banned-color: var(--grey-1);
--user-restricted-color: var(--blue-1);
--user-member-color: var(--blue-1);
--user-gold-color: var(--yellow-1);
--user-platinum-color: var(--grey-4);
--user-builder-color: var(--purple-1);
--user-moderator-color: var(--green-1);
--user-admin-color: var(--red-1);
--form-button-text-color: var(--grey-9);
--form-button-background: var(--grey-2);
--form-button-border-color: var(--grey-4);
--form-button-hover-background: var(--grey-0);
--form-button-hover-box-shadow-color: var(--grey-5);
--form-button-active-background: var(--grey-3);
--user-verified-email-color: var(--green-1);
--user-unverified-email-color: var(--yellow-1);
/* misc specific colors */
--autocomplete-selected-background-color: var(--grey-3);
--autocomplete-border: 1px solid var(--grey-4);
--comment-sticky-background-color: var(--blue-0);
--diff-list-added-color: var(--green-1);
--diff-list-removed-color: var(--red-1);
--diff-list-obsolete-added-color: var(--green-3);
--diff-list-obsolete-removed-color: var(--red-3);
--dtext-blockquote-border-color: var(--grey-4);
--dtext-code-background: var(--grey-2);
--dtext-expand-border: 1px inset var(--grey-4);
--dtext-spoiler-background-color: black;
--dtext-spoiler-hover-color: var(--text-color);
--form-input-text-color: var(--grey-5);
--form-input-background: var(--grey-3);
--form-input-border: 1px solid var(--grey-4);
--form-input-placeholder-text-color: var(--grey-4);
--form-input-validation-error-border-color: var(--red-1);
--form-button-text-color: var(--grey-1);
--form-button-background: var(--grey-5);
--form-button-border: 1px solid var(--grey-4);
--form-button-hover-background: white;
--form-button-hover-box-shadow: 0 0 2px var(--grey-5);
--form-button-active-background: var(--grey-5);
--form-button-active-border: 1px solid var(--grey-5);
--form-button-active-color: white;
--button-primary-text-color: white;
--button-primary-text-color: var(--white);
--button-primary-background-color: var(--link-color);
--button-primary-hover-background-color: var(--link-hover-color);
--button-primary-disabled-color: var(--grey-4);
--button-outline-primary-color: var(--azure-4);
--forum-vote-up-color: var(--green-1);
--forum-vote-meh-color: var(--yellow-1);
--forum-vote-down-color: var(--red-1);
--forum-topic-status-new-color: var(--red-3);
--forum-topic-status-pending-color: var(--blue-3);
--forum-topic-status-approved-color: var(--green-3);
--forum-topic-status-rejected-color: var(--red-3);
--quick-search-form-background: var(--grey-9);
--moderation-report-text-color: var(--red-1);
--moderation-report-background-color: var(--red-0);
--user-upgrade-basic-background-color: var(--grey-8);
--user-upgrade-gold-background-color: var(--grey-7);
--user-upgrade-platinum-background-color: var(--blue-9);
--jquery-ui-widget-content-text-color: var(--text-color);
--jquery-ui-widget-content-background: var(--grey-2);
--jquery-ui-dialog-box-shadow: 0 0 8px var(--grey-1);
--table-header-border-color: var(--grey-7);
--table-row-border-color: var(--grey-7);
--table-even-row-background: var(--grey-8);
--table-row-hover-background: var(--grey-7);
--keyboard-shortcut-color: var(--grey-1);
--keyboard-shortcut-background-color: var(--grey-5);
--preview-pending-color: var(--azure-4);
--preview-flagged-color: var(--red-5);
--preview-deleted-color: var(--grey-3);
--preview-has-children-color: var(--green-3);
--preview-has-parent-color: var(--orange-3);
--modqueue-tag-warning-color: var(--error-background-color);
--modqueue-tag-warning-color: var(--red-7);
--news-updates-background: var(--grey-3);
--news-updates-border: 2px solid var(--grey-4);
--uploads-dropzone-background: var(--grey-8);
--uploads-dropzone-progress-bar-foreground-color: var(--link-color);
--uploads-dropzone-progress-bar-background-color: var(--link-hover-color);
--note-body-text-color: var(--grey-1);
--unsaved-note-box-border: 1px solid var(--red-1);
--movable-note-box-border: 1px solid var(--green-1);
--note-preview-border: 1px solid var(--red-1);
--note-highlight-color: var(--blue-1);
--forum-vote-up-color: var(--green-4);
--forum-vote-meh-color: var(--yellow-2);
--forum-vote-down-color: var(--red-4);
--notice-error-background: var(--red-0);
--notice-error-border: 1px solid var(--grey-4);
--notice-info-background: var(--blue-0);
--notice-info-border: 1px solid var(--blue-1);
--forum-topic-status-new-color: var(--red-4);
--forum-topic-status-pending-color: var(--blue-4);
--forum-topic-status-approved-color: var(--green-4);
--forum-topic-status-rejected-color: var(--red-4);
--paginator-arrow-background-color: white;
--paginator-arrow-color: var(--link-color);
--moderation-report-text-color: var(--red-4);
--moderation-report-background-color: var(--red-9);
--post-artist-commentary-container-background: var(--grey-3);
--post-artist-commentary-container-border: 1px solid var(--grey-3);
--comment-sticky-background-color: var(--azure-8);
--post-mode-menu-edit-background: var(--green-0);
--post-mode-menu-tag-script-background: var(--indigo-0);
--post-mode-menu-add-fav-background: var(--yellow-0);
--post-mode-menu-remove-fav-background: var(--yellow-0);
--post-mode-menu-vote-up-background: var(--red-0);
--post-mode-menu-vote-down-background: var(--red-0);
--post-mode-menu-translation-background: var(--blue-0);
--post-tooltip-background-color: var(--grey-8);
--post-tooltip-border-color: var(--grey-7);
--post-tooltip-header-background-color: var(--grey-8);
--post-tooltip-info-color: var(--grey-2);
--post-notice-border: 1px solid var(--grey-3);
--post-search-notice-background: var(--grey-3);
--post-child-notice-background: var(--yellow-0);
--post-parent-notice-background: var(--green-0);
--post-resized-notice-background: var(--purple-0);
--post-pending-notice-background: var(--indigo-0);
--post-deleted-notice-background: var(--red-0);
--post-banned-notice-background: var(--red-0);
--post-tooltip-background-color: var(--grey-3);
--post-tooltip-border-color: var(--grey-4);
--post-tooltip-header-background-color: var(--grey-3);
--post-tooltip-info-color: var(--grey-5);
--post-tooltip-scrollbar-background: var(--grey-4);
--post-tooltip-scrollbar-border: none;
--post-tooltip-scrollbar-thumb-color: var(--grey-5);
--post-tooltip-scrollbar-track-background: var(--grey-1);
--post-tooltip-scrollbar-track-border: none;
--user-tooltip-positive-feedback-color: var(--yellow-1);
--user-tooltip-negative-feedback-color: var(--red-1);
--preview-pending-color: var(--blue-1);
--preview-flagged-color: var(--red-1);
--preview-deleted-color: var(--grey-5);
--preview-has-children-color: var(--green-1);
--preview-has-parent-color: var(--yellow-1);
--autocomplete-selected-background-color: var(--grey-7);
--autocomplete-border-color: var(--grey-4);
--related-tags-container-background: var(--grey-3);
--diff-list-added-color: var(--green-4);
--diff-list-removed-color: var(--red-4);
--diff-list-obsolete-added-color: var(--green-6);
--diff-list-obsolete-removed-color: var(--red-6);
--wiki-page-versions-diff-del-background: var(--red-8);
--wiki-page-versions-diff-ins-background: var(--green-8);
--post-notice-border-color: var(--grey-7);
--post-parent-notice-background: var(--green-8);
--post-child-notice-background: var(--yellow-8);
--post-pending-notice-background: var(--blue-8);
--post-banned-notice-background: var(--red-8);
--post-deleted-notice-background: var(--red-8);
--post-resized-notice-background: var(--purple-8);
--post-search-notice-background: var(--grey-8);
--post-artist-commentary-container-background: var(--grey-8);
--post-artist-commentary-container-border-color: var(--grey-7);
--unsaved-note-box-border-color: var(--red-5);
--movable-note-box-border-color: var(--blue-5);
--note-preview-border-color: var(--red-5);
--note-highlight-color: var(--blue-5);
--series-pool-color: var(--copyright-tag-color);
--series-pool-hover-color: var(--copyright-tag-hover-color);
--collection-pool-color: var(--general-tag-color);
--collection-pool-hover-color: var(--general-tag-hover-color);
--fetch-source-data-border-color: var(--grey-4);
--post-mode-menu-edit-background: var(--green-8);
--post-mode-menu-tag-script-background: var(--purple-8);
--post-mode-menu-add-fav-background: var(--yellow-8);
--post-mode-menu-remove-fav-background: var(--yellow-8);
--post-mode-menu-vote-up-background: var(--blue-8);
--post-mode-menu-vote-down-background: var(--red-8);
--post-mode-menu-translation-background: var(--blue-8);
--low-post-count-color: var(--red-4);
--remove-favorite-button: var(--red-4);
--ugoira-seek-slider-background: var(--grey-2);
--ugoira-seek-slider-progressbar-background: var(--grey-0);
--keyboard-shortcut-color: var(--grey-0);
--keyboard-shortcut-background-color: var(--grey-7);
--error-message-color: var(--red-4);
--login-link-color: var(--red-4);
--footer-border-color: var(--grey-7);
--details-border-color: var(--grey-7);
--jquery-ui-widget-content-text-color: var(--text-color);
--jquery-ui-widget-content-background: var(--grey-8);
--jquery-ui-dialog-box-shadow: 0 4 14px -2px var(--grey-1);
--notice-error-background: var(--red-8);
--notice-error-border-color: var(--red-7);
--notice-info-background: var(--azure-8);
--notice-info-border-color: var(--azure-6);
--dtext-blockquote-border-color: var(--grey-4);
--dtext-code-background: var(--grey-8);
--dtext-expand-border: 1px inset var(--grey-4);
--dtext-spoiler-background-color: black;
--dtext-spoiler-hover-color: var(--grey-0);
--wiki-page-other-name-background-color: var(--grey-8);
--paginator-arrow-background-color: var(--grey-0);
--paginator-arrow-color: var(--link-color);
--artist-tag-color: var(--red-3);
--artist-tag-hover-color: var(--red-2);
--copyright-tag-color: var(--purple-3);
--copyright-tag-hover-color: var(--purple-2);
--character-tag-color: var(--green-3);
--character-tag-hover-color: var(--green-2);
--general-tag-color: var(--azure-4);
--general-tag-hover-color: var(--azure-3);
--meta-tag-color: var(--yellow-2);
--meta-tag-hover-color: var(--yellow-1);
--user-admin-color: var(--artist-tag-color);
--user-moderator-color: var(--character-tag-color);
--user-builder-color: var(--copyright-tag-color);
--user-platinum-color: var(--grey-4);
--user-gold-color: var(--meta-tag-color);
--user-member-color: var(--general-tag-color);
--user-restricted-color: var(--general-tag-color);
--user-banned-color: var(--grey-6);
--user-verified-email-color: var(--green-3);
--user-unverified-email-color: var(--yellow-2);
--news-updates-background: var(--grey-7);
--news-updates-border-color: var(--grey-6);
--related-tags-container-background: var(--grey-8);
--selected-related-tag-background-color: var(--link-color);
--selected-related-tag-color: white;
--target-background: var(--blue-0);
--uploads-dropzone-background: var(--grey-3);
--uploads-dropzone-progress-bar-foreground-color: var(--link-color);
--uploads-dropzone-progress-bar-background-color: var(--link-hover-color);
--user-upgrade-basic-background-color: var(--grey-2);
--user-upgrade-gold-background-color: var(--indigo-0);
--user-upgrade-platinum-background-color: var(--blue-0);
--wiki-page-other-name-background-color: var(--grey-3);
--wiki-page-versions-diff-del-background: var(--red-0);
--wiki-page-versions-diff-ins-background: var(--green-0);
--low-post-count-color: var(--red-1);
--login-link-color: var(--red-1);
--remove-favorite-button: var(--red-1);
--fetch-source-data-border: 1px solid var(--grey-4);
--quick-search-form-background: var(--grey-1);
--selected-related-tag-color: var(--inverse-text-color);
}

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

@@ -1,6 +1,6 @@
.ui-autocomplete.ui-widget {
font-size: var(--text-sm);
border: var(--autocomplete-border);
border: 1px solid var(--autocomplete-border-color);
div.ui-menu-item-wrapper {
padding: 0.25em 0.4em;

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

@@ -14,16 +14,16 @@ input[type="button"], input[type="submit"], button {
padding: 0.25em 1em;
background: var(--form-button-background);
border: var(--form-button-border);
border: 1px solid var(--form-button-border-color);
color: var(--form-button-text-color);
&:hover {
box-shadow: var(--form-button-hover-box-shadow);
box-shadow: 0 0 2px var(--form-button-hover-box-shadow-color);
background: var(--form-button-hover-background);
}
&:active {
box-shadow: var(--form-button-hover-box-shadow);
box-shadow: 0 0 2px var(--form-button-hover-box-shadow-color);
background: var(--form-button-active-background);
}
}

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

@@ -61,7 +61,7 @@ div.ui-dialog {
.ui-button {
margin: 0;
padding: 0.25em 1em;
border: var(--form-button-border);
border: 1px solid var(--form-button-border-color);
background: var(--form-button-background);
color: var(--form-button-text-color);
@@ -75,12 +75,12 @@ div.ui-dialog {
}
&:hover {
box-shadow: var(--form-button-hover-box-shadow);
box-shadow: 0 0 2px var(--form-button-hover-box-shadow-color);
background: var(--form-button-hover-background);
}
&:active {
box-shadow: var(--form-button-hover-box-shadow);
box-shadow: 0 0 2px var(--form-button-hover-box-shadow-color);
background: var(--form-button-active-background);
color: var(--form-button-text-color);
}

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

@@ -17,7 +17,7 @@ footer#page-footer {
margin-top: 1em;
text-align: center;
padding: 1em 0 1em;
border-top: var(--footer-border);
border-top: 1px solid var(--footer-border-color);
.social-icon img {
vertical-align: bottom;

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

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

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

@@ -41,10 +41,10 @@ div#notice {
.notice-info {
background: var(--notice-info-background);
border: var(--notice-info-border);
border: 1px solid var(--notice-info-border-color);
}
.notice-error {
background: var(--notice-error-background);
border: var(--notice-error-border);
border: 1px solid var(--notice-error-border-color);
}

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

@@ -5,7 +5,7 @@ table.striped {
tbody {
tr {
border-bottom: var(--table-row-border);
border-bottom: 1px solid var(--table-row-border-color);
&:hover {
background: var(--table-row-hover-background);
@@ -15,7 +15,7 @@ table.striped {
thead {
tr {
border-bottom: var(--table-header-border);
border-bottom: 1px solid var(--table-header-border-color);
}
th {

1
app/javascript/src/styles/common/utilities.scss
View File

@@ -23,6 +23,7 @@ $spacer: 0.25rem; /* 4px */
.mb-2 { margin-bottom: 2 * $spacer; }
.mb-4 { margin-bottom: 4 * $spacer; }
.mb-8 { margin-bottom: 8 * $spacer; }
.ml-4 { margin-left: 4 * $spacer; }

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

@@ -9,7 +9,7 @@ div[data-tippy-root].tooltip-loading {
color: var(--text-color);
background-color: var(--post-tooltip-background-color);
background-clip: padding-box;
box-shadow: var(--post-tooltip-box-shadow);
box-shadow: 0 4px 14px -2px var(--post-tooltip-box-shadow-color);
/* bordered arrow styling; see https://github.com/atomiks/tippyjs/blob/master/src/scss/themes/light-border.scss */
&[data-placement^=bottom] {

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

@@ -10,7 +10,7 @@
display: none;
position: absolute;
font-size: 14px;
border: var(--note-body-border);
border: 1px solid var(--note-body-border-color);
background: var(--note-body-background);
color: var(--note-body-text-color);
min-width: 140px;
@@ -88,7 +88,7 @@
align-items: center;
text-align: center;
position: absolute !important;
border: var(--note-box-border);
border: 1px solid var(--note-box-border-color);
min-width: 5px;
min-height: 5px;
width: 100px;
@@ -105,11 +105,11 @@
}
&.unsaved {
border: var(--unsaved-note-box-border);
border: 2px solid var(--unsaved-note-box-border-color);
}
&.movable {
border: var(--movable-note-box-border);
border: 2px solid var(--movable-note-box-border-color);
}
&.embedded {
@@ -118,7 +118,7 @@
opacity: 1;
&:hover {
border: var(--note-box-border);
border: 1px solid var(--note-box-border-color);
box-shadow: var(--note-box-shadow);
&.editing,
@@ -160,7 +160,7 @@
div#note-preview {
position: absolute;
cursor: crosshair;
border: var(--note-preview-border);
border: 2px solid var(--note-preview-border-color);
opacity: 0.6;
display: none;
background: var(--note-preview-background);

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

@@ -102,7 +102,7 @@ div#c-posts {
margin: 0.5em 0;
padding: 0.5em;
overflow: hidden;
border: var(--post-notice-border);
border: 1px solid var(--post-notice-border-color);
p {
margin-bottom: 0;
@@ -172,7 +172,7 @@ div#c-posts {
}
#artist-commentary {
border: var(--post-artist-commentary-container-border);
border: 1px solid var(--post-artist-commentary-container-border-color);
border-radius: 3px;
background: var(--post-artist-commentary-container-background);
margin-bottom: 0.5em;
@@ -219,7 +219,7 @@ div#c-posts, div#c-uploads {
/* Fetch source data box */
div#source-info {
border-radius: 4px;
border: var(--fetch-source-data-border);
border: 1px solid var(--fetch-source-data-border-color);
&:not(.loading) #source-info-loading { display: none; }
&.loading #source-info-content { display: none; }