58 lines
1.7 KiB
CSS
58 lines
1.7 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
html {
|
|
font-size: var(--ui-font-size, 14px);
|
|
}
|
|
body {
|
|
@apply bg-bg text-text font-mono selection:bg-yellow/30;
|
|
min-height: 100vh;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
/* Cartes avec effet 70s */
|
|
.card-jardin {
|
|
@apply bg-bg-soft border border-bg-hard rounded-xl p-4 shadow-sm
|
|
transition-all duration-300 hover:shadow-lg hover:border-text-muted/30;
|
|
}
|
|
|
|
/* Boutons stylisés */
|
|
.btn-primary {
|
|
@apply bg-yellow text-bg px-4 py-2 rounded-lg font-bold text-sm
|
|
transition-transform active:scale-95 hover:opacity-90;
|
|
}
|
|
|
|
.btn-outline {
|
|
@apply border border-bg-hard text-text-muted px-4 py-2 rounded-lg text-sm
|
|
hover:bg-bg-hard hover:text-text transition-all;
|
|
}
|
|
|
|
/* Badges colorés */
|
|
.badge {
|
|
@apply px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider;
|
|
}
|
|
.badge-green { @apply bg-green/20 text-green; }
|
|
.badge-yellow { @apply bg-yellow/20 text-yellow; }
|
|
.badge-blue { @apply bg-blue/20 text-blue; }
|
|
.badge-red { @apply bg-red/20 text-red; }
|
|
.badge-orange { @apply bg-orange/20 text-orange; }
|
|
}
|
|
|
|
/* Transitions de pages */
|
|
.fade-enter-active, .fade-leave-active {
|
|
transition: opacity 0.2s ease, transform 0.2s ease;
|
|
}
|
|
.fade-enter-from { opacity: 0; transform: translateY(5px); }
|
|
.fade-leave-to { opacity: 0; transform: translateY(-5px); }
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
/* Custom scrollbar */
|
|
::-webkit-scrollbar { width: 6px; }
|
|
::-webkit-scrollbar-track { background: #1d2021; }
|
|
::-webkit-scrollbar-thumb { background: #504945; border-radius: 3px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #665c54; }
|