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 */
9 --rule-highlight-background-color: #402000;
10 --rule-filter-icon: url(images/magnifying-glass.png);
13 /* Rule View Tabpanel */
15 .theme-firebug .ruleview {
16 /* font-family: monospace;
20 #sidebar-panel-ruleview {
23 flex-direction: column;
25 /* Bug 1243598 - Reduce the container height by the tab height to make room
26 for the tabs above. */
27 height: calc(100% - 24px);
31 /* Rule View Toolbar */
33 #ruleview-toolbar-container {
35 flex-direction: column;
44 #ruleview-toolbar > .devtools-searchbox:first-child {
45 padding-inline-start: 0px;
48 #ruleview-command-toolbar {
56 transition: height 150ms ease;
59 #pseudo-class-panel[hidden] {
63 #pseudo-class-panel > label {
64 -moz-user-select: none;
70 /* Rule View Container */
73 -moz-user-select: text;
78 #ruleview-container.non-interactive {
81 transition: visibility 0.25s;
88 .ruleview-property:not(:hover) > .ruleview-enableproperty {
92 .ruleview-expandable-container[hidden] {
96 .ruleview-expandable-container {
100 .ruleview-namecontainer {
104 .ruleview-propertyvaluecontainer {
109 .ruleview-propertyvaluecontainer a {
113 .ruleview-computedlist,
114 .ruleview-overridden-rule-filter[hidden],
115 .ruleview-warning[hidden] {
119 .ruleview-computedlist[user-open],
120 .ruleview-computedlist[filter-open] {
124 .ruleview-rule-source {
127 -moz-user-select: none;
131 .ruleview-rule-source > label {
136 .ruleview-rule-source[unselectable],
137 .ruleview-rule-source[unselectable] > label {
141 .theme-firebug .ruleview-rule-source label {
142 font-family: var(--proportional-font-family);
147 .ruleview-rule-source:not([unselectable]):hover {
148 text-decoration: underline;
152 border-top-width: 1px;
153 border-bottom-width: 1px;
154 border-top-style: solid;
155 border-bottom-style: solid;
157 -moz-user-select: none;
158 word-wrap: break-word;
159 vertical-align: middle;
165 .theme-firebug .theme-gutter.ruleview-header {
166 font-family: var(--proportional-font-family);
171 padding: 3px 4px 2px 4px;
172 line-height: inherit;
174 background: var(--theme-header-background);
177 :root[platform="win"] .ruleview-header,
178 :root[platform="linux"] .ruleview-header {
182 .ruleview-header.ruleview-expandable-header {
186 .ruleview-rule-pseudo-element {
188 border-left: solid 10px;
197 * Display rules that don't match the current selected element and uneditable
198 * user agent styles differently
200 .ruleview-rule[unmatched=true],
201 .ruleview-rule[uneditable=true] {
202 background: var(--theme-tab-toolbar-background);
205 .ruleview-rule[uneditable=true] :focus {
209 .ruleview-rule[uneditable=true] .theme-link {
210 color: var(--theme-highlight-bluegrey);
213 .ruleview-rule[uneditable=true] .ruleview-enableproperty {
217 .ruleview-rule[uneditable=true] .ruleview-swatch {
221 .ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname,
222 .ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer >
223 .ruleview-propertyvalue {
224 border-bottom-color: transparent;
227 .theme-firebug .ruleview-namecontainer > .ruleview-propertyname,
228 .theme-firebug .ruleview-propertycontainer > .ruleview-propertyvalue {
232 .theme-firebug .ruleview-namecontainer > .ruleview-propertyname {
233 color: var(--rule-property-name);
236 .theme-firebug .ruleview-propertycontainer > .ruleview-propertyvalue {
237 color: var(--rule-property-value);
240 .theme-firebug .ruleview-overridden .ruleview-propertyname,
241 .theme-firebug .ruleview-overridden .ruleview-propertyvalue {
242 text-decoration: line-through;
245 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-namecontainer,
246 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-namecontainer *,
247 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-propertycontainer,
248 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-propertycontainer * {
252 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-computedlist * {
257 /* font: message-box;*/
261 .ruleview-rule + .ruleview-rule {
262 border-top-width: 1px;
263 border-top-style: dotted;
266 .theme-firebug .ruleview-rule + .ruleview-rule {
271 background-image: url(images/alerticon-warning.png);
272 background-size: 13px 12px;
273 margin-inline-start: 5px;
274 display: inline-block;
279 @media (min-resolution: 1.1dppx) {
281 background-image: url(images/alerticon-warning@2x.png);
285 .ruleview-overridden-rule-filter {
286 background-image: var(--rule-filter-icon);
287 background-size: 11px 11px;
288 margin-inline-start: 5px;
289 display: inline-block;
295 padding-inline-end: 5px;
298 .ruleview-ruleclose {
303 .ruleview-propertylist {
309 .ruleview-rule:not(:hover) .ruleview-enableproperty {
314 vertical-align: middle;
315 display: inline-block;
318 .ruleview-newproperty {
319 /* (enable checkbox width: 12px) + (expander width: 15px) */
320 margin-inline-start: 27px;
323 .ruleview-namecontainer,
324 .ruleview-propertyvaluecontainer,
325 .ruleview-propertyname,
326 .ruleview-propertyvalue {
327 text-decoration: inherit;
330 .ruleview-computedlist {
336 margin-inline-start: 35px;
344 vertical-align: middle;
345 /* align the swatch with its value */
347 margin-inline-end: 5px;
348 display: inline-block;
352 .ruleview-colorswatch::before {
354 background-color: #9C9CFF;
355 background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090),
356 linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090);
357 background-size: 12px 12px;
358 background-position: 0 0, 6px 6px;
368 .ruleview-bezierswatch {
369 background: url("chrome://devtools/skin/images/cubic-bezier-swatch.png");
370 background-size: 1em;
373 .ruleview-filterswatch {
374 background: url("chrome://devtools/skin/images/filter-swatch.svg");
375 background-size: 1em;
378 .ruleview-angleswatch {
379 background: url("chrome://devtools/skin/images/angle-swatch.svg");
380 background-size: 1em;
383 @media (min-resolution: 1.1dppx) {
384 .ruleview-bezierswatch {
385 background: url("chrome://devtools/skin/images/cubic-bezier-swatch@2x.png");
386 background-size: 1em;
390 .ruleview-overridden {
391 text-decoration: line-through;
394 .theme-light .ruleview-overridden {
395 text-decoration-color: var(--theme-content-color3);
398 .styleinspector-propertyeditor {
399 border: 1px solid #CCC;
401 margin: -1px -3px -1px -1px;
404 .theme-firebug .styleinspector-propertyeditor {
405 border: 1px solid var(--theme-splitter-color);
406 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
410 border-left: 3px solid transparent;
414 .ruleview-propertycontainer > * {
415 vertical-align: middle;
418 .ruleview-property[dirty] {
419 border-left-color: var(--theme-highlight-green);
422 .ruleview-highlight {
423 background-color: var(--rule-highlight-background-color);
426 .ruleview-namecontainer > .ruleview-propertyname,
427 .ruleview-propertyvaluecontainer > .ruleview-propertyvalue {
428 border-bottom: 1px dashed transparent;
431 .ruleview-namecontainer:hover > .ruleview-propertyname,
432 .ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue {
433 border-bottom-color: hsl(0,0%,50%);
436 .ruleview-selectorcontainer {
437 word-wrap: break-word;
441 .ruleview-selector-separator, .ruleview-selector-unmatched {
445 .ruleview-selector-matched > .ruleview-selector-attribute {
446 /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
449 .ruleview-selector-matched > .ruleview-selector-pseudo-class {
450 /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
453 .ruleview-selector-matched > .ruleview-selector-pseudo-class-lock {
455 color: var(--theme-highlight-orange);
458 .theme-firebug .ruleview-selector > .ruleview-selector-matched,
459 .theme-firebug .ruleview-selector > .ruleview-selector-separator,
460 .theme-firebug .ruleview-selector > .ruleview-selector-unmatched {
464 .ruleview-selectorhighlighter {
465 background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
471 .ruleview-selectorhighlighter:hover {
472 filter: url(images/filters.svg#checked-icon-state);
475 .ruleview-selectorhighlighter:active,
476 .ruleview-selectorhighlighter.highlighted {
477 filter: url(images/filters.svg#checked-icon-state) brightness(0.9);
480 #ruleview-add-rule-button::before {
481 background-image: url("chrome://devtools/skin/images/add.svg");
482 background-size: cover;
485 #pseudo-class-panel-toggle::before {
486 background-image: url("chrome://devtools/skin/images/pseudo-class.svg");
487 background-size: cover;
490 .ruleview-overridden-rule-filter {
493 .ruleview-overridden-rule-filter:hover {
497 .theme-firebug .ruleview-overridden {
498 text-decoration: none;
501 /* Firebug theme disable/enable CSS rule. Firebug theme uses its own
502 icons to indicate when CSS rules can be disabled or enabled.
504 .theme-firebug .ruleview-rule .theme-checkbox {
505 background-repeat: no-repeat;
506 background-size: 12px 12px;
507 background-image: url(chrome://devtools/skin/images/firebug/disable.svg);
508 background-position: 0 0;
511 .theme-firebug .ruleview-rule .theme-checkbox:not([checked]){
512 filter: grayscale(1);
515 .theme-firebug .ruleview-rule .theme-checkbox[checked] {
516 background-position: 0 0;
519 .theme-firebug .ruleview-property:not(:hover) .ruleview-enableproperty {