diff options
| author | Miguel Angel Mulero Martinez <migmul@gmail.com> | 2022-05-20 20:42:25 +0300 |
|---|---|---|
| committer | Miguel Angel Mulero Martinez <migmul@gmail.com> | 2022-06-20 16:14:07 +0300 |
| commit | ee7ec1951234e4af9513eb76d98d0f8f09e8f24f (patch) | |
| tree | ba95a882d09af5c2915deb9a1b165bb743d470b8 | |
| parent | 38688be1f817f80f952c5233625612c6dc550cf6 (diff) | |
Use LESS for CSS
71 files changed, 12105 insertions, 11660 deletions
diff --git a/gulpfile.js b/gulpfile.js index 95032523..66e18e13 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -28,6 +28,8 @@ const git = require('simple-git')(); const source = require('vinyl-source-stream'); const stream = require('stream'); const prompt = require('gulp-prompt'); +const less = require('gulp-less'); +const sourcemaps = require('gulp-sourcemaps'); const cordova = require("cordova-lib").cordova; @@ -101,12 +103,13 @@ function process_package_debug(done) { getGitRevision(done, processPackage, false); } - // dist_yarn MUST be done after dist_src -const distBuild = gulp.series(process_package_release, dist_src, dist_changelog, dist_yarn, dist_locale, dist_libraries, dist_resources, dist_rollup, gulp.series(cordova_dist())); +const distCommon = gulp.series(dist_src, dist_less, dist_changelog, dist_yarn, dist_locale, dist_libraries, dist_resources, dist_rollup, gulp.series(cordova_dist())); + +const distBuild = gulp.series(process_package_release, distCommon); -const debugDistBuild = gulp.series(process_package_debug, dist_src, dist_changelog, dist_yarn, dist_locale, dist_libraries, dist_resources, dist_rollup, gulp.series(cordova_dist())); +const debugDistBuild = gulp.series(process_package_debug, distCommon); const distRebuild = gulp.series(clean_dist, distBuild); gulp.task('dist', distRebuild); @@ -344,6 +347,7 @@ function dist_src() { './src/**/*', '!./src/css/dropdown-lists/LICENSE', '!./src/support/**', + '!./src/**/*.less', ]; return gulp.src(distSources, { base: 'src' }) @@ -351,6 +355,14 @@ function dist_src() { .pipe(gulp.dest(DIST_DIR)); } +function dist_less() { + return gulp.src('./src/**/*.less') + .pipe(sourcemaps.init()) + .pipe(less()) + .pipe(sourcemaps.write('.')) + .pipe(gulp.dest(`${DIST_DIR}`)); +} + function dist_changelog() { return gulp.src('changelog.html') .pipe(gulp.dest(`${DIST_DIR}tabs/`)); diff --git a/package.json b/package.json index 4c26bb0f..04428473 100644 --- a/package.json +++ b/package.json @@ -103,9 +103,11 @@ "gulp-concat": "~2.6.1", "gulp-debian": "^0.1.9", "gulp-json-editor": "^2.5.4", + "gulp-less": "^5.0.0", "gulp-prompt": "^1.2.0", "gulp-rename": "^2.0.0", "gulp-replace": "^1.0.0", + "gulp-sourcemaps": "^3.0.0", "gulp-util": "^3.0.8", "gulp-xml-transformer": "^5.1.1", "gulp-yarn": "^3.0.0", diff --git a/src/css/dark-theme.css b/src/css/dark-theme.css deleted file mode 100644 index b2c8606a..00000000 --- a/src/css/dark-theme.css +++ /dev/null @@ -1,913 +0,0 @@ -:root { - --accent: #ffbb00; - --subtleAccent: #9c9c9c; - --quietHeader: #bf8606; - --defaultText: #ffffff; - --subtleText: #c0c0c0; - --mutedText: #d6d6d6; - --linkText: #ffc549; - --boxBackground: #3a3a3a; - --alternativeBackground: #4e4e4e; - --sideBackground: #404040; - --ledAccent: #6e6e6e; - --ledBackground: #424242; - --gimbalBackground: var(--subtleAccent); - --gimbalCrosshair: var(--mutedText); - --switcherysecond: #858585; - --pushedButton-background: #616161; - --pushedButton-fontColor: #ffffff; - --hoverButton-background: #ffcc3e; - --superSubtleAccent: #595959; - --accentBorder: #bf8606; -} - -.background_paper { - background-image: url(../images/paper-dark.png); -} - -body { - color: white; -} - -::backdrop { - background-image: none; - background-color: rgba(0, 0, 0, 0.5); -} - -#options-window { - background-color: #393b3a; -} - -#content { - background-color: #393b3a; -} - -#content.logopen { - background-color: #393b3a; -} - -/* NOTE: need to think on how to load the dark theme with vue */ -#status-bar { - background-color: #414443 !important; -} - -#status-bar > * ~ * { - border-left: 1px solid #9c9c9c; -} - -dialog { - background-color: #3a3d3c; - color:white; - border: 1px solid #ffbb2a; -} - -/* Note */ -.note { - background-color: #4e4e4e; - color: white; -} - -.content_toolbar { - background-color: #555857; -} - -.content_toolbar .btn a { - border: 1px solid #ffbb2a; -} - -.content_toolbar .btn a.disabled { - border: 1px solid #ffbb2a; -} - -.gui_box { - border: 1px solid #4d4d4d; - background-color: #393b3a; -} - -.gui_warning { - background: #393b3a; -} - -.gui_note { - background: #393b3a; -} - -.grey { - background-color: #414443 -} - -.gui_box_bottombar { - background-color: #393b3a; -} - -.fixed_band { - background-color: #393b3a; -} - -.default_btn a.disabled { - background-color: #393b3a; - border: 1px solid #ffbb2a; -} - -.small a { - border: 1px solid #ffbb2a; -} - -.standard_input { - background: var(--boxBackground); - color: white; -} - -#quad-status_wrapper { - color: #393b3a; -} - -button { - border: 1px solid #ffbb2a; - background-color: #ffbb2a; - color: black; -} - -.helpicon { - background-image: url(../images/icons/cf_icon_info_white.svg); - opacity: 0.3; -} -.cf .helpicon { - background-image: url(../images/icons/cf_icon_info_grey.svg); - opacity: 0.4; -} -.cf .helpicon:hover { - background-image: url(../images/icons/cf_icon_info_grey.svg); - opacity: 1; -} - -.gui_box_titlebar .helpicon { - background-image: url(../images/icons/cf_icon_info_grey.svg); -} - -.cf_table td { - border-style: solid; -} - -.cf_table tr:last-child td { - border-style: unset; -} - -.noUi-pips { - color: var(--mutedText); -} - -.jBox-container { - background: #393b3a; - color:white; -} - -.jBox-Modal .jBox-title, -.jBox-Confirm .jBox-title { - background: #393b3a; - border-bottom: 1px solid #9c9c9c; - text-shadow: 0 1px 1px #ffffff; - color: white; -} - -.jBox-pointer:after { - background: #393b3a; -} - - -/* ADJUSTMENTS TAB */ - -.tab-adjustments .adjustment:nth-child(odd) { - background-color: #2f2f2f; -} - -.tab-adjustments .adjustments { - background-color: #393b3a; -} - -.tab-adjustments .adjustments td { - border-top: 1px solid #00000000; - border-bottom: 1px solid #00000000; -} - -.tab-adjustments .adjustment select { - background-color: #3a3a3a; - color: white; -} - - -/* AUXILIARY TAB */ - -.tab-auxiliary .toolbox { - color: white; -} - -.tab-auxiliary .mode { - background-color: #393b3a; -} - -.tab-auxiliary .mode .info { - background-color: #9e9e9e; - color: white; -} - -.tab-auxiliary .ranges { - border-bottom: 5px solid #8a8a8a; - background-color: #676767; -} - -.tab-auxiliary .range { - background-color: #484848; -} - -.tab-auxiliary .link { - background-color: #484848; -} - -.tab-auxiliary .range .channel,.logic,.linkedTo { - background-color: #3a3a3a; - color: white; -} - -.tab-auxiliary .buttons a { - background-color: #333333; - color: white; -} - -.tab-auxiliary .buttons a:hover { - background-color: var(--hoverButton-background); -} - - -/* CLI TAB */ - -.tab-cli textarea[name='commands']::placeholder { - color: silver; -} - -.tab-cli textarea[name='commands'] { - background: black; - color: white; -} - -/* AutoComplete */ -.cli-textcomplete-dropdown { - background-color: #393b3a; -} -.cli-textcomplete-dropdown a { - color: white; -} -.cli-textcomplete-dropdown .active { - background-color: var(--quietHeader); -} - - -/* CONFIGURATION TAB */ - -.tab-configuration .gui_box span { - color: white; -} - -.tab-configuration input, -.tab-configuration select { - background-color: #3a3a3a; - color: white; -} - - -/* FAILSAFE TAB */ - -.tab-failsafe .number input { - background-color: #3a3a3a; - color: white; -} - -.tab-failsafe .number input:disabled { - background-color: #393b3a; - color: grey; -} - -.tab-failsafe .radioarea { - background-color: #393b3a; -} - -.tab-failsafe .gui_box span { - color: white; -} - -.tab-failsafe .stage1 select { - background-color: #3a3a3a; - color: white; -} - -.tab-failsafe .modename { - background-color: #393b3a; -} - -.tab-failsafe .switchMode { - background-color: #3a3a3a; - color: white; -} - -.tab-failsafe .pro1 { - background-image: url(../images/icons/cf_failsafe_procedure1-dark.svg); -} - -.tab-failsafe .pro2 { - background-image: url(../images/icons/cf_failsafe_procedure2-dark.svg); -} - -.tab-failsafe .pro4 { - background-image: url(../images/icons/cf_failsafe_procedure4-dark.svg); -} - - -/* FIRMWARE FLASHER TAB */ - -.btn .disabled { - background-color: #393b3a; -} - -.gui_note .gui_box_titlebar { - color: black; -} - -.tab-firmware_flasher .options select { - background-color: #3a3a3a; - color: white; -} - -.tab-firmware_flasher .options .description { - color: #b9b9b9; -} - -.tab-firmware_flasher .options .manual_baud_rate select { - background-color: #3a3a3a; - color: white; -} - -.tab-firmware_flasher .release_info .target { - color: #98ddff; -} - -.tab-firmware_flasher .cf_table td { - border-bottom: solid 1px #4f4f4f; -} - -/* GPS TAB */ - -.tab-gps .GPS_info .head, .tab-gps .GPS_signal_strength .head { - background-color: #393b3a; -} - -.tab-gps #loadmap .controls { - background-color: #393b3a; -} - -.tab-gps #loadmap .controls a { - background-color: #393b3a; -} - -.tab-gps #loadmap .controls a:hover { - background-color: var(--hoverButton-background); -} - -.tab-gps #loadmap .controls a:active { - background-color: #393b3a; -} - -progress[value]::-webkit-progress-bar { - background-color: #393b3a; -} - - -/* LANDING */ - -.tab-landing .content_top { - background-color: #00000000; -} - -.tab-landing .content_mid { - background-color: #3e3e3e; -} - -.tab-landing .logowrapper img { - content:url(../images/cf_logo_black.svg); -} - -.tab-landing .content_mid .text3 .wrap2 { - background: #5f5f5f; -} - - -/* LED STRIP TAB */ - -.tab-led-strip .section { - color: #c4c4c4; -} - -.tab-led-strip .mainGrid { - background-color: #4e4e4e; -} - -.tab-led-strip button { - background-color: #6b6b6b; - color: white; -} - -.tab-led-strip button:hover { - border: 1px solid #ffffff; - background-color: #393b3a; -} - -.tab-led-strip .gridSections, -.tab-led-strip .gridSections .block { - border: none; -} - - -/* LOGGING TAB */ - -.tab-logging .speed { - background-color: #3a3a3a; - color: white; -} - - -/* MOTORS TAB */ - -.tab-motors .gui_box span { - color: white; -} - -.tab-motors input, -.tab-motors select { - background-color: #3a3a3a; - color: white; -} - -.tab-motors .plot_control { - background-color: #393b3a; -} - -.tab-motors .plot_control select { - background-color: #3a3a3a; - color: white; -} - -.tab-motors .motorblock { - background-color: #393b3a; -} - -.tab-motors .m-block { - background-color: #393b3a; -} - -.tab-motors .m-block .label { - color: white; -} - -.tab-motors .m-block .meter-bar { - background-color: #393b3a; -} - -.tab-motors .motor_testing .notice { - background-color: #4e4e4e; -} - -.tab-motors text { - fill: white; -} - - -/* ONBOARD LOGGING TAB */ - -.tab-onboard_logging .regular-button.disabled { - background-color: #393b3a; -} - -.tab-onboard_logging .dataflash-contents, -.tab-onboard_logging .sdcard-contents { - background-color: #393b3a; -} - -.tab-onboard_logging .dataflash-used, -.tab-onboard_logging .sdcard-other { - background-color: #848484; -} - -.tab-onboard_logging progress::-webkit-progress-bar { - background-color: #393b3a; -} - -.tab-onboard_logging .blackboxRate select, -.tab-onboard_logging .blackboxDebugMode select, -.tab-onboard_logging .blackboxDevice select { - background-color: #3a3a3a; - color: white; -} - -.tab-onboard_logging .sdcard-icon { - background-color: #393b3a; -} - - -/* OSD TAB */ - -.tab-osd .display-layout input.position { - border-bottom: 1px solid red; -} - -.tab-osd .preview { - background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(../images/osd-bg-1.jpg); - background-size: cover; -} - -.tab-osd .preview:active { - background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(../../images/osd-bg-1-grid.png), url(../../images/osd-bg-1.jpg); - background-size: cover; -} - -/* these two items replace the look of the checkboxes in only CSS */ -.tab-osd input[type='checkbox']:after { - line-height: 1.5em; - content: ''; - display: inline-block; - width: 12px; - height: 12px; - margin-top: -1px; - margin-left: -1px; - border: 1px solid #404040; - border-radius: 0.25em; - background: #4d4d4d; -} - -.tab-osd input[type='checkbox']:checked:after { - background: #ffbb00; - border: 1px solid #404040; -} - - -/* PID TUNING TAB */ - -.tab-pid_tuning .profile .helpicon, -.tab-pid_tuning .rate_profile .helpicon, -.tab-pid_tuning .pid_titlebar .helpicon { - background-image: url(../images/icons/cf_icon_info_grey.svg); - opacity: 0.4; -} -.tab-pid_tuning .profile .helpicon:hover, -.tab-pid_tuning .rate_profile .helpicon:hover, -.tab-pid_tuning .pid_titlebar .helpicon:hover { - opacity: 1; -} - -.tab-pid_tuning .throttle_limit th { - background-color: #393b3a; - border-bottom: 1px solid #5e5e5e; -} - -.tab-pid_tuning .cf tr { - background-color: #414443; -} - -.tab-pid_tuning .cf th { - background-color: var(--quietHeader); - color: white; -} - -.tab-pid_tuning .cf input { - background-color: #3a3a3a; - color: white; -} - -.tab-pid_tuning .cf select { - background-color: #3a3a3a; - color: white; -} - -/* These values should have been inherited from the regular style, but are not */ -.tab-pid_tuning .pid_titlebar .wide_header { - border-top-left-radius: 3px; - border-top-right-radius: 3px; -} - -.tab-pid_tuning table.compensation .suboption select{ - background-color: #3a3a3a; - color: white; -} - -.tab-pid_tuning table input,.inputBackground { - background-color: #3a3a3a; - color: white; -} - -.tab-pid_tuning table select { - text-align-last: right; - background-color: #3a3a3a; - color: white; -} - -.tab-pid_tuning .tab-container > div { - background-color: #535655; - border-right: 1px solid #393b3a; -} - -.fancy.header { - background-color: #393b3a; -} - -.pid_roll { - background-color: #A00000; -} - -.pid_pitch { - background-color: #00A000; -} - -.pid_yaw { - background-color: #0000A0; -} - -.pid_mode { - background-color: #3c3c3c; - border-bottom: 1px solid #3c3c3c; - color: white; -} - -.pid_titlebar { - background-color: #393b3a; -} - -.tab-pid_tuning .number input { - background-color: #3a3a3a; - color: white; -} - -.tab-pid_tuning .gui_box span { - color: white; -} - -.tab-pid_tuning .bottomarea { - background-color: #393b3a; -} - -.tab-pid_tuning .profile select { - background-color: #3a3a3a; - color: white; -} - -.tab-pid_tuning .rate_profile select { - background-color: #3a3a3a; - color: white; -} - -.tabarea { - background: #393b3a; -} - -.tab-pid_tuning .regular-button.disabled { - background-color: #393b3a; -} - -.tab-pid_tuning .sliderLabels th { - background: #414443; - color: white; -} - -.tab-pid_tuning input:disabled, -.tab-pid_tuning .cf input:disabled, -.tab-pid_tuning select:disabled, -.tab-pid_tuning .cf select:disabled { - color: rgb(105, 105, 105); - background-color: #2d2d2d; -} - -.tab-pid_tuning table.compensation tr { - border-bottom: 1px solid #6b6b6b; -} - -.tab-pid_tuning .slidersWarning { - background: #542415; -} - -.tab-pid_tuning .cf .rates_logo_bg { - background-color: #ffffff33; -} - -/* PORTS TAB */ - -.tab-ports table td:first-child { - border-left: none; -} -.tab-ports table td:last-child { - border-right: none; -} - -.tab-ports .ports tr:last-child, -.tab-ports .ports tr:last-child td { - border-bottom: none; -} - -.tab-ports table td { - border-bottom: 1px solid #575757; - border-left: 1px solid #575757; - border-right: 1px solid #575757; -} - - -/* POWER TAB */ - -.tab-power .number input { - background-color: #3a3a3a; - color: white; -} - -.tab-power .battery-configuration select { - background-color: #3a3a3a; - color: white; -} - - -/* RECEIVER TAB */ - -.tab-receiver .gui_box span { - color: white; -} - -.tab-receiver input, -.tab-receiver select { - background-color: #3a3a3a; - color: white; -} - -.tab-receiver .bars .meter-bar { - background-color: #393b3a; -} - -.tab-receiver .bars .meter-bar .label { - color: white; -} - -.tab-receiver .tunings { - background-color: #393b3a; -} - -.tab-receiver .tunings table td { - background: #414443; -} - -.tab-receiver .tunings table tr:nth-child(odd) { - background-color: #393b3a; -} - -.tab-receiver .tunings table input { - background-color: #3a3a3a; - color: white; -} - -.tab-receiver .rssi_channel_wrapper { - background-color: #414443; - border-bottom: 1px solid #4d4d4d; - border-right: 1px solid #4d4d4d; -} - -.tab-receiver .rcmap_wrapper { - background-color: #414443; - border-left: 1px solid #4d4d4d; - border-bottom: 1px solid #4d4d4d; -} - -.tab-receiver .hybrid_element { - border-top-left-radius: 5px; - border-bottom-left-radius: 5px; -} - -.tab-receiver .hybrid_element input { - background-color: #3a3a3a; - color: white; -} - -.tab-receiver .plot_control { - background-color: #2f2f2f; -} - -.tab-receiver text { - fill: white; -} - - -/* SENSORS TAB */ - -.tab-sensors .plot_control { - background-color: #2f2f2f; -} - -.tab-sensors .plot_control select { - background-color: #3a3a3a; - color: white; -} - -.tab-sensors text { - fill: white; -} - - -/* SERVOS TAB */ - -.tab-servos table th { - background: #828885; -} - -.tab-servos table tr:nth-child(even) { - background-color: #2f2f2f; -} - -.tab-servos table .main { - background-color: #393b3a; -} - -.tab-servos table input[type="number"] { - background-color: #3a3a3a; - color: white; -} - -.tab-servos .direction .rate { - background-color: #3a3a3a; - color: white; -} - -.tab-servos .servoblock { - background-color: #393b3a; - color: white; -} - -.tab-servos .m-block .label { - color: white; -} - -.tab-servos .m-block .meter-bar { - background-color: #393b3a; -} - - -/* SETUP TAB */ - -.tab-setup #interactive_block { - background-color: #393b3a; -} - -.tab-setup .attitude_info { - color: white; -} - -.tab-setup #interactive_block a.reset { - color: white; - background-color: #575757; -} - -.tab-setup #interactive_block a.reset:hover { - background-color: #393b3a; -} - - -/* TRANSPONDER TAB */ - -.tab-transponder .text .disabled { - background-color: #393b3a; -} - -.tab-transponder .gui_box span { - color: white; -} - -/* SELECT2 */ - -.select2-container .select2-selection--single .select2-selection__rendered { - background-color: #3a3a3a !important; -} - -.select2-selection__arrow b { - border-bottom: 1.5px solid white !important; - border-right: 1.5px solid white !important; -} - -.select2-search--dropdown { - background-color: #3a3a3a !important; -} - -.select2-search--dropdown .select2-search__field { - border: 1px solid var(--subtleAccent) !important; - background-color: #3a3a3a !important; - color: white !important; -} - -.select2-results>.select2-results__options { - background-color: #3a3a3a !important; -} - -/* MULTIPLE-SELECT */ - -.ms-drop ul>li.hide-radio:focus, .ms-drop ul>li.hide-radio:hover { - background-color: var(--subtleAccent); -} diff --git a/src/css/dark-theme.less b/src/css/dark-theme.less new file mode 100644 index 00000000..96049856 --- /dev/null +++ b/src/css/dark-theme.less @@ -0,0 +1,925 @@ +&:root { + --accent: #ffbb00; + --subtleAccent: #9c9c9c; + --quietHeader: #bf8606; + --defaultText: #ffffff; + --subtleText: #c0c0c0; + --mutedText: #d6d6d6; + --linkText: #ffc549; + --boxBackground: #3a3a3a; + --alternativeBackground: #4e4e4e; + --sideBackground: #404040; + --ledAccent: #6e6e6e; + --ledBackground: #424242; + --gimbalBackground: var(--subtleAccent); + --gimbalCrosshair: var(--mutedText); + --switcherysecond: #858585; + --pushedButton-background: #616161; + --pushedButton-fontColor: #ffffff; + --hoverButton-background: #ffcc3e; + --superSubtleAccent: #595959; + --accentBorder: #bf8606; +} +.background_paper { + background-image: url(../images/paper-dark.png); +} +body { + color: white; +} +&::backdrop { + background-image: none; + background-color: rgba(0, 0, 0, 0.5); +} +#options-window { + background-color: #393b3a; +} +#content { + background-color: #393b3a; +} +#content.logopen { + background-color: #393b3a; +} + +/* NOTE: need to think on how to load the dark theme with vue */ +#status-bar { + background-color: #414443 !important; + >* { + ~* { + border-left: 1px solid #9c9c9c; + } + } +} +dialog { + background-color: #3a3d3c; + color: white; + border: 1px solid #ffbb2a; +} +.note { + background-color: #4e4e4e; + color: white; +} +.content_toolbar { + background-color: #555857; + .btn { + a { + border: 1px solid #ffbb2a; + } + a.disabled { + border: 1px solid #ffbb2a; + } + } +} +.gui_box { + border: 1px solid #4d4d4d; + background-color: #393b3a; +} +.gui_warning { + background: #393b3a; +} +.gui_note { + background: #393b3a; + .gui_box_titlebar { + color: black; + } +} +.grey { + background-color: #414443; +} +.gui_box_bottombar { + background-color: #393b3a; +} +.fixed_band { + background-color: #393b3a; +} +.default_btn { + a.disabled { + background-color: #393b3a; + border: 1px solid #ffbb2a; + } +} +.small { + a { + border: 1px solid #ffbb2a; + } +} +.standard_input { + background: var(--boxBackground); + color: white; +} +#quad-status_wrapper { + color: #393b3a; +} +button { + border: 1px solid #ffbb2a; + background-color: #ffbb2a; + color: black; +} +.helpicon { + background-image: url(../images/icons/cf_icon_info_white.svg); + opacity: 0.3; +} +.cf { + .helpicon { + background-image: url(../images/icons/cf_icon_info_grey.svg); + opacity: 0.4; + &:hover { + background-image: url(../images/icons/cf_icon_info_grey.svg); + opacity: 1; + } + } +} +.gui_box_titlebar { + .helpicon { + background-image: url(../images/icons/cf_icon_info_grey.svg); + } +} +.cf_table { + td { + border-style: solid; + } + tr { + &:last-child { + td { + border-style: unset; + } + } + } +} +.noUi-pips { + color: var(--mutedText); +} +.jBox-container { + background: #393b3a; + color: white; +} +.jBox-Modal { + .jBox-title { + background: #393b3a; + border-bottom: 1px solid #9c9c9c; + text-shadow: 0 1px 1px #ffffff; + color: white; + } +} +.jBox-Confirm { + .jBox-title { + background: #393b3a; + border-bottom: 1px solid #9c9c9c; + text-shadow: 0 1px 1px #ffffff; + color: white; + } +} +.jBox-pointer { + &:after { + background: #393b3a; + } +} +.tab-adjustments { + .adjustment { + &:nth-child(odd) { + background-color: #2f2f2f; + } + select { + background-color: #3a3a3a; + color: white; + } + } + .adjustments { + background-color: #393b3a; + td { + border-top: 1px solid #00000000; + border-bottom: 1px solid #00000000; + } + } +} +.tab-auxiliary { + .toolbox { + color: white; + } + .mode { + background-color: #393b3a; + .info { + background-color: #9e9e9e; + color: white; + } + } + .ranges { + border-bottom: 5px solid #8a8a8a; + background-color: #676767; + } + .range { + background-color: #484848; + .channel { + background-color: #3a3a3a; + color: white; + } + } + .link { + background-color: #484848; + } + .buttons { + a { + background-color: #333333; + color: white; + &:hover { + background-color: var(--hoverButton-background); + } + } + } +} +.logic { + background-color: #3a3a3a; + color: white; +} +.linkedTo { + background-color: #3a3a3a; + color: white; +} +.tab-cli { + textarea[name='commands'] { + &::placeholder { + color: silver; + } + background: black; + color: white; + } +} +.cli-textcomplete-dropdown { + background-color: #393b3a; + a { + color: white; + } + .active { + background-color: var(--quietHeader); + } +} +.tab-configuration { + .gui_box { + span { + color: white; + } + } + input { + background-color: #3a3a3a; + color: white; + } + select { + background-color: #3a3a3a; + color: white; + } +} +.tab-failsafe { + .number { + input { + background-color: #3a3a3a; + color: white; + &:disabled { + background-color: #393b3a; + color: grey; + } + } + } + .radioarea { + background-color: #393b3a; + } + .gui_box { + span { + color: white; + } + } + .stage1 { + select { + background-color: #3a3a3a; + color: white; + } + } + .modename { + background-color: #393b3a; + } + .switchMode { + background-color: #3a3a3a; + color: white; + } + .pro1 { + background-image: url(../images/icons/cf_failsafe_procedure1-dark.svg); + } + .pro2 { + background-image: url(../images/icons/cf_failsafe_procedure2-dark.svg); + } + .pro4 { + background-image: url(../images/icons/cf_failsafe_procedure4-dark.svg); + } +} +.btn { + .disabled { + background-color: #393b3a; + } +} +.tab-firmware_flasher { + .options { + select { + background-color: #3a3a3a; + color: white; + } + .description { + color: #b9b9b9; + } + .manual_baud_rate { + select { + background-color: #3a3a3a; + color: white; + } + } + } + .release_info { + .target { + color: #98ddff; + } + } + .cf_table { + td { + border-bottom: solid 1px #4f4f4f; + } + } +} +.tab-gps { + .GPS_info { + .head { + background-color: #393b3a; + } + } + .GPS_signal_strength { + .head { + background-color: #393b3a; + } + } + #loadmap { + .controls { + background-color: #393b3a; + a { + background-color: #393b3a; + &:hover { + background-color: var(--hoverButton-background); + } + &:active { + background-color: #393b3a; + } + } + } + } +} +progress[value] { + &::-webkit-progress-bar { + background-color: #393b3a; + } +} +.tab-landing { + .content_top { + background-color: #00000000; + } + .content_mid { + background-color: #3e3e3e; + .text3 { + .wrap2 { + background: #5f5f5f; + } + } + } + .logowrapper { + img { + content: url(../images/cf_logo_black.svg); + } + } +} +.tab-led-strip { + .section { + color: #c4c4c4; + } + .mainGrid { + background-color: #4e4e4e; + } + button { + background-color: #6b6b6b; + color: white; + &:hover { + border: 1px solid #ffffff; + background-color: #393b3a; + } + } + .gridSections { + border: none; + .block { + border: none; + } + } +} +.tab-logging { + .speed { + background-color: #3a3a3a; + color: white; + } +} +.tab-motors { + .gui_box { + span { + color: white; + } + } + input { + background-color: #3a3a3a; + color: white; + } + select { + background-color: #3a3a3a; + color: white; + } + .plot_control { + background-color: #393b3a; + select { + background-color: #3a3a3a; + color: white; + } + } + .motorblock { + background-color: #393b3a; + } + .m-block { + background-color: #393b3a; + .label { + color: white; + } + .meter-bar { + background-color: #393b3a; + } + } + .motor_testing { + .notice { + background-color: #4e4e4e; + } + } + text { + fill: white; + } +} +.tab-onboard_logging { + .regular-button.disabled { + background-color: #393b3a; + } + .dataflash-contents { + background-color: #393b3a; + } + .sdcard-contents { + background-color: #393b3a; + } + .dataflash-used { + background-color: #848484; + } + .sdcard-other { + background-color: #848484; + } + progress { + &::-webkit-progress-bar { + background-color: #393b3a; + } + } + .blackboxRate { + select { + background-color: #3a3a3a; + color: white; + } + } + .blackboxDebugMode { + select { + background-color: #3a3a3a; + color: white; + } + } + .blackboxDevice { + select { + background-color: #3a3a3a; + color: white; + } + } + .sdcard-icon { + background-color: #393b3a; + } +} +.tab-osd { + .display-layout { + input.position { + border-bottom: 1px solid red; + } + } + .preview { + background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(../images/osd-bg-1.jpg); + background-size: cover; + &:active { + background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(../../images/osd-bg-1-grid.png), url(../../images/osd-bg-1.jpg); + background-size: cover; + } + } + input[type='checkbox'] { + &:after { + line-height: 1.5em; + content: ''; + display: inline-block; + width: 12px; + height: 12px; + margin-top: -1px; + margin-left: -1px; + border: 1px solid #404040; + border-radius: 0.25em; + background: #4d4d4d; + } + &:checked { + &:after { + background: #ffbb00; + border: 1px solid #404040; + } + } + } +} +.tab-pid_tuning { + .profile { + .helpicon { + background-image: url(../images/icons/cf_icon_info_grey.svg); + opacity: 0.4; + &:hover { + opacity: 1; + } + } + select { + background-color: #3a3a3a; + color: white; + } + } + .rate_profile { + .helpicon { + background-image: url(../images/icons/cf_icon_info_grey.svg); + opacity: 0.4; + &:hover { + opacity: 1; + } + } + select { + background-color: #3a3a3a; + color: white; + } + } + .pid_titlebar { + .helpicon { + background-image: url(../images/icons/cf_icon_info_grey.svg); + opacity: 0.4; + &:hover { + opacity: 1; + } + } + .wide_header { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + } + .throttle_limit { + th { + background-color: #393b3a; + border-bottom: 1px solid #5e5e5e; + } + } + .cf { + tr { + background-color: #414443; + } + th { + background-color: var(--quietHeader); + color: white; + } + input { + background-color: #3a3a3a; + color: white; + &:disabled { + color: rgb(105, 105, 105); + background-color: #2d2d2d; + } + } + select { + background-color: #3a3a3a; + color: white; + &:disabled { + color: rgb(105, 105, 105); + background-color: #2d2d2d; + } + } + .rates_logo_bg { + background-color: #ffffff33; + } + } + table.compensation { + .suboption { + select { + background-color: #3a3a3a; + color: white; + } + } + tr { + border-bottom: 1px solid #6b6b6b; + } + } + table { + input { + background-color: #3a3a3a; + color: white; + } + select { + text-align-last: right; + background-color: #3a3a3a; + color: white; + } + } + .tab-container { + >div { + background-color: #535655; + border-right: 1px solid #393b3a; + } + } + .number { + input { + background-color: #3a3a3a; + color: white; + } + } + .gui_box { + span { + color: white; + } + } + .bottomarea { + background-color: #393b3a; + } + .regular-button.disabled { + background-color: #393b3a; + } + .sliderLabels { + th { + background: #414443; + color: white; + } + } + input { + &:disabled { + color: rgb(105, 105, 105); + background-color: #2d2d2d; + } + } + select { + &:disabled { + color: rgb(105, 105, 105); + background-color: #2d2d2d; + } + } + .slidersWarning { + background: #542415; + } +} +.inputBackground { + background-color: #3a3a3a; + color: white; +} +.fancy.header { + background-color: #393b3a; +} +.pid_roll { + background-color: #A00000; +} +.pid_pitch { + background-color: #00A000; +} +.pid_yaw { + background-color: #0000A0; +} +.pid_mode { + background-color: #3c3c3c; + border-bottom: 1px solid #3c3c3c; + color: white; +} +.pid_titlebar { + background-color: #393b3a; +} +.tabarea { + background: #393b3a; +} +.tab-ports { + table { + td { + &:first-child { + border-left: none; + } + &:last-child { + border-right: none; + } + border-bottom: 1px solid #575757; + border-left: 1px solid #575757; + border-right: 1px solid #575757; + } + } + .ports { + tr { + &:last-child { + border-bottom: none; + td { + border-bottom: none; + } + } + } + } +} +.tab-power { + .number { + input { + background-color: #3a3a3a; + color: white; + } + } + .battery-configuration { + select { + background-color: #3a3a3a; + color: white; + } + } +} +.tab-receiver { + .gui_box { + span { + color: white; + } + } + input { + background-color: #3a3a3a; + color: white; + } + select { + background-color: #3a3a3a; + color: white; + } + .bars { + .meter-bar { + background-color: #393b3a; + .label { + color: white; + } + } + } + .tunings { + background-color: #393b3a; + table { + td { + background: #414443; + } + tr { + &:nth-child(odd) { + background-color: #393b3a; + } + } + input { + background-color: #3a3a3a; + color: white; + } + } + } + .rssi_channel_wrapper { + background-color: #414443; + border-bottom: 1px solid #4d4d4d; + border-right: 1px solid #4d4d4d; + } + .rcmap_wrapper { + background-color: #414443; + border-left: 1px solid #4d4d4d; + border-bottom: 1px solid #4d4d4d; + } + .hybrid_element { + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + input { + background-color: #3a3a3a; + color: white; + } + } + .plot_control { + background-color: #2f2f2f; + } + text { + fill: white; + } +} +.tab-sensors { + .plot_control { + background-color: #2f2f2f; + select { + background-color: #3a3a3a; + color: white; + } + } + text { + fill: white; + } +} +.tab-servos { + table { + th { + background: #828885; + } + tr { + &:nth-child(even) { + background-color: #2f2f2f; + } + } + .main { + background-color: #393b3a; + } + input[type="number"] { + background-color: #3a3a3a; + color: white; + } + } + .direction { + .rate { + background-color: #3a3a3a; + color: white; + } + } + .servoblock { + background-color: #393b3a; + color: white; + } + .m-block { + .label { + color: white; + } + .meter-bar { + background-color: #393b3a; + } + } +} +.tab-setup { + #interactive_block { + background-color: #393b3a; + a.reset { + color: white; + background-color: #575757; + &:hover { + background-color: #393b3a; + } + } + } + .attitude_info { + color: white; + } +} +.tab-transponder { + .text { + .disabled { + background-color: #393b3a; + } + } + .gui_box { + span { + color: white; + } + } +} +.select2-container { + .select2-selection--single { + .select2-selection__rendered { + background-color: #3a3a3a !important; + } + } +} +.select2-selection__arrow { + b { + border-bottom: 1.5px solid white !important; + border-right: 1.5px solid white !important; + } +} +.select2-search--dropdown { + background-color: #3a3a3a !important; + .select2-search__field { + border: 1px solid var(--subtleAccent) !important; + background-color: #3a3a3a !important; + color: white !important; + } +} +.select2-results { + >.select2-results__options { + background-color: #3a3a3a !important; + } +} +.ms-drop { + ul { + >li.hide-radio { + &:focus { + background-color: var(--subtleAccent); + } + &:hover { + background-color: var(--subtleAccent); + } + } + } +} diff --git a/src/css/main.css b/src/css/main.css deleted file mode 100644 index c13831ad..00000000 --- a/src/css/main.css +++ /dev/null @@ -1,2546 +0,0 @@ -:root { - --accent: #ffbb00; - --error: red; - --subtleAccent: silver; - --quietText: #ffffff; - --quietHeader: #828885; - --defaultText: #000000; - --subtleText: #c0c0c0; - --mutedText: #616161; - --linkText: #2e2ebb; - --boxBackground: #ffffff; - --alternativeBackground: #f9f9f9; - --sideBackground: #ffffff; - --ledAccent: #adadad; - --ledBackground: #e9e9e9; - --gimbalBackground: #eee; - --gimbalCrosshair: var(--subtleAccent); - --switcherysecond: #c4c4c4; - --pushedButton-background: #c4c4c4; - --pushedButton-fontColor: #000000; - --hoverButton-background: #ffcc3e; - --superSubtleAccent: #CCCCCC; - --accentBorder: #ffbb00; -} - -* { - margin: 0; - padding: 0; - border: 0; - list-style: none; - outline: none; - user-select: none; - -webkit-user-drag: none; - -webkit-app-region: no-drag; -} - -*[draggable="true"] { - -webkit-user-drag: element; -} - -html, body { - height: 100%; -} - -body { - font-family: 'Open Sans', 'Segoe UI', Tahoma, sans-serif; - font-size: 12px; - color: #303030; - background-color: #3d3f3e; - margin: 0; - padding: 0; - overflow: hidden; -} - -::backdrop { - background-image: none; - background-color: rgba(1, 1, 1, 0.5); -} - -a { - text-decoration: none; - color: var(--linkText); - font-weight: bold; -} - -a:hover { - text-decoration: none; -} - -a.disabled { - pointer-events: none; - cursor: default; - color: #999; -} - -.background_paper { - background-size: 100%; - background-image: url(../images/paper.png); - background-position: center; -} - -.standard_input { - padding-left: 3px; - height: 20px; - line-height: 20px; - text-align: left; - border-radius: 3px; - font-size: 12px; - font-weight: normal; - border: 1px solid var(--subtleAccent); - background: var(--boxBackground); -} - -/* Help-Icon */ -.helpicon { - float: right; - margin-top: 7px; - 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; - 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: var(--accent); - border-radius: 3px; - border: 1px solid #e8b423; - color: #000; - float: right; - font-weight: bold; - font-size: 10px; - line-height: 17px; - text-shadow: 0 1px rgba(255, 255, 255, 0.25); - text-transform: uppercase; - letter-spacing: 0.03em; - display: block; -} - -.cf_doc_version_bt a:hover { - background-color: #fecb3f; - 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; -} - -.margin-top { - margin-top: 20px; -} - -.margin-bottom { - margin-bottom: 20px; -} - -.message-positive { - color: var(--accent) !important; -} - -.message-negative { - color: var(--error) !important; - font-weight: bold !important; -} - -.message-negative-italic { - color: var(--error) !important; - font-weight: bold !important; - font-style: italic; -} - -/** Main wrapper **/ -#main-wrapper { - padding: 0; - height: 100%; -} - - - -/** Background **/ -#background { - background: rgba(0, 0, 0, 0.5); - position: fixed; - z-index: 1500; - top: 0; - left: 0; - right: 0; - bottom: 0; - display: none; -} -#side_menu_swipe { - display: none; - position: fixed; - top: 0; - left: 0; - width: 15px; - height: 100%; - z-index: 1999; -} -@media all and (max-width: 575px) { - #side_menu_swipe { - display: block; - } -} - - - -/** Header **/ -.headerbar { - height: 115px; - background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.15)); - display: flex; - align-items: center; - padding: 0 15px; -} - -#menu_btn, #reveal_btn { - display: none; - width: 24px; - height: 24px; - font-size: 20px; - color: #ffffff; - line-height: 24px; - text-align: center; -} - -#menu_btn { - margin-right: 15px; -} - -#reveal_btn { - margin-left: 15px; -} - -#port-picker { - display: flex; - align-items: center; - margin-left: auto; -} - -#portsinput { - width: 220px; - margin-right: 15px; -} - -#portsinput .dropdown { - margin-bottom: 5px; -} - -#auto-connect-and-baud { - float: right; -} - -#auto-connect-switch { - width: 110px; - float: left; - margin-top: 4px; - margin-left: 5px; - margin-right: 20px; -} - -#baudselect { - width: 80px; - float: right; - margin-right: 2px; -} - -#port-picker .auto_connect, .gray { - color: var(--subtleAccent); -} - -#firmware-virtual-option { - height: 76px; - width: 180px; - margin-right: 15px; - margin-top: 16px; - display: none; -} - -#port-override-option { - height: 76px; - margin-top: 24px; - margin-right: 15px; -} - -#port-override-option label { - background-color: #2b2b2b; - border-radius: 3px; - padding: 3px; - color: var(--subtleAccent); -} - -#port-override { - background-color: rgba(0, 0, 0, 0.1); - color: #888888; - width: 140px; - margin-left: 2px; - padding: 1px; - border-radius: 3px; - height: 15px; - font-size: 12px; -} - -#header_btns { - display: flex; - align-items: center; -} - -.open_firmware_flasher, .connect_controls { - position: relative; - width: 80px; - text-align: center; - height: 84px; -} - -.firmware_b, .connect_b { - width: 52px; - margin: 0 14px; - height: 52px; -} - -@media all and (min-width: 1125px) { - .open_firmware_flasher, .connect_controls { - width: 100px; - } - - .firmware_b, .connect_b { - margin: 0 24px; - } -} - -.firmware_b a.flash, .connect_b a.connect { - background-color: var(--accent); - border: 1px solid #dba718; - background-repeat: no-repeat; - height: 50px; - width: 50px; - border-radius: 100px; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); - float: left; - transition: none; -} - -.firmware_b a.flash { - background-image: url(../images/icons/cf_icon_flasher_white.svg); - background-size: 30px; - background-position: center 10px; -} - -.connect_b a.connect { - background-image: url(../images/icons/cf_icon_usb2_white.svg); - background-size: 44px; - background-position: center 6px; -} - -.firmware_b a.flash.disabled, .connect_b a.connect.disabled { - background-color: #808080; - pointer-events: none; - cursor: default; -} - -.firmware_b a.flash:hover, .connect_b a.connect:hover { - background-color: #ffcc3f; -} - -.firmware_b a.flash.active, .connect_b a.connect.active { - background-color: #e60000; - border: 1px solid #fe0000; - transition: none; -} - -.firmware_b a.flash.active { - background-image: url(../images/icons/cf_icon_flasher_white.svg); -} - -.connect_b a.connect.active { - background-image: url(../images/icons/cf_icon_usb1_white.svg); -} - -.firmware_b a.flash.active:hover, .connect_b a.connect.active:hover { - background-color: #f21212; -} - -.flash_state, .connect_state { - color: #fff; - font-size: 12px; - font-weight: normal; - text-shadow: 0 1px rgba(0, 0, 0, 0.25); - padding: 0 10px; -} - -.header-wrapper { - display: flex; -} - -#sensor-status { - margin-right: 10px; - line-height: 2px; - height: 67px; - border-radius: 5px; - border: 1px solid #272727; - box-shadow: 0 2px 0 rgba(92, 92, 92, 0.5); - background-color: #434343; - background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.55)); -} - -@media all and (min-width: 1125px) { - #sensor-status { - margin-right: 20px; - } -} - -#sensor-status > ul { - display: flex; -} - -#sensor-status li { - float: left; - height: 67px; - 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)); - padding-left: 5px; - padding-right: 5px; - text-shadow: 0 1px rgba(0, 0, 0, 1.0); -} - -.gyroicon, .accicon, .magicon, .gpsicon, .baroicon, .sonaricon { - background-repeat: no-repeat; - height: 30px; - margin-top: 3px; - width: 100%; - padding-top: 40px; - color: #4f4f4f; - text-align: center; -} - -.gyroicon.active, .accicon.active, .magicon.active, .gpsicon.active, .baroicon.active, .sonaricon.active { - color: #818181; -} - -#sensor-status div { - white-space: nowrap; - overflow: hidden; -} - -.gyroicon { - background-image: url(../images/icons/sensor_gyro_off.png); - background-size: 43px; - background-position: top; -} - -.gyroicon.active { - background-image: url(../images/icons/sensor_gyro_on.png); -} - -.accicon { - background-image: url(../images/icons/sensor_acc_off.png); - background-size: 40px; - background-position: -5px 2px; -} - -.accicon.active { - background-image: url(../images/icons/sensor_acc_on.png); -} - -.magicon { - background-image: url(../images/icons/sensor_mag_off.png); - background-size: 42px; - background-position: -5px 2px; -} - -.magicon.active { - background-image: url(../images/icons/sensor_mag_on.png); -} - -.gpsicon { - background-image: url(../images/icons/sensor_sat_off.png); - background-size: 42px; - background-position: -5px 2px; -} - -.gpsicon.active { - background-image: url(../images/icons/sensor_sat_on.png); -} - -.baroicon { - background-image: url(../images/icons/sensor_baro_off.png); - background-size: 40px; - background-position: -5px 2px; -} - -.baroicon.active { - background-image: url(../images/icons/sensor_baro_on.png); -} - -.sonaricon { - background-image: url(../images/icons/sensor_sonar_off.png); - background-size: 41px; - background-position: -4px 1px; -} - -.sonaricon.active { - background-image: url(../images/icons/sensor_sonar_on.png); -} - -#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-color: #434343; - background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.45)); -} - -/* Dataflash element styling*/ - -#dataflash_wrapper_global { - color:white; - font-size:10px; - width:125px; - margin-right: 5px; - line-height: 12px; - height: 33px; - border-radius: 5px; - border: 1px solid #272727; - box-shadow: 0 1px 0 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: 0 1px rgba(0, 0, 0, 1.0); - -} - -@media all and (min-width: 1125px) { - #dataflash_wrapper_global { - margin-right: 10px; - } -} - -.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: var(--accent); - 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; -} - -#expertMode { - color: var(--subtleAccent); - margin-top: 27px; - width:125px; - float: right; - margin-right: 0; - line-height: 12px; -} - -/* Battery element styling*/ - -#quad-status_wrapper { - display:none; - color: white; - font-size: 10px; - min-width: 90px; - margin-right: 10px; - line-height: 12px; - height: 67px; - border-radius: 5px; - border: 1px solid #272727; - box-shadow: 0 1px 0 rgba(92, 92, 92, 0.5); - background-color: #434343; - background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.55)); - text-shadow: 0 1px rgba(0, 0, 0, 1.0); - white-space: nowrap; -} - -@media all and (min-width: 1125px) { - #quad-status_wrapper { - margin-right: 20px; - } -} - -.quad-status-contents { - display: none; - margin-top: 10px; - margin-left: 14px; - height: 10px; - width: 31px; -} - -.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; -} - -.battery-status.state-ok { - background-color: #59AA29; -} -.battery-status.state-warning { - background-color: var(--error); -} - -.battery-status.state-empty { - animation: error-blinker 1s linear infinite; -} - -@keyframes error-blinker { - 0% { - background-color: transparent; - } - 50% { - background-color: var(--error); - } -} - -.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; - margin-left: -4px; - background-repeat: no-repeat; -} - - -.armedicon, -.failsafeicon, -.linkicon { - margin-left: 8px; - margin-right: 8px; - margin-top: 6px; - 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); -} -.armedicon.active { - background-image: url(../images/icons/cf_icon_armed_active.svg); -} - -.failsafeicon { - background-image: url(../images/icons/cf_icon_failsafe_grey.svg); -} -.failsafeicon.active { - background-image: url(../images/icons/cf_icon_failsafe_active.svg); -} - -.linkicon { - background-image: url(../images/icons/cf_icon_link_grey.svg); -} -.linkicon.active { - background-image: url(../images/icons/cf_icon_link_active.svg); -} - -/** Header (not phones) **/ -@media not all and (max-width: 575px) { - .visible-on-phone-only { - display: none !important; - } -} - -/** Header (phones) **/ -@media all and (max-width: 575px) { - .visible-on-desktop-only { - display: none !important; - } - - .headerbar { - height: 56px; - background: rgba(0, 0, 0, 0.15); - flex-wrap: wrap; - align-content: flex-start; - padding-top: 12px; - box-sizing: border-box; - transition: all 0.2s; - } - - .headerbar.expand { - height: 154px; - } - - .headerbar.expand2 { - height: 118px; - } - - #menu_btn, #reveal_btn { - display: block; - } - - #menu_btn { - order: 1; - } - - #header_btns { - margin-left: auto; - order: 3; - } - - .open_firmware_flasher, .connect_controls { - width: 31px; - height: 31px; - margin-left: 15px; - } - - .firmware_b, .connect_b { - margin: 0; - zoom: 0.6; - } - - #port-picker, .header-wrapper, .flash_state, .connect_state { - display: none !important; - } - - #reveal_btn { - order: 4; - } - - #port-picker { - order: 5; - justify-content: space-between; - margin-top: 15px; - transition: all 0.2s; - } - - #port-picker.reveal { - display: flex !important; - width: 100%; - margin-left: 0; - } - - #port-override-option, #portsinput { - flex-grow: 1; - } - - #portsinput { - margin-right: 0; - } - - #port-override { - width: calc(100% - 40px); - } - - .header-wrapper { - order: 5; - zoom: 62%; - justify-content: space-around; - } - - .header-wrapper.reveal { - display: flex !important; - width: 100%; - margin-top: 24px; - } - - #dataflash_wrapper_global, #sensor-status, #quad-status_wrapper { - margin-right: 0; - } -} - - - -/** Log **/ -#log { - background-color: #242424; - color: rgba(255, 255, 255, 0.60); - line-height: 21px; - height: 27px; - overflow-y: hidden; - transition: all 0.2s; -} - -#log.active { - overflow-y: auto; - box-shadow: inset 0 0 15px #000000; - height: 111px; -} - -#scrollicon { - position: fixed; - right: 10px; - top: 113px; - height: 27px; - width: 27px; - background-repeat: no-repeat; - background-image: url(../images/icons/scroll.svg); - opacity: 0.0; - transition: all ease 0.2s; -} - -#scrollicon.active { - height: 88px; - margin-top: 13px; - margin-right: 20px; - width: 88px; - opacity: 0.15; -} - -#log .wrapper { - padding: 5px 5px 4px 10px; - position: relative; - bottom: 0; -} - -#log .wrapper > *, #log .wrapper > * > *{ - user-select: text; -} - -#log a { - font-weight: normal; - color: #ffbb00; -} - -#log a:hover { - text-decoration: underline; -} - -.logswitch { - position: absolute; - right: 20px; - padding: 2px; - z-index: 10; -} - -.logswitch a { - color: #656565 !important; - transition: all 0.2s; -} - -.logswitch a:hover { - color: #959595 !important; - text-decoration: none !important; -} - -/** Log (phones) **/ -@media all and (max-width: 575px) { - #log.active { - box-shadow: none; - } - .logswitch { - background-color: #242424; - } - #scrollicon { - display: none; - } -} - - - -/** Tabs & content container **/ -#tab-content-container { - display: flex; - height: calc(100% - 162px); - align-items: stretch; -} - -#tab-content-container.logopen { - height: calc(100% - 247px); -} - -#tab-content-container, .tab_container, #content { - transition: all 0.2s; -} - -.tab_container.logopen, #content { - overflow-x: hidden; - overflow-y: auto; -} - -/** Tabs & content container (phones) **/ -@media all and (max-width: 575px) { - #tab-content-container { - height: calc(100% - 83px); - } - #tab-content-container.logopen { - height: calc(100% - 167px); - } - #tab-content-container.header_expanded { - height: calc(100% - 181px); - } - #tab-content-container.header_expanded2 { - height: calc(100% - 145px); - } - #tab-content-container.logopen.header_expanded { - height: calc(100% - 265px); - } - #tab-content-container.logopen.header_expanded2 { - height: calc(100% - 229px); - } -} - - -/** Tabs **/ -.tab_container { - width: 200px; - border-right: 4px solid var(--accent); - background-color: #2e2e2e; - overflow: auto; -} - -#tabs { - font-size: 13px; -} - -.header-wrapper .mode-connected { - display: none; -} - -#tabs ul.mode-connected { - display: none; -} - -#tabs ul.mode-connected-cli { - 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-weight: normal; - 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: var(--accent); - color: #000; - transition: none; - text-shadow: 0 1px rgba(255, 255, 255, 0.45); - -} - -#tabs li.active a:hover { - cursor: default; - background-color: var(--accent); -} - -.tabicon { - background-repeat: no-repeat; - background-size: 15px; - background-position: 13px 7px; -} - -@media only screen and (max-height: 750px) , only screen and (max-device-height: 750px) { - .tab_container { - overflow-x: hidden; - overflow-y: auto; - } -} - -@media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) { - #tabs li a { - font-weight: normal; - 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: 42px; - } -} - -/** Tabs (phones) **/ -@media all and (max-width: 575px) { - .tab_container { - position: fixed; - z-index: 2000; - top: 0; - left: -304px; - bottom: 0; - width: 300px; - transition: all 0.3s; - } - .tab_container.reveal { - left: 0; - } -} - -/* 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); - background-position-y: 2px; -} - -.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_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); -} - -.ic_vtx { - background-image: url(../images/icons/cf_icon_vtx_grey.svg); -} - -.ic_vtx:hover, li.active .ic_vtx { - background-image: url(../images/icons/cf_icon_vtx_white.svg); -} - -.ic_power { - background-image: url(../images/icons/cf_icon_power_grey.svg); - background-position-y: 9px; -} - -.ic_power:hover { - background-image: url(../images/icons/cf_icon_power_white.svg); -} - -li.active .ic_power { - background-image: url(../images/icons/cf_icon_power_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_wizard { - 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); -} - - - -/** Content **/ -#content { - background-color: white; - -webkit-transform: rotateX(0deg); /* DO NOT REMOVE! this fixes the UI freezing bug on MAC OS X */ - width: calc(100% - 202px); -} - -@media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) { - #content { - width: calc(100% - 42px); - } -} - -/** Content (phones) **/ -@media all and (max-width: 575px) { - #content { - width: 100%; - } -} - -#cache { - display: none; -} - -.data-loading { - width: 100%; - height: 100%; - background-image: url(../images/loading-spin.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: fit-content; - margin: auto auto; - position: absolute; - width: 50%; - border-radius: 3px; - border: 1px solid silver; -} - -dialog .dialog_toolbar .btn a { - /* common styles for content toolbar buttons */ - margin-top: 0; - margin-bottom: 0; - margin-right: 20px; - background-color: var(--accent); - border-radius: 3px; - border: 1px solid #dba718; - color: #000; - float: left; - font-weight: bold; - font-size: 12px; - text-shadow: 0 1px rgba(255, 255, 255, 0.25); - display: block; - cursor: pointer; - transition: all ease 0.2s; - padding: 0 9px; - line-height: 28px; -} - -dialog .dialog_toolbar .btn a:hover { - background-color: var(--hoverButton-background); - transition: all ease 0.2s; -} - -dialog .dialog_toolbar .btn a:active { - background-color: var(--accent); - transition: all ease 0.0s; - box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35); -} - -dialog .dialog_toolbar .btn a.disabled { - cursor: default; - color: #fff; - background-color: #AFAFAF; - border: 1px solid #AFAFAF; - pointer-events: none; - text-shadow: none; - opacity: 0.5; -} - -.dialogYesNo .dialogYesNoContent { - margin-bottom: 12px; - margin-top: 12px; - white-space: pre-line; -} - -.dialogYesNo .dialogYesNo-yesButton, .dialogYesNo .dialogYesNo-noButton { - margin: 0px; -} - -.dialogYesNo .dialogYesNo-yesButton { - margin-right: 12px; -} - -.dialogYesNo { - width: fit-content; - max-width: 400px; -} - -.dialogWait { - width: fit-content; - max-width: 500px; - min-width: 300px; -} - -.dialogWait .data-loading { - margin-top: 16px; - margin-bottom: 16px; - margin-left: auto; - margin-right: auto; - width: 100px; - height: 100px; -} - -.dialogWait .dialogWaitTitle { - margin-left: auto; - margin-right: auto; - margin-bottom: 16px; - width: fit-content; -} - -.dialogInformation .dialogInformationContent { - margin-bottom: 12px; - margin-top: 12px; - white-space: pre-line; -} - -.dialogInformation .dialogInformation-confirmButton { - margin: 0px; -} - -.dialogInformation { - width: fit-content; - max-width: 400px; -} - -@media all and (max-width: 575px) { - dialog { - position: fixed; - width: calc(100% - 2em - 2px) !important; /* 2px - border */ - max-width: unset; - height: auto !important; - bottom: 0; - top: 56px; - border-radius: unset; - border: none; - overflow: auto; - } -} -/* Border of the Tab */ - -/* Tab Title */ -.tab_title { - border-bottom: 1px solid var(--accent); - font-size: 20px; - line-height: 24px; - height: 30px; - font-weight: 300; - margin-bottom: 15px; -} - -/* Note */ -.note { - background-color: #fff7cd; - border: 1px solid #ffe55f; - margin-bottom: 10px; - margin-top: 0; - border-radius: 3px; - font-size: 11px; - font-weight: normal; - padding: 5px 7px 5px 7px; -} - -.tab_wrapper { - padding: 20px 15px 15px 15px; -} - -.content_wrapper { - padding: 20px 20px 20px 19px; - 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 var(--subtleAccent); -} - -.content_toolbar .btn a { - /* common styles for content toolbar buttons */ - margin-top: 0; - margin-bottom: 0; - margin-right: 20px; - background-color: var(--accent); - border-radius: 3px; - border: 1px solid #dba718; - color: #000; - float: right; - font-weight: bold; - font-size: 12px; - text-shadow: 0 1px rgba(255, 255, 255, 0.25); - display: block; - cursor: pointer; - transition: all ease 0.2s; - padding: 0 9px; - line-height: 28px; - user-select: none; -} - -.content_toolbar .btn a:hover { - background-color: var(--hoverButton-background); - transition: all ease 0.2s; -} - -.content_toolbar .btn a:active { - background-color: var(--accent); - 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; -} - -.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; - position: initial; -} - -.toolbar_fixed_bottom .content_toolbar { - display: flex; - flex-wrap: wrap; - position: absolute; - bottom: 0; - left: 0; - z-index: 2000; /* for fancy toggle buttons */ -} - -.toolbar_fixed_bottom .content_toolbar div:first-child { - margin-left: auto; -} - -.toolbar_fixed_bottom .content_toolbar.xs-compressed { - flex-direction: row-reverse; -} - -.toolbar_fixed_bottom .content_toolbar.xs-compressed div:first-child { - margin-left: 0; -} - -.toolbar_fixed_bottom .content_toolbar.xs-compressed div:last-child { - margin-left: auto; -} - -.toolbar_expand_btn { - display: none; - position: absolute; - bottom: 15px; - left: 15px; - width: 20px; - height: 20px; - font-size: 20px; - line-height: 20px; - text-align: center; - z-index: 2000; -} - -@media all and (max-width: 575px) { - .toolbar_fixed_bottom .content_toolbar.xs-compressed { - padding-left: 60px; - box-sizing: border-box; - height: 50px; - } - .toolbar_fixed_bottom .content_toolbar.xs-compressed.expanded { - padding-left: 15px; - padding-bottom: 0; - height: auto; - } - .toolbar_fixed_bottom .content_toolbar.xs-compressed div { - margin-bottom: 10px; - } - .toolbar_expand_btn { - display: block; - } - .content_toolbar { - height: auto; - padding: 8px 0 0; - } - .toolbar_fixed_bottom .content_toolbar { - justify-content: flex-end; - } - .toolbar_fixed_bottom .content_toolbar div { - padding-bottom: 8px; - } -} - -/** Hack to change the "display: none" by a "visibility:hidden", to apply - the margin-left: auto needed by the first element to align to the right the buttons */ -.toolbar_fixed_bottom .content_toolbar div[style='display: none;']:first-child { - visibility: hidden; - display: block !important; -} - -/* 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; -} - -.gui_warning { - background: #ffdddd; -} - -.gui_note { - background: #fff6de; -} - -.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); - color: white; -} - -.gui_note .gui_box_titlebar { - background-color: var(--accent); - 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); - color: white; -} - - -.grey { - background-color: #f9f9f9 -} - -.gui_box_titlebar { - background-color: var(--quietHeader); - color: var(--quietText); - border-radius: 3px 3px 0 0; - font-size: 13px; - width: 100%; - height: 27px; - padding-bottom: 0; - float: left; - margin-bottom: 7px; - font-weight: 600; -} - -.gui_box_bottombar { - background-color: #e4e4e4; - border-radius: 0 0 3px 3px; - font-size: 13px; - width: 100%; - height: 27px; - padding-top: 0; - float: left; - font-weight: 600; -} - -.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: var(--accent); - border-radius: 3px; - border: 1px solid #dba718; - color: #000; - float: right; - font-weight: bold; - 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: var(--hoverButton-background); - transition: all ease 0.2s; -} - -/* DIfferent buttons */ -.default_btn { - width: 100%; - position: relative; - margin-bottom: 10px; - margin-top: 0; - float: left; -} - -.default_btn a { - padding: 5px 0 5px 0; - text-align: center; - background-color: var(--accent); - border-radius: 4px; - border: 1px solid #dba718; - color: #000; - font-weight: 600; - font-size: 12px; - line-height: 13px; - display: block; - transition: all ease 0.2s; - text-decoration:none; - cursor: pointer; -} - -.default_btn a.disabled { - background-color: #f1f1f1; - border: 1px solid var(--subtleAccent); - color: #ccc; -} - -.default_btn a:hover { - background-color: var(--hoverButton-background); - color: #000; - text-shadow: 0 1px rgba(255, 255, 255, 0.25); - transition: all ease 0.2s; - text-decoration:none; - -} - -.default_btn a:active { - background-color: var(--hoverButton-background); - transition: all ease 0.0s; - box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35); -} - -.margin-top5 { - margin-top: 5px; -} - -.regular-button { - -webkit-user-drag: none; - margin-top: 8px; - margin-bottom: 8px; - margin-right: 10px; - background-color: var(--accent); - border-radius: 3px; - border: 1px solid #dba718; - color: #000; - font-weight: bold; - font-size: 12px; - text-shadow: 0 1px rgba(255, 255, 255, 0.25); - display: inline-block; - cursor: pointer; - transition: all ease 0.2s; - padding: 0 9px; - line-height: 28px; - user-select: none; -} - -.regular-button:hover { - background-color: var(--hoverButton-background); -} - -.regular-button.pushed { - background-color: var(--pushedButton-background); - color: var(--pushedButton-fontColor); - border-radius: 3px; -} - -.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-weight: 600; - font-size: 11px; - line-height: 11px; - display: block; - transition: all ease 0.2s; -} - -.small a:hover { - background-color: var(--accent); - color: #000; - text-shadow: 0 1px rgba(255, 255, 255, 0.25); - border: 1px solid var(--accent); - 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: var(--accent); - text-shadow: 0 1px rgba(255, 255, 255, 0.25); - color: #000; - border: 1px solid #dba718; - transition: all ease 0.2s; -} - -.green a:hover { - background-color: #ffcc3f; - border: 1px solid #dba718; - text-shadow: 0 1px rgba(255, 255, 255, 0.25); - color: #000; - 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 { - border: 0; - padding-top: 2px; - padding-bottom: 5px; -} - -.cf_table tr:not(:last-child) td { - border-bottom: dotted 1px var(--subtleAccent); -} - -.third { - width: 33%; -} - -.cf_table tr:last-child 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: var(--accent); - padding: 1px 7px 2px 7px; - border-radius: 3px; - color: #FFFFFF; - font-size: 11px; - margin-left: 3px; -} - -/* fixing padding for all Tabs*/ -.tab-setup, .tab-landing, .tab-adjustments, .tab-auxiliary, .tab-cli, .tab-configuration, .tab-failsafe, .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-power { - height: 100%; - position: relative; -} - -/* fixing logging tab*/ -.properties { - width: 800px; -} - -.properties dl { - width: 200px; -} - -.properties dd { - width: 400px; - height: auto; -} - -/* GPS Fix styling*/ -.fixtrue { - background-color: #56ac1d; - padding: 2px 5px; - border-radius: 3px; - color: #fff; - font-size: 10px; -} - -.fixfalse { - background-color: #e60000; - padding: 2px 5px; - border-radius: 3px; - color: #fff; - font-size: 10px; -} - -.cf_tooltiptext { - display:none; -} - -.bottomStatusIcons { - display: flex; - justify-content: space-between; - background-color: #272727; - height: 31px; - margin-top: 2px; - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; -} - -button { - padding: .5em .75em; - border-radius: 4px; - background-color: #ccc; - color: #666; - border: 1px solid var(--subtleAccent); - font-weight: 600; - font-size: 10pt; - cursor: pointer; -} - -button.active { - background-color: var(--accent); - border: 1px solid #dba718; - color: #000; -} - -.jBox-Tooltip { - max-width: 180px; -} - -.jBox-Widetip { - max-width: 300px; -} - -@media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) { - -.content_wrapper { - padding: 15px 15px 15px 14px; -} - -.tab_title { - font-size: 16px; - line-height: 18px; - font-weight: 300; - margin-bottom: 10px; - height: 22px; -} - -.cf_doc_version_bt a { - padding: 1px 5px 1px 5px; - margin-top: -35px; - font-size: 9px; - line-height: 15px; -} - -.cf_table td { - padding-top: 2px; - padding-bottom: 2px; -} - -.default_btn { - margin-bottom: 10px; -} - -.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; - position: initial; -} - -} - -.hidden { - display: none; -} - -.darkgrey_box { - background-color: #575757; - color: white; -} - -.topBorderLine { - border-top: 1px solid var(--subtleAccent); - padding-top: 5px; -} - -.jBox-container { - background: #fff; - border:1px solid var(--accent); - font-size: 11px; - line-height: 13px; - color: #525352; -} -.jBox-content { - padding: 4px 5px; -} -.jBox-Modal .jBox-content { - padding: 10px 15px; -} -.jBox-pointer-top, -.jBox-pointer-bottom { - width: 22px; - height: 10px; - } -.jBox-pointer-left, -.jBox-pointer-right { - width: 10px; - height: 20px; -} -.jBox-pointer:after { - width: 10px; - height: 9px; - border:1px solid var(--accent); -} - -#dialogResetToCustomDefaults-content { - margin-top: 10px; - margin-bottom: 10px; -} - -#dialogReportProblems-header { - margin-top: 10px; - margin-bottom: 5px; -} - -.dialogReportProblems-listItem { - list-style: circle; - margin-left: 20px; - margin-bottom: 5px; -} - -#dialogReportProblems-footer { - margin-bottom: 10px; -} - -/* - noUi slider stylings -*/ - -.noUi-target { - background: var(--alternativeBackground); - border-color: var(--subtleAccent); - box-shadow: none; -} - -.noUi-handle { - background: var(--sideBackground); - border-color: var(--subtleAccent); - box-shadow: none; -} - -.noUi-handle:before, -.noUi-handle:after { - background-color: var(--subtleAccent); -} - -.noUi-background { - background: var(--alternativeBackground); - box-shadow: none; -} - -.noUi-connect { - box-shadow: none; -} -/** Responsive grid **/ -@media all and (max-width: 575px) { - .sm, .md, .lg, .xl { - display: none !important; - } -} -@media all and (min-width: 576px) and (max-width: 767px) { - .xs, .md, .lg, .xl { - display: none !important; - } -} -@media all and (min-width: 768px) and (max-width: 991px) { - .xs, .sm, .lg, .xl { - display: none !important; - } -} -@media all and (min-width: 992px) and (max-width: 1139px) { - .xs, .sm, .md, .xl { - display: none !important; - } -} -@media all and (min-width: 1140px) { - .xs, .sm, .md, .lg { - display: none !important; - } -} -@media all and (min-width: 576px) { - .sm-max { - display: none !important; - } -} -@media all and (min-width: 768px) { - .md-max { - display: none !important; - } -} -@media all and (min-width: 992px) { - .lg-max { - display: none !important; - } -} -@media all and (max-width: 1139px) { - .lg-min { - display: none !important; - } -} -@media all and (max-width: 991px) { - .md-min { - display: none !important; - } -} -@media all and (max-width: 767px) { - .sm-min { - display: none !important; - } -} -.grid-row { - width: 100%; - display: flex; - flex-wrap: wrap; - justify-content: space-between; - box-sizing: border-box; -} -.grid-col { - margin-left: 7px; - margin-right: 7px; -} -.grid-col.col1 { - width: calc(8.33% - 14px); -} -.grid-col.col2 { - width: calc(16.67% - 14px); -} -.grid-col.col3 { - width: calc(25% - 14px); -} -.grid-col.col4 { - width: calc(33.33% - 14px); -} -.grid-col.col5 { - width: calc(41.67% - 14px); -} -.grid-col.col6 { - width: calc(50% - 14px); -} -.grid-col.col7 { - width: calc(58.33% - 14px); -} -.grid-col.col8 { - width: calc(66.67% - 14px); -} -.grid-col.col9 { - width: calc(75% - 14px); -} -.grid-col.col10 { - width: calc(83.33% - 14px); -} -.grid-col.col11 { - width: calc(91.67% - 14px); -} -.grid-col.col12 { - width: calc(100% - 14px); -} -.grid-col:first-child { - margin-left: 0; -} -.grid-col:last-child { - margin-right: 0; -} -.grid-col.col1:first-child, .grid-col.col1:last-child { - width: calc(8.33% - 7px); -} -.grid-col.col2:first-child, .grid-col.col2:last-child { - width: calc(16.67% - 7px); -} -.grid-col.col3:first-child, .grid-col.col3:last-child { - width: calc(25% - 7px); -} -.grid-col.col4:first-child, .grid-col.col4:last-child { - width: calc(33.33% - 7px); -} -.grid-col.col5:first-child, .grid-col.col5:last-child { - width: calc(41.67% - 7px); -} -.grid-col.col6:first-child, .grid-col.col6:last-child { - width: calc(50% - 7px); -} -.grid-col.col7:first-child, .grid-col.col7:last-child { - width: calc(58.33% - 7px); -} -.grid-col.col8:first-child, .grid-col.col8:last-child { - width: calc(66.67% - 7px); -} -.grid-col.col9:first-child, .grid-col.col9:last-child { - width: calc(75% - 7px); -} -.grid-col.col10:first-child, .grid-col.col10:last-child { - width: calc(83.33% - 7px); -} -.grid-col.col11:first-child, .grid-col.col11:last-child { - width: calc(91.67% - 7px); -} -.grid-col.col12:first-child, .grid-col.col12:last-child { - width: calc(100% - 7px); -} -@media all and (max-width: 575px) { - .grid-col.col1, .grid-col.col2, .grid-col.col3, .grid-col.col4, .grid-col.col5, .grid-col.col6, .grid-col.col7, .grid-col.col8, .grid-col.col9, .grid-col.col10, .grid-col.col11, .grid-col.col12 { - width: 100% !important; - margin-left: 0 !important; - margin-right: 0 !important; - } -} diff --git a/src/css/main.less b/src/css/main.less new file mode 100644 index 00000000..baa30765 --- /dev/null +++ b/src/css/main.less @@ -0,0 +1,2594 @@ + +@keyframes error-blinker { + 0% { + background-color: transparent; + } + 50% { + background-color: var(--error); + } +} + +&:root { + --accent: #ffbb00; + --error: red; + --subtleAccent: silver; + --quietText: #ffffff; + --quietHeader: #828885; + --defaultText: #000000; + --subtleText: #c0c0c0; + --mutedText: #616161; + --linkText: #2e2ebb; + --boxBackground: #ffffff; + --alternativeBackground: #f9f9f9; + --sideBackground: #ffffff; + --ledAccent: #adadad; + --ledBackground: #e9e9e9; + --gimbalBackground: #eee; + --gimbalCrosshair: var(--subtleAccent); + --switcherysecond: #c4c4c4; + --pushedButton-background: #c4c4c4; + --pushedButton-fontColor: #000000; + --hoverButton-background: #ffcc3e; + --superSubtleAccent: #CCCCCC; + --accentBorder: #ffbb00; +} +* { + margin: 0; + padding: 0; + border: 0; + list-style: none; + outline: none; + user-select: none; + -webkit-user-drag: none; + -webkit-app-region: no-drag; +} +*[draggable="true"] { + -webkit-user-drag: element; +} +html { + height: 100%; +} +body { + height: 100%; + font-family: 'Open Sans', 'Segoe UI', Tahoma, sans-serif; + font-size: 12px; + color: #303030; + background-color: #3d3f3e; + margin: 0; + padding: 0; + overflow: hidden; +} +&::backdrop { + background-image: none; + background-color: rgba(1, 1, 1, 0.5); +} +a { + text-decoration: none; + color: var(--linkText); + font-weight: bold; + &:hover { + text-decoration: none; + } +} +a.disabled { + pointer-events: none; + cursor: default; + color: #999; +} +.background_paper { + background-size: 100%; + background-image: url(../images/paper.png); + background-position: center; +} +.standard_input { + padding-left: 3px; + height: 20px; + line-height: 20px; + text-align: left; + border-radius: 3px; + font-size: 12px; + font-weight: normal; + border: 1px solid var(--subtleAccent); + background: var(--boxBackground); +} +.helpicon { + float: right; + margin-top: 7px; + 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; + transition: none; + &: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: var(--accent); + border-radius: 3px; + border: 1px solid #e8b423; + color: #000; + float: right; + font-weight: bold; + font-size: 10px; + line-height: 17px; + text-shadow: 0 1px rgba(255, 255, 255, 0.25); + text-transform: uppercase; + letter-spacing: 0.03em; + display: block; + &:hover { + background-color: #fecb3f; + transition: all ease 0.2s; + } + } +} +input[type="number"] { + &::-webkit-inner-spin-button { + opacity: 1; + margin-left: 5px; + } +} +.clear-both { + clear: both; +} +.left { + float: left; +} +.right { + float: right; +} +.margin-top { + margin-top: 20px; +} +.margin-bottom { + margin-bottom: 20px; +} +.message-positive { + color: var(--accent) !important; +} +.message-negative { + color: var(--error) !important; + font-weight: bold !important; +} +.message-negative-italic { + color: var(--error) !important; + font-weight: bold !important; + font-style: italic; +} +#main-wrapper { + padding: 0; + height: 100%; +} +#background { + background: rgba(0, 0, 0, 0.5); + position: fixed; + z-index: 1500; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: none; +} +#side_menu_swipe { + display: none; + position: fixed; + top: 0; + left: 0; + width: 15px; + height: 100%; + z-index: 1999; +} +.headerbar { + height: 115px; + background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.15)); + display: flex; + align-items: center; + padding: 0 15px; +} +#menu_btn { + display: none; + width: 24px; + height: 24px; + font-size: 20px; + color: #ffffff; + line-height: 24px; + text-align: center; + margin-right: 15px; +} +#reveal_btn { + display: none; + width: 24px; + height: 24px; + font-size: 20px; + color: #ffffff; + line-height: 24px; + text-align: center; + margin-left: 15px; +} +#port-picker { + display: flex; + align-items: center; + margin-left: auto; + .auto_connect { + color: var(--subtleAccent); + } +} +#portsinput { + width: 220px; + margin-right: 15px; + .dropdown { + margin-bottom: 5px; + } +} +#auto-connect-and-baud { + float: right; +} +#auto-connect-switch { + width: 110px; + float: left; + margin-top: 4px; + margin-left: 5px; + margin-right: 20px; +} +#baudselect { + width: 80px; + float: right; + margin-right: 2px; +} +.gray { + color: var(--subtleAccent); +} +#firmware-virtual-option { + height: 76px; + width: 180px; + margin-right: 15px; + margin-top: 16px; + display: none; +} +#port-override-option { + height: 76px; + margin-top: 24px; + margin-right: 15px; + label { + background-color: #2b2b2b; + border-radius: 3px; + padding: 3px; + color: var(--subtleAccent); + } +} +#port-override { + background-color: rgba(0, 0, 0, 0.1); + color: #888888; + width: 140px; + margin-left: 2px; + padding: 1px; + border-radius: 3px; + height: 15px; + font-size: 12px; +} +#header_btns { + display: flex; + align-items: center; +} +.open_firmware_flasher { + position: relative; + width: 80px; + text-align: center; + height: 84px; +} +.connect_controls { + position: relative; + width: 80px; + text-align: center; + height: 84px; +} +.firmware_b { + width: 52px; + margin: 0 14px; + height: 52px; + a.flash { + background-color: var(--accent); + border: 1px solid #dba718; + background-repeat: no-repeat; + height: 50px; + width: 50px; + border-radius: 100px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); + float: left; + transition: none; + background-image: url(../images/icons/cf_icon_flasher_white.svg); + background-size: 30px; + background-position: center 10px; + &:hover { + background-color: #ffcc3f; + } + } + a.flash.disabled { + background-color: #808080; + pointer-events: none; + cursor: default; + } + a.flash.active { + background-color: #e60000; + border: 1px solid #fe0000; + transition: none; + background-image: url(../images/icons/cf_icon_flasher_white.svg); + &:hover { + background-color: #f21212; + } + } +} +.connect_b { + width: 52px; + margin: 0 14px; + height: 52px; + a.connect { + background-color: var(--accent); + border: 1px solid #dba718; + background-repeat: no-repeat; + height: 50px; + width: 50px; + border-radius: 100px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); + float: left; + transition: none; + background-image: url(../images/icons/cf_icon_usb2_white.svg); + background-size: 44px; + background-position: center 6px; + &:hover { + background-color: #ffcc3f; + } + } + a.connect.disabled { + background-color: #808080; + pointer-events: none; + cursor: default; + } + a.connect.active { + background-color: #e60000; + border: 1px solid #fe0000; + transition: none; + background-image: url(../images/icons/cf_icon_usb1_white.svg); + &:hover { + background-color: #f21212; + } + } +} +.flash_state { + color: #fff; + font-size: 12px; + font-weight: normal; + text-shadow: 0 1px rgba(0, 0, 0, 0.25); + padding: 0 10px; +} +.connect_state { + color: #fff; + font-size: 12px; + font-weight: normal; + text-shadow: 0 1px rgba(0, 0, 0, 0.25); + padding: 0 10px; +} +.header-wrapper { + display: flex; + .mode-connected { + display: none; + } +} +#sensor-status { + margin-right: 10px; + line-height: 2px; + height: 67px; + border-radius: 5px; + border: 1px solid #272727; + box-shadow: 0 2px 0 rgba(92, 92, 92, 0.5); + background-color: #434343; + background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.55)); + >ul { + display: flex; + } + li { + float: left; + height: 67px; + 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)); + padding-left: 5px; + padding-right: 5px; + text-shadow: 0 1px rgba(0, 0, 0, 1.0); + &:last-child { + border-right: 0 solid #c0c0c0; + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + } + &:first-child { + border-left: 0 solid #c0c0c0; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + } + } + div { + white-space: nowrap; + overflow: hidden; + } + .on { + background-color: #434343; + background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.45)); + } +} +.gyroicon { + background-repeat: no-repeat; + height: 30px; + margin-top: 3px; + width: 100%; + padding-top: 40px; + color: #4f4f4f; + text-align: center; + background-image: url(../images/icons/sensor_gyro_off.png); + background-size: 43px; + background-position: top; +} +.accicon { + background-repeat: no-repeat; + height: 30px; + margin-top: 3px; + width: 100%; + padding-top: 40px; + color: #4f4f4f; + text-align: center; + background-image: url(../images/icons/sensor_acc_off.png); + background-size: 40px; + background-position: -5px 2px; +} +.magicon { + background-repeat: no-repeat; + height: 30px; + margin-top: 3px; + width: 100%; + padding-top: 40px; + color: #4f4f4f; + text-align: center; + background-image: url(../images/icons/sensor_mag_off.png); + background-size: 42px; + background-position: -5px 2px; +} +.gpsicon { + background-repeat: no-repeat; + height: 30px; + margin-top: 3px; + width: 100%; + padding-top: 40px; + color: #4f4f4f; + text-align: center; + background-image: url(../images/icons/sensor_sat_off.png); + background-size: 42px; + background-position: -5px 2px; +} +.baroicon { + background-repeat: no-repeat; + height: 30px; + margin-top: 3px; + width: 100%; + padding-top: 40px; + color: #4f4f4f; + text-align: center; + background-image: url(../images/icons/sensor_baro_off.png); + background-size: 40px; + background-position: -5px 2px; +} +.sonaricon { + background-repeat: no-repeat; + height: 30px; + margin-top: 3px; + width: 100%; + padding-top: 40px; + color: #4f4f4f; + text-align: center; + background-image: url(../images/icons/sensor_sonar_off.png); + background-size: 41px; + background-position: -4px 1px; +} +.gyroicon.active { + color: #818181; + background-image: url(../images/icons/sensor_gyro_on.png); +} +.accicon.active { + color: #818181; + background-image: url(../images/icons/sensor_acc_on.png); +} +.magicon.active { + color: #818181; + background-image: url(../images/icons/sensor_mag_on.png); +} +.gpsicon.active { + color: #818181; + background-image: url(../images/icons/sensor_sat_on.png); +} +.baroicon.active { + color: #818181; + background-image: url(../images/icons/sensor_baro_on.png); +} +.sonaricon.active { + color: #818181; + background-image: url(../images/icons/sensor_sonar_on.png); +} +#dataflash_wrapper_global { + color: white; + font-size: 10px; + width: 125px; + margin-right: 5px; + line-height: 12px; + height: 33px; + border-radius: 5px; + border: 1px solid #272727; + box-shadow: 0 1px 0 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: 0 1px rgba(0, 0, 0, 1.0); +} +.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; + .notsupported_global { + display: none; + } + li { + height: 5px; + position: relative; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.20); + border-radius: 2px; + div { + position: absolute; + top: -18px; + margin-top: 0; + left: 0; + right: 0; + width: 120px; + text-align: left; + color: silver; + } + } + progress { + &::-webkit-progress-bar { + height: 8px; + background-color: #eee; + } + } +} +.dataflash-free_global { + background-color: var(--accent); + border-radius: 4px; +} +.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; +} +#expertMode { + color: var(--subtleAccent); + margin-top: 27px; + width: 125px; + float: right; + margin-right: 0; + line-height: 12px; +} +#quad-status_wrapper { + display: none; + color: white; + font-size: 10px; + min-width: 90px; + margin-right: 10px; + line-height: 12px; + height: 67px; + border-radius: 5px; + border: 1px solid #272727; + box-shadow: 0 1px 0 rgba(92, 92, 92, 0.5); + background-color: #434343; + background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.55)); + text-shadow: 0 1px rgba(0, 0, 0, 1.0); + white-space: nowrap; +} +.quad-status-contents { + display: none; + margin-top: 10px; + margin-left: 14px; + height: 10px; + width: 31px; + progress { + &::-webkit-progress-bar { + height: 12px; + background-color: #eee; + } + &::-webkit-progress-value { + background-color: #bcf; + } + } +} +.battery-status { + height: 11px; +} +.battery-status.state-ok { + background-color: #59AA29; +} +.battery-status.state-warning { + background-color: var(--error); +} +.battery-status.state-empty { + animation: error-blinker 1s linear infinite; +} +.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; + margin-left: -4px; + background-repeat: no-repeat; +} +.armedicon { + margin-left: 8px; + margin-right: 8px; + margin-top: 6px; + height: 18px; + width: 18px; + opacity: 0.8; + background-size: contain; + background-position: center; + transition: none; + background-image: url(../images/icons/cf_icon_armed_grey.svg); +} +.failsafeicon { + margin-left: 8px; + margin-right: 8px; + margin-top: 6px; + height: 18px; + width: 18px; + opacity: 0.8; + background-size: contain; + background-position: center; + transition: none; + background-image: url(../images/icons/cf_icon_failsafe_grey.svg); +} +.linkicon { + margin-left: 8px; + margin-right: 8px; + margin-top: 6px; + height: 18px; + width: 18px; + opacity: 0.8; + background-size: contain; + background-position: center; + transition: none; + background-image: url(../images/icons/cf_icon_link_grey.svg); +} +.armedicon.active { + background-image: url(../images/icons/cf_icon_armed_active.svg); +} +.failsafeicon.active { + background-image: url(../images/icons/cf_icon_failsafe_active.svg); +} +.linkicon.active { + background-image: url(../images/icons/cf_icon_link_active.svg); +} +#log { + background-color: #242424; + color: rgba(255, 255, 255, 0.60); + line-height: 21px; + height: 27px; + overflow-y: hidden; + transition: all 0.2s; + .wrapper { + padding: 5px 5px 4px 10px; + position: relative; + bottom: 0; + >* { + user-select: text; + >* { + user-select: text; + } + } + } + a { + font-weight: normal; + color: #ffbb00; + &:hover { + text-decoration: underline; + } + } +} +#log.active { + overflow-y: auto; + box-shadow: inset 0 0 15px #000000; + height: 111px; +} +#scrollicon { + position: fixed; + right: 10px; + top: 113px; + height: 27px; + width: 27px; + background-repeat: no-repeat; + background-image: url(../images/icons/scroll.svg); + opacity: 0.0; + transition: all ease 0.2s; +} +#scrollicon.active { + height: 88px; + margin-top: 13px; + margin-right: 20px; + width: 88px; + opacity: 0.15; +} +.logswitch { + position: absolute; + right: 20px; + padding: 2px; + z-index: 10; + a { + color: #656565 !important; + transition: all 0.2s; + &:hover { + color: #959595 !important; + text-decoration: none !important; + } + } +} +#tab-content-container { + display: flex; + height: calc(100% - 162px); + align-items: stretch; + transition: all 0.2s; +} +#tab-content-container.logopen { + height: calc(100% - 247px); +} +.tab_container { + transition: all 0.2s; + width: 200px; + border-right: 4px solid var(--accent); + background-color: #2e2e2e; + overflow: auto; +} +#content { + transition: all 0.2s; + overflow-x: hidden; + overflow-y: auto; + background-color: white; + -webkit-transform: rotateX(0deg); + width: calc(100% - 202px); +} +.tab_container.logopen { + overflow-x: hidden; + overflow-y: auto; +} +#tabs { + font-size: 13px; + ul.mode-connected { + display: none; + } + ul.mode-connected-cli { + display: none; + } + li { + border-bottom: 1px solid rgba(0, 0, 0, 0.30); + &:first-child { + border-top: 0; + } + &:last-child { + border-bottom: 0; + } + a { + font-weight: normal; + 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); + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + &:hover { + text-decoration: none; + background-color: rgba(128, 128, 128, 0.50); + color: #fff; + } + } + } + li.active { + color: #fff; + transition: none; + a { + background-color: var(--accent); + color: #000; + transition: none; + text-shadow: 0 1px rgba(255, 255, 255, 0.45); + &:hover { + cursor: default; + background-color: var(--accent); + } + } + } +} +.tabicon { + background-repeat: no-repeat; + background-size: 15px; + background-position: 13px 7px; +} +.ic_setup { + background-image: url(../images/icons/cf_icon_setup_grey.svg); + &: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_white.svg); + } + .ic_config { + background-image: url(../images/icons/cf_icon_config_white.svg); + } + .ic_pid { + background-image: url(../images/icons/cf_icon_pid_white.svg); + } + .ic_rx { + background-image: url(../images/icons/cf_icon_rx_white.svg); + } + .ic_modes { + background-image: url(../images/icons/cf_icon_modes_white.svg); + } + .ic_adjust { + background-image: url(../images/icons/cf_icon_adjust_white.svg); + } + .ic_servo { + background-image: url(../images/icons/cf_icon_servo_white.svg); + } + .ic_gps { + background-image: url(../images/icons/cf_icon_gps_white.svg); + } + .ic_led { + background-image: url(../images/icons/cf_icon_led_white.svg); + } + .ic_sensors { + background-image: url(../images/icons/cf_icon_sensors_white.svg); + } + .ic_log { + background-image: url(../images/icons/cf_icon_log_white.svg); + } + .ic_data { + background-image: url(../images/icons/cf_icon_data_white.svg); + } + .ic_cli { + background-image: url(../images/icons/cf_icon_cli_white.svg); + } + .ic_motor { + background-image: url(../images/icons/cf_icon_motor_white.svg); + } + .ic_welcome { + background-image: url(../images/icons/cf_icon_welcome_white.svg); + } + .ic_help { + background-image: url(../images/icons/cf_icon_help_white.svg); + } + .ic_flasher { + background-image: url(../images/icons/cf_icon_flasher_white.svg); + } + .ic_transponder { + background-image: url(../images/icons/cf_icon_transponder_white.svg); + } + .ic_osd { + background-image: url(../images/icons/icon_osd_white.svg); + } + .ic_vtx { + background-image: url(../images/icons/cf_icon_vtx_white.svg); + } + .ic_power { + background-image: url(../images/icons/cf_icon_power_white.svg); + } + .ic_failsafe { + background-image: url(../images/icons/cf_icon_failsafe_white.svg); + } + .ic_backup { + background-image: url(../images/icons/cf_icon_backup_white.svg); + } + .ic_wizard { + background-image: url(../images/icons/cf_icon_wizard_white.svg); + } + .ic_advanced { + background-image: url(../images/icons/cf_icon_advanced_white.svg); + } + .ic_mission { + background-image: url(../images/icons/cf_icon_mission_white.svg); + } +} +.ic_ports { + background-image: url(../images/icons/cf_icon_ports_grey.svg); + &:hover { + background-image: url(../images/icons/cf_icon_ports_white.svg); + } +} +.ic_config { + background-image: url(../images/icons/cf_icon_config_grey.svg); + &:hover { + background-image: url(../images/icons/cf_icon_config_white.svg); + } +} +.ic_pid { + background-image: url(../images/icons/cf_icon_pid_grey.svg); + &:hover { + background-image: url(../images/icons/cf_icon_pid_white.svg); + } +} +.ic_rx { + background-image: url(../images/icons/cf_icon_rx_grey.svg); + &:hover { + background-image: url(../images/icons/cf_icon_rx_white.svg); + } +} +.ic_modes { + background-image: url(../images/icons/cf_icon_modes_grey.svg); + &:hover { + background-image: url(../images/icons/cf_icon_modes_white.svg); + } +} +.ic_adjust { + background-image: url(../images/icons/cf_icon_adjust_grey.svg); + &:hover { + background-image: url(../images/icons/cf_icon_adjust_white.svg); + } +} +.ic_servo { + background-image: url(../images/icons/cf_icon_servo_grey.svg); + &:hover { + background-image: url(../images/icons/cf_icon_servo_white.svg); + } +} +.ic_gps { + background-image: url(../images/icons/cf_icon_gps_grey.svg); + &:hover { + background-image: url(../images/icons/cf_icon_gps_white.svg); + } +} +.ic_led { + background-image: url(../images/icons/cf_icon_led_grey.svg); + &:hover { + background-image: url(../images/icons/cf_icon_led_white.svg); + } +} +.ic_sensors { + background-image: url(../images/icons/cf_icon_sensors_grey.svg); + &:hover { + background-image: url(../images/icons/cf_icon_sensors_white.svg); + } +} +.ic_log { + background-image: url(../images/icons/cf_icon_log_grey.svg); + &:hover { + background-image: url(../images/icons/cf_icon_log_white.svg); + } +} +.ic_data { + background-image: url(../images/icons/cf_icon_data_grey.svg); + &:hover { + background-image: url(../images/icons/cf_icon_data_white.svg); + } +} +.ic_cli { + background-image: url(../images/icons/cf_icon_cli_grey.svg); + &:hover { + background-image: url(../images/icons/cf_icon_cli_white.svg); + } +} +.ic_motor { + background-image: url(../images/icons/cf_icon_motor_grey.svg); + &:hover { + background-image: url(../images/icons/cf_icon_motor_white.svg); + } +} +.ic_welcome { + background-image: url(../images/icons/cf_icon_welcome_grey.svg); + &:hover { + background-image: url(../images/icons/cf_icon_welcome_white.svg); + } +} +.ic_help { + background-image: url(../images/icons/cf_icon_help_grey.svg); + &:hover { + background-image: url(../images/icons/cf_icon_help_white.svg); + } +} +.ic_flasher { + background-image: url(../images/icons/cf_icon_flasher_grey.svg); + &:hover { + background-image: url(../images/icons/cf_icon_flasher_white.svg); + } +} +.ic_transponder { + background-image: url(../images/icons/cf_icon_transponder_grey.svg); + background-position-y: 2px; + &:hover { + background-image: url(../images/icons/cf_icon_transponder_white.svg); + } +} +.ic_osd { + background-image: url(../images/icons/icon_osd.svg); + background-position-y: 4px; + &:hover { + background-image: url(../images/icons/icon_osd_white.svg); + } +} +.ic_vtx { + background-image: url(../images/icons/cf_icon_vtx_grey.svg); + &:hover { + background-image: url(../images/icons/cf_icon_vtx_white.svg); + } +} +.ic_power { + background-image: url(../images/icons/cf_icon_power_grey.svg); + background-position-y: 9px; + &:hover { + background-image: url(../images/icons/cf_icon_power_white.svg); + } +} +.ic_failsafe { + background-image: url(../images/icons/cf_icon_failsafe_grey.svg); + &:hover { + background-image: url(../images/icons/cf_icon_failsafe_white.svg); + } +} +.ic_backup { + background-image: url(../images/icons/cf_icon_backup_grey.svg); + &:hover { + background-image: url(../images/icons/cf_icon_backup_white.svg); + } +} +.ic_wizzard { + background-image: url(../images/icons/cf_icon_wizard_grey.svg); + &:hover { + background-image: url(../images/icons/cf_icon_wizard_white.svg); + } +} +.ic_advanced { + background-image: url(../images/icons/cf_icon_advanced_grey.svg); + &:hover { + background-image: url(../images/icons/cf_icon_advanced_white.svg); + } +} +.ic_mission { + background-image: url(../images/icons/cf_icon_mission_grey.svg); + &:hover { + background-image: url(../images/icons/cf_icon_mission_white.svg); + } +} +#cache { + display: none; +} +.data-loading { + width: 100%; + height: 100%; + background-image: url(../images/loading-spin.svg); + background-repeat: no-repeat; + background-position: center 45%; + p { + position: relative; + top: calc(45% + 45px); + text-align: center; + font-weight: bold; + } +} +dialog { + background-color: white; + padding: 1em; + height: fit-content; + margin: auto auto; + position: absolute; + width: 50%; + border-radius: 3px; + border: 1px solid silver; + .dialog_toolbar { + .btn { + a { + margin-top: 0; + margin-bottom: 0; + margin-right: 20px; + background-color: var(--accent); + border-radius: 3px; + border: 1px solid #dba718; + color: #000; + float: left; + font-weight: bold; + font-size: 12px; + text-shadow: 0 1px rgba(255, 255, 255, 0.25); + display: block; + cursor: pointer; + transition: all ease 0.2s; + padding: 0 9px; + line-height: 28px; + &:hover { + background-color: var(--hoverButton-background); + transition: all ease 0.2s; + } + &:active { + background-color: var(--accent); + transition: all ease 0.0s; + box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35); + } + } + a.disabled { + cursor: default; + color: #fff; + background-color: #AFAFAF; + border: 1px solid #AFAFAF; + pointer-events: none; + text-shadow: none; + opacity: 0.5; + } + } + } +} +.dialogYesNo { + .dialogYesNoContent { + margin-bottom: 12px; + margin-top: 12px; + white-space: pre-line; + } + .dialogYesNo-yesButton { + margin: 0px; + margin-right: 12px; + } + .dialogYesNo-noButton { + margin: 0px; + } + width: fit-content; + max-width: 400px; +} +.dialogWait { + width: fit-content; + max-width: 500px; + min-width: 300px; + .data-loading { + margin-top: 16px; + margin-bottom: 16px; + margin-left: auto; + margin-right: auto; + width: 100px; + height: 100px; + } + .dialogWaitTitle { + margin-left: auto; + margin-right: auto; + margin-bottom: 16px; + width: fit-content; + } +} +.dialogInformation { + .dialogInformationContent { + margin-bottom: 12px; + margin-top: 12px; + white-space: pre-line; + } + .dialogInformation-confirmButton { + margin: 0px; + } + width: fit-content; + max-width: 400px; +} +.tab_title { + border-bottom: 1px solid var(--accent); + font-size: 20px; + line-height: 24px; + height: 30px; + font-weight: 300; + margin-bottom: 15px; +} +.note { + background-color: #fff7cd; + border: 1px solid #ffe55f; + margin-bottom: 10px; + margin-top: 0; + border-radius: 3px; + font-size: 11px; + font-weight: normal; + padding: 5px 7px 5px 7px; +} +.tab_wrapper { + padding: 20px 15px 15px 15px; +} +.content_wrapper { + padding: 20px 20px 20px 19px; + position: relative; +} +.content_toolbar { + 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 var(--subtleAccent); + .btn { + a { + margin-top: 0; + margin-bottom: 0; + margin-right: 20px; + background-color: var(--accent); + border-radius: 3px; + border: 1px solid #dba718; + color: #000; + float: right; + font-weight: bold; + font-size: 12px; + text-shadow: 0 1px rgba(255, 255, 255, 0.25); + display: block; + cursor: pointer; + transition: all ease 0.2s; + padding: 0 9px; + line-height: 28px; + user-select: none; + &:hover { + background-color: var(--hoverButton-background); + transition: all ease 0.2s; + } + &:active { + background-color: var(--accent); + transition: all ease 0.0s; + box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35); + } + } + a.disabled { + cursor: default; + color: #fff; + background-color: #AFAFAF; + border: 1px solid #AFAFAF; + pointer-events: none; + text-shadow: none; + opacity: 0.5; + } + } +} +.toolbar_scroll_bottom { + .content_wrapper { + height: 100%; + margin: 0 0 -50px; + } +} + +.toolbar_fixed_bottom { + .content_wrapper { + height: calc(100% - 90px); + overflow-y: auto; + position: initial; + } + .content_toolbar { + display: flex; + flex-wrap: wrap; + position: absolute; + bottom: 0; + left: 0; + z-index: 2000; + div { + &:first-child { + margin-left: auto; + } + } + div[style='display: none;'] { + &:first-child { + visibility: hidden; + display: block !important; + } + } + } + .content_toolbar.xs-compressed { + flex-direction: row-reverse; + div { + &:first-child { + margin-left: 0; + } + &:last-child { + margin-left: auto; + } + } + } +} +.toolbar_expand_btn { + display: none; + position: absolute; + bottom: 15px; + left: 15px; + width: 20px; + height: 20px; + font-size: 20px; + line-height: 20px; + text-align: center; + z-index: 2000; +} +.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%; +} +.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; +} +.gui_box { + border: 1px solid #ccc; + border-radius: 4px; + background-color: #FFFFFF; + float: left; + width: calc(100% - 2px); + margin-bottom: 10px; +} +.gui_warning { + background: #ffdddd; + .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); + color: white; + } +} +.gui_note { + background: #fff6de; + .gui_box_titlebar { + background-color: var(--accent); + 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); + color: white; + } +} +.grey { + background-color: #f9f9f9; +} +.gui_box_titlebar { + background-color: var(--quietHeader); + color: var(--quietText); + border-radius: 3px 3px 0 0; + font-size: 13px; + width: 100%; + height: 27px; + padding-bottom: 0; + float: left; + margin-bottom: 7px; + font-weight: 600; +} +.gui_box_bottombar { + background-color: #e4e4e4; + border-radius: 0 0 3px 3px; + font-size: 13px; + width: 100%; + height: 27px; + padding-top: 0; + float: left; + font-weight: 600; +} +.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_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; + .save_btn { + a { + margin-top: 9px; + margin-bottom: 0; + margin-right: 20px; + background-color: var(--accent); + border-radius: 3px; + border: 1px solid #dba718; + color: #000; + float: right; + font-weight: bold; + 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; + &:hover { + background-color: var(--hoverButton-background); + transition: all ease 0.2s; + } + } + } +} +.default_btn { + width: 100%; + position: relative; + margin-bottom: 10px; + margin-top: 0; + float: left; + a { + padding: 5px 0 5px 0; + text-align: center; + background-color: var(--accent); + border-radius: 4px; + border: 1px solid #dba718; + color: #000; + font-weight: 600; + font-size: 12px; + line-height: 13px; + display: block; + transition: all ease 0.2s; + text-decoration: none; + cursor: pointer; + &:hover { + background-color: var(--hoverButton-background); + color: #000; + text-shadow: 0 1px rgba(255, 255, 255, 0.25); + transition: all ease 0.2s; + text-decoration: none; + } + &:active { + background-color: var(--hoverButton-background); + transition: all ease 0.0s; + box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35); + } + } + a.disabled { + background-color: #f1f1f1; + border: 1px solid var(--subtleAccent); + color: #ccc; + } +} +.margin-top5 { + margin-top: 5px; +} +.regular-button { + -webkit-user-drag: none; + margin-top: 8px; + margin-bottom: 8px; + margin-right: 10px; + background-color: var(--accent); + border-radius: 3px; + border: 1px solid #dba718; + color: #000; + font-weight: bold; + font-size: 12px; + text-shadow: 0 1px rgba(255, 255, 255, 0.25); + display: inline-block; + cursor: pointer; + transition: all ease 0.2s; + padding: 0 9px; + line-height: 28px; + user-select: none; + &:hover { + background-color: var(--hoverButton-background); + } +} +.regular-button.pushed { + background-color: var(--pushedButton-background); + color: var(--pushedButton-fontColor); + border-radius: 3px; +} +.small { + width: auto; + position: relative; + margin-bottom: 7px; + margin-top: 0; + margin-right: 5px; + float: left; + 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-weight: 600; + font-size: 11px; + line-height: 11px; + display: block; + transition: all ease 0.2s; + &:hover { + background-color: var(--accent); + color: #000; + text-shadow: 0 1px rgba(255, 255, 255, 0.25); + border: 1px solid var(--accent); + transition: all ease 0.2s; + } + &: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: var(--accent); + text-shadow: 0 1px rgba(255, 255, 255, 0.25); + color: #000; + border: 1px solid #dba718; + transition: all ease 0.2s; + &:hover { + background-color: #ffcc3f; + border: 1px solid #dba718; + text-shadow: 0 1px rgba(255, 255, 255, 0.25); + color: #000; + transition: all ease 0.2s; + } + } +} +.cf_table { + margin-bottom: 5px; + float: left; + margin-top: -5px; + font-size: 11px; + width: 100%; + td { + border: 0; + padding-top: 2px; + padding-bottom: 5px; + &:last-child { + text-align: right; + } + } + tr { + &:not(:last-child) { + td { + border-bottom: dotted 1px var(--subtleAccent); + } + } + &:last-child { + td { + border: none; + } + } + } +} +.third { + width: 33%; +} +.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: var(--accent); + padding: 1px 7px 2px 7px; + border-radius: 3px; + color: #FFFFFF; + font-size: 11px; + margin-left: 3px; +} +.tab-setup { + height: 100%; + position: relative; +} +.tab-landing { + height: 100%; + position: relative; +} +.tab-adjustments { + height: 100%; + position: relative; +} +.tab-auxiliary { + height: 100%; + position: relative; +} +.tab-cli { + height: 100%; + position: relative; +} +.tab-configuration { + height: 100%; + position: relative; +} +.tab-failsafe { + height: 100%; + position: relative; +} +.tab-firmware_flasher { + height: 100%; + position: relative; +} +.tab-gps { + height: 100%; + position: relative; +} +.tab-help { + height: 100%; + position: relative; +} +.tab-led-strip { + height: 100%; + position: relative; +} +.tab-logging { + height: 100%; + position: relative; +} +.tab-modes { + height: 100%; + position: relative; +} +.tab-motors { + height: 100%; + position: relative; +} +.tab-pid_tuning { + height: 100%; + position: relative; +} +.tab-ports { + height: 100%; + position: relative; +} +.tab-receiver { + height: 100%; + position: relative; +} +.tab-sensors { + height: 100%; + position: relative; +} +.tab-servos { + height: 100%; + position: relative; +} +.tab-osd { + height: 100%; + position: relative; +} +.tab-power { + height: 100%; + position: relative; +} +.properties { + width: 800px; + dl { + width: 200px; + } + dd { + width: 400px; + height: auto; + } +} +.fixtrue { + background-color: #56ac1d; + padding: 2px 5px; + border-radius: 3px; + color: #fff; + font-size: 10px; +} +.fixfalse { + background-color: #e60000; + padding: 2px 5px; + border-radius: 3px; + color: #fff; + font-size: 10px; +} +.cf_tooltiptext { + display: none; +} +.bottomStatusIcons { + display: flex; + justify-content: space-between; + background-color: #272727; + height: 31px; + margin-top: 2px; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; +} +button { + padding: .5em .75em; + border-radius: 4px; + background-color: #ccc; + color: #666; + border: 1px solid var(--subtleAccent); + font-weight: 600; + font-size: 10pt; + cursor: pointer; +} +button.active { + background-color: var(--accent); + border: 1px solid #dba718; + color: #000; +} +.jBox-Tooltip { + max-width: 180px; +} +.jBox-Widetip { + max-width: 300px; +} +.hidden { + display: none; +} +.darkgrey_box { + background-color: #575757; + color: white; +} +.topBorderLine { + border-top: 1px solid var(--subtleAccent); + padding-top: 5px; +} +.jBox-container { + background: #fff; + border: 1px solid var(--accent); + font-size: 11px; + line-height: 13px; + color: #525352; +} +.jBox-content { + padding: 4px 5px; +} +.jBox-Modal { + .jBox-content { + padding: 10px 15px; + } +} +.jBox-pointer-top { + width: 22px; + height: 10px; +} +.jBox-pointer-bottom { + width: 22px; + height: 10px; +} +.jBox-pointer-left { + width: 10px; + height: 20px; +} +.jBox-pointer-right { + width: 10px; + height: 20px; +} +.jBox-pointer { + &:after { + width: 10px; + height: 9px; + border: 1px solid var(--accent); + } +} +#dialogResetToCustomDefaults-content { + margin-top: 10px; + margin-bottom: 10px; +} +#dialogReportProblems-header { + margin-top: 10px; + margin-bottom: 5px; +} +.dialogReportProblems-listItem { + list-style: circle; + margin-left: 20px; + margin-bottom: 5px; +} +#dialogReportProblems-footer { + margin-bottom: 10px; +} +.noUi-target { + background: var(--alternativeBackground); + border-color: var(--subtleAccent); + box-shadow: none; +} +.noUi-handle { + background: var(--sideBackground); + border-color: var(--subtleAccent); + box-shadow: none; + &:before { + background-color: var(--subtleAccent); + } + &:after { + background-color: var(--subtleAccent); + } +} +.noUi-background { + background: var(--alternativeBackground); + box-shadow: none; +} +.noUi-connect { + box-shadow: none; +} +.grid-row { + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + box-sizing: border-box; +} +.grid-col { + margin-left: 7px; + margin-right: 7px; + &:first-child { + margin-left: 0; + } + &:last-child { + margin-right: 0; + } +} +.grid-col.col1 { + width: calc(8.33% - 14px); + &:first-child { + width: calc(8.33% - 7px); + } + &:last-child { + width: calc(8.33% - 7px); + } +} +.grid-col.col2 { + width: calc(16.67% - 14px); + &:first-child { + width: calc(16.67% - 7px); + } + &:last-child { + width: calc(16.67% - 7px); + } +} +.grid-col.col3 { + width: calc(25% - 14px); + &:first-child { + width: calc(25% - 7px); + } + &:last-child { + width: calc(25% - 7px); + } +} +.grid-col.col4 { + width: calc(33.33% - 14px); + &:first-child { + width: calc(33.33% - 7px); + } + &:last-child { + width: calc(33.33% - 7px); + } +} +.grid-col.col5 { + width: calc(41.67% - 14px); + &:first-child { + width: calc(41.67% - 7px); + } + &:last-child { + width: calc(41.67% - 7px); + } +} +.grid-col.col6 { + width: calc(50% - 14px); + &:first-child { + width: calc(50% - 7px); + } + &:last-child { + width: calc(50% - 7px); + } +} +.grid-col.col7 { + width: calc(58.33% - 14px); + &:first-child { + width: calc(58.33% - 7px); + } + &:last-child { + width: calc(58.33% - 7px); + } +} +.grid-col.col8 { + width: calc(66.67% - 14px); + &:first-child { + width: calc(66.67% - 7px); + } + &:last-child { + width: calc(66.67% - 7px); + } +} +.grid-col.col9 { + width: calc(75% - 14px); + &:first-child { + width: calc(75% - 7px); + } + &:last-child { + width: calc(75% - 7px); + } +} +.grid-col.col10 { + width: calc(83.33% - 14px); + &:first-child { + width: calc(83.33% - 7px); + } + &:last-child { + width: calc(83.33% - 7px); + } +} +.grid-col.col11 { + width: calc(91.67% - 14px); + &:first-child { + width: calc(91.67% - 7px); + } + &:last-child { + width: calc(91.67% - 7px); + } +} +.grid-col.col12 { + width: calc(100% - 14px); + &:first-child { + width: calc(100% - 7px); + } + &:last-child { + width: calc(100% - 7px); + } +} +@media all and (max-width: 575px) { + #side_menu_swipe { + display: block; + } + .visible-on-desktop-only { + display: none !important; + } + .headerbar { + height: 56px; + background: rgba(0, 0, 0, 0.15); + flex-wrap: wrap; + align-content: flex-start; + padding-top: 12px; + box-sizing: border-box; + transition: all 0.2s; + } + .headerbar.expand { + height: 154px; + } + .headerbar.expand2 { + height: 118px; + } + #menu_btn { + display: block; + order: 1; + } + #reveal_btn { + display: block; + order: 4; + } + #header_btns { + margin-left: auto; + order: 3; + } + .open_firmware_flasher { + width: 31px; + height: 31px; + margin-left: 15px; + } + .connect_controls { + width: 31px; + height: 31px; + margin-left: 15px; + } + .firmware_b { + margin: 0; + zoom: 0.6; + } + .connect_b { + margin: 0; + zoom: 0.6; + } + #port-picker { + display: none !important; + order: 5; + justify-content: space-between; + margin-top: 15px; + transition: all 0.2s; + } + .header-wrapper { + display: none !important; + order: 5; + zoom: 62%; + justify-content: space-around; + } + .flash_state { + display: none !important; + } + .connect_state { + display: none !important; + } + #port-picker.reveal { + display: flex !important; + width: 100%; + margin-left: 0; + } + #port-override-option { + flex-grow: 1; + } + #portsinput { + flex-grow: 1; + margin-right: 0; + } + #port-override { + width: calc(100% - 40px); + } + .header-wrapper.reveal { + display: flex !important; + width: 100%; + margin-top: 24px; + } + #dataflash_wrapper_global { + margin-right: 0; + } + #sensor-status { + margin-right: 0; + } + #quad-status_wrapper { + margin-right: 0; + } + #log.active { + box-shadow: none; + } + .logswitch { + background-color: #242424; + } + #scrollicon { + display: none; + } + #tab-content-container { + height: calc(100% - 83px); + } + #tab-content-container.logopen { + height: calc(100% - 167px); + } + #tab-content-container.header_expanded { + height: calc(100% - 181px); + } + #tab-content-container.header_expanded2 { + height: calc(100% - 145px); + } + #tab-content-container.logopen.header_expanded { + height: calc(100% - 265px); + } + #tab-content-container.logopen.header_expanded2 { + height: calc(100% - 229px); + } + .tab_container { + position: fixed; + z-index: 2000; + top: 0; + left: -304px; + bottom: 0; + width: 300px; + transition: all 0.3s; + } + .tab_container.reveal { + left: 0; + } + #content { + width: 100%; + } + dialog { + position: fixed; + width: calc(100% - 2em - 2px) !important; + max-width: unset; + height: auto !important; + bottom: 0; + top: 56px; + border-radius: unset; + border: none; + overflow: auto; + } + .toolbar_fixed_bottom { + .content_toolbar.xs-compressed { + padding-left: 60px; + box-sizing: border-box; + height: 50px; + div { + margin-bottom: 10px; + } + } + .content_toolbar.xs-compressed.expanded { + padding-left: 15px; + padding-bottom: 0; + height: auto; + } + .content_toolbar { + justify-content: flex-end; + div { + padding-bottom: 8px; + } + } + } + .toolbar_expand_btn { + display: block; + } + .content_toolbar { + height: auto; + padding: 8px 0 0; + } + .sm { + display: none !important; + } + .md { + display: none !important; + } + .lg { + display: none !important; + } + .xl { + display: none !important; + } + .grid-col.col1 { + width: 100% !important; + margin-left: 0 !important; + margin-right: 0 !important; + } + .grid-col.col2 { + width: 100% !important; + margin-left: 0 !important; + margin-right: 0 !important; + } + .grid-col.col3 { + width: 100% !important; + margin-left: 0 !important; + margin-right: 0 !important; + } + .grid-col.col4 { + width: 100% !important; + margin-left: 0 !important; + margin-right: 0 !important; + } + .grid-col.col5 { + width: 100% !important; + margin-left: 0 !important; + margin-right: 0 !important; + } + .grid-col.col6 { + width: 100% !important; + margin-left: 0 !important; + margin-right: 0 !important; + } + .grid-col.col7 { + width: 100% !important; + margin-left: 0 !important; + margin-right: 0 !important; + } + .grid-col.col8 { + width: 100% !important; + margin-left: 0 !important; + margin-right: 0 !important; + } + .grid-col.col9 { + width: 100% !important; + margin-left: 0 !important; + margin-right: 0 !important; + } + .grid-col.col10 { + width: 100% !important; + margin-left: 0 !important; + margin-right: 0 !important; + } + .grid-col.col11 { + width: 100% !important; + margin-left: 0 !important; + margin-right: 0 !important; + } + .grid-col.col12 { + width: 100% !important; + margin-left: 0 !important; + margin-right: 0 !important; + } +} +@media all and (min-width: 1125px) { + .open_firmware_flasher { + width: 100px; + } + .connect_controls { + width: 100px; + } + .firmware_b { + margin: 0 24px; + } + .connect_b { + margin: 0 24px; + } + #sensor-status { + margin-right: 20px; + } + #dataflash_wrapper_global { + margin-right: 10px; + } + #quad-status_wrapper { + margin-right: 20px; + } +} +@media not all and (max-width: 575px) { + .visible-on-phone-only { + display: none !important; + } +} +@media only screen and (max-height: 750px) { + .tab_container { + overflow-x: hidden; + overflow-y: auto; + } +} +@media only screen and (max-device-height: 750px) { + .tab_container { + overflow-x: hidden; + overflow-y: auto; + } +} +@media only screen and (max-width: 1055px) { + #tabs { + li { + a { + font-weight: normal; + font-size: 12px; + padding-left: 60px; + padding-top: 6px; + padding-bottom: 2px; + content: ""; + text-shadow: none; + transition: none; + text-overflow: clip; + white-space: nowrap; + overflow: hidden; + } + } + } + .tab_container { + width: 42px; + } + #content { + width: calc(100% - 42px); + } + .content_wrapper { + padding: 15px 15px 15px 14px; + } + .tab_title { + font-size: 16px; + line-height: 18px; + font-weight: 300; + margin-bottom: 10px; + height: 22px; + } + .cf_doc_version_bt { + a { + padding: 1px 5px 1px 5px; + margin-top: -35px; + font-size: 9px; + line-height: 15px; + } + } + .cf_table { + td { + padding-top: 2px; + padding-bottom: 2px; + } + } + .default_btn { + margin-bottom: 10px; + } + .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 { + height: calc(100% - 81px); + overflow-y: auto; + position: initial; + } + } +} +@media only screen and (max-device-width: 1055px) { + #tabs { + li { + a { + font-weight: normal; + font-size: 12px; + padding-left: 60px; + padding-top: 6px; + padding-bottom: 2px; + content: ""; + text-shadow: none; + transition: none; + text-overflow: clip; + white-space: nowrap; + overflow: hidden; + } + } + } + .tab_container { + width: 42px; + } + #content { + width: calc(100% - 42px); + } + .content_wrapper { + padding: 15px 15px 15px 14px; + } + .tab_title { + font-size: 16px; + line-height: 18px; + font-weight: 300; + margin-bottom: 10px; + height: 22px; + } + .cf_doc_version_bt { + a { + padding: 1px 5px 1px 5px; + margin-top: -35px; + font-size: 9px; + line-height: 15px; + } + } + .cf_table { + td { + padding-top: 2px; + padding-bottom: 2px; + } + } + .default_btn { + margin-bottom: 10px; + } + .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 { + height: calc(100% - 81px); + overflow-y: auto; + position: initial; + } + } +} +@media all and (min-width: 576px) and (max-width: 767px) { + .xs { + display: none !important; + } + .md { + display: none !important; + } + .lg { + display: none !important; + } + .xl { + display: none !important; + } +} +@media all and (min-width: 768px) and (max-width: 991px) { + .xs { + display: none !important; + } + .sm { + display: none !important; + } + .lg { + display: none !important; + } + .xl { + display: none !important; + } +} +@media all and (min-width: 992px) and (max-width: 1139px) { + .xs { + display: none !important; + } + .sm { + display: none !important; + } + .md { + display: none !important; + } + .xl { + display: none !important; + } +} +@media all and (min-width: 1140px) { + .xs { + display: none !important; + } + .sm { + display: none !important; + } + .md { + display: none !important; + } + .lg { + display: none !important; + } +} +@media all and (min-width: 576px) { + .sm-max { + display: none !important; + } +} +@media all and (min-width: 768px) { + .md-max { + display: none !important; + } +} +@media all and (min-width: 992px) { + .lg-max { + display: none !important; + } +} +@media all and (max-width: 1139px) { + .lg-min { + display: none !important; + } +} +@media all and (max-width: 991px) { + .md-min { + display: none !important; + } +} +@media all and (max-width: 767px) { + .sm-min { + display: none !important; + } +} diff --git a/src/css/main_cordova.css b/src/css/main_cordova.css deleted file mode 100644 index 4b83daf6..00000000 --- a/src/css/main_cordova.css +++ /dev/null @@ -1,102 +0,0 @@ -* { - box-sizing: border-box; - margin: 0; - padding: 0; -} -html, body, #loading, #webview_troubleshooting { - width: 100%; - height: 100%; -} -body { - display: flex; - flex-direction: column; - font-family: 'Open Sans', 'Segoe UI', Tahoma, sans-serif; - font-size: 12px; - color: #303030; - background-color: #3d3f3e; -} -#headerbar { - display: flex; - align-items: center; - justify-content: center; - height: 56px; - padding: 0 20px; - background: rgba(0, 0, 0, 0.15); -} -#headerbar img { - height: 20px; -} -#loading { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - background: #ffffff; -} -#loading p { - font-weight: bold; - margin-top: 20px; -} -#webview_troubleshooting { - display: none; - background: #ffffff; - padding: 20px; -} -#webview_apps { - list-style: inside; -} -#webview_step_btn1, #webview_step_btn2 { - margin-top: 10px; -} -#webview_step_btn2 { - display: none; -} -.box { - border: 1px solid #ccc; - border-radius: 4px; - width: 100%; - margin-bottom: 20px; - background-color: #f9f9f9; - overflow: hidden; -} -.box .box_titlebar { - width: 100%; - background-color: #828885; - color: #ffffff; - font-size: 13px; - height: 27px; - line-height: 27px; - font-weight: 600; - padding: 0 10px; -} -.box .box_titlebar.warning { - background-color: #ffbb00; -} -.box .box_body { - padding: 10px; -} -.divider { - margin: 10px 0 9px 0; - border-top: 1px solid #ccc; -} -.btn { - padding: 5px; - text-align: center; - background-color: #ffbb00; - border-radius: 4px; - border: 1px solid #dba718; - color: #ffffff; - font-weight: 600; - font-size: 12px; - line-height: 13px; - transition: all ease 0.2s; -} -.btn:hover { - background-color: #ffcc3f; - text-shadow: 0 1px rgba(255, 255, 255, 0.25); -} -.btn:focus { - outline: none; - background-color: #ffcc3f; - box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35); -} diff --git a/src/css/main_cordova.less b/src/css/main_cordova.less new file mode 100644 index 00000000..0afb17ca --- /dev/null +++ b/src/css/main_cordova.less @@ -0,0 +1,109 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} +html { + width: 100%; + height: 100%; +} +body { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + font-family: 'Open Sans', 'Segoe UI', Tahoma, sans-serif; + font-size: 12px; + color: #303030; + background-color: #3d3f3e; +} +#loading { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: #ffffff; + p { + font-weight: bold; + margin-top: 20px; + } +} +#webview_troubleshooting { + width: 100%; + height: 100%; + display: none; + background: #ffffff; + padding: 20px; +} +#headerbar { + display: flex; + align-items: center; + justify-content: center; + height: 56px; + padding: 0 20px; + background: rgba(0, 0, 0, 0.15); + img { + height: 20px; + } +} +#webview_apps { + list-style: inside; +} +#webview_step_btn1 { + margin-top: 10px; +} +#webview_step_btn2 { + margin-top: 10px; + display: none; +} +.box { + border: 1px solid #ccc; + border-radius: 4px; + width: 100%; + margin-bottom: 20px; + background-color: #f9f9f9; + overflow: hidden; + .box_titlebar { + width: 100%; + background-color: #828885; + color: #ffffff; + font-size: 13px; + height: 27px; + line-height: 27px; + font-weight: 600; + padding: 0 10px; + } + .box_titlebar.warning { + background-color: #ffbb00; + } + .box_body { + padding: 10px; + } +} +.divider { + margin: 10px 0 9px 0; + border-top: 1px solid #ccc; +} +.btn { + padding: 5px; + text-align: center; + background-color: #ffbb00; + border-radius: 4px; + border: 1px solid #dba718; + color: #ffffff; + font-weight: 600; + font-size: 12px; + line-height: 13px; + transition: all ease 0.2s; + &:hover { + background-color: #ffcc3f; + text-shadow: 0 1px rgba(255, 255, 255, 0.25); + } + &:focus { + outline: none; + background-color: #ffcc3f; + box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35); + } +} diff --git a/src/css/select2_custom.css b/src/css/select2_custom.css deleted file mode 100644 index 5626a472..00000000 --- a/src/css/select2_custom.css +++ /dev/null @@ -1,40 +0,0 @@ -/* Select 2 replacement styles */ -.select2 { - font-family: Arial, Helvetica, sans-serif; - font-weight: 400; - font-size: 13.3333px; -} - -.select2-selection__rendered { - line-height: 18px !important; - padding-left: 4px !important; - color: var(--defaultText) !important; - border-radius: 2px !important; -} - -.select2-container .select2-selection--single { - height: 20px !important; - border-radius: 3px !important; - border: 1px solid var(--subtleAccent) !important; - cursor: default !important; -} - -.select2-selection__arrow { - height: 19px !important; - top: 0 !important; -} -.select2-selection__arrow b { - height: 5px !important; - width: 5px !important; - margin-left: -2px !important; - margin-top: -5px !important; - border: none !important; - border-bottom: 1.5px solid black !important; - border-right: 1.5px solid black !important; - transform: rotateZ(45deg); -} -.select2-dropdown { - border: 0.5px solid var(--subtleAccent) !important; - border-top: none !important; - border-radius: 2px !important; -} diff --git a/src/css/select2_custom.less b/src/css/select2_custom.less new file mode 100644 index 00000000..0fc39e59 --- /dev/null +++ b/src/css/select2_custom.less @@ -0,0 +1,39 @@ +/* Select 2 replacement styles */ +.select2 { + font-family: Arial, Helvetica, sans-serif; + font-weight: 400; + font-size: 13.3333px; +} +.select2-selection__rendered { + line-height: 18px !important; + padding-left: 4px !important; + color: var(--defaultText) !important; + border-radius: 2px !important; +} +.select2-container { + .select2-selection--single { + height: 20px !important; + border-radius: 3px !important; + border: 1px solid var(--subtleAccent) !important; + cursor: default !important; + } +} +.select2-selection__arrow { + height: 19px !important; + top: 0 !important; + b { + height: 5px !important; + width: 5px !important; + margin-left: -2px !important; + margin-top: -5px !important; + border: none !important; + border-bottom: 1.5px solid black !important; + border-right: 1.5px solid black !important; + transform: rotateZ(45deg); + } +} +.select2-dropdown { + border: 0.5px solid var(--subtleAccent) !important; + border-top: none !important; + border-radius: 2px !important; +} diff --git a/src/css/switchery_custom.css b/src/css/switchery_custom.css deleted file mode 100644 index d7fe6cd8..00000000 --- a/src/css/switchery_custom.css +++ /dev/null @@ -1,67 +0,0 @@ -.switchery { - height: 14px; - width: 45px; - z-index:1000; - opacity:1 !important; - -moz-user-select: none; - -khtml-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - box-sizing: content-box; - background-clip: content-box; -} - -.switchery > small { - height: 14px; - width: 14px; -} - -.switcherymid { - background-color: #fff; - border: 1px solid #fff; - border-radius: 20px; - cursor: pointer; - display: inline-block; - height: 14px; - position: relative; - vertical-align: middle; - width: 35px; - -moz-user-select: none; - -khtml-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - box-sizing: content-box; - background-clip: content-box; -} - -.switcherymid > small { - background: #fff; - border-radius: 100%; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); - height: 14px; - position: absolute; - top: 0; - width: 14px; -} - -/* Switchery sizes. */ - -.switchery-small { - border: none !important; - height: 10px; - width: 20px; - margin-top:-3px; - margin-right:3px; -} - -.switchery-small > small { - height: 10px; - width: 10px; -} - -.switchery-disabled { - pointer-events: none; - opacity: 0.3; -} diff --git a/src/css/switchery_custom.less b/src/css/switchery_custom.less new file mode 100644 index 00000000..385d7fe4 --- /dev/null +++ b/src/css/switchery_custom.less @@ -0,0 +1,60 @@ +/* Switchery sizes. */ +.switchery { + height: 14px; + width: 45px; + z-index: 1000; + opacity: 1 !important; + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + box-sizing: content-box; + background-clip: content-box; + >small { + height: 14px; + width: 14px; + } +} +.switcherymid { + background-color: #fff; + border: 1px solid #fff; + border-radius: 20px; + cursor: pointer; + display: inline-block; + height: 14px; + position: relative; + vertical-align: middle; + width: 35px; + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + box-sizing: content-box; + background-clip: content-box; + >small { + background: #fff; + border-radius: 100%; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); + height: 14px; + position: absolute; + top: 0; + width: 14px; + } +} +.switchery-small { + border: none !important; + height: 10px; + width: 20px; + margin-top: -3px; + margin-right: 3px; + >small { + height: 10px; + width: 10px; + } +} +.switchery-disabled { + pointer-events: none; + opacity: 0.3; +} diff --git a/src/css/tabs/adjustments.css b/src/css/tabs/adjustments.css deleted file mode 100644 index e5edbf9f..00000000 --- a/src/css/tabs/adjustments.css +++ /dev/null @@ -1,120 +0,0 @@ -#tab-adjustments-templates { - display: none; -} - -.tab-adjustments .range .marker, .tab-adjustments .channel-slider .noUi-connect { - background: var(--accent); -} - -.noUi-target { - border-radius: 4px; -} - -.tab-adjustments .adjustments { - width: 100%; - border-spacing: 0px; - background-color: #e4e4e4; -} - -.tab-adjustments td { - border-top: 1px solid #fff; - border-bottom: 1px solid var(--subtleAccent); -} - -.tab-adjustments .range:first-child { - border-top: 0px; -} - -.tab-adjustments .range:last-child { - border-bottom: 0px; -} - -.tab-adjustments .adjustments thead td { - text-align: center; - white-space: nowrap; - padding: 10px 10px; - background-color: var(--quietHeader); - color: var(--quietText); -} - -.tab-adjustments .adjustments thead td:first-child { - border-top-left-radius: 5px; -} - -.tab-adjustments .adjustments thead td:last-child { - border-top-right-radius: 5px; -} - -.tab-adjustments .adjustment:nth-child(odd) { - background-color: #f4f4f4; -} - -.tab-adjustments .adjustment select { - /* outline: 1px solid silver; */ - border-radius: 3px; - border: 1px solid var(--subtleAccent); -} - -.tab-adjustments .adjustment td { - text-align: center; -} - -.tab-adjustments .adjustment .info { - width: 5%; - height: 80px; -} - -.tab-adjustments .adjustment .info .enabling { - white-space: nowrap; -} - -.tab-adjustments .adjustment .channelInfo { - width: 5%; - padding: 0px 10px; -} - -.tab-adjustments .adjustment .channelInfo .limits { - padding: 5px 0px; -} - -.tab-adjustments .adjustment .range { - width: 65%; - padding: 0px 20px; -} - -.tab-adjustments .adjustment .range .channel-slider { - margin-top: -28px; -} - -.tab-adjustments .adjustment .range .marker { - position: absolute; - left: 50%; - top: 27px; - height: 13px; - width: 6px; - margin-left: -3px; - border-radius: 3px; - z-index: 1000; -} - -.tab-adjustments .adjustment .functionSelection { - width: 5%; -} - -.tab-adjustments .adjustment .adjustmentSlot { - width: 5%; -} - -.tab-adjustments .adjustment .functionSwitchChannel { - width: 5%; -} - -@media all and (max-width: 575px) { - .tab-adjustments .overflow { - overflow: auto; - } - - .tab-adjustments .range { - min-width: 300px; - } -} diff --git a/src/css/tabs/adjustments.less b/src/css/tabs/adjustments.less new file mode 100644 index 00000000..927b42d6 --- /dev/null +++ b/src/css/tabs/adjustments.less @@ -0,0 +1,110 @@ +#tab-adjustments-templates { + display: none; +} +.tab-adjustments { + .range { + .marker { + background: var(--accent); + } + &:first-child { + border-top: 0px; + } + &:last-child { + border-bottom: 0px; + } + } + .channel-slider { + .noUi-connect { + background: var(--accent); + } + } + .adjustments { + width: 100%; + border-spacing: 0px; + background-color: #e4e4e4; + thead { + td { + text-align: center; + white-space: nowrap; + padding: 10px 10px; + background-color: var(--quietHeader); + color: var(--quietText); + &:first-child { + border-top-left-radius: 5px; + } + &:last-child { + border-top-right-radius: 5px; + } + } + } + } + td { + border-top: 1px solid #fff; + border-bottom: 1px solid var(--subtleAccent); + } + .adjustment { + &:nth-child(odd) { + background-color: #f4f4f4; + } + select { + border-radius: 3px; + border: 1px solid var(--subtleAccent); + } + td { + text-align: center; + } + .info { + width: 5%; + height: 80px; + .enabling { + white-space: nowrap; + } + } + .channelInfo { + width: 5%; + padding: 0px 10px; + .limits { + padding: 5px 0px; + } + } + .range { + width: 65%; + padding: 0px 20px; + .channel-slider { + margin-top: -28px; + } + .marker { + position: absolute; + left: 50%; + top: 27px; + height: 13px; + width: 6px; + margin-left: -3px; + border-radius: 3px; + z-index: 1000; + } + } + .functionSelection { + width: 5%; + } + .adjustmentSlot { + width: 5%; + } + .functionSwitchChannel { + width: 5%; + } + } +} +.noUi-target { + border-radius: 4px; +} +@media all and (max-width: 575px) { + .tab-adjustments { + .overflow { + overflow: auto; + } + .range { + min-width: 300px; + } + } +} diff --git a/src/css/tabs/auxiliary.css b/src/css/tabs/auxiliary.css deleted file mode 100644 index 894648ff..00000000 --- a/src/css/tabs/auxiliary.css +++ /dev/null @@ -1,324 +0,0 @@ -.tab-auxiliary { - float: left; - width: 100%; -} - -.tab-auxiliary .help { - padding: 10px; - background-color: #ffcb18; - margin-bottom: 10px; -} - -.tab-auxiliary .toolbox { - font-weight: bold; - color: rgb(105, 99, 99); - padding: 10px 5px; -} - -.tab-auxiliary .range .marker, .tab-auxiliary .channel-slider .noUi-connect { - background: var(--accent); - border-radius: 3px; -} - -.tab-auxiliary .mode.on .info { - background: var(--accent); - color: black; -} - -.tab-auxiliary .mode.on:nth-child(odd) .info { - background: var(--accent); -} - -.tab-auxiliary .mode.off .info { - background: #828885; - color: white; -} - -.tab-auxiliary .mode.off:nth-child(odd) .info { - background: #828885; -} - -.tab-auxiliary .mode.disabled .info { - background: var(--error); - color: var(--quietText);} - -.tab-auxiliary .mode.disabled:nth-child(odd) .info { - background: var(--error); -} - -#tab-auxiliary-templates { - display: none; -} - -.tab-auxiliary .modes { - width: 100%; -} - -.tab-auxiliary .mode { - background-color: #f9f9f9; - vertical-align: top; - display: flex; -} - -.tab-auxiliary .mode .name { - min-height: 80px; - padding: 5px 0; -} - -.tab-auxiliary .mode .info { - text-align: center; - width: 10%; - white-space: nowrap; - position: relative; - background-color: #e4e4e4; - border-bottom: 5px solid white; - color: grey; -} - -.tab-auxiliary .mode .info .name { - font-weight: bold; - font-size: 1.0em; -} - -.tab-auxiliary .mode .info .buttons { - position: absolute; - bottom: 0; - width: 100%; -} - -.tab-auxiliary .mode .info .buttons a { - padding: 2px 5px; - border-radius: 4px; - cursor: pointer; - margin: 3px; - display: block; -} - -.tab-auxiliary .mode .info .buttons a:hover { - background-color: darkgrey; -} - -.tab-auxiliary .ranges { - padding-right: 0; - border-bottom: 5px solid white; - width: 90%; - max-width: calc(100% - 140px); -} - -.tab-auxiliary .range { - position: relative; - height: 70px; - padding-top: 15px; - padding-left: 0; - border-top: 1px solid #fff; - border-bottom: 1px solid var(--subtleAccent); - background-color: #ececec; - padding-bottom: 5px; -} - -.tab-auxiliary .link { - position: relative; - height: 70px; - padding-top: 15px; - padding-left: 15px; - border-top: 1px solid #fff; - border-bottom: 1px solid var(--subtleAccent); - background-color: #ececec; - padding-bottom: 5px; -} - -.tab-auxiliary .range:first-child { - border-top: 0; -} - -.tab-auxiliary .range:last-child { - border-bottom: 0; -} - -.tab-auxiliary .link:first-child { - border-top: 0; -} - -.tab-auxiliary .link:last-child { - border-bottom: 0; -} - -.tab-auxiliary .range>.buttons { - position: absolute; - top: 0; - right: 0; -} - -.tab-auxiliary .range>.buttons .a { - padding: 2px; -} - -.tab-auxiliary .mode .range .channelInfo { - float: left; - min-width: 90px; - text-align: center; - margin-top: -4px; - margin-left: 5px; -} - -.tab-auxiliary .range .channel { - border: 1px solid var(--subtleAccent); - border-radius: 3px; - margin-bottom: 3px; -} - -.tab-auxiliary .logic { - border: 1px solid var(--subtleAccent); - border-radius: 3px; -} - -.tab-auxiliary .range .marker { - position: absolute; - left: 50%; - top: 27px; - height: 13px; - width: 6px; - margin-left: -3px; - z-index: 1000; -} - -.tab-auxiliary .range .channel-slider { - float: left; - width: 77%; - margin-left: 20px; - margin-top: -4px; -} - -.tab-auxiliary .mode .link .modeInfo { - float: left; -} - -.tab-auxiliary .link .linkedTo { - border: 1px solid var(--subtleAccent); - border-radius: 3px; - margin-bottom: 3px; -} - -.tab-auxiliary>.buttons { - margin-top: 10px; -} - -.tab-auxiliary>.buttons a { - float: right; - height: 28px; - line-height: 28px; - padding: 0 15px 0 15px; - display: block; - color: #000; -} - -.tab-auxiliary .buttons a { - text-align: center; - font-weight: bold; - background-color: #fff; - color: black; - opacity: 0.8; - transition: all ease 0.3s; -} - -.tab-auxiliary .buttons a:hover { - background-color: #fff; - opacity: 1.0; - color: black; - transition: all ease 0.3s; -} - -.tab-auxiliary .delete a { - height: 15px; - width: 15px; - transition: all ease 0.3s; - opacity: 0.3; - position: relative; - float: right; - margin-right: 5px; - margin-top: -9px; - background-image: url('../../images/icons/close1.svg'); - background-repeat: no-repeat; - background-position: center 100%; - display: block; -} - -.tab-auxiliary .delete a:hover { - transition: all ease 0.3s; - opacity: 0.6; -} - -.tab-auxiliary .fixed_band { - bottom: 0; -} - -.tab-auxiliary .save_btn a { - line-height: 28px; -} - -@media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) { - .tab-auxiliary .fixed_band { - width: calc(100% - -30px); - margin: 0 0 0 -15px; - } - .tab-auxiliary .fixed_band .save_btn a { - margin-right: 15px; - } -} - -@media all and (max-width: 575px) { - .tab-auxiliary .mode { - flex-wrap: wrap; - } - .tab-auxiliary .mode .info { - width: 100%; - border-bottom: 0; - } - .tab-auxiliary .mode .info .name { - text-align: left; - padding-left: 10px; - min-height: auto; - } - .tab-auxiliary .mode .info .buttons { - right: 0; - width: auto; - display: flex; - } - .tab-auxiliary .mode .ranges { - width: 100%; - max-width: 100%; - } - .tab-auxiliary .range { - display: flex; - height: auto; - flex-wrap: wrap; - } - .tab-auxiliary .mode .range .channelInfo { - display: flex; - margin: 0 10px; - width: 100%; - flex-wrap: wrap; - } - .tab-auxiliary .limits { - width: 100%; - justify-content: space-between; - display: flex; - } - .tab-auxiliary .range .channel-slider { - width: 100%; - margin: 10px 10px 45px 10px; - } - .tab-auxiliary .delete a { - margin-top: 15px; - margin-right: 10px; - position: absolute; - float: none; - top: 0; - right: 0; - } - .tab-auxiliary .link { - height: auto; - display: flex; - padding-bottom: 10px; - } -} diff --git a/src/css/tabs/auxiliary.less b/src/css/tabs/auxiliary.less new file mode 100644 index 00000000..c00095e6 --- /dev/null +++ b/src/css/tabs/auxiliary.less @@ -0,0 +1,330 @@ +.tab-auxiliary { + float: left; + width: 100%; + .help { + padding: 10px; + background-color: #ffcb18; + margin-bottom: 10px; + } + .toolbox { + font-weight: bold; + color: rgb(105, 99, 99); + padding: 10px 5px; + } + .range { + .marker { + background: var(--accent); + border-radius: 3px; + position: absolute; + left: 50%; + top: 27px; + height: 13px; + width: 6px; + margin-left: -3px; + z-index: 1000; + } + position: relative; + height: 70px; + padding-top: 15px; + padding-left: 0; + border-top: 1px solid #fff; + border-bottom: 1px solid var(--subtleAccent); + background-color: #ececec; + padding-bottom: 5px; + &:first-child { + border-top: 0; + } + &:last-child { + border-bottom: 0; + } + >.buttons { + position: absolute; + top: 0; + right: 0; + .a { + padding: 2px; + } + } + .channel { + border: 1px solid var(--subtleAccent); + border-radius: 3px; + margin-bottom: 3px; + } + .channel-slider { + float: left; + width: 77%; + margin-left: 20px; + margin-top: -4px; + } + } + .channel-slider { + .noUi-connect { + background: var(--accent); + border-radius: 3px; + } + } + .mode.on { + .info { + background: var(--accent); + color: black; + } + &:nth-child(odd) { + .info { + background: var(--accent); + } + } + } + .mode.off { + .info { + background: #828885; + color: white; + } + &:nth-child(odd) { + .info { + background: #828885; + } + } + } + .mode.disabled { + .info { + background: var(--error); + color: var(--quietText); + } + &:nth-child(odd) { + .info { + background: var(--error); + } + } + } + .modes { + width: 100%; + } + .mode { + background-color: #f9f9f9; + vertical-align: top; + display: flex; + .name { + min-height: 80px; + padding: 5px 0; + } + .info { + text-align: center; + width: 10%; + white-space: nowrap; + position: relative; + background-color: #e4e4e4; + border-bottom: 5px solid white; + color: grey; + .name { + font-weight: bold; + font-size: 1.0em; + } + .buttons { + position: absolute; + bottom: 0; + width: 100%; + a { + padding: 2px 5px; + border-radius: 4px; + cursor: pointer; + margin: 3px; + display: block; + &:hover { + background-color: darkgrey; + } + } + } + } + .range { + .channelInfo { + float: left; + min-width: 90px; + text-align: center; + margin-top: -4px; + margin-left: 5px; + } + } + .link { + .modeInfo { + float: left; + } + } + } + .ranges { + padding-right: 0; + border-bottom: 5px solid white; + width: 90%; + max-width: calc(100% - 140px); + } + .link { + position: relative; + height: 70px; + padding-top: 15px; + padding-left: 15px; + border-top: 1px solid #fff; + border-bottom: 1px solid var(--subtleAccent); + background-color: #ececec; + padding-bottom: 5px; + &:first-child { + border-top: 0; + } + &:last-child { + border-bottom: 0; + } + .linkedTo { + border: 1px solid var(--subtleAccent); + border-radius: 3px; + margin-bottom: 3px; + } + } + .logic { + border: 1px solid var(--subtleAccent); + border-radius: 3px; + } + >.buttons { + margin-top: 10px; + a { + float: right; + height: 28px; + line-height: 28px; + padding: 0 15px 0 15px; + display: block; + color: #000; + } + } + .buttons { + a { + text-align: center; + font-weight: bold; + background-color: #fff; + color: black; + opacity: 0.8; + transition: all ease 0.3s; + &:hover { + background-color: #fff; + opacity: 1.0; + color: black; + transition: all ease 0.3s; + } + } + } + .delete { + a { + height: 15px; + width: 15px; + transition: all ease 0.3s; + opacity: 0.3; + position: relative; + float: right; + margin-right: 5px; + margin-top: -9px; + background-image: url('../../images/icons/close1.svg'); + background-repeat: no-repeat; + background-position: center 100%; + display: block; + &:hover { + transition: all ease 0.3s; + opacity: 0.6; + } + } + } + .fixed_band { + bottom: 0; + } + .save_btn { + a { + line-height: 28px; + } + } +} +#tab-auxiliary-templates { + display: none; +} +@media only screen and (max-width: 1055px) { + .tab-auxiliary { + .fixed_band { + width: calc(100% - -30px); + margin: 0 0 0 -15px; + .save_btn { + a { + margin-right: 15px; + } + } + } + } +} +@media only screen and (max-device-width: 1055px) { + .tab-auxiliary { + .fixed_band { + width: calc(100% - -30px); + margin: 0 0 0 -15px; + .save_btn { + a { + margin-right: 15px; + } + } + } + } +} +@media all and (max-width: 575px) { + .tab-auxiliary { + .mode { + flex-wrap: wrap; + .info { + width: 100%; + border-bottom: 0; + .name { + text-align: left; + padding-left: 10px; + min-height: auto; + } + .buttons { + right: 0; + width: auto; + display: flex; + } + } + .ranges { + width: 100%; + max-width: 100%; + } + .range { + .channelInfo { + display: flex; + margin: 0 10px; + width: 100%; + flex-wrap: wrap; + } + } + } + .range { + display: flex; + height: auto; + flex-wrap: wrap; + .channel-slider { + width: 100%; + margin: 10px 10px 45px 10px; + } + } + .limits { + width: 100%; + justify-content: space-between; + display: flex; + } + .delete { + a { + margin-top: 15px; + margin-right: 10px; + position: absolute; + float: none; + top: 0; + right: 0; + } + } + .link { + height: auto; + display: flex; + padding-bottom: 10px; + } + } +} diff --git a/src/css/tabs/cli.css b/src/css/tabs/cli.css deleted file mode 100644 index 04ded8ee..00000000 --- a/src/css/tabs/cli.css +++ /dev/null @@ -1,153 +0,0 @@ -.tab-cli { - height: 100%; -} - -.tab-cli .content_wrapper { - flex-direction: column; - display: flex; - overflow-x: hidden; - overflow-y: hidden; -} - -.tab-cli p { - padding: 0; - border: 0 dotted var(--subtleAccent); -} - -.tab-cli .backdrop { - border: 1px solid var(--subtleAccent); - background-color: rgba(0, 0, 0, 0.75); - margin-top: 0; - flex-grow: 1; - background-image: url("../../images/light-wide-1.svg"); - background-repeat: no-repeat; - background-position: 50% 80%; - background-size: 600px; - border-radius: 5px; - box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.80); - width: 100%; -} - -.tab-cli .window { - height: 100%; - width: 100%; - padding: 5px; - overflow-y: scroll; - overflow-x: hidden; - font-family: monospace; - color: white; - box-sizing: border-box; - float: left; -} - - -.tab-cli .window .wrapper, .tab-cli .window .wrapper > * { - user-select: text; -} - -.tab-cli textarea[name='commands'] { - -webkit-box-sizing: border-box; - width: 100%; - margin-top: 8px; - height: 22px; - line-height: 20px; - padding-left: 5px; - border: 1px solid var(--subtleAccent); - resize: none; -} - -.jBox-container textarea#preview { - background-color: rgba(0, 0, 0, 0.75); - width: 100%; - resize: none; - overflow-y: scroll; - overflow-x: hidden; - font-family: monospace; - color: white; - padding: 5px; - margin-bottom: 5px; -} - -.tab-cli #content-watermark { - z-index: 0; -} - -.tab-cli .window .wrapper { - white-space: pre-wrap; - height: 0px; -} - -.tab-cli .window .error_message { - color: red; - font-weight: bold; -} - -.tab-cli .save { - color: white; -} - -@media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) { - -.tab-cli .content_wrapper { - height: calc(100% - 87px); -} -.tab-cli .content_toolbar { - margin-top: 5px; -} - -} - - -/* AutoComplete */ -.cli-textcomplete-dropdown { - border: 1px solid var(--subtleAccent); - background-color: white; - border-radius: 5px; - max-height: 50%; - overflow: auto; - list-style: none; - padding: 0; - margin: 0; -} - -.cli-textcomplete-dropdown::-webkit-scrollbar { - width: 6px; -} - -.cli-textcomplete-dropdown::-webkit-scrollbar-track { - background: lightgrey; - border-radius: 3px; -} - -.cli-textcomplete-dropdown::-webkit-scrollbar-thumb { - background: grey; - border-radius: 3px; -} - -.cli-textcomplete-dropdown li { - padding: 2px 5px; -} - -.cli-textcomplete-dropdown .active { - background-color: rgb(255, 187, 0); -} - -.cli-textcomplete-dropdown a:hover { - cursor: pointer; -} - -.cli-textcomplete-dropdown a { - font-family: monospace; -} - -.cli-textcomplete-dropdown a b { - font-family: monospace; - font-weight: bold; -} -/* End AutoComplete */ - -@media all and (max-width: 575px) { - .tab-cli .backdrop { - background-size: 100%; - } -} diff --git a/src/css/tabs/cli.less b/src/css/tabs/cli.less new file mode 100644 index 00000000..bceadc13 --- /dev/null +++ b/src/css/tabs/cli.less @@ -0,0 +1,142 @@ +.tab-cli { + height: 100%; + .content_wrapper { + flex-direction: column; + display: flex; + overflow-x: hidden; + overflow-y: hidden; + } + p { + padding: 0; + border: 0 dotted var(--subtleAccent); + } + .backdrop { + border: 1px solid var(--subtleAccent); + background-color: rgba(0, 0, 0, 0.75); + margin-top: 0; + flex-grow: 1; + background-image: url("../../images/light-wide-1.svg"); + background-repeat: no-repeat; + background-position: 50% 80%; + background-size: 600px; + border-radius: 5px; + box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.80); + width: 100%; + } + .window { + height: 100%; + width: 100%; + padding: 5px; + overflow-y: scroll; + overflow-x: hidden; + font-family: monospace; + color: white; + box-sizing: border-box; + float: left; + .wrapper { + user-select: text; + white-space: pre-wrap; + height: 0px; + >* { + user-select: text; + } + } + .error_message { + color: red; + font-weight: bold; + } + } + textarea[name='commands'] { + -webkit-box-sizing: border-box; + width: 100%; + margin-top: 8px; + height: 22px; + line-height: 20px; + padding-left: 5px; + border: 1px solid var(--subtleAccent); + resize: none; + } + #content-watermark { + z-index: 0; + } + .save { + color: white; + } +} +.jBox-container { + textarea#preview { + background-color: rgba(0, 0, 0, 0.75); + width: 100%; + resize: none; + overflow-y: scroll; + overflow-x: hidden; + font-family: monospace; + color: white; + padding: 5px; + margin-bottom: 5px; + } +} +.cli-textcomplete-dropdown { + border: 1px solid var(--subtleAccent); + background-color: white; + border-radius: 5px; + max-height: 50%; + overflow: auto; + list-style: none; + padding: 0; + margin: 0; + &::-webkit-scrollbar { + width: 6px; + } + &::-webkit-scrollbar-track { + background: lightgrey; + border-radius: 3px; + } + &::-webkit-scrollbar-thumb { + background: grey; + border-radius: 3px; + } + li { + padding: 2px 5px; + } + .active { + background-color: rgb(255, 187, 0); + } + a { + &:hover { + cursor: pointer; + } + font-family: monospace; + b { + font-family: monospace; + font-weight: bold; + } + } +} +@media only screen and (max-width: 1055px) { + .tab-cli { + .content_wrapper { + height: calc(100% - 87px); + } + .content_toolbar { + margin-top: 5px; + } + } +} +@media only screen and (max-device-width: 1055px) { + .tab-cli { + .content_wrapper { + height: calc(100% - 87px); + } + .content_toolbar { + margin-top: 5px; + } + } +} +@media all and (max-width: 575px) { + .tab-cli { + .backdrop { + background-size: 100%; + } + } +} diff --git a/src/css/tabs/configuration.css b/src/css/tabs/configuration.css deleted file mode 100644 index cf95df6f..00000000 --- a/src/css/tabs/configuration.css +++ /dev/null @@ -1,332 +0,0 @@ -.tab-configuration .ui-grid-col { - margin-bottom: 0; -} - -.tab-configuration input, -.tab-configuration select { - border: 1px solid var(--subtleAccent); - width: 230px; - height: 20px; - float: left; - margin-right: 15px; - border-radius: 3px; -} - -.tab-configuration table { - margin-bottom: 0; - width: 100%; - float: left; -} - -.tab-configuration table, .tab-configuration table th, .tab-configuration table td { - padding: 0; - text-align: left; -} - -.tab-configuration table th { - padding: 3px; - border-bottom: 1px solid var(--subtleAccent); -} - -.tab-configuration table td { - padding: 5px 3px; - border-bottom: 1px solid var(--subtleAccent); -} - -.tab-configuration table tr td:first-child { - text-align: left; - width: 55px; -} - -.tab-configuration table thead tr:first-child { - background-color: #ececec; -} - -.tab-configuration { - position: relative; -} - -.tab-configuration .groupTitle { - padding: 0 0 5px 0; - margin: 0 0 10px 0; - font-size: 16px; - border-bottom: 1px solid var(--subtleAccent); -} - -.tab-configuration .featuresMultiple { - border-collapse: collapse; - margin-bottom: 5px; - margin-top: -5px; - padding: 0; -} - -.tab-configuration dl.features dt { - float: left; - width: 10px; - height: 18px; - line-height: 18px; -} - -.tab-configuration dl.features dt input { - margin-top: 2px; -} - -.tab-configuration dl.features dd { - margin: 0 0 0 20px; - height: 18px; - line-height: 18px; -} - -.tab-configuration .number input { - width: 55px; - padding-left: 3px; - height: 20px; - line-height: 20px; - text-align: left; - border-radius: 3px; - margin-right: 11px; - font-size: 12px; - font-weight: normal; -} - -.tab-configuration .number .disabled { - width: 48px; - padding: 0 5px; - background-color: #ececec; -} - -.tab-configuration .number span { - margin-left: 0; -} - -.tab-configuration .gps .line { - clear: left; -} - -.tab-configuration .gps select { - float: left; - width: 100px; - height: 20px; - margin: 0 10px 5px 0; - border: 1px solid var(--subtleAccent); -} - -.tab-configuration .gps .select > div:first-child { - float: left; - height: 20px; - margin-right: 15px; - margin-left: 3px; -} - -.tab-configuration .gps span { - line-height: 20px; -} - -.tab-configuration .freelabel { - margin-left: 10px; - position: relative; -} - -.tab-configuration input { - float: left; -} - -.tab-configuration span { - margin: 0; -} - -.tab-configuration .spacer_box { - padding-bottom: 10px; - float: left; - width: calc(100% - 20px); -} - -.tab-configuration .number, -.tab-configuration .select -{ - margin-bottom: 5px; - clear: left; - padding-bottom: 5px; - border-bottom: 1px solid var(--subtleAccent); - width: 100%; - float: left; -} - -.tab-configuration .board_align_inputs, -.tab-configuration .gyro_alignment_inputs { - margin-bottom: 5px; - padding-bottom: 5px; - width: 33.3%; - float: left; - white-space: nowrap; -} - -.tab-configuration .board_align_inputs input { - width: 3.5em; - height: 20px; - line-height: 20px; - padding-left: 3px; -} - -.tab-configuration .board_align_inputs label, -.tab-configuration .gyro_alignment_inputs label { - display: block; - overflow: hidden; - text-overflow: ellipsis; -} - -.tab-configuration .number:last-child, -.tab-configuration .select:last-child { - border-bottom: none; - padding-bottom: 0; - margin-bottom: 0; -} - -.tab-configuration .gui_box_titlebar { - margin-bottom: 0; -} - -.tab-configuration .numberspacer { - float: left; - width: 65px; - height: 21px; -} - -.tab-configuration thead { - display: none; -} - -.tab-configuration .gui_box { - margin-bottom: 10px; - float: left; -} - -.tab-configuration .tab-configuration .system .gui_box { - float: left; -} - -.tab-configuration .board .gui_box, .tab-configuration .acc .gui_box { - float: left; -} - -.tab-configuration .gps .gui_box, .tab-configuration .other .gui_box { - float: left; - margin-bottom: 10px; -} - -.tab-configuration .gps td:nth-child(2) { - width: 38px; -} - -.tab-configuration .beeper-configuration tr:last-child td, -.tab-configuration .dshotBeaconConditions tr:last-child td, -.tab-configuration .other tr:last-child td { - border-bottom: 0; - padding-bottom: 0; - margin-bottom: 0; -} - -.tab-configuration .gui_box { - font-weight: bold; -} - -.tab-configuration .gui_box span { - font-style: normal; - font-weight: normal; - line-height: 19px; - color: #4f4f4f; - font-size: 11px; -} - -.tab-configuration .alignicon { - width: 15px; - height: 15px; - float: left; - margin: 3px; -} - -.tab-configuration .pitch { - background-image: url(../../images/icons/cf_icon_pitch.svg); - background-repeat: no-repeat; - background-position: center; -} - -.tab-configuration .yaw { - background-image: url(../../images/icons/cf_icon_yaw.svg); - background-repeat: no-repeat; - background-position: center; -} - -.tab-configuration .roll { - background-image: url(../../images/icons/cf_icon_roll.svg); - background-repeat: no-repeat; - background-position: center; -} - -.tab-configuration .board select { - float: left; - width: fit-content; - max-width: 50%; - height: 20px; - margin-right: 5px; - border-radius:3px; -} - -.tab-configuration .board_align_content, -.tab-configuration .gyro_align_content { - width: 100%; - border-bottom: 1px solid var(--subtleAccent); - display: inline-block; -} - -.tab-configuration .sensoralignment span { - width: 100%; -} - -.tab-configuration .gyroSyncDenom, .tab-configuration .pidProcessDenom, .tab-configuration .gyroFrequency { - width:90px; -} - -.tab-configuration .gyroFrequency { - border: none; - background-color: var(--alternativeBackground); - padding-left: 6px; - margin-right: 10px; - font-weight: bold; -} - -.tab-configuration ._smallAngle { - margin-top: 10px; - float: left; - width: 100%; -} - -.tab-configuration .gpsSettings .note { - margin-top: 10px; -} - -@media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) { - .tab-configuration .gui_box span { - line-height: 17px; - } - .tab-configuration .system .gui_box { - float: left; - } - .tab-configuration .board .gui_box, .tab-configuration .acc .gui_box { - float: left; - } - .tab-configuration .gps .gui_box, .tab-configuration .other .gui_box { - float: left; - } -} -@media all and (max-width: 575px) { - .tab-configuration .system .gui_box { - min-height: auto; - } - .tab-configuration .gps td:nth-child(2) { - width: auto; - } - .dshotbeacon > td > div.select > div, .dshotbeacon select.dshotBeeperBeaconTone { - width: 100%; - } -} diff --git a/src/css/tabs/configuration.less b/src/css/tabs/configuration.less new file mode 100644 index 00000000..34a8157e --- /dev/null +++ b/src/css/tabs/configuration.less @@ -0,0 +1,444 @@ +.tab-configuration { + .ui-grid-col { + margin-bottom: 0; + } + input { + border: 1px solid var(--subtleAccent); + width: 230px; + height: 20px; + margin-right: 15px; + border-radius: 3px; + float: left; + } + select { + border: 1px solid var(--subtleAccent); + width: 230px; + height: 20px; + float: left; + margin-right: 15px; + border-radius: 3px; + } + table { + margin-bottom: 0; + width: 100%; + float: left; + padding: 0; + text-align: left; + th { + text-align: left; + padding: 3px; + border-bottom: 1px solid var(--subtleAccent); + } + td { + text-align: left; + padding: 5px 3px; + border-bottom: 1px solid var(--subtleAccent); + } + tr { + td { + &:first-child { + text-align: left; + width: 55px; + } + } + } + thead { + tr { + &:first-child { + background-color: #ececec; + } + } + } + } + position: relative; + .groupTitle { + padding: 0 0 5px 0; + margin: 0 0 10px 0; + font-size: 16px; + border-bottom: 1px solid var(--subtleAccent); + } + .featuresMultiple { + border-collapse: collapse; + margin-bottom: 5px; + margin-top: -5px; + padding: 0; + } + dl.features { + dt { + float: left; + width: 10px; + height: 18px; + line-height: 18px; + input { + margin-top: 2px; + } + } + dd { + margin: 0 0 0 20px; + height: 18px; + line-height: 18px; + } + } + .number { + input { + width: 55px; + padding-left: 3px; + height: 20px; + line-height: 20px; + text-align: left; + border-radius: 3px; + margin-right: 11px; + font-size: 12px; + font-weight: normal; + } + .disabled { + width: 48px; + padding: 0 5px; + background-color: #ececec; + } + span { + margin-left: 0; + } + margin-bottom: 5px; + clear: left; + padding-bottom: 5px; + border-bottom: 1px solid var(--subtleAccent); + width: 100%; + float: left; + &:last-child { + border-bottom: none; + padding-bottom: 0; + margin-bottom: 0; + } + } + .gps { + .line { + clear: left; + } + select { + float: left; + width: 100px; + height: 20px; + margin: 0 10px 5px 0; + border: 1px solid var(--subtleAccent); + } + .select { + >div { + &:first-child { + float: left; + height: 20px; + margin-right: 15px; + margin-left: 3px; + } + } + } + span { + line-height: 20px; + } + .gui_box { + float: left; + margin-bottom: 10px; + } + td { + &:nth-child(2) { + width: 38px; + } + } + } + .freelabel { + margin-left: 10px; + position: relative; + } + span { + margin: 0; + } + .spacer_box { + padding-bottom: 10px; + float: left; + width: calc(100% - 20px); + } + .select { + margin-bottom: 5px; + clear: left; + padding-bottom: 5px; + border-bottom: 1px solid var(--subtleAccent); + width: 100%; + float: left; + &:last-child { + border-bottom: none; + padding-bottom: 0; + margin-bottom: 0; + } + } + .board_align_inputs { + margin-bottom: 5px; + padding-bottom: 5px; + width: 33.3%; + float: left; + white-space: nowrap; + input { + width: 3.5em; + height: 20px; + line-height: 20px; + padding-left: 3px; + } + label { + display: block; + overflow: hidden; + text-overflow: ellipsis; + } + } + .gyro_alignment_inputs { + margin-bottom: 5px; + padding-bottom: 5px; + width: 33.3%; + float: left; + white-space: nowrap; + label { + display: block; + overflow: hidden; + text-overflow: ellipsis; + } + } + .gui_box_titlebar { + margin-bottom: 0; + } + .numberspacer { + float: left; + width: 65px; + height: 21px; + } + thead { + display: none; + } + .gui_box { + margin-bottom: 10px; + float: left; + font-weight: bold; + span { + font-style: normal; + font-weight: normal; + line-height: 19px; + color: #4f4f4f; + font-size: 11px; + } + } + .tab-configuration { + .system { + .gui_box { + float: left; + } + } + } + .board { + .gui_box { + float: left; + } + select { + float: left; + width: fit-content; + max-width: 50%; + height: 20px; + margin-right: 5px; + border-radius: 3px; + } + } + .acc { + .gui_box { + float: left; + } + } + .other { + .gui_box { + float: left; + margin-bottom: 10px; + } + tr { + &:last-child { + td { + border-bottom: 0; + padding-bottom: 0; + margin-bottom: 0; + } + } + } + } + .beeper-configuration { + tr { + &:last-child { + td { + border-bottom: 0; + padding-bottom: 0; + margin-bottom: 0; + } + } + } + } + .dshotBeaconConditions { + tr { + &:last-child { + td { + border-bottom: 0; + padding-bottom: 0; + margin-bottom: 0; + } + } + } + } + .alignicon { + width: 15px; + height: 15px; + float: left; + margin: 3px; + } + .pitch { + background-image: url(../../images/icons/cf_icon_pitch.svg); + background-repeat: no-repeat; + background-position: center; + } + .yaw { + background-image: url(../../images/icons/cf_icon_yaw.svg); + background-repeat: no-repeat; + background-position: center; + } + .roll { + background-image: url(../../images/icons/cf_icon_roll.svg); + background-repeat: no-repeat; + background-position: center; + } + .board_align_content { + width: 100%; + border-bottom: 1px solid var(--subtleAccent); + display: inline-block; + } + .gyro_align_content { + width: 100%; + border-bottom: 1px solid var(--subtleAccent); + display: inline-block; + } + .sensoralignment { + span { + width: 100%; + } + } + .gyroSyncDenom { + width: 90px; + } + .pidProcessDenom { + width: 90px; + } + .gyroFrequency { + width: 90px; + border: none; + background-color: var(--alternativeBackground); + padding-left: 6px; + margin-right: 10px; + font-weight: bold; + } + ._smallAngle { + margin-top: 10px; + float: left; + width: 100%; + } + .gpsSettings { + .note { + margin-top: 10px; + } + } +} +@media only screen and (max-width: 1055px) { + .tab-configuration { + .gui_box { + span { + line-height: 17px; + } + } + .system { + .gui_box { + float: left; + } + } + .board { + .gui_box { + float: left; + } + } + .acc { + .gui_box { + float: left; + } + } + .gps { + .gui_box { + float: left; + } + } + .other { + .gui_box { + float: left; + } + } + } +} +@media only screen and (max-device-width: 1055px) { + .tab-configuration { + .gui_box { + span { + line-height: 17px; + } + } + .system { + .gui_box { + float: left; + } + } + .board { + .gui_box { + float: left; + } + } + .acc { + .gui_box { + float: left; + } + } + .gps { + .gui_box { + float: left; + } + } + .other { + .gui_box { + float: left; + } + } + } +} +@media all and (max-width: 575px) { + .tab-configuration { + .system { + .gui_box { + min-height: auto; + } + } + .gps { + td { + &:nth-child(2) { + width: auto; + } + } + } + } + .dshotbeacon { + >td { + >div.select { + >div { + width: 100%; + } + } + } + select.dshotBeeperBeaconTone { + width: 100%; + } + } +} diff --git a/src/css/tabs/failsafe.css b/src/css/tabs/failsafe.css deleted file mode 100644 index 821383aa..00000000 --- a/src/css/tabs/failsafe.css +++ /dev/null @@ -1,289 +0,0 @@ -.tab-failsafe { - position: relative; -} - -.tab-failsafe .leftWrapper { - float: left; - width: calc(50% - 20px); -} - -.tab-failsafe .rightWrapper { - float: left; - width: calc(50% - 0px); - margin: 0 0 0 20px; -} - -.tab-failsafe .number { - margin-bottom: 5px; - clear: left; - padding-bottom: 5px; - border-bottom: 1px solid var(--subtleAccent); - width: 100%; - float: left; -} - -.tab-failsafe .number:last-child { - border-bottom: none; - padding-bottom: 0; - margin-bottom: 0; -} - -.tab-failsafe .number input { - width: 50px; - padding-left: 3px; - height: 20px; - line-height: 20px; - text-align: left; - border: 1px solid var(--subtleAccent); - border-radius: 3px; - margin-right: 11px; - font-size: 12px; - font-weight: normal; -} - -.tab-failsafe .number .switchery { - margin-right: 16px; -} - -.tab-failsafe .number input:disabled { - background-color: #ececec; -} - -.tab-failsafe .number span { - margin-left: 0; -} - -.tab-failsafe .checkbox { - float: left; - width: 100%; - margin-bottom: 6px; - padding-bottom: 5px; - border-bottom: 1px solid var(--subtleAccent); - margin-top: 0; -} - -.tab-failsafe .subline { - float: left; - width: 100%; - font-size: 13px; - margin-top: 15px; - margin-bottom: 5px; -} - -.tab-failsafe .radioarea { - float: left; - width: 100%; - border-radius: 5px; - background-color: #ededed; - margin-bottom: 0; - margin-top: 5px; - min-height: 90px; - padding-bottom: 10px; -} - -.tab-failsafe .radiobuttons { - float: left; - width: 50%; - margin-top: 38px; - margin-left: 15px; - font-size: 12px; - font-weight: normal; -} - -.tab-failsafe .radiobuttons input { - margin-right: 8px; - margin-bottom: 10px; -} - -.tab-failsafe .proceduresettings { - padding: 10px; - margin-top: 75px; -} - -.tab-failsafe .radiobuttons label { - float: left; - width: 130px; - margin-top: -2px; -} - -.tab-failsafe .pro1 { - background-image: url(../../images/icons/cf_failsafe_procedure1.svg); - background-position: top right 10px; - background-size: 200px; - background-repeat: no-repeat; -} - -.tab-failsafe .pro2 { - background-image: url(../../images/icons/cf_failsafe_procedure2.svg); - background-position: top right 10px; - background-size: 200px; - background-repeat: no-repeat; -} - -.tab-failsafe .pro3 { - background-image: url(../../images/icons/cf_failsafe_procedure3.svg); - background-position: top right 10px; - background-size: 200px; - background-repeat: no-repeat; -} - -.tab-failsafe .pro4 { - background-image: url(../../images/icons/cf_failsafe_procedure4.svg); - background-position: top right 10px; - background-size: 200px; - background-repeat: no-repeat; -} - -.tab-failsafe .spacer_box .helpicon { - margin-top: 3px; - margin-right: 0; - -} - -.tab-failsafe .checkbox:last-child { - border-bottom: none; -} - -.tab-failsafe .freelabel { - margin-left: 10px; - position: relative; -} - -.tab-failsafe input { - float: left; -} - -.tab-failsafe span { - margin: 0; -} - -.tab-failsafe .spacer_box { - padding-bottom: 10px; - float: left; - width: calc(100% - 20px); -} - -.tab-failsafe .gui_box_titlebar { - margin-bottom: 0; -} - -.tab-failsafe .numberspacer { - float: left; - width: 65px; - height: 21px; -} - -.tab-failsafe .gui_box { - font-style: normal; - font-weight: bold; - margin-bottom: 15px; - float: left; -} - -.tab-failsafe .gui_box span { - font-style: normal; - font-weight: normal; - line-height: 19px; - color: #4f4f4f; - font-size: 11px; -} - -.tab-failsafe .stage1 .number input { - float: right; - margin-right: 0; - } - -.tab-failsafe .stage1 select { - float: left; - width: 95%; - height: 22px; - margin: 0; - border: 1px solid var(--subtleAccent); - border-radius: 3px; -} - -.tab-failsafe .modename { - background-color: #828885; - border-radius: 3px; - border: 1px solid #686c6a; - color: #fff !important; - font-weight: 600 !important; - padding-left: 3px; - padding-right: 3px; - margin-right: 3px; -} - -.tab-failsafe .channelprimary { - float:left; - width:60%; -} - -.tab-failsafe .channelauxiliary { - float:left; - width:60%; - padding-top: 2px; -} - -.tab-failsafe .channelname { - margin-right: 3px; -} - -.tab-failsafe .channelsetting { - float:left; - width:25%; -} - -.tab-failsafe .auxiliary { - float:left; - width:15%; -} - -.tab-failsafe .cf_tooltiptext { - display: none; -} - -.tab-failsafe .rightWrapper .spacer_box { - padding-bottom: 7px; -} - -.tab-failsafe .featuresNew { - width: 100%; -} - -.tab-failsafe .featuresNew tr { - width: 100%; - border-bottom: 1px solid var(--subtleAccent); - float: left; - padding: 0 0 6px; - margin-bottom: 3px; -} - -.tab-failsafe .featuresNew td:first-child { - width: 52px; -} - -.tab-failsafe .featuresNew td:last-child { - width: calc(100% - 125px); - margin-right: 0; -} - -.tab-failsafe .featuresNew td { - float: left; - margin-right: 10px; -} - -.tab-failsafe .featuresNew .helpicon { - margin-right: -2px; -} - -.tab-failsafe table { - width: 100%; -} - -.tab-failsafe .switchMode { - border: 1px solid var(--subtleAccent); - border-radius: 3px; - margin-right: 5px; - min-width: 80px; -} - diff --git a/src/css/tabs/failsafe.less b/src/css/tabs/failsafe.less new file mode 100644 index 00000000..b9904e67 --- /dev/null +++ b/src/css/tabs/failsafe.less @@ -0,0 +1,244 @@ +.tab-failsafe { + position: relative; + .leftWrapper { + float: left; + width: calc(50% - 20px); + } + .rightWrapper { + float: left; + width: calc(50% - 0px); + margin: 0 0 0 20px; + .spacer_box { + padding-bottom: 7px; + } + } + .number { + margin-bottom: 5px; + clear: left; + padding-bottom: 5px; + border-bottom: 1px solid var(--subtleAccent); + width: 100%; + float: left; + &:last-child { + border-bottom: none; + padding-bottom: 0; + margin-bottom: 0; + } + input { + width: 50px; + padding-left: 3px; + height: 20px; + line-height: 20px; + text-align: left; + border: 1px solid var(--subtleAccent); + border-radius: 3px; + margin-right: 11px; + font-size: 12px; + font-weight: normal; + &:disabled { + background-color: #ececec; + } + } + .switchery { + margin-right: 16px; + } + span { + margin-left: 0; + } + } + .checkbox { + float: left; + width: 100%; + margin-bottom: 6px; + padding-bottom: 5px; + border-bottom: 1px solid var(--subtleAccent); + margin-top: 0; + &:last-child { + border-bottom: none; + } + } + .subline { + float: left; + width: 100%; + font-size: 13px; + margin-top: 15px; + margin-bottom: 5px; + } + .radioarea { + float: left; + width: 100%; + border-radius: 5px; + background-color: #ededed; + margin-bottom: 0; + margin-top: 5px; + min-height: 90px; + padding-bottom: 10px; + } + .radiobuttons { + float: left; + width: 50%; + margin-top: 38px; + margin-left: 15px; + font-size: 12px; + font-weight: normal; + input { + margin-right: 8px; + margin-bottom: 10px; + } + label { + float: left; + width: 130px; + margin-top: -2px; + } + } + .proceduresettings { + padding: 10px; + margin-top: 75px; + } + .pro1 { + background-image: url(../../images/icons/cf_failsafe_procedure1.svg); + background-position: top right 10px; + background-size: 200px; + background-repeat: no-repeat; + } + .pro2 { + background-image: url(../../images/icons/cf_failsafe_procedure2.svg); + background-position: top right 10px; + background-size: 200px; + background-repeat: no-repeat; + } + .pro3 { + background-image: url(../../images/icons/cf_failsafe_procedure3.svg); + background-position: top right 10px; + background-size: 200px; + background-repeat: no-repeat; + } + .pro4 { + background-image: url(../../images/icons/cf_failsafe_procedure4.svg); + background-position: top right 10px; + background-size: 200px; + background-repeat: no-repeat; + } + .spacer_box { + .helpicon { + margin-top: 3px; + margin-right: 0; + } + padding-bottom: 10px; + float: left; + width: calc(100% - 20px); + } + .freelabel { + margin-left: 10px; + position: relative; + } + input { + float: left; + } + span { + margin: 0; + } + .gui_box_titlebar { + margin-bottom: 0; + } + .numberspacer { + float: left; + width: 65px; + height: 21px; + } + .gui_box { + font-style: normal; + font-weight: bold; + margin-bottom: 15px; + float: left; + span { + font-style: normal; + font-weight: normal; + line-height: 19px; + color: #4f4f4f; + font-size: 11px; + } + } + .stage1 { + .number { + input { + float: right; + margin-right: 0; + } + } + select { + float: left; + width: 95%; + height: 22px; + margin: 0; + border: 1px solid var(--subtleAccent); + border-radius: 3px; + } + } + .modename { + background-color: #828885; + border-radius: 3px; + border: 1px solid #686c6a; + color: #fff !important; + font-weight: 600 !important; + padding-left: 3px; + padding-right: 3px; + margin-right: 3px; + } + .channelprimary { + float: left; + width: 60%; + } + .channelauxiliary { + float: left; + width: 60%; + padding-top: 2px; + } + .channelname { + margin-right: 3px; + } + .channelsetting { + float: left; + width: 25%; + } + .auxiliary { + float: left; + width: 15%; + } + .cf_tooltiptext { + display: none; + } + .featuresNew { + width: 100%; + tr { + width: 100%; + border-bottom: 1px solid var(--subtleAccent); + float: left; + padding: 0 0 6px; + margin-bottom: 3px; + } + td { + &:first-child { + width: 52px; + } + &:last-child { + width: calc(100% - 125px); + margin-right: 0; + } + float: left; + margin-right: 10px; + } + .helpicon { + margin-right: -2px; + } + } + table { + width: 100%; + } + .switchMode { + border: 1px solid var(--subtleAccent); + border-radius: 3px; + margin-right: 5px; + min-width: 80px; + } +} diff --git a/src/css/tabs/firmware_flasher.css b/src/css/tabs/firmware_flasher.css deleted file mode 100644 index b4c39197..00000000 --- a/src/css/tabs/firmware_flasher.css +++ /dev/null @@ -1,231 +0,0 @@ -.tab-firmware_flasher .info { - padding: 2px 18px; - position: relative; - flex-grow: 100; -} - -.tab-firmware_flasher .info .progressLabel { - position: absolute; - width: calc(100% - 36px); - height: 26px; - top: 2px; - left: 0; - text-align: center; - line-height: 24px; - color: white; - font-weight: bold; - margin-left: 18px; - - /* text-shadow: 1px 0px 2px rgba(0, 0, 0, 0.9);*/ -} - -.tab-firmware_flasher .spacer_box_title { - float: none; -} - -.tab-firmware_flasher .info .progressLabel a { - color: white; -} - -.tab-firmware_flasher .info .progressLabel a:hover { - text-decoration: underline; -} - -.tab-firmware_flasher .info .progressLabel.valid { - background-color: #00d000; - border-radius: 5px; -} - -.tab-firmware_flasher .info .progressLabel.invalid { - background-color: #A62E32; - border-radius: 5px; -} - -.tab-firmware_flasher .info .progressLabel.actionRequired { - background-color: #0081FF; - border-radius: 5px; -} - -.tab-firmware_flasher .info .progress { - width: 100%; - height: 26px; - border-radius: 5px; - border: 1px solid var(--subtleAccent); - -webkit-appearance: none; -} - -.tab-firmware_flasher .info .progress::-webkit-progress-bar { - background-color: #4f4f4f; - border-radius: 4px; - box-shadow: inset 0px 0px 5px #2f2f2f; -} - -.tab-firmware_flasher .info .progress::-webkit-progress-value { - background-color: #F86008; - border-radius: 4px; -} - -.tab-firmware_flasher ul li { - list-style: initial; - list-style-type: circle; - margin-left: 30px; -} - -.tab-firmware_flasher .options { - position: relative; - margin-bottom: 10px; - line-height: 18px; - text-align: left; -} - -.tab-firmware_flasher td.board-description { - padding: 1px 0 3px 0; -} - -.tab-firmware_flasher .helpicon { - margin-top: 3px; -} - -.tab-firmware_flasher .options label input { - float: left; - margin-top: 2px; -} - -.tab-firmware_flasher .options label span { - font-weight: bold; - margin-left: 6px; -} - -.tab-firmware_flasher .options select { - width: 300px; - height: 20px; - border: 1px solid var(--subtleAccent); - border-radius: 3px; -} - -.tab-firmware_flasher .options .releases select { - width: 280px; -} - -.tab-firmware_flasher .option.releases { - margin: 0 0 2px 0; - line-height: 20px; -} - -.tab-firmware_flasher .options .description { - position: relative; - left: 0px; - font-style: italic; - color: #818181; -} - -.tab-firmware_flasher .options select option.cached { - font-weight: bold; -} - -.tab-firmware_flasher .cf_table td:last-child { - text-align: left; - padding-left: 8px; -} - -.tab-firmware_flasher .options .flash_on_connect_wrapper { - display: none; -} - -.tab-firmware_flasher .options .manual_baud_rate select { - width: 75px; - margin-left: 19px; -} - -.tab-firmware_flasher .release_info { - display: none; -} - -.tab-firmware_flasher .release_info .title { - line-height: 20px; - text-align: center; - font-weight: bold; - color: white; - border-bottom: 1px solid var(--subtleAccent); - background-color: #3f4241; -} - -.tab-firmware_flasher .release_info .target { - color: blue; -} - -.tab-firmware_flasher .release_info p { - padding: 5px; -} - -.tab-firmware_flasher .release_info p a { - font-weight: bold; -} - -.tab-firmware_flasher .release_info p a:hover { - text-decoration: underline; -} - -.tab-firmware_flasher .release_info .notes { - padding: 5px; -} - -.tab-firmware_flasher .git_info { - display: none; - margin-bottom: 10px; - border: 1px solid var(--subtleAccent); -} - -.tab-firmware_flasher .git_info .title { - line-height: 20px; - text-align: center; - font-weight: bold; - color: white; - border-bottom: 1px solid var(--subtleAccent); - background-color: #3f4241; -} - -.tab-firmware_flasher .git_info p { - padding: 5px; -} - -.tab-firmware_flasher .git_info p a { - font-weight: bold; -} - -.tab-firmware_flasher .git_info p a:hover { - text-decoration: underline; -} - -.btn .disabled { - cursor: default; - color: #fff; - background-color: #AFAFAF; - border: 1px solid #AFAFAF; - pointer-events: none; - text-shadow: none; - opacity: 0.5; -} - -.tab-firmware_flasher .default_btn { - margin: 1px 7px 0 0; - width: fit-content; -} - -.tab-firmware_flasher .default_btn a { - padding: 0 4px 2px 4px; - font-size: 11px; -} - -#dialogUnstableFirmwareAcknoledgement .content { - margin-top: 10px; -} - -#dialogUnstableFirmwareAcknoledgement .content div { - margin-bottom: 10px; -} - -#dialogUnstableFirmwareAcknoledgement .content ul { - margin-top: 5px; - margin-bottom: 5px; -} diff --git a/src/css/tabs/firmware_flasher.less b/src/css/tabs/firmware_flasher.less new file mode 100644 index 00000000..56068935 --- /dev/null +++ b/src/css/tabs/firmware_flasher.less @@ -0,0 +1,205 @@ +.tab-firmware_flasher { + .info { + padding: 2px 18px; + position: relative; + flex-grow: 100; + .progressLabel { + position: absolute; + width: calc(100% - 36px); + height: 26px; + top: 2px; + left: 0; + text-align: center; + line-height: 24px; + color: white; + font-weight: bold; + margin-left: 18px; + a { + color: white; + &:hover { + text-decoration: underline; + } + } + } + .progressLabel.valid { + background-color: #00d000; + border-radius: 5px; + } + .progressLabel.invalid { + background-color: #A62E32; + border-radius: 5px; + } + .progressLabel.actionRequired { + background-color: #0081FF; + border-radius: 5px; + } + .progress { + width: 100%; + height: 26px; + border-radius: 5px; + border: 1px solid var(--subtleAccent); + -webkit-appearance: none; + &::-webkit-progress-bar { + background-color: #4f4f4f; + border-radius: 4px; + box-shadow: inset 0px 0px 5px #2f2f2f; + } + &::-webkit-progress-value { + background-color: #F86008; + border-radius: 4px; + } + } + } + .spacer_box_title { + float: none; + } + ul { + li { + list-style: initial; + list-style-type: circle; + margin-left: 30px; + } + } + .options { + position: relative; + margin-bottom: 10px; + line-height: 18px; + text-align: left; + label { + input { + float: left; + margin-top: 2px; + } + span { + font-weight: bold; + margin-left: 6px; + } + } + select { + width: 300px; + height: 20px; + border: 1px solid var(--subtleAccent); + border-radius: 3px; + option.cached { + font-weight: bold; + } + } + .releases { + select { + width: 280px; + } + } + .description { + position: relative; + left: 0px; + font-style: italic; + color: #818181; + } + .flash_on_connect_wrapper { + display: none; + } + .manual_baud_rate { + select { + width: 75px; + margin-left: 19px; + } + } + } + td.board-description { + padding: 1px 0 3px 0; + } + .helpicon { + margin-top: 3px; + } + .option.releases { + margin: 0 0 2px 0; + line-height: 20px; + } + .cf_table { + td { + &:last-child { + text-align: left; + padding-left: 8px; + } + } + } + .release_info { + display: none; + .title { + line-height: 20px; + text-align: center; + font-weight: bold; + color: white; + border-bottom: 1px solid var(--subtleAccent); + background-color: #3f4241; + } + .target { + color: blue; + } + p { + padding: 5px; + a { + font-weight: bold; + &:hover { + text-decoration: underline; + } + } + } + .notes { + padding: 5px; + } + } + .git_info { + display: none; + margin-bottom: 10px; + border: 1px solid var(--subtleAccent); + .title { + line-height: 20px; + text-align: center; + font-weight: bold; + color: white; + border-bottom: 1px solid var(--subtleAccent); + background-color: #3f4241; + } + p { + padding: 5px; + a { + font-weight: bold; + &:hover { + text-decoration: underline; + } + } + } + } + .default_btn { + margin: 1px 7px 0 0; + width: fit-content; + a { + padding: 0 4px 2px 4px; + font-size: 11px; + } + } +} +.btn { + .disabled { + cursor: default; + color: #fff; + background-color: #AFAFAF; + border: 1px solid #AFAFAF; + pointer-events: none; + text-shadow: none; + opacity: 0.5; + } +} +#dialogUnstableFirmwareAcknoledgement { + .content { + margin-top: 10px; + div { + margin-bottom: 10px; + } + ul { + margin-top: 5px; + margin-bottom: 5px; + } + } +} diff --git a/src/css/tabs/gps.css b/src/css/tabs/gps.css deleted file mode 100644 index 5c9bbccd..00000000 --- a/src/css/tabs/gps.css +++ /dev/null @@ -1,162 +0,0 @@ -.tab-gps .GPS_signal_strength table td:nth-child(2) { - text-align: center; -} - -.tab-gps .GPS_signal_strength table td:nth-child(3) { - text-align: center; -} - -.tab-gps .GPS_signal_strength table td:nth-child(4) { - text-align: left; - padding-left: 10px; -} - -.tab-gps progress { - width: 100%; - border-radius: 3px; -} - -.tab-gps .GPS_info .head, .tab-gps .GPS_signal_strength .head { - display: block; - text-align: center; - line-height: 20px; - font-weight: bold; - border-bottom: 1px solid var(--subtleAccent); - background-color: #ececec; -} - -.tab-gps .gps_map { - height: 460px; -} - - -.tab-gps #connect { - display:none; - text-align:center; - padding-top:40%; -} - -.tab-gps #waiting { - margin-top: 0px; - display: none; - text-align: center; - padding-top: 0px; - background-image: url(../../images/loading-bars.svg); - background-position: center 40%; - background-size: 15%; - height: 100%; - background-repeat: no-repeat; - float: left; - width: 100%; -} - -.tab-gps #waiting .info { - margin-top: 50%; -} - -.tab-gps #loadmap { - margin-top:0px; - display:none; -} - -.tab-gps #connect a { - font-weight: bold; - margin-top:10px; -} - - -.tab-gps #loadmap { - height: 100%; - width: 100%; - float: left; -} - -.tab-gps #loadmap .map { - width: 100%; - float: left; - height: 400px; -} - -.tab-gps #loadmap .controls { - width: 100%; - float: left; - height: 33px; - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - background-color: #D1D1D1; -} - -.tab-gps #loadmap .controls a { - background-color: white; - border-radius: 4px; - border: 1px var(--subtleAccent) solid; - color: grey; - height: 10px; - width: 10px; - text-align: center; - font-size: 20px; - line-height: 10px; - padding: 6px; - margin-top: 5px; - float: right; -} - -.tab-gps #loadmap .controls a:hover { - background-color: #f5f5f5; -} - -.tab-gps #loadmap .controls a:active { - background-color: #e6e6e6; -} - -.tab-gps #loadmap .controls a:first-child { - margin-left: -1px; - margin-right: 5px; - border-bottom-left-radius: 0px; - border-top-left-radius: 0px; -} -.tab-gps #loadmap .controls a:last-child { - margin-right: 0px; - border-bottom-right-radius: 0px; - border-top-right-radius: 0px; -} - -.tab-gps iframe { - height: 400px; - width: 100%; - float: left; -} - - -progress[value]::-webkit-progress-bar { - background-color: #d2d2d2; - border-radius: 2px; - box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.95); - box-shadow: 0 0 3px rgba(0, 0, 0, 0.25) inset; -} - -progress[value]::-webkit-progress-value { - background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .15)), - -webkit-linear-gradient(left, #ffbb00, #ffbb00); - border-radius: 2px; - box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25) inset; -} - - -@media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) { - -.tab-gps iframe { - height: 347px; - width: 100%; - float: left; -} - -.tab-gps .gps_map { - height: 403px; -} - -.tabs-gps #loadmap .map { - height: 343px; -} - -} diff --git a/src/css/tabs/gps.less b/src/css/tabs/gps.less new file mode 100644 index 00000000..4ba6de6a --- /dev/null +++ b/src/css/tabs/gps.less @@ -0,0 +1,175 @@ +.tab-gps { + .GPS_signal_strength { + table { + td { + &:nth-child(2) { + text-align: center; + } + &:nth-child(3) { + text-align: center; + } + &:nth-child(4) { + text-align: left; + padding-left: 10px; + } + } + } + .head { + display: block; + text-align: center; + line-height: 20px; + font-weight: bold; + border-bottom: 1px solid var(--subtleAccent); + background-color: #ececec; + } + } + progress { + width: 100%; + border-radius: 3px; + } + .GPS_info { + .head { + display: block; + text-align: center; + line-height: 20px; + font-weight: bold; + border-bottom: 1px solid var(--subtleAccent); + background-color: #ececec; + } + } + .gps_map { + height: 460px; + } + #connect { + display: none; + text-align: center; + padding-top: 40%; + a { + font-weight: bold; + margin-top: 10px; + } + } + #waiting { + margin-top: 0px; + display: none; + text-align: center; + padding-top: 0px; + background-image: url(../../images/loading-bars.svg); + background-position: center 40%; + background-size: 15%; + height: 100%; + background-repeat: no-repeat; + float: left; + width: 100%; + .info { + margin-top: 50%; + } + } + #loadmap { + margin-top: 0px; + display: none; + height: 100%; + width: 100%; + float: left; + .map { + width: 100%; + float: left; + height: 400px; + } + .controls { + width: 100%; + float: left; + height: 33px; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + background-color: #D1D1D1; + a { + background-color: white; + border-radius: 4px; + border: 1px var(--subtleAccent) solid; + color: grey; + height: 10px; + width: 10px; + text-align: center; + font-size: 20px; + line-height: 10px; + padding: 6px; + margin-top: 5px; + float: right; + &:hover { + background-color: #f5f5f5; + } + &:active { + background-color: #e6e6e6; + } + &:first-child { + margin-left: -1px; + margin-right: 5px; + border-bottom-left-radius: 0px; + border-top-left-radius: 0px; + } + &:last-child { + margin-right: 0px; + border-bottom-right-radius: 0px; + border-top-right-radius: 0px; + } + } + } + } + iframe { + height: 400px; + width: 100%; + float: left; + } +} +progress[value] { + &::-webkit-progress-bar { + background-color: #d2d2d2; + border-radius: 2px; + box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.95); + box-shadow: 0 0 3px rgba(0, 0, 0, 0.25) inset; + } + &::-webkit-progress-value { + background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .15)), -webkit-linear-gradient(left, #ffbb00, #ffbb00); + border-radius: 2px; + box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25) inset; + } +} +@media only screen and (max-width: 1055px) { + .tab-gps { + iframe { + height: 347px; + width: 100%; + float: left; + } + .gps_map { + height: 403px; + } + } + .tabs-gps { + #loadmap { + .map { + height: 343px; + } + } + } +} +@media only screen and (max-device-width: 1055px) { + .tab-gps { + iframe { + height: 347px; + width: 100%; + float: left; + } + .gps_map { + height: 403px; + } + } + .tabs-gps { + #loadmap { + .map { + height: 343px; + } + } + } +} diff --git a/src/css/tabs/help.css b/src/css/tabs/help.css deleted file mode 100644 index b3c5544a..00000000 --- a/src/css/tabs/help.css +++ /dev/null @@ -1,39 +0,0 @@ -.tab-help .gui_box { - min-height: 500px; - margin-bottom: 0; -} - -.tab-help ul { - margin-bottom:15px; -} - -.tab-help li { - border-top: 1px dotted var(--subtleAccent); - padding-top: 5px; - padding-bottom: 5px; - background-image: url(../../images/arrow.svg); - background-repeat: no-repeat; - background-position: 0 8px; - background-size: 12px; -} - -.tab-help li span { - margin-left: 17px; - display:block; -} - -.tab-help li span a { - color: var(--accent); -} - -.tab-help .subline { - margin-bottom: 5px; -} - -/** (phones) **/ -@media all and (max-width: 575px) { - .tab-help .gui_box { - min-height: auto; - margin-bottom: 15px; - } -} diff --git a/src/css/tabs/help.less b/src/css/tabs/help.less new file mode 100644 index 00000000..a6db695c --- /dev/null +++ b/src/css/tabs/help.less @@ -0,0 +1,37 @@ +.tab-help { + .gui_box { + min-height: 500px; + margin-bottom: 0; + } + ul { + margin-bottom: 15px; + } + li { + border-top: 1px dotted var(--subtleAccent); + padding-top: 5px; + padding-bottom: 5px; + background-image: url(../../images/arrow.svg); + background-repeat: no-repeat; + background-position: 0 8px; + background-size: 12px; + span { + margin-left: 17px; + display: block; + a { + color: var(--accent); + } + } + } + .subline { + margin-bottom: 5px; + } +} +/** (phones) **/ +@media all and (max-width: 575px) { + .tab-help { + .gui_box { + min-height: auto; + margin-bottom: 15px; + } + } +} diff --git a/src/css/tabs/landing.css b/src/css/tabs/landing.css deleted file mode 100644 index fa4b75c8..00000000 --- a/src/css/tabs/landing.css +++ /dev/null @@ -1,155 +0,0 @@ -/* general layout */ -.tab-landing { - min-height: 100%; - overflow: hidden; -} - -.tab-landing .content_wrapper { - padding: 0; - min-height: 100%; - height: 100%; - overflow-y: auto; - background-color: #2e2e2e; -} - -.tab-landing .content_top { - height: 140px; - padding: 20px; - background: #fff url(../../images/pattern.png); - background-size: 300px; -} - -.tab-landing .content_mid { - background-color: var(--accent); - overflow: hidden; - padding: 0 15px; -} - -.tab-landing .content_foot { - clear: both; - padding: 10px 0px 5px; -} - -/* hero block */ -.tab-landing .logowrapper { - margin-left: auto; - margin-right: auto; - margin-top: 5px; - width: 800px; - color: var(--defaultText); - font-size: 14px; - font-weight: 300; -} - -.tab-landing .logowrapper img { - width: 600px; - margin: 5px; -} - -.tab-landing .logowrapper span { - font-size: 22px; - font-weight: 300; -} - -.text1, .text2, .text3 { - margin-top: 15px; - margin-bottom: 15px; - font-weight: normal; - font-size: 12px; -} - -/* text columns */ -.tab-landing .content_mid .column .wrap2 { - padding: 10px; -} - -.tab-landing .content_mid h2 { - margin-bottom: 5px; - font-size: 13px; -} - -.tab-landing .content_mid h3 { - font-size: 12px; - margin-bottom: 5px; - -} - -.tab-landing .content_mid .text2 ul { - margin-top: 2px; -} - -.tab-landing .content_mid .text2 li { - padding: 2px 0; - list-style: initial; - list-style-type: circle; - margin-left: 30px; -} - -.tab-landing .content_mid .text3 .wrap2 { - border: 1px solid var(--subtleAccent); - border-radius: 5px; - background: white; - min-height: 187px; - font-size: 11px; -} - -.tab-landing .content_mid .text3 .donate { - margin-top: 10px; - text-align: center; -} - -.tab-landing .content_mid_bottom { - padding: 0 15px; - margin-top: 5px; -} - -.tab-landing .content_mid_bottom .logoSocialMedia { - float: left; - width: 40px; -} - -.tab-landing .content_mid_bottom img { - height: 30px; - width: 30px; -} - -.tab-landing .content_mid_bottom .discordLogo { - padding-top: 3px; -} - - -.tab-landing .content_mid_bottom .socialMediaText { - margin-top: 0; - margin-left: 5px; - display: inline-block; - font-weight: normal; - font-size: 12px; -} - -.tab-landing .content_mid_bottom .socialMediaParagraph { - margin-bottom: 15px; -} - -.tab-landing .languageSwitcher .selected_language { - font-weight: bold; -} -.tab-landing .languageSwitcher { - margin-left: auto; - margin-right: auto; - text-align: center; -} -.tab-landing .languageSwitcher a { - font-weight: normal; - white-space: nowrap; -} -.tab-landing .languageSwitcher a:not(:last-child):after { - content: ", "; - font-weight: normal; -} - -/** (phones) **/ -@media all and (max-width: 575px) { - .tab-landing .logowrapper, .tab-landing .logowrapper img { - width: auto; - } -} diff --git a/src/css/tabs/landing.less b/src/css/tabs/landing.less new file mode 100644 index 00000000..8559f2ce --- /dev/null +++ b/src/css/tabs/landing.less @@ -0,0 +1,151 @@ +.tab-landing { + min-height: 100%; + overflow: hidden; + .content_wrapper { + padding: 0; + min-height: 100%; + height: 100%; + overflow-y: auto; + background-color: #2e2e2e; + } + .content_top { + height: 140px; + padding: 20px; + background: #fff url(../../images/pattern.png); + background-size: 300px; + } + .content_mid { + background-color: var(--accent); + overflow: hidden; + padding: 0 15px; + .column { + .wrap2 { + padding: 10px; + } + } + h2 { + margin-bottom: 5px; + font-size: 13px; + } + h3 { + font-size: 12px; + margin-bottom: 5px; + } + .text2 { + ul { + margin-top: 2px; + } + li { + padding: 2px 0; + list-style: initial; + list-style-type: circle; + margin-left: 30px; + } + } + .text3 { + .wrap2 { + border: 1px solid var(--subtleAccent); + border-radius: 5px; + background: white; + min-height: 187px; + font-size: 11px; + } + .donate { + margin-top: 10px; + text-align: center; + } + } + } + .content_foot { + clear: both; + padding: 10px 0px 5px; + } + .logowrapper { + margin-left: auto; + margin-right: auto; + margin-top: 5px; + width: 800px; + color: var(--defaultText); + font-size: 14px; + font-weight: 300; + img { + width: 600px; + margin: 5px; + } + span { + font-size: 22px; + font-weight: 300; + } + } + .content_mid_bottom { + padding: 0 15px; + margin-top: 5px; + .logoSocialMedia { + float: left; + width: 40px; + } + img { + height: 30px; + width: 30px; + } + .discordLogo { + padding-top: 3px; + } + .socialMediaText { + margin-top: 0; + margin-left: 5px; + display: inline-block; + font-weight: normal; + font-size: 12px; + } + .socialMediaParagraph { + margin-bottom: 15px; + } + } + .languageSwitcher { + .selected_language { + font-weight: bold; + } + margin-left: auto; + margin-right: auto; + text-align: center; + a { + font-weight: normal; + white-space: nowrap; + &:not(:last-child) { + &:after { + content: ", "; + font-weight: normal; + } + } + } + } +} +.text1 { + margin-top: 15px; + margin-bottom: 15px; + font-weight: normal; + font-size: 12px; +} +.text2 { + margin-top: 15px; + margin-bottom: 15px; + font-weight: normal; + font-size: 12px; +} +.text3 { + margin-top: 15px; + margin-bottom: 15px; + font-weight: normal; + font-size: 12px; +} +@media all and (max-width: 575px) { + .tab-landing { + .logowrapper { + width: auto; + img { + width: auto; + } + } + } +} diff --git a/src/css/tabs/led_strip.css b/src/css/tabs/led_strip.css deleted file mode 100644 index de197d43..00000000 --- a/src/css/tabs/led_strip.css +++ /dev/null @@ -1,450 +0,0 @@ -.tab-led-strip .content_wrapper { - position: relative !important; -} - -.tab-led-strip .help { - padding: 10px; - background-color: #ffcb18; - margin-bottom: 10px; -} - - -.tab-led-strip .section { - color: #565656; - margin: 20px 0 5px 0; - border-bottom: 1px solid var(--subtleAccent); -} - -.tab-led-strip .mainGrid { - width: calc((24px + 7px) * 16); - height: calc((24px + 7px) * 16); - float: left; - margin-right: 10px; - border-radius: 3px; - background-color: #dcdcdc; - border: var(--subtleAccent); -} - -.tab-led-strip .mainGrid .gPoint { - float: left; - border: solid 1px var(--ledAccent); - width: 23px; - height: 23px; - margin: 3px; - border-radius: 7px; - background: var(--ledBackground); - cursor: pointer; -} - -.tab-led-strip .gPoint.function-s { /* RSSI */ - background: brown; - box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); - border-color: rgb(52, 155, 255); -} - -.tab-led-strip .gPoint.function-c { /* Color */ - background: linear-gradient( to bottom right, rgba(255, 0, 0, .5) 0%, rgba(255, 255, 0, 0.5) 15%, rgba(0, 255, 0, .5) 30%, rgba(0, 255, 255, .5) 50%, rgba(0, 0, 255, .5) 65%, rgba(255, 0, 255, .5) 80%, rgba(255, 0, 0, .5) 100%); - box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); - border-color: grey; -} - -.tab-led-strip .gPoint.function-f { /* Flight mode & orientation */ - background: rgb(50, 205, 50); - box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); - border-color: rgb(50, 205, 50); -} - -.tab-led-strip .gPoint.function-a { /* Armed Mode */ - background: rgb(52, 155, 255); - box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); - border-color: rgb(52, 155, 255); -} - -.tab-led-strip .gPoint.function-l { /* Battery */ - background: magenta; - box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); - border-color: rgb(52, 155, 255); -} - -.tab-led-strip .gPoint.function-r { /* Ring */ - background: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, white 60%,white 70%,black 70%, black 100%); - box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); - border-color: black; -} - -.tab-led-strip .gPoint.function-g { /* GPS */ - background: green; - box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); - border-color: rgb(52, 155, 255); -} - -.tab-led-strip .gPoint.function-c .overlay-color, -.tab-led-strip .gPoint.function-r .overlay-color { - float: left; - height: 15px; - width: 15px; - margin-top: -23px; - margin-left: 4px; - border-radius: 4px; -} - -.tab-led-strip .gPoint.function-s .overlay-s, -.tab-led-strip .gPoint.function-w .overlay-w, -.tab-led-strip .gPoint.function-v .overlay-v, -.tab-led-strip .gPoint.function-i .overlay-i, -.tab-led-strip .gPoint.function-t .overlay-t, -.tab-led-strip .gPoint.function-o .overlay-o, -.tab-led-strip .gPoint.function-b .overlay-b, -.tab-led-strip .gPoint.function-n .overlay-n { - float: left; - height: 6px; - width: 16px; -} - -.tab-led-strip .gPoint.function-w .overlay-w { - background-image: radial-gradient(1px at 8px 50% , red 0%, red 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px); - margin-top: -30px; - margin-left: -9px; -} - -.tab-led-strip .gPoint.function-v .overlay-v { - background-image: radial-gradient(1px at 8px 50% , black 0%, black 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px); - margin-top: -6px; - margin-left: 4px; -} - -.tab-led-strip .gPoint.function-i .overlay-i { - background-image: radial-gradient(1px at 8px 50% , yellow 0%, yellow 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px); - margin-top: -30px; - margin-left: 16px; -} - -.tab-led-strip .gPoint.function-t .overlay-t { - background-image: radial-gradient(1px at 8px 50% , orange 0%, orange 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px); - margin-top: -6px; - margin-left: -9px; -} - -.tab-led-strip .gPoint.function-s .overlay-s { - background-image: radial-gradient(1px at 8px 50% , brown 0%, brown 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px); - margin-top: -6px; - margin-left: 16px; -} - -.tab-led-strip .gPoint.function-o .overlay-o { - background-image: radial-gradient(1px at 8px 50% , brown 0%, brown 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px); - margin-top: -6px; - margin-left: 16px; -} - -.tab-led-strip .gPoint.function-b .overlay-b { - background-image: radial-gradient(1px at 8px 50% , rgb(52, 155, 255) 0%, rgb(52, 155, 255) 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px); - margin-top: -18px; - margin-left: -9px; -} - -.tab-led-strip .gPoint.function-n .overlay-n { - background-image: radial-gradient(1px at 8px 50% , blue 0%, blue 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px); - margin-top: -18px; - margin-left: 16px; -} - - -.tab-led-strip .gPoint select { - background: #000; - width: 13px; - height: 13px; -} - -.tab-led-strip .wire { - color: rgba(255,255,255,.5); - text-align: center; - font-size: 12px; - text-shadow: 1px 1px rgba(0,0,0,.4); - padding-top: 0px; - display: block; - /* font-family: monospace; */ - margin-left: -1px; - margin-top: -21px; - width: 24px; - height: 24px; -} - -.gridWire .wire { - color: rgba(255,255,255,1); -} - -.gridWire { - background: rgba(15, 171, 22, .5) !important; -} - -/*function buttons*/ - -.tab-led-strip button { - text-align: center; - font-weight: bold; - border: 1px solid var(--subtleAccent); - background-color: #ececec; - border-radius: 3px; - padding: 7px 6px; - margin: 3px 0; -} - -.tab-led-strip button:hover { - background-color: #acacac; -} - -.tab-led-strip .funcWire.btnOn { - background: rgb(15, 171, 22); -} - - -.tab-led-strip .w100 { - width: 100%; -} - -.tab-led-strip .w50 { - width: 49%; -} - -/* Drop-down boxes */ - -.tab-led-strip .select .function-c { - background: linear-gradient( to bottom right, rgba(255, 0, 0, .5) 0%, rgba(255, 255, 0, 0.5) 15%, rgba(0, 255, 0, .5) 30%, rgba(0, 255, 255, .5) 50%, rgba(0, 0, 255, .5) 65%, rgba(255, 0, 255, .5) 80%, rgba(255, 0, 0, .5) 100%); -} - -.tab-led-strip .select .function-f { background: rgb(50, 205, 50);} -.tab-led-strip .select .function-a { background: rgb(52, 155, 255);} -.tab-led-strip .select .function-l { background: magenta;} -.tab-led-strip .select .function-s { background: brown;} -.tab-led-strip .select .function-g { background: green;} -/* .tab-led-strip .select .function-b { background: white; color:black;} */ -.tab-led-strip .select .function-r { background: #acacac;} - -.tab-led-strip .select .functionSelect { - border: 1px solid var(--subtleAccent); - border-radius: 3px; - background: var(--boxBackground); - color: var(--defaultText); -} - - -.tab-led-strip .overlays, -.tab-led-strip .blinkers, -.tab-led-strip .modifiers { - display: inline-block; -} - -.tab-led-strip .colorDefineSliders { - display: inline-block; - position: absolute; - z-index: 10000; - background: var(--boxBackground); - padding: 5px; - border-color: #565656; - border-style: solid; - border-radius: 6px; - border-width: 2px; - width: 167px; -} - -.tab-led-strip .color-1 {background: white;} -.tab-led-strip .color-2 {background: red;} -.tab-led-strip .color-3 {background: orange;} -.tab-led-strip .color-4 {background: yellow;} -.tab-led-strip .color-5 {background: greenyellow;} -.tab-led-strip .color-6 {background: limegreen;} -.tab-led-strip .color-7 {background: palegreen;} -.tab-led-strip .color-8 {background: cyan;} -.tab-led-strip .color-9 {background: lightcyan;} -.tab-led-strip .color-10 {background: dodgerblue;} -.tab-led-strip .color-11 {background: darkviolet;} -.tab-led-strip .color-12 {background: magenta;} -.tab-led-strip .color-13 {background: deeppink;} - - -.tab-led-strip .directions button.btnOn, -.tab-led-strip .colors .btnOn, -.tab-led-strip .special_colors button.btnOn, -.tab-led-strip .mode_colors button.btnOn { - border-color: #000; -} - -.tab-led-strip .colors button:hover { - border-color: inherit; - border-style: solid; -} - -.tab-led-strip .directions .btnOn { - background: #FFF; color: #000; -} - -.tab-led-strip .indicators { - position: relative; - height: 24px -} - -.tab-led-strip .indicators span { - width: 0; - height: 0; - position: absolute; - display: none; - font-size: 10px; - font-weight: bold; -} - -.tab-led-strip .indicators .north { - top: -9px; - left: 4px; - border-left: 7px solid transparent; - border-right: 7px solid transparent; - border-bottom: 7px solid rgba(0,0,0,.8); -} - -.tab-led-strip .indicators .south { - bottom: -8px; - left: 4px; - border-left: 7px solid transparent; - border-right: 7px solid transparent; - border-top: 7px solid rgba(0,0,0,.8); -} - -.tab-led-strip .indicators .east { - bottom: 7px; - right: -9px; - border-top: 7px solid transparent; - border-bottom: 7px solid transparent; - border-left: 7px solid rgba(0,0,0,.8); -} - -.tab-led-strip .indicators .west { - bottom: 7px; - left: -9px; - border-top: 7px solid transparent; - border-bottom: 7px solid transparent; - border-right: 7px solid rgba(0,0,0,.8); -} - -.tab-led-strip .indicators .up { - top: 0px; - left: 2px; -} - -.tab-led-strip .indicators .down { - bottom: 17px; - right: 10px; -} - -.tab-led-strip .dir-n .north {display: inline;} -.tab-led-strip .dir-s .south {display: inline;} -.tab-led-strip .dir-e .east {display: inline;} -.tab-led-strip .dir-w .west {display: inline;} -.tab-led-strip .dir-u .up {display: inline;} -.tab-led-strip .dir-d .down {display: inline;} - -.tab-led-strip .controls { - position: relative; - float: left; - width: 285px; -} - -.colorDefineSliderValue, -.colorDefineSliderLabel { - width: 10px; - display: inline-table; - margin-bottom: 5px; -} - -.tab-led-strip .directions, -.tab-led-strip .colors { - height: 130px; - position: relative; - display: inline-block; - width: 49%; -} - -.tab-led-strip .directions button { - position: absolute; - width: 30px; - height: 30px; -} - -.tab-led-strip .directions .dir-n {top: 0; left: 32px;} -.tab-led-strip .directions .dir-s {top: 64px; left: 32px;} -.tab-led-strip .directions .dir-e {left: 64px; top: 32px;} -.tab-led-strip .directions .dir-w {left: 0; top: 32px;} -.tab-led-strip .directions .dir-u {right: 10px; top: 15px;} -.tab-led-strip .directions .dir-d {right: 10px; top: 54px;} - -.tab-led-strip .colors button { - width: 23%; -} -.tab-led-strip .colors button, -.tab-led-strip .wire { - text-shadow: 0 0 2px black,0 0 2px black,0 0 2px black; - color: white; -} - -.tab-led-strip .wires-remaining { - float: right; - text-align: center; - font-size: 14px; -} - -.tab-led-strip .wires-remaining div { - font-size: 40px; - color: var(--accent); - margin-bottom: -5px; - margin-top: -10px; -} - -.tab-led-strip .wires-remaining.error div { - color: #FF5700; -} - -.tab-led-strip > .buttons { - margin-top: 10px; -} - -.tab-led-strip .gridSections { - position: absolute; - z-index: -1; - width: 496px; - border: 1px solid rgb(236, 236, 236); - margin-top: -1px; - margin-left: -1px; - border-radius: 3px; -} - -.tab-led-strip .gridSections .block { - width: 122px; - height: 122px; - float: left; - border: solid 1px rgb(236, 236, 236); -} - - -/*******JQUERYUI**********/ - -.tab-led-strip .ui-selected { - box-shadow: inset 0 0 8px rgba(255, 0, 255, 1) !important; - border: solid 1px #000 !important; -} - -.tab-led-strip .ui-selecting { - box-shadow: inset 0 0 30px rgba(255, 0, 255, .7) !important; - border: solid 1px #000 !important; -} - -.tab-led-strip .ui-selectable-helper { - background: rgba(0,0,0,.4); - position: absolute; - z-index: 100; - border: 1px dotted white; -} - -@media all and (max-width: 575px) { - .tab-led-strip .controls { - width: 100%; - } -} diff --git a/src/css/tabs/led_strip.less b/src/css/tabs/led_strip.less new file mode 100644 index 00000000..a5f30c17 --- /dev/null +++ b/src/css/tabs/led_strip.less @@ -0,0 +1,516 @@ +.tab-led-strip { + .content_wrapper { + position: relative !important; + } + .help { + padding: 10px; + background-color: #ffcb18; + margin-bottom: 10px; + } + .section { + color: #565656; + margin: 20px 0 5px 0; + border-bottom: 1px solid var(--subtleAccent); + } + .mainGrid { + width: calc((24px + 7px) * 16); + height: calc((24px + 7px) * 16); + float: left; + margin-right: 10px; + border-radius: 3px; + background-color: #dcdcdc; + border: var(--subtleAccent); + .gPoint { + float: left; + border: solid 1px var(--ledAccent); + width: 23px; + height: 23px; + margin: 3px; + border-radius: 7px; + background: var(--ledBackground); + cursor: pointer; + } + } + .gPoint.function-s { + background: brown; + box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); + border-color: rgb(52, 155, 255); + .overlay-s { + float: left; + height: 6px; + width: 16px; + background-image: radial-gradient(1px at 8px 50% , brown 0%, brown 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px); + margin-top: -6px; + margin-left: 16px; + } + } + .gPoint.function-c { + background: linear-gradient( to bottom right, rgba(255, 0, 0, .5) 0%, rgba(255, 255, 0, 0.5) 15%, rgba(0, 255, 0, .5) 30%, rgba(0, 255, 255, .5) 50%, rgba(0, 0, 255, .5) 65%, rgba(255, 0, 255, .5) 80%, rgba(255, 0, 0, .5) 100%); + box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); + border-color: grey; + .overlay-color { + float: left; + height: 15px; + width: 15px; + margin-top: -23px; + margin-left: 4px; + border-radius: 4px; + } + } + .gPoint.function-f { + background: rgb(50, 205, 50); + box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); + border-color: rgb(50, 205, 50); + } + .gPoint.function-a { + background: rgb(52, 155, 255); + box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); + border-color: rgb(52, 155, 255); + } + .gPoint.function-l { + background: magenta; + box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); + border-color: rgb(52, 155, 255); + } + .gPoint.function-r { + background: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, white 60%,white 70%,black 70%, black 100%); + box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); + border-color: black; + .overlay-color { + float: left; + height: 15px; + width: 15px; + margin-top: -23px; + margin-left: 4px; + border-radius: 4px; + } + } + .gPoint.function-g { + background: green; + box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); + border-color: rgb(52, 155, 255); + } + .gPoint.function-w { + .overlay-w { + float: left; + height: 6px; + width: 16px; + background-image: radial-gradient(1px at 8px 50% , red 0%, red 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px); + margin-top: -30px; + margin-left: -9px; + } + } + .gPoint.function-v { + .overlay-v { + float: left; + height: 6px; + width: 16px; + background-image: radial-gradient(1px at 8px 50% , black 0%, black 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px); + margin-top: -6px; + margin-left: 4px; + } + } + .gPoint.function-i { + .overlay-i { + float: left; + height: 6px; + width: 16px; + background-image: radial-gradient(1px at 8px 50% , yellow 0%, yellow 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px); + margin-top: -30px; + margin-left: 16px; + } + } + .gPoint.function-t { + .overlay-t { + float: left; + height: 6px; + width: 16px; + background-image: radial-gradient(1px at 8px 50% , orange 0%, orange 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px); + margin-top: -6px; + margin-left: -9px; + } + } + .gPoint.function-o { + .overlay-o { + float: left; + height: 6px; + width: 16px; + background-image: radial-gradient(1px at 8px 50% , brown 0%, brown 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px); + margin-top: -6px; + margin-left: 16px; + } + } + .gPoint.function-b { + .overlay-b { + float: left; + height: 6px; + width: 16px; + background-image: radial-gradient(1px at 8px 50% , rgb(52, 155, 255) 0%, rgb(52, 155, 255) 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px); + margin-top: -18px; + margin-left: -9px; + } + } + .gPoint.function-n { + .overlay-n { + float: left; + height: 6px; + width: 16px; + background-image: radial-gradient(1px at 8px 50% , blue 0%, blue 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0) 4px); + margin-top: -18px; + margin-left: 16px; + } + } + .gPoint { + select { + background: #000; + width: 13px; + height: 13px; + } + } + .wire { + text-align: center; + font-size: 12px; + padding-top: 0px; + display: block; + margin-left: -1px; + margin-top: -21px; + width: 24px; + height: 24px; + text-shadow: 0 0 2px black,0 0 2px black,0 0 2px black; + color: white; + } + button { + text-align: center; + font-weight: bold; + border: 1px solid var(--subtleAccent); + background-color: #ececec; + border-radius: 3px; + padding: 7px 6px; + margin: 3px 0; + &:hover { + background-color: #acacac; + } + } + .funcWire.btnOn { + background: rgb(15, 171, 22); + } + .w100 { + width: 100%; + } + .w50 { + width: 49%; + } + .select { + .function-c { + background: linear-gradient( to bottom right, rgba(255, 0, 0, .5) 0%, rgba(255, 255, 0, 0.5) 15%, rgba(0, 255, 0, .5) 30%, rgba(0, 255, 255, .5) 50%, rgba(0, 0, 255, .5) 65%, rgba(255, 0, 255, .5) 80%, rgba(255, 0, 0, .5) 100%); + } + .function-f { + background: rgb(50, 205, 50); + } + .function-a { + background: rgb(52, 155, 255); + } + .function-l { + background: magenta; + } + .function-s { + background: brown; + } + .function-g { + background: green; + } + .function-r { + background: #acacac; + } + .functionSelect { + border: 1px solid var(--subtleAccent); + border-radius: 3px; + background: var(--boxBackground); + color: var(--defaultText); + } + } + .overlays { + display: inline-block; + } + .blinkers { + display: inline-block; + } + .modifiers { + display: inline-block; + } + .colorDefineSliders { + display: inline-block; + position: absolute; + z-index: 10000; + background: var(--boxBackground); + padding: 5px; + border-color: #565656; + border-style: solid; + border-radius: 6px; + border-width: 2px; + width: 167px; + } + .color-1 { + background: white; + } + .color-2 { + background: red; + } + .color-3 { + background: orange; + } + .color-4 { + background: yellow; + } + .color-5 { + background: greenyellow; + } + .color-6 { + background: limegreen; + } + .color-7 { + background: palegreen; + } + .color-8 { + background: cyan; + } + .color-9 { + background: lightcyan; + } + .color-10 { + background: dodgerblue; + } + .color-11 { + background: darkviolet; + } + .color-12 { + background: magenta; + } + .color-13 { + background: deeppink; + } + .directions { + button.btnOn { + border-color: #000; + } + .btnOn { + background: #FFF; + color: #000; + } + height: 130px; + position: relative; + display: inline-block; + width: 49%; + button { + position: absolute; + width: 30px; + height: 30px; + } + .dir-n { + top: 0; + left: 32px; + } + .dir-s { + top: 64px; + left: 32px; + } + .dir-e { + left: 64px; + top: 32px; + } + .dir-w { + left: 0; + top: 32px; + } + .dir-u { + right: 10px; + top: 15px; + } + .dir-d { + right: 10px; + top: 54px; + } + } + .colors { + .btnOn { + border-color: #000; + } + button { + &:hover { + border-color: inherit; + border-style: solid; + } + width: 23%; + text-shadow: 0 0 2px black,0 0 2px black,0 0 2px black; + color: white; + } + height: 130px; + position: relative; + display: inline-block; + width: 49%; + } + .special_colors { + button.btnOn { + border-color: #000; + } + } + .mode_colors { + button.btnOn { + border-color: #000; + } + } + .indicators { + position: relative; + height: 24px; + span { + width: 0; + height: 0; + position: absolute; + display: none; + font-size: 10px; + font-weight: bold; + } + .north { + top: -9px; + left: 4px; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-bottom: 7px solid rgba(0,0,0,.8); + } + .south { + bottom: -8px; + left: 4px; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-top: 7px solid rgba(0,0,0,.8); + } + .east { + bottom: 7px; + right: -9px; + border-top: 7px solid transparent; + border-bottom: 7px solid transparent; + border-left: 7px solid rgba(0,0,0,.8); + } + .west { + bottom: 7px; + left: -9px; + border-top: 7px solid transparent; + border-bottom: 7px solid transparent; + border-right: 7px solid rgba(0,0,0,.8); + } + .up { + top: 0px; + left: 2px; + } + .down { + bottom: 17px; + right: 10px; + } + } + .dir-n { + .north { + display: inline; + } + } + .dir-s { + .south { + display: inline; + } + } + .dir-e { + .east { + display: inline; + } + } + .dir-w { + .west { + display: inline; + } + } + .dir-u { + .up { + display: inline; + } + } + .dir-d { + .down { + display: inline; + } + } + .controls { + position: relative; + float: left; + width: 285px; + } + .wires-remaining { + float: right; + text-align: center; + font-size: 14px; + div { + font-size: 40px; + color: var(--accent); + margin-bottom: -5px; + margin-top: -10px; + } + } + .wires-remaining.error { + div { + color: #FF5700; + } + } + >.buttons { + margin-top: 10px; + } + .gridSections { + position: absolute; + z-index: -1; + width: 496px; + border: 1px solid rgb(236, 236, 236); + margin-top: -1px; + margin-left: -1px; + border-radius: 3px; + .block { + width: 122px; + height: 122px; + float: left; + border: solid 1px rgb(236, 236, 236); + } + } + .ui-selected { + box-shadow: inset 0 0 8px rgba(255, 0, 255, 1) !important; + border: solid 1px #000 !important; + } + .ui-selecting { + box-shadow: inset 0 0 30px rgba(255, 0, 255, .7) !important; + border: solid 1px #000 !important; + } + .ui-selectable-helper { + background: rgba(0,0,0,.4); + position: absolute; + z-index: 100; + border: 1px dotted white; + } +} +.gridWire { + .wire { + color: rgba(255,255,255,1); + } + background: rgba(15, 171, 22, .5) !important; +} +.colorDefineSliderValue { + width: 10px; + display: inline-table; + margin-bottom: 5px; +} +.colorDefineSliderLabel { + width: 10px; + display: inline-table; + margin-bottom: 5px; +} +@media all and (max-width: 575px) { + .tab-led-strip { + .controls { + width: 100%; + } + } +} diff --git a/src/css/tabs/logging.css b/src/css/tabs/logging.css deleted file mode 100644 index cb096634..00000000 --- a/src/css/tabs/logging.css +++ /dev/null @@ -1,79 +0,0 @@ -.tab-logging .properties { - margin-top: 10px; -} - -.tab-logging .properties dt { - float: left; - width: 120px; - height: 20px; - line-height: 20px; - font-weight: bold; -} - -.tab-logging .properties dt input { - vertical-align: middle; -} - -.tab-logging .properties dd { - display: block; - margin-left: 130px; - height: 20px; - line-height: 20px; - color: var(--subtleText); -} - -.tab-logging .speed { - margin-top: 5px; - width: 80px; - border: 1px solid var(--subtleAccent); - border-radius: 3px; -} - -.tab-logging .info { - margin-top: 10px; -} - -.tab-logging .info dt { - float: left; - width: 120px; - height: 20px; - line-height: 20px; - font-weight: bold; -} - -.tab-logging .info dd { - display: block; - margin-left: 130px; - height: 20px; - line-height: 20px; -} - -.tab-logging .fixed_band { - width: 100%; - bottom: 0; -} - -.tab-logging .save_btn .back { - display: none; -} - -.tab-logging .back_btn { - display: none; -} - -@media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) { - .tab-logging table thead tr:first-child { - font-size: 12px; - height: 22px; - } -} - -@media all and (max-width: 575px) { - .tab-logging .properties dd { - width: 100%; - height: auto; - } - .tab-logging .properties { - width: auto; - } -} diff --git a/src/css/tabs/logging.less b/src/css/tabs/logging.less new file mode 100644 index 00000000..df49bfb9 --- /dev/null +++ b/src/css/tabs/logging.less @@ -0,0 +1,95 @@ +.tab-logging { + .properties { + margin-top: 10px; + dt { + float: left; + width: 120px; + height: 20px; + line-height: 20px; + font-weight: bold; + input { + vertical-align: middle; + } + } + dd { + display: block; + margin-left: 130px; + height: 20px; + line-height: 20px; + color: var(--subtleText); + } + } + .speed { + margin-top: 5px; + width: 80px; + border: 1px solid var(--subtleAccent); + border-radius: 3px; + } + .info { + margin-top: 10px; + dt { + float: left; + width: 120px; + height: 20px; + line-height: 20px; + font-weight: bold; + } + dd { + display: block; + margin-left: 130px; + height: 20px; + line-height: 20px; + } + } + .fixed_band { + width: 100%; + bottom: 0; + } + .save_btn { + .back { + display: none; + } + } + .back_btn { + display: none; + } +} +@media only screen and (max-width: 1055px) { + .tab-logging { + table { + thead { + tr { + &:first-child { + font-size: 12px; + height: 22px; + } + } + } + } + } +} +@media only screen and (max-device-width: 1055px) { + .tab-logging { + table { + thead { + tr { + &:first-child { + font-size: 12px; + height: 22px; + } + } + } + } + } +} +@media all and (max-width: 575px) { + .tab-logging { + .properties { + dd { + width: 100%; + height: auto; + } + width: auto; + } + } +} diff --git a/src/css/tabs/motors.css b/src/css/tabs/motors.css deleted file mode 100644 index b23ca043..00000000 --- a/src/css/tabs/motors.css +++ /dev/null @@ -1,767 +0,0 @@ -.tab-motors .ui-grid-col { - margin-bottom: 0; -} - -.tab-motors select { - border: 1px solid var(--subtleAccent); - width: fit-content; - height: 20px; - margin-right: 80px; - border-radius: 3px; - float: left; -} - -.tab-motors table { - margin-bottom: 0; - width: 100%; - float: left; -} - -.tab-motors table, .tab-motors table th, .tab-motors table td { - padding: 0; - text-align: left; - border-collapse: collapse; -} - -.tab-motors table th { - padding: 3px; - border-bottom: 1px solid var(--subtleAccent); -} - -.tab-motors table td { - padding: 5px 3px; - margin-right: 20px; - border-bottom: 1px solid var(--subtleAccent); -} - -.tab-motors table tr td:first-child { - text-align: left; - width: 55px; -} - -.tab-motors table thead tr:first-child { - background-color: #ececec; -} - -.tab-motors { - position: relative; -} - -.tab-motors .groupTitle { - padding: 0 0 5px 0; - margin: 0 0 10px 0; - font-size: 16px; - border-bottom: 1px solid var(--subtleAccent); -} - -.tab-motors .mixerPreview img { - width: 150px; - height: 150px; - margin-left: 15px; -} - -.tab-motors #mixer.mixerList { - float: none; -} - -.tab-motors .featuresMultiple { - border-collapse: collapse; - margin-bottom: 5px; - margin-top: -5px; - padding: 0; -} - -.tab-motors dl.features dt { - float: left; - width: 10px; - height: 18px; - line-height: 18px; -} - -.tab-motors dl.features dt input { - margin-top: 2px; -} - -.tab-motors dl.features dd { - margin: 0 0 0 20px; - height: 18px; - line-height: 18px; -} - -.tab-motors .number input { - width: 55px; - padding-left: 3px; - height: 20px; - line-height: 20px; - text-align: left; - border-radius: 3px; - margin-right: 11px; - font-size: 12px; - font-weight: normal; -} - -.tab-motors .number .disabled { - width: 48px; - padding: 0 5px; - background-color: #ececec; -} - -.tab-motors .number span { - margin-left: 0; -} - -.tab-motors .disarm .checkboxPwm { - margin-top: 2px; - margin-right: 5px; -} - -.tab-motors .disarm .checkbox div { - margin-bottom: 0; - margin-top: 0; -} - -.tab-motors .disarm .checkbox div input { - margin: 0; - float: left; -} - -.tab-motors .disarm .checkbox span { - margin-left: 0; -} - -.tab-motors .freelabel { - margin-left: 10px; - position: relative; -} - -.tab-motors span { - margin: 0; -} - -.tab-motors .disarm .checkbox { - float: left; - padding-left: 0; - margin-top: -5px; - margin-right: 5px; - padding-bottom: 5px; - border-bottom: 1px solid var(--subtleAccent); - width: 100%; -} - -.tab-motors .spacer_box { - padding-bottom: 10px; - float: left; - width: calc(100% - 20px); -} - -.tab-motors .spacer_box.mixer_settings { - padding-bottom: 0px; -} - -.tab-motors .motor_direction_reversed { - padding-top: 10px; -} - -.tab-motors .motor_tool_buttons { - padding-left: 10px; -} - -.tab-motors .disarm { - margin-bottom: 5px; - float: left; - border-bottom: 1px solid var(--subtleAccent); - width: 100%; -} - -.tab-motors .disarmdelay { - margin-top: 5px; - float: left; - width: 100%; - border-bottom: 1px solid var(--subtleAccent); -} - -.tab-motors .number, -.tab-motors .select -{ - margin-bottom: 5px; - clear: left; - padding-bottom: 5px; - border-bottom: 1px solid var(--subtleAccent); - width: 100%; - float: left; -} - -.tab-motors .selectProtocol { - margin-bottom: 5px; - clear: left; - padding-bottom: 5px; - border-bottom: 1px solid var(--subtleAccent); - width: 100%; - float: left; -} - -.tab-motors .number:last-child, -.tab-motors .select:last-child { - border-bottom: none; - padding-bottom: 0; - margin-bottom: 0; -} - -.tab-motors .gui_box_titlebar { - margin-bottom: 0; -} - -.tab-motors .numberspacer { - float: left; - width: 65px; - height: 21px; -} - -.tab-motors thead { - display: none; -} - -.tab-motors .gui_box { - margin-bottom: 10px; - float: left; -} - -.tab-motors .gui_box span { - font-style: normal; - font-weight: normal; - line-height: 19px; - color: #4f4f4f; - font-size: 11px; -} - -.tab-motors .alignicon { - width: 15px; - height: 15px; - float: left; - margin: 3px; -} - -.tab-motors .mixer .gui_box, .tab-motors .motorstop .gui_box { - float: left; -} - -.tab-motors ._3dSettings { - margin-top: 10px; - float: left; - width: 100%; -} - -.tab-motors ._3d div { - margin-right: 17px; -} - -.tab-motors .modelAndGraph { - float: left; - width: 100%; - margin-bottom: 0; -} - -.tab-motors .spacer { - width: calc(100% - 34px); - margin: 10px; -} - -.tab-motors #graph { - float: left; - width: calc(100% - 160px); -} - -.tab-motors .btn .disabled { - cursor: default; - color: #fff; - background-color: #AFAFAF; - border: none; - pointer-events: none; - text-shadow: none; - opacity: 0.5; -} - -.tab-motors #dialogMotorOutputReorder-closebtn { - margin-right: 0px; - margin-bottom: 0px; -} - -.tab-motors dialog { - width: 400px; - height: 440px; -} - -.tab-motors #dialogMotorOutputReorderContentWrapper { - display: flex; - flex-flow: column; - width: 100%; - height: 100%; -} - -.tab-motors #dialogMotorOutputReorderContent { - flex-grow: 1; -} - -.tab-motors #escDshotDirectionDialog-closebtn { - margin-right: 0px; - margin-bottom: 0px; - position: absolute; - right: 0px; - bottom: 0px; -} - -.tab-motors #escDshotDirectionDialog-ContentWrapper { - display: flex; - flex-flow: column; - width: 100%; - height: 100%; - position: relative; -} - -.tab-motors #escDshotDirectionDialog-Content { - flex-grow: 1; -} - -.tab-motors #dialog-mixer-reset { - width: 400px; - height: fit-content; -} - -.tab-motors #dialog-settings-changed { - height: 120px; -} - -.tab-motors #dialog-settings-reset-confirmbtn { - margin-bottom: 12px; - position: relative; -} -.tab-motors #dialog-settings-changed-confirmbtn { - margin-right: 0px; - margin-bottom: 0px; - position: absolute; - right: 0px; - bottom: 0px; -} - -.tab-motors #dialog-settings-changed-content-wrapper { - display: flex; - flex-flow: column; - width: 100%; - height: 100%; - position: relative; -} - -.tab-motors #dialog-settings-changed-content { - flex-grow: 1; -} - -.tab-motors .dialog-buttons { - float: right; - margin-bottom: -3%; -} - -/*Plot Control*/ - -.tab-motors .plot_control { - float: right; - width: 160px; - height: 178px; - margin: 0; - background-color: #ECECEC; - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; -} - -.tab-motors .plot_control .table { - display:table; - width: 100%; - table-layout:fixed; - border-collapse:separate; - border-spacing:5px; - box-sizing: border-box; -} - -.tab-motors .plot_control .row-container { - display: table-row-group; -} - -.tab-motors .plot_control .motor-button a { - background-color: var(--accent); - border-radius: 3px; - border: 1px solid #e8b423; - color: #000; - font-size: 10px; - line-height: 17px; - text-shadow: 0 1px rgba(255, 255, 255, 0.25); - text-transform: uppercase; - letter-spacing: 0.03em; - display: block; - text-align: center; -} -.tab-motors .plot_control .row { - display: table-row; -} - -.tab-motors .plot_control .left-cell { - display: table-cell; - vertical-align: middle; -} -.tab-motors .plot_control .right-cell { - display: table-cell; - vertical-align: middle; - text-align: right; - width: 95px; - font-size: smaller; -} -.tab-motors .plot_control select { - width: 100%; - border: 1px solid var(--subtleAccent); - border-radius: 3px; -} - -.tab-motors .plot_control .value { - padding: 3px; - color: #fff; - border-radius: 3px; -} - -.tab-motors .plot_control .x { - background-color: #00A8F0; -} - -.tab-motors .plot_control .y { - background-color: #C0D800; -} - -.tab-motors .plot_control .z { - background-color: #CB4B4B; -} - -.tab-motors .plot_control .rms { - background-color: #00D800; -} - -/* Power info */ -.tab-motors .power_info { - float: left; - margin-left: 1em; -} - -.tab-motors .power_info .power_text { - font-weight: bold; -} - -.tab-motors .power_info .power_value { - margin-right: 2em; - margin-left: 1em; - display: inline-block; - text-align: left; - width: 50px; -} - -/*Motors*/ - -.tab-motors svg { - float: left; - width: calc(100% - 168px); /* (plot control, margin)*/ - height: 140px; - margin-top: 10px; - margin-bottom: 15px; -} - -.tab-motors .grid .tick { - stroke: silver; - stroke-width: 1px; - shape-rendering: crispEdges; -} - -.tab-motors .grid path { - stroke-width: 0; -} - -.tab-motors .data .line { - stroke-width: 2px; - fill: none; -} - -.tab-motors .axis path, .tab-motors .axis line { - fill: none; - stroke: #ccc; - stroke-width: 1px; - shape-rendering: crispEdges; -} - -.tab-motors text { - stroke: none; - fill: #828885; - font-size: 10px; -} - -.tab-motors .line:nth-child(1) { - stroke: #00A8F0; -} - -.tab-motors .line:nth-child(2) { - stroke: #C0D800; -} - -.tab-motors .line:nth-child(3) { - stroke: #CB4B4B; -} - -.tab-motors .motorblock { - margin-bottom: 0; - background-color: #ECECEC; -} - -.tab-motors .left.motors { - float: left; - width: 100%; -} - -.tab-motors .title { - padding-bottom: 2px; - text-align: center; - font-weight: bold; -} - -.tab-motors .title2 { - padding-bottom: 2px; - text-align: center; - font-size: 12px; - font-weight: 300; -} - -.tab-motors .titles { - height: 20px; -} - -.tab-motors .titles li { - float: left; - width: calc((100% / 9) - 10px); - margin-right: 10px; - text-align: center; -} - -.tab-motors .titles .active { - color: green; -} - -.tab-motors .m-block { - float: left; - width: calc((100% / 9) - 10px); - height: 100px; - margin-right: 10px; - text-align: center; - background-color: #f4f4f4; - border-radius: 3px; - box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); -} - -.tab-motors .m-block .meter-bar { - position: relative; - width: 100%; - height: 100px; - box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); - background-color: #E0E0E0; - border-radius: 3px; - border: 1px solid #F5F5F5; -} - -.tab-motors .m-block .label { - position: absolute; - width: 100%; - bottom: 45px; - text-align: center; - font-weight: bold; - font-size: 10px; - color: #474747; -} - -.tab-motors .m-block .label.rpm_info { - bottom: 28px; -} - -.tab-motors .m-block .indicator .label { - color: white; -} - -.tab-motors .indicator { - position: absolute; - overflow: hidden; - width: 100%; - text-align: center; - border-radius: 2px; -} - -.tab-motors .motor_testing { - margin-top: 5px; - margin-bottom: 0; - padding: 0; - border: 0; - list-style: none; - outline: none; -} - -.tab-motors .motor_testing .left { - width: 100%; -} - -.tab-motors .motor_testing .sliders input { - -webkit-appearance: slider-vertical; - width: calc((100% / 9) - 13px); - height: 73px; - margin-left: 10px; -} - -.tab-motors .motor_testing .sliders input:first-child { - margin-left: 0; -} - -.tab-motors .motor_testing .values { - margin-top: 5px; -} - -.tab-motors .motor_testing .telemetry { - display: flow-root; - margin-bottom: 5px; -} - -.tab-motors .motor_testing .telemetry .warning { - color: var(--error); -} - -.tab-motors .motor_testing .values li:first-child, -.tab-motors .motor_testing .telemetry li:first-child { - margin-left: 0; -} - -.tab-motors .motor_testing .values li, -.tab-motors .motor_testing .telemetry li { - float: left; - width: calc((100% / 9) - 10px); - margin-left: 10px; - text-align: center; - font-size: 10px; -} - -.tab-motors .motor_testing .telemetry li { - white-space: pre; -} - -.tab-motors .motor_testing .notice { - float: right; - padding: 5px; - border: 2px solid var(--subtleAccent); - border-radius: 3px; - background-color: #FFFFFF; - font-size: 11px; - margin-top: 10px; -} - -.tab-motors .motor_testing .notice p { - margin-bottom: 10px; -} - -.tab-motors .motor_testing .notice .motorsEnableTestMode { - margin-left: 10px; -} - -.tab-motors .motorDialogButtons { - float: right; -} - -@media all and (max-width: 575px) { - .tab-motors .modelAndGraph { - display: flex; - flex-wrap: wrap; - } - .tab-motors .mixer .gui_box, .tab-motors .motorstop .gui_box { - min-height: auto; - } - .tab-motors #graph { - width: 100%; - order: 2; - } - .tab-motors .plot_control { - order: 1; - } - .tab-motors .power_info { - order: 3; - width: 100%; - margin-top: 10px; - } - .tab-motors .motorblock { - margin-bottom: 15px; - } - .tab-motors .motorblock > .spacer { - display: flex; - flex-wrap: wrap; - } - .tab-motors .left.motors { - width: 100%; - order: 1; - } - .tab-motors .motor_testing { - width: 100%; - display: flex; - flex-wrap: wrap; - order: 2; - } - .tab-motors .motor_testing .notice { - width: 100%; - margin-top: 15px; - } - .tab-motors .titles li, .tab-motors .m-block { - width: calc((100% - 80px) / 9); - } - .tab-motors .titles li:last-child, .tab-motors .m-block:last-child { - margin-right: 0; - } - .tab-motors .motor_testing .left { - width: 100%; - } - .tab-motors .motor_testing .sliders { - margin-left: 2px; - margin-right: -2px; - } - .tab-motors .motor_testing .sliders input { - width: calc((100% - 108px) / 9); - } - .tab-motors .motor_testing .values li, .tab-motors .motor_testing .telemetry li { - width: calc((100% - 80px) / 9); - } - .tab-motors .motor_testing .values li:last-child { - margin-left: 4px; - } - .tab-motors .motor_testing .telemetry span { - font-size: 6px; - } -} - -@media all and (max-width: 1055px) { - .tab-motors .gui_box span { - line-height: 17px; - } - .tab-motors .mixer .gui_box, .tab-motors .motorstop .gui_box { - float: left; - } -} - -@media all and (max-width: 1600px) { - .tab-motors select .escprotocol { - margin-left: 24px; - } -} - -@media all and (min-width: 1920px) { - .tab-motors select .escprotocol { - margin-left: 48px; - } - .tab-motors ._3d div { - margin-right: 17px; - } - .tab-motors select { - margin-right: 120px; - } -} diff --git a/src/css/tabs/motors.less b/src/css/tabs/motors.less new file mode 100644 index 00000000..07f673a6 --- /dev/null +++ b/src/css/tabs/motors.less @@ -0,0 +1,753 @@ +.tab-motors { + .ui-grid-col { + margin-bottom: 0; + } + select { + border: 1px solid var(--subtleAccent); + width: fit-content; + height: 20px; + margin-right: 80px; + border-radius: 3px; + float: left; + } + table { + margin-bottom: 0; + width: 100%; + float: left; + padding: 0; + text-align: left; + border-collapse: collapse; + th { + text-align: left; + border-collapse: collapse; + padding: 3px; + border-bottom: 1px solid var(--subtleAccent); + } + td { + text-align: left; + border-collapse: collapse; + padding: 5px 3px; + margin-right: 20px; + border-bottom: 1px solid var(--subtleAccent); + } + tr { + td { + &:first-child { + text-align: left; + width: 55px; + } + } + } + thead { + tr { + &:first-child { + background-color: #ececec; + } + } + } + } + position: relative; + .groupTitle { + padding: 0 0 5px 0; + margin: 0 0 10px 0; + font-size: 16px; + border-bottom: 1px solid var(--subtleAccent); + } + .mixerPreview { + img { + width: 150px; + height: 150px; + margin-left: 15px; + } + } + #mixer.mixerList { + float: none; + } + .featuresMultiple { + border-collapse: collapse; + margin-bottom: 5px; + margin-top: -5px; + padding: 0; + } + dl.features { + dt { + float: left; + width: 10px; + height: 18px; + line-height: 18px; + input { + margin-top: 2px; + } + } + dd { + margin: 0 0 0 20px; + height: 18px; + line-height: 18px; + } + } + .number { + input { + width: 55px; + padding-left: 3px; + height: 20px; + line-height: 20px; + text-align: left; + border-radius: 3px; + margin-right: 11px; + font-size: 12px; + font-weight: normal; + } + .disabled { + width: 48px; + padding: 0 5px; + background-color: #ececec; + } + span { + margin-left: 0; + } + margin-bottom: 5px; + clear: left; + padding-bottom: 5px; + border-bottom: 1px solid var(--subtleAccent); + width: 100%; + float: left; + &:last-child { + border-bottom: none; + padding-bottom: 0; + margin-bottom: 0; + } + } + .disarm { + .checkboxPwm { + margin-top: 2px; + margin-right: 5px; + } + .checkbox { + div { + margin-bottom: 0; + margin-top: 0; + input { + margin: 0; + float: left; + } + } + span { + margin-left: 0; + } + float: left; + padding-left: 0; + margin-top: -5px; + margin-right: 5px; + padding-bottom: 5px; + border-bottom: 1px solid var(--subtleAccent); + width: 100%; + } + margin-bottom: 5px; + float: left; + border-bottom: 1px solid var(--subtleAccent); + width: 100%; + } + .freelabel { + margin-left: 10px; + position: relative; + } + span { + margin: 0; + } + .spacer_box { + padding-bottom: 10px; + float: left; + width: calc(100% - 20px); + } + .spacer_box.mixer_settings { + padding-bottom: 0px; + } + .motor_direction_reversed { + padding-top: 10px; + } + .motor_tool_buttons { + padding-left: 10px; + } + .disarmdelay { + margin-top: 5px; + float: left; + width: 100%; + border-bottom: 1px solid var(--subtleAccent); + } + .select { + margin-bottom: 5px; + clear: left; + padding-bottom: 5px; + border-bottom: 1px solid var(--subtleAccent); + width: 100%; + float: left; + &:last-child { + border-bottom: none; + padding-bottom: 0; + margin-bottom: 0; + } + } + .selectProtocol { + margin-bottom: 5px; + clear: left; + padding-bottom: 5px; + border-bottom: 1px solid var(--subtleAccent); + width: 100%; + float: left; + } + .gui_box_titlebar { + margin-bottom: 0; + } + .numberspacer { + float: left; + width: 65px; + height: 21px; + } + thead { + display: none; + } + .gui_box { + margin-bottom: 10px; + float: left; + span { + font-style: normal; + font-weight: normal; + line-height: 19px; + color: #4f4f4f; + font-size: 11px; + } + } + .alignicon { + width: 15px; + height: 15px; + float: left; + margin: 3px; + } + .mixer { + .gui_box { + float: left; + } + } + .motorstop { + .gui_box { + float: left; + } + } + ._3dSettings { + margin-top: 10px; + float: left; + width: 100%; + } + ._3d { + div { + margin-right: 17px; + } + } + .modelAndGraph { + float: left; + width: 100%; + margin-bottom: 0; + } + .spacer { + width: calc(100% - 34px); + margin: 10px; + } + #graph { + float: left; + width: calc(100% - 160px); + } + .btn { + .disabled { + cursor: default; + color: #fff; + background-color: #AFAFAF; + border: none; + pointer-events: none; + text-shadow: none; + opacity: 0.5; + } + } + #dialogMotorOutputReorder-closebtn { + margin-right: 0px; + margin-bottom: 0px; + } + dialog { + width: 400px; + height: 440px; + } + #dialogMotorOutputReorderContentWrapper { + display: flex; + flex-flow: column; + width: 100%; + height: 100%; + } + #dialogMotorOutputReorderContent { + flex-grow: 1; + } + #escDshotDirectionDialog-closebtn { + margin-right: 0px; + margin-bottom: 0px; + position: absolute; + right: 0px; + bottom: 0px; + } + #escDshotDirectionDialog-ContentWrapper { + display: flex; + flex-flow: column; + width: 100%; + height: 100%; + position: relative; + } + #escDshotDirectionDialog-Content { + flex-grow: 1; + } + #dialog-mixer-reset { + width: 400px; + height: fit-content; + } + #dialog-settings-changed { + height: 120px; + } + #dialog-settings-reset-confirmbtn { + margin-bottom: 12px; + position: relative; + } + #dialog-settings-changed-confirmbtn { + margin-right: 0px; + margin-bottom: 0px; + position: absolute; + right: 0px; + bottom: 0px; + } + #dialog-settings-changed-content-wrapper { + display: flex; + flex-flow: column; + width: 100%; + height: 100%; + position: relative; + } + #dialog-settings-changed-content { + flex-grow: 1; + } + .dialog-buttons { + float: right; + margin-bottom: -3%; + } + .plot_control { + float: right; + width: 160px; + height: 178px; + margin: 0; + background-color: #ECECEC; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + .table { + display: table; + width: 100%; + table-layout: fixed; + border-collapse: separate; + border-spacing: 5px; + box-sizing: border-box; + } + .row-container { + display: table-row-group; + } + .motor-button { + a { + background-color: var(--accent); + border-radius: 3px; + border: 1px solid #e8b423; + color: #000; + font-size: 10px; + line-height: 17px; + text-shadow: 0 1px rgba(255, 255, 255, 0.25); + text-transform: uppercase; + letter-spacing: 0.03em; + display: block; + text-align: center; + } + } + .row { + display: table-row; + } + .left-cell { + display: table-cell; + vertical-align: middle; + } + .right-cell { + display: table-cell; + vertical-align: middle; + text-align: right; + width: 95px; + font-size: smaller; + } + select { + width: 100%; + border: 1px solid var(--subtleAccent); + border-radius: 3px; + } + .value { + padding: 3px; + color: #fff; + border-radius: 3px; + } + .x { + background-color: #00A8F0; + } + .y { + background-color: #C0D800; + } + .z { + background-color: #CB4B4B; + } + .rms { + background-color: #00D800; + } + } + .power_info { + float: left; + margin-left: 1em; + .power_text { + font-weight: bold; + } + .power_value { + margin-right: 2em; + margin-left: 1em; + display: inline-block; + text-align: left; + width: 50px; + } + } + svg { + float: left; + width: calc(100% - 168px); + height: 140px; + margin-top: 10px; + margin-bottom: 15px; + } + .grid { + .tick { + stroke: silver; + stroke-width: 1px; + shape-rendering: crispEdges; + } + path { + stroke-width: 0; + } + } + .data { + .line { + stroke-width: 2px; + fill: none; + } + } + .axis { + path { + fill: none; + stroke: #ccc; + stroke-width: 1px; + shape-rendering: crispEdges; + } + line { + fill: none; + stroke: #ccc; + stroke-width: 1px; + shape-rendering: crispEdges; + } + } + text { + stroke: none; + fill: #828885; + font-size: 10px; + } + .line { + &:nth-child(1) { + stroke: #00A8F0; + } + &:nth-child(2) { + stroke: #C0D800; + } + &:nth-child(3) { + stroke: #CB4B4B; + } + } + .motorblock { + margin-bottom: 0; + background-color: #ECECEC; + } + .left.motors { + float: left; + width: 100%; + } + .title { + padding-bottom: 2px; + text-align: center; + font-weight: bold; + } + .title2 { + padding-bottom: 2px; + text-align: center; + font-size: 12px; + font-weight: 300; + } + .titles { + height: 20px; + li { + float: left; + width: calc((100% / 9) - 10px); + margin-right: 10px; + text-align: center; + } + .active { + color: green; + } + } + .m-block { + float: left; + width: calc((100% / 9) - 10px); + height: 100px; + margin-right: 10px; + text-align: center; + background-color: #f4f4f4; + border-radius: 3px; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); + .meter-bar { + position: relative; + width: 100%; + height: 100px; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); + background-color: #E0E0E0; + border-radius: 3px; + border: 1px solid #F5F5F5; + } + .label { + position: absolute; + width: 100%; + bottom: 45px; + text-align: center; + font-weight: bold; + font-size: 10px; + color: #474747; + } + .label.rpm_info { + bottom: 28px; + } + .indicator { + .label { + color: white; + } + } + } + .indicator { + position: absolute; + overflow: hidden; + width: 100%; + text-align: center; + border-radius: 2px; + } + .motor_testing { + margin-top: 5px; + margin-bottom: 0; + padding: 0; + border: 0; + list-style: none; + outline: none; + .left { + width: 100%; + } + .sliders { + input { + -webkit-appearance: slider-vertical; + width: calc((100% / 9) - 13px); + height: 73px; + margin-left: 10px; + &:first-child { + margin-left: 0; + } + } + } + .values { + margin-top: 5px; + li { + &:first-child { + margin-left: 0; + } + float: left; + width: calc((100% / 9) - 10px); + margin-left: 10px; + text-align: center; + font-size: 10px; + } + } + .telemetry { + display: flow-root; + margin-bottom: 5px; + .warning { + color: var(--error); + } + li { + &:first-child { + margin-left: 0; + } + float: left; + width: calc((100% / 9) - 10px); + margin-left: 10px; + text-align: center; + font-size: 10px; + white-space: pre; + } + } + .notice { + float: right; + padding: 5px; + border: 2px solid var(--subtleAccent); + border-radius: 3px; + background-color: #FFFFFF; + font-size: 11px; + margin-top: 10px; + p { + margin-bottom: 10px; + } + .motorsEnableTestMode { + margin-left: 10px; + } + } + } + .motorDialogButtons { + float: right; + } +} +@media all and (max-width: 575px) { + .tab-motors { + .modelAndGraph { + display: flex; + flex-wrap: wrap; + } + .mixer { + .gui_box { + min-height: auto; + } + } + .motorstop { + .gui_box { + min-height: auto; + } + } + #graph { + width: 100%; + order: 2; + } + .plot_control { + order: 1; + } + .power_info { + order: 3; + width: 100%; + margin-top: 10px; + } + .motorblock { + margin-bottom: 15px; + >.spacer { + display: flex; + flex-wrap: wrap; + } + } + .left.motors { + width: 100%; + order: 1; + } + .motor_testing { + width: 100%; + display: flex; + flex-wrap: wrap; + order: 2; + .notice { + width: 100%; + margin-top: 15px; + } + .left { + width: 100%; + } + .sliders { + margin-left: 2px; + margin-right: -2px; + input { + width: calc((100% - 108px) / 9); + } + } + .values { + li { + width: calc((100% - 80px) / 9); + &:last-child { + margin-left: 4px; + } + } + } + .telemetry { + li { + width: calc((100% - 80px) / 9); + } + span { + font-size: 6px; + } + } + } + .titles { + li { + width: calc((100% - 80px) / 9); + &:last-child { + margin-right: 0; + } + } + } + .m-block { + width: calc((100% - 80px) / 9); + &:last-child { + margin-right: 0; + } + } + } +} +@media all and (max-width: 1055px) { + .tab-motors { + .gui_box { + span { + line-height: 17px; + } + } + .mixer { + .gui_box { + float: left; + } + } + .motorstop { + .gui_box { + float: left; + } + } + } +} +@media all and (max-width: 1600px) { + .tab-motors { + select { + .escprotocol { + margin-left: 24px; + } + } + } +} +@media all and (min-width: 1920px) { + .tab-motors { + select { + .escprotocol { + margin-left: 48px; + } + margin-right: 120px; + } + ._3d { + div { + margin-right: 17px; + } + } + } +} diff --git a/src/css/tabs/onboard_logging.css b/src/css/tabs/onboard_logging.css deleted file mode 100644 index c234c4bd..00000000 --- a/src/css/tabs/onboard_logging.css +++ /dev/null @@ -1,317 +0,0 @@ -.tab-onboard_logging .info { - margin: 0 0 10px 0; - position: relative; -} - -.tab-onboard_logging .info .progressLabel { - position: absolute; - width: 100%; - height: 26px; - top: 0; - left: 0; - text-align: center; - line-height: 24px; - color: white; - font-weight: bold; - /* text-shadow: 1px 0px 2px rgba(0, 0, 0, 0.9);*/ -} - -.tab-onboard_logging .properties { - margin-top: 10px; -} - -.tab-onboard_logging .dataflash-info { - overflow: hidden; -} - -.tab-onboard_logging .dataflash-info dt { - float: left; - width: 12em; - height: 20px; - line-height: 20px; - font-weight: bold; -} - -.tab-onboard_logging .dataflash-info dd { - display: block; - height: 20px; - line-height: 20px; -} - -.tab-onboard_logging .speed { - margin-top: 5px; - width: 80px; - border: 1px solid var(--subtleAccent); -} - -.tab-onboard_logging .info { - margin-top: 10px; -} - -.tab-onboard_logging .info dt { - float: left; - width: 120px; - height: 20px; - line-height: 20px; - font-weight: bold; -} - -.tab-onboard_logging .info dd { - display: block; - margin-left: 130px; - height: 20px; - line-height: 20px; -} - -.tab-onboard_logging .buttons { - width: calc(100% - 20px); - position: absolute; - bottom: 10px; -} - -.tab-onboard_logging .dataflash-progress { - display: none; -} - -.tab-onboard_logging .dataflash-contents, -.tab-onboard_logging .sdcard-contents { - margin-top: 15px; - margin-bottom:26px; - border: 1px solid var(--subtleAccent); - background-color: #eee; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: flex-start; - border-radius: 6px; -} - -.tab-onboard_logging .dataflash-contents li, -.tab-onboard_logging .sdcard-contents li { - height: 26px; - position: relative; - box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.20); - border-radius: 4px; -} - -.tab-onboard_logging .dataflash-contents li div, -.tab-onboard_logging .sdcard-contents li div { - position: absolute; - top: 26px; - margin-top: 4px; - text-align: center; - left: 0; - right: 0; - white-space: nowrap; -} - -.tab-onboard_logging .dataflash-used, -.tab-onboard_logging .sdcard-other { - background-color: var(--accent); - border-radius: 4px; -} - -.tab-onboard_logging .dataflash-free, -.tab-onboard_logging .sdcard-free { - direction: rtl; -} - -.tab-onboard_logging progress::-webkit-progress-bar { - height: 24px; - background-color: #eee; -} - -.tab-onboard_logging progress::-webkit-progress-value { - background-color: #bcf; -} - -.tab-onboard_logging dialog { - width: 40em; - border-radius: 5px; -} - -.tab-onboard_logging dialog .buttons { - position: static; - margin-top: 2em; -} - -.tab-onboard_logging dialog h3 { - margin-bottom: 0.5em; -} - -@media all and (max-width: 575px) { - .tab-onboard_logging dialog { - width: calc(100% - 2em); - border-radius: unset; - } -} - -.dataflash-confirm-erase .dataflash-erase-progress { - height: 125px; - display: none; - border-radius: 5px; -} - -.dataflash-buttons { - display: inline-block; -} - -.tab-onboard_logging .save-flash .helpicon { - margin: 4px 0 0 7px; - display: inline-block; - float: unset; -} - -.dataflash-confirm-erase.erasing .dataflash-erase-progress { - display: block; -} - -.dataflash-confirm-erase.erasing h3, .dataflash-confirm-erase.erasing .erase-flash-confirm, .dataflash-confirm-erase.erasing .dataflash-confirm-erase-note - { - display: none; -} - -.tab-onboard_logging progress { - display: block; - width: 100%; - margin: 1em 0; -} - -.dataflash-saving .dataflash-saving-after { - display: none; -} - -.dataflash-saving.done .dataflash-saving-before { - display: none; -} - -.dataflash-saving.done .dataflash-saving-after { - display: block; -} - -.require-dataflash-present, -.require-dataflash-supported, -.require-sdcard-ready, -.require-sdcard-supported, -.require-blackbox-supported, -.require-blackbox-maybe-supported, -.require-blackbox-unsupported, -.require-blackbox-config-supported, -.tab-onboard_logging.dataflash-present .require-dataflash-not-present, -.tab-onboard_logging.dataflash-supported .require-dataflash-unsupported, -.tab-onboard_logging.sdcard-supported .require-sdcard-unsupported, -.tab-onboard_logging.blackbox-config-supported .require-blackbox-config-unsupported { - display: none; -} - -.tab-onboard_logging.dataflash-present .require-dataflash-present, -.tab-onboard_logging.dataflash-supported .require-dataflash-supported, -.tab-onboard_logging.sdcard-ready .require-sdcard-ready, -.tab-onboard_logging.sdcard-supported .require-sdcard-supported, -.tab-onboard_logging.blackbox-supported .require-blackbox-supported, -.tab-onboard_logging.blackbox-maybe-supported .require-blackbox-maybe-supported, -.tab-onboard_logging.blackbox-unsupported .require-blackbox-unsupported, -.tab-onboard_logging.blackbox-config-supported .require-blackbox-config-supported { - display: block; -} - -.require-no-dataflash { - display: block; -} - -.tab-onboard_logging.supported .require-no-dataflash { - display: none; -} - -.tab-onboard_logging .require-msc-supported { - display: none; -} - -.tab-onboard_logging.msc-supported .require-msc-supported { - display: inherit; -} - -.tab-onboard_logging .require-msc-not-supported { - display: inherit; -} - -.tab-onboard_logging.msc-supported .require-msc-not-supported { - display: none; -} - -.require-msc-not-ready { - display: none; -} - -.tab-onboard_logging.msc-not-ready .require-msc-not-ready { - display: block; -} - -@media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) { - .tab-onboard_logging table thead tr:first-child { - font-size: 12px; - height: 22px; - } -} - -.tab-onboard_logging .line { - clear: left; -} -.tab-onboard_logging .blackboxRate select, -.tab-onboard_logging .blackboxDebugMode select, -.tab-onboard_logging .blackboxDevice select { - float: left; - width: 180px; - height: 20px; - margin: 0 10px 5px 0; - border: 1px solid var(--subtleAccent); - border-radius: 3px; -} -.tab-onboard_logging .blackboxRate span, -.tab-onboard_logging .blackboxDebugMode span, -.tab-onboard_logging .blackboxDevice span { - line-height: 20px; -} -.tab-onboard_logging .blackboxDebugModeText { - margin-left: 7px !important; -} -.tab-onboard_logging .sdcard { - padding:10px; - float:left; -} -.tab-onboard_logging .sdcard-status { - padding-top: 4px; - text-align: center; -} -.tab-onboard_logging.sdcard-error .sdcard-icon { - background-color: #e60000; - border: 1px solid #fe0000; -} -.tab-onboard_logging.sdcard-initializing .sdcard-icon { - background-color: #64a5f6; - border: 1px solid #68a7ff; -} -.tab-onboard_logging.sdcard-ready .sdcard-icon { - background-color: #56ac1d; - border: 1px solid #5bbb1b; -} -.tab-onboard_logging .sdcard-icon { - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); - width: 90px; - height: 90px; - background-image: url(../../images/icons/cf_icon_sdcard.svg); - background-position: 21px 20px; - background-size: 50px 50px; - background-repeat: no-repeat; - - background-color: #808080; - border: 1px solid #888888; - - border-radius: 45px; -} - -@media all and (max-width: 575px) { - .tab-onboard_logging .blackboxRate select, .tab-onboard_logging .blackboxDebugMode select, .tab-onboard_logging .blackboxDevice select { - width: 120px; - } -} diff --git a/src/css/tabs/onboard_logging.less b/src/css/tabs/onboard_logging.less new file mode 100644 index 00000000..215559df --- /dev/null +++ b/src/css/tabs/onboard_logging.less @@ -0,0 +1,433 @@ +.tab-onboard_logging { + .info { + margin: 0 0 10px 0; + position: relative; + margin-top: 10px; + .progressLabel { + position: absolute; + width: 100%; + height: 26px; + top: 0; + left: 0; + text-align: center; + line-height: 24px; + color: white; + font-weight: bold; + } + dt { + float: left; + width: 120px; + height: 20px; + line-height: 20px; + font-weight: bold; + } + dd { + display: block; + margin-left: 130px; + height: 20px; + line-height: 20px; + } + } + .properties { + margin-top: 10px; + } + .dataflash-info { + overflow: hidden; + dt { + float: left; + width: 12em; + height: 20px; + line-height: 20px; + font-weight: bold; + } + dd { + display: block; + height: 20px; + line-height: 20px; + } + } + .speed { + margin-top: 5px; + width: 80px; + border: 1px solid var(--subtleAccent); + } + .buttons { + width: calc(100% - 20px); + position: absolute; + bottom: 10px; + } + .dataflash-progress { + display: none; + } + .dataflash-contents { + margin-top: 15px; + margin-bottom: 26px; + border: 1px solid var(--subtleAccent); + background-color: #eee; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + border-radius: 6px; + li { + height: 26px; + position: relative; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.20); + border-radius: 4px; + div { + position: absolute; + top: 26px; + margin-top: 4px; + text-align: center; + left: 0; + right: 0; + white-space: nowrap; + } + } + } + .sdcard-contents { + margin-top: 15px; + margin-bottom: 26px; + border: 1px solid var(--subtleAccent); + background-color: #eee; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + border-radius: 6px; + li { + height: 26px; + position: relative; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.20); + border-radius: 4px; + div { + position: absolute; + top: 26px; + margin-top: 4px; + text-align: center; + left: 0; + right: 0; + white-space: nowrap; + } + } + } + .dataflash-used { + background-color: var(--accent); + border-radius: 4px; + } + .sdcard-other { + background-color: var(--accent); + border-radius: 4px; + } + .dataflash-free { + direction: rtl; + } + .sdcard-free { + direction: rtl; + } + progress { + &::-webkit-progress-bar { + height: 24px; + background-color: #eee; + } + &::-webkit-progress-value { + background-color: #bcf; + } + display: block; + width: 100%; + margin: 1em 0; + } + dialog { + width: 40em; + border-radius: 5px; + .buttons { + position: static; + margin-top: 2em; + } + h3 { + margin-bottom: 0.5em; + } + } + .save-flash { + .helpicon { + margin: 4px 0 0 7px; + display: inline-block; + float: unset; + } + } + .require-msc-supported { + display: none; + } + .require-msc-not-supported { + display: inherit; + } + .line { + clear: left; + } + .blackboxRate { + select { + float: left; + width: 180px; + height: 20px; + margin: 0 10px 5px 0; + border: 1px solid var(--subtleAccent); + border-radius: 3px; + } + span { + line-height: 20px; + } + } + .blackboxDebugMode { + select { + float: left; + width: 180px; + height: 20px; + margin: 0 10px 5px 0; + border: 1px solid var(--subtleAccent); + border-radius: 3px; + } + span { + line-height: 20px; + } + } + .blackboxDevice { + select { + float: left; + width: 180px; + height: 20px; + margin: 0 10px 5px 0; + border: 1px solid var(--subtleAccent); + border-radius: 3px; + } + span { + line-height: 20px; + } + } + .blackboxDebugModeText { + margin-left: 7px !important; + } + .sdcard { + padding: 10px; + float: left; + } + .sdcard-status { + padding-top: 4px; + text-align: center; + } + .sdcard-icon { + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); + width: 90px; + height: 90px; + background-image: url(../../images/icons/cf_icon_sdcard.svg); + background-position: 21px 20px; + background-size: 50px 50px; + background-repeat: no-repeat; + background-color: #808080; + border: 1px solid #888888; + border-radius: 45px; + } +} +.dataflash-confirm-erase { + .dataflash-erase-progress { + height: 125px; + display: none; + border-radius: 5px; + } +} +.dataflash-buttons { + display: inline-block; +} +.dataflash-confirm-erase.erasing { + .dataflash-erase-progress { + display: block; + } + h3 { + display: none; + } + .erase-flash-confirm { + display: none; + } + .dataflash-confirm-erase-note { + display: none; + } +} +.dataflash-saving { + .dataflash-saving-after { + display: none; + } +} +.dataflash-saving.done { + .dataflash-saving-before { + display: none; + } + .dataflash-saving-after { + display: block; + } +} +.require-dataflash-present { + display: none; +} +.require-dataflash-supported { + display: none; +} +.require-sdcard-ready { + display: none; +} +.require-sdcard-supported { + display: none; +} +.require-blackbox-supported { + display: none; +} +.require-blackbox-maybe-supported { + display: none; +} +.require-blackbox-unsupported { + display: none; +} +.require-blackbox-config-supported { + display: none; +} +.tab-onboard_logging.dataflash-present { + .require-dataflash-not-present { + display: none; + } + .require-dataflash-present { + display: block; + } +} +.tab-onboard_logging.dataflash-supported { + .require-dataflash-unsupported { + display: none; + } + .require-dataflash-supported { + display: block; + } +} +.tab-onboard_logging.sdcard-supported { + .require-sdcard-unsupported { + display: none; + } + .require-sdcard-supported { + display: block; + } +} +.tab-onboard_logging.blackbox-config-supported { + .require-blackbox-config-unsupported { + display: none; + } + .require-blackbox-config-supported { + display: block; + } +} +.tab-onboard_logging.sdcard-ready { + .require-sdcard-ready { + display: block; + } + .sdcard-icon { + background-color: #56ac1d; + border: 1px solid #5bbb1b; + } +} +.tab-onboard_logging.blackbox-supported { + .require-blackbox-supported { + display: block; + } +} +.tab-onboard_logging.blackbox-maybe-supported { + .require-blackbox-maybe-supported { + display: block; + } +} +.tab-onboard_logging.blackbox-unsupported { + .require-blackbox-unsupported { + display: block; + } +} +.require-no-dataflash { + display: block; +} +.tab-onboard_logging.supported { + .require-no-dataflash { + display: none; + } +} +.tab-onboard_logging.msc-supported { + .require-msc-supported { + display: inherit; + } + .require-msc-not-supported { + display: none; + } +} +.require-msc-not-ready { + display: none; +} +.tab-onboard_logging.msc-not-ready { + .require-msc-not-ready { + display: block; + } +} +.tab-onboard_logging.sdcard-error { + .sdcard-icon { + background-color: #e60000; + border: 1px solid #fe0000; + } +} +.tab-onboard_logging.sdcard-initializing { + .sdcard-icon { + background-color: #64a5f6; + border: 1px solid #68a7ff; + } +} +@media all and (max-width: 575px) { + .tab-onboard_logging { + dialog { + width: calc(100% - 2em); + border-radius: unset; + } + .blackboxRate { + select { + width: 120px; + } + } + .blackboxDebugMode { + select { + width: 120px; + } + } + .blackboxDevice { + select { + width: 120px; + } + } + } +} +@media only screen and (max-width: 1055px) { + .tab-onboard_logging { + table { + thead { + tr { + &:first-child { + font-size: 12px; + height: 22px; + } + } + } + } + } +} +@media only screen and (max-device-width: 1055px) { + .tab-onboard_logging { + table { + thead { + tr { + &:first-child { + font-size: 12px; + height: 22px; + } + } + } + } + } +} diff --git a/src/css/tabs/options.css b/src/css/tabs/options.css deleted file mode 100644 index 6dd146ae..00000000 --- a/src/css/tabs/options.css +++ /dev/null @@ -1,19 +0,0 @@ -.tab-options .freelabel { - margin-left: 10px; - position: relative; -} -.tab-options .switchery { - float: left; -} -.tab-options .margin-bottom { - margin-bottom: 10px; - display: grid; - grid-template-columns: fit-content(300px) 1fr; -} -.tab-options select { - background: var(--boxBackground); - color: var(--defaultText); - border: 1px solid var(--subtleAccent); - border-radius: 3px; - width: fit-content; -} diff --git a/src/css/tabs/options.less b/src/css/tabs/options.less new file mode 100644 index 00000000..6a0208ac --- /dev/null +++ b/src/css/tabs/options.less @@ -0,0 +1,21 @@ +.tab-options { + .freelabel { + margin-left: 10px; + position: relative; + } + .switchery { + float: left; + } + .margin-bottom { + margin-bottom: 10px; + display: grid; + grid-template-columns: fit-content(300px) 1fr; + } + select { + background: var(--boxBackground); + color: var(--defaultText); + border: 1px solid var(--subtleAccent); + border-radius: 3px; + width: fit-content; + } +} diff --git a/src/css/tabs/osd.css b/src/css/tabs/osd.css deleted file mode 100644 index 0a8d34df..00000000 --- a/src/css/tabs/osd.css +++ /dev/null @@ -1,629 +0,0 @@ -.tab-osd .info { - margin: 10px 0 0 0; - position: relative; -} - -.tab-osd .info .progressLabel { - position: absolute; - width: 100%; - height: 26px; - top: 0; - left: 0; - text-align: center; - line-height: 24px; - color: white; - font-weight: bold; - - /* text-shadow: 1px 0px 2px rgba(0, 0, 0, 0.9);*/ -} - -.tab-osd .spacer_box_title { - float: none; - font-weight: normal; -} - -.tab-osd .spacer_box_title .profileOsdHeader { - padding: 6px; -} - -.tab-osd .info { - float: left; - width: 100%; -} - -.info .progressLabel { - color: white; -} - -.info .progressLabel a { - color: white; -} - -.info .progressLabel a:hover { - text-decoration: underline; -} - -.info .progress { - width: 100%; - height: 26px; - border-radius: 5px; - border: 1px solid var(--subtleAccent); -} - -.info .progress { - -webkit-appearance: none; -} - -.info .progress::-webkit-progress-bar { - background-color: #4f4f4f; - border-radius: 4px; - box-shadow: inset 0 0 5px #2f2f2f; -} - -.info .progress::-webkit-progress-value { - background-color: #F86008; - border-radius: 4px; -} - -.info .progress.valid::-webkit-progress-bar { - background-color: #56ac1d; - border-radius: 4px; -} - -.info .progress.valid::-webkit-progress-value { - background-color: #56ac1d; - border-radius: 4px; -} - -.info .progress.invalid::-webkit-progress-bar { - background-color: #A62E32; - border-radius: 4px; -} - -.info .progress.invalid::-webkit-progress-value { - background-color: #A62E32; - border-radius: 4px; -} - -.tab-osd ul li { - list-style: circle; - margin-left: 30px; -} - -.tab-osd .options { - position: relative; - margin-bottom: 10px; - line-height: 18px; - text-align: left; -} - -.tab-osd td { - text-align: left; -} - -.tab-osd .options label input { - float: left; - margin-top: 2px; -} - -.tab-osd .options label span { - font-weight: bold; - margin-left: 6px; -} - -.tab-osd .options select { - width: 300px; - height: 20px; - border: 1px solid var(--subtleAccent); -} - -.tab-osd .options .releases select { - width: 280px; -} - -.tab-osd .option.releases { - margin: 0 0 2px 0; - line-height: 20px; -} - -.tab-osd .options .description { - position: relative; - left: 0; - font-style: italic; - color: #818181; -} - -.tab-osd .cf_table td:last-child { - text-align: left; -} - -.tab-osd .options .flash_on_connect_wrapper { - display: none; -} - -.tab-osd .options .manual_baud_rate select { - width: 75px; - margin-left: 19px; -} - -.tab-osd .release_info { - display: none; -} - -.tab-osd .release_info .title { - line-height: 20px; - text-align: center; - font-weight: bold; - color: white; - border-bottom: 1px solid var(--subtleAccent); - background-color: #3f4241; -} - -.tab-osd .release_info .target { - color: blue; -} - -.tab-osd .release_info p { - padding: 5px; -} - -.tab-osd .release_info p a { - font-weight: bold; -} - -.tab-osd .release_info p a:hover { - text-decoration: underline; -} - -.tab-osd .release_info .notes { - padding: 5px; -} - -.tab-osd .git_info { - display: none; - margin-bottom: 10px; - border: 1px solid var(--subtleAccent); -} - -.tab-osd .git_info .title { - line-height: 20px; - text-align: center; - font-weight: bold; - color: white; - border-bottom: 1px solid var(--subtleAccent); - background-color: #3f4241; -} - -.tab-osd .git_info p { - padding: 5px; -} - -.tab-osd .git_info p a { - font-weight: bold; -} - -.tab-osd .git_info p a:hover { - text-decoration: underline; -} - -.tab-osd .btn .disabled { - cursor: default; - color: #fff; - background-color: #AFAFAF; - border: none; - pointer-events: none; - text-shadow: none; - opacity: 0.5; -} - -.tab-osd .display-layout label { - margin: .25em .1em; - display: inline-block; -} - -.tab-osd .display-layout input { - margin: .1em 1em; -} - -.tab-osd .display-layout input.position{ - width: 5em; - border-bottom: 1px solid var(--subtleAccent); -} - -.tab-osd .hide { - display: none; -} - -.tab-osd .note { - padding: 1em; -} - -.tab-osd .col { - display: inline-block; -} - -.tab-osd .left { - float: left; -} - -.tab-osd .right { - float: right; - margin-top: -7px; -} - -.tab-osd .preview .gui_box_titlebar { - position: relative; - margin-bottom: 0px; - float: none; -} - -.tab-osd .preview .gui_box_titlebar label { - max-width: 100px; - overflow: hidden; - text-overflow: ellipsis; - display: inline-block; - white-space: nowrap; - vertical-align: text-bottom; -} - -.tab-osd .preview .gui_box_titlebar select { - max-width: 100px; - border-radius: 3px; - font-size: 11px; - font-weight: normal; - font-family: 'Open Sans', 'Segoe UI', Tahoma, sans-serif; -} - -.tab-osd .preview .gui_box_bottombar { - text-align: center; -} - -.tab-osd .preview .row { - display: flex; -} - -.tab-osd .preview .char { - display: flex; - padding: 0; - margin: 0; - flex: 1 1 auto; - flex-wrap: nowrap; -} - -.tab-osd .preview .char img { - flex: 1 1 auto; -} - -.tab-osd .char.mouseover { - background: rgba(255,255,255,0.4); -} - -.tab-osd .char.dragging { - background: rgba(255,255,255,0.4); -} - -.tab-osd .char-label.mouseover { - background: rgba(255,255,255,0.4); -} - -.tab-osd .switch-all-elements { - float: right; -} - -.tab-osd .preview .char[draggable="true"] { - cursor: move; -} - -#font-logo-preview-container { - background:rgba(0, 255, 0, 0.4); - margin-bottom: 10px; - box-sizing: border-box; -} - -#font-logo-preview { - background:rgba(0, 255, 0, 1); - line-height: 0; - margin: auto; -} - -#font-logo-info { - font-size: 125%; - line-height: 150%; -} - -#font-logo-info h3 { - margin-bottom: 0.2em; -} - -#font-logo-info ul li:before { - content: '\2022\20'; -} - -#font-logo-info ul li.valid { - color: #00a011; -} - -#font-logo-info ul li.valid:before { - content: '\2714\20'; -} - -#font-logo-info ul li.invalid { - color: #a01100; -} - -#font-logo-info ul li.invalid:before { - content: '\2715\20'; -} - -#font-logo-info #font-logo-info-upload-hint { - margin-top: 1em; - display: none; -} - -.tab-osd .content_wrapper { - height: calc(100% - 70px); -} - -.tab-osd .content_toolbar { - text-align: right; -} - -.tab-osd .content_toolbar button { - margin-right: 1em; -} - -button { - padding: 4px 10px !important; - font-weight: 600; - font-size: 9pt !important; - cursor: pointer; -} - -.fontpresets_wrapper { - display: inline-block; - position: absolute; - right: 1.2em; - top: .8em; -} - -.fontpresets { - background: var(--boxBackground); - color: var(--defaultText); - border: 1px solid var(--subtleAccent); - border-radius: 3px; -} - -.tab-osd .switchable-field { - padding: 3px; - border: 1px solid transparent; - border-bottom: 1px solid var(--subtleAccent); -} - -.tab-osd .switchable-field.mouseover { - background: var(--boxBackground); - border: 1px solid var(--subtleAccent); - font-weight: 800; -} - -.tab-osd .switchable-field input { - border-radius: 3px; - border: 1px solid var(--subtleAccent); - padding: 2px; -} - -.tab-osd .switchable-field input[type=number] { - float: right; - display: none; - line-height: 23px; - height: 23px; - box-sizing: border-box; - padding-right: 0; -} - -.tab-osd .switchable-field label { - margin-left: 5px; -} - -.tab-osd .switchable-fields { - float: left; - margin-top: 5px; - margin-bottom: 8px; - width: 100%; -} - -.tab-osd .switchable-field-flex { - display: flex; -} - -.tab-osd .switchable-field-flex .switchable-field-description { - display: flex; - flex-direction: row; - /* - min width here is counterintuitive/seems to do nothing. but important, stops the variant selects overflowing - see https: //stackoverflow.com/questions/36230944/prevent-flex-items-from-overflowing-a-container - */ - min-width: 0; - justify-content: space-between; - width: 100%; - flex-wrap: wrap; -} - - -.tab-osd .switchable-field-flex .switchable-field-description .osd-variant { - flex-grow: 2; -} - -.spacer_box_title span { - font-size: 11px; - font-weight: normal; -} - -.spacer_box div input { - margin-right: 5px; -} - -.spacer_box div label { - margin-right: 10px; -} - - -.tab-osd .switchable-field:last-child { - border-bottom: 0; -} - -.tab-osd input, -.tab-osd select { - background: var(--boxBackground); - color: var(--defaultText); - border: 1px solid var(--subtleAccent); - border-radius: 3px; -} - -.tab-osd select.osd-variant { - max-width: 100%; -} - -.tab-osd .preview { - position: sticky; - top: 0; - -/* please don't copy the generic background image from another project - * and replace the one that @nathantsoi took :) - */ - background: url(../../images/osd-bg-1.jpg); - background-size: cover; - background-repeat: no-repeat; -} - -.tab-osd .video-pal .preview:active { - background: url(../../images/osd-bg-1-grid-pal.png), url(../../images/osd-bg-1.jpg); - background-size: 100% 100%, cover; - background-repeat: no-repeat; -} - -.tab-osd .video-ntsc .preview:active { - background: url(../../images/osd-bg-1-grid-ntsc.png), url(../../images/osd-bg-1.jpg); - background-size: 100% 100%, cover; - background-repeat: no-repeat; -} - -.tab-osd .alarms label { - display: block; - width:100%; - border-bottom: 1px solid var(--subtleAccent); - margin-top:5px; - padding-bottom: 5px -} - -.tab-osd .alarms label:last-child { - border-bottom: none; - padding-bottom: 0 -} - -.tab-osd .alarms input { - width: 55px; - padding-left: 3px; - height: 18px; - line-height: 20px; - text-align: left; - border-radius: 3px; - margin-right: 11px; - font-size: 11px; - font-weight: normal; -} - -.timer-option { - float: none !important; - padding: 2px; - display: inline !important; -} - -.timers-container .timer-detail { - padding-left: 15px; - padding-top: 3px; - padding-bottom: 3px; -} - -.timers-container label { - margin-right: 5px !important; - display: inline-block; - width: 80px; -} - -.timers-container input, .timers-container select { - width: 150px; -} - -@media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) { - .tab-osd .content_wrapper { - height: calc(100% - 30px); - } -} - -.tab-osd .grid-row { - justify-content: center; - gap: 7px; -} - -.tab-osd .grid-row .elements { - flex: 1 1 auto; - width: 210px; - max-width: 700px; -} - -.tab-osd .grid-row .osd-preview { - flex: 2 0 auto; - width: 350px; - max-width: max(min(950px,calc((100vh - 470px) * 1.25)), 350px); -} - -.tab-osd .grid-row .osd-profile { - flex: 1 1 auto; - width: 210px; - max-width: 700px ; -} - -.tab-osd .grid-col { - margin: 0px; -} - -@media all and (max-width: 575px) { - .tab-osd .osd-preview { - order: 1; - } - .tab-osd .osd-feature { - order: 2; - } - .tab-osd .osd-profile { - order: 3; - } - .tab-osd .preview.requires-osd-feature { - width: 100%; - max-width: 363px; - margin-left: 0; - } - .tab-osd .osd-feature, .tab-osd .osd-profile { - max-width: 100%; - } - #fontmanagercontent { - max-width: 100%; - } - .content_wrapper.font-preview { - padding: 15px 0; - } - #fontmanagercontent .grid-row { - margin-bottom: 15px; - } - .fontpresets_wrapper { - display: block; - position: relative; - right: 0; - top: 0; - margin-bottom: 15px; - } -} -@media all and (max-width: 575px) and (min-width: 390px) { - .tab-osd .preview.requires-osd-feature { - margin-left: calc((100% - 363px) / 2); - } -} diff --git a/src/css/tabs/osd.less b/src/css/tabs/osd.less new file mode 100644 index 00000000..8488b3b4 --- /dev/null +++ b/src/css/tabs/osd.less @@ -0,0 +1,575 @@ +.tab-osd { + .info { + margin: 10px 0 0 0; + position: relative; + float: left; + width: 100%; + .progressLabel { + position: absolute; + width: 100%; + height: 26px; + top: 0; + left: 0; + text-align: center; + line-height: 24px; + color: white; + font-weight: bold; + } + } + .spacer_box_title { + float: none; + font-weight: normal; + .profileOsdHeader { + padding: 6px; + } + } + ul { + li { + list-style: circle; + margin-left: 30px; + } + } + .options { + position: relative; + margin-bottom: 10px; + line-height: 18px; + text-align: left; + label { + input { + float: left; + margin-top: 2px; + } + span { + font-weight: bold; + margin-left: 6px; + } + } + select { + width: 300px; + height: 20px; + border: 1px solid var(--subtleAccent); + } + .releases { + select { + width: 280px; + } + } + .description { + position: relative; + left: 0; + font-style: italic; + color: #818181; + } + .flash_on_connect_wrapper { + display: none; + } + .manual_baud_rate { + select { + width: 75px; + margin-left: 19px; + } + } + } + td { + text-align: left; + } + .option.releases { + margin: 0 0 2px 0; + line-height: 20px; + } + .cf_table { + td { + &:last-child { + text-align: left; + } + } + } + .release_info { + display: none; + .title { + line-height: 20px; + text-align: center; + font-weight: bold; + color: white; + border-bottom: 1px solid var(--subtleAccent); + background-color: #3f4241; + } + .target { + color: blue; + } + p { + padding: 5px; + a { + font-weight: bold; + &:hover { + text-decoration: underline; + } + } + } + .notes { + padding: 5px; + } + } + .git_info { + display: none; + margin-bottom: 10px; + border: 1px solid var(--subtleAccent); + .title { + line-height: 20px; + text-align: center; + font-weight: bold; + color: white; + border-bottom: 1px solid var(--subtleAccent); + background-color: #3f4241; + } + p { + padding: 5px; + a { + font-weight: bold; + &:hover { + text-decoration: underline; + } + } + } + } + .btn { + .disabled { + cursor: default; + color: #fff; + background-color: #AFAFAF; + border: none; + pointer-events: none; + text-shadow: none; + opacity: 0.5; + } + } + .display-layout { + label { + margin: .25em .1em; + display: inline-block; + } + input { + margin: .1em 1em; + } + input.position { + width: 5em; + border-bottom: 1px solid var(--subtleAccent); + } + } + .hide { + display: none; + } + .note { + padding: 1em; + } + .col { + display: inline-block; + } + .left { + float: left; + } + .right { + float: right; + margin-top: -7px; + } + .preview { + position: sticky; + top: 0; + + /* please don't copy the generic background image from another project + * and replace the one that @nathantsoi took :) + */ + background: url(../../images/osd-bg-1.jpg); + background-size: cover; + background-repeat: no-repeat; + .gui_box_titlebar { + position: relative; + margin-bottom: 0px; + float: none; + label { + max-width: 100px; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + vertical-align: text-bottom; + } + select { + max-width: 100px; + border-radius: 3px; + font-size: 11px; + font-weight: normal; + font-family: 'Open Sans', 'Segoe UI', Tahoma, sans-serif; + } + } + .gui_box_bottombar { + text-align: center; + } + .row { + display: flex; + } + .char { + display: flex; + padding: 0; + margin: 0; + flex: 1 1 auto; + flex-wrap: nowrap; + img { + flex: 1 1 auto; + } + } + .char[draggable="true"] { + cursor: move; + } + } + .char.mouseover { + background: rgba(255,255,255,0.4); + } + .char.dragging { + background: rgba(255,255,255,0.4); + } + .char-label.mouseover { + background: rgba(255,255,255,0.4); + } + .switch-all-elements { + float: right; + } + .content_wrapper { + height: calc(100% - 70px); + } + .content_toolbar { + text-align: right; + button { + margin-right: 1em; + } + } + .switchable-field { + padding: 3px; + border: 1px solid transparent; + border-bottom: 1px solid var(--subtleAccent); + input { + border-radius: 3px; + border: 1px solid var(--subtleAccent); + padding: 2px; + } + input[type=number] { + float: right; + display: none; + line-height: 23px; + height: 23px; + box-sizing: border-box; + padding-right: 0; + } + label { + margin-left: 5px; + } + &:last-child { + border-bottom: 0; + } + } + .switchable-field.mouseover { + background: var(--boxBackground); + border: 1px solid var(--subtleAccent); + font-weight: 800; + } + .switchable-fields { + float: left; + margin-top: 5px; + margin-bottom: 8px; + width: 100%; + } + .switchable-field-flex { + display: flex; + .switchable-field-description { + display: flex; + flex-direction: row; + min-width: 0; + justify-content: space-between; + width: 100%; + flex-wrap: wrap; + .osd-variant { + flex-grow: 2; + } + } + } + input { + background: var(--boxBackground); + color: var(--defaultText); + border: 1px solid var(--subtleAccent); + border-radius: 3px; + } + select { + background: var(--boxBackground); + color: var(--defaultText); + border: 1px solid var(--subtleAccent); + border-radius: 3px; + } + select.osd-variant { + max-width: 100%; + } + .video-pal { + .preview { + &:active { + background: url(../../images/osd-bg-1-grid-pal.png), url(../../images/osd-bg-1.jpg); + background-size: 100% 100%, cover; + background-repeat: no-repeat; + } + } + } + .video-ntsc { + .preview { + &:active { + background: url(../../images/osd-bg-1-grid-ntsc.png), url(../../images/osd-bg-1.jpg); + background-size: 100% 100%, cover; + background-repeat: no-repeat; + } + } + } + .alarms { + label { + display: block; + width: 100%; + border-bottom: 1px solid var(--subtleAccent); + margin-top: 5px; + padding-bottom: 5px; + &:last-child { + border-bottom: none; + padding-bottom: 0; + } + } + input { + width: 55px; + padding-left: 3px; + height: 18px; + line-height: 20px; + text-align: left; + border-radius: 3px; + margin-right: 11px; + font-size: 11px; + font-weight: normal; + } + } + .grid-row { + justify-content: center; + gap: 7px; + .elements { + flex: 1 1 auto; + width: 210px; + max-width: 700px; + } + .osd-preview { + flex: 2 0 auto; + width: 350px; + max-width: max(min(950px,calc((100vh - 470px) * 1.25)), 350px); + } + .osd-profile { + flex: 1 1 auto; + width: 210px; + max-width: 700px; + } + } + .grid-col { + margin: 0px; + } +} +.info { + .progressLabel { + color: white; + a { + color: white; + &:hover { + text-decoration: underline; + } + } + } + .progress { + width: 100%; + height: 26px; + border-radius: 5px; + border: 1px solid var(--subtleAccent); + -webkit-appearance: none; + &::-webkit-progress-bar { + background-color: #4f4f4f; + border-radius: 4px; + box-shadow: inset 0 0 5px #2f2f2f; + } + &::-webkit-progress-value { + background-color: #F86008; + border-radius: 4px; + } + } + .progress.valid { + &::-webkit-progress-bar { + background-color: #56ac1d; + border-radius: 4px; + } + &::-webkit-progress-value { + background-color: #56ac1d; + border-radius: 4px; + } + } + .progress.invalid { + &::-webkit-progress-bar { + background-color: #A62E32; + border-radius: 4px; + } + &::-webkit-progress-value { + background-color: #A62E32; + border-radius: 4px; + } + } +} +#font-logo-preview-container { + background: rgba(0, 255, 0, 0.4); + margin-bottom: 10px; + box-sizing: border-box; +} +#font-logo-preview { + background: rgba(0, 255, 0, 1); + line-height: 0; + margin: auto; +} +#font-logo-info { + font-size: 125%; + line-height: 150%; + h3 { + margin-bottom: 0.2em; + } + ul { + li { + &:before { + content: '\2022\20'; + } + } + li.valid { + color: #00a011; + &:before { + content: '\2714\20'; + } + } + li.invalid { + color: #a01100; + &:before { + content: '\2715\20'; + } + } + } + #font-logo-info-upload-hint { + margin-top: 1em; + display: none; + } +} +button { + padding: 4px 10px !important; + font-weight: 600; + font-size: 9pt !important; + cursor: pointer; +} +.fontpresets_wrapper { + display: inline-block; + position: absolute; + right: 1.2em; + top: .8em; +} +.fontpresets { + background: var(--boxBackground); + color: var(--defaultText); + border: 1px solid var(--subtleAccent); + border-radius: 3px; +} +.spacer_box_title { + span { + font-size: 11px; + font-weight: normal; + } +} +.spacer_box { + div { + input { + margin-right: 5px; + } + label { + margin-right: 10px; + } + } +} +.timer-option { + float: none !important; + padding: 2px; + display: inline !important; +} +.timers-container { + .timer-detail { + padding-left: 15px; + padding-top: 3px; + padding-bottom: 3px; + } + label { + margin-right: 5px !important; + display: inline-block; + width: 80px; + } + input { + width: 150px; + } + select { + width: 150px; + } +} +@media only screen and (max-width: 1055px) { + .tab-osd { + .content_wrapper { + height: calc(100% - 30px); + } + } +} +@media only screen and (max-device-width: 1055px) { + .tab-osd { + .content_wrapper { + height: calc(100% - 30px); + } + } +} +@media all and (max-width: 575px) { + .tab-osd { + .osd-preview { + order: 1; + } + .osd-feature { + order: 2; + max-width: 100%; + } + .osd-profile { + order: 3; + max-width: 100%; + } + .preview.requires-osd-feature { + width: 100%; + max-width: 363px; + margin-left: 0; + } + } + #fontmanagercontent { + max-width: 100%; + .grid-row { + margin-bottom: 15px; + } + } + .content_wrapper.font-preview { + padding: 15px 0; + } + .fontpresets_wrapper { + display: block; + position: relative; + right: 0; + top: 0; + margin-bottom: 15px; + } +} +@media all and (max-width: 575px) and (min-width: 390px) { + .tab-osd { + .preview.requires-osd-feature { + margin-left: calc((100% - 363px) / 2); + } + } +} diff --git a/src/css/tabs/pid_tuning.css b/src/css/tabs/pid_tuning.css deleted file mode 100644 index cedaf59c..00000000 --- a/src/css/tabs/pid_tuning.css +++ /dev/null @@ -1,1077 +0,0 @@ -.tab-pid_tuning .cf tr { - background-color: #DEDEDE; -} - -.tab-pid_tuning .cf th { - border-right: solid 1px var(--subtleAccent); - height: 19px; - font-weight: normal; - padding: 4px; - color:white; - text-align: left; - background: var(--quietHeader); -} - -.tab-pid_tuning .cf th:first-child { - border-top-left-radius: 3px; -} - -.tab-pid_tuning .cf th:last-child { - border-right: 0; - border-top-right-radius: 3px; -} - -.tab-pid_tuning .cf td:first-child { - border-bottom-left-radius: 3px; -} - -.tab-pid_tuning .cf td:last-child { - border-bottom-right-radius: 3px; - border-right: 0; - padding-bottom: 0; -} - -.tab-pid_tuning .cf input { - margin: 4px; - width: calc(100% - 10px); - border: 1px solid var(--subtleAccent); - border-radius: 3px; -} - -.tab-pid_tuning .cf select { - margin: 4px; - width: calc(100% - 10px); - border: 1px solid var(--subtleAccent); -} - -.tab-pid_tuning .throttle_curve { - float: right; - width: 100%; - background-size: 200%; - height: 164px; -} - -.tab-pid_tuning .curves { - float: left; - margin-right: 10px; -} - -.tab-pid_tuning .rate_curve { - height: 100%; - min-height: 234px; - min-width: 200px; - background-size: 200%; -} - -.tab-pid_tuning input[type="number"]::-webkit-inner-spin-button { - border: 0; -} - -.tab-pid_tuning table { - float: left; - margin: 0; - border-collapse: collapse; - width: 100%; - table-layout: fixed; -} - -.tab-pid_tuning .gui_box { - margin-bottom: 5px; - display: table; -} - -.tab-pid_tuning .subtab-filter .gui_box { - float: none; -} - -.tab-pid_tuning table .inputBackground { - background: white; -} - -.tab-pid_tuning table, .tab-pid_tuning table td { - padding: 1px; - border-bottom: 0 solid var(--subtleAccent); -} - -.tab-pid_tuning .sliderDivider { - padding: 3px; - border-top: 1px solid var(--subtleAccent); - border-bottom: 1px solid var(--subtleAccent); -} - -.tab-pid_tuning table th { - padding: 0; - border: 0; - height: 10px; - font-weight: normal; - text-overflow: ellipsis; - overflow: hidden; -} - -.tab-pid_tuning .pid_titlebar th { - padding: 5px; - text-align: left; - border-right: 1px solid var(--subtleAccent); -} - -.tab-pid_tuning .pid_titlebar th:first-child { - text-align: left; - border-top-left-radius: 3px; -} - -.tab-pid_tuning .pid_titlebar th:last-child { - border-right: none; - border-top-right-radius: 3px; -} - -.tab-pid_tuning table tr td:first-child { - text-align: left; - padding-left: 5px; -} - -.tab-pid_tuning table tr td:last-child { - border-right: 0 solid var(--subtleAccent); -} - -.tab-pid_tuning #pid_optional table th { - width: 25%; -} - -.tab-pid_tuning #pid_optional table td { - width: 25%; -} - -.tab-pid_tuning #pid_accel table th { - width: 33%; -} - -.tab-pid_tuning #pid_accel table td { - width: 33%; -} - -.tab-pid_tuning table.compensation tr { - height: 30px; - border-bottom: 1px solid var(--subtleAccent); -} - -.tab-pid_tuning table.compensation tr:last-child { - border-bottom: none; -} - -.tab-pid_tuning table.compensation td { - padding-left: 5px; - padding-right: 5px; -} - -.tab-pid_tuning table.compensation td:first-child:not(.filterTable) { - width: 75px; - text-align: center; - vertical-align: top; - padding-top: 4px; -} - -.tab-pid_tuning table.filterTable.compensation td:first-child { - width: 5%; -} - -.tab-pid_tuning table.compensation td:last-child { - width: 100%; -} - -.tab-pid_tuning table.compensation .helpicon { - margin-top: 3px; - margin-left: auto; -} - -.tab-pid_tuning table.compensation .suboption { - margin-left: 2%; - display: flex; - flex-flow: row wrap-reverse; - align-items: center; - padding-bottom: 2px; -} - -.tab-pid_tuning table.compensation .suboption select { - width: 80px; - text-align-last: right; - font-size: 1.1em; - box-sizing: border-box; -} - -.tab-pid_tuning table.compensation .suboption input { - width: 80px; - box-sizing: border-box; -} - -.tab-pid_tuning table.compensation .suboption label { - margin-left: 5px; -} - -.tab-pid_tuning .pidTuningFeatures td { - padding: 5px; -} - -.tab-pid_tuning .pidTuningFeatures td:first-child { - width: 20%; - padding-bottom: 6px; - padding-top: 5px; -} - -.tab-pid_tuning .pidTuningFeatures td:last-child { - width: 80%; -} - -.tab-pid_tuning .pidTuningFeatures td { - width: 20%; -} - -.tab-pid_tuning .pidTuningFeatures .slider input { - -webkit-appearance: slider-horizontal -} - -.tab-pid_tuning table td { - padding: 1px 1px 1px 5px; - border-right: 1px solid var(--subtleAccent); -} - -.tab-pid_tuning table tr td { - text-align: left; - padding-left: 5px; - padding-right: 5px; -} - -.tab-pid_tuning table .groupSwitchValue { - display: inline-flex; -} - -.tab-pid_tuning table .groupSwitchValue .inputValue { - width: 80px; -} -.tab-pid_tuning table input { - display: block; - width: calc(100% - 0px); - height: 20px; - line-height: 20px; - text-align: right; - border: 1px solid var(--subtleAccent); - border-radius: 3px; -} - -.tab-pid_tuning .subtab-filter table input, -.tab-pid_tuning .subtab-filter table select { - width: 77px; - float: right; - box-sizing: border-box; -} - -.tab-pid_tuning table select { - text-align-last: right; - border-radius: 3px; - border: 1px solid var(--subtleAccent); -} - -.tab-pid_tuning .rates_type table select { - text-align-last: left; -} - -.tab-pid_tuning .tab-container { - border-bottom: 3px solid var(--accent); - border-right-width: 0; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: start; - width: 100%; -} - -.tab-pid_tuning .tab-container > div { - background-color: #2e2e2e; - padding: 6px 12px; - border-right: 1px solid white; - box-sizing: border-box; - text-align: center; -} - -.tab-pid_tuning .tab-container > div:first-child { - border-top-left-radius: 4px; -} - -.tab-pid_tuning .tab-container > div:last-child { - border-top-right-radius: 4px; -} - -.tab-pid_tuning .tab-container > div a { - display: block; - color: #999999; -} - -.tab-pid_tuning .tab-container > div.active, -.tab-pid_tuning .tab-container > div.active a { - background-color: var(--accent); - color: #000; - transition: none; -} - -.tab-pid_tuning .single-field { - display: inline-table; - margin-bottom: 10px; - margin-right: 5px; -} - -.tab-pid_tuning .single-field .head { - text-align: left; - border-bottom: 1px solid var(--subtleAccent); - background-color: var(--quietHeader); - color: var(--quietText); - height: 19px; - font-weight: normal; - padding: 2px 2px 2px 6px; - border-top-left-radius: 3px; - border-top-right-radius: 3px; -} - -.tab-pid_tuning .new_rates { - text-align: center; -} - -.tab-pid_tuning .top-buttons { - float: right; -} - -.tab-pid_tuning .fixed_band { - position: absolute; - width: 100%; - bottom: 0; -} - -.fancy.header { - background-color: #D6D6D6; - padding-top: 8px; - font-size: 12px; - border-bottom: 1px solid var(--subtleAccent); - color: #828282; - background-image: linear-gradient(315deg, rgba(255, 255, 255, .2) 10%, transparent 10%, transparent 20%, rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .2) 30%, transparent 30%, transparent 40%, rgba(255, 255, 255, .2) 40%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 60%, rgba(255, 255, 255, .2) 60%, rgba(255, 255, 255, .2) 70%, transparent 70%, transparent 80%, rgba(255, 255, 255, .2) 80%, rgba(255, 255, 255, .2) 90%, transparent 90%, transparent 100%, rgba(255, 255, 255, .2) 100%, transparent); -} - -.fancy.header th { - padding-bottom: 4px; - padding-top: 4px; - padding-left: 5px; -} - -.pid_mode { - width: calc(100% - 5px); - height: 18px; - background-color: #D6D6D6; - float: left; - margin: 0; - text-align: left; - line-height: 13px; - padding: 5px 0 0 5px; - font-size: 12px; - border-bottom: 1px solid var(--subtleAccent); - color: #828282; - font-weight: normal; - background-image: linear-gradient(315deg, rgba(255, 255, 255, .2) 10%, transparent 10%, transparent 20%, - rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .2) 30%, transparent 30%, transparent 40%, - rgba(255, 255, 255, .2) 40%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 60%, - rgba(255, 255, 255, .2) 60%, rgba(255, 255, 255, .2) 70%, transparent 70%, transparent 80%, - rgba(255, 255, 255, .2) 80%, rgba(255, 255, 255, .2) 90%, transparent 90%, transparent 100%, - rgba(255, 255, 255, .2) 100%, transparent); -} - -.pid_mode > div:first-child { - float: left; -} - -.tab-pid_tuning .pid_mode .helpicon { - margin-top: 0; -} - -.tab-pid_tuning .pid_titlebar { - color: #fff; - background-color: var(--quietHeader); - border-top-left-radius: 3px; - border-top-right-radius: 3px; - height: 20px; -} - -.tab-pid_tuning .pid_titlebar.pid_titlebar_extended { - border-radius: 0; -} - -.tab-pid_tuning .cf .throttleCurvePreview { - padding: 0; -} - -.pid_roll { - background-color: #FF8080; -} - -.pid_pitch { - background-color: #80FF80; -} - -.pid_yaw { - background-color: #8080FF; -} - - -.tab-pid_tuning .pid_titlebar td:first-child { - text-align: left; -} - -.show { - width:130px; - margin-right:3px; -} - -.tab-pid_tuning .helpicon { - margin-top: 1px; -} - -.tab-pid_tuning .subtab-filter .newFilter .helpicon { - margin-right: 2px; - margin-top: 2px; -} - -.tab-pid_tuning .number .helpicon { - margin-top: 3px; - margin-right: 0; -} - -.tab-pid_tuning .gui_box_titlebar .helpicon { - margin-top: 5px; - margin-right: 5px; -} - -.tab-pid_tuning .spacer_left { - padding-left: 0; - float: right; - width: calc(100% - 20px) -} - -.tab-pid_tuning .numberspacer { - float: left; - width: 65px; - height: 21px; -} - -.tab-pid_tuning .number { - margin-bottom: 5px; - clear: left; - padding-bottom: 5px; - border-bottom: 1px solid var(--subtleAccent); - width: 100%; - float: left; -} - -.tab-pid_tuning .number:last-child { - padding-bottom: 5px; - border-bottom: 0; -} - -.tab-pid_tuning .number input { - width: 50px; - padding-left: 3px; - height: 20px; - line-height: 20px; - text-align: left; - border: 1px solid var(--subtleAccent); - border-radius: 3px; - margin-right: 11px; - font-weight: normal; -} - -.tab-pid_tuning .gui_box span { - font-style: normal; - font-weight: normal; - line-height: 19px; - color: #7d7d7d; - font-size: 11px; -} - -.tab-pid_tuning .resetbt { - width: 200px; - margin-right: 10px; -} - -.tab-pid_tuning .copyprofilebtn { - width: 150px; - margin-right:10px; -} - -.tab-pid_tuning .copyrateprofilebtn { - width: 150px; - margin-right:10px; -} - -.tab-pid_tuning .right { - float: right; -} - -.tab-pid_tuning .pids { - float: left; - width: 25%; -} - -.tab-pid_tuning .leftzero { - padding-left: 0; -} - -.tab-pid_tuning .roll { - border-bottom-left-radius: 3px; -} - -.tab-pid_tuning .pidTuningLevel { - float: left; -} - -.tab-pid_tuning .borderleft { - border-top-left-radius: 3px; - border-top-right-radius: 3px; -} - -.tab-pid_tuning .textleft { - width: 25%; - float: left; - text-align: left; -} - -.tab-pid_tuning .topspacer { - margin-top: 5px; -} - -.tab-pid_tuning .bottomarea { - float: left; - width: calc(100% - 2px); - border-bottom: 1px solid var(--subtleAccent); - border-left: 1px solid var(--subtleAccent); - border-right: 1px solid var(--subtleAccent); - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - padding-top: 5px; - padding-bottom: 5px; - background-color: #f9f9f9; - height: 20px; -} - -.tab-pid_tuning .profile, -.tab-pid_tuning .rate_profile { - min-width: 130px; -} - -.tab-pid_tuning .profile select, -.tab-pid_tuning .rate_profile select { - border: 1px solid var(--subtleAccent); - border-radius: 3px; - margin-left: 5px; - margin-right: 5px; - width: calc(100% - 10px); -} - - -.tab-pid_tuning .controller { - width: 150px; -} - -.tab-pid_tuning .controller select { - border: 1px solid var(--subtleAccent); - margin-left: 5px; - width: calc(100% - 10px); -} - -.tab-pid_tuning .delta { - width: 150px; -} - -.tab-pid_tuning .delta select { - border: 1px solid var(--subtleAccent); - margin-left: 5px; - width: calc(100% - 10px); -} - -.tab-pid_tuning .bracket { - background-image: url(../../images/icons/icon_bracket.svg); - background-repeat: no-repeat; - height: 35px; - width: 14px; - margin-top: -23px; - margin-left: 8px; -} - -.tab-pid_tuning .rates_preview_cell { - position: relative; - width: 100%; - height: 362px; -} - -.tab-pid_tuning .rates_preview { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-size: 100%; -} - -.tab-pid_tuning .pidTuning td { - padding: 5px; -} - -.tab-pid_tuning .pidTuning tr { - width: 100%; - border-bottom: 1px solid var(--subtleAccent); - padding: 0; -} - -.tab-pid_tuning .pidTuning td:first-child { - width: 10%; - padding-bottom: 6px; - padding-top: 5px; -} - -.tab-pid_tuning .pidTuning td:last-child { - width: 40%; -} - -.tab-pid_tuning .pidTuning td { - width: 40%; -} - -.tab-pid_tuning .new_rates td:first-child { - border-bottom-left-radius: 0; - padding-left: 10px; -} - -.tab-pid_tuning .new_rates td:last-child { - border-bottom-right-radius: 0; -} - -.tab-pid_tuning .rc_curve .cf tr td { - padding: 0; -} - -.tab-pid_tuning .rc_curve_bg { - float: left; -} - -.tab-pid_tuning .new_rates_last-child { - border-bottom: none; -} - -.tab-pid_tuning .filter { - padding-left: 5px; -} - -.subtab-filter table tr td:first-child { - text-align: right; - padding-left: 5px; - width: 1%; -} -.subtab-filter .two_columns { - display: flex; -} - -.subtab-filter .two_columns .two_columns_first { - margin-right: 10px; - height: fit-content; -} - -.subtab-filter .two_columns .two_columns_second{ - margin-left: 10px; - height: fit-content; -} - -.tabarea { - width: calc(100% - 22px); - position: relative; - padding: 10px; - border: 1px solid var(--subtleAccent); - border-bottom-right-radius: 8px; - border-bottom-left-radius: 8px; - border-top: 0 solid var(--subtleAccent); - background: #f9f9f9; -} - -.tab-pid_tuning dialog { - width: 40em; - border-radius: 5px; -} - -.tab-pid_tuning dialog .buttons { - position: static; - margin-top: 2em; -} - -.tab-pid_tuning dialog h3 { - margin-bottom: 0.5em; -} - -.tab-pid_tuning dialog select { - border: 1px solid var(--subtleAccent); - margin-left: 5px; - width: 120px; -} - -@media all and (max-width: 575px) { - .tab-pid_tuning dialog { - width: calc(100% - 2em); - border-radius: unset; - } -} - -.tab-pid_tuning .tuningSlider { - -webkit-appearance: none; - width: calc(100% - 14px); - height: 15px; - border: none; - outline: none; - opacity: 0.8; - transition: opacity .2s; - margin: 7px; - background: var(--boxBackground); -} - -.tab-pid_tuning .tuningSlider:hover { - opacity: 1; -} - -.tab-pid_tuning .tuningSlider::-webkit-slider-runnable-track { - -webkit-appearance: none; - border: solid 1px var(--subtleAccent); - border-radius: 4px; - background: linear-gradient(90deg, rgb(197, 197, 197) 0%, rgb(241, 241, 241) 50%, rgb(255, 84, 14) 100%); - height: 15px; -} - -.tab-pid_tuning .nonExpertModeSliders .tuningSlider::-webkit-slider-runnable-track { - background: linear-gradient(90deg, rgb(197, 197, 197) -50%, rgb(241, 241, 241) 50%, rgb(255, 84, 14) 150%); - background-size: 55%; - background-position: 44%; - background-repeat: no-repeat; -} - -.tab-pid_tuning .disabledSliders .tuningSlider::-webkit-slider-runnable-track { - background: linear-gradient(90deg, rgb(197, 197, 197) -50%, rgb(241, 241, 241) 50%, rgb(197, 197, 197) 150%); - background-repeat: no-repeat; -} - -.tab-pid_tuning .tuningSlider::-webkit-slider-thumb { - -webkit-appearance: none; - width: 23px; - height: 23px; - border-radius: 50%; - background: #ffbb2a; - border: solid 1px #828885; - cursor: pointer; - position: relative; - bottom: 5px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); -} - -.tab-pid_tuning .disabledSliders .tuningSlider::-webkit-slider-thumb { - -webkit-appearance: none; - width: 23px; - height: 23px; - border-radius: 50%; - background: transparent; - border: solid 1px #828885; - cursor: pointer; - position: relative; - bottom: 5px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); -} - - -.tab-pid_tuning .sliderLabels tr { - border-bottom: 1px solid var(--subtleAccent); -} - -.tab-pid_tuning .sliderLabels tr:last-child { - border-bottom: none; -} - -.tab-pid_tuning .sliderLabels tr td:first-child { - text-align: right; - width: 20%; -} - -.tab-pid_tuning .subtab-filter .sliderLabels tr td:first-child { - width: 10%; -} - -.tab-pid_tuning .sliderLabels tr td:nth-child(2) { - text-align: center; - width: 30px; -} - -.tab-pid_tuning .sliderLabels tr td:last-child { - width: 30px; -} - -.tab-pid_tuning .tuningPIDSliders .pid_titlebar th, -.tab-pid_tuning .tuningFilterSliders .pid_titlebar th { - text-align: center; -} - -.tab-pid_tuning .tuningPIDSliders .pid_titlebar th:first-child { - width: 6%; - text-align: right; - border-right: none; -} -.tab-pid_tuning .tuningPIDSliders .pid_titlebar th:nth-child(2) { - width: 14%; - border-right: none; -} - -.tab-pid_tuning .tuningFilterSliders .pid_titlebar th:first-child { - width: 10%; - border-right: none; -} - -.tab-pid_tuning .tuningPIDSliders .pid_titlebar th:nth-child(3), -.tab-pid_tuning .tuningFilterSliders .pid_titlebar th:nth-child(2) { - width: 30px; -} - -.tab-pid_tuning .tuningPIDSliders .pid_titlebar th:last-child, -.tab-pid_tuning .tuningFilterSliders .pid_titlebar th:last-child { - width: 30px; -} - -.tab-pid_tuning .slidersWarning { - background: #ffa3a3; - border: 1px solid red; - font-weight: 600; - font-size: 12px; -} - -.tab-pid_tuning .nonExpertModeSlidersNote, -.tab-pid_tuning .expertSettingsDetectedNote { - text-align: center; - padding-top: 2px; - padding-bottom: 2px; -} - -.tab-pid_tuning .note-button td:nth-child(n) { - padding-left: 7px; - padding-right: 7px; - text-align: center; -} - -.tab-pid_tuning .note-button td:first-child { - width: 75%; - border-right: none; -} - -.tab-pid_tuning .note-button .regular-button { - display: block; - overflow-wrap: break-word; - margin: 2px; -} - -.tab-pid_tuning .sliderLabels span { - color: black; - font-size: 12px; -} - -.tab-pid_tuning .subtab-filter .sliderLabels input { - width: calc(100% - 14px); - box-sizing: content-box; -} - -.tab-pid_tuning .subtab-rates { - display: flex; - flex-flow: row wrap; - align-items: flex-start; - justify-content: center; -} - -.tab-pid_tuning .subtab-rates .cf_column { - min-width: 380px; - flex: 1; -} - -.tab-pid_tuning .subtab-pid { - display: flex; - flex-flow: row wrap; - align-items: flex-start; - justify-content: center; -} - -.tab-pid_tuning .subtab-pid .cf_column { - min-width: 450px; - flex: 1.3; -} - -.tab-pid_tuning .subtab-pid .cf_column_right{ - min-width: 300px; - margin-left: 15px; - flex: 1; -} - -.tab-pid_tuning .subtab-pid .note { - flex: 0 0 100%; -} - -.tab-pid_tuning table.filterTable { - table-layout: auto; -} - -@media only screen and (max-width: 1205px) { - -.tab-pid_tuning .subtab-pid .spacer_left { - width: 100%; -} -} - -@media only screen and (max-width: 1405px) { - -.tab-pid_tuning .subtab-rates .ratePreview.spacer_left { - width: 100%; -} -} - -.tab-pid_tuning .pid_titlebar .name-helpicon-flex { - display: flex; - flex-flow: row wrap; - justify-content: space-around; -} - -.tab-pid_tuning .pid_titlebar .name-helpicon-flex .helpicon { - margin-right: 0; -} - -.tab-pid_tuning .cf .rates_logo_bg { - background-color: #ebeced; -} - -.tab-pid_tuning .rates_logo_div { - margin-top: -10%; - text-align: center; -} - -.tab-pid_tuning .rates_logo { - width: 80%; - height: 80%; -} - -.tab-pid_tuning .rates-tab-warning { - display: flex; - flex-flow: row wrap; -} - -.tab-pid_tuning .float-left { - float: left; -} - -.tab-pid_tuning .content_wrapper_header { - display: flex; -} - -.tab-pid_tuning .content_wrapper_header_btns { - margin-left: auto; -} - -@media all and (max-width: 575px) { - .tab-pid_tuning .content_wrapper_header { - flex-wrap: wrap; - } - - .tab-pid_tuning .profile, .tab-pid_tuning .rate_profile, - .tab-pid_tuning .copyprofilebtn, .tab-pid_tuning .copyrateprofilebtn, - .tab-pid_tuning .resetbt, .tab-pid_tuning .show { - width: calc(50% - 5px); - } - - .tab-pid_tuning .rate_profile { - margin-left: 5px; - } - - .tab-pid_tuning .rate_profile, .tab-pid_tuning .controller, - .tab-pid_tuning .copyrateprofilebtn, .tab-pid_tuning .show { - margin-right: 0; - } - - .tab-pid_tuning .controller { - width: 100%; - } - - .tab-pid_tuning .content_wrapper_header_btns { - display: flex; - flex-wrap: wrap; - } - - .tab-pid_tuning .tab-container > div { - width: calc(100% / 3); - } - - .tab-pid_tuning .subtab-pid .cf_column, .tab-pid_tuning .subtab-rates .cf_column { - min-width: 100%; - width: 100%; - } - - .tab-pid_tuning .subtab-pid .cf_column_right { - min-width: 100%; - margin-left: 0px; - } - - .tab-pid_tuning .note-button td:first-child { - width: 60%; - } - - .tab-pid_tuning .spacer_left { - width: 100%; - } - - .subtab-filter .two_columns { - flex-wrap: wrap; - } - - .subtab-filter .two_columns .two_columns_first { - margin-right: 0; - } - - .subtab-filter .two_columns .two_columns_second { - margin-left: 0; - } - - .tab-pid_tuning .sliderHeaders { - height: 18px; - background-color: #D6D6D6; - line-height: 13px; - font-size: 12px; - border-bottom: 1px solid var(--subtleAccent); - color: #828282; - font-weight: normal; - background-image: linear-gradient(315deg, rgba(255, 255, 255, .2) 10%, transparent 10%, transparent 20%, - rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .2) 30%, transparent 30%, transparent 40%, - rgba(255, 255, 255, .2) 40%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 60%, - rgba(255, 255, 255, .2) 60%, rgba(255, 255, 255, .2) 70%, transparent 70%, transparent 80%, - rgba(255, 255, 255, .2) 80%, rgba(255, 255, 255, .2) 90%, transparent 90%, transparent 100%, - rgba(255, 255, 255, .2) 100%, transparent); - } - - .tab-pid_tuning .sliderHeaders span { - color: #828282; - } - - .tab-pid_tuning .sliderLabels tr.sliderHeaders td:first-child { - text-align: left; - } - - .tab-pid_tuning .tuningPIDSliders .pid_titlebar th:last-child, .tab-pid_tuning .tuningFilterSliders .pid_titlebar th:last-child { - width: 20%; - } - - .tab-pid_tuning .tuningPIDSliders .pid_titlebar th:nth-child(2), .tab-pid_tuning .tuningFilterSliders .pid_titlebar th:nth-child(2) { - width: 20%; - } - - .tab-pid_tuning .pid_titlebar th div .xs { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } -} diff --git a/src/css/tabs/pid_tuning.less b/src/css/tabs/pid_tuning.less new file mode 100644 index 00000000..9cbb7cd7 --- /dev/null +++ b/src/css/tabs/pid_tuning.less @@ -0,0 +1,1056 @@ +.tab-pid_tuning { + .cf { + tr { + background-color: #DEDEDE; + } + th { + border-right: solid 1px var(--subtleAccent); + height: 19px; + font-weight: normal; + padding: 4px; + color: white; + text-align: left; + background: var(--quietHeader); + &:first-child { + border-top-left-radius: 3px; + } + &:last-child { + border-right: 0; + border-top-right-radius: 3px; + } + } + td { + &:first-child { + border-bottom-left-radius: 3px; + } + &:last-child { + border-bottom-right-radius: 3px; + border-right: 0; + padding-bottom: 0; + } + } + input { + margin: 4px; + width: calc(100% - 10px); + border: 1px solid var(--subtleAccent); + border-radius: 3px; + } + select { + margin: 4px; + width: calc(100% - 10px); + border: 1px solid var(--subtleAccent); + } + .throttleCurvePreview { + padding: 0; + } + .rates_logo_bg { + background-color: #ebeced; + } + } + .throttle_curve { + float: right; + width: 100%; + background-size: 200%; + height: 164px; + } + .curves { + float: left; + margin-right: 10px; + } + .rate_curve { + height: 100%; + min-height: 234px; + min-width: 200px; + background-size: 200%; + } + input[type="number"] { + &::-webkit-inner-spin-button { + border: 0; + } + } + table { + float: left; + margin: 0; + border-collapse: collapse; + width: 100%; + table-layout: fixed; + padding: 1px; + border-bottom: 0 solid var(--subtleAccent); + .inputBackground { + background: white; + } + td { + border-bottom: 0 solid var(--subtleAccent); + padding: 1px 1px 1px 5px; + border-right: 1px solid var(--subtleAccent); + } + th { + padding: 0; + border: 0; + height: 10px; + font-weight: normal; + text-overflow: ellipsis; + overflow: hidden; + } + tr { + td { + &:first-child { + text-align: left; + padding-left: 5px; + } + &:last-child { + border-right: 0 solid var(--subtleAccent); + } + text-align: left; + padding-left: 5px; + padding-right: 5px; + } + } + .groupSwitchValue { + display: inline-flex; + .inputValue { + width: 80px; + } + } + input { + display: block; + width: calc(100% - 0px); + height: 20px; + line-height: 20px; + text-align: right; + border: 1px solid var(--subtleAccent); + border-radius: 3px; + } + select { + text-align-last: right; + border-radius: 3px; + border: 1px solid var(--subtleAccent); + } + } + .gui_box { + margin-bottom: 5px; + display: table; + span { + font-style: normal; + font-weight: normal; + line-height: 19px; + color: #7d7d7d; + font-size: 11px; + } + } + .subtab-filter { + .gui_box { + float: none; + } + table { + input { + width: 77px; + float: right; + box-sizing: border-box; + } + select { + width: 77px; + float: right; + box-sizing: border-box; + } + } + .newFilter { + .helpicon { + margin-right: 2px; + margin-top: 2px; + } + } + .sliderLabels { + tr { + td { + &:first-child { + width: 10%; + } + } + } + input { + width: calc(100% - 14px); + box-sizing: content-box; + } + } + } + .sliderDivider { + padding: 3px; + border-top: 1px solid var(--subtleAccent); + border-bottom: 1px solid var(--subtleAccent); + } + .pid_titlebar { + th { + padding: 5px; + text-align: left; + border-right: 1px solid var(--subtleAccent); + &:first-child { + text-align: left; + border-top-left-radius: 3px; + } + &:last-child { + border-right: none; + border-top-right-radius: 3px; + } + } + color: #fff; + background-color: var(--quietHeader); + border-top-left-radius: 3px; + border-top-right-radius: 3px; + height: 20px; + td { + &:first-child { + text-align: left; + } + } + .name-helpicon-flex { + display: flex; + flex-flow: row wrap; + justify-content: space-around; + .helpicon { + margin-right: 0; + } + } + } + #pid_optional { + table { + th { + width: 25%; + } + td { + width: 25%; + } + } + } + #pid_accel { + table { + th { + width: 33%; + } + td { + width: 33%; + } + } + } + table.compensation { + tr { + height: 30px; + border-bottom: 1px solid var(--subtleAccent); + &:last-child { + border-bottom: none; + } + } + td { + padding-left: 5px; + padding-right: 5px; + &:first-child { + &:not(.filterTable) { + width: 75px; + text-align: center; + vertical-align: top; + padding-top: 4px; + } + } + &:last-child { + width: 100%; + } + } + .helpicon { + margin-top: 3px; + margin-left: auto; + } + .suboption { + margin-left: 2%; + display: flex; + flex-flow: row wrap-reverse; + align-items: center; + padding-bottom: 2px; + select { + width: 80px; + text-align-last: right; + font-size: 1.1em; + box-sizing: border-box; + } + input { + width: 80px; + box-sizing: border-box; + } + label { + margin-left: 5px; + } + } + } + table.filterTable.compensation { + td { + &:first-child { + width: 5%; + } + } + } + .pidTuningFeatures { + td { + padding: 5px; + width: 20%; + &:first-child { + width: 20%; + padding-bottom: 6px; + padding-top: 5px; + } + &:last-child { + width: 80%; + } + } + .slider { + input { + -webkit-appearance: slider-horizontal; + } + } + } + .rates_type { + table { + select { + text-align-last: left; + } + } + } + .tab-container { + border-bottom: 3px solid var(--accent); + border-right-width: 0; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: start; + width: 100%; + >div { + background-color: #2e2e2e; + padding: 6px 12px; + border-right: 1px solid white; + box-sizing: border-box; + text-align: center; + &:first-child { + border-top-left-radius: 4px; + } + &:last-child { + border-top-right-radius: 4px; + } + a { + display: block; + color: #999999; + } + } + >div.active { + background-color: var(--accent); + color: #000; + transition: none; + a { + background-color: var(--accent); + color: #000; + transition: none; + } + } + } + .single-field { + display: inline-table; + margin-bottom: 10px; + margin-right: 5px; + .head { + text-align: left; + border-bottom: 1px solid var(--subtleAccent); + background-color: var(--quietHeader); + color: var(--quietText); + height: 19px; + font-weight: normal; + padding: 2px 2px 2px 6px; + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + } + .new_rates { + text-align: center; + td { + &:first-child { + border-bottom-left-radius: 0; + padding-left: 10px; + } + &:last-child { + border-bottom-right-radius: 0; + } + } + } + .top-buttons { + float: right; + } + .fixed_band { + position: absolute; + width: 100%; + bottom: 0; + } + .pid_mode { + .helpicon { + margin-top: 0; + } + } + .pid_titlebar.pid_titlebar_extended { + border-radius: 0; + } + .helpicon { + margin-top: 1px; + } + .number { + .helpicon { + margin-top: 3px; + margin-right: 0; + } + margin-bottom: 5px; + clear: left; + padding-bottom: 5px; + border-bottom: 1px solid var(--subtleAccent); + width: 100%; + float: left; + &:last-child { + padding-bottom: 5px; + border-bottom: 0; + } + input { + width: 50px; + padding-left: 3px; + height: 20px; + line-height: 20px; + text-align: left; + border: 1px solid var(--subtleAccent); + border-radius: 3px; + margin-right: 11px; + font-weight: normal; + } + } + .gui_box_titlebar { + .helpicon { + margin-top: 5px; + margin-right: 5px; + } + } + .spacer_left { + padding-left: 0; + float: right; + width: calc(100% - 20px); + } + .numberspacer { + float: left; + width: 65px; + height: 21px; + } + .resetbt { + width: 200px; + margin-right: 10px; + } + .copyprofilebtn { + width: 150px; + margin-right: 10px; + } + .copyrateprofilebtn { + width: 150px; + margin-right: 10px; + } + .right { + float: right; + } + .pids { + float: left; + width: 25%; + } + .leftzero { + padding-left: 0; + } + .roll { + border-bottom-left-radius: 3px; + } + .pidTuningLevel { + float: left; + } + .borderleft { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .textleft { + width: 25%; + float: left; + text-align: left; + } + .topspacer { + margin-top: 5px; + } + .bottomarea { + float: left; + width: calc(100% - 2px); + border-bottom: 1px solid var(--subtleAccent); + border-left: 1px solid var(--subtleAccent); + border-right: 1px solid var(--subtleAccent); + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; + padding-top: 5px; + padding-bottom: 5px; + background-color: #f9f9f9; + height: 20px; + } + .profile { + min-width: 130px; + select { + border: 1px solid var(--subtleAccent); + border-radius: 3px; + margin-left: 5px; + margin-right: 5px; + width: calc(100% - 10px); + } + } + .rate_profile { + min-width: 130px; + select { + border: 1px solid var(--subtleAccent); + border-radius: 3px; + margin-left: 5px; + margin-right: 5px; + width: calc(100% - 10px); + } + } + .controller { + width: 150px; + select { + border: 1px solid var(--subtleAccent); + margin-left: 5px; + width: calc(100% - 10px); + } + } + .delta { + width: 150px; + select { + border: 1px solid var(--subtleAccent); + margin-left: 5px; + width: calc(100% - 10px); + } + } + .bracket { + background-image: url(../../images/icons/icon_bracket.svg); + background-repeat: no-repeat; + height: 35px; + width: 14px; + margin-top: -23px; + margin-left: 8px; + } + .rates_preview_cell { + position: relative; + width: 100%; + height: 362px; + } + .rates_preview { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-size: 100%; + } + .pidTuning { + td { + padding: 5px; + width: 40%; + &:first-child { + width: 10%; + padding-bottom: 6px; + padding-top: 5px; + } + &:last-child { + width: 40%; + } + } + tr { + width: 100%; + border-bottom: 1px solid var(--subtleAccent); + padding: 0; + } + } + .rc_curve { + .cf { + tr { + td { + padding: 0; + } + } + } + } + .rc_curve_bg { + float: left; + } + .new_rates_last-child { + border-bottom: none; + } + .filter { + padding-left: 5px; + } + dialog { + width: 40em; + border-radius: 5px; + .buttons { + position: static; + margin-top: 2em; + } + h3 { + margin-bottom: 0.5em; + } + select { + border: 1px solid var(--subtleAccent); + margin-left: 5px; + width: 120px; + } + } + .tuningSlider { + -webkit-appearance: none; + width: calc(100% - 14px); + height: 15px; + border: none; + outline: none; + opacity: 0.8; + transition: opacity .2s; + margin: 7px; + background: var(--boxBackground); + &:hover { + opacity: 1; + } + &::-webkit-slider-runnable-track { + -webkit-appearance: none; + border: solid 1px var(--subtleAccent); + border-radius: 4px; + background: linear-gradient(90deg, rgb(197, 197, 197) 0%, rgb(241, 241, 241) 50%, rgb(255, 84, 14) 100%); + height: 15px; + } + &::-webkit-slider-thumb { + -webkit-appearance: none; + width: 23px; + height: 23px; + border-radius: 50%; + background: #ffbb2a; + border: solid 1px #828885; + cursor: pointer; + position: relative; + bottom: 5px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); + } + } + .nonExpertModeSliders { + .tuningSlider { + &::-webkit-slider-runnable-track { + background: linear-gradient(90deg, rgb(197, 197, 197) -50%, rgb(241, 241, 241) 50%, rgb(255, 84, 14) 150%); + background-size: 55%; + background-position: 44%; + background-repeat: no-repeat; + } + } + } + .disabledSliders { + .tuningSlider { + &::-webkit-slider-runnable-track { + background: linear-gradient(90deg, rgb(197, 197, 197) -50%, rgb(241, 241, 241) 50%, rgb(197, 197, 197) 150%); + background-repeat: no-repeat; + } + &::-webkit-slider-thumb { + -webkit-appearance: none; + width: 23px; + height: 23px; + border-radius: 50%; + background: transparent; + border: solid 1px #828885; + cursor: pointer; + position: relative; + bottom: 5px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); + } + } + } + .sliderLabels { + tr { + border-bottom: 1px solid var(--subtleAccent); + &:last-child { + border-bottom: none; + } + td { + &:first-child { + text-align: right; + width: 20%; + } + &:nth-child(2) { + text-align: center; + width: 30px; + } + &:last-child { + width: 30px; + } + } + } + span { + color: black; + font-size: 12px; + } + } + .tuningPIDSliders { + .pid_titlebar { + th { + text-align: center; + &:first-child { + width: 6%; + text-align: right; + border-right: none; + } + &:nth-child(2) { + width: 14%; + border-right: none; + } + &:nth-child(3) { + width: 30px; + } + &:last-child { + width: 30px; + } + } + } + } + .tuningFilterSliders { + .pid_titlebar { + th { + text-align: center; + &:first-child { + width: 10%; + border-right: none; + } + &:nth-child(2) { + width: 30px; + } + &:last-child { + width: 30px; + } + } + } + } + .slidersWarning { + background: #ffa3a3; + border: 1px solid red; + font-weight: 600; + font-size: 12px; + } + .nonExpertModeSlidersNote { + text-align: center; + padding-top: 2px; + padding-bottom: 2px; + } + .expertSettingsDetectedNote { + text-align: center; + padding-top: 2px; + padding-bottom: 2px; + } + .note-button { + td { + &:nth-child(n) { + padding-left: 7px; + padding-right: 7px; + text-align: center; + } + &:first-child { + width: 75%; + border-right: none; + } + } + .regular-button { + display: block; + overflow-wrap: break-word; + margin: 2px; + } + } + .subtab-rates { + display: flex; + flex-flow: row wrap; + align-items: flex-start; + justify-content: center; + .cf_column { + min-width: 380px; + flex: 1; + } + } + .subtab-pid { + display: flex; + flex-flow: row wrap; + align-items: flex-start; + justify-content: center; + .cf_column { + min-width: 450px; + flex: 1.3; + } + .cf_column_right { + min-width: 300px; + margin-left: 15px; + flex: 1; + } + .note { + flex: 0 0 100%; + } + } + table.filterTable { + table-layout: auto; + } + .rates_logo_div { + margin-top: -10%; + text-align: center; + } + .rates_logo { + width: 80%; + height: 80%; + } + .rates-tab-warning { + display: flex; + flex-flow: row wrap; + } + .float-left { + float: left; + } + .content_wrapper_header { + display: flex; + } + .content_wrapper_header_btns { + margin-left: auto; + } +} +.fancy.header { + background-color: #D6D6D6; + padding-top: 8px; + font-size: 12px; + border-bottom: 1px solid var(--subtleAccent); + color: #828282; + background-image: linear-gradient(315deg, rgba(255, 255, 255, .2) 10%, transparent 10%, transparent 20%, rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .2) 30%, transparent 30%, transparent 40%, rgba(255, 255, 255, .2) 40%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 60%, rgba(255, 255, 255, .2) 60%, rgba(255, 255, 255, .2) 70%, transparent 70%, transparent 80%, rgba(255, 255, 255, .2) 80%, rgba(255, 255, 255, .2) 90%, transparent 90%, transparent 100%, rgba(255, 255, 255, .2) 100%, transparent); + th { + padding-bottom: 4px; + padding-top: 4px; + padding-left: 5px; + } +} +.pid_mode { + width: calc(100% - 5px); + height: 18px; + background-color: #D6D6D6; + float: left; + margin: 0; + text-align: left; + line-height: 13px; + padding: 5px 0 0 5px; + font-size: 12px; + border-bottom: 1px solid var(--subtleAccent); + color: #828282; + font-weight: normal; + background-image: linear-gradient(315deg, rgba(255, 255, 255, .2) 10%, transparent 10%, transparent 20%, rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .2) 30%, transparent 30%, transparent 40%, rgba(255, 255, 255, .2) 40%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 60%, rgba(255, 255, 255, .2) 60%, rgba(255, 255, 255, .2) 70%, transparent 70%, transparent 80%, rgba(255, 255, 255, .2) 80%, rgba(255, 255, 255, .2) 90%, transparent 90%, transparent 100%, rgba(255, 255, 255, .2) 100%, transparent); + >div { + &:first-child { + float: left; + } + } +} +.pid_roll { + background-color: #FF8080; +} +.pid_pitch { + background-color: #80FF80; +} +.pid_yaw { + background-color: #8080FF; +} +.show { + width: 130px; + margin-right: 3px; +} +.subtab-filter { + table { + tr { + td { + &:first-child { + text-align: right; + padding-left: 5px; + width: 1%; + } + } + } + } + .two_columns { + display: flex; + .two_columns_first { + margin-right: 10px; + height: fit-content; + } + .two_columns_second { + margin-left: 10px; + height: fit-content; + } + } +} +.tabarea { + width: calc(100% - 22px); + position: relative; + padding: 10px; + border: 1px solid var(--subtleAccent); + border-bottom-right-radius: 8px; + border-bottom-left-radius: 8px; + border-top: 0 solid var(--subtleAccent); + background: #f9f9f9; +} +@media all and (max-width: 575px) { + .tab-pid_tuning { + dialog { + width: calc(100% - 2em); + border-radius: unset; + } + .content_wrapper_header { + flex-wrap: wrap; + } + .profile { + width: calc(50% - 5px); + } + .rate_profile { + width: calc(50% - 5px); + margin-left: 5px; + margin-right: 0; + } + .copyprofilebtn { + width: calc(50% - 5px); + } + .copyrateprofilebtn { + width: calc(50% - 5px); + margin-right: 0; + } + .resetbt { + width: calc(50% - 5px); + } + .show { + width: calc(50% - 5px); + margin-right: 0; + } + .controller { + margin-right: 0; + width: 100%; + } + .content_wrapper_header_btns { + display: flex; + flex-wrap: wrap; + } + .tab-container { + >div { + width: calc(100% / 3); + } + } + .subtab-pid { + .cf_column { + min-width: 100%; + width: 100%; + } + .cf_column_right { + min-width: 100%; + margin-left: 0px; + } + } + .subtab-rates { + .cf_column { + min-width: 100%; + width: 100%; + } + } + .note-button { + td { + &:first-child { + width: 60%; + } + } + } + .spacer_left { + width: 100%; + } + .sliderHeaders { + height: 18px; + background-color: #D6D6D6; + line-height: 13px; + font-size: 12px; + border-bottom: 1px solid var(--subtleAccent); + color: #828282; + font-weight: normal; + background-image: linear-gradient(315deg, rgba(255, 255, 255, .2) 10%, transparent 10%, transparent 20%, rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .2) 30%, transparent 30%, transparent 40%, rgba(255, 255, 255, .2) 40%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 60%, rgba(255, 255, 255, .2) 60%, rgba(255, 255, 255, .2) 70%, transparent 70%, transparent 80%, rgba(255, 255, 255, .2) 80%, rgba(255, 255, 255, .2) 90%, transparent 90%, transparent 100%, rgba(255, 255, 255, .2) 100%, transparent); + span { + color: #828282; + } + } + .sliderLabels { + tr.sliderHeaders { + td { + &:first-child { + text-align: left; + } + } + } + } + .tuningPIDSliders { + .pid_titlebar { + th { + &:last-child { + width: 20%; + } + &:nth-child(2) { + width: 20%; + } + } + } + } + .tuningFilterSliders { + .pid_titlebar { + th { + &:last-child { + width: 20%; + } + &:nth-child(2) { + width: 20%; + } + } + } + } + .pid_titlebar { + th { + div { + .xs { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + } + } + } + } + .subtab-filter { + .two_columns { + flex-wrap: wrap; + .two_columns_first { + margin-right: 0; + } + .two_columns_second { + margin-left: 0; + } + } + } +} +@media only screen and (max-width: 1205px) { + .tab-pid_tuning { + .subtab-pid { + .spacer_left { + width: 100%; + } + } + } +} +@media only screen and (max-width: 1405px) { + .tab-pid_tuning { + .subtab-rates { + .ratePreview.spacer_left { + width: 100%; + } + } + } +} diff --git a/src/css/tabs/ports.css b/src/css/tabs/ports.css deleted file mode 100644 index c3eb8a3a..00000000 --- a/src/css/tabs/ports.css +++ /dev/null @@ -1,157 +0,0 @@ -.tab-ports { - position: relative; -} - -#tab-ports-templates { - display: none; -} - -.tab-ports table { - margin-bottom: 10px; - width: 100%; - border-collapse: collapse; -} - -.tab-ports table, .tab-ports table th, .tab-ports table td { - border-left: 0; - border-right: 0; - border-top: 0; -} - -.tab-ports table tr td:first-child { - text-align: left; -} - -.tab-ports table td { - border-bottom: 1px solid var(--subtleAccent); - padding: 3px 3px 3px 5px; - border-left: 1px solid var(--subtleAccent); - border-right: 1px solid var(--subtleAccent); -} - -.tab-ports table thead tr:first-child, .tab-ports table tr:nth-child(even) select, -.tab-ports table thead tr:first-child, .tab-ports table tr:nth-child(even) { - background-color: var(--alternativeBackground); -} - -.tab-ports table thead tr:first-child { - font-size: 12px; - height: 25px; - border-top: 0; - border-right: 0; - border-left: 0; -} - -.tab-ports .function input { - vertical-align: -2px; -} - -.tab-ports .function label { - margin-right: 5px; -} - -.tab-ports select { - border: 1px solid var(--subtleAccent); - border-radius: 3px; - margin-right: 3px; - background: var(--boxBackground); - color: var(--defaultText); -} - -.tab-ports .require-support { - display: none; -} - -.tab-ports.supported .require-support { - display: block; -} - -.tab-ports .require-upgrade { - display: block; -} - -.tab-ports.supported .require-upgrade { - display: none; -} - -/* margin required when cell contents wrap */ -.tab-ports .ports select { - margin-top: 5px; - margin-bottom: 5px; -} - -.tab-ports .ports select[name=function-peripherals], -.tab-ports .ports select[name=function-telemetry] { - max-width: 110px; -} - -.tab-ports .ports td { - text-align: center; -} - -.tab-ports .ports thead td { - white-space: nowrap; - padding: 5px 7px; - background-color: var(--quietHeader); - color: var(--quietText); -} - -.tab-ports .ports thead td:first-child { - text-align: left; - border-top-left-radius: 5px; - border-left: 0; -} - -.tab-ports .ports thead td:last-child { - border-top-right-radius: 5px; - border-right: 0; -} - -@media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) { - .tab-ports table thead tr:first-child { - font-size: 12px; - height: 22px; - } -} - -@media all and (max-width: 575px) { - .tab-ports .config { - text-align: left; - border-top-left-radius: 5px; - border-left: 0; - } - .tab-ports table td { - padding: 0; - } - .tab-ports .ports select { - margin: 0; - width: 100%; - border: none; - height: 25px; - border-radius: unset; - } - .tab-ports .portIdentifier td { - height: 18px; - background-color: #D6D6D6; - padding: 2px 5px; - font-size: 12px; - color: #828282; - font-weight: normal; - background-image: linear-gradient(315deg, rgba(255, 255, 255, .2) 10%, transparent 10%, transparent 20%, - rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .2) 30%, transparent 30%, transparent 40%, - rgba(255, 255, 255, .2) 40%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 60%, - rgba(255, 255, 255, .2) 60%, rgba(255, 255, 255, .2) 70%, transparent 70%, transparent 80%, - rgba(255, 255, 255, .2) 80%, rgba(255, 255, 255, .2) 90%, transparent 90%, transparent 100%, - rgba(255, 255, 255, .2) 100%, transparent); - } - .tab-ports .ports select[name=function-peripherals], .tab-ports .ports select[name=function-telemetry], - .tab-ports .ports select[name=function-sensors] { - border-bottom: 1px solid var(--subtleAccent); - } - .tab-ports .ports thead td { - font-size: 8px; - width: calc(100% / 5); - word-break: break-word; - white-space: unset; - } -} diff --git a/src/css/tabs/ports.less b/src/css/tabs/ports.less new file mode 100644 index 00000000..0e9e904c --- /dev/null +++ b/src/css/tabs/ports.less @@ -0,0 +1,192 @@ +.tab-ports { + position: relative; + table { + margin-bottom: 10px; + width: 100%; + border-collapse: collapse; + border-left: 0; + border-right: 0; + border-top: 0; + th { + border-left: 0; + border-right: 0; + border-top: 0; + } + td { + border-top: 0; + border-bottom: 1px solid var(--subtleAccent); + border-left: 1px solid var(--subtleAccent); + border-right: 1px solid var(--subtleAccent); + padding: 3px 3px 3px 5px; + } + tr { + td { + &:first-child { + text-align: left; + } + } + &:nth-child(even) { + select { + background-color: var(--alternativeBackground); + } + background-color: var(--alternativeBackground); + } + } + thead { + tr { + &:first-child { + background-color: var(--alternativeBackground); + background-color: var(--alternativeBackground); + font-size: 12px; + height: 25px; + border-top: 0; + border-right: 0; + border-left: 0; + } + } + } + } + .function { + input { + vertical-align: -2px; + } + label { + margin-right: 5px; + } + } + select { + border: 1px solid var(--subtleAccent); + border-radius: 3px; + margin-right: 3px; + background: var(--boxBackground); + color: var(--defaultText); + } + .require-support { + display: none; + } + .require-upgrade { + display: block; + } + .ports { + select { + margin-top: 5px; + margin-bottom: 5px; + } + select[name=function-peripherals] { + max-width: 110px; + } + select[name=function-telemetry] { + max-width: 110px; + } + td { + text-align: center; + } + thead { + td { + white-space: nowrap; + padding: 5px 7px; + background-color: var(--quietHeader); + color: var(--quietText); + &:first-child { + text-align: left; + border-top-left-radius: 5px; + border-left: 0; + } + &:last-child { + border-top-right-radius: 5px; + border-right: 0; + } + } + } + } +} +#tab-ports-templates { + display: none; +} +.tab-ports.supported { + .require-support { + display: block; + } + .require-upgrade { + display: none; + } +} +@media only screen and (max-width: 1055px) { + .tab-ports { + table { + thead { + tr { + &:first-child { + font-size: 12px; + height: 22px; + } + } + } + } + } +} +@media only screen and (max-device-width: 1055px) { + .tab-ports { + table { + thead { + tr { + &:first-child { + font-size: 12px; + height: 22px; + } + } + } + } + } +} +@media all and (max-width: 575px) { + .tab-ports { + .config { + text-align: left; + border-top-left-radius: 5px; + border-left: 0; + } + table { + td { + padding: 0; + } + } + .ports { + select { + margin: 0; + width: 100%; + border: none; + height: 25px; + border-radius: unset; + } + select[name=function-peripherals] { + border-bottom: 1px solid var(--subtleAccent); + } + select[name=function-telemetry] { + border-bottom: 1px solid var(--subtleAccent); + } + select[name=function-sensors] { + border-bottom: 1px solid var(--subtleAccent); + } + thead { + td { + font-size: 8px; + width: calc(100% / 5); + word-break: break-word; + white-space: unset; + } + } + } + .portIdentifier { + td { + height: 18px; + background-color: #D6D6D6; + padding: 2px 5px; + font-size: 12px; + color: #828282; + font-weight: normal; + background-image: linear-gradient(315deg, rgba(255, 255, 255, .2) 10%, transparent 10%, transparent 20%, rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .2) 30%, transparent 30%, transparent 40%, rgba(255, 255, 255, .2) 40%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 60%, rgba(255, 255, 255, .2) 60%, rgba(255, 255, 255, .2) 70%, transparent 70%, transparent 80%, rgba(255, 255, 255, .2) 80%, rgba(255, 255, 255, .2) 90%, transparent 90%, transparent 100%, rgba(255, 255, 255, .2) 100%, transparent); + } + } + } +} diff --git a/src/css/tabs/power.css b/src/css/tabs/power.css deleted file mode 100644 index c3a28167..00000000 --- a/src/css/tabs/power.css +++ /dev/null @@ -1,83 +0,0 @@ -#tab-power-templates { - display: none; -} - -.tab-power .ui-grid-col { - margin-bottom: 0; -} - -.tab-power td.configuration { - padding-top: 5px; - text-align: left; -} - -.tab-power .battery-state .configuration { - border-bottom: 0; -} - -.tab-power td.value { - text-align: left; - width: 20%; -} - -.tab-power .label { - width: 25%; -} - -.tab-power .number input { - width: 50px; - padding-left: 3px; - height: 20px; - line-height: 20px; - text-align: left; - border: 1px solid var(--subtleAccent); - border-radius: 3px; - margin-right: 11px; - font-size: 12px; - font-weight: normal; -} - - - - -.tab-power .number, -.tab-power .select -{ - margin-bottom: 5px; - clear: left; - padding-bottom: 5px; - border-bottom: 1px solid var(--subtleAccent); - width: 100%; - float: left; -} - -.tab-power .battery-configuration select { - border: 1px solid var(--subtleAccent); - border-radius: 3px; - margin-right: 5px; - float: left; - width: 150px; -} - -.tab-power .number:last-child, -.tab-power .select:last-child { - border-bottom: none; - padding-bottom: 0; - margin-bottom: 0; -} - -.tab-power .require-support { - display: none; -} - -.tab-power.supported .require-support { - display: block; -} - -.tab-power .require-upgrade { - display: block; -} - -.tab-power.supported .require-upgrade { - display: none; -} diff --git a/src/css/tabs/power.less b/src/css/tabs/power.less new file mode 100644 index 00000000..85c9a13e --- /dev/null +++ b/src/css/tabs/power.less @@ -0,0 +1,85 @@ +#tab-power-templates { + display: none; +} +.tab-power { + .ui-grid-col { + margin-bottom: 0; + } + td.configuration { + padding-top: 5px; + text-align: left; + } + .battery-state { + .configuration { + border-bottom: 0; + } + } + td.value { + text-align: left; + width: 20%; + } + .label { + width: 25%; + } + .number { + input { + width: 50px; + padding-left: 3px; + height: 20px; + line-height: 20px; + text-align: left; + border: 1px solid var(--subtleAccent); + border-radius: 3px; + margin-right: 11px; + font-size: 12px; + font-weight: normal; + } + margin-bottom: 5px; + clear: left; + padding-bottom: 5px; + border-bottom: 1px solid var(--subtleAccent); + width: 100%; + float: left; + &:last-child { + border-bottom: none; + padding-bottom: 0; + margin-bottom: 0; + } + } + .select { + margin-bottom: 5px; + clear: left; + padding-bottom: 5px; + border-bottom: 1px solid var(--subtleAccent); + width: 100%; + float: left; + &:last-child { + border-bottom: none; + padding-bottom: 0; + margin-bottom: 0; + } + } + .battery-configuration { + select { + border: 1px solid var(--subtleAccent); + border-radius: 3px; + margin-right: 5px; + float: left; + width: 150px; + } + } + .require-support { + display: none; + } + .require-upgrade { + display: block; + } +} +.tab-power.supported { + .require-support { + display: block; + } + .require-upgrade { + display: none; + } +} diff --git a/src/css/tabs/privacy_policy.css b/src/css/tabs/privacy_policy.css deleted file mode 100644 index 70c1a1b1..00000000 --- a/src/css/tabs/privacy_policy.css +++ /dev/null @@ -1,11 +0,0 @@ -.tab-privacy_policy p, -.tab-privacy_policy h1, -.tab-privacy_policy h2, -.tab-privacy_policy h3, -.tab-privacy_policy h4 { - margin-bottom: 10px; -} - -.tab-privacy_policy li { - margin-bottom: 0px !important; -} diff --git a/src/css/tabs/privacy_policy.less b/src/css/tabs/privacy_policy.less new file mode 100644 index 00000000..3cdb8b3b --- /dev/null +++ b/src/css/tabs/privacy_policy.less @@ -0,0 +1,8 @@ +.tab-privacy_policy { + p, h1, h2, h3, h4 { + margin-bottom: 10px; + } + li { + margin-bottom: 0px !important; + } +} diff --git a/src/css/tabs/receiver.css b/src/css/tabs/receiver.css deleted file mode 100644 index c3985746..00000000 --- a/src/css/tabs/receiver.css +++ /dev/null @@ -1,718 +0,0 @@ -.tab-receiver { - font-weight: normal; -} - -.tab-receiver .graphAndLabel { - float: left; - width: 100%; - margin-bottom: 0; -} - -.tab-receiver .spacer { - padding-left: 10px; - padding-right: 10px; - width: calc(100% - 10px); -} - -.tab-receiver input[type="number"]::-webkit-inner-spin-button { - border: 0; -} - -.tab-receiver .bars { - font-weight: bold; -} - -.tab-receiver .bars ul { - margin-bottom: 5px; - clear: left; -} - -.tab-receiver .bars li { - float: left; - height: 22px; - line-height: 20px; - white-space: nowrap; -} - -.tab-receiver .bars .name { - padding: 0 10px 0 0; - width: 60px; - text-align: right; -} - -.tab-receiver .bars .meter { - width: calc(100% - 70px); -} - -.tab-receiver .bars .meter-bar { - position: relative; - margin-top: 2px; - width: calc(100% - 2px); - height: 15px; - border: 1px solid var(--subtleAccent); - background-color: #f4f4f4; - border-radius: 3px; -} - -.tab-receiver .bars .meter-bar .label { - position: absolute; - width: 50px; - height: 15px; - line-height: 15px; - text-align: center; - color: #474747; -} - -.tab-receiver .bars .meter-bar .fill { - position: relative; - overflow: hidden; - border-radius: 2px; - width: 50%; - height: 15px; - background-color: green; -} - -.tab-receiver .bars .meter-bar .fill .label { - color: white; -} - -.tab-receiver .bars ul:nth-of-type(1) .fill { - background-color: #f1453d; -} - -.tab-receiver .bars ul:nth-of-type(2) .fill { - background-color: #673fb4; -} - -.tab-receiver .bars ul:nth-of-type(3) .fill { - background-color: #2b98f0; -} - -.tab-receiver .bars ul:nth-of-type(4) .fill { - background-color: #1fbcd2; -} - -.tab-receiver .bars ul:nth-of-type(5) .fill { - background-color: #159588; -} - -.tab-receiver .bars ul:nth-of-type(6) .fill { - background-color: #50ae55; -} - -.tab-receiver .bars ul:nth-of-type(7) .fill { - background-color: #cdda49; -} - -.tab-receiver .bars ul:nth-of-type(8) .fill { - background-color: #fdc02f; -} - -.tab-receiver .bars ul:nth-of-type(9) .fill { - background-color: #fc5830; -} - -.tab-receiver .bars ul:nth-of-type(10) .fill { - background-color: #785549; -} - -.tab-receiver .bars ul:nth-of-type(11) .fill { - background-color: #9e9e9e; -} - -.tab-receiver .bars ul:nth-of-type(12) .fill { - background-color: #617d8a; -} - -.tab-receiver .bars ul:nth-of-type(13) .fill { - background-color: #cf267d; -} - -.tab-receiver .bars ul:nth-of-type(14) .fill { - background-color: #7a1464; -} - -.tab-receiver .bars ul:nth-of-type(15) .fill { - background-color: #3a7a14; -} - -.tab-receiver .bars ul:nth-of-type(16) .fill { - background-color: #14407a; -} - -.tab-receiver .tunings { - float: right; - position: relative; - margin: 0 0 10px 0; - width: 100%; - border-top-left-radius: 5px; - border-bottom-left-radius: 5px; -} - -.tab-receiver .tunings .head { - height: 15px; - text-align: left; - padding: 4px 4px 4px 6px; - font-weight: normal; - background: #828885; - color: white; - border-top-left-radius: 3px; - border-right: 1px solid var(--subtleAccent); -} -.tab-receiver .tunings table { - width: 100%; - border-collapse: collapse; -} - -.tab-receiver .tunings table, .tab-receiver .tunings table th, .tab-receiver .tunings table td { - text-align: left; - padding: 4px 4px 4px 6px; -} - -.tab-receiver .tunings table th { - background: var(--quietHeader); - color: var(--quietText); - border-right: 1px solid var(--subtleAccent); - font-weight: normal; -} - -.tab-receiver .tunings table th:first-child { - border-top-left-radius: 3px; -} - -.tab-receiver .tunings table th:last-child { - border-top-right-radius: 3px; - border-right: 0; -} - -.tab-receiver .tunings table td { - border-right: 1px solid var(--subtleAccent); - padding: 1px; -} - -.tab-receiver .tunings table td:first-child { - border-bottom-left-radius: 3px; -} - -.tab-receiver .tunings table td:last-child { - border-bottom-right-radius: 3px; - border-right: 0; -} - -.tab-receiver .tunings table input { - width: calc(100% - 8px); - border: 1px solid var(--subtleAccent); - border-radius: 3px; - height: 22px; - margin: 4px; - line-height: 22px; - text-align: right; - box-sizing: border-box; -} - -.tab-receiver .input-helpicon-flex { - display: flex; - flex-flow: row nowrap; -} - -.tab-receiver .input-helpicon-flex .helpicon { - min-width: 14px; - margin-left: 4px; -} - -.tab-receiver .tunings .sticks th, -.tab-receiver .tunings .deadband th { - width: 33%; -} - -.tab-receiver .rssi_channel_wrapper { - float: right; - margin: 0 0 10px 0; - border-left: 0; - width: 30%; - box-sizing: border-box; - border-top-right-radius: 5px; - border-bottom-right-radius: 5px; - border-right: 1px solid var(--subtleAccent); - border-bottom: 1px solid var(--subtleAccent); -} - -.tab-receiver .rcmap_wrapper { - float: right; - position: relative; - margin: 0 0 10px 0; - width: 70%; - box-sizing: border-box; - border-top-left-radius: 5px; - border-bottom-left-radius: 5px; - border-left: 1px solid var(--subtleAccent); - border-bottom: 1px solid var(--subtleAccent); -} - -.tab-receiver .rssi_channel_wrapper .head, -.tab-receiver .rcmap_wrapper .head { - height: 15px; - padding: 4px; - text-align: left; - font-weight: normal; - background: var(--quietHeader); - color: var(--quietText); -} - -.tab-receiver .rcmap_wrapper .head { - border-right: 1px solid var(--subtleAccent); - border-top-left-radius: 3px; - padding-left: 6px; -} -.tab-receiver .rssi_channel_wrapper .head { - border-top-right-radius: 3px; -} - -.tab-receiver .rssi_channel_wrapper select { - width: calc(100% - 10px); -} - -.tab-receiver .hybrid_element { - border-right: 1px solid var(--subtleAccent); -} - -.tab-receiver .hybrid_element select { - height: 22px; - z-index: 1; - margin: 4px; - width: calc(100% - 10px); -} - -.tab-receiver .hybrid_element input { - position: absolute; - padding-left: 5px; - width: calc(100% - 36px); - height: 20px; - z-index: 2; - border: 1px solid var(--subtleAccent); - margin: 4px; - border-radius: 3px 0 0 3px; -} - -.tab-receiver select { - height: 22px; - padding-left: 5px; - border: 1px solid var(--subtleAccent); - border-radius: 3px; - margin: 4px; -} - -.tab-receiver .rc-smoothing-type { - margin-bottom: 5px; - clear: left; - padding-bottom: 5px; - width: 100%; -} - -.tab-receiver .rc-smoothing-channels { - margin-bottom: 5px; - clear: left; - padding-bottom: 5px; - border-bottom: 1px solid var(--subtleAccent); - width: 100%; -} - -.tab-receiver .rcSmoothing table td { - border-right: none; -} - -.tab-receiver .rcSmoothing table select, -.tab-receiver .rcSmoothing table input { - width: 90%; -} - -.tab-receiver .rcSmoothing table .helpicon { - margin-top: 0; -} - -.tab-receiver .rcSmoothing td:first-child { - width: 120px; - padding-left: 8px; -} - -.tab-receiver .rcSmoothing td:last-child { - width: calc(100% - 78px); -} - -.tab-receiver .rcInterpolation .slider input { - -webkit-appearance: slider-horizontal; -} - -/*Plot Control*/ - -.tab-receiver .plot_control { - float: right; - width: 181px; - height: 203px; - margin: 0; - background-color: #ECECEC; - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; -} - -.tab-receiver .plot_control .table { - display:table; - width: 100%; - table-layout:fixed; - border-collapse:separate; - border-spacing:5px; - box-sizing: border-box; - padding: 5px 5px 5px 3px; -} - -.tab-receiver .plot_control .row-container { - display: table-row-group; -} - -.tab-receiver .plot_control .receiver-button a { - background-color: var(--accent); - border-radius: 3px; - border: 1px solid #e8b423; - color: #000; - font-size: 10px; - line-height: 17px; - text-shadow: 0 1px rgba(255, 255, 255, 0.25); - text-transform: uppercase; - letter-spacing: 0.03em; - display: block; - text-align: center; - } - - .tab-receiver .plot_control .row { - display: table-row; - } - - .tab-receiver .plot_control .left-cell { - display: table-cell; - vertical-align: middle; - font-weight: bold; - } - - .tab-receiver .plot_control .right-cell { - display: table-cell; - vertical-align: middle; - text-align: right; - width: 87px; - font-size: smaller; - } - - .tab-receiver .plot_control select { - width: 100%; - border: 1px solid var(--subtleAccent); - border-radius: 3px; - } - - .tab-receiver .plot_control .value { - padding: 4px; - color: #fff; - border-radius: 3px; - } - - .tab-receiver .plot_control .ch1 { - background-color: #F1453D; - } - - .tab-receiver .plot_control .ch2 { - background-color: #673FB4; - } - - .tab-receiver .plot_control .ch3 { - background-color: #2B98F0; - } - - .tab-receiver .plot_control .ch4 { - background-color: #1FBCD2; - } - -.tab-receiver #RX_plot { - width: calc(100% - 201px); - height: 200px; -} - -.tab-receiver #RX_plot .line:nth-child(1) { - stroke: #f1453d; -} - -.tab-receiver #RX_plot .line:nth-child(2) { - stroke: #673fb4; -} - -.tab-receiver #RX_plot .line:nth-child(3) { - stroke: #2b98f0; -} - -.tab-receiver #RX_plot .line:nth-child(4) { - stroke: #1fbcd2; -} - -.tab-receiver #RX_plot .line:nth-child(5) { - stroke: #159588; -} - -.tab-receiver #RX_plot .line:nth-child(6) { - stroke: #50ae55; -} - -.tab-receiver #RX_plot .line:nth-child(7) { - stroke: #cdda49; -} - -.tab-receiver #RX_plot .line:nth-child(8) { - stroke: #fdc02f; -} - -.tab-receiver #RX_plot .line:nth-child(9) { - stroke: #fc5830; -} - -.tab-receiver #RX_plot .line:nth-child(10) { - stroke: #785549; -} - -.tab-receiver #RX_plot .line:nth-child(11) { - stroke: #9e9e9e; -} - -.tab-receiver #RX_plot .line:nth-child(12) { - stroke: #7a6614; -} - -.tab-receiver #RX_plot .line:nth-child(13) { - stroke: #cf267d; -} - -.tab-receiver #RX_plot .line:nth-child(14) { - stroke: #7a1464; -} - -.tab-receiver #RX_plot .line:nth-child(15) { - stroke: #3a7a14; -} - -.tab-receiver #RX_plot .line:nth-child(16) { - stroke: #14407a; -} - -.tab-receiver .buttons { - width: calc(100% - 20px); - position: absolute; - bottom: 10px; -} - -/* SVG classes*/ -.tab-receiver .grid .tick { - stroke: silver; - stroke-width: 1px; - shape-rendering: crispEdges; -} - -.tab-receiver .line { - stroke-width: 2px; - fill: none; -} - -.tab-receiver .grid path { - stroke-width: 0; -} - -.tab-receiver .axis path, .axis line { - fill: none; - stroke: #ccc; - stroke-width: 1px; - shape-rendering: crispEdges; -} - -.tab-receiver text { - stroke: none; - fill: #828885; - font-size: 10px; -} - -.tab-receiver .pid_titlebar { - border-radius: 3px; -} - -.tab-receiver .model_preview_cell { - position: relative; - width: 100%; - height: 180px; -} - -.tab-receiver .model_preview { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - margin-top: -1px; - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; -} - -@media all and (max-width: 575px) { - .tab-receiver .bars { - margin-bottom: 10px; - } - - .tab-receiver .spacer { - padding-left: 0px; - padding-right: 0px; - width: 100%; - } - - .tab-receiver #RX_plot { - width: calc(100% - 120px); - } - - .tab-receiver .plot_control { - width: 112px; - } - - .tab-receiver .plot_control .row { - display: inherit; - } -} - - -/* rx configuration */ - -.tab-receiver .rssi input, -.tab-receiver .receiver select { - border: 1px solid var(--subtleAccent); - width: 230px; - height: 20px; - float: left; - margin-right: 15px; - border-radius: 3px; -} - -.tab-receiver table { - margin-bottom: 0; - width: 100%; - float: left; -} - -.tab-receiver table, .tab-receiver table th, .tab-receiver table td { - padding: 0; - text-align: left; -} - -.tab-receiver table th { - padding: 3px; - border-bottom: 1px solid var(--subtleAccent); -} - -.tab-receiver table td { - border-bottom: 1px solid var(--subtleAccent); -} - -.tab-receiver table tr td:first-child { - text-align: left; - width: 55px; -} - -.tab-receiver table thead tr:first-child { - background-color: #ececec; -} - -.tab-receiver dl.features dt { - float: left; - width: 10px; - height: 18px; - line-height: 18px; -} - -.tab-receiver dl.features dt input { - margin-top: 2px; -} - -.tab-receiver dl.features dd { - margin: 0 0 0 20px; - height: 18px; - line-height: 18px; -} - -.tab-receiver span { - margin: 0; -} - -.tab-receiver .spacer_box { - padding-bottom: 10px; - float: left; - width: calc(100% - 20px); -} - -.tab-receiver .select -{ - margin-bottom: 5px; - clear: left; - padding-bottom: 5px; - border-bottom: 1px solid var(--subtleAccent); - width: 100%; - float: left; -} - -.tab-receiver .select:last-child { - border-bottom: none; - padding-bottom: 0; - margin-bottom: 0; -} - -.tab-receiver .gui_box_titlebar { - margin-bottom: 0; -} - -.tab-receiver .gui_box { - margin-bottom: 10px; - float: left; - font-weight: bold; -} - -.tab-receiver .feature td { - border-bottom: none; - padding-bottom: 0; - margin-bottom: 0; -} - -.tab-receiver .feature .gui_box { - float: left; -} - -.tab-receiver .feature td:nth-child(2) { - width: 20px; -} - -.tab-receiver .serialRXBox, .spiRxBox { - padding-top: 0; -} - -.tab-receiver .gui_box span { - font-style: normal; - font-weight: normal; - line-height: 19px; - color: #4f4f4f; - font-size: 11px; -} - -@media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) { - .tab-receiver .gui_box span { - line-height: 17px; - } -} - -@media all and (max-width: 575px) { - .tab-receiver .feature .gui_box { - min-height: auto; - } - .tab-receiver .feature td:nth-child(2) { - width: auto; - } - .tab-receiver .features.rxMode, .tab-receiver .serialRX { - width: 100%; - } -} diff --git a/src/css/tabs/receiver.less b/src/css/tabs/receiver.less new file mode 100644 index 00000000..28e8f099 --- /dev/null +++ b/src/css/tabs/receiver.less @@ -0,0 +1,705 @@ +.tab-receiver { + font-weight: normal; + .graphAndLabel { + float: left; + width: 100%; + margin-bottom: 0; + } + .spacer { + padding-left: 10px; + padding-right: 10px; + width: calc(100% - 10px); + } + input[type="number"] { + &::-webkit-inner-spin-button { + border: 0; + } + } + .bars { + font-weight: bold; + ul { + margin-bottom: 5px; + clear: left; + &:nth-of-type(1) { + .fill { + background-color: #f1453d; + } + } + &:nth-of-type(2) { + .fill { + background-color: #673fb4; + } + } + &:nth-of-type(3) { + .fill { + background-color: #2b98f0; + } + } + &:nth-of-type(4) { + .fill { + background-color: #1fbcd2; + } + } + &:nth-of-type(5) { + .fill { + background-color: #159588; + } + } + &:nth-of-type(6) { + .fill { + background-color: #50ae55; + } + } + &:nth-of-type(7) { + .fill { + background-color: #cdda49; + } + } + &:nth-of-type(8) { + .fill { + background-color: #fdc02f; + } + } + &:nth-of-type(9) { + .fill { + background-color: #fc5830; + } + } + &:nth-of-type(10) { + .fill { + background-color: #785549; + } + } + &:nth-of-type(11) { + .fill { + background-color: #9e9e9e; + } + } + &:nth-of-type(12) { + .fill { + background-color: #617d8a; + } + } + &:nth-of-type(13) { + .fill { + background-color: #cf267d; + } + } + &:nth-of-type(14) { + .fill { + background-color: #7a1464; + } + } + &:nth-of-type(15) { + .fill { + background-color: #3a7a14; + } + } + &:nth-of-type(16) { + .fill { + background-color: #14407a; + } + } + } + li { + float: left; + height: 22px; + line-height: 20px; + white-space: nowrap; + } + .name { + padding: 0 10px 0 0; + width: 60px; + text-align: right; + } + .meter { + width: calc(100% - 70px); + } + .meter-bar { + position: relative; + margin-top: 2px; + width: calc(100% - 2px); + height: 15px; + border: 1px solid var(--subtleAccent); + background-color: #f4f4f4; + border-radius: 3px; + .label { + position: absolute; + width: 50px; + height: 15px; + line-height: 15px; + text-align: center; + color: #474747; + } + .fill { + position: relative; + overflow: hidden; + border-radius: 2px; + width: 50%; + height: 15px; + background-color: green; + .label { + color: white; + } + } + } + } + .tunings { + float: right; + position: relative; + margin: 0 0 10px 0; + width: 100%; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + .head { + height: 15px; + text-align: left; + padding: 4px 4px 4px 6px; + font-weight: normal; + background: #828885; + color: white; + border-top-left-radius: 3px; + border-right: 1px solid var(--subtleAccent); + } + table { + width: 100%; + border-collapse: collapse; + text-align: left; + padding: 4px 4px 4px 6px; + th { + text-align: left; + padding: 4px 4px 4px 6px; + background: var(--quietHeader); + color: var(--quietText); + border-right: 1px solid var(--subtleAccent); + font-weight: normal; + &:first-child { + border-top-left-radius: 3px; + } + &:last-child { + border-top-right-radius: 3px; + border-right: 0; + } + } + td { + text-align: left; + border-right: 1px solid var(--subtleAccent); + padding: 1px; + &:first-child { + border-bottom-left-radius: 3px; + } + &:last-child { + border-bottom-right-radius: 3px; + border-right: 0; + } + } + input { + width: calc(100% - 8px); + border: 1px solid var(--subtleAccent); + border-radius: 3px; + height: 22px; + margin: 4px; + line-height: 22px; + text-align: right; + box-sizing: border-box; + } + } + .sticks { + th { + width: 33%; + } + } + .deadband { + th { + width: 33%; + } + } + } + .input-helpicon-flex { + display: flex; + flex-flow: row nowrap; + .helpicon { + min-width: 14px; + margin-left: 4px; + } + } + .rssi_channel_wrapper { + float: right; + margin: 0 0 10px 0; + border-left: 0; + width: 30%; + box-sizing: border-box; + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + border-right: 1px solid var(--subtleAccent); + border-bottom: 1px solid var(--subtleAccent); + .head { + height: 15px; + padding: 4px; + text-align: left; + font-weight: normal; + background: var(--quietHeader); + color: var(--quietText); + border-top-right-radius: 3px; + } + select { + width: calc(100% - 10px); + } + } + .rcmap_wrapper { + float: right; + position: relative; + margin: 0 0 10px 0; + width: 70%; + box-sizing: border-box; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + border-left: 1px solid var(--subtleAccent); + border-bottom: 1px solid var(--subtleAccent); + .head { + height: 15px; + padding: 4px; + text-align: left; + font-weight: normal; + background: var(--quietHeader); + color: var(--quietText); + border-right: 1px solid var(--subtleAccent); + border-top-left-radius: 3px; + padding-left: 6px; + } + } + .hybrid_element { + border-right: 1px solid var(--subtleAccent); + select { + height: 22px; + z-index: 1; + margin: 4px; + width: calc(100% - 10px); + } + input { + position: absolute; + padding-left: 5px; + width: calc(100% - 36px); + height: 20px; + z-index: 2; + border: 1px solid var(--subtleAccent); + margin: 4px; + border-radius: 3px 0 0 3px; + } + } + select { + height: 22px; + padding-left: 5px; + border: 1px solid var(--subtleAccent); + border-radius: 3px; + margin: 4px; + } + .rc-smoothing-type { + margin-bottom: 5px; + clear: left; + padding-bottom: 5px; + width: 100%; + } + .rc-smoothing-channels { + margin-bottom: 5px; + clear: left; + padding-bottom: 5px; + border-bottom: 1px solid var(--subtleAccent); + width: 100%; + } + .rcSmoothing { + table { + td { + border-right: none; + } + select { + width: 90%; + } + input { + width: 90%; + } + .helpicon { + margin-top: 0; + } + } + td { + &:first-child { + width: 120px; + padding-left: 8px; + } + &:last-child { + width: calc(100% - 78px); + } + } + } + .rcInterpolation { + .slider { + input { + -webkit-appearance: slider-horizontal; + } + } + } + .plot_control { + float: right; + width: 181px; + height: 203px; + margin: 0; + background-color: #ECECEC; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + .table { + display: table; + width: 100%; + table-layout: fixed; + border-collapse: separate; + border-spacing: 5px; + box-sizing: border-box; + padding: 5px 5px 5px 3px; + } + .row-container { + display: table-row-group; + } + .receiver-button { + a { + background-color: var(--accent); + border-radius: 3px; + border: 1px solid #e8b423; + color: #000; + font-size: 10px; + line-height: 17px; + text-shadow: 0 1px rgba(255, 255, 255, 0.25); + text-transform: uppercase; + letter-spacing: 0.03em; + display: block; + text-align: center; + } + } + .row { + display: table-row; + } + .left-cell { + display: table-cell; + vertical-align: middle; + font-weight: bold; + } + .right-cell { + display: table-cell; + vertical-align: middle; + text-align: right; + width: 87px; + font-size: smaller; + } + select { + width: 100%; + border: 1px solid var(--subtleAccent); + border-radius: 3px; + } + .value { + padding: 4px; + color: #fff; + border-radius: 3px; + } + .ch1 { + background-color: #F1453D; + } + .ch2 { + background-color: #673FB4; + } + .ch3 { + background-color: #2B98F0; + } + .ch4 { + background-color: #1FBCD2; + } + } + #RX_plot { + width: calc(100% - 201px); + height: 200px; + .line { + &:nth-child(1) { + stroke: #f1453d; + } + &:nth-child(2) { + stroke: #673fb4; + } + &:nth-child(3) { + stroke: #2b98f0; + } + &:nth-child(4) { + stroke: #1fbcd2; + } + &:nth-child(5) { + stroke: #159588; + } + &:nth-child(6) { + stroke: #50ae55; + } + &:nth-child(7) { + stroke: #cdda49; + } + &:nth-child(8) { + stroke: #fdc02f; + } + &:nth-child(9) { + stroke: #fc5830; + } + &:nth-child(10) { + stroke: #785549; + } + &:nth-child(11) { + stroke: #9e9e9e; + } + &:nth-child(12) { + stroke: #7a6614; + } + &:nth-child(13) { + stroke: #cf267d; + } + &:nth-child(14) { + stroke: #7a1464; + } + &:nth-child(15) { + stroke: #3a7a14; + } + &:nth-child(16) { + stroke: #14407a; + } + } + } + .buttons { + width: calc(100% - 20px); + position: absolute; + bottom: 10px; + } + .grid { + .tick { + stroke: silver; + stroke-width: 1px; + shape-rendering: crispEdges; + } + path { + stroke-width: 0; + } + } + .line { + stroke-width: 2px; + fill: none; + } + .axis { + path { + fill: none; + stroke: #ccc; + stroke-width: 1px; + shape-rendering: crispEdges; + } + } + text { + stroke: none; + fill: #828885; + font-size: 10px; + } + .pid_titlebar { + border-radius: 3px; + } + .model_preview_cell { + position: relative; + width: 100%; + height: 180px; + } + .model_preview { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin-top: -1px; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + } + .rssi { + input { + border: 1px solid var(--subtleAccent); + width: 230px; + height: 20px; + float: left; + margin-right: 15px; + border-radius: 3px; + } + } + .receiver { + select { + border: 1px solid var(--subtleAccent); + width: 230px; + height: 20px; + float: left; + margin-right: 15px; + border-radius: 3px; + } + } + table { + margin-bottom: 0; + width: 100%; + float: left; + padding: 0; + text-align: left; + th { + text-align: left; + padding: 3px; + border-bottom: 1px solid var(--subtleAccent); + } + td { + padding: 0; + text-align: left; + border-bottom: 1px solid var(--subtleAccent); + } + tr { + td { + &:first-child { + text-align: left; + width: 55px; + } + } + } + thead { + tr { + &:first-child { + background-color: #ececec; + } + } + } + } + dl.features { + dt { + float: left; + width: 10px; + height: 18px; + line-height: 18px; + input { + margin-top: 2px; + } + } + dd { + margin: 0 0 0 20px; + height: 18px; + line-height: 18px; + } + } + span { + margin: 0; + } + .spacer_box { + padding-bottom: 10px; + float: left; + width: calc(100% - 20px); + } + .select { + margin-bottom: 5px; + clear: left; + padding-bottom: 5px; + border-bottom: 1px solid var(--subtleAccent); + width: 100%; + float: left; + &:last-child { + border-bottom: none; + padding-bottom: 0; + margin-bottom: 0; + } + } + .gui_box_titlebar { + margin-bottom: 0; + } + .gui_box { + margin-bottom: 10px; + float: left; + font-weight: bold; + span { + font-style: normal; + font-weight: normal; + line-height: 19px; + color: #4f4f4f; + font-size: 11px; + } + } + .feature { + td { + border-bottom: none; + padding-bottom: 0; + margin-bottom: 0; + &:nth-child(2) { + width: 20px; + } + } + .gui_box { + float: left; + } + } + .serialRXBox { + padding-top: 0; + } +} +.axis { + line { + fill: none; + stroke: #ccc; + stroke-width: 1px; + shape-rendering: crispEdges; + } +} +.spiRxBox { + padding-top: 0; +} +@media all and (max-width: 575px) { + .tab-receiver { + .bars { + margin-bottom: 10px; + } + .spacer { + padding-left: 0px; + padding-right: 0px; + width: 100%; + } + #RX_plot { + width: calc(100% - 120px); + } + .plot_control { + width: 112px; + .row { + display: inherit; + } + } + .feature { + .gui_box { + min-height: auto; + } + td { + &:nth-child(2) { + width: auto; + } + } + } + .features.rxMode { + width: 100%; + } + .serialRX { + width: 100%; + } + } +} +@media only screen and (max-width: 1055px) { + .tab-receiver { + .gui_box { + span { + line-height: 17px; + } + } + } +} +@media only screen and (max-device-width: 1055px) { + .tab-receiver { + .gui_box { + span { + line-height: 17px; + } + } + } +} diff --git a/src/css/tabs/receiver_msp.css b/src/css/tabs/receiver_msp.css deleted file mode 100644 index f27be08a..00000000 --- a/src/css/tabs/receiver_msp.css +++ /dev/null @@ -1,149 +0,0 @@ -body { - font-family: 'Segoe UI', Tahoma, sans-serif; - font-size: 12px; - background-color: var(--sideBackground); - color: #303030; - margin: 10px; - overflow: hidden; - user-select: none; -} - -.control-gimbals { - /* A generous padding around the window edges ensures that we continue to receive mousemove events (since - * cursor stays in the window for longer) - */ - padding: 25px; - padding-bottom: 0; - text-align: center; - display: inline-flex; -} - -.control-gimbal { - position: relative; - width: 120px; - height: 120px; - background-color: var(--gimbalBackground); - margin-left: 1em; - margin-right: 1em; - margin-bottom: 2em; - display: inline-block; - border-radius: 5px; - cursor: pointer; -} - -.crosshair { - display: block; - position: absolute; - background-color: var(--gimbalCrosshair); -} - -.crosshair-vert { - width: 1px; - height: 100%; - left: 50%; -} - -.crosshair-horz { - height: 1px; - width: 100%; - top: 50%; -} - -.gimbal-label { - display: block; - position: absolute; - text-align: center; -} - -.gimbal-label-horz { - top: calc(100% + 0.5em); - width: 100%; -} - -.gimbal-label-vert { - transform: rotate(-90deg); - /*transform-origin:0% 100%;*/ - top: calc(50% - 0.5em); - width: 100%; - left: calc(-50% - 1em); -} - -.control-stick { - background-color: #ff3232; - width: 20px; - height: 20px; - margin-left: -10px; - margin-top: -10px; - display: block; - border-radius: 100%; - position: absolute; - cursor: pointer; -} - -.control-slider { - margin: 20px; -} - -.tooltip { - position: absolute; - left: calc(100% + 24px); - top: 0; -} - -.control-slider .slider { - margin-left: 50px; - margin-right: 50px; -} - -.slider-label { - position: absolute; - text-align: right; - width: 40px; - left: -65px; -} - -a { - text-decoration: none; - color: #000; - font-weight: bold; -} - -a:hover { - text-decoration: none; -} - -.button-enable a { - /* Center the button */ - position: absolute; - left: 50%; - transform: translate(-50%); - - /* common styles for content toolbar buttons */ - margin-top: 0px; - margin-bottom: 0px; - margin-left: 0px; - background-color: var(--accent); - border-radius: 3px; - border: 1px solid #4c8829; - color: #fff; - float: left; - font-size: 12px; - text-shadow: 0px 1px #00000040; - display: block; - cursor: pointer; - transition: all ease 0.2s; - padding: 0px; - padding-left: 9px; - padding-right: 9px; - line-height: 28px; -} - -.button-enable a:hover { - background-color: #6ac435; - transition: all ease 0.2s; -} -.button-enable a:active { - background-color: #4d9324; - transition: all ease 0.0s; - box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.35); -} diff --git a/src/css/tabs/receiver_msp.less b/src/css/tabs/receiver_msp.less new file mode 100644 index 00000000..6b8de086 --- /dev/null +++ b/src/css/tabs/receiver_msp.less @@ -0,0 +1,127 @@ +body { + font-family: 'Segoe UI', Tahoma, sans-serif; + font-size: 12px; + background-color: var(--sideBackground); + color: #303030; + margin: 10px; + overflow: hidden; + user-select: none; +} +.control-gimbals { + padding: 25px; + padding-bottom: 0; + text-align: center; + display: inline-flex; +} +.control-gimbal { + position: relative; + width: 120px; + height: 120px; + background-color: var(--gimbalBackground); + margin-left: 1em; + margin-right: 1em; + margin-bottom: 2em; + display: inline-block; + border-radius: 5px; + cursor: pointer; +} +.crosshair { + display: block; + position: absolute; + background-color: var(--gimbalCrosshair); +} +.crosshair-vert { + width: 1px; + height: 100%; + left: 50%; +} +.crosshair-horz { + height: 1px; + width: 100%; + top: 50%; +} +.gimbal-label { + display: block; + position: absolute; + text-align: center; +} +.gimbal-label-horz { + top: calc(100% + 0.5em); + width: 100%; +} +.gimbal-label-vert { + transform: rotate(-90deg); + top: calc(50% - 0.5em); + width: 100%; + left: calc(-50% - 1em); +} +.control-stick { + background-color: #ff3232; + width: 20px; + height: 20px; + margin-left: -10px; + margin-top: -10px; + display: block; + border-radius: 100%; + position: absolute; + cursor: pointer; +} +.control-slider { + margin: 20px; + .slider { + margin-left: 50px; + margin-right: 50px; + } +} +.tooltip { + position: absolute; + left: calc(100% + 24px); + top: 0; +} +.slider-label { + position: absolute; + text-align: right; + width: 40px; + left: -65px; +} +a { + text-decoration: none; + color: #000; + font-weight: bold; + &:hover { + text-decoration: none; + } +} +.button-enable { + a { + position: absolute; + left: 50%; + transform: translate(-50%); + margin-top: 0px; + margin-bottom: 0px; + margin-left: 0px; + background-color: var(--accent); + border-radius: 3px; + border: 1px solid #4c8829; + color: #fff; + float: left; + font-size: 12px; + text-shadow: 0px 1px #00000040; + display: block; + cursor: pointer; + transition: all ease 0.2s; + padding: 0px; + padding-left: 9px; + padding-right: 9px; + line-height: 28px; + &:hover { + background-color: #6ac435; + transition: all ease 0.2s; + } + &:active { + background-color: #4d9324; + transition: all ease 0.0s; + box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.35); + } + } +} diff --git a/src/css/tabs/sensors.css b/src/css/tabs/sensors.css deleted file mode 100644 index e9a2816b..00000000 --- a/src/css/tabs/sensors.css +++ /dev/null @@ -1,194 +0,0 @@ -.tab-sensors .info { - margin-bottom: 10px; - margin-top: 8px; - margin-left: 10px; -} - -.tab-sensors .info input { - vertical-align: middle; - margin: 0 5px 0 15px; -} - -.tab-sensors .info .first { - margin: 0 5px 0 0; -} - -.tab-sensors .wrapper { - display: none; -} - -.tab-sensors .plot_control { - float: right; - width: 160px; - /* border: 1px solid silver; */ - height: 160px; - margin: 0; - background-color: #ECECEC; - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; -} - -.tab-sensors .plot_control .title { - line-height: 20px; - font-weight: bold; - padding-left: 10px; - padding-top: 10px; - text-align: left; - float: left; -} - -.tab-sensors .plot_control dl { - padding: 10px 10px 0 10px; - line-height: 22px; - float: left; -} - -.tab-sensors .plot_control dt { - float: left; - width: 60px; - height: 22px; - font-weight: bold; -} - -.tab-sensors .plot_control dd { - /* margin-left: 20px; */ - height: 25px; - float: right; - width: 73px; -} - -.tab-sensors .plot_control select { - float: right; - width: 80px; - border: 1px solid var(--subtleAccent); - border-radius: 3px; -} - -.tab-sensors .plot_control .x { - background-color: #00A8F0; - padding: 3px; - color: #fff; - height: 12px; - float: right; - border-radius: 3px; - line-height: 12px; - margin-bottom: 2px; -} - -.tab-sensors .plot_control .y { - background-color: #C0D800; - padding: 3px; - color: #fff; - height: 12px; - float: right; - border-radius: 3px; - line-height: 12px; - margin-bottom: 2px; -} - -.tab-sensors .plot_control .z { - background-color: #CB4B4B; - padding: 3px; - color: #fff; - height: 12px; - float: right; - border-radius: 3px; - line-height: 12px; - margin-bottom: 2px; -} - -.tab-sensors .plot_control .x, .tab-sensors .plot_control .y, .tab-sensors .plot_control .z { - text-align: right; -} -/* SVG classes*/ -.tab-sensors svg { - float: left; - width: calc(100% - 180px); - height: 140px; - margin-bottom: 10px; - margin-top: 10px; - margin-left: 10px; -} - -.tab-sensors .grid .tick { - stroke: silver; - stroke-width: 1px; - shape-rendering: crispEdges; -} - -.tab-sensors .grid path { - stroke-width: 0; -} - -.tab-sensors .data .line { - stroke-width: 2px; - fill: none; -} - -.tab-sensors .axis path, .tab-sensors .axis line { - fill: none; - stroke: #ccc; - stroke-width: 1px; - shape-rendering: crispEdges; -} - -.tab-sensors text { - stroke: none; - fill: #828885; - font-size: 10px; -} - -.tab-sensors .line:nth-child(1) { - stroke: #00A8F0; -} - -.tab-sensors .line:nth-child(2) { - stroke: #C0D800; -} - -.tab-sensors .line:nth-child(3) { - stroke: #CB4B4B; -} - -.tab-sensors .line:nth-child(4) { - stroke: #4DA74D; -} - -.tab-sensors .legend .item:nth-child(1) { - fill: #00A8F0; -} - -.tab-sensors .legend .item:nth-child(2) { - fill: #C0D800; -} - -.tab-sensors .legend .item:nth-child(3) { - fill: #CB4B4B; -} - -.tab-sensors .legend .item:nth-child(4) { - fill: #4DA74D; -} - -@media all and (max-width: 575px) { - .tab-sensors .plot_control { - width: 130px; - } - .tab-sensors .plot_control dt { - width: 60px; - } - .tab-sensors .plot_control dd { - width: 50px; - } - .tab-sensors .plot_control dd select { - width: 100%; - } - .tab-sensors .plot_control .x, .tab-sensors .plot_control .y, .tab-sensors .plot_control .z { - height: 18px; - box-sizing: border-box; - } - .tab-sensors svg { - width: calc(100% - 130px); - margin-left: 0; - } -} diff --git a/src/css/tabs/sensors.less b/src/css/tabs/sensors.less new file mode 100644 index 00000000..9cddf1ea --- /dev/null +++ b/src/css/tabs/sensors.less @@ -0,0 +1,194 @@ +.tab-sensors { + .info { + margin-bottom: 10px; + margin-top: 8px; + margin-left: 10px; + input { + vertical-align: middle; + margin: 0 5px 0 15px; + } + .first { + margin: 0 5px 0 0; + } + } + .wrapper { + display: none; + } + .plot_control { + float: right; + width: 160px; + height: 160px; + margin: 0; + background-color: #ECECEC; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + .title { + line-height: 20px; + font-weight: bold; + padding-left: 10px; + padding-top: 10px; + text-align: left; + float: left; + } + dl { + padding: 10px 10px 0 10px; + line-height: 22px; + float: left; + } + dt { + float: left; + width: 60px; + height: 22px; + font-weight: bold; + } + dd { + height: 25px; + float: right; + width: 73px; + } + select { + float: right; + width: 80px; + border: 1px solid var(--subtleAccent); + border-radius: 3px; + } + .x { + background-color: #00A8F0; + padding: 3px; + color: #fff; + height: 12px; + float: right; + border-radius: 3px; + line-height: 12px; + margin-bottom: 2px; + text-align: right; + } + .y { + background-color: #C0D800; + padding: 3px; + color: #fff; + height: 12px; + float: right; + border-radius: 3px; + line-height: 12px; + margin-bottom: 2px; + text-align: right; + } + .z { + background-color: #CB4B4B; + padding: 3px; + color: #fff; + height: 12px; + float: right; + border-radius: 3px; + line-height: 12px; + margin-bottom: 2px; + text-align: right; + } + } + svg { + float: left; + width: calc(100% - 180px); + height: 140px; + margin-bottom: 10px; + margin-top: 10px; + margin-left: 10px; + } + .grid { + .tick { + stroke: silver; + stroke-width: 1px; + shape-rendering: crispEdges; + } + path { + stroke-width: 0; + } + } + .data { + .line { + stroke-width: 2px; + fill: none; + } + } + .axis { + path { + fill: none; + stroke: #ccc; + stroke-width: 1px; + shape-rendering: crispEdges; + } + line { + fill: none; + stroke: #ccc; + stroke-width: 1px; + shape-rendering: crispEdges; + } + } + text { + stroke: none; + fill: #828885; + font-size: 10px; + } + .line { + &:nth-child(1) { + stroke: #00A8F0; + } + &:nth-child(2) { + stroke: #C0D800; + } + &:nth-child(3) { + stroke: #CB4B4B; + } + &:nth-child(4) { + stroke: #4DA74D; + } + } + .legend { + .item { + &:nth-child(1) { + fill: #00A8F0; + } + &:nth-child(2) { + fill: #C0D800; + } + &:nth-child(3) { + fill: #CB4B4B; + } + &:nth-child(4) { + fill: #4DA74D; + } + } + } +} +@media all and (max-width: 575px) { + .tab-sensors { + .plot_control { + width: 130px; + dt { + width: 60px; + } + dd { + width: 50px; + select { + width: 100%; + } + } + .x { + height: 18px; + box-sizing: border-box; + } + .y { + height: 18px; + box-sizing: border-box; + } + .z { + height: 18px; + box-sizing: border-box; + } + } + svg { + width: calc(100% - 130px); + margin-left: 0; + } + } +} diff --git a/src/css/tabs/servos.css b/src/css/tabs/servos.css deleted file mode 100644 index 23b22655..00000000 --- a/src/css/tabs/servos.css +++ /dev/null @@ -1,371 +0,0 @@ -.tab-servos .title { - margin-top: 0; - line-height: 30px; - text-align: center; - font-weight: bold; - border: 1px solid var(--subtleAccent); - border-bottom: 0; - background-color: var(--quietHeader); - color: var(--quietText); - border-top-right-radius: 5px; - border-top-left-radius: 5px; -} - -.tab-servos table { - margin-bottom: 10px; - width: 100%; - border-collapse: collapse; -} - -.tab-servos table, .tab-servos table th, .tab-servos table td { - border-left: 0; - border-right: 0; - border-top: 0; -} - -.tab-servos input[type="number"]::-webkit-inner-spin-button { - border: 0; -} - -.tab-servos .directions .direction select { - height: 19px; - line-height: 19px; -} - -.tab-servos table th { - padding-top: 3px; - padding-bottom: 3px; - text-align: center; - border: 1px solid var(--subtleAccent); - line-height: 14px; -} - -.tab-servos table td { - border-bottom: 1px solid var(--subtleAccent); - padding: 6px 5px 7px 5px; - border-left: 1px solid var(--subtleAccent); - border-right: 1px solid var(--subtleAccent); -} - -.tab-servos table tr:nth-child(even) { - background-color: #f9f9f9; -} - -.tab-servos table td:nth-child(2) { - width: 140px; -} - -.tab-servos table td:nth-child(3) { - width: 140px; -} - -.tab-servos table td:nth-child(4) { - width: 140px; -} - -.tab-servos table td:nth-child(19) { - width: 110px; -} - -.tab-servos table .main { - font-weight: bold; - text-align: center; - background-color: #ececec; -} - -.tab-servos table .channel { - width: 40px; - text-align: center; -} - -.tab-servos table input { - border: 1px solid var(--subtleAccent); - border-radius: 3px; -} - -.tab-servos table select { - border: 1px solid var(--subtleAccent); - border-radius: 3px; -} - -.tab-servos table .channel input { - vertical-align: middle; -} - -.tab-servos table input[type="number"] { - display: block; - width: 100%; - height: 20px; - line-height: 20px; - text-align: right; -} - -.tab-servos .direction .name { - float: left; - display: block; - width: 60px; -} - -.tab-servos .direction .alternate { - float: left; - display: block; - width: 60px; -} - -.tab-servos .direction .first { - float: left; - margin: 2px 10px 0 20px; -} - -.tab-servos .direction .second { - float: left; - margin: 2px 10px 0 0; -} - -.tab-servos .direction .rate { - width: 110px; - height: 22px; - text-align: center; -} - -.tab-servos .live { - float: left; - margin-top: 0; -} - -.tab-servos .live span { - float: left; -} - -.tab-servos .live input { - float: left; - margin: 0 0 0 5px; -} - -.tab-servos .buttons { - width: calc(100% - 20px); - position: absolute; - bottom: 10px; -} - -.tab-servos .require-support { - display: none; -} - -.tab-servos.supported .require-support { - display: block; -} - -.tab-servos .require-upgrade { - display: block; -} - -.tab-servos.supported .require-upgrade { - display: none; -} - -.tab-servos .live span { - margin-right: 10px; -} - -.tab-servos .wide { - width: 120px; -} - -.tab-servos .short { - width: 40px; -} - -.tab-servos .table_overflow { - overflow: auto; -} - -@media all and (max-width: 575px) { - .tab-servos table th { - min-width: 30px; - } - .tab-servos .min, .tab-servos .max, .tab-servos .middle { - min-width: 60px; - } -} - -/* servos testing bars */ - -.tab-servos table tr td:first-child { - text-align: left; - width: 55px; -} - -.tab-servos { - position: relative; -} -.tab-servos .spacer_box { - padding-bottom: 10px; - float: left; - width: calc(100% - 20px); -} - -.tab-servos .gui_box_titlebar { - margin-bottom: 0; -} - -.tab-servos .gui_box { - margin-bottom: 10px; - float: left; - font-weight: bold; -} - -.tab-servos .gui_box span { - font-style: normal; - font-weight: normal; - line-height: 19px; - color: #4f4f4f; - font-size: 11px; -} - -.tab-servos .spacer { - width: calc(100% - 34px); - margin: 10px; -} - -.tab-servos .servoblock { - margin-bottom: 0; - background-color: #ECECEC; -} - -.tab-servos .right.servos { - float: left; - width: 80%; -} - -.tab-servos .title2 { - padding-bottom: 2px; - text-align: center; - font-size: 12px; - font-weight: 300; -} - -.tab-servos .titles { - height: 20px; -} - -.tab-servos .titles li { - float: left; - width: calc((100% / 9) - 10px); - margin-right: 10px; - text-align: center; -} - -.tab-servos .servos .titles li { - float: right; - width: calc((100% / 8) - 10px); - margin: 0 0 0 10px; -} - -.tab-servos .titles .active { - color: green; -} - -.tab-servos .m-block { - float: left; - width: calc((100% / 9) - 10px); - height: 100px; - margin-right: 10px; - text-align: center; - background-color: #f4f4f4; - border-radius: 3px; - box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); -} - -.tab-servos .m-block .meter-bar { - position: relative; - width: 100%; - height: 100px; - box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); - background-color: #E0E0E0; - border-radius: 3px; - border: 1px solid #F5F5F5; -} - -.tab-servos .m-block .label { - position: absolute; - width: 100%; - bottom: 45px; - text-align: center; - font-weight: bold; - font-size: 10px; - color: #474747; -} - -.tab-servos .m-block .label.rpm_info { - bottom: 28px; -} - -.tab-servos .m-block .indicator .label { - color: white; -} - -.tab-servos .servos .m-block { - float: right; - width: calc((100% / 8) - 10px); - margin: 0 0 0 10px; - border-radius: 3px; -} - -.tab-servos .indicator { - position: absolute; - overflow: hidden; - width: 100%; - text-align: center; - border-radius: 2px; -} - -@media all and (max-width: 575px) { - - .tab-servos .gui_box { - min-height: auto; - } - - .tab-servos .servoblock { - margin-bottom: 15px; - } - .tab-servos .servoblock > .spacer { - display: flex; - flex-wrap: wrap; - } - .tab-servos .left.motors { - width: 100%; - order: 1; - } - .tab-servos .right.servos { - width: 100%; - order: 3; - margin-top: 15px; - } - .tab-servos .titles li, .tab-servos .m-block { - width: calc((100% - 80px) / 9); - } - .tab-servos .titles li:last-child, .tab-servos .m-block:last-child { - margin-right: 0; - } - .tab-servos .servos .m-block, .tab-servos .servos .titles li { - width: calc((100% - 70px) / 8); - } - .tab-servos .servos .m-block:last-child, .tab-servos .servos .titles li:last-child { - margin-left: 0; - } - - .tab-servos .servo_testing .values li:last-child { - margin-left: 4px; - } - -} - -@media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) { - .tab-servos .gui_box span { - line-height: 17px; - } - .tab-servos .gui_box { - float: left; - } -} diff --git a/src/css/tabs/servos.less b/src/css/tabs/servos.less new file mode 100644 index 00000000..9680eb94 --- /dev/null +++ b/src/css/tabs/servos.less @@ -0,0 +1,372 @@ +.tab-servos { + .title { + margin-top: 0; + line-height: 30px; + text-align: center; + font-weight: bold; + border: 1px solid var(--subtleAccent); + border-bottom: 0; + background-color: var(--quietHeader); + color: var(--quietText); + border-top-right-radius: 5px; + border-top-left-radius: 5px; + } + table { + margin-bottom: 10px; + width: 100%; + border-collapse: collapse; + border-left: 0; + border-right: 0; + border-top: 0; + th { + border-left: 0; + border-right: 0; + border-top: 0; + padding-top: 3px; + padding-bottom: 3px; + text-align: center; + border: 1px solid var(--subtleAccent); + line-height: 14px; + } + td { + border-top: 0; + border-bottom: 1px solid var(--subtleAccent); + border-left: 1px solid var(--subtleAccent); + border-right: 1px solid var(--subtleAccent); + padding: 6px 5px 7px 5px; + &:nth-child(2) { + width: 140px; + } + &:nth-child(3) { + width: 140px; + } + &:nth-child(4) { + width: 140px; + } + &:nth-child(19) { + width: 110px; + } + } + tr { + &:nth-child(even) { + background-color: #f9f9f9; + } + td { + &:first-child { + text-align: left; + width: 55px; + } + } + } + .main { + font-weight: bold; + text-align: center; + background-color: #ececec; + } + .channel { + width: 40px; + text-align: center; + input { + vertical-align: middle; + } + } + input { + border: 1px solid var(--subtleAccent); + border-radius: 3px; + } + select { + border: 1px solid var(--subtleAccent); + border-radius: 3px; + } + input[type="number"] { + display: block; + width: 100%; + height: 20px; + line-height: 20px; + text-align: right; + } + } + input[type="number"] { + &::-webkit-inner-spin-button { + border: 0; + } + } + .directions { + .direction { + select { + height: 19px; + line-height: 19px; + } + } + } + .direction { + .name { + float: left; + display: block; + width: 60px; + } + .alternate { + float: left; + display: block; + width: 60px; + } + .first { + float: left; + margin: 2px 10px 0 20px; + } + .second { + float: left; + margin: 2px 10px 0 0; + } + .rate { + width: 110px; + height: 22px; + text-align: center; + } + } + .live { + float: left; + margin-top: 0; + span { + float: left; + margin-right: 10px; + } + input { + float: left; + margin: 0 0 0 5px; + } + } + .buttons { + width: calc(100% - 20px); + position: absolute; + bottom: 10px; + } + .require-support { + display: none; + } + .require-upgrade { + display: block; + } + .wide { + width: 120px; + } + .short { + width: 40px; + } + .table_overflow { + overflow: auto; + } + position: relative; + .spacer_box { + padding-bottom: 10px; + float: left; + width: calc(100% - 20px); + } + .gui_box_titlebar { + margin-bottom: 0; + } + .gui_box { + margin-bottom: 10px; + float: left; + font-weight: bold; + span { + font-style: normal; + font-weight: normal; + line-height: 19px; + color: #4f4f4f; + font-size: 11px; + } + } + .spacer { + width: calc(100% - 34px); + margin: 10px; + } + .servoblock { + margin-bottom: 0; + background-color: #ECECEC; + } + .right.servos { + float: left; + width: 80%; + } + .title2 { + padding-bottom: 2px; + text-align: center; + font-size: 12px; + font-weight: 300; + } + .titles { + height: 20px; + li { + float: left; + width: calc((100% / 9) - 10px); + margin-right: 10px; + text-align: center; + } + .active { + color: green; + } + } + .servos { + .titles { + li { + float: right; + width: calc((100% / 8) - 10px); + margin: 0 0 0 10px; + } + } + .m-block { + float: right; + width: calc((100% / 8) - 10px); + margin: 0 0 0 10px; + border-radius: 3px; + } + } + .m-block { + float: left; + width: calc((100% / 9) - 10px); + height: 100px; + margin-right: 10px; + text-align: center; + background-color: #f4f4f4; + border-radius: 3px; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); + .meter-bar { + position: relative; + width: 100%; + height: 100px; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); + background-color: #E0E0E0; + border-radius: 3px; + border: 1px solid #F5F5F5; + } + .label { + position: absolute; + width: 100%; + bottom: 45px; + text-align: center; + font-weight: bold; + font-size: 10px; + color: #474747; + } + .label.rpm_info { + bottom: 28px; + } + .indicator { + .label { + color: white; + } + } + } + .indicator { + position: absolute; + overflow: hidden; + width: 100%; + text-align: center; + border-radius: 2px; + } +} +.tab-servos.supported { + .require-support { + display: block; + } + .require-upgrade { + display: none; + } +} +@media all and (max-width: 575px) { + .tab-servos { + table { + th { + min-width: 30px; + } + } + .min { + min-width: 60px; + } + .max { + min-width: 60px; + } + .middle { + min-width: 60px; + } + .gui_box { + min-height: auto; + } + .servoblock { + margin-bottom: 15px; + >.spacer { + display: flex; + flex-wrap: wrap; + } + } + .left.motors { + width: 100%; + order: 1; + } + .right.servos { + width: 100%; + order: 3; + margin-top: 15px; + } + .titles { + li { + width: calc((100% - 80px) / 9); + &:last-child { + margin-right: 0; + } + } + } + .m-block { + width: calc((100% - 80px) / 9); + &:last-child { + margin-right: 0; + } + } + .servos { + .m-block { + width: calc((100% - 70px) / 8); + &:last-child { + margin-left: 0; + } + } + .titles { + li { + width: calc((100% - 70px) / 8); + &:last-child { + margin-left: 0; + } + } + } + } + .servo_testing { + .values { + li { + &:last-child { + margin-left: 4px; + } + } + } + } + } +} +@media only screen and (max-width: 1055px) { + .tab-servos { + .gui_box { + span { + line-height: 17px; + } + float: left; + } + } +} +@media only screen and (max-device-width: 1055px) { + .tab-servos { + .gui_box { + span { + line-height: 17px; + } + float: left; + } + } +} diff --git a/src/css/tabs/setup.css b/src/css/tabs/setup.css deleted file mode 100644 index edfaeb2e..00000000 --- a/src/css/tabs/setup.css +++ /dev/null @@ -1,242 +0,0 @@ -.tab-setup .ui-grid-col { - margin-bottom: 0; -} -.tab-setup .content_wrapper { - position: initial; -} -.tab-setup .default_btn { - margin-bottom: 10px; -} -.tab-setup .cell_setup { - border-bottom: solid 1px var(--subtleAccent); - padding-bottom: 8px; - padding-top: 7px; -} -#accel_calib_running, #mag_calib_running { - display: none; - width: 100%; - position: relative; - margin-bottom: 0; - margin-top: 0; - float: left; - padding: 5px 0 5px 0; - text-align: center; - background-color: #fff; - border-radius: 4px; - border: 1px solid #ffbb00; - color: #ffbb00; - font-weight: bold; - font-size: 12px; - line-height: 13px; - transition: all ease 0.2s; - text-decoration:none; -} -.tab-setup .data-loading-setup { - width: 100%; - height: 100%; -} - -.tab-setup .modelwrapper { - clear: both; - margin-bottom: 5px; -} -.tab-setup .model-and-info { - position: relative; - height: 400px; - margin-bottom: 10px; -} -.tab-setup #interactive_block { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: #f9f9f9; - border-radius: 5px; - border: 1px solid #e4e4e4; -} -.tab-setup #interactive_block a.reset { - position: absolute; - display: block; - top: 10px; - right: 10px; - border-radius: 3px; - bottom: 10px; - height: 28px; - line-height: 28px; - padding: 0 15px 0 15px; - text-align: center; - font-weight: bold; - border: 1px solid var(--subtleAccent); - background-color: #ececec; - z-index: 100; -} -.tab-setup #interactive_block a.reset:hover { - background-color: #dedcdc; -} -.tab-setup #canvas_wrapper { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - border-radius: 5px; -} -#canvas { - width: 100% !important; - height: 100% !important; -} -.attitude_info { - position: absolute; - top: 10px; - left: 10px; - width: 120px; - margin: 0 0 0 0; - font-weight: normal; - color: var(--mutedText); -} -.attitude_info dl { - width: 100%; -} -.attitude_info dt { - width: 50%; - float: left; -} -.attitude_info dd { - width: 50%; - float: left; -} -.backupRestore { - margin-bottom: 0; -} -@media all and (max-width: 575px) { - .tab-setup .cell_setup { - border-bottom: none; - padding-bottom: 15px; - padding-top: 0; - } - .tab-setup .default_btn { - margin-bottom: 5px; - } - .tab-setup .model-and-info { - height: 200px; - } -} - - - -.block.info .fields { - padding: 5px 5px 3px 5px; -} - -.block.info dt { - float: left; - width: 99px; - height: 20px; - line-height: 20px; -} - -.block.info dd { - width: 76px; - height: 20px; - line-height: 20px; - margin-left: 99px; -} - -.block.gps { - width: 185px; - margin-bottom: 10px; -} - -.block.gps .fields { - padding: 5px 5px 3px 5px; -} - -.block.gps dt { - float: left; - width: 85px; - height: 20px; - margin-bottom: 2px; - line-height: 20px; -} - -.block.instruments { - width: 285px; - align-content: center; - text-align: center; -} - -.buttons { - bottom: 20px; -} - -@media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) { - .block.instrument .attitude { - width: 50px !important; - height: 50px !important; - } - .block.instrument .heading { - width: 50px; - height: 50px; - } -} - -.tab-setup .regular-button { - margin-top: 8px; - margin-bottom: 8px; - margin-right: 10px; - background-color: #ffbb00; - border-radius: 3px; - border: 1px solid #dba718; - color: #000; - font-size: 12px; - text-shadow: 0 1px rgba(255, 255, 255, 0.25); - display: inline-block; - cursor: pointer; - transition: all ease 0.2s; - padding: 0 9px; - line-height: 28px; -} -.tab-setup .regular-button:hover { - background-color: #ffcc3e; - transition: all ease 0.2s; -} -.tab-setup .regular-button:active { - background-color: #ffcc3e; - transition: all ease 0.0s; - box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35); -} -.tab-setup .regular-button.disabled { - cursor: default; - color: #fff; - background-color: #AFAFAF; - border: 1px solid #AFAFAF; - pointer-events: none; - text-shadow: none; - opacity: 0.5; -} - -.tab-setup dialog { - width: 40em; - border-radius: 5px; -} - -.tab-setup dialog .buttons { - position: static; - margin-top: 2em; -} - -.tab-setup dialog h3 { - margin-bottom: 0.5em; -} - -@media all and (max-width: 575px) { - .tab-setup dialog { - width: calc(100% - 2em); - border-radius: unset; - } -} - -.disarm-flag { - padding-left: 5px; -} diff --git a/src/css/tabs/setup.less b/src/css/tabs/setup.less new file mode 100644 index 00000000..236c8215 --- /dev/null +++ b/src/css/tabs/setup.less @@ -0,0 +1,261 @@ +.tab-setup { + .ui-grid-col { + margin-bottom: 0; + } + .content_wrapper { + position: initial; + } + .default_btn { + margin-bottom: 10px; + } + .cell_setup { + border-bottom: solid 1px var(--subtleAccent); + padding-bottom: 8px; + padding-top: 7px; + } + .data-loading-setup { + width: 100%; + height: 100%; + } + .modelwrapper { + clear: both; + margin-bottom: 5px; + } + .model-and-info { + position: relative; + height: 400px; + margin-bottom: 10px; + } + #interactive_block { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #f9f9f9; + border-radius: 5px; + border: 1px solid #e4e4e4; + a.reset { + position: absolute; + display: block; + top: 10px; + right: 10px; + border-radius: 3px; + bottom: 10px; + height: 28px; + line-height: 28px; + padding: 0 15px 0 15px; + text-align: center; + font-weight: bold; + border: 1px solid var(--subtleAccent); + background-color: #ececec; + z-index: 100; + &:hover { + background-color: #dedcdc; + } + } + } + #canvas_wrapper { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + border-radius: 5px; + } + .regular-button { + margin-top: 8px; + margin-bottom: 8px; + margin-right: 10px; + background-color: #ffbb00; + border-radius: 3px; + border: 1px solid #dba718; + color: #000; + font-size: 12px; + text-shadow: 0 1px rgba(255, 255, 255, 0.25); + display: inline-block; + cursor: pointer; + transition: all ease 0.2s; + padding: 0 9px; + line-height: 28px; + &:hover { + background-color: #ffcc3e; + transition: all ease 0.2s; + } + &:active { + background-color: #ffcc3e; + transition: all ease 0.0s; + box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35); + } + } + .regular-button.disabled { + cursor: default; + color: #fff; + background-color: #AFAFAF; + border: 1px solid #AFAFAF; + pointer-events: none; + text-shadow: none; + opacity: 0.5; + } + dialog { + width: 40em; + border-radius: 5px; + .buttons { + position: static; + margin-top: 2em; + } + h3 { + margin-bottom: 0.5em; + } + } +} +#accel_calib_running { + display: none; + width: 100%; + position: relative; + margin-bottom: 0; + margin-top: 0; + float: left; + padding: 5px 0 5px 0; + text-align: center; + background-color: #fff; + border-radius: 4px; + border: 1px solid #ffbb00; + color: #ffbb00; + font-weight: bold; + font-size: 12px; + line-height: 13px; + transition: all ease 0.2s; + text-decoration: none; +} +#mag_calib_running { + display: none; + width: 100%; + position: relative; + margin-bottom: 0; + margin-top: 0; + float: left; + padding: 5px 0 5px 0; + text-align: center; + background-color: #fff; + border-radius: 4px; + border: 1px solid #ffbb00; + color: #ffbb00; + font-weight: bold; + font-size: 12px; + line-height: 13px; + transition: all ease 0.2s; + text-decoration: none; +} +#canvas { + width: 100% !important; + height: 100% !important; +} +.attitude_info { + position: absolute; + top: 10px; + left: 10px; + width: 120px; + margin: 0 0 0 0; + font-weight: normal; + color: var(--mutedText); + dl { + width: 100%; + } + dt { + width: 50%; + float: left; + } + dd { + width: 50%; + float: left; + } +} +.backupRestore { + margin-bottom: 0; +} +.block.info { + .fields { + padding: 5px 5px 3px 5px; + } + dt { + float: left; + width: 99px; + height: 20px; + line-height: 20px; + } + dd { + width: 76px; + height: 20px; + line-height: 20px; + margin-left: 99px; + } +} +.block.gps { + width: 185px; + margin-bottom: 10px; + .fields { + padding: 5px 5px 3px 5px; + } + dt { + float: left; + width: 85px; + height: 20px; + margin-bottom: 2px; + line-height: 20px; + } +} +.block.instruments { + width: 285px; + align-content: center; + text-align: center; +} +.buttons { + bottom: 20px; +} +.disarm-flag { + padding-left: 5px; +} +@media all and (max-width: 575px) { + .tab-setup { + .cell_setup { + border-bottom: none; + padding-bottom: 15px; + padding-top: 0; + } + .default_btn { + margin-bottom: 5px; + } + .model-and-info { + height: 200px; + } + dialog { + width: calc(100% - 2em); + border-radius: unset; + } + } +} +@media only screen and (max-width: 1055px) { + .block.instrument { + .attitude { + width: 50px !important; + height: 50px !important; + } + .heading { + width: 50px; + height: 50px; + } + } +} +@media only screen and (max-device-width: 1055px) { + .block.instrument { + .attitude { + width: 50px !important; + height: 50px !important; + } + .heading { + width: 50px; + height: 50px; + } + } +} diff --git a/src/css/tabs/static_tab.css b/src/css/tabs/static_tab.css deleted file mode 100644 index 2708a381..00000000 --- a/src/css/tabs/static_tab.css +++ /dev/null @@ -1,37 +0,0 @@ -#tab-static { - background-color: inherit; - background-image: url(../../images/osd-bg-1.jpg); - background-attachment: fixed; - background-size: cover; - background-position: bottom right; -} - -#tab-static span { - display: block; - font-weight: bold; - padding-top: 16px; - padding-bottom: 5px; - border-bottom: 1px solid var(--subtleAccent); -} - -#tab-static .title { - font-size: 16px; -} - -#tab-static ul { - margin: 5px 0 20px 10px; -} - -#tab-static li { - font-weight: normal; - margin-bottom: 5px; -} - -#tab-static-contents { - padding-top: 10px; - padding-left: 16px; - padding-right: 16px; - padding-bottom: 40px; - background-color: inherit; - max-width: 650px; -} diff --git a/src/css/tabs/static_tab.less b/src/css/tabs/static_tab.less new file mode 100644 index 00000000..46c77243 --- /dev/null +++ b/src/css/tabs/static_tab.less @@ -0,0 +1,32 @@ +#tab-static { + background-color: inherit; + background-image: url(../../images/osd-bg-1.jpg); + background-attachment: fixed; + background-size: cover; + background-position: bottom right; + span { + display: block; + font-weight: bold; + padding-top: 16px; + padding-bottom: 5px; + border-bottom: 1px solid var(--subtleAccent); + } + .title { + font-size: 16px; + } + ul { + margin: 5px 0 20px 10px; + } + li { + font-weight: normal; + margin-bottom: 5px; + } +} +#tab-static-contents { + padding-top: 10px; + padding-left: 16px; + padding-right: 16px; + padding-bottom: 40px; + background-color: inherit; + max-width: 650px; +} diff --git a/src/css/tabs/transponder.css b/src/css/tabs/transponder.css deleted file mode 100644 index 8c19daea..00000000 --- a/src/css/tabs/transponder.css +++ /dev/null @@ -1,92 +0,0 @@ -#tab-transponder-templates { - display: none; -} - -.tab-transponder .spacer_box { - padding-bottom: 10px; - float: left; - width: calc(100% - 20px); -} - -.tab-transponder .text input { - width: 100px; - padding-left: 3px; - height: 20px; - line-height: 20px; - text-align: left; - border: 1px solid var(--subtleAccent); - border-radius: 3px; - margin-right: 11px; - font-size: 12px; - font-weight: normal; - background: var(--boxBackground); - color: var(--defaultText); -} - -.tab-transponder .text .disabled { - width: 43px; - padding: 0px 5px; - background-color: #ececec; -} - -.tab-transponder .text span { - margin-left: 0px; -} - -.tab-transponder input { - float: left; -} - -.tab-transponder span { - margin: 0px; -} - -.tab-transponder .text - { - margin-bottom: 5px; - clear: left; - padding-bottom: 5px; - border-bottom: 1px solid var(--subtleAccent); - width: 100%; - float: left; -} - -.tab-transponder .text:last-child { - border-bottom: none; - padding-bottom: 0px; - margin-bottom: 0px; -} - -.tab-transponder .textspacer { - float: left; - width: 115px; - height: 21px; -} - -.tab-transponder .gui_box span { - font-style: normal; - line-height: 19px; - color: #4f4f4f; - font-size: 11px; -} - -.require-transponder-supported, -.tab-transponder.transponder-supported .require-transponder-unsupported { - display: none; -} - -.tab-transponder.transponder-supported .require-transponder-supported { - display: block; -} - -.textspacer-small { - margin-bottom: 15px; -} - -.tab-transponder select { - min-width: 100px; - border: 1px solid var(--subtleAccent); - border-radius: 3px; - background: var(--boxBackground); - color: var(--defaultText); -} diff --git a/src/css/tabs/transponder.less b/src/css/tabs/transponder.less new file mode 100644 index 00000000..a4716c4d --- /dev/null +++ b/src/css/tabs/transponder.less @@ -0,0 +1,85 @@ +#tab-transponder-templates { + display: none; +} +.tab-transponder { + .spacer_box { + padding-bottom: 10px; + float: left; + width: calc(100% - 20px); + } + .text { + input { + width: 100px; + padding-left: 3px; + height: 20px; + line-height: 20px; + text-align: left; + border: 1px solid var(--subtleAccent); + border-radius: 3px; + margin-right: 11px; + font-size: 12px; + font-weight: normal; + background: var(--boxBackground); + color: var(--defaultText); + } + .disabled { + width: 43px; + padding: 0px 5px; + background-color: #ececec; + } + span { + margin-left: 0px; + } + margin-bottom: 5px; + clear: left; + padding-bottom: 5px; + border-bottom: 1px solid var(--subtleAccent); + width: 100%; + float: left; + &:last-child { + border-bottom: none; + padding-bottom: 0px; + margin-bottom: 0px; + } + } + input { + float: left; + } + span { + margin: 0px; + } + .textspacer { + float: left; + width: 115px; + height: 21px; + } + .gui_box { + span { + font-style: normal; + line-height: 19px; + color: #4f4f4f; + font-size: 11px; + } + } + select { + min-width: 100px; + border: 1px solid var(--subtleAccent); + border-radius: 3px; + background: var(--boxBackground); + color: var(--defaultText); + } +} +.require-transponder-supported { + display: none; +} +.tab-transponder.transponder-supported { + .require-transponder-unsupported { + display: none; + } + .require-transponder-supported { + display: block; + } +} +.textspacer-small { + margin-bottom: 15px; +} diff --git a/src/css/tabs/vtx.css b/src/css/tabs/vtx.css deleted file mode 100644 index c8c6e135..00000000 --- a/src/css/tabs/vtx.css +++ /dev/null @@ -1,165 +0,0 @@ -.tab-vtx { - height: 100%; -} - -.tab-vtx .cf_table { - -webkit-border-horizontal-spacing: 1px; -} - -.tab-vtx .require-support { - display: none; -} - -.tab-vtx.supported .require-support { - display: block; -} - -.tab-vtx .require-upgrade { - display: block; -} - -.tab-vtx.supported .require-upgrade { - display: none; -} - -.tab-vtx .columnsWrapper { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; -} - -.tab-vtx .columnsWrapper .leftColumn { - width: calc(100% - (250px + 25px)); -} - -.tab-vtx .columnsWrapper .rightColumn { - flex-shrink: 0; - flex-grow: 0; - flex-basis: 250px; -} - -.tab-vtx .leftWrapper { - float: left; - width:calc(60% - 20px) -} - -.tab-vtx .rightWrapper { - float: left; - width: calc(30% - 0px); - max-width: 300px; - margin: 0 0 10px 20px; -} - -.tab-vtx input , .tab-vtx select { - border: 1px solid var(--subtleAccent); - border-radius: 3px; - max-width: 100px; - background: var(--boxBackground); - color: var(--defaultText); -} - -.tab-vtx .number input { - width: 55px; - padding-left: 3px; - height: 20px; - line-height: 20px; - text-align: left; - border-radius: 3px; - margin-right: 11px; - font-size: 12px; - font-weight: normal; -} - -.tab-vtx .gui_box span { - font-style: normal; - line-height: 19px; - color: var(--mutedtext); - font-size: 11px; -} - -.tab-vtx .spacer_box .field { - margin-bottom: 5px; - clear: left; - padding-bottom: 5px; - width: 100%; - float: left; -} - -.tab-vtx .spacer_box .field:not(:last-child) { - border-bottom: 1px solid var(--subtleAccent); -} - -.tab-vtx .select_mode .field > span { - margin-right: 10px; - display: inline-block; - min-width: 100px; -} - -.tab-vtx input.one_digit_input { - width: 28px; -} - -.tab-vtx input.frequency_input { - width: 48px; -} - -.tab-vtx .vtx_table_box { - min-width: 750px -} - -.tab-vtx .table_vtx_bands tr:first-child td, .tab-vtx .table_vtx_powerlevels tr:first-child td { - text-align: center; -} - - -.tab-vtx .table_vtx_bands td, .tab-vtx .table_vtx_powerlevels td { - padding: 0 1px; - text-align: center; -} - -.tab-vtx .table_vtx_bands input, .tab-vtx .table_vtx_powerlevels input { - display: block; - margin: 0 auto; -} - -.tab-vtx .field_powerlevel_value input, .tab-vtx .field_powerlevel_label input { - width: 53px; - -} - -.tab-vtx .field_band_name input { - width: 71px; - -} - -.tab-vtx .field_band_letter input { - width: 13px; -} - -.tab-vtx .vtx_table_bands_table span table, .tab-vtx .vtx_table_powerlevels_table span table { - float: left; -} - -#tab-vtx-templates { - display: none; -} - -@media all and (max-width: 575px) { - .tab-vtx .columnsWrapper { - flex-wrap: wrap; - } - - .tab-vtx .columnsWrapper .leftColumn { - width: 100%; - } - - .tab-vtx .columnsWrapper .rightColumn { - width: 100%; - flex-basis: auto; - } - .tab-vtx .leftWrapper { - width: 100%; - overflow: auto; - } -} diff --git a/src/css/tabs/vtx.less b/src/css/tabs/vtx.less new file mode 100644 index 00000000..44df5d8e --- /dev/null +++ b/src/css/tabs/vtx.less @@ -0,0 +1,198 @@ +.tab-vtx { + height: 100%; + .cf_table { + -webkit-border-horizontal-spacing: 1px; + } + .require-support { + display: none; + } + .require-upgrade { + display: block; + } + .columnsWrapper { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + .leftColumn { + width: calc(100% - (250px + 25px)); + } + .rightColumn { + flex-shrink: 0; + flex-grow: 0; + flex-basis: 250px; + } + } + .leftWrapper { + float: left; + width: calc(60% - 20px); + } + .rightWrapper { + float: left; + width: calc(30% - 0px); + max-width: 300px; + margin: 0 0 10px 20px; + } + input { + border: 1px solid var(--subtleAccent); + border-radius: 3px; + max-width: 100px; + background: var(--boxBackground); + color: var(--defaultText); + } + select { + border: 1px solid var(--subtleAccent); + border-radius: 3px; + max-width: 100px; + background: var(--boxBackground); + color: var(--defaultText); + } + .number { + input { + width: 55px; + padding-left: 3px; + height: 20px; + line-height: 20px; + text-align: left; + border-radius: 3px; + margin-right: 11px; + font-size: 12px; + font-weight: normal; + } + } + .gui_box { + span { + font-style: normal; + line-height: 19px; + color: var(--mutedtext); + font-size: 11px; + } + } + .spacer_box { + .field { + margin-bottom: 5px; + clear: left; + padding-bottom: 5px; + width: 100%; + float: left; + &:not(:last-child) { + border-bottom: 1px solid var(--subtleAccent); + } + } + } + .select_mode { + .field { + >span { + margin-right: 10px; + display: inline-block; + min-width: 100px; + } + } + } + input.one_digit_input { + width: 28px; + } + input.frequency_input { + width: 48px; + } + .vtx_table_box { + min-width: 750px; + } + .table_vtx_bands { + tr { + &:first-child { + td { + text-align: center; + } + } + } + td { + padding: 0 1px; + text-align: center; + } + input { + display: block; + margin: 0 auto; + } + } + .table_vtx_powerlevels { + tr { + &:first-child { + td { + text-align: center; + } + } + } + td { + padding: 0 1px; + text-align: center; + } + input { + display: block; + margin: 0 auto; + } + } + .field_powerlevel_value { + input { + width: 53px; + } + } + .field_powerlevel_label { + input { + width: 53px; + } + } + .field_band_name { + input { + width: 71px; + } + } + .field_band_letter { + input { + width: 13px; + } + } + .vtx_table_bands_table { + span { + table { + float: left; + } + } + } + .vtx_table_powerlevels_table { + span { + table { + float: left; + } + } + } +} +.tab-vtx.supported { + .require-support { + display: block; + } + .require-upgrade { + display: none; + } +} +#tab-vtx-templates { + display: none; +} +@media all and (max-width: 575px) { + .tab-vtx { + .columnsWrapper { + flex-wrap: wrap; + .leftColumn { + width: 100%; + } + .rightColumn { + width: 100%; + flex-basis: auto; + } + } + .leftWrapper { + width: 100%; + overflow: auto; + } + } +} diff --git a/src/tabs/presets/DetailedDialog/PresetsDetailedDialog.css b/src/tabs/presets/DetailedDialog/PresetsDetailedDialog.css deleted file mode 100644 index 3a659333..00000000 --- a/src/tabs/presets/DetailedDialog/PresetsDetailedDialog.css +++ /dev/null @@ -1,160 +0,0 @@ -.preset_detailed_dialog_title { - padding-left: 10px; - padding-right: 10px; -} - -#presets_detailed_dialog_content_wrapper .preset_title_panel_title { - padding-bottom: .5ex; - border-bottom: 1px solid var(--accent); - margin-bottom: 2ex; -} - -/* multiple select for options - force placeholder color to black/white */ -#presets_detailed_dialog_content_wrapper .ms-choice>span.placeholder { - color: var(--defaultText); -} - -.presets-detailed-dialog-property-table { - margin-top: 10px; - margin-bottom: 10px; -} - -.presets-detailed-dialog-property-table td { - padding-left: 10px; - padding-right: 10px; - padding-top: 6px; - padding-bottom: 6px; -} - -.presets-detailed-dialog-property-table-first-col { - width: 150px; -} - -.presets_detailed_dialog_text { - padding-top: 6px; - padding-bottom: 6px; - margin-top: 12px; - overflow-y: scroll; - height: 270px; - font-size: 110%; - white-space: pre-line; - user-select: text; -} - -#presets_detailed_dialog_html_description { - white-space: normal; -} - -#presets_detailed_dialog_html_description h1, h2 { - padding-top: 10px; - padding-bottom: 3px; -} - -#presets_detailed_dialog_html_description h3 { - padding-top: 5px; - padding-bottom: 0px; -} - -#presets_detailed_dialog_html_description h4, h5, h6 { - padding-top: 0px; - padding-bottom: 0px; -} - -#presets_detailed_dialog_html_description ul, ol { - padding-left: 25px; -} - -#presets_detailed_dialog_html_description ul li { - padding-left: 12px; - list-style-type: disclosure-closed; -} - -#presets_detailed_dialog_html_description ol li { - padding-left: 12px; - list-style-type: decimal; -} - -#presets_detailed_dialog_properties { - height: 360px; -} - -#presets_detailed_dialog_content_wrapper .left-panel { - position: absolute; - left: 0px; - padding-left: 20px; -} - -#presets_options_panel .ms-choice { - border-color: var(--accentBorder); - border-width: 2px; -} - -#presets_detailed_dialog_loading { - height: 300px; -} - -#presets_options_select { - width: 296px; -} - -#presets_options_panel { - height: 26px; - margin-top: 6px; -} - -#presets_options_panel > span{ - line-height: 26px; -} - -#preset_options_label { - width : 100px; - display: inline-block; -} - -#presets_detailed_dialog .ms-drop ul>li.hide-radio:focus, .ms-drop ul>li.hide-radio:hover { - background: none !important; -} - -@media all and (max-width: 575px) { - .presets_detailed_dialog_text { - height: unset; - padding-bottom: 100px; - } - - #presets_detailed_dialog .content_toolbar { - position: fixed; - height: 70px; - padding-bottom: 8px; - } - - #presets_options_panel { - height: 26px; - margin-top: 6px; - grid-template-columns: 100px 1fr; - display: grid; - } - - #presets_options_select { - width: 100%; - } - - #presets_detailed_dialog .btn { - margin-left: 0px; - width: 100%; - } - - #presets_detailed_dialog .btn .left-panel { - margin-left: 12px; - margin-bottom: 12px; - padding-left: 0px; - } - - #presets_detailed_dialog .btn .left-panel .regular-button { - float: none; - display: inline-block; - } - - #presets_detailed_dialog .mainButton { - margin-top: 40px; - } -} diff --git a/src/tabs/presets/DetailedDialog/PresetsDetailedDialog.less b/src/tabs/presets/DetailedDialog/PresetsDetailedDialog.less new file mode 100644 index 00000000..0ac7b59d --- /dev/null +++ b/src/tabs/presets/DetailedDialog/PresetsDetailedDialog.less @@ -0,0 +1,169 @@ +.preset_detailed_dialog_title { + padding-left: 10px; + padding-right: 10px; +} +#presets_detailed_dialog_content_wrapper { + .preset_title_panel_title { + padding-bottom: .5ex; + border-bottom: 1px solid var(--accent); + margin-bottom: 2ex; + } + .ms-choice { + >span.placeholder { + color: var(--defaultText); + } + } + .left-panel { + position: absolute; + left: 0px; + padding-left: 20px; + } +} +.presets-detailed-dialog-property-table { + margin-top: 10px; + margin-bottom: 10px; + td { + padding-left: 10px; + padding-right: 10px; + padding-top: 6px; + padding-bottom: 6px; + } +} +.presets-detailed-dialog-property-table-first-col { + width: 150px; +} +.presets_detailed_dialog_text { + padding-top: 6px; + padding-bottom: 6px; + margin-top: 12px; + overflow-y: scroll; + height: 270px; + font-size: 110%; + white-space: pre-line; + user-select: text; +} +#presets_detailed_dialog_html_description { + white-space: normal; + h1 { + padding-top: 10px; + padding-bottom: 3px; + } + h3 { + padding-top: 5px; + padding-bottom: 0px; + } + h4 { + padding-top: 0px; + padding-bottom: 0px; + } + ul { + padding-left: 25px; + li { + padding-left: 12px; + list-style-type: disclosure-closed; + } + } + ol { + li { + padding-left: 12px; + list-style-type: decimal; + } + } +} +h2 { + padding-top: 10px; + padding-bottom: 3px; +} +h5 { + padding-top: 0px; + padding-bottom: 0px; +} +h6 { + padding-top: 0px; + padding-bottom: 0px; +} +ol { + padding-left: 25px; +} +#presets_detailed_dialog_properties { + height: 360px; +} +#presets_options_panel { + .ms-choice { + border-color: var(--accentBorder); + border-width: 2px; + } + height: 26px; + margin-top: 6px; + >span { + line-height: 26px; + } +} +#presets_detailed_dialog_loading { + height: 300px; +} +#presets_options_select { + width: 296px; +} +#preset_options_label { + width: 100px; + display: inline-block; +} +#presets_detailed_dialog { + .ms-drop { + ul { + >li.hide-radio { + &:focus { + background: none !important; + } + } + } + } +} +.ms-drop { + ul { + >li.hide-radio { + &:hover { + background: none !important; + } + } + } +} +@media all and (max-width: 575px) { + .presets_detailed_dialog_text { + height: unset; + padding-bottom: 100px; + } + #presets_detailed_dialog { + .content_toolbar { + position: fixed; + height: 70px; + padding-bottom: 8px; + } + .btn { + margin-left: 0px; + width: 100%; + .left-panel { + margin-left: 12px; + margin-bottom: 12px; + padding-left: 0px; + .regular-button { + float: none; + display: inline-block; + } + } + } + .mainButton { + margin-top: 40px; + } + } + #presets_options_panel { + height: 26px; + margin-top: 6px; + grid-template-columns: 100px 1fr; + display: grid; + } + #presets_options_select { + width: 100%; + } +} diff --git a/src/tabs/presets/presets.css b/src/tabs/presets/presets.css deleted file mode 100644 index af712dfd..00000000 --- a/src/tabs/presets/presets.css +++ /dev/null @@ -1,445 +0,0 @@ -.tab-presets { - height: 100%; -} - -.tab-presets .content_wrapper { - height: calc(100% - 30px - 3ex); - overflow-y: scroll; - overflow-x: hidden; -} - -.tab-presets p { - padding: 0; - border: 0 dotted var(--subtleAccent); -} - -.tab-presets .presets_warnings { - padding-left : 20px; - padding-right : 20px; -} - -#presets_content_wrapper { - padding: 0px; - position: relative; -} - -.presets_top_bar_pannel { - margin-left: auto; -} - -.presets_title_text { - display: inline-block; -} - -.presets_top_bar_button_pannel { - display: inline; -} - -.presets_warning_backup { - display: grid; - grid-template-columns: 1fr fit-content(300px); -} - -.presets_warning_backup_text { - padding-right: 24px; -} - -.presets_warning_backup_button_hide { - margin-top: 0px; - margin-bottom: 0px; - margin-right: 0px; - line-height: 17px; - font-size: 10px; - height: 17px; -} - -.tab-presets .top_panel_spacer { - width: 0px; - display: inline; - border: 1px var(--subtleAccent); - border-style: none none none solid; - height: 60%; - margin-right: 10px; - float: right; -} - -.tab-presets .tab_title .presets_top_bar_button_pannel .regular-button{ - margin-bottom: 0px; - margin-top: 0px; - line-height : 17px; - font-size : 10px; - border-radius: 3px; -} - -.presetsWikiButton { - margin-right: 0px; -} - -.tab-presets .tab_title -{ - padding: 20px 20px 0px 20px; -} - -#presets_list { - padding: 0px 0px 20px 0px; - height: calc(100% - 180px); - display: grid; - grid-gap: 12px; - grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); -} - -#preset_list_wrapper { - padding-left: 20px; - padding-right: 20px; -} - -#presets_global_loading { - padding: 0px 20px 20px 20px; - display: none; - width: 50%; - height: 50%; - margin: auto; -} - -#presets_global_loading_error { - padding: 0px 20px 20px 20px; - display: none; -} - -#presets_main_content { - display: none; -} - -#presets_list:last-child::after { - visibility: hidden; - display: block; - font-size: 0; - content: " "; - clear: both; - height: 0; -} - -.presets_filter_select { - width: 100%; - background-color: var(--boxBackground); - color: var(--defaultText); -} - -.presets_filter_select_nonempty { - border-color: var(--accentBorder) !important; - border-width: 2px !important; -} - -.presets_search_settings { - position: sticky; - top: 0px; - background-color: var(--boxBackground); -} - -.tab-presets .ms-choice,.ms-drop { - background-color: var(--boxBackground)!important; - color: var(--defaultText)!important; -} - -.presets_text_input { - border: 1px solid var(--subtleAccent); - border-radius: 3px; - background-color: var(--boxBackground); - color: var(--defaultText); -} - -#presets_filter_text { - height: 26px; - flex: 1; - padding-left: 5px; -} - -#presets_search_hint { - float: left; - width: 28px; - height: 28px; - margin-right: 12px; - background-repeat: no-repeat; - background-image: url(../../images/icons/cf_icon_search_orange.svg); -} - -#presets_search_bar_wrapper { - display: flex; - padding: 2ex 20px 2ex 20px; -} - -#presets_cli { - width: 100%; -} - -#presets_cli_background { - border: 1px solid var(--subtleAccent); - background-color: rgba(64, 64, 64, 1); - margin-top: 0; - height: 300px; - border-radius: 5px; - box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.80); -} - -.tab-presets .window { - height: 100%; - width: 100%; - padding: 5px; - overflow-y: auto; - overflow-x: hidden; - font-family: monospace; - color: white; - box-sizing: border-box; - -webkit-user-select: text; - user-select: text; - float: left; -} - -.presets_fitler_table_header -{ - background: var(--quietHeader); - color: var(--quietText); - border-right: 1px solid var(--subtleAccent); - font-weight: normal; - text-align: left; - padding: 4px 4px 4px 6px; -} - -.presets_fitler_table_value { - background-color: var(--alternativeBackground); - width: 100%; -} - -.tab-presets textarea[name='commands'] { - -webkit-box-sizing: border-box; - box-sizing: border-box; - width: 100%; - margin-top: 6px; - padding: 4px; - padding-left: 8px; - padding-right: 8px; - color: white; - border: 1px solid var(--subtleAccent); - background-color: rgba(64, 64, 64, 1); - resize: none; -} - -.tab-presets .presets_cli_errors_dialog_warning { - font-size: 1.2em; - margin-bottom: 8px; -} - -.tab-presets #content-watermark { - z-index: 0; -} - -#presets_cli_errors_dialog .regular-button { - margin-bottom: 0px; - margin-left: 12px; - margin-right: 0px; - float: right; -} - -.tab-presets .window .wrapper { - white-space: pre-wrap; - user-select: text; -} - -.tab-presets .window .error_message { - color: red; - font-weight: bold; -} - -.tab-presets .save { - color: white; -} - -#presets_detailed_dialog { - width : 600px; - height : 520px; - padding: 12px; -} - -#presets_sources_dialog { - width : 600px; - height : 520px; - padding: 12px; -} - -#presets_cli_errors_dialog { - width : 600px; - padding: 24px; -} - -#presets_apply_progress_dialog { - width: 300px; - padding: 24px; -} - -.tab-presets .presets_apply_progress_dialog_progress_bar { - width: 100%; - height: 20px; - margin-top: 12px; -} - -.tab-presets .ms-drop { - z-index: 2001; -} - -/* hack-fix for multiple-select with small font size. Originally checkboxes are not ligned with the text options when the font size is smaller than 0.7em */ -.tab-presets .ms-drop input[type="radio"], .ms-drop input[type="checkbox"] { - margin-top: 0.1rem !important; -} - -/* hack-fix for multiple-select. Places "X" button vertically in the middle for the current font. "X" icon clears the current selection. */ -.tab-presets .ms-choice>div.icon-close { - padding-top: 3px; -} - -/* hack-fix for multiple-select. Prevents "X" button from changing color on hover. "X" icon clears the current selection */ -.tab-presets .ms-choice > div.icon-close:hover::before { - color: rgb(136, 136, 136); -} - -/* hack-fix for multiple-select. Makes "X" button bigger. "X" icon clears the current selection */ -.tab-presets .ms-choice>div.icon-close { - font-size: 16px; -} - -.presets_filter_table_wrapper { - display: grid; - grid-gap: 5px; - grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); - padding: 0px 20px 0px 20px; -} - -.presets_filter_table_wrapper .freelabel { - display: inline-block; - padding: 4px 0 4px 0; -} - -.tab-presets .cf_doc_version_bt { - margin-top: 20px; -} - -#presets_list_no_found, #presets_list_too_many_found { - font-size: 1.5em; -} - -@media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) { - - .tab-presets .content_wrapper { - height: calc(100% - 87px); - } - .tab-presets .content_toolbar { - margin-top: 5px; - } - - .presets_search_settings { - position: static; - top: unset; - } -} - -.presets_secondary_top_bar_panel_buttons { - padding-left: 8px; - padding-right: 8px; - margin-bottom: 8px; -} - -.presets_secondary_top_bar_panel_buttons .regular-button { - margin-top: 0px; - margin-bottom: 0px; - line-height: 17px; - font-size: 10px; - border-radius: 3px; -} - -@media all and (max-width: 575px) { - .tab-presets .content_wrapper { - height: calc(100% - 51px); - } - - .tab-presets .tab_title - { - padding: 20px 10px 10px 10px; - } - - .tab-presets .backdrop { - background-size: 100%; - } - - #presets_list { - grid-template-columns: 100%; - } - - #preset_list_wrapper, .presets_search_settings { - padding-left: 8px; - padding-right: 8px; - } - - #presets_search_bar_wrapper { - padding-left: 0px; - padding-right: 0px; - padding-top: 1ex; - } - - .presets_filter_row { - display: table-row; - } - - .presets_filter_table_wrapper { - display: table; - border-spacing: 6px; - margin-right: -6px; - margin-left: -6px; - padding-left: 0px; - padding-right: 0px; - } - - .presets_fitler_table_header { - display: table-cell; - background-color: unset; - border-right: unset; - } - - .presets_fitler_table_value { - display: table-cell; - } - - .tab-presets .presets_warnings { - padding-left: 8px; - padding-right: 8px; - } - - #presets_cli_errors_dialog { - padding: 12px; - } - - #presets_apply_progress_dialog { - padding: 12px; - } - - #presets_cli_errors_dialog .btn { - position: fixed; - right: 12px; - bottom: 12px; - } - #presets_cli { - height: calc(100% - 121px); - } - - #presets_cli_background { - height: 100%; - } - - .presets_warning_backup { - display: block; - grid-template-columns: 1fr fit-content(300px); - } - - .presets_warning_backup_text { - padding-right: 24px; - margin-bottom: 6px; - } -} diff --git a/src/tabs/presets/presets.less b/src/tabs/presets/presets.less new file mode 100644 index 00000000..31037845 --- /dev/null +++ b/src/tabs/presets/presets.less @@ -0,0 +1,398 @@ +.tab-presets { + height: 100%; + .content_wrapper { + height: calc(100% - 30px - 3ex); + overflow-y: scroll; + overflow-x: hidden; + } + p { + padding: 0; + border: 0 dotted var(--subtleAccent); + } + .presets_warnings { + padding-left: 20px; + padding-right: 20px; + } + .top_panel_spacer { + width: 0px; + display: inline; + border: 1px var(--subtleAccent); + border-style: none none none solid; + height: 60%; + margin-right: 10px; + float: right; + } + .tab_title { + .presets_top_bar_button_pannel { + .regular-button { + margin-bottom: 0px; + margin-top: 0px; + line-height: 17px; + font-size: 10px; + border-radius: 3px; + } + } + padding: 20px 20px 0px 20px; + } + .ms-choice { + background-color: var(--boxBackground) !important; + color: var(--defaultText) !important; + >div.icon-close { + padding-top: 3px; + font-size: 16px; + &:hover { + &::before { + color: rgb(136, 136, 136); + } + } + } + } + .window { + height: 100%; + width: 100%; + padding: 5px; + overflow-y: auto; + overflow-x: hidden; + font-family: monospace; + color: white; + box-sizing: border-box; + -webkit-user-select: text; + user-select: text; + float: left; + .wrapper { + white-space: pre-wrap; + user-select: text; + } + .error_message { + color: red; + font-weight: bold; + } + } + textarea[name='commands'] { + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 100%; + margin-top: 6px; + padding: 4px; + padding-left: 8px; + padding-right: 8px; + color: white; + border: 1px solid var(--subtleAccent); + background-color: rgba(64, 64, 64, 1); + resize: none; + } + .presets_cli_errors_dialog_warning { + font-size: 1.2em; + margin-bottom: 8px; + } + #content-watermark { + z-index: 0; + } + .save { + color: white; + } + .presets_apply_progress_dialog_progress_bar { + width: 100%; + height: 20px; + margin-top: 12px; + } + .ms-drop { + z-index: 2001; + input[type="radio"] { + margin-top: 0.1rem !important; + } + } + .cf_doc_version_bt { + margin-top: 20px; + } +} +#presets_content_wrapper { + padding: 0px; + position: relative; +} +.presets_top_bar_pannel { + margin-left: auto; +} +.presets_title_text { + display: inline-block; +} +.presets_top_bar_button_pannel { + display: inline; +} +.presets_warning_backup { + display: grid; + grid-template-columns: 1fr fit-content(300px); +} +.presets_warning_backup_text { + padding-right: 24px; +} +.presets_warning_backup_button_hide { + margin-top: 0px; + margin-bottom: 0px; + margin-right: 0px; + line-height: 17px; + font-size: 10px; + height: 17px; +} +.presetsWikiButton { + margin-right: 0px; +} +#presets_list { + padding: 0px 0px 20px 0px; + height: calc(100% - 180px); + display: grid; + grid-gap: 12px; + grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); + &:last-child { + &::after { + visibility: hidden; + display: block; + font-size: 0; + content: " "; + clear: both; + height: 0; + } + } +} +#preset_list_wrapper { + padding-left: 20px; + padding-right: 20px; +} +#presets_global_loading { + padding: 0px 20px 20px 20px; + display: none; + width: 50%; + height: 50%; + margin: auto; +} +#presets_global_loading_error { + padding: 0px 20px 20px 20px; + display: none; +} +#presets_main_content { + display: none; +} +.presets_filter_select { + width: 100%; + background-color: var(--boxBackground); + color: var(--defaultText); +} +.presets_filter_select_nonempty { + border-color: var(--accentBorder) !important; + border-width: 2px !important; +} +.presets_search_settings { + position: sticky; + top: 0px; + background-color: var(--boxBackground); +} +.ms-drop { + background-color: var(--boxBackground) !important; + color: var(--defaultText) !important; + input[type="checkbox"] { + margin-top: 0.1rem !important; + } +} +.presets_text_input { + border: 1px solid var(--subtleAccent); + border-radius: 3px; + background-color: var(--boxBackground); + color: var(--defaultText); +} +#presets_filter_text { + height: 26px; + flex: 1; + padding-left: 5px; +} +#presets_search_hint { + float: left; + width: 28px; + height: 28px; + margin-right: 12px; + background-repeat: no-repeat; + background-image: url(../../images/icons/cf_icon_search_orange.svg); +} +#presets_search_bar_wrapper { + display: flex; + padding: 2ex 20px 2ex 20px; +} +#presets_cli { + width: 100%; +} +#presets_cli_background { + border: 1px solid var(--subtleAccent); + background-color: rgba(64, 64, 64, 1); + margin-top: 0; + height: 300px; + border-radius: 5px; + box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.80); +} +.presets_fitler_table_header { + background: var(--quietHeader); + color: var(--quietText); + border-right: 1px solid var(--subtleAccent); + font-weight: normal; + text-align: left; + padding: 4px 4px 4px 6px; +} +.presets_fitler_table_value { + background-color: var(--alternativeBackground); + width: 100%; +} +#presets_cli_errors_dialog { + .regular-button { + margin-bottom: 0px; + margin-left: 12px; + margin-right: 0px; + float: right; + } + width: 600px; + padding: 24px; +} +#presets_detailed_dialog { + width: 600px; + height: 520px; + padding: 12px; +} +#presets_sources_dialog { + width: 600px; + height: 520px; + padding: 12px; +} +#presets_apply_progress_dialog { + width: 300px; + padding: 24px; +} +.presets_filter_table_wrapper { + display: grid; + grid-gap: 5px; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + padding: 0px 20px 0px 20px; + .freelabel { + display: inline-block; + padding: 4px 0 4px 0; + } +} +#presets_list_no_found { + font-size: 1.5em; +} +#presets_list_too_many_found { + font-size: 1.5em; +} +.presets_secondary_top_bar_panel_buttons { + padding-left: 8px; + padding-right: 8px; + margin-bottom: 8px; + .regular-button { + margin-top: 0px; + margin-bottom: 0px; + line-height: 17px; + font-size: 10px; + border-radius: 3px; + } +} +@media only screen and (max-width: 1055px) { + .tab-presets { + .content_wrapper { + height: calc(100% - 87px); + } + .content_toolbar { + margin-top: 5px; + } + } + .presets_search_settings { + position: static; + top: unset; + } +} +@media only screen and (max-device-width: 1055px) { + .tab-presets { + .content_wrapper { + height: calc(100% - 87px); + } + .content_toolbar { + margin-top: 5px; + } + } + .presets_search_settings { + position: static; + top: unset; + } +} +@media all and (max-width: 575px) { + .tab-presets { + .content_wrapper { + height: calc(100% - 51px); + } + .tab_title { + padding: 20px 10px 10px 10px; + } + .backdrop { + background-size: 100%; + } + .presets_warnings { + padding-left: 8px; + padding-right: 8px; + } + } + #presets_list { + grid-template-columns: 100%; + } + #preset_list_wrapper { + padding-left: 8px; + padding-right: 8px; + } + .presets_search_settings { + padding-left: 8px; + padding-right: 8px; + } + #presets_search_bar_wrapper { + padding-left: 0px; + padding-right: 0px; + padding-top: 1ex; + } + .presets_filter_row { + display: table-row; + } + .presets_filter_table_wrapper { + display: table; + border-spacing: 6px; + margin-right: -6px; + margin-left: -6px; + padding-left: 0px; + padding-right: 0px; + } + .presets_fitler_table_header { + display: table-cell; + background-color: unset; + border-right: unset; + } + .presets_fitler_table_value { + display: table-cell; + } + #presets_cli_errors_dialog { + padding: 12px; + .btn { + position: fixed; + right: 12px; + bottom: 12px; + } + } + #presets_apply_progress_dialog { + padding: 12px; + } + #presets_cli { + height: calc(100% - 121px); + } + #presets_cli_background { + height: 100%; + } + .presets_warning_backup { + display: block; + grid-template-columns: 1fr fit-content(300px); + } + .presets_warning_backup_text { + padding-right: 24px; + margin-bottom: 6px; + } +} @@ -1271,6 +1271,25 @@ resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.13.0.tgz#fcb113d1aca4b471b709e8c9c168674fbd6e06d9" integrity sha512-xKOeQEl5O47GPZYIMToj6uuA2syyFlq9EMSl2ui0uytjY9xbe8XS0pexNWmxrdcCyNGyDmLyYw5FtKsalBUeOg== +"@gulp-sourcemaps/identity-map@^2.0.1": + version "2.0.1" + resolved "https://registry.yarnpkg.com/@gulp-sourcemaps/identity-map/-/identity-map-2.0.1.tgz#a6e8b1abec8f790ec6be2b8c500e6e68037c0019" + integrity sha512-Tb+nSISZku+eQ4X1lAkevcQa+jknn/OVUgZ3XCxEKIsLsqYuPoJwJOPQeaOk75X3WPftb29GWY1eqE7GLsXb1Q== + dependencies: + acorn "^6.4.1" + normalize-path "^3.0.0" + postcss "^7.0.16" + source-map "^0.6.0" + through2 "^3.0.1" + +"@gulp-sourcemaps/map-sources@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@gulp-sourcemaps/map-sources/-/map-sources-1.0.0.tgz#890ae7c5d8c877f6d384860215ace9d7ec945bda" + integrity sha512-o/EatdaGt8+x2qpb0vFLC/2Gug/xYPRXb6a+ET1wGYKozKN3krDWC/zZFZAtrzxJHuDL12mwdfEFKcKMNvc55A== + dependencies: + normalize-path "^2.0.1" + through2 "^2.0.3" + "@istanbuljs/load-nyc-config@^1.0.0": version "1.1.0" resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced" @@ -5104,7 +5123,7 @@ content-type@~1.0.4: resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b" integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA== -convert-source-map@^1.4.0, convert-source-map@^1.7.0: +convert-source-map@^1.0.0, convert-source-map@^1.4.0, convert-source-map@^1.7.0: version "1.8.0" resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369" integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA== @@ -5138,6 +5157,13 @@ cookie@~0.4.1: resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432" integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA== +copy-anything@^2.0.1: + version "2.0.6" + resolved "https://registry.yarnpkg.com/copy-anything/-/copy-anything-2.0.6.tgz#092454ea9584a7b7ad5573062b2a87f5900fc480" + integrity sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw== + dependencies: + is-what "^3.14.1" + copy-concurrently@^1.0.0: version "1.0.5" resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0" @@ -5489,6 +5515,15 @@ css@^2.0.0: source-map-resolve "^0.5.2" urix "^0.1.0" +css@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/css/-/css-3.0.0.tgz#4447a4d58fdd03367c516ca9f64ae365cee4aa5d" + integrity sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ== + dependencies: + inherits "^2.0.4" + source-map "^0.6.1" + source-map-resolve "^0.6.0" + cssesc@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee" @@ -5554,6 +5589,15 @@ debounce@^1.2.0: resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131" integrity sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg== +debug-fabulous@^1.0.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/debug-fabulous/-/debug-fabulous-1.1.0.tgz#af8a08632465224ef4174a9f06308c3c2a1ebc8e" + integrity sha512-GZqvGIgKNlUnHUPQhepnUZFIMoi3dgZKQBzKDeL2g7oJF9SNAji/AAu36dusFUas0O+pae74lNeoIPHqXWDkLg== + dependencies: + debug "3.X" + memoizee "0.4.X" + object-assign "4.X" + debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0: version "2.6.9" resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" @@ -5568,20 +5612,41 @@ debug@3.2.6: dependencies: ms "^2.1.1" -debug@4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.3, debug@~4.3.1, debug@~4.3.2: - version "4.3.3" - resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664" - integrity sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q== - dependencies: - ms "2.1.2" - -debug@^3.0.0, debug@^3.2.6: +debug@3.X, debug@^3.0.0, debug@^3.2.6: version "3.2.7" resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a" integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ== dependencies: ms "^2.1.1" +debug@4, debug@^4.1.0: + version "4.3.2" + resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b" + integrity sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw== + dependencies: + ms "2.1.2" + +debug@^4.0.1: + version "4.2.0" + resolved "https://registry.yarnpkg.com/debug/-/debug-4.2.0.tgz#7f150f93920e94c58f5574c2fd01a3110effe7f1" + integrity sha512-IX2ncY78vDTjZMFUdmsvIRFY2Cf4FnD0wRs+nQwJU8Lu99/tPFdb0VybiiMTPe3I6rQmwsqQqRBvxU+bZ/I8sg== + dependencies: + ms "2.1.2" + +debug@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791" + integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw== + dependencies: + ms "^2.1.1" + +debug@^4.3.3, debug@~4.3.1, debug@~4.3.2: + version "4.3.3" + resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664" + integrity sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q== + dependencies: + ms "2.1.2" + debug@~3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261" @@ -5773,6 +5838,11 @@ detect-libc@^1.0.2, detect-libc@^1.0.3: resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b" integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups= +detect-newline@^2.0.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2" + integrity sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I= + detect-newline@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651" @@ -6338,6 +6408,15 @@ es5-ext@^0.10.35, es5-ext@^0.10.46, es5-ext@^0.10.50, es5-ext@^0.10.51: es6-symbol "~3.1.1" next-tick "^1.0.0" +es5-ext@^0.10.53, es5-ext@~0.10.14, es5-ext@~0.10.2, es5-ext@~0.10.46: + version "0.10.61" + resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.61.tgz#311de37949ef86b6b0dcea894d1ffedb909d3269" + integrity sha512-yFhIqQAzu2Ca2I4SE2Au3rxVfmohU9Y7wqGR+s7+H7krk26NXhIRAZDgqd6xqjCEFUomDEA3/Bo/7fKmIkW1kA== + dependencies: + es6-iterator "^2.0.3" + es6-symbol "^3.1.3" + next-tick "^1.1.0" + es5-shim@^4.5.13: version "4.6.5" resolved "https://registry.yarnpkg.com/es5-shim/-/es5-shim-4.6.5.tgz#2124bb073b7cede2ed23b122a1fd87bb7b0bb724" @@ -6365,7 +6444,15 @@ es6-symbol@^3.1.1, es6-symbol@~3.1.1: d "^1.0.1" es5-ext "^0.10.51" -es6-weak-map@^2.0.1: +es6-symbol@^3.1.3: + version "3.1.3" + resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.3.tgz#bad5d3c1bcdac28269f4cb331e431c78ac705d18" + integrity sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA== + dependencies: + d "^1.0.1" + ext "^1.1.2" + +es6-weak-map@^2.0.1, es6-weak-map@^2.0.3: version "2.0.3" resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-2.0.3.tgz#b6da1f16cc2cc0d9be43e6bdbfc5e7dfcdf31d53" integrity sha512-p5um32HOTO1kP+w7PRnB+5lQ43Z6muuMuIMffvDN8ZB4GcnjLBV6zGStpbASIMk4DCAvEaamhe2zhyCb/QXXsA== @@ -6574,6 +6661,14 @@ etag@~1.8.1: resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887" integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc= +event-emitter@^0.3.5: + version "0.3.5" + resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.5.tgz#df8c69eef1647923c7157b9ce83840610b02cc39" + integrity sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk= + dependencies: + d "1" + es5-ext "~0.10.14" + event-stream@3.3.4: version "3.3.4" resolved "https://registry.yarnpkg.com/event-stream/-/event-stream-3.3.4.tgz#4ab4c9a0f5a54db9338b4c34d86bfce8f4b35571" @@ -6707,6 +6802,13 @@ express@^4.17.1: utils-merge "1.0.1" vary "~1.1.2" +ext@^1.1.2: + version "1.6.0" + resolved "https://registry.yarnpkg.com/ext/-/ext-1.6.0.tgz#3871d50641e874cc172e2b53f919842d19db4c52" + integrity sha512-sdBImtzkq2HpkdRLtlLWDa6w4DX22ijZLKx8BMPUuKe1c5lbN6xwQDQCxSfxBQnHZ13ls/FH0MQZx/q/gr6FQg== + dependencies: + type "^2.5.0" + extend-shallow@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f" @@ -7866,6 +7968,18 @@ gulp-json-editor@^2.5.4: plugin-error "^1.0.1" through2 "^3.0.1" +gulp-less@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/gulp-less/-/gulp-less-5.0.0.tgz#edafce75e9202fd62c9f653fb57b8d0d9fd731e5" + integrity sha512-W2I3TewO/By6UZsM/wJG3pyK5M6J0NYmJAAhwYXQHR+38S0iDtZasmUgFCH3CQj+pQYw/PAIzxvFvwtEXz1HhQ== + dependencies: + less "^3.7.1 || ^4.0.0" + object-assign "^4.0.1" + plugin-error "^1.0.0" + replace-ext "^2.0.0" + through2 "^4.0.0" + vinyl-sourcemaps-apply "^0.2.0" + gulp-prompt@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/gulp-prompt/-/gulp-prompt-1.2.0.tgz#8f716dd16efc7464f90d9a82fde9dd7e835ee12e" @@ -7889,6 +8003,23 @@ gulp-replace@^1.0.0: readable-stream "^2.0.1" replacestream "^4.0.0" +gulp-sourcemaps@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/gulp-sourcemaps/-/gulp-sourcemaps-3.0.0.tgz#2e154e1a2efed033c0e48013969e6f30337b2743" + integrity sha512-RqvUckJkuYqy4VaIH60RMal4ZtG0IbQ6PXMNkNsshEGJ9cldUPRb/YCgboYae+CLAs1HQNb4ADTKCx65HInquQ== + dependencies: + "@gulp-sourcemaps/identity-map" "^2.0.1" + "@gulp-sourcemaps/map-sources" "^1.0.0" + acorn "^6.4.1" + convert-source-map "^1.0.0" + css "^3.0.0" + debug-fabulous "^1.0.0" + detect-newline "^2.0.0" + graceful-fs "^4.0.0" + source-map "^0.6.0" + strip-bom-string "^1.0.0" + through2 "^2.0.0" + gulp-util@^3.0.8: version "3.0.8" resolved "https://registry.yarnpkg.com/gulp-util/-/gulp-util-3.0.8.tgz#0054e1e744502e27c04c187c3ecc505dd54bbb4f" @@ -9122,7 +9253,7 @@ is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4: dependencies: isobject "^3.0.1" -is-promise@^2.0.0: +is-promise@^2.0.0, is-promise@^2.2.2: version "2.2.2" resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.2.2.tgz#39ab959ccbf9a774cf079f7b40c7a26f763135f1" integrity sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ== @@ -9260,6 +9391,11 @@ is-weakref@^1.0.2: dependencies: call-bind "^1.0.2" +is-what@^3.14.1: + version "3.14.1" + resolved "https://registry.yarnpkg.com/is-what/-/is-what-3.14.1.tgz#e1222f46ddda85dead0fd1c9df131760e77755c1" + integrity sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA== + is-whitespace-character@^1.0.0: version "1.0.4" resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz#0858edd94a95594c7c9dd0b5c174ec6e45ee4aa7" @@ -9867,6 +10003,23 @@ lead@^1.0.0: dependencies: flush-write-stream "^1.0.2" +"less@^3.7.1 || ^4.0.0": + version "4.1.2" + resolved "https://registry.yarnpkg.com/less/-/less-4.1.2.tgz#6099ee584999750c2624b65f80145f8674e4b4b0" + integrity sha512-EoQp/Et7OSOVu0aJknJOtlXZsnr8XE8KwuzTHOLeVSEx8pVWUICc8Q0VYRHgzyjX78nMEyC/oztWFbgyhtNfDA== + dependencies: + copy-anything "^2.0.1" + parse-node-version "^1.0.1" + tslib "^2.3.0" + optionalDependencies: + errno "^0.1.1" + graceful-fs "^4.1.2" + image-size "~0.5.0" + make-dir "^2.1.0" + mime "^1.4.1" + needle "^2.5.2" + source-map "~0.6.0" + less@^3.9.0: version "3.12.2" resolved "https://registry.yarnpkg.com/less/-/less-3.12.2.tgz#157e6dd32a68869df8859314ad38e70211af3ab4" @@ -10239,6 +10392,13 @@ lru-cache@^6.0.0: dependencies: yallist "^4.0.0" +lru-queue@^0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/lru-queue/-/lru-queue-0.1.0.tgz#2738bd9f0d3cf4f84490c5736c48699ac632cda3" + integrity sha1-Jzi9nw089PhEkMVzbEhpmsYyzaM= + dependencies: + es5-ext "~0.10.2" + lru_map@^0.3.3: version "0.3.3" resolved "https://registry.yarnpkg.com/lru_map/-/lru_map-0.3.3.tgz#b5c8351b9464cbd750335a79650a0ec0e56118dd" @@ -10427,6 +10587,20 @@ memfs@^3.1.2: dependencies: fs-monkey "1.0.3" +memoizee@0.4.X: + version "0.4.15" + resolved "https://registry.yarnpkg.com/memoizee/-/memoizee-0.4.15.tgz#e6f3d2da863f318d02225391829a6c5956555b72" + integrity sha512-UBWmJpLZd5STPm7PMUlOw/TSy972M+z8gcyQ5veOnSDRREz/0bmpyTfKt3/51DhEBqCZQn1udM/5flcSPYhkdQ== + dependencies: + d "^1.0.1" + es5-ext "^0.10.53" + es6-weak-map "^2.0.3" + event-emitter "^0.3.5" + is-promise "^2.2.2" + lru-queue "^0.1.0" + next-tick "^1.1.0" + timers-ext "^0.1.7" + memoizerific@^1.11.3: version "1.11.3" resolved "https://registry.yarnpkg.com/memoizerific/-/memoizerific-1.11.3.tgz#7c87a4646444c32d75438570905f2dbd1b1a805a" @@ -10970,6 +11144,15 @@ needle@^2.2.1: iconv-lite "^0.4.4" sax "^1.2.4" +needle@^2.5.2: + version "2.9.1" + resolved "https://registry.yarnpkg.com/needle/-/needle-2.9.1.tgz#22d1dffbe3490c2b83e301f7709b6736cd8f2684" + integrity sha512-6R9fqJ5Zcmf+uYaFgdIHmLwNldn5HbK8L5ybn7Uz+ylX/rnOsSp1AHcvQSrCaFN+qNM1wpymHqD7mVasEOlHGQ== + dependencies: + debug "^3.2.6" + iconv-lite "^0.4.4" + sax "^1.2.4" + negotiator@0.6.2, negotiator@^0.6.2: version "0.6.2" resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb" @@ -10985,6 +11168,11 @@ nested-error-stacks@^2.0.0, nested-error-stacks@^2.1.0: resolved "https://registry.yarnpkg.com/nested-error-stacks/-/nested-error-stacks-2.1.1.tgz#26c8a3cee6cc05fbcf1e333cd2fc3e003326c0b5" integrity sha512-9iN1ka/9zmX1ZvLV9ewJYEk9h7RyRRtqdK0woXcqohu8EWIerfPUjYJPg0ULy0UqP7cslmdGc8xKDJcojlKiaw== +next-tick@1, next-tick@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.1.0.tgz#1836ee30ad56d67ef281b22bd199f709449b35eb" + integrity sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ== + next-tick@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c" @@ -11145,7 +11333,7 @@ normalize-package-data@^2.0.0, normalize-package-data@^2.3.2, normalize-package- semver "2 || 3 || 4 || 5" validate-npm-package-license "^3.0.1" -normalize-path@^2.0.0, normalize-path@^2.1.1: +normalize-path@^2.0.0, normalize-path@^2.0.1, normalize-path@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9" integrity sha1-GrKLVW4Zg2Oowab35vogE3/mrtk= @@ -11356,16 +11544,16 @@ oauth-sign@~0.9.0: resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455" integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ== +object-assign@4.X, object-assign@^4, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" + integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM= + object-assign@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2" integrity sha1-m+3VygiXlJvKR+f/QIBi1Un1h/I= -object-assign@^4, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1: - version "4.1.1" - resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" - integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM= - object-copy@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c" @@ -11860,7 +12048,7 @@ parse-json@^5.0.0: json-parse-even-better-errors "^2.3.0" lines-and-columns "^1.1.6" -parse-node-version@^1.0.0: +parse-node-version@^1.0.0, parse-node-version@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/parse-node-version/-/parse-node-version-1.0.1.tgz#e2b5dbede00e7fa9bc363607f53327e8b073189b" integrity sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA== @@ -12137,7 +12325,7 @@ plist@^3.0.1: xmlbuilder "^9.0.7" xmldom "0.1.x" -plugin-error@^1.0.1: +plugin-error@^1.0.0, plugin-error@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/plugin-error/-/plugin-error-1.0.1.tgz#77016bd8919d0ac377fdcdd0322328953ca5781c" integrity sha512-L1zP0dk7vGweZME2i+EeakvUNqSrdiI3F91TwEoYiGrAfUXmVv6fJIq4g82PAXxNsWOp0J7ZqQy/3Szz0ajTxA== @@ -12296,7 +12484,7 @@ postcss@^7.0.14: source-map "^0.6.1" supports-color "^6.1.0" -postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.36, postcss@^7.0.5, postcss@^7.0.6: +postcss@^7.0.16, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.36, postcss@^7.0.5, postcss@^7.0.6: version "7.0.39" resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309" integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA== @@ -13418,6 +13606,11 @@ replace-ext@^1.0.0: resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb" integrity sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs= +replace-ext@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-2.0.0.tgz#9471c213d22e1bcc26717cd6e50881d88f812b06" + integrity sha512-UszKE5KVK6JvyD92nzMn9cDapSk6w/CaFZ96CnmDMUqH9oowfxF/ZjRITD25H4DnOQClLA4/j7jLGXXLVKxAug== + replace-homedir@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/replace-homedir/-/replace-homedir-1.0.0.tgz#e87f6d513b928dde808260c12be7fec6ff6e798c" @@ -14257,6 +14450,14 @@ source-map-resolve@^0.5.2: source-map-url "^0.4.0" urix "^0.1.0" +source-map-resolve@^0.6.0: + version "0.6.0" + resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.6.0.tgz#3d9df87e236b53f16d01e58150fc7711138e5ed2" + integrity sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w== + dependencies: + atob "^2.1.2" + decode-uri-component "^0.2.0" + source-map-support@^0.5.16, source-map-support@~0.5.12, source-map-support@~0.5.20: version "0.5.21" resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f" @@ -14280,7 +14481,7 @@ source-map@0.7.3, source-map@^0.7.3, source-map@~0.7.2: resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383" integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ== -source-map@^0.5.0, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1, source-map@~0.5.3: +source-map@^0.5.0, source-map@^0.5.1, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1, source-map@~0.5.3: version "0.5.7" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w= @@ -14701,6 +14902,11 @@ strip-ansi@^6.0.1: dependencies: ansi-regex "^5.0.1" +strip-bom-string@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/strip-bom-string/-/strip-bom-string-1.0.0.tgz#e5211e9224369fbb81d633a2f00044dc8cedad92" + integrity sha1-5SEekiQ2n7uB1jOi8ABE3IztrZI= + strip-bom@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e" @@ -15092,7 +15298,7 @@ through2@^3.0.1: dependencies: readable-stream "2 || 3" -through2@^4.0.2: +through2@^4.0.0, through2@^4.0.2: version "4.0.2" resolved "https://registry.yarnpkg.com/through2/-/through2-4.0.2.tgz#a7ce3ac2a7a8b0b966c80e7c49f0484c3b239764" integrity sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw== @@ -15128,6 +15334,14 @@ timers-browserify@^2.0.4: dependencies: setimmediate "^1.0.4" +timers-ext@^0.1.7: + version "0.1.7" + resolved "https://registry.yarnpkg.com/timers-ext/-/timers-ext-0.1.7.tgz#6f57ad8578e07a3fb9f91d9387d65647555e25c6" + integrity sha512-b85NUNzTSdodShTIbky6ZF02e8STtVVfD+fu4aXXShEELpozH+bCpJLYMPZbsABN2wDH7fJpqIoXxJpzbf0NqQ== + dependencies: + es5-ext "~0.10.46" + next-tick "1" + title-case@^2.1.0: version "2.1.1" resolved "https://registry.yarnpkg.com/title-case/-/title-case-2.1.1.tgz#3e127216da58d2bc5becf137ab91dae3a7cd8faa" @@ -15395,6 +15609,11 @@ type@^1.0.1: resolved "https://registry.yarnpkg.com/type/-/type-1.2.0.tgz#848dd7698dafa3e54a6c479e759c4bc3f18847a0" integrity sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg== +type@^2.5.0: + version "2.6.0" + resolved "https://registry.yarnpkg.com/type/-/type-2.6.0.tgz#3ca6099af5981d36ca86b78442973694278a219f" + integrity sha512-eiDBDOmkih5pMbo9OqsqPRGMljLodLcwd5XD5JbtNB0o89xZAwynY9EdCDsJU7LtcVCClu9DvM7/0Ep1hYX3EQ== + typedarray-to-buffer@^3.1.5: version "3.1.5" resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080" @@ -15959,6 +16178,13 @@ vinyl-sourcemap@^1.1.0: remove-bom-buffer "^3.0.0" vinyl "^2.0.0" +vinyl-sourcemaps-apply@^0.2.0: + version "0.2.1" + resolved "https://registry.yarnpkg.com/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.2.1.tgz#ab6549d61d172c2b1b87be5c508d239c8ef87705" + integrity sha1-q2VJ1h0XLCsbh75cUI0jnI74dwU= + dependencies: + source-map "^0.5.1" + vinyl@^0.5.0: version "0.5.3" resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-0.5.3.tgz#b0455b38fc5e0cf30d4325132e461970c2091cde" |