From bd534ccaa269da06e4aace96dfbee7e7711cba8c Mon Sep 17 00:00:00 2001 From: Joe Dolson Date: Wed, 7 Feb 2024 16:54:58 +0000 Subject: [PATCH] Administration: Improve contrast and consistency of focus styles. Apply new focus styles from WordPress 5.3 more broadly. An updated focus style for form inputs, buttons, and link styled as buttons was added in WordPress 5.3; this commit makes other focus styles consistent with those changes so they meet accessibility standards for color contrast. Props johnbillion, kebbet, joedolson, afercia. Fixes #51870. git-svn-id: https://develop.svn.wordpress.org/trunk@57553 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/common.css | 61 +++++++++++++---------- src/wp-admin/css/customize-controls.css | 13 +++-- src/wp-admin/css/customize-nav-menus.css | 8 +-- src/wp-admin/css/edit.css | 5 +- src/wp-admin/css/forms.css | 7 +++ src/wp-admin/css/install.css | 6 +-- src/wp-admin/css/list-tables.css | 19 ++++--- src/wp-admin/css/login.css | 6 +-- src/wp-admin/css/media.css | 12 ++--- src/wp-admin/css/nav-menus.css | 10 ++-- src/wp-admin/css/themes.css | 14 +++--- src/wp-admin/css/widgets.css | 6 +-- src/wp-includes/css/buttons.css | 6 +-- src/wp-includes/css/editor.css | 39 +++++++-------- src/wp-includes/css/jquery-ui-dialog.css | 4 +- src/wp-includes/css/media-views.css | 26 ++++------ src/wp-includes/css/wp-embed-template.css | 4 +- src/wp-includes/functions.php | 15 ++---- 18 files changed, 131 insertions(+), 130 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 0ff5ec39cf..98555d1c6c 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -279,11 +279,9 @@ a:focus .media-icon img, a:focus .plugin-icon, .wp-person a:focus .gravatar { color: #043959; - box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); - /* Only visible in Windows High Contrast mode */ - outline: 1px solid transparent; + box-shadow: 0 0 0 2px #2271b1; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } #adminmenu a:focus { @@ -844,9 +842,9 @@ img.emoji { } .tagchecklist .ntdelbutton:focus .remove-tag-icon:before { - box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); + box-shadow: 0 0 0 2px #2271b1; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } .key-labels label { @@ -1460,10 +1458,9 @@ div.error p, } .notice-dismiss:focus { - outline: none; - box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); + box-shadow: 0 0 0 2px #2271b1; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } .notice-success, @@ -1804,8 +1801,10 @@ p.auto-update-status { } #screen-meta-links .show-settings:focus { - border-color: #4f94d4; - box-shadow: 0 0 3px rgba(34, 113, 177, 0.8); + border-color: #2271b1; + box-shadow: 0 0 0 1px #2271b1; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } #screen-meta-links .show-settings:active { @@ -2143,8 +2142,8 @@ html.wp-toolbar { .postbox .handle-order-higher, .postbox .handle-order-lower, .postbox .handlediv { - width: 36px; - height: 36px; + width: 1.62rem; + height: 1.62rem; margin: 0; padding: 0; border: 0; @@ -3186,11 +3185,10 @@ img { .postbox .handle-order-higher:focus, .postbox .handle-order-lower:focus, .postbox .handlediv:focus { - box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); + box-shadow: inset 0 0 0 2px #2271b1; + border-radius: 50%; /* Only visible in Windows High Contrast mode */ - outline: 1px solid transparent; + outline: 2px solid transparent; } .postbox .handle-order-higher:focus .order-higher-indicator::before, @@ -3289,12 +3287,17 @@ img { [role="treeitem"] { outline: 0; } + +[role="treeitem"] a:focus, [role="treeitem"] .folder-label.focus { color: #043959; - box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); + /* Reset default focus style. */ + box-shadow: none; + /* Use an inset outline instead, so it's visible also over the current file item. */ + outline: 2px solid #2271b1; + outline-offset: -2px; } + [role="treeitem"].hover, [role="treeitem"] .folder-label.hover { background-color: #f0f0f1; @@ -3436,6 +3439,10 @@ img { text-decoration: none; } +#templateside li.current-file > a { + padding-bottom: 0; +} + #templateside li:not(.howto) > a:first-of-type { padding-top: 0; } @@ -3521,13 +3528,13 @@ img { .accordion-section-title:hover:after { color: #1d2327; /* Only visible in Windows High Contrast mode */ - outline: 1px solid transparent; + outline: 2px solid transparent; } .widget-top .widget-action:focus .toggle-indicator:before { - box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); + box-shadow: 0 0 0 2px #2271b1; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } .control-section .accordion-section-title:after, diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index 3548f12e9c..ca21fe2889 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/src/wp-admin/css/customize-controls.css @@ -1566,10 +1566,9 @@ p.customize-section-description { } .customize-control-header .choice:focus { - outline: none; - box-shadow: - 0 0 0 1px #4f94d4, - 0 0 3px 1px rgba(79, 148, 212, 0.8); + box-shadow: 0 0 0 2px #2271b1; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } .customize-control-header .uploaded div:last-child > .choice { @@ -2679,9 +2678,9 @@ body.adding-widget .add-new-widget:before, #available-widgets-filter .clear-results:focus, #available-menu-items-search .clear-results:focus { - box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); + box-shadow: 0 0 0 2px #2271b1; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } #available-menu-items-search .search-icon:after, diff --git a/src/wp-admin/css/customize-nav-menus.css b/src/wp-admin/css/customize-nav-menus.css index 46ac3066ef..c645bb5f11 100644 --- a/src/wp-admin/css/customize-nav-menus.css +++ b/src/wp-admin/css/customize-nav-menus.css @@ -271,7 +271,7 @@ .customize-screen-options-toggle:focus, #customize-controls .customize-info .customize-help-toggle:focus { /* Only visible in Windows High Contrast mode */ - outline: 1px solid transparent; + outline: 2px solid transparent; } .customize-screen-options-toggle:before { @@ -864,9 +864,9 @@ li.assigned-to-menu-location .add-new-menu-item { .menu-delete:focus, .menu-item-bar .item-delete:focus:before, #available-menu-items .item-add:focus:before { - box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); + box-shadow: 0 0 0 2px #2271b1; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } diff --git a/src/wp-admin/css/edit.css b/src/wp-admin/css/edit.css index 8f2032b189..757d676b72 100644 --- a/src/wp-admin/css/edit.css +++ b/src/wp-admin/css/edit.css @@ -1293,8 +1293,9 @@ div.tabs-panel-inactive { } div.tabs-panel-active:focus { - box-shadow: inset 0 0 0 1px #4f94d4, inset 0 0 2px 1px rgba(79, 148, 212, 0.8); - outline: 0 none; + box-shadow: inset 0 0 0 2px #2271b1; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } #front-page-warning, diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index bdceac04c4..16f7cb899f 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -679,6 +679,13 @@ fieldset label, border-color: #68de7c; } +#pass1:focus, +#pass1-text:focus { + box-shadow: 0 0 0 2px #2271b1; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; +} + .pw-weak { display: none; } diff --git a/src/wp-admin/css/install.css b/src/wp-admin/css/install.css index 1170ff7c32..29e85715f6 100644 --- a/src/wp-admin/css/install.css +++ b/src/wp-admin/css/install.css @@ -26,9 +26,9 @@ a:active { a:focus { color: #043959; - box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); + box-shadow: 0 0 0 2px #2271b1; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } h1, h2 { diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css index ed7d458488..098c31a6d1 100644 --- a/src/wp-admin/css/list-tables.css +++ b/src/wp-admin/css/list-tables.css @@ -261,8 +261,10 @@ } th .comment-grey-bubble { - height: 16px; width: 16px; + /* Make sure the link clickable area fills the entire table header. */ + position: relative; + top: 2px; } th .comment-grey-bubble:before { @@ -343,7 +345,6 @@ table.fixed { .fixed .column-comments { width: 5.5em; - padding: 8px 0; text-align: left; } @@ -537,9 +538,9 @@ th.sorted.desc:hover .sorting-indicator.asc:before { } .wp-list-table .toggle-row:focus:before { - box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); + box-shadow: 0 0 0 2px #2271b1; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } .wp-list-table .toggle-row:active { @@ -649,9 +650,11 @@ th.sorted a { padding: 8px; } -.fixed .column-comments.sortable a, -.fixed .column-comments.sorted a { - padding: 8px 0; +th.sortable a:focus, +th.sorted a:focus { + box-shadow: inset 0 0 0 2px #2271b1; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } th.sortable a span, diff --git a/src/wp-admin/css/login.css b/src/wp-admin/css/login.css index fe790f0b42..b9f488bd6c 100644 --- a/src/wp-admin/css/login.css +++ b/src/wp-admin/css/login.css @@ -32,9 +32,9 @@ a:active { a:focus { color: #043959; - box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); + box-shadow: 0 0 0 2px #2271b1; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } p { diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css index 834292901f..4463ae373d 100644 --- a/src/wp-admin/css/media.css +++ b/src/wp-admin/css/media.css @@ -356,9 +356,7 @@ } #find-posts-close:focus { - box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); + box-shadow: 0 0 0 2px #2271b1; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; outline-offset: -2px; @@ -533,9 +531,7 @@ border color while dragging a file over the uploader drop area */ .media-frame.mode-grid .attachment:focus, .media-frame.mode-grid .selected.attachment:focus, .media-frame.mode-grid .attachment.details:focus { - box-shadow: - inset 0 0 2px 3px #f0f0f1, - inset 0 0 0 7px #4f94d4; + box-shadow: inset 0 0 0 2px #2271b1; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; outline-offset: -6px; @@ -1172,8 +1168,8 @@ border color while dragging a file over the uploader drop area */ .image-editor .imgedit-settings .imgedit-help-toggle:focus { color: #2271b1; - border-color: #4f94d4; - box-shadow: 0 0 3px rgba(34, 113, 177, 0.8); + border-color: #2271b1; + box-shadow: 0 0 0 1px #2271b1; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } diff --git a/src/wp-admin/css/nav-menus.css b/src/wp-admin/css/nav-menus.css index 4fd178dbb0..ff586a4ee7 100644 --- a/src/wp-admin/css/nav-menus.css +++ b/src/wp-admin/css/nav-menus.css @@ -103,7 +103,7 @@ ul.add-menu-item-tabs li { #nav-menu-bulk-actions-bottom { margin: 1em 0; - margin: calc( 1em + 9px ) 0 ; + margin: calc( 1em + 9px ) 0; } .bulk-actions input.button { @@ -732,9 +732,9 @@ body.menu-max-depth-11 { min-width: 1280px !important; } } .nav-menus-php .item-edit:focus:before { - box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); + box-shadow: 0 0 0 2px #2271b1; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } /* Menu editing */ @@ -991,7 +991,7 @@ body.menu-max-depth-11 { min-width: 1280px !important; } @media only screen and (min-width: 783px) { @supports (position: sticky) and (scroll-margin-bottom: 130px) { - + #nav-menu-footer { position: sticky; bottom: 0; diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css index 268cc558f3..a68abbca04 100644 --- a/src/wp-admin/css/themes.css +++ b/src/wp-admin/css/themes.css @@ -176,12 +176,14 @@ body.js .theme-browser.search-loading { } .theme-browser .theme .more-details:focus { - box-shadow: 0 0 0 1px #fff, 0 0 0 3px #2271b1; + box-shadow: 0 0 0 2px #2271b1; } .theme-browser .theme.focus { - border-color: #4f94d4; - box-shadow: 0 0 2px rgba(79, 148, 212, 0.8); + border-color: #2271b1; + box-shadow: 0 0 0 1px #2271b1; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } .theme-browser .theme.focus .more-details { @@ -1586,9 +1588,9 @@ body.full-overlay-active { .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow, .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow { - box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); + box-shadow: 0 0 0 2px #2271b1; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } .wp-full-overlay .collapse-sidebar-label { diff --git a/src/wp-admin/css/widgets.css b/src/wp-admin/css/widgets.css index 8faca8f9ac..e24140926e 100644 --- a/src/wp-admin/css/widgets.css +++ b/src/wp-admin/css/widgets.css @@ -336,9 +336,9 @@ } .sidebar-name .handlediv:focus .toggle-indicator:before { - box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); + box-shadow: 0 0 0 2px #2271b1; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } .sidebar-name h2, diff --git a/src/wp-includes/css/buttons.css b/src/wp-includes/css/buttons.css index 56f146d3d6..5146be4274 100644 --- a/src/wp-includes/css/buttons.css +++ b/src/wp-includes/css/buttons.css @@ -215,11 +215,9 @@ TABLE OF CONTENTS: .wp-core-ui .button-link:focus { color: #043959; - box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); + box-shadow: 0 0 0 2px #2271b1; /* Only visible in Windows High Contrast mode */ - outline: 1px solid transparent; + outline: 2px solid transparent; } .wp-core-ui .button-link-delete { diff --git a/src/wp-includes/css/editor.css b/src/wp-includes/css/editor.css index 969b880873..86952c7c9b 100644 --- a/src/wp-includes/css/editor.css +++ b/src/wp-includes/css/editor.css @@ -87,8 +87,9 @@ .mce-window-head .mce-close:focus .mce-i-remove, div.mce-tab:focus { - box-shadow: 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); + box-shadow: 0 0 0 2px #2271b1; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } .mce-window .mce-window-head .mce-dragh { @@ -113,7 +114,9 @@ div.mce-tab:focus { .mce-checkbox:focus i.mce-i-checkbox, #wp-link .query-results:focus { border-color: #4f94d4; - box-shadow: 0 0 2px rgba(79, 148, 212, 0.8); + box-shadow: 0 0 0 2px #2271b1; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } .mce-window .mce-wp-help { @@ -409,10 +412,10 @@ div.mce-path { .qt-dfw:hover, .qt-dfw:focus { background: #f6f7f7; - border-color: #50575e; color: #1d2327; - box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0, 0, 0, 0.08); - outline: none; + box-shadow: 0 0 0 2px #2271b1; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } .mce-toolbar .mce-btn-group .mce-btn.mce-active, @@ -420,7 +423,6 @@ div.mce-path { .qt-dfw.active { background: #f0f0f1; border-color: #50575e; - box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.3); } .mce-btn.mce-active, @@ -532,12 +534,13 @@ div.mce-path { direction: ltr; background: #fff; border: 1px solid #dcdcde; - box-shadow: inset 0 1px 1px -1px rgba(0, 0, 0, 0.2); } .mce-toolbar .mce-btn-group .mce-btn.mce-listbox:hover, .mce-toolbar .mce-btn-group .mce-btn.mce-listbox:focus { - border-color: #c3c4c7; + box-shadow: 0 0 0 2px #2271b1; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } .mce-panel .mce-btn i.mce-caret { @@ -635,9 +638,9 @@ div.mce-menubar { .mce-menubar .mce-menubtn:focus { color: #043959; - box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); + box-shadow: 0 0 0 2px #2271b1; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } div.mce-menu .mce-menu-item-sep, @@ -1131,10 +1134,9 @@ i.mce-i-wp_code:before { } .wp-switch-editor:focus { - box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); - outline: none; + box-shadow: 0 0 0 2px #2271b1; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; color: #1d2327; } @@ -1445,10 +1447,7 @@ i.mce-i-wp_code:before { } #wp-link-close:focus { - outline: none; - box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); + box-shadow: 0 0 0 2px #2271b1; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; outline-offset: -2px; diff --git a/src/wp-includes/css/jquery-ui-dialog.css b/src/wp-includes/css/jquery-ui-dialog.css index e457b38ddd..528d368251 100644 --- a/src/wp-includes/css/jquery-ui-dialog.css +++ b/src/wp-includes/css/jquery-ui-dialog.css @@ -312,9 +312,7 @@ } .ui-button.ui-dialog-titlebar-close:focus { - box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); + box-shadow: 0 0 0 2px #2271b1; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; outline-offset: -2px; diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css index 95c0dc5a31..c681f6df78 100644 --- a/src/wp-includes/css/media-views.css +++ b/src/wp-includes/css/media-views.css @@ -45,12 +45,10 @@ } .media-frame a:focus { - box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); + box-shadow: 0 0 0 2px #2271b1; color: #043959; /* Only visible in Windows High Contrast mode */ - outline: 1px solid transparent; + outline: 2px solid transparent; } .media-frame a.button { @@ -649,12 +647,10 @@ } .media-menu .media-menu-item:focus { - box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); + box-shadow: 0 0 0 2px #2271b1; color: #043959; /* Only visible in Windows High Contrast mode */ - outline: 1px solid transparent; + outline: 2px solid transparent; } .media-menu .separator { @@ -704,12 +700,10 @@ } .media-router .media-menu-item:focus { - box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); + box-shadow: 0 0 0 2px #2271b1; color: #043959; /* Only visible in Windows High Contrast mode */ - outline: 1px solid transparent; + outline: 2px solid transparent; } .media-router .active, @@ -2017,8 +2011,8 @@ .wp-core-ui.media-modal .image-editor .imgedit-help-toggle:focus { color: #2271b1; - border-color: #4f94d4; - box-shadow: 0 0 3px rgba(34, 113, 177, 0.8); + border-color: #2271b1; + box-shadow: 0 0 0 1px #2271b1; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } @@ -2134,8 +2128,8 @@ } .mejs-container:focus { - outline: 1px solid #4f94d4; - box-shadow: 0 0 2px 1px rgba(79, 148, 212, 0.8); + outline: 1px solid #2271b1; + box-shadow: 0 0 0 2px #2271b1; } .image-details .media-modal { diff --git a/src/wp-includes/css/wp-embed-template.css b/src/wp-includes/css/wp-embed-template.css index c1f1cc5c84..6b1ca43f0b 100644 --- a/src/wp-includes/css/wp-embed-template.css +++ b/src/wp-includes/css/wp-embed-template.css @@ -216,7 +216,9 @@ p.wp-embed-heading { .wp-embed-share-dialog-open:focus .dashicons, .wp-embed-share-dialog-close:focus .dashicons { - box-shadow: 0 0 0 1px #4f94d4, 0 0 2px 1px rgba(79, 148, 212, 0.8); + box-shadow: 0 0 0 2px #2271b1; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; border-radius: 100%; } diff --git a/src/wp-includes/functions.php b/src/wp-includes/functions.php index 368315b482..461918bd53 100644 --- a/src/wp-includes/functions.php +++ b/src/wp-includes/functions.php @@ -3905,21 +3905,16 @@ function _default_wp_die_handler( $message, $title = '', $args = array() ) { font-size: 14px ; } a { - color: #0073aa; + color: #2271b1; } a:hover, a:active { - color: #006799; + color: #135e96; } a:focus { - color: #124964; - -webkit-box-shadow: - 0 0 0 1px #5b9dd9, - 0 0 2px 1px rgba(30, 140, 190, 0.8); - box-shadow: - 0 0 0 1px #5b9dd9, - 0 0 2px 1px rgba(30, 140, 190, 0.8); - outline: none; + color: #043959; + box-shadow: 0 0 0 2px #2271b1; + outline: 2px solid transparent; } .button { background: #f3f5f6;