Design moderne + seed reel engagements forgeron avec votes
- CSS: couleurs saturees sans pastels, border-radius 4-6px, inputs mood-aware - Header: allege (3.25rem), logo typographique, bouton connexion fin - Login: redesign complet avec steps dots et input natif style - Dashboard: entry cards epurees, tags toolbox compacts - Seed: 34 vraies clauses forgeron v2.0.0 (forum topic 33165) - Seed: 9 clauses certification (licence G1) - Seed: 11 votants simules + 3 sessions de vote (10 pour / 1 contre) - MoodSwitcher: dots colores au lieu d'icones Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Yvv
@@ -1,167 +1,207 @@
|
||||
/* ==========================================================================
|
||||
Glibredecision — Mood / Ambiance System
|
||||
4 moods: Peps (light), Zen (light), Chagrine (dark), Grave (dark)
|
||||
|
||||
Design: saturated, modern, zero pastels.
|
||||
========================================================================== */
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
Peps — Energique et chaleureux (Light)
|
||||
Peps — Energique, vif, franc (Light)
|
||||
-------------------------------------------------------------------------- */
|
||||
.mood-peps {
|
||||
--mood-bg: #ffffff;
|
||||
--mood-surface: #fffbf5;
|
||||
--mood-surface-hover: #fff5ea;
|
||||
--mood-text: #1a1a1a;
|
||||
--mood-text-muted: #6b6b6b;
|
||||
--mood-accent: #e85d26;
|
||||
--mood-accent-soft: #fff3ed;
|
||||
--mood-bg: #fafafa;
|
||||
--mood-surface: #ffffff;
|
||||
--mood-surface-hover: #f5f0ec;
|
||||
--mood-text: #18120e;
|
||||
--mood-text-muted: #6e5f52;
|
||||
--mood-accent: #d44a10;
|
||||
--mood-accent-soft: rgba(212, 74, 16, 0.08);
|
||||
--mood-accent-text: #ffffff;
|
||||
--mood-border: #fde8d8;
|
||||
--mood-success: #22c55e;
|
||||
--mood-warning: #f59e0b;
|
||||
--mood-error: #ef4444;
|
||||
--mood-gradient: linear-gradient(135deg, #fff8f0 0%, #ffffff 100%);
|
||||
--mood-shadow: rgba(232, 93, 38, 0.08);
|
||||
--mood-border: #e0d5cb;
|
||||
--mood-success: #18843b;
|
||||
--mood-warning: #c27e07;
|
||||
--mood-error: #c42b2b;
|
||||
--mood-gradient: linear-gradient(160deg, #faf8f5 0%, #ffffff 50%, #faf7f4 100%);
|
||||
--mood-shadow: rgba(120, 60, 10, 0.06);
|
||||
--mood-input-bg: #ffffff;
|
||||
--mood-input-border: #c9bdb0;
|
||||
--mood-input-focus: #d44a10;
|
||||
|
||||
--mood-status-prepa: #fed7aa;
|
||||
--mood-status-prepa-text: #9a3412;
|
||||
--mood-status-vote: #bfdbfe;
|
||||
--mood-status-vote-text: #1e40af;
|
||||
--mood-status-vigueur: #bbf7d0;
|
||||
--mood-status-vigueur-text: #166534;
|
||||
--mood-status-clos: #e5e7eb;
|
||||
--mood-status-clos-text: #374151;
|
||||
--mood-status-prepa: #b35c0a;
|
||||
--mood-status-prepa-bg: rgba(179, 92, 10, 0.12);
|
||||
--mood-status-vote: #1856a8;
|
||||
--mood-status-vote-bg: rgba(24, 86, 168, 0.10);
|
||||
--mood-status-vigueur: #18843b;
|
||||
--mood-status-vigueur-bg: rgba(24, 132, 59, 0.10);
|
||||
--mood-status-clos: #5c5c5c;
|
||||
--mood-status-clos-bg: rgba(92, 92, 92, 0.08);
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
Zen — Calme et serein (Light)
|
||||
Zen — Ancre, equilibre, sobre (Light)
|
||||
-------------------------------------------------------------------------- */
|
||||
.mood-zen {
|
||||
--mood-bg: #f8faf8;
|
||||
--mood-bg: #f7f9f7;
|
||||
--mood-surface: #ffffff;
|
||||
--mood-surface-hover: #f0f7f2;
|
||||
--mood-text: #1a2e1a;
|
||||
--mood-text-muted: #5f7a5f;
|
||||
--mood-accent: #4a9e6f;
|
||||
--mood-accent-soft: #ecf5ef;
|
||||
--mood-surface-hover: #edf3ee;
|
||||
--mood-text: #141e14;
|
||||
--mood-text-muted: #4a6650;
|
||||
--mood-accent: #2d7a4a;
|
||||
--mood-accent-soft: rgba(45, 122, 74, 0.07);
|
||||
--mood-accent-text: #ffffff;
|
||||
--mood-border: #d4e7d9;
|
||||
--mood-success: #34d399;
|
||||
--mood-warning: #fbbf24;
|
||||
--mood-error: #f87171;
|
||||
--mood-gradient: linear-gradient(135deg, #f0f7f2 0%, #f8faf8 100%);
|
||||
--mood-shadow: rgba(74, 158, 111, 0.08);
|
||||
--mood-border: #c2d4c6;
|
||||
--mood-success: #1d8a42;
|
||||
--mood-warning: #b07309;
|
||||
--mood-error: #be3232;
|
||||
--mood-gradient: linear-gradient(160deg, #f4f8f4 0%, #ffffff 50%, #f5f8f5 100%);
|
||||
--mood-shadow: rgba(30, 80, 50, 0.05);
|
||||
--mood-input-bg: #ffffff;
|
||||
--mood-input-border: #a8c0ad;
|
||||
--mood-input-focus: #2d7a4a;
|
||||
|
||||
--mood-status-prepa: #fde68a;
|
||||
--mood-status-prepa-text: #78350f;
|
||||
--mood-status-vote: #a7f3d0;
|
||||
--mood-status-vote-text: #065f46;
|
||||
--mood-status-vigueur: #bbf7d0;
|
||||
--mood-status-vigueur-text: #166534;
|
||||
--mood-status-clos: #d1d5db;
|
||||
--mood-status-clos-text: #374151;
|
||||
--mood-status-prepa: #9e6b0a;
|
||||
--mood-status-prepa-bg: rgba(158, 107, 10, 0.10);
|
||||
--mood-status-vote: #1565a5;
|
||||
--mood-status-vote-bg: rgba(21, 101, 165, 0.10);
|
||||
--mood-status-vigueur: #1d8a42;
|
||||
--mood-status-vigueur-bg: rgba(29, 138, 66, 0.10);
|
||||
--mood-status-clos: #606060;
|
||||
--mood-status-clos-bg: rgba(96, 96, 96, 0.08);
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
Chagrine — Profond et subtil (Dark)
|
||||
Chagrine — Dense, veloute, introspectif (Dark)
|
||||
-------------------------------------------------------------------------- */
|
||||
.mood-chagrine {
|
||||
--mood-bg: #1a1625;
|
||||
--mood-surface: #231e30;
|
||||
--mood-surface-hover: #2d2640;
|
||||
--mood-text: #e8e0f0;
|
||||
--mood-text-muted: #9b8fb5;
|
||||
--mood-accent: #9b7fd4;
|
||||
--mood-accent-soft: #2d2640;
|
||||
--mood-bg: #16121e;
|
||||
--mood-surface: #1e1828;
|
||||
--mood-surface-hover: #281f36;
|
||||
--mood-text: #e0d8ec;
|
||||
--mood-text-muted: #8e80a8;
|
||||
--mood-accent: #8b6cc4;
|
||||
--mood-accent-soft: rgba(139, 108, 196, 0.12);
|
||||
--mood-accent-text: #ffffff;
|
||||
--mood-border: #342d45;
|
||||
--mood-success: #6ee7b7;
|
||||
--mood-warning: #fcd34d;
|
||||
--mood-error: #fca5a5;
|
||||
--mood-gradient: linear-gradient(135deg, #1a1625 0%, #231e30 100%);
|
||||
--mood-shadow: rgba(155, 127, 212, 0.12);
|
||||
--mood-border: #2e2540;
|
||||
--mood-success: #48c278;
|
||||
--mood-warning: #d4a030;
|
||||
--mood-error: #e06060;
|
||||
--mood-gradient: linear-gradient(160deg, #16121e 0%, #1e1828 50%, #1a1524 100%);
|
||||
--mood-shadow: rgba(100, 60, 180, 0.10);
|
||||
--mood-input-bg: #1e1828;
|
||||
--mood-input-border: #3a2e52;
|
||||
--mood-input-focus: #8b6cc4;
|
||||
|
||||
--mood-status-prepa: #4c1d95;
|
||||
--mood-status-prepa-text: #ddd6fe;
|
||||
--mood-status-vote: #312e81;
|
||||
--mood-status-vote-text: #c7d2fe;
|
||||
--mood-status-vigueur: #064e3b;
|
||||
--mood-status-vigueur-text: #a7f3d0;
|
||||
--mood-status-clos: #2d2640;
|
||||
--mood-status-clos-text: #9b8fb5;
|
||||
--mood-status-prepa: #c4a050;
|
||||
--mood-status-prepa-bg: rgba(196, 160, 80, 0.14);
|
||||
--mood-status-vote: #7090d0;
|
||||
--mood-status-vote-bg: rgba(112, 144, 208, 0.14);
|
||||
--mood-status-vigueur: #48c278;
|
||||
--mood-status-vigueur-bg: rgba(72, 194, 120, 0.14);
|
||||
--mood-status-clos: #706080;
|
||||
--mood-status-clos-bg: rgba(112, 96, 128, 0.12);
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
Grave — Serieux et solennel (Dark)
|
||||
Grave — Mineral, solennel, net (Dark)
|
||||
-------------------------------------------------------------------------- */
|
||||
.mood-grave {
|
||||
--mood-bg: #141518;
|
||||
--mood-surface: #1c1d21;
|
||||
--mood-surface-hover: #262420;
|
||||
--mood-text: #e5e5e0;
|
||||
--mood-text-muted: #8a8a85;
|
||||
--mood-accent: #d4a545;
|
||||
--mood-accent-soft: #262420;
|
||||
--mood-accent-text: #141518;
|
||||
--mood-border: #2a2b30;
|
||||
--mood-success: #86efac;
|
||||
--mood-warning: #fde68a;
|
||||
--mood-error: #fca5a5;
|
||||
--mood-gradient: linear-gradient(135deg, #141518 0%, #1c1d21 100%);
|
||||
--mood-shadow: rgba(212, 165, 69, 0.10);
|
||||
--mood-bg: #111214;
|
||||
--mood-surface: #191a1e;
|
||||
--mood-surface-hover: #22201c;
|
||||
--mood-text: #e2e0d8;
|
||||
--mood-text-muted: #8a877e;
|
||||
--mood-accent: #c49530;
|
||||
--mood-accent-soft: rgba(196, 149, 48, 0.10);
|
||||
--mood-accent-text: #111214;
|
||||
--mood-border: #2a2a2e;
|
||||
--mood-success: #4ac070;
|
||||
--mood-warning: #d4a530;
|
||||
--mood-error: #d85050;
|
||||
--mood-gradient: linear-gradient(160deg, #111214 0%, #191a1e 50%, #141518 100%);
|
||||
--mood-shadow: rgba(160, 120, 30, 0.08);
|
||||
--mood-input-bg: #191a1e;
|
||||
--mood-input-border: #38362e;
|
||||
--mood-input-focus: #c49530;
|
||||
|
||||
--mood-status-prepa: #78350f;
|
||||
--mood-status-prepa-text: #fde68a;
|
||||
--mood-status-vote: #1e3a5f;
|
||||
--mood-status-vote-text: #93c5fd;
|
||||
--mood-status-vigueur: #14532d;
|
||||
--mood-status-vigueur-text: #86efac;
|
||||
--mood-status-clos: #27272a;
|
||||
--mood-status-clos-text: #a1a1aa;
|
||||
--mood-status-prepa: #c49530;
|
||||
--mood-status-prepa-bg: rgba(196, 149, 48, 0.14);
|
||||
--mood-status-vote: #5a90c8;
|
||||
--mood-status-vote-bg: rgba(90, 144, 200, 0.14);
|
||||
--mood-status-vigueur: #4ac070;
|
||||
--mood-status-vigueur-bg: rgba(74, 192, 112, 0.14);
|
||||
--mood-status-clos: #686860;
|
||||
--mood-status-clos-bg: rgba(104, 104, 96, 0.12);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Base Utilities
|
||||
Global design tokens — modern, refined, thin
|
||||
========================================================================== */
|
||||
|
||||
/* Transition all mood changes smoothly */
|
||||
body {
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* Status labels — clickable pill style */
|
||||
/* --- Status pills — compact, saturated, NO pastels --- */
|
||||
.status-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
padding: 3px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
transition: all 0.15s ease;
|
||||
user-select: none;
|
||||
border: none;
|
||||
}
|
||||
.status-pill:hover {
|
||||
filter: brightness(0.92);
|
||||
transform: scale(1.05);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
.status-pill.active {
|
||||
ring: 2px;
|
||||
ring-offset: 2px;
|
||||
box-shadow: 0 0 0 2px var(--mood-accent);
|
||||
}
|
||||
|
||||
.status-prepa {
|
||||
background: var(--mood-status-prepa);
|
||||
color: var(--mood-status-prepa-text);
|
||||
background: var(--mood-status-prepa-bg);
|
||||
color: var(--mood-status-prepa);
|
||||
}
|
||||
.status-vote {
|
||||
background: var(--mood-status-vote);
|
||||
color: var(--mood-status-vote-text);
|
||||
background: var(--mood-status-vote-bg);
|
||||
color: var(--mood-status-vote);
|
||||
}
|
||||
.status-vigueur {
|
||||
background: var(--mood-status-vigueur);
|
||||
color: var(--mood-status-vigueur-text);
|
||||
background: var(--mood-status-vigueur-bg);
|
||||
color: var(--mood-status-vigueur);
|
||||
}
|
||||
.status-clos {
|
||||
background: var(--mood-status-clos);
|
||||
color: var(--mood-status-clos-text);
|
||||
background: var(--mood-status-clos-bg);
|
||||
color: var(--mood-status-clos);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Global overrides — Nuxt UI refinements
|
||||
========================================================================== */
|
||||
|
||||
/* Inputs: thin, clean, mood-aware */
|
||||
:root .mood-peps,
|
||||
:root .mood-zen,
|
||||
:root .mood-chagrine,
|
||||
:root .mood-grave {
|
||||
/* UInput / UTextarea */
|
||||
--ui-border: var(--mood-input-border);
|
||||
--ui-bg: var(--mood-input-bg);
|
||||
--ui-text-highlighted: var(--mood-accent);
|
||||
}
|
||||
|
||||
/* UButton refinements */
|
||||
:root .mood-peps button[class*="UButton"],
|
||||
:root .mood-zen button[class*="UButton"],
|
||||
:root .mood-chagrine button[class*="UButton"],
|
||||
:root .mood-grave button[class*="UButton"] {
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user