mirror of
https://github.com/tiennm99/noitu.git
synced 2026-10-11 12:28:54 +00:00
tiennm99
7644a0745f
The accent was Claude's terracotta, which the board reads as text in four places — the clock, a word's points, the connection badge, a record — at 2.6:1 on white. It also could not carry white text, so every primary button wore dark ink and read as a secondary one. Green at #15803d is 5.02:1 against white, which is the same number in both directions: the accent passes as text and as a button with a white label. The neutrals take a faint green cast so they belong to it, and amber and red are pulled to matching weights. Every text pair now clears 4.5:1 on every surface in both themes. No seat wears the accent's green any more. A player badge in the game's own colour says nothing about whose word it is, so seat one takes the blue and a cyan takes the fourth chair.
119 lines
2.7 KiB
CSS
119 lines
2.7 KiB
CSS
/*
|
|
* One palette, two themes. Every colour is a custom property so a component
|
|
* never names a literal: switching theme is re-declaring the tokens, not
|
|
* re-styling the components.
|
|
*/
|
|
:root {
|
|
/* Paper and ink with a faint green cast: a word game reads as a page, and
|
|
the cast ties the neutrals to the accent instead of leaving them beside
|
|
it. */
|
|
--bg: #f4f7f4;
|
|
--surface: #ffffff;
|
|
--surface-alt: #e9f0ea;
|
|
--border: #c2d1c8;
|
|
--text: #16211b;
|
|
--text-muted: #5b6a61;
|
|
/* Word-game green. Dark enough to carry white text and to be read as text
|
|
itself, which the accent has to be: the clock, a word's points and the
|
|
connection badge are all drawn in it. */
|
|
--accent: #15803d;
|
|
--accent-text: #ffffff;
|
|
--accent-soft: #dff2e5;
|
|
--danger: #a3231c;
|
|
--danger-soft: #fbe4e2;
|
|
--warn: #8a5a08;
|
|
--shadow: 0 1px 2px rgb(0 0 0 / 8%), 0 8px 24px rgb(0 0 0 / 6%);
|
|
|
|
/* One colour per seat, in seat order. The chat log is written in them, so
|
|
a line's author is legible before its name is read. Four, because a room
|
|
holds four. None of them is the accent's green: a seat colour that looks
|
|
like the game's own colour says nothing about whose word it is. */
|
|
--player-1: #1d5c8f;
|
|
--player-2: #7a3f8f;
|
|
--player-3: #8a4c12;
|
|
--player-4: #0e6e7a;
|
|
|
|
--radius: 12px;
|
|
--radius-sm: 8px;
|
|
--font: system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
|
|
color-scheme: light;
|
|
}
|
|
|
|
[data-theme='dark'] {
|
|
--bg: #101512;
|
|
--surface: #17201a;
|
|
--surface-alt: #1f2a23;
|
|
--border: #3a4a40;
|
|
--text: #e6ece7;
|
|
--text-muted: #9aab9f;
|
|
/* Lightened rather than inverted, which is what a dark surface needs from
|
|
an accent; white on it would fail, so the ink on a button turns dark. */
|
|
--accent: #5ddc8b;
|
|
--accent-text: #0c1410;
|
|
--accent-soft: #1e3a2a;
|
|
--danger: #f2867d;
|
|
--danger-soft: #3a201e;
|
|
--warn: #e9b949;
|
|
--shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 30%);
|
|
|
|
--player-1: #79b9ec;
|
|
--player-2: #c193e0;
|
|
--player-3: #e6a563;
|
|
--player-4: #63cfdc;
|
|
|
|
color-scheme: dark;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
min-height: 100%;
|
|
}
|
|
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: var(--font);
|
|
font-size: 16px;
|
|
line-height: 1.5;
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
|
|
button {
|
|
font: inherit;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input {
|
|
font: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
/* Visible only to assistive technology. */
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip-path: inset(50%);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|