Changing icons with CSS / part II

burbuja

LonM

@raed The tricky thing is that extensions very likely won't use SVGs for their Icons, so you can't use the fill property.

The best bet would be to see this thread about changing panel icons (you'll need to change the selectors but changing the image should be the same).

You could then make your own custom image.

sjudenim

@raed

Those are 2 different states you're talking about. The addition of .bookmarked is the colour of the icon when you are viewing a saved page. What you want is for unsaved pages, which is why you remove the .bookmarked part.

As for the hover, don't forget that it is often times necessary to use !important

.button-addressfield.bookmark:hover svg .bookmark-outline {
    fill: var(--colorHighlightBgDark) !important;
}

There is also another selector that was not mentioned that can add a nice effect for the existing bookmark icon

.button-addressfield.bookmark svg .bookmark-animated-fill {
    fill: var(--colorHighlightBgAlpha);
}

sjudenim

@raed

no problem.

Since you're adding a hover effect to the icons in address bar, here's the other selectors for the icons found inside the address and search bars

.addressfield button.button-addressfield.input-dropdown:hover svg,
.button-addressfield.reader-mode:hover svg,
.button-addressfield.bookmark:hover svg .bookmark-outline,
.searchfield .search-engines:hover svg,
.searchfield .search-history:hover svg {
    fill: var(--colorHighlightBgDark) !important;
}

This should theme everything in there to make it look complete

burbuja

Hi, I changed the "new tab icon"witht this code:

button.button-tabbar.newtab svg path {
d: path("M 4.6666667e-6,0.12498045 15.875005,8.0624803 4.6666667e-6,15.99998 10.583338,8.0624803 Z");
fill: red !important;
}
button.button-tabbar.newtab:hover svg path {
	fill: green !important;
}

How can I make it a bit bigger? The original svg is only 16 x 16

luetage

@burbuja By changing the width, height and viewbox.

burbuja

Original home button:

button.button-toolbar.home svg path{
  d: path("M 13,4 2.5,14 H 6 V 22 H 20 V 14 H 23.5 L 18,9 16,7 Z M 18,20 H 15 V 15 H 11 V 20 H 8 V 11.531 L 13,6.8 18,11.531 Z");
}

burbuja

@raed great idea with the chimney

burbuja

Alternative home-button in form of a flame of chimney.
The idea was: home -- chimney -- flame in it.

button.button-toolbar.home svg path{
d: path("M 8.4493319,17.20534 C 3.7875194,5.4005603 13.868539,0.12444029 13.902412,0.10670029 14.812711,2.4808803 15.067052,2.8047003 17.322144,8.1476803 18.62605,11.23701 19.209239,14.81745 18.431242,18.03718 17.673521,21.17299 15.77664,23.63666 14.087265,25.8933 L 15.10394,18.68413 C 15.377507,16.74429 15.041565,13.38968 13.255439,11.84469 12.668738,11.33721 11.543912,11.23209 10.944808,11.56741 10.10382,12.03812 9.2811578,14.84513 8.4493319,17.20534 Z");
fill: blue;
}

burbuja

back-button:

button.button-toolbar.back svg path {
d: path("M 19.477778,22.044444 17.522222,24 6.522222,13 17.522222,2 19.477778,3.9555556 10.677778,13 Z");
}

forward-button:

button.button-toolbar.forward svg path {
d: path("M 6.522222,22.044444 8.477778,24 19.477778,13 8.477778,2 6.522222,3.9555556 15.322222,13 Z");
}

reload-button:

button.button-toolbar.reload svg path {
d: path("M 20.529013,16.245264 C 19.230907,19.101096 16.375075,21.307876 13,21.307876 8.4566299,21.307876 4.6921234,17.54337 4.6921234,13 4.6921234,8.45663 8.4566299,4.6921235 13,4.6921235 15.33659,4.6921235 17.283749,5.6007975 18.841476,7.1585244 L 15.20678,11.052841 H 24.033899 V 1.9661016 L 20.788634,5.2113658 C 18.841476,3.2642073 15.985643,1.9661016 13,1.9661016 6.8989031,1.9661016 1.9661016,6.8989032 1.9661016,13 1.9661016,19.101096 6.8989031,24.033899 13,24.033899 17.932801,24.033899 22.08674,20.658824 23.514656,16.245264 Z");
}

I made all three a bit bigger:

burbuja

@raed How can I change the order of the toolbar-buttons?

burbuja

@raed Dont I need also javascript?

burbuja

@burbuja Great, I dont. It works. Thank you!

burbuja

I find this order more logic:

button.button-toolbar.back {
	order: 1;
}
button.button-toolbar.rewind {
	order: 2;
}
button.button-toolbar.reload {
	order: 3;
}
button.button-toolbar.next {
	order: 4;
}
button.button-toolbar.forward {
	order: 5;
}
button.button-toolbar.home {
	order: 6;
}

burbuja

@raed Indeed, it looks better. The original arrow is too big.

burbuja

My own reload button, inspired by you:

button.button-toolbar.reload svg path {
	d: path("M 4.8051075,12.752007 C 4.9616095,9.6188998 6.8053723,6.5162891 9.9437768,5.2746979 14.168552,3.6033253 19.053931,5.7190012 20.725304,9.9437763 22.396676,14.168551 20.281,19.053931 16.056225,20.725303 13.883484,21.584866 11.738591,21.456214 9.7170543,20.580762 L 11.185489,18.75127 3.4561349,18.869667 7.7599627,25.425641 8.6227394,23.107682 C 11.149659,24.201998 14.282768,24.358499 17.059048,23.260168 22.732318,21.015754 25.504583,14.614222 23.260169,8.9409529 21.015754,3.2676842 14.614222,0.49541735 8.9409529,2.739832 4.3540548,4.5544648 1.7329938,9.2209816 2.0288268,13.850338 Z");
}

burbuja

@raed I remove these in inkscape svg editor

burbuja

Would somebody know, how to change the color of focus in spatial navigation?

Sorry I dont know where can I create a new Topic in English

luetage

@raed burbuja is talking about spatial navigation, has nothing to do with buttons. I don't know the answer to that, since spatial navigation is happening on the webpage, not the Vivaldi UI

LonM

@luetage I'm pretty sure there used to be a class associated with the spat nav - that would be easy to change with CSS. But looking at it now, there's no indication on a page as to how a link is highlighted, and it definitely doesn't happen in the browser.