Merge pull request #167 from BoatsAreRockable/issue-163-scrollbars

Restyle custom scrollbars
charlielee · Jun 25, 2016 · eda83e9 · eda83e9
2 parents 2ecd93f + c1645b0
commit eda83e9
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 28 deletions.
diff --git a/app/css/animator.css b/app/css/animator.css
@@ -128,6 +128,8 @@ a {
   padding-right: 1em;
   height: 100%;
   width: 19em;
+  border-left: 1px solid #423e3e;
+  background-color: #2B2B2B;
 }
 
 #sidebar a,
@@ -493,27 +495,21 @@ a {
 /* ========== SCROLL BARS ============== */
 
 ::-webkit-scrollbar              {
-    background-color: rgba(9, 9, 9, 0.1);
-    width: 12px;
-    height: 12px;
+  background-color: rgba(9, 9, 9, 0.1);
+  width: 12px;
+  height: 12px;
 }
 
-::-webkit-scrollbar-button       { }
-
 ::-webkit-scrollbar-track        { background-color: transparent; }
 
 ::-webkit-scrollbar-track-piece  { background-color: transparent; }
 
 ::-webkit-scrollbar-thumb        {
-    background-color: #d8d8d8;
-    border-radius: 10px;
-    border: 1px solid #FFF;
+  background-color: #423e3e;
+  border-radius: 5px;
+  border: 1px solid #171717;
 }
 
-::-webkit-scrollbar-thumb:hover { background-color: #e8e8e8; }
-
-::-webkit-scrollbar-thumb:active { background-color: #fff; }
-
-::-webkit-scrollbar-corner       { background-color: #000; }
+::-webkit-scrollbar-thumb:hover { background-color: #5C5858; }
 
-::-webkit-resizer                { }
+::-webkit-scrollbar-thumb:active { background-color: #827E7E; }
diff --git a/app/css/index.css b/app/css/index.css
@@ -200,27 +200,21 @@ a {
 /* ========== SCROLL BARS ============== */
 
 ::-webkit-scrollbar              {
-    background-color: rgba(9, 9, 9, 0.1);
-    width: 12px;
-    height: 12px;
+  background-color: rgba(9, 9, 9, 0.1);
+  width: 12px;
+  height: 12px;
 }
 
-::-webkit-scrollbar-button       { }
-
 ::-webkit-scrollbar-track        { background-color: transparent; }
 
 ::-webkit-scrollbar-track-piece  { background-color: transparent; }
 
 ::-webkit-scrollbar-thumb        {
-    background-color: #d8d8d8;
-    border-radius: 10px;
-    border: 1px solid #FFF;
+  background-color: #423e3e;
+  border-radius: 5px;
+  border: 1px solid #171717;
 }
 
-::-webkit-scrollbar-thumb:hover { background-color: #e8e8e8; }
-
-::-webkit-scrollbar-thumb:active { background-color: #fff; }
-
-::-webkit-scrollbar-corner       { background-color: #000; }
+::-webkit-scrollbar-thumb:hover { background-color: #5C5858; }
 
-::-webkit-resizer                { }
+::-webkit-scrollbar-thumb:active { background-color: #827E7E; }