feat: Cải thiện giao diện trang chủ với hiệu ứng lơ lửng, mesh gradient pastel động và cập nhật phong cách các thành phần UI.
This commit is contained in:
Ho Ngoc Hai
@@ -14,305 +14,305 @@
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* ============================================
|
||||
/* ============================================
|
||||
EN: Color Palette - Dark Mode (Primary Theme)
|
||||
VI: Bảng màu - Dark Mode (Theme chính)
|
||||
============================================ */
|
||||
|
||||
/* Background Colors / Màu nền */
|
||||
--bg-primary: #000000;
|
||||
/* Pure black - Main background */
|
||||
--bg-secondary: #0A0A0A;
|
||||
/* Almost black - Card/Panel background */
|
||||
--bg-tertiary: #141414;
|
||||
/* Very dark grey - Hover states */
|
||||
--bg-elevated: #1A1A1A;
|
||||
/* Elevated surfaces (modals, dropdowns) */
|
||||
/* Background Colors / Màu nền */
|
||||
--bg-primary: #000000;
|
||||
/* Pure black - Main background */
|
||||
--bg-secondary: #0A0A0A;
|
||||
/* Almost black - Card/Panel background */
|
||||
--bg-tertiary: #141414;
|
||||
/* Very dark grey - Hover states */
|
||||
--bg-elevated: #1A1A1A;
|
||||
/* Elevated surfaces (modals, dropdowns) */
|
||||
|
||||
/* Text Colors (WCAG Compliant) / Màu chữ (tuân thủ WCAG) */
|
||||
--text-primary: #FFFFFF;
|
||||
/* Pure white - Primary text */
|
||||
--text-secondary: #B0B0B0;
|
||||
/* Lighter grey - Secondary text (Improved contrast) */
|
||||
--text-tertiary: #808080;
|
||||
/* Mid grey - Tertiary/disabled text (Improved contrast) */
|
||||
--text-muted: #505050;
|
||||
/* Dark grey - Muted elements */
|
||||
--text-inverse: #000000;
|
||||
/* Black - Text on light/white backgrounds */
|
||||
/* Text Colors (WCAG Compliant) / Màu chữ (tuân thủ WCAG) */
|
||||
--text-primary: #FFFFFF;
|
||||
/* Pure white - Primary text */
|
||||
--text-secondary: #B0B0B0;
|
||||
/* Lighter grey - Secondary text (Improved contrast) */
|
||||
--text-tertiary: #808080;
|
||||
/* Mid grey - Tertiary/disabled text (Improved contrast) */
|
||||
--text-muted: #505050;
|
||||
/* Dark grey - Muted elements */
|
||||
--text-inverse: #000000;
|
||||
/* Black - Text on light/white backgrounds */
|
||||
|
||||
/* Brand/Accent Colors / Màu thương hiệu/Accent */
|
||||
--accent-primary: #FFFFFF;
|
||||
/* White - Primary actions (High contrast) */
|
||||
--accent-secondary: #333333;
|
||||
/* Dark grey - Secondary actions */
|
||||
--accent-success: #10B981;
|
||||
/* Green - Success states */
|
||||
--accent-warning: #F59E0B;
|
||||
/* Amber - Warnings */
|
||||
--accent-error: #EF4444;
|
||||
/* Red - Errors */
|
||||
--accent-info: #06B6D4;
|
||||
/* Cyan - Info */
|
||||
/* Brand/Accent Colors / Màu thương hiệu/Accent */
|
||||
--accent-primary: #FFFFFF;
|
||||
/* White - Primary actions (High contrast) */
|
||||
--accent-secondary: #333333;
|
||||
/* Dark grey - Secondary actions */
|
||||
--accent-success: #10B981;
|
||||
/* Green - Success states */
|
||||
--accent-warning: #F59E0B;
|
||||
/* Amber - Warnings */
|
||||
--accent-error: #EF4444;
|
||||
/* Red - Errors */
|
||||
--accent-info: #06B6D4;
|
||||
/* Cyan - Info */
|
||||
|
||||
/* Chat Specific Colors / Màu riêng cho Chat */
|
||||
--chat-user-bubble: #1A1A1A;
|
||||
/* Dark grey - User message */
|
||||
--chat-ai-bubble: transparent;
|
||||
/* Transparent - AI message (Minimal) */
|
||||
--chat-user-text: #FFFFFF;
|
||||
/* White text */
|
||||
--chat-ai-text: #E5E5E5;
|
||||
/* Off-white text */
|
||||
--chat-timestamp: #555555;
|
||||
/* Dark grey timestamp */
|
||||
--chat-divider: #222222;
|
||||
/* Divider between messages */
|
||||
/* Chat Specific Colors / Màu riêng cho Chat */
|
||||
--chat-user-bubble: #1A1A1A;
|
||||
/* Dark grey - User message */
|
||||
--chat-ai-bubble: transparent;
|
||||
/* Transparent - AI message (Minimal) */
|
||||
--chat-user-text: #FFFFFF;
|
||||
/* White text */
|
||||
--chat-ai-text: #E5E5E5;
|
||||
/* Off-white text */
|
||||
--chat-timestamp: #555555;
|
||||
/* Dark grey timestamp */
|
||||
--chat-divider: #222222;
|
||||
/* Divider between messages */
|
||||
|
||||
/* Border Colors / Màu viền */
|
||||
--border-primary: #222222;
|
||||
/* Subtle borders */
|
||||
--border-secondary: #333333;
|
||||
/* Hover borders */
|
||||
--border-focus: #FFFFFF;
|
||||
/* Focus state - White */
|
||||
/* Border Colors / Màu viền */
|
||||
--border-primary: #222222;
|
||||
/* Subtle borders */
|
||||
--border-secondary: #333333;
|
||||
/* Hover borders */
|
||||
--border-focus: #FFFFFF;
|
||||
/* Focus state - White */
|
||||
|
||||
/* ============================================
|
||||
/* ============================================
|
||||
EN: Brand Colors (Primary Identity)
|
||||
VI: Màu thương hiệu (Nhận diện chính)
|
||||
============================================ */
|
||||
|
||||
/* Primary Brand Color - Main brand identity (Blue - Tech & Trust) */
|
||||
--brand-primary: #3B82F6;
|
||||
--brand-primary-light: #60A5FA;
|
||||
--brand-primary-dark: #2563EB;
|
||||
--brand-primary-contrast: #FFFFFF;
|
||||
/* Primary Brand Color - Main brand identity (Blue - Tech & Trust) */
|
||||
--brand-primary: #3B82F6;
|
||||
--brand-primary-light: #60A5FA;
|
||||
--brand-primary-dark: #2563EB;
|
||||
--brand-primary-contrast: #FFFFFF;
|
||||
|
||||
/* Secondary Brand Color - Supporting color (Purple - Innovation) */
|
||||
--brand-secondary: #8B5CF6;
|
||||
--brand-secondary-light: #A78BFA;
|
||||
--brand-secondary-dark: #7C3AED;
|
||||
/* Secondary Brand Color - Supporting color (Purple - Innovation) */
|
||||
--brand-secondary: #8B5CF6;
|
||||
--brand-secondary-light: #A78BFA;
|
||||
--brand-secondary-dark: #7C3AED;
|
||||
|
||||
/* Accent Color - Call-to-action (Cyan - Energy) */
|
||||
--brand-accent: #06B6D4;
|
||||
--brand-accent-light: #22D3EE;
|
||||
--brand-accent-dark: #0891B2;
|
||||
/* Accent Color - Call-to-action (Cyan - Energy) */
|
||||
--brand-accent: #06B6D4;
|
||||
--brand-accent-light: #22D3EE;
|
||||
--brand-accent-dark: #0891B2;
|
||||
|
||||
/* Brand Gradients - For backgrounds and special elements */
|
||||
--brand-gradient-primary: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
|
||||
--brand-gradient-accent: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-primary) 100%);
|
||||
--brand-gradient-vertical: linear-gradient(180deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
|
||||
/* Brand Gradients - For backgrounds and special elements */
|
||||
--brand-gradient-primary: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
|
||||
--brand-gradient-accent: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-primary) 100%);
|
||||
--brand-gradient-vertical: linear-gradient(180deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
|
||||
|
||||
/* ============================================
|
||||
/* ============================================
|
||||
EN: Glassmorphism Effects
|
||||
VI: Hiệu ứng Glassmorphism
|
||||
============================================ */
|
||||
|
||||
--glass-bg: rgba(255, 255, 255, 0.05);
|
||||
--glass-bg-hover: rgba(255, 255, 255, 0.08);
|
||||
--glass-border: rgba(255, 255, 255, 0.1);
|
||||
--glass-blur: 10px;
|
||||
--glass-bg: rgba(255, 255, 255, 0.05);
|
||||
--glass-bg-hover: rgba(255, 255, 255, 0.1);
|
||||
--glass-border: rgba(255, 255, 255, 0.08);
|
||||
--glass-blur: 24px;
|
||||
|
||||
/* ============================================
|
||||
/* ============================================
|
||||
EN: Extended Shadows & Effects
|
||||
VI: Shadows & Effects mở rộng
|
||||
============================================ */
|
||||
|
||||
--shadow-brand: 0 10px 40px rgba(59, 130, 246, 0.2);
|
||||
--shadow-brand-lg: 0 20px 60px rgba(59, 130, 246, 0.3);
|
||||
--shadow-colored: 0 8px 30px rgba(59, 130, 246, 0.25);
|
||||
--shadow-brand: 0 20px 50px rgba(59, 130, 246, 0.15);
|
||||
--shadow-brand-lg: 0 30px 70px rgba(59, 130, 246, 0.25);
|
||||
--shadow-colored: 0 10px 40px rgba(59, 130, 246, 0.3);
|
||||
|
||||
/* ============================================
|
||||
/* ============================================
|
||||
EN: Light Mode Colors (Secondary Theme)
|
||||
VI: Màu sắc cho Light Mode (Theme phụ)
|
||||
============================================ */
|
||||
--bg-primary-light: #F9F9F9;
|
||||
--bg-secondary-light: #FFFFFF;
|
||||
--bg-tertiary-light: #F0F0F0;
|
||||
--text-primary-light: #000000;
|
||||
--text-secondary-light: #666666;
|
||||
--border-primary-light: #E5E5E5;
|
||||
--bg-primary-light: #FFFFFF;
|
||||
--bg-secondary-light: #F8FAFC;
|
||||
--bg-tertiary-light: #F1F5F9;
|
||||
--text-primary-light: #0F172A;
|
||||
--text-secondary-light: #475569;
|
||||
--border-primary-light: #E2E8F0;
|
||||
|
||||
/* ============================================
|
||||
/* ============================================
|
||||
EN: Typography
|
||||
VI: Kiểu chữ
|
||||
============================================ */
|
||||
|
||||
/* Font Stack / Bộ font */
|
||||
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--font-mono: "JetBrains Mono", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
|
||||
/* Font Stack / Bộ font */
|
||||
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--font-mono: "JetBrains Mono", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
|
||||
|
||||
/* Display Font - For hero titles (48px+) */
|
||||
--font-display: "Inter Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
/* Display Font - For hero titles (48px+) */
|
||||
--font-display: "Inter Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
|
||||
/* Heading Font - For section headings (24-36px) */
|
||||
--font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
/* Heading Font - For section headings (24-36px) */
|
||||
--font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
|
||||
/* Type Scale / Kích thước chữ */
|
||||
--text-6xl: 3.75rem;
|
||||
/* 60px - Hero titles */
|
||||
--text-5xl: 3rem;
|
||||
/* 48px - Page titles */
|
||||
--text-4xl: 2.25rem;
|
||||
/* 36px - Section headers */
|
||||
--text-3xl: 1.875rem;
|
||||
/* 30px - Card headers */
|
||||
--text-2xl: 1.5rem;
|
||||
/* 24px - Large body */
|
||||
--text-xl: 1.25rem;
|
||||
/* 20px - Emphasized text */
|
||||
--text-lg: 1.125rem;
|
||||
/* 18px - Large body */
|
||||
--text-base: 1rem;
|
||||
/* 16px - Default body */
|
||||
--text-sm: 0.875rem;
|
||||
/* 14px - Small text */
|
||||
--text-xs: 0.75rem;
|
||||
/* 12px - Captions */
|
||||
/* Type Scale / Kích thước chữ */
|
||||
--text-6xl: 3.75rem;
|
||||
/* 60px - Hero titles */
|
||||
--text-5xl: 3rem;
|
||||
/* 48px - Page titles */
|
||||
--text-4xl: 2.25rem;
|
||||
/* 36px - Section headers */
|
||||
--text-3xl: 1.875rem;
|
||||
/* 30px - Card headers */
|
||||
--text-2xl: 1.5rem;
|
||||
/* 24px - Large body */
|
||||
--text-xl: 1.25rem;
|
||||
/* 20px - Emphasized text */
|
||||
--text-lg: 1.125rem;
|
||||
/* 18px - Large body */
|
||||
--text-base: 1rem;
|
||||
/* 16px - Default body */
|
||||
--text-sm: 0.875rem;
|
||||
/* 14px - Small text */
|
||||
--text-xs: 0.75rem;
|
||||
/* 12px - Captions */
|
||||
|
||||
/* Line Heights / Chiều cao dòng */
|
||||
--leading-none: 1;
|
||||
--leading-tight: 1.1;
|
||||
--leading-snug: 1.2;
|
||||
--leading-normal: 1.5;
|
||||
--leading-relaxed: 1.625;
|
||||
--leading-loose: 2;
|
||||
/* Line Heights / Chiều cao dòng */
|
||||
--leading-none: 1;
|
||||
--leading-tight: 1.1;
|
||||
--leading-snug: 1.2;
|
||||
--leading-normal: 1.5;
|
||||
--leading-relaxed: 1.625;
|
||||
--leading-loose: 2;
|
||||
|
||||
/* Font Weights / Độ đậm chữ */
|
||||
--font-light: 300;
|
||||
/* Light text */
|
||||
--font-normal: 400;
|
||||
/* Body text */
|
||||
--font-medium: 500;
|
||||
/* Emphasized */
|
||||
--font-semibold: 600;
|
||||
/* Headings */
|
||||
--font-bold: 700;
|
||||
/* Strong emphasis */
|
||||
/* Font Weights / Độ đậm chữ */
|
||||
--font-light: 300;
|
||||
/* Light text */
|
||||
--font-normal: 400;
|
||||
/* Body text */
|
||||
--font-medium: 500;
|
||||
/* Emphasized */
|
||||
--font-semibold: 600;
|
||||
/* Headings */
|
||||
--font-bold: 700;
|
||||
/* Strong emphasis */
|
||||
|
||||
/* ============================================
|
||||
/* ============================================
|
||||
EN: Spacing & Layout
|
||||
VI: Khoảng cách & Bố cục
|
||||
============================================ */
|
||||
|
||||
/* Base Unit: 4px (0.25rem) / Đơn vị cơ sở: 4px (0.25rem) */
|
||||
--space-0: 0;
|
||||
--space-1: 0.25rem;
|
||||
/* 4px */
|
||||
--space-2: 0.5rem;
|
||||
/* 8px */
|
||||
--space-3: 0.75rem;
|
||||
/* 12px */
|
||||
--space-4: 1rem;
|
||||
/* 16px */
|
||||
--space-5: 1.25rem;
|
||||
/* 20px */
|
||||
--space-6: 1.5rem;
|
||||
/* 24px */
|
||||
--space-8: 2rem;
|
||||
/* 32px */
|
||||
--space-10: 2.5rem;
|
||||
/* 40px */
|
||||
--space-12: 3rem;
|
||||
/* 48px */
|
||||
--space-16: 4rem;
|
||||
/* 64px */
|
||||
--space-20: 5rem;
|
||||
/* 80px */
|
||||
/* Base Unit: 4px (0.25rem) / Đơn vị cơ sở: 4px (0.25rem) */
|
||||
--space-0: 0;
|
||||
--space-1: 0.25rem;
|
||||
/* 4px */
|
||||
--space-2: 0.5rem;
|
||||
/* 8px */
|
||||
--space-3: 0.75rem;
|
||||
/* 12px */
|
||||
--space-4: 1rem;
|
||||
/* 16px */
|
||||
--space-5: 1.25rem;
|
||||
/* 20px */
|
||||
--space-6: 1.5rem;
|
||||
/* 24px */
|
||||
--space-8: 2rem;
|
||||
/* 32px */
|
||||
--space-10: 2.5rem;
|
||||
/* 40px */
|
||||
--space-12: 3rem;
|
||||
/* 48px */
|
||||
--space-16: 4rem;
|
||||
/* 64px */
|
||||
--space-20: 5rem;
|
||||
/* 80px */
|
||||
|
||||
/* Container Widths / Chiều rộng container */
|
||||
--container-sm: 640px;
|
||||
/* Small devices */
|
||||
--container-md: 768px;
|
||||
/* Medium devices */
|
||||
--container-lg: 1024px;
|
||||
/* Large devices */
|
||||
--container-xl: 1280px;
|
||||
/* Extra large */
|
||||
--container-2xl: 1536px;
|
||||
/* 2X large */
|
||||
--chat-max-width: 800px;
|
||||
/* Max width for chat messages */
|
||||
--sidebar-width: 280px;
|
||||
/* Conversation history sidebar */
|
||||
/* Container Widths / Chiều rộng container */
|
||||
--container-sm: 640px;
|
||||
/* Small devices */
|
||||
--container-md: 768px;
|
||||
/* Medium devices */
|
||||
--container-lg: 1024px;
|
||||
/* Large devices */
|
||||
--container-xl: 1280px;
|
||||
/* Extra large */
|
||||
--container-2xl: 1536px;
|
||||
/* 2X large */
|
||||
--chat-max-width: 800px;
|
||||
/* Max width for chat messages */
|
||||
--sidebar-width: 280px;
|
||||
/* Conversation history sidebar */
|
||||
|
||||
/* Border Radius / Bo góc */
|
||||
--radius-sm: 2px;
|
||||
/* Small elements - sharp */
|
||||
--radius-md: 4px;
|
||||
/* Buttons, inputs - sharp */
|
||||
--radius-lg: 8px;
|
||||
/* Cards - minimal roundness */
|
||||
--radius-xl: 12px;
|
||||
/* Large cards */
|
||||
--radius-2xl: 16px;
|
||||
/* Modals */
|
||||
--radius-full: 9999px;
|
||||
/* Full round - Avatars, pills */
|
||||
/* Border Radius / Bo góc */
|
||||
--radius-sm: 2px;
|
||||
/* Small elements - sharp */
|
||||
--radius-md: 4px;
|
||||
/* Buttons, inputs - sharp */
|
||||
--radius-lg: 8px;
|
||||
/* Cards - minimal roundness */
|
||||
--radius-xl: 12px;
|
||||
/* Large cards */
|
||||
--radius-2xl: 16px;
|
||||
/* Modals */
|
||||
--radius-full: 9999px;
|
||||
/* Full round - Avatars, pills */
|
||||
|
||||
/* ============================================
|
||||
/* ============================================
|
||||
EN: Shadows (Dark Mode Optimized)
|
||||
VI: Đổ bóng (Tối ưu cho Dark Mode)
|
||||
============================================ */
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.8);
|
||||
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.8);
|
||||
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.9);
|
||||
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.95);
|
||||
--shadow-glow: 0 0 20px rgba(255, 255, 255, 0.1);
|
||||
/* White glow for focus */
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.8);
|
||||
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.8);
|
||||
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.9);
|
||||
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.95);
|
||||
--shadow-glow: 0 0 20px rgba(255, 255, 255, 0.1);
|
||||
/* White glow for focus */
|
||||
|
||||
/* ============================================
|
||||
/* ============================================
|
||||
EN: Grid System & Breakpoints
|
||||
VI: Hệ thống lưới & Điểm ngắt
|
||||
============================================ */
|
||||
--screen-sm: 640px;
|
||||
/* Mobile landscape */
|
||||
--screen-md: 768px;
|
||||
/* Tablet */
|
||||
--screen-lg: 1024px;
|
||||
/* Desktop */
|
||||
--screen-xl: 1280px;
|
||||
/* Large desktop */
|
||||
--screen-2xl: 1536px;
|
||||
/* Extra large desktop */
|
||||
--screen-sm: 640px;
|
||||
/* Mobile landscape */
|
||||
--screen-md: 768px;
|
||||
/* Tablet */
|
||||
--screen-lg: 1024px;
|
||||
/* Desktop */
|
||||
--screen-xl: 1280px;
|
||||
/* Large desktop */
|
||||
--screen-2xl: 1536px;
|
||||
/* Extra large desktop */
|
||||
|
||||
/* ============================================
|
||||
/* ============================================
|
||||
EN: Animation & Transitions
|
||||
VI: Animation & Chuyển tiếp
|
||||
============================================ */
|
||||
|
||||
/* Timing Functions / Hàm thời gian */
|
||||
--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);
|
||||
/* Timing Functions / Hàm thời gian */
|
||||
--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 / Thời lượng */
|
||||
--duration-fast: 150ms;
|
||||
/* Hover effects */
|
||||
--duration-normal: 250ms;
|
||||
/* Default transitions */
|
||||
--duration-slow: 350ms;
|
||||
/* Complex animations */
|
||||
--duration-slower: 500ms;
|
||||
/* Page transitions */
|
||||
/* Duration / Thời lượng */
|
||||
--duration-fast: 150ms;
|
||||
/* Hover effects */
|
||||
--duration-normal: 250ms;
|
||||
/* Default transitions */
|
||||
--duration-slow: 350ms;
|
||||
/* Complex animations */
|
||||
--duration-slower: 500ms;
|
||||
/* Page transitions */
|
||||
|
||||
/* ============================================
|
||||
/* ============================================
|
||||
EN: Advanced Motion Tokens
|
||||
VI: Token chuyển động nâng cao
|
||||
============================================ */
|
||||
|
||||
/* Motion Ease Functions - For micro-interactions */
|
||||
--motion-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
--motion-ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);
|
||||
/* Motion Ease Functions - For micro-interactions */
|
||||
--motion-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
--motion-ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);
|
||||
|
||||
/* Hover Scale - For interactive elements */
|
||||
--hover-scale-sm: 1.02;
|
||||
--hover-scale-md: 1.05;
|
||||
--hover-scale-lg: 1.1;
|
||||
/* Hover Scale - For interactive elements */
|
||||
--hover-scale-sm: 1.02;
|
||||
--hover-scale-md: 1.05;
|
||||
--hover-scale-lg: 1.1;
|
||||
|
||||
/* Active Scale - For pressed states */
|
||||
--active-scale: 0.98;
|
||||
/* Active Scale - For pressed states */
|
||||
--active-scale: 0.98;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -320,14 +320,14 @@
|
||||
VI: Ghi đè theme cho Light Mode
|
||||
============================================ */
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--bg-primary: var(--bg-primary-light);
|
||||
--bg-secondary: var(--bg-secondary-light);
|
||||
--bg-tertiary: var(--bg-tertiary-light);
|
||||
--text-primary: var(--text-primary-light);
|
||||
--text-secondary: var(--text-secondary-light);
|
||||
--border-primary: var(--border-primary-light);
|
||||
}
|
||||
:root {
|
||||
--bg-primary: var(--bg-primary-light);
|
||||
--bg-secondary: var(--bg-secondary-light);
|
||||
--bg-tertiary: var(--bg-tertiary-light);
|
||||
--text-primary: var(--text-primary-light);
|
||||
--text-secondary: var(--text-secondary-light);
|
||||
--border-primary: var(--border-primary-light);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -336,16 +336,16 @@
|
||||
============================================ */
|
||||
[data-theme="dark"],
|
||||
.dark {
|
||||
--bg-primary: #000000;
|
||||
--bg-secondary: #0A0A0A;
|
||||
--bg-tertiary: #141414;
|
||||
--bg-elevated: #1A1A1A;
|
||||
--text-primary: #FFFFFF;
|
||||
--text-secondary: #B0B0B0;
|
||||
--text-tertiary: #808080;
|
||||
--text-muted: #505050;
|
||||
--border-primary: #222222;
|
||||
--border-secondary: #333333;
|
||||
--bg-primary: #000000;
|
||||
--bg-secondary: #0A0A0A;
|
||||
--bg-tertiary: #141414;
|
||||
--bg-elevated: #1A1A1A;
|
||||
--text-primary: #FFFFFF;
|
||||
--text-secondary: #B0B0B0;
|
||||
--text-tertiary: #808080;
|
||||
--text-muted: #505050;
|
||||
--border-primary: #222222;
|
||||
--border-secondary: #333333;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -354,10 +354,10 @@
|
||||
============================================ */
|
||||
[data-theme="light"],
|
||||
.light {
|
||||
--bg-primary: var(--bg-primary-light);
|
||||
--bg-secondary: var(--bg-secondary-light);
|
||||
--bg-tertiary: var(--bg-tertiary-light);
|
||||
--text-primary: var(--text-primary-light);
|
||||
--text-secondary: var(--text-secondary-light);
|
||||
--border-primary: var(--border-primary-light);
|
||||
--bg-primary: var(--bg-primary-light);
|
||||
--bg-secondary: var(--bg-secondary-light);
|
||||
--bg-tertiary: var(--bg-tertiary-light);
|
||||
--text-primary: var(--text-primary-light);
|
||||
--text-secondary: var(--text-secondary-light);
|
||||
--border-primary: var(--border-primary-light);
|
||||
}
|
||||
Reference in New Issue
Block a user