10b9e1f47d
The MPL 2.0 license is a "file-level" copyleft license vs the
"project-level" nature of the L/GPL. The intention of noVNC has
always been that it should be easy to incorporate into existing
projects and sites whether free/open or proprietary/commercial. The MPL
2.0 is designed for this sort of combination project but still
requires that any distributed modifications to noVNC source files must
also be published under the same license.
In addition, the MPL 2.0 allows the code to be used in L/GPL projects
(the secondary license clause). This means that any projects that are
already incorporating noVNC should not be impacted by this change and
in fact it should clarify the licensing situation (the exact
application of the L/GPL to web applications and interpreted code is
somewhat ambiguous).
The HTML, CSS, image and font files continue to be under more
permissive licenses (see LICENSE.txt). The included websockify python
code remains under a LGPLv3 license although the include/websock.js
file from the websockify component is now under MPL 2.0 as well.
Permission was received from other noVNC authors to make this change to their
code license on the following dates:
- Chris Gordon (UI): Jun 24, 2012
- Antoine Mercadal (DOM,*util.js): Oct 10, 2012
- William Lightning (UltraVNC repeater): Oct 10, 2012
- Mike Tinglof (tight encoding): Oct 15, 2012
406 lines
9.0 KiB
CSS
406 lines
9.0 KiB
CSS
/*
|
|
* noVNC base CSS
|
|
* Copyright (C) 2012 Joel Martin
|
|
* noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
|
|
* This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
|
|
*/
|
|
|
|
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_path {
|
|
width: 100px;
|
|
}
|
|
#noVNC_connect_button {
|
|
width: 110px;
|
|
float:right;
|
|
}
|
|
|
|
|
|
#noVNC_view_drag_button {
|
|
display: none;
|
|
}
|
|
#sendCtrlAltDelButton {
|
|
display: none;
|
|
}
|
|
#noVNC_mobile_buttons {
|
|
display: none;
|
|
}
|
|
|
|
.noVNC-buttons-left {
|
|
float: left;
|
|
padding-left:10px;
|
|
padding-top:4px;
|
|
}
|
|
|
|
.noVNC-buttons-right {
|
|
float:right;
|
|
right: 0px;
|
|
padding-right:10px;
|
|
padding-top:4px;
|
|
}
|
|
|
|
#noVNC_status_bar {
|
|
margin-top: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
#noVNC_status_bar div {
|
|
font-size: 12px;
|
|
padding-top: 4px;
|
|
width:100%;
|
|
}
|
|
|
|
#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;
|
|
}
|
|
|
|
.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;*/
|
|
}
|
|
|
|
#noVNC_container, #noVNC_canvas {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
#noVNC_canvas {
|
|
left: 0px;
|
|
}
|
|
|
|
#VNC_clipboard_clear_button {
|
|
float:right;
|
|
}
|
|
#VNC_clipboard_text {
|
|
font-size: 11px;
|
|
}
|
|
|
|
#noVNC_clipboard_clear_button {
|
|
float:right;
|
|
}
|
|
|
|
/*Bubble contents divs*/
|
|
#noVNC_settings {
|
|
display:none;
|
|
margin-top:77px;
|
|
right:20px;
|
|
position:fixed;
|
|
}
|
|
|
|
#noVNC_controls {
|
|
display:none;
|
|
margin-top:77px;
|
|
right:12px;
|
|
position:fixed;
|
|
}
|
|
#noVNC_controls.top:after {
|
|
right:15px;
|
|
}
|
|
|
|
#noVNC_description {
|
|
display:none;
|
|
position:fixed;
|
|
|
|
margin-top:77px;
|
|
right:20px;
|
|
left:20px;
|
|
padding:15px;
|
|
color:#000;
|
|
background:#eee; /* default background for browsers without gradient support */
|
|
|
|
border:2px solid #E0E0E0;
|
|
-webkit-border-radius:10px;
|
|
-moz-border-radius:10px;
|
|
border-radius:10px;
|
|
}
|
|
|
|
#noVNC_clipboard {
|
|
display:none;
|
|
margin-top:77px;
|
|
right:30px;
|
|
position:fixed;
|
|
}
|
|
#noVNC_clipboard.top:after {
|
|
right:85px;
|
|
}
|
|
|
|
#keyboardinput {
|
|
width:1px;
|
|
height:1px;
|
|
background-color:#fff;
|
|
color:#fff;
|
|
border:0;
|
|
position: relative;
|
|
left: -40px;
|
|
z-index: -1;
|
|
}
|
|
|
|
.noVNC_status_warn {
|
|
background-color:yellow;
|
|
}
|
|
|
|
/*
|
|
* Advanced Styling
|
|
*/
|
|
|
|
/* Control bar */
|
|
#noVNC-control-bar {
|
|
position:fixed;
|
|
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+ */
|
|
background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
|
|
|
|
display:block;
|
|
height:44px;
|
|
left:0;
|
|
top:0;
|
|
width:100%;
|
|
z-index:200;
|
|
}
|
|
|
|
.noVNC_status_button {
|
|
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 {
|
|
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;*/
|
|
}
|
|
|
|
|
|
/*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;
|
|
}
|
|
|
|
/*Default noVNC logo.*/
|
|
/* From: http://fonts.googleapis.com/css?family=Orbitron:700 */
|
|
@font-face {
|
|
font-family: 'Orbitron';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
src: local('?'), url('Orbitron700.woff') format('woff'),
|
|
url('Orbitron700.ttf') format('truetype');
|
|
}
|
|
|
|
#noVNC_logo {
|
|
margin-top: 170px;
|
|
margin-left: 10px;
|
|
color:yellow;
|
|
text-align:left;
|
|
font-family: 'Orbitron', 'OrbitronTTF', 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;
|
|
}
|
|
|
|
/* ----------------------------------------
|
|
* Media sizing
|
|
* ----------------------------------------
|
|
*/
|
|
|
|
|
|
.noVNC_status_button {
|
|
font-size: 12px;
|
|
}
|
|
|
|
#noVNC_clipboard_text {
|
|
width: 500px;
|
|
}
|
|
|
|
#noVNC_logo {
|
|
font-size: 180px;
|
|
}
|
|
|
|
@media screen and (min-width: 481px) and (max-width: 640px) {
|
|
.noVNC_status_button {
|
|
font-size: 10px;
|
|
}
|
|
#noVNC_clipboard_text {
|
|
width: 410px;
|
|
}
|
|
#noVNC_logo {
|
|
font-size: 150px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 321px) and (max-width: 480px) {
|
|
.noVNC_status_button {
|
|
font-size: 10px;
|
|
}
|
|
#noVNC_clipboard_text {
|
|
width: 250px;
|
|
}
|
|
#noVNC_logo {
|
|
font-size: 110px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 320px) {
|
|
.noVNC_status_button {
|
|
font-size: 9px;
|
|
}
|
|
#noVNC_clipboard_text {
|
|
width: 220px;
|
|
}
|
|
#noVNC_logo {
|
|
font-size: 90px;
|
|
}
|
|
}
|