为警告提示(譬如更改未保存时的设备重启页面)增加一个背景颜色呼吸显示的动画效果,并同步变换字体颜色,以提升醒目程度

jerrykuku · Mar 26, 2023 · 796019b · 796019b · SpeedPartner · Apr 3, 2023
1 parent b4e8e9b
commit 796019b
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 6 deletions.
diff --git a/htdocs/luci-static/argon/css/cascade.css b/htdocs/luci-static/argon/css/cascade.css
@@ -1925,10 +1925,26 @@ div > .table > .tbody > .tr:nth-of-type(2n) {
   background-color: var(--danger) !important;
   color: #fff !important;
 }
+/* Define the warning background-color breathe display animation */
+@keyframes warning-background-color-breathe {
+  0%{
+    color: #fff;
+    background-color: #fb6340;
+  }
+  50%{
+    color: #32325d;
+    background-color: #fff;
+  }
+  100%{
+    color: #fff;
+    background-color: #fb6340;
+  }
+}
 .warning {
-  background-color: #fb6340 !important;
-  background-color: var(--warning) !important;
-  color: #fff !important;
+  background-color: #fb6340;
+  background-color: var(--warning);
+  color: #fff;
+  animation: warning-background-color-breathe 1.5s ease-in-out infinite !important;
 }
 .notice {
   background-color: #5e72e4 !important;

diff --git a/htdocs/luci-static/argon/css/dark.css b/htdocs/luci-static/argon/css/dark.css
@@ -534,6 +534,25 @@ td.cbi-value-field var {
   background-color: darkolivegreen !important;
 }
 
+/* Define the warning background-color breathe display animation (dark mode) */
+@keyframes warning-background-color-breathe-dark {
+  0%{
+    color: #fff;
+    background-color: darkorange;
+  }
+  50%{
+    color: #ccc;
+    background-color: #333333;
+  }
+  100%{
+    color: #fff;
+    background-color: darkorange;
+  }
+}
+.warning {
+  animation: warning-background-color-breathe-dark 1.5s ease-in-out infinite !important;
+}
+
 .notice {
   background-color: #483d8b !important;
   background-color: var(--dark-primary) !important;

diff --git a/htdocs/luci-static/argon/less/cascade.less b/htdocs/luci-static/argon/less/cascade.less
@@ -2331,10 +2331,26 @@ div>.table>.tbody>.tr:nth-of-type(2n) {
     color: #fff !important;
 }
 
+/* Define the warning background-color breathe display animation */
+@keyframes warning-background-color-breathe {
+    0%{
+        color: #fff;
+        background-color: #fb6340;
+    }
+    50%{
+        color: #32325d;
+        background-color: #fff;
+    }
+    100%{
+        color: #fff;
+        background-color: #fb6340;
+    }
+}
 .warning {
-    background-color: #fb6340 !important;
-    background-color: var(--warning) !important;
-    color: #fff !important;
+    background-color: #fb6340;
+    background-color: var(--warning);
+    color: #fff;
+    animation: warning-background-color-breathe 1.5s ease-in-out infinite !important;
 }
 
 .notice {

diff --git a/htdocs/luci-static/argon/less/dark.less b/htdocs/luci-static/argon/less/dark.less
@@ -605,6 +605,25 @@ td.cbi-value-field var {
     background-color: darkolivegreen !important;
 }
 
+/* Define the warning background-color breathe display animation (dark mode) */
+@keyframes warning-background-color-breathe-dark {
+    0%{
+        color: #fff;
+        background-color: darkorange;
+    }
+    50%{
+        color: #ccc;
+        background-color: #333333;
+    }
+    100%{
+        color: #fff;
+        background-color: darkorange;
+    }
+}
+.warning {
+    animation: warning-background-color-breathe-dark 1.5s ease-in-out infinite !important;
+}
+
 .notice {
     background-color: #483d8b !important;
     background-color: var(--dark-primary) !important;