balaji
114 lines
2.9 KiB
CSS
114 lines
2.9 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Outfit:wght@400;500;600;700&display=swap');
|
|
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--font-sans: "Outfit", "Inter", ui-sans-serif, system-ui, sans-serif;
|
|
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
|
|
|
|
/* Theme Colors */
|
|
--color-primary: #4DA3FF;
|
|
--color-accent: #FF2E88;
|
|
--color-glass-bg: rgba(246, 249, 255, 0.8);
|
|
--color-glass-card: rgba(255, 255, 255, 0.7);
|
|
|
|
/* Shadows */
|
|
--shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
|
|
--shadow-emboss: inset 2px 2px 4px #dbe6ff, inset -2px -2px 4px #ffffff;
|
|
}
|
|
|
|
@layer base {
|
|
body {
|
|
@apply bg-[#F6F9FF] text-gray-900 antialiased overflow-hidden transition-colors duration-500;
|
|
font-feature-settings: "ss01", "ss02", "cv01", "cv11";
|
|
}
|
|
|
|
body.dark {
|
|
@apply bg-[#0a0a0a] text-gray-100;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.glass-panel {
|
|
@apply bg-white/70 backdrop-blur-xl border border-white/40 shadow-glass transition-all duration-300;
|
|
}
|
|
|
|
.dark .glass-panel {
|
|
@apply bg-white/5 border-white/10 shadow-2xl;
|
|
}
|
|
|
|
.glass-card {
|
|
@apply bg-white/50 backdrop-blur-md border border-white/40 hover:bg-white/80 transition-all duration-300 shadow-sm;
|
|
}
|
|
|
|
.dark .glass-card {
|
|
@apply bg-white/5 border-white/10 hover:bg-white/10;
|
|
}
|
|
|
|
.emboss-btn {
|
|
@apply shadow-glass border border-white/40 transition-all duration-200 active:shadow-emboss;
|
|
box-shadow: 4px 4px 8px rgba(0,0,0,0.05), -4px -4px 8px rgba(255,255,255,0.8);
|
|
}
|
|
|
|
.dark .emboss-btn {
|
|
@apply border-white/10 shadow-none active:bg-white/10;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.sidebar-item {
|
|
@apply flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 cursor-pointer;
|
|
}
|
|
|
|
.sidebar-item-active {
|
|
@apply bg-primary/20 text-primary border border-primary/30;
|
|
}
|
|
|
|
.sidebar-item:hover:not(.sidebar-item-active) {
|
|
@apply bg-white/20;
|
|
}
|
|
|
|
.dark .sidebar-item:hover:not(.sidebar-item-active) {
|
|
@apply bg-white/5;
|
|
}
|
|
|
|
.neon-glow:hover {
|
|
box-shadow: 0 0 15px rgba(255, 46, 136, 0.4);
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
@apply bg-transparent;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
@apply bg-black/10 rounded-full hover:bg-black/20;
|
|
}
|
|
|
|
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
|
|
@apply bg-white/10 hover:bg-white/20;
|
|
}
|
|
}
|
|
|
|
/* Animation for the background glow */
|
|
@keyframes float {
|
|
0% { transform: translate(0, 0) scale(1); }
|
|
33% { transform: translate(2%, 2%) scale(1.1); }
|
|
66% { transform: translate(-1%, 3%) scale(0.9); }
|
|
100% { transform: translate(0, 0) scale(1); }
|
|
}
|
|
|
|
.animate-float {
|
|
animation: float 20s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-float-delayed {
|
|
animation: float 25s ease-in-out infinite reverse;
|
|
}
|
|
|
|
/* Hide TransformControls UI when rendering */
|
|
.rendering-hide {
|
|
display: none !important;
|
|
}
|