Changing icons with CSS / part II

CantankRus

Is it possible to change the functionality of the trash icon with css.
Would rather it opened the "clear private data" dialog.

burbuja

@cantankrus Impossible with CSS and probably even very hard / impossible with JavaScript. To ask for this, create a new topic in modifications

CSS is responsable for the look, not for the functionality.

burbuja

@cantankrus Ctrl + Shift + Del

CantankRus

@burbuja
On linux Ctrl + Shift + Del doesn't work when the address bar or a text input field is focused.
Looking for a mouse one click solution.

burbuja

@cantankrus F9 focuses the page.

What about a Private Window?

Combinations of mouse + keyboard are not yet supported.

CantankRus

@burbuja
Interesting.... I found F9 didn't work when a text field on the page was already focused like on google.com.
However hitting Escape before ctrl+shift+Del works for both address and page input fields.

I was able to bind a shortcut key to automate this behaviour using xdotool.
Command for any curious linuxers...

xdotool sleep 0.2 key Escape ctrl+shift+Delete

Thanks for the hints.

burbuja

@cantankrus Ok, I expected your addressbar would be focused ....
But I am happy, if I could help you with my hint.

burbuja

download in progress

I have changed a bit the download icon:

button.downloads svg path {
d: path("M 10.513672 3.1113281 L 10.513672 11.21875 L 5.5410156 11.21875 L 13 20.949219 L 20.458984 11.21875 L 15.486328 11.21875 L 15.486328 3.1113281 L 10.513672 3.1113281 z M 3.7832031 23.367188 L 3.7832031 26 L 22.216797 26 L 22.216797 23.367188 L 3.7832031 23.367188 z");
fill: none;
stroke: var(--colorAccentBg);
stroke-width: 2px;
}

But there is a glitch while download in progress:

How can I fix it?

luetage

@burbuja It's another part of the icon, because the display has to change to show you the progress. I would inspect it while something is downloading and work from there.

burbuja

Hi, in todays snapshot 1.15.1146.5 32bit I see a strange behavior while using the inspector, my customized hystory-panel-button changed to its previous also customized version, which I have commented in my.css:

/* clock
button.history svg path {
d: path("M 13,0.9106789 13.055917,12.90177 20.439282,20.07608 M 25.089321,12.999998 C 25.089323,19.676746 19.676749,25.08932 13,25.089321 6.323251,25.08932 0.91067728,19.676746 0.91067894,12.999998 0.91067944,6.3232516 6.3232525,0.91067942 13,0.9106789 19.676747,0.91067945 25.089321,6.3232517 25.089321,12.999998 Z");
fill: none;
stroke: var(--colorAccentBg);
stroke-width: 2px;
}
*/
button.history svg path {
d: path("M 8.781581,14.47988 C 6.6620045,12.947464 7.3365996,9.785073 9.073897,8.2662064 11.772222,5.9071434 15.927146,6.886418 17.967017,9.5986587 20.670746,13.193579 19.366315,18.333639 15.78286,20.800117 11.367259,23.839357 5.2550743,22.235858 2.3823686,17.880477 -1.0094653,12.738033 0.88759454,5.7460683 5.9943372,2.5128668 11.856583,-1.1986601 19.737812,0.96376425 23.336278,6.7453875 26.617803,12.017785 25.71839,18.985111 21.471226,23.452311");
fill: none;
stroke: var(--colorAccentBg);
stroke-width: 2px;
}

Could somebody try it and explane me, what is going on, please? I dont get it at all. Thank you a lot.

luetage

@burbuja Comments can't be executed, the changes you are seeing have to come from somewhere else. I would reinstall the application and apply the mods again, just to make sure.

burbuja

@luetage sure, I know commented css cannot be executed, but I have the same problem in my standalone installation of the same snapshot. I think, it has to do with the bug, that some parts of the UI stay focused, even the mouse is not any more hovering them.
Before I use the tool, everything works as expected.

luetage

@raed You're in the wrong thread. This is about changing icons.

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