1c1d784547
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.
92 lines
1.8 KiB
SCSS
92 lines
1.8 KiB
SCSS
.ui-widget {
|
|
font-family: var(--body-font);
|
|
|
|
input, select, textarea, button {
|
|
font-family: var(--body-font);
|
|
}
|
|
}
|
|
|
|
.ui-widget-content {
|
|
background: var(--jquery-ui-widget-content-background);
|
|
color: var(--jquery-ui-widget-content-text-color);
|
|
}
|
|
|
|
.ui-widget-content a {
|
|
color: var(--link-color);
|
|
}
|
|
|
|
.ui-widget-content a:hover {
|
|
color: var(--link-hover-color);
|
|
}
|
|
|
|
div.ui-dialog {
|
|
height: auto !important;
|
|
overflow: visible;
|
|
font-size: 1em;
|
|
z-index: 999 !important;
|
|
box-shadow: var(--jquery-ui-dialog-box-shadow);
|
|
padding: 0;
|
|
|
|
.ui-dialog-titlebar {
|
|
border-radius: 0;
|
|
border: none;
|
|
}
|
|
|
|
ul {
|
|
margin-left: 1em;
|
|
margin-bottom: 1em;
|
|
}
|
|
}
|
|
|
|
.ui-state-highlight {
|
|
border: var(--jquery-ui-state-highlight-border);
|
|
background: var(--jquery-ui-state-highlight-background);
|
|
color: var(--jquery-ui-state-highlight-text-color);
|
|
|
|
a, a:active, a:visited {
|
|
color: var(--link-color);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--link-hover-color);
|
|
}
|
|
}
|
|
|
|
.ui-state-error {
|
|
border: var(--jquery-ui-state-error-border);
|
|
background: var(--jquery-ui-state-error-background);
|
|
color: var(--jquery-ui-state-error-text-color);
|
|
}
|
|
|
|
.ui-button {
|
|
margin: 0;
|
|
padding: 0.25em 1em;
|
|
border: 1px solid var(--form-button-border-color);
|
|
background: var(--form-button-background);
|
|
color: var(--form-button-text-color);
|
|
|
|
&.sub {
|
|
font-size: 90%;
|
|
}
|
|
|
|
&.tiny {
|
|
font-size: 90%;
|
|
padding: 0.25em 0.5em;
|
|
}
|
|
|
|
&:hover {
|
|
box-shadow: 0 0 2px var(--form-button-hover-box-shadow-color);
|
|
background: var(--form-button-hover-background);
|
|
}
|
|
|
|
&:active {
|
|
box-shadow: 0 0 2px var(--form-button-hover-box-shadow-color);
|
|
background: var(--form-button-active-background);
|
|
color: var(--form-button-text-color);
|
|
}
|
|
}
|
|
|
|
.ui-front {
|
|
z-index: 1000;
|
|
}
|