Skip to content

Commit 9b4744f

Browse files
setchysetchy
authored
refactor: scrollbar styling (#1741)
Signed-off-by: Adam Setch <[email protected]>
1 parent 15b0bc4 commit 9b4744f

File tree

2 files changed

+57
-58
lines changed

2 files changed

+57
-58
lines changed

‎src/renderer/App.css‎

Lines changed: 7 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,36 +5,21 @@ body,
55
-webkit-user-select: none;
66
}
77

8-
html::-webkit-scrollbar,
9-
div.flex-grow::-webkit-scrollbar {
8+
*::-webkit-scrollbar {
109
width: 10px;
1110
}
1211

13-
html::-webkit-scrollbar-thumb,
14-
div.flex-grow::-webkit-scrollbar-thumb {
15-
background-color: #c1c1c1;
16-
border-radius: 10px;
12+
*::-webkit-scrollbar-track {
13+
background-color: var(--gitify-scrollbar-track);
1714
}
1815

19-
html::-webkit-scrollbar-thumb:hover,
20-
div.flex-grow::-webkit-scrollbar-thumb:hover {
21-
background-color: #a8a8a8;
16+
*::-webkit-scrollbar-thumb {
17+
background-color: var(--gitify-scrollbar-thumb);
2218
border-radius: 10px;
2319
}
2420

25-
html.dark::-webkit-scrollbar-track,
26-
html.dark div.flex-grow::-webkit-scrollbar-track {
27-
background-color: #090e15;
28-
}
29-
30-
html.dark::-webkit-scrollbar-thumb,
31-
html.dark div.flex-grow::-webkit-scrollbar-thumb {
32-
background-color: #24292e;
33-
}
34-
35-
html.dark::-webkit-scrollbar-thumb:hover,
36-
html.dark div.flex-grow::-webkit-scrollbar-thumb:hover {
37-
background-color: #3a3f44;
21+
*::-webkit-scrollbar-thumb:hover {
22+
background-color: var(--gitify-scrollbar-thumb-hover);
3823
}
3924

4025
body {

‎tailwind.config.ts‎

Lines changed: 50 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -23,31 +23,31 @@ const config: Config = {
2323
open: '#1f883d',
2424
},
2525
gitify: {
26-
background: 'var(--color-gitify-background)',
27-
font: 'var(--color-gitify-font)',
26+
background: 'var(--gitify-background)',
27+
font: 'var(--gitify-font)',
2828
error: colors.red[500],
2929
sidebar: '#24292e',
30-
footer: 'var(--color-gitify-footer)',
30+
footer: 'var(--gitify-footer)',
3131
accounts: {
32-
rest: 'var(--color-gitify-accounts-rest)',
33-
error: 'var(--color-gitify-accounts-error)',
32+
rest: 'var(--gitify-accounts-rest)',
33+
error: 'var(--gitify-accounts-error)',
3434
},
35-
repositories: 'var(--color-gitify-repositories)',
35+
repositories: 'var(--gitify-repositories)',
3636
notifications: {
37-
border: 'var(--color-gitify-notifications-border)',
38-
rest: 'var(--color-gitify-notifications-rest)',
39-
hover: 'var(--color-gitify-notifications-hover)',
37+
border: 'var(--gitify-notifications-border)',
38+
rest: 'var(--gitify-notifications-rest)',
39+
hover: 'var(--gitify-notifications-hover)',
4040
},
4141
tooltip: {
4242
icon: colors.blue[500],
43-
popout: 'var(--color-gitify-tooltip-popout)',
43+
popout: 'var(--gitify-tooltip-popout)',
4444
},
4545
link: colors.blue[500],
4646
caution: colors.orange[600],
4747
settings: colors.blue[600],
4848
pill: {
49-
rest: 'var(--color-gitify-pill-rest)',
50-
hover: 'var(--color-gitify-pill-hover)',
49+
rest: 'var(--gitify-pill-rest)',
50+
hover: 'var(--gitify-pill-hover)',
5151
},
5252
},
5353
},
@@ -60,32 +60,46 @@ const config: Config = {
6060
({ addBase }) => {
6161
addBase({
6262
':root': {
63-
'--color-gitify-background': colors.white,
64-
'--color-gitify-font': colors.gray[700],
65-
'--color-gitify-footer': colors.gray[200],
66-
'--color-gitify-accounts-rest': colors.gray[300],
67-
'--color-gitify-accounts-error': colors.red[300],
68-
'--color-gitify-repositories': colors.gray[100],
69-
'--color-gitify-notifications-border': colors.gray[100],
70-
'--color-gitify-notifications-rest': colors.white,
71-
'--color-gitify-notifications-hover': colors.gray[100],
72-
'--color-gitify-tooltip-popout': colors.white,
73-
'--color-gitify-pill-rest': colors.gray[100],
74-
'--color-gitify-pill-hover': colors.gray[200],
63+
'--gitify-background': colors.white,
64+
'--gitify-font': colors.gray[700],
65+
'--gitify-footer': colors.gray[200],
66+
67+
'--gitify-accounts-rest': colors.gray[300],
68+
'--gitify-accounts-error': colors.red[300],
69+
70+
'--gitify-repositories': colors.gray[100],
71+
72+
'--gitify-notifications-border': colors.gray[100],
73+
'--gitify-notifications-rest': colors.white,
74+
'--gitify-notifications-hover': colors.gray[100],
75+
'--gitify-tooltip-popout': colors.white,
76+
'--gitify-pill-rest': colors.gray[100],
77+
'--gitify-pill-hover': colors.gray[200],
78+
79+
'--gitify-scrollbar-track': colors.gray[100],
80+
'--gitify-scrollbar-thumb': colors.gray[400],
81+
'--gitify-scrollbar-thumb-hover': colors.gray[500],
7582
},
7683
'.dark': {
77-
'--color-gitify-background': '#161b22',
78-
'--color-gitify-font': colors.gray[100],
79-
'--color-gitify-footer': '#000209',
80-
'--color-gitify-accounts-rest': '#000209',
81-
'--color-gitify-accounts-error': colors.red[500],
82-
'--color-gitify-repositories': '#090e15',
83-
'--color-gitify-notifications-border': '#090e15',
84-
'--color-gitify-notifications-rest': '#161b22',
85-
'--color-gitify-notifications-hover': '#090e15',
86-
'--color-gitify-tooltip-popout': '#24292e',
87-
'--color-gitify-pill-rest': colors.gray[800],
88-
'--color-gitify-pill-hover': colors.gray[700],
84+
'--gitify-background': '#161b22',
85+
'--gitify-font': colors.gray[100],
86+
'--gitify-footer': '#000209',
87+
88+
'--gitify-accounts-rest': '#000209',
89+
'--gitify-accounts-error': colors.red[500],
90+
91+
'--gitify-repositories': '#090e15',
92+
93+
'--gitify-notifications-border': '#090e15',
94+
'--gitify-notifications-rest': '#161b22',
95+
'--gitify-notifications-hover': '#090e15',
96+
'--gitify-tooltip-popout': '#24292e',
97+
'--gitify-pill-rest': colors.gray[800],
98+
'--gitify-pill-hover': colors.gray[700],
99+
100+
'--gitify-scrollbar-track': '#090e15',
101+
'--gitify-scrollbar-thumb': '#24292e',
102+
'--gitify-scrollbar-thumb-hover': '#3a3f44',
89103
},
90104
});
91105
},

0 commit comments

Comments
 (0)