Changing icons with CSS / part II

[luetage]

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

[retoree]

@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:

.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:

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

[Mioni]

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

[Narsis]

A couple more alternatives...

Vivaldi menu icon (at the top left):

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:

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:

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.

[luetage]

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

[retoree]

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

[raed]

@luetage
further to the other thread,

My bad, indeed the ability to swap the Vivaldi icon for a menu icon in the tab bar is available in Vivaldi settings.

I have been playing around with the code in your opening post in this thread, it works for all buttons present in my address bar, except for the bookmarks menu icon, altering various setting either has no effect or simply breaks the bookmarks icon in address bar.

I am working under the assumption that the name of the bookmark element in the address bar is: addbookmarks.

One last thing, to make sure I understand you correctly, is this the code for the vivaldi red icon:

<path d="M24.43 7.53a12 12 0 1 0 0 16.94 12 12 0 0 0 0-16.94zM23.71 13l-5.93 10.35a2 2 0 0 1-1.63 1.08 1.89 1.89 0 0 1-1.88-1C13 21.27 11.79 19.11 10.55 17l-2.27-4a2 2 0 0 1 1.62-3 1.91 1.91 0 0 1 1.83 1c.56 1 1.1 1.92 1.66 2.88.4.69.79 1.39 1.2 2.07a3.13 3.13 0 0 0 2.62 1.62 3.19 3.19 0 0 0 3.36-2.84v-.33a3.35 3.35 0 0 0-.34-1.49A2 2 0 1 1 24 11.69a2.08 2.08 0 0 1-.29 1.31z" fill="#fff" />

edit:

I figured it out, it has to be changed in the .js file and not the .css file for it to work:

setTimeout(function wait(){
    toolbar = document.querySelector("div.toolbar-addressbar.toolbar");
    bookmarkbar = document.querySelector("div.bookmark-bar");
    morebookmarks = document.querySelector("button[title='More bookmarks']");
    if (bookmarkbar != null){
        bookmarkbar.style.width = 0;
    }
    if (toolbar != null && bookmarkbar != null && morebookmarks != null){
        toolbar.appendChild(morebookmarks);
        morebookmarks.classList.add("button-toolbar");
        morebookmarks.id = "addbookmarks";
        bookmarkbar.remove();
        morebookmarks.firstElementChild.firstElementChild.setAttribute("d", "M24.43 7.53a12 12 

0 1 0 0 16.94 12 12 0 0 0 0-16.94zM23.71 13l-5.93 10.35a2 2 0 0 1-1.63 1.08 1.89 1.89 0 0 

1-1.88-1C13 21.27 11.79 19.11 10.55 17l-2.27-4a2 2 0 0 1 1.62-3 1.91 1.91 0 0 1 1.83 1c.56 

1 1.1 1.92 1.66 2.88.4.69.79 1.39 1.2 2.07a3.13 3.13 0 0 0 2.62 1.62 3.19 3.19 0 0 0 3.36-

2.84v-.33a3.35 3.35 0 0 0-.34-1.49A2 2 0 1 1 24 11.69a2.08 2.08 0 0 1-.29 1.31z");
        morebookmarks.firstElementChild.setAttribute("viewBox", "0 0 26 26");
        morebookmarks.firstElementChild.setAttribute("height", "26");
        morebookmarks.firstElementChild.setAttribute("width", "26");
    } else {
        setTimeout(wait, 100);
    }
}, 300);

What I am stuck on now is how to make the Vivaldi icon appear in colour (red with white back ground) and how to resize it.

Regards
raed

[raed]

Note to mod, redundant post kindly delete, I do not have permission to delete myself.

Regards
raed

[Hadden89]

Round back/forward.

.button-toolbar.back > svg path {
  d: path('M293.004,78.525C249.64,3.436,153.62-22.295,78.531,21.061C3.436,64.411-22.296,160.443,21.068,235.542     c43.35,75.087,139.375,100.822,214.465,57.467C310.629,249.648,336.365,153.621,293.004,78.525z M219.836,265.802     c-60.075,34.685-136.894,14.114-171.576-45.969C13.57,159.762,34.155,82.936,94.232,48.253     c60.071-34.683,136.894-14.099,171.578,45.979C300.495,154.308,279.908,231.118,219.836,265.802z M211.986,141.328h-65.491     l17.599-17.603c6.124-6.129,6.124-16.076,0-22.197c-6.129-6.133-16.078-6.133-22.207,0l-44.402,44.4     c-6.129,6.131-6.129,16.078,0,22.213l44.402,44.402c6.129,6.128,16.078,6.128,22.207,0c6.124-6.131,6.124-16.077,0-22.201     l-17.606-17.601h65.499c8.669,0,15.697-7.041,15.697-15.701v-0.008C227.683,148.353,220.655,141.328,211.986,141.328z') !important;
  transform: scale(.08) !important; /*backbutton*/
}
.button-toolbar.forward > svg path {
  d: path('M216.545,145.893l-44.374-44.368c-6.131-6.133-16.076-6.133-22.205,0h0.008c-6.129,6.121-6.129,16.068,0,22.197     l17.589,17.603h-65.485c-8.666,0-15.701,7.033-15.701,15.701v0.008c0,8.668,7.035,15.701,15.701,15.701h65.493l-17.597,17.601     c-6.129,6.132-6.129,16.069,0,22.201c6.122,6.136,16.066,6.136,22.197,0l44.41-44.402c6.128-6.127,6.128-16.078,0-22.209     C216.57,145.909,216.554,145.9,216.545,145.893z M235.533,21.057C160.438-22.291,64.414,3.433,21.063,78.521     c-43.356,75.096-17.633,171.119,57.464,214.483c75.087,43.353,171.119,17.625,214.476-57.47     C336.364,160.443,310.62,64.408,235.533,21.057z M265.801,219.83c-34.688,60.079-111.503,80.657-171.574,45.973     C34.158,231.118,13.565,154.304,48.25,94.229C82.932,34.151,159.756,13.567,219.828,48.25     C279.899,82.934,300.485,159.763,265.801,219.83z') !important;
  transform: scale(.08) !important; /*forwardbutton*/
}

Icons made from Chris Veigt for flaticon.com

[luetage]

@raed You should be able to do this without javascript, but since you are already using js code for the button it doesn't really matter. And yeah, you can color the svg, but I would keep it like it is – the Vivaldi theme color variables assure the button is consistent over all themes you load. In any case, that's your choice. The Vivaldi icon has 2 paths, and each path has a fill for the color (egfill=blue). Just inspect the footer again and you will see how to do it.

[raed]

Note to mod, redundant post kindly delete, I do not have permission to delete myself.

Regards
raed

[luetage]

@raed You need to introduce a second path for this to work. Maybe I'll take a look at it later.

[raed]

@luetage
Do you mean introduce a second instance of

 morebookmarks.firstElementChild.firstElementChild.setAttribute

I tried this form:

 morebookmarks.secondElementChild.secondElementChild.setAttribute

but it messed up the whole thing up for me.

and thanks, which I do not seem to say enough.

Regards
raed

[raed]

delete

[luetage]

@raed As said, without the second path it's futile. This works.

setTimeout(function wait(){
    toolbar = document.querySelector(".toolbar-addressbar.toolbar");
    bookmarkbar = document.querySelector(".bookmark-bar");
    morebookmarks = document.querySelector("button[title='More bookmarks']");
    if (bookmarkbar != null){
        bookmarkbar.style.width = 0;
    }
    if (toolbar !== null && bookmarkbar !== null && morebookmarks !== null){
    	morebookmarks.classList.add("button-toolbar");
        morebookmarks.id = "addbookmarks";
        bookmarkbar.remove();
        var svg = morebookmarks.firstElementChild;
        svg.setAttribute("viewBox", "0 0 34 34");
        svg.setAttribute("height", "34");
        svg.setAttribute("width", "34");
	svg.innerHTML = '<path d="M16 32c7 0 10.91 0 13.45-2.54S32 23 32 16s0-10.9-2.55-13.44S23 0 16 0 5.09 0 2.55 2.54 0 9 0 16s0 10.9 2.55 13.44S9 32 16 32z" fill="#ef3939"></path><path d="M24.43 7.53a12 12 0 1 0 0 16.94 12 12 0 0 0 0-16.94zM23.71 13l-5.93 10.35a2 2 0 0 1-1.63 1.08 1.89 1.89 0 0 1-1.88-1C13 21.27 11.79 19.11 10.55 17l-2.27-4a2 2 0 0 1 1.62-3 1.91 1.91 0 0 1 1.83 1c.56 1 1.1 1.92 1.66 2.88.4.69.79 1.39 1.2 2.07a3.13 3.13 0 0 0 2.62 1.62 3.19 3.19 0 0 0 3.36-2.84v-.33a3.35 3.35 0 0 0-.34-1.49A2 2 0 1 1 24 11.69a2.08 2.08 0 0 1-.29 1.31z" fill="#fff"></path>';
        toolbar.appendChild(morebookmarks);
    } else {
        setTimeout(wait, 300);
    }
}, 300);

[raed]

@luetage !

you made my morning feel like my birthday, Christmas and the day I lost my virginity all rolled into one.
Thank you.

Regards
raed

Edit:

Now to polish off the new and improved Vivaldi look ala luetage,
Any thoughts on changing the title bar (minimize, resize and close) icons, and on reducing the wasted screen real estate on top of the tabs?

[luetage]

@raed said in Changing icons with CSS / part II:

Any thoughts on changing the title bar (minimize, resize and close) icons, and on reducing the wasted screen real estate on top of the tabs?

Glad you are happy, but any requests unrelated to changing icons are off-topic here.

[raed]

@luetage

What is the correct code to move the Vivaldi logo icon left - right?

I am trying to make it centered in relation to the hamburger icon on top of it.

I have used:

        svg.setAttribute("paddingLeft", "3");

but it does not seem to make any differrence to the left-right position of the icon, regardless of the value I assign to it.

Regards
raed

Edit:

In a moment of dispare I thought since I am unable to move the Vivaldi icon under my own steam in .js, why not attempt to move the hamburger icon in .css, which I have achieved by using:

/* Correct vivaldi button position on address bar*/
.vivaldi {
    top: -5px !important;
    padding-right: 5px;
}

Not sure if it is the correct method to get both icons centered, or if it is the most elegant, but I think I now fully understand Deng Xiaoping's doctrain of: It does not matter if the cat is balck or white, as long as it catches the mice.

Regards
raed

[luetage]

@raed The path is the alignment. It has a starting point M which places it in the viewbox. If you change the viewbox, the path might not be centered anymore, speak: changing the viewbox misaligned your path. Try scaling like @Hadden89 instead of changing the viewbox to control the size of the path/icon. If you start to scale it might be a good idea to make the viewbox 32x32, like in the original svg on the Vivaldi Forum.

[raed]

@luetage

Thank you for your explanation, but I have a feeling that I am quickly getting to swim out of my depth on this one.

If I understand you correcly I should use this:

 transform: scale(.08) !important;

from @Hadden89 code to resize?

I have attempted to play with transform value in an attempt to understand its effect, I attempted to reduce the size of the back and forward icons in @Hadden89 code to make them the same size as the native Vivaldi reload icon, a value of (.07) gets them to the correct size, but makes the icons miss aligned by being pushed up and to the left.

.

Regards
raed

Edit:
Is there a value that can be assigned to the parent container (for a better word) which is in this case the address bar, that would center any and all elements present and/or introduced in it?