Move control bar hint outside of the control bar

Makes it a more independent element responsible for it's own positioning
and vertical centering. This makes the hint easier to adapt for external
CSS styles and makes it possible to remote the fixed size if needed.

2 files changed, 14 insertions, 9 deletions

diff --git a/app/styles/base.css b/app/styles/base.css
index ac78606..af73819 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -346,11 +346,17 @@ html {
 }
 
 /* Control bar hint */
-#noVNC_control_bar_hint {
+#noVNC_hint_anchor {
   position: fixed;
-  left: calc(100vw - 50px);
+  right: -50px;
+  left: auto;
+}
+#noVNC_control_bar_anchor.noVNC_right + #noVNC_hint_anchor {
+  left: -50px;
   right: auto;
-  top: calc(50vh - 25%);
+}
+#noVNC_control_bar_hint {
+  position: relative;
   transform: scale(0);
   width: 100px;
   height: 50%;
@@ -364,10 +370,6 @@ html {
   border-radius: 10px;
   transition-delay: 0s;
 }
-#noVNC_control_bar_anchor.noVNC_right #noVNC_control_bar_hint{
-  left: auto;
-  right: calc(100vw - 50px);
-}
 #noVNC_control_bar_hint.noVNC_active {
   visibility: visible;
   opacity: 1;
diff --git a/vnc.html b/vnc.html
index 030fc18..4993a7d 100644
--- a/vnc.html
+++ b/vnc.html
@@ -255,10 +255,13 @@
             </div>
         </div>
 
-        <div id="noVNC_control_bar_hint"></div>
-
     </div> <!-- End of noVNC_control_bar -->
 
+    <div id="noVNC_hint_anchor" class="noVNC_vcenter">
+        <div id="noVNC_control_bar_hint">
+        </div>
+    </div>
+
     <!-- Status Dialog -->
     <div id="noVNC_status"></div>