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