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