mirror of
https://github.com/R0m1k3/Regisflow.git
synced 2026-10-18 04:39:30 +02:00
Enhance the user interface to provide a more modern and intuitive experience
Update UI components for improved aesthetics and user experience, including new color palettes and styling. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 91318273-c764-4fd4-be04-bdc12c38af32 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/0715008c-7244-40f4-befc-26c014852236/75b569d4-1b21-43d8-b5b1-0816d59edebd.jpg
This commit is contained in:
michaelschal committed
1 parent
1d46228fac
commit
9a901b574f
4 files changed
+418
-169
No files matched your search
+197
-49
@@ -3,53 +3,83 @@
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
/* Modern neutral palette */
|
||||
--background: hsl(0, 0%, 100%);
|
||||
--foreground: hsl(20, 14.3%, 4.1%);
|
||||
--muted: hsl(60, 4.8%, 95.9%);
|
||||
--muted-foreground: hsl(25, 5.3%, 44.7%);
|
||||
--foreground: hsl(222, 15%, 11%);
|
||||
--muted: hsl(220, 13%, 96%);
|
||||
--muted-foreground: hsl(220, 9%, 46%);
|
||||
--popover: hsl(0, 0%, 100%);
|
||||
--popover-foreground: hsl(20, 14.3%, 4.1%);
|
||||
--popover-foreground: hsl(222, 15%, 11%);
|
||||
--card: hsl(0, 0%, 100%);
|
||||
--card-foreground: hsl(20, 14.3%, 4.1%);
|
||||
--border: hsl(20, 5.9%, 90%);
|
||||
--input: hsl(20, 5.9%, 90%);
|
||||
--primary: hsl(217, 91%, 59%);
|
||||
--primary-foreground: hsl(211, 100%, 99%);
|
||||
--secondary: hsl(60, 4.8%, 95.9%);
|
||||
--secondary-foreground: hsl(24, 9.8%, 10%);
|
||||
--accent: hsl(60, 4.8%, 95.9%);
|
||||
--accent-foreground: hsl(24, 9.8%, 10%);
|
||||
--destructive: hsl(0, 84.2%, 60.2%);
|
||||
--destructive-foreground: hsl(60, 9.1%, 97.8%);
|
||||
--success: hsl(142, 76%, 36%);
|
||||
--success-foreground: hsl(60, 9.1%, 97.8%);
|
||||
--info: hsl(217, 91%, 59%);
|
||||
--info-foreground: hsl(60, 9.1%, 97.8%);
|
||||
--ring: hsl(20, 14.3%, 4.1%);
|
||||
--radius: 0.5rem;
|
||||
--card-foreground: hsl(222, 15%, 11%);
|
||||
--border: hsl(220, 13%, 91%);
|
||||
--input: hsl(220, 13%, 91%);
|
||||
|
||||
/* Modern blue-purple gradient palette */
|
||||
--primary: hsl(232, 97%, 59%);
|
||||
--primary-foreground: hsl(0, 0%, 100%);
|
||||
--secondary: hsl(220, 14%, 96%);
|
||||
--secondary-foreground: hsl(222, 15%, 11%);
|
||||
--accent: hsl(262, 100%, 97%);
|
||||
--accent-foreground: hsl(222, 15%, 11%);
|
||||
|
||||
/* Status colors */
|
||||
--destructive: hsl(0, 85%, 60%);
|
||||
--destructive-foreground: hsl(0, 0%, 98%);
|
||||
--success: hsl(142, 71%, 45%);
|
||||
--success-foreground: hsl(0, 0%, 98%);
|
||||
--warning: hsl(38, 92%, 50%);
|
||||
--warning-foreground: hsl(0, 0%, 98%);
|
||||
--info: hsl(210, 100%, 56%);
|
||||
--info-foreground: hsl(0, 0%, 98%);
|
||||
|
||||
/* Interactive elements */
|
||||
--ring: hsl(232, 97%, 59%);
|
||||
--radius: 0.75rem;
|
||||
|
||||
/* Gradient colors */
|
||||
--gradient-from: hsl(232, 97%, 59%);
|
||||
--gradient-to: hsl(262, 100%, 59%);
|
||||
--gradient-accent: hsl(282, 100%, 59%);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: hsl(240, 10%, 3.9%);
|
||||
--foreground: hsl(0, 0%, 98%);
|
||||
--muted: hsl(240, 3.7%, 15.9%);
|
||||
--muted-foreground: hsl(240, 5%, 64.9%);
|
||||
--popover: hsl(240, 10%, 3.9%);
|
||||
--popover-foreground: hsl(0, 0%, 98%);
|
||||
--card: hsl(240, 10%, 3.9%);
|
||||
--card-foreground: hsl(0, 0%, 98%);
|
||||
--border: hsl(240, 3.7%, 15.9%);
|
||||
--input: hsl(240, 3.7%, 15.9%);
|
||||
--primary: hsl(217, 91%, 59%);
|
||||
--primary-foreground: hsl(211, 100%, 99%);
|
||||
--secondary: hsl(240, 3.7%, 15.9%);
|
||||
--secondary-foreground: hsl(0, 0%, 98%);
|
||||
--accent: hsl(240, 3.7%, 15.9%);
|
||||
--accent-foreground: hsl(0, 0%, 98%);
|
||||
--destructive: hsl(0, 62.8%, 30.6%);
|
||||
/* Dark neutral palette */
|
||||
--background: hsl(222, 20%, 4%);
|
||||
--foreground: hsl(210, 40%, 95%);
|
||||
--muted: hsl(222, 15%, 8%);
|
||||
--muted-foreground: hsl(215, 20%, 65%);
|
||||
--popover: hsl(222, 15%, 6%);
|
||||
--popover-foreground: hsl(210, 40%, 95%);
|
||||
--card: hsl(222, 15%, 6%);
|
||||
--card-foreground: hsl(210, 40%, 95%);
|
||||
--border: hsl(215, 28%, 17%);
|
||||
--input: hsl(215, 28%, 17%);
|
||||
|
||||
/* Dark mode blue-purple palette */
|
||||
--primary: hsl(232, 97%, 65%);
|
||||
--primary-foreground: hsl(222, 20%, 4%);
|
||||
--secondary: hsl(215, 28%, 17%);
|
||||
--secondary-foreground: hsl(210, 40%, 95%);
|
||||
--accent: hsl(215, 28%, 17%);
|
||||
--accent-foreground: hsl(210, 40%, 95%);
|
||||
|
||||
/* Dark status colors */
|
||||
--destructive: hsl(0, 85%, 65%);
|
||||
--destructive-foreground: hsl(0, 0%, 98%);
|
||||
--ring: hsl(240, 4.9%, 83.9%);
|
||||
--radius: 0.5rem;
|
||||
--success: hsl(142, 71%, 55%);
|
||||
--success-foreground: hsl(0, 0%, 98%);
|
||||
--warning: hsl(38, 92%, 60%);
|
||||
--warning-foreground: hsl(0, 0%, 98%);
|
||||
--info: hsl(210, 100%, 65%);
|
||||
--info-foreground: hsl(0, 0%, 98%);
|
||||
|
||||
--ring: hsl(232, 97%, 65%);
|
||||
|
||||
/* Dark gradient colors */
|
||||
--gradient-from: hsl(232, 97%, 65%);
|
||||
--gradient-to: hsl(262, 100%, 65%);
|
||||
--gradient-accent: hsl(282, 100%, 65%);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
@@ -59,14 +89,109 @@
|
||||
|
||||
body {
|
||||
@apply font-sans antialiased bg-background text-foreground;
|
||||
font-feature-settings: "rlig" 1, "calt" 1;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
/* Smooth scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: hsl(var(--muted));
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: hsl(var(--border));
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: hsl(var(--muted-foreground));
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* Modern animations */
|
||||
.slide-in-right {
|
||||
animation: slideInRight 0.3s ease-out;
|
||||
animation: slideInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.slide-in-left {
|
||||
animation: slideInLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.slide-in-up {
|
||||
animation: slideInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.scale-in {
|
||||
animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.smooth-transition {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Modern gradients */
|
||||
.gradient-bg {
|
||||
background: linear-gradient(135deg, var(--gradient-from) 0%, var(--gradient-to) 100%);
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, var(--gradient-from) 0%, var(--gradient-to) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Glass morphism */
|
||||
.glass {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Modern card styles */
|
||||
.modern-card {
|
||||
@apply bg-card border border-border rounded-xl shadow-sm hover:shadow-lg smooth-transition backdrop-blur-sm;
|
||||
}
|
||||
|
||||
.modern-card-elevated {
|
||||
@apply modern-card shadow-lg hover:shadow-xl;
|
||||
}
|
||||
|
||||
/* Status styles */
|
||||
.status-success {
|
||||
@apply bg-green-50 text-green-700 border border-green-200 dark:bg-green-950 dark:text-green-300 dark:border-green-800;
|
||||
}
|
||||
|
||||
.status-warning {
|
||||
@apply bg-yellow-50 text-yellow-700 border border-yellow-200 dark:bg-yellow-950 dark:text-yellow-300 dark:border-yellow-800;
|
||||
}
|
||||
|
||||
.status-error {
|
||||
@apply bg-red-50 text-red-700 border border-red-200 dark:bg-red-950 dark:text-red-300 dark:border-red-800;
|
||||
}
|
||||
|
||||
.status-info {
|
||||
@apply bg-blue-50 text-blue-700 border border-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800;
|
||||
}
|
||||
|
||||
/* Camera preview */
|
||||
.camera-preview {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Animation keyframes */
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
@@ -77,19 +202,42 @@
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 0.2s ease-in;
|
||||
|
||||
@keyframes slideInLeft {
|
||||
from {
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
transform: translateY(30px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.camera-preview {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user