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