[Summary view] [Print] [Text view]

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