OLD | NEW |
| (Empty) |
1 /* Reset */ | |
2 body, h1, h2, h3, h4, li, ol, p, pre, section, ul { | |
3 margin: 0; | |
4 padding: 0; | |
5 } | |
6 | |
7 body { | |
8 font-family: Georgia, serif; | |
9 background: #e8e8e8; | |
10 color: #333; | |
11 background-image: url('body-bg.png'); | |
12 background-repeat: repeat; | |
13 } | |
14 | |
15 h2 { | |
16 font: 400 28px/44px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', | |
17 sans-serif; | |
18 } | |
19 | |
20 h3 { | |
21 font: 600 14px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', | |
22 sans-serif; | |
23 color: #999; | |
24 margin: 22px 0 0 0; | |
25 } | |
26 | |
27 h4 { | |
28 font: 600 16px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', | |
29 sans-serif; | |
30 } | |
31 | |
32 p { | |
33 font-size: 16px; | |
34 line-height: 22px; | |
35 margin: 0 0 22px 0; | |
36 } | |
37 | |
38 h3 + p { | |
39 /* Text immediately following a subheader should be snug with it. */ | |
40 margin-top: 0; | |
41 } | |
42 | |
43 strong { | |
44 font-weight: 700; | |
45 } | |
46 | |
47 pre, code { | |
48 font: 14px/22px Menlo, Monaco, Consolas, Courier, monospace; | |
49 color: hsl(220, 20%, 30%); | |
50 background: hsl(220, 20%, 95%); | |
51 margin: 22px 0; | |
52 padding: 0 4px; | |
53 border-radius: 4px; | |
54 overflow-x:auto; | |
55 overflow-y:hidden; | |
56 } | |
57 | |
58 pre > code { | |
59 padding: 0; | |
60 } | |
61 | |
62 a { | |
63 color: #15c; | |
64 text-decoration: none; | |
65 } | |
66 | |
67 a:hover { | |
68 text-decoration: underline; | |
69 } | |
70 | |
71 a:visited { | |
72 color: #15c; | |
73 } | |
74 | |
75 li { | |
76 font-size: 16px; | |
77 line-height: 22px; | |
78 } | |
79 | |
80 /* First paragraph in an li is snug, but others are spaced out. */ | |
81 li p:first-child { | |
82 margin: 0 0 0 0; | |
83 } | |
84 | |
85 li > p { | |
86 margin: 22px 0 0 0; | |
87 } | |
88 | |
89 ol, ul { | |
90 padding-left: 22px; | |
91 } | |
92 | |
93 hr { | |
94 border: none; | |
95 height: 1px; | |
96 background: #ccc; | |
97 margin: 22px 0 21px 0; | |
98 } | |
99 | |
100 hr + h2 { | |
101 margin-top: 21px; /* To compensate for the thickness of the hr. */ | |
102 } | |
103 | |
104 .page { | |
105 max-width: 1000px; | |
106 background: #fff; | |
107 margin: 0 auto 22px auto; | |
108 border: solid 1px #ccc; | |
109 border-top: none; | |
110 box-shadow: 0 0 50px #888; | |
111 | |
112 background-image: url('content-bg.png'); | |
113 background-repeat: repeat-y; | |
114 | |
115 position: relative; | |
116 } | |
117 | |
118 .header { | |
119 background: #333; | |
120 background-image: url('header-bg.png'); | |
121 height: 44px; | |
122 color: hsl(0, 0%, 50%); | |
123 font: 400 15px/44px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', | |
124 sans-serif; | |
125 } | |
126 | |
127 .header .logo { | |
128 background-image: url('dart-logo-small.png'); | |
129 width: 66px; | |
130 height: 44px; | |
131 float: left; | |
132 } | |
133 | |
134 .header a { | |
135 color: hsl(0, 0%, 80%); | |
136 } | |
137 | |
138 .header a:hover { | |
139 color: hsl(0, 0%, 100%); | |
140 } | |
141 | |
142 .header #search-box { | |
143 display: inline; | |
144 float: right; | |
145 margin-right: 11px; | |
146 } | |
147 | |
148 .search-input, .drop-down { | |
149 font: 400 13px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', | |
150 sans-serif; | |
151 width: 300px; | |
152 } | |
153 | |
154 .drop-down { | |
155 visibility: hidden; | |
156 z-index: 1000; | |
157 position: absolute; | |
158 right: 10px; | |
159 top: 36px; | |
160 border: 1px #CCC solid; | |
161 background-color: white; | |
162 -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); | |
163 -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); | |
164 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); | |
165 } | |
166 | |
167 .drop-down-table { | |
168 width: 100%; | |
169 } | |
170 | |
171 .drop-down-link-tr { | |
172 padding: 4px 0px; | |
173 cursor: pointer; | |
174 } | |
175 .drop-down-link-td { | |
176 border-bottom: 1px solid #EEE; | |
177 } | |
178 | |
179 .drop-down-link-tr:hover { | |
180 background: #EEE; | |
181 color: #333; | |
182 } | |
183 | |
184 .drop-down-link-select { | |
185 background: #15C; | |
186 color: white; | |
187 } | |
188 | |
189 .drop-down-link-select:hover { | |
190 background: #2AF; | |
191 color: white; | |
192 } | |
193 | |
194 .drop-down-link-kind, .drop-down-link-library { | |
195 font: 400 10px/10px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', | |
196 sans-serif; | |
197 } | |
198 | |
199 .drop-down-link-library { | |
200 text-align: right; | |
201 } | |
202 | |
203 .drop-down-link-highlight { | |
204 font-weight:bold; | |
205 } | |
206 | |
207 .nav { | |
208 float: left; | |
209 width: 263px; /* 12 x 22px - 1 for border */ | |
210 padding: 0 22px; | |
211 overflow: hidden; | |
212 background: #f4f4f4; | |
213 border-right: solid 1px #ccc; | |
214 } | |
215 | |
216 .nav h2 { | |
217 font: 400 16px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', | |
218 sans-serif; | |
219 margin: 0 -21px; | |
220 padding: 11px 22px; | |
221 | |
222 /* Using http://www.colorzilla.com/gradient-editor/ */ | |
223 background: -moz-linear-gradient(top, hsla(0,0%,0%,0.05) 0%, hsla(0,0%,0%,0) 1
00%); | |
224 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla
(0,0%,0%,0.05)), color-stop(100%,hsla(0,0%,0%,0))); | |
225 background: -webkit-linear-gradient(top, hsla(0,0%,0%,0.05) 0%,hsla(0,0%,0%,0)
100%); | |
226 background: -o-linear-gradient(top, hsla(0,0%,0%,0.05) 0%,hsla(0,0%,0%,0) 100%
); | |
227 background: -ms-linear-gradient(top, hsla(0,0%,0%,0.05) 0%,hsla(0,0%,0%,0) 100
%); | |
228 background: linear-gradient(top, hsla(0,0%,0%,0.05) 0%,hsla(0,0%,0%,0) 100%); | |
229 } | |
230 | |
231 ul.icon { | |
232 margin: 0 0 22px 0; | |
233 padding: 0; | |
234 } | |
235 | |
236 ul.icon li { | |
237 font: 600 13px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', | |
238 sans-serif; | |
239 list-style-type: none; | |
240 white-space: nowrap; | |
241 } | |
242 | |
243 /* Indent nested lists. */ | |
244 ul.icon ul { | |
245 margin-left: 22px; | |
246 } | |
247 | |
248 .icon-class, | |
249 .icon-exception, | |
250 .icon-interface { | |
251 display: inline-block; | |
252 width: 14px; | |
253 height: 14px; | |
254 margin: 5px 10px 0 2px; | |
255 vertical-align: top; | |
256 } | |
257 | |
258 .icon-class { background: url('class.png'); } | |
259 .icon-exception { background: url('exception.png'); } | |
260 .icon-interface { background: url('interface.png'); } | |
261 | |
262 .icon-library { | |
263 background: url('library.png'); | |
264 width: 16px; | |
265 height: 14px; | |
266 display: inline-block; | |
267 margin: 4px 8px 0 0; | |
268 vertical-align: top; | |
269 } | |
270 | |
271 .type-box { | |
272 display: inline-block; | |
273 font: 600 13px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', | |
274 sans-serif; | |
275 background: #f4f4f4; | |
276 padding: 0 6px 0 3px; | |
277 border-radius: 4px; | |
278 } | |
279 | |
280 .type-box .icon-class, | |
281 .type-box .icon-exception, | |
282 .type-box .icon-interface { | |
283 /* Make a little snugger with the text. */ | |
284 margin-right: 5px; | |
285 } | |
286 | |
287 .content { | |
288 margin-left: 308px; /* 14 x 22 */ | |
289 padding: 22px 22px; | |
290 } | |
291 | |
292 .clear { | |
293 clear: both; | |
294 } | |
295 | |
296 .footer { | |
297 max-width: 956px; /* 1000 - 22 - 22 */ | |
298 text-align: center; | |
299 margin: 22px auto; | |
300 color: #888; | |
301 } | |
302 | |
303 .footer p { | |
304 font: 400 13px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', | |
305 sans-serif; | |
306 } | |
307 | |
308 .inherited { | |
309 } | |
310 | |
311 .inherited-from { | |
312 font: 400 13px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', | |
313 sans-serif; | |
314 text-align: right; | |
315 opacity: 0.7; | |
316 } | |
317 | |
318 .inherited-from, .docs-inherited-from { | |
319 font: 400 13px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', | |
320 sans-serif; | |
321 text-align: right; | |
322 opacity: 0.7; | |
323 } | |
324 | |
325 .docs-inherited-from { | |
326 margin-top: -22px; | |
327 } | |
328 | |
329 .method .doc, | |
330 .field .doc { | |
331 padding-left: 44px; | |
332 /* Ensure there is some space between members with no documentation. */ | |
333 margin-bottom: 22px; | |
334 } | |
335 | |
336 .param { | |
337 font: 600 14px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', | |
338 sans-serif; | |
339 } | |
340 | |
341 .crossref { | |
342 font: 600 15px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', | |
343 sans-serif; | |
344 } | |
345 | |
346 .doc h1 { | |
347 font: 700 17px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', | |
348 sans-serif; | |
349 color: #666; | |
350 } | |
351 | |
352 .doc h2 { | |
353 font: 600 16px/22px 'Open Sans', 'Lucida Sans Unicode', | |
354 'Lucida Grande', sans-serif; | |
355 color: #666; | |
356 } | |
357 | |
358 /* Style external links in docs differently. */ | |
359 .doc a[href^="http:"]:after, | |
360 .doc a[href^="https:"]:after { | |
361 content: url('external-link.png'); | |
362 } | |
363 | |
364 /* Highlight members on hover so you can see which docs are for which member. */ | |
365 .method:hover, | |
366 .field:hover { | |
367 margin: 0 -22px; | |
368 border: solid 4px hsl(40, 100%, 85%); | |
369 padding: 0 18px; | |
370 border-top: none; | |
371 border-bottom: none; | |
372 } | |
373 | |
374 /* Only show the "code" link for the highlighted member. */ | |
375 .show-code, .show-inherited { | |
376 float: right; | |
377 font: 600 11px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', | |
378 sans-serif; | |
379 padding: 0 0 0 6px; /* In case it gets too close to the member. */ | |
380 border: none; | |
381 background: transparent; | |
382 margin: 0; | |
383 } | |
384 | |
385 .method:hover .show-code, | |
386 .field:hover .show-code { | |
387 display: inline; | |
388 } | |
389 | |
390 /* Only show permalinks when hovered over. */ | |
391 .anchor-link { | |
392 display: none; | |
393 } | |
394 | |
395 h2:hover > .anchor-link, | |
396 h4:hover > .anchor-link { | |
397 display: inline; | |
398 } | |
399 | |
400 /* Only show code when expanded. */ | |
401 pre.source { | |
402 display: none; | |
403 } | |
404 | |
405 pre.source.expanded { | |
406 display: block; | |
407 } | |
408 | |
409 /* Links that don't cause a page refresh. */ | |
410 .anchor-link, .anchor-link:visited, | |
411 .show-code, .show-code:visited, | |
412 .show-inherited, .show-inherited:visited { | |
413 color: hsl(40, 100%, 40%); | |
414 cursor: pointer; | |
415 } | |
416 | |
417 .anchor-link, .anchor-link:visited, | |
418 .show-code, .show-code:visited { | |
419 display: none; | |
420 } | |
421 | |
422 .anchor-link:hover, | |
423 .show-code:hover, | |
424 .show-inherited:hover { | |
425 color: hsl(40, 100%, 60%); | |
426 } | |
427 | |
428 /* Syntax highlighting. */ | |
429 /* Note: these correspond to the constants in classify.dart. */ | |
430 .doc pre .e, pre.source .e { color: hsl( 0, 100%, 70%); } /* Error */ | |
431 .doc pre .c, pre.source .c { color: hsl(220, 20%, 65%); } /* Comment */ | |
432 .doc pre .i, pre.source .i { color: hsl(220, 20%, 20%); } /* Identifier */ | |
433 .doc pre .k, pre.source .k { color: hsl(220, 100%, 50%); } /* Keyword */ | |
434 .doc pre .p, pre.source .p { color: hsl(220, 20%, 50%); } /* Punctuation */ | |
435 .doc pre .o, pre.source .o { color: hsl(220, 40%, 50%); } /* Operator */ | |
436 .doc pre .s, pre.source .s { color: hsl( 40, 90%, 40%); } /* String */ | |
437 .doc pre .n, pre.source .n { color: hsl( 30, 70%, 50%); } /* Number */ | |
438 .doc pre .t, pre.source .t { color: hsl(180, 40%, 40%); } /* Type Name */ | |
439 .doc pre .r, pre.source .r { color: hsl(200, 100%, 50%); } /* Special Identifier
*/ | |
440 .doc pre .a, pre.source .a { color: hsl(220, 100%, 45%); } /* Arrow */ | |
441 | |
442 /* Interpolated expressions within strings. */ | |
443 .doc pre .si, pre.source .si { | |
444 background: hsl(40, 100%, 90%); | |
445 } | |
446 | |
447 .doc pre .s.si, pre.source .s.si { background: hsl(40, 80%, 95%); } | |
448 .doc pre .i.si, pre.source .i.si { color: hsl(40, 30%, 30%); } | |
449 .doc pre .p.si, pre.source .p.si { color: hsl(40, 60%, 40%); } | |
450 | |
451 /* Enable these to debug the grid: */ | |
452 | |
453 /* | |
454 body { | |
455 background: -webkit-linear-gradient(top, #eee 0, #fff 10%, #fff 90%, #eee 100%
); | |
456 background-size: 22px 22px; | |
457 background-repeat: repeat; | |
458 } | |
459 | |
460 .page { | |
461 background: none; | |
462 } | |
463 | |
464 h1 { | |
465 border-left: solid 4px green; | |
466 } | |
467 | |
468 h2 { | |
469 border-left: solid 4px blue; | |
470 } | |
471 | |
472 h3 { | |
473 border-left: solid 4px red; | |
474 } | |
475 | |
476 h4 { | |
477 border-left: solid 4px orange; | |
478 } | |
479 | |
480 p { | |
481 border-left: solid 4px purple; | |
482 } | |
483 | |
484 section { | |
485 border-left: solid 4px gray; | |
486 } | |
487 */ | |
OLD | NEW |