From f23c18be27dbc20b6eecfdda3677c96d1a9816b2 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Sat, 10 Dec 2016 09:57:03 +0100
Subject: [PATCH] Make handle as wide as it appears

Instead of having it stick out on both sides, let's make it as wide as
it appears.
---
 app/styles/base.css | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index f4ee929d..8c6c8108 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -289,20 +289,34 @@ input[type=button]:active, select:active {
 
 #noVNC_control_bar_handle {
   position: absolute;
-  left: -15px;
+  left: 100%;
+  right: auto;
   top: 0;
   transform: translateY(35px);
-  width: calc(100% + 30px);
+  width: 15px;
   height: 50px;
   z-index: -2;
   cursor: pointer;
-  border-radius: 5px;
+  border-radius: 0px 5px 5px 0px;
   background-color: rgb(83, 99, 122);
   background-image: url("../images/handle_bg.svg");
   background-repeat: no-repeat;
   background-position: right;
   box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5);
 }
+#noVNC_control_bar_handle::before {
+  /* This extra element is to get a proper shadow */
+  content: "";
+  position: absolute;
+  height: 3px;
+  width: 3px;
+  left: -3px;
+  top: 100%;
+  box-shadow: 3px 0 0 rgba(0, 0, 0, 0.5);
+}
+.noVNC_right #noVNC_control_bar_handle::before {
+  visibility: hidden;
+}
 #noVNC_control_bar_handle:after {
   content: "";
   transition: transform 0.5s ease-in-out;
@@ -321,6 +335,9 @@ input[type=button]:active, select:active {
 }
 .noVNC_right #noVNC_control_bar_handle {
   background-position: left;
+  left: auto;
+  right: 100%;
+  border-radius: 5px 0px 0px 5px;
 }
 .noVNC_right #noVNC_control_bar_handle:after {
   left: 5px;