Scoolbars

Scoolbars for a pre element

by NicosKaralis

HTML

<pre>
 asdasdasdasdç lakfçsl kfalk sfdlsk s fsd
asdfasf
fazendo teste

5.times do
  puts "Helo world"
end
</pre>

CSS

pre::-webkit-scrollbar {
    height: 7px;
    width: 7px;
}

pre::-webkit-scrollbar-button:start:decrement,
pre::-webkit-scrollbar-button:end:increment {
    display: none;
}

pre::-webkit-scrollbar-track-piece {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .3)), to(rgba(0, 0, 0, .1)));
}

pre::-webkit-scrollbar-thumb:horizontal {
    background: -webkit-gradient(linear, left top, left bottom, from(#99a2ab), to(#6a747c));
    -webkit-border-radius: 3px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .66) inset;
    width: 25px;
}
pre {
    background: url('http://devcenter.heroku.com/images/dev-center/wikistyle/pre_code_background.png') repeat #434E56;
    border: 1px solid #3F464C;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    line-height: 18px;
    margin: 0 0 22px 0;
    overflow-y: auto;
    padding: 12px;
    width: 100px;
}
pre {
  color: #f8f8f8;
  white-space: pre;
}