Changing icons with CSS / part II

luetage

aka the svg strikes back!
original thread / part I

I've been running a custom home button ever since I first messed with changing icons, yesterday's update broke it and I thought why not give it another shot. After searching the web I found out it is indeed possible to exchange the svg path directly with css, without using any background image, which has several advantages:

independent from theme color
no extra animation necessary
far less code

This means we could potentially create whole icon packs for Vivaldi without too much effort. Example for home button:

/*
Changing Buttons
version 2021.9.0
https://forum.vivaldi.net/post/155310
Changes home and trash button svgs. Many more examples in linked topic.
*/

.UrlBar button[title="Go to homepage"] svg path {
  d: path(
    "M 4 6 h 18 v 2.5 h -3.5 v 11.5 h -2.5 v -9.5 h -6 v 9.5 h -2.5 v -11.5 h -3.5 Z"
  );
}
.toggle-trash.button-toolbar button svg path {
  d: path("M 6.5 8 h13 v2 h-13 Z M 6.5 12 h13 v2 h-13 Z M 9 16 h8 v2 h-8 Z");
}

0_1503616186796_Screenshot 2017-08-25 01.09.13.png

0_1503616297375_Screenshot 2017-08-25 01.11.27.png

sethjbr

That could be useful. Thanks @luetage

Hadden89

@luetage The path are like vector coordinates for drawing the button or load an url? After squircle, I'll call that button sthomehenge

luetage

@Hadden89 Coordinates, the path is being drawn.

luetage

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

I'll call that button sthomehenge

That's not too far off. It's a gate. In my opinion more logical than a house, but maybe that's just me

luetage

I've been looking at improving/exchanging the trash can, and I noticed the area is called sync and trash. Looks like we are getting a sync button besides our trash button.

sjudenim

Hamburger menu

#titlebar > button > span.application-icon > svg path,
#titlebar > button > span.vivaldi-v > svg path {
    d: path('M0 2.2h18V4H0zm0 5.9999998h18v1.8H0zM0 14.2h18V16H0z');
}

New tab button

#tabs-container .newtab svg path {
    d: path('M15 9a1 1 0 0 1-1 1h-4v4a1 1 0 0 1-2 0v-4H4a1 1 0 0 1 0-2h4V4a1 1 0 0 1 2 0v4h4a1 1 0 0 1 1 1z');
}

Ayespy

@luetage Shshshshhhhhhh!

luetage

@sjudenim Cool stuff, the collection is growing.
Btw, do you know how to calculate paths to scale them for different sizes in different places? Or do we just need to make them anew?

sjudenim

@luetage

I know that you can use transform to resize things but I don't like the results.
https://css-tricks.com/almanac/properties/t/transform/

Maybe it's possible to set the width and height using viewport (vw and vh) instead of px. I've done this to resize video players on websites to dynamically adjust the player to the window size, something scaling can't do. And since svg files have viewports, you can give it a try.
https://css-tricks.com/viewport-sized-typography/

luetage

@sjudenim Scaling is already what Vivaldi does when you click on a button, you have to play around with the thickness of your image to make it look good. The viewbox doesn't change your path, it only defines the space available, and if your path is bigger or too small then it stays that way, it crops your image? I don't know.

What I was getting at was more like following:
You have a viewbox of 20/20 and a rectangle of M 5 5 h10 v10 h-10 Z -- how do you make the svg half the size when the viewbox stays the same? In this example it is very simple of course, but I'm wondering if there is some formula for complicated shapes. Or do we really just have to scale the svg till it fits?

sjudenim

@luetage

Yes, I wasn't referencing the viewbox, only treating the svg as a scalable image after the fact.

Is this what you mean?

"The viewBox isn't the height of the container, it's the size of your drawing. Define your viewBox to be 100 units in width, then define your rect to be 10 units. After that, however large you scale the SVG, the rect will be 10% the width of the image.."

http://jsfiddle.net/Thyti/8KVtU/452/

Otherwise, I don't know of any formula

good luck

sjudenim

Also, I was fooling around with some different things for the closed tabs trash bin but didn't like any of them, so I settled on something simple

#tabs-container > div.trash > button > svg path {
    d: path('m2 7c-1.105 0-2 0.895-2 2s0.895 2 2 2 2-0.895 2-2-0.895-2-2-2zm14 0c-1.105 0-2 0.895-2 2s0.895 2 2 2 2-0.895 2-2-0.895-2-2-2zm-7 0c-1.105 0-2 0.895-2 2s0.895 2 2 2 2-0.895 2-2-0.895-2-2-2z');
}

#tabs-container > div.trash > button > svg {
    opacity: 4;
}

I've redone the window group buttons too since being on Windows h8 has some real ugly ones, I made them Win10 style but have run into a snag. Vivaldi is adding a fill to the close button. How can I remove the fill without losing the svg image in the process?

I've tried fill: none and fill:transparent with no luck. If I use a fill colour, then the image will be locked to that and not adapt to the themes.

luetage

Your code doesn't work for me personally.
I used .button-tabbar.toggle-trash svg path instead when I messed with it. The trash button is very strange, it has a g element, with a transform: translate which makes everything whacky. I looked around for ideas for the trash button, the Opera design is better than the Vivaldi one, but I don't like it too much either.

And about the fill, hmm, I can't test it because I'm on osx. But can't you make the fill the background color of your theme with the variable, as an ugly workaround? Or you could fill it with a rgba color with opacity of zero.

sjudenim

Using any colour on it locks it to that colour which sometimes works with var(--colorFg) but not always. Using rgba gives the same result as transparent, which removes the svg from sight. Thanks for the suggestions though

Normally I just look at the css in Dev Tools but the trash had a bunch of odd things going on. So I used Copy selector instead to get that

luetage

@sjudenim I tried around with my home button now.
fill: none; works as expected, if you then do stroke: #fd3563;, you get just the colored outline.

sjudenim

@luetage

I guess my only option is to remove it directly from the common.css

sjudenim

deleted post

luetage

Where is the difference? Do you mean there are 2 Vivaldi logos, that are being loaded depending on your theme settings?

sjudenim

deleted post