From 58993d2eade1f5b624ca5db93103c96a667fb9e0 Mon Sep 17 00:00:00 2001
From: Caleb John <calebjohn4@gmail.com>
Date: Thu, 14 Feb 2019 15:21:21 -0700
Subject: [PATCH] Add styling to the scrollbars (#1204)

---
 ElectronClient/app/style.css      | 20 ++++++++++++++++++++
 ReactNativeClient/lib/MdToHtml.js | 16 ++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/ElectronClient/app/style.css b/ElectronClient/app/style.css
index 82d1a615d..94ef30faf 100644
--- a/ElectronClient/app/style.css
+++ b/ElectronClient/app/style.css
@@ -22,6 +22,26 @@ table td, table th {
 	border: 1px solid #ccc;
 }
 
+::-webkit-scrollbar {
+	width: 7px;
+}
+
+::-webkit-scrollbar-track {
+	border: none;
+}
+ 
+::-webkit-scrollbar-thumb {
+	background: rgba(100, 100, 100, 0.3); 
+	border-radius: 5px;
+}
+
+::-webkit-scrollbar-track:hover {
+	background: rgba(0, 0, 0, 0.1); 
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background: rgba(100, 100, 100, 0.7); 
+}
 /* By default, the Ice Editor displays invalid characters, such as non-breaking spaces
    as red boxes, but since those are actually valid characters and common in imported
    Evernote data, we hide them here. */
diff --git a/ReactNativeClient/lib/MdToHtml.js b/ReactNativeClient/lib/MdToHtml.js
index 28e222a31..e95709dac 100644
--- a/ReactNativeClient/lib/MdToHtml.js
+++ b/ReactNativeClient/lib/MdToHtml.js
@@ -536,6 +536,22 @@ class MdToHtml {
 				font-family: ` + fontFamily + `;
 				padding-bottom: ` + options.paddingBottom + `;
 			}
+			::-webkit-scrollbar {
+				width: 7px;
+			}
+			::-webkit-scrollbar-track {
+				border: none;
+			}
+			::-webkit-scrollbar-thumb {
+				background: rgba(100, 100, 100, 0.3); 
+				border-radius: 5px;
+			}
+			::-webkit-scrollbar-track:hover {
+				background: rgba(0, 0, 0, 0.1); 
+			}
+			::-webkit-scrollbar-thumb:hover {
+				background: rgba(100, 100, 100, 0.7); 
+			}
 			p, h1, h2, h3, h4, h5, h6, ul, table {
 				margin-top: .6em;
 				margin-bottom: .65em;