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