1/*! This file is auto-generated */
2.wp-full-overlay-sidebar {
3 overflow: visible;
4}
5
6/**
7 * Hide all sidebar sections by default, only show them (via JS) once the
8 * preview loads and we know whether the sidebars are used in the template.
9 */
10
11.control-section.control-section-sidebar,
12.customize-control-sidebar_widgets label,
13.customize-control-sidebar_widgets .hide-if-js {
14 /* The link in .customize-control-sidebar_widgets .hide-if-js will fail if it ever gets used. */
15 display: none;
16}
17
18.control-section.control-section-sidebar .accordion-section-content.ui-sortable {
19 overflow: visible;
20}
21
22/* Note: widget-tops are more compact when (max-height: 700px) and (min-width: 981px). */
23.customize-control-widget_form .widget-top {
24 background: #fff;
25 transition: opacity 0.5s;
26}
27
28.customize-control .widget-action {
29 color: #787c82;
30}
31
32.customize-control .widget-top:hover .widget-action,
33.customize-control .widget-action:focus {
34 color: #1d2327;
35}
36
37.customize-control-widget_form:not(.widget-rendered) .widget-top {
38 opacity: 0.5;
39}
40
41.customize-control-widget_form .widget-control-save {
42 display: none;
43}
44
45.customize-control-widget_form .spinner {
46 visibility: hidden;
47 margin-top: 0;
48}
49
50.customize-control-widget_form.previewer-loading .spinner {
51 visibility: visible;
52}
53
54.customize-control-widget_form.widget-form-disabled .widget-content {
55 opacity: 0.7;
56 pointer-events: none;
57 -webkit-user-select: none;
58 user-select: none;
59}
60
61.customize-control-widget_form .widget {
62 margin-bottom: 0;
63}
64
65.customize-control-widget_form.wide-widget-control .widget-inside {
66 position: fixed;
67 right: 299px;
68 top: 25%;
69 border: 1px solid #dcdcde;
70 overflow: auto;
71}
72.customize-control-widget_form.wide-widget-control .widget-inside > .form {
73 padding: 20px;
74}
75
76.customize-control-widget_form.wide-widget-control .widget-top {
77 transition: background-color 0.4s;
78}
79.customize-control-widget_form.wide-widget-control.expanding .widget-top,
80.customize-control-widget_form.wide-widget-control.expanded:not(.collapsing) .widget-top {
81 background-color: #dcdcde;
82}
83
84.widget-inside {
85 padding: 1px 10px 10px;
86 border-top: none;
87 line-height: 1.23076923;
88}
89
90.customize-control-widget_form.expanded .widget-action .toggle-indicator:before {
91 content: "\f142";
92}
93
94.customize-control-widget_form.wide-widget-control .widget-action .toggle-indicator:before {
95 content: "\f141";
96}
97
98.customize-control-widget_form.wide-widget-control.expanded .widget-action .toggle-indicator:before {
99 content: "\f139";
100}
101
102.widget-title-action {
103 cursor: pointer;
104}
105
106.widget-top,
107.customize-control-widget_form .widget .customize-control-title {
108 cursor: move;
109}
110
111.control-section.accordion-section.highlighted > .accordion-section-title,
112.customize-control-widget_form.highlighted {
113 outline: none;
114 box-shadow: 0 0 2px rgba(79, 148, 212, 0.8);
115 position: relative;
116 z-index: 1;
117}
118
119#widget-customizer-control-templates {
120 display: none;
121}
122
123/**
124 * Widget reordering styles
125 */
126
127#customize-theme-controls .widget-reorder-nav {
128 display: none;
129 float: left;
130 background-color: #f6f7f7;
131}
132
133.move-widget:before {
134 content: "\f504";
135 content: "\f504" / '';
136}
137
138#customize-theme-controls .move-widget-area {
139 display: none;
140 background: #fff;
141 border: 1px solid #c3c4c7;
142 border-top: none;
143 cursor: auto;
144}
145
146#customize-theme-controls .reordering .move-widget-area.active {
147 display: block;
148}
149
150#customize-theme-controls .move-widget-area .description {
151 margin: 0;
152 padding: 15px 20px;
153 font-weight: 400;
154}
155
156#customize-theme-controls .widget-area-select {
157 margin: 0;
158 padding: 0;
159 list-style: none;
160}
161
162#customize-theme-controls .widget-area-select li {
163 position: relative;
164 margin: 0;
165 padding: 13px 42px 15px 15px;
166 color: #50575e;
167 border-top: 1px solid #c3c4c7;
168 cursor: pointer;
169 -webkit-user-select: none;
170 user-select: none;
171}
172
173#customize-theme-controls .widget-area-select li:before {
174 display: none;
175 content: "\f147";
176 content: "\f147" / '';
177 position: absolute;
178 top: 12px;
179 right: 10px;
180 font: normal 20px/1 dashicons;
181 -webkit-font-smoothing: antialiased;
182 -moz-osx-font-smoothing: grayscale;
183}
184
185#customize-theme-controls .widget-area-select li:last-child {
186 border-bottom: 1px solid #c3c4c7;
187}
188
189#customize-theme-controls .widget-area-select .selected {
190 color: #fff;
191 background: #2271b1;
192}
193
194#customize-theme-controls .widget-area-select .selected:before {
195 display: block;
196}
197
198#customize-theme-controls .move-widget-actions {
199 text-align: left;
200 padding: 12px;
201}
202
203#customize-theme-controls .reordering .widget-title-action {
204 display: none;
205}
206
207#customize-theme-controls .reordering .widget-reorder-nav {
208 display: block;
209}
210
211/* Text Widget */
212.wp-customizer div.mce-inline-toolbar-grp,
213.wp-customizer div.mce-tooltip {
214 z-index: 500100 !important;
215}
216.wp-customizer .ui-autocomplete.wplink-autocomplete {
217 z-index: 500110; /* originally 100110, but z-index of .wp-full-overlay is 500000 */
218}
219.wp-customizer #wp-link-backdrop {
220 z-index: 500100; /* originally 100100, but z-index of .wp-full-overlay is 500000 */
221}
222.wp-customizer #wp-link-wrap {
223 z-index: 500105; /* originally 100105, but z-index of .wp-full-overlay is 500000 */
224}
225
226/**
227 * Styles for new widget addition panel
228 */
229
230/* override widgets admin page rules in wp-admin/css/widgets.css */
231#widgets-left #available-widgets .widget {
232 float: none !important;
233 width: auto !important;
234}
235
236/* Keep rule that is no longer necessary on widgets.php. */
237#available-widgets .widget-action {
238 display: none;
239}
240
241.ios #available-widgets {
242 transition: right 0s;
243}
244
245#available-widgets .widget-tpl:hover,
246#available-widgets .widget-tpl.selected {
247 background: #f6f7f7;
248 border-bottom-color: #c3c4c7;
249 color: #2271b1;
250 border-right: 4px solid #2271b1;
251}
252
253#customize-controls .widget-title h3 {
254 font-size: 1em;
255}
256
257#available-widgets .widget-title h3 {
258 padding: 0 0 5px;
259 font-size: 14px;
260}
261
262#available-widgets .widget .widget-description {
263 padding: 0;
264 color: #646970;
265}
266
267@media (prefers-reduced-motion: no-preference) {
268 #customize-preview {
269 transition: all 0.2s;
270 }
271}
272
273body.adding-widget #available-widgets {
274 right: 0;
275 visibility: visible;
276}
277
278body.adding-widget .wp-full-overlay-main {
279 right: 300px;
280}
281
282body.adding-widget #customize-preview {
283 opacity: 0.4;
284}
285
286
287/**
288 * Widget Icon styling
289 * No plurals in naming.
290 * Ordered from lowest to highest specificity.
291 */
292
293#available-widgets .widget-title {
294 position: relative;
295}
296
297#available-widgets .widget-title:before {
298 content: "\f132";
299 content: "\f132" / '';
300 position: absolute;
301 top: -3px;
302 left: 100%;
303 margin-left: 20px;
304 width: 20px;
305 height: 20px;
306 color: #2c3338;
307 font: normal 20px/1 dashicons;
308 text-align: center;
309 box-sizing: border-box;
310 -webkit-font-smoothing: antialiased;
311 -moz-osx-font-smoothing: grayscale;
312}
313
314/* dashicons-smiley */
315#available-widgets [class*="easy"] .widget-title:before {
316 content: "\f328";
317 content: "\f328" / '';
318 top: -4px;
319}
320
321/* dashicons-star-filled */
322#available-widgets [class*="super"] .widget-title:before,
323#available-widgets [class*="like"] .widget-title:before {
324 content: "\f155";
325 content: "\f155" / '';
326 top: -4px;
327}
328
329/* dashicons-wordpress */
330#available-widgets [class*="meta"] .widget-title:before {
331 content: "\f120";
332 content: "\f120" / '';
333}
334
335/* dashicons-archive */
336#available-widgets [class*="archives"] .widget-title:before {
337 content: "\f480";
338 content: "\f480" / '';
339 top: -4px;
340}
341
342/* dashicons-category */
343#available-widgets [class*="categor"] .widget-title:before {
344 content: "\f318";
345 content: "\f318" / '';
346 top: -4px;
347}
348
349/* dashicons-admin-comments */
350#available-widgets [class*="comment"] .widget-title:before,
351#available-widgets [class*="testimonial"] .widget-title:before,
352#available-widgets [class*="chat"] .widget-title:before {
353 content: "\f101";
354 content: "\f101" / '';
355}
356
357/* dashicons-admin-post */
358#available-widgets [class*="post"] .widget-title:before {
359 content: "\f109";
360 content: "\f109" / '';
361}
362
363/* dashicons-admin-page */
364#available-widgets [class*="page"] .widget-title:before {
365 content: "\f105";
366 content: "\f105" / '';
367}
368
369/* dashicons-text */
370#available-widgets [class*="text"] .widget-title:before {
371 content: "\f478";
372 content: "\f478" / '';
373}
374
375/* dashicons-admin-links */
376#available-widgets [class*="link"] .widget-title:before {
377 content: "\f103";
378 content: "\f103" / '';
379}
380
381/* dashicons-search */
382#available-widgets [class*="search"] .widget-title:before {
383 content: "\f179";
384 content: "\f179" / '';
385}
386
387/* dashicons-menu */
388#available-widgets [class*="menu"] .widget-title:before,
389#available-widgets [class*="nav"] .widget-title:before {
390 content: "\f333";
391 content: "\f333" / '';
392}
393
394/* dashicons-tagcloud */
395#available-widgets [class*="tag"] .widget-title:before {
396 content: "\f479";
397 content: "\f479" / '';
398}
399
400/* dashicons-rss */
401#available-widgets [class*="rss"] .widget-title:before {
402 content: "\f303";
403 content: "\f303" / '';
404 top: -6px;
405}
406
407/* dashicons-calendar */
408#available-widgets [class*="event"] .widget-title:before,
409#available-widgets [class*="calendar"] .widget-title:before {
410 content: "\f145";
411 content: "\f145" / '';
412 top: -4px;
413}
414
415/* dashicons-format-image */
416#available-widgets [class*="image"] .widget-title:before,
417#available-widgets [class*="photo"] .widget-title:before,
418#available-widgets [class*="slide"] .widget-title:before,
419#available-widgets [class*="instagram"] .widget-title:before {
420 content: "\f128";
421 content: "\f128" / '';
422}
423
424/* dashicons-format-gallery */
425#available-widgets [class*="album"] .widget-title:before,
426#available-widgets [class*="galler"] .widget-title:before {
427 content: "\f161";
428 content: "\f161" / '';
429}
430
431/* dashicons-format-video */
432#available-widgets [class*="video"] .widget-title:before,
433#available-widgets [class*="tube"] .widget-title:before {
434 content: "\f126";
435 content: "\f126" / '';
436}
437
438/* dashicons-format-audio */
439#available-widgets [class*="music"] .widget-title:before,
440#available-widgets [class*="radio"] .widget-title:before,
441#available-widgets [class*="audio"] .widget-title:before {
442 content: "\f127";
443 content: "\f127" / '';
444}
445
446/* dashicons-admin-users */
447#available-widgets [class*="login"] .widget-title:before,
448#available-widgets [class*="user"] .widget-title:before,
449#available-widgets [class*="member"] .widget-title:before,
450#available-widgets [class*="avatar"] .widget-title:before,
451#available-widgets [class*="subscriber"] .widget-title:before,
452#available-widgets [class*="profile"] .widget-title:before,
453#available-widgets [class*="grofile"] .widget-title:before {
454 content: "\f110";
455 content: "\f110" / '';
456}
457
458/* dashicons-cart */
459#available-widgets [class*="commerce"] .widget-title:before,
460#available-widgets [class*="shop"] .widget-title:before,
461#available-widgets [class*="cart"] .widget-title:before {
462 content: "\f174";
463 content: "\f174" / '';
464 top: -4px;
465}
466
467/* dashicons-shield */
468#available-widgets [class*="secur"] .widget-title:before,
469#available-widgets [class*="firewall"] .widget-title:before {
470 content: "\f332";
471 content: "\f332" / '';
472}
473
474/* dashicons-chart-bar */
475#available-widgets [class*="analytic"] .widget-title:before,
476#available-widgets [class*="stat"] .widget-title:before,
477#available-widgets [class*="poll"] .widget-title:before {
478 content: "\f185";
479 content: "\f185" / '';
480}
481
482/* dashicons-feedback */
483#available-widgets [class*="form"] .widget-title:before {
484 content: "\f175";
485 content: "\f175" / '';
486}
487
488/* dashicons-email-alt */
489#available-widgets [class*="subscribe"] .widget-title:before,
490#available-widgets [class*="news"] .widget-title:before,
491#available-widgets [class*="contact"] .widget-title:before,
492#available-widgets [class*="mail"] .widget-title:before {
493 content: "\f466";
494 content: "\f466" / '';
495}
496
497/* dashicons-share */
498#available-widgets [class*="share"] .widget-title:before,
499#available-widgets [class*="socia"] .widget-title:before {
500 content: "\f237";
501 content: "\f237" / '';
502}
503
504/* dashicons-translation */
505#available-widgets [class*="lang"] .widget-title:before,
506#available-widgets [class*="translat"] .widget-title:before {
507 content: "\f326";
508 content: "\f326" / '';
509}
510
511/* dashicons-location-alt */
512#available-widgets [class*="locat"] .widget-title:before,
513#available-widgets [class*="map"] .widget-title:before {
514 content: "\f231";
515 content: "\f231" / '';
516}
517
518/* dashicons-download */
519#available-widgets [class*="download"] .widget-title:before {
520 content: "\f316";
521 content: "\f316" / '';
522}
523
524/* dashicons-cloud */
525#available-widgets [class*="weather"] .widget-title:before {
526 content: "\f176";
527 content: "\f176" / '';
528 top: -4px;
529}
530
531/* dashicons-facebook */
532#available-widgets [class*="facebook"] .widget-title:before {
533 content: "\f304";
534 content: "\f304" / '';
535}
536
537/* dashicons-twitter */
538#available-widgets [class*="tweet"] .widget-title:before,
539#available-widgets [class*="twitter"] .widget-title:before {
540 content: "\f301";
541 content: "\f301" / '';
542}
543
544@media screen and (max-height: 700px) and (min-width: 981px) {
545 /* Compact widget-tops on smaller laptops, but not tablets. See ticket #27112#comment:4 */
546 .customize-control-widget_form {
547 margin-bottom: 0;
548 }
549
550 .widget-top {
551 box-shadow: none;
552 margin-top: -1px;
553 }
554
555 .widget-top:hover {
556 position: relative;
557 z-index: 1;
558 }
559
560 .last-widget {
561 margin-bottom: 15px;
562 }
563
564 .widget-title h3 {
565 padding: 13px 15px;
566 }
567
568 .widget-top .widget-action {
569 padding: 8px 10px;
570 }
571
572 .widget-reorder-nav span {
573 height: 39px;
574 }
575
576 .widget-reorder-nav span:before {
577 line-height: 39px;
578 }
579
580 /* Compact the move widget areas. */
581 #customize-theme-controls .widget-area-select li {
582 padding: 9px 42px 11px 15px;
583 }
584
585 #customize-theme-controls .widget-area-select li:before {
586 top: 8px;
587 }
588}
589