Add grunt and coherent styles
diff --git a/public/scss/matchinfo.scss b/public/scss/matchinfo.scss
new file mode 100644
index 0000000..0ddea47
--- /dev/null
+++ b/public/scss/matchinfo.scss
@@ -0,0 +1,221 @@
+@charset "utf-8";
+@import "colors";
+
+$left-width: 176px;
+$border-size: 2px;
+$left-distance: $left-width + ($border-size * 2);
+
+/**
+ * Table view
+ *
+ * The table view is complicated, as the
+ * first column has to be static.
+ */
+@mixin matchinfo-head {
+ border-width: 0px;
+ border-top: $border-size solid #ff8000;
+ width: $left-width / 2;
+}
+
+div.matchinfo {
+ position: relative;
+ width: 100%;
+ height: auto;
+ font-size: 10pt;
+ > p {
+ position: relative;
+ background-color: $darker-orange;
+ box-sizing: border-box;
+ color: $nearly-white;
+ font-size: inherit;
+ margin: $border-size 0 0 0 !important;
+ font-weight: bold;
+ width: $left-width;
+ text-align: left !important;
+ cursor: pointer;
+ padding-left: $border-size * 2 !important;
+ *.menu {
+ border-top-right-radius: 8px;
+ position: absolute;
+ top: 0;
+ left: $left-distance;
+ margin-top: 0;
+ > li:first-of-type {
+ border-top-right-radius: 5px;
+ }
+ }
+ &:before {
+ content: '+ '; // FontAwesome
+ }
+ }
+}
+
+div.matchtable {
+ z-index: 20;
+ margin-left: $left-distance - ($border-size / 2);
+ padding: 0;
+ overflow-x: auto;
+ overflow-y: visible;
+ width: auto;
+ table {
+ display: table;
+ border-collapse: separate;
+ border-spacing: 0px;
+ }
+ th {
+ color: $nearly-white;
+ }
+ thead {
+ tr th {
+ background-color: $darker-orange;
+ border-top-width: 0px !important;
+ }
+ }
+ tbody {
+ th {
+ text-overflow: ellipsis;
+ }
+ > tr:nth-of-type(1) > th {
+ border-top-color: transparent;
+ }
+ /**
+ * Click on a row and it's highlighted.
+ */
+ > tr:focus {
+ outline: none;
+ /*
+ outline: (2 * $border-size) solid $light-green;
+ -moz-outline-radius: $border-size;
+ outline-radius: $border-size;
+ */
+ background-color: $light-green;
+ border-color: $light-green;
+ td {
+ background-color: inherit;
+ color: $nearly-white;
+ border-color: $light-green;
+ }
+ }
+ }
+ tr {
+ /**
+ * The first two columns.
+ */
+ > th:nth-of-type(1),
+ > th:nth-of-type(2) {
+ position: absolute;
+ z-index: 80;
+ vertical-align: middle;
+ left: 0px;
+ @include matchinfo-head;
+ }
+ > th:nth-of-type(2) {
+ left: ($left-width / 2) + $border-size;
+ }
+ > * {
+ box-sizing: border-box;
+ padding: 1px 6px;
+ margin: 0px;
+ border: ($border-size / 2) solid $dark-orange;
+ }
+ }
+ tr > td {
+ background-color: $nearly-white;
+ white-space: nowrap;
+ vertical-align: top;
+ text-align: center;
+ }
+ tr:nth-child(even) > td {
+ background-color: $light-orange;
+ }
+}
+
+/**
+ * Tree view
+ */
+div.matchtree {
+ position: relative;
+ overflow-x: hidden;
+ overflow-y: visible;
+ padding: 0;
+ margin-top: 1pt;
+
+ /**
+ * Label
+ */
+ h6 {
+ display: inline;
+ font-size: inherit;
+ color: $nearly-white;
+ text-align: center;
+ margin: 0;
+ padding: 0 !important;
+ float: left;
+ > span {
+ @include matchinfo-head;
+ display: inline-block;
+ margin: 0;
+ &:nth-of-type(2) {
+ margin-left: $border-size;
+ }
+ }
+ }
+ > div {
+ overflow-x: auto;
+ margin: $border-size;
+ box-sizing: border-box;
+ margin-left: $left-distance;
+ background-color: $nearly-white; // $light-orange;
+ > em {
+ background-color: $dark-orange;
+ display: block;
+ width: 1.5em;
+ height: 1.5em;
+ line-height: 1.2em;
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ border-radius: 5px;
+ border: $border-size solid $darker-orange;
+ cursor: pointer;
+ text-align: center;
+ color: $nearly-white;
+ font-weight: bold;
+ font-style: normal;
+ &:after {
+ // FontAwesome
+ content: 'x';
+ }
+ }
+ }
+}
+
+/**
+ * SVG tree
+ */
+
+path.edge {
+ stroke: $darker-orange;
+ stroke-width: 2px;
+ fill: none;
+}
+
+g.middle > rect {
+ stroke: $darker-orange;
+ stroke-width: 2px;
+ fill: $light-orange; // $nearly-white;
+}
+
+g.leaf > rect {
+ display: none;
+}
+
+g > text {
+ text-anchor: middle;
+ font-size: 9pt;
+}
+
+g.leaf > text {
+ font-size: 10pt;
+ overflow: visible;
+}