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