Skip to content

Commit f85fe35

Browse files
silverwindsilverwind
committed
Diff CSS refactors and misc tweaks
- Simplify Diff CSS styling - Add color variables for diff - Fix vertical centering of inline comment button - Slightly adjust text colors, e.g. in comment header
1 parent c3fc190 commit f85fe35

File tree

3 files changed

+72
-232
lines changed

3 files changed

+72
-232
lines changed

‎web_src/less/_base.less

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,17 @@
7373
--color-black: #1b1c1d;
7474
--color-gold: #a1882b;
7575
--color-white: #ffffff;
76+
--color-diff-removed-word-bg: #fdb8c0;
77+
--color-diff-added-word-bg: #acf2bd;
78+
--color-diff-removed-bg-linenum: #ffe5e4;
79+
--color-diff-added-bg-linenum: #cdffd8;
80+
--color-diff-removed-row-bg: #ffeef0;
81+
--color-diff-added-row-bg: #e6ffed;
82+
--color-diff-removed-row-border: #f1c0c0;
83+
--color-diff-added-row-border: #e6ffed;
7684
/* target-based colors */
7785
--color-body: #ffffff;
86+
--color-text-dark: #080808;
7887
--color-text: #212121;
7988
--color-text-light: #555555;
8089
--color-text-light-2: #888888;
@@ -264,6 +273,10 @@ a.muted:hover,
264273
color: var(--color-text);
265274
}
266275

276+
.ui.menu .item > .label {
277+
background: var(--color-grey);
278+
}
279+
267280
.ui.link.menu .item:hover,
268281
.ui.menu .dropdown.item:hover,
269282
.ui.menu .link.item:hover,
@@ -711,15 +724,15 @@ a.ui.card:hover,
711724
color: var(--color-text);
712725

713726
&:hover {
714-
color: #000000;
727+
color: var(--color-text-dark);
715728
}
716729
}
717730

718731
&.grey {
719732
color: var(--color-text-light) !important;
720733

721734
a {
722-
color: inherit !important;
735+
color: var(--color-text) !important;
723736

724737
&:hover {
725738
color: var(--color-primary) !important;
@@ -1840,7 +1853,7 @@ table th[data-sortt-desc] {
18401853

18411854
.ui.tabular.menu .item {
18421855
padding: 11px 12px;
1843-
color: var(--color-secondary-dark-6);
1856+
color: var(--color-text-light-2);
18441857
}
18451858

18461859
.ui.tabular.menu .item:hover {
@@ -1855,12 +1868,17 @@ table th[data-sortt-desc] {
18551868
margin-top: 1px; /* offset fomantic's margin-bottom: -1px */
18561869
}
18571870

1871+
.ui.segment .ui.tabular.menu .active.item,
1872+
.ui.segment .ui.tabular.menu .active.item:hover {
1873+
background: var(--color-box-body);
1874+
}
1875+
18581876
.ui.secondary.pointing.menu {
18591877
border-color: var(--color-secondary);
18601878
}
18611879

18621880
.ui.secondary.pointing.menu .item {
1863-
color: var(--color-secondary-dark-6);
1881+
color: var(--color-text-light-2);
18641882
}
18651883

18661884
.ui.secondary.pointing.menu .active.item,

‎web_src/less/_repository.less

Lines changed: 39 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -831,7 +831,7 @@
831831
float: left;
832832
margin-left: -33px;
833833
margin-right: 8px;
834-
color: var(--color-text-light-2);
834+
color: var(--color-text);
835835
align-items: center;
836836
justify-content: center;
837837

@@ -1012,7 +1012,7 @@
10121012
}
10131013

10141014
.no-content {
1015-
color: #767676;
1015+
color: var(--color-text-light-2);
10161016
font-style: italic;
10171017
}
10181018

@@ -1060,45 +1060,6 @@
10601060
.event {
10611061
padding-left: 15px;
10621062

1063-
& > .svg:not(.issue-symbol) {
1064-
text-shadow: -2px 0 #fff, 0 2px #fff, 2px 0 #fff, 0 -2px #fff;
1065-
}
1066-
1067-
& > .svg.issue-symbol {
1068-
font-size: 20px;
1069-
margin-left: -35px;
1070-
margin-right: -1px;
1071-
margin-top: 0 !important;
1072-
height: 28px;
1073-
width: 28px;
1074-
border-radius: 50%;
1075-
text-align: center;
1076-
line-height: 28px;
1077-
background: #eee;
1078-
1079-
&::before {
1080-
width: 15px;
1081-
display: inline-block;
1082-
}
1083-
1084-
&.octicon-key::before {
1085-
width: 18px;
1086-
}
1087-
1088-
&.octicon-circle-slash::before {
1089-
width: 17px;
1090-
}
1091-
1092-
&.octicon-comment {
1093-
font-size: 21px;
1094-
line-height: 33px;
1095-
1096-
&::before {
1097-
width: 20px;
1098-
}
1099-
}
1100-
}
1101-
11021063
.detail {
11031064
font-size: .9rem;
11041065
margin-top: 5px;
@@ -1529,7 +1490,6 @@
15291490
}
15301491

15311492
.button {
1532-
margin: -5px 0 -5px 12px;
15331493
padding: 8px 10px;
15341494
flex: 0 0 auto;
15351495
}
@@ -1543,7 +1503,7 @@
15431503
.file-body.file-code {
15441504
.lines-num {
15451505
text-align: right;
1546-
color: #a6a6a6;
1506+
color: var(--color-text-light);
15471507
width: 1%;
15481508
min-width: 50px;
15491509
user-select: none;
@@ -1603,74 +1563,11 @@
16031563
}
16041564
}
16051565

1606-
.code-diff-unified tbody tr {
1607-
&.del-code td {
1608-
background-color: #ffeef0;
1609-
border-color: #f1c0c0;
1610-
}
1611-
1612-
&.add-code td {
1613-
background-color: #e6ffed;
1614-
border-color: #bef5cb;
1615-
}
1616-
1617-
&.del-code td.lines-num {
1618-
background-color: #ffe5e4;
1619-
}
1620-
1621-
&.add-code td.lines-num {
1622-
background-color: #cdffd8;
1623-
}
1624-
1625-
}
1626-
16271566
.code-diff-split {
1628-
16291567
table,
16301568
tbody {
16311569
width: 100%;
16321570
}
1633-
1634-
tbody tr {
1635-
1636-
// light gray for empty lines before / after commit
1637-
&.add-code td:nth-child(1),
1638-
&.add-code td:nth-child(2),
1639-
&.add-code td:nth-child(3),
1640-
&.del-code td:nth-child(4),
1641-
&.del-code td:nth-child(5),
1642-
&.del-code td:nth-child(6) {
1643-
background-color: #fafbfc;
1644-
border-right-color: #eaecef;
1645-
}
1646-
1647-
&.del-code {
1648-
background-color: #ffeef0;
1649-
}
1650-
1651-
&.del-code td.add-code {
1652-
background-color: #e6ffed;
1653-
}
1654-
&.del-code td.lines-num-new.add-code {
1655-
background-color: #cdffd8;
1656-
border-color: #bef5cb;
1657-
}
1658-
1659-
&.add-code {
1660-
background-color: #e6ffed;
1661-
border-color: #bef5cb;
1662-
}
1663-
1664-
&.add-code td.lines-num-new {
1665-
background-color: #cdffd8;
1666-
}
1667-
1668-
td:nth-child(4) {
1669-
border-left-width: 1px;
1670-
border-left-style: solid;
1671-
border-left-color: #f6f8fa;
1672-
}
1673-
}
16741571
}
16751572

16761573
&.file-content {
@@ -1704,7 +1601,7 @@
17041601
list-style: none;
17051602
padding-bottom: 4px;
17061603
margin-bottom: 4px;
1707-
border-bottom: 1px dashed #dddddd;
1604+
border-bottom: 1px dashed var(--color-secondary);
17081605
padding-left: 6px;
17091606
}
17101607
}
@@ -2564,7 +2461,7 @@
25642461
padding: .5rem 1rem !important;
25652462
margin: 0 !important;
25662463
position: relative;
2567-
color: #767676;
2464+
color: var(--color-text-light-2);
25682465
min-height: 41px;
25692466
background-color: var(--color-box-header);
25702467
display: flex;
@@ -2585,22 +2482,21 @@
25852482
top: -8px;
25862483
left: 7px;
25872484
}
2485+
2486+
a {
2487+
color: var(--color-text);
2488+
}
2489+
2490+
a:hover {
2491+
color: var(--color-primary);
2492+
}
25882493
}
25892494

25902495
.comment-header .actions a {
25912496
margin-right: 0 !important;
25922497
padding: .5rem !important;
25932498
}
25942499

2595-
.comment-header a {
2596-
color: rgba(0, 0, 0, .4) !important;
2597-
}
2598-
2599-
.comment-header .actions a:hover,
2600-
.comment-header .actions a.active {
2601-
color: rgba(0, 0, 0, .8) !important;
2602-
}
2603-
26042500
.comment-header-left > * + *,
26052501
.comment-header-right > * + * {
26062502
margin-left: .25rem;
@@ -3101,11 +2997,35 @@ td.blob-excerpt {
31012997
}
31022998

31032999
.removed-code {
3104-
background-color: #fdb8c0;
3000+
background-color: var(--color-diff-removed-word-bg);
31053001
}
31063002

31073003
.added-code {
3108-
background-color: #acf2bd;
3004+
background-color: var(--color-diff-added-word-bg);
3005+
}
3006+
3007+
td.del-code,
3008+
.del-code td {
3009+
background-color: var(--color-diff-removed-row-bg);
3010+
border-color: var(--color-diff-removed-row-border);
3011+
}
3012+
3013+
td.add-code,
3014+
.add-code td {
3015+
background-color: var(--color-diff-added-row-bg);
3016+
border-color: var(--color-diff-added-row-border);
3017+
}
3018+
3019+
.code-diff-unified .del-code .lines-num {
3020+
background-color: var(--color-diff-removed-bg-linenum);
3021+
}
3022+
3023+
.code-diff-unified .add-code .lines-num {
3024+
background-color: var(--color-diff-added-bg-linenum);
3025+
}
3026+
3027+
.code-diff-split tbody tr td:nth-child(4) {
3028+
border-left: 1px solid var(--color-secondary);
31093029
}
31103030

31113031
.repository .ui.menu.new-menu {

0 commit comments

Comments
 (0)