mirror of
https://github.com/balena-io/etcher.git
synced 2025-07-21 02:06:33 +00:00
feat(GUI): use design background and drive size ordering (#2341)
We use the new design background color, and order the drive step size in accordance with the new design as well. Related: https://github.com/resin-io/etcher/issues/2310 Change-Type: patch Changelog-Entry: Use new design background color and drive step size ordering.
This commit is contained in:
parent
f6ce603e45
commit
35729fc36b
@ -15,7 +15,7 @@
|
||||
*/
|
||||
|
||||
.page-main {
|
||||
margin-top: 50px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
svg-icon > img[disabled] {
|
||||
@ -115,7 +115,8 @@ svg-icon > img[disabled] {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.page-main div.step-fill {
|
||||
.page-main div.step-fill,
|
||||
.page-main span.step-fill {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
@ -140,13 +141,11 @@ svg-icon > img[disabled] {
|
||||
align-items: center;
|
||||
height: 39px;
|
||||
width: 100%;
|
||||
margin-right: 4.5px;
|
||||
font-weight: bold;
|
||||
color: $palette-theme-primary-foreground;
|
||||
}
|
||||
|
||||
.page-main .step-size {
|
||||
margin-right: 4.5px;
|
||||
color: $palette-theme-dark-disabled-foreground;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
@ -72,19 +72,22 @@
|
||||
<!-- middleEllipsis errors on undefined, therefore fallback to empty string -->
|
||||
{{ drive.getDrivesTitle() | middleEllipsis:20 }}
|
||||
</span>
|
||||
<span
|
||||
ng-if="main.selection.getSelectedDevices().length <= 1"
|
||||
class="step-drive step-size">
|
||||
{{ drive.getDrivesSubtitle() }}
|
||||
</span>
|
||||
<span class="step-drive step-warning glyphicon glyphicon-exclamation-sign"
|
||||
uib-tooltip="{{ main.constraints.getListDriveImageCompatibilityStatuses(main.selection.getSelectedDrives(), main.selection.getImage())[0].message }}"
|
||||
ng-show="main.constraints.hasListDriveImageCompatibilityStatus(main.selection.getSelectedDrives(), main.selection.getImage())"></span>
|
||||
<button class="button button-link step-footer"
|
||||
tabindex="{{ main.selection.hasDrive() ? 2 : -1 }}"
|
||||
ng-hide="main.state.isFlashing() || !drive.shouldShowDrivesButton()"
|
||||
ng-click="drive.reselectDrive()">Change</button>
|
||||
<span
|
||||
ng-if="main.selection.getSelectedDevices().length <= 1"
|
||||
ng-class="{
|
||||
'step-fill': !drive.shouldShowDrivesButton()
|
||||
}"
|
||||
class="step-drive step-size">
|
||||
{{ drive.getDrivesSubtitle() }}
|
||||
</span>
|
||||
</div>
|
||||
<button class="button button-link step-footer"
|
||||
tabindex="{{ main.selection.hasDrive() ? 2 : -1 }}"
|
||||
ng-hide="main.state.isFlashing() || !drive.shouldShowDrivesButton()"
|
||||
ng-click="drive.reselectDrive()">Change</button>
|
||||
</div>
|
||||
<div ng-if="main.selection.getSelectedDevices().length > 1"
|
||||
ng-class="{
|
||||
|
@ -15,7 +15,7 @@
|
||||
*/
|
||||
|
||||
$palette-theme-dark-foreground: #fff;
|
||||
$palette-theme-dark-background: #535760;
|
||||
$palette-theme-dark-background: #4d5057;
|
||||
$palette-theme-light-foreground: #666;
|
||||
$palette-theme-light-background: #fff;
|
||||
$palette-theme-dark-soft-foreground: #ddd;
|
||||
|
@ -5964,10 +5964,10 @@ button.close {
|
||||
* limitations under the License.
|
||||
*/
|
||||
html {
|
||||
background-color: #535760; }
|
||||
background-color: #4d5057; }
|
||||
|
||||
body {
|
||||
background-color: #535760; }
|
||||
background-color: #4d5057; }
|
||||
|
||||
.checkbox input[type="checkbox"] {
|
||||
position: initial;
|
||||
@ -6045,7 +6045,7 @@ body {
|
||||
padding: 8px 25px; }
|
||||
|
||||
.label-inset {
|
||||
background-color: #3b3e45;
|
||||
background-color: #35373c;
|
||||
color: #919191; }
|
||||
|
||||
.label-danger {
|
||||
@ -6581,7 +6581,8 @@ svg-icon > img[disabled] {
|
||||
.page-main .step-drive.glyphicon, .page-main .step-drive.tick {
|
||||
margin-top: 1px; }
|
||||
|
||||
.page-main div.step-fill {
|
||||
.page-main div.step-fill,
|
||||
.page-main span.step-fill {
|
||||
margin-top: 25px; }
|
||||
|
||||
.page-main .step-drive.step-list::-webkit-scrollbar {
|
||||
@ -6600,12 +6601,10 @@ svg-icon > img[disabled] {
|
||||
align-items: center;
|
||||
height: 39px;
|
||||
width: 100%;
|
||||
margin-right: 4.5px;
|
||||
font-weight: bold;
|
||||
color: #fff; }
|
||||
|
||||
.page-main .step-size {
|
||||
margin-right: 4.5px;
|
||||
color: #787c7f;
|
||||
margin-top: 10px; }
|
||||
|
||||
@ -6749,7 +6748,7 @@ svg-icon > img[disabled] {
|
||||
position: absolute;
|
||||
top: 125px;
|
||||
left: 0;
|
||||
background-color: #535760;
|
||||
background-color: #4d5057;
|
||||
color: #fff;
|
||||
font-weight: 300; }
|
||||
.page-finish .fallback-banner .caption {
|
||||
|
Loading…
x
Reference in New Issue
Block a user