/* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ /* CSS Variables specific to this panel that aren't defined by the themes */ .theme-light, .theme-dark, .theme-firebug { --rule-highlight-background-color: #402000; --rule-filter-icon: url(images/magnifying-glass.png); } /* Rule View Tabpanel */ .theme-firebug .ruleview { /* font-family: monospace; font-size: 11px;*/ } #sidebar-panel-ruleview { margin: 0; display: flex; flex-direction: column; width: 100%; /* Bug 1243598 - Reduce the container height by the tab height to make room for the tabs above. */ height: calc(100% - 24px); position: absolute; } /* Rule View Toolbar */ #ruleview-toolbar-container { display: flex; flex-direction: column; height: auto; } #ruleview-toolbar { display: flex; height: 23px; } #ruleview-toolbar > .devtools-searchbox:first-child { padding-inline-start: 0px; } #ruleview-command-toolbar { display: flex; } #pseudo-class-panel { display: flex; height: 24px; overflow: hidden; transition: height 150ms ease; } #pseudo-class-panel[hidden] { height: 0px; } #pseudo-class-panel > label { -moz-user-select: none; flex-grow: 1; display: flex; align-items: center; } /* Rule View Container */ #ruleview-container { -moz-user-select: text; overflow: auto; flex: auto; } #ruleview-container.non-interactive { pointer-events: none; visibility: collapse; transition: visibility 0.25s; } .ruleview-code { direction: ltr; } .ruleview-property:not(:hover) > .ruleview-enableproperty { pointer-events: none; } .ruleview-expandable-container[hidden] { display: none; } .ruleview-expandable-container { display: block; } .ruleview-namecontainer { cursor: text; } .ruleview-propertyvaluecontainer { cursor: text; padding-right: 5px; } .ruleview-propertyvaluecontainer a { cursor: pointer; } .ruleview-computedlist, .ruleview-overridden-rule-filter[hidden], .ruleview-warning[hidden] { display: none; } .ruleview-computedlist[user-open], .ruleview-computedlist[filter-open] { display: block; } .ruleview-rule-source { text-align: end; float: right; -moz-user-select: none; margin-bottom: 2px; } .ruleview-rule-source > label { cursor: pointer; margin: 0; } .ruleview-rule-source[unselectable], .ruleview-rule-source[unselectable] > label { cursor: default; } .theme-firebug .ruleview-rule-source label { font-family: var(--proportional-font-family); font-weight: bold; color: #0000FF; } .ruleview-rule-source:not([unselectable]):hover { text-decoration: underline; } .ruleview-header { border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; padding: 1px 4px; -moz-user-select: none; word-wrap: break-word; vertical-align: middle; min-height: 1.5em; line-height: 1.5em; margin-top: -1px; } .theme-firebug .theme-gutter.ruleview-header { font-family: var(--proportional-font-family); font-weight: bold; color: inherit; border: none; margin: 4px 0; padding: 3px 4px 2px 4px; line-height: inherit; min-height: 0; background: var(--theme-header-background); } :root[platform="win"] .ruleview-header, :root[platform="linux"] .ruleview-header { margin-top: 4px; } .ruleview-header.ruleview-expandable-header { cursor: pointer; } .ruleview-rule-pseudo-element { padding-left:20px; border-left: solid 10px; } .ruleview-rule, #noResults { padding: 2px 4px; } /** * Display rules that don't match the current selected element and uneditable * user agent styles differently */ .ruleview-rule[unmatched=true], .ruleview-rule[uneditable=true] { background: var(--theme-tab-toolbar-background); } .ruleview-rule[uneditable=true] :focus { outline: none; } .ruleview-rule[uneditable=true] .theme-link { color: var(--theme-highlight-bluegrey); } .ruleview-rule[uneditable=true] .ruleview-enableproperty { visibility: hidden; } .ruleview-rule[uneditable=true] .ruleview-swatch { cursor: default; } .ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname, .ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer > .ruleview-propertyvalue { border-bottom-color: transparent; } .theme-firebug .ruleview-namecontainer > .ruleview-propertyname, .theme-firebug .ruleview-propertycontainer > .ruleview-propertyvalue { border-bottom: none; } .theme-firebug .ruleview-namecontainer > .ruleview-propertyname { color: var(--rule-property-name); } .theme-firebug .ruleview-propertycontainer > .ruleview-propertyvalue { color: var(--rule-property-value); } .theme-firebug .ruleview-overridden .ruleview-propertyname, .theme-firebug .ruleview-overridden .ruleview-propertyvalue { text-decoration: line-through; } .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-namecontainer, .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-namecontainer *, .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-propertycontainer, .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-propertycontainer * { color: #A09090; } .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-computedlist * { color: #A09090; } #noResults { /* font: message-box;*/ color: #A09090; } .ruleview-rule + .ruleview-rule { border-top-width: 1px; border-top-style: dotted; } .theme-firebug .ruleview-rule + .ruleview-rule { border-top: none; } .ruleview-warning { background-image: url(images/alerticon-warning.png); background-size: 13px 12px; margin-inline-start: 5px; display: inline-block; width: 13px; height: 12px; } @media (min-resolution: 1.1dppx) { .ruleview-warning { background-image: url(images/alerticon-warning@2x.png); } } .ruleview-overridden-rule-filter { background-image: var(--rule-filter-icon); background-size: 11px 11px; margin-inline-start: 5px; display: inline-block; width: 11px; height: 11px; } .ruleview-ruleopen { padding-inline-end: 5px; } .ruleview-ruleclose { cursor: text; padding-right: 20px; } .ruleview-propertylist { list-style: none; padding: 0; margin: 0; } .ruleview-rule:not(:hover) .ruleview-enableproperty { visibility: hidden; } .ruleview-expander { vertical-align: middle; display: inline-block; } .ruleview-newproperty { /* (enable checkbox width: 12px) + (expander width: 15px) */ margin-inline-start: 27px; } .ruleview-namecontainer, .ruleview-propertyvaluecontainer, .ruleview-propertyname, .ruleview-propertyvalue { text-decoration: inherit; } .ruleview-computedlist { list-style: none; padding: 0; } .ruleview-computed { margin-inline-start: 35px; } .ruleview-swatch { cursor: pointer; border-radius: 50%; width: 0.9em; height: 0.9em; vertical-align: middle; /* align the swatch with its value */ margin-top: -1px; margin-inline-end: 5px; display: inline-block; position: relative; } .ruleview-colorswatch::before { content: ''; background-color: #9C9CFF; background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090), linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090); background-size: 12px 12px; background-position: 0 0, 6px 6px; position: absolute; border-radius: 50%; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } .ruleview-bezierswatch { background: url("chrome://devtools/skin/images/cubic-bezier-swatch.png"); background-size: 1em; } .ruleview-filterswatch { background: url("chrome://devtools/skin/images/filter-swatch.svg"); background-size: 1em; } .ruleview-angleswatch { background: url("chrome://devtools/skin/images/angle-swatch.svg"); background-size: 1em; } @media (min-resolution: 1.1dppx) { .ruleview-bezierswatch { background: url("chrome://devtools/skin/images/cubic-bezier-swatch@2x.png"); background-size: 1em; } } .ruleview-overridden { text-decoration: line-through; } .theme-light .ruleview-overridden { text-decoration-color: var(--theme-content-color3); } .styleinspector-propertyeditor { border: 1px solid #CCC; padding: 0; margin: -1px -3px -1px -1px; } .theme-firebug .styleinspector-propertyeditor { border: 1px solid var(--theme-splitter-color); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); } .ruleview-property { border-left: 3px solid transparent; clear: right; } .ruleview-propertycontainer > * { vertical-align: middle; } .ruleview-property[dirty] { border-left-color: var(--theme-highlight-green); } .ruleview-highlight { background-color: var(--rule-highlight-background-color); } .ruleview-namecontainer > .ruleview-propertyname, .ruleview-propertyvaluecontainer > .ruleview-propertyvalue { border-bottom: 1px dashed transparent; } .ruleview-namecontainer:hover > .ruleview-propertyname, .ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue { border-bottom-color: hsl(0,0%,50%); } .ruleview-selectorcontainer { word-wrap: break-word; cursor: text; } .ruleview-selector-separator, .ruleview-selector-unmatched { color: #888; } .ruleview-selector-matched > .ruleview-selector-attribute { /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */ } .ruleview-selector-matched > .ruleview-selector-pseudo-class { /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */ } .ruleview-selector-matched > .ruleview-selector-pseudo-class-lock { font-weight: bold; color: var(--theme-highlight-orange); } .theme-firebug .ruleview-selector > .ruleview-selector-matched, .theme-firebug .ruleview-selector > .ruleview-selector-separator, .theme-firebug .ruleview-selector > .ruleview-selector-unmatched { color: inherit; } .ruleview-selectorhighlighter { background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0; padding-left: 16px; margin-left: 5px; cursor: pointer; } .ruleview-selectorhighlighter:hover { filter: url(images/filters.svg#checked-icon-state); } .ruleview-selectorhighlighter:active, .ruleview-selectorhighlighter.highlighted { filter: url(images/filters.svg#checked-icon-state) brightness(0.9); } #ruleview-add-rule-button::before { background-image: url("chrome://devtools/skin/images/add.svg"); background-size: cover; } #pseudo-class-panel-toggle::before { background-image: url("chrome://devtools/skin/images/pseudo-class.svg"); background-size: cover; } .ruleview-overridden-rule-filter { opacity: 0.8; } .ruleview-overridden-rule-filter:hover { opacity: 1; } .theme-firebug .ruleview-overridden { text-decoration: none; } /* Firebug theme disable/enable CSS rule. Firebug theme uses its own icons to indicate when CSS rules can be disabled or enabled. .theme-firebug .ruleview-rule .theme-checkbox { background-repeat: no-repeat; background-size: 12px 12px; background-image: url(chrome://devtools/skin/images/firebug/disable.svg); background-position: 0 0; } .theme-firebug .ruleview-rule .theme-checkbox:not([checked]){ filter: grayscale(1); } .theme-firebug .ruleview-rule .theme-checkbox[checked] { background-position: 0 0; } .theme-firebug .ruleview-property:not(:hover) .ruleview-enableproperty { visibility: hidden; } */