/* ========================================================================== CSS for Customizer Custom Controls /* ========================================================================== */ li.customize-control-section-title { background-color: #e2e2e2; padding: 0 10px; margin-top: 15px; } li.customize-control-section-title h3{ color: #707070; } .customize-control select:active, .customize-control select:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; } input[type="text"], input[type="number"], input[type="url"], input[type="email"], input[type="date"] { background: #fcfcff; position: relative; border-radius: 0; border: 1px solid #eee; height: 27px; line-height: 27px; outline: none; -webkit-box-shadow: none; box-shadow: none; } input[type="text"]:active, input[type="text"]:focus, input[type="number"]:active, input[type="number"]:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; } .simple-notice-custom-control .customize-control-description { line-height: 1.6 } .simple-notice-custom-control code { font-size: 90%; padding: 2px 4px; } .tinymce-control textarea { width: 100%; padding: 10px; } .text_radio_button_control:after { content: " "; display: block; clear: both; } .text_radio_button_control .radio-buttons { display: inline-block; border: 1px solid #f9f9fe; } .text_radio_button_control .radio-button-label { cursor: pointer; float: left; } .text_radio_button_control .radio-button-label > input { display: none; } .text_radio_button_control .radio-button-label span { cursor: pointer; font-weight: 500; border: 2px solid #f9f9fe; margin: 0; background-color: #eee; padding: 5px 15px; display: inline-block; } .text_radio_button_control .radio-button-label span:hover { background-color: rgba(255, 255, 255, .2); color: #2885bb; } .text_radio_button_control .radio-button-label > input:checked + span { background-color: #2084bd; color: #fff; } .text_radio_button_control .radio-button-label > input:checked + span:hover { color: #fff; } .image_radio_button_control .radio-button-label > input { display: none; } .image_radio_button_control .radio-button-label > img { cursor: pointer; border: 3px solid #ddd; } .image_radio_button_control .radio-button-label > input:checked + img { border: 3px solid #2885bb; } .image_checkbox_control .checkbox-label > input { display: none; } .image_checkbox_control .checkbox-label > img { cursor: pointer; border: 3px solid #ddd; } .image_checkbox_control .checkbox-label > input:checked + img { border: 3px solid #2885bb; } /* ========================================================================== Toggle Switch ========================================================================== */ .toggle-switch-control .customize-control-title { display: inline-block; } .toggle-switch { position: relative; width: 64px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; float: right; } .toggle-switch .toggle-switch-checkbox { display: none; } .toggle-switch .toggle-switch-label { display: block; overflow: hidden; cursor: pointer; border: 2px solid #ddd; border-radius: 20px; padding: 0; margin: 0; } .toggle-switch-inner { display: block; width: 200%; margin-left: -100%; transition: margin 0.3s ease-in 0s; } .toggle-switch-inner:before, .toggle-switch-inner:after { display: block; float: left; width: 50%; height: 22px; padding: 0; line-height: 22px; font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; box-sizing: border-box; } .toggle-switch-inner:before { content: "ON"; padding-left: 8px; background-color: #2885bb; color: #FFFFFF; } .toggle-switch-inner:after { content: "OFF"; padding-right: 8px; background-color: #EEEEEE; color: #999999; text-align: end; } .toggle-switch-switch { display: block; width: 16px; margin: 3px; background: #FFFFFF; position: absolute; top: 0; bottom: 0; right: 38px; border: 2px solid #ddd; border-radius: 20px; transition: all 0.3s ease-in 0s; } .toggle-switch-checkbox:checked + .toggle-switch-label .toggle-switch-inner { margin-left: 0; } .toggle-switch-checkbox:checked + .toggle-switch-label .toggle-switch-switch { right: 0px; } /* ========================================================================== Single Accordion ========================================================================== */ .single-accordion-toggle { font-size: 14px; font-weight: 600; line-height: 24px; padding: 10px 5px 5px 0; cursor: pointer; } .accordion-icon-toggle { font-size: 18px; margin-left: 5px; margin-top: 5px; -webkit-transition: -webkit-transform 0.3s ease-in-out; -moz-transition: -moz-transform 0.3s ease-in-out; -o-transition: -o-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; } .single-accordion-toggle-rotate .accordion-icon-toggle { filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=-0.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); display: inline-block; } .single-accordion { display: none; } .single-accordion ul { margin: 0; padding: 0; } .single-accordion li { background-color: #e4e4e4; color: #888; width: 115px; display: inline-block; padding: 5px; margin: 5px; text-align: center; } .single-accordion li i { margin-left: 5px; } #customize-control-blogdata_archive_page_layout img, #customize-control-blogdata_single_page_layout img, #customize-control-blogdata_page_layout img, #customize-control-blog_post_layout img { position: relative; display: inline-block; width: 37%; margin-right: 5%; margin-bottom: 5%; border-radius: 4px; padding: 5px; background: #eee; border: 2px solid #dddddd; } #customize-control-subsc_icon_layout img, #customize-control-scrollup_layout img{ padding: 3px; background: #eee; border: 2px solid #dddddd; border-radius: 4px; margin-right: 5%; } #customize-control-blogdata_archive_page_layout input, #customize-control-blogdata_single_page_layout input, #customize-control-blogdata_default_bg_image input{display:none;} #customize-control-blogdata_default_bg_image img{ width: 50px; } input#_customize-input-blogdata_date_time_show_type-radio-blogdata_default, input#_customize-input-blogdata_date_time_show_type-radio-wordpress_date_setting, input#_customize-input-post_image_type-radio-blogdata_post_img_hei, input#_customize-input-post_image_type-radio-blogdata_post_img_acc { display: inline-block; } li.customize-control-section-title { background: #f9f9f9 !important; margin-top: 15px; border-bottom: 1px solid #ddd; border-left: 4px solid #00a0d2; box-shadow: 0 1px 1px rgba(0,0,0,.04); } /* Top bar widget Content */ .customize-pane-child>li[id*=_text_transform]{ width:48% !important; clear: none !important; padding-left: 5px !important;} .customize-pane-child>li[id*=_fontstyle]{ width: 48% !important; clear: none !important; padding-right: 5px !important;} .customize-pane-child>li[id*=_fontweight]{ display: flex;justify-content: space-between;} .customize-pane-child>li[id*=_fontweight] select{ width: 50%;} .wp-core-ui select { border: 1px solid rgba(0, 0, 0, 0.1); padding: 0px 8px; display: inline-block; width: 100%; overflow: hidden; position: relative; z-index: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } /* ========================================================================== Upgrade To Pro ========================================================================== */ .upgrade-to-pro-box { background-color: aliceblue; padding: 10px; text-align: center; margin: 10px; border-radius: 2px; border: 2px solid #eee; } .upgrade-to-pro-box .title { display: block; } .upgrade-to-pro-box a.btn { background: linear-gradient(-200deg,#a90e6d 0%,#202f5b 100%) !important; color: #fff; padding: 8px 12px; font-size: 12px; border-radius: 2px; text-decoration: none; }