Refactoring of style files

Change-Id: I56d3641741f2289bb0f9dbaf641b85a401cf1042
diff --git a/dev/scss/main/view/matchtable.scss b/dev/scss/main/view/matchtable.scss
new file mode 100644
index 0000000..6239c61
--- /dev/null
+++ b/dev/scss/main/view/matchtable.scss
@@ -0,0 +1,148 @@
+@import "../../util";
+
+/**
+ * Table view
+ *
+ * The table view is complicated, as the
+ * first column has to be static.
+ */
+div.matchtable {
+
+  > div {
+    z-index:      20;
+    margin-left:  $left-distance - ($border-size / 2);
+    margin-right: $right-view-distance;
+    padding:      0;
+    overflow-x:   auto;
+    overflow-y:   visible;
+    width:        auto;
+  }
+
+  table {
+    display:         table;
+    border-collapse: separate;
+    border-spacing:  0px;
+  }
+
+  th {
+    color: $nearly-white;
+  }
+
+  // Use matchinfo cells for query creation
+  td,
+  tbody th,
+  thead th:not(:nth-child(1)):not(:nth-child(2)):not(.cutted) {
+    cursor: pointer;
+  }
+
+  td {
+    &:empty {
+      cursor: default;
+      // Fix for empty annotation lines:
+      &::after {
+        content:     " ";
+        white-space: pre;
+      }
+    }
+
+    // table for key-value pairs
+    &.matchkeyvalues {
+      padding: 0;
+      > div {
+        @include cell-info;
+        > span {
+          color:         $darkest-orange;
+          text-align:    right;
+          padding-right: .5em;
+          &::after {
+            content: ":"
+          }
+        }
+      }
+    }
+  }
+
+  tr {
+    outline: none;
+
+    // equal to dd.chosen
+    td.chosen,
+    th.chosen,
+    div.chosen {
+      background-color: $light-green !important;
+      color:            $nearly-white;
+    }
+
+    /**
+     * The first two columns.
+     */
+    > th:nth-of-type(1),
+    > th:nth-of-type(2) {
+      @include matchinfo-head;
+      position:       absolute;
+      z-index:        80;
+      vertical-align: middle;
+      left:           0px;
+    }
+
+    > th:nth-of-type(2) {
+      left: ($left-width / 2) + $border-size;
+    }
+
+    // Includes header line as well
+    > * {
+      @include cell-info;
+      border: ($border-size / 2) solid $dark-orange;
+    }
+
+    > td {
+      background-color: $middle-orange;
+      white-space:      nowrap;
+      vertical-align:   top;
+      text-align:       center;
+      &.mark {
+        background-color: $light-orange;
+      }
+    }
+
+    &:nth-child(even) > td {
+      background-color: $light-orange;
+      &.mark {
+        background-color: $middle-orange;
+      }
+    }
+  }
+
+  thead th {
+    background-color: $darker-orange;
+    border-top-width: 0px !important;
+    text-align:       center;
+
+    &:nth-of-type(1),
+    &:nth-of-type(2) {
+	    text-align: left;
+    }
+
+    &.mark {
+      background-color: $darkest-orange;
+    }
+
+    &.cutted {
+      background-color: $light-orange;
+
+      &::after {
+        @include icon-font;
+        content: $fa-cut;
+        color:   $light-green;
+        padding: {
+          left:  4pt;
+          right: 4pt;
+        }
+      }
+    }
+  }
+  
+  tbody > tr:nth-of-type(1) > th {
+    border-top-color: transparent;
+  }
+}
diff --git a/dev/scss/main/view/matchtree.scss b/dev/scss/main/view/matchtree.scss
new file mode 100644
index 0000000..96fb86a
--- /dev/null
+++ b/dev/scss/main/view/matchtree.scss
@@ -0,0 +1,44 @@
+@import "../../util";
+@import "tree";
+
+/**
+ * Matchtree view
+ */
+
+div.matchtree {
+  overflow-x:       hidden;
+  overflow-y:       visible;
+  padding:          0;
+  margin-top:       1pt;
+
+  // Label
+  h6 {
+    display:   inline;
+    font-size: inherit;
+    color:     $nearly-white;
+    margin:    0;
+    padding:   0 !important;
+    float:     left;
+
+    > span {
+      @include matchinfo-head;
+      @include cell-info;
+      display: inline-block !important;
+      margin: 0;
+
+      &:nth-of-type(2) {
+	      margin-left: $border-size;
+      }
+    }
+  }
+  
+  > div {
+    position:         unset;
+    z-index:          4;
+    overflow-x:       auto;
+    margin:           $border-size;
+    margin-left:      $left-distance;
+    margin-right:     $right-view-distance;
+    background-color: $light-orange;
+  }
+}
diff --git a/dev/scss/main/view/metatable.scss b/dev/scss/main/view/metatable.scss
new file mode 100644
index 0000000..8be5679
--- /dev/null
+++ b/dev/scss/main/view/metatable.scss
@@ -0,0 +1,64 @@
+@charset "utf-8";
+@import "../../util";
+
+// Metatable
+div.metatable > dl {
+  margin-right: $right-view-distance;
+  margin-top:   $border-size;
+
+  > div {
+    border-color: $dark-orange;
+
+    > * {
+      padding: .2em;
+    }
+
+    > dt {
+      background: $darker-orange;
+      color:      $nearly-white;
+      width:      12.5em;
+    }
+
+    > dd {
+      background-color: $light-orange;
+      cursor: pointer;
+
+      &.metakeyvalues {
+        padding: 0;
+
+        > div {
+          padding: .2em;
+
+          &::before {
+            content: "\2022\00A0";
+            color:   $dark-orange
+          }
+        }
+      }
+
+      // equal to td.chosen
+      &.chosen,
+      > div.chosen {
+        background-color: $light-green !important;
+        color:            $nearly-white;
+      }
+
+      &[data-type="type:store"],
+      &[data-type="type:attachement"] {
+        background-color: $middle-orange;
+        cursor:           default;
+
+        a {
+          color: inherit;
+        }
+      }
+    }
+  }
+
+  // This is a temporary feature to disable
+  // corpusByMatch assistant. See corpusByMatch.js
+  // for reasons.
+  &.cbm-disabled > div > dd {
+    cursor: default !important;
+  }
+}
\ No newline at end of file
diff --git a/dev/scss/main/view/tree.scss b/dev/scss/main/view/tree.scss
new file mode 100644
index 0000000..c7e064b
--- /dev/null
+++ b/dev/scss/main/view/tree.scss
@@ -0,0 +1,86 @@
+@charset "utf-8";
+@import "../../util";
+
+/**
+ * SVG tree
+ */
+path.edge {
+  stroke:       $darker-orange;
+  stroke-width: 2px;
+  fill:         none;
+}
+
+g.arc.infocus > path.edge {
+  stroke: $dark-green;
+}
+
+marker#arr {
+  overflow: visible;
+  path {
+    stroke:       $darkest-orange;
+    fill:         $darkest-orange;
+    fill-opacity: 1;
+    stroke-width: 2; 
+  }
+}
+
+path.anchor {
+  stroke:         $darkest-orange;
+  stroke-width:   3;
+  stroke-linecap: round;
+  z-index:        20;
+}
+
+g.root rect.empty {
+  stroke:       $darker-orange;
+  fill:         $darker-orange;
+  stroke-width: 2px;
+}
+
+g.middle,
+g.label {
+  rect {
+    stroke:       $darker-orange;
+    stroke-width: 2px;
+    fill:         $middle-orange;
+  }
+}
+
+g.label.infocus rect {
+  stroke: $dark-green;
+  fill:   $lightest-green;
+}
+
+g.middle.mark {
+  rect {
+    fill: $darker-orange;
+  }
+  > text {
+    fill: $light-orange;
+
+    > tspan {
+      stroke: $light-orange;
+    }
+  }
+}
+
+g.leaf.mark text > tspan {
+  font-weight: bold;
+}
+
+g.leaf > rect {
+  display: none;
+}
+
+g > text > tspan {
+  text-anchor: middle;
+  font-size:   9pt;
+}
+
+g.leaf > text,
+text.leaf {
+  > tspan {
+    font-size: 10pt;
+    overflow:  visible;
+  }
+}