Improve relation tree visualizations
Change-Id: I99c414a61f48ad237746f54885ca7ef6afadb6dd
diff --git a/dev/scss/main/tree.scss b/dev/scss/main/tree.scss
new file mode 100644
index 0000000..eb58b3a
--- /dev/null
+++ b/dev/scss/main/tree.scss
@@ -0,0 +1,69 @@
+@charset "utf-8";
+@import "../util";
+
+/**
+ * SVG tree
+ */
+path.edge {
+ stroke: $darker-orange;
+ stroke-width: 2px;
+ fill: none;
+}
+
+marker#arr {
+ overflow: visible;
+ path {
+ fill-opacity:1;
+ stroke-width: 2;
+ stroke: $darkest-orange;
+ fill: $darkest-orange;
+ }
+}
+
+path.anchor {
+ stroke: $darkest-orange;
+ z-index: 20;
+}
+
+g.root rect.empty {
+ stroke: $darker-orange;
+ fill: $darker-orange;
+ stroke-width: 2px;
+}
+
+g.middle rect {
+ stroke: $darker-orange;
+ stroke-width: 2px;
+ fill: $middle-orange;
+}
+
+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 > tspan {
+ font-size: 10pt;
+ overflow: visible;
+}