[Boomarks, History + Side Panels] Alternating row colours (Updated 20.09.17)
-
Thanks, now is perfect
-
Same code above, but using a gradient in panel
/* 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 .download-item .file, .panel#downloads .download-item .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 -
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
-
@luetage said in [Boomarks & History] Alternating row colours:
@Hadden89 upvote for being extra persistent with these gradients
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 -
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
-
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
-
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.
-
This also works in the 1.10 stable so I will edit the original post
-
Changes to the selector names have broken some of this, so it's been updated and is working with v 1.12
-
@sjudenim I placed a really small transparent png as background (I know, I shouldn't)
.vivaldi-tree div>div:nth-child(even) { background-color: blue; } .vivaldi-tree div>div:nth-child(odd) { background-color: red; } .vivaldi-tree { /*bground test*/ background-image: url(hcomb3.png); }
It works, but seems not possible to use both even and odd with background.
Red replace blue in any row, same if I use --var(colorWhatever)
If I only use even, the odd become transparent (which is really odd wth >>backgrounds xD)
@luetage I dropped gradients in my css -
@hadden89 said in [Boomarks, History + Side Panels] Alternating row colours (Updated 20.09.17):
I dropped gradients in my css
damn, take my upvote
-
-