[Solved] How to make the top app bar fully transparent?

[Series95]

Describe the bug
topbar does not sync correctly on the background, its slow

Screenshots

ElegantFin:

• Version [Latest]

Jellyfin Server:

• Version [10.11.1]

Desktop (please complete the following information):

• OS: [Linux]
• Browser: [Firefox]
• Browser Version: [Latest]
• Screen Resolution [3440x1440]

[lscambo13]

Are you using the Media Bar plugin? Plugins are not directly supported by the theme.

It is recommended to use the Media Bar add-on mentioned here.

[Series95]

Oh, I didn't find the design that appealing. Would it be possible to completely remove the blue effect from the top bar so it's transparent?

In the last version I somehow managed to do it but with the last update it caused problems again

[SingularReza]

@Series95 it's from recent update causing the slides-container position to move down. This CSS will fix it - #slides-container { position: absolute; top: 0; }
It will look like this -

[Series95]

How do you make it Look transparent can you share the Code? :)

[SingularReza]

@Series95 I already shared it above - #slides-container { position: absolute; top: 0; }

[Series95]

many thanks =)

[Panda260]

@Series95 You can also completely remove the blur

:root {
    --headerBlurMask: linear-gradient(180deg, white 0%, 0%, transparent);
}

[lscambo13]

This is the official way to get a transparent app bar that maintains readability.

:root{
    --headerBlurLayerVisibility: none;
    --headerBackground: var(--headerColorGradientAlt);
}