[Summary view] [Print] [Text view]

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