Commit | Line | Data |
---|---|---|
2efcd25d RK |
1 | /* vim:set ts=2 sw=2 sts=2 et: */ |
2 | /* This Source Code Form is subject to the terms of the Mozilla Public | |
3 | * License, v. 2.0. If a copy of the MPL was not distributed with this | |
4 | * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
5 | ||
dc9d5d64 RK |
6 | #sidebar-panel-computedview { |
7 | margin: 0; | |
8 | display : flex; | |
9 | flex-direction: column; | |
10 | width: 100%; | |
1ad21b1f | 11 | height: 100%; |
2efcd25d RK |
12 | } |
13 | ||
d0a8de80 RK |
14 | #computedview-container { |
15 | overflow: auto; | |
16 | height: 100%; | |
17 | } | |
18 | ||
19 | /* This extra wrapper only serves as a way to get the content of the view focusable. | |
20 | So that when the user reaches it either via keyboard or mouse, we know that the view | |
21 | is focused and therefore can handle shortcuts. | |
22 | However, for accessibility reasons, tabindex is set to -1 to avoid having to tab | |
23 | through it, and the outline is hidden. */ | |
24 | #computedview-container-focusable { | |
25 | height: 100%; | |
26 | outline: none; | |
27 | } | |
28 | ||
1ad21b1f | 29 | #computedview-toolbar { |
dc9d5d64 | 30 | display: flex; |
2efcd25d RK |
31 | } |
32 | ||
dc9d5d64 RK |
33 | #browser-style-checkbox { |
34 | /* Bug 1200073 - extra space before the browser styles checkbox so | |
d0a8de80 RK |
35 | they aren't squished together in a small window. Put also |
36 | an extra space after. */ | |
dc9d5d64 | 37 | margin-inline-start: 5px; |
d0a8de80 RK |
38 | margin-inline-end: 5px; |
39 | } | |
40 | ||
41 | #browser-style-checkbox-label { | |
42 | margin-right: 5px; | |
43 | ||
44 | /* Vertically center the 'Browser styles' checkbox in the | |
45 | Computed panel with its label. */ | |
46 | display: flex; | |
47 | align-items: center; | |
2efcd25d RK |
48 | } |
49 | ||
50 | #propertyContainer { | |
51 | -moz-user-select: text; | |
d0a8de80 RK |
52 | overflow-y: auto; |
53 | overflow-x: hidden; | |
dc9d5d64 | 54 | flex: auto; |
2efcd25d RK |
55 | } |
56 | ||
6f5a7408 RK |
57 | .row-striped { |
58 | background: var(--theme-body-background); | |
59 | } | |
60 | ||
2efcd25d RK |
61 | .property-view-hidden, |
62 | .property-content-hidden { | |
63 | display: none; | |
64 | } | |
65 | ||
66 | .property-view { | |
1ad21b1f | 67 | padding: 2px 0 2px 17px; |
dc9d5d64 RK |
68 | display: flex; |
69 | flex-wrap: wrap; | |
2efcd25d RK |
70 | } |
71 | ||
dc9d5d64 RK |
72 | .property-name-container { |
73 | width: 202px; | |
74 | } | |
75 | ||
76 | .property-value-container { | |
d0a8de80 RK |
77 | display: flex; |
78 | flex: 1 1 168px; | |
79 | overflow: hidden; | |
dc9d5d64 RK |
80 | } |
81 | ||
82 | .property-name-container > *, | |
83 | .property-value-container > * { | |
2efcd25d RK |
84 | display: inline-block; |
85 | vertical-align: middle; | |
86 | } | |
87 | ||
88 | .property-name { | |
2efcd25d RK |
89 | overflow-x: hidden; |
90 | text-overflow: ellipsis; | |
91 | white-space: nowrap; | |
d0a8de80 | 92 | outline: 0 !important; |
2efcd25d RK |
93 | } |
94 | ||
1ad21b1f | 95 | .other-property-value { |
dc9d5d64 | 96 | background-image: url(images/arrow-e.png); |
ed88669c RK |
97 | background-repeat: no-repeat; |
98 | background-size: 5px 8px; | |
99 | } | |
100 | ||
024a65e9 | 101 | @media (min-resolution: 1.1dppx) { |
1ad21b1f | 102 | .other-property-value { |
dc9d5d64 | 103 | background-image: url(images/arrow-e@2x.png); |
ed88669c RK |
104 | } |
105 | } | |
106 | ||
2efcd25d | 107 | .property-value { |
2efcd25d RK |
108 | overflow-x: hidden; |
109 | text-overflow: ellipsis; | |
110 | white-space: nowrap; | |
2efcd25d | 111 | padding-left: 10px; |
d0a8de80 | 112 | outline: 0 !important; |
2efcd25d RK |
113 | } |
114 | ||
115 | .other-property-value { | |
2efcd25d RK |
116 | background-position: left center; |
117 | padding-left: 8px; | |
118 | } | |
119 | ||
2efcd25d RK |
120 | .property-content { |
121 | padding-left: 17px; | |
122 | } | |
123 | ||
dc9d5d64 RK |
124 | .theme-firebug .property-view, |
125 | .theme-firebug .property-content { | |
126 | font-family: var(--proportional-font-family); | |
127 | } | |
128 | ||
129 | .theme-firebug .property-view { | |
130 | border-bottom: 1px solid rgba(0, 0, 0, 0.1); | |
131 | } | |
132 | ||
2efcd25d | 133 | /* From skin */ |
2efcd25d RK |
134 | .expander { |
135 | visibility: hidden; | |
d0a8de80 | 136 | margin-inline-start: -12px !important; |
2efcd25d RK |
137 | } |
138 | ||
2efcd25d RK |
139 | .expandable { |
140 | visibility: visible; | |
141 | } | |
142 | ||
143 | .match { | |
144 | visibility: hidden; | |
145 | } | |
146 | ||
147 | .matchedselectors > p { | |
148 | clear: both; | |
149 | margin: 0 2px 0 0; | |
150 | padding: 2px; | |
151 | overflow-x: hidden; | |
152 | border-style: dotted; | |
153 | border-color: #A09090; | |
154 | border-width: 1px 1px 0 1px; | |
155 | } | |
156 | ||
157 | .matchedselectors > p:last-of-type { | |
158 | border-bottom-width: 1px; | |
159 | } | |
160 | ||
2efcd25d RK |
161 | .matched { |
162 | text-decoration: line-through; | |
163 | } | |
164 | ||
165 | .parentmatch { | |
166 | opacity: 0.5; | |
167 | } | |
168 | ||
d0a8de80 RK |
169 | #computedview-no-results { |
170 | height: 100%; | |
171 | } | |
172 | ||
2efcd25d RK |
173 | .onlyuserstyles { |
174 | cursor: pointer; | |
175 | } | |
176 | ||
177 | .legendKey { | |
178 | margin: 0 5px; | |
179 | } | |
180 | ||
2efcd25d RK |
181 | .link { |
182 | padding: 0 3px; | |
183 | cursor: pointer; | |
184 | float: right; | |
185 | } | |
3a0880a9 | 186 | |
ed88669c RK |
187 | /* Take away these two :visited rules to get a core dumper */ |
188 | /* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */ | |
189 | ||
190 | .link, | |
191 | .link:visited { | |
dc9d5d64 | 192 | color: #336699; |
ed88669c RK |
193 | } |
194 | ||
195 | .link, | |
196 | .helplink, | |
197 | .link:visited, | |
198 | .helplink:visited { | |
199 | text-decoration: none; | |
200 | } | |
201 | ||
202 | .link:hover { | |
203 | text-decoration: underline; | |
204 | } | |
205 | ||
3a0880a9 | 206 | .computedview-colorswatch { |
3a0880a9 | 207 | border-radius: 50%; |
5497455b RK |
208 | width: 0.9em; |
209 | height: 0.9em; | |
210 | vertical-align: middle; | |
dc9d5d64 | 211 | margin-inline-end: 5px; |
dccbbf95 | 212 | display: inline-block; |
ed88669c | 213 | position: relative; |
dccbbf95 RK |
214 | } |
215 | ||
216 | .computedview-colorswatch::before { | |
217 | content: ''; | |
218 | background-color: #9C9CFF; | |
219 | background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090), | |
220 | linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090); | |
221 | background-size: 12px 12px; | |
222 | background-position: 0 0, 6px 6px; | |
223 | position: absolute; | |
224 | border-radius: 50%; | |
ed88669c RK |
225 | top: 0; |
226 | left: 0; | |
227 | right: 0; | |
228 | bottom: 0; | |
dccbbf95 | 229 | z-index: -1; |
3a0880a9 | 230 | } |