­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ /* Base --------------------------------------------------------------------------*/ html, body, .us-builder-wrapper { overflow: hidden; } body { font: 400 14px/24px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; margin: 0; color: var(--usof-color-gray-80); } a { color: var(--usof-color-blue-50); } :focus { outline: none !important; } .hidden { visibility: hidden !important; display: none !important; } /* WordPress predefined class */ .screen-reader-text { position: absolute; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; word-wrap: normal !important; } /* General --------------------------------------------------------------------------*/ .us-builder-wrapper { display: flex; height: 100vh; background: var(--usof-color-gray-70); /* is needed here for correct visual on page loading */ } .us-builder-wrapper > * { flex-grow: 1; } /* Notification --------------------------------------------------------------------------*/ .us-builder-notification { display: flex; align-items: center; position: absolute; bottom: 0; left: 100%; line-height: 1.3; width: 250px; margin: .8rem; padding: .8rem; background: var(--usof-color-gray-80); box-shadow: var(--usof-box-shadow-small); color: #fff; } .us-builder-notification.auto_close:after { position: absolute; top: 0; left: 0; content: ''; border-top: 1px solid; } .us-builder-notification.auto_close:not(.hidden):after { animation: progress 4s linear; } @keyframes progress { 0% { width: 0%; } 100% { width: 100%; } } .us-builder-notification a { color: inherit; } .us-builder-notification.type_success { background: var(--usof-color-green-40); } .us-builder-notification.type_error { background: var(--usof-color-red-30); } .us-builder-notification .icon_close { flex-shrink: 0; cursor: pointer; font-size: 16px; text-align: center; line-height: 40px; width: 40px; margin-left: auto; margin-top: -.8rem; margin-right: -.8rem; margin-bottom: -.8rem; } /* Preview area --------------------------------------------------------------------------*/ .us-builder-preview { color: #fff; } .us-builder-preview-iframe-wrapper { display: flex; height: 100vh; justify-content: center; transition: .2s ease; } .us-builder-preview.responsive_mode .us-builder-preview-iframe-wrapper { height: calc(100vh - 40px); } .us-builder-preview-iframe-wrapper[class*=responsive_state_] { padding-top: 20px; height: 85vh !important; } .us-builder-preview-iframe-wrapper iframe { background: url('/wp-content/themes/Impreza/img/us-core.png') no-repeat 50% 50% / 64px; border: 0; width: 100%; transition: .2s ease; box-shadow: var(--usof-box-shadow); } .us-builder-preview-toolbar { display: flex; text-align: center; line-height: 40px; height: 40px; margin-top: -40px; transition: margin .2s; } .us-builder-preview.responsive_mode .us-builder-preview-toolbar { margin-top: 0; } .us-builder-preview-toolbar a.icon_close { width: 40px; text-decoration: none; color: inherit; } .us-builder-preview-toolbar a.icon_close:hover { background: var(--usof-color-gray-90); } .us-builder-preview-toolbar .us-builder-states { flex: 1 0 auto; justify-content: center; } .us-builder-preview-toolbar .us-builder-state { flex: 0 0 40px; } /* Side panel --------------------------------------------------------------------------*/ .us-builder-panel { display: flex; flex-direction: column; position: relative; max-width: 18vw; min-width: 300px; transition: max-width .15s; background: #fff; box-shadow: 3px 0 10px rgba(0,0,0,.1); } .us-builder-panel.hide { max-width: 0; min-width: 0; } .us-builder-panel-switcher { position: absolute; z-index: 3; left: 100%; top: 50%; transform: translateY(-50%); line-height: 60px; width: 20px; text-align: center; cursor: pointer; background: rgba(255,255,255,0.5); } .us-builder-panel-switcher:hover, .us-builder-panel.hide .us-builder-panel-switcher { background: #fff; box-shadow: 3px 0 10px rgba(0,0,0,.1); } .us-builder-panel.hide .us-builder-panel-switcher:before { display: block; transform: rotate(180deg); } .us-builder-panel-fieldset:not(.inited) { display: none; } .us-builder-panel-fieldset-header { padding: 8px 10px; font-size: 1.2em; } /* Panel Header */ .us-builder-panel-header { flex-shrink: 0; display: flex; align-items: center; line-height: 40px; height: 40px; width: 100%; overflow: hidden; background: var(--usof-color-gray-90); color: #fff; } .us-builder-panel-header-title { flex-grow: 1; font-size: 13px; font-weight: 600; text-align: center; line-height: 1.1; } .us-builder-panel-header-btn { flex-shrink: 0; font-size: 18px; text-align: center; width: 40px; color: inherit; text-decoration: none; } .us-builder-panel-header-btn:hover { background: var(--usof-color-gray-70); } .us-builder-panel-header-btn.active { background: #fff; color: var(--usof-color-gray-70); } .us-builder-panel-body { flex-grow: 1; width: 100%; overflow-x: hidden; padding-top: 0 !important; } /* Settings Menu */ .us-builder-panel-menu { padding: .75rem; } .us-builder-panel-menu-item { display: block; padding: .5em .75rem; border-radius: 0.3em; text-decoration: none !important; } .us-builder-panel-menu-item:hover { background: var(--usof-color-gray-2); } /* Add Elements list */ .us-builder-panel-elms-search { line-height: 40px; position: relative; } .us-builder-panel-elms-search > input { display: block; border-radius: 0; border: 0; margin: 0; font-weight: 600; line-height: inherit; padding: 0 2.5rem 0 .75rem; width: 100%; background: var(--usof-color-gray-2); } .us-builder-panel-elms-search > input:focus { background: #fff; } .us-builder-panel-elms-search > .icon_close { position: absolute; top: 0; right: 0; font-size: 16px; text-align: center; width: 40px; cursor: pointer; } .us-builder-panel-elms-search > .icon_close:hover { color: var(--usof-color-blue-50); } .us-builder-panel-elms-search-noresult { padding: 1em; text-align: center; } .us-builder-panel-elms-header { display: flex; font-size: 1.3em; font-weight: 400; padding: .75rem; margin: 0; color: var(--usof-color-gray-30); } .us-builder-panel-elms-header:after { content: ''; flex-grow: 1; height: 1px; border-bottom: 1px solid var(--usof-color-gray-5); margin: 1em 0 0 .4em; } .us-builder-panel-elms-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); margin-bottom: .5rem; padding: 0 .75rem; } .us-builder-panel-elms-item { cursor: move; padding: 1em; text-align: center; border-radius: 0.3em; -webkit-user-select: none; user-select: none; } .us-builder-panel-elms-item:after { content: attr( data-title ); display: block; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; } .us-builder-panel-elms-item.disabled { display: none; pointer-events: none; } body:not(.elm_add_draging) .us-builder-panel-elms-item:hover { box-shadow: var(--usof-box-shadow); } .us-builder-panel-elms-item i { font-size: 22px; color: #090; } .us-builder-panel-elms-item[data-iscontainer] i { color: #f2a200; } .us-builder-panel-elms-item[data-type="vc_row"] i, .us-builder-panel-elms-item[data-type="vc_row_inner"] i { color: #277cea; } .us-builder-panel-elms-item[data-type="us_carousel"] i, .us-builder-panel-elms-item[data-type="us_grid"] i, .us-builder-panel-elms-item[data-type="us_grid_filter"] i, .us-builder-panel-elms-item[data-type="us_grid_order"] i { color: #23ccaa; } .us-builder-panel-elms-item[data-type="us_breadcrumbs"] i, .us-builder-panel-elms-item[data-type*="us_post"] i { color: var(--usof-color-blue-50); } .us-builder-panel-elms-item[data-type="us_add_to_cart"] i, .us-builder-panel-elms-item[data-type="us_product_field"] i, .us-builder-panel-elms-item[data-type="us_product_gallery"] i, .us-builder-panel-elms-item[data-type="us_product_ordering"] i { color: #7f54b3; } /* Import content (Paste Row/Section) */ .us-builder-panel-import-content { display: flex; flex-direction: column; padding: 1.5em; height: calc(100% - 3em); } .us-builder-panel-import-content textarea { flex-grow: 1; resize: none; margin-bottom: .5em; } /* Page Custom CSS */ .us-builder-panel-page-custom-css .CodeMirror { height: calc(100vh - 80px); } /* Panel Footer */ .us-builder-panel-footer { flex-shrink: 0; display: flex; line-height: 40px; height: 40px; width: 100%; overflow: hidden; background: var(--usof-color-gray-90); color: #fff; -webkit-user-select: none; user-select: none; } .us-builder-panel-footer button { background: transparent; border: 0; line-height: 40px; } .us-builder-panel-footer-btn { flex-shrink: 0; font-size: 16px; text-align: center; width: 40px; color: inherit; text-decoration: none; cursor: pointer; } .us-builder-panel-footer-btn.icon_devices { margin-right: auto; } .us-builder-panel-footer-btn.active { background: var(--usof-color-gray-50); } .us-builder-panel-footer-btn:hover { background: var(--usof-color-gray-70); } .us-builder-panel-footer-btn.type_save { font-size: inherit; font-weight: 600; width: auto; padding: 0 20px; border: none; background: var(--usof-color-blue-50); position: relative; } .us-builder-panel-footer-btn.type_save.disabled { pointer-events: none; opacity: .5; } .us-builder-panel-footer-btn.type_save:hover, .us-builder-panel-footer-btn.type_save.loading { background: var(--usof-color-blue-60); } .us-builder-panel-footer-btn.type_save.loading .usof-preloader { opacity: 1; } .us-builder-panel-footer-btn.type_save.loading *:not(.usof-preloader) { visibility: hidden; } /* Panel messages */ .us-builder-panel-messages { font-weight: 600; text-align: center; line-height: 1.5; padding: 1.5em; } /* USOF corrections for side panel --------------------------------------------------------------------------*/ .usof-container { font-size: 13px; /* reduce all controls sizes */ } .us-builder-panel .usof-tabs-list { padding-top: 0; background: var(--usof-color-gray-5); } .us-builder-panel .usof-tabs-item { flex-grow: 1; text-align: center; padding: .4em .75em; } .us-builder-panel .usof-form-row { padding: .6em 1em; width: 100%; } .us-builder-panel .usof-form-row.for_socials + .usof-form-row { padding: 0 1em .6em; } .usof-tabs-section { padding: .5em; } .usof-tabs-section:not(.active) { display: none; } .usof-switcher { margin: 0; } .us-icon { flex-wrap: wrap; } .us-icon > .usof-select { width: 100%; } .usof-form-wrapper { box-shadow: 0; margin: 0; padding: 0; } .usof-form-group-item-title { -webkit-user-select: none; user-select: none; } /* Classes for DragAndDrop states */ body.elm_add_draging .us-builder-panel { -webkit-user-select: none; user-select: none; } html[data-useragent*="firefox"] body.elm_add_draging .us-builder-preview { pointer-events: none !important; /* fix for Firefоx only */ } .elm_transit { background: var(--usof-color-gray-2); border-radius: 5px; display: block !important; /* needed because of hidden items such as vc_column, etc. */ min-height: 78px; min-width: 78px; opacity: .5; padding: 0; pointer-events: none; position: absolute; transform: scale( .65 ); visibility: visible; z-index: 9999; } .elm_transit.mode_drag_move { transform: translate(-50%,-50%) scale(.65); } .elm_transit > i:first-child { padding-top: 15px; } .elm_add_shadow { opacity: .2; }