Skip to content

Commit e7617a9

Browse files
d13d13
committed
Adds scrollbar fix for webviews
1 parent 3bfe4ea commit e7617a9

File tree

5 files changed

+61
-164
lines changed

5 files changed

+61
-164
lines changed

‎src/webviews/apps/home/home.scss

Lines changed: 2 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@use '../shared/styles/utils';
22
@use '../shared/styles/properties';
33
@use '../shared/styles/theme';
4+
@use '../shared/styles/scrollbars';
45

56
:root {
67
--gitlens-z-inline: 1000;
@@ -59,49 +60,9 @@ body {
5960
min-height: 100%;
6061
line-height: 1.4;
6162
font-size: var(--vscode-font-size);
62-
63-
&.scrollable,
64-
.scrollable {
65-
border-color: transparent;
66-
transition: border-color 1s linear;
67-
}
68-
69-
&:hover,
70-
&:focus-within {
71-
&.scrollable,
72-
.scrollable {
73-
border-color: var(--vscode-scrollbarSlider-background);
74-
transition: none;
75-
}
76-
}
77-
78-
&.preload {
79-
&.scrollable,
80-
.scrollable {
81-
transition: none;
82-
}
83-
}
8463
}
8564

86-
::-webkit-scrollbar-corner {
87-
background-color: transparent !important;
88-
}
89-
90-
::-webkit-scrollbar-thumb {
91-
background-color: transparent;
92-
border-color: inherit;
93-
border-right-style: inset;
94-
border-right-width: calc(100vw + 100vh);
95-
border-radius: unset !important;
96-
97-
&:hover {
98-
border-color: var(--vscode-scrollbarSlider-hoverBackground);
99-
}
100-
101-
&:active {
102-
border-color: var(--vscode-scrollbarSlider-activeBackground);
103-
}
104-
}
65+
@include scrollbars.scrollableBase();
10566

10667
:focus {
10768
@include utils.focus();

‎src/webviews/apps/plus/account/account.scss

Lines changed: 2 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@use '../../shared/styles/properties';
22
@use '../../shared/styles/theme';
3+
@use '../../shared/styles/scrollbars';
34

45
:root {
56
--gitlens-z-inline: 1000;
@@ -54,49 +55,9 @@ body {
5455
min-height: 100%;
5556
line-height: 1.4;
5657
font-size: var(--vscode-font-size);
57-
58-
&.scrollable,
59-
.scrollable {
60-
border-color: transparent;
61-
transition: border-color 1s linear;
62-
}
63-
64-
&:hover,
65-
&:focus-within {
66-
&.scrollable,
67-
.scrollable {
68-
border-color: var(--vscode-scrollbarSlider-background);
69-
transition: none;
70-
}
71-
}
72-
73-
&.preload {
74-
&.scrollable,
75-
.scrollable {
76-
transition: none;
77-
}
78-
}
79-
}
80-
81-
::-webkit-scrollbar-corner {
82-
background-color: transparent !important;
8358
}
8459

85-
::-webkit-scrollbar-thumb {
86-
background-color: transparent;
87-
border-color: inherit;
88-
border-right-style: inset;
89-
border-right-width: calc(100vw + 100vh);
90-
border-radius: unset !important;
91-
92-
&:hover {
93-
border-color: var(--vscode-scrollbarSlider-hoverBackground);
94-
}
95-
96-
&:active {
97-
border-color: var(--vscode-scrollbarSlider-activeBackground);
98-
}
99-
}
60+
@include scrollbars.scrollableBase();
10061

10162
:focus {
10263
outline-color: var(--vscode-focusBorder);

‎src/webviews/apps/shared/base.scss

Lines changed: 3 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use './styles/scrollbars';
2+
13
html {
24
height: 100%;
35
font-size: 62.5%;
@@ -9,49 +11,9 @@ body {
911
color: var(--color-foreground);
1012
height: 100%;
1113
line-height: 1.4;
12-
13-
&.scrollable,
14-
.scrollable {
15-
border-color: transparent;
16-
transition: border-color 1s linear;
17-
}
18-
19-
&:hover,
20-
&:focus-within {
21-
&.scrollable,
22-
.scrollable {
23-
border-color: var(--vscode-scrollbarSlider-background);
24-
transition: none;
25-
}
26-
}
27-
28-
&.preload {
29-
&.scrollable,
30-
.scrollable {
31-
transition: none;
32-
}
33-
}
3414
}
3515

36-
::-webkit-scrollbar-corner {
37-
background-color: transparent !important;
38-
}
39-
40-
::-webkit-scrollbar-thumb {
41-
background-color: transparent;
42-
border-color: inherit;
43-
border-right-style: inset;
44-
border-right-width: calc(100vw + 100vh);
45-
border-radius: unset !important;
46-
47-
&:hover {
48-
border-color: var(--vscode-scrollbarSlider-hoverBackground);
49-
}
50-
51-
&:active {
52-
border-color: var(--vscode-scrollbarSlider-activeBackground);
53-
}
54-
}
16+
@include scrollbars.scrollableBase();
5517

5618
a {
5719
border: 0;

‎src/webviews/apps/shared/styles/details-base.scss

Lines changed: 2 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use './theme';
2+
@use './scrollbars';
23

34
:root {
45
--gitlens-gutter-width: 20px;
@@ -45,49 +46,9 @@ body {
4546
font-size: var(--font-size);
4647
color: var(--color-foreground);
4748
padding: 0;
48-
49-
&.scrollable,
50-
.scrollable {
51-
border-color: transparent;
52-
transition: border-color 1s linear;
53-
54-
&:hover,
55-
&:focus-within {
56-
&.scrollable,
57-
.scrollable {
58-
border-color: var(--vscode-scrollbarSlider-background);
59-
transition: none;
60-
}
61-
}
62-
}
63-
64-
&.preload {
65-
&.scrollable,
66-
.scrollable {
67-
transition: none;
68-
}
69-
}
70-
}
71-
72-
::-webkit-scrollbar-corner {
73-
background-color: transparent !important;
7449
}
7550

76-
::-webkit-scrollbar-thumb {
77-
background-color: transparent;
78-
border-color: inherit;
79-
border-right-style: inset;
80-
border-right-width: calc(100vw + 100vh);
81-
border-radius: unset !important;
82-
83-
&:hover {
84-
border-color: var(--vscode-scrollbarSlider-hoverBackground);
85-
}
86-
87-
&:active {
88-
border-color: var(--vscode-scrollbarSlider-activeBackground);
89-
}
90-
}
51+
@include scrollbars.scrollableBase();
9152

9253
a {
9354
text-decoration: none;

‎src/webviews/apps/shared/styles/scrollbars.scss

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
@mixin scrollableBase() {
2+
// This @supports selector is a temporary fix for https://github.com/microsoft/vscode/issues/213045#issuecomment-2211442905
3+
@supports selector(::-webkit-scrollbar) {
4+
html {
5+
scrollbar-color: unset;
6+
}
7+
}
8+
9+
body {
10+
&.scrollable,
11+
.scrollable {
12+
border-color: transparent;
13+
transition: border-color 1s linear;
14+
15+
&:hover,
16+
&:focus-within {
17+
&.scrollable,
18+
.scrollable {
19+
border-color: var(--vscode-scrollbarSlider-background);
20+
transition: none;
21+
}
22+
}
23+
}
24+
25+
&.preload {
26+
&.scrollable,
27+
.scrollable {
28+
transition: none;
29+
}
30+
}
31+
}
32+
33+
::-webkit-scrollbar-corner {
34+
background-color: transparent !important;
35+
}
36+
37+
::-webkit-scrollbar-thumb {
38+
background-color: transparent;
39+
border-color: inherit;
40+
border-right-style: inset;
41+
border-right-width: calc(100vw + 100vh);
42+
border-radius: unset !important;
43+
44+
&:hover {
45+
border-color: var(--vscode-scrollbarSlider-hoverBackground);
46+
}
47+
48+
&:active {
49+
border-color: var(--vscode-scrollbarSlider-activeBackground);
50+
}
51+
}
52+
}

0 commit comments

Comments
 (0)