diff --git a/app/styles/base.css b/app/styles/base.css index ff1469ad..a4d6708f 100644 --- a/app/styles/base.css +++ b/app/styles/base.css @@ -21,48 +21,136 @@ html { height:100%; } -#noVNC_controls ul { - list-style: none; - margin: 0px; - padding: 0px; -} -#noVNC_controls li { - padding-bottom:8px; +#noVNC_buttons { + white-space: nowrap; } -#noVNC_setting_host { - width:150px; -} -#noVNC_setting_port { - width: 80px; -} -#noVNC_setting_password { - width: 150px; -} -#noVNC_setting_path { - width: 100px; -} -#noVNC_connect_button { - width: 110px; - float:right; +/* ---------------------------------------- + * Control Bar + * ---------------------------------------- + */ + +#noVNC_control_bar { + position: fixed; + display: block; + height: 36px; + left: 0; + top: 0; + width: 100%; + z-index: 200; } +/* General button style */ +.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;*/ + font-size: 12px; +} +.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;*/ +} +.noVNC_status_button:disabled { + opacity: 0.4; +} + +/* Panels */ +.triangle-right { + position: relative; + padding: 15px; + 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; +} + +/* Drag/Pan button */ #noVNC_view_drag_button { display: none; } -#noVNC_sendCtrlAltDel_button { - display: none; -} -#noVNC_fullscreen_button { - display: none; -} -#noVNC_xvp_buttons { - display: none; -} + +/* noVNC Touch Device only buttons */ #noVNC_mobile_buttons { display: none; } +#noVNC_keyboardinput { + width: 1px; + height: 1px; + background-color: #fff; + color: #fff; + border: 0; + position: relative; + left: -40px; + z-index: -1; + ime-mode: disabled; +} + +#noVNC_toggleExtraKeys_button { + display: none; +} + #noVNC_extra_keys { display: inline; list-style-type: none; @@ -70,20 +158,28 @@ html { margin: 0px; position: relative; } +#noVNC_toggleCtrl_button { + display: inline; +} +#noVNC_toggleAlt_button { + display: inline; +} +#noVNC_sendTab_button { + display: inline; +} +#noVNC_sendEsc_button { + display: inline; +} +/* Left side buttons */ .noVNC_buttons_left { float: left; z-index: 1; position: relative; + padding-left: 10px; } -.noVNC_buttons_right { - float:right; - right: 0px; - z-index: 2; - position: absolute; -} - +/* Center status display */ #noVNC_status { font-size: 12px; padding-top: 4px; @@ -91,152 +187,11 @@ html { text-align: center; font-weight: bold; color: #fff; -} - -#noVNC_settings_menu { - margin: 3px; - text-align: left; -} -#noVNC_settings_menu ul { - list-style: none; - margin: 0px; - padding: 0px; -} - -#noVNC_settings_apply { - float:right; -} - -#noVNC_container { - display: table; - width:100%; - height:100%; - background-color:#313131; - border-bottom-right-radius: 800px 600px; - /*border-top-left-radius: 800px 600px;*/ -} - -#noVNC_screen { - display: none; + z-index: 0; position: absolute; - margin: 0px; - padding: 0px; - bottom: 0px; - top: 36px; /* the height of the control bar */ - left: 0px; - right: 0px; - width: auto; - height: auto; + width: 100%; + margin-left: 0px; } - -/* Do not set width/height for VNC_canvas or incorrect - * scaling will occur. Canvas size depends on remote VNC - * settings and noVNC settings. */ -#noVNC_canvas { - position: absolute; - left: 0; - right: 0; - margin-left: auto; - margin-right: auto; -} - - -#noVNC_clipboard_clear_button { - float:right; -} - -/*Bubble contents divs*/ -#noVNC_settings { - display:none; - top:73px; - right:20px; - position:fixed; -} - -#noVNC_controls { - display:none; - top:73px; - right:12px; - position:fixed; -} -#noVNC_controls.top:after { - right:15px; -} - -#noVNC_description { - display:none; - position:fixed; - - top:73px; - 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_popup_status { - display:none; - position: fixed; - z-index: 1; - - margin:15px; - 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; - top:73px; - right:30px; - position:fixed; -} -#noVNC_xvp.top:after { - right:125px; -} - -#noVNC_clipboard { - display:none; - top:73px; - right:30px; - position:fixed; -} -#noVNC_clipboard.top:after { - right:85px; -} - -#noVNC_keyboardinput { - width:1px; - height:1px; - background-color:#fff; - color:#fff; - border:0; - position: relative; - left: -40px; - z-index: -1; - ime-mode: disabled; -} - -/* - * Advanced Styling - */ - .noVNC_status_normal { background: #b2bdcd; /* Old browsers */ background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */ @@ -265,105 +220,188 @@ html { background: linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */ } -/* Control bar */ -#noVNC_control_bar { - position:fixed; - - display:block; - height:36px; - left:0; - top:0; - width:100%; - z-index:200; +/* Right side buttons */ +.noVNC_buttons_right { + float: right; + right: 0px; + z-index: 2; + position: absolute; + padding-right: 10px; } -.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;*/ +/* Send Ctrl+Alt+Delete */ +#noVNC_sendCtrlAltDel_button { + display: none; } -.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;*/ +/* XVP Shutdown/Reboot */ +#noVNC_xvp { + display: none; + top: 73px; + right: 30px; + position: fixed; +} +#noVNC_xvp.top:after { + right: 125px; +} +#noVNC_xvp_buttons { + display: none; } -.noVNC_status_button:disabled { - opacity: 0.4; +/* Clipboard */ +#noVNC_clipboard { + display: none; + top: 73px; + right: 30px; + position: fixed; +} +#noVNC_clipboard.top:after { + right: 85px; +} +#noVNC_clipboard_text { + width: 500px; +} +#noVNC_clipboard_clear_button { + float: right; } - -/*Settings Bubble*/ -.triangle-right { - position:relative; - padding:15px; - 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; +/* Toggle fullscreen */ +#noVNC_fullscreen_button { + display: none; } -.triangle-right.top:after { - border-color: transparent #E0E0E0; - border-width: 20px 20px 0 0; - bottom: auto; - left: auto; - right: 50px; - top: -20px; +/* Settings */ +#noVNC_settings { + display: none; + top: 73px; + right: 20px; + position: fixed; +} +#noVNC_settings_menu { + margin: 3px; + text-align: left; +} +#noVNC_settings_menu ul { + list-style: none; + margin: 0px; + padding: 0px; +} +#noVNC_setting_path { + width: 100px; +} +#noVNC_settings_apply { + float: right; } -.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; +/* Connection Controls */ +#noVNC_controls { + display: none; + top: 73px; + right: 12px; + position: fixed; +} +#noVNC_controls.top:after { + right:15px; +} +#noVNC_controls ul { + list-style: none; + margin: 0px; + padding: 0px; +} +#noVNC_controls li { + padding-bottom:8px; +} +#noVNC_setting_host { + width:150px; +} +#noVNC_setting_port { + width: 80px; +} +#noVNC_setting_password { + width: 150px; +} +#noVNC_connect_button { + width: 110px; + float: right; } -.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; +/* Description Panel */ +#noVNC_description { + display: none; + position: fixed; + + top: 73px; + 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; +} + +/* Popup Status */ +#noVNC_popup_status { + display: none; + position: fixed; + z-index: 1; + + margin: 15px; + 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; +} + +/* ---------------------------------------- + * Main Area + * ---------------------------------------- + */ + +#noVNC_container { + display: table; + width: 100%; + height: 100%; + background-color: #313131; + border-bottom-right-radius: 800px 600px; + /*border-top-left-radius: 800px 600px;*/ +} + +/* HTML5 Canvas */ +#noVNC_screen { + display: none; + position: absolute; + margin: 0px; + padding: 0px; + bottom: 0px; + top: 36px; /* the height of the control bar */ + left: 0px; + right: 0px; + width: auto; + height: auto; +} + +/* Do not set width/height for VNC_canvas or incorrect + * scaling will occur. Canvas size depends on remote VNC + * settings and noVNC settings. */ +#noVNC_canvas { + position: absolute; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; } /*Default noVNC logo.*/ @@ -382,6 +420,7 @@ html { color:yellow; text-align:left; font-family: 'Orbitron', 'OrbitronTTF', sans-serif; + font-size: 180px; line-height:90%; text-shadow: 5px 5px 0 #000, @@ -401,40 +440,6 @@ html { * ---------------------------------------- */ - -.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 { - z-index: 0; - position: absolute; - width: 100%; - margin-left: 0px; -} - -#noVNC_toggleExtraKeys_button { display: none; } -#noVNC_toggleCtrl_button { display: inline; } -#noVNC_toggleAlt_button { display: inline; } -#noVNC_sendTab_button { display: inline; } -#noVNC_sendEsc_button { display: inline; } - /* left-align the status text on lower resolutions */ @media screen and (max-width: 800px){ #noVNC_status {