*{ 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 }