loading up the forgejo repo on tangled to test page performance
Merge pull request 'Port CSS commits' (#2863) from gusted/forgejo-port-css into forgejo
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/2863
+481
-1173
+1
-1
routers/web/repo/blame.go
+1
-1
routers/web/repo/blame.go
···
258
258
259
259
var avatar string
260
260
if commit.User != nil {
261
-
avatar = string(avatarUtils.Avatar(commit.User, 18, "gt-mr-3"))
261
+
avatar = string(avatarUtils.Avatar(commit.User, 18))
262
262
} else {
263
263
avatar = string(avatarUtils.AvatarByEmail(commit.Author.Email, commit.Author.Name, 18, "gt-mr-3"))
264
264
}
+1
-1
templates/admin/layout_head.tmpl
+1
-1
templates/admin/layout_head.tmpl
···
1
1
{{template "base/head" .ctxData}}
2
2
<div role="main" aria-label="{{.ctxData.Title}}" class="page-content {{.pageClass}}">
3
-
<div class="ui container gt-mb-4">
3
+
<div class="ui container">
4
4
{{template "base/alert" .ctxData}}
5
5
</div>
6
6
<div class="ui container fluid padded flex-container">
+7
templates/devtest/gitea-ui.tmpl
+7
templates/devtest/gitea-ui.tmpl
···
2
2
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
3
3
<div class="page-content devtest ui container">
4
4
<div>
5
+
<h1>Link</h1>
6
+
<div>
7
+
<a href="#">normal</a>
8
+
<a class="muted" href="#">muted</a>
9
+
<a class="suppressed" href="#">suppressed</a>
10
+
<a class="silenced" href="#">silenced</a>
11
+
</div>
5
12
<h1>Button</h1>
6
13
<div>
7
14
Style:
+9
-3
templates/repo/blame.tmpl
+9
-3
templates/repo/blame.tmpl
···
50
50
{{$row.Avatar}}
51
51
</div>
52
52
<div class="blame-message">
53
-
<a href="{{$row.CommitURL}}" title="{{$row.CommitMessage}}">
53
+
<a class="suppressed tw-text-text" href="{{$row.CommitURL}}" title="{{$row.CommitMessage}}">
54
54
{{$row.CommitMessage}}
55
55
</a>
56
56
</div>
57
-
<div class="blame-time">
57
+
<div class="blame-time not-mobile">
58
58
{{$row.CommitSince}}
59
59
</div>
60
60
</div>
···
62
62
</td>
63
63
<td class="lines-blame-btn">
64
64
{{if $row.PreviousSha}}
65
-
<a href="{{$row.PreviousShaURL}}" data-tooltip-content='{{ctx.Locale.Tr "repo.blame_prior"}}'>
65
+
<a role="button" class="muted" href="{{$row.PreviousShaURL}}" data-tooltip-content='{{ctx.Locale.Tr "repo.blame_prior"}}'>
66
66
{{svg "octicon-versions"}}
67
67
</a>
68
68
{{end}}
···
84
84
{{end}}
85
85
</tbody>
86
86
</table>
87
+
<div class="code-line-menu tippy-target">
88
+
{{if $.Permission.CanRead $.UnitTypeIssues}}
89
+
<a class="item ref-in-new-issue" role="menuitem" data-url-issue-new="{{.RepoLink}}/issues/new" data-url-param-body-link="{{.Repository.Link}}/src/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}{{if $.HasSourceRenderedToggle}}?display=source{{end}}" rel="nofollow noindex">{{ctx.Locale.Tr "repo.issues.context.reference_issue"}}</a>
90
+
{{end}}
91
+
<a class="item copy-line-permalink" role="menuitem" data-url="{{.Repository.Link}}/src/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}{{if $.HasSourceRenderedToggle}}?display=source{{end}}">{{ctx.Locale.Tr "repo.file_copy_permalink"}}</a>
92
+
</div>
87
93
{{end}}
88
94
</div>
89
95
</div>
+3
-3
templates/repo/diff/box.tmpl
+3
-3
templates/repo/diff/box.tmpl
···
110
110
{{$isExpandable := or (gt $file.Addition 0) (gt $file.Deletion 0) $file.IsBin}}
111
111
{{$isReviewFile := and $.IsSigned $.PageIsPullFiles (not $.IsArchived) $.IsShowingAllCommits}}
112
112
<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}} gt-mt-0" id="diff-{{$file.NameHash}}" data-old-filename="{{$file.OldName}}" data-new-filename="{{$file.Name}}" {{if or ($file.ShouldBeHidden) (not $isExpandable)}}data-folded="true"{{end}}>
113
-
<h4 class="diff-file-header sticky-2nd-row ui top attached normal header tw-flex tw-items-center tw-justify-between tw-flex-wrap">
114
-
<div class="diff-file-name tw-flex tw-items-center tw-gap-1 tw-flex-wrap">
113
+
<h4 class="diff-file-header sticky-2nd-row ui top attached header tw-font-normal tw-flex tw-items-center tw-justify-between tw-flex-wrap">
114
+
<div class="diff-file-name tw-flex tw-items-center gt-gap-2 tw-flex-wrap">
115
115
<button class="fold-file btn interact-bg gt-p-2{{if not $isExpandable}} tw-invisible{{end}}">
116
116
{{if $file.ShouldBeHidden}}
117
117
{{svg "octicon-chevron-right" 18}}
···
221
221
222
222
{{if .Diff.IsIncomplete}}
223
223
<div class="diff-file-box diff-box file-content gt-mt-3" id="diff-incomplete">
224
-
<h4 class="ui top attached normal header tw-flex tw-items-center tw-justify-between">
224
+
<h4 class="ui top attached header tw-font-normal tw-flex tw-items-center tw-justify-between">
225
225
{{ctx.Locale.Tr "repo.diff.too_many_files"}}
226
226
<a class="ui basic tiny button" id="diff-show-more-files" data-href="?skip-to={{.Diff.End}}&file-only=true">{{ctx.Locale.Tr "repo.diff.show_more"}}</a>
227
227
</h4>
+2
-2
templates/repo/header.tmpl
+2
-2
templates/repo/header.tmpl
···
1
-
<div class="header-wrapper">
1
+
<div class="secondary-nav">
2
2
{{with .Repository}}
3
3
<div class="ui container">
4
4
<div class="repo-header">
···
81
81
{{if .IsGenerated}}<div class="fork-flag">{{ctx.Locale.Tr "repo.generated_from"}} <a href="{{(.TemplateRepo ctx).Link}}">{{(.TemplateRepo ctx).FullName}}</a></div>{{end}}
82
82
</div>
83
83
{{end}}
84
-
<overflow-menu class="ui container secondary pointing tabular top attached borderless menu navbar tw-pt-0 tw-my-0">
84
+
<overflow-menu class="ui container secondary pointing tabular top attached borderless menu tw-pt-0 tw-my-0">
85
85
{{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}}
86
86
<div class="overflow-menu-items">
87
87
{{if .Permission.CanRead $.UnitTypeCode}}
+1
-1
templates/user/auth/link_account.tmpl
+1
-1
templates/user/auth/link_account.tmpl
···
1
1
{{template "base/head" .}}
2
2
<div role="main" aria-label="{{.Title}}" class="page-content user link-account">
3
-
<overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar tw-bg-header-wrapper">
3
+
<overflow-menu class="ui secondary pointing tabular top attached borderless menu secondary-nav">
4
4
<div class="overflow-menu-items tw-justify-center">
5
5
<!-- TODO handle .ShowRegistrationButton once other login bugs are fixed -->
6
6
{{if not .AllowOnlyInternalRegistration}}
+1
-1
tests/e2e/example.test.e2e.js
+1
-1
tests/e2e/example.test.e2e.js
···
23
23
await page.click('form button.ui.primary.button:visible');
24
24
// Make sure we routed to the home page. Else login failed.
25
25
await expect(page.url()).toBe(`${workerInfo.project.use.baseURL}/`);
26
-
await expect(page.locator('.dashboard-navbar span>img.ui.avatar')).toBeVisible();
26
+
await expect(page.locator('.secondary-nav span>img.ui.avatar')).toBeVisible();
27
27
await expect(page.locator('.ui.positive.message.flash-success')).toHaveText('Account was successfully created. Welcome!');
28
28
29
29
save_visual(page);
+1
-1
tests/e2e/utils_e2e.js
+1
-1
tests/e2e/utils_e2e.js
+79
-162
web_src/css/base.css
+79
-162
web_src/css/base.css
···
226
226
a {
227
227
color: var(--color-primary);
228
228
cursor: pointer;
229
-
text-decoration: none;
229
+
text-decoration-line: none;
230
230
text-decoration-skip-ink: all;
231
+
}
232
+
233
+
a:hover {
234
+
text-decoration-line: underline;
231
235
}
232
236
233
237
/* a = always colored, underlined on hover */
···
256
260
}
257
261
258
262
a.silenced:hover {
259
-
text-decoration: none;
263
+
text-decoration-line: none;
260
264
}
261
265
262
266
a.label,
···
264
268
.ui .menu a,
265
269
.ui.cards a.card,
266
270
.issue-keyword a {
267
-
text-decoration: none !important;
271
+
text-decoration-line: none !important;
268
272
}
269
273
270
274
.ui.search > .results {
···
302
306
padding: 2px 4px;
303
307
border-radius: var(--border-radius-medium);
304
308
background-color: var(--color-markup-code-block);
305
-
}
306
-
307
-
.ui.dividing.header {
308
-
border-bottom-color: var(--color-secondary);
309
309
}
310
310
311
311
/* fix Fomantic's line-height cutting off "g" on Windows Chrome with Segoe UI */
···
363
363
border-right-color: var(--color-primary);
364
364
}
365
365
366
+
.ui.menu {
367
+
display: flex;
368
+
}
369
+
366
370
.ui.menu,
367
371
.ui.vertical.menu {
368
372
background: var(--color-menu);
···
583
587
visibility: visible !important;
584
588
}
585
589
586
-
.ui.error.header {
587
-
background: var(--color-error-bg) !important;
588
-
color: var(--color-error-text) !important;
589
-
border-color: var(--color-error-border) !important;
590
-
}
591
-
592
590
.ui.error.segment {
593
591
border-color: var(--color-error-border) !important;
594
-
}
595
-
596
-
.ui.warning.header {
597
-
background: var(--color-warning-bg) !important;
598
-
color: var(--color-warning-text) !important;
599
-
border-color: var(--color-warning-border) !important;
600
592
}
601
593
602
594
.ui.warning.segment {
···
749
741
padding-bottom: 80px;
750
742
}
751
743
752
-
.page-content.new:is(.repo,.migrate,.org),
753
-
.page-content.profile:is(.user,.organization) {
754
-
padding-top: 15px;
755
-
}
756
-
757
-
/* overwrite semantic width of containers inside the main page content div (div with class "page-content") */
758
-
.page-content .ui.ui.ui.container:not(.fluid) {
759
-
width: 1280px;
760
-
max-width: calc(100% - 64px);
761
-
margin-left: auto;
762
-
margin-right: auto;
763
-
}
764
-
765
-
.ui.container.fluid.padded {
766
-
padding: 0 32px;
744
+
/* add margin below .secondary nav when it is the first child */
745
+
.page-content > :first-child.secondary-nav {
746
+
margin-bottom: 14px;
767
747
}
768
748
769
-
/* enable fluid page widths for medium size viewports */
770
-
@media (min-width: 768px) and (max-width: 1200px) {
771
-
.page-content .ui.ui.ui.container:not(.fluid) {
772
-
max-width: calc(100% - 32px);
773
-
}
774
-
.ui.container.fluid.padded {
775
-
padding: 0 16px;
776
-
}
777
-
}
778
-
779
-
@media (max-width: 767.98px) {
780
-
.page-content .ui.ui.ui.container:not(.fluid) {
781
-
max-width: calc(100% - 16px);
782
-
}
783
-
.ui.container.fluid.padded {
784
-
padding: 0 8px;
785
-
}
749
+
/* add padding to all content when there is no .secondary.nav. this uses padding instead of
750
+
margin because with the negative margin on .ui.grid we would have to set margin-top: 0,
751
+
but that does not work universally for all pages */
752
+
.page-content > :first-child:not(.secondary-nav) {
753
+
padding-top: 14px;
786
754
}
787
755
788
756
.ui.pagination.menu .active.item {
···
1085
1053
margin-bottom: 0;
1086
1054
}
1087
1055
1088
-
.ui .normal.header {
1089
-
font-weight: var(--font-weight-normal);
1090
-
}
1091
-
1092
1056
.ui .form .autofill-dummy {
1093
1057
position: absolute;
1094
1058
width: 1px;
···
1246
1210
margin-right: 0;
1247
1211
}
1248
1212
1249
-
.ui.icon.header svg {
1250
-
width: 3em;
1251
-
height: 3em;
1252
-
float: none;
1253
-
display: block;
1254
-
line-height: var(--line-height-default);
1255
-
padding: 0;
1256
-
margin: 0 auto 0.5rem;
1257
-
opacity: 1;
1258
-
}
1259
-
1260
1213
.ui.floating.dropdown .overflow.menu .scrolling.menu.items {
1261
1214
border-radius: 0 !important;
1262
1215
box-shadow: none !important;
···
1284
1237
border-radius: var(--border-radius);
1285
1238
}
1286
1239
1287
-
.attention-header {
1288
-
padding: 0.5em 0.75em !important;
1289
-
color: var(--color-text) !important;
1290
-
}
1291
-
1292
-
.attention-header :first-child {
1293
-
display: flex;
1294
-
}
1295
-
1296
1240
.attention-icon {
1297
1241
margin: auto 0.5em auto 0;
1298
1242
}
···
1337
1281
}
1338
1282
1339
1283
overflow-menu {
1340
-
margin-bottom: 15px !important;
1341
1284
border-bottom: 1px solid var(--color-secondary) !important;
1342
1285
display: flex;
1343
1286
}
···
1349
1292
1350
1293
overflow-menu .overflow-menu-items .item {
1351
1294
margin-bottom: 0 !important; /* reset fomantic's margin, because the active menu has special bottom border */
1295
+
}
1296
+
1297
+
overflow-menu .ui.label {
1298
+
margin-left: 7px !important; /* save some space */
1352
1299
}
1353
1300
1354
1301
.activity-bar-graph {
···
1423
1370
}
1424
1371
1425
1372
.lines-blame-btn {
1426
-
padding-left: 10px;
1427
-
padding-right: 10px;
1428
-
text-align: right !important;
1429
-
background-color: var(--color-code-sidebar-bg);
1430
-
width: 2%;
1373
+
padding: 0 0 0 5px;
1374
+
display: flex;
1375
+
justify-content: center;
1431
1376
}
1432
1377
1433
1378
.lines-num {
1434
-
padding-left: 10px;
1435
-
padding-right: 10px;
1379
+
padding: 0 8px;
1436
1380
text-align: right !important;
1437
-
color: var(--color-text-light-1);
1381
+
color: var(--color-text-light-2);
1438
1382
width: 1%;
1439
1383
font-family: var(--fonts-monospace);
1440
1384
}
···
1488
1432
}
1489
1433
1490
1434
.lines-code {
1491
-
background-color: var(--color-code-bg);
1492
1435
padding-left: 5px;
1493
1436
}
1494
1437
1495
-
.lines-code.active,
1496
-
.lines-code .active {
1497
-
background: var(--color-active-line) !important;
1438
+
.file-view tr.active {
1439
+
color: inherit !important;
1440
+
background: inherit !important;
1441
+
}
1442
+
1443
+
.file-view tr.active .lines-num,
1444
+
.file-view tr.active .lines-code {
1445
+
background: var(--color-highlight-bg) !important;
1498
1446
}
1499
1447
1500
-
.blame .lines-num {
1501
-
padding: 0 !important;
1502
-
background-color: var(--color-code-sidebar-bg);
1448
+
.file-view tr.active:last-of-type .lines-code {
1449
+
border-bottom-right-radius: var(--border-radius);
1503
1450
}
1504
1451
1505
-
.blame .lines-code {
1506
-
padding: 0 !important;
1452
+
.file-view tr.active .lines-num {
1453
+
position: relative;
1454
+
}
1455
+
1456
+
.file-view tr.active .lines-num::before {
1457
+
content: "";
1458
+
position: absolute;
1459
+
left: 0;
1460
+
width: 2px;
1461
+
height: 100%;
1462
+
background: var(--color-highlight-fg);
1507
1463
}
1508
1464
1509
1465
.code-inner {
···
1514
1470
}
1515
1471
1516
1472
.blame .code-inner {
1517
-
white-space: pre;
1518
-
word-break: normal;
1519
-
word-wrap: normal; /* not using overflow-wrap because safari does not treat is an an alias */
1473
+
white-space: pre-wrap;
1474
+
overflow-wrap: anywhere;
1520
1475
}
1521
1476
1522
1477
.lines-commit {
1523
1478
vertical-align: top;
1524
-
color: var(--color-text-light-2);
1479
+
color: var(--color-text-light-1);
1525
1480
padding: 0 !important;
1526
-
background: var(--color-code-sidebar-bg);
1527
1481
width: 1%;
1528
1482
}
1529
1483
1530
1484
.lines-commit .blame-info {
1531
-
width: 350px;
1532
-
max-width: 350px;
1485
+
width: min(26vw, 300px);
1533
1486
display: block;
1534
-
padding: 0 0 0 10px;
1487
+
padding: 0 0 0 6px;
1535
1488
line-height: 20px;
1536
1489
box-sizing: content-box;
1537
1490
}
···
1553
1506
flex-shrink: 0;
1554
1507
}
1555
1508
1556
-
.lines-commit .ui.avatar {
1557
-
height: 18px;
1558
-
width: 18px;
1559
-
display: block;
1560
-
margin-top: 1px;
1509
+
.blame-avatar {
1510
+
display: flex;
1511
+
align-items: center;
1512
+
margin-right: 4px;
1561
1513
}
1562
1514
1563
1515
.top-line-blame {
···
1571
1523
.lines-code .bottom-line,
1572
1524
.lines-commit .bottom-line {
1573
1525
border-bottom: 1px solid var(--color-secondary);
1526
+
}
1527
+
1528
+
.code-view {
1529
+
background: var(--color-code-bg);
1530
+
border-radius: var(--border-radius);
1574
1531
}
1575
1532
1576
1533
.code-view table {
···
1749
1706
color: var(--color-text-light);
1750
1707
}
1751
1708
1752
-
.ui.attached.header {
1753
-
position: relative;
1754
-
background: var(--color-box-header);
1755
-
border-color: var(--color-secondary);
1756
-
}
1757
-
1758
-
/* fix misaligned right buttons on box headers */
1759
-
.ui.attached.header > .ui.right {
1760
-
position: absolute;
1761
-
right: 0.78571429rem;
1762
-
top: 0;
1763
-
bottom: 0;
1764
-
display: flex;
1765
-
align-items: center;
1766
-
gap: 0.25em;
1767
-
}
1768
-
1769
-
/* the default ".ui.attached.header > .ui.right" is only able to contain "tiny" buttons, other buttons are too large */
1770
-
.ui.attached.header > .ui.right .ui.tiny.button {
1771
-
padding: 6px 10px;
1772
-
font-weight: var(--font-weight-normal);
1773
-
}
1774
-
1775
-
/* if a .top.attached.header is followed by a .segment, add some margin */
1776
-
.ui.segments + .ui.top.attached.header,
1777
-
.ui.attached.segment + .ui.top.attached.header {
1778
-
margin-top: 1rem;
1779
-
}
1780
-
1781
1709
.rss-icon {
1782
1710
display: inline-flex;
1783
1711
color: var(--color-text-light-1);
···
1833
1761
background: var(--color-secondary-dark-1) !important;
1834
1762
}
1835
1763
1836
-
/* https://github.com/go-gitea/gitea/pull/11486 */
1837
-
.ui.sub.header {
1838
-
text-transform: none;
1839
-
}
1840
-
1841
1764
.ui.tabular.menu {
1842
1765
border-color: var(--color-secondary);
1843
1766
}
1844
1767
1845
-
.ui.tabular.menu .item {
1846
-
padding: 11px 12px;
1847
-
color: var(--color-text-light-2);
1848
-
}
1849
-
1850
-
.ui.tabular.menu .item:hover {
1851
-
color: var(--color-text);
1852
-
}
1853
-
1854
1768
.ui.tabular.menu .active.item,
1855
1769
.ui.tabular.menu .active.item:hover {
1856
1770
background: var(--color-body);
···
1867
1781
border-color: var(--color-secondary);
1868
1782
}
1869
1783
1784
+
.ui.tabular.menu .item,
1870
1785
.ui.secondary.pointing.menu .item {
1786
+
padding: 11px 12px !important;
1871
1787
color: var(--color-text-light-2);
1872
1788
}
1873
1789
1874
-
.ui.secondary.pointing.menu .active.item,
1875
-
.ui.secondary.pointing.menu .active.item:hover, .ui.secondary.pointing.menu .active.item:focus,
1876
-
.ui.secondary.pointing.menu .dropdown.item:hover, .ui.secondary.pointing.menu .dropdown.item:focus,
1790
+
.ui.tabular.menu .item:hover,
1877
1791
.ui.secondary.pointing.menu a.item:hover, .ui.secondary.pointing.menu a.item:focus {
1878
-
color: var(--color-text-dark);
1879
-
}
1880
-
1881
-
.ui.header {
1882
1792
color: var(--color-text);
1883
1793
}
1884
1794
1885
-
.ui.header .ui.label {
1886
-
margin-left: 0.25rem;
1795
+
.ui.secondary.pointing.menu .active.item,
1796
+
.ui.secondary.pointing.menu .active.item:hover, .ui.secondary.pointing.menu .active.item:focus,
1797
+
.ui.secondary.pointing.menu .dropdown.item:hover, .ui.secondary.pointing.menu .dropdown.item:focus {
1798
+
color: var(--color-text-dark);
1887
1799
}
1888
1800
1889
-
.ui.header > .ui.label.compact {
1890
-
margin-top: inherit;
1801
+
.ui.tabular.menu .active.item,
1802
+
.ui.secondary.pointing.menu .active.item,
1803
+
.resize-for-semibold::before {
1804
+
font-weight: var(--font-weight-semibold);
1891
1805
}
1892
1806
1893
-
.ui.header .sub.header {
1894
-
color: var(--color-text-light-1);
1807
+
.resize-for-semibold::before {
1808
+
content: attr(data-text);
1809
+
visibility: hidden;
1810
+
display: block;
1811
+
height: 0;
1895
1812
}
1896
1813
1897
1814
.flash-error details code,
-4
web_src/css/chroma/base.css
-4
web_src/css/chroma/base.css
+6
-6
web_src/css/dashboard.css
+6
-6
web_src/css/dashboard.css
···
77
77
margin: 0 1px; /* Accommodate for Semantic's 1px hacks on .attached elements */
78
78
}
79
79
80
-
.dashboard .dashboard-navbar {
81
-
padding: 4px 12px;
80
+
.dashboard .secondary-nav {
81
+
padding: 1px 12px; /* match .overflow-menu-items in height */
82
82
}
83
83
84
-
.dashboard .dashboard-navbar .right.menu {
84
+
.dashboard .secondary-nav .right.menu {
85
85
gap: .35714286em;
86
86
}
87
87
88
-
.dashboard .dashboard-navbar .right.menu div.item {
88
+
.dashboard .secondary-nav .right.menu div.item {
89
89
padding-left: 0.5rem;
90
90
}
91
91
92
-
.dashboard .dashboard-navbar .org-visibility .label {
92
+
.dashboard .secondary-nav .org-visibility .label {
93
93
margin-left: 5px;
94
94
}
95
95
96
-
.dashboard .dashboard-navbar .ui.dropdown {
96
+
.dashboard .secondary-nav .ui.dropdown {
97
97
max-width: 100%;
98
98
}
+2
-4
web_src/css/explore.css
+2
-4
web_src/css/explore.css
···
1
-
.explore .navbar {
2
-
margin-bottom: 15px !important;
3
-
background-color: var(--color-header-wrapper) !important;
1
+
.explore .secondary-nav {
4
2
border-width: 1px !important;
5
3
}
6
4
7
-
.explore .navbar .svg {
5
+
.explore .secondary-nav .svg {
8
6
width: 16px;
9
7
text-align: center;
10
8
margin-right: 5px;
+2
web_src/css/index.css
+2
web_src/css/index.css
+78
web_src/css/modules/container.css
+78
web_src/css/modules/container.css
···
1
+
/* based on Fomantic UI container module, with just the parts extracted that we use. If you find any
2
+
unused rules here after refactoring, please remove them. */
3
+
4
+
.ui.container {
5
+
display: block;
6
+
max-width: 100%;
7
+
}
8
+
9
+
@media (max-width: 767.98px) {
10
+
.ui.ui.ui.container:not(.fluid) {
11
+
width: auto;
12
+
margin-left: 1em;
13
+
margin-right: 1em;
14
+
}
15
+
}
16
+
17
+
@media (min-width: 768px) and (max-width: 991.98px) {
18
+
.ui.ui.ui.container:not(.fluid) {
19
+
width: 723px;
20
+
margin-left: auto;
21
+
margin-right: auto;
22
+
}
23
+
}
24
+
25
+
@media (min-width: 992px) and (max-width: 1199.98px) {
26
+
.ui.ui.ui.container:not(.fluid) {
27
+
width: 933px;
28
+
margin-left: auto;
29
+
margin-right: auto;
30
+
}
31
+
}
32
+
33
+
@media (min-width: 1200px) {
34
+
.ui.ui.ui.container:not(.fluid) {
35
+
width: 1127px;
36
+
margin-left: auto;
37
+
margin-right: auto;
38
+
}
39
+
}
40
+
41
+
.ui.fluid.container {
42
+
width: 100%;
43
+
}
44
+
45
+
.ui[class*="center aligned"].container {
46
+
text-align: center;
47
+
}
48
+
49
+
/* overwrite width of containers inside the main page content div (div with class "page-content") */
50
+
.page-content .ui.ui.ui.container:not(.fluid) {
51
+
width: 1280px;
52
+
max-width: calc(100% - 64px);
53
+
margin-left: auto;
54
+
margin-right: auto;
55
+
}
56
+
57
+
.ui.container.fluid.padded {
58
+
padding: 0 32px;
59
+
}
60
+
61
+
/* enable fluid page widths for medium size viewports */
62
+
@media (min-width: 768px) and (max-width: 1200px) {
63
+
.page-content .ui.ui.ui.container:not(.fluid) {
64
+
max-width: calc(100% - 32px);
65
+
}
66
+
.ui.container.fluid.padded {
67
+
padding: 0 16px;
68
+
}
69
+
}
70
+
71
+
@media (max-width: 767.98px) {
72
+
.page-content .ui.ui.ui.container:not(.fluid) {
73
+
max-width: calc(100% - 16px);
74
+
}
75
+
.ui.container.fluid.padded {
76
+
padding: 0 8px;
77
+
}
78
+
}
+171
web_src/css/modules/header.css
+171
web_src/css/modules/header.css
···
1
+
/* based on Fomantic UI header module, with just the parts extracted that we use. If you find any
2
+
unused rules here after refactoring, please remove them. */
3
+
4
+
.ui.header {
5
+
color: var(--color-text);
6
+
border: none;
7
+
margin: calc(2rem - 0.1428571428571429em) 0 1rem;
8
+
padding: 0;
9
+
font-family: var(--fonts-regular);
10
+
font-weight: var(--font-weight-medium);
11
+
line-height: 1.28571429;
12
+
text-transform: none;
13
+
}
14
+
15
+
.ui.header:first-child {
16
+
margin-top: -0.14285714em;
17
+
}
18
+
19
+
.ui.header:last-child {
20
+
margin-bottom: 0;
21
+
}
22
+
23
+
.ui.header .ui.label {
24
+
margin-left: 0.25rem;
25
+
vertical-align: middle;
26
+
}
27
+
28
+
.ui.header > .ui.label.compact {
29
+
margin-top: inherit;
30
+
}
31
+
32
+
.ui.header .sub.header {
33
+
display: block;
34
+
font-weight: var(--font-weight-normal);
35
+
padding: 0;
36
+
margin: 0;
37
+
font-size: 1rem;
38
+
line-height: 1.2;
39
+
color: var(--color-text-light-1);
40
+
}
41
+
42
+
.ui.header > i.icon {
43
+
display: table-cell;
44
+
opacity: 1;
45
+
font-size: 1.5em;
46
+
padding-top: 0;
47
+
vertical-align: middle;
48
+
}
49
+
50
+
.ui.header > i.icon:only-child {
51
+
display: inline-block;
52
+
padding: 0;
53
+
margin-right: 0.75rem;
54
+
}
55
+
56
+
.ui.header + p {
57
+
margin-top: 0;
58
+
}
59
+
60
+
h2.ui.header {
61
+
font-size: 1.71428571rem;
62
+
}
63
+
h2.ui.header .sub.header {
64
+
font-size: 1.14285714rem;
65
+
}
66
+
67
+
h4.ui.header {
68
+
font-size: 1.07142857rem;
69
+
}
70
+
h4.ui.header .sub.header {
71
+
font-size: 1rem;
72
+
}
73
+
74
+
.ui.sub.header {
75
+
padding: 0;
76
+
margin-bottom: 0.14285714rem;
77
+
font-weight: var(--font-weight-normal);
78
+
font-size: 0.85714286em;
79
+
}
80
+
81
+
.ui.icon.header svg {
82
+
width: 3em;
83
+
height: 3em;
84
+
float: none;
85
+
display: block;
86
+
line-height: var(--line-height-default);
87
+
padding: 0;
88
+
margin: 0 auto 0.5rem;
89
+
opacity: 1;
90
+
}
91
+
92
+
.ui.header:not(h1,h2,h3,h4,h5,h6) {
93
+
font-size: 1.28571429em;
94
+
}
95
+
96
+
.ui.attached.header {
97
+
position: relative;
98
+
background: var(--color-box-header);
99
+
padding: 0.78571429rem 1rem;
100
+
margin: 0 -1px;
101
+
border-radius: 0;
102
+
border: 1px solid var(--color-secondary);
103
+
}
104
+
105
+
.ui.attached:not(.top).header {
106
+
border-top: none;
107
+
}
108
+
109
+
.ui.top.attached.header {
110
+
border-radius: 0.28571429rem 0.28571429rem 0 0;
111
+
}
112
+
113
+
.ui.bottom.attached.header {
114
+
border-radius: 0 0 0.28571429rem 0.28571429rem;
115
+
}
116
+
117
+
.ui.attached.header:not(h1,h2,h3,h4,h5,h6) {
118
+
font-size: 1em;
119
+
}
120
+
121
+
/* fix misaligned right buttons on box headers */
122
+
.ui.attached.header > .ui.right {
123
+
position: absolute;
124
+
right: 0.78571429rem;
125
+
top: 0;
126
+
bottom: 0;
127
+
display: flex;
128
+
align-items: center;
129
+
gap: 0.25em;
130
+
}
131
+
132
+
/* the default ".ui.attached.header > .ui.right" is only able to contain "tiny" buttons, other buttons are too large */
133
+
.ui.attached.header > .ui.right .ui.tiny.button {
134
+
padding: 6px 10px;
135
+
font-weight: var(--font-weight-normal);
136
+
}
137
+
138
+
/* if a .top.attached.header is followed by a .segment, add some margin */
139
+
.ui.segments + .ui.top.attached.header,
140
+
.ui.attached.segment + .ui.top.attached.header {
141
+
margin-top: 1rem;
142
+
}
143
+
144
+
.ui.dividing.header {
145
+
border-bottom-color: var(--color-secondary);
146
+
}
147
+
148
+
.ui.dividing.header .sub.header {
149
+
padding-bottom: 0.21428571rem;
150
+
}
151
+
152
+
.ui.dividing.header i.icon {
153
+
margin-bottom: 0;
154
+
}
155
+
156
+
.ui.error.header {
157
+
background: var(--color-error-bg) !important;
158
+
color: var(--color-error-text) !important;
159
+
border-color: var(--color-error-border) !important;
160
+
}
161
+
162
+
.ui.warning.header {
163
+
background: var(--color-warning-bg) !important;
164
+
color: var(--color-warning-text) !important;
165
+
border-color: var(--color-warning-border) !important;
166
+
}
167
+
168
+
.attention-header {
169
+
padding: 0.5em 0.75em !important;
170
+
color: var(--color-text) !important;
171
+
}
+12
web_src/css/modules/message.css
+12
web_src/css/modules/message.css
···
100
100
color: var(--color-warning-text);
101
101
border-color: var(--color-warning-border);
102
102
}
103
+
104
+
.ui.message > .close.icon {
105
+
cursor: pointer;
106
+
position: absolute;
107
+
top: 9px;
108
+
right: 9px;
109
+
opacity: .7;
110
+
}
111
+
112
+
.ui.message > .close.icon:hover {
113
+
opacity: 1;
114
+
}
-11
web_src/css/repo.css
-11
web_src/css/repo.css
···
4
4
user-select: none;
5
5
}
6
6
7
-
.repository .navbar {
8
-
display: flex;
9
-
justify-content: space-between;
10
-
}
11
-
12
-
.repository .navbar .ui.label {
13
-
margin-left: 7px;
14
-
padding: 3px 5px;
15
-
}
16
-
17
7
.repository .owner.dropdown {
18
8
min-width: 40% !important;
19
9
}
···
1611
1601
1612
1602
.repository .diff-file-box .file-body.file-code .lines-num {
1613
1603
text-align: right;
1614
-
color: var(--color-text-light);
1615
1604
width: 1%;
1616
1605
min-width: 50px;
1617
1606
}
+6
-6
web_src/css/repo/header.css
+6
-6
web_src/css/repo/header.css
···
1
-
.header-wrapper .fork-flag {
1
+
.repository .secondary-nav {
2
+
padding-top: 12px;
3
+
}
4
+
5
+
.repository .secondary-nav .fork-flag {
2
6
margin-top: 0.5rem;
3
7
font-size: 12px;
4
8
}
···
8
12
flex-flow: row wrap;
9
13
justify-content: space-between;
10
14
gap: 0.5rem;
15
+
margin-bottom: 4px;
11
16
}
12
17
13
18
.repo-header .flex-item {
···
62
67
.repo-buttons .ui.labeled.button.disabled > .button {
63
68
pointer-events: none !important;
64
69
}
65
-
66
-
.repository .header-wrapper {
67
-
padding-top: 12px;
68
-
background-color: var(--color-header-wrapper);
69
-
}
+7
-7
web_src/css/themes/theme-gitea-dark.css
+7
-7
web_src/css/themes/theme-gitea-dark.css
···
183
183
--color-body: #1c1f25;
184
184
--color-box-header: #1a1d1f;
185
185
--color-box-body: #14171a;
186
-
--color-box-body-highlight: #121517;
186
+
--color-box-body-highlight: #1c2227;
187
187
--color-text-dark: #f8f8f9;
188
188
--color-text: #d1d5d8;
189
189
--color-text-light: #bdc3c7;
···
197
197
--color-input-toggle-background: #2e353b;
198
198
--color-input-border: var(--color-secondary);
199
199
--color-input-border-hover: var(--color-secondary-dark-1);
200
-
--color-header-wrapper: #181c20;
201
200
--color-light: #00001728;
202
201
--color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
203
202
--color-light-border: #e8e8ff28;
···
208
207
--color-markup-table-row: #e8e8ff06;
209
208
--color-markup-code-block: #e8e8ff16;
210
209
--color-button: #151a1e;
211
-
--color-code-bg: #191d20;
212
-
--color-code-sidebar-bg: #1b1f22;
210
+
--color-code-bg: #14171a;
213
211
--color-shadow: #00001758;
214
-
--color-secondary-bg: #2f3135;
215
-
--color-expand-button: #414348;
212
+
--color-secondary-bg: #2f3138;
213
+
--color-expand-button: #2b353e;
216
214
--color-placeholder-text: var(--color-text-light-3);
217
215
--color-editor-line-highlight: var(--color-primary-light-5);
218
216
--color-project-board-bg: var(--color-secondary-light-2);
···
227
225
--color-nav-bg: #16191c;
228
226
--color-nav-hover-bg: var(--color-secondary-light-1);
229
227
--color-nav-text: var(--color-text);
228
+
--color-secondary-nav-bg: #181c20;
230
229
--color-label-text: var(--color-text);
231
230
--color-label-bg: #73828e4b;
232
231
--color-label-hover-bg: #73828ea0;
233
232
--color-label-active-bg: #73828eff;
234
233
--color-accent: var(--color-primary-light-1);
235
234
--color-small-accent: var(--color-primary-light-5);
236
-
--color-active-line: #534d1b;
235
+
--color-highlight-fg: #87651e;
236
+
--color-highlight-bg: #352c1c;
237
237
--color-overlay-backdrop: #080808c0;
238
238
accent-color: var(--color-accent);
239
239
color-scheme: dark;
+5
-5
web_src/css/themes/theme-gitea-light.css
+5
-5
web_src/css/themes/theme-gitea-light.css
···
183
183
--color-body: #ffffff;
184
184
--color-box-header: #f1f3f5;
185
185
--color-box-body: #ffffff;
186
-
--color-box-body-highlight: #f4faff;
186
+
--color-box-body-highlight: #ecf5fd;
187
187
--color-text-dark: #01050a;
188
188
--color-text: #181c21;
189
189
--color-text-light: #30363b;
···
197
197
--color-input-toggle-background: #d0d7de;
198
198
--color-input-border: var(--color-secondary);
199
199
--color-input-border-hover: var(--color-secondary-dark-1);
200
-
--color-header-wrapper: #f9fafb;
201
200
--color-light: #00001706;
202
201
--color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)));
203
202
--color-light-border: #0000171d;
···
209
208
--color-markup-code-block: #00001710;
210
209
--color-button: #f8f9fb;
211
210
--color-code-bg: #fafdff;
212
-
--color-code-sidebar-bg: #f2f5f8;
213
211
--color-shadow: #00001726;
214
212
--color-secondary-bg: #f2f5f8;
215
-
--color-expand-button: #d8efff;
213
+
--color-expand-button: #cfe8fa;
216
214
--color-placeholder-text: var(--color-text-light-3);
217
215
--color-editor-line-highlight: var(--color-primary-light-6);
218
216
--color-project-board-bg: var(--color-secondary-light-4);
···
227
225
--color-nav-bg: #f6f7fa;
228
226
--color-nav-hover-bg: var(--color-secondary-light-1);
229
227
--color-nav-text: var(--color-text);
228
+
--color-secondary-nav-bg: #f9fafb;
230
229
--color-label-text: var(--color-text);
231
230
--color-label-bg: #949da64b;
232
231
--color-label-hover-bg: #949da6a0;
233
232
--color-label-active-bg: #949da6ff;
234
233
--color-accent: var(--color-primary-light-1);
235
234
--color-small-accent: var(--color-primary-light-6);
236
-
--color-active-line: #fffbdd;
235
+
--color-highlight-fg: #eed200;
236
+
--color-highlight-bg: #fffbdd;
237
237
--color-overlay-backdrop: #080808c0;
238
238
accent-color: var(--color-accent);
239
239
color-scheme: light;
-4
web_src/css/user.css
-4
web_src/css/user.css
-892
web_src/fomantic/build/semantic.css
-892
web_src/fomantic/build/semantic.css
···
3036
3036
Site Overrides
3037
3037
*******************************/
3038
3038
/*!
3039
-
* # Fomantic-UI - Container
3040
-
* http://github.com/fomantic/Fomantic-UI/
3041
-
*
3042
-
*
3043
-
* Released under the MIT license
3044
-
* http://opensource.org/licenses/MIT
3045
-
*
3046
-
*/
3047
-
3048
-
/*******************************
3049
-
Container
3050
-
*******************************/
3051
-
3052
-
/* All Sizes */
3053
-
3054
-
.ui.container {
3055
-
display: block;
3056
-
max-width: 100%;
3057
-
}
3058
-
3059
-
/* Mobile */
3060
-
3061
-
@media only screen and (max-width: 767.98px) {
3062
-
.ui.ui.ui.container:not(.fluid) {
3063
-
width: auto;
3064
-
margin-left: 1em;
3065
-
margin-right: 1em;
3066
-
}
3067
-
3068
-
.ui.ui.ui.grid.container {
3069
-
width: auto;
3070
-
}
3071
-
3072
-
.ui.ui.ui.relaxed.grid.container {
3073
-
width: auto;
3074
-
}
3075
-
3076
-
.ui.ui.ui.very.relaxed.grid.container {
3077
-
width: auto;
3078
-
}
3079
-
}
3080
-
3081
-
/* Tablet */
3082
-
3083
-
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
3084
-
.ui.ui.ui.container:not(.fluid) {
3085
-
width: 723px;
3086
-
margin-left: auto;
3087
-
margin-right: auto;
3088
-
}
3089
-
3090
-
.ui.ui.ui.grid.container {
3091
-
width: calc(723px + 2rem);
3092
-
}
3093
-
3094
-
.ui.ui.ui.relaxed.grid.container {
3095
-
width: calc(723px + 3rem);
3096
-
}
3097
-
3098
-
.ui.ui.ui.very.relaxed.grid.container {
3099
-
width: calc(723px + 5rem);
3100
-
}
3101
-
}
3102
-
3103
-
/* Small Monitor */
3104
-
3105
-
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
3106
-
.ui.ui.ui.container:not(.fluid) {
3107
-
width: 933px;
3108
-
margin-left: auto;
3109
-
margin-right: auto;
3110
-
}
3111
-
3112
-
.ui.ui.ui.grid.container {
3113
-
width: calc(933px + 2rem);
3114
-
}
3115
-
3116
-
.ui.ui.ui.relaxed.grid.container {
3117
-
width: calc(933px + 3rem);
3118
-
}
3119
-
3120
-
.ui.ui.ui.very.relaxed.grid.container {
3121
-
width: calc(933px + 5rem);
3122
-
}
3123
-
}
3124
-
3125
-
/* Large Monitor */
3126
-
3127
-
@media only screen and (min-width: 1200px) {
3128
-
.ui.ui.ui.container:not(.fluid) {
3129
-
width: 1127px;
3130
-
margin-left: auto;
3131
-
margin-right: auto;
3132
-
}
3133
-
3134
-
.ui.ui.ui.grid.container {
3135
-
width: calc(1127px + 2rem);
3136
-
}
3137
-
3138
-
.ui.ui.ui.relaxed.grid.container {
3139
-
width: calc(1127px + 3rem);
3140
-
}
3141
-
3142
-
.ui.ui.ui.very.relaxed.grid.container {
3143
-
width: calc(1127px + 5rem);
3144
-
}
3145
-
}
3146
-
3147
-
/*******************************
3148
-
Types
3149
-
*******************************/
3150
-
3151
-
/* Text Container */
3152
-
3153
-
.ui.text.container {
3154
-
font-family: var(--fonts-regular);
3155
-
max-width: 700px;
3156
-
line-height: 1.5;
3157
-
font-size: 1.14285714rem;
3158
-
}
3159
-
3160
-
/* Fluid */
3161
-
3162
-
.ui.fluid.container {
3163
-
width: 100%;
3164
-
}
3165
-
3166
-
/*******************************
3167
-
Variations
3168
-
*******************************/
3169
-
3170
-
.ui[class*="left aligned"].container {
3171
-
text-align: left;
3172
-
}
3173
-
3174
-
.ui[class*="center aligned"].container {
3175
-
text-align: center;
3176
-
}
3177
-
3178
-
.ui[class*="right aligned"].container {
3179
-
text-align: right;
3180
-
}
3181
-
3182
-
.ui.justified.container {
3183
-
text-align: justify;
3184
-
-webkit-hyphens: auto;
3185
-
hyphens: auto;
3186
-
}
3187
-
3188
-
/*******************************
3189
-
Theme Overrides
3190
-
*******************************/
3191
-
3192
-
/*******************************
3193
-
Site Overrides
3194
-
*******************************/
3195
-
/*!
3196
3039
* # Fomantic-UI - Dimmer
3197
3040
* http://github.com/fomantic/Fomantic-UI/
3198
3041
*
···
7334
7177
.ui.massive.form .field .dropdown,
7335
7178
.ui.massive.form .field .dropdown .menu > .item {
7336
7179
font-size: 1.71428571rem;
7337
-
}
7338
-
7339
-
/*******************************
7340
-
Theme Overrides
7341
-
*******************************/
7342
-
7343
-
/*******************************
7344
-
Site Overrides
7345
-
*******************************/
7346
-
/*!
7347
-
* # Fomantic-UI - Header
7348
-
* http://github.com/fomantic/Fomantic-UI/
7349
-
*
7350
-
*
7351
-
* Released under the MIT license
7352
-
* http://opensource.org/licenses/MIT
7353
-
*
7354
-
*/
7355
-
7356
-
/*******************************
7357
-
Header
7358
-
*******************************/
7359
-
7360
-
/* Standard */
7361
-
7362
-
.ui.header {
7363
-
border: none;
7364
-
margin: calc(2rem - 0.1428571428571429em) 0 1rem;
7365
-
padding: 0 0;
7366
-
font-family: var(--fonts-regular);
7367
-
font-weight: 500;
7368
-
line-height: 1.28571429em;
7369
-
text-transform: none;
7370
-
color: rgba(0, 0, 0, 0.87);
7371
-
}
7372
-
7373
-
.ui.header:first-child {
7374
-
margin-top: -0.14285714em;
7375
-
}
7376
-
7377
-
.ui.header:last-child {
7378
-
margin-bottom: 0;
7379
-
}
7380
-
7381
-
/*--------------
7382
-
Sub Header
7383
-
---------------*/
7384
-
7385
-
.ui.header .sub.header {
7386
-
display: block;
7387
-
font-weight: normal;
7388
-
padding: 0;
7389
-
margin: 0;
7390
-
font-size: 1rem;
7391
-
line-height: 1.2em;
7392
-
color: rgba(0, 0, 0, 0.6);
7393
-
}
7394
-
7395
-
/*--------------
7396
-
Icon
7397
-
---------------*/
7398
-
7399
-
.ui.header > i.icon {
7400
-
display: table-cell;
7401
-
opacity: 1;
7402
-
font-size: 1.5em;
7403
-
padding-top: 0;
7404
-
vertical-align: middle;
7405
-
}
7406
-
7407
-
/* With Text Node */
7408
-
7409
-
.ui.header > i.icon:only-child {
7410
-
display: inline-block;
7411
-
padding: 0;
7412
-
margin-right: 0.75rem;
7413
-
}
7414
-
7415
-
/*-------------------
7416
-
Image
7417
-
--------------------*/
7418
-
7419
-
.ui.header > .image:not(.icon),
7420
-
.ui.header > img {
7421
-
display: inline-block;
7422
-
margin-top: 0.14285714em;
7423
-
width: 2.5em;
7424
-
height: auto;
7425
-
vertical-align: middle;
7426
-
}
7427
-
7428
-
.ui.header > .image:not(.icon):only-child,
7429
-
.ui.header > img:only-child {
7430
-
margin-right: 0.75rem;
7431
-
}
7432
-
7433
-
/*--------------
7434
-
Content
7435
-
---------------*/
7436
-
7437
-
.ui.header .content {
7438
-
display: inline-block;
7439
-
vertical-align: top;
7440
-
}
7441
-
7442
-
/* After Image */
7443
-
7444
-
.ui.header > img + .content,
7445
-
.ui.header > .image + .content {
7446
-
padding-left: 0.75rem;
7447
-
vertical-align: middle;
7448
-
}
7449
-
7450
-
/* After Icon */
7451
-
7452
-
.ui.header > i.icon + .content {
7453
-
padding-left: 0.75rem;
7454
-
display: table-cell;
7455
-
vertical-align: middle;
7456
-
}
7457
-
7458
-
/*--------------
7459
-
Loose Coupling
7460
-
---------------*/
7461
-
7462
-
.ui.header .ui.label {
7463
-
font-size: '';
7464
-
margin-left: 0.5rem;
7465
-
vertical-align: middle;
7466
-
}
7467
-
7468
-
/* Positioning */
7469
-
7470
-
.ui.header + p {
7471
-
margin-top: 0;
7472
-
}
7473
-
7474
-
/*******************************
7475
-
Types
7476
-
*******************************/
7477
-
7478
-
/*--------------
7479
-
Page
7480
-
---------------*/
7481
-
7482
-
h1.ui.header {
7483
-
font-size: 2rem;
7484
-
}
7485
-
7486
-
h1.ui.header .sub.header {
7487
-
font-size: 1.14285714rem;
7488
-
}
7489
-
7490
-
h2.ui.header {
7491
-
font-size: 1.71428571rem;
7492
-
}
7493
-
7494
-
h2.ui.header .sub.header {
7495
-
font-size: 1.14285714rem;
7496
-
}
7497
-
7498
-
h3.ui.header {
7499
-
font-size: 1.28571429rem;
7500
-
}
7501
-
7502
-
h3.ui.header .sub.header {
7503
-
font-size: 1rem;
7504
-
}
7505
-
7506
-
h4.ui.header {
7507
-
font-size: 1.07142857rem;
7508
-
}
7509
-
7510
-
h4.ui.header .sub.header {
7511
-
font-size: 1rem;
7512
-
}
7513
-
7514
-
h5.ui.header {
7515
-
font-size: 1rem;
7516
-
}
7517
-
7518
-
h5.ui.header .sub.header {
7519
-
font-size: 0.92857143rem;
7520
-
}
7521
-
7522
-
h6.ui.header {
7523
-
font-size: 0.85714286rem;
7524
-
}
7525
-
7526
-
h6.ui.header .sub.header {
7527
-
font-size: 0.92857143rem;
7528
-
}
7529
-
7530
-
/*--------------
7531
-
Content Heading
7532
-
---------------*/
7533
-
7534
-
.ui.mini.header {
7535
-
font-size: 0.85714286em;
7536
-
}
7537
-
7538
-
.ui.mini.header .sub.header {
7539
-
font-size: 0.92857143rem;
7540
-
}
7541
-
7542
-
.ui.mini.sub.header {
7543
-
font-size: 0.78571429em;
7544
-
}
7545
-
7546
-
.ui.tiny.header {
7547
-
font-size: 1em;
7548
-
}
7549
-
7550
-
.ui.tiny.header .sub.header {
7551
-
font-size: 0.92857143rem;
7552
-
}
7553
-
7554
-
.ui.tiny.sub.header {
7555
-
font-size: 0.78571429em;
7556
-
}
7557
-
7558
-
.ui.small.header {
7559
-
font-size: 1.07142857em;
7560
-
}
7561
-
7562
-
.ui.small.header .sub.header {
7563
-
font-size: 1rem;
7564
-
}
7565
-
7566
-
.ui.small.sub.header {
7567
-
font-size: 0.78571429em;
7568
-
}
7569
-
7570
-
.ui.large.header {
7571
-
font-size: 1.71428571em;
7572
-
}
7573
-
7574
-
.ui.large.header .sub.header {
7575
-
font-size: 1.14285714rem;
7576
-
}
7577
-
7578
-
.ui.large.sub.header {
7579
-
font-size: 0.92857143em;
7580
-
}
7581
-
7582
-
.ui.big.header {
7583
-
font-size: 1.85714286em;
7584
-
}
7585
-
7586
-
.ui.big.header .sub.header {
7587
-
font-size: 1.14285714rem;
7588
-
}
7589
-
7590
-
.ui.big.sub.header {
7591
-
font-size: 1em;
7592
-
}
7593
-
7594
-
.ui.huge.header {
7595
-
font-size: 2em;
7596
-
min-height: 1em;
7597
-
}
7598
-
7599
-
.ui.huge.header .sub.header {
7600
-
font-size: 1.14285714rem;
7601
-
}
7602
-
7603
-
.ui.huge.sub.header {
7604
-
font-size: 1em;
7605
-
}
7606
-
7607
-
.ui.massive.header {
7608
-
font-size: 2.28571429em;
7609
-
min-height: 1em;
7610
-
}
7611
-
7612
-
.ui.massive.header .sub.header {
7613
-
font-size: 1.42857143rem;
7614
-
}
7615
-
7616
-
.ui.massive.sub.header {
7617
-
font-size: 1.14285714em;
7618
-
}
7619
-
7620
-
/*--------------
7621
-
Sub Heading
7622
-
---------------*/
7623
-
7624
-
.ui.sub.header {
7625
-
padding: 0;
7626
-
margin-bottom: 0.14285714rem;
7627
-
font-weight: 500;
7628
-
font-size: 0.85714286em;
7629
-
text-transform: uppercase;
7630
-
color: '';
7631
-
}
7632
-
7633
-
/*-------------------
7634
-
Icon
7635
-
--------------------*/
7636
-
7637
-
.ui.icon.header {
7638
-
display: inline-block;
7639
-
text-align: center;
7640
-
margin: 2rem 0 1rem;
7641
-
}
7642
-
7643
-
.ui.icon.header:after {
7644
-
content: '';
7645
-
display: block;
7646
-
height: 0;
7647
-
clear: both;
7648
-
visibility: hidden;
7649
-
}
7650
-
7651
-
.ui.icon.header:first-child {
7652
-
margin-top: 0;
7653
-
}
7654
-
7655
-
.ui.icon.header > i.icon {
7656
-
float: none;
7657
-
display: block;
7658
-
width: auto;
7659
-
height: auto;
7660
-
line-height: 1;
7661
-
padding: 0;
7662
-
font-size: 3em;
7663
-
margin: 0 auto 0.5rem;
7664
-
opacity: 1;
7665
-
}
7666
-
7667
-
.ui.icon.header .corner.icon {
7668
-
font-size: calc(3em * 0.45);
7669
-
}
7670
-
7671
-
.ui.icon.header .content {
7672
-
display: block;
7673
-
padding: 0;
7674
-
}
7675
-
7676
-
.ui.icon.header > i.circular.icon {
7677
-
font-size: 2em;
7678
-
}
7679
-
7680
-
.ui.icon.header > i.square.icon {
7681
-
font-size: 2em;
7682
-
}
7683
-
7684
-
.ui.block.icon.header > i.icon {
7685
-
margin-bottom: 0;
7686
-
}
7687
-
7688
-
.ui.icon.header.aligned {
7689
-
margin-left: auto;
7690
-
margin-right: auto;
7691
-
display: block;
7692
-
}
7693
-
7694
-
/*******************************
7695
-
States
7696
-
*******************************/
7697
-
7698
-
.ui.disabled.header {
7699
-
opacity: var(--opacity-disabled);
7700
-
}
7701
-
7702
-
/*******************************
7703
-
Variations
7704
-
*******************************/
7705
-
7706
-
/*-------------------
7707
-
Colors
7708
-
--------------------*/
7709
-
7710
-
.ui.primary.header {
7711
-
color: #2185D0;
7712
-
}
7713
-
7714
-
a.ui.primary.header:hover {
7715
-
color: #1678c2;
7716
-
}
7717
-
7718
-
.ui.primary.dividing.header {
7719
-
border-bottom: 2px solid #2185D0;
7720
-
}
7721
-
7722
-
.ui.secondary.header {
7723
-
color: #1B1C1D;
7724
-
}
7725
-
7726
-
a.ui.secondary.header:hover {
7727
-
color: #27292a;
7728
-
}
7729
-
7730
-
.ui.secondary.dividing.header {
7731
-
border-bottom: 2px solid #1B1C1D;
7732
-
}
7733
-
7734
-
.ui.red.header {
7735
-
color: #DB2828;
7736
-
}
7737
-
7738
-
a.ui.red.header:hover {
7739
-
color: #d01919;
7740
-
}
7741
-
7742
-
.ui.red.dividing.header {
7743
-
border-bottom: 2px solid #DB2828;
7744
-
}
7745
-
7746
-
.ui.orange.header {
7747
-
color: #F2711C;
7748
-
}
7749
-
7750
-
a.ui.orange.header:hover {
7751
-
color: #f26202;
7752
-
}
7753
-
7754
-
.ui.orange.dividing.header {
7755
-
border-bottom: 2px solid #F2711C;
7756
-
}
7757
-
7758
-
.ui.yellow.header {
7759
-
color: #FBBD08;
7760
-
}
7761
-
7762
-
a.ui.yellow.header:hover {
7763
-
color: #eaae00;
7764
-
}
7765
-
7766
-
.ui.yellow.dividing.header {
7767
-
border-bottom: 2px solid #FBBD08;
7768
-
}
7769
-
7770
-
.ui.olive.header {
7771
-
color: #B5CC18;
7772
-
}
7773
-
7774
-
a.ui.olive.header:hover {
7775
-
color: #a7bd0d;
7776
-
}
7777
-
7778
-
.ui.olive.dividing.header {
7779
-
border-bottom: 2px solid #B5CC18;
7780
-
}
7781
-
7782
-
.ui.green.header {
7783
-
color: #21BA45;
7784
-
}
7785
-
7786
-
a.ui.green.header:hover {
7787
-
color: #16ab39;
7788
-
}
7789
-
7790
-
.ui.green.dividing.header {
7791
-
border-bottom: 2px solid #21BA45;
7792
-
}
7793
-
7794
-
.ui.teal.header {
7795
-
color: #00B5AD;
7796
-
}
7797
-
7798
-
a.ui.teal.header:hover {
7799
-
color: #009c95;
7800
-
}
7801
-
7802
-
.ui.teal.dividing.header {
7803
-
border-bottom: 2px solid #00B5AD;
7804
-
}
7805
-
7806
-
.ui.blue.header {
7807
-
color: #2185D0;
7808
-
}
7809
-
7810
-
a.ui.blue.header:hover {
7811
-
color: #1678c2;
7812
-
}
7813
-
7814
-
.ui.blue.dividing.header {
7815
-
border-bottom: 2px solid #2185D0;
7816
-
}
7817
-
7818
-
.ui.violet.header {
7819
-
color: #6435C9;
7820
-
}
7821
-
7822
-
a.ui.violet.header:hover {
7823
-
color: #5829bb;
7824
-
}
7825
-
7826
-
.ui.violet.dividing.header {
7827
-
border-bottom: 2px solid #6435C9;
7828
-
}
7829
-
7830
-
.ui.purple.header {
7831
-
color: #A333C8;
7832
-
}
7833
-
7834
-
a.ui.purple.header:hover {
7835
-
color: #9627ba;
7836
-
}
7837
-
7838
-
.ui.purple.dividing.header {
7839
-
border-bottom: 2px solid #A333C8;
7840
-
}
7841
-
7842
-
.ui.pink.header {
7843
-
color: #E03997;
7844
-
}
7845
-
7846
-
a.ui.pink.header:hover {
7847
-
color: #e61a8d;
7848
-
}
7849
-
7850
-
.ui.pink.dividing.header {
7851
-
border-bottom: 2px solid #E03997;
7852
-
}
7853
-
7854
-
.ui.brown.header {
7855
-
color: #A5673F;
7856
-
}
7857
-
7858
-
a.ui.brown.header:hover {
7859
-
color: #975b33;
7860
-
}
7861
-
7862
-
.ui.brown.dividing.header {
7863
-
border-bottom: 2px solid #A5673F;
7864
-
}
7865
-
7866
-
.ui.grey.header {
7867
-
color: #767676;
7868
-
}
7869
-
7870
-
a.ui.grey.header:hover {
7871
-
color: #838383;
7872
-
}
7873
-
7874
-
.ui.grey.dividing.header {
7875
-
border-bottom: 2px solid #767676;
7876
-
}
7877
-
7878
-
.ui.black.header {
7879
-
color: #1B1C1D;
7880
-
}
7881
-
7882
-
a.ui.black.header:hover {
7883
-
color: #27292a;
7884
-
}
7885
-
7886
-
.ui.black.dividing.header {
7887
-
border-bottom: 2px solid #1B1C1D;
7888
-
}
7889
-
7890
-
/*-------------------
7891
-
Aligned
7892
-
--------------------*/
7893
-
7894
-
.ui.left.aligned.header {
7895
-
text-align: left;
7896
-
}
7897
-
7898
-
.ui.right.aligned.header {
7899
-
text-align: right;
7900
-
}
7901
-
7902
-
.ui.centered.header,
7903
-
.ui.center.aligned.header {
7904
-
text-align: center;
7905
-
}
7906
-
7907
-
.ui.justified.header {
7908
-
text-align: justify;
7909
-
}
7910
-
7911
-
.ui.justified.header:after {
7912
-
display: inline-block;
7913
-
content: '';
7914
-
width: 100%;
7915
-
}
7916
-
7917
-
/*-------------------
7918
-
Floated
7919
-
--------------------*/
7920
-
7921
-
.ui.floated.header,
7922
-
.ui[class*="left floated"].header {
7923
-
float: left;
7924
-
margin-top: 0;
7925
-
margin-right: 0.5em;
7926
-
}
7927
-
7928
-
.ui[class*="right floated"].header {
7929
-
float: right;
7930
-
margin-top: 0;
7931
-
margin-left: 0.5em;
7932
-
}
7933
-
7934
-
/*-------------------
7935
-
Fitted
7936
-
--------------------*/
7937
-
7938
-
.ui.fitted.header {
7939
-
padding: 0;
7940
-
}
7941
-
7942
-
/*-------------------
7943
-
Dividing
7944
-
--------------------*/
7945
-
7946
-
.ui.dividing.header {
7947
-
padding-bottom: 0.21428571rem;
7948
-
border-bottom: 1px solid rgba(34, 36, 38, 0.15);
7949
-
}
7950
-
7951
-
.ui.dividing.header .sub.header {
7952
-
padding-bottom: 0.21428571rem;
7953
-
}
7954
-
7955
-
.ui.dividing.header i.icon {
7956
-
margin-bottom: 0;
7957
-
}
7958
-
7959
-
/*-------------------
7960
-
Block
7961
-
--------------------*/
7962
-
7963
-
.ui.block.header {
7964
-
background: #F3F4F5;
7965
-
padding: 0.78571429rem 1rem;
7966
-
box-shadow: none;
7967
-
border: 1px solid #D4D4D5;
7968
-
border-radius: 0.28571429rem;
7969
-
}
7970
-
7971
-
.ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
7972
-
font-size: 1rem;
7973
-
}
7974
-
7975
-
.ui.mini.block.header {
7976
-
font-size: 0.78571429rem;
7977
-
}
7978
-
7979
-
.ui.tiny.block.header {
7980
-
font-size: 0.85714286rem;
7981
-
}
7982
-
7983
-
.ui.small.block.header {
7984
-
font-size: 0.92857143rem;
7985
-
}
7986
-
7987
-
.ui.large.block.header {
7988
-
font-size: 1.14285714rem;
7989
-
}
7990
-
7991
-
.ui.big.block.header {
7992
-
font-size: 1.28571429rem;
7993
-
}
7994
-
7995
-
.ui.huge.block.header {
7996
-
font-size: 1.42857143rem;
7997
-
}
7998
-
7999
-
.ui.massive.block.header {
8000
-
font-size: 1.71428571rem;
8001
-
}
8002
-
8003
-
/*-------------------
8004
-
Attached
8005
-
--------------------*/
8006
-
8007
-
.ui.attached.header {
8008
-
background: #FFFFFF;
8009
-
padding: 0.78571429rem 1rem;
8010
-
margin: 0 -1px 0 -1px;
8011
-
box-shadow: none;
8012
-
border: 1px solid #D4D4D5;
8013
-
border-radius: 0;
8014
-
}
8015
-
8016
-
.ui.attached.block.header {
8017
-
background: #F3F4F5;
8018
-
}
8019
-
8020
-
.ui.attached:not(.top).header {
8021
-
border-top: none;
8022
-
}
8023
-
8024
-
.ui.top.attached.header {
8025
-
border-radius: 0.28571429rem 0.28571429rem 0 0;
8026
-
}
8027
-
8028
-
.ui.bottom.attached.header {
8029
-
border-radius: 0 0 0.28571429rem 0.28571429rem;
8030
-
}
8031
-
8032
-
/* Attached Sizes */
8033
-
8034
-
.ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
8035
-
font-size: 1em;
8036
-
}
8037
-
8038
-
.ui.mini.attached.header {
8039
-
font-size: 0.78571429em;
8040
-
}
8041
-
8042
-
.ui.tiny.attached.header {
8043
-
font-size: 0.85714286em;
8044
-
}
8045
-
8046
-
.ui.small.attached.header {
8047
-
font-size: 0.92857143em;
8048
-
}
8049
-
8050
-
.ui.large.attached.header {
8051
-
font-size: 1.14285714em;
8052
-
}
8053
-
8054
-
.ui.big.attached.header {
8055
-
font-size: 1.28571429em;
8056
-
}
8057
-
8058
-
.ui.huge.attached.header {
8059
-
font-size: 1.42857143em;
8060
-
}
8061
-
8062
-
.ui.massive.attached.header {
8063
-
font-size: 1.71428571em;
8064
-
}
8065
-
8066
-
/*-------------------
8067
-
Sizing
8068
-
--------------------*/
8069
-
8070
-
.ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
8071
-
font-size: 1.28571429em;
8072
7180
}
8073
7181
8074
7182
/*******************************
-2
web_src/fomantic/semantic.json
-2
web_src/fomantic/semantic.json
+46
-44
web_src/js/features/repo-code.js
+46
-44
web_src/js/features/repo-code.js
···
16
16
}
17
17
}
18
18
19
-
function selectRange($list, $select, $from) {
20
-
$list.removeClass('active');
19
+
function isBlame() {
20
+
return Boolean(document.querySelector('div.blame'));
21
+
}
22
+
23
+
function getLineEls() {
24
+
return document.querySelectorAll(`.code-view td.lines-code${isBlame() ? '.blame-code' : ''}`);
25
+
}
26
+
27
+
function selectRange($linesEls, $selectionEndEl, $selectionStartEls) {
28
+
$linesEls.closest('tr').removeClass('active');
21
29
22
30
// add hashchange to permalink
23
31
const $refInNewIssue = $('a.ref-in-new-issue');
···
25
33
const $viewGitBlame = $('a.view_git_blame');
26
34
27
35
const updateIssueHref = function (anchor) {
28
-
if ($refInNewIssue.length === 0) {
36
+
if (!$refInNewIssue.length) {
29
37
return;
30
38
}
31
39
const urlIssueNew = $refInNewIssue.attr('data-url-issue-new');
···
35
43
};
36
44
37
45
const updateViewGitBlameFragment = function (anchor) {
38
-
if ($viewGitBlame.length === 0) {
39
-
return;
40
-
}
46
+
if (!$viewGitBlame.length) return;
41
47
let href = $viewGitBlame.attr('href');
42
48
href = `${href.replace(/#L\d+$|#L\d+-L\d+$/, '')}`;
43
49
if (anchor.length !== 0) {
···
47
53
};
48
54
49
55
const updateCopyPermalinkUrl = function(anchor) {
50
-
if ($copyPermalink.length === 0) {
51
-
return;
52
-
}
56
+
if (!$copyPermalink.length) return;
53
57
let link = $copyPermalink.attr('data-url');
54
58
link = `${link.replace(/#L\d+$|#L\d+-L\d+$/, '')}#${anchor}`;
55
59
$copyPermalink.attr('data-url', link);
56
60
};
57
61
58
-
if ($from) {
59
-
let a = parseInt($select.attr('rel').slice(1));
60
-
let b = parseInt($from.attr('rel').slice(1));
62
+
if ($selectionStartEls) {
63
+
let a = parseInt($selectionEndEl.attr('rel').slice(1));
64
+
let b = parseInt($selectionStartEls.attr('rel').slice(1));
61
65
let c;
62
66
if (a !== b) {
63
67
if (a > b) {
···
69
73
for (let i = a; i <= b; i++) {
70
74
classes.push(`[rel=L${i}]`);
71
75
}
72
-
$list.filter(classes.join(',')).addClass('active');
76
+
$linesEls.filter(classes.join(',')).each(function () {
77
+
$(this).closest('tr').addClass('active');
78
+
});
73
79
changeHash(`#L${a}-L${b}`);
74
80
75
81
updateIssueHref(`L${a}-L${b}`);
···
78
84
return;
79
85
}
80
86
}
81
-
$select.addClass('active');
82
-
changeHash(`#${$select.attr('rel')}`);
87
+
$selectionEndEl.closest('tr').addClass('active');
88
+
changeHash(`#${$selectionEndEl.attr('rel')}`);
83
89
84
-
updateIssueHref($select.attr('rel'));
85
-
updateViewGitBlameFragment($select.attr('rel'));
86
-
updateCopyPermalinkUrl($select.attr('rel'));
90
+
updateIssueHref($selectionEndEl.attr('rel'));
91
+
updateViewGitBlameFragment($selectionEndEl.attr('rel'));
92
+
updateCopyPermalinkUrl($selectionEndEl.attr('rel'));
87
93
}
88
94
89
95
function showLineButton() {
···
96
102
}
97
103
98
104
// find active row and add button
99
-
const tr = document.querySelector('.code-view td.lines-code.active').closest('tr');
100
-
const td = tr.querySelector('td');
105
+
const tr = document.querySelector('.code-view tr.active');
106
+
const td = tr.querySelector('td.lines-num');
101
107
const btn = document.createElement('button');
102
-
btn.classList.add('code-line-button');
108
+
btn.classList.add('code-line-button', 'ui', 'basic', 'button');
103
109
btn.innerHTML = svg('octicon-kebab-horizontal');
104
110
td.prepend(btn);
105
111
···
123
129
export function initRepoCodeView() {
124
130
if ($('.code-view .lines-num').length > 0) {
125
131
$(document).on('click', '.lines-num span', function (e) {
126
-
const $select = $(this);
127
-
let $list;
128
-
if ($('div.blame').length) {
129
-
$list = $('.code-view td.lines-code.blame-code');
130
-
} else {
131
-
$list = $('.code-view td.lines-code');
132
+
const linesEls = getLineEls();
133
+
const selectedEls = Array.from(linesEls).filter((el) => {
134
+
return el.matches(`[rel=${this.getAttribute('id')}]`);
135
+
});
136
+
137
+
let from;
138
+
if (e.shiftKey) {
139
+
from = Array.from(linesEls).filter((el) => {
140
+
return el.closest('tr').classList.contains('active');
141
+
});
132
142
}
133
-
selectRange($list, $list.filter(`[rel=${$select.attr('id')}]`), (e.shiftKey ? $list.filter('.active').eq(0) : null));
143
+
selectRange($(linesEls), $(selectedEls), from ? $(from) : null);
134
144
135
145
if (window.getSelection) {
136
146
window.getSelection().removeAllRanges();
···
138
148
document.selection.empty();
139
149
}
140
150
141
-
// show code view menu marker (don't show in blame page)
142
-
if ($('div.blame').length === 0) {
143
-
showLineButton();
144
-
}
151
+
showLineButton();
145
152
});
146
153
147
154
$(window).on('hashchange', () => {
148
155
let m = window.location.hash.match(rangeAnchorRegex);
149
-
let $list;
150
-
if ($('div.blame').length) {
151
-
$list = $('.code-view td.lines-code.blame-code');
152
-
} else {
153
-
$list = $('.code-view td.lines-code');
154
-
}
156
+
const $linesEls = $(getLineEls());
155
157
let $first;
156
158
if (m) {
157
-
$first = $list.filter(`[rel=${m[1]}]`);
159
+
$first = $linesEls.filter(`[rel=${m[1]}]`);
158
160
if ($first.length) {
159
-
selectRange($list, $first, $list.filter(`[rel=${m[2]}]`));
161
+
selectRange($linesEls, $first, $linesEls.filter(`[rel=${m[2]}]`));
160
162
161
163
// show code view menu marker (don't show in blame page)
162
-
if ($('div.blame').length === 0) {
164
+
if (!isBlame()) {
163
165
showLineButton();
164
166
}
165
167
···
169
171
}
170
172
m = window.location.hash.match(singleAnchorRegex);
171
173
if (m) {
172
-
$first = $list.filter(`[rel=L${m[2]}]`);
174
+
$first = $linesEls.filter(`[rel=L${m[2]}]`);
173
175
if ($first.length) {
174
-
selectRange($list, $first);
176
+
selectRange($linesEls, $first);
175
177
176
178
// show code view menu marker (don't show in blame page)
177
-
if ($('div.blame').length === 0) {
179
+
if (!isBlame()) {
178
180
showLineButton();
179
181
}
180
182