[Summary view] [Print] [Text view]

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