443 lines
13 KiB
CSS
443 lines
13 KiB
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
|
|
:root {
|
|
--background: oklch(0.98 0 0);
|
|
--foreground: oklch(0.15 0 0);
|
|
--card: oklch(1 0 0);
|
|
--card-foreground: oklch(0.15 0 0);
|
|
--popover: oklch(1 0 0);
|
|
--popover-foreground: oklch(0.15 0 0);
|
|
--primary: oklch(0.55 0 0);
|
|
--primary-foreground: oklch(0.98 0 0);
|
|
--secondary: oklch(0.94 0 0);
|
|
--secondary-foreground: oklch(0.2 0 0);
|
|
--muted: oklch(0.94 0 0);
|
|
--muted-foreground: oklch(0.55 0 0);
|
|
--accent: oklch(0.94 0 0);
|
|
--accent-foreground: oklch(0.2 0 0);
|
|
--destructive: oklch(0.58 0.24 28);
|
|
--destructive-foreground: oklch(0.98 0 0);
|
|
--success: oklch(0.55 0.15 142);
|
|
--success-foreground: oklch(0.98 0 0);
|
|
--warning: oklch(0.65 0.15 38);
|
|
--warning-foreground: oklch(0.1 0 0);
|
|
--border: oklch(0.9 0 0);
|
|
--input: oklch(0.9 0 0);
|
|
--ring: oklch(0.71 0 0);
|
|
--chart-1: oklch(0.65 0.15 258);
|
|
--chart-2: oklch(0.7 0.14 142);
|
|
--chart-3: oklch(0.65 0.2 27);
|
|
--chart-4: oklch(0.6 0.18 302);
|
|
--chart-5: oklch(0.62 0.16 197);
|
|
--sidebar: oklch(0.96 0 0);
|
|
--sidebar-foreground: oklch(0.15 0 0);
|
|
--sidebar-primary: oklch(0.2 0 0);
|
|
--sidebar-primary-foreground: oklch(0.98 0 0);
|
|
--sidebar-accent: oklch(0.92 0 0);
|
|
--sidebar-accent-foreground: oklch(0.2 0 0);
|
|
--sidebar-border: oklch(0.88 0 0);
|
|
--sidebar-ring: oklch(0.71 0 0);
|
|
--navbar: oklch(0.96 0 0);
|
|
--navbar-foreground: oklch(0.15 0 0);
|
|
--navbar-border: oklch(0.88 0 0);
|
|
--font-sans: Geist Mono, monospace;
|
|
--font-serif: Geist Mono, monospace;
|
|
--font-mono: Geist Mono, monospace;
|
|
--radius: 0rem;
|
|
--shadow-2xs: 0px 1px 0px 0px hsl(0 0% 0% / 0);
|
|
--shadow-xs: 0px 1px 0px 0px hsl(0 0% 0% / 0);
|
|
--shadow-sm:
|
|
0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0);
|
|
--shadow: 0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0);
|
|
--shadow-md:
|
|
0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 2px 4px -1px hsl(0 0% 0% / 0);
|
|
--shadow-lg:
|
|
0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 4px 6px -1px hsl(0 0% 0% / 0);
|
|
--shadow-xl:
|
|
0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 8px 10px -1px hsl(0 0% 0% / 0);
|
|
--shadow-2xl: 0px 1px 0px 0px hsl(0 0% 0% / 0);
|
|
--tracking-normal: 0em;
|
|
--spacing: 0.25rem;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--background: oklch(0.12 0 0);
|
|
--foreground: oklch(0.98 0 0);
|
|
--card: oklch(0.18 0 0);
|
|
--card-foreground: oklch(0.98 0 0);
|
|
--popover: oklch(0.22 0 0);
|
|
--popover-foreground: oklch(0.98 0 0);
|
|
--primary: oklch(0.55 0 0);
|
|
--primary-foreground: oklch(0.98 0 0);
|
|
--secondary: oklch(0.22 0 0);
|
|
--secondary-foreground: oklch(0.98 0 0);
|
|
--muted: oklch(0.22 0 0);
|
|
--muted-foreground: oklch(0.71 0 0);
|
|
--accent: oklch(0.3 0 0);
|
|
--accent-foreground: oklch(0.98 0 0);
|
|
--destructive: oklch(0.7 0.19 22);
|
|
--destructive-foreground: oklch(0.22 0 0);
|
|
--success: oklch(0.6 0.15 142);
|
|
--success-foreground: oklch(0.98 0 0);
|
|
--warning: oklch(0.7 0.15 38);
|
|
--warning-foreground: oklch(0.1 0 0);
|
|
--border: oklch(0.28 0 0);
|
|
--input: oklch(0.35 0 0);
|
|
--ring: oklch(0.55 0 0);
|
|
--chart-1: oklch(0.7 0.15 258);
|
|
--chart-2: oklch(0.75 0.14 142);
|
|
--chart-3: oklch(0.7 0.2 27);
|
|
--chart-4: oklch(0.65 0.18 302);
|
|
--chart-5: oklch(0.67 0.16 197);
|
|
--sidebar: oklch(0.08 0 0);
|
|
--sidebar-foreground: oklch(0.98 0 0);
|
|
--sidebar-primary: oklch(0.98 0 0);
|
|
--sidebar-primary-foreground: oklch(0.08 0 0);
|
|
--sidebar-accent: oklch(0.15 0 0);
|
|
--sidebar-accent-foreground: oklch(0.98 0 0);
|
|
--sidebar-border: oklch(0.25 0 0);
|
|
--sidebar-ring: oklch(0.35 0 0);
|
|
--navbar: oklch(0.08 0 0);
|
|
--navbar-foreground: oklch(0.98 0 0);
|
|
--navbar-border: oklch(0.25 0 0);
|
|
--font-sans: Geist Mono, monospace;
|
|
--font-serif: Geist Mono, monospace;
|
|
--font-mono: Geist Mono, monospace;
|
|
--radius: 0rem;
|
|
--shadow-2xs: 0px 1px 0px 0px hsl(0 0% 0% / 0);
|
|
--shadow-xs: 0px 1px 0px 0px hsl(0 0% 0% / 0);
|
|
--shadow-sm:
|
|
0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0);
|
|
--shadow:
|
|
0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0);
|
|
--shadow-md:
|
|
0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 2px 4px -1px hsl(0 0% 0% / 0);
|
|
--shadow-lg:
|
|
0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 4px 6px -1px hsl(0 0% 0% / 0);
|
|
--shadow-xl:
|
|
0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 8px 10px -1px hsl(0 0% 0% / 0);
|
|
--shadow-2xl: 0px 1px 0px 0px hsl(0 0% 0% / 0);
|
|
}
|
|
}
|
|
|
|
@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-success: var(--success);
|
|
--color-success-foreground: var(--success-foreground);
|
|
--color-warning: var(--warning);
|
|
--color-warning-foreground: var(--warning-foreground);
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-ring: var(--ring);
|
|
--color-chart-1: var(--chart-1);
|
|
--color-chart-2: var(--chart-2);
|
|
--color-chart-3: var(--chart-3);
|
|
--color-chart-4: var(--chart-4);
|
|
--color-chart-5: var(--chart-5);
|
|
--color-sidebar: var(--sidebar);
|
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-sidebar-primary: var(--sidebar-primary);
|
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
--color-sidebar-accent: var(--sidebar-accent);
|
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
--color-navbar: var(--navbar);
|
|
--color-navbar-foreground: var(--navbar-foreground);
|
|
--color-navbar-border: var(--navbar-border);
|
|
|
|
--font-sans: var(--font-sans);
|
|
--font-mono: var(--font-mono);
|
|
--font-serif: var(--font-serif);
|
|
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
|
|
--shadow-2xs: var(--shadow-2xs);
|
|
--shadow-xs: var(--shadow-xs);
|
|
--shadow-sm: var(--shadow-sm);
|
|
--shadow: var(--shadow);
|
|
--shadow-md: var(--shadow-md);
|
|
--shadow-lg: var(--shadow-lg);
|
|
--shadow-xl: var(--shadow-xl);
|
|
--shadow-2xl: var(--shadow-2xl);
|
|
}
|
|
|
|
/* Base styles for proper defaults */
|
|
* {
|
|
border-color: var(--border);
|
|
}
|
|
|
|
html {
|
|
font-family: var(--font-sans);
|
|
}
|
|
|
|
body {
|
|
background-color: var(--background);
|
|
color: var(--foreground);
|
|
}
|
|
|
|
/* Custom animations from original design */
|
|
@keyframes fade-in-up {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes text-shimmer {
|
|
0%,
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
}
|
|
|
|
@keyframes float {
|
|
0%,
|
|
100% {
|
|
transform: translateY(0px);
|
|
}
|
|
50% {
|
|
transform: translateY(-10px);
|
|
}
|
|
}
|
|
|
|
.animate-fade-in-up {
|
|
animation: fade-in-up 0.6s ease-out forwards;
|
|
}
|
|
|
|
.animate-text-shimmer {
|
|
animation: text-shimmer 2s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-float {
|
|
animation: float 3s ease-in-out infinite;
|
|
}
|
|
|
|
.animation-delay-300 {
|
|
animation-delay: 300ms;
|
|
}
|
|
|
|
.animation-delay-500 {
|
|
animation-delay: 500ms;
|
|
}
|
|
|
|
.animation-delay-700 {
|
|
animation-delay: 700ms;
|
|
}
|
|
|
|
/* Subtle background patterns for enhanced visual interest */
|
|
.bg-pattern-dots {
|
|
background-image: radial-gradient(
|
|
circle at 1px 1px,
|
|
oklch(var(--border)) 1px,
|
|
transparent 0
|
|
);
|
|
background-size: 20px 20px;
|
|
}
|
|
|
|
/* Sonner Toast Styles for beenvoice */
|
|
[data-sonner-toaster] {
|
|
font-family: var(--font-geist-mono, ui-monospace, monospace) !important;
|
|
--width: 380px;
|
|
}
|
|
|
|
[data-sonner-toast] {
|
|
background: hsl(var(--card)) !important;
|
|
background-color: hsl(var(--card)) !important;
|
|
border: 1px solid hsl(var(--border)) !important;
|
|
color: hsl(var(--foreground)) !important;
|
|
border-radius: 0 !important;
|
|
box-shadow:
|
|
0 1px 3px 0 rgb(0 0 0 / 0.1),
|
|
0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
|
|
font-size: 14px !important;
|
|
padding: 16px 40px 16px 16px !important;
|
|
font-family: var(--font-geist-mono, ui-monospace, monospace) !important;
|
|
min-height: 56px !important;
|
|
position: relative !important;
|
|
}
|
|
|
|
/* Toast types with colored left borders */
|
|
[data-sonner-toast][data-type="success"] {
|
|
border-left: 4px solid hsl(142 76% 36%) !important;
|
|
}
|
|
|
|
[data-sonner-toast][data-type="error"] {
|
|
border-left: 4px solid hsl(0 84% 60%) !important;
|
|
}
|
|
|
|
[data-sonner-toast][data-type="warning"] {
|
|
border-left: 4px solid hsl(38 92% 50%) !important;
|
|
}
|
|
|
|
[data-sonner-toast][data-type="info"] {
|
|
border-left: 4px solid hsl(221 83% 53%) !important;
|
|
}
|
|
|
|
/* Close button styling - comprehensive selectors */
|
|
[data-sonner-toast] [data-close-button],
|
|
[data-sonner-toast] button[data-close-button],
|
|
[data-sonner-toast] button[aria-label="Close toast"],
|
|
[data-sonner-toast] > button,
|
|
li[data-sonner-toast] [data-close-button],
|
|
li[data-sonner-toast] button,
|
|
.sonner [data-close-button],
|
|
.sonner button[aria-label="Close toast"],
|
|
[data-sonner-toaster] [data-close-button],
|
|
[data-sonner-toaster] button[aria-label="Close toast"] {
|
|
background: hsl(var(--background)) !important;
|
|
border: 1px solid hsl(var(--border)) !important;
|
|
color: hsl(var(--foreground)) !important;
|
|
border-radius: 0 !important;
|
|
width: 20px !important;
|
|
height: 20px !important;
|
|
position: absolute !important;
|
|
top: 50% !important;
|
|
right: 8px !important;
|
|
left: auto !important;
|
|
transform: translateY(-50%) !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
cursor: pointer !important;
|
|
font-size: 12px !important;
|
|
flex-shrink: 0 !important;
|
|
margin: 0 !important;
|
|
z-index: 100 !important;
|
|
inset-inline-end: 8px !important;
|
|
inset-inline-start: auto !important;
|
|
}
|
|
|
|
[data-sonner-toast] [data-close-button]:hover,
|
|
[data-sonner-toast] button[data-close-button]:hover,
|
|
[data-sonner-toast] button[aria-label="Close toast"]:hover,
|
|
[data-sonner-toast] > button:hover,
|
|
li[data-sonner-toast] [data-close-button]:hover,
|
|
li[data-sonner-toast] button:hover,
|
|
.sonner [data-close-button]:hover,
|
|
.sonner button[aria-label="Close toast"]:hover,
|
|
[data-sonner-toaster] [data-close-button]:hover,
|
|
[data-sonner-toaster] button[aria-label="Close toast"]:hover {
|
|
background: hsl(var(--muted)) !important;
|
|
}
|
|
|
|
/* Very specific override for close button positioning */
|
|
[data-sonner-toast] > div > button,
|
|
[data-sonner-toast] button:last-child,
|
|
[data-sonner-toast] button:only-child {
|
|
position: absolute !important;
|
|
top: 12px !important;
|
|
right: 12px !important;
|
|
left: unset !important;
|
|
transform: none !important;
|
|
margin-left: auto !important;
|
|
margin-right: 0 !important;
|
|
float: right !important;
|
|
padding-right: 40px !important;
|
|
}
|
|
|
|
/* Override any flex or grid positioning that puts button on left */
|
|
[data-sonner-toast] {
|
|
display: flex !important;
|
|
align-items: flex-start !important;
|
|
padding-left: 48px !important;
|
|
}
|
|
|
|
[data-sonner-toast] > div {
|
|
position: relative !important;
|
|
padding-right: 40px !important;
|
|
flex: 1 !important;
|
|
min-width: 0 !important;
|
|
}
|
|
|
|
/* Toast icon positioning */
|
|
[data-sonner-toast] [data-icon] {
|
|
position: absolute !important;
|
|
left: 16px !important;
|
|
top: 50% !important;
|
|
transform: translateY(-50%) !important;
|
|
flex-shrink: 0 !important;
|
|
width: 20px !important;
|
|
height: 20px !important;
|
|
}
|
|
|
|
/* Content styling */
|
|
[data-sonner-toast] [data-title] {
|
|
color: hsl(var(--foreground)) !important;
|
|
font-weight: 600 !important;
|
|
font-size: 14px !important;
|
|
font-family: var(--font-geist-mono, ui-monospace, monospace) !important;
|
|
margin: 0 !important;
|
|
line-height: 1.4 !important;
|
|
}
|
|
|
|
[data-sonner-toast] [data-description] {
|
|
color: hsl(var(--muted-foreground)) !important;
|
|
font-size: 13px !important;
|
|
font-family: var(--font-geist-mono, ui-monospace, monospace) !important;
|
|
margin: 0 !important;
|
|
line-height: 1.4 !important;
|
|
}
|
|
|
|
/* Content wrapper to avoid icon overlap */
|
|
[data-sonner-toast] [data-content] {
|
|
flex: 1 !important;
|
|
min-width: 0 !important;
|
|
padding-left: 0 !important;
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
/* Mobile responsive */
|
|
@media (max-width: 640px) {
|
|
[data-sonner-toaster] {
|
|
--width: calc(100vw - 32px);
|
|
left: 16px !important;
|
|
right: 16px !important;
|
|
}
|
|
}
|
|
|
|
.bg-pattern-grid {
|
|
background-image:
|
|
linear-gradient(oklch(var(--border)) 1px, transparent 1px),
|
|
linear-gradient(90deg, oklch(var(--border)) 1px, transparent 1px);
|
|
background-size: 20px 20px;
|
|
}
|
|
|
|
/* Enhanced backgrounds for main areas */
|
|
.bg-dashboard {
|
|
background: var(--background);
|
|
background-image: radial-gradient(
|
|
circle at 20px 20px,
|
|
oklch(var(--muted) / 0.3) 1px,
|
|
transparent 0
|
|
);
|
|
background-size: 40px 40px;
|
|
}
|