| OLD | NEW |
| (Empty) |
| 1 /* Reset */ | |
| 2 body, h1, h2, h3, h4, p, pre, section { | |
| 3 margin: 0; | |
| 4 padding: 0; | |
| 5 } | |
| 6 | |
| 7 body { | |
| 8 font-family: Georgia, serif; | |
| 9 background: #eee; | |
| 10 color: #333; | |
| 11 } | |
| 12 | |
| 13 h1 { | |
| 14 font: 700 22px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', | |
| 15 sans-serif; | |
| 16 margin: 0 0 22px 0; | |
| 17 } | |
| 18 | |
| 19 h2 { | |
| 20 font: 400 28px/44px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', | |
| 21 sans-serif; | |
| 22 margin: 22px 0; | |
| 23 } | |
| 24 | |
| 25 h3 { | |
| 26 font: 600 14px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', | |
| 27 sans-serif; | |
| 28 color: #999; | |
| 29 margin: 22px 0 0 0; | |
| 30 } | |
| 31 | |
| 32 h4 { | |
| 33 font: 600 16px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', | |
| 34 sans-serif; | |
| 35 } | |
| 36 | |
| 37 p { | |
| 38 font-size: 16px; | |
| 39 line-height: 22px; | |
| 40 margin: 22px 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: hidden; | |
| 55 } | |
| 56 | |
| 57 a { | |
| 58 color: hsl(220, 50%, 50%); | |
| 59 text-decoration: none; | |
| 60 } | |
| 61 | |
| 62 a:hover { | |
| 63 color: hsl(220, 100%, 70%); | |
| 64 } | |
| 65 | |
| 66 a:visited { | |
| 67 color: hsl(270, 50%, 40%); | |
| 68 } | |
| 69 | |
| 70 hr { | |
| 71 border: none; | |
| 72 height: 1px; | |
| 73 background: #ccc; | |
| 74 margin: 22px 0 21px 0; | |
| 75 } | |
| 76 | |
| 77 hr + h2 { | |
| 78 margin-top: 21px; /* To compensate for the thickness of the hr. */ | |
| 79 } | |
| 80 | |
| 81 .content { | |
| 82 max-width: 704px; /* 32 x 22px */ | |
| 83 padding: 22px 22px; | |
| 84 background: #fff; | |
| 85 margin: 0 auto 22px auto; | |
| 86 border: solid 1px #ccc; | |
| 87 border-top: none; | |
| 88 } | |
| 89 | |
| 90 .method .doc, | |
| 91 .field .doc { | |
| 92 padding-left: 44px; | |
| 93 } | |
| 94 | |
| 95 /* Highlight members on hover so you can see which docs are for which member. */ | |
| 96 .method:hover, | |
| 97 .field:hover { | |
| 98 margin: 0 -22px; | |
| 99 border: solid 4px hsl(40, 100%, 85%); | |
| 100 padding: 0 18px; | |
| 101 border-top: none; | |
| 102 border-bottom: none; | |
| 103 } | |
| 104 | |
| 105 /* Only show the "code" link for the highlighted member. */ | |
| 106 .show-code { | |
| 107 float: right; | |
| 108 font: 600 11px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', | |
| 109 sans-serif; | |
| 110 padding-left: 6px; /* In case it gets too close to the member. */ | |
| 111 } | |
| 112 | |
| 113 .method:hover .show-code, | |
| 114 .field:hover .show-code { | |
| 115 display: inline; | |
| 116 } | |
| 117 | |
| 118 /* Only show permalinks when hovered over. */ | |
| 119 .anchor-link { | |
| 120 display: none; | |
| 121 } | |
| 122 | |
| 123 h2:hover > .anchor-link, | |
| 124 h4:hover > .anchor-link { | |
| 125 display: inline; | |
| 126 } | |
| 127 | |
| 128 /* Only show code when expanded. */ | |
| 129 pre.source { | |
| 130 display: none; | |
| 131 } | |
| 132 | |
| 133 pre.source.expanded { | |
| 134 display: block; | |
| 135 } | |
| 136 | |
| 137 /* Links that don't cause a page refresh. */ | |
| 138 .anchor-link, .anchor-link:visited, | |
| 139 .show-code, .show-code:visited { | |
| 140 color: hsl(40, 100%, 40%); | |
| 141 display: none; | |
| 142 cursor: pointer; | |
| 143 } | |
| 144 | |
| 145 .anchor-link:hover, | |
| 146 .show-code:hover { | |
| 147 color: hsl(40, 100%, 60%); | |
| 148 } | |
| 149 | |
| 150 /* Syntax highlighting. */ | |
| 151 /* Note: these correspond to the constants in classify.dart. */ | |
| 152 pre.source .e { color: hsl( 0, 100%, 70%); } /* Error */ | |
| 153 pre.source .c { color: hsl(220, 20%, 65%); } /* Comment */ | |
| 154 pre.source .i { color: hsl(220, 20%, 20%); } /* Identifier */ | |
| 155 pre.source .k { color: hsl(220, 100%, 50%); } /* Keyword */ | |
| 156 pre.source .p { color: hsl(220, 20%, 50%); } /* Punctuation */ | |
| 157 pre.source .o { color: hsl(220, 40%, 50%); } /* Operator */ | |
| 158 pre.source .s { color: hsl( 40, 90%, 40%); } /* String */ | |
| 159 pre.source .n { color: hsl( 30, 70%, 50%); } /* Number */ | |
| 160 pre.source .t { color: hsl(180, 40%, 40%); } /* Type Name */ | |
| 161 pre.source .r { color: hsl(200, 100%, 50%); } /* Special Identifier */ | |
| 162 pre.source .a { color: hsl(220, 100%, 45%); } /* Arrow */ | |
| 163 | |
| 164 /* Interpolated expressions within strings. */ | |
| 165 pre.source .si { | |
| 166 background: hsl(40, 100%, 90%); | |
| 167 } | |
| 168 | |
| 169 pre.source .s.si { background: hsl(40, 80%, 95%); } | |
| 170 pre.source .i.si { color: hsl(40, 30%, 30%); } | |
| 171 pre.source .p.si { color: hsl(40, 60%, 40%); } | |
| 172 | |
| 173 /* Enable these to debug the grid: */ | |
| 174 | |
| 175 /* | |
| 176 body { | |
| 177 background: url('grid-22.png') top left repeat; | |
| 178 } | |
| 179 | |
| 180 .content { | |
| 181 background: none; | |
| 182 } | |
| 183 | |
| 184 h1 { | |
| 185 border-left: solid 4px green; | |
| 186 } | |
| 187 | |
| 188 h2 { | |
| 189 border-left: solid 4px blue; | |
| 190 } | |
| 191 | |
| 192 h3 { | |
| 193 border-left: solid 4px red; | |
| 194 } | |
| 195 | |
| 196 h4 { | |
| 197 border-left: solid 4px orange; | |
| 198 } | |
| 199 | |
| 200 p { | |
| 201 border-left: solid 4px purple; | |
| 202 } | |
| 203 | |
| 204 section { | |
| 205 border-left: solid 4px gray; | |
| 206 } | |
| 207 */ | |
| OLD | NEW |