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.
90 lines
2.3 KiB
SCSS
90 lines
2.3 KiB
SCSS
%button {
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
border-radius: 4px;
|
|
padding: 0.5em 1em;
|
|
|
|
&[disabled] {
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
input[type="button"], input[type="submit"], button {
|
|
border-radius: 3px;
|
|
padding: 0.25em 1em;
|
|
|
|
background: var(--form-button-background);
|
|
border: 1px solid var(--form-button-border-color);
|
|
color: var(--form-button-text-color);
|
|
|
|
&: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);
|
|
}
|
|
}
|
|
|
|
/* Buttons, modeled after Material Design and Bootstrap. */
|
|
a, button, input[type="submit"] {
|
|
/* A solid blue button. */
|
|
&.button-primary {
|
|
@extend %button;
|
|
|
|
color: var(--button-primary-text-color);
|
|
background-color: var(--button-primary-background-color);
|
|
border: none;
|
|
|
|
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
|
box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
|
|
|
|
&:hover:not([disabled]) {
|
|
background-color: var(--button-primary-hover-background-color);
|
|
box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12)
|
|
}
|
|
|
|
&[disabled] {
|
|
background-color: var(--button-primary-disabled-color);
|
|
}
|
|
}
|
|
|
|
/* An outlined blue button. */
|
|
&.button-outline-primary {
|
|
@extend %button;
|
|
|
|
color: var(--button-outline-primary-color);
|
|
background-color: transparent;
|
|
border: 1px solid var(--button-outline-primary-color);
|
|
|
|
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
|
|
|
&:hover:not([disabled]) {
|
|
color: var(--inverse-text-color);
|
|
background-color: var(--button-outline-primary-color);
|
|
}
|
|
|
|
&[disabled] {
|
|
color: var(--button-primary-disabled-color);
|
|
border: 1px solid var(--button-primary-disabled-color);
|
|
}
|
|
}
|
|
|
|
/* A small button. */
|
|
&.button-sm {
|
|
padding: 0.25em 1em;
|
|
}
|
|
|
|
/* A medium button. */
|
|
&.button-md {
|
|
padding: 0.50em 1em;
|
|
}
|
|
|
|
/* A large button. */
|
|
&.button-lg {
|
|
padding: 0.75em 1em;
|
|
}
|
|
}
|