Froidefond Julien
d001e29bbc
- Created reusable UI components (Card, Button, Badge, Form, Icon) - Added PageIcon and NavIcon components with consistent styling - Refactored all pages to use new UI components - Added non-blocking image loading with skeleton for book covers - Created LibraryActions dropdown for library settings - Added emojis to buttons for better UX - Fixed Client Component issues with getBookCoverUrl
109 lines
2.3 KiB
CSS
109 lines
2.3 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;
|
|
|
|
--shadow-soft: 0 1px 2px 0 rgb(23 32 46 / 0.06);
|
|
--shadow-card: 0 12px 30px -12px rgb(23 32 46 / 0.22);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
/* Custom utilities - use directly in components */
|
|
.shadow-soft {
|
|
box-shadow: var(--shadow-soft);
|
|
}
|
|
|
|
.shadow-card {
|
|
box-shadow: var(--shadow-card);
|
|
}
|
|
|
|
/* Dark mode overrides */
|
|
.dark {
|
|
--shadow-soft: 0 1px 2px 0 rgb(2 8 18 / 0.35);
|
|
--shadow-card: 0 12px 30px -12px rgb(2 8 18 / 0.55);
|
|
}
|