From f6a9005049ced8daed8fe5ef714ced72d1c03de9 Mon Sep 17 00:00:00 2001 From: skaman82 Date: Mon, 26 Oct 2015 19:50:51 +0100 Subject: [PATCH] experimenting --- eventPage.js | 4 +- images/CF_settings_black.svg | 24 + images/CF_settings_white.svg | 22 + images/icons/cf_icon_welcome_grey.svg | 12 +- images/icons/cf_icon_welcome_white.svg | 12 +- main.css | 95 +- main.html | 10 +- main.js | 15 + main2.css | 1135 ++++++++++++++++++++++++ tabs/options.html | 12 + 10 files changed, 1282 insertions(+), 59 deletions(-) create mode 100644 images/CF_settings_black.svg create mode 100644 images/CF_settings_white.svg create mode 100755 main2.css diff --git a/eventPage.js b/eventPage.js index 1b708f05..5a994e64 100755 --- a/eventPage.js +++ b/eventPage.js @@ -10,8 +10,8 @@ function startApplication() { id: 'main-window', frame: 'chrome', innerBounds: { - minWidth: 1150, // changed from 960 - minHeight: 700 // changed from 625 + minWidth: 960, + minHeight: 625 } }, function (createdWindow) { createdWindow.contentWindow.addEventListener('load', function () { diff --git a/images/CF_settings_black.svg b/images/CF_settings_black.svg new file mode 100644 index 00000000..8b7f9291 --- /dev/null +++ b/images/CF_settings_black.svg @@ -0,0 +1,24 @@ + + + +CF_Settings_Icon + + + + + + + diff --git a/images/CF_settings_white.svg b/images/CF_settings_white.svg new file mode 100644 index 00000000..58d66d1d --- /dev/null +++ b/images/CF_settings_white.svg @@ -0,0 +1,22 @@ + + + +CF_Settings_Icon + + + + + + + diff --git a/images/icons/cf_icon_welcome_grey.svg b/images/icons/cf_icon_welcome_grey.svg index af3cc352..0051c183 100644 --- a/images/icons/cf_icon_welcome_grey.svg +++ b/images/icons/cf_icon_welcome_grey.svg @@ -2,8 +2,12 @@ - + + + + diff --git a/images/icons/cf_icon_welcome_white.svg b/images/icons/cf_icon_welcome_white.svg index 9d62af88..879f963d 100644 --- a/images/icons/cf_icon_welcome_white.svg +++ b/images/icons/cf_icon_welcome_white.svg @@ -2,8 +2,12 @@ - + + + + diff --git a/main.css b/main.css index e25b6571..8b2f6be5 100755 --- a/main.css +++ b/main.css @@ -122,7 +122,6 @@ input[type="number"]::-webkit-inner-spin-button { #logo { position: relative; float:left; - width: 260px; height:70px; z-index: 0; background-image: url("images/light-wide-2.svg"); @@ -205,33 +204,54 @@ input[type="number"]::-webkit-inner-spin-button { */ -#sensor-status { - float: right; - margin-right: 10px; - height: 22px; - line-height: 22px; -} - #header_dataflash { display:none; } +#sensor-status { + margin-top:20px; + float: right; + margin-right: 10px; + line-height: 2px; + height:67px; + border-radius:3px; + 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)); + + +} + #sensor-status li { float: left; padding: 0 12px 0 12px; - height: 18px; + height:67px; + width:45px; line-height: 18px; color: white; text-align: center; - border: 1px solid #c0c0c0; - border-right: 0; - background-color: #e32424; + border-top:1px solid #373737; + border-bottom:1px solid #1a1a1a; + border-left:1px solid #373737; + border-right:1px solid #222222; + + } #sensor-status li:last-child { - border-right: 1px solid #c0c0c0; + border-right: 0px solid #c0c0c0; + border-top-right-radius:3px; + border-bottom-right-radius:3px; +} + +#sensor-status li:first-child { + border-left: 0px solid #c0c0c0; + border-top-left-radius:3px; + border-bottom-left-radius:3px; } #sensor-status .on { background-color: #b8cf02; + background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.55)); } @@ -259,32 +279,34 @@ input[type="number"]::-webkit-inner-spin-button { */ #options { float: right; - width: 20px; - height: 20px; - background-image: url('./images/ic_settings_24px.svg'); + width: 25px; + height: 25px; + margin-top:10px; + margin-right:10px; + background-image: url('./images/CF_settings_white.svg'); background-position: -1px -1px; background-repeat: no-repeat; - - opacity: 0.6; + opacity: 0.4; } #options:hover { - opacity: 0.7; + opacity: 0.65; } #options.active { - opacity: 0.7; + opacity: 0.65; } #options.active:hover { - opacity: 0.85; + opacity: 0.75; } #options-window { display: none; position: fixed; - right: 30px; - top: 15px; + right: 35px; + top: 25px; padding: 5px; line-height: 20px; border: 1px solid silver; background-color: white; + border-radius:5px; } #options-window input { float: left; @@ -382,7 +404,7 @@ margin-right:20px; .tab_container { float:left; - height:100%; + height:calc(100% - 20px); width:210px; border-right: 4px solid #59aa29; } @@ -392,6 +414,7 @@ margin-right:20px; position: relative; float: left; width:100%; + height:calc(100% - 20px); padding-top: 0px; padding-bottom: 0px; margin-top:0px; @@ -401,6 +424,8 @@ margin-right:20px; } #tabs ul { + height:100%; + float:left; margin-top:0px; overflow: hidden; /* Cause the height to expand to contain its floated contents */ @@ -483,7 +508,6 @@ margin-right:20px; li.active .ic_setup { background-image:url(images/icons/cf_icon_setup_white.svg); - color: #fff; } .ic_ports { background-image:url(images/icons/cf_icon_ports_grey.svg); @@ -491,7 +515,6 @@ li.active .ic_setup { li.active .ic_ports { background-image:url(images/icons/cf_icon_ports_white.svg); - color: #fff; } .ic_config { background-image:url(images/icons/cf_icon_config_grey.svg); @@ -499,7 +522,6 @@ li.active .ic_ports { li.active .ic_config { background-image:url(images/icons/cf_icon_config_white.svg); - color: #fff; } .ic_pid { background-image:url(images/icons/cf_icon_pid_grey.svg); @@ -507,7 +529,6 @@ li.active .ic_config { li.active .ic_pid { background-image:url(images/icons/cf_icon_pid_white.svg); - color: #fff; } .ic_rx { background-image:url(images/icons/cf_icon_rx_grey.svg); @@ -515,7 +536,6 @@ li.active .ic_pid { li.active .ic_rx { background-image:url(images/icons/cf_icon_rx_white.svg); - color: #fff; } .ic_modes { background-image:url(images/icons/cf_icon_modes_grey.svg); @@ -523,7 +543,6 @@ li.active .ic_rx { li.active .ic_modes { background-image:url(images/icons/cf_icon_modes_white.svg); - color: #fff; } .ic_adjust { background-image:url(images/icons/cf_icon_adjust_grey.svg); @@ -531,7 +550,6 @@ li.active .ic_modes { li.active .ic_adjust { background-image:url(images/icons/cf_icon_adjust_white.svg); - color: #fff; } .ic_servo { background-image:url(images/icons/cf_icon_servo_grey.svg); @@ -539,7 +557,6 @@ li.active .ic_adjust { li.active .ic_servo { background-image:url(images/icons/cf_icon_servo_white.svg); - color: #fff; } .ic_gps{ background-image:url(images/icons/cf_icon_gps_grey.svg); @@ -547,7 +564,6 @@ li.active .ic_servo { li.active .ic_gps{ background-image:url(images/icons/cf_icon_gps_white.svg); - color: #fff; } .ic_led{ @@ -556,7 +572,6 @@ li.active .ic_gps{ li.active .ic_led { background-image:url(images/icons/cf_icon_led_white.svg); - color: #fff; } .ic_sensors { @@ -565,7 +580,6 @@ li.active .ic_led { li.active .ic_sensors { background-image:url(images/icons/cf_icon_sensors_white.svg); - color: #fff; } .ic_log { background-image:url(images/icons/cf_icon_sensors_grey.svg); @@ -573,7 +587,6 @@ li.active .ic_sensors { li.active .ic_log { background-image:url(images/icons/cf_icon_log_white.svg); - color: #fff; } .ic_data { @@ -582,7 +595,6 @@ li.active .ic_log { li.active .ic_data{ background-image:url(images/icons/cf_icon_log_white.svg); - color: #fff; } .ic_cli { background-image:url(images/icons/cf_icon_cli_grey.svg); @@ -590,7 +602,6 @@ li.active .ic_data{ li.active .ic_cli { background-image:url(images/icons/cf_icon_cli_white.svg); - color: #fff; } .ic_motor { @@ -599,7 +610,6 @@ li.active .ic_cli { li.active .ic_motor { background-image:url(images/icons/cf_icon_motor_white.svg); - color: #fff; } @@ -609,7 +619,6 @@ li.active .ic_motor { li.active .ic_welcome { background-image:url(images/icons/cf_icon_welcome_white.svg); - color: #fff; } .ic_help { @@ -618,7 +627,6 @@ li.active .ic_welcome { li.active .ic_help { background-image:url(images/icons/cf_icon_help_white.svg); - color: #fff; } @@ -628,7 +636,6 @@ li.active .ic_help { li.active .ic_flasher { background-image:url(images/icons/cf_icon_flasher_white.svg); - color: #fff; } @@ -644,7 +651,6 @@ li.active .ic_flasher { li.active .ic_backup { background-image:url(images/icons/cf_icon_backup_white.svg); - color: #fff; } .ic_wizzard { background-image:url(images/icons/cf_icon_wizard_grey.svg); @@ -652,7 +658,6 @@ li.active .ic_backup { li.active .ic_wizard { background-image:url(images/icons/cf_icon_wizard_white.svg); - color: #fff; } .ic_advanced { background-image:url(images/icons/cf_icon_advanced_grey.svg); @@ -660,7 +665,6 @@ li.active .ic_wizard { li.active .ic_advanced { background-image:url(images/icons/cf_icon_advanced_white.svg); - color: #fff; } .ic_mission { background-image:url(images/icons/cf_icon_mission_grey.svg); @@ -668,7 +672,6 @@ li.active .ic_advanced { li.active .ic_mission { background-image:url(images/icons/cf_icon_mission_white.svg); - color: #fff; } diff --git a/main.html b/main.html index b9515f25..c19b0311 100755 --- a/main.html +++ b/main.html @@ -4,7 +4,9 @@ - + + + @@ -83,7 +85,7 @@ - + @@ -143,7 +145,7 @@ -
    @@ -189,6 +191,8 @@
+ +
    • diff --git a/main.js b/main.js index 9304b6c2..1efd5537 100755 --- a/main.js +++ b/main.js @@ -221,7 +221,22 @@ $(document).ready(function () { }); } } + + + + + // TEST +var css = $("#default"); +$("div#options-window #remove").click(function(){ + css.remove(); +}); +$("div#options-window #restore").click(function(){ + $("head").append(css); +}); + // TEST + + $(document).bind('click keyup', close_and_cleanup); $(this).slideDown(250); diff --git a/main2.css b/main2.css new file mode 100755 index 00000000..3fc9db57 --- /dev/null +++ b/main2.css @@ -0,0 +1,1135 @@ +* { + 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:#dfddd0; + margin:0px; + padding:0px; +} + +a { + text-decoration:none; + color:#000; + font-family: 'open_sanssemibold', Arial; + } + +a:hover { + text-decoration: none; + + + } + + +/* Help-Icon */ + +.helpicon { + float:right; + margin-top:-18px; + margin-right:7px; + display:block; + height:14px; + width:14px; + opacity: 0.2; + background-image:url(images/icons/cf_icon_info_grey.svg); + background-size:contain; + background-position:center; + +} + + +.helpicon:hover { + opacity: 1.0; + background-image:url(images/icons/cf_icon_info_green.svg); +} + + + +/* 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; + transition: all ease 0.2s; + + } + + +/* documentation button end */ + + + + +input[type="number"]::-webkit-inner-spin-button { + opacity: 1; /* required for chromium 33+ beta */ + margin-left: 5px; +} +.clear-both { + clear: both; +} +.left { + float: left; +} +.right { + float: right; +} +#main-wrapper { + padding: 0px 0px 0 0px; /* padding: 5px 5px 0 5px; */ + height: calc(100% - 7px); + +} + +.headerbar { + height:110px; + width:100%; + float:left; + background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.15)); +} + + + +#logo { + position: relative; + float:left; + height:70px; + z-index: 0; + background-image: url("images/light-wide-2.svg"); + background-repeat: no-repeat; + width: 340px; + background-position:left center; + background-size: contain; + margin-left:15px; + margin-top:15px; +} + +#port-picker { /* */ + float: left; + margin-top: 20px; + margin-left: 20px; + width:180px; +} + +#port-picker li { + float: left; +} /* +#port-picker select { + height: 20px; + line-height: 20px; + float: left; + margin-right: 5px; + border: 1px solid silver; +} +#port-picker #port { + width: 130px; +} +#port-picker #baud { + width: 80px; +} +#port-picker #delay { + width: 60px; +} +#port-picker #port-override{ + height: 18px; + line-height: 20px; + margin-right: 5px; + width: 120px; + padding: 0 5px; + border: 1px solid silver; +} + +#port-picker a { + float: left; + display: block; + width: 80px; + height: 18px; + border: 1px solid silver; + line-height: 18px; + text-align: center; +} +#port-picker a.connect { + margin-right: 10px; + background-color: #be2222; + color: white; + font-weight: bold; +} +#port-picker a.connect:hover { + text-decoration: none; + background-color: #ea3131; +} +#port-picker a.connect.active { + background-color: #0fab16; +} +#port-picker a.connect.active:hover { + background-color: #13d81d; +} +#port-picker input.auto_connect { + float: left; + margin-top: 4px; +} +#port-picker span.auto_connect { + float: left; + margin: 3px 0 0 5px; +} +*/ + + +#sensor-status { + float: right; + margin-right: 10px; + height: 22px; + line-height: 22px; +} + +#header_dataflash { + display:none; } + + +#sensor-status li { + float: left; + padding: 0 12px 0 12px; + height: 18px; + line-height: 18px; + color: white; + text-align: center; + border: 1px solid #c0c0c0; + border-right: 0; + background-color: #e32424; +} +#sensor-status li:last-child { + border-right: 1px solid #c0c0c0; +} +#sensor-status .on { + background-color: #b8cf02; +} + + + +/* +#documentation-controls { + float: right; + height: 22px; + line-height: 22px; + margin-right: 10px; +} + + +#button-documentation { + float: left; + padding: 0 12px 0 12px; + height: 18px; + line-height: 18px; + background-color: #ffcb18; + color: #000; + font-weight: bold; + border: solid 1px #c0c0c0; + display: none; +} +*/ +#options { + float: right; + width: 25px; + height: 25px; + margin-top:10px; + margin-right:10px; + background-image: url('./images/CF_settings_white.svg'); + background-position: -1px -1px; + background-repeat: no-repeat; + 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; +} +#options-window input { + float: left; + margin-top: 3px; + margin-right: 5px; +} + + +/* Log setup*/ + + +#log { + margin-bottom: 0px; + border: 0px solid silver; /* was 1px*/ + background-color:#242424; + 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-image:url(images/icons/scroll.svg); +background-repeat:no-repeat; +background-size:100%; +opacity:0.0; +transition: all ease 1s; + +} + + +#scrollicon.active { +height:110px; +margin-top:10px; +margin-right:20px; + width:110px; + opacity:0.15; + background-image:url(images/icons/scroll.svg); + background-size:80%; + box-shadow: inset 0 0 5px #000000; + + transition: all ease 2s; +} + + +#log.active { + overflow-y: scroll; /* scroll*/ + box-shadow: inset 0 0 15px #000000; +} + + +#log .wrapper { + padding: 5px; /* was 5*/ + padding-left:10px; + padding-bottom:4px; + -webkit-user-select: text; + position:relative; + bottom:0px; + +} + +#log a { + font-weight: regular; + color:#59aa29; +} + +#log a:hover { + text-decoration: underline; +} + + /* Log switch */ + + + .logswitch { + position:fixed; + right: 7px; + margin-top:-1px; + float:right; + padding:5px; + z-index:10; + } + .logswitch a { + color:#656565; + + } + + + +.tab_container { + float:left; + height:100%; + width:210px; + border-right: 4px solid #59aa29; + } + + +#tabs { + position: relative; + float: left; + width:100%; + padding-top: 0px; + padding-bottom: 0px; + margin-top:0px; + z-index: 10; + font-weight: regular; + font-size:13px; +} + +#tabs ul { + margin-top:0px; + overflow: hidden; + /* Cause the height to expand to contain its floated contents */ +} + +#tabs ul.mode-connected { + display: none; +} + +#tabs li { + width:100%; + float: left; + border-bottom: 1px solid rgba(0,0,0,0.30); + border-top: 1px solid #404040; + height:29px; + +} + +#tabs li:first-child { + border-top: 0px; + +} + +#tabs li:last-child { + border-bottom: 0px; + +} + + +#tabs li a { + font-family: 'open_sansregular', Arial; + padding-left:33px; + padding-top:5px; + padding-bottom:3px; + background-color: transparent; + color:#999999; + width:100%; + height:23px; + display:block; + text-shadow:0px 1px rgba(0, 0, 0, 0.45); + transition: none; +} + + +#tabs li a:hover { + text-decoration: none; + background-color: rgba(0,0,0,0.20); +} +#tabs li.active { + color: #fff; + transition: none; + + +} +#tabs li.active a { + background-color: #59aa29; + color: #fff; + transition: none; +} + + +#tabs li.active a:hover { + cursor: default; + background-color:#59aa29; +} + + +.tabicon { + background-repeat: no-repeat; + background-size:15px; + background-position:13px 7px; +} + + +/* Tab-Icons */ + +.ic_setup { + background-image:url(images/icons/cf_icon_setup_grey.svg); + } + +li.active .ic_setup { + background-image:url(images/icons/cf_icon_setup_white.svg); + color: #fff; + } +.ic_ports { + background-image:url(images/icons/cf_icon_ports_grey.svg); + } + +li.active .ic_ports { + background-image:url(images/icons/cf_icon_ports_white.svg); + color: #fff; + } +.ic_config { + background-image:url(images/icons/cf_icon_config_grey.svg); + } + +li.active .ic_config { + background-image:url(images/icons/cf_icon_config_white.svg); + color: #fff; + } +.ic_pid { + background-image:url(images/icons/cf_icon_pid_grey.svg); + } + +li.active .ic_pid { + background-image:url(images/icons/cf_icon_pid_white.svg); + color: #fff; + } +.ic_rx { + background-image:url(images/icons/cf_icon_rx_grey.svg); + } + +li.active .ic_rx { + background-image:url(images/icons/cf_icon_rx_white.svg); + color: #fff; + } +.ic_modes { + background-image:url(images/icons/cf_icon_modes_grey.svg); + } + +li.active .ic_modes { + background-image:url(images/icons/cf_icon_modes_white.svg); + color: #fff; + } +.ic_adjust { + background-image:url(images/icons/cf_icon_adjust_grey.svg); + } + +li.active .ic_adjust { + background-image:url(images/icons/cf_icon_adjust_white.svg); + color: #fff; + } +.ic_servo { + background-image:url(images/icons/cf_icon_servo_grey.svg); + } + +li.active .ic_servo { + background-image:url(images/icons/cf_icon_servo_white.svg); + color: #fff; + } +.ic_gps{ + background-image:url(images/icons/cf_icon_gps_grey.svg); + } + +li.active .ic_gps{ + background-image:url(images/icons/cf_icon_gps_white.svg); + color: #fff; + } + +.ic_led{ + background-image:url(images/icons/cf_icon_led_grey.svg); + } + +li.active .ic_led { + background-image:url(images/icons/cf_icon_led_white.svg); + color: #fff; + } + +.ic_sensors { + background-image:url(images/icons/cf_icon_sensors_grey.svg); + } + +li.active .ic_sensors { + background-image:url(images/icons/cf_icon_sensors_white.svg); + color: #fff; + } +.ic_log { + background-image:url(images/icons/cf_icon_sensors_grey.svg); + } + +li.active .ic_log { + background-image:url(images/icons/cf_icon_log_white.svg); + color: #fff; + } + +.ic_data { + background-image:url(images/icons/cf_icon_log_grey.svg); + } + +li.active .ic_data{ + background-image:url(images/icons/cf_icon_log_white.svg); + color: #fff; + } +.ic_cli { + background-image:url(images/icons/cf_icon_cli_grey.svg); + } + +li.active .ic_cli { + background-image:url(images/icons/cf_icon_cli_white.svg); + color: #fff; + } + +.ic_motor { + background-image:url(images/icons/cf_icon_motor_grey.svg); + } + +li.active .ic_motor { + background-image:url(images/icons/cf_icon_motor_white.svg); + color: #fff; + } + + +.ic_welcome { + background-image:url(images/icons/cf_icon_welcome_grey.svg); + } + +li.active .ic_welcome { + background-image:url(images/icons/cf_icon_welcome_white.svg); + color: #fff; + } + +.ic_help { + background-image:url(images/icons/cf_icon_help_grey.svg); + } + +li.active .ic_help { + background-image:url(images/icons/cf_icon_help_white.svg); + color: #fff; + } + + + .ic_flasher { + background-image:url(images/icons/cf_icon_flasher_grey.svg); + } + +li.active .ic_flasher { + background-image:url(images/icons/cf_icon_flasher_white.svg); + color: #fff; + } + + + + + /* SPARE Tab-Icons */ + + + +.ic_backup { + background-image:url(images/icons/cf_icon_backup_grey.svg); + } + +li.active .ic_backup { + background-image:url(images/icons/cf_icon_backup_white.svg); + color: #fff; + } +.ic_wizzard { + background-image:url(images/icons/cf_icon_wizard_grey.svg); + } + +li.active .ic_wizard { + background-image:url(images/icons/cf_icon_wizard_white.svg); + color: #fff; + } +.ic_advanced { + background-image:url(images/icons/cf_icon_advanced_grey.svg); + } + +li.active .ic_advanced { + background-image:url(images/icons/cf_icon_advanced_white.svg); + color: #fff; + } +.ic_mission { + background-image:url(images/icons/cf_icon_mission_grey.svg); + } + +li.active .ic_mission { + background-image:url(images/icons/cf_icon_mission_white.svg); + color: #fff; + } + + + + + + + + + +#content { + margin-top: 0px; /* 31 */ + padding: 10px; /* 10 */ + height:calc(100% - 170px); /* (port picker 105px, log 25px, tab 0px, status bar: 20px) - was: calc(100% - 171px)*/ + + background-color: white; + overflow-x: hidden; + overflow-y: auto; + border: 0px solid #848484; /* 1px solid #848484; */ + -webkit-transform: rotateX(0deg); /* DO NOT REMOVE! this fixes the UI freezing bug on MAC OS X */ +} +#status-bar { + position: fixed; + bottom: 0px; + 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 { + width: 100%; + height: 100%; + background-image: url('../images/loading-bars.svg'); + background-repeat: no-repeat; + background-position: center 45%; +} +.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 { + 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; + } + + + + + .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; + transition: all ease 0.2s; + + } + +.save_btn a:hover { + background-color:#6ac435; + transition: all ease 0.2s; + + } + + +/* 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; + transition: all ease 0.2s; + + } + +.default_btn a:hover { + background-color:#6ac435; + color:#fff; + text-shadow:0px 1px rgba(0, 0, 0, 0.25); + transition: all ease 0.2s; + + } + +.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; + transition: all ease 0.2s; + + } + +.small a:hover { + background-color:#6ac435; + color:#fff; + text-shadow:0px 1px rgba(0, 0, 0, 0.25); + border: 1px solid #59aa29; + transition: all ease 0.2s; + + + } + +.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; + transition: all ease 0.2s; + + + } + + .green a:hover { + background-color:#6ac435; + border: 1px solid #4d9324; + text-shadow:0px 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; + } + +.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; +} + +/* connect button */ + + +.connect_contols { + position:absolute; + left:585px; + top:19px; + height:70px; + width:60px; + } + + + +.connect_b { + float:left; + + } + + + .connect_b a { + height:50px; + width:50px; + border-radius:100px; + box-shadow:0px 1px 2px rgba(0, 0, 0, 0.35); + float:left; + margin-left: 5px; + margin-bottom:7px; + transition: none; + + } + + + .connect_b a.connect { + background-color:#56ac1d; + border:1px solid #5bbb1b; + background-image:url(images/icons/cf_icon_usb2_white.svg); + background-repeat:no-repeat; + background-size:44px; + background-position:center 6px; + transition: none; + + } + + .connect_b a.connect.active { +background-color:#e60000; + border:1px solid #fe0000; + background-image:url(images/icons/cf_icon_usb1_white.svg); + transition: none; + + + } + + + .connect_state { + float:left; + height:20px; + width:100%; + text-align:center; + color:#fff; + font-size:12px; + font-family: 'open_sansregular', Arial; + text-shadow:0px 1px rgba(0, 0, 0, 0.25); + + + } + +/* fixing padding for all Tabs*/ + +.tab-setup, .tab-landing, .tab-adjustments, .tab-auxiliary, .tab-cli, .tab-configuration, .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 { + padding:; + } + + +/* fixing logging tab*/ +.properties { + width:800px; + } + + + .properties dl { + width:200px; + } + + + .properties dd { + width:400px; + height:auto !important; + } + \ No newline at end of file diff --git a/tabs/options.html b/tabs/options.html index 4e6cd9e9..f6fed5b6 100644 --- a/tabs/options.html +++ b/tabs/options.html @@ -3,4 +3,16 @@
+
+ + + +
+ +
+
\ No newline at end of file