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 {
28 .themes-php .wrap .theme-count,
29 .theme-navigation .theme-count {
31 -webkit-border-radius: 30px;
47 /* Position admin messages */
48 .themes-php div.updated,
49 .themes-php div.error {
54 .themes-php div.updated a {
55 text-decoration: underline;
60 * (has flexible margins)
62 .theme-browser .theme {
68 border: 1px solid #dedede;
69 -webkit-box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
70 box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
71 -webkit-box-sizing: border-box;
72 -moz-box-sizing: border-box;
73 box-sizing: border-box;
76 .ie8 .theme-browser .theme {
81 .theme-browser .theme:nth-child(3n) {
85 .theme-browser .theme:hover,
86 .theme-browser .theme:focus {
90 .theme-browser .theme .theme-name {
96 -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
97 box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
100 text-overflow: ellipsis;
102 background: rgba(255,255,255,0.65);
105 /* Activate and Customize buttons, shown on hover and focus */
106 .theme-browser .theme .theme-actions {
107 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
109 -webkit-transition: opacity 0.1s ease-in-out;
110 transition: opacity 0.1s ease-in-out;
115 padding: 9px 10px 0 10px;
116 background: rgba(244, 244, 244, 0.7);
117 border-left: 1px solid rgba(0,0,0,0.05);
120 .theme-browser .theme:hover .theme-actions,
121 .theme-browser .theme.focus .theme-actions,
122 .theme-browser .theme:focus .theme-actions {
123 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
127 .theme-browser .theme .theme-actions .button-primary {
131 .theme-browser .theme .theme-actions .button-secondary {
139 * Has a fixed aspect ratio of 1.5 to 1 regardless of screenshot size
140 * It is also responsive.
142 .theme-browser .theme .theme-screenshot {
146 -webkit-transition: opacity 0.2s ease-in-out;
147 transition: opacity 0.2s ease-in-out;
150 .theme-browser .theme .theme-screenshot:after {
153 padding-top: 66.66666%; /* using a 3/2 aspect ratio */
156 .theme-browser .theme .theme-screenshot img {
162 -webkit-transform: translateZ( 0 ); /* Prevents rendering bugs in Chrome */
163 -webkit-transition: opacity 0.2s ease-in-out; /* Prevents rendering bugs in Chrome */
164 transition: opacity 0.2s ease-in-out;
167 .theme-browser .theme:hover .theme-screenshot,
168 .theme-browser .theme:focus .theme-screenshot {
172 .theme-browser.rendered .theme:hover .theme-screenshot img,
173 .theme-browser.rendered .theme:focus .theme-screenshot img {
177 .theme-browser .theme .more-details {
178 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
185 background: rgba(0,0,0,0.7);
188 text-shadow: 0 1px 0 rgba(0,0,0,0.6);
189 -webkit-font-smoothing: antialiased;
193 -webkit-border-radius: 3px;
195 -webkit-transition: opacity 0.1s ease-in-out;
196 transition: opacity 0.1s ease-in-out;
198 .theme-browser .theme:focus {
199 outline: 1px dotted #222;
202 .theme-browser .theme:focus .more-details {
205 /* Current theme needs to have its action always on view */
206 .theme-browser .theme.active:focus .theme-actions {
210 .theme-browser.rendered .theme:hover .more-details,
211 .theme-browser.rendered .theme:focus .more-details {
212 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
217 * Displays a theme update notice
218 * when an update is available.
220 .theme-browser .theme .theme-update,
221 .theme-browser .theme .theme-installed {
223 background: rgba(213, 78, 33, 0.95);
235 border-bottom: 1px solid rgba(0,0,0,0.25);
239 .theme-browser .theme .theme-update:before,
240 .theme-browser .theme .theme-installed:before {
242 display: inline-block;
243 font: normal 20px/1 'dashicons';
249 -webkit-font-smoothing: antialiased;
254 * The currently active theme
256 .theme-browser .theme.active .theme-name {
259 padding-right: 110px;
261 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.5);
262 box-shadow: inset 0 1px 1px rgba(0,0,0,0.5);
265 .theme-browser .theme.active .theme-name span {
269 .theme-browser .theme.active .theme-actions {
270 background: rgba(49,49,49,0.7);
275 .theme-browser .theme.active .theme-actions .button-primary {
279 .theme-browser .theme .theme-author {
290 .theme-browser .theme.display-author .theme-author {
294 .theme-browser .theme.display-author .theme-author a {
296 text-decoration: none;
302 .theme-browser .theme.add-new-theme {
304 -webkit-box-shadow: none;
308 .theme-browser .theme.add-new-theme a {
310 text-decoration: none;
316 .theme-browser .theme.add-new-theme:after {
319 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
321 background: transparent;
322 background: rgba(0, 0, 0, 0);
330 border: 5px dashed #d5d2ca;
331 border: 5px dashed rgba(0, 0, 0, 0.1);
332 -webkit-transition: opacity 0.2s ease-in-out;
333 transition: opacity 0.2s ease-in-out;
334 -webkit-box-sizing: border-box;
335 -moz-box-sizing: border-box;
336 box-sizing: border-box;
339 .theme-browser .theme.add-new-theme span:after {
341 background: rgba(153, 153, 153, 0.1);
342 -webkit-border-radius: 50%;
344 display: inline-block;
346 -webkit-font-smoothing: antialiased;
347 font: normal 74px/115px 'dashicons';
350 vertical-align: middle;
352 color: rgb(153, 153, 153);
363 .rtl .theme-browser .theme.add-new-theme span:after {
367 .theme-browser .theme.add-new-theme:hover .theme-screenshot,
368 .theme-browser .theme.add-new-theme:focus .theme-screenshot {
372 .theme-browser .theme.add-new-theme:hover span:after,
373 .theme-browser .theme.add-new-theme:focus span:after {
378 .theme-browser .theme.add-new-theme:hover:after,
379 .theme-browser .theme.add-new-theme:focus:after {
380 border-color: transparent;
386 .theme-browser .theme.add-new-theme .theme-name {
389 -webkit-box-shadow: none;
398 .theme-browser .theme.add-new-theme:hover .theme-name,
399 .theme-browser .theme.add-new-theme:focus .theme-name {
407 .themes-php .theme-search {
419 * Shown when clicking a theme
421 .theme-overlay .theme-backdrop {
428 background: rgba( 238, 238, 238, 0.9 );
432 body.theme-overlay-open {
436 .theme-overlay .theme-header {
442 border-bottom: 1px solid #ddd;
445 .theme-overlay .theme-header .close {
452 border-left: 1px solid #ddd;
453 background-color: transparent;
456 .theme-overlay .theme-header .close:hover:before,
457 .theme-overlay .theme-header .close:focus:before {
461 .theme-overlay .theme-header .close:before {
462 font: normal 30px/50px 'dashicons' !important;
464 display: inline-block;
469 /* Left and right navigation */
470 .theme-overlay .theme-header .right,
471 .theme-overlay .theme-header .left {
474 background-color: transparent;
480 border-right: 1px solid #ddd;
483 .theme-overlay .theme-header .close:hover,
484 .theme-overlay .theme-header .right:hover,
485 .theme-overlay .theme-header .left:hover,
486 .theme-overlay .theme-header .close:focus,
487 .theme-overlay .theme-header .right:focus,
488 .theme-overlay .theme-header .left:focus {
493 .theme-overlay .theme-header .left.disabled,
494 .theme-overlay .theme-header .right.disabled,
495 .theme-overlay .theme-header .left.disabled:hover,
496 .theme-overlay .theme-header .right.disabled:hover {
502 .theme-overlay .theme-header .right:before,
503 .theme-overlay .theme-header .left:before {
504 font: normal 20px/50px 'dashicons' !important;
509 .theme-overlay .theme-header .left:before {
513 .theme-overlay .theme-header .right:before {
517 .rtl .theme-overlay .theme-header .left:before {
521 .rtl .theme-overlay .theme-header .right:before {
525 .theme-overlay .theme-wrap {
533 -webkit-box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
534 box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
536 -webkit-box-sizing: border-box;
537 -moz-box-sizing: border-box;
538 box-sizing: border-box;
541 .theme-overlay .theme-wrap:after {
549 body.folded .theme-overlay .theme-wrap {
553 .theme-overlay .theme-about {
562 .theme-overlay .theme-about:after {
570 .theme-overlay .theme-actions {
576 padding: 10px 25px 5px;
579 -webkit-box-sizing: border-box;
580 -moz-box-sizing: border-box;
581 box-sizing: border-box;
582 border-top: 1px solid #eee;
585 .ie8 .theme-overlay .theme-actions {
586 border: 1px solid #eee;
589 .theme-overlay .theme-actions a {
594 .theme-overlay .theme-actions .delete-theme {
599 text-decoration: none;
600 border-color: transparent;
601 -webkit-box-shadow: none;
603 background: transparent;
606 .theme-overlay .theme-actions .delete-theme:hover,
607 .theme-overlay .theme-actions .delete-theme:focus {
610 border-color: #d54e21;
613 .theme-overlay .theme-actions .active-theme,
614 .theme-overlay.active .theme-actions .inactive-theme {
618 .theme-overlay .theme-actions .inactive-theme,
619 .theme-overlay.active .theme-actions .active-theme {
624 * Theme Screenshots gallery
626 .theme-overlay .theme-screenshots {
634 /* First screenshot, shown big */
635 .theme-overlay .screenshot {
636 border: 1px solid #fff;
637 -webkit-box-sizing: border-box;
638 -moz-box-sizing: border-box;
639 box-sizing: border-box;
642 -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
643 box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
646 .theme-overlay .screenshot:after {
649 padding-top: 75%; /* using a 4/3 aspect ratio */
652 .theme-overlay .screenshot img {
659 /* Handles old 300px screenshots */
660 .theme-overlay.small-screenshot .theme-screenshots {
664 .theme-overlay.small-screenshot .theme-info {
669 /* Other screenshots, shown small and square */
670 .theme-overlay .screenshot.thumb {
672 border: 1px solid #eee;
674 display: inline-block;
681 .theme-overlay .screenshot.thumb:after {
684 padding-top: 100%; /* using a 1/1 aspect ratio */
687 .theme-overlay .screenshot.thumb img {
697 .theme-overlay .screenshot.selected {
698 background: transparent;
699 border: 2px solid #2ea2cc;
702 .theme-overlay .screenshot.selected img {
706 /* No screenshot placeholder */
707 .theme-browser .theme .theme-screenshot.blank,
708 .theme-overlay .screenshot.blank {
709 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=);
713 * Theme heading information
715 .theme-overlay .theme-info {
720 .theme-overlay .current-label {
724 display: inline-block;
726 -webkit-border-radius: 2px;
729 -webkit-user-select: none;
730 -moz-user-select: none;
731 -ms-user-select: none;
735 .theme-overlay .theme-name {
743 .theme-overlay .theme-version {
748 display: inline-block;
750 -webkit-user-select: none;
751 -moz-user-select: none;
752 -ms-user-select: none;
756 .theme-overlay .theme-author {
763 .theme-overlay .theme-author a {
764 text-decoration: none;
767 .theme-overlay .theme-description {
775 .theme-overlay .theme-tags {
776 border-top: 3px solid #eee;
784 .theme-overlay .theme-tags span {
790 /* Theme Updates info */
791 .theme-overlay .theme-update-message {
793 border: 1px solid #eee;
794 border-left: 4px solid #d54e21;
795 -webkit-border-radius: 3px;
797 padding: 5px 20px 10px;
800 .theme-overlay .theme-update {
803 display: inline-block;
808 .theme-overlay .parent-theme {
810 border: 1px solid #eee;
811 border-left: 4px solid #2ea2cc;
815 padding: 10px 10px 10px 20px;
818 .theme-overlay .parent-theme strong {
824 * Displays detailed view inline when a user has no switch capabilities
826 .single-theme .theme-overlay .theme-backdrop,
827 .single-theme .theme-overlay .theme-header,
828 .single-theme .theme {
832 .single-theme .theme-overlay .theme-wrap {
842 .single-theme .theme-overlay .theme-about {
843 padding: 30px 30px 70px;
847 .single-theme .theme-overlay .theme-actions {
852 * Basic Responsive structure...
854 * Shuffles theme columns around based on screen width
857 @media only screen and (min-width: 2000px) {
858 #wpwrap .theme-browser .theme {
863 #wpwrap .theme-browser .theme:nth-child(3n),
864 #wpwrap .theme-browser .theme:nth-child(4n) {
868 #wpwrap .theme-browser .theme:nth-child(5n) {
873 @media only screen and (min-width: 1680px) {
874 .theme-overlay .theme-wrap {
880 /* Maximum screenshot width reaches 440px */
881 @media only screen and (min-width: 1640px) {
882 .theme-browser .theme {
886 .theme-browser .theme .theme-screenshot:after {
887 padding-top: 75%; /* using a 4/3 aspect ratio */
890 .theme-browser .theme:nth-child(3n) {
894 .theme-browser .theme:nth-child(4n) {
898 /* Maximum screenshot width reaches 440px */
899 @media only screen and (max-width: 1120px) {
900 .theme-browser .theme {
905 .theme-browser .theme:nth-child(even) {
909 .theme-browser .theme:nth-child(odd) {
914 /* Admin menu is folded */
915 @media only screen and (max-width: 900px) {
916 .theme-overlay .theme-wrap {
921 @media only screen and (max-width: 780px) {
922 body.folded .theme-overlay .theme-wrap,
923 .theme-overlay .theme-wrap {
924 top: 0; /* The adminmenu isn't fixed on mobile, so this can use the full viewport height */
928 padding: 70px 20px 20px;
930 z-index: 500; /* should overlap #wpadminbar, which is 500 on mobile. */
934 .theme-browser .theme.active .theme-name span {
935 /* Hide the "Active: " label on smaller screens. */
939 .theme-overlay .theme-screenshots {
943 .theme-overlay .theme-info {
946 .single-theme .theme-wrap {
950 .theme-browser .theme .theme-actions {
951 padding: 5px 10px 4px 10px;
954 .theme-overlay.small-screenshot .theme-screenshots {
960 .theme-overlay.small-screenshot .theme-info {
965 .theme:not(.active):hover .theme-actions,
966 .theme:not(.active):focus .theme-actions,
967 .theme:hover .more-details,
968 .theme:focus .more-details {
972 .theme-browser.rendered .theme:hover .theme-screenshot img,
973 .theme-browser.rendered .theme:focus .theme-screenshot img {
978 @media only screen and (max-width: 480px) {
979 .theme-browser .theme {
984 .theme-browser .theme:nth-child(2n),
985 .theme-browser .theme:nth-child(3n) {
990 @media only screen and (max-width: 650px) {
991 .theme-overlay .theme-update,
992 .theme-overlay .theme-description {
996 .theme-overlay .theme-actions .delete-theme {
1002 .theme-overlay .theme-actions .inactive-theme {
1006 .theme-overlay .theme-screenshots {
1011 .theme-overlay .theme-info {
1015 .theme-overlay .theme-author {
1016 margin: 5px 0 15px 0;
1019 .theme-overlay .current-label {
1024 .themes-php .wrap h2 {
1028 .themes-php .theme-search {
1038 .theme-browser .theme.add-new-theme span:after {
1039 font: normal 60px/90px 'dashicons';
1048 .single-theme .theme-wrap {
1049 margin: 0 -12px 0 -10px;
1052 .single-theme .theme-overlay .theme-about {
1056 .single-theme .current-label {
1059 .single-theme .theme-overlay .theme-actions {
1068 .broken-themes table {
1071 border-spacing: 3px;
1076 /*------------------------------------------------------------------------------
1077 16.2 - Install Themes
1078 ------------------------------------------------------------------------------*/
1080 /* Already installed theme */
1081 .theme-browser .theme .theme-installed {
1082 background: #0074a2;
1084 .theme-browser .theme .theme-installed:before {
1087 .theme-browser .theme.is-installed .theme-actions .button-primary {
1088 display: none !important;
1093 -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
1094 box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
1095 -webkit-box-sizing: border-box;
1096 -moz-box-sizing: border-box;
1097 box-sizing: border-box;
1099 display: inline-block;
1101 margin: 20px 0 30px;
1106 .theme-install-php a.upload,
1107 .theme-install-php a.browse-themes {
1110 .theme-install-php a.browse-themes,
1111 .theme-install-php.show-upload-theme a.upload {
1114 .theme-install-php.show-upload-theme a.browse-themes {
1118 -webkit-box-sizing: border-box;
1119 -moz-box-sizing: border-box;
1120 box-sizing: border-box;
1129 body.show-upload-theme .upload-theme {
1132 .upload-theme .wp-upload-form {
1133 background: #fafafa;
1134 border: 1px solid #e5e5e5;
1139 .upload-theme .install-help {
1147 body.show-upload-theme .upload-theme + .theme-navigation,
1148 body.show-upload-theme .upload-theme + .theme-navigation + .theme-browser {
1151 .theme-navigation .theme-count {
1156 .theme-count + .theme-section {
1161 border-bottom: 4px solid #fff;
1164 display: inline-block;
1168 .theme-section.current,
1169 .theme-filter.current {
1170 border-bottom: 4px solid #666;
1173 .theme-top-filters {
1174 display: inline-block;
1176 .theme-navigation .more-filters {
1179 display: inline-block;
1183 body.more-filters-opened .more-filters,
1184 body.more-filters-opened .more-filters:before {
1186 -webkit-border-radius: 2px;
1192 body.more-filters-opened .more-filters:hover,
1193 body.more-filters-opened .more-filters:focus,
1194 body.more-filters-opened .more-filters:hover:before,
1195 body.more-filters-opened .more-filters:focus:before {
1196 background: rgb(46, 162, 204);
1199 .theme-install-php .theme-search {
1208 .more-filters:before {
1213 display: inline-block;
1216 -webkit-font-smoothing: antialiased;
1219 font-family: "dashicons";
1220 text-decoration: inherit;
1221 font-weight: normal;
1223 vertical-align: top;
1224 -webkit-transition: color .1s ease-in 0;
1225 transition: color .1s ease-in 0;
1228 .more-filters.current:before {
1231 .more-filters-container {
1234 border-top: 1px solid #eee;
1236 background: #fafafa;
1238 body.more-filters-opened .more-filters-container {
1242 body.more-filters-opened .theme-section.current {
1243 border-bottom: none;
1245 body.more-filters-opened .theme-browser,
1246 body.more-filters-opened.filters-applied.loading-themes .theme-browser {
1249 body.more-filters-opened.filters-applied .theme-browser {
1252 .more-filters-container .filters-group {
1253 -webkit-box-sizing: border-box;
1254 -moz-box-sizing: border-box;
1255 box-sizing: border-box;
1260 border: 1px solid #e5e5e5;
1261 -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
1262 box-shadow: 0 1px 1px rgba(0,0,0,0.04);
1265 .more-filters-container .wide-filters-group {
1268 .more-filters-container .feature-name {
1272 .more-filters-container ol {
1273 list-style-type: none;
1277 .more-filters-container li {
1278 display: inline-block;
1279 vertical-align: top;
1280 list-style-type: none;
1282 padding-right: 25px;
1285 .theme-navigation .more-filters-container .apply-filters {
1288 .theme-navigation .more-filters-container .clear-filters {
1290 margin: 0 0 20px 10px;
1292 .more-filters-container .apply-filters span {
1293 display: inline-block;
1298 .more-filters-container .filtering-by {
1302 .more-filters-container .filtering-by > span {
1305 .more-filters-container .filtering-by .tags {
1308 .more-filters-container .filtering-by .tag {
1310 border: 1px solid #e5e5e5;
1311 -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
1312 box-shadow: 0 1px 1px rgba(0,0,0,0.04);
1317 .more-filters-container .filtering-by a {
1320 body.filters-applied .more-filters-container .filters-group,
1321 body.filters-applied .more-filters-container a.button,
1322 body.filters-applied .more-filters-container br {
1323 display: none !important;
1325 body.filters-applied .more-filters-container .filtering-by {
1328 body.filters-applied .more-filters-container {
1340 body.no-results p.no-themes {
1343 body.show-upload-theme p.no-themes {
1344 display: none !important;
1348 .theme-install-php .add-new-theme {
1349 display: none !important;
1352 @media only screen and (max-width: 1120px) {
1353 .theme-install-php .theme-search {
1358 .more-filters-container {
1359 border-bottom: 1px solid #eee;
1361 .upload-theme .wp-upload-form {
1365 .upload-theme .install-help {
1370 .more-filters-container .filters-group {
1375 .more-filters-container .filters-group li {
1380 @media only screen and (max-width: 782px) {
1381 .more-filters-container .filters-group {
1384 .more-filters-container .filters-group li {
1392 .rating span:before {
1395 display: inline-block;
1396 -webkit-font-smoothing: antialiased;
1397 font: normal 20px/1 'dashicons';
1398 vertical-align: top;
1401 .rating-10 span.one:before,
1402 .rating-30 span.two:before,
1403 .rating-50 span.three:before,
1404 .rating-70 span.four:before,
1405 .rating-90 span.five:before {
1409 .rating-20 span.one:before {
1412 .rating-30 span.one:before,
1413 .rating-40 span.one:before,
1414 .rating-40 span.two:before {
1417 .rating-50 span.one:before,
1418 .rating-50 span.two:before,
1419 .rating-60 span.one:before,
1420 .rating-60 span.two:before,
1421 .rating-60 span.three:before {
1424 .rating-70 span.one:before,
1425 .rating-70 span.two:before,
1426 .rating-70 span.three:before,
1427 .rating-80 span.one:before,
1428 .rating-80 span.two:before,
1429 .rating-80 span.three:before,
1430 .rating-80 span.four:before {
1433 .rating-90 span.one:before,
1434 .rating-90 span.two:before,
1435 .rating-90 span.three:before,
1436 .rating-90 span.four:before,
1437 .rating-100 span.one:before,
1438 .rating-100 span.two:before,
1439 .rating-100 span.three:before,
1440 .rating-100 span.four:before,
1441 .rating-100 span.five:before {
1450 .loading-themes .theme-browser,
1451 .error .theme-browser {
1454 .loading-themes .spinner {
1456 margin: 40px auto 0;
1460 /*------------------------------------------------------------------------------
1461 16.3 - Custom Header Screen
1462 ------------------------------------------------------------------------------*/
1464 .appearance_page_custom-header #headimg {
1465 border: 1px solid #DFDFDF;
1470 .appearance_page_custom-header #upload-form p label {
1474 .appearance_page_custom-header .available-headers .default-header {
1476 margin: 0 20px 20px 0;
1479 .appearance_page_custom-header .random-header {
1481 margin: 0 20px 20px 0;
1482 vertical-align: middle;
1485 .appearance_page_custom-header .available-headers label input,
1486 .appearance_page_custom-header .random-header label input {
1490 .appearance_page_custom-header .available-headers label img {
1491 vertical-align: middle;
1495 /*------------------------------------------------------------------------------
1496 16.4 - Custom Background Screen
1497 ------------------------------------------------------------------------------*/
1499 div#custom-background-image {
1501 border: 1px solid #dfdfdf;
1504 div#custom-background-image img {
1509 /*------------------------------------------------------------------------------
1510 23.0 - Full Overlay w/ Sidebar
1511 ------------------------------------------------------------------------------*/
1513 body.full-overlay-active {
1518 background: transparent;
1530 .wp-full-overlay-sidebar {
1531 -webkit-box-sizing: border-box;
1532 -moz-box-sizing: border-box;
1533 box-sizing: border-box;
1548 .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
1552 .wp-full-overlay.collapsed,
1553 .wp-full-overlay.expanded .wp-full-overlay-sidebar {
1554 margin-left: 0 !important;
1557 .wp-full-overlay.expanded {
1561 .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
1562 margin-left: -300px;
1565 .wp-full-overlay-sidebar:after {
1576 .wp-full-overlay-main {
1585 .wp-full-overlay-sidebar .wp-full-overlay-header {
1595 -webkit-box-shadow: none;
1599 .wp-full-overlay-sidebar .wp-full-overlay-header a.back {
1603 .wp-full-overlay-sidebar .wp-full-overlay-footer {
1605 border-bottom: none;
1607 -webkit-box-shadow: none;
1611 .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
1621 .wp-full-overlay .close-full-overlay {
1622 text-decoration: none;
1625 /* Collapse Button */
1626 .wp-full-overlay a.collapse-sidebar {
1636 -webkit-border-radius: 50%;
1639 text-decoration: none;
1642 .wp-full-overlay a.collapse-sidebar:hover {
1646 .wp-full-overlay.collapsed .collapse-sidebar {
1651 .wp-full-overlay .collapse-sidebar-arrow {
1661 .wp-full-overlay .collapse-sidebar-arrow:before {
1662 -webkit-border-radius: 50%;
1667 font: normal 20px/1 'dashicons';
1674 -webkit-font-smoothing: antialiased;
1675 -moz-osx-font-smoothing: grayscale;
1676 text-decoration: none !important;
1679 .wp-full-overlay.collapsed .collapse-sidebar-arrow:before,
1680 .rtl .wp-full-overlay .collapse-sidebar-arrow:before {
1681 -webkit-transform: rotate(180deg);
1682 -ms-transform: rotate(180deg);
1683 transform: rotate(180deg);
1686 .rtl .wp-full-overlay.collapsed .collapse-sidebar-arrow:before {
1687 -webkit-transform: none;
1688 -ms-transform: none;
1692 .wp-full-overlay.collapsed .collapse-sidebar-arrow {
1693 background-position: -1px -109px;
1696 .wp-full-overlay .collapse-sidebar-label {
1703 .wp-full-overlay.collapsed .collapse-sidebar-label {
1707 .wp-full-overlay .theme-navigation {
1713 .wp-full-overlay .theme-navigation .next-theme {
1716 .wp-full-overlay.no-navigation .theme-navigation {
1722 .wp-full-overlay-sidebar,
1723 .wp-full-overlay .collapse-sidebar,
1724 .wp-full-overlay-main {
1725 -webkit-transition-property: left, right, top, bottom, width, margin;
1726 transition-property: left, right, top, bottom, width, margin;
1727 -webkit-transition-duration: 0.2s;
1728 transition-duration: 0.2s;
1731 /*------------------------------------------------------------------------------
1732 24.0 - Customize Loader
1733 ------------------------------------------------------------------------------*/
1735 .no-customize-support .hide-if-no-customize,
1736 .customize-support .hide-if-customize,
1737 .no-customize-support.wp-core-ui .hide-if-no-customize,
1738 .no-customize-support .wp-core-ui .hide-if-no-customize,
1739 .customize-support.wp-core-ui .hide-if-customize,
1740 .customize-support .wp-core-ui .hide-if-customize {
1744 #customize-container {
1757 .customize-active #customize-container {
1761 .customize-loading #customize-container iframe {
1765 .customize-loading #customize-container {
1766 background: #fff url(../images/spinner.gif) no-repeat fixed center center;
1767 -webkit-background-size: 20px 20px;
1768 background-size: 20px 20px;
1771 #customize-container iframe,
1772 .theme-install-overlay iframe {
1776 -webkit-transition: opacity 0.3s;
1777 transition: opacity 0.3s;
1780 #customize-container .collapse-sidebar {
1784 #customize-controls {
1788 .theme-install-overlay {
1792 .theme-install-overlay.single-theme {
1796 .install-theme-info {
1798 padding: 10px 20px 60px;
1801 .single-theme .install-theme-info {
1805 .theme-install-overlay .install-theme-info {
1809 .install-theme-info .theme-install {
1814 .install-theme-info .theme-name {
1821 .install-theme-info .theme-screenshot {
1824 border: 1px solid #ccc;
1827 .install-theme-info .theme-details {
1831 .theme-details .theme-version {
1836 .theme-details .star-rating {
1841 .theme-details .theme-description {
1848 .theme-install-overlay .wp-full-overlay-header {
1852 .theme-install-overlay .wp-full-overlay-header .theme-install {
1854 /* For when .theme-install is a span rather than a.button-primary (already installed theme) */
1858 .theme-install-overlay .wp-full-overlay-sidebar {
1860 border-right: 1px solid #DDD;
1863 .theme-install-overlay .wp-full-overlay-main {
1864 background: #fff url(../images/spinner.gif) no-repeat center center;
1865 -webkit-background-size: 20px 20px;
1866 background-size: 20px 20px;
1870 -------------------------------------------------------------- */
1876 (-o-min-device-pixel-ratio: 5/4),
1877 (-webkit-min-device-pixel-ratio: 1.25),
1878 (min-resolution: 120dpi) {
1879 .wp-full-overlay .collapse-sidebar-arrow {
1880 background-image: url(../images/arrows-2x.png);
1881 -webkit-background-size: 15px 123px;
1882 background-size: 15px 123px;
1885 .customize-loading #customize-container,
1886 .theme-install-overlay .wp-full-overlay-main {
1887 background-image: url(../images/spinner-2x.gif);
1891 @media screen and ( max-width: 782px ) {
1892 .available-theme .action-links .delete-theme {
1899 .available-theme .action-links .delete-theme a {