[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: #787c82;
  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  .customize-control-widget_form.wide-widget-control .widget-inside > .form {
  72      padding: 20px;
  73  }
  74  
  75  .customize-control-widget_form.wide-widget-control .widget-top {
  76      transition: background-color 0.4s;
  77  }
  78  .customize-control-widget_form.wide-widget-control.expanding .widget-top,
  79  .customize-control-widget_form.wide-widget-control.expanded:not(.collapsing) .widget-top {
  80      background-color: #dcdcde;
  81  }
  82  
  83  .widget-inside {
  84      padding: 1px 10px 10px;
  85      border-top: none;
  86      line-height: 1.23076923;
  87  }
  88  
  89  .customize-control-widget_form.expanded .widget-action .toggle-indicator:before {
  90      content: "\f142";
  91  }
  92  
  93  .customize-control-widget_form.wide-widget-control .widget-action .toggle-indicator:before {
  94      content: "\f139";
  95  }
  96  
  97  .customize-control-widget_form.wide-widget-control.expanded .widget-action .toggle-indicator:before {
  98      content: "\f141";
  99  }
 100  
 101  .widget-title-action {
 102      cursor: pointer;
 103  }
 104  
 105  .widget-top,
 106  .customize-control-widget_form .widget .customize-control-title {
 107      cursor: move;
 108  }
 109  
 110  .control-section.accordion-section.highlighted > .accordion-section-title,
 111  .customize-control-widget_form.highlighted {
 112      outline: none;
 113      box-shadow: 0 0 2px rgba(79, 148, 212, 0.8);
 114      position: relative;
 115      z-index: 1;
 116  }
 117  
 118  #widget-customizer-control-templates {
 119      display: none;
 120  }
 121  
 122  /**
 123   * Widget reordering styles
 124   */
 125  
 126  #customize-theme-controls .widget-reorder-nav {
 127      display: none;
 128      float: right;
 129      background-color: #f6f7f7;
 130  }
 131  
 132  .move-widget:before {
 133      content: "\f504";
 134  }
 135  
 136  #customize-theme-controls .move-widget-area {
 137      display: none;
 138      background: #fff;
 139      border: 1px solid #c3c4c7;
 140      border-top: none;
 141      cursor: auto;
 142  }
 143  
 144  #customize-theme-controls .reordering .move-widget-area.active {
 145      display: block;
 146  }
 147  
 148  #customize-theme-controls .move-widget-area .description {
 149      margin: 0;
 150      padding: 15px 20px;
 151      font-weight: 400;
 152  }
 153  
 154  #customize-theme-controls .widget-area-select {
 155      margin: 0;
 156      padding: 0;
 157      list-style: none;
 158  }
 159  
 160  #customize-theme-controls .widget-area-select li {
 161      position: relative;
 162      margin: 0;
 163      padding: 13px 15px 15px 42px;
 164      color: #50575e;
 165      border-top: 1px solid #c3c4c7;
 166      cursor: pointer;
 167      -webkit-user-select: none;
 168      user-select: none;
 169  }
 170  
 171  #customize-theme-controls .widget-area-select li:before {
 172      display: none;
 173      content: "\f147";
 174      position: absolute;
 175      top: 12px;
 176      left: 10px;
 177      font: normal 20px/1 dashicons;
 178      -webkit-font-smoothing: antialiased;
 179      -moz-osx-font-smoothing: grayscale;
 180  }
 181  
 182  #customize-theme-controls .widget-area-select li:last-child {
 183      border-bottom: 1px solid #c3c4c7;
 184  }
 185  
 186  #customize-theme-controls .widget-area-select .selected {
 187      color: #fff;
 188      background: #2271b1;
 189  }
 190  
 191  #customize-theme-controls .widget-area-select .selected:before {
 192      display: block;
 193  }
 194  
 195  #customize-theme-controls .move-widget-actions {
 196      text-align: right;
 197      padding: 12px;
 198  }
 199  
 200  #customize-theme-controls .reordering .widget-title-action {
 201      display: none;
 202  }
 203  
 204  #customize-theme-controls .reordering .widget-reorder-nav {
 205      display: block;
 206  }
 207  
 208  /* Text Widget */
 209  .wp-customizer div.mce-inline-toolbar-grp,
 210  .wp-customizer div.mce-tooltip {
 211      z-index: 500100 !important;
 212  }
 213  .wp-customizer .ui-autocomplete.wplink-autocomplete {
 214      z-index: 500110; /* originally 100110, but z-index of .wp-full-overlay is 500000 */
 215  }
 216  .wp-customizer #wp-link-backdrop {
 217      z-index: 500100; /* originally 100100, but z-index of .wp-full-overlay is 500000 */
 218  }
 219  .wp-customizer #wp-link-wrap {
 220      z-index: 500105; /* originally 100105, but z-index of .wp-full-overlay is 500000 */
 221  }
 222  
 223  /**
 224   * Styles for new widget addition panel
 225   */
 226  
 227  /* override widgets admin page rules in wp-admin/css/widgets.css */
 228  #widgets-left #available-widgets .widget {
 229      float: none !important;
 230      width: auto !important;
 231  }
 232  
 233  /* Keep rule that is no longer necessary on widgets.php. */
 234  #available-widgets .widget-action {
 235      display: none;
 236  }
 237  
 238  .ios #available-widgets {
 239      transition: left 0s;
 240  }
 241  
 242  #available-widgets .widget-tpl:hover,
 243  #available-widgets .widget-tpl.selected {
 244      background: #f6f7f7;
 245      border-bottom-color: #c3c4c7;
 246      color: #2271b1;
 247      border-left: 4px solid #2271b1;
 248  }
 249  
 250  #customize-controls .widget-title h3 {
 251      font-size: 1em;
 252  }
 253  
 254  #available-widgets .widget-title h3 {
 255      padding: 0 0 5px;
 256      font-size: 14px;
 257  }
 258  
 259  #available-widgets .widget .widget-description {
 260      padding: 0;
 261      color: #646970;
 262  }
 263  
 264  #customize-preview {
 265      transition: all 0.2s;
 266  }
 267  
 268  body.adding-widget #available-widgets {
 269      left: 0;
 270      visibility: visible;
 271  }
 272  
 273  body.adding-widget .wp-full-overlay-main {
 274      left: 300px;
 275  }
 276  
 277  body.adding-widget #customize-preview {
 278      opacity: 0.4;
 279  }
 280  
 281  
 282  /**
 283   * Widget Icon styling
 284   * No plurals in naming.
 285   * Ordered from lowest to highest specificity.
 286   */
 287  
 288  #available-widgets .widget-title {
 289      position: relative;
 290  }
 291  
 292  #available-widgets .widget-title:before {
 293      content: "\f132";
 294      position: absolute;
 295      top: -3px;
 296      right: 100%;
 297      margin-right: 20px;
 298      width: 20px;
 299      height: 20px;
 300      color: #2c3338;
 301      font: normal 20px/1 dashicons;
 302      text-align: center;
 303      box-sizing: border-box;
 304      -webkit-font-smoothing: antialiased;
 305      -moz-osx-font-smoothing: grayscale;
 306  }
 307  
 308  /* dashicons-smiley */
 309  #available-widgets [class*="easy"] .widget-title:before { content: "\f328"; top: -4px; }
 310  
 311  /* dashicons-star-filled */
 312  #available-widgets [class*="super"] .widget-title:before,
 313  #available-widgets [class*="like"] .widget-title:before { content: "\f155"; top: -4px; }
 314  
 315  /* dashicons-wordpress */
 316  #available-widgets [class*="meta"] .widget-title:before { content: "\f120"; }
 317  
 318  /* dashicons-archive */
 319  #available-widgets [class*="archives"] .widget-title:before { content: "\f480"; top: -4px; }
 320  
 321  /* dashicons-category */
 322  #available-widgets [class*="categor"] .widget-title:before { content: "\f318"; top: -4px; }
 323  
 324  /* dashicons-admin-comments */
 325  #available-widgets [class*="comment"] .widget-title:before,
 326  #available-widgets [class*="testimonial"] .widget-title:before,
 327  #available-widgets [class*="chat"] .widget-title:before { content: "\f101"; }
 328  
 329  /* dashicons-admin-post */
 330  #available-widgets [class*="post"] .widget-title:before { content: "\f109"; }
 331  
 332  /* dashicons-admin-page */
 333  #available-widgets [class*="page"] .widget-title:before { content: "\f105"; }
 334  
 335  /* dashicons-text */
 336  #available-widgets [class*="text"] .widget-title:before { content: "\f478"; }
 337  
 338  /* dashicons-admin-links */
 339  #available-widgets [class*="link"] .widget-title:before { content: "\f103"; }
 340  
 341  /* dashicons-search */
 342  #available-widgets [class*="search"] .widget-title:before { content: "\f179"; }
 343  
 344  /* dashicons-menu */
 345  #available-widgets [class*="menu"] .widget-title:before,
 346  #available-widgets [class*="nav"] .widget-title:before { content: "\f333"; }
 347  
 348  /* dashicons-tagcloud */
 349  #available-widgets [class*="tag"] .widget-title:before { content: "\f479"; }
 350  
 351  /* dashicons-rss */
 352  #available-widgets [class*="rss"] .widget-title:before { content: "\f303"; top: -6px; }
 353  
 354  /* dashicons-calendar */
 355  #available-widgets [class*="event"] .widget-title:before,
 356  #available-widgets [class*="calendar"] .widget-title:before { content: "\f145"; top: -4px;}
 357  
 358  /* dashicons-format-image */
 359  #available-widgets [class*="image"] .widget-title:before,
 360  #available-widgets [class*="photo"] .widget-title:before,
 361  #available-widgets [class*="slide"] .widget-title:before,
 362  #available-widgets [class*="instagram"] .widget-title:before { content: "\f128"; }
 363  
 364  /* dashicons-format-gallery */
 365  #available-widgets [class*="album"] .widget-title:before,
 366  #available-widgets [class*="galler"] .widget-title:before { content: "\f161"; }
 367  
 368  /* dashicons-format-video */
 369  #available-widgets [class*="video"] .widget-title:before,
 370  #available-widgets [class*="tube"] .widget-title:before { content: "\f126"; }
 371  
 372  /* dashicons-format-audio */
 373  #available-widgets [class*="music"] .widget-title:before,
 374  #available-widgets [class*="radio"] .widget-title:before,
 375  #available-widgets [class*="audio"] .widget-title:before { content: "\f127"; }
 376  
 377  /* dashicons-admin-users */
 378  #available-widgets [class*="login"] .widget-title:before,
 379  #available-widgets [class*="user"] .widget-title:before,
 380  #available-widgets [class*="member"] .widget-title:before,
 381  #available-widgets [class*="avatar"] .widget-title:before,
 382  #available-widgets [class*="subscriber"] .widget-title:before,
 383  #available-widgets [class*="profile"] .widget-title:before,
 384  #available-widgets [class*="grofile"] .widget-title:before { content: "\f110"; }
 385  
 386  /* dashicons-cart */
 387  #available-widgets [class*="commerce"] .widget-title:before,
 388  #available-widgets [class*="shop"] .widget-title:before,
 389  #available-widgets [class*="cart"] .widget-title:before { content: "\f174"; top: -4px; }
 390  
 391  /* dashicons-shield */
 392  #available-widgets [class*="secur"] .widget-title:before,
 393  #available-widgets [class*="firewall"] .widget-title:before { content: "\f332"; }
 394  
 395  /* dashicons-chart-bar */
 396  #available-widgets [class*="analytic"] .widget-title:before,
 397  #available-widgets [class*="stat"] .widget-title:before,
 398  #available-widgets [class*="poll"] .widget-title:before { content: "\f185"; }
 399  
 400  /* dashicons-feedback */
 401  #available-widgets [class*="form"] .widget-title:before { content: "\f175"; }
 402  
 403  /* dashicons-email-alt */
 404  #available-widgets [class*="subscribe"] .widget-title:before,
 405  #available-widgets [class*="news"] .widget-title:before,
 406  #available-widgets [class*="contact"] .widget-title:before,
 407  #available-widgets [class*="mail"] .widget-title:before { content: "\f466"; }
 408  
 409  /* dashicons-share */
 410  #available-widgets [class*="share"] .widget-title:before,
 411  #available-widgets [class*="socia"] .widget-title:before { content: "\f237"; }
 412  
 413  /* dashicons-translation */
 414  #available-widgets [class*="lang"] .widget-title:before,
 415  #available-widgets [class*="translat"] .widget-title:before { content: "\f326"; }
 416  
 417  /* dashicons-location-alt */
 418  #available-widgets [class*="locat"] .widget-title:before,
 419  #available-widgets [class*="map"] .widget-title:before { content: "\f231"; }
 420  
 421  /* dashicons-download */
 422  #available-widgets [class*="download"] .widget-title:before { content: "\f316"; }
 423  
 424  /* dashicons-cloud */
 425  #available-widgets [class*="weather"] .widget-title:before { content: "\f176"; top: -4px;}
 426  
 427  /* dashicons-facebook */
 428  #available-widgets [class*="facebook"] .widget-title:before { content: "\f304"; }
 429  
 430  /* dashicons-twitter */
 431  #available-widgets [class*="tweet"] .widget-title:before,
 432  #available-widgets [class*="twitter"] .widget-title:before { content: "\f301"; }
 433  
 434  @media screen and (max-height: 700px) and (min-width: 981px) {
 435      /* Compact widget-tops on smaller laptops, but not tablets. See ticket #27112#comment:4 */
 436      .customize-control-widget_form {
 437          margin-bottom: 0;
 438      }
 439  
 440      .widget-top {
 441          box-shadow: none;
 442          margin-top: -1px;
 443      }
 444  
 445      .widget-top:hover {
 446          position: relative;
 447          z-index: 1;
 448      }
 449  
 450      .last-widget {
 451          margin-bottom: 15px;
 452      }
 453  
 454      .widget-title h3 {
 455          padding: 13px 15px;
 456      }
 457  
 458      .widget-top .widget-action {
 459          padding: 8px 10px;
 460      }
 461  
 462      .widget-reorder-nav span {
 463          height: 39px;
 464      }
 465  
 466      .widget-reorder-nav span:before {
 467          line-height: 39px;
 468      }
 469  
 470      /* Compact the move widget areas. */
 471      #customize-theme-controls .widget-area-select li {
 472          padding: 9px 15px 11px 42px;
 473      }
 474  
 475      #customize-theme-controls .widget-area-select li:before {
 476          top: 8px;
 477      }
 478  }