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