diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index e062a471d7150..cbf5eaad823ea 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -805,14 +805,14 @@ img.emoji { #bulk-titles .ntdelbutton:before, .notice-dismiss:before { background: none; - color: #787c82; + color: #1e1e1e; content: "\f153"; content: "\f153" / ''; display: block; - font: normal 16px/20px dashicons; - height: 20px; + font: normal 20px/24px dashicons; + height: 24px; text-align: center; - width: 20px; + width: 24px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @@ -1420,11 +1420,11 @@ th.action-links { div.updated, div.error { background: #fff; - border: 1px solid #c3c4c7; - border-left-width: 4px; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + border: none; + border-left: 4px solid #c3c4c7; + box-shadow: none; margin: 5px 15px 2px; - padding: 1px 12px; + padding: 8px 12px; } div[class="update-message"] { /* back-compat for pre-4.6 */ @@ -1437,15 +1437,31 @@ div.updated p, div.error p, .form-table td .notice p { margin: 0.5em 0; - padding: 2px; + padding: 0; + font-size: 13px; + line-height: 20px; + color: #1e1e1e; } -.error a { +.notice a, +.error a, +.updated a { + color: var(--wp-admin-theme-color); text-decoration: underline; } -.updated a { - padding-bottom: 2px; +.notice a:hover, +.error a:hover, +.updated a:hover { + color: var(--wp-admin-theme-color-darker-10); +} + +.notice a:focus, +.error a:focus, +.updated a:focus { + box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + outline: 2px solid transparent; + border-radius: 2px; } .notice-alt { @@ -1463,66 +1479,82 @@ div.error p, } .wp-core-ui .notice.is-dismissible { - padding-right: 38px; + padding-right: 48px; position: relative; } .notice-dismiss { position: absolute; - top: 0; - right: 1px; + top: 8px; + right: 12px; border: none; margin: 0; - padding: 9px; + padding: 0; background: none; - color: #787c82; + color: #1e1e1e; cursor: pointer; + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 2px; } .notice-dismiss:hover:before, -.notice-dismiss:active:before, -.notice-dismiss:focus:before { - color: #d63638; +.notice-dismiss:active:before { + color: #1e1e1e; + opacity: 0.7; } .notice-dismiss:focus { - box-shadow: 0 0 0 2px #2271b1; + box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } +.notice-dismiss:focus:before { + color: #1e1e1e; +} + .notice-success, div.updated { - border-left-color: #00a32a; + border-left-color: #4ab866; + background-color: #eff9f1; } -.notice-success.notice-alt { - background-color: #edfaef; +.notice-success.notice-alt, +div.updated.notice-alt { + background-color: #eff9f1; } .notice-warning { - border-left-color: #dba617; + border-left-color: #f0b849; + background-color: #fef8ee; } .notice-warning.notice-alt { - background-color: #fcf9e8; + background-color: #fef8ee; } .notice-error, div.error { - border-left-color: #d63638; + border-left-color: #cc1818; + background-color: #fcf0f0; } -.notice-error.notice-alt { - background-color: #fcf0f1; +.notice-error.notice-alt, +div.error.notice-alt { + background-color: #fcf0f0; } .notice-info { - border-left-color: #72aee6; + border-left-color: #3858e9; + background-color: transparent; } .notice-info.notice-alt { - background-color: #f0f6fc; + background-color: transparent; } #plugin-information-footer .update-now:not(.button-disabled):before {