mirror of
https://github.com/novnc/noVNC.git
synced 2026-05-26 15:13:34 +00:00
d58f8b5144
Clarify in LICENSE.txt that the noVNC core library is the part that is LGPLv3 licensed. The HTML, CSS, images and fonts are separate from the core library and can be modified and distributed with the noVNC core but under their own license conditions. HTML and CSS: 2-Clause BSD Fonts: SIL OFL 1.1 Images: CC BY SA 3.0 In other words, you can modify the layout and appearance of of noVNC to integrate with an existing or new web site or application without having to publish the source for those modifications under the LGPLv3. However, use of and modification of the noVNC core library (i.e. the core Javascript that makes up noVNC) must still be according to the LGPLv3. Chris Gordon was the other contributor to the HTML, CSS, and images included with noVNC and gave permission for this license clarification on June 23, 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 LGPL-3 (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;
|
|
}
|
|
}
|