Add grey bg to tabs on repo page

4 files changed, 179 insertions, 72 deletions

diff --git a/public/css/gogs.css b/public/css/gogs.css
index 79c920b767..657de394f6 100755
--- a/public/css/gogs.css
+++ b/public/css/gogs.css
@@ -6,7 +6,7 @@
 }
 body {
   font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif, '微软雅黑';
-  background-color: #FAFAFA;
+  background-color: #fff;
   overflow-y: scroll;
 }
 img {
@@ -1124,6 +1124,11 @@ footer .container .links > *:first-child {
 .repository .metas .ui.list a .text:hover {
   color: #000;
 }
+.repository .header-wrapper {
+  background-color: #FAFAFA;
+  margin-top: -15px;
+  padding-top: 15px;
+}
 .repository .filter.menu .label.color {
   margin-left: 15px;
   padding: 0 8px;
@@ -1289,6 +1294,30 @@ footer .container .links > *:first-child {
 .repository.new.issue .comment.form .content {
   margin-left: 4em;
 }
+.repository.new.issue .comment.form .content:before,
+.repository.new.issue .comment.form .content:after {
+  right: 100%;
+  top: 20px;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+.repository.new.issue .comment.form .content:before {
+  border-right-color: #D4D4D5;
+  border-width: 9px;
+  margin-top: -9px;
+}
+.repository.new.issue .comment.form .content:after {
+  border-right-color: #f7f7f7;
+  border-width: 8px;
+  margin-top: -8px;
+}
+.repository.new.issue .comment.form .content:after {
+  border-right-color: #fff;
+}
 .repository.new.issue .comment.form .content .markdown {
   font-size: 14px;
 }
@@ -1395,7 +1424,7 @@ footer .container .links > *:first-child {
 .repository.view.issue .comment-list .comment .content .header:before,
 .repository.view.issue .comment-list .comment .content .header:after {
   right: 100%;
-  top: 50%;
+  top: 20px;
   border: solid transparent;
   content: " ";
   height: 0;
@@ -1491,6 +1520,30 @@ footer .container .links > *:first-child {
 .repository .comment.form .content .field:first-child {
   clear: none;
 }
+.repository .comment.form .content .form:before,
+.repository .comment.form .content .form:after {
+  right: 100%;
+  top: 20px;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+.repository .comment.form .content .form:before {
+  border-right-color: #D4D4D5;
+  border-width: 9px;
+  margin-top: -9px;
+}
+.repository .comment.form .content .form:after {
+  border-right-color: #f7f7f7;
+  border-width: 8px;
+  margin-top: -8px;
+}
+.repository .comment.form .content .form:after {
+  border-right-color: #fff;
+}
 .repository .comment.form .content .tab.segment {
   border: none;
   padding: 0;
@@ -1580,6 +1633,30 @@ footer .container .links > *:first-child {
 .repository.compare.pull .choose.branch .octicon {
   padding-right: 10px;
 }
+.repository.compare.pull .comment.form .content:before,
+.repository.compare.pull .comment.form .content:after {
+  right: 100%;
+  top: 20px;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+.repository.compare.pull .comment.form .content:before {
+  border-right-color: #D4D4D5;
+  border-width: 9px;
+  margin-top: -9px;
+}
+.repository.compare.pull .comment.form .content:after {
+  border-right-color: #f7f7f7;
+  border-width: 8px;
+  margin-top: -8px;
+}
+.repository.compare.pull .comment.form .content:after {
+  border-right-color: #fff;
+}
 .repository .filter.dropdown .menu {
   margin-top: 1px!important;
 }
@@ -2096,6 +2173,27 @@ footer .container .links > *:first-child {
   width: 15px;
   height: 15px;
 }
+#avatar-arrow:before,
+#avatar-arrow:after {
+  right: 100%;
+  top: 20px;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+#avatar-arrow:before {
+  border-right-color: #D4D4D5;
+  border-width: 9px;
+  margin-top: -9px;
+}
+#avatar-arrow:after {
+  border-right-color: #f7f7f7;
+  border-width: 8px;
+  margin-top: -8px;
+}
 #transfer-repo-modal .ui.message,
 #delete-repo-modal .ui.message {
   width: 100%!important;
diff --git a/public/less/_base.less b/public/less/_base.less
index 1911d3cbbf..36591766ba 100644
--- a/public/less/_base.less
+++ b/public/less/_base.less
@@ -2,7 +2,7 @@
 
 body {
 	font-family: 'Helvetica Neue',Arial,Helvetica,sans-serif,'微软雅黑';
-	background-color: #FAFAFA;
+	background-color: #fff;
 	overflow-y: scroll;
 }
 img {
diff --git a/public/less/_repository.less b/public/less/_repository.less
index 61ee448848..c3cc6d8050 100644
--- a/public/less/_repository.less
+++ b/public/less/_repository.less
@@ -69,6 +69,11 @@
 			}
 		}
 	}
+	.header-wrapper {
+		background-color: #FAFAFA; 
+		margin-top: -15px; 
+		padding-top: 15px;
+	}
 	.filter.menu {
 		.label.color {
 			margin-left: 15px;
diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
index cab0fb53d4..78f7c0dc4f 100644
--- a/templates/repo/header.tmpl
+++ b/templates/repo/header.tmpl
@@ -1,87 +1,91 @@
 {{with .Repository}}
-	<div class="ui container"><!-- start container -->
-		<div class="ui vertically padded grid head"><!-- start grid -->
-			<div class="column"><!-- start column -->
-				<div class="ui header">
-					<div class="ui huge breadcrumb">
-						<i class="mega-octicon octicon-{{if .IsPrivate}}lock{{else if .IsMirror}}repo-clone{{else if .IsFork}}repo-forked{{else}}repo{{end}}"></i>
-						<a href="{{AppSubUrl}}/{{.Owner.Name}}">{{.Owner.Name}}</a>
-						<div class="divider"> / </div>
-						<a href="{{$.RepoLink}}">{{.Name}}</a>
-						{{if .IsMirror}}<div class="fork-flag">{{$.i18n.Tr "repo.mirror_from"}} <a target="_blank" href="{{$.Mirror.Address}}">{{$.Mirror.Address}}</a></div>{{end}}
-						{{if .IsFork}}<div class="fork-flag">{{$.i18n.Tr "repo.forked_from"}} <a href="{{.BaseRepo.RepoLink}}">{{SubStr .BaseRepo.RepoLink 1 -1}}</a></div>{{end}}
-					</div>
-
-					<div class="ui right">
-						<div class="ui labeled button" tabindex="0">
-							<a class="ui button" href="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}un{{end}}watch?redirect_to={{$.Link}}">
-								<i class="icon fa fa-eye{{if not $.IsWatchingRepo}}-slash{{end}}"></i>{{if $.IsWatchingRepo}}{{$.i18n.Tr "repo.unwatch"}}{{else}}{{$.i18n.Tr "repo.watch"}}{{end}}
-							</a>
-							<a class="ui basic label" href="{{.RepoLink}}/watchers">
-								{{.NumWatches}}
-							</a>
+	<div class="header-wrapper">
+		<div class="ui container"><!-- start container -->
+			<div class="ui vertically padded grid head"><!-- start grid -->
+				<div class="column"><!-- start column -->
+					<div class="ui header">
+						<div class="ui huge breadcrumb">
+							<i class="mega-octicon octicon-{{if .IsPrivate}}lock{{else if .IsMirror}}repo-clone{{else if .IsFork}}repo-forked{{else}}repo{{end}}"></i>
+							<a href="{{AppSubUrl}}/{{.Owner.Name}}">{{.Owner.Name}}</a>
+							<div class="divider"> / </div>
+							<a href="{{$.RepoLink}}">{{.Name}}</a>
+							{{if .IsMirror}}<div class="fork-flag">{{$.i18n.Tr "repo.mirror_from"}} <a target="_blank" href="{{$.Mirror.Address}}">{{$.Mirror.Address}}</a></div>{{end}}
+							{{if .IsFork}}<div class="fork-flag">{{$.i18n.Tr "repo.forked_from"}} <a href="{{.BaseRepo.RepoLink}}">{{SubStr .BaseRepo.RepoLink 1 -1}}</a></div>{{end}}
 						</div>
-						<div class="ui labeled button" tabindex="0">
-							<a class="ui button" href="{{$.RepoLink}}/action/{{if $.IsStaringRepo}}un{{end}}star?redirect_to={{$.Link}}">
-								<i class="icon fa-star{{if not $.IsStaringRepo}}-o{{end}}"></i>{{if $.IsStaringRepo}}{{$.i18n.Tr "repo.unstar"}}{{else}}{{$.i18n.Tr "repo.star"}}{{end}}
-							</a>
-							<a class="ui basic label" href="{{.RepoLink}}/stars">
-								{{.NumStars}}
-							</a>
-						</div>
-						{{if .CanBeForked}}
+
+						<div class="ui right">
+							<div class="ui labeled button" tabindex="0">
+								<a class="ui button" href="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}un{{end}}watch?redirect_to={{$.Link}}">
+									<i class="icon fa fa-eye{{if not $.IsWatchingRepo}}-slash{{end}}"></i>{{if $.IsWatchingRepo}}{{$.i18n.Tr "repo.unwatch"}}{{else}}{{$.i18n.Tr "repo.watch"}}{{end}}
+								</a>
+								<a class="ui basic label" href="{{.RepoLink}}/watchers">
+									{{.NumWatches}}
+								</a>
+							</div>
 							<div class="ui labeled button" tabindex="0">
-								<a class="ui button {{if eq .OwnerID $.SignedUserID}}poping up{{end}}" {{if not (eq .OwnerID $.SignedUserID)}}href="{{AppSubUrl}}/repo/fork/{{.ID}}"{{else}} data-content="{{$.i18n.Tr "repo.fork_from_self"}}" data-position="top center" data-variation="tiny"{{end}}>
-									<i class="icon octicon octicon-repo-forked"></i>{{$.i18n.Tr "repo.fork"}}
+								<a class="ui button" href="{{$.RepoLink}}/action/{{if $.IsStaringRepo}}un{{end}}star?redirect_to={{$.Link}}">
+									<i class="icon fa-star{{if not $.IsStaringRepo}}-o{{end}}"></i>{{if $.IsStaringRepo}}{{$.i18n.Tr "repo.unstar"}}{{else}}{{$.i18n.Tr "repo.star"}}{{end}}
 								</a>
-								<a class="ui basic label" href="{{.RepoLink}}/forks">
-									{{.NumForks}}
+								<a class="ui basic label" href="{{.RepoLink}}/stars">
+									{{.NumStars}}
 								</a>
 							</div>
-						{{end}}
+							{{if .CanBeForked}}
+								<div class="ui labeled button" tabindex="0">
+									<a class="ui button {{if eq .OwnerID $.SignedUserID}}poping up{{end}}" {{if not (eq .OwnerID $.SignedUserID)}}href="{{AppSubUrl}}/repo/fork/{{.ID}}"{{else}} data-content="{{$.i18n.Tr "repo.fork_from_self"}}" data-position="top center" data-variation="tiny"{{end}}>
+										<i class="icon octicon octicon-repo-forked"></i>{{$.i18n.Tr "repo.fork"}}
+									</a>
+									<a class="ui basic label" href="{{.RepoLink}}/forks">
+										{{.NumForks}}
+									</a>
+								</div>
+							{{end}}
+						</div>
 					</div>
-				</div>
-			</div><!-- end column -->
-		</div><!-- end grid -->
-	</div><!-- end container -->
+				</div><!-- end column -->
+			</div><!-- end grid -->
+		</div><!-- end container -->
+	</div>
 {{end}}
 {{if not (or .IsBareRepo .IsDiffCompare)}}
-	<div class="ui tabs container">
-		<div class="ui tabular menu navbar">
-			<a class="{{if .PageIsViewCode}}active{{end}} item" href="{{.RepoLink}}">
-				<i class="icon octicon octicon-code"></i> {{.i18n.Tr "repo.code"}}
-			</a>
-			{{if .Repository.EnableIssues}}
-				<a class="{{if .PageIsIssueList}}active{{end}} item" href="{{.RepoLink}}/issues">
-					<i class="icon octicon octicon-issue-opened"></i> {{.i18n.Tr "repo.issues"}} <span class="ui {{if not .Repository.NumOpenIssues}}gray{{else}}blue{{end}} small label">{{.Repository.NumOpenIssues}}</span>
+	<div class="header-wrapper">
+		<div class="ui tabs container">
+			<div class="ui tabular menu navbar">
+				<a class="{{if .PageIsViewCode}}active{{end}} item" href="{{.RepoLink}}">
+					<i class="icon octicon octicon-code"></i> {{.i18n.Tr "repo.code"}}
 				</a>
-			{{end}}
-			{{if .Repository.EnablePulls}}
-				<a class="{{if .PageIsPullList}}active{{end}} item" href="{{.RepoLink}}/pulls">
-					<i class="icon octicon octicon-git-pull-request"></i> {{.i18n.Tr "repo.pulls"}} <span class="ui {{if not .Repository.NumOpenPulls}}gray{{else}}blue{{end}} small label">{{.Repository.NumOpenPulls}}</span>
+				{{if .Repository.EnableIssues}}
+					<a class="{{if .PageIsIssueList}}active{{end}} item" href="{{.RepoLink}}/issues">
+						<i class="icon octicon octicon-issue-opened"></i> {{.i18n.Tr "repo.issues"}} <span class="ui {{if not .Repository.NumOpenIssues}}gray{{else}}blue{{end}} small label">{{.Repository.NumOpenIssues}}</span>
+					</a>
+				{{end}}
+				{{if .Repository.EnablePulls}}
+					<a class="{{if .PageIsPullList}}active{{end}} item" href="{{.RepoLink}}/pulls">
+						<i class="icon octicon octicon-git-pull-request"></i> {{.i18n.Tr "repo.pulls"}} <span class="ui {{if not .Repository.NumOpenPulls}}gray{{else}}blue{{end}} small label">{{.Repository.NumOpenPulls}}</span>
+					</a>
+				{{end}}
+				<a class="{{if (or (.PageIsCommits) (.PageIsDiff))}}active{{end}} item" href="{{.RepoLink}}/commits/{{EscapePound .BranchName}}">
+					<i class="icon octicon octicon-history"></i> {{.i18n.Tr "repo.commits"}} <span class="ui {{if not .CommitsCount}}gray{{else}}blue{{end}} small label">{{.CommitsCount}}</span>
 				</a>
-			{{end}}
-			<a class="{{if (or (.PageIsCommits) (.PageIsDiff))}}active{{end}} item" href="{{.RepoLink}}/commits/{{EscapePound .BranchName}}">
-				<i class="icon octicon octicon-history"></i> {{.i18n.Tr "repo.commits"}} <span class="ui {{if not .CommitsCount}}gray{{else}}blue{{end}} small label">{{.CommitsCount}}</span>
-			</a>
-			<a class="{{if .PageIsReleaseList}}active{{end}} item" href="{{.RepoLink}}/releases">
-				<i class="icon octicon octicon-tag"></i> {{.i18n.Tr "repo.releases"}} <span class="ui {{if not .Repository.NumTags}}gray{{else}}blue{{end}} small label">{{.Repository.NumTags}}</span>
-			</a>
-			{{if .Repository.EnableWiki}}
-				<a class="{{if .PageIsWiki}}active{{end}} item" href="{{.RepoLink}}/wiki">
-					<i class="icon octicon octicon-book"></i> {{.i18n.Tr "repo.wiki"}}
+				<a class="{{if .PageIsReleaseList}}active{{end}} item" href="{{.RepoLink}}/releases">
+					<i class="icon octicon octicon-tag"></i> {{.i18n.Tr "repo.releases"}} <span class="ui {{if not .Repository.NumTags}}gray{{else}}blue{{end}} small label">{{.Repository.NumTags}}</span>
 				</a>
-			{{end}}
-			{{if .IsRepositoryAdmin}}
-				<div class="right menu">
-					<a class="{{if .PageIsSettings}}active{{end}} item" href="{{.RepoLink}}/settings">
-						<i class="icon octicon octicon-tools"></i> {{.i18n.Tr "repo.settings"}}
+				{{if .Repository.EnableWiki}}
+					<a class="{{if .PageIsWiki}}active{{end}} item" href="{{.RepoLink}}/wiki">
+						<i class="icon octicon octicon-book"></i> {{.i18n.Tr "repo.wiki"}}
 					</a>
-				</div>
-			{{end}}
+				{{end}}
+				{{if .IsRepositoryAdmin}}
+					<div class="right menu">
+						<a class="{{if .PageIsSettings}}active{{end}} item" href="{{.RepoLink}}/settings">
+							<i class="icon octicon octicon-tools"></i> {{.i18n.Tr "repo.settings"}}
+						</a>
+					</div>
+				{{end}}
+			</div>
 		</div>
 	</div>
 	<div class="ui tabs divider"></div>
 {{else}}
 	<div class="ui divider"></div>
-{{end}}
+{{end}}
\ No newline at end of file