Markdown and Repo header tweaks (#13744)

* Markdown and Repo header tweaks

- Use CSS vars for all markdown colors
- Tweak repo header, removing double borders and adjust sizes
- Use menu instead of buttons for issue open/close switcher
- Add emoji inversion for select emoji glyphs in arc-green
- Use border over box-shadow for all buttons
- Add spacing element to login form without openid

* repo settings navbar fix

* use shared template in more places and adjust dashboard

* fix remaining open/close combos

diff --git a/templates/repo/branch_dropdown.tmpl b/templates/repo/branch_dropdown.tmpl
index a7eafa3874f34cf35acce47170cd2cd3bdf55e88..81229c0ef567037f804fc44c512b2f8088512072 100644 (file)
--- a/templates/repo/branch_dropdown.tmpl
+++ b/templates/repo/branch_dropdown.tmpl
@@ -1,4 +1,4 @@
-<div class="fitted item choose reference">
+<div class="fitted item choose reference mr-1">
        <div class="ui floating filter dropdown custom" data-can-create-branch="{{.CanCreateBranch}}" data-no-results="{{.i18n.Tr "repo.pulls.no_results"}}">
                <div class="ui basic small compact button" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
                        <span class="text">

diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index 98c5aa5738c368e22483db199115633bc22bd892..0922bd73870b843293c17c1fa83794fadc33007f 100644 (file)
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -63,7 +63,7 @@
                        <!-- If home page, show new PR. If not, show breadcrumb -->
                        {{if eq $n 0}}
                                {{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}}
-                                       <div class="fitted item">
+                                       <div class="fitted item mx-0">
                                                <a href="{{.BaseRepo.Link}}/compare/{{.BaseRepo.DefaultBranch | EscapePound}}...{{if ne .Repository.Owner.Name .BaseRepo.Owner.Name}}{{.Repository.Owner.Name}}:{{end}}{{.BranchName | EscapePound}}">
                                                        <button id="new-pull-request" class="ui compact basic button">{{if .PullRequestCtx.Allowed}}{{.i18n.Tr "repo.pulls.compare_changes"}}{{else}}{{.i18n.Tr "action.compare_branch"}}{{end}}</button>
                                                </a>
@@ -72,8 +72,8 @@
                        {{else}}
                                <div class="fitted item"><span class="ui breadcrumb repo-path"><a class="section" href="{{.RepoLink}}/src/{{EscapePound .BranchNameSubURL}}" title="{{.Repository.Name}}">{{EllipsisString .Repository.Name 30}}</a>{{range $i, $v := .TreeNames}}<span class="divider">/</span>{{if eq $i $l}}<span class="active section" title="{{$v}}">{{EllipsisString $v 30}}</span>{{else}}{{ $p := index $.Paths $i}}<span class="section"><a href="{{EscapePound $.BranchLink}}/{{EscapePound $p}}" title="{{$v}}">{{EllipsisString $v 30}}</a></span>{{end}}{{end}}</span></div>
                        {{end}}
-                       <div class="right fitted item" id="file-buttons">
-                               <div class="ui tiny blue buttons">
+                       <div class="right fitted item mr-0" id="file-buttons">
+                               <div class="ui tiny primary buttons">
                                        {{if .Repository.CanEnableEditor}}
                                                {{if .CanAddFile}}
                                                        <a href="{{.RepoLink}}/_new/{{EscapePound .BranchName}}/{{EscapePound .TreePath}}" class="ui button">

diff --git a/templates/repo/issue/list.tmpl b/templates/repo/issue/list.tmpl
index 49adcd08bfd8d2b443e1b0ab55d446b05aca932a..95aea0c13b3bc91320d9fb0415692fc6afc8cb70 100644 (file)
--- a/templates/repo/issue/list.tmpl
+++ b/templates/repo/issue/list.tmpl
@@ -28,16 +28,7 @@
                <div class="ui divider"></div>
                <div id="issue-filters" class="ui stackable grid">
                        <div class="six wide column">
-                               <div class="ui tiny basic status buttons">
-                                       <a class="ui {{if not .IsShowClosed}}green active{{end}} basic button" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state=open&labels={{.SelectLabels}}&milestone={{.MilestoneID}}&assignee={{.AssigneeID}}">
-                                               {{svg "octicon-issue-opened"}}
-                                               {{.i18n.Tr "repo.issues.open_tab" .IssueStats.OpenCount}}
-                                       </a>
-                                       <a class="ui {{if .IsShowClosed}}red active{{end}} basic button" href="{{$.Link}}?q={{$.Keyword}}&type={{.ViewType}}&sort={{$.SortType}}&state=closed&labels={{.SelectLabels}}&milestone={{.MilestoneID}}&assignee={{.AssigneeID}}">
-                                               {{svg "octicon-issue-closed"}}
-                                               {{.i18n.Tr "repo.issues.close_tab" .IssueStats.ClosedCount}}
-                                       </a>
-                               </div>
+                               {{template "repo/issue/openclose" .}}
                        </div>
                        <div class="ten wide right aligned column">
                                <div class="ui secondary filter stackable menu labels">
@@ -122,16 +113,7 @@
                </div>
                <div id="issue-actions" class="ui stackable grid hide">
                        <div class="six wide column">
-                               <div class="ui tiny basic status buttons">
-                                       <a class="ui {{if not .IsShowClosed}}green active{{end}} basic button" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state=open&labels={{.SelectLabels}}&milestone={{.MilestoneID}}&assignee={{.AssigneeID}}">
-                                               {{svg "octicon-issue-opened"}}
-                                               {{.i18n.Tr "repo.issues.open_tab" .IssueStats.OpenCount}}
-                                       </a>
-                                       <a class="ui {{if .IsShowClosed}}red active{{end}} basic button" href="{{$.Link}}?q={{$.Keyword}}&type={{.ViewType}}&sort={{$.SortType}}&state=closed&labels={{.SelectLabels}}&milestone={{.MilestoneID}}&assignee={{.AssigneeID}}">
-                                               {{svg "octicon-issue-closed"}}
-                                               {{.i18n.Tr "repo.issues.close_tab" .IssueStats.ClosedCount}}
-                                       </a>
-                               </div>
+                               {{template "repo/issue/openclose" .}}
                        </div>
                        {{/* Ten wide does not cope well and makes the columns stack.
                        This seems to be related to jQuery's hide/show: in fact, switching

diff --git a/templates/repo/issue/milestone_issues.tmpl b/templates/repo/issue/milestone_issues.tmpl
index 5794ac422f3684fbe6e37a9bcd805ad5988536f7..a78b20893fd34ba499fc208bed7f339fb6d9d1cd 100644 (file)
--- a/templates/repo/issue/milestone_issues.tmpl
+++ b/templates/repo/issue/milestone_issues.tmpl
@@ -40,16 +40,7 @@
                <div class="ui divider"></div>
                <div id="issue-filters" class="ui stackable grid">
                        <div class="six wide column">
-                               <div class="ui tiny basic status buttons">
-                                       <a class="ui {{if not .IsShowClosed}}green active{{end}} basic button" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state=open&labels={{.SelectLabels}}&assignee={{.AssigneeID}}">
-                                               {{svg "octicon-issue-opened"}}
-                                               {{.i18n.Tr "repo.issues.open_tab" .IssueStats.OpenCount}}
-                                       </a>
-                                       <a class="ui {{if .IsShowClosed}}red active{{end}} basic button" href="{{$.Link}}?q={{$.Keyword}}&type={{.ViewType}}&sort={{$.SortType}}&state=closed&labels={{.SelectLabels}}&assignee={{.AssigneeID}}">
-                                               {{svg "octicon-issue-closed"}}
-                                               {{.i18n.Tr "repo.issues.close_tab" .IssueStats.ClosedCount}}
-                                       </a>
-                               </div>
+                               {{template "repo/issue/openclose" .}}
                        </div>
                        <div class="ten wide right aligned column">
                                <div class="ui secondary filter stackable menu labels">
@@ -118,16 +109,7 @@
                </div>
                <div id="issue-actions" class="ui stackable grid hide">
                        <div class="six wide column">
-                               <div class="ui tiny basic status buttons">
-                                       <a class="ui {{if not .IsShowClosed}}green active{{end}} basic button" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state=open&labels={{.SelectLabels}}&assignee={{.AssigneeID}}">
-                                               {{svg "octicon-issue-opened"}}
-                                               {{.i18n.Tr "repo.issues.open_tab" .IssueStats.OpenCount}}
-                                       </a>
-                                       <a class="ui {{if .IsShowClosed}}red active{{end}} basic button" href="{{$.Link}}?q={{$.Keyword}}&type={{.ViewType}}&sort={{$.SortType}}&state=closed&labels={{.SelectLabels}}&assignee={{.AssigneeID}}">
-                                               {{svg "octicon-issue-closed"}}
-                                               {{.i18n.Tr "repo.issues.close_tab" .IssueStats.ClosedCount}}
-                                       </a>
-                               </div>
+                               {{template "repo/issue/openclose" .}}
                        </div>
 
                        {{/* Ten wide does not cope well and makes the columns stack.

diff --git a/templates/repo/issue/milestones.tmpl b/templates/repo/issue/milestones.tmpl
index ca4966439214129ce27b9c53990c888938c9c815..22daf66b37254dad44a7d30d974924ca5afd8eb5 100644 (file)
--- a/templates/repo/issue/milestones.tmpl
+++ b/templates/repo/issue/milestones.tmpl
@@ -12,13 +12,13 @@
                </div>
                <div class="ui divider"></div>
                {{template "base/alert" .}}
-               <div class="ui tiny basic buttons">
-                       <a class="ui {{if not .IsShowClosed}}green active{{end}} basic button" href="{{.RepoLink}}/milestones?state=open">
-                               {{svg "octicon-milestone"}}
+               <div class="ui compact tiny menu">
+                       <a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/milestones?state=open">
+                               {{svg "octicon-milestone" 16 "mr-3"}}
                                {{.i18n.Tr "repo.milestones.open_tab" .OpenCount}}
                        </a>
-                       <a class="ui {{if .IsShowClosed}}red active{{end}} basic button" href="{{.RepoLink}}/milestones?state=closed">
-                               {{svg "octicon-milestone"}}
+                       <a class="item{{if .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/milestones?state=closed">
+                               {{svg "octicon-milestone" 16 "mr-3"}}
                                {{.i18n.Tr "repo.milestones.close_tab" .ClosedCount}}
                        </a>
                </div>

diff --git a/templates/repo/issue/openclose.tmpl b/templates/repo/issue/openclose.tmpl
new file mode 100644 (file)
index 0000000..0506605
--- /dev/null
+++ b/templates/repo/issue/openclose.tmpl
@@ -0,0 +1,10 @@
+<div class="ui compact tiny menu">
+       <a class="{{if not .IsShowClosed}}active{{end}} item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state=open&labels={{.SelectLabels}}&milestone={{.MilestoneID}}&assignee={{.AssigneeID}}">
+               {{svg "octicon-issue-opened" 16 "mr-3"}}
+               {{.i18n.Tr "repo.issues.open_tab" .IssueStats.OpenCount}}
+       </a>
+       <a class="{{if .IsShowClosed}}active{{end}} item" href="{{$.Link}}?q={{$.Keyword}}&type={{.ViewType}}&sort={{$.SortType}}&state=closed&labels={{.SelectLabels}}&milestone={{.MilestoneID}}&assignee={{.AssigneeID}}">
+               {{svg "octicon-issue-closed" 16 "mr-3"}}
+               {{.i18n.Tr "repo.issues.close_tab" .IssueStats.ClosedCount}}
+       </a>
+</div>

diff --git a/templates/repo/projects/list.tmpl b/templates/repo/projects/list.tmpl
index c7ee628316c3bf9971142413581ed865272673d1..838bbdf1c1a06f0ef43e0eb204613af2df82b55b 100644 (file)
--- a/templates/repo/projects/list.tmpl
+++ b/templates/repo/projects/list.tmpl
@@ -12,12 +12,12 @@
                </div>
                <div class="ui divider"></div>
                {{template "base/alert" .}}
-               <div class="ui tiny basic buttons">
-                       <a class="ui {{if not .IsShowClosed}}green active{{end}} basic button" href="{{.RepoLink}}/projects?state=open">
+               <div class="ui compact tiny menu">
+                       <a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/projects?state=open">
                                {{svg "octicon-project"}}
                                {{.i18n.Tr "repo.issues.open_tab" .OpenCount}}
                        </a>
-                       <a class="ui {{if .IsShowClosed}}red active{{end}} basic button" href="{{.RepoLink}}/projects?state=closed">
+                       <a class="item{{if .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/projects?state=closed">
                                {{svg "octicon-check"}}
                                {{.i18n.Tr "repo.milestones.close_tab" .ClosedCount}}
                        </a>

diff --git a/templates/repo/settings/navbar.tmpl b/templates/repo/settings/navbar.tmpl
index 1944bd12e2d939310f3233906af9221a255dfada..1aba5de7313bc11ef6b9402b2347f3da3e1eeafa 100644 (file)
--- a/templates/repo/settings/navbar.tmpl
+++ b/templates/repo/settings/navbar.tmpl
@@ -1,4 +1,4 @@
-<div class="ui secondary pointing tabular top attached borderless menu stackable new-menu navbar">
+<div class="ui secondary pointing tabular top attached borderless menu stackable new-menu navbar shadow-body">
        <div class="new-menu-inner">
                <a class="{{if .PageIsSettingsOptions}}active{{end}} item" href="{{.RepoLink}}/settings">
                        {{.i18n.Tr "repo.settings.options"}}

diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl
index beb78a54914bb25fb02d27e337a7e153e610d9d1..ddba083b59679a27b8189118da27248eed0e8c9c 100644 (file)
--- a/templates/shared/issuelist.tmpl
+++ b/templates/shared/issuelist.tmpl
@@ -22,9 +22,9 @@
                                                {{end}}
                                        {{else}}
                                                {{if .IsClosed}}
-                                                       {{svg "octicon-issue-opened" 16 "text red"}}
+                                                       {{svg "octicon-issue-closed" 16 "text red"}}
                                                {{else}}
-                                                       {{svg "octicon-issue-closed" 16 "text green"}}
+                                                       {{svg "octicon-issue-opened" 16 "text green"}}
                                                {{end}}
                                        {{end}}
                                </div>
@@ -74,7 +74,10 @@
                                        {{end}}
                                        {{if ne .DeadlineUnix 0}}
                                                <span class="due-date poping up" data-content="{{$.i18n.Tr "repo.issues.due_date"}}" data-variation="tiny inverted" data-position="right center">
-                                                       {{svg "octicon-calendar" 14 "mr-2"}}<span{{if .IsOverdue}} class="overdue"{{end}}>{{.DeadlineUnix.FormatShort}}</span>
+                                                       <span{{if .IsOverdue}} class="overdue"{{end}}>
+                                                               {{svg "octicon-calendar" 14 "mr-2"}}
+                                                               {{.DeadlineUnix.FormatShort}}
+                                                       </span>
                                                </span>
                                        {{end}}
                                        {{if .IsPull}}

diff --git a/templates/user/auth/signin_navbar.tmpl b/templates/user/auth/signin_navbar.tmpl
index 85ebcd90f8e519bfd5b25a4dfcd59318c39bfbca..6df235ffc4e3305fa03273cf956d398764828f2b 100644 (file)
--- a/templates/user/auth/signin_navbar.tmpl
+++ b/templates/user/auth/signin_navbar.tmpl
@@ -18,4 +18,6 @@
                {{end}}
        </div>
 </div>
+{{else}}
+       <div class="mt-4"></div>
 {{end}}

diff --git a/templates/user/dashboard/issues.tmpl b/templates/user/dashboard/issues.tmpl
index 93ec2ed005ba3671119ee74e228ab095a9d7c85b..131ca40b3de002c6aff9dc8d6f05f06dbebf66a0 100644 (file)
--- a/templates/user/dashboard/issues.tmpl
+++ b/templates/user/dashboard/issues.tmpl
@@ -54,13 +54,13 @@
                        <div class="twelve wide column content">
                                <div class="ui three column stackable grid">
                                        <div class="column">
-                                               <div class="ui tiny basic status buttons">
-                                                       <a class="ui {{if not .IsShowClosed}}green active{{end}} basic button" href="{{.Link}}?type={{$.ViewType}}&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=open&q={{$.Keyword}}">
-                                                               {{svg "octicon-issue-opened"}}
+                                               <div class="ui compact tiny menu">
+                                                       <a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.Link}}?type={{$.ViewType}}&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=open&q={{$.Keyword}}">
+                                                               {{svg "octicon-issue-opened" 16 "mr-3"}}
                                                                {{.i18n.Tr "repo.issues.open_tab" .ShownIssueStats.OpenCount}}
                                                        </a>
-                                                       <a class="ui {{if .IsShowClosed}}red active{{end}} basic button" href="{{.Link}}?type={{$.ViewType}}&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=closed&q={{$.Keyword}}">
-                                                               {{svg "octicon-issue-closed"}}
+                                                       <a class="item{{if .IsShowClosed}} active{{end}}" href="{{.Link}}?type={{$.ViewType}}&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=closed&q={{$.Keyword}}">
+                                                               {{svg "octicon-issue-closed" 16 "mr-3"}}
                                                                {{.i18n.Tr "repo.issues.close_tab" .ShownIssueStats.ClosedCount}}
                                                        </a>
                                                </div>

diff --git a/templates/user/dashboard/milestones.tmpl b/templates/user/dashboard/milestones.tmpl
index c3fe4e22364984f0f78621dd4140fe9eff77b50e..16b5cf7286884b8e485518046f7c246e84a28ed2 100644 (file)
--- a/templates/user/dashboard/milestones.tmpl
+++ b/templates/user/dashboard/milestones.tmpl
@@ -34,13 +34,13 @@
                                </div>
                        </div>
                        <div class="twelve wide column content">
-                               <div class="ui tiny basic status buttons">
-                                       <a class="ui {{if not .IsShowClosed}}green active{{end}} basic button" href="{{.Link}}?repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=open">
-                                               {{svg "octicon-issue-opened"}}
+                               <div class="ui compact tiny menu">
+                                       <a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.Link}}?repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=open">
+                                               {{svg "octicon-issue-opened" 16 "mr-3"}}
                                                {{.i18n.Tr "repo.milestones.open_tab" .MilestoneStats.OpenCount}}
                                        </a>
-                                       <a class="ui {{if .IsShowClosed}}red active{{end}} basic button" href="{{.Link}}?repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=closed">
-                                               {{svg "octicon-issue-closed"}}
+                                       <a class="item{{if .IsShowClosed}} active{{end}}" href="{{.Link}}?repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=closed">
+                                               {{svg "octicon-issue-closed" 16 "mr-3"}}
                                                {{.i18n.Tr "repo.milestones.close_tab" .MilestoneStats.ClosedCount}}
                                        </a>
                                </div>

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index c6f7d043af84dbcb39a53ba3d34c2427930c3561..d2dd9dcb3f0f4f522a412798b2c1119eebdae37c 100644 (file)
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -76,7 +76,7 @@
   /* target-based colors */
   --color-body: #ffffff;
   --color-text: #212121;
-  --color-text-light: #444444;
+  --color-text-light: #555555;
   --color-text-light-2: #888888;
   --color-box-header: #f7f7f7;
   --color-box-body: #ffffff;
@@ -91,9 +91,12 @@
   --color-label-hover: #00000015;
   --color-label-basic: #00000008;
   --color-label-border: #00000018;
-  --color-hover: #0000000d;
-  --color-active: #00000014;
+  --color-hover: #0000000a;
+  --color-active: #00000010;
   --color-menu: #ffffff;
+  --color-markdown-table-row: #00000008;
+  --color-markdown-code-block: #00000010;
+  --color-button: #ffffff;
 }
 
 :root:lang(ja) {
@@ -231,6 +234,10 @@ a.muted:hover,
   color: var(--color-primary-dark-2);
 }
 
+.ui.breadcrumb .divider {
+  color: var(--color-text-light-2);
+}
+
 .ui.input.focus > input,
 .ui.input > input:focus {
   border-color: var(--color-primary);
@@ -1124,16 +1131,19 @@ footer {
 .ui.menu.new-menu::after {
   position: absolute;
   display: block;
-  background-image: linear-gradient(to right, transparent, var(--color-navbar) 100%);
-  content: ' ';
+  background: linear-gradient(to right, transparent, var(--color-navbar) 100%);
+  content: '';
   right: 0;
   height: 39px;
-  z-index: 1000;
   width: 60px;
   visibility: visible;
   pointer-events: none;
 }
 
+.ui.menu.new-menu.shadow-body::after {
+  background: linear-gradient(to right, transparent, var(--color-body) 100%);
+}
+
 .ui.menu.new-menu .item {
   margin: 0 !important;
 }
@@ -1403,6 +1413,13 @@ a.ui.label:hover {
   font-size: .85714286rem;
 }
 
+.ui.button {
+  background: var(--color-button);
+  border: 1px solid var(--color-secondary);
+  box-shadow: none !important;
+  color: var(--color-text);
+}
+
 .ui.blue.button,
 .ui.blue.buttons .button,
 .ui.primary.button,
@@ -1714,6 +1731,10 @@ table th[data-sortt-desc] {
   color: var(--color-text);
 }
 
+.ui.header {
+  color: var(--color-text);
+}
+
 .ui.header .ui.label {
   margin-left: .25rem;
 }

diff --git a/web_src/less/_markdown.less b/web_src/less/_markdown.less
index dd1e80246dc09776b96c06b5d732a84fa60a720b..2261733503332ed29b7226eb09b3639e835df0c3 100644 (file)
--- a/web_src/less/_markdown.less
+++ b/web_src/less/_markdown.less
@@ -104,14 +104,14 @@
     padding-bottom: .3em;
     font-size: 2.25em;
     line-height: 1.2;
-    border-bottom: 1px solid #eeeeee;
+    border-bottom: 1px solid var(--color-secondary);
   }
 
   h2 {
     padding-bottom: .3em;
     font-size: 1.75em;
     line-height: 1.225;
-    border-bottom: 1px solid #eeeeee;
+    border-bottom: 1px solid var(--color-secondary);
   }
 
   h3 {
@@ -129,7 +129,7 @@
 
   h6 {
     font-size: 1em;
-    color: #777777;
+    color: var(--color-text-light-2);
   }
 
   p,
@@ -147,7 +147,7 @@
     height: 4px;
     padding: 0;
     margin: 16px 0;
-    background-color: #e7e7e7;
+    background-color: var(--color-secondary);
     border: 0;
   }
 
@@ -204,8 +204,8 @@
   blockquote {
     margin-left: 0;
     padding: 0 15px;
-    color: #777777;
-    border-left: 4px solid #dddddd;
+    color: var(--color-text-light-2);
+    border-left: 4px solid var(--color-secondary);
   }
 
   blockquote > :first-child {
@@ -230,16 +230,15 @@
   table th,
   table td {
     padding: 6px 13px !important;
-    border: 1px solid #dddddd !important;
+    border: 1px solid var(--color-secondary) !important;
   }
 
   table tr {
-    background-color: #ffffff;
-    border-top: 1px solid #cccccc;
+    border-top: 1px solid var(--color-secondary);
   }
 
   table tr:nth-child(2n) {
-    background-color: #f8f8f8;
+    background-color: var(--color-markdown-table-row);
   }
 
   img {
@@ -263,7 +262,7 @@
     padding: 7px;
     margin: 13px 0 0;
     overflow: hidden;
-    border: 1px solid #dddddd;
+    border: 1px solid var(--color-secondary);
   }
 
   span.frame span img {
@@ -275,7 +274,7 @@
     display: block;
     padding: 5px 0 0;
     clear: both;
-    color: #333333;
+    color: var(--color-text);
   }
 
   span.align-center {
@@ -344,7 +343,7 @@
     padding: .2em .3em;
     margin: 0;
     font-size: 85%;
-    background-color: rgba(0, 0, 0, .04);
+    background-color: var(--color-label);
     border-radius: 3px;
   }
 
@@ -377,7 +376,7 @@
     overflow: auto;
     font-size: 85%;
     line-height: 1.45;
-    background-color: #f7f7f7;
+    background-color: var(--color-markdown-code-block);
     border-radius: 3px;
   }
 
@@ -415,13 +414,12 @@
     padding: 3px 5px;
     font-size: 11px;
     line-height: 10px;
-    color: #555555;
+    color: var(--color-text-light);
     vertical-align: middle;
-    background-color: #fcfcfc;
-    border: solid 1px #cccccc;
-    border-bottom-color: #bbbbbb;
+    background-color: var(--color-label);
+    border: 1px solid var(--color-secondary);
     border-radius: 3px;
-    box-shadow: inset 0 -1px 0 #bbbbbb;
+    box-shadow: inset 0 -1px 0 var(--color-secondary);
   }
 
   input[type="checkbox"] {
@@ -441,7 +439,6 @@
   .csv-data .blob-num {
     padding: 10px 8px 9px;
     text-align: right;
-    background: #ffffff;
     border: 0;
   }
 
@@ -451,7 +448,6 @@
 
   .csv-data th {
     font-weight: 600;
-    background: #f8f8f8;
     border-top: 0;
   }
 

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 4c2aff31c910738e13420db4e795905e576bf3c8..d1f0317b75b6c656ec80cb64d467b2c8d0d3e5db 100644 (file)
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -225,13 +225,19 @@
 
     .clone.button {
       font-size: 13px;
-      padding: 0 5px;
+      padding: 7.5px 5px;
 
       &:first-child {
         border-radius: var(--border-radius) 0 0 var(--border-radius);
       }
     }
 
+    #repo-clone-https,
+    #repo-clone-ssh,
+    #clipboard-btn {
+      border-right: none;
+    }
+
     .icon.button {
       padding: 0 10px;
     }
@@ -280,6 +286,10 @@
           width: 100%;
         }
       }
+
+      .button + .button {
+        border-left: none;
+      }
     }
 
     #repo-files-table {

diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index 02f274f9b02a868ff9fae275ab5874fe07839184..49a86de99dcbb7d0594f92dd047d7295ac31d1a9 100644 (file)
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -74,7 +74,7 @@
   --color-box-body: #353945;
   --color-text: #bbc0ca;
   --color-text-light: #969aa5;
-  --color-text-light-2: #666a75;
+  --color-text-light-2: #767a85;
   --color-footer: #2e323e;
   --color-timeline: #4a505c;
   --color-input-text: #d5dbe6;
@@ -82,13 +82,16 @@
   --color-input-border: #454a57;
   --color-input-border-hover: #505667;
   --color-navbar: #2a2e3a;
-  --color-label: #ffffff10;
+  --color-label: #ffffff0d;
   --color-label-hover: #ffffff20;
   --color-label-basic: #00000016;
   --color-label-border: #ffffff28;
   --color-hover: #ffffff0d;
   --color-active: #ffffff14;
   --color-menu: #2e323e;
+  --color-markdown-table-row: #ffffff06;
+  --color-markdown-code-block: #2a2e3a;
+  --color-button: #353846;
 }
 
 /* Background */
@@ -566,11 +569,6 @@ a.ui.basic.green.label:hover {
   color: #b75252 !important;
 }
 
-.ui.header,
-.ui.breadcrumb .divider {
-  color: var(--color-secondary-dark-6);
-}
-
 .ui.divider:not(.vertical):not(.horizontal) {
   border-bottom-color: var(--color-secondary);
   border-top-color: transparent;
@@ -645,12 +643,6 @@ a.ui.basic.green.label:hover {
   background-color: #a0cc75;
 }
 
-.ui.button {
-  background: #353846;
-  border: 1px solid var(--color-secondary);
-  color: #dbdbdb;
-}
-
 .ui.basic.button,
 .ui.basic.buttons .button {
   color: var(--color-secondary-dark-6);
@@ -693,7 +685,6 @@ a.ui.basic.green.label:hover {
   color: #dbdbdb;
 }
 
-.ui.table thead th,
 .ui.table > thead > tr > th {
   background: var(--color-secondary);
   color: #dbdbdb !important;
@@ -711,33 +702,6 @@ a.ui.basic.green.label:hover {
   color: var(--color-secondary-dark-6) !important;
 }
 
-.markdown:not(code) h2 {
-  border-bottom: 1px solid #304251;
-}
-
-.markdown:not(code) .highlight pre,
-.markdown:not(code) pre {
-  background-color: #2a2e3a;
-  border: 1px solid var(--color-secondary);
-}
-
-.markdown:not(code) table tr:nth-child(2n) {
-  background-color: #2a2e39;
-}
-
-.markdown:not(code) table tr:nth-child(2n-1) {
-  background-color: #383b44;
-}
-
-.markdown:not(code) table thead tr:nth-child(2n-1) {
-  background-color: #464c5d !important;
-}
-
-.markdown:not(code) table td,
-.markdown:not(code) table th {
-  border-color: var(--color-secondary) !important;
-}
-
 .repository.file.editor.edit,
 .repository.wiki.new .CodeMirror {
   .editor-preview,
@@ -1195,6 +1159,30 @@ a.blob-excerpt:hover {
   border-color: #6a737d !important;
 }
 
+/* invert emojis that are hard to read otherwise */
+.emoji[aria-label="check mark"],
+.emoji[aria-label="currency exchange"],
+.emoji[aria-label="TOP arrow"],
+.emoji[aria-label="END arrow"],
+.emoji[aria-label="ON! arrow"],
+.emoji[aria-label="SOON arrow"],
+.emoji[aria-label="heavy dollar sign"],
+.emoji[aria-label="copyright"],
+.emoji[aria-label="registered"],
+.emoji[aria-label="trade mark"],
+.emoji[aria-label="multiply"],
+.emoji[aria-label="plus"],
+.emoji[aria-label="minus"],
+.emoji[aria-label="divide"],
+.emoji[aria-label="curly loop"],
+.emoji[aria-label="double curly loop"],
+.emoji[aria-label="wavy dash"],
+.emoji[aria-label="paw prints"],
+.emoji[aria-label="musical note"],
+.emoji[aria-label="musical notes"] {
+  filter: invert(100%);
+}
+
 .editor-toolbar {
   background-color: var(--color-secondary);
   border-color: var(--color-secondary);
@@ -1382,19 +1370,6 @@ a.blob-excerpt:hover {
   }
 }
 
-.markdown:not(code) h1 {
-  border-bottom-color: #888;
-}
-
-.markdown:not(code) blockquote {
-  border-left-color: #888;
-}
-
-.markdown:not(code) code,
-.markdown:not(code) tt {
-  background-color: #2a2e3a;
-}
-
 footer .container .links > * {
   border-left-color: #888;
 }