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:
silverwind 2020-11-05 02:51:17 +01:00 committed by GitHub
parent d7e0983780
commit 05efb33595
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 57 additions and 64 deletions

View File

@ -158,10 +158,10 @@
{{else}} {{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-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-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-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-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}} {{end}}
</tr> </tr>
{{if gt (len $line.Comments) 0}} {{if gt (len $line.Comments) 0}}

View File

@ -29,7 +29,7 @@
{{if eq .GetType 4}} {{if eq .GetType 4}}
<td class="chroma lines-code blob-hunk"><code class="code-inner">{{$section.GetComputedInlineDiffFor $line}}</code></td> <td class="chroma lines-code blob-hunk"><code class="code-inner">{{$section.GetComputedInlineDiffFor $line}}</code></td>
{{else}} {{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}} {{end}}
</tr> </tr>
{{if gt (len $line.Comments) 0}} {{if gt (len $line.Comments) 0}}

View File

@ -99,6 +99,8 @@ h5,
.ui.form input[type="text"], .ui.form input[type="text"],
.ui.form input[type="time"], .ui.form input[type="time"],
.ui.form input[type="url"], .ui.form input[type="url"],
.ui.input textarea,
.ui.form textarea,
.ui.header, .ui.header,
.ui.items > .item > .content > .header, .ui.items > .item > .content > .header,
.ui.list .list > .item .header, .ui.list .list > .item .header,
@ -166,6 +168,12 @@ table {
color: #fff !important; color: #fff !important;
} }
::placeholder,
.CodeMirror-placeholder {
color: #aaa !important;
opacity: 1 !important;
}
a, a,
.ui.breadcrumb a { .ui.breadcrumb a {
color: var(--color-primary); color: var(--color-primary);

View File

@ -1,19 +1,16 @@
.ui.button.add-code-comment { .ui.button.add-code-comment {
font-size: 14px; padding: 2px;
height: 16px; position: absolute;
line-height: 12px !important; margin-left: -22px;
padding: 0;
position: relative;
width: 16px;
z-index: 5; z-index: 5;
float: left;
margin: 2px -10px 2px -20px;
opacity: 0; opacity: 0;
transition: transform .1s ease-in-out; transition: transform .1s ease-in-out;
transform: scale(1, 1); transform: scale(1);
box-shadow: none !important;
border: none !important;
&:hover { &:hover {
transform: scale(1.2, 1.2); transform: scale(1.1);
} }
} }
@ -71,10 +68,6 @@
cursor: pointer; cursor: pointer;
} }
.ui.form textarea {
border: 0;
}
.ui.active.tab { .ui.active.tab {
padding: .5em; padding: .5em;

View File

@ -351,7 +351,7 @@
/* GenericEmph */ /* GenericEmph */
.chroma .ge { .chroma .ge {
font-style: italic; color: #ef5;
} }
/* GenericError */ /* GenericError */
@ -441,8 +441,9 @@ body {
color: #a5a5a8; color: #a5a5a8;
} }
::placeholder { ::placeholder,
color: #7f7f7f !important; .CodeMirror-placeholder {
color: #6a737d !important;
} }
[data-tooltip]::before, [data-tooltip]::before,
@ -746,7 +747,7 @@ a.ui.basic.green.label:hover {
.ui.form input[type="url"], .ui.form input[type="url"],
.ui.selection.dropdown { .ui.selection.dropdown {
color: #a5a5a8; color: #a5a5a8;
background: var(--color-secondary); background: #2e323e;
border: 1px solid var(--color-secondary); 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="time"]:hover,
.ui.form input[type="url"]:hover, .ui.form input[type="url"]:hover,
.ui.selection.dropdown:hover { .ui.selection.dropdown:hover {
background: var(--color-secondary); background: #2e323e;
border: 1px solid var(--color-secondary); border: 1px solid #505667;
color: #dbdbdb; color: #dbdbdb;
} }
@ -783,7 +784,7 @@ a.ui.basic.green.label:hover {
.ui.form input[type="time"]:focus, .ui.form input[type="time"]:focus,
.ui.form input[type="url"]:focus, .ui.form input[type="url"]:focus,
.ui.selection.dropdown:focus { .ui.selection.dropdown:focus {
background: var(--color-secondary); background: #2e323e;
border: 1px solid #6a737d; border: 1px solid #6a737d;
color: #dbdbdb; color: #dbdbdb;
} }
@ -1449,6 +1450,28 @@ input {
color: #dbdbdb !important; 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 ~ .box:after,
.ui.checkbox input:checked ~ label:after { .ui.checkbox input:checked ~ label:after {
color: #dbdbdb; color: #dbdbdb;
@ -1456,48 +1479,25 @@ input {
.ui.checkbox input:checked ~ .box:before, .ui.checkbox input:checked ~ .box:before,
.ui.checkbox input:checked ~ label:before { .ui.checkbox input:checked ~ label:before {
background: var(--color-secondary); background: #2e323e;
opacity: 1; opacity: 1;
color: #dbdbdb; color: #dbdbdb;
border-color: #505667; 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 ~ .box:before,
.ui.checkbox input:checked:focus ~ label: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 ~ .box:before,
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label:before { .ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label:before {
background: #2e323e;
border-color: #6a737d; border-color: #6a737d;
background: var(--color-secondary);
} }
.ui.checkbox input:checked:focus ~ .box:after, .ui.checkbox input:checked:focus ~ .box:after,
.ui.checkbox input:checked:focus ~ label: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 ~ .box:after,
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label:after { .ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label:after {
background: #2e323e;
color: #dbdbdb; color: #dbdbdb;
} }
@ -1838,20 +1838,8 @@ a.ui.labels .label:hover {
border: 0; border: 0;
} }
.ui.active.tab {
&:not(.markdown) {
textarea:focus {
border: none;
}
background: var(--color-secondary);
}
border-color: var(--color-secondary);
}
.footer { .footer {
border-top-color: #5a5a5a; border-top-color: var(--color-secondary);
.markdown-info { .markdown-info {
color: inherit; color: inherit;
@ -1861,7 +1849,7 @@ a.ui.labels .label:hover {
} }
.add-comment-left.add-comment-right .ui.attached.header { .add-comment-left.add-comment-right .ui.attached.header {
border-color: #5d5c5c; border-color: var(--color-secondary);
border-right: none; border-right: none;
} }
@ -2039,6 +2027,10 @@ a.ui.labels .label:hover {
border-color: var(--color-secondary); border-color: var(--color-secondary);
} }
.ui.popup:before {
box-shadow: 1px 1px 0 0 var(--color-secondary);
}
.ui.popup.top:before, .ui.popup.top:before,
.ui.popup.bottom:before { .ui.popup.bottom:before {
background-color: #383c4a; background-color: #383c4a;