CHIEFSOFT\ameye
151 lines
3.1 KiB
CSS
151 lines
3.1 KiB
CSS
.terminalsBox {
|
|
position: relative;
|
|
}
|
|
.monthlyEarning {
|
|
background: #757FEF;
|
|
mix-blend-mode: multiply;
|
|
box-shadow: 0px 109px 80px rgb(132 13 226 / 14%), 0px 45.5376px 33.4221px rgb(132 13 226 / 10%), 0px 24.3466px 17.869px rgb(132 13 226 / 8%), 0px 13.6485px 10.0172px rgb(132 13 226 / 7%), 0px 7.24861px 5.32008px rgb(132 13 226 / 6%), 0px 3.01631px 2.21381px rgb(132 13 226 / 4%);
|
|
width: 200px;
|
|
height: 200px;
|
|
text-align: center;
|
|
border-radius: 100%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-top: 75px;
|
|
position: relative;
|
|
right: -55px;
|
|
top: 40px;
|
|
}
|
|
.monthlyEarning h3 {
|
|
margin: 0 0 10px;
|
|
line-height: 1;
|
|
color: #fff !important;
|
|
font-weight: 700;
|
|
font-size: 24px;
|
|
}
|
|
.monthlyEarning p {
|
|
margin: 0;
|
|
line-height: 1;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.usersEarning {
|
|
background: #F765A3;
|
|
mix-blend-mode: multiply;
|
|
opacity: 0.8;
|
|
box-shadow: 0px 100px 80px rgb(255 43 43 / 15%), 0px 46.233px 36.9864px rgb(255 43 43 / 11%), 0px 26.4535px 21.1628px rgb(255 43 43 / 9%), 0px 16.0571px 12.8457px rgb(255 43 43 / 8%), 0px 9.67509px 7.74008px rgb(255 43 43 / 7%), 0px 5.38772px 4.31018px rgb(255 43 43 / 6%), 0px 2.31722px 1.85378px rgb(255 43 43 / 4%);
|
|
width: 130px;
|
|
height: 130px;
|
|
text-align: center;
|
|
border-radius: 100%;
|
|
padding-top: 40px;
|
|
left: -160px;
|
|
right: 0;
|
|
top: 130px;
|
|
margin: auto;
|
|
position: absolute;
|
|
}
|
|
.usersEarning h3 {
|
|
margin: 0 0 10px;
|
|
line-height: 1;
|
|
color: #fff !important;
|
|
font-weight: 700;
|
|
font-size: 24px;
|
|
}
|
|
.usersEarning p {
|
|
margin: 0;
|
|
line-height: 1;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.inactiveEarning {
|
|
top: 210px;
|
|
background: #FF8A54;
|
|
mix-blend-mode: multiply;
|
|
width: 85px;
|
|
height: 85px;
|
|
text-align: center;
|
|
border-radius: 100%;
|
|
padding-top: 25px;
|
|
position: absolute;
|
|
left: -22px;
|
|
right: 0;
|
|
margin: auto;
|
|
}
|
|
.inactiveEarning h3 {
|
|
margin: 0 0 5px;
|
|
line-height: 1;
|
|
color: #fff !important;
|
|
font-weight: 700;
|
|
font-size: 18px;
|
|
}
|
|
.inactiveEarning p {
|
|
margin: 0;
|
|
line-height: 1;
|
|
color: #fff;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.terminalsBox ul {
|
|
margin: 133px 0 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
text-align: center;
|
|
}
|
|
.terminalsBox ul li {
|
|
display: inline-block;
|
|
position: relative;
|
|
font-size: 13px;
|
|
padding-left: 20px;
|
|
margin-right: 15px;
|
|
}
|
|
.terminalsBox ul li:last-child {
|
|
margin-right: 0;
|
|
}
|
|
.terminalsBox ul li::before {
|
|
content: '';
|
|
position: absolute;
|
|
border-radius: 5px;
|
|
width: 13px;
|
|
height: 13px;
|
|
left: 0;
|
|
top: 2px;
|
|
}
|
|
.terminalsBox ul li:nth-child(1)::before {
|
|
background: #757FEF;
|
|
}
|
|
.terminalsBox ul li:nth-child(2)::before {
|
|
background: #F765A3;
|
|
}
|
|
.terminalsBox ul li:nth-child(3)::before {
|
|
background: #FF8A54;
|
|
}
|
|
|
|
|
|
/* For RTL Style */
|
|
[dir="rtl"] .terminalsBox ul li {
|
|
padding-left: 0;
|
|
padding-right: 20px;
|
|
margin-right: 0;
|
|
margin-left: 15px;
|
|
}
|
|
[dir="rtl"] .terminalsBox ul li:last-child {
|
|
margin-left: 0;
|
|
}
|
|
[dir="rtl"] .terminalsBox ul li::before {
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
|
|
/* For dark mode */
|
|
[class="dark"] .monthlyEarning {
|
|
mix-blend-mode: initial;
|
|
}
|
|
[class="dark"] .usersEarning {
|
|
mix-blend-mode: initial;
|
|
}
|
|
[class="dark"] .inactiveEarning {
|
|
mix-blend-mode: initial;
|
|
} |