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>

diff --git a/templates/explore/code.tmpl b/templates/explore/code.tmpl
index 04956455765f8dc525aaeb74f34a1c1d9b270964..1c41dd843f2636069bcf51d34095bbf4234c08b7 100644 (file)
--- a/templates/explore/code.tmpl
+++ b/templates/explore/code.tmpl
@@ -16,10 +16,10 @@
                 <h3>
                     {{.i18n.Tr "explore.code_search_results" (.Keyword|Escape) | Str2html }}
                 </h3>
-                               <div>
+                               <div class="df ac fw">
                                        {{range $term := .SearchResultLanguages}}
-                                       <a class="ui text-label {{if eq $.Language $term.Language}}primary {{end}}basic label" href="{{AppSubUrl}}/explore/code?q={{$.Keyword}}{{if ne $.Language $term.Language}}&l={{$term.Language}}{{end}}">
-                                               <i class="color-icon" style="background-color: {{$term.Color}}"></i>
+                                       <a class="ui text-label df ac mr-1 my-1 {{if eq $.Language $term.Language}}primary {{end}}basic label" href="{{AppSubUrl}}/explore/code?q={{$.Keyword}}{{if ne $.Language $term.Language}}&l={{$term.Language}}{{end}}">
+                                               <i class="color-icon mr-3" style="background-color: {{$term.Color}}"></i>
                                                {{$term.Language}}
                                                <div class="detail">{{$term.Count}}</div>
                                        </a>
@@ -31,7 +31,7 @@
                         <div class="diff-file-box diff-box file-content non-diff-file-content repo-search-result">
                             <h4 class="ui top attached normal header">
                                 <span class="file"><a rel="nofollow" href="{{EscapePound $repo.HTMLURL}}">{{$repo.FullName}}</a> - {{.Filename}}</span>
-                                <a class="ui basic grey tiny button" rel="nofollow" href="{{EscapePound $repo.HTMLURL}}/src/commit/{{$result.CommitID}}/{{EscapePound .Filename}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
+                                <a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $repo.HTMLURL}}/src/commit/{{$result.CommitID}}/{{EscapePound .Filename}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
                             </h4>
                             <div class="ui attached table segment">
                                 <div class="file-body file-code code-view">

diff --git a/templates/explore/repo_list.tmpl b/templates/explore/repo_list.tmpl
index bfec17ff293c8d80f66bdcadd73ff6cec6e6419b..91dc3d8bf40a7f263272fefa337dd184b775f441 100644 (file)
--- a/templates/explore/repo_list.tmpl
+++ b/templates/explore/repo_list.tmpl
@@ -38,12 +38,12 @@
                                                {{end}}
                                        </div>
                                </div>
-                               <div class="metas">
+                               <div class="metas df ac">
                                        {{if .PrimaryLanguage }}
-                                       <span class="text grey"><i class="color-icon" style="background-color: {{.PrimaryLanguage.Color}}"></i>{{ .PrimaryLanguage.Language }}</span>
+                                       <span class="text grey df ac mr-3"><i class="color-icon mr-3" style="background-color: {{.PrimaryLanguage.Color}}"></i>{{ .PrimaryLanguage.Language }}</span>
                                        {{end}}
-                                       <span class="text grey">{{svg "octicon-star"}} {{.NumStars}}</span>
-                                       <span class="text grey">{{svg "octicon-git-branch"}} {{.NumForks}}</span>
+                                       <span class="text grey df ac mr-3">{{svg "octicon-star" 16 "mr-3"}}{{.NumStars}}</span>
+                                       <span class="text grey df ac mr-3">{{svg "octicon-git-branch" 16 "mr-3"}}{{.NumForks}}</span>
                                </div>
                        </div>
                        <div class="description">

diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index 40e9d277b399bb824bd7b9d1e5cc3557671c7f1f..ef152fa58b1f5bcd663aca1ae0ab627f559b3823 100644 (file)
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -33,10 +33,10 @@
                                {{end}}
                        </div>
                </div>
-               <ol class="diff-detail-box diff-stats detail-files hide" id="diff-files">
+               <ol class="diff-detail-box diff-stats m-0 hide" id="diff-files">
                        {{range .Diff.Files}}
                                <li>
-                                       <div class="diff-counter pull-right">
+                                       <div class="bold df ac pull-right">
                                                {{if not .IsBin}}
                                                        {{template "repo/diff/stats" dict "file" . "root" $}}
                                                {{else}}
@@ -45,7 +45,7 @@
                                        </div>
                                        <!-- todo finish all file status, now modify, add, delete and rename -->
                                        <span class="status {{DiffTypeToStr .GetType}} poping up" data-content="{{DiffTypeToStr .GetType}}" data-variation="inverted tiny" data-position="right center">&nbsp;</span>
-                                       <a class="file" href="#diff-{{.Index}}">{{.Name}}</a>
+                                       <a class="file mono" href="#diff-{{.Index}}">{{.Name}}</a>
                                </li>
                        {{end}}
                </ol>
@@ -53,23 +53,28 @@
                        {{if $file.IsIncomplete}}
                                <div class="diff-file-box diff-box file-content">
                                        <h4 class="ui top attached normal header rounded">
-                                               <div class="diff-counter ui left">
+                                               <a role="button" class="fold-file muted mr-2">
+                                                       {{svg "octicon-chevron-down" 18}}
+                                               </a>
+                                               <div class="bold ui left df ac">
                                                        {{if not $file.IsRenamed}}
                                                                {{template "repo/diff/stats" dict "file" . "root" $}}
                                                        {{end}}
                                                </div>
-                                               <span class="file">{{$file.Name}}</span>
-                                               <div>{{$.i18n.Tr "repo.diff.file_suppressed"}}</div>
-                                               {{if $file.IsProtected}}
-                                                       <span class="ui right basic label">{{$.i18n.Tr "repo.diff.protected"}}</span>
-                                               {{end}}
-                                               {{if and (not $file.IsSubmodule) (not $.PageIsWiki)}}
-                                                       {{if $file.IsDeleted}}
-                                                               <a class="ui basic grey tiny button" rel="nofollow" href="{{EscapePound $.BeforeSourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
-                                                       {{else}}
-                                                               <a class="ui basic grey tiny button" rel="nofollow" href="{{EscapePound $.SourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
+                                               <span class="file mono">{{$file.Name}}</span>
+                                               <div class="diff-file-header-actions df ac">
+                                                       <div class="text grey">{{$.i18n.Tr "repo.diff.file_suppressed"}}</div>
+                                                       {{if $file.IsProtected}}
+                                                               <span class="ui basic label">{{$.i18n.Tr "repo.diff.protected"}}</span>
                                                        {{end}}
-                                               {{end}}
+                                                       {{if and (not $file.IsSubmodule) (not $.PageIsWiki)}}
+                                                               {{if $file.IsDeleted}}
+                                                                       <a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.BeforeSourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
+                                                               {{else}}
+                                                                       <a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.SourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
+                                                               {{end}}
+                                                       {{end}}
+                                               </div>
                                        </h4>
                                </div>
                        {{else}}
@@ -82,21 +87,19 @@
                                                        {{else}}
                                                                {{$isImage = (call $.IsImageFileInHead $file.Name)}}
                                                        {{end}}
-                                                       {{if or (not $file.IsBin) $isImage}}
-                                                       <a role="button" class="fold-file">
+                                                       <a role="button" class="fold-file muted mr-2">
                                                                {{svg "octicon-chevron-down" 18}}
                                                        </a>
-                                                       {{end}}
-                                                       <div class="diff-counter">
+                                                       <div class="bold df ac">
                                                                {{if $file.IsBin}}
                                                                        {{$.i18n.Tr "repo.diff.bin"}}
                                                                {{else if not $file.IsRenamed}}
                                                                        {{template "repo/diff/stats" dict "file" . "root" $}}
                                                                {{end}}
                                                        </div>
-                                                       <span class="file">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}{{if .IsLFSFile}} ({{$.i18n.Tr "repo.stored_lfs"}}){{end}}</span>
+                                                       <span class="file mono">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}{{if .IsLFSFile}} ({{$.i18n.Tr "repo.stored_lfs"}}){{end}}</span>
                                                </div>
-                                               <div class="df ac">
+                                               <div class="diff-file-header-actions df ac">
                                                        {{if $file.IsProtected}}
                                                                <span class="ui basic label">{{$.i18n.Tr "repo.diff.protected"}}</span>
                                                        {{end}}
@@ -111,8 +114,8 @@
                                        </h4>
                                        <div class="diff-file-body ui attached unstackable table segment">
                                                {{if ne $file.Type 4}}
-                                                       <div class="file-body file-code has-context-menu code-diff {{if $.IsSplitStyle}}code-diff-split{{else}}code-diff-unified{{end}}">
-                                                               <table class="chroma">
+                                                       <div class="file-body file-code has-context-menu{{if not $isImage}} code-diff{{end}}{{if $.IsSplitStyle}} code-diff-split{{else}} code-diff-unified{{end}}{{if $isImage}} py-4{{end}}">
+                                                               <table class="chroma{{if $isImage}} w-100{{end}}">
                                                                        <tbody>
                                                                                {{if $isImage}}
                                                                                        {{template "repo/diff/image_diff" dict "file" . "root" $}}
@@ -130,7 +133,6 @@
                                        </div>
                                </div>
                        {{end}}
-               <br>
                {{end}}
 
                {{if .Diff.IsIncomplete}}

diff --git a/templates/repo/diff/image_diff.tmpl b/templates/repo/diff/image_diff.tmpl
index 6afb985e9a98b734ca6fd7fcb985c5feebf5be76..eda208d7446a3cf6162b690a643f96345fd5143e 100644 (file)
--- a/templates/repo/diff/image_diff.tmpl
+++ b/templates/repo/diff/image_diff.tmpl
@@ -2,22 +2,22 @@
 {{ $imagePathNew := printf "%s/%s" .root.RawPath (EscapePound .file.Name)  }}
 
 <tr>
-       <th class="halfwidth center">
+       <th class="halfwidth center pl-3 pr-2">
                {{.root.i18n.Tr "repo.diff.file_before"}}
        </th>
-       <th class="halfwidth center">
+       <th class="halfwidth center pl-2 pr-3">
                {{.root.i18n.Tr "repo.diff.file_after"}}
        </th>
 </tr>
 <tr>
-       <td class="halfwidth center">
+       <td class="halfwidth center pl-3 pr-2">
            {{if or .file.IsDeleted (not .file.IsCreated)}}
             <a href="{{$imagePathOld}}" target="_blank">
                 <img src="{{$imagePathOld}}" class="border red" />
             </a>
            {{end}}
        </td>
-       <td class="halfwidth center">
+       <td class="halfwidth center pl-2 pr-3">
            {{if or .file.IsCreated (not .file.IsDeleted)}}
                        <a href="{{$imagePathNew}}" target="_blank">
                                <img src="{{$imagePathNew}}" class="border green" />
@@ -29,7 +29,7 @@
 {{ $imageInfoHead := (call .root.ImageInfo .file.Name) }}
 {{if or $imageInfoBase $imageInfoHead }}
 <tr>
-       <td class="halfwidth center">
+       <td class="halfwidth center pl-3 pr-2">
        {{if $imageInfoBase }}
                {{ $classWidth := "" }}
                {{ $classHeight := "" }}
@@ -52,7 +52,7 @@
            {{.root.i18n.Tr "repo.diff.file_byte_size"}}: <span class="text {{$classByteSize}}">{{FileSize $imageInfoBase.ByteSize}}</span>
        {{end}}
        </td>
-       <td class="halfwidth center">
+       <td class="halfwidth center pl-2 pr-3">
        {{if $imageInfoHead }}
                {{ $classWidth := "" }}
                {{ $classHeight := "" }}

diff --git a/templates/repo/diff/stats.tmpl b/templates/repo/diff/stats.tmpl
index 97503f0ea579d94afb3a333faafd2719322e19e5..1c9b2abd311e80c1a748725c011c43db9c03995c 100644 (file)
--- a/templates/repo/diff/stats.tmpl
+++ b/templates/repo/diff/stats.tmpl
@@ -1,4 +1,4 @@
 {{Add .file.Addition .file.Deletion}}
-<span class="diff-stats-bar poping up ml-2" data-content="{{.root.i18n.Tr "repo.diff.stats_desc_file" (Add .file.Addition .file.Deletion) .file.Addition .file.Deletion | Str2html}}" data-variation="wide">
+<span class="diff-stats-bar poping up mx-3" data-content="{{.root.i18n.Tr "repo.diff.stats_desc_file" (Add .file.Addition .file.Deletion) .file.Addition .file.Deletion | Str2html}}" data-variation="wide">
        <div class="diff-stats-add-bar" style="width: {{DiffStatsWidth .file.Addition .file.Deletion}}%"></div>
 </span>

diff --git a/templates/repo/search.tmpl b/templates/repo/search.tmpl
index c2172ec7870cf397c5c0342f3138868f514129f1..b66391a5ac5a5f525b4b79c8def84717ff9691b6 100644 (file)
--- a/templates/repo/search.tmpl
+++ b/templates/repo/search.tmpl
@@ -16,10 +16,10 @@
                        <h3>
                                {{.i18n.Tr "repo.search.results" (.Keyword|Escape) .RepoLink .RepoName | Str2html }}
                        </h3>
-                       <div>
+                       <div class="df ac fw">
                                {{range $term := .SearchResultLanguages}}
-                               <a class="ui text-label {{if eq $.Language $term.Language}}primary {{end}}basic label" href="{{EscapePound $.SourcePath}}/search?q={{$.Keyword}}{{if ne $.Language $term.Language}}&l={{$term.Language}}{{end}}">
-                                       <i class="color-icon" style="background-color: {{$term.Color}}"></i>
+                               <a class="ui text-label df ac mr-1 my-1 {{if eq $.Language $term.Language}}primary {{end}}basic label" href="{{EscapePound $.SourcePath}}/search?q={{$.Keyword}}{{if ne $.Language $term.Language}}&l={{$term.Language}}{{end}}">
+                                       <i class="color-icon mr-3" style="background-color: {{$term.Color}}"></i>
                                        {{$term.Language}}
                                        <div class="detail">{{$term.Count}}</div>
                                </a>
@@ -30,7 +30,7 @@
                                        <div class="diff-file-box diff-box file-content non-diff-file-content repo-search-result">
                                                <h4 class="ui top attached normal header">
                                                        <span class="file">{{.Filename}}</span>
-                                                       <a class="ui basic grey tiny button" rel="nofollow" href="{{EscapePound $.SourcePath}}/src/commit/{{$result.CommitID}}/{{EscapePound .Filename}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
+                                                       <a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.SourcePath}}/src/commit/{{$result.CommitID}}/{{EscapePound .Filename}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
                                                </h4>
                                                <div class="ui attached table segment">
                                                        <div class="file-body file-code code-view">

diff --git a/templates/repo/sub_menu.tmpl b/templates/repo/sub_menu.tmpl
index 6c455a4d5d0b016a5a1e70f891f2e336d9be0b0a..5bb71ba49ddd503fab7f204aeccad49912baee4c 100644 (file)
--- a/templates/repo/sub_menu.tmpl
+++ b/templates/repo/sub_menu.tmpl
@@ -23,15 +23,16 @@
        <div class="ui segment sub-menu language-stats-details" style="display: none">
                <div class="ui horizontal center link list">
                        {{range .LanguageStats}}
-                       <div class="item">
-                               <i class="color-icon" style="background-color: {{ .Color }}"></i>
-                               <span class="ui"><b>
-                               {{if eq .Language "other" }}
-                                       {{ $.i18n.Tr "repo.language_other" }}
-                               {{else}}
-                                       {{ .Language }}
-                               {{end}}
-                               </b> {{ .Percentage }}%</span>
+                       <div class="item df ac jc">
+                               <i class="color-icon mr-3" style="background-color: {{ .Color }}"></i>
+                               <span class="bold mr-3">
+                                       {{if eq .Language "other" }}
+                                               {{ $.i18n.Tr "repo.language_other" }}
+                                       {{else}}
+                                               {{ .Language }}
+                                       {{end}}
+                               </span>
+                               {{ .Percentage }}%
                        </div>
                        {{end}}
                </div>

diff --git a/templates/shared/searchbottom.tmpl b/templates/shared/searchbottom.tmpl
index 5680c8d2a9c7a9f15b25d7d4ec47b7f62eedab28..ab4c135ffea52e2743d1c035267adf12dafbeab2 100644 (file)
--- a/templates/shared/searchbottom.tmpl
+++ b/templates/shared/searchbottom.tmpl
@@ -1,10 +1,10 @@
 <div class="ui bottom attached table segment df ac sb">
-               <div class="ml-3">
+               <div class="df ac ml-4">
                        {{if .result.Language}}
-                                       <i class="color-icon" style="background-color: {{.result.Color}}"></i>{{.result.Language}}
+                                       <i class="color-icon mr-3" style="background-color: {{.result.Color}}"></i>{{.result.Language}}
                        {{end}}
                </div>
-               <div class="mr-3">
+               <div class="mr-4">
                        {{if not .result.UpdatedUnix.IsZero}}
                                        <span class="ui grey text">{{.root.i18n.Tr "explore.code_last_indexed_at" (TimeSinceUnix .result.UpdatedUnix .root.i18n.Lang) | Safe}}</span>
                        {{end}}

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 7dbbda04de62803c1edeba34c6e90d069e27a21e..7042af574b4d4221a3ecc6a6329b784987c2f3d0 100644 (file)
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -85,7 +85,8 @@
   --color-text-dark: #080808;
   --color-text: #212121;
   --color-text-light: #555555;
-  --color-text-light-2: #888888;
+  --color-text-light-2: #808080;
+  --color-text-light-3: #a0a0a0;
   --color-box-header: #f7f7f7;
   --color-box-body: #ffffff;
   --color-footer: #ffffff;
@@ -98,6 +99,7 @@
   --color-label: #00000010;
   --color-label-hover: #00000015;
   --color-label-basic: #00000008;
+  --color-label-basic-hover: #00000015;
   --color-label-border: #00000018;
   --color-hover: #0000000a;
   --color-active: #00000010;
@@ -109,6 +111,7 @@
   --color-code-bg: #ffffff;
   --color-markdown-code-block: #00000010;
   --color-secondary-bg: #f4f4f4;
+  --color-expand-button: #d8efff;
   /* backgrounds */
   --checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
   --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
@@ -170,6 +173,7 @@ h6 {
 }
 
 body {
+  color: var(--color-text);
   background-color: var(--color-body);
   overflow-y: auto;
   display: flex;
@@ -304,6 +308,11 @@ a.muted:hover,
 }
 
 .ui.ui.menu .item.disabled {
+  color: var(--color-text-light-3);
+}
+
+/* slightly more contrast for filters on issue list */
+.ui.ui.menu .dropdown.item.disabled {
   color: var(--color-text-light-2);
 }
 
@@ -809,10 +818,6 @@ a.ui.card:hover,
       font-weight: normal;
     }
 
-    &.bold {
-      font-weight: 600;
-    }
-
     &.italic {
       font-style: italic;
     }
@@ -1387,18 +1392,6 @@ a.ui.label:hover {
   color: var(--color-text);
 }
 
-.ui.basic.labels .label,
-.ui.basic.label {
-  background: var(--color-label-basic);
-  border-color: var(--color-label-border);
-  color: var(--color-text);
-}
-
-.ui.basic.labels a.label:hover,
-a.ui.basic.label:hover {
-  background: var(--color-label-hover);
-}
-
 .ui.label > .detail .icons {
   margin-right: .25em;
 }
@@ -1439,6 +1432,9 @@ a.ui.basic.label:hover {
 
 .lines-num,
 .lines-code {
+  font-size: 12px;
+  font-family: var(--fonts-monospace);
+  line-height: 20px;
   padding-top: 0;
   padding-bottom: 0;
   vertical-align: top;
@@ -1549,12 +1545,6 @@ a.ui.basic.label:hover {
     overflow-y: visible;
   }
 
-  *:not(.fa):not(.svg):not(.icon) {
-    font-size: 12px;
-    font-family: var(--fonts-monospace);
-    line-height: 20px;
-  }
-
   table {
     width: 100%;
   }
@@ -1576,6 +1566,10 @@ a.ui.basic.label:hover {
   color: var(--color-text);
 }
 
+.ui.button.no-text .icon {
+  margin: 0 !important;
+}
+
 .ui.buttons .button:first-child {
   border-left: 1px solid var(--color-secondary);
 }
@@ -1644,6 +1638,20 @@ a.ui.basic.label:hover {
   color: var(--color-primary) !important;
 }
 
+.ui.basic.labels .label,
+.ui.basic.label {
+  background: var(--color-label-basic);
+  border-color: var(--color-label-border);
+  color: var(--color-text);
+}
+
+.ui.basic.labels a.label:hover,
+a.ui.basic.label:hover {
+  color: var(--color-text);
+  border-color: var(--color-label-border);
+  background: var(--color-label-basic-hover);
+}
+
 .ui.label > img {
   width: auto !important;
   vertical-align: middle;
@@ -1703,15 +1711,10 @@ a.ui.basic.label:hover {
 }
 
 .color-icon {
-  margin-right: .5em;
-  margin-left: .5em;
   display: inline-block;
-  border: 0 solid rgba(0, 0, 0, .2);
   border-radius: 100%;
   height: 14px;
   width: 14px;
-  position: relative;
-  top: 2px;
 }
 
 .ui.label > .color-icon {
@@ -1835,10 +1838,6 @@ table th[data-sortt-desc] {
   align-items: center !important;
 }
 
-.text-label .color-icon {
-  position: static !important;
-}
-
 .emoji,
 .reaction {
   font-size: 1.25em;

diff --git a/web_src/less/_explore.less b/web_src/less/_explore.less
index 6d6462df6cdd1c75add7a33e33423615864fbd60..89fd2af629df60ad9155c1a7a41e15aa544692a8 100644 (file)
--- a/web_src/less/_explore.less
+++ b/web_src/less/_explore.less
@@ -15,39 +15,32 @@
 
 .ui.repository.list {
   .item {
-    padding-bottom: 25px;
+    padding-bottom: 1.5rem;
 
     &:not(:first-child) {
       border-top: 1px solid var(--color-secondary);
-      padding-top: 25px;
+      padding-top: 1.5rem;
     }
 
     .ui.header {
       font-size: 1.5rem;
-      padding-bottom: 10px;
+      margin-bottom: .5rem;
 
       .name {
         word-break: break-all;
       }
 
       .metas {
-        color: #888888;
         font-size: 14px;
-        font-weight: normal;
-
-        span:not(:last-child) {
-          margin-right: 5px;
-        }
       }
     }
 
     .time {
       font-size: 12px;
-      color: #808080;
     }
 
     .ui.tags {
-      margin-bottom: 1em;
+      margin-bottom: .5rem;
     }
   }
 }

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index f859737e070b8a203985b8e16791042bdca1ad4d..c0fd13c0944b4741c26fad15bfe94e44b5088b8f 100644 (file)
--- 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);

diff --git a/web_src/less/_review.less b/web_src/less/_review.less
index 222d2f1e23d8d08ad05557a7bfcf8a1f84b78b4f..4d8b402bd3e082f75b903e0d517806839869ddaa 100644 (file)
--- a/web_src/less/_review.less
+++ b/web_src/less/_review.less
@@ -122,19 +122,14 @@
   color: var(--color-text);
 }
 
-a.fold-file {
-  margin-right: 10px;
-  color: inherit;
-}
-
 a.blob-excerpt {
-  color: #575a68;
+  color: var(--color-text-light);
   height: 28px;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
-  background: var(--color-primary-light-5);
+  background: var(--color-expand-button);
 }
 
 a.blob-excerpt:hover {

diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less
index 83d7b1d7080ae2a1d6909e830691f71003df5ea2..a79b4e7f34733ed6aa92d5ed93973560601b01a5 100644 (file)
--- a/web_src/less/helpers.less
+++ b/web_src/less/helpers.less
@@ -12,12 +12,16 @@
 .f1 { flex: 1 !important; }
 .fw { flex-wrap: wrap !important; }
 .vm { vertical-align: middle !important; }
+.w-100 { width: 100% !important; }
+.h-100 { height: 100% !important; }
 
 .mono {
   font-family: var(--fonts-monospace) !important;
   font-size: .9em !important; /* compensate for monospace fonts being usually slighty larger */
 }
 
+.bold { font-weight: 600 !important; }
+
 .word-break {
   word-wrap: break-word !important;
   word-break: break-all !important;

diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index 871b5b00b81e1112df75e9b910e1e77c08c949d0..ca629188bc45fd28875cd4d085f2550792e21d16 100644 (file)
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -82,7 +82,8 @@
   --color-text-dark: #dbe0ea;
   --color-text: #bbc0ca;
   --color-text-light: #a6aab5;
-  --color-text-light-2: #868a95;
+  --color-text-light-2: #8a8e99;
+  --color-text-light-3: #707687;
   --color-footer: #2e323e;
   --color-timeline: #4c525e;
   --color-input-text: #d5dbe6;
@@ -92,7 +93,8 @@
   --color-navbar: #2a2e3a;
   --color-label: #ffffff0d;
   --color-label-hover: #ffffff20;
-  --color-label-basic: #00000016;
+  --color-label-basic: #00000030;
+  --color-label-basic-hover: #40404030;
   --color-label-border: #ffffff28;
   --color-hover: #ffffff0d;
   --color-active: #ffffff14;
@@ -104,6 +106,8 @@
   --color-code-bg: #2a2e3a;
   --color-shadow: #00000060;
   --color-secondary-bg: #2a2e3a;
+  --color-text-focus: #fff;
+  --color-expand-button: #3c404d;
 }
 
 .repository.branches .commit-divergence .bar {
@@ -118,10 +122,6 @@
   background: var(--color-primary-alpha-20) !important;
 }
 
-body {
-  color: var(--color-secondary-dark-6);
-}
-
 ::placeholder,
 .CodeMirror-placeholder {
   color: #6a737d !important;
@@ -505,15 +505,6 @@ td.blob-excerpt {
   background-color: rgba(0, 0, 0, .15);
 }
 
-a.blob-excerpt {
-  color: #ccc;
-  background: #393d4a;
-}
-
-a.blob-excerpt:hover {
-  background: #87ab63;
-}
-
 .lines-code.active,
 .lines-code .active {
   background: #534d1b !important;
@@ -658,18 +649,6 @@ a.blob-excerpt:hover {
   border-right-color: var(--color-secondary) !important;
 }
 
-.repository .diff-detail-box {
-  background-color: #383c4a;
-
-  .detail-files {
-    background-color: inherit;
-  }
-
-  &.sticky {
-    border-bottom-color: var(--color-secondary);
-  }
-}
-
 /* code mirror dark theme */
 
 .CodeMirror {