- FreeStyler.WS

Global styles

Added by WhyseMan@userstyles, Created: Dec 03, 2016, Updated: Apr 26, 2017

Facebook Header

Description:

Make circle avatars on facebook with Google's material design. Now with animated reactions, the ones you see on facebook's Android and iOS applications. It also has elements of "Animate.css", the "fadeInUp" effect. The style is global, because facebook is everywhere.

For Chrome users:
To watch the video on fullscreen, first click on the video, and then when it positions to the center of the screen, click the fullscreen button.

Since facebook is using React.js, which is a library that re-uses components, there are some styles that must stay default, because if I style them, on the other page that same component becomes very ugly and on the other it is ok. Therefore I can't style everything.

More info

I honestly have no idea what's going with these web browsers anymore. On one everything works fine and the other has bugs. Everything is A-ok on Chrome, but Firefox makes the facebook header with broken position, the header is not sticky FIXED!. It's definitely browser related. My style has no bugs.

4/18/2017
Fixed the "Search" layout on group search.

3/25/2017
Fixed broken header on Firefox. Now the style is 100% compatible on Firefox. Everything is A-ok! :)

3/24/2017
I've added a "scale" transform property when browsing pictures, so now when browsing profile or page pictures, on hover, images scale up.

3/9/2017
More animations! :D This time when browsing pictures :D

2/10/2017
Fixed some bugs. Removed the "Suggested Pages" & "Suggested Groups" section. Added transparent chat (I'll make this option to be toggled.).

1/18/2017
Added animated reactions. Yes the reactions now animate!

1/13/2017
Updated the new messages page.

1/11/2017
Totally forgot about the messages page, colored that paged too! :D

1/10/2017
Added the style to the landing page.

1/9/2017
Style still works as it should.

12/16/2016
Urgh, I think that the style is a little buggy because of the Animate.css properties. It works, but sometimes it puts the box on the left side, like slides on the left side by itself. Will look into what's causing the problem. UPDATE - It seems that this bug is only present on Chrome, on Firefox everything works just fine.

12/10/2016
Added some more shadows :D
Oh, and added a "fadeIn" effect that I've extracted from Animate.css, it looks interesting... I think o.O

12/9/2016
I've added some shadows on boxes and changed the color of the "Post" button to match the material design.