Skip to content

Commit a21a7d4

Browse files
silverwindlunny
silverwind
authored and
lunny
committed
Fix global search result CSS, misc CSS tweaks (#7789)
- Fixes double line-numbers and padding in Explore > Code > Search - Moved code-view specific CSS out of their parents to share those styles better. - Fix misc issues discovered in code,diff and blame view, especially for the dark theme.
1 parent e54814d commit a21a7d4

File tree

5 files changed

+178
-210
lines changed

5 files changed

+178
-210
lines changed

‎public/css/index.css

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -215,6 +215,23 @@ footer .ui.left,footer .ui.right{line-height:40px}
215215
.inline-grouped-list{display:inline-block;vertical-align:top}
216216
.inline-grouped-list>.ui{display:block;margin-top:5px;margin-bottom:10px}
217217
.inline-grouped-list>.ui:first-child{margin-top:1px}
218+
.lines-num{vertical-align:top;text-align:right!important;color:#999;background:#f5f5f5;width:1%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
219+
.lines-num span{line-height:20px!important;padding:0 10px;cursor:pointer;display:block}
220+
.lines-code,.lines-num{padding:0!important}
221+
.lines-code .hljs,.lines-code ol,.lines-code pre,.lines-num .hljs,.lines-num ol,.lines-num pre{background-color:#fff;margin:0;padding:0!important}
222+
.lines-code .hljs li,.lines-code ol li,.lines-code pre li,.lines-num .hljs li,.lines-num ol li,.lines-num pre li{display:block;width:100%}
223+
.lines-code .hljs li:before,.lines-code ol li:before,.lines-code pre li:before,.lines-num .hljs li:before,.lines-num ol li:before,.lines-num pre li:before{content:' '}
224+
.lines-commit{vertical-align:top;color:#999;padding:0!important;background:#f5f5f5;width:1%;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}
225+
.lines-commit .blame-info{width:350px;max-width:350px;display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:0 0 0 10px}
226+
.lines-commit .blame-info .blame-data{display:flex;font-family:-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',Roboto,Helvetica,Arial}
227+
.lines-commit .blame-info .blame-data .blame-message{flex-grow:2;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:20px}
228+
.lines-commit .blame-info .blame-data .blame-avatar,.lines-commit .blame-info .blame-data .blame-time{flex-shrink:0}
229+
.lines-commit .ui.avatar.image{height:18px;width:18px}
230+
.lines-code .bottom-line,.lines-commit .bottom-line,.lines-num .bottom-line{border-bottom:1px solid #eaecef}
231+
.code-view{overflow:auto;overflow-x:auto;overflow-y:hidden}
232+
.code-view *{font-size:12px;font-family:'SF Mono',Consolas,Menlo,'Liberation Mono',Monaco,'Lucida Console',monospace;line-height:20px}
233+
.code-view table{width:100%}
234+
.code-view .active{background:#fff866}
218235
.markdown:not(code){overflow:hidden;font-size:16px;line-height:1.6!important;word-wrap:break-word}
219236
.markdown:not(code).ui.segment{padding:3em}
220237
.markdown:not(code).file-view{padding:2em 2em 2em!important}
@@ -473,23 +490,6 @@ footer .ui.left,footer .ui.right{line-height:40px}
473490
.repository.file.list .non-diff-file-content .plain-text{padding:1em 2em 1em 2em}
474491
.repository.file.list .non-diff-file-content .plain-text pre{word-break:break-word;white-space:pre-wrap}
475492
.repository.file.list .non-diff-file-content pre{overflow:auto}
476-
.repository.file.list .non-diff-file-content .code-view *{font-size:12px;font-family:'SF Mono',Consolas,Menlo,'Liberation Mono',Monaco,'Lucida Console',monospace;line-height:20px}
477-
.repository.file.list .non-diff-file-content .code-view table{width:100%}
478-
.repository.file.list .non-diff-file-content .code-view .lines-num{vertical-align:top;text-align:right;color:#999;background:#f5f5f5;width:1%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
479-
.repository.file.list .non-diff-file-content .code-view .lines-num span{line-height:20px;padding:0 10px;cursor:pointer;display:block}
480-
.repository.file.list .non-diff-file-content .code-view .lines-code,.repository.file.list .non-diff-file-content .code-view .lines-num{padding:0}
481-
.repository.file.list .non-diff-file-content .code-view .lines-code .hljs,.repository.file.list .non-diff-file-content .code-view .lines-code ol,.repository.file.list .non-diff-file-content .code-view .lines-code pre,.repository.file.list .non-diff-file-content .code-view .lines-num .hljs,.repository.file.list .non-diff-file-content .code-view .lines-num ol,.repository.file.list .non-diff-file-content .code-view .lines-num pre{background-color:#fff;margin:0;padding:0!important}
482-
.repository.file.list .non-diff-file-content .code-view .lines-code .hljs li,.repository.file.list .non-diff-file-content .code-view .lines-code ol li,.repository.file.list .non-diff-file-content .code-view .lines-code pre li,.repository.file.list .non-diff-file-content .code-view .lines-num .hljs li,.repository.file.list .non-diff-file-content .code-view .lines-num ol li,.repository.file.list .non-diff-file-content .code-view .lines-num pre li{display:block;width:100%}
483-
.repository.file.list .non-diff-file-content .code-view .lines-code .hljs li.active,.repository.file.list .non-diff-file-content .code-view .lines-code ol li.active,.repository.file.list .non-diff-file-content .code-view .lines-code pre li.active,.repository.file.list .non-diff-file-content .code-view .lines-num .hljs li.active,.repository.file.list .non-diff-file-content .code-view .lines-num ol li.active,.repository.file.list .non-diff-file-content .code-view .lines-num pre li.active{background:#ffd}
484-
.repository.file.list .non-diff-file-content .code-view .lines-code .hljs li:before,.repository.file.list .non-diff-file-content .code-view .lines-code ol li:before,.repository.file.list .non-diff-file-content .code-view .lines-code pre li:before,.repository.file.list .non-diff-file-content .code-view .lines-num .hljs li:before,.repository.file.list .non-diff-file-content .code-view .lines-num ol li:before,.repository.file.list .non-diff-file-content .code-view .lines-num pre li:before{content:' '}
485-
.repository.file.list .non-diff-file-content .code-view .lines-commit{vertical-align:top;color:#999;padding:0;background:#f5f5f5;width:1%;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}
486-
.repository.file.list .non-diff-file-content .code-view .lines-commit .blame-info{width:350px;max-width:350px;display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:0 0 0 10px}
487-
.repository.file.list .non-diff-file-content .code-view .lines-commit .blame-info .blame-data{display:flex;font-family:-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',Roboto,Helvetica,Arial}
488-
.repository.file.list .non-diff-file-content .code-view .lines-commit .blame-info .blame-data .blame-message{flex-grow:2;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:20px}
489-
.repository.file.list .non-diff-file-content .code-view .lines-commit .blame-info .blame-data .blame-avatar,.repository.file.list .non-diff-file-content .code-view .lines-commit .blame-info .blame-data .blame-time{flex-shrink:0}
490-
.repository.file.list .non-diff-file-content .code-view .lines-commit .ui.avatar.image{height:18px;width:18px}
491-
.repository.file.list .non-diff-file-content .code-view .lines-code .bottom-line,.repository.file.list .non-diff-file-content .code-view .lines-commit .bottom-line,.repository.file.list .non-diff-file-content .code-view .lines-num .bottom-line{border-bottom:1px solid #eaecef}
492-
.repository.file.list .non-diff-file-content .code-view .active{background:#ffd}
493493
.repository.file.list .sidebar{padding-left:0}
494494
.repository.file.list .sidebar .octicon{width:16px}
495495
.repository.file.editor .treepath{width:100%}
@@ -659,10 +659,9 @@ footer .ui.left,footer .ui.right{line-height:40px}
659659
.repository .diff-file-box .file-body.file-code .lines-num span.fold{display:block;text-align:center}
660660
.repository .diff-file-box .file-body.file-code .lines-num-old{border-right:1px solid #ddd}
661661
.repository .diff-file-box .code-diff{font-size:12px}
662-
.repository .diff-file-box .code-diff td{padding:0 0 0 10px;border-top:0}
663-
.repository .diff-file-box .code-diff .lines-num{border-color:#d4d4d5;border-right-width:1px;border-right-style:solid;padding:0 5px}
662+
.repository .diff-file-box .code-diff td{padding:0 0 0 10px!important;border-top:0}
663+
.repository .diff-file-box .code-diff .lines-num{border-color:#d4d4d5;border-right-width:1px;border-right-style:solid;padding:0 5px!important}
664664
.repository .diff-file-box .code-diff tbody tr td.halfwidth{width:49%}
665-
.repository .diff-file-box .code-diff tbody tr td.tag-code,.repository .diff-file-box .code-diff tbody tr.tag-code td{background-color:#f0f0f0!important;border-color:#d3cfcf!important;padding-top:8px;padding-bottom:8px}
666665
.repository .diff-file-box .code-diff tbody tr .removed-code{background-color:#f99}
667666
.repository .diff-file-box .code-diff tbody tr .added-code{background-color:#9f9}
668667
.repository .diff-file-box .code-diff tbody tr [data-line-num]::before{content:attr(data-line-num);text-align:right}
@@ -677,7 +676,6 @@ footer .ui.left,footer .ui.right{line-height:40px}
677676
.repository .diff-file-box .code-diff-split tbody tr td:nth-child(4){border-left-width:1px;border-left-style:solid}
678677
.repository .diff-file-box.file-content{clear:right}
679678
.repository .diff-file-box.file-content img{max-width:100%;padding:5px 5px 0 5px}
680-
.repository .code-view{overflow:auto;overflow-x:auto;overflow-y:hidden}
681679
.repository .repo-search-result{padding-top:10px;padding-bottom:10px}
682680
.repository .repo-search-result .lines-num a{color:inherit}
683681
.repository.quickstart .guide .item{padding:1em}
@@ -848,6 +846,7 @@ tbody.commit-list{vertical-align:baseline}
848846
.repo-buttons .disabled-repo-button a.button{opacity:.5;cursor:not-allowed}
849847
.repo-buttons .disabled-repo-button a.button:hover{background:0 0!important;color:rgba(0,0,0,.6)!important;box-shadow:0 0 0 1px rgba(34,36,38,.15) inset!important}
850848
.repo-buttons .ui.labeled.button>.label{border-left:0!important;margin:0!important}
849+
.tag-code,.tag-code td{background-color:#f0f0f0!important;border-color:#d3cfcf!important;padding-top:8px;padding-bottom:8px}
851850
.CodeMirror{font:14px 'SF Mono',Consolas,Menlo,'Liberation Mono',Monaco,'Lucida Console',monospace}
852851
.CodeMirror.cm-s-default{border-radius:3px;padding:0!important}
853852
.CodeMirror .cm-comment{background:inherit!important}

‎public/css/theme-arc-green.css

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
.hljs{display:block;overflow-x:auto;padding:.5em;color:#bababa}
2-
.repository.file.list .non-diff-file-content .code-view .lines-code ol,.repository.file.list .non-diff-file-content .code-view .lines-num{background-color:#2b2b2b!important}
32
.hljs-emphasis,.hljs-strong{color:#a8a8a2}
43
.hljs-bullet,.hljs-link,.hljs-literal,.hljs-number,.hljs-quote,.hljs-regexp{color:#6896ba}
54
.hljs-code,.hljs-selector-class{color:#a6e22e}
@@ -90,8 +89,8 @@ footer{background:#2e323e;border-top:1px solid #313131}
9089
.ui.button:hover{background-color:#404552;color:#dbdbdb}
9190
.ui.table thead th{background:#404552;color:#dbdbdb}
9291
.repository.file.list #repo-files-table tr:hover{background-color:#393d4a}
93-
.ui.table{color:#a5a5a5!important;border:1px solid #4c505c;background:#353945}
94-
.ui.table tbody tr{border-bottom:1px solid #333640;background:#2a2e3a}
92+
.ui.table{color:#a5a5a5!important;border-color:#4c505c;background:#353945}
93+
.ui.table tbody tr{border-color:#333640;background:#2a2e3a}
9594
.ui .text.grey{color:#808084!important}
9695
.ui.attached.table.segment{background:#353945;color:#dbdbdb!important}
9796
.markdown:not(code) h2{border-bottom:1px solid #304251}
@@ -137,13 +136,10 @@ footer{background:#2e323e;border-top:1px solid #313131}
137136
.repository .diff-file-box .code-diff-unified tbody tr.del-code td{background-color:#3c2626!important;border-color:#634343!important}
138137
.repository .diff-file-box .code-diff-unified tbody tr.add-code td{background-color:#283e2d!important;border-color:#314a37!important}
139138
.repository .diff-file-box .code-diff tbody tr .added-code{background-color:#3a523a}
140-
.repository .diff-file-box .code-diff .lines-num{border-right:1px solid #2d2d2d}
141-
.repository .diff-file-box .file-body.file-code .lines-num{color:#9e9e9e;background:#2e323e}
142-
.repository .diff-file-box .file-body.file-code .lines-num-old{border-right:1px solid #2d2d2d}
143139
.hljs-section,.hljs-selector-id,.hljs-title{color:#986c88}
144140
.hljs-doctag,.hljs-string{color:#8ab398}
145141
.repository .diff-file-box .code-diff tbody tr .removed-code{background-color:#5f3737}
146-
.repository .diff-file-box .code-diff tbody tr td.tag-code,.repository .diff-file-box .code-diff tbody tr.tag-code td{background-color:#292727!important}
142+
.tag-code,.tag-code td{background:#242637!important;border-color:transparent!important}
147143
.ui.vertical.menu .active.item{background:#4b5162}
148144
.ui.vertical.menu .item{background:#353945}
149145
.ui.vertical.menu .header.item{background:#404552}
@@ -205,18 +201,20 @@ input{background:#2e323e}
205201
.ui.list .list>.item .header,.ui.list>.item .header{color:#dedede}
206202
.ui.list .list>.item .description,.ui.list>.item .description{color:#9e9e9e}
207203
.ui.user.list .item .description a{color:#668cb1}
208-
.repository.file.list #file-content .code-view .lines-num{background:#2e323e}
209204
.repository.file.list #repo-files-table tbody .octicon.octicon-file-directory,.repository.file.list #repo-files-table tbody .octicon.octicon-file-submodule{color:#7c9b5e}
210205
.ui.blue.button:focus,.ui.blue.buttons .button:focus{background-color:#a27558}
211206
.ui.basic.blue.button:hover,.ui.basic.blue.buttons .button:hover{box-shadow:0 0 0 1px #87ab63 inset!important;color:#87ab63!important}
212207
.ui.basic.blue.button:focus,.ui.basic.blue.buttons .button:focus{box-shadow:0 0 0 1px #87ab63 inset!important;color:#87ab63!important}
213-
.repository.file.list #file-content .code-view .lines-code .hljs,.repository.file.list #file-content .code-view .lines-code ol,.repository.file.list #file-content .code-view .lines-code pre,.repository.file.list #file-content .code-view .lines-num .hljs,.repository.file.list #file-content .code-view .lines-num ol,.repository.file.list #file-content .code-view .lines-num pre{background-color:#2a2e3a}
208+
.lines-commit{background:#2e323e!important}
209+
.bottom-line{border-color:#4e525e!important}
210+
.lines-num{background:#2e323e!important;color:#9e9e9e!important;border-color:#2d2d2d!important}
211+
.lines-code .hljs,.lines-code ol,.lines-code pre,.lines-num .hljs,.lines-num ol,.lines-num pre{background-color:#2a2e3a!important}
212+
.code-view .active{background:#554a00}
214213
a.ui.label:hover,a.ui.labels .label:hover{background-color:#505667!important;color:#dbdbdb!important}
215214
.repository #commits-table td.sha .sha.label,.repository #repo-files-table .sha.label{border-color:#888}
216215
.repository #commits-table td.sha .sha.label.isSigned .detail.icon,.repository #repo-files-table .sha.label.isSigned .detail.icon{background:0 0;border-left-color:#888}
217216
.repository .label.list .item{border-bottom:1px dashed #4c505c}
218217
.ui.basic.blue.button,.ui.basic.blue.buttons .button{box-shadow:0 0 0 1px #87ab63 inset!important;color:#87ab63!important}
219-
.repository.file.list #file-content .code-view .hljs,.repository.file.list #file-content .code-view .lines-code ol,.repository.file.list #file-content .code-view .lines-code pre,.repository.file.list #file-content .code-view .lines-num .hljs,.repository.file.list #file-content .code-view .lines-num ol,.repository.file.list #file-content .code-view .lines-num pre{background-color:#2a2e3a}
220218
.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(1),.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(2),.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(3),.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(4),.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(5),.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(6){background-color:#2a2e3a}
221219
.repository .diff-file-box .code-diff-split tbody tr td.add-code,.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(4),.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(5),.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(6){background-color:#283e2d!important;border-color:#314a37!important}
222220
.repository .diff-file-box .code-diff-split tbody tr td.del-code,.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(1),.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(2),.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(3){background-color:#3c2626!important;border-color:#634343!important}

‎public/less/_base.less

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -910,3 +910,112 @@ footer {
910910
}
911911
}
912912
}
913+
914+
.lines-num {
915+
vertical-align: top;
916+
text-align: right !important;
917+
color: #999999;
918+
background: #f5f5f5;
919+
width: 1%;
920+
user-select: none;
921+
922+
span {
923+
line-height: 20px !important;
924+
padding: 0 10px;
925+
cursor: pointer;
926+
display: block;
927+
}
928+
}
929+
930+
.lines-num,
931+
.lines-code {
932+
padding: 0 !important;
933+
934+
pre,
935+
ol,
936+
.hljs {
937+
background-color: white;
938+
margin: 0;
939+
padding: 0 !important;
940+
941+
li {
942+
display: block;
943+
width: 100%;
944+
945+
&:before {
946+
content: ' ';
947+
}
948+
}
949+
}
950+
}
951+
952+
.lines-commit {
953+
vertical-align: top;
954+
color: #999999;
955+
padding: 0 !important;
956+
background: #f5f5f5;
957+
width: 1%;
958+
-moz-user-select: none;
959+
-ms-user-select: none;
960+
-webkit-user-select: none;
961+
user-select: none;
962+
963+
.blame-info {
964+
width: 350px;
965+
max-width: 350px;
966+
display: block;
967+
user-select: none;
968+
padding: 0 0 0 10px;
969+
970+
.blame-data {
971+
display: flex;
972+
font-family: @default-fonts;
973+
974+
.blame-message {
975+
flex-grow: 2;
976+
overflow: hidden;
977+
white-space: nowrap;
978+
text-overflow: ellipsis;
979+
line-height: 20px;
980+
}
981+
982+
.blame-time,
983+
.blame-avatar {
984+
flex-shrink: 0;
985+
}
986+
}
987+
}
988+
989+
.ui.avatar.image {
990+
height: 18px;
991+
width: 18px;
992+
}
993+
}
994+
995+
.lines-num,
996+
.lines-code,
997+
.lines-commit {
998+
.bottom-line {
999+
border-bottom: 1px solid #eaecef;
1000+
}
1001+
}
1002+
1003+
.code-view {
1004+
overflow: auto;
1005+
overflow-x: auto;
1006+
overflow-y: hidden;
1007+
1008+
* {
1009+
font-size: 12px;
1010+
font-family: @monospaced-fonts, monospace;
1011+
line-height: 20px;
1012+
}
1013+
1014+
table {
1015+
width: 100%;
1016+
}
1017+
1018+
.active {
1019+
background: #fff866;
1020+
}
1021+
}

0 commit comments

Comments
 (0)