Extend styles for fill to match stroke so arrows fade properly when a…

… node is selected
v13inc · Jun 30, 2016 · 119cf98 · 119cf98
1 parent 4a4c6ad
commit 119cf98
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 22 deletions.
diff --git a/themes/the-graph-dark.css b/themes/the-graph-dark.css
@@ -656,39 +656,86 @@
 .the-graph-dark .selection .stroke.route10 {
   stroke: #510122;
 }
-.the-graph-dark .fill.route0 {
+.the-graph-dark .fill,
+.the-graph-dark .fill.route0,
+.the-graph-dark .selection .selected .fill,
+.the-graph-dark .selection .selected .fill.route0 {
   fill: #fff;
 }
-.the-graph-dark .fill.route1 {
+.the-graph-dark .fill.route1,
+.the-graph-dark .selection .selected .fill.route1 {
   fill: #e80202;
 }
-.the-graph-dark .fill.route2 {
+.the-graph-dark .fill.route2,
+.the-graph-dark .selection .selected .fill.route2 {
   fill: #e88802;
 }
-.the-graph-dark .fill.route3 {
+.the-graph-dark .fill.route3,
+.the-graph-dark .selection .selected .fill.route3 {
   fill: #e8e802;
 }
-.the-graph-dark .fill.route4 {
+.the-graph-dark .fill.route4,
+.the-graph-dark .selection .selected .fill.route4 {
   fill: #02e83c;
 }
-.the-graph-dark .fill.route5 {
+.the-graph-dark .fill.route5,
+.the-graph-dark .selection .selected .fill.route5 {
   fill: #02e89c;
 }
-.the-graph-dark .fill.route6 {
+.the-graph-dark .fill.route6,
+.the-graph-dark .selection .selected .fill.route6 {
   fill: #02d5e8;
 }
-.the-graph-dark .fill.route7 {
+.the-graph-dark .fill.route7,
+.the-graph-dark .selection .selected .fill.route7 {
   fill: #0275e8;
 }
-.the-graph-dark .fill.route8 {
+.the-graph-dark .fill.route8,
+.the-graph-dark .selection .selected .fill.route8 {
   fill: #af02e8;
 }
-.the-graph-dark .fill.route9 {
+.the-graph-dark .fill.route9,
+.the-graph-dark .selection .selected .fill.route9 {
   fill: #e802c2;
 }
-.the-graph-dark .fill.route10 {
+.the-graph-dark .fill.route10,
+.the-graph-dark .selection .selected .fill.route10 {
   fill: #e80262;
 }
+.the-graph-dark .selection .fill,
+.the-graph-dark .selection .fill.route0 {
+  fill: #757575;
+}
+.the-graph-dark .selection .fill.route1 {
+  fill: #510101;
+}
+.the-graph-dark .selection .fill.route2 {
+  fill: #512f01;
+}
+.the-graph-dark .selection .fill.route3 {
+  fill: #515101;
+}
+.the-graph-dark .selection .fill.route4 {
+  fill: #015115;
+}
+.the-graph-dark .selection .fill.route5 {
+  fill: #015136;
+}
+.the-graph-dark .selection .fill.route6 {
+  fill: #014a51;
+}
+.the-graph-dark .selection .fill.route7 {
+  fill: #012951;
+}
+.the-graph-dark .selection .fill.route8 {
+  fill: #3d0151;
+}
+.the-graph-dark .selection .fill.route9 {
+  fill: #510143;
+}
+.the-graph-dark .selection .fill.route10 {
+  fill: #510122;
+}
 @-moz-keyframes error {
   0% {
     fill: rgba(230,238,240,0.94);

diff --git a/themes/the-graph-light.css b/themes/the-graph-light.css
@@ -656,39 +656,86 @@
 .the-graph-light .selection .stroke.route10 {
   stroke: #ffcce7;
 }
-.the-graph-light .fill.route0 {
+.the-graph-light .fill,
+.the-graph-light .fill.route0,
+.the-graph-light .selection .selected .fill,
+.the-graph-light .selection .selected .fill.route0 {
   fill: #bfbfbf;
 }
-.the-graph-light .fill.route1 {
+.the-graph-light .fill.route1,
+.the-graph-light .selection .selected .fill.route1 {
   fill: #c00;
 }
-.the-graph-light .fill.route2 {
+.the-graph-light .fill.route2,
+.the-graph-light .selection .selected .fill.route2 {
   fill: #cc6300;
 }
-.the-graph-light .fill.route3 {
+.the-graph-light .fill.route3,
+.the-graph-light .selection .selected .fill.route3 {
   fill: #ffc800;
 }
-.the-graph-light .fill.route4 {
+.the-graph-light .fill.route4,
+.the-graph-light .selection .selected .fill.route4 {
   fill: #00cc3d;
 }
-.the-graph-light .fill.route5 {
+.the-graph-light .fill.route5,
+.the-graph-light .selection .selected .fill.route5 {
   fill: #abf2da;
 }
-.the-graph-light .fill.route6 {
+.the-graph-light .fill.route6,
+.the-graph-light .selection .selected .fill.route6 {
   fill: #00c9cc;
 }
-.the-graph-light .fill.route7 {
+.the-graph-light .fill.route7,
+.the-graph-light .selection .selected .fill.route7 {
   fill: #0052cc;
 }
-.the-graph-light .fill.route8 {
+.the-graph-light .fill.route8,
+.the-graph-light .selection .selected .fill.route8 {
   fill: #40c;
 }
-.the-graph-light .fill.route9 {
+.the-graph-light .fill.route9,
+.the-graph-light .selection .selected .fill.route9 {
   fill: #ffa8ba;
 }
-.the-graph-light .fill.route10 {
+.the-graph-light .fill.route10,
+.the-graph-light .selection .selected .fill.route10 {
   fill: #cc006d;
 }
+.the-graph-light .selection .fill,
+.the-graph-light .selection .fill.route0 {
+  fill: #e6e6e6;
+}
+.the-graph-light .selection .fill.route1 {
+  fill: #fcc;
+}
+.the-graph-light .selection .fill.route2 {
+  fill: #ffe5cc;
+}
+.the-graph-light .selection .fill.route3 {
+  fill: #fff4cc;
+}
+.the-graph-light .selection .fill.route4 {
+  fill: #ccffdb;
+}
+.the-graph-light .selection .fill.route5 {
+  fill: #d3f8ec;
+}
+.the-graph-light .selection .fill.route6 {
+  fill: #ccfeff;
+}
+.the-graph-light .selection .fill.route7 {
+  fill: #cce0ff;
+}
+.the-graph-light .selection .fill.route8 {
+  fill: #dcf;
+}
+.the-graph-light .selection .fill.route9 {
+  fill: #ffccd6;
+}
+.the-graph-light .selection .fill.route10 {
+  fill: #ffcce7;
+}
 @-moz-keyframes error {
   0% {
     fill: rgba(230,238,240,0.94);