Changing icons with CSS / part II
-
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; }
-
@raed Indeed, it looks better. The original arrow is too big.
-
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"); }
-
@raed I remove these in inkscape svg editor
-
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
-
@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
-
@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.
-
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.
-
@raed Thank you, but I meant Shift + arrows -- Spatial navigation in the page, instead of with the mouse.
-
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; }
-
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?
-
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; }
-
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; }
-
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; }
-
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:
-
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; }
-
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; }
-
Is it possible to change the functionality of the trash icon with css.
Would rather it opened the "clear private data" dialog. -
@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.
-
@cantankrus Ctrl + Shift + Del