<?php /** * Mageplaza * * NOTICE OF LICENSE * * This source file is subject to the Mageplaza.com license that is * available through the world-wide-web at this URL: * https://www.mageplaza.com/LICENSE.txt * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade this extension to newer * version in the future. * * @category Mageplaza * @package Mageplaza_Osc * @copyright Copyright (c) Mageplaza (https://www.mageplaza.com/) * @license https://www.mageplaza.com/LICENSE.txt */ /** @var \Mageplaza\Osc\Block\Design $block */ $design = $block->getDesignConfiguration(); $headingBackground = '#' . trim((string)$design['heading_background'], '#'); $headingText = '#' . trim((string)$design['heading_text'], '#'); $placeOrder = '#' . trim((string)$design['place_order_button'], '#'); ?> <?php if ($block->isEnableGoogleApi() && $block->getGoogleApiKey()): ?> <script type="text/javascript"
            src="//maps.googleapis.com/maps/api/js?key=<?= /* @noEscape */ $block->getGoogleApiKey() ?>&libraries=places"></script><?php endif; ?> <?php if ($design['text_font']): ?> <?php $fontNameArr = explode(' ', $design['text_font']); $fontName = ''; foreach ($fontNameArr as $name) { if ($fontName !== '') { $fontName .= '+'; } $fontName .= $name; } ?> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=<?= /* @noEscape */ $fontName ?>" /><?php endif; ?> <style type="text/css"> /*=================================================================== | CONFIGUARATION STYLE | ====================================================================*/ .message.warning{ display: flex; } .table-checkout-shipping-method tbody td{ border-top: none; padding-bottom: 10px; padding-top: 0; } .actions-toolbar .primary .action{ margin: 0; } .opc-wrapper .step-content { margin: unset; } .abs-field-tooltip input, .field .control._with-tooltip input { margin-right: 0; } .order-summary .opc-block-summary table.data.table.table-totals{ border-bottom: unset; } .opc-block-summary .product-item .product-item-inner{ margin: 0 0 2px } .checkout-payment-method .payment-option-title{ padding: 12px 0; } #checkout-review-table{ border: unset; } .opc-wrapper .step-title{ margin-bottom: 6px; } .opc-block-summary.step-content, #checkout-step-shipping_method.step-content, #checkout-step-payment.step-content { padding-top: 0 !important; } .opc-wrapper .form-shipping-address, .opc-wrapper .form-login{ margin-top: 8px; margin-bottom: 0; } .osc-place-order-block.checkout-comment-block { margin-bottom: 8px; } .col-mp.hoverable, .address-information .hoverable, .osc-addition-content-wrapper, .order-summary.hoverable, #checkoutSteps .row-mp > .hoverable { margin-bottom: 20px; border-radius:10px; } .checkout-payment-method .payment-option-content .form-discount .actions-toolbar .primary .action:hover, .checkout-payment-method .payment-option-content .form-discount .actions-toolbar .primary .action{ border: unset; } .action.action-apply, .action.action-cancel, input[type="text"], input[type="password"], input[type="url"], input[type="tel"], input[type="search"], input[type="number"], input[type*="date"], input[type="email"], select{ height: 36px; } body, input { color: <?= /* @noEscape */ $design['body_text'] ?>; } .opc-block-summary .grand.totals .price{ color: <?= /* @noEscape */ $design['order_total'] ?> ; } <?php if ($design['text_font']): ?> body, select, textarea, input, .action.primary, .action-primary, input[type="text"], input[type="password"], input[type="url"], input[type="tel"], input[type="search"], input[type="number"], input[type*="date"], input[type="email"], button { font-family: '<?= /* @noEscape */ $design['text_font'] ?>'; } <?php endif; ?> <?php if (in_array($design['page_layout'], ['2columns', '2columns-floating'])) { ?> .col-mp.osc-addition-content-wrapper, .col-mp.osc-place-order-wrapper { margin-left: 0; width: 100%; } <?php } ?> <?php switch ($design['page_design']): case 'flat': ?> .popup-authentication button.action, .popup-gift-message-item button.action, .checkout-container button:not(.primary):not(.action-show):not(.action-close):not(.edit-address-link):not(.ui-datepicker-trigger) { background-color: <?= /* @noEscape */ $headingBackground ?> !important; border-color: <?= /* @noEscape */ $headingBackground ?> !important; box-shadow: none !important; color: <?= /* @noEscape */ $headingText ?> !important; } .action.primary.action-save-address { background-color: <?= /* @noEscape */ $headingBackground ?> !important; border-color: <?= /* @noEscape */ $headingBackground ?> !important; box-shadow: none !important; color: <?= /* @noEscape */ $headingText ?> !important; } .gift-message-item-content .fa-gift { color: <?= /* @noEscape */ $headingBackground ?> !important; } .step-title { background-color: <?= /* @noEscape */ $headingBackground ?>; padding: 12px 10px 12px 12px !important; font-weight: bold !important; font-size: 16px !important; color: <?= /* @noEscape */ $headingText ?> !important; line-height: 1.1; } .step-title .fa { display: inline-block !important; font-size: 24px; margin-right: 12px; vertical-align: text-bottom; } .one-step-checkout-container .osc-geolocation { color: <?= /* @noEscape */ $headingBackground ?>; } <?php break; ?> <?php case 'material': ?> .fieldset > .field { margin: 0 0 12px; } .row-mp { margin: unset; } .checkout-agreement.field.choice label { position: inherit !important; } .osc-addition-content-wrapper, .opc-block-summary.step-content, .opc-wrapper .step-content { padding: 12px !important; } .popup-authentication button.action, .popup-gift-message-item button.action, .checkout-container button:not(.primary):not(.action-show):not(.action-close):not(.edit-address-link):not(.ui-datepicker-trigger) { background-color: <?= /* @noEscape */ $headingBackground ?> !important; border-color: <?= /* @noEscape */ $headingBackground ?> !important; color: <?= /* @noEscape */ $headingText ?> !important; } .action.primary.action-save-address { background-color: <?= /* @noEscape */ $headingBackground ?> !important; border-color: <?= /* @noEscape */ $headingBackground ?> !important; color: <?= /* @noEscape */ $headingText ?> !important; } .gift-message-item-content .fa-gift { color: <?= /* @noEscape */ $headingBackground ?> !important; } .step-title { background-color: <?= /* @noEscape */ $headingBackground ?>; padding: 12px 10px 12px 12px !important; font-weight: bold !important; font-size: 16px !important; color: <?= /* @noEscape */ $headingText ?> !important; line-height: 1.1; } .one-step-checkout-container .osc-geolocation { color: <?= /* @noEscape */ $headingBackground ?>; } .fieldset > .field{ display: flex; justify-content: center; align-items: center; } .fieldset > .field:not(.choice) > .control { position: relative; } .control.input-field{ position: relative; } .field-error, div.mage-error{ margin-top: 0; } #comments:placeholder-shown + label, #discount-code:placeholder-shown + label, #discount-code:placeholder-shown + label{ display: none; } input[type="text"]:disabled + label, div#discount-code-error + label, #comments + label, .input-text:valid + label , .input-text:focus + label, #customer-email-error + label, #osc-password-error + label, #osc-password-confirmation-error + label, button + label, select + label { font-size: 1rem; left: 12px !important; top: 0 !important; transform: translateY(-50%) !important; background-color: <?= /* @noEscape */ $design['osc_page_background'] ?> ; transform-origin: left top; pointer-events: none; } textarea + label, .opc-wrapper .fieldset > .field > .label, .field .control.input-field .label{ position: absolute; left: 10px; top: 6px; } .field.street .field:first-child .label { height: 100%; } #discount-form label.label, .field.street label.label{ clip: unset !important; width: unset !important; height: unset !important; } .field.street .field:first-child .label { height: 100%; } .field.street label.label{ clip: unset !important; width: unset !important; height: unset !important; } .checkout-agreements.fieldset > .field.required >.label:after{ content: ''; margin: 0; } .fieldset > .field.required > .label button:after{ content: '*'; color: #e02b27; font-size: 1.2rem; margin: 0 0 0 5px; } .opc-wrapper .step-title{ border-radius: 8px 8px 0 0 ; } /* Get material color from config */ <?php $color = $design['material_color'] ?> /* icon */ .fa-stack.fa-2x > i, .fa.fa-gift.fa-2x, .fa.fa-check-circle { color: <?= /* @noEscape */ $color ?> } .fa-stack.fa-2x > i { display: block; } /*!* address *!*/ ._keyfocus *:focus, input:not([disabled]):focus, textarea:not([disabled]):focus, select:not([disabled]):focus { box-shadow: none; } .required-entry { color: #e02b27; font-size: 1.2rem } fieldset.street.required legend.label { display: none } /* Check width devices */ @media only screen and (max-width: 1024px) { #checkout-step-shipping_method > .co-shipping-method-form { margin: 0; padding: 0 } .osc-place-order-block .payment-option-inner .control { width: 100%; float: left; margin-bottom: 10px; } #create-account-form .osc-password, #create-account-form .confirmation { padding: 0 6px } } @media (max-width: 991px) and (min-width: 768px) { .mp-sm-6 { width: 46% !important; } div[data-bind="scope: 'checkout.sidebar'"] { float: right; } } @media only screen and (max-width: 766px) { form#co-shipping-method-form { padding: 0; margin: 0; } .one-step-checkout-wrapper .step-title { font-size: 2.6rem; } .opc-wrapper .form-login, .opc-wrapper .form-shipping-address, .opc-wrapper .methods-shipping { background: none !important; } #payment .step-title { border-bottom: none; } form#create-account-form .confirmation { margin-top: 20px } } /* hoverable box */ .opc-wrapper .step-title, #opc-sidebar .order-summary.hoverable .step-title { padding-top: 10px; } @media (min-width: 1020px) { .mp-4 { width: 30.3333333333% !important; } #maincontent { padding-left: 0 !important; padding-right: 0 !important; } } .osc-addition-content-wrapper, .one-step-checkout-wrapper .hoverable { transition: box-shadow .25s; box-shadow: 1px 1px 4px 0 #00000026; } #opc-sidebar .order-summary.hoverable { margin-top: 0; background: #f0f0f0; } [type=radio]:checked, .one-step-checkout-wrapper [type=radio]:not(:checked) { position: absolute; left: -9999px; opacity: 0 } [type=radio]:checked + label, .one-step-checkout-wrapper [type=radio]:not(:checked) + label { position: relative; padding-left: 28px; } [type=radio].with-gap:checked + label:after, .one-step-checkout-wrapper [type=radio].with-gap:checked + label:before, .one-step-checkout-wrapper [type=radio]:checked + label:after { border: 2px solid<?= /* @noEscape */ $color ?> } [type=radio].with-gap:checked + label:after, .one-step-checkout-wrapper [type=radio].with-gap:checked + label:before, .one-step-checkout-wrapper [type=radio]:checked + label:after, .one-step-checkout-wrapper [type=radio]:checked + label:before, .one-step-checkout-wrapper [type=radio]:not(:checked) + label:after, .one-step-checkout-wrapper [type=radio]:not(:checked) + label:before { border-radius: 50% } [type=radio]:checked + label:before { border: 2px solid transparent } [type=radio] + label:after, .one-step-checkout-wrapper [type=radio] + label:before { content: ''; position: absolute; left: 0; top: 0; margin: 3px; width: 13px; height: 13px; z-index: 0; transition: .28s ease } [type=radio].with-gap:checked + label:after { -webkit-transform: scale(.5); transform: scale(.5) } [type=radio].with-gap:checked + label:after, .one-step-checkout-wrapper [type=radio]:checked + label:after { background-color: <?= /* @noEscape */ $color ?> } [type=radio]:checked + label:after { -webkit-transform: scale(1.02); transform: scale(1.02) } [type=radio]:not(:checked) + label:after, .one-step-checkout-wrapper [type=radio]:not(:checked) + label:before { border: 2px solid #5a5a5a; } [type=radio]:not(:checked) + label:after { -webkit-transform: scale(0); transform: scale(0) } /* radio button - width-wrap */ <?php if ($design['radio_button_style'] == 'with_gap'): ?> [type=radio]:checked + label:after { -webkit-transform: scale(.5); transform: scale(.5); } [type=radio]:checked + label:after, .one-step-checkout-wrapper [type=radio]:checked + label:before, .one-step-checkout-wrapper [type=radio]:checked + label:after { border: 2px solid<?= /* @noEscape */ $color ?>; } <?php endif; ?> .fieldset > .field.downloads .field.choice { padding-left: 0; } /* ripple affect css*/ button { border: 0; outline: 0; border-radius: 0.15em; box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); overflow: hidden; position: relative; cursor: pointer; } button .ripple { border-radius: 50%; background-color: rgba(255, 255, 255, 0.7); position: absolute; transform: scale(0); animation: ripple 0.8s linear; opacity: 0.4; } @keyframes ripple { to { transform: scale(2.5); opacity: 0; } } <?php break; ?> <?php case 'default': ?> .modal-inner-wrap, header.modal-header, .modal-content, .opc-wrapper .step-title { border-radius: unset; margin-bottom: 4px; font-weight: 600; } <?php break; ?> <?php default: ?> .checkout-payment-method .step-title, #shipping .step-title, #opc-shipping_method .step-title, .order-summary .step-title { border-bottom: 1px solid #ccc; padding-bottom: 10px; } .opc-wrapper .form-shipping-address, .opc-wrapper .form-login{ margin-top: 4px; margin-bottom: 0; } .checkout-comment-block .control.input-field.input-box{ display: flex; flex-direction: column-reverse; } <?php endswitch; ?> <?php switch ($design['page_layout']): case '1column': ?> #co-place-order-area{ display: flex; flex-direction: column; } .one-step-checkout-container > .mp-6 { width: 50% !important; margin: 0 16px; } .mp-lg-6 { width: 100%; } #checkoutSteps .row-mp > .hoverable { margin-top: unset !important; } .opc-wrapper .form-login, .opc-wrapper .form-shipping-address { max-width: 100% !important; } .osc-place-order-block .payment-option-inner .control { width: 100% !important; } <?php if ($block->isVirtual()): ?> div[data-bind="scope: 'checkout.steps.shipping-step'"] { display: none } @media only screen and (max-width: 1024px) { div[data-bind="scope: 'checkout.sidebar'"] { margin-top: 0 !important; } } <?php endif; ?> <?php break; ?> <?php case '2columns': ?> <?php case '2columns-floating': ?> .opc-wrapper .form-login, .opc-wrapper .form-shipping-address { max-width: 100% !important; } strong.product-item-name { width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fieldset > .field:not(.choice) > .control{ margin-top: 4px; } .osc-place-order-block .payment-option-inner .control { width: 100% !important; } .row-mp { width: 100% ; } @media (min-width: 768px), print { .one-step-checkout-container > .mp-6 { width: 46% !important; margin: 0 20px 0 0; } <?php if ($design['page_layout'] === '2columns'): ?> div[data-bind="scope: 'checkout.steps.billing-step'"] { margin-top: 0 !important; } <?php endif; ?> } <?php if ($block->isVirtual()): ?> @media only screen and (max-width: 766px) { div[data-bind="scope: 'checkout.steps.shipping-step'"] { margin-top: 0px !important; } } <?php endif ?> <?php break; ?> <?php case '3columns': ?> .row-mp{ width: 94%; } @media only screen and (min-width: 1020px) { .mp-4 { width: 33.333333% !important; } } .mp-col-2.mp-4 { margin: 0 2% 0; } strong.product-item-name { width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .minicart-items .product-item-name { padding-top: 0; } <?php if ($block->isVirtual()): ?> div[data-bind="scope: 'checkout.steps.billing-step'"] { margin-top: 0px !important; } <?php endif ?> <?php break; ?> <?php case '3columns-colspan': ?> .mp-lg-6{ width: 100%; } .mp-right{ padding-left: 8px; width: 50%; } .mp-left{ padding-right: 8px; width: 50%; } .mp-col-1.mp-4{ padding-right: 20px; } .minicart-items .product-item-name { padding-top: 0; } strong.product-item-name { width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } div#co-place-order-area{ display: flex; flex-direction: column; } .row-mp{ width: 97%; } @media (min-width: 991px), print { .hoverable.only-colspan { width: 45%; margin-left: 15px; } } @media only screen and (max-width: 766px) { .hoverable.only-colspan { margin-top: 25px } } .checkout-agreements-block { margin-bottom: 20px !important; } .payment-method .checkout-agreements-block { margin-bottom: 0 !important; } <?php if ($block->isVirtual()): ?> @media (min-width: 1024px), print { .hoverable.only-colspan { width: 100% !important;; margin-left: initial; } } @media only screen and (max-width: 766px) { div[data-bind="scope: 'checkout.steps.shipping-step'"] { margin-top: 0px !important; } } <?php endif ?> <?php break; ?> <?php endswitch; ?> .osc-place-order-wrapper .place-order-primary button.primary.checkout { display: flex; justify-content: center; align-items: center; background-color: <?= /* @noEscape */ $placeOrder ?> !important; border-color: <?= /* @noEscape */ $placeOrder ?> !important; } .order-summary, #checkout-review-table { background-color: <?= /* @noEscape */ $design['order_summary_background'] ?> !important; } <?php if ($design['page_design'] === 'material'): ?> .opc-block-summary .table-totals tbody .mark, .opc-block-summary .table-totals tbody tr{ background-color: <?= /* @noEscape */ $design['order_summary_background'] ?> !important; } <?php endif; ?> #maincontent, .page-header .header.content, .opc-estimated-wrapper,.modal-header,.modal-content, .osc-new-address-popup .modal-inner-wrap, .popup-authentication .modal-inner-wrap, input,select,textarea{ background-color: <?= /* @noEscape */ $design['osc_page_background'] ?> !important; } @media (max-width: 639px) { .opc-wrapper .form-login, .opc-wrapper .form-shipping-address, .opc-wrapper .methods-shipping { background-color: <?= /* @noEscape */ $design['osc_page_background'] ?> !important; } } .page-title-wrapper .page-title { color: <?= /* @noEscape */ $design['page_title_color'] ?> !important; } .page-title-wrapper .checkout-description { color: <?= /* @noEscape */ $design['description_color'] ?> !important; } /*=================================================================== | Custom STYLE | ====================================================================*/ <?= /* @noEscape */ isset($design['custom_css']) ? $design['custom_css'] : ''; ?> /*=================================================================== | Compatible Themes | ====================================================================*/ /** Etheme_yourstore **/ <?php if ($block->getCurrentTheme() === 'Etheme/yourstore') { ?> .create-account-block { border: none; padding: 0; } .product-image-container { display: initial; } .content { margin-top: 0px !important } .product-item .product-item-name-block a { background-color: #f0f0f0 !important } .product-image-wrapper { height: initial; } .qty-wrapper .qty-wrap .input-text.update { top: -2px } .popup-authentication .modal-content { padding-top: 0 } .osc-payment-after-methods .opc-payment-additional .field .control { border-bottom: none; } dd.ui_tpicker_second, dd.ui_tpicker_millisec, dd.ui_tpicker_microsec { display: none } .ui-timepicker-div dl dd { padding-bottom: 0 } .ui-timepicker-div dl dt { font-size: 14px } aside.modal-popup.osc-social-login-popup.modal-slide._inner-scroll._show .modal-inner-wrap header.modal-header { margin-top: -17px; } aside.modal-popup.osc-social-login-popup.modal-slide._inner-scroll._show .modal-inner-wrap header.modal-header button.action-close { padding: 10px 20px 10px 10px !important; } div#social-login-popup .social-login.block-container.authentication div#social-login-authentication { width: initial; } aside.modal-popup.osc-social-login-popup.modal-slide._inner-scroll._show { z-index: 9999999 !important; } div#social-login-authentication { width: 58.3333333333% !important; } @media (min-width: 768px) { aside.modal-popup.osc-social-login-popup.modal-slide._inner-scroll._show .modal-inner-wrap { top: 200px; } } @media only screen and (max-width: 767px) { .navigation, .breadcrumbs, .page-header .header.panel, .header.content, .footer.content, .page-main, .page-wrapper > .widget, .page-wrapper > .page-bottom, .block.category.event, .top-container { padding-left: 15px; padding-right: 15px; } } /** Sm_agood **/ <?php } elseif ($block->getCurrentTheme() === 'Sm/agood') { ?> .create-account-block label[for="create-account-checkbox"], .billing-address-same-as-shipping-block label[for="billing-address-same-as-shipping"], .opc-payment label, .checkout-addition-block label { padding-left: 20px !important } .one-step-checkout-wrapper [type=checkbox] + label:before, .one-step-checkout-wrapper [type=checkbox]:not(.filled-in) + label:after { margin-top: 5px } .minicart-items .product > .product-image-container { float: none; } .product-item .product-item-name-block a { background-color: #f0f0f0 !important } header.modal-header { border: none } .modal-content { border: none; box-shadow: none; } <?php } elseif ($block->getCurrentTheme() === 'Smartwave/porto') { ?> ._has-datepicker ~ .ui-datepicker-trigger > span { display: none; } ._has-datepicker ~ .ui-datepicker-trigger:before { content: '\f865'; font-family: 'porto-icons'; font-size: 23px; color: #7d7d7d; } .field ._has-datepicker { display: inline-block; margin-right: 10px; width: calc(100% - 33px); } ._has-datepicker ~ .ui-datepicker-trigger { line-height: inherit; background: none; border: 0; padding: 0; } <?php } ?> /*=================================================================== | Hide the Header and Footer | ====================================================================*/ <?php if (!$block->getHelperConfig()->isShowHeaderFooter()) { ?> .onestepcheckout-index-index .page-wrapper .page-header, .onestepcheckout-index-index .page-footer { display: none; } <?php } ?> .abs-field-tooltip input, .form.form-login .field .control._with-tooltip input { width: 100% !important; } .field-tooltip{ right: 2% !important; } hr{ display: none; } .field.additional { padding-top: 12px; display: flex; justify-content: center; align-items: center; width: 100%; margin-top: 0 !important; } .field.additional .input-field { width: 100%; } .field.additional .control { width: 100%; } .opc-wrapper .form-login .fieldset .field input:not(:placeholder-shown) + label { font-size: 1rem; left: 12px !important; top: 0 !important; transform: translateY(-50%) !important; background-color: #FFFFFF; transform-origin: left top; pointer-events: none; } #shipping-new-address-form { margin-top: 12px; }</style>