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;
12 /* Rule View Tabpanel */
14 .theme-firebug .ruleview {
15 /* font-family: monospace;
19 #sidebar-panel-ruleview {
22 flex-direction: column;
24 /* Bug 1243598 - Reduce the container height by the tab height to make room
25 for the tabs above. */
26 height: calc(100% - 24px);
30 /* Rule View Toolbar */
32 #ruleview-toolbar-container {
34 flex-direction: column;
43 #ruleview-toolbar > .devtools-searchbox:first-child {
44 padding-inline-start: 0px;
47 #ruleview-command-toolbar {
55 transition: height 150ms ease;
58 #pseudo-class-panel[hidden] {
62 #pseudo-class-panel > label {
63 -moz-user-select: none;
69 /* Rule View Container */
72 -moz-user-select: text;
78 /* This extra wrapper only serves as a way to get the content of the view focusable.
79 So that when the user reaches it either via keyboard or mouse, we know that the view
80 is focused and therefore can handle shortcuts.
81 However, for accessibility reasons, tabindex is set to -1 to avoid having to tab
82 through it, and the outline is hidden. */
83 #ruleview-container-focusable {
88 #ruleview-container.non-interactive {
91 transition: visibility 0.25s;
98 .ruleview-property:not(:hover) > .ruleview-enableproperty {
102 .ruleview-expandable-container[hidden] {
106 .ruleview-expandable-container {
110 .ruleview-namecontainer {
114 .ruleview-propertyvaluecontainer {
119 .ruleview-propertyvaluecontainer a {
123 .ruleview-computedlist,
124 .ruleview-overridden-rule-filter[hidden],
125 .ruleview-warning[hidden] {
129 .ruleview-computedlist[user-open],
130 .ruleview-computedlist[filter-open] {
134 .ruleview-rule-source {
137 -moz-user-select: none;
141 .ruleview-rule-source > label {
146 .ruleview-rule-source[unselectable],
147 .ruleview-rule-source[unselectable] > label {
151 .theme-firebug .ruleview-rule-source label {
152 font-family: var(--proportional-font-family);
157 .ruleview-rule-source:not([unselectable]):hover {
158 text-decoration: underline;
162 border-top-width: 1px;
163 border-bottom-width: 1px;
164 border-top-style: solid;
165 border-bottom-style: solid;
167 -moz-user-select: none;
168 word-wrap: break-word;
169 vertical-align: middle;
175 .theme-firebug .theme-gutter.ruleview-header {
176 font-family: var(--proportional-font-family);
181 padding: 3px 4px 2px 4px;
182 line-height: inherit;
184 background: var(--theme-header-background);
187 :root[platform="win"] .ruleview-header,
188 :root[platform="linux"] .ruleview-header {
192 .ruleview-header.ruleview-expandable-header {
196 .ruleview-rule-pseudo-element {
198 border-left: solid 10px;
206 * Display rules that don't match the current selected element and uneditable
207 * user agent styles differently
209 .ruleview-rule[unmatched=true],
210 .ruleview-rule[uneditable=true] {
211 background: var(--theme-tab-toolbar-background);
214 .ruleview-rule[unmatched=true] {
218 .ruleview-rule[uneditable=true] :focus {
222 .ruleview-rule[uneditable=true] .theme-link {
223 color: var(--theme-highlight-bluegrey);
226 .ruleview-rule[uneditable=true] .ruleview-enableproperty {
230 .ruleview-rule[uneditable=true] .ruleview-swatch {
234 .ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname,
235 .ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer >
236 .ruleview-propertyvalue {
237 border-bottom-color: transparent;
240 .theme-firebug .ruleview-namecontainer > .ruleview-propertyname,
241 .theme-firebug .ruleview-propertycontainer > .ruleview-propertyvalue {
245 .theme-firebug .ruleview-namecontainer > .ruleview-propertyname {
246 color: var(--rule-property-name);
249 .theme-firebug .ruleview-propertycontainer > .ruleview-propertyvalue {
250 color: var(--rule-property-value);
253 .theme-firebug .ruleview-overridden .ruleview-propertyname,
254 .theme-firebug .ruleview-overridden .ruleview-propertyvalue {
255 text-decoration: line-through;
258 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-namecontainer,
259 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-namecontainer *,
260 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-propertycontainer,
261 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-propertycontainer * {
265 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-computedlist * {
269 .ruleview-rule + .ruleview-rule {
270 border-top-width: 1px;
271 border-top-style: dotted;
274 .theme-firebug .ruleview-rule + .ruleview-rule {
279 background-image: url(images/alerticon-warning.png);
280 background-size: 13px 12px;
281 margin-inline-start: 5px;
282 display: inline-block;
287 @media (min-resolution: 1.1dppx) {
289 background-image: url(images/alerticon-warning@2x.png);
293 .ruleview-overridden-rule-filter {
294 background-image: url(images/filter.svg#filterinput);
295 background-size: 11px 11px;
296 margin-inline-start: 5px;
297 display: inline-block;
303 padding-inline-end: 5px;
306 .ruleview-ruleclose {
311 .ruleview-propertylist {
317 .ruleview-rule:not(:hover) .ruleview-enableproperty {
322 vertical-align: middle;
323 display: inline-block;
326 .ruleview-newproperty {
327 /* (enable checkbox width: 12px) + (expander width: 15px) */
328 margin-inline-start: 27px;
331 .ruleview-namecontainer,
332 .ruleview-propertyvaluecontainer,
333 .ruleview-propertyname,
334 .ruleview-propertyvalue {
335 text-decoration: inherit;
338 .ruleview-computedlist {
344 margin-inline-start: 35px;
352 vertical-align: middle;
353 /* align the swatch with its value */
355 margin-inline-end: 5px;
356 display: inline-block;
360 .ruleview-colorswatch::before {
362 background-color: #9C9CFF;
363 background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090),
364 linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090);
365 background-size: 12px 12px;
366 background-position: 0 0, 6px 6px;
376 .ruleview-bezierswatch {
377 background: url("chrome://devtools/skin/images/cubic-bezier-swatch.png");
378 background-size: 1em;
381 .ruleview-filterswatch {
382 background: url("chrome://devtools/skin/images/filter-swatch.svg");
383 background-size: 1em;
386 .ruleview-angleswatch {
387 background: url("chrome://devtools/skin/images/angle-swatch.svg");
388 background-size: 1em;
391 @media (min-resolution: 1.1dppx) {
392 .ruleview-bezierswatch {
393 background: url("chrome://devtools/skin/images/cubic-bezier-swatch@2x.png");
394 background-size: 1em;
398 .ruleview-overridden {
399 text-decoration: line-through;
402 .theme-light .ruleview-overridden {
403 text-decoration-color: var(--theme-content-color3);
406 .styleinspector-propertyeditor {
407 border: 1px solid #CCC;
409 margin: -1px -3px -1px -1px;
412 .theme-firebug .styleinspector-propertyeditor {
413 border: 1px solid var(--theme-splitter-color);
414 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
418 border-left: 3px solid transparent;
422 .ruleview-propertycontainer > * {
423 vertical-align: middle;
426 .ruleview-property[dirty] {
427 border-left-color: var(--theme-highlight-green);
430 .ruleview-highlight {
431 background-color: var(--rule-highlight-background-color);
434 .ruleview-namecontainer > .ruleview-propertyname,
435 .ruleview-propertyvaluecontainer > .ruleview-propertyvalue {
436 border-bottom: 1px dashed transparent;
439 .ruleview-namecontainer:hover > .ruleview-propertyname,
440 .ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue {
441 border-bottom-color: hsl(0,0%,50%);
444 .ruleview-selectorcontainer {
445 word-wrap: break-word;
449 .ruleview-selector-separator,
450 .ruleview-selector-unmatched {
451 color: var(--theme-comment);
454 .ruleview-selector-matched > .ruleview-selector-attribute {
455 /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
458 .ruleview-selector-matched > .ruleview-selector-pseudo-class {
459 /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
462 .ruleview-selector-matched > .ruleview-selector-pseudo-class-lock {
464 color: var(--theme-highlight-orange);
467 .theme-firebug .ruleview-selector > .ruleview-selector-matched,
468 .theme-firebug .ruleview-selector > .ruleview-selector-separator,
469 .theme-firebug .ruleview-selector > .ruleview-selector-unmatched {
473 .ruleview-selectorhighlighter {
474 background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
480 .ruleview-selectorhighlighter:hover {
481 filter: url(images/filters.svg#checked-icon-state);
484 .ruleview-selectorhighlighter:active,
485 .ruleview-selectorhighlighter.highlighted {
486 filter: url(images/filters.svg#checked-icon-state) brightness(0.9);
489 #ruleview-add-rule-button::before {
490 background-image: url("chrome://devtools/skin/images/add.svg");
491 background-size: cover;
494 #pseudo-class-panel-toggle::before {
495 background-image: url("chrome://devtools/skin/images/pseudo-class.svg");
496 background-size: cover;
499 .ruleview-overridden-rule-filter {
502 .ruleview-overridden-rule-filter:hover {
506 .theme-firebug .ruleview-overridden {
507 text-decoration: none;
510 /* Firebug theme disable/enable CSS rule. Firebug theme uses its own
511 icons to indicate when CSS rules can be disabled or enabled.
513 .theme-firebug .ruleview-rule .theme-checkbox {
514 background-repeat: no-repeat;
515 background-size: 12px 12px;
516 background-image: url(chrome://devtools/skin/images/firebug/disable.svg);
517 background-position: 0 0;
520 .theme-firebug .ruleview-rule .theme-checkbox:not([checked]){
521 filter: grayscale(1);
524 .theme-firebug .ruleview-rule .theme-checkbox[checked] {
525 background-position: 0 0;
528 .theme-firebug .ruleview-property:not(:hover) .ruleview-enableproperty {