From ff400c9448d5e5c68e1036045f36064d2e221b6d Mon Sep 17 00:00:00 2001
From: str4d <str4d@mail.i2p>
Date: Sat, 3 Jun 2017 14:09:17 +0000
Subject: [PATCH] UI feedback

Console:
- Increase contrast of table rows on profile/tunnels/peers tables
- Changed pink font to magenta in /logs to increase legibility
- Soften H3 headings in sidebar
- Single click to select I2P Version and Running Environment table text, with
  table:hover color change and text cursor to better reflect selection
  - Modify text above to indicate what exactly needs to be included in logs
- Reduce size of monospace dests in peers/profiles/tunnels, add additional
  spacing (responsive)
- Fix resizing of sidebar reseed button
- De-emphasise siderbar app icons with background-blend-mode: luminosity
- Change sidebar snark icon to match homepage icon
- Bump div.main text color from #222 to #333 (reduce contrast)

i2ptunnel: Increase vertical spacing of H2/H3's

SusiDNS: Change address helper icon to add book icon

i2psnark:
- Remove font-adjust-size (ubergine/vanilla)
  - Was probably causing the navbar links to display too large on some setups
- Add extra spacing to screenlogger bullets (ubergine)
---
 .../org/klomp/snark/web/I2PSnarkServlet.java  |   2 +-
 .../src/net/i2p/router/web/LogsHelper.java    |   3 +-
 apps/routerconsole/jsp/configstats.jsp        |   2 +-
 apps/routerconsole/jsp/logs.jsp               |   2 +-
 history.txt                                   |  19 +++
 installer/resources/proxy/dnf-header.ht       |   2 +-
 installer/resources/proxy/dnfb-header.ht      |   2 +-
 installer/resources/proxy/dnfp-header.ht      |   2 +-
 installer/resources/proxy/encp-header.ht      |   2 +-
 installer/resources/proxy/nols-header.ht      |   2 +-
 installer/resources/proxy/nolsp-header.ht     |   2 +-
 installer/resources/proxy/reset-header.ht     |   2 +-
 installer/resources/proxy/resetp-header.ht    |   2 +-
 .../themes/console/classic/console.css        |  45 ++++++-
 .../themes/console/classic/i2ptunnel.css      |  20 ++-
 .../resources/themes/console/dark/console.css |  47 +++++--
 .../themes/console/images/buttons/helper.png  | Bin 939 -> 536 bytes
 .../themes/console/light/console.css          | 122 ++++++++++++++----
 .../themes/console/light/i2ptunnel.css        |   5 +
 .../themes/console/midnight/console.css       |  44 +++++--
 .../resources/themes/snark/ubergine/snark.css |   3 +-
 .../resources/themes/snark/vanilla/snark.css  |   1 -
 .../src/net/i2p/router/transport/UPnP.java    |   2 +
 23 files changed, 256 insertions(+), 77 deletions(-)

diff --git a/apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java b/apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java
index 0572dfff7a..1b2f8a7ab9 100644
--- a/apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java
+++ b/apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java
@@ -2862,7 +2862,7 @@ public class I2PSnarkServlet extends BasicServlet {
         buf.append(title);
         buf.append("</TITLE>\n").append(HEADER_A).append(_themePath).append(HEADER_B)
            // hide javascript-dependent buttons when js is unavailable
-           .append("<noscript><style>.script {display: none;}</style></noscript>")
+           .append("<noscript><style type=\"text/css\">.script {display: none;}</style></noscript>")
            .append("<link rel=\"shortcut icon\" href=\"" + _themePath + "favicon.ico\">\n");
         if (showPriority)
             buf.append("<script src=\"").append(_contextPath).append(WARBASE + "js/folder.js\" type=\"text/javascript\"></script>\n");
diff --git a/apps/routerconsole/java/src/net/i2p/router/web/LogsHelper.java b/apps/routerconsole/java/src/net/i2p/router/web/LogsHelper.java
index 548be82f4f..74c661ecbc 100644
--- a/apps/routerconsole/java/src/net/i2p/router/web/LogsHelper.java
+++ b/apps/routerconsole/java/src/net/i2p/router/web/LogsHelper.java
@@ -174,7 +174,8 @@ public class LogsHelper extends HelperBase {
                 else if (msg.contains(_t("ERROR")))
                     color = "#ff3300";
                 else if (msg.contains(_t("WARN")))
-                    color = "#ff00cc";
+                   // color = "#ff00cc"; poor legibility on light backgrounds
+                    color = "#bf00df";
                 else if (msg.contains(_t("INFO")))
                     color = "#000099";
                 else
diff --git a/apps/routerconsole/jsp/configstats.jsp b/apps/routerconsole/jsp/configstats.jsp
index 9fbe48dbc8..d0dc00add7 100644
--- a/apps/routerconsole/jsp/configstats.jsp
+++ b/apps/routerconsole/jsp/configstats.jsp
@@ -6,7 +6,7 @@
 <html><head>
 <%@include file="css.jsi" %>
 <%=intl.title("config stats")%>
-<noscript><style>.script {display: none;}</style></noscript>
+<noscript><style type="text/css">.script {display: none;}</style></noscript>
 <script src="/js/ajax.js" type="text/javascript"></script>
 <%@include file="summaryajax.jsi" %>
 <script type="text/javascript">
diff --git a/apps/routerconsole/jsp/logs.jsp b/apps/routerconsole/jsp/logs.jsp
index 3aec1100c9..cb98230627 100644
--- a/apps/routerconsole/jsp/logs.jsp
+++ b/apps/routerconsole/jsp/logs.jsp
@@ -14,7 +14,7 @@
 
 <table id="bugreports"><tbody>
   <tr><td class="infohelp">
-<%=intl._t("Please include this information in bug reports")%>.
+<%=intl._t("Please include your I2P version and running environment information in bug reports")%>.
 <%=intl._t("Note that system information, log timestamps, and log messages may provide clues to your location; please review everything you include in a bug report.")%>
 <% /* note to translators - both parameters are URLs */
 %><%=intl._t("Please report bugs on {0} or {1}.",
diff --git a/history.txt b/history.txt
index e40116da28..7124f90d81 100644
--- a/history.txt
+++ b/history.txt
@@ -30,6 +30,25 @@
    - Overhaul .snarkTorrents column widths
    - CSS tidyups
  * Compress some of the larger image files by 40-60%
+ * UI feedback:
+   * Console:
+     - Increase contrast of table rows on profile/tunnels/peers tables
+     - Changed pink font to magenta in /logs to increase legibility
+     - Soften H3 headings in sidebar
+     - Single click to select I2P Version and Running Environment table text,
+       with table:hover color change and text cursor to better reflect selection
+       - Modify text above to indicate what exactly needs to be included in logs
+     - Reduce size of monospace dests in peers/profiles/tunnels, add additional
+       spacing (responsive)
+     - Fix resizing of sidebar reseed button
+     - De-emphasise siderbar app icons with background-blend-mode: luminosity
+     - Change sidebar snark icon to match homepage icon
+     - Bump div.main text color from #222 to #333 (reduce contrast)
+   * i2ptunnel: Increase vertical spacing of H2/H3's
+   * SusiDNS: Change address helper icon to add book icon
+   * i2psnark:
+     - Remove font-adjust-size (ubergine/vanilla)
+     - Add extra spacing to screenlogger bullets (ubergine)
 
 2017-05-25 zzz
  * Crypto: Fix AES NPE on 4-core RPi 2nd try (ticket #1989)
diff --git a/installer/resources/proxy/dnf-header.ht b/installer/resources/proxy/dnf-header.ht
index 1e4ca54652..ae1688f655 100644
--- a/installer/resources/proxy/dnf-header.ht
+++ b/installer/resources/proxy/dnf-header.ht
@@ -7,7 +7,7 @@ Proxy-Connection: close
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html><head>
 <title>_("Website Unreachable")</title>
-<noscript><style>.script {display: none;}</style></noscript>
+<noscript><style type="text/css">.script {display: none;}</style></noscript>
 <link rel="shortcut icon" href="http://proxy.i2p/themes/console/images/favicon.ico">
 <link href="http://proxy.i2p/themes/console/default/console.css" rel="stylesheet" type="text/css">
 </head>
diff --git a/installer/resources/proxy/dnfb-header.ht b/installer/resources/proxy/dnfb-header.ht
index 5bae893d5e..18edb3342c 100644
--- a/installer/resources/proxy/dnfb-header.ht
+++ b/installer/resources/proxy/dnfb-header.ht
@@ -7,7 +7,7 @@ Proxy-Connection: close
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html><head>
 <title>_("Warning: Invalid Destination")</title>
-<noscript><style>.script {display: none;}</style></noscript>
+<noscript><style type="text/css">.script {display: none;}</style></noscript>
 <link rel="shortcut icon" href="http://proxy.i2p/themes/console/images/favicon.ico">
 <link href="http://proxy.i2p/themes/console/default/console.css" rel="stylesheet" type="text/css">
 </head>
diff --git a/installer/resources/proxy/dnfp-header.ht b/installer/resources/proxy/dnfp-header.ht
index d248fa2fa7..bd13081a75 100644
--- a/installer/resources/proxy/dnfp-header.ht
+++ b/installer/resources/proxy/dnfp-header.ht
@@ -8,7 +8,7 @@ Proxy-Connection: close
 <html>
 <head>
 <title>_("Outproxy Not Found")</title>
-<noscript><style>.script {display: none;}</style></noscript>
+<noscript><style type="text/css">.script {display: none;}</style></noscript>
 <link rel="shortcut icon" href="http://proxy.i2p/themes/console/images/favicon.ico">
 <link href="http://proxy.i2p/themes/console/default/console.css" rel="stylesheet" type="text/css">
 </head>
diff --git a/installer/resources/proxy/encp-header.ht b/installer/resources/proxy/encp-header.ht
index cbeb39383e..01c5b2d654 100644
--- a/installer/resources/proxy/encp-header.ht
+++ b/installer/resources/proxy/encp-header.ht
@@ -7,7 +7,7 @@ Proxy-Connection: close
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html><head>
 <title>_("Outproxy Unreachable")</title>
-<noscript><style>.script {display: none;}</style></noscript>
+<noscript><style type="text/css">.script {display: none;}</style></noscript>
 <link rel="shortcut icon" href="http://proxy.i2p/themes/console/images/favicon.ico">
 <link href="http://proxy.i2p/themes/console/default/console.css" rel="stylesheet" type="text/css">
 </head>
diff --git a/installer/resources/proxy/nols-header.ht b/installer/resources/proxy/nols-header.ht
index 4b9c19aa35..3af938749a 100644
--- a/installer/resources/proxy/nols-header.ht
+++ b/installer/resources/proxy/nols-header.ht
@@ -7,7 +7,7 @@ Proxy-Connection: close
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html><head>
 <title>_("Website Unreachable")</title>
-<noscript><style>.script {display: none;}</style></noscript>
+<noscript><style type="text/css">.script {display: none;}</style></noscript>
 <link rel="shortcut icon" href="http://proxy.i2p/themes/console/images/favicon.ico">
 <link href="http://proxy.i2p/themes/console/default/console.css" rel="stylesheet" type="text/css">
 </head>
diff --git a/installer/resources/proxy/nolsp-header.ht b/installer/resources/proxy/nolsp-header.ht
index dc25d20b48..05a35cfcb9 100644
--- a/installer/resources/proxy/nolsp-header.ht
+++ b/installer/resources/proxy/nolsp-header.ht
@@ -7,7 +7,7 @@ Proxy-Connection: close
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html><head>
 <title>_("Outproxy Not Found")</title>
-<noscript><style>.script {display: none;}</style></noscript>
+<noscript><style type="text/css">.script {display: none;}</style></noscript>
 <link rel="shortcut icon" href="http://proxy.i2p/themes/console/images/favicon.ico">
 <link href="http://proxy.i2p/themes/console/default/console.css" rel="stylesheet" type="text/css">
 </head>
diff --git a/installer/resources/proxy/reset-header.ht b/installer/resources/proxy/reset-header.ht
index ebf470807c..4b6c1259b4 100644
--- a/installer/resources/proxy/reset-header.ht
+++ b/installer/resources/proxy/reset-header.ht
@@ -7,7 +7,7 @@ Proxy-Connection: close
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html><head>
 <title>_("Connection Reset")</title>
-<noscript><style>.script {display: none;}</style></noscript>
+<noscript><style type="text/css">.script {display: none;}</style></noscript>
 <link rel="shortcut icon" href="http://proxy.i2p/themes/console/images/favicon.ico">
 <link href="http://proxy.i2p/themes/console/default/console.css" rel="stylesheet" type="text/css">
 </head>
diff --git a/installer/resources/proxy/resetp-header.ht b/installer/resources/proxy/resetp-header.ht
index 632be830cf..a5458f53b6 100644
--- a/installer/resources/proxy/resetp-header.ht
+++ b/installer/resources/proxy/resetp-header.ht
@@ -7,7 +7,7 @@ Proxy-Connection: close
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html><head>
 <title>_("Connection Reset")</title>
-<noscript><style>.script {display: none;}</style></noscript>
+<noscript><style type="text/css">.script {display: none;}</style></noscript>
 <link rel="shortcut icon" href="http://proxy.i2p/themes/console/images/favicon.ico">
 <link href="http://proxy.i2p/themes/console/default/console.css" rel="stylesheet" type="text/css">
 </head>
diff --git a/installer/resources/themes/console/classic/console.css b/installer/resources/themes/console/classic/console.css
index 14e98137e2..d8f7324a9b 100644
--- a/installer/resources/themes/console/classic/console.css
+++ b/installer/resources/themes/console/classic/console.css
@@ -1891,6 +1891,13 @@ tr.tablefooter:hover td {
      margin-top: 10px !important;
 }
 
+#upnpscan {
+     border: 1px solid #89f;
+     margin: -11px 0 5px;
+     padding: 0 10px 5px;
+     background: #fff;
+}
+
 .sortup, .sortdown, .sortupactive, .sortdownactive {
      padding: 1px 0;
      border: 1px solid #999;
@@ -2220,6 +2227,18 @@ pre#transports {
      margin: 3px;
 }
 
+#enviro {
+     -moz-user-select: all;
+     -webkit-user-select: all;
+     user-select: all;
+     cursor: text;
+}
+
+#enviro:hover tr, #enviro:hover td {
+     background: #ffe;
+     border: #ffe;
+}
+
 #enviro td, #eventlogs td {
      padding: 5px 10px;
 }
@@ -5216,14 +5235,23 @@ p#enablefullstats, p#gatherstats {
      background: #ff3300;
 }
 
-#logs li font[color="#ff00cc"]::before {
-     background: #ff00cc;
+#logs li font[color="#bf00df"]::before {
+     background: #bf00df;
 }
 
 #logs li font[color="#000099"]::before {
      background: #000099;
 }
 
+/* peers, profiles, tunnels */
+
+.cells tt, #profilelist tt {
+     font-size: 8pt !important;
+}
+
+/* end peers, profiles, tunnels dests */
+
+
 /* end logs */
 
 /* responsive layout */
@@ -5638,6 +5666,12 @@ table.sybil_routerinfo:last-child {
 }
 }
 
+@media screen and (min-width: 1200px) {
+.cells tt, #profilelist tt {
+     margin-left: 2px !important;
+}
+}
+
 @media screen and (min-width: 1500px) {
 body, .main, .main td, .news p, #news p, .tab, .tab2, .main li b, div.joblog li, .themelabel, .ui_lang, .applabel a, .statusnotes, .routersummary button.download,
 #peerdefs, #profile_defs, #thresholds, #configinfo, .infohelp, .infowarn, button, input, select, textarea, code, tt, pre, .netdbentry th, .configtable th, .statlist a[name],
@@ -5645,10 +5679,15 @@ body, .main, .main td, .news p, #news p, .tab, .tab2, .main li b, div.joblog li,
      font-size: 10pt !important;
 }
 
-.routersummary td, .routersummary a, .routersummary button, .routersummary h4, .routersummary h4 a, div.news, #banlist li, .news #newsStatus, .news #ewsDisplay, .topness, .footnote {
+.routersummary td, .routersummary a, .routersummary button, .routersummary h4, .routersummary h4 a, div.news, #banlist li,
+.news #newsStatus, .news #ewsDisplay, .topness, .footnote, .cells tt, #profilelist tt {
      font-size: 9pt !important;
 }
 
+.cells tt, #profilelist tt {
+     margin-left: 3px !important;
+}
+
 .main, .news, h1 {
      margin-left: 232px !important;
 }
diff --git a/installer/resources/themes/console/classic/i2ptunnel.css b/installer/resources/themes/console/classic/i2ptunnel.css
index 0b8b2f17f1..3332c3c354 100644
--- a/installer/resources/themes/console/classic/i2ptunnel.css
+++ b/installer/resources/themes/console/classic/i2ptunnel.css
@@ -246,7 +246,7 @@ input[type="hidden"], input.default {
 }
 
 h2, h3 {
-     padding: 6px 10px;
+     padding: 8px 10px 6px 30px;
      border: 1px solid #89f;
      background: #fff url(/themes/console/classic/images/tinytitle.png) repeat right center;
      background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%);
@@ -262,32 +262,28 @@ h2, h3 {
 
 /* title images */
 
-h2, h3 {
-     padding-left: 30px;
-}
-
 #messages h2 {
-     background: url(/themes/console/images/info/logs.png) left 5px center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%) #fff !important;
+     background: url(/themes/console/images/info/logs.png) 5px center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%) #fff !important;
      background-size: 20px auto, 100% 100%, 100% 100% !important;
 }
 
 #globalTunnelControl h2 {
-     background: url(/themes/console/images/info/control.png) left 5px center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%) #fff !important;
+     background: url(/themes/console/images/info/control.png) 5px center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%) #fff !important;
      background-size: 20px auto, 100% 100%, 100% 100% !important;
 }
 
 #servers h2 {
-     background: url(/themes/console/images/info/server.png) left 5px center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%) #fff !important;
+     background: url(/themes/console/images/info/server.png) 5px center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%) #fff !important;
      background-size: 20px auto, 100% 100%, 100% 100% !important;
 }
 
 #clients h2 {
-     background: url(/themes/console/images/info/client.png) left 5px center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%) #fff !important;
+     background: url(/themes/console/images/info/client.png) 5px center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%) #fff !important;
      background-size: 20px auto, 100% 100%, 100% 100% !important;
 }
 
 #tunnelEditPage h2, #tunnelEditPage h3, #registration h2, #registration h3 {
-     background: url(/themes/console/images/info/configure.png) left 5px center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%) #fff !important;
+     background: url(/themes/console/images/info/configure.png) 5px center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%) #fff !important;
      background-size: 20px auto, 100% 100%, 100% 100% !important;
 }
 
@@ -944,8 +940,10 @@ th {
      font-size: 10.5pt;
 }
 
-h2, h3 {
+h2, h3, #messages h2, #globalTunnelControl h2, #servers h2, #clients h2, #tunnelEditPage h2, #tunnelEditPage h3, #registration h2, #registration h3, #wizardPanel h2 {
      font-size: 12pt;
+     padding: 10px 10px 8px 35px;
+     background-position: 8px center, 0 0 !important;
 }
 
 #localDestination, .authentication {
diff --git a/installer/resources/themes/console/dark/console.css b/installer/resources/themes/console/dark/console.css
index 6fb576bca8..83b8850d93 100644
--- a/installer/resources/themes/console/dark/console.css
+++ b/installer/resources/themes/console/dark/console.css
@@ -3792,32 +3792,45 @@ th > img[src^="/imagegen"] { /* scale down header images */
      display: none;
 }
 
-table#enviro, table#criticallogs, table#routerlogs, table#eventlogs, table#wrapperlogs {
+#enviro, #criticallogs, #routerlogs, #eventlogs, #wrapperlogs {
      margin-top: -11px;
 }
 
-table#bugreports {
+#bugreports {
      margin-top: 15px;
 }
 
-table#bugreports td {
+#bugreports td {
      background: url(images/infohelp.png) 12px center no-repeat !important;
      padding: 15px 10px 15px 50px;
 }
 
-table#enviro td {
+#enviro:hover {
+     -moz-user-select: all;
+     --webkit-user-select: all;
+     user-select: all;
+     cursor: text;
+}
+
+#enviro:hover td {
+     background: #010;
+     border: #010;
+     color: #ff0;
+}
+
+#enviro td {
      font-weight: normal !important;
      padding: 5px 10px;
 }
 
-table#enviro td:first-child {
+#enviro td:first-child {
      width: 100px;
      text-align: right;
      padding-right: 0;
      white-space: nowrap;
 }
 
-table#criticallogs td , table#routerlogs td, table#eventlogs td, table#wrapperlogs td {
+#criticallogs td , #routerlogs td, #eventlogs td, #wrapperlogs td {
      font-weight: normal !important;
      padding: 5px 10px;
      border-top: 1px solid #494;
@@ -3839,7 +3852,7 @@ table[id$="logs"] ul {
      margin: -5px 12px -5px -18px !important;
 }
 
-table#wrapperlogs {
+#wrapperlogs {
      width: 100%;
      table-layout: fixed;
      margin-bottom: 10px;
@@ -3928,11 +3941,11 @@ font[color="#ff3300"] {
      background: #990;
 }
 
-font[color="#ff00cc"] {
+font[color="#bf00df"] {
      color: #880 !important;
 }
 
-#logs li font[color="#ff00cc"]::before {
+#logs li font[color="#bf00df"]::before {
      background: #880;
 }
 
@@ -5121,7 +5134,7 @@ textarea#advancedsettings {
      background-size: 28px 28px !important;
 }
 
-table.logtable, table#enviro {
+table.logtable, #enviro {
      margin-top: -1px !important;
 }
 
@@ -5154,7 +5167,8 @@ td.optionsave {
      margin-bottom: 0;
 }
 
-h3.tabletitle, h3#i2pclientconfig, h3#advancedclientconfig, h3#webappconfig, h3#pconfig, h3#pluginfromurl, h3#pluginfromfile, h3#updateplugins, h3#pluginmanage, h3#bannedpeers, h3.ptitle, h3#transports, h3#upnpstatus, h3.sybils, #certs h3 {
+h3.tabletitle, h3#i2pclientconfig, h3#advancedclientconfig, h3#webappconfig, h3#pconfig, h3#pluginfromurl, h3#pluginfromfile,
+h3#updateplugins, h3#pluginmanage, h3#bannedpeers, h3.ptitle, h3#transports, h3#upnpstatus, h3.sybils, #certs h3 {
      margin-bottom: 0 !important;
      border-radius: 0;
      border: 1px solid #494;
@@ -5188,6 +5202,17 @@ h3#upnpstatus {
      margin-bottom: 7px !important;
 }
 
+h3#upnp {
+     border: 1px solid #494;
+}
+
+#upnpscan {
+     border: 1px solid #494;
+     margin: -11px 0 10px;
+     padding: 5px 15px;
+     background: #000;
+}
+
 h3.ptitle {
      margin-bottom: -6px !important;
 }
diff --git a/installer/resources/themes/console/images/buttons/helper.png b/installer/resources/themes/console/images/buttons/helper.png
index 2c0174e4a57df391c343fbbd5090871e35c6b398..f8e5f5c96fea6207b757ff02cc99b9df60880c7e 100644
GIT binary patch
delta 474
zcmV<00VV#c2bctqNPhvkNkl<Zc-ov(O-lk{5Po*u)m4kEYhe_Gn30Espt=MibSXMi
z_zSvpC@T6DT?4&zs-Q!sAP;>Ux&+lBD8x_*yOk}NCFFiJ@8Zh(u>=ha^Dz6)v(L=?
z4rdq!n2Dm8pb%FV4}0*pJ(KS;AlQ=eqfBPoEsBubZulgr;eURw7e0>%5@CtHN0Z4_
ztEfSsY1;5{Duv$oj+G(*u6wgRVJSu--Kv0(L?RG^K`4sisGV8`j6Bz-fD!1rj#{mT
zY&Ppi5DtflK<6C^K+bU-LZMJwaW0ob{Y*y!7tMhU13b^8QmM2Nu)KLj*E$oZstPa%
z3u?y}%)AqUrGJ36VB!{Q<o~PSwl|GWR}q-;PU3xl7^~o06<B|^u-#?8fceA}5GeLx
z><kz^Z&DyQDY)_M;lq^&6a!_g4E*RE+{zsc+&2+eGhq8+pFv5@A-XVF$0f|Jj0Xr#
zT%BAtDG;r9zz9rSx4xetJRB6j)~<iK3y=G+W%%VhI8&PfD(YrM0^K!R8oNzn!;Gh2
zYmhY=sM13cTrqg)#;kRwE83*6h4J+l$9EjM7>4i74}rTT?Q<BZ;#YtH06Xm3$tro&
Q^#A|>07*qoM6N<$f}_US>Hq)$

delta 880
zcmV-$1CRWe1gi&-NPh!ONkl<Zc-l;pOH30{6o$|3OgpyFPD_hGp-?~sY72_EfoPG1
z@dbfJW7srNbYtR17j8&2y3y#GxDe39m>7&fgO8XX)<=B=6eOZzR4Ce}PPOzoEp2DK
zhah^Bf9B?#^ZmJJ<{on66yP#b?Wg)lB~XP><sK5oq|YfE=zq(!szR#uRHIaW_CI)#
z<ZUuq?#<fNVd&9+g(77Fcr+-PB$1^m2#N;qEbg_vkQ48J(eNQOVb|cw(^=5ic<b9E
zhw^srbf~*Gmor+e77cQ-Sgc@b%9j`)uU<TQ>MTjl2IX(32hl`<$L1G^k-{5!p6}uV
z0cXD5-k9?H4S&MK1dGBw#xRF9E49c_7Ed7P=D}v~?d|3Leka2)Wslq21A@zyj6|bx
zJOQuM<rfYQYg!q`($dm$EMhh{__o48qyhxS)dm{V6zMG3xZSCpo2z-oaRIm6eSR<)
zJhxkt&PbAU>7Xc%kByD_o12>(s|N;3ml=k{e|<}b>wn-Cwh&T(g<|D~4VF|i3URkP
znayS&(fADfTQeBL9M)hhGRR^J;amcYM5WSZQYnx_p?D|9%|vK|Tcr<R8=^QPr_=F_
zECb;<Ei%ZW0i*yFIZ*_b<A75rproh>ETyGjot*`r#Q}D04(JJh`~DpiDivgDEi%aB
z!yu|58h;mrI4enDs;bI=Q(Nnpw%LHen_{s8?lFeB{_=frUs)+4gDe`DB2{uA@aa=9
z6N^Fdg9jR`)!I%7as2%NxW^dgKFB(_RotR{=sK)Nme8x*DtSOnys8trkr8`+eSMiq
zr3(D+?oLKNevDt;eX=Z2-IUK-D`<1FG9jijU4O1E%Aq0eXNP=y2!G>NnZRVvWNzH+
z^+ubTn(8VqTqrfw)D)PV&f+VEZJJ$2_ps@rLPj<hLSAJFvzP?1HCT*KCbCvE*g^E*
zB?N@$Q%geI@NjE59A;@d?6M#*Z<p2Jc{(TiX!Vb0lj6JS#m|zhZvE5Cci*(J*I#1`
zYiYwoWlVaYAs2%EnJ-WwrB)^n6zf1xR>J~gg3;raYZr5}BHL-aHQk}V*@wT;zdD*Y
zT|YI>m2vLJOG3?7#+k;}#<_O><$_h?3w7x4^db94fB^v2fM;wIJUq<+0000<MNUMn
GLSTYScC54j

diff --git a/installer/resources/themes/console/light/console.css b/installer/resources/themes/console/light/console.css
index 4e61627586..17d972574b 100644
--- a/installer/resources/themes/console/light/console.css
+++ b/installer/resources/themes/console/light/console.css
@@ -198,8 +198,10 @@ div.routersummary a:active img[src$="i2plogo.png"] {
      margin: -9px -7px -2px;
      padding: 2px 0;
      text-transform: uppercase;
-     background: #ffe url(images/header.png) center center repeat-x;
+     background: #e7e7ff !important;
+     background: #e7e7ff url(images/header.png) center center repeat-x !important;
      background: linear-gradient(to bottom, #fff 50%, #eef 50%) !important;
+     background: #e7e7ff linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)) !important;
      border: 1px solid #99f;
      border-left: none;
      border-right: none;
@@ -214,6 +216,7 @@ div.routersummary a:active img[src$="i2plogo.png"] {
 
 .routersummary h3:hover {
      background: linear-gradient(to bottom, #fff 50%, #ffe8bf 50%, #efd9b3 100%) !important;
+     background: #fff linear-gradient(to bottom, #fff 50%, rgba(255, 232, 191, 0.6) 50%, rgba(239, 217, 179, 0.4) 100%) !important;
 }
 
 .routersummary h3:hover a {
@@ -405,6 +408,10 @@ p:empty + .sb_notice {
 
 /* experimental sidebar navigation for webapps */
 
+#sb_services td {
+     background: url(images/noise.png);
+}
+
 #sb_services a:link, #sb_services a:visited {
      display: inline-block;
      width: 100%;
@@ -424,48 +431,58 @@ p:empty + .sb_notice {
      padding-bottom: 2px;
 }
 
+#sb_services a {
+     background-blend-mode: luminosity, normal;
+}
+
+#sb_services a:hover {
+     background-blend-mode: normal;
+}
+
 #sb_services a[href="/susimail/susimail"] {
-     background: url(images/inbox.png) left center no-repeat;
+     background: #fbfbfe url(images/inbox.png) left center no-repeat;
 }
 
 #sb_services a[href="/susimail/susimail"]:hover {
-     background: url(images/inbox.png) left center no-repeat #ffe;
+     background: #ffe url(images/inbox.png) left center no-repeat;
      border-radius: 2px;
 }
 
 #sb_services a[href="/i2psnark/"] {
-     background: url(images/magnet.png) left center no-repeat;
+     background: #fbfbfe url(/themes/console/images/i2psnark.png) left center no-repeat;
+     background-size: 16px 16px;
 }
 
 #sb_services a[href="/i2psnark/"]:hover {
-     background: url(images/magnet.png) left center no-repeat #ffe;
+     background: #ffe url(/themes/console/images/i2psnark.png) left center no-repeat;
+     background-size: 16px 16px;
      border-radius: 2px;
 }
 
 #sb_services a[href="http://127.0.0.1:7658/"] {
-     background: url(images/server.png) left center no-repeat;
+     background: #fbfbfe url(images/server.png) left center no-repeat;
 }
 
 #sb_services a[href="http://127.0.0.1:7658/"]:hover {
-     background: url(images/server.png) left center no-repeat #ffe;
+     background: #ffe url(images/server.png) left center no-repeat;
      border-radius: 2px;
 }
 
 #sb_services a[href="/orchid/"] {
-     background: url(images/flower.png) left center no-repeat;
+     background: #fbfbfe url(images/flower.png) left center no-repeat;
 }
 
 #sb_services a[href="/orchid/"]:hover {
-     background: url(images/flower.png) left center no-repeat #ffe;
+     background: #ffe url(images/flower.png) left center no-repeat;
      border-radius: 2px;
 }
 
 #sb_services a[href*="bote"] {
-     background: url(images/mail_black.png) left center no-repeat;
+     background: #fbfbfe url(images/mail_black.png) left center no-repeat;
 }
 
 #sb_services a[href*="bote"]:hover {
-     background: url(images/mail_black.png) left center no-repeat #ffe;
+     background: #ffe url(images/mail_black.png) left center no-repeat;
      border-radius: 2px;
 }
 
@@ -854,7 +871,7 @@ div.main {
      margin: -12px 0 8px 207px;
      padding: 0 15px 10px 15px;
      text-align: left;
-     color: #222;
+     color: #333;
      width: auto;
      min-width: 546px;
      border: 1px solid #447;
@@ -1321,7 +1338,7 @@ h3#iptransport a:hover, h3#advancedconfig a:hover {
      filter: drop-shadow(0 0 1px #f60);
 }
 
-h3#transports {
+h3#transports, h3#upnp {
      border: 1px solid #7789bf;
 }
 
@@ -1334,6 +1351,14 @@ pre#transports {
      margin: -16px 0 0;
 }
 
+#upnpscan {
+     border: 1px solid #7789bf;
+     margin: -16px 0 5px;
+     padding: 5px 10px;
+     background: #fff;
+     background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px);
+}
+
 /* confignet tidyup */
 
 #netconfig .optbox {
@@ -1833,31 +1858,43 @@ table#wrapperlogs {
      background: #ff3300;
 }
 
-#logs li font[color="#ff00cc"]::before {
-     background: #ff00cc;
+#logs li font[color="#bf00df"]::before {
+     background: #bf00df;
 }
 
 #logs li font[color="#000099"]::before {
      background: #000099;
 }
 
-table#bugreports {
+#bugreports {
      margin-top: 15px;
      padding: 10px;
      font-size: 9pt !important;
 }
 
-table#enviro, table[id$="logs"] {
+#enviro, table[id$="logs"] {
      font-size: 9pt !important;
      padding: 10px;
 }
 
-table#enviro td {
+#enviro {
+     -moz-user-select: all;
+     -webkit-user-select: all;
+     user-select: all;
+     cursor: text;
+}
+
+#enviro:hover td {
+     background: rgba(255,255,239,0.4);
+     border: rgba(255,255,239,0.4);
+}
+
+#enviro td {
      padding-top: 5px;
      padding-bottom: 5px;
 }
 
-table#enviro td:first-child {
+#enviro td:first-child {
      width: 100px;
      text-align: right;
      padding-right: 0;
@@ -2341,13 +2378,13 @@ p#profiles_overview {
      display: none;
 }
 
-table#bugreports {
+#bugreports {
     border-collapse: separate;
     border-radius: 2px;
     filter: drop-shadow(0 0 1px #ccc)
 }
 
-table#bugreports td.infohelp {
+#bugreports td.infohelp {
      background: #fff url(/themes/console/images/info/bugreport.png) no-repeat left center !important;
      padding: 10px 15px 10px 40px;
      background-size: 28px 28px;
@@ -2470,8 +2507,7 @@ p#pluginconfigtext {
      background-size: 28px 28px, 100% 100%, 100% 100% !important;
 }
 
-#plugininstall tr:nth-child(3) td:nth-last-child(1), #manualreseed tr:nth-child(3) td:nth-last-child(1),
-#manualreseed tr:nth-child(5) td:nth-last-child(1) {
+#plugininstall tr:nth-child(3) td:nth-last-child(1), #manualreseed tr:nth-child(3) td:nth-last-child(1), #manualreseed tr:nth-child(5) td:nth-last-child(1) {
      background: #fff;
 }
 
@@ -2642,7 +2678,7 @@ ul.statlist {
 }
 
 .statsName i {
-     color: #050;
+     color: #004f28;
      font-weight: bold;
 }
 
@@ -3390,11 +3426,12 @@ button.download.control:hover, button.download.control:focus {
      text-indent: 0;
      text-align: left;
      min-width: 0;
-     background: url(/themes/console/images/buttons/download.png) center left 4px no-repeat, linear-gradient(to bottom, #fff, #ddd) !important;
+     background: url(/themes/console/images/buttons/download.png) center left 6px no-repeat, linear-gradient(to bottom, #fff, #ddd) !important;
 }
 
 .routersummary .reload[value="Reseed"]:hover, .routersummary .reload[value="Reseed"]:focus {
-     background: url(/themes/console/images/buttons/download.png) center left 4px no-repeat, linear-gradient(to bottom, #ddd, #fff) !important;
+     background: url(/themes/console/images/buttons/download.png) center left 6px no-repeat, linear-gradient(to bottom, #ddd, #fff) !important;
+     padding: 5px 7px 5px 22px !important;
 }
 
 .routersummary .stop {
@@ -3418,7 +3455,9 @@ button.download.control:hover, button.download.control:focus {
 
 /* Show text on context specific buttons (eg deferred shutdown) */
 
-.routersummary .reload[value="restartImmediate"], .routersummary .stop[value="shutdownImmediate"], .routersummary .reload[value="Reseed"] {
+.routersummary .reload[value="restartImmediate"], .routersummary .stop[value="shutdownImmediate"],
+.routersummary .reload[value="Reseed"], .routersummary .reload[value="Reseed"]:hover, .routersummary .reload[value="Reseed"]:focus {
+     background-size: 14px 14px, 100% 100% !important;
      text-indent: 0;
      text-align: left;
      min-width: 0 !important;
@@ -4268,6 +4307,19 @@ table#addkeyring tr:last-child td {
      background-size: 28px 28px, 100% 100%, 100% 100% !important;
 }
 
+/* peers, profiles, tunnels */
+
+#ntcpconnections tr:nth-child(odd), #udpconnections tr:nth-child(odd), #profilelist tr:nth-child(odd), .tunneldisplay  tr:nth-child(odd) {
+     background: repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 2px, rgba(201, 201, 255, 0.3) 3px, #fff 5px), #fff;
+}
+
+.cells tt, #profilelist tt {
+     font-size: 8pt !important;
+     margin-left: 2px !important;
+}
+
+/* end peers, profiles, tunnels dests */
+
 /* netdb */
 
 .main#netdb, .main#events {
@@ -5526,6 +5578,11 @@ input[name="pluginURL"] {
 .cells {
      padding: 3px 2px !important;
 }
+
+.cells tt, #profilelist tt {
+     margin-left: 2px !important;
+     margin-right: 2px !important;
+}
 }
 
 @media screen and (max-width: 1200px) {
@@ -5569,10 +5626,15 @@ body, .main, .main td, .news p, #news p, .tab, .tab2, .main li b, div.joblog li,
      font-size: 10pt !important;
 }
 
-.routersummary td, .routersummary a, .routersummary button, .routersummary h4, .routersummary h4 a, div.newss, pre, #jardump tt, #jardump td, div.news, #logs li {
+.routersummary td, .routersummary a, .routersummary button, .routersummary h4, .routersummary h4 a, div.newss, pre, #jardump tt, #jardump td, div.news, #logs li, .cells tt, #profilelist tt {
      font-size: 9pt !important;
 }
 
+.cells tt, #profilelist tt {
+     margin-left: 3px !important;
+     margin-right: 3px !important;
+}
+
 .main[id^="config_"] th, h4#updateplugins {
      font-size: 10.5pt !important;
 }
@@ -5721,6 +5783,10 @@ button.control {
      font-size: 9pt !important;
 }
 
+#ntcpconnections td:first-child, #udpconnections td:first-child {
+     min-width: 58px;
+}
+
 _:-ms-lang(x), #browseronstart {
      margin-bottom: -15px !important;
 }
diff --git a/installer/resources/themes/console/light/i2ptunnel.css b/installer/resources/themes/console/light/i2ptunnel.css
index 7d48bb0ad6..21af4b9a16 100644
--- a/installer/resources/themes/console/light/i2ptunnel.css
+++ b/installer/resources/themes/console/light/i2ptunnel.css
@@ -334,6 +334,7 @@ input[type="hidden"], input.default {
 
 h2, h3 {
      padding: 6px 10px;
+     padding: 9px 10px 7px 30px;
      border: 1px solid #7778bf;
      border-radius: 2px 2px 0 0;
      background: linear-gradient(to bottom, #fff 50%, #eef 50%) !important;
@@ -973,6 +974,10 @@ body, select, .control, input, textarea, .freetext {
      font-size: 10pt !important;
 }
 
+h2, h3 {
+     padding: 10px 10px 8px 30px;
+}
+
 th {
      font-size: 10.5pt;
 }
diff --git a/installer/resources/themes/console/midnight/console.css b/installer/resources/themes/console/midnight/console.css
index fe824e9547..ddb47269b0 100644
--- a/installer/resources/themes/console/midnight/console.css
+++ b/installer/resources/themes/console/midnight/console.css
@@ -4353,43 +4353,56 @@ a[name="criticallogs"] + p + h3 + p + ul { /* tidy router logs ul */
      margin-bottom: 15px;
 }
 
-table#enviro, table#criticallogs, table#routerlogs, table#eventlogs, table#wrapperlogs {
+#enviro, #criticallogs, #routerlogs, #eventlogs, #wrapperlogs {
      margin-top: -11px;
 }
 
-table#wrapperlogs {
+#wrapperlogs {
      width: 100%;
      overflow-x: scroll;
      table-layout: fixed;
 }
 
-table#bugreports {
+#bugreports {
      margin-top: 10px;
 }
 
-table#bugreports td {
+#bugreports td {
      background: url(/themes/console/images/info/infohelp.png) 12px center no-repeat !important;
      padding: 15px 10px 15px 50px;
 }
 
-table#enviro td {
+#enviro:hover {
+     -moz-user-select: all;
+     --webkit-user-select: all;
+     user-select: all;
+     cursor: text;
+}
+
+#enviro:hover td {
+     background: #001;
+     border: #001;
+     color: #dd0;
+}
+
+#enviro td {
      font-weight: normal !important;
      padding: 5px 10px;
 }
 
-table#enviro td:first-child {
+#enviro td:first-child {
      width: 100px;
      text-align: right;
      padding-right: 0;
 }
 
-table#criticallogs td , table#routerlogs td, table#eventlogs td, table#wrapperlogs td {
+#criticallogs td , #routerlogs td, #eventlogs td, #wrapperlogs td {
      font-weight: normal !important;
      padding: 5px 10px;
      border-top: 1px solid #443da0;
 }
 
-table#criticallogs td:empty {
+#criticallogs td:empty {
      display: none;
 }
 
@@ -4437,7 +4450,7 @@ font[color="#006600"] { /* debug */
      color: #090;
 }
 
-font[color="#ff00cc"] { /* warning */
+font[color="#bf00df"] { /* warning */
      color: #909;
 }
 
@@ -4507,7 +4520,7 @@ font[color="#000099"] { /* info */
      background: #d00;
 }
 
-#logs li font[color="#ff00cc"]::before {
+#logs li font[color="#bf00df"]::before {
      background: #909;
 }
 
@@ -5622,6 +5635,17 @@ h3#upnpstatus {
      margin-bottom: 10px !important;
 }
 
+h3#upnp {
+     border: 1px solid #443da0;
+}
+
+#upnpscan {
+     border: 1px solid #443da0;
+     margin: -11px 0 10px;
+     padding: 5px 15px;
+     background: #000;
+}
+
 h3.ptitle {
      margin-bottom: -6px !important;
 }
diff --git a/installer/resources/themes/snark/ubergine/snark.css b/installer/resources/themes/snark/ubergine/snark.css
index d7de74949b..67aa13b12e 100644
--- a/installer/resources/themes/snark/ubergine/snark.css
+++ b/installer/resources/themes/snark/ubergine/snark.css
@@ -138,7 +138,6 @@ _:-ms-lang(x), .snarknavbar {
      box-shadow: 0 0 1px 0 #000, inset 0 0 0 1px rgba(16, 0, 16, 0.7);
      outline: none;
      border: 1px solid #730;
-     font-size-adjust: 0.56;
 }
 
 _:-ms-lang(x), .snarkRefresh:link, .snarkRefresh:visited {
@@ -301,6 +300,8 @@ _:-ms-lang(x), .snarkRefresh:last-child[href="/i2psnark/"] {
      width: 12px;
      height: 11px;
      background-size: 9px 9px;
+     margin-left: 2px;
+     margin-right: 2px;
 }
 
 .snarkMessages img {
diff --git a/installer/resources/themes/snark/vanilla/snark.css b/installer/resources/themes/snark/vanilla/snark.css
index 906e31bb11..3ee5221546 100644
--- a/installer/resources/themes/snark/vanilla/snark.css
+++ b/installer/resources/themes/snark/vanilla/snark.css
@@ -161,7 +161,6 @@ th a:active, th a:visited:active, td a:active, td a:visited:active {
      text-shadow: 0 0 1px #fff5ef;
      box-shadow: inset 0 0 0 1px #efe6e0, 0 0 0 1px rgba(77, 69, 62, 0.1);
      border: 1px solid #2f1b0c;
-     font-size-adjust: 0.56;
 }
 
 _:-ms-lang(x), .snarkRefresh:link, .snarkRefresh:visited {
diff --git a/router/java/src/net/i2p/router/transport/UPnP.java b/router/java/src/net/i2p/router/transport/UPnP.java
index fee429bf35..715bd25b4e 100644
--- a/router/java/src/net/i2p/router/transport/UPnP.java
+++ b/router/java/src/net/i2p/router/transport/UPnP.java
@@ -694,9 +694,11 @@ public class UPnP extends ControlPoint implements DeviceChangeListener, EventLis
 		}
 
 		if(isDisabled) {
+			sb.append("<p>");
 			sb.append(_t("UPnP has been disabled; Do you have more than one UPnP Internet Gateway Device on your LAN ?"));
 			return sb.toString();
 		} else if(!isNATPresent()) {
+			sb.append("<p>");
 			sb.append(_t("UPnP has not found any UPnP-aware, compatible device on your LAN."));
 			return sb.toString();
 		}