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 {
47 .themes-php div.updated a {
48 text-decoration: underline;
53 * (has flexible margins)
55 .theme-browser .theme {
61 border: 1px solid #dedede;
62 -webkit-box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
63 box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
64 -webkit-box-sizing: border-box;
65 -moz-box-sizing: border-box;
66 box-sizing: border-box;
69 .ie8 .theme-browser .theme {
74 .theme-browser .theme:nth-child(3n) {
78 .theme-browser .theme:hover,
79 .theme-browser .theme:focus {
83 .theme-browser .theme .theme-name {
89 -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
90 box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
93 text-overflow: ellipsis;
95 background: rgba(255,255,255,0.65);
98 /* Activate and Customize buttons, shown on hover and focus */
99 .theme-browser .theme .theme-actions {
100 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
102 -webkit-transition: opacity 0.1s ease-in-out;
103 transition: opacity 0.1s ease-in-out;
108 padding: 9px 10px 0 10px;
109 background: rgba(244, 244, 244, 0.7);
110 border-right: 1px solid rgba(0,0,0,0.05);
113 .theme-browser .theme:hover .theme-actions,
114 .theme-browser .theme.focus .theme-actions,
115 .theme-browser .theme:focus .theme-actions {
116 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
120 .theme-browser .theme .theme-actions .button-primary {
124 .theme-browser .theme .theme-actions .button-secondary {
132 * Has a fixed aspect ratio of 1.5 to 1 regardless of screenshot size
133 * It is also responsive.
135 .theme-browser .theme .theme-screenshot {
139 -webkit-transition: opacity 0.2s ease-in-out;
140 transition: opacity 0.2s ease-in-out;
143 .theme-browser .theme .theme-screenshot:after {
146 padding-top: 66.66666%; /* using a 3/2 aspect ratio */
149 .theme-browser .theme .theme-screenshot img {
155 -webkit-transform: translateZ( 0 ); /* Prevents rendering bugs in Chrome */
156 -webkit-transition: opacity 0.2s ease-in-out; /* Prevents rendering bugs in Chrome */
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 .theme.active .theme-name span {
266 .theme-browser .theme.active .theme-actions {
267 background: rgba(49,49,49,0.7);
272 .theme-browser .theme.active .theme-actions .button-primary {
276 .theme-browser .theme .theme-author {
287 .theme-browser .theme.display-author .theme-author {
291 .theme-browser .theme.display-author .theme-author a {
293 text-decoration: none;
299 .theme-browser .theme.add-new-theme {
301 -webkit-box-shadow: none;
305 .theme-browser .theme.add-new-theme a {
307 text-decoration: none;
313 .theme-browser .theme.add-new-theme:after {
316 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
318 background: transparent;
319 background: rgba(0, 0, 0, 0);
327 border: 5px dashed #d5d2ca;
328 border: 5px dashed rgba(0, 0, 0, 0.1);
329 -webkit-transition: opacity 0.2s ease-in-out;
330 transition: opacity 0.2s ease-in-out;
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:hover .theme-screenshot,
365 .theme-browser .theme.add-new-theme:focus .theme-screenshot {
369 .theme-browser .theme.add-new-theme:hover span:after,
370 .theme-browser .theme.add-new-theme:focus span:after {
375 .theme-browser .theme.add-new-theme:hover:after,
376 .theme-browser .theme.add-new-theme:focus:after {
377 border-color: transparent;
383 .theme-browser .theme.add-new-theme .theme-name {
386 -webkit-box-shadow: none;
395 .theme-browser .theme.add-new-theme:hover .theme-name,
396 .theme-browser .theme.add-new-theme:focus .theme-name {
403 * Shown when clicking a theme
405 .theme-overlay .theme-backdrop {
412 background: rgba( 238, 238, 238, 0.9 );
416 .theme-overlay .theme-header {
422 border-bottom: 1px solid #ddd;
425 .theme-overlay .theme-header .close {
432 border-right: 1px solid #ddd;
433 background-color: transparent;
434 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
435 transition: color .1s ease-in-out, background .1s ease-in-out;
438 .theme-overlay .theme-header .close:before {
439 font: normal 22px/50px 'dashicons' !important;
441 display: inline-block;
446 /* Left and right navigation */
447 .theme-overlay .theme-header .right,
448 .theme-overlay .theme-header .left {
451 background-color: transparent;
457 border-left: 1px solid #ddd;
458 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
459 transition: color .1s ease-in-out, background .1s ease-in-out;
462 .theme-overlay .theme-header .close:focus,
463 .theme-overlay .theme-header .close:hover,
464 .theme-overlay .theme-header .right:focus,
465 .theme-overlay .theme-header .right:hover,
466 .theme-overlay .theme-header .left:focus,
467 .theme-overlay .theme-header .left:hover {
473 .theme-overlay .theme-header .close:focus:before,
474 .theme-overlay .theme-header .close:hover:before {
478 .theme-overlay .theme-header .close:focus,
479 .theme-overlay .theme-header .right:focus,
480 .theme-overlay .theme-header .left:focus {
481 -webkit-box-shadow: none;
486 .theme-overlay .theme-header .left.disabled,
487 .theme-overlay .theme-header .right.disabled,
488 .theme-overlay .theme-header .left.disabled:hover,
489 .theme-overlay .theme-header .right.disabled:hover {
495 .theme-overlay .theme-header .right:before,
496 .theme-overlay .theme-header .left:before {
497 font: normal 20px/50px 'dashicons' !important;
502 .theme-overlay .theme-header .left:before,
503 .rtl .theme-overlay .theme-header .right:before {
507 .theme-overlay .theme-header .right:before,
508 .rtl .theme-overlay .theme-header .left:before {
514 .theme-overlay .theme-wrap {
522 -webkit-box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
523 box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
525 -webkit-box-sizing: border-box;
526 -moz-box-sizing: border-box;
527 box-sizing: border-box;
530 .theme-overlay .theme-wrap:after {
538 body.folded .theme-overlay .theme-wrap {
542 .theme-overlay .theme-about {
551 .theme-overlay .theme-about:after {
559 .theme-overlay .theme-actions {
565 padding: 10px 25px 5px;
568 -webkit-box-sizing: border-box;
569 -moz-box-sizing: border-box;
570 box-sizing: border-box;
571 border-top: 1px solid #eee;
574 .ie8 .theme-overlay .theme-actions {
575 border: 1px solid #eee;
578 .theme-overlay .theme-actions a {
583 /* Hide-if-customize for items we can't add classes to */
584 .customize-support .theme-overlay .theme-actions a[href="themes.php?page=custom-header"],
585 .customize-support .theme-overlay .theme-actions a[href="themes.php?page=custom-background"] {
589 .broken-themes a.delete-theme,
590 .theme-overlay .theme-actions .delete-theme {
592 text-decoration: none;
593 border-color: transparent;
594 -webkit-box-shadow: none;
596 background: transparent;
599 .theme-overlay .theme-actions .delete-theme {
605 .broken-themes a.delete-theme:hover,
606 .broken-themes a.delete-theme:focus,
607 .theme-overlay .theme-actions .delete-theme:hover,
608 .theme-overlay .theme-actions .delete-theme:focus {
611 border-color: #d54e21;
614 .theme-overlay .theme-actions .active-theme,
615 .theme-overlay.active .theme-actions .inactive-theme {
619 .theme-overlay .theme-actions .inactive-theme,
620 .theme-overlay.active .theme-actions .active-theme {
625 * Theme Screenshots gallery
627 .theme-overlay .theme-screenshots {
635 /* First screenshot, shown big */
636 .theme-overlay .screenshot {
637 border: 1px solid #fff;
638 -webkit-box-sizing: border-box;
639 -moz-box-sizing: border-box;
640 box-sizing: border-box;
643 -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
644 box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
647 .theme-overlay .screenshot:after {
650 padding-top: 75%; /* using a 4/3 aspect ratio */
653 .theme-overlay .screenshot img {
660 /* Handles old 300px screenshots */
661 .theme-overlay.small-screenshot .theme-screenshots {
665 .theme-overlay.small-screenshot .theme-info {
670 /* Other screenshots, shown small and square */
671 .theme-overlay .screenshot.thumb {
673 border: 1px solid #eee;
675 display: inline-block;
682 .theme-overlay .screenshot.thumb:after {
685 padding-top: 100%; /* using a 1/1 aspect ratio */
688 .theme-overlay .screenshot.thumb img {
698 .theme-overlay .screenshot.selected {
699 background: transparent;
700 border: 2px solid #2ea2cc;
703 .theme-overlay .screenshot.selected img {
707 /* No screenshot placeholder */
708 .theme-browser .theme .theme-screenshot.blank,
709 .theme-overlay .screenshot.blank {
710 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=);
714 * Theme heading information
716 .theme-overlay .theme-info {
721 .theme-overlay .current-label {
725 display: inline-block;
727 -webkit-border-radius: 2px;
730 -webkit-user-select: none;
731 -moz-user-select: none;
732 -ms-user-select: none;
736 .theme-overlay .theme-name {
744 .theme-overlay .theme-version {
749 display: inline-block;
751 -webkit-user-select: none;
752 -moz-user-select: none;
753 -ms-user-select: none;
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 #2ea2cc;
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: 500; /* should overlap #wpadminbar, which is 500 on mobile. */
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: #0074a2;
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 {
1152 body.no-results p.no-themes {
1155 body.show-upload-theme p.no-themes {
1156 display: none !important;
1159 .theme-install-php .add-new-theme {
1160 display: none !important;
1163 @media only screen and (max-width: 1120px) {
1164 .upload-theme .wp-upload-form {
1168 .upload-theme .install-help {
1178 .rating span:before {
1181 display: inline-block;
1182 -webkit-font-smoothing: antialiased;
1183 font: normal 20px/1 'dashicons';
1184 vertical-align: top;
1187 .rating-10 span.one:before,
1188 .rating-30 span.two:before,
1189 .rating-50 span.three:before,
1190 .rating-70 span.four:before,
1191 .rating-90 span.five:before {
1195 .rating-20 span.one:before {
1198 .rating-30 span.one:before,
1199 .rating-40 span.one:before,
1200 .rating-40 span.two:before {
1203 .rating-50 span.one:before,
1204 .rating-50 span.two:before,
1205 .rating-60 span.one:before,
1206 .rating-60 span.two:before,
1207 .rating-60 span.three:before {
1210 .rating-70 span.one:before,
1211 .rating-70 span.two:before,
1212 .rating-70 span.three:before,
1213 .rating-80 span.one:before,
1214 .rating-80 span.two:before,
1215 .rating-80 span.three:before,
1216 .rating-80 span.four:before {
1219 .rating-90 span.one:before,
1220 .rating-90 span.two:before,
1221 .rating-90 span.three:before,
1222 .rating-90 span.four:before,
1223 .rating-100 span.one:before,
1224 .rating-100 span.two:before,
1225 .rating-100 span.three:before,
1226 .rating-100 span.four:before,
1227 .rating-100 span.five:before {
1236 /*------------------------------------------------------------------------------
1237 16.3 - Custom Header Screen
1238 ------------------------------------------------------------------------------*/
1240 .appearance_page_custom-header #headimg {
1241 border: 1px solid #DFDFDF;
1246 .appearance_page_custom-header #upload-form p label {
1250 .appearance_page_custom-header .available-headers .default-header {
1252 margin: 0 0 20px 20px;
1255 .appearance_page_custom-header .random-header {
1257 margin: 0 0 20px 20px;
1258 vertical-align: middle;
1261 .appearance_page_custom-header .available-headers label input,
1262 .appearance_page_custom-header .random-header label input {
1266 .appearance_page_custom-header .available-headers label img {
1267 vertical-align: middle;
1271 /*------------------------------------------------------------------------------
1272 16.4 - Custom Background Screen
1273 ------------------------------------------------------------------------------*/
1275 div#custom-background-image {
1277 border: 1px solid #dfdfdf;
1280 div#custom-background-image img {
1285 /*------------------------------------------------------------------------------
1286 23.0 - Full Overlay w/ Sidebar
1287 ------------------------------------------------------------------------------*/
1289 body.full-overlay-active {
1294 background: transparent;
1306 .wp-full-overlay-sidebar {
1307 -webkit-box-sizing: border-box;
1308 -moz-box-sizing: border-box;
1309 box-sizing: border-box;
1323 .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
1327 .wp-full-overlay.collapsed,
1328 .wp-full-overlay.expanded .wp-full-overlay-sidebar {
1329 margin-right: 0 !important;
1332 .wp-full-overlay.expanded {
1333 margin-right: 300px;
1336 .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
1337 margin-right: -300px;
1340 .wp-full-overlay-sidebar:after {
1351 .wp-full-overlay-main {
1360 .wp-full-overlay-sidebar .wp-full-overlay-header {
1370 -webkit-box-shadow: none;
1374 .wp-full-overlay-sidebar .wp-full-overlay-header a.back {
1378 .wp-full-overlay-sidebar .wp-full-overlay-footer {
1380 border-bottom: none;
1382 -webkit-box-shadow: none;
1386 .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
1395 /* Close & Navigation Links */
1396 .theme-install-overlay .wp-full-overlay-sidebar .wp-full-overlay-header {
1400 .theme-install-overlay .close-full-overlay,
1401 .theme-install-overlay .previous-theme,
1402 .theme-install-overlay .next-theme {
1410 border-left: 1px solid #ddd;
1413 text-decoration: none;
1414 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
1415 transition: color .1s ease-in-out, background .1s ease-in-out;
1418 .theme-install-overlay .close-full-overlay:hover,
1419 .theme-install-overlay .close-full-overlay:focus,
1420 .theme-install-overlay .previous-theme:hover,
1421 .theme-install-overlay .previous-theme:focus,
1422 .theme-install-overlay .next-theme:hover,
1423 .theme-install-overlay .next-theme:focus {
1428 -webkit-box-shadow: none;
1432 .theme-install-overlay .close-full-overlay:before {
1433 font: normal 22px/1 dashicons;
1440 .theme-install-overlay .previous-theme:before {
1441 font: normal 20px/1 dashicons;
1448 .theme-install-overlay .next-theme:before {
1449 font: normal 20px/1 dashicons;
1456 .theme-install-overlay .previous-theme.disabled,
1457 .theme-install-overlay .next-theme.disabled,
1458 .theme-install-overlay .previous-theme.disabled:hover,
1459 .theme-install-overlay .previous-theme.disabled:focus,
1460 .theme-install-overlay .next-theme.disabled:hover,
1461 .theme-install-overlay .next-theme.disabled:focus {
1465 pointer-events: none;
1468 .rtl .theme-install-overlay .previous-theme:before {
1472 .rtl .theme-install-overlay .next-theme:before {
1476 /* Collapse Button */
1477 .wp-full-overlay a.collapse-sidebar {
1487 -webkit-border-radius: 50%;
1490 text-decoration: none;
1493 .wp-full-overlay a.collapse-sidebar:hover {
1497 .wp-full-overlay.collapsed .collapse-sidebar {
1502 .wp-full-overlay .collapse-sidebar-arrow {
1512 .wp-full-overlay .collapse-sidebar-arrow:before {
1513 -webkit-border-radius: 50%;
1518 font: normal 20px/1 'dashicons';
1525 -webkit-font-smoothing: antialiased;
1526 -moz-osx-font-smoothing: grayscale;
1527 text-decoration: none !important;
1530 .wp-full-overlay.collapsed .collapse-sidebar-arrow:before,
1531 .rtl .wp-full-overlay .collapse-sidebar-arrow:before {
1532 -webkit-transform: rotate(180deg);
1533 -ms-transform: rotate(180deg);
1534 transform: rotate(180deg);
1537 .rtl .wp-full-overlay.collapsed .collapse-sidebar-arrow:before {
1538 -webkit-transform: none;
1539 -ms-transform: none;
1543 .wp-full-overlay.collapsed .collapse-sidebar-arrow {
1544 background-position: -1px -109px;
1547 .wp-full-overlay .collapse-sidebar-label {
1554 .wp-full-overlay.collapsed .collapse-sidebar-label {
1560 .wp-full-overlay-sidebar,
1561 .wp-full-overlay .collapse-sidebar,
1562 .wp-full-overlay-main {
1563 -webkit-transition-property: right, left, top, bottom, width, margin;
1564 transition-property: right, left, top, bottom, width, margin;
1565 -webkit-transition-duration: 0.2s;
1566 transition-duration: 0.2s;
1569 /*------------------------------------------------------------------------------
1570 24.0 - Customize Loader
1571 ------------------------------------------------------------------------------*/
1573 .no-customize-support .hide-if-no-customize,
1574 .customize-support .hide-if-customize,
1575 .no-customize-support.wp-core-ui .hide-if-no-customize,
1576 .no-customize-support .wp-core-ui .hide-if-no-customize,
1577 .customize-support.wp-core-ui .hide-if-customize,
1578 .customize-support .wp-core-ui .hide-if-customize {
1582 #customize-container {
1595 .customize-active #customize-container {
1599 .customize-loading #customize-container iframe {
1603 .customize-loading #customize-container {
1604 background: #fff url(../images/spinner.gif) no-repeat fixed center center;
1605 -webkit-background-size: 20px 20px;
1606 background-size: 20px 20px;
1609 #customize-container iframe,
1610 .theme-install-overlay iframe {
1614 -webkit-transition: opacity 0.3s;
1615 transition: opacity 0.3s;
1618 #customize-container .collapse-sidebar {
1622 #customize-controls {
1626 .theme-install-overlay {
1630 .theme-install-overlay.single-theme {
1634 .install-theme-info {
1636 padding: 10px 20px 60px;
1639 .single-theme .install-theme-info {
1643 .theme-install-overlay .install-theme-info {
1647 .install-theme-info .theme-install {
1652 .install-theme-info .theme-name {
1659 .install-theme-info .theme-screenshot {
1662 border: 1px solid #ccc;
1665 .install-theme-info .theme-details {
1669 .theme-details .theme-version {
1674 .theme-details .star-rating {
1679 .theme-details .theme-description {
1686 .theme-install-overlay .wp-full-overlay-header .theme-install {
1688 margin: 8px 0 0 10px;
1689 /* For when .theme-install is a span rather than a.button-primary (already installed theme) */
1693 .theme-install-overlay .wp-full-overlay-sidebar {
1695 border-left: 1px solid #ddd;
1698 .theme-install-overlay .wp-full-overlay-sidebar-content {
1700 border-top: 1px solid #ddd;
1701 border-bottom: 1px solid #ddd;
1704 .theme-install-overlay .wp-full-overlay-main {
1705 background: #fff url(../images/spinner.gif) no-repeat center center;
1706 -webkit-background-size: 20px 20px;
1707 background-size: 20px 20px;
1711 -------------------------------------------------------------- */
1717 (-o-min-device-pixel-ratio: 5/4),
1718 (-webkit-min-device-pixel-ratio: 1.25),
1719 (min-resolution: 120dpi) {
1720 .wp-full-overlay .collapse-sidebar-arrow {
1721 background-image: url(../images/arrows-2x.png);
1722 -webkit-background-size: 15px 123px;
1723 background-size: 15px 123px;
1726 .customize-loading #customize-container,
1727 .theme-install-overlay .wp-full-overlay-main {
1728 background-image: url(../images/spinner-2x.gif);
1731 .theme-install-overlay .wp-full-overlay-header .theme-install {
1736 @media screen and ( max-width: 782px ) {
1737 .available-theme .action-links .delete-theme {
1744 .available-theme .action-links .delete-theme a {
1748 .broken-themes table {
1752 .theme-install-overlay .wp-full-overlay-header .theme-install {
1754 line-height: normal;