mirror of
https://github.com/novnc/noVNC.git
synced 2026-05-27 15:39:41 +00:00
84586c0f17
* Change copyright header This updates the copyright header to say "The noVNC Authors". People who previously had copyright listings are now under the AUTHORS file.
901 lines
18 KiB
CSS
901 lines
18 KiB
CSS
/*
|
|
* noVNC base CSS
|
|
* Copyright (C) 2018 The noVNC Authors
|
|
* noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
|
|
* This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
|
|
*/
|
|
|
|
/*
|
|
* Z index layers:
|
|
*
|
|
* 0: Main screen
|
|
* 10: Control bar
|
|
* 50: Transition blocker
|
|
* 60: Connection popups
|
|
* 100: Status bar
|
|
* ...
|
|
* 1000: Javascript crash
|
|
* ...
|
|
* 10000: Max (used for polyfills)
|
|
*/
|
|
|
|
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%;
|
|
touch-action: none;
|
|
}
|
|
|
|
html {
|
|
height:100%;
|
|
}
|
|
|
|
.noVNC_only_touch.noVNC_hidden {
|
|
display: none;
|
|
}
|
|
|
|
.noVNC_disabled {
|
|
color: rgb(128, 128, 128);
|
|
}
|
|
|
|
/* ----------------------------------------
|
|
* Spinner
|
|
* ----------------------------------------
|
|
*/
|
|
|
|
.noVNC_spinner {
|
|
position: relative;
|
|
}
|
|
.noVNC_spinner, .noVNC_spinner::before, .noVNC_spinner::after {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 2px;
|
|
box-shadow: -60px 10px 0 rgba(255, 255, 255, 0);
|
|
animation: noVNC_spinner 1.0s linear infinite;
|
|
}
|
|
.noVNC_spinner::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0px;
|
|
top: 0px;
|
|
animation-delay: -0.1s;
|
|
}
|
|
.noVNC_spinner::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
animation-delay: 0.1s;
|
|
}
|
|
@keyframes noVNC_spinner {
|
|
0% { box-shadow: -60px 10px 0 rgba(255, 255, 255, 0); width: 20px; }
|
|
25% { box-shadow: 20px 10px 0 rgba(255, 255, 255, 1); width: 10px; }
|
|
50% { box-shadow: 60px 10px 0 rgba(255, 255, 255, 0); width: 10px; }
|
|
}
|
|
|
|
/* ----------------------------------------
|
|
* Input Elements
|
|
* ----------------------------------------
|
|
*/
|
|
|
|
input[type=input], input[type=password], input[type=number],
|
|
input:not([type]), textarea {
|
|
/* Disable default rendering */
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
background: none;
|
|
|
|
margin: 2px;
|
|
padding: 2px;
|
|
border: 1px solid rgb(192, 192, 192);
|
|
border-radius: 5px;
|
|
color: black;
|
|
background: linear-gradient(to top, rgb(255, 255, 255) 80%, rgb(240, 240, 240));
|
|
}
|
|
|
|
input[type=button], input[type=submit], select {
|
|
/* Disable default rendering */
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
background: none;
|
|
|
|
margin: 2px;
|
|
padding: 2px;
|
|
border: 1px solid rgb(192, 192, 192);
|
|
border-bottom-width: 2px;
|
|
border-radius: 5px;
|
|
color: black;
|
|
background: linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240));
|
|
|
|
/* This avoids it jumping around when :active */
|
|
vertical-align: middle;
|
|
}
|
|
|
|
input[type=button], input[type=submit] {
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
option {
|
|
color: black;
|
|
background: white;
|
|
}
|
|
|
|
input[type=input]:focus, input[type=password]:focus,
|
|
input:not([type]):focus, input[type=button]:focus,
|
|
input[type=submit]:focus,
|
|
textarea:focus, select:focus {
|
|
box-shadow: 0px 0px 3px rgba(74, 144, 217, 0.5);
|
|
border-color: rgb(74, 144, 217);
|
|
outline: none;
|
|
}
|
|
|
|
input[type=button]::-moz-focus-inner,
|
|
input[type=submit]::-moz-focus-inner {
|
|
border: none;
|
|
}
|
|
|
|
input[type=input]:disabled, input[type=password]:disabled,
|
|
input:not([type]):disabled, input[type=button]:disabled,
|
|
input[type=submit]:disabled, input[type=number]:disabled,
|
|
textarea:disabled, select:disabled {
|
|
color: rgb(128, 128, 128);
|
|
background: rgb(240, 240, 240);
|
|
}
|
|
|
|
input[type=button]:active, input[type=submit]:active,
|
|
select:active {
|
|
border-bottom-width: 1px;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
:root:not(.noVNC_touch) input[type=button]:hover:not(:disabled),
|
|
:root:not(.noVNC_touch) input[type=submit]:hover:not(:disabled),
|
|
:root:not(.noVNC_touch) select:hover:not(:disabled) {
|
|
background: linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
|
|
}
|
|
|
|
/* ----------------------------------------
|
|
* WebKit centering hacks
|
|
* ----------------------------------------
|
|
*/
|
|
|
|
.noVNC_center {
|
|
/*
|
|
* This is a workaround because webkit misrenders transforms and
|
|
* uses non-integer coordinates, resulting in blurry content.
|
|
* Ideally we'd use "top: 50%; transform: translateY(-50%);" on
|
|
* the objects instead.
|
|
*/
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
}
|
|
.noVNC_center > * {
|
|
pointer-events: auto;
|
|
}
|
|
.noVNC_vcenter {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
}
|
|
.noVNC_vcenter > * {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* ----------------------------------------
|
|
* Layering
|
|
* ----------------------------------------
|
|
*/
|
|
|
|
.noVNC_connect_layer {
|
|
z-index: 60;
|
|
}
|
|
|
|
/* ----------------------------------------
|
|
* Fallback error
|
|
* ----------------------------------------
|
|
*/
|
|
|
|
#noVNC_fallback_error {
|
|
z-index: 1000;
|
|
visibility: hidden;
|
|
}
|
|
#noVNC_fallback_error.noVNC_open {
|
|
visibility: visible;
|
|
}
|
|
|
|
#noVNC_fallback_error > div {
|
|
max-width: 90%;
|
|
padding: 15px;
|
|
|
|
transition: 0.5s ease-in-out;
|
|
|
|
transform: translateY(-50px);
|
|
opacity: 0;
|
|
|
|
text-align: center;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
|
|
border-radius: 10px;
|
|
box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
|
|
background: rgba(200,55,55,0.8);
|
|
}
|
|
#noVNC_fallback_error.noVNC_open > div {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
#noVNC_fallback_errormsg {
|
|
font-weight: normal;
|
|
}
|
|
|
|
#noVNC_fallback_errormsg .noVNC_message {
|
|
display: inline-block;
|
|
text-align: left;
|
|
font-family: monospace;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
#noVNC_fallback_error .noVNC_location {
|
|
font-style: italic;
|
|
font-size: 0.8em;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
#noVNC_fallback_error .noVNC_stack {
|
|
max-height: 50vh;
|
|
padding: 10px;
|
|
margin: 10px;
|
|
font-size: 0.8em;
|
|
text-align: left;
|
|
font-family: monospace;
|
|
white-space: pre;
|
|
border: 1px solid rgba(0, 0, 0, 0.5);
|
|
background: rgba(0, 0, 0, 0.2);
|
|
overflow: auto;
|
|
}
|
|
|
|
/* ----------------------------------------
|
|
* Control Bar
|
|
* ----------------------------------------
|
|
*/
|
|
|
|
#noVNC_control_bar_anchor {
|
|
/* The anchor is needed to get z-stacking to work */
|
|
position: fixed;
|
|
z-index: 10;
|
|
|
|
transition: 0.5s ease-in-out;
|
|
|
|
/* Edge misrenders animations wihthout this */
|
|
transform: translateX(0);
|
|
}
|
|
:root.noVNC_connected #noVNC_control_bar_anchor.noVNC_idle {
|
|
opacity: 0.8;
|
|
}
|
|
#noVNC_control_bar_anchor.noVNC_right {
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
|
|
#noVNC_control_bar {
|
|
position: relative;
|
|
left: -100%;
|
|
|
|
transition: 0.5s ease-in-out;
|
|
|
|
background-color: rgb(110, 132, 163);
|
|
border-radius: 0 10px 10px 0;
|
|
|
|
}
|
|
#noVNC_control_bar.noVNC_open {
|
|
box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
|
|
left: 0;
|
|
}
|
|
#noVNC_control_bar::before {
|
|
/* This extra element is to get a proper shadow */
|
|
content: "";
|
|
position: absolute;
|
|
z-index: -1;
|
|
height: 100%;
|
|
width: 30px;
|
|
left: -30px;
|
|
transition: box-shadow 0.5s ease-in-out;
|
|
}
|
|
#noVNC_control_bar.noVNC_open::before {
|
|
box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
|
|
}
|
|
.noVNC_right #noVNC_control_bar {
|
|
left: 100%;
|
|
border-radius: 10px 0 0 10px;
|
|
}
|
|
.noVNC_right #noVNC_control_bar.noVNC_open {
|
|
left: 0;
|
|
}
|
|
.noVNC_right #noVNC_control_bar::before {
|
|
visibility: hidden;
|
|
}
|
|
|
|
#noVNC_control_bar_handle {
|
|
position: absolute;
|
|
left: -15px;
|
|
top: 0;
|
|
transform: translateY(35px);
|
|
width: calc(100% + 30px);
|
|
height: 50px;
|
|
z-index: -1;
|
|
cursor: pointer;
|
|
border-radius: 5px;
|
|
background-color: rgb(83, 99, 122);
|
|
background-image: url("../images/handle_bg.svg");
|
|
background-repeat: no-repeat;
|
|
background-position: right;
|
|
box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5);
|
|
}
|
|
#noVNC_control_bar_handle:after {
|
|
content: "";
|
|
transition: transform 0.5s ease-in-out;
|
|
background: url("../images/handle.svg");
|
|
position: absolute;
|
|
top: 22px; /* (50px-6px)/2 */
|
|
right: 5px;
|
|
width: 5px;
|
|
height: 6px;
|
|
}
|
|
#noVNC_control_bar.noVNC_open #noVNC_control_bar_handle:after {
|
|
transform: translateX(1px) rotate(180deg);
|
|
}
|
|
:root:not(.noVNC_connected) #noVNC_control_bar_handle {
|
|
display: none;
|
|
}
|
|
.noVNC_right #noVNC_control_bar_handle {
|
|
background-position: left;
|
|
}
|
|
.noVNC_right #noVNC_control_bar_handle:after {
|
|
left: 5px;
|
|
right: 0;
|
|
transform: translateX(1px) rotate(180deg);
|
|
}
|
|
.noVNC_right #noVNC_control_bar.noVNC_open #noVNC_control_bar_handle:after {
|
|
transform: none;
|
|
}
|
|
#noVNC_control_bar_handle div {
|
|
position: absolute;
|
|
right: -35px;
|
|
top: 0;
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
:root:not(.noVNC_touch) #noVNC_control_bar_handle div {
|
|
display: none;
|
|
}
|
|
.noVNC_right #noVNC_control_bar_handle div {
|
|
left: -35px;
|
|
right: auto;
|
|
}
|
|
|
|
#noVNC_control_bar .noVNC_scroll {
|
|
max-height: 100vh; /* Chrome is buggy with 100% */
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
padding: 0 10px 0 5px;
|
|
}
|
|
.noVNC_right #noVNC_control_bar .noVNC_scroll {
|
|
padding: 0 5px 0 10px;
|
|
}
|
|
|
|
/* Control bar hint */
|
|
#noVNC_control_bar_hint {
|
|
position: fixed;
|
|
left: calc(100vw - 50px);
|
|
right: auto;
|
|
top: 50%;
|
|
transform: translateY(-50%) scale(0);
|
|
width: 100px;
|
|
height: 50%;
|
|
max-height: 600px;
|
|
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: 0.2s ease-in-out;
|
|
background: transparent;
|
|
box-shadow: 0 0 10px black, inset 0 0 10px 10px rgba(110, 132, 163, 0.8);
|
|
border-radius: 10px;
|
|
transition-delay: 0s;
|
|
}
|
|
#noVNC_control_bar_anchor.noVNC_right #noVNC_control_bar_hint{
|
|
left: auto;
|
|
right: calc(100vw - 50px);
|
|
}
|
|
#noVNC_control_bar_hint.noVNC_active {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transition-delay: 0.2s;
|
|
transform: translateY(-50%) scale(1);
|
|
}
|
|
|
|
/* General button style */
|
|
.noVNC_button {
|
|
display: block;
|
|
padding: 4px 4px;
|
|
margin: 10px 0;
|
|
vertical-align: middle;
|
|
border:1px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: 6px;
|
|
}
|
|
.noVNC_button.noVNC_selected {
|
|
border-color: rgba(0, 0, 0, 0.8);
|
|
background: rgba(0, 0, 0, 0.5);
|
|
}
|
|
.noVNC_button:disabled {
|
|
opacity: 0.4;
|
|
}
|
|
.noVNC_button:focus {
|
|
outline: none;
|
|
}
|
|
.noVNC_button:active {
|
|
padding-top: 5px;
|
|
padding-bottom: 3px;
|
|
}
|
|
/* Android browsers don't properly update hover state if touch events
|
|
* are intercepted, but focus should be safe to display */
|
|
:root:not(.noVNC_touch) .noVNC_button.noVNC_selected:hover,
|
|
.noVNC_button.noVNC_selected:focus {
|
|
border-color: rgba(0, 0, 0, 0.4);
|
|
background: rgba(0, 0, 0, 0.2);
|
|
}
|
|
:root:not(.noVNC_touch) .noVNC_button:hover,
|
|
.noVNC_button:focus {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
.noVNC_button.noVNC_hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* Panels */
|
|
.noVNC_panel {
|
|
transform: translateX(25px);
|
|
|
|
transition: 0.5s ease-in-out;
|
|
|
|
max-height: 100vh; /* Chrome is buggy with 100% */
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
|
|
padding: 15px;
|
|
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
color: #000;
|
|
border: 2px solid #E0E0E0;
|
|
box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
|
|
}
|
|
.noVNC_panel.noVNC_open {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transform: translateX(75px);
|
|
}
|
|
.noVNC_right .noVNC_vcenter {
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
.noVNC_right .noVNC_panel {
|
|
transform: translateX(-25px);
|
|
}
|
|
.noVNC_right .noVNC_panel.noVNC_open {
|
|
transform: translateX(-75px);
|
|
}
|
|
|
|
.noVNC_panel hr {
|
|
border: none;
|
|
border-top: 1px solid rgb(192, 192, 192);
|
|
}
|
|
|
|
.noVNC_panel label {
|
|
display: block;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.noVNC_panel .noVNC_heading {
|
|
background-color: rgb(110, 132, 163);
|
|
border-radius: 5px;
|
|
padding: 5px;
|
|
/* Compensate for padding in image */
|
|
padding-right: 8px;
|
|
color: white;
|
|
font-size: 20px;
|
|
margin-bottom: 10px;
|
|
white-space: nowrap;
|
|
}
|
|
.noVNC_panel .noVNC_heading img {
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
.noVNC_submit {
|
|
float: right;
|
|
}
|
|
|
|
/* Expanders */
|
|
.noVNC_expander {
|
|
cursor: pointer;
|
|
}
|
|
.noVNC_expander::before {
|
|
content: url("../images/expander.svg");
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
transition: 0.2s ease-in-out;
|
|
}
|
|
.noVNC_expander.noVNC_open::before {
|
|
transform: rotateZ(90deg);
|
|
}
|
|
.noVNC_expander ~ * {
|
|
margin: 5px;
|
|
margin-left: 10px;
|
|
padding: 5px;
|
|
background: rgba(0, 0, 0, 0.05);
|
|
border-radius: 5px;
|
|
}
|
|
.noVNC_expander:not(.noVNC_open) ~ * {
|
|
display: none;
|
|
}
|
|
|
|
/* Control bar content */
|
|
|
|
#noVNC_control_bar .noVNC_logo {
|
|
font-size: 13px;
|
|
}
|
|
|
|
:root:not(.noVNC_connected) #noVNC_view_drag_button {
|
|
display: none;
|
|
}
|
|
|
|
/* noVNC Touch Device only buttons */
|
|
:root:not(.noVNC_connected) #noVNC_mobile_buttons {
|
|
display: none;
|
|
}
|
|
:root:not(.noVNC_touch) #noVNC_mobile_buttons {
|
|
display: none;
|
|
}
|
|
|
|
/* Extra manual keys */
|
|
:root:not(.noVNC_connected) #noVNC_extra_keys {
|
|
display: none;
|
|
}
|
|
|
|
#noVNC_modifiers {
|
|
background-color: rgb(92, 92, 92);
|
|
border: none;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
/* Shutdown/Reboot */
|
|
:root:not(.noVNC_connected) #noVNC_power_button {
|
|
display: none;
|
|
}
|
|
#noVNC_power {
|
|
}
|
|
#noVNC_power_buttons {
|
|
display: none;
|
|
}
|
|
|
|
#noVNC_power input[type=button] {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Clipboard */
|
|
:root:not(.noVNC_connected) #noVNC_clipboard_button {
|
|
display: none;
|
|
}
|
|
#noVNC_clipboard {
|
|
/* Full screen, minus padding and left and right margins */
|
|
max-width: calc(100vw - 2*15px - 75px - 25px);
|
|
}
|
|
#noVNC_clipboard_text {
|
|
width: 500px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Settings */
|
|
#noVNC_settings {
|
|
}
|
|
#noVNC_settings ul {
|
|
list-style: none;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
#noVNC_setting_port {
|
|
width: 80px;
|
|
}
|
|
#noVNC_setting_path {
|
|
width: 100px;
|
|
}
|
|
|
|
/* Connection Controls */
|
|
:root:not(.noVNC_connected) #noVNC_disconnect_button {
|
|
display: none;
|
|
}
|
|
|
|
/* ----------------------------------------
|
|
* Status Dialog
|
|
* ----------------------------------------
|
|
*/
|
|
|
|
#noVNC_status {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 100;
|
|
transform: translateY(-100%);
|
|
|
|
cursor: pointer;
|
|
|
|
transition: 0.5s ease-in-out;
|
|
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
|
|
padding: 5px;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-content: center;
|
|
|
|
line-height: 25px;
|
|
word-wrap: break-word;
|
|
color: #fff;
|
|
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.9);
|
|
}
|
|
#noVNC_status.noVNC_open {
|
|
transform: translateY(0);
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
#noVNC_status::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 25px;
|
|
height: 25px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
#noVNC_status.noVNC_status_normal {
|
|
background: rgba(128,128,128,0.9);
|
|
}
|
|
#noVNC_status.noVNC_status_normal::before {
|
|
content: url("../images/info.svg") " ";
|
|
}
|
|
#noVNC_status.noVNC_status_error {
|
|
background: rgba(200,55,55,0.9);
|
|
}
|
|
#noVNC_status.noVNC_status_error::before {
|
|
content: url("../images/error.svg") " ";
|
|
}
|
|
#noVNC_status.noVNC_status_warn {
|
|
background: rgba(180,180,30,0.9);
|
|
}
|
|
#noVNC_status.noVNC_status_warn::before {
|
|
content: url("../images/warning.svg") " ";
|
|
}
|
|
|
|
/* ----------------------------------------
|
|
* Connect Dialog
|
|
* ----------------------------------------
|
|
*/
|
|
|
|
#noVNC_connect_dlg {
|
|
transition: 0.5s ease-in-out;
|
|
|
|
transform: scale(0, 0);
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
#noVNC_connect_dlg.noVNC_open {
|
|
transform: scale(1, 1);
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
#noVNC_connect_dlg .noVNC_logo {
|
|
transition: 0.5s ease-in-out;
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
|
|
font-size: 80px;
|
|
text-align: center;
|
|
|
|
border-radius: 5px;
|
|
}
|
|
@media (max-width: 440px) {
|
|
#noVNC_connect_dlg {
|
|
max-width: calc(100vw - 100px);
|
|
}
|
|
#noVNC_connect_dlg .noVNC_logo {
|
|
font-size: calc(25vw - 30px);
|
|
}
|
|
}
|
|
#noVNC_connect_button {
|
|
cursor: pointer;
|
|
|
|
padding: 10px;
|
|
|
|
color: white;
|
|
background-color: rgb(110, 132, 163);
|
|
border-radius: 12px;
|
|
|
|
text-align: center;
|
|
font-size: 20px;
|
|
|
|
box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
|
|
}
|
|
#noVNC_connect_button div {
|
|
margin: 2px;
|
|
padding: 5px 30px;
|
|
border: 1px solid rgb(83, 99, 122);
|
|
border-bottom-width: 2px;
|
|
border-radius: 5px;
|
|
background: linear-gradient(to top, rgb(110, 132, 163), rgb(99, 119, 147));
|
|
|
|
/* This avoids it jumping around when :active */
|
|
vertical-align: middle;
|
|
}
|
|
#noVNC_connect_button div:active {
|
|
border-bottom-width: 1px;
|
|
margin-top: 3px;
|
|
}
|
|
:root:not(.noVNC_touch) #noVNC_connect_button div:hover {
|
|
background: linear-gradient(to top, rgb(110, 132, 163), rgb(105, 125, 155));
|
|
}
|
|
|
|
#noVNC_connect_button img {
|
|
vertical-align: bottom;
|
|
height: 1.3em;
|
|
}
|
|
|
|
/* ----------------------------------------
|
|
* Password Dialog
|
|
* ----------------------------------------
|
|
*/
|
|
|
|
#noVNC_password_dlg {
|
|
position: relative;
|
|
|
|
transform: translateY(-50px);
|
|
}
|
|
#noVNC_password_dlg.noVNC_open {
|
|
transform: translateY(0);
|
|
}
|
|
#noVNC_password_dlg ul {
|
|
list-style: none;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
/* ----------------------------------------
|
|
* Main Area
|
|
* ----------------------------------------
|
|
*/
|
|
|
|
/* Transition screen */
|
|
#noVNC_transition {
|
|
display: none;
|
|
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
|
|
color: white;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: 50;
|
|
|
|
/*display: flex;*/
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
}
|
|
:root.noVNC_loading #noVNC_transition,
|
|
:root.noVNC_connecting #noVNC_transition,
|
|
:root.noVNC_disconnecting #noVNC_transition,
|
|
:root.noVNC_reconnecting #noVNC_transition {
|
|
display: flex;
|
|
}
|
|
:root:not(.noVNC_reconnecting) #noVNC_cancel_reconnect_button {
|
|
display: none;
|
|
}
|
|
#noVNC_transition_text {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
/* Main container */
|
|
#noVNC_container {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #313131;
|
|
border-bottom-right-radius: 800px 600px;
|
|
/*border-top-left-radius: 800px 600px;*/
|
|
}
|
|
|
|
#noVNC_keyboardinput {
|
|
width: 1px;
|
|
height: 1px;
|
|
background-color: #fff;
|
|
color: #fff;
|
|
border: 0;
|
|
position: absolute;
|
|
left: -40px;
|
|
z-index: -1;
|
|
ime-mode: disabled;
|
|
}
|
|
|
|
/*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 {
|
|
color:yellow;
|
|
font-family: 'Orbitron', 'OrbitronTTF', sans-serif;
|
|
line-height:90%;
|
|
text-shadow: 0.1em 0.1em 0 black;
|
|
}
|
|
.noVNC_logo span{
|
|
color:green;
|
|
}
|
|
|
|
#noVNC_bell {
|
|
display: none;
|
|
}
|
|
|
|
/* ----------------------------------------
|
|
* Media sizing
|
|
* ----------------------------------------
|
|
*/
|
|
|
|
@media screen and (max-width: 640px){
|
|
#noVNC_logo {
|
|
font-size: 150px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 321px) and (max-width: 480px) {
|
|
#noVNC_logo {
|
|
font-size: 110px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 320px) {
|
|
#noVNC_logo {
|
|
font-size: 90px;
|
|
}
|
|
}
|