frontend mvp
This commit is contained in:
YannAhlgrim
+219
-12
@@ -1,39 +1,246 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
/* Primary Theme Colors */
|
||||
--color-primary: #3b82f6; /* Blue-500 */
|
||||
--color-primary-dark: #2563eb; /* Blue-600 */
|
||||
--color-primary-light: #60a5fa; /* Blue-400 */
|
||||
|
||||
--color-secondary: #8b5cf6; /* Purple-500 */
|
||||
--color-secondary-dark: #7c3aed; /* Purple-600 */
|
||||
--color-secondary-light: #a78bfa; /* Purple-400 */
|
||||
|
||||
--color-accent: #ec4899; /* Pink-500 */
|
||||
--color-accent-light: #f472b6; /* Pink-400 */
|
||||
|
||||
/* Status Colors */
|
||||
--color-success: #10b981; /* Emerald-500 */
|
||||
--color-success-light: #34d399; /* Emerald-400 */
|
||||
--color-warning: #f59e0b; /* Yellow-500 */
|
||||
--color-warning-light: #fbbf24; /* Yellow-400 */
|
||||
--color-error: #ef4444; /* Red-500 */
|
||||
--color-error-light: #f87171; /* Red-400 */
|
||||
|
||||
/* Background Colors */
|
||||
--color-bg-primary: #0f172a; /* Slate-900 */
|
||||
--color-bg-secondary: #1e293b; /* Slate-800 */
|
||||
--color-bg-tertiary: #334155; /* Slate-700 */
|
||||
--color-bg-overlay: rgba(255, 255, 255, 0.1);
|
||||
--color-bg-overlay-dark: rgba(0, 0, 0, 0.2);
|
||||
|
||||
/* Text Colors */
|
||||
--color-text-primary: #ffffff;
|
||||
--color-text-secondary: #cbd5e1; /* Slate-300 */
|
||||
--color-text-muted: #94a3b8; /* Slate-400 */
|
||||
--color-text-inverse: #1e293b; /* Slate-800 */
|
||||
|
||||
/* Border Colors */
|
||||
--color-border-light: rgba(255, 255, 255, 0.2);
|
||||
--color-border-medium: rgba(255, 255, 255, 0.3);
|
||||
--color-border-dark: rgba(255, 255, 255, 0.1);
|
||||
|
||||
/* Gradient Definitions */
|
||||
--gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
|
||||
--gradient-secondary: linear-gradient(135deg, var(--color-secondary), var(--color-accent));
|
||||
--gradient-background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-secondary-dark) 50%, var(--color-bg-primary) 100%);
|
||||
--gradient-text: linear-gradient(135deg, var(--color-primary-light), var(--color-secondary-light), var(--color-accent-light));
|
||||
|
||||
/* Shadow Definitions */
|
||||
--shadow-primary: 0 25px 50px -12px rgba(59, 130, 246, 0.25);
|
||||
--shadow-secondary: 0 25px 50px -12px rgba(139, 92, 246, 0.25);
|
||||
--shadow-error: 0 25px 50px -12px rgba(239, 68, 68, 0.25);
|
||||
--shadow-success: 0 25px 50px -12px rgba(16, 185, 129, 0.25);
|
||||
--shadow-warning: 0 25px 50px -12px rgba(245, 158, 11, 0.25);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
body {
|
||||
@apply bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900;
|
||||
background: var(--gradient-background);
|
||||
@apply min-h-screen;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* Recording Button Styles */
|
||||
.record-button {
|
||||
@apply relative overflow-hidden;
|
||||
@apply transition-all duration-300 ease-in-out;
|
||||
@apply transform hover:scale-105 active:scale-95;
|
||||
@apply shadow-2xl;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease-in-out;
|
||||
transform-origin: center;
|
||||
box-shadow: var(--shadow-primary);
|
||||
}
|
||||
|
||||
.record-button:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.record-button:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.record-button::before {
|
||||
content: '';
|
||||
@apply absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent;
|
||||
@apply opacity-0 translate-x-[-100%];
|
||||
@apply transition-all duration-700;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
||||
opacity: 0;
|
||||
transform: translateX(-100%);
|
||||
transition: all 0.7s ease;
|
||||
}
|
||||
|
||||
.record-button:hover::before {
|
||||
@apply opacity-20 translate-x-[100%];
|
||||
opacity: 1;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
/* Recording Button States */
|
||||
.record-button--idle {
|
||||
background: var(--gradient-primary);
|
||||
box-shadow: var(--shadow-primary);
|
||||
}
|
||||
|
||||
.record-button--recording {
|
||||
background: linear-gradient(135deg, var(--color-error), var(--color-error-light));
|
||||
box-shadow: var(--shadow-error);
|
||||
animation: recording-pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.record-button--processing {
|
||||
background: linear-gradient(135deg, var(--color-warning), var(--color-warning-light));
|
||||
box-shadow: var(--shadow-warning);
|
||||
opacity: 0.8;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Audio Visualizer Styles */
|
||||
.audio-visualizer {
|
||||
@apply relative overflow-hidden rounded-xl;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 0.75rem;
|
||||
background: var(--color-bg-overlay);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid var(--color-border-light);
|
||||
}
|
||||
|
||||
.audio-visualizer::after {
|
||||
content: '';
|
||||
@apply absolute inset-0 bg-gradient-to-r from-blue-500/20 to-purple-500/20;
|
||||
@apply animate-pulse;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(90deg,
|
||||
rgba(59, 130, 246, 0.1),
|
||||
rgba(139, 92, 246, 0.1)
|
||||
);
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Status Indicators */
|
||||
.status-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 9999px;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid var(--color-border-dark);
|
||||
}
|
||||
|
||||
.status-indicator--active {
|
||||
background: var(--color-bg-overlay);
|
||||
border-color: var(--color-border-medium);
|
||||
}
|
||||
|
||||
.status-indicator--recording {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: var(--color-error-light);
|
||||
border-color: var(--color-error);
|
||||
}
|
||||
|
||||
.status-indicator--processing {
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
color: var(--color-warning-light);
|
||||
border-color: var(--color-warning);
|
||||
}
|
||||
|
||||
/* Utility Classes */
|
||||
.glass-panel {
|
||||
background: var(--color-bg-overlay);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--color-border-light);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: var(--gradient-text);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.pulse-dot {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.pulse-dot--error {
|
||||
background-color: var(--color-error-light);
|
||||
}
|
||||
|
||||
.pulse-dot--warning {
|
||||
background-color: var(--color-warning-light);
|
||||
}
|
||||
|
||||
.pulse-dot--inactive {
|
||||
background-color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes recording-pulse {
|
||||
0%, 100% {
|
||||
box-shadow: var(--shadow-error);
|
||||
}
|
||||
50% {
|
||||
box-shadow: var(--shadow-error), 0 0 0 10px rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Theme Color Utility Classes */
|
||||
.bg-theme-primary { background-color: var(--color-primary); }
|
||||
.bg-theme-secondary { background-color: var(--color-secondary); }
|
||||
.bg-theme-accent { background-color: var(--color-accent); }
|
||||
.bg-theme-success { background-color: var(--color-success); }
|
||||
.bg-theme-warning { background-color: var(--color-warning); }
|
||||
.bg-theme-error { background-color: var(--color-error); }
|
||||
|
||||
.text-theme-primary { color: var(--color-primary); }
|
||||
.text-theme-secondary { color: var(--color-secondary); }
|
||||
.text-theme-accent { color: var(--color-accent); }
|
||||
.text-theme-success { color: var(--color-success); }
|
||||
.text-theme-warning { color: var(--color-warning); }
|
||||
.text-theme-error { color: var(--color-error); }
|
||||
.text-theme-muted { color: var(--color-text-muted); }
|
||||
|
||||
.border-theme-light { border-color: var(--color-border-light); }
|
||||
.border-theme-medium { border-color: var(--color-border-medium); }
|
||||
.border-theme-primary { border-color: var(--color-primary); }
|
||||
.border-theme-error { border-color: var(--color-error); }
|
||||
.border-theme-warning { border-color: var(--color-warning); }
|
||||
.border-theme-success { border-color: var(--color-success); }
|
||||
}
|
||||
Reference in New Issue
Block a user