Folder Icon Colour

adacom

i run this css


/* folder icon colour and space to text */
.vivaldi-tree .tree-row svg,
.vivaldi-tree .tree-row[data-selected] svg,
.vivaldi-tree .tree-row[data-selected]:hover svg { 
	fill: #FACA4C !important; 
        stroke: #FACA4C !important;
	margin-right: 5px !important;
}

up to 3.2 it filled the folder icons

on latest snapshots it does not

am missing the obvious i think but i cannot see it - can anybody help

A Former User

There are now two paths of which one (the fill) has fill-opacity="0.1" so you need to change that (it’s also a CSS property).

adacom

@potmeklecbohdan said in Folder Icon Colour:

There are now two paths of which one (the fill) has fill-opacity="0.1" so you need to change that (it’s also a CSS property).

hmmmmm - not getting there

.vivaldi-tree .tree-row svg {
  fill: green !important;
  fill-opacity: 1.0 !important;
  stroke: green;
}

is my best guess but that does not help - just changes the outline to green

A Former User

@adacom You change fill-opacity of the svg but it’s overridden by the attribute on the path. You have to override that. Untested:

.vivaldi-tree .tree-row svg path {
        fill-opacity: 1;
}

Of course the !important may be needed.

adacom

brilliant - works perfectly - thanks

arganto

Thx from here as well.

Most probably new as well, that the arrow infront of the folder get's the same color/class as the folder. How to distinguich betewwen them?

I want to have this arrow hidden/invisible.

Currently I use (added your hint):

.vivaldi-tree .tree-row svg {
   fill: #e6c145;
   fill-opacity: 1;
}

.vivaldi-tree .tree-row svg path {
   fill: #e6c145;
   fill-opacity: 1;
}

Found it. Same thing:

.vivaldi-tree .tree-row .expand-icon svg path {

adacom

@arganto

i use this

/* removes chevron at left side of folder icon */
.panel.panel-bookmarks .vivaldi-tree .tree-row.folder .expand-icon > svg {
        display: none; 
}

you may have to play with oth css to reduce the space it takes but that hides the chevron for me

arganto

@potmeklecbohdan said, that there are now two path s. if one is for fill and the other for contour/border, how to address the contour one? I'm still not happy with my result.

Let's say, if I want to have a contour/border in black and a the fill should be yellow. How to have this now?

And or, can I see the standard code "behind" vivaldi skin somehow, esp. favorite tree, so that I can derive this myself?

A Former User

@arganto said in Folder Icon Colour:

@potmeklecbohdan said, that there are now two path s. if one is for fill and the other for contour/border, how to address the contour one? I'm still not happy with my result.

Let's say, if I want to have a contour/border in black and a the fill should be yellow. How to have this now?

One of them, the fill, has the attribute fill-opacity, i.e. you can use [fill-opacity] to select that—but it’s a little harder for the border coz :not([fill-opacity]) would also match the SD indicator. To distinguish them, you gotta use the [d="crap here"] they have.

And or, can I see the standard code "behind" vivaldi skin somehow, esp. favorite tree, so that I can derive this myself?

See this thread. Basically, if you want to inspect the UI often, enable the flags; if you want to inspect it just occasionally, use the ‘inspect w/o browser restart‘ way.

arganto

@potmeklecbohdan More than great in every dimension. Thanks a lot.

torpedopradera

Hi, I have followed this thread because I find the same problem as original poster. I have been able to achieve the same result, separating background and contour by using

svg.folder-icon svg path {
fill: rgb(255, 255, 0) !important;
fill-opacity: 1 !important;
stroke: rgb(0, 0, 0) !important;    /* CONTOUR   */
stroke-width: 0.7 !important;
stroke-opacity: 1 !important;
}

but I also found that the size of the folder icon is now, on V3.3+, way smaller than in v3.1 and earlier. How can I revert to the former size of the icon?