body{ --onecom-green:#76b82a; } .theme-browser-page .hidden_theme{ display:none; } /* hide notices of admin */ .media-upload-form .notice, .media-upload-form div.error{ display: none } .ocsh-wrap a:not(.error.default-password-nag p a), #onecom-ui a:not(.error.default-password-nag p a), .ocsh-wrap a:not(.error.default-password-nag p a):focus, #onecom-ui a:not(.error.default-password-nag p a):focus{ outline: none; text-decoration: none; box-shadow: none; } /* one.com UI Enhancement */ #onecom-ui { color: #3c3c3c; font-family: 'Open Sans', sans-serif; margin-left: 20px; margin-right: 40px; -webkit-font-smoothing: antialiased; /* to match font weight exactly like figma in mac) */ } .one_wrap .one-plugin-card .desc p{ line-height: 24px; font-size: 14px; font-weight: 400; margin-top: 0; } #onecom-ui .page-subtitle { margin-top: 16px; margin-bottom: 49px; padding: 0; max-width: 580px; font-size: 16px; line-height: 24px; font-weight: 400; } #onecom-ui h1, #onecom-ui h2, #onecom-ui h3, #onecom-ui p { color: #3c3c3c; } #onecom-ui h2 { font-size: 24px; margin-bottom: 24px; } #onecom-ui .one-title { font-size: 32px; font-weight: 600; line-height: 40px; letter-spacing: -0.60px; margin-top: 27px; padding: 0; } #onecom-ui input[type=checkbox] { width: 20px; height: 20px; -webkit-appearance: none; padding: 9px; display: inline-block; position: relative; background: #FFF; border: 1px solid #3C3C3C; /* vertical-align: top; */ outline: 0; border-radius: 0; margin: 0; margin-right: 16px; } #onecom-ui input[type=checkbox]:checked { background: #76B82A; border: 1px solid #3C3C3C; box-sizing: border-box; } #onecom-ui input[type=checkbox]:checked:before{ content: none; } #onecom-ui input[type=checkbox]:focus { box-shadow: none; } #onecom-ui input[type=checkbox]:checked:after{ content: url(../images/tick-10x8.png); position: absolute; left: 4px; top: 5px; max-width: 8px; } #onecom-ui input[type=radio] { width: 20px; height: 20px; -webkit-appearance: none; padding: 9px; display: inline-block; position: relative; background: #FFF; border: 1px solid #3C3C3C; outline: 0; margin-right: 10px; } #onecom-ui input[type=radio]:checked { background: #76B82A; border: 1px solid #3C3C3C; box-sizing: border-box; } #onecom-ui input[type=radio]:checked:before{ content: none; } #onecom-ui input[type=radio]:focus { box-shadow: none; } #onecom-ui input[type=radio]:checked:after{ top: 5px; left: 5px; width: 8px; height: 8px; border-radius: 50%; background: white; content: ""; position: absolute; box-sizing: border-box; } #onecom-ui .fieldset { line-height: 1; } .one_wrap .onecom_tab { display: inline-block; /* margin-right: 48px; */ height: 40px; padding: 0 24px; position: relative; cursor: pointer; font-size: 16px; font-weight: 600; line-height: 38px; letter-spacing: 0; color: #8A8989; } .one_wrap .onecom_tabs_container a, .one_wrap .onecom_tabs_container a:visited, .one_wrap .onecom_tabs_container a:active { color: #8A8989; cursor: pointer; border-bottom: 1px solid #E5E5E5; margin-bottom: -1px; } .one_wrap .onecom_tabs_container a span { background-color: #fff; padding: 0 12px; margin-left: 8px; color: #BBBBBB; border-radius: 16px; line-height: 24px; display: inline-block; } .one_wrap .onecom_tabs_container a.active span{ color: #3C3C3C; } .onecom_tabs_container a:hover { color: #3c3c3c; /* border-bottom: none; */ } .one_wrap .onecom_tabs_container a.active { color: #3c3c3c; border-bottom: 1px solid #3c3c3c; margin-bottom: -1px; } .onecom_hr { border-bottom: 1px solid #CECECE; } #onecom-ui .button[disabled]{ transition: none; } /* Ends: one.com UI Enhancement */ .one_wrap a { border-bottom: 1px solid transparent; color: #0078C8; } .one_wrap, .one-logo .textleft, .wrap_inner .nav-tab, .theme-overlay, .image-filter, .theme-filters, #preview_box { font-family: 'Plus Jakarta Sans', sans-serif; } .theme-browser .theme.one-theme { max-width: 380px; max-height: 245px; height: auto; overflow: hidden; /* border-color: #cfdbc0; */ border: none; } .theme-browser .theme.one-theme .theme-screenshot { display: table; width: 101%; height: 100%; text-align: center; background: #fff; } .theme-browser-page .theme-overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); visibility: hidden; opacity: 0; display: flex; flex-flow: wrap; -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } .one-theme.theme:hover .theme-overlay, .one-theme.theme.active .theme-overlay { visibility: visible; opacity: 1 } .theme-overlay h4 { color: white; padding: 0 1.5em; font-size: 1em; width: 100%; font-weight: bold; margin: 2em 0; text-align: center; } .theme-overlay h4 span { display: block; margin-top: 10px; font-size: 85%; font-weight: 600; text-align: center; } .theme-browser-page .theme-action { color: white; display: flex; align-items: flex-start; width: 100%; padding: 1.5em; font-weight: bold; } .theme-action a, .theme-overlay a { color: #fff; border: 0; text-decoration: none } .theme-browser-page .one-preview { display: flex; justify-content: center; width: 100%; } .theme-browser-page .one-install, .theme-browser-page .one-installed { display: flex; justify-content: center; width: 100%; } .one-preview .dashicons, .one-install .dashicons, .one-installed .dashicons { display: block; margin: 0 auto } .theme-browser .one-installed.current_active_theme{ pointer-events: none; } #onecom-ui .theme-browser:after{ content: ""; clear: both; display: block; } /* Tabs */ .wrap_inner .nav-tab-wrapper { border-bottom: 1px solid rgb(204, 204, 204); } .wrap_inner a.nav-tab.nav-tab-active { background: rgb(241, 241, 241); border-bottom: transparent; padding-bottom: 14px; } .wrap_inner .nav-tab:focus { box-shadow: none; } .wrap_inner .nav-tab { background: #E0E0E0; letter-spacing: 0.35px; padding: 12px 25px; font-size: 16px; -webkit-transition: background 100ms linear; -moz-transition: background 100ms linear; transition: background 100ms linear; } .wrap_inner .nav-tab:hover { background: #F7F7F7; } .wrap_inner .tab { margin: 0; padding: 24px 0; display: none } .wrap_inner .tab.active-tab { display: block } .wrap .one-logo { padding: 0 !important; display: flex; align-items: center; } .one-logo .textleft, .one-logo .textright{ flex:1; line-height: initial; } .one-logo .textright{ padding-right: 2px; } .one-logo .topRightLogo img{ height:16px; max-width: 130px; } .one_wrap span.plugin-icon { background-size: cover; background-position: center center; } .image-browser .b-image img { max-width: 100%; height: auto; border: 1px solid #ddd; display: block; -webkit-box-shadow: 0 1px 1px -1px rgba(0, 0, 0, .1); box-shadow: 0 1px 1px -1px rgba(0, 0, 0, .1); } .image-browser .b-image { box-shadow: none !important; border: none !important; position: relative; display: inline-block; margin: 0 4px 4px 0; margin: 0 2em 2em 0; margin: 0 3.5em 2em 0; vertical-align: top; } .image-browser .b-image>.image-overlay { color: white; display: flex; justify-content: center; align-items: center; -webkit-transition: opacity 0.20s ease-in-out; transition: opacity 0.20s ease-in-out; } .image-browser .b-image:hover>.image-overlay { visibility: visible; opacity: 1; -webkit-transition: opacity 0.20s ease-in-out; transition: opacity 0.20s ease-in-out; } .theme-overlay.image-overlay>span { flex: 1 1 auto; cursor: pointer; font-size: 2em; } #one-screenshot { position: absolute; } .dashicons.dashicons-image-rotate-right.portrait { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .theme-filters>div { display: inline-block; } .theme-filters { margin-top: 40px; margin-bottom: 24px; color: #333; } .theme-filters input:focus { line-height: 1.5em } .theme-action>div>span { margin-right: 8px; } .one_wrap .plugin-browser { display: flex; flex-direction: row; flex-wrap: wrap; } .one_wrap .one-plugin-card { float: left; margin: 0 40px 40px 0px; width: 48.5%; width: -webkit-calc(50% - 20px); width: calc(50% - 20px); background-color: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .one_wrap .one-plugin-card:nth-of-type(even) { margin-right: 0; } .one_wrap .one-plugin-card .one-marketgoo img { border-radius: 50px; } .one_wrap .one-plugin-card.single-plugin { flex: 0 0 47%; } .one_wrap .plugin-card-top.wp-rocket img { width: 72px; height: 72px; } .one_wrap .one-plugin-card .name { display: flex; margin-left: 88px; justify-content: space-between; } .one_wrap .one-plugin-card ul.plugin-action-buttons, .one_wrap .one-plugin-card ul.plugin-action-buttons li { margin-bottom: 0; } .one_wrap .one-plugin-card .desc { margin-left: 88px; } .one_wrap .one-plugin-card .desc p { margin-bottom: 0; } .one_wrap .updated-message p:before, .one_wrap .installed p:before, .one_wrap .button.updated-message:before { display: none } #onecom-ui .plugin-card-top { padding: 24px; } .one_wrap .one-plugin-card h3 { margin: 0 16px 16px 0; font-size: 24px; font-weight: 600; line-height: 40px; flex-shrink: 1; } #onecom-ui .btn[disabled] { color: #a7aaad !important; border-color: #dcdcde !important; background: #f6f7f7 !important; box-shadow: none !important; cursor: default; transform: none !important; } .one_wrap .one-plugin-card .action-links { flex-shrink: 0; /* width: 120px; */ } .one_wrap .oc-new-ribbon { position: absolute; top: 12px; left: 0; height: 20px; background: #95265e; display: flex; justify-content: center; align-items: center; } .one_wrap .oc-new-ribbon:after { position: absolute; right: -11px; top: 0; display: block; z-index: 90; content: ''; border-top: 10px solid #95265e; border-bottom: 10px solid #95265e; border-left: 2px solid #95265e; border-right: 10px solid transparent; } .one_wrap .oc-new-ribbon-text { line-height: 10px; display: inline-block; letter-spacing: 0.03em; color: #fff; font-size: 10px; text-transform: uppercase; font-weight: 600; margin-right: -3px; padding: 0 10px; } .one_wrap .plugin-icon-wrapper { border: 1px solid #EFEFEF; position: absolute; top: 24px; left: 24px; width: 90px; height: 90px; margin: 0 24px 24px 0; padding: 1em; text-align: center; /* overflow: hidden; */ display: flex; justify-content: center; /* align-items: center; */ } #recommended .plugin-icon-wrapper.icon-available{ width: 72px; height: 72px; border: 0; background-image: url('../images/placeholder.jpg'); background-repeat: no-repeat; background-size: cover; } .one_wrap .plugin-icon-wrapper.icon-available { padding: 0; width: 72px; height: 72px; border: 0; } .one_wrap .plugin-icon-wrapper .plugin-icon-wrapper-inner { width: inherit; } .plugin-icon-wrapper img { max-width: 100%; height: auto; width: auto; background: #fff; } span.onecom-acronym { vertical-align: middle; display: table-cell; font-size: 2.2em; line-height: 1.2; color: #fff; -webkit-text-shadow: -1px -1px 2px rgba(78, 78, 78, 0.6); text-shadow: -1px -1px 2px rgba(78, 78, 78, 0.6); text-transform: uppercase; } .one-theme span.onecom-acronym { padding: 0 2em; -webkit-text-shadow: 1px 1px 1px #a7a7a7; text-shadow: 1px 1px 1px #a7a7a7; color: #252525; } .one_wrap .plugin-icon { position: relative; max-width: 100%; height: auto; width: auto; margin: 0; top: auto; left: auto } .onecom-notifier { visibility: hidden; opacity: 0; z-index: -99; position: fixed; top: -5%; left: 50%; transform: translateX(-50%); background: #fff; padding: 3em; box-shadow: 0 0 15px #bdbdbd; -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .onecom-notifier.show { opacity: 1; visibility: visible; z-index: 999999; top: 0%; } .onecom-notifier[type=success] { border-top: 4px solid #75a13d; } .onecom-notifier[type=error] { border-top: 4px solid red; } /* Loader */ .loading-overlay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; z-index: -99; background: rgba(255, 255, 255, 0.9); -webkit-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; } .loading-overlay.show { opacity: 1; visibility: visible; z-index: 99999; } .loading-overlay.forced-center{ display:flex; align-items: center; } .loading-overlay .loader, .loading-overlay .loader:after, .loading-overlay .loader:before { display: block; margin: 0 auto; background-color: #888; width: 12px; height: 12px; border-radius: 12px; -webkit-animation-name: loader-dot; animation-name: loader-dot; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: .2s; animation-delay: .2s; } .loading-overlay .loader:after, .loading-overlay .loader:before { margin: 0 24px; content: ''; } .loading-overlay .loader:before { -webkit-animation-delay: 0s; animation-delay: 0s; margin-left: -24px; } .loading-overlay .loader:after { -webkit-animation-delay: .4s; animation-delay: .4s; margin-top: -12px; } .loading-overlay .loading-overlay-content { margin: 0 auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: -webkit-calc( 100% - 4em ); width: calc( 100% - 4em ); padding: 2em; text-align: center; } .loading-overlay.element-loader { position: absolute; width: 100%; /*height: 100;*/ top: 0; left: 0; z-index: 10; } @-webkit-keyframes loader-dot { 0% { background-color: #f9f9f9 } 50% { background-color: #878787 } to { background-color: #f9f9f9 } } @keyframes loader-dot { 0% { background-color: #f9f9f9 } 50% { background-color: #878787 } to { background-color: #f9f9f9 } } #TB_window #TB_closeWindowButton:focus .tb-close-icon { outline: none; box-shadow: none } #TB_iframeContent { width: inherit !important; height: -webkit-calc(100% - 30px) !important; height: calc(100% - 30px) !important; } /* ----------------------- plugins page redesign ------------------*/ .gv-activated .gv-loader-container{ position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .oc-plugins-box .gv-tile{ width: 72px; height: 72px; max-width:72px !important; } .gv-activated .gv-card.oc-plugins-box , .gv-activated .gv-card.oc-plugins-box-skeleton{ flex-direction: row; align-items: flex-start; } .gv-activated .oc-plugins-box-skeleton{ justify-content: space-between; } .gv-activated .gv-card.oc-plugins-box-skeleton .gv-card-image{ width: 25%; } .gv-activated .oc-plugins-box-skeleton .gv-card-content{ flex-grow: .5; } .gv-activated .oc-plugins-box-skeleton .gv-card-footer{ flex-grow: .2; } .oc-header-wrap { display: flex; align-items: center; justify-content: space-between; } div#onecom-plugins-ui{ max-width: 1440px; margin: auto; } .gv-activated .oc_notice{ margin-bottom:16px } .gv-activated .oc_notice a{ text-decoration: none; font-weight: 600; color:#FFFFFF; } .gv-activated .oc_notice a:hover{ color:#ffffff } /* =============== CSS Customization for Preview Overlay ================== */ .theme-action span a { color: #ffffff; } .one-theme-listing-bar { padding: 0; background: #77a240; height: 48px; background-image: -moz-linear-gradient(top, #85ab52, #76b82a); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#85ab52), to(#76b82a)); background-image: -webkit-linear-gradient(top, #85ab52, #76b82a); background-image: -o-linear-gradient(top, #85ab52, #76b82a); background-image: linear-gradient(to bottom, #85ab52, #76b82a); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); } .one-theme-listing-bar span { font-size: 1.85em; padding: 12px 30px; width: 1em; height: 1em; line-height: 1em; color: white; text-shadow: 0px 1px 0px #5d5d5d; } .hide { display: none; } #preview_box { height: 100vh; width: 100vw; overflow: hidden; } .scroll { overflow-y: auto; } #preview_box .preview-container { margin: 0; width: 100%; max-width: 100%; height: 100%; background: #f7f7f7; } .scroll { overflow-y: auto; } .preview-container .desktop-content { margin: 0 auto; background-size: 100% auto; background-position: left top; background-repeat: no-repeat; height: calc(100% - 68px); max-width: 100%; overflow: hidden; opacity: 1; padding: 0; } .preview-container .preview{ float: none; } .bottom-header .right-section-preview .gv-button-toggle-group { justify-content: center; } .right-section-preview .view-icon { padding: 9px 14px 7px; } .preview-container .desktop-content iframe { border: none; top: 0; right: 0; bottom: 0; left: 0; height: 100%; overflow-y: scroll; overflow-x: hidden; width: 100%; } #preview_box .preview-container .tablet-content { height: calc(100% - 35px); max-width: 768px; width: 100%; overflow: visible; background-repeat: no-repeat; background-position: center top; background-size: 100% auto; padding: 0; margin: 0 auto; opacity: 1; } .preview-container .tablet-content iframe { width: 100%; height: 100%; border: none; text-align: center; overflow: scroll; border-radius: 0; margin: 0 auto; } .preview-container .phone-content { height: 100%; max-width: 360px; width: 100%; overflow: visible; background-repeat: no-repeat; background-position: center top; background-size: 100% auto; padding: 0; margin: 0 auto; opacity: 1; } .preview-container .phone-content.horizontal { padding-top: 0px; height: 377px!important; width: 100%; background: #ffffff url(../images/iphone-model-h.a6b62f568f.png) no-repeat scroll center top; } .preview-container .phone-content iframe { width: 100%; height: 100%; border: none; text-align: center; overflow: scroll; } .gv-activated .gv-modal-body .gv-notice.oc-modal-warning{ padding-left: 24px; padding-right: 24px; gap: 24px; } .preview-container iframe.horizontal { height: 297px; width: 478px; margin-top: 51px; } #preview_box .header_btn_bar { height: 76px; background: #fff; position: absolute; bottom: 0; width: 100%; border-top: 1px solid #CECECE; } #preview_box .header_btn_bar .bottom-header { width: 100%; display: flex; } #preview_box .header_btn_bar .bottom-header .left-section-preview { text-align: left; padding-right: 0; } #preview_box .header_btn_bar .bottom-header .right-section-preview { text-align: center; padding-left: 0; } #preview_box .header_btn_bar .bottom-header>* { flex: 1; padding: 12px; } .header_btn_bar .btn.btn_arrow[data-demo-id="0"]{ pointer-events: none; } #preview_box .screen-rotate { background: #ffffff url(../images/screen-rotate.png) no-repeat scroll center; background-size: 60px; position: absolute; height: 60px; width: 60px; right: 0px; cursor: pointer; margin-right: 50px; } #preview_box .left-header { float: left; margin: 20px 0 0 30px; } #preview_box .left-header .close_btn { margin-right: 15px; text-decoration: none; vertical-align: top; line-height: 28px; color: #0078C8; border-bottom: 1px solid transparent } .left-header .close_btn:hover { border-bottom: 1px solid ; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #preview_box .right-header { float: right; margin-right: 30px; } .theme-browser .theme-browser-page-filtered{ display:none; } .h-parent{ width:100%; position: relative; overflow-x: scroll !important; overflow-y: hidden; white-space: nowrap; } /* Hide scrollbar for Chrome, Safari and Opera */ .h-parent::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ .h-parent { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .h-child{ width: max-content; white-space: nowrap; overflow-y: hidden; min-width: 100%; } .h-parent .onecom_tabs_container { border-bottom: 1px solid #E5E5E5; } .h-parent-wrap { position: relative; width: 100%; } .h-parent-wrap:after { content: ''; background: linear-gradient(270deg, #F0F0F1 0%, rgba(240, 240, 241, 0) 100%); width: 40px; position: absolute; right: 0; height: 40px; top: 0; } .h-parent-wrap.oct-hide-after:after { display: none; } /* Need separate CSS to menu scroll for touch or mobile devices https://ferie.medium.com/detect-a-touch-device-with-only-css-9f8e30fa1134 */ @media (hover: none) and (pointer: coarse) { .h-child{ width: 100%; overflow-x: scroll; background: transparent; /* Optional: just make scrollbar invisible */ -ms-overflow-style: none; /* Internet Explorer 10+ */ scrollbar-width: none; /* Firefox */ } .h-child::-webkit-scrollbar { display: none; /* Safari and Chrome */ } } .theme-filters .oc_theme_filter { display: block; border-bottom: 1px solid #E5E5E5; cursor: pointer; margin-top: 0; margin-bottom: 0; } .oc_theme_filter li { display: inline-block; padding: 0 24px 16px 24px; min-width: 43px; text-align: center; color: #8A8989; font-size: 16px; line-height: 24px; margin-bottom: -1px; font-weight: 600; font-family: 'Open Sans', sans-serif; border-bottom: 1px solid #E5E5E5; } .oc_theme_filter span { background-color: #fff; padding: 0 12px; margin-left: 8px; color: #BBBBBB; border-radius: 16px; line-height: 24px; display: inline-block; } .oc_theme_filter li:first-child { margin-left: 0; padding-left: 24px; } .oc_theme_filter li:last-child { margin-left: 0; } .oc_theme_filter li:hover { color: #3C3C3C; } .oc_theme_filter .oc-active-filter{ color: #3C3C3C !important; border-bottom: 1px solid #3C3C3C; font-weight: 600; line-height: 24px; } .oc_theme_filter .oc-active-filter.oc-premium-filter{ color:#76B82A !important; } .oc_theme_filter .oc-active-filter span{ font-weight:600; color:#3c3c3c; } @media only screen and (max-width:1300px) { .one_wrap .one-plugin-card .desc, .one_wrap .one-plugin-card .name { margin-right: 0; } .one_wrap .one-plugin-card .name { flex-direction: column; } .one_wrap .one-plugin-card h3 { margin: 0 0 8px 0; } .one_wrap .plugin-action-buttons { clear: both; text-align: left; float: none; margin-top: 0; } .one_wrap .one-plugin-card .button_1 { margin-bottom: 16px; } } @media only screen and (max-width: 1355px) and (max-width: 1121px) { .oc_theme_filter li { font-size: 14px; /* padding: 0 6px 16px; */ } } @media only screen and (max-width: 1024px){ #onecom-ui { margin-left: 0; margin-right: 10px; } .one-theme.oci-theme-box-nw .gv-button { pointer-events: none; /* Prevents clicking */ } } @media only screen and (max-width: 782px) { .one_wrap .one-plugin-card, .one_wrap .one-plugin-card.single-plugin { flex: 0 0 100%; } .onecom_tab { margin-right: 0; } .loading-overlay.theme-loader { height: auto; } div#wpbody-content { padding-bottom: 36px; } .one_wrap .plugin-icon-wrapper { position: relative; top: 0; left: 0; margin-bottom: 16px; } .one_wrap .one-plugin-card .name { flex-direction: column; margin-left: 0; } .one_wrap .one-plugin-card .desc { margin-left: 0; } #onecom-ui .plugin-card-top { padding: 24px; } #oc-plugins-root .gv-card.oc-plugins-box .gv-card-content{ padding: 16px 24px 0; } } @media only screen and (max-width: 640px) { #preview_box .right-header { clear: both; display: block; } .onecom_hr { margin-top: 10px; } #preview_box .left-header { clear: both; display: block; } .wrap_inner.one_wrap .nav-tab-wrapper .nav-tab{ margin-bottom: 0.5em; border-bottom: inherit !important; padding-bottom: 10px !important; } .gv-modal-content .gv-button-primary{ order: 1; } .gv-modal-content .gv-button-cancel{ order: 2; } } @media only screen and (max-width: 599px) { .gv-activated .gv-modal-body .gv-notice.oc-modal-warning{ gap: 8px; } } @media only screen and (max-width: 500px) { .plugin-browser .plugin-action-buttons { float: none; margin-left: 0; text-align: left; } .one_wrap .one-plugin-card .desc { margin-left: 0 !important; /* margin-top: 42px; */ } .wrap_inner .nav-tab { padding: 12px 0; width: 47%; font-size: 3vmin; text-align: center; } } .phone-content .gv-notice-content{ order: 3; } .phone-content .gv-notice-close{ order: 2; } @media only screen and (max-width:375px) { .one_wrap .one-plugin-card .name { margin-left: 0; } .one_wrap .one-plugin-card .action-links { margin-left: 0; } .one_wrap .one-plugin-card .desc { margin-top: 0; } #recommended .plugin-card-top { padding-top: 38px; } #recommended .plugin-icon-wrapper.icon-available { width: auto; height: auto; background-image: none; } } @media (min-width: 280px) and (max-width: 414px) and (orientation: portrait){ .one_wrap .one-plugin-card .name { margin-left: 0; } .one_wrap .one-plugin-card .desc { margin-top: 0; } #recommended .plugin-card-top { padding-top: 38px; } #recommended .plugin-icon-wrapper.icon-available { width: auto; height: auto; background-image: none; text-align:left; } /* plugin redesign mobile css */ #onecom-ui .plugin-card-top{ padding:33px 24px 24px 26px; display:table; } .one_wrap .one-plugin-card h3 > span:first-child { display: table-cell; padding-bottom: 24px; padding-top:24px; } .one_wrap #discouraged .one-plugin-card h3 > span:first-child { padding: 0; } #onecom-ui #discouraged .plugin-card-top { padding: 24px; display: block; } #discouraged .one-plugin-card h3:after { content: none; } .one_wrap .one-plugin-card h3 span:last-child { display: table-header-group; text-align: left; margin: 0; } .plugin-browser ul.plugin-action-buttons { margin-top: 0; width: 100%; } #onecom-ui .plugin-card-top .action-links { display: table-footer-group !important; margin-left: 0 !important; } .one_wrap .one-plugin-card .desc p { margin-top: 0; margin-bottom: 24px; } #onecom-ui .page-subtitle { margin-top: 16px; margin-bottom: 26px; padding: 0; max-width: 288px; } #recommended .plugin-card-top{ padding-top:50px; } /* plugin redesign css end */ } .right-header img { vertical-align: middle; } #onecom-ui .btn, .ocsh-wrap .btn, #onecom-ui .btn:focus, .ocsh-wrap .btn:focus, #onecom-ui .btn:active, .ocsh-wrap .btn:active { outline: none; box-shadow: none; } .btn.button_1, .btn.button_3 { padding: 8px 32px; border-radius: 100px; text-decoration: none; display: inline-block; line-height: 24px; font-size: 16px; font-weight: 600; cursor: pointer; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; border: none; } .btn.button_1:hover, .btn.button_3:hover { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; background-color: #284f90; border: none; color: #ffffff; } .btn.button_1 { background-color: #0078C8; color: #ffffff; } .btn.button_3 { background-color: #fff; color: #0078C8; border-color: #0078C8; } .btn.button_3:hover { background-color: #396fc9; color: #fff; } .one-plugin-card .button_1 { padding: 5px 30px; line-height: 20px; font-size: 12px; font-weight: 600; } #discouraged .one-plugin-card .button_1 { font-size: 14px; line-height: 22px; } .activate-plugin.btn.button_1 { background-color: #76B82A; } .activate-plugin.btn.button_1:hover { opacity: 0.7; background-color: #76B82A; } .btn.btn_arrow { background-color: #ffffff; color: #666666; padding: 3px; cursor: pointer; display: inline-block; vertical-align: top; border: 1px solid #bdbdbd; } .btn.button_2 { background-color: #ffffff; padding: 0; margin: 0; vertical-align: bottom; box-shadow: inset 0 0 0 #4d4d4d; font-size: 12px; font-weight: 300; min-width: 35px; border: 1px solid transparent; cursor: pointer; display: inline-block; } .btn.button_2 .dashicons, .dashicons-before:before { vertical-align: middle; } .btn.inactive { opacity: 0.6 !important; cursor: not-allowed !important; } .btn.button_1.inactive:hover { background-color: #396fc9 !important; } .btn.button_2.inactive:hover { background-color: #fff !important; } .left-header .btn.button_1{ margin:0 0 0 20px; } .no-top-margin { margin-top: 0 !important } .no-bottom-margin { margin-bottom: 0 !important } .no-left-margin { margin-left: 0 !important } .no-right-margin { margin-right: 0 !important } .text-center { text-align: center; } #cboxContent { margin-top: 0 !important; background-color: #f0f0f0 !important; } #cboxLoadedContent { background-color: #f0f0f0 !important; padding: 0 !important; } .divider { background-color: #34525F; height: 5px; margin: 0; border: 0; } .btn.current { background-color: #ebecee; border: 1px solid #ececec; } .divider_shadow { background-color: #ebecee; top: 116px; width: 100%; height: 8px; position: absolute; } .preview_page #TB_window { width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; bottom: 0 !important; margin: 0 !important; } .preview_page #TB_ajaxContent { padding: 0 !important; margin: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden !important; } .preview_page #TB_title { display: none; } /* theme new page CSS */ .wrap.gv-activated{ padding: 38px 28px 28px; max-width: 1440px; margin: auto; } .gv-activated .oci-themes .gv-tab-panel.gv-panel-active { display: flex; width: 100%; flex-wrap: wrap; gap: 48px; } .gv-activated .oci-desktop-view .gv-sidebar { border-right: none; /*padding: 0;*/ width: 100%; height: 100vh; } aside.nav.oci-theme-preview-screen-left{ width: 16.7%; max-width: 320px; min-width: 320px; } .nav { display: flex; flex-direction: column; justify-content: start; } .oci-mobile-view { display: none; } .oci-category-list.oci-desktop-view .gv-side-menu { max-height: 320px; } .oci-themes { gap: 48px; display: flex; flex-wrap: wrap; padding: 48px 0; } .one-theme.oci-theme-box-nw { overflow: hidden; position: relative; height: auto; border-radius: 4px; flex: 1 1 calc(33.33% - 32px); max-width: calc(33.33% - 32px); } .theme-screenshot .theme-screen-bg { max-height: 320px; background-size: cover !important; background-position: top center !important; background-repeat: no-repeat !important; height: 100vh; border-radius: 4px; opacity: 0; background-color: #f0f0f0; /* Placeholder color */ transition: opacity 0.5s ease-in-out; } .theme-screen-bg.loaded { opacity: 1; } .one-theme.oci-theme-box-nw .selected_theme { color: var(--oci-bg-blue); display: table; text-align: center; line-height: 40px; font-size: 14px; font-weight: 600; margin: 0 auto; min-width: 48px; position: relative; text-decoration: none; height: 48px; background: #0078C8; border-radius: 34px; } .one-theme.oci-theme-box-nw:not(.mobile-active) .theme-overlay { position: absolute; width: 100%; height: 100%; top: 0; opacity: 0; background: linear-gradient(0deg, rgba(20, 20, 20, .8), rgba(19, 20, 20, .8)); } /*.one-theme.oci-theme-box-nw.active .gv-button {*/ /* pointer-events: auto; !* Enable button interaction only when the div is active *!*/ /* cursor: pointer;*/ /*}*/ .gv-mode-condensed input[type="radio"]:checked:before{ margin:0; height: auto; } .theme-action { position: absolute; top: 0; left: 0; right: 0; bottom: 0; align-items: center; display: flex; justify-content: center; } .theme-action .one-preview { display: flex; flex-direction: row; justify-content: center; gap: 18px; } .theme-action .one-preview { display: flex; flex-direction: row; justify-content: center; gap: 18px; } .theme-action .one-preview .select_theme { line-height: 30px !important; } .one-preview .select_theme { background: #fff !important; border: 1px solid #0078C8 !important; } .one-theme.oci-theme-box-nw:hover .theme-overlay { opacity: 1; cursor: pointer; } .one-theme.oci-theme-box-nw span.themeName-preview { font-size: 14px; font-weight: 400; line-height: 21px; letter-spacing: .0025em; text-align: left; color: #fff; position: absolute; bottom: 30px; } .one-theme.oci-theme-box-nw.template-selected .selected_theme.showSelected { display: block !important; opacity: 1; position: absolute; right: 10px; top: 10px; } .showstatus{ display: block; } .one-theme.oci-theme-box-nw .showSelected { display: none !important; } .status-badge{ position: absolute; top: 16px; right: 16px; font-family: 'Plus Jakarta Sans', sans-serif; } .gv-icon { width: var(--size-icon-md); height: var(--size-icon-md); display: inline-block; vertical-align: text-bottom; font-size: 0; } .gv-activated .right-content .gv-toast-container{ top: 24px; } .gv-activated .right-content{ width: 100%; padding: 0; flex-wrap: wrap; } .oc_theme_filter_select.active-category { background:#D9EBF7; } .classic-theme{ display: none; } .one-com_page_onecom-wp-themes .notice-warning, .one-com_page_onecom-wp-themes .update-nag, .gv-modal-body .notice{ display: none; } .gv-activated .gv-loader { align-items: center; animation: gv-spin 1s linear infinite; display: inline-flex; height: var(--size-lg); width: var(--size-lg); } .gv-activated .loading-overlay-content .gv-loader-container{ background: transparent; } /* theme new page CSS end */ /* Extra Theme Listing CSS after Preview */ .theme-browser .theme:focus, .theme-browser .theme:hover { cursor: default; } .theme-overlay a:hover, .theme-overlay .action-text:hover { cursor: pointer; } .plugin-browser span.plugin-category { position: absolute; font-size: 9px; font-weight: normal; top: 0; left: 0; background: rgba(0, 0, 0, 0.6); padding: 6px 8px; width: calc(100% - 16px); color: #fff; text-align: center; line-height: 1.5; } span.plugin-category span.dashicons.dashicons-tag { font-size: 13px; width: 13px; height: 13px; vertical-align: middle; margin-right: 5px; } .loading-overlay.theme-loader { position: relative; } span.dashicons.dashicons-arrow-up-alt.onecom-move-up { position: fixed; top: auto; left: auto; bottom: 40px; right: -50px; border-radius: 100px; background: #76b82a; cursor: pointer; padding: 8px; color: #ffffff; visibility: hidden; opacity: 0; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } span.dashicons.dashicons-arrow-up-alt.onecom-move-up.show { z-index: 99; right: 20px; visibility: visible; opacity: 0.9; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } span.dashicons.dashicons-arrow-up-alt.onecom-move-up.show:hover { opacity: 1 } #onecom-ui .theme-browser-pagination { margin-top: 2em } .theme-browser-pagination .pagination-item { display: inline-block; padding: 3px; background: transparent; color: #272727; line-height: 2; width: 2em; height: 2em; text-align: center; font-size: 1em; border-radius: 50%; border:1px solid transparent; cursor: pointer; text-decoration: none; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .theme-browser-pagination .pagination-item:hover { color: #76b82a; border-color:#76b82a; } .theme-browser-pagination .pagination-item.current { cursor: default; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; background: #76b82a; color: #fff } #discouraged .tab-description { margin-bottom: 1.5em } #discouraged .discouraged-plugin-name { margin-right: 16px; line-height: 32px; } #discouraged .discouraged-plugin-action { float: right; } #discouraged .discouraged-plugin-action form { display: flex; } #discouraged .discouraged-plugin-action form { display: flex; } #discouraged .discouraged-list-button-wrapper { margin-top: 1em } .discouraged-modal-close { position: absolute; top: 0px; left: auto; right: 0px; cursor: pointer; } #discouraged .plugin-card-top { min-height: auto; padding: 24px; } #discouraged .plugin-card-top h3 { margin-bottom: 0; margin-right: 0; display: flex; justify-content: space-between; } #discouraged .discouraged-plugin-action .button_1 { margin-bottom: 0; } #one-confirmation .plugin-card-top.discouraged-info { min-height: auto; } .admin_page_onecom-wp-discouraged-plugins .ui-dialog-buttonset { display: flex; justify-content: space-evenly; } .wp-one-dialog { min-width: 360px; -webkit-box-shadow: 0 0 125px #888; box-shadow: 0 0 125px #888; border-top: 6px solid #e48476; position: fixed !important; top: 50% !important; left: 50% !important; transform: translate( -50%, -50%); } .wp-one-dialog .ui-dialog-titlebar { display: none } .toplevel_page_octheme_settings .ui-widget-content { border: none !important; } .wp-one-dialog .ui-dialog-buttonpane { padding: 0 15px 15px; text-align: right; } .wp-one-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button { margin-right: 10px; } .wp-one-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button+button { margin-right: 0 } .wp-one-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button:focus { outline: none !important; } /* =========== Staging Specific CSS ========== */ .one-staging-create .dashicons.dashicons-yes { color: #00ce00; font-size: 2em; } .one-staging-details .box h3 { margin-top: 0 } .one-staging-details.notice-success { border-left-width: 3px; border-left-style: solid; } .one-staging-actions .btn, .one-dialog-container-content .btn { margin-left: 0 } .one-dialog-container .one-dialog-close { position: absolute; right: 5px; top: 5px; cursor: pointer; } #staging_entry a{ border-bottom:none; } .wrap-rgh-btn .staging-trash{ color: #ff6363; border: none; } #preview_box a.preview-install-button { margin-left: 15px; } .one-card { background: #fff; padding: 24px; box-shadow: 0 0 2px 3px #efefef; position: relative; } .one-card-inline-block { display: inline-block; vertical-align: top; width:100%; } .one-card-left { float: left; } .one-card-right { float: right; } .one-card .one-card-staging-create-icon { width: 10em; float: left; vertical-align: top; margin-right: 24px; } .one-card-action { margin-top: 24px; } .one-card-staging-content { width: -webkit-calc( 100% - 200px ); width: calc( 100% - 200px ); } .onecom-staging-wrap .one-staging-actions .one-button.one-button-update-staging{ margin-right: 30px; } .one-button.one-button-update-staging, a.staging-trash, .one-button.one-button-create-staging{ vertical-align: middle; } #staging_entry .one-staging-actions{ margin-top:10px; border-top:1px solid #00a0d229; padding-top:10px; } #onecom-wrap a.help_link{ display: inline-block; border:none; text-decoration: none; color: #0078C8; font-weight: 600; } #onecom-wrap a.help_link:hover{ color: #0086c0; border:none; text-decoration: none; } /* Progress Bar */ .onecom_progress_bar { width: 300px; display: inline-block; color: #444; border: 1px solid #999; position: relative; line-height: 25px; font-size: 12px; height: 26px; margin-bottom: 12px; text-align: left; background-color: #fff; } .onecom_progress_bar .job{ position: absolute; width: 100%; text-align: center; z-index: 10; top:0; } .onecom_progress_bar > span{ width: 12%; display: inline-block; height: 24px; margin-top: 1px; background-color: rgba(0,0,0,0.15); margin-bottom: 1px; transition: 0.3s width; } /* CSS for debugger */ .onestaging-db-table .onestaging-size-info, .wpstg-size-info{ font-size:12px; margin-left:20px; } #console_log{ width: calc( 100% - 18px); height: 150px; overflow-y: scroll; border: 1px solid; margin-bottom: 10px; padding: 7px; background-color: #fff; } #one_staging_area tbody{ background-color: #fff; } #one_staging_area h4{ margin:0 !important; } .onestaging-tab-section{ padding-left:10px; } .wpstg-dir .wpstg-subdir{ margin-left:10px; } .wpstg-subdir > .wpstg-dir:before { content: '-'; display: inline-block; border-left: 1px solid #333; } .wpstg-dir .wpstg-subdir .wpstg-dir a{ color:#333; text-decoration: none; } #disk_space, #run_clone{ display: none; } #one_staging_area h4 button{ vertical-align: -1px; margin-left: 15px; } #onme_errors.green{ border:1px solid green; background: #e7ffe9; text-align: left; font-size:16px; padding: 6px; } .oc_theme_filter .oc-premium-filter{ margin-left: 0px; color: #76B82A; -webkit-font-smoothing: antialiased; font-weight: 600; text-decoration: none; } .oc_theme_filter .oc-premium-filter.oc-active-filter{ border-color: #76B82A; } .oc_theme_filter li.oc-premium-filter:hover{ color: #76B82A; } /* Plugin redesign staging */ #onecom-wrap #stg-inner-wrap .oc-flex-center { display: flex; align-items: center; } #onecom-wrap .inner-wrap { background-color: #fff; padding: 45px 26px; } #stg-inner-wrap p.stg-info-icon { display: inline-block; vertical-align: middle; } #onecom-wrap #stg-inner-wrap .oc-flex-center > img { max-width: 48px; } #stg-inner-wrap p.stg-info-icon img { padding-right: 6px; vertical-align: middle; width: 24px; height: 24px; } #onecom-wrap #stg-inner-wrap .oc-row .one-card-staging-create-info{ display: flex; flex-direction: row; width: 100%; align-items:baseline; } .wrap-rgh-btn.align-center { display: block; text-align: center !important; } #onecom-wrap #stg-inner-wrap .oc-column.oc-left-column { flex-direction: column; flex: 0 0 68%; padding-right:4%; } #onecom-wrap #stg-inner-wrap .oc-column.oc-right-column { flex-direction: column; flex: 0 0 28%; align-self: end; text-align: center; padding-top:25px; } #onecom-ui #stg-inner-wrap h2 { font-size: 32px; line-height: 40px; margin: 0; letter-spacing: 0.6px; font-weight: 600; padding-left: 22px; } #stg-inner-wrap p, #stg-inner-wrap ul, #stg-inner-wrap li, #stg-inner-wrap ol { font-size: 16px; line-height: 24px; } #onecom-ui .page-subtitle.stg-subtitle { margin-top: 16px; margin-bottom: 49px; padding: 0; max-width: 779px; line-height: 24px; font-size:16px; } .one-card-action-old a.help_link{ display: block; border: none; text-decoration: none; color: #0078C8; font-weight: 400; margin-top: 30px; margin-bottom: 30px; font-size: 16px; line-height: 24px; } .wrap-rgh-btn { display: flex; justify-content: center; margin-bottom: 26px; text-align: left !important; } .wrap-rgh-btn img { margin-right: 12px; vertical-align: bottom; } .wrap-rgh-btn :not(img) { margin: 0; font-size: 16px; line-height: 24px; color: #0078C8; background: transparent; border: none; cursor: pointer; } .wrap-rgh-btn > a { min-width: 197px; } .wrap-rgh-btn.preimum_badge span.inline_badge { min-width: 197px; margin: 0 !important; } .wrap-rgh-btn.preimum_badge span.inline_badge svg { margin-right: 12px !important; width: 24px !important; } #onecom-wrap #stg-inner-wrap .oc-column.oc-right-column.align-center-btn { align-self: center; } .one-dialog-container-content h3{ font-style: normal; font-weight: 500; font-size: 30px; line-height: 34px; letter-spacing: 0.2px; color: #3C3C3C; font-family: 'Open Sans', sans-serif; } .one-dialog-container-content p { font-family: 'Open Sans', sans-serif; font-style: normal; font-weight: normal; font-size: 15px; line-height: 24px; letter-spacing: 0.1px; color: #3C3C3C; } .one-dialog-container-content button.cancel-done:hover { background-color:#fff; border: 1px solid #0078C8; color:#0078C8; } .one-dialog-container-content p.extra-padding { margin-top: 40px; } #onecom-wrap #stg-inner-wrap .wrap-rgh-btn-desc.preimum_badge .inline_badge { margin: 0 !important; } #onecom-wrap #stg-inner-wrap .wrap-rgh-btn a.rebuild-btn { width: 195px; height: 41px; background: #0078C8; border-radius: 42px; text-align: center; line-height: 41px; } .wrap-rgh-btn a.rebuild-btn span { color: #fff; } #onecom-wrap #stg-inner-wrap .wrap-rgh-btn:last-child { margin-bottom: 0; } .top-notification{ margin-left: -20px; } .one-dialog-container-content { padding-top: 8px; } .gv-align-bottom{ align-self:flex-end; } /* plugin redesign end staging */ /* WPAPI Error section */ #onecom-wrap.oc-api-error .inner-wrap { padding: 24px; } #onecom-wrap .oc-api-error-box { display: flex; align-items: center; } #onecom-wrap .oc-api-error-box .oc-api-error-icon { display: inline-flex; margin-right: 48px; } #onecom-wrap .oc-api-error-box .oc-api-error-icon img { max-width: 445px; width: 100%; height: auto; } #onecom-wrap .oc-api-error-box .oc-mobile-icon { display: none; } #onecom-wrap .oc-api-error-box .main-heading { font-size: 32px; line-height: 40px; margin: 0 0 8px 0; font-weight: 400; } #onecom-wrap .oc-api-error-box .oc-api-error-message { font-size: 14px; line-height: 22px; } @media (max-width:899px) { #onecom-wrap .oc-api-error-box { flex-direction: column; align-items: start; } #onecom-wrap .oc-api-error-box .oc-desktop-icon { display: none; } #onecom-wrap .oc-api-error-box .oc-mobile-icon { display: block; } #onecom-wrap .oc-api-error-box .oc-mobile-icon img { max-width: 72px; max-height: 72px; } #onecom-wrap .oc-api-error-box .main-heading { font-size: 16px; line-height: 22px; margin: 8px 0; font-weight: 500; } button#desktop { display: none; } } /* Staging Responsive */ @media(max-width:630px){ .onecom-staging-wrap .one-card{ padding: 24px; } .onecom-staging-wrap .one-staging-entry.staging-entry{ display: block; } .onecom-staging-wrap .onecom-staging-logo{ float: none; width:auto; display: block; text-align: center; } .onecom-staging-wrap .onecom-staging-logo .one-card-staging-create-icon{ float: none; margin:0 0 20px 0; width: 8em; } .onecom-staging-wrap .entry-name{ text-align: center; } .onecom-staging-wrap .one-card-staging-content{ width:auto; } .onecom-staging-wrap .entry-link p{ margin: 0; padding: 10px 0; word-break: break-all; } .onecom-staging-wrap .entry-link p br{ display: none; } .onecom-staging-wrap .entry-link p span{ display: block; } .onecom-staging-wrap .entry-link p span:not(:last-child){ border-bottom: 1px solid #00a0d229; margin-bottom: 20px; padding-bottom: 24px; } .onecom-staging-wrap .entry-link p a{border:none;} .onecom-staging-wrap .one-staging-actions .one-button.one-button-update-staging, .onecom-staging-wrap .one-button-delete-staging{ margin:0 auto; display: block; text-align: center; } #TB_window { max-width: 100%; } } .gv-activated .phone-content .gv-max-mob-flex-wrap.gv-notice{ flex-wrap: wrap; } @media(min-width:520px) and (max-width:630px){ .onecom-staging-wrap .one-staging-actions .one-button.one-button-update-staging, .onecom-staging-wrap .one-button-delete-staging{ text-align: left; display: inline-block; } .onecom-staging-wrap .one-staging-actions .one-button.one-button-update-staging{ margin-right: 10px; } } @media (max-width:519px) { #TB_window{ margin-left:0 !important; width:98% !important; left:1% !important; right:1%; } #TB_ajaxContent.TB_modal{ /*width: calc(100% - 30px) !important;*/ height: auto !important; } } @media (max-width:600px) { #preview_box .header_btn_bar{ height: 152px; } #preview_box .header_btn_bar .bottom-header{ justify-content: center; flex-direction: column; } #preview_box .header_btn_bar .bottom-header .left-section-preview{ padding-left: 24px; padding-right: 24px; flex: auto; display: flex; flex-direction: column; } .gv-button-cancel.close_btn{ margin-right: 0; margin-top: 12px; order: 2; } #preview_box .header_btn_bar .bottom-header .right-section-preview{ display: none; } #preview_box .empty{ flex: .5; } .gv-activated .right-content .gv-toast-container{ bottom: 0; top: auto; } } @media only screen and (min-width: 1120px) and (max-width: 1639px) { .theme-browser .theme { margin: 0 3.4% 3.4% 0; width: 31%; } } /* plugin redesign responsive */ @media only screen and (min-width: 768px) and (max-width: 1024px){ #onecom-wrap #stg-inner-wrap .oc-row .one-card-staging-create-info { flex-direction: column; } #onecom-wrap #stg-inner-wrap .oc-column.oc-right-column { flex-direction: row; flex: 100%; text-align: left; width:100%; } #onecom-wrap #stg-inner-wrap .one-card-action-old { display: block; } #onecom-wrap #stg-inner-wrap .wrap-rgh-btn { display: inline-block; margin-right: 26px; } #onecom-ui .page-subtitle.stg-subtitle{ margin-bottom:25px; } .wrap-rgh-btn :not(img){ line-height:18px; } #onecom-wrap #stg-inner-wrap .wrap-rgh-btn a.rebuild-btn{ display:block; } .one-theme.oci-theme-box-nw { flex: 1 1 calc(50% - 17px); max-width: calc(50% - 17px); } .gv-activated .oci-themes .gv-tab-panel.gv-panel-active{ gap: 34px; justify-content: center; } .wrap.gv-activated{ margin: 0; padding-left: 24px; padding-right: 34px; } .oci-themes { padding: 16px 0; } } @media only screen and (min-width: 280px) and (max-width: 767px){ #onecom-wrap #stg-inner-wrap .oc-row .one-card-staging-create-info { flex-direction: column; } #onecom-wrap #stg-inner-wrap .oc-column.oc-right-column { flex: 100%; align-self: center; width: 100%; } #onecom-wrap #stg-inner-wrap .oc-column.oc-left-column { flex: 100%; } #onecom-ui .page-subtitle.stg-subtitle{ margin-bottom:25px; } #onecom-wrap #stg-inner-wrap .wrap-rgh-btn{ justify-content: center; text-align: center !important; } #onecom-wrap #stg-inner-wrap a.loginStaging, #onecom-wrap #stg-inner-wrap .wrap-rgh-btn a.rebuild-btn, button#deploy_to_live{ width: 100%; display:block; } #onecom-wrap #stg-inner-wrap .wrap-rgh-btn > input { width: 100%; } #onecom-wrap #stg-inner-wrap .one-card-action-old.staging-details-created .wrap-rgh-btn { text-align: left !important; } #onecom-wrap #stg-inner-wrap .one-card-action-old.staging-details-created .wrap-rgh-btn a.staging-trash.one-button-delete-staging { text-align: left; } .one-theme.oci-theme-box-nw{ flex: 1 1 100%; max-width: 100%; width: 100%; } .wrap.gv-activated{ padding-left: 14px; padding-right: 24px; margin: 0; } button#desktop { display: none; } } @media only screen and (max-width: 1023px){ .gv-activated .gv-card.oc-plugins-box, .gv-activated .gv-card.oc-plugins-box-skeleton { flex-direction: column; align-items: normal; } #oc-plugins-root .gv-card.oc-plugins-box .gv-card-content{ padding: 16px 24px 0; } } @media only screen and (min-width: 1023px) and (max-width: 1100px){ .gv-activated .gv-card.oc-plugins-box .gv-card-content, .gv-activated .gv-card.oc-plugins-box .gv-card-illustration, .gv-activated .gv-card.oc-plugins-box .gv-card-icon{ padding: 16px 16px 0; } } .gv-activated .gv-card.oc-plugins-box .gv-card-content, .gv-activated .gv-card.oc-plugins-box .gv-card-illustration, .gv-activated .gv-card.oc-plugins-box .gv-card-icon{ padding-right: 16px; } .gv-activated .gv-card.oc-plugins-box .gv-card-content{ padding-left: 0px; flex: 1 1 auto; } .gv-activated .gv-card.oc-plugins-box .gv-card-content.plugin-actions{ flex: 0 0 auto; padding-right:24px } /* plugin redesign responsive End */ .gv-activated .gv-oc-overlay { align-items: center; background: hsla(0, 0%, 100%, .9); display: flex; flex-direction: column; height: 100%; justify-content: center; left: 0; position: absolute; top: 0; width: 100%; z-index: 10 } div#onestaging-clonepage-wrapper { max-width: 1440px; margin: auto; } .gv-activated #oc-staging-broken .gv-alert-icon svg{ fill: #000000; }