Scrollbar improvements

iTayGNR

::-webkit-scrollbar {
     width: 10px;
     background: rgba(0, 0, 0, 0.1);
 }

 ::-webkit-scrollbar-thumb {
     background: rgba(0, 0, 0, 0.2);
 }

it would make everything more beautiful.
Before: http://i.imgur.com/99wvaEl.png
After: http://i.imgur.com/XqafBoW.png
(open on two tabs and switch between them)

cristic

great suggestion iTayGNR ?

orpheus

I agree - lot better! Nice share ?

iTayGNR

cristic jordanjay29 orpheus I applied it in my forum http://forum.decijet.com/. there are more CSS changes that I might submit here, I want to have some time before ?

jordanjay29

Very nice.

orpheus

iTayGNR What else did you change? Using this improvement happily on my forum, so can't wait for more ?

iTayGNR

that's all the custom CSS i've done :

.Post-body a,
.ButtonGroup > .Button,
.Dropdown-menu > li > a,
.Dropdown-menu > li > button,
.sideNav .Dropdown--select .Dropdown-menu > li > a,
.AvatarEditor .Dropdown-toggle {
    transition: 140ms;
}

::-webkit-scrollbar {
    width: 10px;
    background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
}

.open .Dropdown-menu {
    animation: dropdownFade 0.5s 1 cubic-bezier(0, 0, 0, 1);
}

@keyframes dropdownFade {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 768px) {
    .IndexPage .DiscussionListItem-info > .item-tags,
    .UserPage .DiscussionListItem-info > .item-tags {
        max-width: 180px;
        -webkit-mask-image: linear-gradient(to right, #000 170px, rgba(0, 0, 0, 0) 180px);
    }
    .DiscussionPage-list {
        -webkit-box-shadow: 1px 0 0 0px rgba(0, 0, 0, 0.2);
        box-shadow: 1px 0 0 0px rgba(0, 0, 0, 0.2);
    }
}

.scrolled.App:before {
    -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

cristic

iTayGNR I think you should maybe do a PR on the project - maybe it's too late for v0.6, but I'm sure it will be added for the v1.0 ?

iTayGNR

cristic what's a PR?

cristic

iTayGNR I'm sorry. A Pull Request

Here's some info about what it is.

Basically you add this to the code (on a github copy of yours) and then, once you did it and tested it, ask the Flarum team to include your changes in the main project ?

iTayGNR

cristic that's a great option, tbh. do you know where the css files are? ?

cristic

iTayGNR Flarum uses LESS ~~files if I'm not mistaken~~...

https://github.com/flarum/core/tree/master/less

iTayGNR

cristic Eldenroot

gonna try and understand how the less files are organized. thanks!

Eldenroot

Great, can you contribute and add submit this improvement in your PR? Thank you!

jordanjay29

Before you write a PR, I suggest you start an issue at Github with this suggestion. It'll let our devs see the idea before you submit a PR, right now we have a real PR backlog and it might be helpful to hold off on this one until some of those other PRs are cleared out.