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