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

1
Gemfile
View File

@@ -46,6 +46,7 @@ gem 'mail'
gem 'nokogiri' gem 'nokogiri'
gem 'view_component', require: 'view_component/engine' gem 'view_component', require: 'view_component/engine'
gem 'tzinfo-data' gem 'tzinfo-data'
gem 'hsluv'
group :production, :staging do group :production, :staging do
gem 'unicorn', :platforms => :ruby gem 'unicorn', :platforms => :ruby

2
Gemfile.lock
View File

@@ -191,6 +191,7 @@ GEM
ffi (~> 1.0) ffi (~> 1.0)
globalid (0.4.2) globalid (0.4.2)
activesupport (>= 4.2.0) activesupport (>= 4.2.0)
hsluv (1.0.1)
http (4.4.1) http (4.4.1)
addressable (~> 2.3) addressable (~> 2.3)
http-cookie (~> 1.0) http-cookie (~> 1.0)
@@ -444,6 +445,7 @@ DEPENDENCIES
factory_bot factory_bot
ffaker ffaker
flamegraph flamegraph
hsluv
http http
http-cookie! http-cookie!
ipaddress_2 ipaddress_2

3
app/controllers/static_controller.rb
View File

@@ -22,6 +22,9 @@ class StaticController < ApplicationController
redirect_to wiki_page_path("help:dtext") unless request.format.js? redirect_to wiki_page_path("help:dtext") unless request.format.js?
end end
def colors
end
def opensearch def opensearch
end end

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

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

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

@@ -1,442 +1,502 @@
:root { html {
--body-background-color: white; /*
* 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%); --grey-0: #f6f6f8; /* hsluv(265, 17.5, 97.0) */
--inverse-text-color: white; --grey-1: #e8e8ec; /* hsluv(265, 17.5, 92.0) */
--muted-text-color: hsl(0, 0%, 55%); --grey-2: #d1d1da; /* hsluv(265, 17.5, 84.0) */
--header-color: hsl(0, 0%, 15%); --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%); --white: #FFFFFF;
--link-hover-color: hsl(213, 100%, 75%); --black: #000000;
}
--error-background-color: hsl(0, 100%, 95%); /* light red */ html {
--success-background-color: hsl(120, 100%, 95%); /* light green */ --body-background-color: var(--white);
--warning-background-color: hsl(50, 100%, 93%); /* light yellow */ --text-color: var(--black);
--target-background: #FFC;
--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); --error-background-color: var(--red-1);
--responsive-sidebar-submit-button-background-color: #EEE; --success-background-color: var(--green-0);
--responsive-sidebar-submit-button-border: 1px solid rgb(197, 197, 197); --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-text-color: var(--text-color);
--form-input-background: var(--body-background-color); --form-input-background: var(--body-background-color);
--form-input-border: 1px solid #CCC; --form-input-border-color: var(--grey-2);
--form-input-placeholder-text-color: grey; --form-input-placeholder-text-color: var(--grey-4);
--form-input-validation-error-border-color: red; --form-input-validation-error-border-color: var(--red-4);
--form-button-text-color: var(--form-input-text-color); --form-button-text-color: var(--text-color);
--form-button-background: #EEE; --form-button-background: var(--grey-1);
--form-button-border: var(--form-input-border); --form-button-border-color: var(--grey-2);
--form-button-hover-background: #F5F5F5; --form-button-hover-background: var(--grey-0);
--form-button-hover-box-shadow: 0 0 2px grey; --form-button-hover-box-shadow-color: var(--grey-5);
--form-button-active-background: #DDD; --form-button-active-background: var(--grey-2);
--form-button-active-border: var(--form-button-border);
--form-button-active-color: var(--form-button-text-color); --button-primary-text-color: var(--white);
--button-primary-text-color: white;
--button-primary-background-color: var(--link-color); --button-primary-background-color: var(--link-color);
--button-primary-hover-background-color: hsl(213, 100%, 40%); --button-primary-hover-background-color: var(--link-hover-color);
--button-primary-disabled-color: grey; --button-primary-disabled-color: var(--grey-5);
--button-outline-primary-color: var(--link-color); --button-outline-primary-color: var(--link-color);
--quick-search-form-background: var(--body-background-color); --quick-search-form-background: var(--body-background-color);
--user-upgrade-basic-background-color: #F5F5FF; --user-upgrade-basic-background-color: var(--blue-0);
--user-upgrade-gold-background-color: #FFF380; --user-upgrade-gold-background-color: var(--yellow-1);
--user-upgrade-platinum-background-color: #EEE; --user-upgrade-platinum-background-color: var(--blue-1);
--table-header-border: 2px solid #666; --table-header-border-color: var(--grey-2);
--table-row-border: 1px solid #CCC; --table-row-border-color: var(--grey-2);
--table-row-hover-background: hsl(213, 100%, 95%); --table-row-hover-background: var(--blue-1);
--table-even-row-background: #FAFAFA; --table-even-row-background: var(--grey-0);
--preview-pending-color: #00F; --preview-pending-color: var(--blue-5);
--preview-flagged-color: #F00; --preview-flagged-color: var(--red-4);
--preview-deleted-color: black; --preview-deleted-color: var(--grey-9);
--preview-has-children-color: #0F0; --preview-has-children-color: var(--green-3);
--preview-has-parent-color: #CC0; --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); --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-foreground-color: var(--link-color);
--uploads-dropzone-progress-bar-background-color: var(--link-hover-color); --uploads-dropzone-progress-bar-background-color: var(--link-hover-color);
--forum-vote-up-color: green; --forum-vote-up-color: var(--green-5);
--forum-vote-meh-color: goldenrod; --forum-vote-meh-color: var(--orange-3);
--forum-vote-down-color: red; --forum-vote-down-color: var(--red-5);
--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);
--moderation-report-text-color: red; --forum-topic-status-new-color: var(--red-4);
--moderation-report-background-color: var(--error-background-color); --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-background-color: var(--body-background-color);
--post-tooltip-border-color: hsla(210, 100%, 3%, 0.15); --post-tooltip-border-color: var(--grey-2);
--post-tooltip-box-shadow: 0 4px 14px -2px hsla(210, 100%, 3%, 0.10); --post-tooltip-box-shadow-color: rgba(0, 0, 0, 0.15);
--post-tooltip-header-background-color: var(--subnav-menu-background-color); --post-tooltip-header-background-color: var(--blue-0);
--post-tooltip-info-color: #555; --post-tooltip-info-color: var(--muted-text-color);
--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;
--user-tooltip-positive-feedback-color: orange; --post-tooltip-scrollbar-background: var(--grey-4);
--user-tooltip-negative-feedback-color: red; --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); --preview-current-post-background: rgba(0, 0, 0, 0.1);
--autocomplete-selected-background-color: var(--subnav-menu-background-color); --autocomplete-selected-background-color: var(--blue-0);
--autocomplete-border: 1px solid #CCC; --autocomplete-border-color: var(--grey-2);
--autocomplete-tag-autocorrect-underline: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAHElEQVQYV2NkQAL/GRj+M4IJBgY4zQhSABMEsQHMOAgCT5YN9gAAAABJRU5ErkJggg==); --autocomplete-tag-autocorrect-underline: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAHElEQVQYV2NkQAL/GRj+M4IJBgY4zQhSABMEsQHMOAgCT5YN9gAAAABJRU5ErkJggg==);
--diff-list-added-color: green; --diff-list-added-color: var(--green-5);
--diff-list-removed-color: red; --diff-list-removed-color: var(--red-5);
--diff-list-obsolete-added-color: darkGreen; --diff-list-obsolete-added-color: var(--green-7);
--diff-list-obsolete-removed-color: darkRed; --diff-list-obsolete-removed-color: var(--red-7);
--wiki-page-versions-diff-del-background: #FCC; --wiki-page-versions-diff-del-background: var(--red-2);
--wiki-page-versions-diff-ins-background: #CFC; --wiki-page-versions-diff-ins-background: var(--green-2);
--post-notice-border: 1px solid #DDD; --post-notice-border-color: var(--grey-1);
--post-parent-notice-background: var(--success-background-color); --post-parent-notice-background: var(--green-0);
--post-child-notice-background: var(--warning-background-color); --post-child-notice-background: var(--yellow-0);
--post-pending-notice-background: #D8D8FC; --post-pending-notice-background: var(--blue-0);
--post-banned-notice-background: var(--error-background-color); --post-banned-notice-background: var(--red-1);
--post-deleted-notice-background: var(--error-background-color); --post-deleted-notice-background: var(--red-1);
--post-resized-notice-background: #EED8FC; --post-resized-notice-background: var(--purple-1);
--post-search-notice-background: #EEE; --post-search-notice-background: var(--grey-0);
--post-artist-commentary-container-background: #F8F8F8; --post-artist-commentary-container-background: var(--grey-0);
--post-artist-commentary-container-border: 1px solid #CCC; --post-artist-commentary-container-border-color: var(--grey-1);
--note-body-background: #FFE; --note-body-background: #FFE;
--note-body-text-color: var(--text-color); --note-body-text-color: var(--black);
--note-body-border: 1px solid black; --note-body-border-color: var(--black);
--note-box-border: 1px solid black; --note-box-border-color: var(--black);
--note-box-shadow: 0 0 0 1px white; --note-box-shadow: 0 0 0 1px white;
--unsaved-note-box-border: 1px solid red;
--movable-note-box-border: 1px solid green; --unsaved-note-box-border-color: var(--red-4);
--note-preview-border: 1px solid red; --movable-note-box-border-color: var(--blue-5);
--note-preview-background: white; --note-preview-border-color: var(--red-4);
--note-highlight-color: blue; --note-preview-background: var(--note-body-background);
--note-highlight-color: var(--blue-5);
--note-tn-color: var(--muted-text-color); --note-tn-color: var(--muted-text-color);
--series-pool-color: #A0A; --series-pool-color: var(--copyright-tag-color);
--series-pool-hover-color: #B6B; --series-pool-hover-color: var(--copyright-tag-hover-color);
--collection-pool-color: var(--general-tag-color); --collection-pool-color: var(--general-tag-color);
--collection-pool-hover-color: var(--general-tag-hover-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-edit-background: var(--green-2);
--post-mode-menu-tag-script-background: #D6D; --post-mode-menu-tag-script-background: var(--purple-2);
--post-mode-menu-add-fav-background: #FFA; --post-mode-menu-add-fav-background: var(--yellow-2);
--post-mode-menu-remove-fav-background: #FFA; --post-mode-menu-remove-fav-background: var(--yellow-2);
--post-mode-menu-vote-up-background: #AFA; --post-mode-menu-vote-up-background: var(--blue-2);
--post-mode-menu-vote-down-background: #FAA; --post-mode-menu-vote-down-background: var(--red-2);
--post-mode-menu-translation-background: #5CD; --post-mode-menu-translation-background: var(--blue-2);
--tag-count-color: var(--muted-text-color); --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-background: var(--grey-0);
--ugoira-seek-slider-progressbar-background: white; --ugoira-seek-slider-progressbar-background: var(--white);
--keyboard-shortcut-color: white; --keyboard-shortcut-color: var(--inverse-text-color);
--keyboard-shortcut-background-color: #333; --keyboard-shortcut-background-color: var(--grey-6);
--error-message-color: #A00; --error-message-color: var(--red-5);
--login-link-color: #E00; --login-link-color: var(--red-5);
--footer-border: 1px solid #DDD; --footer-border-color: var(--grey-1);
--details-border: #DDD; --details-border-color: var(--grey-2);
--jquery-ui-widget-content-background: var(--body-background-color); --jquery-ui-widget-content-background: var(--body-background-color);
--jquery-ui-widget-content-text-color: var(--text-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-background: var(--red-1);
--notice-error-border: 1px solid #FBC7C6; --notice-error-border-color: var(--red-2);
--notice-info-background: var(--warning-background-color); --notice-info-background: var(--yellow-0);
--notice-info-border: 1px solid #CCC999; --notice-info-border-color: var(--yellow-1);
--dtext-blockquote-border-color: #999; --dtext-blockquote-border-color: var(--grey-4);
--dtext-code-background: #EEE; --dtext-code-background: var(--grey-1);
--dtext-expand-border: 1px inset #666; --dtext-expand-border: 1px solid var(--grey-3);
--dtext-spoiler-background-color: black; --dtext-spoiler-background-color: var(--text-color);
--dtext-spoiler-hover-color: white; --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); --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-color: var(--link-color);
--general-tag-hover-color: var(--link-hover-color); --general-tag-hover-color: var(--link-hover-color);
--character-tag-color: #0A0; --meta-tag-color: var(--orange-3);
--character-tag-hover-color: #6B6; --meta-tag-hover-color: var(--orange-2);
--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;
--user-admin-color: red; --user-admin-color: var(--artist-tag-color);
--user-moderator-color: orange; --user-moderator-color: var(--character-tag-color);
--user-builder-color: #6633FF; --user-builder-color: var(--copyright-tag-color);
--user-platinum-color: gray; --user-platinum-color: var(--grey-5);
--user-gold-color: #00F; --user-gold-color: var(--meta-tag-color);
--user-member-color: var(--link-color); --user-member-color: var(--general-tag-color);
--user-restricted-color: var(--link-color); --user-restricted-color: var(--general-tag-color);
--user-banned-color: black; --user-banned-color: var(--grey-8);
--user-verified-email-color: #0A0; --user-verified-email-color: var(--green-4);
--user-unverified-email-color: #F80; --user-unverified-email-color: var(--yellow-2);
--news-updates-background: #EEE; --news-updates-background: var(--grey-0);
--news-updates-border: 2px solid #666; --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-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 */ /* variables that aren't defined in the dark theme fall back to the :root theme */
body[data-current-user-theme="dark"] { body[data-current-user-theme="dark"] {
--grey-1: #1f202c; /* hsluv(265, 15, 12.50); */ --body-background-color: var(--grey-9);
--grey-2: #2c2c3c; /* hsluv(265, 15, 18.75); */ --text-color: var(--grey-2);
--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); */
/* main background colors */ --inverse-text-color: var(--grey-0);
--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;
--muted-text-color: var(--grey-4); --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); --error-background-color: var(--red-9);
--link-hover-color: var(--blue-2); --success-background-color: var(--green-9);
--target-background: var(--azure-8);
--artist-tag-color: var(--red-1); --subnav-menu-background-color: var(--grey-8);
--artist-tag-hover-color: var(--red-2); --responsive-menu-background-color: var(--grey-8);
--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);
--series-pool-color: var(--copyright-tag-color); --form-input-text-color: var(--grey-2);
--series-pool-hover-color: var(--copyright-tag-hover-color); --form-input-background: var(--grey-7);
--collection-pool-color: var(--general-tag-color); --form-input-border-color: var(--grey-5);
--collection-pool-hover-color: var(--general-tag-hover-color); --form-input-placeholder-text-color: var(--grey-3);
--form-input-validation-error-border-color: var(--red-4);
--user-banned-color: var(--grey-1); --form-button-text-color: var(--grey-9);
--user-restricted-color: var(--blue-1); --form-button-background: var(--grey-2);
--user-member-color: var(--blue-1); --form-button-border-color: var(--grey-4);
--user-gold-color: var(--yellow-1); --form-button-hover-background: var(--grey-0);
--user-platinum-color: var(--grey-4); --form-button-hover-box-shadow-color: var(--grey-5);
--user-builder-color: var(--purple-1); --form-button-active-background: var(--grey-3);
--user-moderator-color: var(--green-1);
--user-admin-color: var(--red-1);
--user-verified-email-color: var(--green-1); --button-primary-text-color: var(--white);
--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-background-color: var(--link-color); --button-primary-background-color: var(--link-color);
--button-primary-hover-background-color: var(--link-hover-color); --button-primary-hover-background-color: var(--link-hover-color);
--button-primary-disabled-color: var(--grey-4); --button-primary-disabled-color: var(--grey-4);
--button-outline-primary-color: var(--azure-4);
--forum-vote-up-color: var(--green-1); --quick-search-form-background: var(--grey-9);
--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);
--moderation-report-text-color: var(--red-1); --user-upgrade-basic-background-color: var(--grey-8);
--moderation-report-background-color: var(--red-0); --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); --table-header-border-color: var(--grey-7);
--jquery-ui-widget-content-background: var(--grey-2); --table-row-border-color: var(--grey-7);
--jquery-ui-dialog-box-shadow: 0 0 8px var(--grey-1); --table-even-row-background: var(--grey-8);
--table-row-hover-background: var(--grey-7);
--keyboard-shortcut-color: var(--grey-1); --preview-pending-color: var(--azure-4);
--keyboard-shortcut-background-color: var(--grey-5); --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); --uploads-dropzone-background: var(--grey-8);
--news-updates-border: 2px solid var(--grey-4); --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); --forum-vote-up-color: var(--green-4);
--unsaved-note-box-border: 1px solid var(--red-1); --forum-vote-meh-color: var(--yellow-2);
--movable-note-box-border: 1px solid var(--green-1); --forum-vote-down-color: var(--red-4);
--note-preview-border: 1px solid var(--red-1);
--note-highlight-color: var(--blue-1);
--notice-error-background: var(--red-0); --forum-topic-status-new-color: var(--red-4);
--notice-error-border: 1px solid var(--grey-4); --forum-topic-status-pending-color: var(--blue-4);
--notice-info-background: var(--blue-0); --forum-topic-status-approved-color: var(--green-4);
--notice-info-border: 1px solid var(--blue-1); --forum-topic-status-rejected-color: var(--red-4);
--paginator-arrow-background-color: white; --moderation-report-text-color: var(--red-4);
--paginator-arrow-color: var(--link-color); --moderation-report-background-color: var(--red-9);
--post-artist-commentary-container-background: var(--grey-3); --comment-sticky-background-color: var(--azure-8);
--post-artist-commentary-container-border: 1px solid var(--grey-3);
--post-mode-menu-edit-background: var(--green-0); --post-tooltip-background-color: var(--grey-8);
--post-mode-menu-tag-script-background: var(--indigo-0); --post-tooltip-border-color: var(--grey-7);
--post-mode-menu-add-fav-background: var(--yellow-0); --post-tooltip-header-background-color: var(--grey-8);
--post-mode-menu-remove-fav-background: var(--yellow-0); --post-tooltip-info-color: var(--grey-2);
--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-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-background: var(--grey-4);
--post-tooltip-scrollbar-border: none;
--post-tooltip-scrollbar-thumb-color: var(--grey-5); --post-tooltip-scrollbar-thumb-color: var(--grey-5);
--post-tooltip-scrollbar-track-background: var(--grey-1); --post-tooltip-scrollbar-track-background: var(--grey-1);
--post-tooltip-scrollbar-track-border: none;
--user-tooltip-positive-feedback-color: var(--yellow-1); --user-tooltip-positive-feedback-color: var(--yellow-1);
--user-tooltip-negative-feedback-color: var(--red-1); --user-tooltip-negative-feedback-color: var(--red-1);
--preview-pending-color: var(--blue-1); --autocomplete-selected-background-color: var(--grey-7);
--preview-flagged-color: var(--red-1); --autocomplete-border-color: var(--grey-4);
--preview-deleted-color: var(--grey-5);
--preview-has-children-color: var(--green-1);
--preview-has-parent-color: var(--yellow-1);
--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-background-color: var(--link-color);
--selected-related-tag-color: white; --selected-related-tag-color: var(--inverse-text-color);
--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);
} }

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

@@ -1,6 +1,6 @@
.ui-autocomplete.ui-widget { .ui-autocomplete.ui-widget {
font-size: var(--text-sm); font-size: var(--text-sm);
border: var(--autocomplete-border); border: 1px solid var(--autocomplete-border-color);
div.ui-menu-item-wrapper { div.ui-menu-item-wrapper {
padding: 0.25em 0.4em; 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; padding: 0.25em 1em;
background: var(--form-button-background); background: var(--form-button-background);
border: var(--form-button-border); border: 1px solid var(--form-button-border-color);
color: var(--form-button-text-color); color: var(--form-button-text-color);
&:hover { &: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); background: var(--form-button-hover-background);
} }
&:active { &: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); 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 { .ui-button {
margin: 0; margin: 0;
padding: 0.25em 1em; padding: 0.25em 1em;
border: var(--form-button-border); border: 1px solid var(--form-button-border-color);
background: var(--form-button-background); background: var(--form-button-background);
color: var(--form-button-text-color); color: var(--form-button-text-color);
@@ -75,12 +75,12 @@ div.ui-dialog {
} }
&:hover { &: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); background: var(--form-button-hover-background);
} }
&:active { &: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); background: var(--form-button-active-background);
color: var(--form-button-text-color); 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; margin-top: 1em;
text-align: center; text-align: center;
padding: 1em 0 1em; padding: 1em 0 1em;
border-top: var(--footer-border); border-top: 1px solid var(--footer-border-color);
.social-icon img { .social-icon img {
vertical-align: bottom; vertical-align: bottom;

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

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

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

@@ -41,10 +41,10 @@ div#notice {
.notice-info { .notice-info {
background: var(--notice-info-background); background: var(--notice-info-background);
border: var(--notice-info-border); border: 1px solid var(--notice-info-border-color);
} }
.notice-error { .notice-error {
background: var(--notice-error-background); 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 { tbody {
tr { tr {
border-bottom: var(--table-row-border); border-bottom: 1px solid var(--table-row-border-color);
&:hover { &:hover {
background: var(--table-row-hover-background); background: var(--table-row-hover-background);
@@ -15,7 +15,7 @@ table.striped {
thead { thead {
tr { tr {
border-bottom: var(--table-header-border); border-bottom: 1px solid var(--table-header-border-color);
} }
th { 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-2 { margin-bottom: 2 * $spacer; }
.mb-4 { margin-bottom: 4 * $spacer; } .mb-4 { margin-bottom: 4 * $spacer; }
.mb-8 { margin-bottom: 8 * $spacer; }
.ml-4 { margin-left: 4 * $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); color: var(--text-color);
background-color: var(--post-tooltip-background-color); background-color: var(--post-tooltip-background-color);
background-clip: padding-box; 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 */ /* bordered arrow styling; see https://github.com/atomiks/tippyjs/blob/master/src/scss/themes/light-border.scss */
&[data-placement^=bottom] { &[data-placement^=bottom] {

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

@@ -10,7 +10,7 @@
display: none; display: none;
position: absolute; position: absolute;
font-size: 14px; font-size: 14px;
border: var(--note-body-border); border: 1px solid var(--note-body-border-color);
background: var(--note-body-background); background: var(--note-body-background);
color: var(--note-body-text-color); color: var(--note-body-text-color);
min-width: 140px; min-width: 140px;
@@ -88,7 +88,7 @@
align-items: center; align-items: center;
text-align: center; text-align: center;
position: absolute !important; position: absolute !important;
border: var(--note-box-border); border: 1px solid var(--note-box-border-color);
min-width: 5px; min-width: 5px;
min-height: 5px; min-height: 5px;
width: 100px; width: 100px;
@@ -105,11 +105,11 @@
} }
&.unsaved { &.unsaved {
border: var(--unsaved-note-box-border); border: 2px solid var(--unsaved-note-box-border-color);
} }
&.movable { &.movable {
border: var(--movable-note-box-border); border: 2px solid var(--movable-note-box-border-color);
} }
&.embedded { &.embedded {
@@ -118,7 +118,7 @@
opacity: 1; opacity: 1;
&:hover { &:hover {
border: var(--note-box-border); border: 1px solid var(--note-box-border-color);
box-shadow: var(--note-box-shadow); box-shadow: var(--note-box-shadow);
&.editing, &.editing,
@@ -160,7 +160,7 @@
div#note-preview { div#note-preview {
position: absolute; position: absolute;
cursor: crosshair; cursor: crosshair;
border: var(--note-preview-border); border: 2px solid var(--note-preview-border-color);
opacity: 0.6; opacity: 0.6;
display: none; display: none;
background: var(--note-preview-background); 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; margin: 0.5em 0;
padding: 0.5em; padding: 0.5em;
overflow: hidden; overflow: hidden;
border: var(--post-notice-border); border: 1px solid var(--post-notice-border-color);
p { p {
margin-bottom: 0; margin-bottom: 0;
@@ -172,7 +172,7 @@ div#c-posts {
} }
#artist-commentary { #artist-commentary {
border: var(--post-artist-commentary-container-border); border: 1px solid var(--post-artist-commentary-container-border-color);
border-radius: 3px; border-radius: 3px;
background: var(--post-artist-commentary-container-background); background: var(--post-artist-commentary-container-background);
margin-bottom: 0.5em; margin-bottom: 0.5em;
@@ -219,7 +219,7 @@ div#c-posts, div#c-uploads {
/* Fetch source data box */ /* Fetch source data box */
div#source-info { div#source-info {
border-radius: 4px; 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; } &:not(.loading) #source-info-loading { display: none; }
&.loading #source-info-content { display: none; } &.loading #source-info-content { display: none; }

46
app/logical/color_palette.rb Normal file
View File

@@ -0,0 +1,46 @@
module ColorPalette
module_function
HUES = {
grey: 265,
red: 12,
orange: 37,
yellow: 68,
green: 130,
azure: 242,
blue: 257,
purple: 282,
}
SATURATIONS = {
grey: [17.5]*10,
red: [100, 80, 100, 100, 100, 90, 100, 90, 75, 50],
yellow: [60, 60, 60, 100, 100, 100, 100, 100, 100, 90],
green: [40, 40, 50, 90, 100, 100, 100, 100, 100, 100],
purple: [100, 70, 90, 100, 100, 100, 100, 100, 80, 80],
}
LIGHTNESSES = [
97.0, # 0
92.0, # 1
84.0, # 2
70.5, # 3
61.0, # 4
51.2, # 5
40.0, # 6
28.0, # 7
19.0, # 8
12.0, # 9
]
def css_rules
HUES.flat_map do |name, hue|
LIGHTNESSES.each_with_index.map do |lightness, i|
saturation = SATURATIONS.dig(name, i) || 100
hex = Hsluv.hsluv_to_hex(hue, saturation, lightness)
"--#{name}-#{i}: #{hex}; /* hsluv(#{hue}, #{saturation}, #{lightness}) */"
end
end.join("\n")
end
end

86
app/views/static/colors.html.erb Normal file
View File

@@ -0,0 +1,86 @@
<div id="c-static">
<div id="a-colors">
<h1>Colors</h1>
<div class="space-y-4">
<table style="border-spacing: 0.25rem; border-collapse: separate">
<tr>
<td></td>
<% ColorPalette::LIGHTNESSES.each_with_index do |_, i| %>
<td class="text-muted text-center"><%= i %></td>
<% end %>
</tr>
<% ColorPalette::HUES.each do |hue, _| %>
<tr>
<td class="text-muted"><%= hue %></td>
<% ColorPalette::LIGHTNESSES.each_with_index do |_, i| %>
<td style="height: 2rem; width: 4rem; background-color: var(--<%= "#{hue}-#{i}" %>)"></td>
<% end %>
</tr>
<% end %>
</table>
<table style="border-spacing: 0.25rem; border-collapse: separate">
<tr>
<td></td>
<% ColorPalette::LIGHTNESSES.each_with_index do |_, i| %>
<td class="text-muted text-center"><%= i %></td>
<% end %>
</tr>
<% ColorPalette::HUES.each do |hue, _| %>
<tr>
<td class="text-muted"><%= hue %></td>
<% ColorPalette::LIGHTNESSES.each_with_index do |_, i| %>
<td class="text-center" style="height: 2rem; width: 4rem; background-color: white; color: var(--<%= "#{hue}-#{i}" %>)">
Aa
</td>
<% end %>
</tr>
<% end %>
</table>
<table style="border-spacing: 0.25rem; border-collapse: separate">
<tr>
<td></td>
<% ColorPalette::LIGHTNESSES.each_with_index do |_, i| %>
<td class="text-muted text-center"><%= i %></td>
<% end %>
</tr>
<% ColorPalette::HUES.each do |hue, _| %>
<tr>
<td class="text-muted"><%= hue %></td>
<% ColorPalette::LIGHTNESSES.each_with_index do |_, i| %>
<td class="text-center" style="height: 2rem; width: 4rem; background-color: var(--<%= "#{hue}-#{i}" %>)">
<span style="color: white">Aa</span>
<span style="color: var(--grey-9)">Aa</span>
</td>
<% end %>
</tr>
<% end %>
</table>
<table style="border-spacing: 0.25rem; border-collapse: separate">
<tr>
<td></td>
<% ColorPalette::LIGHTNESSES.each_with_index do |_, i| %>
<td class="text-muted text-center"><%= i %></td>
<% end %>
</tr>
<% ColorPalette::HUES.each do |hue, _| %>
<tr>
<td class="text-muted"><%= hue %></td>
<% ColorPalette::LIGHTNESSES.each_with_index do |_, i| %>
<td class="text-center" style="height: 2rem; width: 4rem; background-color: var(--grey-9); color: var(--<%= "#{hue}-#{i}" %>)">
Aa
</td>
<% end %>
</tr>
<% end %>
</table>
</div>
</div>
</div>

2
app/views/users/_statistics.html.erb
View File

@@ -53,7 +53,7 @@
<%= exclamation_icon(class: "user-unverified-email-icon", title: "Unverified email. Click here to verify your email.") %> <%= exclamation_icon(class: "user-unverified-email-icon", title: "Unverified email. Click here to verify your email.") %>
<% end %> <% end %>
<% else %> <% else %>
<%= exclamation_icon(class: "user-email-unverified", title: "Unverified email") %> <%= exclamation_icon(class: "user-unverified-email-icon", title: "Unverified email") %>
<% end %> <% end %>
<% else %> <% else %>
<em>none</em> <em>none</em>

1
config/routes.rb
View File

@@ -317,6 +317,7 @@ Rails.application.routes.draw do
get "/static/keyboard_shortcuts" => "static#keyboard_shortcuts", :as => "keyboard_shortcuts" get "/static/keyboard_shortcuts" => "static#keyboard_shortcuts", :as => "keyboard_shortcuts"
get "/static/bookmarklet" => "static#bookmarklet", :as => "bookmarklet" get "/static/bookmarklet" => "static#bookmarklet", :as => "bookmarklet"
get "/static/site_map" => "static#site_map", :as => "site_map" get "/static/site_map" => "static#site_map", :as => "site_map"
get "/static/colors" => "static#colors", :as => "colors"
get "/static/contact" => "static#contact", :as => "contact" get "/static/contact" => "static#contact", :as => "contact"
get "/static/dtext_help" => "static#dtext_help", :as => "dtext_help" get "/static/dtext_help" => "static#dtext_help", :as => "dtext_help"
get "/static/terms_of_service", to: redirect("/terms_of_service") get "/static/terms_of_service", to: redirect("/terms_of_service")