Markdown and Repo header tweaks (#13744)
* Markdown and Repo header tweaks - Use CSS vars for all markdown colors - Tweak repo header, removing double borders and adjust sizes - Use menu instead of buttons for issue open/close switcher - Add emoji inversion for select emoji glyphs in arc-green - Use border over box-shadow for all buttons - Add spacing element to login form without openid * repo settings navbar fix * use shared template in more places and adjust dashboard * fix remaining open/close combos
This commit is contained in:
		
							parent
							
								
									e00a355427
								
							
						
					
					
						commit
						295fc99607
					
				
					 16 changed files with 129 additions and 148 deletions
				
			
		|  | @ -1,4 +1,4 @@ | |||
| <div class="fitted item choose reference"> | ||||
| <div class="fitted item choose reference mr-1"> | ||||
| 	<div class="ui floating filter dropdown custom" data-can-create-branch="{{.CanCreateBranch}}" data-no-results="{{.i18n.Tr "repo.pulls.no_results"}}"> | ||||
| 		<div class="ui basic small compact button" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible"> | ||||
| 			<span class="text"> | ||||
|  |  | |||
|  | @ -63,7 +63,7 @@ | |||
| 			<!-- If home page, show new PR. If not, show breadcrumb --> | ||||
| 			{{if eq $n 0}} | ||||
| 				{{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}} | ||||
| 					<div class="fitted item"> | ||||
| 					<div class="fitted item mx-0"> | ||||
| 						<a href="{{.BaseRepo.Link}}/compare/{{.BaseRepo.DefaultBranch | EscapePound}}...{{if ne .Repository.Owner.Name .BaseRepo.Owner.Name}}{{.Repository.Owner.Name}}:{{end}}{{.BranchName | EscapePound}}"> | ||||
| 							<button id="new-pull-request" class="ui compact basic button">{{if .PullRequestCtx.Allowed}}{{.i18n.Tr "repo.pulls.compare_changes"}}{{else}}{{.i18n.Tr "action.compare_branch"}}{{end}}</button> | ||||
| 						</a> | ||||
|  | @ -72,8 +72,8 @@ | |||
| 			{{else}} | ||||
| 				<div class="fitted item"><span class="ui breadcrumb repo-path"><a class="section" href="{{.RepoLink}}/src/{{EscapePound .BranchNameSubURL}}" title="{{.Repository.Name}}">{{EllipsisString .Repository.Name 30}}</a>{{range $i, $v := .TreeNames}}<span class="divider">/</span>{{if eq $i $l}}<span class="active section" title="{{$v}}">{{EllipsisString $v 30}}</span>{{else}}{{ $p := index $.Paths $i}}<span class="section"><a href="{{EscapePound $.BranchLink}}/{{EscapePound $p}}" title="{{$v}}">{{EllipsisString $v 30}}</a></span>{{end}}{{end}}</span></div> | ||||
| 			{{end}} | ||||
| 			<div class="right fitted item" id="file-buttons"> | ||||
| 				<div class="ui tiny blue buttons"> | ||||
| 			<div class="right fitted item mr-0" id="file-buttons"> | ||||
| 				<div class="ui tiny primary buttons"> | ||||
| 					{{if .Repository.CanEnableEditor}} | ||||
| 						{{if .CanAddFile}} | ||||
| 							<a href="{{.RepoLink}}/_new/{{EscapePound .BranchName}}/{{EscapePound .TreePath}}" class="ui button"> | ||||
|  |  | |||
|  | @ -28,16 +28,7 @@ | |||
| 		<div class="ui divider"></div> | ||||
| 		<div id="issue-filters" class="ui stackable grid"> | ||||
| 			<div class="six wide column"> | ||||
| 				<div class="ui tiny basic status buttons"> | ||||
| 					<a class="ui {{if not .IsShowClosed}}green active{{end}} basic button" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state=open&labels={{.SelectLabels}}&milestone={{.MilestoneID}}&assignee={{.AssigneeID}}"> | ||||
| 						{{svg "octicon-issue-opened"}} | ||||
| 						{{.i18n.Tr "repo.issues.open_tab" .IssueStats.OpenCount}} | ||||
| 					</a> | ||||
| 					<a class="ui {{if .IsShowClosed}}red active{{end}} basic button" href="{{$.Link}}?q={{$.Keyword}}&type={{.ViewType}}&sort={{$.SortType}}&state=closed&labels={{.SelectLabels}}&milestone={{.MilestoneID}}&assignee={{.AssigneeID}}"> | ||||
| 						{{svg "octicon-issue-closed"}} | ||||
| 						{{.i18n.Tr "repo.issues.close_tab" .IssueStats.ClosedCount}} | ||||
| 					</a> | ||||
| 				</div> | ||||
| 				{{template "repo/issue/openclose" .}} | ||||
| 			</div> | ||||
| 			<div class="ten wide right aligned column"> | ||||
| 				<div class="ui secondary filter stackable menu labels"> | ||||
|  | @ -122,16 +113,7 @@ | |||
| 		</div> | ||||
| 		<div id="issue-actions" class="ui stackable grid hide"> | ||||
| 			<div class="six wide column"> | ||||
| 				<div class="ui tiny basic status buttons"> | ||||
| 					<a class="ui {{if not .IsShowClosed}}green active{{end}} basic button" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state=open&labels={{.SelectLabels}}&milestone={{.MilestoneID}}&assignee={{.AssigneeID}}"> | ||||
| 						{{svg "octicon-issue-opened"}} | ||||
| 						{{.i18n.Tr "repo.issues.open_tab" .IssueStats.OpenCount}} | ||||
| 					</a> | ||||
| 					<a class="ui {{if .IsShowClosed}}red active{{end}} basic button" href="{{$.Link}}?q={{$.Keyword}}&type={{.ViewType}}&sort={{$.SortType}}&state=closed&labels={{.SelectLabels}}&milestone={{.MilestoneID}}&assignee={{.AssigneeID}}"> | ||||
| 						{{svg "octicon-issue-closed"}} | ||||
| 						{{.i18n.Tr "repo.issues.close_tab" .IssueStats.ClosedCount}} | ||||
| 					</a> | ||||
| 				</div> | ||||
| 				{{template "repo/issue/openclose" .}} | ||||
| 			</div> | ||||
| 			{{/* Ten wide does not cope well and makes the columns stack. | ||||
| 			This seems to be related to jQuery's hide/show: in fact, switching | ||||
|  |  | |||
|  | @ -40,16 +40,7 @@ | |||
| 		<div class="ui divider"></div> | ||||
| 		<div id="issue-filters" class="ui stackable grid"> | ||||
| 			<div class="six wide column"> | ||||
| 				<div class="ui tiny basic status buttons"> | ||||
| 					<a class="ui {{if not .IsShowClosed}}green active{{end}} basic button" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state=open&labels={{.SelectLabels}}&assignee={{.AssigneeID}}"> | ||||
| 						{{svg "octicon-issue-opened"}} | ||||
| 						{{.i18n.Tr "repo.issues.open_tab" .IssueStats.OpenCount}} | ||||
| 					</a> | ||||
| 					<a class="ui {{if .IsShowClosed}}red active{{end}} basic button" href="{{$.Link}}?q={{$.Keyword}}&type={{.ViewType}}&sort={{$.SortType}}&state=closed&labels={{.SelectLabels}}&assignee={{.AssigneeID}}"> | ||||
| 						{{svg "octicon-issue-closed"}} | ||||
| 						{{.i18n.Tr "repo.issues.close_tab" .IssueStats.ClosedCount}} | ||||
| 					</a> | ||||
| 				</div> | ||||
| 				{{template "repo/issue/openclose" .}} | ||||
| 			</div> | ||||
| 			<div class="ten wide right aligned column"> | ||||
| 				<div class="ui secondary filter stackable menu labels"> | ||||
|  | @ -118,16 +109,7 @@ | |||
| 		</div> | ||||
| 		<div id="issue-actions" class="ui stackable grid hide"> | ||||
| 			<div class="six wide column"> | ||||
| 				<div class="ui tiny basic status buttons"> | ||||
| 					<a class="ui {{if not .IsShowClosed}}green active{{end}} basic button" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state=open&labels={{.SelectLabels}}&assignee={{.AssigneeID}}"> | ||||
| 						{{svg "octicon-issue-opened"}} | ||||
| 						{{.i18n.Tr "repo.issues.open_tab" .IssueStats.OpenCount}} | ||||
| 					</a> | ||||
| 					<a class="ui {{if .IsShowClosed}}red active{{end}} basic button" href="{{$.Link}}?q={{$.Keyword}}&type={{.ViewType}}&sort={{$.SortType}}&state=closed&labels={{.SelectLabels}}&assignee={{.AssigneeID}}"> | ||||
| 						{{svg "octicon-issue-closed"}} | ||||
| 						{{.i18n.Tr "repo.issues.close_tab" .IssueStats.ClosedCount}} | ||||
| 					</a> | ||||
| 				</div> | ||||
| 				{{template "repo/issue/openclose" .}} | ||||
| 			</div> | ||||
| 
 | ||||
| 			{{/* Ten wide does not cope well and makes the columns stack. | ||||
|  |  | |||
|  | @ -12,13 +12,13 @@ | |||
| 		</div> | ||||
| 		<div class="ui divider"></div> | ||||
| 		{{template "base/alert" .}} | ||||
| 		<div class="ui tiny basic buttons"> | ||||
| 			<a class="ui {{if not .IsShowClosed}}green active{{end}} basic button" href="{{.RepoLink}}/milestones?state=open"> | ||||
| 				{{svg "octicon-milestone"}} | ||||
| 		<div class="ui compact tiny menu"> | ||||
| 			<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/milestones?state=open"> | ||||
| 				{{svg "octicon-milestone" 16 "mr-3"}} | ||||
| 				{{.i18n.Tr "repo.milestones.open_tab" .OpenCount}} | ||||
| 			</a> | ||||
| 			<a class="ui {{if .IsShowClosed}}red active{{end}} basic button" href="{{.RepoLink}}/milestones?state=closed"> | ||||
| 				{{svg "octicon-milestone"}} | ||||
| 			<a class="item{{if .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/milestones?state=closed"> | ||||
| 				{{svg "octicon-milestone" 16 "mr-3"}} | ||||
| 				{{.i18n.Tr "repo.milestones.close_tab" .ClosedCount}} | ||||
| 			</a> | ||||
| 		</div> | ||||
|  |  | |||
							
								
								
									
										10
									
								
								templates/repo/issue/openclose.tmpl
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										10
									
								
								templates/repo/issue/openclose.tmpl
									
									
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,10 @@ | |||
| <div class="ui compact tiny menu"> | ||||
| 	<a class="{{if not .IsShowClosed}}active{{end}} item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state=open&labels={{.SelectLabels}}&milestone={{.MilestoneID}}&assignee={{.AssigneeID}}"> | ||||
| 		{{svg "octicon-issue-opened" 16 "mr-3"}} | ||||
| 		{{.i18n.Tr "repo.issues.open_tab" .IssueStats.OpenCount}} | ||||
| 	</a> | ||||
| 	<a class="{{if .IsShowClosed}}active{{end}} item" href="{{$.Link}}?q={{$.Keyword}}&type={{.ViewType}}&sort={{$.SortType}}&state=closed&labels={{.SelectLabels}}&milestone={{.MilestoneID}}&assignee={{.AssigneeID}}"> | ||||
| 		{{svg "octicon-issue-closed" 16 "mr-3"}} | ||||
| 		{{.i18n.Tr "repo.issues.close_tab" .IssueStats.ClosedCount}} | ||||
| 	</a> | ||||
| </div> | ||||
|  | @ -12,12 +12,12 @@ | |||
| 		</div> | ||||
| 		<div class="ui divider"></div> | ||||
| 		{{template "base/alert" .}} | ||||
| 		<div class="ui tiny basic buttons"> | ||||
| 			<a class="ui {{if not .IsShowClosed}}green active{{end}} basic button" href="{{.RepoLink}}/projects?state=open"> | ||||
| 		<div class="ui compact tiny menu"> | ||||
| 			<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/projects?state=open"> | ||||
| 				{{svg "octicon-project"}} | ||||
| 				{{.i18n.Tr "repo.issues.open_tab" .OpenCount}} | ||||
| 			</a> | ||||
| 			<a class="ui {{if .IsShowClosed}}red active{{end}} basic button" href="{{.RepoLink}}/projects?state=closed"> | ||||
| 			<a class="item{{if .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/projects?state=closed"> | ||||
| 				{{svg "octicon-check"}} | ||||
| 				{{.i18n.Tr "repo.milestones.close_tab" .ClosedCount}} | ||||
| 			</a> | ||||
|  |  | |||
|  | @ -1,4 +1,4 @@ | |||
| <div class="ui secondary pointing tabular top attached borderless menu stackable new-menu navbar"> | ||||
| <div class="ui secondary pointing tabular top attached borderless menu stackable new-menu navbar shadow-body"> | ||||
| 	<div class="new-menu-inner"> | ||||
| 		<a class="{{if .PageIsSettingsOptions}}active{{end}} item" href="{{.RepoLink}}/settings"> | ||||
| 			{{.i18n.Tr "repo.settings.options"}} | ||||
|  |  | |||
|  | @ -22,9 +22,9 @@ | |||
| 						{{end}} | ||||
| 					{{else}} | ||||
| 						{{if .IsClosed}} | ||||
| 							{{svg "octicon-issue-opened" 16 "text red"}} | ||||
| 							{{svg "octicon-issue-closed" 16 "text red"}} | ||||
| 						{{else}} | ||||
| 							{{svg "octicon-issue-closed" 16 "text green"}} | ||||
| 							{{svg "octicon-issue-opened" 16 "text green"}} | ||||
| 						{{end}} | ||||
| 					{{end}} | ||||
| 				</div> | ||||
|  | @ -74,7 +74,10 @@ | |||
| 					{{end}} | ||||
| 					{{if ne .DeadlineUnix 0}} | ||||
| 						<span class="due-date poping up" data-content="{{$.i18n.Tr "repo.issues.due_date"}}" data-variation="tiny inverted" data-position="right center"> | ||||
| 							{{svg "octicon-calendar" 14 "mr-2"}}<span{{if .IsOverdue}} class="overdue"{{end}}>{{.DeadlineUnix.FormatShort}}</span> | ||||
| 							<span{{if .IsOverdue}} class="overdue"{{end}}> | ||||
| 								{{svg "octicon-calendar" 14 "mr-2"}} | ||||
| 								{{.DeadlineUnix.FormatShort}} | ||||
| 							</span> | ||||
| 						</span> | ||||
| 					{{end}} | ||||
| 					{{if .IsPull}} | ||||
|  |  | |||
|  | @ -18,4 +18,6 @@ | |||
| 		{{end}} | ||||
| 	</div> | ||||
| </div> | ||||
| {{else}} | ||||
| 	<div class="mt-4"></div> | ||||
| {{end}} | ||||
|  |  | |||
|  | @ -54,13 +54,13 @@ | |||
| 			<div class="twelve wide column content"> | ||||
| 				<div class="ui three column stackable grid"> | ||||
| 					<div class="column"> | ||||
| 						<div class="ui tiny basic status buttons"> | ||||
| 							<a class="ui {{if not .IsShowClosed}}green active{{end}} basic button" href="{{.Link}}?type={{$.ViewType}}&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=open&q={{$.Keyword}}"> | ||||
| 								{{svg "octicon-issue-opened"}} | ||||
| 						<div class="ui compact tiny menu"> | ||||
| 							<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.Link}}?type={{$.ViewType}}&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=open&q={{$.Keyword}}"> | ||||
| 								{{svg "octicon-issue-opened" 16 "mr-3"}} | ||||
| 								{{.i18n.Tr "repo.issues.open_tab" .ShownIssueStats.OpenCount}} | ||||
| 							</a> | ||||
| 							<a class="ui {{if .IsShowClosed}}red active{{end}} basic button" href="{{.Link}}?type={{$.ViewType}}&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=closed&q={{$.Keyword}}"> | ||||
| 								{{svg "octicon-issue-closed"}} | ||||
| 							<a class="item{{if .IsShowClosed}} active{{end}}" href="{{.Link}}?type={{$.ViewType}}&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=closed&q={{$.Keyword}}"> | ||||
| 								{{svg "octicon-issue-closed" 16 "mr-3"}} | ||||
| 								{{.i18n.Tr "repo.issues.close_tab" .ShownIssueStats.ClosedCount}} | ||||
| 							</a> | ||||
| 						</div> | ||||
|  |  | |||
|  | @ -34,13 +34,13 @@ | |||
| 				</div> | ||||
| 			</div> | ||||
| 			<div class="twelve wide column content"> | ||||
| 				<div class="ui tiny basic status buttons"> | ||||
| 					<a class="ui {{if not .IsShowClosed}}green active{{end}} basic button" href="{{.Link}}?repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=open"> | ||||
| 						{{svg "octicon-issue-opened"}} | ||||
| 				<div class="ui compact tiny menu"> | ||||
| 					<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.Link}}?repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=open"> | ||||
| 						{{svg "octicon-issue-opened" 16 "mr-3"}} | ||||
| 						{{.i18n.Tr "repo.milestones.open_tab" .MilestoneStats.OpenCount}} | ||||
| 					</a> | ||||
| 					<a class="ui {{if .IsShowClosed}}red active{{end}} basic button" href="{{.Link}}?repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=closed"> | ||||
| 						{{svg "octicon-issue-closed"}} | ||||
| 					<a class="item{{if .IsShowClosed}} active{{end}}" href="{{.Link}}?repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=closed"> | ||||
| 						{{svg "octicon-issue-closed" 16 "mr-3"}} | ||||
| 						{{.i18n.Tr "repo.milestones.close_tab" .MilestoneStats.ClosedCount}} | ||||
| 					</a> | ||||
| 				</div> | ||||
|  |  | |||
|  | @ -76,7 +76,7 @@ | |||
|   /* target-based colors */ | ||||
|   --color-body: #ffffff; | ||||
|   --color-text: #212121; | ||||
|   --color-text-light: #444444; | ||||
|   --color-text-light: #555555; | ||||
|   --color-text-light-2: #888888; | ||||
|   --color-box-header: #f7f7f7; | ||||
|   --color-box-body: #ffffff; | ||||
|  | @ -91,9 +91,12 @@ | |||
|   --color-label-hover: #00000015; | ||||
|   --color-label-basic: #00000008; | ||||
|   --color-label-border: #00000018; | ||||
|   --color-hover: #0000000d; | ||||
|   --color-active: #00000014; | ||||
|   --color-hover: #0000000a; | ||||
|   --color-active: #00000010; | ||||
|   --color-menu: #ffffff; | ||||
|   --color-markdown-table-row: #00000008; | ||||
|   --color-markdown-code-block: #00000010; | ||||
|   --color-button: #ffffff; | ||||
| } | ||||
| 
 | ||||
| :root:lang(ja) { | ||||
|  | @ -231,6 +234,10 @@ a.muted:hover, | |||
|   color: var(--color-primary-dark-2); | ||||
| } | ||||
| 
 | ||||
| .ui.breadcrumb .divider { | ||||
|   color: var(--color-text-light-2); | ||||
| } | ||||
| 
 | ||||
| .ui.input.focus > input, | ||||
| .ui.input > input:focus { | ||||
|   border-color: var(--color-primary); | ||||
|  | @ -1124,16 +1131,19 @@ footer { | |||
| .ui.menu.new-menu::after { | ||||
|   position: absolute; | ||||
|   display: block; | ||||
|   background-image: linear-gradient(to right, transparent, var(--color-navbar) 100%); | ||||
|   background: linear-gradient(to right, transparent, var(--color-navbar) 100%); | ||||
|   content: ''; | ||||
|   right: 0; | ||||
|   height: 39px; | ||||
|   z-index: 1000; | ||||
|   width: 60px; | ||||
|   visibility: visible; | ||||
|   pointer-events: none; | ||||
| } | ||||
| 
 | ||||
| .ui.menu.new-menu.shadow-body::after { | ||||
|   background: linear-gradient(to right, transparent, var(--color-body) 100%); | ||||
| } | ||||
| 
 | ||||
| .ui.menu.new-menu .item { | ||||
|   margin: 0 !important; | ||||
| } | ||||
|  | @ -1403,6 +1413,13 @@ a.ui.label:hover { | |||
|   font-size: .85714286rem; | ||||
| } | ||||
| 
 | ||||
| .ui.button { | ||||
|   background: var(--color-button); | ||||
|   border: 1px solid var(--color-secondary); | ||||
|   box-shadow: none !important; | ||||
|   color: var(--color-text); | ||||
| } | ||||
| 
 | ||||
| .ui.blue.button, | ||||
| .ui.blue.buttons .button, | ||||
| .ui.primary.button, | ||||
|  | @ -1714,6 +1731,10 @@ table th[data-sortt-desc] { | |||
|   color: var(--color-text); | ||||
| } | ||||
| 
 | ||||
| .ui.header { | ||||
|   color: var(--color-text); | ||||
| } | ||||
| 
 | ||||
| .ui.header .ui.label { | ||||
|   margin-left: .25rem; | ||||
| } | ||||
|  |  | |||
|  | @ -104,14 +104,14 @@ | |||
|     padding-bottom: .3em; | ||||
|     font-size: 2.25em; | ||||
|     line-height: 1.2; | ||||
|     border-bottom: 1px solid #eeeeee; | ||||
|     border-bottom: 1px solid var(--color-secondary); | ||||
|   } | ||||
| 
 | ||||
|   h2 { | ||||
|     padding-bottom: .3em; | ||||
|     font-size: 1.75em; | ||||
|     line-height: 1.225; | ||||
|     border-bottom: 1px solid #eeeeee; | ||||
|     border-bottom: 1px solid var(--color-secondary); | ||||
|   } | ||||
| 
 | ||||
|   h3 { | ||||
|  | @ -129,7 +129,7 @@ | |||
| 
 | ||||
|   h6 { | ||||
|     font-size: 1em; | ||||
|     color: #777777; | ||||
|     color: var(--color-text-light-2); | ||||
|   } | ||||
| 
 | ||||
|   p, | ||||
|  | @ -147,7 +147,7 @@ | |||
|     height: 4px; | ||||
|     padding: 0; | ||||
|     margin: 16px 0; | ||||
|     background-color: #e7e7e7; | ||||
|     background-color: var(--color-secondary); | ||||
|     border: 0; | ||||
|   } | ||||
| 
 | ||||
|  | @ -204,8 +204,8 @@ | |||
|   blockquote { | ||||
|     margin-left: 0; | ||||
|     padding: 0 15px; | ||||
|     color: #777777; | ||||
|     border-left: 4px solid #dddddd; | ||||
|     color: var(--color-text-light-2); | ||||
|     border-left: 4px solid var(--color-secondary); | ||||
|   } | ||||
| 
 | ||||
|   blockquote > :first-child { | ||||
|  | @ -230,16 +230,15 @@ | |||
|   table th, | ||||
|   table td { | ||||
|     padding: 6px 13px !important; | ||||
|     border: 1px solid #dddddd !important; | ||||
|     border: 1px solid var(--color-secondary) !important; | ||||
|   } | ||||
| 
 | ||||
|   table tr { | ||||
|     background-color: #ffffff; | ||||
|     border-top: 1px solid #cccccc; | ||||
|     border-top: 1px solid var(--color-secondary); | ||||
|   } | ||||
| 
 | ||||
|   table tr:nth-child(2n) { | ||||
|     background-color: #f8f8f8; | ||||
|     background-color: var(--color-markdown-table-row); | ||||
|   } | ||||
| 
 | ||||
|   img { | ||||
|  | @ -263,7 +262,7 @@ | |||
|     padding: 7px; | ||||
|     margin: 13px 0 0; | ||||
|     overflow: hidden; | ||||
|     border: 1px solid #dddddd; | ||||
|     border: 1px solid var(--color-secondary); | ||||
|   } | ||||
| 
 | ||||
|   span.frame span img { | ||||
|  | @ -275,7 +274,7 @@ | |||
|     display: block; | ||||
|     padding: 5px 0 0; | ||||
|     clear: both; | ||||
|     color: #333333; | ||||
|     color: var(--color-text); | ||||
|   } | ||||
| 
 | ||||
|   span.align-center { | ||||
|  | @ -344,7 +343,7 @@ | |||
|     padding: .2em .3em; | ||||
|     margin: 0; | ||||
|     font-size: 85%; | ||||
|     background-color: rgba(0, 0, 0, .04); | ||||
|     background-color: var(--color-label); | ||||
|     border-radius: 3px; | ||||
|   } | ||||
| 
 | ||||
|  | @ -377,7 +376,7 @@ | |||
|     overflow: auto; | ||||
|     font-size: 85%; | ||||
|     line-height: 1.45; | ||||
|     background-color: #f7f7f7; | ||||
|     background-color: var(--color-markdown-code-block); | ||||
|     border-radius: 3px; | ||||
|   } | ||||
| 
 | ||||
|  | @ -415,13 +414,12 @@ | |||
|     padding: 3px 5px; | ||||
|     font-size: 11px; | ||||
|     line-height: 10px; | ||||
|     color: #555555; | ||||
|     color: var(--color-text-light); | ||||
|     vertical-align: middle; | ||||
|     background-color: #fcfcfc; | ||||
|     border: solid 1px #cccccc; | ||||
|     border-bottom-color: #bbbbbb; | ||||
|     background-color: var(--color-label); | ||||
|     border: 1px solid var(--color-secondary); | ||||
|     border-radius: 3px; | ||||
|     box-shadow: inset 0 -1px 0 #bbbbbb; | ||||
|     box-shadow: inset 0 -1px 0 var(--color-secondary); | ||||
|   } | ||||
| 
 | ||||
|   input[type="checkbox"] { | ||||
|  | @ -441,7 +439,6 @@ | |||
|   .csv-data .blob-num { | ||||
|     padding: 10px 8px 9px; | ||||
|     text-align: right; | ||||
|     background: #ffffff; | ||||
|     border: 0; | ||||
|   } | ||||
| 
 | ||||
|  | @ -451,7 +448,6 @@ | |||
| 
 | ||||
|   .csv-data th { | ||||
|     font-weight: 600; | ||||
|     background: #f8f8f8; | ||||
|     border-top: 0; | ||||
|   } | ||||
| 
 | ||||
|  |  | |||
|  | @ -225,13 +225,19 @@ | |||
| 
 | ||||
|     .clone.button { | ||||
|       font-size: 13px; | ||||
|       padding: 0 5px; | ||||
|       padding: 7.5px 5px; | ||||
| 
 | ||||
|       &:first-child { | ||||
|         border-radius: var(--border-radius) 0 0 var(--border-radius); | ||||
|       } | ||||
|     } | ||||
| 
 | ||||
|     #repo-clone-https, | ||||
|     #repo-clone-ssh, | ||||
|     #clipboard-btn { | ||||
|       border-right: none; | ||||
|     } | ||||
| 
 | ||||
|     .icon.button { | ||||
|       padding: 0 10px; | ||||
|     } | ||||
|  | @ -280,6 +286,10 @@ | |||
|           width: 100%; | ||||
|         } | ||||
|       } | ||||
| 
 | ||||
|       .button + .button { | ||||
|         border-left: none; | ||||
|       } | ||||
|     } | ||||
| 
 | ||||
|     #repo-files-table { | ||||
|  |  | |||
|  | @ -74,7 +74,7 @@ | |||
|   --color-box-body: #353945; | ||||
|   --color-text: #bbc0ca; | ||||
|   --color-text-light: #969aa5; | ||||
|   --color-text-light-2: #666a75; | ||||
|   --color-text-light-2: #767a85; | ||||
|   --color-footer: #2e323e; | ||||
|   --color-timeline: #4a505c; | ||||
|   --color-input-text: #d5dbe6; | ||||
|  | @ -82,13 +82,16 @@ | |||
|   --color-input-border: #454a57; | ||||
|   --color-input-border-hover: #505667; | ||||
|   --color-navbar: #2a2e3a; | ||||
|   --color-label: #ffffff10; | ||||
|   --color-label: #ffffff0d; | ||||
|   --color-label-hover: #ffffff20; | ||||
|   --color-label-basic: #00000016; | ||||
|   --color-label-border: #ffffff28; | ||||
|   --color-hover: #ffffff0d; | ||||
|   --color-active: #ffffff14; | ||||
|   --color-menu: #2e323e; | ||||
|   --color-markdown-table-row: #ffffff06; | ||||
|   --color-markdown-code-block: #2a2e3a; | ||||
|   --color-button: #353846; | ||||
| } | ||||
| 
 | ||||
| /* Background */ | ||||
|  | @ -566,11 +569,6 @@ a.ui.basic.green.label:hover { | |||
|   color: #b75252 !important; | ||||
| } | ||||
| 
 | ||||
| .ui.header, | ||||
| .ui.breadcrumb .divider { | ||||
|   color: var(--color-secondary-dark-6); | ||||
| } | ||||
| 
 | ||||
| .ui.divider:not(.vertical):not(.horizontal) { | ||||
|   border-bottom-color: var(--color-secondary); | ||||
|   border-top-color: transparent; | ||||
|  | @ -645,12 +643,6 @@ a.ui.basic.green.label:hover { | |||
|   background-color: #a0cc75; | ||||
| } | ||||
| 
 | ||||
| .ui.button { | ||||
|   background: #353846; | ||||
|   border: 1px solid var(--color-secondary); | ||||
|   color: #dbdbdb; | ||||
| } | ||||
| 
 | ||||
| .ui.basic.button, | ||||
| .ui.basic.buttons .button { | ||||
|   color: var(--color-secondary-dark-6); | ||||
|  | @ -693,7 +685,6 @@ a.ui.basic.green.label:hover { | |||
|   color: #dbdbdb; | ||||
| } | ||||
| 
 | ||||
| .ui.table thead th, | ||||
| .ui.table > thead > tr > th { | ||||
|   background: var(--color-secondary); | ||||
|   color: #dbdbdb !important; | ||||
|  | @ -711,33 +702,6 @@ a.ui.basic.green.label:hover { | |||
|   color: var(--color-secondary-dark-6) !important; | ||||
| } | ||||
| 
 | ||||
| .markdown:not(code) h2 { | ||||
|   border-bottom: 1px solid #304251; | ||||
| } | ||||
| 
 | ||||
| .markdown:not(code) .highlight pre, | ||||
| .markdown:not(code) pre { | ||||
|   background-color: #2a2e3a; | ||||
|   border: 1px solid var(--color-secondary); | ||||
| } | ||||
| 
 | ||||
| .markdown:not(code) table tr:nth-child(2n) { | ||||
|   background-color: #2a2e39; | ||||
| } | ||||
| 
 | ||||
| .markdown:not(code) table tr:nth-child(2n-1) { | ||||
|   background-color: #383b44; | ||||
| } | ||||
| 
 | ||||
| .markdown:not(code) table thead tr:nth-child(2n-1) { | ||||
|   background-color: #464c5d !important; | ||||
| } | ||||
| 
 | ||||
| .markdown:not(code) table td, | ||||
| .markdown:not(code) table th { | ||||
|   border-color: var(--color-secondary) !important; | ||||
| } | ||||
| 
 | ||||
| .repository.file.editor.edit, | ||||
| .repository.wiki.new .CodeMirror { | ||||
|   .editor-preview, | ||||
|  | @ -1195,6 +1159,30 @@ a.blob-excerpt:hover { | |||
|   border-color: #6a737d !important; | ||||
| } | ||||
| 
 | ||||
| /* invert emojis that are hard to read otherwise */ | ||||
| .emoji[aria-label="check mark"], | ||||
| .emoji[aria-label="currency exchange"], | ||||
| .emoji[aria-label="TOP arrow"], | ||||
| .emoji[aria-label="END arrow"], | ||||
| .emoji[aria-label="ON! arrow"], | ||||
| .emoji[aria-label="SOON arrow"], | ||||
| .emoji[aria-label="heavy dollar sign"], | ||||
| .emoji[aria-label="copyright"], | ||||
| .emoji[aria-label="registered"], | ||||
| .emoji[aria-label="trade mark"], | ||||
| .emoji[aria-label="multiply"], | ||||
| .emoji[aria-label="plus"], | ||||
| .emoji[aria-label="minus"], | ||||
| .emoji[aria-label="divide"], | ||||
| .emoji[aria-label="curly loop"], | ||||
| .emoji[aria-label="double curly loop"], | ||||
| .emoji[aria-label="wavy dash"], | ||||
| .emoji[aria-label="paw prints"], | ||||
| .emoji[aria-label="musical note"], | ||||
| .emoji[aria-label="musical notes"] { | ||||
|   filter: invert(100%); | ||||
| } | ||||
| 
 | ||||
| .editor-toolbar { | ||||
|   background-color: var(--color-secondary); | ||||
|   border-color: var(--color-secondary); | ||||
|  | @ -1382,19 +1370,6 @@ a.blob-excerpt:hover { | |||
|   } | ||||
| } | ||||
| 
 | ||||
| .markdown:not(code) h1 { | ||||
|   border-bottom-color: #888; | ||||
| } | ||||
| 
 | ||||
| .markdown:not(code) blockquote { | ||||
|   border-left-color: #888; | ||||
| } | ||||
| 
 | ||||
| .markdown:not(code) code, | ||||
| .markdown:not(code) tt { | ||||
|   background-color: #2a2e3a; | ||||
| } | ||||
| 
 | ||||
| footer .container .links > * { | ||||
|   border-left-color: #888; | ||||
| } | ||||
|  |  | |||
		Loading…
	
		Reference in a new issue