[Noalyss-commit] [noalyss] 10/23: Color : waiting box experiment

[Dany De Bontridder]

sparkyx pushed a commit to branch master
in repository noalyss.

commit bee6f02a629f5ee5621ba9e467d8f44244d144f4
Author: sparkyx <danydb@noalyss.eu>
AuthorDate: Thu Feb 9 19:58:26 2023 +0100

    Color : waiting box experiment
---
 html/css/style-classic7.css | 37 +++++++++++++++++++++++++++++++------
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/html/css/style-classic7.css b/html/css/style-classic7.css
index d09d9b863..f32964387 100644
--- a/html/css/style-classic7.css
+++ b/html/css/style-classic7.css
@@ -265,10 +265,13 @@ table.document th{
 
  @keyframes error_h2 {
      from {
-background-color:  hsl(358,60%,44%);
+        background-color: hsl(0, 100%, 50%);
+        color: hsl(0, 100%, 81%);
 }
      to {
-background-color: hsl(359,100%,44%);
+        background-color: hsl(0, 100%, 81%);
+        color: hsl(0, 100%, 50%);
+         transform: rotate3d(1,1,1,45deg);
 }
  }
  .error {
@@ -3283,7 +3286,7 @@ li.li-active {
      width: 1.5rem;
      height: 1.5rem;
      display: inline-block;
-     animation: turn-color 2.5s linear 0s infinite forwards;
+     animation: turn-color 3.5s linear 0s infinite forwards;
      position: relative;
      left: 0px;
      top: 10px;
@@ -3291,13 +3294,35 @@ li.li-active {
      box-shadow: #a7a7b3 1px 1px 40px;
      border-radius: 5px;
  }
+ .loading_msg:nth-child(2) {
+    background:orangered;
+     animation: turn-color2 3.5s linear 0s infinite forwards;
+ }
+ .loading_msg:nth-child(3) {
+     background:red;
+     animation: turn-color3 3.5s linear 0s infinite forwards;
+ }
+ .loading_msg:nth-child(4) {
+     background:orangered;
+     animation: turn-color2 3.5s linear 0s infinite forwards;
+ }
 
-
-  @keyframes turn-color{
+ @keyframes turn-color{
      0% { transform : rotate(0deg);opacity:0.1;transform:scale( 
0.3);background-color:navy}
-     50% { transform : rotate(90deg);opacity:0.9;; }
+     50% { transform : rotate(90deg);opacity:0.9; background-color:navy }
      100% { transform : rotate(180deg);opacity:0.1;transform:scale( 1.3)}
  }
+ @keyframes turn-color2{
+     0% { transform : rotate(0deg);opacity:0.1;transform:scale( 
0.3);background-color:orangered}
+     50% { transform : rotate(90deg);opacity:0.9; background-color:orange }
+     100% { transform : rotate(180deg);opacity:0.1;transform:scale( 1.3)}
+ }
+ @keyframes turn-color3{
+     0% { transform : rotate(0deg);opacity:0.1;transform:scale( 
0.3);background-color:darkgreen;}
+     50% { transform : rotate(90deg);opacity:0.9; background-color:lightgreen; 
}
+     100% { transform : rotate(180deg);opacity:0.1;transform:scale( 1.2)}
+ }
+
 
  /**
   * style in TEXTAREA wysiwyg must be encapsuled in div with the class 
nicEdit-main