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-rule .ruleview-expander.theme-twisty:dir(rtl) {
330 /* for preventing .theme-twisty's wrong direction in rtl; Bug 1296648 */
334 .ruleview-newproperty {
335 /* (enable checkbox width: 12px) + (expander width: 15px) */
336 margin-inline-start: 27px;
339 .ruleview-namecontainer,
340 .ruleview-propertyvaluecontainer,
341 .ruleview-propertyname,
342 .ruleview-propertyvalue {
343 text-decoration: inherit;
346 .ruleview-computedlist {
352 margin-inline-start: 35px;
360 vertical-align: middle;
361 /* align the swatch with its value */
363 margin-inline-end: 5px;
364 display: inline-block;
368 .ruleview-colorswatch::before {
370 background-color: #9C9CFF;
371 background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090),
372 linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090);
373 background-size: 12px 12px;
374 background-position: 0 0, 6px 6px;
384 .ruleview-bezierswatch {
385 background: url("chrome://devtools/skin/images/cubic-bezier-swatch.png");
386 background-size: 1em;
389 .ruleview-filterswatch {
390 background: url("chrome://devtools/skin/images/filter-swatch.svg");
391 background-size: 1em;
394 .ruleview-angleswatch {
395 background: url("chrome://devtools/skin/images/angle-swatch.svg");
396 background-size: 1em;
399 @media (min-resolution: 1.1dppx) {
400 .ruleview-bezierswatch {
401 background: url("chrome://devtools/skin/images/cubic-bezier-swatch@2x.png");
402 background-size: 1em;
406 .ruleview-overridden {
407 text-decoration: line-through;
410 .theme-light .ruleview-overridden {
411 text-decoration-color: var(--theme-content-color3);
414 .styleinspector-propertyeditor {
415 border: 1px solid #CCC;
417 margin: -1px -3px -1px -1px;
420 .theme-firebug .styleinspector-propertyeditor {
421 border: 1px solid var(--theme-splitter-color);
422 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
426 border-left: 3px solid transparent;
430 .ruleview-propertycontainer > * {
431 vertical-align: middle;
434 .ruleview-property[dirty] {
435 border-left-color: var(--theme-highlight-green);
438 .ruleview-highlight {
439 background-color: var(--rule-highlight-background-color);
442 .ruleview-namecontainer > .ruleview-propertyname,
443 .ruleview-propertyvaluecontainer > .ruleview-propertyvalue {
444 border-bottom: 1px dashed transparent;
447 .ruleview-namecontainer:hover > .ruleview-propertyname,
448 .ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue {
449 border-bottom-color: hsl(0,0%,50%);
452 .ruleview-selectorcontainer {
453 word-wrap: break-word;
457 .ruleview-selector-separator,
458 .ruleview-selector-unmatched {
459 color: var(--theme-comment);
462 .ruleview-selector-matched > .ruleview-selector-attribute {
463 /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
466 .ruleview-selector-matched > .ruleview-selector-pseudo-class {
467 /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
470 .ruleview-selector-matched > .ruleview-selector-pseudo-class-lock {
472 color: var(--theme-highlight-orange);
475 .theme-firebug .ruleview-selector > .ruleview-selector-matched,
476 .theme-firebug .ruleview-selector > .ruleview-selector-separator,
477 .theme-firebug .ruleview-selector > .ruleview-selector-unmatched {
481 .ruleview-selectorhighlighter {
482 background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
488 .ruleview-selectorhighlighter:hover {
489 filter: url(images/filters.svg#checked-icon-state);
492 .ruleview-selectorhighlighter:active,
493 .ruleview-selectorhighlighter.highlighted {
494 filter: url(images/filters.svg#checked-icon-state) brightness(0.9);
497 #ruleview-add-rule-button::before {
498 background-image: url("chrome://devtools/skin/images/add.svg");
499 background-size: cover;
502 #pseudo-class-panel-toggle::before {
503 background-image: url("chrome://devtools/skin/images/pseudo-class.svg");
504 background-size: cover;
507 .ruleview-overridden-rule-filter {
510 .ruleview-overridden-rule-filter:hover {
514 .theme-firebug .ruleview-overridden {
515 text-decoration: none;
518 /* Firebug theme disable/enable CSS rule. Firebug theme uses its own
519 icons to indicate when CSS rules can be disabled or enabled.
521 .theme-firebug .ruleview-rule .theme-checkbox {
522 background-repeat: no-repeat;
523 background-size: 12px 12px;
524 background-image: url(chrome://devtools/skin/images/firebug/disable.svg);
525 background-position: 0 0;
528 .theme-firebug .ruleview-rule .theme-checkbox:not([checked]){
529 filter: grayscale(1);
532 .theme-firebug .ruleview-rule .theme-checkbox[checked] {
533 background-position: 0 0;
536 .theme-firebug .ruleview-property:not(:hover) .ruleview-enableproperty {