/** * Base * - Reset the browser */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } * { box-sizing: border-box; } pre { overflow: scroll; } /** * 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. */ /** * 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. */ @media (min-width: 480px) { .wp-block[data-align=left], .wp-block[data-align=right], .wp-site-blocks .alignleft, .wp-site-blocks .alignright { max-width: var(--wp--custom--alignment--aligned-max-width); } } .aligncenter { text-align: center; display: block; margin-right: auto; margin-left: auto; } /* * Alignment styles - from TT2 * These rules are temporary, and should not be relied on or * modified too heavily by themes or plugins that build on * Twenty Twenty-Two. These are meant to be a precursor to * a global solution provided by the Block Editor. * * Relevant issues: * https://github.com/WordPress/gutenberg/issues/35607 * https://github.com/WordPress/gutenberg/issues/35884 */ .wp-site-blocks, body > .is-root-container, .edit-post-visual-editor__post-title-wrapper, .wp-block-group.alignfull, .wp-block-group.has-background, .wp-block-columns.alignfull.has-background, .wp-block-cover.alignfull, .is-root-container .wp-block[data-align=full] > .wp-block-group, .is-root-container .wp-block[data-align=full] > .wp-block-columns.has-background, .is-root-container .wp-block[data-align=full] > .wp-block-cover { padding-left: var(--wp--custom--gap--horizontal); padding-right: var(--wp--custom--gap--horizontal); } .wp-site-blocks .alignfull, .wp-site-blocks > .wp-block-group.has-background, .wp-site-blocks > .wp-block-cover, .wp-site-blocks > .wp-block-template-part > .wp-block-group.has-background, .wp-site-blocks > .wp-block-template-part > .wp-block-cover, body > .is-root-container > .wp-block-cover, body > .is-root-container > .wp-block-template-part > .wp-block-group.has-background, body > .is-root-container > .wp-block-template-part > .wp-block-cover, .is-root-container .wp-block[data-align=full] { margin-left: calc(-1 * var(--wp--custom--gap--horizontal)) !important; margin-right: calc(-1 * var(--wp--custom--gap--horizontal)) !important; max-width: unset; width: unset; } /* Blocks inside columns don't have negative margins. */ .wp-site-blocks .wp-block-columns .wp-block-column .alignfull, .is-root-container .wp-block-columns .wp-block-column .wp-block[data-align=full], .wp-site-blocks .alignfull:not(.wp-block-group) .alignfull, .is-root-container .wp-block[data-align=full] > *:not(.wp-block-group) .wp-block[data-align=full] { margin-left: auto !important; margin-right: auto !important; width: inherit; } /* Spacing for group blocks with a background color. */ .wp-block-group.has-background { padding: var(--wp--custom--gap--vertical) var(--wp--custom--gap--horizontal); } .has-primary-background-color { background-color: var(--wp--custom--color--primary) !important; } .has-secondary-background-color { background-color: var(--wp--custom--color--secondary) !important; } .has-foreground-background-color { background-color: var(--wp--custom--color--foreground) !important; } .has-background-background-color { background-color: var(--wp--custom--color--background) !important; } .has-tertiary-background-color { background-color: var(--wp--custom--color--tertiary) !important; } .has-primary-color { color: var(--wp--custom--color--primary) !important; } .has-secondary-color { color: var(--wp--custom--color--secondary) !important; } .has-foreground-color { color: var(--wp--custom--color--foreground) !important; } .has-background-color { color: var(--wp--custom--color--background) !important; } .has-tertiary-color { color: var(--wp--custom--color--tertiary) !important; } @media (max-width: 599px) { .wp-site-blocks .site-header .site-brand { display: contents; } .wp-site-blocks .site-header .wp-block-site-logo { flex-basis: 100%; margin-bottom: calc(2 * var(--wp--custom--gap--vertical)); margin-top: var(--wp--custom--gap--vertical); text-align: center; } } @media (max-width: 599px) { .wp-site-blocks .site-header-linear .site-words-stack-small { display: block; } } :root { --wpadmin-bar--height: 46px; } .site-footer-container { margin-top: auto; } @media (min-width: 600px) { body.admin-bar { --wpadmin-bar--height: 32px; } } body.admin-bar .wp-site-blocks { min-height: calc(100vh - var(--wpadmin-bar--height)); } .image-no-margin { margin: 0; } .image-no-margin * { vertical-align: bottom; } .has-background-no-padding.wp-block-columns.has-background { padding: 0; } .mt-0 { margin-top: 0 !important; } .gapless-group > * { margin-top: 0 !important; } /* Remove the normalized box-sizing: border-box when used with Woo's quantity field, because Woo limits the field's width to 50px, which leaves no space for the context between 50px and 20px padding and the spinner arrows (that come from type=number) See: https://github.com/Automattic/wp-calypso/issues/58958#issuecomment-1015263777 */ .quantity .qty { box-sizing: content-box; } /** * Elements * - Styles for basic HTML elemants */ a, .wp-block-navigation a { text-underline-offset: 0.15em; } a:not(.ab-item):not(.screen-reader-shortcut):active, a:not(.ab-item):not(.screen-reader-shortcut):focus { outline: 1px dotted currentcolor; } input.wp-block-search__input, 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, select { background: var(--wp--custom--form--color--background); border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color); border-radius: var(--wp--custom--form--border--radius); box-shadow: var(--wp--custom--form--color--box-shadow); color: var(--wp--custom--form--color--text); font-family: inherit; padding: var(--wp--custom--form--padding); } input.wp-block-search__input:focus, 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, select:focus { border-color: var(--wp--custom--form--color--border); color: var(--wp--custom--form--color--text); outline: 1px dotted currentcolor; outline-offset: 2px; } input[type=checkbox]:focus, input[type=submit]:focus, button:focus { outline: 1px dotted currentcolor; outline-offset: 2px; } input[type=checkbox]::placeholder, input[type=submit]::placeholder, button::placeholder { color: var(--wp--custom--form--color--text); opacity: 0.66; } select { font-size: 100%; } textarea { width: 100%; } input[type=checkbox] + label { display: inline; margin-left: 0.5em; line-height: 1em; } .wp-block-button:not(.is-style-outline) > a.has-background { border-style: none; } .wp-block-calendar table caption { color: var(--wp--custom--color--primary); } .wp-block-calendar table th { background-color: var(--wp--custom--color--tertiary); border-color: var(--wp--custom--color--tertiary); } .wp-block-calendar table td { color: var(--wp--custom--color--primary); border-color: var(--wp--custom--color--tertiary); } .wp-block-gallery .blocks-gallery-image figcaption, .wp-block-gallery .blocks-gallery-item figcaption { font-size: var(--wp--custom--gallery--caption--font-size); } .wp-block-image { /* From what I can tell the below are styles regularly used by themes to fix the image block. I believe these should go into the block's default styles. It's difficult to say how this will land, however based on discussion found in (many) related issues here: https://github.com/WordPress/gutenberg/issues/28923 https://github.com/WordPress/gutenberg/issues/29506 */ text-align: center; } .wp-block-latest-posts .wp-block-latest-posts__post-date, .wp-block-latest-posts .wp-block-latest-posts__post-author { color: var(--wp--custom--latest-posts--meta--color--text); } .wp-block-navigation .has-child .wp-block-navigation__submenu-container { background-color: var(--wp--custom--navigation--submenu--color--background); border: var(--wp--custom--navigation--submenu--border--width) var(--wp--custom--navigation--submenu--border--style) var(--wp--custom--navigation--submenu--border--color); } .wp-block-navigation .has-child .wp-block-navigation__submenu-container a { color: var(--wp--custom--navigation--submenu--color--text); } .wp-block-navigation.is-responsive:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--wp--custom--color--background); color: var(--wp--custom--color--foreground); padding-left: var(--wp--custom--gap--horizontal); padding-right: var(--wp--custom--gap--horizontal); } .wp-block-navigation.is-responsive ul.wp-block-social-links { margin: 0; gap: var(--wp--custom--gap--baseline); } .wp-block-navigation.is-responsive .is-menu-open { font-size: var(--wp--preset--font-size--medium); } .wp-block-navigation.is-responsive .is-menu-open .wp-block-navigation__responsive-container-content { align-items: var(--navigation-layout-justification-setting, flex-start); justify-content: space-between; flex-wrap: nowrap; } .wp-block-navigation.is-responsive .is-menu-open .wp-block-navigation__container { row-gap: 0.5rem; align-items: var(--navigation-layout-justification-setting, flex-start); flex: unset; padding-bottom: 0; } .wp-block-navigation.is-responsive .is-menu-open .wp-block-navigation-item { align-items: var(--navigation-layout-justification-setting, flex-start); } .wp-block-navigation.is-responsive .is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container { font-size: var(--wp--custom--font-sizes--normal); padding-bottom: 0; padding-left: var(--wp--custom--gap--horizontal); padding-top: 0.5rem; row-gap: 0.5rem; } .wp-block-navigation.is-responsive .is-menu-open ul.wp-block-social-links { justify-content: flex-start; } /* Additional styling for header-minimal */ .wp-block-navigation.blockbase-responsive-navigation-minimal.is-responsive .is-menu-open.wp-block-navigation__responsive-container { font-size: var(--wp--preset--font-size--large); font-weight: 200; } .wp-block-navigation.blockbase-responsive-navigation-minimal.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__container { row-gap: 1rem; } .wp-block-navigation.blockbase-responsive-navigation-minimal.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content { align-items: flex-start; margin: 0 auto; max-width: 800px; flex-wrap: nowrap; } .wp-block-navigation.blockbase-responsive-navigation-minimal.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content .wp-block-navigation-item { row-gap: 0; } .wp-block-navigation.blockbase-responsive-navigation-minimal.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content .wp-block-navigation-item > a:hover { text-decoration-line: underline; } .wp-block-navigation.blockbase-responsive-navigation-minimal.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content .wp-block-navigation-item.current-menu-item > a { text-decoration: underline; } .wp-block-navigation.blockbase-responsive-navigation-minimal.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content .wp-block-navigation__container { flex-grow: 1; justify-content: center; } .wp-block-navigation.blockbase-responsive-navigation-minimal.is-responsive .is-menu-open.wp-block-navigation__responsive-container ul.wp-block-social-links { padding-bottom: calc(var(--wp--custom--gap--vertical) * 2); } .wp-block-navigation.blockbase-responsive-navigation-minimal.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container { font-size: var(--wp--preset--font-size--medium); } /* Additional Styling for header-linear */ .wp-block-navigation.blockbase-responsive-navigation-linear .wp-block-navigation-link a:hover { background: transparent; } .wp-block-navigation.blockbase-responsive-navigation-linear .wp-block-pages-list__item .wp-block-pages-list__item__link, .wp-block-navigation.blockbase-responsive-navigation-linear .wp-block-navigation-link__content { color: var(--wp--custom--color--foreground); } .wp-block-navigation.blockbase-responsive-navigation-linear .wp-block-pages-list__item .wp-block-pages-list__item__link:hover, .wp-block-navigation.blockbase-responsive-navigation-linear .wp-block-navigation-link__content:hover { text-decoration: underline; } .wp-block-navigation.blockbase-responsive-navigation-linear:not(.has-background) .wp-block-navigation__submenu-container { background-color: var(--wp--custom--color--background); border-color: var(--wp--custom--color--tertiary); } .wp-block-navigation.blockbase-responsive-navigation-linear .wp-block-navigation__mobile-menu-open-button { color: var(--wp--custom--color--primary); } .wp-block-navigation.blockbase-responsive-navigation-linear.is-responsive .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--wp--custom--color--tertiary); } .wp-block-navigation.blockbase-responsive-navigation-linear.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item, .wp-block-navigation.blockbase-responsive-navigation-linear.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-item { font-size: var(--wp--custom--font-sizes--normal); line-height: 50px; margin: 0; align-items: flex-end; } .wp-block-navigation.blockbase-responsive-navigation-linear.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-pages-list__item__link, .wp-block-navigation.blockbase-responsive-navigation-linear.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation-link__content, .wp-block-navigation.blockbase-responsive-navigation-linear.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-item.has-child .wp-block-pages-list__item__link, .wp-block-navigation.blockbase-responsive-navigation-linear.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-item.has-child .wp-block-navigation-link__content { margin-right: 0; } .wp-block-navigation.blockbase-responsive-navigation-linear.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation__submenu-container, .wp-block-navigation.blockbase-responsive-navigation-linear.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container { gap: 0; padding: 0 19px 0 0; border-right: 1px solid var(--wp--custom--color--foreground); } .wp-block-navigation.blockbase-responsive-navigation-linear.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation__submenu-container .wp-block-pages-list__item__link, .wp-block-navigation.blockbase-responsive-navigation-linear.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content, .wp-block-navigation.blockbase-responsive-navigation-linear.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container .wp-block-pages-list__item__link, .wp-block-navigation.blockbase-responsive-navigation-linear.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 0; font-size: var(--wp--custom--font-sizes--x-small); line-height: 40px; } .wp-block-navigation.blockbase-responsive-navigation-linear.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__container { align-items: flex-end; } .wp-block-navigation.blockbase-responsive-navigation-linear.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-container-content { flex-direction: row-reverse; } .wp-block-navigation.blockbase-responsive-navigation-linear.is-responsive .wp-block-navigation__responsive-container.is-menu-open .wp-block-social-links { flex-direction: column; } p.has-drop-cap:not(:focus)::first-letter { font-size: var(--wp--custom--paragraph--dropcap--typography--font-size); font-weight: var(--wp--custom--paragraph--dropcap--typography--font-weight); margin: var(--wp--custom--paragraph--dropcap--margin); } .wp-block-post-author__name { font-weight: var(--wp--custom--post-author--font-weight); } .wp-block-comments-query-loop form label { font-size: var(--wp--custom--form--label--typography--font-size); font-weight: var(--wp--custom--form--label--typography--font-weight); letter-spacing: var(--wp--custom--form--label--typography--letter-spacing); } .wp-block-comments-query-loop form .comment-form-cookies-consent input[type=checkbox]#wp-comment-cookies-consent { margin-left: 0; margin-top: 1px; } .wp-block-comments-query-loop form .comment-form-cookies-consent input[type=checkbox]#wp-comment-cookies-consent + label { margin-left: 0; } .wp-block-post-template { margin-top: 0; margin-bottom: 0; } .wp-block-pullquote.is-style-solid-color, .wp-block-pullquote { text-align: var(--wp--custom--pullquote--typography--text-align); } .wp-block-pullquote.is-style-solid-color blockquote, .wp-block-pullquote blockquote { padding: 0; margin: 0; } .wp-block-pullquote.is-style-solid-color blockquote p, .wp-block-pullquote blockquote p { font-size: 1em; padding: 0; margin: 0; line-height: inherit; } .wp-block-pullquote.is-style-solid-color blockquote .wp-block-pullquote__citation, .wp-block-pullquote.is-style-solid-color blockquote cite, .wp-block-pullquote blockquote .wp-block-pullquote__citation, .wp-block-pullquote blockquote cite { display: block; font-size: var(--wp--custom--pullquote--citation--typography--font-size); font-style: var(--wp--custom--pullquote--citation--typography--font-style); font-weight: var(--wp--custom--pullquote--citation--typography--font-weight); margin-top: var(--wp--custom--pullquote--citation--spacing--margin--top); } .wp-block-pullquote.is-style-solid-color.is-style-solid-color, .wp-block-pullquote.is-style-solid-color { background-color: var(--wp--custom--color--foreground); color: var(--wp--custom--color--background); } div.wp-block-query-pagination { padding-top: 1.5em; justify-content: space-between; display: grid; grid-template-areas: "prev numbers next"; grid-template-columns: 1fr 2fr 1fr; } @media (max-width: 599px) { div.wp-block-query-pagination { grid-template-areas: "prev next"; grid-template-columns: 1fr 1fr; } } div.wp-block-query-pagination .wp-block-query-pagination-previous { justify-self: start; grid-area: prev; } div.wp-block-query-pagination .wp-block-query-pagination-next { justify-self: flex-end; grid-area: next; } div.wp-block-query-pagination .wp-block-query-pagination-numbers { grid-area: numbers; justify-self: center; } div.wp-block-query-pagination .wp-block-query-pagination-numbers .current { text-decoration: underline; } @media (max-width: 599px) { div.wp-block-query-pagination .wp-block-query-pagination-numbers { display: none; } } .wp-block-quote.is-style-large p, .wp-block-quote p { font-style: unset; margin-top: 0px; } .wp-block-quote.is-style-large .wp-block-quote__citation, .wp-block-quote.is-style-large cite, .wp-block-quote .wp-block-quote__citation, .wp-block-quote cite { font-size: var(--wp--custom--quote--citation--typography--font-size); font-style: var(--wp--custom--quote--citation--typography--font-style); } .wp-block-search { /* Block Styles */ } .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper { padding: var(--wp--custom--form--border--width); border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color); border-radius: var(--wp--custom--form--border--radius); } .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input { padding: 0 var(--wp--custom--form--padding); } .wp-block-search .wp-block-search__input { padding: var(--wp--custom--form--padding); border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color); } .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):hover, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):focus, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color).has-focus, .wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color):hover, .wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color):focus, .wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color).has-focus { --wp--custom--button--color--text: var(--wp--custom--button--hover--color--text); --wp--custom--button--color--background: var(--wp--custom--button--hover--color--background); --wp--custom--button--border--color: var(--wp--custom--button--hover--border--color); opacity: 1; color: var(--wp--custom--button--color--text); background-color: var(--wp--custom--button--color--background); border-color: currentcolor; border-color: var(--wp--custom--button--border--color); } .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):hover svg, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):focus svg, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color).has-focus svg, .wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color):hover svg, .wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color):focus svg, .wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color).has-focus svg { fill: var(--wp--custom--button--color--text); } .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button.has-icon, .wp-block-search .wp-block-search__button.has-icon { line-height: 0; } .wp-block-search .wp-block-search__input::placeholder { color: var(--wp--custom--form--color--text); opacity: 0.66; } .wp-block-search.is-style-small-search { --wp--custom--button--typography--font-size: calc(0.8 * var(--wp--preset--font-size--small)); } .wp-block-search.is-style-small-search .wp-block-search__input { padding: calc(0.5 * var(--wp--custom--form--padding)); } .wp-block-separator { opacity: var(--wp--custom--separator--opacity); } .wp-block-separator:not(.is-style-wide) { width: var(--wp--custom--separator--width); } .wp-block-separator.is-style-dots { /* We can solve this using including the Gutenberg block styles with: add_theme_support( 'wp-block-styles' ) but we decided not to add those styles to blockbase because of potential broad impact of those styles. */ width: 100%; } p.wp-block-site-tagline { margin: 0; } .wp-block-file .wp-block-file__button { display: inline-block; } .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color):hover, .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color):focus, .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color).has-focus { --wp--custom--button--color--text: var(--wp--custom--button--hover--color--text); --wp--custom--button--color--background: var(--wp--custom--button--hover--color--background); --wp--custom--button--border--color: var(--wp--custom--button--hover--border--color); opacity: 1; color: var(--wp--custom--button--color--text); background-color: var(--wp--custom--button--color--background); border-color: currentcolor; border-color: var(--wp--custom--button--border--color); } .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color):hover svg, .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color):focus svg, .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color).has-focus svg { fill: var(--wp--custom--button--color--text); } .wp-block-table.is-style-stripes, .wp-block-table { border-bottom: none; } .wp-block-table.is-style-stripes figcaption, .wp-block-table figcaption { color: var(--wp--custom--color--primary); font-size: var(--wp--custom--table--figcaption--typography--font-size); text-align: center; } .wp-block-table.is-style-stripes td, .wp-block-table.is-style-stripes th, .wp-block-table td, .wp-block-table th { border: 1px solid; padding: calc(0.5 * var(--wp--custom--gap--vertical)) calc(0.5 * var(--wp--custom--gap--horizontal)); } .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: var(--wp--custom--color--tertiary); } .wp-block-video figcaption { margin: var(--wp--custom--video--caption--margin); text-align: var(--wp--custom--video--caption--text-align); } .post-meta { row-gap: var(--wp--custom--gap--baseline) !important; } .is-style-post-author-icon, .is-style-post-date-icon, .is-style-post-category-icon, .is-style-post-tag-icon { display: flex; flex-wrap: wrap; } .is-style-post-author-icon:before, .is-style-post-date-icon:before, .is-style-post-category-icon:before, .is-style-post-tag-icon:before { align-self: center; content: ""; display: inline-block; margin-right: calc(0.5 * var(--wp--custom--gap--baseline)); height: 16px; width: 16px; mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; background-color: currentColor; } .is-style-post-author-icon:before { -webkit-mask-image: url(svg/post-author.svg); mask-image: url(svg/post-author.svg); } .is-style-post-date-icon:before { -webkit-mask-image: url(svg/post-date.svg); mask-image: url(svg/post-date.svg); } .is-style-post-category-icon:before { -webkit-mask-image: url(svg/post-category.svg); mask-image: url(svg/post-category.svg); } .is-style-post-tag-icon:before { -webkit-mask-image: url(svg/post-tag.svg); mask-image: url(svg/post-tag.svg); } /* * This is a refactored style sheet * Currently it is being loaded within ponyfill * As ponyfill gets refactored, add the necessary styles here. */ /* * Button hover styles. * Necessary until the following issue is resolved in Gutenberg: * https://github.com/WordPress/gutenberg/issues/27075 */ :is(.wp-block-search__button, .wp-block-button__link):is(:hover, :active, :focus) { text-decoration: none; cursor: pointer; color: var(--wp--custom--button--hover--color--text); background-color: var(--wp--custom--button--hover--color--background); border-color: var(--wp--custom--button--hover--border--color); } :is(.wp-block-search__button, .wp-block-button__link):focus { outline: 1.5px dotted var(--wp--preset--color--foreground); outline-offset: 3px; } :is(.is-style-outline.wp-block-button, .is-style-outline.wp-block-button__link) { color: var(--wp--custom--button--outline--color--text, var(--wp--custom--button--border--color)); } :is(.is-style-outline > .wp-block-button__link, .is-style-outline.wp-block-button__link):not(.has-background):hover { color: var(--wp--custom--button--outline--hover--color--text, var(--wp--custom--button--color--text)); background-color: var(--wp--custom--button--outline--hover--color--background, var(--wp--custom--button--color--background)); }