.ruleview-rule-source {
-moz-padding-start: 5px;
- cursor: pointer;
- text-align: right;
+ text-align: end;
float: right;
-moz-user-select: none;
}
+.ruleview-rule-source,
+.ruleview-rule-source > label {
+ cursor: pointer;
+}
+
+.ruleview-rule-source[unselectable],
+.ruleview-rule-source[unselectable] > label {
+ cursor: default;
+}
+
+.ruleview-rule-source:not([unselectable]):hover {
+ text-decoration: underline;
+}
+
.ruleview-header {
border-top-width: 1px;
border-bottom-width: 1px;
word-wrap: break-word;
}
-.ruleview-rule-source:hover {
- text-decoration: underline;
-}
-
.ruleview-rule,
#noResults {
padding: 2px 4px;
}
+/* User agent styles are not editable, display them differently */
+.theme-dark .ruleview-rule[uneditable=true] {
+ background: #A09090; /* Tab Toolbar */
+}
+
+.ruleview-rule[uneditable=true] :focus {
+ outline: none;
+}
+
+.ruleview-rule[uneditable=true] .theme-link {
+ color: #336699; /* Blue - Grey */
+}
+
+.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-propertycontainer > .ruleview-propertyvalue {
+ border-bottom-color: transparent;
+}
+
#noResults {
font: message-box;
color: #8050B0;
-moz-margin-start: 35px;
}
-.ruleview-colorswatch {
+.ruleview-colorswatch,
+.ruleview-bezierswatch {
+ cursor: pointer;
border-radius: 50%;
width: 1em;
height: 1em;
vertical-align: text-top;
-moz-margin-end: 5px;
display: inline-block;
+ position: relative;
}
.ruleview-colorswatch::before {
background-position: 0 0, 6px 6px;
position: absolute;
border-radius: 50%;
- width: 1em;
- height: 1em;
+ 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: 2dppx) {
+ .ruleview-bezierswatch {
+ background: url("chrome://browser/skin/devtools/cubic-bezier-swatch@2x.png");
+ background-size: 1em;
+ }
+}
+
.ruleview-overridden {
text-decoration: line-through;
}