wp-admin/css/customize-controls-rtl.css

   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 .description {
  24         color: #555d66;
  25 }
  26
  27 #customize-header-actions .button-primary {
  28         float: left;
  29         margin-top: 9px;
  30 }
  31
  32 #customize-header-actions .spinner {
  33         margin-top: 13px;
  34         margin-left: 4px;
  35 }
  36
  37 .saving #customize-header-actions .spinner {
  38         visibility: visible;
  39 }
  40
  41 #customize-header-actions {
  42         border-bottom: 1px solid #ddd;
  43 }
  44
  45 #customize-controls .wp-full-overlay-sidebar-content {
  46         overflow-y: auto;
  47         overflow-x: hidden;
  48 }
  49
  50 #customize-controls .customize-info {
  51         border: none;
  52         border-bottom: 1px solid #ddd;
  53         margin-bottom: 15px;
  54 }
  55
  56 #customize-controls .customize-info.section-meta {
  57         margin-bottom: 15px;
  58 }
  59
  60 #customize-controls .customize-info.is-in-view,
  61 #customize-controls .customize-section-title.is-in-view {
  62         position: absolute;
  63         z-index: 9;
  64         width: 100%;
  65         -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
  66         box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
  67 }
  68
  69 #customize-controls .customize-section-title.is-in-view {
  70         margin-top: 0;
  71 }
  72
  73 #customize-controls .customize-info.is-in-view + .accordion-section {
  74         margin-top: 15px;
  75 }
  76
  77 #customize-controls .customize-info.is-sticky,
  78 #customize-controls .customize-section-title.is-sticky {
  79         position: fixed;
  80         top: 46px;
  81 }
  82
  83 #customize-controls .customize-info .accordion-section-title {
  84         background: #fff;
  85         color: #555d66;
  86         border-right: none;
  87         border-left: none;
  88         border-bottom: none;
  89         cursor: default;
  90 }
  91
  92 #customize-controls .customize-info.open .accordion-section-title:after,
  93 #customize-controls .customize-info .accordion-section-title:hover:after,
  94 #customize-controls .customize-info .accordion-section-title:focus:after {
  95         color: #32373c;
  96 }
  97
  98 #customize-controls .customize-info .accordion-section-title:after {
  99         display: none;
 100 }
 101
 102 #customize-controls .customize-info .preview-notice {
 103         font-size: 13px;
 104         line-height: 24px;
 105 }
 106
 107 #customize-controls .customize-pane-child .customize-section-title h3,
 108 #customize-controls .customize-pane-child h3.customize-section-title,
 109 #customize-controls .customize-info .panel-title {
 110         font-size: 20px;
 111         font-weight: 200;
 112         line-height: 26px;
 113         display: block;
 114         overflow: hidden;
 115         white-space: nowrap;
 116         text-overflow: ellipsis;
 117 }
 118
 119 #customize-controls .customize-section-title span.customize-action {
 120         overflow: hidden;
 121         white-space: nowrap;
 122         text-overflow: ellipsis;
 123 }
 124
 125 #customize-controls .customize-info .customize-help-toggle {
 126         position: absolute;
 127         top: 4px;
 128         left: 1px;
 129         padding: 20px 10px 10px 20px;
 130         width: 20px;
 131         height: 20px;
 132         cursor: pointer;
 133         -webkit-box-shadow: none;
 134         box-shadow: none;
 135         -webkit-appearance: none;
 136         background: transparent;
 137         color: #555d66;
 138         border: none;
 139 }
 140
 141 #customize-controls .customize-info .customize-help-toggle:before {
 142         position: absolute;
 143         top: 5px;
 144         right: 6px;
 145 }
 146
 147 #customize-controls .customize-info.open .customize-help-toggle,
 148 #customize-controls .customize-info .customize-help-toggle:focus,
 149 #customize-controls .customize-info .customize-help-toggle:hover {
 150         color: #0073aa;
 151 }
 152
 153 #customize-controls .customize-info .customize-panel-description,
 154 #customize-controls .customize-info .customize-section-description,
 155 #customize-controls .no-widget-areas-rendered-notice {
 156         color: #555d66;
 157         display: none;
 158         background: #fff;
 159         padding: 12px 15px;
 160         border-top: 1px solid #ddd;
 161 }
 162
 163 #customize-controls .customize-info .customize-panel-description.open + .no-widget-areas-rendered-notice {
 164         border-top: none;
 165 }
 166
 167 #customize-controls .customize-info .customize-section-description {
 168         margin-bottom: 15px;
 169 }
 170
 171 #customize-controls .customize-info .customize-panel-description p:first-child,
 172 #customize-controls .customize-info .customize-section-description p:first-child {
 173         margin-top: 0;
 174 }
 175
 176 #customize-controls .customize-info .customize-panel-description p:last-child,
 177 #customize-controls .customize-info .customize-section-description p:last-child {
 178         margin-bottom: 0;
 179 }
 180
 181 #customize-controls .current-panel .control-section > h3.accordion-section-title {
 182         padding-left: 30px;
 183 }
 184
 185 #customize-theme-controls .control-section {
 186         border: none;
 187 }
 188
 189 #customize-theme-controls .accordion-section-title {
 190         color: #555d66;
 191         background-color: #fff;
 192         border-bottom: 1px solid #ddd;
 193         border-right: 4px solid #fff;
 194         -webkit-transition: .15s color ease-in-out,
 195                     .15s background-color ease-in-out,
 196                     .15s border-color ease-in-out;
 197         transition: .15s color ease-in-out,
 198                     .15s background-color ease-in-out,
 199                     .15s border-color ease-in-out;
 200 }
 201
 202 #customize-controls #customize-theme-controls .customize-themes-panel .accordion-section-title {
 203         color: #555;
 204         background-color: #fff;
 205         border-right: 4px solid #fff;
 206 }
 207
 208 #customize-theme-controls .accordion-section-title:after {
 209         content: "\f341";
 210         color: #a0a5aa;
 211 }
 212
 213 #customize-theme-controls .accordion-section-content {
 214         color: #555d66;
 215         background: transparent;
 216 }
 217
 218 #customize-controls .control-section:hover > .accordion-section-title,
 219 #customize-controls .control-section .accordion-section-title:hover,
 220 #customize-controls .control-section.open .accordion-section-title,
 221 #customize-controls .control-section .accordion-section-title:focus {
 222         color: #0073aa;
 223         background: #f3f3f5;
 224         border-right-color: #0073aa;
 225 }
 226
 227 #accordion-section-themes + .control-section {
 228         border-top: 1px solid #ddd;
 229 }
 230
 231 .js .control-section:hover .accordion-section-title,
 232 .js .control-section .accordion-section-title:hover,
 233 .js .control-section.open .accordion-section-title,
 234 .js .control-section .accordion-section-title:focus {
 235         background: #f3f3f5;
 236 }
 237
 238 #customize-theme-controls .control-section:hover > .accordion-section-title:after,
 239 #customize-theme-controls .control-section .accordion-section-title:hover:after,
 240 #customize-theme-controls .control-section.open .accordion-section-title:after,
 241 #customize-theme-controls .control-section .accordion-section-title:focus:after {
 242         color: #0073aa;
 243 }
 244
 245 #customize-theme-controls .control-section.open {
 246         border-bottom: 1px solid #eee;
 247 }
 248
 249 #customize-theme-controls .control-section.open .accordion-section-title {
 250         border-bottom-color: #eee !important;
 251 }
 252
 253 #customize-theme-controls .control-section:last-of-type.open,
 254 #customize-theme-controls .control-section:last-of-type > .accordion-section-title {
 255         border-bottom-color: #ddd;
 256 }
 257
 258 #customize-theme-controls .control-panel-content .control-section:nth-child(2),
 259 #customize-theme-controls .control-panel-nav_menus .control-section:nth-child(3) {
 260         border-top: 1px solid #ddd;
 261 }
 262
 263 #customize-theme-controls > ul {
 264         margin: 0;
 265 }
 266
 267 #customize-theme-controls .accordion-section-content {
 268         position: absolute;
 269         top: 0;
 270         right: 100%;
 271         width: 100%;
 272         margin: 0;
 273         padding: 12px;
 274         -webkit-box-sizing: border-box;
 275         -moz-box-sizing: border-box;
 276         box-sizing: border-box;
 277 }
 278
 279 #customize-info,
 280 #customize-theme-controls .customize-pane-parent,
 281 #customize-theme-controls .customize-pane-child {
 282         overflow: visible;
 283         width: 100%;
 284         margin: 0;
 285         padding: 0;
 286         -webkit-box-sizing: border-box;
 287         -moz-box-sizing: border-box;
 288         box-sizing: border-box;
 289         -webkit-transition: 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1);
 290         transition: 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1);
 291         -webkit-transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1);
 292         transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1);
 293         -webkit-transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1), 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1);
 294         transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1), 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1); /* easeInOutCubic */
 295 }
 296
 297 #customize-info,
 298 #customize-theme-controls .customize-pane-parent {
 299         position: relative;
 300         visibility: visible;
 301         height: auto;
 302         max-height: none;
 303         overflow: auto;
 304         -webkit-transform: none;
 305         -ms-transform: none;
 306         transform: none;
 307 }
 308
 309 #customize-theme-controls .customize-pane-child {
 310         position: absolute;
 311         top: 0;
 312         right: 0;
 313         visibility: hidden;
 314         height: 0;
 315         max-height: none;
 316         overflow: hidden;
 317         -webkit-transform: translateX(-100%);
 318         -ms-transform: translateX(-100%);
 319         transform: translateX(-100%);
 320 }
 321
 322 #customize-theme-controls .customize-pane-child.open,
 323 #customize-theme-controls .customize-pane-child.current-panel,
 324 #customize-theme-controls .customize-themes-panel.customize-pane-child.current-panel {
 325         -webkit-transform: none;
 326         -ms-transform: none;
 327         transform: none;
 328 }
 329
 330 #customize-theme-controls .customize-themes-panel.customize-pane-child,
 331 .section-open #customize-theme-controls .customize-pane-parent,
 332 .in-sub-panel #customize-theme-controls .customize-pane-parent,
 333 .section-open #customize-info,
 334 .in-sub-panel #customize-info,
 335 .in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel,
 336 .in-themes-panel #customize-theme-controls .customize-pane-parent,
 337 .in-themes-panel #customize-info {
 338         visibility: hidden;
 339         height: 0;
 340         overflow: hidden;
 341         -webkit-transform: translateX(100%);
 342         -ms-transform: translateX(100%);
 343         transform: translateX(100%);
 344 }
 345
 346 .section-open #customize-theme-controls .customize-pane-parent.busy,
 347 .in-sub-panel #customize-theme-controls .customize-pane-parent.busy,
 348 .in-themes-panel #customize-theme-controls .customize-pane-parent.busy,
 349 .section-open #customize-info.busy,
 350 .in-sub-panel #customize-info.busy,
 351 .in-themes-panel #customize-info.busy,
 352 .busy.section-open.in-sub-panel #customize-theme-controls .customize-pane-child.current-panel,
 353 #customize-theme-controls .customize-pane-child.open,
 354 #customize-theme-controls .customize-pane-child.current-panel,
 355 #customize-theme-controls .customize-pane-child.busy {
 356         visibility: visible;
 357         height: auto;
 358         overflow: auto;
 359 }
 360
 361 .in-themes-panel #customize-theme-controls .customize-pane-parent,
 362 .in-themes-panel #customize-info {
 363         -webkit-transform: translateX(-100%);
 364         -ms-transform: translateX(-100%);
 365         transform: translateX(-100%);
 366 }
 367
 368 #customize-theme-controls .customize-pane-child.accordion-section-content,
 369 #customize-theme-controls .customize-pane-child.accordion-sub-container {
 370         display: block;
 371         overflow-x: hidden;
 372 }
 373
 374 #customize-theme-controls .customize-pane-child.accordion-section-content {
 375         padding: 12px;
 376 }
 377
 378 #customize-theme-controls .customize-pane-child.menu li {
 379         position: static;
 380 }
 381
 382 .customize-section-description-container {
 383         margin-bottom: 15px;
 384 }
 385
 386 .customize-section-title {
 387         margin: -12px -12px 0 -12px;
 388         border-bottom: 1px solid #ddd;
 389         background: #fff;
 390 }
 391
 392 div.customize-section-description {
 393         margin-top: 22px;
 394 }
 395
 396 .customize-info div.customize-section-description {
 397         margin-top: 0;
 398 }
 399
 400 div.customize-section-description p:first-child {
 401         margin-top: 0;
 402 }
 403
 404 div.customize-section-description p:last-child {
 405         margin-bottom: 0;
 406 }
 407
 408 #customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child {
 409         border-bottom: 1px solid #ddd;
 410         padding: 12px 12px 12px 12px;
 411 }
 412
 413 .ios #customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child {
 414         padding: 12px 12px 13px 12px;
 415 }
 416
 417 .customize-section-title h3,
 418 h3.customize-section-title {
 419         padding: 10px 14px 12px 10px;
 420         margin: 0;
 421         line-height: 21px;
 422         color: #555d66;
 423 }
 424
 425 .accordion-sub-container.control-panel-content {
 426         display: none;
 427         position: absolute;
 428         top: 0;
 429         width: 100%;
 430 }
 431
 432 .accordion-sub-container.control-panel-content.busy {
 433         display: block;
 434 }
 435
 436 .current-panel .accordion-sub-container.control-panel-content {
 437         width: 100%;
 438 }
 439
 440 .customize-controls-close {
 441         display: block;
 442         position: absolute;
 443         top: 0;
 444         right: 0;
 445         width: 45px;
 446         height: 41px;
 447         padding: 0 0 0 2px;
 448         background: #eee;
 449         border: none;
 450         border-top: 4px solid #eee;
 451         border-left: 1px solid #ddd;
 452         color: #444;
 453         text-align: right;
 454         cursor: pointer;
 455         -webkit-transition: color .15s ease-in-out,
 456                     border-color .15s ease-in-out,
 457                     background .15s ease-in-out;
 458         transition: color .15s ease-in-out,
 459                     border-color .15s ease-in-out,
 460                     background .15s ease-in-out;
 461         -webkit-box-sizing: content-box;
 462         -moz-box-sizing: content-box;
 463         box-sizing: content-box;
 464 }
 465
 466 .customize-panel-back,
 467 .customize-section-back {
 468         display: block;
 469         float: right;
 470         width: 48px;
 471         height: 71px;
 472         padding: 0 0 0 24px;
 473         margin: 0;
 474         background: #fff;
 475         border: none;
 476         border-left: 1px solid #ddd;
 477         border-right: 4px solid #fff;
 478         -webkit-box-shadow: none;
 479         box-shadow: none;
 480         cursor: pointer;
 481         -webkit-transition: color .15s ease-in-out,
 482                     border-color .15s ease-in-out,
 483                     background .15s ease-in-out;
 484         transition: color .15s ease-in-out,
 485                     border-color .15s ease-in-out,
 486                     background .15s ease-in-out;
 487 }
 488
 489 .customize-section-back {
 490         height: 74px;
 491 }
 492
 493 .ios .customize-panel-back {
 494         display: none;
 495 }
 496
 497 .ios .expanded.in-sub-panel .customize-panel-back {
 498         display: block;
 499 }
 500
 501 #customize-controls .panel-meta.customize-info .accordion-section-title {
 502         margin-right: 48px;
 503         border-right: none;
 504 }
 505
 506 #customize-controls .panel-meta.customize-info .accordion-section-title:hover,
 507 #customize-controls .cannot-expand:hover .accordion-section-title {
 508         background: #fff;
 509         color: #555d66;
 510         border-right-color: #fff;
 511 }
 512
 513 .customize-controls-close:focus,
 514 .customize-controls-close:hover,
 515 .customize-controls-preview-toggle:focus,
 516 .customize-controls-preview-toggle:hover {
 517         background: #fff;
 518         color: #0073aa;
 519         border-top-color: #0073aa;
 520         outline: none;
 521         -webkit-box-shadow: none;
 522         box-shadow: none;
 523 }
 524
 525
 526 .customize-panel-back:hover,
 527 .customize-panel-back:focus,
 528 .customize-section-back:hover,
 529 .customize-section-back:focus {
 530         color: #0073aa;
 531         background: #f3f3f5;
 532         border-right-color: #0073aa;
 533         outline: none;
 534         -webkit-box-shadow: none;
 535         box-shadow: none;
 536 }
 537
 538 .customize-controls-close:before {
 539         font: normal 22px/45px dashicons;
 540         content: "\f335";
 541         position: relative;
 542         top: -3px;
 543         right: 13px;
 544 }
 545
 546 .customize-panel-back:before,
 547 .customize-section-back:before {
 548         font: normal 20px/72px dashicons;
 549         content: "\f345";
 550         position: relative;
 551         right: 9px;
 552 }
 553
 554 .wp-full-overlay-sidebar .wp-full-overlay-header {
 555         background-color: #eee;
 556         -webkit-transition: padding ease-in-out .18s;
 557         transition: padding ease-in-out .18s;
 558 }
 559
 560 .in-sub-panel .wp-full-overlay-sidebar .wp-full-overlay-header {
 561         padding-right: 62px;
 562 }
 563
 564 p.customize-section-description {
 565         font-style: normal;
 566         margin-top: 22px;
 567         margin-bottom: 0;
 568 }
 569
 570 .customize-control {
 571         width: 100%;
 572         float: right;
 573         clear: both;
 574         margin-bottom: 12px;
 575 }
 576
 577 .customize-control select,
 578 .customize-control input[type="radio"],
 579 .customize-control input[type="checkbox"] {
 580         line-height: 28px;
 581 }
 582
 583 .customize-control input[type="text"],
 584 .customize-control input[type="password"],
 585 .customize-control input[type="email"],
 586 .customize-control input[type="number"],
 587 .customize-control input[type="search"],
 588 .customize-control input[type="tel"],
 589 .customize-control input[type="url"] {
 590         width: 100%;
 591         line-height: 18px;
 592         margin: 0;
 593 }
 594
 595 .customize-control-hidden {
 596         margin: 0;
 597 }
 598
 599 .customize-control-textarea textarea {
 600         width: 100%;
 601         resize: vertical;
 602 }
 603
 604 .customize-control select {
 605         width: 100%;
 606         max-width: 300px;
 607         height: 28px;
 608         line-height: 28px;
 609 }
 610
 611 .customize-control select[multiple] {
 612         height: auto;
 613 }
 614
 615 .customize-control-title {
 616         display: block;
 617         font-size: 14px;
 618         line-height: 24px;
 619         font-weight: 600;
 620         margin-bottom: 4px;
 621 }
 622
 623 .customize-control-description {
 624         display: block;
 625         font-style: italic;
 626         line-height: 18px;
 627         margin-top: 0;
 628         margin-bottom: 5px;
 629 }
 630
 631 .customize-section-description a.external-link:after {
 632         font: 16px/11px dashicons;
 633         content: "\f310";
 634         top: 3px;
 635         position: relative;
 636         padding-right: 3px;
 637         display: inline-block;
 638         text-decoration: none;
 639 }
 640
 641 .customize-control-color .color-picker,
 642 .customize-control-upload div {
 643         line-height: 28px;
 644 }
 645
 646 .customize-control-radio label,
 647 .customize-control-checkbox label,
 648 .customize-control-nav_menu_auto_add label {
 649         line-height: 20px;
 650         display: block;
 651         margin-right: 24px;
 652         padding-top: 6px;
 653         padding-bottom: 6px;
 654 }
 655
 656 .customize-control-radio input,
 657 .customize-control-checkbox input,
 658 .customize-control-nav_menu_auto_add input {
 659         margin-left: 4px;
 660         margin-right: -24px;
 661 }
 662
 663 .customize-control-radio {
 664         padding: 5px 0 10px;
 665 }
 666
 667 .customize-control-radio .customize-control-title {
 668         margin-bottom: 0;
 669         line-height: 22px;
 670 }
 671
 672 .customize-control-radio .customize-control-title + .customize-control-description {
 673         margin-top: 7px;
 674 }
 675
 676 .customize-control .attachment-thumb.type-icon {
 677         float: right;
 678         margin: 10px;
 679         width: auto;
 680 }
 681
 682 .customize-control .attachment-title {
 683         font-weight: 600;
 684         margin: 0;
 685         padding: 5px 10px;
 686 }
 687
 688 .customize-control .attachment-meta {
 689         white-space: nowrap;
 690         overflow: hidden;
 691         text-overflow: ellipsis;
 692         margin: 0;
 693         padding: 0 10px;
 694 }
 695
 696 .customize-control .attachment-meta-title {
 697         padding-top: 7px;
 698 }
 699
 700 .customize-control .thumbnail-image {
 701         line-height: 0;
 702 }
 703
 704 .customize-control .thumbnail-image img {
 705         cursor: pointer;
 706 }
 707
 708 #customize-controls .thumbnail-audio .thumbnail {
 709         max-width: 64px;
 710         max-height: 64px;
 711         margin: 10px;
 712         float: right;
 713 }
 714
 715 #available-menu-items .accordion-section-content .new-content-item,
 716 .customize-control-dropdown-pages .new-content-item {
 717         width: -webkit-calc(100% - 30px);
 718         width: calc(100% - 30px);
 719         padding: 8px 15px;
 720         position: absolute;
 721         bottom: 0;
 722         z-index: 10;
 723         background: #eee;
 724         display: -webkit-box;
 725         display: -moz-box;
 726         display: -ms-flexbox;
 727         display: -webkit-flex;
 728         display: flex;
 729 }
 730
 731 .customize-control-dropdown-pages .new-content-item {
 732         width: 100%;
 733         max-width: 300px;
 734         padding: 5px 1px 5px 0;
 735         position: relative;
 736 }
 737
 738 #available-menu-items .new-content-item .create-item-input,
 739 .customize-control-dropdown-pages .new-content-item .create-item-input {
 740         -webkit-box-flex: 10;
 741         -webkit-flex-grow: 10;
 742         -moz-box-flex: 10;
 743         -ms-flex-positive: 10;
 744         -ms-flex: 10;
 745         flex-grow: 10;
 746 }
 747
 748 #available-menu-items .new-content-item .add-content,
 749 .customize-control-dropdown-pages .new-content-item .add-content {
 750         margin: 2px 6px 2px 0;
 751         -webkit-box-flex: 10;
 752         -webkit-flex-grow: 10;
 753         -moz-box-flex: 10;
 754         -ms-flex-positive: 10;
 755         -ms-flex: 10;
 756         flex-grow: 1;
 757 }
 758
 759 .customize-control-dropdown-pages .new-content-item .create-item-input.invalid {
 760         border: 1px solid #f00;
 761 }
 762
 763 .customize-control-dropdown-pages .add-new-toggle {
 764         margin-right: 1px;
 765         color: #0073aa;
 766         font-weight: 600;
 767         line-height: 28px;
 768         text-decoration: underline;
 769 }
 770
 771 .customize-control-dropdown-pages .add-new-toggle:hover,
 772 .customize-control-dropdown-pages .add-new-toggle:active {
 773         color: #00a0d2;
 774 }
 775
 776 .customize-control-dropdown-pages .add-new-toggle:focus {
 777         color: #124964;
 778 }
 779
 780 #customize-preview iframe {
 781         width: 100%;
 782         height: 100%;
 783         position: absolute;
 784 }
 785 #customize-preview iframe + iframe {
 786         visibility: hidden;
 787 }
 788
 789 .wp-full-overlay-sidebar {
 790         background: #eee;
 791         border-left: 1px solid #ddd;
 792 }
 793
 794
 795 /**
 796  * Notifications
 797  */
 798
 799 #customize-controls .customize-control-notifications-container { /* Scoped to #customize-controls for specificity over notification styles in common.css. */
 800         margin: 4px 0 8px 0;
 801         padding: 0;
 802         display: none;
 803         cursor: default;
 804 }
 805
 806 #customize-controls .customize-control-widget_form.has-error .widget .widget-top,
 807 .customize-control-nav_menu_item.has-error .menu-item-bar .menu-item-handle {
 808         -webkit-box-shadow: inset 0 0 0 2px #dc3232;
 809         box-shadow: inset 0 0 0 2px #dc3232;
 810         -webkit-transition: .15s box-shadow linear;
 811         transition: .15s box-shadow linear;
 812 }
 813
 814 .customize-control-notifications-container li.notice {
 815         list-style: none;
 816         margin: 0 0 6px 0;
 817         padding: 4px 8px;
 818 }
 819
 820 .customize-control-notifications-container li.notice:last-child {
 821         margin-bottom: 0;
 822 }
 823
 824 #customize-controls .customize-control-nav_menu_item .customize-control-notifications-container {
 825         margin-top: 0;
 826 }
 827
 828 #customize-controls .customize-control-widget_form .customize-control-notifications-container {
 829         margin-top: 8px;
 830 }
 831
 832 .customize-control-text.has-error input {
 833         outline: 2px solid #dc3232;
 834 }
 835
 836 /* Style for custom settings */
 837
 838 /**
 839  * Dropdowns
 840  */
 841
 842 .accordion-section .dropdown {
 843         float: right;
 844         display: block;
 845         position: relative;
 846         cursor: pointer;
 847 }
 848
 849 .accordion-section .dropdown-content {
 850         overflow: hidden;
 851         float: right;
 852         min-width: 30px;
 853         height: 16px;
 854         line-height: 16px;
 855         margin-left: 16px;
 856         padding: 4px 5px;
 857         border: 2px solid #eee;
 858         -webkit-user-select: none;
 859         -moz-user-select: none;
 860         -ms-user-select: none;
 861         user-select: none;
 862 }
 863
 864 /* @todo maybe no more used? */
 865 .customize-control .dropdown-arrow {
 866         position: absolute;
 867         top: 0;
 868         bottom: 0;
 869         left: 0;
 870         width: 20px;
 871         background: #eee;
 872 }
 873
 874 .customize-control .dropdown-arrow:after {
 875         content: "\f140";
 876         font: normal 20px/1 dashicons;
 877         speak: none;
 878         display: block;
 879         padding: 0;
 880         text-indent: 0;
 881         text-align: center;
 882         position: relative;
 883         -webkit-font-smoothing: antialiased;
 884         -moz-osx-font-smoothing: grayscale;
 885         text-decoration: none !important;
 886         color: #32373c;
 887 }
 888
 889 .customize-control .dropdown-status {
 890         color: #32373c;
 891         background: #eee;
 892         display: none;
 893         max-width: 112px;
 894 }
 895
 896 /* Color Picker */
 897 .customize-control-color .color-picker-hex {
 898         display: none;
 899 }
 900
 901 .customize-control-color.open .color-picker-hex {
 902         display: block;
 903 }
 904
 905 .customize-control-color .dropdown {
 906         margin-left: 5px;
 907         margin-bottom: 5px;
 908 }
 909
 910 .customize-control-color .dropdown .dropdown-content {
 911         background-color: #555d66;
 912         border: 1px solid rgba(0, 0, 0, 0.15);
 913 }
 914
 915 .customize-control-color .dropdown:hover .dropdown-content {
 916         border-color: rgba(0, 0, 0, 0.25);
 917 }
 918
 919 /**
 920  * iOS can't scroll iframes,
 921  * instead it expands the iframe size to match the size of the content
 922  */
 923
 924 .ios .wp-full-overlay {
 925         position: relative;
 926 }
 927
 928 .ios #customize-controls .wp-full-overlay-sidebar-content {
 929         -webkit-overflow-scrolling: touch;
 930 }
 931
 932 /* Media controls */
 933
 934 .customize-control .attachment-media-view .actions {
 935         margin-top: 8px;
 936 }
 937
 938 .customize-control-header .current {
 939         margin-bottom: 8px;
 940 }
 941
 942 .customize-control-header .actions,
 943 .customize-control-header .uploaded {
 944         margin-bottom: 18px;
 945 }
 946
 947 .customize-control-header .uploaded button:not(.random),
 948 .customize-control-header .default button:not(.random) {
 949         width: 100%;
 950         padding: 0;
 951         margin: 0;
 952         background: none;
 953         border: none;
 954         color: inherit;
 955         cursor: pointer;
 956 }
 957
 958 .customize-control-header button img {
 959         display: block;
 960 }
 961
 962 .customize-control .attachment-media-view .remove-button,
 963 .customize-control .attachment-media-view .default-button,
 964 .customize-control .attachment-media-view .upload-button,
 965 .customize-control-header button.new,
 966 .customize-control-header button.remove {
 967         white-space: normal;
 968         width: 48%;
 969         height: auto;
 970 }
 971
 972 .customize-control .attachment-media-view .thumbnail,
 973 .customize-control-header .current .container {
 974         overflow: hidden;
 975 }
 976
 977 .customize-control .attachment-media-view .placeholder,
 978 .customize-control-header .placeholder {
 979         width: 100%;
 980         position: relative;
 981         text-align: center;
 982         cursor: default;
 983         border: 1px dashed #b4b9be;
 984         -webkit-box-sizing: border-box;
 985         -moz-box-sizing: border-box;
 986         box-sizing: border-box;
 987         padding: 9px 0;
 988         line-height: 20px;
 989 }
 990
 991 .customize-control-header .inner {
 992         display: none;
 993         position: absolute;
 994         width: 100%;
 995         color: #555d66;
 996         white-space: nowrap;
 997         text-overflow: ellipsis;
 998         overflow: hidden;
 999 }
1000
1001 .customize-control-header .inner,
1002 .customize-control-header .inner .dashicons {
1003         line-height: 20px;
1004         top: 8px;
1005 }
1006
1007 .customize-control-header .list .inner,
1008 .customize-control-header .list .inner .dashicons {
1009         top: 9px;
1010 }
1011
1012 .customize-control-header .header-view {
1013         position: relative;
1014         width: 100%;
1015         margin-bottom: 5px;
1016 }
1017
1018 .customize-control-header .header-view:last-child {
1019         margin-bottom: 0px;
1020 }
1021
1022 /* Convoluted, but 'outline' support isn't good enough yet */
1023 .customize-control-header .header-view:after {
1024         border: 0;
1025 }
1026
1027 .customize-control-header .header-view.selected .choice:focus {
1028         outline: none;
1029 }
1030
1031 .customize-control-header .header-view.selected:after {
1032         content: '';
1033         position: absolute;
1034         height: auto;
1035         top: 0; right: 0; bottom: 0; left: 0;
1036         border: 4px solid #00a0d2;
1037         -webkit-border-radius: 2px;
1038         border-radius: 2px;
1039 }
1040
1041 .customize-control-header .header-view.button.selected {
1042         border: 0;
1043 }
1044
1045 /* Header control: overlay "close" button */
1046
1047 .customize-control-header .uploaded .header-view .close {
1048         font-size: 20px;
1049         color: #fff;
1050         background: #555d66;
1051         background: rgba(0, 0, 0, 0.5);
1052         position: absolute;
1053         top: 10px;
1054         right: -999px;
1055         z-index: 1;
1056         width: 26px;
1057         height: 26px;
1058         cursor: pointer;
1059 }
1060
1061 .customize-control-header .header-view:hover .close,
1062 .customize-control-header .header-view .close:focus {
1063         right: auto;
1064         left: 10px;
1065 }
1066
1067 .customize-control-header .header-view .close:focus {
1068         outline: 1px solid #5b9dd9;
1069 }
1070
1071 /* Header control: randomiz(s)er */
1072
1073 .customize-control-header .random.placeholder {
1074         cursor: pointer;
1075         -webkit-border-radius: 2px;
1076         border-radius: 2px;
1077         height: 40px;
1078 }
1079
1080 .customize-control-header button.random {
1081         width: 100%;
1082         height: auto;
1083         min-height: 40px;
1084         white-space: normal;
1085 }
1086
1087 .customize-control-header button.random .dice {
1088         margin-top: 4px;
1089 }
1090
1091 .customize-control-header .placeholder:hover .dice,
1092 .customize-control-header .header-view:hover > button.random .dice {
1093         -webkit-animation: dice-color-change 3s infinite;
1094         animation: dice-color-change 3s infinite;
1095 }
1096
1097 @-webkit-keyframes dice-color-change {
1098         0% { color: #d4b146; }
1099         50% { color: #ef54b0; }
1100         75% { color: #7190d3; }
1101         100% { color: #d4b146; }
1102 }
1103
1104 @keyframes dice-color-change {
1105         0% { color: #d4b146; }
1106         50% { color: #ef54b0; }
1107         75% { color: #7190d3; }
1108         100% { color: #d4b146; }
1109 }
1110
1111 .customize-control-header .choice {
1112         position: relative;
1113         display: block;
1114         margin-bottom: 9px;
1115 }
1116
1117 .customize-control-header .choice:focus {
1118         outline: none;
1119         -webkit-box-shadow:
1120                 0 0 0 1px #5b9dd9,
1121                 0 0 3px 1px rgba(30, 140, 190, .8);
1122         box-shadow:
1123                 0 0 0 1px #5b9dd9,
1124                 0 0 3px 1px rgba(30, 140, 190, .8);
1125 }
1126
1127 .customize-control-header .uploaded div:last-child > .choice {
1128         margin-bottom: 0;
1129 }
1130
1131 .customize-control .attachment-media-view .thumbnail-image img,
1132 .customize-control-header img {
1133         max-width: 100%;
1134 }
1135
1136 .customize-control .attachment-media-view .remove-button,
1137 .customize-control .attachment-media-view .default-button,
1138 .customize-control-header .remove {
1139         float: right;
1140         margin-left: 3px;
1141 }
1142
1143 .customize-control .attachment-media-view .upload-button,
1144 .customize-control-header .new {
1145         float: left;
1146 }
1147
1148 /* Background position control */
1149 .customize-control-background_position .background-position-control .button-group {
1150         display: block;
1151 }
1152
1153 /**
1154  * Custom CSS Section
1155  *
1156  * Modifications to the Section Container to make the textarea full-width and
1157  * full-height, if the control is the only control in the section.
1158  */
1159
1160 #customize-controls .customize-section-description-container.section-meta.customize-info {
1161         border-bottom: none;
1162 }
1163
1164 #sub-accordion-section-custom_css .customize-control-notifications-container {
1165         margin-bottom: 15px;
1166 }
1167
1168 #customize-control-custom_css textarea {
1169         display: block;
1170         font-family: Consolas, Monaco, monospace;
1171         font-size: 12px;
1172         padding: 6px 8px;
1173         height: 500px;
1174         -moz-tab-size: 4;
1175         -o-tab-size: 4;
1176         tab-size: 4;
1177 }
1178
1179 .customize-section-description-container + #customize-control-custom_css:last-child textarea {
1180         border-left: 0;
1181         border-right: 0;
1182         height: -webkit-calc( 100vh - 185px );
1183         height: calc( 100vh - 185px );
1184         resize: none;
1185 }
1186 .customize-section-description-container + #customize-control-custom_css:last-child {
1187         margin-right: -12px;
1188         width: 299px;
1189         margin-bottom: -12px;
1190 }
1191
1192 @media screen and ( max-width: 640px ) {
1193         .customize-section-description-container + #customize-control-custom_css:last-child {
1194                 margin-right: 0;
1195                 margin-left: 0;
1196                 width: 100%;
1197         }
1198         .customize-section-description-container + #customize-control-custom_css:last-child textarea {
1199                 height: -webkit-calc( 100vh - 140px );
1200                 height: calc( 100vh - 140px );
1201                 width: 100%;
1202                 border: solid 1px #ddd;
1203         }
1204 }
1205
1206 /**
1207  * Themes
1208  */
1209
1210 @-webkit-keyframes customize-reload {
1211         0%   { opacity: 0; }
1212         100% { opacity: 1; }
1213 }
1214
1215 @keyframes customize-reload {
1216         0%   { opacity: 0; }
1217         100% { opacity: 1; }
1218 }
1219
1220 /* #customize-container is reused from customize-loader.js, hence the naming. */
1221 .wp-customizer .customize-loading #customize-container {
1222         display: block;
1223         -webkit-animation: customize-reload .75s; /* Can't use `transition` because `display` changes here. */
1224         animation: customize-reload .75s;
1225 }
1226
1227 #customize-theme-controls .control-section-themes .accordion-section-title:hover, /* Not a focusable element. */
1228 #customize-theme-controls .control-section-themes .accordion-section-title {
1229         cursor: default;
1230         background: #fff;
1231         color: #555d66;
1232         border-top: 1px solid #ddd;
1233         border-bottom: 1px solid #ddd;
1234         border-right: none;
1235         margin-top: 0;
1236 }
1237
1238 #customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child:hover, /* Not a focusable element. */
1239 #customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child {
1240         border-top: 0;
1241 }
1242
1243 #customize-theme-controls .control-section-themes > .accordion-section-title:hover, /* Not a focusable element. */
1244 #customize-theme-controls .control-section-themes > .accordion-section-title {
1245         margin: 0 0 15px;
1246 }
1247
1248 #customize-controls .customize-themes-panel .accordion-section-title:hover,
1249 #customize-controls .customize-themes-panel .accordion-section-title {
1250         margin: 15px -8px;
1251 }
1252
1253 #customize-controls .control-section-themes .accordion-section-title,
1254 #customize-controls .customize-themes-panel .accordion-section-title {
1255         padding-left: 100px; /* Space for the button */
1256 }
1257
1258 #customize-controls .control-section-themes .accordion-section-title span.customize-action,
1259 #customize-controls .customize-section-title span.customize-action {
1260         font-size: 13px;
1261         display: block;
1262         font-weight: 400;
1263 }
1264
1265 #customize-controls .control-section-themes .accordion-section-title .change-theme,
1266 #customize-controls .customize-themes-panel .accordion-section-title .customize-theme {
1267         position: absolute;
1268         left: 10px;
1269         top: 50%;
1270         margin-top: -14px;
1271         font-weight: 400;
1272 }
1273
1274 #customize-controls .control-section-themes .accordion-section-title:before {
1275         display: none;
1276 }
1277
1278 #customize-controls .customize-themes-panel {
1279         padding: 0 8px;
1280         background: #f1f1f1;
1281         -webkit-box-sizing: border-box;
1282         -moz-box-sizing: border-box;
1283         box-sizing: border-box;
1284 }
1285
1286 #customize-controls .customize-themes-panel .accordion-section-title:first-child {
1287         margin-top: 0;
1288 }
1289
1290 #customize-controls .customize-themes-panel .accordion-section-title:nth-child(2) {
1291         font-size: 14px;
1292         font-weight: 600;
1293 }
1294
1295 #customize-controls .customize-themes-panel > h2 {
1296         padding: 15px 8px 0 8px;
1297 }
1298
1299 #customize-theme-controls .customize-themes-panel .accordion-section-content {
1300         background: transparent;
1301         display: block;
1302 }
1303
1304 .customize-control.customize-control-theme {
1305         margin-bottom: 8px;
1306 }
1307
1308 #customize-theme-controls .themes.accordion-section-content {
1309         position: relative;
1310         right: 0;
1311         padding: 0;
1312         width: 100%;
1313 }
1314
1315 .wp-customizer .theme-browser .themes {
1316         padding-bottom: 8px;
1317 }
1318
1319 .wp-customizer .theme-browser .theme {
1320         margin: 0;
1321         width: 100%;
1322 }
1323
1324 .wp-customizer .theme-browser .theme .theme-actions {
1325         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
1326         opacity: 1;
1327 }
1328
1329 #customize-controls h3.theme-name {
1330         font-size: 15px;
1331 }
1332
1333 #customize-controls .theme-overlay .theme-name {
1334         font-size: 32px;
1335 }
1336
1337 .wp-customizer #themes-filter {
1338         font-size: 16px;
1339         font-weight: 300;
1340         line-height: 1.5;
1341         width: 100%;
1342 }
1343
1344 .control-section-themes .accordion-section-title:after,
1345 .customize-themes-panel .accordion-section-title:after {
1346         display: none;
1347 }
1348
1349 .customize-themes-panel.control-panel-content {
1350         border-top: 1px solid #ddd;
1351 }
1352
1353 /* Details View */
1354 .wp-customizer .theme-overlay {
1355         display: none;
1356 }
1357
1358 .wp-customizer.modal-open .theme-overlay {
1359         position: fixed;
1360         right: 0;
1361         top: 0;
1362         left: 0;
1363         bottom: 0;
1364         z-index: 109;
1365 }
1366
1367 .wp-customizer .theme-overlay .theme-backdrop {
1368         background: rgba( 238, 238, 238, 0.75 );
1369         position: fixed;
1370         z-index: 110;
1371 }
1372
1373 .wp-customizer .theme-overlay .theme-wrap {
1374         right: 90px;
1375         left: 90px;
1376         top: 45px;
1377         bottom: 45px;
1378         z-index: 120;
1379         max-width: 1740px; /* To ensure that theme screenshots are not displayed larger than 880px wide. */
1380 }
1381
1382 .wp-customizer .theme-overlay .theme-actions {
1383         text-align: left; /* Because there's only one action, match the pattern of media modals and right-align the action. */
1384 }
1385
1386 .ie8 .wp-customizer .theme-overlay .theme-header,
1387 .ie8 .wp-customizer .theme-overlay .theme-about,
1388 .ie8 .wp-customizer .theme-overlay .theme-actions {
1389         position: static;
1390 }
1391
1392 /* Small Screens */
1393 @media (max-width:850px), (max-height:472px) {
1394         .wp-customizer .theme-overlay .theme-wrap {
1395                 right: 0;
1396                 left: 0;
1397                 top: 0;
1398                 bottom: 0;
1399         }
1400 }
1401
1402 /* Handle cheaters. */
1403 body.cheatin {
1404         font-size: medium;
1405         height: auto;
1406         background: #fff;
1407         margin: 50px auto 2em;
1408         padding: 1em 2em;
1409         max-width: 700px;
1410         min-width: 0;
1411         -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.13);
1412         box-shadow: 0 1px 3px rgba(0,0,0,0.13);
1413 }
1414
1415 body.cheatin h1 {
1416         border-bottom: 1px solid #ddd;
1417         clear: both;
1418         color: #666;
1419         font-size: 24px;
1420         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1421         margin: 30px 0 0 0;
1422         padding: 0;
1423         padding-bottom: 7px;
1424 }
1425
1426 body.cheatin p {
1427         font-size: 14px;
1428         line-height: 1.5;
1429         margin: 25px 0 20px;
1430 }
1431
1432 /**
1433  * Widgets and Menus common styles
1434  */
1435
1436 /* higher specificity than .wp-core-ui .button */
1437 #customize-theme-controls .add-new-widget,
1438 #customize-theme-controls .add-new-menu-item {
1439         cursor: pointer;
1440         float: left;
1441         margin-right: 10px;
1442         -webkit-transition: all 0.2s;
1443         transition: all 0.2s;
1444         -webkit-user-select: none;
1445         -moz-user-select: none;
1446         -ms-user-select: none;
1447         user-select: none;
1448         outline: none;
1449 }
1450
1451 .reordering .add-new-widget,
1452 .reordering .add-new-menu-item {
1453         opacity: 0.2;
1454         pointer-events: none;
1455         cursor: not-allowed; /* doesn't work in conjunction with pointer-events */
1456 }
1457
1458 .add-new-widget:before,
1459 .add-new-menu-item:before,
1460 #available-menu-items .new-content-item .add-content:before {
1461         content: "\f132";
1462         display: inline-block;
1463         position: relative;
1464         right: -2px;
1465         top: -1px;
1466         font: normal 20px/1 dashicons;
1467         vertical-align: middle;
1468         -webkit-transition: all 0.2s;
1469         transition: all 0.2s;
1470         -webkit-font-smoothing: antialiased;
1471         -moz-osx-font-smoothing: grayscale;
1472 }
1473
1474 /* Reordering */
1475 .reorder-toggle {
1476         color: #0073aa;
1477         float: left;
1478         padding: 5px 8px;
1479         text-decoration: none;
1480         cursor: pointer;
1481         outline: none;
1482         -webkit-user-select: none;
1483         -moz-user-select: none;
1484         -ms-user-select: none;
1485         user-select: none;
1486 }
1487
1488 .reorder-toggle:hover {
1489         color: #00a0d2;
1490 }
1491
1492 .reorder-toggle:focus {
1493         outline: 1px dotted;
1494 }
1495
1496 .reorder,
1497 .reordering .reorder-done {
1498         display: block;
1499         padding: 5px 8px;
1500 }
1501
1502 .reorder-done,
1503 .reordering .reorder {
1504         display: none;
1505         color: #0073aa;
1506 }
1507
1508 .reorder-toggle:hover .reorder-done,
1509 .reorder-toggle:active .reorder-done,
1510 .reorder-toggle:focus .reorder-done {
1511         color: #00a0d2;
1512 }
1513
1514 .widget-reorder-nav span,
1515 .menu-item-reorder-nav button {
1516         position: relative;
1517         overflow: hidden;
1518         float: right;
1519         display: block;
1520         width: 33px; /* was 42px for mobile */
1521         height: 43px;
1522         color: #82878c;
1523         text-indent: -9999px;
1524         cursor: pointer;
1525         outline: none;
1526 }
1527
1528 .menu-item-reorder-nav button {
1529         width: 30px;
1530         height: 40px;
1531         background: transparent;
1532         border: none;
1533         -webkit-box-shadow: none;
1534         box-shadow: none;
1535 }
1536
1537 .widget-reorder-nav span:before,
1538 .menu-item-reorder-nav button:before {
1539         display: inline-block;
1540         position: absolute;
1541         top: 0;
1542         left: 0;
1543         width: 100%;
1544         height: 100%;
1545         font: normal 20px/43px dashicons;
1546         text-align: center;
1547         text-indent: 0;
1548         -webkit-font-smoothing: antialiased;
1549         -moz-osx-font-smoothing: grayscale;
1550 }
1551
1552 .widget-reorder-nav span:hover,
1553 .widget-reorder-nav span:focus,
1554 .menu-item-reorder-nav button:hover,
1555 .menu-item-reorder-nav button:focus {
1556         color: #191e23;
1557         background: #eee;
1558 }
1559
1560 .move-widget-down:before,
1561 .menus-move-down:before {
1562         content: "\f347";
1563 }
1564
1565 .move-widget-up:before,
1566 .menus-move-up:before {
1567         content: "\f343";
1568 }
1569
1570 #customize-theme-controls .first-widget .move-widget-up,
1571 #customize-theme-controls .last-widget .move-widget-down,
1572 .move-up-disabled .menus-move-up,
1573 .move-down-disabled .menus-move-down,
1574 .move-right-disabled .menus-move-right,
1575 .move-left-disabled .menus-move-left {
1576         color: #d5d5d5;
1577         background-color: #fff;
1578         cursor: default;
1579         pointer-events: none;
1580 }
1581
1582 /**
1583  * New widget and Add-menu-items modes and panels
1584  */
1585
1586 .wp-full-overlay-main {
1587         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. */
1588         width: 100%;
1589 }
1590
1591 body.adding-widget .add-new-widget,
1592 body.adding-widget .add-new-widget:hover,
1593 .adding-menu-items .add-new-menu-item,
1594 .adding-menu-items .add-new-menu-item:hover,
1595 .add-menu-toggle.open,
1596 .add-menu-toggle.open:hover {
1597         background: #eee;
1598         border-color: #929793;
1599         color: #32373c;
1600         -webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
1601         box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
1602 }
1603
1604 body.adding-widget .add-new-widget:before,
1605 .adding-menu-items .add-new-menu-item:before,
1606 #accordion-section-add_menu .add-new-menu-item.open:before {
1607         -webkit-transform: rotate(-45deg);
1608         -ms-transform: rotate(-45deg);
1609         transform: rotate(-45deg);
1610 }
1611
1612 #available-widgets,
1613 #available-menu-items {
1614         position: absolute;
1615         top: 0;
1616         bottom: 0;
1617         right: -301px;
1618         visibility: hidden;
1619         overflow-x: hidden;
1620         overflow-y: auto;
1621         width: 300px;
1622         margin: 0;
1623         z-index: 4;
1624         background: #eee;
1625         -webkit-transition: right .18s;
1626         transition: right .18s;
1627         border-left: 1px solid #ddd;
1628 }
1629
1630 #available-widgets .customize-section-title,
1631 #available-menu-items .customize-section-title {
1632         display: none;
1633 }
1634
1635 #available-widgets-list {
1636         top: 60px;
1637         position: absolute;
1638         overflow: auto;
1639         bottom: 0;
1640         width: 100%;
1641         border-top: 1px solid #ddd;
1642 }
1643
1644 .no-widgets-found #available-widgets-list {
1645         border-top: none;
1646 }
1647
1648 #available-widgets-filter {
1649         position: fixed;
1650         top: 0;
1651         z-index: 1;
1652         width: 300px;
1653         background: #eee;
1654 }
1655
1656 /* search field container */
1657 #available-widgets-filter,
1658 #available-menu-items-search .accordion-section-title {
1659         padding: 13px 15px;
1660         -webkit-box-sizing: border-box;
1661         -moz-box-sizing: border-box;
1662         box-sizing: border-box;
1663 }
1664
1665 #available-widgets-filter input,
1666 #available-menu-items-search input {
1667         width: 100%;
1668         height: 32px;
1669         margin: 1px 0;
1670         padding: 6px 30px;
1671 }
1672
1673 #available-widgets-filter input::-ms-clear,
1674 #available-menu-items-search input::-ms-clear {
1675         display: none; /* remove the "x" in IE, which conflicts with the "x" icon on button.clear-results */
1676 }
1677
1678 #available-menu-items-search .search-icon,
1679 #available-widgets-filter .search-icon {
1680         display: block;
1681         position: absolute;
1682         top: 15px; /* 13 container padding +1 input margin +1 input border */
1683         right: 16px;
1684         width: 30px;
1685         height: 30px;
1686         line-height: 28px;
1687         text-align: center;
1688         color: #72777c;
1689 }
1690
1691 #available-widgets-filter .clear-results,
1692 #available-menu-items-search .clear-results {
1693         position: absolute;
1694         top: 15px; /* 13 container padding +1 input margin +1 input border */
1695         left: 16px;
1696         width: 30px;
1697         height: 30px;
1698         padding: 0;
1699         border: 0;
1700         cursor: pointer;
1701         background: none;
1702         color: #a00;
1703         text-decoration: none;
1704         outline: 0;
1705 }
1706
1707 #available-widgets-filter .clear-results,
1708 #available-menu-items-search .clear-results,
1709 #available-menu-items-search.loading .clear-results.is-visible {
1710         display: none;
1711 }
1712
1713 #available-widgets-filter .clear-results.is-visible,
1714 #available-menu-items-search .clear-results.is-visible {
1715         display: block;
1716 }
1717
1718 #available-widgets-filter .clear-results:before,
1719 #available-menu-items-search .clear-results:before {
1720         content: "\f335";
1721         font: normal 20px/1 dashicons;
1722         vertical-align: middle;
1723         -webkit-font-smoothing: antialiased;
1724         -moz-osx-font-smoothing: grayscale;
1725 }
1726
1727 #available-widgets-filter .clear-results:hover,
1728 #available-widgets-filter .clear-results:focus,
1729 #available-menu-items-search .clear-results:hover,
1730 #available-menu-items-search .clear-results:focus {
1731         color: #dc3232;
1732 }
1733
1734 #available-widgets-filter .clear-results:focus,
1735 #available-menu-items-search .clear-results:focus {
1736         -webkit-box-shadow:
1737                 0 0 0 1px #5b9dd9,
1738                 0 0 2px 1px rgba(30, 140, 190, .8);
1739         box-shadow:
1740                 0 0 0 1px #5b9dd9,
1741                 0 0 2px 1px rgba(30, 140, 190, .8);
1742 }
1743
1744 #available-menu-items-search .search-icon:after,
1745 #available-widgets-filter .search-icon:after {
1746         content: "\f179";
1747         font: normal 20px/1 dashicons;
1748         vertical-align: middle;
1749         -webkit-font-smoothing: antialiased;
1750         -moz-osx-font-smoothing: grayscale;
1751 }
1752
1753 .no-widgets-found-message {
1754         display: none;
1755         margin: 0;
1756         padding: 0 15px;
1757         line-height: inherit;
1758 }
1759
1760 .no-widgets-found .no-widgets-found-message {
1761         display: block;
1762 }
1763
1764 #available-widgets .widget-top,
1765 #available-widgets .widget-top:hover,
1766 #available-menu-items .item-top,
1767 #available-menu-items .item-top:hover {
1768         border: none;
1769         background: transparent;
1770         -webkit-box-shadow: none;
1771         box-shadow: none;
1772 }
1773
1774 #available-widgets .widget-tpl,
1775 #available-menu-items .item-tpl {
1776         position: relative;
1777         padding: 20px 60px 20px 15px;
1778         background: #fff;
1779         border-bottom: 1px solid #ddd;
1780         border-right: 4px solid #fff;
1781         -webkit-transition: .15s color ease-in-out,
1782                     .15s background-color ease-in-out,
1783                     .15s border-color ease-in-out;
1784         transition: .15s color ease-in-out,
1785                     .15s background-color ease-in-out,
1786                     .15s border-color ease-in-out;
1787         cursor: pointer;
1788         display: none;
1789 }
1790
1791 #available-widgets .widget,
1792 #available-menu-items .item {
1793         position: static;
1794 }
1795
1796
1797 /* Responsive */
1798 .customize-controls-preview-toggle {
1799         display: none;
1800 }
1801
1802 @media only screen and (max-width: 782px) {
1803         .wp-customizer .theme:not(.active):hover .theme-actions,
1804         .wp-customizer .theme:not(.active):focus .theme-actions {
1805                 display: block;
1806         }
1807
1808         .wp-customizer .theme-browser .theme.active .theme-name span {
1809                 display: inline;
1810         }
1811
1812         .customize-control-radio label,
1813         .customize-control-checkbox label,
1814         .customize-control-nav_menu_auto_add label {
1815                 margin-right: 32px;
1816         }
1817
1818         .customize-control-radio input,
1819         .customize-control-checkbox input,
1820         .customize-control-nav_menu_auto_add input {
1821                 margin-right: -32px;
1822         }
1823
1824         .customize-control input[type="radio"] + label,
1825         .customize-control input[type="checkbox"] + label {
1826                 line-height: 32px;
1827         }
1828 }
1829
1830 @media screen and ( max-width: 640px ) {
1831         #customize-controls {
1832                 width: 100%;
1833         }
1834
1835         .wp-full-overlay.expanded {
1836                 margin-right: 0;
1837         }
1838
1839         /* when the sidebar is collapsed and switching to responsive view,
1840            bring it back see ticket #35220 */
1841         .wp-full-overlay.collapsed #customize-controls {
1842                 margin-right: 0;
1843         }
1844
1845         .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
1846                 bottom: 0;
1847         }
1848
1849         .customize-controls-preview-toggle {
1850                 display: block;
1851                 position: absolute;
1852                 top: 0;
1853                 right: 48px;
1854                 line-height: 45px;
1855                 font-size: 14px;
1856                 padding: 0 12px;
1857                 margin: 0;
1858                 height: 45px;
1859                 background: #eee;
1860                 border: 0;
1861                 border-left: 1px solid #ddd;
1862                 color: #555d66;
1863                 cursor: pointer;
1864                 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
1865                 transition: color .1s ease-in-out, background .1s ease-in-out;
1866         }
1867
1868         #customize-footer-actions,
1869         #customize-preview,
1870         .customize-controls-preview-toggle .controls,
1871         .preview-only .wp-full-overlay-sidebar-content,
1872         .preview-only .customize-controls-preview-toggle .preview {
1873                 display: none;
1874         }
1875
1876         .customize-controls-preview-toggle .preview:before,
1877         .customize-controls-preview-toggle .controls:before {
1878                 font: normal 20px/1 dashicons;
1879                 content: "\f177";
1880                 position: relative;
1881                 top: 4px;
1882                 margin-left: 6px;
1883         }
1884
1885         .customize-controls-preview-toggle .controls:before {
1886                 content: "\f540";
1887         }
1888
1889         .preview-only #customize-controls {
1890                 height: 45px;
1891         }
1892
1893         .preview-only #customize-preview,
1894         .preview-only .customize-controls-preview-toggle .controls {
1895                 display: block;
1896         }
1897
1898         #customize-preview {
1899                 top: 45px;
1900                 bottom: 0;
1901                 height: auto;
1902         }
1903
1904         .wp-core-ui.wp-customizer .button {
1905                 padding: 6px 14px;
1906                 line-height: normal;
1907                 font-size: 14px;
1908                 vertical-align: middle;
1909                 height: auto;
1910                 margin-bottom: 4px;
1911         }
1912
1913         #customize-header-actions .button-primary {
1914                 margin-top: 6px;
1915         }
1916
1917         body.adding-widget div#available-widgets,
1918         body.adding-menu-items div#available-menu-items {
1919                 top: 46px;
1920                 right: 0;
1921                 z-index: 10;
1922                 width: 100%;
1923         }
1924
1925         #available-widgets .customize-section-title,
1926         #available-menu-items .customize-section-title {
1927                 display: block;
1928                 margin: 0;
1929         }
1930
1931         #available-widgets .customize-section-back,
1932         #available-menu-items .customize-section-back {
1933                 height: 69px;
1934         }
1935
1936         #available-widgets .customize-section-title h3,
1937         #available-menu-items .customize-section-title h3 {
1938                 font-size: 20px;
1939                 font-weight: 200;
1940                 padding: 9px 14px 12px 10px;
1941                 margin: 0;
1942                 line-height: 24px;
1943                 color: #555d66;
1944                 display: block;
1945                 overflow: hidden;
1946                 white-space: nowrap;
1947                 text-overflow: ellipsis;
1948         }
1949
1950         #available-widgets .customize-section-title .customize-action,
1951         #available-menu-items .customize-section-title .customize-action {
1952                 font-size: 13px;
1953                 display: block;
1954                 font-weight: 400;
1955                 overflow: hidden;
1956                 white-space: nowrap;
1957                 text-overflow: ellipsis;
1958         }
1959
1960         #available-widgets-filter {
1961                 position: relative;
1962                 width: 100%;
1963                 height: auto;
1964         }
1965
1966         #available-widgets-list {
1967                 top: 130px;
1968         }
1969
1970         #available-menu-items-search .clear-results,
1971         #available-menu-items-search .search-icon {
1972                 top: 85px; /* 70 section title height + 13 container padding +1 input margin +1 input border */
1973         }
1974 }