mirror of
https://github.com/nasa/openmct.git
synced 2025-02-21 17:57:04 +00:00
[Frontend] Time Controller Markup and Styling
open #1515 open #117 Changed slider elements layout from relative to absolute positioning; Refined layout in input-holder; Tweaks to hover classes;
This commit is contained in:
Charles Hacskaylo
parent
9f7dc1da9b
commit
825d93cee3
@ -29,6 +29,9 @@
|
||||
}
|
||||
|
||||
.ui-symbol {
|
||||
&.type-icon {
|
||||
color: $colorObjHdrIc;
|
||||
}
|
||||
&.icon {
|
||||
color: $colorKey;
|
||||
&.alert {
|
||||
|
||||
@ -347,9 +347,10 @@
|
||||
/* This doesn't work on an element inside an element with absolute positioning that has height: auto */
|
||||
//position: relative;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
@include webkitProp(transform, translateY(-50%));
|
||||
//-webkit-transform: translateY(-50%);
|
||||
//-ms-transform: translateY(-50%);
|
||||
//transform: translateY(-50%);
|
||||
}
|
||||
|
||||
@mixin verticalCenterBlock($holderH, $itemH) {
|
||||
|
||||
@ -1,12 +1,9 @@
|
||||
.l-time-controller {
|
||||
$timeRangeSliderLROffset: 125px;
|
||||
//$sliderKnobW: 9px;
|
||||
$r1H: 20px;
|
||||
$r1H: 33px;
|
||||
$r2H: 20px;
|
||||
$r3H: 10px;
|
||||
$r3H: 20px;
|
||||
|
||||
position: relative;
|
||||
margin: $interiorMarginLg 0;
|
||||
min-width: 400px;
|
||||
|
||||
.l-time-range-inputs-holder,
|
||||
@ -18,8 +15,10 @@
|
||||
.l-time-range-slider-holder,
|
||||
.l-time-range-ticks-holder
|
||||
{
|
||||
margin-bottom: $interiorMargin;
|
||||
position: relative;
|
||||
//@include test();
|
||||
@include absPosDefault(0, visible);
|
||||
@include box-sizing(border-box);
|
||||
top: auto;
|
||||
}
|
||||
.l-time-range-slider,
|
||||
.l-time-range-ticks {
|
||||
@ -29,10 +28,19 @@
|
||||
|
||||
.l-time-range-inputs-holder {
|
||||
//@include test(red);
|
||||
height: $r1H;
|
||||
.l-time-range-input {
|
||||
//display: inline-block;
|
||||
margin-right: $interiorMarginLg;
|
||||
height: $r1H; bottom: $r2H + $r3H + ($interiorMarginSm * 2);
|
||||
padding-top: $interiorMargin;
|
||||
border-top: 1px solid $colorInteriorBorder;
|
||||
.type-icon {
|
||||
font-size: 120%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.l-time-range-input,
|
||||
.l-time-range-inputs-elem {
|
||||
margin-right: $interiorMargin;
|
||||
.lbl {
|
||||
color: $colorPlotLabelFg;
|
||||
}
|
||||
.ui-symbol.icon {
|
||||
font-size: 11px;
|
||||
width: 11px;
|
||||
@ -48,35 +56,36 @@
|
||||
|
||||
.l-time-range-slider-holder {
|
||||
//@include test(green);
|
||||
height: $r2H;
|
||||
height: $r2H; bottom: $r3H + ($interiorMarginSm * 1);
|
||||
.range-holder {
|
||||
@include box-shadow(none);
|
||||
background: none;
|
||||
border: none;
|
||||
//height: 75%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-time-range-ticks-holder {
|
||||
height: $r3H;
|
||||
.l-time-range-ticks {
|
||||
border-top: 1px solid $colorInteriorBorder;
|
||||
border-top: 1px solid $colorTick;
|
||||
.tick {
|
||||
background-color: $colorInteriorBorder;
|
||||
background-color: $colorTick;
|
||||
border:none;
|
||||
height: 5px;
|
||||
width: 1px;
|
||||
margin-left: -1px;
|
||||
position: absolute;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.l-time-range-tick-label {
|
||||
color: lighten($colorInteriorBorder, 20%);
|
||||
@include webkitProp(transform, translateX(-50%));
|
||||
color: $colorPlotLabelFg;
|
||||
display: inline-block;
|
||||
font-size: 0.7em;
|
||||
position: absolute;
|
||||
margin-left: -0.5 * $tickLblW;
|
||||
text-align: center;
|
||||
top: $r3H;
|
||||
width: $tickLblW;
|
||||
top: 8px;
|
||||
white-space: nowrap;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
@ -86,19 +95,13 @@
|
||||
.knob {
|
||||
width: $sliderKnobW;
|
||||
.range-value {
|
||||
//$w: 75px;
|
||||
//@include test();
|
||||
//@include verticalCenter();
|
||||
position: absolute;
|
||||
height: $r2H;
|
||||
line-height: $r2H;
|
||||
//top: 50%;
|
||||
//margin-top: -7px; // Label is 13px high
|
||||
white-space: nowrap;
|
||||
//width: $w;
|
||||
}
|
||||
&:hover .range-value {
|
||||
color: $colorKey;
|
||||
color: $sliderColorKnobHov;
|
||||
}
|
||||
&.knob-l {
|
||||
//margin-left: $sliderKnobW / -2;
|
||||
@ -116,6 +119,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
//.slot.range-holder {
|
||||
// background-color: $sliderColorRangeHolder;
|
||||
//}
|
||||
|
||||
.s-time-range-val {
|
||||
//@include test();
|
||||
|
||||
@ -89,7 +89,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
|
||||
.gl-plot-label,
|
||||
.l-plot-label {
|
||||
// @include test(yellow);
|
||||
color: lighten($colorBodyFg, 20%);
|
||||
color: $colorPlotLabelFg;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
// text-transform: uppercase;
|
||||
|
||||
@ -24,12 +24,13 @@
|
||||
|
||||
<div class="l-time-controller" ng-controller="TimeRangeController">
|
||||
<div class="l-time-range-inputs-holder">
|
||||
<span class="l-time-range-input">
|
||||
Start:
|
||||
<span class="s-time-range-val time-range-start">
|
||||
<span class="l-time-range-inputs-elem ui-symbol type-icon">C</span>
|
||||
<span class="l-time-range-input" ng-controller="ToggleController as t1">
|
||||
<!--<span class="lbl">Start</span>-->
|
||||
<span class="s-btn time-range-start" ng-click="t1.toggle()">
|
||||
<span class="val">{{startOuterText}}</span>
|
||||
<span ng-controller="ToggleController as t1">
|
||||
<a class="ui-symbol icon icon-calendar" ng-click="t1.toggle()"></a>
|
||||
<span>
|
||||
<a class="ui-symbol icon icon-calendar"></a>
|
||||
<mct-popup ng-if="t1.isActive()">
|
||||
<div style="background: #222;"
|
||||
mct-click-elsewhere="t1.setState(false)">
|
||||
@ -44,12 +45,14 @@
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span class="l-time-range-input">
|
||||
End:
|
||||
<span class="s-time-range-val time-range-end">
|
||||
<span class="l-time-range-inputs-elem lbl">to</span>
|
||||
|
||||
<span class="l-time-range-input" ng-controller="ToggleController as t2">
|
||||
<!--<span class="lbl">End</span>-->
|
||||
<span class="s-btn l-time-range-input" ng-click="t2.toggle()">
|
||||
<span class="val">{{endOuterText}}</span>
|
||||
<span ng-controller="ToggleController as t2">
|
||||
<a class="ui-symbol icon icon-calendar" ng-click="t2.toggle()"></a>
|
||||
<span>
|
||||
<a class="ui-symbol icon icon-calendar"></a>
|
||||
<mct-popup ng-if="t2.isActive()">
|
||||
<div style="background: #222;"
|
||||
mct-click-elsewhere="t2.setState(false)">
|
||||
|
||||
@ -596,49 +596,52 @@ mct-container {
|
||||
border-right: 5px solid transparent; }
|
||||
|
||||
/* line 32, ../../../../general/res/sass/_icons.scss */
|
||||
.ui-symbol.type-icon {
|
||||
color: #cccccc; }
|
||||
/* line 35, ../../../../general/res/sass/_icons.scss */
|
||||
.ui-symbol.icon {
|
||||
color: #0099cc; }
|
||||
/* line 34, ../../../../general/res/sass/_icons.scss */
|
||||
/* line 37, ../../../../general/res/sass/_icons.scss */
|
||||
.ui-symbol.icon.alert {
|
||||
color: #ff3c00; }
|
||||
/* line 36, ../../../../general/res/sass/_icons.scss */
|
||||
/* line 39, ../../../../general/res/sass/_icons.scss */
|
||||
.ui-symbol.icon.alert:hover {
|
||||
color: #ff8a66; }
|
||||
/* line 40, ../../../../general/res/sass/_icons.scss */
|
||||
/* line 43, ../../../../general/res/sass/_icons.scss */
|
||||
.ui-symbol.icon.major {
|
||||
font-size: 1.65em; }
|
||||
/* line 44, ../../../../general/res/sass/_icons.scss */
|
||||
/* line 47, ../../../../general/res/sass/_icons.scss */
|
||||
.ui-symbol.icon-calendar:after {
|
||||
content: "\e605"; }
|
||||
|
||||
/* line 49, ../../../../general/res/sass/_icons.scss */
|
||||
/* line 52, ../../../../general/res/sass/_icons.scss */
|
||||
.bar .ui-symbol {
|
||||
display: inline-block; }
|
||||
|
||||
/* line 53, ../../../../general/res/sass/_icons.scss */
|
||||
/* line 56, ../../../../general/res/sass/_icons.scss */
|
||||
.invoke-menu {
|
||||
text-shadow: none;
|
||||
display: inline-block; }
|
||||
|
||||
/* line 58, ../../../../general/res/sass/_icons.scss */
|
||||
/* line 61, ../../../../general/res/sass/_icons.scss */
|
||||
.s-menu .invoke-menu,
|
||||
.icon.major .invoke-menu {
|
||||
margin-left: 3px; }
|
||||
|
||||
/* line 63, ../../../../general/res/sass/_icons.scss */
|
||||
/* line 66, ../../../../general/res/sass/_icons.scss */
|
||||
.menu .type-icon,
|
||||
.tree-item .type-icon,
|
||||
.super-menu.menu .type-icon {
|
||||
position: absolute; }
|
||||
|
||||
/* line 73, ../../../../general/res/sass/_icons.scss */
|
||||
/* line 76, ../../../../general/res/sass/_icons.scss */
|
||||
.l-icon-link:before {
|
||||
content: "\f4"; }
|
||||
|
||||
/* line 77, ../../../../general/res/sass/_icons.scss */
|
||||
/* line 80, ../../../../general/res/sass/_icons.scss */
|
||||
.l-icon-alert {
|
||||
display: none !important; }
|
||||
/* line 79, ../../../../general/res/sass/_icons.scss */
|
||||
/* line 82, ../../../../general/res/sass/_icons.scss */
|
||||
.l-icon-alert:before {
|
||||
color: #ff3c00;
|
||||
content: "!"; }
|
||||
@ -1867,7 +1870,7 @@ label.checkbox.custom {
|
||||
left: auto; }
|
||||
/* line 317, ../../../../general/res/sass/controls/_controls.scss */
|
||||
.slider .knob:hover {
|
||||
background-color: rgba(0, 153, 204, 0.5); }
|
||||
background-color: #0099cc; }
|
||||
/* line 335, ../../../../general/res/sass/controls/_controls.scss */
|
||||
.slider .range {
|
||||
-moz-transition-property: visibility, opacity, background-color, border-color;
|
||||
@ -2224,20 +2227,28 @@ label.checkbox.custom {
|
||||
|
||||
/* line 1, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller {
|
||||
position: relative;
|
||||
margin: 10px 0;
|
||||
min-width: 400px; }
|
||||
/* line 12, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
/* line 9, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-inputs-holder,
|
||||
.l-time-controller .l-time-range-slider {
|
||||
font-size: 0.8em; }
|
||||
/* line 17, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
/* line 14, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-inputs-holder,
|
||||
.l-time-controller .l-time-range-slider-holder,
|
||||
.l-time-controller .l-time-range-ticks-holder {
|
||||
margin-bottom: 5px;
|
||||
position: relative; }
|
||||
/* line 24, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
overflow: visible;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
top: auto; }
|
||||
/* line 23, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-slider,
|
||||
.l-time-controller .l-time-range-ticks {
|
||||
overflow: visible;
|
||||
@ -2248,77 +2259,94 @@ label.checkbox.custom {
|
||||
left: 0;
|
||||
width: auto;
|
||||
height: auto; }
|
||||
/* line 30, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
/* line 29, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-inputs-holder {
|
||||
height: 20px; }
|
||||
/* line 33, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-inputs-holder .l-time-range-input {
|
||||
margin-right: 10px; }
|
||||
/* line 36, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-inputs-holder .l-time-range-input .ui-symbol.icon {
|
||||
height: 33px;
|
||||
bottom: 46px;
|
||||
padding-top: 5px;
|
||||
border-top: 1px solid rgba(153, 153, 153, 0.1); }
|
||||
/* line 34, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-inputs-holder .type-icon {
|
||||
font-size: 120%;
|
||||
vertical-align: middle; }
|
||||
/* line 38, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-inputs-holder .l-time-range-input,
|
||||
.l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem {
|
||||
margin-right: 5px; }
|
||||
/* line 41, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-inputs-holder .l-time-range-input .lbl,
|
||||
.l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .lbl {
|
||||
color: #666666; }
|
||||
/* line 44, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-inputs-holder .l-time-range-input .ui-symbol.icon,
|
||||
.l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .ui-symbol.icon {
|
||||
font-size: 11px;
|
||||
width: 11px; }
|
||||
/* line 43, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
/* line 51, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-slider,
|
||||
.l-time-controller .l-time-range-ticks {
|
||||
left: 125px;
|
||||
right: 125px; }
|
||||
/* line 49, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
/* line 57, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-slider-holder {
|
||||
height: 20px; }
|
||||
/* line 52, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
height: 20px;
|
||||
bottom: 23px; }
|
||||
/* line 60, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-slider-holder .range-holder {
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
border: none; }
|
||||
/* line 60, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
/* line 67, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-ticks-holder {
|
||||
height: 10px; }
|
||||
/* line 62, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
height: 20px; }
|
||||
/* line 69, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks {
|
||||
border-top: 1px solid rgba(153, 153, 153, 0.1); }
|
||||
/* line 64, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.2); }
|
||||
/* line 71, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick {
|
||||
background-color: rgba(153, 153, 153, 0.1);
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
border: none;
|
||||
height: 5px;
|
||||
width: 1px;
|
||||
margin-left: -1px; }
|
||||
/* line 69, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
margin-left: -1px;
|
||||
position: absolute; }
|
||||
/* line 78, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick:first-child {
|
||||
margin-left: 0; }
|
||||
/* line 72, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
/* line 81, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick .l-time-range-tick-label {
|
||||
color: rgba(204, 204, 204, 0.1);
|
||||
transform: translateX(-50%);
|
||||
-webkit-transform: translateX(-50%);
|
||||
color: #666666;
|
||||
display: inline-block;
|
||||
font-size: 0.7em;
|
||||
position: absolute;
|
||||
margin-left: -25px;
|
||||
text-align: center;
|
||||
top: 10px;
|
||||
width: 50px;
|
||||
top: 8px;
|
||||
white-space: nowrap;
|
||||
z-index: 2; }
|
||||
/* line 86, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
/* line 95, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .knob {
|
||||
width: 5px; }
|
||||
/* line 88, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
/* line 97, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .knob .range-value {
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
white-space: nowrap; }
|
||||
/* line 100, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
/* line 103, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .knob:hover .range-value {
|
||||
color: #0099cc; }
|
||||
/* line 105, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
/* line 108, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .knob.knob-l .range-value {
|
||||
text-align: right;
|
||||
right: 10px; }
|
||||
/* line 112, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
/* line 115, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .knob.knob-r .range-value {
|
||||
left: 10px; }
|
||||
|
||||
/* line 120, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
/* line 126, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.s-time-range-val {
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
@ -4923,7 +4951,7 @@ table {
|
||||
/* line 89, ../../../../general/res/sass/plots/_plots-main.scss */
|
||||
.gl-plot .gl-plot-label,
|
||||
.gl-plot .l-plot-label {
|
||||
color: #cccccc;
|
||||
color: #666666;
|
||||
position: absolute;
|
||||
text-align: center; }
|
||||
/* line 97, ../../../../general/res/sass/plots/_plots-main.scss */
|
||||
|
||||
@ -21,10 +21,11 @@ $colorBtnIcon: $colorKey;
|
||||
$colorInvokeMenu: #fff;
|
||||
$contrastInvokeMenuPercent: 20%;
|
||||
$sliderColorBase: $colorKey;
|
||||
$sliderColorRangeHolder: rgba(black, 0.1);
|
||||
$sliderColorRange: rgba($sliderColorBase, 0.3);
|
||||
$sliderColorRangeHov: rgba($sliderColorBase, 0.5);
|
||||
$sliderColorKnob: $sliderColorRange;
|
||||
$sliderColorKnobHov: $sliderColorRangeHov;
|
||||
$sliderColorKnobHov: $sliderColorBase;
|
||||
$sliderKnobW: 5px;
|
||||
|
||||
// General Colors
|
||||
@ -40,6 +41,7 @@ $colorFormSectionHeader: rgba(#000, 0.2);
|
||||
$colorInvokeMenu: #fff;
|
||||
$colorObjHdrTxt: $colorBodyFg;
|
||||
$colorObjHdrIc: pullForward($colorObjHdrTxt, 20%);
|
||||
$colorTick: rgba(white, 0.2);
|
||||
|
||||
// Menu colors
|
||||
$colorMenuBg: pullForward($colorBodyBg, 23%);
|
||||
@ -112,9 +114,10 @@ $colorTabHeaderBorder: $colorBodyBg;
|
||||
// Plot
|
||||
$colorPlotBg: rgba(black, 0.1);
|
||||
$colorPlotFg: $colorBodyFg;
|
||||
$colorPlotHash: rgba(white, 0.2);
|
||||
$colorPlotHash: $colorTick;
|
||||
$stylePlotHash: dashed;
|
||||
$colorPlotAreaBorder: $colorInteriorBorder;
|
||||
$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
|
||||
|
||||
// Tree
|
||||
$colorItemTreeIcon: $colorKey;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -12,7 +12,7 @@ $basicCr: 4px;
|
||||
$controlCr: $basicCr;
|
||||
$smallCr: 3px;
|
||||
|
||||
// Buttons
|
||||
// Buttons and Controls
|
||||
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
|
||||
$colorBtnFg: #fff;
|
||||
$colorBtnMajorBg: $colorKey;
|
||||
@ -20,6 +20,13 @@ $colorBtnMajorFg: $colorKeyFg;
|
||||
$colorBtnIcon: #eee;
|
||||
$colorInvokeMenu: #000;
|
||||
$contrastInvokeMenuPercent: 40%;
|
||||
$sliderColorBase: $colorKey;
|
||||
$sliderColorRangeHolder: rgba(black, 0.07);
|
||||
$sliderColorRange: rgba($sliderColorBase, 0.3);
|
||||
$sliderColorRangeHov: rgba($sliderColorBase, 0.5);
|
||||
$sliderColorKnob: $sliderColorRange;
|
||||
$sliderColorKnobHov: $sliderColorBase;
|
||||
$sliderKnobW: 5px;
|
||||
|
||||
// General Colors
|
||||
$colorAlt1: #ff6600;
|
||||
@ -32,6 +39,7 @@ $colorGridLines: rgba(#000, 0.05);
|
||||
$colorInvokeMenu: #fff;
|
||||
$colorObjHdrTxt: $colorBodyFg;
|
||||
$colorObjHdrIc: pushBack($colorObjHdrTxt, 30%);
|
||||
$colorTick: rgba(black, 0.2);
|
||||
|
||||
// Menu colors
|
||||
$colorMenuBg: pushBack($colorBodyBg, 10%);
|
||||
@ -104,9 +112,10 @@ $colorTabHeaderBorder: $colorBodyBg;
|
||||
// Plot
|
||||
$colorPlotBg: rgba(black, 0.05);
|
||||
$colorPlotFg: $colorBodyFg;
|
||||
$colorPlotHash: rgba(black, 0.2);
|
||||
$colorPlotHash: $colorTick;
|
||||
$stylePlotHash: dashed;
|
||||
$colorPlotAreaBorder: $colorInteriorBorder;
|
||||
$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
|
||||
|
||||
// Tree
|
||||
$colorItemTreeIcon: $colorKey;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user