120 lines
2.2 KiB
SCSS
120 lines
2.2 KiB
SCSS
$bg-color: #859094;
|
|
$bg-dark-color: #7a8386;
|
|
$main-border-color: #6b7578;
|
|
$main-font-color: #101e24;
|
|
$selected-border-color: #09e7ca;
|
|
$selected-bg-color: #4d998f;
|
|
$warning-border-color: #aa093a;
|
|
$warning-bg-color: #6e545c;
|
|
$warning-selected-border-color: #ff044f;
|
|
$warning-selected-bg-color: #aa093a;
|
|
$warning-text-color: #ff1d61;
|
|
|
|
div {
|
|
display: block;
|
|
color: $main-font-color;
|
|
font-family: "Arial", Helvetica, sans-serif;
|
|
}
|
|
|
|
.numberinput {
|
|
width: 64px;
|
|
}
|
|
|
|
.instruction {
|
|
font-size: 12px;
|
|
margin: auto;
|
|
width: 50%;
|
|
border: 2px solid;
|
|
padding: 1px;
|
|
text-align: center;
|
|
}
|
|
|
|
#frameViewer {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.frame {
|
|
flex: 1;
|
|
width: 32px;
|
|
height: 32px;
|
|
max-width: 32px;
|
|
color: $main-font-color;
|
|
padding: 1px;
|
|
display: inline-block;
|
|
border: 2px solid $main-border-color;
|
|
background-color: $bg-dark-color;
|
|
|
|
&.warning {
|
|
border: 2px solid $warning-border-color;
|
|
background-color: $warning-bg-color;
|
|
}
|
|
&.selected {
|
|
border: 2px solid $selected-border-color;
|
|
background-color: $selected-bg-color;
|
|
&.warning {
|
|
border: 2px solid $warning-selected-border-color;
|
|
background-color: $warning-selected-bg-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.errorMessage {
|
|
font-size: 12px;
|
|
width: 50%;
|
|
border: 2px solid $warning-border-color;
|
|
padding: 1px;
|
|
background-color: $warning-bg-color;
|
|
}
|
|
|
|
.warningMessage {
|
|
display: block;
|
|
color: $warning-text-color;
|
|
background-color: $warning-bg-color;
|
|
font-family: "Arial", Helvetica, sans-serif;
|
|
}
|
|
|
|
body {
|
|
background-color: $bg-color;
|
|
}
|
|
|
|
#dropZone {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#canvasImage {
|
|
border: 2px solid $main-border-color;
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
.pinContainer {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.pinButtonContainer {
|
|
max-width: 10%;
|
|
flex: 1;
|
|
font-size: 12px;
|
|
border: 2px solid $main-border-color;
|
|
padding: 1px;
|
|
|
|
&.warning {
|
|
border: 2px solid $warning-border-color;
|
|
background-color: $warning-bg-color;
|
|
}
|
|
|
|
&.selected {
|
|
border: 2px solid $selected-border-color;
|
|
background-color: $selected-bg-color;
|
|
&.warning {
|
|
border: 2px solid $warning-selected-border-color;
|
|
background-color: $warning-selected-bg-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.removeButton {
|
|
background-color: rgb(158, 15, 34);
|
|
color: rgb(227, 227, 236);
|
|
}
|