mocha.css (5596B)
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 #mocha .test .html-error { 140 overflow: auto; 141 color: black; 142 display: block; 143 float: left; 144 clear: left; 145 font: 12px/1.5 monaco, monospace; 146 margin: 5px; 147 padding: 15px; 148 border: 1px solid #eee; 149 max-width: 85%; /*(1)*/ 150 max-width: -webkit-calc(100% - 42px); 151 max-width: -moz-calc(100% - 42px); 152 max-width: calc(100% - 42px); /*(2)*/ 153 max-height: 300px; 154 word-wrap: break-word; 155 border-bottom-color: #ddd; 156 -webkit-box-shadow: 0 1px 3px #eee; 157 -moz-box-shadow: 0 1px 3px #eee; 158 box-shadow: 0 1px 3px #eee; 159 -webkit-border-radius: 3px; 160 -moz-border-radius: 3px; 161 border-radius: 3px; 162 } 163 164 #mocha .test .html-error pre.error { 165 border: none; 166 -webkit-border-radius: 0; 167 -moz-border-radius: 0; 168 border-radius: 0; 169 -webkit-box-shadow: 0; 170 -moz-box-shadow: 0; 171 box-shadow: 0; 172 padding: 0; 173 margin: 0; 174 margin-top: 18px; 175 max-height: none; 176 } 177 178 /** 179 * (1): approximate for browsers not supporting calc 180 * (2): 42 = 2*15 + 2*10 + 2*1 (padding + margin + border) 181 * ^^ seriously 182 */ 183 #mocha .test pre { 184 display: block; 185 float: left; 186 clear: left; 187 font: 12px/1.5 monaco, monospace; 188 margin: 5px; 189 padding: 15px; 190 border: 1px solid #eee; 191 max-width: 85%; /*(1)*/ 192 max-width: -webkit-calc(100% - 42px); 193 max-width: -moz-calc(100% - 42px); 194 max-width: calc(100% - 42px); /*(2)*/ 195 word-wrap: break-word; 196 border-bottom-color: #ddd; 197 -webkit-box-shadow: 0 1px 3px #eee; 198 -moz-box-shadow: 0 1px 3px #eee; 199 box-shadow: 0 1px 3px #eee; 200 -webkit-border-radius: 3px; 201 -moz-border-radius: 3px; 202 border-radius: 3px; 203 } 204 205 #mocha .test h2 { 206 position: relative; 207 } 208 209 #mocha .test a.replay { 210 position: absolute; 211 top: 3px; 212 right: 0; 213 text-decoration: none; 214 vertical-align: middle; 215 display: block; 216 width: 15px; 217 height: 15px; 218 line-height: 15px; 219 text-align: center; 220 background: #eee; 221 font-size: 15px; 222 -webkit-border-radius: 15px; 223 -moz-border-radius: 15px; 224 border-radius: 15px; 225 -webkit-transition:opacity 200ms; 226 -moz-transition:opacity 200ms; 227 -o-transition:opacity 200ms; 228 transition: opacity 200ms; 229 opacity: 0.3; 230 color: #888; 231 } 232 233 #mocha .test:hover a.replay { 234 opacity: 1; 235 } 236 237 #mocha-report.pass .test.fail { 238 display: none; 239 } 240 241 #mocha-report.fail .test.pass { 242 display: none; 243 } 244 245 #mocha-report.pending .test.pass, 246 #mocha-report.pending .test.fail { 247 display: none; 248 } 249 #mocha-report.pending .test.pass.pending { 250 display: block; 251 } 252 253 #mocha-error { 254 color: #c00; 255 font-size: 1.5em; 256 font-weight: 100; 257 letter-spacing: 1px; 258 } 259 260 #mocha-stats { 261 position: fixed; 262 top: 15px; 263 right: 10px; 264 font-size: 12px; 265 margin: 0; 266 color: #888; 267 z-index: 1; 268 } 269 270 #mocha-stats .progress { 271 float: right; 272 padding-top: 0; 273 274 /** 275 * Set safe initial values, so mochas .progress does not inherit these 276 * properties from Bootstrap .progress (which causes .progress height to 277 * equal line height set in Bootstrap). 278 */ 279 height: auto; 280 -webkit-box-shadow: none; 281 -moz-box-shadow: none; 282 box-shadow: none; 283 background-color: initial; 284 } 285 286 #mocha-stats em { 287 color: black; 288 } 289 290 #mocha-stats a { 291 text-decoration: none; 292 color: inherit; 293 } 294 295 #mocha-stats a:hover { 296 border-bottom: 1px solid #eee; 297 } 298 299 #mocha-stats li { 300 display: inline-block; 301 margin: 0 5px; 302 list-style: none; 303 padding-top: 11px; 304 } 305 306 #mocha-stats canvas { 307 width: 40px; 308 height: 40px; 309 } 310 311 #mocha code .comment { color: #ddd; } 312 #mocha code .init { color: #2f6fad; } 313 #mocha code .string { color: #5890ad; } 314 #mocha code .keyword { color: #8a6343; } 315 #mocha code .number { color: #2f6fad; } 316 317 @media screen and (max-device-width: 480px) { 318 #mocha { 319 margin: 60px 0px; 320 } 321 322 #mocha #stats { 323 position: absolute; 324 } 325 }