Removed circle css class + clean graph-view.css file

1 files changed, 231 insertions, 123 deletions

diff --git a/res/client/css/style.css b/res/client/css/style.css
index d9c64021..cddfaa76 100644
--- a/res/client/css/style.css
+++ b/res/client/css/style.css
@@ -880,37 +880,21 @@ p {
 .node {
   stroke-width: 1px;
   font-size: 18px;
-  z-index: 100; }
-  .node.related {
-    fill: none;
-    stroke: #33c2e0;
-    stroke-opacity: 0.5;
-    stroke-width: 2px; }
+  z-index: 100;
+  pointer-events: all; }
 
-.notselected .circle, .notselected * {
+.notselected, .notselected * {
   opacity: 0.2;
   -webkit-filter: blur(10px); }
+  .notselected:hover, .notselected *:hover {
+    opacity: 1;
+    stroke: #ff8b11;
+    stroke-opacity: 0.5;
+    stroke-width: 5px; }
 
 .linklabel.notselected {
   display: none; }
 
-.circle {
-  z-index: 100;
-  pointer-events: all;
-  fill: #363636; }
-
-.circle:hover {
-  stroke: #ff8b11;
-  stroke-opacity: 0.5;
-  stroke-width: 5px;
-  opacity: 1; }
-
-.circle.hovering {
-  stroke: #ff8b11;
-  stroke-opacity: 0.5;
-  stroke-width: 5px;
-  opacity: 1; }
-
 .nodetext {
   fill: #363636;
   font-size: 18px;
@@ -967,255 +951,385 @@ p {
   z-index: 2;
   /* higher than link, lower than node */ }
 
-.circle {
-  stroke-opacity: 0.5; }
-
-.circle.chosen {
-  stroke: #33c2e0;
-  stroke-opacity: 0.5; }
-
-.circle.enter {
-  stroke-opacity: 0.5; }
-
 .circle.bubble {
   fill: rgba(87, 154, 202, 0.17);
   stroke: rgba(87, 154, 202, 0.17);
   pointer-events: none; }
 
-.circle.exit {
-  stroke-opacity: 0.5; }
-
-.circle.chainlink {
-  stroke: #AAA; }
-
-.circle.temp {
-  box-shadow: 0 0 40px #FFFF8F; }
-
-.circle.temp, .circle.chosen {
-  stroke-width: 3px; }
-
-.circle.temp.empty {
-  stroke-width: 1.5px; }
-
 /* Per node and edge type (type is a property of nodes and links) styling
  * note that this should be automatically generated somehow for user settings.
  */
-.circle.person {
+.node.person {
   fill: #004681;
   stroke: #004681;
   stroke-width: 11px;
   stroke-opacity: 0.4; }
-  .circle.person:hover {
-    stroke: #004681;
+  .node.person.related {
+    stroke: #33c2e0;
+    stroke-opacity: 0.5;
+    stroke-width: 2px; }
+  .node.person.selected {
+    stroke: #fad900;
+    stroke-opacity: 0.5;
+    stroke-width: 2px;
+    z-index: 1; }
+  .node.person:hover {
+    stroke: #ff8b11;
     stroke-opacity: 0.5;
     stroke-width: 5px; }
 
-.circle.personality-trait {
+.node.personality-trait {
   fill: #ff8b11;
   stroke: #ff8b11;
   stroke-width: 11px;
   stroke-opacity: 0.4; }
-  .circle.personality-trait:hover {
+  .node.personality-trait.related {
+    stroke: #33c2e0;
+    stroke-opacity: 0.5;
+    stroke-width: 2px; }
+  .node.personality-trait.selected {
+    stroke: #fad900;
+    stroke-opacity: 0.5;
+    stroke-width: 2px;
+    z-index: 1; }
+  .node.personality-trait:hover {
     stroke: #ff8b11;
     stroke-opacity: 0.5;
     stroke-width: 5px; }
 
-.circle.accepting-changes {
+.node.accepting-changes {
   fill: #b3fa00;
   stroke: #b3fa00;
   stroke-width: 11px;
   stroke-opacity: 0.4; }
-  .circle.accepting-changes:hover {
-    stroke: #b3fa00;
+  .node.accepting-changes.related {
+    stroke: #33c2e0;
+    stroke-opacity: 0.5;
+    stroke-width: 2px; }
+  .node.accepting-changes.selected {
+    stroke: #fad900;
+    stroke-opacity: 0.5;
+    stroke-width: 2px;
+    z-index: 1; }
+  .node.accepting-changes:hover {
+    stroke: #ff8b11;
     stroke-opacity: 0.5;
     stroke-width: 5px; }
 
-.circle.decision-making {
+.node.decision-making {
   fill: #4bfa00;
   stroke: #4bfa00;
   stroke-width: 11px;
   stroke-opacity: 0.4; }
-  .circle.decision-making:hover {
-    stroke: #4bfa00;
+  .node.decision-making.related {
+    stroke: #33c2e0;
+    stroke-opacity: 0.5;
+    stroke-width: 2px; }
+  .node.decision-making.selected {
+    stroke: #fad900;
+    stroke-opacity: 0.5;
+    stroke-width: 2px;
+    z-index: 1; }
+  .node.decision-making:hover {
+    stroke: #ff8b11;
     stroke-opacity: 0.5;
     stroke-width: 5px; }
 
-.circle.beneficiary {
+.node.beneficiary {
   fill: #40C200;
   stroke: #40C200;
   stroke-width: 11px;
   stroke-opacity: 0.4; }
-  .circle.beneficiary:hover {
-    stroke: #40C200;
+  .node.beneficiary.related {
+    stroke: #33c2e0;
+    stroke-opacity: 0.5;
+    stroke-width: 2px; }
+  .node.beneficiary.selected {
+    stroke: #fad900;
+    stroke-opacity: 0.5;
+    stroke-width: 2px;
+    z-index: 1; }
+  .node.beneficiary:hover {
+    stroke: #ff8b11;
     stroke-opacity: 0.5;
     stroke-width: 5px; }
 
-.circle.completed-project {
+.node.completed-project {
   fill: #8b3ab0;
   stroke: #8b3ab0;
   stroke-width: 11px;
   stroke-opacity: 0.4; }
-  .circle.completed-project:hover {
-    stroke: #8b3ab0;
+  .node.completed-project.related {
+    stroke: #33c2e0;
+    stroke-opacity: 0.5;
+    stroke-width: 2px; }
+  .node.completed-project.selected {
+    stroke: #fad900;
+    stroke-opacity: 0.5;
+    stroke-width: 2px;
+    z-index: 1; }
+  .node.completed-project:hover {
+    stroke: #ff8b11;
     stroke-opacity: 0.5;
     stroke-width: 5px; }
 
-.circle.ongoing-project {
+.node.ongoing-project {
   fill: #ee3654;
   stroke: #ee3654;
   stroke-width: 11px;
   stroke-opacity: 0.4; }
-  .circle.ongoing-project:hover {
-    stroke: #ee3654;
+  .node.ongoing-project.related {
+    stroke: #33c2e0;
+    stroke-opacity: 0.5;
+    stroke-width: 2px; }
+  .node.ongoing-project.selected {
+    stroke: #fad900;
+    stroke-opacity: 0.5;
+    stroke-width: 2px;
+    z-index: 1; }
+  .node.ongoing-project:hover {
+    stroke: #ff8b11;
     stroke-opacity: 0.5;
     stroke-width: 5px; }
 
-.circle.future-project {
+.node.future-project {
   fill: #33c2e0;
   stroke: #33c2e0;
   stroke-width: 11px;
   stroke-opacity: 0.4; }
-  .circle.future-project:hover {
+  .node.future-project.related {
     stroke: #33c2e0;
     stroke-opacity: 0.5;
+    stroke-width: 2px; }
+  .node.future-project.selected {
+    stroke: #fad900;
+    stroke-opacity: 0.5;
+    stroke-width: 2px;
+    z-index: 1; }
+  .node.future-project:hover {
+    stroke: #ff8b11;
+    stroke-opacity: 0.5;
     stroke-width: 5px; }
 
-.circle.collaborator {
+.node.collaborator {
   fill: #004681;
   stroke: #004681;
   stroke-width: 11px;
   stroke-opacity: 0.4; }
-  .circle.collaborator:hover {
-    stroke: #004681;
+  .node.collaborator.related {
+    stroke: #33c2e0;
+    stroke-opacity: 0.5;
+    stroke-width: 2px; }
+  .node.collaborator.selected {
+    stroke: #fad900;
+    stroke-opacity: 0.5;
+    stroke-width: 2px;
+    z-index: 1; }
+  .node.collaborator:hover {
+    stroke: #ff8b11;
     stroke-opacity: 0.5;
     stroke-width: 5px; }
 
-.circle.club {
+.node.club {
   fill: #ee3654;
   stroke: #ee3654;
   stroke-width: 11px;
   stroke-opacity: 0.4; }
-  .circle.club:hover {
-    stroke: #ee3654;
+  .node.club.related {
+    stroke: #33c2e0;
+    stroke-opacity: 0.5;
+    stroke-width: 2px; }
+  .node.club.selected {
+    stroke: #fad900;
+    stroke-opacity: 0.5;
+    stroke-width: 2px;
+    z-index: 1; }
+  .node.club:hover {
+    stroke: #ff8b11;
     stroke-opacity: 0.5;
     stroke-width: 5px; }
 
-.circle.skill {
+.node.skill {
   fill: #fad900;
   stroke: #fad900;
   stroke-width: 11px;
   stroke-opacity: 0.4; }
-  .circle.skill:hover {
+  .node.skill.related {
+    stroke: #33c2e0;
+    stroke-opacity: 0.5;
+    stroke-width: 2px; }
+  .node.skill.selected {
     stroke: #fad900;
     stroke-opacity: 0.5;
+    stroke-width: 2px;
+    z-index: 1; }
+  .node.skill:hover {
+    stroke: #ff8b11;
+    stroke-opacity: 0.5;
     stroke-width: 5px; }
 
-.circle.interest {
+.node.interest {
   fill: #8b3ab0;
   stroke: #8b3ab0;
   stroke-width: 11px;
   stroke-opacity: 0.4; }
-  .circle.interest:hover {
-    stroke: #8b3ab0;
+  .node.interest.related {
+    stroke: #33c2e0;
     stroke-opacity: 0.5;
-    stroke-width: 5px; }
-
-.circle.project {
-  fill: #40C200;
-  stroke: #40C200;
-  stroke-width: 11px;
-  stroke-opacity: 0.4; }
-  .circle.project:hover {
-    stroke: #40C200;
+    stroke-width: 2px; }
+  .node.interest.selected {
+    stroke: #fad900;
+    stroke-opacity: 0.5;
+    stroke-width: 2px;
+    z-index: 1; }
+  .node.interest:hover {
+    stroke: #ff8b11;
     stroke-opacity: 0.5;
     stroke-width: 5px; }
 
-.circle.third-internship-proposal {
+.node.third-internship-proposal {
   fill: #33c2e0;
   stroke: #33c2e0;
   stroke-width: 11px;
   stroke-opacity: 0.4; }
-  .circle.third-internship-proposal:hover {
+  .node.third-internship-proposal.related {
     stroke: #33c2e0;
     stroke-opacity: 0.5;
+    stroke-width: 2px; }
+  .node.third-internship-proposal.selected {
+    stroke: #fad900;
+    stroke-opacity: 0.5;
+    stroke-width: 2px;
+    z-index: 1; }
+  .node.third-internship-proposal:hover {
+    stroke: #ff8b11;
+    stroke-opacity: 0.5;
     stroke-width: 5px; }
 
-.circle.internship {
+.node.internship {
   fill: #ff8b11;
   stroke: #ff8b11;
   stroke-width: 11px;
   stroke-opacity: 0.4; }
-  .circle.internship:hover {
+  .node.internship.related {
+    stroke: #33c2e0;
+    stroke-opacity: 0.5;
+    stroke-width: 2px; }
+  .node.internship.selected {
+    stroke: #fad900;
+    stroke-opacity: 0.5;
+    stroke-width: 2px;
+    z-index: 1; }
+  .node.internship:hover {
     stroke: #ff8b11;
     stroke-opacity: 0.5;
     stroke-width: 5px; }
 
-.circle.empty {
+.node.empty {
   fill: #919095;
   stroke: #919095;
   stroke-width: 11px;
   stroke-opacity: 0.4; }
-  .circle.empty:hover {
-    stroke: #919095;
+  .node.empty.related {
+    stroke: #33c2e0;
+    stroke-opacity: 0.5;
+    stroke-width: 2px; }
+  .node.empty.selected {
+    stroke: #fad900;
+    stroke-opacity: 0.5;
+    stroke-width: 2px;
+    z-index: 1; }
+  .node.empty:hover {
+    stroke: #ff8b11;
     stroke-opacity: 0.5;
     stroke-width: 5px; }
 
-.circle.project {
+.node.project {
   fill: #ee3654;
   stroke: #ee3654;
   stroke-width: 11px;
   stroke-opacity: 0.4; }
-  .circle.project:hover {
-    stroke: #ee3654;
+  .node.project.related {
+    stroke: #33c2e0;
+    stroke-opacity: 0.5;
+    stroke-width: 2px; }
+  .node.project.selected {
+    stroke: #fad900;
+    stroke-opacity: 0.5;
+    stroke-width: 2px;
+    z-index: 1; }
+  .node.project:hover {
+    stroke: #ff8b11;
     stroke-opacity: 0.5;
     stroke-width: 5px; }
 
-.circle.keyword {
+.node.keyword {
   fill: #8b3ab0;
   stroke: #8b3ab0;
   stroke-width: 11px;
   stroke-opacity: 0.4; }
-  .circle.keyword:hover {
-    stroke: #8b3ab0;
+  .node.keyword.related {
+    stroke: #33c2e0;
+    stroke-opacity: 0.5;
+    stroke-width: 2px; }
+  .node.keyword.selected {
+    stroke: #fad900;
+    stroke-opacity: 0.5;
+    stroke-width: 2px;
+    z-index: 1; }
+  .node.keyword:hover {
+    stroke: #ff8b11;
     stroke-opacity: 0.5;
     stroke-width: 5px; }
 
-.circle.idea {
+.node.idea {
   fill: #40C200;
   stroke: #40C200;
   stroke-width: 11px;
   stroke-opacity: 0.4; }
-  .circle.idea:hover {
-    stroke: #40C200;
+  .node.idea.related {
+    stroke: #33c2e0;
+    stroke-opacity: 0.5;
+    stroke-width: 2px; }
+  .node.idea.selected {
+    stroke: #fad900;
+    stroke-opacity: 0.5;
+    stroke-width: 2px;
+    z-index: 1; }
+  .node.idea:hover {
+    stroke: #ff8b11;
     stroke-opacity: 0.5;
     stroke-width: 5px; }
 
-.circle.resource {
+.node.resource {
   fill: #33c2e0;
   stroke: #33c2e0;
   stroke-width: 11px;
   stroke-opacity: 0.4; }
-  .circle.resource:hover {
+  .node.resource.related {
     stroke: #33c2e0;
     stroke-opacity: 0.5;
+    stroke-width: 2px; }
+  .node.resource.selected {
+    stroke: #fad900;
+    stroke-opacity: 0.5;
+    stroke-width: 2px;
+    z-index: 1; }
+  .node.resource:hover {
+    stroke: #ff8b11;
+    stroke-opacity: 0.5;
     stroke-width: 5px; }
 
 /* Selected parts of the graph, right now by clicking, later with search. */
-.node.first-selected .circle {
+.node.first-selected {
   stroke: #fad900;
   stroke-opacity: 0.5;
   stroke-width: 6px;
   z-index: 1; }
-  .node.first-selected .circle:hover {
+  .node.first-selected:hover {
     stroke: #ff8b11;
     stroke-opacity: 0.5; }
 
-.node.selected .circle {
-  stroke: #fad900;
-  stroke-opacity: 0.5;
-  stroke-width: 2px;
-  z-index: 1; }
-
 .graph.link.temp_and {
   stroke-dasharray: 3,3; }
 
@@ -1227,12 +1341,6 @@ p {
   pointer-events: all;
   z-index: 0; }
 
-g:focus circle {
-  stroke: #ff0000;
-  stroke-opacity: 0.5;
-  stroke-width: 3px;
-  z-index: 1; }
-
 .editinfo {
   position: fixed;
   top: -40px;