Johan LEROY
d6c110fc3b
Refonte front (packages/web) : coquille applicative partagée (sidebar desktop + barre d'onglets mobile + PageHeader, langue/push/logout centralisés) pilotée par route.meta.layout ; design system (BaseButton/BaseBadge/SegmentedControl/EmptyState/ SkeletonRow, anneau de focus, icônes @lucide/vue) ; tri/filtre/recherche/pagination côté client via useListControls (+ synchro URL) sur sessions/worktrees/groupes ; section « À traiter », palette de commandes ⌘K, toasts. Aucune modif serveur/protocole/DB.
54 lines
2.7 KiB
CSS
54 lines
2.7 KiB
CSS
@import 'tailwindcss';
|
|
|
|
/* Tokens additifs (la palette zinc/emerald/amber/sky/red reste celle de Tailwind). */
|
|
@theme {
|
|
--shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.4);
|
|
--shadow-pop: 0 12px 32px -12px rgb(0 0 0 / 0.7);
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#app {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-zinc-950);
|
|
color: var(--color-zinc-200);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
@layer components {
|
|
/* Champs : rayon unifié + anneau de focus visible (absent auparavant). */
|
|
.input {
|
|
@apply w-full rounded-lg border border-zinc-700 bg-zinc-950 px-2.5 py-1.5 text-sm text-zinc-100 outline-none transition-colors placeholder:text-zinc-600 focus-visible:border-zinc-500 focus-visible:ring-2 focus-visible:ring-emerald-500/40;
|
|
}
|
|
|
|
/* Boutons : socle CSS pour les usages hors composant (ex. RouterLink class="btn").
|
|
Le composant BaseButton réplique ces variantes et ajoute tailles / loading / focus. */
|
|
.btn {
|
|
@apply inline-flex items-center justify-center gap-1.5 rounded-lg border border-zinc-700 bg-zinc-800 px-3 py-1.5 text-sm font-medium text-zinc-200 transition-colors hover:bg-zinc-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/70 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 disabled:cursor-not-allowed disabled:opacity-50;
|
|
}
|
|
.btn-primary {
|
|
@apply inline-flex items-center justify-center gap-1.5 rounded-lg bg-emerald-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-emerald-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/70 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 disabled:cursor-not-allowed disabled:opacity-50;
|
|
}
|
|
.btn-danger {
|
|
@apply inline-flex items-center justify-center gap-1.5 rounded-lg border border-red-900 bg-red-950 px-3 py-1.5 text-sm font-medium text-red-300 transition-colors hover:bg-red-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500/70 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 disabled:cursor-not-allowed disabled:opacity-50;
|
|
}
|
|
.btn-ghost {
|
|
@apply inline-flex items-center justify-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium text-zinc-300 transition-colors hover:bg-zinc-800/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/70 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 disabled:cursor-not-allowed disabled:opacity-50;
|
|
}
|
|
|
|
.badge {
|
|
@apply inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[11px] font-medium;
|
|
}
|
|
|
|
/* Cartes : factorise le motif répété dans les listes/sections/formulaires. */
|
|
.card {
|
|
@apply rounded-xl border border-zinc-800 bg-zinc-900/50 p-3;
|
|
}
|
|
.card-inset {
|
|
@apply rounded-lg border border-zinc-800 bg-zinc-950/40 p-2;
|
|
}
|
|
}
|