OLD | NEW |
| (Empty) |
1 @charset "utf-8"; | |
2 | |
3 body { | |
4 margin:0; | |
5 } | |
6 | |
7 #mocha { | |
8 font: 20px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; | |
9 margin: 60px 50px; | |
10 } | |
11 | |
12 #mocha ul, | |
13 #mocha li { | |
14 margin: 0; | |
15 padding: 0; | |
16 } | |
17 | |
18 #mocha ul { | |
19 list-style: none; | |
20 } | |
21 | |
22 #mocha h1, | |
23 #mocha h2 { | |
24 margin: 0; | |
25 } | |
26 | |
27 #mocha h1 { | |
28 margin-top: 15px; | |
29 font-size: 1em; | |
30 font-weight: 200; | |
31 } | |
32 | |
33 #mocha h1 a { | |
34 text-decoration: none; | |
35 color: inherit; | |
36 } | |
37 | |
38 #mocha h1 a:hover { | |
39 text-decoration: underline; | |
40 } | |
41 | |
42 #mocha .suite .suite h1 { | |
43 margin-top: 0; | |
44 font-size: .8em; | |
45 } | |
46 | |
47 #mocha .hidden { | |
48 display: none; | |
49 } | |
50 | |
51 #mocha h2 { | |
52 font-size: 12px; | |
53 font-weight: normal; | |
54 cursor: pointer; | |
55 } | |
56 | |
57 #mocha .suite { | |
58 margin-left: 15px; | |
59 } | |
60 | |
61 #mocha .test { | |
62 margin-left: 15px; | |
63 overflow: hidden; | |
64 } | |
65 | |
66 #mocha .test.pending:hover h2::after { | |
67 content: '(pending)'; | |
68 font-family: arial, sans-serif; | |
69 } | |
70 | |
71 #mocha .test.pass.medium .duration { | |
72 background: #c09853; | |
73 } | |
74 | |
75 #mocha .test.pass.slow .duration { | |
76 background: #b94a48; | |
77 } | |
78 | |
79 #mocha .test.pass::before { | |
80 content: '✓'; | |
81 font-size: 12px; | |
82 display: block; | |
83 float: left; | |
84 margin-right: 5px; | |
85 color: #00d6b2; | |
86 } | |
87 | |
88 #mocha .test.pass .duration { | |
89 font-size: 9px; | |
90 margin-left: 5px; | |
91 padding: 2px 5px; | |
92 color: #fff; | |
93 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.2); | |
94 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.2); | |
95 box-shadow: inset 0 1px 1px rgba(0,0,0,.2); | |
96 -webkit-border-radius: 5px; | |
97 -moz-border-radius: 5px; | |
98 -ms-border-radius: 5px; | |
99 -o-border-radius: 5px; | |
100 border-radius: 5px; | |
101 } | |
102 | |
103 #mocha .test.pass.fast .duration { | |
104 display: none; | |
105 } | |
106 | |
107 #mocha .test.pending { | |
108 color: #0b97c4; | |
109 } | |
110 | |
111 #mocha .test.pending::before { | |
112 content: '◦'; | |
113 color: #0b97c4; | |
114 } | |
115 | |
116 #mocha .test.fail { | |
117 color: #c00; | |
118 } | |
119 | |
120 #mocha .test.fail pre { | |
121 color: black; | |
122 } | |
123 | |
124 #mocha .test.fail::before { | |
125 content: '✖'; | |
126 font-size: 12px; | |
127 display: block; | |
128 float: left; | |
129 margin-right: 5px; | |
130 color: #c00; | |
131 } | |
132 | |
133 #mocha .test pre.error { | |
134 color: #c00; | |
135 max-height: 300px; | |
136 overflow: auto; | |
137 } | |
138 | |
139 /** | |
140 * (1): approximate for browsers not supporting calc | |
141 * (2): 42 = 2*15 + 2*10 + 2*1 (padding + margin + border) | |
142 * ^^ seriously | |
143 */ | |
144 #mocha .test pre { | |
145 display: block; | |
146 float: left; | |
147 clear: left; | |
148 font: 12px/1.5 monaco, monospace; | |
149 margin: 5px; | |
150 padding: 15px; | |
151 border: 1px solid #eee; | |
152 max-width: 85%; /*(1)*/ | |
153 max-width: calc(100% - 42px); /*(2)*/ | |
154 word-wrap: break-word; | |
155 border-bottom-color: #ddd; | |
156 -webkit-border-radius: 3px; | |
157 -webkit-box-shadow: 0 1px 3px #eee; | |
158 -moz-border-radius: 3px; | |
159 -moz-box-shadow: 0 1px 3px #eee; | |
160 border-radius: 3px; | |
161 } | |
162 | |
163 #mocha .test h2 { | |
164 position: relative; | |
165 } | |
166 | |
167 #mocha .test a.replay { | |
168 position: absolute; | |
169 top: 3px; | |
170 right: 0; | |
171 text-decoration: none; | |
172 vertical-align: middle; | |
173 display: block; | |
174 width: 15px; | |
175 height: 15px; | |
176 line-height: 15px; | |
177 text-align: center; | |
178 background: #eee; | |
179 font-size: 15px; | |
180 -moz-border-radius: 15px; | |
181 border-radius: 15px; | |
182 -webkit-transition: opacity 200ms; | |
183 -moz-transition: opacity 200ms; | |
184 transition: opacity 200ms; | |
185 opacity: 0.3; | |
186 color: #888; | |
187 } | |
188 | |
189 #mocha .test:hover a.replay { | |
190 opacity: 1; | |
191 } | |
192 | |
193 #mocha-report.pass .test.fail { | |
194 display: none; | |
195 } | |
196 | |
197 #mocha-report.fail .test.pass { | |
198 display: none; | |
199 } | |
200 | |
201 #mocha-report.pending .test.pass, | |
202 #mocha-report.pending .test.fail { | |
203 display: none; | |
204 } | |
205 #mocha-report.pending .test.pass.pending { | |
206 display: block; | |
207 } | |
208 | |
209 #mocha-error { | |
210 color: #c00; | |
211 font-size: 1.5em; | |
212 font-weight: 100; | |
213 letter-spacing: 1px; | |
214 } | |
215 | |
216 #mocha-stats { | |
217 position: fixed; | |
218 top: 15px; | |
219 right: 10px; | |
220 font-size: 12px; | |
221 margin: 0; | |
222 color: #888; | |
223 z-index: 1; | |
224 } | |
225 | |
226 #mocha-stats .progress { | |
227 float: right; | |
228 padding-top: 0; | |
229 } | |
230 | |
231 #mocha-stats em { | |
232 color: black; | |
233 } | |
234 | |
235 #mocha-stats a { | |
236 text-decoration: none; | |
237 color: inherit; | |
238 } | |
239 | |
240 #mocha-stats a:hover { | |
241 border-bottom: 1px solid #eee; | |
242 } | |
243 | |
244 #mocha-stats li { | |
245 display: inline-block; | |
246 margin: 0 5px; | |
247 list-style: none; | |
248 padding-top: 11px; | |
249 } | |
250 | |
251 #mocha-stats canvas { | |
252 width: 40px; | |
253 height: 40px; | |
254 } | |
255 | |
256 #mocha code .comment { color: #ddd; } | |
257 #mocha code .init { color: #2f6fad; } | |
258 #mocha code .string { color: #5890ad; } | |
259 #mocha code .keyword { color: #8a6343; } | |
260 #mocha code .number { color: #2f6fad; } | |
261 | |
262 @media screen and (max-device-width: 480px) { | |
263 #mocha { | |
264 margin: 60px 0px; | |
265 } | |
266 | |
267 #mocha #stats { | |
268 position: absolute; | |
269 } | |
270 } | |
OLD | NEW |