css: apply some dracula magic

src/css/style.css

@@ -30,32 +30,37 @@ table td {
 
 .bg-success,
 .text-success .propagationBox {
-	background: #7bcc3a;
+	background: #50fa7b;
 }
 
 .bg-info,
 .text-info .propagationBox {
-	background: #10a0de;
+	background: #8be9fd;
+}
+
+.bg-highlight,
+.text-highlight .propagationBox {
+	background: #bd93f9;
 }
 
 .bg-warning,
 .text-warning .propagationBox {
-	background: #FFD162;
+	background: #f1fa8c;
 }
 
 .bg-orange,
 .text-orange .propagationBox {
-	background: #ff8a00;
+	background: #ffb86c;
 }
 
 .bg-danger,
 .text-danger .propagationBox {
-	background: #F74B4B;
+	background: #ff5555;
 }
 
 .text-gray .propagationBox {
 	background: none !important;
-	border: 1px solid #777;
+	border: 1px solid #f8f8f2;
 }
 
 .bg-success,
@@ -67,11 +72,11 @@ table td {
 }
 
 .text-gray {
-	color: #777 !important;
+	color: #f8f8f2 !important;
 }
 
 .text-orange {
-	color: #ff8a00;
+	color: #ffb86c;
 }
 
 .container-fluid {
@@ -180,7 +185,7 @@ span.small-title span.small {
 	letter-spacing: -0.1px;
 	text-transform: none;
 	white-space: nowrap;
-	color: #777;
+	color: #f8f8f2;
 }
 
 .blocks-holder .block-count {
@@ -455,7 +460,7 @@ svg .axis line {
 	shape-rendering: crispEdges;
 }
 svg .axis text {
-	fill: #777;
+	fill: #f8f8f2;
 	font-size: 10px;
 	letter-spacing: 0px;
 	font-family: "Source Sans Pro";
@@ -466,4 +471,4 @@ svg .axis text {
 
 svg .y.axis .tick:first-child text {
 	opacity: 0;
-}
+}

src/js/directives.js

@@ -166,11 +166,11 @@ angular.module('netStatsApp.directives', [])
 							tooltipSuffix: '',
 							chartRangeMax: 8000,
 							colorMap: jQuery.range_map({
-								'0:1': '#10a0de',
+								'0:1': '#8be9fd',
-								'1:1000': '#7bcc3a',
+								'1:1000': '#50fa7b',
-								'1001:3000': '#FFD162',
+								'1001:3000': '#f1fa8c',
-								'3001:7000': '#ff8a00',
+								'3001:7000': '#ffb86c',
-								'7001:': '#F74B4B'
+								'7001:': '#ff5555'
 							}),
 							tooltipFormatter: function (spark, opt, ms) {
 								var tooltip = '<div class="tooltip-arrow"></div><div class="tooltip-inner">';
@@ -219,11 +219,11 @@ angular.module('netStatsApp.directives', [])
 						width: width,
 						height: 242,
 						fills: {
-							success: '#7BCC3A',
+							success: '#50fa7b',
-							info: '#10A0DE',
+							info: '#8be9fd',
-							warning: '#FFD162',
+							warning: '#f1fa8c',
-							orange: '#FF8A00',
+							orange: '#ffb86c',
-							danger: '#F74B4B',
+							danger: '#ff5555',
 							defaultFill: '#282828'
 						},
 						geographyConfig: {
@@ -315,7 +315,7 @@ angular.module('netStatsApp.directives', [])
 
 				var color = d3.scale.linear()
 					.domain([1000, 3000, 7000, 10000])
-					.range(["#7bcc3a", "#FFD162", "#ff8a00", "#F74B4B"]);
+					.range(["#50fa7b", "#f1fa8c", "#ffb86c", "#ff5555"]);
 
 				var xAxis = d3.svg.axis()
 					.scale(x)

src/js/script.js

@@ -12,11 +12,11 @@
 	$.fn.sparkline.defaults.bar.tooltipOffsetX = 0;
 	$.fn.sparkline.defaults.bar.tooltipFormat = $.spformat('<div class="tooltip-arrow"></div><div class="tooltip-inner">{{prefix}}{{value}} {{suffix}}</div>');
 	$.fn.sparkline.defaults.bar.colorMap = $.range_map({
-		'0:6': '#10a0de',
+		'0:6': '#8be9fd',
-		'6:15': '#7bcc3a',
+		'6:15': '#50fa7b',
-		'15:40': '#FFD162',
+		'15:40': '#f1fa8c',
-		'40:60': '#ff8a00',
+		'40:60': '#ffb86c',
-		'60:': '#F74B4B'
+		'60:': '#ff5555'
 	});
 
 	moment.relativeTimeThreshold('s', 60);

src/views/index.jade

@@ -38,7 +38,7 @@ block content
             span.big-details {{ bestStats.gasPrice.toString() | gasPriceFilter }}
           div.clearfix
       div.col-xs-2.stat-holder
-        div.big-info.gasprice.text-info
+        div.big-info.gasprice.text-highlight
           div.pull-left.icon-full-width
             i.icon-difficulty
           div.big-details-holder
@@ -88,7 +88,7 @@ block content
           div.clearfix
       div.col-xs-2.stat-holder.xpull-right
         div.big-info.chart.xdouble-chart.text-danger
-          i.icon-hashrate
+          //- i.icon-hashrate
           span.small-title last blocks miners
           div.blocks-holder(ng-repeat='miner in miners track by miner.miner', data-toggle="tooltip", data-placement="right", data-original-title="{{miner.blocks}}")
             div.block-count(class="{{miner.blocks | minerBlocksClass : 'text-'}}") {{miner.blocks}}