444 lines
7.8 KiB
CSS
444 lines
7.8 KiB
CSS
@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);
|
|
}
|
|
|
|
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: #b0e99a;
|
|
}
|
|
|
|
#arrowHeadSelected {
|
|
fill: var(--hover-color);;
|
|
}
|
|
#arrowHeadSelectedRelated {
|
|
fill: var(--hover-related-color);;
|
|
}
|
|
|
|
svg .links line, svg .links path {
|
|
/* stroke: #f3722c; */
|
|
/* stroke: #9df32c; */
|
|
stroke: #b0e99a;
|
|
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 .links .linkedHover path{
|
|
stroke: var(--hover-related-color);
|
|
stroke-width: 12;
|
|
marker-end: url(#arrowHeadSelectedRelated);
|
|
}
|
|
|
|
svg .links .linkedSelected path{
|
|
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: 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 #title2Path, 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; /*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;
|
|
}
|
|
|
|
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: 5px;
|
|
}
|
|
.node.linkedSelected path {
|
|
fill: var(--hover-related-color) !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: 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);
|
|
}
|
|
|
|
#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: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: white;
|
|
fill: none;
|
|
}
|
|
|
|
#alluvial {
|
|
/* position:fixed; */
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
#alluvial .flow_label text {
|
|
font-size: 30;
|
|
}
|
|
|
|
|
|
|
|
body.light{
|
|
background:white;
|
|
}
|
|
body.light #map .borders{
|
|
stroke: white;
|
|
}
|
|
body.light svg #countries .country{
|
|
fill:white;
|
|
stroke:lightgray;
|
|
stroke-width: 5;;
|
|
}
|
|
body.light svg #countries .country.eu_country{
|
|
fill:rgb(235, 226, 236);
|
|
}
|
|
body.light .node text.nodeTitle {
|
|
fill:black;
|
|
}
|
|
|
|
body.light #arrowHead{
|
|
fill:#577590;
|
|
}
|
|
body.light svg .links line, body.light svg .links path {
|
|
stroke:#577590;
|
|
} |