CSS tweaks for better compatibility with the Pi touch screen

Volumio Development Suggest a feature
1

  1. Change .volumeManager{margin-top: 110px;} to .volumeManager{margin-top: 90px;}. This removes an unnecessary scroll bar when viewing the simple-view playback screen at 800x480 resolution.

  2. Change -webkit-scrollbar{width: 10px;height: 10px;} to -webkit-scrollbar{width: 30px;height: 30px;}. This makes the scrollbars usable with a finger on the touch screen. I actually like it better on a desktop too. These tiny thin scrollbars that are the fashion now are unnecessarily hard to get hold of with a mouse.

1 Like
2

1 is maybe not as simple as I thought, see this post. It results in a freaky flashing scrollbar on the playback screen.

Note that it’s not this change that actually causes the flashing scrollbar - you can reproduce it in a desktop browser with the original margins if you resize the window height to just hit the bottom of the album art. It’s just that the resolution of the Pi display happens to cause it when there are 5 lines of text above the album art, if there isn’t something else forcing the scrollbars to be displayed all the time.