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