style: Điều chỉnh hiệu ứng glassmorphism và animation để phù hợp với phong cách X.ai minimalist, loại bỏ các animation phức tạp và giảm độ mờ của hiệu ứng glass.
This commit is contained in:
Ho Ngoc Hai
@@ -113,58 +113,32 @@
|
||||
}
|
||||
|
||||
/**
|
||||
* EN: Floating Animation
|
||||
* VI: Animation lơ lửng
|
||||
* EN: Floating Animation - X.ai Minimalist (Simplified)
|
||||
* VI: Animation lơ lửng - X.ai Minimalist (Đơn giản hóa)
|
||||
*/
|
||||
@keyframes float {
|
||||
0% {
|
||||
transform: translateY(0px);
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* EN: Mesh Gradient Animation
|
||||
* VI: Animation Mesh Gradient
|
||||
*/
|
||||
@keyframes mesh-move {
|
||||
0% {
|
||||
transform: translate(0, 0) scale(1) rotate(0deg);
|
||||
}
|
||||
/* ============================================
|
||||
EN: Removed - Mesh Gradient Animation (X.ai Minimalist)
|
||||
VI: Đã xóa - Mesh Gradient Animation (X.ai Minimalist)
|
||||
============================================ */
|
||||
/* Removed for cleaner, minimalist aesthetic */
|
||||
|
||||
33% {
|
||||
transform: translate(10%, 15%) scale(1.2) rotate(120deg);
|
||||
}
|
||||
|
||||
66% {
|
||||
transform: translate(-10%, 10%) scale(0.8) rotate(240deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(0, 0) scale(1) rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* EN: Shimmer animation
|
||||
* VI: Animation shimmer
|
||||
*/
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
/* ============================================
|
||||
EN: Removed - Shimmer Animation (X.ai Minimalist)
|
||||
VI: Đã xóa - Shimmer Animation (X.ai Minimalist)
|
||||
============================================ */
|
||||
/* Removed for cleaner, minimalist aesthetic */
|
||||
|
||||
/**
|
||||
* EN: Utilities Layer
|
||||
@@ -175,64 +149,17 @@
|
||||
animation: fadeIn 1s var(--ease-spring) forwards;
|
||||
}
|
||||
|
||||
/* EN: Simplified float animation - X.ai style */
|
||||
.animate-float {
|
||||
animation: float 6s var(--ease-in-out) infinite;
|
||||
animation: float 4s var(--ease-smooth) infinite;
|
||||
}
|
||||
|
||||
.mesh-gradient {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -20;
|
||||
background: var(--bg-primary);
|
||||
overflow: hidden;
|
||||
transition: background-color var(--duration-slow) var(--ease-in-out);
|
||||
}
|
||||
|
||||
.mesh-spot {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(100px);
|
||||
opacity: 0.15;
|
||||
mix-blend-mode: soft-light;
|
||||
animation: mesh-move 30s infinite linear;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.text-glow {
|
||||
text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.text-brand-glow {
|
||||
text-shadow: 0 0 40px rgba(59, 130, 246, 0.6);
|
||||
}
|
||||
|
||||
/**
|
||||
* NOTE: .glass-card is now defined in glass.css
|
||||
* Legacy definition kept here as comment for reference
|
||||
*/
|
||||
/*
|
||||
.glass-card {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid var(--glass-border);
|
||||
transition: all var(--duration-normal) var(--ease-in-out);
|
||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
background: var(--glass-bg-hover);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
box-shadow: var(--shadow-brand-lg);
|
||||
}
|
||||
*/
|
||||
|
||||
.animate-shimmer {
|
||||
animation: shimmer 2s infinite;
|
||||
}
|
||||
/* ============================================
|
||||
EN: Removed - Cosmic Effects (X.ai Minimalist)
|
||||
VI: Đã xóa - Cosmic Effects (X.ai Minimalist)
|
||||
============================================ */
|
||||
/* Removed .mesh-gradient, .mesh-spot, .text-brand-glow, .animate-shimmer */
|
||||
/* Use simple backgrounds and minimal effects instead */
|
||||
|
||||
.container-responsive {
|
||||
width: 100%;
|
||||
|
||||
@@ -21,7 +21,8 @@
|
||||
.glass-panel {
|
||||
background: var(--glass-bg-default);
|
||||
backdrop-filter: blur(var(--glass-blur-md));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur-md)); /* Safari support */
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur-md));
|
||||
/* Safari support */
|
||||
border: 1px solid var(--glass-border-default);
|
||||
box-shadow: var(--glass-shadow-md), var(--glass-shadow-inset);
|
||||
}
|
||||
@@ -29,7 +30,7 @@
|
||||
.glass-panel:hover {
|
||||
background: var(--glass-bg-hover);
|
||||
border-color: var(--glass-border-hover);
|
||||
transition: all var(--motion-duration-quick) var(--motion-ease-smooth);
|
||||
transition: all var(--duration-fast) var(--ease-snap);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -38,22 +39,23 @@
|
||||
============================================ */
|
||||
|
||||
/**
|
||||
* Glass card with rounded corners and hover lift effect
|
||||
* Perfect for interactive elements like product cards, feature cards
|
||||
* Glass card with rounded corners and minimal hover effect
|
||||
* X.ai minimalist style - subtle lift only
|
||||
*/
|
||||
.glass-card {
|
||||
background: var(--glass-bg-default);
|
||||
backdrop-filter: blur(var(--glass-blur-md));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur-md));
|
||||
backdrop-filter: blur(var(--glass-blur-sm));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur-sm));
|
||||
border: 1px solid var(--glass-border-default);
|
||||
box-shadow: var(--glass-shadow-md), var(--glass-shadow-inset);
|
||||
border-radius: var(--radius-xl);
|
||||
transition: all var(--motion-duration-normal) var(--motion-ease-smooth);
|
||||
box-shadow: var(--shadow);
|
||||
border-radius: var(--radius-lg);
|
||||
transition: all var(--duration-fast) var(--ease-snap);
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--glass-shadow-lg), var(--glass-shadow-inset);
|
||||
transform: translateY(-1px);
|
||||
border-color: var(--glass-border-hover);
|
||||
/* No shadow change - cleaner look */
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -62,30 +64,31 @@
|
||||
============================================ */
|
||||
|
||||
/**
|
||||
* Glass button with subtle background
|
||||
* Use for secondary actions and interactive elements
|
||||
* Glass button with minimal background - X.ai style
|
||||
* Snappy, fast interactions
|
||||
*/
|
||||
.glass-button {
|
||||
background: var(--glass-bg-default);
|
||||
backdrop-filter: blur(var(--glass-blur-md));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur-md));
|
||||
backdrop-filter: blur(var(--glass-blur-sm));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur-sm));
|
||||
border: 1px solid var(--glass-border-default);
|
||||
box-shadow: var(--glass-shadow-md), var(--glass-shadow-inset);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-4) var(--space-4);
|
||||
transition: all var(--motion-duration-quick) var(--motion-ease-glide);
|
||||
box-shadow: var(--shadow);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
transition: all var(--duration-fast) var(--ease-snap);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.glass-button:hover:not(:disabled) {
|
||||
background: var(--glass-bg-hover);
|
||||
border-color: var(--glass-border-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.glass-button:active:not(:disabled) {
|
||||
background: var(--glass-bg-active);
|
||||
transform: scale(0.98);
|
||||
transform: scale(var(--active-scale));
|
||||
}
|
||||
|
||||
.glass-button:disabled {
|
||||
@@ -99,15 +102,15 @@
|
||||
============================================ */
|
||||
|
||||
/**
|
||||
* Glass input field with subtle background
|
||||
* Minimal blur for better text readability
|
||||
* Glass input field - X.ai minimalist
|
||||
* Ultra-minimal blur for maximum text clarity
|
||||
*/
|
||||
.glass-input {
|
||||
background: var(--glass-bg-subtle);
|
||||
backdrop-filter: blur(var(--glass-blur-sm));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur-sm));
|
||||
border: 1px solid var(--glass-border-subtle);
|
||||
transition: all var(--motion-duration-quick) var(--motion-ease-smooth);
|
||||
transition: all var(--duration-fast) var(--ease-snap);
|
||||
}
|
||||
|
||||
.glass-input:hover {
|
||||
@@ -117,7 +120,7 @@
|
||||
.glass-input:focus {
|
||||
background: var(--glass-bg-default);
|
||||
border-color: var(--glass-border-focus);
|
||||
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
|
||||
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.03);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@@ -131,15 +134,15 @@
|
||||
============================================ */
|
||||
|
||||
/**
|
||||
* Glass modal with strong blur and dark background
|
||||
* Suitable for modals, dialogs, overlays
|
||||
* Glass modal - X.ai minimal style
|
||||
* Reduced blur for cleaner appearance
|
||||
*/
|
||||
.glass-modal {
|
||||
background: rgba(10, 10, 10, 0.95);
|
||||
backdrop-filter: blur(var(--glass-blur-xl));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur-xl));
|
||||
backdrop-filter: blur(var(--glass-blur-lg));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur-lg));
|
||||
border: 1px solid var(--glass-border-default);
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), var(--glass-shadow-inset);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -148,13 +151,13 @@
|
||||
============================================ */
|
||||
|
||||
/**
|
||||
* Glass navigation bar with high blur and saturation
|
||||
* Perfect for sticky headers, navigation bars
|
||||
* Glass navigation bar - X.ai clean style
|
||||
* Minimal blur, clean borders
|
||||
*/
|
||||
.glass-nav {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(var(--glass-blur-lg)) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(180%);
|
||||
backdrop-filter: blur(var(--glass-blur-md)) saturate(150%);
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(150%);
|
||||
border-bottom: 1px solid var(--glass-border-subtle);
|
||||
}
|
||||
|
||||
@@ -191,7 +194,7 @@
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: var(--text-sm);
|
||||
transition: all var(--motion-duration-quick) var(--motion-ease-smooth);
|
||||
transition: all var(--duration-fast) var(--ease-snap);
|
||||
}
|
||||
|
||||
.glass-badge:hover {
|
||||
@@ -205,13 +208,13 @@
|
||||
============================================ */
|
||||
|
||||
/**
|
||||
* Full-screen glass overlay
|
||||
* Use as backdrop for modals, dialogs
|
||||
* Full-screen glass overlay - X.ai minimal
|
||||
* Reduced blur for performance
|
||||
*/
|
||||
.glass-overlay {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
backdrop-filter: blur(var(--glass-blur-xl));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur-xl));
|
||||
backdrop-filter: blur(var(--glass-blur-lg));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur-lg));
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -220,15 +223,14 @@
|
||||
============================================ */
|
||||
|
||||
/**
|
||||
* Glass dropdown menu
|
||||
* Suitable for select menus, context menus
|
||||
* Glass dropdown menu - X.ai minimal
|
||||
*/
|
||||
.glass-dropdown {
|
||||
background: var(--glass-bg-medium);
|
||||
backdrop-filter: blur(var(--glass-blur-lg));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur-lg));
|
||||
backdrop-filter: blur(var(--glass-blur-md));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur-md));
|
||||
border: 1px solid var(--glass-border-default);
|
||||
box-shadow: var(--glass-shadow-lg), var(--glass-shadow-inset);
|
||||
box-shadow: var(--shadow-lg);
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
@@ -266,7 +268,7 @@
|
||||
}
|
||||
|
||||
/**
|
||||
* No shadow variant
|
||||
* No shadow variant - prefer this for minimalism
|
||||
*/
|
||||
.glass-no-shadow {
|
||||
box-shadow: none;
|
||||
@@ -281,6 +283,7 @@
|
||||
* Reduce glass effects on mobile for performance
|
||||
*/
|
||||
@media (max-width: 768px) {
|
||||
|
||||
.glass-card,
|
||||
.glass-modal,
|
||||
.glass-nav {
|
||||
@@ -295,13 +298,14 @@
|
||||
============================================ */
|
||||
|
||||
/**
|
||||
* Glass appear animation
|
||||
* Glass appear animation - X.ai snappy
|
||||
*/
|
||||
@keyframes glass-appear {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
@@ -309,17 +313,18 @@
|
||||
}
|
||||
|
||||
.glass-appear {
|
||||
animation: glass-appear var(--motion-duration-normal) var(--motion-ease-smooth);
|
||||
animation: glass-appear var(--duration-fast) var(--ease-snap);
|
||||
}
|
||||
|
||||
/**
|
||||
* Glass slide in from top
|
||||
* Glass slide in from top - X.ai snappy
|
||||
*/
|
||||
@keyframes glass-slide-down {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
@@ -327,5 +332,5 @@
|
||||
}
|
||||
|
||||
.glass-slide-down {
|
||||
animation: glass-slide-down var(--motion-duration-quick) var(--motion-ease-smooth);
|
||||
}
|
||||
animation: glass-slide-down var(--duration-fast) var(--ease-snap);
|
||||
}
|
||||
@@ -14,383 +14,396 @@
|
||||
*/
|
||||
|
||||
: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: Minimal Brand Colors (x.ai Inspired)
|
||||
VI: Màu thương hiệu tối giản (x.ai Inspired)
|
||||
============================================ */
|
||||
|
||||
/* Primary Brand Color - Clean white accent */
|
||||
--brand-primary: #FFFFFF;
|
||||
--brand-primary-light: #F8F8F8;
|
||||
--brand-primary-dark: #E5E5E5;
|
||||
--brand-primary-contrast: #000000;
|
||||
/* Primary Brand Color - Clean white accent */
|
||||
--brand-primary: #FFFFFF;
|
||||
--brand-primary-light: #F8F8F8;
|
||||
--brand-primary-dark: #E5E5E5;
|
||||
--brand-primary-contrast: #000000;
|
||||
|
||||
/* Secondary Brand Color - Subtle gray */
|
||||
--brand-secondary: #888888;
|
||||
--brand-secondary-light: #AAAAAA;
|
||||
--brand-secondary-dark: #666666;
|
||||
/* Secondary Brand Color - Subtle gray */
|
||||
--brand-secondary: #888888;
|
||||
--brand-secondary-light: #AAAAAA;
|
||||
--brand-secondary-dark: #666666;
|
||||
|
||||
/* Accent Color - Minimal gray accent */
|
||||
--brand-accent: #CCCCCC;
|
||||
--brand-accent-light: #DDDDDD;
|
||||
--brand-accent-dark: #BBBBBB;
|
||||
/* Accent Color - Minimal gray accent */
|
||||
--brand-accent: #CCCCCC;
|
||||
--brand-accent-light: #DDDDDD;
|
||||
--brand-accent-dark: #BBBBBB;
|
||||
|
||||
/* Brand Gradients - Minimal monochromatic */
|
||||
--brand-gradient-primary: linear-gradient(135deg, #FFFFFF 0%, #CCCCCC 100%);
|
||||
--brand-gradient-accent: linear-gradient(135deg, #FFFFFF 0%, #AAAAAA 100%);
|
||||
--brand-gradient-vertical: linear-gradient(180deg, #FFFFFF 0%, #CCCCCC 100%);
|
||||
/* Brand Gradients - REMOVED for X.ai Minimalism */
|
||||
/* Use solid colors instead for cleaner design */
|
||||
|
||||
/* ============================================
|
||||
/* ============================================
|
||||
EN: Minimal Effects (x.ai Clean Style)
|
||||
VI: Hiệu ứng tối giản (Phong cách x.ai sạch sẽ)
|
||||
============================================ */
|
||||
|
||||
/* Glass Backgrounds - Ultra minimal for clean look */
|
||||
--glass-bg-subtle: rgba(255, 255, 255, 0.01);
|
||||
/* Ultra subtle - For minimal effect */
|
||||
--glass-bg-default: rgba(255, 255, 255, 0.02);
|
||||
/* Default minimal background */
|
||||
--glass-bg-medium: rgba(255, 255, 255, 0.03);
|
||||
/* Medium minimal effect */
|
||||
--glass-bg-hover: rgba(255, 255, 255, 0.04);
|
||||
/* Hover state */
|
||||
--glass-bg-active: rgba(255, 255, 255, 0.05);
|
||||
/* Active/pressed state */
|
||||
/* Glass Backgrounds - Ultra minimal for clean look */
|
||||
--glass-bg-subtle: rgba(255, 255, 255, 0.01);
|
||||
/* Ultra subtle - For minimal effect */
|
||||
--glass-bg-default: rgba(255, 255, 255, 0.02);
|
||||
/* Default minimal background */
|
||||
--glass-bg-medium: rgba(255, 255, 255, 0.03);
|
||||
/* Medium minimal effect */
|
||||
--glass-bg-hover: rgba(255, 255, 255, 0.04);
|
||||
/* Hover state */
|
||||
--glass-bg-active: rgba(255, 255, 255, 0.05);
|
||||
/* Active/pressed state */
|
||||
|
||||
/* Glass Borders - Very thin and subtle */
|
||||
--glass-border-subtle: rgba(255, 255, 255, 0.03);
|
||||
/* Very subtle border */
|
||||
--glass-border-default: rgba(255, 255, 255, 0.05);
|
||||
/* Default border */
|
||||
--glass-border-hover: rgba(255, 255, 255, 0.07);
|
||||
/* Hover border */
|
||||
--glass-border-focus: rgba(255, 255, 255, 0.10);
|
||||
/* Focus state - more visible */
|
||||
/* Glass Borders - Very thin and subtle */
|
||||
--glass-border-subtle: rgba(255, 255, 255, 0.03);
|
||||
/* Very subtle border */
|
||||
--glass-border-default: rgba(255, 255, 255, 0.05);
|
||||
/* Default border */
|
||||
--glass-border-hover: rgba(255, 255, 255, 0.07);
|
||||
/* Hover border */
|
||||
--glass-border-focus: rgba(255, 255, 255, 0.10);
|
||||
/* Focus state - more visible */
|
||||
|
||||
/* Backdrop Blur Levels - Subtle to strong */
|
||||
--glass-blur-sm: 4px;
|
||||
/* Small blur - for inputs */
|
||||
--glass-blur-md: 8px;
|
||||
/* Medium blur - default */
|
||||
--glass-blur-lg: 12px;
|
||||
/* Large blur - for navigation */
|
||||
--glass-blur-xl: 16px;
|
||||
/* Extra large - for modals */
|
||||
/* Backdrop Blur Levels - Subtle to strong */
|
||||
--glass-blur-sm: 4px;
|
||||
/* Small blur - for inputs */
|
||||
--glass-blur-md: 8px;
|
||||
/* Medium blur - default */
|
||||
--glass-blur-lg: 12px;
|
||||
/* Large blur - for navigation */
|
||||
--glass-blur-xl: 16px;
|
||||
/* Extra large - for modals */
|
||||
|
||||
/* Glass Shadows - Dark mode optimized */
|
||||
--glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
|
||||
--glass-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
|
||||
--glass-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
|
||||
--glass-shadow-inset: inset 0 1px 1px rgba(255, 255, 255, 0.1);
|
||||
/* Inner highlight */
|
||||
/* Glass Shadows - Dark mode optimized */
|
||||
--glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
|
||||
--glass-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
|
||||
--glass-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
|
||||
--glass-shadow-inset: inset 0 1px 1px rgba(255, 255, 255, 0.1);
|
||||
/* Inner highlight */
|
||||
|
||||
/* Interactive Glass States */
|
||||
--interactive-glass-rest: rgba(255, 255, 255, 0.04);
|
||||
--interactive-glass-hover: rgba(255, 255, 255, 0.08);
|
||||
--interactive-glass-active: rgba(255, 255, 255, 0.12);
|
||||
--interactive-glass-disabled: rgba(255, 255, 255, 0.02);
|
||||
/* Interactive Glass States */
|
||||
--interactive-glass-rest: rgba(255, 255, 255, 0.04);
|
||||
--interactive-glass-hover: rgba(255, 255, 255, 0.08);
|
||||
--interactive-glass-active: rgba(255, 255, 255, 0.12);
|
||||
--interactive-glass-disabled: rgba(255, 255, 255, 0.02);
|
||||
|
||||
/* Legacy support - keeping old variables for backward compatibility */
|
||||
--glass-bg: var(--glass-bg-default);
|
||||
--glass-border: var(--glass-border-default);
|
||||
--glass-blur: var(--glass-blur-md);
|
||||
/* Legacy support - keeping old variables for backward compatibility */
|
||||
--glass-bg: var(--glass-bg-default);
|
||||
--glass-border: var(--glass-border-default);
|
||||
--glass-blur: var(--glass-blur-md);
|
||||
|
||||
/* ============================================
|
||||
EN: Extended Shadows & Effects
|
||||
VI: Shadows & Effects mở rộng
|
||||
/* ============================================
|
||||
EN: Removed - Extended Shadows (X.ai Minimalist)
|
||||
VI: Đã xóa - Extended Shadows (X.ai Minimalist)
|
||||
============================================ */
|
||||
/* Removed brand shadows for minimalist approach */
|
||||
/* Use --shadow or --shadow-lg instead */
|
||||
|
||||
--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: #FFFFFF;
|
||||
--bg-secondary-light: #FBFBFD;
|
||||
/* Apple Gray */
|
||||
--bg-tertiary-light: #F5F5F7;
|
||||
--text-primary-light: #1D1D1F;
|
||||
/* Apple Black */
|
||||
--text-secondary-light: #86868B;
|
||||
/* Apple Gray Text */
|
||||
--border-primary-light: #D2D2D7;
|
||||
--bg-primary-light: #FFFFFF;
|
||||
--bg-secondary-light: #FBFBFD;
|
||||
/* Apple Gray */
|
||||
--bg-tertiary-light: #F5F5F7;
|
||||
--text-primary-light: #1D1D1F;
|
||||
/* Apple Black */
|
||||
--text-secondary-light: #86868B;
|
||||
/* Apple Gray Text */
|
||||
--border-primary-light: #D2D2D7;
|
||||
|
||||
/* ============================================
|
||||
/* ============================================
|
||||
EN: Typography
|
||||
VI: Kiểu chữ
|
||||
============================================ */
|
||||
|
||||
/* Font Stack / Bộ font */
|
||||
--font-sans: var(--font-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: var(--font-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: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
/* Display Font - For hero titles (48px+) */
|
||||
--font-display: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
|
||||
/* Heading Font - For section headings (24-36px) */
|
||||
--font-heading: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
/* Heading Font - For section headings (24-36px) */
|
||||
--font-heading: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
|
||||
/* Type Scale - Clean minimal approach */
|
||||
--text-6xl: 3.5rem;
|
||||
/* 56px - Hero titles */
|
||||
--text-5xl: 2.75rem;
|
||||
/* 44px - Page titles */
|
||||
--text-4xl: 2.25rem;
|
||||
/* 36px - Section headers */
|
||||
--text-3xl: 1.75rem;
|
||||
/* 28px - 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 - Clean minimal approach */
|
||||
--text-6xl: 3.5rem;
|
||||
/* 56px - Hero titles */
|
||||
--text-5xl: 2.75rem;
|
||||
/* 44px - Page titles */
|
||||
--text-4xl: 2.25rem;
|
||||
/* 36px - Section headers */
|
||||
--text-3xl: 1.75rem;
|
||||
/* 28px - 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 - Clean and minimal */
|
||||
--font-thin: 100;
|
||||
--font-extralight: 200;
|
||||
--font-light: 300;
|
||||
/* Light text */
|
||||
--font-normal: 400;
|
||||
/* Body text */
|
||||
--font-medium: 500;
|
||||
/* Emphasized */
|
||||
--font-semibold: 600;
|
||||
/* Headings */
|
||||
--font-bold: 600;
|
||||
/* Clean bold - less heavy */
|
||||
--font-extrabold: 700;
|
||||
/* Strong emphasis */
|
||||
/* Font Weights - X.ai Minimalist (Bolder Impact) */
|
||||
--font-thin: 100;
|
||||
--font-extralight: 200;
|
||||
--font-light: 300;
|
||||
/* Light text */
|
||||
--font-normal: 400;
|
||||
/* Body text */
|
||||
--font-medium: 500;
|
||||
/* Emphasized */
|
||||
--font-semibold: 600;
|
||||
/* Headings */
|
||||
--font-bold: 700;
|
||||
/* Bold - stronger impact */
|
||||
--font-extrabold: 800;
|
||||
/* Extra bold - hero text */
|
||||
--font-black: 900;
|
||||
/* Black - maximum impact for titles */
|
||||
|
||||
/* ============================================
|
||||
/* Letter Spacing - Clean Minimalist Look */
|
||||
--tracking-tighter: -0.04em;
|
||||
/* Very tight - for large display text */
|
||||
--tracking-tight: -0.02em;
|
||||
/* Tight - for headings */
|
||||
--tracking-normal: 0;
|
||||
/* Normal */
|
||||
--tracking-wide: 0.02em;
|
||||
/* Wide - for small caps */
|
||||
--tracking-wider: 0.04em;
|
||||
/* Wider - for 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 */
|
||||
|
||||
/* Mobile Layout / Layout Mobile */
|
||||
--mobile-header-height: 56px;
|
||||
/* Standard mobile header height */
|
||||
--mobile-bottom-nav-height: 64px;
|
||||
/* iOS/Android bottom nav height */
|
||||
--mobile-safe-area-top: env(safe-area-inset-top);
|
||||
/* iOS notch safe area */
|
||||
--mobile-safe-area-bottom: env(safe-area-inset-bottom);
|
||||
/* iOS home indicator safe area */
|
||||
/* Mobile Layout / Layout Mobile */
|
||||
--mobile-header-height: 56px;
|
||||
/* Standard mobile header height */
|
||||
--mobile-bottom-nav-height: 64px;
|
||||
/* iOS/Android bottom nav height */
|
||||
--mobile-safe-area-top: env(safe-area-inset-top);
|
||||
/* iOS notch safe area */
|
||||
--mobile-safe-area-bottom: env(safe-area-inset-bottom);
|
||||
/* iOS home indicator safe area */
|
||||
|
||||
/* 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)
|
||||
/* ============================================
|
||||
EN: Shadows - X.ai Minimalist (Ultra Subtle)
|
||||
VI: Đổ bóng - X.ai Minimalist (Cực kỳ tinh tế)
|
||||
============================================ */
|
||||
--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: 0 1px 3px rgba(0, 0, 0, 0.5);
|
||||
/* Default shadow - subtle */
|
||||
--shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.6);
|
||||
/* Large shadow - for modals only */
|
||||
|
||||
/* ============================================
|
||||
/* Legacy support - mapping to new shadows */
|
||||
--shadow-sm: var(--shadow);
|
||||
--shadow-md: var(--shadow);
|
||||
--shadow-xl: var(--shadow-lg);
|
||||
--shadow-glow: 0 0 8px rgba(255, 255, 255, 0.05);
|
||||
/* Minimal 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 - X.ai Minimalist (Simplified) */
|
||||
--ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
/* Smooth and natural - primary easing */
|
||||
--ease-snap: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
/* Snappy - for quick interactions */
|
||||
|
||||
/* Smooth Motion (x.ai inspired) */
|
||||
--motion-ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
/* Smooth and natural */
|
||||
--motion-ease-glide: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
/* Material Design standard */
|
||||
/* Legacy support - mapping to new easing */
|
||||
--ease-in: var(--ease-snap);
|
||||
--ease-out: var(--ease-snap);
|
||||
--ease-in-out: var(--ease-smooth);
|
||||
--motion-ease-smooth: var(--ease-smooth);
|
||||
--motion-ease-glide: var(--ease-snap);
|
||||
|
||||
/* 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 - X.ai Minimalist (Faster, Snappier) */
|
||||
--duration-instant: 100ms;
|
||||
/* Instant feedback */
|
||||
--duration-fast: 150ms;
|
||||
/* Hover effects */
|
||||
--duration-normal: 200ms;
|
||||
/* Default transitions - FASTER */
|
||||
--duration-slow: 300ms;
|
||||
/* Complex animations - FASTER */
|
||||
|
||||
/* Motion Duration (x.ai style) */
|
||||
--motion-duration-instant: 100ms;
|
||||
/* Instant feedback */
|
||||
--motion-duration-quick: 200ms;
|
||||
/* Quick interactions */
|
||||
--motion-duration-normal: 300ms;
|
||||
/* Standard transitions */
|
||||
--motion-duration-smooth: 400ms;
|
||||
/* Smooth, deliberate */
|
||||
/* Legacy support - mapping to new durations */
|
||||
--duration-slower: var(--duration-slow);
|
||||
--motion-duration-instant: var(--duration-instant);
|
||||
--motion-duration-quick: var(--duration-fast);
|
||||
--motion-duration-normal: var(--duration-normal);
|
||||
--motion-duration-smooth: var(--duration-slow);
|
||||
|
||||
/* ============================================
|
||||
EN: Advanced Motion Tokens
|
||||
VI: Token chuyển động nâng cao
|
||||
/* ============================================
|
||||
EN: Interactive States - X.ai Minimalist
|
||||
VI: Trạng thái tương tác - X.ai Minimalist
|
||||
============================================ */
|
||||
|
||||
/* 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);
|
||||
/* Removed bounce/elastic - too playful for minimalism */
|
||||
|
||||
/* Hover Scale - For interactive elements */
|
||||
--hover-scale-sm: 1.02;
|
||||
--hover-scale-md: 1.05;
|
||||
--hover-scale-lg: 1.1;
|
||||
/* Hover Scale - Minimal movement */
|
||||
--hover-scale-sm: 1.01;
|
||||
/* Barely noticeable */
|
||||
--hover-scale-md: 1.02;
|
||||
/* Subtle */
|
||||
|
||||
/* Active Scale - For pressed states */
|
||||
--active-scale: 0.98;
|
||||
/* Active Scale - For pressed states */
|
||||
--active-scale: 0.99;
|
||||
/* Minimal press feedback */
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -398,14 +411,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);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -414,16 +427,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;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -432,10 +445,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