Various style tweaks (#13418)
- Change code review '+' to SVG and increase size slightly - Set placeholder color in both themes - Set proper font for textareas - Fix black code in arc-green - Various arc-green fixes
This commit is contained in:
		
							parent
							
								
									d7e0983780
								
							
						
					
					
						commit
						05efb33595
					
				| @ -158,10 +158,10 @@ | ||||
| 															{{else}} | ||||
| 																<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}"><span rel="{{if $line.LeftIdx}}diff-{{Sha1 $file.Name}}L{{$line.LeftIdx}}{{end}}"></span></td> | ||||
| 																<td class="lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td> | ||||
| 																<td class="lines-code lines-code-old halfwidth">{{if and $.SignedUserID $line.CanComment $.PageIsPullFiles (not (eq .GetType 2))}}<a class="ui green button add-code-comment add-code-comment-left" data-path="{{$file.Name}}" data-side="left" data-idx="{{$line.LeftIdx}}" data-type-marker="+"></a>{{end}}<code class="code-inner">{{if $line.LeftIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</code></td> | ||||
| 																<td class="lines-code lines-code-old halfwidth">{{if and $.SignedUserID $line.CanComment $.PageIsPullFiles (not (eq .GetType 2))}}<a class="ui primary button add-code-comment add-code-comment-left" data-path="{{$file.Name}}" data-side="left" data-idx="{{$line.LeftIdx}}">{{svg "octicon-plus"}}</a>{{end}}<code class="code-inner">{{if $line.LeftIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</code></td> | ||||
| 																<td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{Sha1 $file.Name}}R{{$line.RightIdx}}{{end}}"></span></td> | ||||
| 																<td class="lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td> | ||||
| 																<td class="lines-code lines-code-new halfwidth">{{if and $.SignedUserID $line.CanComment $.PageIsPullFiles (not (eq .GetType 3))}}<a class="ui green button add-code-comment add-code-comment-right" data-path="{{$file.Name}}" data-side="right" data-idx="{{$line.RightIdx}}" data-type-marker="+"></a>{{end}}<code class="code-inner">{{if $line.RightIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</code></td> | ||||
| 																<td class="lines-code lines-code-new halfwidth">{{if and $.SignedUserID $line.CanComment $.PageIsPullFiles (not (eq .GetType 3))}}<a class="ui primary button add-code-comment add-code-comment-right" data-path="{{$file.Name}}" data-side="right" data-idx="{{$line.RightIdx}}">{{svg "octicon-plus"}}</a>{{end}}<code class="code-inner">{{if $line.RightIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</code></td> | ||||
| 															{{end}} | ||||
| 														</tr> | ||||
| 														{{if gt (len $line.Comments) 0}} | ||||
|  | ||||
| @ -29,7 +29,7 @@ | ||||
| 				{{if eq .GetType 4}} | ||||
| 					<td class="chroma lines-code blob-hunk"><code class="code-inner">{{$section.GetComputedInlineDiffFor $line}}</code></td> | ||||
| 				{{else}} | ||||
| 					<td class="chroma lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}">{{if and $.root.SignedUserID $line.CanComment $.root.PageIsPullFiles}}<a class="ui green button add-code-comment add-code-comment-{{if $line.RightIdx}}right{{else}}left{{end}}" data-path="{{$file.Name}}" data-side="{{if $line.RightIdx}}right{{else}}left{{end}}" data-idx="{{if $line.RightIdx}}{{$line.RightIdx}}{{else}}{{$line.LeftIdx}}{{end}}" data-type-marker="+"></a>{{end}}<code class="code-inner">{{$section.GetComputedInlineDiffFor $line}}</code></td> | ||||
| 					<td class="chroma lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}">{{if and $.root.SignedUserID $line.CanComment $.root.PageIsPullFiles}}<a class="ui primary button add-code-comment add-code-comment-{{if $line.RightIdx}}right{{else}}left{{end}}" data-path="{{$file.Name}}" data-side="{{if $line.RightIdx}}right{{else}}left{{end}}" data-idx="{{if $line.RightIdx}}{{$line.RightIdx}}{{else}}{{$line.LeftIdx}}{{end}}">{{svg "octicon-plus"}}</a>{{end}}<code class="code-inner">{{$section.GetComputedInlineDiffFor $line}}</code></td> | ||||
| 				{{end}} | ||||
| 			</tr> | ||||
| 			{{if gt (len $line.Comments) 0}} | ||||
|  | ||||
| @ -99,6 +99,8 @@ h5, | ||||
| .ui.form input[type="text"], | ||||
| .ui.form input[type="time"], | ||||
| .ui.form input[type="url"], | ||||
| .ui.input textarea, | ||||
| .ui.form textarea, | ||||
| .ui.header, | ||||
| .ui.items > .item > .content > .header, | ||||
| .ui.list .list > .item .header, | ||||
| @ -166,6 +168,12 @@ table { | ||||
|   color: #fff !important; | ||||
| } | ||||
| 
 | ||||
| ::placeholder, | ||||
| .CodeMirror-placeholder { | ||||
|   color: #aaa !important; | ||||
|   opacity: 1 !important; | ||||
| } | ||||
| 
 | ||||
| a, | ||||
| .ui.breadcrumb a { | ||||
|   color: var(--color-primary); | ||||
|  | ||||
| @ -1,19 +1,16 @@ | ||||
| .ui.button.add-code-comment { | ||||
|   font-size: 14px; | ||||
|   height: 16px; | ||||
|   line-height: 12px !important; | ||||
|   padding: 0; | ||||
|   position: relative; | ||||
|   width: 16px; | ||||
|   padding: 2px; | ||||
|   position: absolute; | ||||
|   margin-left: -22px; | ||||
|   z-index: 5; | ||||
|   float: left; | ||||
|   margin: 2px -10px 2px -20px; | ||||
|   opacity: 0; | ||||
|   transition: transform .1s ease-in-out; | ||||
|   transform: scale(1, 1); | ||||
|   transform: scale(1); | ||||
|   box-shadow: none !important; | ||||
|   border: none !important; | ||||
| 
 | ||||
|   &:hover { | ||||
|     transform: scale(1.2, 1.2); | ||||
|     transform: scale(1.1); | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| @ -71,10 +68,6 @@ | ||||
|     cursor: pointer; | ||||
|   } | ||||
| 
 | ||||
|   .ui.form textarea { | ||||
|     border: 0; | ||||
|   } | ||||
| 
 | ||||
|   .ui.active.tab { | ||||
|     padding: .5em; | ||||
| 
 | ||||
|  | ||||
| @ -351,7 +351,7 @@ | ||||
| /* GenericEmph */ | ||||
| 
 | ||||
| .chroma .ge { | ||||
|   font-style: italic; | ||||
|   color: #ef5; | ||||
| } | ||||
| /* GenericError */ | ||||
| 
 | ||||
| @ -441,8 +441,9 @@ body { | ||||
|   color: #a5a5a8; | ||||
| } | ||||
| 
 | ||||
| ::placeholder { | ||||
|   color: #7f7f7f !important; | ||||
| ::placeholder, | ||||
| .CodeMirror-placeholder { | ||||
|   color: #6a737d !important; | ||||
| } | ||||
| 
 | ||||
| [data-tooltip]::before, | ||||
| @ -746,7 +747,7 @@ a.ui.basic.green.label:hover { | ||||
| .ui.form input[type="url"], | ||||
| .ui.selection.dropdown { | ||||
|   color: #a5a5a8; | ||||
|   background: var(--color-secondary); | ||||
|   background: #2e323e; | ||||
|   border: 1px solid var(--color-secondary); | ||||
| } | ||||
| 
 | ||||
| @ -764,8 +765,8 @@ a.ui.basic.green.label:hover { | ||||
| .ui.form input[type="time"]:hover, | ||||
| .ui.form input[type="url"]:hover, | ||||
| .ui.selection.dropdown:hover { | ||||
|   background: var(--color-secondary); | ||||
|   border: 1px solid var(--color-secondary); | ||||
|   background: #2e323e; | ||||
|   border: 1px solid #505667; | ||||
|   color: #dbdbdb; | ||||
| } | ||||
| 
 | ||||
| @ -783,7 +784,7 @@ a.ui.basic.green.label:hover { | ||||
| .ui.form input[type="time"]:focus, | ||||
| .ui.form input[type="url"]:focus, | ||||
| .ui.selection.dropdown:focus { | ||||
|   background: var(--color-secondary); | ||||
|   background: #2e323e; | ||||
|   border: 1px solid #6a737d; | ||||
|   color: #dbdbdb; | ||||
| } | ||||
| @ -1449,6 +1450,28 @@ input { | ||||
|   color: #dbdbdb !important; | ||||
| } | ||||
| 
 | ||||
| .ui.checkbox .box:before, | ||||
| .ui.checkbox label:before { | ||||
|   background: #2e323e; | ||||
|   border: 1px solid var(--color-secondary); | ||||
| } | ||||
| 
 | ||||
| .ui.checkbox .box:hover:before, | ||||
| .ui.checkbox label:hover:before, | ||||
| .ui.checkbox .box:active:before, | ||||
| .ui.checkbox label:active:before { | ||||
|   background: #2e323e; | ||||
|   border-color: #6a737d; | ||||
| } | ||||
| 
 | ||||
| .ui.checkbox input:focus ~ .box:before, | ||||
| .ui.checkbox input:focus ~ label:before, | ||||
| .ui.checkbox input:checked:focus ~ .box:before, | ||||
| .ui.checkbox input:checked:focus ~ label:before { | ||||
|   background: #2e323e; | ||||
|   border-color: #6a737d; | ||||
| } | ||||
| 
 | ||||
| .ui.checkbox input:checked ~ .box:after, | ||||
| .ui.checkbox input:checked ~ label:after { | ||||
|   color: #dbdbdb; | ||||
| @ -1456,48 +1479,25 @@ input { | ||||
| 
 | ||||
| .ui.checkbox input:checked ~ .box:before, | ||||
| .ui.checkbox input:checked ~ label:before { | ||||
|   background: var(--color-secondary); | ||||
|   background: #2e323e; | ||||
|   opacity: 1; | ||||
|   color: #dbdbdb; | ||||
|   border-color: #505667; | ||||
| } | ||||
| 
 | ||||
| .ui.checkbox .box:before, | ||||
| .ui.checkbox label:before { | ||||
|   background: var(--color-secondary); | ||||
|   border: 1px solid #505667; | ||||
| } | ||||
| 
 | ||||
| .ui.checkbox .box:hover::before, | ||||
| .ui.checkbox label:hover::before { | ||||
|   background: var(--color-secondary); | ||||
|   border-color: #505667; | ||||
| } | ||||
| 
 | ||||
| .ui.checkbox .box:active::before, | ||||
| .ui.checkbox label:active::before { | ||||
|   background: var(--color-secondary); | ||||
|   border-color: #6a737d; | ||||
| } | ||||
| 
 | ||||
| .ui.checkbox input:focus ~ .box:before, | ||||
| .ui.checkbox input:focus ~ label:before { | ||||
|   background: var(--color-secondary); | ||||
|   border-color: #6a737d; | ||||
| } | ||||
| 
 | ||||
| .ui.checkbox input:checked:focus ~ .box:before, | ||||
| .ui.checkbox input:checked:focus ~ label:before, | ||||
| .ui.checkbox input:not([type="radio"]):indeterminate:focus ~ .box:before, | ||||
| .ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label:before { | ||||
|   background: #2e323e; | ||||
|   border-color: #6a737d; | ||||
|   background: var(--color-secondary); | ||||
| } | ||||
| 
 | ||||
| .ui.checkbox input:checked:focus ~ .box:after, | ||||
| .ui.checkbox input:checked:focus ~ label:after, | ||||
| .ui.checkbox input:not([type="radio"]):indeterminate:focus ~ .box:after, | ||||
| .ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label:after { | ||||
|   background: #2e323e; | ||||
|   color: #dbdbdb; | ||||
| } | ||||
| 
 | ||||
| @ -1838,20 +1838,8 @@ a.ui.labels .label:hover { | ||||
|     border: 0; | ||||
|   } | ||||
| 
 | ||||
|   .ui.active.tab { | ||||
|     &:not(.markdown) { | ||||
|       textarea:focus { | ||||
|         border: none; | ||||
|       } | ||||
| 
 | ||||
|       background: var(--color-secondary); | ||||
|     } | ||||
| 
 | ||||
|     border-color: var(--color-secondary); | ||||
|   } | ||||
| 
 | ||||
|   .footer { | ||||
|     border-top-color: #5a5a5a; | ||||
|     border-top-color: var(--color-secondary); | ||||
| 
 | ||||
|     .markdown-info { | ||||
|       color: inherit; | ||||
| @ -1861,7 +1849,7 @@ a.ui.labels .label:hover { | ||||
| } | ||||
| 
 | ||||
| .add-comment-left.add-comment-right .ui.attached.header { | ||||
|   border-color: #5d5c5c; | ||||
|   border-color: var(--color-secondary); | ||||
|   border-right: none; | ||||
| } | ||||
| 
 | ||||
| @ -2039,6 +2027,10 @@ a.ui.labels .label:hover { | ||||
|   border-color: var(--color-secondary); | ||||
| } | ||||
| 
 | ||||
| .ui.popup:before { | ||||
|   box-shadow: 1px 1px 0 0 var(--color-secondary); | ||||
| } | ||||
| 
 | ||||
| .ui.popup.top:before, | ||||
| .ui.popup.bottom:before { | ||||
|   background-color: #383c4a; | ||||
|  | ||||
		Loading…
	
		Reference in New Issue
	
	Block a user