✨ offline nameserver icon & more (#9)

* 🩹 fix 'learn more' font size

* ✨ add support for offline nameservers

* ✨ offline nameservers & 🎨 table code

✨ support for offline nameservers
🎨 rework table row generation code

* 🩹 unite similar help buttons

* 🩹 fix blocked message

* 📦 compile html

* 📦 compile jhtml

ui/html/index.css

@@ -136,6 +136,7 @@ input, button {
 #results small.random {
   color: #4c5666;
   display: block;
+  font-size: 0.8rem;
   margin-top: 1rem;
   text-align: center;
 }
@@ -144,6 +145,7 @@ input, button {
   border: none;
   color: #626e83;
   cursor: pointer;
+  font-size: 0.8rem;
   outline: none;
   text-decoration: underline;
 }
@@ -166,6 +168,9 @@ input, button {
 #results table tr td.status.ref {
   color: #61afef;
 }
+#results table tr td.status.offline {
+  color: #d19a66;
+}
 #results table tr td.icon {
   border-left: solid transparent 2rem;
   width: 3rem;

ui/html/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../raw/index.sass"],"names":[],"mappings":"AASA;EACC;;;AAED;EACC,kBAZS;EAaT,OAXS;EAYT,aATS;EAUT;EACA;EACA;;;AAED;EACC,aAfS;;;AAiBV;EACC;EACA;EACA;;AACA;EACC,kBA3BQ;EA4BR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;;AAEH;EACC;EACA;EACA;;AACA;EACC;EACA;;AACA;EACC;;;AAEH;EACC;EACA;;AAEC;EACC;EACA;;AACD;EACC;EACA;EACA;EACA,OA3DO;EA4DP;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;EACA,OAlFK;;AAmFP;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAEJ;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACD;EACC,OA/GO;EAgHP;;AAEF;EACC,OAhHQ;EAiHR;EACA;EACA;;AACA;EACC;;;AAGF;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEF;EACC;EACA;;AACA;EACC;;AACA;EACC;;AACA;EACC,OA9IK;;AA+IN;EACC,OA/IK;;AAgJN;EACC,OApJK;;AAqJP;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;;AACA;EACC,OA3JK;;AA4JN;EACC,OAhKK;;AAiKP;EACC;EACA;;AACA;EACC,kBAtKK;EAuKL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;EACA;EACA;;;AAEN;EACC;;;AAED;EACC;IACC;;EACD;IACC","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../raw/index.sass"],"names":[],"mappings":"AAUA;EACC;;;AAED;EACC,kBAbU;EAcV,OAZU;EAaV,aATU;EAUV;EACA;EACA;;;AAED;EACC,aAfU;;;AAiBX;EACC;EACA;EACA;;AACA;EACC,kBA5BS;EA6BT;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;;AAEH;EACC;EACA;EACA;;AACA;EACC;EACA;;AACA;EACC;;;AAEH;EACC;EACA;;AAEC;EACC;EACA;;AACD;EACC;EACA;EACA;EACA,OA5DQ;EA6DR;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;EACA,OAnFM;;AAoFR;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAEJ;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACD;EACC,OAhHQ;EAiHR;;AAEF;EACC,OAhHS;EAiHT;EACA;EACA;;AACA;EACC;;;AAGF;EACC;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACC;EACA;;AACA;EACC;;AACA;EACC;;AACA;EACC,OAjJM;;AAkJP;EACC,OAjJM;;AAkJP;EACC,OAvJM;;AAwJP;EACC,OAtJM;;AAuJR;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;;AACA;EACC,OA/JM;;AAgKP;EACC,OArKM;;AAsKR;EACC;EACA;;AACA;EACC,kBA3KM;EA4KN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;EACA;EACA;;;AAEN;EACC;;;AAED;EACC;IACC;;EACD;IACC","file":"index.css"}

ui/html/index.js

@@ -34,28 +34,25 @@ function dnswatch_search() {
 				var table = '<table>\n';
 
 				//// reference dns
+				let first_ref = true;
 				response['data']['reference'].forEach(i => {
-					// status
-					table += '<tr>\n';
-					table += '<td class="status ref">\n';
-					table += `<i data-feather="${ i["status"] ? "check" : "x" }"></i>\n`;
-					table += '</td>\n';
-					// provider
-					table += '<td class="icon">\n';
-					table += `<img class="uncolored-svg" src="${ i["icon"] }">\n`;
-					table += '</td>\n'
-					// name and address
-					table += `<td class="name">${ i["name"] }<small>${ i["address"] }</small></td>\n`;
-					// reference info
-					table += '<td class="desc ref">reference</td>\n';
-					// help button
-					table += '<td class="help">\n';
-					table += '<button><i data-feather="help-circle"></i></button>\n';
-					table += '</td>\n';
-					table += '</tr>\n'
+
+					table += gen_tablerow({
+						status_color: 'ref',
+						status_icon:  get_status_icon(i['status']),
+						dns_icon:     i['icon'],
+						dns_name:     i['name'],
+						dns_address:  i['address'],
+						desc_color:   'ref',
+						desc_text:    'reference',
+						show_help:    first_ref
+					})
+					first_ref = false;
+
 				});
 
 				table += '</table>';
+
 				// randomized response message
 				if (response['data']['randomized_response']) {
 					table += '<small class="random">This domain uses randomized responses. <button>Learn more</button></small>\n';
@@ -64,28 +61,22 @@ function dnswatch_search() {
 				if (response['data']['found']) {   // only if reference confirms
 					table += '<table><tr></tr>\n';   // spacer
 					//// search rows
+					let causes = [];
 					response['data']['search'].forEach(i => {
-						table += '<tr>\n';
-						// status
-						table += `<td class="status ${ i["status"] ? "check" : "cross" }">\n`;
-						table += `<i data-feather="${ i["status"] ? "check" : "x" }"></i>\n`;
-						table += '</td>\n';
-						// provider icon
-						table += '<td class="icon">\n';
-						table += `<img class="uncolored-svg" src="${ i["icon"] }">\n`;
-						table += '</td>\n';
-						// name and address
-						table += `<td class="name">${ i["name"] }<small>${ i["address"] }</small></td>\n`;
-						// status info
-						if (i['cause'] !== null) {
-							if (i['cause'] == 'cuii') {
-								table += '<td class="desc blocked">blocked by cuii</td>\n';
-								table += '<td class="help">\n';
-								table += '<button><i data-feather="help-circle"></i></button>\n';
-								table += '</td>\n'
-							}
-						}
-						table += '</tr>\n';
+
+						table += gen_tablerow({
+							status_color: get_status_color(i['status']),
+							status_icon:  get_status_icon(i['status']),
+							dns_icon:     i['icon'],
+							dns_name:     i['name'],
+							dns_address:  i['address'],
+							desc_color:   i['cause'] !== null ? 'blocked': '',
+							desc_text:    get_blocked_text(i['cause']),
+							show_help:    i['cause'] !== null && !causes.includes(i['cause'])
+						})
+
+						if (i['cause'] !== null) causes.push(i['cause'])
+
 					});
 				}
 				table += '</table>';
@@ -140,6 +131,38 @@ function is_valid_domain(str) {
 
 
 
+function gen_tablerow(options) {
+	return `
+<tr>
+	<td class="status ${ options.status_color }"><i data-feather="${ options.status_icon }"></i></td>
+	<td class="icon"><img class="uncolored-svg" src="${ options.dns_icon }"></td>
+	<td class="name">${ options.dns_name }<small>${ options.dns_address }</small></td>
+	<td class="desc ${ options.desc_color }">${ options.desc_text }</td>
+	${ options.show_help ? '<td class="help"><button><i data-feather="help-circle"></i></button></td>' : '' }
+</tr>
+`
+}
+
+function get_status_color(status) {
+	if (status === true)  return 'check'
+	if (status === false) return 'cross'
+	                      return 'offline'
+}
+
+function get_status_icon(status) {
+	if (status === true)  return 'check'
+	if (status === false) return 'x'
+	                      return 'wifi-off'
+}
+
+function get_blocked_text(cause) {
+	if (cause == 'cuii') return 'blocked by cuii'
+	if (cause !== null)  return `bocked: ${cause}`
+	                     return ''
+}
+
+
+
 // add event triggers
 document.addEventListener('DOMContentLoaded', () => {
 	document.getElementById('dnswatch-search-submit').addEventListener('click', (event) => {

ui/jhtml-compat/index.css

@@ -137,6 +137,7 @@ input, button {
 #results small.random {
   color: #4c5666;
   display: block;
+  font-size: 0.8rem;
   margin-top: 1rem;
   text-align: center;
 }
@@ -145,6 +146,7 @@ input, button {
   border: none;
   color: #626e83;
   cursor: pointer;
+  font-size: 0.8rem;
   outline: none;
   text-decoration: underline;
 }
@@ -167,6 +169,9 @@ input, button {
 #results table tr td.status.ref {
   color: #61afef;
 }
+#results table tr td.status.offline {
+  color: #d19a66;
+}
 #results table tr td.icon {
   border-left: solid transparent 2rem;
   width: 3rem;

ui/jhtml-compat/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../raw/index.sass"],"names":[],"mappings":"AASA;EACC;;;AAED;EACC,kBAZS;EAaT,OAXS;EAYT,aATS;EAUT;EACA;EACA;;;AAED;EACC,aAfS;;;AAiBV;EACC;EACA;EACA;;AACA;EACC,kBA3BQ;EA4BR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;;AAEH;EACC;EACA;EACA;;AACA;EACC;EACA;;AACA;EACC;;;AAEH;EACC;EACA;;AAEC;EACC;EACA;;AACD;EACC;EACA;EACA;EACA,OA3DO;EA4DP;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;EACA,OAlFK;;AAmFP;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAEJ;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACD;EACC,OA/GO;EAgHP;;AAEF;EACC,OAhHQ;EAiHR;EACA;EACA;;AACA;EACC;;;AAGF;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEF;EACC;EACA;;AACA;EACC;;AACA;EACC;;AACA;EACC,OA9IK;;AA+IN;EACC,OA/IK;;AAgJN;EACC,OApJK;;AAqJP;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;;AACA;EACC,OA3JK;;AA4JN;EACC,OAhKK;;AAiKP;EACC;EACA;;AACA;EACC,kBAtKK;EAuKL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;EACA;EACA;;;AAEN;EACC;;;AAED;EACC;IACC;;EACD;IACC","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../raw/index.sass"],"names":[],"mappings":"AAUA;EACC;;;AAED;EACC,kBAbU;EAcV,OAZU;EAaV,aATU;EAUV;EACA;EACA;;;AAED;EACC,aAfU;;;AAiBX;EACC;EACA;EACA;;AACA;EACC,kBA5BS;EA6BT;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;;AAEH;EACC;EACA;EACA;;AACA;EACC;EACA;;AACA;EACC;;;AAEH;EACC;EACA;;AAEC;EACC;EACA;;AACD;EACC;EACA;EACA;EACA,OA5DQ;EA6DR;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;EACA,OAnFM;;AAoFR;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAEJ;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACD;EACC,OAhHQ;EAiHR;;AAEF;EACC,OAhHS;EAiHT;EACA;EACA;;AACA;EACC;;;AAGF;EACC;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACC;EACA;;AACA;EACC;;AACA;EACC;;AACA;EACC,OAjJM;;AAkJP;EACC,OAjJM;;AAkJP;EACC,OAvJM;;AAwJP;EACC,OAtJM;;AAuJR;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;;AACA;EACC,OA/JM;;AAgKP;EACC,OArKM;;AAsKR;EACC;EACA;;AACA;EACC,kBA3KM;EA4KN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;EACA;EACA;;;AAEN;EACC;;;AAED;EACC;IACC;;EACD;IACC","file":"index.css"}

ui/jhtml-compat/index.js

@@ -35,28 +35,25 @@ function dnswatch_search() {
 				var table = '<table>\n';
 
 				//// reference dns
+				let first_ref = true;
 				response['data']['reference'].forEach(i => {
-					// status
-					table += '<tr>\n';
-					table += '<td class="status ref">\n';
-					table += `<i data-feather="${ i["status"] ? "check" : "x" }"></i>\n`;
-					table += '</td>\n';
-					// provider
-					table += '<td class="icon">\n';
-					table += `<img class="uncolored-svg" src="${ i["icon"] }">\n`;
-					table += '</td>\n'
-					// name and address
-					table += `<td class="name">${ i["name"] }<small>${ i["address"] }</small></td>\n`;
-					// reference info
-					table += '<td class="desc ref">reference</td>\n';
-					// help button
-					table += '<td class="help">\n';
-					table += '<button><i data-feather="help-circle"></i></button>\n';
-					table += '</td>\n';
-					table += '</tr>\n'
+
+					table += gen_tablerow({
+						status_color: 'ref',
+						status_icon:  get_status_icon(i['status']),
+						dns_icon:     i['icon'],
+						dns_name:     i['name'],
+						dns_address:  i['address'],
+						desc_color:   'ref',
+						desc_text:    'reference',
+						show_help:    first_ref
+					})
+					first_ref = false;
+
 				});
 
 				table += '</table>';
+
 				// randomized response message
 				if (response['data']['randomized_response']) {
 					table += '<small class="random">This domain uses randomized responses. <button>Learn more</button></small>\n';
@@ -65,28 +62,22 @@ function dnswatch_search() {
 				if (response['data']['found']) {   // only if reference confirms
 					table += '<table><tr></tr>\n';   // spacer
 					//// search rows
+					let causes = [];
 					response['data']['search'].forEach(i => {
-						table += '<tr>\n';
-						// status
-						table += `<td class="status ${ i["status"] ? "check" : "cross" }">\n`;
-						table += `<i data-feather="${ i["status"] ? "check" : "x" }"></i>\n`;
-						table += '</td>\n';
-						// provider icon
-						table += '<td class="icon">\n';
-						table += `<img class="uncolored-svg" src="${ i["icon"] }">\n`;
-						table += '</td>\n';
-						// name and address
-						table += `<td class="name">${ i["name"] }<small>${ i["address"] }</small></td>\n`;
-						// status info
-						if (i['cause'] !== null) {
-							if (i['cause'] == 'cuii') {
-								table += '<td class="desc blocked">blocked by cuii</td>\n';
-								table += '<td class="help">\n';
-								table += '<button><i data-feather="help-circle"></i></button>\n';
-								table += '</td>\n'
-							}
-						}
-						table += '</tr>\n';
+
+						table += gen_tablerow({
+							status_color: get_status_color(i['status']),
+							status_icon:  get_status_icon(i['status']),
+							dns_icon:     i['icon'],
+							dns_name:     i['name'],
+							dns_address:  i['address'],
+							desc_color:   i['cause'] !== null ? 'blocked': '',
+							desc_text:    get_blocked_text(i['cause']),
+							show_help:    i['cause'] !== null && !causes.includes(i['cause'])
+						})
+
+						if (i['cause'] !== null) causes.push(i['cause'])
+
 					});
 				}
 				table += '</table>';
@@ -141,6 +132,38 @@ function is_valid_domain(str) {
 
 
 
+function gen_tablerow(options) {
+	return `
+<tr>
+	<td class="status ${ options.status_color }"><i data-feather="${ options.status_icon }"></i></td>
+	<td class="icon"><img class="uncolored-svg" src="${ options.dns_icon }"></td>
+	<td class="name">${ options.dns_name }<small>${ options.dns_address }</small></td>
+	<td class="desc ${ options.desc_color }">${ options.desc_text }</td>
+	${ options.show_help ? '<td class="help"><button><i data-feather="help-circle"></i></button></td>' : '' }
+</tr>
+`
+}
+
+function get_status_color(status) {
+	if (status === true)  return 'check'
+	if (status === false) return 'cross'
+	                      return 'offline'
+}
+
+function get_status_icon(status) {
+	if (status === true)  return 'check'
+	if (status === false) return 'x'
+	                      return 'wifi-off'
+}
+
+function get_blocked_text(cause) {
+	if (cause == 'cuii') return 'blocked by cuii'
+	if (cause !== null)  return `bocked: ${cause}`
+	                     return ''
+}
+
+
+
 // add event triggers
 document.addEventListener('DOMContentLoaded', () => {
 	document.getElementById('dnswatch-search-submit').addEventListener('click', (event) => {

ui/raw/index.js

@@ -34,28 +34,25 @@ function dnswatch_search() {
 				var table = '<table>\n';
 
 				//// reference dns
+				let first_ref = true;
 				response['data']['reference'].forEach(i => {
-					// status
-					table += '<tr>\n';
-					table += '<td class="status ref">\n';
-					table += `<i data-feather="${ i["status"] ? "check" : "x" }"></i>\n`;
-					table += '</td>\n';
-					// provider
-					table += '<td class="icon">\n';
-					table += `<img class="uncolored-svg" src="${ i["icon"] }">\n`;
-					table += '</td>\n'
-					// name and address
-					table += `<td class="name">${ i["name"] }<small>${ i["address"] }</small></td>\n`;
-					// reference info
-					table += '<td class="desc ref">reference</td>\n';
-					// help button
-					table += '<td class="help">\n';
-					table += '<button><i data-feather="help-circle"></i></button>\n';
-					table += '</td>\n';
-					table += '</tr>\n'
+
+					table += gen_tablerow({
+						status_color: 'ref',
+						status_icon:  get_status_icon(i['status']),
+						dns_icon:     i['icon'],
+						dns_name:     i['name'],
+						dns_address:  i['address'],
+						desc_color:   'ref',
+						desc_text:    'reference',
+						show_help:    first_ref
+					})
+					first_ref = false;
+
 				});
 
 				table += '</table>';
+
 				// randomized response message
 				if (response['data']['randomized_response']) {
 					table += '<small class="random">This domain uses randomized responses. <button>Learn more</button></small>\n';
@@ -64,28 +61,22 @@ function dnswatch_search() {
 				if (response['data']['found']) {   // only if reference confirms
 					table += '<table><tr></tr>\n';   // spacer
 					//// search rows
+					let causes = [];
 					response['data']['search'].forEach(i => {
-						table += '<tr>\n';
-						// status
-						table += `<td class="status ${ i["status"] ? "check" : "cross" }">\n`;
-						table += `<i data-feather="${ i["status"] ? "check" : "x" }"></i>\n`;
-						table += '</td>\n';
-						// provider icon
-						table += '<td class="icon">\n';
-						table += `<img class="uncolored-svg" src="${ i["icon"] }">\n`;
-						table += '</td>\n';
-						// name and address
-						table += `<td class="name">${ i["name"] }<small>${ i["address"] }</small></td>\n`;
-						// status info
-						if (i['cause'] !== null) {
-							if (i['cause'] == 'cuii') {
-								table += '<td class="desc blocked">blocked by cuii</td>\n';
-								table += '<td class="help">\n';
-								table += '<button><i data-feather="help-circle"></i></button>\n';
-								table += '</td>\n'
-							}
-						}
-						table += '</tr>\n';
+
+						table += gen_tablerow({
+							status_color: get_status_color(i['status']),
+							status_icon:  get_status_icon(i['status']),
+							dns_icon:     i['icon'],
+							dns_name:     i['name'],
+							dns_address:  i['address'],
+							desc_color:   i['cause'] !== null ? 'blocked': '',
+							desc_text:    get_blocked_text(i['cause']),
+							show_help:    i['cause'] !== null && !causes.includes(i['cause'])
+						})
+
+						if (i['cause'] !== null) causes.push(i['cause'])
+
 					});
 				}
 				table += '</table>';
@@ -140,6 +131,38 @@ function is_valid_domain(str) {
 
 
 
+function gen_tablerow(options) {
+	return `
+<tr>
+	<td class="status ${ options.status_color }"><i data-feather="${ options.status_icon }"></i></td>
+	<td class="icon"><img class="uncolored-svg" src="${ options.dns_icon }"></td>
+	<td class="name">${ options.dns_name }<small>${ options.dns_address }</small></td>
+	<td class="desc ${ options.desc_color }">${ options.desc_text }</td>
+	${ options.show_help ? '<td class="help"><button><i data-feather="help-circle"></i></button></td>' : '' }
+</tr>
+`
+}
+
+function get_status_color(status) {
+	if (status === true)  return 'check'
+	if (status === false) return 'cross'
+	                      return 'offline'
+}
+
+function get_status_icon(status) {
+	if (status === true)  return 'check'
+	if (status === false) return 'x'
+	                      return 'wifi-off'
+}
+
+function get_blocked_text(cause) {
+	if (cause == 'cuii') return 'blocked by cuii'
+	if (cause !== null)  return `bocked: ${cause}`
+	                     return ''
+}
+
+
+
 // add event triggers
 document.addEventListener('DOMContentLoaded', () => {
 	document.getElementById('dnswatch-search-submit').addEventListener('click', (event) => {

ui/raw/index.sass

@@ -3,6 +3,7 @@ $c-bg:    #21252b
 $c-blue:   #61afef
 $c-fg:     #d3d7de
 $c-green:  #98c379
+$c-orange: #d19a66
 $c-red:    #e06c75
 $f-sans:   -apple-system, system-ui, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Helvetica Neue', 'Helvetica', sans-serif
 
@@ -126,6 +127,7 @@ input, button
 	small.random
 		color: darken($c-fg, 50%)
 		display: block
+		font-size: .8rem
 		margin-top: 1rem
 		text-align: center
 		button
@@ -133,6 +135,7 @@ input, button
 			border: none
 			color: darken($c-fg, 40%)
 			cursor: pointer
+			font-size: .8rem
 			outline: none
 			text-decoration: underline
 
@@ -149,6 +152,8 @@ input, button
 					color: $c-red
 				&.ref
 					color: $c-blue
+				&.offline
+					color: $c-orange
 			td.icon
 				border-left: solid transparent 2rem
 				width: 3rem