Froidefond Julien
05a18c3c77
- Installation de Tailwind CSS v4 avec @tailwindcss/postcss - Configuration PostCSS avec le plugin Tailwind v4 - Mise à jour de globals.css avec syntaxe Tailwind v4 (@theme) - Migration layout.tsx vers classes Tailwind - Création du composant NavLink avec types stricts - Configuration des couleurs personnalisées (background, foreground, card, line, primary) - Support du dark mode via classes CSS - Variables CSS migrées vers format HSL - Suppression des anciens styles CSS custom Le projet utilise maintenant Tailwind CSS v4 pour tout le styling
91 lines
1.9 KiB
CSS
91 lines
1.9 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--color-background: hsl(36 33% 97%);
|
|
--color-foreground: hsl(222 33% 15%);
|
|
--color-card: hsl(0 0% 100%);
|
|
--color-line: hsl(32 18% 84%);
|
|
--color-line-strong: hsl(32 18% 76%);
|
|
--color-primary: hsl(198 78% 37%);
|
|
--color-primary-soft: hsl(198 52% 90%);
|
|
--color-muted: hsl(220 13% 40%);
|
|
--color-success: hsl(142 60% 45%);
|
|
--color-success-soft: hsl(142 60% 90%);
|
|
--color-warning: hsl(45 93% 47%);
|
|
--color-warning-soft: hsl(45 93% 90%);
|
|
--color-error: hsl(2 72% 48%);
|
|
--color-error-soft: hsl(2 72% 90%);
|
|
|
|
--font-sans: "Avenir Next", "Segoe UI", "Noto Sans", system-ui, sans-serif;
|
|
}
|
|
|
|
.dark {
|
|
--color-background: hsl(222 35% 10%);
|
|
--color-foreground: hsl(38 20% 92%);
|
|
--color-card: hsl(221 31% 13%);
|
|
--color-line: hsl(219 18% 25%);
|
|
--color-line-strong: hsl(219 18% 33%);
|
|
--color-primary: hsl(194 76% 62%);
|
|
--color-primary-soft: hsl(210 34% 24%);
|
|
--color-muted: hsl(218 17% 72%);
|
|
}
|
|
|
|
/* Base styles */
|
|
* {
|
|
border-color: var(--color-line);
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-background);
|
|
color: var(--color-foreground);
|
|
font-family: var(--font-sans);
|
|
}
|
|
|
|
/* Custom scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--color-line);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--color-line-strong);
|
|
}
|
|
|
|
/* Selection */
|
|
::selection {
|
|
background: hsl(198 78% 37% / 0.2);
|
|
color: var(--color-foreground);
|
|
}
|
|
|
|
/* Focus visible */
|
|
:focus-visible {
|
|
outline: 2px solid var(--color-primary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Smooth scrolling */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* Reduced motion */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|