[Summary view] [Print] [Text view]

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