duxingchen
8fcb33ab5e
components/ui/Toast.tsx: - Context + Provider 模式，全局可用 useToast() hook - 支持 success / error / info 三种类型，颜色自动适配 - 3.5s 自动消失，支持手动关闭 - 固定右下角渲染，z-[9999] index.css: - 新增 @keyframes slide-in 右侧滑入动画
56 lines
1.3 KiB
CSS
56 lines
1.3 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* ============================================================
|
|
移动端安全区适配（刘海屏 / 底部指示条）
|
|
TailwindCSS v4 自定义 utility
|
|
============================================================ */
|
|
|
|
@utility pt-safe {
|
|
padding-top: max(1rem, env(safe-area-inset-top));
|
|
}
|
|
|
|
@utility pb-safe {
|
|
padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
|
|
}
|
|
|
|
/* ============================================================
|
|
全局基样式
|
|
============================================================ */
|
|
|
|
html {
|
|
/* 防止 iOS Safari 橡皮筋效果导致误触导航 */
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
body {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
/* 禁止用户缩放（移动端 PWA 常用） */
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
/* 隐藏默认的滚动条（移动端无滚动条更干净） */
|
|
::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
/* ============================================================
|
|
Toast 动画
|
|
============================================================ */
|
|
|
|
@keyframes slide-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(100%);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.animate-slide-in {
|
|
animation: slide-in 0.3s ease-out;
|
|
}
|