1 /* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
5 /* CSS Variables specific to this panel that aren't defined by the themes */
8 --rule-highlight-background-color: #402800;
15 .ruleview-rule-source {
16 -moz-padding-start: 5px;
19 -moz-user-select: none;
22 .ruleview-rule-source,
23 .ruleview-rule-source > label {
27 .ruleview-rule-source[unselectable],
28 .ruleview-rule-source[unselectable] > label {
32 .ruleview-rule-source:not([unselectable]):hover {
33 text-decoration: underline;
37 border-top-width: 1px;
38 border-bottom-width: 1px;
39 border-top-style: solid;
40 border-bottom-style: solid;
43 -moz-user-select: none;
44 word-wrap: break-word;
52 /* User agent styles are not editable, display them differently */
53 .ruleview-rule[uneditable=true] {
54 background: var(--theme-toolbar-background);
57 .ruleview-rule[uneditable=true] :focus {
61 .ruleview-rule[uneditable=true] .theme-link {
62 color: var(--theme-text-blue);
65 .ruleview-rule[uneditable=true] .ruleview-enableproperty {
69 .ruleview-rule[uneditable=true] .ruleview-colorswatch,
70 .ruleview-rule[uneditable=true] .ruleview-bezierswatch {
74 .ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname,
75 .ruleview-rule[uneditable=true] .ruleview-propertycontainer > .ruleview-propertyvalue {
76 border-bottom-color: transparent;
84 .ruleview-rule + .ruleview-rule {
85 border-top-width: 1px;
86 border-top-style: dotted;
90 background: url("alerticon-warning.png");
91 -moz-margin-start: 5px;
92 display: inline-block;
98 @media (min-resolution: 2dppx) {
100 background-image: url("alerticon-warning@2x.png");
105 -moz-padding-end: 5px;
108 .ruleview-ruleclose {
113 .ruleview-propertylist {
119 .ruleview-rule:not(:hover) .ruleview-enableproperty {
124 display: inline-block;
127 .ruleview-newproperty {
128 /* (enable checkbox width: 12px) + (expander width: 15px) */
129 -moz-margin-start: 27px;
132 .ruleview-namecontainer,
133 .ruleview-propertycontainer,
134 .ruleview-propertyname,
135 .ruleview-propertyvalue {
136 text-decoration: inherit;
139 .ruleview-computedlist {
145 -moz-margin-start: 35px;
148 .ruleview-colorswatch,
149 .ruleview-bezierswatch {
154 vertical-align: text-top;
155 -moz-margin-end: 5px;
156 display: inline-block;
160 .ruleview-colorswatch::before {
162 background-color: #9C9CFF;
163 background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090),
164 linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090);
165 background-size: 12px 12px;
166 background-position: 0 0, 6px 6px;
176 .ruleview-bezierswatch {
177 background: url("chrome://browser/skin/devtools/cubic-bezier-swatch.png");
178 background-size: 1em;
181 @media (min-resolution: 2dppx) {
182 .ruleview-bezierswatch {
183 background: url("chrome://browser/skin/devtools/cubic-bezier-swatch@2x.png");
184 background-size: 1em;
188 .ruleview-overridden {
189 text-decoration: line-through;
192 .styleinspector-propertyeditor {
193 border: 1px solid #A09090;
198 border-left: 3px solid transparent;
202 .ruleview-property > * {
203 vertical-align: middle;
206 .ruleview-property[dirty] {
207 border-left-color: var(--theme-highlight-green);
210 .ruleview-highlight {
211 background-color: var(--rule-highlight-background-color);
214 .ruleview-namecontainer > .ruleview-propertyname,
215 .ruleview-propertycontainer > .ruleview-propertyvalue {
216 border-bottom: 1px dashed transparent;
219 .ruleview-namecontainer:hover > .ruleview-propertyname,
220 .ruleview-propertycontainer:hover > .ruleview-propertyvalue {
221 border-bottom-color: #008484;
225 word-wrap: break-word;
228 .ruleview-selector-separator, .ruleview-selector-unmatched {
232 .ruleview-selectorhighlighter {
233 background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0;
239 .ruleview-selectorhighlighter:hover {
240 background-position: -32px 0;
243 .ruleview-selectorhighlighter:active,
244 .ruleview-selectorhighlighter.highlighted {
245 background-position: -16px 0;