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.
173 lines
3.2 KiB
SCSS
173 lines
3.2 KiB
SCSS
.note-container {
|
|
display: inline-block;
|
|
position: relative;
|
|
|
|
&.hide-notes .note-box {
|
|
visibility: hidden;
|
|
}
|
|
|
|
div.note-body {
|
|
display: none;
|
|
position: absolute;
|
|
font-size: 14px;
|
|
border: 1px solid var(--note-body-border-color);
|
|
background: var(--note-body-background);
|
|
color: var(--note-body-text-color);
|
|
min-width: 140px;
|
|
width: min-content;
|
|
min-height: 1em;
|
|
line-height: 1.25;
|
|
cursor: pointer;
|
|
padding: 4px;
|
|
z-index: 150;
|
|
overflow-wrap: break-word;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
div.note-body, div.note-box.embedded div.note-box-inner-border {
|
|
h1, h2, h3, h4, h5, h6, a, span, div, blockquote, p, ul, li, ol, em, strong, small, big, b, i, font, u, s, code, center {
|
|
line-height: 1.25;
|
|
}
|
|
|
|
> :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
b, strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
i, em {
|
|
font-style: italic;
|
|
}
|
|
|
|
small {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
code {
|
|
font: var(--monospace-font);
|
|
}
|
|
|
|
a[rel*="external"] {
|
|
word-break: initial;
|
|
}
|
|
|
|
.tn {
|
|
font-size: 0.8em;
|
|
color: var(--note-tn-color);
|
|
}
|
|
|
|
ruby {
|
|
rt {
|
|
font-size: 0.8em;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
margin-left: 1em;
|
|
margin-bottom: 1em;
|
|
|
|
ul {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
li {
|
|
list-style-type: disc;
|
|
|
|
+ br {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.note-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
position: absolute !important;
|
|
border: 1px solid var(--note-box-border-color);
|
|
min-width: 5px;
|
|
min-height: 5px;
|
|
width: 100px;
|
|
height: 100px;
|
|
cursor: move;
|
|
background: var(--note-body-background);
|
|
line-height: 1.25;
|
|
opacity: 0.5;
|
|
z-index: 100;
|
|
|
|
/* Raise notes on hover so overlapping embedded notes are readable. */
|
|
&:hover {
|
|
z-index: 200;
|
|
}
|
|
|
|
&.unsaved {
|
|
border: 2px solid var(--unsaved-note-box-border-color);
|
|
}
|
|
|
|
&.movable {
|
|
border: 2px solid var(--movable-note-box-border-color);
|
|
}
|
|
|
|
&.embedded {
|
|
color: var(--note-body-text-color);
|
|
border: 1px solid transparent;
|
|
opacity: 1;
|
|
|
|
&:hover {
|
|
border: 1px solid var(--note-box-border-color);
|
|
box-shadow: var(--note-box-shadow);
|
|
|
|
&.editing,
|
|
&.movable {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&.editing,
|
|
&.movable {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
&.unsaved,
|
|
&.out-of-bounds {
|
|
border: var(--unsaved-note-box-border);
|
|
}
|
|
|
|
&.movable {
|
|
border: var(--movable-note-box-border);
|
|
}
|
|
|
|
&:not(:hover) div.ui-resizable-handle {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
&.note-box-highlighted {
|
|
outline: 2px solid var(--note-highlight-color);
|
|
}
|
|
|
|
div.ui-resizable-handle {
|
|
position: absolute;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* the box that appears when dragging to create a new note. */
|
|
div#note-preview {
|
|
position: absolute;
|
|
cursor: crosshair;
|
|
border: 2px solid var(--note-preview-border-color);
|
|
opacity: 0.6;
|
|
display: none;
|
|
background: var(--note-preview-background);
|
|
z-index: 250;
|
|
}
|
|
|
|
div.note-edit-dialog {
|
|
font-size: 0.8em;
|
|
}
|