diff -r 7b1b88e27a20 -r 48c4eec2b7e6 wp/wp-admin/css/customize-controls.css --- 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) {