diff --git a/public/dark-theme.css b/public/dark-theme.css index e6abfb7..e864c9a 100644 --- a/public/dark-theme.css +++ b/public/dark-theme.css @@ -6,12 +6,12 @@ body { color: #ddd; } .infobox .header { - background-color: #393939; - border: 1px solid #454545; + background-color: #001726; + border: 1px solid #000508; } .infobox .content { - background-color: #242424; - border: 1px solid #454545; + background-color: #000508; + border: 1px solid #001726; } .bar-inner { background-color: #181818; diff --git a/public/index.css b/public/index.css index b188b52..a14d9f6 100644 --- a/public/index.css +++ b/public/index.css @@ -24,6 +24,7 @@ h1,h2,h3,h4 { padding: 10px; background-color: #ececec; border: 1px solid #ddd; + border-top: 0 !important; } .infobox-row { display: flex; @@ -64,8 +65,12 @@ h1,h2,h3,h4 { .bar-stats .stat-high { text-align: right; } +.interface { + margin-bottom: 15px; +} .ip-addr { display: block; + font-size: 0.8rem; } .sec-info { margin-top: 20px; diff --git a/public/index.js b/public/index.js index bd2b3f8..416e013 100644 --- a/public/index.js +++ b/public/index.js @@ -143,10 +143,10 @@ for (let ip in iface.addresses) { ips.push(e('span', iface.addresses[ip], 'ip-addr')) } - interfaces += box('interface', - e('h3', int) + - ips.join('') + - e('h4', 'Bandwidth', 'sec-info') + + + let bw = '' + if (iface.download && !isNaN(iface.download)) { + bw = e('h4', 'Bandwidth', 'sec-info') + box('row', e('label', 'Download') + e('span', bytesToSize(iface.download)) @@ -154,6 +154,12 @@ e('label', 'Upload') + e('span', bytesToSize(iface.upload)) ) + } + + interfaces += box('interface', + e('h3', int) + + ips.join('') + + bw ) }