forked from security_vision/semantic_graph
582 lines
No EOL
11 KiB
CSS
582 lines
No EOL
11 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: #f04a2d;
|
|
--color3: #0083ff;
|
|
/* --color4: #f9844a; */
|
|
--color5: #24C3B2;
|
|
--color6: #7bc748;
|
|
--color7: #e4a02b;/*#fff239;*/
|
|
--color7-2: #e4a02b;
|
|
--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(12px / var(--zoom));
|
|
fill: none;
|
|
/* transition: stroke-width 1s; */
|
|
cursor: pointer;
|
|
stroke-linecap: round;
|
|
}
|
|
|
|
svg .selectedNode .links line, svg .selectedNode .links path {
|
|
opacity: .3;
|
|
}
|
|
|
|
svg .links line.hover, svg .links path.hover {
|
|
stroke: var(--link-hover-color) !important;
|
|
opacity: 1;
|
|
/* stroke-width: 12; */
|
|
/* marker-end: url(#arrowHeadSelected) !important; */
|
|
}
|
|
|
|
svg .links .linkedHover path{
|
|
stroke: var(--link-hover-related-color);
|
|
opacity: 1;
|
|
stroke-width: calc(12px / var(--zoom));
|
|
/* marker-end: url(#arrowHeadSelectedRelated); */
|
|
}
|
|
|
|
svg .links .linkedSelected path{
|
|
stroke: var(--link-hover-related-color);
|
|
opacity: 1;
|
|
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: black; /*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;
|
|
}
|
|
|
|
.selectedNode .node:not(.linkedSelected):not(.selected) text.nodeTitle{
|
|
/* 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;
|
|
transform: scale(calc(1.5 / var(--zoom-sqrt)));
|
|
}
|
|
|
|
|
|
#filters .node circle, #filters .node path {
|
|
transform: none;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
.node.linkHover text, .node.linkedHover text{
|
|
fill: var(--hover-related-color) !important;
|
|
}
|
|
.selectedNode .node:not(.linkedSelected) path {
|
|
fill: lightgray !important;
|
|
opacity: .5;
|
|
/* 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, .node.selected text {
|
|
fill: var(--hover-color) !important;
|
|
}
|
|
/*
|
|
.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; */
|
|
fill: darkgray;
|
|
}
|
|
|
|
.node.Dataset circle, .node.Dataset path {
|
|
fill: lightgoldenrodyellow
|
|
}
|
|
|
|
.labels .label text {
|
|
fill: yellow;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.node.Institution.Institution-company path, .node.Institution.Institution-company text{
|
|
fill: var(--color2);
|
|
}
|
|
.node.Institution.Institution-government path, .node.Institution.Institution-government text{
|
|
fill: var(--color3);
|
|
}
|
|
.node.Institution.Institution-local-government path{
|
|
fill: #75F06D;
|
|
}
|
|
.node.Institution.Institution-law-enforcement path{
|
|
fill: var(--color7);
|
|
}
|
|
.node.Institution.Institution-law-enforcement text{
|
|
fill: var(--color7-2);
|
|
}
|
|
.node.Institution.Institution-ngo path, .node.Institution.Institution-ngo text{
|
|
fill: var(--color5);
|
|
}
|
|
.node.Institution.Institution-university path{
|
|
fill: #A6E447;
|
|
}
|
|
.node.Institution.Institution-research path, .node.Institution.Institution-research text{
|
|
fill: var(--color6);
|
|
}
|
|
.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;
|
|
min-width: 300px;
|
|
}
|
|
|
|
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: 5px 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; */
|
|
}
|
|
|
|
#filters .institution_types{
|
|
margin-left: 30px;
|
|
}
|
|
|
|
#filter-items.filter-institution .institution_types{
|
|
/* display:none */
|
|
color: darkgray;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#filter-items.filter-institution .institution_types span{
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
#filters h3{
|
|
cursor: pointer;
|
|
}
|
|
#filters h3::before{
|
|
display: inline-block;
|
|
float: left;
|
|
content: '\fe3f'; /*⬆*/
|
|
transform: rotate(180deg);
|
|
transition: transform .8s;
|
|
}
|
|
#filters.hide h3::before{
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
#filter-items{
|
|
max-height: 1000px;
|
|
transition: max-height .8s;
|
|
}
|
|
#filters.hide #filter-items{
|
|
max-height: 0px;
|
|
}
|
|
|
|
|
|
#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;
|
|
}
|
|
|
|
#closeSelection{
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
background-color: white;
|
|
font-size: 200%;
|
|
width: 35px;
|
|
text-align:center;
|
|
z-index: 10;
|
|
}
|
|
|
|
.selectedNode #closeSelection{
|
|
pointer-events: all;;
|
|
opacity: 1;
|
|
cursor: pointer;
|
|
} |