From aeb3dc8df6295ce6be807686b16ccbaa10ff394b Mon Sep 17 00:00:00 2001
From: Le Tan <tamlokveer@gmail.com>
Date: Tue, 12 Dec 2017 21:04:51 +0800
Subject: [PATCH] themes: style the scrollbar in CSS

---
 src/resources/themes/v_pure/v_pure.css   | 69 ++++++++++++++++++++++++
 src/resources/themes/v_pure/v_pure.qss   |  5 ++
 src/resources/themes/v_white/v_white.css | 69 ++++++++++++++++++++++++
 src/resources/themes/v_white/v_white.qss |  5 ++
 4 files changed, 148 insertions(+)

diff --git a/src/resources/themes/v_pure/v_pure.css b/src/resources/themes/v_pure/v_pure.css
index 538e83e8..ad6340fe 100644
--- a/src/resources/themes/v_pure/v_pure.css
+++ b/src/resources/themes/v_pure/v_pure.css
@@ -235,3 +235,72 @@ table.hljs-ln tr td.hljs-ln-numbers {
 table.hljs-ln tr td.hljs-ln-code {
 	padding-left: 10px;
 }
+
+::-webkit-scrollbar {
+    background-color: #EAEAEA;
+    width: 14px;
+    height: 14px;
+    border: none;
+}
+
+::-webkit-scrollbar-corner {
+    background-color: #EAEAEA;
+}
+
+::-webkit-scrollbar-button {
+    /* This selector affects the styling of both the up & down and left & right buttons of a scrollbar */
+    height: 14px;
+    width: 14px;
+    background-color: #EAEAEA;
+}
+
+::-webkit-scrollbar-button:hover {
+    background-color: #D0D0D0;
+}
+
+::-webkit-scrollbar-button:active {
+    background-color: #B2B2B2;
+}
+
+::-webkit-scrollbar-track {
+    /* This selector affects the styling of the area in the scrollbar between the two buttons */
+    background-color: #EAEAEA;
+}
+
+::-webkit-scrollbar-thumb {
+    /* This selector affects the styling of draggable element of the scollbar */
+    border: none;
+    background-color: #DADADA;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: #D0D0D0;
+}
+
+::-webkit-scrollbar-thumb:active {
+    background-color: #B2B2B2;
+}
+
+::-webkit-scrollbar-button:horizontal:increment {
+    background-image: url(right.svg);
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+::-webkit-scrollbar-button:horizontal:decrement {
+    background-image: url(left.svg);
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+::-webkit-scrollbar-button:vertical:increment {
+    background-image: url(down.svg);
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+::-webkit-scrollbar-button:vertical:decrement {
+    background-image: url(up.svg);
+    background-repeat: no-repeat;
+    background-size: contain;
+}
diff --git a/src/resources/themes/v_pure/v_pure.qss b/src/resources/themes/v_pure/v_pure.qss
index f153a16f..b89a202e 100644
--- a/src/resources/themes/v_pure/v_pure.qss
+++ b/src/resources/themes/v_pure/v_pure.qss
@@ -1224,3 +1224,8 @@ QWidget#FindReplaceTitleWidget {
 QWidget[ToolBoxTitle="true"] {
     border-bottom: 2px solid @toolbox_title_border;
 }
+
+QAbstractScrollArea::corner {
+    background: @scrollbar_bg;
+    border: none;
+}
diff --git a/src/resources/themes/v_white/v_white.css b/src/resources/themes/v_white/v_white.css
index f82c987d..6b37fb15 100644
--- a/src/resources/themes/v_white/v_white.css
+++ b/src/resources/themes/v_white/v_white.css
@@ -234,3 +234,72 @@ table.hljs-ln tr td.hljs-ln-numbers {
 table.hljs-ln tr td.hljs-ln-code {
 	padding-left: 10px;
 }
+
+::-webkit-scrollbar {
+    background-color: #EEEEEE;
+    width: 14px;
+    height: 14px;
+    border: none;
+}
+
+::-webkit-scrollbar-corner {
+    background-color: #EEEEEE;
+}
+
+::-webkit-scrollbar-button {
+    /* This selector affects the styling of both the up & down and left & right buttons of a scrollbar */
+    height: 14px;
+    width: 14px;
+    background-color: #EEEEEE;
+}
+
+::-webkit-scrollbar-button:hover {
+    background-color: #C0C0C0;
+}
+
+::-webkit-scrollbar-button:active {
+    background-color: #808080;
+}
+
+::-webkit-scrollbar-track {
+    /* This selector affects the styling of the area in the scrollbar between the two buttons */
+    background-color: #EEEEEE;
+}
+
+::-webkit-scrollbar-thumb {
+    /* This selector affects the styling of draggable element of the scollbar */
+    border: none;
+    background-color: #D0D0D0;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: #C0C0C0;
+}
+
+::-webkit-scrollbar-thumb:active {
+    background-color: #808080;
+}
+
+::-webkit-scrollbar-button:horizontal:increment {
+    background-image: url(right.svg);
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+::-webkit-scrollbar-button:horizontal:decrement {
+    background-image: url(left.svg);
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+::-webkit-scrollbar-button:vertical:increment {
+    background-image: url(down.svg);
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+::-webkit-scrollbar-button:vertical:decrement {
+    background-image: url(up.svg);
+    background-repeat: no-repeat;
+    background-size: contain;
+}
diff --git a/src/resources/themes/v_white/v_white.qss b/src/resources/themes/v_white/v_white.qss
index 807548a6..2d136c5f 100644
--- a/src/resources/themes/v_white/v_white.qss
+++ b/src/resources/themes/v_white/v_white.qss
@@ -1119,3 +1119,8 @@ QHeaderView::up-arrow {
 QWidget#FindReplaceTitleWidget {
     background: @title_bg;
 }
+
+QAbstractScrollArea::corner {
+    background: @scrollbar_bg;
+    border: none;
+}