* 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: #402800;
+}
+
.ruleview {
height: 100%;
}
.ruleview-rule-source {
-moz-padding-start: 5px;
- text-align: right;
+ text-align: end;
float: right;
-moz-user-select: none;
}
}
/* User agent styles are not editable, display them differently */
-.theme-dark .ruleview-rule[uneditable=true] {
- background: #A09090; /* Tab Toolbar */
+.ruleview-rule[uneditable=true] {
+ background: var(--theme-toolbar-background);
}
.ruleview-rule[uneditable=true] :focus {
}
.ruleview-rule[uneditable=true] .theme-link {
- color: #336699; /* Blue - Grey */
+ color: var(--theme-text-blue);
}
.ruleview-rule[uneditable=true] .ruleview-enableproperty {
visibility: hidden;
}
-.ruleview-rule[uneditable=true] .ruleview-colorswatch {
+.ruleview-rule[uneditable=true] .ruleview-colorswatch,
+.ruleview-rule[uneditable=true] .ruleview-bezierswatch {
cursor: default;
}
-
.ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname,
.ruleview-rule[uneditable=true] .ruleview-propertycontainer > .ruleview-propertyvalue {
border-bottom-color: transparent;
-moz-margin-start: 35px;
}
-.ruleview-colorswatch {
+.ruleview-colorswatch,
+.ruleview-bezierswatch {
cursor: pointer;
border-radius: 50%;
width: 1em;
z-index: -1;
}
+.ruleview-bezierswatch {
+ background: url("chrome://browser/skin/devtools/cubic-bezier-swatch.png");
+ background-size: 1em;
+}
+
+@media (min-resolution: 2dppx) {
+ .ruleview-bezierswatch {
+ background: url("chrome://browser/skin/devtools/cubic-bezier-swatch@2x.png");
+ background-size: 1em;
+ }
+}
+
.ruleview-overridden {
text-decoration: line-through;
}
}
.ruleview-property[dirty] {
- border-left-color: #9C9CFF; /* Green */
+ border-left-color: var(--theme-highlight-green);
+}
+
+.ruleview-highlight {
+ background-color: var(--rule-highlight-background-color);
}
.ruleview-namecontainer > .ruleview-propertyname,
.ruleview-selector-separator, .ruleview-selector-unmatched {
color: #8050B0;
}
+
+.ruleview-selectorhighlighter {
+ background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0;
+ padding-left: 16px;
+ margin-left: 5px;
+ cursor: pointer;
+}
+
+.ruleview-selectorhighlighter:hover {
+ background-position: -32px 0;
+}
+
+.ruleview-selectorhighlighter:active,
+.ruleview-selectorhighlighter.highlighted {
+ background-position: -16px 0;
+}