X-Git-Url: https://scripts.mit.edu/gitweb/autoinstalls/wordpress.git/blobdiff_plain/9e77185fafaf4e60e2b73821e0e4b9b1a11fb85f..refs/tags/wordpress-4.4:/wp-admin/css/themes.css diff --git a/wp-admin/css/themes.css b/wp-admin/css/themes.css index 6ff0f9ff..3b9cc46e 100644 --- a/wp-admin/css/themes.css +++ b/wp-admin/css/themes.css @@ -12,16 +12,16 @@ padding: 0 0 100px; } -.themes-php .wrap h2 { +.themes-php .wrap h1 { float: left; margin-bottom: 15px; } -.network-admin.themes-php .wrap h2 { +.network-admin.themes-php .wrap h1 { margin-bottom: 0; } -.themes-php .wrap h2 .button { +.themes-php .wrap h1 .button { margin-left: 20px; } @@ -39,7 +39,8 @@ /* Position admin messages */ .themes-php div.updated, -.themes-php div.error { +.themes-php div.error, +.themes-php div.notice { margin: 0 0 20px 0; clear: both; } @@ -141,7 +142,7 @@ } .theme-browser .theme .theme-screenshot:after { - content: ''; + content: ""; display: block; padding-top: 66.66666%; /* using a 3/2 aspect ratio */ } @@ -152,8 +153,7 @@ left: 0; top: 0; width: 100%; - -webkit-transform: translateZ( 0 ); /* Prevents rendering bugs in Chrome */ - -webkit-transition: opacity 0.2s ease-in-out; /* Prevents rendering bugs in Chrome */ + -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } @@ -174,7 +174,7 @@ top: 35%; right: 25%; left: 25%; - background: #222; + background: #23282d; background: rgba(0,0,0,0.7); color: #fff; font-size: 15px; @@ -235,9 +235,9 @@ .theme-browser .theme .theme-update:before, .theme-browser .theme .theme-installed:before { - content: '\f463'; + content: "\f463"; display: inline-block; - font: normal 20px/1 'dashicons'; + font: normal 20px/1 dashicons; margin: 0 6px 0 0; opacity: 0.8; position: relative; @@ -259,6 +259,10 @@ box-shadow: inset 0 1px 1px rgba(0,0,0,0.5); } +.theme-browser .customize-control .theme.active .theme-name { + padding-right: 15px; +} + .theme-browser .theme.active .theme-name span { font-weight: 600; } @@ -274,7 +278,7 @@ } .theme-browser .theme .theme-author { - background: #222; + background: #23282d; color: #eee; display: none; font-size: 14px; @@ -310,11 +314,9 @@ z-index: 1; } -.theme-browser .theme.add-new-theme:after { +.theme-browser .theme.add-new-theme a:after { display: block; - content: ''; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - opacity: 1; + content: ""; background: transparent; background: rgba(0, 0, 0, 0); position: absolute; @@ -322,12 +324,10 @@ left: 0; right: 0; bottom: 0; - padding: 10% 0 0 0; + padding: 0; text-shadow: none; border: 5px dashed #d5d2ca; border: 5px dashed rgba(0, 0, 0, 0.1); - -webkit-transition: opacity 0.2s ease-in-out; - transition: opacity 0.2s ease-in-out; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; @@ -339,9 +339,9 @@ -webkit-border-radius: 50%; border-radius: 50%; display: inline-block; - content: '\f132'; + content: "\f132"; -webkit-font-smoothing: antialiased; - font: normal 74px/115px 'dashicons'; + font: normal 74px/115px dashicons; width: 100px; height: 100px; vertical-align: middle; @@ -361,23 +361,23 @@ text-indent: 4px; } -.theme-browser .theme.add-new-theme:hover .theme-screenshot, -.theme-browser .theme.add-new-theme:focus .theme-screenshot { +.theme-browser .theme.add-new-theme a:hover .theme-screenshot, +.theme-browser .theme.add-new-theme a:focus .theme-screenshot { background: none; } -.theme-browser .theme.add-new-theme:hover span:after, -.theme-browser .theme.add-new-theme:focus span:after { +.theme-browser .theme.add-new-theme a:hover span:after, +.theme-browser .theme.add-new-theme a:focus span:after { background: #fff; - color: #0074a2; + color: #0073aa; } -.theme-browser .theme.add-new-theme:hover:after, -.theme-browser .theme.add-new-theme:focus:after { +.theme-browser .theme.add-new-theme a:hover:after, +.theme-browser .theme.add-new-theme a:focus:after { border-color: transparent; color: #fff; - background: #0074a2; - content: ''; + background: #0073aa; + content: ""; } .theme-browser .theme.add-new-theme .theme-name { @@ -388,12 +388,13 @@ font-weight: 400; position: relative; top: 0; - margin-top: -10%; - margin-bottom: 10%; + margin-top: -18px; + padding-top: 0; + padding-bottom: 48px; } -.theme-browser .theme.add-new-theme:hover .theme-name, -.theme-browser .theme.add-new-theme:focus .theme-name { +.theme-browser .theme.add-new-theme a:hover .theme-name, +.theme-browser .theme.add-new-theme a:focus .theme-name { color: #fff; z-index: 2; } @@ -410,7 +411,7 @@ bottom: 0; background: #f1f1f1; background: rgba( 238, 238, 238, 0.9 ); - z-index: 10; + z-index: 10000; /* Over WP Pointers. */ } .theme-overlay .theme-header { @@ -422,6 +423,10 @@ border-bottom: 1px solid #ddd; } +.theme-overlay .theme-header button { + padding: 0; +} + .theme-overlay .theme-header .close { cursor: pointer; height: 48px; @@ -436,10 +441,10 @@ } .theme-overlay .theme-header .close:before { - font: normal 22px/50px 'dashicons' !important; + font: normal 22px/50px dashicons !important; color: #777; display: inline-block; - content: '\f335'; + content: "\f335"; font-weight: 300; } @@ -494,23 +499,19 @@ .theme-overlay .theme-header .right:before, .theme-overlay .theme-header .left:before { - font: normal 20px/50px 'dashicons' !important; + font: normal 20px/50px dashicons !important; display: inline; font-weight: 300; } -.theme-overlay .theme-header .left:before, -.rtl .theme-overlay .theme-header .right:before { - content: '\f341'; +.theme-overlay .theme-header .left:before { + content: "\f341"; } -.theme-overlay .theme-header .right:before, -.rtl .theme-overlay .theme-header .left:before { - content: '\f345'; +.theme-overlay .theme-header .right:before { + content: "\f345"; } - - .theme-overlay .theme-wrap { clear: both; position: fixed; @@ -521,10 +522,11 @@ background: #fff; -webkit-box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1); - z-index: 20; + z-index: 10000; /* Over WP Pointers. */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; + -webkit-overflow-scrolling: touch; } .theme-overlay .theme-wrap:after { @@ -580,11 +582,15 @@ body.folded .theme-overlay .theme-wrap { margin-bottom: 5px; } +/* Hide-if-customize for items we can't add classes to */ +.customize-support .theme-overlay .theme-actions a[href="themes.php?page=custom-header"], +.customize-support .theme-overlay .theme-actions a[href="themes.php?page=custom-background"] { + display: none; +} + +.broken-themes a.delete-theme, .theme-overlay .theme-actions .delete-theme { color: #a00; - position: absolute; - right: 10px; - bottom: 5px; text-decoration: none; border-color: transparent; -webkit-box-shadow: none; @@ -592,6 +598,14 @@ body.folded .theme-overlay .theme-wrap { background: transparent; } +.theme-overlay .theme-actions .delete-theme { + position: absolute; + right: 10px; + bottom: 5px; +} + +.broken-themes a.delete-theme:hover, +.broken-themes a.delete-theme:focus, .theme-overlay .theme-actions .delete-theme:hover, .theme-overlay .theme-actions .delete-theme:focus { background: #d54e21; @@ -633,7 +647,7 @@ body.folded .theme-overlay .theme-wrap { } .theme-overlay .screenshot:after { - content: ''; + content: ""; display: block; padding-top: 75%; /* using a 4/3 aspect ratio */ } @@ -668,7 +682,7 @@ body.folded .theme-overlay .theme-wrap { } .theme-overlay .screenshot.thumb:after { - content: ''; + content: ""; display: block; padding-top: 100%; /* using a 1/1 aspect ratio */ } @@ -685,7 +699,7 @@ body.folded .theme-overlay .theme-wrap { .theme-overlay .screenshot.selected { background: transparent; - border: 2px solid #2ea2cc; + border: 2px solid #00a0d2; } .theme-overlay .screenshot.selected img { @@ -707,7 +721,7 @@ body.folded .theme-overlay .theme-wrap { } .theme-overlay .current-label { - background: #333; + background: #32373c; color: #fff; font-size: 11px; display: inline-block; @@ -722,7 +736,7 @@ body.folded .theme-overlay .theme-wrap { } .theme-overlay .theme-name { - color: #222; + color: #23282d; font-size: 32px; font-weight: 100; margin: 10px 0 0; @@ -736,17 +750,14 @@ body.folded .theme-overlay .theme-wrap { float: none; display: inline-block; margin-left: 10px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; } .theme-overlay .theme-author { + margin: 15px 0 25px; color: #686868; font-size: 16px; font-weight: 400; - margin: 15px 0 25px; + line-height: inherit; } .theme-overlay .theme-author a { @@ -763,7 +774,7 @@ body.folded .theme-overlay .theme-wrap { .theme-overlay .theme-tags { border-top: 3px solid #eee; - color: #888; + color: #82878c; font-size: 13px; font-weight: 400; margin: 30px 0 0 0; @@ -776,28 +787,10 @@ body.folded .theme-overlay .theme-wrap { margin-right: 5px; } -/* Theme Updates info */ -.theme-overlay .theme-update-message { - background: #fef7f1; - border: 1px solid #eee; - border-left: 4px solid #d54e21; - -webkit-border-radius: 3px; - border-radius: 3px; - padding: 5px 20px 10px; -} - -.theme-overlay .theme-update { - color: #222; - font-size: 18px; - display: inline-block; - line-height: 40px; - margin: 0; -} - .theme-overlay .parent-theme { background: #f7fcfe; border: 1px solid #eee; - border-left: 4px solid #2ea2cc; + border-left: 4px solid #00a0d2; font-size: 14px; font-weight: normal; margin-top: 30px; @@ -826,6 +819,7 @@ body.folded .theme-overlay .theme-wrap { right: auto; top: auto; bottom: auto; + z-index: 10; } .single-theme .theme-overlay .theme-about { @@ -916,7 +910,7 @@ body.folded .theme-overlay .theme-wrap { left: 0; padding: 70px 20px 20px; border: none; - z-index: 500; /* should overlap #wpadminbar, which is 500 on mobile. */ + z-index: 100000; /* should overlap #wpadminbar. */ position: fixed; } @@ -1010,10 +1004,6 @@ body.folded .theme-overlay .theme-wrap { font-size: 13px; } - .themes-php .wrap h2 { - width: 100%; - } - .themes-php .wp-filter-search { float: none; clear: both; @@ -1022,10 +1012,11 @@ body.folded .theme-overlay .theme-wrap { right: 0; margin: 10px 0; width: 100%; + max-width: 280px; } .theme-browser .theme.add-new-theme span:after { - font: normal 60px/90px 'dashicons'; + font: normal 60px/90px dashicons; width: 80px; height: 80px; top: 30%; @@ -1068,15 +1059,19 @@ body.folded .theme-overlay .theme-wrap { /* Already installed theme */ .theme-browser .theme .theme-installed { - background: #0074a2; + background: #0073aa; } .theme-browser .theme .theme-installed:before { - content: '\f147'; + content: "\f147"; } .theme-browser .theme.is-installed .theme-actions .button-primary { display: none !important; } +.theme-install-php .wp-filter { + padding: 0 20px; +} + .theme-install-php a.upload, .theme-install-php a.browse-themes { cursor: pointer; @@ -1128,7 +1123,8 @@ body.show-upload-theme .upload-theme + .wp-filter + .theme-browser { } p.no-themes { - color: #999; + clear: both; + color: #666; font-size: 18px; font-style: normal; margin: 0; @@ -1159,68 +1155,25 @@ body.show-upload-theme p.no-themes { } } -.rating { - margin: 30px 0; +.theme-details .theme-rating { + line-height: 23px; } -.rating span:before { - color: #e6b800; - content: "\f154"; - display: inline-block; - -webkit-font-smoothing: antialiased; - font: normal 20px/1 'dashicons'; - vertical-align: top; -} -/* Half stars */ -.rating-10 span.one:before, -.rating-30 span.two:before, -.rating-50 span.three:before, -.rating-70 span.four:before, -.rating-90 span.five:before { - content: "\f459"; -} -/* Full stars */ -.rating-20 span.one:before { - content: "\f155"; -} -.rating-30 span.one:before, -.rating-40 span.one:before, -.rating-40 span.two:before { - content: "\f155"; -} -.rating-50 span.one:before, -.rating-50 span.two:before, -.rating-60 span.one:before, -.rating-60 span.two:before, -.rating-60 span.three:before { - content: "\f155"; -} -.rating-70 span.one:before, -.rating-70 span.two:before, -.rating-70 span.three:before, -.rating-80 span.one:before, -.rating-80 span.two:before, -.rating-80 span.three:before, -.rating-80 span.four:before { - content: "\f155"; -} -.rating-90 span.one:before, -.rating-90 span.two:before, -.rating-90 span.three:before, -.rating-90 span.four:before, -.rating-100 span.one:before, -.rating-100 span.two:before, -.rating-100 span.three:before, -.rating-100 span.four:before, -.rating-100 span.five:before { - content: "\f155"; -} -.rating .ratings { + +.theme-details .star-rating { display: inline; - margin-left: 10px; - line-height: 20px; +} + +.theme-details .num-ratings, +.theme-details .no-rating { + font-size: 11px; color: #999; } +.theme-details .no-rating { + display: block; + line-height: 20px; +} + /*------------------------------------------------------------------------------ 16.3 - Custom Header Screen ------------------------------------------------------------------------------*/ @@ -1304,7 +1257,6 @@ body.full-overlay-active { padding: 0; margin: 0; z-index: 10; - overflow: auto; background: #eee; border-right: none; } @@ -1327,7 +1279,7 @@ body.full-overlay-active { } .wp-full-overlay-sidebar:after { - content: ''; + content: ""; display: block; position: absolute; top: 0; @@ -1346,6 +1298,16 @@ body.full-overlay-active { height: 100%; } +#customize-preview.wp-full-overlay-main { + background: url(../images/spinner.gif) no-repeat center center; + -webkit-background-size: 20px 20px; + background-size: 20px 20px; +} + +#customize-preview.wp-full-overlay-main.iframe-ready { + background: none; +} + .wp-full-overlay-sidebar .wp-full-overlay-header { position: absolute; left: 0; @@ -1448,79 +1410,85 @@ body.full-overlay-active { .theme-install-overlay .previous-theme.disabled:focus, .theme-install-overlay .next-theme.disabled:hover, .theme-install-overlay .next-theme.disabled:focus { - color: #bbb; + color: #b4b9be; background: #eee; cursor: default; pointer-events: none; } -.rtl .theme-install-overlay .previous-theme:before { - content: "\f345"; +/* Collapse Button */ +.wp-core-ui .wp-full-overlay .collapse-sidebar { + position: fixed; + bottom: 8px; + left: 10px; + padding: 0; + color: #656a6f; + outline: 0; + line-height: 1; + background-color: transparent !important; + border: none !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + -webkit-border-radius: 0 !important; + border-radius: 0 !important; } -.rtl .theme-install-overlay .next-theme:before { - content: "\f341"; +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus { + color: #0073aa; } -/* Collapse Button */ -.wp-full-overlay a.collapse-sidebar { - position: absolute; - bottom: 12px; - left: 0; - z-index: 50; - display: block; - width: 19px; - height: 19px; - margin-left: 15px; - padding: 0; +.wp-full-overlay .collapse-sidebar-arrow, +.wp-full-overlay .collapse-sidebar-label { + display: inline-block; + vertical-align: middle; + line-height: 20px; +} + +.wp-full-overlay .collapse-sidebar-arrow { + width: 20px; + height: 20px; + margin: 0 2px; /* avoid the focus box-shadow to be cut-off */ -webkit-border-radius: 50%; border-radius: 50%; - color: #777; - text-decoration: none; + overflow: hidden; } -.wp-full-overlay a.collapse-sidebar:hover { - color: #0074a2; +.wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow, +.wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow { + -webkit-box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30, 140, 190, .8); + box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30, 140, 190, .8); } -.wp-full-overlay.collapsed .collapse-sidebar { - position: absolute; - left: 100%; +.wp-full-overlay .collapse-sidebar-label { + margin-left: 3px; } -.wp-full-overlay .collapse-sidebar-arrow { - position: static; - margin-top: 0; - margin-left: 0; - display: block; - width: auto; - height: auto; - background: none; +.wp-full-overlay.collapsed .collapse-sidebar-label { + display: none; } .wp-full-overlay .collapse-sidebar-arrow:before { - -webkit-border-radius: 50%; - border-radius: 50%; - float: left; + display: block; content: "\f148"; background: #eee; - font: normal 20px/1 'dashicons'; + font: normal 20px/1 dashicons; speak: none; - display: block; padding: 0; - text-indent: 0; - text-align: center; - position: relative; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - text-decoration: none !important; } +/* rtl:ignore */ .wp-full-overlay.collapsed .collapse-sidebar-arrow:before, .rtl .wp-full-overlay .collapse-sidebar-arrow:before { - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); + -webkit-transform: rotate(180.001deg); + -ms-transform: rotate(180.001deg); + transform: rotate(180.001deg); /* Firefox: promoting to its own layer to trigger anti-aliasing */ } .rtl .wp-full-overlay.collapsed .collapse-sidebar-arrow:before { @@ -1529,21 +1497,6 @@ body.full-overlay-active { transform: none; } -.wp-full-overlay.collapsed .collapse-sidebar-arrow { - background-position: -1px -109px; -} - -.wp-full-overlay .collapse-sidebar-label { - position: absolute; - left: 100%; - line-height: 20px; - margin-left: 10px; -} - -.wp-full-overlay.collapsed .collapse-sidebar-label { - display: none; -} - /* Animations */ .wp-full-overlay, .wp-full-overlay-sidebar, @@ -1604,10 +1557,6 @@ body.full-overlay-active { transition: opacity 0.3s; } -#customize-container .collapse-sidebar { - bottom: 16px; -} - #customize-controls { margin-top: 0; } @@ -1646,7 +1595,7 @@ body.full-overlay-active { } .install-theme-info .theme-screenshot { - margin-top: 15px; + margin: 15px 0; width: 258px; border: 1px solid #ccc; } @@ -1657,12 +1606,6 @@ body.full-overlay-active { .theme-details .theme-version { margin: 15px 0; - float: left; -} - -.theme-details .star-rating { - margin: 7px 0; - float: right; } .theme-details .theme-description { @@ -1691,11 +1634,32 @@ body.full-overlay-active { } .theme-install-overlay .wp-full-overlay-main { + position: relative; + z-index: 0; + background-color: #fff; +} + +.theme-install-overlay .wp-full-overlay-main:before { + content: ''; + display: block; + width: 20px; + height: 20px; + position: absolute; + left: 50%; + top: 50%; + z-index: -1; + margin: -10px 0 0 -10px; + -webkit-transform: translateZ(0); + transform: translateZ(0); background: #fff url(../images/spinner.gif) no-repeat center center; -webkit-background-size: 20px 20px; background-size: 20px 20px; } +.theme-install-overlay.iframe-ready .wp-full-overlay-main:before { + background-image: none; +} + /* =Media Queries -------------------------------------------------------------- */ @@ -1703,7 +1667,6 @@ body.full-overlay-active { * HiDPI Displays */ @media print, - (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { .wp-full-overlay .collapse-sidebar-arrow { @@ -1712,8 +1675,9 @@ body.full-overlay-active { background-size: 15px 123px; } + #customize-preview.wp-full-overlay-main, .customize-loading #customize-container, - .theme-install-overlay .wp-full-overlay-main { + .theme-install-overlay .wp-full-overlay-main:before { background-image: url(../images/spinner-2x.gif); } } @@ -1729,4 +1693,13 @@ body.full-overlay-active { .available-theme .action-links .delete-theme a { padding: 0; } + + .broken-themes table { + width: 100%; + } + + .theme-install-overlay .wp-full-overlay-header .theme-install { + margin-top: 6px; + line-height: normal; + } }