fix grafici vari

This commit is contained in:
zaccaria.majid
2023-01-18 13:10:03 +01:00
parent eae9f8f287
commit 18d48ecaae
4 changed files with 21 additions and 14 deletions
+2 -2
View File
@@ -28,12 +28,12 @@ namespace GPW.CORE.Smart.Components
protected void showMenu()
{
hideMenuCSS = "visible";
hideMenuCSS = "visible; height: 40%";
hideButtonCSS = "hidden";
}
protected void hideMenu()
{
hideMenuCSS = "hidden";
hideMenuCSS = "hidden; height: 0%;";
hideButtonCSS = "visible";
}
}
@@ -88,21 +88,22 @@ body:after {
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(to right, #fc466b, #3f5efb);
background: linear-gradient(to right, #606c88, #3f4c6b);
padding: 10px 20px;
border-radius: 28px;
border-radius: 1.5rem 1.5rem 0 0;
border: none;
box-shadow: 0 2px 40px -10px #FF00FF;
color: #fff;
font-size: 16px;
white-space: nowrap;
position: fixed;
bottom: 1rem;
bottom: 0rem;
left: 50%;
transform: translate3d(var(--x), var(--y), var(--z));
cursor: pointer;
z-index: 105;
transition: 0.15s cubic-bezier(0.33, 1, 0.53, 1);
/*transition: .15s cubic-bezier(.33,1,.53,1);*/
/*transition: visibility 200ms ease-in-out 400ms, opacity 500ms;*/
}
.menu__button[hidden] {
--y: 200%;
@@ -143,7 +144,9 @@ body:after {
bottom: 0;
z-index: 105;
transform: translate3d(var(--x), var(--y), var(--z));
transition: visibility 200ms linear 300ms, opacity 500ms;
height: 0%;
/*transition: height 200ms ease-in-out 400ms, opacity 700ms;*/
transition: height 0.3s cubic-bezier(0.54, 0.57, 0.36, 0.98) 0.2s;
}
.menu__body[hidden] {
--y: 150%;
+10 -6
View File
@@ -97,21 +97,23 @@ body {
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(to right, #fc466b, #3f5efb);
background: linear-gradient(to right, #606c88, #3f4c6b);
padding: 10px 20px;
border-radius: 28px;
border-radius: 1.5rem 1.5rem 0 0;
border: none;
box-shadow: 0 2px 40px -10px #FF00FF;
color: #fff;
font-size: 16px;
white-space: nowrap;
position: fixed;
bottom: 1rem;
bottom: 0rem;
left: 50%;
transform: translate3d(var(--x), var(--y), var(--z));
cursor: pointer;
z-index: 105;
transition: .15s cubic-bezier(.33,1,.53,1);
/*transition: .15s cubic-bezier(.33,1,.53,1);*/
/*transition: visibility 200ms ease-in-out 400ms, opacity 500ms;*/
&[hidden] {
--y: 200%;
@@ -158,7 +160,9 @@ body {
z-index: 105;
transform: translate3d(var(--x), var(--y), var(--z));
//transition: .2s cubic-bezier(.33,1,.53,1);
transition: visibility 200ms linear 300ms, opacity 500ms;
height: 0%;
/*transition: height 200ms ease-in-out 400ms, opacity 700ms;*/
transition: height 0.3s cubic-bezier(0.54, 0.57, 0.36, 0.98) 0.2s;
&[hidden] {
--y: 150%;
@@ -274,4 +278,4 @@ body {
font-weight: bold;
text-decoration: none;
}
}
}
+1 -1
View File
@@ -1 +1 @@
:root{--dark:#333;--light:#fff;--neutral:#f6f6f6;--neutral-dark:#d1d1d1;--color:#5607d7;--color-light:#941ed2;--color-dark:#2719cd;--font-stack:'Josefin Sans','Montserrat','sans-serif';}body{display:flex;align-items:center;justify-content:center;background:url('data:image/svg+xml,%3Csvg width="300" height="300" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="%239C92AC" fill-opacity="0.1" fill-rule="evenodd"/%3E%3C/svg%3E') fixed;font-family:var(--font-stack);}body:before{content:'';width:400px;height:400px;background:linear-gradient(135deg,#ffa500,#ff4500);border-radius:50%;position:fixed;top:-50px;left:10vw;z-index:-1;}body:after{content:'';width:300px;height:300px;background:linear-gradient(135deg,#0ff,#00f);border-radius:50%;position:fixed;bottom:-50px;right:-5vw;z-index:-1;}.menu__button{--x:-50%;--y:0;--z:0;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to right,#fc466b,#3f5efb);padding:10px 20px;border-radius:28px;border:0;box-shadow:0 2px 40px -10px #f0f;color:#fff;font-size:16px;white-space:nowrap;position:fixed;bottom:1rem;left:50%;transform:translate3d(var(--x),var(--y),var(--z));cursor:pointer;z-index:105;transition:.15s cubic-bezier(.33,1,.53,1);}.menu__button[hidden]{--y:200%;}.menu__button div{display:flex;align-items:center;width:12px;height:12px;margin-right:20px;}.menu__button div div{display:table;height:1px;background:var(--light);box-shadow:0 4px 0 var(--light),0 -4px 0 var(--light);}.menu__overlay{width:100%;height:100%;background:rgba(0,0,0,.1);position:absolute;z-index:100;}.menu__body{--x:0;--y:0;--z:0;display:block;width:100%;background-color:#fff;padding-bottom:15px;border-top-left-radius:20px;border-top-right-radius:20px;box-shadow:0 -9px 50px -30px black;font-family:'Montserrat',sans-serif;position:absolute;bottom:0;z-index:105;transform:translate3d(var(--x),var(--y),var(--z));transition:visibility 200ms linear 300ms,opacity 500ms;}.menu__body[hidden]{--y:150%;}.menu__body>*:not(:last-child){border-bottom:2px solid var(--neutral);}.menu__header{display:flex;justify-content:space-between;padding:15px 20px;}.menu__header label div{width:15px;height:15px;border:2px solid var(--dark);border-radius:50%;position:relative;transform:rotate(5.5rad);}.menu__header label div:after{content:'';width:2px;height:10px;background:var(--dark);position:absolute;top:100%;left:50%;transform:translateX(-50%);}.menu__header p{font-size:18px;font-weight:bold;vertical-align:center;white-space:nowrap;}.menu__header h3{font-weight:normal;}.menu__header button{display:flex;align-items:center;justify-content:center;width:25px;height:25px;background:var(--neutral-dark);border-radius:50%;cursor:pointer;}.menu__header button div{width:15px;height:3px;background:var(--light);position:relative;transform:rotate(5.5rad);}.menu__header button div:before{content:'';width:3px;height:15px;background:var(--light);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}.menu__links{display:flex;padding:10px 15px;font-weight:bold;overflow-x:auto;}.menu__links a{flex:1 1 1px;padding:10px 8px;color:var(--dark);text-decoration:none;white-space:nowrap;}.menu__contact{display:flex;padding:8px;}.menu__contact svg{width:100%;fill:var(--color);}.menu__contact a{flex:1 1 30%;padding:1.5rem;margin:5px;border-radius:8px;background:#d1d1d1;color:var(--color);text-align:center;font-size:14px;font-weight:bold;text-decoration:none;}
:root{--dark:#333;--light:#fff;--neutral:#f6f6f6;--neutral-dark:#d1d1d1;--color:#5607d7;--color-light:#941ed2;--color-dark:#2719cd;--font-stack:'Josefin Sans','Montserrat','sans-serif';}body{display:flex;align-items:center;justify-content:center;background:url('data:image/svg+xml,%3Csvg width="300" height="300" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="%239C92AC" fill-opacity="0.1" fill-rule="evenodd"/%3E%3C/svg%3E') fixed;font-family:var(--font-stack);}body:before{content:'';width:400px;height:400px;background:linear-gradient(135deg,#ffa500,#ff4500);border-radius:50%;position:fixed;top:-50px;left:10vw;z-index:-1;}body:after{content:'';width:300px;height:300px;background:linear-gradient(135deg,#0ff,#00f);border-radius:50%;position:fixed;bottom:-50px;right:-5vw;z-index:-1;}.menu__button{--x:-50%;--y:0;--z:0;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to right,#606c88,#3f4c6b);padding:10px 20px;border-radius:1.5rem 1.5rem 0 0;border:0;box-shadow:0 2px 40px -10px #f0f;color:#fff;font-size:16px;white-space:nowrap;position:fixed;bottom:0;left:50%;transform:translate3d(var(--x),var(--y),var(--z));cursor:pointer;z-index:105;}.menu__button[hidden]{--y:200%;}.menu__button div{display:flex;align-items:center;width:12px;height:12px;margin-right:20px;}.menu__button div div{display:table;height:1px;background:var(--light);box-shadow:0 4px 0 var(--light),0 -4px 0 var(--light);}.menu__overlay{width:100%;height:100%;background:rgba(0,0,0,.1);position:absolute;z-index:100;}.menu__body{--x:0;--y:0;--z:0;display:block;width:100%;background-color:#fff;padding-bottom:15px;border-top-left-radius:20px;border-top-right-radius:20px;box-shadow:0 -9px 50px -30px black;font-family:'Montserrat',sans-serif;position:absolute;bottom:0;z-index:105;transform:translate3d(var(--x),var(--y),var(--z));height:0%;transition:height .3s cubic-bezier(.54,.57,.36,.98) .2s;}.menu__body[hidden]{--y:150%;}.menu__body>*:not(:last-child){border-bottom:2px solid var(--neutral);}.menu__header{display:flex;justify-content:space-between;padding:15px 20px;}.menu__header label div{width:15px;height:15px;border:2px solid var(--dark);border-radius:50%;position:relative;transform:rotate(5.5rad);}.menu__header label div:after{content:'';width:2px;height:10px;background:var(--dark);position:absolute;top:100%;left:50%;transform:translateX(-50%);}.menu__header p{font-size:18px;font-weight:bold;vertical-align:center;white-space:nowrap;}.menu__header h3{font-weight:normal;}.menu__header button{display:flex;align-items:center;justify-content:center;width:25px;height:25px;background:var(--neutral-dark);border-radius:50%;cursor:pointer;}.menu__header button div{width:15px;height:3px;background:var(--light);position:relative;transform:rotate(5.5rad);}.menu__header button div:before{content:'';width:3px;height:15px;background:var(--light);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}.menu__links{display:flex;padding:10px 15px;font-weight:bold;overflow-x:auto;}.menu__links a{flex:1 1 1px;padding:10px 8px;color:var(--dark);text-decoration:none;white-space:nowrap;}.menu__contact{display:flex;padding:8px;}.menu__contact svg{width:100%;fill:var(--color);}.menu__contact a{flex:1 1 30%;padding:1.5rem;margin:5px;border-radius:8px;background:#d1d1d1;color:var(--color);text-align:center;font-size:14px;font-weight:bold;text-decoration:none;}