Pions blancs et noirs, avec contour : valeurs de tokens.json dans app.css
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Pierre MARTIN
co-authored by
Claude Opus 5.5
Claude Opus 5.5
parent
0e17334f45
commit
cfdbc1cedc
+56
-60
@@ -81,29 +81,23 @@
|
||||
--point-a: #6b4430;
|
||||
--point-b: #c9ae88;
|
||||
--point-number: #f3ead8;
|
||||
--checker-player: #f7f0e2;
|
||||
--checker-player-edge: #8c7a62;
|
||||
--checker-computer: #2e1c12;
|
||||
--checker-computer-edge: #120a05;
|
||||
--count-player: #2b1d15;
|
||||
--count-computer: #f3ead8;
|
||||
--die-player: #f7f0e2;
|
||||
--pip-player: #2b1d15;
|
||||
--die-computer: #2e1c12;
|
||||
--pip-computer: #f3ead8;
|
||||
--cube: #f7f0e2;
|
||||
--cube-text: #2b1d15;
|
||||
--checker-player: #fafaf7;
|
||||
--checker-player-edge: #6e6e69;
|
||||
--checker-computer: #1c1c1c;
|
||||
--checker-computer-edge: #b5b5b0;
|
||||
--count-player: #1c1c1c;
|
||||
--count-computer: #fafaf7;
|
||||
--die-player: #fafaf7;
|
||||
--pip-player: #1c1c1c;
|
||||
--die-computer: #1c1c1c;
|
||||
--pip-computer: #fafaf7;
|
||||
--cube: #fafaf7;
|
||||
--cube-text: #1c1c1c;
|
||||
--highlight: #a8432b;
|
||||
--target: rgba(168, 67, 43, 0.32);
|
||||
/* Dernier coup joué (marques et traces) : le laiton, rien d'autre. */
|
||||
--last-move: var(--brand-laiton);
|
||||
|
||||
/* Numéros des flèches. La charte les pose sur le cadre (point-number,
|
||||
* ivoire) ; notre plateau les pose sur le fond, où l'ivoire ne se lirait
|
||||
* pas : texte secondaire en thème clair (4,7:1 sur bed), point-number en
|
||||
* thème sombre (6,3:1). */
|
||||
--point-label: var(--muted);
|
||||
|
||||
--shadow-raised: 0 1px 2px rgba(43, 29, 21, 0.1);
|
||||
|
||||
--font-sans: "Alegreya Sans", "Gill Sans", "Segoe UI", system-ui, sans-serif;
|
||||
@@ -167,23 +161,21 @@
|
||||
--point-a: #3a2519;
|
||||
--point-b: #7e6142;
|
||||
--point-number: #cdbfa8;
|
||||
--checker-player: #ede3cf;
|
||||
--checker-player-edge: #8e7c64;
|
||||
--checker-computer: #140d09;
|
||||
--checker-computer-edge: #a8957d;
|
||||
--count-player: #2b1d15;
|
||||
--count-computer: #f3ead8;
|
||||
--die-player: #ede3cf;
|
||||
--pip-player: #2b1d15;
|
||||
--die-computer: #140d09;
|
||||
--pip-computer: #ede3cf;
|
||||
--cube: #ede3cf;
|
||||
--cube-text: #2b1d15;
|
||||
--checker-player: #f2f2ef;
|
||||
--checker-player-edge: #6e6e69;
|
||||
--checker-computer: #141414;
|
||||
--checker-computer-edge: #b5b5b0;
|
||||
--count-player: #1c1c1c;
|
||||
--count-computer: #fafaf7;
|
||||
--die-player: #f2f2ef;
|
||||
--pip-player: #1c1c1c;
|
||||
--die-computer: #141414;
|
||||
--pip-computer: #f2f2ef;
|
||||
--cube: #f2f2ef;
|
||||
--cube-text: #1c1c1c;
|
||||
--highlight: #e07a5a;
|
||||
--target: rgba(224, 122, 90, 0.38);
|
||||
|
||||
--point-label: var(--point-number);
|
||||
|
||||
--shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.4);
|
||||
--scrim: rgba(0, 0, 0, 0.6);
|
||||
color-scheme: dark;
|
||||
@@ -215,23 +207,21 @@
|
||||
--point-a: #3a2519;
|
||||
--point-b: #7e6142;
|
||||
--point-number: #cdbfa8;
|
||||
--checker-player: #ede3cf;
|
||||
--checker-player-edge: #8e7c64;
|
||||
--checker-computer: #140d09;
|
||||
--checker-computer-edge: #a8957d;
|
||||
--count-player: #2b1d15;
|
||||
--count-computer: #f3ead8;
|
||||
--die-player: #ede3cf;
|
||||
--pip-player: #2b1d15;
|
||||
--die-computer: #140d09;
|
||||
--pip-computer: #ede3cf;
|
||||
--cube: #ede3cf;
|
||||
--cube-text: #2b1d15;
|
||||
--checker-player: #f2f2ef;
|
||||
--checker-player-edge: #6e6e69;
|
||||
--checker-computer: #141414;
|
||||
--checker-computer-edge: #b5b5b0;
|
||||
--count-player: #1c1c1c;
|
||||
--count-computer: #fafaf7;
|
||||
--die-player: #f2f2ef;
|
||||
--pip-player: #1c1c1c;
|
||||
--die-computer: #141414;
|
||||
--pip-computer: #f2f2ef;
|
||||
--cube: #f2f2ef;
|
||||
--cube-text: #1c1c1c;
|
||||
--highlight: #e07a5a;
|
||||
--target: rgba(224, 122, 90, 0.38);
|
||||
|
||||
--point-label: var(--point-number);
|
||||
|
||||
--shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.4);
|
||||
--scrim: rgba(0, 0, 0, 0.6);
|
||||
color-scheme: dark;
|
||||
@@ -984,9 +974,10 @@ a.notation {
|
||||
.point-b { fill: var(--point-b); }
|
||||
|
||||
/* Numéros des flèches : leur taille est une mesure du dessin (attribut
|
||||
* font-size), calculée pour faire au moins 12 px à l'écran (geometry.ts). */
|
||||
* font-size), calculée pour faire au moins 12 px à l'écran (geometry.ts).
|
||||
* Posés sur le cadre, en portrait comme en paysage. */
|
||||
.point-number {
|
||||
fill: var(--point-label);
|
||||
fill: var(--point-number);
|
||||
font-weight: 500;
|
||||
text-anchor: middle;
|
||||
}
|
||||
@@ -1118,10 +1109,8 @@ a.notation {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Paysage : numéros sur le cadre (ivoire), comptes de points en pastilles
|
||||
* aux bouts de la barre, consigne dans la bande, commandes à gauche. */
|
||||
.point-number.on-frame { fill: var(--point-number); }
|
||||
|
||||
/* Paysage : comptes de points en pastilles aux bouts de la barre, consigne
|
||||
* dans la bande, commandes à gauche. */
|
||||
.pip-chip { stroke-width: 1.5; }
|
||||
.chip-player { fill: var(--checker-player); stroke: var(--checker-player-edge); }
|
||||
.chip-computer { fill: var(--checker-computer); stroke: var(--checker-computer-edge); }
|
||||
@@ -2046,9 +2035,10 @@ html.bare .topbar {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Le sens du jeu : pointillés text sur un liseré ivoire, jamais en brique
|
||||
* (la brique veut dire « à faire »). Couleurs de marque, les mêmes dans les
|
||||
* deux thèmes : le liseré reste lisible sur le bois. */
|
||||
/* Le sens du jeu : deux flèches circulaires, claire pour le joueur, sombre
|
||||
* pour l'ordinateur, aux couleurs de leurs pions, chacune avec un liseré de
|
||||
* la couleur opposée pour rester lisible sur le bois ; jamais en brique (la
|
||||
* brique veut dire « à faire »). */
|
||||
.tutorial-path path {
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
@@ -2056,13 +2046,19 @@ html.bare .topbar {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tutorial-path .path-edge {
|
||||
stroke: var(--brand-ivoire);
|
||||
.tutorial-path .direction-player.direction-line { stroke: var(--checker-player); }
|
||||
.tutorial-path .direction-player.direction-edge { stroke: var(--checker-computer); }
|
||||
.tutorial-path .direction-computer.direction-line { stroke: var(--checker-computer); }
|
||||
.tutorial-path .direction-computer.direction-edge { stroke: var(--checker-player); }
|
||||
|
||||
.tutorial-path .direction-head.direction-player {
|
||||
fill: var(--checker-player);
|
||||
stroke: var(--checker-computer);
|
||||
}
|
||||
|
||||
.tutorial-path .path-dots,
|
||||
.tutorial-path .path-head {
|
||||
stroke: var(--brand-noyer);
|
||||
.tutorial-path .direction-head.direction-computer {
|
||||
fill: var(--checker-computer);
|
||||
stroke: var(--checker-player);
|
||||
}
|
||||
|
||||
/* En paysage, comme la position partagée : le plateau à gauche sur toute
|
||||
|
||||
Reference in New Issue
Block a user