OpenMind v1 : cartes mentales libres, local-first et dockerisees
Premiere version fonctionnelle, demarrable avec `docker compose up -d --build` sur http://localhost:8080. Architecture - Frontend React 18 / TypeScript strict / Vite / Tailwind, canvas @xyflow/react, etat Zustand, persistance IndexedDB via Dexie, auto-layout dagre. - Backend FastAPI / SQLAlchemy 2 / Pydantic v2 / SQLite, qui sert aussi les fichiers statiques du frontend compile. - Image Docker multi-stage, un seul service, bind mount ./data pour SQLite. Local-first Les cartes restent dans le navigateur. Le serveur ne recoit une carte que sur demande explicite de partage. Partage Deux secrets distincts : share_token public en lecture seule dans l'URL, et management_token conserve uniquement cote client, transmis en en-tete pour les modifications et stocke hashe en base. Fonctionnalites Tableau de bord, editeur complet (undo/redo, copier/coller, raccourcis, branches repliables, recherche), 9 themes, 4 dispositions automatiques, panneau de proprietes, import/export .mmap, export PNG/SVG/PDF, impression, page publique en lecture seule, PWA. Qualite 25 tests pytest et 43 tests vitest au vert, ruff et ESLint sans erreur, TypeScript strict sans erreur. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
97
frontend/src/styles/index.css
Normal file
97
frontend/src/styles/index.css
Normal file
@@ -0,0 +1,97 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-zinc-50 text-zinc-900 antialiased dark:bg-zinc-950 dark:text-zinc-100;
|
||||
font-family: theme('fontFamily.sans');
|
||||
}
|
||||
|
||||
/* Focus visible homogene et lisible sur les deux themes. */
|
||||
:focus-visible {
|
||||
@apply outline-none ring-2 ring-indigo-500 ring-offset-2 ring-offset-white dark:ring-offset-zinc-950;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.panel {
|
||||
@apply rounded-xl border border-zinc-200 bg-white shadow-panel dark:border-zinc-800 dark:bg-zinc-900;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
@apply mb-1 block text-xs font-medium uppercase tracking-wide text-zinc-500 dark:text-zinc-400;
|
||||
}
|
||||
|
||||
.field-input {
|
||||
@apply w-full rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-indigo-400 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder:text-zinc-500;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------- Canvas */
|
||||
|
||||
/* L'attribution React Flow reste visible a l'ecran ; elle est retiree
|
||||
uniquement des exports et de l'impression. */
|
||||
.openmind-exporting .react-flow__attribution {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.openmind-canvas .react-flow__handle {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.9);
|
||||
background: rgba(99, 102, 241, 0.9);
|
||||
opacity: 0;
|
||||
transition: opacity 120ms ease-out;
|
||||
}
|
||||
|
||||
.openmind-canvas .react-flow__node:hover .react-flow__handle,
|
||||
.openmind-canvas .react-flow__node.selected .react-flow__handle {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.openmind-canvas .react-flow__node.selected .mind-node {
|
||||
box-shadow: 0 0 0 2px #6366f1, 0 0 0 5px rgba(99, 102, 241, 0.22);
|
||||
}
|
||||
|
||||
.mind-node {
|
||||
transition:
|
||||
box-shadow 120ms ease-out,
|
||||
transform 120ms ease-out;
|
||||
}
|
||||
|
||||
.mind-node--search-hit {
|
||||
animation: mind-node-pulse 1.6s ease-out 2;
|
||||
}
|
||||
|
||||
@keyframes mind-node-pulse {
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
|
||||
}
|
||||
35% {
|
||||
box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.55);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.mind-node,
|
||||
.mind-node--search-hit {
|
||||
transition: none;
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user