Bug 1342002 - Border color of overriden items in Rule view looks lighter than font color in dark theme. r?gl draft
authorRahul Chaudhary <rahulch95@gmail.com>
Tue, 07 Mar 2017 16:43:32 -0500
changeset 497187 f8f89abd1d118e4f3522127a287589c22527b525
parent 494684 3d341b9ba5353b6b8ab45b6ca03dcb1b2d789faa
child 548818 b835754bd9538dd72300862a2c2cf283d7b8ba07
push id48820
push userbmo:rahulch95@gmail.com
push dateSun, 12 Mar 2017 02:24:03 +0000
reviewersgl
bugs1342002
milestone55.0a1
Bug 1342002 - Border color of overriden items in Rule view looks lighter than font color in dark theme. r?gl MozReview-Commit-ID: CazYLmKktx
devtools/client/themes/rules.css
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -1,25 +1,28 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* CSS Variables specific to this panel that aren't defined by the themes */
 .theme-light {
   --rule-highlight-background-color: #ffee99;
+  --rule-overridden-item-border-color: var(--theme-content-color3);
 }
 
 .theme-dark {
   --rule-highlight-background-color: #594724;
+  --rule-overridden-item-border-color: var(--theme-content-color1);
 }
 
 .theme-firebug {
   --rule-highlight-background-color: #ffee99;
   --rule-property-name: darkgreen;
   --rule-property-value: darkblue;
+  --rule-overridden-item-border-color: var(--theme-content-color2);
 }
 
 /* Rule View Tabpanel */
 
 #sidebar-panel-ruleview {
   margin: 0;
   display: flex;
   flex-direction: column;
@@ -375,29 +378,29 @@
 }
 
 .ruleview-overridden-item::before {
   position: absolute;
   left: -15px;
   top: 0px;
   content: '';
   display: block;
-  border-left: 1px solid var(--theme-highlight-gray);
-  height: 0.7em;
-  border-bottom: 1px solid var(--theme-highlight-gray);
+  border-left: 0.5px solid var(--rule-overridden-item-border-color);
+  height: 0.8em;
+  border-bottom: 0.5px solid var(--rule-overridden-item-border-color);
   width: 10px;
 }
 
 .ruleview-overridden-item::after {
   position: absolute;
   left: -15px;
   bottom: -7px;
   content: '';
   display: block;
-  border-left: 1px solid var(--theme-highlight-gray);
+  border-left: 0.5px solid var(--theme-content-color1);
   height: 100%;
 }
 
 .ruleview-overridden-item:last-child:after {
   display: none;
 }
 
 .ruleview-grid,