Changing icons with CSS / part II

luetage

Anyway, I don't know why we get a myriad of off-topic posts here. Please only post your paths for css icons here, or questions about changing icons.

@burbuja You can post modding related questions on the modding forum board, this is the same forum board we are on right now. Just click "Modifications" on the top of this site and you will be taken to the subforum, where you can open a new topic.

burbuja

@raed Thank you, but I meant Shift + arrows -- Spatial navigation in the page, instead of with the mouse.

burbuja

My notes-icons:

button.notes svg path {
	 d: path("M 1.2120945,23.694384 C 1.3947694,23.328881 18.08458,1.6554648 18.08458,1.6554648 L 24.717642,6.0722453 19.666588,12.361451 C 15.094131,9.8168399 5.783758,21.6647 1.2120945,23.694384 Z");
	 fill: none;
	 stroke: var(--colorAccentBg);
	 stroke-width: 2px;
	 }

0_1522628958024_notes03.svg.png

burbuja

New sync icon:
at tab-bar:

button.button-tabbar.synced-tabs-button svg.sync-in-progress path {
	d: path("M 15.875,7.3541667 10.509434,4.7083337 V 6.4722224 H 3.8024807 V 8.2361111 H 10.509434 V 10 Z M 0,2.8562499 5.3655634,0.21041686 V 1.9743055 H 12.072516 V 3.7381942 H 5.3655634 V 5.5020834 Z");
}

at status-bar:

svg.sync-in-progress path.cloud {
	d: path("M 15.875,7.3541667 10.509434,4.7083337 V 6.4722224 H 3.8024807 V 8.2361111 H 10.509434 V 10 Z M 0,2.8562499 5.3655634,0.21041686 V 1.9743055 H 12.072516 V 3.7381942 H 5.3655634 V 5.5020834 Z");
}

There is someting wrong with the tabbar-sync-icon. Anybody could help me?

burbuja

History button:

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;
}

burbuja

Download button:

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;
}

burbuja

Bookmarks button:

button.bookmarks svg path {
d: path("M 7.2551811,4.4428808 C 3.4767989,4.442669 0.41376195,7.5057056 0.41397353,11.284088 1.6670974,18.420737 9.3704073,18.256107 12.996794,21.55712 17.316663,18.230969 25.420006,16.756003 25.586026,11.284088 25.586238,7.5057056 22.523201,4.442669 18.744819,4.4428808 16.42319,4.4454766 14.261329,5.6253869 13.003206,7.5765638 11.743849,5.6234755 9.5790862,4.4433001 7.2551811,4.4428808 Z");
fill: none;
stroke: var(--colorAccentBg);
stroke-width: 2px;
}

burbuja

Tabs button:

button.tabs svg path {
d: path("M 4.8348669,4.0219312 V 6.2798648 H -0.00100676 V 21.978069 H 26.001007 V 6.2798648 H 12.524959 V 4.0219312 Z");
fill: none;
stroke: var(--colorAccentBg);
stroke-width: 2px;
}

all five icons:

burbuja

I use this icon for History, bekause I dislike the watches, may be you like it as well. Sure, its a question of imagination or a metaforic sense.

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;
}

burbuja

new tab / note icon:

button.button-toolbar.note-new svg path {
d: path("M 11.333333,11.333333 V 8 h 3.333334 v 3.333333 H 18 v 3.333334 H 14.666667 V 18 H 11.333333 V 14.666667 H 8 V 11.333333 Z M 4.8348668,4.0219311 V 6.2798647 H -0.00100688 V 21.978069 H 26.001007 V 6.2798647 H 12.524959 V 4.0219311 Z");
fill: none;
stroke: var(--colorFg);
stroke-width: 2px;	
}

new window icon:

button.button-toolbar.note-folder svg path {
d: path("M 11.333333,11.333333 V 8 h 3.333334 v 3.333333 H 18 v 3.333334 H 14.666667 V 18 H 11.333333 V 14.666667 H 8 V 11.333333 Z M 4.8348668,6.2798647 H -0.00100688 V 21.978069 H 26.001007 V 6.2798647 H 12.524959 Z");
fill: none;
stroke: var(--colorFg);
stroke-width: 2px;	
}

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.