1
.wp-full-overlay-sidebar {
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.
10
.control-section[id^="accordion-section-sidebar-widgets-"],
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. */
17
.customize-control-widget_form .widget-top {
18
-webkit-transition: opacity 0.5s;
19
transition: opacity 0.5s;
22
.customize-control-widget_form:not(.widget-rendered) .widget-top {
26
.customize-control-widget_form .widget-control-save,
27
.customize-control-widget_form .spinner {
31
.customize-control-widget_form.previewer-loading .spinner {
35
.customize-control-widget_form.widget-form-disabled .widget-content {
38
-moz-user-select: none;
39
-webkit-user-select: none;
40
-ms-user-select: none;
44
.customize-control-widget_form .widget {
48
.customize-control-widget_form.wide-widget-control .widget-inside {
52
border: 1px solid rgb(229, 229, 229);
55
.customize-control-widget_form.wide-widget-control .widget-inside > .form {
59
.customize-control-widget_form.wide-widget-control .widget-top {
60
-webkit-transition: background-color 0.4s;
61
transition: background-color 0.4s;
63
.customize-control-widget_form.wide-widget-control.expanding .widget-top,
64
.customize-control-widget_form.wide-widget-control.expanded:not(.collapsing) .widget-top {
65
background-color: rgb(227, 227, 227);
69
padding: 1px 10px 10px 10px;
78
.customize-control-widget_form.expanded a.widget-action:after {
82
.customize-control-widget_form.wide-widget-control a.widget-action:after {
86
.customize-control-widget_form.wide-widget-control.expanded a.widget-action:after {
90
.widget-title-action {
94
.customize-control-widget_form .widget .customize-control-title {
98
.control-section.accordion-section.highlighted > .accordion-section-title,
99
.customize-control-widget_form.highlighted {
101
-webkit-box-shadow: 0 0 2px rgba(30,140,190,0.8);
102
box-shadow: 0 0 2px rgba(30,140,190,0.8);
107
#widget-customizer-control-templates {
112
* Widget reordering styles
118
text-decoration: none;
121
-webkit-user-select: none;
122
-moz-user-select: none;
123
-ms-user-select: none;
126
.reorder-toggle:focus {
131
.reordering .reorder {
135
.reordering .reorder-done {
140
#customize-theme-controls .reordering .add-new-widget {
142
pointer-events: none;
146
#customize-theme-controls .widget-reorder-nav {
149
background-color: #fafafa;
152
.widget-reorder-nav span {
157
width: 33px; /* was 42px for mobile */
160
text-indent: -9999px;
165
.widget-reorder-nav span:before {
166
display: inline-block;
172
font: normal 20px/43px 'dashicons';
175
-webkit-font-smoothing: antialiased;
176
-moz-osx-font-smoothing: grayscale;
179
.widget-reorder-nav span:hover,
180
.widget-reorder-nav span:focus {
185
.move-widget:before {
189
.move-widget-down:before {
193
.move-widget-up:before {
197
#customize-theme-controls .first-widget .move-widget-up,
198
#customize-theme-controls .last-widget .move-widget-down {
203
#customize-theme-controls .move-widget-area {
206
border: 1px solid #dedede;
211
#customize-theme-controls .reordering .move-widget-area.active {
215
#customize-theme-controls .move-widget-area .description {
221
#customize-theme-controls .widget-area-select {
227
#customize-theme-controls .widget-area-select li {
230
padding: 13px 42px 15px 15px;
232
border-top: 1px solid #eee;
234
-webkit-user-select: none;
235
-moz-user-select: none;
236
-ms-user-select: none;
240
#customize-theme-controls .widget-area-select li:before {
246
font: normal 20px/1 'dashicons';
247
-webkit-font-smoothing: antialiased;
248
-moz-osx-font-smoothing: grayscale;
251
#customize-theme-controls .widget-area-select li:last-child {
252
border-bottom: 1px solid #eee;
255
#customize-theme-controls .widget-area-select .selected {
257
text-shadow: 0 -1px 0 rgba(0,0,0,.4);
261
#customize-theme-controls .widget-area-select .selected:before {
265
#customize-theme-controls .move-widget-actions {
270
#customize-theme-controls .reordering .widget-title-action {
274
#customize-theme-controls .reordering .widget-reorder-nav {
280
* Styles for new widget addition panel
282
.wp-full-overlay-main {
283
left: auto; /* this overrides a right: 0; which causes the preview to resize, I'd rather have it go off screen at the normal size. */
287
#customize-theme-controls .add-new-widget {
291
-webkit-transition: all 0.2s;
292
transition: all 0.2s;
293
-webkit-user-select: none;
294
-moz-user-select: none;
295
-ms-user-select: none;
300
.add-new-widget:before {
302
display: inline-block;
306
font: normal 20px/1 'dashicons';
307
vertical-align: middle;
308
-webkit-transition: all 0.2s;
309
transition: all 0.2s;
310
-webkit-font-smoothing: antialiased;
311
-moz-osx-font-smoothing: grayscale;
314
body.adding-widget .add-new-widget,
315
body.adding-widget .add-new-widget:hover {
319
-webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
320
box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
322
body.adding-widget .add-new-widget:before {
323
-webkit-transform: rotate(45deg);
324
-ms-transform: rotate(45deg);
325
transform: rotate(45deg);
328
#available-widgets .widget {
332
/* override widgets admin page rules in wp-admin/css/wp-admin.css */
333
#widgets-left #available-widgets .widget {
334
float: none !important;
335
width: auto !important;
348
-webkit-transition: all 0.2s;
349
transition: all 0.2s;
350
border-left: 1px solid #dddddd;
353
#available-widgets-filter {
354
padding: 8px 13px 7px 17px;
355
border-bottom: 1px solid #e4e4e4;
356
-webkit-box-sizing: border-box;
357
-moz-box-sizing: border-box;
358
box-sizing: border-box;
361
#available-widgets-filter input {
362
padding: 5px 10px 2px 10px;
366
#available-widgets .widget-tpl {
368
padding: 20px 60px 20px 15px;
369
border-bottom: 1px solid #e4e4e4;
374
#available-widgets .widget-tpl:hover,
375
#available-widgets .widget-tpl.selected {
379
#available-widgets .widget-top,
380
#available-widgets .widget-top:hover {
382
background: transparent;
383
-webkit-box-shadow: none;
387
#available-widgets .widget-title h4 {
392
#available-widgets .widget .widget-description {
398
-webkit-transition: all 0.2s;
399
transition: all 0.2s;
402
body.adding-widget #available-widgets {
406
body.adding-widget .wp-full-overlay-main {
410
body.adding-widget #customize-preview {
416
* Widget Icon styling
417
* No plurals in naming.
418
* Ordered from lowest to highest specificity.
420
#available-widgets .widget-title {
424
#available-widgets .widget-title:before {
433
font: normal 20px/1 'dashicons';
435
-webkit-box-sizing: border-box;
436
-moz-box-sizing: border-box;
437
box-sizing: border-box;
438
-webkit-font-smoothing: antialiased;
439
-moz-osx-font-smoothing: grayscale;
443
#available-widgets [class*="easy"] .widget-title:before { content: "\f328"; top: -4px; }
446
#available-widgets [class*="super"] .widget-title:before,
447
#available-widgets [class*="like"] .widget-title:before { content: "\f155"; top: -4px; }
450
#available-widgets [class*="meta"] .widget-title:before { content: "\f120"; }
453
#available-widgets [class*="archives"] .widget-title:before { content: "\f480"; top: -4px; }
456
#available-widgets [class*="categor"] .widget-title:before { content: "\f318"; top: -4px; }
459
#available-widgets [class*="comment"] .widget-title:before,
460
#available-widgets [class*="testimonial"] .widget-title:before,
461
#available-widgets [class*="chat"] .widget-title:before { content: "\f101"; }
464
#available-widgets [class*="post"] .widget-title:before { content: "\f109"; }
467
#available-widgets [class*="page"] .widget-title:before { content: "\f105"; }
470
#available-widgets [class*="text"] .widget-title:before { content: "\f478"; }
473
#available-widgets [class*="link"] .widget-title:before { content: "\f103"; }
476
#available-widgets [class*="search"] .widget-title:before { content: "\f179"; }
479
#available-widgets [class*="menu"] .widget-title:before,
480
#available-widgets [class*="nav"] .widget-title:before { content: "\f333"; }
483
#available-widgets [class*="tag"] .widget-title:before { content: "\f479"; }
486
#available-widgets [class*="rss"] .widget-title:before { content: "\f303"; top: -6px; }
489
#available-widgets [class*="event"] .widget-title:before,
490
#available-widgets [class*="calendar"] .widget-title:before { content: "\f145"; top: -4px;}
493
#available-widgets [class*="image"] .widget-title:before,
494
#available-widgets [class*="photo"] .widget-title:before,
495
#available-widgets [class*="slide"] .widget-title:before,
496
#available-widgets [class*="instagram"] .widget-title:before { content: "\f128"; }
499
#available-widgets [class*="album"] .widget-title:before,
500
#available-widgets [class*="galler"] .widget-title:before { content: "\f161"; }
503
#available-widgets [class*="video"] .widget-title:before,
504
#available-widgets [class*="tube"] .widget-title:before { content: "\f126"; }
507
#available-widgets [class*="music"] .widget-title:before,
508
#available-widgets [class*="radio"] .widget-title:before,
509
#available-widgets [class*="audio"] .widget-title:before { content: "\f127"; }
512
#available-widgets [class*="login"] .widget-title:before,
513
#available-widgets [class*="user"] .widget-title:before,
514
#available-widgets [class*="member"] .widget-title:before,
515
#available-widgets [class*="avatar"] .widget-title:before,
516
#available-widgets [class*="subscriber"] .widget-title:before,
517
#available-widgets [class*="profile"] .widget-title:before,
518
#available-widgets [class*="grofile"] .widget-title:before { content: "\f110"; }
521
#available-widgets [class*="commerce"] .widget-title:before,
522
#available-widgets [class*="shop"] .widget-title:before,
523
#available-widgets [class*="cart"] .widget-title:before { content: "\f174"; top: -4px; }
526
#available-widgets [class*="secur"] .widget-title:before,
527
#available-widgets [class*="firewall"] .widget-title:before { content: "\f332"; }
530
#available-widgets [class*="analytic"] .widget-title:before,
531
#available-widgets [class*="stat"] .widget-title:before,
532
#available-widgets [class*="poll"] .widget-title:before { content: "\f185"; }
535
#available-widgets [class*="form"] .widget-title:before { content: "\f175"; }
538
#available-widgets [class*="subscribe"] .widget-title:before,
539
#available-widgets [class*="news"] .widget-title:before,
540
#available-widgets [class*="contact"] .widget-title:before,
541
#available-widgets [class*="mail"] .widget-title:before { content: "\f466"; }
544
#available-widgets [class*="share"] .widget-title:before,
545
#available-widgets [class*="socia"] .widget-title:before { content: "\f237"; }
548
#available-widgets [class*="lang"] .widget-title:before,
549
#available-widgets [class*="translat"] .widget-title:before { content: "\f326"; }
552
#available-widgets [class*="locat"] .widget-title:before,
553
#available-widgets [class*="map"] .widget-title:before { content: "\f231"; }
556
#available-widgets [class*="download"] .widget-title:before { content: "\f316"; }
559
#available-widgets [class*="weather"] .widget-title:before { content: "\f176"; top: -4px;}
562
#available-widgets [class*="facebook"] .widget-title:before { content: "\f304"; }
565
#available-widgets [class*="tweet"] .widget-title:before,
566
#available-widgets [class*="twitter"] .widget-title:before { content: "\f301"; }
569
@media screen and (max-height: 700px) and (min-width: 981px) {
574
-webkit-box-shadow: none;
588
.widget-top a.widget-action:after {
591
.widget-reorder-nav span {
594
.widget-reorder-nav span:before {
597
#customize-theme-controls .widget-area-select li {
598
padding: 9px 42px 11px 15px;
600
#customize-theme-controls .widget-area-select li:before {