@font-face { font-family: 'Lexend Mega Regular'; font-style: normal; font-weight: normal; src: local('Lexend Mega Regular'), url('LexendMega-Regular.woff') format('woff'); } :root { --color1: #9741f9; --color2: #f3722c; --color3: #f8961e; /* --color4: #f9844a; */ --color5: #f9c74f; --color6: #90be6d; --color7: #43aa8b; --color8: #4d908e; --color9: #577590; --color10: #277da1; --hover-color: var(--color1); /* --hover-color: var(darkblue); */ --selected-color: var(--color1); --selected-color: var(--color1); } body { margin: 0; /* overflow: hidden; */ /* background: linear-gradient(to top, #040308, #AD4A28, #DD723C, #fc7001, #dcb697, #9ba5ae, #3e5879, #020b1a); */ background: linear-gradient(to top, #414141, #99a6b8); font-family: sans-serif; min-height: 100vh; } svg { cursor: grab; font-family: sans-serif; } svg.dragging { cursor: grabbing; } #arrowHead { fill: #9df32c; } #arrowHeadSelected { fill: var(--hover-color);; } svg .links line, svg .links path { stroke: #f3722c; stroke: #9df32c; stroke-width: 6; fill: none; transition: stroke-width 1s; cursor: pointer; } svg .links line.hover, svg .links path.hover { stroke: var(--hover-color); stroke-width: 12; marker-end: url(#arrowHeadSelected); } svg.zoomed .links line, svg.zoomed .links path { stroke-width: 2; } svg.zoomed .links line, svg.zoomed .links path.hover { stroke-width: 2; stroke-width: 4; } svg .title { font-size: 200; } svg .subtitle { font-size: 100; } svg #countries .country { fill: rgba(200, 200, 200, 0.7); } svg #countries .country.eu_country { fill: black; } svg #header #titlePath, svg #header #subtitlePath { stroke: none; fill: none; } svg #header text { font-size: 180px; font-family: "Lexend Mega Regular"; /*Comfortaa*/ opacity: .8; fill: black; text-shadow: rgba(0, 0, 0, .5) 5px 5px 10px; /* text-transform: uppercase; */ } svg #header text:nth-of-type(2) { dominant-baseline: hanging; transform: translate(10px, 25px); } svg #header text#subtitle { font-size: 70px; fill: var(--color9); } .links text { display: none; font-size: 5pt; text-anchor: middle; fill: whitesmoke; } .node { cursor: pointer; } .node text.nodeTitle { text-anchor: start; dominant-baseline: hanging; /*achieves a 'text-anchor: top'*/ /* font-size: 16pt; */ /*Set this in JS*/ transition: font-size .4s, opacity 1s; fill: white; opacity: 1; pointer-events: none; /*prevent mouse glitches*/ } .node:not(:hover):not(.linkHover) text.nodeTitle.overlapping { opacity: 0; } svg.zoomed .node text.nodeTitle { /* font-size: 6pt; */ } svg.zoomed.zoomed2 .node text.nodeTitle { font-size: 3pt; } .node circle, .node path { fill: lightgray; } /* Whenever a connected link is hovered */ .node.linkHover circle, .node.linkHover path, label:hover .node path { fill: var(--hover-color) !important; stroke: var(--hover-color); stroke-width: 5px; } .node.linkHover text.nodeTitle.overlapping { transition: opacity 0s; } .node:hover circle, .node:hover path { fill: var(--hover-color) !important; stroke: var(--hover-color); stroke-width: 5px; } .node:hover text { transition: none; fill: var(--hover-color); } .node.selected circle, .node.selected path { fill: var(--selected-color) !important; stroke: var(--selected-color); stroke-width: 5px; } .node.City circle, .node.City path { display: none; } .node.City { fill: white; stroke: black; stroke-width: .5px; font-size: 20px; } .node.Person circle, .node.Person path { fill: lightgreen } .node.Technology circle, .node.Technology path { fill: plum; } .node.Deployments circle, .node.Deployments path { fill: lightblue; } .node.Institution circle, .node.Institution path { fill: lightcoral } .node.Dataset circle, .node.Dataset path { fill: lightgoldenrodyellow } .labels .label text { fill: yellow; opacity: 1 !important; } /* .node.Person circle { fill: var(--color2) } .node.Technology circle { fill: var(--color3); } .node.Deployment circle { fill: var(--color5); } .node.Institution circle { fill: var(--color6) } .node.Dataset circle { fill: var(--color7) } */ #nodeInfo { position: fixed; display: block; right: 20px; bottom: 20px; background: white; padding: 10px; border: solid 1px #ccc; } #nodeInfo.hidden { display: none; } #nodeInfo h2 { margin: 0; padding: 0; } #nodeInfo iframe { width: 50vw; height: calc(100vh - 40px - 20px - 30px); } #closeInfo { cursor: pointer; position: absolute; right: 10px; top: 10px; } #closeInfo:hover { color: var(--hover-color); } a, a:link { text-decoration: none; } a:hover { text-decoration: underline; } header { position: fixed; bottom: 0; right: 0; background: white; padding: 10px; } h1 { /* color:var(--color9); */ margin: 0; text-transform: uppercase; display: none; } p.subtitle { margin: 0; color: var(--color10); /* text-transform: uppercase;; */ display: none; } #filters h3 { text-align: center; ; } #filters label { cursor: pointer; display: block; padding: 10px; } #filters label svg { display: inline; width: 30px; height: 30px; vertical-align: middle; } #filters span:hover { color: var(--hover-color); } #filters input { display: none; } #filters input+span { display: inline-block; padding-left: 10px; /* background: var(--color9); */ text-decoration: line-through; } #filters input:checked+span { /* color: var(--selected-color); */ text-decoration: none; /* box-shadow: inset 0 0 5px black; */ } #map .borders { stroke-width: 6px; stroke: white; fill: none; } #alluvial { /* position:fixed; */ top: 0; left: 0; } #alluvial .flow_label text { font-size: 30; }