1
0
Fork 0
mirror of https://github.com/iNavFlight/inav-configurator.git synced 2025-07-23 08:15:19 +03:00
inav-configurator/main.css
Alberto García Hierro 0e01133fc9 Make tab loading async safe and add a small animation
Tab loading was relying on replacing the contents of '#content'
with the loading indicator, then replacing it with the loading tab
content and blocking rendering until the tab was ready by not
yielding. This is problematic for tabs that load some data
asynchronously, like PID and OSD.

Instead, put the loading indicator in front of everything else
and load new content inside '#content' next to the loading indicator
(but without showing it). Once the content and data are fully loaded
we fade out the loading indicator with a 0.4s long animation and
then we remove. This works for both synchronous and asynchonous
loading of tabs.
2020-01-21 18:19:06 +00:00

2150 lines
42 KiB
CSS

* {
margin: 0;
padding: 0;
border: 0;
list-style: none;
outline: none;
}
html, body {
height: 100%;
}
body {
font-family: 'open_sansregular', 'Segoe UI', Tahoma, sans-serif;
font-size: 12px;
color: #303030;
background-color: #3d3f3e;
margin: 0;
padding: 0;
overflow: hidden;
}
a {
text-decoration: none;
color: #000;
font-family: 'open_sanssemibold', Arial, serif;
}
a:hover {
text-decoration: none;
}
a.disabled {
pointer-events: none;
cursor: default;
color: #999;
}
/* Help-Icon */
.helpicon {
float: right;
margin-top: 7px;
margin-right: 7px;
display: block;
height: 14px;
width: 14px;
opacity: 0.2;
background: url("../images/icons/cf_icon_info_grey.svg") center;
background-size: contain;
transition: none;
}
.helpicon:hover {
opacity: 0.9;
background-image: url("../images/icons/cf_icon_info_green.svg");
transition: none;
}
.cf_doc_version_bt a {
padding: 1px 9px 1px 9px;
margin-top: -45px;
background-color: #37a8db;
border-radius: 3px;
border: 1px solid #3a9dbf;
color: #fff;
float: right;
font-family: 'open_sansbold', Arial, serif;
font-size: 10px;
line-height: 17px;
text-shadow: 0 1px rgba(0, 0, 0, 0.25);
text-transform: uppercase;
letter-spacing: 0.03em;
display: block;
}
.cf_doc_version_bt a:hover {
background-color: #37a8db;
transition: all ease 0.2s;
}
/* documentation button end */
input[type="number"]::-webkit-inner-spin-button {
opacity: 1;
margin-left: 5px;
}
.clear-both {
clear: both;
}
.left {
float: left;
}
.right {
float: right;
}
#main-wrapper {
padding: 0;
height: calc(100% - 7px);
}
.mt1em {
margin-top: 1em !important;
}
.mb1em {
margin-bottom: 1em !important;
}
.margin-top {
margin-top: 20px;
}
.margin-bottom {
margin-bottom: 20px;
}
.headerbar {
height: 110px;
width: 100%;
background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.15));
}
/*noinspection CssUnknownTarget*/
#logo {
position: absolute;
float: left;
height: 80px;
z-index: 0;
width: 450px;
background: url("../images/light-wide-2.svg") no-repeat left center;
background-size: contain;
margin-left: 15px;
margin-top: 10px;
}
.logo_text {
position: absolute;
height: 20px;
left: 0;
top: 65px;
color: #949494;
opacity: 0.5;
}
.logo_text .version {
float: right;
margin-left: 1em;
}
#port-picker {
position: relative;
width: 100%;
}
#portsinput {
float: right;
margin-top: 20px;
margin-right: 20px;
width: 450px;
}
#portsinput .dropdown {
margin-bottom: 5px;
}
#portsinput .portsinput__top-element {
display: inline-block;
width: 125px;
}
#portsinput .portsinput__top-element .dropdown-select {
width: 122px;
}
.portsinput__top-element--inline {
display: inline-block;
}
.portsinput__top-element--inline .switchery {
position: relative;
top: 1px;
margin-left: 5px;
}
.portsinput__top-element--inline span {
color: #ddd;
}
.portsinput__top-element--port-override {
position: relative;
overflow: hidden;
height: 20px;
width: 140px !important;
margin-bottom: 7px;
border: 1px solid;
border-radius: 3px;
background: #3e403f;
border-color: #111 #0a0a0a black;
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: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4));
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2);
color: #a6a6a6;
text-shadow: 0 1px rgba(0, 0, 0, 0.25);
top: 2px;
}
.portsinput__row {
text-align: right;
}
#port-override {
background-color: rgba(0, 0, 0, 0.1);
color: #888888;
width: 90px;
margin-left: 2px;
margin-top: 0;
padding: 1px;
border-radius: 3px;
height: 15px;
font-size: 12px;
}
#port-override-option label {
color: #ddd;
position: relative;
top: 1px;
}
#port-override input {
width: 136px;
}
#header_dataflash {
display: none;
}
#sensor-status {
margin-top: 20px;
float: right;
margin-right: 20px;
line-height: 2px;
height: 67px;
border-radius: 5px;
border: 1px solid #272727;
box-shadow: 0 2px 0 rgba(92, 92, 92, 0.5);
background: #434343 -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.55));
}
#sensor-status li {
float: left;
height: 67px;
width: 33px;
line-height: 18px;
text-align: center;
border: 1px solid #373737;
border-right-color: #222222;
border-bottom-color: #1a1a1a;
background: #434343 -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.45));
padding-left: 5px;
padding-right: 5px;
text-shadow: 0 1px rgba(0, 0, 0, 1.0);
}
.gyroicon {
background: url("../images/icons/sensor_gyro_off.png") no-repeat top;
background-size: 43px;
height: 30px;
margin-top: 3px;
width: 100%;
padding-top: 40px;
color: #4f4f4f;
text-align: center;
}
.gyroicon.active {
background-image: url("../images/icons/sensor_gyro_on.png");
color: #818181;
}
.accicon {
background: url("../images/icons/sensor_acc_off.png") no-repeat -5px 2px;
background-size: 40px;
height: 30px;
margin-top: 3px;
width: 100%;
padding-top: 40px;
color: #4f4f4f;
text-align: center;
}
.accicon.active {
background-image: url("../images/icons/sensor_acc_on.png");
color: #818181;
}
.accicon.error {
background-image: url("../images/icons/sensor_acc_error.png");
color: #d40000;
}
.magicon {
background: url("../images/icons/sensor_mag_off.png") no-repeat -5px 2px;
background-size: 42px;
height: 30px;
margin-top: 3px;
width: 100%;
padding-top: 40px;
color: #4f4f4f;
text-align: center;
}
.magicon.active {
background-image: url("../images/icons/sensor_mag_on.png");
color: #818181;
}
.magicon.error {
background-image: url("../images/icons/sensor_mag_error.png");
color: #d40000;
}
.gpsicon {
background: url("../images/icons/sensor_sat_off.png") no-repeat -5px 2px;
background-size: 42px;
height: 30px;
margin-top: 3px;
width: 100%;
padding-top: 40px;
color: #4f4f4f;
text-align: center;
}
.gpsicon.active {
background-image: url("../images/icons/sensor_sat_on.png");
color: #818181;
}
.gpsicon.error {
background-image: url("../images/icons/sensor_sat_error.png");
color: #d40000;
}
.opflowicon {
background: url("../images/icons/sensor_flow_off.png") no-repeat -5px 0;
background-size: 42px;
height: 30px;
margin-top: 3px;
width: 100%;
padding-top: 40px;
color: #4f4f4f;
text-align: center;
}
.opflowicon.active {
background-image: url("../images/icons/sensor_flow_on.png");
color: #818181;
}
.opflowicon.error {
background-image: url("../images/icons/sensor_flow_error.png");
color: #d40000;
}
.baroicon {
background: url("../images/icons/sensor_baro_off.png") no-repeat -5px 2px;
background-size: 40px;
height: 30px;
margin-top: 3px;
width: 100%;
padding-top: 40px;
color: #4f4f4f;
text-align: center;
}
.baroicon.active {
background-image: url("../images/icons/sensor_baro_on.png");
color: #818181;
}
.baroicon.error {
background-image: url("../images/icons/sensor_baro_error.png");
color: #d40000;
}
.sonaricon {
background: url("../images/icons/sensor_sonar_off.png") no-repeat -4px 1px;
background-size: 41px;
height: 30px;
margin-top: 3px;
width: 100%;
padding-top: 40px;
color: #4f4f4f;
text-align: center;
}
.sonaricon.active {
background-image: url("../images/icons/sensor_sonar_on.png");
color: #818181;
}
.sonaricon.error {
background-image: url("../images/icons/sensor_sonar_error.png");
color: #d40000;
}
.airspeedicon {
background: url("../images/icons/sensor_airspeed_off.png") no-repeat -4px 1px;
background-size: 41px;
height: 30px;
margin-top: 3px;
width: 100%;
padding-top: 40px;
color: #4f4f4f;
text-align: center;
}
.airspeedicon.active {
background-image: url("../images/icons/sensor_airspeed_on.png");
color: #818181;
}
.airspeedicon.error {
background-image: url("../images/icons/sensor_airspeed_error.png");
color: #d40000;
}
#sensor-status li:last-child {
border-right: 0 solid #c0c0c0;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
#sensor-status li:first-child {
border-left: 0 solid #c0c0c0;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
#sensor-status .on {
background: #434343 -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.45));
}
#options {
float: right;
width: 20px;
height: 20px;
margin-top: 10px;
margin-right: 10px;
background: url('../images/CF_settings_white.svg') no-repeat -1px -1px;
opacity: 0.4;
}
#options:hover {
opacity: 0.65;
}
#options.active {
opacity: 0.65;
}
#options.active:hover {
opacity: 0.75;
}
#options-window {
display: none;
position: fixed;
right: 35px;
top: 25px;
padding: 5px;
line-height: 20px;
border: 1px solid silver;
background-color: white;
border-radius: 5px;
z-index: 10000;
}
.options_container__checkbox input {
float: left;
margin-top: 3px;
margin-right: 5px;
}
.options_container label {
margin-right: 1em;
}
/* Log setup*/
#log {
margin-bottom: 0;
border: 0 solid silver;
background-color: #242424;
color: #ccc;
color: rgba(255, 255, 255, 0.60);
line-height: 21px;
height: 27px; /* was 65*/
overflow-y: hidden; /* scroll*/
}
#scrollicon {
position: fixed;
right: 10px;
top: 113px;
height: 27px;
width: 27px;
background: url("../images/icons/scroll.svg") no-repeat;
background-size: 100%;
opacity: 0.0;
transition: all ease 0.3s;
}
#scrollicon.active {
height: 110px;
margin-top: 10px;
margin-right: 20px;
width: 110px;
opacity: 0.15;
background-size: 80%;
box-shadow: inset 0 0 5px #000000;
transition: all ease 0.3s;
}
#log.active {
overflow-y: auto;
box-shadow: inset 0 0 15px #000000;
}
#log .wrapper {
padding: 5px 5px 4px 10px;
-webkit-user-select: text;
position: relative;
bottom: 0;
}
/* Log switch */
.logswitch {
position: absolute;
right: 20px;
margin-top: -1px;
float: right;
padding: 2px;
z-index: 10;
}
.logswitch a {
color: #656565 !important;
transition: all 0.3s;
}
.logswitch a:hover {
color: #959595 !important;
text-decoration: none !important;
transition: all 0.3s;
}
.tab_container {
float: left;
height: calc(100% - 150px);
width: 200px;
border-right: 4px solid #37a8db;
background-color: #2e2e2e;
transition: all 0.2s;
overflow-x: hidden;
overflow-y: auto;
}
.tab_container.logopen {
height: calc(100% - 235px);
transition: all 0.5s;
}
#tabs {
font-size: 13px;
}
.header-wrapper .mode-connected {
display: none;
}
#tabs ul.mode-connected {
display: none;
}
#tabs li {
border-bottom: 1px solid rgba(0, 0, 0, 0.30);
}
#tabs li:first-child {
border-top: 0;
}
#tabs li:last-child {
border-bottom: 0;
}
#tabs li a {
font-family: 'open_sansregular', Arial, serif;
padding-left: 33px;
padding-top: 5px;
padding-bottom: 3px;
background-color: transparent;
color: #999999;
height: 23px;
display: block;
text-shadow: 0 1px rgba(0, 0, 0, 0.45);
transition: none;
border-top: solid 1px rgba(255, 255, 255, 0.05);
/* following is just for a graceful degradation */
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
#tabs li a:hover {
text-decoration: none;
background-color: rgba(128, 128, 128, 0.50);
color: #fff;
}
#tabs li.active {
color: #fff;
transition: none;
}
#tabs li.active a {
background-color: #37a8db;
color: #fff;
transition: none;
}
#tabs li.active a:hover {
cursor: default;
background-color: #37a8db;
}
.tabicon {
background: no-repeat 13px 7px;
background-size: 15px;
}
/* Tab-Icons */
.ic_setup {
background-image: url("../images/icons/cf_icon_setup_grey.svg");
}
.ic_setup:hover {
background-image: url("../images/icons/cf_icon_setup_white.svg");
}
li.active .ic_setup {
background-image: url("../images/icons/cf_icon_setup_white.svg");
}
.ic_ports {
background-image: url("../images/icons/cf_icon_ports_grey.svg");
}
.ic_ports:hover {
background-image: url("../images/icons/cf_icon_ports_white.svg");
}
li.active .ic_ports {
background-image: url("../images/icons/cf_icon_ports_white.svg");
}
.ic_config {
background-image: url("../images/icons/cf_icon_config_grey.svg");
}
.ic_config:hover {
background-image: url("../images/icons/cf_icon_config_white.svg");
}
li.active .ic_config {
background-image: url("../images/icons/cf_icon_config_white.svg");
}
.ic_pid {
background-image: url("../images/icons/cf_icon_pid_grey.svg");
}
.ic_pid:hover {
background-image: url("../images/icons/cf_icon_pid_white.svg");
}
li.active .ic_pid {
background-image: url("../images/icons/cf_icon_pid_white.svg");
}
.ic_rx {
background-image: url("../images/icons/cf_icon_rx_grey.svg");
}
.ic_rx:hover {
background-image: url("../images/icons/cf_icon_rx_white.svg");
}
li.active .ic_rx {
background-image: url("../images/icons/cf_icon_rx_white.svg");
}
.ic_modes {
background-image: url("../images/icons/cf_icon_modes_grey.svg");
}
.ic_modes:hover {
background-image: url("../images/icons/cf_icon_modes_white.svg");
}
li.active .ic_modes {
background-image: url("../images/icons/cf_icon_modes_white.svg");
}
.ic_adjust {
background-image: url("../images/icons/cf_icon_adjust_grey.svg");
}
.ic_adjust:hover {
background-image: url("../images/icons/cf_icon_adjust_white.svg");
}
li.active .ic_adjust {
background-image: url("../images/icons/cf_icon_adjust_white.svg");
}
.ic_servo {
background-image: url("../images/icons/cf_icon_servo_grey.svg");
}
.ic_servo:hover {
background-image: url("../images/icons/cf_icon_servo_white.svg");
}
li.active .ic_servo {
background-image: url("../images/icons/cf_icon_servo_white.svg");
}
.ic_gps {
background-image: url("../images/icons/cf_icon_gps_grey.svg");
}
.ic_gps:hover {
background-image: url("../images/icons/cf_icon_gps_white.svg");
}
li.active .ic_gps {
background-image: url("../images/icons/cf_icon_gps_white.svg");
}
.ic_led {
background-image: url("../images/icons/cf_icon_led_grey.svg");
}
.ic_led:hover {
background-image: url("../images/icons/cf_icon_led_white.svg");
}
li.active .ic_led {
background-image: url("../images/icons/cf_icon_led_white.svg");
}
.ic_sensors {
background-image: url("../images/icons/cf_icon_sensors_grey.svg");
}
.ic_sensors:hover {
background-image: url("../images/icons/cf_icon_sensors_white.svg");
}
li.active .ic_sensors {
background-image: url("../images/icons/cf_icon_sensors_white.svg");
}
.ic_log {
background-image: url("../images/icons/cf_icon_log_grey.svg");
}
.ic_log:hover {
background-image: url("../images/icons/cf_icon_log_white.svg");
}
li.active .ic_log {
background-image: url("../images/icons/cf_icon_log_white.svg");
}
.ic_data {
background-image: url("../images/icons/cf_icon_data_grey.svg");
}
.ic_data:hover {
background-image: url("../images/icons/cf_icon_data_white.svg");
}
li.active .ic_data {
background-image: url("../images/icons/cf_icon_data_white.svg");
}
.ic_cli {
background-image: url("../images/icons/cf_icon_cli_grey.svg");
}
.ic_cli:hover {
background-image: url("../images/icons/cf_icon_cli_white.svg");
}
li.active .ic_cli {
background-image: url("../images/icons/cf_icon_cli_white.svg");
}
.ic_motor {
background-image: url("../images/icons/cf_icon_motor_grey.svg");
}
.ic_motor:hover {
background-image: url("../images/icons/cf_icon_motor_white.svg");
}
li.active .ic_motor {
background-image: url("../images/icons/cf_icon_motor_white.svg");
}
.ic_welcome {
background-image: url("../images/icons/cf_icon_welcome_grey.svg");
}
.ic_welcome:hover {
background-image: url("../images/icons/cf_icon_welcome_white.svg");
}
li.active .ic_welcome {
background-image: url("../images/icons/cf_icon_welcome_white.svg");
}
.ic_help {
background-image: url("../images/icons/cf_icon_help_grey.svg");
}
.ic_help:hover {
background-image: url("../images/icons/cf_icon_help_white.svg");
}
li.active .ic_help {
background-image: url("../images/icons/cf_icon_help_white.svg");
}
.ic_flasher {
background-image: url("../images/icons/cf_icon_flasher_grey.svg");
}
.ic_flasher:hover {
background-image: url("../images/icons/cf_icon_flasher_white.svg");
}
li.active .ic_flasher {
background-image: url("../images/icons/cf_icon_flasher_white.svg");
}
.ic_transponder {
background-image: url("../images/icons/cf_icon_transponder_grey.svg");
}
.ic_transponder:hover {
background-image: url("../images/icons/cf_icon_transponder_white.svg");
}
li.active .ic_transponder {
background-image: url("../images/icons/cf_icon_transponder_white.svg");
}
.ic_calibration {
background-image: url(../images/icons/cf_icon_cal_grey.svg);
}
.ic_calibration:hover {
background-image: url(../images/icons/cf_icon_cal_white.svg);
}
li.active .ic_calibration {
background-image: url(../images/icons/cf_icon_cal_white.svg);
}
/* SPARE Tab-Icons */
.ic_failsafe {
background-image: url("../images/icons/cf_icon_failsafe_grey.svg");
}
.ic_failsafe:hover {
background-image: url("../images/icons/cf_icon_failsafe_white.svg");
}
li.active .ic_failsafe {
background-image: url("../images/icons/cf_icon_failsafe_white.svg");
}
.ic_backup {
background-image: url("../images/icons/cf_icon_backup_grey.svg");
}
.ic_backup:hover {
background-image: url("../images/icons/cf_icon_backup_white.svg");
}
li.active .ic_backup {
background-image: url("../images/icons/cf_icon_backup_white.svg");
}
.ic_wizzard {
background-image: url("../images/icons/cf_icon_wizard_grey.svg");
}
.ic_wizzard:hover {
background-image: url("../images/icons/cf_icon_wizard_white.svg");
}
li.active .ic_wizzard {
background-image: url("../images/icons/cf_icon_wizard_white.svg");
}
.ic_advanced {
background-image: url("../images/icons/cf_icon_advanced_grey.svg");
}
.ic_advanced:hover {
background-image: url("../images/icons/cf_icon_advanced_white.svg");
}
li.active .ic_advanced {
background-image: url("../images/icons/cf_icon_advanced_white.svg");
}
.ic_mission {
background-image: url("../images/icons/cf_icon_mission_grey.svg");
}
.ic_mission:hover {
background-image: url("../images/icons/cf_icon_mission_white.svg");
}
li.active .ic_mission {
background-image: url("../images/icons/cf_icon_mission_white.svg");
}
.ic_mixer {
background-image: url("../images/icons/cf_icon_mixer_grey.svg");
}
.ic_mixer:hover {
background-image: url("../images/icons/cf_icon_mixer_white.svg");
}
li.active .ic_mixer {
background-image: url("../images/icons/cf_icon_mixer_white.svg");
}
#content {
margin-top: 0;
padding: 0;
height: calc(100% - 150px);
/* (port picker 105px, log CLOSED 25px, status bar: 20px + padding) - was: calc(100% - 171px)*/
background-color: white;
overflow-x: hidden;
overflow-y: auto;
border: 0 solid #848484;
-webkit-transform: rotateX(0deg); /* DO NOT REMOVE! this fixes the UI freezing bug on MAC OS X */
transition: all 0.3s;
}
#content.logopen {
margin-top: 0;
padding: 0;
height: calc(100% - 234px); /* (port picker, log OPEN, status bar: 20px + padding) - was: calc(100% - 171px)*/
background-color: white;
overflow-x: hidden;
overflow-y: auto;
border: 0 solid #848484;
-webkit-transform: rotateX(0deg); /* DO NOT REMOVE! this fixes the UI freezing bug on MAC OS X */
transition: all 0.5s;
/* Cause the height to shrink to contain its floated contents while log is open */
}
#content.loading {
overflow-y: hidden;
}
#content.loading > * {
opacity: 0;
}
#status-bar {
position: fixed;
bottom: 0;
width: calc(100% - 20px);
height: 20px;
line-height: 20px;
padding: 0 10px 0 10px;
border-top: 1px solid #7d7d79;
background-color: #bfbeb5;
}
#status-bar div {
float: left;
padding-right: 10px;
margin-right: 10px;
border-right: 1px solid #7d7d79;
}
#status-bar .version {
float: right;
margin: 0;
padding: 0;
border: 0;
}
#cache {
display: none;
}
.data-loading {
z-index: 10000;
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: url('../images/loading-bars.svg') no-repeat center 45%;
background-color: #FFF;
}
#content.loading .data-loading {
opacity: 1;
}
.data-loading p {
position: relative;
top: calc(45% + 45px);
text-align: center;
font-weight: bold;
}
dialog {
background-color: white;
padding: 1em;
height: auto;
margin: auto auto;
position: absolute;
width: 50%;
border-radius: 3px;
border: 1px solid silver;
}
/* Border of the Tab */
/* Tab Title */
.tab_title {
border-bottom: 1px solid #37a8db;
font-size: 20px;
line-height: 24px;
height: 30px;
font-family: 'open_sanslight', Arial, serif;
margin-bottom: 15px;
}
.tab_subtitle {
border-bottom: 1px solid #37a8db;
font-size: 1.5em;
line-height: 1.5em;
height: 25px;
font-family: 'open_sanslight', Arial, serif;
margin-bottom: 8px;
}
/* Note */
.note {
background-color: #fff7cd;
border: 1px solid #ffe55f;
margin-bottom: 7px;
margin-top: 3px;
border-radius: 3px;
font-size: 11px;
font-family: 'open_sansregular', Arial, serif;
}
.note--big {
font-size: 1.15em;
padding: 0.6em;
}
.note_spacer {
padding: 5px 7px 5px 7px;
}
.tab_wrapper {
padding: 20px 15px 15px 15px;
}
.content_wrapper {
padding: 20px;
position: relative;
}
.content_toolbar {
/* content toolbar panel */
width: 100%;
height: 30px;
background-color: #EFEFEF;
box-shadow: rgba(0, 0, 0, 0.10) 0 -3px 8px;
padding: 10px 0;
overflow: hidden;
border-top: 1px solid #F9F9F9;
}
.content_toolbar .btn a {
/* common styles for content toolbar buttons */
margin-top: 0;
margin-bottom: 0;
margin-right: 20px;
background-color: #37a8db;
border-radius: 3px;
border: 1px solid #3394b5;
color: #fff;
float: right;
font-family: 'open_sansbold', Arial, serif;
font-size: 12px;
text-shadow: 0 1px rgba(0, 0, 0, 0.25);
display: block;
cursor: pointer;
transition: all ease 0.2s;
padding: 0 9px;
line-height: 28px;
}
.content_toolbar .btn a:hover {
background-color: #3394b5;
transition: all ease 0.2s;
}
.content_toolbar .btn a:active {
background-color: #37a8db;
transition: all ease 0.0s;
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35);
}
.content_toolbar .btn a.disabled {
cursor: default;
color: #fff;
background-color: #AFAFAF;
border: 1px solid #AFAFAF;
pointer-events: none;
text-shadow: none;
opacity: 0.5;
}
.content_toolbar .btn-danger a {
background-color: #db250e;
border: 1px solid #b5480e;
}
.content_toolbar .btn-danger a:hover {
background-color: #b5480e;
transition: all ease 0.2s;
}
.toolbar_scroll_bottom .content_wrapper {
/* content wrapper in view with toolbar in scroll bottom
leave 50px space for the toolbar
*/
height: 100%;
margin: 0 0 -50px;
}
.toolbar_fixed_bottom .content_wrapper {
/* content wrapper in view with toolbar fixed over bottom edge
leave 50px space for the toolbar
*/
height: calc(100% - 90px);
overflow-y: auto;
}
.toolbar_fixed_bottom .content_toolbar {
position: absolute;
bottom: 0;
z-index: 2000; /* for fancy toggle buttons */
}
/* Colums START> */
.cf_column {
min-height: 20px;
margin-bottom: 0;
}
.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%;
}
/* Columns END> */
/* Spacers */
.spacer {
padding-left: 7px;
padding-right: 7px;
width: calc(100% - 14px);
float: left;
}
.spacer_left {
padding-left: 15px;
float: left;
width: calc(100% - 15px);
}
.spacer_right {
padding-right: 15px;
width: calc(100% - 15px);
float: left;
}
/* Standard GUI BOX */
.gui_box {
border: 1px solid #ccc;
border-radius: 4px;
background-color: #FFFFFF;
float: left;
width: calc(100% - 2px);
margin-bottom: 10px;
font-family: 'open_sansregular', Arial, serif;
}
.gui_warning {
background: #ffdddd;
}
.gui_note {
background: #ffffff;
}
.gui_warning .gui_box_titlebar {
background: #dc0000 linear-gradient(-45deg, rgba(255, 255, 255, .3) 10%, transparent 10%, transparent 20%,
rgba(255, 255, 255, .3) 20%, rgba(255, 255, 255, .3) 30%, transparent 30%, transparent 40%,
rgba(255, 255, 255, .3) 40%, rgba(255, 255, 255, .3) 50%, transparent 50%, transparent 60%,
rgba(255, 255, 255, .3) 60%, rgba(255, 255, 255, .3) 70%, transparent 70%, transparent 80%,
rgba(255, 255, 255, .3) 80%, rgba(255, 255, 255, .3) 90%, transparent 90%, transparent 100%,
rgba(255, 255, 255, .4) 100%, transparent);
}
/*noinspection CssNegativeValue*/
.gui_note .gui_box_titlebar {
background-image: linear-gradient(-45deg, rgba(255, 255, 255, .3) 10%, transparent 10%, transparent 20%,
rgba(255, 255, 255, .3) 20%, rgba(255, 255, 255, .3) 30%, transparent 30%, transparent 40%,
rgba(255, 255, 255, .3) 40%, rgba(255, 255, 255, .3) 50%, transparent 50%, transparent 60%,
rgba(255, 255, 255, .3) 60%, rgba(255, 255, 255, .3) 70%, transparent 70%, transparent 80%,
rgba(255, 255, 255, .3) 80%, rgba(255, 255, 255, .3) 90%, transparent 90%, transparent 100%,
rgba(255, 255, 255, .4) 100%, transparent);
}
.grey {
/* background-color:#f5f5f5; */
background-color: #f9f9f9
}
.gui_box_titlebar {
background-color: #e4e4e4;
border-radius: 3px 3px 0 0;
font-size: 13px;
width: 100%;
height: 27px;
padding-bottom: 0;
margin-bottom: 7px;
font-family: 'open_sanssemibold', Arial, serif;
}
.spacer_box {
padding: 10px;
margin-bottom: 3px;
}
.spacer_box_title {
padding-left: 10px;
padding-right: 10px;
padding-top: 4px;
margin-bottom: 0;
float: left;
}
/* Fixed area at the Bottom */
.fixed_band {
position: relative;
height: 50px;
background-color: #e4e4e4;
width: calc(100% + 40px);
margin-left: -20px;
box-shadow: rgba(0, 0, 0, 0.00) 0 -3px 8px;
bottom: 0;
margin-bottom: 0;
}
.fixed_band .save_btn a {
margin-top: 9px;
margin-bottom: 0;
margin-right: 20px;
background-color: #59aa29;
border-radius: 3px;
border: 1px solid #4c8829;
color: #fff;
float: right;
font-family: 'open_sansbold', Arial, serif;
font-size: 12px;
text-shadow: 0 1px rgba(0, 0, 0, 0.25);
display: block;
cursor: pointer;
transition: all ease 0.2s;
padding: 0 9px;
line-height: 28px;
}
.fixed_band .save_btn a:hover {
background-color: #37a8db;
transition: all ease 0.2s;
}
/* DIfferent buttons */
.default_btn {
width: 100%;
position: relative;
margin-bottom: 10px;
margin-top: 0;
float: left;
}
.default_btn.narrow {
width: auto;
margin-bottom: 0;
}
.default_btn.narrow a {
padding: 5px;
}
.default_btn a {
padding: 5px 0 5px 0;
text-align: center;
background-color: #fff;
border-radius: 4px;
border: 1px solid #37a8db;
color: #37a8db;
font-family: 'open_sanssemibold', Arial, serif;
font-size: 12px;
line-height: 13px;
display: block;
transition: all ease 0.2s;
text-decoration: none;
}
.default_btn a.disabled {
background-color: #fff;
border: 1px solid #ccc;
color: #ccc;
}
.default_btn a:hover {
background-color: #37a8db;
color: #fff !important;
text-shadow: 0 1px rgba(0, 0, 0, 0.25);
transition: all ease 0.2s;
text-decoration: none;
}
.default_btn a:active {
background-color: #37a8db;
transition: all ease 0.0s;
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35);
}
.small {
width: auto;
position: relative;
margin-bottom: 7px;
margin-top: 0;
margin-right: 5px;
float: left;
}
.small a {
padding: 3px 4px 4px 4px;
text-align: center;
text-shadow: 0 1px rgba(0, 0, 0, 0.25);
background-color: #acacac;
border-radius: 3px;
border: 1px solid #949494;
color: #fff;
font-family: 'open_sanssemibold', Arial, serif;
font-size: 11px;
line-height: 11px;
display: block;
transition: all ease 0.2s;
}
.small a:hover {
background-color: #45bce5;
color: #fff;
text-shadow: 0 1px rgba(0, 0, 0, 0.25);
border: 1px solid #3a9dbf;
transition: all ease 0.2s;
}
.small a:active {
background-color: #878787;
transition: all ease 0.0s;
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35);
}
.green a {
background-color: #37a8db;
text-shadow: 0 1px rgba(0, 0, 0, 0.25);
color: #fff;
border: 1px solid #3a9dbf;
transition: all ease 0.2s;
}
.green a:hover {
background-color: #45bce5;
border: 1px solid #3a9dbf;
text-shadow: 0 1px rgba(0, 0, 0, 0.25);
color: #fff;
transition: all ease 0.2s;
}
.btn.red a,
.btn.red a:active {
background-color: #fafafa;
text-shadow: 0 1px rgba(0, 0, 0, 0.25);
color: #ff1e1e;
border: 1px solid #a00000;
transition: all ease 0.2s;
}
.btn.red a:hover {
background-color: #f86975;
border: 1px solid #a00000;
text-shadow: 0 1px rgba(0, 0, 0, 0.25);
color: #fff;
transition: all ease 0.2s;
}
/* Table styling */
.cf_table {
margin-bottom: 5px;
float: left;
margin-top: -5px;
font-size: 11px;
width: 100%;
}
.cf_table td {
padding-top: 2px;
padding-bottom: 5px;
border: 0 dotted;
border-bottom: 1px #ccc dotted;
}
.noboarder td {
border: none;
}
.cf_table tr:last-child td {
border-bottom: 0px #ccc dotted;
}
.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;
}
/* connect button */
.connect_controls {
position: relative;
float: right;
left: 0;
top: 19px;
height: 70px;
width: 60px;
margin-right: 20px;
margin-left: 20px;
}
.connect_b {
float: left;
}
.connect_b a {
height: 50px;
width: 50px;
border-radius: 100px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
float: left;
margin-left: 5px;
margin-bottom: 7px;
transition: none;
}
.connect_b a.connect {
border: 1px solid #339cc1;
background-size: 44px;
background: #37a8db url('../images/icons/cf_icon_usb2_white.svg') no-repeat center 6px;
transition: none;
}
.connect_b a.connect:hover {
background-color: #40b8e2;
}
.connect_b a.connect.active {
border: 1px solid #fe0000;
background: #e60000 url('../images/icons/cf_icon_usb1_white.svg');
transition: none;
}
.connect_b a.connect.active:hover {
background-color: #f21212;
}
.connect_state {
float: left;
height: 20px;
width: 100%;
text-align: center;
color: #fff;
font-size: 12px;
font-family: 'open_sansregular', Arial, serif;
text-shadow: 0 1px rgba(0, 0, 0, 0.25);
margin-top: -1px;
}
/* fixing padding for all Tabs*/
.tab-setup, .tab-landing, .tab-adjustments, .tab-auxiliary, .tab-cli, .tab-configuration, .tab-failsafe, .tab-onboard_logging,
.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, .tab-osd, .tab-calibration {
height: 100%;
position: relative;
}
/* fixing logging tab*/
.properties {
width: 800px;
}
.properties dl {
width: 200px;
}
.properties dd {
width: 400px;
height: auto;
}
/* GPS Fix styling*/
.fix3d {
background-color: #56ac1d;
padding: 2px 5px;
border-radius: 3px;
color: #fff;
font-size: 10px;
}
.fix2d {
background-color: #bcbf10;
padding: 2px 5px;
border-radius: 3px;
color: #fff;
font-size: 10px;
}
/* Dataflash element styling*/
#dataflash_wrapper_global {
color: white;
font-size: 10px;
margin-top: 20px;
width: 269px;
float: right;
margin-right: 10px;
line-height: 12px;
height: 33px;
border-radius: 5px;
border: 1px solid #272727;
box-shadow: 0 1px 0 rgba(92, 92, 92, 0.5);
background: #434343 -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.55));
padding-top: 5px;
display: none;
text-shadow: 0 1px rgba(0, 0, 0, 1.0);
}
#profile_change {
color: white;
margin-top: 16px;
width: 130px;
float: left;
margin-right: 0;
line-height: 12px;
}
#battery_profile_change {
color: white;
margin-top: 16px;
width: 130px;
float: right;
margin-right: 0;
line-height: 12px;
}
.dataflash-contents_global {
margin-top: 18px;
border: 1px solid #4A4A4A;
background-color: #4A4A4A;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
border-radius: 3px;
margin-left: 5px;
margin-right: 5px;
}
.dataflash-free_global {
background-color: #37a8db;
border-radius: 4px;
}
.dataflash-contents_global .notsupported_global {
display: none;
}
.dataflash-contents_global li {
height: 5px;
position: relative;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.20);
border-radius: 2px;
}
.dataflash-contents_global li div {
position: absolute;
top: -18px;
margin-top: 0;
left: 0;
right: 0;
width: 120px;
text-align: left;
color: silver;
}
.dataflash-contents_global progress::-webkit-progress-bar {
height: 8px;
background-color: #eee;
}
.dataflash-contents progress::-webkit-progress-value {
background-color: #bcf;
}
.noflash_global {
display: none;
color: #868686;
text-align: center;
text-shadow: 0 1px rgba(0, 0, 0, 1.0);
margin-top: 2px;
}
.cf_tooltiptext {
display: none;
}
/* Battery element styling*/
#quad-status_wrapper {
display: none;
color: white;
font-size: 10px;
margin-top: 20px;
width: 100px;
float: right;
margin-right: 20px;
line-height: 12px;
height: 67px;
border-radius: 5px;
border: 1px solid #272727;
box-shadow: 0 1px 0 rgba(92, 92, 92, 0.5);
background: #434343 -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.55));
text-shadow: 0 1px rgba(0, 0, 0, 1.0);
}
.quad-status-contents {
display: none;
margin-top: 10px;
margin-left: 14px;
height: 10px;
width: 30px;
}
.battery-legend {
display: inline;
position: relative;
top: -2px;
margin-top: 0;
left: 0;
right: 0;
width: 40px;
text-align: left;
color: silver;
margin-left: -8px;
}
.quad-status-contents progress::-webkit-progress-bar {
height: 12px;
background-color: #eee;
}
.quad-status-contents progress::-webkit-progress-value {
background-color: #bcf;
}
.battery-status {
height: 11px;
position: relative;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.20);
border-radius: 0;
background-color: #59AA29;
margin-top: 0;
}
.battery-icon {
display: inline-block;
height: 30px;
width: 60px;
transition: none;
margin-top: 4px;
background: url("../images/icons/cf_icon_bat_grey.svg") no-repeat center;
background-size: contain;
}
.armedicon,
.failsafeicon,
.linkicon {
float: left;
margin-left: 8px;
margin-right: 2px;
margin-top: 6px;
display: block;
height: 18px;
width: 18px;
opacity: 0.8;
background-size: contain;
background-position: center;
transition: none;
}
.armedicon {
background-image: url("../images/icons/cf_icon_armed_grey.svg");
}
.failsafeicon {
background-image: url("../images/icons/cf_icon_failsafe_grey.svg");
}
.linkicon {
background-image: url("../images/icons/cf_icon_link_grey.svg");
}
.bottomStatusIcons {
background-color: #272727;
height: 31px;
margin-left: 5px;
margin-top: 2px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
@media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) {
.content_wrapper {
padding: 15px;
}
.tab_title {
font-size: 16px;
line-height: 18px;
font-family: 'open_sanslight', Arial, serif;
margin-bottom: 10px;
height: 22px;
}
.cf_doc_version_bt a {
padding: 1px 5px 1px 5px;
margin-top: -35px;
font-size: 9px;
line-height: 15px;
}
#content {
height: calc(100% - 151px);
}
.cf_table td {
padding-top: 2px;
padding-bottom: 2px;
}
.default_btn {
margin-bottom: 10px;
}
#tabs li a {
font-family: 'open_sansregular', Arial, serif;
font-size: 12px;
padding-left: 60px;
padding-top: 6px;
padding-bottom: 2px;
content: "";
text-shadow: none;
transition: none;
/* following is just for a graceful degradation */
text-overflow: clip;
white-space: nowrap;
overflow: hidden;
}
.tab_container {
width: 60px;
}
.gui_box_titlebar {
font-size: 12px;
height: 24px;
padding-bottom: 0;
margin-bottom: 5px;
float: left;
}
.spacer_box_title {
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
margin-bottom: 0;
float: left;
}
input {
font-size: 11px !important;
}
.helpicon {
float: right;
margin-top: 5px;
margin-right: 7px;
height: 14px;
width: 14px;
transition: none;
}
.gps_false {
padding: 0 3px 0 3px;
font-size: 10px;
}
.gps_true {
padding: 0 3px 0 3px;
font-size: 10px;
}
.content_toolbar .btn a {
margin-right: 15px;
}
.toolbar_fixed_bottom .content_wrapper {
/* content wrapper in view with toolbar fixed over bottom edge
leave 50px space for the toolbar
*/
height: calc(100% - 81px);
overflow-y: auto;
}
}
@media only screen and (max-height: 700px) , only screen and (max-device-height: 700px) {
.tab_container {
overflow-x: hidden;
overflow-y: auto;
}
}
select {
border: 1px solid silver;
border-radius: 3px;
padding: 1px;
}
.ic_osd {
background-image: url("../images/icons/icon_osd.svg");
background-position-y: 4px;
}
.ic_osd:hover, li.active .ic_osd {
background-image: url("../images/icons/icon_osd_white.svg");
}
.full-width {
width: 100% !important;
}
.is-hidden {
display: none;
}
.modal__content {
}
.modal__buttons {
position: absolute;
bottom: 0;
right: 0;
margin: 1em;
}
.modal__buttons--upbottom {
bottom: 22px;
}
.modal__button {
padding: 1em;
text-align: center;
background-color: #fff;
border-radius: 4px;
border: 1px solid #37a8db;
color: #37a8db;
font-family: 'open_sanssemibold', Arial, serif;
font-size: 12px;
line-height: 13px;
display: block;
transition: all ease 0.2s;
text-decoration: none;
cursor: pointer;
}
.modal__button--main {
background-color: #37a8db;
text-shadow: 0 1px rgba(0, 0, 0, 0.25);
color: #fff;
border: 1px solid #3a9dbf;
transition: all ease 0.2s;
}
.modal__button--main:active {
background-color: #37a8db;
transition: all ease 0.0s;
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35);
}
.modal__button--main:hover {
background-color: #3394b5;
transition: all ease 0.2s;
}
.modal__button--main--inline {
display: inline;
}
.modal__button--disabled {
cursor: default;
color: #fff;
background-color: #AFAFAF;
border: 1px solid #AFAFAF;
pointer-events: none;
text-shadow: none;
opacity: 0.5;
}
.modal__title {
border-bottom: 1px solid #37a8db;
font-size: 20px;
line-height: 24px;
height: 30px;
font-family: 'open_sanslight', Arial, serif;
margin-bottom: 15px;
}
.modal__title--warning {
border-bottom: none;
color: darkred;
}
.modal__text {
line-height: 1.5em;
font-size: 1.3em;
}
.jBox-Tooltip {
max-width: 180px;
}
.spacebottom {
margin-bottom: 15px;
}
.position-relative {
position: relative;
}
.text-center {
text-align: center;
}
.warning-box {
background-color: red;
color: white;
font-weight: bold;
margin: 0.4em 0;
padding: 1em;
clear: both;
}
.info-box {
background-color: darkgoldenrod;
color: white;
font-weight: bold;
margin: 0.4em 0;
padding: 1em;
clear: both;
}
.ok-box {
background-color: green;
color: white;
font-weight: bold;
margin: 0.4em 0;
padding: 1em;
clear: both;
}
#modal-reconnect {
/* width: 100%; */
height: 90px;
background: url(../images/loading-bars.svg) no-repeat center 100%;
}
#modal-reconnect div {
text-align: center;
}
.subtab__header {
padding: 0;
height: auto;
}
.subtab__header_label {
display: inline-block;
padding: 0 1em;
background-color: #eee;
min-width: 7em;
height: 1.5em;
line-height: 1.5em;
cursor: pointer;
font-size: 18px;
}
.subtab__header_label--current {
font-weight: bold;
background-color: #ccc;
}
.subtab__header_label:hover {
background-color: #c5c5c5;
}
.subtab__content {
display: none;
}
.subtab__content--current {
display: block;
}