[web-php] master: Improve magenta contrast to fix accessibility issues (#749)
| From: | Javier Eguiluz via GitHub | Date: | Tue, 21 Feb 2023 15:15:43 +0000 |
| Subject: | [web-php] master: Improve magenta contrast to fix accessibility issues (#749) | ||
| Groups: | php.webmaster | ||
| Request: | Send a blank email to php-webmaster+get-30786@lists.php.net to get a copy of this message | ||
Author: Javier Eguiluz (javiereguiluz)
Committer: GitHub (web-flow)
Pusher: Girgias
Date: 2023-02-21T15:02:35Z
Commit: https://github.com/php/web-php/commit/44927b5cdc1af80ee60de478b3881ace6e895c7c
Raw diff: https://github.com/php/web-php/commit/44927b5cdc1af80ee60de478b3881ace6e895c7c.diff
Improve magenta contrast to fix accessibility issues (#749)
Changed paths:
M styles/theme-base.css
M styles/theme-medium.css
Diff:
diff --git a/styles/theme-base.css b/styles/theme-base.css
index fcd84a53a..458b2d412 100644
--- a/styles/theme-base.css
+++ b/styles/theme-base.css
@@ -16,6 +16,7 @@
--light-blue-color: #E2E4EF;
--dark-magenta-color: #793862;
--medium-magenta-color: #AE508D;
+ --light-magenta-color: #CF82B1;
}
.clearfix {
@@ -660,6 +661,10 @@ body > footer a {
display:inline-block;
border-bottom:0;
}
+body > footer a:hover,
+body > footer a:focus {
+ color:var(--light-magenta-color);
+}
/* {{{ ElePHPants photo stream */
@@ -1526,6 +1531,10 @@ div.soft-deprecation-notice blockquote.sidebar {
#breadcrumbs a:visited {
border-width:0;
}
+#breadcrumbs a:hover,
+#breadcrumbs a:focus {
+ color:var(--light-magenta-color);
+}
#breadcrumbs .next,
#breadcrumbs .prev {
diff --git a/styles/theme-medium.css b/styles/theme-medium.css
index 0ba307f33..54eda1afa 100644
--- a/styles/theme-medium.css
+++ b/styles/theme-medium.css
@@ -423,8 +423,8 @@ aside.tips .panel > a:hover:after {
}
aside.tips a:hover,
aside.tips a:focus {
- color:var(--medium-magenta-color);
- border-color:var(--medium-magenta-color);
+ color:var(--light-magenta-color);
+ border-color:var(--light-magenta-color);
}
.soft-deprecation-notice {
@@ -453,8 +453,12 @@ aside.tips a:focus {
border-top-color:#666;
}
.layout-menu ul.child-menu-list li.current a {
- color:var(--medium-magenta-color);
- border-bottom-color:var(--medium-magenta-color);
+ color:var(--light-magenta-color);
+ border-bottom-color:var(--light-magenta-color);
+}
+.layout-menu ul.parent-menu-list li a:hover,
+.layout-menu ul.child-menu-list li a:hover {
+ color:var(--light-magenta-color);
}
.layout-menu ul.child-menu-list a {
border-color: #666;