Theme fixes

Console: - Enhance presentation of show/hide news links on home page - Fix some issues with Arabic CSS (light/dark) - Further tweaks to graphs display and fixes for borderless single graphs in midnight/dark themes - Fix minor coloring issues with light theme post-rework - Misc theme fixes I2PSnark: - Move </center> tag in fileinfo view that prevented sticky navbar from working - ubergine: - Alternative panel tabs for embedded view - Tighten .snarkTorrents thead/tfoot spacing - Tweak embedded navbar coloring - Reduce height of download bars
2017-07-28 18:00:53 +00:00
parent ac75327a78
commit 5dd5a99de5
13 changed files with 496 additions and 136 deletions
--- a/apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java
+++ b/apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java
@@ -2761,7 +2761,7 @@ public class I2PSnarkServlet extends BasicServlet {
    private static final String TABLE_HEADER = "<table border=\"0\" class=\"snarkTorrents\" width=\"100%\" >\n" +
                                               "<thead>\n";

-    private static final String FOOTER = "</div></center></body></html>";
+    private static final String FOOTER = "</div></center>\n</body>\n</html>";


    /**
@@ -2870,7 +2870,7 @@ public class I2PSnarkServlet extends BasicServlet {
                               r.isDirectory();

        StringBuilder buf=new StringBuilder(4096);
-        buf.append(DOCTYPE).append("<HTML><HEAD><TITLE>");
+        buf.append(DOCTYPE).append("<html><head><title>");
        if (title.endsWith("/"))
            title = title.substring(0, title.length() - 1);
        final String directory = title;
@@ -2878,13 +2878,13 @@ public class I2PSnarkServlet extends BasicServlet {
        final boolean isTopLevel = dirSlash <= 0;
        title = _t("Torrent") + ": " + DataHelper.escapeHTML(title);
        buf.append(title);
-        buf.append("</TITLE>\n").append(HEADER_A).append(_themePath).append(HEADER_B)
+        buf.append("</title>\n").append(HEADER_A).append(_themePath).append(HEADER_B)
           // hide javascript-dependent buttons when js is unavailable
           .append("<noscript><style type=\"text/css\">.script {display: none;}</style></noscript>")
           .append("<link rel=\"shortcut icon\" href=\"" + _themePath + "favicon.ico\">\n");
        if (showPriority)
            buf.append("<script src=\"").append(_contextPath).append(WARBASE + "js/folder.js\" type=\"text/javascript\"></script>\n");
-        buf.append("</HEAD><BODY");
+        buf.append("</head><body");
        if (showPriority)
            buf.append(" onload=\"setupbuttons()\"");
        buf.append(">\n<center><div class=\"snarknavbar\"><a href=\"").append(_contextPath).append("/\" title=\"Torrents\"");
@@ -2893,7 +2893,7 @@ public class I2PSnarkServlet extends BasicServlet {
            buf.append(_t("I2PSnark"));
        else
            buf.append(_contextName);
-        buf.append("</a></div></center>\n");
+        buf.append("</a></div>\n");

        if (parent)  // always true
            buf.append("<div class=\"page\">\n<div class=\"mainsection\">");
@@ -3196,7 +3196,7 @@ public class I2PSnarkServlet extends BasicServlet {
               .append("</th></tr><tr><td><b>").append(_t("Resource")).append(":</b></td><td>").append(r.toString())
               .append("</td></tr><tr><td><b>").append(_t("Base")).append(":</b></td><td>").append(base)
               .append("</td></tr><tr><td><b>").append(_t("Torrent")).append(":</b></td><td>").append(torrentName)
-               .append("</td></tr></table></div></div></BODY></HTML>");
+               .append("</td></tr></table></div></div></center>\n</body>\n</html>");
            return buf.toString();
        }

@@ -3211,7 +3211,7 @@ public class I2PSnarkServlet extends BasicServlet {
                displayComments(snark, er, ec, esc, buf);
            if (includeForm)
                buf.append("</form>");
-            buf.append("</div></div></BODY></HTML>");
+            buf.append("</div></div>\n</body>\n</html>");
            return buf.toString();
        }

@@ -3452,7 +3452,7 @@ public class I2PSnarkServlet extends BasicServlet {
        // for stop/start/check
        if (includeForm)
            buf.append("</form>");
-        buf.append("</div></div></BODY></HTML>\n");
+        buf.append("</div></div>\n</body>\n</html>\n");

        return buf.toString();
    }
--- a/history.txt
+++ b/history.txt
@@ -1,3 +1,20 @@
+2017-07-28 str4d
+ * Console:
+   - Enhance presentation of show/hide news links on home page
+   - Fix some issues with Arabic CSS (light/dark)
+   - Further tweaks to graphs display and fixes for borderless single graphs
+     in midnight/dark themes
+   - Fix minor coloring issues with light theme post-rework
+   - Misc theme fixes
+ * I2PSnark:
+   - Move </center> tag in fileinfo view that prevented sticky navbar from
+     working
+   - ubergine:
+     - Alternative panel tabs for embedded view
+     - Tighten .snarkTorrents thead/tfoot spacing
+     - Tweak embedded navbar coloring
+     - Reduce height of download bars
+
 2017-07-26 str4d
 * Themes:
   - 'light' theme (console & apps):
--- a/installer/resources/themes/console/dark/console.css
+++ b/installer/resources/themes/console/dark/console.css
@@ -287,7 +287,7 @@ div.warning {
 .routersummary img[src$="i2plogo.png"] {
     opacity: 0.9;
     transition: ease filter 0.3s, ease opacity 0.3s;
-     margin-top: -2px;
+     margin-top: -1px;
     margin-left: -4px;
     width: 193px;
     height: auto;
@@ -466,7 +466,7 @@ div.warning {
 }

 #sb_internals a, #sb_services a, #sb_advanced a {
-     padding: 1px 2px;
+     padding: 1px 3px;
     display: inline-block;
     vertical-align: middle;
 }
@@ -900,6 +900,8 @@ div.news hr {

 #newsStatus {
     float: left;
+     padding-top: 3px;
+     padding-bottom: 1px;
 }

 #newsDisplay {
@@ -907,6 +909,35 @@ div.news hr {
     margin-left: 10px;
 }

+#news #newsDisplay, #graphopts {
+     color: transparent;
+}
+
+#newsStatus, #news #newsDisplay, #news #newsDisplay a {
+     display: inline-block;
+}
+
+#news #newsDisplay a, #graphopts a {
+     border: 1px solid #010;
+     margin: 0 -2px;
+     padding: 1px 10px;
+     background: #020;
+     background: rgba(0,48,0,0.6);
+     border-radius: 15px;
+     filter: drop-shadow(0 0 1px rgba(0,16,0,0.4));
+}
+
+#news #newsDisplay a:hover, #news #newsDisplay a:focus, #graphopts a:hover, #graphopts a:focus {
+     background: #030;
+     background: linear-gradient(to bottom, #030 50%, #010 50%);
+     border: 1px solid #020;
+}
+
+#news #newsDisplay a:active, #graphopts a:active {
+     background: #020;
+     box-shadow: inset 2px 2px 2px #000;
+}
+
 .news #newsDisplay, .news #newsStatus {
     margin-top: 3px !important;
     display: inline-block;
@@ -1038,7 +1069,7 @@ div.messages li {

 div.widepanel h3 {
     text-align: left !important;
-     padding: 6px 10px;
+     padding: 8px 10px;
     text-transform: uppercase;
     font-size: 10.5pt;
     letter-spacing: 0.08em;
@@ -1055,8 +1086,13 @@ div.widepanel h3 {

 /* graphs */

+#graphs {
+     padding-left: 10px;
+     padding-right: 10px;
+}
+
 #graphs .messages {
-     margin-top: 15px;
+     margin: 15px 5px -5px;
 }

 .graphspanel {
@@ -1077,7 +1113,7 @@ div.widepanel h3 {
 .graphspanel a img {
     border: 1px solid #494;
     padding: 3px;
-     margin: 5px;
+     margin: 5px 3px;
     text-align: center !important;
     opacity: 0.9;
     transition: ease all 0.3s;
@@ -1086,7 +1122,6 @@ div.widepanel h3 {
 .graphspanel a img:hover {
     border: 1px solid #f60;
     padding: 3px;
-     margin: 5px;
     text-align: center !important;
     opacity: 1;
     transition: ease all 0.3s;
@@ -1109,8 +1144,12 @@ div.widepanel h3 {
     mix-blend-mode: lighten;
 }

+.graphspanel img:not(old) {
+     border: 1px solid #fcf;
+}
+
 .graphspanel a img:not(old) {
-     border: 1px solid #bb66bb;
+     border: 1px solid #b6b;
 }

 .graphspanel a img:hover:not(old) {
@@ -1125,11 +1164,22 @@ div.widepanel h3 {
     padding: 10px 10px 15px;
 }

-p#graphopts {
+#graphopts {
     margin: 30px 0 5px !important;
+     line-height: 220%;
 }

-p#graphopts + p {
+#graphopts a {
+     filter: none;
+     border: 1px solid #030;
+     padding: 2px 10px;
+}
+
+#graphopts a:empty {
+     display: none;
+}
+
+#graphopts + p {
     display: none;
 }

@@ -1452,7 +1502,7 @@ code {
     color: #dd0;
 }

-a:link, h2 a:link {
+a:link, h2 a:link, #graphopts a:visited {
     color: #494;
     text-decoration: none;
     font-weight: bold;
@@ -4112,7 +4162,7 @@ table[id$="logs"] tr:nth-child(even){
 }

 table[id$="logs"] ul {
-     margin: -5px 12px -5px -18px !important;
+     margin: -6px 12px -5px -18px !important;
 }

 #wrapperlogs {
@@ -4143,7 +4193,7 @@ table[id$="logs"] ul {
 #logs li {
     list-style: none;
     font: bold 8pt "Droid Sans Mono",  "Lucida Console", "DejaVu Sans Mono", monospace;
-     line-height: 130%;
+     line-height: 115%;
     text-align: left;
     display: inline-block;
     width: 100%;
@@ -4153,15 +4203,15 @@ table[id$="logs"] ul {
 #criticallogs li {
     width: auto;
     width: calc(100% - 15px);
-     margin: 2px -10px 0 7px;
+     margin: 2px -10px 2px 7px;
 }

 #logs li::after {
     content: "";
     display: block;
-     border-top: 1px dotted #030;
+     border-top: 1px dashed #001000;
     width: 100%;
-     margin: 5px 0 -3px;
+     margin: 3px 0 -6px;
 }

 #logs li:last-child::after {
@@ -5896,10 +5946,11 @@ p#profiles_overview {

 .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: 0 2px;
+     margin-right: 2px;
     vertical-align: middle;
     display: inline-block;
     filter: drop-shadow(0 0 1px rgba(192,192,192,0.5));
+     transform: scale(0.8);
 }

 .routersummary .error::before, .routersummary .clockskew::before {
@@ -5916,7 +5967,7 @@ p#profiles_overview {

 .routersummary .hidden::before {
     content: url(/themes/console/images/info/network_status/network_hidden.png);
-     padding: 0 3px;
+     margin-right: 3px;
 }

 .routersummary .running::before {
@@ -5926,7 +5977,7 @@ p#profiles_overview {
 .routersummary .firewalled::before {
     content: url(/themes/console/images/info/network_status/network_firewalled.png);
     filter: drop-shadow(0 1px 1px rgba(255,120,120,0.8));
-     padding: 0 4px;
+     margin-right: 4px;
     opacity: 0.7;
 }

@@ -6460,10 +6511,6 @@ b.netdb_transport {
     margin-top: -1px;
 }

-.debug_outboundsessions {
-     margin-top: -2px;
-}
-
 #debug h2 + h3, .buckets {
     margin-top: -13px;
 }
@@ -6503,7 +6550,7 @@ b.netdb_transport {
 }

 #debug h3.debug_outboundsessions {
-     margin-top: -6px !important;
+     margin-top: -2px !important;
     background: url(/themes/console/images/outbound.png) 6px center no-repeat, linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000 56%) !important;
 }

--- a/installer/resources/themes/console/dark/console_ar.css
+++ b/installer/resources/themes/console/dark/console_ar.css
@@ -42,7 +42,6 @@ div.news {

 div.main {
     margin: -1px 205px 5px 5px;
-     background: url("images/scarface.jpg") no-repeat scroll left bottom #000000 !important;
 }

 h1 {
@@ -54,6 +53,15 @@ h1, h2, h3, h4 {
     text-align: right;
 }

+#debug h2 {
+     background-position: 8px center !important;
+}
+
+#debug h3.debug_inboundsessions, #debug h3.debug_outboundsessions {
+     background-position: right 5px center !important;
+     padding-right: 26px !important;
+}
+
 h3, h3.welcome {
     border-width: 1px 5px 1px 1px;
 }
@@ -70,6 +78,11 @@ button.search {
     margin-right: 30px;
 }

+input.search, input.search:focus {
+     padding: 4px 24px 4px 3px !important;
+     background-position: right 4px center !important;
+}
+
 .routersummary img[src$="i2plogo.png"] {
     margin-top: -2px !important;
     margin-left: 0 !important;
@@ -81,7 +94,11 @@ div.routersummary h3, div.routersummary h4, .routersummary a, .routersummary b {
     font-weight: normal;
 }

-div.routersummary h3, div.routersummary h4 {
+div.routersummary h3 {
+     font-size: 11pt;
+}
+
+div.routersummary h4 {
     font-size: 10pt;
 }

@@ -107,8 +124,9 @@ div.routersummary td:last-child {
 }

 #sb_localtunnels a {
-     display: inline-block;
-     width: 100%:
+     display: inline;
+     margin-right: 2px;
+     font-size: 9pt;
 }

 #sb_localtunnels td:nth-child(2) {
@@ -515,7 +533,7 @@ a.viewfullentry::after, a[href^="viewprofile"]::after {
 }

 .main#console .twocol {
-     margin: 5px 35px 5px 0 !important;
+     margin: 15px 35px 5px 0 !important;
     background: rgba(0, 32, 0, 0.5);
     border-radius: 3px;
     padding-top: 10px;
--- a/installer/resources/themes/console/light/console.css
+++ b/installer/resources/themes/console/light/console.css
@@ -1305,7 +1305,34 @@ div.newscontent p {
 }

 #newsStatus, .news #newsDisplay {
-     padding-top: 3px !important;
+     padding-top: 6px !important;
+     padding-bottom: 3px !important;
+}
+
+.news #newsdisplay, #graphopts {
+     color: transparent;
+}
+
+.news #newsdisplay a, #graphopts a {
+     border: 1px solid #8b8edf;
+     padding: 2px 10px;
+     border-radius: 15px;
+     background: #f8f8ff;
+     background: rgba(248,248,255,0.3);
+     margin-left: -3px;
+     box-shadow: 0 0 0 1px #ddf;
+     box-shadow: 0 0 0 1px rgba(220,220,255,0.6);
+}
+
+.news #newsdisplay a:hover, .news #newsdisplay a:focus, #graphopts a:hover, #graphopts a:focus {
+     border: 1px solid #7778bf;
+     background: #e2e2ff;
+     background: linear-gradient(to bottom, #f8f8ff 50%, #e2e2ff 50%);
+     box-shadow: 0 0 0 1px rgba(220,220,255,0.6), inset 0 0 0 1px #fff;
+}
+
+.news #newsdisplay a:active, #graphopts a:active {
+     box-shadow: inset 2px 2px 3px #335;
 }

 .newsentry + hr + #newsStatus, .newsentry + hr + #newsStatus + #newsDisplay {
@@ -1720,18 +1747,30 @@ p#tunnelconfig {
 }

 .graphspanel img {
-     padding: 2px;
-     margin: 6px;
+     padding: 1px;
+     margin: 6px 5px;
     text-align: center !important;
     vertical-align: top !important;
-     background: #41465f;
-     box-shadow: inset 0 0 0 1px #ccf;
+     background: #fff;
+     border: 1px solid #6b6c8f;
+     box-shadow: 0 0 0 1px #ccc;
     max-width: 98%;
 }

+.graphspanel a img {
+     box-shadow: 0 0 1px #ccf;
+}
+
 .graphspanel a img:hover {
-     box-shadow: inset 0 0 2px 1px #f60;
+     box-shadow: inset 0 0 1px 1px #f60;
+     filter: none !important;
     cursor: url(/themes/console/images/cursor_zoom.png), pointer;
+     mix-blend-mode: multiply;
+}
+
+.graphspanel a img:active {
+     box-shadow: inset 0 0 1px 1px #f90;
+     border: 1px solid #f90;
 }

 .graphspanel form {
@@ -1746,7 +1785,17 @@ p#tunnelconfig {
     text-align: center;
     margin-top: 20px;
     margin-bottom: 15px;
+     padding: 3px 0 5px;
     text-transform: capitalize;
+     line-height: 220%;
+}
+
+#graphopts a {
+     margin: 0 -2px !important;
+}
+
+#graphopts a:empty {
+     display: none;
 }

 #graphopts + p {
@@ -1848,8 +1897,8 @@ h3#graphdisplay {
     background-size: 28px 28px, auto 100%, 100% 100% !important;
 }

-.main#graphs .messages { /* "graphing not supported" error */
-     margin-bottom: 20px;
+.main#graphs .messages {
+     margin-bottom: -5px;
 }

 .main#events .messages {
@@ -2348,15 +2397,16 @@ table.search {
     border-collapse: separate;
     border-spacing: 0;
     border-radius: 0 0 2px 2px;
-     border: 1px solid #7778bf;
-     background: none;
+     border: 1px solid #595a8f;
+     border-top: 1px solid #447;
+     background: #fafaff !important;
     background: linear-gradient(to bottom, #fafaff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px) !important;
     padding: 8px;
     width: 70%;
     margin-left:auto;
     margin-right:auto;
     margin-top: -19px;
-     box-shadow: 0 1px 1px 1px rgba(210, 210, 255, 0.3);
+     box-shadow: 0 1px 1px 1px rgba(210, 210, 255, 0.3), inset 0 0 0 1px #bbf;
 }

 .search tr {
@@ -2528,7 +2578,7 @@ button:hover, button:focus, button:active, select:hover, select:focus, select:ac
     text-shadow: none;
 }

-a:link {
+a:link, #graphopts a:visited {
     color: #3b6bbf;
     text-decoration: none;
     font-weight: bold;
@@ -4923,7 +4973,7 @@ a.viewfullentry:hover {
     text-transform: none;
     letter-spacing: normal;
     word-spacing: normal;
-     background: linear-gradient(to bottom, #fff 50%, rgba(255, 255, 255, 0.6) 50%, rgba(240, 240, 240, 0.4)) #eef !important;
+     background: linear-gradient(to bottom, #fcfcff 50%, rgba(255, 255, 255, 0.6) 50%, rgba(240, 240, 255, 0.4)) !important;
     background-size: 100% 100%;
     padding: 8px 5px;
     font-size: 9pt;
@@ -5357,7 +5407,7 @@ ul#banlist {
 #profiles #banlist {
    border: none;
    background: none;
-    padding: 5px 0;
+    padding: 0;
 }

 #config_peers #banlist {
@@ -5395,8 +5445,12 @@ ul#banlist {
     vertical-align: top;
 }

-.main#profiles #banlist li {
-     margin-bottom: 0;
+#profiles #banlist li {
+     margin: 0;
+}
+
+#banlist tt {
+     margin-left: 2px;
 }

 #tunnelconfig th[colspan="3"] {
@@ -5955,7 +6009,7 @@ h3#ntcpcon, h3#udpcon {
 .homelinkedit th:first-child, #sidebarconf th:first-child, #consolepass th:first-child {
     text-align: center;
     background: url(/themes/console/images/buttons/delete.png) center center no-repeat, url(images/header.png) center center repeat-x #eef;
-     background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(238, 238, 255, 0.2) 50%, #eef 100%) #fff !important;
+     background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #fafaff 50%, rgba(252, 252, 255, 0.8) 50%, #e2e2ff 100%) #fafaff !important;
     font-size: 0 !important;
     width: 5%;
 }
@@ -6540,13 +6594,13 @@ b.netdb_transport {

 .subheading.routerfiles {
     padding-left: 10px !important;
-     background: url(/themes/console/images/eepsite.png) right 5px center no-repeat, linear-gradient(to right, #7778bf 5px, #fafaff 5px, #eef) !important;
+     background: url(/themes/console/images/eepsite.png) right 7px center no-repeat, linear-gradient(to right, #7778bf 5px, #fafaff 5px, #eef) !important;
     background-size: 16px auto, 100% 100% !important;
 }

 .subheading.pluginfiles {
     padding-left: 10px !important;
-     background: url(/themes/console/images/plugin.png) right 5px center no-repeat, linear-gradient(to right, #7778bf 5px, #fafaff 5px, #eef) !important;
+     background: url(/themes/console/images/plugin.png) right 7px center no-repeat, linear-gradient(to right, #7778bf 5px, #fafaff 5px, #eef) !important;
     background-size: 16px auto, 100% 100% !important;
 }

--- a/installer/resources/themes/console/light/console_ar.css
+++ b/installer/resources/themes/console/light/console_ar.css
@@ -33,6 +33,19 @@ h2, h3 {
     background: linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(to left, #fff 5%, rgba(231, 231, 255, 0.8) 15%) !important;
 }

+#debug h2 {
+     background: url(/themes/console/images/info/debug.png) 6px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(to left, #fcfcff 5%, rgba(231, 231, 255, 0.8) 25%) !important;
+     background-size: 20px 20px, 100% 100%, 100% 100% !important;
+}
+
+#portmapper th:last-child, #portmapper td:last-child {
+     text-align: center !important;
+}
+
+.buckets {
+     margin-bottom: -10px !important;
+}
+
 .routersummary h4 {
     text-align: center;
 }
@@ -40,6 +53,7 @@ h2, h3 {
 h1 {
     margin: 0 212px -15px 0;
     padding: 20px 20px 20px 10px;
+     background: linear-gradient(to left, #fcfcff, rgba(252,252,255,0) 600px), linear-gradient(to bottom, #fcfcff 50%, rgba(248,248,255,0.6) 50%), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px) #fafaff !important;
 }

 h2 {
@@ -47,7 +61,7 @@ h2 {
 }

 h3 {
-     font-size: 14pt;
+     font-size: 13pt;
     padding-right: 10px;
 }

@@ -73,13 +87,14 @@ table.search td:nth-child(3) {
     padding: 0 2px 0 8px;
 }

-input.search[type="text"] {
-     background-position: right 4px center;
-     padding: 5px 24px 5px 5px;
+input.search[type="text"], input.search[type="text"]:focus {
+     background-position: right 4px center !important;
+     padding: 5px 24px 5px 5px !important;
 }

 button, input[type="submit"], input[type="reset"] {
     display: inline-block;
+     line-height: 120%;
 }

 #config_homepage.main input.delete {
@@ -119,7 +134,7 @@ input[name="refreshInterval"] {
      text-align: right;
 }

-#statsForm, #joinfamily, #newfamily, table#permabanned {
+#statsForm, #joinfamily, #newfamily, #permabanned {
     margin-left: 0;
     margin-right: 0;
 }
@@ -182,8 +197,8 @@ div.wideload {

 #sb_services a {
     text-align: right !important;
-     padding-right: 24px !important;
-     background-position: right 2px center !important;
+     padding-right: 28px !important;
+     background-position: right 6px center !important;
 }

 .routersummary td:last-child {
@@ -282,8 +297,17 @@ p#helptranslate {
     margin-bottom: 15px !important;
 }

+#clientconfig, #webappconfig {
+     margin-right: -32px;
+}
+
+#clientconfig td:nth-child(2), #clientconfig td:nth-child(3) {
+     text-align: center;
+}
+
+#clientconfig th:first-child, #clientconfig td:first-child,
 #webappconfig th:first-child, #webappconfig td:first-child {
-     text-align: right;
+     text-align: left !important;
 }

 #webappconfig th:nth-child(2), #webappconfig td:nth-child(2),
@@ -401,12 +425,12 @@ span.newtab {
     overflow: hidden;
 }

-td.optionsave {
+td.optionsave, #peerdefs td:first-child {
     text-align: left;
 }

 p.infohelp, p.infowarn, td.infohelp, td.infowarn,
-table#bugreports td.infohelp, p#debugmode, p#sybilinfo,
+#bugreports td.infohelp, p#debugmode, p#sybilinfo,
 #bandwidthconfig tr:first-child .infohelp,
 #addkeyring td.infohelp, #joinfamily tr:nth-child(3) td:first-child,
 #newfamily tr:last-child td:first-child,
@@ -454,7 +478,24 @@ div.themechoice, div.langselect {
     text-align: right;
 }

-table#manualreseed, #config_keyring .configtable { 
+#sidebarconf th:last-child {
+     text-align: center !important;
+}
+
+#sidebarconf th {
+     text-align: right !important;
+}
+
+#sidebarconf td:last-child {
+     text-align: right !important;
+     padding-left: 10px !important;
+}
+
+#sidebarconf td:nth-last-child(2) {
+     text-align: left !important;
+}
+
+#manualreseed, #config_keyring .configtable { 
     margin-right: 0 !important;
 }

@@ -463,23 +504,11 @@ table#manualreseed, #config_keyring .configtable {
     margin-left: 16px;
 }

-#clientconfig, #webappconfig {
-     margin-right: -32px;
-}
-
-#clientconfig th:first-child {
-     text-align: left;
-}
-
-#clientconfig td:nth-child(2), #clientconfig td:nth-child(3) {
-     text-align: center;
-}
-
-table#plugininstall {
+#plugininstall {
     margin-right: 0 !important;
 }

-table#pluginconfig {
+#pluginconfig {
     margin-right: -32px !important;
 }

@@ -505,15 +534,11 @@ table#pluginconfig {
     padding-right: 10px;
 }

-#configstats tr:last-child td {
+#i2pupdates td:first-child, #reseedconfig td:first-child, #configstats tr:last-child td, textarea[name="levels"] {
     text-align: left !important;
 }

-textarea[name="levels"] {
-     text-align: left;
-}
-
-textarea#advancedsettings, #i2pupdates textarea, #addkeyring textarea, #reseedconfig textarea {
+textarea#advancedsettings, #i2pupdates textarea, #addkeyring textarea, #reseedconfig textarea, #enviro {
     direction: ltr;
 }

@@ -525,10 +550,6 @@ textarea#advancedsettings, #i2pupdates textarea, #addkeyring textarea, #reseedco
    width: calc(100% - 10px);
 }

-#i2pupdates td:first-child, #reseedconfig td:first-child {
-     text-align: left;
-}
-
 .homelinkedit th:first-child, .homelinkedit td:first-child {
     text-align: center;
 }
@@ -547,7 +568,7 @@ textarea#advancedsettings, #i2pupdates textarea, #addkeyring textarea, #reseedco
     direction: ltr !important;
 }

-.mediumtags {
+.mediumtags, #enviro td {
     text-align: left;
 }

@@ -574,7 +595,7 @@ h3#advancedconfig a, h3#bwlimiter a, h3.tabletitle a, h3.ptitle a, th a.script,
     padding-right: 50px;
 }

-table#addkeyring tr:last-child td {
+#addkeyring tr:last-child td {
     text-align: left;
 }

@@ -601,6 +622,11 @@ table.search {
     margin-bottom: 15px;
 }

+.search td {
+     padding-top: 4px !important;
+     padding-bottom: 0 !important;
+}
+
 h4.app {
     background: url(/themes/console/images/eepsite.png) 10px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(to left, #fff 5%, rgba(231, 231, 255, 0.8) 15%) right center !important;
     background-size: 16px 16px, 100% 100%, 100% 100% !important;
@@ -635,11 +661,11 @@ div.news h3, #news h3 {
 }

 #newsDisplay {
-     float: left;
     margin-left: 0 !important;
 }

-#newsStatus, #newsDisplay {
+#news #newsStatus, #newsDisplay {
+     margin-top: 6px;
     margin-bottom: -2px !important;
 }

@@ -668,12 +694,12 @@ div.news h3, #news h3 {
     padding-left: 1px;
 }

-table#leasesetdebug th:last-child, table#leasesetsummary th:last-child,
+#leasesetdebug th:last-child, #leasesetsummary th:last-child,
 table.leaseset th:last-child, table.leaseset td:nth-child(2) {
     text-align: left;
 }

-table#leasesetdebug th, table#leasesetsummary th, table.leaseset th {
+#leasesetdebug th, #leasesetsummary th, table.leaseset th {
     text-align: right;
 }

@@ -686,15 +712,15 @@ table#leasesetdebug th, table#leasesetsummary th, table.leaseset th {
     padding-right: 5px;
 }

-table#leasesetdebug td:nth-child(2n+1) {
+#leasesetdebug td:nth-child(2n+1) {
     text-align: left;
 }

-table#leasesetdebug td:nth-child(2n) {
+#leasesetdebug td:nth-child(2n) {
     text-align: right;
 }

-table#leasesetdebug, table#leasesetsummary, table.leaseset, table.sybil_routerinfo, #netdboverview, .netdbentry {
+#leasesetdebug, #leasesetsummary, table.leaseset, table.sybil_routerinfo, #netdboverview, .netdbentry {
     margin-right: 0;
 }

@@ -726,7 +752,7 @@ table.leaseset:last-child, .netdbentry:last-child, #profile_defs {
     margin-bottom: -10px;
 }

-table#leasesetdebug td:first-child, table#leasesetsummary td:first-child {
+#leasesetdebug td:first-child, #leasesetsummary td:first-child {
     text-align: left;
 }

@@ -839,18 +865,32 @@ p#profiles_overview, #profiles .widescroll + h3, #thresholds + h3, #profiles #ba
     margin-right: 0 !important;
 }

+#bugreports {
+     padding: 10px 10px 10px 0;
+}
+
+#logs #bugreports td.infohelp {
+     padding: 5px 65px 5px 0 !important;
+}
+
 #logs table td:first-child {
-     text-align: left;
     padding-right: 15px;
 }

 .logtable tr:first-child td {
     direction: ltr;
+     text-align: right !important;
 }

 #wrapperlogs pre {
     text-align: left;
     direction: ltr;
+     width: 100%;
+     margin-right: -15px;
+}
+
+#wrapperlogs {
+     margin-bottom: -10px !important;
 }

 #pluginconfigactions {
@@ -912,16 +952,17 @@ label {

 #graphs td:first-child {
     padding-right: 10px;
+     text-align: left;
 }

 #consolepass tr:first-child td, p#clientconf.infohelp, p#webappconfigtext.infohelp, #floodfillconfig .infohelp, 
 #bandwidthconfig tr:first-child .infohelp, h3#shutdownrouter + p.infohelp, h3#restartrouter + p.infohelp, h3#systray + p.infohelp, 
-h3#servicedebug + p.infohelp, h3#browseronstart + p.infohelp, table#addkeyring td:first-child, #config_peers tr:nth-child(3) td.infohelp, 
+h3#servicedebug + p.infohelp, h3#browseronstart + p.infohelp, #addkeyring td:first-child, #config_peers tr:nth-child(3) td.infohelp, 
 #config_reseed.main p.infohelp, #plugininstall tr:nth-child(3) td:nth-last-child(2), #manualreseed tr:nth-child(3) td:nth-last-child(2), 
 #manualreseed tr:nth-child(5) td:nth-last-child(2), #plugininstall tr:nth-child(5) td:nth-last-child(2), #manualreseed tr:nth-last-child(2) td.infohelp, 
 p#enablefullstats, p#gatherstats, #oldhome td:first-child, p#pluginconfigtext, #plugininstall .infohelp, #config_family .infohelp, 
 #joinfamily tr:nth-child(3) td:first-child, #newfamily tr:last-child td:first-child, #config_summarybar .configtable td:not(.optionsave),
-table#bugreports td.infohelp {
+#bugreports td.infohelp {
     background-position: right 12px center !important;
     padding: 15px 50px 15px 15px !important;
 }
@@ -999,6 +1040,12 @@ table#bugreports td.infohelp {
 }
 }

+@media screen and (min-width: 1000px) {
+body {
+     overflow-x: hidden;
+}
+}
+
@media screen and (min-width: 1500px) {
 .main, .news, h1, .sorry {
     margin-right: 232px !important;
--- a/installer/resources/themes/console/midnight/console.css
+++ b/installer/resources/themes/console/midnight/console.css
@@ -1367,9 +1367,10 @@ div.logo hr {
     padding: 1px 3px;
 }

-#sb_services a:hover, #sb_internals a:hover, #sb_advanced a:hover, #sb_localtunnels tr:hover, #sb_localtunnels tr:hover a, .news a:hover, #console a:hover, tt a:hover {
+#sb_services a:hover, #sb_internals a:hover, #sb_advanced a:hover, #sb_localtunnels tr:hover, #sb_localtunnels tr:hover a,
+.news a:hover, #console a:hover, tt a:hover {
     background: #652787;
-     color: #fff; !important;
+     color: #fff !important;
     border-radius: 2px;
 }

@@ -1751,11 +1752,51 @@ div.sorry hr {
 }

 #news #newsDisplay {
-     margin-right: -5px;
+     margin-right: -10px;
 }

-#news #newsDisplay a {
-     padding: 2px 3px;
+#news #newsDisplay, #graphopts {
+     color: transparent;
+}
+
+#news #newsStatus {
+     padding-top: 2px;
+     margin-left: -10px;
+}
+
+#news #newsDisplay {
+     padding: 0 0 3px;
+}
+
+#newsStatus, #news #newsDisplay, #news #newsDisplay a, #graphopts a {
+     display: inline-block;
+}
+
+#news #newsDisplay a, #graphopts a {
+     border: 1px solid #005;
+     margin: 0 -2px;
+     padding: 1px 10px !important;
+     background: #002;
+     background: rgba(0,0,64,0.4);
+     border-radius: 15px;
+     filter: drop-shadow(0 0 1px rgba(0,0,64,0.8));
+}
+
+#news #newsDisplay a:hover, #news #newsDisplay a:focus, #graphopts a:hover, #graphopts a:focus {
+     background: #030;
+     background: linear-gradient(to bottom, #005 50%, #001 50%);
+     border: 1px solid #006;
+     text-shadow: 0 1px 1px #000;
+}
+
+#news #newsDisplay a:active, #graphopts a:active {
+     background: #004;
+     box-shadow: inset 2px 2px 2px #000;
+}
+
+.news #newsDisplay, .news #newsStatus {
+     margin-top: 3px !important;
+     display: inline-block;
 }

 .newsAuthor {
@@ -2027,7 +2068,7 @@ div.widepanel h3 {
 .graphspanel a img {
     border: 1px solid #443da0;
     padding: 3px;
-     margin: 5px;
+     margin: 5px 4px;
     text-align: center !important;
     background: #000;
     opacity: 0.9;
@@ -2037,7 +2078,6 @@ div.widepanel h3 {
 .graphspanel a img:hover {
     border: 1px solid #652787;
     padding: 3px;
-     margin: 5px;
     text-align: center !important;
     background: #000;
     opacity: 1;
@@ -2056,7 +2096,7 @@ div.widepanel h3 {
 .graphspanel img:not(old) {
     filter: invert(1) hue-rotate(180deg);
     background: #fff;
-     border: 1px solid #fff;
+     border: 1px solid #ddf;
 }

 .graphspanel a img:not(old) {
@@ -2078,8 +2118,28 @@ div.widepanel h3 {
     padding: 10px 10px 15px;
 }

-p#graphopts {
+#graphopts {
     margin-top: 30px !important;
+     padding: 12px 0;
+}
+
+#graphopts a {
+     margin: 3px -2px;
+     background: #001;
+     border-color: #003;
+     padding: 0 10px !important;
+}
+
+#graphopts a, #graphopts a:visited {
+     color: #54508f;
+}
+
+#graphopts a:hover, #graphopts a:visited:hover, #graphopts a:focus {
+     color: #6762af;
+}
+
+#graphopts a:active {
+     color: #2d277f !important;
 }

 h3#graphinfo {
@@ -2528,7 +2588,7 @@ div[lang="de"] .twocol, div[lang="pt"] .twocol, div[lang="es"] .twocol, div[lang
     border: 1px solid #002;
     border-radius: 2px;
     box-shadow: inset 0 0 0 1px #000;
-     padding: 10px 10px 0;
+     padding: 10px;
     margin: 10px -5px 5px !important;
 }

--- a/installer/resources/themes/snark/ubergine/snark.css
+++ b/installer/resources/themes/snark/ubergine/snark.css
@@ -79,7 +79,7 @@ body.iframed:not(old) {
     box-shadow: inset 0 0 0 1px #3f173f, inset 0 0 3px 1px #212;
     filter: drop-shadow(0 1px 4px #000);
     background: #101 url(images/snarktopnav.png) repeat-x scroll center center;
-     background: linear-gradient(to bottom, #522852 0%, #4a2449 11%, #321831 33%, #281428 51%, #1c0e1c 52%, #101 54%, #101 100%);
+     background: linear-gradient(to bottom, #522852, #4a2449 11%, #321831 33%, #281428 51%, #1c0e1c 52%, #101 54%);
     min-width: 600px;
     width: 70%;
     text-align: center;
@@ -94,13 +94,14 @@ _:-ms-lang(x), .snarknavbar {
 }

 .iframed .snarknavbar {
-     padding-bottom: 16px;
+     padding-bottom: 14px;
     margin-top: 0 !important;
     margin-bottom: -6px !important;
     width: auto !important;
     border-radius: 0;
-     box-shadow: inset 0 0 1px 0 #7f2f7f;
+     box-shadow: inset 0 0 1px 0 #ffeffd;
     filter: none;
+     background: linear-gradient(to bottom, #522852, #4a2449 11%, #321831 33%, #281428 50%, #1c0e1c 50%, #101 54%);
     position: static;
 }

@@ -277,6 +278,7 @@ _:-ms-lang(x), .snarkNav:last-child[href="/i2psnark/"] {
 .snarkMessages li {
     margin-left: -18px;
     padding-left: 10px;
+     padding-right: 10px;
 }

 .snarkMessages li::before {
@@ -426,13 +428,17 @@ tfoot td:first-child {
     border-top: none !important;
     border-bottom: 1px solid #313 !important;
     padding-top: 3px;
-     padding-bottom: 6px;
+     padding-bottom: 4px;
     border-bottom: 1px solid #313;
     vertical-align: middle;
 }

+.iframed .snarkTorrents thead th {
+     padding-bottom: 3px;
+}
+
 .snarkTorrents thead th:nth-child(2) img {
-     margin-bottom: 3px;
+     margin-bottom: 2px;
 }

 .snarkGraphicStatus, .snarkTorrentStatus {
@@ -508,10 +514,11 @@ th.snarkTorrentStatus {
 }

 th.snarkTorrentAction input[type="image"] {
-     padding: 0;
+     margin-bottom: 1px;
+     padding: 1px 1px 0 0 !important;
     max-width: 32px;
     background: #40003f;
-     border-radius: 2px;
+     border-radius: 3px;
     border: 1px solid #202;
 }

@@ -542,6 +549,14 @@ th.snarkTorrentAction input[type="image"]:hover, .snarkTorrentAction input[type=
     vertical-align: middle;
 }

+.snarkTorrents tfoot tr:first-child th {
+     padding: 3px 2px;
+}
+
+.iframed .snarkTorrents tfoot tr:first-child th {
+     padding-top: 6px;
+}
+
 .snarkTorrents tfoot tr:first-child th {
     color: #ddd !important;
     font-weight: bold;
@@ -856,6 +871,10 @@ _:-ms-lang(x), .snarkDirInfo img, .snarkTorrents img {
     margin: 0 !important;
 }

+tr:hover .percentBarOuter {
+     background: repeating-linear-gradient(135deg, rgba(0,0,0,0.7) 1px, rgba(0,0,0,0.7) 6px, rgba(16,0,16,0.7) 6px, rgba(16,0,16,0.7) 11px) !important;
+}
+
 .peerinfo .percentBarOuter {
     background: repeating-linear-gradient(135deg, #000 1px, #000 6px, #0f0a08 6px, #0f0a08 11px) !important;
     height: 16px;
@@ -871,6 +890,10 @@ _:-ms-lang(x), .snarkDirInfo img, .snarkTorrents img {
     box-shadow: inset 0 0 0 1px #000;
 }

+tr:hover .percentBarInner {
+     background: linear-gradient(to bottom, rgba(136, 17, 136, 0.2) 0%, rgba(85, 17, 85, 0.2) 50%, rgba(51, 17, 51, 0.2) 50%, rgba(0, 0, 0, 0.2) 100%);
+}
+
 .peerinfo .percentBarInner {
     background: linear-gradient(to bottom, rgba(82, 57, 67, 0.7) 0%, rgba(95, 70, 41, 0.7) 50%, rgba(63, 47, 27, 0.7) 50%, rgba(31, 23, 13, 0.9) 100%);
 }
@@ -900,7 +923,7 @@ _:-ms-lang(x), .snarkDirInfo img, .snarkTorrents img {
 .percentBarText {
     text-align: center;
     font-weight: bold;
-     padding: 2px 0;
+     padding: 1px 0;
     white-space: nowrap;
     display: block;
     color: #dd7;
@@ -1044,8 +1067,77 @@ th.headerpriority br, .snarkTorrents thead th br {
     user-select: none;
 }

+.iframed .configsection .snarkConfigTitle, .iframed .toggleview {
+     border: 1px solid #878;
+     border-bottom: 1px solid #767;
+     border-top: none;
+     border-radius: 0 0 50px 50px;
+     background: linear-gradient(to bottom, #434, #656 48%, #434 52%, #212 54%, #101);
+     min-width: 320px;
+     padding: 4px 0 !important;
+     filter: drop-shadow(0 1px 2px #101);
+}
+
+.iframed .configsection .snarkConfigTitle {
+     padding-bottom: 5px !important;
+}
+
+.iframed .configsection .snarkConfigTitle a, .iframed .toggleview {
+     color: #a9a;
+}
+
+.iframed .configsection .snarkConfigTitle img, .iframed .toggleview img {
+     mix-blend-mode: luminosity;
+}
+
+.iframed .configsection .snarkConfigTitle:hover img, .iframed .toggleview:hover img {
+     mix-blend-mode: normal;
+}
+
+.iframed .newtorrentsection .toggleview img {
+     margin: -1px -2px 2px 0 !important;
+}
+
+.iframed .addtorrentsection .toggleview img {
+     margin: 0 -1px 0 0 !important;
+}
+
+.iframed .configsection .snarkConfigTitle img {
+     margin: 0 -2px 0 0 !important;
+}
+
+/* alternative iconified section tabs for iframed view */
+/*
+.iframed .configsection .snarkConfigTitle, .iframed .toggleview, .iframed .configsection .snarkConfigTitle:focus, .iframed .toggleview:focus {
+     font-size: 0;
+     min-width: 0;
+     width: 200px !important;
+     padding: 1px 5px !important;
+     border-radius: 0 0 3px 3px;
+}
+
+.iframed .configsection .snarkConfigTitle img, .iframed .toggleview img, .iframed .newtorrentsection .toggleview img {
+     background: #323;
+     background: linear-gradient(to bottom, #878 50%, #434 50%);
+     border-radius: 50%;
+     padding: 3px;
+     margin: 0 !important;
+     border: 2px solid #101;
+     box-shadow: none !important;
+     filter: none !important;
+     mix-blend-mode: normal;
+}
+
+.iframed .configsection .snarkConfigTitle:hover img, .iframed .toggleview:hover img,
+.iframed .configsection .snarkConfigTitle:focus img, .iframed .toggleview:focus img {
+     filter: drop-shadow(0 0 3px #730) !important;
+     box-shadow: none !important;
+     mix-blend-mode: normal !important;
+}
+*/
+
 .snarkConfigTitle:hover, .snarkConfigTitle:focus, label.toggleview:hover, label.toggleview:focus, .toggle_input:focus + label {
-     background: linear-gradient(to bottom, #5f475d 0%, #4f3b4f 50%, #1f001f 50%, #1f001f 100%);
+     background: linear-gradient(to bottom, #5f475d 0%, #4f3b4f 50%, #1f001f 50%, #1f001f 100%) !important;
     box-shadow: inset 0 0 1px #3f173f;
     color: #d2baff !important;
 }
@@ -1088,6 +1180,10 @@ th.headerpriority br, .snarkTorrents thead th br {
     margin-right: -2px !important;
 }

+.configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
+     min-width: 400px;
+}
+
 .configsectionpanel .snarkConfigTitle:hover {
     color: #f7e3fc !important;
 }
@@ -1656,6 +1752,7 @@ select, input, input.r, input[name="nofilter_dataDir"], textarea[name="i2cpOpts"
     border-radius: 0;
     box-shadow: inset 0 0 1px 0 #ffeffd;
     filter: none;
+     background-blend-mode: luminosity, normal;
 }

 .iframed .newtorrentsection, .iframed .addtorrentsection, .iframed .configsection, .iframed .configsectionpanel {
@@ -3267,3 +3364,4 @@ th a img {
 }

 /* end create torrent -> trackers table */
+
--- a/installer/resources/themes/snark/vanilla/snark.css
+++ b/installer/resources/themes/snark/vanilla/snark.css
@@ -1160,6 +1160,10 @@ thead img.disable, img.disable:hover {
     border-right: none;
 }

+#trackerselect td:first-child, #trackerselect td:last-child {
+     width: 30% !important;
+}
+
 #trackerselect td:nth-child(2), #trackerselect td:nth-child(3) {
     min-width: 60px !important;
     max-width: 200px !important;
--- a/installer/resources/themes/susidns/dark/susidns.css
+++ b/installer/resources/themes/susidns/dark/susidns.css
@@ -59,7 +59,7 @@ body.iframed {

 /* topnav */

-div#navi  {
+#navi  {
     border: 1px solid #2a5f29;
     padding: 5px 3px;
     background: #000 url(/themes/console/dark/images/header.png) repeat-x scroll center center !important;
@@ -72,7 +72,7 @@ div#navi  {
     text-align: center;
 }

-.iframed div#navi  {
+.iframed #navi  {
     margin: -6px -15px 30px;
     border: 1px solid #494;
     border-right: none;
@@ -86,22 +86,30 @@ div#navi  {
     text-transform: capitalize;
 }

+#navi a:first-child {
+     border-radius: 4px 0 0 4px;
+}
+
+#navi a:last-child {
+     border-radius: 0 4px 4px 0;
+}
+
 #navi a, #navi a:visited {
     color: #494 !important;
     border: 1px solid #2a5f29;
-     border-radius: 2px;
     display: inline-block;
-     margin: 1px 0;
-     box-shadow: inset 0 0 0 1px #000;
-     filter: drop-shadow(0 0 1px #000);
-     padding: 2px 5px 3px 24px;
+     margin: 1px -2px;
+     box-shadow: inset 0 0 0 1px #000, 0 0 0 1px #000;
+     padding: 2px 6px 3px 24px;
+     position: relative;
+     text-shadow: 0 1px 1px #000;
 }

 #navi a:hover, #navi a:focus  {
    border: 1px solid #f60;
    color: #f60 !important;
    background: #000;
-    box-shadow: inset 0 1px 1px #ee9;
+    z-index: 10;
 }

 #navi a:active {
@@ -294,6 +302,8 @@ div#filter + div#search > form {
 #filter span a, #filter span a:hover {
     border: none;
     background: none;
+     margin: 0 0 0 10px;
+     padding: 0;
 }

 #filter span a:active {
@@ -348,6 +358,10 @@ h3 {
     border: none;
     border-bottom: 1px dotted #494;
     background: none;
+     box-shadow: none;
+     background: url(/themes/console/images/info/question.png) 5px center no-repeat;
+     background-size: 18px 18px;
+     padding-left: 30px;
 }

 #content h3:first-child {
@@ -355,7 +369,7 @@ h3 {
 }

 #content p {
-     line-height: 130%;
+     line-height: 150%;
 }

 .headline h3:first-child + h4 {
@@ -363,7 +377,7 @@ h3 {
     margin-bottom: 26px !important;
 }

-div.headline {
+.headline {
     margin-top: -16px;
 }

@@ -450,7 +464,7 @@ h4 {
     background: url(/themes/susidns/images/drive.png) 9px center no-repeat, linear-gradient(to bottom, #001000 0%, #001900 50%, #000 51%, #000 100%) !important;
 }

-a:link {
+a:link, #filter a:visited {
     color: #494;
     text-decoration: none;
     font-weight: bold;
@@ -1156,7 +1170,7 @@ body, input[type="submit"], input[type="reset"], .fakebutton, input, select, h4,
     font-size: 10pt !important;
 }

-div#navi {
+#navi {
     padding: 6px 5px !important;
 }

--- a/installer/resources/themes/susidns/light/susidns.css
+++ b/installer/resources/themes/susidns/light/susidns.css
@@ -125,6 +125,7 @@ code, tt, .destaddress {
     text-transform: capitalize;
     box-shadow: inset 0 0 0 1px #fff;
     filter: drop-shadow(0 0 1px rgba(204, 204, 204, 0.6));
+     line-height: 110%;
 }

 #navi a:hover, #navi a:focus {
--- a/installer/resources/themes/susimail/light/susimail.css
+++ b/installer/resources/themes/susimail/light/susimail.css
@@ -1004,7 +1004,7 @@ div#mailheader {

 #dologin h1 {
     background: #fafaff;
-     background: linear-gradient(to bottom, #fafaff 50%, #f2f2ff 50%);
+     background: linear-gradient(to bottom, #fff 50%, #f2f2ff 50%);
     border-bottom: 1px solid #77789f;
     color: #4c526f;
     text-transform: uppercase;
--- a/router/java/src/net/i2p/router/RouterVersion.java
+++ b/router/java/src/net/i2p/router/RouterVersion.java
@@ -18,7 +18,7 @@ public class RouterVersion {
    /** deprecated */
    public final static String ID = "Monotone";
    public final static String VERSION = CoreVersion.VERSION;
-    public final static long BUILD = 21;
+    public final static long BUILD = 22;

    /** for example "-test" */
    public final static String EXTRA = "-rc";