forked from yvv/decision
YvvandClaude Opus 5.5
81b604e5f2
- Accueil : le titre, le leitmotiv en trois lignes (contexte et cadrage · processus et modalités · boîte à outils), puis directement le choix du groupe ; sans session, la connexion à sa place. /groupes redirige vers /, « Mes groupes » et le retour après connexion mènent à /. - Logo « Clé de voûte » du DA (signe en currentColor, clé en --cle, libre Literata italique, Decision romain), droit, dans le menu et la barre mobile ; Stamp retiré, le sceau 井 ne bouge pas. Favicon, icônes 16/32/48, apple-touch, 192/512, manifeste. - Quatre ambiances : pierre et calcaire (claires), nuit et ardoise (sombres), --cle par ambiance ; quatre pastilles à la place du soleil / lune ; première visite selon l'appareil (pierre / nuit). Calcaire et ardoise : textes, accent, mousse et avertissement à 4,5:1 au moins. - Page d'un groupe : les quatre piliers, puis « En cours ». - Menu : nombre de docs en cours à côté de « Docs de référence », surligné seulement dedans, seul Docs réagit au survol ; les trois autres éteints mais ouvrent leur page ; hors d'un groupe, le dernier groupe ouvert. - /g/[group]/docs « En cours » + « À venir » ; /mandats et /protocoles du groupe : « À venir » éteints ; /g/[group]/decisions : une ligne par doc, « N modules à voter », « dont N sans ton vote ». Anciennes adresses /decisions, /mandats, /protocoles : vers le groupe courant, sinon /. - e2e : C1, C2, C11, C12, M1 mis à jour ; C13–C17 pour L1–L6 ; CONTROLES.md. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
376 lines
8.1 KiB
CSS
376 lines
8.1 KiB
CSS
/* libreDecision v3 — tokens and base.
|
|
Four moods, two light and two dark: « pierre » (cool stone) and « nuit » (well at night)
|
|
carry the water; « calcaire » (warm limestone) and « ardoise » (dark slate) carry the ochre.
|
|
`--water` is the accent of the mood (links, buttons, current place), whatever its hue;
|
|
`--cle` is the keystone of the logo (Clé de voûte, DA 2026-10-28).
|
|
Borderless: depth comes from background and shadow, never from strokes.
|
|
Radii: cards 16px · inputs 12px · pills and buttons 20px · icon holders 14px. */
|
|
|
|
@import '@fontsource-variable/nunito';
|
|
@import '@fontsource-variable/literata/opsz.css';
|
|
@import '@fontsource-variable/literata/opsz-italic.css';
|
|
|
|
:root,
|
|
[data-mood='pierre'] {
|
|
--bg: #e9eeec;
|
|
--surface: #f6f8f7;
|
|
--surface-2: #dfe6e3;
|
|
--ink: #18282a;
|
|
--ink-soft: #4e615f;
|
|
--ink-faint: #7f908d;
|
|
--water: #1f6f78;
|
|
--water-light: #8cc3c4;
|
|
--water-wash: rgb(31 111 120 / 0.08);
|
|
--moss: #4c7a4b;
|
|
--moss-wash: rgb(76 122 75 / 0.12);
|
|
--ochre: #a8661e;
|
|
--ochre-wash: rgb(168 102 30 / 0.12);
|
|
--on-water: #f6f8f7;
|
|
--cle: #16808c;
|
|
--shadow: 0 1px 2px rgb(20 40 40 / 0.06), 0 8px 28px rgb(20 40 40 / 0.07);
|
|
--shadow-strong: 0 2px 6px rgb(20 40 40 / 0.1), 0 18px 48px rgb(20 40 40 / 0.16);
|
|
--veil: rgb(16 30 31 / 0.28);
|
|
color-scheme: light;
|
|
}
|
|
|
|
/* Calcaire: warm limestone, the ochre. The accent is darker than the keystone
|
|
(#a8661e, 3.5:1) so that a link or a label reads at 4.5:1 or more; warnings
|
|
turn to brick, away from the accent. */
|
|
[data-mood='calcaire'] {
|
|
--bg: #f2ede4;
|
|
--surface: #fbf8f2;
|
|
--surface-2: #e8e0d2;
|
|
--ink: #2a241e;
|
|
--ink-soft: #5c5247;
|
|
--ink-faint: #857868;
|
|
--water: #8a5214;
|
|
--water-light: #e6c79c;
|
|
--water-wash: rgb(138 82 20 / 0.08);
|
|
--moss: #446b38;
|
|
--moss-wash: rgb(68 107 56 / 0.12);
|
|
--ochre: #a3432b;
|
|
--ochre-wash: rgb(163 67 43 / 0.1);
|
|
--on-water: #fbf8f2;
|
|
--cle: #a8661e;
|
|
--shadow: 0 1px 2px rgb(60 42 20 / 0.06), 0 8px 28px rgb(60 42 20 / 0.07);
|
|
--shadow-strong: 0 2px 6px rgb(60 42 20 / 0.1), 0 18px 48px rgb(60 42 20 / 0.16);
|
|
--veil: rgb(42 32 20 / 0.28);
|
|
color-scheme: light;
|
|
}
|
|
|
|
[data-mood='nuit'] {
|
|
--bg: #0e1819;
|
|
--surface: #142224;
|
|
--surface-2: #1b2d2f;
|
|
--ink: #e2ebe8;
|
|
--ink-soft: #a2b4b0;
|
|
--ink-faint: #6e827e;
|
|
--water: #6ec1c6;
|
|
--water-light: #2d6a70;
|
|
--water-wash: rgb(110 193 198 / 0.08);
|
|
--moss: #8dbf84;
|
|
--moss-wash: rgb(141 191 132 / 0.12);
|
|
--ochre: #e0a458;
|
|
--ochre-wash: rgb(224 164 88 / 0.12);
|
|
--on-water: #0e1819;
|
|
--cle: #6ec1c6;
|
|
--shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 28px rgb(0 0 0 / 0.28);
|
|
--shadow-strong: 0 2px 6px rgb(0 0 0 / 0.4), 0 18px 48px rgb(0 0 0 / 0.5);
|
|
--veil: rgb(0 0 0 / 0.5);
|
|
color-scheme: dark;
|
|
}
|
|
|
|
/* Ardoise: dark slate, the ochre; warnings in a light brick. */
|
|
[data-mood='ardoise'] {
|
|
--bg: #171b20;
|
|
--surface: #1d2228;
|
|
--surface-2: #262c34;
|
|
--ink: #e4e6e2;
|
|
--ink-soft: #a9afb5;
|
|
--ink-faint: #7a828b;
|
|
--water: #e0a65c;
|
|
--water-light: #6b4c26;
|
|
--water-wash: rgb(224 166 92 / 0.09);
|
|
--moss: #93c08a;
|
|
--moss-wash: rgb(147 192 138 / 0.12);
|
|
--ochre: #e98d72;
|
|
--ochre-wash: rgb(233 141 114 / 0.12);
|
|
--on-water: #171b20;
|
|
--cle: #e0a65c;
|
|
--shadow: 0 1px 2px rgb(0 0 0 / 0.32), 0 8px 28px rgb(0 0 0 / 0.3);
|
|
--shadow-strong: 0 2px 6px rgb(0 0 0 / 0.42), 0 18px 48px rgb(0 0 0 / 0.52);
|
|
--veil: rgb(0 0 0 / 0.5);
|
|
color-scheme: dark;
|
|
}
|
|
|
|
:root {
|
|
--font-ui: 'Nunito Variable', system-ui, -apple-system, 'Segoe UI', sans-serif;
|
|
--font-text: 'Literata Variable', 'Iowan Old Style', Georgia, serif;
|
|
--r-card: 16px;
|
|
--r-input: 12px;
|
|
--r-pill: 20px;
|
|
--r-icon: 14px;
|
|
--sidebar: 15.5rem;
|
|
--panel: 27rem;
|
|
--measure: 36rem;
|
|
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
-webkit-text-size-adjust: 100%;
|
|
text-size-adjust: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
font-family: var(--font-ui);
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
-webkit-font-smoothing: antialiased;
|
|
transition: background-color 0.2s ease, color 0.2s ease;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
margin: 0;
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
a {
|
|
color: var(--water);
|
|
text-decoration-thickness: 1px;
|
|
text-underline-offset: 3px;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
font: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--water);
|
|
outline-offset: 3px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--water-light);
|
|
color: var(--ink);
|
|
}
|
|
|
|
.visually-hidden {
|
|
position: absolute !important;
|
|
width: 1px;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
clip: rect(0 0 0 0);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Buttons — native, custom. */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.45rem;
|
|
min-height: 2.4rem;
|
|
padding: 0.5rem 1.1rem;
|
|
border: 0;
|
|
border-radius: var(--r-pill);
|
|
background: var(--surface-2);
|
|
color: var(--ink);
|
|
font-weight: 650;
|
|
font-size: 0.95rem;
|
|
text-decoration: none;
|
|
transition: transform 0.1s ease, background-color 0.15s ease, box-shadow 0.15s ease;
|
|
}
|
|
.btn:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
.btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
.btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
.btn.primary {
|
|
background: var(--water);
|
|
color: var(--on-water);
|
|
box-shadow: 0 6px 18px color-mix(in srgb, var(--water) 22%, transparent);
|
|
}
|
|
.btn.quiet {
|
|
background: transparent;
|
|
color: var(--ink-soft);
|
|
padding-inline: 0.6rem;
|
|
}
|
|
.btn.quiet:hover {
|
|
background: var(--water-wash);
|
|
color: var(--ink);
|
|
}
|
|
.btn.small {
|
|
min-height: 2.25rem;
|
|
padding: 0.3rem 0.8rem;
|
|
font-size: 0.88rem;
|
|
}
|
|
|
|
/* Fields — native, custom. */
|
|
.field {
|
|
display: grid;
|
|
gap: 0.35rem;
|
|
}
|
|
.field > span {
|
|
font-size: 0.82rem;
|
|
font-weight: 700;
|
|
color: var(--ink-soft);
|
|
}
|
|
.input,
|
|
.textarea,
|
|
.select {
|
|
width: 100%;
|
|
border: 0;
|
|
border-radius: var(--r-input);
|
|
background: var(--surface-2);
|
|
padding: 0.6rem 0.8rem;
|
|
min-height: 2.4rem;
|
|
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.06);
|
|
}
|
|
.textarea {
|
|
resize: vertical;
|
|
font-family: var(--font-text);
|
|
font-size: 1.02rem;
|
|
line-height: 1.65;
|
|
min-height: 9rem;
|
|
}
|
|
.input:focus-visible,
|
|
.textarea:focus-visible,
|
|
.select:focus-visible {
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
.card {
|
|
background: var(--surface);
|
|
border-radius: var(--r-card);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
padding: 0.1rem 0.55rem;
|
|
border-radius: var(--r-pill);
|
|
background: var(--surface-2);
|
|
color: var(--ink-soft);
|
|
font-size: 0.74rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.02em;
|
|
white-space: nowrap;
|
|
}
|
|
.tag.water {
|
|
background: var(--water-wash);
|
|
color: var(--water);
|
|
}
|
|
.tag.moss {
|
|
background: var(--moss-wash);
|
|
color: var(--moss);
|
|
}
|
|
.tag.ochre {
|
|
background: var(--ochre-wash);
|
|
color: var(--ochre);
|
|
}
|
|
|
|
.eyebrow {
|
|
font-family: var(--font-ui);
|
|
font-size: 0.74rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: var(--water);
|
|
}
|
|
|
|
.muted {
|
|
color: var(--ink-soft);
|
|
}
|
|
.faint {
|
|
color: var(--ink-faint);
|
|
}
|
|
|
|
/* The texts of reference. */
|
|
.prose {
|
|
font-family: var(--font-text);
|
|
font-size: clamp(1.04rem, 0.98rem + 0.25vw, 1.14rem);
|
|
line-height: 1.72;
|
|
font-variation-settings: 'opsz' 14;
|
|
hyphens: auto;
|
|
}
|
|
.prose p + p,
|
|
.prose p + ul,
|
|
.prose ul + p {
|
|
margin-top: 0.75em;
|
|
}
|
|
.prose ul,
|
|
.prose ol {
|
|
margin: 0.5em 0 0;
|
|
padding-left: 1.2em;
|
|
}
|
|
.prose li + li {
|
|
margin-top: 0.25em;
|
|
}
|
|
.prose strong {
|
|
font-weight: 650;
|
|
}
|
|
.prose code {
|
|
font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
|
|
font-size: 0.86em;
|
|
background: var(--surface-2);
|
|
padding: 0.05em 0.35em;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.diff-added {
|
|
background: var(--moss-wash);
|
|
color: var(--ink);
|
|
text-decoration: none;
|
|
border-radius: 4px;
|
|
}
|
|
.diff-removed {
|
|
background: var(--ochre-wash);
|
|
color: var(--ink-soft);
|
|
text-decoration: line-through;
|
|
text-decoration-thickness: 1px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|