Mustafa Cetin
04034dca62
Features: - Complete UI/UX redesign for tablet/stylus optimization - Digital Notebook system (lined, grid, blank, dotted, music, calligraphy) - Drawing Canvas with stylus/pen support, pressure sensitivity - Art class mode with tutorial guides and shape templates - Demo data one-click cleanup for production transition - Subject-specific notebook filtering - Environmental messaging (Papier sparen, Umwelt schützen) - 44px minimum touch targets for tablet - No emojis - Lucide icons throughout - 700+ i18n keys (German/English) - Notebook types: lined, grid, blank, dotted, music, calligraphy - Drawing tools: pencil, pen, line, rectangle, circle, eraser - Undo/redo, color picker, stroke width, export PNG - Archive/unarchive notebooks - White backgrounds throughout - Emerald accent color theme Backend: - Notebook CRUD API routes - Drawing CRUD API routes - Demo data cleanup API - Prisma schema with Notebook, NotebookPage, Drawing models - isDemo flags on all new models
769 lines
25 KiB
CSS
769 lines
25 KiB
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-sidebar-accent: var(--sidebar-accent);
|
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
--color-sidebar-primary: var(--sidebar-primary);
|
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-sidebar: var(--sidebar);
|
|
--color-chart-5: var(--chart-5);
|
|
--color-chart-4: var(--chart-4);
|
|
--color-chart-3: var(--chart-3);
|
|
--color-chart-2: var(--chart-2);
|
|
--color-chart-1: var(--chart-1);
|
|
--color-ring: var(--ring);
|
|
--color-input: var(--input);
|
|
--color-border: var(--border);
|
|
--color-destructive: var(--destructive);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-card: var(--card);
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
--color-emerald: #10b981;
|
|
--color-teal: #14b8a6;
|
|
--color-amber: #f59e0b;
|
|
}
|
|
|
|
:root {
|
|
--radius: 0.75rem;
|
|
--background: oklch(0.99 0.002 155);
|
|
--foreground: oklch(0.17 0.01 260);
|
|
--card: oklch(1 0 0);
|
|
--card-foreground: oklch(0.17 0.01 260);
|
|
--popover: oklch(1 0 0);
|
|
--popover-foreground: oklch(0.17 0.01 260);
|
|
--primary: oklch(0.55 0.17 155);
|
|
--primary-foreground: oklch(0.98 0.005 155);
|
|
--secondary: oklch(0.96 0.01 155);
|
|
--secondary-foreground: oklch(0.25 0.02 260);
|
|
--muted: oklch(0.96 0.005 155);
|
|
--muted-foreground: oklch(0.55 0.02 260);
|
|
--accent: oklch(0.96 0.01 155);
|
|
--accent-foreground: oklch(0.25 0.02 260);
|
|
--destructive: oklch(0.577 0.245 27.325);
|
|
--border: oklch(0.93 0.005 155);
|
|
--input: oklch(0.93 0.005 155);
|
|
--ring: oklch(0.55 0.17 155);
|
|
--chart-1: oklch(0.55 0.17 155);
|
|
--chart-2: oklch(0.53 0.14 175);
|
|
--chart-3: oklch(0.72 0.19 85);
|
|
--chart-4: oklch(0.60 0.18 50);
|
|
--chart-5: oklch(0.65 0.22 330);
|
|
--sidebar: oklch(0.97 0.01 155);
|
|
--sidebar-foreground: oklch(0.17 0.01 260);
|
|
--sidebar-primary: oklch(0.55 0.17 155);
|
|
--sidebar-primary-foreground: oklch(0.98 0.005 155);
|
|
--sidebar-accent: oklch(0.94 0.02 155);
|
|
--sidebar-accent-foreground: oklch(0.25 0.02 260);
|
|
--sidebar-border: oklch(0.93 0.005 155);
|
|
--sidebar-ring: oklch(0.55 0.17 155);
|
|
}
|
|
|
|
.dark {
|
|
--background: oklch(0.13 0.01 260);
|
|
--foreground: oklch(0.98 0.005 155);
|
|
--card: oklch(0.18 0.015 260);
|
|
--card-foreground: oklch(0.98 0.005 155);
|
|
--popover: oklch(0.18 0.015 260);
|
|
--popover-foreground: oklch(0.98 0.005 155);
|
|
--primary: oklch(0.65 0.17 155);
|
|
--primary-foreground: oklch(0.15 0.01 260);
|
|
--secondary: oklch(0.24 0.02 260);
|
|
--secondary-foreground: oklch(0.98 0.005 155);
|
|
--muted: oklch(0.24 0.02 260);
|
|
--muted-foreground: oklch(0.65 0.02 260);
|
|
--accent: oklch(0.24 0.02 260);
|
|
--accent-foreground: oklch(0.98 0.005 155);
|
|
--destructive: oklch(0.704 0.191 22.216);
|
|
--border: oklch(1 0 0 / 10%);
|
|
--input: oklch(1 0 0 / 15%);
|
|
--ring: oklch(0.65 0.17 155);
|
|
--chart-1: oklch(0.65 0.17 155);
|
|
--chart-2: oklch(0.63 0.14 175);
|
|
--chart-3: oklch(0.77 0.19 85);
|
|
--chart-4: oklch(0.72 0.22 50);
|
|
--chart-5: oklch(0.70 0.22 330);
|
|
--sidebar: oklch(0.18 0.015 260);
|
|
--sidebar-foreground: oklch(0.98 0.005 155);
|
|
--sidebar-primary: oklch(0.65 0.17 155);
|
|
--sidebar-primary-foreground: oklch(0.15 0.01 260);
|
|
--sidebar-accent: oklch(0.24 0.02 260);
|
|
--sidebar-accent-foreground: oklch(0.98 0.005 155);
|
|
--sidebar-border: oklch(1 0 0 / 10%);
|
|
--sidebar-ring: oklch(0.65 0.17 155);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
}
|
|
|
|
/* Custom scrollbar styling */
|
|
@layer utilities {
|
|
.scrollbar-education::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
.scrollbar-education::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
.scrollbar-education::-webkit-scrollbar-thumb {
|
|
background: oklch(0.80 0.02 155);
|
|
border-radius: 3px;
|
|
}
|
|
.scrollbar-education::-webkit-scrollbar-thumb:hover {
|
|
background: oklch(0.65 0.17 155);
|
|
}
|
|
.dark .scrollbar-education::-webkit-scrollbar-thumb {
|
|
background: oklch(0.35 0.02 260);
|
|
}
|
|
.dark .scrollbar-education::-webkit-scrollbar-thumb:hover {
|
|
background: oklch(0.65 0.17 155);
|
|
}
|
|
|
|
/* Global scrollbar override */
|
|
*::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
*::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
*::-webkit-scrollbar-thumb {
|
|
background: oklch(0.85 0.01 155);
|
|
border-radius: 4px;
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
*::-webkit-scrollbar-thumb:hover {
|
|
background: oklch(0.65 0.17 155);
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
.dark *::-webkit-scrollbar-thumb {
|
|
background: oklch(0.30 0.015 260);
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
.dark *::-webkit-scrollbar-thumb:hover {
|
|
background: oklch(0.50 0.10 155);
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
/* Dot grid background pattern */
|
|
.bg-dots {
|
|
background-image: radial-gradient(circle, oklch(0.80 0.02 155) 1px, transparent 1px);
|
|
background-size: 24px 24px;
|
|
}
|
|
.dark .bg-dots {
|
|
background-image: radial-gradient(circle, oklch(0.25 0.015 260) 1px, transparent 1px);
|
|
background-size: 24px 24px;
|
|
}
|
|
|
|
/* Smooth transitions for all interactive elements */
|
|
.interactive-transition {
|
|
transition: all 0.2s ease-out;
|
|
}
|
|
|
|
/* Animated gradient background */
|
|
.animated-gradient-bg {
|
|
background: linear-gradient(135deg, oklch(0.97 0.01 155) 0%, oklch(0.99 0.002 155) 50%, oklch(0.97 0.01 175) 100%);
|
|
background-size: 200% 200%;
|
|
animation: gradient-shift 8s ease infinite;
|
|
}
|
|
.dark .animated-gradient-bg {
|
|
background: linear-gradient(135deg, oklch(0.15 0.01 260) 0%, oklch(0.13 0.01 260) 50%, oklch(0.15 0.01 155) 100%);
|
|
background-size: 200% 200%;
|
|
animation: gradient-shift 8s ease infinite;
|
|
}
|
|
@keyframes gradient-shift {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
|
|
/* Pulse animation */
|
|
@keyframes pulse-soft {
|
|
0%, 100% { transform: scale(1); opacity: 1; }
|
|
50% { transform: scale(1.05); opacity: 0.85; }
|
|
}
|
|
.animate-pulse-soft {
|
|
animation: pulse-soft 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* Shimmer animation for progress bars */
|
|
@keyframes shimmer-bar {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(200%); }
|
|
}
|
|
.animate-shimmer {
|
|
animation: shimmer-bar 2.5s ease-in-out infinite;
|
|
}
|
|
|
|
/* Float animation for geometric shapes */
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0) rotate(0deg); }
|
|
33% { transform: translateY(-15px) rotate(5deg); }
|
|
66% { transform: translateY(10px) rotate(-3deg); }
|
|
}
|
|
@keyframes float-reverse {
|
|
0%, 100% { transform: translateY(0) rotate(0deg); }
|
|
33% { transform: translateY(12px) rotate(-4deg); }
|
|
66% { transform: translateY(-10px) rotate(6deg); }
|
|
}
|
|
@keyframes float-slow {
|
|
0%, 100% { transform: translateY(0) rotate(0deg); }
|
|
50% { transform: translateY(-20px) rotate(8deg); }
|
|
}
|
|
.animate-float {
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
.animate-float-reverse {
|
|
animation: float-reverse 7s ease-in-out infinite;
|
|
}
|
|
.animate-float-slow {
|
|
animation: float-slow 10s ease-in-out infinite;
|
|
}
|
|
|
|
/* Progress bar animation */
|
|
@keyframes progress-fill {
|
|
from { width: 0; }
|
|
}
|
|
.animate-progress-fill {
|
|
animation: progress-fill 1s ease-out;
|
|
}
|
|
|
|
/* Print styles — full print stylesheet lives at end of file */
|
|
}
|
|
|
|
/* Focus ring for accessibility */
|
|
@layer base {
|
|
*:focus-visible {
|
|
outline: 2px solid oklch(0.55 0.17 155);
|
|
outline-offset: 2px;
|
|
border-radius: 4px;
|
|
}
|
|
*:focus:not(:focus-visible) {
|
|
outline: none;
|
|
}
|
|
/* Make keyboard focus more visible on interactive controls */
|
|
button:focus-visible,
|
|
a:focus-visible,
|
|
[role="button"]:focus-visible,
|
|
input:focus-visible,
|
|
select:focus-visible,
|
|
textarea:focus-visible,
|
|
[tabindex]:focus-visible {
|
|
outline: 2px solid oklch(0.55 0.17 155);
|
|
outline-offset: 2px;
|
|
box-shadow: 0 0 0 4px oklch(0.55 0.17 155 / 0.18);
|
|
transition: box-shadow 0.15s ease-out;
|
|
}
|
|
.dark button:focus-visible,
|
|
.dark a:focus-visible,
|
|
.dark [role="button"]:focus-visible,
|
|
.dark input:focus-visible,
|
|
.dark select:focus-visible,
|
|
.dark textarea:focus-visible,
|
|
.dark [tabindex]:focus-visible {
|
|
outline: 2px solid oklch(0.65 0.17 155);
|
|
box-shadow: 0 0 0 4px oklch(0.65 0.17 155 / 0.25);
|
|
}
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
}
|
|
|
|
/* ─── Styling polish utilities ─────────────────────────────────────────── */
|
|
|
|
@layer utilities {
|
|
/* Subtle paper texture for main backgrounds */
|
|
.bg-paper {
|
|
background-color: oklch(0.99 0.002 155);
|
|
background-image:
|
|
radial-gradient(circle at 20% 10%, oklch(0.96 0.015 155 / 0.6) 0%, transparent 40%),
|
|
radial-gradient(circle at 80% 80%, oklch(0.96 0.012 175 / 0.5) 0%, transparent 45%),
|
|
url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.45 0 0 0 0 0.3 0 0 0 0.025 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
}
|
|
.dark .bg-paper {
|
|
background-color: oklch(0.13 0.01 260);
|
|
background-image:
|
|
radial-gradient(circle at 20% 10%, oklch(0.18 0.02 155 / 0.35) 0%, transparent 40%),
|
|
radial-gradient(circle at 80% 80%, oklch(0.18 0.02 175 / 0.3) 0%, transparent 45%),
|
|
url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.85 0 0 0 0 0.7 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
/* Mesh gradient for hero / stats areas */
|
|
.bg-mesh {
|
|
background-color: oklch(0.99 0.002 155);
|
|
background-image:
|
|
radial-gradient(at 12% 18%, oklch(0.94 0.04 155 / 0.55) 0px, transparent 50%),
|
|
radial-gradient(at 88% 22%, oklch(0.94 0.05 175 / 0.45) 0px, transparent 50%),
|
|
radial-gradient(at 22% 88%, oklch(0.95 0.05 85 / 0.4) 0px, transparent 50%),
|
|
radial-gradient(at 78% 78%, oklch(0.95 0.05 330 / 0.3) 0px, transparent 50%);
|
|
}
|
|
.dark .bg-mesh {
|
|
background-color: oklch(0.13 0.01 260);
|
|
background-image:
|
|
radial-gradient(at 12% 18%, oklch(0.20 0.06 155 / 0.35) 0px, transparent 50%),
|
|
radial-gradient(at 88% 22%, oklch(0.20 0.06 175 / 0.3) 0px, transparent 50%),
|
|
radial-gradient(at 22% 88%, oklch(0.20 0.07 85 / 0.25) 0px, transparent 50%),
|
|
radial-gradient(at 78% 78%, oklch(0.20 0.08 330 / 0.2) 0px, transparent 50%);
|
|
}
|
|
|
|
/* Shimmer skeleton loader */
|
|
@keyframes shimmer {
|
|
0% { background-position: -200% 0; }
|
|
100% { background-position: 200% 0; }
|
|
}
|
|
.shimmer {
|
|
background: linear-gradient(
|
|
90deg,
|
|
oklch(0.92 0.005 155 / 0.4) 0%,
|
|
oklch(0.88 0.01 155 / 0.7) 50%,
|
|
oklch(0.92 0.005 155 / 0.4) 100%
|
|
);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.6s linear infinite;
|
|
}
|
|
.dark .shimmer {
|
|
background: linear-gradient(
|
|
90deg,
|
|
oklch(0.22 0.015 260 / 0.5) 0%,
|
|
oklch(0.28 0.02 260 / 0.8) 50%,
|
|
oklch(0.22 0.015 260 / 0.5) 100%
|
|
);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.6s linear infinite;
|
|
}
|
|
|
|
/* Subtle inner ring for premium cards */
|
|
.ring-inset-soft {
|
|
box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.05), 0 1px 2px oklch(0 0 0 / 0.04);
|
|
}
|
|
.dark .ring-inset-soft {
|
|
box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.04), 0 1px 2px oklch(0 0 0 / 0.2);
|
|
}
|
|
|
|
/* Document / paper preview look for reports */
|
|
.paper-preview {
|
|
background: white;
|
|
background-image:
|
|
linear-gradient(oklch(0.96 0.005 155 / 0.6) 1px, transparent 1px);
|
|
background-size: 100% 28px;
|
|
box-shadow:
|
|
0 1px 0 oklch(0.85 0.005 155),
|
|
0 4px 12px oklch(0 0 0 / 0.08),
|
|
0 24px 60px oklch(0 0 0 / 0.06);
|
|
}
|
|
.dark .paper-preview {
|
|
background: oklch(0.18 0.015 260);
|
|
background-image:
|
|
linear-gradient(oklch(0.22 0.015 260 / 0.6) 1px, transparent 1px);
|
|
background-size: 100% 28px;
|
|
box-shadow:
|
|
0 1px 0 oklch(0 0 0 / 0.4),
|
|
0 4px 12px oklch(0 0 0 / 0.4),
|
|
0 24px 60px oklch(0 0 0 / 0.3);
|
|
}
|
|
|
|
/* Sticky header helper for tables */
|
|
.sticky-header th {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 5;
|
|
background: oklch(0.96 0.005 155);
|
|
}
|
|
.dark .sticky-header th {
|
|
background: oklch(0.20 0.015 260);
|
|
}
|
|
|
|
/* Sparkline path */
|
|
.sparkline-path {
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
fill: none;
|
|
}
|
|
|
|
/* Lift on hover for cards */
|
|
.lift-on-hover {
|
|
transition: transform 0.18s ease, box-shadow 0.18s ease;
|
|
}
|
|
.lift-on-hover:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 12px 28px -10px oklch(0.55 0.17 155 / 0.18);
|
|
}
|
|
|
|
/* Gradient text for highlights */
|
|
.text-gradient-emerald {
|
|
background: linear-gradient(90deg, oklch(0.55 0.17 155), oklch(0.55 0.14 175));
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
.text-gradient-amber {
|
|
background: linear-gradient(90deg, oklch(0.72 0.19 85), oklch(0.60 0.18 50));
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
.text-gradient-violet {
|
|
background: linear-gradient(90deg, oklch(0.60 0.20 320), oklch(0.65 0.22 280));
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
.text-gradient-rose {
|
|
background: linear-gradient(90deg, oklch(0.65 0.22 15), oklch(0.62 0.20 350));
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
.text-gradient-teal {
|
|
background: linear-gradient(90deg, oklch(0.55 0.14 175), oklch(0.60 0.16 195));
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
/* Generic gradient text — direction aware */
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, oklch(0.55 0.17 155) 0%, oklch(0.55 0.14 175) 50%, oklch(0.65 0.22 330) 100%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
.dark .gradient-text {
|
|
background: linear-gradient(135deg, oklch(0.70 0.17 155) 0%, oklch(0.70 0.14 175) 50%, oklch(0.78 0.22 330) 100%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
/* Frosted glass card — backdrop blur + translucent surface */
|
|
.glass-card {
|
|
background: oklch(1 0 0 / 0.7);
|
|
backdrop-filter: blur(12px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(12px) saturate(180%);
|
|
border: 1px solid oklch(1 0 0 / 0.4);
|
|
box-shadow:
|
|
0 4px 16px -4px oklch(0 0 0 / 0.08),
|
|
inset 0 0 0 1px oklch(1 0 0 / 0.3);
|
|
}
|
|
.dark .glass-card {
|
|
background: oklch(0.18 0.015 260 / 0.65);
|
|
backdrop-filter: blur(12px) saturate(140%);
|
|
-webkit-backdrop-filter: blur(12px) saturate(140%);
|
|
border: 1px solid oklch(1 0 0 / 0.08);
|
|
box-shadow:
|
|
0 4px 16px -4px oklch(0 0 0 / 0.4),
|
|
inset 0 0 0 1px oklch(1 0 0 / 0.05);
|
|
}
|
|
.glass-card-strong {
|
|
background: oklch(1 0 0 / 0.85);
|
|
backdrop-filter: blur(20px) saturate(200%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(200%);
|
|
border: 1px solid oklch(1 0 0 / 0.5);
|
|
}
|
|
.dark .glass-card-strong {
|
|
background: oklch(0.18 0.015 260 / 0.8);
|
|
backdrop-filter: blur(20px) saturate(160%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(160%);
|
|
border: 1px solid oklch(1 0 0 / 0.1);
|
|
}
|
|
|
|
/* Animated count-up number */
|
|
@keyframes count-up {
|
|
from { opacity: 0; transform: translateY(4px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.animate-count-up {
|
|
animation: count-up 0.5s ease-out;
|
|
}
|
|
|
|
/* Decorative dotted/grid background pattern for headers */
|
|
.bg-pattern-dots {
|
|
background-image: radial-gradient(circle, oklch(0.55 0.17 155 / 0.18) 1px, transparent 1px);
|
|
background-size: 16px 16px;
|
|
}
|
|
.dark .bg-pattern-dots {
|
|
background-image: radial-gradient(circle, oklch(0.65 0.17 155 / 0.18) 1px, transparent 1px);
|
|
background-size: 16px 16px;
|
|
}
|
|
.bg-pattern-grid {
|
|
background-image:
|
|
linear-gradient(oklch(0.55 0.17 155 / 0.06) 1px, transparent 1px),
|
|
linear-gradient(90deg, oklch(0.55 0.17 155 / 0.06) 1px, transparent 1px);
|
|
background-size: 24px 24px;
|
|
}
|
|
.dark .bg-pattern-grid {
|
|
background-image:
|
|
linear-gradient(oklch(0.65 0.17 155 / 0.08) 1px, transparent 1px),
|
|
linear-gradient(90deg, oklch(0.65 0.17 155 / 0.08) 1px, transparent 1px);
|
|
background-size: 24px 24px;
|
|
}
|
|
|
|
/* Soft glow utility for highlighted elements */
|
|
.glow-emerald {
|
|
box-shadow: 0 0 0 1px oklch(0.55 0.17 155 / 0.15), 0 8px 24px -6px oklch(0.55 0.17 155 / 0.35);
|
|
}
|
|
.dark .glow-emerald {
|
|
box-shadow: 0 0 0 1px oklch(0.65 0.17 155 / 0.25), 0 8px 24px -6px oklch(0.65 0.17 155 / 0.45);
|
|
}
|
|
|
|
/* Subtle top-border accent for chart cards */
|
|
.accent-top-emerald { border-top: 3px solid oklch(0.55 0.17 155); }
|
|
.accent-top-teal { border-top: 3px solid oklch(0.55 0.14 175); }
|
|
.accent-top-amber { border-top: 3px solid oklch(0.72 0.19 85); }
|
|
.accent-top-violet { border-top: 3px solid oklch(0.60 0.20 320); }
|
|
.accent-top-rose { border-top: 3px solid oklch(0.65 0.22 15); }
|
|
|
|
/* Subtle entrance animation for staggered items */
|
|
@keyframes enter-fade {
|
|
from { opacity: 0; transform: translateY(6px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.animate-enter-fade {
|
|
animation: enter-fade 0.35s ease-out backwards;
|
|
}
|
|
|
|
/* ─── Styling polish additions ──────────────────────────────────── */
|
|
|
|
/* Smooth page transition animation (fadeIn for view changes) */
|
|
@keyframes view-fade-in {
|
|
from { opacity: 0; transform: translateY(4px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.animate-view-fade-in {
|
|
animation: view-fade-in 0.3s ease-out;
|
|
}
|
|
|
|
/* Hover lift effect for cards */
|
|
.card-hover-lift {
|
|
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
|
|
}
|
|
.card-hover-lift:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 24px -6px oklch(0.55 0.17 155 / 0.15);
|
|
}
|
|
.dark .card-hover-lift:hover {
|
|
box-shadow: 0 8px 24px -6px oklch(0.65 0.17 155 / 0.25);
|
|
}
|
|
|
|
/* Focus-within ring animation for inputs */
|
|
.input-focus-ring {
|
|
transition: box-shadow 0.2s ease-out;
|
|
}
|
|
.input-focus-ring:focus-within {
|
|
box-shadow: 0 0 0 3px oklch(0.55 0.17 155 / 0.2);
|
|
}
|
|
.dark .input-focus-ring:focus-within {
|
|
box-shadow: 0 0 0 3px oklch(0.65 0.17 155 / 0.3);
|
|
}
|
|
|
|
/* Tooltip animation (scale from 0.95 to 1) */
|
|
@keyframes tooltip-enter {
|
|
from { opacity: 0; transform: scale(0.95); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|
|
.animate-tooltip-enter {
|
|
animation: tooltip-enter 0.15s ease-out;
|
|
}
|
|
}
|
|
|
|
/* Print-specific styling — expands to all reports when printing */
|
|
@media print {
|
|
.no-print { display: none !important; }
|
|
.print-only { display: block !important; }
|
|
body { background: white !important; color: black !important; }
|
|
|
|
/* Hide sidebar, header, navigation */
|
|
[data-sidebar], header, nav, .no-print { display: none !important; }
|
|
|
|
/* Make main content full width */
|
|
main, .print-area { width: 100% !important; margin: 0 !important; padding: 1rem !important; }
|
|
|
|
/* Ensure cards have borders for print */
|
|
.card, [class*="Card"] { border: 1px solid #e5e7eb !important; break-inside: avoid; }
|
|
|
|
/* Ensure text is readable */
|
|
body { color: #000 !important; background: #fff !important; }
|
|
|
|
/* Page breaks */
|
|
.page-break { page-break-before: always; }
|
|
.print-break-before { page-break-before: always; }
|
|
.print-avoid-break { page-break-inside: avoid; }
|
|
|
|
.shadow-sm, .shadow-md, .shadow-lg, .shadow-xl { box-shadow: none !important; }
|
|
.paper-preview { box-shadow: none !important; }
|
|
@page { margin: 18mm 16mm; }
|
|
/* Better margins for print */
|
|
.card-hover-lift:hover { transform: none !important; box-shadow: none !important; }
|
|
/* Hide interactive elements */
|
|
button, .no-print, [role="button"], nav, aside, footer, header,
|
|
.sidebar, .sidebar-trigger, .breadcrumb { display: none !important; }
|
|
/* Ensure readable text */
|
|
.dark { background: white !important; color: black !important; }
|
|
.dark * { color: inherit !important; background: transparent !important; }
|
|
/* Prevent overflow */
|
|
.overflow-y-auto, .max-h-96, .max-h-80, .max-h-72 { max-height: none !important; overflow: visible !important; }
|
|
}
|
|
|
|
/* ─── Tablet & Stylus Optimization ────────────────────────────────────── */
|
|
|
|
/* Minimum touch target size (44px as per Apple HIG and WCAG guidelines) */
|
|
@layer utilities {
|
|
.min-touch {
|
|
min-width: 44px;
|
|
min-height: 44px;
|
|
}
|
|
}
|
|
|
|
/* Touch-friendly media queries for tablets (768px-1024px) */
|
|
@media (pointer: coarse) {
|
|
/* Increase touch targets for all interactive elements */
|
|
button,
|
|
[role="button"],
|
|
a,
|
|
input[type="checkbox"],
|
|
input[type="radio"],
|
|
select,
|
|
.tabs-trigger,
|
|
[data-state] {
|
|
min-height: 44px;
|
|
}
|
|
|
|
/* Stylus-friendly: larger focus rings to prevent accidental taps */
|
|
*:focus-visible {
|
|
outline-width: 3px;
|
|
outline-offset: 4px;
|
|
}
|
|
|
|
/* More generous spacing between interactive elements */
|
|
.sidebar-menu-item {
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
/* Prevent text selection while using stylus on interactive elements */
|
|
button, a, [role="button"] {
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
/* Slightly larger fonts for touch readability */
|
|
input, select, textarea {
|
|
font-size: 16px; /* Prevents iOS zoom on input focus */
|
|
}
|
|
}
|
|
|
|
/* Stylus-specific improvements */
|
|
@media (pointer: fine) and (hover: none) {
|
|
/* Stylus devices often lack hover — replace hover effects with active */
|
|
*:hover {
|
|
/* Remove hover-only styles that don't make sense without hover capability */
|
|
}
|
|
/* Larger active/focus states for stylus precision */
|
|
*:active {
|
|
transform: scale(0.98);
|
|
transition: transform 0.1s ease;
|
|
}
|
|
}
|
|
|
|
/* ─── Smooth Scrollbar Styling (touch-friendly) ─────────────────────── */
|
|
@layer utilities {
|
|
.scrollbar-touch::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
.scrollbar-touch::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
margin: 4px;
|
|
}
|
|
.scrollbar-touch::-webkit-scrollbar-thumb {
|
|
background: oklch(0.80 0.02 155 / 0.5);
|
|
border-radius: 5px;
|
|
border: 3px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
.scrollbar-touch::-webkit-scrollbar-thumb:hover {
|
|
background: oklch(0.65 0.17 155 / 0.7);
|
|
border: 3px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
.dark .scrollbar-touch::-webkit-scrollbar-thumb {
|
|
background: oklch(0.35 0.015 260 / 0.5);
|
|
border: 3px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
/* Stylus-friendly input styles — larger focus rings for precision tapping */
|
|
.stylus-input:focus-visible {
|
|
outline: 3px solid oklch(0.55 0.17 155);
|
|
outline-offset: 4px;
|
|
box-shadow: 0 0 0 6px oklch(0.55 0.17 155 / 0.15);
|
|
border-radius: 8px;
|
|
transition: box-shadow 0.2s ease-out, outline-offset 0.2s ease-out;
|
|
}
|
|
.dark .stylus-input:focus-visible {
|
|
outline: 3px solid oklch(0.65 0.17 155);
|
|
box-shadow: 0 0 0 6px oklch(0.65 0.17 155 / 0.2);
|
|
}
|
|
}
|
|
|
|
/* ─── Better Print Styles ──────────────────────────────────────────────── */
|
|
@media print {
|
|
/* Ensure emerald accent colors print as dark gray for readability */
|
|
.text-emerald-600, .text-emerald-700, .text-teal-600, .text-teal-700 {
|
|
color: #333 !important;
|
|
}
|
|
.bg-emerald-50, .bg-emerald-100, .bg-teal-50, .bg-teal-100,
|
|
.bg-gradient-to-r,
|
|
[class*="from-emerald"],
|
|
[class*="from-teal"] {
|
|
background: #f5f5f5 !important;
|
|
}
|
|
|
|
/* Remove animations for print */
|
|
.animate-float, .animate-float-reverse, .animate-float-slow,
|
|
.animate-pulse-soft, .animate-shimmer, .animate-progress-fill,
|
|
.animate-view-fade-in, .animate-enter-fade, .animate-count-up {
|
|
animation: none !important;
|
|
}
|
|
|
|
/* Force all cards to have visible borders */
|
|
[class*="border-0"], [class*="border-l-3"] {
|
|
border: 1px solid #ddd !important;
|
|
}
|
|
|
|
/* Remove shadows */
|
|
.shadow-sm, .shadow-md, .shadow-lg, .shadow-xl,
|
|
[class*="shadow-"] {
|
|
box-shadow: none !important;
|
|
}
|
|
}
|