.theme-light {
--rule-highlight-background-color: #402800;
+ --rule-filter-icon: url("magnifying-glass.png");
}
.ruleview {
padding: 2px 4px;
}
-/* User agent styles are not editable, display them differently */
+/**
+ * Display rules that don't match the current selected element and uneditable
+ * user agent styles differently
+ */
+.ruleview-rule[unmatched=true],
.ruleview-rule[uneditable=true] {
background: var(--theme-toolbar-background);
}
background: url("alerticon-warning.png");
-moz-margin-start: 5px;
display: inline-block;
- vertical-align: top;
width: 13px;
height: 12px;
}
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
.ruleview-warning {
background-image: url("alerticon-warning@2x.png");
}
}
+.ruleview-overridden-rule-filter {
+ background-image: var(--rule-filter-icon);
+ background-size: 11px 11px;
+ -moz-margin-start: 5px;
+ display: inline-block;
+ width: 11px;
+ height: 11px;
+}
+
.ruleview-ruleopen {
-moz-padding-end: 5px;
}
background-size: 1em;
}
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
.ruleview-bezierswatch {
background: url("chrome://browser/skin/devtools/cubic-bezier-swatch@2x.png");
background-size: 1em;
border-bottom-color: #008484;
}
-.ruleview-selector {
+.ruleview-selectorcontainer {
word-wrap: break-word;
+ cursor: text;
}
.ruleview-selector-separator, .ruleview-selector-unmatched {
color: #8050B0;
}
+.ruleview-selector-matched > .ruleview-selector-attribute {
+ /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
+}
+
+.ruleview-selector-matched > .ruleview-selector-pseudo-class {
+ /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
+}
+
+.ruleview-selector-matched > .ruleview-selector-pseudo-class-lock {
+ font-weight: bold;
+ color: var(--theme-highlight-orange);
+}
+
.ruleview-selectorhighlighter {
background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0;
padding-left: 16px;
background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class-checked");
filter: none !important;
}
+
+/**
+ * These buttons are using opacity instead of background color to indicate
+ * the state
+ */
+/*
+#ruleview-add-rule-button,
+#pseudo-class-panel-toggle,
+.ruleview-overridden-rule-filter {
+ opacity: 0.8;
+}
+
+#ruleview-add-rule-button:not([disabled]):hover,
+#pseudo-class-panel-toggle:hover,
+#pseudo-class-panel-toggle[checked],
+.ruleview-overridden-rule-filter:hover {
+ opacity: 1;
+}
+
+#ruleview-add-rule-button,
+#pseudo-class-panel-toggle,
+#pseudo-class-panel-toggle:hover,
+#pseudo-class-panel-toggle[checked]::before {
+ background-color: transparent !important;
+}
+*/