OwlCyberSecurity - MANAGER
Edit File: editor-styles.scss
/** * Styles for the WordPress post/page editor. * Ensures a visual match between back- and front-end. */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Imports # Custom properties # Typography # Elements # Links # Adjustments for the editor --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Imports --------------------------------------------------------------*/ @import "../_custom-properties.scss"; @import "../_vars.scss"; @import "../_elements.scss"; @import "../_links.scss"; @import "../_media.scss"; @import "../_blocks.scss"; @font-face { font-family: "star"; src: url("../../fonts/star.woff2?gmcsp2") format("woff2"), url("../../fonts/star.ttf?gmcsp2") format("truetype"), url("../../fonts/star.woff?gmcsp2") format("woff"), url("../../fonts/star.svg?gmcsp2#star") format("svg"); font-weight: normal; font-style: normal; } @import "../woo/_blocks.scss"; .wp-block, .wp-block.block-list-appender:only-child, .block-editor-block-list__layout.is-root-container > * { margin-left: auto; margin-right: auto; } .is-layout-flex > .wp-block { margin: 0; } html :where(.wp-block) { max-width: none; } .block-editor-block-list__layout.is-root-container > [data-align="full"] { max-width: none; } .block-editor-block-list__layout.is-root-container > * > .wp-block[data-align="wide"] { max-width: none; } .edit-post-visual-editor__post-title-wrapper:not(.specificity) { margin-top: 0px !important; padding-top: var(--global-md-spacing); margin-bottom: var(--global-md-spacing); position: relative; } /*-------------------------------------------------------------- # Adjustments for the editor --------------------------------------------------------------*/ button, select, option { color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; border-radius: inherit; } // Fix for old buttons. div[data-type="core/button"] { &[data-align="right"], &[data-align="left"] { display: block; } } .block-editor-block-list__block.wp-block-columns { margin-top: 28px; } .block-editor-block-list__block[data-type="kadence/advancedheading"] { margin-bottom: 0; margin-top: 0; } [data-type="kadence/advancedheading"]:not(.kb-adv-text) + [data-type="kadence/advancedheading"]:not(.kb-adv-text) { h1, h2, h3, h4, h5, h6 { margin-top: 0; } } .kb-is-heading + .kb-is-heading { > * { margin-top: 0; } } .wp-block-button__link, .wp-element-button { border-radius: 3px; background: var(--global-palette-btn-bg); color: var(--global-palette-btn); padding: 0.4em 1em; border: 0; display: inline-block; cursor: pointer; text-decoration: none; transition: all 0.2s ease; box-shadow: 0px 0px 0px -7px rgba(0, 0, 0, 0); &:hover, &:focus { color: var(--global-palette-btn-hover); background: var(--global-palette-btn-bg-hover); box-shadow: 0px 15px 25px -7px rgba(0, 0, 0, 0.1); } } .is-style-outline .wp-block-button__link, .is-style-outline .wp-element-button { border: 2px solid currentColor; background: transparent; color: var(--global-palette-highlight); &:hover, &:focus { background: transparent; color: var(--global-palette-highlight-alt); box-shadow: 0px 0px 0px -7px rgba(0, 0, 0, 0); } } .wp-block-button.is-style-outline .wp-block-button__link, .wp-block-button.is-style-outline .wp-element-button { padding: 0.4em 1em; } .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color), .wp-block-button.is-style-outline .wp-element-button:not(.has-text-color), .button.button-style-outline:not(.has-text-color) { color: var(--global-palette-btn-bg); &:hover, &:focus, &:active { color: var(--global-palette-btn-bg-hover); } } /*-------------------------------------------------------------- # Typography --------------------------------------------------------------*/ h1, h2, h3, h4, h5, h6 { padding: 0; a { color: inherit; text-decoration: none; } &.has-background { padding: 1em 2em; } } h1, h2, h3, h4, h5, h6 { margin: 1.5em 0 0.5em; } .block-editor-block-list__layout > { h1, h2, h3, h4, h5, h6 { &:first-child { margin-top: 0; } } } dfn, cite, em, i { font-style: italic; } blockquote, q { quotes: "“" "”"; } blockquote { padding-left: 1em; border-left: 4px solid var(--global-palette4); } .entry-content blockquote { margin: 0 0 var(--global-md-spacing); } blockquote cite, blockquote .wp-block-pullquote__citation { color: var(--global-palette5); font-size: 13px; margin-top: 1em; position: relative; font-style: normal; display: block; } address { margin: 0 0 1.5em; } pre { background: var(--global-palette7); font-family: "Courier 10 Pitch", Courier, monospace; font-size: 0.9375rem; line-height: 1.6; max-width: 100%; overflow: auto; padding: 1.5em; white-space: pre-wrap; } code, kbd, tt, var { font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; font-size: 0.8rem; } abbr, acronym { border-bottom: 1px dotted var(--global-palette4); cursor: help; } mark, ins { text-decoration: none; } big { font-size: 125%; } address, figure, hr, p, table, pre { margin-top: 0; margin-bottom: 0; } p, .wp-block[data-type="kadence/advancedheading"]:not(:last-child) p { margin-bottom: var(--global-md-spacing); } .wp-block[data-type="kadence/advancedbtn"]:not(:last-child) { margin-bottom: var(--global-md-spacing); } .wp-block-kadence-header .wp-block[data-type="kadence/advancedbtn"]:not(:last-child) { margin-bottom: initial; } p:last-child { margin-bottom: 0; } p > img { display: inline-block; } pre { margin-bottom: var(--global-md-spacing); } // Toolset issue. pre.CodeMirror-line { line-height: inherit; margin: 0; overflow: visible; font-size: inherit; background: transparent; max-width: unset; padding: 0 4px; font-family: inherit; } hr { margin-top: var(--global-md-spacing); margin-bottom: 0; } ul, ol { margin: 0 0 var(--global-md-spacing); padding-left: 2em; } li > ol, li > ul { margin: 0; } .alignleft { float: left; margin-right: var(--global-md-spacing); } .alignright { float: right; margin-left: var(--global-md-spacing); } .editor-post-title__input { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; } .gallery .gallery-item, .wp-block-freeform .gallery .gallery-item { width: auto; } /* Width of "full-wide" blocks */ .wp-block[data-align="full"] { max-width: none; } .wp-block-cover h2, .wp-block-cover h3, .wp-block-cover h4 { color: inherit; } .wp-block-cover .wp-block-cover-text { font-size: 2em; line-height: 1.25; } .wp-block-archives, .wp-block-categories__list, .wp-block-latest-posts, .wp-block-latest-comments { margin-left: auto; margin-right: auto; } .wp-block-latest-comments { padding-left: 2.5em; padding-right: 2.5em; } body:not(.mce-content-body) { position: relative; &:before { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); pointer-events: none; } } body.block-editor-page .editor-styles-wrapper:before { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); pointer-events: none; } .kt-post-grid-item .kt-blocks-post-excerpt p { margin-bottom: 0; } .kadence-inner-column-inner > .wp-block[data-type="kadence/advancedheading"]:first-child .block-editor-rich-text__editable { margin-top: 0; } .kadence-inner-column-inner > .wp-block[data-type="kadence/advancedheading"]:last-child .block-editor-rich-text__editable { margin-bottom: 0; } .is-root-container > .wp-block[data-type="kadence/advancedheading"]:last-child .block-editor-rich-text__editable { margin-bottom: 0; } .is-root-container > .wp-block[data-type="kadence/advancedheading"]:first-child .block-editor-rich-text__editable { margin-top: 0; } .kt-tab-inner-content > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:first-child, .kt-accordion-panel-inner > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:first-child { h1, h2, h3, h4, h5, h6 { margin-top: 0; } } .wp-block-kadence-rowlayout ul { padding-left: 2em; } .product-details.content-bg { background: var(--global-palette9); } .block-editor-block-toolbar { color: #444; } .wp-block-image { margin-bottom: var(--global-md-spacing); } .interface-interface-skeleton__editor { max-width: 100%; } .wp-block-navigation__container > .wp-block-navigation-link, .wp-block-page-list, .wp-block-page-list > .wp-block-pages-list__item { margin: 0 2em 0 0; } textarea { width: 100%; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea { -webkit-appearance: none; color: var(--global-palette5); border: 1px solid var(--global-gray-400); border-radius: 3px; padding: 0.4em 0.5em; max-width: 100%; background: var(--global-palette9); box-shadow: 0px 0px 0px -7px rgba(0, 0, 0, 0); } ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: var(--global-palette6); } ::-moz-placeholder { /* Firefox 19+ */ color: var(--global-palette6); opacity: 1; } :-ms-input-placeholder { /* IE 10+ */ color: var(--global-palette6); } :-moz-placeholder { /* Firefox 18- */ color: var(--global-palette6); } ::placeholder { color: var(--global-palette6); } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus { color: var(--global-palette3); border-color: var(--global-palette6); outline: 0; box-shadow: 0px 5px 15px -7px rgba(0, 0, 0, 0.1); } select { border: 1px solid var(--global-gray-400); background-size: 16px 100%; padding: 0.2em 35px 0.2em 0.5em; background: var(--global-palette9) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiNiYmIiPjxwYXRoIGQ9Ik02IDlsNiA2IDYtNiIvPjwvc3ZnPg==) no-repeat 98% 50%; -moz-appearance: none; -webkit-appearance: none; appearance: none; box-shadow: none; outline: 0; box-shadow: 0px 0px 0px -7px rgba(0, 0, 0, 0); } select::-ms-expand { display: none; } select:focus { color: var(--global-palette3); border-color: var(--global-palette6); background-color: var(--global-palette9); box-shadow: 0px 5px 15px -7px rgba(0, 0, 0, 0.1); outline: 0; // Fix for firefox if the color palette is dark. option { color: #333; } } // Testing above and hidden title. .admin-color-post-type-page.admin-color-pct-above .edit-post-visual-editor__post-title-wrapper:not(.specificity), .admin-color-post-type-post.admin-color-pct-above .edit-post-visual-editor__post-title-wrapper:not(.specificity) { min-height: var(--kad-editor-title-height, 200px); display: flex; text-align: var(--kad-editor-title-align, center); justify-content: center; flex-direction: column; margin: 0px 0px var(--kad-editor-vertical-top-padding, 5rem) 0px; background: var(--kad-editor-title-bg, var(--global-palette7)); padding-top: 1rem; padding-bottom: 1rem; position: relative; &::before { content: ""; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; width: auto; z-index: 0; background: var(--kad-editor-title-overlay-bg, transparent); } h1.wp-block-post-title { position: relative; z-index: 12; width: 100%; color: var(--kad-editor-title-color, var(--global-palette3)); } } .admin-color-pct-hide .edit-post-visual-editor__post-title-wrapper:not(.specificity) { margin: 0px 0px var(--kad-editor-vertical-top-padding, 5rem) 0px; padding-top: 1.5rem; padding-bottom: 1.5rem; background: var(--kad-editor-content-bg, var(--global-palette9)); position: relative; &::before { content: ""; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; width: auto; z-index: 0; opacity: 0.8; background: repeating-linear-gradient( 45deg, var(--global-palette8), var(--global-palette8) 10px, var(--kad-editor-content-bg, var(--global-palette9)) 10px, var(--kad-editor-content-bg, var(--global-palette9)) 20px ); } &::after { content: ""; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; width: auto; z-index: 0; opacity: 0.6; background: var(--kad-editor-content-bg, var(--global-palette9)); } h1.wp-block-post-title { position: relative; z-index: 12; font-size: 24px; line-height: 1.5; width: 100%; } } .admin-color-pct-above.admin-color-pcvp-hide .edit-post-visual-editor__post-title-wrapper:not(.specificity), .admin-color-pct-above.admin-color-pcvp-bottom .edit-post-visual-editor__post-title-wrapper:not(.specificity), .admin-color-pct-hide.admin-color-pcvp-hide .edit-post-visual-editor__post-title-wrapper:not(.specificity), .admin-color-pct-hide.admin-color-pcvp-bottom .edit-post-visual-editor__post-title-wrapper:not(.specificity), .admin-color-pcw-fullwidth:not(.specificity):not(.specificity) .edit-post-visual-editor__post-title-wrapper:not(.specificity) { margin-bottom: 0; } .admin-color-post-type-page.admin-color-pct-above.admin-color-pcs-boxed:not(.admin-color-pcw-fullwidth):not(.admin-color-pcvp-hide):not(.admin-color-pcvp-bottom) .edit-post-visual-editor__post-title-wrapper:not(.specificity), .admin-color-post-type-post.admin-color-pct-above.admin-color-pcs-boxed:not(.admin-color-pcw-fullwidth):not(.admin-color-pcvp-hide):not(.admin-color-pcvp-bottom) .edit-post-visual-editor__post-title-wrapper:not(.specificity) { &:after { content: ""; position: absolute; height: var(--kad-editor-vertical-top-padding, 5rem); width: 100%; top: 100%; background: var(--kad-editor-body-bg, var(--global-palette8)); } } .admin-color-pcs-boxed .is-root-container.wp-block-post-content { padding-top: var(--kad-editor-boxed-spacing, 2rem); padding-bottom: var(--kad-editor-boxed-spacing, 2rem); }