lafrite/pdf_oralia_vibe
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): pose un design system unique pour toute l'interface

Browse Source 
Les pages melangeaient deux themes (sombre pour les tableaux de bord,
clair pour le flux d'extraction) et repetaient des utilitaires Tailwind
divergents : trois styles de boutons, quatre variantes de cartes, des
champs de saisie a paddings differents.

Definit dans style.css une palette unique (gray-950 fond, gray-900
surfaces, gray-700 bordures, blue-600 accent) et les classes composants
associees : page, card, btn, input, table, badge, spinner, empty-state.
Le shell s'y aligne et sa navigation est generee depuis une liste.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Bertrand Benjamin
2026-07-25 19:49:32 +02:00
parent 420a856e41
commit baeabb72d2
2 changed files with 208 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
frontend/src/style.css
View File

@@ -2,22 +2,204 @@
@tailwind components;
@tailwind utilities;
/* Custom scrollbar for JSON viewer */
/*
* Design system : une seule palette sombre pour toute l'application.
*
* gray-950 fond de page gray-900 surfaces (cartes, header)
* gray-800 sous-surfaces gray-700 bordures
* white / gray-400 / gray-500 textes principal / secondaire / tertiaire
* blue-600 accent
*/
@layer components {
/* --- Structure de page ------------------------------------------------ */
/* Conteneur racine d'une page : pleine largeur, marge laterale fixe. */
.page {
@apply flex-1 overflow-auto bg-gray-950 px-6 py-6;
}
/* Page sans defilement propre (split view type edition). */
.page-fixed {
@apply flex-1 flex flex-col overflow-hidden bg-gray-950;
}
.page-content {
@apply space-y-6;
}
.page-header {
@apply flex items-start justify-between gap-4;
}
.page-title {
@apply text-xl font-semibold text-white;
}
.page-subtitle {
@apply text-sm text-gray-400 mt-1;
}
/* --- Cartes ----------------------------------------------------------- */
.card {
@apply bg-gray-900 border border-gray-700 rounded-lg overflow-hidden;
}
.card-header {
@apply px-4 py-3 border-b border-gray-700 flex items-center justify-between gap-3;
}
.card-title {
@apply text-sm font-medium text-gray-300;
}
.card-body {
@apply p-4;
}
/* Bloc secondaire a l'interieur d'une carte. */
.subcard {
@apply bg-gray-800 border border-gray-700 rounded-lg;
}
/* --- Boutons ---------------------------------------------------------- */
.btn {
@apply inline-flex items-center justify-center gap-2 px-3 py-1.5 text-sm rounded-lg
transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
}
.btn-primary {
@apply bg-blue-600 text-white hover:bg-blue-700;
}
.btn-secondary {
@apply bg-gray-800 text-gray-300 border border-gray-700 hover:bg-gray-700 hover:text-white;
}
.btn-ghost {
@apply text-gray-400 hover:text-white hover:bg-gray-800;
}
.btn-warning {
@apply bg-amber-600 text-white hover:bg-amber-700;
}
.btn-danger {
@apply bg-red-600 text-white hover:bg-red-700;
}
/* Variante compacte pour les actions dans les listes et tableaux. */
.btn-sm {
@apply px-2 py-1 text-xs gap-1.5;
}
/* --- Formulaires ------------------------------------------------------ */
.form-label {
@apply block text-sm font-medium text-gray-300 mb-1;
}
/* [color-scheme:dark] : les widgets natifs (calendrier, spinners) suivent le theme. */
.input {
@apply w-full bg-gray-950 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white
placeholder-gray-500 focus:outline-none focus:border-blue-500 transition-colors
[color-scheme:dark];
}
select.input {
@apply cursor-pointer;
}
.form-hint {
@apply text-xs text-gray-500 mt-1;
}
/* --- Tableaux --------------------------------------------------------- */
/* Enveloppe a poser autour d'un <table> pour le defilement horizontal. */
.table-wrap {
@apply overflow-x-auto;
}
.table {
@apply w-full text-sm;
}
.table thead {
@apply bg-gray-800 border-b border-gray-700;
}
.table th {
@apply px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider whitespace-nowrap;
}
.table tbody {
@apply divide-y divide-gray-800;
}
.table td {
@apply px-4 py-3 text-gray-300;
}
.table tbody tr {
@apply hover:bg-gray-800/50 transition-colors;
}
/* --- Badges ----------------------------------------------------------- */
.badge {
@apply inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium;
}
.badge-neutral {
@apply bg-gray-700 text-gray-300;
}
.badge-info {
@apply bg-blue-500/15 text-blue-400;
}
.badge-success {
@apply bg-green-500/15 text-green-400;
}
.badge-warning {
@apply bg-amber-500/15 text-amber-400;
}
.badge-danger {
@apply bg-red-500/15 text-red-400;
}
/* --- Etats ------------------------------------------------------------ */
.empty-state {
@apply p-12 text-center text-gray-500;
}
.spinner {
@apply inline-block animate-spin rounded-full border-2 border-gray-700 border-t-blue-400;
}
}
/* Barres de defilement accordees au theme sombre. */
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #f1f5f9;
background: #111827; /* gray-900 */
border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #cbd5e1;
background: #374151; /* gray-700 */
border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
background: #4b5563; /* gray-600 */
}