R&I Clock timer fixes (#2254)

* Clocks and timers styling WIP

- Markup, new styles;
- Renamed _legacy-plots.scss > _legacy;
- New $colorBodyFgEm constants - theme files all updated;

* Clocks and timers styling complete

* Styles clean up

- Moved legacy styles out of _global into _legacy.scss;

src/styles-new/_constants-espresso.scss

@@ -56,6 +56,7 @@ $basicCr: 4px;
 // Base colors
 $colorBodyBg: #393939;
 $colorBodyFg: #aaa;
+$colorBodyFgEm: #fff;
 $colorGenBg: #222;
 $colorHeadBg: #262626;
 $colorHeadFg: $colorBodyFg;

src/styles-new/_constants-maelstrom.scss

@@ -60,6 +60,7 @@ $basicCr: 4px;
 // Base colors
 $colorBodyBg: #393939;
 $colorBodyFg: #ccc;
+$colorBodyFgEm: #fff;
 $colorGenBg: #222;
 $colorHeadBg: #262626;
 $colorHeadFg: $colorBodyFg;

src/styles-new/_constants-snow.scss

@@ -56,6 +56,7 @@ $basicCr: 4px;
 // Base colors
 $colorBodyBg: #fcfcfc;
 $colorBodyFg: #666;
+$colorBodyFgEm: #333;
 $colorGenBg: #fff;
 $colorHeadBg: #eee;
 $colorHeadFg: $colorBodyFg;

src/styles-new/_global.scss

@@ -508,42 +508,3 @@ a.disabled {
         }
     }
 }
-
-/************************** TEMP LEGACY FIXES */
-.overlay {
-    .outer-holder {
-        background: $colorMenuBg;
-        color: $colorMenuFg !important;
-    }
-}
-
-.form .form-row {
-    .label {
-        color: $colorMenuFg !important;
-    }
-    .selector-list {
-        @include reactive-input();
-        background: $colorInputBg !important;
-        color: $colorInputFg !important;
-    }
-}
-
-.ui-symbol.view-control {
-    display: block;
-    transform-origin: center center;
-
-    &:before { content: $glyph-icon-arrow-right-equilateral; }
-
-    &.expanded {
-        transform: rotate(90deg);
-    }
-}
-
-.t-imagery {
-    display: contents;
-}
-
-.t-frame-outer {
-    min-width: 200px;
-    min-height: 200px;
-}

src/styles-new/_legacy.scss

@@ -20,6 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+/********************************************************************* PLOTS */
 mct-plot {
     display: contents;
 }
@@ -502,3 +503,112 @@ mct-plot {
         }
     }
 }
+/********************************************************* CLOCKS AND TIMERS */
+.c-clock,
+.c-timer {
+    display: flex;
+    align-items: center;
+    font-size: 1.25em;
+
+    > * {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: center;
+    }
+
+    &__value {
+        color: $colorBodyFgEm;
+    }
+}
+
+.c-clock {
+    > * + * { margin-left: $interiorMargin; }
+}
+
+.c-timer {
+    $ctrlW: 22px;
+
+    &__controls {
+        margin-right: 0;
+        min-width: 0;
+        overflow: hidden;
+        transition: $transOut;
+        width: 0;
+
+        .c-click-icon:before { font-size: 1em; }
+    }
+
+    &__direction {
+        font-size: 0.9em;
+        margin-right: $interiorMargin;
+    }
+
+    &__ng-controller {
+        font-size: 0;
+        width: 0;
+    }
+
+    &:hover {
+        .c-timer__controls {
+            transition: $transOut; // On purpose: want this to take a bit longer
+            margin-right: $interiorMargin;
+            width: $ctrlW * 2;
+        }
+
+        &.is-stopped .c-timer__controls { width: $ctrlW; }
+    }
+
+    &__direction,
+    &__value {
+        opacity: 0.5;
+    }
+
+    &.is-started {
+        .c-timer {
+            &__direction,
+            &__value {
+                opacity: 1;
+            }
+        }
+    }
+}
+
+/******************************************************************* VARIOUS */
+.overlay {
+    .outer-holder {
+        background: $colorMenuBg;
+        color: $colorMenuFg !important;
+    }
+}
+
+.form .form-row {
+    .label {
+        color: $colorMenuFg !important;
+    }
+    .selector-list {
+        @include reactive-input();
+        background: $colorInputBg !important;
+        color: $colorInputFg !important;
+    }
+}
+
+.ui-symbol.view-control {
+    display: block;
+    transform-origin: center center;
+
+    &:before { content: $glyph-icon-arrow-right-equilateral; }
+
+    &.expanded {
+        transform: rotate(90deg);
+    }
+}
+
+.t-imagery {
+    display: contents;
+}
+
+.t-frame-outer {
+    min-width: 200px;
+    min-height: 200px;
+}
+

src/styles-new/core.scss

@@ -29,7 +29,7 @@
 @import "status";
 @import "controls";
 @import "table";
-@import "legacy-plots";
+@import "legacy";
 
 /******************** LEGACY CSS */
 $output-bourbon-deprecation-warnings: false;

src/styles-new/legacy-styles.scss

@@ -69,7 +69,7 @@
 //!********************************* TO BE MOVED *!
 @import "../styles/autoflow";
 @import "../styles/features/imagery";
-@import "../styles/features/time-display";
+//@import "../styles/features/time-display";
 @import "../styles/widgets";
 //
 //!********************************* APP STARTUP *!