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