@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap'); .fs-theme-options-settings *, .fs-theme-options-settings *::before, .fs-theme-options-settings *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } .fs-theme-options-settings * { font-family: 'Roboto', sans-serif; } .fs-theme-options-settings { width: 100%; float: left; padding: 20px 20px 0 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .fs-theme-options-holder { background-color: #fff; padding: 0px; border-radius: 4px; min-height: 100vh; position: relative; overflow: hidden; } .fs-options-tab-nav { position: absolute; top: 0px; left: 0px; background-color: #3e4453; width: 250px; height: 100%; padding: 0px; } .fs-theme-options-content { width: calc(100% - 250px); position: relative; left: 250px; padding: 20px 30px; } .fs-options-tab-nav > a, .tabs.fs-options-tab-nav > a { width: 100%; float: left; border-radius: 0px; padding: 15px; background-color: #3e4453; border: 0px; border-color: #3e4453; font-size: 14px; position: relative; color: #fff; text-decoration: none; } .fs-options-tab-nav > a::after, .tabs.fs-options-tab-nav > a::after { content: ''; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid white; position: absolute; top: 50%; right: 0px; -webkit-transform: translateY(-50%); transform: translateY(-50%); opacity: 0; } .fs-options-tab-nav > a.active::after, .tabs.fs-options-tab-nav > a.active::after, .fs-options-tab-nav > a:hover::after, .tabs.fs-options-tab-nav > a:hover::after { opacity: 1; } .fs-options-tab-nav > a.active, .tabs.fs-options-tab-nav > a.active, .fs-options-tab-nav > a:hover, .tabs.fs-options-tab-nav > a:hover, .fs-options-tab-nav > a:focus, .tabs.fs-options-tab-nav > a:focus, .fs-options-tab-nav > a:active, .tabs.fs-options-tab-nav > a:active, .fs-options-tab-nav > a.active:focus, .tabs.fs-options-tab-nav > a.active:focus, .fs-options-tab-nav > a.active:active, .tabs.fs-options-tab-nav > a.active:active { background-color: #313643; border-color: #313643; color: #fff; box-shadow: none; outline: none; } .fs-setting-title { margin: 0px 0px 20px; font-size: 24px; display: inline-block; width: 100%; font-weight: 300; } .fs-option-title { margin: 0px; font-size: 20px; display: inline-block; width: 100%; } .fs-themes-setting .theme-browser { width: 100%; display: inline-block; border-top: 1px solid rgba(49, 54, 67, 0.1); padding: 30px 0; } .fs-themes-setting p { font-size: 14px; font-weight: 300; } .wp-core-ui *.m-b-20, *.m-b-20 { margin-bottom: 20px; } .fs-themes-setting ul.info { margin-top: 0px; margin-bottom: 30px; background-color: #f5f5f5; display: inline-block; padding: 20px; padding-left: 40px; border-radius: 4px; } .fs-themes-setting .info > li { display: list-item; list-style: disc; font-size: 14px; } .fs-themes-setting .info > li:last-child { margin-bottom: 0px; } .wp-core-ui .fs-themes-setting .button { background-color: #313643; border-color: #313643; box-shadow: none; text-shadow: none; color: #fff; border-radius: 4px; font-weight: 600; letter-spacing: 0.5px; font-size: 14px; display: inline-block; padding: 8px 15px; height: 44px; min-width: 150px; text-align: center; } .wp-core-ui .fs-themes-setting .button, .wp-core-ui .fs-themes-setting .button:hover, .wp-core-ui .fs-themes-setting .button:focus, .wp-core-ui .fs-themes-setting input[type="submit"], .wp-core-ui .fs-themes-setting input[type="submit"]:hover, .wp-core-ui .fs-themes-setting input[type="submit"]:focus { background-color: #313643; border-color: #313643; box-shadow: none; text-shadow: none; color: #fff; outline: none; } .wp-core-ui .fs-themes-setting input[type=file] { padding: 11px 15px; background-color: #f5f5f5; border-radius: 4px; } .arrow-left { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid blue; } .fs-theme-import { width: 100%; float: left; } .fs-theme-import > .fs-theme { width: calc(100%* 1/3 - 20px); margin-right: 30px; margin-bottom: 30px; float: left; background-color: #fff; border-radius: 4px; overflow: hidden; -webkit-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2); position: relative; } .fs-theme-import > .fs-theme:last-child { margin-right: 0px; } .fs-theme-import > .fs-theme > .theme-screenshot { width: 100%; float: left; padding-top: 80%; position: relative; overflow: hidden; } .fs-theme-import > .fs-theme > .theme-screenshot > img { height: 100%; width: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .fs-theme-import > .fs-theme > .theme-screenshot > img.loader-img { height: 60px; width: 60px; } .fs-theme-import > .fs-theme > .fs-theme-caption { width: 100%; float: left; padding: 15px 15px 59px; position: relative; } .fs-theme-caption > h2 { margin: 0px; text-transform: capitalize; } .fs-theme-caption > .theme-actions { position: absolute; left: 0px; bottom: 0px; width: 100%; } .fs-theme-caption > .theme-actions > .button { width: 100%; border-radius: 0px; text-transform: capitalize; font-weight: normal; } .fs-theme-import > .fs-theme.active::before, .fs-theme-import > .fs-theme.active::after { content: ""; } .fs-theme-import > .fs-theme.active::before { background-color: rgba(255, 255, 255, 0.8); width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 2; } .fs-theme-import > .fs-theme.active::after { content: "Demo Imported"; position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 3; font-size: 18px; width: 100%; padding: 15px; text-align: center; font-weight: 700; color: #313643; } .fs-option-field { width: 100%; display: inline-block; margin-bottom: 20px; } .fs-option-field > label { width: 150px; float: left; padding: 13px 0px; font-size: 14px; font-weight: 700; color: #313643; } .fs-option-field > input { box-shadow: none; height: 44px; width: 300px; border-radius: 4px; } .fs-theme-options-settings input { background-color: #f5f5f5; border-color: #f5f5f5; padding: 0px 15px; font-size: 14px; } .fs-theme-options-settings input:focus { background-color: #f5f5f5; border-color: #f5f5f5; outline: none; box-shadow: none; } .fs-themes-setting .fs-option-checkbox { width: 100%; display: inline-block; margin-bottom: 20px; margin-top: 5px; font-size: 14px; font-weight: 600; color: #313643; } .license-loader-img { position: absolute; bottom: 45px; width: 10%; left: 35px; } .block-img-tag { height: auto !important; } .notice, div.error, div.updated { margin: 7px 20px 2px 0px !important; } .hide { display: none; } /* widget css */ .fs-media_uploader { position: relative; display: inline-block; width: 100%; } .fs-media_uploader>* { position: relative; z-index: 8; } .fs-media_uploader input[type="checkbox"] { position: absolute; top: 0px; left: 0px; z-index: 10; width: 100%; height: 100%; opacity: 0; } /* Gutenberg textarea CSS */ .components-panel .editor-rich-text { border: 1px solid #8d96a0; border-radius: 4px; padding: 6px 10px; margin-top: 5px; margin-bottom: 20px; max-height: 200px; overflow-x: hidden; overflow-y: auto; } /* MetaBox CSS */ #poststuff .postbox, .edit-post-layout__metaboxes #poststuff .postbox { border: 0px; border-radius: 4px; -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } #poststuff *, .edit-post-layout__metaboxes * { -webkit-box-sizing: border-box; box-sizing: border-box; } #poststuff .metabox-holder .handlediv, .edit-post-layout__metaboxes #poststuff .postbox .handlediv { padding: 25px; height: auto; width: auto; line-height: normal; } #poststuff .metabox-holder .toggle-indicator::before, .edit-post-layout__metaboxes #poststuff .postbox .toggle-indicator::before { content: "\f343"; margin-top: 2px; } #poststuff .metabox-holder.closed .toggle-indicator::before, .edit-post-layout__metaboxes #poststuff .postbox.closed .toggle-indicator::before { content: "\f347"; } #poststuff .metabox-holder .handlediv:focus, .edit-post-layout__metaboxes #poststuff .postbox .handlediv:focus, #poststuff .metabox-holder .handlediv:focus .toggle-indicator:focus, .edit-post-layout__metaboxes #poststuff .postbox .handlediv:focus .toggle-indicator:focus, #poststuff .metabox-holder .handlediv:focus .toggle-indicator::before, .edit-post-layout__metaboxes #poststuff .postbox .handlediv:focus .toggle-indicator::before { outline: none; box-shadow: none; } #poststuff .metabox-holder .hndle, .edit-post-layout__metaboxes #poststuff .postbox .hndle, .edit-post-layout__metaboxes .postbox .hndle { font-size: 18px; padding: 25px; } .edit-post-layout__metaboxes #poststuff .postbox .inside, #poststuff .metabox-holder .inside { margin: 0px; padding: 25px; } #poststuff .metabox-holder .inside label, .edit-post-layout__metaboxes #poststuff .postbox .inside label { font-size: 14px; font-weight: 600; text-transform: capitalize; color: #333; width: 100%; display: inline-block; margin-bottom: 10px; } .fs-metabox-row, .edit-post-layout__metaboxes #poststuff .postbox .inside>* { width: 100%; display: inline-block; margin-bottom: 20px; } #poststuff #postimagediv .inside { padding: 0px 1em 1em; } #poststuff .metabox-holder .inside select, .edit-post-layout__metaboxes #poststuff .postbox .inside select, #poststuff .metabox-holder .inside input[type="text"], .edit-post-layout__metaboxes #poststuff .postbox .inside input[type="text"], #poststuff .metabox-holder .inside textarea, .edit-post-layout__metaboxes #poststuff .postbox .inside textarea, .metabox-holder #titlediv #title { box-shadow: none; font-size: 14px; padding: 13px 15px; border-radius: 4px; width: 100%; min-height: 44px; height: auto; line-height: normal; background-color: #f5f5f5; border-color: #f5f5f5; color: #222; font-size: 14px; font-weight: 500; } #poststuff #titlediv #title { background-color: #fff; border: 0px; border-radius: 4px; -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); height: 60px; font-size: 26px; } #poststuff #titlediv #title-prompt-text { line-height: 60px; padding: 0 15px; } .fs-media-buttons { position: relative; } .fs-image-placeholder { background-color: #f5f5f5; width: 100%; height: 250px; background-size: cover; background-repeat: no-repeat; background-position: top center; border-radius: 4px; position: relative; padding: 10px; display: flex; align-items: center; justify-content: center; } .fs-image-placeholder img { max-width: 100%; max-height: 100%; } .wp-core-ui .fs-media-buttons .button, .fs-media-buttons .button { background-color: #4285f4; border-color: #4285f4; color: #fff; font-size: 14px; margin-bottom: 20px; font-weight: 500; padding: 12px 25px; height: auto; border-radius: 4px; line-height: normal; -webkit-box-shadow: none; box-shadow: none; } .wp-core-ui .fs-media-buttons .fs-remove-button.button, .fs-media-buttons .fs-remove-button.button { background-color: #eee; border-color: #eee; color: #4285f4; } .fs-metabox-file .fs-image-placeholder, .fs-metabox-file .fs-media-buttons { width: calc(100%* 1/2 - 10px); float: left; margin-right: 20px; } .fs-metabox-file .fs-media-buttons { margin-right: 0px; } .fs-image-none { display: none; font-size: 24px; font-weight: 300; text-transform: uppercase; letter-spacing: 4px; color: #d6d6d6; } .fs-image[src=""]+.fs-image-none { display: block; } /* Radio / Checkbox */ .edit-post-layout__metaboxes #poststuff .postbox .inside .fs-label-control { width: auto; min-width: 100px; position: relative; background-color: #f5f5f5; padding: 10px 0; padding-left: 49px; overflow: hidden; border-radius: 40px; } .fs-metabox-field .fs-label-control { margin-right: 15px; } .fs-metabox-field .fs-label-control:last-child { margin-right: 0px; } .fs-label-control input[type="radio"], .fs-label-control input[type="checkbox"] { position: absolute; top: 0px; left: 0px; width: 39px; height: 100%; margin: 0px; border-radius: 0px; border-width: 0px; box-shadow: none; background-color: transparent; } .fs-label-control input[type="radio"]::before, .fs-label-control input[type="checkbox"]::before { content: "\f153"; font: normal 20px/1 dashicons; font-size: 20px; color: currentcolor; text-indent: inherit; width: auto; height: auto; background-color: transparent; margin: 0px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .fs-label-control input[type="radio"]:checked::before, .fs-label-control input[type="checkbox"]:checked::before { content: "\f12a"; color: #4285f4; } .fs-label-control input[type="checkbox"]::before { content: "\f335"; } .fs-label-control input[type="checkbox"]:checked::before { content: "\f147"; } /* Color Picker */ .edit-post-meta-boxes-area .wp-picker-container, .postbox-container .meta-box-sortables .wp-picker-container { display: flex; align-items: center; position: relative; background-color: #f5f5f5; height: 50px; border-radius: 50px; /* z-index: 999; */ } .edit-post-meta-boxes-area .wp-picker-container .wp-picker-holder, .postbox-container .meta-box-sortables .wp-picker-holder { position: absolute; top: 100%; left: 0px; z-index: 999; } .edit-post-meta-boxes-area .wp-picker-container .button, .wp-core-ui .edit-post-meta-boxes-area .wp-picker-container .button, .postbox-container .meta-box-sortables .wp-picker-container .button, .wp-core-ui .postbox-container .meta-box-sortables .wp-picker-container .button { height: 50px; margin: 0px; border: 0px; border-radius: 50px; -webkit-box-shadow: none; box-shadow: none; flex: 1; flex-grow: 1; } .edit-post-meta-boxes-area .wp-picker-container .button.wp-color-result, .wp-core-ui .edit-post-meta-boxes-area .wp-picker-container .button.wp-color-result, .postbox-container .meta-box-sortables .wp-picker-container .button.wp-color-result, .wp-core-ui .postbox-container .meta-box-sortables .wp-picker-container .button.wp-color-result { background-color: rgb(0, 0, 0); } .edit-post-meta-boxes-area .wp-picker-container .button .wp-color-result-text, .postbox-container .meta-box-sortables .wp-picker-container .button .wp-color-result-text { font-size: 16px; border: 0px; color: #fff; background-color: transparent; } .edit-post-meta-boxes-area .wp-picker-input-wrap, .edit-post-meta-boxes-area .wp-picker-open+.wp-picker-input-wrap, .postbox-container .meta-box-sortables .wp-picker-input-wrap, .postbox-container .meta-box-sortables .wp-picker-open+.wp-picker-input-wrap { flex: 1; flex-grow: 1; display: flex; align-items: center; justify-content: space-between; padding-right: 15px; } .edit-post-meta-boxes-area .wp-picker-input-wrap.hidden, .postbox-container .meta-box-sortables .wp-picker-input-wrap.hidden { display: none; } .edit-post-meta-boxes-area .wp-picker-input-wrap > label, .postbox-container .meta-box-sortables .wp-picker-input-wrap > label { margin-bottom: 0px !important; } /* If Selected color is white */ .button.wp-color-result[style="background-color: rgb(255, 255, 255);"], .button.wp-color-result[style="background-color:rgb(255, 255, 255);"], .button.wp-color-result[style="background-color: #fff;"], .button.wp-color-result[style="background-color:#fff;"], .button.wp-color-result[style="background-color: #ffffff;"], .button.wp-color-result[style="background-color:#ffffff;"], .button.wp-color-result[style="background-color: white;"], .button.wp-color-result[style="background-color:white;"] { border: 2px solid #eee !important; } .button.wp-color-result[style="background-color: rgb(255, 255, 255);"] .wp-color-result-text, .button.wp-color-result[style="background-color:rgb(255, 255, 255);"] .wp-color-result-text, .button.wp-color-result[style="background-color: #fff;"] .wp-color-result-text, .button.wp-color-result[style="background-color:#fff;"] .wp-color-result-text, .button.wp-color-result[style="background-color: #ffffff;"] .wp-color-result-text, .button.wp-color-result[style="background-color:#ffffff;"] .wp-color-result-text, .button.wp-color-result[style="background-color: white;"] .wp-color-result-text, .button.wp-color-result[style="background-color:white;"] .wp-color-result-text { color: #555 !important; } /* Color Picker Box */ .fs-metabox-field .wp-picker-container > .wp-picker-holder { background-color: #ffffff; padding: 10px; border: 1px solid #eee; border-radius: 6px; -webkit-box-shadow: 0px 3px 15px 4px rgba(0, 0, 0, 0.1); box-shadow: 0px 3px 15px 4px rgba(0, 0, 0, 0.1); visibility: hidden; -webkit-transform: translateX(15px); transform: translateX(15px); } .fs-metabox-field .wp-picker-container.wp-picker-active > .wp-picker-holder { visibility: visible; } .fs-metabox-field .wp-picker-container > .wp-picker-holder .iris-picker { border: 0px; margin: 0px 0px 40px; padding: 0px !important; } .fs-metabox-field .wp-picker-container > .wp-picker-holder .iris-picker > .iris-picker-inner, .fs-metabox-field .wp-picker-container > .wp-picker-holder .iris-picker > .iris-palette-container { position: static; float: left; width: 100%; margin-bottom: 5px; } .fs-metabox-field .wp-picker-container > .wp-picker-holder .iris-picker > .iris-picker-inner > .iris-square { float: left; } .fs-metabox-field .wp-picker-container > .wp-picker-holder .iris-picker > .iris-picker-inner > .iris-slider { float: right; } .fs-metabox-field .wp-picker-container > .wp-picker-holder .iris-picker > .iris-picker-inner > .iris-square .iris-square-value .iris-square-handle { left: 0px; top: 0px; background-color: #fff; border: none; } .fs-metabox-field .wp-picker-container > .wp-picker-holder .iris-picker > .iris-picker-inner > .iris-square { width: calc(100% - 40px) !important; height: 205px !important; margin: 0px; } .fs-metabox-field .wp-picker-container > .wp-picker-holder > .alpha-color-picker-container { padding: 0px; border: 0px; } .fs-metabox-field .wp-picker-container > .wp-picker-holder .iris-picker .iris-palette-container .iris-palette { border-radius: 50%; width: 27px !important; height: 27px !important; } /* Meta Gallery */ .fst_gallery_images > .fst-gallery-item { width: calc(100%* 1/4 - 19px); float: left; position: relative; margin: 5px 25px 25px 0px; background-color: #f5f5f5; background-position: center; background-repeat: no-repeat; background-size: cover; height: 180px; border-radius: 4px; -webkit-box-shadow: 0px 0px 0px 4px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 0px 4px rgba(0, 0, 0, 0.1); } .fst_gallery_images > .fst-gallery-item:nth-child(4n+4) { margin-right: 0px; } .fs-metabox-row .separator { display: inline-block; width: 100%; } .fst-gallery-item .remove { position: absolute; top: -10px; right: -10px; width: 25px; height: 25px; padding: 2px 0px; text-align: center; background-color: #4285f4; color: #fff; border-radius: 2px; cursor: pointer; -webkit-transition: all ease 0.3s; transition: all ease 0.3s; } .fst-gallery-item .remove:hover { -webkit-transform: scale(1.3); transform: scale(1.3); } /* MetaBox Sidebar */ .edit-post-sidebar .components-base-control .components-text-control__input, .edit-post-sidebar .components-base-control .components-select-control__input, .edit-post-sidebar .components-base-control .components-textarea-control__input { background-color: #f5f5f5; border: 1px solid #bec7d0; height: 44px; border-radius: 4px; margin: 5px 0; padding: 6px 12px; } .edit-post-sidebar .components-base-control .components-textarea-control__input { height: auto; min-height: 200px; } .edit-post-sidebar .components-panel__body .block-img-tag { width: 100%; min-height: 150px !important; box-shadow: none; margin: 10px 0 15px; padding: 10px; border-color: #f0f0f0; display: flex; align-items: center; justify-content: center; } .edit-post-sidebar .components-panel__body .block-img-tag:active:enabled, .edit-post-sidebar .components-panel__body .block-img-tag:focus:enabled, .edit-post-sidebar .components-panel__body .block-img-tag:hover { border-color: #f0f0f0; box-shadow: none; outline: none; } /* Wp Editor */ .wp-editor-wrap .wp-editor-tabs .wp-switch-editor { padding: 8px 20px; height: auto; background-color: #f5f5f5; border-width: 1px; border-style: solid; border-color: transparent; border-bottom-color: #dedede; color: #40454a; font-weight: 600; font-size: 14px; } .tmce-active.wp-editor-wrap .wp-editor-tabs .wp-switch-editor.switch-tmce, .html-active.wp-editor-wrap .wp-editor-tabs .wp-switch-editor.switch-html { border-color: #dedede; border-bottom-color: transparent; } .wp-editor-wrap .wp-editor-container { border: 0px; box-shadow: none; } .wp-editor-wrap .wp-editor-container .mce-toolbar-grp { box-shadow: none; background-color: #f5f5f5; border-bottom-color: #dedede; } .wp-editor-wrap .wp-editor-container .mce-tinymce, .wp-editor-wrap.html-active > .wp-editor-container { border: 1px solid #dedede; box-shadow: none; } .wp-editor-wrap .wp-editor-container .mce-tinymce > .mce-container-body { box-shadow: none; border: 0px; } .wp-editor-wrap .wp-editor-container .mce-tinymce .mce-top-part::before { visibility: hidden; } .wp-editor-wrap .mce-toolbar .mce-btn-group .mce-btn, .wp-editor-container .quicktags-toolbar .ed_button { border: 0px; box-shadow: 0px 0px 0px 0px #000; padding: 3px; background-color: transparent; color: #40454a; } .wp-editor-container .quicktags-toolbar .ed_button { padding: 0px 10px; min-width: 26px; background-color: #e8e8e8; } .wp-editor-wrap .mce-toolbar .mce-btn-group .mce-btn.mce-listbox { background-color: #fff; } .wp-editor-wrap .mce-toolbar .mce-btn-group .mce-btn.mce-active, .wp-editor-container .quicktags-toolbar .ed_button { background-color: #fff; box-shadow: 2px 2px 4px 0px #d0d5da; } .wp-editor-wrap .wp-editor-container .quicktags-toolbar { border-bottom-color: #dedede; padding: 8px; } /* Custom CSS */ .hide { display: none; } .wp-admin.wp-core-ui .notice[class*="notice"] { width: 100% !important; /*display: inline-block;*/ -webkit-box-sizing: border-box; box-sizing: border-box; margin-bottom: 20px !important; } /* Color Picker css */ .edit-post-meta-boxes-area .wp-picker-container .wp-picker-holder .iris-picker > .iris-picker-inner .iris-square { float: left; } .edit-post-meta-boxes-area .wp-picker-container .wp-picker-holder .iris-picker > .iris-picker-inner .iris-slider { float: right; }