mirror of
https://github.com/nasa/openmct.git
synced 2025-03-22 20:15:25 +00:00
654 lines
14 KiB
SCSS
654 lines
14 KiB
SCSS
/*****************************************************************************
|
|
* Open MCT, Copyright (c) 2014-2021, United States Government
|
|
* as represented by the Administrator of the National Aeronautics and Space
|
|
* Administration. All rights reserved.
|
|
*
|
|
* Open MCT is licensed under the Apache License, Version 2.0 (the
|
|
* "License"); you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
* http://www.apache.org/licenses/LICENSE-2.0.
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
|
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
|
* License for the specific language governing permissions and limitations
|
|
* under the License.
|
|
*
|
|
* Open MCT includes source code licensed under additional open source
|
|
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
|
* this source code distribution or the Licensing information page available
|
|
* at runtime from the About dialog for additional information.
|
|
*****************************************************************************/
|
|
|
|
/*********************************************** NOTEBOOK */
|
|
@mixin searchHighlight {
|
|
background: rgba($colorBtnSelectedBg, 0.4);
|
|
color: $colorBtnSelectedFg;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.c-notebook {
|
|
$headerFontSize: 1.3em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
|
|
/****************************** CONTENT */
|
|
&__body {
|
|
// Holds __nav and __page-view
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
}
|
|
|
|
&__nav {
|
|
flex: 0 0 auto;
|
|
* {
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.c-sidebar {
|
|
background: $sideBarBg;
|
|
.c-sidebar__pane {
|
|
flex-basis: 50%;
|
|
}
|
|
}
|
|
|
|
body.mobile & {
|
|
.c-list-button,
|
|
&-snapshot-menubutton {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/****************************** CONTENT */
|
|
&__contents {
|
|
width: 70%;
|
|
}
|
|
|
|
&__page-view {
|
|
// Holds __header, __drag-area and __entries
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
> * {
|
|
flex: 0 0 auto;
|
|
+ * {
|
|
margin-top: $interiorMargin;
|
|
}
|
|
}
|
|
}
|
|
|
|
> * + * {
|
|
margin-top: $interiorMargin;
|
|
}
|
|
|
|
&__head,
|
|
&__controls,
|
|
&__drag-area,
|
|
&__entries {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
&__head,
|
|
&__drag-area,
|
|
&__controls {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
&__head {
|
|
[class*="__"] + [class*="__"] {
|
|
margin-left: $interiorMargin;
|
|
}
|
|
}
|
|
|
|
&__search {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
&__drag-area {
|
|
// TODO: recast this element to use c-drop-hint element
|
|
background: rgba($colorKey, 0.1);
|
|
border: 1px dashed rgba($colorKey, 0.7);
|
|
border-radius: $controlCr;
|
|
color: rgba($colorBodyFg, 0.7);
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
|
|
&:before {
|
|
margin-right: 7px !important;
|
|
}
|
|
|
|
[class*="__label"] {
|
|
font-style: italic;
|
|
@include ellipsize();
|
|
}
|
|
|
|
&:hover {
|
|
background: rgba($colorKey, 0.2);
|
|
color: $colorBodyFg;
|
|
}
|
|
|
|
&.drag-active,
|
|
&.is-active {
|
|
// Not currently working
|
|
border-color: $colorKey;
|
|
}
|
|
|
|
body.mobile & {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/***** PAGE VIEW */
|
|
&__page-view {
|
|
&__header {
|
|
display: flex;
|
|
flex-wrap: wrap; // Allows wrapping in mobile portrait and narrow placements
|
|
line-height: 220%;
|
|
> * {
|
|
flex: 0 0 auto;
|
|
}
|
|
}
|
|
|
|
&__path {
|
|
flex: 1 1 auto;
|
|
margin: 0 $interiorMargin;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
font-size: $headerFontSize;
|
|
> * {
|
|
// Section
|
|
flex: 0 0 auto;
|
|
+ * {
|
|
// Page
|
|
display: inline;
|
|
flex: 1 1 auto;
|
|
@include ellipsize();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__entries {
|
|
flex-direction: column;
|
|
flex: 1 1 auto;
|
|
overflow-x: hidden;
|
|
overflow-y: scroll;
|
|
|
|
@include desktop() {
|
|
padding-right: $interiorMarginSm; // Scrollbar kickoff
|
|
}
|
|
|
|
[class*="__entry"] + [class*="__entry"] {
|
|
margin-top: $interiorMarginSm;
|
|
}
|
|
}
|
|
|
|
/***** SEARCH RESULTS */
|
|
&__search-results {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
|
|
> * + * {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
&__header {
|
|
font-size: $headerFontSize;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.c-notebook__entries {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.c-ne {
|
|
flex-direction: column;
|
|
|
|
> * + * {
|
|
margin-top: $interiorMargin;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.is-notebook-default,
|
|
.is-status--notebook-default {
|
|
&:after {
|
|
color: $colorFilter;
|
|
font-family: symbolsfont;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
&.c-list__item:after {
|
|
content: $glyph-icon-notebook-page;
|
|
flex: 1 0 auto;
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
/****************************** ENTRIES */
|
|
.c-ne {
|
|
// A Notebook entry
|
|
$p: $interiorMarginSm;
|
|
@include discreteItem();
|
|
display: flex;
|
|
padding: $interiorMarginSm $interiorMarginSm $interiorMarginSm $interiorMargin;
|
|
|
|
&__time,
|
|
&__text,
|
|
&__local-controls {
|
|
padding-top: $p;
|
|
padding-bottom: $p;
|
|
}
|
|
|
|
&__time,
|
|
&__embed__time {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
&__time-and-content {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
&__time {
|
|
flex: 0 1 auto;
|
|
min-width: 130px;
|
|
margin-right: $interiorMarginLg;
|
|
|
|
* {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
&__content {
|
|
flex: 1 1 auto;
|
|
|
|
> [class*="__"] + [class*="__"] {
|
|
margin-top: $interiorMarginSm;
|
|
}
|
|
}
|
|
|
|
&__text {
|
|
min-height: 22px; // Needed in Firefox when field is blank
|
|
|
|
&:not(.highlight) {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.search-highlight {
|
|
@include searchHighlight();
|
|
}
|
|
}
|
|
|
|
&__input {
|
|
// Appended to __text element when Notebook is not in readOnly mode
|
|
@include inlineInput;
|
|
padding-left: $inputTextPLeftRight;
|
|
padding-right: $inputTextPLeftRight;
|
|
|
|
@include hover {
|
|
&:not(:focus) {
|
|
background: rgba($colorBodyFg, 0.1);
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
background: $colorInputBg;
|
|
}
|
|
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
&__section-and-page {
|
|
// Shown when c-ne within search results
|
|
background: rgba($colorBodyFg, 0.1); //$colorInteriorBorder;
|
|
border-radius: $controlCr;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
align-self: flex-start;
|
|
padding: $interiorMargin;
|
|
|
|
.search-highlight {
|
|
@include searchHighlight();
|
|
}
|
|
|
|
> * + * {
|
|
margin-left: $interiorMargin;
|
|
}
|
|
|
|
[class*='icon'] {
|
|
font-size: 0.8em;
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
}
|
|
|
|
/****************************** EMBEDS */
|
|
@mixin snapThumb() {
|
|
// LEGACY: TODO: refactor when .snap-thumb in New Entry dialog is refactored
|
|
$d: 30px;
|
|
border: 1px solid $colorInteriorBorder;
|
|
cursor: pointer;
|
|
width: $d;
|
|
height: $d;
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
|
|
img {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.snap-thumb {
|
|
// LEGACY,
|
|
@include snapThumb();
|
|
}
|
|
|
|
.c-ne__embed {
|
|
@include discreteItemInnerElem();
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
padding: $interiorMargin;
|
|
|
|
[class*="__"] + [class*="__"] {
|
|
margin-left: $interiorMargin;
|
|
}
|
|
|
|
&__info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
a {
|
|
color: $colorKey;
|
|
}
|
|
}
|
|
|
|
&__name,
|
|
&__link {
|
|
// Holds __link and __context-available
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
&__link {
|
|
&:before {
|
|
display: block;
|
|
font-size: 0.85em;
|
|
margin-right: $interiorMarginSm;
|
|
}
|
|
}
|
|
|
|
&__context-available {
|
|
font-size: 0.7em;
|
|
margin-left: $interiorMarginSm;
|
|
}
|
|
|
|
&__snap-thumb {
|
|
@include snapThumb();
|
|
}
|
|
}
|
|
/****************************** SNAPSHOTTING */
|
|
// LEGACY: TODO: refactor these names
|
|
.t-contents,
|
|
.snap-annotation {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.s-status-taking-snapshot,
|
|
.overlay.snapshot {
|
|
// Handle overflow-y issues with tables and html2canvas
|
|
background: $colorBodyBg; // Prevent html2canvas from using white background
|
|
color: $colorBodyFg;
|
|
padding: $interiorMarginSm !important; // Prevents items from going right to the edge of the image
|
|
|
|
.l-sticky-headers .l-tabular-body { overflow: auto; }
|
|
.l-browse-bar {
|
|
display: none; // Suppress browse-bar when snapshotting from view-large overlay
|
|
+ * {
|
|
margin-top: 0 !important; // Remove margin from any following elements
|
|
}
|
|
}
|
|
|
|
* {
|
|
box-shadow: none !important; // Prevent html2canvas problems with box-shadow
|
|
}
|
|
}
|
|
|
|
.c-notebook-snapshot {
|
|
flex: 1 1 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
> * + * {
|
|
margin-top: $interiorMargin;
|
|
}
|
|
|
|
&__header {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
&__image {
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
flex: 1 1 auto;
|
|
}
|
|
}
|
|
|
|
/****************************** SNAPSHOT CONTAINER */
|
|
.c-snapshots-h {
|
|
// Is hidden when the parent div l-shell__drawer is collapsed, so no worries about padding, etc.
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
padding: $interiorMarginLg;
|
|
|
|
> * {
|
|
flex: 1 1 auto;
|
|
&:first-child {
|
|
flex: 0 0 auto;
|
|
}
|
|
}
|
|
|
|
> * + * {
|
|
margin-top: $interiorMargin;
|
|
}
|
|
}
|
|
|
|
.c-snapshots {
|
|
flex-wrap: wrap;
|
|
overflow: auto;
|
|
|
|
.c-snapshot {
|
|
margin: 0 $interiorMarginSm $interiorMarginSm 0;
|
|
}
|
|
|
|
.hint {
|
|
font-size: 1.25em;
|
|
font-style: italic;
|
|
opacity: 0.7;
|
|
padding: $interiorMarginLg;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
/****************************** PAINTERRO OVERRIDES */
|
|
.annotation-dialog .abs.editor {
|
|
border-radius: 0;
|
|
}
|
|
|
|
#snap-annotation {
|
|
$m: 0; //$interiorMargin;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
top: $m; right: 0; bottom: $m; left: 0; // LEGACY, deal with .editor border-radius clipping stuff
|
|
}
|
|
|
|
#snap-annotation-wrapper,
|
|
#snap-annotation-bar {
|
|
position: relative;
|
|
top: auto; right: auto; bottom: auto; left: auto;
|
|
}
|
|
|
|
#snap-annotation-wrapper {
|
|
background: rgba($colorBodyFg, 0.1);
|
|
border: 1px solid $colorInteriorBorder;
|
|
order: 2;
|
|
flex: 10 0 auto;
|
|
}
|
|
|
|
#snap-annotation-bar {
|
|
// Holds tool buttons, color selectors, etc.
|
|
$h: 22px;
|
|
$fs: 0.8rem;
|
|
$m: $interiorMarginSm;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
height: $h + ($m * 2) !important;
|
|
margin-bottom: $interiorMarginLg;
|
|
order: 1;
|
|
flex: 0 0 auto;
|
|
background-color: transparent !important;
|
|
padding: $interiorMarginSm;
|
|
|
|
> div {
|
|
display: contents;
|
|
|
|
> * + * { margin-left: $interiorMargin !important; }
|
|
}
|
|
|
|
.ptro-tool-controls {
|
|
display: flex;
|
|
margin-left: $interiorMarginLg !important;
|
|
|
|
> * + * {
|
|
margin-left: $interiorMargin !important;
|
|
}
|
|
}
|
|
|
|
.ptro-icon-btn,
|
|
.ptro-named-btn,
|
|
.ptro-color-btn,
|
|
.ptro-bordered-btn,
|
|
.ptro-tool-ctl-name,
|
|
.ptro-color-btn,
|
|
.tool-controls,
|
|
.ptro-input {
|
|
// Lot of resets for crappy CSS in Painterro
|
|
font-family: inherit;
|
|
font-size: $fs !important;
|
|
height: $h !important;
|
|
margin: 0;
|
|
position: relative;
|
|
line-height: $h !important;
|
|
}
|
|
|
|
.ptro-tool-ctl-name {
|
|
border-radius: 0;
|
|
background: none;
|
|
color: $colorBodyFg;
|
|
top: auto;
|
|
font-family: inherit;
|
|
padding: 0;
|
|
}
|
|
|
|
.ptro-color-btn {
|
|
width: $h !important;
|
|
}
|
|
|
|
.ptro-check,
|
|
.ptro-color-control,
|
|
.ptro-icon-btn,
|
|
.ptro-named-btn {
|
|
// Buttons in toolbar
|
|
border-radius: $smallCr;
|
|
box-shadow: rgba($colorBtnFg, 0.3) 0 0 0 1px;
|
|
color: $colorBtnFg !important;
|
|
padding: 1px $interiorMargin;
|
|
|
|
&:hover {
|
|
background: $colorBtnBgHov;
|
|
color: $colorBtnFgHov;
|
|
}
|
|
|
|
i {
|
|
display: contents;
|
|
font-size: $fs * 1.2;
|
|
line-height: inherit;
|
|
}
|
|
}
|
|
|
|
.ptro-color-control,
|
|
.ptro-icon-btn,
|
|
.ptro-named-btn {
|
|
// Buttons in toolbar
|
|
background-color: $colorBtnBg;
|
|
}
|
|
|
|
.ptro-color-active-control {
|
|
background: $colorBtnMajorBg !important;
|
|
color: $colorBtnMajorFg !important;
|
|
}
|
|
|
|
.ptro-info,
|
|
.ptro-btn-color-checkers-bar,
|
|
*[title="Font name"],
|
|
*[title="Stroke color"],
|
|
*[title="Stroke width"],
|
|
*[data-id="fontName"],
|
|
*[data-id="fontStrokeSize"],
|
|
*[data-id="stroke"] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/****************************** MOBILE */
|
|
body.mobile {
|
|
.c-notebook__drag-area { display: none; }
|
|
.c-notebook__entry {
|
|
[class*="local-controls"] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&.phone.portrait {
|
|
.c-notebook__head,
|
|
.c-notebook__entry,
|
|
.c-ne__time-and-content {
|
|
flex-direction: column;
|
|
|
|
> [class*="__"] + [class*="__"] {
|
|
margin-left: 0;
|
|
margin-top: $interiorMargin;
|
|
}
|
|
}
|
|
|
|
.c-notebook__entry {
|
|
[class*="text"] {
|
|
min-height: 0;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/****************************** INDICATOR */
|
|
.c-indicator.has-new-snapshot {
|
|
$c: $colorOk;
|
|
@include pulseProp($animName: flashSnapshot, $dur: 500ms, $iter: infinite, $prop: background, $valStart: rgba($c, 0.4), $valEnd: rgba($c, 0));
|
|
}
|