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 {
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 .background-position-control input[type="radio"]:checked ~ .button {
1182 -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 );
1183 box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 );
1187 .background-position-control input[type="radio"]:focus ~ .button {
1188 border-color: #5b9dd9;
1189 -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 ), 0 0 3px rgba( 0, 115, 170, .8 );
1190 box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 ), 0 0 3px rgba( 0, 115, 170, .8 );
1194 .background-position-control .background-position-center-icon,
1195 .background-position-control .background-position-center-icon:before {
1196 display: inline-block;
1199 -webkit-transition: background-color .1s ease-in 0;
1200 transition: background-color .1s ease-in 0;
1203 .background-position-control .background-position-center-icon {
1206 vertical-align: top;
1210 .background-position-control .background-position-center-icon:before {
1211 background-color: #555;
1212 -webkit-border-radius: 50%;
1219 .background-position-control .button:hover .background-position-center-icon:before,
1220 .background-position-control input[type="radio"]:focus ~ .button .background-position-center-icon:before {
1221 background-color: #23282d;
1224 .background-position-control .button-group {
1228 .background-position-control .button-group .button {
1229 -webkit-border-radius: 0;
1231 -webkit-box-shadow: none;
1233 /* Following properties are overridden by buttons responsive styles (see: wp-includes/css/buttons.css). */
1234 height: 40px !important;
1235 line-height: 37px !important;
1236 margin: 0 -1px 0 0 !important;
1237 padding: 0 10px 1px !important;
1241 .background-position-control .button-group .button:active,
1242 .background-position-control .button-group .button:hover,
1243 .background-position-control .button-group .button:focus {
1247 .background-position-control .button-group:last-child .button {
1248 -webkit-box-shadow: 0 1px 0 #ccc;
1249 box-shadow: 0 1px 0 #ccc;
1252 .background-position-control .button-group > label {
1253 margin: 0 !important;
1256 .background-position-control .button-group:first-child > label:first-child .button {
1257 -webkit-border-radius: 3px 0 0;
1258 border-radius: 3px 0 0;
1261 .background-position-control .button-group:first-child > label:first-child .dashicons {
1262 -webkit-transform: rotate( 45deg );
1263 -ms-transform: rotate( 45deg );
1264 transform: rotate( 45deg );
1267 .background-position-control .button-group:first-child > label:last-child .button {
1268 -webkit-border-radius: 0 3px 0 0;
1269 border-radius: 0 3px 0 0;
1272 .background-position-control .button-group:first-child > label:last-child .dashicons {
1273 -webkit-transform: rotate( -45deg );
1274 -ms-transform: rotate( -45deg );
1275 transform: rotate( -45deg );
1278 .background-position-control .button-group:last-child > label:first-child .button {
1279 -webkit-border-radius: 0 0 0 3px;
1280 border-radius: 0 0 0 3px;
1283 .background-position-control .button-group:last-child > label:first-child .dashicons {
1284 -webkit-transform: rotate( -45deg );
1285 -ms-transform: rotate( -45deg );
1286 transform: rotate( -45deg );
1289 .background-position-control .button-group:last-child > label:last-child .button {
1290 -webkit-border-radius: 0 0 3px 0;
1291 border-radius: 0 0 3px 0;
1294 .background-position-control .button-group:last-child > label:last-child .dashicons {
1295 -webkit-transform: rotate( 45deg );
1296 -ms-transform: rotate( 45deg );
1297 transform: rotate( 45deg );
1300 .background-position-control .button-group .dashicons {
1304 .background-position-control .button-group + .button-group {
1308 /*------------------------------------------------------------------------------
1309 23.0 - Full Overlay w/ Sidebar
1310 ------------------------------------------------------------------------------*/
1312 body.full-overlay-active {
1314 /* Hide all the content, the Customizer overlay is then made visible to be the only available content. */
1319 background: transparent;
1331 .wp-full-overlay-sidebar {
1332 -webkit-box-sizing: border-box;
1333 -moz-box-sizing: border-box;
1334 box-sizing: border-box;
1348 .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
1352 .wp-full-overlay.collapsed,
1353 .wp-full-overlay.expanded .wp-full-overlay-sidebar {
1354 margin-left: 0 !important;
1357 .wp-full-overlay.expanded {
1361 .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
1362 margin-left: -300px;
1365 .wp-full-overlay-sidebar:after {
1376 .wp-full-overlay-main {
1385 .wp-full-overlay-sidebar .wp-full-overlay-header {
1395 -webkit-box-shadow: none;
1399 .wp-full-overlay-sidebar .wp-full-overlay-header a.back {
1403 .wp-full-overlay-sidebar .wp-full-overlay-footer {
1405 border-bottom: none;
1407 -webkit-box-shadow: none;
1411 .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
1420 /* Close & Navigation Links */
1421 .theme-install-overlay .wp-full-overlay-sidebar .wp-full-overlay-header {
1425 .theme-install-overlay .close-full-overlay,
1426 .theme-install-overlay .previous-theme,
1427 .theme-install-overlay .next-theme {
1435 border-right: 1px solid #ddd;
1438 text-decoration: none;
1439 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
1440 transition: color .1s ease-in-out, background .1s ease-in-out;
1443 .theme-install-overlay .close-full-overlay:hover,
1444 .theme-install-overlay .close-full-overlay:focus,
1445 .theme-install-overlay .previous-theme:hover,
1446 .theme-install-overlay .previous-theme:focus,
1447 .theme-install-overlay .next-theme:hover,
1448 .theme-install-overlay .next-theme:focus {
1453 -webkit-box-shadow: none;
1457 .theme-install-overlay .close-full-overlay:before {
1458 font: normal 22px/1 dashicons;
1465 .theme-install-overlay .previous-theme:before {
1466 font: normal 20px/1 dashicons;
1473 .theme-install-overlay .next-theme:before {
1474 font: normal 20px/1 dashicons;
1481 .theme-install-overlay .previous-theme.disabled,
1482 .theme-install-overlay .next-theme.disabled,
1483 .theme-install-overlay .previous-theme.disabled:hover,
1484 .theme-install-overlay .previous-theme.disabled:focus,
1485 .theme-install-overlay .next-theme.disabled:hover,
1486 .theme-install-overlay .next-theme.disabled:focus {
1490 pointer-events: none;
1493 .theme-install-overlay .close-full-overlay,
1494 .theme-install-overlay .previous-theme,
1495 .theme-install-overlay .next-theme {
1501 .theme-install-overlay .close-full-overlay:before,
1502 .theme-install-overlay .previous-theme:before,
1503 .theme-install-overlay .next-theme:before {
1508 /* Collapse Button */
1509 .wp-core-ui .wp-full-overlay .collapse-sidebar {
1513 padding: 9px 0 9px 10px;
1518 background-color: transparent !important;
1519 border: none !important;
1520 -webkit-box-shadow: none !important;
1521 box-shadow: none !important;
1522 -webkit-border-radius: 0 !important;
1523 border-radius: 0 !important;
1524 z-index: -1; /* Below device buttons */
1527 .wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
1528 .wp-core-ui .wp-full-overlay .collapse-sidebar:focus {
1532 .wp-full-overlay .collapse-sidebar-arrow,
1533 .wp-full-overlay .collapse-sidebar-label {
1534 display: inline-block;
1535 vertical-align: middle;
1539 .wp-full-overlay .collapse-sidebar-arrow {
1542 margin: 0 2px; /* avoid the focus box-shadow to be cut-off */
1543 -webkit-border-radius: 50%;
1548 .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow,
1549 .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow {
1552 0 0 2px 1px rgba(30, 140, 190, .8);
1555 0 0 2px 1px rgba(30, 140, 190, .8);
1558 .wp-full-overlay .collapse-sidebar-label {
1562 .wp-full-overlay.collapsed .collapse-sidebar-label {
1566 .wp-full-overlay .collapse-sidebar-arrow:before {
1570 font: normal 20px/1 dashicons;
1573 -webkit-font-smoothing: antialiased;
1574 -moz-osx-font-smoothing: grayscale;
1577 .wp-core-ui .wp-full-overlay.collapsed .collapse-sidebar {
1582 .wp-full-overlay.collapsed .collapse-sidebar-arrow:before,
1583 .rtl .wp-full-overlay .collapse-sidebar-arrow:before {
1584 -webkit-transform: rotate(180.001deg);
1585 -ms-transform: rotate(180.001deg);
1586 transform: rotate(180.001deg); /* Firefox: promoting to its own layer to trigger anti-aliasing */
1589 .rtl .wp-full-overlay.collapsed .collapse-sidebar-arrow:before {
1590 -webkit-transform: none;
1591 -ms-transform: none;
1597 .wp-full-overlay-sidebar,
1598 .wp-full-overlay .collapse-sidebar,
1599 .wp-full-overlay-main {
1600 -webkit-transition-property: left, right, top, bottom, width, margin;
1601 transition-property: left, right, top, bottom, width, margin;
1602 -webkit-transition-duration: 0.2s;
1603 transition-duration: 0.2s;
1606 /* Device/preview size toggles */
1609 background: #191e23;
1612 .wp-full-overlay-main {
1613 background-color: #f1f1f1;
1616 .expanded .wp-full-overlay-footer {
1622 border-top: 1px solid #ddd;
1626 .wp-full-overlay-footer .devices {
1629 -webkit-box-shadow: -20px 0 10px -5px #eee;
1630 box-shadow: -20px 0 10px -5px #eee;
1633 .wp-full-overlay-footer .devices button {
1635 background: transparent;
1640 -webkit-box-shadow: none;
1642 border-top: 1px solid transparent;
1643 border-bottom: 4px solid transparent;
1644 -webkit-transition: .15s color ease-in-out,
1645 .15s background-color ease-in-out,
1646 .15s border-color ease-in-out;
1647 transition: .15s color ease-in-out,
1648 .15s background-color ease-in-out,
1649 .15s border-color ease-in-out;
1652 .wp-full-overlay-footer .devices button:focus {
1653 -webkit-box-shadow: none;
1658 .wp-full-overlay-footer .devices button:before {
1659 display: inline-block;
1660 -webkit-font-smoothing: antialiased;
1661 font: normal 20px/30px "dashicons";
1662 vertical-align: top;
1668 .wp-full-overlay-footer .devices button.active {
1669 border-bottom-color: #191e23;
1672 .wp-full-overlay-footer .devices button:hover,
1673 .wp-full-overlay-footer .devices button:focus {
1674 background-color: #fff;
1677 .wp-full-overlay-footer .devices button:focus,
1678 .wp-full-overlay-footer .devices button.active:hover {
1679 border-bottom-color: #0073aa;
1682 .wp-full-overlay-footer .devices button.active:before {
1686 .wp-full-overlay-footer .devices button:hover:before,
1687 .wp-full-overlay-footer .devices button:focus:before {
1691 .wp-full-overlay-footer .devices .preview-desktop:before {
1695 .wp-full-overlay-footer .devices .preview-tablet:before {
1699 .wp-full-overlay-footer .devices .preview-mobile:before {
1703 @media screen and (max-width:1024px) {
1704 .wp-full-overlay-footer .devices {
1709 .collapsed .wp-full-overlay-footer .devices button:before {
1713 .preview-mobile .wp-full-overlay-main {
1714 margin: auto 0 auto -160px;
1722 .preview-tablet .wp-full-overlay-main {
1723 margin: auto 0 auto -360px;
1724 width: 720px; /* Size is loosely based on a typical "tablet" device size. Intentionally ambiguous - this does not represent any particular device precisely. */
1732 /*------------------------------------------------------------------------------
1733 24.0 - Customize Loader
1734 ------------------------------------------------------------------------------*/
1736 .no-customize-support .hide-if-no-customize,
1737 .customize-support .hide-if-customize,
1738 .no-customize-support.wp-core-ui .hide-if-no-customize,
1739 .no-customize-support .wp-core-ui .hide-if-no-customize,
1740 .customize-support.wp-core-ui .hide-if-customize,
1741 .customize-support .wp-core-ui .hide-if-customize {
1745 #customize-container {
1758 /* Make the Customizer and Theme installer overlays the only available content. */
1759 #customize-container,
1760 .theme-install-overlay {
1761 visibility: visible;
1764 .customize-loading #customize-container iframe {
1768 #customize-container iframe,
1769 .theme-install-overlay iframe {
1773 -webkit-transition: opacity 0.3s;
1774 transition: opacity 0.3s;
1777 #customize-controls {
1781 .theme-install-overlay {
1785 .theme-install-overlay.single-theme {
1789 .install-theme-info {
1791 padding: 10px 20px 60px;
1794 .single-theme .install-theme-info {
1798 .theme-install-overlay .install-theme-info {
1802 .install-theme-info .theme-install {
1807 .install-theme-info .theme-name {
1814 .install-theme-info .theme-screenshot {
1817 border: 1px solid #ccc;
1820 .install-theme-info .theme-details {
1824 .theme-details .theme-version {
1828 .theme-details .theme-description {
1835 .theme-install-overlay .wp-full-overlay-header .button {
1837 margin: 8px 10px 0 0;
1838 /* For when .theme-install is a span rather than a.button-primary (already installed theme) */
1842 .theme-install-overlay .wp-full-overlay-sidebar {
1844 border-right: 1px solid #ddd;
1847 .theme-install-overlay .wp-full-overlay-sidebar-content {
1849 border-top: 1px solid #ddd;
1850 border-bottom: 1px solid #ddd;
1853 .theme-install-overlay .wp-full-overlay-main {
1856 background-color: #f1f1f1;
1859 .customize-loading #customize-container {
1860 background-color: #f1f1f1;
1863 #customize-preview.wp-full-overlay-main:before,
1864 .customize-loading #customize-container:before,
1865 .theme-install-overlay .wp-full-overlay-main:before {
1874 margin: -10px 0 0 -10px;
1875 -webkit-transform: translateZ(0);
1876 transform: translateZ(0);
1877 background: transparent url(../images/spinner.gif) no-repeat center center;
1878 -webkit-background-size: 20px 20px;
1879 background-size: 20px 20px;
1882 #customize-preview.wp-full-overlay-main.iframe-ready:before,
1883 .theme-install-overlay.iframe-ready .wp-full-overlay-main:before {
1884 background-image: none;
1888 -------------------------------------------------------------- */
1894 (-webkit-min-device-pixel-ratio: 1.25),
1895 (min-resolution: 120dpi) {
1896 .wp-full-overlay .collapse-sidebar-arrow {
1897 background-image: url(../images/arrows-2x.png);
1898 -webkit-background-size: 15px 123px;
1899 background-size: 15px 123px;
1902 #customize-preview.wp-full-overlay-main:before,
1903 .customize-loading #customize-container:before,
1904 .theme-install-overlay .wp-full-overlay-main:before {
1905 background-image: url(../images/spinner-2x.gif);
1909 @media screen and ( max-width: 782px ) {
1910 .available-theme .action-links .delete-theme {
1917 .available-theme .action-links .delete-theme a {
1921 .broken-themes table {
1925 .theme-install-overlay .wp-full-overlay-header .theme-install {
1927 line-height: normal;
1932 .theme .notice:before,
1933 .theme-info .updating-message:before,
1934 .theme-info .updated-message:before,
1935 .theme-install.updating-message:before {