mirror of
https://github.com/iNavFlight/inav-configurator.git
synced 2025-07-26 01:35:23 +03:00
more trial and error
This commit is contained in:
skaman82
parent
707e2c454b
commit
1ed7629f97
5 changed files with 585 additions and 134 deletions
474
main.css
474
main.css
|
|
@ -5,24 +5,66 @@
|
||||||
list-style: none;
|
list-style: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body {
|
html, body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
font-family: 'Segoe UI', Tahoma, sans-serif;
|
font-family: 'open_sansregular', 'Segoe UI', Tahoma, sans-serif;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #303030;
|
color: #303030;
|
||||||
background-color:#3f4140;
|
background-color:#3f4140;
|
||||||
margin:0px;
|
margin:0px;
|
||||||
padding:0px;
|
padding:0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Change here the content of the documentation button in all tabs!!! */
|
||||||
|
|
||||||
|
.cf_doc_version_bt a:before {
|
||||||
|
content:"Documentation 1.10";
|
||||||
|
}
|
||||||
|
|
||||||
|
.cf_doc_version_bt a {
|
||||||
|
padding:1px 9px 1px 9px;
|
||||||
|
margin-top: -25px;
|
||||||
|
background-color:#59aa29;
|
||||||
|
border-radius:3px;
|
||||||
|
border: 1px solid #4c8829;
|
||||||
|
color:#fff;
|
||||||
|
float:right;
|
||||||
|
font-family: 'open_sansbold', Arial;
|
||||||
|
font-size:10px;
|
||||||
|
line-height:17px;
|
||||||
|
text-shadow:0px 1px rgba(0, 0, 0, 0.25);
|
||||||
|
text-transform:uppercase;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
display:block;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.cf_doc_version_bt a:hover {
|
||||||
|
background-color:#6ac435;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* documentation button end */
|
||||||
|
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #303030;
|
text-decoration:none;
|
||||||
text-decoration: none;
|
color:#59aa29;
|
||||||
}
|
font-family: 'open_sanssemibold', Arial;
|
||||||
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
input[type="number"]::-webkit-inner-spin-button {
|
input[type="number"]::-webkit-inner-spin-button {
|
||||||
opacity: 1; /* required for chromium 33+ beta */
|
opacity: 1; /* required for chromium 33+ beta */
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
|
|
@ -41,11 +83,19 @@ input[type="number"]::-webkit-inner-spin-button {
|
||||||
height: calc(100% - 5px);
|
height: calc(100% - 5px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.headerbar {
|
||||||
|
height:110px;
|
||||||
|
width:100%;
|
||||||
|
float:left;
|
||||||
|
background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.15));
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
#logo {
|
#logo {
|
||||||
position: relative;
|
position: relative;
|
||||||
float:left;
|
float:left;
|
||||||
width: 260px;
|
width: 260px;
|
||||||
height:80px;
|
height:70px;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
background-image: url("images/light-wide-2.svg");
|
background-image: url("images/light-wide-2.svg");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
|
@ -58,11 +108,11 @@ input[type="number"]::-webkit-inner-spin-button {
|
||||||
|
|
||||||
#port-picker { /* */
|
#port-picker { /* */
|
||||||
float: left;
|
float: left;
|
||||||
height: 105px; /* was 20px */
|
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
width:190px;
|
width:180px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#port-picker li {
|
#port-picker li {
|
||||||
float: left;
|
float: left;
|
||||||
} /*
|
} /*
|
||||||
|
|
@ -156,8 +206,9 @@ input[type="number"]::-webkit-inner-spin-button {
|
||||||
background-color: #b8cf02;
|
background-color: #b8cf02;
|
||||||
}
|
}
|
||||||
|
|
||||||
#header-wrapper {
|
|
||||||
}
|
|
||||||
|
/*
|
||||||
#documentation-controls {
|
#documentation-controls {
|
||||||
float: right;
|
float: right;
|
||||||
height: 22px;
|
height: 22px;
|
||||||
|
|
@ -165,7 +216,7 @@ input[type="number"]::-webkit-inner-spin-button {
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
#button-documentation {
|
#button-documentation {
|
||||||
float: left;
|
float: left;
|
||||||
padding: 0 12px 0 12px;
|
padding: 0 12px 0 12px;
|
||||||
|
|
@ -214,20 +265,22 @@ input[type="number"]::-webkit-inner-spin-button {
|
||||||
}
|
}
|
||||||
#log {
|
#log {
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
height: 25px; /* was 65*/
|
height: 27px; /* was 65*/
|
||||||
border: 0px solid silver; /* was 1px*/
|
border: 0px solid silver; /* was 1px*/
|
||||||
background-color: rgba(0, 0, 0, 1.0);
|
background-color:#242424;
|
||||||
overflow-y: hidden; /* scroll*/
|
overflow-y: hidden; /* scroll*/
|
||||||
color:#fff;
|
color:rgba(255,255,255,0.60);
|
||||||
line-height: 20px;
|
line-height: 21px;
|
||||||
}
|
}
|
||||||
#log .wrapper {
|
#log .wrapper {
|
||||||
padding: 5px; /* was 5*/
|
padding: 5px; /* was 5*/
|
||||||
padding-left:10px;
|
padding-left:10px;
|
||||||
|
padding-bottom:4px;
|
||||||
-webkit-user-select: text;
|
-webkit-user-select: text;
|
||||||
}
|
}
|
||||||
#log a {
|
#log a {
|
||||||
font-weight: bold;
|
font-weight: regular;
|
||||||
|
color:#59aa29;
|
||||||
}
|
}
|
||||||
#log a:hover {
|
#log a:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
|
|
@ -236,7 +289,7 @@ input[type="number"]::-webkit-inner-spin-button {
|
||||||
.tab_container {
|
.tab_container {
|
||||||
float:left;
|
float:left;
|
||||||
height:100%;
|
height:100%;
|
||||||
width:200px;
|
width:210px;
|
||||||
border-right: 4px solid #59aa29;
|
border-right: 4px solid #59aa29;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -268,7 +321,7 @@ input[type="number"]::-webkit-inner-spin-button {
|
||||||
float: left;
|
float: left;
|
||||||
border-bottom: 1px solid rgba(0,0,0,0.30);
|
border-bottom: 1px solid rgba(0,0,0,0.30);
|
||||||
border-top: 1px solid #404040;
|
border-top: 1px solid #404040;
|
||||||
height:32px;
|
height:29px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -284,19 +337,21 @@ input[type="number"]::-webkit-inner-spin-button {
|
||||||
|
|
||||||
|
|
||||||
#tabs li a {
|
#tabs li a {
|
||||||
padding-left:40px;
|
font-family: 'open_sansregular', Arial;
|
||||||
padding-top:7px;
|
padding-left:33px;
|
||||||
|
padding-top:5px;
|
||||||
|
padding-bottom:3px;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color:#999999;
|
color:#999999;
|
||||||
width:100%;
|
width:100%;
|
||||||
height:24px;
|
height:23px;
|
||||||
display:block;
|
display:block;
|
||||||
text-shadow:0px 1px rgba(0, 0, 0, 0.25);
|
text-shadow:0px 1px rgba(0, 0, 0, 0.45);
|
||||||
|
|
||||||
background-image:url(images/icons/cf_icon_info_green.svg);
|
background-image:url(images/icons/cf_icon_info_green.svg);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size:18px;
|
background-size:15px;
|
||||||
background-position:17px 6px;
|
background-position:13px 7px;
|
||||||
text-shadow:0px 1px rgba(0, 0, 0, 0.25);
|
text-shadow:0px 1px rgba(0, 0, 0, 0.25);
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -335,6 +390,7 @@ input[type="number"]::-webkit-inner-spin-button {
|
||||||
margin-top: 0px; /* 31 */
|
margin-top: 0px; /* 31 */
|
||||||
padding: 0px; /* 10 */
|
padding: 0px; /* 10 */
|
||||||
height:calc(100% - 150px); /* (port picker 105px, log 25px, tab 0px, status bar: 20px) - was: calc(100% - 171px)*/
|
height:calc(100% - 150px); /* (port picker 105px, log 25px, tab 0px, status bar: 20px) - was: calc(100% - 171px)*/
|
||||||
|
|
||||||
background-color: white;
|
background-color: white;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
@ -388,6 +444,370 @@ dialog {
|
||||||
margin: auto auto;
|
margin: auto auto;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
border-radius: 5px;
|
border-radius: 3px;
|
||||||
border: 1px solid silver;
|
border: 1px solid silver;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Border of the Tab */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Tab Title */
|
||||||
|
.tab_title {
|
||||||
|
float:left;
|
||||||
|
width:100%;
|
||||||
|
border-bottom:1px solid #59aa29;
|
||||||
|
font-size:20px;
|
||||||
|
line-height:24px;
|
||||||
|
height:30px;
|
||||||
|
font-family: 'open_sanslight', Arial;
|
||||||
|
margin-bottom:7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Note */
|
||||||
|
.note {
|
||||||
|
float:left;
|
||||||
|
background-color:#fff7cd;
|
||||||
|
border:1px solid #ffe55f;
|
||||||
|
margin-bottom:7px;
|
||||||
|
margin-top:3px;
|
||||||
|
width:100%;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size:11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note_spacer {
|
||||||
|
padding:5px 7px 5px 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Colums START> */
|
||||||
|
|
||||||
|
.cf_column {
|
||||||
|
margin-bottom:20px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.full {
|
||||||
|
float:left;
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.half {
|
||||||
|
float:left;
|
||||||
|
width:50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.third_left {
|
||||||
|
float:left;
|
||||||
|
width:33%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.third_center {
|
||||||
|
display: inline-block;
|
||||||
|
width:34%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.third_right {
|
||||||
|
float:right;
|
||||||
|
width:33%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.fourth {
|
||||||
|
float:left;
|
||||||
|
width:25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.threefourth_right {
|
||||||
|
float:right;
|
||||||
|
width:75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.threefourth_left {
|
||||||
|
float:left;
|
||||||
|
width:75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.twothird {
|
||||||
|
float:left;
|
||||||
|
width:67%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab_wrapper {
|
||||||
|
padding-left:20px;
|
||||||
|
padding-right:15px;
|
||||||
|
padding-top:15px;
|
||||||
|
padding-bottom:15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Columns END> */
|
||||||
|
|
||||||
|
/* Spacers */
|
||||||
|
|
||||||
|
.spacer {
|
||||||
|
padding-left:7px;
|
||||||
|
padding-right:7px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.spacer_left {
|
||||||
|
padding-left:7px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.spacer_right {
|
||||||
|
padding-right:7px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Standard GUI BOX */
|
||||||
|
.gui_box {
|
||||||
|
border: 1px solid #e4e4e4;
|
||||||
|
border-radius:5px;
|
||||||
|
background-color:#FFFFFF;
|
||||||
|
float:left;
|
||||||
|
width:100%;
|
||||||
|
margin-bottom:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grey {
|
||||||
|
background-color:#f5f5f5;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.gui_box_titlebar {
|
||||||
|
background-color:#e4e4e4;
|
||||||
|
border-radius:3px 3px 0px 0px;
|
||||||
|
font-size:14px;
|
||||||
|
width:100%;
|
||||||
|
height:25px;
|
||||||
|
padding-bottom:0px;
|
||||||
|
float:left;
|
||||||
|
margin-bottom:7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spacer_box {
|
||||||
|
padding:10px;
|
||||||
|
margin-bottom:3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spacer_box_title {
|
||||||
|
padding-left:10px;
|
||||||
|
padding-right:10px;
|
||||||
|
padding-top:4px;
|
||||||
|
margin-bottom:0px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Fixed area at the Bottom */
|
||||||
|
|
||||||
|
|
||||||
|
.fixed_band {
|
||||||
|
height: 50px;
|
||||||
|
position:fixed;
|
||||||
|
background-color:#e4e4e4;
|
||||||
|
width:100%;
|
||||||
|
margin-left:-20px;
|
||||||
|
box-shadow:rgba(0,0,0,0.20) 0 -3px 8px ;
|
||||||
|
bottom: 0px;
|
||||||
|
z-index:1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.save_btn a {
|
||||||
|
padding:3px 13px 5px 13px;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-right:15px;
|
||||||
|
background-color:#59aa29;
|
||||||
|
border-radius:3px;
|
||||||
|
border: 1px solid #4c8829;
|
||||||
|
color:#fff;
|
||||||
|
float:right;
|
||||||
|
font-family: 'open_sansbold', Arial;
|
||||||
|
font-size:12px;
|
||||||
|
line-height:20px;
|
||||||
|
text-shadow:0px 1px rgba(0, 0, 0, 0.25);
|
||||||
|
display:block;
|
||||||
|
cursor:pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.save_btn a:hover {
|
||||||
|
background-color:#6ac435;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* DIfferent buttons */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.default_btn {
|
||||||
|
width:100%;
|
||||||
|
position:relative;
|
||||||
|
margin-bottom:7px;
|
||||||
|
margin-top:0px;
|
||||||
|
float:left;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.default_btn a {
|
||||||
|
padding:5px 0px 5px 0px;
|
||||||
|
text-align:center;
|
||||||
|
background-color:#fff;
|
||||||
|
border-radius:4px;
|
||||||
|
border: 1px solid #59aa29;
|
||||||
|
color:#59aa29;
|
||||||
|
font-family: 'open_sanssemibold', Arial;
|
||||||
|
font-size:12px;
|
||||||
|
line-height:13px;
|
||||||
|
display:block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.default_btn a:hover {
|
||||||
|
background-color:#6ac435;
|
||||||
|
color:#fff;
|
||||||
|
text-shadow:0px 1px rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.default_btn a:active {
|
||||||
|
background-color:#4d9324;
|
||||||
|
transition: all ease 0.0s;
|
||||||
|
box-shadow:inset 0px 1px 5px rgba(0, 0, 0, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
.small {
|
||||||
|
width:auto;
|
||||||
|
position:relative;
|
||||||
|
margin-bottom:7px;
|
||||||
|
margin-top:0px;
|
||||||
|
margin-right:5px;
|
||||||
|
float:left;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.small a {
|
||||||
|
padding:3px 4px 4px 4px;
|
||||||
|
text-align:center;
|
||||||
|
text-shadow:0px 1px rgba(0, 0, 0, 0.25);
|
||||||
|
background-color:#acacac;
|
||||||
|
border-radius:3px;
|
||||||
|
border: 1px solid #949494;
|
||||||
|
color:#fff;
|
||||||
|
font-family: 'open_sanssemibold', Arial;
|
||||||
|
font-size:11px;
|
||||||
|
line-height:11px;
|
||||||
|
display:block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small a:hover {
|
||||||
|
background-color:#6ac435;
|
||||||
|
color:#fff;
|
||||||
|
text-shadow:0px 1px rgba(0, 0, 0, 0.25);
|
||||||
|
border: 1px solid #59aa29;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.small a:active {
|
||||||
|
background-color:#878787;
|
||||||
|
transition: all ease 0.0s;
|
||||||
|
box-shadow:inset 0px 1px 5px rgba(0, 0, 0, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.green a {
|
||||||
|
background-color:#59aa29;
|
||||||
|
text-shadow:0px 1px rgba(0, 0, 0, 0.25);
|
||||||
|
color:#fff;
|
||||||
|
border: 1px solid #59aa29;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.green a:hover {
|
||||||
|
background-color:#6ac435;
|
||||||
|
border: 1px solid #4d9324;
|
||||||
|
text-shadow:0px 1px rgba(0, 0, 0, 0.25);
|
||||||
|
color:#fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Help Icon */
|
||||||
|
|
||||||
|
|
||||||
|
.helpicon {
|
||||||
|
float:right;
|
||||||
|
margin-top:-14px;
|
||||||
|
margin-right:7px;
|
||||||
|
display:block;
|
||||||
|
height:14px;
|
||||||
|
width:14px;
|
||||||
|
opacity: 0.2;
|
||||||
|
background-image:url(rescources/icons/cf_icon_info_grey.svg);
|
||||||
|
background-size:contain;
|
||||||
|
background-position:center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.helpicon:hover {
|
||||||
|
background-image:url(rescources/icons/cf_icon_info_green.svg);
|
||||||
|
opacity: 1.0;}
|
||||||
|
|
||||||
|
/* Table styling */
|
||||||
|
|
||||||
|
|
||||||
|
.cf_table {
|
||||||
|
margin-bottom:5px;
|
||||||
|
float:left;
|
||||||
|
margin-top:-5px;
|
||||||
|
font-size:11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cf_table td {
|
||||||
|
border:0px;
|
||||||
|
border-bottom: solid 1px #ccc;
|
||||||
|
padding-top:4px;
|
||||||
|
padding-bottom:4px;
|
||||||
|
border-style: dotted;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.noboarder td{
|
||||||
|
border:none;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.cf_table td:last-child {
|
||||||
|
text-align:right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gps_false {
|
||||||
|
background-color:#FF0004;
|
||||||
|
padding:1px 7px 2px 7px;
|
||||||
|
border-radius:3px;
|
||||||
|
color:#FFFFFF;
|
||||||
|
font-size:11px;
|
||||||
|
margin-left:3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gps_true {
|
||||||
|
background-color:#59aa29;
|
||||||
|
padding:1px 7px 2px 7px;
|
||||||
|
border-radius:3px;
|
||||||
|
color:#FFFFFF;
|
||||||
|
font-size:11px;
|
||||||
|
margin-left:3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* END */
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
<link type="text/css" rel="stylesheet" href="./js/libraries/flightindicators.css">
|
<link type="text/css" rel="stylesheet" href="./js/libraries/flightindicators.css">
|
||||||
|
|
||||||
<link type="text/css" rel="stylesheet" href="./tabs/landing.css" media="all" />
|
<link type="text/css" rel="stylesheet" href="./tabs/landing.css" media="all" />
|
||||||
<link type="text/css" rel="stylesheet" href="./tabs/setup.css" media="all" />
|
<link type="text/css" rel="stylesheet" href="./tabs/setup.cssxxx" media="all" />
|
||||||
<link type="text/css" rel="stylesheet" href="./tabs/help.css" media="all" />
|
<link type="text/css" rel="stylesheet" href="./tabs/help.css" media="all" />
|
||||||
<link type="text/css" rel="stylesheet" href="./tabs/ports.css" media="all" />
|
<link type="text/css" rel="stylesheet" href="./tabs/ports.css" media="all" />
|
||||||
<link type="text/css" rel="stylesheet" href="./tabs/configuration.css" media="all" />
|
<link type="text/css" rel="stylesheet" href="./tabs/configuration.css" media="all" />
|
||||||
|
|
@ -88,6 +88,7 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="main-wrapper">
|
<div id="main-wrapper">
|
||||||
|
<div class="headerbar">
|
||||||
<div id="logo"></div>
|
<div id="logo"></div>
|
||||||
<div id="port-picker">
|
<div id="port-picker">
|
||||||
|
|
||||||
|
|
@ -168,7 +169,8 @@
|
||||||
<li><a id="button-documentation" href="#" target="_blank"></a></li>
|
<li><a id="button-documentation" href="#" target="_blank"></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> </div>
|
||||||
|
|
||||||
<div class="clear-both"></div>
|
<div class="clear-both"></div>
|
||||||
<div id="log">
|
<div id="log">
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
|
|
|
||||||
|
|
@ -119,7 +119,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-dark {
|
.dropdown-dark {
|
||||||
background: #444;
|
background: #636363;
|
||||||
border-color: #111 #0a0a0a black;
|
border-color: #111 #0a0a0a black;
|
||||||
background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
|
background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
|
||||||
background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
|
background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
|
||||||
|
|
|
||||||
|
|
@ -1,69 +1,24 @@
|
||||||
.tab-setup .model-and-info {
|
.tab-setup .model-and-info {
|
||||||
height: calc(100% - 138px);
|
height: calc(100% - 138px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-setup {
|
.tab-setup {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
background-color:#ccc;
|
||||||
}
|
}
|
||||||
.tab-setup .section {
|
|
||||||
clear: both;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
}
|
|
||||||
.tab-setup .section a {
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
float: left;
|
.cell_setup {
|
||||||
|
min-height:20px;
|
||||||
|
border-bottom: solid 1px #ddd;
|
||||||
|
margin-bottom:13px;
|
||||||
|
float:left;}
|
||||||
|
|
||||||
width: 190px;
|
|
||||||
height: 24px;
|
|
||||||
line-height: 24px;
|
|
||||||
|
|
||||||
text-align: center;
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
border: 1px solid silver;
|
|
||||||
background-color: #ececec;
|
|
||||||
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
.tab-setup .section a:hover {
|
|
||||||
background-color: #dedcdc;
|
|
||||||
}
|
|
||||||
.tab-setup .section a.calibrating {
|
|
||||||
background-color: #c1c1c1;
|
|
||||||
}
|
|
||||||
.tab-setup .section a.calibrating:hover {
|
|
||||||
cursor: default;
|
|
||||||
background-color: #c1c1c1;
|
|
||||||
}
|
|
||||||
.tab-setup .section a.disabled {
|
|
||||||
background-color: #c1c1c1;
|
|
||||||
}
|
|
||||||
.tab-setup .section a.disabled:hover {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
.tab-setup .section a.backup {
|
|
||||||
width: 90px;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
.tab-setup .section a.restore {
|
|
||||||
width: 90px;
|
|
||||||
}
|
|
||||||
.tab-setup .section p {
|
|
||||||
margin-left: 200px;
|
|
||||||
|
|
||||||
padding: 0 0 0 5px;
|
|
||||||
|
|
||||||
height: 25px;
|
|
||||||
line-height: 25px;
|
|
||||||
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
}
|
|
||||||
.tab-setup #interactive_block {
|
.tab-setup #interactive_block {
|
||||||
float: left;
|
float: left;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: calc(100% - 199px);
|
width: calc(100% - 0px);
|
||||||
|
|
||||||
border: 1px solid silver;
|
border: 1px solid silver;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
|
|
||||||
176
tabs/setup.html
176
tabs/setup.html
|
|
@ -1,61 +1,135 @@
|
||||||
<div class="tab-setup">
|
|
||||||
<div class="section">
|
<div class="tab_setup"> <!-- should be the first DIV on each tab -->
|
||||||
<a class="calibrateAccel" href="#" i18n="initialSetupButtonCalibrateAccel"></a>
|
<div class="tab_wrapper">
|
||||||
<p i18n="initialSetupCalibrateAccelText">
|
|
||||||
</p>
|
<div class="cf_column full" style="margin-bottom:10px;"><div class="tab_title">Configuration
|
||||||
|
<div class="cf_doc_version_bt"><a href="https://github.com/cleanflight/cleanflight/releases" target="_blank"></a></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cf_column fourth" style="min-height:100px;">
|
||||||
|
<div class="spacer_right">
|
||||||
|
<div class="default_btn" style="margin-bottom:10px;"><a class="calibrateAccel" id="default_btn green" href="#" i18n="initialSetupButtonCalibrateAccel"></a></div>
|
||||||
|
<div class="default_btn" style="margin-bottom:10px;"><a class="calibrateMag" href="#" i18n="initialSetupButtonCalibrateMag" ></a></div>
|
||||||
|
<div class="default_btn" style="margin-bottom:10px;"><a class="resetSettings" href="#" i18n="initialSetupButtonReset"></a></div>
|
||||||
|
|
||||||
|
<div class="half"><div class="spacer_right">
|
||||||
|
<div class="default_btn half"><a class="backup" href="#" i18n="initialSetupButtonBackup"></a></div>
|
||||||
|
</div></div>
|
||||||
|
<div class="half"><div class="spacer_left">
|
||||||
|
<div class="default_btn half"><a class="restore" href="#" i18n="initialSetupButtonRestore"></a></div>
|
||||||
|
</div></div></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="threefourth_right">
|
||||||
|
<div class="cell_setup" i18n="initialSetupCalibrateAccelText"></div>
|
||||||
|
<div class="cell_setup" i18n="initialSetupCalibrateMagText"></div>
|
||||||
|
<div class="cell_setup" i18n="initialSetupResetText"></div>
|
||||||
|
<div class="cell_setup" i18n="initialSetupBackupRestoreText"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="section">
|
|
||||||
<a class="calibrateMag" href="#" i18n="initialSetupButtonCalibrateMag"></a>
|
<div style="clear:both;"></div>
|
||||||
<p i18n="initialSetupCalibrateMagText">
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="section">
|
<div class="cf_column threefourth_left" >
|
||||||
<a class="resetSettings" href="#" i18n="initialSetupButtonReset"></a>
|
|
||||||
<p i18n="initialSetupResetText">
|
<div class="spacer_right">
|
||||||
</p>
|
<div class="gui_box grey">
|
||||||
</div>
|
|
||||||
<div class="section">
|
|
||||||
<a class="backup" href="#" i18n="initialSetupButtonBackup"></a>
|
<div class="model-and-info">
|
||||||
<a class="restore" href="#" i18n="initialSetupButtonRestore"></a>
|
|
||||||
<p i18n="initialSetupBackupRestoreText">
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="model-and-info">
|
|
||||||
<div id="interactive_block">
|
<div id="interactive_block">
|
||||||
<div id="canvas_wrapper">
|
<div id="canvas_wrapper">
|
||||||
<canvas id="canvas"></canvas>
|
<canvas id="canvas"></canvas>
|
||||||
</div>
|
</div>
|
||||||
<span class="heading"></span>
|
<span class="heading"></span>
|
||||||
<a class="reset" href="#" i18n="initialSetupButtonResetZaxis"></a>
|
<a class="reset" href="#" i18n="initialSetupButtonResetZaxis"></a>
|
||||||
</div>
|
</div>
|
||||||
<div class="block info">
|
|
||||||
<span class="head" i18n="initialSetupInfoHead"></span>
|
|
||||||
<div class="fields">
|
</div></div></div> </div>
|
||||||
<dl>
|
|
||||||
<dt i18n="initialSetupBattery"></dt><dd class="bat-voltage">0 V</dd>
|
<div class="cf_column fourth">
|
||||||
<dt i18n="initialSetupDrawn"></dt><dd class="bat-mah-drawn">0 mAh</dd>
|
|
||||||
<dt i18n="initialSetupDrawing"></dt><dd class="bat-mah-drawing">0 A</dd>
|
<div class="spacer"><div class="gui_box grey">
|
||||||
<dt i18n="initialSetupRSSI"></dt><dd class="rssi">0 %</dd>
|
<div class="gui_box_titlebar"><div class="spacer_box_title" i18n="initialSetupInfoHead"></div>
|
||||||
</dl>
|
<div class="helpicon"></div></div><div class="spacer_box">
|
||||||
</div>
|
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="cf_table">
|
||||||
</div>
|
<tbody>
|
||||||
<div class="block gps">
|
<tr>
|
||||||
<span class="head" i18n="initialSetupGPSHead"></span>
|
<td i18n="initialSetupBattery"></td>
|
||||||
<div class="fields">
|
<td class="bat-voltage">0 V</td>
|
||||||
<dl>
|
</tr>
|
||||||
<dt i18n="gps3dFix"></dt><dd class="gpsFix"></dd>
|
<tr>
|
||||||
<dt i18n="gpsSats"></dt><dd class="gpsSats"></dd>
|
<td i18n="initialSetupDrawn"></td>
|
||||||
<dt i18n="gpsLat"></dt><dd class="gpsLat"></dd>
|
<td class="bat-mah-drawn">0 mAh</td>
|
||||||
<dt i18n="gpsLon"></dt><dd class="gpsLon"></dd>
|
</tr>
|
||||||
</dl>
|
<tr>
|
||||||
</div>
|
<td i18n="initialSetupDrawing"></td>
|
||||||
</div>
|
<td class="bat-mah-drawing">0.00 A</td>
|
||||||
<div class="block instruments">
|
</tr>
|
||||||
<span class="head" i18n="initialSetupInstrumentsHead"></span>
|
<tr class="noboarder">
|
||||||
|
<td i18n="initialSetupRSSI"></td>
|
||||||
|
<td class="rssi"> 0 %</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table></div></div></div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="spacer"><div class="gui_box grey">
|
||||||
|
<div class="gui_box_titlebar"><div class="spacer_box_title" i18n="initialSetupGPSHead"></div>
|
||||||
|
<div class="helpicon"></div></div><div class="spacer_box">
|
||||||
|
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="cf_table">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td i18n="gps3dFix"></td>
|
||||||
|
<td class="gpsFix"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td i18n="gpsSats"></td>
|
||||||
|
<td class="gpsSats"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td i18n="gpsLat"></td>
|
||||||
|
<td class="gpsLat"></td>
|
||||||
|
</tr>
|
||||||
|
<tr class="noboarder">
|
||||||
|
<td i18n="gpsLon"></td>
|
||||||
|
<td class="gpsLon"></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table></div></div></div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="spacer"><div class="gui_box grey">
|
||||||
|
<div class="gui_box_titlebar"><div class="spacer_box_title" i18n="initialSetupInstrumentsHead"></div>
|
||||||
|
<div class="helpicon"></div></div><div class="spacer_box">
|
||||||
<span id="attitude"></span>
|
<span id="attitude"></span>
|
||||||
<span id="heading"></span>
|
<span id="heading"></span>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
</div></div></div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue