|
1 /** |
|
2 * Base Styles |
|
3 */ |
|
4 .media-modal, |
|
5 .media-frame { |
|
6 font-family: sans-serif; |
|
7 font-size: 12px; |
|
8 } |
|
9 |
|
10 .media-frame input, |
|
11 .media-frame textarea { |
|
12 padding: 6px 8px; |
|
13 line-height: 16px; |
|
14 } |
|
15 |
|
16 .media-frame select, |
|
17 .wp-admin .media-frame select { |
|
18 line-height: 28px; |
|
19 margin-top: 3px; |
|
20 } |
|
21 |
|
22 .media-frame a { |
|
23 border-bottom: none; |
|
24 color: #21759b; |
|
25 } |
|
26 |
|
27 .media-frame a:hover { |
|
28 color: #d54e21; |
|
29 } |
|
30 |
|
31 .media-frame a.button { |
|
32 color: #333; |
|
33 } |
|
34 |
|
35 .media-frame a.button:hover { |
|
36 color: #222; |
|
37 } |
|
38 |
|
39 .media-frame a.button-primary, |
|
40 .media-frame a.button-primary:hover { |
|
41 color: #fff; |
|
42 } |
|
43 |
|
44 .media-frame input[type="text"], |
|
45 .media-frame input[type="password"], |
|
46 .media-frame input[type="number"], |
|
47 .media-frame input[type="search"], |
|
48 .media-frame input[type="email"], |
|
49 .media-frame input[type="url"], |
|
50 .media-frame textarea, |
|
51 .media-frame select { |
|
52 font-family: sans-serif; |
|
53 font-size: 12px; |
|
54 -moz-box-sizing: border-box; |
|
55 -webkit-box-sizing: border-box; |
|
56 -ms-box-sizing: border-box; /* ie8 only */ |
|
57 box-sizing: border-box; |
|
58 -webkit-border-radius: 3px; |
|
59 border-radius: 3px; |
|
60 border-width: 1px; |
|
61 border-style: solid; |
|
62 border-color: #dfdfdf; |
|
63 } |
|
64 |
|
65 .media-frame select { |
|
66 height: 24px; |
|
67 padding: 2px; |
|
68 } |
|
69 |
|
70 .media-frame input:disabled, |
|
71 .media-frame textarea:disabled, |
|
72 .media-frame input[readonly], |
|
73 .media-frame textarea[readonly] { |
|
74 background-color: #eee; |
|
75 } |
|
76 |
|
77 .media-frame input[type="search"] { |
|
78 -webkit-appearance: textfield; |
|
79 } |
|
80 |
|
81 .media-frame :-moz-placeholder { |
|
82 color: #a9a9a9; |
|
83 } |
|
84 |
|
85 /* Enable draggable on IE10 touch events until it's rolled into jQuery UI core */ |
|
86 .ui-sortable, |
|
87 .ui-draggable { |
|
88 -ms-touch-action: none; |
|
89 } |
|
90 |
|
91 /** |
|
92 * Modal |
|
93 */ |
|
94 .media-modal { |
|
95 position: fixed; |
|
96 top: 30px; |
|
97 left: 30px; |
|
98 right: 30px; |
|
99 bottom: 30px; |
|
100 z-index: 160000; |
|
101 } |
|
102 |
|
103 .media-modal-backdrop { |
|
104 position: fixed; |
|
105 top: 0; |
|
106 left: 0; |
|
107 right: 0; |
|
108 bottom: 0; |
|
109 min-height: 360px; |
|
110 background: #000; |
|
111 opacity: 0.7; |
|
112 z-index: 159900; |
|
113 } |
|
114 |
|
115 .media-modal-close { |
|
116 position: absolute; |
|
117 top: 7px; |
|
118 right: 7px; |
|
119 width: 30px; |
|
120 height: 30px; |
|
121 z-index: 1000; |
|
122 } |
|
123 .media-modal-close span { |
|
124 display: block; |
|
125 margin: 8px auto 0; |
|
126 width: 15px; |
|
127 height: 15px; |
|
128 background-position: -100px 0; |
|
129 } |
|
130 |
|
131 .media-modal-close:active { |
|
132 outline: 0; |
|
133 } |
|
134 |
|
135 .media-modal-content { |
|
136 position: absolute; |
|
137 top: 0; |
|
138 left: 0; |
|
139 right: 0; |
|
140 bottom: 0; |
|
141 overflow: auto; |
|
142 min-height: 300px; |
|
143 background: #fff; |
|
144 } |
|
145 |
|
146 .media-modal-icon { |
|
147 background-image: url(../images/uploader-icons.png); |
|
148 background-repeat: no-repeat; |
|
149 } |
|
150 |
|
151 /** |
|
152 * Toolbar |
|
153 */ |
|
154 .media-toolbar { |
|
155 position: absolute; |
|
156 top: 0; |
|
157 left: 0; |
|
158 right: 0; |
|
159 z-index: 100; |
|
160 height: 60px; |
|
161 padding: 0 16px; |
|
162 border: 0 solid #dfdfdf; |
|
163 overflow: hidden; |
|
164 } |
|
165 |
|
166 .media-toolbar-primary { |
|
167 float: right; |
|
168 height: 100%; |
|
169 } |
|
170 |
|
171 .media-toolbar-secondary { |
|
172 float: left; |
|
173 height: 100%; |
|
174 } |
|
175 |
|
176 .media-toolbar-primary > .media-button, |
|
177 .media-toolbar-primary > .media-button-group { |
|
178 margin-left: 10px; |
|
179 float: left; |
|
180 margin-top: 15px; |
|
181 } |
|
182 |
|
183 .media-toolbar-secondary > .media-button, |
|
184 .media-toolbar-secondary > .media-button-group { |
|
185 margin-right: 10px; |
|
186 float: left; |
|
187 margin-top: 15px; |
|
188 } |
|
189 |
|
190 /** |
|
191 * Sidebar |
|
192 */ |
|
193 .media-sidebar { |
|
194 position: absolute; |
|
195 top: 0; |
|
196 right: 0; |
|
197 bottom: 0; |
|
198 width: 267px; |
|
199 padding: 0 16px 24px; |
|
200 z-index: 75; |
|
201 background: #f5f5f5; |
|
202 border-left: 1px solid #dfdfdf; |
|
203 overflow: auto; |
|
204 -webkit-overflow-scrolling: touch; |
|
205 } |
|
206 |
|
207 .hide-toolbar .media-sidebar { |
|
208 bottom: 0; |
|
209 } |
|
210 |
|
211 .media-sidebar .sidebar-title { |
|
212 font-weight: 200; |
|
213 font-size: 20px; |
|
214 margin: 0; |
|
215 padding: 12px 10px 10px; |
|
216 line-height: 28px; |
|
217 } |
|
218 |
|
219 .media-sidebar .sidebar-content { |
|
220 padding: 0 10px; |
|
221 margin-bottom: 130px; |
|
222 } |
|
223 |
|
224 .media-sidebar .search { |
|
225 display: block; |
|
226 width: 100%; |
|
227 } |
|
228 |
|
229 .media-sidebar h3 { |
|
230 position: relative; |
|
231 font-weight: bold; |
|
232 text-transform: uppercase; |
|
233 font-size: 12px; |
|
234 color: #777; |
|
235 text-shadow: 0 1px 0 #fff; |
|
236 margin: 24px 0 8px; |
|
237 } |
|
238 |
|
239 .media-sidebar .setting { |
|
240 display: block; |
|
241 float: left; |
|
242 width: 100%; |
|
243 margin: 1px 0; |
|
244 } |
|
245 |
|
246 .media-sidebar .setting label { |
|
247 display: block; |
|
248 } |
|
249 |
|
250 .media-sidebar .setting .link-to-custom { |
|
251 margin: 3px 0; |
|
252 } |
|
253 |
|
254 .media-sidebar .setting span { |
|
255 min-width: 30%; |
|
256 margin-right: 4%; |
|
257 font-size: 12px; |
|
258 } |
|
259 |
|
260 .media-sidebar .setting select { |
|
261 max-width: 65%; |
|
262 } |
|
263 |
|
264 .media-sidebar .setting input[type="checkbox"] { |
|
265 width: auto; |
|
266 float: none; |
|
267 margin-top: 8px; |
|
268 padding: 0; |
|
269 } |
|
270 |
|
271 .media-sidebar .setting span, |
|
272 .compat-item label span { |
|
273 float: left; |
|
274 min-height: 22px; |
|
275 padding-top: 8px; |
|
276 line-height: 16px; |
|
277 text-align: right; |
|
278 font-weight: normal; |
|
279 color: #999; |
|
280 text-shadow: 0 1px 0 #fff; |
|
281 } |
|
282 |
|
283 .media-sidebar .setting input, |
|
284 .media-sidebar .setting textarea { |
|
285 width: 65%; |
|
286 float: right; |
|
287 } |
|
288 |
|
289 .media-sidebar .setting textarea, |
|
290 .compat-item .field textarea { |
|
291 height: 62px; |
|
292 resize: vertical; |
|
293 } |
|
294 |
|
295 .media-sidebar select { |
|
296 margin-top: 3px; |
|
297 } |
|
298 |
|
299 .compat-item { |
|
300 float: left; |
|
301 width: 100%; |
|
302 overflow: hidden; |
|
303 } |
|
304 |
|
305 .compat-item table { |
|
306 width: 100%; |
|
307 table-layout: fixed; |
|
308 border-spacing: 0; |
|
309 border: 0; |
|
310 } |
|
311 |
|
312 .compat-item tr { |
|
313 padding: 2px 0; |
|
314 display: block; |
|
315 overflow: hidden; |
|
316 } |
|
317 |
|
318 .compat-item .label, |
|
319 .compat-item .field { |
|
320 display: block; |
|
321 margin: 0; |
|
322 padding: 0; |
|
323 } |
|
324 |
|
325 .compat-item .label { |
|
326 min-width: 30%; |
|
327 margin-right: 4%; |
|
328 float: left; |
|
329 text-align: right; |
|
330 } |
|
331 |
|
332 .compat-item .label span { |
|
333 display: block; |
|
334 width: 100%; |
|
335 } |
|
336 |
|
337 .compat-item .field { |
|
338 float: right; |
|
339 width: 65%; |
|
340 padding-right: 1px; |
|
341 } |
|
342 |
|
343 .compat-item .field input { |
|
344 width: 100%; |
|
345 margin: 0; |
|
346 } |
|
347 |
|
348 |
|
349 /** |
|
350 * Menu |
|
351 */ |
|
352 .media-menu { |
|
353 position: absolute; |
|
354 top: 0; |
|
355 left: 0; |
|
356 right: 0; |
|
357 bottom: 0; |
|
358 margin: 0; |
|
359 padding: 16px 0; |
|
360 border-right: 1px solid #d9d9d9; |
|
361 box-shadow: inset -6px 0 6px -6px rgba( 0, 0, 0, 0.2 ); |
|
362 -webkit-user-select: none; |
|
363 -moz-user-select: none; |
|
364 -ms-user-select: none; |
|
365 user-select: none; |
|
366 } |
|
367 |
|
368 .media-menu > a { |
|
369 display: block; |
|
370 position: relative; |
|
371 padding: 4px 20px; |
|
372 margin: 0; |
|
373 line-height: 18px; |
|
374 font-size: 14px; |
|
375 color: #21759B; |
|
376 text-shadow: 0 1px 0 #fff; |
|
377 text-decoration: none; |
|
378 } |
|
379 |
|
380 .media-menu > a:hover { |
|
381 color: #21759B; |
|
382 background: rgba( 0, 0, 0, 0.04 ); |
|
383 } |
|
384 |
|
385 .media-menu > a:active { |
|
386 outline: none; |
|
387 } |
|
388 |
|
389 .media-menu .active, |
|
390 .media-menu .active:hover { |
|
391 color: #333; |
|
392 font-weight: bold; |
|
393 } |
|
394 |
|
395 .media-menu .separator { |
|
396 height: 0; |
|
397 margin: 12px 20px; |
|
398 padding: 0; |
|
399 border-top: 1px solid #dfdfdf; |
|
400 border-bottom: 1px solid #fff; |
|
401 } |
|
402 |
|
403 /** |
|
404 * Menu |
|
405 */ |
|
406 .media-router { |
|
407 position: relative; |
|
408 padding: 0 6px; |
|
409 margin: 0; |
|
410 clear: both; |
|
411 -webkit-user-select: none; |
|
412 -moz-user-select: none; |
|
413 -ms-user-select: none; |
|
414 user-select: none; |
|
415 } |
|
416 |
|
417 .media-router > a { |
|
418 position: relative; |
|
419 float: left; |
|
420 padding: 2px 10px; |
|
421 margin: 0; |
|
422 height: 18px; |
|
423 line-height: 18px; |
|
424 font-size: 14px; |
|
425 border-right: 1px solid #dfdfdf; |
|
426 text-shadow: 0 1px 0 #fff; |
|
427 text-decoration: none; |
|
428 } |
|
429 |
|
430 .media-router > a:last-child { |
|
431 border-right: 0; |
|
432 } |
|
433 |
|
434 .media-router > a:active, |
|
435 .media-router > a:focus { |
|
436 outline: none; |
|
437 } |
|
438 |
|
439 .media-router .active, |
|
440 .media-router .active:hover { |
|
441 color: #333; |
|
442 } |
|
443 |
|
444 .media-router .active:after { |
|
445 content: ''; |
|
446 display: block; |
|
447 margin: -100px auto 0; |
|
448 width: 7px; |
|
449 height: 7px; |
|
450 background: #fff; |
|
451 box-shadow: 1px 1px 1px rgba( 0, 0, 0, 0.2 ); |
|
452 z-index: 300; |
|
453 |
|
454 -webkit-transform: rotate( 45deg ) translate( 75px, 75px ); |
|
455 -moz-transform: rotate( 45deg ) translate( 75px, 75px ); |
|
456 -ms-transform: rotate( 45deg ) translate( 75px, 75px ); |
|
457 -o-transform: rotate( 45deg ) translate( 75px, 75px ); |
|
458 transform: rotate( 45deg ) translate( 75px, 75px ); |
|
459 } |
|
460 |
|
461 /** |
|
462 * Frame |
|
463 */ |
|
464 .media-frame { |
|
465 overflow: hidden; |
|
466 position: absolute; |
|
467 top: 0; |
|
468 left: 0; |
|
469 right: 0; |
|
470 bottom: 0; |
|
471 } |
|
472 |
|
473 .media-frame-menu { |
|
474 position: absolute; |
|
475 top: 0; |
|
476 left: 0; |
|
477 bottom: 0; |
|
478 width: 199px; |
|
479 z-index: 150; |
|
480 } |
|
481 |
|
482 .media-frame-title { |
|
483 position: absolute; |
|
484 top: 0; |
|
485 left: 200px; |
|
486 right: 0; |
|
487 height: 45px; |
|
488 z-index: 200; |
|
489 } |
|
490 |
|
491 .media-frame-router { |
|
492 position: absolute; |
|
493 top: 45px; |
|
494 left: 200px; |
|
495 right: 0; |
|
496 height: 30px; |
|
497 z-index: 200; |
|
498 border-bottom: 1px solid #dfdfdf; |
|
499 box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 ); |
|
500 } |
|
501 |
|
502 .media-frame-content { |
|
503 position: absolute; |
|
504 top: 75px; |
|
505 left: 200px; |
|
506 right: 0; |
|
507 bottom: 61px; |
|
508 height: auto; |
|
509 width: auto; |
|
510 margin: 0; |
|
511 overflow: auto; |
|
512 } |
|
513 |
|
514 .media-frame-toolbar { |
|
515 position: absolute; |
|
516 left: 200px; |
|
517 right: 0; |
|
518 bottom: 0; |
|
519 height: 60px; |
|
520 z-index: 100; |
|
521 border: 0 solid #dfdfdf; |
|
522 border-width: 1px 0 0 0; |
|
523 box-shadow: 0 -4px 4px -4px rgba( 0, 0, 0, 0.1 ); |
|
524 } |
|
525 |
|
526 .media-frame.hide-menu .media-frame-title, |
|
527 .media-frame.hide-menu .media-frame-router, |
|
528 .media-frame.hide-menu .media-frame-toolbar, |
|
529 .media-frame.hide-menu .media-frame-content { |
|
530 left: 0; |
|
531 } |
|
532 |
|
533 .media-frame.hide-menu .media-frame-menu { |
|
534 left: -200px; |
|
535 } |
|
536 |
|
537 .media-frame.hide-toolbar .media-frame-content { |
|
538 bottom: 0; |
|
539 } |
|
540 |
|
541 .media-frame.hide-toolbar .media-frame-toolbar { |
|
542 bottom: -61px; |
|
543 } |
|
544 |
|
545 .media-frame.hide-router .media-frame-content { |
|
546 top: 45px; |
|
547 } |
|
548 |
|
549 .media-frame.hide-router .media-frame-router { |
|
550 display: none; |
|
551 } |
|
552 |
|
553 .media-frame.hide-router .media-frame-title { |
|
554 border-bottom: 1px solid #dfdfdf; |
|
555 box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 ); |
|
556 } |
|
557 |
|
558 .media-frame .media-toolbar .add-to-gallery { |
|
559 display: none; |
|
560 } |
|
561 |
|
562 .media-frame-title h1 { |
|
563 padding: 0 16px; |
|
564 font-size: 22px; |
|
565 font-weight: 200; |
|
566 line-height: 45px; |
|
567 margin: 0; |
|
568 } |
|
569 |
|
570 /** |
|
571 * Iframes |
|
572 */ |
|
573 .media-frame .media-iframe { |
|
574 overflow: hidden; |
|
575 } |
|
576 |
|
577 .media-frame .media-iframe, |
|
578 .media-frame .media-iframe iframe { |
|
579 height: 100%; |
|
580 width: 100%; |
|
581 border: 0; |
|
582 } |
|
583 |
|
584 /** |
|
585 * Attachment Browser Filters |
|
586 */ |
|
587 .media-frame select.attachment-filters { |
|
588 margin-top: 11px; |
|
589 margin-right: 10px; |
|
590 } |
|
591 |
|
592 /** |
|
593 * Search |
|
594 */ |
|
595 .media-frame .search { |
|
596 margin-top: 11px; |
|
597 padding: 4px; |
|
598 line-height: 18px; |
|
599 font-size: 13px; |
|
600 color: #464646; |
|
601 font-family: sans-serif; |
|
602 -webkit-appearance: none; |
|
603 } |
|
604 |
|
605 .media-toolbar-secondary .search { |
|
606 margin-right: 16px; |
|
607 } |
|
608 |
|
609 /** |
|
610 * Attachments |
|
611 */ |
|
612 .attachments { |
|
613 margin: 0; |
|
614 padding-right: 16px; |
|
615 -webkit-overflow-scrolling: touch; |
|
616 } |
|
617 |
|
618 /** |
|
619 * Attachment |
|
620 */ |
|
621 .attachment { |
|
622 position: relative; |
|
623 float: left; |
|
624 |
|
625 padding: 0; |
|
626 margin: 0 10px 20px; |
|
627 color: #464646; |
|
628 list-style: none; |
|
629 text-align: center; |
|
630 |
|
631 -webkit-user-select: none; |
|
632 -moz-user-select: none; |
|
633 -ms-user-select: none; |
|
634 -o-user-select: none; |
|
635 user-select: none; |
|
636 } |
|
637 |
|
638 .selected.attachment { |
|
639 box-shadow: |
|
640 0 0 0 1px #fff, |
|
641 0 0 0 3px #ccc; |
|
642 } |
|
643 |
|
644 .details.attachment { |
|
645 box-shadow: |
|
646 0 0 0 1px #fff, |
|
647 0 0 0 5px #1e8cbe; |
|
648 } |
|
649 |
|
650 .attachment-preview { |
|
651 position: relative; |
|
652 width: 199px; |
|
653 height: 199px; |
|
654 box-shadow: |
|
655 inset 0 0 15px rgba( 0, 0, 0, 0.1 ), |
|
656 inset 0 0 0 1px rgba( 0, 0, 0, 0.05 ); |
|
657 background: #eee; |
|
658 cursor: pointer; |
|
659 } |
|
660 |
|
661 .attachment .icon { |
|
662 margin: 0 auto; |
|
663 overflow: hidden; |
|
664 padding-top: 20%; |
|
665 } |
|
666 |
|
667 .attachment .thumbnail { |
|
668 display: block; |
|
669 position: absolute; |
|
670 top: 0; |
|
671 left: 0; |
|
672 margin: 0 auto; |
|
673 overflow: hidden; |
|
674 max-width: 100%; |
|
675 max-height: 100%; |
|
676 } |
|
677 |
|
678 .attachment-preview .thumbnail:after { |
|
679 content: ''; |
|
680 display: block; |
|
681 position: absolute; |
|
682 top: 0; |
|
683 left: 0; |
|
684 right: 0; |
|
685 bottom: 0; |
|
686 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 ); |
|
687 overflow: hidden; |
|
688 } |
|
689 |
|
690 .attachment .thumbnail img { |
|
691 top: 0; |
|
692 left: 0; |
|
693 } |
|
694 |
|
695 .attachment .thumbnail .centered { |
|
696 position: absolute; |
|
697 top: 0; |
|
698 left: 0; |
|
699 width: 100%; |
|
700 height: 100%; |
|
701 -webkit-transform: translate( 50%, 50% ); |
|
702 -moz-transform: translate( 50%, 50% ); |
|
703 -ms-transform: translate( 50%, 50% ); |
|
704 -o-transform: translate( 50%, 50% ); |
|
705 transform: translate( 50%, 50% ); |
|
706 } |
|
707 |
|
708 .attachment .thumbnail .centered img { |
|
709 -webkit-transform: translate( -50%, -50% ); |
|
710 -moz-transform: translate( -50%, -50% ); |
|
711 -ms-transform: translate( -50%, -50% ); |
|
712 -o-transform: translate( -50%, -50% ); |
|
713 transform: translate( -50%, -50% ); |
|
714 } |
|
715 |
|
716 .attachment .filename { |
|
717 position: absolute; |
|
718 left: 0; |
|
719 right: 0; |
|
720 bottom: 0; |
|
721 overflow: hidden; |
|
722 max-height: 100%; |
|
723 |
|
724 word-wrap: break-word; |
|
725 text-align: center; |
|
726 font-weight: bold; |
|
727 background: rgba( 255, 255, 255, 0.8 ); |
|
728 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 ); |
|
729 } |
|
730 |
|
731 .attachment .filename div { |
|
732 padding: 5px 10px; |
|
733 } |
|
734 |
|
735 .attachment-preview .thumbnail { |
|
736 width: 199px; |
|
737 height: 199px; |
|
738 } |
|
739 |
|
740 .attachment .thumbnail img { |
|
741 position: absolute; |
|
742 } |
|
743 |
|
744 .attachment .close { |
|
745 display: none; |
|
746 position: absolute; |
|
747 top: 5px; |
|
748 right: 5px; |
|
749 height: 22px; |
|
750 width: 22px; |
|
751 padding: 0; |
|
752 font-size: 20px; |
|
753 line-height: 20px; |
|
754 text-align: center; |
|
755 text-decoration: none; |
|
756 color: #464646; |
|
757 background-color: #fff; |
|
758 background-position: -96px 4px; |
|
759 border-width: 0; |
|
760 border-radius: 3px; |
|
761 box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 ); |
|
762 } |
|
763 |
|
764 .attachment .close:hover { |
|
765 box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 ); |
|
766 } |
|
767 |
|
768 .attachment:hover .close { |
|
769 display: block; |
|
770 } |
|
771 |
|
772 .attachment .check { |
|
773 display: none; |
|
774 height: 24px; |
|
775 width: 24px; |
|
776 position: absolute; |
|
777 top: -7px; |
|
778 right: -7px; |
|
779 outline: none; |
|
780 |
|
781 border: 1px solid #fff; |
|
782 border-radius: 3px; |
|
783 box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.4 ); |
|
784 |
|
785 background: #f1f1f1; |
|
786 background-image: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#e1e1e1)); |
|
787 background-image: -webkit-linear-gradient(top, #f1f1f1, #e1e1e1); |
|
788 background-image: -moz-linear-gradient(top, #f1f1f1, #e1e1e1); |
|
789 background-image: -o-linear-gradient(top, #f1f1f1, #e1e1e1); |
|
790 background-image: linear-gradient(to bottom, #f1f1f1, #e1e1e1); |
|
791 } |
|
792 |
|
793 .attachment .check div { |
|
794 background-position: -1px 0; |
|
795 height: 15px; |
|
796 width: 15px; |
|
797 margin: 5px; |
|
798 } |
|
799 |
|
800 .attachment .check:hover div { |
|
801 background-position: -40px 0; |
|
802 } |
|
803 |
|
804 .attachment.selected .check { |
|
805 display: block; |
|
806 } |
|
807 |
|
808 .attachment.details .check { |
|
809 box-shadow: 0 0 0 1px #1e8cbe; |
|
810 |
|
811 background: #1e8cbe; |
|
812 background-image: -webkit-gradient(linear, left top, left bottom, from(#1e8cbe), to(#0074a2)); |
|
813 background-image: -webkit-linear-gradient(top, #1e8cbe, #0074a2); |
|
814 background-image: -moz-linear-gradient(top, #1e8cbe, #0074a2); |
|
815 background-image: -o-linear-gradient(top, #1e8cbe, #0074a2); |
|
816 background-image: linear-gradient(to bottom, #1e8cbe, #0074a2); |
|
817 } |
|
818 |
|
819 .attachment.details .check div { |
|
820 background-position: -21px 0; |
|
821 } |
|
822 |
|
823 .attachment.details .check:hover div { |
|
824 background-position: -60px 0; |
|
825 } |
|
826 |
|
827 .media-frame .attachment .describe { |
|
828 position: relative; |
|
829 display: block; |
|
830 width: 100%; |
|
831 margin: -1px 0 0; |
|
832 padding: 8px; |
|
833 font-size: 12px; |
|
834 border-radius: 0; |
|
835 } |
|
836 |
|
837 /** |
|
838 * Attachments Browser |
|
839 */ |
|
840 .media-frame .attachments-browser { |
|
841 position: relative; |
|
842 width: 100%; |
|
843 height: 100%; |
|
844 overflow: hidden; |
|
845 } |
|
846 |
|
847 .attachments-browser .media-toolbar { |
|
848 right: 300px; |
|
849 height: 50px; |
|
850 } |
|
851 |
|
852 .attachments-browser .media-toolbar-primary > .media-button, |
|
853 .attachments-browser .media-toolbar-primary > .media-button-group, |
|
854 .attachments-browser .media-toolbar-secondary > .media-button, |
|
855 .attachments-browser .media-toolbar-secondary > .media-button-group { |
|
856 margin-top: 10px; |
|
857 } |
|
858 |
|
859 .attachments-browser .attachments, |
|
860 .attachments-browser .uploader-inline { |
|
861 position: absolute; |
|
862 top: 50px; |
|
863 left: 0; |
|
864 right: 300px; |
|
865 bottom: 0; |
|
866 overflow: auto; |
|
867 } |
|
868 |
|
869 .attachments-browser .instructions { |
|
870 display: inline-block; |
|
871 margin-top: 16px; |
|
872 line-height: 18px; |
|
873 font-size: 13px; |
|
874 color: #999; |
|
875 } |
|
876 |
|
877 /** |
|
878 * Progress Bar |
|
879 */ |
|
880 .media-progress-bar { |
|
881 position: relative; |
|
882 height: 10px; |
|
883 width: 70%; |
|
884 margin: 10px auto; |
|
885 border-radius: 10px; |
|
886 background: #dfdfdf; |
|
887 background: rgba( 0, 0, 0, 0.1 ); |
|
888 } |
|
889 |
|
890 .media-progress-bar div { |
|
891 height: 10px; |
|
892 min-width: 20px; |
|
893 width: 0; |
|
894 background: #aaa; |
|
895 background: rgba( 0, 0, 0, 0.2 ); |
|
896 border-radius: 10px; |
|
897 -webkit-transition: width 300ms; |
|
898 -moz-transition: width 300ms; |
|
899 -ms-transition: width 300ms; |
|
900 -o-transition: width 300ms; |
|
901 transition: width 300ms; |
|
902 } |
|
903 |
|
904 .media-uploader-status .media-progress-bar { |
|
905 display: none; |
|
906 width: 100%; |
|
907 } |
|
908 |
|
909 .uploading.media-uploader-status .media-progress-bar { |
|
910 display: block; |
|
911 } |
|
912 |
|
913 .attachment-preview .media-progress-bar { |
|
914 position: absolute; |
|
915 top: 50%; |
|
916 left: 15%; |
|
917 width: 70%; |
|
918 margin: -5px 0 0 0; |
|
919 } |
|
920 |
|
921 .media-uploader-status { |
|
922 position: relative; |
|
923 margin: 0 auto; |
|
924 padding-bottom: 10px; |
|
925 max-width: 400px; |
|
926 } |
|
927 |
|
928 .media-sidebar .media-uploader-status { |
|
929 border-bottom: 1px solid #dfdfdf; |
|
930 box-shadow: 0 1px 0 #fff; |
|
931 } |
|
932 |
|
933 .uploader-inline .media-uploader-status h3 { |
|
934 display: none; |
|
935 } |
|
936 |
|
937 .media-uploader-status .upload-details { |
|
938 display: none; |
|
939 font-size: 12px; |
|
940 color: #666; |
|
941 text-shadow: 0 1px 0 #fff; |
|
942 } |
|
943 |
|
944 .uploading.media-uploader-status .upload-details { |
|
945 display: block; |
|
946 } |
|
947 |
|
948 .media-uploader-status .upload-detail-separator { |
|
949 padding: 0 4px; |
|
950 } |
|
951 |
|
952 .media-uploader-status .upload-count { |
|
953 color: #464646; |
|
954 } |
|
955 |
|
956 .media-uploader-status .upload-dismiss-errors, |
|
957 .media-uploader-status .upload-errors { |
|
958 display: none; |
|
959 } |
|
960 |
|
961 .errors.media-uploader-status .upload-dismiss-errors, |
|
962 .errors.media-uploader-status .upload-errors { |
|
963 display: block; |
|
964 } |
|
965 |
|
966 .media-uploader-status .upload-dismiss-errors { |
|
967 text-decoration: none; |
|
968 } |
|
969 |
|
970 .media-sidebar .media-uploader-status .upload-dismiss-errors { |
|
971 position: absolute; |
|
972 top: 0; |
|
973 right: 0; |
|
974 } |
|
975 |
|
976 .upload-errors .upload-error { |
|
977 margin: 8px auto 0 auto; |
|
978 padding: 8px; |
|
979 border: 1px #c00 solid; |
|
980 background: #ffebe8; |
|
981 border-radius: 3px; |
|
982 } |
|
983 |
|
984 .upload-errors .upload-error-label { |
|
985 padding: 2px 4px; |
|
986 margin-right: 8px; |
|
987 font-weight: bold; |
|
988 color: #fff; |
|
989 background: #e00; |
|
990 background-image: -webkit-gradient(linear, left top, left bottom, from(#e00), to(#a00)); |
|
991 background-image: -webkit-linear-gradient(top, #e00, #a00); |
|
992 background-image: -moz-linear-gradient(top, #e00, #a00); |
|
993 background-image: -o-linear-gradient(top, #e00, #a00); |
|
994 background-image: linear-gradient(to bottom, #e00, #a00); |
|
995 border-radius: 3px; |
|
996 } |
|
997 |
|
998 .upload-errors .upload-error-message { |
|
999 display: block; |
|
1000 padding-top: 8px; |
|
1001 color: #b44; |
|
1002 word-wrap: break-word; |
|
1003 } |
|
1004 |
|
1005 .uploader-window { |
|
1006 position: fixed; |
|
1007 top: 0; |
|
1008 left: 0; |
|
1009 right: 0; |
|
1010 bottom: 0; |
|
1011 background: rgba( 0, 86, 132, 0.9 ); |
|
1012 |
|
1013 z-index: 250000; |
|
1014 display: none; |
|
1015 text-align: center; |
|
1016 opacity: 0; |
|
1017 |
|
1018 -webkit-transition: opacity 250ms; |
|
1019 -moz-transition: opacity 250ms; |
|
1020 -ms-transition: opacity 250ms; |
|
1021 -o-transition: opacity 250ms; |
|
1022 transition: opacity 250ms; |
|
1023 } |
|
1024 |
|
1025 .uploader-window-content { |
|
1026 position: absolute; |
|
1027 top: 10px; |
|
1028 left: 10px; |
|
1029 right: 10px; |
|
1030 bottom: 10px; |
|
1031 border: 1px dashed #fff; |
|
1032 } |
|
1033 |
|
1034 .uploader-window h3 { |
|
1035 position: absolute; |
|
1036 top: 50%; |
|
1037 left: 0; |
|
1038 right: 0; |
|
1039 -webkit-transform: translateY( -50% ); |
|
1040 -moz-transform: translateY( -50% ); |
|
1041 -ms-transform: translateY( -50% ); |
|
1042 -o-transform: translateY( -50% ); |
|
1043 transform: translateY( -50% ); |
|
1044 |
|
1045 font-size: 20px; |
|
1046 font-weight: 200; |
|
1047 color: #fff; |
|
1048 padding: 0; |
|
1049 } |
|
1050 |
|
1051 .uploader-window .media-progress-bar { |
|
1052 margin-top: 20px; |
|
1053 max-width: 300px; |
|
1054 background: transparent; |
|
1055 border-color: #fff; |
|
1056 display: none; |
|
1057 } |
|
1058 |
|
1059 .uploader-window .media-progress-bar div { |
|
1060 background: #fff; |
|
1061 } |
|
1062 |
|
1063 .uploading .uploader-window .media-progress-bar { |
|
1064 display: block; |
|
1065 } |
|
1066 |
|
1067 .media-frame .uploader-inline { |
|
1068 margin: 20px; |
|
1069 padding: 20px; |
|
1070 text-align: center; |
|
1071 } |
|
1072 |
|
1073 .uploader-inline-content { |
|
1074 position: absolute; |
|
1075 top: 30%; |
|
1076 left: 0; |
|
1077 right: 0; |
|
1078 } |
|
1079 |
|
1080 .uploader-inline-content .upload-ui { |
|
1081 margin: 4em 0; |
|
1082 } |
|
1083 |
|
1084 .uploader-inline-content .post-upload-ui { |
|
1085 margin-bottom: 2em; |
|
1086 } |
|
1087 |
|
1088 .uploader-inline .has-upload-message .upload-ui { |
|
1089 margin: 0 0 4em; |
|
1090 } |
|
1091 |
|
1092 .uploader-inline h3 { |
|
1093 font-size: 20px; |
|
1094 line-height: 28px; |
|
1095 font-weight: 200; |
|
1096 margin-bottom: 1.6em; |
|
1097 } |
|
1098 |
|
1099 .uploader-inline .has-upload-message .upload-instructions { |
|
1100 font-size: 14px; |
|
1101 color: #464646; |
|
1102 font-weight: normal; |
|
1103 } |
|
1104 |
|
1105 .uploader-inline .drop-instructions { |
|
1106 display: none; |
|
1107 } |
|
1108 |
|
1109 .supports-drag-drop .uploader-inline .drop-instructions { |
|
1110 display: block; |
|
1111 } |
|
1112 |
|
1113 .uploader-inline p { |
|
1114 font-size: 12px; |
|
1115 } |
|
1116 |
|
1117 .uploader-inline .media-progress-bar { |
|
1118 display: none; |
|
1119 } |
|
1120 |
|
1121 .uploading.uploader-inline .media-progress-bar { |
|
1122 display: block; |
|
1123 } |
|
1124 |
|
1125 .uploader-inline .browser { |
|
1126 display: inline-block !important; |
|
1127 } |
|
1128 |
|
1129 /** |
|
1130 * Selection |
|
1131 */ |
|
1132 .media-selection { |
|
1133 position: absolute; |
|
1134 top: 0; |
|
1135 left: 0; |
|
1136 right: 350px; |
|
1137 height: 60px; |
|
1138 padding: 0 0 0 16px; |
|
1139 overflow: hidden; |
|
1140 white-space: nowrap; |
|
1141 } |
|
1142 |
|
1143 .media-selection .selection-info { |
|
1144 display: inline-block; |
|
1145 font-size: 12px; |
|
1146 height: 60px; |
|
1147 margin-right: 10px; |
|
1148 vertical-align: top; |
|
1149 } |
|
1150 |
|
1151 .media-selection.empty, |
|
1152 .media-selection.editing { |
|
1153 display: none; |
|
1154 } |
|
1155 |
|
1156 .media-selection.one .edit-selection { |
|
1157 display: none; |
|
1158 } |
|
1159 |
|
1160 .media-selection .count { |
|
1161 display: block; |
|
1162 padding-top: 12px; |
|
1163 font-size: 14px; |
|
1164 line-height: 20px; |
|
1165 font-weight: bold; |
|
1166 } |
|
1167 |
|
1168 .media-selection .selection-info a { |
|
1169 display: block; |
|
1170 float: left; |
|
1171 padding: 1px 8px; |
|
1172 margin: 1px 8px 1px -8px; |
|
1173 line-height: 16px; |
|
1174 text-decoration: none; |
|
1175 border-right: 1px solid #dfdfdf; |
|
1176 color: #21759B; |
|
1177 } |
|
1178 |
|
1179 .media-selection .selection-info a:hover { |
|
1180 background: #21759B; |
|
1181 color: #fff; |
|
1182 border-color: transparent; |
|
1183 } |
|
1184 |
|
1185 .media-selection .selection-info a:last-child { |
|
1186 border-right: 0; |
|
1187 margin-right: 0; |
|
1188 } |
|
1189 |
|
1190 .media-selection .selection-info .clear-selection { |
|
1191 color: red; |
|
1192 } |
|
1193 |
|
1194 .media-selection .selection-info .clear-selection:hover { |
|
1195 background: red; |
|
1196 } |
|
1197 |
|
1198 .media-selection .selection-view { |
|
1199 display: inline-block; |
|
1200 vertical-align: top; |
|
1201 } |
|
1202 |
|
1203 .media-selection .attachments { |
|
1204 display: inline-block; |
|
1205 height: 48px; |
|
1206 margin-top: 5px; |
|
1207 overflow: hidden; |
|
1208 vertical-align: top; |
|
1209 } |
|
1210 |
|
1211 .media-selection .attachment .icon { |
|
1212 width: 50%; |
|
1213 } |
|
1214 |
|
1215 .attachment.selection.selected { |
|
1216 box-shadow: none; |
|
1217 } |
|
1218 |
|
1219 .attachment.selection.details { |
|
1220 box-shadow: |
|
1221 0 0 0 1px #fff, |
|
1222 0 0 0 4px #1e8cbe; |
|
1223 } |
|
1224 |
|
1225 .media-selection .attachment.selection.details { |
|
1226 box-shadow: |
|
1227 0 0 0 1px #fff, |
|
1228 0 0 0 3px #1e8cbe; |
|
1229 } |
|
1230 |
|
1231 .media-selection:after { |
|
1232 content: ''; |
|
1233 display: block; |
|
1234 position: absolute; |
|
1235 top: 0; |
|
1236 right: 0; |
|
1237 bottom: 0; |
|
1238 width: 25px; |
|
1239 background-image: -webkit-gradient(linear, right top, left top, from( rgba( 255, 255, 255, 1 ) ), to( rgba( 255, 255, 255, 0 ) )); |
|
1240 background-image: -webkit-linear-gradient(right, rgba( 255, 255, 255, 1 ) , rgba( 255, 255, 255, 0 ) ); |
|
1241 background-image: -moz-linear-gradient(right, rgba( 255, 255, 255, 1 ) , rgba( 255, 255, 255, 0 ) ); |
|
1242 background-image: -o-linear-gradient(right, rgba( 255, 255, 255, 1 ) , rgba( 255, 255, 255, 0 ) ); |
|
1243 background-image: linear-gradient(to left, rgba( 255, 255, 255, 1 ) , rgba( 255, 255, 255, 0 ) ); |
|
1244 } |
|
1245 |
|
1246 .media-selection .attachment .filename { |
|
1247 display: none; |
|
1248 } |
|
1249 |
|
1250 /** |
|
1251 * Spinner |
|
1252 */ |
|
1253 |
|
1254 .media-frame .spinner { |
|
1255 background: url(../images/wpspin.gif) no-repeat; |
|
1256 background-size: 16px 16px; |
|
1257 display: none; |
|
1258 opacity: 0.7; |
|
1259 filter: alpha(opacity=70); |
|
1260 width: 16px; |
|
1261 height: 16px; |
|
1262 margin: 0; |
|
1263 } |
|
1264 |
|
1265 .media-sidebar .settings-save-status { |
|
1266 background: #f5f5f5; |
|
1267 float: right; |
|
1268 text-transform: none; |
|
1269 z-index: 10; |
|
1270 } |
|
1271 |
|
1272 .media-sidebar .settings-save-status .spinner { |
|
1273 margin: 0 5px 0; |
|
1274 } |
|
1275 |
|
1276 .media-sidebar .settings-save-status .saved { |
|
1277 float: right; |
|
1278 display: none; |
|
1279 } |
|
1280 |
|
1281 .media-sidebar .save-waiting .settings-save-status .spinner, |
|
1282 .media-sidebar .save-complete .settings-save-status .saved { |
|
1283 display: block; |
|
1284 } |
|
1285 |
|
1286 /** |
|
1287 * Attachment Details |
|
1288 */ |
|
1289 .attachment-details { |
|
1290 position: relative; |
|
1291 overflow: auto; |
|
1292 } |
|
1293 |
|
1294 .attachment-info { |
|
1295 overflow: hidden; |
|
1296 min-height: 60px; |
|
1297 margin-bottom: 16px; |
|
1298 line-height: 18px; |
|
1299 color: #999; |
|
1300 border-bottom: 1px solid #e5e5e5; |
|
1301 box-shadow: 0 1px 0 #fff; |
|
1302 padding-bottom: 11px; |
|
1303 } |
|
1304 |
|
1305 .attachment-info .filename { |
|
1306 font-weight: bold; |
|
1307 color: #464646; |
|
1308 word-wrap: break-word; |
|
1309 } |
|
1310 |
|
1311 .attachment-info .thumbnail { |
|
1312 position: relative; |
|
1313 float: left; |
|
1314 max-width: 120px; |
|
1315 max-height: 120px; |
|
1316 margin-top: 5px; |
|
1317 margin-right: 10px; |
|
1318 margin-bottom: 5px; |
|
1319 } |
|
1320 |
|
1321 .uploading .attachment-info .thumbnail { |
|
1322 width: 120px; |
|
1323 height: 80px; |
|
1324 box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 ); |
|
1325 } |
|
1326 |
|
1327 .uploading .attachment-info .media-progress-bar { |
|
1328 margin-top: 35px; |
|
1329 } |
|
1330 |
|
1331 .attachment-info .thumbnail:after { |
|
1332 content: ''; |
|
1333 display: block; |
|
1334 position: absolute; |
|
1335 top: 0; |
|
1336 left: 0; |
|
1337 right: 0; |
|
1338 bottom: 0; |
|
1339 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 ); |
|
1340 overflow: hidden; |
|
1341 } |
|
1342 |
|
1343 .attachment-info .thumbnail img { |
|
1344 display: block; |
|
1345 max-width: 120px; |
|
1346 max-height: 120px; |
|
1347 margin: 0 auto; |
|
1348 } |
|
1349 |
|
1350 .attachment-info .details { |
|
1351 float: left; |
|
1352 font-size: 12px; |
|
1353 max-width: 100%; |
|
1354 } |
|
1355 |
|
1356 .attachment-info .edit-attachment, |
|
1357 .attachment-info .refresh-attachment, |
|
1358 .attachment-info .delete-attachment { |
|
1359 display: block; |
|
1360 text-decoration: none; |
|
1361 white-space: nowrap; |
|
1362 } |
|
1363 |
|
1364 .attachment-info .refresh-attachment, |
|
1365 .attachment-details.needs-refresh .attachment-info .edit-attachment { |
|
1366 display: none; |
|
1367 } |
|
1368 |
|
1369 .attachment-details.needs-refresh .attachment-info .refresh-attachment, |
|
1370 .attachment-info .edit-attachment { |
|
1371 display: block; |
|
1372 } |
|
1373 |
|
1374 .attachment-info .delete-attachment { |
|
1375 color: #bc0b0b; |
|
1376 } |
|
1377 |
|
1378 .attachment-info .delete-attachment:hover { |
|
1379 color: red; |
|
1380 } |
|
1381 |
|
1382 /** |
|
1383 * Attachment Display Settings |
|
1384 */ |
|
1385 .attachment-display-settings { |
|
1386 width: 100%; |
|
1387 float: left; |
|
1388 overflow: hidden; |
|
1389 } |
|
1390 |
|
1391 .attachment-display-settings h4 { |
|
1392 margin: 1.4em 0 0.4em; |
|
1393 } |
|
1394 |
|
1395 .gallery-settings { |
|
1396 overflow: hidden; |
|
1397 } |
|
1398 |
|
1399 /** |
|
1400 * Embed from URL |
|
1401 */ |
|
1402 .embed-url { |
|
1403 display: block; |
|
1404 position: relative; |
|
1405 padding: 0 16px 7px; |
|
1406 margin: 0; |
|
1407 z-index: 250; |
|
1408 background: #fff; |
|
1409 border-bottom: 1px solid #dfdfdf; |
|
1410 box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 ); |
|
1411 font-size: 18px; |
|
1412 font-weight: 200; |
|
1413 } |
|
1414 |
|
1415 .media-frame .embed-url input { |
|
1416 font-size: 18px; |
|
1417 padding: 12px 14px; |
|
1418 width: 100%; |
|
1419 min-width: 200px; |
|
1420 box-shadow: inset 2px 2px 4px -2px rgba( 0, 0, 0, 0.1 ); |
|
1421 } |
|
1422 |
|
1423 .media-frame .embed-url .spinner { |
|
1424 position: absolute; |
|
1425 top: 16px; |
|
1426 right: 26px; |
|
1427 } |
|
1428 |
|
1429 .media-frame .embed-loading .embed-url .spinner { |
|
1430 display: block; |
|
1431 } |
|
1432 |
|
1433 .embed-link-settings, |
|
1434 .embed-image-settings { |
|
1435 position: absolute; |
|
1436 background: #f5f5f5; |
|
1437 top: 57px; |
|
1438 left: 0; |
|
1439 right: 0; |
|
1440 bottom: 0; |
|
1441 padding: 16px 16px 32px; |
|
1442 overflow: auto; |
|
1443 } |
|
1444 |
|
1445 .media-embed .thumbnail { |
|
1446 max-width: 100%; |
|
1447 max-height: 200px; |
|
1448 position: relative; |
|
1449 float: left; |
|
1450 } |
|
1451 |
|
1452 .media-embed .thumbnail img { |
|
1453 max-height: 200px; |
|
1454 display: block; |
|
1455 } |
|
1456 |
|
1457 .media-embed .thumbnail:after { |
|
1458 content: ''; |
|
1459 display: block; |
|
1460 position: absolute; |
|
1461 top: 0; |
|
1462 left: 0; |
|
1463 right: 0; |
|
1464 bottom: 0; |
|
1465 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 ); |
|
1466 overflow: hidden; |
|
1467 } |
|
1468 |
|
1469 .media-embed .setting { |
|
1470 width: 100%; |
|
1471 margin-top: 10px; |
|
1472 float: left; |
|
1473 display: block; |
|
1474 clear: both; |
|
1475 } |
|
1476 |
|
1477 .media-embed .setting span { |
|
1478 display: block; |
|
1479 width: 200px; |
|
1480 font-size: 13px; |
|
1481 line-height: 24px; |
|
1482 color: #999; |
|
1483 text-shadow: 0 1px 0 #fff; |
|
1484 } |
|
1485 |
|
1486 .media-embed .setting .button-group { |
|
1487 margin: 2px 0; |
|
1488 } |
|
1489 |
|
1490 .media-embed .setting input, |
|
1491 .media-embed .setting textarea { |
|
1492 display: block; |
|
1493 width: 100%; |
|
1494 max-width: 400px; |
|
1495 margin: 1px 0; |
|
1496 } |
|
1497 |
|
1498 /** |
|
1499 * IE7 Fixes |
|
1500 */ |
|
1501 .ie7 .media-frame .attachments-browser { |
|
1502 position: static; |
|
1503 } |
|
1504 |
|
1505 .ie7 .media-frame .embed-url input { |
|
1506 margin-top: 4px; |
|
1507 width: 90%; |
|
1508 } |
|
1509 |
|
1510 .ie7 .compat-item { |
|
1511 width: 99%; |
|
1512 } |
|
1513 |
|
1514 .ie7 .attachment-display-settings { |
|
1515 width: auto; |
|
1516 } |
|
1517 |
|
1518 .ie7 .attachment-preview, |
|
1519 .ie7 .attachment-preview .thumbnail { |
|
1520 width: 120px; |
|
1521 height: 120px; |
|
1522 } |
|
1523 |
|
1524 .ie7 .media-frame .attachment .describe { |
|
1525 width: 102px; |
|
1526 } |
|
1527 |
|
1528 .ie7 .media-sidebar .setting select { |
|
1529 max-width: 55%; |
|
1530 } |
|
1531 |
|
1532 .ie7 .media-sidebar .setting input, |
|
1533 .ie7 .media-sidebar .setting textarea { |
|
1534 width: 55%; |
|
1535 } |
|
1536 |
|
1537 .ie7 .media-sidebar .setting .link-to-custom { |
|
1538 float: left; |
|
1539 } |
|
1540 |
|
1541 @media only screen and (max-width: 960px) { |
|
1542 .media-frame-content .media-toolbar-primary .search, |
|
1543 .media-frame-content .media-toolbar-secondary .attachment-filters { |
|
1544 max-width: 120px; |
|
1545 } |
|
1546 } |
|
1547 |
|
1548 /** |
|
1549 * Responsive layout |
|
1550 */ |
|
1551 @media only screen and (max-width: 900px) { |
|
1552 .media-frame-menu { |
|
1553 width: 139px; |
|
1554 } |
|
1555 |
|
1556 .media-menu > a { |
|
1557 padding: 4px 10px; |
|
1558 } |
|
1559 |
|
1560 .media-frame-title, |
|
1561 .media-frame-router, |
|
1562 .media-frame-content, |
|
1563 .media-frame-toolbar { |
|
1564 left: 140px; |
|
1565 } |
|
1566 |
|
1567 .media-sidebar { |
|
1568 width: 159px; |
|
1569 padding: 0 10px 24px; |
|
1570 } |
|
1571 |
|
1572 .attachments-browser .attachments, |
|
1573 .attachments-browser .uploader-inline, |
|
1574 .attachments-browser .media-toolbar { |
|
1575 right: 180px; |
|
1576 } |
|
1577 |
|
1578 .media-sidebar .setting input, |
|
1579 .media-sidebar .setting textarea, |
|
1580 .media-sidebar .setting span, |
|
1581 .compat-item label span { |
|
1582 float: none; |
|
1583 } |
|
1584 |
|
1585 .media-sidebar .setting span, |
|
1586 .compat-item label span { |
|
1587 text-align: inherit; |
|
1588 display: block; |
|
1589 min-height: 16px; |
|
1590 margin: 0; |
|
1591 padding: 8px 2px 0; |
|
1592 } |
|
1593 |
|
1594 .media-sidebar .setting input, |
|
1595 .media-sidebar .setting textarea, |
|
1596 .media-sidebar .setting select { |
|
1597 width: 98%; |
|
1598 max-width: none; |
|
1599 } |
|
1600 |
|
1601 .media-sidebar .setting select.columns { |
|
1602 width: auto; |
|
1603 } |
|
1604 |
|
1605 .media-frame input, |
|
1606 .media-frame textarea, |
|
1607 .media-frame .search { |
|
1608 padding: 3px 6px; |
|
1609 } |
|
1610 |
|
1611 .media-frame-content .attachment .icon { |
|
1612 top: 40%; |
|
1613 } |
|
1614 |
|
1615 .media-selection { |
|
1616 min-width: 120px; |
|
1617 } |
|
1618 |
|
1619 .media-selection:after { |
|
1620 background: none; |
|
1621 } |
|
1622 |
|
1623 .media-selection .attachments { |
|
1624 display: none; |
|
1625 } |
|
1626 |
|
1627 .media-menu .separator { |
|
1628 margin: 12px 10px; |
|
1629 } |
|
1630 } |
|
1631 |
|
1632 @media only screen and (max-width: 800px) { |
|
1633 .media-frame-content .media-toolbar .instructions { |
|
1634 display: none; |
|
1635 } |
|
1636 } |
|
1637 |
|
1638 @media only screen and (max-width: 680px) { |
|
1639 .media-frame-content .media-toolbar .search, |
|
1640 .media-frame-content .media-toolbar .attachment-filters { |
|
1641 max-width: 85px; |
|
1642 } |
|
1643 } |
|
1644 |
|
1645 /* Use the same min-width as in the admin */ |
|
1646 @media only screen and (max-width: 600px) { |
|
1647 .media-modal { |
|
1648 width: 540px; |
|
1649 position: absolute; |
|
1650 } |
|
1651 |
|
1652 .media-modal-backdrop { |
|
1653 width: 600px; |
|
1654 position: absolute; |
|
1655 } |
|
1656 } |
|
1657 |
|
1658 /** |
|
1659 * HiDPI Displays |
|
1660 */ |
|
1661 @media print, |
|
1662 (-o-min-device-pixel-ratio: 5/4), |
|
1663 (-webkit-min-device-pixel-ratio: 1.25), |
|
1664 (min-resolution: 120dpi) { |
|
1665 .media-modal-icon { |
|
1666 background-image: url(../images/uploader-icons-2x.png); |
|
1667 background-size: 134px 15px; |
|
1668 } |
|
1669 |
|
1670 .media-frame .spinner { |
|
1671 background-image: url(../images/wpspin-2x.gif); |
|
1672 } |
|
1673 } |