Files
onnx-voice-changer/frontend/src/app/globals.css
T

83 lines
1.8 KiB
CSS

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
:root {
--track-bg: #e4e4e7;
}
.dark {
--track-bg: #27272a;
}
@theme {
--color-background: #fafafa;
--color-foreground: #18181b;
--color-primary: #84cc16; /* Lime-500 */
--color-hover: #65a30d; /* Lime-600 */
--color-soft-accent: #d9f99d; /* Lime-200 */
--color-success: #10b981; /* Emerald-500 */
--color-text-primary: #18181b;
--color-text-secondary: #52525b;
--radius-lg: 1rem; /* rounded-2xl */
--radius-md: 0.75rem; /* rounded-xl */
--radius-sm: 0.5rem; /* rounded-lg */
}
/* Custom styling presets */
body {
background-color: #fafafa;
color: #18181b;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
overflow-x: hidden;
}
/* Glowing Aura Background */
.glow-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -10;
pointer-events: none;
background-image:
radial-gradient(circle at 10% 20%, rgba(132, 204, 22, 0.04) 0%, transparent 40%),
radial-gradient(circle at 90% 80%, rgba(16, 185, 129, 0.04) 0%, transparent 40%);
}
/* Glassmorphism panel overlay */
.glass-panel {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(24, 24, 27, 0.05);
}
/* Custom pulse animations for recording signals */
@keyframes signal-pulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(132, 204, 22, 0.4);
}
50% {
transform: scale(1.1);
box-shadow: 0 0 10px 4px rgba(132, 204, 22, 0.2);
}
}
.pulse-indicator {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 9999px;
background-color: #84cc16;
}
.pulse-indicator.active {
animation: signal-pulse 2s infinite ease-in-out;
}