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 |