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