Changing icons with css

luetage

In this example I changed the home button to a flower.

home_button

.theme-light .button-toolbar.home svg {
	display: none;	
}

.theme-light button.button-toolbar.home {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyxpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMi1jMDAxIDYzLjEzOTQzOSwgMjAxMC8xMC8xMi0wODo0NTozMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIEVsZW1lbnRzIDExLjAgTWFjaW50b3NoIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjlGREVCMTZGMzQ5NjExRTc5Q0Q5OEUzRDJDOUU5QjYxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjlGREVCMTcwMzQ5NjExRTc5Q0Q5OEUzRDJDOUU5QjYxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OUZERUIxNkQzNDk2MTFFNzlDRDk4RTNEMkM5RTlCNjEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OUZERUIxNkUzNDk2MTFFNzlDRDk4RTNEMkM5RTlCNjEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5tmquCAAAIBElEQVR42uyYeWybdxnHX78+kjiJcziJ09xnkzSXK9qupWhi2qoIwSjQjhRUcUgFDTHQmKoBRd3KDlgncUwaaAfVFrZCVRRNjI6NdYfoqq2L0i5triZx4sZ1juZwHMd2Dvu1+TxtjLIs7ZLB0P7AqhX7fd/f8/v+vs/3+T6Pq4tGo8on4aUqn5CXIfZhx45bBJRutQt1Op0CmVpHR+eumZnAHXZ7zfeSkhKnNC2iXwuAkyff1JYzolvLW6/Xa1NTU58aHR07FggEGjs6uv8QCmlXAa4x1kdPDZtFFhYWDA7HwO8TE81tJSVFu6enfV9xuS43qqqqrSFU9D8CAhuRoaHhm9l8y/r1Zft5N6emprzodg8fWFgIqQL0fyLWSCSiTE/P7DYajX3JyUmnYEHJzrY9Ozc3V0Oa8vm+WiA3Tg0nikowOZl8Xn5PgPh8M/UWS/K5hISEqKZpCoDa5V4wGCxdRczrV02sEniFJTAUG1RVF+HUmsFgUMRvAGCIMcJ3M4FnJM3RqE7S5Ze14bCWENtncXNN1s7PLyjENXItFBdnigiLsXjvA7J40ujFi73f8Xqnd83NzZdzTYuPj3OS/7/n5Kw7npaWMkJMVYIYjYaJUChsFT/kK8DnrSIfk8nouXZNDQuAy5eHbh4dvbKHlN0EyBS9Xg2YzeZzpaXFv7Ra0x0rpoaF0cnJqR/Ozs5tyc1d93R2dtbzsOEdGho52NJytocSvZfNhSVSkXya4JvRhUGvNyh+f/Amli8kJib2wo4AKHv77ZY3urouvsYz9rS0tFcLCvJ/bbFY3uKg3woGZ6uF8Q8wQhAdG0RstswjBHkYBp6wWtO8pEgh7+mXLrnuBNBhvz9g37Rp496cnOyjVM4hfGQnfDYPDrruysjIOJmSYpns73du7enpOwErnbW1Gz7DgVpUVa/AlnLhQtehyUmPj+dOkQBdrISXM6Lm5+cdIcAEJzkGM0Kxwik9tbXVv6iurvwcJbuns7P7cHp6miMzM+Npp3Pwt93dPQfRQH1BQe7P2MQKiBdJ5+lt2zbfkpub0wLQq+kcGBjcBuD7i4sLHxLASEG/Ymq4oSYlmWcqK9d/g6poaGtrPwKFJgki+S4sLHilrKzk27Cwf3x8oq6qav1+dDTD5wco3/0A63S53I+jA29FRXljSkpKRNYZDPrI4ODl7Rzg1YwMKzGKf7UUxIrli6AM6OOflZXlt3s8U199993WFoejvxEm0mdnZxXuNSUkxJ8fGLh0wGxO8NnttbcXFubvramp+g2Ayq9cGdtTVFRwgHKe9/v9JtJXe/58x+9g+HRWVsbrdXUb9sCQANRdt3yXMKPn9CdIyaa+vv5HHA5nE++gyWRyc7ogFVWMdhIDgVkTKepPS0vtR3gINlAr612uocO47EEOlUrJ5nBphCq5p7S06DEBsbRsbwhE0BLAAI09bPJl2CiGne0wUgHTcTabrYlO+xbi0zCORW/RRRHla6TqC6TTHgqFUhD/WGqqpRV2WqiyoKQ+Go0YbjgGrPQSMLzCmZlWJ8GcNDpFlA6AaFxc3FXmYoOVgOeajzS9hMhfAuC/n4NFSblOiuFD55GVOqy8KeVq6n4vuW8AWC7BOKjRTWmfqKqqvB9j02KG6HYP1SPKwzBSC8hERO6DuTZE/Jd162zNpDooh1t10yNoWPoRAnsQpbcND480IrQ3afd3V1SU7RWWxscnG8WJOXmEjTE1PT0nko9OGqigZ9DED/Cap7hmwVf+eObM2bPE2cpz4VUxcq2FR40o/c9jY+M7KeXvo5Um5o556Tkejyeut7f/KGV8COrDra3vHWDzr23cWPclNPIG4p6Q1sC65zQtrODED+HWdX19jsfa27tOI/RdgPxrTFvXZURst7u77wFA7KI0b8V8nqJMF66VdkhxOl1NfAyw6ZN4RsPUlPdhhJnX0dF1lFTMUbr3UrL3YXSf1elUaYYqz17YvHnjjtTU1L8B9NjY2ETFcmbUZQNPGE3UkeufbNhQsQ9XPCWdVrSIwVk40bM0sDtw2N2IUOPZJxgFjtfVVX86GJzbQgruKi8veQYG/0RaX6Yt3IamrgZgXAhj91/Hg9yw8zjgdUsHqOUWr0xMeH4KoAHK7XnK1iwmRUf+0TvvtHQPD49+HoANnPoMm36RHlRUVVVxX15ebjeV9eTIyJV7ZISkHXxT0on1nyR1TfSoTT6f30z7n4Wdn8/M+G/DDuxLB6j3jQGgVHkoF2UXtrae60eLBsBZuRfMysp8DvE9ihBd0ghxzZ2c7iza6ZED0CybAf1dr9dXYrNl9dbX19wJY/+gin7c3t4pU5wHjfnQRrLsR4kX8Oe9FbuviBGasfNpOw+WkxYtKSnJgYecw0HHhWUpP66HA4FgBfe6KF/8RFOYMfpEpLT8Iu73srGeKnuBLv6C1+ut5YB2GmMmz3vRXDsH6ljsN9oHqkbA0BVHFgegl68xJa4ZVWIqF+aEAf6Z+LwQGz1l8lrMrlHWSCxZw8aMFllsnNW+9Ecl4PVL+41hhT5jiNxg9JXFMviQbzenz8MnFGESBnPE7Lg+snRDcVNYVD+WKV7GAiat1/GPraTIIhbu8/luhZVp0ti7vLN+bD8nZCMs+7gM0LjlPipAj3fcTQqa4+Pj/dLcPvJv3zX+rtEzgQ0jxAcxtUco2wYcNJ6yPgRb0rn/a4xEV8GKis0/it+8gndsz8/P3Uda3IDQf8j6Fe/p/v//I8te/xJgANtKuotMhXU0AAAAAElFTkSuQmCC);
}

Notes:

Unfortunately it isn't possible to create a svg path in css, that's why we have to work around it.
You can exchange any svg icon with this method, but there are drawbacks. Since the new icon is a background image, it won't change its color when you change the theme.
Background images could be loaded from a website or your computer, but I suggest using an image to data-uri converter instead.

Tiamarth

@luetage

You can exchange any svg icon with this method, but there are drawbacks. Since the new icon is a background image, it won't change its color when you change the theme.

If you wanted to put in the time and the effort to do it, you could simply target the window on each state: .theme-dark, .theme-light, .acc-dark, .acc-light, .color-behind-tabs-on, etc to change the image based on the theme and/or accent. That's how I did AFV's window controls. See the css: http://tiamarth.com/skins/arc-for-vivaldi/arc.css starting around line 60

Arc has three variations, one dark, one light, and a hybrid of the two. So it was necessary to change AFV's window buttons based on whether the window was dark or light, whether the accent was behind the tabs, and so on, in order to make it properly integrate with Arc.

Also, the loading indicator for Vivaldi Hooks declares loading.svg as simply as:

div.tab-header span.progressing + span.favicon {
    background-image: url(/hooks/loading.svg) !important
}

loading.js doesn't seem to have anything to do with the svg path. Why is it working for Hooks but not otherwise?

luetage

Yes, you can make icons for dark/light themes, in case of panel icons you can create different ones for active/inactive states, for the bookmark icon in addressbar you can make one for the filled state and one for the regular one, etc. It's all possible. But if you really want to mess with all of them at the same time, it might be a better idea to use javascript. This was meant as a simple workaround if you want to exchange one or two icons for your theme, without any js.

edit: and yeah, that's an interesting question. I guess you can load svg files with a css file, but you need to save the file elsewhere. A good possibility, but then you can't keep your setup to just one css file, at which point you can just start running hooks.

Dantesoft

SVG in CSS should work, either encoded data:image/svg+xml;base64,… or just url-escaped:

  body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M224%20387.814V512L32 320l192-192v126.912C447.375 260.152 437.794 103.016 380.93 0 521.287 151.707 491.48 394.785 224 387.814z'/%3E%3C/svg%3E")
  }

luetage

Both suggestion (yours and tiamarth's) introduce the svg as a background image. As far as I know the Vivaldi code still won't alter it in this case (themes, active/inactive states, etc.).
But yeah, good to know nevertheless, and if you have more information on this please let me know. If we could really make it work with just css this would be awesome.

Hadden89

edit, forgot this

luetage

Hey, I read the post you deleted, what's wrong?

Hadden89

@luetage said in Changing icons with css:

Hey, I read the post you deleted, what's wrong?

Actually it didn't work very well.
The source svg I used worked (with colour change) editing with dev tools, but at the restart the changing colour wasn't respected when hooked - the image is fine, but don't change colour on light theme. So, probably the best way is to have to image of same icon for light and dark and try to hook them both.
I drop the post not to share misleading/imcomplete codes

luetage

If you change a color with devtools the change cannot stick. But you can potentially style the svg with css. Could also work for dark/light. For the back button you would also have to code the inactive state. Haven't tried it, let me know how it goes.

Hadden89

@luetage said in Changing icons with css:

If you change a color with devtools the change cannot stick

Yup, I've noticed it xD

But you can potentially style the svg with css.

Yes, probably as the image has a fill=hexcolor to set the color, but I don't know change it by css state.
Taking this in consideration, how can I make switch its colour white (on dark) to black (on light theme)? Or I always need two background images, eg: back_light, back_dark?

.button-toolbar.back svg {
	display: none;	
}
.button-toolbar.back {
	background-image: url(/hooks/back.svg);
	background-size: 22px;
}

luetage

Give me a link to your back svg file and I try. The problem I see is that it's a background image, don't know how to talk to that -- could as well be that you need to make an extra file for all possible states/colors and load them extra. In this case it wouldn't matter if you use a svg file or a png.

How did you change the color in devtools, and what did you change exactly?

Hadden89

@luetage I take back from here - svg download with white "fill" color.

The full code I used in dev tool to switch color in back was this, but strangely now seems not to work anymore (also in dev tools); I'll try also to disable the whole toolbar tweaks.css code to know where is failing now

.button-toolbar.back svg {
	display: none;	
}
.button-toolbar.back {
	background-image: url(/hooks/back.svg);
	background-size: 22px;
}

.acc-dark .button-toolbar.back svg {
	display: none;	
}
.acc-dark .button-toolbar.back {
	background-image: url(/hooks/back.svg);
	background-size: 22px;
}

Hadden89

Testing with dev tools.
This seems to bring some changes.. I'll see at restart what happens.
Themes without accenting options in themes works fine.
About vivaldi stock themes, only olive and redmond to get the right color (still had them as workaround) need a duplicate of the same theme, with the same colors but without accents on in-theme.

.acc-light .button-toolbar.back svg {
	display: none;	
}
.acc-light .button-toolbar.back {
	background-image: url(/hooks/back-light.svg);
	background-size: 22px;
}

.acc-dark .button-toolbar.back svg {
	display: none;	
}
.acc-dark .button-toolbar.back {
	background-image: url(/hooks/back-dark.svg);
	background-size: 22px;
}

This way probably works well. Testing hooked. Seems ok.
Not direct, using two files for the same button, but it seems to work if one don't use accent options in themes.

Tiamarth

@Hadden89 You can also use .color-behind-tabs-on to target themes where the accent is applied to the window. Something like this would cover states where the overall theme is light but the accent is dark and applied to the window, or where the theme is dark:

.theme-light.acc-dark.color-behind-tabs-on .button-toolbar.back,
.theme-dark .button-toolbar.back {
    background-image: url(/hooks/back-dark.svg);
    background-size: 22px;
}

Hadden89

@Tiamarth Yes, I was just wondering how do that. I'll try.
The arc.css was a very useful lecture for this purpose xD

This seems to work with any combo of accent/theme/color.
A bit ugly maybe, but works

.acc-light .button-toolbar.back svg {
	display: none;	
}
.acc-light .button-toolbar.back {
	background-image: url(/hooks/back-light.svg);
	background-size: 22px;
}
.theme-light.color-behind-tabs-on .button-toolbar.back svg {
	display: none;	
}
.theme-light.color-behind-tabs-on .button-toolbar.back {
	background-image: url(/hooks/back-light.svg);
	background-size: 22px;
}
.acc-dark .button-toolbar.back svg {
	display: none;	
}
.acc-dark .button-toolbar.back {
	background-image: url(/hooks/back-dark.svg);
	background-size: 22px;
}

Nightly noob question:
there is any difference from
.example1.example2 to
.example1 .example2 in css?
I usually put a space on every dot, but for .theme-light.color-behind-tabs-on didn't work with that.

Tiamarth

@Hadden89 I'm glad it was helpful Although I'm changing the window buttons with Arc using a slightly different method than the one luetage describes here. As he mentioned, my method requires a bit of extra javascript and his only requires css. (I'm modifying the content attribute where he's modifying the background attribute.)

Christoph142

Just as a general idea: if you only want to use one single picture, why not style it with CSS filters?

luetage

@Christoph142 Interesting idea, problem is that the hover will be inverted too. You can circumvent this by setting the background color to the inverted initial color by hand for the button you change, but this would have to be done for every single theme. Couldn't find a way to automate the inversion of the hover background color, because the image is part of the background and will therefore be inverted too. I'm probably overlooking something though.

luetage

deleted, solution had already been provided by Tiamarth, I didn't pay attention

Just as an addition: the toolbar buttons also have to be scaled in the :active state.
e.g. .button-toolbar.home:active {transform: scale(0.85)}
Overall I think it's reasonable to exchange buttons with css (and I will continue running code for it), but probably not worth the trouble. Especially when using VivaldiHooks it should be better to use javascript for this, as it automatically scales and chooses color depending on the used theme (-- not limited to dark/light).

Hadden89

Another little tweak; quite useless, but nice

/* Shift color on mouse hover */
.button-toolbar:hover, .vivaldi-addressbar:hover {
  filter: hue-rotate(90deg);
}

/* Same for panel buttons */
#switch button:hover {
	 filter: hue-rotate(320deg);
}