Search and Diff CSS enhancements (#14050)

* Search and Diff CSS enhancements

- Use flexbox for language stats
- Improve labels and code boxes on repo and code search
- Use flexbox on diff header and improve suppressed diff text
- Add dedicated color for diff expander

* more diff tweaks, less vertical padding on header

* more minor tweaks

* always show fold icon, image diff improvments

* remove margin

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>

1 files changed, 24 insertions, 21 deletions

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index f859737e07..c0fd13c094 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -1413,7 +1413,7 @@
 
   .diff-detail-box {
     padding: 7px 0;
-    background: #ffffff;
+    background: var(--color-body);
     line-height: 30px;
 
     @media @mediaMdAndDown {
@@ -1425,7 +1425,6 @@
       position: sticky;
       top: 0;
       z-index: 8;
-      margin-bottom: 10px;
       border-bottom: 1px solid var(--color-secondary);
       padding-left: 2px;
       padding-right: 2px;
@@ -1442,8 +1441,12 @@
       margin-right: .25rem;
     }
 
-    .diff-detail-actions .btn-review {
-      margin-right: 0 !important;
+    .diff-detail-actions > * {
+      margin-right: 0;
+    }
+
+    .diff-detail-actions > * + * {
+      margin-left: .25rem;
     }
 
     span.status {
@@ -1454,26 +1457,21 @@
       vertical-align: middle;
 
       &.modify {
-        background-color: #f0db88;
+        background-color: var(--color-yellow);
       }
 
       &.add {
-        background-color: #b4e2b4;
+        background-color: var(--color-green);
       }
 
       &.del {
-        background-color: #e9aeae;
+        background-color: var(--color-red);
       }
 
       &.rename {
-        background-color: #dad8ff;
+        background-color: var(--color-teal);
       }
     }
-
-    .detail-files {
-      background: #ffffff;
-      margin: 0;
-    }
   }
 
   .diff-box .header {
@@ -1486,12 +1484,18 @@
     }
 
     .button {
-      padding: 8px 10px;
+      padding: 8px 12px;
       flex: 0 0 auto;
+      margin-top: -8px;
+      margin-bottom: -8px;
+      margin-right: 0;
     }
   }
 
   .diff-file-box {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+
     .header {
       background-color: var(--color-box-header);
     }
@@ -1588,7 +1592,6 @@
   }
 
   .diff-stats {
-
     clear: both;
     margin-bottom: 5px;
     max-height: 400px;
@@ -1599,9 +1602,12 @@
       list-style: none;
       padding-bottom: 4px;
       margin-bottom: 4px;
-      border-bottom: 1px dashed var(--color-secondary);
       padding-left: 6px;
     }
+
+    li + li {
+      border-top: 1px solid var(--color-secondary);
+    }
   }
 
   .repo-search-result {
@@ -2961,9 +2967,8 @@ td.blob-excerpt {
   border-radius: var(--border-radius) !important;
 }
 
-.diff-counter {
-  font-weight: 600;
-  margin-right: 8px;
+.diff-file-header-actions > * + * {
+  margin-left: .5rem !important;
 }
 
 .diff-stats-bar {
@@ -2971,8 +2976,6 @@ td.blob-excerpt {
   background-color: var(--color-red);
   height: 12px;
   width: 40px;
-  position: relative;
-  top: 2px;
 
   .diff-stats-add-bar {
     background-color: var(--color-green);