refactor(frontend): replace toast system with zibll notyf
This commit is contained in:
kate522 committed
1 parent
fb11a7ed0c
commit
86614c4905
33 files changed
+603
-802
No files matched your search
@@ -3556,105 +3556,17 @@ html.dark .aksrt-card-submenu__title {
|
||||
/**
|
||||
* AKSRT Enhancements — 全局 UI 增强
|
||||
*
|
||||
* 包含：Toast 通知、骨架屏、悬停动效、暗色过渡、滚动感知
|
||||
* 包含：骨架屏、悬停动效、暗色过渡、滚动感知
|
||||
* 所有选择器使用 aksrt- 前缀避免冲突
|
||||
*/
|
||||
|
||||
/* ============================================================
|
||||
* 1. Toast 通知系统
|
||||
* ============================================================ */
|
||||
.aksrt-toast-container {
|
||||
position: fixed;
|
||||
bottom: 80px;
|
||||
right: 16px;
|
||||
max-width: 360px;
|
||||
z-index: 10000;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 8px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.aksrt-toast {
|
||||
pointer-events: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 16px;
|
||||
border-radius: var(--main-radius, 8px);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
|
||||
backdrop-filter: saturate(5) blur(20px);
|
||||
-webkit-backdrop-filter: saturate(5) blur(20px);
|
||||
transform: translateX(120%);
|
||||
opacity: 0;
|
||||
animation: aksrt-toast-in 0.35s cubic-bezier(0.35, 0.71, 0.46, 1.08) forwards;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s, opacity 0.3s;
|
||||
}
|
||||
|
||||
.aksrt-toast.is-dismissing {
|
||||
transform: translateX(120%);
|
||||
opacity: 0;
|
||||
transition: transform 0.3s ease-in, opacity 0.3s ease-in;
|
||||
}
|
||||
|
||||
.aksrt-toast__icon {
|
||||
font-size: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.aksrt-toast__text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Toast 类型 — 对齐 zibll 纯色 */
|
||||
.aksrt-toast--success {
|
||||
background: rgba(16, 185, 129, 0.9);
|
||||
}
|
||||
|
||||
.aksrt-toast--info {
|
||||
background: rgba(59, 130, 246, 0.9);
|
||||
}
|
||||
|
||||
.aksrt-toast--warning {
|
||||
background: rgba(245, 158, 11, 0.9);
|
||||
}
|
||||
|
||||
.aksrt-toast--danger,
|
||||
.aksrt-toast--error {
|
||||
background: rgba(239, 68, 68, 0.9);
|
||||
}
|
||||
|
||||
.aksrt-toast--loading {
|
||||
background: rgba(107, 114, 128, 0.9);
|
||||
}
|
||||
|
||||
.aksrt-toast--loading .aksrt-toast__icon {
|
||||
animation: aksrt-spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes aksrt-toast-in {
|
||||
from {
|
||||
transform: translateX(120%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes aksrt-spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 2. 骨架屏加载动画
|
||||
* 1. 骨架屏加载动画
|
||||
* ============================================================ */
|
||||
.aksrt-skeleton {
|
||||
background: linear-gradient(
|
||||
@@ -3726,7 +3638,7 @@ html.dark .aksrt-card-submenu__title {
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 3. 悬停交互动效
|
||||
* 2. 悬停交互动效
|
||||
* ============================================================ */
|
||||
|
||||
/* 卡片放大 */
|
||||
@@ -3805,7 +3717,7 @@ html.dark .aksrt-card-submenu__title {
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 4. 暗色模式过渡 (View Transitions API)
|
||||
* 3. 暗色模式过渡 (View Transitions API)
|
||||
* ============================================================ */
|
||||
::view-transition-old(root),
|
||||
::view-transition-new(root) {
|
||||
@@ -3839,14 +3751,10 @@ html.dark .aksrt-card-submenu__title {
|
||||
--aksrt-blur-bg: var(--surface-1);
|
||||
}
|
||||
|
||||
.aksrt-toast {
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 5. 滚动方向感知
|
||||
* 4. 滚动方向感知
|
||||
* ============================================================ */
|
||||
|
||||
/* 向下滚动时隐藏导航栏 */
|
||||
@@ -5231,12 +5139,6 @@ html.dark .aksrt-lang-switch__dropdown {
|
||||
* 响应式
|
||||
* ============================================================ */
|
||||
@media (max-width: 640px) {
|
||||
.aksrt-toast-container {
|
||||
right: 8px;
|
||||
left: 8px;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.aksrt-lightbox__nav {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
@@ -5287,10 +5189,6 @@ html.dark .aksrt-lang-switch__dropdown {
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
.aksrt-toast {
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
[data-aksrt-animate] {
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
@@ -5449,15 +5347,6 @@ input:focus, textarea:focus, select:focus,
|
||||
transform-origin: top;
|
||||
}
|
||||
|
||||
/* --- Toast 通知动效 --- */
|
||||
.aksrt-toast {
|
||||
animation: aksrtToastIn 0.35s var(--ease-out) forwards;
|
||||
}
|
||||
|
||||
.aksrt-toast--out {
|
||||
animation: aksrtToastOut 0.3s var(--ease) forwards;
|
||||
}
|
||||
|
||||
/* --- 骨架屏动效 --- */
|
||||
.aksrt-skeleton {
|
||||
animation: aksrtSkeletonShimmer 1.5s infinite linear;
|
||||
|
||||
Reference in new issue
Block a user