Bug 1388997 - Add hover effects for menu list to match Photon visual spec.
MozReview-Commit-ID: 5EmyvOM09fV
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -626,35 +626,35 @@ separator.thin:not([orient="vertical"])
.help-button {
position: fixed;
left: 0;
bottom: 36px;
background-image: url("chrome://global/skin/icons/help.svg");
-moz-context-properties: fill, fill-opacity;
fill: currentColor;
- fill-opacity: 0.8;
font-size: 13px;
- line-height: 16px;
- height: 16px;
- background-position: 8px;
+ line-height: 36px;
+ height: 36px;
+ width: 168px;
+ background-position: left 10px top 10px;
+ background-size: 16px;
padding-inline-start: 38px;
- margin-inline-start: 44px;
+ margin-inline-start: 34px;
white-space: nowrap;
}
.help-button:-moz-locale-dir(rtl) {
- background-position: right 8px top 0;
+ background-position: right 10px top 10px;
left: auto;
right: 0;
}
.help-button:hover {
fill: currentColor;
- fill-opacity: 0.9;
}
.help-button:link,
.help-button:visited {
color: var(--in-content-category-text);
text-decoration: none;
}
--- a/toolkit/themes/shared/extensions/extensions.inc.css
+++ b/toolkit/themes/shared/extensions/extensions.inc.css
@@ -147,20 +147,16 @@ button.warning {
/*** category selector ***/
#categories {
padding-top: 0;
}
-.category[selected="true"]:hover {
- color: #0060df;
-}
-
.category[disabled] {
overflow: hidden;
height: 0;
min-height: 0;
opacity: 0;
transition-property: min-height, opacity;
transition-duration: 1s, 0.8s;
}
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -20,16 +20,17 @@
--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-selected: #0a84ff;
+ --in-content-category-hover: rgba(12,12,13,0.1);
--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;
@@ -334,16 +335,17 @@ html|*.help-button {
background-position: center center;
background-size: contain;
}
html|*.help-button:hover {
fill: white;
stroke: #808080;
stroke-opacity: 1;
+ background-color: var(--in-content-category-hover);
}
html|*.help-button:hover:active {
stroke: #666;
}
xul|*.spinbuttons-button {
min-height: initial;
@@ -635,28 +637,33 @@ xul|*.radio-label-box {
/* Category List */
*|*#categories {
-moz-appearance: none;
background-color: initial; /* override the background-color set on all richlistboxes in common.inc.css */
padding-top: 70px;
margin: 0;
border-width: 0;
+ width: 240px;
}
*|*.category {
- width: 240px;
min-height: 48px;
-moz-appearance: none;
color: var(--in-content-category-text);
- padding-inline-start: 44px;
+ 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);
+}
+
*|*.category[selected],
*|*.category.selected {
color: var(--in-content-category-text-selected);
background: none;
}
*|*#categories[keyboard-navigation="true"]:-moz-focusring > *|*.category[current] {
border: var(--in-content-category-border-focus);
@@ -689,24 +696,26 @@ xul|*.radio-label-box {
width: 118px;
}
.category-icon ~ .category-name {
display: none;
}
.category {
- padding-inline-start: 47px; /* make category icons align center */
+ padding-inline-start: 13px; /* make category icons align center */
+ margin-inline-end: 40px;
}
.help-button {
font-size: 0 !important;
- margin-inline-start: 51px !important; /* make the question mark icon align center */
- background-position: 0px !important;
+ margin-inline-start: 41px !important; /* make the question mark icon align center */
+ background-position: 10px !important;
padding-inline-start: 0px !important;
+ width: 36px !important;
}
.main-content {
padding-left: 0;
padding-right: 0;
}
.pane-container {