[Summary view] [Print] [Text view]

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