From 57921e3fe008f5b841939a18fbf1b0531d87dc3b Mon Sep 17 00:00:00 2001
From: Daniel Imms <daimms@microsoft.com>
Date: Mon, 19 Jun 2017 11:18:55 -0700
Subject: [PATCH] Render selection on top of rows

Fixes #718
---
 src/xterm.css | 4 +++-
 src/xterm.js  | 3 +--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/xterm.css b/src/xterm.css
index 37f661a7..eef60b45 100644
--- a/src/xterm.css
+++ b/src/xterm.css
@@ -192,11 +192,13 @@
     position: absolute;
     top: 0;
     left: 0;
+    z-index: 1;
+    opacity: 0.3;
 }
 
 .terminal .xterm-selection div {
     position: absolute;
-    background-color: #555;
+    background-color: #fff;
 }
 
 /*
diff --git a/src/xterm.js b/src/xterm.js
index 0abcbeae..9bfb275b 100644
--- a/src/xterm.js
+++ b/src/xterm.js
@@ -647,8 +647,7 @@ Terminal.prototype.open = function(parent, focus) {
   this.viewportScrollArea.classList.add('xterm-scroll-area');
   this.viewportElement.appendChild(this.viewportScrollArea);
 
-  // Create the selection container. This needs to be added before the
-  // rowContainer as the selection must be below the text.
+  // Create the selection container.
   this.selectionContainer = document.createElement('div');
   this.selectionContainer.classList.add('xterm-selection');
   this.element.appendChild(this.selectionContainer);