summaryrefslogtreecommitdiffstats
path: root/wp-includes/css/dist/components/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'wp-includes/css/dist/components/style.css')
-rw-r--r--wp-includes/css/dist/components/style.css243
1 files changed, 132 insertions, 111 deletions
diff --git a/wp-includes/css/dist/components/style.css b/wp-includes/css/dist/components/style.css
index 9f7f0ca..ab0e25b 100644
--- a/wp-includes/css/dist/components/style.css
+++ b/wp-includes/css/dist/components/style.css
@@ -83,8 +83,8 @@
}
}
.components-autocomplete__popover .components-popover__content{
- min-width:220px;
- padding:16px;
+ min-width:200px;
+ padding:8px;
}
.components-autocomplete__result.components-button{
@@ -94,8 +94,13 @@
text-align:left;
width:100%;
}
-.components-autocomplete__result.components-button.is-selected{
- box-shadow:0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+.components-autocomplete__result.components-button: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 #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-button-group{
@@ -190,7 +195,7 @@
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{
- box-shadow:0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 3px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+ 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));
}
.components-button.is-primary.is-busy,.components-button.is-primary.is-busy:disabled,.components-button.is-primary.is-busy[aria-disabled=true]{
background-image:linear-gradient(-45deg, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 33%, var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6)) 33%, var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6)) 70%, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 70%);
@@ -371,9 +376,21 @@ p+.components-button.is-tertiary{
background-position:200px 0;
}
}
+.components-checkbox-control{
+ --checkbox-input-size:24px;
+}
+@media (min-width:600px){
+ .components-checkbox-control{
+ --checkbox-input-size:20px;
+ }
+}
+
+.components-checkbox-control__label{
+ line-height:var(--checkbox-input-size);
+}
+
.components-checkbox-control__input[type=checkbox]{
- -webkit-appearance:none;
- appearance:none;
+ appearance:none;
background:#fff;
border:1px solid #1e1e1e;
border-radius:2px;
@@ -384,7 +401,7 @@ p+.components-button.is-tertiary{
display:inline-block;
font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
font-size:16px;
- height:24px;
+ height:var(--checkbox-input-size);
line-height:normal;
line-height:0;
margin:0 4px 0 0;
@@ -396,7 +413,7 @@ p+.components-button.is-tertiary{
transition:none;
transition:border-color .1s ease-in-out;
vertical-align:top;
- width:24px;
+ width:var(--checkbox-input-size);
}
@media (min-width:600px){
.components-checkbox-control__input[type=checkbox]{
@@ -464,12 +481,6 @@ p+.components-button.is-tertiary{
cursor:default;
opacity:1;
}
-@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-delay:0s;
@@ -493,39 +504,40 @@ p+.components-button.is-tertiary{
}
.components-checkbox-control__input-container{
+ aspect-ratio:1;
display:inline-block;
- height:24px;
+ flex-shrink:0;
margin-right:12px;
position:relative;
vertical-align:middle;
- width:24px;
-}
-@media (min-width:600px){
- .components-checkbox-control__input-container{
- height:20px;
- width:20px;
- }
+ width:var(--checkbox-input-size);
}
svg.components-checkbox-control__checked,svg.components-checkbox-control__indeterminate{
+ --checkmark-size:var(--checkbox-input-size);
fill:#fff;
cursor:pointer;
- height:24px;
- left:0;
+ height:var(--checkmark-size);
+ left:50%;
pointer-events:none;
position:absolute;
- top:0;
+ top:50%;
+ transform:translate(-50%, -50%);
-webkit-user-select:none;
user-select:none;
- width:24px;
+ width:var(--checkmark-size);
}
@media (min-width:600px){
svg.components-checkbox-control__checked,svg.components-checkbox-control__indeterminate{
- left:-2px;
- top:-2px;
+ --checkmark-size:calc(var(--checkbox-input-size) + 4px);
}
}
+.components-checkbox-control__help{
+ display:inline-block;
+ margin-inline-start:calc(var(--checkbox-input-size) + 12px);
+}
+
.components-circular-option-picker{
display:inline-block;
min-width:188px;
@@ -920,6 +932,12 @@ input.components-combobox-control__input[type=text]:focus{
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;
@@ -1063,6 +1081,24 @@ body.is-dragging-components-draggable{
.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{
+ border-color:#1e1e1e;
+}
.components-dropdown-menu__toggle{
vertical-align:top;
@@ -1113,24 +1149,6 @@ body.is-dragging-components-draggable{
padding-right:8px;
text-align:left;
}
-.components-dropdown-menu__menu .components-menu-group{
- margin:0 -8px;
- padding:8px;
-}
-.components-dropdown-menu__menu .components-menu-group:first-child{
- margin-top:-8px;
-}
-.components-dropdown-menu__menu .components-menu-group:last-child{
- margin-bottom:-8px;
-}
-.components-dropdown-menu__menu .components-menu-group+.components-menu-group{
- border-top:1px solid #ccc;
- margin-top:0;
- padding:8px;
-}
-.is-alternate .components-dropdown-menu__menu .components-menu-group+.components-menu-group{
- border-color:#1e1e1e;
-}
.components-duotone-picker__color-indicator:before{
background:#0000;
@@ -1159,6 +1177,19 @@ body.is-dragging-components-draggable{
margin:2px;
}
+.components-external-link{
+ text-decoration:none;
+}
+
+.components-external-link__contents{
+ text-decoration:underline;
+}
+
+.components-external-link__icon{
+ font-weight:400;
+ margin-left:.5ch;
+}
+
.components-form-toggle{
display:inline-block;
position:relative;
@@ -1449,6 +1480,13 @@ body.is-dragging-components-draggable{
background:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
color:#fff;
}
+.components-form-token-field__suggestion[aria-disabled=true]{
+ color:#949494;
+ pointer-events:none;
+}
+.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);
+}
@media (min-width:600px){
.components-guide{
@@ -1559,7 +1597,7 @@ body.is-dragging-components-draggable{
top:0;
z-index:1000000;
}
-.is-focusing-regions .editor-post-publish-panel,.is-focusing-regions .interface-interface-skeleton__actions .edit-post-layout__toggle-entities-saved-states-panel,.is-focusing-regions .interface-interface-skeleton__actions .edit-post-layout__toggle-publish-panel,.is-focusing-regions .interface-interface-skeleton__sidebar .edit-post-layout__toggle-sidebar-panel,.is-focusing-regions [role=region]:focus:after,.is-focusing-regions.is-distraction-free .interface-interface-skeleton__header .edit-post-header{
+.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;
}
@@ -1687,11 +1725,15 @@ body.is-dragging-components-draggable{
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;
+ box-sizing:border-box;
display:flex;
margin:40px 0 0;
overflow:hidden;
width:100%;
}
+.components-modal__frame *,.components-modal__frame :after,.components-modal__frame :before{
+ box-sizing:inherit;
+}
@media (prefers-reduced-motion:reduce){
.components-modal__frame{
animation-delay:0s;
@@ -1921,6 +1963,7 @@ body.is-dragging-components-draggable{
border-bottom:1px solid #ddd;
box-sizing:initial;
display:flex;
+ flex-shrink:0;
height:47px;
justify-content:space-between;
padding:0 16px;
@@ -2042,11 +2085,15 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
}
.components-placeholder.components-placeholder{
+ align-items:flex-start;
box-sizing:border-box;
color:#1e1e1e;
+ display:flex;
+ flex-direction:column;
font-size:13px;
+ gap:16px;
margin:0;
- padding:1em;
+ padding:24px;
position:relative;
text-align:left;
width:100%;
@@ -2057,14 +2104,6 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
box-shadow:inset 0 0 0 1px #1e1e1e;
outline:1px solid #0000;
}
-@supports (position:sticky){
- .components-placeholder.components-placeholder{
- align-items:flex-start;
- display:flex;
- flex-direction:column;
- justify-content:top;
- }
-}
.components-placeholder__error,.components-placeholder__fieldset,.components-placeholder__instructions,.components-placeholder__label{
font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
@@ -2079,10 +2118,9 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
align-items:center;
display:flex;
font-weight:600;
- margin-bottom:16px;
}
.components-placeholder__label .block-editor-block-icon,.components-placeholder__label .dashicon,.components-placeholder__label>svg{
- margin-right:12px;
+ margin-right:4px;
fill:currentColor;
}
@media (forced-colors:active){
@@ -2098,6 +2136,8 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
display:flex;
flex-direction:row;
flex-wrap:wrap;
+ gap:16px;
+ justify-content:flex-start;
width:100%;
}
.components-placeholder__fieldset form p,.components-placeholder__fieldset p{
@@ -2117,7 +2157,6 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
font-size:16px;
line-height:normal;
- margin:0 8px 0 0;
padding:6px 8px;
transition:box-shadow .1s linear;
}
@@ -2149,24 +2188,11 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
color:#1e1e1e9e;
}
-.components-placeholder__instructions{
- margin-bottom:1em;
-}
-
.components-placeholder__error{
- margin-top:1em;
+ gap:8px;
width:100%;
}
-.components-placeholder__fieldset .components-button{
- margin-bottom:12px;
- margin-right: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;
@@ -2175,21 +2201,18 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
margin-right:0;
}
-.components-placeholder.is-large .components-placeholder__label{
- font-size:18pt;
- font-weight:400;
-}
.components-placeholder.is-medium .components-placeholder__instructions,.components-placeholder.is-small .components-placeholder__instructions{
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;
}
-.components-placeholder.is-medium .components-placeholder__fieldset .components-button,.components-placeholder.is-small .components-placeholder__fieldset .components-button{
- margin-right:auto;
+.components-placeholder.is-medium .components-button,.components-placeholder.is-medium .components-placeholder__fieldset>*,.components-placeholder.is-small .components-button,.components-placeholder.is-small .components-placeholder__fieldset>*{
+ justify-content:center;
+ width:100%;
}
-.components-placeholder.is-small .components-button{
- padding:0 8px 2px;
+.components-placeholder.is-small{
+ padding:16px;
}
.components-placeholder.has-illustration{
-webkit-backdrop-filter:blur(100px);
@@ -2200,7 +2223,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
box-shadow:none;
color:inherit;
display:flex;
- overflow:auto;
+ overflow:hidden;
}
.is-dark-theme .components-placeholder.has-illustration{
background-color:#0000001a;
@@ -2208,7 +2231,6 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
.components-placeholder.has-illustration .components-placeholder__fieldset{
margin-left:0;
margin-right:0;
- width:auto;
}
.components-placeholder.has-illustration .components-button,.components-placeholder.has-illustration .components-placeholder__instructions,.components-placeholder.has-illustration .components-placeholder__label{
opacity:0;
@@ -2236,6 +2258,9 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
right:0;
top:0;
}
+.is-selected .components-placeholder.has-illustration{
+ overflow:auto;
+}
.components-placeholder__preview{
display:flex;
@@ -2368,21 +2393,13 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
stroke:#1e1e1e;
}
-.components-popover-pointer-events-trap{
- background-color:initial;
- inset:0;
- position:fixed;
- z-index:1000000;
-}
-
.components-radio-control__option{
align-items:center;
display:flex;
}
.components-radio-control__input[type=radio]{
- -webkit-appearance:none;
- appearance:none;
+ appearance:none;
border:1px solid #1e1e1e;
border-radius:2px;
border-radius:50%;
@@ -2394,6 +2411,8 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
height:24px;
line-height:normal;
margin:0 6px 0 0;
+ max-width:24px;
+ min-width:24px;
padding:0;
transition:box-shadow .1s linear;
transition:none;
@@ -2428,6 +2447,8 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
@media (min-width:600px){
.components-radio-control__input[type=radio]{
height:20px;
+ max-width:20px;
+ min-width:20px;
width:20px;
}
}
@@ -2794,6 +2815,17 @@ body.lockscroll,html.lockscroll{
outline:2px solid #0000;
}
+.components-tab-panel__tab-content:focus{
+ box-shadow:none;
+ 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;
+}
+
.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]{
border:1px solid #949494;
border-radius:2px;
@@ -2802,6 +2834,7 @@ body.lockscroll,html.lockscroll{
font-size:16px;
height:32px;
line-height:normal;
+ margin:0;
padding:6px 8px;
transition:box-shadow .1s linear;
width:100%;
@@ -2908,22 +2941,13 @@ body.lockscroll,html.lockscroll{
background:#1e1e1e;
}
.components-accessible-toolbar .components-button:focus:before,.components-toolbar .components-button:focus:before{
- 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));
+ 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-accessible-toolbar .components-button.has-icon.has-icon,.components-toolbar .components-button.has-icon.has-icon{
min-width:48px;
- padding-left:12px;
- padding-right:12px;
-}
-.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;
+ padding-left:8px;
+ padding-right:8px;
}
@keyframes components-button__appear-animation{
@@ -2970,6 +2994,7 @@ body.lockscroll,html.lockscroll{
margin:0;
}
.components-toolbar-group .components-button.components-button,.components-toolbar-group .components-button.has-icon.has-icon{
+ justify-content:center;
min-width:36px;
padding-left:6px;
padding-right:6px;
@@ -2997,14 +3022,9 @@ body.lockscroll,html.lockscroll{
}
div.components-toolbar>div{
- display:block;
+ display:flex;
margin:0;
}
-@supports (position:sticky){
- div.components-toolbar>div{
- display:flex;
- }
-}
div.components-toolbar>div+div.has-left-divider{
margin-left:6px;
overflow:visible;
@@ -3026,6 +3046,7 @@ div.components-toolbar>div+div.has-left-divider:before{
background:#000;
border-radius:2px;
color:#f0f0f0;
+ font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
font-size:12px;
line-height:1.4;
padding:4px 8px;
generated by cgit v1.2.3 (git 2.39.1) at 2024-09-20 00:56:38 +0000