Add background blur for Logo / Menu Drawer icon on mobile view

[alvitali]

I was always annoyed by the menu drawer & logo not having the same blurred background as the header buttons and section tabs.

This adds CSS overrides for the .layout-mobile view to add the same rounded background with a blur filter that .headerRight uses. Instead of adding .headerLeft to the declarations for those styles, I created a separate override under Mobile fixes so that the background-blur declaration of .headerRight won't need to be unset for the desktop view.

I've uploaded the exact rules I'm using on my Jellyfin instance to override the default / scyfin rules on alvitali@240ad65 where the changes are explained in detail with comments.

Setting the width of .pageTitleWithDefaultLogo with the aspect-ratio declaration is rather fragile and could definitely be improved. However I didn't find a more robust way to set the width as jellyfin-web uses background-image to set the logo instead of an tag. As long as the logo stays the same, this should work fine though. Heads up as I eyeballed the aspect-ratio for logo which does not correspond to the precise measurements of the default logo but I wanted to get this up here for another pair of eyes

[alvitali]

Can be tested with

@import url('https://cdn.jsdelivr.net/gh/alvitali/scyfin@240ad65/CSS/scyfin-theme.css');

Edit: Just noticed my implementation is not yet optimized for the header in libraries / item pages. I'll leave this here in case you have any suggestions until I'll get around to improve this