Bug 1474193 - Part 2 - Increase specificity of richlistitem rules for in-content categories. r=mossop
MozReview-Commit-ID: 9BNoMsHkc4V
--- a/toolkit/themes/shared/extensions/extensions.inc.css
+++ b/toolkit/themes/shared/extensions/extensions.inc.css
@@ -154,26 +154,26 @@ button.warning {
/*** category selector ***/
#categories {
/* With photon this should be 70px but there are some hidden forward/back
buttons that are 39px tall above this. */
padding-top: 31px;
}
-.category[disabled] {
+#categories > .category[disabled] {
overflow: hidden;
height: 0;
min-height: 0;
opacity: 0;
transition-property: min-height, opacity;
transition-duration: 1s, 0.8s;
}
-.category:not([disabled]) {
+#categories > .category:not([disabled]) {
transition-property: min-height, opacity;
transition-duration: 1s, 0.8s;
}
/* Maximize the size of the viewport when the window is small */
@media (max-width: 800px) {
.category-name {
display: none;
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -639,48 +639,48 @@ xul|*.radio-label-box {
-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 {
+*|*#categories > *|*.category {
min-height: 48px;
-moz-appearance: none;
color: var(--in-content-category-text);
margin-inline-start: 34px;
padding-inline-end: 10px;
padding-inline-start: 10px;
transition: background-color 150ms;
}
-*|*.category:hover {
+*|*#categories > *|*.category:hover {
background-color: var(--in-content-category-background-hover);
border-radius: 2px;
}
-*|*.category:hover:active {
+*|*#categories > *|*.category:hover:active {
background-color: var(--in-content-category-background-active);
}
-*|*.category[selected],
-*|*.category.selected {
+*|*#categories > *|*.category[selected],
+*|*#categories > *|*.category.selected {
color: var(--in-content-category-text-selected);
background: none;
}
-*|*.category[selected]:hover,
-*|*.category.selected:hover {
+*|*#categories > *|*.category[selected]:hover,
+*|*#categories > *|*.category.selected:hover {
background-color: var(--in-content-category-background-selected-hover);
}
-*|*.category[selected]:hover:active,
-*|*.category.selected:hover:active {
+*|*#categories > *|*.category[selected]:hover:active,
+*|*#categories > *|*.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] {
outline: var(--in-content-category-outline-focus);
}
@@ -709,17 +709,17 @@ xul|*.radio-label-box {
#categories {
width: 118px;
}
.category-icon + .category-name {
display: none;
}
- .category {
+ #categories > .category {
padding-inline-start: 13px; /* make category icons align center */
margin-inline-end: 33px;
}
.main-content {
padding-left: 0;
padding-right: 0;
}