diff --git a/src/css/tabs/firmware_flasher.less b/src/css/tabs/firmware_flasher.less index f17b4184..55a247df 100644 --- a/src/css/tabs/firmware_flasher.less +++ b/src/css/tabs/firmware_flasher.less @@ -8,38 +8,6 @@ margin-top: 8px; } } - .info { - position: relative; - flex-grow: 100; - .progressLabel.valid { - background-color: var(--success-500); - border-radius: 5px; - } - .progressLabel.invalid { - background-color: var(--error-500); - border-radius: 5px; - } - .progressLabel.actionRequired { - background-color: var(--warning-500); - border-radius: 5px; - } - .progress { - width: 100%; - height: 26px; - border-radius: 5px; - border: 1px solid var(--surface-500); - -webkit-appearance: none; - &::-webkit-progress-bar { - background-color: var(--text); - border-radius: 4px; - box-shadow: inset 0px 0px 5px #2f2f2f; - } - &::-webkit-progress-value { - background-color: #f86008; - border-radius: 4px; - } - } - } .buildProgress { border-radius: 4px; appearance: none; @@ -72,6 +40,9 @@ .flash_on_connect_wrapper { display: none; } + #flash_manual_baud_rate { + margin-left: 0.5rem; + } } .cf_table { td { @@ -113,7 +84,9 @@ color: var(--surface-50); font-size: 10px; border-radius: 999px; - transition: color 200ms, background-color 200ms; + transition: + color 200ms, + background-color 200ms; display: flex; align-items: center; gap: 0.5rem; @@ -140,6 +113,9 @@ flex-direction: row-reverse; gap: 1rem; } + #customDefines { + width: calc(100% - 2rem) !important; + } } .release_info, .build_configuration { @@ -193,9 +169,33 @@ } } } -#customDefines { - width: calc(100% - 2rem) !important; -} -#flash_manual_baud_rate { - margin-left: 0.5rem; + +.content_toolbar { + .info { + .progressLabel { + &.valid { + background-color: var(--success-600); + border-radius: 5px; + } + &.invalid { + background-color: var(--error-500); + border-radius: 5px; + } + &.actionRequired { + background-color: var(--warning-500); + border-radius: 5px; + } + } + .progress { + width: 100%; + height: 26px; + border-radius: 5px; + border: 1px solid var(--surface-500); + -webkit-appearance: none; + &::-webkit-progress-value { + background-color: var(--success-600); + border-radius: 4px; + } + } + } }