diff --git a/main.css b/main.css index a3cc43ad..f47e6d05 100644 --- a/main.css +++ b/main.css @@ -15,15 +15,15 @@ body { font-size: 12px; color: #303030; background-color: #3d3f3e; - margin: 0px; - padding: 0px; + margin: 0; + padding: 0; overflow: hidden; } a { text-decoration: none; color: #000; - font-family: 'open_sanssemibold', Arial; + font-family: 'open_sanssemibold', Arial, serif; } a:hover { @@ -45,9 +45,8 @@ a.disabled { height: 14px; width: 14px; opacity: 0.2; - background-image: url(images/icons/cf_icon_info_grey.svg); + background: url(images/icons/cf_icon_info_grey.svg) center; background-size: contain; - background-position: center; transition: none; } @@ -65,10 +64,10 @@ a.disabled { border: 1px solid #3a9dbf; color: #fff; float: right; - font-family: 'open_sansbold', Arial; + font-family: 'open_sansbold', Arial, serif; font-size: 10px; line-height: 17px; - text-shadow: 0px 1px rgba(0, 0, 0, 0.25); + text-shadow: 0 1px rgba(0, 0, 0, 0.25); text-transform: uppercase; letter-spacing: 0.03em; display: block; @@ -81,7 +80,7 @@ a.disabled { /* documentation button end */ input[type="number"]::-webkit-inner-spin-button { - opacity: 1; /* required for chromium 33+ beta */ + opacity: 1; margin-left: 5px; } @@ -98,7 +97,7 @@ input[type="number"]::-webkit-inner-spin-button { } #main-wrapper { - padding: 0px 0px 0 0px; /* padding: 5px 5px 0 5px; */ + padding: 0; height: calc(100% - 7px); } @@ -111,21 +110,18 @@ input[type="number"]::-webkit-inner-spin-button { } .headerbar { - height:110px; - width:100%; + height: 110px; + width: 100%; background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.15)); } - #logo { position: absolute; float: left; height: 80px; z-index: 0; - background-image: url("images/light-wide-2.svg"); - background-repeat: no-repeat; width: 450px; - background-position: left center; + background: url("images/light-wide-2.svg") no-repeat left center; background-size: contain; margin-left: 15px; margin-top: 10px; @@ -135,7 +131,7 @@ input[type="number"]::-webkit-inner-spin-button { position: absolute; height: 20px; width: 125px; - left: 0px; + left: 0; top: 65px; color: #949494; opacity: 0.5; @@ -161,13 +157,12 @@ input[type="number"]::-webkit-inner-spin-button { margin-bottom: 5px; } - #port-override { background-color: rgba(0, 0, 0, 0.1); color: #888888; width: 140px; margin-left: 2px; - margin-top: 0px; + margin-top: 0; padding: 1px; border-radius: 3px; height: 15px; @@ -206,9 +201,8 @@ input[type="number"]::-webkit-inner-spin-button { height: 67px; border-radius: 5px; border: 1px solid #272727; - box-shadow: 0px 2px 0px rgba(92, 92, 92, 0.5); - background-color: #434343; - background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.55)); + 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 { @@ -217,22 +211,18 @@ input[type="number"]::-webkit-inner-spin-button { width: 33px; line-height: 18px; text-align: center; - border-top: 1px solid #373737; - border-bottom: 1px solid #1a1a1a; - border-left: 1px solid #373737; - border-right: 1px solid #222222; - background-color: #434343; - background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.45)); + 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: 0px 1px rgba(0, 0, 0, 1.0); + text-shadow: 0 1px rgba(0, 0, 0, 1.0); } .gyroicon { - background-image: url(images/icons/sensor_gyro_off.png); + background: url(images/icons/sensor_gyro_off.png) no-repeat top; background-size: 43px; - background-position: top; - background-repeat: no-repeat; height: 30px; margin-top: 3px; width: 100%; @@ -247,10 +237,8 @@ input[type="number"]::-webkit-inner-spin-button { } .accicon { - background-image: url(images/icons/sensor_acc_off.png); + background: url(images/icons/sensor_acc_off.png) no-repeat -5px 2px; background-size: 40px; - background-position: -5px 2px; - background-repeat: no-repeat; height: 30px; margin-top: 3px; width: 100%; @@ -270,10 +258,8 @@ input[type="number"]::-webkit-inner-spin-button { } .magicon { - background-image: url(images/icons/sensor_mag_off.png); + background: url(images/icons/sensor_mag_off.png) no-repeat -5px 2px; background-size: 42px; - background-position: -5px 2px; - background-repeat: no-repeat; height: 30px; margin-top: 3px; width: 100%; @@ -286,16 +272,15 @@ input[type="number"]::-webkit-inner-spin-button { 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-image: url(images/icons/sensor_sat_off.png); + background: url(images/icons/sensor_sat_off.png) no-repeat -5px 2px; background-size: 42px; - background-position: -5px 2px; - background-repeat: no-repeat; height: 30px; margin-top: 3px; width: 100%; @@ -315,10 +300,8 @@ input[type="number"]::-webkit-inner-spin-button { } .opflowicon { - background-image: url(images/icons/sensor_flow_off.png); + background: url(images/icons/sensor_flow_off.png) no-repeat -5px 0; background-size: 42px; - background-position: -5px 0px; - background-repeat: no-repeat; height: 30px; margin-top: 3px; width: 100%; @@ -338,10 +321,8 @@ input[type="number"]::-webkit-inner-spin-button { } .baroicon { - background-image: url(images/icons/sensor_baro_off.png); + background: url(images/icons/sensor_baro_off.png) no-repeat -5px 2px; background-size: 40px; - background-position: -5px 2px; - background-repeat: no-repeat; height: 30px; margin-top: 3px; width: 100%; @@ -361,10 +342,8 @@ input[type="number"]::-webkit-inner-spin-button { } .sonaricon { - background-image: url(images/icons/sensor_sonar_off.png); + background: url(images/icons/sensor_sonar_off.png) no-repeat -4px 1px; background-size: 41px; - background-position: -4px 1px; - background-repeat: no-repeat; height: 30px; margin-top: 3px; width: 100%; @@ -384,10 +363,8 @@ input[type="number"]::-webkit-inner-spin-button { } .airspeedicon { - background-image: url(images/icons/sensor_airspeed_off.png); + background: url(images/icons/sensor_airspeed_off.png) no-repeat -4px 1px; background-size: 41px; - background-position: -4px 1px; - background-repeat: no-repeat; height: 30px; margin-top: 3px; width: 100%; @@ -407,20 +384,19 @@ input[type="number"]::-webkit-inner-spin-button { } #sensor-status li:last-child { - border-right: 0px solid #c0c0c0; + border-right: 0 solid #c0c0c0; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } #sensor-status li:first-child { - border-left: 0px solid #c0c0c0; + border-left: 0 solid #c0c0c0; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } #sensor-status .on { - background-color: #434343; - background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.45)); + background: #434343 -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.45)); } #options { @@ -429,9 +405,7 @@ input[type="number"]::-webkit-inner-spin-button { height: 20px; margin-top: 10px; margin-right: 10px; - background-image: url('./images/CF_settings_white.svg'); - background-position: -1px -1px; - background-repeat: no-repeat; + background: url('./images/CF_settings_white.svg') no-repeat -1px -1px; opacity: 0.4; } @@ -468,8 +442,8 @@ input[type="number"]::-webkit-inner-spin-button { /* Log setup*/ #log { - margin-bottom: 0px; - border: 0px solid silver; /* was 1px*/ + margin-bottom: 0; + border: 0 solid silver; background-color: #242424; color: #ccc; color: rgba(255, 255, 255, 0.60); @@ -484,8 +458,7 @@ input[type="number"]::-webkit-inner-spin-button { top: 113px; height: 27px; width: 27px; - background-image: url(images/icons/scroll.svg); - background-repeat: no-repeat; + background: url(images/icons/scroll.svg) no-repeat; background-size: 100%; opacity: 0.0; transition: all ease 0.3s; @@ -508,21 +481,10 @@ input[type="number"]::-webkit-inner-spin-button { } #log .wrapper { - padding: 5px; /* was 5*/ - padding-left: 10px; - padding-bottom: 4px; + padding: 5px 5px 4px 10px; -webkit-user-select: text; position: relative; - bottom: 0px; -} - -#log a { - font-weight: regular; - color: #59aa29; -} - -#log a:hover { - text-decoration: underline; + bottom: 0; } /* Log switch */ @@ -579,15 +541,15 @@ input[type="number"]::-webkit-inner-spin-button { } #tabs li:first-child { - border-top: 0px; + border-top: 0; } #tabs li:last-child { - border-bottom: 0px; + border-bottom: 0; } #tabs li a { - font-family: 'open_sansregular', Arial; + font-family: 'open_sansregular', Arial, serif; padding-left: 33px; padding-top: 5px; padding-bottom: 3px; @@ -595,7 +557,7 @@ input[type="number"]::-webkit-inner-spin-button { color: #999999; height: 23px; display: block; - text-shadow: 0px 1px rgba(0, 0, 0, 0.45); + 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 */ @@ -628,9 +590,8 @@ input[type="number"]::-webkit-inner-spin-button { } .tabicon { - background-repeat: no-repeat; + background: no-repeat 13px 7px; background-size: 15px; - background-position: 13px 7px; } /* Tab-Icons */ @@ -874,9 +835,11 @@ li.active .ic_transponder { 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); } @@ -888,6 +851,7 @@ li.active .ic_backup { .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); } @@ -899,6 +863,7 @@ li.active .ic_wizard { .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); } @@ -910,6 +875,7 @@ li.active .ic_advanced { .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); } @@ -919,26 +885,26 @@ li.active .ic_mission { } #content { - margin-top: 0px; - padding: 0px; + 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: 0px solid #848484; + 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: 0px; - padding: 0px; + 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: 0px solid #848484; + 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 */ @@ -946,7 +912,7 @@ li.active .ic_mission { #status-bar { position: fixed; - bottom: 0px; + bottom: 0; width: calc(100% - 20px); height: 20px; line-height: 20px; @@ -976,9 +942,7 @@ li.active .ic_mission { .data-loading { width: 100%; height: 100%; - background-image: url('../images/loading-bars.svg'); - background-repeat: no-repeat; - background-position: center 45%; + background: url('../images/loading-bars.svg') no-repeat center 45%; } .data-loading p { @@ -1007,7 +971,7 @@ dialog { font-size: 20px; line-height: 24px; height: 30px; - font-family: 'open_sanslight', Arial; + font-family: 'open_sanslight', Arial, serif; margin-bottom: 15px; } @@ -1019,7 +983,7 @@ dialog { margin-top: 3px; border-radius: 3px; font-size: 11px; - font-family: 'open_sansregular', Arial; + font-family: 'open_sansregular', Arial, serif; } .note_spacer { @@ -1049,23 +1013,21 @@ dialog { .content_toolbar .btn a { /* common styles for content toolbar buttons */ - margin-top: 0px; - margin-bottom: 0px; + 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; + font-family: 'open_sansbold', Arial, serif; font-size: 12px; - text-shadow: 0px 1px rgba(0, 0, 0, 0.25); + text-shadow: 0 1px rgba(0, 0, 0, 0.25); display: block; cursor: pointer; transition: all ease 0.2s; - padding: 0px; - padding-left: 9px; - padding-right: 9px; + padding: 0 9px; line-height: 28px; } @@ -1077,7 +1039,7 @@ dialog { .content_toolbar .btn a:active { background-color: #37a8db; transition: all ease 0.0s; - box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.35); + box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35); } .content_toolbar .btn a.disabled { @@ -1115,7 +1077,7 @@ dialog { /* Colums START> */ .cf_column { min-height: 20px; - margin-bottom: 0px; + margin-bottom: 0; } .full { @@ -1193,7 +1155,7 @@ dialog { float: left; width: calc(100% - 2px); margin-bottom: 10px; - font-family: 'open_sansregular', Arial; + font-family: 'open_sansregular', Arial, serif; } .gui_warning { @@ -1205,25 +1167,24 @@ dialog { } .gui_warning .gui_box_titlebar { - background-color: #dc0000; - 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); + 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); + 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 @@ -1231,14 +1192,14 @@ dialog { .gui_box_titlebar { background-color: #e4e4e4; - border-radius: 3px 3px 0px 0px; + border-radius: 3px 3px 0 0; font-size: 13px; width: 100%; height: 27px; - padding-bottom: 0px; + padding-bottom: 0; float: left; margin-bottom: 7px; - font-family: 'open_sanssemibold', Arial; + font-family: 'open_sanssemibold', Arial, serif; } .spacer_box { @@ -1250,7 +1211,7 @@ dialog { padding-left: 10px; padding-right: 10px; padding-top: 4px; - margin-bottom: 0px; + margin-bottom: 0; float: left; } @@ -1262,28 +1223,26 @@ dialog { width: calc(100% + 40px); margin-left: -20px; box-shadow: rgba(0, 0, 0, 0.00) 0 -3px 8px; - bottom: 0px; - margin-bottom: 0px; + bottom: 0; + margin-bottom: 0; } .fixed_band .save_btn a { margin-top: 9px; - margin-bottom: 0px; + 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; + font-family: 'open_sansbold', Arial, serif; font-size: 12px; - text-shadow: 0px 1px rgba(0, 0, 0, 0.25); + text-shadow: 0 1px rgba(0, 0, 0, 0.25); display: block; cursor: pointer; transition: all ease 0.2s; - padding: 0px; - padding-left: 9px; - padding-right: 9px; + padding: 0 9px; line-height: 28px; } @@ -1297,51 +1256,51 @@ dialog { width: 100%; position: relative; margin-bottom: 10px; - margin-top: 0px; + margin-top: 0; float: left; } .default_btn a { - padding: 5px 0px 5px 0px; + 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; + font-family: 'open_sanssemibold', Arial, serif; font-size: 12px; line-height: 13px; display: block; transition: all ease 0.2s; - text-decoration:none; + text-decoration: none; } .default_btn a.disabled { - background-color: #fff; - border: 1px solid #ccc; - color: #ccc; + background-color: #fff; + border: 1px solid #ccc; + color: #ccc; } .default_btn a:hover { background-color: #37a8db; color: #fff !important; - text-shadow: 0px 1px rgba(0, 0, 0, 0.25); + text-shadow: 0 1px rgba(0, 0, 0, 0.25); transition: all ease 0.2s; - text-decoration:none; + text-decoration: none; } .default_btn a:active { background-color: #37a8db; transition: all ease 0.0s; - box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.35); + box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35); } .small { width: auto; position: relative; margin-bottom: 7px; - margin-top: 0px; + margin-top: 0; margin-right: 5px; float: left; } @@ -1349,12 +1308,12 @@ dialog { .small a { padding: 3px 4px 4px 4px; text-align: center; - text-shadow: 0px 1px rgba(0, 0, 0, 0.25); + 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; + font-family: 'open_sanssemibold', Arial, serif; font-size: 11px; line-height: 11px; display: block; @@ -1364,7 +1323,7 @@ dialog { .small a:hover { background-color: #45bce5; color: #fff; - text-shadow: 0px 1px rgba(0, 0, 0, 0.25); + text-shadow: 0 1px rgba(0, 0, 0, 0.25); border: 1px solid #3a9dbf; transition: all ease 0.2s; } @@ -1372,12 +1331,12 @@ dialog { .small a:active { background-color: #878787; transition: all ease 0.0s; - box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.35); + box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35); } .green a { background-color: #37a8db; - text-shadow: 0px 1px rgba(0, 0, 0, 0.25); + text-shadow: 0 1px rgba(0, 0, 0, 0.25); color: #fff; border: 1px solid #3a9dbf; transition: all ease 0.2s; @@ -1386,7 +1345,7 @@ dialog { .green a:hover { background-color: #45bce5; border: 1px solid #3a9dbf; - text-shadow: 0px 1px rgba(0, 0, 0, 0.25); + text-shadow: 0 1px rgba(0, 0, 0, 0.25); color: #fff; transition: all ease 0.2s; } @@ -1401,11 +1360,10 @@ dialog { } .cf_table td { - border: 0px; - border-bottom: solid 1px #ccc; padding-top: 2px; padding-bottom: 5px; - border-style: dotted; + border: 0 dotted; + border-bottom: 1px #ccc; } .noboarder td { @@ -1438,7 +1396,7 @@ dialog { .connect_controls { position: relative; float: right; - left: 0px; + left: 0; top: 19px; height: 70px; width: 60px; @@ -1454,7 +1412,7 @@ dialog { height: 50px; width: 50px; border-radius: 100px; - box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.35); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); float: left; margin-left: 5px; margin-bottom: 7px; @@ -1462,12 +1420,9 @@ dialog { } .connect_b a.connect { - background-color: #37a8db; border: 1px solid #339cc1; - background-image: url(images/icons/cf_icon_usb2_white.svg); - background-repeat: no-repeat; background-size: 44px; - background-position: center 6px; + background: #37a8db url(images/icons/cf_icon_usb2_white.svg) no-repeat center 6px; transition: none; } @@ -1476,9 +1431,8 @@ dialog { } .connect_b a.connect.active { - background-color: #e60000; border: 1px solid #fe0000; - background-image: url(images/icons/cf_icon_usb1_white.svg); + background: #e60000 url(images/icons/cf_icon_usb1_white.svg); transition: none; } @@ -1493,15 +1447,15 @@ dialog { text-align: center; color: #fff; font-size: 12px; - font-family: 'open_sansregular', Arial; - text-shadow: 0px 1px rgba(0, 0, 0, 0.25); + 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-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 { height: 100%; position: relative; } @@ -1523,9 +1477,7 @@ dialog { /* GPS Fix styling*/ .fix3d { background-color: #56ac1d; - padding: 2px; - padding-left: 5px; - padding-right: 5px; + padding: 2px 5px; border-radius: 3px; color: #fff; font-size: 10px; @@ -1533,51 +1485,39 @@ dialog { .fix2d { background-color: #bcbf10; - padding: 2px; - padding-left: 5px; - padding-right: 5px; + padding: 2px 5px; border-radius: 3px; color: #fff; font-size: 10px; } -.fixnone { - background-color: #e60000; - padding: 2px; - padding-left: 5px; - padding-right: 5px; - border-radius: 3px; - color: #fff; - font-size: 10px; -} /* Dataflash element styling*/ #dataflash_wrapper_global { - color:white; - font-size:10px; + color: white; + font-size: 10px; margin-top: 20px; - width:125px; + width: 125px; float: right; margin-right: 10px; line-height: 12px; height: 33px; border-radius: 5px; border: 1px solid #272727; - box-shadow: 0px 1px 0px rgba(92, 92, 92, 0.5); - background-color: #434343; - background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.55)); - padding-top:5px; - display:none; - text-shadow: 0px 1px rgba(0, 0, 0, 1.0); + 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; + color: white; margin-top: 16px; - width:125px; + width: 125px; float: right; - margin-right: 0px; + margin-right: 0; line-height: 12px; } @@ -1594,13 +1534,11 @@ dialog { margin-right: 5px; } - .dataflash-free_global { background-color: #37a8db; border-radius: 4px; } - .dataflash-contents_global .notsupported_global { display: none; } @@ -1616,12 +1554,12 @@ dialog { .dataflash-contents_global li div { position: absolute; top: -18px; - margin-top: 0px; + margin-top: 0; left: 0; right: 0; - width:120px; + width: 120px; text-align: left; - color:silver; + color: silver; } .dataflash-contents_global progress::-webkit-progress-bar { @@ -1634,21 +1572,21 @@ dialog { } .noflash_global { - display:none; + display: none; color: #868686; text-align: center; - text-shadow: 0px 1px rgba(0, 0, 0, 1.0); - margin-top:2px; + text-shadow: 0 1px rgba(0, 0, 0, 1.0); + margin-top: 2px; } .cf_tooltiptext { - display:none; + display: none; } /* Battery element styling*/ #quad-status_wrapper { - display:none; + display: none; color: white; font-size: 10px; margin-top: 20px; @@ -1659,27 +1597,24 @@ dialog { height: 67px; border-radius: 5px; border: 1px solid #272727; - box-shadow: 0px 1px 0px rgba(92, 92, 92, 0.5); - background-color: #434343; - background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.55)); - text-shadow: 0px 1px rgba(0, 0, 0, 1.0); + 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 { +.quad-status-contents { display: none; margin-top: 10px; margin-left: 14px; height: 10px; width: 30px; - /* width: 30px; */ } - .battery-legend { display: inline; position: relative; top: -2px; - margin-top: 0px; + margin-top: 0; left: 0; right: 0; width: 40px; @@ -1701,22 +1636,19 @@ dialog { height: 11px; position: relative; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.20); - border-radius: 0px; + border-radius: 0; background-color: #59AA29; - /* border-radius: 4px; */ - margin-top: 0px; + margin-top: 0; } .battery-icon { - background-image: url(images/icons/cf_icon_bat_grey.svg); - background-size: contain; - background-position: center; display: inline-block; height: 30px; width: 60px; transition: none; margin-top: 4px; - background-repeat: no-repeat; + background: url(images/icons/cf_icon_bat_grey.svg) no-repeat center; + background-size: contain; } .armedicon, @@ -1738,6 +1670,7 @@ dialog { .armedicon { background-image: url(images/icons/cf_icon_armed_grey.svg); } + .failsafeicon { background-image: url(images/icons/cf_icon_failsafe_grey.svg); } @@ -1754,120 +1687,118 @@ dialog { 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; - 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; - 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: 0px; - margin-bottom: 5px; - float: left; -} - -.spacer_box_title { - padding-left: 10px; - padding-right: 10px; - padding-top: 3px; - margin-bottom: 0px; - float: left; -} - -input { - font-size: 11px !important; -} - -.helpicon { - float: right; - margin-top: 5px; - margin-right: 7px; - height: 14px; - width: 14px; - transition: none; + .content_wrapper { + padding: 15px; } -.gps_false { - padding: 0px 3px 0px 3px; - font-size: 10px; -} + .tab_title { + font-size: 16px; + line-height: 18px; + font-family: 'open_sanslight', Arial, serif; + margin-bottom: 10px; + height: 22px; + } -.gps_true { - padding: 0px 3px 0px 3px; - font-size: 10px; -} + .cf_doc_version_bt a { + padding: 1px 5px 1px 5px; + margin-top: -35px; + font-size: 9px; + line-height: 15px; + } -.content_toolbar .btn a { - margin-right: 15px; -} + #content { + height: calc(100% - 151px); + } -.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; -} + .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; - } + .tab_container { + overflow-x: hidden; + overflow-y: auto; + } } diff --git a/main.html b/main.html index fe8805ae..55bb2dc9 100755 --- a/main.html +++ b/main.html @@ -99,22 +99,24 @@
- +
- +
@@ -149,11 +151,12 @@
@@ -194,9 +197,9 @@
Battery voltage
-
-
-
+
+
+
@@ -212,29 +215,29 @@