| 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 |