magic_rb/forgejo
Template
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo synced 2024-11-29 13:16:10 +01:00
Code Issues Packages Projects Releases Wiki Activity

Branch page and misc css improvements (#15208)

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
This commit is contained in:
silverwind 2021-04-03 10:37:32 +02:00 committed by GitHub
parent 70d84f9b73
commit d0c9b3e208
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 31 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
templates/explore/code.tmpl
View file

@ -8,7 +8,7 @@
<div class="twelve wide field"> <div class="twelve wide field">
<input name="q" value="{{.Keyword}}" placeholder="{{.i18n.Tr "explore.search"}}..." autofocus> <input name="q" value="{{.Keyword}}" placeholder="{{.i18n.Tr "explore.search"}}..." autofocus>
</div> </div>
<div class="two wide field"> <div class="two wide field mx-2">
<select name="t"> <select name="t">
<option value="">{{.i18n.Tr "explore.search.fuzzy"}}</option> <option value="">{{.i18n.Tr "explore.search.fuzzy"}}</option>
<option value="match" {{if eq .queryType "match"}}selected{{end}}>{{.i18n.Tr "explore.search.match"}}</option> <option value="match" {{if eq .queryType "match"}}selected{{end}}>{{.i18n.Tr "explore.search.match"}}</option>

12
templates/repo/branch/list.tmpl
View file

@ -25,7 +25,7 @@
</td> </td>
<td class="right aligned overflow-visible"> <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"> <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"> <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}}.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> <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> </a>
{{end}} {{end}}
{{else}} {{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}} {{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}} {{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}} {{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}}
{{end}} {{end}}
</td> </td>
<td class="two wide right aligned overflow-visible"> <td class="two wide right aligned overflow-visible">
{{if (not .IsDeleted)}} {{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"> <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"> <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}}.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> <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
View file

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

2
web_src/less/_explore.less
View file

@ -48,7 +48,7 @@
.ui.repository.branches { .ui.repository.branches {
.info { .info {
font-size: 12px; font-size: 12px;
color: #808080; color: var(--color-text-light);
display: flex; display: flex;
white-space: pre; white-space: pre;
.commit-message { .commit-message {

8
web_src/less/_form.less
View file

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

4
web_src/less/_repository.less
View file

@ -1261,7 +1261,7 @@
max-width: 90px; max-width: 90px;
&:last-child { &:last-child {
border-left: 1px solid var(--color-secondary); border-left: 1px solid var(--color-secondary-dark-2);
} }
} }
@ -1280,7 +1280,7 @@
.bar { .bar {
height: 4px; height: 4px;
position: absolute; position: absolute;
background-color: var(--color-secondary); background-color: var(--color-secondary-dark-2);
&.bar-behind { &.bar-behind {
right: 0; right: 0;

16
web_src/less/themes/theme-arc-green.less
View file

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