diff -r 34716fd837a4 -r be944660c56a wp/wp-includes/css/dist/components/style.css --- a/wp/wp-includes/css/dist/components/style.css Tue Dec 15 15:52:01 2020 +0100 +++ b/wp/wp-includes/css/dist/components/style.css Wed Sep 21 18:19:35 2022 +0200 @@ -1,19 +1,19 @@ +@charset "UTF-8"; /** * Colors */ /** - * Deprecated colors. - * Please avoid using these. - */ -/** * Breakpoints & Media Queries */ /** - * Colors + * 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. */ /** - * Deprecated colors. - * Please avoid using these. + * Colors */ /** * Fonts & basic variables. @@ -32,10 +32,14 @@ * Editor widths. */ /** - * Block UI. + * Block & Editor UI. */ /** - * Border radii. + * Block paddings. + */ +/** + * React Native specific. + * These variables do not appear to be used anywhere else. */ /** * Breakpoint mixins @@ -68,179 +72,129 @@ :root { --wp-admin-theme-color: #007cba; --wp-admin-theme-color-darker-10: #006ba1; - --wp-admin-theme-color-darker-20: #005a87; } + --wp-admin-theme-color-darker-20: #005a87; + --wp-admin-border-width-focus: 2px; +} +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + :root { + --wp-admin-border-width-focus: 1.5px; + } +} .components-animate__appear { animation: components-animate__appear-animation 0.1s cubic-bezier(0, 0, 0.2, 1) 0s; - animation-fill-mode: forwards; } - @media (prefers-reduced-motion: reduce) { - .components-animate__appear { - animation-duration: 1ms; } } - .components-animate__appear.is-from-top, .components-animate__appear.is-from-top.is-from-left { - transform-origin: top left; } - .components-animate__appear.is-from-top.is-from-right { - transform-origin: top right; } - .components-animate__appear.is-from-bottom, .components-animate__appear.is-from-bottom.is-from-left { - transform-origin: bottom left; } - .components-animate__appear.is-from-bottom.is-from-right { - transform-origin: bottom right; } + animation-fill-mode: forwards; +} +@media (prefers-reduced-motion: reduce) { + .components-animate__appear { + animation-duration: 1ms; + animation-delay: 0s; + } +} +.components-animate__appear.is-from-top, .components-animate__appear.is-from-top.is-from-left { + transform-origin: top left; +} +.components-animate__appear.is-from-top.is-from-right { + transform-origin: top right; +} +.components-animate__appear.is-from-bottom, .components-animate__appear.is-from-bottom.is-from-left { + transform-origin: bottom left; +} +.components-animate__appear.is-from-bottom.is-from-right { + transform-origin: bottom right; +} @keyframes components-animate__appear-animation { from { - transform: translateY(-2em) scaleY(0) scaleX(0); } + transform: translateY(-2em) scaleY(0) scaleX(0); + } to { - transform: translateY(0%) scaleY(1) scaleX(1); } } - + transform: translateY(0%) scaleY(1) scaleX(1); + } +} .components-animate__slide-in { animation: components-animate__slide-in-animation 0.1s cubic-bezier(0, 0, 0.2, 1); - animation-fill-mode: forwards; } - @media (prefers-reduced-motion: reduce) { - .components-animate__slide-in { - animation-duration: 1ms; } } - .components-animate__slide-in.is-from-left { - transform: translateX(100%); } - .components-animate__slide-in.is-from-right { - transform: translateX(-100%); } + animation-fill-mode: forwards; +} +@media (prefers-reduced-motion: reduce) { + .components-animate__slide-in { + animation-duration: 1ms; + animation-delay: 0s; + } +} +.components-animate__slide-in.is-from-left { + transform: translateX(100%); +} +.components-animate__slide-in.is-from-right { + transform: translateX(-100%); +} @keyframes components-animate__slide-in-animation { 100% { - transform: translateX(0%); } } - + transform: translateX(0%); + } +} .components-animate__loading { - animation: components-animate__loading 1.6s ease-in-out infinite; } + animation: components-animate__loading 1.6s ease-in-out infinite; +} @keyframes components-animate__loading { 0% { - opacity: 0.5; } + opacity: 0.5; + } 50% { - opacity: 1; } - 100% { - opacity: 0.5; } } - -.components-angle-picker-control { - width: 50%; } - .components-angle-picker-control.components-base-control .components-base-control__label { - display: block; } - -.components-angle-picker-control__input-field[type="number"] { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - padding: 6px 8px; - box-shadow: 0 0 0 transparent; - transition: box-shadow 0.1s linear; - border-radius: 2px; - border: 1px solid #757575; - /* Fonts smaller than 16px causes mobile safari to zoom. */ - font-size: 16px; - /* Override core line-height. To be reviewed. */ - line-height: normal; - width: calc(100% - 36px); - max-width: 100px; } - @media (prefers-reduced-motion: reduce) { - .components-angle-picker-control__input-field[type="number"] { - transition-duration: 0s; } } - @media (min-width: 600px) { - .components-angle-picker-control__input-field[type="number"] { - font-size: 13px; - /* Override core line-height. To be reviewed. */ - line-height: normal; } } - .components-angle-picker-control__input-field[type="number"]:focus { - border-color: #007cba; - border-color: var(--wp-admin-theme-color); - box-shadow: 0 0 0 0.5px #007cba; - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color); - outline: 2px solid transparent; } - .components-angle-picker-control__input-field[type="number"]::-webkit-input-placeholder { - color: rgba(30, 30, 30, 0.62); } - .components-angle-picker-control__input-field[type="number"]::-moz-placeholder { opacity: 1; - color: rgba(30, 30, 30, 0.62); } - .components-angle-picker-control__input-field[type="number"]:-ms-input-placeholder { - color: rgba(30, 30, 30, 0.62); } - .is-dark-theme .components-angle-picker-control__input-field[type="number"]::-webkit-input-placeholder { - color: rgba(255, 255, 255, 0.65); } - .is-dark-theme .components-angle-picker-control__input-field[type="number"]::-moz-placeholder { - opacity: 1; - color: rgba(255, 255, 255, 0.65); } - .is-dark-theme .components-angle-picker-control__input-field[type="number"]:-ms-input-placeholder { - color: rgba(255, 255, 255, 0.65); } - -.components-angle-picker-control__angle-circle { - width: 28px; - height: 28px; - border: 2px solid #555d66; - border-radius: 50%; - float: left; - margin-right: 4px; - cursor: grab; } - -.components-angle-picker-control__angle-circle-indicator-wrapper { - position: relative; - width: 100%; - height: 100%; } - -.components-angle-picker-control__angle-circle-indicator { - width: 1px; - height: 1px; - border-radius: 50%; - border: 3px solid #555d66; - display: block; - position: absolute; - top: -14px; - bottom: 0; - left: 0; - right: 0; - margin: auto; - background: #555d66; } - + } + 100% { + opacity: 0.5; + } +} .components-autocomplete__popover .components-popover__content > div { - padding: 16px; } + padding: 16px; + min-width: 220px; +} .components-autocomplete__result.components-button { display: flex; height: auto; min-height: 36px; text-align: left; - width: 100%; } - .components-autocomplete__result.components-button.is-selected { - box-shadow: 0 0 0 2px #007cba; - box-shadow: 0 0 0 2px var(--wp-admin-theme-color); } - -.components-base-control { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 13px; } - .components-base-control .components-base-control__field { - margin-bottom: 8px; } - .components-panel__row .components-base-control .components-base-control__field { - margin-bottom: inherit; } - .components-base-control .components-base-control__label { - display: inline-block; - margin-bottom: 8px; } - .components-base-control .components-base-control__help { - margin-top: -8px; - font-style: italic; } + width: 100%; +} +.components-autocomplete__result.components-button.is-selected { + box-shadow: 0 0 0 2px var(--wp-admin-theme-color); +} .components-button-group { - display: inline-block; } - .components-button-group .components-button { - border-radius: 0; - display: inline-flex; - color: #1e1e1e; - box-shadow: inset 0 0 0 1px #1e1e1e; } - .components-button-group .components-button + .components-button { - margin-left: -1px; } - .components-button-group .components-button:first-child { - border-radius: 2px 0 0 2px; } - .components-button-group .components-button:last-child { - border-radius: 0 2px 2px 0; } - .components-button-group .components-button:focus, .components-button-group .components-button.is-primary { - position: relative; - z-index: 1; } - .components-button-group .components-button.is-primary { - box-shadow: inset 0 0 0 1px #1e1e1e; } + display: inline-block; +} +.components-button-group .components-button { + border-radius: 0; + display: inline-flex; + color: #1e1e1e; + box-shadow: inset 0 0 0 1px #1e1e1e; +} +.components-button-group .components-button + .components-button { + margin-left: -1px; +} +.components-button-group .components-button:first-child { + border-radius: 2px 0 0 2px; +} +.components-button-group .components-button:last-child { + border-radius: 0 2px 2px 0; +} +.components-button-group .components-button:focus, .components-button-group .components-button.is-primary { + position: relative; + z-index: 1; +} +.components-button-group .components-button.is-primary { + box-shadow: inset 0 0 0 1px #1e1e1e; +} .components-button { display: inline-flex; text-decoration: none; + font-weight: normal; font-size: 13px; margin: 0; border: 0; @@ -255,193 +209,245 @@ border-radius: 2px; color: #1e1e1e; /** - * Primary button style. - */ + * Primary button style. + */ /** - * Secondary and tertiary buttons. - */ + * Secondary and tertiary buttons. + */ /** - * Secondary button style. - */ + * Secondary button style. + */ /** - * Tertiary buttons. - */ + * Tertiary buttons. + */ /** - * Link buttons. - */ + * Destructive buttons. + */ /** - * Buttons that indicate destructive actions. - */ } - @media (prefers-reduced-motion: reduce) { - .components-button { - transition-duration: 0s; } } - .components-button[aria-expanded="true"], .components-button:hover { - color: #007cba; - color: var(--wp-admin-theme-color); } - .components-button[aria-disabled="true"]:hover { - color: initial; } - .components-button:focus:not(:disabled) { - box-shadow: 0 0 0 1.5px #007cba; - box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color); - outline: 1px solid transparent; } - .components-button.is-primary { - white-space: nowrap; - background: #007cba; - background: var(--wp-admin-theme-color); - color: #fff; - text-decoration: none; - text-shadow: none; } - .components-button.is-primary:hover:not(:disabled) { - background: #006ba1; - background: var(--wp-admin-theme-color-darker-10); - color: #fff; } - .components-button.is-primary:active:not(:disabled) { - background: #005a87; - background: var(--wp-admin-theme-color-darker-20); - border-color: #005a87; - border-color: var(--wp-admin-theme-color-darker-20); - color: #fff; } - .components-button.is-primary:focus:not(:disabled) { - box-shadow: inset 0 0 0 1px #fff, 0 0 0 1.5px #007cba; - box-shadow: inset 0 0 0 1px #fff, 0 0 0 1.5px var(--wp-admin-theme-color); - outline: 1px solid transparent; } - .components-button.is-primary:disabled, .components-button.is-primary:disabled:active:enabled, .components-button.is-primary[aria-disabled="true"], .components-button.is-primary[aria-disabled="true"]:enabled, .components-button.is-primary[aria-disabled="true"]:active:enabled { - color: rgba(255, 255, 255, 0.4); - background: #007cba; - background: var(--wp-admin-theme-color); - border-color: #007cba; - border-color: var(--wp-admin-theme-color); - opacity: 1; } - .components-button.is-primary:disabled:focus:enabled, .components-button.is-primary:disabled:active:enabled:focus:enabled, .components-button.is-primary[aria-disabled="true"]:focus:enabled, .components-button.is-primary[aria-disabled="true"]:enabled:focus:enabled, .components-button.is-primary[aria-disabled="true"]:active:enabled:focus:enabled { - box-shadow: 0 0 0 1px #fff, 0 0 0 3px #007cba; - box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-admin-theme-color); } - .components-button.is-primary.is-busy, .components-button.is-primary.is-busy:disabled, .components-button.is-primary.is-busy[aria-disabled="true"] { - color: #fff; - background-size: 100px 100%; - /* stylelint-disable */ - background-image: linear-gradient(-45deg, #007cba 28%, #005a87 28%, #005a87 72%, #007cba 72%); - background-image: linear-gradient(-45deg, var(--wp-admin-theme-color) 28%, var(--wp-admin-theme-color-darker-20) 28%, var(--wp-admin-theme-color-darker-20) 72%, var(--wp-admin-theme-color) 72%); - /* stylelint-enable */ - border-color: #007cba; - border-color: var(--wp-admin-theme-color); } - .components-button.is-secondary:active:not(:disabled), .components-button.is-tertiary:active:not(:disabled) { - background: #ddd; - color: #006ba1; - color: var(--wp-admin-theme-color-darker-10); - box-shadow: none; } - .components-button.is-secondary:hover:not(:disabled), .components-button.is-tertiary:hover:not(:disabled) { - color: #006ba1; - color: var(--wp-admin-theme-color-darker-10); - box-shadow: inset 0 0 0 1px #006ba1; - box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color-darker-10); } - .components-button.is-secondary:disabled, .components-button.is-secondary[aria-disabled="true"], .components-button.is-secondary[aria-disabled="true"]:hover, .components-button.is-tertiary:disabled, .components-button.is-tertiary[aria-disabled="true"], .components-button.is-tertiary[aria-disabled="true"]:hover { - color: #828282; - background: #eaeaea; - transform: none; - opacity: 1; - box-shadow: none; } - .components-button.is-secondary { - box-shadow: inset 0 0 0 1px #007cba; - box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color); - outline: 1px solid transparent; - white-space: nowrap; - color: #007cba; - color: var(--wp-admin-theme-color); - background: transparent; } - .components-button.is-tertiary { - white-space: nowrap; - color: #007cba; - color: var(--wp-admin-theme-color); - background: transparent; - padding: 6px; - outline: 1px dotted transparent; } - .components-button.is-tertiary .dashicon { - display: inline-block; - flex: 0 0 auto; } + * Link buttons. + */ +} +@media (prefers-reduced-motion: reduce) { + .components-button { + transition-duration: 0s; + transition-delay: 0s; + } +} +.components-button[aria-expanded=true], .components-button:hover { + color: var(--wp-admin-theme-color); +} +.components-button[aria-disabled=true]:hover { + color: initial; +} +.components-button:focus:not(:disabled) { + box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + outline: 3px solid transparent; +} +.components-button.is-primary { + white-space: nowrap; + background: var(--wp-admin-theme-color); + color: #fff; + text-decoration: none; + text-shadow: none; + outline: 1px solid transparent; +} +.components-button.is-primary:hover:not(:disabled) { + background: var(--wp-admin-theme-color-darker-10); + color: #fff; +} +.components-button.is-primary:active:not(:disabled) { + background: var(--wp-admin-theme-color-darker-20); + border-color: var(--wp-admin-theme-color-darker-20); + color: #fff; +} +.components-button.is-primary:focus:not(:disabled) { + box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); +} +.components-button.is-primary:disabled, .components-button.is-primary:disabled:active:enabled, .components-button.is-primary[aria-disabled=true], .components-button.is-primary[aria-disabled=true]:enabled, .components-button.is-primary[aria-disabled=true]:active:enabled { + color: rgba(255, 255, 255, 0.4); + background: var(--wp-admin-theme-color); + border-color: var(--wp-admin-theme-color); + opacity: 1; + outline: none; +} +.components-button.is-primary:disabled:focus:enabled, .components-button.is-primary:disabled:active:enabled:focus:enabled, .components-button.is-primary[aria-disabled=true]:focus:enabled, .components-button.is-primary[aria-disabled=true]:enabled:focus:enabled, .components-button.is-primary[aria-disabled=true]:active:enabled:focus:enabled { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-admin-theme-color); +} +.components-button.is-primary.is-busy, .components-button.is-primary.is-busy:disabled, .components-button.is-primary.is-busy[aria-disabled=true] { + color: #fff; + background-size: 100px 100%; + /* stylelint-disable */ + background-image: linear-gradient(-45deg, var(--wp-admin-theme-color) 33%, var(--wp-admin-theme-color-darker-20) 33%, var(--wp-admin-theme-color-darker-20) 70%, var(--wp-admin-theme-color) 70%); + /* stylelint-enable */ + border-color: var(--wp-admin-theme-color); +} +.components-button.is-secondary, .components-button.is-tertiary { + outline: 1px solid transparent; +} +.components-button.is-secondary:active:not(:disabled), .components-button.is-tertiary:active:not(:disabled) { + background: #ddd; + color: var(--wp-admin-theme-color-darker-10); + box-shadow: none; +} +.components-button.is-secondary:hover:not(:disabled), .components-button.is-tertiary:hover:not(:disabled) { + color: var(--wp-admin-theme-color-darker-10); + box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color-darker-10); +} +.components-button.is-secondary:disabled, .components-button.is-secondary[aria-disabled=true], .components-button.is-secondary[aria-disabled=true]:hover, .components-button.is-tertiary:disabled, .components-button.is-tertiary[aria-disabled=true], .components-button.is-tertiary[aria-disabled=true]:hover { + color: #828282; + background: #eaeaea; + transform: none; + opacity: 1; + box-shadow: none; + outline: none; +} +.components-button.is-secondary { + box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color); + outline: 1px solid transparent; + white-space: nowrap; + color: var(--wp-admin-theme-color); + background: transparent; +} +.components-button.is-tertiary { + white-space: nowrap; + color: var(--wp-admin-theme-color); + background: transparent; + padding: 6px; +} +.components-button.is-tertiary .dashicon { + display: inline-block; + flex: 0 0 auto; +} +.components-button.is-destructive { + color: #cc1818; + box-shadow: inset 0 0 0 1px #cc1818; +} +.components-button.is-destructive:hover:not(:disabled) { + color: #710d0d; + box-shadow: inset 0 0 0 1px #710d0d; +} +.components-button.is-destructive:focus:not(:disabled) { + color: var(--wp-admin-theme-color); +} +.components-button.is-destructive:active:not(:disabled) { + background: #ccc; +} +.components-button.is-destructive.is-primary { + color: #fff; + background: #cc1818; + box-shadow: inset 0 0 0 1px #cc1818; +} +.components-button.is-destructive.is-primary:hover:not(:disabled) { + color: #fff; + background: #710d0d; + box-shadow: inset 0 0 0 1px #710d0d; +} +.components-button.is-link { + margin: 0; + padding: 0; + box-shadow: none; + border: 0; + border-radius: 0; + background: none; + outline: none; + text-align: left; + color: var(--wp-admin-theme-color); + text-decoration: underline; + transition-property: border, background, color; + transition-duration: 0.05s; + transition-timing-function: ease-in-out; + height: auto; +} +@media (prefers-reduced-motion: reduce) { .components-button.is-link { - margin: 0; - padding: 0; - box-shadow: none; - border: 0; - border-radius: 0; - background: none; - outline: none; - text-align: left; - /* Mimics the default link style in common.css */ - color: #0073aa; - text-decoration: underline; - transition-property: border, background, color; - transition-duration: 0.05s; - transition-timing-function: ease-in-out; - height: auto; } - @media (prefers-reduced-motion: reduce) { - .components-button.is-link { - transition-duration: 0s; } } - .components-button.is-link:hover:not(:disabled), .components-button.is-link:active:not(:disabled) { - color: #00a0d2; } - .components-button.is-link:focus { - color: #124964; - box-shadow: 0 0 0 1px #5b9dd9, 0 0 1.5px 1px rgba(30, 140, 190, 0.8); } - .components-button.is-destructive { - color: #b52727; } - .components-button.is-destructive.is-secondary { - box-shadow: inset 0 0 0 1px #b52727; } - .components-button.is-destructive:hover:not(:disabled), .components-button.is-destructive:active:not(:disabled) { - color: #a02222; - box-shadow: inset 0 0 0 1px #a02222; } - .components-button.is-destructive:focus:not(:disabled) { - box-shadow: inset 0 0 0 1px #fff, 0 0 0 1.5px #a02222; } - .components-button:not([aria-disabled="true"]):active { - color: inherit; } - .components-button:disabled, .components-button[aria-disabled="true"] { - cursor: default; - opacity: 0.3; } - .components-button.is-busy, .components-button.is-secondary.is-busy, .components-button.is-secondary.is-busy:disabled, .components-button.is-secondary.is-busy[aria-disabled="true"] { - animation: components-button__busy-animation 2500ms infinite linear; - opacity: 1; - background-size: 100px 100%; - /* stylelint-disable */ - background-image: linear-gradient(-45deg, #fafafa 28%, #e0e0e0 28%, #e0e0e0 72%, #fafafa 72%); - /* stylelint-enable */ } - .components-button.is-small { - height: 24px; - line-height: 22px; - padding: 0 8px; - font-size: 11px; } - .components-button.is-small.has-icon:not(.has-text) { - padding: 0 8px; - width: 24px; } - .components-button.has-icon { - padding: 6px; - min-width: 36px; - justify-content: center; } - .components-button.has-icon .dashicon { - display: inline-block; - flex: 0 0 auto; } - .components-button.has-icon.has-text { - justify-content: left; } - .components-button.has-icon.has-text svg { - margin-right: 8px; } - .components-button.is-pressed { - color: #fff; - background: #1e1e1e; } - .components-button.is-pressed:focus:not(:disabled) { - box-shadow: inset 0 0 0 1px #fff, 0 0 0 1.5px #007cba; - box-shadow: inset 0 0 0 1px #fff, 0 0 0 1.5px var(--wp-admin-theme-color); - outline: 2px solid transparent; } - .components-button.is-pressed:hover:not(:disabled) { - background: #1e1e1e; } - .components-button svg { - fill: currentColor; - outline: none; } - .components-button .components-visually-hidden { - height: auto; } + transition-duration: 0s; + transition-delay: 0s; + } +} +.components-button.is-link:focus { + border-radius: 2px; +} +.components-button.is-link.is-destructive { + color: #cc1818; +} +.components-button.is-link.is-destructive:active:not(:disabled), .components-button.is-link.is-destructive:hover:not(:disabled) { + color: #710d0d; + background: none; +} +.components-button.is-link.is-destructive:focus:not(:disabled) { + color: var(--wp-admin-theme-color); +} +.components-button:not([aria-disabled=true]):active { + color: inherit; +} +.components-button:disabled, .components-button[aria-disabled=true] { + cursor: default; + opacity: 0.3; +} +.components-button.is-busy, .components-button.is-secondary.is-busy, .components-button.is-secondary.is-busy:disabled, .components-button.is-secondary.is-busy[aria-disabled=true] { + animation: components-button__busy-animation 2500ms infinite linear; + opacity: 1; + background-size: 100px 100%; + /* stylelint-disable */ + background-image: linear-gradient(-45deg, #fafafa 33%, #e0e0e0 33%, #e0e0e0 70%, #fafafa 70%); + /* stylelint-enable */ +} +.components-button.is-small { + height: 24px; + line-height: 22px; + padding: 0 8px; + font-size: 11px; +} +.components-button.is-small.has-icon:not(.has-text) { + padding: 0 8px; + width: 24px; +} +.components-button.has-icon { + padding: 6px; + min-width: 36px; + justify-content: center; +} +.components-button.has-icon .dashicon { + display: inline-block; + flex: 0 0 auto; + margin-left: 2px; + margin-right: 2px; +} +.components-button.has-icon.has-text { + justify-content: left; +} +.components-button.has-icon.has-text svg { + margin-right: 8px; +} +.components-button.has-icon.has-text .dashicon { + margin-right: 10px; +} +.components-button.is-pressed { + color: #fff; + background: #1e1e1e; +} +.components-button.is-pressed:focus:not(:disabled) { + box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + outline: 2px solid transparent; +} +.components-button.is-pressed:hover:not(:disabled) { + color: #fff; + background: #1e1e1e; +} +.components-button svg { + fill: currentColor; + outline: none; +} +.components-button .components-visually-hidden { + height: auto; +} @keyframes components-button__busy-animation { 0% { - background-position: 200px 0; } } - -.components-checkbox-control__input[type="checkbox"] { + background-position: 200px 0; + } +} +.components-checkbox-control__input[type=checkbox] { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; padding: 6px 8px; box-shadow: 0 0 0 transparent; @@ -471,93 +477,105 @@ height: 24px; -webkit-appearance: none; appearance: none; - transition: 0.1s border-color ease-in-out; } - @media (prefers-reduced-motion: reduce) { - .components-checkbox-control__input[type="checkbox"] { - transition-duration: 0s; } } - @media (min-width: 600px) { - .components-checkbox-control__input[type="checkbox"] { - font-size: 13px; - /* Override core line-height. To be reviewed. */ - line-height: normal; } } - .components-checkbox-control__input[type="checkbox"]:focus { - border-color: #007cba; - border-color: var(--wp-admin-theme-color); - box-shadow: 0 0 0 0.5px #007cba; - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color); - outline: 2px solid transparent; } - .components-checkbox-control__input[type="checkbox"]::-webkit-input-placeholder { - color: rgba(30, 30, 30, 0.62); } - .components-checkbox-control__input[type="checkbox"]::-moz-placeholder { - opacity: 1; - color: rgba(30, 30, 30, 0.62); } - .components-checkbox-control__input[type="checkbox"]:-ms-input-placeholder { - color: rgba(30, 30, 30, 0.62); } - .is-dark-theme .components-checkbox-control__input[type="checkbox"]::-webkit-input-placeholder { - color: rgba(255, 255, 255, 0.65); } - .is-dark-theme .components-checkbox-control__input[type="checkbox"]::-moz-placeholder { - opacity: 1; - color: rgba(255, 255, 255, 0.65); } - .is-dark-theme .components-checkbox-control__input[type="checkbox"]:-ms-input-placeholder { - color: rgba(255, 255, 255, 0.65); } - .components-checkbox-control__input[type="checkbox"]:focus { - box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #007cba; - box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--wp-admin-theme-color); - outline: 2px solid transparent; } - .components-checkbox-control__input[type="checkbox"]:checked { - background: #007cba; - background: var(--wp-admin-theme-color); - border-color: #007cba; - border-color: var(--wp-admin-theme-color); } - .components-checkbox-control__input[type="checkbox"]:checked::-ms-check { - opacity: 0; } - .components-checkbox-control__input[type="checkbox"]:checked::before, .components-checkbox-control__input[type="checkbox"][aria-checked="mixed"]::before { - margin: -3px -5px; - color: #fff; } - @media (min-width: 782px) { - .components-checkbox-control__input[type="checkbox"]:checked::before, .components-checkbox-control__input[type="checkbox"][aria-checked="mixed"]::before { - margin: -4px 0 0 -5px; } } - .components-checkbox-control__input[type="checkbox"][aria-checked="mixed"] { - background: #007cba; - background: var(--wp-admin-theme-color); - border-color: #007cba; - border-color: var(--wp-admin-theme-color); } - .components-checkbox-control__input[type="checkbox"][aria-checked="mixed"]::before { - content: "\f460"; - float: left; - display: inline-block; - vertical-align: middle; - width: 16px; - /* stylelint-disable */ - font: normal 30px/1 dashicons; - /* stylelint-enable */ - speak: none; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; } - @media (min-width: 782px) { - .components-checkbox-control__input[type="checkbox"][aria-checked="mixed"]::before { - float: none; - font-size: 21px; } } - @media (min-width: 600px) { - .components-checkbox-control__input[type="checkbox"] { - height: 20px; - width: 20px; } } - @media (prefers-reduced-motion: reduce) { - .components-checkbox-control__input[type="checkbox"] { - transition-duration: 0s; } } - .components-checkbox-control__input[type="checkbox"]:focus { - box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #007cba; - box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--wp-admin-theme-color); - outline: 2px solid transparent; } - .components-checkbox-control__input[type="checkbox"]:checked { - background: #007cba; - background: var(--wp-admin-theme-color); - border-color: #007cba; - border-color: var(--wp-admin-theme-color); } - .components-checkbox-control__input[type="checkbox"]:checked::-ms-check { - opacity: 0; } - .components-checkbox-control__input[type="checkbox"]:checked::before { - content: none; } + transition: 0.1s border-color ease-in-out; +} +@media (prefers-reduced-motion: reduce) { + .components-checkbox-control__input[type=checkbox] { + transition-duration: 0s; + transition-delay: 0s; + } +} +@media (min-width: 600px) { + .components-checkbox-control__input[type=checkbox] { + font-size: 13px; + /* Override core line-height. To be reviewed. */ + line-height: normal; + } +} +.components-checkbox-control__input[type=checkbox]:focus { + border-color: var(--wp-admin-theme-color); + box-shadow: 0 0 0 1px var(--wp-admin-theme-color); + outline: 2px solid transparent; +} +.components-checkbox-control__input[type=checkbox]::-webkit-input-placeholder { + color: rgba(30, 30, 30, 0.62); +} +.components-checkbox-control__input[type=checkbox]::-moz-placeholder { + opacity: 1; + color: rgba(30, 30, 30, 0.62); +} +.components-checkbox-control__input[type=checkbox]:-ms-input-placeholder { + color: rgba(30, 30, 30, 0.62); +} +.components-checkbox-control__input[type=checkbox]:focus { + box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color); + outline: 2px solid transparent; +} +.components-checkbox-control__input[type=checkbox]:checked { + background: var(--wp-admin-theme-color); + border-color: var(--wp-admin-theme-color); +} +.components-checkbox-control__input[type=checkbox]:checked::-ms-check { + opacity: 0; +} +.components-checkbox-control__input[type=checkbox]:checked::before, .components-checkbox-control__input[type=checkbox][aria-checked=mixed]::before { + margin: -3px -5px; + color: #fff; +} +@media (min-width: 782px) { + .components-checkbox-control__input[type=checkbox]:checked::before, .components-checkbox-control__input[type=checkbox][aria-checked=mixed]::before { + margin: -4px 0 0 -5px; + } +} +.components-checkbox-control__input[type=checkbox][aria-checked=mixed] { + background: var(--wp-admin-theme-color); + border-color: var(--wp-admin-theme-color); +} +.components-checkbox-control__input[type=checkbox][aria-checked=mixed]::before { + content: ""; + float: left; + display: inline-block; + vertical-align: middle; + width: 16px; + /* stylelint-disable */ + font: normal 30px/1 dashicons; + /* stylelint-enable */ + speak: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +@media (min-width: 782px) { + .components-checkbox-control__input[type=checkbox][aria-checked=mixed]::before { + float: none; + font-size: 21px; + } +} +@media (min-width: 600px) { + .components-checkbox-control__input[type=checkbox] { + height: 20px; + width: 20px; + } +} +@media (prefers-reduced-motion: reduce) { + .components-checkbox-control__input[type=checkbox] { + transition-duration: 0s; + transition-delay: 0s; + } +} +.components-checkbox-control__input[type=checkbox]:focus { + box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color); + outline: 2px solid transparent; +} +.components-checkbox-control__input[type=checkbox]:checked { + background: var(--wp-admin-theme-color); + border-color: var(--wp-admin-theme-color); +} +.components-checkbox-control__input[type=checkbox]:checked::-ms-check { + opacity: 0; +} +.components-checkbox-control__input[type=checkbox]:checked::before { + content: none; +} .components-checkbox-control__input-container { position: relative; @@ -565,11 +583,14 @@ margin-right: 12px; vertical-align: middle; width: 24px; - height: 24px; } - @media (min-width: 600px) { - .components-checkbox-control__input-container { - width: 20px; - height: 20px; } } + height: 24px; +} +@media (min-width: 600px) { + .components-checkbox-control__input-container { + width: 20px; + height: 20px; + } +} svg.components-checkbox-control__checked { fill: #fff; @@ -580,21 +601,28 @@ width: 24px; height: 24px; -webkit-user-select: none; - -ms-user-select: none; user-select: none; - pointer-events: none; } - @media (min-width: 600px) { - svg.components-checkbox-control__checked { - left: -2px; - top: -2px; } } + pointer-events: none; +} +@media (min-width: 600px) { + svg.components-checkbox-control__checked { + left: -2px; + top: -2px; + } +} .components-circular-option-picker { display: inline-block; - margin-top: 0.6rem; - width: 100%; } - .components-circular-option-picker .components-circular-option-picker__custom-clear-wrapper { - display: flex; - justify-content: flex-end; } + width: 100%; + min-width: 188px; +} +.components-circular-option-picker .components-circular-option-picker__custom-clear-wrapper { + display: flex; + justify-content: flex-end; +} +.components-circular-option-picker .components-circular-option-picker__swatches { + margin-right: -12px; +} .components-circular-option-picker__option-wrapper { display: inline-block; @@ -604,15 +632,21 @@ margin-bottom: 12px; vertical-align: top; transform: scale(1); - transition: 100ms transform ease; } - @media (prefers-reduced-motion: reduce) { - .components-circular-option-picker__option-wrapper { - transition-duration: 0s; } } - .components-circular-option-picker__option-wrapper:hover { - transform: scale(1.2); } - .components-circular-option-picker__option-wrapper > div { - height: 100%; - width: 100%; } + transition: 100ms transform ease; +} +@media (prefers-reduced-motion: reduce) { + .components-circular-option-picker__option-wrapper { + transition-duration: 0s; + transition-delay: 0s; + } +} +.components-circular-option-picker__option-wrapper:hover { + transform: scale(1.2); +} +.components-circular-option-picker__option-wrapper > div { + height: 100%; + width: 100%; +} .components-circular-option-picker__option-wrapper::before { content: ""; @@ -624,7 +658,8 @@ border-radius: 50%; z-index: -1; /* stylelint-disable-next-line function-url-quotes */ - background: url('data:image/svg+xml,%3Csvg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M6 8V6H4v2h2zM8 8V6h2v2H8zM10 16H8v-2h2v2zM12 16v-2h2v2h-2zM12 18v-2h-2v2H8v2h2v-2h2zM14 18v2h-2v-2h2zM16 18h-2v-2h2v2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M18 18h2v-2h-2v-2h2v-2h-2v-2h2V8h-2v2h-2V8h-2v2h2v2h-2v2h2v2h2v2zm-2-4v-2h2v2h-2z" fill="%23555D65"/%3E%3Cpath d="M18 18v2h-2v-2h2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M8 10V8H6v2H4v2h2v2H4v2h2v2H4v2h2v2H4v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2v2h-2V4h-2v2h-2V4h-2v2h-2V4h-2v2h2v2h-2v2H8zm0 2v-2H6v2h2zm2 0v-2h2v2h-2zm0 2v-2H8v2H6v2h2v2H6v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h-2v2h-2V6h-2v2h-2v2h2v2h-2v2h-2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M4 0H2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2H8V0H6v2H4V0zm0 4V2H2v2h2zm2 0V2h2v2H6zm0 2V4H4v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2H8v2H6z" fill="%23555D65"/%3E%3C/svg%3E'); } + background: url('data:image/svg+xml,%3Csvg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M6 8V6H4v2h2zM8 8V6h2v2H8zM10 16H8v-2h2v2zM12 16v-2h2v2h-2zM12 18v-2h-2v2H8v2h2v-2h2zM14 18v2h-2v-2h2zM16 18h-2v-2h2v2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M18 18h2v-2h-2v-2h2v-2h-2v-2h2V8h-2v2h-2V8h-2v2h2v2h-2v2h2v2h2v2zm-2-4v-2h2v2h-2z" fill="%23555D65"/%3E%3Cpath d="M18 18v2h-2v-2h2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M8 10V8H6v2H4v2h2v2H4v2h2v2H4v2h2v2H4v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2v2h-2V4h-2v2h-2V4h-2v2h-2V4h-2v2h2v2h-2v2H8zm0 2v-2H6v2h2zm2 0v-2h2v2h-2zm0 2v-2H8v2H6v2h2v2H6v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h-2v2h-2V6h-2v2h-2v2h2v2h-2v2h-2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M4 0H2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2H8V0H6v2H4V0zm0 4V2H2v2h2zm2 0V2h2v2H6zm0 2V4H4v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2H8v2H6z" fill="%23555D65"/%3E%3C/svg%3E'); +} .components-circular-option-picker__option { display: inline-block; @@ -636,66 +671,130 @@ background: transparent; box-shadow: inset 0 0 0 14px; transition: 100ms box-shadow ease; - cursor: pointer; } - @media (prefers-reduced-motion: reduce) { - .components-circular-option-picker__option { - transition-duration: 0s; } } - .components-circular-option-picker__option:hover { - box-shadow: inset 0 0 0 14px !important; } - .components-circular-option-picker__option.is-pressed { - box-shadow: inset 0 0 0 4px; - position: relative; - z-index: 1; - overflow: visible; } - .components-circular-option-picker__option.is-pressed + svg { - position: absolute; - left: 2px; - top: 2px; - border-radius: 50%; - z-index: 2; - pointer-events: none; } - .components-circular-option-picker__option::after { - content: ""; - position: absolute; - top: -1px; - left: -1px; - bottom: -1px; - right: -1px; - border-radius: 50%; - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); - border: 1px solid transparent; } - .components-circular-option-picker__option:focus::after { - content: ""; - border: 2px solid #606a73; - width: 32px; - height: 32px; - position: absolute; - top: -2px; - left: -2px; - border-radius: 50%; - box-shadow: inset 0 0 0 2px #fff; } - .components-circular-option-picker__option.components-button:focus { - background-color: transparent; - box-shadow: inset 0 0 0 14px; - outline: none; } + cursor: pointer; +} +@media (prefers-reduced-motion: reduce) { + .components-circular-option-picker__option { + transition-duration: 0s; + transition-delay: 0s; + } +} +.components-circular-option-picker__option:hover { + box-shadow: inset 0 0 0 14px !important; +} +.components-circular-option-picker__option.is-pressed { + box-shadow: inset 0 0 0 4px; + position: relative; + z-index: 1; + overflow: visible; +} +.components-circular-option-picker__option.is-pressed + svg { + position: absolute; + left: 2px; + top: 2px; + border-radius: 50%; + z-index: 2; + pointer-events: none; +} +.components-circular-option-picker__option::after { + content: ""; + position: absolute; + top: -1px; + left: -1px; + bottom: -1px; + right: -1px; + border-radius: 50%; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); + border: 1px solid transparent; +} +.components-circular-option-picker__option:focus::after { + content: ""; + border: 2px solid #757575; + width: 32px; + height: 32px; + position: absolute; + top: -2px; + left: -2px; + border-radius: 50%; + box-shadow: inset 0 0 0 2px #fff; +} +.components-circular-option-picker__option.components-button:focus { + background-color: transparent; + box-shadow: inset 0 0 0 14px; + outline: none; +} .components-circular-option-picker__button-action .components-circular-option-picker__option { color: #fff; - background: #fff; } + background: #fff; +} .components-circular-option-picker__dropdown-link-action { - margin-right: 16px; } - .components-circular-option-picker__dropdown-link-action .components-button { - line-height: 22px; } + margin-right: 16px; +} +.components-circular-option-picker__dropdown-link-action .components-button { + line-height: 22px; +} + +.components-color-edit__color-option-main-area { + display: flex; + align-items: center; +} +.components-color-edit__color-option-main-area div.components-circular-option-picker__option-wrapper { + display: block; + margin: 8px; +} + +.components-color-edit__color-option.is-hover { + background: #e0e0e0; +} + +.components-color-edit__cancel-button { + float: right; +} + +.components-color-edit__color-option-color-name { + width: 100%; +} + +.components-color-edit__label-and-insert-container { + display: flex; + align-items: center; + justify-content: space-between; +} + +.components-color-edit__insert-button { + margin-top: -8px; +} + +.components-color-edit__hidden-control { + position: relative; + left: -9999px; +} + +.components-color-edit__color-option-color-name-input .components-base-control__field { + margin-bottom: 0; + margin-right: 8px; +} + +.components-color-edit__slug-input { + margin-left: 8px; +} + +.components-color-edit__reset-button { + float: right; +} .component-color-indicator { width: 25px; height: 16px; margin-left: 0.8rem; border: 1px solid #dadada; - display: inline-block; } - .component-color-indicator + .component-color-indicator { - margin-left: 0.5rem; } + display: inline-block; +} +.component-color-indicator + .component-color-indicator { + margin-left: 0.5rem; +} /** * Parts of this source were derived and modified from react-color, @@ -724,20 +823,25 @@ * THE SOFTWARE. */ .components-color-picker { - width: 100%; } - .components-color-picker * { - box-sizing: border-box; } + width: 100%; +} +.components-color-picker * { + box-sizing: border-box; +} .components-color-picker__saturation { width: 100%; padding-bottom: 55%; - position: relative; } + position: relative; +} .components-color-picker__body { - padding: 16px 16px 12px; } + padding: 16px 16px 12px; +} .components-color-picker__controls { - display: flex; } + display: flex; +} .components-color-picker__saturation-pointer, .components-color-picker__hue-pointer, @@ -746,7 +850,8 @@ position: absolute; cursor: pointer; box-shadow: none; - border: none; } + border: none; +} /* CURRENT COLOR COMPONENT */ .components-color-picker__swatch { @@ -758,11 +863,13 @@ overflow: hidden; background-image: linear-gradient(45deg, #ddd 25%, transparent 25%), linear-gradient(-45deg, #ddd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ddd 75%), linear-gradient(-45deg, transparent 75%, #ddd 75%); background-size: 10px 10px; - background-position: 0 0, 0 5px, 5px -5px, -5px 0; } - .is-alpha-disabled .components-color-picker__swatch { - width: 12px; - height: 12px; - margin-top: 0; } + background-position: 0 0, 0 5px, 5px -5px, -5px 0; +} +.is-alpha-disabled .components-color-picker__swatch { + width: 12px; + height: 12px; + margin-top: 0; +} .components-color-picker__active { position: absolute; @@ -772,7 +879,8 @@ bottom: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); - z-index: 2; } + z-index: 2; +} /* SATURATION COMPONENT */ .components-color-picker__saturation-color, @@ -782,17 +890,21 @@ top: 0; left: 0; right: 0; - bottom: 0; } + bottom: 0; +} .components-color-picker__saturation-color { - overflow: visible; } + overflow: visible; +} .components-color-picker__saturation-white { /*rtl:ignore*/ - background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); } + background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); +} .components-color-picker__saturation-black { - background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)); } + background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)); +} .components-button.components-color-picker__saturation-pointer { width: 14px; @@ -801,18 +913,22 @@ border-radius: 50%; background-color: transparent; transform: translate(-50%, -50%); - box-shadow: 0 0 0 1px #fff, inset 0 0 0 1px #000, 0 0 0 2px #000; } - .components-button.components-color-picker__saturation-pointer:focus:not(:disabled) { - box-shadow: 0 0 0 2px #fff, inset 0 0 0 1px #000, 0 0 0 3px #000; } + box-shadow: 0 0 0 1px #fff, inset 0 0 0 1px #000, 0 0 0 2px #000; +} +.components-button.components-color-picker__saturation-pointer:focus:not(:disabled) { + box-shadow: 0 0 0 2px #fff, inset 0 0 0 1px #000, 0 0 0 3px #000; +} /* HUE & ALPHA BARS */ .components-color-picker__toggles { - flex: 1; } + flex: 1; +} .components-color-picker__alpha { background-image: linear-gradient(45deg, #ddd 25%, transparent 25%), linear-gradient(-45deg, #ddd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ddd 75%), linear-gradient(-45deg, transparent 75%, #ddd 75%); background-size: 10px 10px; - background-position: 0 0, 0 5px, 5px -5px, -5px 0; } + background-position: 0 0, 0 5px, 5px -5px, -5px 0; +} .components-color-picker__hue-gradient, .components-color-picker__alpha-gradient { @@ -820,26 +936,31 @@ top: 0; left: 0; right: 0; - bottom: 0; } + bottom: 0; +} .components-color-picker__hue, .components-color-picker__alpha { height: 12px; - position: relative; } + position: relative; +} .is-alpha-enabled .components-color-picker__hue { - margin-bottom: 8px; } + margin-bottom: 8px; +} .components-color-picker__hue-bar, .components-color-picker__alpha-bar { position: relative; margin: 0 3px; height: 100%; - padding: 0 2px; } + padding: 0 2px; +} .components-color-picker__hue-gradient { /*rtl:ignore*/ - background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); } + background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); +} .components-color-picker__hue-pointer, .components-color-picker__alpha-pointer { @@ -850,28 +971,32 @@ border-radius: 50%; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37); background: #fff; - transform: translate(-7px, -1px); } + transform: translate(-7px, -1px); +} .components-color-picker__hue-pointer, .components-color-picker__saturation-pointer { - transition: box-shadow 0.1s linear; } - @media (prefers-reduced-motion: reduce) { - .components-color-picker__hue-pointer, - .components-color-picker__saturation-pointer { - transition-duration: 0s; } } + transition: box-shadow 0.1s linear; +} +@media (prefers-reduced-motion: reduce) { + .components-color-picker__hue-pointer, +.components-color-picker__saturation-pointer { + transition-duration: 0s; + transition-delay: 0s; + } +} .components-color-picker__saturation-pointer:focus { - box-shadow: 0 0 0 2px #fff, 0 0 0 4px #007cba, 0 0 5px 0 #007cba, inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 2px rgba(0, 0, 0, 0.4); - box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color), 0 0 5px 0 var(--wp-admin-theme-color), inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 2px rgba(0, 0, 0, 0.4); } + box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color), 0 0 5px 0 var(--wp-admin-theme-color), inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 2px rgba(0, 0, 0, 0.4); +} .components-color-picker__hue-pointer:focus, .components-color-picker__alpha-pointer:focus { - border-color: #007cba; border-color: var(--wp-admin-theme-color); - box-shadow: 0 0 0 2px #007cba, 0 0 3px 0 #007cba; box-shadow: 0 0 0 2px var(--wp-admin-theme-color), 0 0 3px 0 var(--wp-admin-theme-color); outline: 2px solid transparent; - outline-offset: -2px; } + outline-offset: -2px; +} /* INPUTS COMPONENT */ .components-color-picker__inputs-wrapper { @@ -879,1573 +1004,67 @@ padding-top: 16px; display: flex; align-items: flex-end; - min-width: 255px; } - .components-color-picker__inputs-wrapper fieldset { - flex: 1; - border: none; - margin: 0; - padding: 0; } - .components-color-picker__inputs-wrapper .components-color-picker__inputs-fields .components-text-control__input[type="number"] { - padding: 6px 3px; - margin: 0; } + min-width: 255px; +} +.components-color-picker__inputs-wrapper fieldset { + flex: 1; + border: none; + margin: 0; + padding: 0; +} +.components-color-picker__inputs-wrapper .components-color-picker__inputs-fields .components-text-control__input[type=number] { + padding: 6px 3px; + margin: 0; +} .components-color-picker__inputs-field { - width: 100%; } + width: 100%; +} .components-color-picker__inputs-fields { display: flex; /*rtl:ignore*/ direction: ltr; flex-grow: 1; - margin-right: 4px; } - .components-color-picker__inputs-fields .components-base-control + .components-base-control { - margin-top: 0; } - .components-color-picker__inputs-fields .components-base-control__field { - margin: 0 2px; } + margin-right: 4px; +} +.components-color-picker__inputs-fields .components-base-control + .components-base-control { + margin-top: 0; +} +.components-color-picker__inputs-fields .components-base-control__field { + margin: 0 2px; +} .components-color-picker__inputs-toggle { height: 30px; - padding: 0 5px; } + padding: 0 5px; +} .components-combobox-control { - color: #555d66; - position: relative; } - -.components-combobox-control__label { - display: block; - margin-bottom: 5px; } - -.components-combobox-control__button { - border: 1px solid #7e8993; - border-radius: 4px; - color: #555d66; - display: inline-block; - min-height: 30px; - min-width: 130px; - position: relative; - text-align: left; } - .components-combobox-control__button:focus { - border-color: #007cba; - border-color: var(--wp-admin-theme-color); } - .components-combobox-control__button-input { - border: none; - height: calc(100% - 2px); - left: 1px; - padding: 0 4px; - position: absolute; - top: 1px; - width: calc(100% - 2px); } - .components-combobox-control__button-button:hover { - box-shadow: none !important; } - .components-combobox-control__button-icon { - height: 100%; - padding: 0 4px; - position: absolute; - right: 0; - top: 0; } - -.components-combobox-control__menu { - background: #fff; - min-width: 100%; - padding: 0; - position: absolute; - z-index: 1000000; } - -.components-combobox-control__item { - align-items: center; - display: flex; - list-style-type: none; - padding: 10px 5px 10px 25px; } - .components-combobox-control__item.is-highlighted { - background: #ddd; } - .components-combobox-control__item-icon { - margin-left: -20px; - margin-right: 0; } - -.components-custom-gradient-picker { - margin-top: 8px; } - -.components-custom-gradient-picker__gradient-bar:not(.has-gradient) { - opacity: 0.4; } - -.components-custom-gradient-picker__gradient-bar { width: 100%; - height: 24px; - border-radius: 24px; - margin-bottom: 8px; - padding-left: 3px; - padding-right: 21px; } - .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__markers-container { - position: relative; } - .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__insert-point { - border-radius: 50%; - background: #fff; - padding: 2px; - min-width: 24px; - width: 24px; - height: 24px; - position: relative; } - .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__insert-point svg { - height: 100%; - width: 100%; } - .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button { - border: 2px solid #fff; - border-radius: 50%; - height: 18px; - padding: 0; - position: absolute; - width: 18px; - top: 3px; } - .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button.is-active { - background: #fafafa; - color: #23282d; - border-color: #999; - box-shadow: 0 0 0 1px #fff, 0 0 0 3px #007cba; - box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-admin-theme-color); } - -.components-custom-gradient-picker__color-picker-popover .components-custom-gradient-picker__remove-control-point { - margin-left: auto; - margin-right: auto; - display: block; - margin-bottom: 8px; } - -.components-custom-gradient-picker__inserter { - width: 100%; } - -.components-custom-gradient-picker__liner-gradient-indicator { - display: inline-block; - flex: 0 auto; - width: 20px; - height: 20px; } - -.components-custom-gradient-picker__ui-line { - display: flex; - justify-content: space-between; } - -.components-custom-gradient-picker .components-custom-gradient-picker__ui-line .components-base-control.components-angle-picker, -.components-custom-gradient-picker .components-custom-gradient-picker__ui-line .components-base-control.components-custom-gradient-picker__type-picker { - margin-bottom: 0; } - -.components-custom-gradient-picker .components-custom-gradient-picker__toolbar { - border: none; } - .components-custom-gradient-picker .components-custom-gradient-picker__toolbar > div + div { - margin-left: 1px; } - .components-custom-gradient-picker .components-custom-gradient-picker__toolbar button.is-pressed > svg { - background: #fff; - border: 1px solid #7e8993; - border-radius: 2px; } - -.components-custom-select-control { - position: relative; } - -.components-custom-select-control__label { - display: block; - margin-bottom: 8px; } - -.components-custom-select-control__button { - border: 1px solid #757575; - border-radius: 2px; - min-height: 30px; - min-width: 130px; - position: relative; - text-align: left; } - .components-custom-select-control__button.components-custom-select-control__button { - padding-right: 24px; } - .components-custom-select-control__button:focus:not(:disabled) { - border-color: #007cba; - border-color: var(--wp-admin-theme-color); - box-shadow: 0 0 0 0.5px #007cba; - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color); } - .components-custom-select-control__button .components-custom-select-control__button-icon { - height: 100%; - padding: 0; - position: absolute; - right: 0; - top: 0; } - -.components-custom-select-control__menu { - background-color: #fff; - max-height: 400px; - min-width: 100%; - overflow: auto; - padding: 0; - position: absolute; - z-index: 1000000; } - .components-custom-select-control__menu:focus { - border: 1px solid #1e1e1e; - border-radius: 2px; - outline: none; - transition: none; } - -.components-custom-select-control__item { - align-items: center; - display: flex; - list-style-type: none; - padding: 10px 5px 10px 25px; - cursor: default; } - .components-custom-select-control__item.is-highlighted { - background: #ddd; } - .components-custom-select-control__item-icon { - margin-left: -20px; - margin-right: 0; } - -svg.dashicon { - fill: currentColor; - outline: none; } - -/*rtl:begin:ignore*/ -.PresetDateRangePicker_panel { - padding: 0 22px 11px; } - -.PresetDateRangePicker_button { - position: relative; - height: 100%; - text-align: center; - background: 0 0; - border: 2px solid #00a699; - color: #00a699; - padding: 4px 12px; - margin-right: 8px; - font: inherit; - font-weight: 700; - line-height: normal; - overflow: visible; - box-sizing: border-box; - cursor: pointer; } - -.PresetDateRangePicker_button:active { - outline: 0; } - -.PresetDateRangePicker_button__selected { - color: #fff; - background: #00a699; } - -.SingleDatePickerInput { - display: inline-block; - background-color: #fff; } - -.SingleDatePickerInput__withBorder { - border-radius: 2px; - border: 1px solid #dbdbdb; } - -.SingleDatePickerInput__rtl { - direction: rtl; } - -.SingleDatePickerInput__disabled { - background-color: #f2f2f2; } - -.SingleDatePickerInput__block { - display: block; } - -.SingleDatePickerInput__showClearDate { - padding-right: 30px; } - -.SingleDatePickerInput_clearDate { - background: 0 0; - border: 0; - color: inherit; - font: inherit; - line-height: normal; - overflow: visible; - cursor: pointer; - padding: 10px; - margin: 0 10px 0 5px; - position: absolute; - right: 0; - top: 50%; - transform: translateY(-50%); } - -.SingleDatePickerInput_clearDate__default:focus, -.SingleDatePickerInput_clearDate__default:hover { - background: #dbdbdb; - border-radius: 50%; } - -.SingleDatePickerInput_clearDate__small { - padding: 6px; } - -.SingleDatePickerInput_clearDate__hide { - visibility: hidden; } - -.SingleDatePickerInput_clearDate_svg { - fill: #82888a; - height: 12px; - width: 15px; - vertical-align: middle; } - -.SingleDatePickerInput_clearDate_svg__small { - height: 9px; } - -.SingleDatePickerInput_calendarIcon { - background: 0 0; - border: 0; - color: inherit; - font: inherit; - line-height: normal; - overflow: visible; - cursor: pointer; - display: inline-block; - vertical-align: middle; - padding: 10px; - margin: 0 5px 0 10px; } - -.SingleDatePickerInput_calendarIcon_svg { - fill: #82888a; - height: 15px; - width: 14px; - vertical-align: middle; } - -.SingleDatePicker { - position: relative; - display: inline-block; } - -.SingleDatePicker__block { - display: block; } - -.SingleDatePicker_picker { - z-index: 1; - background-color: #fff; - position: absolute; } - -.SingleDatePicker_picker__rtl { - direction: rtl; } - -.SingleDatePicker_picker__directionLeft { - left: 0; } - -.SingleDatePicker_picker__directionRight { - right: 0; } - -.SingleDatePicker_picker__portal { - background-color: rgba(0, 0, 0, 0.3); - position: fixed; - top: 0; - left: 0; - height: 100%; - width: 100%; } - -.SingleDatePicker_picker__fullScreenPortal { - background-color: #fff; } - -.SingleDatePicker_closeButton { - background: 0 0; - border: 0; - color: inherit; - font: inherit; - line-height: normal; - overflow: visible; - cursor: pointer; - position: absolute; - top: 0; - right: 0; - padding: 15px; - z-index: 2; } - -.SingleDatePicker_closeButton:focus, -.SingleDatePicker_closeButton:hover { - color: #b0b3b4; - text-decoration: none; } - -.SingleDatePicker_closeButton_svg { - height: 15px; - width: 15px; - fill: #cacccd; } - -.DayPickerKeyboardShortcuts_buttonReset { - background: 0 0; - border: 0; - border-radius: 0; - color: inherit; - font: inherit; - line-height: normal; - overflow: visible; - padding: 0; - cursor: pointer; - font-size: 14px; } - -.DayPickerKeyboardShortcuts_buttonReset:active { - outline: 0; } - -.DayPickerKeyboardShortcuts_show { - width: 22px; - position: absolute; - z-index: 2; } - -.DayPickerKeyboardShortcuts_show__bottomRight { - border-top: 26px solid transparent; - border-right: 33px solid #00a699; - bottom: 0; - right: 0; } - -.DayPickerKeyboardShortcuts_show__bottomRight:hover { - border-right: 33px solid #008489; } - -.DayPickerKeyboardShortcuts_show__topRight { - border-bottom: 26px solid transparent; - border-right: 33px solid #00a699; - top: 0; - right: 0; } - -.DayPickerKeyboardShortcuts_show__topRight:hover { - border-right: 33px solid #008489; } - -.DayPickerKeyboardShortcuts_show__topLeft { - border-bottom: 26px solid transparent; - border-left: 33px solid #00a699; - top: 0; - left: 0; } - -.DayPickerKeyboardShortcuts_show__topLeft:hover { - border-left: 33px solid #008489; } - -.DayPickerKeyboardShortcuts_showSpan { - color: #fff; - position: absolute; } - -.DayPickerKeyboardShortcuts_showSpan__bottomRight { - bottom: 0; - right: -28px; } - -.DayPickerKeyboardShortcuts_showSpan__topRight { - top: 1px; - right: -28px; } - -.DayPickerKeyboardShortcuts_showSpan__topLeft { - top: 1px; - left: -28px; } - -.DayPickerKeyboardShortcuts_panel { - overflow: auto; - background: #fff; - border: 1px solid #dbdbdb; - border-radius: 2px; - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; - z-index: 2; - padding: 22px; - margin: 33px; } - -.DayPickerKeyboardShortcuts_title { - font-size: 16px; - font-weight: 700; - margin: 0; } - -.DayPickerKeyboardShortcuts_list { - list-style: none; - padding: 0; - font-size: 14px; } - -.DayPickerKeyboardShortcuts_close { - position: absolute; - right: 22px; - top: 22px; - z-index: 2; } - -.DayPickerKeyboardShortcuts_close:active { - outline: 0; } - -.DayPickerKeyboardShortcuts_closeSvg { - height: 15px; - width: 15px; - fill: #cacccd; } - -.DayPickerKeyboardShortcuts_closeSvg:focus, -.DayPickerKeyboardShortcuts_closeSvg:hover { - fill: #82888a; } - -.CalendarDay { - box-sizing: border-box; - cursor: pointer; - font-size: 14px; - text-align: center; } - -.CalendarDay:active { - outline: 0; } - -.CalendarDay__defaultCursor { - cursor: default; } - -.CalendarDay__default { - border: 1px solid #e4e7e7; - color: #484848; - background: #fff; } - -.CalendarDay__default:hover { - background: #e4e7e7; - border: 1px double #e4e7e7; - color: inherit; } - -.CalendarDay__hovered_offset { - background: #f4f5f5; - border: 1px double #e4e7e7; - color: inherit; } - -.CalendarDay__outside { - border: 0; - background: #fff; - color: #484848; } - -.CalendarDay__outside:hover { - border: 0; } - -.CalendarDay__blocked_minimum_nights { - background: #fff; - border: 1px solid #eceeee; - color: #cacccd; } - -.CalendarDay__blocked_minimum_nights:active, -.CalendarDay__blocked_minimum_nights:hover { - background: #fff; - color: #cacccd; } - -.CalendarDay__highlighted_calendar { - background: #ffe8bc; - color: #484848; } - -.CalendarDay__highlighted_calendar:active, -.CalendarDay__highlighted_calendar:hover { - background: #ffce71; - color: #484848; } - -.CalendarDay__selected_span { - background: #66e2da; - border: 1px solid #33dacd; - color: #fff; } - -.CalendarDay__selected_span:active, -.CalendarDay__selected_span:hover { - background: #33dacd; - border: 1px solid #33dacd; - color: #fff; } - -.CalendarDay__last_in_range { - border-right: #00a699; } - -.CalendarDay__selected, -.CalendarDay__selected:active, -.CalendarDay__selected:hover { - background: #00a699; - border: 1px solid #00a699; - color: #fff; } - -.CalendarDay__hovered_span, -.CalendarDay__hovered_span:hover { - background: #b2f1ec; - border: 1px solid #80e8e0; - color: #007a87; } - -.CalendarDay__hovered_span:active { - background: #80e8e0; - border: 1px solid #80e8e0; - color: #007a87; } - -.CalendarDay__blocked_calendar, -.CalendarDay__blocked_calendar:active, -.CalendarDay__blocked_calendar:hover { - background: #cacccd; - border: 1px solid #cacccd; - color: #82888a; } - -.CalendarDay__blocked_out_of_range, -.CalendarDay__blocked_out_of_range:active, -.CalendarDay__blocked_out_of_range:hover { - background: #fff; - border: 1px solid #e4e7e7; - color: #cacccd; } - -.CalendarMonth { - background: #fff; - text-align: center; - vertical-align: top; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; } - -.CalendarMonth_table { - border-collapse: collapse; - border-spacing: 0; } - -.CalendarMonth_verticalSpacing { - border-collapse: separate; } - -.CalendarMonth_caption { - color: #484848; - font-size: 18px; - text-align: center; - padding-top: 22px; - padding-bottom: 37px; - caption-side: initial; } - -.CalendarMonth_caption__verticalScrollable { - padding-top: 12px; - padding-bottom: 7px; } - -.CalendarMonthGrid { - background: #fff; - text-align: left; - z-index: 0; } - -.CalendarMonthGrid__animating { - z-index: 1; } - -.CalendarMonthGrid__horizontal { - position: absolute; - left: 9px; } - -.CalendarMonthGrid__vertical { - margin: 0 auto; } - -.CalendarMonthGrid__vertical_scrollable { - margin: 0 auto; - overflow-y: scroll; } - -.CalendarMonthGrid_month__horizontal { - display: inline-block; - vertical-align: top; - min-height: 100%; } - -.CalendarMonthGrid_month__hideForAnimation { - position: absolute; - z-index: -1; - opacity: 0; - pointer-events: none; } - -.CalendarMonthGrid_month__hidden { - visibility: hidden; } - -.DayPickerNavigation { - position: relative; - z-index: 2; } - -.DayPickerNavigation__horizontal { - height: 0; } - -.DayPickerNavigation__verticalDefault { - position: absolute; - width: 100%; - height: 52px; - bottom: 0; - left: 0; } - -.DayPickerNavigation__verticalScrollableDefault { - position: relative; } - -.DayPickerNavigation_button { - cursor: pointer; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - border: 0; - padding: 0; - margin: 0; } - -.DayPickerNavigation_button__default { - border: 1px solid #e4e7e7; - background-color: #fff; - color: #757575; } - -.DayPickerNavigation_button__default:focus, -.DayPickerNavigation_button__default:hover { - border: 1px solid #c4c4c4; } - -.DayPickerNavigation_button__default:active { - background: #f2f2f2; } - -.DayPickerNavigation_button__horizontalDefault { - position: absolute; - top: 18px; - line-height: .78; - border-radius: 3px; - padding: 6px 9px; } - -.DayPickerNavigation_leftButton__horizontalDefault { - left: 22px; } - -.DayPickerNavigation_rightButton__horizontalDefault { - right: 22px; } - -.DayPickerNavigation_button__verticalDefault { - padding: 5px; - background: #fff; - box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1); - position: relative; - display: inline-block; - height: 100%; - width: 50%; } - -.DayPickerNavigation_nextButton__verticalDefault { - border-left: 0; } - -.DayPickerNavigation_nextButton__verticalScrollableDefault { - width: 100%; } - -.DayPickerNavigation_svg__horizontal { - height: 19px; - width: 19px; - fill: #82888a; - display: block; } - -.DayPickerNavigation_svg__vertical { - height: 42px; - width: 42px; - fill: #484848; - display: block; } - -.DayPicker { - background: #fff; - position: relative; - text-align: left; } - -.DayPicker__horizontal { - background: #fff; } - -.DayPicker__verticalScrollable { - height: 100%; } - -.DayPicker__hidden { - visibility: hidden; } - -.DayPicker__withBorder { - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.07); - border-radius: 3px; } - -.DayPicker_portal__horizontal { - box-shadow: none; - position: absolute; - left: 50%; - top: 50%; } - -.DayPicker_portal__vertical { - position: initial; } - -.DayPicker_focusRegion { - outline: 0; } - -.DayPicker_calendarInfo__horizontal, -.DayPicker_wrapper__horizontal { - display: inline-block; - vertical-align: top; } - -.DayPicker_weekHeaders { - position: relative; } - -.DayPicker_weekHeaders__horizontal { - margin-left: 9px; } - -.DayPicker_weekHeader { - color: #757575; - position: absolute; - top: 62px; - z-index: 2; - text-align: left; } - -.DayPicker_weekHeader__vertical { - left: 50%; } - -.DayPicker_weekHeader__verticalScrollable { - top: 0; - display: table-row; - border-bottom: 1px solid #dbdbdb; - background: #fff; - margin-left: 0; - left: 0; +} + +input.components-combobox-control__input[type=text] { width: 100%; - text-align: center; } - -.DayPicker_weekHeader_ul { - list-style: none; - margin: 1px 0; - padding-left: 0; - padding-right: 0; - font-size: 14px; } - -.DayPicker_weekHeader_li { - display: inline-block; - text-align: center; } - -.DayPicker_transitionContainer { - position: relative; - overflow: hidden; - border-radius: 3px; } - -.DayPicker_transitionContainer__horizontal { - transition: height .2s ease-in-out; } - -.DayPicker_transitionContainer__vertical { - width: 100%; } - -.DayPicker_transitionContainer__verticalScrollable { - padding-top: 20px; - height: 100%; - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; - overflow-y: scroll; } - -.DateInput { + border: none; + box-shadow: none; + font-size: 16px; + padding: 2px; margin: 0; - padding: 0; - background: #fff; - position: relative; - display: inline-block; - width: 130px; - vertical-align: middle; } - -.DateInput__small { - width: 97px; } - -.DateInput__block { - width: 100%; } - -.DateInput__disabled { - background: #f2f2f2; - color: #dbdbdb; } - -.DateInput_input { - font-weight: 200; - font-size: 19px; - line-height: 24px; - color: #484848; - background-color: #fff; - width: 100%; - padding: 11px 11px 9px; - border: 0; - border-top: 0; - border-right: 0; - border-bottom: 2px solid transparent; - border-left: 0; - border-radius: 0; } - -.DateInput_input__small { - font-size: 15px; - line-height: 18px; - letter-spacing: .2px; - padding: 7px 7px 5px; } - -.DateInput_input__regular { - font-weight: auto; } - -.DateInput_input__readOnly { - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; } - -.DateInput_input__focused { - outline: 0; - background: #fff; - border: 0; - border-top: 0; - border-right: 0; - border-bottom: 2px solid #008489; - border-left: 0; } - -.DateInput_input__disabled { - background: #f2f2f2; - font-style: italic; } - -.DateInput_screenReaderMessage { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; } - -.DateInput_fang { - position: absolute; - width: 20px; - height: 10px; - left: 22px; - z-index: 2; } - -.DateInput_fangShape { - fill: #fff; } - -.DateInput_fangStroke { - stroke: #dbdbdb; - fill: transparent; } - -.DateRangePickerInput { - background-color: #fff; - display: inline-block; } - -.DateRangePickerInput__disabled { - background: #f2f2f2; } - -.DateRangePickerInput__withBorder { - border-radius: 2px; - border: 1px solid #dbdbdb; } - -.DateRangePickerInput__rtl { - direction: rtl; } - -.DateRangePickerInput__block { - display: block; } - -.DateRangePickerInput__showClearDates { - padding-right: 30px; } - -.DateRangePickerInput_arrow { - display: inline-block; - vertical-align: middle; - color: #484848; } - -.DateRangePickerInput_arrow_svg { - vertical-align: middle; - fill: #484848; - height: 24px; - width: 24px; } - -.DateRangePickerInput_clearDates { - background: 0 0; - border: 0; - color: inherit; - font: inherit; - line-height: normal; - overflow: visible; - cursor: pointer; - padding: 10px; - margin: 0 10px 0 5px; - position: absolute; - right: 0; - top: 50%; - transform: translateY(-50%); } - -.DateRangePickerInput_clearDates__small { - padding: 6px; } - -.DateRangePickerInput_clearDates_default:focus, -.DateRangePickerInput_clearDates_default:hover { - background: #dbdbdb; - border-radius: 50%; } - -.DateRangePickerInput_clearDates__hide { - visibility: hidden; } - -.DateRangePickerInput_clearDates_svg { - fill: #82888a; - height: 12px; - width: 15px; - vertical-align: middle; } - -.DateRangePickerInput_clearDates_svg__small { - height: 9px; } - -.DateRangePickerInput_calendarIcon { - background: 0 0; - border: 0; - color: inherit; - font: inherit; - line-height: normal; - overflow: visible; - cursor: pointer; - display: inline-block; - vertical-align: middle; - padding: 10px; - margin: 0 5px 0 10px; } - -.DateRangePickerInput_calendarIcon_svg { - fill: #82888a; - height: 15px; - width: 14px; - vertical-align: middle; } - -.DateRangePicker { - position: relative; - display: inline-block; } - -.DateRangePicker__block { - display: block; } - -.DateRangePicker_picker { - z-index: 1; - background-color: #fff; - position: absolute; } - -.DateRangePicker_picker__rtl { - direction: rtl; } - -.DateRangePicker_picker__directionLeft { - left: 0; } - -.DateRangePicker_picker__directionRight { - right: 0; } - -.DateRangePicker_picker__portal { - background-color: rgba(0, 0, 0, 0.3); - position: fixed; - top: 0; - left: 0; - height: 100%; - width: 100%; } - -.DateRangePicker_picker__fullScreenPortal { - background-color: #fff; } - -.DateRangePicker_closeButton { - background: 0 0; - border: 0; - color: inherit; - font: inherit; - line-height: normal; - overflow: visible; - cursor: pointer; - position: absolute; - top: 0; - right: 0; - padding: 15px; - z-index: 2; } - -.DateRangePicker_closeButton:focus, -.DateRangePicker_closeButton:hover { - color: #b0b3b4; - text-decoration: none; } - -.DateRangePicker_closeButton_svg { - height: 15px; - width: 15px; - fill: #cacccd; } - -/*rtl:end:ignore*/ -.components-datetime { - padding: 0; } - .components-datetime .components-datetime__calendar-help { - padding: 16px; } - .components-datetime .components-datetime__calendar-help h4 { - margin: 0; } - .components-datetime .components-datetime__buttons { - display: flex; - justify-content: space-between; } - .components-datetime .components-datetime__date-help-toggle { - display: block; - margin-left: auto; } - .components-datetime fieldset { - border: 0; - padding: 0; - margin: 0; } - .components-datetime select, - .components-datetime input { - box-shadow: 0 0 0 transparent; - transition: box-shadow 0.1s linear; - border-radius: 2px; - border: 1px solid #757575; } - @media (prefers-reduced-motion: reduce) { - .components-datetime select, - .components-datetime input { - transition-duration: 0s; } } - .components-datetime select, - .components-datetime input[type="number"], - .components-datetime .components-button { - height: 30px; - margin-top: 0; - margin-bottom: 0; } - -.components-datetime__date { - min-height: 236px; - border-top: 1px solid #ddd; } - .components-datetime__date .DayPickerNavigation_leftButton__horizontalDefault { - left: 0; } - .components-datetime__date .CalendarMonth_caption { - font-size: 13px; } - .components-datetime__date .CalendarMonth_table { - border-collapse: separate; - border-spacing: 2px; } - .components-datetime__date .CalendarDay { + line-height: inherit; + min-height: auto; +} +@media (min-width: 600px) { + input.components-combobox-control__input[type=text] { font-size: 13px; - border: none; - border-radius: 50%; - text-align: center; } - .components-datetime__date .CalendarDay:focus { - box-shadow: inset 0 0 0 1.5px #007cba, inset 0 0 0 2.5px #fff; - box-shadow: inset 0 0 0 1.5px var(--wp-admin-theme-color), inset 0 0 0 2.5px #fff; - outline: 2px solid transparent; } - .components-datetime__date .CalendarDay__selected { - background: #007cba; - background: var(--wp-admin-theme-color); - border: 2px solid transparent; } - .components-datetime__date .CalendarDay__selected:hover { - background: #005a87; - background: var(--wp-admin-theme-color-darker-20); } - .components-datetime__date .CalendarDay__selected:focus { - box-shadow: inset 0 0 0 1px #fff; } - .components-datetime__date .DayPickerNavigation_button__horizontalDefault { - padding: 2px 8px; - top: 20px; } - .components-datetime__date .DayPickerNavigation_button__horizontalDefault:focus { - border-color: #007cba; - border-color: var(--wp-admin-theme-color); - box-shadow: 0 0 0 0.5px #007cba; - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color); - outline: 2px solid transparent; } - .components-datetime__date .DayPicker_weekHeader { - top: 50px; } - .components-datetime__date .DayPicker_weekHeader .DayPicker_weekHeader_ul { - margin: 1px 0; - padding-left: 0; - padding-right: 0; } - .components-datetime__date.is-description-visible .DayPicker { - visibility: hidden; } - -.components-datetime__time { - padding-bottom: 16px; } - .components-datetime__time fieldset { - position: relative; - margin-bottom: 0.5em; } - .components-datetime__time fieldset + fieldset { - margin-bottom: 0; } - .components-datetime__time .components-datetime__time-field-am-pm fieldset { - margin-top: 0; } - .components-datetime__time .components-datetime__time-wrapper { - display: flex; } - .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-separator { - display: inline-block; - padding: 0 3px 0 0; - color: #555d66; } - .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field-time { - /*rtl:ignore*/ - direction: ltr; } - .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field select { - margin-right: 4px; } - .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field select:focus { - position: relative; - z-index: 1; } - .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field input[type="number"] { - padding: 2px; - margin-right: 4px; - text-align: center; - -moz-appearance: textfield; } - .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field input[type="number"]:focus { - position: relative; - z-index: 1; } - .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field input[type="number"]::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; } - .components-datetime__time.is-12-hour .components-datetime__time-field-day input { - margin: -4px 0 0 !important; - border-radius: 2px 0 0 2px !important; } - .components-datetime__time.is-12-hour .components-datetime__time-field-year input { - border-radius: 0 2px 2px 0 !important; } - -.components-datetime__time-legend { - font-weight: 600; - margin-top: 0.5em; } - .components-datetime__time-legend.invisible { - position: absolute; - top: -999em; - left: -999em; } - -.components-datetime__time-field-hours-input, -.components-datetime__time-field-minutes-input, -.components-datetime__time-field-day-input { - width: 35px; } - -.components-datetime__time-field-year-input { - width: 55px; } - -.components-datetime__time-field-month-select { - max-width: 145px; } - -.components-popover .components-datetime__date { - padding-left: 4px; } - -.block-editor-dimension-control .components-base-control__field { - display: flex; - align-items: center; } - -.block-editor-dimension-control .components-base-control__label { - display: flex; - align-items: center; - margin-right: 1em; - margin-bottom: 0; } - .block-editor-dimension-control .components-base-control__label .dashicon { - margin-right: 0.5em; } - -.block-editor-dimension-control.is-manual .components-base-control__label { - width: 10em; } - -.components-disabled { - position: relative; - pointer-events: none; } - .components-disabled::after { - content: ""; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; } - .components-disabled * { - pointer-events: none; } - -body.is-dragging-components-draggable { - cursor: move; - /* Fallback for IE/Edge < 14 */ - cursor: grabbing !important; } - -.components-draggable__invisible-drag-image { - position: fixed; - left: -1000px; - height: 50px; - width: 50px; } - -.components-draggable__clone { - position: fixed; - padding: 0; - background: transparent; - pointer-events: none; - z-index: 1000000000; } - -.components-drop-zone { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 40; - visibility: hidden; - opacity: 0; - transition: 0.3s opacity, 0.3s background-color, 0s visibility 0.3s; - border: 2px solid #007cba; - border: 2px solid var(--wp-admin-theme-color); - border-radius: 2px; } - @media (prefers-reduced-motion: reduce) { - .components-drop-zone { - transition-duration: 0s; } } - .components-drop-zone.is-active { - opacity: 1; - visibility: visible; - transition: 0.3s opacity, 0.3s background-color; } - @media (prefers-reduced-motion: reduce) { - .components-drop-zone.is-active { - transition-duration: 0s; } } - .components-drop-zone.is-dragging-over-element { - background-color: #007cba; - background-color: var(--wp-admin-theme-color); } - -.components-drop-zone__content { - position: absolute; - top: 50%; - left: 0; - right: 0; - z-index: 50; - transform: translateY(-50%); - width: 100%; - text-align: center; - color: #fff; - transition: transform 0.2s ease-in-out; } - @media (prefers-reduced-motion: reduce) { - .components-drop-zone__content { - transition-duration: 0s; } } - -.components-drop-zone.is-dragging-over-element .components-drop-zone__content { - transform: translateY(-50%) scale(1.05); } - -.components-drop-zone__content-icon, -.components-drop-zone__content-text { - display: block; } - -.components-drop-zone__content-icon { - margin: 0 auto; - line-height: 0; - fill: currentColor; } - -.components-drop-zone__content-text { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } - -.components-drop-zone__provider { - height: 100%; } - -.components-dropdown { - display: inline-block; } - -.components-dropdown__content .components-popover__content > div { - padding: 12px; } - -.components-dropdown-menu__popover .components-popover__content { - width: 200px; } - -.components-dropdown-menu__menu { - width: 100%; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 13px; - line-height: 1.4; } - .components-dropdown-menu__menu .components-dropdown-menu__menu-item, - .components-dropdown-menu__menu .components-menu-item { - width: 100%; - padding: 6px; - outline: none; - cursor: pointer; - margin-bottom: 4px; } - .components-dropdown-menu__menu .components-dropdown-menu__menu-item.has-separator, - .components-dropdown-menu__menu .components-menu-item.has-separator { - margin-top: 6px; - position: relative; - overflow: visible; } - .components-dropdown-menu__menu .components-dropdown-menu__menu-item.has-separator::before, - .components-dropdown-menu__menu .components-menu-item.has-separator::before { - display: block; - content: ""; - box-sizing: content-box; - background-color: #ddd; - position: absolute; - top: -3px; - left: 0; - right: 0; - height: 1px; } - .components-dropdown-menu__menu .components-dropdown-menu__menu-item.is-active svg, - .components-dropdown-menu__menu .components-menu-item.is-active svg { - color: #fff; - background: #1e1e1e; - box-shadow: 0 0 0 1px #1e1e1e; - border-radius: 1px; } - .components-dropdown-menu__menu .components-dropdown-menu__menu-item > svg, - .components-dropdown-menu__menu .components-menu-item > svg { - border-radius: 2px; - width: 24px; - height: 24px; } - .components-dropdown-menu__menu .components-menu-item__button, - .components-dropdown-menu__menu .components-menu-item__button.components-button { - min-height: 36px; - height: auto; - padding-left: 40px; - text-align: left; } - .components-dropdown-menu__menu .components-menu-item__button.has-icon, - .components-dropdown-menu__menu .components-menu-item__button.components-button.has-icon { - padding-left: 8px; } - .components-dropdown-menu__menu .components-menu-group { - padding: 12px; - margin-top: 0; - margin-bottom: 0; - margin-left: -12px; - margin-right: -12px; } - .components-dropdown-menu__menu .components-menu-group:first-child { - margin-top: -12px; } - .components-dropdown-menu__menu .components-menu-group:last-child { - margin-bottom: -12px; } - .components-dropdown-menu__menu .components-menu-group + .components-menu-group { - margin-top: 0; - border-top: 1px solid #ccc; - padding: 12px; } - .is-alternate .components-dropdown-menu__menu .components-menu-group + .components-menu-group { - border-color: #1e1e1e; } - -.components-dropdown-menu__menu.no-icons .components-menu-item__button.components-button { - padding: 0 12px; } - -.components-external-link__icon { - width: 1.4em; - height: 1.4em; - margin: -0.2em 0.1em 0; - vertical-align: middle; - fill: currentColor; } - -.components-focal-point-picker-wrapper { - background-color: transparent; - border: 1px solid #ddd; - height: 200px; - width: 100%; - padding: 14px; } - -.components-focal-point-picker { - align-items: center; - cursor: pointer; - display: flex; - height: 100%; - justify-content: center; - position: relative; - width: 100%; } - .components-focal-point-picker img { - height: auto; - max-height: 100%; - max-width: 100%; - width: auto; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; } - -.components-focal-point-picker__icon_container { - background-color: transparent; - cursor: grab; - height: 30px; - opacity: 0.8; - position: absolute; - will-change: transform; - width: 30px; - z-index: 10000; } - .components-focal-point-picker__icon_container.is-dragging { - cursor: grabbing; } - -.components-focal-point-picker__icon { - display: block; - height: 100%; - left: -15px; - position: absolute; - top: -15px; - width: 100%; } - .components-focal-point-picker__icon .components-focal-point-picker__icon-outline { - fill: #fff; } - .components-focal-point-picker__icon .components-focal-point-picker__icon-fill { - fill: #007cba; - fill: var(--wp-admin-theme-color); } - -.components-focal-point-picker_position-display-container { - margin: 1em 0; - display: flex; } - .components-focal-point-picker_position-display-container .components-base-control__field { - margin: 0 1em 0 0; } - .components-focal-point-picker_position-display-container input[type="number"].components-text-control__input { - max-width: 4em; - padding: 6px 4px; } - .components-focal-point-picker_position-display-container span { - margin: 0 0 0 0.2em; } - -.components-font-size-picker__controls { - max-width: 248px; - display: flex; - flex-wrap: wrap; - align-items: center; - margin-bottom: 24px; } - .components-font-size-picker__controls .components-font-size-picker__number { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - padding: 6px 8px; - box-shadow: 0 0 0 transparent; - transition: box-shadow 0.1s linear; - border-radius: 2px; - border: 1px solid #757575; - /* Fonts smaller than 16px causes mobile safari to zoom. */ - font-size: 16px; - /* Override core line-height. To be reviewed. */ - line-height: normal; - display: inline-block; - font-weight: 500; - height: 30px; - margin-bottom: 0; - margin-left: 0; - margin-right: 8px; - margin-top: 8px; - width: 54px; } - @media (prefers-reduced-motion: reduce) { - .components-font-size-picker__controls .components-font-size-picker__number { - transition-duration: 0s; } } - @media (min-width: 600px) { - .components-font-size-picker__controls .components-font-size-picker__number { - font-size: 13px; - /* Override core line-height. To be reviewed. */ - line-height: normal; } } - .components-font-size-picker__controls .components-font-size-picker__number:focus { - border-color: #007cba; - border-color: var(--wp-admin-theme-color); - box-shadow: 0 0 0 0.5px #007cba; - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color); - outline: 2px solid transparent; } - .components-font-size-picker__controls .components-font-size-picker__number::-webkit-input-placeholder { - color: rgba(30, 30, 30, 0.62); } - .components-font-size-picker__controls .components-font-size-picker__number::-moz-placeholder { - opacity: 1; - color: rgba(30, 30, 30, 0.62); } - .components-font-size-picker__controls .components-font-size-picker__number:-ms-input-placeholder { - color: rgba(30, 30, 30, 0.62); } - .is-dark-theme .components-font-size-picker__controls .components-font-size-picker__number::-webkit-input-placeholder { - color: rgba(255, 255, 255, 0.65); } - .is-dark-theme .components-font-size-picker__controls .components-font-size-picker__number::-moz-placeholder { - opacity: 1; - color: rgba(255, 255, 255, 0.65); } - .is-dark-theme .components-font-size-picker__controls .components-font-size-picker__number:-ms-input-placeholder { - color: rgba(255, 255, 255, 0.65); } - .components-font-size-picker__controls .components-font-size-picker__number[value=""] + .components-button { - cursor: default; - opacity: 0.3; - pointer-events: none; } - .components-font-size-picker__controls .components-font-size-picker__number-container { - display: flex; - flex-direction: column; } - .components-font-size-picker__controls .components-font-size-picker__select { - margin-right: 8px; } - .components-font-size-picker__controls .components-color-palette__clear { - height: 30px; - margin-top: 26px; } - -.components-font-size-picker__custom-input .components-range-control__slider + .dashicon { - width: 30px; - height: 30px; } - -.components-font-size-picker { - border: 0; - padding: 0; - margin: 0; } - -.components-form-toggle { - position: relative; - display: inline-block; } - .components-form-toggle .components-form-toggle__track { - content: ""; - display: inline-block; - box-sizing: border-box; - vertical-align: top; - background-color: #fff; - border: 1px solid #1e1e1e; - width: 36px; - height: 18px; - border-radius: 9px; - transition: 0.2s background ease; } - @media (prefers-reduced-motion: reduce) { - .components-form-toggle .components-form-toggle__track { - transition-duration: 0s; } } - .components-form-toggle .components-form-toggle__thumb { - display: block; - position: absolute; - box-sizing: border-box; - top: 3px; - left: 3px; - width: 12px; - height: 12px; - border-radius: 50%; - transition: 0.1s transform ease; - background-color: #1e1e1e; - border: 5px solid #1e1e1e; } - @media (prefers-reduced-motion: reduce) { - .components-form-toggle .components-form-toggle__thumb { - transition-duration: 0s; } } - .components-form-toggle.is-checked .components-form-toggle__track { - background-color: #007cba; - background-color: var(--wp-admin-theme-color); - border: 1px solid #007cba; - border: 1px solid var(--wp-admin-theme-color); - border: 9px solid transparent; } - .components-form-toggle .components-form-toggle__input:focus + .components-form-toggle__track { - box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #007cba; - box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--wp-admin-theme-color); - outline: 2px solid transparent; - outline-offset: 2px; } - .components-form-toggle.is-checked .components-form-toggle__thumb { - background-color: #fff; - border-width: 0; - transform: translateX(18px); } - .components-disabled .components-form-toggle { - opacity: 0.3; } - -.components-form-toggle input.components-form-toggle__input[type="checkbox"] { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 0; - margin: 0; - padding: 0; - z-index: 1; - border: none; } - .components-form-toggle input.components-form-toggle__input[type="checkbox"]:checked { - background: none; } - .components-form-toggle input.components-form-toggle__input[type="checkbox"]::before { - content: ""; } - -.components-form-token-field__input-container { + } +} +input.components-combobox-control__input[type=text]:focus { + outline: none; + box-shadow: none; +} + +.components-combobox-control__suggestions-container { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; padding: 6px 8px; box-shadow: 0 0 0 transparent; @@ -2462,101 +1081,1939 @@ width: 100%; margin: 0 0 8px 0; padding: 4px; - cursor: text; } - @media (prefers-reduced-motion: reduce) { - .components-form-token-field__input-container { - transition-duration: 0s; } } - @media (min-width: 600px) { - .components-form-token-field__input-container { - font-size: 13px; - /* Override core line-height. To be reviewed. */ - line-height: normal; } } - .components-form-token-field__input-container:focus { - border-color: #007cba; - border-color: var(--wp-admin-theme-color); - box-shadow: 0 0 0 0.5px #007cba; - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color); - outline: 2px solid transparent; } - .components-form-token-field__input-container::-webkit-input-placeholder { - color: rgba(30, 30, 30, 0.62); } - .components-form-token-field__input-container::-moz-placeholder { - opacity: 1; - color: rgba(30, 30, 30, 0.62); } - .components-form-token-field__input-container:-ms-input-placeholder { - color: rgba(30, 30, 30, 0.62); } - .is-dark-theme .components-form-token-field__input-container::-webkit-input-placeholder { - color: rgba(255, 255, 255, 0.65); } - .is-dark-theme .components-form-token-field__input-container::-moz-placeholder { - opacity: 1; - color: rgba(255, 255, 255, 0.65); } - .is-dark-theme .components-form-token-field__input-container:-ms-input-placeholder { - color: rgba(255, 255, 255, 0.65); } - .components-form-token-field__input-container.is-disabled { - background: #ddd; - border-color: #ccd0d4; } - .components-form-token-field__input-container input[type="text"].components-form-token-field__input { - display: inline-block; - width: 100%; - max-width: 100%; - margin-left: 4px; - padding: 0; - min-height: 24px; - background: inherit; - border: 0; - color: #1e1e1e; - box-shadow: none; } - .components-form-token-field__input-container input[type="text"].components-form-token-field__input:focus, - .components-form-token-field.is-active .components-form-token-field__input-container input[type="text"].components-form-token-field__input { - outline: none; - box-shadow: none; } - .components-form-token-field__input-container .components-form-token-field__token + input[type="text"].components-form-token-field__input { - width: auto; } +} +@media (prefers-reduced-motion: reduce) { + .components-combobox-control__suggestions-container { + transition-duration: 0s; + transition-delay: 0s; + } +} +@media (min-width: 600px) { + .components-combobox-control__suggestions-container { + font-size: 13px; + /* Override core line-height. To be reviewed. */ + line-height: normal; + } +} +.components-combobox-control__suggestions-container:focus { + border-color: var(--wp-admin-theme-color); + box-shadow: 0 0 0 1px var(--wp-admin-theme-color); + outline: 2px solid transparent; +} +.components-combobox-control__suggestions-container::-webkit-input-placeholder { + color: rgba(30, 30, 30, 0.62); +} +.components-combobox-control__suggestions-container::-moz-placeholder { + opacity: 1; + color: rgba(30, 30, 30, 0.62); +} +.components-combobox-control__suggestions-container:-ms-input-placeholder { + color: rgba(30, 30, 30, 0.62); +} +.components-combobox-control__suggestions-container:focus-within { + border-color: var(--wp-admin-theme-color); + box-shadow: 0 0 0 1px var(--wp-admin-theme-color); + outline: 2px solid transparent; +} + +.components-combobox-control__reset.components-button { + display: flex; + height: 24px; + min-width: 24px; + padding: 0; +} + +.components-color-list-picker, +.components-color-list-picker__swatch-button { + width: 100%; +} + +.components-custom-gradient-picker__gradient-bar:not(.has-gradient) { + opacity: 0.4; +} + +.components-custom-gradient-picker__gradient-bar { + margin-top: 12px; + width: 100%; + height: 36px; + border-radius: 36px; + margin-bottom: 12px; + padding-left: 6px; + padding-right: 30px; +} +.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__markers-container { + position: relative; +} +.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__insert-point { + border-radius: 50%; + background: #fff; + padding: 2px; + top: 6px; + min-width: 24px; + width: 24px; + height: 24px; + position: relative; + color: #1e1e1e; +} +.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__insert-point svg { + height: 100%; + width: 100%; +} +.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button { + border: 2px solid transparent; + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff; + border-radius: 50%; + height: 24px; + width: 24px; + padding: 0; + position: absolute; + top: 6px; +} +.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button:focus, .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button.is-active { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #1e1e1e; +} + +.components-custom-gradient-picker__color-picker-popover .components-custom-gradient-picker__remove-control-point { + margin-left: auto; + margin-right: auto; + display: block; + margin-bottom: 8px; +} + +.components-custom-gradient-picker__inserter { + width: 100%; +} + +.components-custom-gradient-picker__liner-gradient-indicator { + display: inline-block; + flex: 0 auto; + width: 20px; + height: 20px; +} + +.components-custom-gradient-picker .components-custom-gradient-picker__ui-line { + margin-bottom: 16px; +} +.components-custom-gradient-picker .components-custom-gradient-picker__ui-line .components-base-control.components-angle-picker, +.components-custom-gradient-picker .components-custom-gradient-picker__ui-line .components-base-control.components-custom-gradient-picker__type-picker { + margin-bottom: 0; +} + +.components-custom-gradient-picker .components-custom-gradient-picker__toolbar { + border: none; +} +.components-custom-gradient-picker .components-custom-gradient-picker__toolbar > div + div { + margin-left: 1px; +} +.components-custom-gradient-picker .components-custom-gradient-picker__toolbar button.is-pressed > svg { + background: #fff; + border: 1px solid #949494; + border-radius: 2px; +} + +.components-custom-select-control { + position: relative; +} + +.components-custom-select-control__label { + display: block; + margin-bottom: 8px; +} + +.components-custom-select-control__button { + border: 1px solid #757575; + border-radius: 2px; + min-height: 30px; + min-width: 130px; + position: relative; + text-align: left; +} +.components-custom-select-control__button.components-custom-select-control__button { + padding-right: 24px; +} +.components-custom-select-control__button:focus:not(:disabled) { + border-color: var(--wp-admin-theme-color); + box-shadow: 0 0 0 1px var(--wp-admin-theme-color); +} +.components-custom-select-control__button .components-custom-select-control__button-icon { + height: 100%; + padding: 0; + position: absolute; + right: 0; + top: 0; +} + +.components-custom-select-control__menu { + border: 1px solid #1e1e1e; + background-color: #fff; + border-radius: 2px; + outline: none; + transition: none; + max-height: 400px; + min-width: 100%; + overflow: auto; + padding: 0; + position: absolute; + z-index: 1000000; +} +.components-custom-select-control__menu[aria-hidden=true] { + display: none; +} + +.components-custom-select-control__item { + align-items: center; + display: flex; + list-style-type: none; + padding: 8px; + cursor: default; + line-height: 28px; +} +.components-custom-select-control__item.is-highlighted { + background: #ddd; +} +.components-custom-select-control__item .components-custom-select-control__item-icon { + margin-right: 0; + margin-left: auto; +} +.components-custom-select-control__item:last-child { + margin-bottom: 0; +} + +/** + * Parts of this source were derived and modified from react-dates, + * released under the MIT license. + * + * https://github.com/airbnb/react-dates + * + * The MIT License (MIT) + * + * Copyright (c) 2016 Airbnb + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ +/*rtl:begin:ignore*/ +.PresetDateRangePicker_panel { + padding: 0 22px 11px; +} + +.PresetDateRangePicker_button { + position: relative; + height: 100%; + text-align: center; + background: 0 0; + border: 2px solid #00a699; + color: #00a699; + padding: 4px 12px; + margin-right: 8px; + font: inherit; + font-weight: 700; + line-height: normal; + overflow: visible; + box-sizing: border-box; + cursor: pointer; +} + +.PresetDateRangePicker_button:active { + outline: 0; +} + +.PresetDateRangePicker_button__selected { + color: #fff; + background: #00a699; +} + +.SingleDatePickerInput { + display: inline-block; + background-color: #fff; +} + +.SingleDatePickerInput__withBorder { + border-radius: 2px; + border: 1px solid #dbdbdb; +} + +.SingleDatePickerInput__rtl { + direction: rtl; +} + +.SingleDatePickerInput__disabled { + background-color: #f2f2f2; +} + +.SingleDatePickerInput__block { + display: block; +} + +.SingleDatePickerInput__showClearDate { + padding-right: 30px; +} + +.SingleDatePickerInput_clearDate { + background: 0 0; + border: 0; + color: inherit; + font: inherit; + line-height: normal; + overflow: visible; + cursor: pointer; + padding: 10px; + margin: 0 10px 0 5px; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); +} + +.SingleDatePickerInput_clearDate__default:focus, +.SingleDatePickerInput_clearDate__default:hover { + background: #dbdbdb; + border-radius: 50%; +} + +.SingleDatePickerInput_clearDate__small { + padding: 6px; +} + +.SingleDatePickerInput_clearDate__hide { + visibility: hidden; +} + +.SingleDatePickerInput_clearDate_svg { + fill: #82888a; + height: 12px; + width: 15px; + vertical-align: middle; +} + +.SingleDatePickerInput_clearDate_svg__small { + height: 9px; +} + +.SingleDatePickerInput_calendarIcon { + background: 0 0; + border: 0; + color: inherit; + font: inherit; + line-height: normal; + overflow: visible; + cursor: pointer; + display: inline-block; + vertical-align: middle; + padding: 10px; + margin: 0 5px 0 10px; +} + +.SingleDatePickerInput_calendarIcon_svg { + fill: #82888a; + height: 15px; + width: 14px; + vertical-align: middle; +} + +.SingleDatePicker { + position: relative; + display: inline-block; +} + +.SingleDatePicker__block { + display: block; +} + +.SingleDatePicker_picker { + z-index: 1; + background-color: #fff; + position: absolute; +} + +.SingleDatePicker_picker__rtl { + direction: rtl; +} + +.SingleDatePicker_picker__directionLeft { + left: 0; +} + +.SingleDatePicker_picker__directionRight { + right: 0; +} + +.SingleDatePicker_picker__portal { + background-color: rgba(0, 0, 0, 0.3); + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; +} + +.SingleDatePicker_picker__fullScreenPortal { + background-color: #fff; +} + +.SingleDatePicker_closeButton { + background: 0 0; + border: 0; + color: inherit; + font: inherit; + line-height: normal; + overflow: visible; + cursor: pointer; + position: absolute; + top: 0; + right: 0; + padding: 15px; + z-index: 2; +} + +.SingleDatePicker_closeButton:focus, +.SingleDatePicker_closeButton:hover { + color: #b0b3b4; + text-decoration: none; +} + +.SingleDatePicker_closeButton_svg { + height: 15px; + width: 15px; + fill: #cacccd; +} + +.DayPickerKeyboardShortcuts_buttonReset { + background: 0 0; + border: 0; + border-radius: 0; + color: inherit; + font: inherit; + line-height: normal; + overflow: visible; + padding: 0; + cursor: pointer; + font-size: 14px; +} + +.DayPickerKeyboardShortcuts_buttonReset:active { + outline: 0; +} + +.DayPickerKeyboardShortcuts_show { + width: 22px; + position: absolute; + z-index: 2; +} + +.DayPickerKeyboardShortcuts_show__bottomRight { + border-top: 26px solid transparent; + border-right: 33px solid #00a699; + bottom: 0; + right: 0; +} + +.DayPickerKeyboardShortcuts_show__bottomRight:hover { + border-right: 33px solid #008489; +} + +.DayPickerKeyboardShortcuts_show__topRight { + border-bottom: 26px solid transparent; + border-right: 33px solid #00a699; + top: 0; + right: 0; +} + +.DayPickerKeyboardShortcuts_show__topRight:hover { + border-right: 33px solid #008489; +} + +.DayPickerKeyboardShortcuts_show__topLeft { + border-bottom: 26px solid transparent; + border-left: 33px solid #00a699; + top: 0; + left: 0; +} + +.DayPickerKeyboardShortcuts_show__topLeft:hover { + border-left: 33px solid #008489; +} + +.DayPickerKeyboardShortcuts_showSpan { + color: #fff; + position: absolute; +} + +.DayPickerKeyboardShortcuts_showSpan__bottomRight { + bottom: 0; + right: -28px; +} + +.DayPickerKeyboardShortcuts_showSpan__topRight { + top: 1px; + right: -28px; +} + +.DayPickerKeyboardShortcuts_showSpan__topLeft { + top: 1px; + left: -28px; +} + +.DayPickerKeyboardShortcuts_panel { + overflow: auto; + background: #fff; + border: 1px solid #dbdbdb; + border-radius: 2px; + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + z-index: 2; + padding: 22px; + margin: 33px; +} + +.DayPickerKeyboardShortcuts_title { + font-size: 16px; + font-weight: 700; + margin: 0; +} + +.DayPickerKeyboardShortcuts_list { + list-style: none; + padding: 0; + font-size: 14px; +} + +.DayPickerKeyboardShortcuts_close { + position: absolute; + right: 22px; + top: 22px; + z-index: 2; +} + +.DayPickerKeyboardShortcuts_close:active { + outline: 0; +} + +.DayPickerKeyboardShortcuts_closeSvg { + height: 15px; + width: 15px; + fill: #cacccd; +} + +.DayPickerKeyboardShortcuts_closeSvg:focus, +.DayPickerKeyboardShortcuts_closeSvg:hover { + fill: #82888a; +} + +.CalendarDay { + box-sizing: border-box; + cursor: pointer; + font-size: 14px; + text-align: center; +} + +.CalendarDay:active { + outline: 0; +} + +.CalendarDay__defaultCursor { + cursor: default; +} + +.CalendarDay__default { + border: 1px solid #e4e7e7; + color: #484848; + background: #fff; +} + +.CalendarDay__default:hover { + background: #e4e7e7; + border: 1px double #e4e7e7; + color: inherit; +} + +.CalendarDay__hovered_offset { + background: #f4f5f5; + border: 1px double #e4e7e7; + color: inherit; +} + +.CalendarDay__outside { + border: 0; + background: #fff; + color: #484848; +} + +.CalendarDay__outside:hover { + border: 0; +} + +.CalendarDay__blocked_minimum_nights { + background: #fff; + border: 1px solid #eceeee; + color: #cacccd; +} + +.CalendarDay__blocked_minimum_nights:active, +.CalendarDay__blocked_minimum_nights:hover { + background: #fff; + color: #cacccd; +} + +.CalendarDay__highlighted_calendar { + background: #ffe8bc; + color: #484848; +} + +.CalendarDay__highlighted_calendar:active, +.CalendarDay__highlighted_calendar:hover { + background: #ffce71; + color: #484848; +} + +.CalendarDay__selected_span { + background: #66e2da; + border: 1px solid #33dacd; + color: #fff; +} + +.CalendarDay__selected_span:active, +.CalendarDay__selected_span:hover { + background: #33dacd; + border: 1px solid #33dacd; + color: #fff; +} + +.CalendarDay__last_in_range { + border-right: #00a699; +} + +.CalendarDay__selected, +.CalendarDay__selected:active, +.CalendarDay__selected:hover { + background: #00a699; + border: 1px solid #00a699; + color: #fff; +} + +.CalendarDay__hovered_span, +.CalendarDay__hovered_span:hover { + background: #b2f1ec; + border: 1px solid #80e8e0; + color: #007a87; +} + +.CalendarDay__hovered_span:active { + background: #80e8e0; + border: 1px solid #80e8e0; + color: #007a87; +} + +.CalendarDay__blocked_calendar, +.CalendarDay__blocked_calendar:active, +.CalendarDay__blocked_calendar:hover { + background: #cacccd; + border: 1px solid #cacccd; + color: #82888a; +} + +.CalendarDay__blocked_out_of_range, +.CalendarDay__blocked_out_of_range:active, +.CalendarDay__blocked_out_of_range:hover { + background: #fff; + border: 1px solid #e4e7e7; + color: #cacccd; +} + +.CalendarMonth { + background: #fff; + text-align: center; + vertical-align: top; + -webkit-user-select: none; + user-select: none; +} + +.CalendarMonth_table { + border-collapse: collapse; + border-spacing: 0; +} + +.CalendarMonth_verticalSpacing { + border-collapse: separate; +} + +.CalendarMonth_caption { + color: #484848; + font-size: 18px; + text-align: center; + padding-top: 22px; + padding-bottom: 37px; + caption-side: initial; +} + +.CalendarMonth_caption__verticalScrollable { + padding-top: 12px; + padding-bottom: 7px; +} + +.CalendarMonthGrid { + background: #fff; + text-align: left; + z-index: 0; +} + +.CalendarMonthGrid__animating { + z-index: 1; +} + +.CalendarMonthGrid__horizontal { + position: absolute; + left: 0; +} + +.CalendarMonthGrid__vertical { + margin: 0 auto; +} + +.CalendarMonthGrid__vertical_scrollable { + margin: 0 auto; + overflow-y: scroll; +} + +.CalendarMonthGrid_month__horizontal { + display: inline-block; + vertical-align: top; + min-height: 100%; +} + +.CalendarMonthGrid_month__hideForAnimation { + position: absolute; + z-index: -1; + opacity: 0; + pointer-events: none; +} + +.CalendarMonthGrid_month__hidden { + visibility: hidden; +} + +.DayPickerNavigation { + position: relative; + z-index: 2; +} + +.DayPickerNavigation__horizontal { + height: 0; +} + +.DayPickerNavigation__verticalDefault { + position: absolute; + width: 100%; + height: 52px; + bottom: 0; + left: 0; +} + +.DayPickerNavigation__verticalScrollableDefault { + position: relative; +} + +.DayPickerNavigation_button { + cursor: pointer; + -webkit-user-select: none; + user-select: none; + border: 0; + padding: 0; + margin: 0; +} + +.DayPickerNavigation_button__default { + border: 1px solid #e4e7e7; + background-color: #fff; + color: #757575; +} + +.DayPickerNavigation_button__default:focus, +.DayPickerNavigation_button__default:hover { + border: 1px solid #c4c4c4; +} + +.DayPickerNavigation_button__default:active { + background: #f2f2f2; +} + +.DayPickerNavigation_button__horizontalDefault { + position: absolute; + top: 18px; + line-height: 0.78; + border-radius: 3px; + padding: 6px 9px; +} + +.DayPickerNavigation_leftButton__horizontalDefault { + left: 22px; +} + +.DayPickerNavigation_rightButton__horizontalDefault { + right: 22px; +} + +.DayPickerNavigation_button__verticalDefault { + padding: 5px; + background: #fff; + box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1); + position: relative; + display: inline-block; + height: 100%; + width: 50%; +} + +.DayPickerNavigation_nextButton__verticalDefault { + border-left: 0; +} + +.DayPickerNavigation_nextButton__verticalScrollableDefault { + width: 100%; +} + +.DayPickerNavigation_svg__horizontal { + height: 19px; + width: 19px; + fill: #82888a; + display: block; +} + +.DayPickerNavigation_svg__vertical { + height: 42px; + width: 42px; + fill: #484848; + display: block; +} + +.DayPicker { + background: #fff; + position: relative; + text-align: left; +} + +.DayPicker__horizontal { + background: #fff; +} + +.DayPicker__verticalScrollable { + height: 100%; +} + +.DayPicker__hidden { + visibility: hidden; +} + +.DayPicker__withBorder { + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.07); + border-radius: 3px; +} + +.DayPicker_portal__horizontal { + box-shadow: none; + position: absolute; + left: 50%; + top: 50%; +} + +.DayPicker_portal__vertical { + position: initial; +} + +.DayPicker_focusRegion { + outline: 0; +} + +.DayPicker_calendarInfo__horizontal, +.DayPicker_wrapper__horizontal { + display: inline-block; + vertical-align: top; +} + +.DayPicker_weekHeaders { + position: relative; +} + +.DayPicker_weekHeaders__horizontal { + margin-left: 13px; +} + +.DayPicker_weekHeader { + color: #757575; + position: absolute; + top: 62px; + z-index: 2; + text-align: left; + padding: 0 !important; +} + +.DayPicker_weekHeader__vertical { + left: 50%; +} + +.DayPicker_weekHeader__verticalScrollable { + top: 0; + display: table-row; + border-bottom: 1px solid #dbdbdb; + background: #fff; + margin-left: 0; + left: 0; + width: 100%; + text-align: center; +} + +.DayPicker_weekHeader_ul { + list-style: none; + margin: 1px 0; + padding-left: 0; + padding-right: 0; + font-size: 14px; +} + +.DayPicker_weekHeader_li { + display: inline-block; + text-align: center; + margin: 0 1px; +} + +.DayPicker_transitionContainer { + position: relative; + overflow: hidden; + border-radius: 3px; +} + +.DayPicker_transitionContainer__horizontal { + transition: height 0.2s ease-in-out; +} + +.DayPicker_transitionContainer__vertical { + width: 100%; +} + +.DayPicker_transitionContainer__verticalScrollable { + padding-top: 20px; + height: 100%; + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + overflow-y: scroll; +} + +.DateInput { + margin: 0; + padding: 0; + background: #fff; + position: relative; + display: inline-block; + width: 130px; + vertical-align: middle; +} + +.DateInput__small { + width: 97px; +} + +.DateInput__block { + width: 100%; +} + +.DateInput__disabled { + background: #f2f2f2; + color: #dbdbdb; +} + +.DateInput_input { + font-weight: 200; + font-size: 19px; + line-height: 24px; + color: #484848; + background-color: #fff; + width: 100%; + padding: 11px 11px 9px; + border: 0; + border-top: 0; + border-right: 0; + border-bottom: 2px solid transparent; + border-left: 0; + border-radius: 0; +} + +.DateInput_input__small { + font-size: 15px; + line-height: 18px; + letter-spacing: 0.2px; + padding: 7px 7px 5px; +} + +.DateInput_input__regular { + font-weight: auto; +} + +.DateInput_input__readOnly { + -webkit-user-select: none; + user-select: none; +} + +.DateInput_input__focused { + outline: 0; + background: #fff; + border: 0; + border-top: 0; + border-right: 0; + border-bottom: 2px solid #008489; + border-left: 0; +} + +.DateInput_input__disabled { + background: #f2f2f2; + font-style: italic; +} + +.DateInput_screenReaderMessage { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +.DateInput_fang { + position: absolute; + width: 20px; + height: 10px; + left: 22px; + z-index: 2; +} + +.DateInput_fangShape { + fill: #fff; +} + +.DateInput_fangStroke { + stroke: #dbdbdb; + fill: transparent; +} + +.DateRangePickerInput { + background-color: #fff; + display: inline-block; +} + +.DateRangePickerInput__disabled { + background: #f2f2f2; +} + +.DateRangePickerInput__withBorder { + border-radius: 2px; + border: 1px solid #dbdbdb; +} + +.DateRangePickerInput__rtl { + direction: rtl; +} + +.DateRangePickerInput__block { + display: block; +} + +.DateRangePickerInput__showClearDates { + padding-right: 30px; +} + +.DateRangePickerInput_arrow { + display: inline-block; + vertical-align: middle; + color: #484848; +} + +.DateRangePickerInput_arrow_svg { + vertical-align: middle; + fill: #484848; + height: 24px; + width: 24px; +} + +.DateRangePickerInput_clearDates { + background: 0 0; + border: 0; + color: inherit; + font: inherit; + line-height: normal; + overflow: visible; + cursor: pointer; + padding: 10px; + margin: 0 10px 0 5px; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); +} + +.DateRangePickerInput_clearDates__small { + padding: 6px; +} + +.DateRangePickerInput_clearDates_default:focus, +.DateRangePickerInput_clearDates_default:hover { + background: #dbdbdb; + border-radius: 50%; +} + +.DateRangePickerInput_clearDates__hide { + visibility: hidden; +} + +.DateRangePickerInput_clearDates_svg { + fill: #82888a; + height: 12px; + width: 15px; + vertical-align: middle; +} + +.DateRangePickerInput_clearDates_svg__small { + height: 9px; +} + +.DateRangePickerInput_calendarIcon { + background: 0 0; + border: 0; + color: inherit; + font: inherit; + line-height: normal; + overflow: visible; + cursor: pointer; + display: inline-block; + vertical-align: middle; + padding: 10px; + margin: 0 5px 0 10px; +} + +.DateRangePickerInput_calendarIcon_svg { + fill: #82888a; + height: 15px; + width: 14px; + vertical-align: middle; +} + +.DateRangePicker { + position: relative; + display: inline-block; +} + +.DateRangePicker__block { + display: block; +} + +.DateRangePicker_picker { + z-index: 1; + background-color: #fff; + position: absolute; +} + +.DateRangePicker_picker__rtl { + direction: rtl; +} + +.DateRangePicker_picker__directionLeft { + left: 0; +} + +.DateRangePicker_picker__directionRight { + right: 0; +} + +.DateRangePicker_picker__portal { + background-color: rgba(0, 0, 0, 0.3); + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; +} + +.DateRangePicker_picker__fullScreenPortal { + background-color: #fff; +} + +.DateRangePicker_closeButton { + background: 0 0; + border: 0; + color: inherit; + font: inherit; + line-height: normal; + overflow: visible; + cursor: pointer; + position: absolute; + top: 0; + right: 0; + padding: 15px; + z-index: 2; +} + +.DateRangePicker_closeButton:focus, +.DateRangePicker_closeButton:hover { + color: #b0b3b4; + text-decoration: none; +} + +.DateRangePicker_closeButton_svg { + height: 15px; + width: 15px; + fill: #cacccd; +} + +/*rtl:end:ignore*/ +.components-datetime { + padding: 16px; +} +.components-panel__body .components-datetime { + padding: 0; +} +.components-datetime .components-datetime__calendar-help { + padding: 16px; +} +.components-datetime .components-datetime__calendar-help h4 { + margin: 0; +} +.components-datetime .components-datetime__buttons { + display: flex; + justify-content: space-between; +} +.components-datetime .components-datetime__date-help-toggle { + display: block; + margin-left: auto; +} +.components-datetime fieldset { + border: 0; + padding: 0; + margin: 0; +} +.components-datetime select, +.components-datetime input { + box-shadow: 0 0 0 transparent; + transition: box-shadow 0.1s linear; + border-radius: 2px; + border: 1px solid #757575; +} +@media (prefers-reduced-motion: reduce) { + .components-datetime select, +.components-datetime input { + transition-duration: 0s; + transition-delay: 0s; + } +} +.components-datetime select, +.components-datetime input[type=number], +.components-datetime .components-button { + height: 30px; + margin-top: 0; + margin-bottom: 0; +} + +.components-datetime__date { + min-height: 236px; + border-top: 1px solid #ddd; +} +.components-datetime__date .DayPickerNavigation_leftButton__horizontalDefault { + /*!rtl:begin:ignore*/ + left: 13px; + /*!rtl:end:ignore*/ +} +.components-datetime__date .CalendarMonth_caption { + font-size: 13px; +} +.components-datetime__date .CalendarMonth_table { + border-collapse: separate; + border-spacing: 2px; +} +.components-datetime__date .CalendarDay { + font-size: 13px; + border: none; + border-radius: 50%; + text-align: center; +} +.components-datetime__date .CalendarDay:focus { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 3px #fff; + outline: 2px solid transparent; +} +.components-datetime__date .CalendarDay__selected { + background: var(--wp-admin-theme-color); + border: 2px solid transparent; +} +.components-datetime__date .CalendarDay__selected:hover { + background: var(--wp-admin-theme-color-darker-20); +} +.components-datetime__date .CalendarDay__selected:focus { + box-shadow: inset 0 0 0 1px #fff; +} +.components-datetime__date .DayPickerNavigation_button__horizontalDefault { + padding: 2px 8px; + top: 20px; +} +.components-datetime__date .DayPickerNavigation_button__horizontalDefault:focus { + border-color: var(--wp-admin-theme-color); + box-shadow: 0 0 0 1px var(--wp-admin-theme-color); + outline: 2px solid transparent; +} +.components-datetime__date .DayPicker_weekHeader { + top: 50px; +} +.components-datetime__date .DayPicker_weekHeader .DayPicker_weekHeader_ul { + margin: 1px; + padding-left: 0; + padding-right: 0; +} +.components-datetime__date.is-description-visible .DayPicker { + visibility: hidden; +} + +.components-datetime__date .CalendarDay .components-datetime__date__day { + height: 100%; + display: flex; + justify-content: center; + align-content: center; + flex-direction: column; + position: relative; +} +.components-datetime__date .CalendarDay .components-datetime__date__day.has-events::before { + content: " "; + width: 4px; + height: 4px; + border-radius: 2px; + position: absolute; + left: 50%; + margin-left: -2px; + bottom: 0; + background-color: #fff; +} + +.components-datetime__date .CalendarDay:not(.CalendarDay__selected) .components-datetime__date__day.has-events::before { + background: var(--wp-admin-theme-color); +} + +.components-datetime__time { + padding-bottom: 16px; +} +.components-datetime__time fieldset { + position: relative; + margin-bottom: 0.5em; +} +.components-datetime__time fieldset + fieldset { + margin-bottom: 0; +} +.components-datetime__time .components-datetime__time-field-am-pm fieldset { + margin-top: 0; +} +.components-datetime__time .components-datetime__time-wrapper { + display: flex; +} +.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-separator { + display: inline-block; + padding: 0 3px 0 0; +} +.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field-time { + /*rtl:ignore*/ + direction: ltr; +} +.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field select { + margin-right: 4px; +} +.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field select:focus { + position: relative; + z-index: 1; +} +.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field input[type=number] { + padding: 2px; + margin-right: 4px; + text-align: center; + -moz-appearance: textfield; +} +.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field input[type=number]:focus { + position: relative; + z-index: 1; +} +.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field input[type=number]::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} +.components-datetime__time.is-12-hour .components-datetime__time-field-day input { + margin: -4px 0 0 !important; + border-radius: 2px 0 0 2px !important; +} +.components-datetime__time.is-12-hour .components-datetime__time-field-year input { + border-radius: 0 2px 2px 0 !important; +} + +.components-datetime__timezone { + line-height: 30px; + margin-left: 4px; + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +.components-datetime__time-legend { + font-weight: 600; + margin-top: 0.5em; +} +.components-datetime__time-legend.invisible { + position: absolute; + top: -999em; + left: -999em; +} + +.components-datetime__time-field-hours-input, +.components-datetime__time-field-minutes-input, +.components-datetime__time-field-day-input { + width: 35px; +} + +.components-datetime__time-field-year-input { + width: 55px; +} + +.components-datetime__time-field-month-select { + max-width: 145px; +} + +.components-popover .components-datetime__date { + padding-left: 4px; +} + +.block-editor-dimension-control .components-base-control__field { + display: flex; + align-items: center; +} +.block-editor-dimension-control .components-base-control__label { + display: flex; + align-items: center; + margin-right: 1em; + margin-bottom: 0; +} +.block-editor-dimension-control .components-base-control__label .dashicon { + margin-right: 0.5em; +} +.block-editor-dimension-control.is-manual .components-base-control__label { + width: 10em; +} + +body.is-dragging-components-draggable { + cursor: move; + /* Fallback for IE/Edge < 14 */ + cursor: grabbing !important; +} + +.components-draggable__invisible-drag-image { + position: fixed; + left: -1000px; + height: 50px; + width: 50px; +} + +.components-draggable__clone { + position: fixed; + padding: 0; + background: transparent; + pointer-events: none; + z-index: 1000000000; +} + +.components-drop-zone { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 40; + visibility: hidden; + opacity: 0; + transition: 0.3s opacity, 0.3s background-color, 0s visibility 0.3s; + border: 2px solid var(--wp-admin-theme-color); + border-radius: 2px; +} +@media (prefers-reduced-motion: reduce) { + .components-drop-zone { + transition-duration: 0s; + transition-delay: 0s; + } +} +.components-drop-zone.is-active { + opacity: 1; + visibility: visible; + transition: 0.3s opacity, 0.3s background-color; +} +@media (prefers-reduced-motion: reduce) { + .components-drop-zone.is-active { + transition-duration: 0s; + transition-delay: 0s; + } +} +.components-drop-zone.is-dragging-over-element { + background-color: var(--wp-admin-theme-color); +} + +.components-drop-zone__content { + position: absolute; + top: 50%; + left: 0; + right: 0; + z-index: 50; + transform: translateY(-50%); + width: 100%; + text-align: center; + color: #fff; + transition: transform 0.2s ease-in-out; +} +@media (prefers-reduced-motion: reduce) { + .components-drop-zone__content { + transition-duration: 0s; + transition-delay: 0s; + } +} + +.components-drop-zone.is-dragging-over-element .components-drop-zone__content { + transform: translateY(-50%) scale(1.05); +} + +.components-drop-zone__content-icon, +.components-drop-zone__content-text { + display: block; +} + +.components-drop-zone__content-icon { + margin: 0 auto; + line-height: 0; + fill: currentColor; +} + +.components-drop-zone__content-text { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; +} + +.components-dropdown { + display: inline-block; +} + +.components-dropdown__content .components-popover__content > div { + padding: 12px; +} + +.components-dropdown-menu__popover .components-popover__content { + min-width: 200px; +} + +.components-dropdown-menu__menu { + width: 100%; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-size: 13px; + line-height: 1.4; +} +.components-dropdown-menu__menu .components-dropdown-menu__menu-item, +.components-dropdown-menu__menu .components-menu-item { + width: 100%; + padding: 6px; + outline: none; + cursor: pointer; + white-space: nowrap; +} +.components-dropdown-menu__menu .components-dropdown-menu__menu-item.has-separator, +.components-dropdown-menu__menu .components-menu-item.has-separator { + margin-top: 6px; + position: relative; + overflow: visible; +} +.components-dropdown-menu__menu .components-dropdown-menu__menu-item.has-separator::before, +.components-dropdown-menu__menu .components-menu-item.has-separator::before { + display: block; + content: ""; + box-sizing: content-box; + background-color: #ddd; + position: absolute; + top: -3px; + left: 0; + right: 0; + height: 1px; +} +.components-dropdown-menu__menu .components-dropdown-menu__menu-item.is-active svg, +.components-dropdown-menu__menu .components-menu-item.is-active svg { + color: #fff; + background: #1e1e1e; + box-shadow: 0 0 0 1px #1e1e1e; + border-radius: 1px; +} +.components-dropdown-menu__menu .components-dropdown-menu__menu-item > svg, +.components-dropdown-menu__menu .components-menu-item > svg { + border-radius: 2px; + width: 24px; + height: 24px; +} +.components-dropdown-menu__menu .components-menu-item__button, +.components-dropdown-menu__menu .components-menu-item__button.components-button { + min-height: 36px; + height: auto; + text-align: left; + padding-left: 8px; + padding-right: 8px; +} +.components-dropdown-menu__menu .components-menu-group { + padding: 12px; + margin-top: 0; + margin-bottom: 0; + margin-left: -12px; + margin-right: -12px; +} +.components-dropdown-menu__menu .components-menu-group:first-child { + margin-top: -12px; +} +.components-dropdown-menu__menu .components-menu-group:last-child { + margin-bottom: -12px; +} +.components-dropdown-menu__menu .components-menu-group + .components-menu-group { + margin-top: 0; + border-top: 1px solid #ccc; + padding: 12px; +} +.is-alternate .components-dropdown-menu__menu .components-menu-group + .components-menu-group { + border-color: #1e1e1e; +} + +.components-font-size-picker__controls { + max-width: 248px; + display: flex; + flex-wrap: wrap; + align-items: center; + margin-bottom: 24px; +} +.components-font-size-picker__controls .components-unit-control-wrapper { + margin-right: 8px; +} +.components-font-size-picker__controls .components-unit-control-wrapper .components-input-control__label { + font-weight: 300; + padding-bottom: 0 !important; + margin-bottom: 8px !important; +} +.components-font-size-picker__controls .components-custom-select-control__button { + min-width: 120px; +} +.components-font-size-picker__controls .components-font-size-picker__number { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + padding: 6px 8px; + box-shadow: 0 0 0 transparent; + transition: box-shadow 0.1s linear; + border-radius: 2px; + border: 1px solid #757575; + /* Fonts smaller than 16px causes mobile safari to zoom. */ + font-size: 16px; + /* Override core line-height. To be reviewed. */ + line-height: normal; + display: inline-block; + font-weight: 500; + height: 30px; + margin-bottom: 0; + margin-left: 0; + margin-right: 8px; + margin-top: 8px; + width: 54px; +} +@media (prefers-reduced-motion: reduce) { + .components-font-size-picker__controls .components-font-size-picker__number { + transition-duration: 0s; + transition-delay: 0s; + } +} +@media (min-width: 600px) { + .components-font-size-picker__controls .components-font-size-picker__number { + font-size: 13px; + /* Override core line-height. To be reviewed. */ + line-height: normal; + } +} +.components-font-size-picker__controls .components-font-size-picker__number:focus { + border-color: var(--wp-admin-theme-color); + box-shadow: 0 0 0 1px var(--wp-admin-theme-color); + outline: 2px solid transparent; +} +.components-font-size-picker__controls .components-font-size-picker__number::-webkit-input-placeholder { + color: rgba(30, 30, 30, 0.62); +} +.components-font-size-picker__controls .components-font-size-picker__number::-moz-placeholder { + opacity: 1; + color: rgba(30, 30, 30, 0.62); +} +.components-font-size-picker__controls .components-font-size-picker__number:-ms-input-placeholder { + color: rgba(30, 30, 30, 0.62); +} +.components-font-size-picker__controls .components-font-size-picker__number[value=""] + .components-button { + cursor: default; + opacity: 0.3; + pointer-events: none; +} +.components-font-size-picker__controls .components-font-size-picker__number-container { + display: flex; + flex-direction: column; +} +.components-font-size-picker__controls .components-font-size-picker__select { + margin-right: 8px; +} +.components-font-size-picker__controls .components-color-palette__clear { + height: 30px; + margin-top: 26px; +} + +.components-font-size-picker__custom-input .components-range-control__slider + .dashicon { + width: 30px; + height: 30px; +} + +.components-font-size-picker { + border: 0; + padding: 0; + margin: 0; +} + +.components-form-toggle { + position: relative; + display: inline-block; +} +.components-form-toggle .components-form-toggle__track { + content: ""; + display: inline-block; + box-sizing: border-box; + vertical-align: top; + background-color: #fff; + border: 1px solid #1e1e1e; + width: 36px; + height: 18px; + border-radius: 9px; + transition: 0.2s background ease; +} +@media (prefers-reduced-motion: reduce) { + .components-form-toggle .components-form-toggle__track { + transition-duration: 0s; + transition-delay: 0s; + } +} +.components-form-toggle .components-form-toggle__thumb { + display: block; + position: absolute; + box-sizing: border-box; + top: 3px; + left: 3px; + width: 12px; + height: 12px; + border-radius: 50%; + transition: 0.1s transform ease; + background-color: #1e1e1e; + border: 5px solid #1e1e1e; +} +@media (prefers-reduced-motion: reduce) { + .components-form-toggle .components-form-toggle__thumb { + transition-duration: 0s; + transition-delay: 0s; + } +} +.components-form-toggle.is-checked .components-form-toggle__track { + background-color: var(--wp-admin-theme-color); + border: 1px solid var(--wp-admin-theme-color); + border: 9px solid transparent; +} +.components-form-toggle .components-form-toggle__input:focus + .components-form-toggle__track { + box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color); + outline: 2px solid transparent; + outline-offset: 2px; +} +.components-form-toggle.is-checked .components-form-toggle__thumb { + background-color: #fff; + border-width: 0; + transform: translateX(18px); +} +.components-form-toggle.is-disabled, .components-disabled .components-form-toggle { + opacity: 0.3; +} + +.components-form-toggle input.components-form-toggle__input[type=checkbox] { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + margin: 0; + padding: 0; + z-index: 1; + border: none; +} +.components-form-toggle input.components-form-toggle__input[type=checkbox]:checked { + background: none; +} +.components-form-toggle input.components-form-toggle__input[type=checkbox]::before { + content: ""; +} + +.components-form-token-field__input-container { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + padding: 6px 8px; + box-shadow: 0 0 0 transparent; + transition: box-shadow 0.1s linear; + border-radius: 2px; + border: 1px solid #757575; + /* Fonts smaller than 16px causes mobile safari to zoom. */ + font-size: 16px; + /* Override core line-height. To be reviewed. */ + line-height: normal; + display: flex; + flex-wrap: wrap; + align-items: center; + width: 100%; + margin: 0 0 8px 0; + padding: 2px 4px; + cursor: text; +} +@media (prefers-reduced-motion: reduce) { + .components-form-token-field__input-container { + transition-duration: 0s; + transition-delay: 0s; + } +} +@media (min-width: 600px) { + .components-form-token-field__input-container { + font-size: 13px; + /* Override core line-height. To be reviewed. */ + line-height: normal; + } +} +.components-form-token-field__input-container:focus { + border-color: var(--wp-admin-theme-color); + box-shadow: 0 0 0 1px var(--wp-admin-theme-color); + outline: 2px solid transparent; +} +.components-form-token-field__input-container::-webkit-input-placeholder { + color: rgba(30, 30, 30, 0.62); +} +.components-form-token-field__input-container::-moz-placeholder { + opacity: 1; + color: rgba(30, 30, 30, 0.62); +} +.components-form-token-field__input-container:-ms-input-placeholder { + color: rgba(30, 30, 30, 0.62); +} +.components-form-token-field__input-container.is-disabled { + background: #ddd; + border-color: #ddd; +} +.components-form-token-field__input-container.is-active { + border-color: var(--wp-admin-theme-color); + box-shadow: 0 0 0 1px var(--wp-admin-theme-color); + outline: 2px solid transparent; +} +.components-form-token-field__input-container input[type=text].components-form-token-field__input { + display: inline-block; + flex: 1; + font-size: 16px; + width: 100%; + max-width: 100%; + margin-left: 4px; + padding: 0; + min-height: 24px; + min-width: 50px; + background: inherit; + border: 0; + color: #1e1e1e; + box-shadow: none; +} +@media (min-width: 600px) { + .components-form-token-field__input-container input[type=text].components-form-token-field__input { + font-size: 13px; + } +} +.components-form-token-field__input-container input[type=text].components-form-token-field__input:focus, .components-form-token-field.is-active .components-form-token-field__input-container input[type=text].components-form-token-field__input { + outline: none; + box-shadow: none; +} +.components-form-token-field__input-container .components-form-token-field__token + input[type=text].components-form-token-field__input { + width: auto; +} .components-form-token-field__label { display: inline-block; - margin-bottom: 4px; } + margin-bottom: 4px; +} .components-form-token-field__help { - font-style: italic; } + font-size: 12px; + font-style: normal; + color: #757575; +} .components-form-token-field__token { font-size: 13px; display: flex; margin: 2px 4px 2px 0; - color: #32373c; - overflow: hidden; } - .components-form-token-field__token.is-success .components-form-token-field__token-text, - .components-form-token-field__token.is-success .components-form-token-field__remove-token { - background: #4ab866; } - .components-form-token-field__token.is-error .components-form-token-field__token-text, - .components-form-token-field__token.is-error .components-form-token-field__remove-token { - background: #d94f4f; } - .components-form-token-field__token.is-validating .components-form-token-field__token-text, - .components-form-token-field__token.is-validating .components-form-token-field__remove-token { - color: #555d66; } - .components-form-token-field__token.is-borderless { - position: relative; - padding: 0 16px 0 0; } - .components-form-token-field__token.is-borderless .components-form-token-field__token-text { - background: transparent; - color: #007cba; - color: var(--wp-admin-theme-color); } - .components-form-token-field__token.is-borderless .components-form-token-field__remove-token { - background: transparent; - color: #555d66; - position: absolute; - top: 1px; - right: 0; } - .components-form-token-field__token.is-borderless.is-success .components-form-token-field__token-text { - color: #4ab866; } - .components-form-token-field__token.is-borderless.is-error .components-form-token-field__token-text { - color: #d94f4f; - border-radius: 4px 0 0 4px; - padding: 0 4px 0 6px; } - .components-form-token-field__token.is-borderless.is-validating .components-form-token-field__token-text { - color: #1e1e1e; } - .components-form-token-field__token.is-disabled .components-form-token-field__remove-token { - cursor: default; } + color: #1e1e1e; + max-width: 100%; +} +.components-form-token-field__token.is-success .components-form-token-field__token-text, +.components-form-token-field__token.is-success .components-form-token-field__remove-token { + background: #4ab866; +} +.components-form-token-field__token.is-error .components-form-token-field__token-text, +.components-form-token-field__token.is-error .components-form-token-field__remove-token { + background: #cc1818; +} +.components-form-token-field__token.is-validating .components-form-token-field__token-text, +.components-form-token-field__token.is-validating .components-form-token-field__remove-token { + color: #757575; +} +.components-form-token-field__token.is-borderless { + position: relative; + padding: 0 16px 0 0; +} +.components-form-token-field__token.is-borderless .components-form-token-field__token-text { + background: transparent; + color: var(--wp-admin-theme-color); +} +.components-form-token-field__token.is-borderless .components-form-token-field__remove-token { + background: transparent; + color: #757575; + position: absolute; + top: 1px; + right: 0; +} +.components-form-token-field__token.is-borderless.is-success .components-form-token-field__token-text { + color: #4ab866; +} +.components-form-token-field__token.is-borderless.is-error .components-form-token-field__token-text { + color: #cc1818; + border-radius: 4px 0 0 4px; + padding: 0 4px 0 6px; +} +.components-form-token-field__token.is-borderless.is-validating .components-form-token-field__token-text { + color: #1e1e1e; +} +.components-form-token-field__token.is-disabled .components-form-token-field__remove-token { + cursor: default; +} .components-form-token-field__token-text, .components-form-token-field__remove-token.components-button { @@ -2564,91 +3021,112 @@ line-height: 24px; height: auto; background: #ddd; - transition: all 0.2s cubic-bezier(0.4, 1, 0.4, 1); } - @media (prefers-reduced-motion: reduce) { - .components-form-token-field__token-text, - .components-form-token-field__remove-token.components-button { - transition-duration: 0s; - animation-duration: 1ms; } } + min-width: unset; + transition: all 0.2s cubic-bezier(0.4, 1, 0.4, 1); +} +@media (prefers-reduced-motion: reduce) { + .components-form-token-field__token-text, +.components-form-token-field__remove-token.components-button { + transition-duration: 0s; + transition-delay: 0s; + animation-duration: 1ms; + animation-delay: 0s; + } +} .components-form-token-field__token-text { - border-radius: 12px 0 0 12px; - padding: 0 4px 0 8px; + border-radius: 2px 0 0 2px; + padding: 0 0 0 8px; white-space: nowrap; overflow: hidden; - text-overflow: ellipsis; } + text-overflow: ellipsis; +} .components-form-token-field__remove-token.components-button { cursor: pointer; - border-radius: 0 12px 12px 0; + border-radius: 0 2px 2px 0; padding: 0 2px; - color: #555d66; + color: #1e1e1e; line-height: 10px; - overflow: initial; } - .components-form-token-field__remove-token.components-button:hover { - color: #32373c; } + overflow: initial; +} +.components-form-token-field__remove-token.components-button:hover { + color: #1e1e1e; +} .components-form-token-field__suggestions-list { flex: 1 0 100%; min-width: 100%; max-height: 9em; - overflow-y: scroll; + overflow-y: auto; transition: all 0.15s ease-in-out; list-style: none; - border-top: 1px solid #6c7781; + border-top: 1px solid #757575; margin: 4px -4px -4px; - padding-top: 3px; } - @media (prefers-reduced-motion: reduce) { - .components-form-token-field__suggestions-list { - transition-duration: 0s; } } + padding: 0; +} +@media (prefers-reduced-motion: reduce) { + .components-form-token-field__suggestions-list { + transition-duration: 0s; + transition-delay: 0s; + } +} .components-form-token-field__suggestion { - color: #555d66; + color: #757575; display: block; font-size: 13px; padding: 4px 8px; - cursor: pointer; } - .components-form-token-field__suggestion.is-selected { - background: #007cba; - background: var(--wp-admin-theme-color); - color: #fff; } + margin: 0; + cursor: pointer; +} +.components-form-token-field__suggestion.is-selected { + background: var(--wp-admin-theme-color); + color: #fff; +} .components-form-token-field__suggestion-match { - text-decoration: underline; } + text-decoration: underline; +} @media (min-width: 600px) { .components-guide { - width: 600px; } } - + width: 600px; + } +} .components-guide .components-modal__header { background: none; border-bottom: none; width: 100%; padding: 0; - margin: 0; } - .components-guide .components-modal__header .components-button { - align-self: flex-start; - margin: 8px 8px 0 0; - position: static; } - .components-guide .components-modal__header .components-button:hover svg { - fill: #fff; } - + margin: 0; +} +.components-guide .components-modal__header .components-button { + align-self: flex-start; + margin: 8px 8px 0 0; + position: static; +} +.components-guide .components-modal__header .components-button:hover svg { + fill: #fff; +} .components-guide__container { display: flex; flex-direction: column; justify-content: space-between; margin-top: -60px; - min-height: 100%; } - + min-height: 100%; +} .components-guide__page { display: flex; flex-direction: column; justify-content: center; - position: relative; } - @media (min-width: 600px) { - .components-guide__page { - min-height: 300px; } } - + position: relative; +} +@media (min-width: 600px) { + .components-guide__page { + min-height: 300px; + } +} .components-guide__footer { align-content: center; display: flex; @@ -2657,146 +3135,195 @@ margin: 0 0 24px 0; padding: 0 32px; position: relative; - width: 100%; } - @media (max-width: 600px) { - .components-guide__footer { - position: absolute; - bottom: 0; } } - + width: 100%; +} +@media (max-width: 600px) { + .components-guide__footer { + position: absolute; + bottom: 0; + } +} .components-guide__page-control { - margin: 8px 0 8px 0; - text-align: center; } - .components-guide__page-control li { - display: inline-block; } - .components-guide__page-control .components-button { - height: 30px; - min-width: 20px; } - + margin: 0; + text-align: center; +} +.components-guide__page-control li { + display: inline-block; + margin: 0; +} +.components-guide__page-control .components-button { + height: 30px; + min-width: 20px; + margin: -6px 0; +} .components-guide .components-modal__content { - padding: 0; } + padding: 0; +} .components-modal__frame.components-guide { border: none; min-width: 312px; height: 80vh; - max-height: 575px; } - @media (max-width: 600px) { - .components-modal__frame.components-guide { - bottom: 5%; - left: 16px; - right: 16px; - top: 5%; - margin: 0 auto; } } + max-height: 575px; +} +@media (max-width: 600px) { + .components-modal__frame.components-guide { + bottom: 5%; + left: 16px; + right: 16px; + top: 5%; + margin: 0 auto; + } +} .components-button.components-guide__back-button, .components-button.components-guide__forward-button, .components-button.components-guide__finish-button { height: 30px; - position: absolute; } - + position: absolute; +} .components-button.components-guide__back-button, .components-button.components-guide__forward-button { font-size: 13px; - padding: 4px 2px; } - .components-button.components-guide__back-button.has-text svg, .components-button.components-guide__forward-button.has-text svg { - margin: 0; } - .components-button.components-guide__back-button:hover, .components-button.components-guide__forward-button:hover { - text-decoration: underline; } - + padding: 4px 2px; +} +.components-button.components-guide__back-button.has-text svg, .components-button.components-guide__forward-button.has-text svg { + margin: 0; +} +.components-button.components-guide__back-button:hover, .components-button.components-guide__forward-button:hover { + text-decoration: underline; +} .components-button.components-guide__back-button { - left: 32px; } - + left: 32px; +} .components-button.components-guide__forward-button { right: 32px; color: #1386bf; - font-weight: bold; } - + font-weight: bold; +} .components-button.components-guide__finish-button { - right: 32px; } - + right: 32px; +} .components-button.components-guide__inline-finish-button { - display: none; } - -.components-navigate-regions.is-focusing-regions [role="region"] { - position: relative; } - .components-navigate-regions.is-focusing-regions [role="region"]:focus::after { - content: ""; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - pointer-events: none; - outline: 4px solid transparent; - box-shadow: inset 0 0 0 4px #007cba; - box-shadow: inset 0 0 0 4px var(--wp-admin-theme-color); } - @supports (outline-offset: 1px) { - .components-navigate-regions.is-focusing-regions [role="region"]:focus::after { - content: none; } - .components-navigate-regions.is-focusing-regions [role="region"]:focus { - outline-style: solid; - outline-color: #007cba; - outline-color: var(--wp-admin-theme-color); - outline-width: 4px; - outline-offset: -4px; } } + display: none; +} + +[role=region] { + position: relative; +} + +.is-focusing-regions [role=region]:focus::after { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + pointer-events: none; + outline: 4px solid transparent; + box-shadow: inset 0 0 0 4px var(--wp-admin-theme-color); +} +@supports (outline-offset: 1px) { + .is-focusing-regions [role=region]:focus::after { + content: none; + } + .is-focusing-regions [role=region]:focus { + outline-style: solid; + outline-color: var(--wp-admin-theme-color); + outline-width: 4px; + outline-offset: -4px; + } +} .components-menu-group + .components-menu-group { margin-top: 8px; padding-top: 8px; - border-top: 1px solid #1e1e1e; } + border-top: 1px solid #1e1e1e; +} +.components-menu-group + .components-menu-group.has-hidden-separator { + border-top: none; + margin-top: 0; + padding-top: 0; +} .components-menu-group__label { - padding: 0; + padding: 0 8px; + margin-top: 4px; margin-bottom: 12px; color: #757575; text-transform: uppercase; font-size: 11px; - font-weight: 500; } + font-weight: 500; +} .components-menu-item__button, .components-menu-item__button.components-button { - width: 100%; } - .components-menu-item__button .dashicon, - .components-menu-item__button .components-menu-items__item-icon, - .components-menu-item__button svg.components-menu-items__item-icon, - .components-menu-item__button > span > svg, - .components-menu-item__button.components-button .dashicon, - .components-menu-item__button.components-button .components-menu-items__item-icon, - .components-menu-item__button.components-button svg.components-menu-items__item-icon, - .components-menu-item__button.components-button > span > svg { - margin-right: 8px; } - .components-menu-item__button .components-menu-items__item-icon, - .components-menu-item__button.components-button .components-menu-items__item-icon { - display: inline-block; - flex: 0 0 auto; } + width: 100%; +} +.components-menu-item__button .components-menu-items__item-icon, +.components-menu-item__button.components-button .components-menu-items__item-icon { + margin-right: -2px; + margin-left: 24px; + display: inline-block; + flex: 0 0 auto; +} +.components-menu-item__button .components-menu-item__shortcut + .components-menu-items__item-icon, +.components-menu-item__button.components-button .components-menu-item__shortcut + .components-menu-items__item-icon { + margin-left: 8px; +} +.components-menu-item__button .block-editor-block-icon, +.components-menu-item__button.components-button .block-editor-block-icon { + margin-left: -2px; + margin-right: 8px; +} +.components-menu-item__button.is-primary, +.components-menu-item__button.components-button.is-primary { + justify-content: center; +} +.components-menu-item__button.is-primary .components-menu-item__item, +.components-menu-item__button.components-button.is-primary .components-menu-item__item { + margin-right: 0; +} .components-menu-item__info-wrapper { display: flex; - flex-direction: column; } + flex-direction: column; + margin-right: auto; +} .components-menu-item__info { margin-top: 4px; font-size: 12px; - color: #757575; } + color: #757575; + white-space: normal; +} + +.components-menu-item__item { + white-space: nowrap; + margin-right: auto; + display: inline-flex; + align-items: center; +} .components-menu-item__shortcut { - -ms-grid-row-align: center; - align-self: center; + align-self: center; margin-right: 0; margin-left: auto; - padding-left: 12px; + padding-left: 24px; color: currentColor; - display: none; } - @media (min-width: 480px) { - .components-menu-item__shortcut { - display: inline; } } - -.components-menu-items-choice, -.components-menu-items-choice.components-button { - padding-left: 40px; } - .components-menu-items-choice svg, - .components-menu-items-choice.components-button svg { - margin-right: 8px; } - .components-menu-items-choice.has-icon, - .components-menu-items-choice.components-button.has-icon { - padding-left: 8px; } + display: none; +} +@media (min-width: 480px) { + .components-menu-item__shortcut { + display: inline; + } +} + +.components-menu-items-choice svg, +.components-menu-items-choice.components-button svg { + margin-right: 12px; +} +.components-menu-items-choice.has-icon, +.components-menu-items-choice.components-button.has-icon { + padding-left: 12px; +} .components-modal__screen-overlay { position: fixed; @@ -2804,13 +3331,17 @@ right: 0; bottom: 0; left: 0; - background-color: rgba(0, 0, 0, 0.7); + background-color: rgba(0, 0, 0, 0.35); z-index: 100000; animation: edit-post__fade-in-animation 0.2s ease-out 0s; - animation-fill-mode: forwards; } - @media (prefers-reduced-motion: reduce) { - .components-modal__screen-overlay { - animation-duration: 1ms; } } + animation-fill-mode: forwards; +} +@media (prefers-reduced-motion: reduce) { + .components-modal__screen-overlay { + animation-duration: 1ms; + animation-delay: 0s; + } +} .components-modal__frame { position: absolute; @@ -2820,36 +3351,44 @@ left: 0; box-sizing: border-box; margin: 0; - border: 1px solid #ddd; background: #fff; - box-shadow: 0 3px 30px rgba(0, 0, 0, 0.2); - overflow: auto; } - @media (min-width: 600px) { - .components-modal__frame { - top: 50%; - right: auto; - bottom: auto; - left: 50%; - min-width: 360px; - max-width: calc(100% - 16px - 16px); - max-height: calc(100% - 60px - 60px); - transform: translate(-50%, -50%); - animation: components-modal__appear-animation 0.1s ease-out; - animation-fill-mode: forwards; } } - @media (min-width: 600px) and (prefers-reduced-motion: reduce) { - .components-modal__frame { - animation-duration: 1ms; } } + box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25); + border-radius: 2px; + overflow: auto; +} +@media (min-width: 600px) { + .components-modal__frame { + top: 50%; + right: auto; + bottom: auto; + left: 50%; + min-width: 360px; + max-width: calc(100% - 16px - 16px); + max-height: 90%; + transform: translate(-50%, -50%); + animation: components-modal__appear-animation 0.1s ease-out; + animation-fill-mode: forwards; + } +} +@media (min-width: 600px) and (prefers-reduced-motion: reduce) { + .components-modal__frame { + animation-duration: 1ms; + animation-delay: 0s; + } +} @keyframes components-modal__appear-animation { from { - margin-top: 32px; } + margin-top: 32px; + } to { - margin-top: 0; } } - + margin-top: 0; + } +} .components-modal__header { box-sizing: border-box; border-bottom: 1px solid #ddd; - padding: 0 24px; + padding: 0 32px; display: flex; flex-direction: row; justify-content: space-between; @@ -2858,122 +3397,159 @@ height: 60px; z-index: 10; position: relative; - position: -webkit-sticky; position: sticky; top: 0; - margin: 0 -24px 24px; } - @supports (-ms-ime-align: auto) { - .components-modal__header { - position: fixed; - width: 100%; } } - .components-modal__header .components-modal__header-heading { - font-size: 1rem; - font-weight: 600; } - .components-modal__header h1 { - line-height: 1; - margin: 0; } - .components-modal__header .components-button { - position: relative; - left: 8px; } + margin: 0 -32px 24px; +} +@supports (-ms-ime-align: auto) { + .components-modal__header { + position: fixed; + width: 100%; + } +} +.components-modal__header .components-modal__header-heading { + font-size: 1rem; + font-weight: 600; +} +.components-modal__header h1 { + line-height: 1; + margin: 0; +} +.components-modal__header .components-button { + position: relative; + left: 8px; +} .components-modal__header-heading-container { align-items: center; flex-grow: 1; display: flex; flex-direction: row; - justify-content: left; } + justify-content: left; +} .components-modal__header-icon-container { - display: inline-block; } - .components-modal__header-icon-container svg { - max-width: 36px; - max-height: 36px; - padding: 8px; } + display: inline-block; +} +.components-modal__header-icon-container svg { + max-width: 36px; + max-height: 36px; + padding: 8px; +} .components-modal__content { box-sizing: border-box; height: 100%; - padding: 0 24px 24px; } - @supports (-ms-ime-align: auto) { - .components-modal__content { - padding-top: 60px; } } + padding: 0 32px 24px; +} +@supports (-ms-ime-align: auto) { + .components-modal__content { + padding-top: 60px; + } +} .components-notice { display: flex; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 13px; background-color: #fff; - border-left: 4px solid #007cba; border-left: 4px solid var(--wp-admin-theme-color); margin: 5px 15px 2px; padding: 8px 12px; - align-items: center; } - .components-notice.is-dismissible { - padding-right: 36px; - position: relative; } - .components-notice.is-success { - border-left-color: #4ab866; - background-color: #eff9f1; } - .components-notice.is-warning { - border-left-color: #f0b849; - background-color: #fef8ee; } - .components-notice.is-error { - border-left-color: #d94f4f; - background-color: #f9e2e2; } + align-items: center; +} +.components-notice.is-dismissible { + padding-right: 36px; + position: relative; +} +.components-notice.is-success { + border-left-color: #4ab866; + background-color: #eff9f1; +} +.components-notice.is-warning { + border-left-color: #f0b849; + background-color: #fef8ee; +} +.components-notice.is-error { + border-left-color: #cc1818; + background-color: #f4a2a2; +} .components-notice__content { flex-grow: 1; - margin: 4px 25px 4px 0; } - + margin: 4px 25px 4px 0; +} + +.components-notice__actions { + display: flex; + flex-wrap: wrap; +} + +.components-notice__action.components-button { + margin-right: 8px; +} .components-notice__action.components-button, .components-notice__action.components-button.is-link { - margin-left: 12px; } - + margin-left: 12px; +} .components-notice__action.components-button.is-secondary { - vertical-align: initial; } + vertical-align: initial; +} .components-notice__dismiss { - color: #6c7781; + color: #757575; align-self: flex-start; - flex-shrink: 0; } - .components-notice__dismiss:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):hover, .components-notice__dismiss:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):active, .components-notice__dismiss:not(:disabled):not([aria-disabled="true"]):focus { - color: #1e1e1e; - background-color: transparent; } - .components-notice__dismiss:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):hover { - box-shadow: none; } + flex-shrink: 0; +} +.components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover, .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):active, .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):focus { + color: #1e1e1e; + background-color: transparent; +} +.components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover { + box-shadow: none; +} .components-notice-list { max-width: 100vw; box-sizing: border-box; - z-index: 29; } - .components-notice-list .components-notice__content { - margin-top: 12px; - margin-bottom: 12px; - line-height: 2; } - .components-notice-list .components-notice__action.components-button { - display: block; - margin-left: 0; - margin-top: 8px; } +} +.components-notice-list .components-notice__content { + margin-top: 12px; + margin-bottom: 12px; + line-height: 2; +} +.components-notice-list .components-notice__action.components-button { + display: block; + margin-left: 0; + margin-top: 8px; +} .components-panel { background: #fff; - border: 1px solid #f0f0f0; } - .components-panel > .components-panel__header:first-child, - .components-panel > .components-panel__body:first-child { - margin-top: -1px; } - .components-panel > .components-panel__header:last-child, - .components-panel > .components-panel__body:last-child { - border-bottom-width: 0; } + border: 1px solid #e0e0e0; +} +.components-panel > .components-panel__header:first-child, +.components-panel > .components-panel__body:first-child { + margin-top: -1px; +} +.components-panel > .components-panel__header:last-child, +.components-panel > .components-panel__body:last-child { + border-bottom-width: 0; +} .components-panel + .components-panel { - margin-top: -1px; } + margin-top: -1px; +} .components-panel__body { - border-top: 1px solid #f0f0f0; - border-bottom: 1px solid #f0f0f0; } - .components-panel__body h3 { - margin: 0 0 0.5em; } - .components-panel__body.is-opened { - padding: 16px; } + border-top: 1px solid #e0e0e0; + border-bottom: 1px solid #e0e0e0; +} +.components-panel__body h3 { + margin: 0 0 0.5em; +} +.components-panel__body.is-opened { + padding: 16px; +} .components-panel__header { display: flex; @@ -2982,17 +3558,20 @@ padding: 0 16px; height: 48px; border-top: 1px solid #ddd; - border-bottom: 1px solid #ddd; } - .components-panel__header h2 { - margin: 0; - font-size: inherit; - color: inherit; } + border-bottom: 1px solid #ddd; +} +.components-panel__header h2 { + margin: 0; + font-size: inherit; + color: inherit; +} .components-panel__body + .components-panel__body, .components-panel__body + .components-panel__header, .components-panel__header + .components-panel__body, .components-panel__header + .components-panel__header { - margin-top: -1px; } + margin-top: -1px; +} .components-panel__body > .components-panel__body-title { display: block; @@ -3000,22 +3579,28 @@ font-size: inherit; margin-top: 0; margin-bottom: 0; - transition: 0.1s background ease-in-out; } - @media (prefers-reduced-motion: reduce) { - .components-panel__body > .components-panel__body-title { - transition-duration: 0s; } } + transition: 0.1s background ease-in-out; +} +@media (prefers-reduced-motion: reduce) { + .components-panel__body > .components-panel__body-title { + transition-duration: 0s; + transition-delay: 0s; + } +} .components-panel__body.is-opened > .components-panel__body-title { margin: -16px; - margin-bottom: 5px; } + margin-bottom: 5px; +} .components-panel__body > .components-panel__body-title:hover { background: #f0f0f0; - border: none; } + border: none; +} .components-panel__body-toggle.components-button { position: relative; - padding: 16px; + padding: 16px 48px 16px 16px; outline: none; width: 100%; font-weight: 500; @@ -3026,61 +3611,79 @@ transition: 0.1s background ease-in-out; height: auto; /* rtl:begin:ignore */ - /* rtl:end:ignore */ } - @media (prefers-reduced-motion: reduce) { - .components-panel__body-toggle.components-button { - transition-duration: 0s; } } - .components-panel__body-toggle.components-button:focus { - box-shadow: inset 0 0 0 1.5px #007cba; - box-shadow: inset 0 0 0 1.5px var(--wp-admin-theme-color); - border-radius: 0; } + /* rtl:end:ignore */ +} +@media (prefers-reduced-motion: reduce) { + .components-panel__body-toggle.components-button { + transition-duration: 0s; + transition-delay: 0s; + } +} +.components-panel__body-toggle.components-button:focus { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + border-radius: 0; +} +.components-panel__body-toggle.components-button .components-panel__arrow { + position: absolute; + right: 16px; + top: 50%; + transform: translateY(-50%); + color: #1e1e1e; + fill: currentColor; + transition: 0.1s color ease-in-out; +} +@media (prefers-reduced-motion: reduce) { .components-panel__body-toggle.components-button .components-panel__arrow { - position: absolute; - right: 16px; - top: 50%; - transform: translateY(-50%); - color: #1e1e1e; - fill: currentColor; - transition: 0.1s color ease-in-out; } - @media (prefers-reduced-motion: reduce) { - .components-panel__body-toggle.components-button .components-panel__arrow { - transition-duration: 0s; } } - body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right { - transform: scaleX(-1); - -ms-filter: fliph; - filter: FlipH; - margin-top: -10px; } + transition-duration: 0s; + transition-delay: 0s; + } +} +body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right { + transform: scaleX(-1); + -ms-filter: fliph; + filter: FlipH; + margin-top: -10px; +} .components-panel__icon { - color: #555d66; - margin: -2px 0 -2px 6px; } + color: #757575; + margin: -2px 0 -2px 6px; +} .components-panel__body-toggle-icon { - margin-right: -5px; } + margin-right: -5px; +} .components-panel__color-title { float: left; - height: 19px; } + height: 19px; +} .components-panel__row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; - min-height: 36px; } - .components-panel__row select { - min-width: 0; } - .components-panel__row label { - margin-right: 12px; - flex-shrink: 0; - max-width: 75%; } - .components-panel__row:empty, .components-panel__row:first-of-type { - margin-top: 0; } + min-height: 36px; +} +.components-panel__row select { + min-width: 0; +} +.components-panel__row label { + margin-right: 12px; + flex-shrink: 0; + max-width: 75%; +} +.components-panel__row:empty, .components-panel__row:first-of-type { + margin-top: 0; +} .components-panel .circle-picker { - padding-bottom: 20px; } + padding-bottom: 20px; +} .components-placeholder.components-placeholder { + box-sizing: border-box; position: relative; padding: 1em; min-height: 200px; @@ -3093,50 +3696,63 @@ border-radius: 2px; background-color: #fff; box-shadow: inset 0 0 0 1px #1e1e1e; - outline: 1px solid transparent; } - @supports ((position: -webkit-sticky) or (position: sticky)) { - .components-placeholder.components-placeholder { - display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-start; } } - .components-placeholder.components-placeholder .components-base-control__label { - font-size: 13px; } + outline: 1px solid transparent; +} +@supports (position: sticky) { + .components-placeholder.components-placeholder { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + } +} +.components-placeholder.components-placeholder .components-base-control__label { + font-size: 13px; +} .components-placeholder__error, .components-placeholder__instructions, .components-placeholder__label, .components-placeholder__fieldset { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 13px; } + font-size: 13px; +} .components-placeholder__label { display: flex; font-weight: 600; margin-bottom: 16px; - align-items: center; } - .components-placeholder__label > svg, - .components-placeholder__label .dashicon, - .components-placeholder__label .block-editor-block-icon { - fill: currentColor; - margin-right: 1ch; } + align-items: center; +} +.components-placeholder__label > svg, +.components-placeholder__label .dashicon, +.components-placeholder__label .block-editor-block-icon { + fill: currentColor; + margin-right: 1ch; +} +.components-placeholder__label:empty { + display: none; +} .components-placeholder__fieldset, .components-placeholder__fieldset form { display: flex; flex-direction: row; width: 100%; - flex-wrap: wrap; } - .components-placeholder__fieldset p, - .components-placeholder__fieldset form p { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 13px; } + flex-wrap: wrap; +} +.components-placeholder__fieldset p, +.components-placeholder__fieldset form p { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-size: 13px; +} .components-placeholder__fieldset.is-column-layout, .components-placeholder__fieldset.is-column-layout form { - flex-direction: column; } - -.components-placeholder__input[type="url"] { + flex-direction: column; +} + +.components-placeholder__input[type=url] { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; padding: 6px 8px; box-shadow: 0 0 0 transparent; @@ -3148,77 +3764,86 @@ /* Override core line-height. To be reviewed. */ line-height: normal; margin: 0 8px 0 0; - flex: 1 1 auto; } - @media (prefers-reduced-motion: reduce) { - .components-placeholder__input[type="url"] { - transition-duration: 0s; } } - @media (min-width: 600px) { - .components-placeholder__input[type="url"] { - font-size: 13px; - /* Override core line-height. To be reviewed. */ - line-height: normal; } } - .components-placeholder__input[type="url"]:focus { - border-color: #007cba; - border-color: var(--wp-admin-theme-color); - box-shadow: 0 0 0 0.5px #007cba; - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color); - outline: 2px solid transparent; } - .components-placeholder__input[type="url"]::-webkit-input-placeholder { - color: rgba(30, 30, 30, 0.62); } - .components-placeholder__input[type="url"]::-moz-placeholder { - opacity: 1; - color: rgba(30, 30, 30, 0.62); } - .components-placeholder__input[type="url"]:-ms-input-placeholder { - color: rgba(30, 30, 30, 0.62); } - .is-dark-theme .components-placeholder__input[type="url"]::-webkit-input-placeholder { - color: rgba(255, 255, 255, 0.65); } - .is-dark-theme .components-placeholder__input[type="url"]::-moz-placeholder { - opacity: 1; - color: rgba(255, 255, 255, 0.65); } - .is-dark-theme .components-placeholder__input[type="url"]:-ms-input-placeholder { - color: rgba(255, 255, 255, 0.65); } + flex: 1 1 auto; +} +@media (prefers-reduced-motion: reduce) { + .components-placeholder__input[type=url] { + transition-duration: 0s; + transition-delay: 0s; + } +} +@media (min-width: 600px) { + .components-placeholder__input[type=url] { + font-size: 13px; + /* Override core line-height. To be reviewed. */ + line-height: normal; + } +} +.components-placeholder__input[type=url]:focus { + border-color: var(--wp-admin-theme-color); + box-shadow: 0 0 0 1px var(--wp-admin-theme-color); + outline: 2px solid transparent; +} +.components-placeholder__input[type=url]::-webkit-input-placeholder { + color: rgba(30, 30, 30, 0.62); +} +.components-placeholder__input[type=url]::-moz-placeholder { + opacity: 1; + color: rgba(30, 30, 30, 0.62); +} +.components-placeholder__input[type=url]:-ms-input-placeholder { + color: rgba(30, 30, 30, 0.62); +} .components-placeholder__instructions { - margin-bottom: 1em; } + margin-bottom: 1em; +} .components-placeholder__error { margin-top: 1em; - width: 100%; } + width: 100%; +} .components-placeholder__preview img { margin: 3%; - width: 50%; } + width: 50%; +} .components-placeholder__fieldset .components-button { margin-right: 12px; - margin-bottom: 12px; } - .components-placeholder__fieldset .components-button:last-child { - margin-bottom: 0; - margin-right: 0; } + margin-bottom: 12px; +} +.components-placeholder__fieldset .components-button:last-child { + margin-bottom: 0; + margin-right: 0; +} .components-placeholder__fieldset .components-button:not(.is-link) ~ .components-button.is-link { margin-left: 10px; - margin-right: 10px; } - .components-placeholder__fieldset .components-button:not(.is-link) ~ .components-button.is-link:last-child { - margin-right: 0; } + margin-right: 10px; +} +.components-placeholder__fieldset .components-button:not(.is-link) ~ .components-button.is-link:last-child { + margin-right: 0; +} .components-placeholder.is-large .components-placeholder__label { font-size: 18pt; - font-weight: normal; } - + font-weight: normal; +} .components-placeholder.is-medium .components-placeholder__instructions, .components-placeholder.is-small .components-placeholder__instructions { - display: none; } - + display: none; +} .components-placeholder.is-medium .components-placeholder__fieldset, .components-placeholder.is-medium .components-placeholder__fieldset form, .components-placeholder.is-small .components-placeholder__fieldset, .components-placeholder.is-small .components-placeholder__fieldset form { - flex-direction: column; } - + flex-direction: column; +} .components-placeholder.is-medium .components-placeholder__fieldset .components-button, .components-placeholder.is-small .components-placeholder__fieldset .components-button { - margin-right: auto; } - + margin-right: auto; +} .components-placeholder.is-small .components-button { - padding: 0 8px 2px; } + padding: 0 8px 2px; +} /*!rtl:begin:ignore*/ .components-popover { @@ -3226,127 +3851,167 @@ z-index: 1000000; top: 0; left: 0; - opacity: 0; } - .components-popover.is-expanded, .components-popover[data-x-axis][data-y-axis] { - opacity: 1; } - .components-popover.is-expanded { - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 1000000 !important; } - .components-popover:not(.is-without-arrow) { - margin-left: 2px; } - .components-popover:not(.is-without-arrow)::before { - border: 8px solid #ccc; } - .components-popover:not(.is-without-arrow).is-alternate::before { - border-color: #1e1e1e; } - .components-popover:not(.is-without-arrow)::after { - border: 8px solid #fff; } - .components-popover:not(.is-without-arrow)::before, .components-popover:not(.is-without-arrow)::after { - content: ""; - position: absolute; - height: 0; - width: 0; - line-height: 0; } - .components-popover:not(.is-without-arrow)[data-y-axis="top"] { - margin-top: -8px; } - .components-popover:not(.is-without-arrow)[data-y-axis="top"]::before { - bottom: -8px; } - .components-popover:not(.is-without-arrow)[data-y-axis="top"]::after { - bottom: -6px; } - .components-popover:not(.is-without-arrow)[data-y-axis="top"]::before, .components-popover:not(.is-without-arrow)[data-y-axis="top"]::after { - border-bottom: none; - border-left-color: transparent; - border-right-color: transparent; - border-top-style: solid; - margin-left: -10px; } - .components-popover:not(.is-without-arrow)[data-y-axis="bottom"] { - margin-top: 8px; } - .components-popover:not(.is-without-arrow)[data-y-axis="bottom"]::before { - top: -8px; } - .components-popover:not(.is-without-arrow)[data-y-axis="bottom"]::after { - top: -6px; } - .components-popover:not(.is-without-arrow)[data-y-axis="bottom"]::before, .components-popover:not(.is-without-arrow)[data-y-axis="bottom"]::after { - border-bottom-style: solid; - border-left-color: transparent; - border-right-color: transparent; - border-top: none; - margin-left: -10px; } - .components-popover:not(.is-without-arrow)[data-y-axis="middle"][data-x-axis="left"] { - margin-left: -8px; } - .components-popover:not(.is-without-arrow)[data-y-axis="middle"][data-x-axis="left"]::before { - right: -8px; } - .components-popover:not(.is-without-arrow)[data-y-axis="middle"][data-x-axis="left"]::after { - right: -6px; } - .components-popover:not(.is-without-arrow)[data-y-axis="middle"][data-x-axis="left"]::before, .components-popover:not(.is-without-arrow)[data-y-axis="middle"][data-x-axis="left"]::after { - border-bottom-color: transparent; - border-left-style: solid; - border-right: none; - border-top-color: transparent; } - .components-popover:not(.is-without-arrow)[data-y-axis="middle"][data-x-axis="right"] { - margin-left: 8px; } - .components-popover:not(.is-without-arrow)[data-y-axis="middle"][data-x-axis="right"]::before { - left: -8px; } - .components-popover:not(.is-without-arrow)[data-y-axis="middle"][data-x-axis="right"]::after { - left: -6px; } - .components-popover:not(.is-without-arrow)[data-y-axis="middle"][data-x-axis="right"]::before, .components-popover:not(.is-without-arrow)[data-y-axis="middle"][data-x-axis="right"]::after { - border-bottom-color: transparent; - border-left: none; - border-right-style: solid; - border-top-color: transparent; } - .components-popover[data-y-axis="top"] { - bottom: 100%; } - .components-popover[data-y-axis="bottom"] { - top: 100%; } - .components-popover[data-y-axis="middle"] { - align-items: center; - display: flex; } - .components-popover.is-from-top { - margin-top: 12px; } - .components-popover.is-from-bottom { - margin-top: -12px; } - .components-popover.is-from-left:not(.is-from-top):not(.is-from-bottom) { - margin-left: 12px; } - .components-popover.is-from-right:not(.is-from-top):not(.is-from-bottom) { - margin-right: 12px; } + opacity: 0; +} +.components-popover.is-expanded, .components-popover[data-x-axis][data-y-axis] { + opacity: 1; +} +.components-popover.is-expanded { + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1000000 !important; +} +.components-popover:not(.is-without-arrow) { + margin-left: 2px; +} +.components-popover:not(.is-without-arrow)::before { + border: 8px solid #ccc; +} +.components-popover:not(.is-without-arrow).is-alternate::before { + border-color: #1e1e1e; +} +.components-popover:not(.is-without-arrow)::after { + border: 8px solid #fff; +} +.components-popover:not(.is-without-arrow)::before, .components-popover:not(.is-without-arrow)::after { + content: ""; + position: absolute; + height: 0; + width: 0; + line-height: 0; +} +.components-popover:not(.is-without-arrow)[data-y-axis=top] { + margin-top: -8px; +} +.components-popover:not(.is-without-arrow)[data-y-axis=top]::before { + bottom: -8px; +} +.components-popover:not(.is-without-arrow)[data-y-axis=top]::after { + bottom: -6px; +} +.components-popover:not(.is-without-arrow)[data-y-axis=top]::before, .components-popover:not(.is-without-arrow)[data-y-axis=top]::after { + border-bottom: none; + border-left-color: transparent; + border-right-color: transparent; + border-top-style: solid; + margin-left: -10px; +} +.components-popover:not(.is-without-arrow)[data-y-axis=bottom] { + margin-top: 8px; +} +.components-popover:not(.is-without-arrow)[data-y-axis=bottom]::before { + top: -8px; +} +.components-popover:not(.is-without-arrow)[data-y-axis=bottom]::after { + top: -6px; +} +.components-popover:not(.is-without-arrow)[data-y-axis=bottom]::before, .components-popover:not(.is-without-arrow)[data-y-axis=bottom]::after { + border-bottom-style: solid; + border-left-color: transparent; + border-right-color: transparent; + border-top: none; + margin-left: -10px; +} +.components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left] { + margin-left: -8px; +} +.components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left]::before { + right: -8px; +} +.components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left]::after { + right: -6px; +} +.components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left]::before, .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left]::after { + border-bottom-color: transparent; + border-left-style: solid; + border-right: none; + border-top-color: transparent; +} +.components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right] { + margin-left: 8px; +} +.components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right]::before { + left: -8px; +} +.components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right]::after { + left: -6px; +} +.components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right]::before, .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right]::after { + border-bottom-color: transparent; + border-left: none; + border-right-style: solid; + border-top-color: transparent; +} +.components-popover[data-y-axis=top] { + bottom: 100%; +} +.components-popover[data-y-axis=bottom] { + top: 100%; +} +.components-popover[data-y-axis=middle] { + align-items: center; + display: flex; +} +.components-popover.is-from-top { + margin-top: 12px; +} +.components-popover.is-from-bottom { + margin-top: -12px; +} +.components-popover.is-from-left:not(.is-from-top):not(.is-from-bottom) { + margin-left: 12px; +} +.components-popover.is-from-right:not(.is-from-top):not(.is-from-bottom) { + margin-right: 12px; +} .components-popover__content { height: 100%; background: #fff; border: 1px solid #ccc; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); - border-radius: 2px; } - .is-alternate .components-popover__content { - border: 1px solid #1e1e1e; - box-shadow: none; } - .components-popover .components-popover__content { - position: absolute; - height: auto; - overflow-y: auto; - min-width: 260px; } - .components-popover.is-expanded .components-popover__content { - position: static; - height: calc(100% - 48px); - overflow-y: visible; - min-width: auto; - border: none; - border-top: 1px solid #1e1e1e; } - .components-popover[data-y-axis="top"] .components-popover__content { - bottom: 100%; } - .components-popover[data-x-axis="center"] .components-popover__content { - left: 50%; - transform: translateX(-50%); } - .components-popover[data-x-axis="right"] .components-popover__content { - position: absolute; - left: 100%; } - .components-popover:not([data-y-axis="middle"])[data-x-axis="right"] .components-popover__content { - margin-left: -25px; } - .components-popover[data-x-axis="left"] .components-popover__content { - position: absolute; - right: 100%; } - .components-popover:not([data-y-axis="middle"])[data-x-axis="left"] .components-popover__content { - margin-right: -25px; } + border-radius: 2px; +} +.is-alternate .components-popover__content { + border: 1px solid #1e1e1e; + box-shadow: none; +} +.components-popover .components-popover__content { + position: absolute; + height: auto; + overflow-y: auto; +} +.components-popover.is-expanded .components-popover__content { + position: static; + height: calc(100% - 48px); + overflow-y: visible; + min-width: auto; + border: none; + border-top: 1px solid #1e1e1e; +} +.components-popover[data-y-axis=top] .components-popover__content { + bottom: 100%; +} +.components-popover[data-x-axis=center] .components-popover__content { + left: 50%; + transform: translateX(-50%); +} +.components-popover[data-x-axis=right] .components-popover__content { + position: absolute; + left: 100%; +} +.components-popover:not([data-y-axis=middle])[data-x-axis=right] .components-popover__content { + margin-left: -25px; +} +.components-popover[data-x-axis=left] .components-popover__content { + position: absolute; + right: 100%; +} +.components-popover:not([data-y-axis=middle])[data-x-axis=left] .components-popover__content { + margin-right: -25px; +} .components-popover__header { align-items: center; @@ -3354,30 +4019,37 @@ display: flex; height: 48px; justify-content: space-between; - padding: 0 8px 0 16px; } + padding: 0 8px 0 16px; +} .components-popover__header-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - width: 100%; } + width: 100%; +} .components-popover__close.components-button { - z-index: 5; } + z-index: 5; +} /*!rtl:end:ignore*/ .components-radio-control { display: flex; - flex-direction: column; } - .components-radio-control .components-base-control__help { - margin-top: 0; } - .components-radio-control .components-base-control__field { - margin-bottom: 0; } + flex-direction: column; +} +.components-radio-control .components-base-control__help { + margin-top: 0; +} +.components-radio-control .components-base-control__field { + margin-bottom: 0; +} .components-radio-control__option:not(:last-child) { - margin-bottom: 4px; } - -.components-radio-control__input[type="radio"] { + margin-bottom: 4px; +} + +.components-radio-control__input[type=radio] { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; padding: 6px 8px; box-shadow: 0 0 0 transparent; @@ -3392,108 +4064,120 @@ margin-right: 12px; transition: none; border-radius: 50%; + width: 24px; + height: 24px; margin-top: 0; - margin-right: 6px; } - @media (prefers-reduced-motion: reduce) { - .components-radio-control__input[type="radio"] { - transition-duration: 0s; } } - @media (min-width: 600px) { - .components-radio-control__input[type="radio"] { - font-size: 13px; - /* Override core line-height. To be reviewed. */ - line-height: normal; } } - .components-radio-control__input[type="radio"]:focus { - border-color: #007cba; - border-color: var(--wp-admin-theme-color); - box-shadow: 0 0 0 0.5px #007cba; - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color); - outline: 2px solid transparent; } - .components-radio-control__input[type="radio"]::-webkit-input-placeholder { - color: rgba(30, 30, 30, 0.62); } - .components-radio-control__input[type="radio"]::-moz-placeholder { - opacity: 1; - color: rgba(30, 30, 30, 0.62); } - .components-radio-control__input[type="radio"]:-ms-input-placeholder { - color: rgba(30, 30, 30, 0.62); } - .is-dark-theme .components-radio-control__input[type="radio"]::-webkit-input-placeholder { - color: rgba(255, 255, 255, 0.65); } - .is-dark-theme .components-radio-control__input[type="radio"]::-moz-placeholder { - opacity: 1; - color: rgba(255, 255, 255, 0.65); } - .is-dark-theme .components-radio-control__input[type="radio"]:-ms-input-placeholder { - color: rgba(255, 255, 255, 0.65); } - .components-radio-control__input[type="radio"]:checked::before { - width: 7px; - height: 7px; - margin: 8px 0 0 8px; - background-color: #fff; - border: 3px solid #fff; } - @media (min-width: 782px) { - .components-radio-control__input[type="radio"]:checked::before { - width: 6px; - height: 6px; - margin: 4px 0 0 4px; } } - .components-radio-control__input[type="radio"]:focus { - box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #007cba; - box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--wp-admin-theme-color); - outline: 2px solid transparent; } - .components-radio-control__input[type="radio"]:checked { - background: #007cba; - background: var(--wp-admin-theme-color); - border-color: #007cba; - border-color: var(--wp-admin-theme-color); } + margin-right: 6px; +} +@media (prefers-reduced-motion: reduce) { + .components-radio-control__input[type=radio] { + transition-duration: 0s; + transition-delay: 0s; + } +} +@media (min-width: 600px) { + .components-radio-control__input[type=radio] { + font-size: 13px; + /* Override core line-height. To be reviewed. */ + line-height: normal; + } +} +.components-radio-control__input[type=radio]:focus { + border-color: var(--wp-admin-theme-color); + box-shadow: 0 0 0 1px var(--wp-admin-theme-color); + outline: 2px solid transparent; +} +.components-radio-control__input[type=radio]::-webkit-input-placeholder { + color: rgba(30, 30, 30, 0.62); +} +.components-radio-control__input[type=radio]::-moz-placeholder { + opacity: 1; + color: rgba(30, 30, 30, 0.62); +} +.components-radio-control__input[type=radio]:-ms-input-placeholder { + color: rgba(30, 30, 30, 0.62); +} +@media (min-width: 600px) { + .components-radio-control__input[type=radio] { + height: 20px; + width: 20px; + } +} +.components-radio-control__input[type=radio]:checked::before { + box-sizing: inherit; + width: 8px; + height: 8px; + transform: translate(7px, 7px); + margin: 0; + background-color: #fff; + border: 4px solid #fff; +} +@media (min-width: 600px) { + .components-radio-control__input[type=radio]:checked::before { + transform: translate(5px, 5px); + } +} +.components-radio-control__input[type=radio]:focus { + box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color); + outline: 2px solid transparent; +} +.components-radio-control__input[type=radio]:checked { + background: var(--wp-admin-theme-color); + border-color: var(--wp-admin-theme-color); +} .components-resizable-box__handle { display: none; width: 23px; - height: 23px; } - .components-resizable-box__container.has-show-handle .components-resizable-box__handle { - display: block; } + height: 23px; + z-index: 2; +} +.components-resizable-box__container.has-show-handle .components-resizable-box__handle { + display: block; +} .components-resizable-box__handle::after { display: block; content: ""; width: 15px; height: 15px; - border: 2px solid #fff; + border: 2px solid var(--wp-admin-theme-color); border-radius: 50%; - background: #007cba; - background: var(--wp-admin-theme-color); + background: #fff; cursor: inherit; position: absolute; top: calc(50% - 8px); - right: calc(50% - 8px); } + right: calc(50% - 8px); +} .components-resizable-box__side-handle::before { display: block; + border-radius: 2px; content: ""; - width: 7px; - height: 7px; - border: 2px solid #fff; - background: #007cba; + width: 3px; + height: 3px; background: var(--wp-admin-theme-color); cursor: inherit; position: absolute; - top: calc(50% - 4px); - right: calc(50% - 4px); + top: calc(50% - 1px); + right: calc(50% - 1px); transition: transform 0.1s ease-in; - opacity: 0; } - @media (prefers-reduced-motion: reduce) { - .components-resizable-box__side-handle::before { - transition-duration: 0s; } } - -.is-dark-theme .components-resizable-box__side-handle::before, -.is-dark-theme .components-resizable-box__handle::after { - border-color: #d7dade; } - -.components-resizable-box__handle { - z-index: 2; } + opacity: 0; +} +@media (prefers-reduced-motion: reduce) { + .components-resizable-box__side-handle::before { + transition-duration: 0s; + transition-delay: 0s; + } +} .components-resizable-box__side-handle { - z-index: 2; } + z-index: 2; +} .components-resizable-box__corner-handle { - z-index: 2; } + z-index: 2; +} .components-resizable-box__side-handle.components-resizable-box__handle-top, .components-resizable-box__side-handle.components-resizable-box__handle-bottom, @@ -3502,7 +4186,8 @@ width: 100%; left: 0; border-left: 0; - border-right: 0; } + border-right: 0; +} .components-resizable-box__side-handle.components-resizable-box__handle-left, .components-resizable-box__side-handle.components-resizable-box__handle-right, @@ -3511,70 +4196,107 @@ height: 100%; top: 0; border-top: 0; - border-bottom: 0; } + border-bottom: 0; +} .components-resizable-box__side-handle.components-resizable-box__handle-top:hover::before, .components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover::before, .components-resizable-box__side-handle.components-resizable-box__handle-top:active::before, .components-resizable-box__side-handle.components-resizable-box__handle-bottom:active::before { animation: components-resizable-box__top-bottom-animation 0.1s ease-out 0s; - animation-fill-mode: forwards; } - @media (prefers-reduced-motion: reduce) { - .components-resizable-box__side-handle.components-resizable-box__handle-top:hover::before, - .components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover::before, - .components-resizable-box__side-handle.components-resizable-box__handle-top:active::before, - .components-resizable-box__side-handle.components-resizable-box__handle-bottom:active::before { - animation-duration: 1ms; } } + animation-fill-mode: forwards; +} +@media (prefers-reduced-motion: reduce) { + .components-resizable-box__side-handle.components-resizable-box__handle-top:hover::before, +.components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover::before, +.components-resizable-box__side-handle.components-resizable-box__handle-top:active::before, +.components-resizable-box__side-handle.components-resizable-box__handle-bottom:active::before { + animation-duration: 1ms; + animation-delay: 0s; + } +} .components-resizable-box__side-handle.components-resizable-box__handle-left:hover::before, .components-resizable-box__side-handle.components-resizable-box__handle-right:hover::before, .components-resizable-box__side-handle.components-resizable-box__handle-left:active::before, .components-resizable-box__side-handle.components-resizable-box__handle-right:active::before { animation: components-resizable-box__left-right-animation 0.1s ease-out 0s; - animation-fill-mode: forwards; } - @media (prefers-reduced-motion: reduce) { + animation-fill-mode: forwards; +} +@media (prefers-reduced-motion: reduce) { + .components-resizable-box__side-handle.components-resizable-box__handle-left:hover::before, +.components-resizable-box__side-handle.components-resizable-box__handle-right:hover::before, +.components-resizable-box__side-handle.components-resizable-box__handle-left:active::before, +.components-resizable-box__side-handle.components-resizable-box__handle-right:active::before { + animation-duration: 1ms; + animation-delay: 0s; + } +} + +/* This CSS is shown only to Safari, which has a bug with table-caption making it jumpy. +See https://bugs.webkit.org/show_bug.cgi?id=187903. */ +@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) { + .components-resizable-box__side-handle.components-resizable-box__handle-top:hover::before, +.components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover::before, +.components-resizable-box__side-handle.components-resizable-box__handle-top:active::before, +.components-resizable-box__side-handle.components-resizable-box__handle-bottom:active::before { + animation: none; + } + .components-resizable-box__side-handle.components-resizable-box__handle-left:hover::before, - .components-resizable-box__side-handle.components-resizable-box__handle-right:hover::before, - .components-resizable-box__side-handle.components-resizable-box__handle-left:active::before, - .components-resizable-box__side-handle.components-resizable-box__handle-right:active::before { - animation-duration: 1ms; } } - +.components-resizable-box__side-handle.components-resizable-box__handle-right:hover::before, +.components-resizable-box__side-handle.components-resizable-box__handle-left:active::before, +.components-resizable-box__side-handle.components-resizable-box__handle-right:active::before { + animation: none; + } + } +} @keyframes components-resizable-box__top-bottom-animation { from { transform: scaleX(0); - opacity: 0; } + opacity: 0; + } to { transform: scaleX(1); - opacity: 1; } } - + opacity: 1; + } +} @keyframes components-resizable-box__left-right-animation { from { transform: scaleY(0); - opacity: 0; } + opacity: 0; + } to { transform: scaleY(1); - opacity: 1; } } - + opacity: 1; + } +} /*!rtl:begin:ignore*/ .components-resizable-box__handle-right { - right: calc(11.5px * -1); } + right: calc(11.5px * -1); +} .components-resizable-box__handle-left { - left: calc(11.5px * -1); } + left: calc(11.5px * -1); +} .components-resizable-box__handle-top { - top: calc(11.5px * -1); } + top: calc(11.5px * -1); +} .components-resizable-box__handle-bottom { - bottom: calc(11.5px * -1); } + bottom: calc(11.5px * -1); +} /*!rtl:end:ignore*/ .components-responsive-wrapper { position: relative; - max-width: 100%; } - .components-responsive-wrapper, - .components-responsive-wrapper > span { - display: block; } + max-width: 100%; +} +.components-responsive-wrapper, .components-responsive-wrapper > span { + display: block; +} .components-responsive-wrapper__content { position: absolute; @@ -3584,17 +4306,21 @@ left: 0; width: 100%; height: 100%; - margin: auto; } + margin: auto; +} .components-sandbox { - overflow: hidden; } + overflow: hidden; +} iframe.components-sandbox { - width: 100%; } + width: 100%; +} html.lockscroll, body.lockscroll { - overflow: hidden; } + overflow: hidden; +} .components-select-control__input { background: #fff; @@ -3603,16 +4329,20 @@ margin: 1px; outline: 0; width: 100%; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; } - @media (min-width: 782px) { - .components-select-control__input { - height: 28px; - line-height: 28px; } } + -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; +} +@media (min-width: 782px) { + .components-select-control__input { + height: 28px; + line-height: 28px; + } +} @media (max-width: 782px) { .components-base-control .components-base-control__field .components-select-control__input { - font-size: 16px; } } - + font-size: 16px; + } +} .components-snackbar { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 13px; @@ -3624,13 +4354,33 @@ width: 100%; max-width: 600px; box-sizing: border-box; - cursor: pointer; } - @media (min-width: 600px) { - .components-snackbar { - width: fit-content; } } - .components-snackbar:focus { - box-shadow: 0 0 0 1px #fff, 0 0 0 3px #007cba; - box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-admin-theme-color); } + cursor: pointer; + pointer-events: auto; +} +@media (min-width: 600px) { + .components-snackbar { + width: -moz-fit-content; + width: fit-content; + } +} +.components-snackbar:focus { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-admin-theme-color); +} +.components-snackbar.components-snackbar-explicit-dismiss { + cursor: default; +} +.components-snackbar .components-snackbar__content-with-icon { + margin-left: 24px; +} +.components-snackbar .components-snackbar__icon { + position: absolute; + top: 24px; + left: 28px; +} +.components-snackbar .components-snackbar__dismiss-button { + margin-left: 32px; + cursor: pointer; +} .components-snackbar__action.components-button { margin-left: 32px; @@ -3638,66 +4388,69 @@ height: auto; flex-shrink: 0; line-height: 1.4; - padding: 0; } - .components-snackbar__action.components-button:not(:disabled):not([aria-disabled="true"]):not(.is-secondary) { - text-decoration: underline; - background-color: transparent; } - .components-snackbar__action.components-button:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):focus { - color: #fff; - box-shadow: none; - outline: 1px dotted #fff; } - .components-snackbar__action.components-button:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):hover { - color: #007cba; - color: var(--wp-admin-theme-color); } + padding: 0; +} +.components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary) { + text-decoration: underline; + background-color: transparent; +} +.components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary):focus { + color: #fff; + box-shadow: none; + outline: 1px dotted #fff; +} +.components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover { + color: var(--wp-admin-theme-color); +} .components-snackbar__content { display: flex; align-items: baseline; justify-content: space-between; - line-height: 1.4; } + line-height: 1.4; +} .components-snackbar-list { position: absolute; z-index: 100000; width: 100%; - box-sizing: border-box; } + box-sizing: border-box; + pointer-events: none; +} .components-snackbar-list__notice-container { position: relative; - padding-top: 8px; } - -.components-spinner { - display: inline-block; - background-color: #7e8993; + padding-top: 8px; +} + +.components-swatch { width: 18px; height: 18px; - opacity: 0.7; - margin: 5px 11px 0; - border-radius: 100%; - position: relative; } - .components-spinner::before { - /* rtl:begin:ignore */ - content: ""; - position: absolute; - background-color: #fff; - top: 3px; - left: 3px; - width: 4px; - height: 4px; - border-radius: 100%; - transform-origin: 6px 6px; - animation: components-spinner__animation 1s infinite linear; - /* rtl:end:ignore */ } - -@keyframes components-spinner__animation { - from { - transform: rotate(0deg); } - to { - transform: rotate(360deg); } } + border-radius: 50%; + color: transparent; + background: transparent; +} +.components-swatch::after { + content: ""; + display: block; + width: 100%; + height: 100%; + border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 50%; +} + +.components-button.has-icon.has-text .components-swatch { + margin-right: 8px; +} .components-tab-panel__tabs { display: flex; - align-items: stretch; } + align-items: stretch; + flex-direction: row; +} +.components-tab-panel__tabs[aria-orientation=vertical] { + flex-direction: column; +} .components-tab-panel__tabs-item { background: transparent; @@ -3710,208 +4463,53 @@ margin-left: 0; font-weight: 500; transition: box-shadow 0.1s linear; - box-sizing: border-box; } - .components-tab-panel__tabs-item::after { - content: attr(data-label); - display: block; - height: 0; - overflow: hidden; - speak: none; - visibility: hidden; } - .components-tab-panel__tabs-item:focus:not(:disabled) { - box-shadow: inset 0 1.5px #007cba; - box-shadow: inset 0 1.5px var(--wp-admin-theme-color); } - .components-tab-panel__tabs-item.is-active { - box-shadow: inset 0 0 0 1.5px transparent, inset 0 -4px 0 0 #007cba; - box-shadow: inset 0 0 0 1.5px transparent, inset 0 -4px 0 0 var(--wp-admin-theme-color); - position: relative; } - .components-tab-panel__tabs-item.is-active::before { - content: ""; - position: absolute; - top: 0; - bottom: 1px; - right: 0; - left: 0; - border-bottom: 4px solid transparent; } - .components-tab-panel__tabs-item:focus { - box-shadow: inset 0 0 0 1.5px #007cba; - box-shadow: inset 0 0 0 1.5px var(--wp-admin-theme-color); } - .components-tab-panel__tabs-item.is-active:focus { - box-shadow: inset 0 0 0 1.5px #007cba, inset 0 -4px 0 0 #007cba; - box-shadow: inset 0 0 0 1.5px var(--wp-admin-theme-color), inset 0 -4px 0 0 var(--wp-admin-theme-color); } + box-sizing: border-box; +} +.components-tab-panel__tabs-item::after { + content: attr(data-label); + display: block; + height: 0; + overflow: hidden; + speak: none; + visibility: hidden; +} +.components-tab-panel__tabs-item:focus:not(:disabled) { + box-shadow: inset 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); +} +.components-tab-panel__tabs-item.is-active { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -4px 0 0 var(--wp-admin-theme-color); + position: relative; +} +.components-tab-panel__tabs-item.is-active::before { + content: ""; + position: absolute; + top: 0; + bottom: 1px; + right: 0; + left: 0; + border-bottom: 4px solid transparent; +} +.components-tab-panel__tabs-item:focus { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); +} +.components-tab-panel__tabs-item.is-active:focus { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -4px 0 0 var(--wp-admin-theme-color); +} .components-text-control__input, -.components-text-control__input[type="text"], -.components-text-control__input[type="tel"], -.components-text-control__input[type="time"], -.components-text-control__input[type="url"], -.components-text-control__input[type="week"], -.components-text-control__input[type="password"], -.components-text-control__input[type="color"], -.components-text-control__input[type="date"], -.components-text-control__input[type="datetime"], -.components-text-control__input[type="datetime-local"], -.components-text-control__input[type="email"], -.components-text-control__input[type="month"], -.components-text-control__input[type="number"] { - width: 100%; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - padding: 6px 8px; - box-shadow: 0 0 0 transparent; - transition: box-shadow 0.1s linear; - border-radius: 2px; - border: 1px solid #757575; - /* Fonts smaller than 16px causes mobile safari to zoom. */ - font-size: 16px; - /* Override core line-height. To be reviewed. */ - line-height: normal; } - @media (prefers-reduced-motion: reduce) { - .components-text-control__input, - .components-text-control__input[type="text"], - .components-text-control__input[type="tel"], - .components-text-control__input[type="time"], - .components-text-control__input[type="url"], - .components-text-control__input[type="week"], - .components-text-control__input[type="password"], - .components-text-control__input[type="color"], - .components-text-control__input[type="date"], - .components-text-control__input[type="datetime"], - .components-text-control__input[type="datetime-local"], - .components-text-control__input[type="email"], - .components-text-control__input[type="month"], - .components-text-control__input[type="number"] { - transition-duration: 0s; } } - @media (min-width: 600px) { - .components-text-control__input, - .components-text-control__input[type="text"], - .components-text-control__input[type="tel"], - .components-text-control__input[type="time"], - .components-text-control__input[type="url"], - .components-text-control__input[type="week"], - .components-text-control__input[type="password"], - .components-text-control__input[type="color"], - .components-text-control__input[type="date"], - .components-text-control__input[type="datetime"], - .components-text-control__input[type="datetime-local"], - .components-text-control__input[type="email"], - .components-text-control__input[type="month"], - .components-text-control__input[type="number"] { - font-size: 13px; - /* Override core line-height. To be reviewed. */ - line-height: normal; } } - .components-text-control__input:focus, - .components-text-control__input[type="text"]:focus, - .components-text-control__input[type="tel"]:focus, - .components-text-control__input[type="time"]:focus, - .components-text-control__input[type="url"]:focus, - .components-text-control__input[type="week"]:focus, - .components-text-control__input[type="password"]:focus, - .components-text-control__input[type="color"]:focus, - .components-text-control__input[type="date"]:focus, - .components-text-control__input[type="datetime"]:focus, - .components-text-control__input[type="datetime-local"]:focus, - .components-text-control__input[type="email"]:focus, - .components-text-control__input[type="month"]:focus, - .components-text-control__input[type="number"]:focus { - border-color: #007cba; - border-color: var(--wp-admin-theme-color); - box-shadow: 0 0 0 0.5px #007cba; - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color); - outline: 2px solid transparent; } - .components-text-control__input::-webkit-input-placeholder, - .components-text-control__input[type="text"]::-webkit-input-placeholder, - .components-text-control__input[type="tel"]::-webkit-input-placeholder, - .components-text-control__input[type="time"]::-webkit-input-placeholder, - .components-text-control__input[type="url"]::-webkit-input-placeholder, - .components-text-control__input[type="week"]::-webkit-input-placeholder, - .components-text-control__input[type="password"]::-webkit-input-placeholder, - .components-text-control__input[type="color"]::-webkit-input-placeholder, - .components-text-control__input[type="date"]::-webkit-input-placeholder, - .components-text-control__input[type="datetime"]::-webkit-input-placeholder, - .components-text-control__input[type="datetime-local"]::-webkit-input-placeholder, - .components-text-control__input[type="email"]::-webkit-input-placeholder, - .components-text-control__input[type="month"]::-webkit-input-placeholder, - .components-text-control__input[type="number"]::-webkit-input-placeholder { - color: rgba(30, 30, 30, 0.62); } - .components-text-control__input::-moz-placeholder, - .components-text-control__input[type="text"]::-moz-placeholder, - .components-text-control__input[type="tel"]::-moz-placeholder, - .components-text-control__input[type="time"]::-moz-placeholder, - .components-text-control__input[type="url"]::-moz-placeholder, - .components-text-control__input[type="week"]::-moz-placeholder, - .components-text-control__input[type="password"]::-moz-placeholder, - .components-text-control__input[type="color"]::-moz-placeholder, - .components-text-control__input[type="date"]::-moz-placeholder, - .components-text-control__input[type="datetime"]::-moz-placeholder, - .components-text-control__input[type="datetime-local"]::-moz-placeholder, - .components-text-control__input[type="email"]::-moz-placeholder, - .components-text-control__input[type="month"]::-moz-placeholder, - .components-text-control__input[type="number"]::-moz-placeholder { - opacity: 1; - color: rgba(30, 30, 30, 0.62); } - .components-text-control__input:-ms-input-placeholder, - .components-text-control__input[type="text"]:-ms-input-placeholder, - .components-text-control__input[type="tel"]:-ms-input-placeholder, - .components-text-control__input[type="time"]:-ms-input-placeholder, - .components-text-control__input[type="url"]:-ms-input-placeholder, - .components-text-control__input[type="week"]:-ms-input-placeholder, - .components-text-control__input[type="password"]:-ms-input-placeholder, - .components-text-control__input[type="color"]:-ms-input-placeholder, - .components-text-control__input[type="date"]:-ms-input-placeholder, - .components-text-control__input[type="datetime"]:-ms-input-placeholder, - .components-text-control__input[type="datetime-local"]:-ms-input-placeholder, - .components-text-control__input[type="email"]:-ms-input-placeholder, - .components-text-control__input[type="month"]:-ms-input-placeholder, - .components-text-control__input[type="number"]:-ms-input-placeholder { - color: rgba(30, 30, 30, 0.62); } - .is-dark-theme .components-text-control__input::-webkit-input-placeholder, .is-dark-theme - .components-text-control__input[type="text"]::-webkit-input-placeholder, .is-dark-theme - .components-text-control__input[type="tel"]::-webkit-input-placeholder, .is-dark-theme - .components-text-control__input[type="time"]::-webkit-input-placeholder, .is-dark-theme - .components-text-control__input[type="url"]::-webkit-input-placeholder, .is-dark-theme - .components-text-control__input[type="week"]::-webkit-input-placeholder, .is-dark-theme - .components-text-control__input[type="password"]::-webkit-input-placeholder, .is-dark-theme - .components-text-control__input[type="color"]::-webkit-input-placeholder, .is-dark-theme - .components-text-control__input[type="date"]::-webkit-input-placeholder, .is-dark-theme - .components-text-control__input[type="datetime"]::-webkit-input-placeholder, .is-dark-theme - .components-text-control__input[type="datetime-local"]::-webkit-input-placeholder, .is-dark-theme - .components-text-control__input[type="email"]::-webkit-input-placeholder, .is-dark-theme - .components-text-control__input[type="month"]::-webkit-input-placeholder, .is-dark-theme - .components-text-control__input[type="number"]::-webkit-input-placeholder { - color: rgba(255, 255, 255, 0.65); } - .is-dark-theme .components-text-control__input::-moz-placeholder, .is-dark-theme - .components-text-control__input[type="text"]::-moz-placeholder, .is-dark-theme - .components-text-control__input[type="tel"]::-moz-placeholder, .is-dark-theme - .components-text-control__input[type="time"]::-moz-placeholder, .is-dark-theme - .components-text-control__input[type="url"]::-moz-placeholder, .is-dark-theme - .components-text-control__input[type="week"]::-moz-placeholder, .is-dark-theme - .components-text-control__input[type="password"]::-moz-placeholder, .is-dark-theme - .components-text-control__input[type="color"]::-moz-placeholder, .is-dark-theme - .components-text-control__input[type="date"]::-moz-placeholder, .is-dark-theme - .components-text-control__input[type="datetime"]::-moz-placeholder, .is-dark-theme - .components-text-control__input[type="datetime-local"]::-moz-placeholder, .is-dark-theme - .components-text-control__input[type="email"]::-moz-placeholder, .is-dark-theme - .components-text-control__input[type="month"]::-moz-placeholder, .is-dark-theme - .components-text-control__input[type="number"]::-moz-placeholder { - opacity: 1; - color: rgba(255, 255, 255, 0.65); } - .is-dark-theme .components-text-control__input:-ms-input-placeholder, .is-dark-theme - .components-text-control__input[type="text"]:-ms-input-placeholder, .is-dark-theme - .components-text-control__input[type="tel"]:-ms-input-placeholder, .is-dark-theme - .components-text-control__input[type="time"]:-ms-input-placeholder, .is-dark-theme - .components-text-control__input[type="url"]:-ms-input-placeholder, .is-dark-theme - .components-text-control__input[type="week"]:-ms-input-placeholder, .is-dark-theme - .components-text-control__input[type="password"]:-ms-input-placeholder, .is-dark-theme - .components-text-control__input[type="color"]:-ms-input-placeholder, .is-dark-theme - .components-text-control__input[type="date"]:-ms-input-placeholder, .is-dark-theme - .components-text-control__input[type="datetime"]:-ms-input-placeholder, .is-dark-theme - .components-text-control__input[type="datetime-local"]:-ms-input-placeholder, .is-dark-theme - .components-text-control__input[type="email"]:-ms-input-placeholder, .is-dark-theme - .components-text-control__input[type="month"]:-ms-input-placeholder, .is-dark-theme - .components-text-control__input[type="number"]:-ms-input-placeholder { - color: rgba(255, 255, 255, 0.65); } - -.components-textarea-control__input { +.components-text-control__input[type=text], +.components-text-control__input[type=tel], +.components-text-control__input[type=time], +.components-text-control__input[type=url], +.components-text-control__input[type=week], +.components-text-control__input[type=password], +.components-text-control__input[type=color], +.components-text-control__input[type=date], +.components-text-control__input[type=datetime], +.components-text-control__input[type=datetime-local], +.components-text-control__input[type=email], +.components-text-control__input[type=month], +.components-text-control__input[type=number] { width: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; padding: 6px 8px; @@ -3922,65 +4520,151 @@ /* Fonts smaller than 16px causes mobile safari to zoom. */ font-size: 16px; /* Override core line-height. To be reviewed. */ - line-height: normal; } - @media (prefers-reduced-motion: reduce) { - .components-textarea-control__input { - transition-duration: 0s; } } - @media (min-width: 600px) { - .components-textarea-control__input { - font-size: 13px; - /* Override core line-height. To be reviewed. */ - line-height: normal; } } - .components-textarea-control__input:focus { - border-color: #007cba; - border-color: var(--wp-admin-theme-color); - box-shadow: 0 0 0 0.5px #007cba; - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color); - outline: 2px solid transparent; } - .components-textarea-control__input::-webkit-input-placeholder { - color: rgba(30, 30, 30, 0.62); } - .components-textarea-control__input::-moz-placeholder { - opacity: 1; - color: rgba(30, 30, 30, 0.62); } - .components-textarea-control__input:-ms-input-placeholder { - color: rgba(30, 30, 30, 0.62); } - .is-dark-theme .components-textarea-control__input::-webkit-input-placeholder { - color: rgba(255, 255, 255, 0.65); } - .is-dark-theme .components-textarea-control__input::-moz-placeholder { - opacity: 1; - color: rgba(255, 255, 255, 0.65); } - .is-dark-theme .components-textarea-control__input:-ms-input-placeholder { - color: rgba(255, 255, 255, 0.65); } + line-height: normal; +} +@media (prefers-reduced-motion: reduce) { + .components-text-control__input, +.components-text-control__input[type=text], +.components-text-control__input[type=tel], +.components-text-control__input[type=time], +.components-text-control__input[type=url], +.components-text-control__input[type=week], +.components-text-control__input[type=password], +.components-text-control__input[type=color], +.components-text-control__input[type=date], +.components-text-control__input[type=datetime], +.components-text-control__input[type=datetime-local], +.components-text-control__input[type=email], +.components-text-control__input[type=month], +.components-text-control__input[type=number] { + transition-duration: 0s; + transition-delay: 0s; + } +} +@media (min-width: 600px) { + .components-text-control__input, +.components-text-control__input[type=text], +.components-text-control__input[type=tel], +.components-text-control__input[type=time], +.components-text-control__input[type=url], +.components-text-control__input[type=week], +.components-text-control__input[type=password], +.components-text-control__input[type=color], +.components-text-control__input[type=date], +.components-text-control__input[type=datetime], +.components-text-control__input[type=datetime-local], +.components-text-control__input[type=email], +.components-text-control__input[type=month], +.components-text-control__input[type=number] { + font-size: 13px; + /* Override core line-height. To be reviewed. */ + line-height: normal; + } +} +.components-text-control__input:focus, +.components-text-control__input[type=text]:focus, +.components-text-control__input[type=tel]:focus, +.components-text-control__input[type=time]:focus, +.components-text-control__input[type=url]:focus, +.components-text-control__input[type=week]:focus, +.components-text-control__input[type=password]:focus, +.components-text-control__input[type=color]:focus, +.components-text-control__input[type=date]:focus, +.components-text-control__input[type=datetime]:focus, +.components-text-control__input[type=datetime-local]:focus, +.components-text-control__input[type=email]:focus, +.components-text-control__input[type=month]:focus, +.components-text-control__input[type=number]:focus { + border-color: var(--wp-admin-theme-color); + box-shadow: 0 0 0 1px var(--wp-admin-theme-color); + outline: 2px solid transparent; +} +.components-text-control__input::-webkit-input-placeholder, +.components-text-control__input[type=text]::-webkit-input-placeholder, +.components-text-control__input[type=tel]::-webkit-input-placeholder, +.components-text-control__input[type=time]::-webkit-input-placeholder, +.components-text-control__input[type=url]::-webkit-input-placeholder, +.components-text-control__input[type=week]::-webkit-input-placeholder, +.components-text-control__input[type=password]::-webkit-input-placeholder, +.components-text-control__input[type=color]::-webkit-input-placeholder, +.components-text-control__input[type=date]::-webkit-input-placeholder, +.components-text-control__input[type=datetime]::-webkit-input-placeholder, +.components-text-control__input[type=datetime-local]::-webkit-input-placeholder, +.components-text-control__input[type=email]::-webkit-input-placeholder, +.components-text-control__input[type=month]::-webkit-input-placeholder, +.components-text-control__input[type=number]::-webkit-input-placeholder { + color: rgba(30, 30, 30, 0.62); +} +.components-text-control__input::-moz-placeholder, +.components-text-control__input[type=text]::-moz-placeholder, +.components-text-control__input[type=tel]::-moz-placeholder, +.components-text-control__input[type=time]::-moz-placeholder, +.components-text-control__input[type=url]::-moz-placeholder, +.components-text-control__input[type=week]::-moz-placeholder, +.components-text-control__input[type=password]::-moz-placeholder, +.components-text-control__input[type=color]::-moz-placeholder, +.components-text-control__input[type=date]::-moz-placeholder, +.components-text-control__input[type=datetime]::-moz-placeholder, +.components-text-control__input[type=datetime-local]::-moz-placeholder, +.components-text-control__input[type=email]::-moz-placeholder, +.components-text-control__input[type=month]::-moz-placeholder, +.components-text-control__input[type=number]::-moz-placeholder { + opacity: 1; + color: rgba(30, 30, 30, 0.62); +} +.components-text-control__input:-ms-input-placeholder, +.components-text-control__input[type=text]:-ms-input-placeholder, +.components-text-control__input[type=tel]:-ms-input-placeholder, +.components-text-control__input[type=time]:-ms-input-placeholder, +.components-text-control__input[type=url]:-ms-input-placeholder, +.components-text-control__input[type=week]:-ms-input-placeholder, +.components-text-control__input[type=password]:-ms-input-placeholder, +.components-text-control__input[type=color]:-ms-input-placeholder, +.components-text-control__input[type=date]:-ms-input-placeholder, +.components-text-control__input[type=datetime]:-ms-input-placeholder, +.components-text-control__input[type=datetime-local]:-ms-input-placeholder, +.components-text-control__input[type=email]:-ms-input-placeholder, +.components-text-control__input[type=month]:-ms-input-placeholder, +.components-text-control__input[type=number]:-ms-input-placeholder { + color: rgba(30, 30, 30, 0.62); +} .components-tip { display: flex; - color: #555d66; } - .components-tip svg { - -ms-grid-row-align: center; - align-self: center; - fill: #f0b849; - flex-shrink: 0; - margin-right: 16px; } - .components-tip p { - margin: 0; } + color: #757575; +} +.components-tip svg { + align-self: center; + fill: #f0b849; + flex-shrink: 0; + margin-right: 16px; +} +.components-tip p { + margin: 0; +} .components-toggle-control .components-base-control__field { display: flex; margin-bottom: 12px; line-height: initial; - align-items: center; } - .components-toggle-control .components-base-control__field .components-form-toggle { - margin-right: 12px; } - .components-toggle-control .components-base-control__field .components-toggle-control__label { - display: block; } + align-items: center; +} +.components-toggle-control .components-base-control__field .components-form-toggle { + margin-right: 12px; +} +.components-toggle-control .components-base-control__field .components-toggle-control__label { + display: block; +} .components-accessible-toolbar { display: inline-flex; border: 1px solid #1e1e1e; border-radius: 2px; - flex-shrink: 0; } - .components-accessible-toolbar > .components-toolbar-group:last-child { - border-right: none; } + flex-shrink: 0; +} +.components-accessible-toolbar > .components-toolbar-group:last-child { + border-right: none; +} .components-accessible-toolbar .components-button, .components-toolbar .components-button { @@ -3988,85 +4672,105 @@ height: 48px; z-index: 1; padding-left: 16px; - padding-right: 16px; } - .components-accessible-toolbar .components-button:focus:enabled, - .components-toolbar .components-button:focus:enabled { - box-shadow: none; - outline: none; } + padding-right: 16px; +} +.components-accessible-toolbar .components-button:focus:enabled, +.components-toolbar .components-button:focus:enabled { + box-shadow: none; + outline: none; +} +.components-accessible-toolbar .components-button::before, +.components-toolbar .components-button::before { + content: ""; + position: absolute; + display: block; + border-radius: 2px; + height: 32px; + left: 8px; + right: 8px; + z-index: -1; + animation: components-button__appear-animation 0.1s ease; + animation-fill-mode: forwards; +} +@media (prefers-reduced-motion: reduce) { .components-accessible-toolbar .components-button::before, - .components-toolbar .components-button::before { - content: ""; - position: absolute; - display: block; - border-radius: 2px; - height: 32px; - left: 8px; - right: 8px; - z-index: -1; - animation: components-button__appear-animation 0.1s ease; - animation-fill-mode: forwards; } - @media (prefers-reduced-motion: reduce) { - .components-accessible-toolbar .components-button::before, - .components-toolbar .components-button::before { - animation-duration: 1ms; } } - .components-accessible-toolbar .components-button svg, - .components-toolbar .components-button svg { - position: relative; - margin-left: auto; - margin-right: auto; } - .components-accessible-toolbar .components-button.is-pressed, - .components-toolbar .components-button.is-pressed { - background: transparent; } - .components-accessible-toolbar .components-button.is-pressed:hover, - .components-toolbar .components-button.is-pressed:hover { - background: transparent; } - .components-accessible-toolbar .components-button.is-pressed::before, - .components-toolbar .components-button.is-pressed::before { - background: #1e1e1e; } - .components-accessible-toolbar .components-button:focus::before, - .components-toolbar .components-button:focus::before { - box-shadow: inset 0 0 0 1.5px #007cba, inset 0 0 0 4px #fff; - box-shadow: inset 0 0 0 1.5px var(--wp-admin-theme-color), inset 0 0 0 4px #fff; - outline: 2px solid transparent; } - .components-accessible-toolbar .components-button.has-icon, - .components-toolbar .components-button.has-icon { - padding-left: 8px; - padding-right: 8px; - min-width: 48px; - justify-content: center; } - .components-accessible-toolbar .components-button.components-tab-button, - .components-toolbar .components-button.components-tab-button { - font-weight: 500; } - .components-accessible-toolbar .components-button.components-tab-button span, - .components-toolbar .components-button.components-tab-button span { - display: inline-block; - padding-left: 0; - padding-right: 0; - position: relative; } +.components-toolbar .components-button::before { + animation-duration: 1ms; + animation-delay: 0s; + } +} +.components-accessible-toolbar .components-button svg, +.components-toolbar .components-button svg { + position: relative; + margin-left: auto; + margin-right: auto; +} +.components-accessible-toolbar .components-button.is-pressed, +.components-toolbar .components-button.is-pressed { + background: transparent; +} +.components-accessible-toolbar .components-button.is-pressed:hover, +.components-toolbar .components-button.is-pressed:hover { + background: transparent; +} +.components-accessible-toolbar .components-button.is-pressed::before, +.components-toolbar .components-button.is-pressed::before { + background: #1e1e1e; +} +.components-accessible-toolbar .components-button:focus::before, +.components-toolbar .components-button:focus::before { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 4px #fff; + outline: 2px solid transparent; +} +.components-accessible-toolbar .components-button.has-icon, +.components-toolbar .components-button.has-icon { + padding-left: 8px; + padding-right: 8px; + min-width: 48px; + justify-content: center; +} +.components-accessible-toolbar .components-button.components-tab-button, +.components-toolbar .components-button.components-tab-button { + font-weight: 500; +} +.components-accessible-toolbar .components-button.components-tab-button span, +.components-toolbar .components-button.components-tab-button span { + display: inline-block; + padding-left: 0; + padding-right: 0; + position: relative; +} @keyframes components-button__appear-animation { from { - transform: scaleY(0); } + transform: scaleY(0); + } to { - transform: scaleY(1); } } - + transform: scaleY(1); + } +} .components-toolbar__control.components-button { - position: relative; } - .components-toolbar__control.components-button[data-subscript] svg { - padding: 5px 10px 5px 0; } - .components-toolbar__control.components-button[data-subscript]::after { - content: attr(data-subscript); - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 13px; - font-weight: 600; - line-height: 12px; - position: absolute; - right: 8px; - bottom: 10px; } - .components-toolbar__control.components-button:active::before { - display: none; } - .components-toolbar__control.components-button:not(:disabled).is-pressed[data-subscript]::after { - color: #fff; } + position: relative; +} +.components-toolbar__control.components-button[data-subscript] svg { + padding: 5px 10px 5px 0; +} +.components-toolbar__control.components-button[data-subscript]::after { + content: attr(data-subscript); + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-size: 13px; + font-weight: 600; + line-height: 12px; + position: absolute; + right: 8px; + bottom: 10px; +} +.components-toolbar__control.components-button:active::before { + display: none; +} +.components-toolbar__control.components-button:not(:disabled).is-pressed[data-subscript]::after { + color: #fff; +} .components-toolbar-group { min-height: 48px; @@ -4075,33 +4779,41 @@ display: inline-flex; flex-shrink: 0; flex-wrap: wrap; - line-height: 0; } - .components-toolbar-group .components-toolbar-group { - border-width: 0; - margin: 0; } + line-height: 0; +} +.components-toolbar-group .components-toolbar-group.components-toolbar-group { + border-width: 0; + margin: 0; +} .components-toolbar { min-height: 48px; margin: 0; border: 1px solid #1e1e1e; - border-radius: 2px; background-color: #fff; display: inline-flex; flex-shrink: 0; - flex-wrap: wrap; } + flex-wrap: wrap; +} +.components-toolbar .components-toolbar.components-toolbar { + border-width: 0; + margin: 0; +} div.components-toolbar > div { display: block; - margin: 0; } - @supports ((position: -webkit-sticky) or (position: sticky)) { - div.components-toolbar > div { - display: flex; } } - + margin: 0; +} +@supports (position: sticky) { + div.components-toolbar > div { + display: flex; + } +} div.components-toolbar > div + div.has-left-divider { margin-left: 6px; position: relative; - overflow: visible; } - + overflow: visible; +} div.components-toolbar > div + div.has-left-divider::before { display: inline-block; content: ""; @@ -4111,61 +4823,187 @@ top: 8px; left: -3px; width: 1px; - height: 20px; } - -.components-accessible-toolbar .components-toolbar-group > .components-button.components-button.has-icon, -.components-toolbar div > .components-button.components-button.has-icon { - min-width: 36px; - padding-left: 6px; - padding-right: 6px; } - .components-accessible-toolbar .components-toolbar-group > .components-button.components-button.has-icon svg, - .components-toolbar div > .components-button.components-button.has-icon svg { - min-width: 24px; } - .components-accessible-toolbar .components-toolbar-group > .components-button.components-button.has-icon::before, - .components-toolbar div > .components-button.components-button.has-icon::before { - left: 2px; - right: 2px; } - -.components-accessible-toolbar .components-toolbar-group > .components-button:first-child.has-icon, -.components-accessible-toolbar .components-toolbar-group > div:first-child > .components-button.has-icon, -.components-toolbar div:first-child .components-button.has-icon { + height: 20px; +} + +.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button:first-child:last-child, +.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown:first-child:last-child .components-button, .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot.components-dropdown > .components-button.components-button, .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot.components-dropdown > * .components-button, +.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button:first-child:last-child, +.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown:first-child:last-child .components-button, +.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot.components-dropdown > .components-button.components-button, +.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot.components-dropdown > * .components-button, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button:first-child:last-child, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown:first-child:last-child .components-button, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar.components-dropdown > .components-button.components-button, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar.components-dropdown > * .components-button, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button:first-child:last-child, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown:first-child:last-child .components-button, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown.components-dropdown > .components-button.components-button, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown.components-dropdown > * .components-button, +.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button:first-child:last-child, +.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown:first-child:last-child .components-button, +.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group.components-dropdown > .components-button.components-button, +.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group.components-dropdown > * .components-button { + min-width: 48px; + padding-left: 12px; + padding-right: 12px; +} +.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button:first-child:last-child::before, +.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown:first-child:last-child .components-button::before, .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot.components-dropdown > .components-button.components-button::before, .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot.components-dropdown > * .components-button::before, +.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button:first-child:last-child::before, +.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown:first-child:last-child .components-button::before, +.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot.components-dropdown > .components-button.components-button::before, +.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot.components-dropdown > * .components-button::before, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button:first-child:last-child::before, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown:first-child:last-child .components-button::before, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar.components-dropdown > .components-button.components-button::before, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar.components-dropdown > * .components-button::before, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button:first-child:last-child::before, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown:first-child:last-child .components-button::before, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown.components-dropdown > .components-button.components-button::before, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown.components-dropdown > * .components-button::before, +.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button:first-child:last-child::before, +.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown:first-child:last-child .components-button::before, +.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group.components-dropdown > .components-button.components-button::before, +.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group.components-dropdown > * .components-button::before { + left: 8px; + right: 8px; +} +.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button:first-child, +.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > div:first-child > .components-button, +.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown:first-child .components-button, +.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button:first-child, +.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > div:first-child > .components-button, +.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown:first-child .components-button, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button:first-child, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > div:first-child > .components-button, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown:first-child .components-button, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button:first-child, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > div:first-child > .components-button, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown:first-child .components-button, +.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button:first-child, +.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > div:first-child > .components-button, +.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown:first-child .components-button { min-width: 42px; padding-left: 11px; - padding-right: 6px; } - .components-accessible-toolbar .components-toolbar-group > .components-button:first-child.has-icon::before, - .components-accessible-toolbar .components-toolbar-group > div:first-child > .components-button.has-icon::before, - .components-toolbar div:first-child .components-button.has-icon::before { - left: 8px; - right: 2px; } - -.components-accessible-toolbar .components-toolbar-group > .components-button:last-of-type.has-icon, -.components-accessible-toolbar .components-toolbar-group > div:last-child > .components-button.has-icon, -.components-toolbar div:last-child .components-button.has-icon { + padding-right: 6px; +} +.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button:first-child::before, +.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > div:first-child > .components-button::before, +.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown:first-child .components-button::before, +.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button:first-child::before, +.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > div:first-child > .components-button::before, +.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown:first-child .components-button::before, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button:first-child::before, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > div:first-child > .components-button::before, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown:first-child .components-button::before, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button:first-child::before, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > div:first-child > .components-button::before, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown:first-child .components-button::before, +.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button:first-child::before, +.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > div:first-child > .components-button::before, +.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown:first-child .components-button::before { + left: 8px; + right: 2px; +} +.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button, +.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > div > .components-button, +.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button, +.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button, +.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > div > .components-button, +.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown .components-button, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > div > .components-button, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown .components-button, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > div > .components-button, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown .components-button, +.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button, +.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > div > .components-button, +.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown .components-button { + min-width: 36px; + padding-left: 6px; + padding-right: 6px; +} +.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button svg, +.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > div > .components-button svg, +.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button svg, +.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button svg, +.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > div > .components-button svg, +.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown .components-button svg, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button svg, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > div > .components-button svg, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown .components-button svg, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button svg, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > div > .components-button svg, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown .components-button svg, +.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button svg, +.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > div > .components-button svg, +.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown .components-button svg { + min-width: 24px; +} +.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button::before, +.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > div > .components-button::before, +.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button::before, +.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button::before, +.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > div > .components-button::before, +.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown .components-button::before, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button::before, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > div > .components-button::before, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown .components-button::before, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button::before, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > div > .components-button::before, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown .components-button::before, +.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button::before, +.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > div > .components-button::before, +.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown .components-button::before { + left: 2px; + right: 2px; +} +.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button:last-child, +.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > div:last-child > .components-button, +.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown:last-child .components-button, +.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button:last-child, +.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > div:last-child > .components-button, +.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown:last-child .components-button, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button:last-child, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > div:last-child > .components-button, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown:last-child .components-button, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button:last-child, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > div:last-child > .components-button, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown:last-child .components-button, +.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button:last-child, +.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > div:last-child > .components-button, +.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown:last-child .components-button { min-width: 42px; padding-left: 6px; - padding-right: 11px; } - .components-accessible-toolbar .components-toolbar-group > .components-button:last-of-type.has-icon::before, - .components-accessible-toolbar .components-toolbar-group > div:last-child > .components-button.has-icon::before, - .components-toolbar div:last-child .components-button.has-icon::before { - left: 2px; - right: 8px; } - -.components-accessible-toolbar .components-toolbar-group > .components-button:first-of-type:last-of-type.has-icon, -.components-accessible-toolbar .components-toolbar-group > div:first-child:last-child > .components-button.has-icon, -.components-toolbar div:first-child:last-child > .components-button.has-icon { - min-width: 48px; - padding-left: 12px; - padding-right: 12px; } - .components-accessible-toolbar .components-toolbar-group > .components-button:first-of-type:last-of-type.has-icon::before, - .components-accessible-toolbar .components-toolbar-group > div:first-child:last-child > .components-button.has-icon::before, - .components-toolbar div:first-child:last-child > .components-button.has-icon::before { - left: 8px; - right: 8px; } + padding-right: 11px; +} +.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button:last-child::before, +.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > div:last-child > .components-button::before, +.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown:last-child .components-button::before, +.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button:last-child::before, +.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > div:last-child > .components-button::before, +.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown:last-child .components-button::before, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button:last-child::before, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > div:last-child > .components-button::before, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown:last-child .components-button::before, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button:last-child::before, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > div:last-child > .components-button::before, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown:last-child .components-button::before, +.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button:last-child::before, +.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > div:last-child > .components-button::before, +.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown:last-child .components-button::before { + left: 2px; + right: 8px; +} .components-tooltip.components-popover { - z-index: 1000002; } - .components-tooltip.components-popover .components-popover__content { - min-width: 0; } + z-index: 1000002; +} +.components-tooltip.components-popover .components-popover__content { + min-width: 0; +} .components-tooltip .components-popover__content { background: #1e1e1e; @@ -4176,13 +5014,30 @@ text-align: center; line-height: 1.4; font-size: 12px; - box-shadow: none; } - .components-tooltip .components-popover__content > div { - padding: 4px 8px; } + box-shadow: none; +} +.components-tooltip .components-popover__content > div { + padding: 4px 8px; +} .components-tooltip__shortcut { display: inline-block; - margin-left: 8px; } + margin-left: 8px; +} + +.disabled-element-wrapper { + position: relative; +} +.disabled-element-wrapper .event-catcher { + z-index: 100002; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + bottom: 0; + right: 0; +} .components-visually-hidden { border: 0; @@ -4195,7 +5050,8 @@ padding: 0; position: absolute; width: 1px; - word-wrap: normal !important; } + word-wrap: normal !important; +} .components-visually-hidden:focus { background-color: #ddd; @@ -4212,4 +5068,5 @@ text-decoration: none; top: 5px; width: auto; - z-index: 100000; } + z-index: 100000; +} \ No newline at end of file