From 52bb0d9b3d74f32413bf0fe5968abef6187eedb1 Mon Sep 17 00:00:00 2001
From: CHaBou <chabup@delean.fr>
Date: Mon, 4 Sep 2017 21:42:43 +0200
Subject: [PATCH] Fix term background and scrollbar

---
 lib/components/style-sheet.js | 21 ++++++++++++++++-----
 lib/components/terms.js       |  2 +-
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/lib/components/style-sheet.js b/lib/components/style-sheet.js
index 46332194..67a245e8 100644
--- a/lib/components/style-sheet.js
+++ b/lib/components/style-sheet.js
@@ -9,7 +9,7 @@ export default class StyleSheet extends React.PureComponent {
       fontFamily,
       fontSmoothing,
       foregroundColor,
-      backgroundColor
+      borderColor
     } = this.props
 
     return (
@@ -17,10 +17,10 @@ export default class StyleSheet extends React.PureComponent {
         __html: `
           .terminal {
             ${foregroundColor ? `color: ${foregroundColor};` : ''}
-            ${backgroundColor ? `background-color: ${backgroundColor};` : ''}
             ${fontFamily ? `font-family: ${fontFamily};` : ''}
             ${fontSize ? `font-size: ${fontSize}px;` : ''}
             ${fontSmoothing ? `-webkit-font-smoothing: ${fontSmoothing};` : ''}
+            background: transparent;
             font-feature-settings: "liga" 0;
             position: relative;
             user-select: none;
@@ -121,7 +121,7 @@ export default class StyleSheet extends React.PureComponent {
           }
 
           .terminal .composition-view {
-            background: #000;
+            background: transparent;
             color: #FFF;
             display: none;
             position: absolute;
@@ -134,8 +134,7 @@ export default class StyleSheet extends React.PureComponent {
           }
 
           .terminal .xterm-viewport {
-            /* On OS X this is required in order for the scroll bar to appear fully opaque */
-            background-color: #000;
+            background: transparent;
             overflow-y: scroll;
           }
 
@@ -2247,6 +2246,18 @@ export default class StyleSheet extends React.PureComponent {
             background-color: #eeeeee;
           }
 
+          ::-webkit-scrollbar {
+            width: 5px;
+          }
+          ::-webkit-scrollbar-thumb {
+            -webkit-border-radius: 10px;
+            border-radius: 10px;
+            background: ${borderColor};
+          }
+          ::-webkit-scrollbar-thumb:window-inactive {
+            background: ${borderColor};
+          }
+
           ${customCSS}
         `
       }} />
diff --git a/lib/components/terms.js b/lib/components/terms.js
index f05cb88e..d0f258bc 100644
--- a/lib/components/terms.js
+++ b/lib/components/terms.js
@@ -126,7 +126,7 @@ export default class Terms extends Component {
         fontFamily={this.props.fontFamily}
         fontSmoothing={this.props.fontSmoothing}
         foregroundColor={this.props.foregroundColor}
-        backgroundColor={this.props.backgroundColor}
+        borderColor={this.props.borderColor}
       />
     </div>);
   }