Browse Source

Add wrapping to long diff lines (#2789)

* Add wrapping to long diff lines to fix #1827

* Fix  css class and make changes to source (less) files

* Fix wrong space indentation

* Fix indentation inconsistencies and remove very old WebKit workaround
Lauris BH 2 years ago
parent
commit
762f1d7237
4 changed files with 1724 additions and 1720 deletions
  1. 1 1
      public/css/index.css
  2. 449 446
      public/less/_base.less
  3. 1273 1272
      public/less/_repository.less
  4. 1 1
      templates/repo/diff/section_unified.tmpl

File diff suppressed because it is too large
+ 1 - 1
public/css/index.css


+ 449 - 446
public/less/_base.less

@@ -1,508 +1,511 @@
1 1
 @footer-margin: 40px;
2 2
 
3 3
 body {
4
-	font-family: "Helvetica Neue", "Microsoft YaHei", Arial, Helvetica, sans-serif !important;
5
-	background-color: #fff;
6
-	overflow-y: scroll;
7
-	-webkit-font-smoothing: antialiased;
4
+    font-family: "Helvetica Neue", "Microsoft YaHei", Arial, Helvetica, sans-serif !important;
5
+    background-color: #fff;
6
+    overflow-y: scroll;
7
+    -webkit-font-smoothing: antialiased;
8 8
 }
9 9
 img {
10
-	border-radius: 3px;
10
+    border-radius: 3px;
11 11
 }
12 12
 pre, code {
13
-	font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
14
-	&.raw {
15
-		padding: 7px 12px;
16
-		margin: 10px 0;
17
-		background-color: #f8f8f8;
18
-		border: 1px solid #ddd;
19
-		border-radius: 3px;
20
-		font-size: 13px;
21
-		line-height: 1.5;
22
-		overflow: auto;
23
-	}
24
-	&.wrap {
25
-		white-space: pre-wrap;       /* CSS 3 */
26
-//		white-space: -moz-normal;  /* Mozilla, since 1999 */
27
-//		white-space: -normal;      /* Opera 4-6 */
28
-//		white-space: -o-normal;    /* Opera 7 */
29
-		word-break: break-word;
30
-	}
13
+    font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
14
+    &.raw {
15
+        padding: 7px 12px;
16
+        margin: 10px 0;
17
+        background-color: #f8f8f8;
18
+        border: 1px solid #ddd;
19
+        border-radius: 3px;
20
+        font-size: 13px;
21
+        line-height: 1.5;
22
+        overflow: auto;
23
+    }
24
+    &.wrap {
25
+        white-space: pre-wrap;       /* CSS 3 */
26
+//      white-space: -moz-normal;    /* Mozilla, since 1999 */
27
+//      white-space: -normal;        /* Opera 4-6 */
28
+//      white-space: -o-normal;      /* Opera 7 */
29
+
30
+        -ms-word-break: break-all;
31
+        word-break: break-all;
32
+
33
+        /* These are technically the same, but use both */
34
+        overflow-wrap: break-word;
35
+        word-wrap: break-word;
36
+    }
31 37
 }
32 38
 .dont-break-out {
33
-  /* These are technically the same, but use both */
34
-  overflow-wrap: break-word;
35
-  word-wrap: break-word;
36
-
37
-  -ms-word-break: break-all;
38
-  /* This is the dangerous one in WebKit, as it breaks things wherever */
39
-  word-break: break-all;
40
-  /* Instead use this non-standard one: */
41
-  word-break: break-word;
42
-
43
-  /* Adds a hyphen where the word breaks, if supported (No Blink) */
44
-  -ms-hyphens: auto;
45
-  -moz-hyphens: auto;
46
-  -webkit-hyphens: auto;
47
-  hyphens: auto;
39
+    /* These are technically the same, but use both */
40
+    overflow-wrap: break-word;
41
+    word-wrap: break-word;
42
+
43
+    -ms-word-break: break-all;
44
+    word-break: break-all;
45
+
46
+    /* Adds a hyphen where the word breaks, if supported (No Blink) */
47
+    -ms-hyphens: auto;
48
+    -moz-hyphens: auto;
49
+    -webkit-hyphens: auto;
50
+    hyphens: auto;
48 51
 }
49 52
 .full.height {
50
-	padding: 0;
51
-	margin: 0 0 -@footer-margin*2 0;
52
-	min-height: 100%;
53
+    padding: 0;
54
+    margin: 0 0 -@footer-margin*2 0;
55
+    min-height: 100%;
53 56
 }
54 57
 .following.bar {
55
-	z-index: 900;
56
-	left: 0;
57
-	width: 100%;
58
-	&.light {
59
-		background-color: white;
60
-		border-bottom: 1px solid #DDDDDD;
61
-		box-shadow: 0 2px 3px rgba(0, 0, 0, 0.04);
62
-	}
63
-	.column .menu {
64
-		margin-top: 0;
65
-	}
66
-	.top.menu a.item.brand {
67
-		padding-left: 0;
68
-	}
69
-	.brand .ui.mini.image {
70
-		width: 30px;
71
-	}
72
-	.top.menu a.item:hover,
73
-	.top.menu .dropdown.item:hover,
74
-	.top.menu .dropdown.item.active	{
75
-		background-color: transparent;
76
-	}
77
-	.top.menu a.item:hover {
78
-		color: rgba(0,0,0,.45);
79
-	}
80
-	.top.menu .menu {
81
-		z-index: 900;
82
-	}
83
-	.icon,
84
-	.octicon {
85
-		margin-right: 5px !important;
86
-	}
87
-	.head.link.item {
88
-		padding-right: 0 !important;
89
-	}
90
-	.avatar > .ui.image {
91
-		margin-right: 0;
92
-	}
93
-	.avatar .octicon-triangle-down {
94
-		margin-top: 6.5px;
95
-	}
96
-	.searchbox {
97
-		background-color: rgb(244, 244, 244) !important;
98
-		&:focus {
99
-			background-color: rgb(233, 233, 233) !important;
100
-		}
101
-	}
102
-	.text .octicon {
103
-		width: 16px;
104
-		text-align: center;
105
-	}
106
-	.right.menu {
107
-		.menu {
108
-			left: auto;
109
-			right: 0;
110
-		}
111
-		.dropdown .menu {
112
-			margin-top: 0;
113
-		}
114
-	}
58
+    z-index: 900;
59
+    left: 0;
60
+    width: 100%;
61
+    &.light {
62
+        background-color: white;
63
+        border-bottom: 1px solid #DDDDDD;
64
+        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.04);
65
+    }
66
+    .column .menu {
67
+        margin-top: 0;
68
+    }
69
+    .top.menu a.item.brand {
70
+        padding-left: 0;
71
+    }
72
+    .brand .ui.mini.image {
73
+        width: 30px;
74
+    }
75
+    .top.menu a.item:hover,
76
+    .top.menu .dropdown.item:hover,
77
+    .top.menu .dropdown.item.active {
78
+        background-color: transparent;
79
+    }
80
+    .top.menu a.item:hover {
81
+        color: rgba(0,0,0,.45);
82
+    }
83
+    .top.menu .menu {
84
+        z-index: 900;
85
+    }
86
+    .icon,
87
+    .octicon {
88
+        margin-right: 5px !important;
89
+    }
90
+    .head.link.item {
91
+        padding-right: 0 !important;
92
+    }
93
+    .avatar > .ui.image {
94
+        margin-right: 0;
95
+    }
96
+    .avatar .octicon-triangle-down {
97
+        margin-top: 6.5px;
98
+    }
99
+    .searchbox {
100
+        background-color: rgb(244, 244, 244) !important;
101
+        &:focus {
102
+            background-color: rgb(233, 233, 233) !important;
103
+        }
104
+    }
105
+    .text .octicon {
106
+        width: 16px;
107
+        text-align: center;
108
+    }
109
+    .right.menu {
110
+        .menu {
111
+            left: auto;
112
+            right: 0;
113
+        }
114
+        .dropdown .menu {
115
+            margin-top: 0;
116
+        }
117
+    }
115 118
 }
116 119
 
117 120
 .ui {
118
-	&.left {
119
-		float: left;
120
-	}
121
-	&.right {
122
-		float: right;
123
-	}
124
-
125
-	&.button, &.menu .item {
126
-		-moz-user-select: auto;
127
-		-ms-user-select: auto;
128
-		-webkit-user-select: auto;
129
-		user-select: auto;
130
-	}
131
-
132
-	&.container {
133
-		&.fluid {
134
-			&.padded {
135
-				padding: 0 10px 0 10px;
136
-			}
137
-		}
138
-	}
139
-
140
-	&.form {
141
-		.ui.button {
142
-			font-weight: normal;
143
-		}
144
-	}
145
-
146
-	.text {
147
-		&.red {
148
-			color: #d95c5c !important;
149
-			a {
150
-				color: #d95c5c !important;
151
-				&:hover {
152
-					color: #E67777 !important;
153
-				}
154
-			}
155
-		}
156
-		&.blue {
157
-			color: #428bca !important;
158
-			a {
159
-				color: #15c !important;
160
-				&:hover {
161
-					color: #428bca !important;
162
-				}
163
-			}
164
-		}
165
-		&.black {
166
-			color: #444;
167
-			&:hover {
168
-				color: #000;
169
-			}
170
-		}
171
-		&.grey {
172
-			color: #767676 !important;
173
-			a {
174
-				color: #444 !important;
175
-				&:hover {
176
-					color: #000 !important;
177
-				}
178
-			}
179
-		}
180
-		&.light.grey {
181
-			color: #888 !important;
182
-		}
183
-		&.green {
184
-			color: #6cc644 !important;
185
-		}
186
-		&.purple {
187
-			color: #6e5494 !important;
188
-		}
189
-		&.yellow {
190
-			color: #FBBD08 !important;
191
-		}
192
-		&.gold {
193
-			color: #a1882b !important;
194
-		}
195
-
196
-		&.left {
197
-			text-align: left !important;
198
-		}
199
-		&.right {
200
-			text-align: right !important;
201
-		}
202
-		&.small {
203
-			font-size: 0.75em;
204
-		}
205
-		&.normal {
206
-			font-weight: normal;
207
-		}
208
-		&.bold {
209
-			font-weight: bold;
210
-		}
211
-		&.italic {
212
-			font-style: italic;
213
-		}
214
-
215
-		&.truncate {
216
-			overflow: hidden;
217
-			text-overflow: ellipsis;
218
-			white-space: nowrap;
219
-			display: inline-block;
220
-		}
221
-
222
-		&.thin {
223
-			font-weight: normal;
224
-		}
225
-
226
-		&.middle {
227
-			vertical-align: middle;
228
-		}
229
-	}
230
-
231
-	.message {
232
-		text-align: center;
233
-	}
234
-
235
-	.header > i + .content {
236
-		padding-left: 0.75rem;
237
-		vertical-align: middle;
238
-	}
239
-	.warning {
240
-		&.header {
241
-			background-color: #F9EDBE !important;
242
-			border-color: #F0C36D;
243
-		}
244
-		&.segment {
245
-			border-color: #F0C36D;
246
-		}
247
-	}
248
-	.info {
249
-		&.segment {
250
-			border: 1px solid #c5d5dd;
251
-			&.top {
252
-				background-color: #e6f1f6 !important;
253
-				h3, h4 {
254
-					margin-top: 0;
255
-				}
256
-				h3:last-child {
257
-					margin-top: 4px;
258
-				}
259
-				> :last-child {
260
-					margin-bottom: 0;
261
-				}
262
-			}
263
-		}
264
-	}
265
-
266
-	.normal.header {
267
-		font-weight: normal;
268
-	}
269
-
270
-	.avatar.image {
271
-		border-radius: 3px;
272
-	}
273
-
274
-	.form {
275
-		.fake {
276
-			display: none !important;
277
-		}
278
-
279
-		.sub.field {
280
-			margin-left: 25px;
281
-		}
282
-	}
283
-
284
-	.sha.label {
285
-		font-family: Consolas, Menlo, Monaco, "Lucida Console", monospace;
286
-		font-size: 13px;
287
-		padding: 6px 10px 4px 10px;
288
-		font-weight: normal;
289
-		margin: 0 6px;
290
-	}
291
-
292
-	&.status.buttons {
293
-		.octicon {
294
-			margin-right: 4px;
295
-		}
296
-	}
297
-
298
-	&.inline.delete-button {
299
-		padding: 8px 15px;
300
-		font-weight: normal;
301
-	}
302
-
303
-	.background {
304
-		&.red {
305
-			background-color: #d95c5c !important;
306
-		}
307
-		&.blue {
308
-			background-color: #428bca !important;
309
-		}
310
-		&.black {
311
-			background-color: #444;
312
-		}
313
-		&.grey {
314
-			background-color: #767676 !important;
315
-		}
316
-		&.light.grey {
317
-			background-color: #888 !important;
318
-		}
319
-		&.green {
320
-			background-color: #6cc644 !important;
321
-		}
322
-		&.purple {
323
-			background-color: #6e5494 !important;
324
-		}
325
-		&.yellow {
326
-			background-color: #FBBD08 !important;
327
-		}
328
-		&.gold {
329
-			background-color: #a1882b !important;
330
-		}
331
-	}
332
-
333
-	.branch-tag-choice {
334
-		line-height: 20px;
335
-	}
121
+    &.left {
122
+        float: left;
123
+    }
124
+    &.right {
125
+        float: right;
126
+    }
127
+
128
+    &.button, &.menu .item {
129
+        -moz-user-select: auto;
130
+        -ms-user-select: auto;
131
+        -webkit-user-select: auto;
132
+        user-select: auto;
133
+    }
134
+
135
+    &.container {
136
+        &.fluid {
137
+            &.padded {
138
+                padding: 0 10px 0 10px;
139
+            }
140
+        }
141
+    }
142
+
143
+    &.form {
144
+        .ui.button {
145
+            font-weight: normal;
146
+        }
147
+    }
148
+
149
+    .text {
150
+        &.red {
151
+            color: #d95c5c !important;
152
+            a {
153
+                color: #d95c5c !important;
154
+                &:hover {
155
+                    color: #E67777 !important;
156
+                }
157
+            }
158
+        }
159
+        &.blue {
160
+            color: #428bca !important;
161
+            a {
162
+                color: #15c !important;
163
+                &:hover {
164
+                    color: #428bca !important;
165
+                }
166
+            }
167
+        }
168
+        &.black {
169
+            color: #444;
170
+            &:hover {
171
+                color: #000;
172
+            }
173
+        }
174
+        &.grey {
175
+            color: #767676 !important;
176
+            a {
177
+                color: #444 !important;
178
+                &:hover {
179
+                    color: #000 !important;
180
+                }
181
+            }
182
+        }
183
+        &.light.grey {
184
+            color: #888 !important;
185
+        }
186
+        &.green {
187
+            color: #6cc644 !important;
188
+        }
189
+        &.purple {
190
+            color: #6e5494 !important;
191
+        }
192
+        &.yellow {
193
+            color: #FBBD08 !important;
194
+        }
195
+        &.gold {
196
+            color: #a1882b !important;
197
+        }
198
+
199
+        &.left {
200
+            text-align: left !important;
201
+        }
202
+        &.right {
203
+            text-align: right !important;
204
+        }
205
+        &.small {
206
+            font-size: 0.75em;
207
+        }
208
+        &.normal {
209
+            font-weight: normal;
210
+        }
211
+        &.bold {
212
+            font-weight: bold;
213
+        }
214
+        &.italic {
215
+            font-style: italic;
216
+        }
217
+
218
+        &.truncate {
219
+            overflow: hidden;
220
+            text-overflow: ellipsis;
221
+            white-space: nowrap;
222
+            display: inline-block;
223
+        }
224
+
225
+        &.thin {
226
+            font-weight: normal;
227
+        }
228
+
229
+        &.middle {
230
+            vertical-align: middle;
231
+        }
232
+    }
233
+
234
+    .message {
235
+        text-align: center;
236
+    }
237
+
238
+    .header > i + .content {
239
+        padding-left: 0.75rem;
240
+        vertical-align: middle;
241
+    }
242
+    .warning {
243
+        &.header {
244
+            background-color: #F9EDBE !important;
245
+            border-color: #F0C36D;
246
+        }
247
+        &.segment {
248
+            border-color: #F0C36D;
249
+        }
250
+    }
251
+    .info {
252
+        &.segment {
253
+            border: 1px solid #c5d5dd;
254
+            &.top {
255
+                background-color: #e6f1f6 !important;
256
+                h3, h4 {
257
+                    margin-top: 0;
258
+                }
259
+                h3:last-child {
260
+                    margin-top: 4px;
261
+                }
262
+                > :last-child {
263
+                    margin-bottom: 0;
264
+                }
265
+            }
266
+        }
267
+    }
268
+
269
+    .normal.header {
270
+        font-weight: normal;
271
+    }
272
+
273
+    .avatar.image {
274
+        border-radius: 3px;
275
+    }
276
+
277
+    .form {
278
+        .fake {
279
+            display: none !important;
280
+        }
281
+
282
+        .sub.field {
283
+            margin-left: 25px;
284
+        }
285
+    }
286
+
287
+    .sha.label {
288
+        font-family: Consolas, Menlo, Monaco, "Lucida Console", monospace;
289
+        font-size: 13px;
290
+        padding: 6px 10px 4px 10px;
291
+        font-weight: normal;
292
+        margin: 0 6px;
293
+    }
294
+
295
+    &.status.buttons {
296
+        .octicon {
297
+            margin-right: 4px;
298
+        }
299
+    }
300
+
301
+    &.inline.delete-button {
302
+        padding: 8px 15px;
303
+        font-weight: normal;
304
+    }
305
+
306
+    .background {
307
+        &.red {
308
+            background-color: #d95c5c !important;
309
+        }
310
+        &.blue {
311
+            background-color: #428bca !important;
312
+        }
313
+        &.black {
314
+            background-color: #444;
315
+        }
316
+        &.grey {
317
+            background-color: #767676 !important;
318
+        }
319
+        &.light.grey {
320
+            background-color: #888 !important;
321
+        }
322
+        &.green {
323
+            background-color: #6cc644 !important;
324
+        }
325
+        &.purple {
326
+            background-color: #6e5494 !important;
327
+        }
328
+        &.yellow {
329
+            background-color: #FBBD08 !important;
330
+        }
331
+        &.gold {
332
+            background-color: #a1882b !important;
333
+        }
334
+    }
335
+
336
+    .branch-tag-choice {
337
+        line-height: 20px;
338
+    }
336 339
 }
337 340
 
338 341
 
339 342
 
340 343
 .overflow.menu {
341
-	.items {
342
-		max-height: 300px;
343
-		overflow-y: auto;
344
-		.item {
345
-			position: relative;
346
-			cursor: pointer;
347
-			display: block;
348
-			border: none;
349
-			height: auto;
350
-			border-top: none;
351
-			line-height: 1em;
352
-			color: rgba(0,0,0,.8);
353
-			padding: .71428571em 1.14285714em !important;
354
-			font-size: 1rem;
355
-			text-transform: none;
356
-			font-weight: 400;
357
-			box-shadow: none;
358
-			-webkit-touch-callout: none;
359
-			&.active {
360
-				font-weight: 700;
361
-			}
362
-			&:hover {
363
-				background: rgba(0,0,0,.05);
364
-				color: rgba(0,0,0,.8);
365
-				z-index: 13;
366
-			}
367
-		}
368
-	}
344
+    .items {
345
+        max-height: 300px;
346
+        overflow-y: auto;
347
+        .item {
348
+            position: relative;
349
+            cursor: pointer;
350
+            display: block;
351
+            border: none;
352
+            height: auto;
353
+            border-top: none;
354
+            line-height: 1em;
355
+            color: rgba(0,0,0,.8);
356
+            padding: .71428571em 1.14285714em !important;
357
+            font-size: 1rem;
358
+            text-transform: none;
359
+            font-weight: 400;
360
+            box-shadow: none;
361
+            -webkit-touch-callout: none;
362
+            &.active {
363
+                font-weight: 700;
364
+            }
365
+            &:hover {
366
+                background: rgba(0,0,0,.05);
367
+                color: rgba(0,0,0,.8);
368
+                z-index: 13;
369
+            }
370
+        }
371
+    }
369 372
 }
370 373
 
371 374
 .scrolling.menu {
372
-	.item.selected {
373
-		font-weight: 700 !important;
374
-	}
375
+    .item.selected {
376
+        font-weight: 700 !important;
377
+    }
375 378
 }
376 379
 
377 380
 footer {
378
-	margin-top: @footer-margin+14px !important;
379
-	height: @footer-margin;
380
-	background-color: white;
381
-	border-top: 1px solid #d6d6d6;
382
-	clear: both;
383
-	width: 100%;
384
-	color: #888888;
385
-	.container {
386
-		padding-top: 10px;
387
-		.fa {
388
-			width: 16px;
389
-			text-align: center;
390
-			color: #428bca;
391
-		}
392
-		.links >* {
393
-			border-left: 1px solid #d6d6d6;
394
-			padding-left: 8px;
395
-			margin-left: 5px;
396
-			&:first-child {
397
-				border-left: none;
398
-			}
399
-		}
400
-	}
401
-
402
-	.ui.language .menu {
403
-		max-height: 500px;
404
-		overflow-y: auto;
405
-		margin-bottom: 7px;
406
-	}
381
+    margin-top: @footer-margin+14px !important;
382
+    height: @footer-margin;
383
+    background-color: white;
384
+    border-top: 1px solid #d6d6d6;
385
+    clear: both;
386
+    width: 100%;
387
+    color: #888888;
388
+    .container {
389
+        padding-top: 10px;
390
+        .fa {
391
+            width: 16px;
392
+            text-align: center;
393
+            color: #428bca;
394
+        }
395
+        .links >* {
396
+            border-left: 1px solid #d6d6d6;
397
+            padding-left: 8px;
398
+            margin-left: 5px;
399
+            &:first-child {
400
+                border-left: none;
401
+            }
402
+        }
403
+    }
404
+
405
+    .ui.language .menu {
406
+        max-height: 500px;
407
+        overflow-y: auto;
408
+        margin-bottom: 7px;
409
+    }
407 410
 }
408 411
 
409 412
 .hide {
410
-	display: none;
413
+    display: none;
411 414
 }
412 415
 .center {
413
-	text-align: center;
416
+    text-align: center;
414 417
 }
415 418
 
416 419
 .generate-img(16);
417 420
 .generate-img(@n, @i: 1) when (@i =< @n) {
418
-	.img-@{i} {
419
-		width: (2px * @i) !important;
420
-		height: (2px * @i) !important;
421
-	}
422
-	.generate-img(@n, (@i + 1));
421
+    .img-@{i} {
422
+        width: (2px * @i) !important;
423
+        height: (2px * @i) !important;
424
+    }
425
+    .generate-img(@n, (@i + 1));
423 426
 }
424 427
 
425 428
 // Accessibility
426 429
 .sr-only {
427
-	position: absolute;
428
-	width: 1px;
429
-	height: 1px;
430
-	padding: 0;
431
-	margin: -1px;
432
-	overflow: hidden;
433
-	clip: rect(0, 0, 0, 0);
434
-	border: 0;
430
+    position: absolute;
431
+    width: 1px;
432
+    height: 1px;
433
+    padding: 0;
434
+    margin: -1px;
435
+    overflow: hidden;
436
+    clip: rect(0, 0, 0, 0);
437
+    border: 0;
435 438
 }
436 439
 .sr-only-focusable:active,
437 440
 .sr-only-focusable:focus {
438
-	position: static;
439
-	width: auto;
440
-	height: auto;
441
-	margin: 0;
442
-	overflow: visible;
443
-	clip: auto;
441
+    position: static;
442
+    width: auto;
443
+    height: auto;
444
+    margin: 0;
445
+    overflow: visible;
446
+    clip: auto;
444 447
 }
445 448
 
446 449
 @media only screen and (max-width: 991px) and (min-width: 768px) {
447
-	.ui.container {
448
-		width: 95%;
449
-	}
450
+    .ui.container {
451
+        width: 95%;
452
+    }
450 453
 }
451 454
 
452 455
 /* Overrides some styles of the Highlight.js plugin */
453 456
 .hljs {
454
-	background: inherit !important;
455
-	padding: 0 !important;
457
+    background: inherit !important;
458
+    padding: 0 !important;
456 459
 }
457 460
 
458 461
 .ui.menu.new-menu {
459
-  justify-content: center !important;
460
-  padding-top: 15px !important;
461
-  margin-top: -15px !important;
462
-  margin-bottom: 15px !important;
463
-  background-color: #FAFAFA !important;
464
-  border-width: 1px !important;
462
+    justify-content: center !important;
463
+    padding-top: 15px !important;
464
+    margin-top: -15px !important;
465
+    margin-bottom: 15px !important;
466
+    background-color: #FAFAFA !important;
467
+    border-width: 1px !important;
465 468
 }
466 469
 
467 470
 @media only screen and (max-width: 1200px) {
468
-  .ui.menu.new-menu {
469
-      overflow-x: auto !important;
470
-      justify-content: left !important;
471
-      padding-bottom: 5px;
472
-  }
473
-  .ui.menu.new-menu::-webkit-scrollbar {
474
-      height: 8px;
475
-      display: none;
476
-  }
477
-  .ui.menu.new-menu:hover::-webkit-scrollbar {
478
-    display: block;
479
-  }
480
-  .ui.menu.new-menu::-webkit-scrollbar-track {
481
-    background: rgba(0,0,0,0.01);
482
-  }
483
-  .ui.menu.new-menu::-webkit-scrollbar-thumb {
484
-      background:rgba(0,0,0,0.2);
485
-  }
486
-  .ui.menu.new-menu:after {
487
-    position: absolute;
488
-    margin-top: -15px;
489
-    display: block;
490
-    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 100%);
491
-    content: ' ';
492
-    right: 0;
493
-    height: 53px;
494
-    z-index: 1000;
495
-    width: 60px;
496
-    clear: none;
497
-    visibility: visible;
498
-  }
499
-  .ui.menu.new-menu a.item:last-child {
500
-    padding-right: 30px !important;
501
-  }
471
+    .ui.menu.new-menu {
472
+        overflow-x: auto !important;
473
+        justify-content: left !important;
474
+        padding-bottom: 5px;
475
+    }
476
+    .ui.menu.new-menu::-webkit-scrollbar {
477
+        height: 8px;
478
+        display: none;
479
+    }
480
+    .ui.menu.new-menu:hover::-webkit-scrollbar {
481
+        display: block;
482
+    }
483
+    .ui.menu.new-menu::-webkit-scrollbar-track {
484
+        background: rgba(0,0,0,0.01);
485
+    }
486
+    .ui.menu.new-menu::-webkit-scrollbar-thumb {
487
+        background:rgba(0,0,0,0.2);
488
+    }
489
+    .ui.menu.new-menu:after {
490
+        position: absolute;
491
+        margin-top: -15px;
492
+        display: block;
493
+        background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 100%);
494
+        content: ' ';
495
+        right: 0;
496
+        height: 53px;
497
+        z-index: 1000;
498
+        width: 60px;
499
+        clear: none;
500
+        visibility: visible;
501
+    }
502
+    .ui.menu.new-menu a.item:last-child {
503
+        padding-right: 30px !important;
504
+    }
502 505
 }
503 506
 
504 507
 [v-cloak] {
505
-	display: none !important;
508
+    display: none !important;
506 509
 }
507 510
 
508 511
 .repos-search {

File diff suppressed because it is too large
+ 1273 - 1272
public/less/_repository.less


+ 1 - 1
templates/repo/diff/section_unified.tmpl

@@ -16,7 +16,7 @@
16 16
 			</td>
17 17
 			{{end}}
18 18
 			<td class="lines-code">
19
-				<pre><code class="{{if $highlightClass}}language-{{$highlightClass}}{{else}}nohighlight{{end}}">{{$section.GetComputedInlineDiffFor $line}}</code></pre>
19
+				<pre><code class="wrap {{if $highlightClass}}language-{{$highlightClass}}{{else}}nohighlight{{end}}">{{$section.GetComputedInlineDiffFor $line}}</code></pre>
20 20
 			</td>
21 21
 		</tr>
22 22
 	{{end}}