From 79d2b3bffecb0f2d7d76dcc34ba6a6fa3166e397 Mon Sep 17 00:00:00 2001
From: Vrifox <gitea@vrifox.cc>
Date: Tue, 6 Oct 2020 22:15:18 +0200
Subject: [PATCH] added styles to repository: diff stats

---
 public/css/theme-gitea-vrifox-backend.css  |  49 +++--
 public/css/theme-gitea-vrifox-frontend.css |  61 +++---
 source/partials/repository.scss            | 227 ++++++++++++---------
 3 files changed, 195 insertions(+), 142 deletions(-)

diff --git a/public/css/theme-gitea-vrifox-backend.css b/public/css/theme-gitea-vrifox-backend.css
index c336a6e..00e99b4 100644
--- a/public/css/theme-gitea-vrifox-backend.css
+++ b/public/css/theme-gitea-vrifox-backend.css
@@ -453,61 +453,76 @@ body > .full.height::first-line,
       background: #3c3c5a;
       color: white; }
 
-.repository.diff .container .diff-detail-box {
+.repository.diff .container div .diff-detail-box {
   background: #32324b;
   color: #f5f5ff;
   padding: 10px; }
-  .repository.diff .container .diff-detail-box .button {
+  .repository.diff .container div .diff-detail-box .button {
     background: #464669;
     color: #f5f5ff; }
-    .repository.diff .container .diff-detail-box .button:hover {
+    .repository.diff .container div .diff-detail-box .button:hover {
       background: #3c3c5a; }
-    .repository.diff .container .diff-detail-box .button .menu {
+    .repository.diff .container div .diff-detail-box .button .menu {
       background: #464669;
       border: 1px solid #3c3c5a;
       box-shadow: none; }
-      .repository.diff .container .diff-detail-box .button .menu .item {
+      .repository.diff .container div .diff-detail-box .button .menu .item {
         color: #f5f5ff; }
-        .repository.diff .container .diff-detail-box .button .menu .item:hover {
+        .repository.diff .container div .diff-detail-box .button .menu .item:hover {
           background: #3c3c5a; }
 
-.repository.diff .container .diff-file-box .diff-file-header .diff-counter .bar {
+.repository.diff .container div .diff-stats.detail-files {
+  background: #1e1e2d;
+  border-radius: 0 0 5px 5px;
+  margin: 0 0 10px 0; }
+  .repository.diff .container div .diff-stats.detail-files li {
+    border-bottom: 1px dashed #3c3c5a; }
+    .repository.diff .container div .diff-stats.detail-files li:last-of-type {
+      border-bottom: 0;
+      margin-bottom: 0;
+      padding-bottom: 0; }
+    .repository.diff .container div .diff-stats.detail-files li .diff-counter .add {
+      color: #64c882; }
+    .repository.diff .container div .diff-stats.detail-files li .diff-counter .del {
+      color: #ff8282; }
+
+.repository.diff .container div .diff-file-box .diff-file-header .diff-counter .bar {
   background: #ff8282; }
-  .repository.diff .container .diff-file-box .diff-file-header .diff-counter .bar .pull-left.add {
+  .repository.diff .container div .diff-file-box .diff-file-header .diff-counter .bar .pull-left.add {
     background: #64c882; }
 
-.repository.diff .container .diff-file-box .diff-file-header .file {
+.repository.diff .container div .diff-file-box .diff-file-header .file {
   color: #f5f5ff; }
 
-.repository.diff .container .diff-file-box .diff-file-header .button {
+.repository.diff .container div .diff-file-box .diff-file-header .button {
   background: #505078;
   box-shadow: none;
   color: #f5f5ff; }
-  .repository.diff .container .diff-file-box .diff-file-header .button:hover {
+  .repository.diff .container div .diff-file-box .diff-file-header .button:hover {
     background: #464669; }
 
-.repository.diff .container .diff-file-box .diff-file-body .file-body table tbody .tag-code td {
+.repository.diff .container div .diff-file-box .diff-file-body .file-body table tbody .tag-code td {
   background: #1e1e2d !important;
   border-color: #3c3c5a !important;
   color: white; }
 
-.repository.diff .container .diff-file-box .diff-file-body .file-body table tbody .same-code td {
+.repository.diff .container div .diff-file-box .diff-file-body .file-body table tbody .same-code td {
   background: #1e1e2d !important;
   border-color: #3c3c5a !important;
   color: white; }
 
-.repository.diff .container .diff-file-box .diff-file-body .file-body table tbody .del-code td {
+.repository.diff .container div .diff-file-box .diff-file-body .file-body table tbody .del-code td {
   background: #ff8282 !important;
   border-color: #ff6464 !important;
   color: white; }
-  .repository.diff .container .diff-file-box .diff-file-body .file-body table tbody .del-code td .removed-code {
+  .repository.diff .container div .diff-file-box .diff-file-body .file-body table tbody .del-code td .removed-code {
     background: #ff6e6e; }
 
-.repository.diff .container .diff-file-box .diff-file-body .file-body table tbody .add-code td {
+.repository.diff .container div .diff-file-box .diff-file-body .file-body table tbody .add-code td {
   background: #64c882 !important;
   border-color: #64dc78 !important;
   color: white; }
-  .repository.diff .container .diff-file-box .diff-file-body .file-body table tbody .add-code td .added-code {
+  .repository.diff .container div .diff-file-box .diff-file-body .file-body table tbody .add-code td .added-code {
     background: #50b46e; }
 
 /* repository: files */
diff --git a/public/css/theme-gitea-vrifox-frontend.css b/public/css/theme-gitea-vrifox-frontend.css
index 3ac276d..ae128d6 100644
--- a/public/css/theme-gitea-vrifox-frontend.css
+++ b/public/css/theme-gitea-vrifox-frontend.css
@@ -516,78 +516,93 @@ body > .full.height::first-line,
       background: #3c3c5a;
       color: white; }
 
-.repository.diff .container .diff-detail-box {
+.repository.diff .container div .diff-detail-box {
   background: #32324b;
   color: #f5f5ff;
   padding: 10px; }
-  .repository.diff .container .diff-detail-box .button {
+  .repository.diff .container div .diff-detail-box .button {
     background: #464669;
     color: #f5f5ff; }
-    .repository.diff .container .diff-detail-box .button:hover {
+    .repository.diff .container div .diff-detail-box .button:hover {
       background: #3c3c5a; }
-      .repository.diff .container .diff-detail-box .button:hover .menu {
+      .repository.diff .container div .diff-detail-box .button:hover .menu {
         display: block; }
-    .repository.diff .container .diff-detail-box .button.dropdown {
+    .repository.diff .container div .diff-detail-box .button.dropdown {
       padding-right: 37px; }
-      .repository.diff .container .diff-detail-box .button.dropdown::after {
+      .repository.diff .container div .diff-detail-box .button.dropdown::after {
         content: '⏷';
         position: absolute;
         right: 17px;
         top: 10px;
         font-size: 11px;
         color: #d7d7e1; }
-    .repository.diff .container .diff-detail-box .button .dropdown.icon {
+    .repository.diff .container div .diff-detail-box .button .dropdown.icon {
       display: none; }
-    .repository.diff .container .diff-detail-box .button .menu {
+    .repository.diff .container div .diff-detail-box .button .menu {
       background: #464669;
       border: 1px solid #3c3c5a;
       box-shadow: none; }
-      .repository.diff .container .diff-detail-box .button .menu .item {
+      .repository.diff .container div .diff-detail-box .button .menu .item {
         color: #f5f5ff; }
-        .repository.diff .container .diff-detail-box .button .menu .item:hover {
+        .repository.diff .container div .diff-detail-box .button .menu .item:hover {
           background: #3c3c5a; }
-        .repository.diff .container .diff-detail-box .button .menu .item[data-target*="#diff-files"] {
+        .repository.diff .container div .diff-detail-box .button .menu .item[data-target*="#diff-files"] {
           display: none; }
-  .repository.diff .container .diff-detail-box.diff-stats {
+  .repository.diff .container div .diff-detail-box.diff-stats {
     display: block; }
 
-.repository.diff .container .diff-file-box .diff-file-header .diff-counter .bar {
+.repository.diff .container div .diff-stats.detail-files {
+  background: #1e1e2d;
+  border-radius: 0 0 5px 5px;
+  margin: 0 0 10px 0; }
+  .repository.diff .container div .diff-stats.detail-files li {
+    border-bottom: 1px dashed #3c3c5a; }
+    .repository.diff .container div .diff-stats.detail-files li:last-of-type {
+      border-bottom: 0;
+      margin-bottom: 0;
+      padding-bottom: 0; }
+    .repository.diff .container div .diff-stats.detail-files li .diff-counter .add {
+      color: #64c882; }
+    .repository.diff .container div .diff-stats.detail-files li .diff-counter .del {
+      color: #ff8282; }
+
+.repository.diff .container div .diff-file-box .diff-file-header .diff-counter .bar {
   background: #ff8282; }
-  .repository.diff .container .diff-file-box .diff-file-header .diff-counter .bar .pull-left.add {
+  .repository.diff .container div .diff-file-box .diff-file-header .diff-counter .bar .pull-left.add {
     background: #64c882; }
 
-.repository.diff .container .diff-file-box .diff-file-header .file {
+.repository.diff .container div .diff-file-box .diff-file-header .file {
   color: #f5f5ff; }
 
-.repository.diff .container .diff-file-box .diff-file-header .button {
+.repository.diff .container div .diff-file-box .diff-file-header .button {
   background: #505078;
   box-shadow: none;
   color: #f5f5ff; }
-  .repository.diff .container .diff-file-box .diff-file-header .button:hover {
+  .repository.diff .container div .diff-file-box .diff-file-header .button:hover {
     background: #464669; }
 
-.repository.diff .container .diff-file-box .diff-file-body .file-body table tbody .tag-code td {
+.repository.diff .container div .diff-file-box .diff-file-body .file-body table tbody .tag-code td {
   background: #1e1e2d !important;
   border-color: #3c3c5a !important;
   color: white; }
 
-.repository.diff .container .diff-file-box .diff-file-body .file-body table tbody .same-code td {
+.repository.diff .container div .diff-file-box .diff-file-body .file-body table tbody .same-code td {
   background: #1e1e2d !important;
   border-color: #3c3c5a !important;
   color: white; }
 
-.repository.diff .container .diff-file-box .diff-file-body .file-body table tbody .del-code td {
+.repository.diff .container div .diff-file-box .diff-file-body .file-body table tbody .del-code td {
   background: #ff8282 !important;
   border-color: #ff6464 !important;
   color: white; }
-  .repository.diff .container .diff-file-box .diff-file-body .file-body table tbody .del-code td .removed-code {
+  .repository.diff .container div .diff-file-box .diff-file-body .file-body table tbody .del-code td .removed-code {
     background: #ff6e6e; }
 
-.repository.diff .container .diff-file-box .diff-file-body .file-body table tbody .add-code td {
+.repository.diff .container div .diff-file-box .diff-file-body .file-body table tbody .add-code td {
   background: #64c882 !important;
   border-color: #64dc78 !important;
   color: white; }
-  .repository.diff .container .diff-file-box .diff-file-body .file-body table tbody .add-code td .added-code {
+  .repository.diff .container div .diff-file-box .diff-file-body .file-body table tbody .add-code td .added-code {
     background: #50b46e; }
 
 /* repository: files */
diff --git a/source/partials/repository.scss b/source/partials/repository.scss
index 2f4739c..8a807a1 100644
--- a/source/partials/repository.scss
+++ b/source/partials/repository.scss
@@ -722,119 +722,142 @@
         }
       }
     }
-    .diff-detail-box {
-      background: rgb(50, 50, 75);
-      color: rgb(245, 245, 255);
-      padding: 10px;
-      .button {
-        background: rgb(70, 70, 105);
+    div {
+      .diff-detail-box {
+        background: rgb(50, 50, 75);
         color: rgb(245, 245, 255);
-        &:hover {
-          background: rgb(60, 60, 90);
-          .menu {
-            @if $nojavascript == true {
-              display: block;
-            }
-          }
-        }
-        &.dropdown {
-          @if $nojavascript == true {
-            padding-right: 37px;
-            &::after {
-              content: '⏷';
-              position: absolute;
-              right: 17px;
-              top: 10px;
-              font-size: 11px;
-              color: rgb(215, 215, 225);
-            }
-          }
-        }
-        .dropdown.icon {
-          @if $nojavascript == true {
-            display: none;
-          }
-        }
-        .menu {
-          background: rgb(70, 70, 105);
-          border: 1px solid rgb(60, 60, 90);
-          box-shadow: none;
-          .item {
-            color: rgb(245, 245, 255);
-            &:hover {
-              background: rgb(60, 60, 90);
-            }
-            &[data-target*="#diff-files"] {
-              @if $nojavascript == true {
-                display: none;
-              }
-            }
-          }
-        }
-      }
-      &.diff-stats {
-        @if $nojavascript == true {
-          display: block;
-        }
-      }
-    }
-    .diff-file-box {
-      .diff-file-header {
-        .diff-counter {
-          .bar {
-            background: rgb(255, 130, 130);
-            .pull-left.add {
-              background: rgb(100, 200, 130);
-            }
-          }
-        }
-        .file {
-          color: rgb(245, 245, 255);
-        }
+        padding: 10px;
         .button {
-          background: rgb(80, 80, 120);
-          box-shadow: none;
+          background: rgb(70, 70, 105);
           color: rgb(245, 245, 255);
           &:hover {
+            background: rgb(60, 60, 90);
+            .menu {
+              @if $nojavascript == true {
+                display: block;
+              }
+            }
+          }
+          &.dropdown {
+            @if $nojavascript == true {
+              padding-right: 37px;
+              &::after {
+                content: '⏷';
+                position: absolute;
+                right: 17px;
+                top: 10px;
+                font-size: 11px;
+                color: rgb(215, 215, 225);
+              }
+            }
+          }
+          .dropdown.icon {
+            @if $nojavascript == true {
+              display: none;
+            }
+          }
+          .menu {
             background: rgb(70, 70, 105);
+            border: 1px solid rgb(60, 60, 90);
+            box-shadow: none;
+            .item {
+              color: rgb(245, 245, 255);
+              &:hover {
+                background: rgb(60, 60, 90);
+              }
+              &[data-target*="#diff-files"] {
+                @if $nojavascript == true {
+                  display: none;
+                }
+              }
+            }
+          }
+        }
+        &.diff-stats {
+          @if $nojavascript == true {
+            display: block;
           }
         }
       }
-      .diff-file-body {
-        .file-body {
-          table {
-            tbody {
-              .tag-code {
-                td {
-                  background: rgb(30, 30, 45) !important;
-                  border-color: rgb(60, 60, 90) !important;
-                  color: rgb(255, 255, 255);
-                }
+      .diff-stats.detail-files {
+        background: rgb(30, 30, 45);
+        border-radius: 0 0 5px 5px;
+        margin: 0 0 10px 0;
+        li {
+          border-bottom: 1px dashed rgb(60, 60, 90);
+          &:last-of-type {
+            border-bottom: 0;
+            margin-bottom: 0;
+            padding-bottom: 0;
+          }
+          .diff-counter {
+            .add {
+              color: rgb(100, 200, 130);
+            }
+            .del {
+              color: rgb(255, 130, 130);
+            }
+          }
+        }
+      }
+      .diff-file-box {
+        .diff-file-header {
+          .diff-counter {
+            .bar {
+              background: rgb(255, 130, 130);
+              .pull-left.add {
+                background: rgb(100, 200, 130);
               }
-              .same-code {
-                td {
-                  background: rgb(30, 30, 45) !important;
-                  border-color: rgb(60, 60, 90) !important;
-                  color: rgb(255, 255, 255);
-                }
-              }
-              .del-code {
-                td {
-                  background: rgb(255, 130, 130) !important;
-                  border-color: rgb(255, 100, 100) !important;
-                  color: rgb(255, 255, 255);
-                  .removed-code {
-                    background: rgb(255, 110, 110);
+            }
+          }
+          .file {
+            color: rgb(245, 245, 255);
+          }
+          .button {
+            background: rgb(80, 80, 120);
+            box-shadow: none;
+            color: rgb(245, 245, 255);
+            &:hover {
+              background: rgb(70, 70, 105);
+            }
+          }
+        }
+        .diff-file-body {
+          .file-body {
+            table {
+              tbody {
+                .tag-code {
+                  td {
+                    background: rgb(30, 30, 45) !important;
+                    border-color: rgb(60, 60, 90) !important;
+                    color: rgb(255, 255, 255);
                   }
                 }
-              }
-              .add-code {
-                td {
-                  background: rgb(100, 200, 130) !important;
-                  border-color: rgb(100, 220, 120) !important;
-                  color: rgb(255, 255, 255);
-                  .added-code {
-                    background: rgb(80, 180, 110);
+                .same-code {
+                  td {
+                    background: rgb(30, 30, 45) !important;
+                    border-color: rgb(60, 60, 90) !important;
+                    color: rgb(255, 255, 255);
+                  }
+                }
+                .del-code {
+                  td {
+                    background: rgb(255, 130, 130) !important;
+                    border-color: rgb(255, 100, 100) !important;
+                    color: rgb(255, 255, 255);
+                    .removed-code {
+                      background: rgb(255, 110, 110);
+                    }
+                  }
+                }
+                .add-code {
+                  td {
+                    background: rgb(100, 200, 130) !important;
+                    border-color: rgb(100, 220, 120) !important;
+                    color: rgb(255, 255, 255);
+                    .added-code {
+                      background: rgb(80, 180, 110);
+                    }
                   }
                 }
               }