feat: new animation color

Nutn0n · web-flow · commit bf98b4e86419 · 2025-05-10T23:17:52.000+07:00
diff --git a/css/animation.css b/css/animation.css
@@ -67,11 +67,13 @@
 @keyframes content-alert {
   0%,
   100% {
-    background-image: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
+    background-image: linear-gradient(180deg, #000 0%, #361200 100%);
+        border: 1px solid #ff691d;
   }
 
   50% {
-    background-image: linear-gradient(180deg, #FFFFFF 0%, #99F2C3 100%);
+    background-image: linear-gradient(180deg, #000 0%, #361200 100%);
+        border: 1px solid #ff691d;
   }
 }
 
@@ -82,11 +84,13 @@
 @keyframes programming-alert {
   0%,
   100% {
-    background-image: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
+    background-image: linear-gradient(180deg, #000 0%, #361200 100%);
+        border: 1px solid #ff691d;
   }
 
   50% {
-    background-image: linear-gradient(180deg, #FFFFFF 0%, #85E5FF 100%);
+    background-image: linear-gradient(180deg, #000 0%, #361200 100%);
+        border: 1px solid #ff691d;
   }
 }
 
@@ -97,11 +101,13 @@
 @keyframes designer-alert {
   0%,
   100% {
-    background-image: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
+    background-image: linear-gradient(180deg, #000 0%, #361200 100%);
+        border: 1px solid #ff691d;
   }
 
   50% {
-    background-image: linear-gradient(180deg, #FFFFFF 0%, #FFF6CF 100%);
+    background-image: linear-gradient(180deg, #000 0%, #361200 100%);
+        border: 1px solid #ff691d;
   }
 }
 
@@ -112,11 +118,13 @@
 @keyframes marketing-alert {
   0%,
   100% {
-    background-image: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
+    background-image: linear-gradient(180deg, #000 0%, #361200 100%);
+        border: 1px solid #ff691d;
   }
 
   50% {
-    background-image: linear-gradient(180deg, #FFFFFF 0%, #FFCCE8 100%);
+    background-image: linear-gradient(180deg, #000 0%, #361200 100%);
+        border: 1px solid #ff691d;
   }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -67,11 +67,13 @@`
`67`	`67`	`@keyframes content-alert {`
`68`	`68`	`0%,`
`69`	`69`	`100% {`
`70`		`- background-image: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);`
	`70`	`+ background-image: linear-gradient(180deg, #000 0%, #361200 100%);`
	`71`	`+ border: 1px solid #ff691d;`
`71`	`72`	`}`
`72`	`73`
`73`	`74`	`50% {`
`74`		`- background-image: linear-gradient(180deg, #FFFFFF 0%, #99F2C3 100%);`
	`75`	`+ background-image: linear-gradient(180deg, #000 0%, #361200 100%);`
	`76`	`+ border: 1px solid #ff691d;`
`75`	`77`	`}`
`76`	`78`	`}`
`77`	`79`
`@@ -82,11 +84,13 @@`
`82`	`84`	`@keyframes programming-alert {`
`83`	`85`	`0%,`
`84`	`86`	`100% {`
`85`		`- background-image: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);`
	`87`	`+ background-image: linear-gradient(180deg, #000 0%, #361200 100%);`
	`88`	`+ border: 1px solid #ff691d;`
`86`	`89`	`}`
`87`	`90`
`88`	`91`	`50% {`
`89`		`- background-image: linear-gradient(180deg, #FFFFFF 0%, #85E5FF 100%);`
	`92`	`+ background-image: linear-gradient(180deg, #000 0%, #361200 100%);`
	`93`	`+ border: 1px solid #ff691d;`
`90`	`94`	`}`
`91`	`95`	`}`
`92`	`96`
`@@ -97,11 +101,13 @@`
`97`	`101`	`@keyframes designer-alert {`
`98`	`102`	`0%,`
`99`	`103`	`100% {`
`100`		`- background-image: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);`
	`104`	`+ background-image: linear-gradient(180deg, #000 0%, #361200 100%);`
	`105`	`+ border: 1px solid #ff691d;`
`101`	`106`	`}`
`102`	`107`
`103`	`108`	`50% {`
`104`		`- background-image: linear-gradient(180deg, #FFFFFF 0%, #FFF6CF 100%);`
	`109`	`+ background-image: linear-gradient(180deg, #000 0%, #361200 100%);`
	`110`	`+ border: 1px solid #ff691d;`
`105`	`111`	`}`
`106`	`112`	`}`
`107`	`113`
`@@ -112,11 +118,13 @@`
`112`	`118`	`@keyframes marketing-alert {`
`113`	`119`	`0%,`
`114`	`120`	`100% {`
`115`		`- background-image: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);`
	`121`	`+ background-image: linear-gradient(180deg, #000 0%, #361200 100%);`
	`122`	`+ border: 1px solid #ff691d;`
`116`	`123`	`}`
`117`	`124`
`118`	`125`	`50% {`
`119`		`- background-image: linear-gradient(180deg, #FFFFFF 0%, #FFCCE8 100%);`
	`126`	`+ background-image: linear-gradient(180deg, #000 0%, #361200 100%);`
	`127`	`+ border: 1px solid #ff691d;`
`120`	`128`	`}`
`121`	`129`	`}`
`122`	`130`