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-width: 150px;
	.l-image-main {
		background-color: $colorPlotBg;
        margin-bottom: $interiorMargin;
	}
	.l-image-main-controlbar {
        &.l-flex-row { align-items: center; }
	}
}

.l-image-thumbs-wrapper {
	top: auto;
	min-height: $imageThumbsWrapperH;
	max-height: 60%;
	box-sizing: border-box;
}

.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;
	.l-datetime-w, .l-controls-w {
		direction: rtl;
		overflow: hidden;
	}
	.l-datetime-w {
        @include ellipsize();
        margin-right: $interiorMarginSm;
		text-align: left;
	}
	.l-controls-w {
		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 {
	overflow-x: hidden;
	overflow-y: auto;
	padding-bottom: $interiorMargin;
	white-space: nowrap;
}

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

	&:hover {
		background: $colorThumbHoverBg;
		.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;
    min-width: 100px;
    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 !important;
        height: 100% !important;
		.l-image-main-controlbar {
			font-size: 0.7em;
		}
		@if $enableImageryThumbs == true {
			.l-btn.show-thumbs {
				display: inline-block;
			}
		}
	}
	.l-image-thumbs-wrapper,
    mct-splitter {
		display: none;
	}
}