[Mobile] IN PROGRESS: Misc layout tweaks; treeview pane styling

open #74
Treeview pane darkened;
Spacing in frame tweaked;
#content-area in right pane hidden
when treeview expanded for
phone portrait only;
Removed mobile-pane and
desktop-browse classes from markup;

platform/commonUI/general/res/sass/mobile/_layout.scss

@@ -24,15 +24,22 @@
     // Wrapper of the entire 2 panes, only enacted on
     // phone and tablet. Also for the panes
     .browse-wrapper,
-    .mobile-pane {
-        position: absolute;
+    .pane {
         top: 0 !important; right: 0; bottom: 0; left: 0;
     }
 
-    .mobile-pane.right-repr {
+    .pane.left.treeview {
+        background-color: $colorMobilePaneLeft;
+    }
+
+    .pane.right-repr {
         //@include test();
         @include slMenuTransitions;
         margin-left: 0 !important;
+        #content-area {
+            @include slMenuTransitions;
+            opacity: 1;
+        }
     }
 
     .user-environ .browse-area,
@@ -55,7 +62,7 @@
         @include user-select(none);
         // Sets the left tree menu when the tree
         // is hidden.
-        .mobile-pane.left {
+        .pane.left.treeview {
             opacity: 0;
             right: 100% !important;
             width: auto !important;
@@ -64,10 +71,8 @@
         }
         // Sets the right represenation when
         // the tree is hidden.
-        .mobile-pane.right-repr {
-            //@include slMenuTransitions;
+        .pane.right-repr {
             left: 0 !important;
-            //width: 100% !important;
         }
     }
 
@@ -80,7 +85,7 @@
         @include user-select(none);
 
         // Sets the left tree menu when the tree is shown.
-        .mobile-pane.left {
+        .pane.left.treeview {
             @include trans-prop-nice(opacity, .4s);
             @include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%));
             opacity: 1;
@@ -90,8 +95,7 @@
             width: $proporMenuWithView !important;
         }
         // Sets the right representation when the tree is shown.
-        .mobile-pane.right-repr {
-            //@include slMenuTransitions; CH MOVED
+        .pane.right-repr {
             left: $proporMenuWithView !important;
             //width: auto !important;
 
@@ -146,12 +150,15 @@
 
 @include phonePortrait {
     .browse-showtree {
-        .mobile-pane.left {
+        .pane.left.treeview {
             width: $proporMenuOnly !important;
         }
-        .mobile-pane.right-repr {
+        .pane.right-repr {
             left: 0 !important;
             transform: translateX($proporMenuOnly);
+            #content-area {
+                opacity: 0;
+            }
         }
     }
 }