Skip to content

Commit 889543c

Browse files
silverwindsilverwind
committed
Branch page and misc css improvements
- 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
1 parent 1b762fc commit 889543c

File tree

7 files changed

+31
-28
lines changed

7 files changed

+31
-28
lines changed

‎templates/explore/code.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<div class="twelve wide field">
99
<input name="q" value="{{.Keyword}}" placeholder="{{.i18n.Tr "explore.search"}}..." autofocus>
1010
</div>
11-
<div class="two wide field">
11+
<div class="two wide field mx-2">
1212
<select name="t">
1313
<option value="">{{.i18n.Tr "explore.search.fuzzy"}}</option>
1414
<option value="match" {{if eq .queryType "match"}}selected{{end}}>{{.i18n.Tr "explore.search.match"}}</option>

‎templates/repo/branch/list.tmpl

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
</td>
2626
<td class="right aligned overflow-visible">
2727
<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">
28-
<i class="download icon"></i>
28+
{{svg "octicon-download"}}
2929
<div class="menu">
3030
<a class="item archive-link" data-url="{{$.RepoLink}}/archive/{{EscapePound $.DefaultBranch}}.zip">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
3131
<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 @@
9191
</a>
9292
{{end}}
9393
{{else}}
94-
<a href="{{.LatestPullRequest.Issue.HTMLURL}}">{{if not .LatestPullRequest.IsSameRepo}}{{.LatestPullRequest.BaseRepo.FullName}}{{end}}#{{.LatestPullRequest.Issue.Index}}</a>
94+
<a href="{{.LatestPullRequest.Issue.HTMLURL}}" class="vm">{{if not .LatestPullRequest.IsSameRepo}}{{.LatestPullRequest.BaseRepo.FullName}}{{end}}#{{.LatestPullRequest.Issue.Index}}</a>
9595
{{if .LatestPullRequest.HasMerged}}
96-
<a href="{{.LatestPullRequest.Issue.HTMLURL}}" class="ui text-label purple mini label">{{svg "octicon-git-merge"}} {{$.i18n.Tr "repo.pulls.merged"}}</a>
96+
<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>
9797
{{else if .LatestPullRequest.Issue.IsClosed}}
98-
<a href="{{.LatestPullRequest.Issue.HTMLURL}}" class="ui text-label red mini label">{{svg "octicon-git-pull-request"}} {{$.i18n.Tr "repo.issues.closed_title"}}</a>
98+
<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>
9999
{{else}}
100-
<a href="{{.LatestPullRequest.Issue.HTMLURL}}" class="ui text-label green mini label">{{svg "octicon-git-pull-request"}} {{$.i18n.Tr "repo.issues.open_title"}}</a>
100+
<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>
101101
{{end}}
102102
{{end}}
103103
</td>
104104
<td class="two wide right aligned overflow-visible">
105105
{{if (not .IsDeleted)}}
106106
<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">
107-
<i class="download icon"></i>
107+
{{svg "octicon-download"}}
108108
<div class="menu">
109109
<a class="item archive-link" data-url="{{$.RepoLink}}/archive/{{EscapePound .Name}}.zip">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
110110
<a class="item archive-link" data-url="{{$.RepoLink}}/archive/{{EscapePound .Name}}.tar.gz">{{svg "octicon-file-zip"}}&nbsp;TAR.GZ</a>

‎web_src/less/_base.less

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -98,8 +98,8 @@
9898
--color-navbar: #f8f8f8;
9999
--color-light: #00000004;
100100
--color-light-border: #0000001d;
101-
--color-hover: #0000000d;
102-
--color-active: #00000012;
101+
--color-hover: #0000000f;
102+
--color-active: #00000014;
103103
--color-menu: #ffffff;
104104
--color-card: #ffffff;
105105
--color-markdown-table-row: #00000008;
@@ -108,6 +108,7 @@
108108
--color-code-bg: #ffffff;
109109
--color-secondary-bg: #f4f4f4;
110110
--color-expand-button: #d8efff;
111+
--color-placeholder-text: #aaa;
111112
/* backgrounds */
112113
--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>');
113114
--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 {
187188
::selection,
188189
.CodeMirror-selected {
189190
background: var(--color-primary-light-1) !important;
190-
color: #fff !important;
191+
color: var(--color-white) !important;
191192
}
192193

193194
::placeholder,
194-
.CodeMirror-placeholder {
195-
color: #aaa !important;
195+
.CodeMirror-placeholder,
196+
.ui.dropdown:not(.button) > .default.text,
197+
.ui.default.dropdown:not(.button) > .text {
198+
color: var(--color-placeholder-text) !important;
196199
opacity: 1 !important;
197200
}
198201

@@ -1971,7 +1974,7 @@ table th[data-sortt-desc] {
19711974
.ui.secondary.pointing.menu .dropdown.item:hover,
19721975
.ui.secondary.pointing.menu .link.item:hover,
19731976
.ui.secondary.pointing.menu a.item:hover {
1974-
color: var(--color-text);
1977+
color: var(--color-text-dark);
19751978
}
19761979

19771980
.ui.header {

‎web_src/less/_explore.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
.ui.repository.branches {
4949
.info {
5050
font-size: 12px;
51-
color: #808080;
51+
color: var(--color-text-light);
5252
display: flex;
5353
white-space: pre;
5454
.commit-message {

‎web_src/less/_form.less

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ input,
22
textarea,
33
.ui.input > input,
44
.ui.form input:not([type]),
5+
.ui.form select,
56
.ui.form textarea,
67
.ui.form input[type="date"],
78
.ui.form input[type="datetime-local"],
@@ -27,6 +28,7 @@ input:hover,
2728
textarea:hover,
2829
.ui.input input:hover,
2930
.ui.form input:not([type]):hover,
31+
.ui.form select:hover,
3032
.ui.form textarea:hover,
3133
.ui.form input[type="date"]:hover,
3234
.ui.form input[type="datetime-local"]:hover,
@@ -54,6 +56,7 @@ input:focus,
5456
textarea:focus,
5557
.ui.input input:focus,
5658
.ui.form input:not([type]):focus,
59+
.ui.form select:focus,
5760
.ui.form textarea:focus,
5861
.ui.form input[type="date"]:focus,
5962
.ui.form input[type="datetime-local"]:focus,
@@ -124,6 +127,11 @@ textarea:focus,
124127
background: var(--color-primary) !important;
125128
}
126129

130+
/* match <select> padding to <input> */
131+
.ui.form select {
132+
padding: .67857143em 1em;
133+
}
134+
127135
.form {
128136
.help {
129137
color: #999999;

‎web_src/less/_repository.less

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1270,7 +1270,7 @@
12701270
max-width: 90px;
12711271

12721272
&:last-child {
1273-
border-left: 1px solid var(--color-secondary);
1273+
border-left: 1px solid var(--color-secondary-dark-2);
12741274
}
12751275
}
12761276

@@ -1289,7 +1289,7 @@
12891289
.bar {
12901290
height: 4px;
12911291
position: absolute;
1292-
background-color: var(--color-secondary);
1292+
background-color: var(--color-secondary-dark-2);
12931293

12941294
&.bar-behind {
12951295
right: 0;

‎web_src/less/themes/theme-arc-green.less

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -87,14 +87,14 @@
8787
--color-footer: #2e323e;
8888
--color-timeline: #4c525e;
8989
--color-input-text: #d5dbe6;
90-
--color-input-background: #2e323e;
90+
--color-input-background: #292d39;
9191
--color-input-border: #454a57;
9292
--color-input-border-hover: #505667;
9393
--color-navbar: #2a2e3a;
9494
--color-light: #00000028;
9595
--color-light-border: #ffffff28;
96-
--color-hover: #60606020;
97-
--color-active: #60606040;
96+
--color-hover: #ffffff10;
97+
--color-active: #ffffff16;
9898
--color-menu: #2e323e;
9999
--color-card: #2e323e;
100100
--color-markdown-table-row: #ffffff06;
@@ -105,10 +105,7 @@
105105
--color-secondary-bg: #2a2e3a;
106106
--color-text-focus: #fff;
107107
--color-expand-button: #3c404d;
108-
}
109-
110-
.repository.branches .commit-divergence .bar {
111-
background: #6a737d;
108+
--color-placeholder-text: #6a737d;
112109
}
113110

114111
.ui.horizontal.segments > .segment {
@@ -119,11 +116,6 @@
119116
background: var(--color-primary-alpha-20) !important;
120117
}
121118

122-
::placeholder,
123-
.CodeMirror-placeholder {
124-
color: #6a737d !important;
125-
}
126-
127119
[data-tooltip]::before,
128120
[data-tooltip]::after {
129121
background: #1b1c1d !important; /* .ui.inverted.popup */

0 commit comments

Comments
 (0)