Prettier Mocha Stats

mocha-custom.css

/* load after mocha.css */

body {
	margin: 0;
	padding: 0;
}
#mocha {
	margin: 75px 15px;
}
ul#mocha-stats {
	right: auto;
	left: 0px;
	top: 0px;
	font-size: 14px;
	padding: 10px;
	width: 100%;
	background-color: #fff;
	box-shadow: 0 0 50px 20px #eee;
}
#mocha-stats em {
	font-style: normal;
}
#mocha-stats li {
	background-color: #eee;
	padding: 0;
	padding: 4px 10px;
	border-radius: 3px;
}
#mocha-stats .progress {
	float: left;
	background-color: transparent;
	margin-bottom: -20px;
	margin-top: -6px;
	cursor: pointer;
}
#mocha-stats.failed .progress {
	opacity: 0.2;
}
#mocha-stats.failed .failures {
	font-weight: bold;
	background-color: #cc0000;
	color: #ffffff;
}
#mocha-stats.failed .failures em {
	color: #ffffff;
}

mocha-markFailed.js

// just after wherever you have mocha.run()
// add/integrate the following

var $stats = $('#mocha-stats');

var markFailed = function() {
	// probably a better way to get the failure count than from the dom
	var count = + $stats.find('.failures em').text();
	if (count > 0) $stats.addClass('failed');
}

afterEach(function () {
	markFailed();
});