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