diff --git src/wp-admin/css/customize-controls.css src/wp-admin/css/customize-controls.css
index 8c5cc10..23806c4 100644
|
|
p.customize-section-description { |
2020 | 2020 | display: none; /* Hide "installed" notice on installed themes tab. */ |
2021 | 2021 | } |
2022 | 2022 | |
2023 | | .control-panel-themes .theme-browser .theme .theme-actions .button-primary { |
2024 | | margin: 0 0 0 8px; |
2025 | | } |
2026 | | |
2027 | 2023 | .customize-control-theme .theme { |
2028 | 2024 | width: 100%; |
2029 | 2025 | margin: 0; |
… |
… |
p.customize-section-description { |
2094 | 2090 | font-size: 15px; |
2095 | 2091 | } |
2096 | 2092 | |
| 2093 | .theme-id-container { |
| 2094 | position: relative; |
| 2095 | } |
| 2096 | |
| 2097 | .theme-browser .theme.active .theme-actions, |
| 2098 | .wp-customizer .theme-browser .theme .theme-actions { |
| 2099 | position: absolute; |
| 2100 | top: 50%; |
| 2101 | transform: translateY(-50%); |
| 2102 | right: 0; |
| 2103 | padding: 0 15px; |
| 2104 | } |
| 2105 | |
2097 | 2106 | #customize-controls .theme-overlay .theme-name { |
2098 | 2107 | font-size: 32px; |
2099 | 2108 | } |
… |
… |
p.customize-section-description { |
2118 | 2127 | |
2119 | 2128 | .themes-filter-bar .wp-filter-search { |
2120 | 2129 | line-height: 25px; |
2121 | | padding: 3px 5px; |
| 2130 | padding: 6px 10px 6px 30px; |
2122 | 2131 | max-width: 100%; |
2123 | 2132 | width: 40%; |
2124 | 2133 | min-width: 300px; |
2125 | 2134 | position: absolute; |
2126 | 2135 | top: 6px; |
2127 | 2136 | left: 25px; |
| 2137 | height: 32px; |
| 2138 | margin: 1px 0; |
2128 | 2139 | } |
2129 | 2140 | |
2130 | 2141 | /* Unstick the filter bar on short windows/screens. This breakpoint is based on the |
… |
… |
p.customize-section-description { |
2233 | 2244 | .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:before { |
2234 | 2245 | left: 0; |
2235 | 2246 | top: 0; |
2236 | | height: 42px; |
| 2247 | height: 46px; |
2237 | 2248 | width: 26px; |
2238 | 2249 | display: block; |
2239 | 2250 | line-height: 46px; |
… |
… |
p.customize-section-description { |
2253 | 2264 | .showing-themes #customize-header-actions { |
2254 | 2265 | display: none; |
2255 | 2266 | } |
| 2267 | |
| 2268 | #customize-controls { |
| 2269 | width: 100%; |
| 2270 | } |
2256 | 2271 | } |
2257 | 2272 | |
2258 | 2273 | /* Details View */ |
… |
… |
p.customize-section-description { |
2363 | 2378 | top: 0; |
2364 | 2379 | bottom: 0; |
2365 | 2380 | } |
| 2381 | |
| 2382 | .wp-customizer .theme-browser .themes { |
| 2383 | padding-right: 25px; |
| 2384 | } |
2366 | 2385 | } |
2367 | 2386 | |
2368 | 2387 | /* Handle cheaters. */ |
… |
… |
body.adding-widget .add-new-widget:before, |
2677 | 2696 | } |
2678 | 2697 | |
2679 | 2698 | #available-menu-items-search .search-icon:after, |
2680 | | #available-widgets-filter .search-icon:after { |
| 2699 | .themes-filter-bar .search-icon:after { |
2681 | 2700 | content: "\f179"; |
2682 | 2701 | font: normal 20px/1 dashicons; |
2683 | 2702 | vertical-align: middle; |
… |
… |
body.adding-widget .add-new-widget:before, |
2685 | 2704 | -moz-osx-font-smoothing: grayscale; |
2686 | 2705 | } |
2687 | 2706 | |
| 2707 | .themes-filter-bar .search-icon { |
| 2708 | position: absolute; |
| 2709 | top: 7px; |
| 2710 | left: 26px; |
| 2711 | z-index: 1; |
| 2712 | color: #72777c; |
| 2713 | height: 30px; |
| 2714 | width: 30px; |
| 2715 | line-height: 2; |
| 2716 | text-align: center; |
| 2717 | } |
| 2718 | |
2688 | 2719 | .no-widgets-found-message { |
2689 | 2720 | display: none; |
2690 | 2721 | margin: 0; |
… |
… |
body.adding-widget .add-new-widget:before, |
2797 | 2828 | .media-widget-control .media-widget-buttons .button.select-media { |
2798 | 2829 | margin-top: 12px; |
2799 | 2830 | } |
| 2831 | |
| 2832 | .wp-core-ui .themes-filter-bar .feature-filter-toggle { |
| 2833 | margin: 3px 0 3px 25px; |
| 2834 | } |
2800 | 2835 | } |
2801 | 2836 | |
2802 | 2837 | @media screen and ( max-width: 1200px ) { |
… |
… |
body.adding-widget .add-new-widget:before, |
2808 | 2843 | } |
2809 | 2844 | |
2810 | 2845 | @media screen and ( max-width: 640px ) { |
2811 | | #customize-controls { |
2812 | | width: 100%; |
2813 | | } |
2814 | 2846 | |
2815 | 2847 | .wp-full-overlay.expanded, |
2816 | 2848 | .outer-section-open .wp-full-overlay.expanded { |
… |
… |
body.adding-widget .add-new-widget:before, |
2846 | 2878 | } |
2847 | 2879 | |
2848 | 2880 | #customize-footer-actions, |
2849 | | #customize-preview, |
| 2881 | /*#customize-preview,*/ |
2850 | 2882 | .customize-controls-preview-toggle .controls, |
2851 | 2883 | .preview-only .wp-full-overlay-sidebar-content, |
2852 | 2884 | .preview-only .customize-controls-preview-toggle .preview { |
… |
… |
body.adding-widget .add-new-widget:before, |
2879 | 2911 | display: block; |
2880 | 2912 | } |
2881 | 2913 | |
2882 | | #customize-preview { |
2883 | | top: 45px; |
2884 | | bottom: 0; |
2885 | | height: auto; |
| 2914 | .wp-full-overlay.expanded { |
| 2915 | margin-left: 300px; |
2886 | 2916 | } |
2887 | 2917 | |
2888 | 2918 | .wp-core-ui.wp-customizer .button { |
… |
… |
body.adding-widget .add-new-widget:before, |
2891 | 2921 | font-size: 14px; |
2892 | 2922 | vertical-align: middle; |
2893 | 2923 | height: auto; |
2894 | | margin-bottom: 4px; |
2895 | | margin-top: 12px; |
2896 | 2924 | } |
2897 | 2925 | |
2898 | 2926 | #publish-settings { |
… |
… |
body.adding-widget .add-new-widget:before, |
2974 | 3002 | .reordering .reorder-done { |
2975 | 3003 | padding: 8px; |
2976 | 3004 | } |
| 3005 | |
| 3006 | .wp-core-ui .themes-filter-bar .feature-filter-toggle { |
| 3007 | margin: 0; |
| 3008 | } |
2977 | 3009 | } |
diff --git src/wp-admin/css/themes.css src/wp-admin/css/themes.css
index e339448..c6f7972 100644
|
|
body.js .theme-browser.search-loading { |
97 | 97 | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; |
98 | 98 | opacity: 0; |
99 | 99 | transition: opacity 0.1s ease-in-out; |
100 | | position: absolute; |
101 | | bottom: 0; |
102 | | right: 0; |
103 | | height: 38px; |
104 | | padding: 9px 10px 0 10px; |
| 100 | height: auto; |
105 | 101 | background: rgba(244, 244, 244, 0.7); |
106 | 102 | border-left: 1px solid rgba(0,0,0,0.05); |
107 | 103 | } |
diff --git src/wp-includes/customize/class-wp-customize-theme-control.php src/wp-includes/customize/class-wp-customize-theme-control.php
index 886a711..1491430 100644
|
|
class WP_Customize_Theme_Control extends WP_Customize_Control { |
99 | 99 | <# } #> |
100 | 100 | |
101 | 101 | <# if ( data.theme.active ) { #> |
102 | | <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name"> |
103 | | <?php |
104 | | /* translators: %s: theme name */ |
105 | | printf( __( '<span>Previewing:</span> %s' ), '{{ data.theme.name }}' ); |
106 | | ?> |
107 | | </h3> |
108 | | <div class="theme-actions"> |
109 | | <button type="button" class="button button-primary customize-theme" aria-label="<?php echo esc_attr( $customize_label ); ?>"><?php _e( 'Customize' ); ?></button> |
110 | | </div> |
| 102 | <div class="theme-id-container"> |
| 103 | <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name"> |
| 104 | <?php |
| 105 | /* translators: %s: theme name */ |
| 106 | printf( __( '<span>Previewing:</span> %s' ), '{{ data.theme.name }}' ); |
| 107 | ?> |
| 108 | </h3> |
| 109 | <div class="theme-actions"> |
| 110 | <button type="button" class="button button-primary customize-theme" aria-label="<?php echo esc_attr( $customize_label ); ?>"><?php _e( 'Customize' ); ?></button> |
| 111 | </div> |
| 112 | </div> |
111 | 113 | <div class="notice notice-success notice-alt"><p><?php _e( 'Installed' ); ?></p></div> |
112 | 114 | <# } else if ( 'installed' === data.theme.type ) { #> |
113 | | <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3> |
114 | | <div class="theme-actions"> |
115 | | <button type="button" class="button button-primary preview-theme" aria-label="<?php echo esc_attr( $preview_label ); ?>" data-slug="{{ data.theme.id }}"><?php _e( 'Live Preview' ); ?></span> |
116 | | </div> |
| 115 | <div class="theme-id-container"> |
| 116 | <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3> |
| 117 | <div class="theme-actions"> |
| 118 | <button type="button" class="button button-primary preview-theme" aria-label="<?php echo esc_attr( $preview_label ); ?>" data-slug="{{ data.theme.id }}"><?php _e( 'Live Preview' ); ?></span> |
| 119 | </div> |
| 120 | </div> |
117 | 121 | <div class="notice notice-success notice-alt"><p><?php _e( 'Installed' ); ?></p></div> |
118 | 122 | <# } else { #> |
119 | | <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3> |
120 | | <div class="theme-actions"> |
121 | | <button type="button" class="button button-primary theme-install preview" aria-label="<?php echo esc_attr( $install_label ); ?>" data-slug="{{ data.theme.id }}" data-name="{{ data.theme.name }}"><?php _e( 'Install & Preview' ); ?></button> |
122 | | </div> |
| 123 | <div class="theme-id-container"> |
| 124 | <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3> |
| 125 | <div class="theme-actions"> |
| 126 | <button type="button" class="button button-primary theme-install preview" aria-label="<?php echo esc_attr( $install_label ); ?>" data-slug="{{ data.theme.id }}" data-name="{{ data.theme.name }}"><?php _e( 'Install & Preview' ); ?></button> |
| 127 | </div> |
| 128 | </div> |
123 | 129 | <# } #> |
124 | 130 | </div> |
125 | 131 | <?php |
diff --git src/wp-includes/customize/class-wp-customize-themes-section.php src/wp-includes/customize/class-wp-customize-themes-section.php
index a89439a..032c53a 100644
|
|
class WP_Customize_Themes_Section extends WP_Customize_Section { |
114 | 114 | <div class="search-form"> |
115 | 115 | <label for="wp-filter-search-input-{{ data.id }}" class="screen-reader-text"><?php _e( 'Search themes…' ); ?></label> |
116 | 116 | <input type="search" id="wp-filter-search-input-{{ data.id }}" placeholder="<?php esc_attr_e( 'Search themes…' ); ?>" aria-describedby="{{ data.id }}-live-search-desc" class="wp-filter-search"> |
117 | | <span id="{{ data.id }}-live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span> |
| 117 | <div class="search-icon" aria-hidden="true"></div> |
| 118 | <span id="{{ data.id }}-live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span> |
118 | 119 | </div> |
119 | 120 | <button type="button" class="button feature-filter-toggle"> |
120 | 121 | <span class="filter-count-0"><?php _e( 'Filter themes' ); ?></span><span class="filter-count-filters"> |
… |
… |
class WP_Customize_Themes_Section extends WP_Customize_Section { |
144 | 145 | <div class="themes-filter-container"> |
145 | 146 | <label for="{{ data.id }}-themes-filter" class="screen-reader-text"><?php _e( 'Search themes…' ); ?></label> |
146 | 147 | <input type="search" id="{{ data.id }}-themes-filter" placeholder="<?php esc_attr_e( 'Search themes…' ); ?>" aria-describedby="{{ data.id }}-live-search-desc" class="wp-filter-search wp-filter-search-themes" /> |
147 | | <span id="{{ data.id }}-live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span> |
| 148 | <div class="search-icon" aria-hidden="true"></div> |
| 149 | <span id="{{ data.id }}-live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span> |
148 | 150 | </div> |
149 | 151 | <# } #> |
150 | 152 | <div class="filter-themes-count"> |