203 lines
3.5 KiB
SCSS
203 lines
3.5 KiB
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;
|
|
}
|
|
}
|