383 lines
7.9 KiB
CSS
383 lines
7.9 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 glassmorphism utilities, then Tailwind CSS 4
|
|
* Import các biến theme trước, sau đó là glassmorphism utilities, rồi đến Tailwind CSS 4
|
|
*/
|
|
@import "../styles/theme.css";
|
|
@import "../styles/glass.css";
|
|
@import "tailwindcss";
|
|
|
|
/**
|
|
* EN: Base Styles
|
|
* VI: Styles cơ bản
|
|
*/
|
|
@layer base {
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
font-family: var(--font-sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/**
|
|
* EN: Disable smooth scroll for users who prefer reduced motion
|
|
* VI: Tắt smooth scroll cho người dùng ưa thích giảm chuyển động
|
|
*/
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html {
|
|
scroll-behavior: auto;
|
|
}
|
|
|
|
/* Also disable all animations */
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* EN: Custom text selection (X.ai blue)
|
|
* VI: Tùy chỉnh text selection (X.ai blue)
|
|
*/
|
|
::selection {
|
|
background-color: var(--accent-primary);
|
|
color: white;
|
|
}
|
|
|
|
::-moz-selection {
|
|
background-color: var(--accent-primary);
|
|
color: white;
|
|
}
|
|
|
|
/**
|
|
* EN: Custom scrollbar (X.ai minimal)
|
|
* VI: Tùy chỉnh scrollbar (X.ai minimal)
|
|
*/
|
|
/* Webkit browsers (Chrome, Safari, Edge) */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--glass-border-default);
|
|
border-radius: var(--radius-full);
|
|
transition: background var(--duration-fast) var(--ease-snap);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--glass-border-hover);
|
|
}
|
|
|
|
/* Firefox */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--glass-border-default) var(--bg-secondary);
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
font-size: var(--text-base);
|
|
font-weight: var(--font-light);
|
|
line-height: var(--leading-relaxed);
|
|
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);
|
|
}
|
|
|
|
/**
|
|
* EN: Focus indicators for keyboard navigation (WCAG 2.1 AA)
|
|
* VI: Chỉ báo focus cho điều hướng bàn phím (WCAG 2.1 AA)
|
|
*/
|
|
*:focus-visible {
|
|
outline: 2px solid var(--accent-primary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/**
|
|
* EN: Skip link styles (screen reader only until focused)
|
|
* VI: Styles cho skip link (chỉ screen reader cho đến khi focus)
|
|
*/
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border-width: 0;
|
|
}
|
|
|
|
.sr-only:focus,
|
|
.sr-only:focus-visible {
|
|
position: fixed;
|
|
width: auto;
|
|
height: auto;
|
|
padding: inherit;
|
|
margin: 0;
|
|
overflow: visible;
|
|
clip: auto;
|
|
white-space: normal;
|
|
}
|
|
|
|
/**
|
|
* EN: Ensure minimum font size for accessibility (16px) - WCAG 2.1 AA
|
|
* VI: Đảm bảo kích thước font tối thiểu cho accessibility (16px) - WCAG 2.1 AA
|
|
*/
|
|
body {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* EN: Message bubble fade-in animation
|
|
* VI: Animation fade-in cho message bubble
|
|
*/
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
filter: blur(10px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
filter: blur(0);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* EN: Floating Animation - X.ai Minimalist (Simplified)
|
|
* VI: Animation lơ lửng - X.ai Minimalist (Đơn giản hóa)
|
|
*/
|
|
@keyframes float {
|
|
|
|
0%,
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(-8px);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* EN: Skeleton Loading Animation
|
|
* VI: Animation loading skeleton
|
|
*/
|
|
@keyframes skeleton {
|
|
0% {
|
|
background-position: 200% 0;
|
|
}
|
|
|
|
100% {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
EN: Removed - Mesh Gradient Animation (X.ai Minimalist)
|
|
VI: Đã xóa - Mesh Gradient Animation (X.ai Minimalist)
|
|
============================================ */
|
|
/* Removed for cleaner, minimalist aesthetic */
|
|
|
|
/* ============================================
|
|
EN: Removed - Shimmer Animation (X.ai Minimalist)
|
|
VI: Đã xóa - Shimmer Animation (X.ai Minimalist)
|
|
============================================ */
|
|
/* Removed for cleaner, minimalist aesthetic */
|
|
|
|
/**
|
|
* EN: Utilities Layer
|
|
* VI: Layer Utilities
|
|
*/
|
|
@layer utilities {
|
|
.animate-fadeIn {
|
|
animation: fadeIn 1s var(--ease-spring) forwards;
|
|
}
|
|
|
|
/* EN: Simplified float animation - X.ai style */
|
|
.animate-float {
|
|
animation: float 4s var(--ease-smooth) infinite;
|
|
}
|
|
|
|
/**
|
|
* EN: Skeleton Loading Utilities
|
|
* VI: Utilities loading skeleton
|
|
*/
|
|
.skeleton {
|
|
background: linear-gradient(90deg,
|
|
var(--glass-bg-subtle) 0%,
|
|
var(--glass-bg-default) 50%,
|
|
var(--glass-bg-subtle) 100%);
|
|
background-size: 200% 100%;
|
|
animation: skeleton 1.5s ease-in-out infinite;
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.skeleton-text {
|
|
height: 1em;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.skeleton-title {
|
|
height: 2em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.skeleton-avatar {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: var(--radius-full);
|
|
}
|
|
|
|
.skeleton-card {
|
|
height: 200px;
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
/**
|
|
* EN: Button Press Micro-interaction
|
|
* VI: Micro-interaction cho button press
|
|
*/
|
|
.btn-press {
|
|
transition: transform var(--duration-fast) var(--ease-snap);
|
|
}
|
|
|
|
.btn-press:active:not(:disabled) {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
/* ============================================
|
|
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%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.container-responsive {
|
|
max-width: 640px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.container-responsive {
|
|
max-width: 768px;
|
|
padding-left: 1.5rem;
|
|
padding-right: 1.5rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.container-responsive {
|
|
max-width: 1024px;
|
|
padding-left: 2rem;
|
|
padding-right: 2rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1280px) {
|
|
.container-responsive {
|
|
max-width: 1280px;
|
|
}
|
|
}
|
|
|
|
.text-responsive-hero {
|
|
font-size: 2.5rem;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.text-responsive-hero {
|
|
font-size: 3.75rem;
|
|
}
|
|
}
|
|
|
|
.btn-touch {
|
|
min-height: 44px;
|
|
min-width: 44px;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* EN: Print Styles
|
|
* VI: Styles cho in ấn
|
|
*/
|
|
@media print {
|
|
body {
|
|
background: white;
|
|
color: black;
|
|
}
|
|
|
|
.glass-card {
|
|
background: white;
|
|
border: 1px solid #ccc;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Hide non-essential elements */
|
|
nav,
|
|
footer,
|
|
.no-print,
|
|
button,
|
|
.auth-controls {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Ensure readable text */
|
|
* {
|
|
color: black !important;
|
|
background: white !important;
|
|
}
|
|
|
|
a {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Show link URLs after text */
|
|
a[href]:after {
|
|
content: " (" attr(href) ")";
|
|
font-size: 0.8em;
|
|
color: #666;
|
|
}
|
|
} |