/* // ******************************************************************** // SIGN DESIGNER STYLES // ******************************************************************** */ /* NOTE: .ls-sign-designer-product is added to when on a sign designer product page */ /* ----------------------------------------------------- WOOCOMMERCE - SIGN DESIGNER PRODUCT PAGE ----------------------------------------------------- */ .ls-sign-designer-product .product_meta, .ls-sign-designer-product .woocommerce-breadcrumb, .ls-sign-designer-product .single-product-category { /*.ls-sign-designer-product .price {*/ display: none!important; } .ls-sign-designer-product h1.product_title { font-size: 28px; } /* ----------------------------------------------------- ELEMENTOR ----------------------------------------------------- */ .elementor-widget-divider .elementor-divider-separator { display: flex; direction: ltr; border-top: var(--divider-border-width) var(--divider-border-style) var(--divider-color); } /* ----------------------------------------------------- SIGN DESIGNER CONTAINER ----------------------------------------------------- */ .ls_sign_designer_container {} /* do not show cart form until ready (handled by javascript) */ form.cart { visibility: hidden; } #ls-form-loading-icon { display: block; width: 100%; } #ls-form-loading-icon { margin-left: auto; margin-right: auto; margin-top: 50px; padding: 30px; border: 10px solid #f3f3f3; border-radius: 50%; border-top: 10px solid #d13339; width: 30px; height: 30px; -webkit-animation: spin 2s linear infinite; /* Safari */ animation: spin 2s linear infinite; } /* show error message instead of form (if data has error) */ #ls-form-error-message { display: block; width: 100%; font-size: 18px; color: #d13339; } #ls-form-error-message h4 { color: #d13339; } /* Safari */ @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ----------------------------------------------------- FIELDS ----------------------------------------------------- */ /* field labels in general */ label { font-size: 14px; } /* field wrappers */ .ls-select-wrap { border: none; padding: 5px 5px 5px 0; } /* display sign */ .ls-display-label { display: inline; width: auto!important; box-sizing: border-box; text-shadow: 1px 2px 2px rgba(0,0,0,0.4); font-size: 36px; white-space:nowrap; } .ls-display { white-space: nowrap; display: inline; } #ls-display-background-select-tool { width: 100%; display: -ms-flexbox; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; flex-direction: column; } #ls-display-background-select-tool .ls-background-container { margin-left: auto; border-radius: 5px; background: rgba(255,255,255,0.75); } #ls-display-background-select-tool .item { display: -ms-flexbox; display: flex; justify-content: flex-end; align-items: center; margin: 0 10px 0 0; } #ls-display-background-select-tool .item.ls-background-label { font-size: 13px; } #ls-display-background-select-tool .item.ls-background-items { padding: 5px 0 6px 3px; } #ls-display-background-select-tool .item > ul { display: -ms-flexbox; display: flex; flex-direction: row; flex-wrap: wrap; margin: 0; list-style: none; } #ls-display-background-select-tool .item > ul > li { margin: 0 0 5px 10px; padding: 5px; width: 20px!important; height: 20px!important; cursor: pointer; background: #f0f0f0; } @media (max-width: 375px) { #ls-display-background-select-tool .item > ul > li { margin: 0 0 5px 5px; padding: 5px; width: 15px !important; height: 15px !important; } } #ls-display-background-select-tool .item > ul > li.first { margin: 0 0 0 6px; } .ls-display-background-option { border: solid 1px #bbb; } /* format of input fields */ .ls_sign_designer_container .ls-field-container { display: -ms-flexbox; display: flex; flex-direction: column; margin-bottom: 15px; } .ls_sign_designer_container .ls-field-container label, .ls_sign_designer_container .ls-field-container input { width: 100%; } .ls_sign_designer_container .ls-field-container input { display: -ms-flexbox; display: flex; align-items: center; border-radius: 25px!important; padding: 6px 15px 7px 15px; border: solid 2px #999!important; color: #656565; line-height: 1; height: 35px; } .ls_sign_designer_container .ls-field-container textarea { display: -ms-flexbox; display: flex; align-items: center; border-radius: 25px; padding: 6px 15px 7px 15px; border: solid 2px #999; color: #656565; line-height: 1.3; height: 75px; } .ls_sign_designer_container .ls-field-container .ls-dropdown-button { overflow: hidden; padding-top: 9px; position: relative; font-size-adjust: 0.5; } .ls_sign_designer_container .ls-field-container .ls-dropdown-option { font-size-adjust: 0.5; } .ls_sign_designer_container .ls-field-container .ls-dropdown-button .ls-dropdown-option-color-icon, .ls_sign_designer_container .ls-field-container .ls-dropdown-option .ls-dropdown-option-color-icon { width: 15px; height: 15px; display: inline-block; margin-right: 8px; border: solid 1px #aaa; top: 1px; } /* ----------------------------------------------------- CUSTOM SELECT / DROP DOWN ----------------------------------------------------- */ .ls-dropdown { position: relative; display: inline-block; width: 100%; } .ls-dropdown .ls-dropdown-button { /*background-color: #fff;*/ background: transparent; /*border: 1px solid #ddd;*/ border: none; color: #787878; padding: 5px 15px; font-size: 16px; line-height: 16px; cursor: pointer; padding: .75em; border-radius: 0; box-shadow: none; width: 100%; } .ls-dropdown .ls-dropdown-content { display: none; position: absolute; top: 23px; background-color: #fff; border: solid 1px #ccc; border-radius: 7px; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; width: 100%; max-height: 250px; } .ls-dropdown .ls-dropdown-content .ls-dropdown-option { background: transparent; color: #999; text-decoration: none; display: block; width: 100%; padding: 3px 10px; } .ls-dropdown .ls-dropdown-content .ls-dropdown-option:hover { background-color: #0274BE; color: #fff; } .ls-dropdown .ls-dropdown-content.show { display: block; } /* SELECT FIELDS - CUSTOM APPEARANCE */ .ls-select-wrap { width: 100%; cursor: pointer; background-color: #fff; background-image: linear-gradient(to top, #f9f9f9, #fff 33%); border-radius: 25px; padding: 5px 0 0 10px; border: solid 2px #999; color: #656565; line-height: 1; height: 35px; display: grid; align-items: center; } .ls-select-wrap select { /* A reset of styles, including removing the default dropdown arrow */ appearance: none; /* Additional resets for further consistency */ background-color: transparent; background-image: none; border: none; padding: 0 15px 0 0; margin: 0; width: 100%; font-family: inherit; font-size: inherit; cursor: inherit; line-height: 1.4; outline: none; } .ls-select-wrap select::-ms-expand { display: none; } .ls-select-wrap::after { content: ""; width: 12px; height: 10px; background-color: #999; clip-path: polygon(100% 0%, 0 0%, 50% 100%); justify-self: end; margin-top: -22px; margin-right: 7px; } .ls-dropdown { width: 100%; cursor: pointer; background-color: #fff; background-image: linear-gradient(to top, #f9f9f9, #fff 33%); border-radius: 25px; padding: 0; border: solid 2px #999; color: #656565; line-height: 1; height: 35px; display: grid; align-items: center; } .ls-dropdown-button { width: 100%; cursor: pointer; border-radius: 25px; padding: 7px 8px; color: #65656; line-height: 1; height: 35px; display: grid; align-items: center; } .ls-dropdown-button::after { content: ""; width: 12px; height: 10px; background-color: #999; clip-path: polygon(100% 0%, 0 0%, 50% 100%); justify-self: end; margin-top: 1px; } .ls_sign_designer_container .ls-field-container select { line-height: 1; padding: 0; height: auto; } .ls-select-wrap:after, .ls-dropdown-button:after { grid-area: select; } .ls-dropdown-button { display: -ms-flexbox; display: flex; padding-right: 22px; padding-left: 10px; } .ls-dropdown-button:after { position: absolute; right: 8px; } /* ----------------------------------------------------- FIELD POSITIONING ----------------------------------------------------- */ .ls-field-group { display: -ms-flexbox; /* IE 10 */ display: -webkit-flex; /* Safari 6.1+. iOS 7.1+ */ display: flex; flex-wrap: wrap; list-style: none; margin: 0; } /* group 1 - Display */ .ls-display-container { width: 100%; border: solid 2px #ccc; } .ls-display-container { width: 100%; padding: 15px; display: block!important; } .ls-display-container #ls-approx-width-display-field { display: -ms-flexbox!important; display: flex!important; justify-content: flex-end; width: 100%; } .ls-display-container #ls-approx-width-display-field .ls-approx-width-text { padding-left: 8px; padding-right: 8px; background: rgba(255,255,255,0.75); border-radius: 7px; font-size: 14px; color: #0274be; color: #2294dE; color: #555; } /* group 2 - Sign Letter Text, Font, Height, Thickness */ .ls-field-group-2 { margin: -0.5%; } .ls-field-group-2 > * { margin: 0.5%; } .ls-sign-letter-text-container { width: 100%; } /* get rid of required (*) */ .required { display: none!important; } .ls-font-container { width: 59%; /*margin-right: 1%;*/ } .ls-font-container #ls-uppercase-only { font-size: 13px; color: #999; color: #2294dE; } .ls-height-container { width: 19%; /*margin-right: 1%;*/ } .ls-thickness-container { width: 19%; } @media (max-width:375px) { .ls-font-container { width: 49%; } .ls-height-container { width: 24%; } .ls-thickness-container { width: 24%; } } /* group 3 - Color Style, Color, Options, Mounting */ .ls-field-group-1, .ls-field-group-2 { flex-wrap: wrap; margin: -0.5%; } .ls-field-group-1 > *, .ls-field-group-2 > * { flex: 1 1 auto; margin: 0.5%; } @media (max-width:500px) { .ls-field-group-3 { flex-wrap: wrap; } } .ls-color-style-container { } .ls-color-container { } .ls-color-container #ls-color-popup-link { font-size: 13px; color: #999; color: #2294dE; cursor: pointer; text-decoration: underline; } .ls-additional-options-container { } .ls-mounting-type-container { } .ls-mounting-type-container #ls-mounting-stud-note { font-size: 13px; color: #656565; color: #2294dE; } .ls-additional-notes-container { width: 100%; max-width: 100%; } .ls-field-group-3 { margin: 20px 50px; padding: 20px; border: solid 2px #bbb; border-radius: 10px; } @media (max-width:767px) { .ls-field-group-3 { margin: 20px 10px; } } .ls-field-group-3 .ls-field-container { display: -ms-flexbox; display: flex; flex-direction: row!important; margin-bottom: 0; align-items: center; justify-content: space-between; padding-bottom: 10px; width: 100%; } .ls-field-group-3 .ls-field-label { flex: 1 1 auto; width: auto; text-align: left; padding-right: 5px; } .ls-field-group-3 .ls-field { flex: 1 1 auto; width: auto; text-align: right; text-wrap: nowrap; color: #2294dE; } .ls-field-group-3 .ls-total-container { padding-bottom: 0; } .ls-total-container .ls-field-label, .ls-total-container .ls-field { font-size: 26px; } .ls-field-group-3 .ls-total-for-cart-container { display: none; } /* estimated delivery date */ .ls-estimated-delivery-date { padding: 0!important; border: none!important; color: #2294dE!important; }