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