8b9c51f303
fixes #973 - Done; - Styling for Export button and tabular view area in layout frame context; - Export button in frame context now hidden until user hovers over tabular view area in frame, includes animated transition; - Normalized line-height on button and menu elements in frame context; - Layout/markup/SASS for historical and RT tabular view modified; - Converted imagery.html layout to use flexbox;
153 lines
2.6 KiB
SCSS
153 lines
2.6 KiB
SCSS
.l-image-main-wrapper,
|
|
.l-image-thumbs-wrapper {
|
|
@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 */
|
|
|
|
.l-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 {
|
|
border-color: $colorPausedBg;
|
|
}
|
|
}
|
|
|
|
/*************************************** 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;
|
|
}
|
|
}
|
|
|
|
/*************************************** 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;
|
|
}
|
|
} |