| @import "tailwindcss"; | |
| :root { | |
| --background: #f9fafb; | |
| --foreground: #111827; | |
| } | |
| @theme inline { | |
| --color-background: var(--background); | |
| --color-foreground: var(--foreground); | |
| --font-sans: var(--font-geist-sans); | |
| --font-mono: var(--font-geist-mono); | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| --background: #111827; | |
| --foreground: #f9fafb; | |
| } | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background: var(--background); | |
| color: var(--foreground); | |
| font-family: var(--font-sans); | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #9ca3af; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #6b7280; | |
| } | |
| /* Focus visible styles */ | |
| :focus-visible { | |
| outline: 2px solid #3b82f6; | |
| outline-offset: 2px; | |
| } | |
| /* Animations */ | |
| @keyframes slide-in { | |
| from { | |
| opacity: 0; | |
| transform: translateY(10px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .animate-slide-in { | |
| animation: slide-in 0.3s ease-out; | |
| } | |
| /* Canvas styles */ | |
| canvas { | |
| display: block; | |
| } | |
| /* Selection styles */ | |
| ::selection { | |
| background: #3b82f6; | |
| color: white; | |
| } | |
| /* Input range styles */ | |
| input[type="range"] { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| } | |
| input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: #3b82f6; | |
| cursor: pointer; | |
| border: 2px solid white; | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); | |
| } | |
| input[type="range"]::-moz-range-thumb { | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: #3b82f6; | |
| cursor: pointer; | |
| border: 2px solid white; | |
| } | |
| /* Number input arrows */ | |
| input[type="number"]::-webkit-inner-spin-button, | |
| input[type="number"]::-webkit-outer-spin-button { | |
| opacity: 1; | |
| } |