* 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;
- cursor: pointer;
- text-align: right;
+ text-align: end;
float: right;
-moz-user-select: none;
+ margin-bottom: 2px;
+}
+
+.ruleview-rule-source > label {
+ cursor: pointer;
+ margin: 0;
+}
+
+.ruleview-rule-source[unselectable],
+.ruleview-rule-source[unselectable] > label {
+ cursor: default;
+}
+
+.ruleview-rule-source:not([unselectable]):hover {
+ text-decoration: underline;
}
.ruleview-header {
word-wrap: break-word;
}
-.ruleview-rule-source:hover {
- text-decoration: underline;
-}
-
.ruleview-rule,
#noResults {
padding: 2px 4px;
}
+/**
+ * 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);
+}
+
+.ruleview-rule[uneditable=true] :focus {
+ outline: none;
+}
+
+.ruleview-rule[uneditable=true] .theme-link {
+ color: var(--theme-text-blue);
+}
+
+.ruleview-rule[uneditable=true] .ruleview-enableproperty {
+ visibility: hidden;
+}
+
+.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-propertyvaluecontainer >
+.ruleview-propertyvalue {
+ border-bottom-color: transparent;
+}
+
#noResults {
font: message-box;
color: #8050B0;
}
.ruleview-warning {
- background: url("chrome://browser/skin/devtools/alerticon-warning.png");
+ background: url("alerticon-warning.png");
-moz-margin-start: 5px;
display: inline-block;
vertical-align: top;
height: 12px;
}
+@media (min-resolution: 1.25dppx) {
+ .ruleview-warning {
+ background-image: url("alerticon-warning@2x.png");
+ }
+}
+
.ruleview-ruleopen {
-moz-padding-end: 5px;
}
}
.ruleview-namecontainer,
-.ruleview-propertycontainer,
+.ruleview-propertyvaluecontainer,
.ruleview-propertyname,
.ruleview-propertyvalue {
text-decoration: inherit;
-moz-margin-start: 35px;
}
-.ruleview-colorswatch {
+.ruleview-swatch {
+ cursor: pointer;
border-radius: 50%;
- width: 1em;
- height: 1em;
- vertical-align: text-top;
+ width: 0.9em;
+ height: 0.9em;
+ vertical-align: middle;
-moz-margin-end: 5px;
+ display: inline-block;
+ position: relative;
+}
+
+.ruleview-colorswatch::before {
+ content: '';
+ background-color: #9C9CFF;
+ background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090),
+ linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090);
+ background-size: 12px 12px;
+ background-position: 0 0, 6px 6px;
+ position: absolute;
+ border-radius: 50%;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: -1;
+}
+
+.ruleview-bezierswatch {
+ background: url("chrome://browser/skin/devtools/cubic-bezier-swatch.png");
+ background-size: 1em;
+}
+
+@media (min-resolution: 1.25dppx) {
+ .ruleview-bezierswatch {
+ background: url("chrome://browser/skin/devtools/cubic-bezier-swatch@2x.png");
+ background-size: 1em;
+ }
}
.ruleview-overridden {
}
.ruleview-property {
- border-left: 2px solid transparent;
+ border-left: 3px solid transparent;
clear: right;
}
-.ruleview-property > * {
+.ruleview-propertycontainer > * {
vertical-align: middle;
}
.ruleview-property[dirty] {
- border-left-color: #9C9CFF;
+ border-left-color: var(--theme-highlight-green);
+}
+
+.ruleview-highlight {
+ background-color: var(--rule-highlight-background-color);
}
.ruleview-namecontainer > .ruleview-propertyname,
-.ruleview-propertycontainer > .ruleview-propertyvalue {
+.ruleview-propertyvaluecontainer > .ruleview-propertyvalue {
border-bottom: 1px dashed transparent;
}
.ruleview-namecontainer:hover > .ruleview-propertyname,
-.ruleview-propertycontainer:hover > .ruleview-propertyvalue {
+.ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue {
border-bottom-color: #008484;
}
.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;
+}
+
+#pseudo-class-panel:not([hidden]) {
+ border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+#ruleview-add-rule-button::before {
+ background-image: url("chrome://browser/skin/devtools/add.svg#add");
+ background-size: cover;
+}
+#ruleview-add-rule-button:hover::before {
+ background-image: url("chrome://browser/skin/devtools/add.svg#add-checked");
+}
+
+#pseudo-class-panel-toggle::before {
+ background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class");
+ background-size: cover;
+}
+#pseudo-class-panel-toggle:hover::before,
+#pseudo-class-panel-toggle[checked]::before {
+ 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 {
+ opacity: 0.8;
+}
+
+#ruleview-add-rule-button:not([disabled]):hover,
+#pseudo-class-panel-toggle:hover,
+#pseudo-class-panel-toggle[checked] {
+ 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;
+}
+*/