[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  @media (prefers-reduced-motion: no-preference) {
 265      #customize-preview {
 266          transition: all 0.2s;
 267      }
 268  }
 269  
 270  body.adding-widget #available-widgets {
 271      left: 0;
 272      visibility: visible;
 273  }
 274  
 275  body.adding-widget .wp-full-overlay-main {
 276      left: 300px;
 277  }
 278  
 279  body.adding-widget #customize-preview {
 280      opacity: 0.4;
 281  }
 282  
 283  
 284  /**
 285   * Widget Icon styling
 286   * No plurals in naming.
 287   * Ordered from lowest to highest specificity.
 288   */
 289  
 290  #available-widgets .widget-title {
 291      position: relative;
 292  }
 293  
 294  #available-widgets .widget-title:before {
 295      content: "\f132";
 296      position: absolute;
 297      top: -3px;
 298      right: 100%;
 299      margin-right: 20px;
 300      width: 20px;
 301      height: 20px;
 302      color: #2c3338;
 303      font: normal 20px/1 dashicons;
 304      text-align: center;
 305      box-sizing: border-box;
 306      -webkit-font-smoothing: antialiased;
 307      -moz-osx-font-smoothing: grayscale;
 308  }
 309  
 310  /* dashicons-smiley */
 311  #available-widgets [class*="easy"] .widget-title:before { content: "\f328"; top: -4px; }
 312  
 313  /* dashicons-star-filled */
 314  #available-widgets [class*="super"] .widget-title:before,
 315  #available-widgets [class*="like"] .widget-title:before { content: "\f155"; top: -4px; }
 316  
 317  /* dashicons-wordpress */
 318  #available-widgets [class*="meta"] .widget-title:before { content: "\f120"; }
 319  
 320  /* dashicons-archive */
 321  #available-widgets [class*="archives"] .widget-title:before { content: "\f480"; top: -4px; }
 322  
 323  /* dashicons-category */
 324  #available-widgets [class*="categor"] .widget-title:before { content: "\f318"; top: -4px; }
 325  
 326  /* dashicons-admin-comments */
 327  #available-widgets [class*="comment"] .widget-title:before,
 328  #available-widgets [class*="testimonial"] .widget-title:before,
 329  #available-widgets [class*="chat"] .widget-title:before { content: "\f101"; }
 330  
 331  /* dashicons-admin-post */
 332  #available-widgets [class*="post"] .widget-title:before { content: "\f109"; }
 333  
 334  /* dashicons-admin-page */
 335  #available-widgets [class*="page"] .widget-title:before { content: "\f105"; }
 336  
 337  /* dashicons-text */
 338  #available-widgets [class*="text"] .widget-title:before { content: "\f478"; }
 339  
 340  /* dashicons-admin-links */
 341  #available-widgets [class*="link"] .widget-title:before { content: "\f103"; }
 342  
 343  /* dashicons-search */
 344  #available-widgets [class*="search"] .widget-title:before { content: "\f179"; }
 345  
 346  /* dashicons-menu */
 347  #available-widgets [class*="menu"] .widget-title:before,
 348  #available-widgets [class*="nav"] .widget-title:before { content: "\f333"; }
 349  
 350  /* dashicons-tagcloud */
 351  #available-widgets [class*="tag"] .widget-title:before { content: "\f479"; }
 352  
 353  /* dashicons-rss */
 354  #available-widgets [class*="rss"] .widget-title:before { content: "\f303"; top: -6px; }
 355  
 356  /* dashicons-calendar */
 357  #available-widgets [class*="event"] .widget-title:before,
 358  #available-widgets [class*="calendar"] .widget-title:before { content: "\f145"; top: -4px;}
 359  
 360  /* dashicons-format-image */
 361  #available-widgets [class*="image"] .widget-title:before,
 362  #available-widgets [class*="photo"] .widget-title:before,
 363  #available-widgets [class*="slide"] .widget-title:before,
 364  #available-widgets [class*="instagram"] .widget-title:before { content: "\f128"; }
 365  
 366  /* dashicons-format-gallery */
 367  #available-widgets [class*="album"] .widget-title:before,
 368  #available-widgets [class*="galler"] .widget-title:before { content: "\f161"; }
 369  
 370  /* dashicons-format-video */
 371  #available-widgets [class*="video"] .widget-title:before,
 372  #available-widgets [class*="tube"] .widget-title:before { content: "\f126"; }
 373  
 374  /* dashicons-format-audio */
 375  #available-widgets [class*="music"] .widget-title:before,
 376  #available-widgets [class*="radio"] .widget-title:before,
 377  #available-widgets [class*="audio"] .widget-title:before { content: "\f127"; }
 378  
 379  /* dashicons-admin-users */
 380  #available-widgets [class*="login"] .widget-title:before,
 381  #available-widgets [class*="user"] .widget-title:before,
 382  #available-widgets [class*="member"] .widget-title:before,
 383  #available-widgets [class*="avatar"] .widget-title:before,
 384  #available-widgets [class*="subscriber"] .widget-title:before,
 385  #available-widgets [class*="profile"] .widget-title:before,
 386  #available-widgets [class*="grofile"] .widget-title:before { content: "\f110"; }
 387  
 388  /* dashicons-cart */
 389  #available-widgets [class*="commerce"] .widget-title:before,
 390  #available-widgets [class*="shop"] .widget-title:before,
 391  #available-widgets [class*="cart"] .widget-title:before { content: "\f174"; top: -4px; }
 392  
 393  /* dashicons-shield */
 394  #available-widgets [class*="secur"] .widget-title:before,
 395  #available-widgets [class*="firewall"] .widget-title:before { content: "\f332"; }
 396  
 397  /* dashicons-chart-bar */
 398  #available-widgets [class*="analytic"] .widget-title:before,
 399  #available-widgets [class*="stat"] .widget-title:before,
 400  #available-widgets [class*="poll"] .widget-title:before { content: "\f185"; }
 401  
 402  /* dashicons-feedback */
 403  #available-widgets [class*="form"] .widget-title:before { content: "\f175"; }
 404  
 405  /* dashicons-email-alt */
 406  #available-widgets [class*="subscribe"] .widget-title:before,
 407  #available-widgets [class*="news"] .widget-title:before,
 408  #available-widgets [class*="contact"] .widget-title:before,
 409  #available-widgets [class*="mail"] .widget-title:before { content: "\f466"; }
 410  
 411  /* dashicons-share */
 412  #available-widgets [class*="share"] .widget-title:before,
 413  #available-widgets [class*="socia"] .widget-title:before { content: "\f237"; }
 414  
 415  /* dashicons-translation */
 416  #available-widgets [class*="lang"] .widget-title:before,
 417  #available-widgets [class*="translat"] .widget-title:before { content: "\f326"; }
 418  
 419  /* dashicons-location-alt */
 420  #available-widgets [class*="locat"] .widget-title:before,
 421  #available-widgets [class*="map"] .widget-title:before { content: "\f231"; }
 422  
 423  /* dashicons-download */
 424  #available-widgets [class*="download"] .widget-title:before { content: "\f316"; }
 425  
 426  /* dashicons-cloud */
 427  #available-widgets [class*="weather"] .widget-title:before { content: "\f176"; top: -4px;}
 428  
 429  /* dashicons-facebook */
 430  #available-widgets [class*="facebook"] .widget-title:before { content: "\f304"; }
 431  
 432  /* dashicons-twitter */
 433  #available-widgets [class*="tweet"] .widget-title:before,
 434  #available-widgets [class*="twitter"] .widget-title:before { content: "\f301"; }
 435  
 436  @media screen and (max-height: 700px) and (min-width: 981px) {
 437      /* Compact widget-tops on smaller laptops, but not tablets. See ticket #27112#comment:4 */
 438      .customize-control-widget_form {
 439          margin-bottom: 0;
 440      }
 441  
 442      .widget-top {
 443          box-shadow: none;
 444          margin-top: -1px;
 445      }
 446  
 447      .widget-top:hover {
 448          position: relative;
 449          z-index: 1;
 450      }
 451  
 452      .last-widget {
 453          margin-bottom: 15px;
 454      }
 455  
 456      .widget-title h3 {
 457          padding: 13px 15px;
 458      }
 459  
 460      .widget-top .widget-action {
 461          padding: 8px 10px;
 462      }
 463  
 464      .widget-reorder-nav span {
 465          height: 39px;
 466      }
 467  
 468      .widget-reorder-nav span:before {
 469          line-height: 39px;
 470      }
 471  
 472      /* Compact the move widget areas. */
 473      #customize-theme-controls .widget-area-select li {
 474          padding: 9px 15px 11px 42px;
 475      }
 476  
 477      #customize-theme-controls .widget-area-select li:before {
 478          top: 8px;
 479      }
 480  }