Dropdowns, Labels fixes and more CSS tweaks (#13733)

* Dropdowns and Labels fixes

- Rework dropdown, menu and label styles
- Improve issue sidebar milestone and label sections
- Fix archived repo and private org badge
- Move more colors to CSS vars
- Move issue number to end of title on issue page

* more dropdown fixes

* fix basic blue labels - fixes #13731

* improve class setting on svg

Co-authored-by: zeripath <art27@cantab.net>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>

diff --git a/templates/explore/repo_list.tmpl b/templates/explore/repo_list.tmpl
index 9e4e438a849e4960a829a2ece2f6f64e7ba8dc8c..6899971a06ecb08b64d7c975e3b11e0d91c16346 100644 (file)
--- a/templates/explore/repo_list.tmpl
+++ b/templates/explore/repo_list.tmpl
@@ -8,7 +8,9 @@
                                <a class="name" href="{{.Link}}">
                                        {{if or $.PageIsExplore $.PageIsProfileStarList }}{{if .Owner}}{{.Owner.Name}} / {{end}}{{end}}{{.Name}}
                                </a>
-                               {{if .IsArchived}}<span class="ui compact label">{{$.i18n.Tr "repo.desc.archived"}}</span>{{end}}
+                               {{if .IsArchived}}
+          <span class="ui basic label">{{$.i18n.Tr "repo.desc.archived"}}</span>
+        {{end}}
                                {{if .IsTemplate}}
                                        {{if .IsPrivate}}
                                                <span class="ui basic label">{{$.i18n.Tr "repo.desc.private_template"}}</span>

diff --git a/templates/org/home.tmpl b/templates/org/home.tmpl
index 7f72c61e9224a832ae6b720db96ba8e479071fc0..12630b70d7771806702a553d72ea79e5771e01a5 100644 (file)
--- a/templates/org/home.tmpl
+++ b/templates/org/home.tmpl
@@ -1,5 +1,5 @@
 {{template "base/head" .}}
-<div class="organization profile">
+<div class="organization profile mt-5">
        {{/* overflow: auto is the clearfix - this avoids the image going beyond
        the container where it is supposed to stay inside. */}}
        <div class="ui container" style="overflow: auto">
@@ -8,8 +8,8 @@
                        <div class="ui header">
                                {{.Org.DisplayName}}
                                <span class="org-visibility">
-                                       {{if .Org.Visibility.IsLimited}}<div class="ui large orange horizontal label">{{.i18n.Tr "org.settings.visibility.limited_shortname"}}</div>{{end}}
-                                       {{if .Org.Visibility.IsPrivate}}<div class="ui large red horizontal label">{{.i18n.Tr "org.settings.visibility.private_shortname"}}</div>{{end}}
+                                       {{if .Org.Visibility.IsLimited}}<div class="ui large basic horizontal label">{{.i18n.Tr "org.settings.visibility.limited_shortname"}}</div>{{end}}
+                                       {{if .Org.Visibility.IsPrivate}}<div class="ui large basic horizontal label">{{.i18n.Tr "org.settings.visibility.private_shortname"}}</div>{{end}}
                                </span>
                                {{if .IsOrganizationOwner}}<a class="middle text grey" href="{{.OrgLink}}/settings">{{svg "octicon-gear"}}</a>{{end}}
                        </div>

diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
index 77f2362f8ea9a9b2bf717c9bf062a09699f87f52..51f49b59946dd212e8c8d897d1bcc7f5ad381365 100644 (file)
--- a/templates/repo/header.tmpl
+++ b/templates/repo/header.tmpl
@@ -28,7 +28,9 @@
                                                {{end}}
                                        {{end}}
                                {{end}}
-                               {{if .IsArchived}}<span class="ui compact label">{{$.i18n.Tr "repo.desc.archived"}}</span>{{end}}
+                               {{if .IsArchived}}
+          <span class="ui basic label">{{$.i18n.Tr "repo.desc.archived"}}</span>
+        {{end}}
                                {{if .IsMirror}}<div class="fork-flag">{{$.i18n.Tr "repo.mirror_from"}} <a target="_blank" rel="noopener noreferrer" href="{{if .SanitizedOriginalURL}}{{.SanitizedOriginalURL}}{{else}}{{MirrorAddress $.Mirror}}{{end}}">{{if .SanitizedOriginalURL}}{{.SanitizedOriginalURL}}{{else}}{{MirrorAddress $.Mirror}}{{end}}</a></div>{{end}}
                                {{if .IsFork}}<div class="fork-flag">{{$.i18n.Tr "repo.forked_from"}} <a href="{{.BaseRepo.Link}}">{{SubStr .BaseRepo.RelLink 1 -1}}</a></div>{{end}}
                                {{if .IsGenerated}}<div class="fork-flag">{{$.i18n.Tr "repo.generated_from"}} <a href="{{.TemplateRepo.Link}}">{{SubStr .TemplateRepo.RelLink 1 -1}}</a></div>{{end}}

diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index 73508bdd2fe9a97cbbec945d24fddd403abf21db..98c5aa5738c368e22483db199115633bc22bd892 100644 (file)
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -23,12 +23,12 @@
                                </div>
                        {{end}}
                </div>
-               <div class="ui" id="repo-topics">
-               {{range .Topics}}<a class="ui repo-topic small label topic" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
-               {{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<a id="manage_topic">{{.i18n.Tr "repo.topic.manage_topics"}}</a>{{end}}
+               <div class="mt-3" id="repo-topics">
+               {{range .Topics}}<a class="ui repo-topic large label topic" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
+               {{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<a id="manage_topic" class="muted">{{.i18n.Tr "repo.topic.manage_topics"}}</a>{{end}}
                </div>
                {{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
-               <div class="ui repo-topic-edit grid form segment error" id="topic_edit" style="display:none">
+               <div class="ui repo-topic-edit grid form" id="topic_edit" style="display:none">
                        <div class="fourteen wide column">
                                <div class="field">
                                        <div class="ui fluid multiple search selection dropdown">

diff --git a/templates/repo/issue/milestone_issues.tmpl b/templates/repo/issue/milestone_issues.tmpl
index 9958efc07dcbd65301406902c876d373488f4983..5794ac422f3684fbe6e37a9bcd805ad5988536f7 100644 (file)
--- a/templates/repo/issue/milestone_issues.tmpl
+++ b/templates/repo/issue/milestone_issues.tmpl
@@ -14,9 +14,9 @@
                        {{if not .Repository.IsArchived}}
                                <div class="column right aligned">
                                        {{if or .CanWriteIssues .CanWritePulls}}
-                                       <a class="ui grey button" href="{{.RepoLink}}/milestones/{{.MilestoneID}}/edit">{{.i18n.Tr "repo.milestones.edit"}}</a>
+                                       <a class="ui button" href="{{.RepoLink}}/milestones/{{.MilestoneID}}/edit">{{.i18n.Tr "repo.milestones.edit"}}</a>
                                        {{end}}
-                                       <a class="ui green button" href="{{.RepoLink}}/issues/new{{if .NewIssueChooseTemplate}}/choose{{end}}?milestone={{.MilestoneID}}">{{.i18n.Tr "repo.issues.new"}}</a>
+                                       <a class="ui primary button" href="{{.RepoLink}}/issues/new{{if .NewIssueChooseTemplate}}/choose{{end}}?milestone={{.MilestoneID}}">{{.i18n.Tr "repo.issues.new"}}</a>
                                </div>
                        {{end}}
                </div>

diff --git a/templates/repo/issue/new_form.tmpl b/templates/repo/issue/new_form.tmpl
index 73a3851e1759db625c6e840ac8425c2a706ceaa2..4814ba590b3ef6b552dd22282239c521c4d3fab7 100644 (file)
--- a/templates/repo/issue/new_form.tmpl
+++ b/templates/repo/issue/new_form.tmpl
@@ -99,21 +99,25 @@
                                                {{if .OpenMilestones}}
                                                        <div class="divider"></div>
                                                        <div class="header">
-                                                               {{svg "octicon-milestone"}}
                                                                {{.i18n.Tr "repo.issues.new.open_milestone"}}
                                                        </div>
                                                        {{range .OpenMilestones}}
-                                                               <div class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}"> {{.Name}}</div>
+                                                               <a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}">
+                                                                       {{svg "octicon-milestone" 16 "mr-2"}}
+                                                                       {{.Name}}
+                                                               </a>
                                                        {{end}}
                                                {{end}}
                                                {{if .ClosedMilestones}}
                                                        <div class="divider"></div>
                                                        <div class="header">
-                                                               {{svg "octicon-milestone"}}
                                                                {{.i18n.Tr "repo.issues.new.closed_milestone"}}
                                                        </div>
                                                        {{range .ClosedMilestones}}
-                                                               <a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}"> {{.Name}}</a>
+                                                               <a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}">
+                                                                       {{svg "octicon-milestone" 16 "mr-2"}}
+                                                                       {{.Name}}
+                                                               </a>
                                                        {{end}}
                                                {{end}}
                                        {{end}}
@@ -123,7 +127,10 @@
                                <span class="no-select item {{if .Milestone}}hide{{end}}">{{.i18n.Tr "repo.issues.new.no_milestone"}}</span>
                                <div class="selected">
                                        {{if .Milestone}}
-                                               <a class="item" href="{{.RepoLink}}/issues?milestone={{.Milestone.ID}}"> {{.Milestone.Name}}</a>
+                                               <a class="item muted sidebar-item-link" href="{{.RepoLink}}/issues?milestone={{.Milestone.ID}}">
+                                                       {{svg "octicon-milestone" 18 "mr-3"}}
+                                                       {{.Milestone.Name}}
+                                               </a>
                                        {{end}}
                                </div>
                        </div>
@@ -133,61 +140,66 @@
 
                        <input id="project_id" name="project_id" type="hidden" value="{{.project_id}}">
                        <div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-project dropdown">
-                         <span class="text">
-                           <strong>{{.i18n.Tr "repo.issues.new.projects"}}</strong>
-                           {{if .HasIssuesOrPullsWritePermission}}
-                             {{svg "octicon-gear"}}
-                           {{end}}
-                         </span>
-                         <div class="menu">
-                           <div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_project_title"}}</div>
-                           {{if or .OpenProjects .ClosedProjects}}
-                           <div class="ui icon search input">
-                             <i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
-                             <input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_projects"}}">
-                           </div>
-                           {{end}}
-                           <div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_projects"}}</div>
-                           {{if and (not .OpenProjects) (not .ClosedProjects)}}
-                             <div class="header" style="text-transform: none;font-size:14px;">
-                               {{.i18n.Tr "repo.issues.new.no_items"}}
-                             </div>
-                           {{else}}
-                             {{if .OpenProjects}}
-                               <div class="divider"></div>
-                               <div class="header">
-                                 {{svg "octicon-project"}}
-                                 {{.i18n.Tr "repo.issues.new.open_projects"}}
-                               </div>
-                               {{range .OpenProjects}}
-                                 <div class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/projects/{{.ID}}">{{.Title}}</div>
-                               {{end}}
-                             {{end}}
-                             {{if .ClosedProjects}}
-                               <div class="divider"></div>
-                               <div class="header">
-                                 {{svg "octicon-project"}}
-                                 {{.i18n.Tr "repo.issues.new.closed_projects"}}
-                               </div>
-                               {{range .ClosedProjects}}
-                                 <a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/projects/{{.ID}}">{{.Title}}</a>
-                               {{end}}
-                             {{end}}
-                           {{end}}
-                         </div>
+                               <span class="text">
+                                       <strong>{{.i18n.Tr "repo.issues.new.projects"}}</strong>
+                                       {{if .HasIssuesOrPullsWritePermission}}
+                                               {{svg "octicon-gear"}}
+                                       {{end}}
+                               </span>
+                               <div class="menu">
+                                       <div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_project_title"}}</div>
+                                       {{if or .OpenProjects .ClosedProjects}}
+                                       <div class="ui icon search input">
+                                               <i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
+                                               <input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_projects"}}">
+                                       </div>
+                                       {{end}}
+                                       <div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_projects"}}</div>
+                                       {{if and (not .OpenProjects) (not .ClosedProjects)}}
+                                               <div class="header" style="text-transform: none;font-size:14px;">
+                                                       {{.i18n.Tr "repo.issues.new.no_items"}}
+                                               </div>
+                                       {{else}}
+                                               {{if .OpenProjects}}
+                                                       <div class="divider"></div>
+                                                       <div class="header">
+                                                               {{.i18n.Tr "repo.issues.new.open_projects"}}
+                                                       </div>
+                                                       {{range .OpenProjects}}
+                                                               <a class="item muted sidebar-item-link" data-id="{{.ID}}" data-href="{{$.RepoLink}}/projects/{{.ID}}">
+                                                                       {{svg "octicon-project" 18 "mr-3"}}
+                                                                       {{.Title}}
+                                                               </a>
+                                                       {{end}}
+                                               {{end}}
+                                               {{if .ClosedProjects}}
+                                                       <div class="divider"></div>
+                                                       <div class="header">
+                                                               {{.i18n.Tr "repo.issues.new.closed_projects"}}
+                                                       </div>
+                                                       {{range .ClosedProjects}}
+                                                               <a class="item muted sidebar-item-link" data-id="{{.ID}}" data-href="{{$.RepoLink}}/projects/{{.ID}}">
+                                                                       {{svg "octicon-project" 18 "mr-3"}}
+                                                                       {{.Title}}
+                                                               </a>
+                                                       {{end}}
+                                               {{end}}
+                                       {{end}}
+                               </div>
                        </div>
                        <div class="ui select-project list">
-                         <span class="no-select item {{if .Project}}hide{{end}}">{{.i18n.Tr "repo.issues.new.no_projects"}}</span>
-                         <div class="selected">
-                           {{if .Project}}
-                             <a class="item" href="{{.RepoLink}}/projects/{{.Project.ID}}">{{.Project.Title}}</a>
-                           {{end}}
-                         </div>
+                               <span class="no-select item {{if .Project}}hide{{end}}">{{.i18n.Tr "repo.issues.new.no_projects"}}</span>
+                               <div class="selected">
+                                       {{if .Project}}
+                                               <a class="item muted sidebar-item-link" href="{{.RepoLink}}/projects/{{.Project.ID}}">
+                                                       {{svg "octicon-project" 18 "mr-3"}}
+                                                       {{.Project.Title}}
+                                               </a>
+                                       {{end}}
+                               </div>
                        </div>
                        {{end}}
-
                        <div class="ui divider"></div>
-
                                <input id="assignee_ids" name="assignee_ids" type="hidden" value="{{.assignee_ids}}">
                                <div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-assignees dropdown">
                                        <span class="text">
@@ -204,7 +216,7 @@
                                                </div>
                                                <div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_assignees"}}</div>
                                                {{range .Assignees}}
-                                                       <a class="item" href="#" data-id="{{.ID}}" data-id-selector="#assignee_{{.ID}}">
+                                                       <a class="item muted" href="#" data-id="{{.ID}}" data-id-selector="#assignee_{{.ID}}">
                                                                <span class="octicon-check invisible">{{svg "octicon-check"}}</span>
                                                                <span class="text">
                                                                        <img class="ui avatar image" src="{{.RelAvatarLink}}"> {{.GetDisplayName}}
@@ -218,7 +230,7 @@
                                                {{.i18n.Tr "repo.issues.new.no_assignees"}}
                                        </span>
                                        {{range .Assignees}}
-                                               <a style="padding: 5px;color:rgba(0, 0, 0, 0.87);" class="hide item" id="assignee_{{.ID}}" href="{{$.RepoLink}}/issues?assignee={{.ID}}">
+                                               <a class="hide item p-2 muted" id="assignee_{{.ID}}" href="{{$.RepoLink}}/issues?assignee={{.ID}}">
                                                        <img class="ui avatar image" src="{{.RelAvatarLink}}" style="vertical-align: middle;">&nbsp;{{.GetDisplayName}}
                                                </a>
                                        {{end}}

diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl
index 18bd11ce6a1e34ae37d9d4c9341f6d91008884b6..de1fd582325c3f9631ebab5aacbbef9293c060cf 100644 (file)
--- a/templates/repo/issue/view_content/sidebar.tmpl
+++ b/templates/repo/issue/view_content/sidebar.tmpl
@@ -55,8 +55,8 @@
                                {{range .PullReviewers}}
                                        <div class="item mb-2">
                                                {{if .User}}
-                                                       <a href="{{.User.HomeLink}}">
-                                                               <img class="ui avatar image mr-2" src="{{.User.RelAvatarLink}}">
+                                                       <a class="muted sidebar-item-link" href="{{.User.HomeLink}}">
+                                                               <img class="ui avatar image mr-3" src="{{.User.RelAvatarLink}}">
                                                                {{.User.GetDisplayName}}
                                                        </a>
                                                {{else if .Team}}
@@ -153,21 +153,25 @@
                                        {{if .OpenMilestones}}
                                                <div class="divider"></div>
                                                <div class="header">
-                                                       {{svg "octicon-milestone"}}
                                                        {{.i18n.Tr "repo.issues.new.open_milestone"}}
                                                </div>
                                                {{range .OpenMilestones}}
-                                                       <div class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}"> {{.Name}}</div>
+                                                       <a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}">
+                                                               {{svg "octicon-milestone" 16 "mr-2"}}
+                                                               {{.Name}}
+                                                       </a>
                                                {{end}}
                                        {{end}}
                                        {{if .ClosedMilestones}}
                                                <div class="divider"></div>
                                                <div class="header">
-                                                       {{svg "octicon-milestone"}}
                                                        {{.i18n.Tr "repo.issues.new.closed_milestone"}}
                                                </div>
                                                {{range .ClosedMilestones}}
-                                                       <a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}"> {{.Name}}</a>
+                                                       <a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}">
+                                                               {{svg "octicon-milestone" 16 "mr-2"}}
+                                                               {{.Name}}
+                                                       </a>
                                                {{end}}
                                        {{end}}
                                {{end}}
@@ -177,14 +181,17 @@
                        <span class="no-select item {{if .Issue.Milestone}}hide{{end}}">{{.i18n.Tr "repo.issues.new.no_milestone"}}</span>
                        <div class="selected">
                                {{if .Issue.Milestone}}
-                                       <a class="item" href="{{.RepoLink}}/milestone/{{.Issue.Milestone.ID}}"> {{.Issue.Milestone.Name}}</a>
+                                       <a class="item muted sidebar-item-link" href="{{.RepoLink}}/milestone/{{.Issue.Milestone.ID}}">
+                                               {{svg "octicon-milestone" 18 "mr-3"}}
+                                               {{.Issue.Milestone.Name}}
+                                       </a>
                                {{end}}
                        </div>
                </div>
 
                {{if .IsProjectsEnabled}}
                <div class="ui divider"></div>
-               
+
                <div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-project dropdown">
                        <span class="text">
                                <strong>{{.i18n.Tr "repo.issues.new.projects"}}</strong>
@@ -195,21 +202,25 @@
                                {{if .OpenProjects}}
                                        <div class="divider"></div>
                                        <div class="header">
-                                               {{svg "octicon-project"}}
                                                {{.i18n.Tr "repo.issues.new.open_projects"}}
                                        </div>
                                        {{range .OpenProjects}}
-                                               <div class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/projects/{{.ID}}">{{svg "octicon-project"}} {{.Title}}</div>
+                                               <a class="item muted sidebar-item-link" data-id="{{.ID}}" data-href="{{$.RepoLink}}/projects/{{.ID}}">
+                                                       {{svg "octicon-project" 18 "mr-3"}}
+                                                       {{.Title}}
+                                               </a>
                                        {{end}}
                                {{end}}
                                {{if .ClosedProjects}}
                                        <div class="divider"></div>
                                        <div class="header">
-                                               {{svg "octicon-project"}}
                                                {{.i18n.Tr "repo.issues.new.closed_projects"}}
                                        </div>
                                        {{range .ClosedProjects}}
-                                               <a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/projects/{{.ID}}">{{svg "octicon-project"}} {{.Title}}</a>
+                                               <a class="item muted sidebar-item-link" data-id="{{.ID}}" data-href="{{$.RepoLink}}/projects/{{.ID}}">
+                                                       {{svg "octicon-project" 18 "mr-3"}}
+                                                       {{.Title}}
+                                               </a>
                                        {{end}}
                                {{end}}
                        </div>
@@ -218,7 +229,10 @@
                        <span class="no-select item {{if .Issue.ProjectID}}hide{{end}}">{{.i18n.Tr "repo.issues.new.no_projects"}}</span>
                        <div class="selected">
                                {{if .Issue.ProjectID}}
-                                       <a class="item" href="{{.RepoLink}}/projects/{{.Issue.ProjectID}}">{{svg "octicon-project"}} {{.Issue.Project.Title}}</a>
+                                       <a class="item muted sidebar-item-link" href="{{.RepoLink}}/projects/{{.Issue.ProjectID}}">
+                                               {{svg "octicon-project" 18 "mr-3"}}
+                                               {{.Issue.Project.Title}}
+                                       </a>
                                {{end}}
                        </div>
                </div>
@@ -264,9 +278,9 @@
                        <span class="no-select item {{if .Issue.Assignees}}hide{{end}}">{{.i18n.Tr "repo.issues.new.no_assignees"}}</span>
                        <div class="selected">
                                {{range .Issue.Assignees}}
-                                       <div class="item" style="margin-bottom: 10px;">
-                                               <a href="{{$.RepoLink}}/{{if $.Issue.IsPull}}pulls{{else}}issues{{end}}?assignee={{.ID}}">
-                                                       <img class="ui avatar image mr-2" src="{{.RelAvatarLink}}">
+                                       <div class="item">
+                                               <a class="muted sidebar-item-link" href="{{$.RepoLink}}/{{if $.Issue.IsPull}}pulls{{else}}issues{{end}}?assignee={{.ID}}">
+                                                       <img class="ui avatar image mr-3" src="{{.RelAvatarLink}}">
                                                        {{.GetDisplayName}}
                                                </a>
                                        </div>

diff --git a/templates/repo/issue/view_title.tmpl b/templates/repo/issue/view_title.tmpl
index db5514217049bb9e4ea51c4eccbaef5ef1d6daae..e2a14502f4695dac622ca48a5725b5a5c4c30590 100644 (file)
--- a/templates/repo/issue/view_title.tmpl
+++ b/templates/repo/issue/view_title.tmpl
@@ -1,21 +1,22 @@
 <div class="sixteen wide column title">
        <div class="issue-title" id="issue-title-wrapper">
                {{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}}
-               <div class="edit-button">
-                       <div id="edit-title" class="ui basic green not-in-edit button">{{.i18n.Tr "repo.issues.edit"}}</div>
-               </div>
+                       <div class="edit-button">
+                               <div id="edit-title" class="ui basic green not-in-edit button">{{.i18n.Tr "repo.issues.edit"}}</div>
+                       </div>
                {{end}}
                <h1>
-                       <span class="index">#{{.Issue.Index}}</span> <span id="issue-title">{{RenderEmoji .Issue.Title}}</span>
+                       <span id="issue-title">{{RenderEmoji .Issue.Title}}</span>
+                       <span class="index">#{{.Issue.Index}}</span>
                        <div id="edit-title-input" class="ui input" style="display: none">
                                <input value="{{.Issue.Title}}" maxlength="255">
                        </div>
                </h1>
                {{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}}
-               <div class="edit-buttons">
+                       <div class="edit-buttons">
                                <div id="cancel-edit-title" class="ui basic blue in-edit button" style="display: none">{{.i18n.Tr "repo.issues.cancel"}}</div>
                                <div id="save-edit-title" class="ui green in-edit button" style="display: none" data-update-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/title" {{if .Issue.IsPull}}data-target-update-url="{{$.RepoLink}}/pull/{{.Issue.Index}}/target_branch"{{end}}>{{.i18n.Tr "repo.issues.save"}}</div>
-               </div>
+                       </div>
                {{end}}
        </div>
        {{if .HasMerged}}
@@ -45,37 +46,37 @@
                                <span id="pull-desc" class="pull-desc">
                                 <a {{if gt .Issue.Poster.ID 0}}href="{{.Issue.Poster.HomeLink}}"{{end}}>{{.Issue.Poster.GetDisplayName}}</a>
                                 {{$.i18n.Tr "repo.pulls.title_desc" .NumCommits (.HeadTarget|Escape) (.BaseTarget|Escape) | Str2html}}
-                           </span>
+                                       </span>
                        {{end}}
                        <span id="pull-desc-edit" style="display: none">
-                <div class="ui floating filter dropdown">
-                       <div class="ui basic small button">
-                               <span class="text">{{.i18n.Tr "repo.pulls.compare_compare"}}: {{$.HeadTarget}}</span>
-                       </div>
-                </div>
-                {{svg "octicon-arrow-right"}}
-                 <div class="ui floating filter dropdown" data-no-results="{{.i18n.Tr "repo.pulls.no_results"}}">
-                       <div class="ui basic small button">
-                               <span class="text" id="pull-target-branch" data-basename="{{$.BaseName}}" data-branch="{{$.BaseBranch}}">{{.i18n.Tr "repo.pulls.compare_base"}}: {{$.BaseName}}:{{$.BaseBranch}}</span>
-                               {{svg "octicon-triangle-down" 14 "dropdown icon"}}
-                       </div>
-                       <div class="menu">
-                               <div class="ui icon search input">
-                                       <i class="icon df ac jc m-0">{{svg "octicon-filter" 16}}</i>
-                                       <input name="search" placeholder="{{.i18n.Tr "repo.pulls.filter_branch"}}...">
-                               </div>
-                               <div class="scrolling menu" id="branch-select">
-                                       {{range .Branches}}
-                                               {{ $sameBase := ne $.BaseName $.HeadUserName }}
-                                               {{ $differentBranch := ne . $.HeadBranch }}
-                                               {{ if or $sameBase $differentBranch }}
-                                                       <div class="item {{if eq $.BaseBranch .}}selected{{end}}" data-branch="{{.}}">{{$.BaseName}}{{if $.HeadRepo}}/{{$.HeadRepo}}{{end}}:{{.}}</div>
-                                               {{ end }}
-                                       {{end}}
-                               </div>
-                       </div>
-                </div>
-           </span>
+                                                               <div class="ui floating filter dropdown">
+                                                                       <div class="ui basic small button">
+                                                                               <span class="text">{{.i18n.Tr "repo.pulls.compare_compare"}}: {{$.HeadTarget}}</span>
+                                                                       </div>
+                                                               </div>
+                                                               {{svg "octicon-arrow-right"}}
+                                                                <div class="ui floating filter dropdown" data-no-results="{{.i18n.Tr "repo.pulls.no_results"}}">
+                                                                       <div class="ui basic small button">
+                                                                               <span class="text" id="pull-target-branch" data-basename="{{$.BaseName}}" data-branch="{{$.BaseBranch}}">{{.i18n.Tr "repo.pulls.compare_base"}}: {{$.BaseName}}:{{$.BaseBranch}}</span>
+                                                                               {{svg "octicon-triangle-down" 14 "dropdown icon"}}
+                                                                       </div>
+                                                                       <div class="menu">
+                                                                               <div class="ui icon search input">
+                                                                                       <i class="icon df ac jc m-0">{{svg "octicon-filter" 16}}</i>
+                                                                                       <input name="search" placeholder="{{.i18n.Tr "repo.pulls.filter_branch"}}...">
+                                                                               </div>
+                                                                               <div class="scrolling menu" id="branch-select">
+                                                                                       {{range .Branches}}
+                                                                                               {{ $sameBase := ne $.BaseName $.HeadUserName }}
+                                                                                               {{ $differentBranch := ne . $.HeadBranch }}
+                                                                                               {{ if or $sameBase $differentBranch }}
+                                                                                                       <div class="item {{if eq $.BaseBranch .}}selected{{end}}" data-branch="{{.}}">{{$.BaseName}}{{if $.HeadRepo}}/{{$.HeadRepo}}{{end}}:{{.}}</div>
+                                                                                               {{ end }}
+                                                                                       {{end}}
+                                                                               </div>
+                                                                       </div>
+                                                               </div>
+                                        </span>
                {{end}}
        {{else}}
                {{ $createdStr:= TimeSinceUnix .Issue.CreatedUnix $.Lang }}

diff --git a/templates/repo/release/new.tmpl b/templates/repo/release/new.tmpl
index 883d1039989c935d462fee1984c69b4b6b38bf8a..7c38f540194a12bfc816f35bc8bbb09656b4049f 100644 (file)
--- a/templates/repo/release/new.tmpl
+++ b/templates/repo/release/new.tmpl
@@ -67,27 +67,27 @@
                                        <span class="help">{{.i18n.Tr "repo.release.prerelease_helper"}}</span>
                                        <div class="field">
                                                {{if .PageIsEditRelease}}
-                                                       <a class="ui blue basic button" href="{{.RepoLink}}/releases">
+                                                       <a class="ui button" href="{{.RepoLink}}/releases">
                                                                {{.i18n.Tr "repo.release.cancel"}}
                                                        </a>
+                                                       <a class="ui red button delete-button" data-url="{{$.RepoLink}}/releases/delete" data-id="{{.ID}}">
+                                                               {{$.i18n.Tr "repo.release.delete_release"}}
+                                                       </a>
                                                        {{if .IsDraft}}
-                                                               <input class="ui grey button" type="submit" name="draft" value="{{.i18n.Tr "repo.release.save_draft"}}"/>
-                                                               <button class="ui green button">
+                                                               <input class="ui button" type="submit" name="draft" value="{{.i18n.Tr "repo.release.save_draft"}}"/>
+                                                               <button class="ui primary button">
                                                                        {{.i18n.Tr "repo.release.publish"}}
                                                                </button>
                                                        {{else}}
-                                                               <button class="ui green button">
+                                                               <button class="ui primary button">
                                                                        {{.i18n.Tr "repo.release.edit_release"}}
                                                                </button>
                                                        {{end}}
-                                                       <a class="ui red button delete-button" data-url="{{$.RepoLink}}/releases/delete" data-id="{{.ID}}">
-                                                               {{$.i18n.Tr "repo.release.delete_release"}}
-                                                       </a>
                                                {{else}}
-                                                       <button class="ui green button">
+                                                       <input class="ui button" type="submit" name="draft" value="{{.i18n.Tr "repo.release.save_draft"}}"/>
+                                                       <button class="ui primary button">
                                                                {{.i18n.Tr "repo.release.publish"}}
                                                        </button>
-                                                       <input class="ui grey button" type="submit" name="draft" value="{{.i18n.Tr "repo.release.save_draft"}}"/>
                                                {{end}}
                                        </div>
                                </div>

diff --git a/templates/repo/sub_menu.tmpl b/templates/repo/sub_menu.tmpl
index 239707f23f60db237d097e91438fdaa66ffac209..6c455a4d5d0b016a5a1e70f891f2e336d9be0b0a 100644 (file)
--- a/templates/repo/sub_menu.tmpl
+++ b/templates/repo/sub_menu.tmpl
@@ -1,4 +1,4 @@
-<div class="ui segments repository-summary{{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo) .LanguageStats }} repository-summary-language-stats{{end}}">
+<div class="ui segments repository-summary{{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo) .LanguageStats }} repository-summary-language-stats{{end}} mt-3">
        <div class="ui segment sub-menu repository-menu">
                <div class="ui two horizontal center link list">
                        {{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo)}}

diff --git a/web_src/js/index.js b/web_src/js/index.js
index 85e1fb082c05ec138460f53b01edb564e459661e..cd353b15f2ab69cc7f84ca7b05ac3e1a15d2c652 100644 (file)
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -517,20 +517,23 @@ function initCommentForm() {
           $(this).data('id'),
         ).then(reload);
       }
-      switch (input_id) {
-        case '#milestone_id':
-          $list.find('.selected').html(`<a class="item" href=${$(this).data('href')}>${
-            htmlEscape($(this).text())}</a>`);
-          break;
-        case '#project_id':
-          $list.find('.selected').html(`<a class="item" href=${$(this).data('href')}>${
-            htmlEscape($(this).text())}</a>`);
-          break;
-        case '#assignee_id':
-          $list.find('.selected').html(`<a class="item" href=${$(this).data('href')}>` +
-                        `<img class="ui avatar image" src=${$(this).data('avatar')}>${
-                          htmlEscape($(this).text())}</a>`);
+
+      let icon = '';
+      if (input_id === '#milestone_id') {
+        icon = svg('octicon-milestone', 18, 'mr-3');
+      } else if (input_id === '#project_id') {
+        icon = svg('octicon-project', 18, 'mr-3');
+      } else if (input_id === '#assignee_id') {
+        icon = `<img class="ui avatar image mr-3" src=${$(this).data('avatar')}>`;
       }
+
+      $list.find('.selected').html(`
+        <a class="item muted sidebar-item-link" href=${$(this).data('href')}>
+          ${icon}
+          ${htmlEscape($(this).text())}
+        </a>
+      `);
+
       $(`.ui${select_id}.list .no-select`).addClass('hide');
       $(input_id).val($(this).data('id'));
     });
@@ -3324,7 +3327,7 @@ function initTopicbar() {
 
           const last = viewDiv.children('a').last();
           for (let i = 0; i < topicArray.length; i++) {
-            const link = $('<a class="ui repo-topic small label topic"></a>');
+            const link = $('<a class="ui repo-topic large label topic"></a>');
             link.attr('href', `${AppSubUrl}/explore/repos?q=${encodeURIComponent(topicArray[i])}&topic=1`);
             link.text(topicArray[i]);
             link.insertBefore(last);

diff --git a/web_src/js/svg.js b/web_src/js/svg.js
index ee0b576c31b08b824a9eda335484f71a9c8223d6..b7d8c7535074ee1add1be58cb1c69a3077eaf187 100644 (file)
--- a/web_src/js/svg.js
+++ b/web_src/js/svg.js
@@ -6,7 +6,9 @@ import octiconIssueClosed from '../../public/img/svg/octicon-issue-closed.svg';
 import octiconIssueOpened from '../../public/img/svg/octicon-issue-opened.svg';
 import octiconLink from '../../public/img/svg/octicon-link.svg';
 import octiconLock from '../../public/img/svg/octicon-lock.svg';
+import octiconMilestone from '../../public/img/svg/octicon-milestone.svg';
 import octiconMirror from '../../public/img/svg/octicon-mirror.svg';
+import octiconProject from '../../public/img/svg/octicon-project.svg';
 import octiconRepo from '../../public/img/svg/octicon-repo.svg';
 import octiconRepoForked from '../../public/img/svg/octicon-repo-forked.svg';
 import octiconRepoTemplate from '../../public/img/svg/octicon-repo-template.svg';
@@ -20,7 +22,9 @@ export const svgs = {
   'octicon-issue-opened': octiconIssueOpened,
   'octicon-link': octiconLink,
   'octicon-lock': octiconLock,
+  'octicon-milestone': octiconMilestone,
   'octicon-mirror': octiconMirror,
+  'octicon-project': octiconProject,
   'octicon-repo': octiconRepo,
   'octicon-repo-forked': octiconRepoForked,
   'octicon-repo-template': octiconRepoTemplate,
@@ -29,16 +33,15 @@ export const svgs = {
 const parser = new DOMParser();
 const serializer = new XMLSerializer();
 
-// retrieve a HTML string for given SVG icon name and size in pixels
-export function svg(name, size = 16) {
-  if (name in svgs) {
-    if (size === 16) return svgs[name];
+// retrieve a HTML string for given SVG icon name, size and additional classes
+export function svg(name, size = 16, className = '') {
+  if (!(name in svgs)) return '';
+  if (size === 16 && !className) return svgs[name];
 
-    const document = parser.parseFromString(svgs[name], 'image/svg+xml');
-    const svgNode = document.firstChild;
-    svgNode.setAttribute('width', String(size));
-    svgNode.setAttribute('height', String(size));
-    return serializer.serializeToString(svgNode);
-  }
-  return '';
+  const document = parser.parseFromString(svgs[name], 'image/svg+xml');
+  const svgNode = document.firstChild;
+  if (size !== 16) svgNode.setAttribute('width', String(size));
+  if (size !== 16) svgNode.setAttribute('height', String(size));
+  if (className) svgNode.classList.add(...className.split(/\s+/));
+  return serializer.serializeToString(svgNode);
 }

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index a9303146ea17e5f9ececee030a1c0c1ca2cb5686..c6f7d043af84dbcb39a53ba3d34c2427930c3561 100644 (file)
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -77,14 +77,23 @@
   --color-body: #ffffff;
   --color-text: #212121;
   --color-text-light: #444444;
+  --color-text-light-2: #888888;
   --color-box-header: #f7f7f7;
   --color-box-body: #ffffff;
+  --color-footer: #ffffff;
   --color-timeline: #ececec;
   --color-input-text: #212121;
   --color-input-background: #ffffff;
   --color-input-border: #dedede;
   --color-input-border-hover: #cecece;
   --color-navbar: #f8f8f8;
+  --color-label: #00000010;
+  --color-label-hover: #00000015;
+  --color-label-basic: #00000008;
+  --color-label-border: #00000018;
+  --color-hover: #0000000d;
+  --color-active: #00000014;
+  --color-menu: #ffffff;
 }
 
 :root:lang(ja) {
@@ -212,7 +221,12 @@ a,
   cursor: pointer;
 }
 
+a.muted {
+  color: inherit;
+}
+
 a:hover,
+a.muted:hover,
 .ui.breadcrumb a:hover {
   color: var(--color-primary-dark-2);
 }
@@ -226,6 +240,104 @@ a:hover,
   border-right-color: var(--color-primary);
 }
 
+.ui.menu {
+  background: var(--color-menu);
+  border-color: var(--color-secondary);
+}
+
+.ui.menu .item {
+  color: var(--color-text);
+}
+
+.ui.link.menu .item:hover,
+.ui.menu .dropdown.item:hover,
+.ui.menu .link.item:hover,
+.ui.menu a.item:hover {
+  color: var(--color-text);
+  background: var(--color-hover);
+}
+
+.ui.menu .active.item,
+.ui.menu .active.item:hover,
+.ui.vertical.menu .active.item:hover {
+  color: var(--color-text);
+  background: var(--color-active);
+}
+
+.ui.link.menu .item:active,
+.ui.menu .link.item:active,
+.ui.menu a.item:active {
+  color: var(--color-text);
+  background: none;
+}
+
+.ui.dropdown .menu {
+  background: var(--color-menu);
+  border-color: var(--color-secondary);
+}
+
+.ui.dropdown .menu > .header:not(.ui) {
+  color: var(--color-text);
+}
+
+.ui.dropdown .menu > .item {
+  color: var(--color-text);
+}
+
+.ui.dropdown .menu > .item:hover {
+  color: var(--color-text);
+  background: var(--color-hover);
+}
+
+.ui.dropdown .menu .active.item {
+  font-weight: normal;
+}
+
+.ui.selection.dropdown .menu > .item {
+  border-color: var(--color-secondary);
+}
+
+.ui.selection.visible.dropdown > .text:not(.default) {
+  color: var(--color-text);
+}
+
+.ui.dropdown.selected,
+.ui.dropdown .menu .selected.item {
+  color: var(--color-text);
+  background: var(--color-hover);
+}
+
+.ui.secondary.menu .dropdown.item:hover,
+.ui.secondary.menu .link.item:hover,
+.ui.secondary.menu a.item:hover {
+  color: var(--color-text);
+  background: var(--color-hover);
+}
+
+.ui.secondary.menu .active.item,
+.ui.secondary.menu .active.item:hover {
+  color: var(--color-text);
+  background: var(--color-active);
+}
+
+.ui.menu .dropdown.item .menu {
+  background: var(--color-menu);
+}
+
+.ui.menu .ui.dropdown .menu > .item {
+  color: var(--color-text) !important;
+}
+
+.ui.menu .ui.dropdown .menu > .item:hover {
+  color: var(--color-text) !important;
+  background: var(--color-hover) !important;
+}
+
+.ui.menu .ui.dropdown .menu > .active.item {
+  color: var(--color-text) !important;
+  background: var(--color-active) !important;
+}
+
 .ui.selection.active.dropdown,
 .ui.selection.active.dropdown:hover,
 .ui.selection.active.dropdown .menu,
@@ -749,13 +861,13 @@ a:hover,
   }
 
   .migrate {
-    color: #888888 !important;
+    color: var(--color-text-light-2) !important;
     opacity: .5;
     a {
-      color: #444444 !important;
+      color: var(--color-text-light) !important;
 
       &:hover {
-        color: #000000 !important;
+        color: var(--color-text) !important;
       }
     }
   }
@@ -865,11 +977,11 @@ a:hover,
 }
 
 footer {
-  background-color: white;
-  border-top: 1px solid #d6d6d6;
+  background-color: var(--color-footer);
+  border-top: 1px solid var(--color-secondary);
   width: 100%;
   flex-basis: 40px;
-  color: #888888;
+  color: var(--color-text-light);
 
   .container {
     width: 100vw !important;
@@ -883,7 +995,7 @@ footer {
     }
 
     .links > * {
-      border-left: 1px solid #d6d6d6;
+      border-left: 1px solid var(--color-secondary);
       padding-left: 8px;
       margin-left: 5px;
 
@@ -1110,6 +1222,21 @@ i.icon.centerlock {
 
 .ui.label {
   padding: .3em .5em;
+  background: var(--color-label);
+  color: var(--color-text-light);
+}
+
+.ui.labels a.label:hover,
+a.ui.label:hover {
+  background: var(--color-label-hover);
+  color: var(--color-text);
+}
+
+.ui.basic.labels .label,
+.ui.basic.label {
+  background: var(--color-label-basic);
+  border-color: var(--color-label-border);
+  color: var(--color-text);
 }
 
 .ui.label > .detail .icons {
@@ -1331,9 +1458,9 @@ i.icon.centerlock {
 .ui.ui.ui.basic.blue.label,
 .ui.basic.labels .primary.label,
 .ui.ui.ui.basic.primary.label {
-  background: transparent;
-  border-color: var(--color-primary);
-  color: var(--color-primary);
+  background: transparent !important;
+  border-color: var(--color-primary) !important;
+  color: var(--color-primary) !important;
 }
 
 .ui.label > img {
@@ -1503,6 +1630,48 @@ table th[data-sortt-desc] {
   vertical-align: -.15em;
 }
 
+.labelspage {
+  list-style: none;
+  padding-top: 0;
+
+  .item {
+    margin-top: 0;
+    margin-right: -14px;
+    margin-left: -14px;
+    padding: 10px;
+    border-bottom: 1px solid var(--color-secondary);
+    border-top: none;
+
+    a {
+      font-size: 15px;
+      padding-top: 5px;
+      padding-right: 10px;
+      color: var(--color-text-light);
+
+      &:hover {
+        color: var(--color-primary-light-2);
+      }
+
+      &.open-issues {
+        margin-right: 30px;
+      }
+    }
+
+    .ui.label {
+      font-size: 1em;
+    }
+  }
+
+  .item:last-child {
+    border-bottom: none;
+    padding-bottom: 0;
+  }
+
+  .orglabel {
+    opacity: .7;
+  }
+}
+
 /* https://github.com/go-gitea/gitea/pull/11486 */
 .ui.sub.header {
   text-transform: none;

diff --git a/web_src/less/_organization.less b/web_src/less/_organization.less
index 77076e761eee9f9c007fcda255f6cd26a134ef5f..089c649f618c70e0c62c0f0531fd5cc36c4c2ebe 100644 (file)
--- a/web_src/less/_organization.less
+++ b/web_src/less/_organization.less
@@ -173,45 +173,4 @@
       height: 60px;
     }
   }
-
-  &.settings {
-    .labelspage {
-      list-style: none;
-      padding-top: 0;
-
-      .item {
-        margin-top: 0;
-        margin-right: -14px;
-        margin-left: -14px !important;
-        padding: 10px;
-        border-bottom: 1px solid var(--color-secondary);
-        border-top: none;
-
-        a {
-          font-size: 15px;
-          padding-top: 5px;
-          padding-right: 10px;
-          color: #666666;
-
-          &:hover {
-            color: #000000;
-          }
-
-          &.open-issues {
-            margin-right: 30px;
-          }
-        }
-
-        .ui.label {
-          font-size: 1em;
-        }
-      }
-
-      .item:last-child {
-        border-bottom: none;
-        padding-bottom: 0;
-      }
-
-    }
-  }
 }

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index e77e9719c3503f4880f4d7a2da7218d7f2228b51..4c2aff31c910738e13420db4e795905e576bf3c8 100644 (file)
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -165,14 +165,14 @@
       .label-filter .menu .info {
         display: inline-block;
         padding: .5rem .25rem;
-        border-bottom: 1px solid #cccccc;
+        border-bottom: 1px solid var(--color-secondary);
         font-size: 12px;
         width: 100%;
         white-space: nowrap;
         text-align: center;
 
         code {
-          border: 1px solid #cccccc;
+          border: 1px solid var(--color-secondary);
           border-radius: 3px;
           padding: 1px 2px;
           font-size: 11px;
@@ -388,7 +388,7 @@
       }
 
       .jumpable-path {
-        color: #888888;
+        color: var(--color-text-light-2);
       }
     }
 
@@ -684,9 +684,7 @@
         }
 
         .index {
-          font-weight: 300;
-          color: #aaaaaa;
-          letter-spacing: -1px;
+          color: var(--color-text-light-2);
         }
 
         .label {
@@ -828,7 +826,9 @@
         .avatar.image img {
           width: 20px;
           height: 20px;
-          margin-right: .15em;
+          margin-right: .5rem;
+          position: relative;
+          top: -2px;
         }
 
         &:first-child:not(.commit) {
@@ -853,7 +853,7 @@
           float: left;
           margin-left: -33px;
           margin-right: 8px;
-          color: #666;
+          color: var(--color-text-light-2);
           align-items: center;
           justify-content: center;
 
@@ -1069,11 +1069,11 @@
 
             span.ui.image {
               font-size: 128px;
-              color: #000000;
+              color: var(--color-text);
             }
 
             span.ui.image:hover {
-              color: #000000;
+              color: var(--color-text);
             }
           }
         }
@@ -1218,49 +1218,6 @@
     }
   }
 
-  .labelspage {
-    list-style: none;
-    padding-top: 0;
-
-    .item {
-      margin-top: 0;
-      margin-right: -14px;
-      margin-left: -14px;
-      padding: 10px;
-      border-bottom: 1px solid var(--color-secondary);
-      border-top: none;
-
-      a {
-        font-size: 15px;
-        padding-top: 5px;
-        padding-right: 10px;
-        color: #666666;
-
-        &:hover {
-          color: #000000;
-        }
-
-        &.open-issues {
-          margin-right: 30px;
-        }
-      }
-
-      .ui.label {
-        font-size: 1em;
-      }
-    }
-
-    .item:last-child {
-      border-bottom: none;
-      padding-bottom: 0;
-    }
-
-    .orglabel {
-      opacity: .7;
-    }
-
-  }
-
   .milestone.list {
     list-style: none;
     padding-top: 15px;
@@ -1268,12 +1225,12 @@
     > .item {
       padding-top: 10px;
       padding-bottom: 10px;
-      border-bottom: 1px dashed #aaaaaa;
+      border-bottom: 1px dashed var(--color-secondary);
 
       > a {
         padding-top: 5px;
         padding-right: 10px;
-        color: #000000;
+        color: var(--color-text);
 
         &:hover {
           color: var(--color-primary);
@@ -1292,7 +1249,7 @@
       }
 
       .meta {
-        color: #999999;
+        color: var(--color-text-light-2);
         padding-top: 5px;
 
         .issue-stats .svg {
@@ -1311,10 +1268,10 @@
           font-size: 15px;
           padding-top: 5px;
           padding-right: 10px;
-          color: #666666;
+          color: var(--color-text-light-2);
 
           &:hover {
-            color: #000000;
+            color: var(--color-text);
           }
         }
       }
@@ -1651,7 +1608,7 @@
 
     .file {
       flex: 1;
-      color: #888888;
+      color: var(--color-text-light-2);
       word-break: break-all;
     }
 
@@ -2243,7 +2200,7 @@
       color: #6cc644;
 
       .pull-right {
-        color: #000;
+        color: var(--color-text);
       }
 
       .ui.text {
@@ -2327,19 +2284,19 @@
         }
 
         a {
-          color: black;
+          color: var(--color-text);
 
           &:hover {
-            color: #666666;
+            color: var(--color-primary-light-2);
           }
         }
 
         span.ui {
-          color: black;
+          color: var(--color-text);
         }
 
         &.active {
-          background: rgba(0, 0, 0, .05);
+          background: var(--color-secondary);
         }
       }
     }
@@ -2649,7 +2606,7 @@
     &.key {
       .meta {
         padding-top: 5px;
-        color: #666666;
+        color: var(--color-text-light-2);
       }
     }
 
@@ -2979,10 +2936,15 @@ tbody.commit-list {
 
 #repo-topics {
   margin-top: 5px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
 }
 
 .repo-topic {
+  font-weight: normal !important;
   cursor: pointer;
+  margin: 2px !important;
 }
 
 #new-dependency-drop-list {
@@ -3189,6 +3151,11 @@ td.blob-excerpt {
   margin-top: 1em;
 }
 
+.sidebar-item-link {
+  display: inline-flex;
+  align-items: center;
+}
+
 .diff-file-box[data-folded="true"] .diff-file-body {
   display: none;
 }
@@ -3226,16 +3193,6 @@ td.blob-excerpt {
   }
 }
 
-.select-project .item {
-  color: inherit;
-  display: inline-flex;
-  align-items: center;
-}
-
-.select-project .item .svg {
-  margin-right: .5rem;
-}
-
 .migrate .cards .card {
   text-align: center;
 }

diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less
index f5c5d710f2a2525847729d41942ebb8e9dea8800..eac28df21e75a71704955832a07b2baf5a65bbcb 100644 (file)
--- a/web_src/less/helpers.less
+++ b/web_src/less/helpers.less
@@ -1,4 +1,5 @@
 .df { display: flex !important; }
+.dif { display: inline-flex !important; }
 .ac { align-items: center !important; }
 .jc { justify-content: center !important; }
 .js { justify-content: flex-start !important; }

diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index eebbb5bdb3fa64e670cc9984dd8b86cf44c02d6b..02f274f9b02a868ff9fae275ab5874fe07839184 100644 (file)
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -74,12 +74,21 @@
   --color-box-body: #353945;
   --color-text: #bbc0ca;
   --color-text-light: #969aa5;
+  --color-text-light-2: #666a75;
+  --color-footer: #2e323e;
   --color-timeline: #4a505c;
   --color-input-text: #d5dbe6;
   --color-input-background: #2e323e;
   --color-input-border: #454a57;
   --color-input-border-hover: #505667;
   --color-navbar: #2a2e3a;
+  --color-label: #ffffff10;
+  --color-label-hover: #ffffff20;
+  --color-label-basic: #00000016;
+  --color-label-border: #ffffff28;
+  --color-hover: #ffffff0d;
+  --color-active: #ffffff14;
+  --color-menu: #2e323e;
 }
 
 /* Background */
@@ -460,22 +469,6 @@
   color: #bbbbbb;
 }
 
-.repository .ui.segment.sub-menu .list .item {
-  color: #dbdbdb;
-  a,
-  span.ui {
-    color: #dbdbdb;
-  }
-}
-
-.repository .ui.segment.sub-menu .list .item a:hover {
-  color: #fff;
-}
-
-.repository .ui.segment.sub-menu .list .item.active {
-  background: var(--color-secondary);
-}
-
 .repository.branches .commit-divergence .bar {
   background: #6a737d;
 }
@@ -508,55 +501,6 @@ body {
   box-shadow: 1px 1px 0 0 #1b1c1d !important; /* .ui.inverted.popup */
 }
 
-.ui.card > .extra a:not(.ui):hover,
-.ui.cards > .card > .extra a:not(.ui):hover {
-  color: #a0cc75;
-}
-
-.ui.breadcrumb a:hover {
-  color: #a0cc75;
-}
-
-.ui.breadcrumb a {
-  color: #87ab63;
-}
-
-.repository .metas .ui.list a .text {
-  color: #87ab63;
-}
-
-.repository .metas .ui.list a .text:hover {
-  color: #a0cc75;
-}
-
-.repository .label.list .item a {
-  color: #87ab63;
-}
-
-.repository .label.list .item a:hover {
-  color: #a0cc75;
-}
-
-.repository .milestone.list > .item {
-  border-bottom-color: var(--color-secondary);
-}
-
-.repository .milestone.list > .item > a {
-  color: #87ab63;
-}
-
-.repository .milestone.list > .item > a:hover {
-  color: #a0cc75;
-}
-
-.repository .milestone.list > .item .operate > a {
-  color: #87ab63;
-}
-
-.repository .milestone.list > .item .operate > a:hover {
-  color: #a0cc75;
-}
-
 .ui.green.progress .bar {
   background-color: #668844;
 }
@@ -570,14 +514,6 @@ body {
   border-color: var(--color-secondary-alpha-40);
 }
 
-.ui.secondary.menu .active.item {
-  color: #dbdbdb;
-}
-
-.ui.secondary.menu .item {
-  color: var(--color-secondary-dark-6);
-}
-
 .following.bar .top.menu a.item:hover {
   color: #fff;
 }
@@ -586,68 +522,12 @@ body {
   background: #353945;
 }
 
-.ui.secondary.menu .active.item,
-.ui.secondary.menu .dropdown.item:hover,
-.ui.secondary.menu .link.item:hover,
-.ui.secondary.menu .active.item:hover,
-.ui.secondary.menu a.item:hover,
-.ui.dropdown .menu .active.item,
-.ui.link.menu .item:hover,
-.ui.menu .dropdown.item:hover,
-.ui.menu .link.item:hover,
-.ui.menu a.item:hover,
-.ui.menu .active.item {
-  color: #dbdbdb;
-  background: #454b5a;
-}
-
 .ui.link.list .item,
 .ui.link.list a.item,
 .ui.link.list .item a:not(.ui) {
   color: #dbdbdb;
 }
 
-.ui.menu .ui.dropdown .menu > .item {
-  color: var(--color-secondary-dark-6) !important;
-}
-
-.ui.menu .ui.dropdown .menu > .item:hover,
-.ui.menu .ui.dropdown .menu > .selected.item {
-  color: #dbdbdb !important;
-  background: #454b5a !important;
-}
-
-.ui.secondary.menu .dropdown.item > .menu,
-.ui.text.menu .dropdown.item > .menu {
-  border: 1px solid #434444;
-}
-
-footer {
-  background: #2e323e;
-  border-top: 1px solid #313131;
-  color: #bababa;
-}
-
-.ui.menu .dropdown.item .menu {
-  background: #2c303a;
-}
-
-.ui.dropdown .menu > .header,
-.ui.dropdown .menu > .header:not(.ui) {
-  color: #dbdbdb;
-}
-
-.ui.labels a.label:hover,
-a.ui.label:hover {
-  background: #454b5a;
-  color: #dbdbdb;
-}
-
-.ui.basic.labels a.label:hover,
-a.ui.basic.label:hover {
-  background: var(--color-body);
-}
-
 .ui.red.label,
 .ui.red.labels .label {
   background-color: #7d3434 !important;
@@ -660,28 +540,10 @@ a.ui.basic.label:hover {
   background-color: #936e00 !important;
 }
 
-.ui.menu {
-  background: var(--color-secondary);
-  border: 1px solid #353945;
-}
-
-.ui.menu .active.item:hover,
-.ui.vertical.menu .active.item:hover {
-  color: #dbdbdb;
-  background: #4b5162;
-}
-
 .ui.accordion .title:not(.ui) {
   color: #dbdbdb;
 }
 
-.ui.label,
-.ui.label.basic {
-  color: #dbdbdb;
-  border-color: #6a737d;
-  background-color: #383c4a;
-}
-
 .ui.green.label,
 .ui.green.labels .label,
 .ui.basic.green.label {
@@ -704,24 +566,6 @@ a.ui.basic.green.label:hover {
   color: #b75252 !important;
 }
 
-.ui.menu .item {
-  background: var(--color-secondary);
-  color: var(--color-secondary-dark-6);
-}
-
-.ui.menu .item.disabled,
-.ui.menu .item.disabled:hover,
-.ui.ui.menu .item.disabled,
-.ui.ui.menu .item.disabled:hover {
-  color: #626773;
-  opacity: 1;
-}
-
-.ui.pagination.menu .active.item {
-  color: #fff;
-  background-color: #87ab63;
-}
-
 .ui.header,
 .ui.breadcrumb .divider {
   color: var(--color-secondary-dark-6);
@@ -732,10 +576,6 @@ a.ui.basic.green.label:hover {
   border-top-color: transparent;
 }
 
-.ui.menu .item > .label {
-  background: #505667;
-}
-
 .form .help {
   color: #7f8699;
 }
@@ -827,12 +667,6 @@ a.ui.basic.green.label:hover {
   box-shadow: none;
 }
 
-.ui.blue.label,
-.ui.blue.labels .label {
-  background-color: var(--color-primary-light-2) !important;
-  border-color: var(--color-primary) !important;
-}
-
 .ui.labeled.button:not([class*="left labeled"]) > .label,
 .ui[class*="left labeled"].button > .button {
   background: var(--color-secondary);
@@ -917,14 +751,6 @@ a.ui.basic.green.label:hover {
   }
 }
 
-.ui.dropdown .menu {
-  background: #2c303a;
-}
-
-.ui.dropdown .menu > .message:not(.ui) {
-  color: #636363;
-}
-
 .overflow.menu .items .item {
   color: #9d9d9d;
 }
@@ -950,20 +776,6 @@ a.ui.basic.green.label:hover {
   color: #dbdbdb;
 }
 
-.ui.dropdown .menu .selected.item,
-.ui.dropdown.selected {
-  color: #dbdbdb;
-}
-
-.ui.dropdown .menu > .item:hover {
-  color: #dbdbdb;
-  background: #353945;
-}
-
-.ui.dropdown .menu > .item {
-  color: var(--color-secondary-dark-6);
-}
-
 .repository.view.issue .comment-list .event > .svg.issue-symbol {
   background: #3b4954;
 }
@@ -1081,22 +893,6 @@ td.blob-hunk {
   border: 1px solid #333640;
 }
 
-.ui.selection.active.dropdown,
-.ui.selection.active.dropdown:hover,
-.ui.selection.active.dropdown .menu,
-.ui.selection.active.dropdown:hover .menu {
-  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1);
-}
-
-.ui.menu .ui.dropdown .menu > .active.item {
-  color: #dbdbdb !important;
-}
-
-.repository .filter.menu.labels .label-filter .menu .info,
-.repository .filter.menu.labels .label-filter .menu .info code {
-  border-color: #4e5361;
-}
-
 .ui.card,
 .ui.cards > .card {
   background: #353945;
@@ -1186,14 +982,6 @@ td.blob-hunk {
   background-color: #984646;
 }
 
-.ui.selection.dropdown .menu > .item {
-  border-top: 1px solid #313c47;
-}
-
-.ui.selection.visible.dropdown > .text:not(.default) {
-  color: var(--color-secondary-dark-6);
-}
-
 .ui.positive.message {
   background-color: #0d491b;
   color: #87ab63;
@@ -1320,7 +1108,6 @@ a.blob-excerpt:hover {
     .ui.text {
       color: var(--color-secondary-dark-6);
     }
-    .pull-right,
     a {
       color: #c2c193;
     }
@@ -1335,7 +1122,6 @@ a.blob-excerpt:hover {
     .ui.text {
       color: var(--color-secondary-dark-6);
     }
-    .pull-right,
     a {
       color: #c2a893;
     }
@@ -1349,9 +1135,6 @@ a.blob-excerpt:hover {
     .ui.text {
       color: #d07d7d;
     }
-    .pull-right {
-      color: var(--color-secondary-dark-6);
-    }
   }
 }
 
@@ -1385,16 +1168,6 @@ a.blob-excerpt:hover {
   border-color: #634343 !important;
 }
 
-.repository .labelspage .item a,
-.organization.settings .labelspage .item a {
-  color: #6a737d;
-}
-
-.repository .labelspage .item a:hover,
-.organization.settings .labelspage .item a:hover {
-  color: var(--color-secondary-dark-6);
-}
-
 .ui.header .sub.header {
   color: var(--color-secondary-dark-6);
 }