mirror of
https://github.com/nasa/openmct.git
synced 2025-03-01 12:22:42 +00:00
8a6f944655
* Missing objects styling WIP - Grabbing prior work from `missing-items` branch; * Missing objects styling WIP - Grabbing prior work on hover and missing theme constants from `missing-items` branch; - Refined theme constants values; - Renamed relevant mixins and classes from "isUnknown" to "isMissing"; - Applied new hover and missing/unknown styling to Folder-view grid items; * Missing objects styling WIP - Significant refinements and additions to `is-missing`; - Normalize object type icons as a markup `*__type-icon` to support styling and positioning of `is-missing__indicator` as a markup element; - Application to tree items, l-browse-bar in main view, c-object-label, grid view; - Change hover approach in grid-items and tree to use filters; * Missing objects styling WIP - Styles added to object-name component in Inspector, markup simplified; - Styles added to Tabs view; * Missing objects styling WIP - Simplified and consolidated `is-missing` approach into `.c-object-label` class; - Modded `.c-object-label` class to use flex 1 1 auto, instead of 0 1 auto - be on the outlook for regression problems!; - TODO: wire up `is-missing` for real and Folder List view; * Missing objects styling WIP - Added `is-missing` styling to Folder list view; - Cleanups, simplification and normalization with tree items in list-item and list-view.scss; - Using `c-object-label` now in Folder list view; - Removed too-broad `<a>` color definition in table.scss; * Missing objects styling WIP - `is-missing` added to layout frames, with support for hidden frames and telemetry views. - Further styles enhancement; - Continued added wiring points into markup; * Missing objects styling WIP - `is-missing` added to mct-plot; - Significant improvements for cursor lock indicators in plots; * Missing objects styling WIP - Plot legend fixes, added overflow scrolling for collapsed and expanded legends; - Removed conmmented code; * Wire up 'is-missing' - Added property checks on domainObject for status 'missing'; * Fix linting issues * remove carat from eslint package Co-authored-by: Deep Tailor <deep.j.tailor@nasa.gov>
470 lines
16 KiB
SCSS
470 lines
16 KiB
SCSS
/*****************************************************************************
|
|
* Open MCT, Copyright (c) 2014-2018, 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.
|
|
*****************************************************************************/
|
|
|
|
/************************************************** MAELSTROM THEME CONSTANTS */
|
|
|
|
// Fonts
|
|
@import url('https://fonts.googleapis.com/css?family=Chakra+Petch:400,600,700|Michroma|Teko:400,700');
|
|
|
|
$heroFont: 'Teko', sans-serif;
|
|
$headerFont: 'Michroma', sans-serif;
|
|
$bodyFont: 'Chakra Petch', sans-serif;
|
|
|
|
@mixin heroFont($size: 1em) {
|
|
font-family: $heroFont;
|
|
font-size: $size;
|
|
}
|
|
|
|
@mixin headerFont($size: 1em) {
|
|
font-family: $headerFont;
|
|
font-size: $size * 0.8; // This font is comparatively large, so reduce it a bit
|
|
text-transform: uppercase;
|
|
word-spacing: 0.25em;
|
|
}
|
|
|
|
@mixin bodyFont($size: 1em) {
|
|
font-family: $bodyFont;
|
|
font-size: $size;
|
|
}
|
|
|
|
// Functions
|
|
@function buttonBg($c: $colorBtnBg) {
|
|
@return linear-gradient(lighten($c, 5%), $c);
|
|
}
|
|
|
|
@function pullForward($val, $amt) {
|
|
@return lighten($val, $amt);
|
|
}
|
|
|
|
@function pushBack($val, $amt) {
|
|
@return darken($val, $amt);
|
|
}
|
|
|
|
// Constants
|
|
$fontBaseSize: 12px;
|
|
$smallCr: 2px;
|
|
$controlCr: 3px;
|
|
$basicCr: 4px;
|
|
$shdwBtns: rgba(black, 0.2) 0 1px 2px;
|
|
$shdwBtnsOverlay: rgba(black, 0.5) 0 1px 5px;
|
|
|
|
// Base colors
|
|
$colorBodyBg: #393939;
|
|
$colorBodyFg: #ccc;
|
|
$colorBodyFgEm: #fff;
|
|
$colorGenBg: #222;
|
|
$colorHeadBg: #262626;
|
|
$colorHeadFg: $colorBodyFg;
|
|
$colorKey: #0099cc;
|
|
$colorKeyFg: #fff;
|
|
$colorKeyHov: #26d8ff;
|
|
$colorKeyFilter: invert(36%) sepia(76%) saturate(2514%) hue-rotate(170deg) brightness(99%) contrast(101%);
|
|
$colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%) contrast(100%);
|
|
$colorKeySelectedBg: $colorKey;
|
|
$uiColor: #00b2ff; // Resize bars, splitter bars, etc.
|
|
$colorInteriorBorder: rgba($colorBodyFg, 0.2);
|
|
$colorA: #ccc;
|
|
$colorAHov: #fff;
|
|
$filterHov: brightness(1.3); // Tree, location items
|
|
$colorSelectedBg: pushBack($colorKey, 10%);
|
|
$colorSelectedFg: pullForward($colorBodyFg, 20%);
|
|
|
|
// Layout
|
|
$shellMainPad: 4px 0;
|
|
$shellPanePad: $interiorMargin, 7px;
|
|
$drawerBg: lighten($colorBodyBg, 5%);
|
|
$drawerFg: lighten($colorBodyFg, 5%);
|
|
$sideBarBg: $drawerBg;
|
|
$sideBarHeaderBg: rgba($colorBodyFg, 0.2);
|
|
$sideBarHeaderFg: rgba($colorBodyFg, 0.7);
|
|
|
|
// Status colors, mainly used for messaging and item ancillary symbols
|
|
$colorStatusFg: #999;
|
|
$colorStatusDefault: #ccc;
|
|
$colorStatusInfo: #60ba7b;
|
|
$colorStatusInfoFilter: invert(58%) sepia(44%) saturate(405%) hue-rotate(85deg) brightness(102%) contrast(92%);
|
|
$colorStatusAlert: #ffb66c;
|
|
$colorStatusAlertFilter: invert(78%) sepia(26%) saturate(1160%) hue-rotate(324deg) brightness(107%) contrast(101%);
|
|
$colorStatusError: #da0004;
|
|
$colorStatusErrorFilter: invert(10%) sepia(96%) saturate(4360%) hue-rotate(351deg) brightness(111%) contrast(115%);
|
|
$colorStatusBtnBg: #666; // Where is this used?
|
|
$colorStatusPartialBg: #3f5e8b;
|
|
$colorStatusCompleteBg: #457638;
|
|
$colorAlert: #ff8a0d;
|
|
$colorAlertFg: #fff;
|
|
$colorError: #ff3c00;
|
|
$colorErrorFg: #fff;
|
|
$colorWarningHi: #990000;
|
|
$colorWarningHiFg: #FF9594;
|
|
$colorWarningLo: #ff9900;
|
|
$colorWarningLoFg: #523400;
|
|
$colorDiagnostic: #a4b442;
|
|
$colorDiagnosticFg: #39461A;
|
|
$colorCommand: #3693bd;
|
|
$colorCommandFg: #fff;
|
|
$colorInfo: #2294a2;
|
|
$colorInfoFg: #fff;
|
|
$colorOk: #33cc33;
|
|
$colorOkFg: #fff;
|
|
$colorFilterBg: #44449c;
|
|
$colorFilterFg: #8984e9;
|
|
$colorFilter: $colorFilterFg; // Standalone against $colorBodyBg
|
|
|
|
// States
|
|
$colorPausedBg: #ff9900;
|
|
$colorPausedFg: #333;
|
|
|
|
// Base variations
|
|
$colorBodyBgSubtle: pullForward($colorBodyBg, 5%);
|
|
$colorBodyBgSubtleHov: pushBack($colorKey, 50%);
|
|
$colorKeySubtle: pushBack($colorKey, 10%);
|
|
|
|
// Time Colors
|
|
$colorTime: #618cff;
|
|
$colorTimeBg: $colorTime;
|
|
$colorTimeFg: pullForward($colorTimeBg, 30%);
|
|
$colorTimeHov: pullForward($colorTime, 10%);
|
|
$colorTimeSubtle: pushBack($colorTime, 20%);
|
|
$colorTOI: $colorBodyFg; // was $timeControllerToiLineColor
|
|
$colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov
|
|
$timeConductorAxisHoverFilter: brightness(1.2);
|
|
$timeConductorActiveBg: $colorKey;
|
|
$timeConductorActivePanBg: #226074;
|
|
|
|
/************************************************** BROWSING */
|
|
$browseFrameColor: pullForward($colorBodyBg, 10%);
|
|
$browseFrameBorder: 1px solid $browseFrameColor; // Frames in Disp and Flex Layouts when frame is showing
|
|
$browseSelectableShdwHov: rgba($colorBodyFg, 0.3) 0 0 3px;
|
|
$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
|
|
$filterItemHoverFg: brightness(1.2) contrast(1.1);
|
|
$filterItemMissing: contrast(0.2);
|
|
$opacityMissing: 0.5;
|
|
$borderMissing: 1px dashed $colorAlert !important;
|
|
|
|
/************************************************** EDITING */
|
|
$editUIColor: $uiColor; // Base color
|
|
$editUIColorBg: $editUIColor;
|
|
$editUIColorFg: #fff;
|
|
$editUIColorHov: pullForward(saturate($uiColor, 10%), 20%); // Hover color when $editUIColor is applied as a base color
|
|
$editUIBaseColor: #344b8d; // Base color, toolbar bg
|
|
$editUIBaseColorHov: pullForward($editUIBaseColor, 20%);
|
|
$editUIBaseColorFg: #ffffff; // Toolbar button icon colors, etc.
|
|
$editUIAreaBaseColor: pullForward(saturate($editUIBaseColor, 30%), 20%);
|
|
$editUIAreaShdw: $editUIAreaBaseColor 0 0 0 2px; // Edit area s-selected-parent
|
|
$editUIAreaShdwSelected: $editUIAreaBaseColor 0 0 0 3px; // Edit area s-selected
|
|
$editUIGridColorBg: rgba($editUIBaseColor, 0.2); // Background of layout editing area
|
|
$editUIGridColorFg: rgba(#000, 0.1); // Grid lines in layout editing area
|
|
$editFrameColor: $browseFrameColor; // Solid or dotted border applied to non-selected frames in a layout; move-bar on frame hover
|
|
$editFrameBorder: 1px dotted $editFrameColor;
|
|
$editFrameColorHov: $editUIColor; // Solid border hover on frames; hover should not be applied to selected objects
|
|
$editFrameBorderHov: 1px solid $editFrameColorHov; // Hover on selectable frames
|
|
$editFrameColorSelected: #ccc; // Border of selected frames
|
|
$editFrameColorHandleBg: $colorBodyBg; // Resize handle 'offset' color to make handle standout
|
|
$editFrameColorHandleFg: $editFrameColorSelected; // Resize handle main color
|
|
$editFrameSelectedShdw: rgba(black, 0.4) 0 1px 5px 1px;
|
|
$editFrameSelectedBorder: 1px solid $editFrameColorHov; // Selected frame element
|
|
$editFrameMovebarColorBg: $editFrameColor; // Movebar bg color
|
|
$editFrameMovebarColorFg: pullForward($editFrameMovebarColorBg, 20%); // Grippy lines, container size text
|
|
$editFrameHovMovebarColorBg: pullForward($editFrameMovebarColorBg, 10%); // Hover style
|
|
$editFrameHovMovebarColorFg: pullForward($editFrameMovebarColorFg, 10%);
|
|
$editFrameSelectedMovebarColorBg: pullForward($editFrameMovebarColorBg, 15%); // Selected style
|
|
$editFrameSelectedMovebarColorFg: pullForward($editFrameMovebarColorFg, 15%);
|
|
$editFrameMovebarH: 10px; // Height of move bar in layout frame
|
|
$editMarqueeBorder: 1px dashed $editFrameColorSelected;
|
|
|
|
// Icons
|
|
$colorIconAlias: #4af6f3;
|
|
$colorIconAliasForKeyFilter: #aaa;
|
|
|
|
// Holders
|
|
$colorTabsHolderBg: rgba(black, 0.2);
|
|
|
|
// Buttons and Controls
|
|
$colorBtnBg: pullForward($colorBodyBg, 10%);
|
|
$colorBtnBgHov: pullForward($colorBtnBg, 10%);
|
|
$colorBtnFg: pullForward($colorBodyFg, 10%);
|
|
$colorBtnReverseFg: pullForward($colorBtnFg, 10%);
|
|
$colorBtnReverseBg: pullForward($colorBtnBg, 10%);
|
|
$colorBtnFgHov: $colorBtnFg;
|
|
$colorBtnMajorBg: $colorKey;
|
|
$colorBtnMajorBgHov: $colorKeyHov;
|
|
$colorBtnMajorFg: $colorKeyFg;
|
|
$colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
|
|
$colorBtnCautionBg: #f16f6f;
|
|
$colorBtnCautionBgHov: #f1504e;
|
|
$colorBtnCautionFg: $colorBtnFg;
|
|
$colorBtnActiveBg: $colorOk;
|
|
$colorBtnActiveFg: $colorOkFg;
|
|
$colorBtnSelectedBg: $colorSelectedBg;
|
|
$colorBtnSelectedFg: $colorSelectedFg;
|
|
$colorClickIconButton: $colorKey;
|
|
$colorClickIconButtonBgHov: rgba($colorKey, 0.6);
|
|
$colorClickIconButtonFgHov: $colorKeyHov;
|
|
$colorDropHint: $colorKey;
|
|
$colorDropHintBg: pushBack($colorDropHint, 10%);
|
|
$colorDropHintBgHov: $colorDropHint;
|
|
$colorDropHintFg: pullForward($colorDropHint, 40%);
|
|
$colorDisclosureCtrl: rgba($colorBodyFg, 0.5);
|
|
$colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7);
|
|
$btnStdH: 24px;
|
|
$colorCursorGuide: rgba(white, 0.6);
|
|
$shdwCursorGuide: rgba(black, 0.4) 0 0 2px;
|
|
$colorLocalControlOvrBg: rgba($colorBodyBg, 0.8);
|
|
$colorSelectBg: $colorBtnBg; // This must be a solid color, not a gradient, due to usage of SVG bg in selects
|
|
$colorSelectFg: $colorBtnFg;
|
|
$colorSelectArw: lighten($colorBtnBg, 20%);
|
|
$shdwSelect: rgba(black, 0.5) 0 0.5px 3px;
|
|
$controlDisabledOpacity: 0.2;
|
|
|
|
// Menus
|
|
$colorMenuBg: pullForward($colorBodyBg, 15%);
|
|
$colorMenuFg: pullForward($colorBodyFg, 30%);
|
|
$colorMenuIc: pullForward($colorKey, 15%);
|
|
$colorMenuHovBg: $colorMenuIc;
|
|
$colorMenuHovFg: pullForward($colorMenuFg, 10%);
|
|
$colorMenuHovIc: $colorMenuHovFg;
|
|
$colorMenuElementHilite: pullForward($colorMenuBg, 10%);
|
|
$shdwMenu: rgba(black, 0.5) 0 1px 5px;
|
|
$shdwMenuText: none;
|
|
$menuItemPad: $interiorMargin, floor($interiorMargin * 1.25);
|
|
|
|
// Palettes and Swatches
|
|
$paletteItemBorderOuterColorSelected: black;
|
|
$paletteItemBorderInnerColorSelected: white;
|
|
$paletteItemBorderInnerColor: rgba($paletteItemBorderOuterColorSelected, 0.3);
|
|
$mixedSettingBg: (transparent rgba($editUIBaseColorHov, 0.7)); // Used in .c-click-icon--mixed
|
|
$mixedSettingBgSize: 5px;
|
|
|
|
// Forms
|
|
$colorCheck: $colorKey;
|
|
$colorFormRequired: $colorKey;
|
|
$colorFormValid: $colorOk;
|
|
$colorFormError: #990000;
|
|
$colorFormInvalid: #ff2200;
|
|
$colorFormFieldErrorBg: $colorFormError;
|
|
$colorFormFieldErrorFg: rgba(#fff, 0.6);
|
|
$colorFormLines: rgba(#000, 0.1);
|
|
$colorFormSectionHeaderBg: rgba(#000, 0.1);
|
|
$colorFormSectionHeaderFg: rgba($colorBodyFg, 0.8);
|
|
$colorInputBg: rgba(black, 0.2);
|
|
$colorInputFg: $colorBodyFg;
|
|
$colorInputPlaceholder: pushBack($colorBodyFg, 20%);
|
|
$colorFormText: pushBack($colorBodyFg, 10%);
|
|
$colorInputIcon: pushBack($colorBodyFg, 25%);
|
|
$colorFieldHint: pullForward($colorBodyFg, 40%);
|
|
$shdwInput: inset rgba(black, 0.4) 0 0 1px;
|
|
$shdwInputHov: inset rgba(black, 0.7) 0 0 2px;
|
|
$shdwInputFoc: inset rgba(black, 0.8) 0 0.25px 3px;
|
|
$formTBPad: $interiorMargin;
|
|
$formLRPad: $interiorMargin;
|
|
$formInputH: 22px;
|
|
$formRowCtrlsH: 14px;
|
|
|
|
// Inspector
|
|
$colorInspectorBg: pullForward($colorBodyBg, 5%);
|
|
$colorInspectorFg: $colorBodyFg;
|
|
$colorInspectorPropName: pushBack($colorBodyFg, 20%);
|
|
$colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
|
|
$colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
|
|
$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
|
|
|
|
// Overlay
|
|
$colorOvrBlocker: rgba(black, 0.7);
|
|
$overlayColorBg: $colorMenuBg;
|
|
$overlayColorFg: $colorMenuFg;
|
|
$colorOvrBtnBg: pullForward($overlayColorBg, 20%);
|
|
$colorOvrBtnFg: #fff;
|
|
$overlayCr: $interiorMarginLg;
|
|
$overlayBrightnessAdjust: brightness(1.3); // Applied in a filter: property
|
|
|
|
// Indicator colors
|
|
$colorIndicatorAvailable: $colorKey;
|
|
$colorIndicatorDisabled: #555555;
|
|
$colorIndicatorOn: $colorOk;
|
|
$colorIndicatorOff: #777777;
|
|
$colorIndicatorBgHov: rgba($colorHeadFg, 0.1);
|
|
$colorIndicatorMenuBg: $colorHeadBg;
|
|
$colorIndicatorMenuBgShdw: rgba(white, 0.6) 0 0 6px;
|
|
$colorIndicatorMenuFg: $colorHeadFg;
|
|
$colorIndicatorMenuFgHov: pullForward($colorHeadFg, 10%);
|
|
|
|
// Staleness
|
|
$colorTelemFresh: pullForward($colorBodyFg, 20%);
|
|
$colorTelemStale: pushBack($colorBodyFg, 20%);
|
|
$styleTelemStale: italic;
|
|
|
|
// Limits
|
|
$colorLimitYellowBg: #ac7300;
|
|
$colorLimitYellowFg: #ffe64d;
|
|
$colorLimitYellowIc: #ffb607;
|
|
$colorLimitRedBg: #940000;
|
|
$colorLimitRedFg: #ffa489;
|
|
$colorLimitRedIc: #ff4222;
|
|
|
|
// Bubble colors
|
|
$colorInfoBubbleBg: #dddddd;
|
|
$colorInfoBubbleFg: #666;
|
|
$colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
|
|
$colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
|
|
|
|
// Items
|
|
$colorItemBg: buttonBg($colorBtnBg);
|
|
$colorItemBgHov: buttonBg(pullForward($colorBtnBg, 5%));
|
|
$colorListItemBg: transparent;
|
|
$colorListItemBgHov: rgba($colorKey, 0.1);
|
|
$colorItemFg: $colorBtnFg;
|
|
$colorItemFgDetails: pushBack($colorItemFg, 20%);
|
|
$shdwItemText: none;
|
|
|
|
// Tabular
|
|
$colorTabBorder: pullForward($colorBodyBg, 10%);
|
|
$colorTabBodyBg: $colorBodyBg;
|
|
$colorTabBodyFg: pullForward($colorBodyFg, 20%);
|
|
$colorTabHeaderBg: rgba($colorBodyFg, 0.2);
|
|
$colorTabHeaderFg: $colorBodyFg;
|
|
$colorTabHeaderBorder: $colorBodyBg;
|
|
$colorTabGroupHeaderBg: pullForward($colorBodyBg, 5%);
|
|
$colorTabGroupHeaderFg: pushBack($colorTabHeaderFg, 10%);
|
|
$colorSummaryBg: #2c2c2c;
|
|
$colorSummaryFg: rgba($colorBodyFg, 0.7);
|
|
$colorSummaryFgEm: $colorBodyFg;
|
|
|
|
// Plot
|
|
$colorPlotBg: rgba(black, 0.05);
|
|
$colorPlotFg: $colorBodyFg;
|
|
$colorPlotHash: black;
|
|
$opacityPlotHash: 0.2;
|
|
$stylePlotHash: dashed;
|
|
$colorPlotAreaBorder: $colorInteriorBorder;
|
|
$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
|
|
$legendHoverValueBg: rgba($colorBodyFg, 0.2);
|
|
$legendTableHeadBg: rgba($colorBodyFg, 0.15);
|
|
|
|
// Tree
|
|
$colorTreeBg: transparent;
|
|
$colorItemTreeHoverBg: rgba(white, 0.07);
|
|
$colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
|
|
$colorItemTreeIcon: $colorKey; // Used
|
|
$colorItemTreeIconHover: $colorItemTreeIcon; // Used
|
|
$colorItemTreeFg: $colorBodyFg;
|
|
$colorItemTreeSelectedBg: $colorSelectedBg;
|
|
$colorItemTreeSelectedFg: $colorItemTreeHoverFg;
|
|
$colorItemTreeSelectedIcon: $colorItemTreeSelectedFg;
|
|
$colorItemTreeEditingBg: pushBack($editUIColor, 20%);
|
|
$colorItemTreeEditingFg: $editUIColor;
|
|
$colorItemTreeEditingIcon: $editUIColor;
|
|
$colorItemTreeVC: $colorDisclosureCtrl;
|
|
$colorItemTreeVCHover: $colorDisclosureCtrlHov;
|
|
$shdwItemTreeIcon: none;
|
|
|
|
// Images
|
|
$colorThumbHoverBg: $colorItemTreeHoverBg;
|
|
|
|
// Scrollbar
|
|
$scrollbarTrackSize: 7px;
|
|
$scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px;
|
|
$scrollbarTrackColorBg: rgba(#000, 0.2);
|
|
$scrollbarThumbColor: pushBack($colorBodyBg, 50%);
|
|
$scrollbarThumbColorHov: $colorKey;
|
|
$scrollbarThumbColorMenu: pullForward($colorMenuBg, 10%);
|
|
$scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
|
|
|
|
// Splitter
|
|
$splitterHandleD: 2px;
|
|
$splitterD: $splitterHandleD;
|
|
$splitterHandleHitMargin: 4px;
|
|
$colorSplitterBaseBg: $colorBodyBg;
|
|
$colorSplitterBg: pullForward($colorBodyBg, 10%);
|
|
$colorSplitterFg: $colorBodyBg;
|
|
$colorSplitterHover: $uiColor;
|
|
$colorSplitterActive: $colorKey;
|
|
$splitterBtnD: (16px, 35px); // height, width
|
|
$splitterBtnColorBg: $colorBtnBg;
|
|
$splitterBtnColorFg: #999;
|
|
$splitterBtnLabelColorFg: #666;
|
|
$splitterCollapsedBtnColorBg: #222;
|
|
$splitterCollapsedBtnColorFg: #666;
|
|
$splitterCollapsedBtnColorBgHov: $colorKey;
|
|
$splitterCollapsedBtnColorFgHov: $colorKeyFg;
|
|
|
|
// Mobile
|
|
$colorMobilePaneLeft: pushBack($colorBodyBg, 2%);
|
|
$colorMobilePaneLeftTreeItemBg: rgba($colorBodyFg, 0.1);
|
|
$colorMobilePaneLeftTreeItemFg: $colorItemTreeFg;
|
|
$colorMobileSelectListTreeItemBg: rgba(#000, 0.05);
|
|
|
|
// About Screen
|
|
$colorAboutLink: #9bb5ff;
|
|
|
|
// Loading
|
|
$colorLoadingFg: #776ba2;
|
|
$colorLoadingBg: rgba($colorLoadingFg, 0.1);
|
|
|
|
// Transitions
|
|
$transInTime: 50ms;
|
|
$transOutTime: 250ms;
|
|
$transIn: all $transInTime ease-in-out;
|
|
$transOut: all $transOutTime ease-in-out;
|
|
$transInBounce: all 200ms cubic-bezier(.47,.01,.25,1.5);
|
|
$transInBounceBig: all 300ms cubic-bezier(.2,1.6,.6,3);
|
|
|
|
// Discrete items, like Notebook entries, Widget rules
|
|
$createBtnTextTransform: uppercase;
|
|
$colorDiscreteItemBg: rgba($colorBodyFg,0.1);
|
|
$colorDiscreteItemCurrentBg: rgba($colorOk,0.3);
|
|
|
|
@mixin discreteItem() {
|
|
background: rgba($colorBodyFg,0.1);
|
|
border: none;
|
|
border-radius: $controlCr;
|
|
|
|
&--current-match {
|
|
background: $colorDiscreteItemCurrentBg;
|
|
}
|
|
}
|
|
|
|
@mixin discreteItemInnerElem() {
|
|
border: 1px solid rgba(#fff, 0.1);
|
|
border-radius: $controlCr;
|
|
}
|
|
|
|
@mixin themedButton($c: $colorBtnBg) {
|
|
background: linear-gradient(pullForward($c, 5%), $c);
|
|
box-shadow: rgba(black, 0.5) 0 0.5px 2px;
|
|
}
|
|
|
|
/**************************************************** OVERRIDES */
|
|
.c-frame {
|
|
&:not(.no-frame) {
|
|
$bc: #666;
|
|
$bLR: 3px solid transparent;
|
|
$br: 20px;
|
|
background: none !important;
|
|
border-radius: $br;
|
|
border-top: 4px solid $bc !important;
|
|
border-bottom: 2px solid $bc !important;
|
|
border-left: $bLR !important;;
|
|
border-right: $bLR !important;;
|
|
padding: 5px 10px 10px 10px !important;
|
|
}
|
|
}
|