Skip to content

Commit 05efb33

Browse files
silverwindsilverwind
authored
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
1 parent d7e0983 commit 05efb33

File tree

5 files changed

+57
-64
lines changed

5 files changed

+57
-64
lines changed

‎templates/repo/diff/box.tmpl

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -158,10 +158,10 @@
158158
{{else}}
159159
<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>
160160
<td class="lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td>
161-
<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>
161+
<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>
162162
<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>
163163
<td class="lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td>
164-
<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>
164+
<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>
165165
{{end}}
166166
</tr>
167167
{{if gt (len $line.Comments) 0}}

‎templates/repo/diff/section_unified.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
{{if eq .GetType 4}}
3030
<td class="chroma lines-code blob-hunk"><code class="code-inner">{{$section.GetComputedInlineDiffFor $line}}</code></td>
3131
{{else}}
32-
<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>
32+
<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>
3333
{{end}}
3434
</tr>
3535
{{if gt (len $line.Comments) 0}}

‎web_src/less/_base.less

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,8 @@ h5,
9999
.ui.form input[type="text"],
100100
.ui.form input[type="time"],
101101
.ui.form input[type="url"],
102+
.ui.input textarea,
103+
.ui.form textarea,
102104
.ui.header,
103105
.ui.items > .item > .content > .header,
104106
.ui.list .list > .item .header,
@@ -166,6 +168,12 @@ table {
166168
color: #fff !important;
167169
}
168170

171+
::placeholder,
172+
.CodeMirror-placeholder {
173+
color: #aaa !important;
174+
opacity: 1 !important;
175+
}
176+
169177
a,
170178
.ui.breadcrumb a {
171179
color: var(--color-primary);

‎web_src/less/_review.less

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
11
.ui.button.add-code-comment {
2-
font-size: 14px;
3-
height: 16px;
4-
line-height: 12px !important;
5-
padding: 0;
6-
position: relative;
7-
width: 16px;
2+
padding: 2px;
3+
position: absolute;
4+
margin-left: -22px;
85
z-index: 5;
9-
float: left;
10-
margin: 2px -10px 2px -20px;
116
opacity: 0;
127
transition: transform .1s ease-in-out;
13-
transform: scale(1, 1);
8+
transform: scale(1);
9+
box-shadow: none !important;
10+
border: none !important;
1411

1512
&:hover {
16-
transform: scale(1.2, 1.2);
13+
transform: scale(1.1);
1714
}
1815
}
1916

@@ -71,10 +68,6 @@
7168
cursor: pointer;
7269
}
7370

74-
.ui.form textarea {
75-
border: 0;
76-
}
77-
7871
.ui.active.tab {
7972
padding: .5em;
8073

‎web_src/less/themes/theme-arc-green.less

Lines changed: 39 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -351,7 +351,7 @@
351351
/* GenericEmph */
352352

353353
.chroma .ge {
354-
font-style: italic;
354+
color: #ef5;
355355
}
356356
/* GenericError */
357357

@@ -441,8 +441,9 @@ body {
441441
color: #a5a5a8;
442442
}
443443

444-
::placeholder {
445-
color: #7f7f7f !important;
444+
::placeholder,
445+
.CodeMirror-placeholder {
446+
color: #6a737d !important;
446447
}
447448

448449
[data-tooltip]::before,
@@ -746,7 +747,7 @@ a.ui.basic.green.label:hover {
746747
.ui.form input[type="url"],
747748
.ui.selection.dropdown {
748749
color: #a5a5a8;
749-
background: var(--color-secondary);
750+
background: #2e323e;
750751
border: 1px solid var(--color-secondary);
751752
}
752753

@@ -764,8 +765,8 @@ a.ui.basic.green.label:hover {
764765
.ui.form input[type="time"]:hover,
765766
.ui.form input[type="url"]:hover,
766767
.ui.selection.dropdown:hover {
767-
background: var(--color-secondary);
768-
border: 1px solid var(--color-secondary);
768+
background: #2e323e;
769+
border: 1px solid #505667;
769770
color: #dbdbdb;
770771
}
771772

@@ -783,7 +784,7 @@ a.ui.basic.green.label:hover {
783784
.ui.form input[type="time"]:focus,
784785
.ui.form input[type="url"]:focus,
785786
.ui.selection.dropdown:focus {
786-
background: var(--color-secondary);
787+
background: #2e323e;
787788
border: 1px solid #6a737d;
788789
color: #dbdbdb;
789790
}
@@ -1449,55 +1450,54 @@ input {
14491450
color: #dbdbdb !important;
14501451
}
14511452

1453+
.ui.checkbox .box:before,
1454+
.ui.checkbox label:before {
1455+
background: #2e323e;
1456+
border: 1px solid var(--color-secondary);
1457+
}
1458+
1459+
.ui.checkbox .box:hover:before,
1460+
.ui.checkbox label:hover:before,
1461+
.ui.checkbox .box:active:before,
1462+
.ui.checkbox label:active:before {
1463+
background: #2e323e;
1464+
border-color: #6a737d;
1465+
}
1466+
1467+
.ui.checkbox input:focus ~ .box:before,
1468+
.ui.checkbox input:focus ~ label:before,
1469+
.ui.checkbox input:checked:focus ~ .box:before,
1470+
.ui.checkbox input:checked:focus ~ label:before {
1471+
background: #2e323e;
1472+
border-color: #6a737d;
1473+
}
1474+
14521475
.ui.checkbox input:checked ~ .box:after,
14531476
.ui.checkbox input:checked ~ label:after {
14541477
color: #dbdbdb;
14551478
}
14561479

14571480
.ui.checkbox input:checked ~ .box:before,
14581481
.ui.checkbox input:checked ~ label:before {
1459-
background: var(--color-secondary);
1482+
background: #2e323e;
14601483
opacity: 1;
14611484
color: #dbdbdb;
14621485
border-color: #505667;
14631486
}
14641487

1465-
.ui.checkbox .box:before,
1466-
.ui.checkbox label:before {
1467-
background: var(--color-secondary);
1468-
border: 1px solid #505667;
1469-
}
1470-
1471-
.ui.checkbox .box:hover::before,
1472-
.ui.checkbox label:hover::before {
1473-
background: var(--color-secondary);
1474-
border-color: #505667;
1475-
}
1476-
1477-
.ui.checkbox .box:active::before,
1478-
.ui.checkbox label:active::before {
1479-
background: var(--color-secondary);
1480-
border-color: #6a737d;
1481-
}
1482-
1483-
.ui.checkbox input:focus ~ .box:before,
1484-
.ui.checkbox input:focus ~ label:before {
1485-
background: var(--color-secondary);
1486-
border-color: #6a737d;
1487-
}
1488-
14891488
.ui.checkbox input:checked:focus ~ .box:before,
14901489
.ui.checkbox input:checked:focus ~ label:before,
14911490
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ .box:before,
14921491
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label:before {
1492+
background: #2e323e;
14931493
border-color: #6a737d;
1494-
background: var(--color-secondary);
14951494
}
14961495

14971496
.ui.checkbox input:checked:focus ~ .box:after,
14981497
.ui.checkbox input:checked:focus ~ label:after,
14991498
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ .box:after,
15001499
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label:after {
1500+
background: #2e323e;
15011501
color: #dbdbdb;
15021502
}
15031503

@@ -1838,20 +1838,8 @@ a.ui.labels .label:hover {
18381838
border: 0;
18391839
}
18401840

1841-
.ui.active.tab {
1842-
&:not(.markdown) {
1843-
textarea:focus {
1844-
border: none;
1845-
}
1846-
1847-
background: var(--color-secondary);
1848-
}
1849-
1850-
border-color: var(--color-secondary);
1851-
}
1852-
18531841
.footer {
1854-
border-top-color: #5a5a5a;
1842+
border-top-color: var(--color-secondary);
18551843

18561844
.markdown-info {
18571845
color: inherit;
@@ -1861,7 +1849,7 @@ a.ui.labels .label:hover {
18611849
}
18621850

18631851
.add-comment-left.add-comment-right .ui.attached.header {
1864-
border-color: #5d5c5c;
1852+
border-color: var(--color-secondary);
18651853
border-right: none;
18661854
}
18671855

@@ -2039,6 +2027,10 @@ a.ui.labels .label:hover {
20392027
border-color: var(--color-secondary);
20402028
}
20412029

2030+
.ui.popup:before {
2031+
box-shadow: 1px 1px 0 0 var(--color-secondary);
2032+
}
2033+
20422034
.ui.popup.top:before,
20432035
.ui.popup.bottom:before {
20442036
background-color: #383c4a;

0 commit comments

Comments
 (0)