refactor(frontend): replace toast system with zibll notyf

2026-08-18 02:38:43 +08:00
1 parent fb11a7ed0c
commit 86614c4905
@@ -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);
+  }
+}