Changing icons with CSS / part II



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

    0_1522628958024_notes03.svg.png



  • 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");
    }
    

    0_1522631112154_sync.png

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

    0_1522661836667_history.png



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

    0_1522662771346_download.png



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

    0_1522664070818_bookmarks.png



  • 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:
    0_1522664750262_5-icons.png



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

    0_1522794902778_histoy02.png



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

    0_1522805925997_new-folder-note.png



  • 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



  • @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.



  • @cantankrus F9 focuses the page.

    What about a Private Window?

    Combinations of mouse + keyboard are not yet supported.



  • @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.



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



  • 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:
    0_1522977477525_download-progress.png

    How can I fix it?


 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.