betaflight-configurator/tabs/setup.css

386 lines
6.5 KiB
CSS

/* temporary styles that are used during compatibility period */
.tab-setup .CAP_BASEFLIGHT_CONFIG,
.tab-setup .COMPATIBILITY {
display: none;
height: calc(100% - 138px);
}
.tab-setup .CAP_BASEFLIGHT_CONFIG #interactive_block {
width: calc(100% - 199px);
}
.tab-setup .CAP_BASEFLIGHT_CONFIG .gps {
width: 185px;
}
.tab-setup .CAP_BASEFLIGHT_CONFIG .gps .fields {
padding: 5px 5px 3px 5px;
}
.tab-setup .CAP_BASEFLIGHT_CONFIG .gps dt {
float: left;
width: 85px;
height: 20px;
margin-bottom: 2px;
line-height: 20px;
}
.tab-setup .CAP_BASEFLIGHT_CONFIG .gps dd {
height: 20px;
margin-left: 85px;
margin-bottom: 2px;
line-height: 20px;
}
/* temporary styles end*/
.tab-setup {
height: 100%;
}
.tab-setup .section {
clear: both;
padding-bottom: 8px;
}
.tab-setup .section a {
display: block;
float: left;
width: 170px;
height: 24px;
line-height: 24px;
text-align: center;
font-weight: bold;
border: 1px solid silver;
background-color: #ececec;
}
.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: 80px;
margin-right: 10px;
}
.tab-setup .section a.restore {
width: 80px;
}
.tab-setup .section p {
margin-left: 180px;
padding: 0 0 0 5px;
height: 25px;
line-height: 25px;
border-bottom: 1px solid #e5e5e5;
}
#interactive_block {
float: left;
position: relative;
height: 100%;
width: calc(100% - 522px);
border: 1px solid silver;
background-color: white;
}
#interactive_block .model {
float: left;
height: 15px;
margin: 10px 0 0 10px;
font-weight: bold;
}
#interactive_block .modelMixDiagram {
position: absolute;
top: 32px;
left: 10px;
height: 95px;
}
#interactive_block .modelMixAirplane { /* Position airplane correctly */
height: 115px;
padding-left: 0px;
}
#interactive_block .modelMixCustom { /* Position question mark correctly */
height: 75px;
padding-left: 25px;
}
#interactive_block .heading {
float: right;
height: 15px;
margin: 10px 10px 0 0;
font-weight: bold;
}
#interactive_block a.reset {
position: absolute;
display: block;
bottom: 10px;
right: 10px;
height: 28px;
line-height: 28px;
padding: 0 15px 0 15px;
text-align: center;
font-weight: bold;
border: 1px solid silver;
background-color: #ececec;
z-index: 100;
}
#interactive_block a.reset:hover {
background-color: #dedcdc;
}
#canvas_wrapper {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.tab-setup .block_wrapper {
font-size: 0;
}
.tab-setup .block {
float: left;
display: block;
margin-left: 10px;
border: 1px solid silver;
}
.tab-setup .block .head {
display: block;
text-align: center;
line-height: 20px;
font-weight: bold;
border-bottom: 1px solid silver;
background-color: #ececec;
}
.tab-setup .mixer {
width: 200px;
}
.tab-setup .mixer .preview {
display: block;
width: 200px;
height: 140px;
margin: 5px 0 5px 0;
}
.tab-setup .mixer select {
display: block;
padding-left: 5px;
width: 100%;
height: 20px;
line-height: 20px;
font-weight: bold;
border-top: 1px solid silver;
}
.tab-setup .block .info {
width: 200px;
}
.tab-setup .battery,
.tab-setup .throttle,
.tab-setup .acc-trim,
.tab-setup .magnetometer,
.tab-setup .info {
display: inline-block;
vertical-align: top;
margin: 0 0 10px 10px;
font-size: 12px;
border: 1px solid silver;
}
.tab-setup .battery .head,
.tab-setup .throttle .head,
.tab-setup .acc-trim .head,
.tab-setup .magnetometer .head,
.tab-setup .info .head {
display: block;
text-align: center;
line-height: 20px;
font-weight: bold;
border-bottom: 1px solid silver;
background-color: #ececec;
}
.tab-setup .battery .fields,
.tab-setup .throttle .fields,
.tab-setup .magnetometer .fields,
.tab-setup .info .fields {
padding: 5px 5px 3px 5px;
}
.tab-setup .acc-trim .fields {
padding: 5px 5px 3px 5px;
}
.tab-setup .magnetometer .fields {
padding: 5px 5px 5px 5px;
}
.tab-setup .battery dt {
float: left;
width: 105px;
height: 22px;
margin-bottom: 2px;
line-height: 22px;
}
.tab-setup .battery dd {
height: 22px;
margin-left: 105px;
margin-bottom: 2px;
line-height: 22px;
}
.tab-setup .battery input {
width: 68px;
height: 20px;
line-height: 20px;
border: 1px solid silver;
text-align: center;
}
.tab-setup .throttle dt {
float: left;
width: 90px;
height: 22px;
margin-bottom: 2px;
line-height: 22px;
}
.tab-setup .throttle dd {
height: 22px;
margin-left: 90px;
margin-bottom: 2px;
line-height: 22px;
}
.tab-setup .throttle input {
width: 60px;
height: 20px;
line-height: 20px;
border: 1px solid silver;
text-align: center;
}
.tab-setup .acc-trim dt {
float: left;
width: 65px;
height: 22px;
line-height: 22px;
margin-bottom: 2px;
}
.tab-setup .acc-trim dd {
height: 22px;
margin-left: 65px;
margin-bottom: 2px;
}
.tab-setup .acc-trim input {
width: 60px;
height: 20px;
line-height: 20px;
border: 1px solid silver;
text-align: center;
}
.tab-setup .magnetometer dt {
float: left;
width: 90px;
height: 20px;
line-height: 22px;
margin-bottom: 2px;
}
.tab-setup .magnetometer dd {
height: 20px;
line-height: 22px;
margin-left: 90px;
margin-bottom: 2px;
}
.tab-setup .magnetometer input {
width: 60px;
height: 20px;
line-height: 20px;
border: 1px solid silver;
text-align: center;
}
.tab-setup .info dt {
float: left;
width: 99px;
height: 20px;
line-height: 20px;
}
.tab-setup .info dd {
width: 76px;
height: 20px;
line-height: 20px;
margin-left: 99px;
}
.tab-setup .buttons {
width: calc(100% - 20px);
position: absolute;
bottom: 10px;
}
.tab-setup .update {
display: block;
float: right;
height: 28px;
line-height: 28px;
padding: 0 15px 0 15px;
text-align: center;
font-weight: bold;
border: 1px solid silver;
background-color: #ececec;
}
.tab-setup .update:hover {
background-color: #dedcdc;
}