plebnet-visualizer/plebnet/assets/css/main.css

349 lines
6.3 KiB
CSS
Raw Normal View History

2021-08-19 21:57:49 +02:00
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;
}
}