Changing icons with CSS / part II

[sjudenim]

@burbuja

You might have something else going on there, it's working for me. Try just running that bit of code and see

[burbuja]

@sjudenim Hi, thank you a lot I found the problem:

I had "Enable CSS source maps" enabled.

OMG!!!

[CantankRus]

@raed
Well done.

[lamarca]

@burbuja Thanks for seven the Icons, Antonin. Job well done.
I am missing two of them. What are my chances to complete the Panel?

[burbuja]

@lamarca Hi friend, where do you have these icons from? I dont have them. What have I to do to add them?

Panel icons are not SVGs and cannot be changed, but any way, answer my question please. (Mail, Contacts)

I am very happy, you use my icons.

[luetage]

@burbuja Panel container buttons show normal icons with svg path. Of course they can be changed, as you have done with all the other ones (paths on previous pages).

@lamarca You will have to provide the selectors, since only testers have access to these icons. https://forum.vivaldi.net/topic/16684/inspecting-vivaldi-s-ui-with-devtools

[lamarca]

@burbuja said in Changing icons with CSS / part II:

@lamarca Hi friend, where do you have these icons from? I dont have them.

Hi friend, these icons are from the internal builds.

@burbuja said in Changing icons with CSS / part II:

What have I to do to add them

I don't know the answer.

@burbuja said in Changing icons with CSS / part II:

Panel icons are not SVGs and cannot be changed, but any way, answer my question please. (Mail, Contacts)

Mail is icon for M3 - Vivaldi built-in mail client
Contacts is the icon for Mail

@burbuja said in Changing icons with CSS / part II:

I am very happy, you use my icons.

I have been using your works for a very long tine

[burbuja]

@luetage I dont see any svg path here:

[burbuja]

@lamarca you know, I dont have any internal builds, because I am not a soprano ...

[burbuja]

@lamarca Send me screenshots from the inspector and I can do it anyway I need only the paths

[luetage]

@burbuja chrome://settings/passwords is not a "pre"-displayed button/icon, it's a webpanel you loaded yourself. Webpanels are different to the bookmarks/notes/download/history/window buttons, they indeed have icons instead of svgs with paths. The svgs you have edited before and we are talking about have paths. So do the ones @lamarca mentions.

History as example:

And yeah, as said before, for you to do these buttons lamarca has to look up the selectors. But it's very likely they are simply button.mail svg path and button.contacts svg path. But no way to tell until someone checks/tries it out.

[burbuja]

@luetage Thank you, I will try, but I cannot prove the result ... except you give me a link to an internal build.

[luetage]

@burbuja I'm not a tester, but you can make the icons and simply try them on another button to see if they look good/align well. Showing them in the correct place is a burden that can't be laid upon you
And who knows, in a few months/years you can even use them yourself lol.

[lamarca]

@burbuja said in Changing icons with CSS / part II:

@lamarca you know, I dont have any internal builds, because I am not a soprano ...

Antonin, everyone knows Vivaldi is developing the built-in mail client, that's why I posted the screenshot for you.
I am sorry, I can't do more than posting a tiny image.

Saludos

[lamarca]

@burbuja said in Changing icons with CSS / part II:

@lamarca Send me screenshots from the inspector and I can do it anyway I need only the paths

Don't even think of it.

[burbuja]

@lamarca
email-button

button.mail svg path {
d: path("M 1,11.187276 13,1.9565071 25,11.187276 V 25.03343 H 1 Z M 2,11.525607 13,20.418046 24,11.345164 Z");
fill: none;
stroke: var(--colorAccentBg);
stroke-width: 2px;
}

Well, I am not sure with the result, but it works. Let me know, if you like it. I will try another/better form of the emal icon

[lamarca]

@burbuja Awesome. I will post the screenshot later.

[lamarca]

@burbuja I loved it, ckeck it out

[burbuja]

Another one:

button.mail svg path {
d: path("M 25.338768,10.810063 Q 25.338768,13.446492 24.516656,15.586818 23.708718,17.71297 22.248761,18.875266 20.802978,20.037562 19.002836,20.037562 17.599575,20.037562 16.83416,19.41389 16.068745,18.79022 16.068745,17.542878 L 16.111269,16.550673 H 16.026223 Q 15.090716,18.294118 13.70163,19.172927 12.326718,20.037562 10.725017,20.037562 8.4996453,20.037562 7.2664772,18.591779 6.0474835,17.145995 6.0474835,14.580439 6.0474835,12.255847 6.9546416,10.257263 7.8759742,8.258681 9.5201982,7.0822103 11.164422,5.9057396 13.163005,5.9057396 16.267187,5.9057396 17.429483,8.4854705 H 17.514529 L 18.067329,6.2175752 H 20.278527 L 18.634302,13.389794 Q 18.109851,15.714387 18.109851,16.975903 18.109851,18.308292 19.257974,18.308292 20.391921,18.308292 21.341602,17.330262 22.305458,16.352233 22.858257,14.637137 23.411057,12.922041 23.411057,10.838412 23.411057,8.301204 22.319632,6.3451443 21.228208,4.3749103 19.172928,3.3260087 17.117647,2.2629328 14.367824,2.2629328 10.937633,2.2629328 8.3012045,3.7795878 5.6647762,5.2962428 4.1622956,8.1594606 2.659815,11.008505 2.659815,14.552091 2.659815,17.28774 3.7654139,19.385542 4.8851872,21.469171 6.9829904,22.588944 9.0949678,23.708718 11.901488,23.708718 13.956768,23.708718 16.068745,23.170092 18.180723,22.645641 20.448619,21.412474 L 21.228208,23 Q 19.172928,24.233169 16.763289,24.871014 14.367824,25.523034 11.901488,25.523034 8.485471,25.523034 5.9199144,24.162297 3.3685323,22.815733 2.0077951,20.321049 0.66123231,17.812189 0.66123231,14.552091 0.66123231,10.583274 2.418851,7.3373486 4.1906443,4.0914234 7.3231747,2.2912815 10.455704,0.47696532 14.339476,0.47696532 17.755492,0.47696532 20.236003,1.7668308 22.716514,3.0425219 24.020554,5.3812888 25.338768,7.7200558 25.338768,10.810063 Z M 16.749114,10.923458 Q 16.749114,9.4776746 15.813607,8.5988653 14.8781,7.7058815 13.318923,7.7058815 11.887314,7.7058815 10.767541,8.6130396 9.6619416,9.5060234 9.0240961,11.107724 8.3862505,12.695251 8.3862505,14.552091 8.3862505,16.253012 9.0524448,17.216867 9.7328134,18.180723 11.136073,18.180723 12.907867,18.180723 14.381998,16.692417 15.856131,15.20411 16.423104,12.978738 16.749114,11.674699 16.749114,10.923458 Z");
fill: var(--colorAccentBg);
stroke: var(--colorAccentBg);
stroke-width: 1px;
}

try the same but with:

fill: none;

May be, you like it better.

[lamarca]

@burbuja I will shutdown to add the new one.