yvv/decision
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Palettes harmoniques, logo g breve (Decision), Protocoles promu

Browse Source 
- Moods: palettes multi-teintes (secondary, tertiary par mood)
  Peps: corail/ocre/bleu electrique ; Zen: sauge/lavande/terre cuite
  Chagrine: violet/cyan/magenta/or ; Grave: ambre/cuivre/bleu acier
- Logo: gavel + g(Decision) — incompletude de Godel
- Dashboard: 4 cartes d'entree (Documents, Decisions, Protocoles, Mandats)
  chacune avec sa couleur propre
- Protocoles promu au meme rang que les autres sections
  (boite a outils de vote + workflows n8n via MCP)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Yvv
2026-02-28 19:39:25 +01:00
parent 61a414d214
commit 9b6388a600
5 changed files with 169 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/app/app.vue
View File

@@ -90,8 +90,8 @@ function isActive(to: string) {
<UIcon name="i-lucide-menu" class="text-lg" />
</button>
<NuxtLink to="/" class="app-header__logo">
<span class="app-header__logo-mark">G</span>
<span class="app-header__logo-text">libredecision</span>
<UIcon name="i-lucide-gavel" class="app-header__logo-icon" />
<span class="app-header__logo-g">ğ</span><span class="app-header__logo-paren">(</span><span class="app-header__logo-word">Decision</span><span class="app-header__logo-paren">)</span>
</NuxtLink>
</div>
@@ -207,7 +207,7 @@ function isActive(to: string) {
<!-- Footer -->
<footer class="app-footer">
<span>Glibredecision v0.1.0</span>
<span>ğ(Decision) v0.1.0</span>
<span class="app-footer__sep">·</span>
<span>Licence libre</span>
</footer>
@@ -268,18 +268,31 @@ function isActive(to: string) {
.app-header__logo {
text-decoration: none;
display: flex;
align-items: baseline;
gap: 0;
align-items: center;
gap: 0.375rem;
}
.app-header__logo-mark {
.app-header__logo-icon {
font-size: 1.125rem;
color: var(--mood-accent);
}
.app-header__logo-g {
font-size: 1.25rem;
font-weight: 800;
color: var(--mood-accent);
line-height: 1;
font-style: italic;
}
.app-header__logo-text {
.app-header__logo-paren {
font-size: 0.9375rem;
font-weight: 300;
color: var(--mood-text-muted);
letter-spacing: -0.02em;
}
.app-header__logo-word {
font-size: 0.9375rem;
font-weight: 600;
color: var(--mood-text);

223
frontend/app/assets/css/moods.css
View File

@@ -1,140 +1,150 @@
/* ==========================================================================
Glibredecision — Mood / Ambiance System
4 moods: Peps (light), Zen (light), Chagrine (dark), Grave (dark)
Design: saturated, modern, zero pastels.
ğ(Decision) — Mood / Ambiance System
Palettes harmoniques variees, colores en lite, lumineux en dark.
========================================================================== */
/* --------------------------------------------------------------------------
Peps — Energique, vif, franc (Light)
Peps — Chaud, colore, tonique (Light)
Palette: corail / ocre / bleu electrique / vert vif
-------------------------------------------------------------------------- */
.mood-peps {
--mood-bg: #fafafa;
--mood-bg: #faf9f6;
--mood-surface: #ffffff;
--mood-surface-hover: #f5f0ec;
--mood-text: #18120e;
--mood-text-muted: #6e5f52;
--mood-surface-hover: #fdf2ec;
--mood-text: #1e1410;
--mood-text-muted: #7a5e48;
--mood-accent: #d44a10;
--mood-accent-soft: rgba(212, 74, 16, 0.08);
--mood-accent-text: #ffffff;
--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-border: #e8d8c8;
--mood-secondary: #2874a6;
--mood-tertiary: #c4841d;
--mood-success: #1a8c3e;
--mood-warning: #c47d0a;
--mood-error: #c23028;
--mood-gradient: linear-gradient(145deg, #fdf8f0 0%, #ffffff 40%, #f0f6fb 100%);
--mood-shadow: rgba(180, 80, 20, 0.07);
--mood-input-bg: #ffffff;
--mood-input-border: #c9bdb0;
--mood-input-border: #d4c0aa;
--mood-input-focus: #d44a10;
--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);
--mood-status-prepa: #b8600e;
--mood-status-prepa-bg: rgba(184, 96, 14, 0.12);
--mood-status-vote: #2874a6;
--mood-status-vote-bg: rgba(40, 116, 166, 0.10);
--mood-status-vigueur: #1a8c3e;
--mood-status-vigueur-bg: rgba(26, 140, 62, 0.10);
--mood-status-clos: #6e5844;
--mood-status-clos-bg: rgba(110, 88, 68, 0.08);
}
/* --------------------------------------------------------------------------
Zen — Ancre, equilibre, sobre (Light)
Zen — Frais, vegetal, vivant (Light)
Palette: sauge / lavande / terre cuite / bleu ciel
-------------------------------------------------------------------------- */
.mood-zen {
--mood-bg: #f7f9f7;
--mood-bg: #f6f9f5;
--mood-surface: #ffffff;
--mood-surface-hover: #edf3ee;
--mood-text: #141e14;
--mood-text-muted: #4a6650;
--mood-accent: #2d7a4a;
--mood-accent-soft: rgba(45, 122, 74, 0.07);
--mood-surface-hover: #ecf4e8;
--mood-text: #172014;
--mood-text-muted: #4e6d48;
--mood-accent: #2e8250;
--mood-accent-soft: rgba(46, 130, 80, 0.07);
--mood-accent-text: #ffffff;
--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-border: #bdd4b8;
--mood-secondary: #7868a6;
--mood-tertiary: #b86830;
--mood-success: #1d9048;
--mood-warning: #a87020;
--mood-error: #b83838;
--mood-gradient: linear-gradient(145deg, #f2f8ef 0%, #ffffff 40%, #f4f0f8 100%);
--mood-shadow: rgba(40, 100, 60, 0.06);
--mood-input-bg: #ffffff;
--mood-input-border: #a8c0ad;
--mood-input-focus: #2d7a4a;
--mood-input-border: #a4c4a0;
--mood-input-focus: #2e8250;
--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);
--mood-status-prepa: #a87020;
--mood-status-prepa-bg: rgba(168, 112, 32, 0.10);
--mood-status-vote: #6858a0;
--mood-status-vote-bg: rgba(104, 88, 160, 0.10);
--mood-status-vigueur: #1d9048;
--mood-status-vigueur-bg: rgba(29, 144, 72, 0.10);
--mood-status-clos: #607858;
--mood-status-clos-bg: rgba(96, 120, 88, 0.08);
}
/* --------------------------------------------------------------------------
Chagrine — Dense, veloute, introspectif (Dark)
Chagrine — Lumineux, electrique, profond (Dark)
Palette: violet vif / cyan / magenta / or
-------------------------------------------------------------------------- */
.mood-chagrine {
--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-bg: #14101e;
--mood-surface: #1c1628;
--mood-surface-hover: #261e38;
--mood-text: #e4daf0;
--mood-text-muted: #9888b8;
--mood-accent: #9470d8;
--mood-accent-soft: rgba(148, 112, 216, 0.12);
--mood-accent-text: #ffffff;
--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-border: #302448;
--mood-secondary: #38c8c8;
--mood-tertiary: #e07090;
--mood-success: #40d888;
--mood-warning: #e0b040;
--mood-error: #e86060;
--mood-gradient: linear-gradient(145deg, #14101e 0%, #1c1628 40%, #101820 100%);
--mood-shadow: rgba(120, 80, 200, 0.12);
--mood-input-bg: #1c1628;
--mood-input-border: #3c2c58;
--mood-input-focus: #9470d8;
--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);
--mood-status-prepa: #e0b040;
--mood-status-prepa-bg: rgba(224, 176, 64, 0.15);
--mood-status-vote: #38c8c8;
--mood-status-vote-bg: rgba(56, 200, 200, 0.14);
--mood-status-vigueur: #40d888;
--mood-status-vigueur-bg: rgba(64, 216, 136, 0.14);
--mood-status-clos: #7868a0;
--mood-status-clos-bg: rgba(120, 104, 160, 0.12);
}
/* --------------------------------------------------------------------------
Grave — Mineral, solennel, net (Dark)
Grave — Chaud, mineral, lumineux (Dark)
Palette: ambre / cuivre / bleu acier / vert oxyde
-------------------------------------------------------------------------- */
.mood-grave {
--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-bg: #12110e;
--mood-surface: #1a1814;
--mood-surface-hover: #24201a;
--mood-text: #e8e0d0;
--mood-text-muted: #a09880;
--mood-accent: #d09828;
--mood-accent-soft: rgba(208, 152, 40, 0.10);
--mood-accent-text: #12110e;
--mood-border: #302c24;
--mood-secondary: #5898c8;
--mood-tertiary: #c87848;
--mood-success: #48c870;
--mood-warning: #d0a030;
--mood-error: #d05050;
--mood-gradient: linear-gradient(145deg, #12110e 0%, #1a1814 40%, #141618 100%);
--mood-shadow: rgba(180, 130, 40, 0.10);
--mood-input-bg: #1a1814;
--mood-input-border: #3a3428;
--mood-input-focus: #d09828;
--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);
--mood-status-prepa: #c87848;
--mood-status-prepa-bg: rgba(200, 120, 72, 0.15);
--mood-status-vote: #5898c8;
--mood-status-vote-bg: rgba(88, 152, 200, 0.14);
--mood-status-vigueur: #48c870;
--mood-status-vigueur-bg: rgba(72, 200, 112, 0.14);
--mood-status-clos: #787060;
--mood-status-clos-bg: rgba(120, 112, 96, 0.12);
}
/* ==========================================================================
Global design tokens — modern, refined, thin
Global design tokens
========================================================================== */
body {
@@ -143,7 +153,7 @@ body {
-moz-osx-font-smoothing: grayscale;
}
/* --- Status pills — compact, saturated, NO pastels --- */
/* --- Status pills --- */
.status-pill {
display: inline-flex;
align-items: center;
@@ -183,25 +193,14 @@ body {
}
/* ==========================================================================
Global overrides — Nuxt UI refinements
Nuxt UI overrides
========================================================================== */
/* 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;
}

8
frontend/app/composables/useMood.ts
View File

@@ -12,10 +12,10 @@ export interface Mood {
const STORAGE_KEY = 'glibredecision_mood'
const moods: Mood[] = [
{ id: 'peps', label: 'Peps', description: 'Energique et franc', icon: 'i-lucide-sun', color: '#d44a10', isDark: false },
{ id: 'zen', label: 'Zen', description: 'Ancre et sobre', icon: 'i-lucide-leaf', color: '#2d7a4a', isDark: false },
{ id: 'chagrine', label: 'Chagrine', description: 'Dense et veloute', icon: 'i-lucide-moon', color: '#8b6cc4', isDark: true },
{ id: 'grave', label: 'Grave', description: 'Mineral et solennel', icon: 'i-lucide-shield', color: '#c49530', isDark: true },
{ id: 'peps', label: 'Peps', description: 'Chaud et tonique', icon: 'i-lucide-sun', color: '#d44a10', isDark: false },
{ id: 'zen', label: 'Zen', description: 'Frais et vegetal', icon: 'i-lucide-leaf', color: '#2e8250', isDark: false },
{ id: 'chagrine', label: 'Chagrine', description: 'Electrique et profond', icon: 'i-lucide-moon', color: '#9470d8', isDark: true },
{ id: 'grave', label: 'Grave', description: 'Mineral et lumineux', icon: 'i-lucide-shield', color: '#d09828', isDark: true },
]
const currentMood: Ref<string> = ref('peps')

38
frontend/app/pages/index.vue
View File

@@ -26,7 +26,7 @@ onMounted(async () => {
}
})
/** Entry cards — the 3 main doors. */
/** Entry cards — the 4 main doors. */
const entryCards = computed(() => [
{
key: 'documents',
@@ -37,6 +37,7 @@ const entryCards = computed(() => [
countLabel: `${documents.activeDocuments.length} actif${documents.activeDocuments.length > 1 ? 's' : ''}`,
totalLabel: `${documents.list.length} au total`,
description: 'Textes fondateurs sous vote permanent',
color: 'var(--mood-accent)',
},
{
key: 'decisions',
@@ -47,6 +48,18 @@ const entryCards = computed(() => [
countLabel: `${decisions.activeDecisions.length} en cours`,
totalLabel: `${decisions.list.length} au total`,
description: 'Processus de decision collectifs',
color: 'var(--mood-secondary, var(--mood-accent))',
},
{
key: 'protocoles',
title: 'Protocoles',
icon: 'i-lucide-settings',
to: '/protocols',
count: protocols.protocols.length,
countLabel: `${protocols.protocols.length} modalite${protocols.protocols.length > 1 ? 's' : ''}`,
totalLabel: 'Boite a outils de vote + workflows',
description: 'Modalites de vote, formules, workflows n8n',
color: 'var(--mood-tertiary, var(--mood-accent))',
},
{
key: 'mandats',
@@ -57,6 +70,7 @@ const entryCards = computed(() => [
countLabel: null,
totalLabel: null,
description: 'Un contexte, un objectif, une duree, une ou plusieurs nominations ; par defaut : nomination d\'un binome.',
color: 'var(--mood-success)',
},
])
@@ -91,7 +105,7 @@ function formatDate(dateStr: string): string {
<div class="dash">
<!-- Welcome -->
<div class="dash__welcome">
<h1 class="dash__title">Glibredecision</h1>
<h1 class="dash__title"><span class="dash__title-g">ğ</span><span class="dash__title-paren">(</span>Decision<span class="dash__title-paren">)</span></h1>
<p class="dash__subtitle">
Decisions collectives pour la communaute Duniter / G1
</p>
@@ -100,7 +114,7 @@ function formatDate(dateStr: string): string {
<!-- Entry cards -->
<div class="dash__entries">
<template v-if="loading">
<LoadingSkeleton v-for="i in 3" :key="i" :lines="3" card />
<LoadingSkeleton v-for="i in 4" :key="i" :lines="3" card />
</template>
<template v-else>
<NuxtLink
@@ -108,6 +122,7 @@ function formatDate(dateStr: string): string {
:key="card.key"
:to="card.to"
class="entry-card"
:style="{ '--card-color': card.color }"
>
<div class="entry-card__icon">
<UIcon :name="card.icon" class="text-xl" />
@@ -253,6 +268,13 @@ function formatDate(dateStr: string): string {
color: var(--mood-accent);
letter-spacing: -0.02em;
}
.dash__title-g {
font-style: italic;
}
.dash__title-paren {
font-weight: 300;
color: var(--mood-text-muted);
}
.dash__subtitle {
margin-top: 0.25rem;
font-size: 0.875rem;
@@ -280,7 +302,7 @@ function formatDate(dateStr: string): string {
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.entry-card:hover {
border-color: var(--mood-accent);
border-color: var(--card-color, var(--mood-accent));
box-shadow: 0 2px 8px var(--mood-shadow);
}
@@ -291,8 +313,8 @@ function formatDate(dateStr: string): string {
align-items: center;
justify-content: center;
border-radius: 6px;
background: var(--mood-accent-soft);
color: var(--mood-accent);
background: color-mix(in srgb, var(--card-color, var(--mood-accent)) 10%, transparent);
color: var(--card-color, var(--mood-accent));
margin-bottom: 0.25rem;
}
@@ -306,7 +328,7 @@ function formatDate(dateStr: string): string {
.entry-card__count {
font-size: 1.25rem;
font-weight: 800;
color: var(--mood-accent);
color: var(--card-color, var(--mood-accent));
line-height: 1;
}
@@ -331,7 +353,7 @@ function formatDate(dateStr: string): string {
}
.entry-card:hover .entry-card__arrow {
opacity: 1;
color: var(--mood-accent);
color: var(--card-color, var(--mood-accent));
}
/* --- Connect banner --- */

6
frontend/app/pages/login.vue
View File

@@ -57,9 +57,11 @@ onMounted(() => {
<div class="login-card">
<!-- Logo -->
<div class="login-card__header">
<span class="login-card__logo">G</span>
<div class="login-card__logo">
<UIcon name="i-lucide-gavel" class="text-xl" />
</div>
<h1 class="login-card__title">Connexion</h1>
<p class="login-card__subtitle">Identite Duniter V2 · Ed25519</p>
<p class="login-card__subtitle">ğ(Decision) · Duniter V2 · Ed25519</p>
</div>
<!-- Steps indicator -->