From 0837129ad5ada4d3224944030adbeec00c0c286f Mon Sep 17 00:00:00 2001
From: charlesh88 <charlesh88@gmail.com>
Date: Thu, 4 Apr 2019 23:08:09 -0700
Subject: [PATCH 1/2] Styles for td.is-selectable

- Required for VISTA `channel-list-selection`;
- Added new theme constants for editUIColorBg, Fg;
---
 src/styles-new/_constants-espresso.scss  |  4 +++-
 src/styles-new/_constants-maelstrom.scss |  2 ++
 src/styles-new/_constants-snow.scss      |  4 +++-
 src/styles-new/_table.scss               | 18 ++++++++++++++++++
 4 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/styles-new/_constants-espresso.scss b/src/styles-new/_constants-espresso.scss
index 8eb8866b3f..6d590fa327 100644
--- a/src/styles-new/_constants-espresso.scss
+++ b/src/styles-new/_constants-espresso.scss
@@ -79,7 +79,7 @@ $colorKeyHov: #26d8ff;
 $colorKeyFilter: invert(36%) sepia(76%) saturate(2514%) hue-rotate(170deg) brightness(99%) contrast(101%);
 $colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%) contrast(100%);
 $colorKeySelectedBg: $colorKey;
-$uiColor: #00b2ff; // Resize bars, splitter bars, etc.
+$uiColor: #0093ff; // Resize bars, splitter bars, etc.
 $colorInteriorBorder: rgba($colorBodyFg, 0.2);
 $colorA: #ccc;
 $colorAHov: #fff;
@@ -143,6 +143,8 @@ $browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
 
 /************************************************** EDITING */
 $editUIColor: $uiColor; // Base color
+$editUIColorBg: $editUIColor;
+$editUIColorFg: #fff;
 $editUIColorHov: pullForward(saturate($uiColor, 10%), 20%); // Hover color when $editUIColor is applied as a base color
 $editUIBaseColor: #344b8d; // Base color, toolbar bg
 $editUIBaseColorHov: pullForward($editUIBaseColor, 20%);
diff --git a/src/styles-new/_constants-maelstrom.scss b/src/styles-new/_constants-maelstrom.scss
index 4b507392e3..7a40fc315a 100644
--- a/src/styles-new/_constants-maelstrom.scss
+++ b/src/styles-new/_constants-maelstrom.scss
@@ -147,6 +147,8 @@ $browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
 
 /************************************************** EDITING */
 $editUIColor: $uiColor; // Base color
+$editUIColorBg: $editUIColor;
+$editUIColorFg: #fff;
 $editUIColorHov: pullForward(saturate($uiColor, 10%), 20%); // Hover color when $editUIColor is applied as a base color
 $editUIBaseColor: #344b8d; // Base color, toolbar bg
 $editUIBaseColorHov: pullForward($editUIBaseColor, 20%);
diff --git a/src/styles-new/_constants-snow.scss b/src/styles-new/_constants-snow.scss
index b4a81ab271..7c65621ff5 100644
--- a/src/styles-new/_constants-snow.scss
+++ b/src/styles-new/_constants-snow.scss
@@ -143,6 +143,8 @@ $browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
 
 /************************************************** EDITING */
 $editUIColor: $uiColor; // Base color
+$editUIColorBg: $editUIColor;
+$editUIColorFg: #fff;
 $editUIColorHov: pullForward(saturate($uiColor, 10%), 20%); // Hover color when $editUIColor is applied as a base color
 $editUIBaseColor: #cae1ff; // Base color, toolbar bg
 $editUIBaseColorHov: pushBack($editUIBaseColor, 20%);
@@ -159,7 +161,7 @@ $editFrameBorderHov: 1px solid $editFrameColorHov; // Hover on selectable frames
 $editFrameColorSelected: #333; // Border of selected frames
 $editFrameColorHandleBg: $colorBodyBg; // Resize handle 'offset' color to make handle standout
 $editFrameColorHandleFg: $editFrameColorSelected; // Resize handle main color
-$editFrameSelectedShdw: rgba(black, 0.5) 0 1px 10px 1px;
+$editFrameSelectedShdw: rgba(black, 0.5) 0 1px 5px 2px;
 $editFrameSelectedBorder: 1px dashed $editFrameColorSelected; // Selected frame element
 $editFrameMovebarColorBg: $editFrameColor; // Movebar bg color
 $editFrameMovebarColorFg: pullForward($editFrameMovebarColorBg, 20%);  // Grippy lines, container size text
diff --git a/src/styles-new/_table.scss b/src/styles-new/_table.scss
index 558ffea32d..79dab3618c 100644
--- a/src/styles-new/_table.scss
+++ b/src/styles-new/_table.scss
@@ -53,6 +53,24 @@ table {
     a { color: $colorBtnMajorBg; }
 }
 
+.is-editing {
+    td.is-selectable {
+        &:hover {
+            background: rgba($editUIColorBg, 0.1);
+            box-shadow: inset rgba($editUIColorBg, 0.8) 0 0 0 1px;
+        }
+
+        &[s-selected] {
+            background: $editUIColorBg !important;
+            border: 1px solid $editUIColorFg !important;
+            color: $editUIColorFg !important;
+            box-shadow: $editFrameSelectedShdw;
+            z-index: 2;
+        }
+    }
+}
+
+/******************************************************** C-TABLE */
 div.c-table {
     // When c-table is used as a wrapper element in more complex table views
     height: 100%;

From c552afff171eebf7168166331929d40732e3d026 Mon Sep 17 00:00:00 2001
From: charlesh88 <charlesh88@gmail.com>
Date: Thu, 4 Apr 2019 23:29:50 -0700
Subject: [PATCH 2/2] Overlay preview scroll fix and styling

- Preview now handles overflow properly;
- Refined preview styles;
---
 src/ui/preview/Preview.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/ui/preview/Preview.vue b/src/ui/preview/Preview.vue
index 3af677eb4d..80e917442e 100644
--- a/src/ui/preview/Preview.vue
+++ b/src/ui/preview/Preview.vue
@@ -63,7 +63,11 @@
         }
 
         &__object-view {
+            background: $colorBodyBg;
+            border: 1px solid $colorInteriorBorder;
             flex: 1 1 auto;
+            overflow: auto;
+            padding: $interiorMargin;
 
             > div:not([class]) {
                 // Target an immediate child div without a class and make it display: contents