Adding text-shadow to time/rez classes

[TheTacoScott]

Makes the time and rez metadata display exceedingly more readable.

[whyboris]

Thank you for the PR 😁

I do dislike that there are times when the time & resolution are hard to see (when the background of the screenshot matches too much with the text). But I'm unsure how to best solve this problem.

I am rather against text-shadow as it is "expensive" performance-wise. Especially if it's such a complicated text shadow.

A semi-transparent background on the text element would be much less performance-heavy - but it doesn't look very good. Adding a border-radius is also "expensive" but would likely be needed to make it look better.

I'm unsure about how to visually address the problem I've had in the app since version 1 😅

I'm open to a discussion. Feel free to share screenshots 🤝

[TheTacoScott]

Background where it's addition doesn't matter much, but also is no worse off.

[TheTacoScott]

Good example of when it is basically unreadable without shadow

[TheTacoScott]

Much easier with shadow:

[TheTacoScott]

Unreadable:

Readable:

[TheTacoScott]

Those are the readability improvement screenshots. I think there is a case to improve the readability. But you bring up a very good and valid point: what is the right way to do it?

Outside stroke (aka: text shadow 8 axis) makes it pop a bit, but it's not a free operation in css.
Span/Div Opacity changes make it all look a bit too boxy for my taste.

here is an example of adding some padding/and setting a background color and some opacity:

[TheTacoScott]

With a border radius:

[TheTacoScott]

Fairly easy to get a computationally cheap CSS stroke effect with text-stroke (interior stroke) but then the font size has to be bumped up a lot;

[TheTacoScott]

mix-blend-mode might have some options:
difference:

[whyboris]

Thank you for the screenshots and ways to address the current problem. I'm a bit busy this coming month - but I'll return to this topic when I find the time again 🤝

[TheTacoScott]

No rush. In fact I think the most proper way to solve this might be the same way you display the "total time of videos in folder" in folder view. It's a simple border radius box. While that is less 'cool' than fancy opacity/text shadows/etc it would be more in line with the existing visual language.