You've already forked Nano-Banana-AI-Image-Editor
100 lines
1.9 KiB
CSS
100 lines
1.9 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Toast animations */
|
|
@keyframes slide-in-from-top-full {
|
|
0% {
|
|
transform: translateY(-100%);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.animate-in {
|
|
animation-duration: 300ms;
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
.slide-in-from-top-full {
|
|
animation-name: slide-in-from-top-full;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
|
|
overflow: hidden;
|
|
background-color: #FFFFFF;
|
|
color: #212529;
|
|
}
|
|
|
|
/* Custom scrollbar for light theme */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #F8F9FA;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #E9ECEF;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #DEE2E6;
|
|
}
|
|
|
|
/* Custom range slider styling */
|
|
.slider::-webkit-slider-thumb {
|
|
appearance: none;
|
|
height: 16px;
|
|
width: 16px;
|
|
border-radius: 50%;
|
|
background: #FDE047;
|
|
cursor: pointer;
|
|
border: 2px solid #FFFFFF;
|
|
}
|
|
|
|
.slider::-moz-range-thumb {
|
|
height: 16px;
|
|
width: 16px;
|
|
border-radius: 50%;
|
|
background: #FDE047;
|
|
cursor: pointer;
|
|
border: 2px solid #FFFFFF;
|
|
}
|
|
|
|
/* Marching ants animation */
|
|
@keyframes marching-ants {
|
|
0% { stroke-dashoffset: 0; }
|
|
100% { stroke-dashoffset: 10; }
|
|
}
|
|
|
|
.marching-ants {
|
|
stroke-dasharray: 5 5;
|
|
animation: marching-ants 0.5s linear infinite;
|
|
}
|
|
|
|
/* Focus styles for accessibility */
|
|
*:focus-visible {
|
|
outline: 2px solid #FDE047;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Smooth transitions */
|
|
* {
|
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
|
transition-duration: 200ms;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
} |