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