1/*! This file is auto-generated */
2/**
3 * Base Styles
4 */
5.media-modal * {
6 box-sizing: content-box;
7}
8
9.media-modal input,
10.media-modal select,
11.media-modal textarea {
12 box-sizing: border-box;
13}
14
15.media-modal,
16.media-frame {
17 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
18 font-size: 12px;
19 -webkit-overflow-scrolling: touch;
20}
21
22.media-modal legend {
23 padding: 0;
24 font-size: 13px;
25}
26
27.media-modal label {
28 font-size: 13px;
29}
30
31.media-modal .legend-inline {
32 position: absolute;
33 transform: translate(100%, 50%);
34 margin-right: -1%;
35 line-height: 1.2;
36}
37
38.media-frame a {
39 border-bottom: none;
40 color: #2271b1;
41}
42
43.media-frame a:hover,
44.media-frame a:active {
45 color: #135e96;
46}
47
48.media-frame a:focus {
49 box-shadow: 0 0 0 2px #2271b1;
50 color: #043959;
51 /* Only visible in Windows High Contrast mode */
52 outline: 2px solid transparent;
53}
54
55.media-frame a.button {
56 color: #2c3338;
57}
58
59.media-frame a.button:hover {
60 color: #1d2327;
61}
62
63.media-frame a.button-primary,
64.media-frame a.button-primary:hover {
65 color: #fff;
66}
67
68.media-frame input,
69.media-frame textarea {
70 padding: 6px 8px;
71}
72
73.media-frame select,
74.wp-admin .media-frame select {
75 min-height: 30px;
76 vertical-align: middle;
77}
78
79.media-frame input[type="text"],
80.media-frame input[type="password"],
81.media-frame input[type="color"],
82.media-frame input[type="date"],
83.media-frame input[type="datetime"],
84.media-frame input[type="datetime-local"],
85.media-frame input[type="email"],
86.media-frame input[type="month"],
87.media-frame input[type="number"],
88.media-frame input[type="search"],
89.media-frame input[type="tel"],
90.media-frame input[type="time"],
91.media-frame input[type="url"],
92.media-frame input[type="week"],
93.media-frame textarea,
94.media-frame select {
95 box-shadow: 0 0 0 transparent;
96 border-radius: 4px;
97 border: 1px solid #8c8f94;
98 background-color: #fff;
99 color: #2c3338;
100 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
101 font-size: 13px;
102 line-height: 1.38461538;
103}
104
105.media-frame input[type="text"],
106.media-frame input[type="password"],
107.media-frame input[type="date"],
108.media-frame input[type="datetime"],
109.media-frame input[type="datetime-local"],
110.media-frame input[type="email"],
111.media-frame input[type="month"],
112.media-frame input[type="number"],
113.media-frame input[type="search"],
114.media-frame input[type="tel"],
115.media-frame input[type="time"],
116.media-frame input[type="url"],
117.media-frame input[type="week"] {
118 padding: 0 8px;
119 /* inherits font size 13px */
120 line-height: 2.15384615; /* 28px */
121}
122
123/* Search field in the Media Library toolbar */
124.media-frame.mode-grid .wp-filter input[type="search"] {
125 font-size: 14px;
126 line-height: 2;
127}
128
129.media-frame input[type="text"]:focus,
130.media-frame input[type="password"]:focus,
131.media-frame input[type="number"]:focus,
132.media-frame input[type="search"]:focus,
133.media-frame input[type="email"]:focus,
134.media-frame input[type="url"]:focus,
135.media-frame textarea:focus,
136.media-frame select:focus {
137 border-color: #3582c4;
138 box-shadow: 0 0 0 1px #3582c4;
139 outline: 2px solid transparent;
140}
141
142.media-frame input:disabled,
143.media-frame textarea:disabled,
144.media-frame input[readonly],
145.media-frame textarea[readonly] {
146 background-color: #f0f0f1;
147}
148
149.media-frame input[type="search"] {
150 -webkit-appearance: textfield;
151}
152
153.media-frame ::-webkit-input-placeholder {
154 color: #646970;
155}
156
157.media-frame ::-moz-placeholder {
158 color: #646970;
159}
160
161/*
162 * In some cases there's the need of higher specificity,
163 * for example higher than `.media-embed .setting`.
164 */
165.media-frame .hidden,
166.media-frame .setting.hidden {
167 display: none;
168}
169
170/*!
171 * jQuery UI Draggable/Sortable 1.11.4
172 * http://jqueryui.com
173 *
174 * Copyright jQuery Foundation and other contributors
175 * Released under the MIT license.
176 * http://jquery.org/license
177 */
178.ui-draggable-handle,
179.ui-sortable-handle {
180 touch-action: none;
181}
182
183/**
184 * Modal
185 */
186.media-modal {
187 position: fixed;
188 top: 30px;
189 right: 30px;
190 left: 30px;
191 bottom: 30px;
192 z-index: 160000;
193}
194
195.wp-customizer .media-modal {
196 z-index: 560000;
197}
198
199.media-modal-backdrop {
200 position: fixed;
201 top: 0;
202 right: 0;
203 left: 0;
204 bottom: 0;
205 min-height: 360px;
206 background: #000;
207 opacity: 0.7;
208 z-index: 159900;
209}
210
211.wp-customizer .media-modal-backdrop {
212 z-index: 559900;
213}
214
215.media-modal-close {
216 position: absolute;
217 top: 0;
218 left: 0;
219 width: 50px;
220 height: 50px;
221 margin: 0;
222 padding: 0;
223 border: 1px solid transparent;
224 background: none;
225 color: #646970;
226 z-index: 1000;
227 cursor: pointer;
228 outline: none;
229 transition: color .1s ease-in-out, background .1s ease-in-out;
230}
231
232.media-modal-close:hover,
233.media-modal-close:active {
234 color: #135e96;
235}
236
237.media-modal-close:focus {
238 color: #135e96;
239 border-color: #4f94d4;
240 box-shadow: 0 0 3px rgba(34, 113, 177, 0.8);
241 /* Only visible in Windows High Contrast mode */
242 outline: 2px solid transparent;
243}
244
245.media-modal-close span.media-modal-icon {
246 background-image: none;
247}
248
249.media-modal-close .media-modal-icon:before {
250 content: "\f158";
251 content: "\f158" / '';
252 font: normal 20px/1 dashicons;
253 vertical-align: middle;
254 -webkit-font-smoothing: antialiased;
255 -moz-osx-font-smoothing: grayscale;
256}
257
258.media-modal-content {
259 position: absolute;
260 top: 0;
261 right: 0;
262 left: 0;
263 bottom: 0;
264 overflow: auto;
265 min-height: 300px;
266 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7);
267 background: #fff;
268 -webkit-font-smoothing: subpixel-antialiased;
269}
270
271.media-modal-content .media-frame select.attachment-filters {
272 margin-top: 32px;
273 margin-left: 2%;
274 width: 42%;
275 width: calc(48% - 12px);
276}
277
278/* higher specificity */
279.wp-core-ui .media-modal-icon {
280 background-image: url(../images/uploader-icons.png);
281 background-repeat: no-repeat;
282}
283
284/**
285 * Toolbar
286 */
287.media-toolbar {
288 position: absolute;
289 top: 0;
290 right: 0;
291 left: 0;
292 z-index: 100;
293 height: 60px;
294 padding: 0 16px;
295 border: 0 solid #dcdcde;
296 overflow: hidden;
297}
298
299.media-frame-toolbar .media-toolbar {
300 top: auto;
301 bottom: -47px;
302 height: auto;
303 overflow: visible;
304 border-top: 1px solid #dcdcde;
305}
306
307.media-toolbar-primary {
308 float: left;
309 height: 100%;
310 position: relative;
311}
312
313.media-toolbar-secondary {
314 float: right;
315 height: 100%;
316}
317
318.media-toolbar-primary > .media-button,
319.media-toolbar-primary > .media-button-group {
320 margin-right: 10px;
321 float: right;
322 margin-top: 15px;
323}
324
325.media-toolbar-secondary > .media-button,
326.media-toolbar-secondary > .media-button-group {
327 margin-left: 10px;
328 margin-top: 15px;
329}
330
331/**
332 * Sidebar
333 */
334.media-sidebar {
335 position: absolute;
336 top: 0;
337 left: 0;
338 bottom: 0;
339 width: 267px;
340 padding: 0 16px;
341 z-index: 75;
342 background: #f6f7f7;
343 border-right: 1px solid #dcdcde;
344 overflow: auto;
345 -webkit-overflow-scrolling: touch;
346}
347
348/*
349 * Implementation of bottom padding in overflow content differs across browsers.
350 * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
351 */
352.media-sidebar::after {
353 content: "";
354 display: flex;
355 clear: both;
356 height: 24px;
357}
358
359.hide-toolbar .media-sidebar {
360 bottom: 0;
361}
362
363.media-sidebar h2,
364.image-details .media-embed h2 {
365 position: relative;
366 font-weight: 600;
367 text-transform: uppercase;
368 font-size: 12px;
369 color: #646970;
370 margin: 24px 0 8px;
371}
372
373.media-sidebar .setting,
374.attachment-details .setting {
375 display: block;
376 float: right;
377 width: 100%;
378 margin: 0 0 10px;
379}
380
381.attachment-details h2 {
382 display: grid;
383 grid-template-columns: auto 5em;
384}
385
386.media-sidebar .collection-settings .setting {
387 margin: 1px 0;
388}
389
390.media-sidebar .setting.has-description,
391.attachment-details .setting.has-description {
392 margin-bottom: 5px;
393}
394
395.media-sidebar .setting .link-to-custom {
396 margin: 3px 2px 0;
397}
398
399.media-sidebar .setting span, /* Back-compat for pre-5.3 */
400.attachment-details .setting span, /* Back-compat for pre-5.3 */
401.media-sidebar .setting .name,
402.media-sidebar .setting .value,
403.attachment-details .setting .name {
404 min-width: 30%;
405 margin-left: 4%;
406 font-size: 12px;
407 text-align: left;
408 word-wrap: break-word;
409}
410
411.media-sidebar .setting .name {
412 max-width: 80px;
413}
414
415.media-sidebar .setting .value {
416 text-align: right;
417}
418
419.media-sidebar .setting select {
420 max-width: 65%;
421}
422
423.media-sidebar .setting input[type="checkbox"],
424.media-sidebar .field input[type="checkbox"],
425.media-sidebar .setting input[type="radio"],
426.media-sidebar .field input[type="radio"],
427.attachment-details .setting input[type="checkbox"],
428.attachment-details .field input[type="checkbox"],
429.attachment-details .setting input[type="radio"],
430.attachment-details .field input[type="radio"] {
431 float: none;
432 margin: 8px 3px 0;
433 padding: 0;
434}
435
436.media-sidebar .setting span, /* Back-compat for pre-5.3 */
437.attachment-details .setting span, /* Back-compat for pre-5.3 */
438.media-sidebar .setting .name,
439.media-sidebar .setting .value,
440.media-sidebar .checkbox-label-inline,
441.attachment-details .setting .name,
442.attachment-details .setting .value,
443.compat-item label span {
444 float: right;
445 min-height: 22px;
446 padding-top: 8px;
447 line-height: 1.33333333;
448 font-weight: 400;
449 color: #646970;
450}
451
452.media-sidebar .checkbox-label-inline {
453 font-size: 12px;
454}
455
456.media-sidebar .copy-to-clipboard-container,
457.attachment-details .copy-to-clipboard-container {
458 flex-wrap: wrap;
459 margin-top: 10px;
460 margin-right: calc( 35% - 1px );
461 padding-top: 10px;
462}
463
464/* Needs high specificity. */
465.attachment-details .attachment-info .copy-to-clipboard-container {
466 float: none;
467}
468
469.media-sidebar .copy-to-clipboard-container .success,
470.attachment-details .copy-to-clipboard-container .success {
471 padding: 0;
472 min-height: 0;
473 line-height: 2.18181818;
474 text-align: right;
475 color: #007017;
476}
477
478.compat-item label span {
479 text-align: left;
480}
481
482.media-sidebar .setting input[type="text"],
483.media-sidebar .setting input[type="password"],
484.media-sidebar .setting input[type="email"],
485.media-sidebar .setting input[type="number"],
486.media-sidebar .setting input[type="search"],
487.media-sidebar .setting input[type="tel"],
488.media-sidebar .setting input[type="url"],
489.media-sidebar .setting textarea,
490.media-sidebar .setting .value,
491.attachment-details .setting input[type="text"],
492.attachment-details .setting input[type="password"],
493.attachment-details .setting input[type="email"],
494.attachment-details .setting input[type="number"],
495.attachment-details .setting input[type="search"],
496.attachment-details .setting input[type="tel"],
497.attachment-details .setting input[type="url"],
498.attachment-details .setting textarea,
499.attachment-details .setting .value,
500.attachment-details .setting + .description {
501 box-sizing: border-box;
502 margin: 1px;
503 width: 65%;
504 float: left;
505}
506
507.media-sidebar .setting .value,
508.attachment-details .setting .value,
509.attachment-details .setting + .description {
510 margin: 0 1px;
511 text-align: right;
512}
513
514.attachment-details .setting + .description {
515 clear: both;
516 font-size: 12px;
517 font-style: normal;
518 margin-bottom: 10px;
519}
520
521.media-sidebar .setting textarea,
522.attachment-details .setting textarea,
523.compat-item .field textarea {
524 height: 62px;
525 resize: vertical;
526}
527
528.media-sidebar .alt-text textarea,
529.attachment-details .alt-text textarea,
530.compat-item .alt-text textarea,
531.alt-text textarea {
532 height: 50px;
533}
534
535.compat-item {
536 float: right;
537 width: 100%;
538 overflow: hidden;
539}
540
541.compat-item table {
542 width: 100%;
543 table-layout: fixed;
544 border-spacing: 0;
545 border: 0;
546}
547
548.compat-item tr {
549 padding: 2px 0;
550 display: block;
551 overflow: hidden;
552}
553
554.compat-item .label,
555.compat-item .field {
556 display: block;
557 margin: 0;
558 padding: 0;
559}
560
561.compat-item .label {
562 min-width: 30%;
563 margin-left: 4%;
564 float: right;
565 text-align: left;
566}
567
568.compat-item .label span {
569 display: block;
570 width: 100%;
571}
572
573.compat-item .field {
574 float: left;
575 width: 65%;
576 margin: 1px;
577}
578
579.compat-item .field input[type="text"],
580.compat-item .field input[type="password"],
581.compat-item .field input[type="email"],
582.compat-item .field input[type="number"],
583.compat-item .field input[type="search"],
584.compat-item .field input[type="tel"],
585.compat-item .field input[type="url"],
586.compat-item .field textarea {
587 width: 100%;
588 margin: 0;
589 box-sizing: border-box;
590}
591
592.sidebar-for-errors .attachment-details,
593.sidebar-for-errors .compat-item,
594.sidebar-for-errors .media-sidebar .media-progress-bar,
595.sidebar-for-errors .upload-details {
596 display: none !important;
597}
598
599/**
600 * Menu
601 */
602.media-menu {
603 position: absolute;
604 top: 0;
605 right: 0;
606 left: 0;
607 bottom: 0;
608 margin: 0;
609 padding: 50px 0 10px;
610 background: #f6f7f7;
611 border-left-width: 1px;
612 border-left-style: solid;
613 border-left-color: #c3c4c7;
614 -webkit-user-select: none;
615 user-select: none;
616}
617
618.media-menu .media-menu-item {
619 display: block;
620 box-sizing: border-box;
621 width: 100%;
622 position: relative;
623 border: 0;
624 margin: 0;
625 padding: 8px 20px;
626 font-size: 14px;
627 line-height: 1.28571428;
628 background: transparent;
629 color: #2271b1;
630 text-align: right;
631 text-decoration: none;
632 cursor: pointer;
633}
634
635.media-menu .media-menu-item:hover {
636 background: rgba(0, 0, 0, 0.04);
637}
638
639.media-menu .media-menu-item:active {
640 color: #2271b1;
641 outline: none;
642}
643
644.media-menu .active,
645.media-menu .active:hover {
646 color: #1d2327;
647 font-weight: 600;
648}
649
650.media-menu .media-menu-item:focus {
651 box-shadow: 0 0 0 2px #2271b1;
652 color: #043959;
653 /* Only visible in Windows High Contrast mode */
654 outline: 2px solid transparent;
655}
656
657.media-menu .separator {
658 height: 0;
659 margin: 12px 20px;
660 padding: 0;
661 border-top: 1px solid #dcdcde;
662}
663
664/**
665 * Menu
666 */
667.media-router {
668 position: relative;
669 padding: 0 6px;
670 margin: 0;
671 clear: both;
672}
673
674.media-router .media-menu-item {
675 position: relative;
676 float: right;
677 border: 0;
678 margin: 0;
679 padding: 8px 10px 9px;
680 height: 18px;
681 line-height: 1.28571428;
682 font-size: 14px;
683 text-decoration: none;
684 background: transparent;
685 cursor: pointer;
686 transition: none;
687}
688
689.media-router .media-menu-item:last-child {
690 border-left: 0;
691}
692
693.media-router .media-menu-item:hover,
694.media-router .media-menu-item:active {
695 color: #2271b1;
696}
697
698.media-router .active,
699.media-router .active:hover {
700 color: #1d2327;
701}
702
703.media-router .media-menu-item:focus {
704 box-shadow: 0 0 0 2px #2271b1;
705 color: #043959;
706 /* Only visible in Windows High Contrast mode */
707 outline: 2px solid transparent;
708 z-index: 1;
709}
710
711.media-router .active,
712.media-router .media-menu-item.active:last-child {
713 margin: -1px -1px 0;
714 background: #fff;
715 border: 1px solid #dcdcde;
716 border-bottom: none;
717}
718
719.media-router .active:after {
720 display: none;
721}
722
723/**
724 * Frame
725 */
726.media-frame {
727 overflow: hidden;
728 position: absolute;
729 top: 0;
730 right: 0;
731 left: 0;
732 bottom: 0;
733}
734
735.media-frame-menu {
736 position: absolute;
737 top: 0;
738 right: 0;
739 bottom: 0;
740 width: 200px;
741 z-index: 150;
742}
743
744.media-frame-title {
745 position: absolute;
746 top: 0;
747 right: 200px;
748 left: 0;
749 height: 50px;
750 z-index: 200;
751}
752
753.media-frame-router {
754 position: absolute;
755 top: 50px;
756 right: 200px;
757 left: 0;
758 height: 36px;
759 z-index: 200;
760}
761
762.media-frame-content {
763 position: absolute;
764 top: 84px;
765 right: 200px;
766 left: 0;
767 bottom: 61px;
768 height: auto;
769 width: auto;
770 margin: 0;
771 overflow: auto;
772 background: #fff;
773 border-top: 1px solid #dcdcde;
774}
775
776.media-frame-toolbar {
777 position: absolute;
778 right: 200px;
779 left: 0;
780 z-index: 100;
781 bottom: 60px;
782 height: auto;
783}
784
785.media-frame.hide-menu .media-frame-title,
786.media-frame.hide-menu .media-frame-router,
787.media-frame.hide-menu .media-frame-toolbar,
788.media-frame.hide-menu .media-frame-content {
789 right: 0;
790}
791
792.media-frame.hide-toolbar .media-frame-content {
793 bottom: 0;
794}
795
796.media-frame.hide-router .media-frame-content {
797 top: 50px;
798}
799
800.media-frame.hide-menu .media-frame-menu,
801.media-frame.hide-menu .media-frame-menu-heading,
802.media-frame.hide-router .media-frame-router,
803.media-frame.hide-toolbar .media-frame-toolbar {
804 display: none;
805}
806
807.media-frame-title h1 {
808 padding: 0 16px;
809 font-size: 22px;
810 line-height: 2.27272727;
811 margin: 0;
812}
813
814.media-frame-menu-heading,
815.media-attachments-filter-heading {
816 position: absolute;
817 right: 20px;
818 top: 22px;
819 margin: 0;
820 font-size: 13px;
821 line-height: 1;
822 /* Above the media-frame-menu. */
823 z-index: 151;
824}
825
826.media-attachments-filter-heading {
827 top: 10px;
828 right: 16px;
829}
830
831.mode-grid .media-attachments-filter-heading {
832 top: 0;
833 right: -9999px;
834}
835
836.mode-grid .media-frame-actions-heading {
837 display: none;
838}
839
840.wp-core-ui .button.media-frame-menu-toggle {
841 display: none;
842}
843
844.media-frame-title .suggested-dimensions {
845 font-size: 14px;
846 float: left;
847 margin-left: 20px;
848}
849
850.media-frame-content .crop-content {
851 height: 100%;
852}
853
854.options-general-php .crop-content.site-icon,
855.wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon {
856 margin-left: 300px;
857}
858
859.media-frame-content .crop-content .crop-image {
860 display: block;
861 margin: auto;
862 max-width: 100%;
863 max-height: 100%;
864}
865
866.media-frame-content .crop-content .upload-errors {
867 position: absolute;
868 width: 300px;
869 top: 50%;
870 right: 50%;
871 margin-right: -150px;
872 margin-left: -150px;
873 z-index: 600000;
874}
875
876/**
877 * Iframes
878 */
879.media-frame .media-iframe {
880 overflow: hidden;
881}
882
883.media-frame .media-iframe,
884.media-frame .media-iframe iframe {
885 height: 100%;
886 width: 100%;
887 border: 0;
888}
889
890/**
891 * Attachment Browser Filters
892 */
893.media-frame select.attachment-filters {
894 margin-top: 11px;
895 margin-left: 2%;
896 max-width: 42%;
897 max-width: calc(48% - 12px);
898}
899
900.media-frame select.attachment-filters:last-of-type {
901 margin-left: 0;
902}
903
904/**
905 * Search
906 */
907.media-frame .search {
908 margin: 32px 0 0;
909 padding: 4px;
910 font-size: 13px;
911 color: #3c434a;
912 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
913 -webkit-appearance: none;
914}
915
916.media-toolbar-primary .search {
917 max-width: 100%;
918}
919
920.media-modal .media-frame .media-search-input-label {
921 position: absolute;
922 right: 0;
923 top: 10px;
924 margin: 0;
925 line-height: 1;
926}
927
928/**
929 * Attachments
930 */
931.wp-core-ui .attachments {
932 margin: 0;
933 -webkit-overflow-scrolling: touch;
934}
935
936/**
937 * Attachment
938 */
939.wp-core-ui .attachment {
940 position: relative;
941 float: right;
942 padding: 8px;
943 margin: 0;
944 color: #3c434a;
945 cursor: pointer;
946 list-style: none;
947 text-align: center;
948 -webkit-user-select: none;
949 user-select: none;
950 width: 25%;
951 box-sizing: border-box;
952}
953
954.wp-core-ui .attachment:focus,
955.wp-core-ui .selected.attachment:focus,
956.wp-core-ui .attachment.details:focus {
957 box-shadow:
958 inset 0 0 2px 3px #fff,
959 inset 0 0 0 7px #4f94d4;
960 /* Only visible in Windows High Contrast mode */
961 outline: 2px solid transparent;
962 outline-offset: -6px;
963}
964
965.wp-core-ui .selected.attachment {
966 box-shadow:
967 inset 0 0 0 5px #fff,
968 inset 0 0 0 7px #c3c4c7;
969}
970
971.wp-core-ui .attachment.details {
972 box-shadow:
973 inset 0 0 0 3px #fff,
974 inset 0 0 0 7px #2271b1;
975}
976
977.wp-core-ui .attachment-preview {
978 position: relative;
979 box-shadow:
980 inset 0 0 15px rgba(0, 0, 0, 0.1),
981 inset 0 0 0 1px rgba(0, 0, 0, 0.05);
982 background: #f0f0f1;
983 cursor: pointer;
984}
985
986.wp-core-ui .attachment-preview:before {
987 content: "";
988 display: block;
989 padding-top: 100%;
990}
991
992.wp-core-ui .attachment .icon {
993 margin: 0 auto;
994 overflow: hidden;
995}
996
997.wp-core-ui .attachment .thumbnail {
998 overflow: hidden;
999 position: absolute;
1000 top: 0;
1001 left: 0;
1002 bottom: 0;
1003 right: 0;
1004 opacity: 1;
1005 transition: opacity .1s;
1006}
1007
1008.wp-core-ui .attachment .portrait img {
1009 max-width: 100%;
1010}
1011
1012.wp-core-ui .attachment .landscape img {
1013 max-height: 100%;
1014}
1015
1016.wp-core-ui .attachment .thumbnail:after {
1017 content: "";
1018 display: block;
1019 position: absolute;
1020 top: 0;
1021 right: 0;
1022 left: 0;
1023 bottom: 0;
1024 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
1025 overflow: hidden;
1026}
1027
1028.wp-core-ui .attachment .thumbnail img {
1029 top: 0;
1030 right: 0;
1031}
1032
1033.wp-core-ui .attachment .thumbnail .centered {
1034 position: absolute;
1035 top: 0;
1036 right: 0;
1037 width: 100%;
1038 height: 100%;
1039 transform: translate( -50%, 50% );
1040}
1041
1042.wp-core-ui .attachment .thumbnail .centered img {
1043 transform: translate( 50%, -50% );
1044}
1045
1046.wp-core-ui .attachments-browser .attachment .thumbnail .centered img.icon {
1047 transform: translate( 50%, -70% );
1048}
1049
1050.wp-core-ui .attachment .filename {
1051 position: absolute;
1052 right: 0;
1053 left: 0;
1054 bottom: 0;
1055 overflow: hidden;
1056 max-height: 100%;
1057 word-wrap: break-word;
1058 text-align: center;
1059 font-weight: 600;
1060 background: rgba(255, 255, 255, 0.8);
1061 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
1062}
1063
1064.wp-core-ui .attachment .filename div {
1065 padding: 5px 10px;
1066}
1067
1068.wp-core-ui .attachment .thumbnail img {
1069 position: absolute;
1070}
1071
1072.wp-core-ui .attachment-close {
1073 display: block;
1074 position: absolute;
1075 top: 5px;
1076 left: 5px;
1077 height: 22px;
1078 width: 22px;
1079 padding: 0;
1080 background-color: #fff;
1081 border-radius: 3px;
1082 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
1083 transition: none;
1084}
1085
1086.wp-core-ui .attachment-close .media-modal-icon {
1087 display: inline-block;
1088 background-position: -96px 4px;
1089 height: 22px;
1090 width: 22px;
1091}
1092
1093.wp-core-ui .attachment-close:hover .media-modal-icon,
1094.wp-core-ui .attachment-close:focus .media-modal-icon {
1095 background-position: -36px 4px;
1096}
1097
1098.wp-core-ui .attachment .check {
1099 display: none;
1100 height: 24px;
1101 width: 24px;
1102 padding: 0;
1103 border: 0;
1104 position: absolute;
1105 z-index: 10;
1106 top: 0;
1107 left: 0;
1108 outline: none;
1109 background: #f0f0f1;
1110 cursor: pointer;
1111 box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba(0, 0, 0, 0.15);
1112}
1113
1114.wp-core-ui .attachment .check .media-modal-icon {
1115 display: block;
1116 background-position: -1px 0;
1117 height: 15px;
1118 width: 15px;
1119 margin: 5px;
1120}
1121
1122.wp-core-ui .attachment .check:hover .media-modal-icon {
1123 background-position: -40px 0;
1124}
1125
1126.wp-core-ui .attachment.selected .check {
1127 display: block;
1128}
1129
1130.wp-core-ui .attachment.details .check,
1131.wp-core-ui .attachment.selected .check:focus,
1132.wp-core-ui .media-frame.mode-grid .attachment.selected .check {
1133 background-color: #2271b1;
1134 box-shadow:
1135 0 0 0 1px #fff,
1136 0 0 0 2px #2271b1;
1137}
1138
1139.wp-core-ui .attachment.selected .check:focus {
1140 /* Only visible in Windows High Contrast mode */
1141 outline: 2px solid transparent;
1142}
1143
1144.wp-core-ui .attachment.details .check .media-modal-icon,
1145.wp-core-ui .media-frame.mode-grid .attachment.selected .check .media-modal-icon {
1146 background-position: -21px 0;
1147}
1148
1149.wp-core-ui .attachment.details .check:hover .media-modal-icon,
1150.wp-core-ui .attachment.selected .check:focus .media-modal-icon,
1151.wp-core-ui .media-frame.mode-grid .attachment.selected .check:hover .media-modal-icon {
1152 background-position: -60px 0;
1153}
1154
1155.wp-core-ui .media-frame .attachment .describe {
1156 position: relative;
1157 display: block;
1158 width: 100%;
1159 margin: 0;
1160 padding: 0 8px;
1161 font-size: 12px;
1162 border-radius: 0;
1163}
1164
1165/**
1166 * Attachments Browser
1167 */
1168.media-frame .attachments-browser {
1169 position: relative;
1170 width: 100%;
1171 height: 100%;
1172 overflow: hidden;
1173}
1174
1175.attachments-browser .media-toolbar {
1176 left: 300px;
1177 height: 72px;
1178 background: #fff;
1179}
1180
1181.attachments-browser.hide-sidebar .media-toolbar {
1182 left: 0;
1183}
1184
1185.attachments-browser .media-toolbar-primary > .media-button,
1186.attachments-browser .media-toolbar-primary > .media-button-group,
1187.attachments-browser .media-toolbar-secondary > .media-button,
1188.attachments-browser .media-toolbar-secondary > .media-button-group {
1189 margin: 10px 0;
1190}
1191
1192.attachments-browser .attachments {
1193 padding: 2px 8px 8px;
1194}
1195
1196.attachments-browser:not(.has-load-more) .attachments,
1197.attachments-browser.has-load-more .attachments-wrapper,
1198.attachments-browser .uploader-inline {
1199 position: absolute;
1200 top: 72px;
1201 right: 0;
1202 left: 300px;
1203 bottom: 0;
1204 overflow: auto;
1205 outline: none;
1206}
1207
1208.attachments-browser .uploader-inline.hidden {
1209 display: none;
1210}
1211
1212.attachments-browser .media-toolbar-primary {
1213 max-width: 33%;
1214}
1215
1216.mode-grid .attachments-browser .media-toolbar-primary {
1217 display: flex;
1218 align-items: center;
1219 column-gap: .5rem;
1220 margin: 11px 0;
1221}
1222
1223.mode-grid .attachments-browser .media-toolbar-mode-select .media-toolbar-primary {
1224 display: none;
1225}
1226
1227.attachments-browser .media-toolbar-secondary {
1228 max-width: 66%;
1229}
1230
1231.uploader-inline .close {
1232 background-color: transparent;
1233 border: 0;
1234 cursor: pointer;
1235 height: 48px;
1236 outline: none;
1237 padding: 0;
1238 position: absolute;
1239 left: 2px;
1240 text-align: center;
1241 top: 2px;
1242 width: 48px;
1243 z-index: 1;
1244}
1245
1246.uploader-inline .close:before {
1247 font: normal 30px/1 dashicons !important;
1248 color: #50575e;
1249 display: inline-block;
1250 content: "\f335";
1251 content: "\f335" / '';
1252 font-weight: 300;
1253 margin-top: 1px;
1254}
1255
1256.uploader-inline .close:focus {
1257 outline: 1px solid #4f94d4;
1258 box-shadow: 0 0 3px rgba(34, 113, 177, 0.8);
1259}
1260
1261.attachments-browser.hide-sidebar .attachments,
1262.attachments-browser.hide-sidebar .uploader-inline {
1263 left: 0;
1264 margin-left: 0;
1265}
1266
1267.attachments-browser .instructions {
1268 display: inline-block;
1269 margin-top: 16px;
1270 line-height: 1.38461538;
1271 font-size: 13px;
1272 color: #646970;
1273}
1274
1275.attachments-browser .no-media {
1276 padding: 2em 2em 0 0;
1277}
1278
1279.more-loaded .attachment:not(.found-media) {
1280 background: #dcdcde;
1281}
1282
1283.load-more-wrapper {
1284 clear: both;
1285 display: flex;
1286 flex-wrap: wrap;
1287 align-items: center;
1288 justify-content: center;
1289 padding: 1em 0;
1290}
1291
1292.load-more-wrapper .load-more-count {
1293 min-width: 100%;
1294 margin: 0 0 1em;
1295 text-align: center;
1296}
1297
1298.load-more-wrapper .load-more {
1299 margin: 0;
1300}
1301
1302/* Needs high specificity. */
1303.media-frame .load-more-wrapper .load-more + .spinner {
1304 float: none;
1305 margin: 0 10px 0 -30px;
1306}
1307
1308/* Reset spinner margin when the button is hidden to avoid horizontal scrollbar. */
1309.media-frame .load-more-wrapper .load-more.hidden + .spinner {
1310 margin: 0;
1311}
1312
1313/* Force a new row within the flex container. */
1314.load-more-wrapper::after {
1315 content: "";
1316 min-width: 100%;
1317 order: 1;
1318}
1319
1320.load-more-wrapper .load-more-jump {
1321 margin: 0 12px 0 0;
1322}
1323
1324.attachment.new-media {
1325 outline: 2px dotted #c3c4c7;
1326}
1327
1328/**
1329 * Progress Bar
1330 */
1331.media-progress-bar {
1332 position: relative;
1333 height: 10px;
1334 width: 70%;
1335 margin: 10px auto;
1336 border-radius: 10px;
1337 background: #dcdcde;
1338 background: rgba(0, 0, 0, 0.1);
1339}
1340
1341.media-progress-bar div {
1342 height: 10px;
1343 min-width: 20px;
1344 width: 0;
1345 background: #2271b1;
1346 border-radius: 10px;
1347 transition: width 300ms;
1348}
1349
1350.media-uploader-status .media-progress-bar {
1351 display: none;
1352 width: 100%;
1353}
1354
1355.uploading.media-uploader-status .media-progress-bar {
1356 display: block;
1357}
1358
1359.attachment-preview .media-progress-bar {
1360 position: absolute;
1361 top: 50%;
1362 right: 15%;
1363 width: 70%;
1364 margin: -5px 0 0;
1365}
1366
1367.media-uploader-status {
1368 position: relative;
1369 margin: 0 auto;
1370 padding-bottom: 10px;
1371 max-width: 400px;
1372}
1373
1374.uploader-inline .media-uploader-status h2 {
1375 display: none;
1376}
1377
1378.media-uploader-status .upload-details {
1379 display: none;
1380 font-size: 12px;
1381 color: #646970;
1382}
1383
1384.uploading.media-uploader-status .upload-details {
1385 display: block;
1386}
1387
1388.media-uploader-status .upload-detail-separator {
1389 padding: 0 4px;
1390}
1391
1392.media-uploader-status .upload-count {
1393 color: #3c434a;
1394}
1395
1396.media-uploader-status .upload-dismiss-errors,
1397.media-uploader-status .upload-errors {
1398 display: none;
1399}
1400
1401.errors.media-uploader-status .upload-dismiss-errors,
1402.errors.media-uploader-status .upload-errors {
1403 display: block;
1404}
1405
1406.media-uploader-status .upload-dismiss-errors {
1407 transition: none;
1408 text-decoration: none;
1409}
1410
1411.upload-errors .upload-error {
1412 padding: 12px;
1413 margin-bottom: 12px;
1414 background: #fff;
1415 border-right: 4px solid #d63638;
1416 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
1417}
1418
1419.uploader-inline .upload-errors .upload-error {
1420 padding: 12px 30px;
1421 background-color: #fcf0f1;
1422 box-shadow: none;
1423}
1424
1425.upload-errors .upload-error-filename {
1426 font-weight: 600;
1427}
1428
1429.upload-errors .upload-error-message {
1430 display: block;
1431 padding-top: 8px;
1432 word-wrap: break-word;
1433}
1434
1435/**
1436 * Window and Editor uploaders used to display "drop zones"
1437 */
1438.uploader-window,
1439.wp-editor-wrap .uploader-editor {
1440 top: 0;
1441 right: 0;
1442 left: 0;
1443 bottom: 0;
1444 text-align: center;
1445 display: none;
1446}
1447
1448.uploader-window {
1449 position: fixed;
1450 z-index: 250000;
1451 opacity: 0; /* Only the inline uploader is animated with JS, the editor one isn't */
1452 transition: opacity 250ms;
1453}
1454
1455.wp-editor-wrap .uploader-editor {
1456 position: absolute;
1457 z-index: 99998; /* under the toolbar */
1458 background: rgba(140, 143, 148, 0.9);
1459}
1460
1461.uploader-window,
1462.wp-editor-wrap .uploader-editor.droppable {
1463 background: rgba(10, 75, 120, 0.9);
1464}
1465
1466.uploader-window-content,
1467.wp-editor-wrap .uploader-editor-content {
1468 position: absolute;
1469 top: 10px;
1470 right: 10px;
1471 left: 10px;
1472 bottom: 10px;
1473 border: 1px dashed #fff;
1474}
1475
1476/* uploader drop-zone title */
1477.uploader-window h1, /* Back-compat for pre-5.3 */
1478.uploader-window .uploader-editor-title,
1479.wp-editor-wrap .uploader-editor .uploader-editor-title {
1480 position: absolute;
1481 top: 50%;
1482 right: 0;
1483 left: 0;
1484 transform: translateY(-50%);
1485 font-size: 3em;
1486 line-height: 1.3;
1487 font-weight: 600;
1488 color: #fff;
1489 margin: 0;
1490 padding: 0 10px;
1491}
1492
1493.wp-editor-wrap .uploader-editor .uploader-editor-title {
1494 display: none;
1495}
1496
1497.wp-editor-wrap .uploader-editor.droppable .uploader-editor-title {
1498 display: block;
1499}
1500
1501.uploader-window .media-progress-bar {
1502 margin-top: 20px;
1503 max-width: 300px;
1504 background: transparent;
1505 border-color: #fff;
1506 display: none;
1507}
1508
1509.uploader-window .media-progress-bar div {
1510 background: #fff;
1511}
1512
1513.uploading .uploader-window .media-progress-bar {
1514 display: block;
1515}
1516
1517.media-frame .uploader-inline {
1518 margin-bottom: 20px;
1519 padding: 0;
1520 text-align: center;
1521}
1522
1523.uploader-inline-content {
1524 position: absolute;
1525 top: 30%;
1526 right: 0;
1527 left: 0;
1528}
1529
1530.uploader-inline-content .upload-ui {
1531 margin: 2em 0;
1532}
1533
1534.uploader-inline-content .post-upload-ui {
1535 margin-bottom: 2em;
1536}
1537
1538.uploader-inline .has-upload-message .upload-ui {
1539 margin: 0 0 4em;
1540}
1541
1542.uploader-inline h2 {
1543 font-size: 20px;
1544 line-height: 1.4;
1545 font-weight: 400;
1546 margin: 0;
1547}
1548
1549.uploader-inline .has-upload-message .upload-instructions {
1550 font-size: 14px;
1551 color: #3c434a;
1552 font-weight: 400;
1553}
1554
1555.uploader-inline .drop-instructions {
1556 display: none;
1557}
1558
1559.supports-drag-drop .uploader-inline .drop-instructions {
1560 display: block;
1561}
1562
1563.uploader-inline p {
1564 margin: 0.5em 0;
1565}
1566
1567.uploader-inline .media-progress-bar {
1568 display: none;
1569}
1570
1571.uploading.uploader-inline .media-progress-bar {
1572 display: block;
1573}
1574
1575.uploader-inline .browser {
1576 display: inline-block !important;
1577}
1578
1579/**
1580 * Selection
1581 */
1582.media-selection {
1583 position: absolute;
1584 top: 0;
1585 right: 0;
1586 left: 350px;
1587 height: 60px;
1588 padding: 0 16px 0 0;
1589 overflow: hidden;
1590 white-space: nowrap;
1591}
1592
1593.media-selection .selection-info {
1594 display: inline-block;
1595 font-size: 12px;
1596 height: 60px;
1597 margin-left: 10px;
1598 vertical-align: top;
1599}
1600
1601.media-selection.empty,
1602.media-selection.editing {
1603 display: none;
1604}
1605
1606.media-selection.one .edit-selection {
1607 display: none;
1608}
1609
1610.media-selection .count {
1611 display: block;
1612 padding-top: 12px;
1613 font-size: 14px;
1614 line-height: 1.42857142;
1615 font-weight: 600;
1616}
1617
1618.media-selection .button-link {
1619 float: right;
1620 padding: 1px 8px;
1621 margin: 1px -8px 1px 8px;
1622 line-height: 1.4;
1623 border-left: 1px solid #dcdcde;
1624 color: #2271b1;
1625 text-decoration: none;
1626}
1627
1628.media-selection .button-link:hover,
1629.media-selection .button-link:focus {
1630 color: #135e96;
1631}
1632
1633.media-selection .button-link:last-child {
1634 border-left: 0;
1635 margin-left: 0;
1636}
1637
1638.selection-info .clear-selection {
1639 color: #d63638;
1640}
1641
1642.selection-info .clear-selection:hover,
1643.selection-info .clear-selection:focus {
1644 color: #d63638;
1645}
1646
1647.media-selection .selection-view {
1648 display: inline-block;
1649 vertical-align: top;
1650}
1651
1652.media-selection .attachments {
1653 display: inline-block;
1654 height: 48px;
1655 margin: 6px;
1656 padding: 0;
1657 overflow: hidden;
1658 vertical-align: top;
1659}
1660
1661.media-selection .attachment {
1662 width: 40px;
1663 padding: 0;
1664 margin: 4px;
1665}
1666
1667.media-selection .attachment .thumbnail {
1668 top: 0;
1669 left: 0;
1670 bottom: 0;
1671 right: 0;
1672}
1673
1674.media-selection .attachment .icon {
1675 width: 50%;
1676}
1677
1678.media-selection .attachment-preview {
1679 box-shadow: none;
1680 background: none;
1681}
1682
1683.wp-core-ui .media-selection .attachment:focus,
1684.wp-core-ui .media-selection .selected.attachment:focus,
1685.wp-core-ui .media-selection .attachment.details:focus {
1686 box-shadow:
1687 0 0 0 1px #fff,
1688 0 0 2px 3px #4f94d4;
1689 /* Only visible in Windows High Contrast mode */
1690 outline: 2px solid transparent;
1691}
1692
1693.wp-core-ui .media-selection .selected.attachment {
1694 box-shadow: none;
1695}
1696
1697.wp-core-ui .media-selection .attachment.details {
1698 box-shadow:
1699 0 0 0 1px #fff,
1700 0 0 0 3px #2271b1;
1701}
1702
1703.media-selection:after {
1704 content: "";
1705 display: block;
1706 position: absolute;
1707 top: 0;
1708 left: 0;
1709 bottom: 0;
1710 width: 25px;
1711 background-image: linear-gradient(to right,#fff,rgba(255, 255, 255, 0));
1712}
1713
1714.media-selection .attachment .filename {
1715 display: none;
1716}
1717
1718/**
1719 * Spinner
1720 */
1721.media-frame .spinner {
1722 background: url(../images/spinner.gif) no-repeat;
1723 background-size: 20px 20px;
1724 float: left;
1725 display: inline-block;
1726 visibility: hidden;
1727 opacity: 0.7;
1728 filter: alpha(opacity=70);
1729 width: 20px;
1730 height: 20px;
1731 margin: 0;
1732 vertical-align: middle;
1733}
1734
1735.media-frame .media-sidebar .settings-save-status .spinner {
1736 position: absolute;
1737 left: 0;
1738 top: 0;
1739}
1740
1741.media-frame.mode-grid .spinner {
1742 margin: 0;
1743 float: none;
1744 vertical-align: middle;
1745}
1746
1747.media-modal .media-toolbar .spinner {
1748 float: none;
1749 vertical-align: bottom;
1750 margin: 0 5px 5px 0;
1751}
1752
1753.media-frame .instructions + .spinner.is-active {
1754 vertical-align: middle;
1755}
1756
1757.media-frame .spinner.is-active {
1758 visibility: visible;
1759}
1760
1761/**
1762 * Attachment Details
1763 */
1764.attachment-details {
1765 position: relative;
1766 overflow: auto;
1767}
1768
1769.attachment-details .settings-save-status {
1770 text-align: left;
1771 text-transform: none;
1772 font-weight: 400;
1773}
1774
1775.attachment-details .settings-save-status .spinner {
1776 float: none;
1777 margin-right: 5px;
1778}
1779
1780.attachment-details .settings-save-status .saved {
1781 display: none;
1782}
1783
1784.attachment-details.save-waiting .settings-save-status .spinner {
1785 visibility: visible;
1786}
1787
1788.attachment-details.save-complete .settings-save-status .saved {
1789 display: inline-block;
1790}
1791
1792.attachment-info {
1793 overflow: hidden;
1794 min-height: 60px;
1795 margin-bottom: 16px;
1796 line-height: 1.5;
1797 color: #646970;
1798 border-bottom: 1px solid #dcdcde;
1799 padding-bottom: 11px;
1800}
1801
1802.attachment-info .wp-media-wrapper {
1803 margin-bottom: 8px;
1804}
1805
1806.attachment-info .wp-media-wrapper.wp-audio {
1807 margin-top: 13px;
1808}
1809
1810.attachment-info .filename {
1811 font-weight: 600;
1812 color: #3c434a;
1813 word-wrap: break-word;
1814}
1815
1816.attachment-info .thumbnail {
1817 position: relative;
1818 float: right;
1819 max-width: 120px;
1820 max-height: 120px;
1821 margin-top: 5px;
1822 margin-left: 10px;
1823 margin-bottom: 5px;
1824}
1825
1826.uploading .attachment-info .thumbnail {
1827 width: 120px;
1828 height: 80px;
1829 box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.1);
1830}
1831
1832.uploading .attachment-info .media-progress-bar {
1833 margin-top: 35px;
1834}
1835
1836.attachment-info .thumbnail-image:after {
1837 content: "";
1838 display: block;
1839 position: absolute;
1840 top: 0;
1841 right: 0;
1842 left: 0;
1843 bottom: 0;
1844 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
1845 overflow: hidden;
1846}
1847
1848.attachment-info .thumbnail img {
1849 display: block;
1850 max-width: 120px;
1851 max-height: 120px;
1852 margin: 0 auto;
1853}
1854
1855.attachment-info .details {
1856 float: right;
1857 font-size: 12px;
1858 max-width: 100%;
1859}
1860
1861.attachment-info .edit-attachment,
1862.attachment-info .delete-attachment,
1863.attachment-info .trash-attachment,
1864.attachment-info .untrash-attachment {
1865 display: block;
1866 text-decoration: none;
1867 white-space: nowrap;
1868}
1869
1870.attachment-details.needs-refresh .attachment-info .edit-attachment {
1871 display: none;
1872}
1873
1874.attachment-info .edit-attachment {
1875 display: block;
1876}
1877
1878.media-modal .delete-attachment,
1879.media-modal .trash-attachment,
1880.media-modal .untrash-attachment {
1881 display: inline;
1882 padding: 0;
1883 color: #d63638;
1884}
1885
1886.media-modal .delete-attachment:hover,
1887.media-modal .delete-attachment:focus,
1888.media-modal .trash-attachment:hover,
1889.media-modal .trash-attachment:focus,
1890.media-modal .untrash-attachment:hover,
1891.media-modal .untrash-attachment:focus {
1892 color: #d63638;
1893}
1894
1895/**
1896 * Attachment Display Settings
1897 */
1898.attachment-display-settings {
1899 width: 100%;
1900 float: right;
1901 overflow: hidden;
1902}
1903
1904.collection-settings {
1905 overflow: hidden;
1906}
1907
1908.collection-settings .setting input[type="checkbox"] {
1909 float: right;
1910 margin-left: 8px;
1911}
1912
1913.collection-settings .setting span, /* Back-compat for pre-5.3 */
1914.collection-settings .setting .name {
1915 min-width: inherit;
1916}
1917
1918/**
1919 * Image Editor
1920 */
1921.media-modal .imgedit-wrap {
1922 position: static;
1923}
1924
1925.media-modal .imgedit-wrap .imgedit-panel-content {
1926 padding: 16px 16px 0;
1927 overflow: visible;
1928}
1929
1930/*
1931 * Implementation of bottom padding in overflow content differs across browsers.
1932 * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
1933 */
1934.media-modal .imgedit-wrap .imgedit-save-target {
1935 margin: 8px 0 24px;
1936}
1937
1938.media-modal .imgedit-group {
1939 background: none;
1940 border: none;
1941 box-shadow: none;
1942 margin: 0;
1943 padding: 0;
1944 position: relative; /* RTL fix, #WP29352 */
1945}
1946
1947.media-modal .imgedit-group.imgedit-panel-active {
1948 margin-bottom: 16px;
1949 padding-bottom: 16px;
1950}
1951
1952.media-modal .imgedit-group-top {
1953 margin: 0;
1954}
1955
1956.media-modal .imgedit-group-top h2,
1957.media-modal .imgedit-group-top h2 .button-link {
1958 display: inline-block;
1959 text-transform: uppercase;
1960 font-size: 12px;
1961 color: #646970;
1962 margin: 0;
1963 margin-top: 3px;
1964}
1965
1966.media-modal .imgedit-group-top h2 a,
1967.media-modal .imgedit-group-top h2 .button-link {
1968 text-decoration: none;
1969 color: #646970;
1970}
1971
1972/* higher specificity than media.css */
1973.wp-core-ui.media-modal .image-editor .imgedit-help-toggle,
1974.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:hover,
1975.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:active {
1976 border: 1px solid transparent;
1977 margin: 0;
1978 padding: 0;
1979 background: transparent;
1980 color: #2271b1;
1981 font-size: 20px;
1982 line-height: 1;
1983 cursor: pointer;
1984 box-sizing: content-box;
1985 box-shadow: none;
1986}
1987
1988.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:focus {
1989 color: #2271b1;
1990 border-color: #2271b1;
1991 box-shadow: 0 0 0 1px #2271b1;
1992 /* Only visible in Windows High Contrast mode */
1993 outline: 2px solid transparent;
1994}
1995
1996.wp-core-ui.media-modal .imgedit-group-top .dashicons-arrow-down.imgedit-help-toggle {
1997 margin-top: -3px;
1998}
1999
2000.wp-core-ui.media-modal .image-editor h3 .imgedit-help-toggle {
2001 margin-top: -2px;
2002}
2003
2004.media-modal .imgedit-help-toggled span.dashicons:before {
2005 content: "\f142";
2006 content: "\f142" / '';
2007}
2008
2009.media-modal .imgedit-thumbnail-preview {
2010 margin: 10px 0 0 8px;
2011}
2012
2013.imgedit-thumbnail-preview-caption {
2014 display: block;
2015}
2016
2017.media-modal .imgedit-wrap div.updated, /* Back-compat for pre-5.5 */
2018.media-modal .imgedit-wrap .notice {
2019 margin: 0 16px;
2020}
2021
2022/**
2023 * Embed from URL and Image Details
2024 */
2025.embed-url {
2026 display: block;
2027 position: relative;
2028 padding: 16px;
2029 margin: 0;
2030 z-index: 250;
2031 background: #fff;
2032 font-size: 18px;
2033}
2034
2035.media-frame .embed-url input {
2036 font-size: 18px;
2037 line-height: 1.22222222; /* 22px */
2038 padding: 12px 14px 12px 40px; /* right padding to leave room for the spinner */
2039 width: 100%;
2040 min-width: 200px;
2041 box-shadow: inset -2px 2px 4px -2px rgba(0, 0, 0, 0.1);
2042}
2043
2044.media-frame .embed-url input::-ms-clear {
2045 display: none; /* the "x" in IE 11 conflicts with the spinner */
2046}
2047
2048.media-frame .embed-url .spinner {
2049 position: absolute;
2050 top: 32px;
2051 left: 26px;
2052}
2053
2054.media-frame .embed-loading .embed-url .spinner {
2055 visibility: visible;
2056}
2057
2058.embed-link-settings,
2059.embed-media-settings {
2060 position: absolute;
2061 top: 82px;
2062 right: 0;
2063 left: 0;
2064 bottom: 0;
2065 padding: 0 16px;
2066 overflow: auto;
2067}
2068
2069.media-embed .embed-link-settings .link-text {
2070 margin-top: 0;
2071}
2072
2073/*
2074 * Implementation of bottom padding in overflow content differs across browsers.
2075 * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
2076 */
2077.embed-link-settings::after,
2078.embed-media-settings::after {
2079 content: "";
2080 display: flex;
2081 clear: both;
2082 height: 24px;
2083}
2084
2085.media-embed .embed-link-settings {
2086 /* avoid Firefox to give focus to the embed preview container parent */
2087 overflow: visible;
2088}
2089
2090.embed-preview img,
2091.embed-preview iframe,
2092.embed-preview embed,
2093.mejs-container video {
2094 max-width: 100%;
2095 vertical-align: middle;
2096}
2097
2098.embed-preview a {
2099 display: inline-block;
2100}
2101
2102.embed-preview img {
2103 display: block;
2104 height: auto;
2105}
2106
2107.mejs-container:focus {
2108 outline: 1px solid #2271b1;
2109 box-shadow: 0 0 0 2px #2271b1;
2110}
2111
2112.image-details .media-modal {
2113 right: 140px;
2114 left: 140px;
2115}
2116
2117.image-details .media-frame-title,
2118.image-details .media-frame-content,
2119.image-details .media-frame-router {
2120 right: 0;
2121}
2122
2123.image-details .embed-media-settings {
2124 top: 0;
2125 overflow: visible;
2126 padding: 0;
2127}
2128
2129.image-details .embed-media-settings::after {
2130 content: none;
2131}
2132
2133.image-details .embed-media-settings,
2134.image-details .embed-media-settings div {
2135 box-sizing: border-box;
2136}
2137
2138.image-details .column-settings {
2139 background: #f6f7f7;
2140 border-left: 1px solid #dcdcde;
2141 min-height: 100%;
2142 width: 55%;
2143 position: absolute;
2144 top: 0;
2145 right: 0;
2146}
2147
2148.image-details .column-settings h2 {
2149 margin: 20px;
2150 padding-top: 20px;
2151 border-top: 1px solid #dcdcde;
2152 color: #1d2327;
2153}
2154
2155.image-details .column-image {
2156 width: 45%;
2157 position: absolute;
2158 right: 55%;
2159 top: 0;
2160}
2161
2162.image-details .image {
2163 margin: 20px;
2164}
2165
2166.image-details .image img {
2167 max-width: 100%;
2168 max-height: 500px;
2169}
2170
2171.image-details .advanced-toggle {
2172 padding: 0;
2173 color: #646970;
2174 text-transform: uppercase;
2175 text-decoration: none;
2176}
2177
2178.image-details .advanced-toggle:hover,
2179.image-details .advanced-toggle:active {
2180 color: #646970;
2181}
2182
2183.image-details .advanced-toggle:after {
2184 font: normal 20px/1 dashicons;
2185 vertical-align: top;
2186 -webkit-font-smoothing: antialiased;
2187 -moz-osx-font-smoothing: grayscale;
2188 content: "\f140";
2189 content: "\f140" / '';
2190 display: inline-block;
2191 margin-top: -2px;
2192}
2193
2194.image-details .advanced-visible .advanced-toggle:after {
2195 content: "\f142";
2196 content: "\f142" / '';
2197}
2198
2199.image-details .custom-size label, /* Back-compat for pre-5.3 */
2200.image-details .custom-size .custom-size-setting {
2201 display: block;
2202 float: right;
2203}
2204
2205.image-details .custom-size .custom-size-setting label {
2206 float: none;
2207}
2208
2209.image-details .custom-size input {
2210 width: 5em;
2211}
2212
2213.image-details .custom-size .sep {
2214 float: right;
2215 margin: 26px 6px 0;
2216}
2217
2218.image-details .custom-size .description {
2219 margin-right: 0;
2220}
2221
2222.media-embed .thumbnail {
2223 max-width: 100%;
2224 max-height: 200px;
2225 position: relative;
2226 float: right;
2227}
2228
2229.media-embed .thumbnail img {
2230 max-height: 200px;
2231 display: block;
2232}
2233
2234.media-embed .thumbnail:after {
2235 content: "";
2236 display: block;
2237 position: absolute;
2238 top: 0;
2239 right: 0;
2240 left: 0;
2241 bottom: 0;
2242 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
2243 overflow: hidden;
2244}
2245
2246.media-embed .setting,
2247.media-embed .setting-group {
2248 width: 100%;
2249 margin: 10px 0;
2250 float: right;
2251 display: block;
2252 clear: both;
2253}
2254
2255.media-embed .setting-group .setting:not(.checkbox-setting) {
2256 margin: 0;
2257}
2258
2259.media-embed .setting.has-description {
2260 margin-bottom: 5px;
2261}
2262
2263.media-embed .description {
2264 clear: both;
2265 font-style: normal;
2266}
2267
2268.media-embed .content-track + .description {
2269 line-height: 1.4;
2270 /* The !important needs to override a high specificity selector from wp-medialement.css */
2271 max-width: none !important;
2272}
2273
2274.media-embed .remove-track {
2275 margin-bottom: 10px;
2276}
2277
2278.image-details .embed-media-settings .setting,
2279.image-details .embed-media-settings .setting-group {
2280 float: none;
2281 width: auto;
2282}
2283
2284.image-details .actions {
2285 margin: 10px 0;
2286}
2287
2288.image-details .hidden {
2289 display: none;
2290}
2291
2292.media-embed .setting input[type="text"],
2293.media-embed .setting textarea,
2294.media-embed fieldset {
2295 display: block;
2296 width: 100%;
2297 max-width: 400px;
2298}
2299
2300.image-details .embed-media-settings .setting input[type="text"],
2301.image-details .embed-media-settings .setting textarea {
2302 max-width: inherit;
2303 width: 70%;
2304}
2305
2306.image-details .embed-media-settings .setting input.link-to-custom,
2307.image-details .embed-media-settings .link-target,
2308.image-details .embed-media-settings .custom-size,
2309.image-details .embed-media-settings .setting-group,
2310.image-details .description {
2311 margin-right: 27%;
2312 width: 70%;
2313}
2314
2315.image-details .description {
2316 font-style: normal;
2317 margin-top: 0;
2318}
2319
2320.image-details .embed-media-settings .link-target {
2321 margin-top: 16px;
2322}
2323
2324.image-details .checkbox-label,
2325.audio-details .checkbox-label,
2326.video-details .checkbox-label {
2327 vertical-align: baseline;
2328}
2329
2330.media-embed .setting input.hidden,
2331.media-embed .setting textarea.hidden {
2332 display: none;
2333}
2334
2335.media-embed .setting span, /* Back-compat for pre-5.3 */
2336.media-embed .setting .name,
2337.media-embed .setting-group .name {
2338 display: inline-block;
2339 font-size: 13px;
2340 line-height: 1.84615384;
2341 color: #646970;
2342}
2343
2344.media-embed .setting span {
2345 display: block; /* Back-compat for pre-5.3 */
2346 width: 200px; /* Back-compat for pre-5.3 */
2347}
2348
2349.image-details .embed-media-settings .setting span, /* Back-compat for pre-5.3 */
2350.image-details .embed-media-settings .setting .name {
2351 float: right;
2352 width: 25%;
2353 text-align: left;
2354 margin: 8px 1% 0;
2355 line-height: 1.1;
2356}
2357
2358/* Buttons group in IE 11. */
2359.media-frame .setting-group .button-group,
2360.image-details .embed-media-settings .setting .button-group {
2361 width: auto;
2362}
2363
2364.media-embed-sidebar {
2365 position: absolute;
2366 top: 0;
2367 right: 440px;
2368}
2369
2370.advanced-section,
2371.link-settings {
2372 margin-top: 10px;
2373}
2374
2375/**
2376 * Button groups fix: can be removed together with the Back-compat for pre-5.3
2377 */
2378 .media-frame .setting .button-group {
2379 display: flex;
2380 margin: 0 !important;
2381 max-width: none !important;
2382 }
2383
2384/**
2385 * Localization
2386 */
2387.rtl .media-modal,
2388.rtl .media-frame,
2389.rtl .media-frame .search,
2390.rtl .media-frame input[type="text"],
2391.rtl .media-frame input[type="password"],
2392.rtl .media-frame input[type="number"],
2393.rtl .media-frame input[type="search"],
2394.rtl .media-frame input[type="email"],
2395.rtl .media-frame input[type="url"],
2396.rtl .media-frame input[type="tel"],
2397.rtl .media-frame textarea,
2398.rtl .media-frame select {
2399 font-family: Tahoma, sans-serif;
2400}
2401
2402:lang(he-il) .rtl .media-modal,
2403:lang(he-il) .rtl .media-frame,
2404:lang(he-il) .rtl .media-frame .search,
2405:lang(he-il) .rtl .media-frame input[type="text"],
2406:lang(he-il) .rtl .media-frame input[type="password"],
2407:lang(he-il) .rtl .media-frame input[type="number"],
2408:lang(he-il) .rtl .media-frame input[type="search"],
2409:lang(he-il) .rtl .media-frame input[type="email"],
2410:lang(he-il) .rtl .media-frame input[type="url"],
2411:lang(he-il) .rtl .media-frame textarea,
2412:lang(he-il) .rtl .media-frame select {
2413 font-family: Arial, sans-serif;
2414}
2415
2416/**
2417 * Responsive layout
2418 */
2419@media only screen and (max-width: 900px) {
2420 .media-modal .media-frame-title {
2421 height: 40px;
2422 }
2423
2424 .media-modal .media-frame-title h1 {
2425 line-height: 2.22222222;
2426 font-size: 18px;
2427 }
2428
2429 .media-modal-close {
2430 width: 42px;
2431 height: 42px;
2432 }
2433
2434 /* Drop-down menu */
2435 .media-frame .media-frame-title {
2436 position: static;
2437 padding: 0 44px;
2438 text-align: center;
2439 }
2440
2441 .media-frame:not(.hide-menu) .media-frame-router,
2442 .media-frame:not(.hide-menu) .media-frame-content,
2443 .media-frame:not(.hide-menu) .media-frame-toolbar {
2444 right: 0;
2445 }
2446
2447 .media-frame:not(.hide-menu) .media-frame-router {
2448 /* 40 title + (40 - 6) menu toggle button + 6 spacing */
2449 top: 80px;
2450 }
2451
2452 .media-frame:not(.hide-menu) .media-frame-content {
2453 /* 80 + room for the tabs */
2454 top: 114px;
2455 }
2456
2457 .media-frame.hide-router .media-frame-content {
2458 top: 80px;
2459 }
2460
2461 .media-frame:not(.hide-menu) .media-frame-menu {
2462 position: static;
2463 width: 0;
2464 }
2465
2466 .media-frame:not(.hide-menu) .media-menu {
2467 display: none;
2468 width: auto;
2469 max-width: 80%;
2470 overflow: auto;
2471 z-index: 2000;
2472 top: 75px;
2473 right: 50%;
2474 transform: translateX(50%);
2475 left: auto;
2476 bottom: auto;
2477 padding: 5px 0;
2478 border: 1px solid #c3c4c7;
2479 }
2480
2481 .media-frame:not(.hide-menu) .media-menu.visible {
2482 display: block;
2483 }
2484
2485 .media-frame:not(.hide-menu) .media-menu > a {
2486 padding: 12px 16px;
2487 font-size: 16px;
2488 }
2489
2490 .media-frame:not(.hide-menu) .media-menu .separator {
2491 margin: 5px 10px;
2492 }
2493
2494 /* Visually hide the menu heading keeping it available to assistive technologies. */
2495 .media-frame-menu-heading {
2496 clip-path: inset(50%);
2497 height: 1px;
2498 overflow: hidden;
2499 padding: 0;
2500 width: 1px;
2501 border: 0;
2502 margin: -1px;
2503 word-wrap: normal !important;
2504 }
2505
2506 /* Reveal the menu toggle button. */
2507 .wp-core-ui .media-frame:not(.hide-menu) .button.media-frame-menu-toggle {
2508 display: inline-flex;
2509 align-items: center;
2510 position: absolute;
2511 right: 50%;
2512 transform: translateX(50%);
2513 margin: -6px 0 0;
2514 padding: 0 12px 0 2px;
2515 font-size: 0.875rem;
2516 font-weight: 600;
2517 text-decoration: none;
2518 background: transparent;
2519 /* Only for IE11 to vertically align text within the inline-flex button */
2520 height: 0.1%;
2521 /* Modern browsers */
2522 min-height: 40px;
2523 }
2524
2525 .wp-core-ui .button.media-frame-menu-toggle:hover,
2526 .wp-core-ui .button.media-frame-menu-toggle:active {
2527 background: transparent;
2528 transform: none;
2529 }
2530
2531 .wp-core-ui .button.media-frame-menu-toggle:focus {
2532 /* Only visible in Windows High Contrast mode */
2533 outline: 1px solid transparent;
2534 }
2535 /* End drop-down menu */
2536
2537 .media-sidebar {
2538 width: 230px;
2539 }
2540
2541 .options-general-php .crop-content.site-icon,
2542 .wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon {
2543 margin-left: 262px;
2544 }
2545
2546 .attachments-browser .attachments,
2547 .attachments-browser .uploader-inline,
2548 .attachments-browser .media-toolbar,
2549 .attachments-browser .attachments-wrapper,
2550 .attachments-browser.has-load-more .attachments-wrapper {
2551 left: 262px;
2552 }
2553
2554 .attachments-browser .media-toolbar {
2555 height: 82px;
2556 }
2557
2558 .attachments-browser .attachments,
2559 .attachments-browser .uploader-inline,
2560 .media-frame-content .attachments-browser .attachments-wrapper {
2561 top: 82px;
2562 }
2563
2564 .media-sidebar .setting,
2565 .attachment-details .setting {
2566 margin: 6px 0;
2567 }
2568
2569 .media-sidebar .setting input,
2570 .media-sidebar .setting textarea,
2571 .media-sidebar .setting .name,
2572 .attachment-details .setting input,
2573 .attachment-details .setting textarea,
2574 .attachment-details .setting .name,
2575 .compat-item label span {
2576 float: none;
2577 display: inline-block;
2578 }
2579
2580 .media-sidebar .setting span, /* Back-compat for pre-5.3 */
2581 .attachment-details .setting span, /* Back-compat for pre-5.3 */
2582 .media-sidebar .checkbox-label-inline {
2583 float: none;
2584 }
2585
2586 .media-sidebar .setting .select-label-inline {
2587 display: inline;
2588 }
2589
2590 .media-sidebar .setting .name,
2591 .media-sidebar .checkbox-label-inline,
2592 .attachment-details .setting .name,
2593 .compat-item label span {
2594 text-align: inherit;
2595 min-height: 16px;
2596 margin: 0;
2597 padding: 8px 2px 2px;
2598 }
2599
2600 /* Needs high specificity. */
2601 .media-sidebar .setting .copy-to-clipboard-container,
2602 .attachment-details .attachment-info .copy-to-clipboard-container {
2603 margin-right: 0;
2604 padding-top: 0;
2605 }
2606
2607 .media-sidebar .setting .copy-attachment-url,
2608 .attachment-details .attachment-info .copy-attachment-url {
2609 margin: 0 1px;
2610 }
2611
2612 .media-sidebar .setting .value,
2613 .attachment-details .setting .value {
2614 float: none;
2615 width: auto;
2616 }
2617
2618 .media-sidebar .setting input[type="text"],
2619 .media-sidebar .setting input[type="password"],
2620 .media-sidebar .setting input[type="email"],
2621 .media-sidebar .setting input[type="number"],
2622 .media-sidebar .setting input[type="search"],
2623 .media-sidebar .setting input[type="tel"],
2624 .media-sidebar .setting input[type="url"],
2625 .media-sidebar .setting textarea,
2626 .media-sidebar .setting select,
2627 .attachment-details .setting input[type="text"],
2628 .attachment-details .setting input[type="password"],
2629 .attachment-details .setting input[type="email"],
2630 .attachment-details .setting input[type="number"],
2631 .attachment-details .setting input[type="search"],
2632 .attachment-details .setting input[type="tel"],
2633 .attachment-details .setting input[type="url"],
2634 .attachment-details .setting textarea,
2635 .attachment-details .setting select,
2636 .attachment-details .setting + .description {
2637 float: none;
2638 width: 98%;
2639 max-width: none;
2640 height: auto;
2641 }
2642
2643 .media-frame .media-toolbar input[type="search"] {
2644 line-height: 2.25; /* 36px */
2645 }
2646
2647 .media-sidebar .setting select.columns,
2648 .attachment-details .setting select.columns {
2649 width: auto;
2650 }
2651
2652 .media-frame input,
2653 .media-frame textarea,
2654 .media-frame .search {
2655 padding: 3px 6px;
2656 }
2657
2658 .wp-admin .media-frame select {
2659 min-height: 40px;
2660 font-size: 16px;
2661 line-height: 1.625;
2662 padding: 5px 8px 5px 24px;
2663 }
2664
2665 .image-details .column-image {
2666 width: 30%;
2667 right: 70%;
2668 }
2669
2670 .image-details .column-settings {
2671 width: 70%;
2672 }
2673
2674 .image-details .media-modal {
2675 right: 30px;
2676 left: 30px;
2677 }
2678
2679 .image-details .embed-media-settings .setting,
2680 .image-details .embed-media-settings .setting-group {
2681 margin: 20px;
2682 }
2683
2684 .image-details .embed-media-settings .setting span, /* Back-compat for pre-5.3 */
2685 .image-details .embed-media-settings .setting .name {
2686 float: none;
2687 text-align: right;
2688 width: 100%;
2689 margin-bottom: 4px;
2690 margin-right: 0;
2691 }
2692
2693 .media-modal .legend-inline {
2694 position: static;
2695 transform: none;
2696 margin-right: 0;
2697 margin-bottom: 6px;
2698 }
2699
2700 .image-details .embed-media-settings .setting-group .setting {
2701 margin-bottom: 0;
2702 }
2703
2704 .image-details .embed-media-settings .setting input.link-to-custom,
2705 .image-details .embed-media-settings .setting input[type="text"],
2706 .image-details .embed-media-settings .setting textarea {
2707 width: 100%;
2708 margin-right: 0;
2709 }
2710
2711 .image-details .embed-media-settings .setting.has-description {
2712 margin-bottom: 5px;
2713 }
2714
2715 .image-details .description {
2716 width: auto;
2717 margin: 0 20px;
2718 }
2719
2720 .image-details .embed-media-settings .custom-size {
2721 margin-right: 20px;
2722 }
2723
2724 .collection-settings .setting input[type="checkbox"] {
2725 float: none;
2726 margin-top: 0;
2727 }
2728
2729 .media-selection {
2730 min-width: 120px;
2731 }
2732
2733 .media-selection:after {
2734 background: none;
2735 }
2736
2737 .media-selection .attachments {
2738 display: none;
2739 }
2740
2741 .media-modal .attachments-browser .media-toolbar .search {
2742 max-width: 100%;
2743 height: auto;
2744 float: left;
2745 }
2746
2747 .media-modal .attachments-browser .media-toolbar .attachment-filters {
2748 height: auto;
2749 }
2750
2751 /* Text inputs need to be 16px, or they force zooming on iOS */
2752 .media-frame input[type="text"],
2753 .media-frame input[type="password"],
2754 .media-frame input[type="number"],
2755 .media-frame input[type="search"],
2756 .media-frame input[type="email"],
2757 .media-frame input[type="url"],
2758 .media-frame textarea,
2759 .media-frame select {
2760 font-size: 16px;
2761 line-height: 1.5;
2762 }
2763
2764 .media-frame .media-toolbar input[type="search"] {
2765 line-height: 2.3755; /* 38px */
2766 }
2767
2768 .media-modal .media-toolbar .spinner {
2769 margin-bottom: 10px;
2770 }
2771}
2772
2773@media screen and (max-width: 782px) {
2774 .imgedit-panel-content {
2775 grid-template-columns: auto;
2776 }
2777
2778 .media-frame-toolbar .media-toolbar {
2779 bottom: -54px;
2780 }
2781
2782 .mode-grid .attachments-browser .media-toolbar-primary {
2783 display: grid;
2784 grid-template-columns: auto 1fr;
2785 }
2786
2787 .mode-grid .attachments-browser .media-toolbar-primary input[type="search"] {
2788 width: 100%;
2789 }
2790
2791 .media-sidebar .copy-to-clipboard-container .success,
2792 .attachment-details .copy-to-clipboard-container .success {
2793 font-size: 14px;
2794 line-height: 2.71428571;
2795 }
2796
2797 .media-frame .wp-filter .media-toolbar-secondary {
2798 position: unset;
2799 }
2800
2801 .media-frame .media-toolbar-secondary .spinner {
2802 position: absolute;
2803 top: 0;
2804 bottom: 0;
2805 margin: auto;
2806 right: 0;
2807 left: 0;
2808 z-index: 9;
2809 }
2810
2811 .media-bg-overlay {
2812 content: '';
2813 background: #ffffff;
2814 width: 100%;
2815 height: 100%;
2816 display: none;
2817 position: absolute;
2818 right: 0;
2819 left: 0;
2820 top: 0;
2821 bottom: 0;
2822 opacity: 0.6;
2823 }
2824}
2825
2826/* Responsive on portrait and landscape */
2827@media only screen and (max-width: 640px), screen and (max-height: 400px) {
2828 /* Full-bleed modal */
2829 .media-modal,
2830 .image-details .media-modal {
2831 position: fixed;
2832 top: 0;
2833 right: 0;
2834 left: 0;
2835 bottom: 0;
2836 }
2837
2838 .media-modal-backdrop {
2839 position: fixed;
2840 }
2841
2842 .options-general-php .crop-content.site-icon,
2843 .wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon {
2844 margin-left: 0;
2845 }
2846
2847 .media-sidebar {
2848 z-index: 1900;
2849 max-width: 70%;
2850 bottom: 120%;
2851 box-sizing: border-box;
2852 padding-bottom: 0;
2853 }
2854
2855 .media-sidebar.visible {
2856 bottom: 0;
2857 }
2858
2859 .attachments-browser .attachments,
2860 .attachments-browser .uploader-inline,
2861 .attachments-browser .media-toolbar,
2862 .media-frame-content .attachments-browser .attachments-wrapper {
2863 left: 0;
2864 }
2865
2866 .image-details .media-frame-title {
2867 display: block;
2868 top: 0;
2869 font-size: 14px;
2870 }
2871
2872 .image-details .column-image,
2873 .image-details .column-settings {
2874 width: 100%;
2875 position: relative;
2876 right: 0;
2877 }
2878
2879 .image-details .column-settings {
2880 padding: 4px 0;
2881 }
2882
2883 /* Media tabs on the top */
2884 .media-frame-content .media-toolbar .instructions {
2885 display: none;
2886 }
2887
2888 /* Change margin direction on load more button in responsive views. */
2889 .load-more-wrapper .load-more-jump {
2890 margin: 12px 0 0;
2891 }
2892
2893}
2894
2895@media only screen and (min-width: 901px) and (max-height: 400px) {
2896 .media-menu,
2897 .media-frame:not(.hide-menu) .media-menu {
2898 top: 0;
2899 padding-top: 44px;
2900 }
2901
2902 /* Change margin direction on load more button in responsive views. */
2903 .load-more-wrapper .load-more-jump {
2904 margin: 12px 0 0;
2905 }
2906
2907}
2908
2909@media only screen and (max-width: 480px) {
2910 .wp-core-ui.wp-customizer .media-button {
2911 margin-top: 13px;
2912 }
2913}
2914
2915/**
2916 * HiDPI Displays
2917 */
2918@media print,
2919 (min-resolution: 120dpi) {
2920
2921 .wp-core-ui .media-modal-icon {
2922 background-image: url(../images/uploader-icons-2x.png);
2923 background-size: 134px 15px;
2924 }
2925
2926 .media-frame .spinner {
2927 background-image: url(../images/spinner-2x.gif);
2928 }
2929}
2930
2931.media-frame-content[data-columns="1"] .attachment {
2932 width: 100%;
2933}
2934
2935.media-frame-content[data-columns="2"] .attachment {
2936 width: 50%;
2937}
2938
2939.media-frame-content[data-columns="3"] .attachment {
2940 width: 33.33%;
2941}
2942
2943.media-frame-content[data-columns="4"] .attachment {
2944 width: 25%;
2945}
2946
2947.media-frame-content[data-columns="5"] .attachment {
2948 width: 20%;
2949}
2950
2951.media-frame-content[data-columns="6"] .attachment {
2952 width: 16.66%;
2953}
2954
2955.media-frame-content[data-columns="7"] .attachment {
2956 width: 14.28%;
2957}
2958
2959.media-frame-content[data-columns="8"] .attachment {
2960 width: 12.5%;
2961}
2962
2963.media-frame-content[data-columns="9"] .attachment {
2964 width: 11.11%;
2965}
2966
2967.media-frame-content[data-columns="10"] .attachment {
2968 width: 10%;
2969}
2970
2971.media-frame-content[data-columns="11"] .attachment {
2972 width: 9.09%;
2973}
2974
2975.media-frame-content[data-columns="12"] .attachment {
2976 width: 8.33%;
2977}
2978