[ Index ]

PHP Cross Reference of WordPress Trunk (Updated Daily)

Search

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


Generated : Mon Nov 23 08:20:02 2020 Cross-referenced by PHPXref