[Frontend] Styling for TOI element in TC

Fixes #933
Fixes #1193
WIP, tweaking TOI in TC

Author: charlesh88

platform/commonUI/general/res/sass/plots/_plots-main.scss

@@ -90,10 +90,9 @@
 
         .l-toi-holder {
             //@include test(green);
-            $cBg: #666  ;
+            $cBg: $toiColorBg;
             $cBgPinnedOpacity: 0.3;
-            $cBgPinned: rgba($colorKey, 0.4);
-            //@include transform(translateX(-50%));
+            $cBgPinned: $toiColorBgPinned;
             pointer-events: none;
             position: absolute;
             top: 0;
@@ -103,42 +102,34 @@
             width: 20%; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
             &:before {
                 // Vertical line
-                //background-color: $cBg;
                 border-left: 1px dashed $cBg;
                 content:'';
                 display: block;
                 left: 50%;
-                //@include transform(translateX(-50%));
                 position: absolute;
                 top: 0; bottom: 0;
                 width: 1px;
             }
             .l-toi-val {
-                //@include test(green);
                 background-color: $cBg;
-                color: #fff;
+                color: $toiColorFg;
                 box-sizing: border-box;
-                //display: inline-block;
                 padding: $interiorMarginSm $interiorMarginSm;
                 position: absolute;
                 text-align: center;
-                //white-space: nowrap;
                 width: 100%;
                 bottom: -2px;
                 border-radius: $controlCr;
                 .val {
                     @include reverseEllipsis();
-                    //display: inline-block;
                 }
                 .t-unpin-button {
-                    //display: inline-block;
                     margin-left: $interiorMarginSm;
                     pointer-events: auto;
                 }
             }
 
             &.pinned {
-                //opacity: 0.4;
                 &:before {
                     border-left-color: $cBgPinned;
                     border-left-style: solid;

platform/commonUI/themes/espresso/res/sass/_constants.scss

@@ -103,6 +103,14 @@ $colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
 $colorInspectorSectionHeaderBg: $colorFormSectionHeader;
 $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
+// Time of Interest
+$toiColorBg: #666;
+$toiColorBgHov: #999;
+$toiColorFg: #fff;
+$toiColorBgPinned: rgba($colorKey, 0.4);
+$toiColorFgPinned: #fff;
+
+
 // Status colors, mainly used for messaging and item ancillary symbols
 $colorStatusFg: #ccc;
 $colorStatusDefault: #ccc;

platform/commonUI/themes/snow/res/sass/_constants.scss

@@ -103,6 +103,13 @@ $colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
 $colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
 $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
+// Time of Interest
+$toiColorBg: #666;
+$toiColorBgHov: #999;
+$toiColorFg: #fff;
+$toiColorBgPinned: rgba($colorKey, 0.4);
+$toiColorFgPinned: #fff;
+
 // Status colors, mainly used for messaging and item ancillary symbols
 $colorStatusFg: #fff;
 $colorStatusDefault: #ccc;

platform/features/conductor-v2/conductor/res/sass/_time-conductor-base.scss

@@ -254,8 +254,8 @@
     }
 
     .l-toi-holder {
-        $c: $colorClickIcon;
-        $cHov: $colorClickIconHov;
+        $c: $toiColorBg;
+        $cHov: $toiColorBgHov;
         $linesVOffset: 2px;
         @include transform(translateX(-50%));
         top: 0px; bottom: 0px;
@@ -283,7 +283,7 @@
         }
 
         .l-toi {
-            $d: $timeCondTOIIconD; //$r2H * 0.65;
+            $d: $timeCondTOIIconD;
             @include transform(translate(-50%, -50%));
             color: $c;
             font-size: $d;