sepehr
153c921960
Some checks failed
Deploy to Production / Build and Deploy (push) Failing after 1m7s
Replaced ~100+ hardcoded French and English text strings across 30+ components with proper i18n t() calls. Added 57 new translation keys to all 15 locale files (ar, de, en, es, fa, fr, hi, it, ja, ko, nl, pl, pt, ru, zh). Key changes: - contextual-ai-chat.tsx: 30 French strings → t() (actions, toasts, labels, placeholders) - ai-chat.tsx: 15 French/English strings → t() (header, tabs, welcome, insights, history) - note-inline-editor.tsx: 20 French fallbacks removed (toolbar, save status, checklist) - lab-skeleton.tsx: French loading text → t() - admin-header.tsx, header.tsx, editor-connections-section.tsx: French fallbacks removed - New AI chat component, agent cards, sidebar, settings panel i18n cleanup Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
505 lines
18 KiB
CSS
505 lines
18 KiB
CSS
@import "tailwindcss";
|
|
@plugin "@tailwindcss/typography";
|
|
@import "tw-animate-css";
|
|
@import "vazirmatn/Vazirmatn-font-face.css";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
/* Custom breakpoints for desktop design (matching code.html reference) */
|
|
@theme {
|
|
/* Desktop breakpoints: 1024px (min), 1440px (large), 1920px (ultra-wide) */
|
|
--breakpoint-desktop: 1024px;
|
|
--breakpoint-large-desktop: 1440px;
|
|
--breakpoint-ultra-wide: 1920px;
|
|
|
|
/* Custom colors matching Keep design */
|
|
--color-primary: #64748b;
|
|
--color-background-light: #f7f7f8;
|
|
--color-background-dark: #1a1d23;
|
|
|
|
/* Stitch Design Tokens */
|
|
--font-sans: var(--font-inter);
|
|
--font-heading: var(--font-manrope);
|
|
--shadow-level-1: 0px 4px 20px rgba(15, 23, 42, 0.05);
|
|
--shadow-level-2: 0px 10px 30px rgba(15, 23, 42, 0.08);
|
|
}
|
|
|
|
/* Custom scrollbar for better aesthetics */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #cbd5e1;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #94a3b8;
|
|
}
|
|
|
|
.dark ::-webkit-scrollbar-thumb {
|
|
background: #475569;
|
|
}
|
|
|
|
/* Custom Prose overrides for compact notes */
|
|
@utility prose-compact {
|
|
& :where(h1, h2, h3, h4) {
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
& :where(p, ul, ol, li) {
|
|
margin-top: 0.25rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
}
|
|
|
|
@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);
|
|
--radius-2xl: calc(var(--radius) + 8px);
|
|
--radius-3xl: calc(var(--radius) + 12px);
|
|
--radius-4xl: calc(var(--radius) + 16px);
|
|
}
|
|
|
|
:root {
|
|
--radius: 0.5rem;
|
|
--background: #f8fafc; /* Sub-surface off-white */
|
|
--foreground: oklch(0.2 0.02 230); /* Gris-bleu foncé */
|
|
--card: oklch(1 0 0); /* Blanc pur */
|
|
--card-foreground: oklch(0.2 0.02 230);
|
|
--popover: oklch(1 0 0);
|
|
--popover-foreground: oklch(0.2 0.02 230);
|
|
--primary: #0284c7; /* Sky Blue */
|
|
--primary-foreground: #ffffff; /* Blanc */
|
|
--secondary: #e2e8f0; /* Gris-bleu très pâle */
|
|
--secondary-foreground: #1e293b;
|
|
--muted: #f1f5f9;
|
|
--muted-foreground: #64748b;
|
|
--accent: #f8fafc;
|
|
--accent-foreground: #0284c7;
|
|
--destructive: oklch(0.6 0.18 25); /* Rouge */
|
|
--border: #e2e8f0; /* Gris-bleu très clair */
|
|
--input: #ffffff;
|
|
--ring: #0284c7;
|
|
--chart-1: oklch(0.646 0.222 41.116);
|
|
--chart-2: oklch(0.6 0.118 184.704);
|
|
--chart-3: oklch(0.398 0.07 227.392);
|
|
--chart-4: oklch(0.828 0.189 84.429);
|
|
--chart-5: oklch(0.769 0.188 70.08);
|
|
--sidebar: oklch(0.97 0.004 230);
|
|
--sidebar-foreground: oklch(0.2 0.02 230);
|
|
--sidebar-primary: oklch(0.45 0.08 230);
|
|
--sidebar-primary-foreground: oklch(0.99 0 0);
|
|
--sidebar-accent: oklch(0.94 0.005 230);
|
|
--sidebar-accent-foreground: oklch(0.2 0.02 230);
|
|
--sidebar-border: oklch(0.9 0.008 230);
|
|
--sidebar-ring: oklch(0.7 0.005 230);
|
|
}
|
|
|
|
[data-theme='light'] {
|
|
--background: oklch(0.985 0.003 230); /* Blanc grisâtre */
|
|
--foreground: oklch(0.2 0.02 230); /* Gris-bleu foncé */
|
|
--card: oklch(1 0 0); /* Blanc pur */
|
|
--card-foreground: oklch(0.2 0.02 230);
|
|
--popover: oklch(1 0 0);
|
|
--popover-foreground: oklch(0.2 0.02 230);
|
|
--primary: oklch(0.45 0.08 230); /* Gris-bleu doux */
|
|
--primary-foreground: oklch(0.99 0 0); /* Blanc */
|
|
--secondary: oklch(0.94 0.005 230); /* Gris-bleu très pâle */
|
|
--secondary-foreground: oklch(0.2 0.02 230);
|
|
--muted: oklch(0.92 0.005 230);
|
|
--muted-foreground: oklch(0.6 0.01 230);
|
|
--accent: oklch(0.94 0.005 230);
|
|
--accent-foreground: oklch(0.2 0.02 230);
|
|
--destructive: oklch(0.6 0.18 25); /* Rouge */
|
|
--border: oklch(0.9 0.008 230); /* Gris-bleu très clair */
|
|
--input: oklch(0.98 0.003 230);
|
|
--ring: oklch(0.7 0.005 230);
|
|
--popover: oklch(1 0 0);
|
|
--popover-foreground: oklch(0.2 0.02 230);
|
|
--sidebar: oklch(0.97 0.004 230);
|
|
--sidebar-foreground: oklch(0.2 0.02 230);
|
|
--sidebar-primary: oklch(0.45 0.08 230);
|
|
--sidebar-primary-foreground: oklch(0.99 0 0);
|
|
--sidebar-accent: oklch(0.94 0.005 230);
|
|
--sidebar-accent-foreground: oklch(0.2 0.02 230);
|
|
--sidebar-border: oklch(0.9 0.008 230);
|
|
--sidebar-ring: oklch(0.7 0.005 230);
|
|
}
|
|
|
|
[data-theme='light'].dark {
|
|
--background: oklch(0.14 0.005 230); /* Noir grisâtre */
|
|
--foreground: oklch(0.97 0.003 230); /* Blanc grisâtre */
|
|
--card: oklch(0.18 0.006 230); /* Gris-bleu foncé */
|
|
--card-foreground: oklch(0.97 0.003 230);
|
|
--popover: oklch(0.18 0.006 230);
|
|
--popover-foreground: oklch(0.97 0.003 230);
|
|
--primary: oklch(0.55 0.08 230); /* Gris-bleu plus clair */
|
|
--primary-foreground: oklch(0.1 0 0); /* Noir */
|
|
--secondary: oklch(0.24 0.006 230);
|
|
--secondary-foreground: oklch(0.97 0.003 230);
|
|
--muted: oklch(0.22 0.006 230);
|
|
--muted-foreground: oklch(0.55 0.01 230);
|
|
--accent: oklch(0.24 0.006 230);
|
|
--accent-foreground: oklch(0.97 0.003 230);
|
|
--destructive: oklch(0.65 0.18 25);
|
|
--border: oklch(0.28 0.01 230);
|
|
--input: oklch(0.2 0.006 230);
|
|
--ring: oklch(0.6 0.01 230);
|
|
--popover: oklch(0.18 0.006 230);
|
|
--popover-foreground: oklch(0.97 0.003 230);
|
|
--sidebar: oklch(0.12 0.005 230);
|
|
--sidebar-foreground: oklch(0.97 0.003 230);
|
|
--sidebar-primary: oklch(0.55 0.08 230);
|
|
--sidebar-primary-foreground: oklch(0.1 0 0);
|
|
--sidebar-accent: oklch(0.24 0.006 230);
|
|
--sidebar-accent-foreground: oklch(0.97 0.003 230);
|
|
--sidebar-border: oklch(0.28 0.01 230);
|
|
--sidebar-ring: oklch(0.6 0.01 230);
|
|
}
|
|
|
|
.dark {
|
|
--background: oklch(0.14 0.005 230); /* Noir grisâtre */
|
|
--foreground: oklch(0.97 0.003 230); /* Blanc grisâtre */
|
|
--card: oklch(0.18 0.006 230); /* Gris-bleu foncé */
|
|
--card-foreground: oklch(0.97 0.003 230);
|
|
--popover: oklch(0.18 0.006 230);
|
|
--popover-foreground: oklch(0.97 0.003 230);
|
|
--primary: oklch(0.55 0.08 230); /* Gris-bleu plus clair */
|
|
--primary-foreground: oklch(0.1 0 0); /* Noir */
|
|
--secondary: oklch(0.24 0.006 230);
|
|
--secondary-foreground: oklch(0.97 0.003 230);
|
|
--muted: oklch(0.22 0.006 230);
|
|
--muted-foreground: oklch(0.55 0.01 230);
|
|
--accent: oklch(0.24 0.006 230);
|
|
--accent-foreground: oklch(0.97 0.003 230);
|
|
--destructive: oklch(0.65 0.18 25);
|
|
--border: oklch(0.28 0.01 230);
|
|
--input: oklch(0.2 0.006 230);
|
|
--ring: oklch(0.6 0.01 230);
|
|
--chart-1: oklch(0.488 0.243 264.376);
|
|
--chart-2: oklch(0.696 0.17 162.48);
|
|
--chart-3: oklch(0.769 0.188 70.08);
|
|
--chart-4: oklch(0.627 0.265 303.9);
|
|
--chart-5: oklch(0.645 0.246 16.439);
|
|
--sidebar: oklch(0.12 0.005 230);
|
|
--sidebar-foreground: oklch(0.97 0.003 230);
|
|
--sidebar-primary: oklch(0.55 0.08 230);
|
|
--sidebar-primary-foreground: oklch(0.1 0 0);
|
|
--sidebar-accent: oklch(0.24 0.006 230);
|
|
--sidebar-accent-foreground: oklch(0.97 0.003 230);
|
|
--sidebar-border: oklch(0.28 0.01 230);
|
|
--sidebar-ring: oklch(0.6 0.01 230);
|
|
}
|
|
|
|
[data-theme='midnight'] {
|
|
--background: oklch(0.94 0.005 250); /* Gris-bleu très pâle */
|
|
--foreground: oklch(0.18 0.03 250); /* Gris-bleu très foncé */
|
|
--card: oklch(0.97 0.006 250); /* Gris-bleu pâle */
|
|
--card-foreground: oklch(0.18 0.03 250);
|
|
--primary: oklch(0.5 0.12 250); /* Gris-bleu saturé */
|
|
--primary-foreground: oklch(0.99 0 0); /* Blanc */
|
|
--secondary: oklch(0.2 0.01 250);
|
|
--secondary-foreground: oklch(0.18 0.03 250);
|
|
--muted: oklch(0.22 0.01 250);
|
|
--muted-foreground: oklch(0.55 0.02 250);
|
|
--accent: oklch(0.25 0.015 250);
|
|
--accent-foreground: oklch(0.18 0.03 250);
|
|
--destructive: oklch(0.6 0.22 25);
|
|
--border: oklch(0.85 0.015 250);
|
|
--input: oklch(0.25 0.01 250);
|
|
--ring: oklch(0.65 0.015 250);
|
|
--popover: oklch(0.97 0.006 250);
|
|
--popover-foreground: oklch(0.18 0.03 250);
|
|
--sidebar: oklch(0.9 0.01 250);
|
|
--sidebar-foreground: oklch(0.18 0.03 250);
|
|
--sidebar-primary: oklch(0.5 0.12 250);
|
|
--sidebar-primary-foreground: oklch(0.99 0 0);
|
|
--sidebar-accent: oklch(0.25 0.015 250);
|
|
--sidebar-accent-foreground: oklch(0.18 0.03 250);
|
|
--sidebar-border: oklch(0.85 0.015 250);
|
|
--sidebar-ring: oklch(0.65 0.015 250);
|
|
}
|
|
|
|
[data-theme='midnight'].dark {
|
|
--background: oklch(0.1 0.01 250); /* Noir profond */
|
|
--foreground: oklch(0.96 0.005 250); /* Blanc grisâtre */
|
|
--card: oklch(0.15 0.015 250); /* Gris-bleu très foncé */
|
|
--card-foreground: oklch(0.96 0.005 250);
|
|
--primary: oklch(0.6 0.12 250); /* Gris-bleu vibrant */
|
|
--primary-foreground: oklch(0.1 0 0); /* Noir */
|
|
--secondary: oklch(0.18 0.015 250);
|
|
--secondary-foreground: oklch(0.96 0.005 250);
|
|
--muted: oklch(0.2 0.015 250);
|
|
--muted-foreground: oklch(0.5 0.02 250);
|
|
--accent: oklch(0.22 0.02 250);
|
|
--accent-foreground: oklch(0.96 0.005 250);
|
|
--destructive: oklch(0.65 0.2 25);
|
|
--border: oklch(0.3 0.02 250);
|
|
--input: oklch(0.22 0.02 250);
|
|
--ring: oklch(0.55 0.02 250);
|
|
--popover: oklch(0.15 0.015 250);
|
|
--popover-foreground: oklch(0.96 0.005 250);
|
|
--sidebar: oklch(0.08 0.01 250);
|
|
--sidebar-foreground: oklch(0.96 0.005 250);
|
|
--sidebar-primary: oklch(0.6 0.12 250);
|
|
--sidebar-primary-foreground: oklch(0.1 0 0);
|
|
--sidebar-accent: oklch(0.22 0.02 250);
|
|
--sidebar-accent-foreground: oklch(0.96 0.005 250);
|
|
--sidebar-border: oklch(0.3 0.02 250);
|
|
--sidebar-ring: oklch(0.55 0.02 250);
|
|
}
|
|
|
|
[data-theme='blue'] {
|
|
--background: oklch(0.985 0.005 225); /* Blanc légèrement bleuté */
|
|
--foreground: oklch(0.18 0.035 225); /* Gris-bleu foncé saturé */
|
|
--card: oklch(1 0 0); /* Blanc pur */
|
|
--card-foreground: oklch(0.18 0.035 225);
|
|
--primary: oklch(0.5 0.15 225); /* Bleu vibrant */
|
|
--primary-foreground: oklch(0.99 0 0); /* Blanc */
|
|
--secondary: oklch(0.93 0.008 225);
|
|
--secondary-foreground: oklch(0.18 0.035 225);
|
|
--muted: oklch(0.9 0.01 225);
|
|
--muted-foreground: oklch(0.58 0.015 225);
|
|
--accent: oklch(0.93 0.01 225);
|
|
--accent-foreground: oklch(0.18 0.035 225);
|
|
--destructive: oklch(0.6 0.2 25);
|
|
--border: oklch(0.87 0.012 225);
|
|
--input: oklch(0.95 0.01 225);
|
|
--ring: oklch(0.65 0.015 225);
|
|
--popover: oklch(1 0 0);
|
|
--popover-foreground: oklch(0.18 0.035 225);
|
|
--sidebar: oklch(0.965 0.008 225);
|
|
--sidebar-foreground: oklch(0.18 0.035 225);
|
|
--sidebar-primary: oklch(0.5 0.15 225);
|
|
--sidebar-primary-foreground: oklch(0.99 0 0);
|
|
--sidebar-accent: oklch(0.93 0.01 225);
|
|
--sidebar-accent-foreground: oklch(0.18 0.035 225);
|
|
--sidebar-border: oklch(0.87 0.012 225);
|
|
--sidebar-ring: oklch(0.65 0.015 225);
|
|
}
|
|
|
|
[data-theme='blue'].dark {
|
|
--background: oklch(0.13 0.008 225); /* Noir légèrement bleuté */
|
|
--foreground: oklch(0.97 0.006 225); /* Blanc légèrement bleuté */
|
|
--card: oklch(0.17 0.01 225); /* Gris-bleu foncé */
|
|
--card-foreground: oklch(0.97 0.006 225);
|
|
--primary: oklch(0.6 0.15 225); /* Bleu vibrant plus clair */
|
|
--primary-foreground: oklch(0.1 0 0); /* Noir */
|
|
--secondary: oklch(0.22 0.015 225);
|
|
--secondary-foreground: oklch(0.97 0.006 225);
|
|
--muted: oklch(0.25 0.02 225);
|
|
--muted-foreground: oklch(0.52 0.018 225);
|
|
--accent: oklch(0.25 0.025 225);
|
|
--accent-foreground: oklch(0.97 0.006 225);
|
|
--destructive: oklch(0.65 0.22 25);
|
|
--border: oklch(0.32 0.018 225);
|
|
--input: oklch(0.25 0.02 225);
|
|
--ring: oklch(0.55 0.02 225);
|
|
--popover: oklch(0.17 0.01 225);
|
|
--popover-foreground: oklch(0.97 0.006 225);
|
|
--sidebar: oklch(0.1 0.01 225);
|
|
--sidebar-foreground: oklch(0.97 0.006 225);
|
|
--sidebar-primary: oklch(0.6 0.15 225);
|
|
--sidebar-primary-foreground: oklch(0.1 0 0);
|
|
--sidebar-accent: oklch(0.25 0.025 225);
|
|
--sidebar-accent-foreground: oklch(0.97 0.006 225);
|
|
--sidebar-border: oklch(0.32 0.018 225);
|
|
--sidebar-ring: oklch(0.55 0.02 225);
|
|
}
|
|
|
|
[data-theme='sepia'] {
|
|
--background: oklch(0.985 0.004 45); /* Blanc légèrement doré */
|
|
--foreground: oklch(0.2 0.015 45); /* Gris-brun foncé */
|
|
--card: oklch(1 0 0); /* Blanc pur */
|
|
--card-foreground: oklch(0.2 0.015 45);
|
|
--primary: oklch(0.45 0.08 45); /* Gris-brun chaud */
|
|
--primary-foreground: oklch(0.99 0 0); /* Blanc */
|
|
--secondary: oklch(0.94 0.008 45);
|
|
--secondary-foreground: oklch(0.2 0.015 45);
|
|
--muted: oklch(0.91 0.01 45);
|
|
--muted-foreground: oklch(0.6 0.012 45);
|
|
--accent: oklch(0.93 0.01 45);
|
|
--accent-foreground: oklch(0.2 0.015 45);
|
|
--destructive: oklch(0.6 0.2 25);
|
|
--border: oklch(0.88 0.012 45);
|
|
--input: oklch(0.97 0.008 45);
|
|
--ring: oklch(0.68 0.01 45);
|
|
--popover: oklch(1 0 0);
|
|
--popover-foreground: oklch(0.2 0.015 45);
|
|
--sidebar: oklch(0.96 0.01 45);
|
|
--sidebar-foreground: oklch(0.2 0.015 45);
|
|
--sidebar-primary: oklch(0.45 0.08 45);
|
|
--sidebar-primary-foreground: oklch(0.99 0 0);
|
|
--sidebar-accent: oklch(0.93 0.01 45);
|
|
--sidebar-accent-foreground: oklch(0.2 0.015 45);
|
|
--sidebar-border: oklch(0.88 0.012 45);
|
|
--sidebar-ring: oklch(0.68 0.01 45);
|
|
}
|
|
|
|
[data-theme='sepia'].dark {
|
|
--background: oklch(0.15 0.008 45); /* Noir légèrement bruni */
|
|
--foreground: oklch(0.97 0.005 45); /* Blanc légèrement bruni */
|
|
--card: oklch(0.19 0.01 45); /* Gris-brun foncé */
|
|
--card-foreground: oklch(0.97 0.005 45);
|
|
--primary: oklch(0.55 0.08 45); /* Gris-brun plus clair */
|
|
--primary-foreground: oklch(0.1 0 0); /* Noir */
|
|
--secondary: oklch(0.25 0.015 45);
|
|
--secondary-foreground: oklch(0.97 0.005 45);
|
|
--muted: oklch(0.23 0.02 45);
|
|
--muted-foreground: oklch(0.55 0.012 45);
|
|
--accent: oklch(0.27 0.018 45);
|
|
--accent-foreground: oklch(0.97 0.005 45);
|
|
--destructive: oklch(0.65 0.2 25);
|
|
--border: oklch(0.3 0.018 45);
|
|
--input: oklch(0.27 0.02 45);
|
|
--ring: oklch(0.58 0.02 45);
|
|
--popover: oklch(0.19 0.01 45);
|
|
--popover-foreground: oklch(0.97 0.005 45);
|
|
--sidebar: oklch(0.12 0.01 45);
|
|
--sidebar-foreground: oklch(0.97 0.005 45);
|
|
--sidebar-primary: oklch(0.55 0.08 45);
|
|
--sidebar-primary-foreground: oklch(0.1 0 0);
|
|
--sidebar-accent: oklch(0.27 0.018 45);
|
|
--sidebar-accent-foreground: oklch(0.97 0.005 45);
|
|
--sidebar-border: oklch(0.3 0.018 45);
|
|
--sidebar-ring: oklch(0.58 0.02 45);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
|
|
/* Set base font size on html element - this affects all rem units */
|
|
html {
|
|
font-size: var(--user-font-size, 16px);
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
/* Body inherits from html, can be adjusted per language */
|
|
}
|
|
|
|
/* Latin languages use default (inherits from html) */
|
|
[lang='en'] body,
|
|
[lang='fr'] body {
|
|
font-size: 1rem;
|
|
/* Uses html font size */
|
|
}
|
|
|
|
/* Persian/Farsi font with larger size for better readability */
|
|
[lang='fa'] body {
|
|
font-family: 'Vazirmatn', var(--font-sans), sans-serif !important;
|
|
/* Base 110% for Persian = 1.1rem */
|
|
font-size: calc(1.1rem * var(--user-font-size-factor, 1));
|
|
}
|
|
|
|
/* Ensure Persian text uses Vazirmatn even in nested elements */
|
|
[lang='fa'] * {
|
|
font-family: 'Vazirmatn', sans-serif !important;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
Toast Notifications - Fix UI Blocking Issue
|
|
============================================ */
|
|
/* Ensure the toaster container doesn't block clicks on the page underneath */
|
|
[data-sonner-toaster] {
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
/* Ensure all children of toaster don't block except the toast itself */
|
|
[data-sonner-toaster]>* {
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
/* But allow interaction with the toast itself (buttons, close, etc) */
|
|
[data-sonner-toast] {
|
|
pointer-events: auto !important;
|
|
}
|
|
|
|
/* Also ensure any overlay or background doesn't block */
|
|
[data-sonner-toaster]::before,
|
|
[data-sonner-toaster]::after {
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
/* ============================================
|
|
Muuri Grid Styles for Drag & Drop
|
|
============================================ */
|
|
.muuri-grid {
|
|
position: relative;
|
|
}
|
|
|
|
/* Note: Width is controlled by Tailwind classes (w-1/2, w-1/3, w-full, etc.) */
|
|
.muuri-item {
|
|
position: absolute;
|
|
/* width: 100%; REMOVED - Don't override Tailwind size classes */
|
|
}
|
|
|
|
.muuri-item.muuri-item-dragging {
|
|
z-index: 3;
|
|
}
|
|
|
|
.muuri-item.muuri-item-releasing {
|
|
z-index: 2;
|
|
}
|
|
|
|
.muuri-item.muuri-item-hidden {
|
|
z-index: 0;
|
|
}
|
|
|
|
/* Ensure note cards work properly with Muuri */
|
|
.muuri-item>* {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Force URLs/links to render LTR even in RTL mode */
|
|
[dir="rtl"] .prose a {
|
|
direction: ltr;
|
|
unicode-bidi: embed;
|
|
display: inline-block;
|
|
} |