c301523156
open #889 IN PROGRESS - Smaller font used on range value; - More space allocated to left and right for slider range values; - Style tweaks to slider look; - Layout and style of datetime inputs fixed; - Input error colors fixed, moved to theme constants;
210 lines
6.3 KiB
SCSS
210 lines
6.3 KiB
SCSS
// Global
|
|
$colorBodyBg: #fcfcfc;
|
|
$colorBodyFg: #666;
|
|
$colorGenBg: #fff;
|
|
$colorFooterBg: #000;
|
|
$colorKey: #0099cc;
|
|
$colorKeySelectedBg: $colorKey;
|
|
$colorKeyFg: #fff;
|
|
$colorEditAreaBg: #eafaff;
|
|
$colorEditAreaFg: #4bb1c7; //587ab5;
|
|
$colorInteriorBorder: rgba($colorBodyFg, 0.2);
|
|
$colorA: #999;
|
|
$colorAHov: $colorKey;
|
|
$contrastRatioPercent: 40%;
|
|
$hoverRatioPercent: 10%;
|
|
$basicCr: 4px;
|
|
$controlCr: $basicCr;
|
|
$smallCr: 3px;
|
|
|
|
// Buttons and Controls
|
|
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
|
|
$colorBtnBgHov: pullForward($colorBtnBg, $hoverRatioPercent);
|
|
$colorBtnFg: #fff;
|
|
$colorBtnMajorBg: $colorKey;
|
|
$colorBtnMajorFg: $colorKeyFg;
|
|
$colorBtnIcon: #eee;
|
|
$colorInvokeMenu: #000;
|
|
$contrastInvokeMenuPercent: 40%;
|
|
$shdwBtns: none;
|
|
$shdwBtnsOverlay: none;
|
|
$sliderColorBase: $colorKey;
|
|
$sliderColorRangeHolder: rgba(black, 0.07);
|
|
$sliderColorRange: rgba($sliderColorBase, 0.2);
|
|
$sliderColorRangeHov: rgba($sliderColorBase, 0.4);
|
|
$sliderColorKnob: rgba($sliderColorBase, 0.5);
|
|
$sliderColorKnobHov: rgba($sliderColorBase, 0.7);
|
|
$sliderColorRangeValHovBg: $sliderColorRange; //rgba($sliderColorBase, 0.1);
|
|
$sliderColorRangeValHovFg: $colorBodyFg;
|
|
$sliderKnobW: 10px;
|
|
$sliderKnobR: 2px;
|
|
$timeControllerToiLineColor: $colorBodyFg;
|
|
$timeControllerToiLineColorHov: #0052b5;
|
|
|
|
// General Colors
|
|
$colorAlt1: #776ba2;
|
|
$colorAlert: #ff3c00;
|
|
$colorIconLink: #49dedb;
|
|
$colorPausedBg: #ff9900;
|
|
$colorPausedFg: #fff;
|
|
$colorCreateBtn: $colorKey;
|
|
$colorGridLines: rgba(#000, 0.05);
|
|
$colorInvokeMenu: #fff;
|
|
$colorObjHdrTxt: $colorBodyFg;
|
|
$colorObjHdrIc: pushBack($colorObjHdrTxt, 30%);
|
|
$colorTick: rgba(black, 0.2);
|
|
|
|
// Menu colors
|
|
$colorMenuBg: pushBack($colorBodyBg, 10%);
|
|
$colorMenuFg: pullForward($colorMenuBg, 70%);
|
|
$colorMenuIc: $colorKey;
|
|
$colorMenuHovBg: pullForward($colorMenuBg, $hoverRatioPercent);
|
|
$colorMenuHovFg: $colorMenuFg;
|
|
$colorMenuHovIc: $colorMenuIc;
|
|
$shdwMenu: rgba(black, 0.5) 0 1px 5px;
|
|
$shdwMenuText: none;
|
|
$colorCreateMenuLgIcon: $colorKey;
|
|
$colorCreateMenuText: $colorBodyFg;
|
|
|
|
// Form colors
|
|
$colorCheck: $colorKey;
|
|
$colorFormRequired: $colorKey;
|
|
$colorFormValid: #33cc33;
|
|
$colorFormError: #990000;
|
|
$colorFormInvalid: #ff2200;
|
|
$colorFormFieldErrorBg: $colorFormError;
|
|
$colorFormFieldErrorFg: rgba(#fff, 0.6);
|
|
$colorFormLines: rgba(#000, 0.1);
|
|
$colorFormSectionHeader: rgba(#000, 0.05);
|
|
$colorInputBg: $colorGenBg;
|
|
$colorInputFg: $colorBodyFg;
|
|
$colorFormText: pushBack($colorBodyFg, 10%);
|
|
$colorInputIcon: pushBack($colorBodyFg, 25%);
|
|
$colorFieldHint: pullForward($colorBodyFg, 40%);
|
|
|
|
// Inspector
|
|
$colorInspectorBg: pullForward($colorBodyBg, 5%);
|
|
$colorInspectorFg: $colorBodyFg;
|
|
$colorInspectorPropName: pushBack($colorBodyFg, 20%);
|
|
$colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
|
|
$colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
|
|
$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
|
|
|
|
// Status colors, mainly used for messaging and item ancillary symbols
|
|
$colorStatusFg: #fff;
|
|
$colorStatusDefault: #ccc;
|
|
$colorStatusInfo: #60ba7b;
|
|
$colorStatusAlert: #ffb66c;
|
|
$colorStatusError: #c96b68;
|
|
$colorStatusAvailable: $colorKey;
|
|
$colorStatusBtnBg: #666;
|
|
$colorProgressBarOuter: rgba(#000, 0.1);
|
|
$colorProgressBarAmt: #0a0;
|
|
$progressBarHOverlay: 15px;
|
|
$progressBarStripeW: 20px;
|
|
$shdwStatusIc: rgba(white, 0.8) 0 0px 5px;
|
|
|
|
// Selects
|
|
$colorSelectBg: #ddd;
|
|
$colorSelectFg: $colorBodyFg;
|
|
|
|
// Limits and staleness colors//
|
|
$colorTelemFresh: pullForward($colorBodyFg, 20%);
|
|
$colorTelemStale: pushBack($colorBodyFg, 20%);
|
|
$styleTelemStale: italic;
|
|
$colorLimitYellowBg: rgba(#ffaa00, 0.3);
|
|
$colorLimitYellowIc: #ffaa00;
|
|
$colorLimitRedBg: rgba(red, 0.3);
|
|
$colorLimitRedIc: red;
|
|
|
|
// Bubble colors
|
|
$colorInfoBubbleBg: $colorMenuBg;
|
|
$colorInfoBubbleFg: #666;
|
|
$colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
|
|
$colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
|
|
|
|
// Overlay
|
|
$colorOvrBlocker: rgba(black, 0.7);//
|
|
$colorOvrBg: $colorBodyBg;
|
|
$colorOvrFg: $colorBodyFg;
|
|
$colorOvrBtnBg: pullForward($colorOvrBg, 40%);
|
|
$colorOvrBtnFg: #fff;
|
|
$colorFieldHintOverlay: pullForward($colorOvrBg, 40%);
|
|
|
|
// Items
|
|
$colorItemBg: #ddd;
|
|
$colorItemBgHov: pullForward($colorItemBg, $hoverRatioPercent);
|
|
$colorItemFg: $colorBodyFg;
|
|
$colorItemFgDetails: pushBack($colorItemFg, 15%);
|
|
$colorItemIc: $colorKey;
|
|
$colorItemSubIcons: $colorItemFgDetails;
|
|
$colorItemOpenIcon: $colorItemFgDetails;
|
|
$shdwItemText: none;
|
|
$colorItemBgSelected: $colorKey;
|
|
|
|
// Tabular
|
|
$colorTabBorder: pullForward($colorBodyBg, 10%);
|
|
$colorTabBodyBg: $colorBodyBg;
|
|
$colorTabBodyFg: pullForward($colorBodyFg, 20%);
|
|
$colorTabHeaderBg: pullForward($colorBodyBg, 10%);
|
|
$colorTabHeaderFg: pullForward($colorBodyFg, 20%);
|
|
$colorTabHeaderBorder: $colorBodyBg;
|
|
|
|
// Plot
|
|
$colorPlotBg: rgba(black, 0.05);
|
|
$colorPlotFg: $colorBodyFg;
|
|
$colorPlotHash: $colorTick;
|
|
$stylePlotHash: dashed;
|
|
$colorPlotAreaBorder: $colorInteriorBorder;
|
|
$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
|
|
|
|
// Tree
|
|
$colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);
|
|
$colorItemTreeHoverFg: pullForward($colorBodyFg, $hoverRatioPercent);
|
|
$colorItemTreeIcon: $colorKey;
|
|
$colorItemTreeIconHover: $colorItemTreeIcon;
|
|
$colorItemTreeFg: $colorBodyFg;
|
|
$colorItemTreeSelectedBg: pushBack($colorKey, 15%);
|
|
$colorItemTreeSelectedFg: $colorBodyBg;
|
|
$colorItemTreeEditingBg: #caf1ff;
|
|
$colorItemTreeEditingFg: $colorEditAreaFg;
|
|
$colorItemTreeVC: $colorBodyFg;
|
|
$colorItemTreeVCHover: $colorKey;
|
|
$colorItemTreeSelectedVC: $colorBodyBg;
|
|
$shdwItemTreeIcon: none;
|
|
|
|
// Scrollbar
|
|
$scrollbarTrackSize: 10px;
|
|
$scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px;
|
|
$scrollbarTrackColorBg: rgba(#000, 0.2);
|
|
$scrollbarThumbColor: darken($colorBodyBg, 50%);
|
|
$scrollbarThumbColorHov: $colorKey;
|
|
$scrollbarThumbColorOverlay: darken($colorOvrBg, 50%);
|
|
$scrollbarThumbColorOverlayHov: $scrollbarThumbColorHov;
|
|
|
|
// Splitter
|
|
$splitterD: 24px;
|
|
$splitterHandleD: 2px;
|
|
$colorSplitterBg: pullForward($colorBodyBg, 10%);
|
|
$splitterShdw: none;
|
|
$splitterEndCr: none;
|
|
$colorSplitterHover: none;
|
|
$colorSplitterActive: $colorKey;
|
|
|
|
// Mobile
|
|
$colorMobilePaneLeft: darken($colorBodyBg, 2%);
|
|
|
|
// Datetime Picker, Calendar
|
|
$colorCalCellHovBg: $colorKey;
|
|
$colorCalCellHovFg: $colorKeyFg;
|
|
$colorCalCellSelectedBg: $colorItemTreeSelectedBg;
|
|
$colorCalCellSelectedFg: $colorItemTreeSelectedFg;
|
|
$colorCalCellInMonthBg: pullForward($colorMenuBg, 5%);
|
|
|
|
// About Screen
|
|
$colorAboutLink: #84b3ff;
|
|
|
|
// Loading
|
|
$colorLoadingFg: $colorAlt1;
|
|
$colorLoadingBg: rgba($colorLoadingFg, 0.1);
|