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