Jump to content

Web GUI CSS adjustment -> Material Design


Random.Name

Recommended Posts

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.

Link to comment
  • 2 months later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...