Johan LEROY
693e6736de
- constante BUYMEACOFFEE_URL ; item de nav « Offrez-moi un café » - section support dans les Réglages + i18n EN/FR - champ `funding` dans le package.json publié ; mentions README EN/FR
63 lines
3.0 KiB
CSS
63 lines
3.0 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 base {
|
|
/* Tailwind v4 ne met plus cursor:pointer sur les boutons → on le rétablit
|
|
(sauf désactivés, qui gardent le curseur par défaut / not-allowed). */
|
|
button:not(:disabled),
|
|
[role='button']:not([aria-disabled='true']) {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|