Update design of statistics page

Author: Kristan Kenney

web/css/src/themes/dark.css

@@ -227,6 +227,10 @@ a {
 .l-stat__col {
 }
 
+.l-stat__col li {
+  color: #b7b7b7 !important;
+}
+
 .l-stat__col a {
   border-bottom: 4px solid #282828;
   background-color: #282828;
@@ -1480,6 +1484,35 @@ form#vstobjects.suspended {
   border-right: 1px solid transparent !important;
 }
 
+.l-percent {
+  border-bottom: 2px solid #585858 !important;
+}
+
+.body-stats .l-unit__name {
+  color: #eee !important;
+}
+
+.statistics-count {
+  border-bottom: 1px dotted #707070;
+  border-right: 1px dotted #707070;
+}
+
+.body-stats .units .l-unit {
+  background-color: #282828 !important;
+  border-bottom: 1px solid #404040 !important;
+  border-left: 1px solid #282828 !important;
+  border-right: 1px solid #282828 !important;
+}
+
+.body-stats .units:hover .l-unit:hover {
+  background-color: #303030 !important;
+  color: #fff !important;
+}
+
+.body-stats .units:hover .l-unit:hover b,.body-stats .units:hover .l-unit:hover strong  {
+  color: #fff !important;
+}
+
 @media screen and (max-width: 950px) {
   .helper-container {
     display: none;

web/css/src/themes/default.css

@@ -621,6 +621,10 @@ a {
   font-size: 0.85em;
 }
 
+.text-italic {
+  font-style: italic;
+}
+
 .check-label {
   display: inline-block;
   cursor: pointer;
@@ -1911,6 +1915,12 @@ div.l-content > div.l-separator:nth-of-type(4) {
   padding-bottom: 15px;
 }
 
+.body-stats .l-unit__name {
+  margin-left: -42px;
+  margin-top: 12px;
+  color: #606060;
+}
+
 .l-unit__name.small {
   font-size: 16px;
 }
@@ -1956,7 +1966,13 @@ div.l-content > div.l-separator:nth-of-type(4) {
 
 .l-unit__stats {
   margin-bottom: 10px;
-  margin-left: 12%;
+  margin-left: 15%;
+  border-left: 1px solid transparent !important;
+  border-right: 1px solid transparent !important;
+}
+
+.lang-ar .l-unit__stats {
+  margin-left: 20%;
 }
 
 .l-unit__stats:hover {
@@ -1969,12 +1985,25 @@ div.l-content > div.l-separator:nth-of-type(4) {
 .l-unit__stats table {
   width: 100%;
   table-layout: fixed;
+  margin-top: -54px;
+  margin-left: -20px;
 }
 
 .l-unit__stats td {
-  height: 22px;
-  padding-bottom: 3px;
-  vertical-align: top;
+  height: 32px;
+  padding-bottom: 4px;
+  vertical-align: middle;
+}
+.body-stats .l-unit__stat-col--left {
+  width: 130px;
+}
+
+.l-unit__stat-col.l-unit__stat-col--left.text-right.icon-pad-right.text-italic {
+  width: 180px;
+}
+
+.body-stats .l-unit__stat-col--right {
+  float: right;
 }
 
 .l-unit__stat-col--left a, .l-unit__stat-col--left a:visited {
@@ -2300,25 +2329,33 @@ body.mobile .l-icon-shortcuts {
 }
 
 .l-unit__stat-cols.graph {
-  width: 200px;
+  width: 242px;
 }
 
 .l-unit__stat-cols.tiny {
-  font-size:11px;
-  line-height: 19px;
+  font-size: 12px;
+  line-height: 18px;
 }
 
 .l-percent {
-  border-bottom: 1px dotted #ccc;
-  margin-top: 1px;
-  width: 200px;
+  border-bottom: 3px solid #e6e6e6;
+  margin-top: 2px;
+  width: 242px;
 }
 
 .l-percent__fill {
-  background-color: #aacc0d;
+  background-color: #54e000;
   height: 3px;
   position: relative;
-  bottom: -1px;
+  bottom: -3px;
+}
+
+.statistics-count {
+  min-width: 24px;
+  text-align: right;
+  border-bottom: 1px dotted #ddd;
+  border-right: 1px dotted #ddd;
+  padding-right: 4px;
 }
 
 .to-top {