368 lines
8.1 KiB
CSS
368 lines
8.1 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
/* ResolutionFlow Dark Theme — Purple Gradient Accents */
|
|
--background: 240 10% 3.9%;
|
|
--foreground: 0 0% 100%;
|
|
--card: 240 10% 9.4%;
|
|
--card-foreground: 0 0% 100%;
|
|
--popover: 240 10% 9.4%;
|
|
--popover-foreground: 0 0% 100%;
|
|
--primary: 243 75% 59%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 240 5.9% 15%;
|
|
--secondary-foreground: 0 0% 100%;
|
|
--muted: 240 5.9% 15%;
|
|
--muted-foreground: 240 5% 64.9%;
|
|
--accent: 240 5.9% 15%;
|
|
--accent-foreground: 0 0% 100%;
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 240 5.9% 15%;
|
|
--input: 240 5.9% 15%;
|
|
--ring: 243 75% 59%;
|
|
--radius: 0.75rem;
|
|
|
|
/* App Shell tokens */
|
|
--sidebar-w: 260px;
|
|
--sidebar-bg: 240 10% 4.5%;
|
|
--sidebar-hover: 240 6% 12%;
|
|
--sidebar-active: 243 75% 59% / 0.08;
|
|
--border-subtle: 240 6% 12%;
|
|
--text-dimmed: 240 4% 24%;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: hsl(var(--border)) transparent;
|
|
}
|
|
*::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
*::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
*::-webkit-scrollbar-thumb {
|
|
background-color: hsl(var(--border));
|
|
border-radius: 9999px;
|
|
}
|
|
*::-webkit-scrollbar-thumb:hover {
|
|
background-color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
}
|
|
|
|
/* App Shell Grid Layout */
|
|
.app-shell {
|
|
display: grid;
|
|
grid-template-columns: var(--sidebar-w) 1fr;
|
|
grid-template-rows: 56px 1fr;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
transition: grid-template-columns 200ms ease;
|
|
}
|
|
|
|
.app-shell--collapsed {
|
|
grid-template-columns: 56px 1fr;
|
|
}
|
|
|
|
.topbar {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.sidebar {
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.main-content {
|
|
min-height: 0;
|
|
min-width: 0;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Mobile: single column */
|
|
@media (max-width: 767px) {
|
|
.app-shell {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* Staggered fade-in for page sections */
|
|
.fade-in {
|
|
animation: fadeIn 0.3s ease forwards;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(6px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
/* Animations */
|
|
@keyframes fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes fade-in-up {
|
|
from { opacity: 0; transform: translateY(4px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes slide-in-from-left {
|
|
from { transform: translateX(-100%); }
|
|
to { transform: translateX(0); }
|
|
}
|
|
|
|
@keyframes slide-in-from-bottom {
|
|
from { opacity: 0; transform: translateY(16px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes scale-in {
|
|
from { opacity: 0; transform: scale(0.95); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|
|
|
|
@layer utilities {
|
|
.animate-fade-in {
|
|
animation: fade-in 200ms ease-out;
|
|
}
|
|
|
|
.animate-fade-in-up {
|
|
animation: fade-in-up 200ms ease-out;
|
|
}
|
|
|
|
.animate-slide-in-left {
|
|
animation: slide-in-from-left 200ms ease-out;
|
|
}
|
|
|
|
.animate-slide-in-bottom {
|
|
animation: slide-in-from-bottom 200ms ease-out;
|
|
}
|
|
|
|
.animate-scale-in {
|
|
animation: scale-in 150ms ease-out;
|
|
}
|
|
|
|
/* Button press feedback */
|
|
.btn-press {
|
|
@apply active:scale-[0.98] transition-transform;
|
|
}
|
|
|
|
/* Brand gradient text */
|
|
.text-gradient-brand {
|
|
@apply bg-gradient-brand bg-clip-text text-transparent;
|
|
}
|
|
|
|
/* ── Legacy glass-card utilities (preserved for backward compatibility) ── */
|
|
/* New components should use bg-card border-border rounded-xl instead */
|
|
|
|
.glass-card {
|
|
background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.glass-card-hover {
|
|
background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
|
|
border-color: rgba(255, 255, 255, 0.12);
|
|
}
|
|
|
|
.glass-card-glow {
|
|
background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
box-shadow: 0 0 40px rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.glass-stat {
|
|
background: rgba(20, 20, 25, 0.5);
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
}
|
|
|
|
/* Sonner Toast Customization */
|
|
@layer components {
|
|
:where([data-sonner-toast]) {
|
|
@apply bg-card text-card-foreground;
|
|
@apply border border-border shadow-lg;
|
|
@apply rounded-xl;
|
|
font-family: 'Inter', system-ui, sans-serif;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
:where([data-sonner-toast]) [data-title] {
|
|
font-family: 'Inter', system-ui, sans-serif;
|
|
font-weight: 600;
|
|
}
|
|
|
|
:where([data-sonner-toast][data-type="success"]) {
|
|
border-color: rgba(52, 211, 153, 0.3);
|
|
}
|
|
:where([data-sonner-toast][data-type="success"]) [data-icon] {
|
|
color: #34d399;
|
|
}
|
|
|
|
:where([data-sonner-toast][data-type="error"]) {
|
|
border-color: rgba(248, 113, 113, 0.3);
|
|
}
|
|
:where([data-sonner-toast][data-type="error"]) [data-icon] {
|
|
color: #f87171;
|
|
}
|
|
|
|
:where([data-sonner-toast][data-type="info"]) {
|
|
@apply border-border;
|
|
}
|
|
:where([data-sonner-toast][data-type="info"]) [data-icon] {
|
|
@apply text-muted-foreground;
|
|
}
|
|
|
|
:where([data-sonner-toast][data-type="warning"]) {
|
|
border-color: rgba(251, 191, 36, 0.3);
|
|
}
|
|
:where([data-sonner-toast][data-type="warning"]) [data-icon] {
|
|
color: #fbbf24;
|
|
}
|
|
|
|
:where([data-sonner-toast]) [data-close-button] {
|
|
@apply text-muted-foreground hover:bg-accent hover:text-accent-foreground;
|
|
@apply rounded-md transition-colors;
|
|
}
|
|
|
|
:where([data-sonner-toast]) [data-icon][data-loading] {
|
|
@apply text-white;
|
|
}
|
|
|
|
/* React Day Picker Customization */
|
|
.rdp-custom {
|
|
@apply text-foreground;
|
|
}
|
|
|
|
.rdp-custom .rdp-month {
|
|
@apply w-full;
|
|
}
|
|
|
|
.rdp-custom .rdp-caption {
|
|
@apply flex justify-center items-center mb-4;
|
|
}
|
|
|
|
.rdp-custom .rdp-caption_label {
|
|
@apply text-sm font-medium;
|
|
}
|
|
|
|
.rdp-custom .rdp-nav {
|
|
@apply flex gap-1;
|
|
}
|
|
|
|
.rdp-custom .rdp-nav_button {
|
|
@apply h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100;
|
|
}
|
|
|
|
.rdp-custom .rdp-table {
|
|
@apply w-full border-collapse;
|
|
}
|
|
|
|
.rdp-custom .rdp-head_cell {
|
|
@apply text-muted-foreground font-normal text-xs;
|
|
}
|
|
|
|
.rdp-custom .rdp-cell {
|
|
@apply text-center text-sm p-0;
|
|
}
|
|
|
|
.rdp-custom .rdp-day {
|
|
@apply h-9 w-9 p-0 font-normal hover:bg-accent rounded-md transition-colors;
|
|
}
|
|
|
|
.rdp-custom .rdp-day_selected {
|
|
@apply bg-primary text-primary-foreground hover:bg-primary/90;
|
|
}
|
|
|
|
.rdp-custom .rdp-day_today {
|
|
@apply bg-accent text-accent-foreground;
|
|
}
|
|
|
|
.rdp-custom .rdp-day_outside {
|
|
@apply text-muted-foreground opacity-50;
|
|
}
|
|
|
|
.rdp-custom .rdp-day_disabled {
|
|
@apply text-muted-foreground opacity-50;
|
|
}
|
|
|
|
.rdp-custom .rdp-day_range_middle {
|
|
@apply bg-accent text-accent-foreground;
|
|
}
|
|
|
|
.rdp-custom .rdp-day_hidden {
|
|
@apply invisible;
|
|
}
|
|
}
|
|
|
|
/* React Flow dark theme overrides */
|
|
.react-flow__background {
|
|
background-color: hsl(var(--background));
|
|
}
|
|
|
|
.react-flow__controls {
|
|
background-color: hsl(var(--card));
|
|
border-color: hsl(var(--border));
|
|
border-radius: 0.75rem;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.react-flow__controls-button {
|
|
background-color: hsl(var(--card));
|
|
border-color: hsl(var(--border));
|
|
fill: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.react-flow__controls-button:hover {
|
|
background-color: hsl(var(--accent));
|
|
}
|
|
|
|
.react-flow__minimap {
|
|
background-color: hsl(var(--card));
|
|
border-color: hsl(var(--border));
|
|
border-radius: 0.75rem;
|
|
}
|
|
|
|
.react-flow__edge-path {
|
|
stroke: hsl(var(--border));
|
|
}
|
|
|
|
.react-flow__edge-text {
|
|
fill: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.react-flow__edge-textbg {
|
|
fill: hsl(var(--card));
|
|
}
|
|
|
|
/* Hide default React Flow attribution */
|
|
.react-flow__attribution {
|
|
display: none;
|
|
}
|
|
|
|
/* Handle styles */
|
|
.react-flow__handle {
|
|
background-color: hsl(var(--border));
|
|
}
|