wabbajack/Wabbajack.App.Blazor/Pages/Install/Configure.razor.scss
Unnoen 47ffa30222
Restructure installing stage into three pages. Changed some design.
Added getBlobUrlFromStream JavaScript function so we can reuse the URL.
2022-01-27 18:55:07 +11:00

116 lines
2.0 KiB
SCSS

@import "../../Shared/Globals.scss";
$checkbox-background: rgba(255, 255, 255, 0.2);
$checkbox-background-hover: darkgrey;
$checkbox-background-checked: $accent-color;
$checkbox-size: 0.75rem;
@mixin path-span {
display: block;
height: 2rem;
padding: 0.25rem;
margin: 0.25rem;
white-space: pre;
cursor: pointer;
text-overflow: ellipsis;
overflow: hidden;
}
#content {
display: flex;
height: 100%;
align-content: center;
justify-content: space-around;
align-items: center;
color: white;
flex-direction: column;
.install-background {
position: absolute;
width: calc(100% - #{$sidebar-width});
height: calc(100% - #{$header-height});
filter: blur(25px) brightness(50%);
z-index: -1;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.list {
display: flex;
flex: 1;
overflow: hidden;
align-items: center;
.left-side, .right-side {
flex: 1;
margin: 1rem;
}
}
.logger-container {
height: 200px;
width: 100%;
padding: 0.5rem;
background: rgba(0, 0, 0, 0.2);
color: lightgrey;
border: solid 1px black;
}
.settings {
font-size: 0.85rem;
display: flex;
align-items: center;
width: 100%;
padding: 1rem;
backdrop-filter: brightness(0.5);
.locations {
display: flex;
flex-direction: row;
flex: 1;
overflow: hidden;
.labels {
span {
@include path-span;
}
}
.paths {
flex: 1;
margin-left: 1rem;
overflow: hidden;
span {
@include path-span;
border: solid 1px rgba(255, 255, 255, 0.3);
}
}
}
.options {
display: flex;
flex-flow: row wrap;
flex-direction: column;
margin-left: 2rem;
}
.install {
display: flex;
flex-direction: column;
align-items: center;
margin: 0.5rem;
cursor: pointer;
img {
width: 5rem;
height: 5rem;
}
}
}
}