wp-admin/css/customize-widgets.css

   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 .customize-control-widget_form .widget-top {
  22         -webkit-transition: opacity 0.5s;
  23         transition: opacity 0.5s;
  24 }
  25
  26 .customize-control-widget_form:not(.widget-rendered) .widget-top {
  27         opacity: 0.5;
  28 }
  29
  30 .customize-control-widget_form .widget-control-save {
  31         display: none;
  32 }
  33
  34 .customize-control-widget_form .spinner {
  35         visibility: hidden;
  36         margin-top: 0;
  37 }
  38
  39 .customize-control-widget_form.previewer-loading .spinner {
  40         visibility: visible;
  41 }
  42
  43 .customize-control-widget_form.widget-form-disabled .widget-content {
  44         opacity: 0.7;
  45         pointer-events: none;
  46         -moz-user-select: none;
  47         -webkit-user-select: none;
  48         -ms-user-select: none;
  49         user-select: none;
  50 }
  51
  52 .customize-control-widget_form .widget {
  53         margin-bottom: 0;
  54 }
  55
  56 .customize-control-widget_form.wide-widget-control .widget-inside {
  57         position: fixed;
  58         left: 299px;
  59         top: 25%;
  60         border: 1px solid rgb(229, 229, 229);
  61         overflow: auto;
  62 }
  63 .customize-control-widget_form.wide-widget-control .widget-inside > .form {
  64         padding: 20px;
  65 }
  66
  67 .customize-control-widget_form.wide-widget-control .widget-top {
  68         -webkit-transition: background-color 0.4s;
  69         transition: background-color 0.4s;
  70 }
  71 .customize-control-widget_form.wide-widget-control.expanding .widget-top,
  72 .customize-control-widget_form.wide-widget-control.expanded:not(.collapsing) .widget-top {
  73         background-color: rgb(227, 227, 227);
  74 }
  75
  76 .widget-inside {
  77         padding: 1px 10px 10px 10px;
  78         border-top: none;
  79         line-height: 16px;
  80 }
  81
  82 .widget-top {
  83         cursor: move;
  84 }
  85
  86 .customize-control-widget_form.expanded a.widget-action:after {
  87         content: "\f142";
  88 }
  89
  90 .customize-control-widget_form.wide-widget-control a.widget-action:after {
  91         content: "\f139";
  92 }
  93
  94 .customize-control-widget_form.wide-widget-control.expanded a.widget-action:after {
  95         content: "\f141";
  96 }
  97
  98 .widget-title-action {
  99         cursor: pointer;
 100 }
 101
 102 .customize-control-widget_form .widget .customize-control-title {
 103         cursor: move;
 104 }
 105
 106 .control-section.accordion-section.highlighted > .accordion-section-title,
 107 .customize-control-widget_form.highlighted {
 108         outline: none;
 109         -webkit-box-shadow: 0 0 2px rgba(30,140,190,0.8);
 110         box-shadow: 0 0 2px rgba(30,140,190,0.8);
 111         position: relative;
 112         z-index: 1;
 113 }
 114
 115 #widget-customizer-control-templates {
 116         display: none;
 117 }
 118
 119 /**
 120 * Widget reordering styles
 121 **/
 122
 123 .reorder-toggle {
 124         float: right;
 125         padding: 5px 8px;
 126         text-decoration: none;
 127         cursor: pointer;
 128         outline: none;
 129         -webkit-user-select: none;
 130         -moz-user-select: none;
 131         -ms-user-select: none;
 132         user-select: none;
 133 }
 134 .reorder-toggle:focus {
 135         outline: 1px dotted;
 136 }
 137
 138 .reorder-done,
 139 .reordering .reorder {
 140         display: none;
 141 }
 142
 143 .reordering .reorder-done {
 144         display: block;
 145         color: #0073aa;
 146 }
 147
 148 .reordering .reorder-done:hover,
 149 .reordering .reorder-done:active {
 150         color: #00a0d2;
 151 }
 152
 153 #customize-theme-controls .reordering .add-new-widget {
 154         opacity: 0.2;
 155         pointer-events: none;
 156         cursor: not-allowed;
 157 }
 158
 159 #customize-theme-controls .widget-reorder-nav {
 160         display: none;
 161         float: right;
 162         background-color: #fafafa;
 163 }
 164
 165 .widget-reorder-nav span {
 166         position: relative;
 167         overflow: hidden;
 168         float: left;
 169         display: block;
 170         width: 33px; /* was 42px for mobile */
 171         height: 43px;
 172         color: #82878c;
 173         text-indent: -9999px;
 174         cursor: pointer;
 175         outline: none;
 176 }
 177
 178 .widget-reorder-nav span:before {
 179         display: inline-block;
 180         position: absolute;
 181         top: 0;
 182         right: 0;
 183         width: 100%;
 184         height: 100%;
 185         font: normal 20px/43px 'dashicons';
 186         text-align: center;
 187         text-indent: 0;
 188         -webkit-font-smoothing: antialiased;
 189         -moz-osx-font-smoothing: grayscale;
 190 }
 191
 192 .widget-reorder-nav span:hover,
 193 .widget-reorder-nav span:focus {
 194         color: #444;
 195         background: #eee;
 196 }
 197
 198 .move-widget:before {
 199         content: '\f504';
 200 }
 201
 202 .move-widget-down:before {
 203         content: '\f347';
 204 }
 205
 206 .move-widget-up:before {
 207         content: '\f343';
 208 }
 209
 210 #customize-theme-controls .first-widget .move-widget-up,
 211 #customize-theme-controls .last-widget .move-widget-down {
 212         color: #d5d5d5;
 213         cursor: default;
 214 }
 215
 216 #customize-theme-controls  .move-widget-area {
 217         display: none;
 218         background: #fff;
 219         border: 1px solid #dedede;
 220         border-top: none;
 221         cursor: auto;
 222 }
 223
 224 #customize-theme-controls .reordering .move-widget-area.active {
 225         display: block;
 226 }
 227
 228 #customize-theme-controls .move-widget-area .description {
 229         margin: 0;
 230         padding: 15px 20px;
 231         font-weight: 400;
 232 }
 233
 234 #customize-theme-controls .widget-area-select {
 235         margin: 0;
 236         padding: 0;
 237         list-style: none;
 238 }
 239
 240 #customize-theme-controls .widget-area-select li {
 241         position: relative;
 242         margin: 0;
 243         padding: 13px 15px 15px 42px;
 244         color: #555;
 245         border-top: 1px solid #eee;
 246         cursor: pointer;
 247         -webkit-user-select: none;
 248         -moz-user-select: none;
 249         -ms-user-select: none;
 250         user-select: none;
 251 }
 252
 253 #customize-theme-controls .widget-area-select li:before {
 254         display: none;
 255         content: '\f147';
 256         position: absolute;
 257         top: 12px;
 258         left: 10px;
 259         font: normal 20px/1 'dashicons';
 260         -webkit-font-smoothing: antialiased;
 261         -moz-osx-font-smoothing: grayscale;
 262 }
 263
 264 #customize-theme-controls .widget-area-select li:last-child {
 265         border-bottom: 1px solid #eee;
 266 }
 267
 268 #customize-theme-controls .widget-area-select .selected {
 269         color: #fff;
 270         text-shadow: 0 -1px 0 rgba(0,0,0,.4);
 271         background: #00a0d2;
 272 }
 273
 274 #customize-theme-controls .widget-area-select .selected:before {
 275         display: block;
 276 }
 277
 278 #customize-theme-controls .move-widget-actions {
 279         text-align: right;
 280         padding: 12px;
 281 }
 282
 283 #customize-theme-controls .reordering .widget-title-action {
 284         display: none;
 285 }
 286
 287 #customize-theme-controls .reordering .widget-reorder-nav {
 288         display: block;
 289 }
 290
 291
 292 /**
 293  * Styles for new widget addition panel
 294  */
 295 .wp-full-overlay-main {
 296         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. */
 297         width: 100%;
 298 }
 299
 300 #customize-theme-controls .add-new-widget {
 301         cursor: pointer;
 302         float: right;
 303         margin-left: 10px;
 304         -webkit-transition: all 0.2s;
 305         transition: all 0.2s;
 306         -webkit-user-select: none;
 307         -moz-user-select: none;
 308         -ms-user-select: none;
 309         user-select: none;
 310         outline: none;
 311 }
 312
 313 .add-new-widget:before {
 314         content: "\f132";
 315         display: inline-block;
 316         position: relative;
 317         left: -2px;
 318         top: -1px;
 319         font: normal 20px/1 'dashicons';
 320         vertical-align: middle;
 321         -webkit-transition: all 0.2s;
 322         transition: all 0.2s;
 323         -webkit-font-smoothing: antialiased;
 324         -moz-osx-font-smoothing: grayscale;
 325 }
 326
 327 body.adding-widget .add-new-widget,
 328 body.adding-widget .add-new-widget:hover {
 329         background: #eee;
 330         border-color: #999;
 331         color: #32373c;
 332         -webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
 333         box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
 334 }
 335 body.adding-widget .add-new-widget:before {
 336         -webkit-transform: rotate(45deg);
 337         -ms-transform: rotate(45deg);
 338         transform: rotate(45deg);
 339 }
 340
 341 #available-widgets .widget {
 342         position: static;
 343 }
 344
 345 /* override widgets admin page rules in wp-admin/css/wp-admin.css */
 346 #widgets-left #available-widgets .widget {
 347         float: none !important;
 348         width: auto !important;
 349 }
 350
 351 #available-widgets {
 352         position: absolute;
 353         top: 0;
 354         bottom: 0;
 355         left: -301px;
 356         visibility: hidden;
 357         overflow: auto;
 358         width: 300px;
 359         margin: 0;
 360         z-index: 1;
 361         background: #eee !important;
 362         -webkit-transition: left .18s;
 363         transition: left .18s;
 364         border-right: 1px solid #ddd;
 365 }
 366
 367 .ios #available-widgets {
 368         -webkit-transition: left 0s;
 369         transition: left 0s;
 370 }
 371
 372 #available-widgets-list {
 373         top: 46px;
 374         position: absolute;
 375         overflow: auto;
 376         bottom: 0;
 377         width: 100%;
 378 }
 379
 380 #available-widgets-filter {
 381         position: fixed;
 382         top: 0;
 383         z-index: 1;
 384         width: 300px;
 385         height: 46px;
 386         padding: 8px 17px 7px 13px;
 387         background: #eee;
 388         border-bottom: 1px solid #e4e4e4;
 389         -webkit-box-sizing: border-box;
 390         -moz-box-sizing: border-box;
 391         box-sizing: border-box;
 392 }
 393
 394 #available-widgets-filter input {
 395         padding: 5px 10px 2px 10px;
 396         width: 100%;
 397 }
 398
 399 #available-widgets .widget-tpl {
 400         position: relative;
 401         padding: 20px 15px 20px 60px;
 402         background: #fff;
 403         border-bottom: 1px solid #e4e4e4;
 404         cursor: pointer;
 405         display: none;
 406 }
 407
 408 #available-widgets .widget-tpl:hover,
 409 #available-widgets .widget-tpl.selected {
 410         background: #eee;
 411         border-bottom-color: #ccc;
 412 }
 413
 414 #available-widgets .widget-top,
 415 #available-widgets .widget-top:hover {
 416         border: none;
 417         background: transparent;
 418         -webkit-box-shadow: none;
 419         box-shadow: none;
 420 }
 421
 422 #available-widgets .widget-title h4 {
 423         padding: 0 0 5px;
 424         font-size: 14px;
 425 }
 426
 427 #available-widgets .widget .widget-description {
 428         padding: 0;
 429         color: #777;
 430 }
 431
 432 #customize-preview {
 433         -webkit-transition: all 0.2s;
 434         transition: all 0.2s;
 435 }
 436
 437 body.adding-widget #available-widgets {
 438         left: 0;
 439         visibility: visible;
 440 }
 441
 442 body.adding-widget .wp-full-overlay-main {
 443         left: 300px;
 444 }
 445
 446 body.adding-widget #customize-preview {
 447         opacity: 0.4;
 448 }
 449
 450
 451 /**
 452  * Widget Icon styling
 453  * No plurals in naming.
 454  * Ordered from lowest to highest specificity.
 455  **/
 456 #available-widgets .widget-title {
 457         position: relative;
 458 }
 459
 460 #available-widgets .widget-title:before {
 461         content: "\f132";
 462         position: absolute;
 463         top: -3px;
 464         right: 100%;
 465         margin-right: 20px;
 466         width: 20px;
 467         height: 20px;
 468         color: #32373c;
 469         font: normal 20px/1 'dashicons';
 470         text-align: center;
 471         -webkit-box-sizing: border-box;
 472         -moz-box-sizing: border-box;
 473         box-sizing: border-box;
 474         -webkit-font-smoothing: antialiased;
 475         -moz-osx-font-smoothing: grayscale;
 476 }
 477
 478 /* smiley */
 479 #available-widgets [class*="easy"] .widget-title:before { content: "\f328"; top: -4px; }
 480
 481 /* star-filled */
 482 #available-widgets [class*="super"] .widget-title:before,
 483 #available-widgets [class*="like"] .widget-title:before { content: "\f155"; top: -4px; }
 484
 485 /* wordpress */
 486 #available-widgets [class*="meta"] .widget-title:before { content: "\f120"; }
 487
 488 /* archive-box */
 489 #available-widgets [class*="archives"] .widget-title:before { content: "\f480"; top: -4px; }
 490
 491 /* category */
 492 #available-widgets [class*="categor"] .widget-title:before { content: "\f318"; top: -4px; }
 493
 494 /* comments */
 495 #available-widgets [class*="comment"] .widget-title:before,
 496 #available-widgets [class*="testimonial"] .widget-title:before,
 497 #available-widgets [class*="chat"] .widget-title:before { content: "\f101"; }
 498
 499 /* post */
 500 #available-widgets [class*="post"] .widget-title:before { content: "\f109"; }
 501
 502 /* admin-page */
 503 #available-widgets [class*="page"] .widget-title:before { content: "\f105"; }
 504
 505 /* text */
 506 #available-widgets [class*="text"] .widget-title:before { content: "\f478"; }
 507
 508 /* links */
 509 #available-widgets [class*="link"] .widget-title:before { content: "\f103"; }
 510
 511 /* search */
 512 #available-widgets [class*="search"] .widget-title:before { content: "\f179"; }
 513
 514 /* menu */
 515 #available-widgets [class*="menu"] .widget-title:before,
 516 #available-widgets [class*="nav"] .widget-title:before { content: "\f333"; }
 517
 518 /* tag-cloud */
 519 #available-widgets [class*="tag"] .widget-title:before { content: "\f479"; }
 520
 521 /* rss */
 522 #available-widgets [class*="rss"] .widget-title:before { content: "\f303"; top: -6px; }
 523
 524 /* calendar */
 525 #available-widgets [class*="event"] .widget-title:before,
 526 #available-widgets [class*="calendar"] .widget-title:before { content: "\f145"; top: -4px;}
 527
 528 /* format-image */
 529 #available-widgets [class*="image"] .widget-title:before,
 530 #available-widgets [class*="photo"] .widget-title:before,
 531 #available-widgets [class*="slide"] .widget-title:before,
 532 #available-widgets [class*="instagram"] .widget-title:before { content: "\f128"; }
 533
 534 /* format-gallery */
 535 #available-widgets [class*="album"] .widget-title:before,
 536 #available-widgets [class*="galler"] .widget-title:before { content: "\f161"; }
 537
 538 /* format-video */
 539 #available-widgets [class*="video"] .widget-title:before,
 540 #available-widgets [class*="tube"] .widget-title:before { content: "\f126"; }
 541
 542 /* format-audio */
 543 #available-widgets [class*="music"] .widget-title:before,
 544 #available-widgets [class*="radio"] .widget-title:before,
 545 #available-widgets [class*="audio"] .widget-title:before { content: "\f127"; }
 546
 547 /* admin-users */
 548 #available-widgets [class*="login"] .widget-title:before,
 549 #available-widgets [class*="user"] .widget-title:before,
 550 #available-widgets [class*="member"] .widget-title:before,
 551 #available-widgets [class*="avatar"] .widget-title:before,
 552 #available-widgets [class*="subscriber"] .widget-title:before,
 553 #available-widgets [class*="profile"] .widget-title:before,
 554 #available-widgets [class*="grofile"] .widget-title:before { content: "\f110"; }
 555
 556 /* cart */
 557 #available-widgets [class*="commerce"] .widget-title:before,
 558 #available-widgets [class*="shop"] .widget-title:before,
 559 #available-widgets [class*="cart"] .widget-title:before { content: "\f174"; top: -4px; }
 560
 561 /* shield */
 562 #available-widgets [class*="secur"] .widget-title:before,
 563 #available-widgets [class*="firewall"] .widget-title:before { content: "\f332"; }
 564
 565 /* chart-bar */
 566 #available-widgets [class*="analytic"] .widget-title:before,
 567 #available-widgets [class*="stat"] .widget-title:before,
 568 #available-widgets [class*="poll"] .widget-title:before { content: "\f185"; }
 569
 570 /* feedback */
 571 #available-widgets [class*="form"] .widget-title:before { content: "\f175"; }
 572
 573 /* email-alt */
 574 #available-widgets [class*="subscribe"] .widget-title:before,
 575 #available-widgets [class*="news"] .widget-title:before,
 576 #available-widgets [class*="contact"] .widget-title:before,
 577 #available-widgets [class*="mail"] .widget-title:before { content: "\f466"; }
 578
 579 /* share */
 580 #available-widgets [class*="share"] .widget-title:before,
 581 #available-widgets [class*="socia"] .widget-title:before { content: "\f237"; }
 582
 583 /* translation */
 584 #available-widgets [class*="lang"] .widget-title:before,
 585 #available-widgets [class*="translat"] .widget-title:before { content: "\f326"; }
 586
 587 /* location-alt */
 588 #available-widgets [class*="locat"] .widget-title:before,
 589 #available-widgets [class*="map"] .widget-title:before { content: "\f231"; }
 590
 591 /* download */
 592 #available-widgets [class*="download"] .widget-title:before { content: "\f316"; }
 593
 594 /* cloud */
 595 #available-widgets [class*="weather"] .widget-title:before { content: "\f176"; top: -4px;}
 596
 597 /* facebook */
 598 #available-widgets [class*="facebook"] .widget-title:before { content: "\f304"; }
 599
 600 /* twitter */
 601 #available-widgets [class*="tweet"] .widget-title:before,
 602 #available-widgets [class*="twitter"] .widget-title:before { content: "\f301"; }
 603
 604 #available-widgets .customize-section-title {
 605         display: none;
 606 }
 607
 608 @media screen and (max-height: 700px) and (min-width: 981px) {
 609         .customize-control-widget {
 610                 margin-bottom: 0;
 611         }
 612         .widget-top {
 613                 -webkit-box-shadow: none;
 614                 box-shadow: none;
 615                 margin-top: -1px;
 616         }
 617         .widget-top:hover {
 618                 position: relative;
 619                 z-index: 1;
 620         }
 621         .last-widget {
 622                 margin-bottom: 15px;
 623         }
 624         .widget-title h4 {
 625                 padding: 13px 15px;
 626         }
 627         .widget-top a.widget-action:after {
 628                 padding-top: 9px;
 629         }
 630         .widget-reorder-nav span {
 631                 height: 39px;
 632         }
 633         .widget-reorder-nav span:before {
 634                 line-height: 39px;
 635         }
 636         #customize-theme-controls .widget-area-select li {
 637                 padding: 9px 15px 11px 42px;
 638         }
 639         #customize-theme-controls .widget-area-select li:before {
 640                 top: 8px;
 641         }
 642 }
 643
 644 @media screen and ( max-width: 640px ) {
 645         body.adding-widget div#available-widgets {
 646                 top: 46px;
 647                 left: 0;
 648                 z-index: 10;
 649                 width: 100%;
 650         }
 651
 652         #available-widgets .customize-section-title {
 653                 display: block;
 654                 margin: 0;
 655         }
 656
 657         #available-widgets .customize-section-back {
 658                 height: 69px;
 659         }
 660
 661         #available-widgets .customize-section-title h3 {
 662                 font-size: 20px;
 663                 font-weight: 200;
 664                 padding: 9px 10px 12px 14px;
 665                 margin: 0;
 666                 line-height: 24px;
 667                 color: #555;
 668                 display: block;
 669                 overflow: hidden;
 670                 white-space: nowrap;
 671                 text-overflow: ellipsis;
 672         }
 673
 674         #available-widgets .customize-section-title .customize-action {
 675                 font-size: 13px;
 676                 display: block;
 677                 font-weight: 400;
 678                 overflow: hidden;
 679                 white-space: nowrap;
 680                 text-overflow: ellipsis;
 681         }
 682
 683         #available-widgets-filter {
 684                 position: relative;
 685                 width: 100%;
 686                 background: #fff;
 687                 height: auto;
 688                 padding: 10px 15px;
 689         }
 690
 691         #available-widgets-list {
 692                 top: 140px;
 693         }
 694 }