Bug 1393385 - Update about:preferences category menu to match the spec r?jaws
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -650,16 +650,17 @@ separator.thin:not([orient="vertical"])
.help-button:hover {
fill: currentColor;
}
.help-button:link,
.help-button:visited {
color: var(--in-content-category-text);
text-decoration: none;
+ border-radius: 2px;
}
.face-sad {
list-style-image: url("chrome://browser/skin/preferences/in-content-new/face-sad.svg");
width: 20px;
height: 20px;
margin-inline-end: 8px;
}
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -17,19 +17,24 @@
--in-content-box-background-active: #dadada;
--in-content-box-border-color: #d7d7db;
--in-content-item-hover: rgba(0,149,221,0.25);
--in-content-item-selected: #0a84ff;
--in-content-border-highlight: #0a84ff;
--in-content-border-focus: #0a84ff;
--in-content-border-color: #d7d7db;
--in-content-category-border-focus: 1px dotted #0a84ff;
- --in-content-category-text: #0c0c0d;
+ --in-content-category-text: rgba(12,12,13,0.8);
+ --in-content-category-text-active: #0c0c0d;
--in-content-category-text-selected: #0a84ff;
- --in-content-category-hover: rgba(12,12,13,0.1);
+ --in-content-category-text-selected-active: #0060df;
+ --in-content-category-background-hover: rgba(12,12,13,0.1);
+ --in-content-category-background-active: rgba(12,12,13,0.15);
+ --in-content-category-background-selected-hover: rgba(12,12,13,0.15);
+ --in-content-category-background-selected-active: rgba(12,12,13,0.2);
--in-content-tab-color: #424f5a;
--in-content-link-color: #0a84ff;
--in-content-link-color-hover: #0060df;
--in-content-link-color-active: #ff9500;
--in-content-link-color-visited: #551a8b;
--in-content-primary-button-background: #0a84ff;
--in-content-primary-button-background-hover: #0060df;
--in-content-primary-button-background-active: #003EAA;
@@ -650,25 +655,41 @@ xul|*.radio-label-box {
color: var(--in-content-category-text);
margin-inline-start: 34px;
padding-inline-end: 10px;
padding-inline-start: 10px;
transition: background-color 150ms;
}
*|*.category:hover {
- background-color: var(--in-content-category-hover);
+ background-color: var(--in-content-category-background-hover);
+ border-radius: 2px;
+}
+
+*|*.category:hover:active {
+ background-color: var(--in-content-category-background-active);
}
*|*.category[selected],
*|*.category.selected {
color: var(--in-content-category-text-selected);
background: none;
}
+*|*.category[selected]:hover,
+*|*.category.selected:hover {
+ background-color: var(--in-content-category-background-selected-hover);
+}
+
+*|*.category[selected]:hover:active,
+*|*.category.selected:hover:active {
+ color: var(--in-content-category-text-selected-active);
+ background-color: var(--in-content-category-background-selected-active);
+}
+
*|*#categories[keyboard-navigation="true"]:-moz-focusring > *|*.category[current] {
border: var(--in-content-category-border-focus);
border-inline-start: none;
}
*|*.category-name {
line-height: 22px;
font-size: 1.45rem;