Branch page and misc css improvements (#15208)

- Improve branches page, increase icon size, use octicons, use css vars
- Style placeholder color via css var
- Slightly increase contrast of input fields and active/hover states
- Add styling for select boxes in arc-green

diff --git a/templates/explore/code.tmpl b/templates/explore/code.tmpl
index 2465663a60344279553f303c6915f33cc1334a24..b22fe039a2a936894183acae6fc5da744a2b5d0e 100644 (file)
--- a/templates/explore/code.tmpl
+++ b/templates/explore/code.tmpl
@@ -8,7 +8,7 @@
             <div class="twelve wide field">
                 <input name="q" value="{{.Keyword}}" placeholder="{{.i18n.Tr "explore.search"}}..." autofocus>
             </div>
-            <div class="two wide field">
+            <div class="two wide field mx-2">
                 <select name="t">
                     <option value="">{{.i18n.Tr "explore.search.fuzzy"}}</option>
                     <option value="match" {{if eq .queryType "match"}}selected{{end}}>{{.i18n.Tr "explore.search.match"}}</option>

diff --git a/templates/repo/branch/list.tmpl b/templates/repo/branch/list.tmpl
index 87c05e7b42e703d616ae213011f0a701ebc598ed..de4f0fb57e9e4daf736782d76547e2c001d3f80d 100644 (file)
--- a/templates/repo/branch/list.tmpl
+++ b/templates/repo/branch/list.tmpl
@@ -25,7 +25,7 @@
                                                </td>
                                                <td class="right aligned overflow-visible">
                                                        <div class="ui basic jump dropdown icon button poping up" data-content="{{$.i18n.Tr "repo.branch.download" ($.DefaultBranch)}}" data-variation="tiny inverted" data-position="top right">
-                                                         <i class="download icon"></i>
+                                                         {{svg "octicon-download"}}
                                                          <div class="menu">
                                                            <a class="item archive-link" data-url="{{$.RepoLink}}/archive/{{EscapePound $.DefaultBranch}}.zip">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
                                                            <a class="item archive-link" data-url="{{$.RepoLink}}/archive/{{EscapePound $.DefaultBranch}}.tar.gz">{{svg "octicon-file-zip"}}&nbsp;TAR.GZ</a>
@@ -91,20 +91,20 @@
                                                                                        </a>
                                                                                        {{end}}
                                                                                {{else}}
-                                                                                       <a href="{{.LatestPullRequest.Issue.HTMLURL}}">{{if not .LatestPullRequest.IsSameRepo}}{{.LatestPullRequest.BaseRepo.FullName}}{{end}}#{{.LatestPullRequest.Issue.Index}}</a>
+                                                                                       <a href="{{.LatestPullRequest.Issue.HTMLURL}}" class="vm">{{if not .LatestPullRequest.IsSameRepo}}{{.LatestPullRequest.BaseRepo.FullName}}{{end}}#{{.LatestPullRequest.Issue.Index}}</a>
                                                                                        {{if .LatestPullRequest.HasMerged}}
-                                                                                               <a href="{{.LatestPullRequest.Issue.HTMLURL}}" class="ui text-label purple mini label">{{svg "octicon-git-merge"}} {{$.i18n.Tr "repo.pulls.merged"}}</a>
+                                                                                               <a href="{{.LatestPullRequest.Issue.HTMLURL}}" class="ui text-label purple large label vm">{{svg "octicon-git-merge" 16 "mr-2"}}{{$.i18n.Tr "repo.pulls.merged"}}</a>
                                                                                        {{else if .LatestPullRequest.Issue.IsClosed}}
-                                                                                               <a href="{{.LatestPullRequest.Issue.HTMLURL}}" class="ui text-label red mini label">{{svg "octicon-git-pull-request"}} {{$.i18n.Tr "repo.issues.closed_title"}}</a>
+                                                                                               <a href="{{.LatestPullRequest.Issue.HTMLURL}}" class="ui text-label red large label vm">{{svg "octicon-git-pull-request" 16 "mr-2"}}{{$.i18n.Tr "repo.issues.closed_title"}}</a>
                                                                                        {{else}}
-                                                                                               <a href="{{.LatestPullRequest.Issue.HTMLURL}}" class="ui text-label green mini label">{{svg "octicon-git-pull-request"}} {{$.i18n.Tr "repo.issues.open_title"}}</a>
+                                                                                               <a href="{{.LatestPullRequest.Issue.HTMLURL}}" class="ui text-label green large label vm">{{svg "octicon-git-pull-request" 16 "mr-2"}}{{$.i18n.Tr "repo.issues.open_title"}}</a>
                                                                                        {{end}}
                                                                                {{end}}
                                                                        </td>
                                                                        <td class="two wide right aligned overflow-visible">
                                                                                {{if (not .IsDeleted)}}
                                                                                        <div class="ui basic jump dropdown icon button poping up" data-content="{{$.i18n.Tr "repo.branch.download" (.Name)}}" data-variation="tiny inverted" data-position="top right">
-                                                                                               <i class="download icon"></i>
+                                                                                               {{svg "octicon-download"}}
                                                                                                <div class="menu">
                                                                                                        <a class="item archive-link" data-url="{{$.RepoLink}}/archive/{{EscapePound .Name}}.zip">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
                                                                                                        <a class="item archive-link" data-url="{{$.RepoLink}}/archive/{{EscapePound .Name}}.tar.gz">{{svg "octicon-file-zip"}}&nbsp;TAR.GZ</a>

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 1ce5e9d0ad9d3de2ea4975ff937bd6773170e59b..bbd80c45f7ac99d247bdfc37f3b6cbc48d030318 100644 (file)
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -98,8 +98,8 @@
   --color-navbar: #f8f8f8;
   --color-light: #00000004;
   --color-light-border: #0000001d;
-  --color-hover: #0000000d;
-  --color-active: #00000012;
+  --color-hover: #0000000f;
+  --color-active: #00000014;
   --color-menu: #ffffff;
   --color-card: #ffffff;
   --color-markdown-table-row: #00000008;
@@ -108,6 +108,7 @@
   --color-code-bg: #ffffff;
   --color-secondary-bg: #f4f4f4;
   --color-expand-button: #d8efff;
+  --color-placeholder-text: #aaa;
   /* 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>');
@@ -187,12 +188,14 @@ table {
 ::selection,
 .CodeMirror-selected {
   background: var(--color-primary-light-1) !important;
-  color: #fff !important;
+  color: var(--color-white) !important;
 }
 
 ::placeholder,
-.CodeMirror-placeholder {
-  color: #aaa !important;
+.CodeMirror-placeholder,
+.ui.dropdown:not(.button) > .default.text,
+.ui.default.dropdown:not(.button) > .text {
+  color: var(--color-placeholder-text) !important;
   opacity: 1 !important;
 }
 
@@ -1971,7 +1974,7 @@ table th[data-sortt-desc] {
 .ui.secondary.pointing.menu .dropdown.item:hover,
 .ui.secondary.pointing.menu .link.item:hover,
 .ui.secondary.pointing.menu a.item:hover {
-  color: var(--color-text);
+  color: var(--color-text-dark);
 }
 
 .ui.header {

diff --git a/web_src/less/_explore.less b/web_src/less/_explore.less
index 89fd2af629df60ad9155c1a7a41e15aa544692a8..aa7dee0f552d7b21c0d1ed8f28d2ddb030bf978c 100644 (file)
--- a/web_src/less/_explore.less
+++ b/web_src/less/_explore.less
@@ -48,7 +48,7 @@
 .ui.repository.branches {
   .info {
     font-size: 12px;
-    color: #808080;
+    color: var(--color-text-light);
     display: flex;
     white-space: pre;
     .commit-message {

diff --git a/web_src/less/_form.less b/web_src/less/_form.less
index 76c1a06990f6234387de1903630b206cb3a26b9b..4de0ed8d45332e3989aa0104a5819e86e5690860 100644 (file)
--- a/web_src/less/_form.less
+++ b/web_src/less/_form.less
@@ -2,6 +2,7 @@ input,
 textarea,
 .ui.input > input,
 .ui.form input:not([type]),
+.ui.form select,
 .ui.form textarea,
 .ui.form input[type="date"],
 .ui.form input[type="datetime-local"],
@@ -27,6 +28,7 @@ input:hover,
 textarea:hover,
 .ui.input input:hover,
 .ui.form input:not([type]):hover,
+.ui.form select:hover,
 .ui.form textarea:hover,
 .ui.form input[type="date"]:hover,
 .ui.form input[type="datetime-local"]:hover,
@@ -54,6 +56,7 @@ input:focus,
 textarea:focus,
 .ui.input input:focus,
 .ui.form input:not([type]):focus,
+.ui.form select:focus,
 .ui.form textarea:focus,
 .ui.form input[type="date"]:focus,
 .ui.form input[type="datetime-local"]:focus,
@@ -124,6 +127,11 @@ textarea:focus,
   background: var(--color-primary) !important;
 }
 
+/* match <select> padding to <input> */
+.ui.form select {
+  padding: .67857143em 1em;
+}
+
 .form {
   .help {
     color: #999999;

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index f2234c855817c3fec8d18ab517ac3fa3e0171403..14d2f3ddd46d868901d7019034bf89ecc6938223 100644 (file)
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -1261,7 +1261,7 @@
         max-width: 90px;
 
         &:last-child {
-          border-left: 1px solid var(--color-secondary);
+          border-left: 1px solid var(--color-secondary-dark-2);
         }
       }
 
@@ -1280,7 +1280,7 @@
       .bar {
         height: 4px;
         position: absolute;
-        background-color: var(--color-secondary);
+        background-color: var(--color-secondary-dark-2);
 
         &.bar-behind {
           right: 0;

diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index 18dde714f100c5ccabd4ad52fac0849df026f964..2f9bd4a4b182d21b6dd9a1a36c8651c01399f1c6 100644 (file)
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -87,14 +87,14 @@
   --color-footer: #2e323e;
   --color-timeline: #4c525e;
   --color-input-text: #d5dbe6;
-  --color-input-background: #2e323e;
+  --color-input-background: #292d39;
   --color-input-border: #454a57;
   --color-input-border-hover: #505667;
   --color-navbar: #2a2e3a;
   --color-light: #00000028;
   --color-light-border: #ffffff28;
-  --color-hover: #60606020;
-  --color-active: #60606040;
+  --color-hover: #ffffff10;
+  --color-active: #ffffff16;
   --color-menu: #2e323e;
   --color-card: #2e323e;
   --color-markdown-table-row: #ffffff06;
@@ -105,10 +105,7 @@
   --color-secondary-bg: #2a2e3a;
   --color-text-focus: #fff;
   --color-expand-button: #3c404d;
-}
-
-.repository.branches .commit-divergence .bar {
-  background: #6a737d;
+  --color-placeholder-text: #6a737d;
 }
 
 .ui.horizontal.segments > .segment {
@@ -119,11 +116,6 @@
   background: var(--color-primary-alpha-20) !important;
 }
 
-::placeholder,
-.CodeMirror-placeholder {
-  color: #6a737d !important;
-}
-
 [data-tooltip]::before,
 [data-tooltip]::after {
   background: #1b1c1d !important; /* .ui.inverted.popup */