Changing icons with CSS / part II



  • Trash button with fixed transform: translate

    .button-tabbar.toggle-trash svg g path {
    	d: path('M 6 8 h14 v2 h-14 Z M 6 12 h14 v2 h-14 Z M 9 16 h8 v2 h-8 Z');
    }
    .button-tabbar.toggle-trash svg g {
    	transform: translate(0px, 0px) !important;
    }
    

    0_1503900078295_Screenshot 2017-08-28 08.00.53.png



  • @luetage said in Address Bar at very top:

    @retoree You have some nice modifications going on there. I see you're using my trash button and @sjudenim's menu button. Care to share your own creations back to the changing icons thread thread? I like what you've done with the bookmark and home buttons.

    Home button:
    0_1512050123058_f6892917-f4bb-4be8-b679-44909b0d6faf-image.png

    .button-toolbar.home svg path {
        d: path('M25 7.813l-12.5-6.25-12.5 6.25 12.5 6.25 12.5-6.25zM12.5 3.637l8.351 4.176-8.351 4.176-8.351-4.176 8.351-4.176zM22.496 11.248l2.504 1.252-12.5 6.25-12.5-6.25 2.504-1.252 9.996 4.998zM22.496 15.936l2.504 1.252-12.5 6.25-12.5-6.25 2.504-1.252 9.996 4.998z');
    }
    

    Bookmark button:
    0_1512050271017_2b718f4f-5471-4026-ad35-1e61f8e77ac3-image.png
    0_1512050323272_f80bef57-bf05-4bf5-8a26-8ffce29823e8-image.png

    .button-addressfield.bookmark svg path {
        d: path('M10.325 0.875c-1.472 0-2.738 1.197-3.325 2.447-0.587-1.25-1.854-2.447-3.325-2.447-2.029 0-3.675 1.647-3.675 3.675 0 4.127 4.163 5.209 7 9.289 2.682-4.055 7-5.294 7-9.289 0-2.029-1.647-3.675-3.675-3.675z');
    }
    .button-addressfield.bookmark.bookmarked svg .bookmark-outline {
        fill: rgb(218, 93, 93);
    }
    .button-addressfield.bookmark.bookmarked:hover svg .bookmark-outline {
        fill: rgb(234, 64, 64);
    }
    

    Also check Narsis post below for Bookmarks side panel icon.
    alt text



  • @retoree How do you make the buttons smaller? Can you send me the css?



  • A couple more alternatives...

    Vivaldi menu icon (at the top left):

    0_1511407037141_vivaldi_menu_icon_example.png

    Gets rid of the squircle background and scales it up a bit.

    #titlebar > button > span.application-icon > svg path,
    #titlebar > button > span.vivaldi-v > svg path {
        d: path('M16.42 8.64l-4.17 7.23a1.39 1.39 0 0 1-1.15.76 1.33 1.33 0 0 1-1.32-.7c-.88-1.51-1.75-3-2.62-4.54l-1.6-2.77A1.4 1.4 0 0 1 6.7 6.51a1.34 1.34 0 0 1 1.3.72l1.17 2c.28.48.55 1 .84 1.45a2.2 2.2 0 0 0 1.84 1.14 2.24 2.24 0 0 0 2.36-2v-.23a2.34 2.34 0 0 0-.24-1 1.4 1.4 0 1 1 2.62-.87 1.46 1.46 0 0 1-.17.92z');
    }
    #titlebar > button > span.application-icon > svg,
    #titlebar > button > span.vivaldi-v > svg {
    	height: 100%;
    	width: 100%;
    }
    .vivaldi {
        position: relative !important;
        top: -3px !important;
    }
    

    Bookmarks side panel icon:

    0_1511407476534_vivaldi_side_panel_bookmark_icon_example.png

    To match this because consistency is nice.

    .bookmarks svg path {
    	d: path('M10.325 0.875c-1.472 0-2.738 1.197-3.325 2.447-0.587-1.25-1.854-2.447-3.325-2.447-2.029 0-3.675 1.647-3.675 3.675 0 4.127 4.163 5.209 7 9.289 2.682-4.055 7-5.294 7-9.289 0-2.029-1.647-3.675-3.675-3.675z');
    	transform: translate(6px,8px);
    }
    

    Notes side panel icon:

    0_1511407708947_vivaldi_side_panel_notes_icon_example.png

    Makes it easier to find the panel imo.

    .notes svg path/*, .bookmarks.active svg path*/ {
    	d: path('m23.90625,3.96875c-1.04688,0 -2.09375,0.40625 -2.90625,1.21875l-15.8125,15.8125l-0.0625,0.3125l-1.09375,5.5l-0.3125,1.46875l1.46875,-0.3125l5.5,-1.09375l0.3125,-0.0625l15.8125,-15.8125c1.625,-1.625 1.625,-4.1875 0,-5.8125c-0.8125,-0.8125 -1.85938,-1.21875 -2.90625,-1.21875zm0,1.90625c0.50391,0 1.01172,0.23047 1.5,0.71875c0.97266,0.97266 0.97266,2.02734 0,3l-0.71875,0.6875l-2.96875,-2.96875l0.6875,-0.71875c0.48828,-0.48828 0.99609,-0.71875 1.5,-0.71875zm-3.59375,2.84375l2.96875,2.96875l-12.09375,12.09375c-0.65625,-1.28125 -1.6875,-2.3125 -2.96875,-2.96875l12.09375,-12.09375zm-13.375,13.71875c1.19922,0.48438 2.14063,1.42578 2.625,2.625l-3.28125,0.65625l0.65625,-3.28125z');
    	transform: scale(0.68,0.68) translate(3px,4px);
    }
    

    Depending on what other mods you use you might need to tweak the scaling and positioning a bit.



  • @Narsis Nice work on these icons!

    In other news the sync icon has been leaked on some screenshot. Can't remember where anymore. It's just the standard cloud icon. Does someone have an idea for an icon representing sync, that isn't a cloud? I've looked around and the options aren't plentiful.



  • @narsis thanks for notes, I actually have bookmark icon in panel, just forgot about it.


Log in to reply
 

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