mirror of
https://github.com/betaflight/betaflight-configurator.git
synced 2025-07-21 15:25:22 +03:00
main.css cleanup
This commit is contained in:
skaman82
parent
bd2f99b4dd
commit
82496ae9d5
1 changed files with 109 additions and 129 deletions
136
main.css
136
main.css
|
|
@ -225,7 +225,6 @@ input[type="number"]::-webkit-inner-spin-button {
|
||||||
background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.45));
|
background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.45));
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
padding-right: 5px;
|
padding-right: 5px;
|
||||||
text-align: center;
|
|
||||||
text-shadow: 0px 1px rgba(0, 0, 0, 1.0);
|
text-shadow: 0px 1px rgba(0, 0, 0, 1.0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -282,7 +281,6 @@ input[type="number"]::-webkit-inner-spin-button {
|
||||||
|
|
||||||
.magicon.active {
|
.magicon.active {
|
||||||
background-image: url(images/icons/sensor_mag_on.png);
|
background-image: url(images/icons/sensor_mag_on.png);
|
||||||
color: #61d514;
|
|
||||||
color: #818181;
|
color: #818181;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -301,7 +299,6 @@ input[type="number"]::-webkit-inner-spin-button {
|
||||||
|
|
||||||
.gpsicon.active {
|
.gpsicon.active {
|
||||||
background-image: url(images/icons/sensor_sat_on.png);
|
background-image: url(images/icons/sensor_sat_on.png);
|
||||||
color: #61d514;
|
|
||||||
color: #818181;
|
color: #818181;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -320,7 +317,6 @@ input[type="number"]::-webkit-inner-spin-button {
|
||||||
|
|
||||||
.baroicon.active {
|
.baroicon.active {
|
||||||
background-image: url(images/icons/sensor_baro_on.png);
|
background-image: url(images/icons/sensor_baro_on.png);
|
||||||
color: #61d514;
|
|
||||||
color: #818181;
|
color: #818181;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -339,7 +335,6 @@ input[type="number"]::-webkit-inner-spin-button {
|
||||||
|
|
||||||
.sonaricon.active {
|
.sonaricon.active {
|
||||||
background-image: url(images/icons/sensor_sonar_on.png);
|
background-image: url(images/icons/sensor_sonar_on.png);
|
||||||
color: #61d514;
|
|
||||||
color: #818181;
|
color: #818181;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -408,6 +403,7 @@ input[type="number"]::-webkit-inner-spin-button {
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
border: 0px solid silver; /* was 1px*/
|
border: 0px solid silver; /* was 1px*/
|
||||||
background-color: #242424;
|
background-color: #242424;
|
||||||
|
color: #ccc;
|
||||||
color: rgba(255, 255, 255, 0.60);
|
color: rgba(255, 255, 255, 0.60);
|
||||||
line-height: 21px;
|
line-height: 21px;
|
||||||
height: 27px; /* was 65*/
|
height: 27px; /* was 65*/
|
||||||
|
|
@ -433,7 +429,6 @@ input[type="number"]::-webkit-inner-spin-button {
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
width: 110px;
|
width: 110px;
|
||||||
opacity: 0.15;
|
opacity: 0.15;
|
||||||
background-image: url(images/icons/scroll.svg);
|
|
||||||
background-size: 80%;
|
background-size: 80%;
|
||||||
box-shadow: inset 0 0 5px #000000;
|
box-shadow: inset 0 0 5px #000000;
|
||||||
transition: all ease 0.3s;
|
transition: all ease 0.3s;
|
||||||
|
|
@ -501,20 +496,10 @@ input[type="number"]::-webkit-inner-spin-button {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#tabs {
|
#tabs {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#tabs ul {
|
|
||||||
/* overflow-y: auto; do not force scrollbars as it renders blank stripe on some user agents */
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#tabs.logopen ul {
|
|
||||||
/* Cause the height to shrink to contain its floated contents while log is open */
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-wrapper .mode-connected {
|
.header-wrapper .mode-connected {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
@ -556,6 +541,8 @@ input[type="number"]::-webkit-inner-spin-button {
|
||||||
#tabs li a:hover {
|
#tabs li a:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-color: rgba(0, 0, 0, 0.20);
|
background-color: rgba(0, 0, 0, 0.20);
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#tabs li.active {
|
#tabs li.active {
|
||||||
|
|
@ -854,26 +841,26 @@ li.active .ic_mission {
|
||||||
}
|
}
|
||||||
|
|
||||||
#content {
|
#content {
|
||||||
margin-top: 0px; /* 31 */
|
margin-top: 0px;
|
||||||
padding: 0px; /* 10 */
|
padding: 0px;
|
||||||
height: calc(100% - 150px);
|
height: calc(100% - 150px);
|
||||||
/* (port picker 105px, log CLOSED 25px, status bar: 20px + padding) - was: calc(100% - 171px)*/
|
/* (port picker 105px, log CLOSED 25px, status bar: 20px + padding) - was: calc(100% - 171px)*/
|
||||||
background-color: white;
|
background-color: white;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
border: 0px solid #848484; /* 1px solid #848484; */
|
border: 0px solid #848484;
|
||||||
-webkit-transform: rotateX(0deg); /* DO NOT REMOVE! this fixes the UI freezing bug on MAC OS X */
|
-webkit-transform: rotateX(0deg); /* DO NOT REMOVE! this fixes the UI freezing bug on MAC OS X */
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content.logopen {
|
#content.logopen {
|
||||||
margin-top: 0px; /* 31 */
|
margin-top: 0px;
|
||||||
padding: 0px; /* 10 */
|
padding: 0px;
|
||||||
height: calc(100% - 234px); /* (port picker, log OPEN, status bar: 20px + padding) - was: calc(100% - 171px)*/
|
height: calc(100% - 234px); /* (port picker, log OPEN, status bar: 20px + padding) - was: calc(100% - 171px)*/
|
||||||
background-color: white;
|
background-color: white;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
border: 0px solid #848484; /* 1px solid #848484; */
|
border: 0px solid #848484;
|
||||||
-webkit-transform: rotateX(0deg); /* DO NOT REMOVE! this fixes the UI freezing bug on MAC OS X */
|
-webkit-transform: rotateX(0deg); /* DO NOT REMOVE! this fixes the UI freezing bug on MAC OS X */
|
||||||
transition: all 0.5s;
|
transition: all 0.5s;
|
||||||
/* Cause the height to shrink to contain its floated contents while log is open */
|
/* Cause the height to shrink to contain its floated contents while log is open */
|
||||||
|
|
@ -962,10 +949,8 @@ dialog {
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab_wrapper {
|
.tab_wrapper {
|
||||||
padding-left: 20px;
|
padding: 20px 15px 15px 15px;
|
||||||
padding-right: 15px;
|
|
||||||
padding-top: 15px;
|
|
||||||
padding-bottom: 15px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.content_wrapper {
|
.content_wrapper {
|
||||||
|
|
@ -1449,7 +1434,7 @@ dialog {
|
||||||
|
|
||||||
.properties dd {
|
.properties dd {
|
||||||
width: 400px;
|
width: 400px;
|
||||||
height: auto !important;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* GPS Fix styling*/
|
/* GPS Fix styling*/
|
||||||
|
|
@ -1463,7 +1448,6 @@ dialog {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.fixfalse {
|
.fixfalse {
|
||||||
background-color: #e60000;
|
background-color: #e60000;
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
|
|
@ -1540,11 +1524,10 @@ dialog {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -18px;
|
top: -18px;
|
||||||
margin-top: 0px;
|
margin-top: 0px;
|
||||||
text-align: center;
|
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
width:120px;
|
width:120px;
|
||||||
text-align:left;
|
text-align: left;
|
||||||
color:silver;
|
color:silver;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1571,112 +1554,109 @@ dialog {
|
||||||
|
|
||||||
|
|
||||||
@media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) {
|
@media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) {
|
||||||
.content_wrapper {
|
|
||||||
|
.content_wrapper {
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
}
|
}
|
||||||
.tab_title {
|
|
||||||
|
.tab_title {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
font-family: 'open_sanslight', Arial;
|
font-family: 'open_sanslight', Arial;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
height: 22px;
|
height: 22px;
|
||||||
}
|
}
|
||||||
.cf_doc_version_bt a {
|
|
||||||
|
.cf_doc_version_bt a {
|
||||||
padding: 1px 5px 1px 5px;
|
padding: 1px 5px 1px 5px;
|
||||||
margin-top: -35px;
|
margin-top: -35px;
|
||||||
font-size: 9px;
|
font-size: 9px;
|
||||||
line-height: 15px;
|
line-height: 15px;
|
||||||
}
|
}
|
||||||
#content {
|
|
||||||
|
#content {
|
||||||
height: calc(100% - 151px);
|
height: calc(100% - 151px);
|
||||||
/* (port picker 105px, log CLOSED 25px, status bar: 20px + padding) - was: calc(100% - 171px)*/
|
}
|
||||||
}
|
|
||||||
body {
|
|
||||||
/*font-size: 11px;*/
|
|
||||||
/* lets see if we really need this? */
|
|
||||||
|
|
||||||
}
|
.cf_table td {
|
||||||
.tab-setup, .tab-landing, .tab-adjustments, .tab-auxiliary, .tab-cli, .tab-configuration, .tab-failsafe, .tab-dataflash,
|
|
||||||
.tab-firmware_flasher, .tab-gps, .tab-help, .tab-led-strip, .tab-logging, .tab-modes, .tab-motors,
|
|
||||||
.tab-pid_tuning, .tab-ports, .tab-receiver, .tab-sensors, .tab-servos {
|
|
||||||
|
|
||||||
}
|
|
||||||
.cf_table td {
|
|
||||||
padding-top: 2px;
|
padding-top: 2px;
|
||||||
padding-bottom: 2px;
|
padding-bottom: 2px;
|
||||||
}
|
}
|
||||||
.default_btn {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
.default_btn a {
|
|
||||||
/*font-size:11px;*/
|
|
||||||
|
|
||||||
}
|
.default_btn {
|
||||||
#tabs li a {
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs li a {
|
||||||
font-family: 'open_sansregular', Arial;
|
font-family: 'open_sansregular', Arial;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
padding-left: 60px;
|
padding-left: 60px;
|
||||||
padding-top: 6px;
|
padding-top: 6px;
|
||||||
padding-bottom: 2px;
|
padding-bottom: 2px;
|
||||||
content: "" !important;
|
content: "";
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
transition: none;
|
transition: none;
|
||||||
/* following is just for a graceful degradation */
|
/* following is just for a graceful degradation */
|
||||||
text-overflow: clip;
|
text-overflow: clip;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.tab_container {
|
|
||||||
|
.tab_container {
|
||||||
width: 60px;
|
width: 60px;
|
||||||
}
|
}
|
||||||
.gui_box_titlebar {
|
|
||||||
|
.gui_box_titlebar {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
padding-bottom: 0px;
|
padding-bottom: 0px;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
.spacer_box_title {
|
|
||||||
|
.spacer_box_title {
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
padding-top: 3px;
|
padding-top: 3px;
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
input {
|
|
||||||
|
input {
|
||||||
font-size: 11px !important;
|
font-size: 11px !important;
|
||||||
}
|
}
|
||||||
.helpicon {
|
|
||||||
|
.helpicon {
|
||||||
float: right;
|
float: right;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
margin-right: 7px;
|
margin-right: 7px;
|
||||||
height: 14px;
|
height: 14px;
|
||||||
width: 14px;
|
width: 14px;
|
||||||
transition: none;
|
transition: none;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#tooltiptext {
|
.gps_false {
|
||||||
}
|
|
||||||
|
|
||||||
.gps_false {
|
|
||||||
padding: 0px 3px 0px 3px;
|
padding: 0px 3px 0px 3px;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
.gps_true {
|
|
||||||
|
.gps_true {
|
||||||
padding: 0px 3px 0px 3px;
|
padding: 0px 3px 0px 3px;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
.content_toolbar .btn a {
|
|
||||||
|
.content_toolbar .btn a {
|
||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
}
|
}
|
||||||
.toolbar_fixed_bottom .content_wrapper {
|
|
||||||
|
.toolbar_fixed_bottom .content_wrapper {
|
||||||
/* content wrapper in view with toolbar fixed over bottom edge
|
/* content wrapper in view with toolbar fixed over bottom edge
|
||||||
leave 50px space for the toolbar
|
leave 50px space for the toolbar
|
||||||
*/
|
*/
|
||||||
height: calc(100% - 81px);
|
height: calc(100% - 81px);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-height: 700px) , only screen and (max-device-height: 700px) {
|
@media only screen and (max-height: 700px) , only screen and (max-device-height: 700px) {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue