Trial with Tree builder
diff --git a/public/sass/matchinfo.scss b/public/sass/matchinfo.scss
new file mode 100644
index 0000000..ac5830e
--- /dev/null
+++ b/public/sass/matchinfo.scss
@@ -0,0 +1,107 @@
+@charset "utf-8";
+
+@import "colors";
+
+ol > li:not(.active) {
+ .tokenInfo, .treeInfo {
+ display: none;
+ }
+}
+
+.tokenInfo, .treeInfo {
+ display: none;
+ background-color: $dark-orange;
+ margin-right: 26px;
+ overflow: auto;
+ &.active {
+ display: block;
+ }
+}
+
+.tokenInfo {
+ table {
+ font-size: 10pt;
+ padding: 3pt 10pt; /* wie in ol > li.active p */
+ /* All cells */
+ > tr {
+ > * {
+ padding: 1pt 6pt;
+ vertical-align: top;
+ }
+ > td {
+ text-align: center;
+ background-color: $light-orange;
+ }
+ /* header */
+ > th{
+ &:not([rowspan]) {
+ color: white;
+ text-shadow: none;
+ }
+ &[rowspan]:first-child {
+ background-color: $light-orange;
+ }
+ span.switchSort {
+ cursor: pointer;
+ position: absolute;
+ display: inline-block;
+ right: 0;
+ margin-right: -11pt;
+ width: 20pt;
+ }
+ }
+ &:first-child th {
+ text-align: center;
+ background-color: $darker-orange;
+ /* first column header */
+ &:first-child {
+ position: relative;
+ padding-right: 20pt;
+ padding-left: 5pt;
+ }
+ /* second column header */
+ &:nth-child(2) {
+ text-align: left;
+ padding-left: 20pt;
+ padding-right: 5pt;
+ }
+ }
+ }
+ }
+}
+
+g.root > rect {
+ fill: none;
+ stroke-width: 5px;
+ stroke: $darker-orange;
+}
+
+g.middle > rect {
+ fill: $light-orange;
+ stroke: $darker-orange;
+ color: white;
+ stroke-width: 2px;
+ padding: 2px;
+}
+
+g.leaf > rect {
+ display: none;
+}
+
+svg {
+ background-color: $dark-orange;
+ overflow: hidden;
+}
+
+text {
+ font-family: verdana, tahoma, arial;
+ font-size: 9pt;
+ color: $dark-grey;
+ text-shadow: 1px 1px rgba(255, 255, 255, 0.4);
+}
+
+.edgePath path {
+ stroke: white;
+ stroke-width: 2px;
+ fill: none;
+}
diff --git a/public/sass/table.scss b/public/sass/table.scss
deleted file mode 100644
index 48f1799..0000000
--- a/public/sass/table.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-@charset "utf-8";
-
-ol > li:not(.active) .tokenInfo {
- display: none;
-}
-
-.tokenInfo {
- display: none;
- background-color: #ffa500;
- margin-right: 26px;
- overflow: auto;
- &.active {
- display: block;
- }
- table {
- font-size: 10pt;
- padding: 3pt 10pt; /* wie in ol > li.active p */
- /* All cells */
- > tr {
- > * {
- padding: 1pt 6pt;
- vertical-align: top;
- }
- > td {
- text-align: center;
- background-color: #f4eebb;
- }
- /* header */
- > th{
- &:not([rowspan]) {
- color: white;
- text-shadow: none;
- }
- &[rowspan]:first-child {
- background-color: #f4eebb;
- }
- span.switchSort {
- cursor: pointer;
- position: absolute;
- display: inline-block;
- right: 0;
- margin-right: -11pt;
- width: 20pt;
- }
- }
- &:first-child th {
- text-align: center;
- background-color: #ff8000;
- /* first column header */
- &:first-child {
- position: relative;
- padding-right: 20pt;
- padding-left: 5pt;
- }
- /* second column header */
- &:nth-child(2) {
- text-align: left;
- padding-left: 20pt;
- padding-right: 5pt;
- }
- }
- }
- }
-}