Re-Code The CSS for The Banner and Cookie Manager

[ghost]

Gonna do a Pull Request to update the CSS to work on all Browsers with the added prefix and also create min files to add to the updated doc's at a later date.

[CptMeatball]

Might also be a good idea tot look at general styling of the elements.

There's a min-height on the cookiesmanager for example that's not really necessary I think.

[ghost]

CSS on Banner won't pass basic Web Accessibility standards! Gonna have to throw it in the bin and re-code it properly!

[ghost]

@CptMeatball I will check that as well. Probably lots of issues there as well.

[ghost]

Example on Mobile Device:

~Best to throw in bin and do it correctly!!!

[tobias-kuendig]

Best to throw in bin and do it correctly!!!

Thank you for these kind words.

Did you add the viewport meta-tag?

<meta name="viewport" content="width=device-width, initial-scale=1">

This is the correct mobile view of the banner:

[ghost]

@tobias-kuendig Hi, sorry for my words and yes I did use the viewport tag. But the current CSS will completely fail if you throw it into Lighthouse for example, I strongly do not recommend anyone use the current css and I will do a major update to it today and correct all the errors! That is why I say throw it in bin, as I recommend users to not use the current version!

~Anyway leave it with me I will work on this today.

[ghost]

Old vs New Design: (One on right is easy to read on small device)

[CptMeatball]

I actually prefer the left one. Also, design is something that probably is different across websites.

The gradient buttons on the new design are not really in sync with the current design trends and I'm also not that fond of the yellow.

The old design seems a bit a cleaner.

[tobias-kuendig]

Thank you @ayumihamsaki for updating the CSS.

I will remove the gradients and clean up the design a bit. I tried to keep the design as simple as possible and make it easy for the enduser to adjust it to the site's design.

Using solid background colors removes the need for vendor prefixes. I don't know what versions of browsers you were targeting but I may also remove some other vendor prefixes like box-shadow and transition since theses properties had good browser support for many month now.