| 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 |