openmct/platform/commonUI/general/res/sass/features/_imagery.scss

.l-image-main-wrapper,
.l-image-thumbs-wrapper,
.image-main {
	@include absPosDefault(0, false);
}

/*************************************** MAIN LAYOUT */
.l-image-main-wrapper {
	@if $enableImageryThumbs == true {
		bottom: $interiorMargin*2 +  $imageThumbsWrapperH;
	}
	min-height: 100px;
	min-width: 150px;
	.l-image-main {
		background-color: $colorPlotBg;
        margin-bottom: $interiorMargin;
	}
	.l-image-main-controlbar {
        &.l-flex-row { @include align-items(center); }
	}
}

.l-image-thumbs-wrapper {
	top: auto;
	height: $imageThumbsWrapperH;
}

.l-date,
.l-time,
.l-timezone {
	display: inline-block;
}

/*************************************** MAIN IMAGE */

.image-main,
.l-image-thumb-item .l-thumb {
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.l-image-main-controlbar {
	font-size: 0.8em;
	line-height: inherit;
	.left, .right {
		direction: rtl;
		overflow: hidden;
	}
	.left {
		text-align: left;
	}
	.right {
		z-index: 2;
	}
	.l-date,
	.l-time {
		color: pullForward($colorBodyFg, 20%);
	}
	.l-mag {
		direction: ltr;
		display: inline-block;
		&:before {
			content: "\000049";
		}
	}
	.s-mag {
		color: pushBack($colorBodyFg, 20%);
	}
	.l-btn.show-thumbs {
		display: none;
	}
}

.s-image-main {
	border: 1px solid transparent;
	&.paused {
		@extend .s-unsynced;
	}
}

/*************************************** THUMBS */

.l-image-thumbs-wrapper {
	//@include test(green);
	direction: rtl;
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: $interiorMargin;
	white-space: nowrap;
	z-index: 70;
}

.l-image-thumb-item {
	@include transition(background-color, 0.25s);
	box-sizing: border-box;
	padding: 1px;
	position: relative;
	.l-thumb,
	.l-date,
	.l-time {
		display: inline-block;
	}
	.l-date,
	.l-time {
		padding: 2px 3px;
	}
	cursor: pointer;
	direction: ltr;
	display: inline-block;
	font-size: 0.8em;
	margin-left: $interiorMarginSm;
	text-align: left;
	width: $imageThumbsD + $imageThumbPad*2;
	white-space: normal;
	&:hover {
		background: rgba(#fff, 0.2);
		.l-date,
		.l-time {
			color: #fff;
		}
	}
	&.selected {
		background: $colorKeySelectedBg;
		.l-date,
		.l-time {
			color: #fff;
		}
	}
	.l-thumb {
		background-color: rgba(#fff, 0.1);
		height: $imageThumbsD;
		width: $imageThumbsD;
		margin-top: 0;
	}
}

/*************************************** LOCAL CONTROLS */
.l-local-controls {
    max-width: 200px;
    width: 35%;
    input[type="range"] {
        display: block;
        width: 100%;
        &:not(:first-child) {
            margin-top: $interiorMarginLg;
        }

        &:before {
            margin-right: $interiorMarginSm;
        }
    }

    .t-reset-btn-holder {
        $bc: $scrollbarTrackColorBg;
        &:before,
        &:after {
            border-right: 1px solid $bc;
            content:'';
            display: block;
            width: 5px;
            height: 4px;
        }

        &:before {
            border-top: 1px solid $bc;
            margin-bottom: 2px;
        }

        &:after {
            border-bottom: 1px solid $bc;
            margin-top: 2px;
        }
    }

    &.s-wrapper-transluc {
        left: auto;
        padding: $interiorMargin $interiorMarginLg;
    }

    &.l-flex-row {
        align-items: center;
    }
}

/*************************************** WHEN IN FRAME */
.frame .t-imagery {
	.l-image-main-wrapper {
		bottom: 0;
		.l-image-main-controlbar {
			font-size: 0.7em;
		}
		@if $enableImageryThumbs == true {
			.l-btn.show-thumbs {
				display: inline-block;
			}
		}
	}
	.l-image-thumbs-wrapper {
		display: none;
	}
}