[ Index ]

WordPress 5.4.1

[ Index ]     [ Classes ]     [ Functions ]     [ Variables ]     [ Constants ]     [ Statistics ]    

title

Body

[close]

/wp-admin/css/ -> themes.css (source)

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


Generated: Tue May 19 15:51:04 2020 Cross-referenced by PHPXref 0.7.1