mirror
/
gitea
mirror of https://github.com/go-gitea/gitea
2
0
Fork 0
Code Issues Releases Wiki Activity

Branch page and misc css improvements (#15208) (#15274)

Browse Source 
- 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
pull/15270/head^2
silverwind 4 years ago committed by GitHub
parent 33c4e246fe
commit 4bc8dfc6a3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 31 additions and 28 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      templates/explore/code.tmpl
  2. 12
      templates/repo/branch/list.tmpl
  3. 15
      web_src/less/_base.less
  4. 2
      web_src/less/_explore.less
  5. 8
      web_src/less/_form.less
  6. 4
      web_src/less/_repository.less
  7. 16
      web_src/less/themes/theme-arc-green.less

2
templates/explore/code.tmpl
Unescape View File

@ -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>

12
templates/repo/branch/list.tmpl
Unescape View File

@ -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>

15
web_src/less/_base.less
Unescape View File

@ -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;
@ -109,6 +109,7 @@
--color-markdown-code-block: #00000010;
--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>');
@ -188,12 +189,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;
}
@ -1972,7 +1975,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 {

2
web_src/less/_explore.less
Unescape View File

@ -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 {

8
web_src/less/_form.less
Unescape View File

@ -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;

4
web_src/less/_repository.less
Unescape View File

@ -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;

16
web_src/less/themes/theme-arc-green.less
Unescape View File

@ -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 */

Write Preview
Loading…
Cancel
Save