Bug 1474193 - Part 2 - Increase specificity of richlistitem rules for in-content categories. r=mossop
authorPaolo Amadini <paolo.mozmail@amadzone.org>
Sun, 08 Jul 2018 22:34:13 +0100
changeset 425521 140937d55bd0babaaaebabd11e171d2682a8ae01
parent 425520 99dd457960a131a4996f6f252848c2ad5dc926f2
child 425522 e711420b85f70b765c7c69c80a478250bc886229
push id34256
push useraciure@mozilla.com
push dateMon, 09 Jul 2018 21:59:26 +0000
treeherdermozilla-central@19edc7c22303 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmossop
bugs1474193
milestone63.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1474193 - Part 2 - Increase specificity of richlistitem rules for in-content categories. r=mossop MozReview-Commit-ID: 9BNoMsHkc4V
toolkit/themes/shared/extensions/extensions.inc.css
toolkit/themes/shared/in-content/common.inc.css
--- 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;
   }