2018-08-22 12:18:46 +00:00
|
|
|
body{
|
|
|
|
margin:0;overflow: hidden;
|
|
|
|
font-family: sans-serif;
|
|
|
|
/* background: #fceabb;
|
|
|
|
background: -moz-linear-gradient(-45deg, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
|
|
|
|
background: -webkit-linear-gradient(-45deg, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
|
|
|
|
background: linear-gradient(135deg, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
|
|
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=1 ); */
|
|
|
|
/*background: #f7fbfc;
|
|
|
|
background: -moz-linear-gradient(45deg, #f7fbfc 0%, #d9edf2 40%, #add9e4 100%);
|
|
|
|
background: -webkit-linear-gradient(45deg, #f7fbfc 0%,#d9edf2 40%,#add9e4 100%);
|
|
|
|
background: linear-gradient(45deg, #f7fbfc 0%,#d9edf2 40%,#add9e4 100%);
|
|
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7fbfc', endColorstr='#add9e4',GradientType=1 );*/
|
|
|
|
/*background: #e2e2e2;
|
|
|
|
background: -moz-linear-gradient(45deg, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
|
|
|
|
background: -webkit-linear-gradient(45deg, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
|
|
|
|
background: linear-gradient(45deg, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
|
|
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=1 );*/
|
|
|
|
/*background: #d2dfed;
|
|
|
|
background: -moz-linear-gradient(45deg, #d2dfed 0%, #c8d7eb 26%, #bed0ea 51%, #a6c0e3 51%, #afc7e8 62%, #bad0ef 75%, #99b5db 88%, #799bc8 100%);
|
|
|
|
background: -webkit-linear-gradient(45deg, #d2dfed 0%,#c8d7eb 26%,#bed0ea 51%,#a6c0e3 51%,#afc7e8 62%,#bad0ef 75%,#99b5db 88%,#799bc8 100%);
|
|
|
|
background: linear-gradient(45deg, #d2dfed 0%,#c8d7eb 26%,#bed0ea 51%,#a6c0e3 51%,#afc7e8 62%,#bad0ef 75%,#99b5db 88%,#799bc8 100%);
|
|
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2dfed', endColorstr='#799bc8',GradientType=1 );*/
|
|
|
|
background: #d2dfed;
|
|
|
|
background: -moz-linear-gradient(45deg, #d2dfed 0%, #afc1d8 13%, #d5e0ef 28%, #bed0ea 51%, #a8c0dd 51%, #c0d0e5 63%, #bad0ef 75%, #a2bad8 88%, #799bc8 100%);
|
|
|
|
background: -webkit-linear-gradient(45deg, #d2dfed 0%,#afc1d8 13%,#d5e0ef 28%,#bed0ea 51%,#a8c0dd 51%,#c0d0e5 63%,#bad0ef 75%,#a2bad8 88%,#799bc8 100%);
|
|
|
|
background: linear-gradient(45deg, #d2dfed 0%,#afc1d8 13%,#d5e0ef 28%,#bed0ea 51%,#a8c0dd 51%,#c0d0e5 63%,#bad0ef 75%,#a2bad8 88%,#799bc8 100%);
|
|
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2dfed', endColorstr='#799bc8',GradientType=1 );
|
2018-08-26 11:15:02 +00:00
|
|
|
height: 100vh;
|
2018-08-22 12:18:46 +00:00
|
|
|
/*-moz-animation: bgShift 5s infinite;
|
|
|
|
background-size: 400% 400%;*/
|
|
|
|
}
|
|
|
|
|
2018-08-26 11:15:02 +00:00
|
|
|
a, a:link, a:visited{
|
|
|
|
color:blue;
|
|
|
|
text-decoration: none;
|
|
|
|
cursor:pointer; /* Not all links have a href, so force pointer for those too */
|
|
|
|
}
|
|
|
|
a:hover{
|
|
|
|
text-decoration: underline;
|
|
|
|
}
|
|
|
|
a:active{
|
|
|
|
color:red;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2018-08-22 12:18:46 +00:00
|
|
|
/*@-moz-keyframes bgShift{
|
|
|
|
0%{background-position:0% 50%}
|
|
|
|
50%{background-position:100% 50%}
|
|
|
|
100%{background-position:0% 50%}
|
|
|
|
}*/
|
|
|
|
svg{
|
|
|
|
width:100vw;
|
|
|
|
height: calc(100vh - 40px);
|
2018-08-26 11:15:02 +00:00
|
|
|
cursor: grab;
|
2018-08-22 12:18:46 +00:00
|
|
|
}
|
|
|
|
svg.dragging{
|
|
|
|
cursor: grabbing;
|
|
|
|
}
|
|
|
|
g.node{
|
|
|
|
cursor: pointer;
|
|
|
|
stroke: blue;
|
|
|
|
stroke-width: 0;
|
|
|
|
transition: stroke-width .5s;
|
|
|
|
opacity: 0;
|
|
|
|
pointer-events: none;
|
|
|
|
transition: opacity 1s;
|
|
|
|
}
|
|
|
|
g.node.visibleNode/* , g.node.ImageObject */
|
|
|
|
{
|
|
|
|
opacity: 1;
|
|
|
|
pointer-events: auto;
|
|
|
|
}
|
|
|
|
g.node circle.highlightCircle{
|
|
|
|
fill: none;
|
2018-08-26 11:15:02 +00:00
|
|
|
stroke-width:0px;
|
|
|
|
stroke-dasharray: 3 2;
|
2018-08-22 12:18:46 +00:00
|
|
|
}
|
|
|
|
g.node:hover circle.highlightCircle{
|
2018-08-26 11:15:02 +00:00
|
|
|
stroke-width: 1px;
|
|
|
|
stroke: blue;
|
2018-08-22 12:18:46 +00:00
|
|
|
}
|
2018-08-26 11:15:02 +00:00
|
|
|
g.node:active circle.highlightCircle{
|
|
|
|
stroke-width:1px;
|
|
|
|
stroke: red;
|
2018-08-22 12:18:46 +00:00
|
|
|
}
|
2018-08-26 11:15:02 +00:00
|
|
|
g.node.centeredNode circle.highlightCircle{
|
|
|
|
stroke-width:1px;
|
|
|
|
stroke: red;
|
2018-08-22 12:18:46 +00:00
|
|
|
}
|
2018-08-26 11:15:02 +00:00
|
|
|
/* g.node.selectedNode circle.highlightCircle{
|
|
|
|
stroke-width:1px;
|
|
|
|
stroke: red;
|
|
|
|
} */
|
2018-08-22 12:18:46 +00:00
|
|
|
g.node.drag{
|
|
|
|
cursor:grabbing;
|
|
|
|
}
|
|
|
|
.node text{
|
|
|
|
text-anchor: start;
|
|
|
|
}
|
|
|
|
.relationship{
|
|
|
|
display:none;
|
|
|
|
}
|
|
|
|
.relationship.visibleLink{
|
|
|
|
display:block;
|
|
|
|
}
|
|
|
|
.relationship line{
|
|
|
|
fill:none;
|
|
|
|
stroke: #999;
|
|
|
|
stroke-width: 2px;\;
|
|
|
|
}
|
|
|
|
.relationship text{
|
|
|
|
fill:black;
|
|
|
|
/* text-transform: lowercase; */
|
|
|
|
font-size: 75%;
|
|
|
|
display:none;
|
|
|
|
}
|
|
|
|
.relationship.activeLink text{
|
|
|
|
fill:white;
|
|
|
|
display:block;
|
|
|
|
}
|
|
|
|
.relationship.activeLink line{
|
|
|
|
stroke: white;
|
|
|
|
}
|
|
|
|
circle.nodeBg{
|
|
|
|
fill: white;
|
|
|
|
/*stroke-width:.2em;*/
|
|
|
|
fill:url(#blueGrad);
|
|
|
|
}
|
|
|
|
text{
|
|
|
|
text-anchor: middle;
|
|
|
|
}
|
|
|
|
|
|
|
|
.drag{
|
|
|
|
fill:#00f;
|
|
|
|
}
|
|
|
|
|
|
|
|
.MediaObject circle.nodeBg{
|
|
|
|
fill:url(#orangeGrad);
|
|
|
|
}
|
|
|
|
/* .ImageObject circle.nodeBg{
|
|
|
|
stroke:lightgreen;
|
|
|
|
}*/
|
|
|
|
.Person circle.nodeBg{
|
|
|
|
fill:url(#redGrad);
|
|
|
|
}
|
|
|
|
.PublicationEvent circle.nodeBg{
|
|
|
|
fill:url(#limeGrad);
|
|
|
|
}
|
|
|
|
/*.Place circle{
|
|
|
|
stroke:darkgreen;
|
|
|
|
}
|
|
|
|
.Country circle{
|
|
|
|
stroke:yellow;
|
|
|
|
}*/
|
|
|
|
.relationship.address line{
|
|
|
|
/* stroke:#90F7FE; */
|
|
|
|
}
|
|
|
|
.relationship.location line{
|
|
|
|
/* stroke:darkgreen; */
|
|
|
|
}
|
|
|
|
.relationship.contributor line{
|
|
|
|
/* stroke:orange; */
|
|
|
|
/* stroke-width:.4em; */
|
|
|
|
}
|
|
|
|
#nodeDetails{
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
2018-08-26 11:15:02 +00:00
|
|
|
right: -740px;
|
2018-08-22 12:18:46 +00:00
|
|
|
width: 700px;
|
|
|
|
background: white;
|
|
|
|
padding: 20px;
|
|
|
|
/* opacity: 0; */
|
|
|
|
transition: opacity 1s, right 1s;
|
2018-08-26 11:15:02 +00:00
|
|
|
height: 100%;
|
2018-08-22 12:18:46 +00:00
|
|
|
overflow-y: auto;
|
|
|
|
}
|
|
|
|
body.detailsOpen #nodeDetails{
|
|
|
|
/* opacity:1; */
|
|
|
|
right: 0px;
|
|
|
|
}
|
|
|
|
svg#portfolioGraph {
|
|
|
|
position: relative;
|
|
|
|
right: 0;
|
2018-08-26 11:15:02 +00:00
|
|
|
top: 0;
|
|
|
|
transition: right 1s, top 1s;
|
2018-08-22 12:18:46 +00:00
|
|
|
}
|
|
|
|
body.detailsOpen svg#portfolioGraph{
|
|
|
|
right: calc(720px / 2);
|
|
|
|
}
|
|
|
|
#nodeDetails .nodeTitle{
|
|
|
|
|
|
|
|
}
|
|
|
|
#nodeDetails .nodeType{
|
|
|
|
font-size:80%;
|
|
|
|
text-transform: uppercase;
|
|
|
|
color: #999;
|
|
|
|
margin-left:10px;
|
|
|
|
}
|
|
|
|
#nodeDetails .nodeType:hover{
|
|
|
|
cursor:pointer;
|
|
|
|
color:blue;
|
|
|
|
}
|
|
|
|
/* #nodeDetails .nodeType::before{
|
|
|
|
content:"(";
|
|
|
|
}
|
|
|
|
#nodeDetails .nodeType::after{
|
|
|
|
content:")";
|
|
|
|
} */
|
|
|
|
#nodeDetails dt{
|
|
|
|
float:left;
|
|
|
|
width: 120px;
|
|
|
|
font-weight:bold;
|
|
|
|
}
|
|
|
|
#nodeDetails dd:not(.nodeTitleNr1) {
|
|
|
|
margin-left: 120px;
|
|
|
|
}
|
|
|
|
#nodeDetails dt.dt-description{
|
|
|
|
float:none;
|
|
|
|
}
|
|
|
|
#nodeDetails dd.dd-description{
|
|
|
|
margin-left:0;
|
|
|
|
}
|
2018-08-26 11:15:02 +00:00
|
|
|
#nodeDetails dd.dd-contentobject{
|
|
|
|
margin-left:0;
|
|
|
|
}
|
|
|
|
#nodeDetails dd.dd-contentobject object{
|
|
|
|
width: 100%;
|
|
|
|
}
|
2018-08-22 12:18:46 +00:00
|
|
|
#graphControls{
|
2018-08-26 11:15:02 +00:00
|
|
|
position: fixed;
|
|
|
|
left: 10px;
|
|
|
|
top: 10px;
|
|
|
|
height: auto;
|
|
|
|
background: white;
|
|
|
|
padding: 10px;
|
|
|
|
}
|
|
|
|
#graphControls .typeJump{
|
|
|
|
font-weight:bold;
|
2018-08-22 12:18:46 +00:00
|
|
|
}
|
|
|
|
#graphControls ul{
|
|
|
|
margin:0;
|
|
|
|
padding: 0;
|
2018-08-26 11:15:02 +00:00
|
|
|
display:inline-block;
|
2018-08-22 12:18:46 +00:00
|
|
|
}
|
|
|
|
#graphControls li{
|
|
|
|
list-style:none;
|
|
|
|
display: inline-block;
|
2018-08-26 11:15:02 +00:00
|
|
|
margin: 10px 10px;
|
2018-08-22 12:18:46 +00:00
|
|
|
cursor: pointer;
|
|
|
|
}
|
2018-08-26 11:15:02 +00:00
|
|
|
|
|
|
|
@media (max-width: 1000px) {
|
|
|
|
body{
|
|
|
|
overflow:auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
#nodeDetails{
|
|
|
|
/* display:none; */
|
|
|
|
position: static;
|
|
|
|
width: 100%;
|
|
|
|
background: white
|
|
|
|
;
|
|
|
|
padding: 20px;
|
|
|
|
/* opacity: 0; */
|
|
|
|
height:auto;
|
|
|
|
margin-top:0;
|
|
|
|
transition: margin 1s;
|
|
|
|
}
|
|
|
|
body.detailsOpen #nodeDetails{
|
|
|
|
displaY:block;
|
|
|
|
margin-top: -33vh;
|
|
|
|
}
|
|
|
|
body.detailsOpen svg#portfolioGraph{
|
|
|
|
right: 0;
|
|
|
|
top: -33vh;
|
|
|
|
}
|
|
|
|
}
|