1 /*------------------------------------------------------------------------------
3 ------------------------------------------------------------------------------*/
6 /*------------------------------------------------------------------------------
8 ------------------------------------------------------------------------------*/
10 .theme-browser .themes {
15 .themes-php .wrap h2 {
20 .network-admin.themes-php .wrap h2 {
24 .themes-php .wrap h2 .button {
29 .themes-php .wp-filter-search {
40 /* Position admin messages */
41 .themes-php div.updated,
42 .themes-php div.error,
43 .themes-php div.notice {
48 .themes-php div.updated a {
49 text-decoration: underline;
54 * (has flexible margins)
56 .theme-browser .theme {
62 border: 1px solid #dedede;
63 -webkit-box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
64 box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
65 -webkit-box-sizing: border-box;
66 -moz-box-sizing: border-box;
67 box-sizing: border-box;
70 .ie8 .theme-browser .theme {
75 .theme-browser .theme:nth-child(3n) {
79 .theme-browser .theme:hover,
80 .theme-browser .theme:focus {
84 .theme-browser .theme .theme-name {
90 -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
91 box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
94 text-overflow: ellipsis;
96 background: rgba(255,255,255,0.65);
99 /* Activate and Customize buttons, shown on hover and focus */
100 .theme-browser .theme .theme-actions {
101 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
103 -webkit-transition: opacity 0.1s ease-in-out;
104 transition: opacity 0.1s ease-in-out;
109 padding: 9px 10px 0 10px;
110 background: rgba(244, 244, 244, 0.7);
111 border-right: 1px solid rgba(0,0,0,0.05);
114 .theme-browser .theme:hover .theme-actions,
115 .theme-browser .theme.focus .theme-actions,
116 .theme-browser .theme:focus .theme-actions {
117 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
121 .theme-browser .theme .theme-actions .button-primary {
125 .theme-browser .theme .theme-actions .button-secondary {
133 * Has a fixed aspect ratio of 1.5 to 1 regardless of screenshot size
134 * It is also responsive.
136 .theme-browser .theme .theme-screenshot {
140 -webkit-transition: opacity 0.2s ease-in-out;
141 transition: opacity 0.2s ease-in-out;
144 .theme-browser .theme .theme-screenshot:after {
147 padding-top: 66.66666%; /* using a 3/2 aspect ratio */
150 .theme-browser .theme .theme-screenshot img {
156 -webkit-transition: opacity 0.2s ease-in-out;
157 transition: opacity 0.2s ease-in-out;
160 .theme-browser .theme:hover .theme-screenshot,
161 .theme-browser .theme:focus .theme-screenshot {
165 .theme-browser.rendered .theme:hover .theme-screenshot img,
166 .theme-browser.rendered .theme:focus .theme-screenshot img {
170 .theme-browser .theme .more-details {
171 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
178 background: rgba(0,0,0,0.7);
181 text-shadow: 0 1px 0 rgba(0,0,0,0.6);
182 -webkit-font-smoothing: antialiased;
186 -webkit-border-radius: 3px;
188 -webkit-transition: opacity 0.1s ease-in-out;
189 transition: opacity 0.1s ease-in-out;
192 .theme-browser .theme:focus {
193 border-color: #5b9dd9;
194 -webkit-box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
195 box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
198 .theme-browser .theme:focus .more-details {
202 /* Current theme needs to have its action always on view */
203 .theme-browser .theme.active:focus .theme-actions {
207 .theme-browser.rendered .theme:hover .more-details,
208 .theme-browser.rendered .theme:focus .more-details {
209 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
214 * Displays a theme update notice
215 * when an update is available.
217 .theme-browser .theme .theme-update,
218 .theme-browser .theme .theme-installed {
220 background: rgba(213, 78, 33, 0.95);
232 border-bottom: 1px solid rgba(0,0,0,0.25);
236 .theme-browser .theme .theme-update:before,
237 .theme-browser .theme .theme-installed:before {
239 display: inline-block;
240 font: normal 20px/1 'dashicons';
246 -webkit-font-smoothing: antialiased;
251 * The currently active theme
253 .theme-browser .theme.active .theme-name {
258 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.5);
259 box-shadow: inset 0 1px 1px rgba(0,0,0,0.5);
262 .theme-browser .customize-control .theme.active .theme-name {
266 .theme-browser .theme.active .theme-name span {
270 .theme-browser .theme.active .theme-actions {
271 background: rgba(49,49,49,0.7);
276 .theme-browser .theme.active .theme-actions .button-primary {
280 .theme-browser .theme .theme-author {
291 .theme-browser .theme.display-author .theme-author {
295 .theme-browser .theme.display-author .theme-author a {
297 text-decoration: none;
303 .theme-browser .theme.add-new-theme {
305 -webkit-box-shadow: none;
309 .theme-browser .theme.add-new-theme a {
311 text-decoration: none;
317 .theme-browser .theme.add-new-theme a:after {
320 background: transparent;
321 background: rgba(0, 0, 0, 0);
329 border: 5px dashed #d5d2ca;
330 border: 5px dashed rgba(0, 0, 0, 0.1);
331 -webkit-box-sizing: border-box;
332 -moz-box-sizing: border-box;
333 box-sizing: border-box;
336 .theme-browser .theme.add-new-theme span:after {
338 background: rgba(153, 153, 153, 0.1);
339 -webkit-border-radius: 50%;
341 display: inline-block;
343 -webkit-font-smoothing: antialiased;
344 font: normal 74px/115px 'dashicons';
347 vertical-align: middle;
349 color: rgb(153, 153, 153);
360 .rtl .theme-browser .theme.add-new-theme span:after {
364 .theme-browser .theme.add-new-theme a:hover .theme-screenshot,
365 .theme-browser .theme.add-new-theme a:focus .theme-screenshot {
369 .theme-browser .theme.add-new-theme a:hover span:after,
370 .theme-browser .theme.add-new-theme a:focus span:after {
375 .theme-browser .theme.add-new-theme a:hover:after,
376 .theme-browser .theme.add-new-theme a:focus:after {
377 border-color: transparent;
383 .theme-browser .theme.add-new-theme .theme-name {
386 -webkit-box-shadow: none;
393 padding-bottom: 48px;
396 .theme-browser .theme.add-new-theme a:hover .theme-name,
397 .theme-browser .theme.add-new-theme a:focus .theme-name {
404 * Shown when clicking a theme
406 .theme-overlay .theme-backdrop {
413 background: rgba( 238, 238, 238, 0.9 );
417 .theme-overlay .theme-header {
423 border-bottom: 1px solid #ddd;
426 .theme-overlay .theme-header button {
430 .theme-overlay .theme-header .close {
437 border-right: 1px solid #ddd;
438 background-color: transparent;
439 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
440 transition: color .1s ease-in-out, background .1s ease-in-out;
443 .theme-overlay .theme-header .close:before {
444 font: normal 22px/50px 'dashicons' !important;
446 display: inline-block;
451 /* Left and right navigation */
452 .theme-overlay .theme-header .right,
453 .theme-overlay .theme-header .left {
456 background-color: transparent;
462 border-left: 1px solid #ddd;
463 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
464 transition: color .1s ease-in-out, background .1s ease-in-out;
467 .theme-overlay .theme-header .close:focus,
468 .theme-overlay .theme-header .close:hover,
469 .theme-overlay .theme-header .right:focus,
470 .theme-overlay .theme-header .right:hover,
471 .theme-overlay .theme-header .left:focus,
472 .theme-overlay .theme-header .left:hover {
478 .theme-overlay .theme-header .close:focus:before,
479 .theme-overlay .theme-header .close:hover:before {
483 .theme-overlay .theme-header .close:focus,
484 .theme-overlay .theme-header .right:focus,
485 .theme-overlay .theme-header .left:focus {
486 -webkit-box-shadow: none;
491 .theme-overlay .theme-header .left.disabled,
492 .theme-overlay .theme-header .right.disabled,
493 .theme-overlay .theme-header .left.disabled:hover,
494 .theme-overlay .theme-header .right.disabled:hover {
500 .theme-overlay .theme-header .right:before,
501 .theme-overlay .theme-header .left:before {
502 font: normal 20px/50px 'dashicons' !important;
507 .theme-overlay .theme-header .left:before {
511 .theme-overlay .theme-header .right:before {
517 .theme-overlay .theme-wrap {
525 -webkit-box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
526 box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
528 -webkit-box-sizing: border-box;
529 -moz-box-sizing: border-box;
530 box-sizing: border-box;
531 -webkit-overflow-scrolling: touch;
534 .theme-overlay .theme-wrap:after {
542 body.folded .theme-overlay .theme-wrap {
546 .theme-overlay .theme-about {
555 .theme-overlay .theme-about:after {
563 .theme-overlay .theme-actions {
569 padding: 10px 25px 5px;
572 -webkit-box-sizing: border-box;
573 -moz-box-sizing: border-box;
574 box-sizing: border-box;
575 border-top: 1px solid #eee;
578 .ie8 .theme-overlay .theme-actions {
579 border: 1px solid #eee;
582 .theme-overlay .theme-actions a {
587 /* Hide-if-customize for items we can't add classes to */
588 .customize-support .theme-overlay .theme-actions a[href="themes.php?page=custom-header"],
589 .customize-support .theme-overlay .theme-actions a[href="themes.php?page=custom-background"] {
593 .broken-themes a.delete-theme,
594 .theme-overlay .theme-actions .delete-theme {
596 text-decoration: none;
597 border-color: transparent;
598 -webkit-box-shadow: none;
600 background: transparent;
603 .theme-overlay .theme-actions .delete-theme {
609 .broken-themes a.delete-theme:hover,
610 .broken-themes a.delete-theme:focus,
611 .theme-overlay .theme-actions .delete-theme:hover,
612 .theme-overlay .theme-actions .delete-theme:focus {
615 border-color: #d54e21;
618 .theme-overlay .theme-actions .active-theme,
619 .theme-overlay.active .theme-actions .inactive-theme {
623 .theme-overlay .theme-actions .inactive-theme,
624 .theme-overlay.active .theme-actions .active-theme {
629 * Theme Screenshots gallery
631 .theme-overlay .theme-screenshots {
639 /* First screenshot, shown big */
640 .theme-overlay .screenshot {
641 border: 1px solid #fff;
642 -webkit-box-sizing: border-box;
643 -moz-box-sizing: border-box;
644 box-sizing: border-box;
647 -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
648 box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
651 .theme-overlay .screenshot:after {
654 padding-top: 75%; /* using a 4/3 aspect ratio */
657 .theme-overlay .screenshot img {
664 /* Handles old 300px screenshots */
665 .theme-overlay.small-screenshot .theme-screenshots {
669 .theme-overlay.small-screenshot .theme-info {
674 /* Other screenshots, shown small and square */
675 .theme-overlay .screenshot.thumb {
677 border: 1px solid #eee;
679 display: inline-block;
686 .theme-overlay .screenshot.thumb:after {
689 padding-top: 100%; /* using a 1/1 aspect ratio */
692 .theme-overlay .screenshot.thumb img {
702 .theme-overlay .screenshot.selected {
703 background: transparent;
704 border: 2px solid #00a0d2;
707 .theme-overlay .screenshot.selected img {
711 /* No screenshot placeholder */
712 .theme-browser .theme .theme-screenshot.blank,
713 .theme-overlay .screenshot.blank {
714 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=);
718 * Theme heading information
720 .theme-overlay .theme-info {
725 .theme-overlay .current-label {
729 display: inline-block;
731 -webkit-border-radius: 2px;
734 -webkit-user-select: none;
735 -moz-user-select: none;
736 -ms-user-select: none;
740 .theme-overlay .theme-name {
748 .theme-overlay .theme-version {
753 display: inline-block;
757 .theme-overlay .theme-author {
764 .theme-overlay .theme-author a {
765 text-decoration: none;
768 .theme-overlay .theme-description {
776 .theme-overlay .theme-tags {
777 border-top: 3px solid #eee;
785 .theme-overlay .theme-tags span {
791 /* Theme Updates info */
792 .theme-overlay .theme-update-message {
794 border: 1px solid #eee;
795 border-right: 4px solid #d54e21;
796 -webkit-border-radius: 3px;
798 padding: 5px 20px 10px;
801 .theme-overlay .theme-update {
804 display: inline-block;
809 .theme-overlay .parent-theme {
811 border: 1px solid #eee;
812 border-right: 4px solid #00a0d2;
816 padding: 10px 20px 10px 10px;
819 .theme-overlay .parent-theme strong {
825 * Displays detailed view inline when a user has no switch capabilities
827 .single-theme .theme-overlay .theme-backdrop,
828 .single-theme .theme-overlay .theme-header,
829 .single-theme .theme {
833 .single-theme .theme-overlay .theme-wrap {
843 .single-theme .theme-overlay .theme-about {
844 padding: 30px 30px 70px;
848 .single-theme .theme-overlay .theme-actions {
853 * Basic Responsive structure...
855 * Shuffles theme columns around based on screen width
858 @media only screen and (min-width: 2000px) {
859 #wpwrap .theme-browser .theme {
864 #wpwrap .theme-browser .theme:nth-child(3n),
865 #wpwrap .theme-browser .theme:nth-child(4n) {
869 #wpwrap .theme-browser .theme:nth-child(5n) {
874 @media only screen and (min-width: 1680px) {
875 .theme-overlay .theme-wrap {
881 /* Maximum screenshot width reaches 440px */
882 @media only screen and (min-width: 1640px) {
883 .theme-browser .theme {
887 .theme-browser .theme .theme-screenshot:after {
888 padding-top: 75%; /* using a 4/3 aspect ratio */
891 .theme-browser .theme:nth-child(3n) {
895 .theme-browser .theme:nth-child(4n) {
899 /* Maximum screenshot width reaches 440px */
900 @media only screen and (max-width: 1120px) {
901 .theme-browser .theme {
906 .theme-browser .theme:nth-child(even) {
910 .theme-browser .theme:nth-child(odd) {
915 /* Admin menu is folded */
916 @media only screen and (max-width: 900px) {
917 .theme-overlay .theme-wrap {
922 @media only screen and (max-width: 780px) {
923 body.folded .theme-overlay .theme-wrap,
924 .theme-overlay .theme-wrap {
925 top: 0; /* The adminmenu isn't fixed on mobile, so this can use the full viewport height */
929 padding: 70px 20px 20px;
931 z-index: 100000; /* should overlap #wpadminbar. */
935 .theme-browser .theme.active .theme-name span {
936 /* Hide the "Active: " label on smaller screens. */
940 .theme-overlay .theme-screenshots {
944 .theme-overlay .theme-info {
947 .single-theme .theme-wrap {
951 .theme-browser .theme .theme-actions {
952 padding: 5px 10px 4px 10px;
955 .theme-overlay.small-screenshot .theme-screenshots {
961 .theme-overlay.small-screenshot .theme-info {
966 .theme:not(.active):hover .theme-actions,
967 .theme:not(.active):focus .theme-actions,
968 .theme:hover .more-details,
969 .theme:focus .more-details {
973 .theme-browser.rendered .theme:hover .theme-screenshot img,
974 .theme-browser.rendered .theme:focus .theme-screenshot img {
979 @media only screen and (max-width: 480px) {
980 .theme-browser .theme {
985 .theme-browser .theme:nth-child(2n),
986 .theme-browser .theme:nth-child(3n) {
991 @media only screen and (max-width: 650px) {
992 .theme-overlay .theme-update,
993 .theme-overlay .theme-description {
997 .theme-overlay .theme-actions .delete-theme {
1003 .theme-overlay .theme-actions .inactive-theme {
1007 .theme-overlay .theme-screenshots {
1012 .theme-overlay .theme-info {
1016 .theme-overlay .theme-author {
1017 margin: 5px 0 15px 0;
1020 .theme-overlay .current-label {
1025 .themes-php .wrap h2 {
1029 .themes-php .wp-filter-search {
1040 .theme-browser .theme.add-new-theme span:after {
1041 font: normal 60px/90px 'dashicons';
1047 margin-right: -40px;
1050 .single-theme .theme-wrap {
1051 margin: 0 -10px 0 -12px;
1054 .single-theme .theme-overlay .theme-about {
1058 .single-theme .current-label {
1061 .single-theme .theme-overlay .theme-actions {
1070 .broken-themes table {
1073 border-spacing: 3px;
1078 /*------------------------------------------------------------------------------
1079 16.2 - Install Themes
1080 ------------------------------------------------------------------------------*/
1082 /* Already installed theme */
1083 .theme-browser .theme .theme-installed {
1084 background: #0073aa;
1086 .theme-browser .theme .theme-installed:before {
1089 .theme-browser .theme.is-installed .theme-actions .button-primary {
1090 display: none !important;
1093 .theme-install-php a.upload,
1094 .theme-install-php a.browse-themes {
1097 .theme-install-php a.browse-themes,
1098 .theme-install-php.show-upload-theme a.upload {
1101 .theme-install-php.show-upload-theme a.browse-themes {
1106 -webkit-box-sizing: border-box;
1107 -moz-box-sizing: border-box;
1108 box-sizing: border-box;
1117 body.show-upload-theme .upload-theme,
1121 .upload-theme .wp-upload-form,
1122 .upload-plugin .wp-upload-form {
1123 background: #fafafa;
1124 border: 1px solid #e5e5e5;
1129 .upload-theme .install-help,
1130 .upload-plugin .install-help {
1138 body.show-upload-theme .upload-theme + .wp-filter,
1139 body.show-upload-theme .upload-theme + .wp-filter + .theme-browser {
1153 body.no-results p.no-themes {
1156 body.show-upload-theme p.no-themes {
1157 display: none !important;
1160 .theme-install-php .add-new-theme {
1161 display: none !important;
1164 @media only screen and (max-width: 1120px) {
1165 .upload-theme .wp-upload-form {
1169 .upload-theme .install-help {
1179 .rating span:before {
1182 display: inline-block;
1183 -webkit-font-smoothing: antialiased;
1184 font: normal 20px/1 'dashicons';
1185 vertical-align: top;
1188 .rating-10 span.one:before,
1189 .rating-30 span.two:before,
1190 .rating-50 span.three:before,
1191 .rating-70 span.four:before,
1192 .rating-90 span.five:before {
1196 .rating-20 span.one:before {
1199 .rating-30 span.one:before,
1200 .rating-40 span.one:before,
1201 .rating-40 span.two:before {
1204 .rating-50 span.one:before,
1205 .rating-50 span.two:before,
1206 .rating-60 span.one:before,
1207 .rating-60 span.two:before,
1208 .rating-60 span.three:before {
1211 .rating-70 span.one:before,
1212 .rating-70 span.two:before,
1213 .rating-70 span.three:before,
1214 .rating-80 span.one:before,
1215 .rating-80 span.two:before,
1216 .rating-80 span.three:before,
1217 .rating-80 span.four:before {
1220 .rating-90 span.one:before,
1221 .rating-90 span.two:before,
1222 .rating-90 span.three:before,
1223 .rating-90 span.four:before,
1224 .rating-100 span.one:before,
1225 .rating-100 span.two:before,
1226 .rating-100 span.three:before,
1227 .rating-100 span.four:before,
1228 .rating-100 span.five:before {
1237 /*------------------------------------------------------------------------------
1238 16.3 - Custom Header Screen
1239 ------------------------------------------------------------------------------*/
1241 .appearance_page_custom-header #headimg {
1242 border: 1px solid #DFDFDF;
1247 .appearance_page_custom-header #upload-form p label {
1251 .appearance_page_custom-header .available-headers .default-header {
1253 margin: 0 0 20px 20px;
1256 .appearance_page_custom-header .random-header {
1258 margin: 0 0 20px 20px;
1259 vertical-align: middle;
1262 .appearance_page_custom-header .available-headers label input,
1263 .appearance_page_custom-header .random-header label input {
1267 .appearance_page_custom-header .available-headers label img {
1268 vertical-align: middle;
1272 /*------------------------------------------------------------------------------
1273 16.4 - Custom Background Screen
1274 ------------------------------------------------------------------------------*/
1276 div#custom-background-image {
1278 border: 1px solid #dfdfdf;
1281 div#custom-background-image img {
1286 /*------------------------------------------------------------------------------
1287 23.0 - Full Overlay w/ Sidebar
1288 ------------------------------------------------------------------------------*/
1290 body.full-overlay-active {
1295 background: transparent;
1307 .wp-full-overlay-sidebar {
1308 -webkit-box-sizing: border-box;
1309 -moz-box-sizing: border-box;
1310 box-sizing: border-box;
1324 .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
1328 .wp-full-overlay.collapsed,
1329 .wp-full-overlay.expanded .wp-full-overlay-sidebar {
1330 margin-right: 0 !important;
1333 .wp-full-overlay.expanded {
1334 margin-right: 300px;
1337 .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
1338 margin-right: -300px;
1341 .wp-full-overlay-sidebar:after {
1352 .wp-full-overlay-main {
1361 #customize-preview.wp-full-overlay-main {
1362 background: url(../images/spinner.gif) no-repeat center center;
1363 -webkit-background-size: 20px 20px;
1364 background-size: 20px 20px;
1367 #customize-preview.wp-full-overlay-main.iframe-ready {
1371 .wp-full-overlay-sidebar .wp-full-overlay-header {
1381 -webkit-box-shadow: none;
1385 .wp-full-overlay-sidebar .wp-full-overlay-header a.back {
1389 .wp-full-overlay-sidebar .wp-full-overlay-footer {
1391 border-bottom: none;
1393 -webkit-box-shadow: none;
1397 .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
1406 /* Close & Navigation Links */
1407 .theme-install-overlay .wp-full-overlay-sidebar .wp-full-overlay-header {
1411 .theme-install-overlay .close-full-overlay,
1412 .theme-install-overlay .previous-theme,
1413 .theme-install-overlay .next-theme {
1421 border-left: 1px solid #ddd;
1424 text-decoration: none;
1425 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
1426 transition: color .1s ease-in-out, background .1s ease-in-out;
1429 .theme-install-overlay .close-full-overlay:hover,
1430 .theme-install-overlay .close-full-overlay:focus,
1431 .theme-install-overlay .previous-theme:hover,
1432 .theme-install-overlay .previous-theme:focus,
1433 .theme-install-overlay .next-theme:hover,
1434 .theme-install-overlay .next-theme:focus {
1439 -webkit-box-shadow: none;
1443 .theme-install-overlay .close-full-overlay:before {
1444 font: normal 22px/1 dashicons;
1451 .theme-install-overlay .previous-theme:before {
1452 font: normal 20px/1 dashicons;
1459 .theme-install-overlay .next-theme:before {
1460 font: normal 20px/1 dashicons;
1467 .theme-install-overlay .previous-theme.disabled,
1468 .theme-install-overlay .next-theme.disabled,
1469 .theme-install-overlay .previous-theme.disabled:hover,
1470 .theme-install-overlay .previous-theme.disabled:focus,
1471 .theme-install-overlay .next-theme.disabled:hover,
1472 .theme-install-overlay .next-theme.disabled:focus {
1476 pointer-events: none;
1479 /* Collapse Button */
1480 .wp-full-overlay a.collapse-sidebar {
1490 -webkit-border-radius: 50%;
1493 text-decoration: none;
1496 .wp-full-overlay a.collapse-sidebar:hover {
1500 .wp-full-overlay.collapsed .collapse-sidebar {
1505 .wp-full-overlay .collapse-sidebar-arrow {
1515 .wp-full-overlay .collapse-sidebar-arrow:before {
1516 -webkit-border-radius: 50%;
1521 font: normal 20px/1 'dashicons';
1528 -webkit-font-smoothing: antialiased;
1529 -moz-osx-font-smoothing: grayscale;
1530 text-decoration: none !important;
1534 .wp-full-overlay.collapsed .collapse-sidebar-arrow:before,
1535 .rtl .wp-full-overlay .collapse-sidebar-arrow:before {
1536 -webkit-transform: rotate(180deg);
1537 -ms-transform: rotate(180deg);
1538 transform: rotate(180deg);
1541 .rtl .wp-full-overlay.collapsed .collapse-sidebar-arrow:before {
1542 -webkit-transform: none;
1543 -ms-transform: none;
1547 .wp-full-overlay.collapsed .collapse-sidebar-arrow {
1548 background-position: -1px -109px;
1551 .wp-full-overlay .collapse-sidebar-label {
1558 .wp-full-overlay.collapsed .collapse-sidebar-label {
1564 .wp-full-overlay-sidebar,
1565 .wp-full-overlay .collapse-sidebar,
1566 .wp-full-overlay-main {
1567 -webkit-transition-property: right, left, top, bottom, width, margin;
1568 transition-property: right, left, top, bottom, width, margin;
1569 -webkit-transition-duration: 0.2s;
1570 transition-duration: 0.2s;
1573 /*------------------------------------------------------------------------------
1574 24.0 - Customize Loader
1575 ------------------------------------------------------------------------------*/
1577 .no-customize-support .hide-if-no-customize,
1578 .customize-support .hide-if-customize,
1579 .no-customize-support.wp-core-ui .hide-if-no-customize,
1580 .no-customize-support .wp-core-ui .hide-if-no-customize,
1581 .customize-support.wp-core-ui .hide-if-customize,
1582 .customize-support .wp-core-ui .hide-if-customize {
1586 #customize-container {
1599 .customize-active #customize-container {
1603 .customize-loading #customize-container iframe {
1607 .customize-loading #customize-container {
1608 background: #fff url(../images/spinner.gif) no-repeat fixed center center;
1609 -webkit-background-size: 20px 20px;
1610 background-size: 20px 20px;
1613 #customize-container iframe,
1614 .theme-install-overlay iframe {
1618 -webkit-transition: opacity 0.3s;
1619 transition: opacity 0.3s;
1622 #customize-container .collapse-sidebar {
1626 #customize-controls {
1630 .theme-install-overlay {
1634 .theme-install-overlay.single-theme {
1638 .install-theme-info {
1640 padding: 10px 20px 60px;
1643 .single-theme .install-theme-info {
1647 .theme-install-overlay .install-theme-info {
1651 .install-theme-info .theme-install {
1656 .install-theme-info .theme-name {
1663 .install-theme-info .theme-screenshot {
1666 border: 1px solid #ccc;
1669 .install-theme-info .theme-details {
1673 .theme-details .theme-version {
1678 .theme-details .star-rating {
1683 .theme-details .theme-description {
1690 .theme-install-overlay .wp-full-overlay-header .theme-install {
1692 margin: 8px 0 0 10px;
1693 /* For when .theme-install is a span rather than a.button-primary (already installed theme) */
1697 .theme-install-overlay .wp-full-overlay-sidebar {
1699 border-left: 1px solid #ddd;
1702 .theme-install-overlay .wp-full-overlay-sidebar-content {
1704 border-top: 1px solid #ddd;
1705 border-bottom: 1px solid #ddd;
1708 .theme-install-overlay .wp-full-overlay-main {
1709 background: #fff url(../images/spinner.gif) no-repeat center center;
1710 -webkit-background-size: 20px 20px;
1711 background-size: 20px 20px;
1715 -------------------------------------------------------------- */
1721 (-webkit-min-device-pixel-ratio: 1.25),
1722 (min-resolution: 120dpi) {
1723 .wp-full-overlay .collapse-sidebar-arrow {
1724 background-image: url(../images/arrows-2x.png);
1725 -webkit-background-size: 15px 123px;
1726 background-size: 15px 123px;
1729 #customize-preview.wp-full-overlay-main,
1730 .customize-loading #customize-container,
1731 .theme-install-overlay .wp-full-overlay-main {
1732 background-image: url(../images/spinner-2x.gif);
1735 .theme-install-overlay .wp-full-overlay-header .theme-install {
1740 @media screen and ( max-width: 782px ) {
1741 .available-theme .action-links .delete-theme {
1748 .available-theme .action-links .delete-theme a {
1752 .broken-themes table {
1756 .theme-install-overlay .wp-full-overlay-header .theme-install {
1758 line-height: normal;