Material Design CSS for Flarum

gurjyot

foros It's not a Facebook theme. It's designed to look like Material Design by Google.
If you are talking about Colors then, these are the base Colors with which Flarum comes out of box. Flarum Website is using different Colors to make it stand out.

foros

gurjyot The colors confuse me!
Thanks for sharing!

Felli

Would seem to not play well with those that have Tags as the default home, nor does it play well with the dark mode when it's enabled, just a heads up on that. ?

gurjyot

Felli thanks for the update. I'll try to make it work for those cases as well. And will ping to notify you. ?

0E800

@Felli @gurjyot
Here is simple modification to allow for dark themes.

//CSS FOR MAX WIDTH 1100px
@media (min-width: 1100px){
.IndexPage .container {

box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2)
}
.PostStream-item{

box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
padding: 0px 5px 0px 10px;
margin-bottom: 5px;
}
.PostsUserPage-list>li{

box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
padding: 0px 5px 0px 10px;
margin-bottom: 5px;
}
.DiscussionListItem{
border-bottom:1px solid #e9e9e9;
}
}

//CSS FOR MAX WIDTH 1099px
@media (max-width: 1099px) and (min-width: 676px){
.IndexPage .container{

box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2)
}
.PostStream-item{

box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
padding: 0px 5px 0px 10px;
margin-bottom: 5px;
}
.PostsUserPage-list>li{

box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
padding: 0px 5px 0px 10px;
margin-bottom: 5px;
}
.DiscussionListItem{
border-bottom:1px solid #e9e9e9;
}
}

//CSS FOR MAX WIDTH 675px
@media (max-width: 675px){
.IndexPage .container{
background: #ffffff;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
margin-left: 5px;
margin-right: 5px;
}
.PostStream-item{

box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
margin: 0px 5px 5px 5px !important;
}
.PostsUserPage-list>li{

box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
padding: 0px 5px 0px 10px;
margin-bottom: 5px;
}
.DiscussionListItem{
border-bottom:1px solid #e9e9e9;
}
}

//CSS for Buttons
.Button{
border-radius: 2px;
}

//CSS for Primary Button
.Button.Button--primary{
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
.DiscussionHero .TagsLabel .TagLabel{
border-radius: 2px !important;
}
.TagsLabel .TagLabel:first-child:last-child{
border-radius: 2px;
}

All I did is remove all lines containing:
background: #ffffff;

# Before:

Imgur

# After:

Imgur

I didn't notice any issues when set to display Tags.

Ill update post to include custom background variables so all the user needs to do is copy paste their color hex one time to match the background to their flarum theme.

Nice work BTW! ?

Felli

0E800 All I did is remove all lines containing:
background: #ffffff;

That's not a bad idea, although I believe using background: inherent; should also do, that would be a slightly hack-ish way of doing things though...

Ralkage

flarumthemes.tk or flarumthemes.com is a must at this point, user submitted themes and a theme selector in the Admin CP like Wordpress has with the slight addition that themes are pulled and listed VIA API.

gurjyot

@0E800 Thanks for suggesting the changes. I never thought of dark theme and thus provided #ffffff color since most cards look good in that background. But now I removed that since it'll cause issue with Dark Theme.

@Felli the file has been updated to work with Dark theme as well but I didn't see any issue with tags page setup. So do check it out and let me know. Moreover, using inherent is not a hack-ish way but I would say it's a smart way of using CSS. Although, you won't need it now ?

Felli

gurjyot Have you also thought of using wave?

gurjyot

Felli Sorry but I didn't understand. What wave?

Felli

gurjyot You'll find waves here, of course, this is JavaScript, but it wouldn't hurt with the Custom CSS & JavaScript extension. ?

gurjyot

Felli ok, that ripple effect. Actually, today morning only I was thinking about implementing that. Let's see how it gets done. But it'll only be done for primary buttons. Rest of the buttons will be normal only.

0E800

Felli
gurjyot

Here is what I use for my customised primary button wave.

You can preview here :
https://keys-daggers.org

Don't need to register, just click on the blue login button to see shimmer effect.

Add to bottom of Custom CSS. (You may need to remove any other customizations for Button--primary first)


.Button--primary {
 
  text-align: center;
  text-decoration: none;
 
opacity: .8;
  
  
  display: inline-block;
 
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  position: relative;
  overflow: hidden;
}

.Button--primary:before {
   content: "";
  background-color: rgba(255, 255, 255, 0.5);
color: #ce8483;
  height: 100%;
  width: 3em;
  display: block;
  position: absolute;
  top: 0;
  left: -7em;
  -webkit-transform: skewX(-45deg) translateX(0);
          transform: skewX(-45deg) translateX(0);
  -webkit-transition: none;
  transition: none;
}


.Button--primary:hover {

opacity: 1;
  color: white;
 
}


.Button--primary:hover:before {
  -webkit-transform: skewX(-45deg) translateX(33em);
          transform: skewX(-45deg) translateX(33em);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

Felli

gurjyot That's 100% fine by me, just wanted your take on this was all. ?

Zeokat

Call me weird but... material design looks ugly for my eyes.

gurjyot

Zeokat that's why the theme concept is there. So that everyone can have their websites designed the way they like... ?

gurjyot

0E800 I certainly like your wave implementation. It definitely looks good ?

Felli

0E800 I'm not sure if you've disabled it already or it is simply not been implemented for mobile devices like Windows phones, but I'm not seeing a button. ?

0E800

Felli

Keep in mind the animated gif compression slows down the effect.

Imgur

Felli

0E800 Not quite material waves but is a good workaround for this! I'll try implementing waves splash effects late tomorrow.

SmoulBuchholz

0E800 work perfectly with my forum thanks ?
https://i.gyazo.com/f3b12c88eaaf81af19d2e23186b76234.gif

0E800

Felli
This should make it easier ?

https://codepen.io/lehollandaisvolant/pen/dMQXYX