Console:

- Add untagged strings for /tunnels tooltips and local tunnel indicator (to
  be tagged for translation post .31 release)
- classic: reduce color contrast of main display font
- classic/dark/midnight: alignment on /peers and /tunnels
- /tunnels:
  - Add bandwidth tiers definitions
  - Indicator for local tunnels
- /profiles:
  - Split capabilities and version
  - Minimize wrapping at narrow viewport width
  - Iconify view profile link
  - Add "OK" status indication for functional peers
- /peers: merge Dir and CWND rows in definitions table
- /events: when no events found, place result in table
- All themes: marginally increased width of sidebar to better accommodate
  extra long strings
- Chinese: ensure buttons do not deviate in height (ticket #1996)
- Arabic: fix alignment issues on /configui; presentational enhancements
- Misc: remove erroneous tags

apps/routerconsole/java/src/net/i2p/router/web/EventLogHelper.java

@@ -167,12 +167,12 @@ public class EventLogHelper extends FormHandler {
         if (events.isEmpty()) {
             if (isAll) {
                 if (_age == 0)
-                    return _t("No events found");
+                    return ("<table id=\"eventlog\"><tr><td class=\"infohelp\">") + _t("No events found") + ("</td></tr></table>");;
-                return _t("No events found in previous {0}", DataHelper.formatDuration2(_age));
+                return ("<table id=\"eventlog\"><tr><td>") + _t("No events found in previous {0}", DataHelper.formatDuration2(_age)) + ("</td></tr></table>");
             }
             if (_age == 0)
-                return _t("No \"{0}\" events found", xev);
+                return ("<table id=\"eventlog\"><tr><td  class=\"infohelp\">") + _t("No \"{0}\" events found", xev) + ("</td></tr></table>");
-            return _t("No \"{0}\" events found in previous {1}", xev, DataHelper.formatDuration2(_age));
+            return ("<table id=\"eventlog\"><tr><td class=\"infohelp\">") + _t("No \"{0}\" events found in previous {1}", xev, DataHelper.formatDuration2(_age)) + ("</td></tr></table>");
         }
         StringBuilder buf = new StringBuilder(2048);
         buf.append("<table id=\"eventlog\"><tr><th>");

apps/routerconsole/java/src/net/i2p/router/web/PeerHelper.java

@@ -127,18 +127,18 @@ public class PeerHelper extends HelperBase {
         buf.append("<h3 class=\"tabletitle\">").append(_t("Definitions")).append("</h3>")
            .append("<table id=\"peerdefs\">\n")
            .append("<tr><td><b id=\"def.peer\">").append(_t("Peer")).append("</b></td><td>").append(_t("The remote peer, identified by router hash")).append("</td></tr>\n")
-           .append("<tr><td><b id=\"def.dir\">").append(_t("Dir")).append("</b></td><td><img alt=\"Inbound\" src=\"/themes/console/images/inbound.png\"> ").append(_t("Inbound connection")).append("</td></tr>\n")
+           .append("<tr><td><b id=\"def.dir\">").append(_t("Dir")).append("</b></td><td><span class=\"peer_arrow\"><img alt=\"Inbound\" src=\"/themes/console/images/inbound.png\"></span> ").append(_t("Inbound connection")).append("<br>\n")
-           .append("<tr><td></td><td><img alt=\"Outbound\" src=\"/themes/console/images/outbound.png\"> ").append(_t("Outbound connection")).append("</td></tr>\n")
+           .append("<span class=\"peer_arrow\"><img alt=\"Outbound\" src=\"/themes/console/images/outbound.png\"></span> ").append(_t("Outbound connection")).append("<br>\n")
-           .append("<tr><td></td><td><img src=\"/themes/console/images/inbound.png\" alt=\"V\" height=\"8\" width=\"12\"> ").append(_t("They offered to introduce us (help other peers traverse our firewall)")).append("</td></tr>\n")
+           .append("<span class=\"peer_arrow\"><img src=\"/themes/console/images/inbound.png\" alt=\"V\" height=\"8\" width=\"12\"></span> ").append(_t("They offered to introduce us (help other peers traverse our firewall)")).append("<br>\n")
-           .append("<tr><td></td><td><img src=\"/themes/console/images/outbound.png\" alt=\"^\" height=\"8\" width=\"12\"> ").append(_t("We offered to introduce them (help other peers traverse their firewall)")).append("</td></tr>\n")
+           .append("<span class=\"peer_arrow\"><img src=\"/themes/console/images/outbound.png\" alt=\"^\" height=\"8\" width=\"12\"></span> ").append(_t("We offered to introduce them (help other peers traverse their firewall)")).append("</td></tr>\n")
            .append("<tr><td><b id=\"def.idle\">").append(_t("Idle")).append("</b></td><td>").append(_t("How long since a packet has been received / sent")).append("</td></tr>\n")
            .append("<tr><td><b id=\"def.rate\">").append(_t("In/Out")).append("</b></td><td>").append(_t("The smoothed inbound / outbound transfer rate (KBytes per second)")).append("</td></tr>\n")
            .append("<tr><td><b id=\"def.up\">").append(_t("Up")).append("</b></td><td>").append(_t("How long ago this connection was established")).append("</td></tr>\n")
            .append("<tr><td><b id=\"def.skew\">").append(_t("Skew")).append("</b></td><td>").append(_t("The difference between the peer's clock and your own")).append("</td></tr>\n")
-           .append("<tr><td><b id=\"def.cwnd\">CWND</b></td><td>").append(_t("The congestion window, which is how many bytes can be sent without an acknowledgement")).append(" / </td></tr>\n")
+           .append("<tr><td><b id=\"def.cwnd\">CWND</b></td><td>").append(_t("The congestion window, which is how many bytes can be sent without an acknowledgement")).append(" /<br>\n")
-           .append("<tr><td></td><td>").append(_t("The number of sent messages awaiting acknowledgement")).append(" /</td></tr>\n")
+           .append(_t("The number of sent messages awaiting acknowledgement")).append(" /<br>\n")
-           .append("<tr><td></td><td>").append(_t("The maximum number of concurrent messages to send")).append(" /</td></tr>\n")
+           .append(_t("The maximum number of concurrent messages to send")).append(" /<br>\n")
-           .append("<tr><td></td><td>").append(_t("The number of pending sends which exceed congestion window")).append("</td></tr>\n")
+           .append(_t("The number of pending sends which exceed congestion window")).append("</td></tr>\n")
            .append("<tr><td><b id=\"def.ssthresh\">SST</b></td><td>").append(_t("The slow start threshold")).append("</td></tr>\n")
            .append("<tr><td><b id=\"def.rtt\">RTT</b></td><td>").append(_t("The round trip time in milliseconds")).append("</td></tr>\n")
            //.append("<tr><td><b id=\"def.dev\">").append(_t("Dev")).append("</b></td><td>").append(_t("The standard deviation of the round trip time in milliseconds")).append("</td></tr>\n")
@@ -267,8 +267,8 @@ public class PeerHelper extends HelperBase {
 //            buf.append("<tr> <td colspan=\"11\"><hr></td></tr>\n");
             buf.append("<tr class=\"tablefooter\"><td colspan=\"4\" align=\"left\"><b>")
                .append(ngettext("{0} peer", "{0} peers", peers.size()));
-            buf.append("</b></td><td align=\"center\" nowrap><b><span class=\"right\">").append(formatRate(bpsRecv/1024)).append("</span>");
+            buf.append("</b></td><td align=\"center\" nowrap><span class=\"right\"><b>").append(formatRate(bpsRecv/1024)).append("</b></span>");
-            buf.append(THINSP).append("<span class=\"left\">").append(formatRate(bpsSend/1024)).append("</b></span>");
+            buf.append(THINSP).append("<span class=\"left\"><b>").append(formatRate(bpsSend/1024)).append("</b></span>");
             buf.append("</td><td align=\"right\"><b>").append(DataHelper.formatDuration2(totalUptime/peers.size()));
             buf.append("</b></td><td align=\"right\"><b>").append(DataHelper.formatDuration2(offsetTotal*1000/peers.size()));
             buf.append("</b></td><td align=\"right\"><b>").append(totalSend).append("</b></td><td align=\"right\"><b>").append(totalRecv);
@@ -486,7 +486,7 @@ public class PeerHelper extends HelperBase {
             buf.append("K");
             buf.append("</span>").append(THINSP).append("<span class=\"right\">").append(peer.getConcurrentSends());
             buf.append("</span>").append(THINSP).append("<span class=\"right\">").append(peer.getConcurrentSendWindow());
-            buf.append("</span>").append(THINSP).append("</span><span class=\"left\">").append(peer.getConsecutiveSendRejections());
+            buf.append("</span>").append(THINSP).append("<span class=\"left\">").append(peer.getConsecutiveSendRejections());
             if (peer.isBacklogged())
                 buf.append(' ').append(_t("backlogged"));
             buf.append("</span></td>");
@@ -573,11 +573,11 @@ public class PeerHelper extends HelperBase {
         buf.append("<tr class=\"tablefooter\"><td colspan=\"4\" align=\"left\"><b>")
            .append(ngettext("{0} peer", "{0} peers", peers.size()))
            .append("</b></td>" +
-                   "<td align=\"center\" nowrap><b><span class=\"right\">");
+                   "<td align=\"center\" nowrap><span class=\"right\"><b>");
-        buf.append(formatKBps(bpsIn)).append("</span>").append(THINSP);
+        buf.append(formatKBps(bpsIn)).append("</b></span>").append(THINSP);
-        buf.append("<span class=\"left\">").append(formatKBps(bpsOut));
+        buf.append("<span class=\"left\"><b>").append(formatKBps(bpsOut));
         long x = uptimeMsTotal/numPeers;
-        buf.append("</span></b></td>" +
+        buf.append("</b></span></td>" +
                    "<td align=\"right\"><b>").append(DataHelper.formatDuration2(x));
         x = offsetTotal/numPeers;
         buf.append("</b></td><td align=\"right\"><b>").append(DataHelper.formatDuration2(x)).append("</b></td>\n" +

apps/routerconsole/java/src/net/i2p/router/web/ProfileOrganizerRenderer.java

@@ -90,6 +90,7 @@ class ProfileOrganizerRenderer {
                    buf.append("<th>").append(_t("Peer")).append("</th>");
                    buf.append("<th>").append(_t("Groups")).append("</th>");
                    buf.append("<th>").append(_t("Caps")).append("</th>");
+                   buf.append("<th>").append(_t("Version")).append("</th>");
                    buf.append("<th>").append(_t("Speed")).append("</th>");
                    buf.append("<th>").append(_t("Capacity")).append("</th>");
                    buf.append("<th>").append(_t("Integration")).append("</th>");
@@ -120,7 +121,7 @@ class ProfileOrganizerRenderer {
             }
 
             if (tier != prevTier)
-                buf.append("<tr><td colspan=\"8\"><hr></td></tr>\n");
+                buf.append("<tr><td colspan=\"9\"><hr></td></tr>\n");
             prevTier = tier;
 
             buf.append("<tr><td align=\"center\" nowrap>");
@@ -141,12 +142,13 @@ class ProfileOrganizerRenderer {
             if (info != null) {
                 // prevent HTML injection in the caps and version
                 buf.append("<td align=\"right\">").append(DataHelper.stripHTML(info.getCapabilities()));
-                String v = info.getOption("router.version");
-                if (v != null)
-                    buf.append(' ').append(DataHelper.stripHTML(v));
             } else {
                 buf.append("<td align=\"right\"><i>").append(_t("unknown")).append("</i></td>");
             }
+            buf.append("<td align=\"right\">");
+            String v = info.getOption("router.version");
+            if (v != null)
+                buf.append(DataHelper.stripHTML(v));
             buf.append("</td><td align=\"right\">").append(num(prof.getSpeedValue()));
             long bonus = prof.getSpeedBonus();
             if (bonus != 0) {
@@ -173,6 +175,7 @@ class ProfileOrganizerRenderer {
             RateAverages ra = RateAverages.getTemp();
             Rate failed = prof.getTunnelHistory().getFailedRate().getRate(30*60*1000);
             long fails = failed.computeAverages(ra, false).getTotalEventCount();
+            if (fails == 0) buf.append(_t("OK"));
             if (fails > 0) {
                 Rate accepted = prof.getTunnelCreateResponseTime().getRate(30*60*1000);
                 long total = fails + accepted.computeAverages(ra, false).getTotalEventCount();

apps/routerconsole/java/src/net/i2p/router/web/TunnelRenderer.java

@@ -85,24 +85,25 @@ class TunnelRenderer {
                 continue;
             }
             // everything that isn't 'recent' is already in the tunnel.participatingMessageCount stat
+            // TODO translation tag "Tunnel identity" tooltips
             processed += cfg.getRecentMessagesCount();
             if (++displayed > DISPLAY_LIMIT)
                 continue;
             out.write("<tr>");
             if (cfg.getReceiveTunnel() != null)
-                out.write("<td class=\"cells\" align=\"center\">" + cfg.getReceiveTunnel().getTunnelId() +"</td>");
+                out.write("<td class=\"cells\" align=\"center\" title=\"Tunnel identity\"><span class=\"tunnel_id\">" + cfg.getReceiveTunnel().getTunnelId() +"</span></td>");
             else
                 out.write("<td class=\"cells\" align=\"center\">n/a</td>");
             if (cfg.getReceiveFrom() != null)
-                out.write("<td class=\"cells\" align=\"center\">" + netDbLink(cfg.getReceiveFrom()) +"</td>");
+                out.write("<td class=\"cells\" align=\"center\"><span class=\"tunnel_peer\">" + netDbLink(cfg.getReceiveFrom()) +"</span></td>");
             else
                 out.write("<td class=\"cells\">&nbsp;</td>");
             if (cfg.getSendTunnel() != null)
-                out.write("<td class=\"cells\" align=\"center\">" + cfg.getSendTunnel().getTunnelId() +"</td>");
+                out.write("<td class=\"cells\" align=\"center\" title=\"Tunnel identity\"><span class=\"tunnel_id\">" + cfg.getSendTunnel().getTunnelId() +"</span></td>");
             else
                 out.write("<td class=\"cells\">&nbsp;</td>");
             if (cfg.getSendTo() != null)
-                out.write("<td class=\"cells\" align=\"center\">" + netDbLink(cfg.getSendTo()) +"</td>");
+                out.write("<td class=\"cells\" align=\"center\"><span class=\"tunnel_peer\">" + netDbLink(cfg.getSendTo()) +"</span></td>");
             else
                 out.write("<td class=\"cells\">&nbsp;</td>");
             long timeLeft = cfg.getExpiration()-_context.clock().now();
@@ -136,6 +137,24 @@ class TunnelRenderer {
             out.write("<div class=\"statusnotes\"><b>" + _t("none") + "</b></div>\n");
         out.write("<div class=\"statusnotes\"><b>" + _t("Lifetime bandwidth usage") + ":&nbsp;&nbsp;" + DataHelper.formatSize2(processed*1024) + "B</b></div>\n");
         //renderPeers(out);
+
+        //out.write("<h3 class=\"tabletitle\">" + "Bandwidth Tiers" + "</h3>\n"); TODO: replace "definitions" with tagged "bandwidth tiers" post 0.9.31 release
+        out.write("<h3 class=\"tabletitle\">" + _t("Definitions") + "</h3>\n");
+        out.write("<table id=\"tunnel_defs\"><tbody>");
+        out.write("<tr><td>&nbsp;</td>"
+                  + "<td><span class=\"tunnel_cap\"><b>L</b></span></td><td>" + _t("{0} shared bandwidth", "12 - 32KBps") + "</td>"
+                  + "<td><span class=\"tunnel_cap\"><b>M</b></span></td><td>" + _t("{0} shared bandwidth", "32 - 64KBps") + "</td>"
+                  + "<td>&nbsp;</td></tr>");
+        out.write("<tr><td>&nbsp;</td>"
+                  + "<td><span class=\"tunnel_cap\"><b>N</b></span></td><td>" + _t("{0} shared bandwidth", "64 - 128KBps") + "</td>"
+                  + "<td><span class=\"tunnel_cap\"><b>O</b></span></td><td>" + _t("{0} shared bandwidth", "128 - 256KBps") + "</td>"
+                  + "<td>&nbsp;</td></tr>");
+        out.write("<tr><td>&nbsp;</td>"
+                  + "<td><span class=\"tunnel_cap\"><b>P</b></span></td><td>" + _t("{0} shared bandwidth", "256 - 2000KBps") + "</td>"
+                  + "<td><span class=\"tunnel_cap\"><b>X</b></span></td><td>" + _t("Over {0} shared bandwidth", "2000KBps") + "</td>"
+                  + "<td>&nbsp;</td></tr>");
+        out.write("</tbody></table>");
+
     }
 
     private static class TunnelComparator implements Comparator<HopConfig>, Serializable {
@@ -193,15 +212,16 @@ class TunnelRenderer {
                 Hash peer = info.getPeer(j);
                 TunnelId id = (info.isInbound() ? info.getReceiveTunnelId(j) : info.getSendTunnelId(j));
                 if (_context.routerHash().equals(peer)) {
-                    // Add empty content placeholders to force alignment
+                    // Add empty content placeholders to force alignment. TODO tag "local" + tooltips for bandwidth tier / tunnel id for translation
-                    out.write(" <td class=\"cells\" align=\"center\"><span class=\"tunnel_peer\"></span><span class=\"tunnel_id\">" +
+                    out.write(" <td class=\"cells\" align=\"center\"><span class=\"tunnel_peer tunnel_local\" title=\"Locally hosted tunnel\">local</span>&nbsp;"
-                             (id == null ? "" : "" + id) + "</span></span><b class=\"tunnel_cap\"></b></span></td>");
+                              + "<span class=\"tunnel_id\" title=\"Tunnel identity\">" +
+                             (id == null ? "" : "" + id) + "</span><b class=\"tunnel_cap\" title=\"Bandwidth tier\"></b></td>");
                 } else {
                     String cap = getCapacity(peer);
-                    // TODO Add tooltips for network cap / tunnel id
+                    // TODO Tag for translation tooltips for network cap / tunnel id / bandwidth tier
                     out.write(" <td class=\"cells\" align=\"center\"><span class=\"tunnel_peer\">" + netDbLink(peer) +
-                              "</span>&nbsp;<span class=\"nowrap\"><span class=\"tunnel_id\">" + (id == null ? "" : " " + id) +
+                              "</span>&nbsp;<span class=\"nowrap\"><span class=\"tunnel_id\" title=\"Tunnel identity\">" + (id == null ? "" : " " + id) +
-                              "</span><b class=\"tunnel_cap\">" + cap + "</b></span></td>");
+                              "</span><b class=\"tunnel_cap\" title=\"Bandwidth tier\">" + cap + "</b></span></td>");
                 }
                 if (info.getLength() < maxLength && (info.getLength() == 1 || j == info.getLength() - 2)) {
                     for (int k = info.getLength(); k < maxLength; k++)

apps/routerconsole/jsp/help-faq.jsi

@@ -75,6 +75,6 @@
 <tr><td colspan="3">Outbound TCP from random high ports to arbitrary remote TCP ports.</td></tr>
 <tr><td colspan="3">Inbound UDP to the <a href="/confignet#udpconfig">port</a> noted on the Network Configuration page from arbitrary locations (optional, but recommended).</td></tr>
 <tr><td colspan="3">Inbound TCP to the <a href="/confignet#externaltcp">port</a> noted on the Network Configuration page from arbitrary locations (optional, but recommended). <a href="/confignet#tcpconfig">Inbound TCP</a> may be disabled on the Network Configuration page.</td></tr>
-<tr><td colspan="3">Outbound UDP on port 123, allowing replies: this is necessary for I2P's internal time sync (via SNTP - querying a random SNTP host in <code>pool.ntp.org</code> or another server you specify).</td></tr></td></tr>
+<tr><td colspan="3">Outbound UDP on port 123, allowing replies: this is necessary for I2P's internal time sync (via SNTP - querying a random SNTP host in <code>pool.ntp.org</code> or another server you specify).</td></tr>
 </table>
 

apps/routerconsole/jsp/help-reachability.jsi

@@ -1,4 +1,4 @@
-<h2><a name="reachability"><%=intl._t("Reachability Help")%></a></h2>
+<h2><%=intl._t("Reachability Help")%></h2>
 <p>
   <%=intl._t("While I2P will work fine behind most firewalls, your speeds and network integration will generally improve if the I2P port is forwarded for both UDP and TCP.")%>&nbsp;
   <%=intl._t("If you think you have opened up your firewall and I2P still thinks you are firewalled, remember that you may have multiple firewalls, for example both software packages and external hardware routers.")%>&nbsp;

apps/routerconsole/jsp/peers.jsp

@@ -18,4 +18,4 @@
  <jsp:setProperty name="peerHelper" property="urlBase" value="peers.jsp" />
  <jsp:setProperty name="peerHelper" property="sort" value="<%=request.getParameter(\"sort\") != null ? request.getParameter(\"sort\") : \"\"%>" />
  <jsp:getProperty name="peerHelper" property="peerSummary" />
-</div></body></html>
+</div></div></body></html>

history.txt

@@ -1,6 +1,31 @@
 2017-06-19 str4d
- * Console: cleanup & formatting tidyups for welcome page readmes, remove
+ * Console:
-   unneeded classes
+   - Welcome page readmes:
+     - Responsive 2 column layout for eepsite section
+     - Minor formatting corrections
+     - Ensure urls in Arabic display correctly
+     - Fix commenting out of forum.i2p where it impacts surrounding text
+     - Cleanup unneeded CSS classes
+     - Enhance Chinese legibility
+   - Add untagged strings for /tunnels tooltips and local tunnel indicator (to
+     be tagged for translation post .31 release)
+   - classic: reduce color contrast of main display font
+   - classic/dark/midnight: alignment on /peers and /tunnels
+   - /tunnels:
+     - Add bandwidth tiers definitions
+     - Indicator for local tunnels
+   - /profiles:
+     - Split capabilities and version
+     - Minimize wrapping at narrow viewport width
+     - Iconify view profile link
+     - Add "OK" status indication for functional peers
+   - /peers: merge Dir and CWND rows in definitions table
+   - /events: when no events found, place result in table
+   - All themes: marginally increased width of sidebar to better accommodate
+     extra long strings
+   - Chinese: ensure buttons do not deviate in height (ticket #1996)
+   - Arabic: fix alignment issues on /configui; presentational enhancements
+   - Misc: remove erroneous tags
  * i2ptunnel: consistent tooltips and Destinations for editClient and editServer
  * I2PSnark:
    - Disable JavaScript td:onclick (handled by css)

installer/resources/themes/console/classic/console.css

@@ -3,12 +3,12 @@
 /* Author: dr|z3d */
 
 body {
-     margin: 3px 2px 3px 4px;
+     margin: 3px;
      padding: 0;
      text-align: left;
      background: #bbf url(images/bg.png) center center fixed;
      background-size: 120px 120px;
-     color: #0c153d;
+     color: #2c354f;
      font: 9pt/130% "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, Helvetica, sans-serif;
 }
 
@@ -38,7 +38,8 @@ body {
      color: white;
 }
 
-.routersummary img[src$="i2plogo.png"], .routersummary h3, .confignav, *::before, *::after {
+.routersummary img[src$="i2plogo.png"], .routersummary h3, .confignav, *::before, *::after, div.app, .themechoice, .langselect, .langbox,
+.newsAuthor, #netdbcountrylist img, .viewfullentry, .sybil_routerinfo th img, .graphspanel {
      -moz-user-select: none;
      -webkit-user-select: none;
      user-select: none;
@@ -323,8 +324,8 @@ img {
      padding: 20px 20px 20px 60px;
      background: #fff url(/themes/console/images/info/errortriangle.png) 10px center no-repeat;
      background: url(/themes/console/images/info/errortriangle.png) 10px center no-repeat, linear-gradient(to bottom, #fff, #ffe);
-     margin: -1px 1px 0 200px;
+     margin: -1px 0 0 211px;
-     min-width: 460px;
+     min-width: 490px;
      border: 1px solid #89f;
      box-shadow: inset 0 0 0 1px #ff9;
      text-align: justify;
@@ -357,7 +358,7 @@ img {
      background: #eef url(images/bg0.png);
      background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.2)), url(images/bg0.png);
      background-size: 100% 100%, 120px 120px;
-     width: 193px;
+     width: 204px;
      color: inherit;
      margin: 0 0 5px;
      padding: 9px 1px 7px 1px;
@@ -371,7 +372,7 @@ img {
 .routersummary img[src$="i2plogo.png"] {
     margin-top: 3px;
      margin-left: 0;
-     width: 173px;
+     width: 185px;
      height: auto;
      box-shadow: 0 0 1px 1px rgba(180,180,180,0.7);
      -moz-user-select: none;
@@ -469,7 +470,7 @@ img {
      border: 0;
      text-align: center !important;
      margin: -5px 0 -5px 0;
-     width: 192px !important;
+     width: 204px !important;
      overflow: hidden;
      font-size: 8pt;
      padding: 0;
@@ -528,7 +529,7 @@ img {
 #sb_internals a, #sb_services a, #sb_advanced a {
      display: inline-block;
      padding: 2px;
-     max-width: 178px;
+     max-width: 194px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
@@ -536,7 +537,7 @@ img {
 }
 
 #sb_localtunnels {
-     margin: -6px -2px -6px 0 !important;
+     margin: -6px -2px -7px 0 !important;
      text-align: center !important;
      width: 196px;
      box-sizing: border-box;
@@ -820,12 +821,12 @@ label:hover {
 
 label[for="0"] {
      cursor: default;
-     color: #0c153d;
+     color: #2c354f;
 }
 
 .main#config_clients label[for="0"] {
      cursor: default;
-     color: #0c153d;
+     color: #2c354f;
 }
 
 input[type="file"] {
@@ -1378,14 +1379,14 @@ button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="re
 /* end buttons & inputs */
 
 .main {
-     margin: 0 1px 0 200px;
+     margin: 0 0 0 211px;
      padding: 15px 15px 10px 15px;
-     background: #eff1ff;
      border: 1px solid #89f;
      border-top: 0;
      text-align: left;
-     color: #0c153d;
+     color: #2c354f;
      min-width: 540px;
+     background: #eef;
      background: #eef url(/themes/snark/ubergine/images/hat.png) no-repeat scroll right bottom !important;
      background: url(/themes/snark/ubergine/images/hat.png) no-repeat scroll right bottom, url(images/bg0.png) repeat scroll top left !important;
      background: url(/themes/snark/ubergine/images/hat.png) no-repeat scroll right -3px bottom -5px, linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.1)) top -1px center, url(images/bg0.png) top -3px center !important;
@@ -1402,7 +1403,7 @@ button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="re
 }
 
 .main#news p {
-     padding: 0 10px 3px;
+     padding: 0 10px;
 }
 
 .main ul {
@@ -1519,7 +1520,7 @@ div.wideload p  {
 }
 
 div.news {
-     margin: -1px 1px 0 200px;
+     margin: -1px 0 0 211px;
      background: #f9f9ea url(images/bg1.png);
      background: linear-gradient(to bottom, rgba(255,255,255,0.6), rgba(255,255,255,0.5)), url(images/bg1.png) #efefe0;
      background-size: 100% 100%, 120px 120px;
@@ -1737,10 +1738,6 @@ table.configtable, #permabanned, #loggingoptions, #configstats, ul#banlist {
      margin-bottom: -5px;
 }
 
-.configtable, .main[id^="config_"] table {
-     background: #fff;
-}
-
 #config_homepage td {
      padding: 5px;
 }
@@ -1809,7 +1806,11 @@ table.configtable, #permabanned, #loggingoptions, #configstats, ul#banlist {
      width: 10%;
      white-space: nowrap;
      padding: 5px;
-     border-right: 1px inset #ccf;
+     border-right: 1px inset #cfd6ff;
+}
+
+#peerdefs tr {
+     border-top: 1px inset #cfd6ff;
 }
 
 #bandwidthconfig td:first-child {
@@ -1880,6 +1881,10 @@ table.configtable, #permabanned, #loggingoptions, #configstats, ul#banlist {
      margin: 0 !important;
 }
 
+#profilelist th:nth-child(7) {
+     text-align: right;
+}
+
 #profilelist td:first-child, #profilelist td:last-child {
      width: 1%;
      white-space: nowrap;
@@ -1889,14 +1894,18 @@ table.configtable, #permabanned, #loggingoptions, #configstats, ul#banlist {
      text-align: right;
 }
 
-#profilelist td[colspan="8"], #profilelist tr td[colspan="8"]:hover {
+#profilelist td:nth-child(3) {
+     letter-spacing: 0.2em;
+}
+
+#profilelist td[colspan="9"], #profilelist tr td[colspan="9"]:hover {
      background: #77f;
      padding: 1px 0;
      border-top: 1px inset #fff !important;
      border-bottom: 1px inset #fff !important;
 }
 
-#profilelist td[colspan="8"] hr {
+#profilelist td[colspan="9"] hr {
      display: none;
 }
 
@@ -1909,8 +1918,12 @@ table.configtable, #permabanned, #loggingoptions, #configstats, ul#banlist {
      border-bottom: 1px solid #89f;
 }
 
-tr.tablefooter:hover td {
+#thresholds tr:last-child:hover td {
-     color: #0c153d;
+     background: #fff;
+}
+
+tr.tablefooter:hover td, tr:hover .infohelp {
+     color: #2c354f;
 }
 
 /* peers - sort icons */
@@ -2017,7 +2030,7 @@ tr.tablefooter:hover td {
 }
 
 tr:hover th {
-     color: #0c153d;
+     color: #2c354f;
 }
 
 #thresholds, #profile_defs {
@@ -2099,6 +2112,8 @@ tr:hover th {
 
 #floodfills td:first-child, #profilelist td:first-child {
      text-align: right;
+     width: 1%;
+     white-space: nowrap;
 }
 
 ul#banlist {
@@ -2398,9 +2413,9 @@ div.configure h2:first-child {
 }
 
 #sidebarconf tr, .homelinkedit tr, #clientconfig tr, #webappconfig tr,  #configstats tr, #tunnelconfig tr, #profiles tr,
-#floodfills tr, #netdboverview tr, .netdbentry tr, #leasesetdebug tr, #leasesetsummary tr, .leaseset tr,
+#floodfills tr, #netdboverview tr, .netdbentry tr, #leasesetdebug tr, #leasesetsummary tr, .leaseset tr, #tunnel_defs tr,
 .sybil_routerinfo tr, #enviro tr, #schedjobs tr, #jobstats tr, #eventlog tr, .tunneldisplay tr, #udpconnections tr, #ntcpconnections tr {
-     border-top: 1px inset #ccf;
+     border-top: 1px inset #cfd6ff;
 }
 
 #config_stats tr:not(.tablefooter) td:first-child::after {
@@ -2410,7 +2425,12 @@ div.configure h2:first-child {
      vertical-align: middle;
 }
 
-#addkeyring tr, #loggingoptions tr, tr.tablefooter, #profilelist tr:hover, #floodfills tr:hover, #jardump tr {
+#addkeyring tr, #loggingoptions tr, #profilelist tr:hover, #floodfills tr:hover, #jardump tr {
+     border-top: 1px inset #cfd6ff !important;
+     border-bottom: 1px inset #cfd6ff !important;
+}
+
+ tr.tablefooter {
      border-top: 1px solid #89f !important;
      border-bottom: 1px solid #89f !important;
 }
@@ -2530,12 +2550,16 @@ div.notice {
      margin: 0 !important;
 }
 
+h1, .main, .sorry, div.news {
+     margin-left: 211px;
+}
+
 h1 {
      font-size: 18pt;
      text-align: left;
      border: 1px solid #89f;
      padding: 19px 20px;
-     margin: 0 1px 0 200px;
+     margin: 0 0 0 211px;
      line-height: 93%;
      text-transform: uppercase;
      letter-spacing: 0.08em;
@@ -2724,8 +2748,7 @@ table {
      border: 1px solid #89f;
      margin: 0 0 5px 0;
      font-size: 9pt;
-     background: #fff;
+     background: #eff2ff;
-     background: rgba(255,255,255,0.1);
      width: 100%;
 }
 
@@ -2837,13 +2860,12 @@ td.tabletextarea {
 }
 
 tr:nth-child(even), #pluginconfig table tr:nth-child(even) td {
-     background: #dde1ff;
+     background: #fff;
-     background: rgba(220,220,255,0.5);
+     background: rgba(255,255,255,0.5);
 }
 
 tr:nth-child(odd), #pluginconfig table tr:nth-child(odd) td, .main#profiles ul#banlist {
-     background: #eff1ff;
+     background: #f1f3ff;
-     background: rgba(230,230,255,0.5);
 }
 
 .configtable th {
@@ -2853,10 +2875,12 @@ tr:nth-child(odd), #pluginconfig table tr:nth-child(odd) td, .main#profiles ul#b
 /* begin home page */
 
 h4.app, h4.app2 {
-     margin: 0 -1px 7px;
+     margin: 0 0 7px;
      font-size: 11pt;
      padding: 7px 10px 6px;
      border: 1px solid #89f;
+     border-left: none;
+     border-right: none;
      box-shadow: inset 0 0 0 1px #fff;
      letter-spacing: 0.08em;
      word-spacing: 0.1em;
@@ -3125,7 +3149,7 @@ h3 + .statusnotes {
 .statusnotes {
      font-style: italic;
      font-size: 9pt;
-     color: #0c153d;
+     color: #2c354f;
      text-align: center;
      margin: -6px 0 7px 0;
      border: 1px solid #89f !important;
@@ -3332,16 +3356,12 @@ h3#totaljobstats {
      border-top: 1px solid #89f;
 }
 
-#addnew {
-     background: #efefff;
-}
-
 #addnew td:first-child {
      text-align: right;
 }
 
 tr#addnew:hover {
-     color: #0c153d !important;
+     color: #2c354f !important;
 }
 
 #loggingoptions input[type="text"] {
@@ -3782,11 +3802,11 @@ body.iframed {
 }
 
 .iframed h1 {
-     margin: 0 1px 0 0 !important;
+     margin: 0 !important;
 }
 
 .iframed .sorry {
-     margin: -1px 1px 0 0 !important;
+     margin: -1px 0 0 !important;
 }
 
 /* end iframed console fixes */
@@ -4202,12 +4222,13 @@ td#pw_adduser input {
      font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace !important;
 }
 
-a.viewfullentry:not(old) {
+a.viewfullentry:not(old), #profilelist a[href^="viewprofile"]:not(old) {
      font-size: 0;
 }
 
-a.viewfullentry::after {
+a.viewfullentry::after, #profilelist a[href^="viewprofile"]::after {
      content: url(/themes/console/images/buttons/fullview.png);
+     margin: 0 2px;
 }
 
 a.viewfullentry:hover {
@@ -4291,7 +4312,7 @@ a.viewfullentry:hover {
      width: 200px;
      white-space: nowrap;
      text-align: right;
-     border-right: 1px inset #ccf;
+     border-right: 1px inset #cfd6ff;
 }
 
 #leasesetdebug td:nth-child(even) {
@@ -4464,7 +4485,6 @@ p.sybil_info, p.family, p.threatpoints, p.hashdist, p.notfound {
      border: 1px solid #89f;
      padding: 5px 5px 5px 30px;
      margin: 3px 0;
-     color: #33f;
      font-weight: bold;
      text-align: left;
      background: #ffe url(images/eye.png) 8px center no-repeat;
@@ -4585,7 +4605,7 @@ h3.stats {
 }
 
 .statlist li b, .statlist b a:hover, h3.stats a:hover  {
-     color: #0c153d !important;
+     color: #2c354f !important;
 }
 
 .statlist li::before {
@@ -4594,7 +4614,7 @@ h3.stats {
      font-size: 14pt;
      line-height: 60%;
      vertical-align: baseline;
-     color: #0c153d;
+     color: #2c354f;
 }
 
 .statlist li {
@@ -5620,7 +5640,7 @@ h3#totaljobstats {
 
 table[id*="connections"] td, #floodfills td,  #profilelist td, #jobstats td, .main#tunnels td {
     padding: 3px;
-    border-right: 1px inset #ccf;
+    border-right: 1px inset #cfd6ff;
 }
 
 .main#netdb #netdboverview, #netdblookup {
@@ -5737,6 +5757,10 @@ body, .main, .main td, .news p, #news p, .tab, .tab2, .main li b, .joblog li, .t
      margin-left: 3px !important;
 }
 
+tt a, .cells tt, #profilelist tt {
+     font-size: 9pt !important;
+}
+
 .main, .news, h1 {
      margin-left: 232px !important;
 }
@@ -5765,7 +5789,7 @@ body, .main, .main td, .news p, #news p, .tab, .tab2, .main li b, .joblog li, .t
 }
 
 #sb_internals a, #sb_services a, #sb_advanced a {
-     max-width: 210px;
+     max-width: 212px;
 }
 .routersummary button[type="submit"] {
      min-width: 100px;
@@ -5944,11 +5968,11 @@ div.news {
 _:-ms-lang(x), #sidebarconf tr, .homelinkedit tr, #clientconfig tr, #webappconfig tr,  #configstats tr, #tunnelconfig tr, #profiles tr,
 #floodfills tr, #netdboverview tr, .netdbentry tr, #leasesetdebug tr, #leasesetsummary tr, .leaseset tr,
 .sybil_routerinfo tr, #enviro tr, #schedjobs tr, #jobstats tr, #eventlog tr, .tunneldisplay tr, #udpconnections tr, #ntcpconnections tr {
-     border-top: 1px solid #ccf;
+     border-top: 1px solid #cfd6ff;
 }
 
 _:-ms-lang(x), #peerdefs td:first-child {
-     border-right: 1px solid #ccf;
+     border-right: 1px solid #cfd6ff;
 }
 
 _:-ms-lang(x), .tunnels_client th:first-child::after {
@@ -5961,7 +5985,7 @@ _:-ms-lang(x), .tunnels_client th:first-child::after {
 /* network status */
 
 .routersummary .error, .routersummary .warn, .routersummary .testing, .routersummary .hidden,
-.routersummary .running, .routersummary .firewalled, .routersummary .vmcomm, .routersummary .clockskew {
+.routersummary .running, .routersummary .firewalled, .routersummary .vmcomm, .routersummary .clockskew, .tunnelBuildStatus {
      display: inline-block;
      vertical-align: middle;
      border: 1px solid #88f;
@@ -6052,6 +6076,10 @@ div[lang="ar"] h3, div[lang="ar"] li {
      text-align: right;
 }
 
+div[lang="de"] .twocol {
+     margin-left: 50px !important;
+}
+
 .main#console li:first-child {
      padding-top: 10px;
 }
@@ -6077,6 +6105,20 @@ p + .twocol {
      -webkit-break-inside: avoid;
 }
 
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+#console .twocol {
+     margin-left: -20px !important;
+}
+
+#console div[lang="de"] .twocol {
+     margin-left: 30px !important;
+}
+
+.twocol li {
+     margin-left: 20px;
+}
+}
+
 .twocol li:first-child {
      margin-top: 0 !important
      padding-top: 0 !important;
@@ -6090,4 +6132,195 @@ p + .twocol {
 
 /* end welcome */
 
+/* /tunnels */
+
+tt a, .cells tt {
+     letter-spacing: 0.07em;
+}
+
+.tunnel_cap {
+     background: rgba(0,0,64,0.3);
+     color: #fff;
+     border: 1px solid rgba(0,0,64,0.2);
+     border-radius: 2px;
+     min-width: 12px;
+     padding: 0 2px;
+     display:inline-block;
+     margin: 1px 2px 1px 8px;
+     text-align: center !important;
+     text-shadow: 0 1px 1px #555;
+}
+
+.tunnel_cap:empty {
+     border: none;
+}
+
+.tunnel_id {
+     display: inline-block;
+     min-width: 78px;
+     text-align: right;
+}
+
+.tunnel_id:empty {
+     min-width: 0;
+}
+
+.tunnel_id:empty + .tunnel_cap {
+     margin-left: 12px !important;
+     display: inline-block;
+}
+
+.tunnel_peer {
+     display: inline-block;
+     min-width: 56px;
+     text-align: right;
+}
+
+.tunnel_local {
+     font-size: 8pt;
+     background: rgba(187, 187, 255, 0.3);
+     background: #d5d5ff;
+     border-radius: 2px;
+     text-align: center;
+     padding: 2px 0;
+     margin-left: -4px;
+     margin-right: 4px;
+}
+
+.tunnel_peer:empty {
+     vertical-align: top;
+}
+
+.tunneldisplay td {
+     padding-top: 4px;
+     padding-bottom: 4px;
+}
+
+@media screen and (max-width: 1100px) {
+.tunnel_id, .tunnel_peer {
+     min-width: 0 !important;
+     text-align: center !important;
+}
+
+.tunnel_local {
+     margin-right: 5px;
+     margin-left: 2px;
+     padding: 2px 4px;
+}
+
+.tunnel_peer:empty {
+     vertical-align: middle;
+}
+
+.tunnel_peer:empty::before {
+     margin: 1px 6px 1px 2px;
+}
+
+.tunnel_cap {
+     margin-left: 5px !important;
+}
+}
+
+@media screen and (min-width: 1500px) {
+.tunnel_cap {
+     margin-left: 10px;
+     padding: 0 1px;
+     min-width: 14px;
+}
+
+.tunnel_id:empty {
+     margin-right: -10px;
+}
+}
+
+/* end tunnels */
+
+/* /peers */
+
+#ntcpconnections th:nth-child(6), #ntcpconnections th:nth-child(7), #ntcpconnections th:nth-child(8), #ntcpconnections th:nth-child(9), #ntcpconnections th:nth-child(10),
+#ntcpconnections td:nth-child(6), #ntcpconnections td:nth-child(7), #ntcpconnections td:nth-child(8), #ntcpconnections td:nth-child(9), #ntcpconnections td:nth-child(10),
+#udpconnections td:nth-child(6), #udpconnections td:nth-child(7), #udpconnections td:nth-child(9), #udpconnections td:nth-child(10), #udpconnections td:nth-child(11),
+#udpconnections td:nth-child(13), #udpconnections td:nth-child(14), #udpconnections td:nth-child(15), #udpconnections td:nth-child(16) {
+     text-align: right;
+     white-space: nowrap;
+}
+
+#ntcpconnections .tablefooter td:nth-child(3), #ntcpconnections .tablefooter td:nth-child(4), #ntcpconnections .tablefooter td:nth-child(5), #ntcpconnections .tablefooter td:nth-child(6),
+#udpconnections .tablefooter td:nth-child(3), #udpconnections .tablefooter td:nth-child(4), #udpconnections .tablefooter td:nth-child(7), #udpconnections .tablefooter td:nth-child(8),
+#udpconnections .tablefooter td:nth-child(10), #udpconnections .tablefooter td:nth-child(11), #udpconnections .tablefooter td:nth-child(12), #udpconnections .tablefooter td:nth-child(13) {
+     text-align: right;
+}
+
+#udpconnections .tablefooter td:nth-child(9) {
+     text-align: center !important;
+}
+
+#ntcpconnections td:nth-child(4), #ntcpconnections td:nth-child(5), #udpconnections td:nth-child(4),
+#udpconnections td:nth-child(5), #udpconnections td:nth-child(8), #udpconnections td:nth-child(12) {
+     white-space: nowrap;
+}
+
+#udpconnections .tablefooter td, #ntcpconnections .tablefooter td {
+     padding-left: 5px;
+     padding-right: 5px;
+}
+
+
+#ntcpconnections th:nth-child(6), #ntcpconnections th:nth-child(7), #ntcpconnections th:nth-child(8), #ntcpconnections th:nth-child(9), #ntcpconnections th:nth-child(10) {
+     text-align: right;
+}
+
+#udpconnections th:nth-child(6), #udpconnections th:nth-child(7), #udpconnections th:nth-child(n+9) {
+     text-align: right;
+}
+
+#udpconnections th:nth-child(12) {
+     text-align: center;
+}
+
+.peersort {
+     text-align: center;
+     display: inline-block;
+}
+
+.right {
+     text-align: right;
+     margin: 0 1px;
+     display: inline-block;
+     width: 40%
+}
+
+.left {
+     text-align: left;
+     margin: 0 1px;
+     display: inline-block;
+     width: 40%
+}
+
+.peeripv6:empty {
+     padding: 0;
+     width: 0;
+}
+
+.cwnd .left, .cwnd .right {
+     width: auto;
+}
+
+#udpconnections td:nth-child(n+13), #udpconnections .tablefooter td:nth-child(n+10) {
+     padding-right: 1% !important;
+}
+
+#peerdefs {
+     line-height: 140%;
+     padding: 5px;
+}
+
+.peer_arrow {
+     display: inline-block;
+     width: 18px;
+     text-align: center;
+     margin-right: 3px;
+}
+
+/* end peers */
 

installer/resources/themes/console/classic/console_big.css

@@ -13,8 +13,11 @@
 
 input[type="submit"], input[type="cancel"], input[type="file"], button, button.search, input.cancel {
      font-size: 11pt !important;
-     padding-top: 5px;
+     padding-top: 3px;
-     padding-bottom: 5px;
+     padding-bottom: 3px;
+     line-height: 140% !important;
+     display: inline-block;
+     letter-spacing: 0.05em;
 }
 
 input[type="submit"], input[type="cancel"], input[type="file"], button, button.search, input.cancel, div.app, .themelabel, .ui_lang, .tab a, label, a, li {
@@ -113,6 +116,16 @@ h1, h2, h3, h4 {
      word-spacing: 0.1em !important;
 }
 
+.infohelp, .infowarn, .infowarn b, #helptranslate {
+     letter-spacing: 0.1em !important;
+     word-spacing: 0.2em !important;
+}
+
+.suboption {
+     display: inline-block;
+     margin-bottom: 5px !important;
+}
+
 /* end global overrides */
 
 div.tunnels a {
@@ -135,8 +148,8 @@ div.main, div.main p, div.news p {
      line-height: 140%;
 }
 
-div.main, div.news, h1 {
+div.main, div.news, h1, .sorry {
-     margin-left: 226px;
+     margin-left: 227px;
 }
 
 .langbox {
@@ -171,16 +184,19 @@ table code {
      font-weight: normal !important;
      overflow: hidden;
      text-overflow: hidden;
-     margin-bottom: -2px;
      padding-bottom: 4px !important;
 }
 
+.ui_lang {
+     font-size: 9pt !important;
+}
+
 #themeui.formaction {
      margin-top: 8px !important;
 }
 
 div.themechoice, div.langselect {
-     width: 128px;
+     width: 140px;
 }
 
 h3.ptitle, h3#i2pclientconfig {
@@ -312,6 +328,66 @@ h3#iptransport a::after, h3#advancedconfig a::after {
      margin-left: 5px;
 }
 
+#console p, #console li {
+     letter-spacing: 0.15em !important;
+     line-height: 160% !important;
+}
+
+#console li {
+     list-style-type: none;
+     margin: 10px 25px 10px 10px;
+     text-align: justify;
+}
+
+.twocol {
+     background: #eef;
+     margin-top: 15px !important;
+     margin-bottom: -20px !important;
+     padding: 10px 10px 5px;
+     border-radius: 4px;
+}
+
+.twocol li {
+     margin-left: 35px !important;
+     margin-right: 0;
+     margin-top: 0;
+     margin: 0 0 0 35px !important;
+     padding: 0 0 10px !important;
+}
+
+.twocol li:first-child {
+     margin-top: 0 !important;
+     margin-bottom: 10px !important;
+     padding-top: 0 !important;
+     padding-left: 0 !important;
+}
+
+div[lang="zh"] a {
+     background: #ddf;
+     border-radius: 2px;
+     display: inline-block;
+     padding: 0 4px;
+}
+
+a:hover code {
+     color: #f60 !important;
+}
+
+#reseedconfig td:first-child, #loggingoptions td:first-child {
+     white-space: nowrap;
+}
+
+#logs li font, #logs pre, #enviro td, #enviro td b {
+     font-size: 10pt !important;
+     letter-spacing: normal !important;
+     word-spacing: normal !important;
+}
+
+#enviro td {
+     padding-top: 3px !important;
+     padding-bottom: 3px !important;
+}
+
 /* responsive layout */
 
 @media screen and (max-width: 1200px) {
@@ -339,7 +415,8 @@ div.routersummary img[src$="i2plogo.png"] {
      width: 210px;
 }
 
-.routersummary .reload[value="restartImmediate"], .routersummary .stop[value="shutdownImmediate"], .routersummary .reload[value="Reseed"], .routersummary button[name="updateAction"] {
+.routersummary .reload[value="restartImmediate"], .routersummary .stop[value="shutdownImmediate"],
+.routersummary .reload[value="Reseed"], .routersummary button[name="updateAction"] {
      font-size: 11pt !important;
 }
 
@@ -360,10 +437,6 @@ div.routersummary img[src$="i2plogo.png"] {
      margin: -4px 0 8px -54px !important;
 }
 
-#console h2 {
-     margin-bottom: -5px !important;
-}
-
 #console h2 a[name], #console h2 a[name]:hover {
      font-size: 16pt !important;
      color: #0c153d !important;
@@ -426,7 +499,7 @@ div.news h3, .newsDate, div.news a {
 }
 
 @media screen and (min-width: 1500px) {
-body, .main, .main td, .news p, #news p, .main li b, div.joblog li, .themelabel, .ui_lang, .applabel a, .statusnotes,
+body, .main, .main td, .news p, #news p, .main li b, div.joblog li, .themelabel, .applabel a, .statusnotes,
 #peerdefs, #profile_defs, #thresholds, #configinfo, .infohelp, .infowarn, button, input, select, textarea, code, tt, pre,
 .netdbentry th, .configtable th, ul.statlist a[name], ul.statlist b, ul.statlist li b, ul.statlist a[name]:hover, div.messages, th {
      font-size: 12pt !important;
@@ -458,4 +531,14 @@ div.applabel {
 }
 }
 
+@media screen and (min-width: 1500px) {
+.langselect img[src^="/flags"] {
+    margin-left: -92px !important;
+}
+
+.langselect input[name="lang"]:checked + img {
+    margin-left: -93px !important;
+}
+}
+
 /* end responsive layout */

installer/resources/themes/console/dark/console.css

@@ -268,7 +268,7 @@ div.warning {
 }
 
 .routersummary {
-     width: 174px;
+     width: 184px;
      padding: 8px 10px 8px;
      text-align: center;
      border: 1px solid #494;
@@ -285,9 +285,9 @@ div.warning {
 .routersummary img[src$="i2plogo.png"] {
      opacity: 0.9;
      transition: ease filter 0.3s, ease opacity 0.3s;
-     margin-top: 1px;
+     margin-top: -2px;
-     margin-left: -1px;
+     margin-left: -4px;
-     width: 176px;
+     width: 193px;
      height: auto;
 }
 
@@ -388,7 +388,7 @@ div.warning {
      border: 0;
      text-align: center !important;
      margin: -5px -7px -6px -8px !important;
-     width: 190px !important;
+     width: 200px !important;
      overflow: hidden;
      font-size: 8pt;
      background-image: none !important;
@@ -467,7 +467,7 @@ div.warning {
 
 #sb_services a:link, #sb_internals a:link, #sb_advanced a:link {
      word-break: break-all;
-     max-width: 182px;
+     max-width: 192px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
@@ -605,8 +605,6 @@ div.refresh {
      background-image: none !important;
      border: 0 !important;
      word-spacing: -0.1em;
-     max-width: 180px;
-     text-overflow: ellipsis; /* force ellipsis rather than truncate rare, overlong text strings eg. Swedish sidepanel */
 }
 
 .routersummary td:first-child {
@@ -670,7 +668,7 @@ div.tunnels td:last-child {
 /* console error messages */
 
 div.sorry {
-     margin: -1px 5px 10px 206px;
+     margin: -1px 5px 10px 216px;
      padding: 20px 20px 20px 75px;
      background: #020;
      border: 1px solid #494;
@@ -697,7 +695,7 @@ div.sorry {
 /* main section */
 
 .main {
-     margin: -1px 5px 5px 206px;
+     margin: -1px 5px 5px 216px;
      padding: 0 15px 5px 15px;
      text-align: left;
      color: #EE9;
@@ -769,7 +767,7 @@ div.main textarea {
 }
 
 div.news {
-     margin: -1px 5px 0 206px;
+     margin: -1px 5px 0 216px;
      padding: 6px 20px 5px;
      border: 1px solid #494;
      background: #000 url(images/news.png) no-repeat scroll bottom right;
@@ -1217,6 +1215,11 @@ td img {
      padding: 0;
 }
 
+#udpconnections tr:last-child td, #ntcpconnections tr:last-child td {
+     padding-top: 6px;
+     padding-bottom: 6px;
+}
+
 /* peers - sort icons */
 
 #udpconnections th {
@@ -1484,7 +1487,7 @@ h1 {
      text-align: left;
      color: #EE9;
      padding: 13px 15px;
-     margin: 0 5px 0 206px !important;
+     margin: 0 5px 0 216px !important;
      font-size: 17pt;
      font-weight: bold;
      font-style: normal;
@@ -2269,10 +2272,6 @@ form[action="events"] {
      background: #000;
 }
 
-th.smallhead {
-     border: 1px inset #131;
-}
-
 .smallhead {
      font-size: 8pt
 }
@@ -2305,8 +2304,6 @@ th.smallhead {
 }
 
 .cells {
-     border: 1px inset #131;
-     /*border-left: 1px outset #141;*/
      text-align: center;
 }
 
@@ -4056,6 +4053,10 @@ font[color="#000099"] {
      color: #ee9;
 }
 
+#profilelist td:last-child {
+     text-align: center !important;
+}
+
 #profilelist th, #profilelist td {
      text-align: right;
      padding-left: 5px;
@@ -4083,6 +4084,10 @@ font[color="#000099"] {
      text-align: center;
 }
 
+#profilelist td:nth-child(3) {
+     letter-spacing: 0.1em;
+}
+
 #profilelist th:last-child {
      padding-right: 10px;
 }
@@ -4093,7 +4098,7 @@ font[color="#000099"] {
      white-space: nowrap;
 }
 
-#profilelist td[colspan="8"] { /* profile class separator */
+#profilelist td[colspan="9"] { /* profile class separator */
      background: #040;
      padding: 1px;
      border: 1px inset #000;
@@ -4710,11 +4715,11 @@ table.netdbentry td b, table.leaseset td b, table#leasesetdebug td b, .sybil_rou
      color: #ee9 !important;
 }
 
-a.viewfullentry:not(old) {
+a.viewfullentry:not(old), a[href^="viewprofile"]:not(old) {
      font-size: 0;
 }
 
-a.viewfullentry::after {
+a.viewfullentry::after, a[href^="viewprofile"]::after {
      content: url(/themes/console/images/buttons/fullview.png);
      vertical-align: text-top;
 }
@@ -5702,15 +5707,6 @@ table#floodfills td {
 }
 
 @media screen and (max-width: 1240px) {
-#udpconnections td, #ntcpconnections td {
-     padding: 3px 2px;
-}
-
-#udpconnections tr.tablefooter td, #ntcpconnections tr.tablefooter td {
-     border: 1px inset #131 !important;
-     border-top: 1px solid #494 !important;
-}
-
 .main#profiles, .main#peers {
      padding: 5px 5px 0;
 }
@@ -5818,6 +5814,10 @@ td.optionsave {
 #faq h3 {
      font-size: 10pt !important;
 }
+
+#udpconnections .cells {
+     border: 1px inset #131;
+}
 }
 
 @media screen and (max-width: 1220px) {
@@ -5888,7 +5888,7 @@ ul.statlist a[name], ul.statlist b, ul.statlist li b, ul.statlist a[name]:hover,
 }
 
 .main, .news, h1 {
-     margin-left: 232px !important;
+     margin-left: 242px !important;
 }
 
 pre, #logs li, .smallhead {
@@ -5896,11 +5896,11 @@ pre, #logs li, .smallhead {
 }
 
 .routersummary {
-     width: 200px !important;
+     width: 210px !important;
 }
 
 .routersummary table[id^="sb_"] {
-     width: 216px !important;
+     width: 226px !important;
 }
 
 .routersummary td, .routersummary a, .routersummary button, .routersummary h4, .routersummary h4 a,
@@ -5987,16 +5987,20 @@ p#fullhistory {
 }
 
 .routersummary img[src$="i2plogo.png"] {
-     margin-left: -5px;
+     margin-left: -8px;
      transform: none;
-     width: 210px;
+     width: 225px;
-     margin-top: -3px;
+     margin-top: -6px;
 }
 
 .routersummary h3::after {
      min-height: 19px;
 }
 
+#sb_services a:link, #sb_internals a:link, #sb_advanced a:link {
+     max-width: 216px !important;
+}
+
 #banlist + h3.tabletitle {
      margin-bottom: -2px !important;
 }
@@ -6207,11 +6211,12 @@ _:-ms-lang(x), .tunnels_client th:first-child::after {
 }
 
 .routersummary .error, .routersummary .warn, .routersummary .testing, .routersummary .hidden,
-.routersummary .running, .routersummary .firewalled, .routersummary .vmcomm, .routersummary .clockskew {
+.routersummary .running, .routersummary .firewalled, .routersummary .vmcomm, .routersummary .clockskew, .tunnelBuildStatus {
      display: inline-block;
      vertical-align: middle;
      border: 1px solid #316f30;
      box-sizing: border-box;
+     border: 1px solid rgba(49, 111, 48, 0.6);
      padding: 6px 3px;
      width: 100%;
      margin: -5px 0;
@@ -6292,3 +6297,188 @@ _:-ms-lang(x), .tunnels_client th:first-child::after {
 
 /* end network status */
 
+/* /tunnels */
+
+tt a {
+     letter-spacing: 0.07em;
+}
+
+.tunnel_cap {
+     background: rgba(0,96,0,0.3);
+     color: #bb7;
+     border: 1px solid rgba(0,64,0,0.2);
+     border-radius: 2px;
+     min-width: 12px;
+     padding: 0 2px;
+     display:inline-block;
+     margin: 1px 2px 1px 8px;
+     text-align: center !important;
+     text-shadow: 0 1px 1px #555;
+}
+
+.tunnel_cap:empty {
+     border: none;
+}
+
+.tunnel_id {
+     display: inline-block;
+     min-width: 78px;
+     text-align: right;
+}
+
+.tunnel_id:empty {
+     min-width: 0;
+}
+
+.tunnel_id:empty + .tunnel_cap {
+     margin-left: 12px !important;
+     display: inline-block;
+}
+
+.tunnel_peer {
+     display: inline-block;
+     min-width: 56px;
+     text-align: right;
+}
+
+.tunnel_local {
+     font-size: 8pt;
+     background: rgba(0,96,0,0.3);
+     border-radius: 2px;
+     text-align: center;
+     padding: 2px 0;
+     margin-left: -4px;
+     margin-right: 4px;
+}
+
+.tunnel_peer:empty {
+     vertical-align: top;
+}
+
+#tunnel_defs {
+     margin-top: -1px;
+     margin-bottom: 10px;
+}
+
+@media screen and (max-width: 1100px) {
+.tunnel_id, .tunnel_peer {
+     min-width: 0 !important;
+     text-align: center !important;
+}
+
+.tunnel_local {
+     margin-right: 5px;
+     margin-left: 2px;
+     padding: 2px 4px;
+}
+
+.tunnel_peer:empty {
+     vertical-align: middle;
+}
+
+.tunnel_peer:empty::before {
+     margin: 1px 6px 1px 2px;
+}
+
+.tunnel_cap {
+     margin-left: 5px !important;
+}
+}
+
+@media screen and (max-width: 1200px) {
+#tunnel_defs {
+     margin-bottom: 5px;
+}
+}
+
+@media screen and (min-width: 1500px) {
+.tunnel_cap {
+     margin-left: 10px;
+     padding: 0 1px;
+     min-width: 14px;
+}
+
+.tunnel_id:empty {
+     margin-right: -10px;
+}
+}
+
+/* end tunnels */
+
+/* /peers */
+
+#ntcpconnections th:nth-child(6), #ntcpconnections th:nth-child(7), #ntcpconnections th:nth-child(8), #ntcpconnections th:nth-child(9), #ntcpconnections th:nth-child(10),
+#ntcpconnections td:nth-child(6), #ntcpconnections td:nth-child(7), #ntcpconnections td:nth-child(8), #ntcpconnections td:nth-child(9), #ntcpconnections td:nth-child(10),
+#udpconnections td:nth-child(6), #udpconnections td:nth-child(7), #udpconnections td:nth-child(9), #udpconnections td:nth-child(10), #udpconnections td:nth-child(11),
+#udpconnections td:nth-child(13), #udpconnections td:nth-child(14), #udpconnections td:nth-child(15), #udpconnections td:nth-child(16) {
+     text-align: right;
+     white-space: nowrap;
+}
+
+#ntcpconnections .tablefooter td:nth-child(3), #ntcpconnections .tablefooter td:nth-child(4), #ntcpconnections .tablefooter td:nth-child(5), #ntcpconnections .tablefooter td:nth-child(6),
+#udpconnections .tablefooter td:nth-child(3), #udpconnections .tablefooter td:nth-child(4), #udpconnections .tablefooter td:nth-child(7), #udpconnections .tablefooter td:nth-child(8),
+#udpconnections .tablefooter td:nth-child(10), #udpconnections .tablefooter td:nth-child(11), #udpconnections .tablefooter td:nth-child(12), #udpconnections .tablefooter td:nth-child(13) {
+     text-align: right;
+}
+
+#udpconnections .tablefooter td:nth-child(9) {
+     text-align: center !important;
+}
+
+#ntcpconnections td:nth-child(4), #ntcpconnections td:nth-child(5), #udpconnections td:nth-child(4),
+#udpconnections td:nth-child(5), #udpconnections td:nth-child(8), #udpconnections td:nth-child(12) {
+     white-space: nowrap;
+}
+
+#udpconnections .tablefooter td, #ntcpconnections .tablefooter td {
+     padding-left: 5px;
+     padding-right: 5px;
+}
+
+#ntcpconnections th:nth-child(6), #ntcpconnections th:nth-child(7), #ntcpconnections th:nth-child(8), #ntcpconnections th:nth-child(9), #ntcpconnections th:nth-child(10) {
+     text-align: right;
+}
+
+#udpconnections th:nth-child(6), #udpconnections th:nth-child(7), #udpconnections th:nth-child(n+9) {
+     text-align: right;
+}
+
+#udpconnections th:nth-child(12) {
+     text-align: center;
+}
+
+.peersort {
+     text-align: center;
+     display: inline-block;
+}
+
+.right {
+     text-align: right;
+     margin: 0 1px;
+     display: inline-block;
+     width: 40%
+}
+
+.left {
+     text-align: left;
+     margin: 0 1px;
+     display: inline-block;
+     width: 40%
+}
+
+.peeripv6:empty {
+     padding: 0;
+     width: 0;
+}
+
+.cwnd .left, .cwnd .right {
+     width: auto;
+}
+
+#udpconnections th:nth-child(n+13), #udpconnections .tablefooter th:nth-child(n+10),
+#udpconnections td:nth-child(n+13), #udpconnections .tablefooter td:nth-child(n+10) {
+     padding-right: 1% !important;
+}
+
+/* end peers */
+

installer/resources/themes/console/dark/console_ar.css

@@ -5,6 +5,7 @@
 
 body {
      direction: rtl;
+     margin: 6px 12px 6px 0 !important;
 }
 
 div.main li {
@@ -26,6 +27,10 @@ div.news {
      direction: ltr;
 }
 
+.sorry {
+     margin: -1px 205px 0px 5px !important;
+}
+
 .news h3, #newspage h3 {
      direction: ltr;
 }
@@ -44,7 +49,7 @@ h1 {
      margin: 0 205px 0 5px !important;
 }
 
-h1,h2,h3,h4 {
+h1, h2, h3, h4 {
      direction: rtl;
      text-align: right;
 }
@@ -65,6 +70,12 @@ button.search {
      margin-right: 30px;
 }
 
+.routersummary img[src$="i2plogo.png"] {
+     margin-top: -2px !important;
+     margin-left: 0 !important;
+     margin-right: -5px !important;
+}
+
 div.routersummary h3, div.routersummary h4, .routersummary a, .routersummary b {
      text-align: center;
      font-weight: normal;
@@ -165,7 +176,7 @@ span.newtab {
      outline: 1px dotted #f00;
      position: absolute;
      padding: 2px;
-     margin-right: -27px;
+     margin-right: -33px;
      min-height: 78px !important;
 }
 
@@ -430,16 +441,32 @@ div[lang="ar"] ul, div[lang="ar"] p {
      margin: 10px;
 }
 
+.routersummary .error::before, .routersummary .warn::before, .routersummary .testing::before, .routersummary .hidden::before,
+.routersummary .running::before, .routersummary .firewalled::before, .routersummary .vmcomm::before, .routersummary .clockskew::before {
+     padding-left: 6px !important;
+     padding-right: 0 !important;
+}
+
+.themechoice {
+     padding: 0;
+}
+
 @media screen and (min-width: 1500px) {
-.main, .news, h1 {
+.main, .news, h1, .sorry {
      margin-right: 232px !important;
-     margin-left: 0 !important;
+     margin-left: 6px !important;
 }
 
 div.routersummaryouter {
      margin-right: 27px !important;
 }
 
+.routersummary img[src$="i2plogo.png"] {
+     margin-top: -5px !important;
+     margin-left: 0 !important;
+     margin-right: -8px !important;
+}
+
 .routersummary h4 {
      font-size: 11pt !important;
 }
@@ -451,4 +478,23 @@ div.routersummaryouter {
 div[lang="ar"], div[lang="ar"] code, div[lang="ar"] b {
      font-size: 11pt !important;
 }
+
+.themechoice .optbox {
+    margin-left: 0;
+    margin-right: -48px;
+}
+
+.langselect .optbox {
+    margin: -7px -2px -34px 0;
+}
+
+.langselect img {
+    margin: 0;
+    margin-right: -81px;
+}
+
+.langselect input[name="lang"]:checked + img {
+    margin-left: 0;
+    margin-right: -82px;
+}
 }

installer/resources/themes/console/dark/console_big.css

@@ -7,30 +7,6 @@ h1, h2, h3, h4 {
      font-weight: normal !important;
 }
 
-body {
-     font-family: "Droid Sans", "Noto Sans", Verdana, "Bitstream Vera Sans", Tahoma, Helvetica, sans-serif;
-     font-size: 12pt;
-     line-height: 130%;
-}
-
-div.news {
-     font-size: 10pt;
-     font-style: normal !important;
-}
-
-div.main, div.news, h1 {
-     margin-left: 232px !important;
-}
-
-div.routersummary {
-     width: 200px;
-}
-
-div.routersummary table, table#sb_localtunnels {
-    font-size: 10pt;
-    width: 215px !important;
-}
-
 div.routersummary table td {
      padding: 2px 1px;
 }
@@ -141,26 +117,34 @@ div.app {
 }
 
 input[type="submit"], input[type="reset"], .cancel, .accept {
-     padding: 5px 8px !important;
+     padding: 2px 8px !important;
      font-size: 12pt !important;
      min-width: 80px;
      font-weight: normal;
+     line-height: 140% !important;
+     display: inline-block;
+     letter-spacing: 0.05em;
 }
 
-.langselect, .themechoice {
+.themechoice {
      font-size: 11pt !important;
 }
 
+.langselect {
+     font-size: 9pt !important;
+}
+
 .langselect .optbox {
      min-height: 68px;
 }
 
 .langselect img {
-     margin-top: 12px !important;
+     margin-top: 8px !important;
 }
 
 .langselect input[name="lang"]:checked + img, .langselect input[name="lang"]:checked + #config_ui img[src="/flags.jsp?c=a1"] {
-     margin-top: 10px !important;
+     margin-top: 6px !important;
+     margin-left: -66px !important;
 }
 
 table#leasesetdebug th a:not(old), table#leasesetsummary th a:not(old), #tunnels.main h3 a:not(old), #logs h3 a:not(old),
@@ -226,9 +210,41 @@ li .twocol {
 }
 
 @media screen and (min-width: 0) {
+body {
+     font-family: "Droid Sans", "Noto Sans", Verdana, "Bitstream Vera Sans", Tahoma, Helvetica, sans-serif;
+     font-size: 12pt;
+     line-height: 130%;
+}
+
+div.news {
+     font-size: 10pt;
+     font-style: normal !important;
+}
+
+div.main, div.news, h1, .sorry {
+     margin-left: 232px !important;
+}
+
+.sorry {
+     font-size: 12pt !important;
+}
+
+div.routersummary {
+     width: 200px !important;
+}
+
+div.routersummary table, table#sb_localtunnels {
+    font-size: 10pt;
+    width: 215px !important;
+}
+
+#sb_internals a, #sb_services a, #sb_advanced a {
+     padding: 1px 3px !important;
+}
+
 h1 {
      font-size: 20pt !important;
-     padding: 11px 15px;
+     padding: 10px 15px 11px;
 }
 
 h2 {
@@ -302,3 +318,26 @@ h3#webappconfig, h3#i2pclientconfig {
 }
 }
 
+@media screen and (min-width: 1500px) {
+.langselect img {
+    margin-left: -81px !important;
+}
+
+.langselect input[name="lang"]:checked + img, .langselect input[name="lang"]:checked + #config_ui img[src="/flags.jsp?c=a1"] {
+     margin-top: 6px !important;
+     margin-left: -83px !important;
+}
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1500px) {
+.langselect img {
+     margin-left: -8px !important;
+     margin-top: -18px !important;
+}
+
+.langselect input[name="lang"]:checked + img {
+     margin-left: -10px !important;
+     margin-top: -20px !important;
+}
+}
+

installer/resources/themes/console/light/console.css

@@ -51,7 +51,8 @@ div.clearer {
      text-shadow: none;
 }
 
-.routersummary img[src$="i2plogo.png"], .routersummary h3, .confignav, *::before, *::after {
+.routersummary img[src$="i2plogo.png"], .routersummary h3, .confignav, *::before, *::after, div.app, .themechoice, .langselect, .langbox,
+.newsAuthor, #netdbcountrylist img, .viewfullentry, .sybil_routerinfo th img, .graphspanel {
      -moz-user-select: none;
      -webkit-user-select: none;
      user-select: none;
@@ -109,7 +110,7 @@ pre {
 }
 
 .routersummary {
-     width: 182px;
+     width: 190px;
      padding: 8px 8px 10px;
      margin-bottom: 8px;
      text-align: center !important;
@@ -138,9 +139,9 @@ pre {
 .routersummary img[src$="i2plogo.png"] {
      opacity: 0.9;
      transition: ease filter 0.3s 0s, ease opacity 0.3s 0s;
-     margin-top: 0;
+     margin-top: -1px;
-     margin-left: 0 !important;
+     margin-left: -1px !important;
-     width: 179px;
+     width: 192px;
      height: auto;
      filter: drop-shadow(0 0 1px #ccc);
 }
@@ -309,7 +310,7 @@ h4.sb_info + hr + form {
      border: 0;
      text-align: center !important;
      margin: -8px -5px -5px -5px;
-     width: 192px !important;
+     width: 200px !important;
      overflow: hidden;
      font-size: 8pt;
      background-image: none !important;
@@ -853,7 +854,7 @@ div.warning {
 /* console error messages */
 
 div.sorry {
-     margin: -11px 0 10px 207px;
+     margin: -11px 0 10px 214px;
      padding: 20px 25px 20px 70px;
      border: 1px solid #447;
      border-radius: 0 0 2px 2px;
@@ -875,7 +876,7 @@ div.sorry hr {
 }
 
 div.main {
-     margin: -12px 0 8px 207px;
+     margin: -12px 0 8px 214px;
      padding: 0 15px 10px 15px;
      text-align: left;
      color: #333;
@@ -1012,7 +1013,7 @@ textarea[name="reseedURL"] {
 /* news */
 
 div.news {
-     margin: -12px 0 5px 207px;
+     margin: -12px 0 5px 214px;
      padding: 5px 15px 12px;
      border: 1px solid #447;
      color: #224;
@@ -1758,7 +1759,7 @@ td.optionsave, .formaction, form[action="configpeer"] tr:last-child td, table#ad
      border-top: 1px solid #7778bf !important;
 }
 
-td.infohelp, #help tr:hover td.infohelp {
+td.infohelp, #help tr:hover td.infohelp, #eventlog tr:hover .infohelp {
      background: #fff url(/themes/console/images/info/infohelp.png) 12px center no-repeat;
      padding: 15px 15px 15px 50px;
      border-bottom: 1px solid #7778bf !important;
@@ -2292,7 +2293,6 @@ div.main li b, .statlist b a:hover {
 }
 
 ol {
-
      margin: 0 0 10px;
      padding: 0;
 }
@@ -2366,6 +2366,10 @@ a:active {
      margin-top: -5px !important;
 }
 
+.links code, #console code {
+     color: #910;
+}
+
 p {
      text-align: justify;
      line-height: 130%;
@@ -2752,7 +2756,7 @@ h1 {
      text-align: left;
      color: #31334f;
      padding: 17px 15px 14px;
-     margin: 0 0 10px 207px;
+     margin: 0 0 10px 214px;
      font-size: 18pt;
      line-height: 90%;
      letter-spacing: 0.12em;
@@ -4349,7 +4353,7 @@ table#addkeyring tr:last-child td {
      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 {
+.cells tt, #profilelist tt, tt a {
      font-size: 8pt !important;
      margin-left: 2px !important;
 }
@@ -4376,14 +4380,6 @@ table#addkeyring tr:last-child td {
      text-align: center !important;
 }
 
-/*
-#ntcpconnections td:nth-child(6), #ntcpconnections td:nth-child(7), #ntcpconnections td:nth-child(8), #ntcpconnections td:nth-child(9), #ntcpconnections td:nth-child(10),
-#ntcpconnections .tablefooter td:nth-child(3), #ntcpconnections .tablefooter td:nth-child(4), #ntcpconnections .tablefooter td:nth-child(5), #ntcpconnections .tablefooter td:nth-child(6) {
-     padding-left: 1vw !important;
-     padding-right: 1vw !important;
-}
-*/
-
 #ntcpconnections td:nth-child(4), #ntcpconnections td:nth-child(5), #udpconnections td:nth-child(4),
 #udpconnections td:nth-child(5), #udpconnections td:nth-child(8), #udpconnections td:nth-child(12) {
      white-space: nowrap;
@@ -4444,16 +4440,20 @@ table.netdbentry td:nth-child(2) {
      margin: 1px 0 0 0;
 }
 
-a.viewfullentry:not(old) {
+a.viewfullentry:not(old), #profilelist a[href^="viewprofile"]:not(old) {
      font-size: 0;
 }
 
-a.viewfullentry::after {
+a.viewfullentry::after, #profilelist a[href^="viewprofile"]::after {
      content: url(/themes/console/images/buttons/fullview.png);
      vertical-align: text-top;
      filter: drop-shadow(0 0 1px #999);
 }
 
+ #profilelist a[href^="viewprofile"]::after {
+     vertical-align: bottom;
+}
+
 a.viewfullentry:hover {
      filter: drop-shadow(0 0 1px #f60);
 }
@@ -4897,10 +4897,14 @@ ul#banlist {
      text-align: right;
 }
 
-#profiles th:nth-child(7) {
+#profiles th:nth-child(8) {
      text-align: center;
 }
 
+#profilelist {
+     margin-bottom: 10px;
+}
+
 #profilelist td:first-child {
      width: 1%;
      text-align: right;
@@ -4911,11 +4915,17 @@ ul#banlist {
      text-align: left;
 }
 
-#profilelist td[colspan="8"] {
+#profilelist td[colspan="9"] {
      background: #77f;
      padding: 0;
 }
 
+#view_profile h2 {
+     text-transform: none !important;
+     letter-spacing: normal;
+     word-spacing: normal;
+}
+
 #thresholds p {
      margin-left: 5px;
      line-height: 140%;
@@ -4971,7 +4981,7 @@ ul#banlist {
      text-transform: none !important;
 }
 
-#profilelist tr:hover td, table#floodfills tr:hover td, #ntcpconnections tr:nth-last-child(n+2):hover td, #udpconnections tr:nth-last-child(n+2):hover td,
+#profilelist tr:hover td, #floodfills tr:hover td, #ntcpconnections tr:nth-last-child(n+2):hover td, #udpconnections tr:nth-last-child(n+2):hover td,
 #schedjobs tr:hover td, #jobstats tr:nth-last-child(n+2):hover td, #jardump tr:hover td, #sidebarconf tr:nth-last-child(n+2):hover td, #eventlog tr:hover td,
 #netdboverview table tr:hover td, #debug tr:hover td, #clientconfig tr:hover td, #webappconfig tr:hover td, #portfaq tr:hover td, .tunneldisplay tr:hover td {
      background: #ffd;
@@ -5144,9 +5154,15 @@ h3#ntcpcon, h3#udpcon {
 #profilelist td:last-child {
      text-align: right;
      padding-right: 5px;
+     width: 1%;
+     white-space: nowrap;
 }
 
-table#floodfills th {
+#floodfills {
+     margin-top: 8px;
+}
+
+#floodfills th {
      text-align: center !important;
      border-right: 1px solid #7778bf;
 }
@@ -5155,10 +5171,18 @@ table#floodfills th {
      text-align: right;
      padding-left: 3px;
      padding-right: 3px;
+     width: 1%;
+     white-space: nowrap;
 }
 
 #floodfills td:first-child img {
      margin-right: 2px;
+     margin-left: 4px;
+}
+
+#floodfills td:nth-child(2), #profilelist td:nth-child(3) {
+     text-align: right;
+     letter-spacing: 0.15em;
 }
 
 #i2pupdates input[type="text"]:not([readonly]), #i2pupdates textarea, .main[id^="config_"] textarea, input[name="newsURL"] {
@@ -5669,6 +5693,14 @@ input[name="pluginURL"] {
      margin-left: 2px !important;
      margin-right: 2px !important;
 }
+
+#profilelist th {
+     font-size: 8pt;
+}
+
+#profilelist th:last-child {
+     font-size: 0;
+}
 }
 
 @media screen and (max-width: 1200px) {
@@ -5682,6 +5714,9 @@ input[name="pluginURL"] {
 }
 
 @media screen and (max-width: 1500px) {
+body {
+     margin: 5px 4px;
+}
 
 #sb_general td:first-child::after, #sb_shortgeneral td:first-child::after, #sb_bandwidth td:first-child::after,
 #sb_peers td:first-child::after, #sb_tunnels td:first-child::after, #sb_queue td:first-child::after {
@@ -5689,7 +5724,7 @@ input[name="pluginURL"] {
 }
 
 #sb_internals a, #sb_advanced a {
-     max-width: 188px;
+     max-width: 200px;
 }
 
 .tunnels_client th:first-child:not(old) {
@@ -5726,12 +5761,12 @@ input[name="pluginURL"] {
 
 @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, #changelog pre, .routersummary button.download,
-#peerdefs, #profile_defs, #thresholds, #configinfo, .infohelp, .infowarn, button, input, select, textarea, #configinfo th, tt, code, th, .statusnotes {
+#peerdefs, #profile_defs, #thresholds, #configinfo, .infohelp, .infowarn, button, input, select, textarea, #configinfo th, code, th, .statusnotes {
      font-size: 10pt !important;
 }
 
-.routersummary td, .routersummary a, .routersummary button, .routersummary h4, .routersummary h4 a, div.newss, pre,
+.routersummary td, .routersummary a, .routersummary button, .routersummary h4, .routersummary h4 a, div.news, pre,
-#jardump tt, #jardump td, div.news, #logs li, .cells tt, #profilelist tt, .leaseset tt {
+#jardump tt, #jardump td, div.news, #logs li, tt, .cells tt, #profilelist tt, .leaseset tt {
      font-size: 9pt !important;
 }
 
@@ -5740,9 +5775,11 @@ body, .main, .main td, .news p, #news p, .tab, .tab2, .main li b, div.joblog li,
      border-right: none;
 }
 
-.cells tt, #profilelist tt {
+tt a, .cells tt, #profilelist tt, .cells tt a, #profilelist tt a {
      margin-left: 3px !important;
      margin-right: 3px !important;
+     font-size: 9pt !important;
+     letter-spacing: 0.1em !important;
 }
 
 .main[id^="config_"] th, h4#updateplugins {
@@ -6141,10 +6178,12 @@ h1 {
 /* tunnel build status */
 
 .tunnelBuildStatus {
-     background: rgba(220,255,220,0.15);
+     padding: 7px 2px;
-     color: #070;
 }
 
+/* TO DO: activate this when we have build status specific spans */
+
+/*
 .tunnelStatusAccept {
      background: rgba(220,255,220,0.15);
      color: #070;
@@ -6184,7 +6223,7 @@ h1 {
 .tunnelStatusRejectHidden::before {
      content: url(/themes/console/images/info/network_status/rejecting_hidden.png);
 }
-
+*/
 /* end tunnel build status */
 
 /* peers */
@@ -6233,6 +6272,17 @@ h1 {
      padding-right: 1%;
 }
 
+#peerdefs td {
+     line-height: 130%;
+}
+
+.peer_arrow {
+     display: inline-block;
+     width: 22px;
+     text-align: center;
+     margin: 2px 1px;
+}
+
 /* end peers */
 
 /* /tunnels */
@@ -6249,7 +6299,7 @@ tt a {
      min-width: 12px;
      padding: 0 2px;
      display:inline-block;
-     margin: 1px 2px 1px 6px;
+     margin: 1px 2px 1px 8px;
      text-align: center !important;
      text-shadow: 0 1px 1px #555;
 }
@@ -6260,39 +6310,58 @@ tt a {
 
 .tunnel_id {
      display: inline-block;
-     min-width: 74px;
+     min-width: 78px;
      text-align: right;
 }
 
 .tunnel_id:empty {
-     margin-right: -3px;
      min-width: 0;
 }
 
+.tunnel_id:empty + .tunnel_cap {
+     margin-left: 12px !important;
+     display: inline-block;
+}
+
 .tunnel_peer {
      display: inline-block;
-     min-width: 56px;
+     min-width: 64px;
      text-align: right;
 }
 
+.tunnel_local {
+     font-size: 8pt;
+     background: rgba(187, 187, 255, 0.3);
+     background: #dfdfff;
+     border-radius: 2px;
+     text-align: center;
+     padding: 2px 0;
+     margin-left: -4px;
+     margin-right: 4px;
+}
+
 .tunnel_peer:empty {
      vertical-align: top;
 }
 
-.tunnel_peer:empty::before {
+#tunnel_defs td {
-     // TODO: Find a way of indicating that these entries represent the local router
+     padding: 4px;
-     content: "";
+}
-     display: inline-block;
+
-     height: 12px;
+#tunnel_defs td:nth-child(even) {
-     width: 18px;
+     text-align: right;
-     //background: rgba(192,192,192,0.35);
+     padding-right: 0;
-     margin-right: 6px;
+     width: 1%;
-     border-radius: 1px;
+}
-     text-align: center;
+
-     font-size: 7pt;
+#tunnel_defs td:nth-child(3) {
-     font-weight: bold;
+    border-right: 1px inset #ddf;
-     line-height: 12px;
+}
-     padding: 1px 2px;
+
+#tunnel_defs td:first-child, #tunnel_defs td:last-child {
+     font-size: 0;
+     width: 0;
+     padding: 0;
 }
 
 @media screen and (max-width: 1100px) {
@@ -6301,6 +6370,12 @@ tt a {
      text-align: center !important;
 }
 
+.tunnel_local {
+     margin-right: 5px;
+     margin-left: 2px;
+     padding: 2px 4px;
+}
+
 .tunnel_peer:empty {
      vertical-align: middle;
 }
@@ -6309,11 +6384,16 @@ tt a {
      margin: 1px 6px 1px 2px;
 }
 
+.tunnel_cap {
+     margin-left: 5px !important;
+}
+}
+
 @media screen and (min-width: 1500px) {
 .tunnel_cap {
      margin-left: 10px;
      padding: 0 1px;
-     min-width: 10px;
+     min-width: 14px;
 }
 
 .tunnel_id:empty {
@@ -6322,3 +6402,4 @@ tt a {
 }
 
 /* end tunnels */
+

installer/resources/themes/console/light/console_ar.css

@@ -24,7 +24,7 @@ td {
      text-align: right;
 }
 
-h1,h2,h3,h4 {
+h1, h2 ,h3, h4 {
      direction: rtl;
      text-align: right !important;
 }
@@ -38,7 +38,7 @@ h2, h3 {
 }
 
 h1 {
-     margin: 0 205px -15px 0;
+     margin: 0 212px -15px 0;
      padding: 20px 20px 20px 10px;
 }
 
@@ -161,10 +161,12 @@ div.tunnels td:first-child {
 
 div.messages li, .messages li:first-child, .error li:first-child, .error li {
      padding: 0 24px 0 0 !important;
+     font-size: 12pt;
 }
 
-.error li {
+.error li, .notice li {
      background-position: right center !important;
+     font-size: 12pt;
 }
 
 div.warning {
@@ -172,10 +174,16 @@ div.warning {
 }
 
 div.main {
-     margin: 10px 205px 0 0;
+     margin: 10px 212px 0 0;
      padding: 7px 20px 30px 20px;
 }
 
+div.sorry {
+     margin: 14px 212px 0 0;
+     padding: 20px 70px 20px 20px !important;
+     background: url(/themes/console/images/info/errortriangle.png) right 15px center no-repeat #fff;
+}
+
 div.main li {
      text-align: right;
 }
@@ -185,7 +193,7 @@ div.main li {
 }
 
 div.news {
-     margin: 10px 205px -12px 0;
+     margin: 10px 212px -12px 0;
      padding: 7px 20px 10px 20px;
      direction: ltr;
 }
@@ -388,6 +396,12 @@ div.themechoice, div.langselect {
      float: right;
 }
 
+.themelabel {
+     padding: 3px !important;
+     font-size: 11.5pt !important;
+     font-weight: bold;
+}
+
 .h3navlinks {
      float: left;
 }
@@ -847,9 +861,30 @@ table#bugreports td.infohelp {
      padding: 0 0 0 5px;
 }
 
+.routersummary .error::before, .routersummary .warn::before, .routersummary .testing::before, .routersummary .hidden::before,
+.routersummary .running::before, .routersummary .firewalled::before, .routersummary .vmcomm::before, .routersummary .clockskew::before {
+     padding-left: 6px !important;
+     padding-right: 0 !important;
+}
+
+#config_ui.main .themechoice .optbox {
+    margin-left: 0;
+    margin-right: -38px;
+}
+
+#config_ui.main .langselect .optbox, #config_ui.main .langselect .optbox:hover, #config_ui.main .langselect .optbox:focus {
+     margin-left: 0;
+     margin-right: -2px;
+}
+
 @media screen and (min-width: 1500px) {
-.main, .news, h1 {
+.main, .news, h1, .sorry {
      margin-right: 232px !important;
      margin-left: 0 !important;
 }
+
+#config_ui.main .themechoice .optbox {
+    margin-left: 0;
+    margin-right: -49px;
+}
 }

installer/resources/themes/console/light/console_big.css

@@ -24,54 +24,69 @@ b {
 
 button, input[type="submit"], input[type="reset"] {
     font-size: 10.5pt !important;
-    padding: 5px 5px 5px 22px !important;
+    padding: 3px 5px 3px 22px !important;
+    line-height: 140% !important;
+    display: inline-block;
+    letter-spacing: 0.1em;
+}
+
+button.reload[value="restart"], button.stop[value="shutdown"] {
+     padding-top: 5px !important;
+     padding-bottom: 5px !important;
 }
 
 button.control {
      padding: 12px 11px !important;
 }
 
-input.cancel {
-     padding: 5px 5px 6px 20px !important;
-}
-
 #sidebarconf button {
      padding: 3px !important;
 }
 
-div.routersummary table {
+.routersummary table {
     font-size: 8.5pt;
 }
 
-div.routersummary a {
+.routersummary a {
     font-size: 10pt !important;
 }
 
-div.routersummary h3, div.routersummary h4, div.routersummary p, div.routersummary h3 a, div.routersummary a {
+.routersummary h3, .routersummary h4, .routersummary p, .routersummary h3 a, .routersummary a {
      text-shadow: none !important;
 }
 
-div.routersummary h3 a {
+.routersummary h3 a {
      font-size: 11pt !important;
 }
 
-div.routersummary h4, div.routersummary h4 a {
+.routersummary h4, .routersummary h4 a {
      font-size: 10.5pt !important;
 }
 
-div.routersummary b {
+.routersummary b {
      font-size: 9.5pt;
      font-weight: normal !important;
 }
 
-div.routersummary a {
+.routersummary a {
      word-spacing: 0.1em !important;
      font-size: 10pt;
      line-height: 130%;
 }
 
-div.news {
+div.news, .newscontent p {
-     font-size: 9pt;
+     font-size: 10pt !important;
+}
+
+#newsStatus, #newsDisplay {
+     font-size: 10.5pt !important;
+     letter-spacing: 0.05em;
+}
+
+.applabel a {
+     font-size: 11pt !important;
+     display: inline-block;
+     vertical-align: middle;
 }
 
 input, input:visited, button {
@@ -86,13 +101,17 @@ th {
      font-size: 10pt;
 }
 
+.tunneldisplay th {
+     font-size: 10.5pt !important;
+}
+
 td, .mediumtags {
      font-size: 10pt !important;
      font-weight: normal !important;
 }
 
 .statusnotes {
-     font-size: 10pt;
+     font-size: 10.5pt !important;
      letter-spacing: 0.2em !important;
      text-shadow: none !important;
 }
@@ -121,6 +140,19 @@ code, tt, div {
      font-weight: normal;
 }
 
+.ui_lang {
+     font-size: 9pt !important;
+}
+
+#externali2cp td label + br {
+     display: none;
+}
+
+#externali2cp td label {
+     margin-right: 8px;
+     white-space: nowrap;
+}
+
 #config_service p.infohelp, #config_clients p.infohelp, #config_clients p.infowarn, #config_clients p#pluginconfig, #config_tunnels p.infohelp,
 p#enablefullstats {
      margin-top: 12px;
@@ -134,10 +166,82 @@ p#enablefullstats {
      font-size: 8.5pt !important;
 }
 
+#console p, #console li, #console b {
+     font-size: 10.5pt !important;
+     letter-spacing: 0.1em;
+     word-spacing: 0.1em;
+     line-height: 160%;
+}
+
+#console code, #console a {
+     letter-spacing: normal;
+     word-spacing: normal;
+     font-size: 10.5pt !important;
+}
+
+#console p a, #console li a {
+     background: rgba(220,220,255,0.5);
+     border-radius: 2px;
+     display: inline-block;
+     padding: 1px 4px;
+}
+
+#console .links {
+     margin-bottom: -15px;
+     background: rgba(220,220,255,0.3);
+     padding: 15px 10px;
+     border-radius: 4px;
+}
+
+#console .twocol {
+     margin-bottom: -20px !important;
+}
+
+#console li {
+     text-align: justify;
+     list-style: none;
+     margin-left: 20px;
+     margin-top: 10px;
+     margin-bottom: 10px;
+}
+
+#console .links li {
+     margin-left: 35px;
+}
+
+#console a:hover code {
+     color: #f60 !important;
+}
+}
+
+.tunnel_cap b, b.tunnel_cap {
+     color: #fff !important;
+     font-weight: bold !important;
+}
+
+.cells tt, #profilelist tt, tt a {
+     font-weight: bold !important;
+}
 
 @media screen and (min-width: 1500px) {
 .langbox {
      line-height: 115% !important;
 }
+
+#console p, #console li, #console code, #console a {
+     font-size: 11pt !important;
+}
+
+#console .twocol {
+     margin-bottom: -30px !important;
+}
+
+.ui_lang {
+     font-size: 10pt !important;
+}
+
+.themelabel {
+     font-size: 11pt !important;
+}
 }
 

installer/resources/themes/console/midnight/console.css

@@ -1156,7 +1156,7 @@ div.logo hr {
 }
 
 .routersummary {
-     width: 173px;
+     width: 184px;
      padding: 8px 10px 8px;
      text-align: center;
      border: 1px solid #443da0;
@@ -1173,9 +1173,9 @@ div.logo hr {
 .routersummary img[src*="i2plogo"] {
      opacity: 0.7;
      transition: ease-out opacity 0.3s, ease filter 0.3s;
-     margin-top: 1px;
+     margin-top: -1px;
-     margin-left: -3px;
+     margin-left: -5px;
-     width: 176px;
+     width: 190px;
      height: auto;
      filter: sepia(100%) hue-rotate(180deg) drop-shadow(0 0 1px #652787);
 }
@@ -1269,7 +1269,7 @@ div.logo hr {
      border: 0;
      text-align: center !important;
      margin: -4px -7px -5px -8px !important;
-     width: 189px !important;
+     width: 200px !important;
      overflow: hidden;
      font-size: 8pt;
      background-image: none !important;
@@ -1290,7 +1290,7 @@ div.logo hr {
 }
 
 #sb_localtunnels {
-     width: 189px !important;
+     width: 200px !important;
      border-collapse: separate;
      border-spacing: 0;
      margin-top: -5px !important;
@@ -1331,7 +1331,7 @@ div.logo hr {
 
 #sb_services a:link, #sb_internals a:link, #sb_advanced a:link {
      word-break: break-all;
-     max-width: 182px;
+     max-width: 190px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
@@ -1547,7 +1547,7 @@ div.tunnels {
 /* console error messages */
 
 .sorry {
-     margin: -1px 5px 10px 205px;
+     margin: -1px 5px 10px 215px;
      padding: 20px 20px 20px 75px;
      background: #020022;
      border: 1px solid #443da0;
@@ -1574,7 +1574,7 @@ div.sorry hr {
 /* end error msgs */
 
 .main {
-     margin: -1px 5px 5px 205px;
+     margin: -1px 5px 5px 215px;
      padding: 0 10px 1px 10px;
      text-align: left;
      color: #c9ceff;
@@ -1595,7 +1595,7 @@ div.sorry hr {
 }
 
 .news {
-     margin: -1px 5px 0 205px;
+     margin: -1px 5px 0 215px;
      padding: 6px 20px 5px;
      border: 1px solid #443da0;
      background: #000 url(images/earth.jpg) no-repeat scroll bottom right;
@@ -2293,7 +2293,7 @@ h1 {
      text-align: left;
      color: #c9ceff;
      padding: 13px 15px;
-     margin: 0 5px 0 205px !important;
+     margin: 0 5px 0 215px !important;
      font-size: 17pt;
      font-weight: bold;
      font-style: normal;
@@ -2434,7 +2434,7 @@ h2, h3, h4, .confignav {
      columns: 2 400px;
      column-gap: 0 !important;
      display: block;
-     margin: 5px 0;
+     margin: 5px 0 -5px;
 }
 
 div[lang="de"] .twocol, div[lang="pt"] .twocol, div[lang="es"] .twocol, div[lang="sv"] .twocol {
@@ -3013,7 +3013,7 @@ div.themechoice {
 }
 
 .themechoice .optbox {
-     min-width: 114px !important;
+     min-width: 120px !important;
      min-height: 80px !important;
      opacity: 0; /* hide the radio icon so we can use thumbnail img instead */
      margin-left: -33px;
@@ -3145,7 +3145,7 @@ td#themeselect {
      opacity: 0;
      outline: 1px dotted !important;
      min-height: 60px;
-     min-width: 111px !important;
+     min-width: 125px !important;
      margin: -5px 0 -30px -2px;
      vertical-align: text-bottom;
      text-align: center;
@@ -3155,7 +3155,7 @@ td#themeselect {
 .langselect img {
      border: 1px solid #241f69;
      margin-bottom: 0;
-     margin-left: -65px;
+     margin-left: -72px;
      margin-top: 7px !important;
      position: absolute;
 }
@@ -3165,7 +3165,7 @@ td#themeselect {
      height: 13px;
      border: 1px solid #652787;
      margin-top: 6px !important;
-     margin-left: -67px;
+     margin-left: -73px;
 }
 
 .langselect input[name="lang"]:hover + img {
@@ -3203,6 +3203,18 @@ td#themeselect {
      color: #652787;
 }
 
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+.langselect img {
+     margin-left: -8px !important;
+     margin-top: -16px !important;
+}
+
+.langselect input[name="lang"]:checked + img {
+     margin-left: -10px !important;
+     margin-top: -18px !important;
+}
+}
+
 /* end flag as radio icons */
 
 .ui_lang { /* lang text label */
@@ -4614,8 +4626,8 @@ font[color="#000099"] { /* info */
      text-align: left;
 }
 
-#profilelist td:first-child, #profilelist th:first-child {
+#profilelist td:first-child {
-     width: 52px;
+     width: 1%;
      text-align: right;
 }
 
@@ -4629,17 +4641,22 @@ font[color="#000099"] { /* info */
      text-align: center;
 }
 
+#profilelist td:nth-child(3) {
+     letter-spacing: 0.1em;
+}
+
 #profilelist th:last-child {
      text-align: center;
+     padding-right: 8px;
 }
 
 #profilelist td:last-child {
-     text-align: right;
+     text-align: center;
-     width: 60px;
+     width: 1%;
      white-space: nowrap;
 }
 
-#profilelist td[colspan="8"] { /* profile class separator */
+#profilelist td[colspan="9"] { /* profile class separator */
      background: #050044;
      padding: 1px;
      border: 1px inset #000;
@@ -5407,11 +5424,11 @@ span#distance {
      content: url(/themes/console/images/buttons/add_address.png);
 }
 
-a.viewfullentry:not(old) {
+a.viewfullentry:not(old), a[href^="viewprofile"]:not(old) {
      font-size: 0;
 }
 
-a.viewfullentry::after {
+a.viewfullentry::after, a[href^="viewprofile"]::after {
      content: url(/themes/console/images/buttons/fullview.png);
      vertical-align: text-top;
 }
@@ -6233,6 +6250,10 @@ table#i2pupdates td:first-child {
 .main#help h3, #faq h3 {
      font-size: 10.5pt !important;
 }
+
+.cells {
+     border: none;
+}
 }
 
 @media screen and (min-width: 1500px) {
@@ -6269,10 +6290,10 @@ h1 {
 }
 
 div.routersummary img[src$="i2plogo.png"] {
-     margin-left: -5px;
+     margin-left: -4px;
      transform: none;
-     width: 207px;
+     width: 204px;
-     margin-top: -3px;
+     margin-top: -2px;
 }
 
 .routersummary table[id^="sb_"], #sb_localtunnels {
@@ -6339,7 +6360,8 @@ h4#updateplugins {
 }
 
 #profilelist td:first-child, #profilelist th:first-child, #floodfills td:first-child, #floodfills th:first-child {
-     width: 56px !important;
+     width: 1% !important;
+     white-space: nowrap;
 }
 
 .sorry {
@@ -6577,10 +6599,10 @@ _:-ms-lang(x), table + .statusnotes {
 }
 
 .routersummary .error, .routersummary .warn, .routersummary .testing, .routersummary .hidden,
-.routersummary .running, .routersummary .firewalled, .routersummary .vmcomm, .routersummary .clockskew {
+.routersummary .running, .routersummary .firewalled, .routersummary .vmcomm, .routersummary .clockskew, .tunnelBuildStatus {
      display: inline-block;
      vertical-align: middle;
-     border: 1px solid #342f7f;
+     border: 1px solid rgba(52, 47, 127, 0.6);
      border-radius: 2px;
      padding: 6px 3px;
      width: 100%;
@@ -6662,3 +6684,192 @@ _:-ms-lang(x), table + .statusnotes {
      margin-top: -2px !important;
 }
 
+/* /tunnels */
+
+tt a {
+     letter-spacing: 0.07em;
+}
+
+.tunnel_cap {
+     background: rgba(0,0,140,0.4);
+     color: #c9ceff;
+     border: 1px solid rgba(0,0,64,0.2);
+     border-radius: 2px;
+     min-width: 12px;
+     padding: 0 2px;
+     display:inline-block;
+     margin: 1px 2px 1px 8px;
+     text-align: center !important;
+     text-shadow: 0 1px 1px #000;
+}
+
+.tunnel_cap:empty {
+     border: none;
+}
+
+.tunnel_id {
+     display: inline-block;
+     min-width: 78px;
+     text-align: right;
+}
+
+.tunnel_id:empty {
+     min-width: 0;
+}
+
+.tunnel_id:empty + .tunnel_cap {
+     margin-left: 12px !important;
+     display: inline-block;
+}
+
+.tunnel_peer {
+     display: inline-block;
+     min-width: 56px;
+     text-align: right;
+}
+
+.tunnel_local {
+     font-size: 8pt;
+     background: rgba(0,0,96,0.3);
+     border-radius: 2px;
+     text-align: center;
+     padding: 2px 0;
+     margin-left: -4px;
+     margin-right: 4px;
+}
+
+.tunnel_peer:empty {
+     vertical-align: top;
+}
+
+#tunnel_defs {
+     margin-top: -1px;
+     margin-bottom: 10px;
+}
+
+@media screen and (max-width: 1100px) {
+.tunnel_id, .tunnel_peer {
+     min-width: 0 !important;
+     text-align: center !important;
+}
+
+.tunnel_local {
+     margin-right: 5px;
+     margin-left: 2px;
+     padding: 2px 4px;
+}
+
+.tunnel_peer:empty {
+     vertical-align: middle;
+}
+
+.tunnel_peer:empty::before {
+     margin: 1px 6px 1px 2px;
+}
+
+.tunnel_cap {
+     margin-left: 5px !important;
+}
+}
+
+@media screen and (min-width: 1500px) {
+.tunnel_cap {
+     margin-left: 10px;
+     padding: 0 1px;
+     min-width: 14px;
+}
+
+.tunnel_id:empty {
+     margin-right: -10px;
+}
+}
+
+/* end tunnels */
+
+/* /peers */
+
+#ntcpconnections th:nth-child(6), #ntcpconnections th:nth-child(7), #ntcpconnections th:nth-child(8), #ntcpconnections th:nth-child(9), #ntcpconnections th:nth-child(10),
+#ntcpconnections td:nth-child(6), #ntcpconnections td:nth-child(7), #ntcpconnections td:nth-child(8), #ntcpconnections td:nth-child(9), #ntcpconnections td:nth-child(10),
+#udpconnections td:nth-child(6), #udpconnections td:nth-child(7), #udpconnections td:nth-child(9), #udpconnections td:nth-child(10), #udpconnections td:nth-child(11),
+#udpconnections td:nth-child(13), #udpconnections td:nth-child(14), #udpconnections td:nth-child(15), #udpconnections td:nth-child(16) {
+     text-align: right;
+     white-space: nowrap;
+}
+
+#ntcpconnections .tablefooter td:nth-child(3), #ntcpconnections .tablefooter td:nth-child(4), #ntcpconnections .tablefooter td:nth-child(5), #ntcpconnections .tablefooter td:nth-child(6),
+#udpconnections .tablefooter td:nth-child(3), #udpconnections .tablefooter td:nth-child(4), #udpconnections .tablefooter td:nth-child(7), #udpconnections .tablefooter td:nth-child(8),
+#udpconnections .tablefooter td:nth-child(10), #udpconnections .tablefooter td:nth-child(11), #udpconnections .tablefooter td:nth-child(12), #udpconnections .tablefooter td:nth-child(13) {
+     text-align: right;
+}
+
+#udpconnections .tablefooter td:nth-child(9) {
+     text-align: center !important;
+}
+
+#ntcpconnections td:nth-child(4), #ntcpconnections td:nth-child(5), #udpconnections td:nth-child(4),
+#udpconnections td:nth-child(5), #udpconnections td:nth-child(8), #udpconnections td:nth-child(12) {
+     white-space: nowrap;
+}
+
+#udpconnections .tablefooter td, #ntcpconnections .tablefooter td {
+     padding-left: 5px;
+     padding-right: 5px;
+}
+
+#ntcpconnections th:nth-child(6), #ntcpconnections th:nth-child(7), #ntcpconnections th:nth-child(8), #ntcpconnections th:nth-child(9), #ntcpconnections th:nth-child(10) {
+     text-align: right;
+}
+
+#udpconnections th:nth-child(6), #udpconnections th:nth-child(7), #udpconnections th:nth-child(n+9) {
+     text-align: right;
+}
+
+#udpconnections th:nth-child(12) {
+     text-align: center;
+}
+
+.peersort {
+     text-align: center;
+     display: inline-block;
+}
+
+.right {
+     text-align: right;
+     margin: 0 1px;
+     display: inline-block;
+     width: 40%
+}
+
+.left {
+     text-align: left;
+     margin: 0 1px;
+     display: inline-block;
+     width: 40%
+}
+
+.peeripv6:empty {
+     padding: 0;
+     width: 0;
+}
+
+.cwnd .left, .cwnd .right {
+     width: auto;
+}
+
+#udpconnections th:nth-child(n+13), #udpconnections .tablefooter th:nth-child(n+10),
+#udpconnections td:nth-child(n+13), #udpconnections .tablefooter td:nth-child(n+10) {
+     padding-right: 1% !important;
+}
+
+#peerdefs {
+     line-height: 140%;
+}
+
+.peer_arrow {
+     display: inline-block;
+     width: 18px;
+     text-align: center;
+     margin-right: 3px;
+}
+
+/* end peers */

installer/resources/themes/console/midnight/console_ar.css

@@ -1,6 +1,5 @@
-/* I2P Theme: Camo aka Dark - Arabic override */
+/* I2P Theme: Midnight - Arabic override */
-/* Description: Military Grade. */
+/* Description: Dark blue with chrome highlights */
-/* Comment: Thanks to Florian Kuhlmann for the hatface images. [http://www.flickr.com/photos/floriankuhlmann/] */
 /* Author: dr|z3d */
 
 body {
@@ -39,7 +38,7 @@ h1 {
      margin: 0 205px 0 5px !important;
 }
 
-h1,h2,h3,h4 {
+h1, h2, h3, h4 {
      direction: rtl;
      text-align: right;
 }
@@ -48,30 +47,35 @@ button.search {
      margin-right: 30px;
 }
 
-div.routersummary img[src$="i2plogo.png"] {
+.routersummary img[src$="i2plogo.png"] {
-     width: 173px;
+     width: 190px;
-     margin: 0 -2px 0 0;
+     margin: -1px -5px 0 0;
 }
 
-div.routersummary h3, div.routersummary h4, .routersummary a, .routersummary b {
+.routersummary h3, .routersummary h4, .routersummary a, .routersummary b {
      text-align: center;
      font-weight: normal;
 }
 
-div.routersummary h3, div.routersummary h4 {
+.routersummary h3, .routersummary h3 a {
-     font-size: 10pt;
+     font-weight: bold !important;
+     padding: 3px 2px !important;
 }
 
-div.routersummary td {
+.routersummary h3, .routersummary h4 {
+     font-size: 11pt;
+}
+
+.routersummary td {
      text-align: right;
 }
 
-div.routersummary td:last-child {
+.routersummary td:last-child {
      text-align: left;
      margin-left: 3px;
 }
 
-div.routersummary td:first-child {
+.routersummary td:first-child {
      text-align: right;
 }
 
@@ -87,6 +91,10 @@ div.routersummary td:first-child {
      text-align: left;
 }
 
+.routersummary td a, .routersummary td:first-child {
+     font-size: 10pt;
+}
+
 div.tunnels {
      padding: -3px 0 !important;
 }
@@ -108,7 +116,7 @@ form {
     text-align: right;
 }
 
-div.routersummary form {
+.routersummary form {
     text-align: center;
 }
 
@@ -135,11 +143,27 @@ span.newtab {
 /* lang selection */
 
 .langselect img {
-     margin-right: -61px;
+     margin-left: 0;
+     margin-right: -70px;
 }
 
 .langselect .optbox:checked + img {
-     margin-right: -63px;
+     margin-right: -71px;
+     margin-left: 0;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+.langselect img {
+     margin-left: 0;
+     margin-right: -8px;
+     margin-top: -18px !important;
+}
+
+.langselect input[name="lang"]:checked + img {
+     margin-right: -10px;
+     margin-left: 0;
+     margin-top: -18px !important;
+}
 }
 
 /* theme selection */
@@ -157,7 +181,8 @@ span.newtab {
      outline: 1px dotted #f00;
      position: absolute;
      padding: 2px;
-     margin-right: -27px;
+     margin-right: -33px;
+     margin-left: 0;
      min-height: 78px !important;
 }
 
@@ -170,6 +195,8 @@ span.newtab {
      padding: 0 !important;
 }
 
+/* end theme selection */
+
 h3#iptransport a, th#upnpconfig a, h3#bwlimiter a, #config_stats h3 a, #config_logging h3 a, h3#graphdisplay a, #logs h3 a, h3#advancedconfig a {
      float: left;
 }
@@ -340,7 +367,7 @@ td.optionsave {
 }
 
 #clientconfig th:first-child, #clientconfig td:first-child, #loggingoptions td:first-child, #i2pupdates td:first-child, #tunnelconfig td:first-child,
-table#i2pupdates input[name*="URL"], table#i2pupdates textarea, #addkeyring td:first-child, #reseedconfig td:first-child {
+table#i2pupdates textarea, #addkeyring td:first-child, #reseedconfig td:first-child {
      text-align: left !important;
 }
 
@@ -367,6 +394,21 @@ p#helptranslate, #floodfillconfig tr:first-child .infohelp {
      background-position: right 12px center !important;
 }
 
+textarea[name="trustedKeys"] {
+     direction: ltr !important;
+}
+
+input[type="submit"], input[type="reset"], input[type="submit"]:hover, input[type="reset"]:hover,
+input[type="submit"]:focus, input[type="reset"]:focus, input[type="submit"]:active, input[type="reset"]:active {
+     background-position: right 6px center !important;
+     padding: 5px 23px 5px 7px !important;
+}
+
+select, select:hover, select:focus, select:active {
+     background-position: left center !important;
+     padding: 4px 4px 4px 16px !important;
+}
+
 #consolepass input[name="nofilter_pw"], #externali2cp input[name="nofilter_pw"], #consolepass input[name="nofilter_pw"]:focus, #externali2cp input[name="nofilter_pw"]:focus,
 #consolepass input[name="name"], #externali2cp input[name="user"], #consolepass input[name="name"]:focus, #externali2cp input[name="user"]:focus {
      background-position: right 3px center, center center !important;
@@ -403,22 +445,31 @@ div[lang="ar"] ul, div[lang="ar"] p {
      margin: 12px 0 -2px;
 }
 
+h4.app, h4.app2 {
+     text-align: right;
+}
+
 /* responsive layout */
 
+@media screen and (max-width: 1500px) {
+body {
+     margin: 5px 10px 0 0;
+}
+}
+
 @media screen and (min-width: 1500px) {
 .main, .news, h1 {
      margin-right: 232px !important;
      margin-left: 0 !important;
 }
 
-div.routersummaryouter {
+.routersummaryouter {
      margin-right: 27px !important;
 }
 
-
+.routersummary img[src$="i2plogo.png"] {
-div.routersummary img[src$="i2plogo.png"] {
+     width: 204px !important;
-     width: 196px;
+     margin: -2px -4px 0 0 !important;
-     margin: -2px 0 0;
 }
 
 .routersummary h4 {
@@ -432,6 +483,36 @@ div.routersummary img[src$="i2plogo.png"] {
 div[lang="ar"], div[lang="ar"] code, div[lang="ar"] b {
      font-size: 11pt !important;
 }
+
+.langselect .optbox {
+      margin-left: 0;
+      margin-right: -2px;
+}
+
+.langselect img {
+     margin-left: 0;
+     margin-right: -78px;
+}
+
+.langselect input[name="lang"]:checked + img {
+     margin-left: 0;
+     margin-right: -79px;
+}
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1500px) {
+.langselect img {
+     margin-left: 0;
+     margin-right: -8px;
+     margin-top: -14px !important;
+}
+
+.langselect input[name="lang"]:checked + img {
+     margin-right: -10px;
+     margin-left: 0;
+     margin-top: -15px !important;
+}
 }
 
 /* end responsive layout */
+

installer/resources/themes/console/midnight/console_big.css

@@ -41,12 +41,15 @@ div.tunnels table {
      font-size: 13pt !important;
 }
 
+/* end sidepanel */
+
 #newsDisplay, #newsStatus {
      font-size: 11pt !important;
 }
 
 .langbox {
      margin-top: 4px !important;
+     margin-right: 5px !important;
 }
 
 .applabel, .themechoice, .langselect {
@@ -70,10 +73,16 @@ div.tunnels table {
      padding: 4px 2px;
 }
 
-.applabel a, .applabel a:hover, .ui_lang, .themelabel {
+.applabel a, .applabel a:hover, .themelabel {
      font-size: 12pt !important;
 }
 
+/* configui */
+
+.ui_lang {
+     font-size: 10pt;
+}
+
 .themechoice .optbox {
      min-width: 156px !important;
      margin-left: -50px !important;
@@ -87,6 +96,20 @@ div.tunnels table {
      margin-left: -87px !important;
 }
 
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+.langselect img {
+     margin-left: -8px !important;
+     margin-top: -18px !important;
+}
+
+.langselect input[name="lang"]:checked + img {
+     margin-left: -10px !important;
+     margin-top: -18px !important;
+}
+}
+
+/* end configui */
+
 label, select, select option, #configstats th b, .infohelp, .infowarn {
      font-size: 11pt !important;
 }
@@ -104,11 +127,16 @@ label, select, select option, #configstats th b, .infohelp, .infowarn {
      margin-right: -4px !important;
 }
 
+/* welcome */
+
+div[lang="zh"], div[lang="zh"] a, ul li, div[lang="zh"] p {
+     letter-spacing: 0.1em !important;
+     word-spacing: 0.1em !important;
+     line-height: 160% !important;
+}
+
 div[lang="zh"], div[lang="zh"] a {
      font-size: 11pt !important;
-     line-height: 150% !important;
-     letter-spacing: 0.05em;
-     word-spacing: 0.1em;
 }
 
 div[lang="zh"] p {
@@ -120,6 +148,22 @@ ul.links li {
      text-align: justify;
 }
 
+.twocol {
+     margin-top: 15px !important;
+     margin-bottom: -15px !important;
+}
+
+#externali2cp td label + br {
+     display: none;
+}
+
+#externali2cp td label {
+     margin-right: 8px;
+     white-space: nowrap;
+}
+
+/* end welcome */
+
 /* global overrides */
 
 @media screen and (min-width: 0) {
@@ -162,6 +206,11 @@ p, div[id^="config_"] th {
 input[type="submit"], input[type="reset"] {
      font-size: 12pt !important;
      font-weight: normal !important;
+     line-height: 140% !important;
+     display: inline-block;
+     letter-spacing: 0.05em;
+     padding-top: 2px !important;
+     padding-bottom: 2px !important;
 }
 }
 
@@ -185,12 +234,27 @@ input[type="text"], input[type="password"], textarea {
 }
 }
 
-
 @media screen and (min-width: 1500px) {
 .langbox {
      margin-top: 6px !important;
      line-height: 16px;
 }
+
+.langselect input[name="lang"]:checked + img {
+    margin-left: -88px !important;
+}
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1500px) {
+.langselect img {
+     margin-left: -8px !important;
+     margin-top: -18px !important;
+}
+
+.langselect input[name="lang"]:checked + img {
+     margin-left: -10px !important;
+     margin-top: -18px !important;
+}
 }
 
 /* end responsive layout */

installer/resources/themes/susidns/light/susidns.css

@@ -319,6 +319,21 @@ p, #helpconfig {
      border-radius: 0;
 }
 
+#helpconfig ul {
+     -moz-columns: 2 400px;
+     -webkit-columns: 2 400px;
+     columns: 2 400px;
+     -moz-column-gap: 50px;
+     -webkit-column-gap: 50px;
+     column-gap: 50px;
+}
+
+#helpconfig ul li {
+     break-inside: avoid;
+     page-break-inside: avoid;
+     -webkit-break-inside: avoid;
+}
+
 span.addrhlpr {
      font-size: 9pt;
 }