A New Skin Based on Windows 10 Design Language

[yurisuika]

I used Metro for a long time and tried to hold out on VGUI interfaces until they became too broken. As such, others had already developed chat skins in CSS that I forked off of. When they killed off the last of VGUI, I adapted as well, but I found that my CSS was a complete jumbled mess.

So, I decided to start from the ground up and create a new skin! I only started working on this about a week ago, but so far it is coming along!

It is based on MDL2, which is the transitional design language used in Windows 10 after Metro and before Fluent. It uses such aspects as Acrylic and Reveal to give the best possible fit into the Windows 10 design. If you liked the Metro skin, you will find this quite familiar. Just like Metro, I have used icons sourced directly from Windows to make it fit in perfectly.

https://github.com/yurisuika/Zehn

[Flux]

Hey, this is an excellent start! Well done! Gonna add it to my guide :)

[RedSigma]

This looks nice.

[Helios]

Extremely sexy. ;)

[Redn2000]

Does this require SteamFriendsPatcher to use?

[JmTrad]

looks cool

[MONZUN]

looks great !

[scaypies]

this looks good, but the library is ULTRA laggy (as you partially described on the github page itself): I'm sorry that I'm stupid, but is there a way to disable the animations there outright? I don't really care for my games list constantly scrolling back and forth to increase screen real-estate. Why do so many companies force worthless animations without an option to just disable shit lol, ffs

EDIT: Thank you for adding the sidebar button!

[yurisuika]

Originally posted by scaypies:

EDIT: Thank you for adding the sidebar button!

Yeah I put it off for a long time because I didn't actually know how to do it, but it wasn't too hard to figure out in the end. I didn't know where I should be placing the buttons until I added them, but I think this is a pretty good setup for now. it centers the HOME button over the dropdown box which is nice looking, so that's a bonus.

Animating width/height/etc in HTML is very laggy, so it now fakes an expansion when you open it up with a transform instead, but it looks a lot better nonetheless.

I still have to figure out how to get it to re-inject the button once you unload it from the library (e.g. when you go to the Downloads page).

Originally posted by Redn2000:

Does this require SteamFriendsPatcher to use?

Yeah you need some form of patcher to use skins anymore. And one that allows JS injection like SFP.