349 lines
6.3 KiB
CSS
349 lines
6.3 KiB
CSS
|
|
body {
|
|
margin: 0;
|
|
overflow:hidden;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 16px;
|
|
}
|
|
p {
|
|
font-family: 'Roboto', sans-serif;
|
|
}
|
|
h1,h2,h3,h4,h5 {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-weight: 400;
|
|
}
|
|
|
|
#graph_container {
|
|
transform: translate(-50%, 0) scale(1.0);
|
|
left: 50%;
|
|
position: absolute;
|
|
height: calc(100% - 6em);
|
|
top: 6em;
|
|
overflow: hidden;
|
|
}
|
|
#graph_svg {
|
|
overflow: visible;
|
|
}
|
|
|
|
.link {
|
|
stroke: #555;
|
|
stroke-opacity: 0.3;
|
|
stroke-width: 1.5px;
|
|
/*transition: stroke .2s;*/
|
|
}
|
|
|
|
.node .circle {
|
|
fill: #fcfcfc;
|
|
stroke-width: 1.25px;
|
|
pointer-events: all;
|
|
/*transition: fill .2s;*/
|
|
}
|
|
|
|
.node text {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
/*transition: opacity .4s, visibility .4s, font-size .4s;*/
|
|
font: 9px sans-serif;
|
|
fill: #444;
|
|
stroke: none;
|
|
text-shadow: inherit;
|
|
}
|
|
|
|
svg g.node:hover text,
|
|
svg g.selected text,
|
|
svg.show g text,
|
|
svg.enable1st g.neighbour text,
|
|
svg.enable2nd g.neighbour2nd text {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
pointer-events: all;
|
|
}
|
|
svg g.node a:hover{
|
|
text-decoration: underline;
|
|
}
|
|
|
|
svg.enable2nd g.neighbour2nd text {
|
|
font-size: 11px;
|
|
}
|
|
svg.enable2nd g.neighbour2nd .circle {
|
|
fill: #ebe547;
|
|
}
|
|
svg.enable2nd line.neighbour2nd {
|
|
stroke: #ebe547;
|
|
}
|
|
|
|
svg.enable1st g.neighbour text {
|
|
font-size: 15px;
|
|
}
|
|
svg.enable1st g.neighbour .circle {
|
|
fill: #4deb47;
|
|
}
|
|
svg.enable1st line.neighbour {
|
|
stroke: #4deb47;
|
|
}
|
|
|
|
svg g.node:hover .circle,
|
|
svg g.node.selected .circle {
|
|
fill: #eb474d;
|
|
}
|
|
svg g.node.selected text {
|
|
font-size: 18px;
|
|
}
|
|
|
|
|
|
.cell {
|
|
fill: transparent;
|
|
stroke: none;
|
|
}
|
|
|
|
nav {
|
|
width: 100%;
|
|
height: 6em;
|
|
position: absolute;
|
|
z-index: 20;
|
|
background-color: #73c8ff;
|
|
box-shadow: 0 1px 1px rgba(0,0,0,0.08),
|
|
0 2px 2px rgba(0,0,0,0.12),
|
|
0 4px 4px rgba(0,0,0,0.16),
|
|
0 8px 8px rgba(0,0,0,0.20);
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
nav .nav-content {
|
|
}
|
|
nav .nav-content .button {
|
|
height: 3em;
|
|
padding: 1.5em;
|
|
transition: background-color .2s;
|
|
}
|
|
nav .nav-content .button:hover {
|
|
background-color: #2b7aab;
|
|
cursor: pointer;
|
|
}
|
|
nav .nav-content .button img {
|
|
user-select: none;
|
|
height: 100%;
|
|
width: auto;
|
|
transition: filter .2s,
|
|
transform .8s;
|
|
}
|
|
nav .nav-content .button:hover img {
|
|
filter: invert(1);
|
|
}
|
|
nav .nav-content .button#settings.active img{
|
|
transform: rotate(150deg);
|
|
}
|
|
|
|
|
|
#bar {
|
|
width: 25%;
|
|
min-width: 340px;
|
|
right: min(-25%, -340px);
|
|
transition: right .8s, visibility .8s;
|
|
visibility: hidden;
|
|
height: 100%;
|
|
position: absolute;
|
|
z-index: 10;
|
|
background-color: #73c8ff;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
align-content: center;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
#bar.visible {
|
|
right: 0;
|
|
visibility: visible;
|
|
}
|
|
#bar .section {
|
|
width: calc(200%/3);
|
|
min-width: 300px;
|
|
max-width: 1000px;
|
|
}
|
|
#bar .section:first-child {
|
|
margin-top: 7em;
|
|
}
|
|
#bar .section:last-child {
|
|
margin-bottom: 4em;
|
|
}
|
|
#bar .section .content {
|
|
padding: 1em;
|
|
}
|
|
|
|
#search {
|
|
width: 100%;
|
|
}
|
|
#search form {
|
|
height: 100%;
|
|
display: flex;
|
|
}
|
|
#search form .autocomplete {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
#search form #nodeInput {
|
|
border-width: 0;
|
|
border-radius: 0;
|
|
padding: 0 1em 0 3em;
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 2em;
|
|
outline: none;
|
|
background-color: transparent;
|
|
font-family: 'Roboto', sans-serif;
|
|
color: #000;
|
|
transition: background-color .2s, color .2s;
|
|
}
|
|
#search form #nodeInput::placeholder {
|
|
color: #00000080;
|
|
transition: color .2s;
|
|
}
|
|
#search form #nodeInput:active::placeholder,
|
|
#search form #nodeInput:focus::placeholder {
|
|
color: #ffffff80;
|
|
}
|
|
#search form #nodeInput:active,
|
|
#search form #nodeInput:focus {
|
|
color: #fff;
|
|
background-color: #2b7aab;
|
|
}
|
|
img.searchIcon {
|
|
height: 3em;
|
|
width: auto;
|
|
position: absolute;
|
|
padding: 1.5em;
|
|
transition: filter .2s;
|
|
pointer-events: none;
|
|
}
|
|
#search form #nodeInput:active + img.searchIcon,
|
|
#search form #nodeInput:focus + img.searchIcon{
|
|
filter: invert(1);
|
|
}
|
|
|
|
|
|
.autocomplete-items {
|
|
position: absolute;
|
|
top: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.autocomplete-items div {
|
|
padding: .5em 1.5em;
|
|
font-size: 1.5em;
|
|
cursor: pointer;
|
|
background-color: #fff;
|
|
border-bottom: 1px solid #d4d4d4;
|
|
}
|
|
|
|
/*when hovering an item:*/
|
|
.autocomplete-items div:hover {
|
|
background-color: #e9e9e9;
|
|
}
|
|
|
|
/*when navigating through the items using the arrow keys:*/
|
|
.autocomplete-active {
|
|
background-color: DodgerBlue !important;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.tooltip {
|
|
position: relative;
|
|
display: inline-block;
|
|
border-bottom: 1px dotted black;
|
|
}
|
|
|
|
.tooltip .tooltiptext {
|
|
visibility: hidden;
|
|
width: 18em;
|
|
background-color: #00000091;
|
|
color: #fff;
|
|
text-align: center;
|
|
border-radius: 6px;
|
|
padding: 0.5em;
|
|
position: absolute;
|
|
z-index: 1;
|
|
bottom: 125%;
|
|
left: 50%;
|
|
transform: translate(-50%, 0);
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
.tooltip .tooltiptext::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 50%;
|
|
margin-left: -5px;
|
|
border-width: 5px;
|
|
border-style: solid;
|
|
border-color: #555 transparent transparent transparent;
|
|
}
|
|
|
|
.tooltip:hover .tooltiptext {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
#donate {
|
|
position: fixed;
|
|
z-index: 999;
|
|
bottom: 24px;
|
|
right: 24px;
|
|
background-color: #68f442;
|
|
padding: 16px 24px 16px 16px;
|
|
width: auto;
|
|
border-radius: 28px;
|
|
box-shadow: 0 1px 1px rgb(0 0 0 / 11%), 0 2px 2px rgb(0 0 0 / 11%), 0 4px 4px rgb(0 0 0 / 11%), 0 6px 8px rgb(0 0 0 / 11%), 0 8px 16px rgb(0 0 0 / 11%);
|
|
font-size: 20px;
|
|
line-height: 24px;
|
|
color: #000;
|
|
transition: color .2s, background-color .2s;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
border: none;
|
|
box-sizing: initial;
|
|
outline: none;
|
|
}
|
|
#donate img {
|
|
height: 24px;
|
|
padding-right: 16px;
|
|
transition: filter .2s;
|
|
}
|
|
|
|
#donate:hover img {
|
|
filter: invert(1);
|
|
}
|
|
#donate:hover {
|
|
background-color: #4c9c35;
|
|
cursor: pointer;
|
|
color: #fff;
|
|
}
|
|
@media screen and (max-width: 1920px) {
|
|
nav,
|
|
#graph_container {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
@media screen and (max-width: 500px) {
|
|
nav,
|
|
#graph_container {
|
|
font-size: 10px;
|
|
}
|
|
#donate {
|
|
font-size: 14px;
|
|
line-height: 18px;
|
|
padding: 14px 18px 14px 14px;
|
|
bottom: 14px;
|
|
right: 14px;
|
|
}
|
|
#donate img {
|
|
height: 18px;
|
|
padding-right: 8px;
|
|
}
|
|
} |