feat: initialize Convert UI - browser-based file conversion app
- Add Next.js 16 with Turbopack and React 19 - Add Tailwind CSS 4 with OKLCH color system - Implement FFmpeg.wasm for video/audio conversion - Implement ImageMagick WASM for image conversion - Add file upload with drag-and-drop - Add format selector with fuzzy search - Add conversion preview and download - Add conversion history with localStorage - Add dark/light theme support - Support 22+ file formats across video, audio, and images 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
275
app/globals.css
Normal file
275
app/globals.css
Normal file
@@ -0,0 +1,275 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* Source directives - scan components for Tailwind classes */
|
||||
@source "../components/converter/*.{js,ts,jsx,tsx}";
|
||||
@source "../components/layout/*.{js,ts,jsx,tsx}";
|
||||
@source "../components/ui/*.{js,ts,jsx,tsx}";
|
||||
@source "*.{js,ts,jsx,tsx}";
|
||||
|
||||
/* Custom dark mode variant */
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
/* CSS Variables for theming */
|
||||
@layer base {
|
||||
:root {
|
||||
/* Light mode colors using OKLCH */
|
||||
--background: oklch(100% 0 0);
|
||||
--foreground: oklch(9.8% 0.038 285.8);
|
||||
|
||||
--card: oklch(100% 0 0);
|
||||
--card-foreground: oklch(9.8% 0.038 285.8);
|
||||
|
||||
--popover: oklch(100% 0 0);
|
||||
--popover-foreground: oklch(9.8% 0.038 285.8);
|
||||
|
||||
--primary: oklch(22.4% 0.053 285.8);
|
||||
--primary-foreground: oklch(98% 0 0);
|
||||
|
||||
--secondary: oklch(96.1% 0 0);
|
||||
--secondary-foreground: oklch(13.8% 0.038 285.8);
|
||||
|
||||
--muted: oklch(96.1% 0 0);
|
||||
--muted-foreground: oklch(45.1% 0.015 285.9);
|
||||
|
||||
--accent: oklch(96.1% 0 0);
|
||||
--accent-foreground: oklch(13.8% 0.038 285.8);
|
||||
|
||||
--destructive: oklch(60.2% 0.168 29.2);
|
||||
--destructive-foreground: oklch(98% 0 0);
|
||||
|
||||
--border: oklch(89.8% 0 0);
|
||||
--input: oklch(89.8% 0 0);
|
||||
--ring: oklch(22.4% 0.053 285.8);
|
||||
|
||||
--radius: 0.5rem;
|
||||
|
||||
--success: oklch(60% 0.15 145);
|
||||
--success-foreground: oklch(98% 0 0);
|
||||
|
||||
--warning: oklch(75% 0.15 85);
|
||||
--warning-foreground: oklch(20% 0 0);
|
||||
|
||||
--info: oklch(65% 0.15 240);
|
||||
--info-foreground: oklch(98% 0 0);
|
||||
}
|
||||
|
||||
.dark {
|
||||
/* Dark mode colors using OKLCH */
|
||||
--background: oklch(9.8% 0.038 285.8);
|
||||
--foreground: oklch(98% 0 0);
|
||||
|
||||
--card: oklch(9.8% 0.038 285.8);
|
||||
--card-foreground: oklch(98% 0 0);
|
||||
|
||||
--popover: oklch(9.8% 0.038 285.8);
|
||||
--popover-foreground: oklch(98% 0 0);
|
||||
|
||||
--primary: oklch(98% 0 0);
|
||||
--primary-foreground: oklch(13.8% 0.038 285.8);
|
||||
|
||||
--secondary: oklch(17.7% 0.038 285.8);
|
||||
--secondary-foreground: oklch(98% 0 0);
|
||||
|
||||
--muted: oklch(17.7% 0.038 285.8);
|
||||
--muted-foreground: oklch(63.9% 0.012 285.9);
|
||||
|
||||
--accent: oklch(17.7% 0.038 285.8);
|
||||
--accent-foreground: oklch(98% 0 0);
|
||||
|
||||
--destructive: oklch(50% 0.2 29.2);
|
||||
--destructive-foreground: oklch(98% 0 0);
|
||||
|
||||
--border: oklch(17.7% 0.038 285.8);
|
||||
--input: oklch(17.7% 0.038 285.8);
|
||||
--ring: oklch(83.1% 0.012 285.9);
|
||||
|
||||
--success: oklch(55% 0.15 145);
|
||||
--success-foreground: oklch(98% 0 0);
|
||||
|
||||
--warning: oklch(70% 0.15 85);
|
||||
--warning-foreground: oklch(20% 0 0);
|
||||
|
||||
--info: oklch(60% 0.15 240);
|
||||
--info-foreground: oklch(98% 0 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Theme inline - map CSS variables to Tailwind colors */
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--color-success: var(--success);
|
||||
--color-success-foreground: var(--success-foreground);
|
||||
--color-warning: var(--warning);
|
||||
--color-warning-foreground: var(--warning-foreground);
|
||||
--color-info: var(--info);
|
||||
--color-info-foreground: var(--info-foreground);
|
||||
|
||||
--radius: var(--radius);
|
||||
}
|
||||
|
||||
/* Global styles */
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
font-feature-settings: "rlig" 1, "calt" 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom animations */
|
||||
@layer utilities {
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInFromRight {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
transform: translateY(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(10px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
transform: scale(0.95);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulseSubtle {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -1000px 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 1000px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes progress {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fadeIn {
|
||||
animation: fadeIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
.animate-slideInFromRight {
|
||||
animation: slideInFromRight 0.3s ease-out;
|
||||
}
|
||||
|
||||
.animate-slideDown {
|
||||
animation: slideDown 0.3s ease-out;
|
||||
}
|
||||
|
||||
.animate-slideUp {
|
||||
animation: slideUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
.animate-scaleIn {
|
||||
animation: scaleIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
.animate-pulseSubtle {
|
||||
animation: pulseSubtle 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-shimmer {
|
||||
animation: shimmer 2s linear infinite;
|
||||
}
|
||||
|
||||
.animate-progress {
|
||||
animation: progress 1.5s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
@layer utilities {
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
@apply bg-muted;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
@apply bg-muted-foreground/30;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-muted-foreground/50;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user