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;
|
||||
|
||||
@@ -1,87 +1,10 @@
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
|
||||
.aksrt-modal-auth__error.is-success {
|
||||
background: rgba(16, 185, 129, 0.08);
|
||||
border-color: rgba(16, 185, 129, 0.22);
|
||||
@@ -103,24 +26,13 @@
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@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(
|
||||
@@ -192,7 +104,7 @@
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 3. 悬停交互动效
|
||||
* 2. 悬停交互动效
|
||||
* ============================================================ */
|
||||
|
||||
/* 卡片放大 */
|
||||
@@ -271,7 +183,7 @@
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 4. 暗色模式过渡 (View Transitions API)
|
||||
* 3. 暗色模式过渡 (View Transitions API)
|
||||
* ============================================================ */
|
||||
::view-transition-old(root),
|
||||
::view-transition-new(root) {
|
||||
@@ -307,14 +219,10 @@ body.dark-theme::view-transition-new(root) {
|
||||
--aksrt-blur-bg: var(--surface-1);
|
||||
}
|
||||
|
||||
.aksrt-toast {
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 5. 滚动方向感知
|
||||
* 4. 滚动方向感知
|
||||
* ============================================================ */
|
||||
|
||||
/* 向下滚动时隐藏导航栏 */
|
||||
@@ -348,7 +256,7 @@ body.aksrt-body-scroll .aksrt-show-on-scroll {
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 6. 图片灯箱
|
||||
* 5. 图片灯箱
|
||||
* ============================================================ */
|
||||
.aksrt-lightbox {
|
||||
position: fixed;
|
||||
|
||||
@@ -3,12 +3,6 @@
|
||||
* 响应式
|
||||
* ============================================================ */
|
||||
@media (max-width: 640px) {
|
||||
.aksrt-toast-container {
|
||||
right: 8px;
|
||||
left: 8px;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.aksrt-lightbox__nav {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
@@ -59,10 +53,6 @@
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
.aksrt-toast {
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
[data-aksrt-animate] {
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
@@ -230,15 +220,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;
|
||||
|
||||
@@ -0,0 +1,142 @@
|
||||
/**
|
||||
* Zibll-compatible frontend notifications.
|
||||
*
|
||||
* @package AKSRT
|
||||
*/
|
||||
|
||||
.notyn {
|
||||
position: fixed;
|
||||
bottom: 6em;
|
||||
right: 0;
|
||||
max-width: 320px;
|
||||
z-index: 10000000;
|
||||
}
|
||||
|
||||
.notyf {
|
||||
margin-bottom: 0.6em;
|
||||
color: #fff;
|
||||
float: right;
|
||||
min-width: 200px;
|
||||
padding: 1em 3em 1em 3.4em;
|
||||
box-shadow: -3px 3px 6px rgba(0, 0, 0, 0.1);
|
||||
transform: translateX(1.5em);
|
||||
transition: 0.3s;
|
||||
-webkit-backdrop-filter: saturate(5) blur(20px);
|
||||
backdrop-filter: saturate(5) blur(20px);
|
||||
-webkit-animation: notyf 0.4s cubic-bezier(0.35, 0.71, 0.46, 1.08);
|
||||
animation: notyf 0.4s cubic-bezier(0.35, 0.71, 0.46, 1.08);
|
||||
}
|
||||
|
||||
.notyn-out .notyf {
|
||||
transform: translateX(110%);
|
||||
opacity: 0.5;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes notyf {
|
||||
0% {
|
||||
transform: translateX(110%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(1.5em);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes notyf {
|
||||
0% {
|
||||
transform: translateX(110%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(1.5em);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.notyf::before {
|
||||
font: normal normal normal 16px/1 FontAwesome;
|
||||
left: 0.8em;
|
||||
font-size: 1.5em;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.notyf.success {
|
||||
background: linear-gradient(90deg, rgba(15, 147, 249, 0.7), rgba(61, 189, 249, 0.8));
|
||||
}
|
||||
|
||||
.notyf.success::before {
|
||||
content: '\f058';
|
||||
}
|
||||
|
||||
.notyf.info {
|
||||
background: linear-gradient(90deg, rgba(58, 162, 54, 0.8), rgba(89, 247, 131, 0.8));
|
||||
}
|
||||
|
||||
.notyf.info::before {
|
||||
content: '\f0a1';
|
||||
}
|
||||
|
||||
.notyf.warning,
|
||||
.notyf.load {
|
||||
background: linear-gradient(90deg, rgba(253, 170, 71, 0.7), rgba(247, 154, 13, 0.8));
|
||||
}
|
||||
|
||||
.notyf.warning::before {
|
||||
content: '\f05a';
|
||||
}
|
||||
|
||||
.notyf.danger {
|
||||
background: linear-gradient(90deg, rgba(253, 69, 28, 0.7), rgba(251, 110, 75, 0.8));
|
||||
}
|
||||
|
||||
.notyf.danger::before {
|
||||
content: '\f057';
|
||||
}
|
||||
|
||||
.notyf .fa-close {
|
||||
float: right;
|
||||
padding: 0.6em;
|
||||
margin: -0.4em;
|
||||
}
|
||||
|
||||
.notyf.load::before {
|
||||
content: '';
|
||||
width: 0.7em;
|
||||
height: 0.7em;
|
||||
display: inline-block;
|
||||
border: 0.08em solid transparent;
|
||||
border-width: calc(1px + 0.03em);
|
||||
border-radius: 50%;
|
||||
border-top-color: var(--this-color);
|
||||
border-bottom-color: var(--this-color);
|
||||
-webkit-animation: huan-rotate 1s cubic-bezier(0.7, 0.1, 0.31, 0.9) infinite;
|
||||
animation: huan-rotate 1s cubic-bezier(0.7, 0.1, 0.31, 0.9) infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes huan-rotate {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes huan-rotate {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@@ -13,7 +13,6 @@
|
||||
.footer-tabbar,
|
||||
.float-right,
|
||||
.float-btn,
|
||||
.aksrt-toast-container,
|
||||
.resource-mobile-fab,
|
||||
.resource-mobile-download-bar,
|
||||
.sidebar,
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
* 通过 class-aksrt-scripts.php 在 is_page_template('templates/pages/page-profile.php') 时加载。
|
||||
*
|
||||
* 覆盖：
|
||||
* - Toast 通知容器（仅 profile 页）
|
||||
* - 公开个人主页头
|
||||
* - 仪表盘标签 + 数据表
|
||||
* - 个人资料编辑表单 + 联系方式行
|
||||
@@ -14,46 +13,6 @@
|
||||
* - 密码强度条
|
||||
*/
|
||||
|
||||
/* ==================== Toast（profile 页专用） ==================== */
|
||||
#toast-container {
|
||||
position: fixed;
|
||||
bottom: calc(24px + env(safe-area-inset-bottom, 0px));
|
||||
right: calc(24px + env(safe-area-inset-right, 0px));
|
||||
z-index: 99999;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 10px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.toast-item {
|
||||
pointer-events: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 20px;
|
||||
background: rgba(0, 0, 0, 0.78);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
border-radius: 100px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
||||
animation: toastIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.toast-item.fade-out {
|
||||
animation: toastOut 0.4s ease forwards;
|
||||
}
|
||||
@keyframes toastIn {
|
||||
0% { opacity: 0; transform: translateY(16px) scale(0.92); }
|
||||
100% { opacity: 1; transform: translateY(0) scale(1); }
|
||||
}
|
||||
@keyframes toastOut {
|
||||
0% { opacity: 1; transform: translateY(0) scale(1); }
|
||||
100% { opacity: 0; transform: translateY(8px) scale(0.95); }
|
||||
}
|
||||
|
||||
/* 用户主页 / 用户中心统一使用站点内容宽度，避免旧 page/dashboard 容器收窄。
|
||||
* main 自身同时带 content-shell + aksrt-profile，不能写成 .aksrt-profile .content-shell。 */
|
||||
.aksrt-profile.content-shell,
|
||||
|
||||
Reference in new issue
Block a user