From a39fb3d7c28f58cc1e5cfcbe6dbcf1e4adcc19c4 Mon Sep 17 00:00:00 2001
From: str4d <str4d@mail.i2p>
Date: Wed, 26 Jul 2017 22:03:08 +0000
Subject: [PATCH] I2PSnark:

- Mitigate truncation of ratings dropdown in comments section (translations)
- light: Reduce contrast of display text
- light/classic: Increase contrast of download bars
- Create Torrent trackers table: Replace "Tracker URL" with "Tracker Type"
  (ticket #1996)
- Add a persistent warning to the messagelog when JavaScript is disabled to
  indicate potential loss of form data upon refresh (ticket #1996)
- Migrate "view or change bandwidth" to [Configure] tooltip to standardize
  configuration links, allow for more space for option labels and lessen
  chance of option labels wrapping in translations
---
 .../org/klomp/snark/web/I2PSnarkServlet.java  |  37 +-
 history.txt                                   |  15 +-
 .../resources/themes/snark/classic/snark.css  |  60 +-
 .../resources/themes/snark/dark/snark.css     |  76 ++-
 .../resources/themes/snark/light/snark.css    | 537 ++++++++++++------
 .../resources/themes/snark/midnight/snark.css |  60 +-
 .../resources/themes/snark/ubergine/snark.css | 218 ++++++-
 .../resources/themes/snark/vanilla/snark.css  |  76 ++-
 8 files changed, 769 insertions(+), 310 deletions(-)

diff --git a/apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java b/apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java
index 56cdcfcc9f..e9e3352b9b 100644
--- a/apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java
+++ b/apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java
@@ -395,7 +395,7 @@ public class I2PSnarkServlet extends BasicServlet {
         List<String> msgs = _manager.getMessages();
         if (!msgs.isEmpty()) {
             out.write("\n<div class=\"snarkMessages\" tabindex=\"0\">");
-            out.write("<a href=\"" + _contextPath + '/');
+            out.write("<a id=\"closeLog\" href=\"" + _contextPath + '/');
             if (isConfigure)
                 out.write("configure");
             if (peerString.length() > 0)
@@ -407,6 +407,8 @@ public class I2PSnarkServlet extends BasicServlet {
             out.write(toThemeImg("delete", tx, tx));
             out.write("</a>" +
                       "\n<ul>\n");
+            out.write("<noscript><li class=\"noscriptWarning\">Warning! Javascript is disabled in your browser. If <a href=\"configure\">page refresh</a> is enabled, ");
+            out.write("you will lose any input in the add/create torrent sections when a refresh occurs.</li></noscript>");
             for (int i = msgs.size()-1; i >= 0; i--) {
                 String msg = msgs.get(i);
                 out.write("<li>" + msg + "</li>\n");
@@ -2202,34 +2204,43 @@ public class I2PSnarkServlet extends BasicServlet {
         out.write("\" name=\"foo\" >");
         out.write("<tr><td>\n");
         out.write(_t("Trackers"));
-        out.write(":<td><table id=\"trackerselect\" style=\"width: 30%;\"><tr><td></td><td align=\"center\">");
+        out.write(":<td><table id=\"trackerselect\"><tr><td>Name</td><td align=\"center\">");
         out.write(_t("Primary"));
         out.write("</td><td align=\"center\">");
         out.write(_t("Alternates"));
         out.write("</td><td>");
-        out.write(_t("Tracker URL"));
+        out.write(_t("Tracker Type"));
         out.write("</td></tr>\n");
 
         for (Tracker t : sortedTrackers) {
+            List<String> openTrackers = _manager.util().getOpenTrackers();
+            List<String> privateTrackers = _manager.getPrivateTrackers();
+            boolean isPrivate = privateTrackers.contains(t.announceURL);
+            boolean isKnownOpen = _manager.util().isKnownOpenTracker(t.announceURL);
+            boolean isOpen = isKnownOpen || openTrackers.contains(t.announceURL);
             String name = t.name;
             String announceURL = t.announceURL.replace("&#61;", "=");
             String homeURL = t.baseURL;
-            out.write("<tr><td>");
+            out.write("<tr><td><span class=\"trackerName\">");
             out.write(name);
-            out.write("</td><td align=\"center\"><input type=\"radio\" name=\"announceURL\" value=\"");
+            out.write("</span></td><td align=\"center\"><input type=\"radio\" name=\"announceURL\" value=\"");
             out.write(announceURL);
             out.write("\"");
             if (announceURL.equals(_lastAnnounceURL))
                 out.write(" checked");
             out.write("></td><td align=\"center\"><input type=\"checkbox\" name=\"backup_");
             out.write(announceURL);
-            out.write("\" value=\"foo\"></td><td><a href=\"");
-            out.write(homeURL);
-            out.write("\">");
-            out.write(homeURL);
-            out.write("</a></td></tr>\n");
+            out.write("\" value=\"foo\"></td><td>");
+
+            if (!(isOpen || isPrivate))
+                out.write(_t("Standard"));
+            if (isOpen)
+                out.write(_t("Open"));
+            if (isPrivate) {
+                out.write(_t("Private"));
+            }
         }
-        out.write("<tr><td><i>");
+        out.write("</td></tr><tr><td><i>");
         out.write(_t("none"));
         out.write("</i></td><td align=\"center\"><input type=\"radio\" name=\"announceURL\" value=\"none\"");
         if (_lastAnnounceURL == null)
@@ -2419,8 +2430,10 @@ public class I2PSnarkServlet extends BasicServlet {
         out.write("\"> KBps <td id=\"bwHelp\"><i>");
         out.write(_t("Half available bandwidth recommended."));
         if (_context.isRouterContext()) {
-            out.write("</i> <a href=\"/config.jsp\" target=\"blank\">[");
+            out.write("</i> <a href=\"/config.jsp\" target=\"blank\" title=\"");
             out.write(_t("View or change router bandwidth"));
+            out.write("\">[");
+            out.write(_t("Configure"));
             out.write("]</a>");
         }
         out.write("\n<tr><td><label for=\"useOpenTrackers\">");
diff --git a/history.txt b/history.txt
index c2a6bcaa7d..5cd7ece999 100644
--- a/history.txt
+++ b/history.txt
@@ -1,3 +1,16 @@
+2017-07-26 str4d
+ * I2PSnark:
+   - Mitigate truncation of ratings dropdown in comments section (translations)
+   - light: Reduce contrast of display text
+   - light/classic: Increase contrast of download bars
+   - Create Torrent trackers table: Replace "Tracker URL" with "Tracker Type"
+     (ticket #1996)
+   - Add a persistent warning to the messagelog when JavaScript is disabled to
+     indicate potential loss of form data upon refresh (ticket #1996)
+   - Migrate "view or change bandwidth" to [Configure] tooltip to standardize
+     configuration links, allow for more space for option labels and lessen
+     chance of option labels wrapping in translations
+
 2017-07-25 str4d
  * Console: Move JRobin default color and font changes into SummaryRenderer
 
@@ -20,7 +33,7 @@
    - Reduce size of screenlog font at 1400-1600px viewport width to lessen
      chance of text-wrapping (ticket #1996)
    - classic: Fix a linespacing issue in the config section (options:) that only
-     triggers in foreign languages that force the options td to wrap
+     triggers in foreign languages that force the options labels to wrap
  * Fix HTML tags across non-default conditional branches
 
 2017-07-08 zzz
diff --git a/installer/resources/themes/snark/classic/snark.css b/installer/resources/themes/snark/classic/snark.css
index a6096a95ca..c4544fefa1 100644
--- a/installer/resources/themes/snark/classic/snark.css
+++ b/installer/resources/themes/snark/classic/snark.css
@@ -175,7 +175,7 @@ body.iframed {
 .snarkMessages {
      overflow: hidden;
      width: auto;
-     height: 53px;
+     height: 56px;
      margin: 0;
      padding: 3px 5px;
      text-align: left;
@@ -202,16 +202,20 @@ body.iframed {
 
 .snarkMessages li {
      margin-left: -15px;
-     font: normal 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+     font: bold 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+     color: #2c354f;
+     opacity: 0.95;
 }
 
 .snarkMessages li::before {
      content: "";
      display: inline-block;
-     background: url(images/bullet.png) left bottom no-repeat;
+     background: url(images/bullet.png) 1px bottom no-repeat;
      width: 13px;
      height: 11px;
+     margin: 1px 2px 0 1px;
      background-size: 9px 9px;
+     opacity: 0.7;
 }
 
 .snarkMessages a:link,
@@ -317,6 +321,11 @@ body.iframed {
      display: none;
 }
 
+.snarkTorrents img {
+     margin: 0 !important;
+     padding: 0 !important;
+}
+
 #totals {
      margin-left: 3px;
 }
@@ -352,6 +361,11 @@ body.iframed {
      width: 24px !important;
 }
 
+.snarkGraphicStatus img {
+     margin-top: 2px !important;
+     margin-bottom: 2px !important;
+}
+
 .snarkTorrentETA, .snarkTorrentUploaded, .snarkTorrentRateDown, .snarkTorrentRateUp {
      width: 5%;
      min-width: 40px;
@@ -524,11 +538,6 @@ td.snarkTrackerDetails {
      padding: 4px 2px !important;
 }
 
-.snarkTorrents img {
-     margin: 0 !important;
-     padding: 0 !important;
-}
-
 tt {
      font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
 }
@@ -793,7 +802,7 @@ td:first-child {
 }
 
 .snarkTorrentName {
-     line-height: 90%;
+     line-height: 110%;
      padding: 0;
 }
 
@@ -928,7 +937,7 @@ td:first-child {
 }
 
 tr:hover .percentBarText {
-     opacity: 0.75;
+     opacity: 0.85;
 }
 
 .snarkTorrentEven {
@@ -1039,7 +1048,7 @@ tr:hover .percentBarText {
      border: none;
      height: 14px;
      background: #bbf;
-     background: linear-gradient(to bottom, #fff 0%, #eef 50%, #ddf 50%, #bbf 100%);
+     background: linear-gradient(to bottom, #fff 0%, #eef 50%, #bbf 50%, #99f 100%);
      box-shadow: inset 0 0 0 1px #ddf;
      opacity: 0.8;
 }
@@ -1103,8 +1112,8 @@ tr:hover .percentBarText {
      margin-left: -5px;
      font-weight: normal;
      background: url(images/infocircle.png) left 10px center no-repeat;
-     background-size: 14px auto;
-     padding-left: 30px;
+     background-size: 13px auto;
+     padding-left: 26px;
 }
 
 .snarkConfigTitle:hover, label.toggleview:hover, input.toggle_input:focus + .toggleview {
@@ -1121,7 +1130,7 @@ input.toggle_input:focus + .toggleview img {
 }
 
 .snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle:hover {
-     font-size: 13pt;
+     font-size: 12pt;
      font-weight: bold;
      font-variant: small-caps !important;
      display: inline-block;
@@ -1141,6 +1150,7 @@ input.toggle_input:focus + .toggleview img {
 .snarkConfigTitle a {
      display: inline-block;
      width: 100%;
+     margin-bottom: -1px;
 }
 
 @media screen and (-webkit-min-device-pixel-ratio: 0) {
@@ -1158,7 +1168,7 @@ _:-ms-lang(x), .snarkConfigTitle, label.toggleview, .configsectionpanel .snarkCo
 }
 
 .snarkConfigTitle img, label.toggleview img {
-     margin-right: -2px;
+     margin-right: -1px;
      margin-top: -2px;
 }
 
@@ -1645,21 +1655,18 @@ img:hover {
 #trackerselect tr:first-child td {
      padding: 5px 10px;
      border-bottom: 1px solid #89f;
+     font-weight: bold !important;
 }
 
 #trackerselect td {
      padding: 3px 10px;
 }
 
-#trackerselect td:first-child {
-     width: 20%;
+#trackerselect td:first-child, #trackerselect td:last-child {
+     width: 40%;
      font-weight: normal;
 }
 
-#trackerselect td:nth-child(4) {
-     width: 70%;
-}
-
 #trackerselect input {
      margin: 3px !important;
 }
@@ -1897,7 +1904,7 @@ img:hover {
 }
 
 code {
-     font: bold 9pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+     font: bold 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
      padding: 0 2px;
      color: #050;
 }
@@ -2224,6 +2231,7 @@ hr.debug:last-child {
 
 #configs td:first-child {
      min-width: 180px !important;
+     width: 25%;
      padding-left: 15px !important;
 }
 
@@ -2626,7 +2634,7 @@ body {
 }
 
 @media screen and (min-width: 1100px) {
-body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_dataDir"], select, textarea, textarea[name="i2cpOpts"], .snarkAddInfo, code, .snarkMessages li {
+body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_dataDir"], select, textarea, textarea[name="i2cpOpts"], .snarkAddInfo {
      font-size: 9pt !important;
 }
 
@@ -2648,12 +2656,12 @@ body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_
 }
 
 @media screen and (min-width: 1400px) {
-body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_dataDir"], select, textarea, textarea[name="i2cpOpts"], .snarkAddInfo, code, .snarkCommentInfo textarea {
+body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_dataDir"], select, textarea, textarea[name="i2cpOpts"], .snarkAddInfo, .snarkCommentInfo textarea {
      font-size: 10pt !important;
 }
 
-.snarkMessages li, .snarkTorrents tt {
-     font-size: 8pt !important;
+code, .snarkTorrents tt, #ourDest tt {
+     font-size: 9pt;
 }
 
 .snarkTorrentAction input[type="image"], .snarkTorrents th:last-child input[type="image"] {
diff --git a/installer/resources/themes/snark/dark/snark.css b/installer/resources/themes/snark/dark/snark.css
index 6296901507..d242cbc146 100644
--- a/installer/resources/themes/snark/dark/snark.css
+++ b/installer/resources/themes/snark/dark/snark.css
@@ -2,7 +2,7 @@
 /* Author: dr|z3d */
 
 html {
-     height: 100%;
+     min-height: 100%;
 }
 
 body {
@@ -17,7 +17,7 @@ body {
 
 body {
      background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.7)),
-     url(/themes/console/dark/images/camotile2.png) top left,
+     url(/themes/console/dark/images/camotile2.png) top left fixed,
      url(images/button_snark_hover.png) no-repeat,
      url(images/button_snark_active.png) no-repeat,
      url(images/button_tracker_hover.png) no-repeat,
@@ -113,7 +113,7 @@ body.iframed {
      text-decoration: none !important;
      text-transform: uppercase !important;
      letter-spacing: 0.1em;
-     margin: 0 -1px !important;
+     margin: 0 -2px !important;
      padding: 5px 7px 5px 22px !important;
      color: #3f3;
      text-shadow: 0 0 1px #000;
@@ -122,6 +122,7 @@ body.iframed {
      box-shadow: inset 0 0 0 1px #000;
      filter: drop-shadow(0 0 1px #000);
      opacity: 0.7;
+     position: relative;
 }
 
 .snarkNav:link, .snarkNav:hover, .snarkNav:focus {
@@ -130,6 +131,10 @@ body.iframed {
      background-repeat: no-repeat, repeat !important;
 }
 
+.snarkNav:hover, .snarkNav:focus {
+     z-index: 10;
+}
+
 .snarkNav:link:last-child {
       margin-left: 3px;
 }
@@ -224,7 +229,7 @@ body.iframed {
      overflow: hidden;
      resize: none;
      color: #69f;
-     height: 54px;
+     height: 56px;
      width: auto;
      background: #000 url(images/hat.png) no-repeat scroll right bottom;
      background: url(images/hat.png) no-repeat scroll right bottom, linear-gradient(to bottom, #010, #000);
@@ -261,6 +266,11 @@ _:-ms-lang(x), .snarkMessages {
      list-style: none;
 }
 
+.snarkMessages li, .snarkMessages li a, .snarkTorrents tt, #ourDest tt {
+     font-size: 8pt !important;
+     font-weight: bold;
+}
+
 .snarkMessages li {
      margin-left: -15px;
 }
@@ -268,8 +278,8 @@ _:-ms-lang(x), .snarkMessages {
 .snarkMessages li::before {
      content: "";
      display: inline-block;
-     background: url(images/bullet.png) left bottom no-repeat;
-     width: 14px;
+     background: url(images/bullet.png) 2px bottom no-repeat;
+     width: 16px;
      height: 11px;
      background-size: 9px 9px;
      filter: drop-shadow(0 0 1px #000);
@@ -483,6 +493,7 @@ th.snarkTorrentStatus {
      font-weight: bold;
      display: inline-block;
      line-height: 120%;
+     letter-spacing: 0.1em;
 }
 
 .snarkTorrentInfo img {
@@ -764,7 +775,7 @@ td {
      padding: 1px !important;
 }
 
-.snarkTorrents tr:hover, .snarkDirInfo tr:hover {
+.snarkTorrents tr:hover, .snarkDirInfo tr:hover, #trackerselect tr:nth-child(n+2):hover {
      background: #030 !important;
 }
 
@@ -993,10 +1004,14 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven {
      font-variant: small-caps !important;
      display: inline-block;
      margin: 0 0 -3px !important;
-     min-width: 260px;
+     min-width: 300px;
      box-shadow: inset 0 0 0 1px #000, 0 1px 1px #000;
 }
 
+.toggleview {
+     padding-bottom: 4px !important;
+}
+
 @media screen and (-webkit-min-device-pixel-ratio:0) {
 .snarkConfigTitle, .toggleview {
      font-size: 13pt !important;
@@ -1014,6 +1029,7 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven {
 .snarkConfigTitle a {
      display: inline-block;
      width: 100%;
+     padding-bottom: 1px !important;
 }
 
 .snarkConfigTitle:hover, .toggleview:hover, input.toggle_input:focus + .toggleview {
@@ -1500,6 +1516,8 @@ img[src$="magnet.png"] {
      width: 120px;
 }
 
+/* newtorrent tracker selection */
+
 #trackerselect {
      border: 1px solid #131;
      width: 100% !important;
@@ -1531,22 +1549,25 @@ _:-ms-lang(x), #trackerselect tr:last-child {
 }
 
 #trackerselect tr:first-child td {
-     padding: 3px 5px 3px 20px;
+     font-weight: bold;
+     color: #ee9 !important;
 }
 
 #trackerselect td {
-     padding: 5px 5px 5px 20px;
+     padding: 5px;
+     text-align: center;
+     color: #bb7 !important;
 }
 
-#trackerselect td:first-child {
-     width: 20%;
+#trackerselect tr:nth-child(n+2):hover td {
+     color: #ee9 !important;
+}
+
+#trackerselect td:first-child, #trackerselect td:last-child {
+     width: 40%;
      font-weight: normal;
 }
 
-#trackerselect td:nth-child(4) {
-     width: 70%;
-}
-
 #trackerselect input {
      margin: 3px !important;
 }
@@ -1558,6 +1579,8 @@ _:-ms-lang(x), #trackerselect tr:last-child {
      text-overflow: ellipsis;
 }
 
+/* end newtorrent tracker selection */
+
 .configsectionpanel td:first-child {
      padding-right: 10px !important;
      padding-left: 5px !important;
@@ -1568,7 +1591,7 @@ _:-ms-lang(x), #trackerselect tr:last-child {
      min-width: 50px;
 }
 
-.trackerconfig th, .trackerselect th {
+.trackerconfig th, #trackerselect tr:first-child td {
      padding-top: 7px;
      padding-bottom: 7px;
 }
@@ -1666,6 +1689,7 @@ _:-ms-lang(x), #trackerselect tr:last-child {
 #configs td:first-child {
      padding-left: 15px !important;
      line-height: 80%;
+     width: 25%;
 }
 
 #configs td:first-child, .trackerconfig td:first-child {
@@ -2668,7 +2692,7 @@ body, .snarkTorrents td, .snarkAddInfo, th, td,  code, textarea, input, input[ty
 }
 
 .snarkConfigTitle, .toggleview {
-     min-width: 300px !important;
+     min-width: 340px !important;
      padding-top: 4px;
 }
 
@@ -2677,11 +2701,7 @@ body, .snarkTorrents td, .snarkAddInfo, th, td,  code, textarea, input, input[ty
 }
 
 .snarkConfigTitle a {
-     margin-bottom: 1px !important;
-}
-
-tt, .snarkTorrents tt, .snarkMessages, .snarkMessages a {
-     font-size: 9pt !important;
+     padding-bottom: 2px !important;
 }
 
 textarea[name="i2cpOpts"] {
@@ -2747,6 +2767,16 @@ textarea[name="i2cpOpts"] {
 }
 }
 
+@media screen and (min-width: 1600px) {
+.snarkMessages li, .snarkMessages li a, .snarkTorrents tt, #ourDest tt, tt {
+     font-size: 9pt !important
+}
+
+tt, .snarkTorrents tt, .snarkMessages, .snarkMessages a {
+     font-size: 9pt !important;
+}
+}
+
 /* mini-mode */
 
 @media screen and (max-width: 800px) {
diff --git a/installer/resources/themes/snark/light/snark.css b/installer/resources/themes/snark/light/snark.css
index 41a01b8657..19de36f703 100644
--- a/installer/resources/themes/snark/light/snark.css
+++ b/installer/resources/themes/snark/light/snark.css
@@ -4,7 +4,7 @@
 /* Thanks to http://www.luxphile.com/2011/01/creative-commons-cat.html for the kitty image */
 
 body {
-     color: #272e3f;
+     color: #31334f;
      font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
      background: #a4a4cb url(/themes/console/light/images/tile2.png) center top fixed;
      background-size: 32px 32px;
@@ -38,19 +38,34 @@ body.iframed {
      url(images/button_forum_active.png) no-repeat !important;
 }
 
+b {
+     color: #41465f;
+}
+
 * {
      outline: none !important;
 }
 
+::selection {
+     background: #27377f !important;
+     color: white;
+     text-shadow: none;
+}
+
+::-moz-selection {
+     background: #27377f !important;
+     color: white;
+     text-shadow: none;
+}
+
 .toggleview, .snarkConfigTitle, .snarknavbar, img, input[type="image"] {
      -moz-user-select: none;
      -webkit-user-select: none;
      user-select: none;
 }
 
-a:focus img, input[type="image"]:focus, a.control:focus, input[type="radio"]:focus, input[type="checkbox"]:focus, select:focus,
-input[type="text"]:focus, input.r:focus, input[name="nofilter_dataDir"]:focus, textarea:focus {
-     filter: drop-shadow(0 0 1px #6f072b) !important;
+a:focus img, input[type="image"]:focus {
+     filter: drop-shadow(0 0 1px #f60) !important;
 }
 
 button::-moz-focus-inner, input::-moz-focus-inner {
@@ -59,7 +74,6 @@ button::-moz-focus-inner, input::-moz-focus-inner {
 }
 
 .page {
-     color: #310;
      min-width: 900px !important;
      margin: 5px 0 0 0;
      padding: 0;
@@ -85,7 +99,7 @@ button::-moz-focus-inner, input::-moz-focus-inner {
 
 .snarknavbar {
      margin: 0 auto -6px !important;
-     padding: 8px 10px;
+     padding: 8px 10px 7px;
      border: 1px solid #7778bf;
      box-shadow: inset 0 0 0 1px #fff;
      border-radius: 2px 2px 0 0;
@@ -93,7 +107,7 @@ button::-moz-focus-inner, input::-moz-focus-inner {
      width: auto;
      width: calc(100% - 22px);
      text-align: center;
-     background: linear-gradient(to bottom, #fff 50%, #eef 51%, #eef 100%);
+     background: linear-gradient(to bottom, #fafaff 50%, #eef 51%, #eef 100%);
      position: sticky;
      top: -1px;
      z-index: 999;
@@ -101,18 +115,22 @@ button::-moz-focus-inner, input::-moz-focus-inner {
 
 .iframed .snarknavbar {
      margin: -6px 0 -6px !important;
+     padding-top: 7px;
+     padding-bottom: 6px;
      border-radius: 0;
      border: none;
      border-bottom: 1px solid #7778bf;
      box-shadow: none;
      position: static;
+     background: linear-gradient(to bottom, #fcfcff 51%, #f8f8ff 51%, #f2f2ff 100%);
 }
 
 .snarkNav:link, .snarkNav:visited {
      text-decoration: none !important;
      text-transform: uppercase !important;
      padding: 4px 10px 4px 24px !important;
-     margin-right: -2px !important;
+     margin-right: -4px !important;
+     line-height: 125%;
      letter-spacing: 0.08em;
      font-weight: bold;
      font-size: 9pt;
@@ -122,7 +140,8 @@ button::-moz-focus-inner, input::-moz-focus-inner {
      box-shadow: inset 0 0 0 1px #fff;
      display: inline-block;
      outline: none;
-     filter: drop-shadow(0 0 1px #ccc);
+     filter: drop-shadow(0 0 1px #ccf);
+     position: relative;
 }
 
 .snarkNav:link, .snarkNav:hover, .snarkNav:focus, .snarkNav:active {
@@ -130,6 +149,10 @@ button::-moz-focus-inner, input::-moz-focus-inner {
      background-position: 8px center;
 }
 
+.snarkNav:hover, .snarkNav:focus {
+     z-index: 999;
+}
+
 .snarkNav:last-child {
      border-radius: 0 2px 2px 0;
 }
@@ -205,7 +228,7 @@ button::-moz-focus-inner, input::-moz-focus-inner {
      border-spacing: 0;
      overflow: hidden;
      color: #339;
-     height: 52px;
+     height: 56px;
      width: auto;
      min-width: 810px;
      background: #eef url(images/kitty.png) no-repeat scroll right bottom;
@@ -214,6 +237,7 @@ button::-moz-focus-inner, input::-moz-focus-inner {
      border-bottom: 1px solid #7778bf;
      box-shadow: inset 0 0 1px #fff;
      background-size: auto 100%, 100% 100%;
+     background-blend-mode: multiply;
 }
 
 .snarkMessages:hover, .snarkMessages:focus {
@@ -240,8 +264,19 @@ button::-moz-focus-inner, input::-moz-focus-inner {
 }
 
 .snarkMessages li {
-     margin-left: -15px;
+     margin-left: -18px;
+     margin-right: -5px;
+     padding: 1px 20px 0 5px;
      line-height: 120%;
+     font-weight: bold;
+     background: rgba(255, 255, 255, 0.25);
+     opacity: 0.9;
+     mix-blend-mode: darken;
+}
+
+.snarkMessages li:hover {
+     opacity: 1;
+     mix-blend-mode: multiply;
 }
 
 .snarkMessages li::before {
@@ -335,9 +370,9 @@ th {
      border-top: 1px solid #7778bf;
      border-bottom: 1px solid #7778bf;
      background: #fff url(/themes/console/light/images/header.png) repeat-x scroll center center;
-     background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 51%, #eef 100%);
-     background: linear-gradient(to bottom, #fff 50%, rgba(240,240,255,1));
-     color: #31334f;
+     background: linear-gradient(to bottom, #fafaff 50%, #eef 51%, #eef 100%);
+     background: linear-gradient(to bottom, #fafaff 50%, rgba(240,240,255,1));
+     color: #41465f;
 }
 
 th:first-child {
@@ -366,7 +401,7 @@ tfoot th {
      opacity: 0.8;
      filter: drop-shadow(0 0 1px #bbb);
      width: 12px;
-     background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 51%, #eef 100%);
+     background: linear-gradient(to bottom, #fff 50%, #eef 51%, #eef 100%);
      margin-right: -4px;
 }
 
@@ -398,7 +433,7 @@ tfoot th {
 }
 
 .ParentDir {
-     background: #fff;
+     background: #f8f8ff;
      font-size: 8pt;
      border: none;
      text-align: left !important;
@@ -419,8 +454,8 @@ tfoot th {
 /* main torrents listing */
 
 .snarkTorrents thead th {
-     padding-top: 4px;
-     padding-bottom: 4px;
+     padding-top: 2px;
+     padding-bottom: 2px;
 }
 
 .snarkTorrents {
@@ -445,13 +480,13 @@ tfoot th {
 }
 
 .snarkTorrents tfoot tr:first-child th {
-     padding: 5px 4px;
+     padding: 5px 0 5px 4px;
      background: #fff;
-     background: linear-gradient(to bottom, #fff 50%, rgb(240, 240, 255)) #fff;
+     background: linear-gradient(to bottom, #fafaff 50%, rgb(240, 240, 255)) #fafaff;
      vertical-align: middle;
      font-weight: bold;
      font-style: normal !important;
-     color: #31334f !important;
+     color: #41465f !important;
 }
 
 .snarkTorrents td {
@@ -482,7 +517,7 @@ tfoot th {
      padding-left: 0;
 }
 
-th.snarkTorrentStatus {
+th.snarkGraphicStatus, th.snarkTorrentStatus {
      text-align: center !important;
 }
 
@@ -515,6 +550,14 @@ th.snarkTorrentStatus {
 .snarkTorrentName a, .snarkFileName a {
      display: inline-block;
      width: 100%;
+     word-break: break-all;
+     line-height: 120%;
+     margin: 1px 0;
+     opacity: 0.85;
+}
+
+tr:hover .snarkTorrentName a, tr:hover .snarkFileName a {
+     opacity: 1;
 }
 
 .snarkTorrentETA, .snarkTorrentUploaded, .snarkTorrentRateDown, .snarkTorrentRateUp {
@@ -545,7 +588,7 @@ th.snarkTorrentStatus {
 .snarkTorrentAction input[type="image"], .snarkTorrents th:last-child input[type="image"] {
      padding: 3px !important;
      background: #339;
-     background: linear-gradient(to bottom, #fff 0%, #fff 50%, #ddf 51%, #ddf 100%);
+     background: linear-gradient(to bottom, #fff 50%, #ddf 51%);
      border-radius: 2px;
      border: 1px solid #89f;
      box-shadow: inset 0 0 0 1px #fff;
@@ -614,12 +657,15 @@ th.snarkTorrentStatus {
 }
 
 .snarkTorrents tt {
-     background: #99f;
+     background: #aaf;
      color: #fff;
      border-radius: 2px;
      padding: 2px 3px;
      margin: 0 3px;
      display: inline-block;
+     letter-spacing: 0.1em;
+     font-size: 8pt !important;
+     text-shadow: 0 1px 1px #333;
 }
 
 #totals {
@@ -640,41 +686,43 @@ th.snarkTorrentStatus {
 
 td {
      padding: 2px 4px;
-     color: #272e3f !important;
+     color: #31334f;
      opacity: 1;
      font-size: 9pt;
 }
 
 .mainsection td {
-     color: #272e3f;
+     color: #31334f;
 }
 
-.snarkTorrentEven {
+.snarkTorrentEven, .snarkTorrentInfo tr:nth-child(even),
+.snarkCommentInfo tr:nth-child(even), .snarkComments tr:nth-child(odd) {
      background: #eef;
-     background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px) #fff;
+     background: repeating-linear-gradient(135deg, rgba(252,252,255,0.8) 2px, rgba(240, 240, 255, 0.8) 3px, #fafaff 5px) #fafaff;
 }
 
-.snarkTorrentOdd {
+.snarkTorrentOdd, .snarkTorrentInfo tr:nth-child(odd),
+.snarkCommentInfo tr:nth-child(odd), .snarkComments tr:nth-child(even) {
      background: #e0e0ff;
-     background: repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px) #fff;
+     background: repeating-linear-gradient(45deg, rgba(255,255,255,0.8) 2px, rgba(196, 196, 255, 0.3) 3px, #fafaff 5px) #fafaff;
 }
 
-.snarkTorrentOdd td, .snarkTorrentEven td {
+.snarkTorrentOdd td, .snarkTorrentEven td, .snarkCommentInfo tr, .snarkComments tr {
      border-top: 1px solid #bbf !important;
 }
 
 .snarkTorrents tr:hover, .snarkTorrents tr:hover td, .snarkDirInfo tr:hover {
      background: #ffd;
      box-shadow: none !important;
-     color: #0c111f !important;
+     color: #292b2f !important;
 }
 
-.snarkTorrents tr:hover img {
-     mix-blend-mode: normal;
+.snarkTorrents tr:hover td:nth-child(2) b {
+     color: #363b4f !important;
 }
 
 tr:hover .percentBarText {
-     opacity: 0.75;
+     opacity: 1;
 }
 
 .peerinfo:hover td:first-child {
@@ -748,7 +796,7 @@ tr:hover .percentBarText {
      border: none;
      height: 100%;
      background: #bbf;
-     background: linear-gradient(to bottom, rgba(255, 255, 255,0.6) 0%, rgba(238, 238, 255, 0.6) 50%, rgba(221, 221, 255, 0.7) 50%, rgba(187, 187, 255, 0.7) 100%);
+     background: linear-gradient(to bottom, rgba(255, 255, 255,0.6) 0%, rgba(238, 238, 255, 0.6) 50%, rgba(200, 200, 255, 0.7) 50%, rgba(160, 160, 255, 0.7) 100%);
      box-shadow: inset 0 0 0 1px #ddf;
 }
 
@@ -769,8 +817,8 @@ tr:hover .percentBarText {
      line-height: 15px;
      white-space: nowrap;
      display: block;
-     color: #005;
-     text-shadow: 0 0 1px rgba(255,255,255,0.5);
+     color: #00528f;
+     text-shadow: 0 1px 1px rgba(255,255,255,0.8);
      opacity: 0;
      transition: ease opacity 0.2s;
 }
@@ -786,7 +834,6 @@ tr:hover .percentBarText {
 }
 
 .percentBarText:hover, .percentBarText:focus {
-     opacity: 0.75;
      transition: ease opacity 0.2s;
 }
 
@@ -824,8 +871,8 @@ tr:hover .percentBarText {
      font-size: 9pt;
      display: inline-block;
      margin-top: 7px;
-     background: url(images/infocircle.png) left center no-repeat;
-     background-size: 16px auto;
+     background: url(images/infocircle.png) left top no-repeat;
+     background-size: 14px auto;
      padding-left: 20px;
      min-height: 16px;
 }
@@ -838,6 +885,7 @@ tr:hover .percentBarText {
      font-size: 11pt !important;
      display: inline-block;
      width: 100%;
+     margin-top: -1px;
 }
 
 .snarkConfigTitle:hover a, .snarkConfigTitle:focus a {
@@ -852,10 +900,10 @@ tr:hover .percentBarText {
      letter-spacing: 0.15em;
      border: 1px solid #7778bf;
      border-top: 0;
-     background: #fff url("../../console/light/images/header.png") repeat-x scroll center center;
-     background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 51%, #eef 100%);
+     background: #fff url(/themes/console/light/images/header.png) repeat-x scroll center center;
+     background: linear-gradient(to bottom, #fff 50%, #eef 51%);
      font-variant: small-caps !important;
-     box-shadow: 0 1px 2px #ddd;
+     box-shadow: 0 1px 2px #ccf;
      display: inline-block;
      min-width: 260px;
      color: #559 !important;
@@ -868,9 +916,13 @@ tr:hover .percentBarText {
 @media screen and (-webkit-min-device-pixel-ratio:0) {
 .snarkConfigTitle, .snarkConfigTitle a, .toggleview,
 .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
-     font-size: 14pt !important;
+     font-size: 12pt !important;
      padding: 3px 15px 4px;
 }
+
+.snarkConfigTitle a {
+     padding: 0 1px !important;
+}
 }
 
 .snarkConfigTitle a:visited {
@@ -884,16 +936,23 @@ tr:hover .percentBarText {
 
 .snarkConfigTitle:active, .toggleview:active {
      color: #f30 !important;
-     box-shadow: inset 0 0 0 1px #fff, inset 2px 2px 3px 1px #555;
+     box-shadow: inset 0 0 0 1px #fff, inset 2px 2px 3px 1px #558;
 }
 
 .snarkConfigTitle img, .toggleview img {
-     margin: -2px -3px 0 0;
+     margin: -2px -1px 0 0;
      vertical-align: middle;
+     mix-blend-mode: luminosity;
 }
 
-.snarkConfigTitle:hover img, .toggleview:hover img, input.toggle_input:focus + .toggleview img, .snarkConfigTitle a:focus img {
+.addtorrentsection .toggleview img {
+     margin-top: -1px;
+}
+
+.toggleview:hover img, input.toggle_input:focus + .toggleview img,
+.configsection .snarkConfigTitle a:focus img, .configsection .snarkConfigTitle:hover a img {
      filter: drop-shadow(0 0 1px #f60) !important;
+     mix-blend-mode: normal;
 }
 
 .snarkConfigTitle:active a img, .toggleview:active img {
@@ -902,12 +961,17 @@ tr:hover .percentBarText {
      transition: ease transform 0.3s 0s;
 }
 
+.configsectionpanel .snarkConfigTitle img, .configsectionpanel .snarkConfigTitle:hover img {
+     mix-blend-mode: luminosity !important;
+     filter: drop-shadow(0 0 1px #bbb);
+}
+
 .snarkConfigTitle {
      color: #446;
 }
 
 .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
-     color: #31334f !important;
+     color: #555875 !important;
 }
 
 .snarkConfig {
@@ -929,33 +993,25 @@ tr:hover .percentBarText {
 
 .snarkTorrentInfo th {
      text-align: left;
-     padding: 6px 1px;
+     padding: 7px 1px;
 }
 
 .snarkTorrentInfo th:first-child {
-     background: url(images/file.png) center left 5px no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 51%, #eef 100%);
+     background: url(images/file.png) center left 5px no-repeat, linear-gradient(to bottom, #fafaff 50%, #eef 51%);
      background-size: 14px auto, 100% 100%;
+     background-blend-mode: luminosity, normal;
 }
 
 .snarkTorrentInfo td {
      text-align: left !important;
-     padding: 4px 0 4px 1px !important;
+     padding: 5px 0 5px 1px !important;
      border-top: 1px solid #bbf;
      vertical-align: middle;
 }
 
 .snarkTorrentInfo img {
      max-height: 16px;
-}
-
-.snarkTorrentInfo tr:nth-child(odd) {
-     background: #e0e0ff;
-     background: repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px);
-}
-
-.snarkTorrentInfo tr:nth-child(even) {
-     background: #eef;
-     background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px);
+     mix-blend-mode: luminosity;
 }
 
 .snarkTorrentInfo tr:last-child td {
@@ -975,46 +1031,6 @@ tr:hover .percentBarText {
      padding: 0 2px !important;
 }
 
-table#trackerselect {
-     width: 100% !important;
-     border-collapse: separate;
-     border-spacing: 5px;
-     margin-bottom: 0;
-}
-
-#trackerselect tr:first-child td:last-child {
-     width: 150px;
-     display: inline-block;
-     padding: 3px 5px;
-}
-
-#trackerselect tr:first-child td:nth-child(n+2) {
-     border: 1px solid #7778bf !important;
-     border-radius: 2px;
-     background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 51%, #eef 100%) #fff;
-     box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ccc;
-     white-space: nowrap;
-     overflow: hidden;
-     text-overflow: ellipsis;
-}
-
-#trackerselect td {
-     padding: 2px;
-}
-
-#trackerselect td:first-child {
-     width: 100px !important;
-     white-space: nowrap;
-}
-
-#trackerselect td:nth-child(2), #trackerselect td:nth-child(3) {
-}
-
-#trackerselect td:last-child {
-     overflow: hidden;
-     text-overflow: ellispis;
-}
-
 form {
      margin-bottom: 0;
 }
@@ -1047,16 +1063,14 @@ input[name="savepri"] {
 }
 
 input {
-     font-size: 9pt;
-     font-weight: bold;
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
      text-align: left;
      padding: 4px !important;
      border-radius: 2px;
      border: 1px solid #7778bf;
      background: #fff;
-     color: #272e3f;
+     color: #33333f;
      margin: 2px 4px 2px 0;
-     font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
      box-shadow: inset 0 0 1px #fff, 0 0 1px #999;
 }
 
@@ -1064,27 +1078,29 @@ input.r {
      text-align: right;
      background: #fff;
      border: 1px solid #7778bf;
+     color: #33333f;
 }
 
 input[type=submit], a.control, input.disabled {
      color: #227;
      background: #fff;
-     background: linear-gradient(to bottom, #fff 0%, #fff 50%, #ddf 50%, #ddf 100%);
+     background: linear-gradient(to bottom, #fff 50%, #ddf 50%);
      border: 1px solid #7778bf;
-     padding: 5px 8px !important;
-     font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+     padding: 6px 8px !important;
+     font: bold 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
      margin: 6px 3px 6px 6px !important;
      border-radius: 2px;
      min-width: 90px;
      text-align: center;
      box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ddd;
+     filter: drop-shadow(0px 0 1px #ccf);
 }
 
 input[type=submit]:hover, input[type=submit]:focus, a.control:hover, a.control:focus {
      color: #f60;
      border: 1px solid #559;
      background: #eef;
-     background: linear-gradient(#fff 0%, #fff 50%, #ffe8bf 50%, #efd9b3 100%);
+     background: linear-gradient(#fff 50%, #ffe8bf 50%, #efd9b3 100%);
      box-shadow: inset 0 0 0 1px #fff;
 }
 
@@ -1099,7 +1115,7 @@ a.control, a.controld {
      border-radius: 2px;
      font-weight: bold;
      margin: 6px 3px 6px 3px !important;
-     padding: 4px 8px 4px 5px !important;
+     padding: 5px 8px 5px 5px !important;
      white-space: nowrap;
      display: inline-block;
      min-width: 0 !important;
@@ -1126,7 +1142,7 @@ input[type=image], thead img {
 }
 
 thead img {
-     filter: hue-rotate(45deg) drop-shadow(0 0 1px #ddd);
+     filter: hue-rotate(45deg) contrast(120%) drop-shadow(0 0 1px #ddd);
 }
 
 .iframed thead img {
@@ -1146,23 +1162,28 @@ thead a:active img {
      width: 80%;
 }
 
+.addtorrentsection tr:first-child td > *, .newtorrentsection tr:first-child td > * {
+     vertical-align: middle;
+}
+
 thead img.disable, img.disable:hover {
      opacity: 0.4;
 }
 
 input[type="text"]:focus, input.r:focus, textarea:focus, input[name="nofilter_dataDir"]:focus {
      background: #fff;
-     color: #009;
-     border: 1px solid #66f;
-     transition: ease filter 0.3s 0s;
-     box-shadow: none;
+     color: #19191f;
+     border: 1px solid #676c7f;
+     box-shadow: 0 0 1px #89f;
 }
 
 input[type="text"], input.r, input[name="nofilter_dataDir"], textarea, select {
      min-width: 120px;
-     box-shadow: 1px 1px 1px #aaa inset, 0 0 0 1px #fff;
-     background: #efefff;
+     box-shadow: inset 1px 1px 1px rgba(204, 204, 204, 0.6);
+     background: #f8f8ff;
      padding: 5px 4px !important;
+     filter: drop-shadow(0px 0 1px #ccf);
+     color: #47475f;
 }
 
 textarea[name="i2cpOpts"] {
@@ -1191,12 +1212,12 @@ input[type="radio"], input[type="checkbox"], .optbox {
      height: 16px;
      box-shadow: none;
      background: none;
+     filter: sepia(100%) hue-rotate(185deg) drop-shadow(0 0 1px #ccf);
 }
 
-input[type="checkbox"]:hover, input[type="radio"]:hover,
-input[type="checkbox"]:focus, input[type="radio"]:focus {
+input[type="radio"]:hover, input[type="checkbox"]:hover, input[type="radio"]:focus, input[type="checkbox"]:focus {
+     filter: sepia(100%) hue-rotate(185deg) drop-shadow(0 0 3px #89f);
      outline: none;
-     filter: drop-shadow(0 0 3px #89f);
 }
 
 input[type="checkbox"][disabled]:hover, input[type="radio"][disabled]:hover,
@@ -1235,8 +1256,8 @@ input.disabled, input.disabled:hover, input.disabled:active, a.controld {
 }
 
 select {
-     background: #efefff url(images/dropdown.png) right center no-repeat !important;
-     font: 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+     background: url(images/dropdown.png) right center no-repeat #f8f8ff !important;
+     font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
      font-weight: bold;
      padding: 5px 16px 5px 3px !important;
      border-radius: 2px;
@@ -1244,11 +1265,17 @@ select {
      margin: 2px 4px 2px 0;
      -moz-appearance: none;
      -webkit-appearance: none;
-     color: #272e3f;
+     color: #41465f;
 }
 
-select:focus {
-     color: #001 !important;
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+select {
+     padding: 6px 16px 6px 6px !important;
+}
+}
+
+select:hover, select:focus {
+     color: #33333f !important;
      background: #fff url(images/dropdown.png) right center no-repeat !important;
      box-shadow: none;
 }
@@ -1258,7 +1285,7 @@ select:active, select option {
 }
 
 select[disabled], select[disabled]:hover {
-     background: #efefff url(images/dropdown.png) right center no-repeat !important;
+     background: #f8f8ff url(images/dropdown.png) right center no-repeat !important;
      opacity: 0.7;
      cursor: not-allowed;
 }
@@ -1268,7 +1295,8 @@ select::-ms-expand {
 }
 
 textarea {
-     color: #272e3f;
+     background: #f8f8ff;
+     color: #33333f;
      font-weight: bold;
      padding: 2px 4px;
      border-radius: 2px;
@@ -1288,7 +1316,7 @@ select:hover, input[type="checkbox"], input[type="radio"], input[type="submit"]
 
 img {
      border: none;
-     margin: 0 3px 1px 3px;
+     margin: 0 3px 0;
      vertical-align: middle;
      opacity: 1.0;
      line-height: 100%;
@@ -1309,6 +1337,11 @@ img[src$="details.png"] {
      mix-blend-mode: luminosity;
 }
 
+.snarkGraphicStatus img {
+     padding-top: 3px !important;
+     padding-bottom: 3px !important;
+}
+
 .newtorrentsection td:first-child, .addtorrentsection td:first-child, .configsectionpanel td:first-child {
      width: auto !important;
      text-align: right;
@@ -1318,10 +1351,6 @@ img[src$="details.png"] {
      padding-right: 5px;
 }
 
-.configsectionpanel .snarkConfigTitle:hover img {
-     filter: drop-shadow(0 0 1px #999);
-}
-
 .section, .mainsection .section, .mainsection {
      margin: 0;
      padding: 0;
@@ -1347,33 +1376,33 @@ img[src$="details.png"] {
 .newtorrentsection {
      margin: 0 0 10px 0;
      background: #fff url(images/snark_create.png) no-repeat right center;
-     background: url(images/snark_create.png) no-repeat right center, linear-gradient(to bottom, #fff, #e0e0ef);
-     background: url(images/snark_create.png) no-repeat scroll right center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #fff), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 1) 3px, #fff 5px);
-     background-size: 80px 80px, 100%;
+     background: url(images/snark_create.png) no-repeat right center, linear-gradient(to bottom, #fafaff, #e0e0ef);
+     background: url(images/snark_create.png) no-repeat scroll right center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #fafaff), repeating-linear-gradient(135deg, #fff 2px, rgba(221, 221, 255, 1) 3px, #fafaff 5px);
+     background-size: 80px 80px, 100% 100%;
 }
 
 .addtorrentsection {
      margin: 10px 0;
-     background: #fff url(images/snark_add.png) no-repeat right center;
-     background: url(images/snark_add.png) no-repeat 99% center, linear-gradient(to bottom, #fff, #e0e0ef);
-     background: url(images/snark_add.png) no-repeat scroll right center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #fff), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 1) 3px, #fff 5px);
-     background-size: 61px 61px, 100%;
+     background: #fff url(images/snark_add.png) no-repeat right 15px center;
+     background: url(images/snark_add.png) no-repeat right 15px center, linear-gradient(to bottom, #fafaff, #e0e0ef);
+     background: url(images/snark_add.png) no-repeat scroll right 15px center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #fafaff), repeating-linear-gradient(135deg, #fff 2px, rgba(221, 221, 255, 1) 3px, #fafaff 5px);
+     background-size: 61px 61px, 100% 100%;
 }
 
 .configsection {
      margin: 0;
      padding-bottom: 13px;
-     background: #fff url(images/configuration.png) 102% center no-repeat;
-     background: url(images/configuration.png) 102% center no-repeat, linear-gradient(to bottom, #fff, #e0e0ef);
-     background: url(images/configuration.png) no-repeat scroll right center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #fff), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 1) 3px, #fff 5px);
-     background-size: 84px 82px, 100%;
+     background: #fff url(images/configuration.png) right -25px center no-repeat;
+     background: url(images/configuration.png) right -25px center no-repeat, linear-gradient(to bottom, #fafaff, #e0e0ef);
+     background: url(images/configuration.png) no-repeat scroll right -25px center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #fafaff), repeating-linear-gradient(135deg, #fff 2px, rgba(221, 221, 255, 1) 3px, #fafaff 5px);
+     background-size: 84px 82px, 100% 100%;
 }
 
 .configsectionpanel {
      margin: -12px 0 0;
      background: #fff url(images/configuration.png) no-repeat scroll right center;
-     background: url(images/configuration.png) no-repeat scroll right center, linear-gradient(to bottom, #fff, #e0e0ef);
-     background: url(images/configuration.png) no-repeat scroll right center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #efefff 55px, #fff), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 1) 3px, #efefef 5px);
+     background: url(images/configuration.png) no-repeat scroll right center, linear-gradient(to bottom, #fafaff, #e0e0ef);
+     background: url(images/configuration.png) no-repeat scroll right center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #efefff 55px, #fafaff), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 1) 3px, #efefef 5px);
      background-size: 84px 82px, 100% 100%, 100% 100%;
 }
 
@@ -1405,10 +1434,6 @@ form:last-child .configsectionpanel {
      border-right: none;
 }
 
-.newtorrentsection form, .configsection form, .addtorrentsection form {
-     color: #001 !important;
-}
-
 .newtorrentsection table, .addtorrentsection table {
      margin-top: -5px;
 }
@@ -1418,18 +1443,68 @@ form:last-child .configsectionpanel {
      font-weight: bold;
 }
 
+/* new torrent -> tracker select */
+
 #trackerselect {
-     margin-top: 0;
+     width: 80% !important;
+     margin: 2px 0 0;
+     padding: 3px;
+     background: #f8f8ff;
+     background: linear-gradient(to bottom, #fafaff, #f2f2ff);
+     border-collapse: separate;
+     border-spacing: 5px;
+     border: 1px solid #7778bf;
+     border-radius: 2px;
+     box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ccf;
 }
 
-#trackerselect tr:first-child {
+#trackerselect tr:first-child td {
+     border: 1px solid #9fa5ff !important;
+     border-radius: 2px;
+     background: linear-gradient(to right, #eef, #fafaff 30%, #fafaff 70%, #eef) #fafaff;
+     box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ccc;
+     white-space: nowrap;
+     overflow: hidden;
+     text-overflow: ellipsis;
      font-weight: bold;
+     text-align: center;
+}
+
+#trackerselect td {
+     padding: 2px;
+     text-align: center;
 }
 
 #trackerselect td:first-child {
-     font-weight: normal;
+     white-space: nowrap;
 }
 
+#trackerselect td:last-child {
+     overflow: hidden;
+     text-overflow: ellispis;
+}
+
+#trackerselect td:first-child, #trackerselect td:last-child {
+     font-weight: normal;
+     width: 30% !important;
+}
+
+#trackerselect tr:nth-child(n+2):hover td {
+     background: #ffd;
+     color: #19191f !important;
+     border-radius: 6px !important;
+}
+
+#trackerselect tr:hover td:first-child {
+     border-radius: 3px 0 0 3px;
+}
+
+#trackerselect tr:hover td:last-child {
+     border-radius: 0 3px 3px 0;
+}
+
+/* end new torrent -> tracker select */
+
 .configsection a {
      color: #55a;
      font-weight: bold;
@@ -1456,7 +1531,7 @@ code, tt {
 .trackerconfig th:first-child {
      border-radius: 2px 0 0 2px;
      border-left: 1px solid #339;
-     background: url(/themes/snark/ubergine/images/nuke.png) center right 8px no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 51%, #eef 100%);
+     background: url(/themes/snark/ubergine/images/nuke.png) center right 8px no-repeat, linear-gradient(to bottom, #fff 50%, #eef 51%, #eef 100%);
 }
 
 .trackerconfig th:last-child {
@@ -1542,6 +1617,10 @@ input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent
      word-spacing: 0em !important;
 }
 
+.peerinfo td[colspan="4"] {
+     padding-left: 0 !important;
+}
+
 /* debug */
 
 .debuginfo td {
@@ -1602,7 +1681,7 @@ input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent
 /* debug panel */
 
 #dhtdebugPanel {
-     background: linear-gradient(to top, rgba(224, 224, 255, 0.5), #fff), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.5) 2px, rgb(221, 221, 255) 3px, #fff 5px);
+     background: linear-gradient(to top, rgba(224, 224, 255, 0.5), #fafaff), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.5) 2px, rgb(221, 221, 255) 3px, #fff 5px);
      box-shadow: inset 0 0 0 1px #efefff;
      border: 1px solid #7778bf;
      border-top: none;
@@ -1784,7 +1863,9 @@ hr.debug:last-child {
 
 #configs td:first-child {
      min-width: 220px !important;
+     width: 30% !important;
      font-weight: bold;
+     color: #41465f;
 }
 
 #bwHelp {
@@ -1870,16 +1951,6 @@ hr.debug:last-child {
      padding: 8px 5px;
 }
 
-.snarkCommentInfo tr:nth-child(even), .snarkComments tr:nth-child(odd) {
-     border-top: 1px solid #bbf;
-     background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px) #fff;
-}
-
-.snarkCommentInfo tr:nth-child(odd), .snarkComments tr:nth-child(even) {
-     border-top: 1px solid #bbf;
-     background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px) #fff;
-}
-
 .snarkCommentInfo th {
      padding: 8px 5px;
      background: url(images/comment.png) 8px center no-repeat, linear-gradient(to bottom, #fff 50%, rgb(240, 240, 255));
@@ -1896,6 +1967,7 @@ hr.debug:last-child {
 
 .snarkCommentInfo td:first-child {
      font-weight: bold;
+     color: #41465f;
      white-space: nowrap;
 }
 
@@ -1914,6 +1986,7 @@ hr.debug:last-child {
 .snarkCommentInfo textarea {
      font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif !important;
      font-weight: normal;
+     font-size: 10pt;
      width: 100%;
      min-height: 64px;
      height: 64px;
@@ -2028,8 +2101,9 @@ hr.debug:last-child {
 }
 
 #newRating select {
-     width: 90%;
-     margin-left: 10px;
+     width: 99%;
+     margin-left: 2px;
+     text-overflow: ellipsis;
 }
 
 #myRating td:empty {
@@ -2053,6 +2127,87 @@ hr.debug:last-child {
 
 /* end Comments section */
 
+/* custom radios/checkboxes for chrome/blink  */
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution:.001dpcm) {
+input[type="checkbox"], input[type="checkbox"]:checked, input[type="checkbox"][disabled], input[type="checkbox"][disabled]:checked {
+     background: #f8f8ff;
+     width: 19px;
+     height: 19px;
+     box-shadow: inset 1px 1px 1px rgba(204, 204, 204, 0.6);
+     border-radius: 2px;
+     -webkit-appearance: inherit;
+     border: 1px solid #7778bf !important;
+     position: relative;
+     box-sizing: border-box;
+     filter: drop-shadow(0 0 1px #ccf);
+}
+
+input[type="checkbox"]:checked::before {
+     position: absolute;
+     top: 1px;
+     left: 1px;
+     content: "\2714";
+     border-radius: 1px;
+     font-size: 15pt;
+     color: #41465f;
+     line-height: 80%;
+     font-family: sans-serif;
+     overflow: hidden;
+     width: 16px;
+     height: 16px;
+}
+
+input[type="radio"], input[type="radio"]:checked, input[type="radio"][disabled], input[type="radio"][disabled]:checked {
+     background: #f8f8ff;
+     width: 19px;
+     height: 19px;
+     box-shadow: inset 0 0 2px #7778bf;
+     border-radius: 50%;
+     -webkit-appearance: none;
+     border: 1px solid #7778bf !important;
+     position: relative;
+     box-sizing: border-box;
+     filter: drop-shadow(0 0 1px #ccf);
+}
+
+input[type="radio"]:checked::before {
+     content: "";
+     position: absolute;
+     border-radius: 50%;
+     left: 25%;
+     top: 25%;
+     width: 9px;
+     height: 9px;
+     background: #41465f;
+}
+
+input[type="checkbox"]:hover, input[type="radio"]:hover, input[type="checkbox"]:focus, input[type="radio"]:focus {
+     background: #fff;
+     filter: drop-shadow(0 0 3px #89f) !important;
+}
+
+input[type="checkbox"][disabled], input[type="radio"][disabled], input[type="checkbox"][disabled]:hover, input[type="radio"][disabled]:hover,
+input[type="checkbox"][disabled]:checked, input[type="radio"][disabled]:checked, input[type="checkbox"][disabled]:checked:hover, input[type="radio"][disabled]:checked:hover,
+.knownTracker input[type="radio"]:hover, .knownTracker input[type="radio"]:checked:hover, .knownTracker input[type="radio"][disabled]:hover, .knownTracker input[type="radio"][disabled]:checked:hover {
+     filter: none !important;
+     box-shadow: none !important;
+     opacity: 0.5;
+}
+
+.priority input[type="radio"] {
+     transform: scale(0.8);
+}
+
+input.toggle_input, input.toggle_input:checked { /* hide checkbox and use label as faux panel heading */
+      position: absolute;
+      height: 0 !important;
+      width: 0 !important;
+}
+}
+
+/* end custom radios/checkboxes */
+
 /* MS Edge 14+ rendering bug fix */
 _:-ms-lang(x), *, *:hover, *:focus, input, input:hover, input:focus, a:hover, a:focus {
      filter: none !important;
@@ -2260,12 +2415,16 @@ b.alwaysShow {
 }
 
 @media screen and (min-width: 1400px) {
-body, td, button, input, select, .snarkAddInfo, code, tt, th, a, a:link, textarea, .snarkCommentInfo textarea {
+body, .snarkAddInfo, .snarkCommentInfo textarea {
      font-size: 10pt !important;
 }
 
-.snarkMessages li, .snarkMessages a {
+code, tt {
      font-size: 9pt !important;
+}
+
+.snarkMessages li, .snarkMessages a {
+     font-size: 8pt !important;
      line-height: 130%;
 }
 
@@ -2300,7 +2459,7 @@ input[type="submit"] {
 
 .snarkConfigTitle, .toggleview, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
      font-size: 12pt !important;
-     padding: 4px 1px !important;
+     padding: 4px 1px 5px !important;
      min-width: 300px;
 }
 
@@ -2326,27 +2485,33 @@ input[type="submit"] {
      padding-top: 4px !important;
      padding-bottom: 4px !important;
 }
-/*
-.debugConnection {
-     background: #337;
-     border-radius: 2px;
-     padding: 2px 4px;
-     color: #fff;
-     margin-top: 2px;
-     margin-bottom: 2px;
-     font-size: 9pt !important;
-     display: inline-block;
-}
-*/
 }
 
 @media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1400px) {
-.snarkConfigTitle a, .toggleview,
-.configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
-     font-size: 14pt !important;
-     padding: 3px 1px 4px !important;
+.toggleview, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
+     font-size: 12.5pt !important;
+     padding: 4px 1px 4px !important;
      min-width: 300px;
 }
+
+.snarkConfigTitle a {
+     font-size: 12.5pt !important;
+     margin-top: 0 !important;
+}
+}
+
+@media screen and (min-width: 1600px) {
+.snarkMessages li, .snarkMessages a, .snarkTorrents tt {
+     font-size: 9pt !important;
+}
+
+a, a:link, th, td, button, input, select, textarea {
+     font-size: 10pt !important;
+}
+
+.snarkConfigTitle a {
+     font-size: 12.5pt !important;
+}
 }
 
 /* end responsive layout */
diff --git a/installer/resources/themes/snark/midnight/snark.css b/installer/resources/themes/snark/midnight/snark.css
index bf322ae7e1..69d56653a4 100644
--- a/installer/resources/themes/snark/midnight/snark.css
+++ b/installer/resources/themes/snark/midnight/snark.css
@@ -260,6 +260,11 @@ body.iframed {
      filter: drop-shadow(0 0 1px #000);
 }
 
+.snarkMessages li, .snarkMessages a {
+     font-weight: bold;
+     font-size: 8pt !important;
+}
+
 .snarkMessages img {
      float: right;
      margin: -3px -4px 4px 4px;
@@ -276,7 +281,7 @@ body.iframed {
      z-index: 1;
 }
 
-.snarkMessages img:hover, .snarkMessages img:focus {
+.snarkMessages img:hover, .snarkMessages img:focus, .closeLog img:hover, .closeLog img:focus {
      mix-blend-mode: normal !important;
      border: 1px solid #443da0 !important;
      border-top: 0 none !important;
@@ -432,8 +437,9 @@ tfoot tr:nth-child(n+1) {
      border-top: 1px solid #443da0 !important;
 }
 
-.snarkTorrents tfoot th::first-line {
-     font-weight: bold;
+.snarkTorrents tfoot tr:first-child th {
+     font-weight: bold !important;
+     color: #c9ceff !important;
 }
 
 .snarkTorrents tfoot th:nth-child(n+2) {
@@ -1115,9 +1121,9 @@ _:-ms-lang(x), .snarkTorrentOdd, .snarkTorrentOdd td, .SnarkTorrentEven, .SnarkT
      font-weight: bold;
      font-variant: small-caps !important;
      display: inline-block;
-     min-width: 260px;
+     min-width: 300px;
      margin: -1px 0 -5px 0;
-     padding: 3px 1px 3px 1px;
+     padding: 4px 1px 4px 1px;
      text-align: center !important;
      letter-spacing: .15em;
      border: 1px solid #443da0;
@@ -1127,6 +1133,15 @@ _:-ms-lang(x), .snarkTorrentOdd, .snarkTorrentOdd td, .SnarkTorrentEven, .SnarkT
      text-shadow: 0 0 1px #000;
 }
 
+.toggleview {
+     padding: 3px 1px 5px 1px;
+}
+
+.snarkConfigTitle a {
+     display: inline-block;
+     margin-top: -1px;
+}
+
 .snarkConfigTitle:hover, .toggleview:hover, input.toggle_input:focus + .toggleview {
      background: #002 !important;
      background: linear-gradient(to bottom, #004 50%, #002 50%) !important;
@@ -1604,7 +1619,7 @@ img.thumb {
 #trackerselect {
      width: 100% !important;
      width: calc(100% - 150px) !important;
-     margin: 2px 5px 0 5px;
+     margin: 8px 5px 4px 5px;
      border: 1px solid #120f35;
 }
 
@@ -1625,14 +1640,14 @@ _:-ms-lang(x), #trackerselect tr:last-child {
      border-bottom: 1px solid #120f35;
 }
 
-#trackerselect tr:first-child {
+#trackerselect tr:first-child td {
      font-weight: bold;
      border-bottom: 1px solid #120f35;
      background: linear-gradient(to bottom, #010011, #000);
 }
 
 #trackerselect tr:first-child td {
-     padding: 3px 5px 3px 20px;
+     padding: 7px 5px 7px 20px;
 }
 
 #trackerselect td {
@@ -1640,15 +1655,11 @@ _:-ms-lang(x), #trackerselect tr:last-child {
      font-size: 9pt;
 }
 
-#trackerselect td:first-child {
-     width: 20%;
+#trackerselect td:first-child, #trackerselect td:last-child {
+     width: 40%;
      font-weight: normal;
 }
 
-#trackerselect td:nth-child(4) {
-     width: 70%;
-}
-
 #trackerselect input {
      margin: 3px !important;
 }
@@ -1789,6 +1800,7 @@ input[name="nofilter_commentsName"] {
 
 #configs td:first-child {
      min-width: 200px;
+     width: 25%;
      padding-left: 10px !important;
 }
 
@@ -2746,15 +2758,11 @@ a, th, thead th, tfoot th, td, select, select option, .snarkAddInfo, .snarkFileN
 }
 
 @media screen and (min-width: 1400px) {
-code, textarea, input, tt {
+a, th, thead th, tfoot th, td, select, select option, .snarkAddInfo, .snarkFileName, textarea, input[name="nofilter_dataDir"], input {
      font-size: 10pt !important;
 }
 
-a, th, thead th, tfoot th, td, select, select option, .snarkAddInfo, .snarkFileName, code, textarea, input[name="nofilter_dataDir"], input, code {
-     font-size: 10pt !important;
-}
-
-.snarkMessages li, .snarkMessages a {
+code, tt {
      font-size: 9pt !important;
 }
 
@@ -2776,7 +2784,11 @@ a, th, thead th, tfoot th, td, select, select option, .snarkAddInfo, .snarkFileN
 }
 
 .snarkConfigTitle, .toggleview {
-     min-width: 300px !important;
+     min-width: 340px !important;
+}
+
+.snarkConfigTitle a {
+     margin-bottom: 0 !important;
 }
 
 .snarkMessages {
@@ -2843,5 +2855,11 @@ a, th, thead th, tfoot th, td, select, select option, .snarkAddInfo, .snarkFileN
 }
 }
 
+@media screen and (min-width: 1600px) {
+.snarkMessages li, .snarkMessages a {
+     font-size: 9pt !important;
+}
+}
+
 /* end responsive layout */
 
diff --git a/installer/resources/themes/snark/ubergine/snark.css b/installer/resources/themes/snark/ubergine/snark.css
index d37726fefd..f08faebd70 100644
--- a/installer/resources/themes/snark/ubergine/snark.css
+++ b/installer/resources/themes/snark/ubergine/snark.css
@@ -275,7 +275,8 @@ _:-ms-lang(x), .snarkNav:last-child[href="/i2psnark/"] {
 }
 
 .snarkMessages li {
-     margin-left: -15px;
+     margin-left: -18px;
+     padding-left: 10px;
 }
 
 .snarkMessages li::before {
@@ -285,7 +286,7 @@ _:-ms-lang(x), .snarkNav:last-child[href="/i2psnark/"] {
      width: 12px;
      height: 11px;
      background-size: 9px 9px;
-     margin-left: 2px;
+     margin-left: -6px;
      margin-right: 2px;
 }
 
@@ -422,7 +423,7 @@ tfoot td:first-child {
 }
 
 .snarkTorrents thead th  {
-     border-top: 1px solid transparent !important;
+     border-top: none !important;
      border-bottom: 1px solid #313 !important;
      padding-top: 3px;
      padding-bottom: 6px;
@@ -550,9 +551,11 @@ th.snarkTorrentAction input[type="image"]:hover, .snarkTorrentAction input[type=
 
 .snarkTorrents tt {
      font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
-     color: #cc0;
      font-weight: bold;
+     font-size: 8pt !important;
+     color: #cc0;
      margin-right: 2px;
+     letter-spacing: 0.1em;
 }
 
 #totals span, #ourDest {
@@ -839,7 +842,7 @@ _:-ms-lang(x), .snarkDirInfo img, .snarkTorrents img {
 }
 
 .priorityIndicator img[src*="clock"] {
-     margin-top: 3px;
+     margin-bottom: 1px;
 }
 
 .percentBarOuter {
@@ -905,6 +908,10 @@ _:-ms-lang(x), .snarkDirInfo img, .snarkTorrents img {
      transition: ease opacity 0.2s;
 }
 
+.snarkDirInfo .percentBarText {
+     padding: 0;
+}
+
 .iframed .percentBarText, .iframed .percentBarText:hover, .iframed .percentBarText:focus {
      transition: none;
 }
@@ -951,7 +958,6 @@ _:-ms-lang(x), .snarkDirInfo img, .snarkTorrents img {
 }
 
 .snarkAddInfo {
-     font-size: 8pt;
      line-height: 100% !important;
      white-space: normal;
      background: url(images/infocircle.png) left center no-repeat;
@@ -965,7 +971,8 @@ _:-ms-lang(x), .snarkDirInfo img, .snarkTorrents img {
      background: #101;
      background: rgba(17, 0, 17, 0.7);
      border-radius: 2px;
-     color: #fbf;
+     font-size: 8pt !important;
+     color: #ff7;
      padding: 2px 4px;
      box-shadow: inset 0 0 0 1px #212;
      -moz-user-select: all;
@@ -1072,11 +1079,15 @@ th.headerpriority br, .snarkTorrents thead th br {
 }
 
 .snarkConfigTitle img, label.toggleview img {
-     margin: 1px -3px 2px 0;
+     margin: 1px -1px 2px 0;
      vertical-align: middle;
      filter: drop-shadow(0 0 1px #000);
 }
 
+.snarkConfigTitle img {
+     margin-right: -2px !important;
+}
+
 .configsectionpanel .snarkConfigTitle:hover {
      color: #f7e3fc !important;
 }
@@ -1295,8 +1306,8 @@ input[name="upBW"] + i {
 }
 
 input.default {
-     width: 1px; 
-     height: 1px; 
+     width: 1px;
+     height: 1px;
      visibility: hidden;
 }
 
@@ -1474,21 +1485,6 @@ input.stoptorrent:hover, input.stoptorrent:focus {
      background: url(images/btn_stop.png), linear-gradient(to bottom, #767 0%, #989 100%);
 }
 
-/*
-a.control:active, input[type="submit"]:active, input[type="reset"]:active {
-     color: #ce1641 !important;
-     border: 1px solid #fff !important;
-     box-shadow: inset 3px 3px 3px #fff;
-}
-
-input[type=submit]:active, a.control:active {
-     background-blend-mode: soft-light;
-     color: #2e134c !important;
-     filter: drop-shadow(0 0 1px #f60) sepia(100%) invert(100%) !important;
-     mix-blend-mode: hard-light;
-}
-*/
-
 a.control:active, input[type="submit"]:active, input[type="reset"]:active {
      background-color: #322c5c !important;
      color: #c6bfff;
@@ -1510,6 +1506,7 @@ select {
      -webkit-appearance: none;
      -moz-appearance: none;
      box-shadow: inset 1px 1px 2px 1px #101;
+     text-overflow: ellipsis;
 }
 
 select:hover, select:focus, select:active  {
@@ -2173,6 +2170,7 @@ input#toggle_debug:checked + label + #dhtDebugInner {
 
 #configs td:first-child {
      min-width: 220px !important;
+     width: 25%;
      font-weight: bold;
 }
 
@@ -2405,7 +2403,7 @@ input#toggle_debug:checked + label + #dhtDebugInner {
 }
 
 #newRating select {
-     width: 90%;
+     width: 99%;
 }
 
 #myRating td:empty {
@@ -2646,6 +2644,10 @@ td.snarkTorrentStatus, td.snarkTorrentStatus a {
 #commentDeleteAction td {
     padding-top: 4px;
 }
+
+#trackerselect td {
+     font-size: 8pt !important;
+}
 }
 
 @media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 1200px) {
@@ -2778,14 +2780,14 @@ code {
 
 .snarkNav:link:first-child, .snarkNav:last-child[href="/i2psnark/"] {
      background-position: 11px 45%, center center !important;
-
 }
+
 .snarkNav:link {
      font-size: 11pt;
 }
 
 .snarkConfigTitle, label.toggleview {
-     font-size: 13pt !important;
+     font-size: 12pt !important;
      min-width: 320px !important;
 }
 
@@ -2901,12 +2903,22 @@ select {
 }
 }
 
+@media screen and (min-width: 1400px) and (-webkit-min-device-pixel-ratio:0) {
+.snarkConfigTitle, label.toggleview {
+     font-size: 12.5pt !important;
+}
+
+select {
+     padding: 6px 18px 6px 8px !important;
+}
+}
+
 @media screen and (min-width: 1600px) {
 .snarkTorrentUploaded {
      padding-left: 6px;
 }
 
-.snarkMessages {
+.snarkMessages, .snarkTorrents tt, .snarkAddInfo code {
      font-size: 9pt !important;
 }
 }
@@ -3107,3 +3119,151 @@ th a img {
 
 /* end responsive layout */
 
+
+.noscriptWarning {
+     margin-right: 7px !important;
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, sans-serif;
+     font-size: 9pt;
+     mix-blend-mode: luminosity;
+     position: relative;
+     z-index: 1;
+}
+
+.noscriptWarning::before {
+     mix-blend-mode: luminosity;
+}
+
+#closeLog {
+     z-index: 1000;
+}
+
+/* create torrent -> trackers table */
+
+#trackerselect td:first-child, #trackerselect td:nth-child(2), #trackerselect td:nth-child(3) {
+     width: 20%;
+     min-width: 100px;
+     white-space: nowrap;
+}
+
+#trackerselect {
+     border: 1px solid #101;
+     border-collapse: separate;
+     border-spacing: 0;
+     width: 80% !important;
+     margin: 8px 0 4px 4px;
+     box-shadow: 0 0 1px 1px rgba(16, 8, 16, 0.3);
+}
+
+#trackerselect td {
+     padding: 5px !important;
+}
+
+#trackerselect td:first-child {
+/*     padding-right: 15px !important;*/
+     width: 30%;
+     text-align: center;
+}
+
+#trackerselect tr:first-child td {
+     background: #000;
+     background: linear-gradient(to bottom, #313, #000);
+     padding-top: 8px !important;
+     padding-bottom: 8px !important;
+     border-bottom: 1px solid #313;
+     font-weight: bold !important;
+}
+
+#trackerselect tr:nth-child(n+2) td {
+     border-right: 1px solid #101;
+     border-right: 1px solid rgba(16,0,16,0.5);
+}
+
+#trackerselect tr:nth-child(n+3) td {
+     border-top: 1px solid #101;
+}
+
+#trackerselect tr:nth-child(even) {
+     background: rgba(8,0,8,0.8);
+}
+
+#trackerselect tr:nth-child(odd) {
+     background: rgba(16,0,16,0.5);
+}
+
+#trackerselect td:nth-child(even) {
+     background: rgba(48,0,48,0.2);
+}
+
+#trackerselect td:nth-child(odd) {
+     background: rgba(64,0,64,0.2);
+}
+
+#trackerselect td:last-child {
+     text-align: center;
+     width: 30%;
+     border-right: none !important;
+}
+
+#trackerselect tr:nth-child(n+2):hover td {
+     background: #58165e !important;
+     background: linear-gradient(to bottom, #58165e, #4a0d56) !important;
+}
+
+#trackerselect tr:first-child td:first-child {
+     border-radius: 3px 0 0 0;
+}
+
+#trackerselect tr:first-child td:last-child {
+     border-radius: 0 3px 0 0;
+}
+
+#trackerselect tr:last-child td:first-child {
+     border-radius: 0 0 0 3px;
+}
+
+#trackerselect tr:last-child td:last-child {
+     border-radius: 0 0 3px 0;
+}
+
+#trackerselect input[type="radio"], #trackerselect input[type="checkbox"] {
+     margin: 2px !important;
+}
+
+.trackerName {
+     display: inline-block;
+     white-space: nowrap;
+     text-align: left;
+     border: 1px solid #101;
+     background: #202;
+     background: rgba(32,0,32,0.5);
+     border-radius: 3px;
+     padding: 1px 10px 1px 5px;
+     vertical-align: middle;
+}
+
+.trackerName::before {
+     content: "";
+     display: inline-block;
+     width: 20px;
+     height: 20px;
+     background: url(images/button_tracker_hover.png) left center no-repeat;
+     background-size: 16px auto;
+     vertical-align: middle;
+     opacity: 0.3;
+}
+
+@media screen and (max-width: 1050px) {
+#trackerselect {
+     width: 75% !important;
+}
+
+#trackerselect td {
+     min-width: 0;
+}
+
+#trackerselect td:first-child, #trackerselect td:last-child {
+     width: 15%;
+}
+}
+
+/* end create torrent -> trackers table */
diff --git a/installer/resources/themes/snark/vanilla/snark.css b/installer/resources/themes/snark/vanilla/snark.css
index 28217c7a83..68b0a15cbe 100644
--- a/installer/resources/themes/snark/vanilla/snark.css
+++ b/installer/resources/themes/snark/vanilla/snark.css
@@ -1129,7 +1129,15 @@ thead img.disable, img.disable:hover {
 }
 
 #trackerselect {
+     margin: 10px 0 5px 0;
      width: 100% !important;
+     width: calc(100% - 202px) !important;
+     border: 1px solid #6f533e;
+     margin-left: 5px;
+     border-collapse: separate;
+     border-spacing: 0;
+     border-radius: 2px;
+     box-shadow: 0 0 2px 1px rgba(77, 69, 62, 0.3);
 }
 
 #trackerselect tr:first-child td {
@@ -1140,10 +1148,21 @@ thead img.disable, img.disable:hover {
 
 #trackerselect td {
      white-space: nowrap !important;
+     text-align: center;
+}
+
+#trackerselect tr:nth-child(n+2) td {
+     border-right: 1px solid #6f533e;
+     border-right: 1px solid rgba(111, 83, 62, 0.5);
+}
+
+#trackerselect tr:nth-child(n+2) td:last-child {
+     border-right: none;
 }
 
 #trackerselect td:nth-child(2), #trackerselect td:nth-child(3) {
      min-width: 60px !important;
+     max-width: 200px !important;
 }
 
 .trackerconfig tr:first-child {
@@ -1151,11 +1170,25 @@ thead img.disable, img.disable:hover {
      filter: drop-shadow(0 0 1px #aaa);
 }
 
-#trackerselect td:first-child {
-     font-weight: normal;
+#trackerselect tr:first-child td {
+     background: linear-gradient(to bottom, #efefef, #cfc7c2);
+     border-bottom: 1px solid #6f533e;
 }
 
-#configs input[type="submit"], .trackerconfig input[type="submit"], input[name="savepri"] {
+#trackerselect tr:nth-child(n+2):hover td {
+     background: #f9efcf !important;
+}
+
+#trackerselect td:first-child, #trackerselect td:last-child {
+     font-weight: normal;
+     width: 20%;
+}
+
+#trackerselect input[type="radio"], #trackerselect input[type="checkbox"] {
+     margin: 4px !important;
+}
+
+#configs, input[type="submit"], .trackerconfig input[type="submit"], input[name="savepri"] {
      text-transform: capitalize;
 }
 
@@ -2097,11 +2130,11 @@ input#toggle_debug:checked + label + #dhtDebugInner {
      font-size: 10pt !important;
 }
 
-.resourceError tr:nth-child(odd) {
+.resourceError tr:nth-child(odd), #trackerselect tr:nth-child(odd) {
      background: #dfd6d1;
 }
 
-.resourceError tr:nth-child(even) {
+.resourceError tr:nth-child(even), #trackerselect tr:nth-child(even) {
      background: #efe6e0;
 }
 
@@ -2166,6 +2199,7 @@ input#toggle_debug:checked + label + #dhtDebugInner {
 
 #configs td:first-child {
      min-width: 240px !important;
+     width: 25%;
      font-weight: bold;
      text-align: right;
 }
@@ -2457,6 +2491,7 @@ td#bwHelp a {
      width: 90%;
      width: calc(100% - 10px);
      margin-left: 8px;
+     text-overflow: ellipsis;
 }
 
 #addCommentText {
@@ -2817,11 +2852,11 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, a.control, input
      font-size: 10pt !important;
 }
 
-tt, .snarkTorrents tt, textarea {
+textarea {
      font-size: 9pt !important;
 }
 
-.snarkMessages {
+tt, .snarkTorrents tt, .snarkMessages {
      font-size: 8pt !important;
 }
 
@@ -2831,8 +2866,8 @@ tt, .snarkTorrents tt, textarea {
 }
 
 .snarkNav:link {
-     font-size: 12pt;
-     background-size: 18px auto, 100% 100%, 100% 100% !important;
+     font-size: 11.5pt;
+     background-size: 17px auto, 100% 100%, 100% 100% !important;
 }
 
 .nav_main:link, .nav_forum:link {
@@ -2939,9 +2974,15 @@ tr#torrentInfoStats td {
 }
 
 @media screen and (min-width: 1600px) {
-.snarkMessages {
+
+tt, .snarkTorrents tt, .snarkMessages {
      font-size: 9pt !important;
 }
+
+.snarkNav:link {
+     font-size: 12pt;
+     background-size: 18px auto, 100% 100%, 100% 100% !important;
+}
 }
 
 /* mini-mode */
@@ -2951,8 +2992,8 @@ tr#torrentInfoStats td {
      min-width: 650px !important;
 }
 
-.snarkNav:link, .snarkNav:visited {
-     font-size: 9pt !important;
+.snarkNav:link, .snarkNav:visited, #configs td, #configs input, #configs select {
+     font-size: 8pt !important;
 }
 
 th.snarkTorrentStatus a img, .snarkTorrentETA a img, .snarkTrackerDetails a img {
@@ -2972,6 +3013,17 @@ th.snarkTorrentStatus a img, .snarkTorrentETA a img, .snarkTrackerDetails a img
      max-height: 18px;
 }
 
+.snarkTorrents th:nth-child(2) img {
+     display: none !important;
+}
+
+.snarkTorrentName a {
+     white-space: nowrap;
+     overflow: hidden;
+     text-overflow: ellipsis !important;
+     max-width: 360px;
+}
+
 .snarkTorrentUploaded, .snarkTorrentRateUp, .peerinfo, .debuginfo {
      display: none;
 }