324 lines
7.5 KiB
CSS
324 lines
7.5 KiB
CSS
@charset "UTF-8";
|
|
@import url("https://fontlibrary.org/face/d-din");
|
|
body {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
font-family: "DDINRegular", helvetica, sans-serif;
|
|
font-weight: light;
|
|
height: 100vh;
|
|
background: #222;
|
|
font-size: 12pt; }
|
|
|
|
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; }
|
|
|
|
svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
cursor: grab; }
|
|
|
|
svg.dragging {
|
|
cursor: grabbing; }
|
|
|
|
g.node {
|
|
cursor: pointer;
|
|
stroke: blue;
|
|
stroke-width: 0;
|
|
transition: stroke-width .5s, opacity 0s;
|
|
transition-delay: 0s, 1s;
|
|
opacity: 0; }
|
|
.graphInitialised g.node {
|
|
opacity: 1; }
|
|
g.node.centeredNode {
|
|
opacity: 1;
|
|
transition: stroke-width .5s, opacity 0s;
|
|
transition-delay: 0s, 0s; }
|
|
g.node.visibleNode {
|
|
pointer-events: auto;
|
|
transition-delay: 0s, 0s; }
|
|
g.node .highlightCircle {
|
|
fill: none;
|
|
stroke-width: 0px;
|
|
stroke-dasharray: 3 2; }
|
|
g.node.typeHighlight .highlightCircle {
|
|
stroke-width: 1px;
|
|
stroke: yellow; }
|
|
g.node:hover .highlightCircle {
|
|
stroke-width: 1px;
|
|
stroke: yellow; }
|
|
g.node:hover .nodeBg {
|
|
fill: yellow;
|
|
stroke: yellow; }
|
|
g.node.drag {
|
|
cursor: grabbing; }
|
|
g.node text.nodeType {
|
|
text-anchor: middle;
|
|
font-size: 10pt;
|
|
display: none; }
|
|
g.node text.nodeYear {
|
|
transition: transform .5s;
|
|
text-anchor: middle;
|
|
font-size: 8pt; }
|
|
g.node text.nodeTitle {
|
|
text-anchor: middle;
|
|
font-size: 10pt; }
|
|
g.node text.nodeTitle tspan {
|
|
text-anchor: middle; }
|
|
g.node.ImageObject text.nodeTitle {
|
|
display: none; }
|
|
|
|
.relationship {
|
|
display: none;
|
|
opacity: 0;
|
|
transition: opacity .5s; }
|
|
body.graphInitialised .relationship {
|
|
opacity: 1; }
|
|
.relationship.activeLink, .relationship.hoverLink {
|
|
display: block; }
|
|
.relationship.activeLink text, .relationship.hoverLink text {
|
|
display: block;
|
|
fill: #999; }
|
|
.relationship line {
|
|
fill: none;
|
|
stroke: #999;
|
|
stroke-width: 2px; }
|
|
.relationship text {
|
|
fill: black;
|
|
font-size: 9pt;
|
|
display: none; }
|
|
.relationship.activeLink line {
|
|
stroke: white; }
|
|
.relationship.activeLink text {
|
|
fill: white;
|
|
display: block; }
|
|
.relationship.breadcrumbLink {
|
|
display: block; }
|
|
.relationship.breadcrumbLink line {
|
|
stroke: yellow !important;
|
|
display: block; }
|
|
.relationship.breadcrumbLink text {
|
|
fill: yellow !important;
|
|
display: block; }
|
|
|
|
circle.nodeBg {
|
|
fill: white;
|
|
stroke-width: 3px;
|
|
stroke: white; }
|
|
.visibleNode circle.nodeBg {
|
|
stroke: yellow; }
|
|
.centeredNode circle.nodeBg {
|
|
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: -740px;
|
|
width: 740px;
|
|
background: white;
|
|
padding: 20px;
|
|
/* opacity: 0; */
|
|
transition: opacity 1s, right 1s;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
box-sizing: border-box; }
|
|
#nodeDetails #nodeDetailsScaler {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 20px;
|
|
cursor: col-resize;
|
|
padding: 5px; }
|
|
#nodeDetails #nodeDetailsScaler #scalarbar {
|
|
height: 100%;
|
|
border-right: solid 1px black;
|
|
border-left: solid 1px #333;
|
|
width: 0; }
|
|
#nodeDetails .nodeType {
|
|
font-size: 80%;
|
|
font-variant-caps: small-caps;
|
|
color: #999;
|
|
margin-left: 10px; }
|
|
#nodeDetails .nodeType:hover {
|
|
cursor: pointer;
|
|
color: blue; }
|
|
#nodeDetails ul.breadcrumbs {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0; }
|
|
#nodeDetails ul.breadcrumbs li {
|
|
display: inline-block; }
|
|
#nodeDetails ul.breadcrumbs li:not(:first-child)::before {
|
|
content: "::";
|
|
color: black;
|
|
text-decoration: none;
|
|
margin: 0 10px; }
|
|
#nodeDetails ul.breadcrumbs .crumb {
|
|
cursor: pointer;
|
|
color: blue; }
|
|
#nodeDetails ul.breadcrumbs .crumb:hover {
|
|
text-decoration: underline; }
|
|
#nodeDetails span.nodeYear {
|
|
margin-left: 15px; }
|
|
#nodeDetails span.nodeYear::before {
|
|
content: '('; }
|
|
#nodeDetails span.nodeYear::after {
|
|
content: ')'; }
|
|
#nodeDetails h4 {
|
|
border-top: solid 1px black;
|
|
padding-top: 40px;
|
|
font-size: 120%; }
|
|
#nodeDetails dl:last-child {
|
|
margin-bottom: 250px; }
|
|
#nodeDetails dt {
|
|
float: left;
|
|
width: 170px;
|
|
font-weight: bold;
|
|
min-height: 25px;
|
|
clear: both;
|
|
word-wrap: anywhere; }
|
|
#nodeDetails dd {
|
|
min-height: 30px;
|
|
margin-top: 5px; }
|
|
#nodeDetails dd:not(.nodeTitleNr1) {
|
|
margin-left: 170px; }
|
|
#nodeDetails dt.dt-description {
|
|
float: none; }
|
|
#nodeDetails dd.dd-description {
|
|
margin-left: 0; }
|
|
#nodeDetails dd.dd-contentobject, #nodeDetails dd.dd-embed {
|
|
margin-left: 0; }
|
|
#nodeDetails dd.dd-contentobject object {
|
|
width: 100%; }
|
|
#nodeDetails dd.dd-contentobject video {
|
|
width: 100%; }
|
|
#nodeDetails dd.dd-embed embed {
|
|
width: 100%;
|
|
min-height: 500px; }
|
|
|
|
body.detailsOpen #nodeDetails {
|
|
/* opacity:1; */
|
|
right: 0px; }
|
|
|
|
body.detailsOpen svg#portfolioGraph {
|
|
right: 370px; }
|
|
|
|
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 .typeCount::before {
|
|
content: "(";
|
|
padding-left: 5px; }
|
|
#graphControls .typeCount::after {
|
|
content: ")"; }
|
|
#graphControls ul#typeLinks {
|
|
margin: 0;
|
|
padding: 0;
|
|
display: inline-block; }
|
|
#graphControls ul#typeLinks li {
|
|
list-style: none;
|
|
display: inline-block;
|
|
margin: 10px 10px;
|
|
cursor: pointer; }
|
|
#graphControls #showMoreTypeLinks {
|
|
display: inline-block;
|
|
width: 20px;
|
|
text-align: right;
|
|
cursor: pointer; }
|
|
#graphControls #showMoreTypeLinks::before {
|
|
content: "≡";
|
|
font-size: 150%;
|
|
position: relative;
|
|
top: 4px; }
|
|
#graphControls #showMoreTypeLinks:hover {
|
|
color: red;
|
|
text-decoration: none; }
|
|
.showMoreLinks #graphControls #showMoreTypeLinks {
|
|
pointer-events: none; }
|
|
.showMoreLinks #graphControls #showMoreTypeLinks::before {
|
|
content: "x"; }
|
|
#graphControls #moreTypeLinks {
|
|
position: absolute;
|
|
right: 0;
|
|
background: white;
|
|
list-style: none;
|
|
padding: 20px 30px;
|
|
text-align: left;
|
|
margin: 0;
|
|
display: none; }
|
|
.showMoreLinks #graphControls #moreTypeLinks {
|
|
display: block; }
|
|
#graphControls .typeJump {
|
|
font-weight: bold; }
|
|
|
|
@media (max-width: 1496px) {
|
|
body {
|
|
overflow-y: hidden;
|
|
overflow-x: hidden;
|
|
font-size: 16pt; }
|
|
body.detailsOpen {
|
|
overflow-y: auto; }
|
|
svg#portfolioGraph {
|
|
position: fixed;
|
|
top: 0;
|
|
left: -35vw;
|
|
width: 160vw;
|
|
height: 100vh;
|
|
z-index: -5; }
|
|
#nodeDetails {
|
|
/* display:none; */
|
|
position: static;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
background: white;
|
|
padding: 20px;
|
|
/* opacity: 0; */
|
|
height: auto;
|
|
min-height: 100vh;
|
|
margin-top: 100vh;
|
|
transition: margin 1s; }
|
|
body.detailsOpen #nodeDetails {
|
|
displaY: block;
|
|
margin-top: calc( 100vh + -30vh);
|
|
position: relative;
|
|
z-index: 1000; }
|
|
body.detailsOpen svg#portfolioGraph {
|
|
right: 0;
|
|
top: -15vh; } }
|