- 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-greentags/v1.14.0
@@ -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> |
@@ -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"}} ZIP</a> | |||
<a class="item archive-link" data-url="{{$.RepoLink}}/archive/{{EscapePound $.DefaultBranch}}.tar.gz">{{svg "octicon-file-zip"}} 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"}} ZIP</a> | |||
<a class="item archive-link" data-url="{{$.RepoLink}}/archive/{{EscapePound .Name}}.tar.gz">{{svg "octicon-file-zip"}} TAR.GZ</a> |
@@ -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 { |
@@ -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 { |
@@ -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; |
@@ -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; |
@@ -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 */ |