Markup / scss refactor WIP

- Add some initial theme files; pull back from theme "override"
approach;
- Splitters refined;
- Style cleanups;

src/ui/components/controls/splitter.vue

@@ -6,45 +6,44 @@
 </template>
 
 <style lang="scss">
+    @import "~styles/constants";
+    @import "~styles/constants-snow";
+
     .c-splitter {
         $c: #06f;
-        $s: 10px;
+        $size: $splitterHandleD;
+        $margin: 0px;
+        $hitMargin: 7px;
+
+        background: $colorSplitterBg;
 
         &:before {
+            // Bigger hit area
             content: '';
             display: block;
-            background: #ccc;
             position: absolute;
+            z-index: 2;
         }
 
         &:hover {
-            background: rgba($c, 0.3);
-            &:before {
-                background: $c;
-            }
+            background: $colorSplitterHover;
         }
 
         &-vertical {
             cursor: col-resize;
-            width: $s;
+            width: $size;
+            margin: 0 $margin;
             &:before {
-                // Divider line
-                width: 1px;
-                height: 100%;
-                left: 50%;
-                transform: translateX(-50%);
+                top: 0; right: $hitMargin * -1; bottom: 0; left: $hitMargin * -1;
             }
         }
 
         &-horizontal {
             cursor: row-resize;
-            height: $s;
+            height: $size;
+            margin: $margin 0;
             &:before {
-                // Divider line
-                width: 100%;
-                height: 1px;
-                top: 50%;
-                transform: translateY(-50%);
+                top: $hitMargin * -1; right: 0; bottom: $hitMargin * -1; left: 0;
             }
         }
     }

src/ui/components/layout/Layout.vue

@@ -30,6 +30,7 @@
 
 <style lang="scss">
 @import "~styles/constants";
+@import "~styles/constants-snow";
 
 /******************************* SHELL */
 .l-shell {
@@ -40,8 +41,7 @@
 
     /********** STATUS AREA */
     &__status {
-        background: #666;
-        color: #ccc;
+        border-bottom: 1px solid $colorInteriorBorder;
         flex: 0 1 auto;
         height: 40px;
         order: 1;
@@ -57,13 +57,12 @@
     }
 
     &__object-view {
-        background: #cc0;
         flex: 1 1 auto;
         padding: $interiorMarginLg;
     }
 
     &__time-conductor {
-        background: #cac;
+        border-top: 1px solid $colorInteriorBorder;
         min-height: 50px;
         padding: $interiorMarginLg;
     }
@@ -83,7 +82,7 @@
     }
 
     &__pane-tree {
-        background: #f90;
+        background: $colorTreeBg;
         padding: $interiorMarginLg;
         width: 300px
     }

src/ui/components/layout/MctInspector.vue

@@ -20,7 +20,6 @@
         height: 100%;
 
         > [class*="__"] {
-            background: #f9c;
             min-height: 50px;
             padding: $interiorMarginLg;
         }