c088de53c3
- Added new dependencies including clsx, lucide-react, recharts, and various Radix UI components to improve UI functionality. - Upgraded Tailwind CSS to version 4.0.0 and updated configuration to utilize CSS variables for theming and responsive design. - Introduced global styles and improved accessibility features in the layout and components. - Removed outdated login page and refactored authentication store for better state management. - Enhanced API service with additional authentication methods and improved error handling. These changes aim to modernize the web applications and improve user experience through better design and functionality.
199 lines
4.7 KiB
CSS
199 lines
4.7 KiB
CSS
/**
|
|
* EN: Global Styles with Tailwind CSS 4
|
|
* VI: Styles toàn cục với Tailwind CSS 4
|
|
*
|
|
* Import theme variables first, then Tailwind directives
|
|
* Import các biến theme trước, sau đó là các directives của Tailwind
|
|
*/
|
|
@import "../styles/theme.css";
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/**
|
|
* EN: Theme CSS Variables - Dark Mode (Default)
|
|
* VI: CSS Variables cho Theme - Dark Mode (Mặc định)
|
|
*/
|
|
:root {
|
|
/* Background Colors */
|
|
--bg-primary: #0A0A0A;
|
|
--bg-secondary: #121212;
|
|
--bg-tertiary: #1A1A1A;
|
|
--bg-elevated: #242424;
|
|
|
|
/* Text Colors */
|
|
--text-primary: #FAFAFA;
|
|
--text-secondary: #E0E0E0;
|
|
--text-tertiary: #A0A0A0;
|
|
--text-inverse: #1A1A1A;
|
|
|
|
/* Brand/Accent Colors */
|
|
--accent-primary: #3B82F6;
|
|
--accent-secondary: #8B5CF6;
|
|
--accent-success: #10B981;
|
|
--accent-warning: #F59E0B;
|
|
--accent-error: #EF4444;
|
|
--accent-info: #06B6D4;
|
|
|
|
/* Chat Specific Colors */
|
|
--chat-user-bubble: #2563EB;
|
|
--chat-ai-bubble: #374151;
|
|
--chat-user-text: #FFFFFF;
|
|
--chat-ai-text: #F3F4F6;
|
|
--chat-timestamp: #9CA3AF;
|
|
--chat-divider: #1F2937;
|
|
|
|
/* Border Colors */
|
|
--border-primary: #2A2A2A;
|
|
--border-secondary: #3A3A3A;
|
|
--border-focus: #3B82F6;
|
|
|
|
/* Font Stack */
|
|
--font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
--font-mono: "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
|
|
|
|
/* Type Scale */
|
|
--text-6xl: 3.75rem;
|
|
--text-5xl: 3rem;
|
|
--text-4xl: 2.25rem;
|
|
--text-3xl: 1.875rem;
|
|
--text-2xl: 1.5rem;
|
|
--text-xl: 1.25rem;
|
|
--text-lg: 1.125rem;
|
|
--text-base: 1rem;
|
|
--text-sm: 0.875rem;
|
|
--text-xs: 0.75rem;
|
|
|
|
/* Font Weights */
|
|
--font-light: 300;
|
|
--font-normal: 400;
|
|
--font-medium: 500;
|
|
--font-semibold: 600;
|
|
--font-bold: 700;
|
|
|
|
/* Spacing Scale (Base: 4px) */
|
|
--space-0: 0;
|
|
--space-1: 0.25rem;
|
|
--space-2: 0.5rem;
|
|
--space-3: 0.75rem;
|
|
--space-4: 1rem;
|
|
--space-5: 1.25rem;
|
|
--space-6: 1.5rem;
|
|
--space-8: 2rem;
|
|
--space-10: 2.5rem;
|
|
--space-12: 3rem;
|
|
--space-16: 4rem;
|
|
--space-20: 5rem;
|
|
|
|
/* Container Widths */
|
|
--container-sm: 640px;
|
|
--container-md: 768px;
|
|
--container-lg: 1024px;
|
|
--container-xl: 1280px;
|
|
--container-2xl: 1536px;
|
|
--chat-max-width: 768px;
|
|
--sidebar-width: 280px;
|
|
|
|
/* Border Radius */
|
|
--radius-sm: 0.25rem;
|
|
--radius-md: 0.5rem;
|
|
--radius-lg: 0.75rem;
|
|
--radius-xl: 1rem;
|
|
--radius-2xl: 1.5rem;
|
|
--radius-full: 9999px;
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
|
|
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
|
|
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.6);
|
|
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.7);
|
|
--shadow-glow: 0 0 20px rgba(59, 130, 246, 0.3);
|
|
|
|
/* Animation Timing */
|
|
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
|
|
/* Duration */
|
|
--duration-fast: 150ms;
|
|
--duration-normal: 250ms;
|
|
--duration-slow: 350ms;
|
|
--duration-slower: 500ms;
|
|
}
|
|
|
|
/**
|
|
* EN: Light Mode Theme Variables
|
|
* VI: CSS Variables cho Light Mode
|
|
*/
|
|
:root.light {
|
|
/* Background Colors */
|
|
--bg-primary: #FFFFFF;
|
|
--bg-secondary: #F9FAFB;
|
|
--bg-tertiary: #F3F4F6;
|
|
--bg-elevated: #FFFFFF;
|
|
|
|
/* Text Colors */
|
|
--text-primary: #111827;
|
|
--text-secondary: #4B5563;
|
|
--text-tertiary: #9CA3AF;
|
|
--text-inverse: #FAFAFA;
|
|
|
|
/* Chat Specific Colors */
|
|
--chat-user-bubble: #3B82F6;
|
|
--chat-ai-bubble: #F3F4F6;
|
|
--chat-user-text: #FFFFFF;
|
|
--chat-ai-text: #111827;
|
|
--chat-timestamp: #6B7280;
|
|
--chat-divider: #E5E7EB;
|
|
|
|
/* Border Colors */
|
|
--border-primary: #E5E7EB;
|
|
--border-secondary: #D1D5DB;
|
|
--border-focus: #3B82F6;
|
|
|
|
/* Shadows (lighter for light mode) */
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
|
|
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
|
|
--shadow-glow: 0 0 20px rgba(59, 130, 246, 0.2);
|
|
}
|
|
|
|
/**
|
|
* EN: Base styles
|
|
* VI: Styles cơ bản
|
|
*/
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
font-family: var(--font-sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
font-size: var(--text-base);
|
|
line-height: 1.5;
|
|
transition: background-color var(--duration-normal) var(--ease-in-out),
|
|
color var(--duration-normal) var(--ease-in-out);
|
|
}
|
|
|
|
/**
|
|
* EN: Smooth transitions for theme switching
|
|
* VI: Chuyển đổi mượt mà cho việc chuyển theme
|
|
*/
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
transition: background-color var(--duration-normal) var(--ease-in-out),
|
|
color var(--duration-normal) var(--ease-in-out),
|
|
border-color var(--duration-normal) var(--ease-in-out);
|
|
} |