AnimationTool/app/stylesheets/main.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);
}