Minor visual changes for dark mode, improved chat width in theatre mode

[jpjagt]

I'm back again, just fixing a couple small things;

• the color of the active nav tab in dark mode
• that 1px gap between chat and player in theatre mode
• optimized chat width in theatre mode (I found the chat to be a little too wide on large screens)

[arn7av]

@JeroenPJ Everything seems perfect, except a small glitch, which I have isolated to the change, but I do not know whats the best way to fix. So what is happening is, when in theatre mode, and I hover any of the controlbar options, the player seems to contract due to the scrollbar suddenly showing up. If I revert back the width: calc(100% - 350px + 1px); to the older value or even width: calc(100% - 400px + 1px);, the problem seems to disappear. I will attach the screens if you are unable to replicate it.

[jpjagt]

I see what's the problem. Scrollbars always mess everything up in browsers, because different operating systems behave differently. On Windows, the scrollbar is solid and makes the webpage a little less wide. On macOS the scrollbar is overlayed/transparent and doesn't change the size of the webpage. Additionally, as you can see in the screenshot below, the size of my browser window makes it so no scrollbar appears because there is still a little bit of space below the video:

I think that the best way to fix this would be to make the tooltip (the text) render above the button instead of below. I'll investigate.

[jpjagt]

Alright I have fixed it so the tooltips appear on top, which should fix the issue. Perhaps there is a more elegant solution to be found, seeing as there will still be a width problem if there is a scrollbar, but I think that it's so niche that it's not really a priority :)

[arn7av]

Your explanation is spot on. Will be looking into it once again and merge it. Kudos!