1845 lines
42 KiB
JavaScript
1845 lines
42 KiB
JavaScript
/**
|
|
* MetonaToast Styles - 样式管理
|
|
* @module styles
|
|
* @version 2.0.0
|
|
* @description 样式注入、更新和主题管理
|
|
*/
|
|
|
|
import { THEMES } from './constants.js';
|
|
|
|
// 样式缓存
|
|
let injectedStyles = null;
|
|
let styleElement = null;
|
|
|
|
/**
|
|
* 生成CSS样式
|
|
* @param {Object} theme - 主题配置
|
|
* @returns {string} CSS字符串
|
|
*/
|
|
const generateCSS = (theme) => {
|
|
return `
|
|
/* MetonaToast 基础样式 */
|
|
.met-container {
|
|
pointer-events: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
box-sizing: border-box;
|
|
padding: 24px;
|
|
max-width: 100vw;
|
|
position: fixed;
|
|
z-index: 9999;
|
|
}
|
|
|
|
/* 位置样式 — 顶部位置用 column-reverse，新 toast 出现在最上方 */
|
|
.met-container.top-left {
|
|
top: 0;
|
|
left: 0;
|
|
align-items: flex-start;
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
.met-container.top-center {
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
align-items: center;
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
.met-container.top-right {
|
|
top: 0;
|
|
right: 0;
|
|
align-items: flex-end;
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
.met-container.bottom-left {
|
|
bottom: 0;
|
|
left: 0;
|
|
align-items: flex-start;
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
.met-container.bottom-center {
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
align-items: center;
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
.met-container.bottom-right {
|
|
bottom: 0;
|
|
right: 0;
|
|
align-items: flex-end;
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
/* Toast基础样式 */
|
|
.met-toast {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
padding: 14px 16px;
|
|
border-radius: 12px;
|
|
box-sizing: border-box;
|
|
backdrop-filter: blur(14px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(14px) saturate(180%);
|
|
font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
|
|
box-shadow 0.25s ease,
|
|
opacity 0.25s ease;
|
|
will-change: transform, opacity;
|
|
flex-shrink: 0;
|
|
pointer-events: auto;
|
|
min-width: 240px;
|
|
max-width: calc(100vw - 48px);
|
|
width: 360px;
|
|
border: 1px solid var(--met-border, rgba(0,0,0,0.06));
|
|
background: var(--met-bg, rgba(255,255,255,0.96));
|
|
color: var(--met-text, #1f2937);
|
|
box-shadow: var(--met-shadow, 0 10px 36px -10px rgba(0,0,0,0.18), 0 4px 14px -4px rgba(0,0,0,0.08));
|
|
}
|
|
|
|
/* 悬停效果 */
|
|
.met-toast:hover {
|
|
box-shadow: var(--met-hover-shadow, 0 14px 48px -10px rgba(0,0,0,0.22), 0 6px 18px -4px rgba(0,0,0,0.10)) !important;
|
|
}
|
|
|
|
/* 可点击状态 */
|
|
.met-toast.met-clickable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 图标样式 */
|
|
.met-icon {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
/* 内容样式 */
|
|
.met-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
/* 标题样式 */
|
|
.met-title {
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
letter-spacing: 0.1px;
|
|
}
|
|
|
|
/* 消息样式 */
|
|
.met-message {
|
|
font-size: 13px;
|
|
opacity: 0.85;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* 关闭按钮样式 */
|
|
.met-close {
|
|
flex-shrink: 0;
|
|
background: transparent;
|
|
border: 0;
|
|
padding: 4px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 6px;
|
|
transition: background 0.2s, color 0.2s;
|
|
line-height: 0;
|
|
color: inherit;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.met-close:hover {
|
|
opacity: 1;
|
|
background: var(--met-close-hover-bg, rgba(0,0,0,0.06));
|
|
}
|
|
|
|
/* 进度条样式 - 水平 */
|
|
.met-progress {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 3px;
|
|
overflow: hidden;
|
|
background: var(--met-progress-bg, rgba(0,0,0,0.06));
|
|
border-radius: 0 0 12px 12px;
|
|
}
|
|
|
|
/* 进度条样式 - 垂直 */
|
|
.met-progress-v {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 3px;
|
|
overflow: hidden;
|
|
background: var(--met-progress-bg, rgba(0,0,0,0.06));
|
|
border-radius: 12px 0 0 12px;
|
|
}
|
|
|
|
/* 进度条指示器 - 水平 */
|
|
.met-bar {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
transform-origin: left;
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
/* 进度条指示器 - 垂直 */
|
|
.met-bar-v {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
transform-origin: bottom;
|
|
transform: scaleY(1);
|
|
}
|
|
|
|
/* 侧边指示器 */
|
|
.met-side {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 4px;
|
|
border-radius: 12px 0 0 12px;
|
|
}
|
|
|
|
/* 加载动画 */
|
|
.met-spin {
|
|
animation: met-rot 1s linear infinite;
|
|
transform-origin: 50% 50%;
|
|
}
|
|
|
|
/* 离开状态 */
|
|
.met-toast.met-leaving {
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* 动画关键帧 */
|
|
@keyframes met-rot {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* === 进入动画：初始隐藏态 === */
|
|
.met-anim-slide.met-toast,
|
|
.met-anim-fade.met-toast,
|
|
.met-anim-scale.met-toast,
|
|
.met-anim-bounce.met-toast,
|
|
.met-anim-flip.met-toast,
|
|
.met-anim-rotate.met-toast,
|
|
.met-anim-zoom.met-toast,
|
|
.met-anim-slideUp.met-toast,
|
|
.met-anim-slideDown.met-toast,
|
|
.met-anim-slideLeft.met-toast,
|
|
.met-anim-slideRight.met-toast {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* === 进入动画：@keyframes 定义 === */
|
|
@keyframes met-slide-in {
|
|
0% { transform: translateX(80px); opacity: 0; }
|
|
65% { transform: translateX(-6px); opacity: 1; }
|
|
100% { transform: translateX(0); opacity: 1; }
|
|
}
|
|
@keyframes met-fade-in {
|
|
0% { opacity: 0; filter: blur(3px); }
|
|
100% { opacity: 1; filter: blur(0); }
|
|
}
|
|
@keyframes met-scale-in {
|
|
0% { transform: scale(0.55); opacity: 0; }
|
|
65% { transform: scale(1.07); opacity: 1; }
|
|
100% { transform: scale(1); opacity: 1; }
|
|
}
|
|
@keyframes met-bounce-in {
|
|
0% { transform: translateY(-80px); opacity: 0; animation-timing-function: ease-in; }
|
|
45% { transform: translateY(14px); opacity: 1; animation-timing-function: ease-out; }
|
|
65% { transform: translateY(-12px); animation-timing-function: ease-in; }
|
|
82% { transform: translateY(4px); animation-timing-function: ease-out; }
|
|
100% { transform: translateY(0); opacity: 1; }
|
|
}
|
|
@keyframes met-flip-in {
|
|
0% { transform: perspective(500px) rotateX(-90deg); opacity: 0; }
|
|
60% { transform: perspective(500px) rotateX(8deg); opacity: 1; }
|
|
85% { transform: perspective(500px) rotateX(-2deg); }
|
|
100% { transform: perspective(500px) rotateX(0); opacity: 1; }
|
|
}
|
|
@keyframes met-rotate-in {
|
|
0% { transform: rotate(-25deg) scale(0.6); opacity: 0; }
|
|
60% { transform: rotate(4deg) scale(1.05); opacity: 1; }
|
|
85% { transform: rotate(-1deg) scale(0.98); }
|
|
100% { transform: rotate(0) scale(1); opacity: 1; }
|
|
}
|
|
@keyframes met-zoom-in {
|
|
0% { transform: scale(0.1); opacity: 0; }
|
|
50% { transform: scale(1.12); opacity: 1; }
|
|
75% { transform: scale(0.94); }
|
|
100% { transform: scale(1); opacity: 1; }
|
|
}
|
|
@keyframes met-slideUp-in {
|
|
0% { transform: translateY(60px); opacity: 0; }
|
|
70% { transform: translateY(-6px); opacity: 1; }
|
|
100% { transform: translateY(0); opacity: 1; }
|
|
}
|
|
@keyframes met-slideDown-in {
|
|
0% { transform: translateY(-60px); opacity: 0; }
|
|
70% { transform: translateY(6px); opacity: 1; }
|
|
100% { transform: translateY(0); opacity: 1; }
|
|
}
|
|
@keyframes met-slideLeft-in {
|
|
0% { transform: translateX(-90px); opacity: 0; }
|
|
65% { transform: translateX(6px); opacity: 1; }
|
|
100% { transform: translateX(0); opacity: 1; }
|
|
}
|
|
@keyframes met-slideRight-in {
|
|
0% { transform: translateX(90px); opacity: 0; }
|
|
65% { transform: translateX(-6px); opacity: 1; }
|
|
100% { transform: translateX(0); opacity: 1; }
|
|
}
|
|
|
|
/* === 进入动画：绑定到 .met-show === */
|
|
.met-anim-slide.met-toast.met-show { animation: met-slide-in 0.40s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
|
|
.met-anim-fade.met-toast.met-show { animation: met-fade-in 0.50s ease forwards; }
|
|
.met-anim-scale.met-toast.met-show { animation: met-scale-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
|
|
.met-anim-bounce.met-toast.met-show { animation: met-bounce-in 0.65s ease forwards; }
|
|
.met-anim-flip.met-toast.met-show { animation: met-flip-in 0.50s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
|
|
.met-anim-rotate.met-toast.met-show { animation: met-rotate-in 0.50s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
|
|
.met-anim-zoom.met-toast.met-show { animation: met-zoom-in 0.50s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
|
|
.met-anim-slideUp.met-toast.met-show { animation: met-slideUp-in 0.40s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
|
|
.met-anim-slideDown.met-toast.met-show { animation: met-slideDown-in 0.40s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
|
|
.met-anim-slideLeft.met-toast.met-show { animation: met-slideLeft-in 0.40s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
|
|
.met-anim-slideRight.met-toast.met-show { animation: met-slideRight-in 0.40s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
|
|
|
|
/* 响应式设计 */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.met-toast {
|
|
transition: opacity 0.15s !important;
|
|
}
|
|
|
|
.met-toast.met-show {
|
|
animation: none !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.met-spin {
|
|
animation-duration: 2.5s !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.met-container {
|
|
padding: 12px !important;
|
|
}
|
|
|
|
.met-toast {
|
|
width: 100% !important;
|
|
min-width: 0 !important;
|
|
}
|
|
}
|
|
|
|
/* 暗色主题特定样式 */
|
|
.met-toast.met-theme-dark {
|
|
background: rgba(28, 32, 40, 0.94);
|
|
color: #e6e8eb;
|
|
border-color: rgba(255, 255, 255, 0.08);
|
|
box-shadow: 0 10px 36px -10px rgba(0, 0, 0, 0.6),
|
|
0 4px 14px -4px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.met-toast.met-theme-dark:hover {
|
|
box-shadow: 0 14px 48px -8px rgba(0, 0, 0, 0.6),
|
|
0 6px 18px -4px rgba(0, 0, 0, 0.4) !important;
|
|
}
|
|
|
|
.met-toast.met-theme-dark .met-close:hover {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.met-toast.met-theme-dark .met-progress,
|
|
.met-toast.met-theme-dark .met-progress-v {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
/* 亮色主题特定样式 */
|
|
.met-toast.met-theme-light {
|
|
background: rgba(255, 255, 255, 0.96);
|
|
color: #1f2937;
|
|
border-color: rgba(0, 0, 0, 0.06);
|
|
box-shadow: 0 10px 36px -10px rgba(0, 0, 0, 0.18),
|
|
0 4px 14px -4px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.met-toast.met-theme-light:hover {
|
|
box-shadow: 0 14px 48px -10px rgba(0, 0, 0, 0.22),
|
|
0 6px 18px -4px rgba(0, 0, 0, 0.10) !important;
|
|
}
|
|
|
|
.met-toast.met-theme-light .met-close:hover {
|
|
background: rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.met-toast.met-theme-light .met-progress,
|
|
.met-toast.met-theme-light .met-progress-v {
|
|
background: rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
/* 自定义主题支持 */
|
|
.met-toast[data-theme] {
|
|
--met-bg: var(--met-theme-bg);
|
|
--met-text: var(--met-theme-text);
|
|
--met-border: var(--met-theme-border);
|
|
--met-shadow: var(--met-theme-shadow);
|
|
}
|
|
|
|
/* 动画性能优化 */
|
|
.met-toast {
|
|
backface-visibility: hidden;
|
|
-webkit-backface-visibility: hidden;
|
|
perspective: 1000;
|
|
}
|
|
|
|
/* 滚动条样式 */
|
|
.met-container::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
.met-container::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.met-container::-webkit-scrollbar-thumb {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.met-container::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* 打印样式 */
|
|
@media print {
|
|
.met-container {
|
|
display: none !important;
|
|
}
|
|
.met-toast {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* 高对比度模式 */
|
|
@media (forced-colors: active) {
|
|
.met-toast {
|
|
border: 2px solid ButtonText;
|
|
}
|
|
|
|
.met-close {
|
|
border: 1px solid ButtonText;
|
|
}
|
|
}
|
|
|
|
/* 焦点样式 */
|
|
.met-toast:focus-visible {
|
|
outline: 2px solid #3b82f6;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.met-close:focus-visible {
|
|
outline: 2px solid #3b82f6;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* 禁用状态 */
|
|
.met-toast:disabled,
|
|
.met-toast[disabled] {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* 加载状态 */
|
|
.met-toast.met-loading {
|
|
cursor: wait;
|
|
}
|
|
|
|
/* 成功状态 */
|
|
.met-toast.met-success {
|
|
border-left: 4px solid #10b981;
|
|
}
|
|
|
|
/* 错误状态 */
|
|
.met-toast.met-error {
|
|
border-left: 4px solid #ef4444;
|
|
}
|
|
|
|
/* 警告状态 */
|
|
.met-toast.met-warning {
|
|
border-left: 4px solid #f59e0b;
|
|
}
|
|
|
|
/* 信息状态 */
|
|
.met-toast.met-info {
|
|
border-left: 4px solid #3b82f6;
|
|
}
|
|
|
|
/* 加载状态 */
|
|
.met-toast.met-loading {
|
|
border-left: 4px solid #6366f1;
|
|
}
|
|
|
|
/* 进度条动画 */
|
|
.met-bar,
|
|
.met-bar-v {
|
|
transition: transform 0.1s linear;
|
|
}
|
|
|
|
/* 容器动画 */
|
|
.met-container {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* Toast进入动画 */
|
|
.met-toast.met-enter {
|
|
animation: met-enter 0.3s ease forwards;
|
|
}
|
|
|
|
/* Toast离开动画 */
|
|
.met-toast.met-leave {
|
|
animation: met-leave 0.3s ease forwards;
|
|
}
|
|
|
|
@keyframes met-enter {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes met-leave {
|
|
from {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
}
|
|
|
|
/* 响应式字体大小 */
|
|
@media (max-width: 768px) {
|
|
.met-toast {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.met-title {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.met-message {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.met-toast {
|
|
font-size: 12px;
|
|
padding: 12px 14px;
|
|
}
|
|
|
|
.met-title {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.met-message {
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
|
|
/* 无障碍支持 */
|
|
.met-toast[role="alert"] {
|
|
/* 警告类型Toast的特殊样式 */
|
|
}
|
|
|
|
.met-toast[role="status"] {
|
|
/* 状态类型Toast的特殊样式 */
|
|
}
|
|
|
|
/* 高对比度模式增强 */
|
|
@media (prefers-contrast: high) {
|
|
.met-toast {
|
|
border-width: 2px;
|
|
}
|
|
|
|
.met-close {
|
|
border: 1px solid currentColor;
|
|
}
|
|
}
|
|
|
|
/* 暗色模式自动检测 */
|
|
@media (prefers-color-scheme: dark) {
|
|
.met-theme-auto .met-toast {
|
|
background: rgba(28, 32, 40, 0.94);
|
|
color: #e6e8eb;
|
|
border-color: rgba(255, 255, 255, 0.08);
|
|
box-shadow: 0 10px 36px -10px rgba(0, 0, 0, 0.6),
|
|
0 4px 14px -4px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.met-theme-auto .met-toast:hover {
|
|
box-shadow: 0 14px 48px -8px rgba(0, 0, 0, 0.6),
|
|
0 6px 18px -4px rgba(0, 0, 0, 0.4) !important;
|
|
}
|
|
|
|
.met-theme-auto .met-close:hover {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.met-theme-auto .met-progress,
|
|
.met-theme-auto .met-progress-v {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
}
|
|
}
|
|
|
|
/* 亮色模式自动检测 */
|
|
@media (prefers-color-scheme: light) {
|
|
.met-theme-auto .met-toast {
|
|
background: rgba(255, 255, 255, 0.96);
|
|
color: #1f2937;
|
|
border-color: rgba(0, 0, 0, 0.06);
|
|
box-shadow: 0 10px 36px -10px rgba(0, 0, 0, 0.18),
|
|
0 4px 14px -4px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.met-theme-auto .met-toast:hover {
|
|
box-shadow: 0 14px 48px -10px rgba(0, 0, 0, 0.22),
|
|
0 6px 18px -4px rgba(0, 0, 0, 0.10) !important;
|
|
}
|
|
|
|
.met-theme-auto .met-close:hover {
|
|
background: rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.met-theme-auto .met-progress,
|
|
.met-theme-auto .met-progress-v {
|
|
background: rgba(0, 0, 0, 0.06);
|
|
}
|
|
}
|
|
|
|
/* 动画性能优化 */
|
|
.met-toast {
|
|
transform: translateZ(0);
|
|
-webkit-transform: translateZ(0);
|
|
}
|
|
|
|
/* 触摸设备优化 */
|
|
@media (hover: none) {
|
|
.met-toast:hover {
|
|
box-shadow: inherit;
|
|
}
|
|
}
|
|
|
|
/* 滚动时固定位置 */
|
|
.met-container {
|
|
position: fixed;
|
|
z-index: 9999;
|
|
}
|
|
|
|
/* 全屏模式 */
|
|
:fullscreen .met-container {
|
|
z-index: 2147483647;
|
|
}
|
|
|
|
/* 画中画模式 */
|
|
:picture-in-picture .met-container {
|
|
z-index: 2147483647;
|
|
}
|
|
|
|
/* 安全区域适配 */
|
|
@supports (padding: max(0px)) {
|
|
.met-container {
|
|
padding: max(24px, env(safe-area-inset-top))
|
|
max(24px, env(safe-area-inset-right))
|
|
max(24px, env(safe-area-inset-bottom))
|
|
max(24px, env(safe-area-inset-left));
|
|
}
|
|
}
|
|
|
|
/* 暗色模式安全区域 */
|
|
@media (prefers-color-scheme: dark) {
|
|
@supports (padding: max(0px)) {
|
|
.met-container {
|
|
padding: max(24px, env(safe-area-inset-top))
|
|
max(24px, env(safe-area-inset-right))
|
|
max(24px, env(safe-area-inset-bottom))
|
|
max(24px, env(safe-area-inset-left));
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 高分辨率屏幕优化 */
|
|
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
|
.met-toast {
|
|
border-width: 0.5px;
|
|
}
|
|
}
|
|
|
|
/* 触摸设备优化 */
|
|
@media (hover: none) and (pointer: coarse) {
|
|
.met-toast {
|
|
min-height: 48px;
|
|
}
|
|
|
|
.met-close {
|
|
min-width: 48px;
|
|
min-height: 48px;
|
|
}
|
|
}
|
|
|
|
/* 键盘导航优化 */
|
|
.met-toast:focus {
|
|
outline: 2px solid #3b82f6;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.met-toast:focus:not(:focus-visible) {
|
|
outline: none;
|
|
}
|
|
|
|
.met-toast:focus-visible {
|
|
outline: 2px solid #3b82f6;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* 减少动画模式 */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.met-toast {
|
|
transition: opacity 0.15s ease !important;
|
|
animation: none !important;
|
|
}
|
|
|
|
.met-bar,
|
|
.met-bar-v {
|
|
transition: none !important;
|
|
}
|
|
|
|
.met-container {
|
|
transition: none !important;
|
|
}
|
|
}
|
|
|
|
/* 高对比度模式 */
|
|
@media (prefers-contrast: high) {
|
|
.met-toast {
|
|
border-width: 3px;
|
|
border-style: solid;
|
|
}
|
|
|
|
.met-close {
|
|
border: 2px solid currentColor;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.met-progress,
|
|
.met-progress-v {
|
|
height: 4px;
|
|
}
|
|
|
|
.met-bar,
|
|
.met-bar-v {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
/* 低分辨率屏幕优化 */
|
|
@media (max-resolution: 1dppx) {
|
|
.met-toast {
|
|
border-width: 1px;
|
|
}
|
|
}
|
|
|
|
/* 触摸设备优化 */
|
|
@media (hover: none) and (pointer: coarse) {
|
|
.met-toast {
|
|
min-height: 52px;
|
|
padding: 16px 18px;
|
|
}
|
|
|
|
.met-close {
|
|
min-width: 52px;
|
|
min-height: 52px;
|
|
padding: 8px;
|
|
}
|
|
|
|
.met-icon {
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
}
|
|
|
|
/* 大屏幕优化 */
|
|
@media (min-width: 1200px) {
|
|
.met-toast {
|
|
width: 400px;
|
|
}
|
|
}
|
|
|
|
/* 超大屏幕优化 */
|
|
@media (min-width: 1920px) {
|
|
.met-toast {
|
|
width: 440px;
|
|
}
|
|
}
|
|
|
|
/* 小屏幕优化 */
|
|
@media (max-width: 320px) {
|
|
.met-toast {
|
|
width: 100%;
|
|
min-width: 0;
|
|
padding: 12px 14px;
|
|
}
|
|
|
|
.met-container {
|
|
padding: 8px;
|
|
}
|
|
}
|
|
|
|
/* 横屏优化 */
|
|
@media (orientation: landscape) and (max-height: 500px) {
|
|
.met-container {
|
|
padding: 12px 24px;
|
|
}
|
|
|
|
.met-toast {
|
|
min-height: 44px;
|
|
padding: 10px 14px;
|
|
}
|
|
}
|
|
|
|
/* 竖屏优化 */
|
|
@media (orientation: portrait) and (max-width: 500px) {
|
|
.met-container {
|
|
padding: 12px;
|
|
}
|
|
|
|
.met-toast {
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
}
|
|
|
|
/* 无障碍支持 */
|
|
.met-toast[aria-live="assertive"] {
|
|
/* 紧急通知样式 */
|
|
}
|
|
|
|
.met-toast[aria-live="polite"] {
|
|
/* 普通通知样式 */
|
|
}
|
|
|
|
/* 焦点陷阱 */
|
|
.met-toast:focus-within {
|
|
/* 包含焦点元素的Toast样式 */
|
|
}
|
|
|
|
/* 加载状态 */
|
|
.met-toast[aria-busy="true"] {
|
|
cursor: wait;
|
|
}
|
|
|
|
/* 禁用状态 */
|
|
.met-toast[aria-disabled="true"] {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 隐藏状态 */
|
|
.met-toast[aria-hidden="true"] {
|
|
display: none;
|
|
}
|
|
|
|
/* 展开状态 */
|
|
.met-toast[aria-expanded="true"] {
|
|
/* 展开状态样式 */
|
|
}
|
|
|
|
/* 选中状态 */
|
|
.met-toast[aria-selected="true"] {
|
|
/* 选中状态样式 */
|
|
}
|
|
|
|
/* 按下状态 */
|
|
.met-toast:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
/* 加载状态动画 */
|
|
.met-toast.met-loading::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
rgba(255, 255, 255, 0.1),
|
|
transparent
|
|
);
|
|
animation: met-loading 1.5s infinite;
|
|
}
|
|
|
|
@keyframes met-loading {
|
|
0% {
|
|
transform: translateX(-100%);
|
|
}
|
|
100% {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
|
|
/* 成功状态动画 */
|
|
.met-toast.met-success::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 4px;
|
|
height: 100%;
|
|
background: #10b981;
|
|
border-radius: 12px 0 0 12px;
|
|
animation: met-success 0.3s ease;
|
|
}
|
|
|
|
@keyframes met-success {
|
|
from {
|
|
transform: scaleY(0);
|
|
}
|
|
to {
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
|
|
/* 错误状态动画 */
|
|
.met-toast.met-error::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 4px;
|
|
height: 100%;
|
|
background: #ef4444;
|
|
border-radius: 12px 0 0 12px;
|
|
animation: met-error 0.3s ease;
|
|
}
|
|
|
|
@keyframes met-error {
|
|
from {
|
|
transform: scaleY(0);
|
|
}
|
|
to {
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
|
|
/* 警告状态动画 */
|
|
.met-toast.met-warning::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 4px;
|
|
height: 100%;
|
|
background: #f59e0b;
|
|
border-radius: 12px 0 0 12px;
|
|
animation: met-warning 0.3s ease;
|
|
}
|
|
|
|
@keyframes met-warning {
|
|
from {
|
|
transform: scaleY(0);
|
|
}
|
|
to {
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
|
|
/* 信息状态动画 */
|
|
.met-toast.met-info::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 4px;
|
|
height: 100%;
|
|
background: #3b82f6;
|
|
border-radius: 12px 0 0 12px;
|
|
animation: met-info 0.3s ease;
|
|
}
|
|
|
|
@keyframes met-info {
|
|
from {
|
|
transform: scaleY(0);
|
|
}
|
|
to {
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
|
|
/* 加载状态动画 */
|
|
.met-toast.met-loading::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 4px;
|
|
height: 100%;
|
|
background: #6366f1;
|
|
border-radius: 12px 0 0 12px;
|
|
animation: met-loading-bar 1s infinite;
|
|
}
|
|
|
|
@keyframes met-loading-bar {
|
|
0% {
|
|
transform: scaleY(0);
|
|
transform-origin: top;
|
|
}
|
|
50% {
|
|
transform: scaleY(1);
|
|
transform-origin: top;
|
|
}
|
|
51% {
|
|
transform-origin: bottom;
|
|
}
|
|
100% {
|
|
transform: scaleY(0);
|
|
transform-origin: bottom;
|
|
}
|
|
}
|
|
|
|
/* 进度条脉冲动画 */
|
|
.met-bar,
|
|
.met-bar-v {
|
|
animation: met-pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes met-pulse {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
/* Toast堆叠效果 */
|
|
.met-toast + .met-toast {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
/* Toast分组 */
|
|
.met-toast-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* Toast头部 */
|
|
.met-toast-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
/* Toast底部 */
|
|
.met-toast-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
/* Toast操作按钮 */
|
|
.met-toast-action {
|
|
background: transparent;
|
|
border: 1px solid currentColor;
|
|
padding: 6px 12px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
opacity: 0.7;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.met-toast-action:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Toast进度文本 */
|
|
.met-toast-progress-text {
|
|
font-size: 12px;
|
|
opacity: 0.7;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
/* Toast时间戳 */
|
|
.met-toast-timestamp {
|
|
font-size: 11px;
|
|
opacity: 0.5;
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* Toast头像 */
|
|
.met-toast-avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Toast图片 */
|
|
.met-toast-image {
|
|
max-width: 100%;
|
|
max-height: 200px;
|
|
border-radius: 8px;
|
|
margin-top: 8px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* Toast视频 */
|
|
.met-toast-video {
|
|
max-width: 100%;
|
|
max-height: 200px;
|
|
border-radius: 8px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
/* Toast音频 */
|
|
.met-toast-audio {
|
|
width: 100%;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
/* Toast代码块 */
|
|
.met-toast-code {
|
|
background: rgba(0, 0, 0, 0.05);
|
|
padding: 8px 12px;
|
|
border-radius: 6px;
|
|
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
|
font-size: 12px;
|
|
margin-top: 8px;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.met-theme-dark .met-toast-code {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
/* Toast引用 */
|
|
.met-toast-quote {
|
|
border-left: 3px solid currentColor;
|
|
padding-left: 12px;
|
|
margin-top: 8px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Toast列表 */
|
|
.met-toast-list {
|
|
margin: 8px 0 0 0;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.met-toast-list li {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
/* Toast表格 */
|
|
.met-toast-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 8px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.met-toast-table th,
|
|
.met-toast-table td {
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
padding: 6px 8px;
|
|
text-align: left;
|
|
}
|
|
|
|
.met-theme-dark .met-toast-table th,
|
|
.met-theme-dark .met-toast-table td {
|
|
border-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.met-toast-table th {
|
|
background: rgba(0, 0, 0, 0.05);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.met-theme-dark .met-toast-table th {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
/* Toast分割线 */
|
|
.met-toast-divider {
|
|
height: 1px;
|
|
background: rgba(0, 0, 0, 0.1);
|
|
margin: 12px 0;
|
|
}
|
|
|
|
.met-theme-dark .met-toast-divider {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/* Toast标签 */
|
|
.met-toast-tag {
|
|
display: inline-block;
|
|
background: rgba(0, 0, 0, 0.05);
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
margin-right: 4px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.met-theme-dark .met-toast-tag {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
/* Toast徽章 */
|
|
.met-toast-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #3b82f6;
|
|
color: white;
|
|
padding: 2px 8px;
|
|
border-radius: 10px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
min-width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
/* Toast进度环 */
|
|
.met-toast-progress-ring {
|
|
width: 40px;
|
|
height: 40px;
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.met-toast-progress-ring circle {
|
|
fill: none;
|
|
stroke-width: 3;
|
|
stroke-linecap: round;
|
|
}
|
|
|
|
.met-toast-progress-ring .met-progress-ring-bg {
|
|
stroke: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.met-theme-dark .met-toast-progress-ring .met-progress-ring-bg {
|
|
stroke: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.met-toast-progress-ring .met-progress-ring-fill {
|
|
stroke: #3b82f6;
|
|
stroke-dasharray: 100;
|
|
stroke-dashoffset: 100;
|
|
transition: stroke-dashoffset 0.3s ease;
|
|
}
|
|
|
|
/* Toast滑块 */
|
|
.met-toast-slider {
|
|
width: 100%;
|
|
height: 4px;
|
|
background: rgba(0, 0, 0, 0.1);
|
|
border-radius: 2px;
|
|
margin-top: 8px;
|
|
position: relative;
|
|
}
|
|
|
|
.met-theme-dark .met-toast-slider {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.met-toast-slider-fill {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
background: #3b82f6;
|
|
border-radius: 2px;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
/* Toast开关 */
|
|
.met-toast-switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 36px;
|
|
height: 20px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.met-toast-switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.met-toast-switch-slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.1);
|
|
border-radius: 20px;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.met-theme-dark .met-toast-switch-slider {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.met-toast-switch-slider:before {
|
|
content: '';
|
|
position: absolute;
|
|
height: 16px;
|
|
width: 16px;
|
|
left: 2px;
|
|
bottom: 2px;
|
|
background: white;
|
|
border-radius: 50%;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.met-toast-switch input:checked + .met-toast-switch-slider {
|
|
background: #3b82f6;
|
|
}
|
|
|
|
.met-toast-switch input:checked + .met-toast-switch-slider:before {
|
|
transform: translateX(16px);
|
|
}
|
|
|
|
/* Toast复选框 */
|
|
.met-toast-checkbox {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.met-toast-checkbox input {
|
|
width: 16px;
|
|
height: 16px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Toast单选框 */
|
|
.met-toast-radio {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.met-toast-radio input {
|
|
width: 16px;
|
|
height: 16px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Toast输入框 */
|
|
.met-toast-input {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
margin-top: 8px;
|
|
background: transparent;
|
|
color: inherit;
|
|
}
|
|
|
|
.met-theme-dark .met-toast-input {
|
|
border-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.met-toast-input:focus {
|
|
outline: none;
|
|
border-color: #3b82f6;
|
|
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
|
|
}
|
|
|
|
/* Toast文本域 */
|
|
.met-toast-textarea {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
margin-top: 8px;
|
|
background: transparent;
|
|
color: inherit;
|
|
resize: vertical;
|
|
min-height: 80px;
|
|
}
|
|
|
|
.met-theme-dark .met-toast-textarea {
|
|
border-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.met-toast-textarea:focus {
|
|
outline: none;
|
|
border-color: #3b82f6;
|
|
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
|
|
}
|
|
|
|
/* Toast选择框 */
|
|
.met-toast-select {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
margin-top: 8px;
|
|
background: transparent;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.met-theme-dark .met-toast-select {
|
|
border-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.met-toast-select:focus {
|
|
outline: none;
|
|
border-color: #3b82f6;
|
|
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
|
|
}
|
|
|
|
/* Toast下拉菜单 */
|
|
.met-toast-dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.met-toast-dropdown-content {
|
|
display: none;
|
|
position: absolute;
|
|
background: ${theme.bg};
|
|
min-width: 160px;
|
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
|
|
border-radius: 8px;
|
|
z-index: 1;
|
|
padding: 8px 0;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.met-theme-dark .met-toast-dropdown-content {
|
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.met-toast-dropdown:hover .met-toast-dropdown-content {
|
|
display: block;
|
|
}
|
|
|
|
.met-toast-dropdown-item {
|
|
padding: 8px 16px;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.met-toast-dropdown-item:hover {
|
|
background: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.met-theme-dark .met-toast-dropdown-item:hover {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
/* Toast工具提示 */
|
|
.met-toast-tooltip {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.met-toast-tooltip .met-toast-tooltip-text {
|
|
visibility: hidden;
|
|
width: 120px;
|
|
background: ${theme.bg};
|
|
color: ${theme.text};
|
|
text-align: center;
|
|
border-radius: 6px;
|
|
padding: 6px 8px;
|
|
position: absolute;
|
|
z-index: 1;
|
|
bottom: 125%;
|
|
left: 50%;
|
|
margin-left: -60px;
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
font-size: 12px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.met-theme-dark .met-toast-tooltip .met-toast-tooltip-text {
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.met-toast-tooltip:hover .met-toast-tooltip-text {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Toast弹出框 */
|
|
.met-toast-popover {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.met-toast-popover .met-toast-popover-content {
|
|
visibility: hidden;
|
|
background: ${theme.bg};
|
|
color: ${theme.text};
|
|
border-radius: 8px;
|
|
padding: 12px 16px;
|
|
position: absolute;
|
|
z-index: 1;
|
|
bottom: 125%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
min-width: 200px;
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.met-theme-dark .met-toast-popover .met-toast-popover-content {
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.met-toast-popover:hover .met-toast-popover-content {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Toast模态框 */
|
|
.met-toast-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 10000;
|
|
}
|
|
|
|
.met-toast-modal-content {
|
|
background: ${theme.bg};
|
|
color: ${theme.text};
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
max-width: 500px;
|
|
width: 90%;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Toast抽屉 */
|
|
.met-toast-drawer {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: 10000;
|
|
}
|
|
|
|
.met-toast-drawer-content {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 300px;
|
|
height: 100%;
|
|
background: ${theme.bg};
|
|
color: ${theme.text};
|
|
padding: 24px;
|
|
transform: translateX(100%);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.met-toast-drawer.open .met-toast-drawer-content {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
/* Toast通知栏 */
|
|
.met-toast-notification-bar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: ${theme.bg};
|
|
color: ${theme.text};
|
|
padding: 12px 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
z-index: 9999;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Toast状态栏 */
|
|
.met-toast-status-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: ${theme.bg};
|
|
color: ${theme.text};
|
|
padding: 8px 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
z-index: 9999;
|
|
font-size: 12px;
|
|
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
`;
|
|
};
|
|
|
|
/**
|
|
* 注入样式
|
|
* @param {Object} theme - 主题配置
|
|
*/
|
|
export const injectStyles = (theme = THEMES.light) => {
|
|
// 检查是否在浏览器环境
|
|
if (typeof document === 'undefined') return;
|
|
|
|
// 检查是否已注入
|
|
if (styleElement && document.getElementById('metona-toast-styles')) {
|
|
return;
|
|
}
|
|
|
|
// 生成CSS
|
|
const css = generateCSS(theme);
|
|
|
|
// 创建样式元素
|
|
styleElement = document.createElement('style');
|
|
styleElement.id = 'metona-toast-styles';
|
|
styleElement.textContent = css.replace(/\s+/g, ' ');
|
|
|
|
// 添加到文档头
|
|
document.head.appendChild(styleElement);
|
|
|
|
// 缓存样式
|
|
injectedStyles = css;
|
|
};
|
|
|
|
/**
|
|
* 更新样式
|
|
* @param {Object} theme - 新主题配置
|
|
*/
|
|
export const updateStyles = (theme) => {
|
|
if (!styleElement) {
|
|
injectStyles(theme);
|
|
return;
|
|
}
|
|
|
|
const css = generateCSS(theme);
|
|
styleElement.textContent = css.replace(/\s+/g, ' ');
|
|
injectedStyles = css;
|
|
};
|
|
|
|
/**
|
|
* 移除样式
|
|
*/
|
|
export const removeStyles = () => {
|
|
if (styleElement && styleElement.parentNode) {
|
|
styleElement.parentNode.removeChild(styleElement);
|
|
}
|
|
|
|
styleElement = null;
|
|
injectedStyles = null;
|
|
};
|
|
|
|
/**
|
|
* 获取当前样式
|
|
* @returns {string|null} 当前CSS字符串
|
|
*/
|
|
export const getStyles = () => {
|
|
return injectedStyles;
|
|
};
|
|
|
|
/**
|
|
* 检查样式是否已注入
|
|
* @returns {boolean} 是否已注入
|
|
*/
|
|
export const isStylesInjected = () => {
|
|
return !!styleElement && !!document.getElementById('metona-toast-styles');
|
|
};
|
|
|
|
/**
|
|
* 重置样式
|
|
*/
|
|
export const resetStyles = () => {
|
|
removeStyles();
|
|
injectStyles();
|
|
};
|
|
|
|
/**
|
|
* 添加自定义CSS
|
|
* @param {string} css - CSS字符串
|
|
*/
|
|
export const addCustomCSS = (css) => {
|
|
if (!styleElement) {
|
|
injectStyles();
|
|
}
|
|
|
|
const customStyle = document.createElement('style');
|
|
customStyle.id = 'metona-toast-custom-styles';
|
|
customStyle.textContent = css;
|
|
document.head.appendChild(customStyle);
|
|
};
|
|
|
|
/**
|
|
* 移除自定义CSS
|
|
*/
|
|
export const removeCustomCSS = () => {
|
|
const customStyle = document.getElementById('metona-toast-custom-styles');
|
|
if (customStyle && customStyle.parentNode) {
|
|
customStyle.parentNode.removeChild(customStyle);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* 生成主题变量
|
|
* @param {Object} theme - 主题配置
|
|
* @returns {string} CSS变量字符串
|
|
*/
|
|
export const generateThemeVariables = (theme) => {
|
|
return `
|
|
:root {
|
|
--met-theme-bg: ${theme.bg};
|
|
--met-theme-text: ${theme.text};
|
|
--met-theme-border: ${theme.border};
|
|
--met-theme-shadow: ${theme.shadow};
|
|
--met-theme-hover-shadow: ${theme.hoverShadow};
|
|
--met-theme-progress-bg: ${theme.progressBg};
|
|
--met-theme-close-hover-bg: ${theme.closeHoverBg};
|
|
}
|
|
`;
|
|
};
|
|
|
|
/**
|
|
* 应用主题变量
|
|
* @param {Object} theme - 主题配置
|
|
*/
|
|
export const applyThemeVariables = (theme) => {
|
|
const css = generateThemeVariables(theme);
|
|
addCustomCSS(css);
|
|
};
|
|
|
|
/**
|
|
* 清除主题变量
|
|
*/
|
|
export const clearThemeVariables = () => {
|
|
removeCustomCSS();
|
|
};
|
|
|
|
/**
|
|
* 获取系统主题
|
|
* @returns {string} 系统主题
|
|
*/
|
|
export const getSystemTheme = () => {
|
|
if (typeof window === 'undefined') return 'light';
|
|
|
|
return window.matchMedia &&
|
|
window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
? 'dark'
|
|
: 'light';
|
|
};
|
|
|
|
/**
|
|
* 监听系统主题变化
|
|
* @param {Function} callback - 回调函数
|
|
* @returns {Function} 取消监听函数
|
|
*/
|
|
export const watchSystemTheme = (callback) => {
|
|
if (typeof window === 'undefined' || !window.matchMedia) {
|
|
return () => {};
|
|
}
|
|
|
|
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
|
|
|
const handler = (e) => {
|
|
callback(e.matches ? 'dark' : 'light');
|
|
};
|
|
|
|
mediaQuery.addEventListener('change', handler);
|
|
|
|
return () => {
|
|
mediaQuery.removeEventListener('change', handler);
|
|
};
|
|
};
|
|
|
|
/**
|
|
* 自动应用系统主题
|
|
* @returns {Function} 取消监听函数
|
|
*/
|
|
export const autoApplySystemTheme = () => {
|
|
const applyTheme = (theme) => {
|
|
updateStyles(THEMES[theme]);
|
|
applyThemeVariables(THEMES[theme]);
|
|
};
|
|
|
|
// 应用当前系统主题
|
|
applyTheme(getSystemTheme());
|
|
|
|
// 监听系统主题变化
|
|
return watchSystemTheme(applyTheme);
|
|
};
|