From 4c0e96e89f8ca655dfc48a044f7cc74a08b346dc Mon Sep 17 00:00:00 2001 From: Samuele Locatelli Date: Fri, 19 May 2023 12:11:07 +0200 Subject: [PATCH] Ancora qualche fix cambio colore/animazione --- WebDoorCreator.UI/Pages/TestAnim.razor.css | 10 ++++++++-- WebDoorCreator.UI/Pages/TestAnim.razor.less | 13 ++++++++++--- WebDoorCreator.UI/Pages/TestAnim.razor.min.css | 2 +- 3 files changed, 19 insertions(+), 6 deletions(-) diff --git a/WebDoorCreator.UI/Pages/TestAnim.razor.css b/WebDoorCreator.UI/Pages/TestAnim.razor.css index c292c5d..e7222da 100644 --- a/WebDoorCreator.UI/Pages/TestAnim.razor.css +++ b/WebDoorCreator.UI/Pages/TestAnim.razor.css @@ -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; } diff --git a/WebDoorCreator.UI/Pages/TestAnim.razor.less b/WebDoorCreator.UI/Pages/TestAnim.razor.less index 952f29b..24d8494 100644 --- a/WebDoorCreator.UI/Pages/TestAnim.razor.less +++ b/WebDoorCreator.UI/Pages/TestAnim.razor.less @@ -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; } diff --git a/WebDoorCreator.UI/Pages/TestAnim.razor.min.css b/WebDoorCreator.UI/Pages/TestAnim.razor.min.css index 7ca2251..03dea95 100644 --- a/WebDoorCreator.UI/Pages/TestAnim.razor.min.css +++ b/WebDoorCreator.UI/Pages/TestAnim.razor.min.css @@ -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;}} \ No newline at end of file +.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;}} \ No newline at end of file