[Frontend] Styling for Time Conductor v2

Fixes #933
In-progress: color tweaks, bar sizing,
field widths

Author: charlesh88

platform/commonUI/general/res/sass/_constants.scss

@@ -48,7 +48,7 @@ $uePaneMiniTabW: 10px;
 $uePaneMiniTabCollapsedW: 11px;
 $ueEditLeftPaneW: 75%;
 $treeSearchInputBarH: 25px;
-$ueTimeControlH: (25px, 18px, 20px);
+$ueTimeControlH: (25px, 4px, 20px);
 /*************** Panes */
 $ueBrowseLeftPaneTreeMinW: 150px;
 $ueBrowseLeftPaneTreeMaxW: 35%;

platform/commonUI/general/res/sass/controls/_time-conductor.scss

@@ -35,7 +35,6 @@
     .time-delta {
         &:before {
             @extend .ui-symbol;
-            margin-right: $interiorMarginSm;
         }
     }
 
@@ -52,7 +51,7 @@
 
     .l-time-conductor-inputs-holder {
         $trInputW: 180px;
-        $hmInputW: 80px;
+        $hmInputW: 60px;
         $ticksBlockerFadeW: 50px;
         $iconCalendarW: 16px;
         $wBgColor: $colorBodyBg;
@@ -92,7 +91,6 @@
         $c: $colorTick;
         height: $r1H;
         mct-conductor-axis {
-            //@include transform(translateY(1px));
             display: block;
             position: relative;
             width: 100%;
@@ -121,7 +119,7 @@
         }
     }
     .l-data-visualization {
-        background: rgba($colorTick, 0.3);
+        background: $colorTimeCondDataVisBg;
         height: $r2H;
     }
 
@@ -158,7 +156,7 @@
         }
 
         .l-data-visualization {
-            background: rgba($colorTimeCondKeyBg, 0.5) !important
+            background: $colorTimeCondDataVisRtBg !important
         }
         .mode-selector .s-menu-btn {
             @include btnSubtle($colorTimeCondKeyBg, pullForward($colorTimeCondKeyBg, $ltGamma), $colorTimeCondKeyFg);

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

@@ -211,4 +211,6 @@ $colorLoadingBg: rgba($colorBodyFg, 0.2);
 
 // Time Conductor
 $colorTimeCondKeyBg: #1d7a96;
-$colorTimeCondKeyFg: #fff;
+$colorTimeCondKeyFg: #fff;
+$colorTimeCondDataVisBg: pushBack($colorTick, 20%);
+$colorTimeCondDataVisRtBg: pushBack($colorTimeCondKeyBg, 30%);

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

@@ -212,3 +212,5 @@ $colorLoadingBg: rgba($colorLoadingFg, 0.1);
 // Time Conductor
 $colorTimeCondKeyBg: #0092b3;
 $colorTimeCondKeyFg: #fff;
+$colorTimeCondDataVisBg: pushBack($colorTick, 20%);
+$colorTimeCondDataVisRtBg: pushBack($colorTimeCondKeyBg, 30%);