]> git.proxmox.com Git - mirror_novnc.git/blobdiff - vnc.html
Make control bar transparent when idle
[mirror_novnc.git] / vnc.html
index a660988b84b6e5ab50c5780f5d62d0849e099929..aeb63f8d73fa373e4fa836f1f19f0d559c7be510 100644 (file)
--- a/vnc.html
+++ b/vnc.html
 
 <body>
     <!-- noVNC Control Bar -->
-    <div id="noVNC_control_bar" class="noVNC_status_normal">
+    <div id="noVNC_control_bar_anchor" class="noVNC_vcenter">
 
-        <div class="noVNC_buttons_left">
+        <div id="noVNC_control_bar"><div class="noVNC_scroll">
+            <h1 class="noVNC_logo"><span>no</span><br />VNC</h1>
 
             <!-- Drag/Pan the viewport -->
             <input type="image" alt="viewport drag" src="app/images/drag.svg"
@@ -60,7 +61,7 @@
                 title="Move/Drag Viewport" />
 
             <!--noVNC Touch Device only buttons-->
-            <div id="noVNC_mobile_buttons" class="noVNC_hidden">
+            <div id="noVNC_mobile_buttons">
                 <input type="image" alt="No mousebutton" src="app/images/mouse_none.svg"
                     id="noVNC_mouse_button0" class="noVNC_button" />
                 <input type="image" alt="Left mousebutton" src="app/images/mouse_left.svg"
                 <input type="image" alt="Keyboard" src="app/images/keyboard.svg"
                     id="noVNC_keyboard_button" class="noVNC_button"
                     value="Keyboard" title="Show Keyboard" />
-                <div id="noVNC_extra_keys">
-                    <input type="image" alt="Extra keys" src="app/images/toggleextrakeys.svg"
-                        id="noVNC_toggle_extra_keys_button" class="noVNC_button" />
-                    <div id="noVNC_modifiers">
-                        <input type="image" alt="Ctrl" src="app/images/ctrl.svg"
-                            id="noVNC_toggle_ctrl_button" class="noVNC_button" />
-                        <input type="image" alt="Alt" src="app/images/alt.svg"
-                            id="noVNC_toggle_alt_button" class="noVNC_button" />
-                        <input type="image" alt="Tab" src="app/images/tab.svg"
-                            id="noVNC_send_tab_button" class="noVNC_button" />
-                        <input type="image" alt="Esc" src="app/images/esc.svg"
-                            id="noVNC_send_esc_button" class="noVNC_button" />
-                    </div>
+            </div>
+
+            <!-- Extra manual keys -->
+            <div id="noVNC_extra_keys">
+                <input type="image" alt="Extra keys" src="app/images/toggleextrakeys.svg"
+                    id="noVNC_toggle_extra_keys_button" class="noVNC_button" />
+                <div class="noVNC_vcenter">
+                <div id="noVNC_modifiers" class="noVNC_panel">
+                    <input type="image" alt="Ctrl" src="app/images/ctrl.svg"
+                        id="noVNC_toggle_ctrl_button" class="noVNC_button" />
+                    <input type="image" alt="Alt" src="app/images/alt.svg"
+                        id="noVNC_toggle_alt_button" class="noVNC_button" />
+                    <input type="image" alt="Tab" src="app/images/tab.svg"
+                        id="noVNC_send_tab_button" class="noVNC_button" />
+                    <input type="image" alt="Esc" src="app/images/esc.svg"
+                        id="noVNC_send_esc_button" class="noVNC_button" />
+                </div>
                 </div>
             </div>
-        </div>
 
-        <div class="noVNC_buttons_right">
             <!-- Send Ctrl+Alt+Delete -->
             <input type="image" alt="Ctrl+Alt+Del" src="app/images/ctrlaltdel.svg"
                 id="noVNC_send_ctrl_alt_del_button" class="noVNC_button"
             <input type="image" alt="Shutdown/Reboot" src="app/images/power.svg"
                 id="noVNC_xvp_button" class="noVNC_button"
                 title="Shutdown/Reboot..." />
+            <div class="noVNC_vcenter">
             <div id="noVNC_xvp" class="noVNC_panel">
                 <input type="button" id="noVNC_xvp_shutdown_button" value="Shutdown" />
                 <input type="button" id="noVNC_xvp_reboot_button" value="Reboot" />
                 <input type="button" id="noVNC_xvp_reset_button" value="Reset" />
             </div>
+            </div>
 
             <!-- Clipboard -->
             <input type="image" alt="Clipboard" src="app/images/clipboard.svg"
                 id="noVNC_clipboard_button" class="noVNC_button"
                 title="Clipboard" />
+            <div class="noVNC_vcenter">
             <div id="noVNC_clipboard" class="noVNC_panel">
                 <textarea id="noVNC_clipboard_text" rows=5>
                 </textarea>
                 <input id="noVNC_clipboard_clear_button" type="button"
                     value="Clear" class="noVNC_submit" />
             </div>
+            </div>
 
             <!-- Toggle fullscreen -->
             <input type="image" alt="Fullscreen" src="app/images/fullscreen.svg"
             <input type="image" alt="Settings" src="app/images/settings.svg"
                 id="noVNC_settings_button" class="noVNC_button"
                 title="Settings" />
+            <div class="noVNC_vcenter">
             <div id="noVNC_settings" class="noVNC_panel">
                 <ul>
                     <li><input id="noVNC_setting_encrypt" type="checkbox" /> Encrypt</li>
                     <li><input type="button" id="noVNC_settings_apply" value="Apply" class="noVNC_submit" /></li>
                 </ul>
             </div>
+            </div>
 
             <!-- Connection Controls -->
             <input type="image" alt="Connect" src="app/images/connect.svg"
             <input type="image" alt="Disconnect" src="app/images/disconnect.svg"
                 id="noVNC_disconnect_button" class="noVNC_button"
                 title="Disconnect" />
+            <div class="noVNC_vcenter">
             <div id="noVNC_connect_controls" class="noVNC_panel">
                 <ul>
                     <li><label><strong>Host: </strong><input id="noVNC_setting_host" /></label></li>
                     <li><input id="noVNC_connect_button" type="button" value="Connect" class="noVNC_submit" /></li>
                 </ul>
             </div>
-        </div>
-
-        <!-- Status Dialog -->
-        <div id="noVNC_status"></div>
+            </div>
+        </div></div>
 
     </div> <!-- End of noVNC_control_bar -->
 
+    <!-- Status Dialog -->
+    <div id="noVNC_status"></div>
+
+    <!-- Password Dialog -->
+    <div class="noVNC_center">
+    <div id="noVNC_password_dlg" class="noVNC_panel">
+        <ul>
+            <li><label><strong>Password: </strong><input id="noVNC_password_input" type="password" /></label></li>
+            <li><input id="noVNC_password_button" type="button" value="Send Password" class="noVNC_submit" /></li>
+        </ul>
+    </div>
+    </div>
+
     <div id="noVNC_container">
-        <h1 id="noVNC_logo"><span>no</span><br />VNC</h1>
+        <h1 id="noVNC_logo" class="noVNC_logo"><span>no</span><br />VNC</h1>
 
         <!-- HTML5 Canvas -->
-        <div id="noVNC_screen" class="noVNC_hidden">
+        <div id="noVNC_screen">
             <!-- Note that Google Chrome on Android doesn't respect any of these,
                  html attributes which attempt to disable text suggestions on the
                  on-screen keyboard. Let's hope Chrome implements the ime-mode