@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-related-color: #d1bce9; /* --hover-color: var(darkblue); */ --selected-color: var(--color1); --link-color: rgba(255,255,255,0.5); --link-hover-color: var(--hover-color); --link-hover-related-color: var(--hover-related-color); --link-focus-color: var(--hover-color); --body-back: #96a7b7; /*#9cb3c9; /*#8195a7; /*#9cb3c9; #b9cada*/ --title-color: #1c1c1c; --zoom: 1; /* to be overriden by js */ } body { margin: 0; /* overflow: hidden; */ /* background: linear-gradient(to top, #040308, #AD4A28, #DD723C, #fc7001, #dcb697, #9ba5ae, #3e5879, #020b1a); */ background: var(--body-back); /* background: #9cb3c9; */ font-family: sans-serif; min-height: 100vh; } svg { cursor: grab; font-family: sans-serif; } svg.dragging { cursor: grabbing; } #arrowHead { fill: var(--link-color); } #arrowHeadSelected { fill: var(--link-focus-color);; } #arrowHeadSelectedRelated { fill: var(--link-hover-related-color);; } svg .links line, svg .links path { /* stroke: #f3722c; */ /* stroke: #9df32c; */ stroke: var(--link-color); stroke-width: calc(10px / var(--zoom)); fill: none; /* transition: stroke-width 1s; */ cursor: pointer; } svg .links line.hover, svg .links path.hover { stroke: var(--link-hover-color) !important; /* stroke-width: 12; */ marker-end: url(#arrowHeadSelected) !important; } svg .links .linkedHover path{ stroke: var(--link-hover-related-color); stroke-width: calc(12px / var(--zoom)); marker-end: url(#arrowHeadSelectedRelated); } svg .links .linkedSelected path{ stroke: var(--link-hover-related-color); stroke-width: calc(12px / var(--zoom)); marker-end: url(#arrowHeadSelectedRelated); } /* svg.zoomed .links line, svg.zoomed .links path { stroke-width: 2; } */ /* svg.zoomed .links line, svg.zoomed .links path.hover { stroke-width: 4; } */ svg .title { font-size: 200; } svg .subtitle { font-size: 100; } svg #countries .country { fill: #f7f5f5; fill: #f0eeee; /* stroke:rgb(230, 230, 230); */ stroke:rgb(230, 230, 230); stroke-width: 5; } svg #countries .country.eu_country { /* fill:#eae5e3; */ fill:#e9e1e4; /* fill:rgb(234, 229, 235); */ stroke:rgb(217, 209, 218); } svg #header #titlePath, svg #header #title2Path, svg #header #subtitlePath { stroke: none; fill: none; } svg #header text { font-size: 180px; font-family: "Lexend Mega Regular"; /*Comfortaa*/ opacity: .8; fill: var(--title-color); 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(--body-back); } .links text { display: none; font-size: 5pt; text-anchor: middle; fill: whitesmoke; } .node { cursor: pointer; } .node text.nodeTitle { text-anchor: start; dominant-baseline: hanging; font-size: calc(20pt / var(--zoom)) !important; /*achieves a 'text-anchor: top'*/ /* font-size: 16pt; */ /*Set this in JS*/ transition: opacity 1s; fill: #5d5d5f; /*also when hovering node*/ opacity: 1; /* pointer-events: none; */ /*prevent mouse glitches*/ } /* .node:not(:hover):not(.linkHover) text.nodeTitle.overlapping { */ .node text.nodeTitle.overlapping { /* used to be shown on hover, but disabled now that we have a tooltip */ opacity: 0; pointer-events: none; } 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, .node.linkedHover path, label:hover .node path { fill: var(--hover-related-color) !important; stroke: var(--hover-related-color); stroke-width: 2px; } .selectedNode .node:not(.linkedSelected) path { fill: lightgray !important; /* same as linkHover/linkedHover but without border */ } .node.linkHover text.nodeTitle.overlapping { transition: opacity 0s; } .node:hover circle, .node:hover path, .node.selected path { fill: var(--hover-color) !important; stroke: var(--hover-color); stroke-width: 2px; } /* .node:hover text { transition: none; fill: var(--hover-color); } */ /* .selectedNode .node circle, .selectedNode .node path { fill: lightgray !important; } */ .selectedNode .node.selected circle, .selectedNode .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; */ /* fill: rgb(75, 97, 190); */ fill: rgb(8, 8, 8); } .node.Institution circle, .node.Institution path { /* fill: lightcoral; */ fill: #11F999; } .node.Dataset circle, .node.Dataset path { fill: lightgoldenrodyellow } .labels .label text { fill: yellow; opacity: 1 !important; } .node.Institution.Institution-company path{ fill: #45F68A; } .node.Institution.Institution-government path{ fill: #60F37B; } .node.Institution.Institution-local-government path{ fill: #75F06D; } .node.Institution.Institution-law-enforcement path{ fill: #87EC60; } .node.Institution.Institution-ngo path{ fill: #97E853; } .node.Institution.Institution-university path{ fill: #A6E447; } .node.Institution.Institution-research path{ fill: #B4E03C; } .node.Institution.Institution-project path{ fill: #C1DB31; } .node.Institution.Institution-watchdog path{ fill: #CED628; } .node.Institution.Institution-expert-group path{ fill: #DAD121; } .node.Institution.Institution-foundation path{ fill: #E5CB1E; } .node.Institution.Institution-international-organization path{ fill: gray; } .node.Institution.Institution-art-project path{ /* fill: blue; */ } /* .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); } #tooltip{ position:absolute; z-index: 100; opacity: 1; transition: opacity .3s; background:white; padding: 20px 10px; border-radius: 5px; box-shadow: 2px 2px 5px rgba(0, 0, 0, .5); } #tooltip.link{ } #tooltip .entity{ font-weight: bold; } #tooltip:not(.visible){ position:absolute; z-index: 100; opacity:0; pointer-events: none; } #tooltip h3{ margin: 5px 0; text-align: center;; } #tooltip .category{ display: block; color: black; text-align: center;; } #tooltip .category::before{ content:'· ' } #tooltip .category::after{ content:' ·' } #tooltip .clickForMore{ display: block; color: gray; text-align: center;; } #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; border-top-left-radius: 5px; } 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: rgb(221, 210, 210); fill: none; } #alluvial { /* position:fixed; */ top: 0; left: 0; } #alluvial .flow_label text { font-size: 30; }