芝麻web文件管理V1.00
编辑当前文件:/home/digitalh/network.digitalhubbd.com/assets/css/chat_page/membership_info.css
.main .middle > .content > .membership_info { height: 100%; overflow: hidden; position: relative; background: var(--membership_info-senary-bg-color); padding: 0px; transition: 0.5s; flex-flow: column; display: flex; } .main .middle > .content > .membership_info > .header { padding: 0px 15px; text-align: center; font-weight: 600; max-height: 60px; min-height: 60px; position: relative; z-index: 7; display: flex; align-items: center; width: 100%; flex: 1 0 auto; background: var(--membership_info-secondary-bg-color); border-bottom: 1px solid var(--membership_info-primary-border-color); } .main .middle > .content > .membership_info > .header > .left { text-align: left; margin-right: auto; line-height: 19px; cursor: pointer; } .main .middle > .content > .membership_info > .header > .left > .title { display: block; margin-left: auto; background: linear-gradient(to right,var(--membership_info-quinary-text-color),var(--membership_info-senary-text-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: block; font-size: var(--membership_info-tertiary-font-size); } .main .middle > .content > .membership_info > .header > .left > .title > span { } .main .middle > .content > .membership_info > .header > .icons { display: block; } .main .middle > .content > .membership_info > .header > .icons > span { font-size: var(--membership_info-quaternary-font-size); margin-right: 4px; color: var(--membership_info-primary-text-color); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--membership_info-primary-bg-color); transition: 0.2s; border-radius: 100%; } .main .middle > .content > .membership_info > .header > .icons > span:hover { background: var(--membership_info-quinary-bg-color); color: var(--membership_info-tertiary-text-color); } .main .middle > .content > .membership_info > .header > .icons > span:last-child { margin-right: 0px; } .main .middle > .content > .membership_info > .header > .icons > span > i { display: inline-flex; align-items: center; vertical-align: middle; height: 100%; } .main .middle > .content > .membership_info > .contents { padding: 10px 0px; overflow: hidden; overflow-y: auto; height: 100%; z-index: 4; position: relative; width: 100%; padding-top: 0px; flex: 1 1 auto; } .main .middle > .content > .membership_info > .contents > .membership-info { padding: 20px; background: var(--membership_info-tertiary-bg-color); } .main .middle > .content > .membership_info > .contents > .membership-info > .membership-card { display: flex; color: var(--membership_info-tertiary-text-color); justify-content: space-between; gap: 15px; flex-wrap: wrap; } .main .middle > .content > .membership_info > .contents > .membership-info > .membership-card > .info-item { background: var(--membership_info-quaternary-bg-color); padding: 20px 15px; flex: 1; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); min-width: 150px; flex-basis: calc(33.33% - 10px); } .main .middle>.content>.membership_info>.contents>.membership-info>.membership-card>.info-item>span.button { background: var(--membership_info-octonary-bg-color); color: var(--membership_info-septenary-text-color); padding: 2px 8px; display: inline-block; margin-top: 11px; border-radius: 6px; font-size: 15px; cursor: pointer; } .main .middle > .content > .membership_info > .contents > .membership-info > .membership-card > .info-item > p { font-size: var(--membership_info-primary-font-size); margin: 0px; color: var(--membership_info-secondary-text-color); } .main .middle > .content > .membership_info > .contents > .membership-info > .membership-card > .info-item > p:last-child { font-size: var(--membership_info-secondary-font-size); margin-top: 4px; color: var(--membership_info-tertiary-text-color); } .main .middle > .content > .membership_info > .contents > .available_packages { padding: 20px; } .main .middle > .content > .membership_info > .contents > .available_packages > div { border-radius: 12px; margin-top: 20px; } .main .middle > .content > .membership_info > .contents > .available_packages > div > .header { margin-bottom: 20px; } .main .middle > .content > .membership_info > .contents > .available_packages > div > .header > div { display: flex; gap: 15px; justify-content: space-between; align-items: center; flex-wrap: wrap; } .main .middle > .content > .membership_info > .contents > .available_packages > div > .header > div > .left > .title { margin-left: auto; color: var(--membership_info-tertiary-text-color); display: block; font-size: var(--membership_info-quaternary-font-size); margin-bottom: 7px; font-weight: 500; } .main .middle > .content > .membership_info > .contents > .available_packages > div > .header > div > .left { max-width: 50%; padding: 0px 4px; flex: 1; } .main .middle > .content > .membership_info > .contents > .available_packages > div > .header > div > .left > p { margin-left: auto; color: var(--membership_info-quaternary-text-color); font-size: var(--membership_info-tertiary-font-size); } .main .middle > .content > .membership_info > .contents > .available_packages > div > .header > div > .right { display: block; flex: 1; text-align: right; } .main .middle > .content > .membership_info > .contents > .available_packages > div > .header > div > .right > span { display: inline-block; text-align: center; transition: 0.3s; background: var(--membership_info-septenary-bg-color); padding: 5px 11px; border-radius: 6px; color: var(--membership_info-tertiary-text-color); margin-right: 9px; cursor: pointer; } .main .middle > .content > .membership_info > .contents > .available_packages > div > .header > div > .right > span:last-child { margin: 0px; } .main .middle > .content > .membership_info > .contents > .available_packages > div > .header > div > .right > span:hover { background: var(--membership_info-octonary-bg-color); color: var(--membership_info-septenary-text-color); } .main .middle > .content > .membership_info > .contents > .available_packages > div > .packages-container { overflow: hidden; } .main .middle > .content > .membership_info > .contents > .available_packages .pricing-table-container { display: flex; transition: transform 0.3s ease-in-out; gap: 15px; } .main .middle > .content > .membership_info > .contents > .available_packages .pricing-table-container > .pricing-table { border-radius: 10px; flex: 1; color: var(--membership_info-tertiary-text-color); overflow: hidden; min-width: 190px; } .main .middle > .content > .membership_info > .contents > .available_packages .pricing-table-container > .pricing-table > .pricing-head { padding: 20px; background: var(--membership_info-nonary-bg-color); padding-bottom: 15px; } .main .middle > .content > .membership_info > .contents > .available_packages .pricing-table-container > .pricing-table > .pricing-head > h3 { font-size: var(--membership_info-secondary-font-size); color: var(--membership_info-tertiary-text-color); } .main .middle > .content > .membership_info > .contents > .available_packages .pricing-table-container > .pricing-table > .pricing-head > .pricing { font-size: var(--membership_info-quinary-font-size); display: block; color: var(--membership_info-octonary-text-color); font-weight: 600; } .main .middle > .content > .membership_info > .contents > .available_packages .pricing-table-container > .pricing-table > .pricing-head > span.duration { font-size: var(--membership_info-tertiary-font-size); margin-bottom: 10px; display: block; color: var(--membership_info-quaternary-text-color); font-weight: 600; } .main .middle > .content > .membership_info > .contents > .available_packages .pricing-table-container > .pricing-table > .pricing-body { padding: 0px 20px; padding-bottom: 20px; background: var(--membership_info-tertiary-bg-color); border-radius: 0px 0px 10px 10px; padding-top: 20px; } .main .middle > .content > .membership_info > .contents > .available_packages .pricing-table-container > .pricing-table > .pricing-body > span.buy_now { display: block; text-align: center; background: var(--membership_info-quaternary-bg-color); padding: 6px 8px; border-radius: 6px; cursor: pointer; color: var(--membership_info-tertiary-text-color); margin-top: 15px; } .main .middle > .content > .membership_info > .contents > .available_packages .pricing-table-container > .pricing-table > .pricing-body > span.buy_now:hover { background: var(--membership_info-octonary-bg-color); color: var(--membership_info-septenary-text-color); } .main .middle > .content > .membership_info > .contents > .available_packages .pricing-table-container > .pricing-table > .pricing-body > ul { padding: 0px; margin-bottom: 0px; } .main .middle > .content > .membership_info > .contents > .available_packages .pricing-table-container > .pricing-table > .pricing-body > ul > li { list-style: none; font-size: var(--membership_info-tertiary-font-size); } .main .middle > .content > .membership_info > .contents > .available_packages .pricing-table-container > .pricing-table > .pricing-body > ul > li > svg { width: 22px; color: var(--membership_info-octonary-text-color); } .main .middle > .content > .membership_info > .contents > .payment_page { color: var(--membership_info-tertiary-text-color); padding: 20px; } .main .middle > .content > .membership_info > .contents > .payment_page > div { } .main .middle > .content > .membership_info > .contents > .payment_page > div > .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; margin-top: 15px; } .main .middle > .content > .membership_info > .contents > .payment_page > div > .header > h3 { display: block; font-size: var(--membership_info-quaternary-font-size); margin-bottom: 0px; font-weight: 500; margin-right: auto; text-align: left; color: var(--membership_info-octonary-text-color); } .main .middle > .content > .membership_info > .contents > .payment_page > div > .package-info { background: var(--membership_info-tertiary-bg-color); padding: 20px 15px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); font-size: var(--membership_info-senary-font-size); display: flex; justify-content: space-between; align-items: center; } .main .middle > .content > .membership_info > .contents > .payment_page > div > .package-info > .back-button { display: inline-block; text-align: center; transition: 0.3s; background: var(--membership_info-quaternary-bg-color); padding: 5px 11px; border-radius: 6px; color: var(--membership_info-tertiary-text-color); margin-right: 9px; transition: 0.2s; cursor: pointer; } .main .middle > .content > .membership_info > .contents > .payment_page > div > .package-info > .back-button:hover { background: var(--membership_info-octonary-bg-color); color: var(--membership_info-septenary-text-color); } .main .middle > .content > .membership_info > .contents > .payment_page > div > .package-info > .details { } .main .middle > .content > .membership_info > .contents > .payment_page > div > .package-info > .details > h3 { font-size: var(--membership_info-secondary-font-size); color: var(--membership_info-tertiary-text-color); } .main .middle > .content > .membership_info > .contents > .payment_page > div > .package-info > .details > p.pricing { margin-bottom: 0px; color: var(--membership_info-quaternary-text-color); } .main .middle > .content > .membership_info > .contents > .payment_page > div > .package-info > .details > p.duration { margin: 0px; color: var(--membership_info-quaternary-text-color); } .main .middle > .content > .membership_info > .contents > .payment_page > div > .place_order { text-align: center; margin-top: 20px; } .main .middle > .content > .membership_info > .contents > .payment_page > div > .place_order > div { display: inline-block; text-align: center; transition: 0.3s; background: var(--membership_info-octonary-bg-color); padding: 5px 11px; border-radius: 6px; color: var(--membership_info-septenary-text-color); margin-right: 9px; transition: 0.2s; cursor: pointer; } .main .middle > .content > .membership_info > .contents > .payment_page > div > .place_order > div:hover { background: var(--membership_info-quaternary-bg-color); color: var(--membership_info-octonary-text-color); } .main .middle > .content > .membership_info > .contents > .payment_page > div > .payment-gateways { margin-top: 32px; } .main .middle > .content > .membership_info > .contents > .payment_page > div > .payment-gateways > h3 { font-size: var(--membership_info-secondary-font-size); margin-bottom: 25px; color: var(--membership_info-tertiary-text-color); } .main .middle > .content > .membership_info > .contents > .payment_page > div > .payment-gateways > ul { padding: 0px; display: flex; flex-wrap: wrap; gap: 10px; } .main .middle > .content > .membership_info > .contents > .payment_page > div > .payment-gateways > ul > li { list-style: none; flex: 1; } .main .middle > .content > .membership_info > .contents > .payment_page > div > .payment-gateways > ul > li > span > img { width: 110px; max-height: 90px; } .main .middle > .content > .membership_info > .contents > .payment_page > div > .payment-gateways > ul > li > span { display: flex; background: var(--membership_info-tertiary-bg-color); width: 100%; border-radius: 5px; height: 90px; align-items: center; justify-content: center; min-width: 130px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transition: 0.2s; cursor: pointer; } .main .middle > .content > .membership_info > .contents > .payment_page > div > .payment-gateways > ul > li > span:hover { filter: opacity(0.5); } .main .middle > .content > .membership_info > .contents > .preloader-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--membership_info-tertiary-bg-color); display: flex; justify-content: center; align-items: center; z-index: 55; } .main .middle > .content > .membership_info > .contents > .preloader-container > .preloader-animation { width: 100px; height: 5px; background-color: var(--membership_info-senary-bg-color); border-radius: 12px; overflow: hidden; } .main .middle > .content > .membership_info > .contents > .preloader-container > .preloader-animation > .progress-bar { width: 0; height: 100%; background-color: var(--membership_info-octonary-bg-color); animation: progress-bar-preloader 3s linear infinite; } @keyframes progress-bar-preloader { 0% { width: 0; } 100% { width: 100%; } } .wallet_topup_modal .modal-content { background: var(--chat-page-quaternary-bg-color); } .wallet_topup_modal .modal-header,.modal-footer { border-color: var(--chat-page-primary-border-color); color: var(--chat-page-tertiary-text-color); } .wallet_topup_modal h5.modal-title { color: var(--chat-page-primary-text-color); font-size: var(--chat-page-secondary-font-size); font-weight: 600; } .wallet_topup_modal .modal-body { font-size: var(--chat-page-tertiary-font-size); color: var(--chat-page-tertiary-text-color); max-height: 55vh; overflow: hidden; overflow-y: auto; } .wallet_topup_modal .modal-body > form .wallet_payment_gateways > li > .payment_method { display: flex; background: var(--membership_info-tertiary-bg-color); width: 100%; border-radius: 5px; height: 90px; align-items: center; justify-content: center; min-width: 130px; box-shadow: 0 4px 8px rgba(0, 0, 0, .2); transition: 0.2s; cursor: pointer; } .wallet_topup_modal .modal-body > form .wallet_payment_gateways { padding: 0; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 0px; } .wallet_topup_modal .modal-body > form .wallet_payment_gateways > li { list-style: none; flex: 1; } .wallet_topup_modal .modal-body>form .wallet_payment_gateways>li>.payment_method.selected { color: var(--chat-page-tertiary-text-color); background-color: var(--chat-page-primary-bg-color); border-color: var(--chat-page-primary-bg-color); } .wallet_topup_modal .modal-body > form .wallet_payment_gateways > li > .payment_method > img { width: 110px; max-height: 90px; } .wallet_topup_modal button.btn.btn-primary { color: var(--chat-page-secondary-text-color); background-color: var(--chat-page-quinary-bg-color); border-color: var(--chat-page-quinary-bg-color); font-size: var(--chat-page-tertiary-font-size); margin-left: auto; position: relative; overflow: hidden; } .wallet_topup_modal button.btn.btn-primary.processing:before { content: ""; background-image: repeating-linear-gradient(-45deg, transparent, transparent 1rem, #ffffff78 1rem, #ffffff78 2rem); background-size: 200% 200%; animation: barberpole 2s linear infinite; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .wallet_topup_modal button.btn.btn-secondary { color: var(--chat-page-tertiary-text-color); background-color: var(--chat-page-primary-bg-color); border-color: var(--chat-page-primary-bg-color); font-size: var(--chat-page-tertiary-font-size); margin-right: auto; } .wallet_topup_modal .modal-body > form .form-label { margin-bottom: 12px; color: var(--chat-page-tertiary-text-color); } .wallet_topup_modal .modal-body > form input { font-size: 17px; color: var(--chat-page-tertiary-text-color); background-color: var(--chat-page-primary-bg-color); border-color: var(--chat-page-primary-bg-color); font-size: var(--chat-page-tertiary-font-size); display: block; width: 100%; border: 0pc; padding: 16px; border-radius: 8px; outline: none; } .wallet_topup_modal .modal-body>form .error { padding: 11px 10px; border-radius: 5px; font-weight: 600; font-size: var(--form-primary-font-size); margin-bottom: 20px; display: none; color: var(--form-quinary-text-color); background-color: var(--form-senary-bg-color); border: 1px solid var(--form-secondary-border-color); } .wallet_topup_modal .modal-body > form input::placeholder { color: inherit; }