Ancora qualche fix cambio colore/animazione

This commit is contained in:
Samuele Locatelli
2023-05-19 12:11:07 +02:00
parent cba65097ee
commit 4c0e96e89f
3 changed files with 19 additions and 6 deletions
+8 -2
View File
@@ -61,10 +61,16 @@
color: white;
}
@keyframes shrink01 {
from {
0% {
width: 100%;
background-image: linear-gradient(to bottom, #91d737, rgba(145, 215, 55, 0.5));
}
to {
99% {
width: 95%;
background-color: #696969;
background-image: linear-gradient(to bottom, #91d737, rgba(145, 215, 55, 0.5));
}
100% {
width: 95%;
background-color: #696969;
}
+10 -3
View File
@@ -1,4 +1,4 @@
@animTime:0.6s;
@animTime: 0.6s;
@w01: 100%;
@w02: 95%;
@w03: 90%;
@@ -56,11 +56,18 @@
}
@keyframes shrink01 {
from {
0% {
width: @w01;
background-image: linear-gradient(to bottom, rgba(145,215,55,1), rgba(145,215,55,50%));
}
to {
99% {
width: @w02;
background-color: #696969;
background-image: linear-gradient(to bottom, rgba(145,215,55,100%), rgba(145,215,55,50%));
}
100% {
width: @w02;
background-color: #696969;
}
+1 -1
View File
@@ -1 +1 @@
.cardOrders{width:100%;border-radius:18px;padding:1rem 4rem .5rem 4rem;box-shadow:rgba(0,0,0,.45) 0 20px 22px 3px;margin-top:.5rem;margin-bottom:1rem;position:relative;}.cardOrders01{width:100%;border-radius:18px;padding:1rem 4rem .5rem 4rem;box-shadow:rgba(0,0,0,.45) 0 20px 22px 3px;margin-top:.5rem;margin-bottom:1rem;position:relative;background-color:#fff;background-image:linear-gradient(to bottom,#91d737,rgba(145,215,55,.5));z-index:10;}.cardOrders02{width:100%;border-radius:18px;padding:1rem 4rem .5rem 4rem;box-shadow:rgba(0,0,0,.45) 0 20px 22px 3px;margin-top:.5rem;margin-bottom:1rem;position:relative;background-color:#fff;background-image:linear-gradient(to bottom,#f5730f,rgba(245,115,15,.5));z-index:20;}.cardOrders03{width:100%;border-radius:18px;padding:1rem 4rem .5rem 4rem;box-shadow:rgba(0,0,0,.45) 0 20px 22px 3px;margin-top:.5rem;margin-bottom:1rem;position:relative;background-color:#fff;background-image:linear-gradient(to bottom,#23f587,rgba(35,245,135,.5));z-index:30;}.wRed01{width:95%;margin-bottom:-1.5rem;animation-name:shrink01;animation-duration:.6s;background-color:#696969;background-image:none;}.wRed02{width:90%;margin-bottom:-1.5rem;animation-name:shrink02;animation-duration:.6s;background-color:#333;background-image:none;color:#fff;}@keyframes shrink01{from{width:100%;}to{width:95%;background-color:#696969;}}@keyframes shrink02{from{width:95%;background-color:#696969;}to{width:90%;color:#fff;background-color:#333;}}
.cardOrders{width:100%;border-radius:18px;padding:1rem 4rem .5rem 4rem;box-shadow:rgba(0,0,0,.45) 0 20px 22px 3px;margin-top:.5rem;margin-bottom:1rem;position:relative;}.cardOrders01{width:100%;border-radius:18px;padding:1rem 4rem .5rem 4rem;box-shadow:rgba(0,0,0,.45) 0 20px 22px 3px;margin-top:.5rem;margin-bottom:1rem;position:relative;background-color:#fff;background-image:linear-gradient(to bottom,#91d737,rgba(145,215,55,.5));z-index:10;}.cardOrders02{width:100%;border-radius:18px;padding:1rem 4rem .5rem 4rem;box-shadow:rgba(0,0,0,.45) 0 20px 22px 3px;margin-top:.5rem;margin-bottom:1rem;position:relative;background-color:#fff;background-image:linear-gradient(to bottom,#f5730f,rgba(245,115,15,.5));z-index:20;}.cardOrders03{width:100%;border-radius:18px;padding:1rem 4rem .5rem 4rem;box-shadow:rgba(0,0,0,.45) 0 20px 22px 3px;margin-top:.5rem;margin-bottom:1rem;position:relative;background-color:#fff;background-image:linear-gradient(to bottom,#23f587,rgba(35,245,135,.5));z-index:30;}.wRed01{width:95%;margin-bottom:-1.5rem;animation-name:shrink01;animation-duration:.6s;background-color:#696969;background-image:none;}.wRed02{width:90%;margin-bottom:-1.5rem;animation-name:shrink02;animation-duration:.6s;background-color:#333;background-image:none;color:#fff;}@keyframes shrink01{0%{width:100%;background-image:linear-gradient(to bottom,#91d737,rgba(145,215,55,.5));}99%{width:95%;background-color:#696969;background-image:linear-gradient(to bottom,#91d737,rgba(145,215,55,.5));}100%{width:95%;background-color:#696969;}}@keyframes shrink02{from{width:95%;background-color:#696969;}to{width:90%;color:#fff;background-color:#333;}}