Sort style sheet

Sort and group the entries in the style sheet the same way as in
the HTML document. Makes it easier to find things.
This commit is contained in:
samhed 2016-08-24 12:17:53 +02:00 committed by Pierre Ossman
parent 3911256cff
commit 2869308c80
1 changed files with 306 additions and 301 deletions

View File

@ -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 {