mocha.less

.mochaTestReport {
  font: 20px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;

  ul, li {
      margin: 0;
      padding: 0;
  }

  ul {
      list-style: none;
  }

  h1,  h2 {
      margin: 0;
  }

  h1 {
      margin-top: 15px;
      font-size: 1em;
      font-weight: 200;
  }

  h1 a {
      text-decoration: none;
      color: inherit;
  }

  h1 a:hover {
      text-decoration: underline;
  }

  .suite .suite h1 {
      margin-top: 0;
      font-size: .8em;
  }

  .hidden {
      display: none;
  }

  h2 {
      font-size: 12px;
      font-weight: normal;
      cursor: pointer;
  }

  .suite {
      margin-left: 15px;
  }

  .test {
      margin-left: 15px;
      overflow: hidden;
  }

  .test.pending:hover h2::after {
      content: '(pending)';
      font-family: arial;
  }

  .test.pass.medium .duration {
      background: #C09853;
  }

  .test.pass.slow .duration {
      background: #B94A48;
  }

  .test.pass::before {
      content: '✓';
      font-size: 12px;
      display: block;
      float: left;
      margin-right: 5px;
      color: #00d6b2;
  }

  .test.pass .duration {
      font-size: 9px;
      margin-left: 5px;
      padding: 2px 5px;
      color: white;
      -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
      -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
      box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      -ms-border-radius: 5px;
      -o-border-radius: 5px;
      border-radius: 5px;
  }

  .test.pass.fast .duration {
      display: none;
  }

  .test.pending {
      color: #0b97c4;
  }

  .test.pending::before {
      content: '◦';
      color: #0b97c4;
  }

  .test.fail {
      color: #c00;
  }

  .test.fail pre {
      color: black;
  }

  .test.fail::before {
      content: '✖';
      font-size: 12px;
      display: block;
      float: left;
      margin-right: 5px;
      color: #c00;
  }

  .test pre.error {
      color: #c00;
      max-height: 300px;
      overflow: auto;
  }

  .test pre {
      display: block;
      float: left;
      clear: left;
      font: 12px/1.5 monaco, monospace;
      margin: 5px;
      padding: 15px;
      border: 1px solid #eee;
      border-bottom-color: #ddd;
      -webkit-border-radius: 3px;
      -webkit-box-shadow: 0 1px 3px #eee;
      -moz-border-radius: 3px;
      -moz-box-shadow: 0 1px 3px #eee;
  }

  .test h2 {
      position: relative;
  }

  .test a.replay {
      position: absolute;
      top: 3px;
      right: 0;
      text-decoration: none;
      vertical-align: middle;
      display: block;
      width: 15px;
      height: 15px;
      line-height: 15px;
      text-align: center;
      background: #eee;
      font-size: 15px;
      -moz-border-radius: 15px;
      border-radius: 15px;
      -webkit-transition: opacity 200ms;
      -moz-transition: opacity 200ms;
      transition: opacity 200ms;
      opacity: 0.3;
      color: #888;
  }

  .test:hover a.replay {
      opacity: 1;
  }

  #mocha-report.pass .test.fail {
      display: none;
  }

  #mocha-report.fail .test.pass {
      display: none;
  }

  #mocha-error {
      color: #c00;
      font-size: 1.5  em;
      font-weight: 100;
      letter-spacing: 1px;
  }

  #mocha-stats {
      position: fixed;
      top: 15px;
      right: 10px;
      font-size: 12px;
      margin: 0;
      color: #888;
  }

  #mocha-stats .progress {
      float: right;
      padding-top: 0;
  }

  #mocha-stats em {
      color: black;
  }

  #mocha-stats a {
      text-decoration: none;
      color: inherit;
  }

  #mocha-stats a:hover {
      border-bottom: 1px solid #eee;
  }

  #mocha-stats li {
      display: inline-block;
      margin: 0 5px;
      list-style: none;
      padding-top: 11px;
  }

  #mocha-stats canvas {
      width: 40px;
      height: 40px;
  }

  code .comment { color: #ddd }
  code .init { color: #2F6FAD }
  code .string { color: #5890AD }
  code .keyword { color: #8A6343 }
  code .number { color: #2F6FAD }
}