[Summary view] [Print] [Text view]

   1  /*! This file is auto-generated */
   2  /*------------------------------------------------------------------------------
   3    16.0 - Themes
   4  ------------------------------------------------------------------------------*/
   5  
   6  
   7  /*------------------------------------------------------------------------------
   8    16.1 - Manage Themes
   9  ------------------------------------------------------------------------------*/
  10  
  11  .themes-php {
  12      overflow-y: scroll;
  13  }
  14  
  15  .themes-php #adminmenuwrap {
  16      z-index: 10001; /* above Theme Overlay */
  17  }
  18  
  19  body.js .theme-browser.search-loading {
  20      display: none;
  21  }
  22  
  23  .theme-browser .themes {
  24      clear: both;
  25  }
  26  
  27  .themes-php .wrap h1 .button {
  28      margin-right: 20px;
  29  }
  30  
  31  /* Search form */
  32  .themes-php .search-form {
  33      display: inline-flex;
  34      align-items: center;
  35      position: relative;
  36      top: 0;
  37      gap: .5rem;
  38      width: 100%;
  39      justify-content: end;
  40  }
  41  
  42  .themes-php .wp-filter-search {
  43      position: relative;
  44      margin: 0;
  45      width: 280px;
  46  }
  47  
  48  /* Position admin messages */
  49  .theme .notice,
  50  .theme .notice.is-dismissible {
  51      right: 0;
  52      margin: 0;
  53      position: absolute;
  54      left: 0;
  55      top: 0;
  56  }
  57  
  58  /**
  59   * Main theme element
  60   * (has flexible margins)
  61   */
  62  .theme-browser .theme {
  63      cursor: pointer;
  64      float: right;
  65      margin: 0 0 4% 4%;
  66      position: relative;
  67      width: 30.6%;
  68      background: #ffffff;
  69      border: 1px solid rgb(0, 0, 0, 0.1);
  70      border-radius: 8px;
  71      box-sizing: border-box;
  72      overflow: hidden;
  73  }
  74  
  75  .theme-browser .theme:nth-child(3n) {
  76      margin-left: 0;
  77  }
  78  
  79  .theme-browser .theme:hover,
  80  .theme-browser .theme.focus {
  81      cursor: pointer;
  82  }
  83  
  84  .theme-browser .theme .theme-name {
  85      font-size: 15px;
  86      font-weight: 600;
  87      height: 18px;
  88      margin: 0;
  89      padding: 16px 15px;
  90      border-top: 1px solid rgb(0, 0, 0, 0.1);
  91      overflow: hidden;
  92      white-space: nowrap;
  93      text-overflow: ellipsis;
  94      background: #ffffff;
  95  }
  96  
  97  /* Activate and Customize buttons, shown on hover and focus */
  98  .theme-browser .theme .theme-actions {
  99      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 100      opacity: 0;
 101      transition: opacity 0.1s ease-in-out;
 102      height: auto;
 103      background: rgba(246, 247, 247, 0.7);
 104      border-right: 1px solid rgba(0, 0, 0, 0.05);
 105  }
 106  
 107  .theme-browser .theme:hover .theme-actions,
 108  .theme-browser .theme.focus .theme-actions {
 109      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 110      opacity: 1;
 111  }
 112  
 113  .theme-browser .theme .theme-actions .button-primary {
 114      margin-left: 3px;
 115  }
 116  
 117  /* Use compact size for space-constrained theme cards */
 118  .theme-browser .theme .theme-actions .button.updated-message,
 119  .theme-browser .theme .theme-actions .button.updating-message,
 120  .theme-browser .theme .theme-actions .button {
 121      float: none;
 122      margin-right: 3px;
 123      min-height: 32px;
 124      line-height: 2.30769231; /* 30px for 32px min-height */
 125      padding: 0 12px;
 126  }
 127  
 128  .theme-browser .theme .theme-actions .button.updated-message::before,
 129  .theme-browser .theme .theme-actions .button.updating-message::before {
 130      line-height: 1;
 131      vertical-align: text-bottom;
 132      position: relative;
 133      top: 2px;
 134  }
 135  
 136  /* Secondary buttons need white background for visibility on semi-transparent overlay */
 137  .theme-browser .theme .theme-actions .button:not(.button-primary) {
 138      background: #fff;
 139  }
 140  
 141  .theme-browser .theme .theme-actions .button:not(.button-primary):hover {
 142      background: #f0f0f0;
 143  }
 144  
 145  .theme-browser .theme .theme-actions .button:not(.button-primary):focus {
 146      background: #fff;
 147  }
 148  
 149  /**
 150   * Theme Screenshot
 151   *
 152   * Has a fixed aspect ratio of 1.5 to 1 regardless of screenshot size
 153   * It is also responsive.
 154   */
 155  .theme-browser .theme .theme-screenshot {
 156      display: block;
 157      overflow: hidden;
 158      position: relative;
 159      -webkit-backface-visibility: hidden; /* Prevents flicker of the screenshot on hover. */
 160      transition: opacity 0.2s ease-in-out;
 161  }
 162  
 163  .theme-browser .theme .theme-screenshot:after {
 164      content: "";
 165      display: block;
 166      padding-top: 66.66666%; /* using a 3/2 aspect ratio */
 167  }
 168  
 169  .theme-browser .theme .theme-screenshot img {
 170      height: auto;
 171      position: absolute;
 172      right: 0;
 173      top: 0;
 174      width: 100%;
 175      transition: opacity 0.2s ease-in-out;
 176  }
 177  
 178  .theme-browser .theme:hover .theme-screenshot,
 179  .theme-browser .theme.focus .theme-screenshot {
 180      background: #fff;
 181  }
 182  
 183  .theme-browser.rendered .theme:hover .theme-screenshot img,
 184  .theme-browser.rendered .theme.focus .theme-screenshot img {
 185      opacity: 0.4;
 186  }
 187  
 188  .theme-browser .theme .more-details {
 189      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 190      opacity: 0;
 191      position: absolute;
 192      top: 35%;
 193      left: 20%;
 194      right: 20%;
 195      width: 60%;
 196      background: #1d2327;
 197      background: rgba(0, 0, 0, 0.7);
 198      color: #fff;
 199      font-size: 15px;
 200      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
 201      -webkit-font-smoothing: antialiased;
 202      font-weight: 600;
 203      padding: 15px 12px;
 204      text-align: center;
 205      border-radius: 3px;
 206      border: none;
 207      transition: opacity 0.1s ease-in-out;
 208      cursor: pointer;
 209  }
 210  
 211  .theme-browser .theme .more-details:focus {
 212      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
 213  }
 214  
 215  .theme-browser .theme.focus {
 216      border-color: var(--wp-admin-theme-color);
 217      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
 218      /* Only visible in Windows High Contrast mode */
 219      outline: 2px solid transparent;
 220  }
 221  
 222  .theme-browser .theme.focus .more-details {
 223      opacity: 1;
 224  }
 225  
 226  /* Current theme needs to have its action always on view */
 227  .theme-browser .theme.active.focus .theme-actions {
 228      display: block;
 229  }
 230  
 231  .theme-browser.rendered .theme:hover .more-details,
 232  .theme-browser.rendered .theme.focus .more-details {
 233      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 234      opacity: 1;
 235  }
 236  
 237  /**
 238   * The currently active theme
 239   */
 240  .theme-browser .theme.active .theme-name {
 241      background: #1d2327;
 242      color: #fff;
 243      padding-left: 115px;
 244      font-weight: 300;
 245      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
 246  }
 247  
 248  .theme-browser .customize-control .theme.active .theme-name {
 249      padding-left: 15px;
 250  }
 251  
 252  .theme-browser .theme.active .theme-name span {
 253      font-weight: 600;
 254  }
 255  
 256  .theme-browser .theme.active .theme-actions {
 257      background: transparent;
 258      border-right: none;
 259      opacity: 1;
 260  }
 261  
 262  .theme-browser .theme.active .theme-actions .button-primary {
 263      border-color: #fff;
 264  }
 265  
 266  .theme-id-container {
 267      position: relative;
 268  }
 269  
 270  .theme-browser .theme.active .theme-actions,
 271  .theme-browser .theme .theme-actions {
 272      position: absolute;
 273      top: 50%;
 274      transform: translateY(-50%);
 275      left: 0;
 276      padding: 9px 12px;
 277  }
 278  
 279  .theme-browser .theme:not(.active) .theme-actions {
 280      box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
 281  }
 282  
 283  .theme-browser .theme.active .theme-actions .button-primary {
 284      margin-left: 0;
 285  }
 286  
 287  /* Active theme secondary buttons need white background for visibility on dark overlay */
 288  .theme-browser .theme.active .theme-actions .button:not(.button-primary) {
 289      background: #fff;
 290  }
 291  
 292  .theme-browser .theme.active .theme-actions .button:not(.button-primary):hover {
 293      background: #f0f0f0;
 294  }
 295  
 296  .theme-browser .theme.active .theme-actions .button:not(.button-primary):focus {
 297      background: #fff;
 298  }
 299  
 300  .theme-browser .theme .theme-author {
 301      background: #1d2327;
 302      color: #f0f0f1;
 303      display: none;
 304      font-size: 14px;
 305      margin: 0 10px;
 306      padding: 5px 10px;
 307      position: absolute;
 308      bottom: 56px;
 309  }
 310  
 311  .theme-browser .theme.display-author .theme-author {
 312      display: block;
 313  }
 314  
 315  .theme-browser .theme.display-author .theme-author a {
 316      color: inherit;
 317  }
 318  
 319  /**
 320   * Add new theme
 321   */
 322  .theme-browser .theme.add-new-theme {
 323      background: transparent;
 324      border: none;
 325      overflow: visible;
 326  }
 327  
 328  .theme-browser .theme.add-new-theme a {
 329      text-decoration: none;
 330      display: block;
 331      position: relative;
 332      z-index: 1;
 333  }
 334  
 335  .theme-browser .theme.add-new-theme a:after {
 336      display: block;
 337      content: "";
 338      background: transparent;
 339      background: rgba(0, 0, 0, 0);
 340      position: absolute;
 341      top: 0;
 342      right: 0;
 343      left: 0;
 344      bottom: 0;
 345      padding: 0;
 346      text-shadow: none;
 347      border: 5px dashed #dcdcde;
 348      border: 5px dashed rgba(0, 0, 0, 0.1);
 349      box-sizing: border-box;
 350  }
 351  
 352  .theme-browser .theme.add-new-theme span:after {
 353      background: #dcdcde;
 354      background: rgba(140, 143, 148, 0.1);
 355      border-radius: 50%;
 356      display: inline-block;
 357      content: "\f132";
 358      content: "\f132" / '';
 359      -webkit-font-smoothing: antialiased;
 360      font: normal 74px/115px dashicons;
 361      width: 100px;
 362      height: 100px;
 363      vertical-align: middle;
 364      text-align: center;
 365      color: #8c8f94;
 366      position: absolute;
 367      top: 30%;
 368      right: 50%;
 369      margin-right: -50px;
 370      text-indent: -4px;
 371      padding: 0;
 372      text-shadow: none;
 373      z-index: 4;
 374  }
 375  
 376  .rtl .theme-browser .theme.add-new-theme span:after {
 377      text-indent: 4px;
 378  }
 379  
 380  .theme-browser .theme.add-new-theme a:hover .theme-screenshot,
 381  .theme-browser .theme.add-new-theme a:focus .theme-screenshot {
 382      background: none;
 383  }
 384  
 385  .theme-browser .theme.add-new-theme a:hover span:after,
 386  .theme-browser .theme.add-new-theme a:focus span:after {
 387      background: #fff;
 388      color: #2271b1;
 389  }
 390  
 391  .theme-browser .theme.add-new-theme a:hover:after,
 392  .theme-browser .theme.add-new-theme a:focus:after {
 393      border-color: transparent;
 394      color: #fff;
 395      background: #2271b1;
 396      content: "";
 397  }
 398  
 399  .theme-browser .theme.add-new-theme .theme-name {
 400      background: none;
 401      border: none;
 402      text-align: center;
 403      font-weight: 400;
 404      position: relative;
 405      top: 0;
 406      margin-top: -18px;
 407      padding-top: 0;
 408      padding-bottom: 48px;
 409  }
 410  
 411  .theme-browser .theme.add-new-theme a:hover .theme-name,
 412  .theme-browser .theme.add-new-theme a:focus .theme-name {
 413      color: #fff;
 414      z-index: 2;
 415  }
 416  
 417  /**
 418   * Theme Overlay
 419   * Shown when clicking a theme
 420   */
 421  .theme-overlay .theme-backdrop {
 422      position: absolute;
 423      right: -20px;
 424      left: 0;
 425      top: 0;
 426      bottom: 0;
 427      background: #f0f0f1;
 428      background: rgba(240, 240, 241, 0.9);
 429      z-index: 10000; /* Over WP Pointers. */
 430      min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
 431  }
 432  
 433  .theme-overlay .theme-header {
 434      position: absolute;
 435      top: 0;
 436      right: 0;
 437      left: 0;
 438      height: 48px;
 439      border-bottom: 1px solid #dcdcde;
 440  }
 441  
 442  .theme-overlay .theme-header button {
 443      padding: 0;
 444  }
 445  
 446  .theme-overlay .theme-header .close {
 447      cursor: pointer;
 448      height: 48px;
 449      width: 50px;
 450      text-align: center;
 451      float: left;
 452      border: 0;
 453      border-right: 1px solid #dcdcde;
 454      background-color: transparent;
 455      transition: color .1s ease-in-out, background .1s ease-in-out;
 456  }
 457  
 458  .theme-overlay .theme-header .close:before {
 459      font: normal 22px/50px dashicons !important;
 460      color: #787c82;
 461      display: inline-block;
 462      content: "\f335";
 463      content: "\f335" / '';
 464      font-weight: 300;
 465  }
 466  
 467  /* Left and right navigation */
 468  .theme-overlay .theme-header .right,
 469  .theme-overlay .theme-header .left {
 470      cursor: pointer;
 471      color: #787c82;
 472      background-color: transparent;
 473      height: 48px;
 474      width: 54px;
 475      float: right;
 476      text-align: center;
 477      border: 0;
 478      border-left: 1px solid #dcdcde;
 479      transition: color .1s ease-in-out, background .1s ease-in-out;
 480  }
 481  
 482  .theme-overlay .theme-header .close:focus,
 483  .theme-overlay .theme-header .close:hover,
 484  .theme-overlay .theme-header .right:focus,
 485  .theme-overlay .theme-header .right:hover,
 486  .theme-overlay .theme-header .left:focus,
 487  .theme-overlay .theme-header .left:hover {
 488      background: #dcdcde;
 489      border-color: #c3c4c7;
 490      color: #000;
 491  }
 492  
 493  .theme-overlay .theme-header .close:focus:before,
 494  .theme-overlay .theme-header .close:hover:before {
 495      color: #000;
 496  }
 497  
 498  .theme-overlay .theme-header .close:focus,
 499  .theme-overlay .theme-header .right:focus,
 500  .theme-overlay .theme-header .left:focus {
 501      box-shadow: none;
 502      outline: none;
 503  }
 504  
 505  .theme-overlay .theme-header .left.disabled,
 506  .theme-overlay .theme-header .right.disabled,
 507  .theme-overlay .theme-header .left.disabled:hover,
 508  .theme-overlay .theme-header .right.disabled:hover {
 509      color: #c3c4c7;
 510      background: inherit;
 511      cursor: inherit;
 512  }
 513  
 514  .theme-overlay .theme-header .right:before,
 515  .theme-overlay .theme-header .left:before {
 516      font: normal 20px/50px dashicons !important;
 517      display: inline;
 518      font-weight: 300;
 519  }
 520  
 521  .theme-overlay .theme-header .left:before {
 522      content: "\f345";
 523      content: "\f341" / '';
 524  }
 525  
 526  .theme-overlay .theme-header .right:before {
 527      content: "\f341";
 528      content: "\f345" / '';
 529  }
 530  
 531  .theme-overlay .theme-wrap {
 532      clear: both;
 533      position: fixed;
 534      top: 9%;
 535      right: 190px;
 536      left: 30px;
 537      bottom: 3%;
 538      background: #fff;
 539      box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
 540      z-index: 10000; /* Over WP Pointers. */
 541      box-sizing: border-box;
 542      -webkit-overflow-scrolling: touch;
 543  }
 544  
 545  body.folded .theme-browser ~ .theme-overlay .theme-wrap {
 546      right: 70px;
 547  }
 548  
 549  .theme-overlay .theme-about {
 550      position: absolute;
 551      top: 49px;
 552      bottom: 57px;
 553      right: 0;
 554      left: 0;
 555      overflow: auto;
 556      padding: 2% 4%;
 557  }
 558  
 559  .theme-overlay .theme-actions {
 560      position: absolute;
 561      text-align: center;
 562      bottom: 0;
 563      right: 0;
 564      left: 0;
 565      padding: 10px 25px 5px;
 566      background: #f6f7f7;
 567      z-index: 30;
 568      box-sizing: border-box;
 569      border-top: 1px solid #f0f0f1;
 570      display: flex;
 571      justify-content: center;
 572      gap: 5px;
 573  }
 574  
 575  .theme-overlay .theme-actions .button {
 576      margin-bottom: 5px;
 577  }
 578  
 579  /* Hide-if-customize for items we can't add classes to */
 580  .customize-support .theme-overlay .theme-actions a[href="themes.php?page=custom-header"],
 581  .customize-support .theme-overlay .theme-actions a[href="themes.php?page=custom-background"] {
 582      display: none;
 583  }
 584  
 585  .broken-themes a.delete-theme,
 586  .theme-overlay .theme-actions .delete-theme {
 587      color: #b32d2e;
 588      text-decoration: none;
 589      border-color: transparent;
 590      box-shadow: none;
 591      background: transparent;
 592  }
 593  
 594  .broken-themes a.delete-theme:hover,
 595  .broken-themes a.delete-theme:focus,
 596  .theme-overlay .theme-actions .delete-theme:hover,
 597  .theme-overlay .theme-actions .delete-theme:focus {
 598      background: #b32d2e;
 599      color: #fff;
 600      border-color: #b32d2e;
 601      box-shadow: 0 0 0 1px #b32d2e;
 602  }
 603  
 604  .theme-overlay .theme-actions .active-theme,
 605  .theme-overlay.active .theme-actions .inactive-theme {
 606      display: none;
 607  }
 608  
 609  .theme-overlay .theme-actions .inactive-theme,
 610  .theme-overlay.active .theme-actions .active-theme {
 611      display: block;
 612  }
 613  
 614  /**
 615   * Theme Screenshots gallery
 616   */
 617  .theme-overlay .theme-screenshots {
 618      float: right;
 619      margin: 0 0 0 30px;
 620      width: 55%;
 621      max-width: 1200px; /* Recommended theme screenshot width, set here to avoid stretching */
 622      text-align: center;
 623  }
 624  
 625  /* First screenshot, shown big */
 626  .theme-overlay .screenshot {
 627      border: 1px solid #fff;
 628      box-sizing: border-box;
 629      overflow: hidden;
 630      position: relative;
 631      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
 632  }
 633  
 634  .theme-overlay .screenshot:after {
 635      content: "";
 636      display: block;
 637      padding-top: 75%; /* using a 4/3 aspect ratio */
 638  }
 639  
 640  .theme-overlay .screenshot img {
 641      height: auto;
 642      position: absolute;
 643      right: 0;
 644      top: 0;
 645      width: 100%;
 646  }
 647  /* Handles old 300px screenshots */
 648  .theme-overlay.small-screenshot .theme-screenshots {
 649      position: absolute;
 650      width: 302px;
 651  }
 652  .theme-overlay.small-screenshot .theme-info {
 653      margin-right: 350px;
 654      width: auto;
 655  }
 656  
 657  /* Other screenshots, shown small and square */
 658  .theme-overlay .screenshot.thumb {
 659      background: #c3c4c7;
 660      border: 1px solid #f0f0f1;
 661      float: none;
 662      display: inline-block;
 663      margin: 10px 5px 0;
 664      width: 140px;
 665      height: 80px;
 666      cursor: pointer;
 667  }
 668  
 669  .theme-overlay .screenshot.thumb:after {
 670      content: "";
 671      display: block;
 672      padding-top: 100%; /* using a 1/1 aspect ratio */
 673  }
 674  
 675  .theme-overlay .screenshot.thumb img {
 676      cursor: pointer;
 677      height: auto;
 678      position: absolute;
 679      right: 0;
 680      top: 0;
 681      width: 100%;
 682      height: auto;
 683  }
 684  
 685  .theme-overlay .screenshot.selected {
 686      background: transparent;
 687      border: 2px solid #72aee6;
 688  }
 689  
 690  .theme-overlay .screenshot.selected img {
 691      opacity: 0.8;
 692  }
 693  
 694  /* No screenshot placeholder */
 695  .theme-browser .theme .theme-screenshot.blank,
 696  .theme-overlay .screenshot.blank {
 697      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=);
 698  }
 699  
 700  /**
 701   * Theme heading information
 702   */
 703  .theme-overlay .theme-info {
 704      width: 40%;
 705      float: right;
 706  }
 707  
 708  .theme-overlay .current-label {
 709      background: #2c3338;
 710      color: #fff;
 711      font-size: 11px;
 712      display: inline-block;
 713      padding: 2px 8px;
 714      border-radius: 2px;
 715      margin: 0 0 -10px;
 716      -webkit-user-select: none;
 717      user-select: none;
 718  }
 719  
 720  .theme-overlay .theme-name {
 721      color: #1d2327;
 722      font-size: 32px;
 723      font-weight: 100;
 724      margin: 10px 0 0;
 725      line-height: 1.3;
 726      word-wrap: break-word;
 727      overflow-wrap: break-word;
 728  }
 729  
 730  .theme-overlay .theme-version {
 731      color: #646970;
 732      font-size: 13px;
 733      font-weight: 400;
 734      float: none;
 735      display: inline-block;
 736      margin-right: 10px;
 737  }
 738  
 739  .theme-overlay .theme-author {
 740      margin: 15px 0 25px;
 741      color: #646970;
 742      font-size: 16px;
 743      font-weight: 400;
 744      line-height: inherit;
 745  }
 746  
 747  .theme-overlay .toggle-auto-update {
 748      /* Better align spin icon and text. */
 749      display: inline-flex;
 750      align-items: center;
 751      /* Prevents content after the auto-update toggler from jumping down and up. */
 752      min-height: 20px; /* Same height as the spinning dashicon. */
 753      vertical-align: top;
 754  }
 755  
 756  .theme-overlay .theme-autoupdate .toggle-auto-update {
 757      text-decoration: none;
 758  }
 759  
 760  .theme-overlay .theme-autoupdate .toggle-auto-update .label {
 761      text-decoration: underline;
 762  }
 763  
 764  .theme-overlay .theme-description {
 765      color: #50575e;
 766      font-size: 15px;
 767      font-weight: 400;
 768      line-height: 1.5;
 769      margin: 30px 0 0;
 770  }
 771  
 772  .theme-overlay .theme-tags {
 773      border-top: 3px solid #f0f0f1;
 774      color: #646970;
 775      font-size: 13px;
 776      font-weight: 400;
 777      margin: 30px 0 0;
 778      padding-top: 20px;
 779  }
 780  
 781  .theme-overlay .theme-tags span {
 782      color: #3c434a;
 783      font-weight: 600;
 784      margin-left: 5px;
 785  }
 786  
 787  .theme-overlay .parent-theme {
 788      background: #fff;
 789      border: 1px solid #f0f0f1;
 790      border-right: 4px solid #72aee6;
 791      font-size: 14px;
 792      font-weight: 400;
 793      margin-top: 30px;
 794      padding: 10px 20px 10px 10px;
 795  }
 796  
 797  .theme-overlay .parent-theme strong {
 798      font-weight: 600;
 799  }
 800  
 801  /**
 802   * Single Theme Mode
 803   * Displays detailed view inline when a user has no switch capabilities
 804   */
 805  .single-theme .theme-overlay .theme-backdrop,
 806  .single-theme .theme-overlay .theme-header,
 807  .single-theme .theme {
 808      display: none;
 809  }
 810  
 811  .single-theme .theme-overlay .theme-wrap {
 812      clear: both;
 813      min-height: 330px;
 814      position: relative;
 815      right: auto;
 816      left: auto;
 817      top: auto;
 818      bottom: auto;
 819      z-index: 10;
 820  }
 821  
 822  .single-theme .theme-overlay .theme-about {
 823      padding: 30px 30px 70px;
 824      position: static;
 825  }
 826  
 827  .single-theme .theme-overlay .theme-actions {
 828      position: absolute;
 829  }
 830  
 831  /**
 832   * Basic Responsive structure...
 833   *
 834   * Shuffles theme columns around based on screen width
 835   */
 836  
 837  @media only screen and (min-width: 2000px) {
 838      #wpwrap .theme-browser .theme {
 839          width: 17.6%;
 840          margin: 0 0 3% 3%;
 841      }
 842  
 843      #wpwrap .theme-browser .theme:nth-child(3n),
 844      #wpwrap .theme-browser .theme:nth-child(4n) {
 845          margin-left: 3%;
 846      }
 847  
 848      #wpwrap .theme-browser .theme:nth-child(5n) {
 849          margin-left: 0;
 850      }
 851  }
 852  
 853  @media only screen and (min-width: 1680px) {
 854      .theme-overlay .theme-wrap {
 855          width: 1450px;
 856          margin: 0 auto;
 857      }
 858  }
 859  
 860  /* Maximum screenshot width reaches 440px */
 861  @media only screen and (min-width: 1640px) {
 862      .theme-browser .theme {
 863          width: 22.7%;
 864          margin: 0 0 3% 3%;
 865      }
 866      .theme-browser .theme .theme-screenshot:after {
 867          padding-top: 75%; /* using a 4/3 aspect ratio */
 868      }
 869  
 870      .theme-browser .theme:nth-child(3n) {
 871          margin-left: 3%;
 872      }
 873  
 874      .theme-browser .theme:nth-child(4n) {
 875          margin-left: 0;
 876      }
 877  }
 878  /* Maximum screenshot width reaches 440px */
 879  @media only screen and (max-width: 1120px) {
 880      .theme-browser .theme {
 881          width: 47.5%;
 882          margin-left: 0;
 883      }
 884  
 885      .theme-browser .theme:nth-child(even) {
 886          margin-left: 0;
 887      }
 888  
 889      .theme-browser .theme:nth-child(odd) {
 890          margin-left: 5%;
 891      }
 892  }
 893  
 894  /* Admin menu is folded */
 895  @media only screen and (max-width: 960px) {
 896      .theme-overlay .theme-wrap {
 897          right: 65px;
 898      }
 899  }
 900  
 901  @media only screen and (max-width: 782px) {
 902      body.folded .theme-overlay .theme-wrap,
 903      .theme-overlay .theme-wrap {
 904          top: 0; /* The adminmenu isn't fixed on mobile, so this can use the full viewport height */
 905          left: 0;
 906          bottom: 0;
 907          right: 0;
 908          padding: 70px 20px 20px;
 909          border: none;
 910          z-index: 100000; /* should overlap #wpadminbar. */
 911          position: fixed;
 912      }
 913  
 914      .theme-browser .theme.active .theme-name span {
 915          /* Hide the "Active: " label on smaller screens. */
 916          display: none;
 917      }
 918  
 919      .theme-overlay .theme-screenshots {
 920          width: 40%;
 921      }
 922  
 923      .theme-overlay .theme-info {
 924          width: 50%;
 925      }
 926      .single-theme .theme-wrap {
 927          padding: 10px;
 928      }
 929  
 930      .theme-browser .theme .theme-actions {
 931          padding: 5px 10px 4px;
 932      }
 933  
 934      .theme-overlay.small-screenshot .theme-screenshots {
 935          position: static;
 936          float: none;
 937          max-width: 302px;
 938      }
 939  
 940      .theme-overlay.small-screenshot .theme-info {
 941          margin-right: 0;
 942          width: auto;
 943      }
 944  
 945      .theme:not(.active):hover .theme-actions,
 946      .theme:not(.active):focus .theme-actions,
 947      .theme:hover .more-details,
 948      .theme.focus .more-details {
 949          display: none;
 950      }
 951  
 952      .theme-browser.rendered .theme:hover .theme-screenshot img,
 953      .theme-browser.rendered .theme.focus .theme-screenshot img {
 954          opacity: 1.0;
 955      }
 956  }
 957  
 958  @media only screen and (max-width: 480px) {
 959      .theme-browser .theme {
 960          width: 100%;
 961          margin-left: 0;
 962      }
 963  
 964      .theme-browser .theme:nth-child(2n),
 965      .theme-browser .theme:nth-child(3n) {
 966          margin-left: 0;
 967      }
 968  
 969      .theme-overlay .theme-about {
 970          bottom: 105px;
 971      }
 972  
 973      .theme-overlay .theme-actions {
 974          padding-right: 4%;
 975          padding-left: 4%;
 976      }
 977  
 978      .theme-install-php .wp-filter .filter-count {
 979          margin-top: 10px;
 980      }
 981  }
 982  
 983  @media only screen and (max-width: 650px) {
 984      .theme-overlay .theme-description {
 985          margin-right: 0;
 986      }
 987  
 988      .theme-overlay .theme-actions .delete-theme {
 989          position: relative;
 990          left: auto;
 991          bottom: auto;
 992      }
 993  
 994      .theme-overlay .theme-actions .inactive-theme {
 995          display: inline;
 996      }
 997  
 998      .theme-overlay .theme-screenshots {
 999          width: 100%;
1000          float: none;
1001          margin: 0;
1002      }
1003  
1004      .theme-overlay .theme-info {
1005          width: 100%;
1006      }
1007  
1008      .theme-overlay .theme-author {
1009          margin: 5px 0 15px;
1010      }
1011  
1012      .theme-overlay .current-label {
1013          margin-top: 10px;
1014          font-size: 13px;
1015      }
1016  
1017      .themes-php .wp-filter-search {
1018          width: 100%;
1019      }
1020  
1021      .theme-install-php .wp-filter p.search-box {
1022          display: grid;
1023          row-gap: .5rem;
1024      }
1025  
1026      .theme-browser .theme.add-new-theme span:after {
1027          font: normal 60px/90px dashicons;
1028          width: 80px;
1029          height: 80px;
1030          top: 30%;
1031          right: 50%;
1032          text-indent: 0;
1033          margin-right: -40px;
1034      }
1035  
1036      .single-theme .theme-wrap {
1037          margin: 0 -10px 0 -12px;
1038          padding: 10px;
1039      }
1040      .single-theme .theme-overlay .theme-about {
1041          padding: 10px;
1042          overflow: visible;
1043      }
1044      .single-theme .current-label {
1045          display: none;
1046      }
1047      .single-theme .theme-overlay .theme-actions {
1048          position: static;
1049      }
1050  }
1051  
1052  .broken-themes {
1053      clear: both;
1054  }
1055  
1056  .broken-themes table {
1057      text-align: right;
1058      width: 50%;
1059      border-spacing: 3px;
1060      padding: 3px;
1061  }
1062  
1063  
1064  /*------------------------------------------------------------------------------
1065    16.2 - Install Themes
1066  ------------------------------------------------------------------------------*/
1067  
1068  .update-php .wrap {
1069      max-width: 40rem;
1070  }
1071  
1072  /* Already installed theme */
1073  .theme-browser .theme .theme-installed {
1074      background: #2271b1;
1075  }
1076  
1077  .theme-browser .theme .notice-success p:before {
1078      color: #68de7c;
1079      content: "\f147";
1080      content: "\f147" / '';
1081      display: inline-block;
1082      font: normal 20px/1 'dashicons';
1083      -webkit-font-smoothing: antialiased;
1084      -moz-osx-font-smoothing: grayscale;
1085      vertical-align: top;
1086  }
1087  
1088  .theme-install.updated-message:before {
1089      content: "";
1090  }
1091  
1092  .theme-install-php .wp-filter {
1093      padding-right: 20px;
1094  }
1095  
1096  /* Override column gap adjustment in media library. */
1097  @media only screen and (max-width: 1000px) {
1098      .theme-install-php .wp-filter p.search-box {
1099          column-gap: .5rem;
1100      }
1101  }
1102  
1103  .theme-install-php a.upload,
1104  .theme-install-php a.browse-themes {
1105      cursor: pointer;
1106  }
1107  
1108  .upload-view-toggle .browse,
1109  .plugin-install-tab-upload .upload-view-toggle .upload {
1110      display: none;
1111  }
1112  
1113  .plugin-install-tab-upload .upload-view-toggle .browse {
1114      display: inline;
1115  }
1116  
1117  .upload-theme,
1118  .upload-plugin {
1119      box-sizing: border-box;
1120      display: none;
1121      margin: 0;
1122      padding: 50px 0;
1123      width: 100%;
1124      overflow: hidden;
1125      position: relative;
1126      top: 10px;
1127      text-align: center;
1128  }
1129  
1130  .show-upload-view .upload-theme,
1131  .show-upload-view .upload-plugin,
1132  .show-upload-view .upload-plugin-wrap,
1133  .plugin-install-tab-upload .upload-plugin {
1134      display: block;
1135  }
1136  
1137  .upload-theme .wp-upload-form,
1138  .upload-plugin .wp-upload-form {
1139      position: relative;
1140      margin: 30px;
1141      display: inline-flex;
1142      justify-content: space-between;
1143      align-items: center;
1144      border: 1px solid #c3c4c7;
1145      background: #f6f7f7;
1146  }
1147  
1148  .upload-theme .wp-upload-form input[type="file"],
1149  .upload-plugin .wp-upload-form input[type="file"] {
1150      background: transparent;
1151      margin: 0;
1152      padding: 30px 30px 30px 0;
1153  }
1154  
1155  .wp-upload-form input[type="submit"].button {
1156      margin-left: 30px;
1157  }
1158  
1159  .upload-theme .install-help,
1160  .upload-plugin .install-help {
1161      color: #50575e; /* #f1f1f1 background */
1162      font-size: 18px;
1163      font-style: normal;
1164      margin: 0;
1165      padding: 0;
1166      text-align: center;
1167  }
1168  
1169  p.no-themes,
1170  p.no-themes-local {
1171      clear: both;
1172      color: #646970;
1173      font-size: 18px;
1174      font-style: normal;
1175      margin: 0;
1176      padding: 100px 0;
1177      text-align: center;
1178      display: none;
1179  }
1180  
1181  .no-results p.no-themes {
1182      display: block;
1183  }
1184  
1185  .theme-install-php .add-new-theme {
1186      display: none !important;
1187  }
1188  
1189  @media only screen and (max-width: 1120px) {
1190      .upload-plugin .wp-upload-form,
1191      .upload-theme .wp-upload-form {
1192          margin: 20px 0;
1193          max-width: 100%;
1194      }
1195      .upload-theme .install-help {
1196          font-size: 15px;
1197          padding: 20px 0 0;
1198      }
1199  }
1200  
1201  .theme-details .theme-rating {
1202      line-height: 1.9;
1203  }
1204  
1205  .theme-details .star-rating {
1206      display: inline;
1207  }
1208  
1209  .theme-details .num-ratings,
1210  .theme-details .no-rating {
1211      font-size: 11px;
1212      color: #646970;
1213  }
1214  
1215  .theme-details .no-rating {
1216      display: block;
1217      line-height: 1.9;
1218  }
1219  
1220  .update-from-upload-comparison {
1221      border-top: 1px solid #dcdcde;
1222      border-bottom: 1px solid #dcdcde;
1223      text-align: right;
1224      margin: 1rem 0 1.4rem;
1225      border-collapse: collapse;
1226      width: 100%;
1227  }
1228  
1229  .update-from-upload-comparison tr:last-child td {
1230      height: 1.4rem;
1231      vertical-align: top;
1232  }
1233  
1234  .update-from-upload-comparison tr:first-child th {
1235      font-weight: bold;
1236      height: 1.4rem;
1237      vertical-align: bottom;
1238  }
1239  
1240  .update-from-upload-comparison td.name-label {
1241      text-align: left;
1242  }
1243  
1244  .update-from-upload-comparison td,
1245  .update-from-upload-comparison th {
1246      padding: 0.4rem 1.4rem;
1247  }
1248  
1249  .update-from-upload-comparison td.warning {
1250      color: #d63638;
1251  }
1252  
1253  .update-from-upload-actions {
1254      margin-top: 1.4rem;
1255  }
1256  
1257  /*------------------------------------------------------------------------------
1258    16.3 - Custom Header Screen
1259  ------------------------------------------------------------------------------*/
1260  
1261  .appearance_page_custom-header #headimg {
1262      border: 1px solid #dcdcde;
1263      overflow: hidden;
1264      width: 100%;
1265  }
1266  
1267  .appearance_page_custom-header #upload-form p label {
1268      font-size: 12px;
1269  }
1270  
1271  .appearance_page_custom-header .available-headers .default-header {
1272      float: right;
1273      margin: 0 0 20px 20px;
1274  }
1275  
1276  .appearance_page_custom-header .random-header {
1277      clear: both;
1278      margin: 0 0 20px 20px;
1279      vertical-align: middle;
1280  }
1281  
1282  .appearance_page_custom-header .available-headers label input,
1283  .appearance_page_custom-header .random-header label input {
1284      margin-left: 10px;
1285  }
1286  
1287  .appearance_page_custom-header .available-headers label img {
1288      vertical-align: middle;
1289  }
1290  
1291  
1292  /*------------------------------------------------------------------------------
1293    16.4 - Custom Background Screen
1294  ------------------------------------------------------------------------------*/
1295  
1296  div#custom-background-image {
1297      min-height: 100px;
1298      border: 1px solid #dcdcde;
1299  }
1300  
1301  div#custom-background-image img {
1302      max-width: 400px;
1303      max-height: 300px;
1304  }
1305  
1306  .background-position-control input[type="radio"]:checked ~ .button {
1307      background: #f0f0f1;
1308      border-color: #8c8f94;
1309      box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
1310      z-index: 1;
1311  }
1312  
1313  .background-position-control input[type="radio"]:focus ~ .button {
1314      border-color: #4f94d4;
1315      box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5), 0 0 3px rgba(34, 113, 177, 0.8);
1316      color: #1d2327;
1317  }
1318  
1319  .background-position-control .background-position-center-icon,
1320  .background-position-control .background-position-center-icon:before {
1321      display: inline-block;
1322      line-height: 1;
1323      text-align: center;
1324      transition: background-color .1s ease-in;
1325  }
1326  
1327  .background-position-control .background-position-center-icon {
1328      height: 20px;
1329      margin-top: 13px;
1330      vertical-align: top;
1331      width: 20px;
1332  }
1333  
1334  .background-position-control .background-position-center-icon:before {
1335      background-color: #50575e;
1336      border-radius: 50%;
1337      content: "";
1338      height: 12px;
1339      width: 12px;
1340  }
1341  
1342  .background-position-control .button:hover .background-position-center-icon:before,
1343  .background-position-control input[type="radio"]:focus ~ .button .background-position-center-icon:before {
1344      background-color: #1d2327;
1345  }
1346  
1347  .background-position-control .button-group {
1348      display: block;
1349  }
1350  
1351  .background-position-control .button-group .button {
1352      border-radius: 0;
1353      box-shadow: none;
1354      /* Following properties are overridden by buttons responsive styles (see: wp-includes/css/buttons.css). */
1355      height: 40px !important;
1356      line-height: 2.9 !important;
1357      margin: 0 0 0 -1px !important;
1358      padding: 0 10px 1px !important;
1359      position: relative;
1360  }
1361  
1362  .background-position-control .button-group .button:active,
1363  .background-position-control .button-group .button:hover,
1364  .background-position-control .button-group .button:focus {
1365      z-index: 1;
1366  }
1367  
1368  .background-position-control .button-group:last-child .button {
1369      box-shadow: 0 1px 0 #c3c4c7;
1370  }
1371  
1372  .background-position-control .button-group > label {
1373      margin: 0 !important;
1374  }
1375  
1376  .background-position-control .button-group:first-child > label:first-child .button {
1377      border-radius: 0 3px 0 0;
1378  }
1379  
1380  .background-position-control .button-group:first-child > label:first-child .dashicons {
1381      transform: rotate( -45deg );
1382  }
1383  
1384  .background-position-control .button-group:first-child > label:last-child .button {
1385      border-radius: 3px 0 0 0;
1386  }
1387  
1388  .background-position-control .button-group:first-child > label:last-child .dashicons {
1389      transform: rotate( 45deg );
1390  }
1391  
1392  .background-position-control .button-group:last-child > label:first-child .button {
1393      border-radius: 0 0 3px 0;
1394  }
1395  
1396  .background-position-control .button-group:last-child > label:first-child .dashicons {
1397      transform: rotate( 45deg );
1398  }
1399  
1400  .background-position-control .button-group:last-child > label:last-child .button {
1401      border-radius: 0 0 0 3px;
1402  }
1403  
1404  .background-position-control .button-group:last-child > label:last-child .dashicons {
1405      transform: rotate( -45deg );
1406  }
1407  
1408  .background-position-control .button-group + .button-group {
1409      margin-top: -1px;
1410  }
1411  
1412  /*------------------------------------------------------------------------------
1413    23.0 - Full Overlay w/ Sidebar
1414  ------------------------------------------------------------------------------*/
1415  
1416  body.full-overlay-active {
1417      overflow: hidden;
1418      /* Hide all the content, the Customizer overlay is then made visible to be the only available content. */
1419      visibility: hidden;
1420  }
1421  
1422  .wp-full-overlay {
1423      background: transparent;
1424      z-index: 500000;
1425      position: fixed;
1426      overflow: visible;
1427      top: 0;
1428      bottom: 0;
1429      right: 0;
1430      left: 0;
1431      height: 100%;
1432      min-width: 0;
1433  }
1434  
1435  .wp-full-overlay-sidebar {
1436      box-sizing: border-box;
1437      position: fixed;
1438      min-width: 300px;
1439      max-width: 600px;
1440      width: 18%;
1441      height: 100%;
1442      top: 0;
1443      bottom: 0;
1444      right: 0;
1445      padding: 0;
1446      margin: 0;
1447      z-index: 10;
1448      background: #f0f0f1;
1449      border-left: none;
1450  }
1451  
1452  .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
1453      overflow: visible;
1454  }
1455  
1456  .wp-full-overlay.collapsed,
1457  .wp-full-overlay.expanded .wp-full-overlay-sidebar {
1458      margin-right: 0 !important;
1459  }
1460  
1461  .wp-full-overlay.expanded {
1462      margin-right: 300px;
1463  }
1464  
1465  .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
1466      margin-right: -300px;
1467  }
1468  
1469  @media screen and (min-width: 1667px) {
1470      .wp-full-overlay.expanded {
1471          margin-right: 18%;
1472      }
1473  
1474      .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
1475          margin-right: -18%;
1476      }
1477  }
1478  
1479  @media screen and (min-width: 3333px) {
1480      .wp-full-overlay.expanded {
1481          margin-right: 600px;
1482      }
1483  
1484      .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
1485          margin-right: -600px;
1486      }
1487  }
1488  
1489  .wp-full-overlay-sidebar:after {
1490      content: "";
1491      display: block;
1492      position: absolute;
1493      top: 0;
1494      bottom: 0;
1495      left: 0;
1496      width: 3px;
1497      z-index: 1000;
1498  }
1499  
1500  .wp-full-overlay-main {
1501      position: absolute;
1502      right: 0;
1503      left: 0;
1504      top: 0;
1505      bottom: 0;
1506      height: 100%;
1507  }
1508  
1509  .wp-full-overlay-sidebar .wp-full-overlay-header {
1510      position: absolute;
1511      right: 0;
1512      left: 0;
1513      height: 45px;
1514      padding: 0 15px;
1515      line-height: 3.2;
1516      z-index: 10;
1517      margin: 0;
1518      border-top: none;
1519      box-shadow: none;
1520  }
1521  
1522  .wp-full-overlay-sidebar .wp-full-overlay-header a.back {
1523      margin-top: 3px; /* Vertically center 40px button in 45px header */
1524  }
1525  
1526  .wp-full-overlay-sidebar .wp-full-overlay-footer {
1527      bottom: 0;
1528      border-bottom: none;
1529      border-top: none;
1530      box-shadow: none;
1531  }
1532  
1533  .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
1534      position: absolute;
1535      top: 45px;
1536      bottom: 45px;
1537      right: 0;
1538      left: 0;
1539      overflow: auto;
1540  }
1541  
1542  /* Close & Navigation Links */
1543  .theme-install-overlay .wp-full-overlay-sidebar .wp-full-overlay-header {
1544      padding: 0;
1545  }
1546  
1547  .theme-install-overlay .close-full-overlay,
1548  .theme-install-overlay .previous-theme,
1549  .theme-install-overlay .next-theme {
1550      display: block;
1551      position: relative;
1552      float: right;
1553      width: 45px;
1554      height: 45px;
1555      background: #f0f0f1;
1556      border-left: 1px solid #dcdcde;
1557      color: #3c434a;
1558      cursor: pointer;
1559      text-decoration: none;
1560      transition: color .1s ease-in-out, background .1s ease-in-out;
1561  }
1562  
1563  .theme-install-overlay .close-full-overlay:hover,
1564  .theme-install-overlay .close-full-overlay:focus,
1565  .theme-install-overlay .previous-theme:hover,
1566  .theme-install-overlay .previous-theme:focus,
1567  .theme-install-overlay .next-theme:hover,
1568  .theme-install-overlay .next-theme:focus {
1569      background: #dcdcde;
1570      border-color: #c3c4c7;
1571      color: #000;
1572      outline: none;
1573      box-shadow: none;
1574  }
1575  
1576  .theme-install-overlay .close-full-overlay:before {
1577      font: normal 22px/1 dashicons;
1578      content: "\f335";
1579      content: "\f335" / '';
1580      position: relative;
1581      top: 7px;
1582      right: 13px;
1583  }
1584  
1585  .theme-install-overlay .previous-theme:before {
1586      font: normal 20px/1 dashicons;
1587      content: "\f345";
1588      content: "\f341" / '';
1589      position: relative;
1590      top: 6px;
1591      right: 14px;
1592  }
1593  
1594  .theme-install-overlay .next-theme:before {
1595      font: normal 20px/1 dashicons;
1596      content: "\f341";
1597      content: "\f345" / '';
1598      position: relative;
1599      top: 6px;
1600      right: 13px;
1601  }
1602  
1603  .theme-install-overlay .previous-theme.disabled,
1604  .theme-install-overlay .next-theme.disabled,
1605  .theme-install-overlay .previous-theme.disabled:hover,
1606  .theme-install-overlay .previous-theme.disabled:focus,
1607  .theme-install-overlay .next-theme.disabled:hover,
1608  .theme-install-overlay .next-theme.disabled:focus {
1609      color: #c3c4c7;
1610      background: #f0f0f1;
1611      cursor: default;
1612      pointer-events: none;
1613  }
1614  
1615  .theme-install-overlay .close-full-overlay,
1616  .theme-install-overlay .previous-theme,
1617  .theme-install-overlay .next-theme {
1618      border-right: 0;
1619      border-top: 0;
1620      border-bottom: 0;
1621  }
1622  
1623  .theme-install-overlay .close-full-overlay:before,
1624  .theme-install-overlay .previous-theme:before,
1625  .theme-install-overlay .next-theme:before {
1626      top: 2px;
1627      right: 0;
1628  }
1629  
1630  /* Collapse Button */
1631  .wp-core-ui .wp-full-overlay .collapse-sidebar {
1632      position: fixed;
1633      bottom: 0;
1634      right: 0;
1635      padding: 9px 10px 9px 0;
1636      height: 45px;
1637      color: #646970;
1638      outline: 0;
1639      line-height: 1;
1640      background-color: transparent !important;
1641      border: none !important;
1642      box-shadow: none !important;
1643      border-radius: 0 !important;
1644  }
1645  
1646  .wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
1647  .wp-core-ui .wp-full-overlay .collapse-sidebar:focus {
1648      color: #2271b1;
1649  }
1650  
1651  .wp-full-overlay .collapse-sidebar-arrow,
1652  .wp-full-overlay .collapse-sidebar-label {
1653      display: inline-block;
1654      vertical-align: middle;
1655      line-height: 1.6;
1656  }
1657  
1658  .wp-full-overlay .collapse-sidebar-arrow {
1659      width: 20px;
1660      height: 20px;
1661      margin: 0 2px; /* avoid the focus box-shadow to be cut-off */
1662      border-radius: 50%;
1663      overflow: hidden;
1664  }
1665  
1666  .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow,
1667  .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow {
1668      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
1669      /* Only visible in Windows High Contrast mode */
1670      outline: 2px solid transparent;
1671  }
1672  
1673  .wp-full-overlay .collapse-sidebar-label {
1674      margin-right: 3px;
1675  }
1676  
1677  .wp-full-overlay.collapsed .collapse-sidebar-label {
1678      display: none;
1679  }
1680  
1681  .wp-full-overlay .collapse-sidebar-arrow:before {
1682      display: block;
1683      content: "\f148";
1684      content: "\f148" / '';
1685      background: #f0f0f1;
1686      font: normal 20px/1 dashicons;
1687      padding: 0;
1688      -webkit-font-smoothing: antialiased;
1689      -moz-osx-font-smoothing: grayscale;
1690  }
1691  
1692  .wp-core-ui .wp-full-overlay.collapsed .collapse-sidebar {
1693      padding: 9px 10px;
1694  }
1695  
1696  /* rtl:ignore */
1697  .wp-full-overlay.collapsed .collapse-sidebar-arrow:before,
1698  .rtl .wp-full-overlay .collapse-sidebar-arrow:before {
1699      transform: rotate(180.001deg); /* Firefox: promoting to its own layer to trigger anti-aliasing */
1700  }
1701  
1702  .rtl .wp-full-overlay.collapsed .collapse-sidebar-arrow:before {
1703      transform: none;
1704  }
1705  
1706  /* Animations */
1707  @media (prefers-reduced-motion: no-preference) {
1708      .wp-full-overlay,
1709      .wp-full-overlay-sidebar,
1710      .wp-full-overlay .collapse-sidebar,
1711      .wp-full-overlay-main {
1712          transition-property: right, left, top, bottom, width, margin;
1713          transition-duration: 0.2s;
1714      }
1715  }
1716  
1717  /* Device/preview size toggles */
1718  
1719  .wp-full-overlay {
1720      background: #1d2327;
1721  }
1722  
1723  .wp-full-overlay-main {
1724      background-color: #f0f0f1;
1725  }
1726  
1727  .expanded .wp-full-overlay-footer {
1728      position: fixed;
1729      bottom: 0;
1730      right: 0;
1731      min-width: 299px;
1732      max-width: 599px;
1733      width: 18%;
1734      width: calc( 18% - 1px );
1735      height: 45px;
1736      border-top: 1px solid #dcdcde;
1737      background: #f0f0f1;
1738  }
1739  
1740  .wp-full-overlay-footer .devices-wrapper {
1741      float: left;
1742  }
1743  
1744  .wp-full-overlay-footer .devices {
1745      position: relative;
1746      background: #f0f0f1;
1747      box-shadow: 20px 0 10px -5px #f0f0f1;
1748  }
1749  
1750  .wp-full-overlay-footer .devices button {
1751      cursor: pointer;
1752      background: transparent;
1753      border: none;
1754      height: 45px;
1755      padding: 0 3px;
1756      margin: 0 -4px 0 0;
1757      box-shadow: none;
1758      border-top: 1px solid transparent;
1759      border-bottom: 4px solid transparent;
1760      transition:
1761          .15s color ease-in-out,
1762          .15s background-color ease-in-out,
1763          .15s border-color ease-in-out;
1764  }
1765  
1766  .wp-full-overlay-footer .devices button:focus {
1767      box-shadow: none;
1768      outline: none;
1769  }
1770  
1771  .wp-full-overlay-footer .devices button:before {
1772      display: inline-block;
1773      -webkit-font-smoothing: antialiased;
1774      font: normal 20px/30px "dashicons";
1775      vertical-align: top;
1776      margin: 3px 0;
1777      padding: 4px 8px;
1778      color: #646970;
1779  }
1780  
1781  .wp-full-overlay-footer .devices button.active {
1782      border-bottom-color: #1d2327;
1783  }
1784  
1785  .wp-full-overlay-footer .devices button:hover,
1786  .wp-full-overlay-footer .devices button:focus {
1787      background-color: #fff;
1788  }
1789  
1790  .wp-full-overlay-footer .devices button:focus,
1791  .wp-full-overlay-footer .devices button.active:hover {
1792      border-bottom-color: #2271b1;
1793  }
1794  
1795  .wp-full-overlay-footer .devices button.active:before {
1796      color: #1d2327;
1797  }
1798  
1799  .wp-full-overlay-footer .devices button:hover:before,
1800  .wp-full-overlay-footer .devices button:focus:before {
1801      color: #2271b1;
1802  }
1803  
1804  .wp-full-overlay-footer .devices .preview-desktop:before {
1805      content: "\f472";
1806      content: "\f472" / '';
1807  }
1808  
1809  .wp-full-overlay-footer .devices .preview-tablet:before {
1810      content: "\f471";
1811      content: "\f471" / '';
1812  }
1813  
1814  .wp-full-overlay-footer .devices .preview-mobile:before {
1815      content: "\f470";
1816      content: "\f470" / '';
1817  }
1818  
1819  @media screen and (max-width: 1024px) {
1820      .wp-full-overlay-footer .devices {
1821          display: none;
1822      }
1823  }
1824  
1825  .collapsed .wp-full-overlay-footer .devices button:before {
1826      display: none;
1827  }
1828  
1829  .preview-mobile .wp-full-overlay-main {
1830      margin: auto -160px auto 0;
1831      width: 320px;
1832      height: 480px;
1833      max-height: 100%;
1834      max-width: 100%;
1835      right: 50%;
1836  }
1837  
1838  .preview-tablet .wp-full-overlay-main {
1839      margin: auto -360px auto 0;
1840      width: 720px; /* Size is loosely based on a typical "tablet" device size. Intentionally ambiguous - this does not represent any particular device precisely. */
1841      height: 1080px;
1842      max-height: 100%;
1843      max-width: 100%;
1844      right: 50%;
1845  }
1846  
1847  
1848  /*------------------------------------------------------------------------------
1849    24.0 - Customize Loader
1850  ------------------------------------------------------------------------------*/
1851  
1852  .no-customize-support .hide-if-no-customize,
1853  .customize-support .hide-if-customize,
1854  .no-customize-support.wp-core-ui .hide-if-no-customize,
1855  .no-customize-support .wp-core-ui .hide-if-no-customize,
1856  .customize-support.wp-core-ui .hide-if-customize,
1857  .customize-support .wp-core-ui .hide-if-customize {
1858      display: none;
1859  }
1860  
1861  #customize-container,
1862  #customize-controls .notice.notification-overlay {
1863      background: #f0f0f1;
1864      z-index: 500000;
1865      position: fixed;
1866      overflow: visible;
1867      top: 0;
1868      bottom: 0;
1869      right: 0;
1870      left: 0;
1871      height: 100%;
1872  }
1873  #customize-container {
1874      display: none;
1875  }
1876  
1877  /* Make the Customizer and Theme installer overlays the only available content. */
1878  #customize-container,
1879  .theme-install-overlay {
1880      visibility: visible;
1881  }
1882  
1883  .customize-loading #customize-container iframe {
1884      opacity: 0;
1885  }
1886  
1887  #customize-container iframe,
1888  .theme-install-overlay iframe {
1889      height: 100%;
1890      width: 100%;
1891      z-index: 20;
1892      transition: opacity 0.3s;
1893  }
1894  
1895  #customize-controls {
1896      margin-top: 0;
1897  }
1898  
1899  .theme-install-overlay {
1900      display: none;
1901  }
1902  
1903  .theme-install-overlay.single-theme {
1904      display: block;
1905  }
1906  
1907  .install-theme-info {
1908      display: none;
1909      padding: 10px 20px 60px;
1910  }
1911  
1912  .single-theme .install-theme-info {
1913      padding-top: 15px;
1914  }
1915  
1916  .theme-install-overlay .install-theme-info {
1917      display: block;
1918  }
1919  
1920  .install-theme-info .theme-install {
1921      float: left;
1922      margin-top: 18px;
1923  }
1924  
1925  .install-theme-info .theme-name {
1926      font-size: 16px;
1927      line-height: 1.5;
1928      margin-bottom: 0;
1929      margin-top: 0;
1930  }
1931  
1932  .install-theme-info .theme-screenshot {
1933      margin: 15px 0;
1934      width: 258px;
1935      border: 1px solid #c3c4c7;
1936      position: relative;
1937      overflow: hidden;
1938  }
1939  
1940  .install-theme-info .theme-screenshot > img {
1941      width: 100%;
1942      height: auto;
1943      position: absolute;
1944      right: 0;
1945      top: 0;
1946  }
1947  
1948  .install-theme-info .theme-screenshot:after {
1949      content: "";
1950      display: block;
1951      padding-top: 66.66666666%;
1952  }
1953  
1954  .install-theme-info .theme-details {
1955      overflow: hidden;
1956  }
1957  
1958  .theme-details .theme-version {
1959      margin: 15px 0;
1960  }
1961  
1962  .theme-details .theme-description {
1963      float: right;
1964      color: #646970;
1965      line-height: 1.6;
1966      max-width: 100%;
1967  }
1968  
1969  .theme-install-overlay .wp-full-overlay-header .button {
1970      float: left;
1971      margin: 3px 0 0 10px; /* Vertically center 40px button in 45px header */
1972  }
1973  
1974  .theme-install-overlay .wp-full-overlay-sidebar {
1975      background: #f0f0f1;
1976      border-left: 1px solid #dcdcde;
1977  }
1978  
1979  .theme-install-overlay .wp-full-overlay-sidebar-content {
1980      background: #fff;
1981      border-top: 1px solid #dcdcde;
1982      border-bottom: 1px solid #dcdcde;
1983  }
1984  
1985  .theme-install-overlay .wp-full-overlay-main {
1986      position: absolute;
1987      z-index: 0;
1988      background-color: #f0f0f1;
1989  }
1990  
1991  .customize-loading #customize-container {
1992      background-color: #f0f0f1;
1993  }
1994  
1995  #customize-preview.wp-full-overlay-main:before,
1996  .customize-loading #customize-container:before,
1997  #customize-controls .notice.notification-overlay.notification-loading:before,
1998  .theme-install-overlay .wp-full-overlay-main:before {
1999      content: "";
2000      display: block;
2001      width: 20px;
2002      height: 20px;
2003      position: absolute;
2004      right: 50%;
2005      top: 50%;
2006      z-index: -1;
2007      margin: -10px -10px 0 0;
2008      transform: translateZ(0);
2009      background: transparent url(../images/spinner.gif) no-repeat center center;
2010      background-size: 20px 20px;
2011  }
2012  
2013  #customize-preview.wp-full-overlay-main.iframe-ready:before,
2014  .theme-install-overlay.iframe-ready .wp-full-overlay-main:before {
2015      background-image: none;
2016  }
2017  
2018  /* =Media Queries
2019  -------------------------------------------------------------- */
2020  
2021  /**
2022   * HiDPI Displays
2023   */
2024  @media print,
2025    (min-resolution: 120dpi) {
2026      .wp-full-overlay .collapse-sidebar-arrow {
2027          background-image: url(../images/arrows-2x.png);
2028          background-size: 15px 123px;
2029      }
2030  
2031      #customize-preview.wp-full-overlay-main:before,
2032      .customize-loading #customize-container:before,
2033      #customize-controls .notice.notification-overlay.notification-loading:before,
2034      .theme-install-overlay .wp-full-overlay-main:before {
2035          background-image: url(../images/spinner-2x.gif);
2036      }
2037  }
2038  
2039  @media screen and (max-width: 782px) {
2040      .available-theme .action-links .delete-theme {
2041          float: none;
2042          margin: 0;
2043          padding: 0;
2044          clear: both;
2045      }
2046  
2047      .available-theme .action-links .delete-theme a {
2048          padding: 0;
2049      }
2050  
2051      .broken-themes table {
2052          width: 100%;
2053      }
2054  
2055      .theme-install-overlay .wp-full-overlay-header .button {
2056          font-size: 13px;
2057          line-height: 2.15384615;
2058          min-height: 30px;
2059      }
2060  
2061      .theme-browser .theme .theme-actions .button {
2062          margin-bottom: 0;
2063      }
2064  
2065      .theme-browser .theme.active .theme-actions,
2066      .theme-browser .theme .theme-actions {
2067          padding-top: 4px;
2068          padding-bottom: 4px;
2069      }
2070  
2071      .upload-plugin .wp-upload-form,
2072      .upload-theme .wp-upload-form {
2073          width: 100%;
2074          box-sizing: border-box;
2075      }
2076  
2077      .upload-plugin .wp-upload-form input[type=file],
2078      .upload-theme .wp-upload-form input[type=file] {
2079          padding: 30px 30px 30px 0;
2080          width: 100%;
2081      }
2082  }