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