webkit scrollbars

kennethreitz · May 15, 2011 · 3b6d629 · 3b6d629
1 parent de1398c
commit 3b6d629
Showing 1 changed file with 60 additions and 25 deletions.
diff --git a/kr/static/flasky.css_t b/kr/static/flasky.css_t
@@ -8,11 +8,11 @@
 
 {% set page_width = '940px' %}
 {% set sidebar_width = '220px' %}
- 
+
 @import url("basic.css");
- 
+
 /* -- page layout ----------------------------------------------------------- */
- 
+
 body {
     font-family: 'goudy old style', 'minion pro', 'bell mt', Georgia, 'Hiragino Mincho Pro';
     font-size: 17px;
@@ -43,7 +43,7 @@ div.sphinxsidebar {
 hr {
     border: 1px solid #B1B4B6;
 }
- 
+
 div.body {
     background-color: #ffffff;
     color: #3E4349;
@@ -54,7 +54,7 @@ img.floatingflask {
     padding: 0 0 10px 10px;
     float: right;
 }
- 
+
 div.footer {
     width: {{ page_width }};
     margin: 20px auto 30px auto;
@@ -70,7 +70,7 @@ div.footer a {
 div.related {
     display: none;
 }
- 
+
 div.sphinxsidebar a {
     color: #444;
     text-decoration: none;
@@ -80,7 +80,7 @@ div.sphinxsidebar a {
 div.sphinxsidebar a:hover {
     border-bottom: 1px solid #999;
 }
- 
+
 div.sphinxsidebar {
     font-size: 14px;
     line-height: 1.5;
@@ -95,7 +95,7 @@ div.sphinxsidebarwrapper p.logo {
     margin: 0;
     text-align: center;
 }
- 
+
 div.sphinxsidebar h3,
 div.sphinxsidebar h4 {
     font-family: 'Garamond', 'Georgia', serif;
@@ -109,7 +109,7 @@ div.sphinxsidebar h4 {
 div.sphinxsidebar h4 {
     font-size: 20px;
 }
- 
+
 div.sphinxsidebar h3 a {
     color: #444;
 }
@@ -120,7 +120,7 @@ div.sphinxsidebar p.logo a:hover,
 div.sphinxsidebar h3 a:hover {
     border: none;
 }
- 
+
 div.sphinxsidebar p {
     color: #555;
     margin: 10px 0;
@@ -131,25 +131,25 @@ div.sphinxsidebar ul {
     padding: 0;
     color: #000;
 }
- 
+
 div.sphinxsidebar input {
     border: 1px solid #ccc;
     font-family: 'Georgia', serif;
     font-size: 1em;
 }
- 
+
 /* -- body styles ----------------------------------------------------------- */
- 
+
 a {
     color: #004B6B;
     text-decoration: underline;
 }
- 
+
 a:hover {
     color: #6D4100;
     text-decoration: underline;
 }
- 
+
 div.body h1,
 div.body h2,
 div.body h3,
@@ -161,25 +161,25 @@ div.body h6 {
     margin: 30px 0px 10px 0px;
     padding: 0;
 }
- 
+
 div.body h1 { margin-top: 0; padding-top: 0; font-size: 240%; }
 div.body h2 { font-size: 180%; }
 div.body h3 { font-size: 150%; }
 div.body h4 { font-size: 130%; }
 div.body h5 { font-size: 100%; }
 div.body h6 { font-size: 100%; }
- 
+
 a.headerlink {
     color: #ddd;
     padding: 0 4px;
     text-decoration: none;
 }
- 
+
 a.headerlink:hover {
     color: #444;
     background: #eaeaea;
 }
- 
+
 div.body p, div.body dd, div.body li {
     line-height: 1.4em;
 }
@@ -226,20 +226,20 @@ div.note {
     background-color: #eee;
     border: 1px solid #ccc;
 }
- 
+
 div.seealso {
     background-color: #ffc;
     border: 1px solid #ff6;
 }
- 
+
 div.topic {
     background-color: #eee;
 }
- 
+
 p.admonition-title {
     display: inline;
 }
- 
+
 p.admonition-title:after {
     content: ":";
 }
@@ -333,7 +333,7 @@ ul, ol {
     margin: 10px 0 10px 30px;
     padding: 0;
 }
- 
+
 pre {
     background: #eee;
     padding: 7px 30px;
@@ -350,7 +350,7 @@ dl dl pre {
     margin-left: -90px;
     padding-left: 90px;
 }
- 
+
 tt {
     background-color: #ecf0f3;
     color: #222;
@@ -385,3 +385,38 @@ a.footnote-reference:hover {
 a:hover tt {
     background: #EEE;
 }
+
+
+/* scrollbars */
+
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-button:start:decrement,
+::-webkit-scrollbar-button:end:increment {
+    display: block;
+    height: 10px;
+}
+
+::-webkit-scrollbar-button:vertical:increment {
+    background-color: #fff;
+}
+
+::-webkit-scrollbar-track-piece {
+    background-color: #eee;
+    -webkit-border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:vertical {
+    height: 50px;
+    background-color: #ccc;
+    -webkit-border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+    width: 50px;
+    background-color: #ccc;
+    -webkit-border-radius: 3px;
+}