OLD | NEW |
| (Empty) |
1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. | |
2 * Use of this source code is governed by a BSD-style license that can be | |
3 * found in the LICENSE file. */ | |
4 | |
5 body { | |
6 font-size: 84%; | |
7 margin: 0; | |
8 min-width: 45em; | |
9 padding: 0.75em; | |
10 } | |
11 | |
12 h1 { | |
13 color: rgb(74, 142, 230); | |
14 font-size: 110%; | |
15 font-weight: bold; | |
16 letter-spacing: -1px; | |
17 margin: 0; | |
18 padding: 0; | |
19 } | |
20 | |
21 h2 { | |
22 border-top: 1px solid rgb(58, 117, 189); | |
23 color: rgb(58, 117, 189); | |
24 font-size: 110%; | |
25 font-weight: normal; | |
26 letter-spacing: -1px; | |
27 margin: 0; | |
28 margin-left: -38px; | |
29 padding: 0.5em 1em 0.5em 38px; | |
30 } | |
31 | |
32 h2:first-child { | |
33 border-top: 0; | |
34 padding-top: 0; | |
35 } | |
36 | |
37 span.th { | |
38 padding-left: 0.35em; | |
39 } | |
40 | |
41 a { | |
42 color: black; | |
43 } | |
44 | |
45 div#header { | |
46 background: rgb(82, 150, 222); | |
47 background-size: 100%; | |
48 border: 1px solid rgb(58, 117, 189); | |
49 border-radius: 6px; | |
50 color: white; | |
51 margin-bottom: 0.75em; | |
52 overflow: hidden; | |
53 padding: 0.5em 0; | |
54 position: relative; | |
55 text-shadow: 0 0 2px black; | |
56 } | |
57 | |
58 div#header h1 { | |
59 color: white; | |
60 display: inline; | |
61 } | |
62 | |
63 div#header h1::before { | |
64 /* grit doesn't flatten -webkit-mask, so define the properties separately | |
65 * for now. */ | |
66 -webkit-mask-image: url(../../../ui/webui/resources/images/settings.svg); | |
67 -webkit-mask-position: center; | |
68 -webkit-mask-repeat: no-repeat; | |
69 -webkit-mask-size: 24px; | |
70 background-color: white; | |
71 content: ''; | |
72 display: inline-block; | |
73 height: 20px; | |
74 vertical-align: middle; | |
75 width: 37px; | |
76 } | |
77 | |
78 div#header p { | |
79 color: white; | |
80 display: inline; | |
81 font-size: 84%; | |
82 font-style: italic; | |
83 margin: 0; | |
84 padding: 0; | |
85 padding-left: 0.4em; | |
86 } | |
87 | |
88 div#header div.navigation { | |
89 font-size: 92%; | |
90 line-height: 3.5em; | |
91 position: absolute; | |
92 right: 1em; | |
93 top: 0; | |
94 } | |
95 | |
96 div#header select { | |
97 border: 1px solid rgb(58, 117, 189); | |
98 color: rgb(49, 93, 148); | |
99 font-size: 100%; | |
100 line-height: 140%; | |
101 } | |
102 | |
103 div#header select option { | |
104 padding: 0 0.2em; | |
105 } | |
106 | |
107 div#sidebar { | |
108 border-right: 1px solid #cfcfcf; | |
109 display: none; | |
110 float: left; | |
111 margin-left: 26px; | |
112 min-height: 20em; | |
113 padding: 0.75em; | |
114 padding-top: 0; | |
115 width: 45em; | |
116 } | |
117 | |
118 div#content { | |
119 margin-left: 0; | |
120 } | |
121 | |
122 hr { | |
123 display: inline; | |
124 padding: 0 0.5em; | |
125 visibility: hidden; | |
126 } | |
127 | |
128 .k { | |
129 font-weight: normal; | |
130 opacity: 0.4; | |
131 padding-left: 0.1em; | |
132 } | |
133 | |
134 .legend { | |
135 color: #7f7f7f; | |
136 font-size: 84%; | |
137 line-height: 140%; | |
138 margin-top: 2em; | |
139 padding: 0.4em 0 0; | |
140 text-align: right; | |
141 } | |
142 | |
143 .legend h3 { | |
144 color: black; | |
145 display: inline; | |
146 font-size: 100%; | |
147 font-weight: normal; | |
148 margin: 0; | |
149 padding: 0 0.5em 0 0; | |
150 } | |
151 | |
152 .legend .swatch { | |
153 display: inline-block; | |
154 height: 0.9em; | |
155 margin-right: 0.2em; | |
156 opacity: 0.66; | |
157 padding: 0 0.5em; | |
158 } | |
159 | |
160 table.list { | |
161 border-collapse: collapse; | |
162 font-size: 84%; | |
163 line-height: 200%; | |
164 table-layout: fixed; | |
165 width: 100%; | |
166 } | |
167 | |
168 table.list:not([class*='filtered']) tr:nth-child(odd) td { | |
169 background: rgb(239, 243, 255); | |
170 } | |
171 | |
172 .hidden { | |
173 display: none; | |
174 } | |
175 | |
176 table.list th { | |
177 color: black; | |
178 font-weight: bold; | |
179 padding: 0 0.5em; | |
180 vertical-align: top; | |
181 white-space: nowrap; | |
182 } | |
183 | |
184 table.list .firstRow th { | |
185 line-height: 100%; | |
186 text-align: left; | |
187 } | |
188 | |
189 table.list .secondRow * { | |
190 border-bottom: 1px solid rgb(181, 198, 222); | |
191 text-align: left; | |
192 } | |
193 | |
194 table.list td { | |
195 line-height: 1.4em; | |
196 padding: 0.35em 0.5em 0; | |
197 vertical-align: top; | |
198 } | |
199 | |
200 table.list tr td:nth-last-child(1), | |
201 table.list tr th:nth-last-child(1) { | |
202 padding-right: 1em; | |
203 } | |
204 | |
205 table.list:not([class*='filtered']) .tab .name { | |
206 padding-left: 1.5em; | |
207 } | |
208 | |
209 table.list .name { | |
210 width: 100%; | |
211 } | |
212 | |
213 table.list .name div { | |
214 height: 1.6em; | |
215 overflow: hidden; | |
216 text-overflow: ellipsis; | |
217 white-space: nowrap; | |
218 } | |
219 | |
220 table.list .pid { | |
221 text-align: right; | |
222 width: 4em; | |
223 } | |
224 | |
225 table.list .pid .th { | |
226 padding: 0; | |
227 } | |
228 | |
229 table.list .type { | |
230 width: 5em; | |
231 } | |
232 | |
233 table.list .number { | |
234 text-align: right; | |
235 width: 7em; | |
236 } | |
237 | |
238 table.list .total { | |
239 font-weight: bold; | |
240 } | |
241 | |
242 table.list .total .name { | |
243 color: rgb(49, 93, 148); | |
244 text-align: right; | |
245 } | |
246 | |
247 table.list .total td { | |
248 background: white !important; | |
249 border-top: 1px solid rgb(181, 198, 222); | |
250 } | |
251 | |
252 table.list .noResults { | |
253 display: none; | |
254 } | |
255 | |
256 table.list.noResults .noResults { | |
257 display: table-row; | |
258 } | |
259 | |
260 table.list .noResults td { | |
261 color: #3f3f3f; | |
262 padding: 3em 0; | |
263 text-align: center; | |
264 } | |
265 | |
266 table.list#browserComparison .name { | |
267 background-position: 5px center; | |
268 background-repeat: no-repeat; | |
269 padding-left: 25px; | |
270 } | |
271 | |
272 div.help { | |
273 -webkit-mask-box-image: url(../../../ui/webui/resources/images/help.svg); | |
274 background-color: rgb(66, 133, 244); | |
275 display: inline-block; | |
276 height: 16px; | |
277 margin: -1px 0 0 0; | |
278 opacity: 0.33; | |
279 vertical-align: bottom; | |
280 width: 16px; | |
281 } | |
282 | |
283 div.help:hover { | |
284 opacity: 1; | |
285 } | |
286 | |
287 div.help div { | |
288 display: none; | |
289 } | |
290 | |
291 #helpTooltip { | |
292 background: rgb(214, 232, 255); | |
293 border: 1px solid rgb(168, 207, 255); | |
294 border-radius: 0; | |
295 box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.33); | |
296 font-size: 92%; | |
297 line-height: 140%; | |
298 max-width: 30em; | |
299 padding: 0.3em 0.8em; | |
300 position: absolute; | |
301 z-index: 1000; | |
302 } | |
303 | |
304 #helpTooltip p { | |
305 margin: 0.6em 0; | |
306 } | |
307 | |
308 div.otherbrowsers { | |
309 font-size: 84%; | |
310 text-align: center; | |
311 width: 100%; | |
312 } | |
OLD | NEW |