diff -r 48c4eec2b7e6 -r 8c2e4d02f4ef wp/wp-includes/css/dist/components/style.css --- a/wp/wp-includes/css/dist/components/style.css Fri Sep 05 18:40:08 2025 +0200 +++ b/wp/wp-includes/css/dist/components/style.css Fri Sep 05 18:52:52 2025 +0200 @@ -14,14 +14,10 @@ } } -.components-animate__appear{ - animation:components-animate__appear-animation .1s cubic-bezier(0, 0, .2, 1) 0s; - animation-fill-mode:forwards; -} -@media (prefers-reduced-motion:reduce){ +@media not (prefers-reduced-motion){ .components-animate__appear{ - animation-delay:0s; - animation-duration:1ms; + animation:components-animate__appear-animation .1s cubic-bezier(0, 0, .2, 1) 0s; + animation-fill-mode:forwards; } } .components-animate__appear.is-from-top,.components-animate__appear.is-from-top.is-from-left{ @@ -45,21 +41,17 @@ transform:translateY(0) scaleY(1) scaleX(1); } } -.components-animate__slide-in{ - animation:components-animate__slide-in-animation .1s cubic-bezier(0, 0, .2, 1); - animation-fill-mode:forwards; -} -@media (prefers-reduced-motion:reduce){ +@media not (prefers-reduced-motion){ .components-animate__slide-in{ - animation-delay:0s; - animation-duration:1ms; + animation:components-animate__slide-in-animation .1s cubic-bezier(0, 0, .2, 1); + animation-fill-mode:forwards; } -} -.components-animate__slide-in.is-from-left{ - transform:translateX(100%); -} -.components-animate__slide-in.is-from-right{ - transform:translateX(-100%); + .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{ @@ -67,8 +59,10 @@ transform:translateX(0); } } -.components-animate__loading{ - animation:components-animate__loading 1.6s ease-in-out infinite; +@media not (prefers-reduced-motion){ + .components-animate__loading{ + animation:components-animate__loading 1.6s ease-in-out infinite; + } } @keyframes components-animate__loading{ @@ -98,9 +92,53 @@ 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 #0000; } -.components-autocomplete__result.components-button.is-selected,.components-autocomplete__result.components-button:not(:disabled,[aria-disabled=true]):active{ - background:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); - color:#fff; + +.components-badge{ + align-items:center; + background-color:color-mix(in srgb, #fff 90%, var(--base-color)); + border-radius:2px; + box-sizing:border-box; + color:color-mix(in srgb, #000 50%, var(--base-color)); + display:inline-flex; + font-size:12px; + font-weight:400; + gap:2px; + line-height:20px; + max-width:100%; + min-height:24px; + padding:0 8px; +} +.components-badge *,.components-badge :after,.components-badge :before{ + box-sizing:inherit; +} +.components-badge:where(.is-default){ + background-color:#f0f0f0; + color:#2f2f2f; +} +.components-badge.has-icon{ + padding-inline-start:4px; +} +.components-badge.is-info{ + --base-color:#3858e9; +} +.components-badge.is-warning{ + --base-color:#f0b849; +} +.components-badge.is-error{ + --base-color:#cc1818; +} +.components-badge.is-success{ + --base-color:#4ab866; +} + +.components-badge__icon{ + flex-shrink:0; +} + +.components-badge__content{ + overflow:hidden; + text-overflow:ellipsis; + white-space:nowrap; } .components-button-group{ @@ -128,7 +166,6 @@ .components-button-group .components-button.is-primary{ box-shadow:inset 0 0 0 1px #1e1e1e; } - .components-button{ align-items:center; -webkit-appearance:none; @@ -141,28 +178,22 @@ display:inline-flex; font-family:inherit; font-size:13px; - font-weight:400; height:36px; margin:0; padding:6px 12px; text-decoration:none; - transition:box-shadow .1s linear; -} -@media (prefers-reduced-motion:reduce){ +} +@media not (prefers-reduced-motion){ .components-button{ - transition-delay:0s; - transition-duration:0s; + transition:box-shadow .1s linear; } } .components-button.is-next-40px-default-size{ height:40px; } -.components-button:hover,.components-button[aria-expanded=true]{ +.components-button:hover:not(:disabled,[aria-disabled=true]),.components-button[aria-expanded=true]{ color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); } -.components-button:disabled:hover,.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-components-color-accent, var(--wp-admin-theme-color, #3858e9)); outline:3px solid #0000; @@ -191,7 +222,6 @@ background:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); border-color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); color:#fff6; - opacity:1; outline:none; } .components-button.is-primary:disabled:active:enabled:focus:enabled,.components-button.is-primary:disabled:focus:enabled,.components-button.is-primary[aria-disabled=true]:active:enabled:focus:enabled,.components-button.is-primary[aria-disabled=true]:enabled:focus:enabled,.components-button.is-primary[aria-disabled=true]:focus:enabled{ @@ -212,32 +242,37 @@ .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{ background:#0000; color:#949494; - opacity:1; transform:none; } .components-button.is-secondary{ background:#0000; - box-shadow:inset 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); + box-shadow:inset 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)), 0 0 0 currentColor; color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); outline:1px solid #0000; white-space:nowrap; } -.components-button.is-secondary:hover:not(:disabled,[aria-disabled=true]){ - box-shadow:inset 0 0 0 1px var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6)); +.components-button.is-secondary:hover:not(:disabled,[aria-disabled=true],.is-pressed){ + background:color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 4%, #0000); + box-shadow:inset 0 0 0 1px var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6)); + color:var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6)); } .components-button.is-secondary:disabled:not(:focus),.components-button.is-secondary[aria-disabled=true]:hover:not(:focus),.components-button.is-secondary[aria-disabled=true]:not(:focus){ box-shadow:inset 0 0 0 1px #ddd; } +.components-button.is-secondary:focus:not(:disabled){ + box-shadow:0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); +} .components-button.is-tertiary{ background:#0000; color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); white-space:nowrap; } -.components-button.is-tertiary:hover:not(:disabled,[aria-disabled=true]){ - background:rgba(var(--wp-admin-theme-color--rgb), .04); +.components-button.is-tertiary:hover:not(:disabled,[aria-disabled=true],.is-pressed){ + background:color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 4%, #0000); + color:var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6)); } .components-button.is-tertiary:active:not(:disabled,[aria-disabled=true]){ - background:rgba(var(--wp-admin-theme-color--rgb), .08); + background:color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 8%, #0000); } p+.components-button.is-tertiary{ margin-left:-6px; @@ -254,15 +289,24 @@ .components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link){ color:#cc1818; } -.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):hover:not(:disabled){ +.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):hover:not(:disabled,[aria-disabled=true]){ color:#710d0d; } -.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):focus:not(:disabled){ +.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):focus{ box-shadow:0 0 0 var(--wp-admin-border-width-focus) #cc1818; } -.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):active:not(:disabled){ +.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):active:not(:disabled,[aria-disabled=true]){ background:#ccc; } +.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):disabled,.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link)[aria-disabled=true]{ + color:#949494; +} +.components-button.is-destructive.is-secondary:hover:not(:disabled,[aria-disabled=true]),.components-button.is-destructive.is-tertiary:hover:not(:disabled,[aria-disabled=true]){ + background:#cc18180a; +} +.components-button.is-destructive.is-secondary:active:not(:disabled,[aria-disabled=true]),.components-button.is-destructive.is-tertiary:active:not(:disabled,[aria-disabled=true]){ + background:#cc181814; +} .components-button.is-link{ background:none; border:0; @@ -275,35 +319,34 @@ padding:0; text-align:left; text-decoration:underline; - transition-duration:.05s; - transition-property:border, background, color; - transition-timing-function:ease-in-out; -} -@media (prefers-reduced-motion:reduce){ +} +@media not (prefers-reduced-motion){ .components-button.is-link{ - transition-delay:0s; - transition-duration:0s; + transition-duration:.05s; + transition-property:border, background, color; + transition-timing-function:ease-in-out; } } .components-button.is-link:focus{ border-radius:2px; } +.components-button.is-link:disabled,.components-button.is-link[aria-disabled=true]{ + color:#949494; +} .components-button:not(:disabled,[aria-disabled=true]):active{ color:var(--wp-components-color-foreground, #1e1e1e); } .components-button:disabled,.components-button[aria-disabled=true]{ + color:#949494; cursor:default; - opacity:.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 2.5s linear infinite; background-image:linear-gradient(-45deg, #fafafa 33%, #e0e0e0 0, #e0e0e0 70%, #fafafa 0); background-size:100px 100%; - opacity:1; -} -@media (prefers-reduced-motion:reduce){ +} +@media not (prefers-reduced-motion){ .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-duration:0s; + animation:components-button__busy-animation 2.5s linear infinite; } } .components-button.is-compact{ @@ -346,18 +389,23 @@ padding-left:8px; padding-right:12px; } -.components-button.is-pressed{ +.components-button.is-pressed,.components-button.is-pressed:hover{ + color:var(--wp-components-color-foreground-inverted, #fff); +} +.components-button.is-pressed:hover:not(:disabled,[aria-disabled=true]),.components-button.is-pressed:not(:disabled,[aria-disabled=true]){ background:var(--wp-components-color-foreground, #1e1e1e); +} +.components-button.is-pressed:disabled,.components-button.is-pressed[aria-disabled=true]{ + color:#949494; +} +.components-button.is-pressed:disabled:not(.is-primary):not(.is-secondary):not(.is-tertiary),.components-button.is-pressed[aria-disabled=true]:not(.is-primary):not(.is-secondary):not(.is-tertiary){ + background:#949494; color:var(--wp-components-color-foreground-inverted, #fff); } .components-button.is-pressed:focus:not(:disabled){ box-shadow:inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); outline:2px solid #0000; } -.components-button.is-pressed:hover:not(:disabled){ - background:var(--wp-components-color-foreground, #1e1e1e); - color:var(--wp-components-color-foreground-inverted, #fff); -} .components-button svg{ fill:currentColor; outline:none; @@ -378,14 +426,16 @@ } .components-checkbox-control{ --checkbox-input-size:24px; + --checkbox-input-margin:8px; } @media (min-width:600px){ .components-checkbox-control{ - --checkbox-input-size:20px; + --checkbox-input-size:16px; } } .components-checkbox-control__label{ + cursor:pointer; line-height:var(--checkbox-input-size); } @@ -409,12 +459,15 @@ padding:6px 8px; padding:0 !important; text-align:center; - transition:box-shadow .1s linear; transition:none; - transition:border-color .1s ease-in-out; vertical-align:top; width:var(--checkbox-input-size); } +@media not (prefers-reduced-motion){ + .components-checkbox-control__input[type=checkbox]{ + transition:box-shadow .1s linear; + } +} @media (min-width:600px){ .components-checkbox-control__input[type=checkbox]{ font-size:13px; @@ -430,7 +483,6 @@ } .components-checkbox-control__input[type=checkbox]::-moz-placeholder{ color:#1e1e1e9e; - opacity:1; } .components-checkbox-control__input[type=checkbox]:-ms-input-placeholder{ color:#1e1e1e9e; @@ -459,7 +511,7 @@ border-color:var(--wp-admin-theme-color); } .components-checkbox-control__input[type=checkbox][aria-checked=mixed]:before{ - content:""; + content:"\f460"; display:inline-block; float:left; font:normal 30px/1 dashicons; @@ -481,10 +533,9 @@ cursor:default; opacity:1; } -@media (prefers-reduced-motion:reduce){ +@media not (prefers-reduced-motion){ .components-checkbox-control__input[type=checkbox]{ - transition-delay:0s; - transition-duration:0s; + transition:border-color .1s ease-in-out; } } .components-checkbox-control__input[type=checkbox]:focus{ @@ -507,7 +558,8 @@ aspect-ratio:1; display:inline-block; flex-shrink:0; - margin-right:12px; + line-height:1; + margin-right:var(--checkbox-input-margin); position:relative; vertical-align:middle; width:var(--checkbox-input-size); @@ -535,7 +587,7 @@ .components-checkbox-control__help{ display:inline-block; - margin-inline-start:calc(var(--checkbox-input-size) + 12px); + margin-inline-start:calc(var(--checkbox-input-size) + var(--checkbox-input-margin)); } .components-circular-option-picker{ @@ -564,15 +616,13 @@ display:inline-block; height:28px; transform:scale(1); - transition:transform .1s ease; vertical-align:top; width:28px; - will-change:transform; -} -@media (prefers-reduced-motion:reduce){ +} +@media not (prefers-reduced-motion){ .components-circular-option-picker__option-wrapper{ - transition-delay:0s; - transition-duration:0s; + transition:transform .1s ease; + will-change:transform; } } .components-circular-option-picker__option-wrapper:hover{ @@ -596,21 +646,19 @@ } .components-circular-option-picker__option{ + aspect-ratio:1; background:#0000; border:none; border-radius:50%; box-shadow:inset 0 0 0 14px; cursor:pointer; display:inline-block; - height:100%; - transition:box-shadow .1s ease; + height:100% !important; vertical-align:top; - width:100%; -} -@media (prefers-reduced-motion:reduce){ +} +@media not (prefers-reduced-motion){ .components-circular-option-picker__option{ - transition-delay:0s; - transition-duration:0s; + transition:box-shadow .1s ease; } } .components-circular-option-picker__option:hover{ @@ -727,13 +775,11 @@ font-size:16px; line-height:normal; padding:0; - transition:box-shadow .1s linear; width:100%; } -@media (prefers-reduced-motion:reduce){ +@media not (prefers-reduced-motion){ .components-combobox-control__suggestions-container{ - transition-delay:0s; - transition-duration:0s; + transition:box-shadow .1s linear; } } @media (min-width:600px){ @@ -752,7 +798,6 @@ } .components-combobox-control__suggestions-container::-moz-placeholder{ color:#1e1e1e9e; - opacity:1; } .components-combobox-control__suggestions-container:-ms-input-placeholder{ color:#1e1e1e9e; @@ -762,12 +807,8 @@ box-shadow:0 0 0 .5px var(--wp-admin-theme-color); outline:2px solid #0000; } - -.components-combobox-control__reset.components-button{ - display:flex; - height:16px; - min-width:16px; - padding:0; +.components-combobox-control__suggestions-container .components-spinner{ + margin:0; } .components-color-palette__custom-color-wrapper{ @@ -778,7 +819,7 @@ .components-color-palette__custom-color-button{ background:none; border:none; - border-radius:2px 2px 0 0; + border-radius:4px 4px 0 0; box-shadow:inset 0 0 0 1px #0003; box-sizing:border-box; cursor:pointer; @@ -795,17 +836,15 @@ background-image:repeating-linear-gradient(45deg, #e0e0e0 25%, #0000 0, #0000 75%, #e0e0e0 0, #e0e0e0), repeating-linear-gradient(45deg, #e0e0e0 25%, #0000 0, #0000 75%, #e0e0e0 0, #e0e0e0); background-position:0 0, 24px 24px; background-size:48px 48px; + border-radius:3px 3px 0 0; content:""; - height:100%; - left:0; + inset:1px; position:absolute; - top:0; - width:100%; z-index:-1; } .components-color-palette__custom-color-text-wrapper{ - border-radius:0 0 2px 2px; + border-radius:0 0 4px 4px; box-shadow:inset 0 -1px 0 0 #0003,inset 1px 0 0 0 #0003,inset -1px 0 0 0 #0003; font-size:13px; padding:12px 16px; @@ -862,7 +901,7 @@ border-radius:50%; color:#1e1e1e; height:inherit; - min-width:16px; + min-width:16px !important; padding:2px; position:relative; width:inherit; @@ -899,92 +938,11 @@ width:20px; } -.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-gradient-picker__ui-line{ position:relative; z-index:0; } -.components-custom-select-control{ - font-size:13px; - position:relative; -} - -.components-custom-select-control__button{ - outline:0; - position:relative; - text-align:left; -} - -.components-custom-select-control__hint{ - color:#949494; - margin-left:10px; -} - -.components-custom-select-control__menu-wrapper{ - bottom:0; - min-width:100%; - position:absolute; -} - -.components-custom-select-control__menu{ - background-color:#fff; - border:1px solid #1e1e1e; - border-radius:2px; - max-height:400px; - min-width:100%; - outline:none; - overflow:auto; - padding:0; - position:absolute; - transition:none; - z-index:1000000; -} -.components-custom-select-control__menu[aria-hidden=true]{ - display:none; -} - -.components-custom-select-control__item{ - align-items:center; - cursor:default; - display:grid; - grid-template-columns:auto auto; - line-height:28px; - list-style-type:none; - padding:8px 16px; -} -.components-custom-select-control__item:not(.is-next-40px-default-size){ - padding:8px; -} -.components-custom-select-control__item.has-hint{ - grid-template-columns:auto auto 30px; -} -.components-custom-select-control__item.is-highlighted{ - background:#ddd; -} -.components-custom-select-control__item .components-custom-select-control__item-hint{ - color:#949494; - padding-right:4px; - text-align:right; -} -.components-custom-select-control__item .components-custom-select-control__item-icon{ - margin-left:auto; -} -.components-custom-select-control__item:last-child{ - margin-bottom:0; -} - .block-editor-dimension-control .components-base-control__field{ align-items:center; display:flex; @@ -1037,8 +995,7 @@ opacity:1; visibility:visible; } - -.components-drop-zone__content{ +.components-drop-zone .components-drop-zone__content{ align-items:center; background-color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); bottom:0; @@ -1047,6 +1004,8 @@ height:100%; justify-content:center; left:0; + opacity:0; + pointer-events:none; position:absolute; right:0; text-align:center; @@ -1054,6 +1013,27 @@ width:100%; z-index:50; } +.components-drop-zone .components-drop-zone__content-inner{ + opacity:0; + transform:scale(.9); +} +.components-drop-zone.is-active.is-dragging-over-element .components-drop-zone__content{ + opacity:1; +} +@media not (prefers-reduced-motion){ + .components-drop-zone.is-active.is-dragging-over-element .components-drop-zone__content{ + transition:opacity .2s ease-in-out; + } +} +.components-drop-zone.is-active.is-dragging-over-element .components-drop-zone__content-inner{ + opacity:1; + transform:scale(1); +} +@media not (prefers-reduced-motion){ + .components-drop-zone.is-active.is-dragging-over-element .components-drop-zone__content-inner{ + transition:opacity .1s ease-in-out .1s,transform .1s ease-in-out .1s; + } +} .components-drop-zone__content-icon,.components-drop-zone__content-text{ display:block; @@ -1078,22 +1058,21 @@ .components-dropdown__content .components-popover__content{ padding:8px; } +.components-dropdown__content .components-popover__content:has(.components-menu-group){ + padding:0; +} +.components-dropdown__content .components-popover__content:has(.components-menu-group) .components-dropdown-menu__menu>.components-menu-item__button,.components-dropdown__content .components-popover__content:has(.components-menu-group)>.components-menu-item__button{ + margin:8px; + width:auto; +} .components-dropdown__content [role=menuitem]{ white-space:nowrap; } .components-dropdown__content .components-menu-group{ - margin:0 -8px; padding:8px; } -.components-dropdown__content .components-menu-group:first-child{ - margin-top:-8px; -} -.components-dropdown__content .components-menu-group:last-child{ - margin-bottom:-8px; -} .components-dropdown__content .components-menu-group+.components-menu-group{ border-top:1px solid #ccc; - margin-top:0; padding:8px; } .components-dropdown__content.is-alternate .components-menu-group+.components-menu-group{ @@ -1144,7 +1123,7 @@ } .components-dropdown-menu__menu .components-menu-item__button,.components-dropdown-menu__menu .components-menu-item__button.components-button{ height:auto; - min-height:36px; + min-height:40px; padding-left:8px; padding-right:8px; text-align:left; @@ -1169,10 +1148,6 @@ margin:8px 0; } -.components-color-list-picker__swatch-button{ - padding:6px; -} - .components-color-list-picker__swatch-color{ margin:2px; } @@ -1189,63 +1164,55 @@ font-weight:400; margin-left:.5ch; } - -.components-form-toggle{ +.components-form-toggle,.components-form-toggle .components-form-toggle__track{ display:inline-block; + height:16px; position:relative; } .components-form-toggle .components-form-toggle__track{ background-color:#fff; - border:1px solid #1e1e1e; - border-radius:9px; + border:1px solid #949494; + border-radius:8px; box-sizing:border-box; content:""; - display:inline-block; - height:18px; overflow:hidden; - position:relative; - transition:background-color .2s ease,border-color .2s ease; vertical-align:top; - width:36px; -} -@media (prefers-reduced-motion:reduce){ + width:32px; +} +@media not (prefers-reduced-motion){ .components-form-toggle .components-form-toggle__track{ - transition-delay:0s; - transition-duration:0s; + transition:background-color .2s ease,border-color .2s ease; } } .components-form-toggle .components-form-toggle__track:after{ - border-top:18px solid #0000; + border-top:16px solid #0000; box-sizing:border-box; content:""; inset:0; opacity:0; position:absolute; - transition:opacity .2s ease; -} -@media (prefers-reduced-motion:reduce){ +} +@media not (prefers-reduced-motion){ .components-form-toggle .components-form-toggle__track:after{ - transition-delay:0s; - transition-duration:0s; + transition:opacity .2s ease; } } .components-form-toggle .components-form-toggle__thumb{ background-color:#1e1e1e; border:6px solid #0000; border-radius:50%; + box-shadow:0 1px 1px #00000008,0 1px 2px #00000005,0 3px 3px #00000005,0 4px 4px #00000003; box-sizing:border-box; display:block; height:12px; - left:3px; + left:2px; position:absolute; - top:3px; - transition:transform .2s ease,background-color .2s ease-out; + top:2px; width:12px; } -@media (prefers-reduced-motion:reduce){ +@media not (prefers-reduced-motion){ .components-form-toggle .components-form-toggle__thumb{ - transition-delay:0s; - transition-duration:0s; + transition:transform .2s ease,background-color .2s ease-out; } } .components-form-toggle.is-checked .components-form-toggle__track{ @@ -1263,7 +1230,7 @@ .components-form-toggle.is-checked .components-form-toggle__thumb{ background-color:#fff; border-width:0; - transform:translateX(18px); + transform:translateX(16px); } .components-disabled .components-form-toggle,.components-form-toggle.is-disabled{ opacity:.3; @@ -1287,6 +1254,9 @@ .components-form-toggle input.components-form-toggle__input[type=checkbox]:before{ content:""; } +.components-form-toggle input.components-form-toggle__input[type=checkbox]:not(:disabled,[aria-disabled=true]){ + cursor:pointer; +} .components-form-token-field__input-container{ border:1px solid #949494; @@ -1297,13 +1267,11 @@ font-size:16px; line-height:normal; padding:0; - transition:box-shadow .1s linear; width:100%; } -@media (prefers-reduced-motion:reduce){ +@media not (prefers-reduced-motion){ .components-form-token-field__input-container{ - transition-delay:0s; - transition-duration:0s; + transition:box-shadow .1s linear; } } @media (min-width:600px){ @@ -1322,7 +1290,6 @@ } .components-form-token-field__input-container::-moz-placeholder{ color:#1e1e1e9e; - opacity:1; } .components-form-token-field__input-container:-ms-input-placeholder{ color:#1e1e1e9e; @@ -1386,12 +1353,13 @@ } .components-form-token-field__token.is-borderless .components-form-token-field__token-text{ background:#0000; +} +.components-form-token-field__token.is-borderless:not(.is-disabled) .components-form-token-field__token-text{ color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); } .components-form-token-field__token.is-borderless .components-form-token-field__remove-token{ background:#0000; color:#757575; - padding:0; position:absolute; right:0; top:1px; @@ -1400,36 +1368,28 @@ color:#4ab866; } .components-form-token-field__token.is-borderless.is-error .components-form-token-field__token-text{ - border-radius:4px 0 0 4px; color:#cc1818; 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__remove-token.components-button,.components-form-token-field__token-text{ background:#ddd; display:inline-block; height:auto; - line-height:24px; min-width:unset; - transition:all .2s cubic-bezier(.4, 1, .4, 1); -} -@media (prefers-reduced-motion:reduce){ +} +@media not (prefers-reduced-motion){ .components-form-token-field__remove-token.components-button,.components-form-token-field__token-text{ - animation-delay:0s; - animation-duration:1ms; - transition-delay:0s; - transition-duration:0s; + transition:all .2s cubic-bezier(.4, 1, .4, 1); } } .components-form-token-field__token-text{ - border-radius:2px 0 0 2px; + border-radius:1px 0 0 1px; + line-height:24px; overflow:hidden; padding:0 0 0 8px; text-overflow:ellipsis; @@ -1437,14 +1397,12 @@ } .components-form-token-field__remove-token.components-button{ - border-radius:0 2px 2px 0; + border-radius:0 1px 1px 0; color:#1e1e1e; - cursor:pointer; line-height:10px; overflow:initial; - padding:0 2px; -} -.components-form-token-field__remove-token.components-button:hover{ +} +.components-form-token-field__remove-token.components-button:hover:not(:disabled){ color:#1e1e1e; } @@ -1457,19 +1415,16 @@ min-width:100%; overflow-y:auto; padding:0; - transition:all .15s ease-in-out; -} -@media (prefers-reduced-motion:reduce){ +} +@media not (prefers-reduced-motion){ .components-form-token-field__suggestions-list{ - transition-delay:0s; - transition-duration:0s; + transition:all .15s ease-in-out; } } .components-form-token-field__suggestion{ box-sizing:border-box; color:#1e1e1e; - cursor:pointer; display:block; font-size:13px; margin:0; @@ -1487,6 +1442,9 @@ .components-form-token-field__suggestion[aria-disabled=true].is-selected{ background-color:rgba(var(--wp-components-color-accent--rgb, var(--wp-admin-theme-color--rgb)), .04); } +.components-form-token-field__suggestion:not(.is-empty){ + cursor:pointer; +} @media (min-width:600px){ .components-guide{ @@ -1494,7 +1452,6 @@ } } .components-guide .components-modal__content{ - border-radius:2px; margin-top:0; padding:0; } @@ -1515,25 +1472,25 @@ .components-guide .components-modal__header .components-button:hover svg{ fill:#fff; } -.components-guide__container{ +.components-guide .components-guide__container{ display:flex; flex-direction:column; justify-content:space-between; margin-top:-60px; min-height:100%; } -.components-guide__page{ +.components-guide .components-guide__page{ display:flex; flex-direction:column; justify-content:center; position:relative; } @media (min-width:600px){ - .components-guide__page{ + .components-guide .components-guide__page{ min-height:300px; } } -.components-guide__footer{ +.components-guide .components-guide__footer{ align-content:center; display:flex; height:36px; @@ -1543,21 +1500,19 @@ position:relative; width:100%; } -.components-guide__page-control{ +.components-guide .components-guide__page-control{ margin:0; text-align:center; } -.components-guide__page-control li{ +.components-guide .components-guide__page-control li{ display:inline-block; margin:0; } -.components-guide__page-control .components-button{ +.components-guide .components-guide__page-control .components-button{ color:#e0e0e0; - height:30px; margin:-6px 0; - min-width:20px; -} -.components-guide__page-control li[aria-current=step] .components-button{ +} +.components-guide .components-guide__page-control li[aria-current=step] .components-button{ color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); } @@ -1587,7 +1542,7 @@ position:relative; } -.is-focusing-regions [role=region]:focus:after{ +.is-focusing-regions [role=region]:focus:after,[role=region].interface-interface-skeleton__content:focus-visible:after{ bottom:0; content:""; left:0; @@ -1597,14 +1552,15 @@ top:0; z-index:1000000; } -.is-focusing-regions .editor-post-publish-panel,.is-focusing-regions .interface-interface-skeleton__actions .editor-layout__toggle-entities-saved-states-panel,.is-focusing-regions .interface-interface-skeleton__actions .editor-layout__toggle-publish-panel,.is-focusing-regions .interface-interface-skeleton__sidebar .editor-layout__toggle-sidebar-panel,.is-focusing-regions [role=region]:focus:after,.is-focusing-regions.is-distraction-free .interface-interface-skeleton__header .edit-post-header{ - outline:4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); - outline-offset:-4px; +.is-focusing-regions .editor-post-publish-panel,.is-focusing-regions .interface-interface-skeleton__actions .editor-layout__toggle-entities-saved-states-panel,.is-focusing-regions .interface-interface-skeleton__actions .editor-layout__toggle-publish-panel,.is-focusing-regions .interface-interface-skeleton__sidebar .editor-layout__toggle-sidebar-panel,.is-focusing-regions [role=region]:focus:after,.is-focusing-regions.is-distraction-free .interface-interface-skeleton__header .edit-post-header,[role=region].interface-interface-skeleton__content:focus-visible:after{ + outline-color:var(--wp-admin-theme-color); + outline-offset:calc(((-1*var(--wp-admin-border-width-focus))/var(--wp-block-editor-iframe-zoom-out-scale, 1))*2); + outline-style:solid; + outline-width:calc((var(--wp-admin-border-width-focus)/var(--wp-block-editor-iframe-zoom-out-scale, 1))*2); } .components-menu-group+.components-menu-group{ border-top:1px solid #1e1e1e; - margin-top:8px; padding-top:8px; } .components-menu-group+.components-menu-group.has-hidden-separator{ @@ -1613,6 +1569,10 @@ padding-top:0; } +.components-menu-group:has(>div:empty){ + display:none; +} + .components-menu-group__label{ color:#757575; font-size:11px; @@ -1693,6 +1653,10 @@ } } +.components-menu-items-choice,.components-menu-items-choice.components-button{ + height:auto; + min-height:40px; +} .components-menu-items-choice svg,.components-menu-items-choice.components-button svg{ margin-right:12px; } @@ -1701,8 +1665,6 @@ } .components-modal__screen-overlay{ - animation:edit-post__fade-in-animation .2s ease-out 0s; - animation-fill-mode:forwards; background-color:#00000059; bottom:0; display:flex; @@ -1712,19 +1674,42 @@ top:0; z-index:100000; } -@media (prefers-reduced-motion:reduce){ +@keyframes __wp-base-styles-fade-in{ + 0%{ + opacity:0; + } + to{ + opacity:1; + } +} +@media not (prefers-reduced-motion){ .components-modal__screen-overlay{ - animation-delay:0s; - animation-duration:1ms; + animation:__wp-base-styles-fade-in .08s linear 0s; + animation-fill-mode:forwards; + } +} +@keyframes __wp-base-styles-fade-out{ + 0%{ + opacity:1; + } + to{ + opacity:0; + } +} +@media not (prefers-reduced-motion){ + .components-modal__screen-overlay.is-animating-out{ + animation:__wp-base-styles-fade-out .08s linear 80ms; + animation-fill-mode:forwards; } } .components-modal__frame{ - animation:components-modal__appear-animation .1s ease-out; animation-fill-mode:forwards; + animation-name:components-modal__appear-animation; + animation-timing-function:cubic-bezier(.29, 0, 0, 1); background:#fff; - border-radius:4px 4px 0 0; - box-shadow:0 .7px 1px #00000026,0 2.7px 3.8px -.2px #00000026,0 5.5px 7.8px -.3px #00000026,.1px 11.5px 16.4px -.5px #00000026; + border-radius:8px 8px 0 0; + box-shadow:0 5px 15px #00000014,0 15px 27px #00000012,0 30px 36px #0000000a,0 50px 43px #00000005; box-sizing:border-box; display:flex; margin:40px 0 0; @@ -1734,15 +1719,18 @@ .components-modal__frame *,.components-modal__frame :after,.components-modal__frame :before{ box-sizing:inherit; } -@media (prefers-reduced-motion:reduce){ +@media not (prefers-reduced-motion){ .components-modal__frame{ - animation-delay:0s; - animation-duration:1ms; + animation-duration:var(--modal-frame-animation-duration); } } +.components-modal__screen-overlay.is-animating-out .components-modal__frame{ + animation-name:components-modal__disappear-animation; + animation-timing-function:cubic-bezier(1, 0, .2, 1); +} @media (min-width:600px){ .components-modal__frame{ - border-radius:4px; + border-radius:8px; margin:auto; max-height:calc(100% - 120px); max-width:calc(100% - 32px); @@ -1786,10 +1774,22 @@ @keyframes components-modal__appear-animation{ 0%{ - transform:translateY(32px); + opacity:0; + transform:scale(.9); } to{ - transform:translateY(0); + opacity:1; + transform:scale(1); + } +} +@keyframes components-modal__disappear-animation{ + 0%{ + opacity:1; + transform:scale(1); + } + to{ + opacity:0; + transform:scale(.9); } } .components-modal__header{ @@ -1815,10 +1815,6 @@ line-height:1; margin:0; } -.components-modal__header .components-button{ - left:8px; - position:relative; -} .components-modal__content.has-scrolled-content:not(.hide-header) .components-modal__header{ border-bottom-color:#ddd; } @@ -1863,6 +1859,7 @@ align-items:center; background-color:#fff; border-left:4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); + color:#1e1e1e; display:flex; font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif; font-size:13px; @@ -1984,12 +1981,10 @@ margin-bottom:0; margin-top:0; padding:0; - transition:background .1s ease-in-out; -} -@media (prefers-reduced-motion:reduce){ +} +@media not (prefers-reduced-motion){ .components-panel__body>.components-panel__body-title{ - transition-delay:0s; - transition-duration:0s; + transition:background .1s ease-in-out; } } @@ -2012,13 +2007,11 @@ padding:16px 48px 16px 16px; position:relative; text-align:left; - transition:background .1s ease-in-out; width:100%; } -@media (prefers-reduced-motion:reduce){ +@media not (prefers-reduced-motion){ .components-panel__body-toggle.components-button{ - transition-delay:0s; - transition-duration:0s; + transition:background .1s ease-in-out; } } .components-panel__body-toggle.components-button:focus{ @@ -2032,12 +2025,10 @@ top:50%; transform:translateY(-50%); fill:currentColor; - transition:color .1s ease-in-out; -} -@media (prefers-reduced-motion:reduce){ +} +@media not (prefers-reduced-motion){ .components-panel__body-toggle.components-button .components-panel__arrow{ - transition-delay:0s; - transition-duration:0s; + transition:color .1s ease-in-out; } } body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right{ @@ -2158,12 +2149,10 @@ font-size:16px; line-height:normal; padding:6px 8px; - transition:box-shadow .1s linear; -} -@media (prefers-reduced-motion:reduce){ +} +@media not (prefers-reduced-motion){ .components-placeholder__input[type=url]{ - transition-delay:0s; - transition-duration:0s; + transition:box-shadow .1s linear; } } @media (min-width:600px){ @@ -2182,7 +2171,6 @@ } .components-placeholder__input[type=url]::-moz-placeholder{ color:#1e1e1e9e; - opacity:1; } .components-placeholder__input[type=url]:-ms-input-placeholder{ color:#1e1e1e9e; @@ -2219,7 +2207,7 @@ backdrop-filter:blur(100px); backface-visibility:hidden; background-color:initial; - border-radius:2px; + border-radius:0; box-shadow:none; color:inherit; display:flex; @@ -2235,12 +2223,10 @@ .components-placeholder.has-illustration .components-button,.components-placeholder.has-illustration .components-placeholder__instructions,.components-placeholder.has-illustration .components-placeholder__label{ opacity:0; pointer-events:none; - transition:opacity .1s linear; -} -@media (prefers-reduced-motion:reduce){ +} +@media not (prefers-reduced-motion){ .components-placeholder.has-illustration .components-button,.components-placeholder.has-illustration .components-placeholder__instructions,.components-placeholder.has-illustration .components-placeholder__label{ - transition-delay:0s; - transition-duration:0s; + transition:opacity .1s linear; } } .is-selected>.components-placeholder.has-illustration .components-button,.is-selected>.components-placeholder.has-illustration .components-placeholder__instructions,.is-selected>.components-placeholder.has-illustration .components-placeholder__label{ @@ -2298,12 +2284,13 @@ .components-popover__content{ background:#fff; - border-radius:2px; - box-shadow:0 0 0 1px #ccc,0 .7px 1px #0000001a,0 1.2px 1.7px -.2px #0000001a,0 2.3px 3.3px -.5px #0000001a; + border-radius:4px; + box-shadow:0 0 0 1px #ccc,0 2px 3px #0000000d,0 4px 5px #0000000a,0 12px 12px #00000008,0 16px 16px #00000005; box-sizing:border-box; width:min-content; } .is-alternate .components-popover__content{ + border-radius:2px; box-shadow:0 0 0 1px #1e1e1e; } .is-unstyled .components-popover__content{ @@ -2393,9 +2380,24 @@ stroke:#1e1e1e; } +.components-radio-control{ + border:0; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif; + font-size:13px; + margin:0; + padding:0; +} + +.components-radio-control__group-wrapper.has-help{ + margin-block-end:12px; +} + .components-radio-control__option{ align-items:center; - display:flex; + column-gap:8px; + display:grid; + grid-template-columns:auto 1fr; + grid-template-rows:auto minmax(0, max-content); } .components-radio-control__input[type=radio]{ @@ -2408,20 +2410,21 @@ display:inline-flex; font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif; font-size:16px; + grid-column:1; + grid-row:1; height:24px; line-height:normal; - margin:0 6px 0 0; + margin:0; max-width:24px; min-width:24px; padding:0; - transition:box-shadow .1s linear; + position:relative; transition:none; width:24px; } -@media (prefers-reduced-motion:reduce){ +@media not (prefers-reduced-motion){ .components-radio-control__input[type=radio]{ - transition-delay:0s; - transition-duration:0s; + transition:box-shadow .1s linear; } } @media (min-width:600px){ @@ -2439,43 +2442,47 @@ } .components-radio-control__input[type=radio]::-moz-placeholder{ color:#1e1e1e9e; - opacity:1; } .components-radio-control__input[type=radio]:-ms-input-placeholder{ color:#1e1e1e9e; } @media (min-width:600px){ .components-radio-control__input[type=radio]{ - height:20px; - max-width:20px; - min-width:20px; - width:20px; + height:16px; + max-width:16px; + min-width:16px; + width:16px; } } .components-radio-control__input[type=radio]:checked:before{ background-color:#fff; border:4px solid #fff; box-sizing:inherit; - height:8px; + height:12px; + left:50%; margin:0; - transform:translate(7px, 7px); - width:8px; + position:absolute; + top:50%; + transform:translate(-50%, -50%); + width:12px; } @media (min-width:600px){ .components-radio-control__input[type=radio]:checked:before{ - transform:translate(5px, 5px); + height:8px; + width:8px; } } .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 #0000; } .components-radio-control__input[type=radio]:checked{ background:var(--wp-admin-theme-color); - border-color:var(--wp-admin-theme-color); + border:none; } .components-radio-control__input[type=radio]:focus{ - box-shadow:0 0 0 2px var(--wp-components-color-background, #fff), 0 0 0 4px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); + box-shadow:0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(var(--wp-admin-border-width-focus)*2) var(--wp-admin-theme-color); + outline:2px solid #0000; + outline-offset:2px; } .components-radio-control__input[type=radio]:checked{ background:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); @@ -2488,6 +2495,23 @@ .components-radio-control__label{ cursor:pointer; + grid-column:2; + grid-row:1; + line-height:24px; +} +@media (min-width:600px){ + .components-radio-control__label{ + line-height:16px; + } +} + +.components-radio-control__option-description{ + grid-column:2; + grid-row:2; + padding-block-start:4px; +} +.components-radio-control__option-description.components-radio-control__option-description{ + margin-top:0; } .components-resizable-box__handle{ @@ -2499,6 +2523,13 @@ .components-resizable-box__container.has-show-handle .components-resizable-box__handle{ display:block; } +.components-resizable-box__handle>div{ + height:100%; + outline:none; + position:relative; + width:100%; + z-index:2; +} .components-resizable-box__container>img{ width:inherit; @@ -2507,7 +2538,7 @@ .components-resizable-box__handle:after{ background:#fff; border-radius:50%; - box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); + box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)), 0 1px 1px #00000008, 0 1px 2px #00000005, 0 3px 3px #00000005, 0 4px 4px #00000003; content:""; cursor:inherit; display:block; @@ -2521,7 +2552,7 @@ .components-resizable-box__side-handle:before{ background:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); - border-radius:2px; + border-radius:9999px; content:""; cursor:inherit; display:block; @@ -2530,14 +2561,12 @@ position:absolute; right:calc(50% - 1px); top:calc(50% - 1px); - transition:transform .1s ease-in; width:3px; - will-change:transform; -} -@media (prefers-reduced-motion:reduce){ +} +@media not (prefers-reduced-motion){ .components-resizable-box__side-handle:before{ - transition-delay:0s; - transition-duration:0s; + transition:transform .1s ease-in; + will-change:transform; } } @@ -2559,30 +2588,18 @@ top:0; } -.components-resizable-box__side-handle.components-resizable-box__handle-bottom:active: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-top:hover:before{ - animation:components-resizable-box__top-bottom-animation .1s ease-out 0s; - animation-fill-mode:forwards; -} -@media (prefers-reduced-motion:reduce){ +@media not (prefers-reduced-motion){ .components-resizable-box__side-handle.components-resizable-box__handle-bottom:active: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-top:hover:before{ - animation-delay:0s; - animation-duration:1ms; + animation:components-resizable-box__top-bottom-animation .1s ease-out 0s; + animation-fill-mode:forwards; } -} - -.components-resizable-box__side-handle.components-resizable-box__handle-left:active:before,.components-resizable-box__side-handle.components-resizable-box__handle-left:hover:before,.components-resizable-box__side-handle.components-resizable-box__handle-right:active:before,.components-resizable-box__side-handle.components-resizable-box__handle-right:hover:before{ - animation:components-resizable-box__left-right-animation .1s ease-out 0s; - animation-fill-mode:forwards; -} -@media (prefers-reduced-motion:reduce){ .components-resizable-box__side-handle.components-resizable-box__handle-left:active:before,.components-resizable-box__side-handle.components-resizable-box__handle-left:hover:before,.components-resizable-box__side-handle.components-resizable-box__handle-right:active:before,.components-resizable-box__side-handle.components-resizable-box__handle-right:hover:before{ - animation-delay:0s; - animation-duration:1ms; + animation:components-resizable-box__left-right-animation .1s ease-out 0s; + animation-fill-mode:forwards; } } @media not all and (min-resolution:0.001dpcm){ @supports (-webkit-appearance:none){ - .components-resizable-box__side-handle.components-resizable-box__handle-bottom:active:before,.components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover:before,.components-resizable-box__side-handle.components-resizable-box__handle-left:active:before,.components-resizable-box__side-handle.components-resizable-box__handle-left:hover:before,.components-resizable-box__side-handle.components-resizable-box__handle-right:active:before,.components-resizable-box__side-handle.components-resizable-box__handle-right:hover:before,.components-resizable-box__side-handle.components-resizable-box__handle-top:active:before,.components-resizable-box__side-handle.components-resizable-box__handle-top:hover:before{ animation:none; } @@ -2663,8 +2680,8 @@ -webkit-backdrop-filter:blur(16px) saturate(180%); backdrop-filter:blur(16px) saturate(180%); background:#000000d9; - border-radius:2px; - box-shadow:0 .7px 1px #0000001a,0 1.2px 1.7px -.2px #0000001a,0 2.3px 3.3px -.5px #0000001a; + border-radius:4px; + box-shadow:0 1px 2px #0000000d,0 2px 3px #0000000a,0 6px 6px #00000008,0 8px 8px #00000005; box-sizing:border-box; color:#fff; cursor:pointer; @@ -2677,7 +2694,6 @@ } @media (min-width:600px){ .components-snackbar{ - width:-moz-fit-content; width:fit-content; } } @@ -2704,22 +2720,14 @@ .components-snackbar__action.components-button{ color:#fff; flex-shrink:0; - height:auto; - line-height:1.4; margin-left:32px; - padding:0; -} -.components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary){ - background-color:initial; - text-decoration:underline; -} -.components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary):focus{ +} +.components-snackbar__action.components-button:focus{ box-shadow:none; - color:#fff; outline:1px dotted #fff; } -.components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover{ - color:#fff; +.components-snackbar__action.components-button:hover{ + color:currentColor; text-decoration:none; } @@ -2759,7 +2767,7 @@ box-shadow:none; cursor:pointer; font-weight:500; - height:48px; + height:48px !important; margin-left:0; padding:3px 16px; position:relative; @@ -2779,12 +2787,10 @@ pointer-events:none; position:absolute; right:0; - transition:all .1s linear; -} -@media (prefers-reduced-motion:reduce){ +} +@media not (prefers-reduced-motion){ .components-tab-panel__tabs-item:after{ - transition-delay:0s; - transition-duration:0s; + transition:all .1s linear; } } .components-tab-panel__tabs-item.is-active:after{ @@ -2802,12 +2808,10 @@ position:absolute; right:12px; top:12px; - transition:all .1s linear; -} -@media (prefers-reduced-motion:reduce){ +} +@media not (prefers-reduced-motion){ .components-tab-panel__tabs-item:before{ - transition-delay:0s; - transition-duration:0s; + transition:all .1s linear; } } .components-tab-panel__tabs-item:focus-visible:before{ @@ -2820,7 +2824,6 @@ outline:none; } .components-tab-panel__tab-content:focus-visible{ - border-radius:2px; box-shadow:0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); outline:2px solid #0000; outline-offset:0; @@ -2836,13 +2839,11 @@ line-height:normal; margin:0; padding:6px 8px; - transition:box-shadow .1s linear; width:100%; } -@media (prefers-reduced-motion:reduce){ +@media not (prefers-reduced-motion){ .components-text-control__input,.components-text-control__input[type=color],.components-text-control__input[type=date],.components-text-control__input[type=datetime-local],.components-text-control__input[type=datetime],.components-text-control__input[type=email],.components-text-control__input[type=month],.components-text-control__input[type=number],.components-text-control__input[type=password],.components-text-control__input[type=tel],.components-text-control__input[type=text],.components-text-control__input[type=time],.components-text-control__input[type=url],.components-text-control__input[type=week]{ - transition-delay:0s; - transition-duration:0s; + transition:box-shadow .1s linear; } } @media (min-width:600px){ @@ -2861,13 +2862,18 @@ } .components-text-control__input::-moz-placeholder,.components-text-control__input[type=color]::-moz-placeholder,.components-text-control__input[type=date]::-moz-placeholder,.components-text-control__input[type=datetime-local]::-moz-placeholder,.components-text-control__input[type=datetime]::-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,.components-text-control__input[type=password]::-moz-placeholder,.components-text-control__input[type=tel]::-moz-placeholder,.components-text-control__input[type=text]::-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{ color:#1e1e1e9e; - opacity:1; } .components-text-control__input:-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-local]:-ms-input-placeholder,.components-text-control__input[type=datetime]:-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,.components-text-control__input[type=password]:-ms-input-placeholder,.components-text-control__input[type=tel]:-ms-input-placeholder,.components-text-control__input[type=text]:-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{ color:#1e1e1e9e; } .components-text-control__input.is-next-40px-default-size,.components-text-control__input[type=color].is-next-40px-default-size,.components-text-control__input[type=date].is-next-40px-default-size,.components-text-control__input[type=datetime-local].is-next-40px-default-size,.components-text-control__input[type=datetime].is-next-40px-default-size,.components-text-control__input[type=email].is-next-40px-default-size,.components-text-control__input[type=month].is-next-40px-default-size,.components-text-control__input[type=number].is-next-40px-default-size,.components-text-control__input[type=password].is-next-40px-default-size,.components-text-control__input[type=tel].is-next-40px-default-size,.components-text-control__input[type=text].is-next-40px-default-size,.components-text-control__input[type=time].is-next-40px-default-size,.components-text-control__input[type=url].is-next-40px-default-size,.components-text-control__input[type=week].is-next-40px-default-size{ height:40px; + padding-left:12px; + padding-right:12px; +} + +.components-text-control__input[type=email],.components-text-control__input[type=url]{ + direction:ltr; } .components-tip{ @@ -2884,6 +2890,18 @@ margin:0; } +.components-toggle-control__label{ + line-height:16px; +} +.components-toggle-control__label:not(.is-disabled){ + cursor:pointer; +} + +.components-toggle-control__help{ + display:inline-block; + margin-inline-start:40px; +} + .components-accessible-toolbar{ border:1px solid #1e1e1e; border-radius:2px; @@ -2900,6 +2918,11 @@ border-right:none; } +.components-accessible-toolbar[aria-orientation=vertical],.components-toolbar[aria-orientation=vertical]{ + align-items:center; + display:flex; + flex-direction:column; +} .components-accessible-toolbar .components-button,.components-toolbar .components-button{ height:48px; padding-left:16px; @@ -2912,8 +2935,6 @@ outline:none; } .components-accessible-toolbar .components-button:before,.components-toolbar .components-button:before{ - animation:components-button__appear-animation .1s ease; - animation-fill-mode:forwards; border-radius:2px; content:""; display:block; @@ -2923,10 +2944,10 @@ right:8px; z-index:-1; } -@media (prefers-reduced-motion:reduce){ +@media not (prefers-reduced-motion){ .components-accessible-toolbar .components-button:before,.components-toolbar .components-button:before{ - animation-delay:0s; - animation-duration:1ms; + animation:components-button__appear-animation .1s ease; + animation-fill-mode:forwards; } } .components-accessible-toolbar .components-button svg,.components-toolbar .components-button svg{ @@ -3045,6 +3066,7 @@ .components-tooltip{ background:#000; border-radius:2px; + box-shadow:0 1px 2px #0000000d,0 2px 3px #0000000a,0 6px 6px #00000008,0 8px 8px #00000005; color:#f0f0f0; font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif; font-size:12px;