All web code and ignore json files
This commit is contained in:
Thefeli73
74
plebnet/assets/css/3d.css
Normal file
74
plebnet/assets/css/3d.css
Normal file
@ -0,0 +1,74 @@
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: Sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.graph-data {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.toggle-data-btn {
|
||||
cursor: pointer;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.toggle-data-btn:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#graph-data-description {
|
||||
font-size: 12px;
|
||||
color: slategrey;
|
||||
}
|
||||
|
||||
#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%);
|
||||
line-height: 24px;
|
||||
font-size: 20px;
|
||||
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: 500px) {
|
||||
#donate {
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
padding: 14px 18px 14px 14px;
|
||||
bottom: 14px;
|
||||
right: 14px;
|
||||
}
|
||||
#donate img {
|
||||
height: 18px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
349
plebnet/assets/css/main.css
Normal file
349
plebnet/assets/css/main.css
Normal file
@ -0,0 +1,349 @@
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user