| changeset 16 | a86126ab1dd4 |
| parent 9 | 177826044cd9 |
| child 18 | be944660c56a |
| 15:3d4e9c994f10 | 16:a86126ab1dd4 |
|---|---|
1 /*! This file is auto-generated */ |
|
1 /** |
2 /** |
2 * Base Styles |
3 * Base Styles |
3 */ |
4 */ |
4 .media-modal * { |
5 .media-modal * { |
5 box-sizing: content-box; |
6 box-sizing: content-box; |
16 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
17 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
17 font-size: 12px; |
18 font-size: 12px; |
18 -webkit-overflow-scrolling: touch; |
19 -webkit-overflow-scrolling: touch; |
19 } |
20 } |
20 |
21 |
21 .media-modal legend, |
22 .media-modal legend { |
23 padding: 0; |
|
24 font-size: 13px; |
|
25 } |
|
26 |
|
22 .media-modal label { |
27 .media-modal label { |
23 font-size: 13px; |
28 font-size: 13px; |
24 } |
29 } |
25 |
30 |
26 .media-frame input, |
31 .media-modal .legend-inline { |
27 .media-frame textarea { |
32 position: absolute; |
28 padding: 6px 8px; |
33 transform: translate(100%, 50%); |
29 } |
34 margin-right: -1%; |
30 |
35 line-height: 1.2; |
31 .media-frame select, |
|
32 .wp-admin .media-frame select { |
|
33 line-height: 28px; |
|
34 margin-top: 3px; |
|
35 } |
36 } |
36 |
37 |
37 .media-frame a { |
38 .media-frame a { |
38 border-bottom: none; |
39 border-bottom: none; |
39 color: #0073aa; |
40 color: #0073aa; |
40 } |
41 } |
41 |
42 |
42 .media-frame a:hover, |
43 .media-frame a:hover, |
43 .media-frame a:active { |
44 .media-frame a:active { |
44 color: #00a0d2; |
45 color: #006799; |
45 } |
46 } |
46 |
47 |
47 .media-frame a:focus { |
48 .media-frame a:focus { |
48 box-shadow: |
49 box-shadow: |
49 0 0 0 1px #5b9dd9, |
50 0 0 0 1px #5b9dd9, |
64 .media-frame a.button-primary, |
65 .media-frame a.button-primary, |
65 .media-frame a.button-primary:hover { |
66 .media-frame a.button-primary:hover { |
66 color: #fff; |
67 color: #fff; |
67 } |
68 } |
68 |
69 |
70 .media-frame input, |
|
71 .media-frame textarea { |
|
72 padding: 6px 8px; |
|
73 } |
|
74 |
|
75 .media-frame select, |
|
76 .wp-admin .media-frame select { |
|
77 min-height: 30px; |
|
78 vertical-align: middle; |
|
79 } |
|
80 |
|
69 .media-frame input[type="text"], |
81 .media-frame input[type="text"], |
70 .media-frame input[type="password"], |
82 .media-frame input[type="password"], |
83 .media-frame input[type="color"], |
|
84 .media-frame input[type="date"], |
|
85 .media-frame input[type="datetime"], |
|
86 .media-frame input[type="datetime-local"], |
|
87 .media-frame input[type="email"], |
|
88 .media-frame input[type="month"], |
|
71 .media-frame input[type="number"], |
89 .media-frame input[type="number"], |
72 .media-frame input[type="search"], |
90 .media-frame input[type="search"], |
73 .media-frame input[type="email"], |
91 .media-frame input[type="tel"], |
92 .media-frame input[type="time"], |
|
74 .media-frame input[type="url"], |
93 .media-frame input[type="url"], |
94 .media-frame input[type="week"], |
|
75 .media-frame textarea, |
95 .media-frame textarea, |
76 .media-frame select { |
96 .media-frame select { |
97 box-shadow: 0 0 0 transparent; |
|
98 border-radius: 4px; |
|
99 border: 1px solid #7e8993; |
|
100 background-color: #fff; |
|
101 color: #32373c; |
|
77 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
102 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
78 font-size: 12px; |
103 font-size: 13px; |
79 border-width: 1px; |
104 } |
80 border-style: solid; |
105 |
81 border-color: #ddd; |
106 .media-frame input[type="text"], |
107 .media-frame input[type="password"], |
|
108 .media-frame input[type="date"], |
|
109 .media-frame input[type="datetime"], |
|
110 .media-frame input[type="datetime-local"], |
|
111 .media-frame input[type="email"], |
|
112 .media-frame input[type="month"], |
|
113 .media-frame input[type="number"], |
|
114 .media-frame input[type="search"], |
|
115 .media-frame input[type="tel"], |
|
116 .media-frame input[type="time"], |
|
117 .media-frame input[type="url"], |
|
118 .media-frame input[type="week"] { |
|
119 padding: 0 8px; |
|
120 /* inherits font size 13px */ |
|
121 line-height: 2.15384615; /* 28px */ |
|
122 } |
|
123 |
|
124 /* Search field in the Media Library toolbar */ |
|
125 .media-frame.mode-grid .wp-filter input[type="search"] { |
|
126 font-size: 14px; |
|
127 line-height: 2; |
|
82 } |
128 } |
83 |
129 |
84 .media-frame input[type="text"]:focus, |
130 .media-frame input[type="text"]:focus, |
85 .media-frame input[type="password"]:focus, |
131 .media-frame input[type="password"]:focus, |
86 .media-frame input[type="number"]:focus, |
132 .media-frame input[type="number"]:focus, |
87 .media-frame input[type="search"]:focus, |
133 .media-frame input[type="search"]:focus, |
88 .media-frame input[type="email"]:focus, |
134 .media-frame input[type="email"]:focus, |
89 .media-frame input[type="url"]:focus, |
135 .media-frame input[type="url"]:focus, |
90 .media-frame textarea:focus, |
136 .media-frame textarea:focus, |
91 .media-frame select:focus { |
137 .media-frame select:focus { |
92 border-color: #5b9dd9; |
138 border-color: #007cba; |
93 } |
139 box-shadow: 0 0 0 1px #007cba; |
94 |
140 outline: 2px solid transparent; |
95 .media-frame select { |
|
96 height: 24px; |
|
97 padding: 2px; |
|
98 } |
141 } |
99 |
142 |
100 .media-frame input:disabled, |
143 .media-frame input:disabled, |
101 .media-frame textarea:disabled, |
144 .media-frame textarea:disabled, |
102 .media-frame input[readonly], |
145 .media-frame input[readonly], |
119 |
162 |
120 .media-frame :-ms-input-placeholder { |
163 .media-frame :-ms-input-placeholder { |
121 color: #72777c; |
164 color: #72777c; |
122 } |
165 } |
123 |
166 |
124 .media-frame .hidden { |
167 /* |
168 * In some cases there's the need of higher specificity, |
|
169 * for example higher than `.media-embed .setting`. |
|
170 */ |
|
171 .media-frame .hidden, |
|
172 .media-frame .setting.hidden { |
|
125 display: none; |
173 display: none; |
126 } |
174 } |
127 |
175 |
128 /*! |
176 /*! |
129 * jQuery UI Draggable/Sortable 1.11.4 |
177 * jQuery UI Draggable/Sortable 1.11.4 |
187 transition: color .1s ease-in-out, background .1s ease-in-out; |
235 transition: color .1s ease-in-out, background .1s ease-in-out; |
188 } |
236 } |
189 |
237 |
190 .media-modal-close:hover, |
238 .media-modal-close:hover, |
191 .media-modal-close:active { |
239 .media-modal-close:active { |
192 color: #00a0d2; |
240 color: #006799; |
193 } |
241 } |
194 |
242 |
195 .media-modal-close:focus { |
243 .media-modal-close:focus { |
196 color: #00a0d2; |
244 color: #006799; |
197 border-color: #5b9dd9; |
245 border-color: #5b9dd9; |
198 box-shadow: 0 0 3px rgba(0, 115, 170, 0.8); |
246 box-shadow: 0 0 3px rgba(0, 115, 170, 0.8); |
199 /* Only visible in Windows High Contrast mode */ |
247 /* Only visible in Windows High Contrast mode */ |
200 outline: 2px solid transparent; |
248 outline: 2px solid transparent; |
201 outline-offset: -2px; |
|
202 } |
249 } |
203 |
250 |
204 .media-modal-close span.media-modal-icon { |
251 .media-modal-close span.media-modal-icon { |
205 background-image: none; |
252 background-image: none; |
206 } |
253 } |
226 background: #fcfcfc; |
273 background: #fcfcfc; |
227 -webkit-font-smoothing: subpixel-antialiased; |
274 -webkit-font-smoothing: subpixel-antialiased; |
228 } |
275 } |
229 |
276 |
230 .media-modal-content .media-frame select.attachment-filters { |
277 .media-modal-content .media-frame select.attachment-filters { |
231 margin-top: 11px; |
278 margin-top: 32px; |
232 margin-left: 2%; |
279 margin-left: 2%; |
233 width: 42%; |
280 width: 42%; |
234 width: calc(48% - 12px); |
281 width: calc(48% - 12px); |
235 } |
|
236 |
|
237 .media-modal-content .media-toolbar-primary .media-button { |
|
238 float: left; |
|
239 } |
282 } |
240 |
283 |
241 .media-modal-content .attachments-browser .search { |
284 .media-modal-content .attachments-browser .search { |
242 width: 100%; |
285 width: 100%; |
243 } |
286 } |
263 overflow: hidden; |
306 overflow: hidden; |
264 } |
307 } |
265 |
308 |
266 .media-frame-toolbar .media-toolbar { |
309 .media-frame-toolbar .media-toolbar { |
267 top: auto; |
310 top: auto; |
268 bottom: -45px; |
311 bottom: -47px; |
269 height: auto; |
312 height: auto; |
270 overflow: visible; |
313 overflow: visible; |
271 border-top: 1px solid #ddd; |
314 border-top: 1px solid #ddd; |
272 } |
315 } |
273 |
316 |
274 @media screen and (max-width: 782px) { |
|
275 .media-frame-toolbar .media-toolbar { |
|
276 bottom: -48px; |
|
277 } |
|
278 } |
|
279 |
|
280 .media-toolbar-primary { |
317 .media-toolbar-primary { |
281 float: left; |
318 float: left; |
282 height: 100%; |
319 height: 100%; |
320 position: relative; |
|
283 } |
321 } |
284 |
322 |
285 .media-toolbar-secondary { |
323 .media-toolbar-secondary { |
286 float: right; |
324 float: right; |
287 height: 100%; |
325 height: 100%; |
307 position: absolute; |
345 position: absolute; |
308 top: 0; |
346 top: 0; |
309 left: 0; |
347 left: 0; |
310 bottom: 0; |
348 bottom: 0; |
311 width: 267px; |
349 width: 267px; |
312 padding: 0 16px 24px; |
350 padding: 0 16px; |
313 z-index: 75; |
351 z-index: 75; |
314 background: #f3f3f3; |
352 background: #f3f3f3; |
315 border-right: 1px solid #ddd; |
353 border-right: 1px solid #ddd; |
316 overflow: auto; |
354 overflow: auto; |
317 -webkit-overflow-scrolling: touch; |
355 -webkit-overflow-scrolling: touch; |
318 } |
356 } |
319 |
357 |
358 /* |
|
359 * Implementation of bottom padding in overflow content differs across browsers. |
|
360 * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129 |
|
361 */ |
|
362 .media-sidebar::after { |
|
363 content: ""; |
|
364 display: flex; |
|
365 clear: both; |
|
366 height: 24px; |
|
367 } |
|
368 |
|
320 .hide-toolbar .media-sidebar { |
369 .hide-toolbar .media-sidebar { |
321 bottom: 0; |
370 bottom: 0; |
322 } |
371 } |
323 |
372 |
324 .media-sidebar .sidebar-title { |
|
325 font-size: 20px; |
|
326 margin: 0; |
|
327 padding: 12px 10px 10px; |
|
328 line-height: 28px; |
|
329 } |
|
330 |
|
331 .media-sidebar .sidebar-content { |
|
332 padding: 0 10px; |
|
333 margin-bottom: 130px; |
|
334 } |
|
335 |
|
336 .media-sidebar .search { |
|
337 display: block; |
|
338 width: 100%; |
|
339 } |
|
340 |
|
341 .media-sidebar h3, /* Back-compat for pre-4.4 */ |
|
342 .image-details h3, /* Back-compat for pre-4.4 */ |
|
343 .media-sidebar h2, |
373 .media-sidebar h2, |
344 .image-details h2 { |
374 .image-details h2 { |
345 position: relative; |
375 position: relative; |
346 font-weight: 600; |
376 font-weight: 600; |
347 text-transform: uppercase; |
377 text-transform: uppercase; |
353 .media-sidebar .setting, |
383 .media-sidebar .setting, |
354 .attachment-details .setting { |
384 .attachment-details .setting { |
355 display: block; |
385 display: block; |
356 float: right; |
386 float: right; |
357 width: 100%; |
387 width: 100%; |
388 margin: 0 0 10px; |
|
389 } |
|
390 |
|
391 .media-sidebar .collection-settings .setting { |
|
358 margin: 1px 0; |
392 margin: 1px 0; |
359 } |
393 } |
360 |
394 |
361 .media-sidebar .setting label, |
395 .media-sidebar .setting.has-description, |
362 .attachment-details .setting label { |
396 .attachment-details .setting.has-description { |
363 display: block; |
397 margin-bottom: 5px; |
364 } |
398 } |
365 |
399 |
366 .media-sidebar .setting .link-to-custom, |
400 .media-sidebar .setting .link-to-custom { |
367 .attachment-details .setting .link-to-custom { |
|
368 margin: 3px 2px 0; |
401 margin: 3px 2px 0; |
369 } |
402 } |
370 |
403 |
371 .media-sidebar .setting span, |
404 .media-sidebar .setting span, /* Back-compat for pre-5.3 */ |
372 .attachment-details .setting span { |
405 .attachment-details .setting span, /* Back-compat for pre-5.3 */ |
406 .media-sidebar .setting .name, |
|
407 .media-sidebar .setting .value, |
|
408 .attachment-details .setting .name { |
|
373 min-width: 30%; |
409 min-width: 30%; |
374 margin-left: 4%; |
410 margin-left: 4%; |
375 font-size: 12px; |
411 font-size: 12px; |
376 text-align: left; |
412 text-align: left; |
377 word-wrap: break-word; |
413 word-wrap: break-word; |
379 |
415 |
380 .media-sidebar .setting .name { |
416 .media-sidebar .setting .name { |
381 max-width: 80px; |
417 max-width: 80px; |
382 } |
418 } |
383 |
419 |
384 .media-sidebar .setting select, |
420 .media-sidebar .setting .value { |
385 .attachment-details .setting select { |
421 text-align: right; |
422 } |
|
423 |
|
424 .media-sidebar .setting select { |
|
386 max-width: 65%; |
425 max-width: 65%; |
387 } |
426 } |
388 |
427 |
389 .media-sidebar .setting input[type="checkbox"], |
428 .media-sidebar .setting input[type="checkbox"], |
390 .media-sidebar .field input[type="checkbox"], |
429 .media-sidebar .field input[type="checkbox"], |
397 float: none; |
436 float: none; |
398 margin: 8px 3px 0; |
437 margin: 8px 3px 0; |
399 padding: 0; |
438 padding: 0; |
400 } |
439 } |
401 |
440 |
402 .media-sidebar .setting span, |
441 .media-sidebar .setting span, /* Back-compat for pre-5.3 */ |
403 .attachment-details .setting span, |
442 .attachment-details .setting span, /* Back-compat for pre-5.3 */ |
443 .media-sidebar .setting .name, |
|
444 .media-sidebar .setting .value, |
|
445 .media-sidebar .checkbox-label-inline, |
|
446 .attachment-details .setting .name, |
|
447 .attachment-details .setting .value, |
|
404 .compat-item label span { |
448 .compat-item label span { |
405 float: right; |
449 float: right; |
406 min-height: 22px; |
450 min-height: 22px; |
407 padding-top: 8px; |
451 padding-top: 8px; |
408 line-height: 16px; |
452 line-height: 1.33333333; |
409 font-weight: 400; |
453 font-weight: 400; |
410 color: #666; |
454 color: #666; |
455 } |
|
456 |
|
457 .media-sidebar .checkbox-label-inline { |
|
458 font-size: 12px; |
|
459 } |
|
460 |
|
461 .media-sidebar .copy-to-clipboard-container, |
|
462 .attachment-details .copy-to-clipboard-container { |
|
463 flex-wrap: wrap; |
|
464 margin-top: 10px; |
|
465 margin-right: calc( 35% - 1px ); |
|
466 padding-top: 10px; |
|
467 } |
|
468 |
|
469 /* Needs high specificity. */ |
|
470 .attachment-details .attachment-info .copy-to-clipboard-container { |
|
471 float: none; |
|
472 } |
|
473 |
|
474 .media-sidebar .copy-to-clipboard-container .success, |
|
475 .attachment-details .copy-to-clipboard-container .success { |
|
476 padding: 0; |
|
477 min-height: 0; |
|
478 text-align: right; |
|
411 } |
479 } |
412 |
480 |
413 .compat-item label span { |
481 .compat-item label span { |
414 text-align: left; |
482 text-align: left; |
415 } |
483 } |
448 |
516 |
449 .attachment-details .setting + .description { |
517 .attachment-details .setting + .description { |
450 clear: both; |
518 clear: both; |
451 font-size: 12px; |
519 font-size: 12px; |
452 font-style: normal; |
520 font-style: normal; |
453 margin-bottom: 0.5em; |
521 margin-bottom: 10px; |
454 } |
522 } |
455 |
523 |
456 .media-sidebar .setting textarea, |
524 .media-sidebar .setting textarea, |
457 .attachment-details .setting textarea, |
525 .attachment-details .setting textarea, |
458 .compat-item .field textarea { |
526 .compat-item .field textarea { |
459 height: 62px; |
527 height: 62px; |
460 resize: vertical; |
528 resize: vertical; |
461 } |
|
462 |
|
463 .media-sidebar select, |
|
464 .attachment-details select { |
|
465 margin-top: 3px; |
|
466 } |
529 } |
467 |
530 |
468 .compat-item { |
531 .compat-item { |
469 float: right; |
532 float: right; |
470 width: 100%; |
533 width: 100%; |
548 -moz-user-select: none; |
611 -moz-user-select: none; |
549 -ms-user-select: none; |
612 -ms-user-select: none; |
550 user-select: none; |
613 user-select: none; |
551 } |
614 } |
552 |
615 |
553 .media-menu > a { |
616 .media-menu .media-menu-item { |
554 display: block; |
617 display: block; |
618 box-sizing: border-box; |
|
619 width: 100%; |
|
555 position: relative; |
620 position: relative; |
621 border: 0; |
|
622 margin: 0; |
|
556 padding: 8px 20px; |
623 padding: 8px 20px; |
557 margin: 0; |
|
558 line-height: 18px; |
|
559 font-size: 14px; |
624 font-size: 14px; |
625 line-height: 1.28571428; |
|
626 background: transparent; |
|
560 color: #0073aa; |
627 color: #0073aa; |
628 text-align: right; |
|
561 text-decoration: none; |
629 text-decoration: none; |
562 } |
630 cursor: pointer; |
563 |
631 } |
564 .media-menu > a:hover { |
632 |
633 .media-menu .media-menu-item:hover { |
|
634 background: rgba(0, 0, 0, 0.04); |
|
635 } |
|
636 |
|
637 .media-menu .media-menu-item:active { |
|
565 color: #0073aa; |
638 color: #0073aa; |
566 background: rgba(0, 0, 0, 0.04); |
|
567 } |
|
568 |
|
569 .media-menu > a:active { |
|
570 outline: none; |
639 outline: none; |
571 } |
640 } |
572 |
641 |
573 .media-menu .active, |
642 .media-menu .active, |
574 .media-menu .active:hover { |
643 .media-menu .active:hover { |
575 color: #23282d; |
644 color: #23282d; |
576 font-weight: 600; |
645 font-weight: 600; |
646 } |
|
647 |
|
648 .media-menu .media-menu-item:focus { |
|
649 box-shadow: |
|
650 0 0 0 1px #5b9dd9, |
|
651 0 0 2px 1px rgba(30, 140, 190, 0.8); |
|
652 color: #124964; |
|
653 /* Only visible in Windows High Contrast mode */ |
|
654 outline: 1px solid transparent; |
|
577 } |
655 } |
578 |
656 |
579 .media-menu .separator { |
657 .media-menu .separator { |
580 height: 0; |
658 height: 0; |
581 margin: 12px 20px; |
659 margin: 12px 20px; |
589 .media-router { |
667 .media-router { |
590 position: relative; |
668 position: relative; |
591 padding: 0 6px; |
669 padding: 0 6px; |
592 margin: 0; |
670 margin: 0; |
593 clear: both; |
671 clear: both; |
594 -webkit-user-select: none; |
672 } |
595 -moz-user-select: none; |
673 |
596 -ms-user-select: none; |
674 .media-router .media-menu-item { |
597 user-select: none; |
|
598 } |
|
599 |
|
600 .media-router a { |
|
601 transition: none; |
|
602 } |
|
603 |
|
604 .media-router > a { |
|
605 position: relative; |
675 position: relative; |
606 float: right; |
676 float: right; |
677 border: 0; |
|
678 margin: 0; |
|
607 padding: 8px 10px 9px; |
679 padding: 8px 10px 9px; |
608 margin: 0; |
|
609 height: 18px; |
680 height: 18px; |
610 line-height: 18px; |
681 line-height: 1.28571428; |
611 font-size: 14px; |
682 font-size: 14px; |
612 text-decoration: none; |
683 text-decoration: none; |
613 } |
684 background: transparent; |
614 |
685 cursor: pointer; |
615 .media-router > a:last-child { |
686 transition: none; |
687 } |
|
688 |
|
689 .media-router .media-menu-item:last-child { |
|
616 border-left: 0; |
690 border-left: 0; |
617 } |
691 } |
618 |
692 |
619 .media-router > a:active { |
693 .media-router .media-menu-item:hover, |
620 outline: none; |
694 .media-router .media-menu-item:active { |
695 color: #0073aa; |
|
621 } |
696 } |
622 |
697 |
623 .media-router .active, |
698 .media-router .active, |
624 .media-router .active:hover { |
699 .media-router .active:hover { |
625 color: #32373c; |
700 color: #23282d; |
701 } |
|
702 |
|
703 .media-router .media-menu-item:focus { |
|
704 box-shadow: |
|
705 0 0 0 1px #5b9dd9, |
|
706 0 0 2px 1px rgba(30, 140, 190, 0.8); |
|
707 color: #124964; |
|
708 /* Only visible in Windows High Contrast mode */ |
|
709 outline: 1px solid transparent; |
|
626 } |
710 } |
627 |
711 |
628 .media-router .active, |
712 .media-router .active, |
629 .media-router > a.active:last-child { |
713 .media-router .media-menu-item.active:last-child { |
630 margin: -1px -1px 0; |
714 margin: -1px -1px 0; |
631 background: #fff; |
715 background: #fff; |
632 border: 1px solid #ddd; |
716 border: 1px solid #ddd; |
633 border-bottom: none; |
717 border-bottom: none; |
634 } |
718 } |
692 |
776 |
693 .media-frame-toolbar { |
777 .media-frame-toolbar { |
694 position: absolute; |
778 position: absolute; |
695 right: 200px; |
779 right: 200px; |
696 left: 0; |
780 left: 0; |
697 bottom: 0; |
|
698 height: 60px; |
|
699 z-index: 100; |
781 z-index: 100; |
700 bottom: 60px; |
782 bottom: 60px; |
701 height: auto; |
783 height: auto; |
702 } |
784 } |
703 |
785 |
715 .media-frame.hide-router .media-frame-content { |
797 .media-frame.hide-router .media-frame-content { |
716 top: 50px; |
798 top: 50px; |
717 } |
799 } |
718 |
800 |
719 .media-frame.hide-menu .media-frame-menu, |
801 .media-frame.hide-menu .media-frame-menu, |
802 .media-frame.hide-menu .media-frame-menu-heading, |
|
720 .media-frame.hide-router .media-frame-router, |
803 .media-frame.hide-router .media-frame-router, |
721 .media-frame.hide-toolbar .media-frame-toolbar { |
804 .media-frame.hide-toolbar .media-frame-toolbar { |
722 display: none; |
805 display: none; |
723 } |
806 } |
724 |
807 |
725 .media-frame.hide-router .media-frame-title { |
|
726 border-bottom: 1px solid #ddd; |
|
727 box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.1); |
|
728 } |
|
729 |
|
730 .media-frame-title .dashicons { |
|
731 display: none; |
|
732 } |
|
733 |
|
734 .media-frame-title h1 { |
808 .media-frame-title h1 { |
735 padding: 0 16px; |
809 padding: 0 16px; |
736 font-size: 22px; |
810 font-size: 22px; |
737 line-height: 50px; |
811 line-height: 2.27272727; |
738 margin: 0; |
812 margin: 0; |
813 } |
|
814 |
|
815 .media-frame-menu-heading, |
|
816 .media-attachments-filter-heading { |
|
817 position: absolute; |
|
818 right: 20px; |
|
819 top: 22px; |
|
820 margin: 0; |
|
821 font-size: 13px; |
|
822 line-height: 1; |
|
823 /* Above the media-frame-menu. */ |
|
824 z-index: 151; |
|
825 } |
|
826 |
|
827 .media-attachments-filter-heading { |
|
828 top: 10px; |
|
829 right: 16px; |
|
830 } |
|
831 |
|
832 .mode-grid .media-attachments-filter-heading { |
|
833 top: 0; |
|
834 right: -9999px; |
|
835 } |
|
836 |
|
837 .mode-grid .media-frame-actions-heading { |
|
838 display: none; |
|
839 } |
|
840 |
|
841 .wp-core-ui .button.media-frame-menu-toggle { |
|
842 display: none; |
|
739 } |
843 } |
740 |
844 |
741 .media-frame-title .suggested-dimensions { |
845 .media-frame-title .suggested-dimensions { |
742 font-size: 14px; |
846 font-size: 14px; |
743 float: left; |
847 float: left; |
757 margin: auto; |
861 margin: auto; |
758 max-width: 100%; |
862 max-width: 100%; |
759 max-height: 100%; |
863 max-height: 100%; |
760 } |
864 } |
761 |
865 |
762 .media-frame-content .crop-content .upload-errors |
866 .media-frame-content .crop-content .upload-errors { |
763 { |
|
764 position: absolute; |
867 position: absolute; |
765 width: 300px; |
868 width: 300px; |
766 top: 50%; |
869 top: 50%; |
767 right: 50%; |
870 right: 50%; |
768 margin-right: -150px; |
871 margin-right: -150px; |
802 |
905 |
803 /** |
906 /** |
804 * Search |
907 * Search |
805 */ |
908 */ |
806 .media-frame .search { |
909 .media-frame .search { |
807 margin-top: 11px; |
910 margin: 32px 0 0; |
808 padding: 4px; |
911 padding: 4px; |
809 font-size: 13px; |
912 font-size: 13px; |
810 color: #444; |
913 color: #444; |
811 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
914 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
812 -webkit-appearance: none; |
915 -webkit-appearance: none; |
813 } |
916 } |
814 |
917 |
815 .media-toolbar-primary .search { |
918 .media-toolbar-primary .search { |
816 max-width: 100%; |
919 max-width: 100%; |
920 } |
|
921 |
|
922 .media-frame .media-search-input-label { |
|
923 position: absolute; |
|
924 right: 0; |
|
925 top: 10px; |
|
926 margin: 0; |
|
927 line-height: 1; |
|
817 } |
928 } |
818 |
929 |
819 /** |
930 /** |
820 * Attachments |
931 * Attachments |
821 */ |
932 */ |
938 |
1049 |
939 .wp-core-ui .attachments-browser .attachment .thumbnail .centered img.icon { |
1050 .wp-core-ui .attachments-browser .attachment .thumbnail .centered img.icon { |
940 transform: translate( 50%, -70% ); |
1051 transform: translate( 50%, -70% ); |
941 } |
1052 } |
942 |
1053 |
943 .ie8 .wp-core-ui .attachment img.icon { |
|
944 top: 20%; |
|
945 position: relative; |
|
946 } |
|
947 |
|
948 .wp-core-ui .attachment .filename { |
1054 .wp-core-ui .attachment .filename { |
949 position: absolute; |
1055 position: absolute; |
950 right: 0; |
1056 right: 0; |
951 left: 0; |
1057 left: 0; |
952 bottom: 0; |
1058 bottom: 0; |
1047 .wp-core-ui .media-frame .attachment .describe { |
1153 .wp-core-ui .media-frame .attachment .describe { |
1048 position: relative; |
1154 position: relative; |
1049 display: block; |
1155 display: block; |
1050 width: 100%; |
1156 width: 100%; |
1051 margin: 0; |
1157 margin: 0; |
1052 padding: 8px; |
1158 padding: 0 8px; |
1053 font-size: 12px; |
1159 font-size: 12px; |
1054 border-radius: 0; |
1160 border-radius: 0; |
1055 } |
1161 } |
1056 |
1162 |
1057 /** |
1163 /** |
1064 overflow: hidden; |
1170 overflow: hidden; |
1065 } |
1171 } |
1066 |
1172 |
1067 .attachments-browser .media-toolbar { |
1173 .attachments-browser .media-toolbar { |
1068 left: 300px; |
1174 left: 300px; |
1069 height: 50px; |
1175 height: 72px; |
1176 background: #fff; |
|
1070 } |
1177 } |
1071 |
1178 |
1072 .attachments-browser.hide-sidebar .media-toolbar { |
1179 .attachments-browser.hide-sidebar .media-toolbar { |
1073 left: 0; |
1180 left: 0; |
1074 } |
1181 } |
1075 |
1182 |
1076 .attachments-browser .media-toolbar-primary > .media-button, |
1183 .attachments-browser .media-toolbar-primary > .media-button, |
1077 .attachments-browser .media-toolbar-primary > .media-button-group, |
1184 .attachments-browser .media-toolbar-primary > .media-button-group, |
1078 .attachments-browser .media-toolbar-secondary > .media-button, |
1185 .attachments-browser .media-toolbar-secondary > .media-button, |
1079 .attachments-browser .media-toolbar-secondary > .media-button-group { |
1186 .attachments-browser .media-toolbar-secondary > .media-button-group { |
1080 margin: 11px 0; |
1187 margin: 10px 0; |
1081 } |
1188 } |
1082 |
1189 |
1083 .attachments-browser .attachments { |
1190 .attachments-browser .attachments { |
1084 padding: 2px 8px 8px; |
1191 padding: 2px 8px 8px; |
1085 } |
1192 } |
1086 |
1193 |
1087 .attachments-browser .attachments, |
1194 .attachments-browser .attachments, |
1088 .attachments-browser .uploader-inline { |
1195 .attachments-browser .uploader-inline { |
1089 position: absolute; |
1196 position: absolute; |
1090 top: 50px; |
1197 top: 72px; |
1091 right: 0; |
1198 right: 0; |
1092 left: 300px; |
1199 left: 300px; |
1093 bottom: 0; |
1200 bottom: 0; |
1094 overflow: auto; |
1201 overflow: auto; |
1095 outline: none; |
1202 outline: none; |
1099 display: none; |
1206 display: none; |
1100 } |
1207 } |
1101 |
1208 |
1102 .attachments-browser .media-toolbar-primary { |
1209 .attachments-browser .media-toolbar-primary { |
1103 max-width: 33%; |
1210 max-width: 33%; |
1211 } |
|
1212 |
|
1213 .mode-grid .attachments-browser .media-toolbar-primary { |
|
1214 display: flex; |
|
1215 align-items: center; |
|
1216 } |
|
1217 |
|
1218 .mode-grid .attachments-browser .media-toolbar-mode-select .media-toolbar-primary { |
|
1219 display: none; |
|
1104 } |
1220 } |
1105 |
1221 |
1106 .attachments-browser .media-toolbar-secondary { |
1222 .attachments-browser .media-toolbar-secondary { |
1107 max-width: 66%; |
1223 max-width: 66%; |
1108 } |
1224 } |
1143 } |
1259 } |
1144 |
1260 |
1145 .attachments-browser .instructions { |
1261 .attachments-browser .instructions { |
1146 display: inline-block; |
1262 display: inline-block; |
1147 margin-top: 16px; |
1263 margin-top: 16px; |
1148 line-height: 18px; |
1264 line-height: 1.38461538; |
1149 font-size: 13px; |
1265 font-size: 13px; |
1150 color: #666; |
1266 color: #666; |
1151 margin-left: 0.5em; |
|
1152 } |
1267 } |
1153 |
1268 |
1154 .attachments-browser .no-media { |
1269 .attachments-browser .no-media { |
1155 padding: 2em 2em 0 0; |
1270 padding: 2em 2em 0 0; |
1156 } |
1271 } |
1199 margin: 0 auto; |
1314 margin: 0 auto; |
1200 padding-bottom: 10px; |
1315 padding-bottom: 10px; |
1201 max-width: 400px; |
1316 max-width: 400px; |
1202 } |
1317 } |
1203 |
1318 |
1204 .uploader-inline .media-uploader-status h3, /* Back-compat for pre-4.4 */ |
|
1205 .uploader-inline .media-uploader-status h2 { |
1319 .uploader-inline .media-uploader-status h2 { |
1206 display: none; |
1320 display: none; |
1207 } |
1321 } |
1208 |
1322 |
1209 .media-uploader-status .upload-details { |
1323 .media-uploader-status .upload-details { |
1287 display: block; |
1401 display: block; |
1288 padding-top: 8px; |
1402 padding-top: 8px; |
1289 word-wrap: break-word; |
1403 word-wrap: break-word; |
1290 } |
1404 } |
1291 |
1405 |
1292 .uploader-window { |
1406 /** |
1293 position: fixed; |
1407 * Window and Editor uploaders used to display "drop zones" |
1408 */ |
|
1409 .uploader-window, |
|
1410 .wp-editor-wrap .uploader-editor { |
|
1294 top: 0; |
1411 top: 0; |
1295 right: 0; |
1412 right: 0; |
1296 left: 0; |
1413 left: 0; |
1297 bottom: 0; |
1414 bottom: 0; |
1415 text-align: center; |
|
1416 display: none; |
|
1417 } |
|
1418 |
|
1419 .uploader-window { |
|
1420 position: fixed; |
|
1421 z-index: 250000; |
|
1422 opacity: 0; /* Only the inline uploader is animated with JS, the editor one isn't */ |
|
1423 transition: opacity 250ms; |
|
1424 } |
|
1425 |
|
1426 .wp-editor-wrap .uploader-editor { |
|
1427 position: absolute; |
|
1428 z-index: 99998; /* under the toolbar */ |
|
1429 background: rgba(150, 150, 150, 0.9); |
|
1430 } |
|
1431 |
|
1432 .uploader-window, |
|
1433 .wp-editor-wrap .uploader-editor.droppable { |
|
1298 background: rgba(0, 86, 132, 0.9); |
1434 background: rgba(0, 86, 132, 0.9); |
1299 z-index: 250000; |
1435 } |
1300 display: none; |
1436 |
1301 text-align: center; |
1437 .uploader-window-content, |
1302 opacity: 0; |
1438 .wp-editor-wrap .uploader-editor-content { |
1303 transition: opacity 250ms; |
|
1304 } |
|
1305 |
|
1306 .uploader-window-content { |
|
1307 position: absolute; |
1439 position: absolute; |
1308 top: 10px; |
1440 top: 10px; |
1309 right: 10px; |
1441 right: 10px; |
1310 left: 10px; |
1442 left: 10px; |
1311 bottom: 10px; |
1443 bottom: 10px; |
1312 border: 1px dashed #fff; |
1444 border: 1px dashed #fff; |
1313 } |
1445 } |
1314 |
1446 |
1315 .uploader-window h3, /* Back-compat for pre-4.4 */ |
1447 /* uploader drop-zone title */ |
1316 .uploader-window h1 { |
1448 .uploader-window h1, /* Back-compat for pre-5.3 */ |
1317 margin: -0.5em 0 0; |
1449 .uploader-window .uploader-editor-title, |
1450 .wp-editor-wrap .uploader-editor .uploader-editor-title { |
|
1318 position: absolute; |
1451 position: absolute; |
1319 top: 50%; |
1452 top: 50%; |
1320 right: 0; |
1453 right: 0; |
1321 left: 0; |
1454 left: 0; |
1322 transform: translateY( -50% ); |
1455 transform: translateY(-50%); |
1323 font-size: 40px; |
1456 font-size: 3em; |
1457 line-height: 1.3; |
|
1458 font-weight: 600; |
|
1324 color: #fff; |
1459 color: #fff; |
1325 padding: 0; |
1460 margin: 0; |
1461 padding: 0 10px; |
|
1462 } |
|
1463 |
|
1464 .wp-editor-wrap .uploader-editor .uploader-editor-title { |
|
1465 display: none; |
|
1466 } |
|
1467 |
|
1468 .wp-editor-wrap .uploader-editor.droppable .uploader-editor-title { |
|
1469 display: block; |
|
1326 } |
1470 } |
1327 |
1471 |
1328 .uploader-window .media-progress-bar { |
1472 .uploader-window .media-progress-bar { |
1329 margin-top: 20px; |
1473 margin-top: 20px; |
1330 max-width: 300px; |
1474 max-width: 300px; |
1364 |
1508 |
1365 .uploader-inline .has-upload-message .upload-ui { |
1509 .uploader-inline .has-upload-message .upload-ui { |
1366 margin: 0 0 4em; |
1510 margin: 0 0 4em; |
1367 } |
1511 } |
1368 |
1512 |
1369 .uploader-inline h3, /* Back-compat for pre-4.4 */ |
|
1370 .uploader-inline h2 { |
1513 .uploader-inline h2 { |
1371 font-size: 20px; |
1514 font-size: 20px; |
1372 line-height: 28px; |
1515 line-height: 1.4; |
1373 font-weight: 400; |
1516 font-weight: 400; |
1374 margin: 0; |
1517 margin: 0; |
1375 } |
1518 } |
1376 |
1519 |
1377 .uploader-inline .has-upload-message .upload-instructions { |
1520 .uploader-inline .has-upload-message .upload-instructions { |
1387 .supports-drag-drop .uploader-inline .drop-instructions { |
1530 .supports-drag-drop .uploader-inline .drop-instructions { |
1388 display: block; |
1531 display: block; |
1389 } |
1532 } |
1390 |
1533 |
1391 .uploader-inline p { |
1534 .uploader-inline p { |
1392 font-size: 12px; |
|
1393 margin: 0.5em 0; |
1535 margin: 0.5em 0; |
1394 } |
1536 } |
1395 |
1537 |
1396 .uploader-inline .media-progress-bar { |
1538 .uploader-inline .media-progress-bar { |
1397 display: none; |
1539 display: none; |
1438 |
1580 |
1439 .media-selection .count { |
1581 .media-selection .count { |
1440 display: block; |
1582 display: block; |
1441 padding-top: 12px; |
1583 padding-top: 12px; |
1442 font-size: 14px; |
1584 font-size: 14px; |
1443 line-height: 20px; |
1585 line-height: 1.42857142; |
1444 font-weight: 600; |
1586 font-weight: 600; |
1445 } |
1587 } |
1446 |
1588 |
1447 .media-selection .button-link { |
1589 .media-selection .button-link { |
1448 float: right; |
1590 float: right; |
1449 padding: 1px 8px; |
1591 padding: 1px 8px; |
1450 margin: 1px -8px 1px 8px; |
1592 margin: 1px -8px 1px 8px; |
1451 line-height: 16px; |
1593 line-height: 1.4; |
1452 border-left: 1px solid #ddd; |
1594 border-left: 1px solid #ddd; |
1453 color: #0073aa; |
1595 color: #0073aa; |
1454 text-decoration: none; |
1596 text-decoration: none; |
1455 } |
1597 } |
1456 |
1598 |
1457 .media-selection .button-link:hover, |
1599 .media-selection .button-link:hover, |
1458 .media-selection .button-link:focus { |
1600 .media-selection .button-link:focus { |
1459 color: #00a0d2; |
1601 color: #006799; |
1460 } |
1602 } |
1461 |
1603 |
1462 .media-selection .button-link:last-child { |
1604 .media-selection .button-link:last-child { |
1463 border-left: 0; |
1605 border-left: 0; |
1464 margin-left: 0; |
1606 margin-left: 0; |
1559 height: 20px; |
1701 height: 20px; |
1560 margin: 0; |
1702 margin: 0; |
1561 vertical-align: middle; |
1703 vertical-align: middle; |
1562 } |
1704 } |
1563 |
1705 |
1706 .media-frame.mode-grid .spinner { |
|
1707 margin: 0; |
|
1708 float: none; |
|
1709 vertical-align: middle; |
|
1710 } |
|
1711 |
|
1712 .media-modal .media-toolbar .spinner { |
|
1713 float: none; |
|
1714 vertical-align: bottom; |
|
1715 margin: 0 5px 5px 0; |
|
1716 } |
|
1717 |
|
1718 .media-frame .instructions + .spinner.is-active { |
|
1719 vertical-align: middle; |
|
1720 } |
|
1721 |
|
1564 .media-frame .spinner.is-active { |
1722 .media-frame .spinner.is-active { |
1565 visibility: visible; |
1723 visibility: visible; |
1566 } |
|
1567 |
|
1568 .media-toolbar .spinner { |
|
1569 margin-top: 14px; |
|
1570 } |
1724 } |
1571 |
1725 |
1572 /** |
1726 /** |
1573 * Attachment Details |
1727 * Attachment Details |
1574 */ |
1728 */ |
1578 } |
1732 } |
1579 |
1733 |
1580 .attachment-details .settings-save-status { |
1734 .attachment-details .settings-save-status { |
1581 float: left; |
1735 float: left; |
1582 text-transform: none; |
1736 text-transform: none; |
1583 z-index: 10; |
1737 font-weight: 400; |
1584 } |
1738 } |
1585 |
1739 |
1586 .attachment-details .settings-save-status .spinner { |
1740 .attachment-details .settings-save-status .spinner { |
1741 float: none; |
|
1587 margin-right: 5px; |
1742 margin-right: 5px; |
1588 } |
1743 } |
1589 |
1744 |
1590 .attachment-details .settings-save-status .saved { |
1745 .attachment-details .settings-save-status .saved { |
1591 float: left; |
|
1592 display: none; |
1746 display: none; |
1593 } |
1747 } |
1594 |
1748 |
1595 .attachment-details.save-waiting .settings-save-status .spinner { |
1749 .attachment-details.save-waiting .settings-save-status .spinner { |
1596 visibility: visible; |
1750 visibility: visible; |
1597 } |
1751 } |
1598 |
1752 |
1599 .attachment-details.save-complete .settings-save-status .saved { |
1753 .attachment-details.save-complete .settings-save-status .saved { |
1600 display: block; |
1754 display: inline-block; |
1601 } |
1755 } |
1602 |
1756 |
1603 .attachment-info { |
1757 .attachment-info { |
1604 overflow: hidden; |
1758 overflow: hidden; |
1605 min-height: 60px; |
1759 min-height: 60px; |
1606 margin-bottom: 16px; |
1760 margin-bottom: 16px; |
1607 line-height: 18px; |
1761 line-height: 1.5; |
1608 color: #666; |
1762 color: #666; |
1609 border-bottom: 1px solid #ddd; |
1763 border-bottom: 1px solid #ddd; |
1610 padding-bottom: 11px; |
1764 padding-bottom: 11px; |
1611 } |
1765 } |
1612 |
1766 |
1702 width: 100%; |
1856 width: 100%; |
1703 float: right; |
1857 float: right; |
1704 overflow: hidden; |
1858 overflow: hidden; |
1705 } |
1859 } |
1706 |
1860 |
1707 .attachment-display-settings h4 { |
|
1708 margin: 1.4em 0 0.4em; |
|
1709 } |
|
1710 |
|
1711 .collection-settings { |
1861 .collection-settings { |
1712 overflow: hidden; |
1862 overflow: hidden; |
1713 } |
1863 } |
1714 |
1864 |
1715 .collection-settings .setting input[type="checkbox"] { |
1865 .collection-settings .setting input[type="checkbox"] { |
1716 float: right; |
1866 float: right; |
1717 margin-left: 8px; |
1867 margin-left: 8px; |
1718 } |
1868 } |
1719 |
1869 |
1720 .collection-settings .setting span { |
1870 .collection-settings .setting span, /* Back-compat for pre-5.3 */ |
1871 .collection-settings .setting .name { |
|
1721 min-width: inherit; |
1872 min-width: inherit; |
1722 } |
1873 } |
1723 |
1874 |
1724 /** |
1875 /** |
1725 * Image Editor |
1876 * Image Editor |
1727 .media-modal .imgedit-wrap { |
1878 .media-modal .imgedit-wrap { |
1728 position: static; |
1879 position: static; |
1729 } |
1880 } |
1730 |
1881 |
1731 .media-modal .imgedit-wrap .imgedit-panel-content { |
1882 .media-modal .imgedit-wrap .imgedit-panel-content { |
1732 padding: 16px; |
1883 padding: 16px 16px 0 16px; |
1733 position: absolute; |
1884 position: absolute; |
1734 top: 0; |
1885 top: 0; |
1735 left: 282px; |
1886 left: 282px; |
1736 bottom: 0; |
1887 bottom: 0; |
1737 right: 0; |
1888 right: 0; |
1738 overflow: auto; |
1889 overflow: auto; |
1739 } |
1890 } |
1740 |
1891 |
1892 /* |
|
1893 * Implementation of bottom padding in overflow content differs across browsers. |
|
1894 * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129 |
|
1895 */ |
|
1896 .media-modal .imgedit-wrap .imgedit-submit { |
|
1897 margin-bottom: 16px; |
|
1898 } |
|
1899 |
|
1741 .media-modal .imgedit-wrap .imgedit-settings { |
1900 .media-modal .imgedit-wrap .imgedit-settings { |
1742 background: #f3f3f3; |
1901 background: #f3f3f3; |
1743 border-right: 1px solid #ddd; |
1902 border-right: 1px solid #ddd; |
1744 padding: 20px 16px 16px; |
1903 padding: 20px 16px 0; |
1745 position: absolute; |
1904 position: absolute; |
1746 top: 0; |
1905 top: 0; |
1747 left: 0; |
1906 left: 0; |
1748 bottom: 0; |
1907 bottom: 0; |
1749 width: 250px; |
1908 width: 250px; |
1750 overflow: auto; |
1909 overflow: auto; |
1910 } |
|
1911 |
|
1912 /* |
|
1913 * Implementation of bottom padding in overflow content differs across browsers. |
|
1914 * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129 |
|
1915 */ |
|
1916 .media-modal .imgedit-wrap .imgedit-save-target { |
|
1917 margin: 8px 0 24px; |
|
1751 } |
1918 } |
1752 |
1919 |
1753 .media-modal .imgedit-group { |
1920 .media-modal .imgedit-group { |
1754 background: none; |
1921 background: none; |
1755 border: none; |
1922 border: none; |
1770 |
1937 |
1771 .media-modal .imgedit-group-top { |
1938 .media-modal .imgedit-group-top { |
1772 margin: 0; |
1939 margin: 0; |
1773 } |
1940 } |
1774 |
1941 |
1775 .media-modal .imgedit-group-top h3, /* Back-compat for pre-4.4 */ |
|
1776 .media-modal .imgedit-group-top h2, |
1942 .media-modal .imgedit-group-top h2, |
1777 .media-modal .imgedit-group-top h2 .button-link { |
1943 .media-modal .imgedit-group-top h2 .button-link { |
1778 display: inline-block; |
1944 display: inline-block; |
1779 text-transform: uppercase; |
1945 text-transform: uppercase; |
1780 font-size: 12px; |
1946 font-size: 12px; |
1781 color: #666; |
1947 color: #666; |
1782 margin: 0; |
1948 margin: 0; |
1783 margin-top: 3px; |
1949 margin-top: 3px; |
1784 } |
1950 } |
1785 |
1951 |
1786 .media-modal .imgedit-group-top h3 a, /* Back-compat for pre-4.4 */ |
|
1787 .media-modal .imgedit-group-top h2 a, |
1952 .media-modal .imgedit-group-top h2 a, |
1788 .media-modal .imgedit-group-top h2 .button-link { |
1953 .media-modal .imgedit-group-top h2 .button-link { |
1789 text-decoration: none; |
1954 text-decoration: none; |
1790 color: #666; |
1955 color: #666; |
1791 } |
1956 } |
1832 |
1997 |
1833 .imgedit-thumbnail-preview-caption { |
1998 .imgedit-thumbnail-preview-caption { |
1834 display: block; |
1999 display: block; |
1835 } |
2000 } |
1836 |
2001 |
1837 .media-modal .imgedit-wrap div.updated { |
2002 .media-modal .imgedit-wrap div.updated, /* Back-compat for pre-5.5 */ |
2003 .media-modal .imgedit-wrap .notice { |
|
1838 margin: 0; |
2004 margin: 0; |
1839 margin-bottom: 16px; |
2005 margin-bottom: 16px; |
1840 } |
2006 } |
1841 |
|
1842 |
2007 |
1843 /** |
2008 /** |
1844 * Embed from URL and Image Details |
2009 * Embed from URL and Image Details |
1845 */ |
2010 */ |
1846 .embed-url { |
2011 .embed-url { |
1853 font-size: 18px; |
2018 font-size: 18px; |
1854 } |
2019 } |
1855 |
2020 |
1856 .media-frame .embed-url input { |
2021 .media-frame .embed-url input { |
1857 font-size: 18px; |
2022 font-size: 18px; |
1858 padding: 12px 14px; |
2023 line-height: 1.22222222; /* 22px */ |
2024 padding: 12px 14px 12px 40px; /* right padding to leave room for the spinner */ |
|
1859 width: 100%; |
2025 width: 100%; |
1860 min-width: 200px; |
2026 min-width: 200px; |
1861 box-shadow: inset -2px 2px 4px -2px rgba(0, 0, 0, 0.1); |
2027 box-shadow: inset -2px 2px 4px -2px rgba(0, 0, 0, 0.1); |
2028 } |
|
2029 |
|
2030 .media-frame .embed-url input::-ms-clear { |
|
2031 display: none; /* the "x" in IE 11 conflicts with the spinner */ |
|
1862 } |
2032 } |
1863 |
2033 |
1864 .media-frame .embed-url .spinner { |
2034 .media-frame .embed-url .spinner { |
1865 position: absolute; |
2035 position: absolute; |
1866 top: 32px; |
2036 top: 32px; |
1876 position: absolute; |
2046 position: absolute; |
1877 top: 70px; |
2047 top: 70px; |
1878 right: 0; |
2048 right: 0; |
1879 left: 0; |
2049 left: 0; |
1880 bottom: 0; |
2050 bottom: 0; |
1881 padding: 16px 16px 32px; |
2051 padding: 0 16px; |
1882 overflow: auto; |
2052 overflow: auto; |
2053 } |
|
2054 |
|
2055 /* |
|
2056 * Implementation of bottom padding in overflow content differs across browsers. |
|
2057 * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129 |
|
2058 */ |
|
2059 .embed-link-settings::after, |
|
2060 .embed-media-settings::after { |
|
2061 content: ""; |
|
2062 display: flex; |
|
2063 clear: both; |
|
2064 height: 24px; |
|
1883 } |
2065 } |
1884 |
2066 |
1885 .media-embed .embed-link-settings { |
2067 .media-embed .embed-link-settings { |
1886 /* avoid Firefox to give focus to the embed preview container parent */ |
2068 /* avoid Firefox to give focus to the embed preview container parent */ |
1887 overflow: visible; |
2069 overflow: visible; |
1924 top: 0; |
2106 top: 0; |
1925 overflow: visible; |
2107 overflow: visible; |
1926 padding: 0; |
2108 padding: 0; |
1927 } |
2109 } |
1928 |
2110 |
2111 .image-details .embed-media-settings::after { |
|
2112 content: none; |
|
2113 } |
|
2114 |
|
1929 .image-details .embed-media-settings, |
2115 .image-details .embed-media-settings, |
1930 .image-details .embed-media-settings div { |
2116 .image-details .embed-media-settings div { |
1931 box-sizing: border-box; |
2117 box-sizing: border-box; |
1932 } |
2118 } |
1933 |
2119 |
1939 position: absolute; |
2125 position: absolute; |
1940 top: 0; |
2126 top: 0; |
1941 right: 0; |
2127 right: 0; |
1942 } |
2128 } |
1943 |
2129 |
1944 .image-details .column-settings h3, /* Back-compat for pre-4.4 */ |
|
1945 .image-details .column-settings h2 { |
2130 .image-details .column-settings h2 { |
1946 margin: 20px; |
2131 margin: 20px; |
1947 padding-top: 20px; |
2132 padding-top: 20px; |
1948 border-top: 1px solid #ddd; |
2133 border-top: 1px solid #ddd; |
1949 color: #23282d; |
2134 color: #23282d; |
1990 |
2175 |
1991 .image-details .advanced-visible .advanced-toggle:after { |
2176 .image-details .advanced-visible .advanced-toggle:after { |
1992 content: "\f142"; |
2177 content: "\f142"; |
1993 } |
2178 } |
1994 |
2179 |
1995 .image-details .embed-media-settings .size { |
2180 .image-details .custom-size label, /* Back-compat for pre-5.3 */ |
1996 margin-bottom: 4px; |
2181 .image-details .custom-size .custom-size-setting { |
1997 } |
|
1998 |
|
1999 .image-details .custom-size span { |
|
2000 display: block; |
|
2001 } |
|
2002 |
|
2003 .image-details .custom-size label { |
|
2004 display: block; |
2182 display: block; |
2005 float: right; |
2183 float: right; |
2006 } |
2184 } |
2007 |
2185 |
2008 .image-details .custom-size span small { |
2186 .image-details .custom-size .custom-size-setting label { |
2009 color: #555d66; /* #f3f3f3 background */ |
2187 float: none; |
2010 font-size: inherit; |
|
2011 } |
2188 } |
2012 |
2189 |
2013 .image-details .custom-size input { |
2190 .image-details .custom-size input { |
2014 width: 5em; |
2191 width: 5em; |
2015 } |
2192 } |
2017 .image-details .custom-size .sep { |
2194 .image-details .custom-size .sep { |
2018 float: right; |
2195 float: right; |
2019 margin: 26px 6px 0 6px; |
2196 margin: 26px 6px 0 6px; |
2020 } |
2197 } |
2021 |
2198 |
2022 .image-details .custom-size:after { |
2199 .image-details .custom-size .description { |
2023 content: ""; |
2200 margin-right: 0; |
2024 display: table; |
|
2025 clear: both; |
|
2026 } |
2201 } |
2027 |
2202 |
2028 .media-embed .thumbnail { |
2203 .media-embed .thumbnail { |
2029 max-width: 100%; |
2204 max-width: 100%; |
2030 max-height: 200px; |
2205 max-height: 200px; |
2047 bottom: 0; |
2222 bottom: 0; |
2048 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); |
2223 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); |
2049 overflow: hidden; |
2224 overflow: hidden; |
2050 } |
2225 } |
2051 |
2226 |
2052 .media-embed .setting { |
2227 .media-embed .setting, |
2228 .media-embed .setting-group { |
|
2053 width: 100%; |
2229 width: 100%; |
2054 margin: 10px 0; |
2230 margin: 10px 0; |
2055 float: right; |
2231 float: right; |
2056 display: block; |
2232 display: block; |
2057 clear: both; |
2233 clear: both; |
2058 } |
2234 } |
2059 |
2235 |
2236 .media-embed .setting-group .setting:not(.checkbox-setting) { |
|
2237 margin: 0; |
|
2238 } |
|
2239 |
|
2060 .media-embed .setting.has-description { |
2240 .media-embed .setting.has-description { |
2061 margin-bottom: 5px; |
2241 margin-bottom: 5px; |
2062 } |
2242 } |
2063 |
2243 |
2064 .media-embed .description { |
2244 .media-embed .description { |
2065 clear: both; |
2245 clear: both; |
2066 font-style: normal; |
2246 font-style: normal; |
2067 } |
2247 } |
2068 |
2248 |
2069 .image-details .embed-media-settings .setting { |
2249 .media-embed .content-track + .description { |
2250 line-height: 1.4; |
|
2251 /* The !important needs to override a high specificity selector from wp-medialement.css */ |
|
2252 max-width: none !important; |
|
2253 } |
|
2254 |
|
2255 .media-embed .remove-track { |
|
2256 margin-bottom: 10px; |
|
2257 } |
|
2258 |
|
2259 .image-details .embed-media-settings .setting, |
|
2260 .image-details .embed-media-settings .setting-group { |
|
2070 float: none; |
2261 float: none; |
2071 width: auto; |
2262 width: auto; |
2072 } |
2263 } |
2073 |
2264 |
2074 .image-details .actions { |
2265 .image-details .actions { |
2078 .image-details .hidden { |
2269 .image-details .hidden { |
2079 display: none; |
2270 display: none; |
2080 } |
2271 } |
2081 |
2272 |
2082 .media-embed .setting input[type="text"], |
2273 .media-embed .setting input[type="text"], |
2083 .media-embed .setting textarea { |
2274 .media-embed .setting textarea, |
2275 .media-embed fieldset { |
|
2084 display: block; |
2276 display: block; |
2085 width: 100%; |
2277 width: 100%; |
2086 max-width: 400px; |
2278 max-width: 400px; |
2087 margin: 1px 0; |
|
2088 } |
2279 } |
2089 |
2280 |
2090 .image-details .embed-media-settings .setting input[type="text"], |
2281 .image-details .embed-media-settings .setting input[type="text"], |
2091 .image-details .embed-media-settings .setting textarea { |
2282 .image-details .embed-media-settings .setting textarea { |
2092 max-width: inherit; |
2283 max-width: inherit; |
2094 } |
2285 } |
2095 |
2286 |
2096 .image-details .embed-media-settings .setting input.link-to-custom, |
2287 .image-details .embed-media-settings .setting input.link-to-custom, |
2097 .image-details .embed-media-settings .link-target, |
2288 .image-details .embed-media-settings .link-target, |
2098 .image-details .embed-media-settings .custom-size, |
2289 .image-details .embed-media-settings .custom-size, |
2290 .image-details .embed-media-settings .setting-group, |
|
2099 .image-details .description { |
2291 .image-details .description { |
2100 margin-right: 27%; |
2292 margin-right: 27%; |
2101 width: 70%; |
2293 width: 70%; |
2102 } |
2294 } |
2103 |
2295 |
2105 font-style: normal; |
2297 font-style: normal; |
2106 margin-top: 0; |
2298 margin-top: 0; |
2107 } |
2299 } |
2108 |
2300 |
2109 .image-details .embed-media-settings .link-target { |
2301 .image-details .embed-media-settings .link-target { |
2110 margin-top: 24px; |
2302 margin-top: 16px; |
2303 } |
|
2304 |
|
2305 .image-details .checkbox-label, |
|
2306 .audio-details .checkbox-label, |
|
2307 .video-details .checkbox-label { |
|
2308 vertical-align: baseline; |
|
2111 } |
2309 } |
2112 |
2310 |
2113 .media-embed .setting input.hidden, |
2311 .media-embed .setting input.hidden, |
2114 .media-embed .setting textarea.hidden { |
2312 .media-embed .setting textarea.hidden { |
2115 display: none; |
2313 display: none; |
2116 } |
2314 } |
2117 |
2315 |
2316 .media-embed .setting span, /* Back-compat for pre-5.3 */ |
|
2317 .media-embed .setting .name, |
|
2318 .media-embed .setting-group .name { |
|
2319 display: inline-block; |
|
2320 font-size: 13px; |
|
2321 line-height: 1.84615384; |
|
2322 color: #666; |
|
2323 } |
|
2324 |
|
2118 .media-embed .setting span { |
2325 .media-embed .setting span { |
2119 display: block; |
2326 display: block; /* Back-compat for pre-5.3 */ |
2120 width: 200px; |
2327 width: 200px; /* Back-compat for pre-5.3 */ |
2121 font-size: 13px; |
2328 } |
2122 line-height: 24px; |
2329 |
2123 color: #666; |
2330 .image-details .embed-media-settings .setting span, /* Back-compat for pre-5.3 */ |
2124 } |
2331 .image-details .embed-media-settings .setting .name { |
2125 |
|
2126 .image-details .embed-media-settings .setting span { |
|
2127 float: right; |
2332 float: right; |
2128 width: 25%; |
2333 width: 25%; |
2129 text-align: left; |
2334 text-align: left; |
2130 margin: 8px 1% 0 1%; |
2335 margin: 8px 1% 0 1%; |
2131 line-height: 1.1; |
2336 line-height: 1.1; |
2132 } |
2337 } |
2133 |
2338 |
2134 .media-embed .setting .button-group { |
2339 /* Buttons group in IE 11. */ |
2135 margin: 2px 0; |
2340 .media-frame .setting-group .button-group, |
2341 .image-details .embed-media-settings .setting .button-group { |
|
2342 width: auto; |
|
2136 } |
2343 } |
2137 |
2344 |
2138 .media-embed-sidebar { |
2345 .media-embed-sidebar { |
2139 position: absolute; |
2346 position: absolute; |
2140 top: 0; |
2347 top: 0; |
2144 .advanced-section, |
2351 .advanced-section, |
2145 .link-settings { |
2352 .link-settings { |
2146 margin-top: 10px; |
2353 margin-top: 10px; |
2147 } |
2354 } |
2148 |
2355 |
2149 /* Drag & drop on the editor upload */ |
|
2150 .wp-editor-wrap .uploader-editor { |
|
2151 background: rgba(150, 150, 150, 0.9); |
|
2152 position: absolute; |
|
2153 top: 0; |
|
2154 right: 0; |
|
2155 width: 100%; |
|
2156 height: 100%; |
|
2157 z-index: 99998; /* under the toolbar */ |
|
2158 display: none; |
|
2159 text-align: center; |
|
2160 } |
|
2161 |
|
2162 .wp-editor-wrap .uploader-editor-content { |
|
2163 border: 1px dashed #fff; |
|
2164 position: absolute; |
|
2165 top: 10px; |
|
2166 right: 10px; |
|
2167 left: 10px; |
|
2168 bottom: 10px; |
|
2169 } |
|
2170 |
|
2171 .wp-editor-wrap .uploader-editor .uploader-editor-title { |
|
2172 position: absolute; |
|
2173 top: 50%; |
|
2174 right: 0; |
|
2175 left: 0; |
|
2176 transform: translateY( -50% ); |
|
2177 font-size: 3em; |
|
2178 line-height: 1.3; |
|
2179 font-weight: 600; |
|
2180 color: #fff; |
|
2181 padding: 0; |
|
2182 margin: 0; |
|
2183 display: none; |
|
2184 } |
|
2185 |
|
2186 .wp-editor-wrap .uploader-editor.droppable { |
|
2187 background: rgba(0, 86, 132, 0.9); |
|
2188 } |
|
2189 |
|
2190 .wp-editor-wrap .uploader-editor.droppable .uploader-editor-title { |
|
2191 display: block; |
|
2192 } |
|
2193 |
|
2194 /** |
2356 /** |
2195 * IE7 Fixes |
2357 * Button groups fix: can be removed together with the Back-compat for pre-5.3 |
2196 */ |
2358 */ |
2197 .ie7 .media-frame .attachments-browser { |
2359 .media-frame .setting .button-group { |
2198 position: static; |
2360 display: flex; |
2199 } |
2361 margin: 0 !important; |
2200 |
2362 max-width: none !important; |
2201 .ie7 .media-frame .embed-url input { |
2363 } |
2202 margin-top: 4px; |
|
2203 width: 90%; |
|
2204 } |
|
2205 |
|
2206 .ie7 .compat-item { |
|
2207 width: 99%; |
|
2208 } |
|
2209 |
|
2210 .ie7 .attachment-display-settings { |
|
2211 width: auto; |
|
2212 } |
|
2213 |
|
2214 .ie7 .attachment-preview, |
|
2215 .ie7 .attachment-preview .thumbnail { |
|
2216 width: 120px; |
|
2217 height: 120px; |
|
2218 } |
|
2219 |
|
2220 .ie7 .media-frame .attachment .describe { |
|
2221 width: 102px; |
|
2222 } |
|
2223 |
|
2224 .ie7 .media-sidebar .setting select { |
|
2225 max-width: 55%; |
|
2226 } |
|
2227 |
|
2228 .ie7 .media-sidebar .setting input[type="text"], |
|
2229 .ie7 .media-sidebar .setting input[type="password"], |
|
2230 .ie7 .media-sidebar .setting input[type="email"], |
|
2231 .ie7 .media-sidebar .setting input[type="number"], |
|
2232 .ie7 .media-sidebar .setting input[type="search"], |
|
2233 .ie7 .media-sidebar .setting input[type="tel"], |
|
2234 .ie7 .media-sidebar .setting input[type="url"], |
|
2235 .ie7 .media-sidebar .setting textarea { |
|
2236 width: 55%; |
|
2237 } |
|
2238 |
|
2239 .ie7 .media-sidebar .setting .link-to-custom { |
|
2240 float: right; |
|
2241 } |
|
2242 |
2364 |
2243 /** |
2365 /** |
2244 * Localization |
2366 * Localization |
2245 */ |
2367 */ |
2246 .rtl .media-modal, |
2368 .rtl .media-modal, |
2274 |
2396 |
2275 /** |
2397 /** |
2276 * Responsive layout |
2398 * Responsive layout |
2277 */ |
2399 */ |
2278 @media only screen and (max-width: 900px) { |
2400 @media only screen and (max-width: 900px) { |
2401 .media-modal .media-frame-title { |
|
2402 height: 40px; |
|
2403 } |
|
2404 |
|
2405 .media-modal .media-frame-title h1 { |
|
2406 line-height: 2.22222222; |
|
2407 font-size: 18px; |
|
2408 } |
|
2409 |
|
2410 .media-modal-close { |
|
2411 width: 42px; |
|
2412 height: 42px; |
|
2413 } |
|
2279 |
2414 |
2280 /* Drop-down menu */ |
2415 /* Drop-down menu */ |
2281 .media-frame:not(.hide-menu) .media-frame-title, |
2416 .media-frame .media-frame-title { |
2417 position: static; |
|
2418 padding: 0 44px; |
|
2419 text-align: center; |
|
2420 } |
|
2421 |
|
2282 .media-frame:not(.hide-menu) .media-frame-router, |
2422 .media-frame:not(.hide-menu) .media-frame-router, |
2283 .media-frame:not(.hide-menu) .media-frame-content, |
2423 .media-frame:not(.hide-menu) .media-frame-content, |
2284 .media-frame:not(.hide-menu) .media-frame-toolbar { |
2424 .media-frame:not(.hide-menu) .media-frame-toolbar { |
2285 right: 0; |
2425 right: 0; |
2286 } |
2426 } |
2287 |
2427 |
2428 .media-frame:not(.hide-menu) .media-frame-router { |
|
2429 /* 40 title + (40 - 6) menu toggle button + 6 spacing */ |
|
2430 top: 80px; |
|
2431 } |
|
2432 |
|
2433 .media-frame:not(.hide-menu) .media-frame-content { |
|
2434 /* 80 + room for the tabs */ |
|
2435 top: 114px; |
|
2436 } |
|
2437 |
|
2438 .media-frame.hide-router .media-frame-content { |
|
2439 top: 80px; |
|
2440 } |
|
2441 |
|
2288 .media-frame:not(.hide-menu) .media-frame-menu { |
2442 .media-frame:not(.hide-menu) .media-frame-menu { |
2289 position: static; |
2443 position: static; |
2290 width: 0; |
2444 width: 0; |
2291 } |
2445 } |
2292 |
2446 |
2293 .media-frame:not(.hide-menu) .media-menu { |
2447 .media-frame:not(.hide-menu) .media-menu { |
2448 display: none; |
|
2294 width: auto; |
2449 width: auto; |
2295 max-width: 80%; |
2450 max-width: 80%; |
2296 overflow: auto; |
2451 overflow: auto; |
2297 z-index: 2000; |
2452 z-index: 2000; |
2298 top: 50px; |
2453 top: 75px; |
2299 right: -300px; |
2454 right: 50%; |
2455 transform: translateX(50%); |
|
2300 left: auto; |
2456 left: auto; |
2301 bottom: auto; |
2457 bottom: auto; |
2302 padding: 5px 0; |
2458 padding: 5px 0; |
2303 border: 1px solid #ccc; |
2459 border: 1px solid #ccc; |
2304 } |
2460 } |
2305 |
2461 |
2306 .media-frame:not(.hide-menu) .media-menu.visible { |
2462 .media-frame:not(.hide-menu) .media-menu.visible { |
2307 right: 0; |
2463 display: block; |
2308 } |
2464 } |
2309 |
2465 |
2310 .media-frame:not(.hide-menu) .media-menu > a { |
2466 .media-frame:not(.hide-menu) .media-menu > a { |
2311 padding: 12px 16px; |
2467 padding: 12px 16px; |
2312 font-size: 16px; |
2468 font-size: 16px; |
2313 } |
2469 } |
2314 |
2470 |
2315 .media-frame:not(.hide-menu) .media-menu > a.active { |
|
2316 display: none; |
|
2317 } |
|
2318 |
|
2319 .media-frame:not(.hide-menu) .media-menu .separator { |
2471 .media-frame:not(.hide-menu) .media-menu .separator { |
2320 margin: 5px 10px; |
2472 margin: 5px 10px; |
2321 } |
2473 } |
2322 |
2474 |
2323 .media-frame:not(.hide-menu) .media-frame-title { |
2475 /* Visually hide the menu heading keeping it available to assistive technologies. */ |
2324 right: 0; |
2476 .media-frame-menu-heading { |
2325 } |
2477 clip: rect(1px, 1px, 1px, 1px); |
2326 |
2478 -webkit-clip-path: inset(50%); |
2327 .media-frame:not(.hide-menu) .media-frame-title .dashicons { |
2479 clip-path: inset(50%); |
2328 display: inline-block; |
2480 height: 1px; |
2329 line-height: 50px; |
2481 overflow: hidden; |
2330 } |
2482 padding: 0; |
2331 |
2483 width: 1px; |
2332 .media-frame:not(.hide-menu) .media-frame-title h1 { |
2484 word-wrap: normal !important; |
2333 color: #0073aa; |
2485 } |
2334 line-height: 3; |
2486 |
2335 font-size: 18px; |
2487 /* Reveal the menu toggle button. */ |
2336 float: right; |
2488 .wp-core-ui .media-frame:not(.hide-menu) .button.media-frame-menu-toggle { |
2337 cursor: pointer; |
2489 display: inline-flex; |
2490 align-items: center; |
|
2491 position: absolute; |
|
2492 right: 50%; |
|
2493 transform: translateX(50%); |
|
2494 margin: -6px 0 0; |
|
2495 padding: 0 12px 0 2px; |
|
2496 font-size: 0.875rem; |
|
2497 font-weight: 600; |
|
2498 text-decoration: none; |
|
2499 background: transparent; |
|
2500 /* Only for IE11 to vertically align text within the inline-flex button */ |
|
2501 height: 0.1%; |
|
2502 /* Modern browsers */ |
|
2503 min-height: 40px; |
|
2504 } |
|
2505 |
|
2506 .wp-core-ui .button.media-frame-menu-toggle:hover, |
|
2507 .wp-core-ui .button.media-frame-menu-toggle:active { |
|
2508 background: transparent; |
|
2509 transform: none; |
|
2510 } |
|
2511 |
|
2512 .wp-core-ui .button.media-frame-menu-toggle:focus { |
|
2513 /* Only visible in Windows High Contrast mode */ |
|
2514 outline: 1px solid transparent; |
|
2338 } |
2515 } |
2339 /* End drop-down menu */ |
2516 /* End drop-down menu */ |
2340 |
2517 |
2341 .media-sidebar { |
2518 .media-sidebar { |
2342 width: 230px; |
2519 width: 230px; |
2353 margin: 6px 0px; |
2530 margin: 6px 0px; |
2354 } |
2531 } |
2355 |
2532 |
2356 .media-sidebar .setting input, |
2533 .media-sidebar .setting input, |
2357 .media-sidebar .setting textarea, |
2534 .media-sidebar .setting textarea, |
2358 .media-sidebar .setting span, |
2535 .media-sidebar .setting .name, |
2359 .attachment-details .setting input, |
2536 .attachment-details .setting input, |
2360 .attachment-details .setting textarea, |
2537 .attachment-details .setting textarea, |
2361 .attachment-details .setting span, |
2538 .attachment-details .setting .name, |
2362 .compat-item label span { |
2539 .compat-item label span { |
2363 float: none; |
2540 float: none; |
2364 } |
2541 display: inline-block; |
2365 |
2542 } |
2366 .media-sidebar .setting span, |
2543 |
2367 .attachment-details .setting span, |
2544 .media-sidebar .setting span, /* Back-compat for pre-5.3 */ |
2545 .attachment-details .setting span, /* Back-compat for pre-5.3 */ |
|
2546 .media-sidebar .checkbox-label-inline { |
|
2547 float: none; |
|
2548 } |
|
2549 |
|
2550 .media-sidebar .setting .select-label-inline { |
|
2551 display: inline; |
|
2552 } |
|
2553 |
|
2554 .media-sidebar .setting .name, |
|
2555 .media-sidebar .checkbox-label-inline, |
|
2556 .attachment-details .setting .name, |
|
2368 .compat-item label span { |
2557 .compat-item label span { |
2369 text-align: inherit; |
2558 text-align: inherit; |
2370 min-height: 16px; |
2559 min-height: 16px; |
2371 margin: 0; |
2560 margin: 0; |
2372 padding: 8px 2px 0; |
2561 padding: 8px 2px 2px; |
2562 } |
|
2563 |
|
2564 /* Needs high specificity. */ |
|
2565 .media-sidebar .setting .copy-to-clipboard-container, |
|
2566 .attachment-details .attachment-info .copy-to-clipboard-container { |
|
2567 margin-right: 0; |
|
2568 padding-top: 0; |
|
2569 } |
|
2570 |
|
2571 .media-sidebar .setting .copy-attachment-url, |
|
2572 .attachment-details .attachment-info .copy-attachment-url { |
|
2573 margin: 0 1px; |
|
2373 } |
2574 } |
2374 |
2575 |
2375 .media-sidebar .setting .value, |
2576 .media-sidebar .setting .value, |
2376 .attachment-details .setting .value { |
2577 .attachment-details .setting .value { |
2377 float: none; |
2578 float: none; |
2401 width: 98%; |
2602 width: 98%; |
2402 max-width: none; |
2603 max-width: none; |
2403 height: auto; |
2604 height: auto; |
2404 } |
2605 } |
2405 |
2606 |
2607 .media-frame .media-toolbar input[type="search"] { |
|
2608 line-height: 2.25; /* 36px */ |
|
2609 } |
|
2610 |
|
2406 .media-sidebar .setting select.columns, |
2611 .media-sidebar .setting select.columns, |
2407 .attachment-details .setting select.columns { |
2612 .attachment-details .setting select.columns { |
2408 width: auto; |
2613 width: auto; |
2409 } |
2614 } |
2410 |
2615 |
2412 .media-frame textarea, |
2617 .media-frame textarea, |
2413 .media-frame .search { |
2618 .media-frame .search { |
2414 padding: 3px 6px; |
2619 padding: 3px 6px; |
2415 } |
2620 } |
2416 |
2621 |
2622 .wp-admin .media-frame select { |
|
2623 min-height: 40px; |
|
2624 font-size: 16px; |
|
2625 line-height: 1.625; |
|
2626 padding: 5px 8px 5px 24px; |
|
2627 } |
|
2628 |
|
2417 .image-details .column-image { |
2629 .image-details .column-image { |
2418 width: 30%; |
2630 width: 30%; |
2419 right: 70%; |
2631 right: 70%; |
2420 } |
2632 } |
2421 |
2633 |
2426 .image-details .media-modal { |
2638 .image-details .media-modal { |
2427 right: 30px; |
2639 right: 30px; |
2428 left: 30px; |
2640 left: 30px; |
2429 } |
2641 } |
2430 |
2642 |
2431 .image-details .embed-media-settings .setting { |
2643 .image-details .embed-media-settings .setting, |
2644 .image-details .embed-media-settings .setting-group { |
|
2432 margin: 20px; |
2645 margin: 20px; |
2433 } |
2646 } |
2434 |
2647 |
2435 .image-details .embed-media-settings .setting span { |
2648 .image-details .embed-media-settings .setting span, /* Back-compat for pre-5.3 */ |
2649 .image-details .embed-media-settings .setting .name { |
|
2436 float: none; |
2650 float: none; |
2437 text-align: right; |
2651 text-align: right; |
2438 width: 100%; |
2652 width: 100%; |
2439 margin-bottom: 4px; |
2653 margin-bottom: 4px; |
2654 margin-right: 0; |
|
2655 } |
|
2656 |
|
2657 .media-modal .legend-inline { |
|
2658 position: static; |
|
2659 transform: none; |
|
2660 margin-right: 0; |
|
2661 margin-bottom: 6px; |
|
2662 } |
|
2663 |
|
2664 .image-details .embed-media-settings .setting-group .setting { |
|
2665 margin-bottom: 0; |
|
2440 } |
2666 } |
2441 |
2667 |
2442 .image-details .embed-media-settings .setting input.link-to-custom, |
2668 .image-details .embed-media-settings .setting input.link-to-custom, |
2443 .image-details .embed-media-settings .setting input[type="text"], |
2669 .image-details .embed-media-settings .setting input[type="text"], |
2444 .image-details .embed-media-settings .setting textarea { |
2670 .image-details .embed-media-settings .setting textarea { |
2458 .image-details .embed-media-settings .custom-size { |
2684 .image-details .embed-media-settings .custom-size { |
2459 margin-right: 20px; |
2685 margin-right: 20px; |
2460 } |
2686 } |
2461 |
2687 |
2462 .collection-settings .setting input[type="checkbox"] { |
2688 .collection-settings .setting input[type="checkbox"] { |
2689 float: none; |
|
2463 margin-top: 0; |
2690 margin-top: 0; |
2464 } |
2691 } |
2465 |
2692 |
2466 .media-selection { |
2693 .media-selection { |
2467 min-width: 120px; |
2694 min-width: 120px; |
2481 float: left; |
2708 float: left; |
2482 } |
2709 } |
2483 |
2710 |
2484 .media-modal .attachments-browser .media-toolbar .attachment-filters { |
2711 .media-modal .attachments-browser .media-toolbar .attachment-filters { |
2485 height: auto; |
2712 height: auto; |
2486 } |
|
2487 |
|
2488 .media-modal .attachments-browser .media-toolbar .spinner { |
|
2489 margin: 14px 2px 0; |
|
2490 } |
2713 } |
2491 |
2714 |
2492 /* Text inputs need to be 16px, or they force zooming on iOS */ |
2715 /* Text inputs need to be 16px, or they force zooming on iOS */ |
2493 .media-frame input[type="text"], |
2716 .media-frame input[type="text"], |
2494 .media-frame input[type="password"], |
2717 .media-frame input[type="password"], |
2498 .media-frame input[type="url"], |
2721 .media-frame input[type="url"], |
2499 .media-frame textarea, |
2722 .media-frame textarea, |
2500 .media-frame select { |
2723 .media-frame select { |
2501 font-size: 16px; |
2724 font-size: 16px; |
2502 } |
2725 } |
2726 |
|
2727 .media-frame .media-toolbar input[type="search"] { |
|
2728 line-height: 2.3755; /* 38px */ |
|
2729 } |
|
2730 |
|
2731 .media-modal .media-toolbar .spinner { |
|
2732 margin-bottom: 10px; |
|
2733 } |
|
2734 } |
|
2735 |
|
2736 @media screen and (max-width: 782px) { |
|
2737 .attachments-browser .media-toolbar { |
|
2738 height: 82px; |
|
2739 } |
|
2740 |
|
2741 .attachments-browser .attachments, |
|
2742 .attachments-browser .uploader-inline { |
|
2743 top: 82px; |
|
2744 } |
|
2745 |
|
2746 .media-frame-toolbar .media-toolbar { |
|
2747 bottom: -54px; |
|
2748 } |
|
2749 |
|
2750 .mode-grid .attachments-browser .media-toolbar-primary { |
|
2751 display: block; |
|
2752 } |
|
2753 |
|
2754 .media-sidebar .copy-to-clipboard-container .success, |
|
2755 .attachment-details .copy-to-clipboard-container .success { |
|
2756 font-size: 14px; |
|
2757 line-height: 2.71428571; |
|
2758 } |
|
2503 } |
2759 } |
2504 |
2760 |
2505 /* Responsive on portrait and landscape */ |
2761 /* Responsive on portrait and landscape */ |
2506 @media only screen and (max-width: 640px), screen and (max-height: 400px) { |
2762 @media only screen and (max-width: 640px), screen and (max-height: 400px) { |
2507 /* Full-bleed modal */ |
2763 /* Full-bleed modal */ |
2557 .media-frame-content .media-toolbar .instructions { |
2813 .media-frame-content .media-toolbar .instructions { |
2558 display: none; |
2814 display: none; |
2559 } |
2815 } |
2560 } |
2816 } |
2561 |
2817 |
2562 /* Landscape specific header override */ |
|
2563 @media screen and (max-height: 400px) { |
|
2564 .media-menu, |
|
2565 .media-frame:not(.hide-menu) .media-menu { |
|
2566 top: 44px; |
|
2567 } |
|
2568 |
|
2569 .media-frame-router { |
|
2570 top: 44px; |
|
2571 } |
|
2572 |
|
2573 .media-frame-content { |
|
2574 top: 78px; |
|
2575 } |
|
2576 |
|
2577 .attachments-browser .attachments { |
|
2578 top: 40px; |
|
2579 } |
|
2580 |
|
2581 /* Prevent unnecessary scrolling on title input */ |
|
2582 .embed-link-settings { |
|
2583 overflow: visible; |
|
2584 } |
|
2585 } |
|
2586 |
|
2587 @media only screen and (min-width: 901px) and (max-height: 400px) { |
2818 @media only screen and (min-width: 901px) and (max-height: 400px) { |
2588 .media-menu, |
2819 .media-menu, |
2589 .media-frame:not(.hide-menu) .media-menu { |
2820 .media-frame:not(.hide-menu) .media-menu { |
2590 top: 0; |
2821 top: 0; |
2591 padding-top: 44px; |
2822 padding-top: 44px; |
2592 } |
2823 } |
2593 } |
2824 } |
2594 |
2825 |
2595 @media only screen and (max-width: 480px) { |
2826 @media only screen and (max-width: 480px) { |
2596 .media-modal-close { |
|
2597 top: -5px; |
|
2598 } |
|
2599 |
|
2600 .media-modal .media-frame-title { |
|
2601 height: 40px; |
|
2602 } |
|
2603 |
|
2604 .wp-core-ui.wp-customizer .media-button { |
2827 .wp-core-ui.wp-customizer .media-button { |
2605 margin-top: 13px; |
2828 margin-top: 13px; |
2606 } |
|
2607 |
|
2608 .media-modal .media-frame-title h1, |
|
2609 .media-frame:not(.hide-menu) .media-frame-title h1 { |
|
2610 font-size: 18px; |
|
2611 line-height: 40px; |
|
2612 } |
|
2613 |
|
2614 .media-frame:not(.hide-menu) .media-frame-title .dashicons { |
|
2615 line-height: 40px; |
|
2616 } |
|
2617 |
|
2618 .media-frame-router, |
|
2619 .media-frame:not(.hide-menu) .media-menu { |
|
2620 top: 40px; |
|
2621 padding-top: 0; |
|
2622 } |
|
2623 |
|
2624 .media-frame-content { |
|
2625 top: 74px; |
|
2626 } |
|
2627 |
|
2628 .media-frame.hide-router .media-frame-content { |
|
2629 top: 40px; |
|
2630 } |
2829 } |
2631 } |
2830 } |
2632 |
2831 |
2633 /** |
2832 /** |
2634 * HiDPI Displays |
2833 * HiDPI Displays |