φ Phi - The ultimate vertical experience theme for Vivaldi, made with attention to details.

KaKi87

If, at some point, this becomes possible without "Use Native Window" enabled and includes an auto-resize or hover feature, I believe this will be the greatest CSS modification I’ve ever seen on this forum!

This is now possible !

I also implemented page content borders (optional, disabled by default).

Everyone, if you're using Phi, I invite you to please star the GitHub repo, and you're welcome to share a screenshot of your setup !

Xiean

I started using this mod and I can say that I like it. But I have a few questions about the possibility of realizing some moments

Is it possible to move the extensions icon instead of the home button?

By changing the panel only it turned out to be this:
Profile button. It's not that it's functional and necessary, but still.
Is it possible to display the link not completely (when it is not in focus)? For example: www.youtube.com, www.github.com, as they are currently displayed:
And how do I change the height of the address bar in this state?

Anyway, thanks for such a great mod.

KaKi87

I like it

Thank you !

Is it possible to move the extensions icon instead of the home button?

No, the layout has been optimized for a few extension icons, as per the screenshots.

This could be implemented, but allowing for both upon user choice would require too much effort, so I'm sorry I'm only gonna keep the current behavior.

Profile button. It's not that it's functional and necessary, but still.

This is 100% opinionated : no.

Is it possible to display the link not completely (when it is not in focus)?

Sure, let's add this feature, I'm not gonna enable it by default though.

You can download the latest CSS file, and change the following :

--phi--is-address-bar-unfocused-partial: 0;

to the following :

--phi--is-address-bar-unfocused-partial: 1;

I'll officially document it later.

how do I change the height of the address bar in this [ed. : focused] state?

The address bar doesn't increase its height by a specific value (which would require absolute positioning), but rather covers the extensions row area (an implementation that would also be broken if I would implement your first request), so the height increase cannot really be customized (short of increasing the height of the extensions row, and decreasing wouldn't be possible).

I implemented it this way so that the URL bar wouldn't require absolute positioning. The CSS code is cleaner this way.

thanks for such a great mod.

You're welcome !

Daily driving it is the secret.

Horizonger

The resolution was a little bad but I think you can get an idea. https://imgur.com/a/SsvSnjB

Xiean

The address bar doesn't increase its height by a specific value (which would require absolute positioning), but rather covers the extensions row area (an implementation that would also be broken if I would implement your first request), so the height increase cannot really be customized (short of increasing the height of the extensions row, and decreasing wouldn't be possible).

I implemented it this way so that the URL bar wouldn't require absolute positioning. The CSS code is cleaner this way.

Oops. I didn't pay attention to the "--phi--is-address-bar-focused-height-increase" setting. This gives me the result I need.

KaKi87

The resolution was a little bad but I think you can get an idea. https://imgur.com/a/SsvSnjB

Oh, you made your own customization. Nice

I'm not gonna reproduce this, sorry. The purpose of Phi is to use the vertical space. As you can see on your video, your modification creates a significant void below the tab list, which can be used to show a huge amount of tabs of course, but that shouldn't be the norm.

I didn't pay attention to the "--phi--is-address-bar-focused-height-increase" setting

Oh, so you didn't want to change the height, rather disable the height change. Sure, I wouldn't have hardcoded that behavior.

Granite1

@KaKi87 Excellent, esp. that pinned tabs grid. Now I don't have to wait for the implementation of the Feature Request, if it ever will. This is a beautiful piece of work. I starred it on Github.

KaKi87

@Granite1 Thank you !

KaKi87

@Xiean said in φ Phi - The ultimate vertical experience theme for Vivaldi, made with attention to details.:

Profile button. It's not that it's functional and necessary, but still.

So I actually ended up unhiding this on Mac after learning that the base profile manager doesn't allow creating profiles on Mac contrarily to Linux and Windows.

Granite1

This post is deleted!

KaKi87

How can I make the panel bar on the right visible?

@Granite1

The purpose of the mod is to use optimize space, so panel icons are at the bottom on the same side as everything else.

Having everything but panels on one side and panels on the other side means more horizontal space consumed even though the sidebar has vertical space.

However, you can still choose in settings to display the panels themselves to show up on the opposite side from the sidebar.

H4M5TER

thank you for the great mod
I want to ask for a feature I always want that make the pinned tabs not scroll out of screen (that's the idea, "pinned")
is this possible with css?

@KaKi87 said in φ Phi - The ultimate vertical experience theme for Vivaldi, made with attention to details.:

So I actually ended up unhiding this on Mac after learning that the base profile manager doesn't allow creating profiles on Mac contrarily to Linux and Windows.

just curious, what's your opinion of profile

KaKi87

I always want that make the pinned tabs not scroll out of screen (that's the idea, "pinned")
is this possible with css?

Unfortunately, it's not.

That said, if you really often reach the point where tabs scroll, then you should consider using workspaces.

what's your opinion of profile

Mostly useless except for testing (e.g. troubleshooting mods).

Firefox container tabs are so much better and relevant, unfortunately it's the only good part about Firefox.

H4M5TER

L56 .tab-group .title:not(:has(.tab-title-edit)), make tabs' title disappear when hovering tab stack
is this intended?

KaKi87

Yes, so that the titles of each tab in the stack can be simultaneously displayed.

H4M5TER

I can't call address bar out by Ctrl+L in both compact mode (pannel toggle) and borderless mode (Ctrl+F11)

KaKi87

That's not supported and would be difficult to support...

Xiean

How about a shadow around the webview?
I think this is a good way to separate the webview area from the interface.
For example, Zen Browser:
623c18c9-d853-4d68-aa37-5135c6852a9b-image_2025-04-07_13-04-04.png

KaKi87

a shadow around the webview

In addition to the border ?

Xiean

@KaKi87 Yeah