295 lines
4.4 KiB
SCSS
295 lines
4.4 KiB
SCSS
$detailsPadding: 20px;
|
|
$detailsWidth: 700px;
|
|
$detailSlide: -1 * ($detailsWidth + 2 * $detailsPadding);
|
|
$detailSlideMobile: -30vh;
|
|
|
|
|
|
body{
|
|
margin:0;overflow: hidden;
|
|
font-family: "CMU Bright", sans-serif;
|
|
height: 100vh;
|
|
background: black;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
|
|
/*@-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);
|
|
cursor: grab;
|
|
}
|
|
svg.dragging{
|
|
cursor: grabbing;
|
|
}
|
|
g.node{
|
|
cursor: pointer;
|
|
stroke: blue;
|
|
stroke-width: 0;
|
|
transition: stroke-width .5s;
|
|
opacity: 1;
|
|
// pointer-events: none;
|
|
transition: opacity 1s;
|
|
|
|
&.visibleNode{
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
*{
|
|
// transform: scale(1);
|
|
}
|
|
}
|
|
|
|
*{
|
|
// transform: scale(.4);
|
|
}
|
|
|
|
.highlightCircle{
|
|
fill: none;
|
|
stroke-width:0px;
|
|
stroke-dasharray: 3 2;
|
|
}
|
|
|
|
&:hover .highlightCircle{
|
|
stroke-width: 1px;
|
|
stroke: yellow;
|
|
}
|
|
|
|
&.drag{
|
|
cursor: grabbing;
|
|
}
|
|
|
|
text{
|
|
text-anchor: start;
|
|
font-family: "CMU Bright", sans-serif;
|
|
font-size: 10pt;
|
|
}
|
|
}
|
|
|
|
.relationship{
|
|
display:none;
|
|
// opacity: .2;
|
|
|
|
&.visibleLink{
|
|
display:block;
|
|
// opacity: 1;
|
|
|
|
}
|
|
|
|
line{
|
|
fill:none;
|
|
stroke: #999;
|
|
stroke-width: 2px;
|
|
|
|
}
|
|
|
|
text{
|
|
fill:black;
|
|
font-family: "Noto Mono", monospace;
|
|
font-size: 9pt;
|
|
// font-size: 75%;
|
|
display:none;
|
|
}
|
|
&.activeLink{
|
|
line{
|
|
stroke: white;
|
|
}
|
|
text{
|
|
fill:white;
|
|
display:block;
|
|
}
|
|
}
|
|
&.breadcrumbLink{
|
|
display: block;
|
|
|
|
line {
|
|
stroke: yellow !important;
|
|
display: block;
|
|
}
|
|
text{
|
|
fill: yellow !important;
|
|
display:block;
|
|
}
|
|
}
|
|
}
|
|
|
|
circle.nodeBg{
|
|
fill: white;
|
|
// fill: url(#img1);
|
|
// fill:url(#blueGrad);
|
|
stroke-width: 3px;
|
|
stroke: black;
|
|
|
|
.visibleNode & {
|
|
stroke: yellow;
|
|
}
|
|
|
|
.MediaObject & {
|
|
// fill:url(#orangeGrad);
|
|
}
|
|
.Person & {
|
|
// fill:url(#redGrad);
|
|
}
|
|
|
|
.PublicationEvent & {
|
|
// fill:url(#limeGrad);
|
|
}
|
|
|
|
.centeredNode &{
|
|
fill: yellow;
|
|
stroke: yellow;
|
|
}
|
|
}
|
|
text{
|
|
text-anchor: middle;
|
|
}
|
|
|
|
.drag{
|
|
fill:#00f;
|
|
}
|
|
|
|
.relationship.address line{
|
|
/* stroke:#90F7FE; */
|
|
}
|
|
.relationship.location line{
|
|
/* stroke:darkgreen; */
|
|
}
|
|
.relationship.contributor line{
|
|
/* stroke:orange; */
|
|
/* stroke-width:.4em; */
|
|
}
|
|
#nodeDetails{
|
|
position: absolute;
|
|
top: 0;
|
|
right: $detailSlide;
|
|
width: $detailsWidth;
|
|
background: white;
|
|
padding: $detailsPadding;
|
|
/* opacity: 0; */
|
|
transition: opacity 1s, right 1s;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
|
|
.nodeTitle{
|
|
|
|
}
|
|
|
|
.nodeType{
|
|
font-size:80%;
|
|
text-transform: uppercase;
|
|
color: #999;
|
|
margin-left:10px;
|
|
|
|
&:hover{
|
|
cursor:pointer;
|
|
color:blue;
|
|
}
|
|
}
|
|
dt{
|
|
float:left;
|
|
width: 120px;
|
|
font-weight:bold;
|
|
}
|
|
dd:not(.nodeTitleNr1) {
|
|
margin-left: 130px;
|
|
}
|
|
dt.dt-description{
|
|
float:none;
|
|
}
|
|
dd.dd-description{
|
|
margin-left:0;
|
|
}
|
|
dd.dd-contentobject{
|
|
margin-left:0;
|
|
}
|
|
dd.dd-contentobject object{
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
body.detailsOpen{
|
|
#nodeDetails{
|
|
/* opacity:1; */
|
|
right: 0px;
|
|
}
|
|
svg#portfolioGraph{
|
|
right: -1 * $detailSlide / 2;
|
|
}
|
|
}
|
|
|
|
svg#portfolioGraph {
|
|
position: relative;
|
|
right: 0;
|
|
top: 0;
|
|
transition: right 1s, top 1s;
|
|
}
|
|
#graphControls{
|
|
position: fixed;
|
|
left: 10px;
|
|
top: 10px;
|
|
height: auto;
|
|
background: white;
|
|
padding: 10px;
|
|
}
|
|
#graphControls .typeJump{
|
|
font-weight:bold;
|
|
}
|
|
#graphControls ul{
|
|
margin:0;
|
|
padding: 0;
|
|
display:inline-block;
|
|
}
|
|
#graphControls li{
|
|
list-style:none;
|
|
display: inline-block;
|
|
margin: 10px 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
@media (max-width: 1000px) {
|
|
body{
|
|
overflow:auto;
|
|
}
|
|
|
|
#nodeDetails{
|
|
/* display:none; */
|
|
position: static;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
background: white;
|
|
padding: $detailsPadding;
|
|
/* opacity: 0; */
|
|
height:auto;
|
|
margin-top:0;
|
|
transition: margin 1s;
|
|
}
|
|
body.detailsOpen{
|
|
|
|
#nodeDetails{
|
|
displaY:block;
|
|
margin-top: $detailSlideMobile;
|
|
position: relative;
|
|
z-index: 1000;
|
|
min-height:$detailSlideMobile * -1;
|
|
}
|
|
svg#portfolioGraph{
|
|
right: 0;
|
|
top: $detailSlideMobile / 2;
|
|
}
|
|
}
|
|
}
|