forked from yvv/decision
YvvandClaude Opus 5.5
7a022dd35e
- Accueil sobre, menu complet à gauche (Décisions, Docs de référence, Mandats, Protocoles), intro demandée, quatre sections, connexion Ğ1. - Lecteur : texte en vigueur en Literata, actions contextuelles par article (le vote, propositions, proposer), propositions en cours sous la « surface » avec leur niveau d'eau, aperçus « si les bien cotées passent » / « si tout passe », langue du texte fr/en/es (traductions éditoriales). - Panneau : vote pour/contre, seuil et formule (MathML), inertie et son changement (voté en inertie +), coquille sans vote, traduction, signalement de contradiction, historique des corrections. - trustinWallet (/acces) : groupes et membres, invitations à usage unique, administrateurs, retours d'usage. - Contrôles : vitest (markdown, catalogues, anti-lexique), Playwright C1–C10 + M1. - Sections du seed portées jusqu'à l'écran. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
323 lines
6.3 KiB
CSS
323 lines
6.3 KiB
CSS
/* libreDecision v3 — tokens and base.
|
|
Two moods: « pierre » (cool stone, light) and « nuit » (well at night, dark).
|
|
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;
|
|
--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;
|
|
}
|
|
|
|
[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;
|
|
--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;
|
|
}
|
|
|
|
: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 rgb(31 111 120 / 0.22);
|
|
}
|
|
.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;
|
|
}
|
|
}
|