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

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

[KaKi87]

a shadow around the webview

In addition to the border ?

[Xiean]

@KaKi87 Yeah

[KaKi87]

Alright, I added two new properties :

--phi--webview-shadow-size: 0;
--phi--webview-shadow-color: 0, 0, 0, 0.25;

If you want the same as Zen, change 0 to 10 on the first line.

[Xiean]

@KaKi87 This looks amazing. Thank you

[sirrichard]

As I wrote to you in Telegram - I would recommend to make it optional - maybe just in code, user have to change parameter from false to true or vice versa, to get panel bar on right side all the time not only panel icons in left bar while they're not opened.

[KaKi87]

For everyone else, here's my Telegram answer :

can't get panel back on right side and tabs on left?

You can set panels to open on the opposite side of tabs, and they will, but to save horizontal space usage, panel buttons remain on the same side as tabs, and only move when opening.

I would recommend to make it optional - maybe just in code user have to change parameter from false to true or vice versa, to get panel bar on right side all the time.

Sorry I'm not gonna do that, because it's still an opinionated mod, and while I do indulge in little cosmetic things like an optional Arc/Zen-like border around the webview, I won't code a whole positioning implementation.

[Xiean]

I noticed a bug (maybe that's the planl), but when you put an image on the background, the background blur slider does not work and the image is always sharp.

[KaKi87]

On the background of what ?

[Xiean]

@KaKi87 In the browser theme settings. The background of the browser itself

[KaKi87]

Oh, I didn't know such a feature existed, I'll look into it.

[KaKi87]

I'm sorry I cannot find that feature, where is it please ?

[Xiean]

@KaKi87

[KaKi87]

Oh, okay, I'll check that out.

[sjudenim]

@KaKi87

I was too lazy to sift through your code, but there are a few variables that you can use for the background of the container that will utilize the transparency and blur settings of a theme.

For example, if you are using background-color: var(--colorBg) you should use var(--colorBgAlphaBlur) . That would make it consistent with the side panel, but Vivaldi uses this var(--colorImageLeftFgAlphaHeavy); for vertical tabs

There is also a variable for using just the blur setting, backdrop-filter: var(--backgroundBlur);

Hope that helps and thanks for sharing

[KaKi87]

So, here's background and blur on a freshly created profile :

And here's background and blur with Phi enabled :

Looks like blur is applying to the panel the same way as before, while the difference is the background image isn't applying to the panel bar.

I guess I'll rather apply the same blur to the panel bar, for consistency.

[KaKi87]

Well, it's rendering weirdly and I can't figure out why, even after moving the blur to a single element above both the panel bar and the panel :