mirror of
https://github.com/novnc/noVNC.git
synced 2026-05-27 07:29:41 +00:00
Another firefox issue is that height: 100% is calculated as 100% of the containing element even when the containing element is the window. This means that the size of any sibling element shifts the window size down by that much and causes the vertical scroll bars to appear. This doesn't happen in Chrome. - So instead, put a pad element inside the noVNC_screen element that is the size of the control bar. This is hidden by the control bar, however, it causes things to be sized correctly. - Also, rename noVNC_defaultScreen to noVNC_logo. - Clean some style specification out of the HTML.
269 lines
4.6 KiB
CSS
269 lines
4.6 KiB
CSS
body {
|
|
margin:0;
|
|
padding:0;
|
|
font-family: Helvetica;
|
|
/*Background image with light grey curve.*/
|
|
background-color:#494949;
|
|
background-repeat:no-repeat;
|
|
background-position:right bottom;
|
|
height:100%;
|
|
}
|
|
|
|
html {
|
|
height:100%;
|
|
}
|
|
|
|
#noVNC_controls ul {
|
|
list-style: none;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
#noVNC_controls li {
|
|
padding-bottom:8px;
|
|
}
|
|
|
|
#noVNC_host {
|
|
width:150px;
|
|
}
|
|
#noVNC_port {
|
|
width: 80px;
|
|
}
|
|
#noVNC_password {
|
|
width: 150px;
|
|
}
|
|
#noVNC_encrypt {
|
|
}
|
|
#noVNC_connectTimeout {
|
|
width: 30px;
|
|
}
|
|
#noVNC_connect_button {
|
|
width: 110px;
|
|
float:right;
|
|
}
|
|
|
|
/*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%
|
|
);
|
|
display:block;
|
|
height:44px;
|
|
left:0;
|
|
top:0;
|
|
width:100%;
|
|
z-index:200;
|
|
}
|
|
|
|
#noVNC_mobile_buttons {
|
|
position:fixed;
|
|
padding-left:10px;
|
|
padding-top:9px;
|
|
display: none;
|
|
}
|
|
|
|
#noVNC_buttons_right {
|
|
position:fixed;
|
|
padding-right:10px;
|
|
padding-top:9px;
|
|
right:0;
|
|
}
|
|
|
|
#noVNC_status_bar {
|
|
margin-top: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
#noVNC_status_bar div {
|
|
font-size: 12px;
|
|
padding-top: 4px;
|
|
width:100%;
|
|
}
|
|
|
|
.VNC_status_button, #clipboardbutton, #connectbutton {
|
|
font-size: 14px;
|
|
}
|
|
|
|
#noVNC_status {
|
|
height:20px;
|
|
text-align: center;
|
|
}
|
|
#noVNC_settings_menu {
|
|
margin: 3px;
|
|
text-align: left;
|
|
}
|
|
#noVNC_settings_menu ul {
|
|
list-style: none;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
#noVNC_apply {
|
|
float:right;
|
|
}
|
|
|
|
.VNC_buttons_right {
|
|
text-align: right;
|
|
}
|
|
.VNC_buttons_left {
|
|
text-align: left;
|
|
}
|
|
.noVNC_status_normal {
|
|
background: #eee;
|
|
}
|
|
.noVNC_status_error {
|
|
background: #f44;
|
|
}
|
|
.noVNC_status_warn {
|
|
background: #ff4;
|
|
}
|
|
|
|
/* Do not set width/height for VNC_screen or VNC_canvas or incorrect
|
|
* scaling will occur. Canvas resizes to remote VNC settings */
|
|
#noVNC_screen_pad {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
height: 44px;
|
|
}
|
|
#noVNC_screen {
|
|
text-align: center;
|
|
display: table;
|
|
width:100%;
|
|
height:100%;
|
|
background-color:#313131;
|
|
border-bottom-right-radius: 800px 600px;
|
|
/*border-top-left-radius: 800px 600px;*/
|
|
}
|
|
#VNC_canvas {
|
|
background: #eee;
|
|
}
|
|
|
|
#VNC_clipboard_clear_button {
|
|
float:right;
|
|
}
|
|
#VNC_clipboard_text {
|
|
font-size: 11px;
|
|
}
|
|
|
|
#noVNC_Settings {
|
|
width:200px;
|
|
}
|
|
|
|
#noVNC_clipboard_clear_button {
|
|
float:right;
|
|
}
|
|
|
|
/*Settings Bubble*/
|
|
.triangle-right {
|
|
position:relative;
|
|
padding:15px;
|
|
margin:1em 0 3em;
|
|
color:#fff;
|
|
background:#fff; /* default background for browsers without gradient support */
|
|
/* css3 */
|
|
/*background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
|
|
background:-moz-linear-gradient(#2e88c4, #075698);
|
|
background:-o-linear-gradient(#2e88c4, #075698);
|
|
background:linear-gradient(#2e88c4, #075698);*/
|
|
-webkit-border-radius:10px;
|
|
-moz-border-radius:10px;
|
|
border-radius:10px;
|
|
color:#000;
|
|
border:2px solid #E0E0E0;
|
|
}
|
|
|
|
.triangle-right.top:after {
|
|
border-color: transparent #E0E0E0;
|
|
border-width: 20px 20px 0 0;
|
|
bottom: auto;
|
|
left: auto;
|
|
right: 50px;
|
|
top: -20px;
|
|
}
|
|
|
|
.triangle-right:after {
|
|
content:"";
|
|
position:absolute;
|
|
bottom:-20px; /* value = - border-top-width - border-bottom-width */
|
|
left:50px; /* controls horizontal position */
|
|
border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */
|
|
border-style:solid;
|
|
border-color:#E0E0E0 transparent;
|
|
/* reduce the damage in FF3.0 */
|
|
display:block;
|
|
width:0;
|
|
}
|
|
|
|
.triangle-right.top:after {
|
|
top:-40px; /* value = - border-top-width - border-bottom-width */
|
|
right:50px; /* controls horizontal position */
|
|
bottom:auto;
|
|
left:auto;
|
|
border-width:40px 40px 0 0; /* vary these values to change the angle of the vertex */
|
|
border-color:transparent #E0E0E0;
|
|
}
|
|
|
|
/*Bubble contents divs*/
|
|
#noVNC_Settings {
|
|
margin-top:72px;
|
|
position:fixed;
|
|
right:100px;
|
|
display:none;
|
|
}
|
|
|
|
#noVNC_controls {
|
|
margin-top:72px;
|
|
position:fixed;
|
|
right:10px;
|
|
}
|
|
|
|
#noVNC_clipboard {
|
|
display:none;
|
|
margin-top:72px;
|
|
position:fixed;
|
|
right:180px;
|
|
}
|
|
|
|
/*Default noVNC logo.*/
|
|
#noVNC_logo {
|
|
width:400px;
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
font-size:160px;
|
|
color:yellow;
|
|
text-align:left;
|
|
font-family: 'Orbitron', sans-serif;
|
|
line-height:90%;
|
|
text-shadow:
|
|
5px 5px 0 #000,
|
|
-1px -1px 0 #000,
|
|
1px -1px 0 #000,
|
|
-1px 1px 0 #000,
|
|
1px 1px 0 #000;
|
|
}
|
|
|
|
#noVNC_logo span{
|
|
color:green;
|
|
}
|
|
|
|
#keyboardinput {
|
|
width:0px;
|
|
height:0px;
|
|
background-color:#313131;
|
|
border:0;
|
|
}
|
|
|
|
.noVNC_status_warn {
|
|
background-color:yellow;
|
|
}
|