$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; } } }