diff --git a/src/js/media/views/button/select-mode-toggle.js b/src/js/media/views/button/select-mode-toggle.js
index 2c2335bcd5..4583cae7ce 100644
a
|
b
|
SelectModeToggle = Button.extend(/** @lends wp.media.view.SelectModeToggle.proto |
55 | 55 | size: 'large', |
56 | 56 | text: l10n.cancel |
57 | 57 | } ); |
58 | | children.not( '.spinner, .media-button' ).hide(); |
| 58 | children.not( '.spinner, .media-button, .media-bg-overlay' ).hide(); |
59 | 59 | this.$el.show(); |
60 | 60 | toolbar.$el.addClass( 'media-toolbar-mode-select' ); |
61 | 61 | toolbar.$( '.delete-selected-button' ).removeClass( 'hidden' ); |
diff --git a/src/js/media/views/toolbar.js b/src/js/media/views/toolbar.js
index 1beb428fe6..e2ddeeb150 100644
a
|
b
|
Toolbar = View.extend(/** @lends wp.media.view.Toolbar.prototype */{ |
28 | 28 | // The toolbar is composed of two `PriorityList` views. |
29 | 29 | this.primary = new wp.media.view.PriorityList(); |
30 | 30 | this.secondary = new wp.media.view.PriorityList(); |
| 31 | this.third = new wp.media.view.PriorityList(); |
31 | 32 | this.primary.$el.addClass('media-toolbar-primary search-form'); |
32 | 33 | this.secondary.$el.addClass('media-toolbar-secondary'); |
| 34 | this.third.$el.addClass('media-bg-overlay'); |
33 | 35 | |
34 | | this.views.set([ this.secondary, this.primary ]); |
| 36 | this.views.set([ this.secondary, this.primary, this.third ]); |
35 | 37 | |
36 | 38 | if ( this.options.items ) { |
37 | 39 | this.set( this.options.items, { silent: true }); |
… |
… |
Toolbar = View.extend(/** @lends wp.media.view.Toolbar.prototype */{ |
122 | 124 | delete this._views[ id ]; |
123 | 125 | this.primary.unset( id, options ); |
124 | 126 | this.secondary.unset( id, options ); |
| 127 | this.third.unset( id, options ); |
125 | 128 | |
126 | 129 | if ( ! options || ! options.silent ) { |
127 | 130 | this.refresh(); |
diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
index eaa9562fca..e01814f601 100644
a
|
b
|
|
2815 | 2815 | font-size: 14px; |
2816 | 2816 | line-height: 2.71428571; |
2817 | 2817 | } |
| 2818 | |
| 2819 | .media-frame .wp-filter .media-toolbar-secondary { |
| 2820 | position: unset; |
| 2821 | } |
| 2822 | |
| 2823 | .media-frame .media-toolbar-secondary .spinner { |
| 2824 | position: absolute; |
| 2825 | top: 0; |
| 2826 | bottom: 0; |
| 2827 | margin: auto; |
| 2828 | left: 0; |
| 2829 | right: 0; |
| 2830 | z-index: 9; |
| 2831 | } |
| 2832 | |
| 2833 | .media-bg-overlay { |
| 2834 | visibility: hidden; |
| 2835 | content: ''; |
| 2836 | background: #ffffff; |
| 2837 | width: 100%; |
| 2838 | height: 100%; |
| 2839 | display: block; |
| 2840 | position: absolute; |
| 2841 | left: 0; |
| 2842 | right: 0; |
| 2843 | top: 0; |
| 2844 | bottom: 0; |
| 2845 | opacity: 0.6; |
| 2846 | } |
2818 | 2847 | } |
2819 | 2848 | |
2820 | 2849 | /* Responsive on portrait and landscape */ |