frontend/css/image_flipper.scss
.image-flipper {
position: relative;
margin-top: 1rem;
}
.bp5-overlay {
.image-flipper {
z-index: 20;
margin: auto;
width: fit-content;
margin-top: 3%;
.no-flipper-image-container,
.flipper-image {
height: 80vh;
width: 80vw;
text-align: center;
.image-flipper-image,
svg {
height: 100%;
max-width: unset;
max-height: unset;
min-height: unset;
}
}
.image-flipper-left,
.image-flipper-right {
width: 8rem;
i {
font-size: 4rem;
}
}
.no-flipper-image-container {
background: $black;
}
.placeholder {
opacity: 1 !important;
}
p {
color: $white;
}
}
}
.desktop-only {
@media screen and (max-width: 767px) {
display: none;
}
}
.image-jsx {
overflow: hidden;
}
.image-flipper-image {
margin: auto;
max-width: 100%;
max-height: 650px;
min-height: 200px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.image-flipper-left {
left: -5px;
background: linear-gradient(to left, transparent, $translucent3);
&:hover {
background: linear-gradient(to left, transparent, $translucent4);
}
}
.image-flipper-right {
right: -5px;
background: linear-gradient(to right, transparent, $translucent3);
&:hover {
background: linear-gradient(to right, transparent, $translucent4);
}
}
.image-flipper-left,
.image-flipper-right {
position: absolute;
top: -5px;
bottom: -5px;
width: 4rem;
text-align: center;
i {
color: $white;
font-size: 2rem;
text-shadow: 0px 0px 5px $translucent3;
}
}
.no-flipper-image-container {
background: $panel_light_gray;
img {
opacity: 0.4;
}
p {
position: absolute;
left: 0;
right: 0;
z-index: 1;
font-size: 1.5rem;
text-align: center;
padding: 20% 1rem 0;
line-height: 2.4rem;
margin-left: 50px;
margin-right: 50px;
}
}
.photos-footer {
display: flex;
position: relative;
justify-content: space-between;
background: $black;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
height: 3.5rem;
padding-top: 0.5rem;
.footer-text {
margin-top: -1rem;
}
label {
font-weight: normal;
}
span {
font-weight: bold;
font-size: 1.3rem;
}
.bp5-popover-wrapper {
display: inline;
}
i {
color: $white;
}
.gradient {
position: absolute;
top: -3rem;
width: 100%;
height: 3rem;
background: linear-gradient(to top, $black 0%, transparent 30%);
}
}
.image-show-menu-target {
i {
color: $white;
}
}
.image-show-menu-popover {
.bp5-popover-content {
padding: 0;
}
}
.image-show-menu {
max-width: 25rem;
.hide-single-image-section {
padding: 1rem;
line-height: 2.5rem;
align-content: center;
}
p {
display: inline;
}
.shown-in-map-details {
padding: 1rem;
background: $lighter_gray;
&.shown {
cursor: pointer;
&:hover {
background: $light_gray;
}
}
p {
font-weight: bold;
}
}
.fb-toggle-button {
vertical-align: top;
margin-top: 1.5rem;
}
.hide-single-image-section {
.content {
margin: auto;
width: fit-content;
}
}
button {
margin: 0.5rem;
float: none;
line-height: 1.5rem;
}
.header-label {
display: block;
margin: auto !important;
width: fit-content;
}
.toggle-label {
margin: 1rem;
width: 50%;
}
}
.photos-footer,
.image-show-menu {
i {
background: none !important;
&.green {
color: $green;
}
&.gray {
color: $medium_gray;
}
}
.fb-icon-button {
&:hover {
background: rgba(255, 255, 255, 0.2) !important;
}
}
.shown-in-map-details {
i {
margin-right: 0.25rem;
}
}
}
.this-image-section {
margin: 2rem;
.content {
display: inline;
input {
margin: 0.5rem;
height: 2rem;
width: 3rem;
}
}
p {
display: inline;
margin: 0;
}
button {
margin: 0.5rem;
vertical-align: middle;
float: none;
}
}
.newer-older-images-section {
margin: 2rem;
i {
margin: 0.25rem;
}
p {
display: inline;
}
.buttons {
display: inline;
}
button {
margin: 0.5rem;
vertical-align: middle;
float: none;
}
}
.image-metadata {
display: flex;
margin-left: 1rem;
label {
margin-top: 0 !important;
margin-left: 1rem;
margin-right: 0.5rem;
}
p {
color: $off_white !important;
}
}
.image-created-at {
color: $white;
margin-left: 1rem;
span {
white-space: nowrap;
}
label {
margin-top: 0 !important;
margin-right: 0.5rem;
}
}
.photos {
.new-photo-button {
position: absolute;
top: 1rem;
right: 1rem;
p {
float: left;
margin-top: 0.75rem;
margin-right: 1rem;
}
}
.photo-action-buttons {
display: flex;
gap: 1rem;
height: 0px;
float: right !important;
margin-right: 1rem;
a {
margin: 0;
}
i {
font-size: 1.6rem;
&.disabled {
pointer-events: none;
color: $medium_gray;
}
}
}
.bp5-slider {
margin-left: 2rem;
width: 90%;
}
}
.image-items {
.footer-text {
display: flex;
* {
color: $white;
}
}
.photos-footer {
height: 2rem;
}
}
.camera-calibration,
.weed-detector {
.farmware-button {
position: relative;
top: 0rem;
z-index: 9;
height: 0px;
float: right;
}
.simple-camera-calibration-checkbox {
display: inline-block;
p {
display: inline-block;
margin: 0;
margin-top: 5rem;
}
svg {
position: absolute;
top: 0;
background: $black;
}
input {
float: left;
margin-right: 1rem;
}
}
.image-workspace {
.fb-button.green {
margin-top: 1rem;
}
.bp5-slider {
width: 95%;
margin-left: 1rem;
}
}
p {
margin: 1.5rem;
font-size: 1.2rem;
font-style: italic;
}
.bp5-popover-wrapper {
display: inline;
margin-left: 0.5rem;
&.input-error-wrapper {
display: block;
}
}
.filter-search {
.bp5-popover-wrapper {
display: inline-block;
margin-left: 0;
}
}
.camera-calibration-config {
label {
display: inline;
}
.camera-config-number-box {
margin-top: 1.5rem;
.input {
float: right;
margin-top: -0.25rem;
}
}
.dropdown-camera-calibration-config {
margin-top: 1.5rem;
.filter-search {
float: right;
margin-top: -0.25rem;
min-width: 16.5rem;
}
&.narrow {
.filter-search {
min-width: 8rem;
}
}
}
}
}
.boolean-camera-calibration-config {
input[type=checkbox] {
display: block;
float: left;
margin-right: 1rem;
}
.bp5-popover-wrapper {
display: inline;
margin: 0.5rem;
}
}
.farmware-button {
div {
float: right;
}
p {
float: right;
margin-top: 0.75rem;
margin-right: 1rem;
color: $medium_gray;
}
}
.index-indicator {
position: absolute;
bottom: 0;
right: 0;
background: $dark_gray;
height: 3px;
}