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;
207 * Display rules that don't match the current selected element and uneditable
208 * user agent styles differently
210 .ruleview-rule[unmatched=true],
211 .ruleview-rule[uneditable=true] {
212 background: var(--theme-tab-toolbar-background);
215 .ruleview-rule[uneditable=true] :focus {
219 .ruleview-rule[uneditable=true] .theme-link {
220 color: var(--theme-highlight-bluegrey);
223 .ruleview-rule[uneditable=true] .ruleview-enableproperty {
227 .ruleview-rule[uneditable=true] .ruleview-swatch {
231 .ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname,
232 .ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer >
233 .ruleview-propertyvalue {
234 border-bottom-color: transparent;
237 .theme-firebug .ruleview-namecontainer > .ruleview-propertyname,
238 .theme-firebug .ruleview-propertycontainer > .ruleview-propertyvalue {
242 .theme-firebug .ruleview-namecontainer > .ruleview-propertyname {
243 color: var(--rule-property-name);
246 .theme-firebug .ruleview-propertycontainer > .ruleview-propertyvalue {
247 color: var(--rule-property-value);
250 .theme-firebug .ruleview-overridden .ruleview-propertyname,
251 .theme-firebug .ruleview-overridden .ruleview-propertyvalue {
252 text-decoration: line-through;
255 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-namecontainer,
256 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-namecontainer *,
257 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-propertycontainer,
258 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-propertycontainer * {
262 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-computedlist * {
267 /* font: message-box;*/
271 .ruleview-rule + .ruleview-rule {
272 border-top-width: 1px;
273 border-top-style: dotted;
276 .theme-firebug .ruleview-rule + .ruleview-rule {
281 background-image: url(images/alerticon-warning.png);
282 background-size: 13px 12px;
283 margin-inline-start: 5px;
284 display: inline-block;
289 @media (min-resolution: 1.1dppx) {
291 background-image: url(images/alerticon-warning@2x.png);
295 .ruleview-overridden-rule-filter {
296 background-image: url(images/filter.svg#filterinput);
297 background-size: 11px 11px;
298 margin-inline-start: 5px;
299 display: inline-block;
305 padding-inline-end: 5px;
308 .ruleview-ruleclose {
313 .ruleview-propertylist {
319 .ruleview-rule:not(:hover) .ruleview-enableproperty {
324 vertical-align: middle;
325 display: inline-block;
328 .ruleview-newproperty {
329 /* (enable checkbox width: 12px) + (expander width: 15px) */
330 margin-inline-start: 27px;
333 .ruleview-namecontainer,
334 .ruleview-propertyvaluecontainer,
335 .ruleview-propertyname,
336 .ruleview-propertyvalue {
337 text-decoration: inherit;
340 .ruleview-computedlist {
346 margin-inline-start: 35px;
354 vertical-align: middle;
355 /* align the swatch with its value */
357 margin-inline-end: 5px;
358 display: inline-block;
362 .ruleview-colorswatch::before {
364 background-color: #9C9CFF;
365 background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090),
366 linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090);
367 background-size: 12px 12px;
368 background-position: 0 0, 6px 6px;
378 .ruleview-bezierswatch {
379 background: url("chrome://devtools/skin/images/cubic-bezier-swatch.png");
380 background-size: 1em;
383 .ruleview-filterswatch {
384 background: url("chrome://devtools/skin/images/filter-swatch.svg");
385 background-size: 1em;
388 .ruleview-angleswatch {
389 background: url("chrome://devtools/skin/images/angle-swatch.svg");
390 background-size: 1em;
393 @media (min-resolution: 1.1dppx) {
394 .ruleview-bezierswatch {
395 background: url("chrome://devtools/skin/images/cubic-bezier-swatch@2x.png");
396 background-size: 1em;
400 .ruleview-overridden {
401 text-decoration: line-through;
404 .theme-light .ruleview-overridden {
405 text-decoration-color: var(--theme-content-color3);
408 .styleinspector-propertyeditor {
409 border: 1px solid #CCC;
411 margin: -1px -3px -1px -1px;
414 .theme-firebug .styleinspector-propertyeditor {
415 border: 1px solid var(--theme-splitter-color);
416 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
420 border-left: 3px solid transparent;
424 .ruleview-propertycontainer > * {
425 vertical-align: middle;
428 .ruleview-property[dirty] {
429 border-left-color: var(--theme-highlight-green);
432 .ruleview-highlight {
433 background-color: var(--rule-highlight-background-color);
436 .ruleview-namecontainer > .ruleview-propertyname,
437 .ruleview-propertyvaluecontainer > .ruleview-propertyvalue {
438 border-bottom: 1px dashed transparent;
441 .ruleview-namecontainer:hover > .ruleview-propertyname,
442 .ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue {
443 border-bottom-color: hsl(0,0%,50%);
446 .ruleview-selectorcontainer {
447 word-wrap: break-word;
451 .ruleview-selector-separator, .ruleview-selector-unmatched {
455 .ruleview-selector-matched > .ruleview-selector-attribute {
456 /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
459 .ruleview-selector-matched > .ruleview-selector-pseudo-class {
460 /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
463 .ruleview-selector-matched > .ruleview-selector-pseudo-class-lock {
465 color: var(--theme-highlight-orange);
468 .theme-firebug .ruleview-selector > .ruleview-selector-matched,
469 .theme-firebug .ruleview-selector > .ruleview-selector-separator,
470 .theme-firebug .ruleview-selector > .ruleview-selector-unmatched {
474 .ruleview-selectorhighlighter {
475 background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
481 .ruleview-selectorhighlighter:hover {
482 filter: url(images/filters.svg#checked-icon-state);
485 .ruleview-selectorhighlighter:active,
486 .ruleview-selectorhighlighter.highlighted {
487 filter: url(images/filters.svg#checked-icon-state) brightness(0.9);
490 #ruleview-add-rule-button::before {
491 background-image: url("chrome://devtools/skin/images/add.svg");
492 background-size: cover;
495 #pseudo-class-panel-toggle::before {
496 background-image: url("chrome://devtools/skin/images/pseudo-class.svg");
497 background-size: cover;
500 .ruleview-overridden-rule-filter {
503 .ruleview-overridden-rule-filter:hover {
507 .theme-firebug .ruleview-overridden {
508 text-decoration: none;
511 /* Firebug theme disable/enable CSS rule. Firebug theme uses its own
512 icons to indicate when CSS rules can be disabled or enabled.
514 .theme-firebug .ruleview-rule .theme-checkbox {
515 background-repeat: no-repeat;
516 background-size: 12px 12px;
517 background-image: url(chrome://devtools/skin/images/firebug/disable.svg);
518 background-position: 0 0;
521 .theme-firebug .ruleview-rule .theme-checkbox:not([checked]){
522 filter: grayscale(1);
525 .theme-firebug .ruleview-rule .theme-checkbox[checked] {
526 background-position: 0 0;
529 .theme-firebug .ruleview-property:not(:hover) .ruleview-enableproperty {