1 /*------------------------------------------------------------------------------
3 ------------------------------------------------------------------------------*/
6 /*------------------------------------------------------------------------------
8 ------------------------------------------------------------------------------*/
10 .theme-browser .themes {
14 .themes-php:not(.network-admin) .wrap h1 {
18 .themes-php .wrap h1 .button {
23 .themes-php .wp-filter-search {
34 /* Position admin messages */
36 .theme .notice.is-dismissible {
46 * (has flexible margins)
48 .theme-browser .theme {
54 border: 1px solid #ddd;
55 -webkit-box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
56 box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
57 -webkit-box-sizing: border-box;
58 -moz-box-sizing: border-box;
59 box-sizing: border-box;
62 .ie8 .theme-browser .theme {
67 .theme-browser .theme:nth-child(3n) {
71 .theme-browser .theme:hover,
72 .theme-browser .theme:focus {
76 .theme-browser .theme .theme-name {
82 -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
83 box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
86 text-overflow: ellipsis;
88 background: rgba(255,255,255,0.65);
91 /* Activate and Customize buttons, shown on hover and focus */
92 .theme-browser .theme .theme-actions {
93 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
95 -webkit-transition: opacity 0.1s ease-in-out;
96 transition: opacity 0.1s ease-in-out;
101 padding: 9px 10px 0 10px;
102 background: rgba(244, 244, 244, 0.7);
103 border-left: 1px solid rgba(0,0,0,0.05);
106 .theme-browser .theme:hover .theme-actions,
107 .theme-browser .theme.focus .theme-actions,
108 .theme-browser .theme:focus .theme-actions {
109 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
113 .theme-browser .theme .theme-actions .button-primary {
117 .theme-browser .theme .theme-actions .button-secondary {
125 * Has a fixed aspect ratio of 1.5 to 1 regardless of screenshot size
126 * It is also responsive.
128 .theme-browser .theme .theme-screenshot {
132 -webkit-backface-visibility: hidden; /* Prevents flicker of the screenshot on hover. */
133 -webkit-transition: opacity 0.2s ease-in-out;
134 transition: opacity 0.2s ease-in-out;
137 .theme-browser .theme .theme-screenshot:after {
140 padding-top: 66.66666%; /* using a 3/2 aspect ratio */
143 .theme-browser .theme .theme-screenshot img {
149 -webkit-transition: opacity 0.2s ease-in-out;
150 transition: opacity 0.2s ease-in-out;
153 .theme-browser .theme:hover .theme-screenshot,
154 .theme-browser .theme:focus .theme-screenshot {
158 .theme-browser.rendered .theme:hover .theme-screenshot img,
159 .theme-browser.rendered .theme:focus .theme-screenshot img {
163 .theme-browser .theme .more-details {
164 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
171 background: rgba(0,0,0,0.7);
174 text-shadow: 0 1px 0 rgba(0,0,0,0.6);
175 -webkit-font-smoothing: antialiased;
179 -webkit-border-radius: 3px;
181 -webkit-transition: opacity 0.1s ease-in-out;
182 transition: opacity 0.1s ease-in-out;
185 .theme-browser .theme:focus {
186 border-color: #5b9dd9;
187 -webkit-box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
188 box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
191 .theme-browser .theme:focus .more-details {
195 /* Current theme needs to have its action always on view */
196 .theme-browser .theme.active:focus .theme-actions {
200 .theme-browser.rendered .theme:hover .more-details,
201 .theme-browser.rendered .theme:focus .more-details {
202 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
207 * The currently active theme
209 .theme-browser .theme.active .theme-name {
212 padding-right: 110px;
214 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.5);
215 box-shadow: inset 0 1px 1px rgba(0,0,0,0.5);
218 .theme-browser .customize-control .theme.active .theme-name {
222 .theme-browser .theme.active .theme-name span {
226 .theme-browser .theme.active .theme-actions {
227 background: rgba(49,49,49,0.7);
232 .theme-browser .theme.active .theme-actions .button-primary {
236 .theme-browser .theme .theme-author {
247 .theme-browser .theme.display-author .theme-author {
251 .theme-browser .theme.display-author .theme-author a {
253 text-decoration: none;
259 .theme-browser .theme.add-new-theme {
261 -webkit-box-shadow: none;
265 .theme-browser .theme.add-new-theme a {
266 text-decoration: none;
272 .theme-browser .theme.add-new-theme a:after {
275 background: transparent;
276 background: rgba(0, 0, 0, 0);
284 border: 5px dashed #d5d2ca;
285 border: 5px dashed rgba(0, 0, 0, 0.1);
286 -webkit-box-sizing: border-box;
287 -moz-box-sizing: border-box;
288 box-sizing: border-box;
291 .theme-browser .theme.add-new-theme span:after {
293 background: rgba(153, 153, 153, 0.1);
294 -webkit-border-radius: 50%;
296 display: inline-block;
298 -webkit-font-smoothing: antialiased;
299 font: normal 74px/115px dashicons;
302 vertical-align: middle;
304 color: rgb(153, 153, 153);
315 .rtl .theme-browser .theme.add-new-theme span:after {
319 .theme-browser .theme.add-new-theme a:hover .theme-screenshot,
320 .theme-browser .theme.add-new-theme a:focus .theme-screenshot {
324 .theme-browser .theme.add-new-theme a:hover span:after,
325 .theme-browser .theme.add-new-theme a:focus span:after {
330 .theme-browser .theme.add-new-theme a:hover:after,
331 .theme-browser .theme.add-new-theme a:focus:after {
332 border-color: transparent;
338 .theme-browser .theme.add-new-theme .theme-name {
341 -webkit-box-shadow: none;
348 padding-bottom: 48px;
351 .theme-browser .theme.add-new-theme a:hover .theme-name,
352 .theme-browser .theme.add-new-theme a:focus .theme-name {
359 * Shown when clicking a theme
361 .theme-overlay .theme-backdrop {
368 background: rgba( 238, 238, 238, 0.9 );
369 z-index: 10000; /* Over WP Pointers. */
372 .theme-overlay .theme-header {
378 border-bottom: 1px solid #ddd;
381 .theme-overlay .theme-header button {
385 .theme-overlay .theme-header .close {
392 border-left: 1px solid #ddd;
393 background-color: transparent;
394 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
395 transition: color .1s ease-in-out, background .1s ease-in-out;
398 .theme-overlay .theme-header .close:before {
399 font: normal 22px/50px dashicons !important;
401 display: inline-block;
406 /* Left and right navigation */
407 .theme-overlay .theme-header .right,
408 .theme-overlay .theme-header .left {
411 background-color: transparent;
417 border-right: 1px solid #ddd;
418 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
419 transition: color .1s ease-in-out, background .1s ease-in-out;
422 .theme-overlay .theme-header .close:focus,
423 .theme-overlay .theme-header .close:hover,
424 .theme-overlay .theme-header .right:focus,
425 .theme-overlay .theme-header .right:hover,
426 .theme-overlay .theme-header .left:focus,
427 .theme-overlay .theme-header .left:hover {
433 .theme-overlay .theme-header .close:focus:before,
434 .theme-overlay .theme-header .close:hover:before {
438 .theme-overlay .theme-header .close:focus,
439 .theme-overlay .theme-header .right:focus,
440 .theme-overlay .theme-header .left:focus {
441 -webkit-box-shadow: none;
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 {
455 .theme-overlay .theme-header .right:before,
456 .theme-overlay .theme-header .left:before {
457 font: normal 20px/50px dashicons !important;
462 .theme-overlay .theme-header .left:before {
466 .theme-overlay .theme-header .right:before {
470 .theme-overlay .theme-wrap {
478 -webkit-box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
479 box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
480 z-index: 10000; /* Over WP Pointers. */
481 -webkit-box-sizing: border-box;
482 -moz-box-sizing: border-box;
483 box-sizing: border-box;
484 -webkit-overflow-scrolling: touch;
487 body.folded .theme-browser ~ .theme-overlay .theme-wrap {
491 .theme-overlay .theme-about {
501 .theme-overlay .theme-actions {
507 padding: 10px 25px 5px;
510 -webkit-box-sizing: border-box;
511 -moz-box-sizing: border-box;
512 box-sizing: border-box;
513 border-top: 1px solid #eee;
516 .ie8 .theme-overlay .theme-actions {
517 border: 1px solid #eee;
520 .theme-overlay .theme-actions a {
525 /* Hide-if-customize for items we can't add classes to */
526 .customize-support .theme-overlay .theme-actions a[href="themes.php?page=custom-header"],
527 .customize-support .theme-overlay .theme-actions a[href="themes.php?page=custom-background"] {
531 .broken-themes a.delete-theme,
532 .theme-overlay .theme-actions .delete-theme {
534 text-decoration: none;
535 border-color: transparent;
536 -webkit-box-shadow: none;
538 background: transparent;
541 .theme-overlay .theme-actions .delete-theme {
547 .broken-themes a.delete-theme:hover,
548 .broken-themes a.delete-theme:focus,
549 .theme-overlay .theme-actions .delete-theme:hover,
550 .theme-overlay .theme-actions .delete-theme:focus {
553 border-color: #d54e21;
556 .theme-overlay .theme-actions .active-theme,
557 .theme-overlay.active .theme-actions .inactive-theme {
561 .theme-overlay .theme-actions .inactive-theme,
562 .theme-overlay.active .theme-actions .active-theme {
567 * Theme Screenshots gallery
569 .theme-overlay .theme-screenshots {
577 /* First screenshot, shown big */
578 .theme-overlay .screenshot {
579 border: 1px solid #fff;
580 -webkit-box-sizing: border-box;
581 -moz-box-sizing: border-box;
582 box-sizing: border-box;
585 -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
586 box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
589 .theme-overlay .screenshot:after {
592 padding-top: 75%; /* using a 4/3 aspect ratio */
595 .theme-overlay .screenshot img {
602 /* Handles old 300px screenshots */
603 .theme-overlay.small-screenshot .theme-screenshots {
607 .theme-overlay.small-screenshot .theme-info {
612 /* Other screenshots, shown small and square */
613 .theme-overlay .screenshot.thumb {
615 border: 1px solid #eee;
617 display: inline-block;
624 .theme-overlay .screenshot.thumb:after {
627 padding-top: 100%; /* using a 1/1 aspect ratio */
630 .theme-overlay .screenshot.thumb img {
640 .theme-overlay .screenshot.selected {
641 background: transparent;
642 border: 2px solid #00a0d2;
645 .theme-overlay .screenshot.selected img {
649 /* No screenshot placeholder */
650 .theme-browser .theme .theme-screenshot.blank,
651 .theme-overlay .screenshot.blank {
652 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=);
656 * Theme heading information
658 .theme-overlay .theme-info {
663 .theme-overlay .current-label {
667 display: inline-block;
669 -webkit-border-radius: 2px;
672 -webkit-user-select: none;
673 -moz-user-select: none;
674 -ms-user-select: none;
678 .theme-overlay .theme-name {
684 word-wrap: break-word;
685 overflow-wrap: break-word;
688 .theme-overlay .theme-version {
693 display: inline-block;
697 .theme-overlay .theme-author {
702 line-height: inherit;
705 .theme-overlay .theme-author a {
706 text-decoration: none;
709 .theme-overlay .theme-description {
717 .theme-overlay .theme-tags {
718 border-top: 3px solid #eee;
726 .theme-overlay .theme-tags span {
732 .theme-overlay .parent-theme {
734 border: 1px solid #eee;
735 border-left: 4px solid #00a0d2;
739 padding: 10px 10px 10px 20px;
742 .theme-overlay .parent-theme strong {
748 * Displays detailed view inline when a user has no switch capabilities
750 .single-theme .theme-overlay .theme-backdrop,
751 .single-theme .theme-overlay .theme-header,
752 .single-theme .theme {
756 .single-theme .theme-overlay .theme-wrap {
767 .single-theme .theme-overlay .theme-about {
768 padding: 30px 30px 70px;
772 .single-theme .theme-overlay .theme-actions {
777 * Basic Responsive structure...
779 * Shuffles theme columns around based on screen width
782 @media only screen and (min-width: 2000px) {
783 #wpwrap .theme-browser .theme {
788 #wpwrap .theme-browser .theme:nth-child(3n),
789 #wpwrap .theme-browser .theme:nth-child(4n) {
793 #wpwrap .theme-browser .theme:nth-child(5n) {
798 @media only screen and (min-width: 1680px) {
799 .theme-overlay .theme-wrap {
805 /* Maximum screenshot width reaches 440px */
806 @media only screen and (min-width: 1640px) {
807 .theme-browser .theme {
811 .theme-browser .theme .theme-screenshot:after {
812 padding-top: 75%; /* using a 4/3 aspect ratio */
815 .theme-browser .theme:nth-child(3n) {
819 .theme-browser .theme:nth-child(4n) {
823 /* Maximum screenshot width reaches 440px */
824 @media only screen and (max-width: 1120px) {
825 .theme-browser .theme {
830 .theme-browser .theme:nth-child(even) {
834 .theme-browser .theme:nth-child(odd) {
839 /* Admin menu is folded */
840 @media only screen and (max-width: 900px) {
841 .theme-overlay .theme-wrap {
846 @media only screen and (max-width: 780px) {
847 body.folded .theme-overlay .theme-wrap,
848 .theme-overlay .theme-wrap {
849 top: 0; /* The adminmenu isn't fixed on mobile, so this can use the full viewport height */
853 padding: 70px 20px 20px;
855 z-index: 100000; /* should overlap #wpadminbar. */
859 .theme-browser .theme.active .theme-name span {
860 /* Hide the "Active: " label on smaller screens. */
864 .theme-overlay .theme-screenshots {
868 .theme-overlay .theme-info {
871 .single-theme .theme-wrap {
875 .theme-browser .theme .theme-actions {
876 padding: 5px 10px 4px 10px;
879 .theme-overlay.small-screenshot .theme-screenshots {
885 .theme-overlay.small-screenshot .theme-info {
890 .theme:not(.active):hover .theme-actions,
891 .theme:not(.active):focus .theme-actions,
892 .theme:hover .more-details,
893 .theme:focus .more-details {
897 .theme-browser.rendered .theme:hover .theme-screenshot img,
898 .theme-browser.rendered .theme:focus .theme-screenshot img {
903 @media only screen and (max-width: 480px) {
904 .theme-browser .theme {
909 .theme-browser .theme:nth-child(2n),
910 .theme-browser .theme:nth-child(3n) {
915 @media only screen and (max-width: 650px) {
916 .theme-overlay .theme-description {
920 .theme-overlay .theme-actions .delete-theme {
926 .theme-overlay .theme-actions .inactive-theme {
930 .theme-overlay .theme-screenshots {
935 .theme-overlay .theme-info {
939 .theme-overlay .theme-author {
940 margin: 5px 0 15px 0;
943 .theme-overlay .current-label {
948 .themes-php .wp-filter-search {
959 .theme-browser .theme.add-new-theme span:after {
960 font: normal 60px/90px dashicons;
969 .single-theme .theme-wrap {
970 margin: 0 -12px 0 -10px;
973 .single-theme .theme-overlay .theme-about {
977 .single-theme .current-label {
980 .single-theme .theme-overlay .theme-actions {
989 .broken-themes table {
997 /*------------------------------------------------------------------------------
998 16.2 - Install Themes
999 ------------------------------------------------------------------------------*/
1001 /* Already installed theme */
1002 .theme-browser .theme .theme-installed {
1003 background: #0073aa;
1005 .theme-browser .theme .notice-success p:before {
1008 display: inline-block;
1009 font: normal 20px/1 'dashicons';
1010 -webkit-font-smoothing: antialiased;
1011 -moz-osx-font-smoothing: grayscale;
1012 vertical-align: top;
1015 .theme-install.updated-message:before {
1019 .theme-install-php .wp-filter {
1023 .theme-install-php a.upload,
1024 .theme-install-php a.browse-themes {
1028 .upload-view-toggle .browse,
1029 .plugin-install-tab-upload .upload-view-toggle .upload {
1033 .plugin-install-tab-upload .upload-view-toggle .browse {
1039 -webkit-box-sizing: border-box;
1040 -moz-box-sizing: border-box;
1041 box-sizing: border-box;
1051 .upload-plugin-wrap {
1055 .show-upload-view .upload-theme,
1056 .show-upload-view .upload-plugin,
1057 .show-upload-view .upload-plugin-wrap,
1058 .plugin-install-tab-upload .upload-plugin {
1062 .upload-theme .wp-upload-form,
1063 .upload-plugin .wp-upload-form {
1064 background: #fafafa;
1065 border: 1px solid #e5e5e5;
1070 .upload-theme .install-help,
1071 .upload-plugin .install-help {
1072 color: #555d66; /* #f1f1f1 background */
1091 .no-results p.no-themes {
1095 .theme-install-php .add-new-theme {
1096 display: none !important;
1099 @media only screen and (max-width: 1120px) {
1100 .upload-theme .wp-upload-form {
1104 .upload-theme .install-help {
1111 .theme-details .theme-rating {
1115 .theme-details .star-rating {
1119 .theme-details .num-ratings,
1120 .theme-details .no-rating {
1125 .theme-details .no-rating {
1130 /*------------------------------------------------------------------------------
1131 16.3 - Custom Header Screen
1132 ------------------------------------------------------------------------------*/
1134 .appearance_page_custom-header #headimg {
1135 border: 1px solid #ddd;
1140 .appearance_page_custom-header #upload-form p label {
1144 .appearance_page_custom-header .available-headers .default-header {
1146 margin: 0 20px 20px 0;
1149 .appearance_page_custom-header .random-header {
1151 margin: 0 20px 20px 0;
1152 vertical-align: middle;
1155 .appearance_page_custom-header .available-headers label input,
1156 .appearance_page_custom-header .random-header label input {
1160 .appearance_page_custom-header .available-headers label img {
1161 vertical-align: middle;
1165 /*------------------------------------------------------------------------------
1166 16.4 - Custom Background Screen
1167 ------------------------------------------------------------------------------*/
1169 div#custom-background-image {
1171 border: 1px solid #ddd;
1174 div#custom-background-image img {
1179 /*------------------------------------------------------------------------------
1180 23.0 - Full Overlay w/ Sidebar
1181 ------------------------------------------------------------------------------*/
1183 body.full-overlay-active {
1188 background: transparent;
1200 .wp-full-overlay-sidebar {
1201 -webkit-box-sizing: border-box;
1202 -moz-box-sizing: border-box;
1203 box-sizing: border-box;
1217 .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
1221 .wp-full-overlay.collapsed,
1222 .wp-full-overlay.expanded .wp-full-overlay-sidebar {
1223 margin-left: 0 !important;
1226 .wp-full-overlay.expanded {
1230 .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
1231 margin-left: -300px;
1234 .wp-full-overlay-sidebar:after {
1245 .wp-full-overlay-main {
1254 .wp-full-overlay-sidebar .wp-full-overlay-header {
1264 -webkit-box-shadow: none;
1268 .wp-full-overlay-sidebar .wp-full-overlay-header a.back {
1272 .wp-full-overlay-sidebar .wp-full-overlay-footer {
1274 border-bottom: none;
1276 -webkit-box-shadow: none;
1280 .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
1289 /* Close & Navigation Links */
1290 .theme-install-overlay .wp-full-overlay-sidebar .wp-full-overlay-header {
1294 .theme-install-overlay .close-full-overlay,
1295 .theme-install-overlay .previous-theme,
1296 .theme-install-overlay .next-theme {
1304 border-right: 1px solid #ddd;
1307 text-decoration: none;
1308 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
1309 transition: color .1s ease-in-out, background .1s ease-in-out;
1312 .theme-install-overlay .close-full-overlay:hover,
1313 .theme-install-overlay .close-full-overlay:focus,
1314 .theme-install-overlay .previous-theme:hover,
1315 .theme-install-overlay .previous-theme:focus,
1316 .theme-install-overlay .next-theme:hover,
1317 .theme-install-overlay .next-theme:focus {
1322 -webkit-box-shadow: none;
1326 .theme-install-overlay .close-full-overlay:before {
1327 font: normal 22px/1 dashicons;
1334 .theme-install-overlay .previous-theme:before {
1335 font: normal 20px/1 dashicons;
1342 .theme-install-overlay .next-theme:before {
1343 font: normal 20px/1 dashicons;
1350 .theme-install-overlay .previous-theme.disabled,
1351 .theme-install-overlay .next-theme.disabled,
1352 .theme-install-overlay .previous-theme.disabled:hover,
1353 .theme-install-overlay .previous-theme.disabled:focus,
1354 .theme-install-overlay .next-theme.disabled:hover,
1355 .theme-install-overlay .next-theme.disabled:focus {
1359 pointer-events: none;
1362 .theme-install-overlay .close-full-overlay,
1363 .theme-install-overlay .previous-theme,
1364 .theme-install-overlay .next-theme {
1370 .theme-install-overlay .close-full-overlay:before,
1371 .theme-install-overlay .previous-theme:before,
1372 .theme-install-overlay .next-theme:before {
1377 /* Collapse Button */
1378 .wp-core-ui .wp-full-overlay .collapse-sidebar {
1382 padding: 9px 0 9px 10px;
1387 background-color: transparent !important;
1388 border: none !important;
1389 -webkit-box-shadow: none !important;
1390 box-shadow: none !important;
1391 -webkit-border-radius: 0 !important;
1392 border-radius: 0 !important;
1395 .wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
1396 .wp-core-ui .wp-full-overlay .collapse-sidebar:focus {
1400 .wp-full-overlay .collapse-sidebar-arrow,
1401 .wp-full-overlay .collapse-sidebar-label {
1402 display: inline-block;
1403 vertical-align: middle;
1407 .wp-full-overlay .collapse-sidebar-arrow {
1410 margin: 0 2px; /* avoid the focus box-shadow to be cut-off */
1411 -webkit-border-radius: 50%;
1416 .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow,
1417 .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow {
1420 0 0 2px 1px rgba(30, 140, 190, .8);
1423 0 0 2px 1px rgba(30, 140, 190, .8);
1426 .wp-full-overlay .collapse-sidebar-label {
1430 .wp-full-overlay.collapsed .collapse-sidebar-label {
1434 .wp-full-overlay .collapse-sidebar-arrow:before {
1438 font: normal 20px/1 dashicons;
1441 -webkit-font-smoothing: antialiased;
1442 -moz-osx-font-smoothing: grayscale;
1445 .wp-core-ui .wp-full-overlay.collapsed .collapse-sidebar {
1450 .wp-full-overlay.collapsed .collapse-sidebar-arrow:before,
1451 .rtl .wp-full-overlay .collapse-sidebar-arrow:before {
1452 -webkit-transform: rotate(180.001deg);
1453 -ms-transform: rotate(180.001deg);
1454 transform: rotate(180.001deg); /* Firefox: promoting to its own layer to trigger anti-aliasing */
1457 .rtl .wp-full-overlay.collapsed .collapse-sidebar-arrow:before {
1458 -webkit-transform: none;
1459 -ms-transform: none;
1465 .wp-full-overlay-sidebar,
1466 .wp-full-overlay .collapse-sidebar,
1467 .wp-full-overlay-main {
1468 -webkit-transition-property: left, right, top, bottom, width, margin;
1469 transition-property: left, right, top, bottom, width, margin;
1470 -webkit-transition-duration: 0.2s;
1471 transition-duration: 0.2s;
1474 /* Device/preview size toggles */
1477 background: #191e23;
1480 .wp-full-overlay-main {
1481 background-color: #f1f1f1;
1484 .expanded .wp-full-overlay-footer {
1490 border-top: 1px solid #ddd;
1494 .wp-full-overlay-footer .devices {
1498 .wp-full-overlay-footer .devices button {
1500 background: transparent;
1505 -webkit-box-shadow: none;
1507 border-top: 1px solid transparent;
1508 border-bottom: 4px solid transparent;
1509 -webkit-transition: background .1s ease-in-out;
1510 transition: background .1s ease-in-out;
1513 .wp-full-overlay-footer .devices button:focus {
1514 -webkit-box-shadow: none;
1519 .wp-full-overlay-footer .devices button:before {
1520 display: inline-block;
1521 -webkit-font-smoothing: antialiased;
1522 font: normal 20px/30px "dashicons";
1523 vertical-align: top;
1529 .wp-full-overlay-footer .devices button.active {
1530 border-bottom-color: #191e23;
1533 .wp-full-overlay-footer .devices button:hover,
1534 .wp-full-overlay-footer .devices button:focus {
1535 background-color: #fff;
1538 .wp-full-overlay-footer .devices button:focus {
1539 background-color: #fff;
1540 border-bottom-color: #0073aa;
1543 .wp-full-overlay-footer .devices button.active:before,
1544 .wp-full-overlay-footer .devices button:hover:before,
1545 .wp-full-overlay-footer .devices button:focus:before {
1549 .wp-full-overlay-footer .devices .preview-desktop:before {
1553 .wp-full-overlay-footer .devices .preview-tablet:before {
1557 .wp-full-overlay-footer .devices .preview-mobile:before {
1561 @media screen and (max-width:1024px) {
1562 .wp-full-overlay-footer .devices {
1567 .collapsed .wp-full-overlay-footer .devices button:before {
1571 .preview-mobile .wp-full-overlay-main {
1572 margin: auto 0 auto -160px;
1580 .preview-tablet .wp-full-overlay-main {
1581 margin: auto 0 auto -360px;
1582 width: 720px; /* Size is loosely based on a typical "tablet" device size. Intentionally ambiguous - this does not represent any particular device precisely. */
1590 /*------------------------------------------------------------------------------
1591 24.0 - Customize Loader
1592 ------------------------------------------------------------------------------*/
1594 .no-customize-support .hide-if-no-customize,
1595 .customize-support .hide-if-customize,
1596 .no-customize-support.wp-core-ui .hide-if-no-customize,
1597 .no-customize-support .wp-core-ui .hide-if-no-customize,
1598 .customize-support.wp-core-ui .hide-if-customize,
1599 .customize-support .wp-core-ui .hide-if-customize {
1603 #customize-container {
1616 .customize-active #customize-container {
1620 .customize-loading #customize-container iframe {
1624 #customize-container iframe,
1625 .theme-install-overlay iframe {
1629 -webkit-transition: opacity 0.3s;
1630 transition: opacity 0.3s;
1633 #customize-controls {
1637 .theme-install-overlay {
1641 .theme-install-overlay.single-theme {
1645 .install-theme-info {
1647 padding: 10px 20px 60px;
1650 .single-theme .install-theme-info {
1654 .theme-install-overlay .install-theme-info {
1658 .install-theme-info .theme-install {
1663 .install-theme-info .theme-name {
1670 .install-theme-info .theme-screenshot {
1673 border: 1px solid #ccc;
1676 .install-theme-info .theme-details {
1680 .theme-details .theme-version {
1684 .theme-details .theme-description {
1691 .theme-install-overlay .wp-full-overlay-header .button {
1693 margin: 8px 10px 0 0;
1694 /* For when .theme-install is a span rather than a.button-primary (already installed theme) */
1698 .theme-install-overlay .wp-full-overlay-sidebar {
1700 border-right: 1px solid #ddd;
1703 .theme-install-overlay .wp-full-overlay-sidebar-content {
1705 border-top: 1px solid #ddd;
1706 border-bottom: 1px solid #ddd;
1709 .theme-install-overlay .wp-full-overlay-main {
1712 background-color: #f1f1f1;
1715 .customize-loading #customize-container {
1716 background-color: #f1f1f1;
1719 #customize-preview.wp-full-overlay-main:before,
1720 .customize-loading #customize-container:before,
1721 .theme-install-overlay .wp-full-overlay-main:before {
1730 margin: -10px 0 0 -10px;
1731 -webkit-transform: translateZ(0);
1732 transform: translateZ(0);
1733 background: transparent url(../images/spinner.gif) no-repeat center center;
1734 -webkit-background-size: 20px 20px;
1735 background-size: 20px 20px;
1738 #customize-preview.wp-full-overlay-main.iframe-ready:before,
1739 .theme-install-overlay.iframe-ready .wp-full-overlay-main:before {
1740 background-image: none;
1744 -------------------------------------------------------------- */
1750 (-webkit-min-device-pixel-ratio: 1.25),
1751 (min-resolution: 120dpi) {
1752 .wp-full-overlay .collapse-sidebar-arrow {
1753 background-image: url(../images/arrows-2x.png);
1754 -webkit-background-size: 15px 123px;
1755 background-size: 15px 123px;
1758 #customize-preview.wp-full-overlay-main:before,
1759 .customize-loading #customize-container:before,
1760 .theme-install-overlay .wp-full-overlay-main:before {
1761 background-image: url(../images/spinner-2x.gif);
1765 @media screen and ( max-width: 782px ) {
1766 .available-theme .action-links .delete-theme {
1773 .available-theme .action-links .delete-theme a {
1777 .broken-themes table {
1781 .theme-install-overlay .wp-full-overlay-header .theme-install {
1783 line-height: normal;
1788 .theme .notice:before,
1789 .theme-info .updating-message:before,
1790 .theme-info .updated-message:before,
1791 .theme-install.updating-message:before {