--- a/wp/wp-admin/css/customize-controls.css Thu Sep 29 08:06:27 2022 +0200
+++ b/wp/wp-admin/css/customize-controls.css Fri Sep 05 18:40:08 2025 +0200
@@ -472,7 +472,6 @@
height: 20px;
cursor: pointer;
box-shadow: none;
- -webkit-appearance: none;
background: transparent;
color: #50575e;
border: none;
@@ -1083,14 +1082,24 @@
float: left;
}
-#available-menu-items .accordion-section-content .new-content-item,
-.customize-control-dropdown-pages .new-content-item {
+#available-menu-items .accordion-section-content .new-content-item-wrapper,
+.customize-control-dropdown-pages .new-content-item-wrapper {
width: calc(100% - 30px);
padding: 8px 15px;
position: absolute;
bottom: 0;
z-index: 10;
background: #f0f0f1;
+}
+
+.customize-control-dropdown-pages .new-content-item-wrapper {
+ width: 100%;
+ padding: 0;
+ position: static;
+}
+
+#available-menu-items .accordion-section-content .new-content-item,
+.customize-control-dropdown-pages .new-content-item {
display: flex;
}
@@ -1100,6 +1109,14 @@
position: relative;
}
+.customize-control-dropdown-pages .new-content-item-wrapper .new-content-item {
+ padding: 0;
+}
+
+.customize-control-dropdown-pages .new-content-item-wrapper .new-content-item label {
+ line-height: 1.6;
+}
+
#available-menu-items .new-content-item .create-item-input,
.customize-control-dropdown-pages .new-content-item .create-item-input {
flex-grow: 10;
@@ -1567,10 +1584,9 @@
}
.customize-control-header .choice:focus {
- outline: none;
- box-shadow:
- 0 0 0 1px #4f94d4,
- 0 0 3px 1px rgba(79, 148, 212, 0.8);
+ box-shadow: 0 0 0 2px #2271b1;
+ /* Only visible in Windows High Contrast mode */
+ outline: 2px solid transparent;
}
.customize-control-header .uploaded div:last-child > .choice {
@@ -1605,7 +1621,6 @@
font-family: Consolas, Monaco, monospace;
font-size: 12px;
padding: 6px 8px;
- -o-tab-size: 2;
tab-size: 2;
}
.customize-control-code_editor textarea,
@@ -1818,11 +1833,6 @@
bottom: 0;
}
-.themes-filter-bar .feature-filter-toggle {
- float: right;
- margin: 3px 0 3px 25px;
-}
-
.themes-filter-bar .feature-filter-toggle:before {
content: "\f111";
margin: 0 5px 0 0;
@@ -1883,12 +1893,6 @@
animation: .6s themes-fade-in 1;
}
-.control-panel-themes .filter-themes-count {
- position: relative;
- float: right;
- line-height: 2.6;
-}
-
.control-panel-themes .filter-themes-count .themes-displayed {
font-weight: 600;
color: #50575e;
@@ -2100,6 +2104,28 @@
box-sizing: border-box;
border-bottom: 1px solid #dcdcde;
}
+.customize-preview-header.themes-filter-bar,
+.customize-preview-header.themes-filter-bar .search-form {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ flex-wrap: wrap;
+}
+
+.customize-preview-header.themes-filter-bar .search-form-input {
+ position: relative;
+}
+
+.customize-preview-header .filter-themes-wrapper {
+ display: grid;
+ align-items: center;
+ gap: 10px;
+ grid-template-columns: auto 1fr;
+}
+
+.customize-preview-header .filter-themes-wrapper .filter-themes-count {
+ justify-self: end;
+}
@media screen and (min-width: 1670px) {
.customize-preview-header.themes-filter-bar {
@@ -2112,6 +2138,9 @@
.themes-filter-bar .themes-filter-container {
margin: 0;
padding: 0;
+ display: flex;
+ align-items: center;
+ gap: 10px;
}
.themes-filter-bar .wp-filter-search {
@@ -2120,11 +2149,10 @@
max-width: 100%;
width: 40%;
min-width: 300px;
- position: absolute;
- top: 6px;
- left: 25px;
height: 32px;
margin: 1px 0;
+ top: 0;
+ left: 0;
}
/* Unstick the filter bar on short windows/screens. This breakpoint is based on the
@@ -2158,18 +2186,31 @@
}
}
-@media screen and (max-width: 900px) {
+@media screen and (max-width: 960px) {
.customize-preview-header.themes-filter-bar {
- height: 86px;
- padding-top: 46px;
+ height: 96px;
}
-
+}
+
+@media screen and (max-width: 900px) {
.themes-filter-bar .wp-filter-search {
- width: calc(100% - 50px);
+ width: 100%;
margin: 0;
min-width: 200px;
}
+ .customize-preview-header.themes-filter-bar,
+ .customize-preview-header.themes-filter-bar .search-form
+ .themes-filter-bar .themes-filter-container {
+ display: grid;
+ gap: 4px;
+ }
+
+ .customize-preview-header.themes-filter-bar .search-form-input {
+ display: flex;
+ flex-grow: 1;
+ }
+
.filter-drawer {
top: 86px;
}
@@ -2319,7 +2360,7 @@
.wp-customizer .theme-overlay .theme-actions {
text-align: right; /* Because there're only one or two actions, match the UI pattern of media modals and right-align the action. */
- padding: 10px 25px;
+ padding: 10px 25px 5px;
background: #f0f0f1;
border-top: 1px solid #dcdcde;
}
@@ -2328,13 +2369,6 @@
margin-left: 8px;
}
-.control-panel-themes .theme-actions .delete-theme {
- left: 15px; /* these override themes.css on mobile */
- right: auto;
- bottom: auto;
- position: absolute;
-}
-
.modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content {
overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */
}
@@ -2590,7 +2624,7 @@
}
#available-widgets-list {
- top: 60px;
+ top: 82px;
position: absolute;
overflow: auto;
bottom: 0;
@@ -2634,7 +2668,7 @@
#available-widgets-filter .search-icon {
display: block;
position: absolute;
- top: 15px; /* 13 container padding +1 input margin +1 input border */
+ bottom: 15px; /* 13 container padding +1 input margin +1 input border */
left: 16px;
width: 30px;
height: 30px;
@@ -2644,9 +2678,9 @@
}
#available-widgets-filter .clear-results,
-#available-menu-items-search .clear-results {
+#available-menu-items-search .accordion-section-title .clear-results {
position: absolute;
- top: 15px; /* 13 container padding +1 input margin +1 input border */
+ top: 36px; /* 13 container padding +1 input margin +1 input border */
right: 16px;
width: 30px;
height: 30px;
@@ -2688,9 +2722,9 @@
#available-widgets-filter .clear-results:focus,
#available-menu-items-search .clear-results:focus {
- box-shadow:
- 0 0 0 1px #4f94d4,
- 0 0 2px 1px rgba(79, 148, 212, 0.8);
+ box-shadow: 0 0 0 2px #2271b1;
+ /* Only visible in Windows High Contrast mode */
+ outline: 2px solid transparent;
}
#available-menu-items-search .search-icon:after,
@@ -2705,8 +2739,8 @@
.themes-filter-bar .search-icon {
position: absolute;
- top: 7px;
- left: 26px;
+ top: 2px;
+ left: 2px;
z-index: 1;
color: #646970;
height: 30px;
@@ -2824,8 +2858,8 @@
margin-top: 12px;
}
- .wp-core-ui .themes-filter-bar .feature-filter-toggle {
- margin: 3px 0 3px 25px;
+ .customize-preview-header.themes-filter-bar .search-icon {
+ top: 6px;
}
}
@@ -2962,22 +2996,18 @@
}
#available-widgets-list {
- top: 130px;
+ top: 152px;
}
- #available-menu-items-search .clear-results,
- #available-menu-items-search .search-icon {
- top: 85px; /* 70 section title height + 13 container padding +1 input margin +1 input border */
+ #available-menu-items-search .clear-results {
+ top: 36px;
+ right: 16px;
}
.reorder,
.reordering .reorder-done {
padding: 8px;
}
-
- .wp-core-ui .themes-filter-bar .feature-filter-toggle {
- margin: 0;
- }
}
@media screen and (max-width: 600px) {