110 lines
8.6 KiB
CSS
110 lines
8.6 KiB
CSS
|
*{ padding:0; margin:0}
|
||
|
|
body { font-family: "Microsoft Yahei","Helvetica","Tahoma","SimSun", Arial, sans-serif; background-color: #494949; background-repeat: no-repeat; background-position: right bottom; height: 100%; width: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_path { width: 100px; }
|
||
|
|
#noVNC_connect_button { width: 110px; float: right; }
|
||
|
|
#noVNC_buttons { white-space: nowrap; float:right; position:relative; z-index:99; margin-right:10px}
|
||
|
|
#noVNC_buttons input{padding: 4px 6px; height:24px; margin-top:5px; color:#eee; cursor:pointer; outline:none; border-radius:2px; vertical-align: middle; border:0; background:#525252}
|
||
|
|
#noVNC_buttons input.disabled{ color:#999; cursor:default}
|
||
|
|
#noVNC_view_drag_button { display: none; }
|
||
|
|
#sendCtrlAltDelButton { display: none; }
|
||
|
|
#noVNC_xvp_buttons { display: none; }
|
||
|
|
#noVNC_mobile_buttons { display: none; }
|
||
|
|
#noVNC_extra_keys { display: inline; list-style-type: none; padding: 0px; margin: 0px; position: relative; }
|
||
|
|
.noVNC-buttons-left { float: left; z-index: 1; position: relative; }
|
||
|
|
.noVNC-buttons-right { float: right; right: 0px; z-index: 2; position: absolute; }
|
||
|
|
#noVNC_status { font-size: 12px; float:left; height:inherit; line-height:32px}
|
||
|
|
#noVNC_settings_menu { margin: 3px; text-align: left; }
|
||
|
|
#noVNC_settings_menu ul { list-style: none; margin: 0px; padding: 0px; }
|
||
|
|
#noVNC_apply { float: right; }
|
||
|
|
#noVNC_screen_pad { margin: 0px; padding: 0px; height: 36px; }
|
||
|
|
#noVNC_screen { text-align: center; width: 100%; height: 100%; background-color: #313131}
|
||
|
|
#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; }
|
||
|
|
#noVNC_settings { display: none; margin-top: 73px; right: 20px; position: fixed; }
|
||
|
|
#noVNC_controls { display: none; margin-top: 73px; right: 12px; position: fixed; }
|
||
|
|
#noVNC_controls.top:after { right: 15px; }
|
||
|
|
#noVNC_description { display: none; position: fixed; margin-top: 73px; right: 20px; left: 20px; padding: 15px; color: #000; background: #eee; border: 2px solid #E0E0E0; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
|
||
|
|
#noVNC_popup_status_panel { display: none; position: fixed; z-index: 1; margin: 15px; margin-top: 60px; padding: 15px; width: auto; text-align: center; font-weight: bold; word-wrap: break-word; color: #fff; background: rgba(0,0,0,0.65); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
|
||
|
|
#noVNC_xvp { display: none; margin-top: 73px; right: 30px; position: fixed; }
|
||
|
|
#noVNC_xvp.top:after { right: 125px; }
|
||
|
|
#noVNC_clipboard { display: none; margin-top: 73px; 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_normal { background: #222; color:#CEC17E}
|
||
|
|
.noVNC_status_error { background: #222; color:#f04040}
|
||
|
|
.noVNC_status_warn { background: #222; color:#f0f040}
|
||
|
|
#noVNC_status_bar{height: 36px}
|
||
|
|
#noVNC-control-bar { position: fixed; display: block; height: 36px; left: 0; top: 0; width: 100%; z-index: 200; }
|
||
|
|
.noVNC_status_button { padding: 4px 4px; height:24px; vertical-align: middle; border: 1px solid #869dbc; background:#525252}
|
||
|
|
.noVNC_status_button_selected { padding: 4px 4px; height:24px; vertical-align: middle; border: 1px solid #4366a9; background:#4366a9}
|
||
|
|
.triangle-right { position: relative; padding: 15px; margin: 1em 0 3em; color: #fff; background: #fff;
|
||
|
|
|
||
|
|
-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; left: 50px; border-width: 20px 0 0 20px; border-style: solid; border-color: #E0E0E0 transparent;
|
||
|
|
display: block; width: 0; }
|
||
|
|
.triangle-right.top:after { top: -40px; right: 50px; bottom: auto; left: auto; border-width: 40px 40px 0 0; border-color: transparent #E0E0E0; }
|
||
|
|
@font-face { font-family: 'Orbitron'; font-style: normal; font-weight: 700; src: local('?'), url('/static/font/Orbitron700.woff') format('woff'), url('/static/font/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; }
|
||
|
|
.noVNC_status_button { font-size: 12px; }
|
||
|
|
#noVNC_clipboard_text { width: 500px; }
|
||
|
|
#noVNC_logo { font-size: 180px; }
|
||
|
|
.noVNC-buttons-left { padding-left: 10px; }
|
||
|
|
.noVNC-buttons-right { padding-right: 10px; }
|
||
|
|
#noVNC_status { float:left; z-index: 0; margin-left:10px; }
|
||
|
|
#showExtraKeysButton { display: none; }
|
||
|
|
#toggleCtrlButton { display: inline; }
|
||
|
|
#toggleAltButton { display: inline; }
|
||
|
|
#sendTabButton { display: inline; }
|
||
|
|
#sendEscButton { display: inline; }
|
||
|
|
@media screen and (max-width: 800px) {
|
||
|
|
#noVNC_status { z-index: 1; position: relative; width: auto; float: left; margin-left: 4px; }
|
||
|
|
}
|
||
|
|
@media screen and (max-width: 640px) {
|
||
|
|
#noVNC_clipboard_text { width: 410px; }
|
||
|
|
#noVNC_logo { font-size: 150px; }
|
||
|
|
.noVNC_status_button { font-size: 10px; }
|
||
|
|
.noVNC-buttons-left { padding-left: 0px; }
|
||
|
|
.noVNC-buttons-right { padding-right: 0px; }
|
||
|
|
#showExtraKeysButton { display: inline; }
|
||
|
|
#toggleCtrlButton { display: none; position: absolute; top: 30px; left: 0px; }
|
||
|
|
#toggleAltButton { display: none; position: absolute; top: 65px; left: 0px; }
|
||
|
|
#sendTabButton { display: none; position: absolute; top: 100px; left: 0px; }
|
||
|
|
#sendEscButton { display: none; position: absolute; top: 135px; left: 0px; }
|
||
|
|
}
|
||
|
|
@media screen and (min-width: 321px) and (max-width: 480px) {
|
||
|
|
#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; }
|
||
|
|
}
|
||
|
|
.dropdown { float:left; position: relative; display: inline-block; vertical-align: middle; text-align: left; width: 132px; margin-right: 10px; height: 32px; font-size:12px }
|
||
|
|
.dropdown a { margin: 0; padding: 0 10px; background: 0; border: 0 none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-shadow: 0 0 0 transparent; -moz-box-shadow: 0 0 0 transparent; box-shadow: 0 0 0 transparent; text-align: left }
|
||
|
|
.dropdown-text { cursor: pointer; position: absolute; text-indent: 10px; line-height: 30px; border-bottom: 2px solid #4a4a4a; width: 100%; background: #525252; color: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px }
|
||
|
|
.dropdown-text:hover { color: #f2f2f2; background: #4e4e4e; text-decoration: none }
|
||
|
|
.dropdown-text:after { position: absolute; right: 6px; top: 15px; content: ''; width: 0; height: 0; border-style: solid; border-width: 5px 4px 0; border-color: #fff transparent transparent }
|
||
|
|
.dropdown-text a, .dropdown-content a { color: #fff }
|
||
|
|
input.dropdown-toggle { font-size: 0; z-index: 1; cursor: pointer; position: absolute; top: 0; border: 0; padding: 0; margin: 0 0 0 1px; background: transparent; text-indent: -10px; height: 32px; width: 100% }
|
||
|
|
input.dropdown-toggle:focus { outline: 0; border: 0 none; -webkit-box-shadow: 0 0 0 transparent; -moz-box-shadow: 0 0 0 transparent; box-shadow: 0 0 0 transparent }
|
||
|
|
.dropdown-content { -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; -webkit-transition: all; -moz-transition: all; -o-transition: all; list-style-type: none; position: absolute; top: 34px; padding: 0; margin: 0; opacity: 0; visibility: hidden; line-height: 32px; background-color: #525252; width: 140px }
|
||
|
|
.dropdown-content a { display: block }
|
||
|
|
.dropdown-content a:hover { color: #fff; background: #373837 }
|
||
|
|
.dropdown-content .btn-forbidden, .dropdown-content .btn-forbidden:hover { color: #969696; background: transparent }
|
||
|
|
.dropdown-toggle:focus~.dropdown-text { -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.2) inset; -moz-box-shadow: 0 1px 3px rgba(0,0,0,.2) inset; box-shadow: 0 1px 3px rgba(0,0,0,.2) inset; z-index: 2 }
|
||
|
|
.dropdown-toggle:focus~.dropdown-text:after { border-width: 0 4px 5px; border-color: transparent transparent #fff }
|
||
|
|
.dropdown-content:hover, .dropdown-toggle:focus~.dropdown-content { opacity: 1; visibility: visible; top: 34px }
|