1 files changed, 69 insertions, 42 deletions

diff --git a/ui/zerotier.css b/ui/zerotier.css
index 52f16718..cfc23a69 100644
--- a/ui/zerotier.css
+++ b/ui/zerotier.css
@@ -20,7 +20,6 @@ html,body {
 .zeroTierNode {
 	width: 100%;
 	height: 100%;
-	max-height: 100%;
 	padding: 0;
 	margin: 0;
 	display: table;
@@ -55,80 +54,105 @@ html,body {
 }
 
 .zeroTierNode > .middle {
-	height: 100%;
 	width: 100%;
+	height: 100%;
 	padding: 0;
 	margin: 0;
 	overflow: hidden;
 	display: table-row;
 }
-.zeroTierNode > .middle > .middleScroll {
+.zeroTierNode > .middle > .middleCell {
+	width: 100%;
+	height: 100%;
+	display: table-cell;
+}
+.zeroTierNode > .middle > .middleCell > .middleScroll {
 	display: block;
 	width: 100%;
 	height: 100%;
 	padding: 0;
 	margin: 0;
+	overflow: scroll;
 	overflow-x: hidden;
 	overflow-y: scroll;
-	background: #eeeeee;
+	background: #dddddd;
 }
-.zeroTierNode > .middle > .middleScroll > .networks {
+.zeroTierNode > .middle > .middleCell > .middleScroll > .networks {
 	display: block;
-	width: auto;
-	padding: 0;
+	width: 100%;
+	padding: 0 0 0.25rem 0;
 	margin: 0;
 	border: 0;
+	text-align: left;
 	border-collapse: collapse;
 }
-.zeroTierNode > .middle > .middleScroll > .networks > .network {
-	padding: 0.5rem;
-	margin: 0.25rem;
-	float: left;
+.zeroTierNode > .middle > .middleCell > .middleScroll > .networks > .network {
 	display: inline-block;
+	padding: 0.25rem;
+	margin: 0.25rem 0 0 1%;
+	min-width: 31%;
+	max-width: 98%;
 	border: 1px solid #234447;
 	background: #ffffff;
 }
-.zeroTierNode > .middle > .middleScroll > .peers {
+.zeroTierNode > .middle > .middleCell > .middleScroll > .peers {
 	display: table;
 	width: 100%;
-	padding: 0;
 	margin: 0;
 	border-collapse: collapse;
 }
-.zeroTierNode > .middle > .middleScroll > .peers > .peer {
+.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peer {
 	width: 100%;
 	display: table-row;
 	background: #ffffff;
 }
-.zeroTierNode > .middle > .middleScroll > .peers > .peer .peerPath {
-	font-size: 10pt;
+.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peer:nth-child(odd) {
+	background: #f3f3f3;
+}
+.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peer:nth-child(even) {
+}
+.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peer .peerPathActive {
+	font-size: 8pt;
+	color: #555555;
+	font-style: italic;
 	font-family: monospace;
 	white-space: nowrap;
 }
-.zeroTierNode > .middle > .middleScroll > .peers > .peer .peerPathInactive {
-	font-size: 10pt;
+.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peer .peerPathPreferred {
+	font-size: 8pt;
+	color: #000000;
 	font-family: monospace;
-	color: #bbbbbb;
+	white-space: nowrap;
+}
+.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peer .peerPathInactive {
+	font-size: 8pt;
+	font-family: monospace;
+	color: #aaaaaa;
+	font-style: italic;
 	text-decoration: line-through;
 	white-space: nowrap;
 }
-.zeroTierNode > .middle > .middleScroll > .peers > .peer > .f {
+.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peer > .f {
 	display: table-cell;
-	font-size: 10pt;
+	padding: 0.05rem 0.15rem 0.05rem 0.15rem;
+	font-size: 8pt;
 }
-.zeroTierNode > .middle > .middleScroll > .peers > .peerHeader {
+.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peerHeader {
 	width: 100%;
+	font-size: 8pt;
 	display: table-row;
 	background: #ffffff;
 	border-bottom: 1px solid #000000;
 }
-.zeroTierNode > .middle > .middleScroll > .peers > .peerHeader > .f {
+.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peerHeader > .f {
 	display: table-cell;
-	font-size: 10pt;
+	font-size: 8pt;
+	padding: 0.05rem 0.15rem 0.05rem 0.15rem;
 	font-weight: bold;
 }
 
 .zeroTierNode > .bottom {
+	font-size: 12pt;
 	width: 100%;
 	overflow: hidden;
 	display: table-row;
@@ -140,29 +164,38 @@ html,body {
 	white-space: nowrap;
 	float: left;
 	padding: 0 0 0 0.5rem;
+	font-size: 12pt;
+	height: 100%;
 }
 .zeroTierNode > .bottom > .left > .statusLine {
 	font-family: monospace;
 	white-space: nowrap;
 	font-size: 12pt;
+	height: 100%;
 }
 .zeroTierNode > .bottom > .right {
-	background: #91a2a3;
 	text-align: right;
+	height: 100%;
 	white-space: nowrap;
 	float: right;
+	font-size: 12pt;
+}
+.zeroTierNode > .bottom > .right form {
+	height: 100%;
 }
 .zeroTierNode > .bottom > .right input {
 	font-family: monospace;
 	font-size: 12pt;
-	background: #91a2a3;
-	color: #ffffff;
+	background: #ffffff;
+	color: #000000;
 	outline: none;
+	outline-style: none;
+	box-shadow: 0;
 	border: 0;
 	margin: 0;
-	padding: 0.05rem 0.25rem 0.05rem 0.25rem;
+	padding: 0 0.25rem 0 0.25rem;
+	display: inline;
 	height: 100%;
-	display: inline-block;
 }
 .zeroTierNode > .bottom > .right button {
 	display: inline-block;
@@ -172,10 +205,14 @@ html,body {
 	color: #000000;
 	margin: 0;
 	padding: 0.05rem 0.75rem 0.05rem 0.75rem;
+	outline: none;
+	outline-style: none;
 	height: 100%;
 }
 .zeroTierNode > .bottom > .right button:hover {
 	cursor: pointer;
+	outline: none;
+	outline-style: none;
 	border: 1px solid #000000;
 }
 
@@ -187,23 +224,13 @@ html,body {
 	width: 100%;
 	position: relative;
 }
-.zeroTierNetwork .deletedOverlay {
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	background: rgba(255,255,255,0.8);
-	display: block;
-	top: 0;
-	left: 0;
-	z-index: 2;
-}
 .zeroTierNetwork .networkInfo {
-	padding: 0 0 0.5rem 0;
+	padding: 0 0 0.25rem 0;
 	text-align: left;
 	font-size: 12pt;
 }
 .zeroTierNetwork .networkInfo .networkId {
-	font-size: 10pt;
+	font-size: 11pt;
 	font-family: monospace;
 	color: #91a2a3;
 }
@@ -242,7 +269,7 @@ html,body {
 }
 .zeroTierNetwork .leaveNetworkButton {
 	padding: 0.25rem 0.5rem 0.25rem 0.5rem;
-	margin: 0.5rem 0 0 0;
+	margin: 0.25rem 0 0 0;
 	font-size: 10pt;
 	background: #ffffff;
 	outline: none;