Diff stat improvements (#13954)

* Diff stat improvements

- Combine number to just total number of changes
- Add tooltip over stats bar
- Increase contrast on file name
- Refactor classes and CSS to be more reusable

* misc tweaks

* make count bold

1 files changed, 19 insertions, 32 deletions

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 1cedb07f12..8876dcdcb0 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -1563,29 +1563,8 @@
     display: flex;
     align-items: center;
 
-    .count {
-      margin-right: 12px;
-      font-size: 13px;
-      flex: 0 0 auto;
-
-      .bar {
-        background-color: var(--color-red);
-        height: 12px;
-        width: 40px;
-        display: inline-block;
-        margin: 2px 4px 0;
-        vertical-align: text-top;
-
-        .add {
-          background-color: var(--color-green);
-          height: 12px;
-        }
-      }
-    }
-
     .file {
       flex: 1;
-      color: var(--color-text-light-2);
       word-break: break-all;
     }
 
@@ -1768,17 +1747,6 @@
       border-bottom: 1px dashed #dddddd;
       padding-left: 6px;
     }
-
-    .diff-counter {
-      margin-right: 15px;
-
-      .del {
-        color: var(--color-red);
-      }
-      .add {
-        color: var(--color-green);
-      }
-    }
   }
 
   .repo-search-result {
@@ -3142,6 +3110,25 @@ td.blob-excerpt {
   border-radius: var(--border-radius) !important;
 }
 
+.diff-counter {
+  font-weight: 600;
+  margin-right: 8px;
+}
+
+.diff-stats-bar {
+  display: inline-block;
+  background-color: var(--color-red);
+  height: 12px;
+  width: 40px;
+  position: relative;
+  top: 2px;
+
+  .diff-stats-add-bar {
+    background-color: var(--color-green);
+    height: 100%;
+  }
+}
+
 /* prevent page shaking on language bar click */
 .repository-summary-language-stats {
   height: 48px;