1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 | @import url('~perfect-scrollbar/css/perfect-scrollbar.css');
|
18 |
|
19 | ::-webkit-scrollbar {
|
20 | height: var(--theia-scrollbar-width);
|
21 | width: var(--theia-scrollbar-width);
|
22 | background: transparent;
|
23 | }
|
24 |
|
25 | ::-webkit-scrollbar-thumb {
|
26 | background: var(--theia-scrollbarSlider-background);
|
27 | }
|
28 |
|
29 | ::-webkit-scrollbar:hover {
|
30 | background: transparent;
|
31 | }
|
32 |
|
33 | ::-webkit-scrollbar-thumb:hover {
|
34 | background: var(--theia-scrollbarSlider-hoverBackground);
|
35 | }
|
36 |
|
37 | ::-webkit-scrollbar-thumb:active {
|
38 | background: var(--theia-scrollbarSlider-activeBackground);
|
39 | }
|
40 |
|
41 | ::-webkit-scrollbar-corner {
|
42 | background: transparent;
|
43 | }
|
44 |
|
45 |
|
46 |
|
47 |
|
48 |
|
49 |
|
50 | #theia-app-shell .ps__rail-x,
|
51 | #theia-dialog-shell .ps__rail-x,
|
52 | #theia-breadcrumbs-popups-overlay .ps__rail-x {
|
53 | height: var(--theia-scrollbar-rail-width);
|
54 | }
|
55 |
|
56 | #theia-app-shell .ps__rail-x > .ps__thumb-x,
|
57 | #theia-dialog-shell .ps__rail-x > .ps__thumb-x,
|
58 | #theia-breadcrumbs-popups-overlay .ps__thumb-x {
|
59 | height: var(--theia-scrollbar-width);
|
60 | bottom: calc((var(--theia-scrollbar-rail-width) - var(--theia-scrollbar-width)) / 2);
|
61 | background: var(--theia-scrollbarSlider-background);
|
62 | border-radius: 0px;
|
63 | }
|
64 |
|
65 | #theia-app-shell .ps__rail-x:hover,
|
66 | #theia-app-shell .ps__rail-x:focus,
|
67 | #theia-dialog-shell .ps__rail-x:hover,
|
68 | #theia-dialog-shell .ps__rail-x:focus,
|
69 | #theia-breadcrumbs-popups-overlay .ps__rail-x:hover,
|
70 | #theia-breadcrumbs-popups-overlay .ps__rail-x:focus {
|
71 | height: var(--theia-scrollbar-rail-width);
|
72 | }
|
73 |
|
74 | #theia-app-shell .ps__rail-x:hover > .ps__thumb-x,
|
75 | #theia-app-shell .ps__rail-x:focus > .ps__thumb-x,
|
76 | #theia-app-shell .ps__rail-x.ps--clicking .ps__thumb-x,
|
77 | #theia-dialog-shell .ps__rail-x:hover > .ps__thumb-x,
|
78 | #theia-dialog-shell .ps__rail-x:focus > .ps__thumb-x,
|
79 | #theia-dialog-shell .ps__rail-x.ps--clicking .ps__thumb-x,
|
80 | #theia-breadcrumbs-popups-overlay .ps__rail-x:hover > .ps__thumb-x,
|
81 | #theia-breadcrumbs-popups-overlay .ps__rail-x:focus > .ps__thumb-x,
|
82 | #theia-breadcrumbs-popups-overlay .ps__rail-x.ps--clicking .ps__thumb-x {
|
83 | height: var(--theia-scrollbar-width);
|
84 | }
|
85 |
|
86 | #theia-app-shell .ps__rail-y,
|
87 | #theia-dialog-shell .ps__rail-y,
|
88 | #theia-breadcrumbs-popups-overlay .ps__rail-y {
|
89 | width: var(--theia-scrollbar-rail-width);
|
90 | }
|
91 |
|
92 | #theia-app-shell .ps__rail-y > .ps__thumb-y,
|
93 | #theia-dialog-shell .ps__rail-y > .ps__thumb-y,
|
94 | #theia-breadcrumbs-popups-overlay .ps__rail-y > .ps__thumb-y {
|
95 | width: var(--theia-scrollbar-width);
|
96 | right: calc((var(--theia-scrollbar-rail-width) - var(--theia-scrollbar-width)) / 2);
|
97 | background: var(--theia-scrollbarSlider-background);
|
98 | border-radius: 0px;
|
99 | }
|
100 |
|
101 | #theia-app-shell .ps__rail-y:hover,
|
102 | #theia-app-shell .ps__rail-y:focus,
|
103 | #theia-dialog-shell .ps__rail-y:hover,
|
104 | #theia-dialog-shell .ps__rail-y:focus,
|
105 | #theia-breadcrumbs-popups-overlay .ps__rail-y:hover,
|
106 | #theia-breadcrumbs-popups-overlay .ps__rail-y:focus {
|
107 | width: var(--theia-scrollbar-rail-width);
|
108 | }
|
109 |
|
110 | #theia-app-shell .ps__rail-y:hover > .ps__thumb-y,
|
111 | #theia-app-shell .ps__rail-y:focus > .ps__thumb-y,
|
112 | #theia-app-shell .ps__rail-y.ps--clicking .ps__thumb-y,
|
113 | #theia-dialog-shell .ps__rail-y:hover > .ps__thumb-y,
|
114 | #theia-dialog-shell .ps__rail-y:focus > .ps__thumb-y,
|
115 | #theia-dialog-shell .ps__rail-y.ps--clicking .ps__thumb-y,
|
116 | #theia-breadcrumbs-popups-overlay .ps__rail-y:hover > .ps__thumb-y,
|
117 | #theia-breadcrumbs-popups-overlay .ps__rail-y:focus > .ps__thumb-y,
|
118 | #theia-breadcrumbs-popups-overlay .ps__rail-y.ps--clicking .ps__thumb-y {
|
119 | right: calc((var(--theia-scrollbar-rail-width) - var(--theia-scrollbar-width)) / 2);
|
120 | width: var(--theia-scrollbar-width);
|
121 | }
|
122 |
|
123 | #theia-app-shell .ps [class^='ps__rail'].ps--clicking > [class^='ps__thumb'],
|
124 | #theia-dialog-shell .ps [class^='ps__rail'].ps--clicking > [class^='ps__thumb'],
|
125 | #theia-breadcrumbs-popups-overlay .ps [class^='ps__rail'].ps--clicking > [class^='ps__thumb'] {
|
126 | background-color: var(--theia-scrollbarSlider-activeBackground);
|
127 | }
|
128 |
|
129 | #theia-app-shell .ps [class^='ps__rail'] > [class^='ps__thumb']:hover,
|
130 | #theia-app-shell .ps [class^='ps__rail'] > [class^='ps__thumb']:focus,
|
131 | #theia-dialog-shell .ps [class^='ps__rail'] > [class^='ps__thumb']:hover,
|
132 | #theia-dialog-shell .ps [class^='ps__rail'] > [class^='ps__thumb']:focus,
|
133 | #theia-breadcrumbs-popups-overlay .ps [class^='ps__rail'] > [class^='ps__thumb']:hover,
|
134 | #theia-breadcrumbs-popups-overlay .ps [class^='ps__rail'] > [class^='ps__thumb']:focus {
|
135 | background: var(--theia-scrollbarSlider-hoverBackground);
|
136 | }
|
137 |
|
138 | #theia-app-shell .ps [class^='ps__rail'] > [class^='ps__thumb']:active,
|
139 | #theia-dialog-shell .ps [class^='ps__rail'] > [class^='ps__thumb']:active,
|
140 | #theia-breadcrumbs-popups-overlay .ps [class^='ps__rail'] > [class^='ps__thumb']:active {
|
141 | background: var(--theia-scrollbarSlider-activeBackground);
|
142 | }
|
143 |
|
144 | #theia-app-shell .ps:hover > [class^='ps__rail'],
|
145 | #theia-app-shell .ps--focus > [class^='ps__rail'],
|
146 | #theia-app-shell .ps--scrolling-y > [class^='ps__rail'],
|
147 | #theia-dialog-shell .ps:hover > [class^='ps__rail'],
|
148 | #theia-dialog-shell .ps--focus > [class^='ps__rail'],
|
149 | #theia-dialog-shell .ps--scrolling-y > [class^='ps__rail'],
|
150 | #theia-breadcrumbs-popups-overlay .ps:hover > [class^='ps__rail'],
|
151 | #theia-breadcrumbs-popups-overlay .ps--focus > [class^='ps__rail'],
|
152 | #theia-breadcrumbs-popups-overlay .ps--scrolling-y > [class^='ps__rail'] {
|
153 | opacity: 1;
|
154 | background: transparent;
|
155 | }
|