[Boomarks & History] Alternating row colours (Updated 12.07.17)



  • Finding the wall of text in the new history panel difficult to read? Try alternating row colours

    Results may vary depending on what colour your theme is using for the containers so play around with the background-color to find something you like. You can also change from (odd) to (even) in the following code or add both

    For all list panels use this

    .vivaldi-tree div > div:nth-child(even) { 
        background-color: var(--colorBgDark);
    }
    

    If you want only the bookmarks and history managers to have them then use this

    .manager .manager-treeview div > div:nth-child(even),
    .startpage .history .manager-content .history-tree div > div:nth-child(even) { 
        background-color: var(--colorBgDark);
    }
    

    If you want to have the side panel different from the managers use both and simply change the background colour.

    You can add more colour by now changing the the odd rows as well like this

    .vivaldi-tree div > div:nth-child(odd) { 
        background-color: var(--colorBg);
    }
    

    This will clean up the downloads page

    .panel#downloads li .file,
    .panel#downloads li .file .filename,
    .panel#downloads li .file .size {
        background-color: transparent;    
    }
    

    One last thing. Now that our managers have a little more flavor lets do something for that wallpaper we like too much to cover up by adding a little transparency

    .manager .manager-content,
    .manager .manager-content .toolbar-wrapper,
    .startpage .history .navigation,
    .startpage .history .manager-content,
    .addbookmark-cardwrapper,
    .manager-editor,
    .startpage .history .Cal__Container__root .ReactVirtualized__List  {
        background-color: var(--colorBgDarker) !important;
        opacity: .95 !important;
    }
    

    Give it try



  • Nice, only I notice a "bug" on download panel with first script...
    the label is always --ColorBg (even when should be brighter or transparent). Other than, works as it should ;)

    0_1490921394330_8189b9d8-fd6d-46ca-9833-f68c700f3565.png



  • @Hadden89

    Thank you for pointing that out. The filename and size seem to need a separate background declared. Just add this

    .panel#downloads li .file,
    .panel#downloads li .file .filename,
    .panel#downloads li .file .size {
    background-color: transparent;    
    }
    

    *This has been added to the original post



  • Thanks, now is perfect ;)



  • Same code above, but using a gradient in panel :P

    /* Alternate colors in panels */
    .vivaldi-tree div + div:nth-child(even) { 
    background-image:linear-gradient(hsla(0,0%,100%,.2),hsla(0,0%,100%,.3));
    } 
    .panel#downloads li .file,
    .panel#downloads li .file .filename,
    .panel#downloads li .file .size {
    background-image:linear-gradient(hsla(0,0%,100%,.01),hsla(0,0%,100%,.01));  
    }
    

    Before this, I had background-color: var(--colorFgAlpha); as color in div.
    I hope this code is correct, but it should :D



  • I've never read this topic. It makes sense and I have stolen the code ^^
    The only thing I noticed is that selected items, which go out of focus have the same color as the alternating rows var(--colorBgDark). I decided to fill it with the lighter highlight color instead:
    .vivaldi-tree .tree-row[data-selected][data-nofocus] {background-color: var(--colorHighlightBgAlpha);}



  • @Hadden89 upvote for being extra persistent with these gradients :D



  • @luetage said in [Boomarks & History] Alternating row colours:

    @Hadden89 upvote for being extra persistent with these gradients :D

    Yeah, I really like translucid/gradient things ^^,
    My major disappointment when win8 was released was... the aero lack XD
    Well, also the ugly desktop UI. But aero first.
    This code is very nice; I gladly pushed up :P



  • @luetage

    That's strange, because what you have changed to is actually already present in the common.css (line 2068). You might have some clashing codes going on in your custom file(s)



  • @sjudenim That's funny, because I checked common.css when I looked for this code, and I found the line and it has the background-color as var(--colorBgDark) set. Are you sure your common.css has var(--colorHighlightBgAlpha)? I know that it's always been the former for me, on every snapshot, independent from wether I run modifications or not.

    edit: maybe this is platform dependent oO
    0_1498605212401_Screenshot 2017-06-28 01.13.07.png



  • @luetage

    It was using the highlight colour when I first wrote the code and the version I am on still has it, which is v1.9 stable. But since you've mentioned this I took a peek at the common.css for v1.10 as well as the snapshot and you are right, they have changed it. That seems like an odd choice. Guess I'll add that to my code for when I finally update

    Another odd thing is that there is a border on it in the version I'm using which doesn't appear in the code
    0_1498606892538_2017-06-27_451.png



  • Hmm, I missed that change, but it's been quite a while since 1.9. for me. Discoloring items which are out of focus is a design choice, it's understandable but I don't agree with it either. Well, gladly this is not an issue for users who mod. ^^



  • There's been a change in the latest snapshot 1.11.890.4. The specific code for alternating row colors doesn't work anymore on the bookmarks page. Instead you have to use this selector:
    .manager .manager-treeview div > div:nth-child(even)



  • Another thing I noticed is that when scrolling the rows change color, whenever a line goes out/in of view. It's not really an issue, just wondering if there is a way to work around that.



  • @luetage

    This also works in the 1.10 stable so I will edit the original post


Log in to reply
 

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