:root{--wp-block-synced-color:#7a00df;--wp-block-synced-color--rgb:122,0,223;--wp-bound-block-color:var(--wp-block-synced-color);--wp-editor-canvas-background:#ddd;--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,160.5;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px}@media (min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}.edit-post-meta-boxes-main{background-color:#fff;display:flex;filter:drop-shadow(0 -1px rgba(0,0,0,.133));flex-direction:column;outline:1px solid transparent;overflow:hidden}.edit-post-meta-boxes-main__presenter{box-shadow:0 1px #ddd;display:flex;flex-shrink:0;height:32px;justify-content:center;outline:1px solid transparent;position:relative;z-index:1}@media (pointer:coarse){.edit-post-meta-boxes-main__presenter{height:36px}}.edit-post-meta-boxes-main__presenter>button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;outline:none;padding:0;touch-action:none}.edit-post-meta-boxes-main__presenter>button[aria-expanded]{align-items:center;cursor:var(--wpds-cursor-control,pointer);display:flex;justify-content:space-between;padding-inline:24px 12px;width:100%}.edit-post-meta-boxes-main__presenter>button[aria-expanded]:is(:hover,:focus-visible){color:var(--wp-admin-theme-color)}.edit-post-meta-boxes-main__presenter>button[aria-expanded]:focus-visible:after{box-shadow:0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);content:"";inset:var(--wp-admin-border-width-focus);outline:2px solid transparent;position:absolute}.edit-post-meta-boxes-main__presenter>button[aria-expanded]>svg{fill:currentColor}.edit-post-meta-boxes-main__presenter>button[role=separator]{cursor:row-resize;height:inherit;position:absolute;width:64px}.edit-post-meta-boxes-main__presenter>button[role=separator]:before{background-color:#ddd;border-radius:2px;content:"";height:4px;inset-block:calc(50% - 2px) auto;outline:2px solid transparent;outline-offset:-2px;position:absolute;transform:translateX(50%);width:inherit}@media not (prefers-reduced-motion){.edit-post-meta-boxes-main__presenter>button[role=separator]:before{transition:width .3s ease-out}}.edit-post-meta-boxes-main__presenter>button[role=separator]:is(:hover,:focus):before{background-color:var(--wp-admin-theme-color);width:80px}.edit-post-meta-boxes-main .edit-post-meta-boxes-main__liner{overflow:auto}.edit-post-meta-boxes-main__liner{isolation:isolate}.is-resizing.edit-post-meta-boxes-main .edit-post-meta-boxes-main__liner{display:unset}.edit-post-layout__metaboxes{clear:both}.has-metaboxes .interface-interface-skeleton__content:has(.edit-post-meta-boxes-main) .editor-visual-editor{flex-basis:0%;flex-shrink:1;isolation:isolate;overflow:hidden}.edit-post-layout__snackbar{bottom:var(--wpds-dimension-size-md,32px);box-sizing:border-box;display:flex;flex-direction:column;left:0;padding-inline:16px;pointer-events:none;position:fixed;right:0}.edit-post-layout__snackbar .components-snackbar{margin-inline:auto}.edit-post-meta-boxes-area{position:relative}.edit-post-meta-boxes-area .inside,.edit-post-meta-boxes-area__container{box-sizing:content-box}.edit-post-meta-boxes-area input,.edit-post-meta-boxes-area textarea{box-sizing:border-box}.edit-post-meta-boxes-area .postbox-header{border-bottom:0;border-top:1px solid #ddd}.edit-post-meta-boxes-area #poststuff{margin:0 auto;min-width:auto;padding-top:0}.edit-post-meta-boxes-area #poststuff .stuffbox>h3,.edit-post-meta-boxes-area #poststuff h2.hndle,.edit-post-meta-boxes-area #poststuff h3.hndle{box-sizing:border-box;color:inherit;font-weight:var(--wpds-typography-font-weight-emphasis,600);outline:none;padding:0 24px;position:relative;width:100%}.edit-post-meta-boxes-area .postbox{border:0;color:inherit;margin-bottom:0}.edit-post-meta-boxes-area .postbox>.inside{color:inherit;margin:0;padding:0 24px 24px}.edit-post-meta-boxes-area .postbox .handlediv{height:44px;width:44px}.edit-post-meta-boxes-area.is-loading:before{background:transparent;bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:1}.edit-post-meta-boxes-area .edit-post-meta-boxes-area__spinner{left:20px;position:absolute;top:10px;z-index:2}.edit-post-meta-boxes-area .is-hidden{display:none}.edit-post-meta-boxes-area__clear{clear:both}.edit-post-welcome-guide,.edit-template-welcome-guide{width:312px}.edit-post-welcome-guide__image,.edit-template-welcome-guide__image{background:#00a0d2;margin:0 0 16px}.edit-post-welcome-guide__image>img,.edit-template-welcome-guide__image>img{display:block;max-width:100%;-o-object-fit:cover;object-fit:cover}.edit-post-welcome-guide__heading,.edit-template-welcome-guide__heading{font-family:-apple-system,system-ui,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:24px;line-height:1.4;margin:16px 0;padding:0 24px}.edit-post-welcome-guide__text,.edit-template-welcome-guide__text{font-size:13px;line-height:1.4;margin:0 0 24px;padding:0 24px}.edit-post-welcome-guide__inserter-icon,.edit-template-welcome-guide__inserter-icon{margin:0 4px;vertical-align:text-top}.edit-post-welcome-guide .components-button:hover svg,.edit-template-welcome-guide .components-button svg,.edit-template-welcome-guide .components-button:hover svg{fill:#fff}body.js.block-editor-page{background:#fff}body.js.block-editor-page #wpcontent{padding-right:0}body.js.block-editor-page #wpbody-content{padding-bottom:0}body.js.block-editor-page #wpbody-content>div:not(.block-editor):not(#screen-meta),body.js.block-editor-page #wpfooter{display:none}body.js.block-editor-page .a11y-speak-region{right:-1px;top:-1px}body.js.block-editor-page ul#adminmenu a.wp-has-current-submenu:after,body.js.block-editor-page ul#adminmenu>li.current>a.current:after{border-left-color:#fff}body.js.block-editor-page .media-frame select.attachment-filters:last-of-type{max-width:100%;width:auto}@media (min-width:782px){body.js.block-editor-page.is-fullscreen-mode:has(.editor-editor-interface.is-distraction-free){--wp-admin--admin-bar--height:0px}body.js.block-editor-page.is-fullscreen-mode:has(.editor-editor-interface.is-distraction-free) #wpadminbar{display:none}}.block-editor-page #wpwrap{overflow-y:auto}@media (min-width:782px){.block-editor-page #wpwrap{overflow-y:initial}}.edit-post-visual-editor{box-sizing:border-box}.edit-post-visual-editor *,.edit-post-visual-editor :after,.edit-post-visual-editor :before{box-sizing:inherit}@media (min-width:600px){.block-editor__container{bottom:0;left:0;min-height:calc(100vh - 46px);position:absolute;right:0;top:0}}@media (min-width:782px){.block-editor__container{min-height:calc(100vh - var(--wp-admin--admin-bar--height, 0px))}}.block-editor__container img{height:auto;max-width:100%}/** * Typography */ /** * SCSS Variables. * * Please use variables from this sheet to ensure consistency across the UI. * Don't add to this sheet unless you're pretty sure the value will be reused in many places. * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. */ /** * Colors */ /** * Fonts & basic variables. */ /** * Typography */ /** * Grid System. * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ */ /** * Radius scale. */ /** * Elevation scale. */ /** * Dimensions. */ /** * Mobile specific styles */ /** * Editor styles. */ /** * Block & Editor UI. */ /** * Block paddings. */ /** * React Native specific. * These variables do not appear to be used anywhere else. */ /** * Breakpoints & Media Queries */ /** * Converts a hex value into the rgb equivalent. * * @param {string} hex - the hexadecimal value to convert * @return {string} comma separated rgb values */ /** * Long content fade mixin * * Creates a fading overlay to signify that the content is longer * than the space allows. */ /** * Breakpoint mixins */ /** * Focus styles. */ /** * Standard focus rings for the WordPress Design System. * * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site, * e.g. `&:focus { @include outset-ring__focus(); }`. */ /** * Applies editor left position to the selector passed as argument */ /** * Styles that are reused verbatim in a few places */ /** * Allows users to opt-out of animations via OS-level preferences. */ /** * Reset default styles for JavaScript UI based pages. * This is a WP-admin agnostic reset */ /** * Reset the WP Admin page styles for Gutenberg-like pages. */ /** * Creates a checkerboard pattern background to indicate transparency. * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px. */ :root { --wp-block-synced-color: #7a00df; --wp-block-synced-color--rgb: 122, 0, 223; --wp-bound-block-color: var(--wp-block-synced-color); --wp-editor-canvas-background: #ddd; --wp-admin-theme-color: #007cba; --wp-admin-theme-color--rgb: 0, 124, 186; --wp-admin-theme-color-darker-10: rgb(0, 107, 160.5); --wp-admin-theme-color-darker-10--rgb: 0, 107, 160.5; --wp-admin-theme-color-darker-20: #005a87; --wp-admin-theme-color-darker-20--rgb: 0, 90, 135; --wp-admin-border-width-focus: 2px; } @media (min-resolution: 192dpi) { :root { --wp-admin-border-width-focus: 1.5px; } } .edit-post-meta-boxes-main { filter: drop-shadow(0 -1px rgba(0, 0, 0, 0.133)); outline: 1px solid transparent; background-color: #fff; display: flex; flex-direction: column; overflow: hidden; } .edit-post-meta-boxes-main__presenter { flex-shrink: 0; display: flex; justify-content: center; box-shadow: 0 1px #ddd; outline: 1px solid transparent; position: relative; z-index: 1; height: 32px; } @media (pointer: coarse) { .edit-post-meta-boxes-main__presenter { height: 36px; } } .edit-post-meta-boxes-main__presenter > button { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0; border: none; outline: none; background-color: transparent; touch-action: none; } .edit-post-meta-boxes-main__presenter > button[aria-expanded] { cursor: var(--wpds-cursor-control, pointer); width: 100%; display: flex; justify-content: space-between; align-items: center; padding-inline: 24px 12px; } .edit-post-meta-boxes-main__presenter > button[aria-expanded]:is(:hover, :focus-visible) { color: var(--wp-admin-theme-color); } .edit-post-meta-boxes-main__presenter > button[aria-expanded]:focus-visible::after { content: ""; position: absolute; inset: var(--wp-admin-border-width-focus); box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); outline: 2px solid transparent; } .edit-post-meta-boxes-main__presenter > button[aria-expanded] > svg { fill: currentColor; } .edit-post-meta-boxes-main__presenter > button[role=separator] { cursor: row-resize; position: absolute; width: 64px; height: inherit; } .edit-post-meta-boxes-main__presenter > button[role=separator]::before { content: ""; background-color: #ddd; outline: 2px solid transparent; outline-offset: -2px; position: absolute; inset-block: calc(50% - 4px / 2) auto; transform: translateX(-50%); width: inherit; height: 4px; border-radius: 2px; } @media not (prefers-reduced-motion) { .edit-post-meta-boxes-main__presenter > button[role=separator]::before { transition: width 0.3s ease-out; } } .edit-post-meta-boxes-main__presenter > button[role=separator]:is(:hover, :focus)::before { background-color: var(--wp-admin-theme-color); width: 80px; } .edit-post-meta-boxes-main .edit-post-meta-boxes-main__liner { overflow: auto; } .edit-post-meta-boxes-main__liner { isolation: isolate; } .is-resizing.edit-post-meta-boxes-main .edit-post-meta-boxes-main__liner { display: unset; } .edit-post-layout__metaboxes { clear: both; } .has-metaboxes .interface-interface-skeleton__content:has(.edit-post-meta-boxes-main) .editor-visual-editor { flex-shrink: 1; flex-basis: 0%; overflow: hidden; isolation: isolate; } .edit-post-layout__snackbar { position: fixed; bottom: var(--wpds-dimension-size-md, 32px); left: 0; right: 0; padding-inline: 16px; box-sizing: border-box; display: flex; flex-direction: column; pointer-events: none; } .edit-post-layout__snackbar .components-snackbar { margin-inline: auto; } .edit-post-meta-boxes-area { position: relative; /** * The wordpress default for most meta-box elements is content-box. Some * elements such as textarea and input are set to border-box in forms.css. * These elements therefore specifically set back to border-box here, while * other elements (such as .button) are unaffected by Gutenberg's style * because of their higher specificity. */ } .edit-post-meta-boxes-area__container, .edit-post-meta-boxes-area .inside { box-sizing: content-box; } .edit-post-meta-boxes-area textarea, .edit-post-meta-boxes-area input { box-sizing: border-box; } .edit-post-meta-boxes-area .postbox-header { border-top: 1px solid #ddd; border-bottom: 0; } .edit-post-meta-boxes-area { /* Match width and positioning of the meta boxes. Override default styles. */ } .edit-post-meta-boxes-area #poststuff { margin: 0 auto; padding-top: 0; min-width: auto; } .edit-post-meta-boxes-area { /* Override Default meta box stylings */ } .edit-post-meta-boxes-area #poststuff h3.hndle, .edit-post-meta-boxes-area #poststuff .stuffbox > h3, .edit-post-meta-boxes-area #poststuff h2.hndle { /* WordPress selectors yolo */ box-sizing: border-box; color: inherit; font-weight: var(--wpds-typography-font-weight-emphasis, 600); outline: none; padding: 0 24px; position: relative; width: 100%; } .edit-post-meta-boxes-area .postbox { border: 0; color: inherit; margin-bottom: 0; } .edit-post-meta-boxes-area .postbox > .inside { color: inherit; padding: 0 24px 24px; margin: 0; } .edit-post-meta-boxes-area .postbox .handlediv { height: 44px; width: 44px; } .edit-post-meta-boxes-area.is-loading::before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ""; background: transparent; z-index: 1; } .edit-post-meta-boxes-area .edit-post-meta-boxes-area__spinner { position: absolute; top: 10px; right: 20px; z-index: 2; } .edit-post-meta-boxes-area .is-hidden { display: none; } .edit-post-meta-boxes-area__clear { clear: both; } .edit-post-welcome-guide, .edit-template-welcome-guide { width: 312px; } .edit-post-welcome-guide__image, .edit-template-welcome-guide__image { background: #00a0d2; margin: 0 0 16px; } .edit-post-welcome-guide__image > img, .edit-template-welcome-guide__image > img { display: block; max-width: 100%; -o-object-fit: cover; object-fit: cover; } .edit-post-welcome-guide__heading, .edit-template-welcome-guide__heading { font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 24px; line-height: 1.4; margin: 16px 0 16px 0; padding: 0 24px; } .edit-post-welcome-guide__text, .edit-template-welcome-guide__text { font-size: 13px; line-height: 1.4; margin: 0 0 24px 0; padding: 0 24px; } .edit-post-welcome-guide__inserter-icon, .edit-template-welcome-guide__inserter-icon { margin: 0 4px; vertical-align: text-top; } .edit-post-welcome-guide .components-button:hover svg, .edit-template-welcome-guide .components-button:hover svg { fill: #fff; } .edit-template-welcome-guide .components-button svg { fill: #fff; } body.js.block-editor-page { background: #fff; } body.js.block-editor-page #wpcontent { padding-left: 0; } body.js.block-editor-page #wpbody-content { padding-bottom: 0; } body.js.block-editor-page { /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well. Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */ } body.js.block-editor-page #wpbody-content > div:not(.block-editor):not(#screen-meta) { display: none; } body.js.block-editor-page #wpfooter { display: none; } body.js.block-editor-page .a11y-speak-region { left: -1px; top: -1px; } body.js.block-editor-page ul#adminmenu a.wp-has-current-submenu::after, body.js.block-editor-page ul#adminmenu > li.current > a.current::after { border-right-color: #fff; } body.js.block-editor-page .media-frame select.attachment-filters:last-of-type { width: auto; max-width: 100%; } @media (min-width: 782px) { body.js.block-editor-page.is-fullscreen-mode:has(.editor-editor-interface.is-distraction-free) { --wp-admin--admin-bar--height: 0px; } body.js.block-editor-page.is-fullscreen-mode:has(.editor-editor-interface.is-distraction-free) #wpadminbar { display: none; } } .block-editor-page #wpwrap { overflow-y: auto; } @media (min-width: 782px) { .block-editor-page #wpwrap { overflow-y: initial; } } .edit-post-visual-editor { box-sizing: border-box; } .edit-post-visual-editor *, .edit-post-visual-editor *::before, .edit-post-visual-editor *::after { box-sizing: inherit; } @media (min-width: 600px) { .block-editor__container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; min-height: calc(100vh - 46px); } } @media (min-width: 782px) { .block-editor__container { min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px)); } } .block-editor__container img { max-width: 100%; height: auto; }