[ Index ]

PHP Cross Reference of WordPress Trunk (Updated Daily)

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


Generated: Sat Nov 23 20:47:33 2019 Cross-referenced by PHPXref 0.7