frontend/css/farm_designer/farm_designer.scss
.farm-designer {
position: relative;
height: 100vh;
overflow: scroll;
.garden-map-legend {
@media screen and (max-width: 450px) {
&.panel-open {
display: none;
}
&.short-panel {
top: 35rem;
}
&.panel-closed {
top: 15rem;
}
}
}
}
.farm-designer-map {
display: inline-block;
min-width: 100%;
padding: 11rem 2rem 2rem 2rem; // at zoom = 1.0: 110px 20px 20px 20px
height: 100%;
overflow: visible;
&.panel-open {
padding: 11rem 2rem 2rem 46.8rem; // at zoom = 1.0: 110px 20px 20px 468px
}
&.short-panel {
padding: 35rem 2rem 2rem 2rem; // at zoom = 1.0: 350px 20px 20px 20px
}
transition: 0.2s ease;
&::-webkit-scrollbar {
display: none;
}
}
.drop-area {
svg {
width: 100%;
height: 100%;
overflow: visible;
text {
pointer-events: none;
}
text::selection {
background: none;
}
}
}
.drop-area-svg {
width: 100%;
height: 100%;
overflow: visible;
}
.drop-area-background a {
cursor: default !important;
}
.crop-drag-info-image {
width: 7rem;
height: 7rem;
padding: 1rem;
}
.plant-catalog-image {
width: 100%;
background-position: center center !important;
background-size: 158% !important;
background-color: $translucent;
height: 12rem;
border-radius: 5px;
}
.crop-search-result-wrapper {
max-height: calc(100vh - 19rem);
overflow-y: auto;
overflow-x: hidden;
margin-right: -10px;
padding-bottom: inherit;
.openfarm-search-results-wrapper {
display: grid;
gap: 2rem;
grid-template-columns: repeat(2, 1fr);
margin-left: 2.5rem;
margin-right: 2rem;
}
.plant-catalog-tile {
position: relative;
cursor: pointer;
text-align: center;
border-radius: 5px;
box-shadow: 0px 4px 7px 2px $translucent;
transition: transform 0.2s ease;
padding: 0;
&:hover {
box-shadow: 0px 5px 8px 2px rgba(0, 0, 0, 0.25);
transform: translateY(-1px);
}
label {
position: absolute;
left: 0;
bottom: -5px;
right: 0;
margin-top: 0 !important;
padding: 0.4rem 0.6rem 0.2rem;
background: linear-gradient(transparent, $translucent5);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
color: $white;
font-size: 1.2rem !important;
}
}
}
.thin-search-wrapper {
width: 100%;
.thin-search {
.spinner-container {
position: absolute;
top: 0;
right: 0;
width: 2rem;
height: 2rem;
padding: 0;
margin-right: 1rem;
}
.text-input-wrapper {
position: relative;
margin: 1rem;
border-bottom: 1px solid $dark_gray;
&:before,
&:after {
content: "";
position: absolute;
bottom: 0;
background: $dark_gray;
width: 1px;
height: 3px;
}
&:before {
left: 0;
}
&:after {
right: 0;
}
i {
font-size: 1.5rem;
}
.fa-search {
position: absolute;
top: 0.8rem;
left: 1rem;
cursor: default !important;
}
.fa-times {
position: absolute;
bottom: 0;
right: 0;
padding: 0.5rem;
color: $darkest_red;
font-size: 1.3rem;
&:hover {
color: $medium_dark_red;
}
}
.bp5-popover-wrapper {
position: absolute;
.bp5-popover-target {
width: 3rem;
}
}
.point-sort-menu {
width: 110px;
label {
margin-top: 0;
}
i {
cursor: pointer;
padding: 0.5rem;
color: $medium_light_gray;
&.selected {
font-weight: bold;
color: $dark_gray;
}
}
}
}
input {
background: transparent;
box-shadow: none !important;
padding-left: 3rem !important;
font-size: 1.4rem !important;
&:active,
&:focus {
background: transparent !important;
}
&::-webkit-input-placeholder {
color: $placeholder_gray;
}
}
}
}
.panel-content {
%panel-item-base {
text-align: right;
font-size: 1rem;
padding-right: 1rem;
line-height: 3rem;
float: right;
}
.plant-search-item,
.group-search-item {
cursor: pointer;
padding: 0.5rem 1rem;
img {
margin-right: 0.5rem;
height: 3rem;
width: 3rem;
}
&.quick-del {
&:hover {
background: lighten($red, 10%) !important;
&:after {
content: "x";
margin-left: 1rem;
color: $darkest_red;
font-weight: bold;
}
}
}
}
.curve-search-item-name,
.plant-search-item-name,
.group-search-item-name,
.regimen-search-item-name,
.saved-garden-search-item-name,
.weed-search-item-name,
.point-search-item-name {
display: inline-block;
white-space: nowrap;
max-width: 60%;
text-overflow: ellipsis;
overflow: hidden;
vertical-align: middle;
margin-left: 1rem;
}
.group-search-item-name {
margin-left: 0;
}
.plant-search-item-age {
@extend %panel-item-base;
}
.group-item-count {
@extend %panel-item-base;
padding-top: 0.6rem;
line-height: 1rem;
}
.weed-search-item,
.point-search-item {
cursor: pointer;
padding: 0.5rem 1rem;
.saucer {
display: inline-block;
height: 3rem;
width: 3rem;
vertical-align: middle;
margin-right: 0.25rem;
}
.quick-delete {
display: inline;
color: $dark_red;
&.hovered {
font-weight: bold;
}
}
}
.weed-search-item-info,
.point-search-item-info {
text-align: right;
font-size: 1rem;
padding-right: 1rem;
line-height: 3rem;
float: right;
}
.regimen-search-item-name,
.weed-search-item-name,
.point-search-item-name {
width: 40%;
margin-left: 1.25rem;
}
.tool-search-item,
.tool-slot-search-item {
line-height: 4rem;
cursor: pointer;
.row {
margin-left: 0.5rem;
margin-right: -25px;
}
.tool-search-item-icon,
.tool-slot-search-item-icon {
width: fit-content;
padding-left: 10px;
padding-right: 0;
svg {
vertical-align: middle;
}
}
.tool-search-item-name,
.tool-slot-search-item-name {
margin-left: 0;
p {
font-size: 1.3rem;
}
}
.tool-status,
.tool-slot-position-info {
padding: 0;
}
p {
font-size: 1rem;
line-height: 4rem;
&.tool-status,
&.tool-slot-position {
float: right;
}
}
}
.regimen-search-item {
position: relative;
cursor: pointer;
height: 3.5rem;
.regimen-search-item-name {
font-size: 1.2rem;
color: $dark_gray;
line-height: 3.5rem;
width: 80%;
}
.regimen-color {
display: inline-block;
vertical-align: middle;
.color-picker {
display: inline;
.saucer {
margin-left: 3rem;
width: 1.2rem;
height: 1.2rem;
}
}
}
}
.padding {
height: 6rem;
}
&.scrolled {
box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.1);
}
}
.hovered-plant-copy {
cursor: pointer;
transform-origin: center;
transform-box: fill-box;
}
.plant-link-wrapper {
&.is-chosen-true.is-editing-true {
cursor: -webkit-grab !important;
&:active {
cursor: -webkit-grabbing !important;
}
}
}
.weed-indicator.is-chosen-true,
.plant-indicator.is-chosen-true {
&.animate {
animation: plant-selection-pop 0.2s 1 cubic-bezier(0, 0, 0, 0.9), pulse-and-rotate 4s 0.2s infinite linear;
}
transform-origin: center;
transform-box: fill-box;
}
.tool-slot-indicator {
&.animate {
animation: pulse-and-rotate 4s 0.2s infinite linear;
}
transform-origin: center;
transform-box: fill-box;
}
.map-point {
cursor: pointer !important;
stroke-width: 2;
stroke-opacity: 0.3;
fill-opacity: 0.1;
text {
paint-order: stroke;
}
&.is-selected {
.point-radius {
&.animate {
animation: dashed-rotate 4s infinite linear;
}
transform-origin: center;
transform-box: fill-box;
}
}
}
.map-weed {
cursor: pointer !important;
}
.weed-image,
.plant-image {
transform-origin: bottom;
transform-box: fill-box;
&.animate {
&.new {
animation: plant-growth 0.25s cubic-bezier(0, 0, 0, 1.4);
}
}
}
.bug {
z-index: 10;
transform-origin: bottom;
transform-box: fill-box;
&.animate {
animation: plant-growth 0.25s cubic-bezier(0, 0, 0, 1.4);
}
&.dead {
z-index: 5;
pointer-events: none;
}
}
.soil-cloud {
&.new {
animation: soil-poof 0.5s cubic-bezier(0, 0, 0, 1);
}
transform-origin: center;
transform-box: fill-box;
}
.spread {
transform-origin: center;
transform-box: fill-box;
pointer-events: none;
&.animate {
animation: spread-pop 0.2s cubic-bezier(0, 0, 0, 1);
}
}
.logs-layer {
@keyframes capture-animation {
0% {
fill: rgba(255, 255, 240, 0.7);
stroke: rgba(20, 190, 230, 0.7);
}
100% {
fill: rgba(0, 0, 0, 0.02);
stroke: rgba(0, 0, 0, 0.02);
}
}
.img-full {
width: 100%;
height: 100%;
stroke-opacity: 1;
stroke-width: 4px;
stroke: rgba(20, 190, 230, 0.7);
fill: rgba(255, 255, 240, 0.7);
}
.capture,
.scan {
.img-scan {
visibility: hidden;
}
&.animate {
.img-full {
animation: capture-animation 2s ease forwards;
}
}
}
.scan {
.img-scan {
visibility: visible;
transform: translateX(25%);
width: 8%;
stroke-opacity: 0;
}
&.animate {
@keyframes scan-animation {
100% {
transform: translate(95%, 0);
}
}
.img-scan {
transform: none;
animation: scan-animation 3s linear alternate infinite;
}
}
}
}
.zones-layer {
[id*="zones-1D-"] {
stroke: $black;
stroke-width: 5;
}
[id*="zones-"] {
opacity: 0.1;
&.current {
opacity: 0.25;
fill: $white;
stroke: $white;
}
&:hover {
opacity: 0.15;
}
}
}
.virtual-bot-trail,
.virtual-peripherals {
pointer-events: none;
}
.water-spray {
&.animate {
animation-duration: 3s;
animation-iteration-count: infinite;
animation-name: water-spray-animation;
transform-origin: center;
transform-box: fill-box;
opacity: 0;
}
}
.delay-1 {
animation-delay: 1s;
}
.delay-2 {
animation-delay: 2s;
}
@keyframes water-spray-animation {
0% {
transform: scale(0.7) rotate(0deg);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.1) rotate(10deg);
opacity: 0;
}
}
.vacuum {
&.animate {
animation-duration: 3s;
animation-iteration-count: infinite;
animation-name: vacuum-animation;
transform-origin: center;
transform-box: fill-box;
opacity: 0;
}
}
@keyframes vacuum-animation {
0% {
transform: scale(1);
opacity: 0;
}
100% {
transform: scale(0);
opacity: 1;
}
}
.rotary {
&.animate {
animation-duration: 3s;
animation-iteration-count: infinite;
animation-name: rotary-animation;
transform-origin: center;
transform-box: fill-box;
opacity: 0;
}
}
@keyframes rotary-animation {
0% {
transform: scale(1);
opacity: 0;
}
100% {
transform: scale(0);
opacity: 1;
}
}
.saved-garden-indicator {
position: fixed;
top: 80px;
left: 50%;
z-index: 3;
padding: 2rem;
background: rgba(255, 255, 255, .75);
border-radius: 5px;
box-shadow: 0px 1px 4px #555;
text-align: center;
label {
display: block;
}
button {
margin: 0.5rem;
float: unset;
}
}
.garden-snapshot {
button {
&.pseudo-disabled {
cursor: not-allowed;
}
}
textarea {
font-size: 1.2rem;
}
}
.saved-garden-list {
.saved-garden-search-item {
padding: 0.25rem;
button {
margin-bottom: 1rem;
}
.saved-garden-info div {
height: 3rem;
line-height: 3rem;
cursor: pointer;
padding-right: 0;
span {
margin: 0;
pointer-events: none;
margin-left: 1rem;
}
p {
float: right;
line-height: 3rem;
text-align: center;
margin-right: 1rem;
}
}
}
}
.garden-map-legend {
position: fixed;
top: 110px;
right: -155px;
z-index: 3;
transition: all 0.4s ease;
&.active {
transform: translateX(-165px);
}
.content {
display: flex;
flex-direction: row-reverse;
.menu-content {
display: flex;
flex-direction: column;
flex-wrap: wrap;
max-width: 155px;
padding: 1rem;
background: rgba(255, 255, 255, .75);
border-radius: 5px;
box-shadow: 0px 1px 4px #555;
>*+* {
margin: auto;
margin-top: 0.75rem;
}
.zoom-buttons {
display: grid;
margin: auto;
width: 90%;
button {
margin: auto;
grid-row: 1;
grid-column: 2;
&.zoom-out {
grid-column: 1;
}
}
}
}
.z-display {
position: relative;
padding: 2rem;
padding-left: 3rem;
margin-right: 1.25rem;
background: rgba(255, 255, 255, .75);
border-radius: 5px;
box-shadow: 0px 1px 4px #555;
label {
position: absolute;
top: 0.5rem;
left: 44%;
}
.sliders {
height: 98%;
.bp5-slider {
height: 100%;
margin-left: 1rem;
}
.input-slider {
pointer-events: none;
.bp5-slider-handle {
left: 3.8px;
height: 8px;
width: 9px;
background: none;
box-shadow: none;
border: 1px solid $dark_gray;
border-radius: 2px;
.bp5-slider-label {
margin-left: -6px;
margin-top: -14px;
}
}
}
.data-slider {
.bp5-start {
&:first-of-type {
display: unset;
}
height: 5px;
}
.bp5-slider-label {
margin-left: -6rem;
opacity: 1;
}
}
}
}
}
.toggle-buttons,
.z-display-toggle {
fieldset {
display: flex;
align-items: center;
line-height: 2.75rem;
}
label {
margin: 0;
width: 100%;
}
button {
margin: 0;
width: 5rem;
}
}
.caret-menu-button {
display: inline;
font-weight: bold;
font-size: medium;
cursor: pointer;
span {
margin-left: 0.25rem;
}
}
.more-bugs,
.select-mode,
.map-settings,
.move-to-mode {
margin: auto;
margin-top: 1rem;
p {
text-align: center;
padding-top: 2rem;
}
}
.move-to-mode {
display: none;
@media screen and (max-width: 450px) {
display: block;
}
}
.menu-pullout {
position: absolute;
left: -4.5rem;
color: $white;
cursor: pointer;
transition: all 0.4s ease;
text-shadow: 0px 1px 1px #555;
&.active {
left: -4.5rem;
transform: rotate(180deg);
text-shadow: 1px 0px 0px #555;
&:hover {
left: -4.5rem;
span {
opacity: 0;
}
}
}
&:hover {
left: -5rem;
span {
opacity: 1;
}
}
span {
position: absolute;
top: 0.6rem;
left: -4.6rem;
transition-delay: 0.6s;
transition: all 0.4s ease;
opacity: 0;
}
}
.map-rotate-button {
text-align: center;
.fb-button {
float: none;
}
}
}
.map-plants-submenu,
.map-settings-submenu,
.farmbot-layer-submenu {
.bp5-popover-wrapper {
display: inline;
margin-left: 0.5rem;
}
.fb-toggle-button {
margin-left: 1rem;
}
}
.farmbot-origin {
margin: auto;
width: 120px;
&.xy-swap {
width: 60px;
.quadrant {
height: 48px;
}
}
.quadrants {
display: flex;
flex-wrap: wrap;
border: 1px solid $dark_gray;
}
.quadrant {
display: inline-block;
position: relative;
background-image: linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, 0.05) 2px, transparent 2px), linear-gradient(90deg, rgba(0, 0, 0, 0.05) 2px, transparent 2px);
background-size: 4px 4px, 4px 4px, 100px 100px, 100px 100px;
cursor: pointer;
border: 1px solid $dark_gray;
width: 50%;
height: 24px;
transition: all 0.2s ease-in-out;
&:hover {
background-color: rgba(0, 0, 0, 0.1);
}
&.selected {
box-shadow: inset 0 0 8px $dark_gray;
} // Quadrant 1
&:nth-child(2) {
&:before {
top: 0;
right: 0;
}
&:after {
top: 8px;
right: 16px;
}
} // Quadrant 2
&:nth-child(1) {
&:before {
top: 0;
left: 0;
}
&:after {
top: 8px;
left: 16px;
}
} // Quadrant 3
&:nth-child(3) {
&:before {
left: 0;
bottom: 0;
}
&:after {
left: 16px;
bottom: 8px;
}
} // Quadrant 4
&:nth-child(4) {
&:before {
bottom: 0;
right: 0;
}
&:after {
bottom: 8px;
right: 16px;
}
}
&:before {
content: "";
position: absolute;
background: $black;
width: 8px;
height: 8px;
border-radius: 50%;
}
&:after {
content: "";
position: absolute;
background: $green;
width: 8px;
height: 8px;
border-radius: 50%;
}
}
}
.map-plants-submenu,
.map-settings-submenu,
.map-points-submenu {
display: flex;
flex-direction: column;
fieldset {
display: flex;
margin-top: 0;
flex-direction: column;
align-items: center;
}
label {
margin-top: 0;
}
button {
margin: auto;
}
.fb-toggle-button {
margin-left: 1rem;
}
}
.image-filter-menu {
label {
margin-top: 0 !important;
}
th {
text-align: center;
label {
margin: 0;
line-height: unset !important;
}
}
input {
background: $white;
}
.fa-step-backward,
.fa-caret-left,
.fa-caret-right,
.fa-step-forward {
font-weight: bold;
vertical-align: middle;
}
.fa-caret-left,
.fa-caret-right {
font-size: 1.4rem;
}
.fa-step-backward,
.fa-step-forward {
font-size: 1rem;
}
.fa-step-backward,
.fa-caret-left {
margin-right: 0.1rem;
}
.fa-caret-right,
.fa-step-forward {
margin-left: 0.1rem;
}
}
.image-options {
.image-filter-menu {
margin-bottom: 1rem;
}
.non-layer-config-toggle {
margin-left: 1rem;
margin-right: 1rem;
}
.bp5-popover-wrapper {
display: inline;
margin-left: 0.5rem;
}
.fb-toggle-button {
margin-left: 1rem;
}
}
.sliders {
display: inline-block;
position: relative;
width: 100%;
margin-bottom: 3rem;
margin-top: 1rem;
.bp5-slider {
margin-left: 3rem;
margin-top: 1rem;
width: 80%;
}
&.vertical {
.bp5-slider {
margin-top: 0;
}
}
.bp5-slider-label {
white-space: nowrap;
text-align: center;
&:empty {
display: none;
}
}
.data-slider {
pointer-events: none;
.bp5-slider-axis,
.bp5-slider-track {
display: none;
}
.bp5-slider-label {
box-shadow: none;
}
.bp5-start {
&:first-of-type {
display: none;
}
top: 0.53rem;
width: 0.5px;
background: transparentize($dark_gray, 0.75);
box-shadow: none;
height: 0.55rem;
border-radius: 0;
}
&.vertical {
.bp5-start {
top: unset;
left: 0.53rem;
height: 0.5px;
width: 0.55rem;
border-radius: 0;
}
}
}
.input-slider {
position: absolute;
top: 0;
}
}
.profile-viewer {
position: fixed;
bottom: 0;
z-index: 2;
width: calc(100% - 450px);
background: #e5e5e5;
transition: transform 0.5s ease-out;
box-shadow: 0 0 1px rgba(0, 0, 0, .3);
transform: translateY(10rem) translateX(450px);
&.panel-closed {
width: 100%;
transform: translateY(10rem);
}
&.none-chosen {
transform: translateY(21rem) translateX(450px);
&.panel-closed {
transform: translateY(21rem);
}
}
@media screen and (max-width: 450px) {
&.panel-open {
display: none;
}
}
&.open {
transform: translateY(0) translateX(450px);
&.panel-closed {
transform: translateY(0);
}
.profile-button {
i {
line-height: 6rem;
}
}
}
.profile-button {
margin: auto;
cursor: pointer;
margin-top: -3rem;
border-radius: 50%;
width: 6rem;
height: 6rem;
background: $magenta;
transition: background-color 0.3s ease-out;
text-align: center;
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, .3);
&:hover {
background: lighten($magenta, 5%);
}
i {
color: $off_white;
line-height: 3.25rem;
font-size: 2rem;
transition: line-height 0.5s ease-out;
}
}
.profile-content {
label {
display: block;
margin: auto;
margin-top: 1rem;
margin-bottom: 0.5rem;
text-align: center;
}
.no-profile {
height: 12.5rem;
text-align: center;
margin-top: 1.5rem;
}
.left-label,
.right-label {
position: absolute;
top: 50%;
font-weight: bold;
}
.left-label {
left: 2rem;
}
.right-label {
right: 2rem;
}
svg {
display: block;
margin: auto;
height: 10rem;
width: 90%;
border-radius: 5px;
padding: 1rem;
margin-bottom: 1rem;
background: #fafafa;
box-shadow: 0 0 4px rgba(0, 0, 0, .1);
&.expand {
height: unset;
max-height: 60vh;
}
}
.profile-options {
width: 100%;
height: 4rem;
text-align: center;
padding-top: 1rem;
padding-bottom: 1rem;
background: #f2f2f2;
box-shadow: 0px 0px 1px 0px #666666;
button {
display: inline;
float: none;
margin-right: 3rem;
}
label {
display: inline;
margin-right: 0.5rem;
line-height: 2rem;
vertical-align: text-top;
}
input {
height: 2rem !important;
width: 5rem;
margin-right: 3rem;
}
}
}
}