136 lines
2.8 KiB
CSS
136 lines
2.8 KiB
CSS
/*Detail Floating button*/
|
|
|
|
/*>>>>>>>>>>>>>>>>>>> Floating Button */
|
|
|
|
.PercentyFloatingButtonRoot {
|
|
position: fixed;
|
|
right: 2em;
|
|
top: 1em;
|
|
transition: background-color .1s ease-in-out, box-shadow .1s ease-in-out, fill .1s ease-in-out, right .1s ease-in-out, top .1s ease-in-out;
|
|
cursor: pointer;
|
|
box-shadow: none;
|
|
z-index: 9000000000;
|
|
background: transparent;
|
|
border: none;
|
|
font-weight: bold;
|
|
line-height: 140%;
|
|
border-radius: 0;
|
|
padding: 0;
|
|
overflow: visible;
|
|
}
|
|
|
|
.PercentyFloatingButtonLogo {
|
|
width: 72px;
|
|
height: 72px;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
border: none;
|
|
-moz-box-shadow: 0 0 30px #A6A6A6;
|
|
-webkit-box-shadow: 0 0 30px #A6A6A6;
|
|
box-shadow: 0 0 30px #A6A6A6;
|
|
top: 0;
|
|
}
|
|
|
|
.PercentyFloatingButtonText {
|
|
fill: #fff;
|
|
background: #3535ff;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
top: -16px;
|
|
width: 72px;
|
|
height: 72px;
|
|
color: #ffffff;
|
|
font-size: 14px;
|
|
transition: all 0.2s;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
-moz-box-shadow: 0 0 30px #A6A6A6;
|
|
-webkit-box-shadow: 0 0 30px #A6A6A6;
|
|
box-shadow: 0 0 30px #A6A6A6;
|
|
}
|
|
|
|
.PercentyFloatingButtonTextSuccess {
|
|
background: #00C7C7;
|
|
}
|
|
|
|
.PercentyFloatingButtonTextError {
|
|
background: #E36363;
|
|
}
|
|
|
|
.PercentyFloatingButtonTextLoading {
|
|
background: #3939FF;
|
|
}
|
|
|
|
.PercentyFloatingButtonTextNeedLogin {
|
|
background: #E36363;
|
|
}
|
|
|
|
.PercentyFloatingButtonText:active {
|
|
background: #000000;
|
|
}
|
|
|
|
|
|
/*>>>>>>>>>>>>>>>>>>> Floating Tooltip */
|
|
|
|
.PercentyFloatingTooltipRoot {
|
|
padding: 10px 20px;
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
color: black;
|
|
box-sizing: content-box;
|
|
-moz-box-shadow: 0 0 30px #666666;
|
|
-webkit-box-shadow: 0 0 30px #666666;
|
|
box-shadow: 0 0 30px #666666;
|
|
}
|
|
|
|
.PercentyFloatingTooltipTitle {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.PercentyFloatingTooltipLoginBtn {
|
|
color: white;
|
|
margin-top: 15px;
|
|
background-color: #1B00AE;
|
|
border-radius: 75px;
|
|
padding-top: 6px;
|
|
padding-bottom: 6px;
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
|
|
/*.PercentyFloatingButtonLoading .PercentyFloatingButtonText {*/
|
|
/* visibility: hidden;*/
|
|
/* opacity: 0;*/
|
|
/*}*/
|
|
|
|
/*.PercentyFloatingButtonLoading::after {*/
|
|
/* content: "";*/
|
|
/* position: absolute;*/
|
|
/* width: 16px;*/
|
|
/* height: 16px;*/
|
|
/* top: 0;*/
|
|
/* left: 0;*/
|
|
/* right: 0;*/
|
|
/* bottom: 0;*/
|
|
/* margin: auto;*/
|
|
/* border: 4px solid transparent;*/
|
|
/* border-top-color: #ffffff;*/
|
|
/* border-radius: 50%;*/
|
|
/* animation: button-loading-spinner 1s ease infinite;*/
|
|
/*}*/
|
|
|
|
/*@keyframes button-loading-spinner {*/
|
|
/* from {*/
|
|
/* transform: rotate(0turn);*/
|
|
/* }*/
|
|
|
|
/* to {*/
|
|
/* transform: rotate(1turn);*/
|
|
/* }*/
|
|
/*}*/ |