Question UI Toolkit: style scrollview slider to something more iOs stylish?

Which classes are styling the area? I cannot find a solution. Most classes that I could find do nothing.
I would like to have it like the slider in the old system:
invisible by default, but shown when scrollarea gets touched. And I would like to have it slim.




this is what I tried so far:

Code (CSharp):

1. .unity-scroller--vertical .unity-base-slider__dragger {
2.     width: 50%;
3.     align-self: center;
4.     border-top-left-radius: 4px;
5.     border-bottom-left-radius: 4px;
6.     border-top-right-radius: 4px;
7.     border-bottom-right-radius: 4px;
8. }
9.  
10. .unity-base-slider--vertical{
11.     width: 50%;
12.  
13. }
14.  
15. .unity-scroller__low-button{
16.     width: 10px;
17.     height: 10px;
18. }
19.  
20. .unity-scroller__high-button{
21.     width: 10px;
22.     height: 10px;
23. }

 

I did this for the horizontal bar at the bottom

Code (CSharp):

1. .HScrollBar #unity-tracker {
2.     background-color: rgb(46, 46, 46);
3.     border-left-width: 0;
4.     border-right-width: 0;
5.     border-top-width: 0;
6.     border-bottom-width: 0;
7.     max-height: none;
8.     margin-left: 0;
9.     margin-right: 0;
10.     margin-top: 0;
11.     margin-bottom: 0;
12.     height: 16px;
13.     top: 0;
14. }
15.  
16. .HHScrollBar #unity-slider {
17.     background-color: rgb(30, 35, 60);
18.     border-left-width: 0;
19.     border-right-width: 0;
20.     border-top-width: 0;
21.     border-bottom-width: 0;
22. }
23.  
24. .HScrollBar .unity-base-slider:focus .unity-base-slider__dragger {
25.     border-left-width: 0;
26.     border-right-width: 0;
27.     border-top-width: 0;
28.     border-bottom-width: 0;
29. }
30.  
31. .HHScrollBar .unity-base-field__input {
32.     border-left-width: 0;
33.     border-right-width: 0;
34.     border-top-width: 0;
35.     border-bottom-width: 0;
36.     background-color: rgb(46, 46, 46);
37. }
38.  
39. .HScrollBar #unity-dragger {
40.     -unity-background-image-tint-color: rgb(255, 255, 255);
41.     background-color: rgb(59, 63, 84);
42.     height: 14px;
43.     top: 1;
44.     position: absolute;
45.     margin-left: 0;
46.     margin-right: 0;
47.     margin-top: 0;
48.     margin-bottom: 0;
49.     border-left-width: 0;
50.     border-right-width: 0;
51.     border-top-width: 0;
52.     border-bottom-width: 0;
53. }
54.  
55. .HScrollBar #unity-dragger:hover {
56.     background-color: rgb(49, 60, 113);
57. }
58.  

 

thanks, I will try!

 

hm, onto which elements do I put which classes?

 

sometimes things are very easy:
I only added this, nothing else:

.unity-scroller{
width: 4px;
}

 

Put the HScrollBar class onto your scollbar or scrollview element. The rules will then match and style the sub-components which you can't edit. I just use a special class so that different scroll bars can be styled in different ways.