diff -r 7b1b88e27a20 -r 48c4eec2b7e6 wp/wp-admin/css/customize-controls-rtl.css --- a/wp/wp-admin/css/customize-controls-rtl.css Thu Sep 29 08:06:27 2022 +0200 +++ b/wp/wp-admin/css/customize-controls-rtl.css Fri Sep 05 18:40:08 2025 +0200 @@ -473,7 +473,6 @@ height: 20px; cursor: pointer; box-shadow: none; - -webkit-appearance: none; background: transparent; color: #50575e; border: none; @@ -1084,14 +1083,24 @@ float: right; } -#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; } @@ -1101,6 +1110,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; @@ -1568,10 +1585,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 { @@ -1606,7 +1622,6 @@ font-family: Consolas, Monaco, monospace; font-size: 12px; padding: 6px 8px; - -o-tab-size: 2; tab-size: 2; } .customize-control-code_editor textarea, @@ -1819,11 +1834,6 @@ bottom: 0; } -.themes-filter-bar .feature-filter-toggle { - float: left; - margin: 3px 25px 3px 0; -} - .themes-filter-bar .feature-filter-toggle:before { content: "\f111"; margin: 0 0 0 5px; @@ -1884,12 +1894,6 @@ animation: .6s themes-fade-in 1; } -.control-panel-themes .filter-themes-count { - position: relative; - float: left; - line-height: 2.6; -} - .control-panel-themes .filter-themes-count .themes-displayed { font-weight: 600; color: #50575e; @@ -2101,6 +2105,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 { @@ -2113,6 +2139,9 @@ .themes-filter-bar .themes-filter-container { margin: 0; padding: 0; + display: flex; + align-items: center; + gap: 10px; } .themes-filter-bar .wp-filter-search { @@ -2121,11 +2150,10 @@ max-width: 100%; width: 40%; min-width: 300px; - position: absolute; - top: 6px; - right: 25px; height: 32px; margin: 1px 0; + top: 0; + right: 0; } /* Unstick the filter bar on short windows/screens. This breakpoint is based on the @@ -2159,18 +2187,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; } @@ -2320,7 +2361,7 @@ .wp-customizer .theme-overlay .theme-actions { text-align: left; /* 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; } @@ -2329,13 +2370,6 @@ margin-right: 8px; } -.control-panel-themes .theme-actions .delete-theme { - right: 15px; /* these override themes.css on mobile */ - left: 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. */ } @@ -2591,7 +2625,7 @@ } #available-widgets-list { - top: 60px; + top: 82px; position: absolute; overflow: auto; bottom: 0; @@ -2635,7 +2669,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 */ right: 16px; width: 30px; height: 30px; @@ -2645,9 +2679,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 */ left: 16px; width: 30px; height: 30px; @@ -2689,9 +2723,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, @@ -2706,8 +2740,8 @@ .themes-filter-bar .search-icon { position: absolute; - top: 7px; - right: 26px; + top: 2px; + right: 2px; z-index: 1; color: #646970; height: 30px; @@ -2825,8 +2859,8 @@ margin-top: 12px; } - .wp-core-ui .themes-filter-bar .feature-filter-toggle { - margin: 3px 25px 3px 0; + .customize-preview-header.themes-filter-bar .search-icon { + top: 6px; } } @@ -2963,22 +2997,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; + left: 16px; } .reorder, .reordering .reorder-done { padding: 8px; } - - .wp-core-ui .themes-filter-bar .feature-filter-toggle { - margin: 0; - } } @media screen and (max-width: 600px) {