200 lines
4.6 KiB
CSS
200 lines
4.6 KiB
CSS
@import "fork-awesome/css/fork-awesome.min.css";
|
|
/* When polishing later, take some inspiration from https://h5bp.org/Effeckt.css/
|
|
We want this UI to look snazzy and polished :D */
|
|
|
|
:root {
|
|
--bg: hsl(0, 0%, 10%);
|
|
--text: white;
|
|
|
|
--tech-a1: hsla(230, 100%, 77%, 0.75);
|
|
--tech-a2: hsla(265, 100%, 77%, 0.75);
|
|
--tech-b: hsla(206, 97%, 44%, 0.75);
|
|
--tech-c: hsla(53, 69%, 80%, 0.75);
|
|
--tech-cb: hsla(53, 69%, 80%, 0.4);
|
|
--tech-d: hsla(178, 61%, 59%, 0.75);
|
|
}
|
|
|
|
|
|
/*
|
|
██████ ██████ ███████ █████ ███ ███ ██████ ██ ███████
|
|
██ ██ ██ ██ ██ ██ ██ ████ ████ ██ ██ ██ ██
|
|
██████ ██████ █████ ███████ ██ ████ ██ ██████ ██ █████
|
|
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
|
|
██ ██ ██ ███████ ██ ██ ██ ██ ██████ ███████ ███████
|
|
*/
|
|
|
|
html, body { font-size: 100%; }
|
|
body {
|
|
font-family: "Ubuntu", sans-serif;
|
|
|
|
margin: 0; padding: 0;
|
|
min-height: 100vh;
|
|
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
grid-template-rows: auto 1fr auto;
|
|
grid-template-areas: "header content"
|
|
"nav content"
|
|
"nav footer";
|
|
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
|
|
header {
|
|
grid-area: header;
|
|
background: hsla(0, 0%, 40%, 0.3);
|
|
padding: 1em;
|
|
text-shadow: 0 0 0.25em var(--text);
|
|
}
|
|
|
|
h1 {
|
|
margin: 0;
|
|
}
|
|
|
|
.version-label {
|
|
font-weight: bolder;
|
|
font-size: 110%;
|
|
}
|
|
.version {
|
|
font-family: "Ubuntu Mono", "Source Code Pro", monospace;
|
|
}
|
|
|
|
/*
|
|
███ ██ █████ ██ ██
|
|
████ ██ ██ ██ ██ ██
|
|
██ ██ ██ ███████ ██ ██
|
|
██ ██ ██ ██ ██ ██ ██
|
|
██ ████ ██ ██ ████
|
|
*/
|
|
nav {
|
|
grid-area: nav;
|
|
background: hsla(0, 0%, 50%, 0.75);
|
|
margin: 0 0.5em;
|
|
text-shadow: 0 0 0.25em var(--text);
|
|
}
|
|
.nav-items {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 125%;
|
|
font-weight: bolder;
|
|
}
|
|
.nav-items > li {
|
|
--border: 0.1em solid hsla(0, 0%, 60%, 0.8);
|
|
border-top: var(--border);
|
|
border-bottom: var(--border);
|
|
padding: 0.5em 0.75em;
|
|
}
|
|
.nav-items a {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0 0.5em;
|
|
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
.nav-items span:last-child { flex: 1; }
|
|
.nav-items .fa:not(.fa-stack):not(.fa-stack-1x):not(.fa-stack-2x):not(.fa-stack-3x) {
|
|
font-size: 200%;
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
|
|
/*
|
|
███ ███ █████ ██ ███ ██
|
|
████ ████ ██ ██ ██ ████ ██
|
|
██ ████ ██ ███████ ██ ██ ██ ██
|
|
██ ██ ██ ██ ██ ██ ██ ██ ██
|
|
██ ██ ██ ██ ██ ██ ████
|
|
*/
|
|
|
|
main {
|
|
grid-area: content;
|
|
}
|
|
|
|
h2 {
|
|
margin: 0 2em;
|
|
padding: 0.7em 0;
|
|
|
|
text-align: center;
|
|
font-size: 200%;
|
|
|
|
background: var(--tech-d);
|
|
text-shadow: 0 0 0.25em var(--text);
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
}
|
|
th, td {
|
|
padding: 0.45em;
|
|
}
|
|
tr:nth-child(even) {
|
|
background: hsla(0, 0%, 80%, 0.5);
|
|
}
|
|
th {
|
|
text-shadow: 0 0 0.1em var(--text);
|
|
border-bottom: 0.2em solid var(--tech-d);
|
|
}
|
|
|
|
.data-display {
|
|
margin: 1em 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1em;
|
|
justify-content: center;
|
|
}
|
|
|
|
.data-item > h3 {
|
|
margin: 0; padding: 0.5em;
|
|
background: var(--tech-c);
|
|
text-align: center;
|
|
text-shadow: 0 0 0.15em var(--text);
|
|
}
|
|
.data-item > :not(:first-child) {
|
|
background: var(--tech-b);
|
|
}
|
|
.container-gauge {
|
|
min-width: 30em;
|
|
}
|
|
|
|
.peer-name {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
background: var(--tech-a1);
|
|
padding: 0.25em 0.45em;
|
|
}
|
|
.peer-name-name {
|
|
cursor: pointer;
|
|
}
|
|
.peer-name-id {
|
|
background: var(--tech-a2);
|
|
cursor: copy;
|
|
}
|
|
.peer-name-id::before {
|
|
content: "🔑";
|
|
padding: 0 0.2em;
|
|
}
|
|
|
|
.invisible-gone {
|
|
display: none;
|
|
}
|
|
|
|
/*
|
|
███████ ██████ ██████ ████████ ███████ ██████
|
|
██ ██ ██ ██ ██ ██ ██ ██ ██
|
|
█████ ██ ██ ██ ██ ██ █████ ██████
|
|
██ ██ ██ ██ ██ ██ ██ ██ ██
|
|
██ ██████ ██████ ██ ███████ ██ ██
|
|
*/
|
|
|
|
footer {
|
|
grid-area: footer;
|
|
}
|