diff --git a/src/wp-admin/css/admin-menu.css b/src/wp-admin/css/admin-menu.css index f9153be703..74bbe1a5f0 100644 --- a/src/wp-admin/css/admin-menu.css +++ b/src/wp-admin/css/admin-menu.css @@ -330,7 +330,6 @@ #adminmenu .wp-submenu li { padding: 0; margin: 0; - overflow: hidden; } #adminmenu .wp-menu-image img { @@ -547,16 +546,20 @@ ul#adminmenu > li.current > a.current:after { padding: 0; position: relative; overflow: visible; - line-height: 34px; background: none; color: #aaa; cursor: pointer; - outline: 0; } -#collapse-button:hover, +#collapse-button:hover { + color: #00b9eb; +} + #collapse-button:focus { color: #00b9eb; + /* Only visible in Windows High Contrast mode */ + outline: 1px solid transparent; + outline-offset: -1px; } #collapse-button .collapse-button-icon, @@ -566,7 +569,10 @@ ul#adminmenu > li.current > a.current:after { position: absolute; top: 0; left: 0; - line-height: 34px; +} + +#collapse-button .collapse-button-label { + top: 8px; } #collapse-button .collapse-button-icon { diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index f9b9799c29..e15b871f53 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -158,7 +158,9 @@ line-height: normal; box-shadow: 0 0 2px 2px rgba(0,0,0,.6); text-decoration: none; - outline: none; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; + outline-offset: -2px; } .hidden, @@ -273,13 +275,21 @@ a:focus .media-icon img, box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8); + /* Only visible in Windows High Contrast mode */ + outline: 1px solid transparent; } .ie8 a:focus { outline: #5b9dd9 solid 1px; } -#adminmenu a:focus, +#adminmenu a:focus { + box-shadow: none; + /* Only visible in Windows High Contrast mode */ + outline: 1px solid transparent; + outline-offset: -1px; +} + .screen-reader-text:focus { box-shadow: none; outline: none; @@ -617,7 +627,6 @@ code { line-height: normal; /* IE8-IE11 need this for buttons */ color: #0073aa; /* some of these controls are button elements and don't inherit from links */ cursor: pointer; - outline: 0; } .wrap .wp-heading-inline + .page-title-action { @@ -639,6 +648,8 @@ code { .wrap .page-title-action:focus { border-color: #5b9dd9; box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 ); + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } .wrap h1.long-header { diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index 31f62c25c8..3013434604 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -52,6 +52,8 @@ select:focus, textarea:focus { border-color: #5b9dd9; box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 ); + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } /* rtl:ignore */ @@ -236,10 +238,12 @@ textarea[readonly] { color: #72777c; } -.form-invalid input, .form-invalid input:focus, -.form-invalid select, .form-invalid select:focus { +.form-invalid input, +.form-invalid input:focus, +.form-invalid select, +.form-invalid select:focus { border-color: #dc3232 !important; - box-shadow: 0 0 2px rgba( 204, 0, 0, 0.8 ); + box-shadow: 0 0 2px rgba( 204, 0, 0, 0.8 ); } .form-table .form-required.form-invalid td:after { diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css index bd0c90155d..1802dd51c3 100644 --- a/src/wp-admin/css/media.css +++ b/src/wp-admin/css/media.css @@ -310,10 +310,12 @@ } #find-posts-close:focus { - outline: none; box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8); + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; + outline-offset: -2px; } #find-posts-close:before { @@ -528,7 +530,9 @@ border color while dragging a file over the uploader drop area */ box-shadow: inset 0 0 2px 3px #f1f1f1, inset 0 0 0 7px #5b9dd9; - outline: none; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; + outline-offset: -6px; } .media-frame.mode-grid .selected.attachment { @@ -681,6 +685,14 @@ border color while dragging a file over the uploader drop area */ box-shadow: none; } +.upload-php .media-modal-close:focus, +.edit-attachment-frame .edit-media-header .left:focus, +.edit-attachment-frame .edit-media-header .right:focus { + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; + outline-offset: -2px; +} + .upload-php .media-modal-close:focus .media-modal-icon:before, .upload-php .media-modal-close:hover .media-modal-icon:before { color: #000; @@ -1079,8 +1091,9 @@ border color while dragging a file over the uploader drop area */ .image-editor .imgedit-settings .imgedit-help-toggle:focus { color: #0074a2; border-color: #5b9dd9; - outline: none; box-shadow: 0 0 3px rgba( 0, 115, 170, .8 ); + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } .form-table td.imgedit-response { diff --git a/src/wp-includes/css/admin-bar.css b/src/wp-includes/css/admin-bar.css index a6d9b3ea92..b357c4bb95 100644 --- a/src/wp-includes/css/admin-bar.css +++ b/src/wp-includes/css/admin-bar.css @@ -53,7 +53,6 @@ html:lang(he-il) .rtl #wpadminbar * { #wpadminbar a:hover, #wpadminbar a img, #wpadminbar a img:hover { - outline: none; border: none; text-decoration: none; background: none; @@ -71,7 +70,11 @@ html:lang(he-il) .rtl #wpadminbar * { #wpadminbar textarea, #wpadminbar div { box-shadow: none; - outline: none; +} + +#wpadminbar a:focus { + /* Inherits transparent outline only visible in Windows High Contrast mode */ + outline-offset: -1px; } #wpadminbar { diff --git a/src/wp-includes/css/buttons.css b/src/wp-includes/css/buttons.css index 646f584ead..c051975f6a 100644 --- a/src/wp-includes/css/buttons.css +++ b/src/wp-includes/css/buttons.css @@ -92,9 +92,12 @@ TABLE OF CONTENTS: padding: 0 36px; } +/* Only visible in Windows High Contrast mode */ .wp-core-ui .button:active, .wp-core-ui .button:focus { - outline: none; + outline: 2px solid transparent; + /* Reset inherited offset from Gutenberg */ + outline-offset: 0; } .wp-core-ui .button.hidden { @@ -190,7 +193,6 @@ TABLE OF CONTENTS: border: 0; border-radius: 0; background: none; - outline: none; cursor: pointer; text-align: left; /* Mimics the default link style in common.css */ @@ -211,6 +213,8 @@ TABLE OF CONTENTS: box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8); + /* Only visible in Windows High Contrast mode */ + outline: 1px solid transparent; } .wp-core-ui .button-link-delete { @@ -280,14 +284,14 @@ TABLE OF CONTENTS: } .wp-core-ui .button.button-primary.button-hero { - box-shadow: 0 2px 0 #006799; + box-shadow: 0 2px 0 #006799; } .wp-core-ui .button.button-primary.button-hero.active, .wp-core-ui .button.button-primary.button-hero.active:hover, .wp-core-ui .button.button-primary.button-hero.active:focus, .wp-core-ui .button.button-primary.button-hero:active { - box-shadow: inset 0 3px 0 #006799; + box-shadow: inset 0 3px 0 #006799; } /* ---------------------------------------------------------------------------- diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css index 7fd8684836..07ee8cfc2a 100644 --- a/src/wp-includes/css/media-views.css +++ b/src/wp-includes/css/media-views.css @@ -48,8 +48,9 @@ box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8); - outline: none; color: #124964; + /* Only visible in Windows High Contrast mode */ + outline: 1px solid transparent; } .media-frame a.button { @@ -195,6 +196,9 @@ color: #00a0d2; border-color: #5b9dd9; box-shadow: 0 0 3px rgba( 0, 115, 170, .8 ); + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; + outline-offset: -2px; } .media-modal-close span.media-modal-icon { @@ -835,7 +839,9 @@ box-shadow: inset 0 0 2px 3px #fff, inset 0 0 0 7px #5b9dd9; - outline: none; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; + outline-offset: -6px; } .wp-core-ui .selected.attachment { @@ -1011,6 +1017,11 @@ 0 0 0 2px #0073aa; } +.wp-core-ui .attachment.selected .check:focus { + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; +} + .wp-core-ui .attachment.details .check .media-modal-icon, .wp-core-ui .media-frame.mode-grid .attachment.selected .check .media-modal-icon { background-position: -21px 0; @@ -1485,6 +1496,8 @@ box-shadow: 0 0 0 1px #fff, 0 0 2px 3px #5b9dd9; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } .wp-core-ui .media-selection .selected.attachment { @@ -1777,8 +1790,9 @@ .wp-core-ui.media-modal .image-editor .imgedit-help-toggle:focus { color: #0074a2; border-color: #5b9dd9; - outline: none; box-shadow: 0 0 3px rgba( 0, 115, 170, .8 ); + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } .wp-core-ui.media-modal .imgedit-group-top .dashicons-arrow-down.imgedit-help-toggle {