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

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

[sjudenim]

@KaKi87

Something is not showing correctly on your fresh profile. Here's an old profile with no mods running

As you can see, the switch toolbar is is uniform with the panel.

Not sure what is altering that in your code but tinkering around with it in Dev tools I was able to get the desired results by changing the levels that the blur is applied

taking it away from here

.panel-group { backdrop-filter: unset; }

and adding it here

#panels-container {  backdrop-filter: var(--backgroundBlur); }

[sjudenim]

By the way, the status bar can use some attention. It's kind of broken when active

[KaKi87]

the switch toolbar is is uniform with the panel

Sure, and that's how it is normally, but Xiean wanted a background image.

the status bar can use some attention

The status bar is not supported because Phi's purpose is to preserve vertical space, which the status bar would use.

From the README : Under "Appearance" ➔ "Window Appearance" ➔ "Status Bar", select "Status Info Overlay" or "Hide Status Bar".

[sjudenim]

@KaKi87

I wasn't replying to Xiean's post though. You were having a problem with the switch not showing the blur, that's what I addressed.

And as far as the status bar goes, there is no need to hide it. You can easily make it adjust to the width you are using for the side since you are using a static size. I use overlay myself but there are some things I keep on it that I toggle it on to use.

[KaKi87]

You can easily make it adjust to the width you are using for the side since you are using a static size

But everything you can put there can already be put in the current bottom area.

[KaKi87]

You were having a problem with the switch not showing the blur

If you're talking about my last screenshot, that's not a fresh profile, that's with Phi enabled, trying to achieve what I said previously : I'll rather apply the same blur to the panel bar.

[sjudenim]

@KaKi87

Like I said, I don't always need them visible. I'm not a fan of clutter

[sjudenim]

@KaKi87

I'm was talking about this

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

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

[KaKi87]

I'm was talking about this

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

Well, when I said that the switch wasn't showing the blur, I was talking about the second screenshot (with Phi enabled).

	Fresh profile	Phi enabled
Switch background	Yes (expected)	No (unexpected)
Panel blur	Yes (expected)	Yes (expected)

With that said, for consistency with Phi's current behavior, I chose not to try applying the background to the switch, but to apply the blur.

[sjudenim]

@KaKi87

I know that, they were in the same post. I commented on the first image and then gave you some code to address the second one.

Not sure what all the semantics is about.

[KaKi87]

@Xiean Done !

I even installed the VivalArc Reflect Dark theme for fun.