Widen the Panel Scrollbar and Scrollbar Button



  • My spinal cord injury means more difficulty controlling the mouse and making fine movements hence any UI alterations which lower the precision required to pick and manipulate elements is important. Widening the panel scrollbar helps me immensely. It's difficult to overstate how welcome this hack is. [code] /* make the panel scrollbar wider / #browser ::-webkit-scrollbar{width:32px}.mac#browser ::-webkit-scrollbar{width:32px} / make the panel scrollbar button wider and taller / #browser ::-webkit-scrollbar-button{display:flex;width:32px;height:32px;background-position:1px 0;background-color:var(--colorBgLight)} [/code] In addition I was also able to remove the 2px border on either side of the scrollbar thumb. This is cosmetic but I believe looks much cleaner/better. [code] / remove the 2px space on either side of the panel scrollbar button */ #browser ::-webkit-scrollbar-thumb{border:0px solid var(--colorBgLight);background-color:var(--colorBgDarker)} [/code] I'm so happy to have been able to modify these. :-) Thank you Vivaldi!



  • Nice, even for the cosmetic part.
    I tweaked the values on 28px for me.

    Can be the colour of the scrollbar gray-white? (the dragging part, it's almost invisible on dark themes… if it could be like the webpage scrollbar would be perfect)
    Can be text size of panels slightly decreased? =)



  • Without knowing for sure I'm quite positive the scrollbar color can be altered. I would start hunting from the below:

    --colorBgLight
    

    I made the text smaller with:

    /* change the size of the bookmark panel font */
    #browser,#browser+div,#browser+div+div{font-weight:400;font-size:12px;line-height:1.3}
    
    

    But I am not happy because this affects other UI fonts (test this by changing the font-weight).

    Further I changed the line height of items in the panel. Sadly this doesn't affect the folders, only the bookmarks themselves.

    /* make the items in the panel closer together vertically */
    .vivaldi-tree .tree-row label{flex:1 1 0;padding:0 6px 0 0;line-height:20px;min-height:20px;display:flex;align-items:center}
    
    

    I hope we get more flexability to alter panel items in the future.



  • @g_bartsch:

    Further I changed the line height of items in the panel. Sadly this doesn't affect the folders, only the bookmarks themselves.

    /* make the items in the panel closer together vertically */
    .vivaldi-tree .tree-row label{flex:1 1 0;padding:0 6px 0 0;line-height:20px;min-height:20px;display:flex;align-items:center}
    
    

    I hope we get more flexability to alter panel items in the future.

    Fonts and images are separate. The images are svg and can be changed using the appropriate heading

    svg.folder-icon,
    svg.folder-trash,
    svg.note-icon



  • @Hadden89:

    Nice, even for the cosmetic part.
    I tweaked the values on 28px for me.

    Can be the colour of the scrollbar gray-white? (the dragging part, it's almost invisible on dark themes… if it could be like the webpage scrollbar would be perfect)
    Can be text size of panels slightly decreased? =)

    I've given 2 examples as to how you can choose your desired colours.

    ! ```
    #browser ::-webkit-scrollbar-track {
    background-color: var(--colorBg) !important;
    }
    #browser ::-webkit-scrollbar-thumb {
    background-color: rgba(150,150,150,.8) !important;
    border: 0 !important;
    }
    #browser ::-webkit-scrollbar-thumb:hover {
    background-color: var(--colorHighlightBg) !important;
    }
    #browser ::-webkit-scrollbar-thumb:active {
    background-color: var(--colorFg) !important;
    }

    
    Using the variable settings allows you to change colours in the theme editor instead of having to adjust the code everytime.


  • Thanks alot, guys :)
    Apart the folders (sidebar) won't follow the gap (line height) provided by "plain bookmarks" all these codes are the perfection =D



  • I can't find the setting to decrease the spacing between folders. I should look more because I want that. I'm hoping the devs will work more on bookmarks (especially making a split pane like O12 had) and eventually have spacing options so we don't have to hack.



  • @g_bartsch:

    I can't find the setting to decrease the spacing between folders. I should look more because I want that. I'm hoping the devs will work more on bookmarks (especially making a split pane like O12 had) and eventually have spacing options so we don't have to hack.

    You can try and add a negative value to the padding

    svg.folder-icon {
    	padding: -5px 0 -5px 0 !important;
    }
    

    I know that code can increase it if you wanted but I don't think you can go too small because of overlapping.



  • Thank you. I finally got around to trying this but it didn't work. I'll keep looking for a way to reduce the spacing between folder because being able to see more line items at once without scrolling is a big deal IMHO.



  • I got it! It's the margin on .folder-item-count. I set mine to 2px and the line height is now just about right for me. [Setting a lower number than 2px seems to have no further effect. I'm not going to search for why].

    .vivaldi-tree .tree-row.folder .folder-item-count,.vivaldi-tree .tree-row.trash .folder-item-count{color:var(--colorBg);background-color:var(--colorFg);flex:0 0 auto;border:1px solid transparent;height:auto;line-height:1.3;padding:0 4px;border-radius:3px;font-size:11px;font-weight:700;margin:2px 0 2px auto;overflow:visible;opacity:.5}
    ```[attachment=4669]2016-10-08_13h53_30.png[/attachment]
    
    I also shifted the row start to the left and made the triangle smaller. Now the bookmark plan is looking pretty good.
    
    I'm waiting for split panes like O12.
    Attachments:
    ![](https://forum.vivaldi.net/uploads/attachments/19179/2016-10-08_13h53_30.png)


  • yay, no more gap between folder/bookmarks on panel ^__^


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.