mirror of
https://github.com/betaflight/betaflight-configurator.git
synced 2025-07-25 17:25:16 +03:00
eecc858b7d
* Style: Use new color system * Fix: sonarcloud issues, remove testing parts * Fix: Remove double variables * Style: First POC of UI refresh - Setup tab * Style Fix: Prevent tab-specific breakpoints from escaping * Style: Remove calc() for main layout * Fix: Break into mobile UI along CSS, update mobile tabs * Style: Refresh Ports tab * Style: Refresh Configuration tab * Style: Reposition StatusBar, add a bit of spacing * Style: Remove text shadows * Style: Fix overlapping select styles * Fix: Remove import for deleted files, fixes builds * Style: Refresh Power & Battery tab * Style: Prevent OSD tab styles from escaping * Style: Refresh Failsafe tab * Style: Refresh Modes tab * Style: Add back td height * Style: Refresh Adjustments tab * Style: Refresh Motors tab * Style: Catch up main.less to various changes * Style: Refresh VTX tab * Style: Refresh OSD tab * Style: Refresh Receiver tab * Chore: Clean up SonarCloud issues * Chore: Clean up more SonarCloud issues * Style: Refresh Blackbox tab * Style: Refresh headerbar * Style: Refresh Options tab * Style: Refresh Firmware Flasher tab * Style: Adjust detect feature, add breakpoint * Fix: Use updated i18n in button * Style: Refresh MSP Radio Emulator * Style: Fix Radio Emulator breakpoint * Style: Fix Radio Emulator layout * Style: Refresh headerbar * Style: Refresh Sensors tab * Style: More consistent select elements * Style: Refresh GPS tab * Style: Fix motors tab layout * Style: Various fixes, align more toolbars * Style: Refresh CLI tab * Style: Clean up VTX tab styling * Style: Fix sensor status color
2588 lines
58 KiB
Text
2588 lines
58 KiB
Text
* {
|
|
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: var(--text);
|
|
background-color: var(--surface-200);
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
&::backdrop {
|
|
background-image: none;
|
|
background-color: rgba(1, 1, 1, 0.5);
|
|
}
|
|
a {
|
|
text-decoration: none;
|
|
color: var(--primary-500);
|
|
font-weight: bold;
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
a.disabled {
|
|
pointer-events: none;
|
|
cursor: default;
|
|
color: #999;
|
|
}
|
|
.background_paper {
|
|
background-color: var(--surface-200);
|
|
background-image:
|
|
linear-gradient(var(--surface-300) 2px, transparent 2px),
|
|
linear-gradient(90deg, var(--surface-300) 2px, transparent 2px),
|
|
linear-gradient(var(--surface-300) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--surface-300) 1px, rgba(0, 0, 0, 0) 1px);
|
|
background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
|
|
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
|
|
}
|
|
.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(--surface-400);
|
|
background: var(--surface-200);
|
|
}
|
|
.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(--primary-500);
|
|
border-radius: 3px;
|
|
border: 1px solid var(--primary-600);
|
|
color: var(--text);
|
|
float: right;
|
|
font-weight: bold;
|
|
font-size: 10px;
|
|
line-height: 17px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
display: block;
|
|
&:hover {
|
|
background-color: var(--primary-400);
|
|
transition: all ease 0.2s;
|
|
}
|
|
}
|
|
}
|
|
input, select, .select2-selection--single {
|
|
font-family: 'Open Sans', 'Segoe UI', Tahoma, sans-serif !important;
|
|
font-size: unset !important;
|
|
background-color: var(--surface-300) !important;
|
|
border: 1px solid var(--surface-500) !important;
|
|
color: var(--text);
|
|
padding: 0.25rem 0.5rem 0.25rem 0.25rem !important;
|
|
border-radius: 0.5rem !important;
|
|
min-width: 4rem;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
&.small {
|
|
padding: 0.15rem !important;
|
|
font-size: 12px !important;
|
|
}
|
|
&[type="text"] {
|
|
&[readonly] {
|
|
cursor: auto;
|
|
}
|
|
}
|
|
&[type="radio"] {
|
|
min-width: fit-content;
|
|
}
|
|
&:disabled {
|
|
background-color: var(--surface-400) !important;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|
|
&[type="range"], &[type="checkbox"] {
|
|
min-width: 0;
|
|
height: unset !important;
|
|
}
|
|
}
|
|
.ms-choice {
|
|
background-color: var(--surface-300) !important;
|
|
border: 1px solid var(--surface-500) !important;
|
|
color: var(--text) !important;
|
|
padding: 0.25rem !important;
|
|
padding-right: 0.5rem !important;
|
|
border-radius: 0.5rem !important;
|
|
min-width: 4rem !important;
|
|
font-weight: normal !important;
|
|
}
|
|
input {
|
|
cursor: text;
|
|
}
|
|
select, input[type="checkbox"] {
|
|
cursor: pointer;
|
|
}
|
|
input[type="number"] {
|
|
&::-webkit-inner-spin-button {
|
|
opacity: 1;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
.select2-selection--single {
|
|
padding-left: 0.5rem !important;
|
|
}
|
|
|
|
.noarrows {
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
}
|
|
}
|
|
.number {
|
|
margin-bottom: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 1px solid var(--surface-500);
|
|
width: 100%;
|
|
gap: 0.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
&:last-child {
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
.helpicon, label {
|
|
margin: 0 !important;
|
|
}
|
|
}
|
|
.clear-both {
|
|
clear: both;
|
|
}
|
|
.left {
|
|
float: left;
|
|
}
|
|
.right {
|
|
float: right;
|
|
}
|
|
.margin-top {
|
|
margin-top: 20px;
|
|
}
|
|
.margin-bottom {
|
|
margin-bottom: 20px;
|
|
}
|
|
.message-positive {
|
|
color: var(--primary-500) !important;
|
|
}
|
|
.message-negative {
|
|
color: var(--error-400) !important;
|
|
font-weight: bold !important;
|
|
}
|
|
.message-negative-italic {
|
|
color: var(--error-400) !important;
|
|
font-weight: bold !important;
|
|
font-style: italic;
|
|
}
|
|
#main-wrapper {
|
|
height: 100vh;
|
|
background-color: var(--surface-100);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
#background {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
position: fixed;
|
|
z-index: 1500;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: none;
|
|
backdrop-filter: blur(0.25rem);
|
|
}
|
|
#side_menu_swipe {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 15px;
|
|
height: 100%;
|
|
z-index: 1999;
|
|
}
|
|
.headerbar {
|
|
height: 5rem;
|
|
display: flex;
|
|
align-items: start;
|
|
padding: 1rem;
|
|
gap: 1rem;
|
|
background-color: var(--surface-200);
|
|
}
|
|
#menu_btn, #reveal_btn {
|
|
display: none;
|
|
width: 24px;
|
|
height: 24px;
|
|
font-size: 20px;
|
|
color: var(--surface-700);
|
|
line-height: 24px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
&:hover {
|
|
color: var(--surface-800);
|
|
}
|
|
}
|
|
#port-picker {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: auto;
|
|
.auto_connect {
|
|
color: var(--surface-950);
|
|
}
|
|
}
|
|
#portsinput {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: end;
|
|
gap: 0.5rem;
|
|
}
|
|
#auto-connect-and-baud {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
.gray {
|
|
color: var(--surface-500);
|
|
}
|
|
#firmware-virtual-option {
|
|
width: fit-content;
|
|
display: none;
|
|
}
|
|
#header_btns {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2rem;
|
|
}
|
|
.open_firmware_flasher, .connect_controls {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.firmware_b {
|
|
width: 52px;
|
|
height: 52px;
|
|
a.flash {
|
|
background-color: var(--primary-500);
|
|
border: 1px solid var(--primary-600);
|
|
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: var(--primary-400);
|
|
}
|
|
}
|
|
a.flash.disabled {
|
|
background-color: var(--surface-500);
|
|
pointer-events: none;
|
|
cursor: default;
|
|
}
|
|
a.flash.active {
|
|
background-color: var(--error-500);
|
|
border: 1px solid var(--error-600);
|
|
transition: none;
|
|
background-image: url(../images/icons/cf_icon_flasher_white.svg);
|
|
&:hover {
|
|
background-color: var(--error-400);
|
|
}
|
|
}
|
|
}
|
|
.connect_b {
|
|
width: 52px;
|
|
height: 52px;
|
|
a.connect {
|
|
background-color: var(--primary-500);
|
|
border: 1px solid var(--primary-600);
|
|
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: var(--primary-400);
|
|
}
|
|
}
|
|
a.connect.disabled {
|
|
background-color: var(--surface-500);
|
|
pointer-events: none;
|
|
cursor: default;
|
|
}
|
|
a.connect.active {
|
|
background-color: var(--error-500);
|
|
border: 1px solid var(--error-600);
|
|
transition: none;
|
|
background-image: url(../images/icons/cf_icon_usb1_white.svg);
|
|
&:hover {
|
|
background-color: var(--error-400);
|
|
}
|
|
}
|
|
}
|
|
.flash_state {
|
|
white-space: nowrap;
|
|
}
|
|
.header-wrapper {
|
|
display: flex;
|
|
gap: 1rem;
|
|
justify-content: space-between;
|
|
.mode-connected {
|
|
display: none;
|
|
}
|
|
}
|
|
#sensor-status {
|
|
border-radius: 0.5rem;
|
|
background-color: var(--surface-300);
|
|
>ul {
|
|
display: flex;
|
|
}
|
|
li {
|
|
width: 3.5rem;
|
|
display: flex;
|
|
}
|
|
}
|
|
.gyroicon {
|
|
background-image: url(../images/icons/sensor_gyro_off.png);
|
|
}
|
|
.accicon {
|
|
background-image: url(../images/icons/sensor_acc_off.png);
|
|
}
|
|
.magicon {
|
|
background-image: url(../images/icons/sensor_mag_off.png);
|
|
}
|
|
.gpsicon {
|
|
background-image: url(../images/icons/sensor_sat_off.png);
|
|
}
|
|
.baroicon {
|
|
background-image: url(../images/icons/sensor_baro_off.png);
|
|
|
|
}
|
|
.sonaricon {
|
|
background-image: url(../images/icons/sensor_sonar_off.png);
|
|
}
|
|
.gyroicon.active {
|
|
color: var(--text);
|
|
background-image: url(../images/icons/sensor_gyro_on.png);
|
|
}
|
|
.accicon.active {
|
|
color: var(--text);
|
|
background-image: url(../images/icons/sensor_acc_on.png);
|
|
}
|
|
.magicon.active {
|
|
color: var(--text);
|
|
background-image: url(../images/icons/sensor_mag_on.png);
|
|
}
|
|
.gpsicon.active {
|
|
color: var(--text);
|
|
background-image: url(../images/icons/sensor_sat_on_no_fix.png);
|
|
}
|
|
.gpsicon.active_fix {
|
|
color: var(--text);
|
|
background-image: url(../images/icons/sensor_sat_on_with_fix.png);
|
|
}
|
|
.baroicon.active {
|
|
color: var(--text);
|
|
background-image: url(../images/icons/sensor_baro_on.png);
|
|
}
|
|
.sonaricon.active {
|
|
color: var(--text);
|
|
background-image: url(../images/icons/sensor_sonar_on.png);
|
|
}
|
|
.gyroicon, .accicon, .magicon, .gpsicon, .baroicon, .sonaricon {
|
|
background-repeat: no-repeat;
|
|
height: 30px;
|
|
// margin-top: 3px;
|
|
width: 100%;
|
|
padding-top: 3rem;
|
|
color: var(--surface-700);
|
|
text-align: center;
|
|
background-size: 41px;
|
|
background-position-x: center;
|
|
background-position-y: 4px;
|
|
}
|
|
#dataflash_wrapper_global {
|
|
color: var(--text);
|
|
// width: 8rem;
|
|
height: fit-content;
|
|
display: none;
|
|
}
|
|
.dataflash-contents_global {
|
|
display: flex !important;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem;
|
|
background-color: var(--surface-300);
|
|
border-radius: 0.5rem;
|
|
li {
|
|
background-color: var(--surface-600);
|
|
height: 0.35rem;
|
|
position: relative;
|
|
border-radius: 999px;
|
|
width: 100% !important;
|
|
}
|
|
.notsupported_global {
|
|
display: none;
|
|
}
|
|
progress {
|
|
&::-webkit-progress-bar {
|
|
height: 8px;
|
|
background-color: var(--surface-300);
|
|
}
|
|
}
|
|
}
|
|
.dataflash-free_global {
|
|
background-color: var(--primary-500);
|
|
border-radius: 4px;
|
|
}
|
|
.dataflash-contents {
|
|
progress {
|
|
&::-webkit-progress-value {
|
|
background-color: #bcf;
|
|
}
|
|
}
|
|
}
|
|
.noflash_global {
|
|
display: none;
|
|
color: #868686;
|
|
text-align: center;
|
|
margin-top: 2px;
|
|
}
|
|
#expertMode {
|
|
color: var(--surface-800);
|
|
width: 100%;
|
|
margin-top: 1rem;
|
|
label {
|
|
display: flex;
|
|
align-items: baseline;
|
|
.expertModeText {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
#quad-status_wrapper {
|
|
display: none;
|
|
font-size: 10px;
|
|
border-radius: 0.5rem;
|
|
background-color: var(--surface-300);
|
|
white-space: nowrap;
|
|
padding: 0.25rem 0.5rem;
|
|
}
|
|
|
|
.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: var(--surface-200);
|
|
color: var(--text);
|
|
line-height: 21px;
|
|
height: 2rem;
|
|
overflow-y: hidden;
|
|
transition: all 0.2s;
|
|
border-bottom-left-radius: 1rem;
|
|
border-bottom-right-radius: 1rem;
|
|
overflow: hidden;
|
|
padding: 0.5rem;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
.wrapper {
|
|
padding: 0.5rem;
|
|
position: relative;
|
|
bottom: 0;
|
|
>* {
|
|
user-select: text;
|
|
>* {
|
|
user-select: text;
|
|
}
|
|
}
|
|
}
|
|
a {
|
|
font-weight: normal;
|
|
color: var(--primary-500);
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
#log.active {
|
|
overflow-y: auto;
|
|
box-shadow: inset 0 0 15px var(--surface-500);
|
|
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: var(--surface-700) !important;
|
|
transition: all 0.2s;
|
|
&:hover {
|
|
color: var(--surface-900) !important;
|
|
text-decoration: none !important;
|
|
}
|
|
}
|
|
}
|
|
#tab-content-container {
|
|
display: flex;
|
|
flex: 1;
|
|
height: 100%;
|
|
overflow-y: hidden;
|
|
transition: all 0.2s;
|
|
}
|
|
#tab-content-container.logopen {
|
|
height: 100%;
|
|
}
|
|
.tab_container {
|
|
transition: all 0.2s;
|
|
width: 13rem;
|
|
overflow: auto;
|
|
padding: 1rem;
|
|
padding-right: 0.5rem;
|
|
background-color: var(--surface-100);
|
|
}
|
|
#content {
|
|
transition: all 0.2s;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
background-color: var(--surface-100);
|
|
-webkit-transform: rotateX(0deg);
|
|
width: 100%;
|
|
}
|
|
.tab_container.logopen {
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
#tabs {
|
|
background-color: var(--surface-200);
|
|
border-radius: 1rem;
|
|
font-size: 13px;
|
|
padding: 0.5rem;
|
|
ul.mode-connected {
|
|
display: none;
|
|
}
|
|
ul.mode-connected-cli {
|
|
display: none;
|
|
}
|
|
li {
|
|
&:first-child {
|
|
border-top: 0;
|
|
}
|
|
&:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
a {
|
|
font-weight: normal;
|
|
padding-top: 0.25rem;
|
|
padding-bottom: 0.25rem;
|
|
padding-left: 2rem;
|
|
background-color: transparent;
|
|
color: var(--text);
|
|
border-radius: 999px;
|
|
height: 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
transition: none;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
margin-bottom: 0.25rem;
|
|
&:hover {
|
|
text-decoration: none;
|
|
background-color: var(--primary-transparent-1);
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
li.active {
|
|
color: #fff;
|
|
transition: none;
|
|
a {
|
|
background-color: var(--primary-transparent-2);
|
|
color: var(--primary-500);
|
|
transition: none;
|
|
&:hover {
|
|
cursor: default;
|
|
background-color: var(--primary-transparent-2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.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: var(--surface-200);
|
|
color: var(--text);
|
|
padding: 1rem;
|
|
height: fit-content;
|
|
margin: auto auto;
|
|
position: absolute;
|
|
width: 50%;
|
|
border-radius: 0.75rem;
|
|
border: 2px solid var(--surface-500);
|
|
.dialog_toolbar {
|
|
.btn {
|
|
a {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
margin-right: 20px;
|
|
background-color: var(--primary-500);
|
|
border-radius: 3px;
|
|
border: 1px solid var(--primary-600);
|
|
color: #000;
|
|
float: left;
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
display: block;
|
|
cursor: pointer;
|
|
transition: all ease 0.2s;
|
|
padding: 0 9px;
|
|
line-height: 28px;
|
|
&:hover {
|
|
background-color: var(--primary-400);
|
|
transition: all ease 0.2s;
|
|
}
|
|
&:active {
|
|
background-color: var(--primary-500);
|
|
transition: all ease 0.0s;
|
|
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35);
|
|
}
|
|
}
|
|
a.disabled {
|
|
cursor: default;
|
|
color: var(--surface-900);
|
|
background-color: var(--surface-500);
|
|
border: 1px solid var(--surface-500);
|
|
pointer-events: none;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
&::backdrop {
|
|
backdrop-filter: blur(0.5rem);
|
|
}
|
|
}
|
|
.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: 2px solid var(--primary-500);
|
|
font-size: 2rem;
|
|
font-weight: 300;
|
|
margin-bottom: 1rem;
|
|
padding-bottom: 0.25rem;
|
|
}
|
|
.tab_sponsor {
|
|
min-height: 60px;
|
|
}
|
|
.img_sponsor {
|
|
object-fit: contain;
|
|
margin: 5px 15px;
|
|
max-height: 45px;
|
|
width: 150px;
|
|
height: 45px;
|
|
}
|
|
.note {
|
|
background-color: var(--primary-transparent-2);
|
|
border: 1px solid var(--primary-500);
|
|
margin-bottom: 0.5rem;
|
|
border-radius: 0.5rem;
|
|
padding: 0.5rem;
|
|
}
|
|
.danger {
|
|
background-color: var(--error-transparent-1);
|
|
border: 1px solid var(--error-600);
|
|
color: #fff;
|
|
margin-bottom: 0.5rem;
|
|
border-radius: 0.5rem;
|
|
padding: 0.5rem;
|
|
|
|
}
|
|
.tab_wrapper {
|
|
padding: 20px 15px 15px 15px;
|
|
}
|
|
.content_wrapper {
|
|
padding: 1.25rem;
|
|
height: 100%;
|
|
position: relative;
|
|
>.note {
|
|
margin-bottom: 1rem;
|
|
}
|
|
}
|
|
.content_toolbar {
|
|
width: fit-content;
|
|
background-color: var(--surface-300);
|
|
box-shadow: rgba(0, 0, 0, 0.1) 0 -0.5rem 0.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: end;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem 1rem 0.75rem 1rem;
|
|
border-top-left-radius: 1.5rem;
|
|
&::before {
|
|
width: 1.5rem;
|
|
aspect-ratio: 1;
|
|
content: '';
|
|
mask: url(../images/corner.svg);
|
|
background-color: var(--surface-300);
|
|
position: absolute;
|
|
left: -1.5rem;
|
|
bottom: 0;
|
|
}
|
|
.info {
|
|
flex: 100;
|
|
position: relative;
|
|
.progress {
|
|
width: 100%;
|
|
height: 30px;
|
|
border-radius: 0.25rem;
|
|
overflow: hidden;
|
|
&::-webkit-progress-bar {
|
|
background-color: var(--surface-400);
|
|
}
|
|
}
|
|
.progressLabel {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 0.75rem;
|
|
line-height: 1.75rem;
|
|
}
|
|
}
|
|
.btn {
|
|
a {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
background-color: var(--primary-500);
|
|
border-radius: 3px;
|
|
border: 1px solid var(--primary-600);
|
|
color: #000;
|
|
float: right;
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
display: block;
|
|
cursor: pointer;
|
|
transition: all ease 0.2s;
|
|
padding: 0 0.5rem;
|
|
line-height: 28px;
|
|
user-select: none;
|
|
white-space: nowrap;
|
|
&:hover {
|
|
background-color: var(--primary-400);
|
|
transition: all ease 0.2s;
|
|
}
|
|
&:active {
|
|
background-color: var(--primary-500);
|
|
transition: all ease 0.0s;
|
|
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35);
|
|
}
|
|
}
|
|
a.disabled {
|
|
cursor: default;
|
|
color: var(--surface-900);
|
|
background-color: var(--surface-500);
|
|
border: 1px solid var(--surface-500);
|
|
pointer-events: none;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
.toolbar_scroll_bottom {
|
|
.content_wrapper {
|
|
height: 100%;
|
|
margin: 0 0 -50px;
|
|
}
|
|
}
|
|
|
|
.toolbar_fixed_bottom {
|
|
&.content_toolbar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
position: sticky;
|
|
bottom: 0;
|
|
left: 100%;
|
|
z-index: 2000;
|
|
div[style='display: none;'] {
|
|
&:first-child {
|
|
visibility: hidden;
|
|
display: block !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.content_toolbar.xs-compressed {
|
|
max-width: 75%;
|
|
}
|
|
.toolbar_expand_btn {
|
|
display: none;
|
|
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 {
|
|
width: 100%;
|
|
}
|
|
.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: 2px solid var(--surface-400);
|
|
border-radius: 0.75rem;
|
|
background-color: var(--surface-100);
|
|
height: fit-content;
|
|
margin-top: 0.75rem;
|
|
padding: 0.75rem;
|
|
padding-top: 1.5rem;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
.gui_box_titlebar {
|
|
color: var(--surface-100);
|
|
background-color: var(--primary-500);
|
|
position: absolute;
|
|
font-size: 13px;
|
|
height: 1.75rem;
|
|
top: calc(1.75rem / -2);
|
|
left: 1rem;
|
|
padding: 0 0.75rem;
|
|
font-weight: 600;
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
white-space: nowrap;
|
|
align-items: center;
|
|
overflow-x: hidden;
|
|
border-radius: 999px;
|
|
.switchery {
|
|
margin-top: -3px;
|
|
}
|
|
.helpicon {
|
|
margin-top: 0px;
|
|
}
|
|
}
|
|
.gui_box_bottombar {
|
|
background-color: var(--surface-400);
|
|
color: var(--text);
|
|
border-radius: 0 0 3px 3px;
|
|
font-size: 13px;
|
|
width: 100%;
|
|
height: 27px;
|
|
padding-top: 0;
|
|
font-weight: 600;
|
|
}
|
|
.gui_warning {
|
|
background: var(--error-transparent-1);
|
|
border: 1px solid var(--error-500);
|
|
.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: var(--text);
|
|
}
|
|
}
|
|
.gui_note {
|
|
background: var(--primary-transparent-1);
|
|
border: 1px solid var(--primary-500);
|
|
.gui_box_titlebar {
|
|
background-color: var(--primary-500);
|
|
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: black;
|
|
}
|
|
}
|
|
.grey {
|
|
background-color: var(--surface-200);
|
|
}
|
|
.spacer_box {
|
|
height: fit-content;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
.select {
|
|
display: flex;
|
|
gap: 1rem;
|
|
}
|
|
}
|
|
.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(--primary-500);
|
|
border-radius: 3px;
|
|
border: 1px solid var(--primary-600);
|
|
color: #000;
|
|
float: right;
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
display: block;
|
|
cursor: pointer;
|
|
transition: all ease 0.2s;
|
|
padding: 0 9px;
|
|
line-height: 28px;
|
|
&:hover {
|
|
background-color: var(--primary-400);
|
|
transition: all ease 0.2s;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.default_btn {
|
|
width: 100%;
|
|
position: relative;
|
|
margin-bottom: 10px;
|
|
margin-top: 0;
|
|
float: left;
|
|
a {
|
|
padding: 0.35rem 0 0.35rem 0;
|
|
text-align: center;
|
|
background-color: var(--primary-500);
|
|
border-radius: 0.5rem;
|
|
border: 1px solid var(--primary-600);
|
|
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(--primary-400);
|
|
color: #000;
|
|
transition: all ease 0.2s;
|
|
text-decoration: none;
|
|
}
|
|
&:active {
|
|
background-color: var(--primary-400);
|
|
transition: all ease 0.0s;
|
|
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35);
|
|
}
|
|
}
|
|
a.disabled {
|
|
background-color: var(--surface-500);
|
|
border: 1px solid var(--surface-400);
|
|
color: var(--surface-900);
|
|
}
|
|
}
|
|
.margin-top5 {
|
|
margin-top: 5px;
|
|
}
|
|
.regular-button {
|
|
-webkit-user-drag: none;
|
|
margin-top: 8px;
|
|
margin-bottom: 8px;
|
|
margin-right: 10px;
|
|
background-color: var(--primary-500);
|
|
border-radius: 3px;
|
|
border: 1px solid var(--primary-600);
|
|
color: #000;
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
transition: all ease 0.2s;
|
|
padding: 0 9px;
|
|
line-height: 28px;
|
|
user-select: none;
|
|
&:hover {
|
|
background-color: var(--primary-400);
|
|
}
|
|
}
|
|
.regular-button.pushed {
|
|
background-color: var(--primary-400);
|
|
color: var(--pushedButton-fontColor);
|
|
border-radius: 3px;
|
|
}
|
|
.danger-button {
|
|
-webkit-user-drag: none;
|
|
margin-top: 8px;
|
|
margin-bottom: 8px;
|
|
margin-right: 10px;
|
|
background-color: var(--error-500);
|
|
border-radius: 3px;
|
|
border: 1px solid var(--error-600);
|
|
color: #fff;
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
transition: all ease 0.2s;
|
|
padding: 0 9px;
|
|
line-height: 28px;
|
|
user-select: none;
|
|
&:hover {
|
|
background-color: var(--error-400);
|
|
}
|
|
}
|
|
.danger-button.pushed {
|
|
background-color: var(--error-400);
|
|
color: #fff;
|
|
border-radius: 3px;
|
|
}
|
|
.small {
|
|
width: auto;
|
|
position: relative;
|
|
a {
|
|
padding: 3px 4px 4px 4px;
|
|
text-align: center;
|
|
background-color: var(--surface-500);
|
|
border-radius: 3px;
|
|
color: var(--surface-900);
|
|
color: #fff;
|
|
font-weight: 600;
|
|
font-size: 11px;
|
|
line-height: 11px;
|
|
display: block;
|
|
transition: all ease 0.2s;
|
|
&:hover {
|
|
background-color: var(--primary-600);
|
|
color: #000;
|
|
border: 1px solid var(--primary-500);
|
|
transition: all ease 0.2s;
|
|
}
|
|
&:active {
|
|
background-color: var(--primary-600);
|
|
transition: all ease 0.0s;
|
|
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35);
|
|
}
|
|
}
|
|
}
|
|
.green {
|
|
a {
|
|
background-color: var(--primary-500);
|
|
color: #000;
|
|
border: 1px solid var(--primary-600);
|
|
transition: all ease 0.2s;
|
|
&:hover {
|
|
background-color: var(--primary-400);
|
|
border: 1px solid var(--primary-600);
|
|
color: #000;
|
|
transition: all ease 0.2s;
|
|
}
|
|
}
|
|
}
|
|
table {
|
|
width: 100%;
|
|
tr {
|
|
&:last-child {
|
|
td {
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.third {
|
|
width: 33%;
|
|
}
|
|
.gps_false {
|
|
background-color: var(--error-500);
|
|
padding: 1px 7px 2px 7px;
|
|
border-radius: 3px;
|
|
color: #FFFFFF;
|
|
font-size: 11px;
|
|
margin-left: 3px;
|
|
}
|
|
.gps_true {
|
|
background-color: var(--primary-500);
|
|
padding: 1px 7px 2px 7px;
|
|
border-radius: 3px;
|
|
color: #FFFFFF;
|
|
font-size: 11px;
|
|
margin-left: 3px;
|
|
}
|
|
.tab-setup {
|
|
height: fit-content;
|
|
position: relative;
|
|
}
|
|
.tab-landing {
|
|
height: fit-content;
|
|
position: relative;
|
|
}
|
|
.tab-adjustments {
|
|
height: fit-content;
|
|
position: relative;
|
|
}
|
|
.tab-auxiliary {
|
|
height: fit-content;
|
|
position: relative;
|
|
}
|
|
.tab-cli {
|
|
height: fit-content;
|
|
position: relative;
|
|
}
|
|
.tab-configuration {
|
|
height: fit-content;
|
|
position: relative;
|
|
}
|
|
.tab-failsafe {
|
|
height: fit-content;
|
|
position: relative;
|
|
}
|
|
.tab-firmware_flasher {
|
|
height: fit-content;
|
|
position: relative;
|
|
}
|
|
.tab-gps {
|
|
height: fit-content;
|
|
position: relative;
|
|
}
|
|
.tab-help {
|
|
height: fit-content;
|
|
position: relative;
|
|
}
|
|
.tab-led-strip {
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
.tab-logging {
|
|
height: fit-content;
|
|
position: relative;
|
|
}
|
|
.tab-modes {
|
|
height: fit-content;
|
|
position: relative;
|
|
}
|
|
.tab-motors {
|
|
height: fit-content;
|
|
position: relative;
|
|
}
|
|
.tab-pid_tuning {
|
|
height: fit-content;
|
|
position: relative;
|
|
}
|
|
.tab-ports {
|
|
height: fit-content;
|
|
position: relative;
|
|
}
|
|
.tab-receiver {
|
|
height: fit-content;
|
|
position: relative;
|
|
}
|
|
.tab-sensors {
|
|
height: fit-content;
|
|
position: relative;
|
|
}
|
|
.tab-servos {
|
|
height: fit-content;
|
|
position: relative;
|
|
}
|
|
.tab-osd {
|
|
height: fit-content;
|
|
position: relative;
|
|
}
|
|
.tab-power {
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
.tab-vtx {
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
.properties {
|
|
width: 800px;
|
|
dl {
|
|
width: 200px;
|
|
}
|
|
dd {
|
|
width: 400px;
|
|
height: auto;
|
|
}
|
|
}
|
|
.colorToggle {
|
|
background-color: var(--error-500);
|
|
padding: 2px 5px;
|
|
border-radius: 3px;
|
|
color: #fff;
|
|
font-size: 10px;
|
|
&.low {
|
|
background-color: var(--surface-500);
|
|
}
|
|
&.notReady {
|
|
background-color: var(--primary-400);
|
|
}
|
|
&.locked {
|
|
background-color: var(--warning-500);
|
|
}
|
|
&.ready {
|
|
background-color: var(--success-500);
|
|
}
|
|
}
|
|
.buildInfoBtn {
|
|
position: relative;
|
|
margin: 4px;
|
|
float: right;
|
|
a {
|
|
padding: 2px 5px 2px 5px;
|
|
text-align: center;
|
|
background-color: var(--primary-500);
|
|
border-radius: 4px;
|
|
border: 1px solid var(--primary-600);
|
|
color: #000;
|
|
font-weight: 600;
|
|
font-size: 10px;
|
|
line-height: 11px;
|
|
display: block;
|
|
transition: all ease 0.2s;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
&:hover {
|
|
background-color: var(--primary-400);
|
|
color: #000;
|
|
transition: all ease 0.2s;
|
|
text-decoration: none;
|
|
}
|
|
&:active {
|
|
background-color: var(--primary-400);
|
|
transition: all ease 0.0s;
|
|
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35);
|
|
}
|
|
}
|
|
a.disabled {
|
|
background-color: var(--surface-500);
|
|
border: 1px solid var(--surface-400);
|
|
color: var(--surface-900);
|
|
}
|
|
}
|
|
.buildInfoClassOptions {
|
|
margin-bottom: 0px;
|
|
margin-top: 3px;
|
|
float: right;
|
|
background-color: grey;
|
|
padding: 2px 5px 2px 5px;
|
|
border-radius: 4px;
|
|
color: #fff;
|
|
font-size: 10px;
|
|
}
|
|
.cf_tooltiptext {
|
|
display: none;
|
|
}
|
|
.bottomStatusIcons {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background-color: var(--surface-300);
|
|
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(--surface-400);
|
|
font-weight: 600;
|
|
font-size: 10pt;
|
|
cursor: pointer;
|
|
}
|
|
button.active {
|
|
background-color: var(--primary-500);
|
|
border: 1px solid var(--primary-600);
|
|
color: #000;
|
|
}
|
|
.jBox-Tooltip {
|
|
max-width: 180px;
|
|
}
|
|
.jBox-Widetip {
|
|
max-width: 300px;
|
|
}
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
.darkgrey_box {
|
|
background-color: var(--surface-500);
|
|
color: white;
|
|
}
|
|
.topBorderLine {
|
|
border-top: 1px solid var(--surface-400);
|
|
padding-top: 5px;
|
|
}
|
|
.jBox-container {
|
|
background: var(--surface-400);
|
|
border: 2px solid var(--primary-500);
|
|
color: var(--text);
|
|
border-radius: 0.5rem !important;
|
|
}
|
|
.jBox-content {
|
|
padding: 0.5rem;
|
|
}
|
|
.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: 2px solid var(--primary-500);
|
|
background-color: var(--primary-500);
|
|
}
|
|
}
|
|
#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(--surface-300);
|
|
border-color: var(--surface-400);
|
|
box-shadow: none;
|
|
border-radius: 0.5rem !important;
|
|
height: 1.5rem;
|
|
}
|
|
.noUi-handle {
|
|
background: var(--surface-400);
|
|
border-color: var(--surface-400);
|
|
box-shadow: none;
|
|
&:before {
|
|
background-color: var(--surface-600);
|
|
top: 0.55rem;
|
|
}
|
|
&:after {
|
|
background-color: var(--surface-600);
|
|
top: 0.55rem;
|
|
}
|
|
height: 2.2rem !important;
|
|
cursor: pointer;
|
|
}
|
|
.noUi-background {
|
|
background: var(--surface-300);
|
|
box-shadow: none;
|
|
}
|
|
.noUi-connect {
|
|
box-shadow: none;
|
|
}
|
|
.noUi-pips-horizontal {
|
|
padding: 1rem 0 !important;
|
|
height: 4rem;
|
|
}
|
|
.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);
|
|
}
|
|
}
|
|
.grid-box {
|
|
display: grid;
|
|
gap: 1rem;
|
|
// templates for 1-12 columns
|
|
&.col1 {
|
|
grid-template-columns: repeat(1, 1fr);
|
|
}
|
|
&.col2 {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
&.col3 {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
&.col4 {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
&.col5 {
|
|
grid-template-columns: repeat(5, 1fr);
|
|
}
|
|
&.col6 {
|
|
grid-template-columns: repeat(6, 1fr);
|
|
}
|
|
&.col7 {
|
|
grid-template-columns: repeat(7, 1fr);
|
|
}
|
|
&.col8 {
|
|
grid-template-columns: repeat(8, 1fr);
|
|
}
|
|
&.col9 {
|
|
grid-template-columns: repeat(9, 1fr);
|
|
}
|
|
&.col10 {
|
|
grid-template-columns: repeat(10, 1fr);
|
|
}
|
|
&.col11 {
|
|
grid-template-columns: repeat(11, 1fr);
|
|
}
|
|
&.col12 {
|
|
grid-template-columns: repeat(12, 1fr);
|
|
}
|
|
// templates for individual columns
|
|
.col-span-1 {
|
|
grid-column: span 1;
|
|
}
|
|
.col-span-2 {
|
|
grid-column: span 2;
|
|
}
|
|
.col-span-3 {
|
|
grid-column: span 3;
|
|
}
|
|
.col-span-4 {
|
|
grid-column: span 4;
|
|
}
|
|
.col-span-5 {
|
|
grid-column: span 5;
|
|
}
|
|
.col-span-6 {
|
|
grid-column: span 6;
|
|
}
|
|
.col-span-7 {
|
|
grid-column: span 7;
|
|
}
|
|
.col-span-8 {
|
|
grid-column: span 8;
|
|
}
|
|
.col-span-9 {
|
|
grid-column: span 9;
|
|
}
|
|
.col-span-10 {
|
|
grid-column: span 10;
|
|
}
|
|
.col-span-11 {
|
|
grid-column: span 11;
|
|
}
|
|
.col-span-12 {
|
|
grid-column: span 12;
|
|
}
|
|
[class^="col-span-"] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
}
|
|
@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-size: 0;
|
|
padding: 0.1rem 0.5rem;
|
|
}
|
|
}
|
|
}
|
|
.tab_container {
|
|
width: 3.5rem;
|
|
}
|
|
#content {
|
|
width: calc(100% - 3.5rem);
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
.default_btn {
|
|
margin-bottom: 10px;
|
|
}
|
|
.gui_box .gui_box_titlebar {
|
|
font-size: 12px;
|
|
height: 24px;
|
|
padding-bottom: 0;
|
|
margin-bottom: 5px;
|
|
float: left;
|
|
.switchery {
|
|
margin-top: -3px;
|
|
}
|
|
.helpicon {
|
|
margin-top: 1px;
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
.toolbar_fixed_bottom {
|
|
.content_wrapper {
|
|
height: fit-content;
|
|
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: "";
|
|
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;
|
|
.switchery {
|
|
margin-top: -3px;
|
|
}
|
|
}
|
|
.spacer_box_title {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
padding-top: 3px;
|
|
margin-bottom: 0;
|
|
float: left;
|
|
}
|
|
.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 (max-width: 575px) {
|
|
#tabs li a {
|
|
font-size: 13px;
|
|
padding-top: 0.2rem;
|
|
padding-bottom: 0.25rem;
|
|
padding-left: 2.5rem;
|
|
}
|
|
#side_menu_swipe {
|
|
display: block;
|
|
}
|
|
.visible-on-desktop-only {
|
|
display: none !important;
|
|
}
|
|
.headerbar {
|
|
// max-height: 10rem;
|
|
height: unset;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
transition: all 0.3s;
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 0;
|
|
.web-port-picker {
|
|
transition: all 0.2s;
|
|
// min-height: 0;
|
|
max-height: 0;
|
|
overflow-y: hidden;
|
|
padding-top: 0 !important;
|
|
margin-left: 0 !important;
|
|
width: 100%;
|
|
justify-content: end;
|
|
}
|
|
}
|
|
.headerbar.expand {
|
|
.web-port-picker {
|
|
max-height: 4.5rem;
|
|
#portsinput {
|
|
height: 4.5rem;
|
|
}
|
|
}
|
|
}
|
|
.headerbar.expand2 {
|
|
height: fit-content;
|
|
}
|
|
#firmware-virtual-option {
|
|
margin-right: 0;
|
|
max-width: calc(100% - 13rem);
|
|
#firmware-version-dropdown {
|
|
width: 100%;
|
|
}
|
|
}
|
|
#port-override-option {
|
|
label {
|
|
flex-direction: column;
|
|
align-items: start !important;
|
|
}
|
|
}
|
|
#menu_btn {
|
|
display: block;
|
|
order: 1;
|
|
}
|
|
#reveal_btn {
|
|
display: block;
|
|
order: 4;
|
|
}
|
|
#header_btns {
|
|
margin-left: auto;
|
|
order: 3;
|
|
gap: 1rem;
|
|
}
|
|
.firmware_b, .connect_b {
|
|
height: fit-content !important;
|
|
width: fit-content !important;
|
|
a {
|
|
height: 2rem !important;
|
|
width: 2rem !important;
|
|
background-size: 1.5rem !important;
|
|
background-position: center !important;
|
|
}
|
|
}
|
|
.web-port-picker {
|
|
order: 5;
|
|
}
|
|
#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;
|
|
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;
|
|
}
|
|
#portsinput {
|
|
display: flex;
|
|
gap: 5px;
|
|
margin-right: 0;
|
|
}
|
|
.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: var(--surface-200);
|
|
padding: 0.25rem;
|
|
}
|
|
#scrollicon {
|
|
display: none;
|
|
}
|
|
.tab_container {
|
|
position: fixed;
|
|
z-index: 2000;
|
|
top: 0;
|
|
left: -100%;
|
|
bottom: 0;
|
|
width: 50% !important;
|
|
transition: all 0.3s;
|
|
padding: 1rem;
|
|
}
|
|
.tab_container.reveal {
|
|
left: 0;
|
|
}
|
|
#content {
|
|
width: 100% !important;
|
|
}
|
|
.info {
|
|
width: 100%;
|
|
flex: unset !important;
|
|
}
|
|
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_expand_btn {
|
|
display: block;
|
|
}
|
|
.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: 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: 575px) {
|
|
.sm-min {
|
|
display: none !important;
|
|
}
|
|
}
|