/** * Colors */ /** * Breakpoints & Media Queries */ /** * 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. */ /** * Grid System. * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ */ /** * Dimensions. */ /** * Shadows. */ /** * Editor widths. */ /** * Block & Editor UI. */ /** * Block paddings. */ /** * React Native specific. * These variables do not appear to be used anywhere else. */ /** * Converts a hex value into the rgb equivalent. * * @param {string} hex - the hexadecimal value to convert * @return {string} comma separated rgb values */ /** * Breakpoint mixins */ /** * Long content fade mixin * * Creates a fading overlay to signify that the content is longer * than the space allows. */ /** * 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. */ :root { --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, 161; --wp-admin-theme-color-darker-20: #005a87; --wp-admin-theme-color-darker-20--rgb: 0, 90, 135; --wp-admin-border-width-focus: 2px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { :root { --wp-admin-border-width-focus: 1.5px; } } /** * Element styles. */ .wp-element-button { cursor: pointer; } :root { /* * Our classes uses the same values we set for gradient value attributes, * and we can not use spacing because of WP multi site kses rule. */ /* stylelint-disable function-comma-space-after */ /* stylelint-enable function-comma-space-after */ --wp--preset--font-size--normal: 16px; --wp--preset--font-size--huge: 42px; } :root .has-very-light-gray-background-color { background-color: #eee; } :root .has-very-dark-gray-background-color { background-color: #313131; } :root .has-very-light-gray-color { color: #eee; } :root .has-very-dark-gray-color { color: #313131; } :root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background { background: linear-gradient(135deg, #00d084 0%, #0693e3 100%); } :root .has-purple-crush-gradient-background { background: linear-gradient(135deg, #34e2e4 0%, #4721fb 50%, #ab1dfe 100%); } :root .has-hazy-dawn-gradient-background { background: linear-gradient(135deg, #faaca8 0%, #dad0ec 100%); } :root .has-subdued-olive-gradient-background { background: linear-gradient(135deg, #fafae1 0%, #67a671 100%); } :root .has-atomic-cream-gradient-background { background: linear-gradient(135deg, #fdd79a 0%, #004a59 100%); } :root .has-nightshade-gradient-background { background: linear-gradient(135deg, #330968 0%, #31cdcf 100%); } :root .has-midnight-gradient-background { background: linear-gradient(135deg, #020381 0%, #2874fc 100%); } .has-regular-font-size { font-size: 1em; } .has-larger-font-size { font-size: 2.625em; } .has-normal-font-size { font-size: var(--wp--preset--font-size--normal); } .has-huge-font-size { font-size: var(--wp--preset--font-size--huge); } .has-text-align-center { text-align: center; } .has-text-align-left { /*rtl:ignore*/ text-align: left; } .has-text-align-right { /*rtl:ignore*/ text-align: right; } #end-resizable-editor-section { display: none; } .aligncenter { clear: both; } .items-justified-left { justify-content: flex-start; } .items-justified-center { justify-content: center; } .items-justified-right { justify-content: flex-end; } .items-justified-space-between { justify-content: space-between; } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background-color: #ddd; clip: auto !important; clip-path: none; color: #444; display: block; font-size: 1em; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /** * The following provide a simple means of applying a default border style when * a user first makes a selection in the border block support panel. * This prevents issues such as where the user could set a border width * and see no border due there being no border style set. * * This is intended to be removed once intelligent defaults can be set while * making border selections via the block support. * * See: https://github.com/WordPress/gutenberg/pull/33743 */ html :where(.has-border-color) { border-style: solid; } html :where([style*="border-top-color"]) { border-top-style: solid; } html :where([style*="border-right-color"]) { border-right-style: solid; } html :where([style*="border-bottom-color"]) { border-bottom-style: solid; } html :where([style*="border-left-color"]) { border-left-style: solid; } html :where([style*="border-width"]) { border-style: solid; } html :where([style*="border-top-width"]) { border-top-style: solid; } html :where([style*="border-right-width"]) { border-right-style: solid; } html :where([style*="border-bottom-width"]) { border-bottom-style: solid; } html :where([style*="border-left-width"]) { border-left-style: solid; } /** * Provide baseline responsiveness for images. */ html :where(img[class*="wp-image-"]) { height: auto; max-width: 100%; } /** * Reset user agent styles for figure element margins. */ figure { margin: 0 0 1em 0; }