Bug 1412273 - Adjust CSS shapes highlighter toggle to be visible in dark theme. r=gl
MozReview-Commit-ID: GilM6JKDpMF
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -1,26 +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 {
+:root {
--rule-highlight-background-color: var(--theme-highlight-yellow);
--rule-overridden-item-border-color: var(--theme-content-color3);
--rule-header-background-color: var(--theme-toolbar-background);
+ --rule-shape-toggle-color: var(--grey-90);
}
-.theme-dark {
+:root.theme-dark {
--rule-highlight-background-color: #521C76;
--rule-overridden-item-border-color: var(--theme-content-color1);
--rule-header-background-color: #141416;
+ --rule-shape-toggle-color: var(--grey-10);
}
-.theme-firebug {
+:root.theme-firebug {
--rule-highlight-background-color: var(--theme-highlight-yellow);
--rule-property-name: darkgreen;
--rule-property-value: darkblue;
--rule-overridden-item-border-color: var(--theme-content-color2);
--rule-header-background-color: var(--theme-header-background);
}
/* Rule View Tabpanel */
@@ -467,16 +469,18 @@
.ruleview-grid {
background: url("chrome://devtools/skin/images/grid.svg");
border-radius: 0;
}
.ruleview-shape {
background: url("chrome://devtools/skin/images/tool-shadereditor.svg");
+ -moz-context-properties: fill;
+ fill: var(--rule-shape-toggle-color);
border-radius: 0;
background-size: 1em;
}
.ruleview-shape-point.active {
background-color: var(--rule-highlight-background-color);
}