style.css
unknown
plain_text
2 years ago
14 kB
5
Indexable
:root {
--primary-color: #177dff;
--secondary-color: #e6eef9;
--orange-color: #fca004;
--disabled-color: rgba(0, 0, 0, 0.1);
--black-text: #17181a;
--green-color: #1ec54d;
--red-color: #e73d17;
--green-light-color: #e8f7ec;
--red-light-color: #faeae7;
--text-blue-color: #2F354E;
--shadow-elevation-high:
0px -0.2px 0.2px hsl(var(--shadow-color) / 0.2),
-0.1px -0.5px 0.5px -0.4px hsl(var(--shadow-color) / 0.19),
-0.1px -0.7px 0.7px -0.8px hsl(var(--shadow-color) / 0.17),
-0.1px -1.1px 1.1px -1.2px hsl(var(--shadow-color) / 0.16),
-0.2px -1.7px 1.7px -1.6px hsl(var(--shadow-color) / 0.15),
-0.3px -2.6px 2.6px -1.9px hsl(var(--shadow-color) / 0.14),
-0.5px -3.9px 3.8px -2.3px hsl(var(--shadow-color) / 0.13),
-0.7px -5.7px 5.6px -2.7px hsl(var(--shadow-color) / 0.12),
-0.9px -8px 7.8px -3.1px hsl(var(--shadow-color) / 0.11),
-1.3px -10.9px 10.7px -3.5px hsl(var(--shadow-color) / 0.1);
}
.greenFont {
color: var(--green-color);
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6,
label,
p {
margin: 0 !important;
}
.text-small {
font-size: 0.8rem !important;
font-weight: 500;
line-height: 1.3rem;
}
.box-text-small {
font-size: 0.7rem !important;
font-weight: 500;
line-height: 1.3rem;
}
.text-mid {
font-size: 0.8rem !important;
font-weight: 700;
line-height: 1.3rem;
}
.card-desc {
font-size: 0.8rem !important;
font-weight: 500;
line-height: 1.3rem;
}
.card-heading {
font-size: 1.5rem !important;
font-weight: 700;
}
.btn-text {
font-size: 1rem;
font-weight: 500;
}
* {
font-family: "Inter", sans-serif;
}
body {
margin: 0;
padding: 0;
}
.pledgeMainContainer{
color: #2F354E !important;
margin-top: 5rem;
}
/* */
.tabContainer {
display: flex;
align-items: center;
justify-content: center;
flex-direction:column;
margin-top: -15px;
}
.tabContainer > .tabs {
display: flex;
position: relative;
background-color: #F1F1F6;
box-shadow: 0 0 1px 0 rgba(#185ee0, 0.15), 0 6px 12px 0 rgba(#185ee0, 0.15) !important;
padding: 0.5rem;
border-radius: 50px;
}
.tabs * {
z-index: 2;
}
.tabContainer .tabs input[type="radio"] {
display: none;
}
.tabContainer .tabs input[type="radio"]:checked + label {
color: var(--text-blue-color);
font-size: 18px !important;
font-weight: 600 !important
}
/* .tabContainer input[type="radio"]:checked + label .notification {
background-color: red;
color: #fff;
} */
.tabContainer .tab {
display: flex;
align-items: center;
justify-content: center;
height: 54px;
width: 200px;
font-size: 18px !important;
font-weight: 500 !important;
border-radius: 99px;
cursor: pointer;
transition: color 0.15s ease-in;
}
.tabContainer input[id="radio-1"]:checked ~ .glider {
transform: translateX(0);
}
.tabContainer input[id="radio-2"]:checked ~ .glider {
transform: translateX(100%);
}
.tabContainer .glider {
position: absolute;
display: flex;
height: 54px;
width: 200px;
background-color: white;
z-index: 1;
border-radius: 99px;
transition: 0.25s ease-out;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.tabContainer .tab-content {
display: none;
}
.tabContainer .tab-content.active {
display: block;
}
.hide{
display:none
}
@media (max-width: 700px) {
.tabs {
transform: scale(0.75);
}
}
/* */
/* //////////////////////////////////////////////// */
.tableHeadings {
display: flex;
justify-content: space-between;
}
.cardRightElement {
display: flex;
gap: 0.5rem;
}
.cardRightElement button {
outline: none;
border: none;
border-radius: 0.4rem;
width: 2.2rem;
height: 2.2rem;
}
.cardSecondSection {
display: flex;
justify-content: space-between;
}
.cardSecondSection > div {
display: flex;
flex-direction: column;
}
.cardSecondSection .LedgerBalanceBox {
background-color: #ffffff48;
color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3rem;
padding: 0.2rem 0;
}
.icons {
width: 30px;
height: 30px;
}
.ledgerCard {
/* background-image: url(/assets/images/card-lines.png) !important;
background-size: cover !important;
background-position: -120px 20px;
background-repeat: no-repeat !important; */
display: flex !important;
gap: 1rem !important;
border-radius: 20px !important;
padding: 1rem !important;
background-color: #0e3e7cf6 !important;
color: rgb(243, 236, 236) !important;
position: relative !important;
}
.ledgerCard::before {
content: "";
position: absolute;
top: 20px;
left: -150px;
width: 100%;
height: 100%;
background-image: url(/assets/images/card-lines.png) !important;
background-repeat: no-repeat;
opacity: 0.4;
z-index: 1;
}
.ledgerTotalAmountCardDiv {
display: flex;
justify-content: space-between;
}
.ledgerTotalAmountCardDiv > div {
padding: 0.4rem 1rem;
border-radius: 0.5rem;
min-width: 9rem;
}
.ledgerTotalAmountCardDiv > div:nth-child(1) {
background-color: var(--green-light-color);
}
.ledgerTotalAmountCardDiv > div:nth-child(1) p {
color: var(--green-color);
}
.ledgerTotalAmountCardDiv > div:nth-child(2) {
background-color: var(--red-light-color);
}
.ledgerTotalAmountCardDiv > div:nth-child(2) p {
color: var(--red-color);
}
.ledgerTabContentDiv {
display: flex;
justify-content: space-between;
padding-top: 1rem;
}
.ledgerTabContentDiv > div:nth-child(2) p {
text-align: right;
}
/* //////////////////////////////////////////////// */
.wrapper {
display: flex !important;
flex-direction: column !important;
gap: 0.8rem !important;
}
.wholeContent{
width: 98%;
}
.pledge-shares-warning-note {
background-color: #fffbed;
border-radius: 15px;
padding: 1rem;
border: 1px solid #fca004;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.pledge-shares-warning-note-header {
display: flex;
align-items: center;
gap: 2%;
}
.pledge-shares-warning-note-header i {
font-size: 1.5rem;
color: var(--orange-color);
}
.pledge-shares-warning-note-body span {
color: var(--primary-color);
margin-left: 0.5rem;
text-decoration: underline;
}
#wholeWrapper{
height: 100vh;
display: flex;
flex-direction: column;
}
.foo{
margin-top: auto;
}
.pledge-shares-body {
display: flex;
flex-direction: column;
width: 100%;
gap: 1rem;
max-height: 300px;
overflow: scroll;
border: 1px solid rgba(0, 0, 0, 0.295);
padding: 0.5rem;
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.068);
}
.pledge-shares-body-items {
display: flex;
justify-content: space-between;
border: 1px solid rgb(68, 68, 68);
padding: 0.5rem 1rem;
border-radius: 0.5rem;
transition: all 0.1s ease-in;
align-items: center;
background-color: white;
}
.pledge-shares-body-items-select {
background-color: #00000023 !important;
/* color: white !important; */
border: 2px solid #00000044 !important;
}
.pledge-shares-body-items-select input[type="number"] {
background: transparent;
background-color: #ffffff80;
color: white;
}
.pledge-shares-body-items-left input {
height: 25px;
width: 25px;
vertical-align: middle;
}
.pledge-shares-body-items-right,
.pledge-shares-body-items-left {
display: flex;
align-items: center;
gap: 5%;
}
.pledge-shares-body-items-right p {
margin: 0;
}
.pledge-shares-body-items-right input {
width: 80px;
outline: none;
border: 2px solid transparent;
border-radius: 5px;
padding: 5px;
background-color: var(--disabled-color);
color: black !important;
}
.pledge-shares-footer {
display: flex;
width: 100%;
align-items: center;
justify-content: space-around;
padding: 1rem 0;
box-shadow: rgba(0, 0, 0, 0.45) 0px -10px 15px -10px;
background-color: white;
}
.pledge-shares-footer .continueBtn {
background-color: var(--primary-color);
color: white;
border: none;
padding: 1.2rem 1rem;
border-radius: 0.5rem;
min-width: 10rem;
}
.pledge-shares-footer .pledgePriceDiv {
border: 2px solid var(--primary-color) !important;
color: var(--primary-color) !important;
padding: 0.5rem;
border-radius: 0.3rem;
background: none;
display: flex;
flex-direction: column;
width: 150px;
}
.pledgePrice {
word-wrap: break-word;
}
.hide {
visibility: hidden;
}
.add-fund-div-hide {
display: none;
}
.errorBorder-pledge-input {
border: 2px solid var(--red-color) !important;
}
/* /////////////////////////// */
.custom-text-r-10 {
font-size: 10.42px !important;
}
.custom-text-r-12 {
font-size: 12.5px !important;
}
.custom-text-b-18 {
font-size: 18px !important;
font-weight: bold !important;
}
.custom-text-m-10 {
font-size: 10.42px !important;
font-weight: 500 !important;
}
.custom-text-m-18 {
font-size: 18px !important;
font-weight: 500 !important;
}
.custom-text-m-15 {
font-size: 15px !important;
font-weight: 500 !important;
}
.custom-text-m-12 {
font-size: 12.5px !important;
font-weight: 500 !important;
}
.custom-text-sm-12 {
font-size: 12.5px !important;
font-weight: 600 !important;
}
.custom-text-sm-15 {
font-size: 15px !important;
font-weight: 600 !important;
}
.custom-text-sm-21 {
font-size: 21.6px !important;
font-weight: 600 !important;
}
.custom-text-sm-31 {
font-size: 31.1px !important;
font-weight: 600 !important;
}
.addFundHomePageHeader {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--text-blue-color);
}
.addFundHomePageHeader .box {
position: relative;
}
.addFundHomePageHeader .input {
width: 3rem;
background: none;
border-radius: 50px;
font-size: 15px;
font-size: 20px;
outline: none;
transition: 0.5s;
padding: 5px 10px;
}
.addFundHomePageHeader .box:hover input {
width: 12rem;
font-size: 20px;
}
.addFundHomePageHeader .box i {
position: absolute;
top: 50%;
right: 0px;
transform: translate(-50%, -50%);
font-size: 20px;
transition: 0.1s;
}
.addFundHomePageHeader .box:hover i {
opacity: 0;
z-index: -1;
}
.addFundHomePageBodyFundTrue{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1rem;
margin-top: 1rem;
}
.addFundHomePageBodyFundTrue .wallet{
background-color: #E8F2FF;
border-radius: 20px;
padding: 1rem 2rem;
}
.addFundHomePageBodyFundTrue > .wallet a:visited{
color: #0F9CBC;
}
.addFundHomePageBodyFundFalse{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 3rem;
margin-top: 5rem ;
}
.addFundLink{
display: flex;
gap: 0.7rem;
}
.addFundLink span{
display: flex !important;
background-color: #0F9CBC;
width: 1.5rem;
height: 1.5rem;
align-items: center;
justify-content: center;
color: white;
border-radius: 50%;
font-size: 15px !important;
font-weight: 500 !important;
}
.transactionsHeader{
display: flex;
align-items: center;
}
.transactionsHeader::before{
content: "";
display: block;
width: 50px;
height: 5px;
background-color: red;
}
.transactionsHeader::after{
content: "";
display: block;
width: 50px;
height: 5px;
background-color: red;
}
/* ///////////// */
.addFundBody {
display: flex;
flex-direction: column;
justify-content: center;
width: 90%;
margin: auto;
}
.addFundBodyPrice {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
text-align: center;
padding: 1rem 0;
padding-top: 2rem;
margin: auto;
border-bottom: 1px solid black;
}
.addFundBodyPrice > div input {
border: none;
width: 100%;
border-radius: 15px;
font-size: 31px;
text-align: center;
font-weight: 600;
}
.addFundBodyPrice > div input:focus{
outline: none;
}
.addFundBody .selectpickerBankAccount,.addFundBody .selectpickerPayment,.addFundBody .selectpickerBank,.upiTextInput {
padding: 1rem 0.5rem;
width: 100%;
background-color: #f1f1f6;
font-size: 15px;
border: none;
border-radius: 10px;
font-weight: 500;
}
.addFundBody .addFundBtn {
background-color: #0f9cbc;
border: none;
border-radius: 15px;
font-size: 15px;
padding: 1rem;
color: white;
font-weight: 500;
width: 90%;
margin: auto;
}
.addFundBody .addWithdrawalBtn {
background-color: #2f354e;
border: none;
border-radius: 15px;
font-size: 15px;
padding: 1rem;
color: white;
font-weight: 500;
width: 100%;
}
.withdrawFundPercentageChip {
display: inline-block;
font-size: 75%;
font-weight: 500;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
padding: 10px 12px;
background-color: rgba(0, 0, 0, 0.075);
border-radius: 50rem !important;
color: #343a40;
}.withdrawFundPercentageChip button{
outline: none;
border: none;
}
.withdrawFundPercentageCheck{
background-color: red;
}
/* //////////////////////// */
/* //////////////////////// */
.select-accordion {
position: relative;
width: 200px;
width: 100%;
}
.select-header {
background-color: #eee;
padding: 10px;
cursor: pointer;
padding: 1rem 0.5rem;
width: 100%;
background-color: #f1f1f6;
font-size: 15px;
border: none;
border-radius: 10px;
font-weight: 500;
}
.select-options {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: #fff;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
display: none;
}
.option {
padding: 10px;
cursor: pointer;
}
.option:hover {
background-color: #eee;
}Editor is loading...