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;
27 /* Rule View Toolbar */
29 #ruleview-toolbar-container {
31 flex-direction: column;
39 #ruleview-toolbar > .devtools-searchbox:first-child {
40 padding-inline-start: 0px;
43 #ruleview-command-toolbar {
51 transition: height 150ms ease;
54 #pseudo-class-panel[hidden] {
58 #pseudo-class-panel > label {
59 -moz-user-select: none;
65 /* Rule View Container */
68 -moz-user-select: text;
74 /* This extra wrapper only serves as a way to get the content of the view focusable.
75 So that when the user reaches it either via keyboard or mouse, we know that the view
76 is focused and therefore can handle shortcuts.
77 However, for accessibility reasons, tabindex is set to -1 to avoid having to tab
78 through it, and the outline is hidden. */
79 #ruleview-container-focusable {
84 #ruleview-container.non-interactive {
87 transition: visibility 0.25s;
94 .ruleview-property:not(:hover) > .ruleview-enableproperty {
98 .ruleview-expandable-container[hidden] {
102 .ruleview-expandable-container {
106 .ruleview-namecontainer {
110 .ruleview-propertyvaluecontainer {
115 .ruleview-propertyvaluecontainer a {
119 .ruleview-computedlist,
120 .ruleview-overridden-rule-filter[hidden],
121 .ruleview-warning[hidden] {
125 .ruleview-computedlist[user-open],
126 .ruleview-computedlist[filter-open] {
130 .ruleview-rule-source {
133 -moz-user-select: none;
137 .ruleview-rule-source > label {
142 .ruleview-rule-source[unselectable],
143 .ruleview-rule-source[unselectable] > label {
147 .theme-firebug .ruleview-rule-source label {
148 font-family: var(--proportional-font-family);
153 .ruleview-rule-source:not([unselectable]):hover {
154 text-decoration: underline;
158 border-top-width: 1px;
159 border-bottom-width: 1px;
160 border-top-style: solid;
161 border-bottom-style: solid;
163 -moz-user-select: none;
164 word-wrap: break-word;
165 vertical-align: middle;
171 .theme-firebug .theme-gutter.ruleview-header {
172 font-family: var(--proportional-font-family);
177 padding: 3px 4px 2px 4px;
178 line-height: inherit;
180 background: var(--theme-header-background);
183 :root[platform="win"] .ruleview-header,
184 :root[platform="linux"] .ruleview-header {
188 .ruleview-header.ruleview-expandable-header {
192 .ruleview-rule-pseudo-element {
194 border-left: solid 10px;
202 * Display rules that don't match the current selected element and uneditable
203 * user agent styles differently
205 .ruleview-rule[unmatched=true],
206 .ruleview-rule[uneditable=true] {
207 background: var(--theme-tab-toolbar-background);
210 .ruleview-rule[unmatched=true] {
214 .ruleview-rule[uneditable=true] :focus {
218 .ruleview-rule[uneditable=true] .theme-link {
219 color: var(--theme-highlight-bluegrey);
222 .ruleview-rule[uneditable=true] .ruleview-enableproperty {
226 .ruleview-rule[uneditable=true] .ruleview-swatch {
230 .ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname,
231 .ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer >
232 .ruleview-propertyvalue {
233 border-bottom-color: transparent;
236 .theme-firebug .ruleview-namecontainer > .ruleview-propertyname,
237 .theme-firebug .ruleview-propertycontainer > .ruleview-propertyvalue {
241 .theme-firebug .ruleview-namecontainer > .ruleview-propertyname {
242 color: var(--rule-property-name);
245 .theme-firebug .ruleview-propertycontainer > .ruleview-propertyvalue {
246 color: var(--rule-property-value);
249 .theme-firebug .ruleview-overridden .ruleview-propertyname,
250 .theme-firebug .ruleview-overridden .ruleview-propertyvalue {
251 text-decoration: line-through;
254 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-namecontainer,
255 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-namecontainer *,
256 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-propertycontainer,
257 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-propertycontainer * {
261 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-computedlist * {
265 .ruleview-rule + .ruleview-rule {
266 border-top-width: 1px;
267 border-top-style: dotted;
270 .theme-firebug .ruleview-rule + .ruleview-rule {
275 background-image: url(images/alerticon-warning.png);
276 background-size: 13px 12px;
277 margin-inline-start: 5px;
278 display: inline-block;
283 @media (min-resolution: 1.1dppx) {
285 background-image: url(images/alerticon-warning@2x.png);
289 .ruleview-overridden-rule-filter {
290 background-image: url(images/filter.svg#filterinput);
291 background-size: 11px 11px;
292 margin-inline-start: 5px;
293 display: inline-block;
299 padding-inline-end: 5px;
302 .ruleview-ruleclose {
307 .ruleview-propertylist {
313 .ruleview-rule:not(:hover) .ruleview-enableproperty {
318 vertical-align: middle;
319 display: inline-block;
322 .ruleview-newproperty {
323 /* (enable checkbox width: 12px) + (expander width: 15px) */
324 margin-inline-start: 27px;
327 .ruleview-namecontainer,
328 .ruleview-propertyvaluecontainer,
329 .ruleview-propertyname,
330 .ruleview-propertyvalue {
331 text-decoration: inherit;
334 .ruleview-computedlist {
340 margin-inline-start: 35px;
348 vertical-align: middle;
349 /* align the swatch with its value */
351 margin-inline-end: 5px;
352 display: inline-block;
356 .ruleview-colorswatch::before {
358 background-color: #9C9CFF;
359 background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090),
360 linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090);
361 background-size: 12px 12px;
362 background-position: 0 0, 6px 6px;
372 .ruleview-bezierswatch {
373 background: url("chrome://devtools/skin/images/cubic-bezier-swatch.png");
374 background-size: 1em;
377 .ruleview-filterswatch {
378 background: url("chrome://devtools/skin/images/filter-swatch.svg");
379 background-size: 1em;
382 .ruleview-angleswatch {
383 background: url("chrome://devtools/skin/images/angle-swatch.svg");
384 background-size: 1em;
387 @media (min-resolution: 1.1dppx) {
388 .ruleview-bezierswatch {
389 background: url("chrome://devtools/skin/images/cubic-bezier-swatch@2x.png");
390 background-size: 1em;
394 .ruleview-overridden {
395 text-decoration: line-through;
398 .theme-light .ruleview-overridden {
399 text-decoration-color: var(--theme-content-color3);
402 .styleinspector-propertyeditor {
403 border: 1px solid #CCC;
405 margin: -1px -3px -1px -1px;
408 .theme-firebug .styleinspector-propertyeditor {
409 border: 1px solid var(--theme-splitter-color);
410 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
414 border-left: 3px solid transparent;
418 .ruleview-propertycontainer > * {
419 vertical-align: middle;
422 .ruleview-property[dirty] {
423 border-left-color: var(--theme-highlight-green);
426 .ruleview-highlight {
427 background-color: var(--rule-highlight-background-color);
430 .ruleview-namecontainer > .ruleview-propertyname,
431 .ruleview-propertyvaluecontainer > .ruleview-propertyvalue {
432 border-bottom: 1px dashed transparent;
435 .ruleview-namecontainer:hover > .ruleview-propertyname,
436 .ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue {
437 border-bottom-color: hsl(0,0%,50%);
440 .ruleview-selectorcontainer {
441 word-wrap: break-word;
445 .ruleview-selector-separator,
446 .ruleview-selector-unmatched {
447 color: var(--theme-comment);
450 .ruleview-selector-matched > .ruleview-selector-attribute {
451 /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
454 .ruleview-selector-matched > .ruleview-selector-pseudo-class {
455 /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
458 .ruleview-selector-matched > .ruleview-selector-pseudo-class-lock {
460 color: var(--theme-highlight-orange);
463 .theme-firebug .ruleview-selector > .ruleview-selector-matched,
464 .theme-firebug .ruleview-selector > .ruleview-selector-separator,
465 .theme-firebug .ruleview-selector > .ruleview-selector-unmatched {
469 .ruleview-selectorhighlighter {
470 background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
476 .ruleview-selectorhighlighter:hover {
477 filter: url(images/filters.svg#checked-icon-state);
480 .ruleview-selectorhighlighter:active,
481 .ruleview-selectorhighlighter.highlighted {
482 filter: url(images/filters.svg#checked-icon-state) brightness(0.9);
485 #ruleview-add-rule-button::before {
486 background-image: url("chrome://devtools/skin/images/add.svg");
487 background-size: cover;
490 #pseudo-class-panel-toggle::before {
491 background-image: url("chrome://devtools/skin/images/pseudo-class.svg");
492 background-size: cover;
495 .ruleview-overridden-rule-filter {
498 .ruleview-overridden-rule-filter:hover {
502 .theme-firebug .ruleview-overridden {
503 text-decoration: none;
506 /* Firebug theme disable/enable CSS rule. Firebug theme uses its own
507 icons to indicate when CSS rules can be disabled or enabled.
509 .theme-firebug .ruleview-rule .theme-checkbox {
510 background-repeat: no-repeat;
511 background-size: 12px 12px;
512 background-image: url(chrome://devtools/skin/images/firebug/disable.svg);
513 background-position: 0 0;
516 .theme-firebug .ruleview-rule .theme-checkbox:not([checked]){
517 filter: grayscale(1);
520 .theme-firebug .ruleview-rule .theme-checkbox[checked] {
521 background-position: 0 0;
524 .theme-firebug .ruleview-property:not(:hover) .ruleview-enableproperty {