diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss index a08296f847..b6d563300b 100644 --- a/src/wp-admin/css/colors/_admin.scss +++ b/src/wp-admin/css/colors/_admin.scss @@ -400,7 +400,13 @@ ul#adminmenu > li.current > a.current:after { } -/* Media Uploader */ +/* Media */ + +.media-modal-close:hover .media-modal-icon:before, +.edit-attachment-frame .edit-media-header .right:hover, +.edit-attachment-frame .edit-media-header .left:hover { + color: $link-focus; +} .media-item .bar, .media-progress-bar div { @@ -431,7 +437,7 @@ ul#adminmenu > li.current > a.current:after { .theme-overlay .theme-header .close:hover, .theme-overlay .theme-header .right:hover, .theme-overlay .theme-header .left:hover { - background: $highlight-color; + color: $link-focus; } .theme-section.current, @@ -465,8 +471,7 @@ body.more-filters-opened .more-filters:focus:before { .theme-install-overlay .previous-theme:focus, .theme-install-overlay .next-theme:hover, .theme-install-overlay .next-theme:focus { - background-color: $menu-highlight-background; - color: $menu-highlight-text; + color: $link-focus; } /* Widgets */ @@ -492,8 +497,7 @@ body.more-filters-opened .more-filters:focus:before { .customize-controls-close:hover, .control-panel-back:focus, .control-panel-back:hover { - background-color: $menu-highlight-background; - color: $menu-highlight-text; + color: $link-focus; } /* jQuery UI Slider */ diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index 86e5fb5ff6..5a312c07fb 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/src/wp-admin/css/customize-controls.css @@ -232,27 +232,26 @@ body { .customize-controls-close:hover, .control-panel-back:focus, .control-panel-back:hover { - background-color: #0074a2; - color: #fff; + color: #2ea2cc; outline: none; -webkit-box-shadow: none; box-shadow: none; } .customize-controls-close:before { - font: normal 32px/1 dashicons; + font: normal 22px/1 dashicons; content: "\f335"; position: relative; - top: 8px; - left: 8px; + top: 7px; + left: 12px; } .control-panel-back:before { - font: normal 29px/1 dashicons; - content: "\f340"; + font: normal 20px/1 dashicons; + content: "\f341"; position: relative; - top: 9px; - left: 9px; + top: 13px; + left: 13px; } .rtl .control-panel-back:before { diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css index 1df3d9f436..daa8eef0e0 100644 --- a/src/wp-admin/css/themes.css +++ b/src/wp-admin/css/themes.css @@ -431,13 +431,8 @@ transition: color .1s ease-in-out, background .1s ease-in-out; } -.theme-overlay .theme-header .close:hover:before, -.theme-overlay .theme-header .close:focus:before { - color: #fff; -} - .theme-overlay .theme-header .close:before { - font: normal 30px/50px 'dashicons' !important; + font: normal 22px/50px 'dashicons' !important; color: #777; display: inline-block; content: '\f335'; @@ -461,16 +456,23 @@ } .theme-overlay .theme-header .close:hover, +.theme-overlay .theme-header .close:hover:before, +.theme-overlay .theme-header .close:focus:before, .theme-overlay .theme-header .right:hover, -.theme-overlay .theme-header .left:hover, +.theme-overlay .theme-header .left:hover { + color: #2ea2cc; +} + .theme-overlay .theme-header .close:focus, .theme-overlay .theme-header .right:focus, .theme-overlay .theme-header .left:focus { - background: #0074a2; - color: #fff; - outline: none; - -webkit-box-shadow: none; - box-shadow: none; + color: #2ea2cc; + -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); } .theme-overlay .theme-header .left.disabled, @@ -489,21 +491,17 @@ font-weight: 300; } -.theme-overlay .theme-header .left:before { - content: '\f340'; -} - -.theme-overlay .theme-header .right:before { - content: '\f344'; +.theme-overlay .theme-header .left:before, +.rtl .theme-overlay .theme-header .right:before { + content: '\f341'; } +.theme-overlay .theme-header .right:before, .rtl .theme-overlay .theme-header .left:before { content: '\f345'; } -.rtl .theme-overlay .theme-header .right:before { - content: '\f341'; -} + .theme-overlay .theme-wrap { clear: both; @@ -1400,24 +1398,23 @@ body.full-overlay-active { .theme-install-overlay .previous-theme:focus, .theme-install-overlay .next-theme:hover, .theme-install-overlay .next-theme:focus { - background-color: #0074a2; - color: #fff; + color: #2ea2cc; outline: none; -webkit-box-shadow: none; box-shadow: none; } .theme-install-overlay .close-full-overlay:before { - font: normal 30px/1 dashicons; + font: normal 22px/1 dashicons; content: "\f335"; position: relative; - top: 9px; - left: 9px; + top: 7px; + left: 12px; } .theme-install-overlay .previous-theme:before { font: normal 20px/1 dashicons; - content: "\f340"; + content: "\f341"; position: relative; top: 6px; left: 14px; @@ -1425,7 +1422,7 @@ body.full-overlay-active { .theme-install-overlay .next-theme:before { font: normal 20px/1 dashicons; - content: "\f344"; + content: "\f345"; position: relative; top: 6px; left: 13px; @@ -1443,11 +1440,11 @@ body.full-overlay-active { } .rtl .theme-install-overlay .previous-theme:before { - content: "\f344"; + content: "\f345"; } .rtl .theme-install-overlay .next-theme:before { - content: "\f340"; + content: "\f341"; } /* Collapse Button */ diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css index e0dc53a4b4..7bc3e136c4 100644 --- a/src/wp-includes/css/media-views.css +++ b/src/wp-includes/css/media-views.css @@ -140,7 +140,7 @@ .media-modal-close { position: absolute; text-decoration: none; - top: 5px; + top: 10px; right: 10px; width: 30px; height: 30px; @@ -149,12 +149,17 @@ transition: color .1s ease-in-out, background .1s ease-in-out; } +.media-modal-close:active { + box-shadow: none; +} + .media-modal-close span.media-modal-icon { display: block; - margin: 8px auto 0; - width: 15px; + margin-top: 5px; + width: 30px; height: 15px; background-image: none; + text-align: center; } .media-modal-close .media-modal-icon:before { @@ -494,7 +499,7 @@ right: 0; bottom: 0; margin: 0; - padding: 16px 0; + padding: 10px 0; background: #f3f3f3; border-right-width: 1px; border-right-style: solid; @@ -619,13 +624,13 @@ top: 0; left: 200px; right: 0; - height: 56px; + height: 50px; z-index: 200; } .media-frame-router { position: absolute; - top: 56px; + top: 50px; left: 200px; right: 0; height: 36px; @@ -634,7 +639,7 @@ .media-frame-content { position: absolute; - top: 90px; + top: 84px; left: 200px; right: 0; bottom: 61px; @@ -676,7 +681,7 @@ } .media-frame.hide-router .media-frame-content { - top: 56px; + top: 50px; } .media-frame.hide-router .media-frame-router { @@ -696,7 +701,7 @@ .media-frame-title h1 { padding: 0 16px; font-size: 22px; - line-height: 60px; + line-height: 50px; margin: 0; } @@ -2287,7 +2292,7 @@ .media-frame .media-frame-title .dashicons { display: inline-block; - line-height: 56px; + line-height: 50px; } .media-frame .media-frame-title h1 { @@ -2717,18 +2722,12 @@ .upload-php .media-modal-close .media-modal-icon:before { content: '\f335'; - font-size: 30px; -} - -.upload-php .media-modal-close:hover .media-modal-icon:before, -.upload-php .media-modal-close:focus .media-modal-icon:before { - color: #fff; + font-size: 22px; } .upload-php .media-modal-close .media-modal-icon { - margin-top: 13px; - width: 30px; - height: 30px; + margin: 14px; + width: 22px; } .upload-php .media-modal-close, @@ -2737,8 +2736,8 @@ cursor: pointer; color: #777; background-color: transparent; - height: 56px; - width: 56px; + height: 50px; + width: 50px; padding: 0; position: absolute; text-align: center; @@ -2754,16 +2753,16 @@ } .edit-attachment-frame .edit-media-header .left { - right: 112px; + right: 102px; } .edit-attachment-frame .edit-media-header .right { - right: 56px; + right: 51px; } .edit-attachment-frame .media-frame-title { left: 0; - right: 170px; /* leave space for prev/next/close */ + right: 150px; /* leave space for prev/next/close */ } .edit-attachment-frame .edit-media-header .right:before, @@ -2773,14 +2772,19 @@ font-weight: 300; } +.edit-attachment-frame .edit-media-header .right:hover, +.edit-attachment-frame .edit-media-header .left:hover { + color: #2ea2cc; +} + .edit-attachment-frame .edit-media-header .left:before, .rtl .edit-attachment-frame .edit-media-header .right:before { - content: '\f340'; + content: '\f341'; } .edit-attachment-frame .edit-media-header .right:before, .rtl .edit-attachment-frame .edit-media-header .left:before { - content: '\f344'; + content: '\f345'; } .edit-attachment-frame .edit-media-header .left.disabled, @@ -2789,20 +2793,7 @@ .edit-attachment-frame .edit-media-header .right.disabled:hover { color: #ccc; background: inherit; - cursor: inherit; -} - -.upload-php .media-modal-close:hover, -.edit-attachment-frame .edit-media-header .right:hover, -.edit-attachment-frame .edit-media-header .left:hover, -.upload-php .media-modal-close:focus, -.edit-attachment-frame .edit-media-header .right:focus, -.edit-attachment-frame .edit-media-header .left:focus { - background: #0074a2; - color: #fff; - outline: none; - -webkit-box-shadow: none; - box-shadow: none; + cursor: default; } .edit-attachment-frame .media-frame-content, @@ -2813,7 +2804,7 @@ .edit-attachment-frame .media-frame-content { border-bottom: none; bottom: 0; - top: 56px; + top: 50px; } .edit-attachment-frame .attachment-details {