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 {
        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 {
    background-color: $colorPlotBg;
	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 */
.t-imagery {
	.h-local-controls.h-local-controls-overlay-content {
		max-width: 200px;
		min-width: 100px;
		width: 35%;
        align-items: center;
        padding: $interiorMargin $interiorMarginLg;

		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;
			}
		}
	}
}


/*************************************** 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;
	}
}

/*************************************** MOBILE */
body.mobile.phone {
  .t-imagery {
    .l-image-main-wrapper,
    .l-image-thumbs-wrapper {
      //background: red;
      min-height: 10px !important;
    }
  }
}