- CSS highlighting of buttons when selected.
- Keyboard button tweaked to allow show/hide toggle of keyboard.
Signed-off-by: Chris Gordon <snorkeyg@gmail.com>
/*Mobile buttons bar.*/
#noVNC-control-bar {
position:fixed;
- background-color:#6d84a2;
- background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0.5, rgb(109,132,162)),
- color-stop(1, rgb(140,157,179))
- );
- background-image: -moz-linear-gradient(
- center bottom,
- rgb(109,132,162) 50%,
- rgb(140,157,179) 100%
- );
+ background: #b2bdcd; /* Old browsers */
+background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
+background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bdcd), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
+background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
+background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
+background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2bdcd', endColorstr='#6e84a3',GradientType=0 ); /* IE6-9 */
+background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
display:block;
height:44px;
left:0;
/*Bubble contents divs*/
#noVNC_settings {
display:none;
- margin-top:72px;
- right:10px;
+ margin-top:77px;
+ right:20px;
position:fixed;
}
#noVNC_controls {
- margin-top:72px;
- right:10px;
+ margin-top:77px;
+ right:12px;
position:fixed;
}
#noVNC_controls.top:after {
#noVNC_clipboard {
display:none;
- margin-top:72px;
- right:20px;
+ margin-top:77px;
+ right:30px;
position:fixed;
}
#noVNC_clipboard.top:after {
#keyboardinput {
width:1px;
height:1px;
- background-color:#6d84a2;
+ background-color:#fff;
+ color:#fff;
border:0;
+ position: relative;
+ left: -40px;
+ z-index: -1;
}
.noVNC_status_warn {
.noVNC_status_button {
font-size: 12px;
- padding: 2px;
+ padding: 4px 4px;
vertical-align: middle;
+ border:1px solid #869dbc;
+ -webkit-border-radius: 6px;
+ -moz-border-radius: 6px;
+ border-radius: 6px;
+ background: #b2bdcd; /* Old browsers */
+ background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bdcd), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
+ background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2bdcd', endColorstr='#6e84a3',GradientType=0 ); /* IE6-9 */
+ background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
+ /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/
+
+
+}
+
+.noVNC_status_button_selected {
+ font-size: 12px;
+ padding: 4px 4px;
+ vertical-align: middle;
+ border:1px solid #4366a9;
+ -webkit-border-radius: 6px;
+ -moz-border-radius: 6px;
+ background: #779ced; /* Old browsers */
+ background: -moz-linear-gradient(top, #779ced 0%, #3970e0 49%, #2160dd 51%, #2463df 100%); /* FF3.6+ */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#779ced), color-stop(49%,#3970e0), color-stop(51%,#2160dd), color-stop(100%,#2463df)); /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Opera11.10+ */
+ background: -ms-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* IE10+ */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#779ced', endColorstr='#2463df',GradientType=0 ); /* IE6-9 */
+ background: linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* W3C */
+ /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/
}
+
#noVNC_clipboard_text {
width: 500px;
}
@media screen and (min-width: 481px) and (max-width: 640px) {
.noVNC_status_button {
font-size: 10px;
- padding: 1px;
}
#noVNC_clipboard_text {
width: 410px;
@media screen and (min-width: 321px) and (max-width: 480px) {
.noVNC_status_button {
font-size: 10px;
- padding: 0px;
}
#noVNC_clipboard_text {
width: 250px;
@media screen and (max-width: 320px) {
.noVNC_status_button {
font-size: 9px;
- padding: 0px;
}
#noVNC_clipboard_text {
width: 220px;
#noVNC-control-bar {
- background-color:#000;
- background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0.5, rgb(0,0,0)),
- color-stop(0.5, rgb(20,20,20))
- );
- background-image: -moz-linear-gradient(
- center bottom,
- rgb(0,0,0) 50%,
- rgb(20,20,20) 50%
- );
+ background: #4c4c4c; /* Old browsers */
+ background: -moz-linear-gradient(top, #4c4c4c 0%, #2c2c2c 50%, #000000 51%, #131313 100%); /* FF3.6+ */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(100%,#131313)); /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Opera11.10+ */
+ background: -ms-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* IE10+ */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
+ background: linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* W3C */
}
.triangle-right {
background-color:#000;
}
+.noVNC_status_button {
+ font-size: 12px;
+
+ vertical-align: middle;
+ border:1px solid #4c4c4c;
+ background: #4c4c4c; /* Old browsers */
+ background: -moz-linear-gradient(top, #4c4c4c 0%, #2c2c2c 50%, #000000 51%, #131313 100%); /* FF3.6+ */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(100%,#131313)); /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Opera11.10+ */
+ background: -ms-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* IE10+ */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
+ background: linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* W3C */
+
+}
+
+.noVNC_status_button_selected {
+
+background: #9dd53a; /* Old browsers */
+background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */
+background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */
+background: -webkit-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */
+background: -o-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Opera11.10+ */
+background: -ms-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* IE10+ */
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); /* IE6-9 */
+background: linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */
+}
settingsOpen : false,
connSettingsOpen : true,
clipboardOpen: false,
-
+keyboardVisible: false,
// Render default UI and initialize settings menu
load: function() {
var html = '', i, sheet, sheets, llevels;
//Toggle Clipboard Panel
if (UI.clipboardOpen == true) {
$D('noVNC_clipboard').style.display = "none";
+ $D('clipboardButton').className = "noVNC_status_button";
UI.clipboardOpen = false;
} else {
$D('noVNC_clipboard').style.display = "block";
+ $D('clipboardButton').className = "noVNC_status_button_selected";
UI.clipboardOpen = true;
}
},
if (UI.settingsOpen == true) {
UI.settingsApply();
UI.closeSettingsMenu();
+ $D('connectButton').className = "noVNC_status_button";
}
if (UI.clipboardOpen == true) {
UI.toggleClipboardPanel();
//Toggle Connection Panel
if (UI.connSettingsOpen == true) {
$D('noVNC_controls').style.display = "none";
+ $D('connectButton').className = "noVNC_status_button";
UI.connSettingsOpen = false;
} else {
$D('noVNC_controls').style.display = "block";
+ $D('connectButton').className = "noVNC_status_button_selected";
UI.connSettingsOpen = true;
$D('noVNC_host').focus();
}
UI.toggleConnectPanel();
}
$D('noVNC_settings').style.display = "block";
+ $D('settingsButton').className = "noVNC_status_button_selected";
UI.settingsOpen = true;
},
// Close menu (without applying settings)
closeSettingsMenu: function() {
$D('noVNC_settings').style.display = "none";
+ $D('settingsButton').className = "noVNC_status_button";
UI.settingsOpen = false;
},
drag = !UI.rfb.get_viewportDrag();
}
if (drag) {
- vmb.style.backgroundColor = "black";
- vmb.style.color = "lightgray";
+ $D('noVNC_view_drag_button').className = "noVNC_status_button_selected";
UI.rfb.set_viewportDrag(true);
} else {
- vmb.style.backgroundColor = "";
- vmb.style.color = "";
+ $D('noVNC_view_drag_button').className = "noVNC_status_button";
UI.rfb.set_viewportDrag(false);
}
},
// On touch devices, show the OS keyboard
showKeyboard: function() {
- $D('keyboardinput').focus();
+ if(UI.keyboardVisible == false) {
+ $D('keyboardinput').focus();
+ UI.keyboardVisible = true;
+ $D('showKeyboard').className =
+ "noVNC_status_button_selected";
+ } else if(UI.keyboardVisible == true) {
+ $D('keyboardinput').blur();
+ $D('showKeyboard').className =
+ "noVNC_status_button";
+ UI.keyboardVisible = false;
+ }
+
},
+keyInputBlur: function() {
+ $D('showKeyboard').className =
+ "noVNC_status_button";
+ //Weird bug in iOS if you change keyboardVisible
+ //here it does not actually occur so next time
+ //you click keyboard icon it doesnt work.
+ var t=setTimeout("UI.setKeyboard()",100)
+
+},
+
+setKeyboard: function() {
+ UI.keyboardVisible = false;
+},
// iOS < Version 5 does not support position fixed. Javascript workaround:
setOnscroll: function() {
<div id="noVNC-control-bar">
<!--noVNC Mobile Device only Buttons-->
<div class="noVNC-buttons-left">
- <input type="image" src="images/move.png"
+ <input type="image" src="images/drag_sml.png"
id="noVNC_view_drag_button" class="noVNC_status_button"
- value="Move" title="Move/Drag Viewport"
+ title="Move/Drag Viewport"
onclick="UI.setViewDrag();">
<div id="noVNC_mobile_buttons">
- <input type="button" class="noVNC_status_button"
- id="noVNC_mouse_button0" value=" "
+ <input type="image" src="images/nobutton_mouse.png"
+ class="noVNC_status_button"
+ id="noVNC_mouse_button0"
onclick="UI.setMouseButton(1);">
- <input type="button" class="noVNC_status_button"
- id="noVNC_mouse_button1" value="L"
+ <input type="image" src="images/left_mouse.png"
+ class="noVNC_status_button"
+ id="noVNC_mouse_button1"
onclick="UI.setMouseButton(2);">
- <input type="button" class="noVNC_status_button"
- id="noVNC_mouse_button2" value="M"
+ <input type="image" src="images/middle_mouse.png"
+ class="noVNC_status_button"
+ id="noVNC_mouse_button2"
onclick="UI.setMouseButton(4);">
- <input type="button" class="noVNC_status_button"
- id="noVNC_mouse_button4" value="R"
+ <input type="image" src="images/right_mouse.png"
+ class="noVNC_status_button"
+ id="noVNC_mouse_button4"
onclick="UI.setMouseButton(0);">
- <input type="image" src="images/keyboard.png"
+ <input type="image" src="images/keyboard_sml.png"
id="showKeyboard" class="noVNC_status_button"
value="Keyboard" title="Show Keyboard"
onclick="UI.showKeyboard()"/>
<input type="url"
autocapitalize="off" autocorrect="off"
id="keyboardinput" class="noVNC_status_button"
- onKeyDown="onKeyDown(event);"/>
+ onKeyDown="onKeyDown(event);" onblur="UI.keyInputBlur();"/>
</div>
</div>
<!--noVNC Buttons-->
<div class="noVNC-buttons-right">
- <input type="button" class="noVNC_status_button"
+ <input type="image" src="images/ctrlaltdel_sml.png"
+ class="noVNC_status_button"
value="CtrlAltDel" id="sendCtrlAltDelButton"
onclick="UI.sendCtrlAltDel();" />
- <input type="image" src="images/clipboard.png"
+ <input type="image" src="images/clipboard_sml.png"
id="clipboardButton" class="noVNC_status_button"
value="Clipboard" title="Clipboard"
onclick="UI.toggleClipboardPanel();" />
- <input type="image" src="images/settings.png"
+ <input type="image" src="images/settings_sml.png"
id="settingsButton" class="noVNC_status_button"
value="Settings" title="Settings"
onclick="UI.toggleSettingsPanel();" />
- <input type="image" src="images/connect.png"
- id="connectButton" class="noVNC_status_button"
+ <input type="image" src="images/connect_sml.png"
+ id="connectButton" class="noVNC_status_button_selected"
value="Connect" title="Connect"
onclick="UI.toggleConnectPanel()" />
- <input type="image" src="images/disconnect.png"
+ <input type="image" src="images/disconnect_sml.png"
id="disconnectButton" class="noVNC_status_button"
value="Disconnect" title="Disconnect"
onclick="UI.disconnect()" />