[CLOSED] Linux custom css scrollbar

[core-ai-bot]

Issue by Zolmeister
Thursday Aug 22, 2013 at 19:00 GMT
Originally opened as adobe/brackets#4884

---

The default Linux scrollbar for content looks poor due to sandbox rendering.

Here is a proposed css default scrollbar replacement (http://jsfiddle.net/6kEx5/):

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track-piece {
    background: #aaa;
}

::-webkit-scrollbar-thumb {
    background: #7a7a7a;
    border-radius: 2px;
}

::-webkit-scrollbar-corner       {
    background: #999;
}

::-webkit-scrollbar-thumb:window-inactive {
    background: #888;
}

[core-ai-bot]

Comment by redmunds
Friday Aug 23, 2013 at 16:38 GMT

---

Thanks for the tip! Assigning to@larz0 to take a look.

[core-ai-bot]

Comment by ghost
Thursday Sep 05, 2013 at 08:35 GMT

---

Thanks

[core-ai-bot]

Comment by larz0
Thursday Sep 05, 2013 at 18:35 GMT

---

@Zolmeister@vinigordex could you check out the custom webkit scrollbar on this branch and let me know what you think? https://github.com/adobe/brackets/tree/larz/linux-scrollbar

Once we're happy with it we'll need to make the scrollbar CSS linux-only.

[core-ai-bot]

Comment by larz0
Thursday Sep 05, 2013 at 18:35 GMT

---

Here's a screenshot:

[core-ai-bot]

Comment by TomMalbran
Thursday Sep 05, 2013 at 22:29 GMT

---

Once we're happy with it we'll need to make the scrollbar CSS linux-only.

You can just replace the body wrapper with .platform-linux.

[core-ai-bot]

Comment by larz0
Thursday Sep 05, 2013 at 22:33 GMT

---

Awesome. Thanks Tom I'll go ahead and do that.

[core-ai-bot]

Comment by TomMalbran
Thursday Sep 05, 2013 at 22:36 GMT

---

NP. You can also change it to .platform-win or .platform-mac to test in other platforms.

[core-ai-bot]

Comment by Zolmeister
Thursday Sep 05, 2013 at 22:40 GMT

---

I put it in a js-fiddle: http://jsfiddle.net/HrsxL/ for others to check out more easily. It looks fine for me, though I can't say I like the use of the base64 encoded png.

Edit: updated fiddle - http://jsfiddle.net/HrsxL/1/

[core-ai-bot]

Comment by larz0
Thursday Sep 05, 2013 at 22:51 GMT

---

Cool. I'm not using base64 encoded png.

[core-ai-bot]

Comment by larz0
Thursday Sep 05, 2013 at 23:07 GMT

---

@Zolmeister@vinigordex the pull request is here adobe/brackets#5082

Let me know if there's any problem.

[core-ai-bot]

Comment by Zolmeister
Thursday Sep 05, 2013 at 23:11 GMT

---

Oh, sorry, must have been looking at some other code then.
Here is the updated fiddle: http://jsfiddle.net/HrsxL/1/
And I must say, I do like it more now. Thanks for taking the time to implement it.

[core-ai-bot]

Comment by larz0
Thursday Sep 05, 2013 at 23:13 GMT

---

Great. NP man.

[core-ai-bot]

Comment by ghost
Friday Sep 06, 2013 at 01:45 GMT

---

My screen Ubuntu

[core-ai-bot]

Comment by jasonsanjose
Friday Sep 06, 2013 at 16:57 GMT

---

Confirmed fixed. Closing.@Zolmeister if you have a dev env for brackets setup, you can sync to master to see the changes.