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/. */
6 --row-striped-background: rgba
(255, 255, 255, 0.05);
10 --row-striped-background: rgba
(247, 247, 247, 0.8);
13 #sidebar-panel-computedview {
16 flex-direction: column
;
21 /* Reset the global rotation of the icon done for RTL layout.
22 Computed view is always LTR */
23 #sidebar-panel-computedview .theme-twisty:not
(.open
):dir
(rtl
),
24 #sidebar-panel-computedview .theme-twisty:not
([open
]):-moz-locale-dir
(rtl
) {
25 transform: rotate
(-90deg);
28 #computedview-panel .inspector-tabpanel
{
32 #computedview-panel #browser-style-checkbox-label
{
34 text-overflow: ellipsis
;
42 /* This extra wrapper only serves as a way to get the content of the view focusable.
43 So that when the user reaches it either via keyboard or mouse, we know that the view
44 is focused and therefore can handle shortcuts.
45 However, for accessibility reasons, tabindex is set to -1 to avoid having to tab
46 through it, and the outline is hidden. */
47 #computed-container-focusable {
58 #browser-style-checkbox {
59 /* Bug 1200073 - extra space before the browser styles checkbox so
60 they aren't squished together in a small window. Put also
61 an extra space after. */
62 margin-inline-start: 5px;
66 #browser-style-checkbox-label {
68 padding-inline-start: 5px;
69 margin-inline-end: 5px;
72 #computed-property-container {
79 /* Ajust outline to make it visible, otherwise it could be clipped, as the container takes the whole window size */
83 #computed-property-container > :nth-child
(2n of
.computed-property-view
) {
84 background: var
(--row-striped-background
);
87 .computed-property-hidden {
91 .computed-property-view {
93 padding-inline-start: 5px;
96 /* Ajust outline to make it visible as the list items take the the whole window width */
100 .computed-property-name-container {
104 .computed-property-value-container {
110 .computed-property-name-container
> *,
111 .computed-property-value-container > * {
112 display: inline-block
;
113 vertical-align: middle
;
116 .computed-property-name {
117 outline: 0 !important
;
120 .computed-other-property-value::before {
122 display: inline-block
;
123 vertical-align: -0.5px;
127 background-image: url
(images
/arrow-e
.svg
);
128 background-repeat: no-repeat
;
129 background-size: contain
;
130 -moz-context-properties: fill
;
131 fill: var
(--theme-text-color-inactive
);
134 .computed-other-property-value:dir(rtl)::before {
135 transform: scaleX
(-1);
138 .computed-property-value {
139 padding-inline-start: 14px;
140 outline: 0 !important
;
145 padding-inline-start: 12px;
148 * Matched selectors element is always created, but is empty until the arrow is expanded.
149 * We only want the margin to appear when the matched selectors are visible.
152 margin-block-start: 4px;
156 /* Bug 1360238 - getSelection displays an extra "\n" on multiple sibling block elements.
157 We rely on this behavior to add an extra "\n" between matched selectors (Bug 1222737).
158 Therefore we use <div> elements around matched selectors and need this class
159 to keep them inline. We do that to avoid doing any formatting logic in JS.
160 Once Bug 1360238 will be fixed, we'll probably have to change the behavior
161 and remove this class. */
167 clip: rect
(1px, 1px, 1px, 1px);
168 clip-path: inset
(50%);
182 .computed-expandable {
190 .matchedselectors > p {
193 margin-inline-end: 2px;
196 border-style: dotted
;
197 border-color: var
(--theme-splitter-color
);
198 border-width: 1px 1px 0 1px;
201 .matchedselectors > p:last-of-type {
202 border-bottom-width: 1px;
206 text-decoration: line-through
;
209 .rule-text.parentmatch {
213 #computed-no-results {
231 /* Take away these two :visited rules to get a core dumper */
232 /* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */
235 text-decoration: underline
;
236 text-decoration-skip-ink: none
;
239 .computed-colorswatch {
243 vertical-align: middle
;
244 margin-inline-end: 5px;
245 display: inline-block
;
249 .computed-colorswatch::before {
251 background-color: #eee;
252 background-image: linear-gradient
(45deg, #ccc 25%, transparent
25%, transparent
75%, #ccc 75%, #ccc),
253 linear-gradient
(45deg, #ccc 25%, transparent
25%, transparent
75%, #ccc 75%, #ccc);
254 background-size: 12px 12px;
255 background-position: 0 0, 6px 6px;