Web GUI CSS adjustment -> Material Design

[Random.Name]

Well i had some time to kill and wanted a new/ different look for my web gui.

I aimed for some adaption of Material Design, since i like the colorful but clean look.

Here are some preview images: https://imgur.com/a/AsYvGrV

 

It's just some css code, that overrides default styling. Also i personally implemented the design with Stylus so it's just in my browser. No need to edit any unRAID files or anything. 

It should work across all browsers (given there is an addon to insert the css code)
https://pastebin.com/BZ0bEnJv

I also created a Version with much less color and a lot more css comments to explain how to use this: https://pastebin.com/hps6aeW9

 

Since blue is not for everybody i made every color (except white for text on color-backgrounds) a variable at the top. so if you don't like blue it's super easy to insert a personal color theme.
(If you are not sure about color picking just use a tool like this https://material.io/tools/color/#!/?view.left=0&view.right=0 and cpoy the hex codes)

There are still some parts missing and some things could be cleaner. I will try to update this post if i continue to work on this.

Edited July 26, 2018 by Random.Name
Updated the css code with comments and white theme

[unRate]

This is really slick and very easy to customize!

 

Any change you'll update it for the recently updated Webgui?

Edited October 30, 2018 by unRate