Improve relation tree visualizations
Change-Id: I99c414a61f48ad237746f54885ca7ef6afadb6dd
diff --git a/dev/scss/main/main.scss b/dev/scss/main/main.scss
index e73bce3..f6d1b7a 100644
--- a/dev/scss/main/main.scss
+++ b/dev/scss/main/main.scss
@@ -1,7 +1,8 @@
@import "highlight"; // JSON highlighting
@import "kwic"; // Kwic view information
@import "logos"; // Logo images
-@import "matchinfo"; // Match table and tree
+@import "matchinfo"; // Match table
+@import "tree"; // Tree view
@import "pagination"; // Pagination
@import "query"; // View query
@import "resultinfo"; // Information on results
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
index 4446fc8..dd6bd9c 100644
--- a/dev/scss/main/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -336,54 +336,3 @@
}
-/**
- * SVG tree
- */
-path.edge {
- stroke: $darker-orange;
- stroke-width: 2px;
- fill: none;
-}
-
-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;
-}
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;
+}