Commit bfacad6b authored by Daniel Edgecumbe's avatar Daniel Edgecumbe

Various styling adjustments, new font, WIP

parent bd44b077
Pipeline #291 passed with stages
in 28 seconds
......@@ -17,26 +17,75 @@ along with bitcoin-top. If not, see <http://www.gnu.org/licenses/>.
*/
@font-face {
font-family: 'Roboto Condensed';
src: url('RobotoCondensed-Regular.ttf') format('truetype');
font-family: 'Lato';
src: url('Lato-Regular.ttf') format('truetype');
}
:root {
--primary-0: #203D54;
--primary-1: #1A4971;
--primary-2: #2368A2;
--primary-3: #3183C8;
--primary-4: #63A2D8;
--primary-5: #AAD4F5;
--primary-6: #EFF8FF;
--neutral-0: #212934;
--neutral-1: #5F6B7A;
--neutral-2: #8895A7;
--neutral-3: #B8C4CE;
--neutral-4: #CFD6DE;
--neutral-5: #E1E7EC;
--neutral-6: #F8F9FA;
--teal-0: #124544;
--teal-1: #1B655E;
--teal-2: #2A9187;
--teal-3: #3CAEA3;
--teal-4: #6ED7D3;
--teal-5: #A8EEEB;
--teal-6: #E7FFFE;
--green-0: #145239;
--green-1: #197741;
--green-2: #259D58;
--green-3: #38C172;
--green-4: #74D99F;
--green-5: #A8EEC1;
--green-6: #E3FCEC;
--yellow-0: #5C4813;
--yellow-1: #8C6D1F;
--yellow-2: #CAA53D;
--yellow-3: #F4CA64;
--yellow-4: #FAE29F;
--yellow-5: #FDF3D7;
--yellow-6: #FFFCF4;
--red-0: #611818;
--red-1: #891B1B;
--red-2: #B82020;
--red-3: #DC3030;
--red-4: #E46464;
--red-5: #F5AAAA;
--red-6: #FCE8E8;
}
body {
margin: 0; padding: 0; overflow: hidden;
/* background-color: yellow; */
}
* { font-family: Roboto Condensed, monospace; }
* {
font-family: Lato, monospace;
}
p { margin: 0; }
* { margin: 0; padding: 0; }
div#app.production { background-color: white; }
div#app.staging { background-color: #ffddff; }
div#app {
width: 100vw;
height: 99vh;
margin: 0.5vh 0;
height: 100vh;
overflow: hidden;
display: grid;
grid-gap: 0;
......@@ -44,13 +93,55 @@ div#app {
}
div#leftcol {
overflow-x: hidden; overflow-y: scroll;
background-color: var(--primary-2);
color: var(--neutral-6);
}
div#leftcol span {
display: block;
text-align: left;
margin: 0 auto;
font-size: 1.4rem;
line-height: 3.5rem;
padding-left: 2rem;
/* css mate. */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
div#leftcol p {
font-size: 1.2rem;
line-height: 1.5rem;
}
div#leftcol a {
color: var(--neutral-6);
font-size: 1.2rem;
line-height: 1.5rem;
}
div#leftcol a:visited {
color: var(--neutral-6);
}
div#leftcol a:hover {
color: var(--neutral-4);
font-weight: bold;
}
div#leftcol a:active {
color: var(--neutral-3);
font-weight: bold;
}
div#leftcol span { display: block; text-align: center; margin: 0 auto; margin-bottom: 3px; }
div#leftcol img { display: block; margin: 2px auto; }
div#leftcol { text-align: center; }
div#rightcol {
overflow-x: hidden; overflow-y: scroll;
background-color: var(--neutral-6);
overflow-x: hidden;
overflow-y: scroll;
}
div#rightcol.staging { background-color: var(--red-6); }
img#gplv3img { filter: brightness(100); }
div#tab-chooser {
margin-bottom: 1rem;
......@@ -74,10 +165,9 @@ div#header {
display: grid;
grid-gap: 0.2rem;
grid-template-columns: 1fr 3fr;
margin-bottom: 0.5rem;
margin: 1rem 0;
}
div#header.connected { background-color: #bbffbb; }
div#header.disconnected { background-color: red; }
div#header.disconnected { background-color: var(--red-3); }
div#header h1 {
text-align: center;
font-size: 3rem;
......@@ -95,8 +185,8 @@ div#header img.img-regtest { filter: hue-rotate(330deg); }
div.invisible { display: none; }
div.section { width: 96%; margin: 0 auto; margin-bottom: 0.2rem; }
div.section h2 { padding: 0.2rem 0; border-bottom: 1px dashed darkgray; }
div.section { margin-bottom: 1rem; }
div.section h2 { font-size: 2rem; line-height: 3rem; }
/* this nonsense is because c3js is seemingly completely incapable
of dealing with units other than px in a sane fashion */
......@@ -188,26 +278,14 @@ th, td { text-align: center; }
th { border: 1px dotted black; }
td { border: 1px dotted lightgray; }
div#tab-chooser span.selected { background: navy; color: white; }
div#tab-chooser span:hover { background: navy; opacity: 0.5; color: white; }
div#range-chooser span.selected { background: darkgreen; color: white; }
div#range-chooser span:hover { background: darkgreen; opacity: 0.5; color: white; }
div#data-chooser span.selected { background: darkred; color: white; }
div#data-chooser span:hover { background: darkred; opacity: 0.5; color: white; }
div#tab-chooser span.selected { background: var(--primary-1); }
div#tab-chooser span:hover { background: var(--primary-3); }
.selected, .deselected {
/* css mate. */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
div#range-chooser span.selected { background: var(--green-1); }
div#range-chooser span:hover { background: var(--green-3); }
padding: 0.2rem 0;
font-weight: bold;
border: 1px dotted lightgray;
}
div#data-chooser span.selected { background: var(--red-1); }
div#data-chooser span:hover { background: var(--red-3) }
[v-cloak] { display: none; }
......@@ -230,9 +308,10 @@ div.dashboard-block {
div.dashboard-block div {
text-align: center;
font-weight: bold;
background-color: #eeeeee;
border: 1px solid #dddddd;
color: var(--neutral-0);
background-color: var(--neutral-5);
line-height: 6rem;
border-radius: 0.2rem;
}
div.dashboard-block div.dashboard-block-hash {
......@@ -250,12 +329,12 @@ div.dashboard-block div.dashboard-block-age {
div.dashboard-block div.dashboard-block-download {
grid-area: down;
font-size: 3rem;
color: darkgreen;
color: var(--green-2);
}
div.dashboard-block div.dashboard-block-upload {
grid-area: upld;
font-size: 3rem;
color: red;
color: var(--red-2);
}
div.dashboard-block div.dashboard-block-peers {
grid-area: peer;
......@@ -273,7 +352,8 @@ div.dashboard-block div.dashboard-block-mininginfo-warnings {
grid-area: warn;
font-size: 2rem;
line-height: 4rem;
background-color: yellow;
color: var(--neutral-6);
background-color: var(--red-3);
}
div#txcont {
......
......@@ -32,7 +32,7 @@ along with bitcoin-top. If not, see <http://www.gnu.org/licenses/>.
</head>
<body>
<div id="app" v-cloak :class="staging ? 'staging' : 'production'">
<div id="app" v-cloak>
<div id="leftcol">
<div id="header"
......@@ -59,7 +59,7 @@ along with bitcoin-top. If not, see <http://www.gnu.org/licenses/>.
</div>
</div>
<div class="section" id="tab-chooser">
<div id="tab-chooser">
<span
v-for="t in tabs"
:class="tab === t[0] ? 'selected' : 'deselected'"
......@@ -111,7 +111,7 @@ along with bitcoin-top. If not, see <http://www.gnu.org/licenses/>.
</div>
<div class="section">
<h2>source</h2>
<a href="https://www.gnu.org/licenses/agpl-3.0.en.html"><img src="./agplv3-155x51.png"></img></a>
<a href="https://www.gnu.org/licenses/agpl-3.0.en.html"><img id="gplv3img" src="./agplv3-155x51.png"></img></a>
<a href="https://gitlab.electronrelocation.com/esotericnonsense/bitcoin-top">gitlab.electronrelocation.com</a>
</div>
<div class="section">
......@@ -121,7 +121,7 @@ along with bitcoin-top. If not, see <http://www.gnu.org/licenses/>.
</div>
</div> <!-- /leftcol -->
<div id="rightcol">
<div id="rightcol" :class="staging ? 'staging' : 'production'">
<div id="tab-dashboard" class="tab"
:class="tab === 'dashboard' ? 'visible' : 'invisible'"
......
......@@ -22,15 +22,15 @@ const ALL_BITCOINS = 21*(10**14);
const INITIAL_RANGE = 480;
const TABS = [
["dashboard", "dashboard"],
["wallet", "wallet"],
["block-template", "block template"],
["mempool-table", "mempool table"],
["blocks", "blocks"],
["peers", "peers"],
["mempool-chart", "mempool chart"],
["network-chart", "network chart"],
["about", "about"],
["dashboard", "Dashboard"],
["wallet", "Wallet"],
["block-template", "Block template"],
["mempool-table", "Mempool table"],
["blocks", "Blocks"],
["peers", "Peers"],
["mempool-chart", "Mempool chart"],
["network-chart", "Network chart"],
["about", "About"],
];
const RANGES = [
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment