diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..1b70cd1 --- /dev/null +++ b/src/index.css @@ -0,0 +1,91 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer utilities { + /* 隐藏滚动条但保持滚动功能 */ + .scrollbar-hide { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ + } + .scrollbar-hide::-webkit-scrollbar { + display: none; /* Chrome, Safari and Opera */ + } +} + +@layer base { + /* 全局高对比度基线 WCAG AA+ */ + body { + @apply antialiased; + } + + /* 老人端专用样式 */ + .elderly-mode { + @apply text-elderly-base leading-relaxed-plus; + } + + /* 大按钮基础样式 */ + .btn-elderly { + @apply min-h-touch-lg min-w-touch-lg text-elderly-lg font-bold rounded-2xl + shadow-lg active:scale-95 transition-transform duration-150; + } + + /* 无障碍焦点环 */ + *:focus-visible { + @apply outline-none ring-4 ring-primary-400 ring-offset-2; + } +} + +@layer components { + /* 卡片基础样式 */ + .card { + @apply bg-white rounded-2xl shadow-lg p-6; + } + + /* 老人端卡片 - 更大间距和字体 */ + .card-elderly { + @apply card p-8 text-elderly-base; + } + + /* 警示级别 */ + .alert-low { + @apply bg-warning-light text-gray-900; + } + + .alert-medium { + @apply bg-warning-medium text-white; + } + + .alert-high { + @apply bg-warning-high text-white; + } +} + +/* 动画 - 避免频闪 */ +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes breathe { + 0%, 100% { + opacity: 0.6; + transform: scale(1); + } + 50% { + opacity: 1; + transform: scale(1.05); + } +} + +.animate-fade-in { + animation: fadeIn 300ms ease-in-out; +} + +.animate-breathe { + animation: breathe 2s ease-in-out infinite; +}