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;
35 /* Remove LCARS startcap and endcap */
36 /* XXX: We actually should add them via the #ruleview-toolbar again */
37 div#ruleview-toolbar-container::before,
38 div#ruleview-toolbar-container::after {
46 #ruleview-toolbar > .devtools-searchbox:first-child {
47 padding-inline-start: 0px;
50 #ruleview-command-toolbar {
58 transition: height 150ms ease;
61 #pseudo-class-panel[hidden] {
65 #pseudo-class-panel > label {
66 -moz-user-select: none;
72 /* Rule View Container */
75 -moz-user-select: text;
81 /* This extra wrapper only serves as a way to get the content of the view focusable.
82 So that when the user reaches it either via keyboard or mouse, we know that the view
83 is focused and therefore can handle shortcuts.
84 However, for accessibility reasons, tabindex is set to -1 to avoid having to tab
85 through it, and the outline is hidden. */
86 #ruleview-container-focusable {
91 #ruleview-container.non-interactive {
94 transition: visibility 0.25s;
101 .ruleview-property:not(:hover) > .ruleview-enableproperty {
102 pointer-events: none;
105 .ruleview-expandable-container[hidden] {
109 .ruleview-expandable-container {
113 .ruleview-namecontainer {
117 .ruleview-propertyvaluecontainer {
122 .ruleview-propertyvaluecontainer a {
126 .ruleview-computedlist,
127 .ruleview-overridden-rule-filter[hidden],
128 .ruleview-warning[hidden] {
132 .ruleview-computedlist[user-open],
133 .ruleview-computedlist[filter-open] {
137 .ruleview-rule-source {
140 -moz-user-select: none;
144 .ruleview-rule-source > label {
149 .ruleview-rule-source[unselectable],
150 .ruleview-rule-source[unselectable] > label {
154 .theme-firebug .ruleview-rule-source label {
155 font-family: var(--proportional-font-family);
160 .ruleview-rule-source:not([unselectable]):hover {
161 text-decoration: underline;
165 border-top-width: 1px;
166 border-bottom-width: 1px;
167 border-top-style: solid;
168 border-bottom-style: solid;
170 -moz-user-select: none;
171 word-wrap: break-word;
172 vertical-align: middle;
178 .theme-firebug .theme-gutter.ruleview-header {
179 font-family: var(--proportional-font-family);
184 padding: 3px 4px 2px 4px;
185 line-height: inherit;
187 background: var(--theme-header-background);
190 :root[platform="win"] .ruleview-header,
191 :root[platform="linux"] .ruleview-header {
195 .ruleview-header.ruleview-expandable-header {
199 .ruleview-rule-pseudo-element {
201 border-left: solid 10px;
209 * Display rules that don't match the current selected element and uneditable
210 * user agent styles differently
212 .ruleview-rule[unmatched=true],
213 .ruleview-rule[uneditable=true] {
214 background: var(--theme-tab-toolbar-background);
217 .ruleview-rule[unmatched=true] {
221 .ruleview-rule[uneditable=true] :focus {
225 .ruleview-rule[uneditable=true] .theme-link {
226 color: var(--theme-highlight-bluegrey);
229 .ruleview-rule[uneditable=true] .ruleview-enableproperty {
233 .ruleview-rule[uneditable=true] .ruleview-swatch {
237 .ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname,
238 .ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer >
239 .ruleview-propertyvalue {
240 border-bottom-color: transparent;
243 .theme-firebug .ruleview-namecontainer > .ruleview-propertyname,
244 .theme-firebug .ruleview-propertycontainer > .ruleview-propertyvalue {
248 .theme-firebug .ruleview-namecontainer > .ruleview-propertyname {
249 color: var(--rule-property-name);
252 .theme-firebug .ruleview-propertycontainer > .ruleview-propertyvalue {
253 color: var(--rule-property-value);
256 .theme-firebug .ruleview-overridden .ruleview-propertyname,
257 .theme-firebug .ruleview-overridden .ruleview-propertyvalue {
258 text-decoration: line-through;
261 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-namecontainer,
262 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-namecontainer *,
263 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-propertycontainer,
264 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-propertycontainer * {
268 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-computedlist * {
272 .ruleview-rule + .ruleview-rule {
273 border-top-width: 1px;
274 border-top-style: dotted;
277 .theme-firebug .ruleview-rule + .ruleview-rule {
282 background-image: url(images/alerticon-warning.png);
283 background-size: 13px 12px;
284 margin-inline-start: 5px;
285 display: inline-block;
290 @media (min-resolution: 1.1dppx) {
292 background-image: url(images/alerticon-warning@2x.png);
296 .ruleview-overridden-rule-filter {
297 background-image: url(images/filter.svg#filterinput);
298 background-size: 11px 11px;
299 margin-inline-start: 5px;
300 display: inline-block;
306 padding-inline-end: 5px;
309 .ruleview-ruleclose {
314 .ruleview-propertylist {
320 .ruleview-rule:not(:hover) .ruleview-enableproperty {
325 vertical-align: middle;
326 display: inline-block;
329 .ruleview-newproperty {
330 /* (enable checkbox width: 12px) + (expander width: 15px) */
331 margin-inline-start: 27px;
334 .ruleview-namecontainer,
335 .ruleview-propertyvaluecontainer,
336 .ruleview-propertyname,
337 .ruleview-propertyvalue {
338 text-decoration: inherit;
341 .ruleview-computedlist {
347 margin-inline-start: 35px;
355 vertical-align: middle;
356 /* align the swatch with its value */
358 margin-inline-end: 5px;
359 display: inline-block;
363 .ruleview-colorswatch::before {
365 background-color: #9C9CFF;
366 background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090),
367 linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090);
368 background-size: 12px 12px;
369 background-position: 0 0, 6px 6px;
379 .ruleview-bezierswatch {
380 background: url("chrome://devtools/skin/images/cubic-bezier-swatch.png");
381 background-size: 1em;
384 .ruleview-filterswatch {
385 background: url("chrome://devtools/skin/images/filter-swatch.svg");
386 background-size: 1em;
389 .ruleview-angleswatch {
390 background: url("chrome://devtools/skin/images/angle-swatch.svg");
391 background-size: 1em;
394 @media (min-resolution: 1.1dppx) {
395 .ruleview-bezierswatch {
396 background: url("chrome://devtools/skin/images/cubic-bezier-swatch@2x.png");
397 background-size: 1em;
401 .ruleview-overridden {
402 text-decoration: line-through;
405 .theme-light .ruleview-overridden {
406 text-decoration-color: var(--theme-content-color3);
409 .styleinspector-propertyeditor {
410 border: 1px solid #CCC;
412 margin: -1px -3px -1px -1px;
415 .theme-firebug .styleinspector-propertyeditor {
416 border: 1px solid var(--theme-splitter-color);
417 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
421 border-left: 3px solid transparent;
425 .ruleview-propertycontainer > * {
426 vertical-align: middle;
429 .ruleview-property[dirty] {
430 border-left-color: var(--theme-highlight-green);
433 .ruleview-highlight {
434 background-color: var(--rule-highlight-background-color);
437 .ruleview-namecontainer > .ruleview-propertyname,
438 .ruleview-propertyvaluecontainer > .ruleview-propertyvalue {
439 border-bottom: 1px dashed transparent;
442 .ruleview-namecontainer:hover > .ruleview-propertyname,
443 .ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue {
444 border-bottom-color: hsl(0,0%,50%);
447 .ruleview-selectorcontainer {
448 word-wrap: break-word;
452 .ruleview-selector-separator,
453 .ruleview-selector-unmatched {
454 color: var(--theme-comment);
457 .ruleview-selector-matched > .ruleview-selector-attribute {
458 /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
461 .ruleview-selector-matched > .ruleview-selector-pseudo-class {
462 /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
465 .ruleview-selector-matched > .ruleview-selector-pseudo-class-lock {
467 color: var(--theme-highlight-orange);
470 .theme-firebug .ruleview-selector > .ruleview-selector-matched,
471 .theme-firebug .ruleview-selector > .ruleview-selector-separator,
472 .theme-firebug .ruleview-selector > .ruleview-selector-unmatched {
476 .ruleview-selectorhighlighter {
477 background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
483 .ruleview-selectorhighlighter:hover {
484 filter: url(images/filters.svg#checked-icon-state);
487 .ruleview-selectorhighlighter:active,
488 .ruleview-selectorhighlighter.highlighted {
489 filter: url(images/filters.svg#checked-icon-state) brightness(0.9);
492 #ruleview-add-rule-button::before {
493 background-image: url("chrome://devtools/skin/images/add.svg");
494 background-size: cover;
497 #pseudo-class-panel-toggle::before {
498 background-image: url("chrome://devtools/skin/images/pseudo-class.svg");
499 background-size: cover;
502 .ruleview-overridden-rule-filter {
505 .ruleview-overridden-rule-filter:hover {
509 .theme-firebug .ruleview-overridden {
510 text-decoration: none;
513 /* Firebug theme disable/enable CSS rule. Firebug theme uses its own
514 icons to indicate when CSS rules can be disabled or enabled.
516 .theme-firebug .ruleview-rule .theme-checkbox {
517 background-repeat: no-repeat;
518 background-size: 12px 12px;
519 background-image: url(chrome://devtools/skin/images/firebug/disable.svg);
520 background-position: 0 0;
523 .theme-firebug .ruleview-rule .theme-checkbox:not([checked]){
524 filter: grayscale(1);
527 .theme-firebug .ruleview-rule .theme-checkbox[checked] {
528 background-position: 0 0;
531 .theme-firebug .ruleview-property:not(:hover) .ruleview-enableproperty {