From 2b82312b7745256c990d36d3bd59f134f8da015b Mon Sep 17 00:00:00 2001
From: str4d <str4d@mail.i2p>
Date: Sat, 20 May 2017 07:26:19 +0000
Subject: [PATCH] I2PSnark changes:

- Make DHT debug section collapsible
- Tooltips for downloading/finished torrents
- Download bars for torrents, torrent parts and peer downloads
- Friendlier date format (with completed: <date> tooltip for finished torrents)
---
 .../org/klomp/snark/web/I2PSnarkServlet.java  |  64 ++-
 history.txt                                   |   7 +
 .../themes/snark/classic/images/debug.png     | Bin 0 -> 668 bytes
 .../resources/themes/snark/classic/snark.css  | 369 ++++++++++++------
 .../themes/snark/dark/images/debug.png        | Bin 0 -> 668 bytes
 .../resources/themes/snark/dark/snark.css     | 365 +++++++++++------
 .../themes/snark/light/images/debug.png       | Bin 0 -> 668 bytes
 .../resources/themes/snark/light/snark.css    | 341 ++++++++++++----
 .../themes/snark/midnight/images/debug.png    | Bin 0 -> 668 bytes
 .../resources/themes/snark/midnight/snark.css | 303 ++++++++++----
 .../themes/snark/ubergine/images/debug.png    | Bin 0 -> 668 bytes
 .../resources/themes/snark/ubergine/snark.css | 337 +++++++++++++---
 .../themes/snark/vanilla/images/debug.png     | Bin 0 -> 668 bytes
 .../resources/themes/snark/vanilla/snark.css  | 348 ++++++++++++++---
 14 files changed, 1592 insertions(+), 542 deletions(-)
 create mode 100644 installer/resources/themes/snark/classic/images/debug.png
 create mode 100644 installer/resources/themes/snark/dark/images/debug.png
 create mode 100644 installer/resources/themes/snark/light/images/debug.png
 create mode 100644 installer/resources/themes/snark/midnight/images/debug.png
 create mode 100644 installer/resources/themes/snark/ubergine/images/debug.png
 create mode 100644 installer/resources/themes/snark/vanilla/images/debug.png

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 23683ca35..f0c2987cc 100644
--- a/apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java
+++ b/apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java
@@ -725,8 +725,14 @@ public class I2PSnarkServlet extends BasicServlet {
                 if (showDebug) {
                     out.write("</tr>\n<tr class=\"dhtDebug\">");
                     out.write("<th colspan=\"11\">");
+                    out.write("<div id=\"dhtDebugPanel\">");
+                    out.write("<input class=\"toggle_input\" id=\"toggle_debug\" type=\"checkbox\"><label class=\"toggleview\" for=\"toggle_debug\">");
+                    out.write(toThemeImg("debug"));
+                    out.write(' ');
+                    out.write(_t("Dht Debug"));
+                    out.write("</label><div id=\"dhtDebugInner\">");
                     out.write(dht.renderStatusHTML());
-                    out.write("</th>");
+                    out.write("</div></div></th>");
                 }
             }
             out.write("</tr></tfoot>\n");
@@ -1710,10 +1716,26 @@ public class I2PSnarkServlet extends BasicServlet {
             out.write(DataHelper.formatDuration2(Math.max(remainingSeconds, 10) * 1000)); // (eta 6h)
         out.write("</td>\n\t");
         out.write("<td align=\"right\" class=\"snarkTorrentDownloaded\">");
-        if (remaining > 0)
+        if (remaining > 0) {
+            long percent = 100 * (total - remaining) / total;
+            out.write("<div class=\"percentBarOuter\">");
+            out.write("<div class=\"percentBarInner\" style=\"width: " + percent + "%;\">");
+            out.write("<div class=\"percentBarText\" tabindex=\"0\" title=\"");
+            out.write(percent + "% " + _t("complete") + " - " + DataHelper.formatSize2(remaining) + "B " + _t("remaining"));
+            out.write("\">");
             out.write(formatSize(total-remaining) + thinsp(noThinsp) + formatSize(total));
-        else if (remaining == 0)
+            out.write("</div></div></div>");
+        } else if (remaining == 0) {
+            // needs locale configured for automatic translation
+            SimpleDateFormat fmt = new SimpleDateFormat("HH:mm, EEE dd MMM yyyy");
+            fmt.setTimeZone(SystemVersion.getSystemTimeZone(_context));
+            long[] dates = _manager.getSavedAddedAndCompleted(snark);
+            String date = fmt.format(new Date(dates[1]));
+            out.write("<div class=\"percentBarComplete\" title=\"");
+            out.write(_t("Completed") + ": " + date + "\">");
             out.write(formatSize(total)); // 3GB
+            out.write("</div>");
+        }
         //else
         //    out.write("??");  // no meta size yet
         out.write("</td>\n\t");
@@ -1825,7 +1847,7 @@ public class I2PSnarkServlet extends BasicServlet {
                     continue;
                 out.write("<tr class=\"peerinfo " + rowClass + "\"><td title=\"");
                 out.write(_t("Peer attached to swarm"));
-                out.write("\"></td><td colspan=\"4\" align=\"right\">");
+                out.write("\"></td><td colspan=\"4\">");
                 PeerID pid = peer.getPeerID();
                 String ch = pid != null ? pid.toString().substring(0, 4) : "????";
                 String client;
@@ -1867,7 +1889,10 @@ public class I2PSnarkServlet extends BasicServlet {
                         String ps = String.valueOf(pct);
                         if (ps.length() > 5)
                             ps = ps.substring(0, 5);
-                        out.write(ps + "%");
+                        out.write("<div class=\"percentBarOuter\">");
+                        out.write("<div class=\"percentBarInner\" style=\"width:" + ps + "%;\">");
+                        out.write("<div class=\"percentBarText\" tabindex=\"0\">" + ps + "%</div>");
+                        out.write("</div></div>");
                     }
                 } else {
                     pct = (float) 101.0;
@@ -2907,11 +2932,7 @@ public class I2PSnarkServlet extends BasicServlet {
                 if (announce != null) {
                     announce = DataHelper.stripHTML(announce);
                     buf.append("<tr><td>");
-                    String trackerLink = getTrackerLink(announce, snark.getInfoHash());
-                    if (trackerLink != null)
-                        buf.append(trackerLink);
-                    else
-                        toThemeImg(buf, "details");
+                    toThemeImg(buf, "details");
                     buf.append("</td><td><b>").append(_t("Primary Tracker")).append(":</b> ");
                     buf.append(getShortTrackerLink(announce, snark.getInfoHash()));
                     buf.append("</td></tr>");
@@ -2920,7 +2941,7 @@ public class I2PSnarkServlet extends BasicServlet {
                 if (alist != null && !alist.isEmpty()) {
                     buf.append("<tr><td>");
                     toThemeImg(buf, "details");
-                    buf.append("</td><td valign=\"top\"><b>")
+                    buf.append("</td><td><b>")
                        .append(_t("Tracker List")).append(":</b> ");
                     for (List<String> alist2 : alist) {
                         buf.append('[');
@@ -2951,7 +2972,8 @@ public class I2PSnarkServlet extends BasicServlet {
                        .append("</td></tr>\n");
                 }
                 long dat = meta.getCreationDate();
-                SimpleDateFormat fmt = new SimpleDateFormat("yyyy-MM-dd HH:mm");
+                // needs locale configured for automatic translation
+                SimpleDateFormat fmt = new SimpleDateFormat("HH:mm, EEEE dd MMMM yyyy");
                 fmt.setTimeZone(SystemVersion.getSystemTimeZone(_context));
                 if (dat > 0) {
                     String date = fmt.format(new Date(dat));
@@ -3306,19 +3328,21 @@ public class I2PSnarkServlet extends BasicServlet {
                                 status = toImg("cancel") + ' ' + _t("File not found in torrent?");
                             } else if (remaining == 0 || length <= 0) {
                                 complete = true;
-                                status = toImg("tick") + ' ' + _t("Complete");
+                                status = "<div class=\"priorityIndicator\">" + toImg("tick") + "</div>" + _t("Complete");
                             } else {
                                 priority = fai.priority;
                                 if (priority < 0)
-                                    status = toImg("cancel");
+                                    status = "<div class=\"priorityIndicator\">" + toImg("cancel") + "</div>";
                                 else if (priority == 0)
-                                    status = toImg("clock");
+                                    status = "<div class=\"priorityIndicator\">" + toImg("clock") + "</div>";
                                 else
-                                    status = toImg("clock_red");
-                                status += " " +
-                                         ("<span class=\"percentDownloaded\" title=\"") + _t("Percentage of file downloaded") + ("\">") +
-                                         (100 * (length - remaining) / length) + "% " + ("</span><span class=\"dirInfoComplete\">") + _t("complete") + ("</span>") +
-                                         " (" + DataHelper.formatSize2(remaining) + "B " + _t("remaining") + ")";
+                                    status = "<div class=\"priorityIndicator\">" + toImg("clock_red") + "</div>";
+                                long percent = 100 * (length - remaining) / length;
+                                status += " <div class=\"percentBarOuter\">" +
+                                         "<div class=\"percentBarInner\" style=\"width: " +
+                                         percent + "%;\"><div class=\"percentBarText\" tabindex=\"0\" title=\"" +
+                                         DataHelper.formatSize2(remaining) + "B " + _t("remaining") +
+                                         "\">" + percent + "%</div></div></div>";
                             }
 
                 }
diff --git a/history.txt b/history.txt
index 9b9fd9717..cb2ff8029 100644
--- a/history.txt
+++ b/history.txt
@@ -1,3 +1,10 @@
+2017-05-20 str4d
+ * i2psnark:
+   - Make DHT debug section collapsible
+   - Tooltips for downloading/finished torrents
+   - Download bars for torrents, torrent parts and peer downloads
+   - Friendlier date format (with completed: <date> tooltip for finished torrents)
+
 2017-05-19 zzz
  * Console: Move /peers page rendering from router to console (ticket #1879)
  * i2psnark: Add ut_comment UI and per-torrent configuration
diff --git a/installer/resources/themes/snark/classic/images/debug.png b/installer/resources/themes/snark/classic/images/debug.png
new file mode 100644
index 0000000000000000000000000000000000000000..70bdd2cf6ef51dab5463f25c19ae54c3f3741a58
GIT binary patch
literal 668
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GXl47>xpaLR=Yi85j&07)%%#EEpJU
z7#JKG7+e?_JQ)~#7#M;W7_Ar?tr;1e7?}c?m_nJDGntuln3?mKnTwg3OPQI=nE(I(
z57KT5R`1Bb6wkz*#tbsepMg1>86*W{lrS?`F)&3kG3bD-0CE}485#7!*10nP4Frk<
zH3BVVbY^5QWB{3*#|&gJ1TZjKGV<o}G6gXKwQxFcO6E(-WXb3^>MJEGSx&aJX|=Iy
zw==6Wv!7z`Fxw$~VYoxHL(=vnhgA;l>)cH$OiU|H&8y9=>a46AtZf=?Y+G#Yd+i-&
zIyf$ObnkTcnCIa&!OLf|kKb%RzfFE2GebhwghZ~4jG7x2zcM~?TVm?E)by?CnOigS
z_U08HEG#=+w)xq!jro-Uz(DjY3GxGmA~wLy&CM$*sbcKxn~;!}QCL>q+0`|1=7Lq5
zckJA^|JbqP$4{O*d-uVEryo9j`ttSn?>~S3{#z$IEgNXm1y2{p5DCf9gQxwP9Yh!|
z{GK7nxNu9Wp`p~BUyOhMzb{A@o|d&DB1M8}`s&;Bn&t8&LtBgZ|NoMAaA69tox>GB
zhi?_bflSl1-y1E(-dgF}DRkalx^82Z^z?UY8ZQ2uF;hT%a)GQKm&$dsS-+)f^OCDY
z7brYB<r*;UQYXuU<-c4tj?OqyUQyB+Ab0-ruG~GjuWR}&XP95PtJR~G{m12N&zFFW
zDTnU*SUDbJoA10Q*t}(ZM2v<h&$qpsRyqH_z1N7rdP(LHPW!gLOs96ayuXZ*4rvOG
SHQ~Ti1q?A)KbLh*2~7b0^Vzll

literal 0
HcmV?d00001

diff --git a/installer/resources/themes/snark/classic/snark.css b/installer/resources/themes/snark/classic/snark.css
index 52b78634c..cda37082b 100644
--- a/installer/resources/themes/snark/classic/snark.css
+++ b/installer/resources/themes/snark/classic/snark.css
@@ -39,6 +39,12 @@ body.iframed {
      outline: none;
 }
 
+.toggleview, .snarkConfigTitle, .snarknavbar, img, input[type="image"] {
+     -moz-user-select: none;
+     -webkit-user-select: none;
+     user-select: none;
+}
+
 .page {
      font-size: 9pt !important;
      line-height: 160% !important;
@@ -333,15 +339,6 @@ table.snarkTorrents {
      margin-top: -1px !important;
 }
 
-.snarkTorrents th {
-     text-align: left;
-}
-
-.snarkTorrents td {
-     line-height: 90%;
-     text-align: left;
-}
-
 .snarkTorrents td:nth-child(1) {
      width: 24px !important;
 }
@@ -349,8 +346,8 @@ table.snarkTorrents {
 .snarkTorrents td:nth-child(3),
 .snarkTorrents td:nth-child(4) {
      width: 16px !important;
-     padding: 0 !important;
      text-align: center !important;
+     font-weight: bold;
 }
 
 pre {
@@ -386,8 +383,8 @@ thead {
      border-bottom: 1px solid #101;
 }
 
-tfoot th {
-     padding-bottom: 4px !important;
+tfoot tr:first-child th {
+     vertical-align: middle !important;
 }
 
 tfoot tr:nth-child(n+1) {
@@ -435,9 +432,15 @@ tfoot:nth-child(4) img {
      padding-right: 0 !important;
 }
 
+/*
 tfoot tr:nth-child(n+1) {
      text-align: left;
 }
+*/
+
+.snarkTorrents tfoot tr:first-child {
+     line-height: 130%;
+}
 
 .headerstatus {
      text-align: left;
@@ -504,13 +507,8 @@ tfoot tr:nth-child(n+1) {
      white-space: nowrap;
 }
 
-.snarkTorrents tfoot th {
-     vertical-align: top;
-     font-weight: normal;
-}
-
-.snarkTorrents tfoot th::first-line {
-     font-weight: bold;
+.snarkTorrents tfoot tr:first-child th {
+     vertical-align: middle;
 }
 
 .snarkTorrents tfoot th br {
@@ -534,7 +532,6 @@ table.snarkTorrents {
 }
 
 .snarkTorrents td {
-     line-height: 105%;
      text-align: left;
 }
 
@@ -542,13 +539,6 @@ table.snarkTorrents {
      width: 24px !important;
 }
 
-.snarkTorrents td:nth-child(3),
-.snarkTorrents td:nth-child(4) {
-     width: 16px !important;
-     padding: 0 !important;
-     text-align: center !important;
-}
-
 .snarkTorrents td:nth-child(3) {
      text-align: right !important;
 }
@@ -772,16 +762,6 @@ td.subHeaderPriority {
      padding: 4px !important;
 }
 
-/*
-.headerstatus {
-     min-width: 250px;
-}
-
-td.priority:last-child {
-     min-width: 350px !important;
-}
-*/
-
 tr.priority:last-child {
      border-bottom: none !important;
 }
@@ -790,21 +770,22 @@ th.headerdownloaded {
      padding-left: 25px !important;
 }
 
-td.snarkFileStatus {
+.snarkFileStatus {
      text-align: center;
      white-space:nowrap;
+     width: 120px;
 }
 
-td.snarkFileIcon {
+.snarkFileIcon {
      width: 16px;
      padding: 0;
 }
 
-td.snarkFileIcon img {
+.snarkFileIcon img {
      filter: none;
 }
 
-td.snarkFileStatusIcon {
+.snarkFileStatusIcon {
      width: 24px;
      padding: 0 4px 0 0;
      text-align: center;
@@ -814,7 +795,7 @@ td.snarkFileStatusIcon {
 
 td {
      font-size: 9pt;
-     padding: 1px;
+     padding: 2px;
      opacity: 1;
      color: #333 !important;
 }
@@ -912,9 +893,7 @@ td.snarkTorrentAction {
 }
 
 .snarkTorrentstatus {
-     line-height: 90%;
      min-width: 0;
-     padding: 2px 2px 2px 0;
 }
 
 .snarkTorrentStatus {
@@ -951,9 +930,6 @@ td.snarkTorrentAction {
 .snarkTorrentRateDown,
 .snarkTorrentDownloaded,
 .snarkTorrentUploaded {
-     font-size: 8pt;
-     line-height: 90%;
-     padding: 0 3px;
 }
 
 .snarkTorrentRateUp,
@@ -963,14 +939,8 @@ td.snarkTorrentAction {
      text-align: center !important;
 }
 
-td.snarkTorrentDownloaded {
+.snarkTorrentDownloaded {
      font-weight: bold;
-     width: 110px;
-     padding: 0 5px;
-}
-
-.snarkTorrents img {
-     padding: 4px 3px !important;
 }
 
 .snarkTorrents th img {
@@ -978,8 +948,9 @@ td.snarkTorrentDownloaded {
      max-height: 22px;
 }
 
-.snarkTorrents tfoot th {
+.snarkTorrents tfoot tr:first-child th {
      padding: 6px 4px !important;
+     vertical-align: middle;
 }
 
 .snarkTorrents tr:hover, .snarkDirInfo tr:hover {
@@ -987,6 +958,10 @@ td.snarkTorrentDownloaded {
      background: linear-gradient(to bottom, #fff 0%, #ffe 100%) !important;
 }
 
+tr:hover .percentBarText {
+     opacity: 0.75;
+}
+
 .snarkTorrentEven {
      background: #eef;
 }
@@ -1041,13 +1016,15 @@ td.snarkTorrentDownloaded {
      font-weight: normal;
      padding: 4px 2px;
      color: #0c153d !important;
+     width: 1%;
+     white-space: nowrap;
 }
 
 .snarkFileStatus {
      font-size: 9pt;
      font-style: italic;
      min-width: 220px;
-     padding: 4px 5px 4px 15px;
+     padding: 4px;
      text-align: center;
      text-align: left !important;
 }
@@ -1056,51 +1033,79 @@ td.snarkTorrentDownloaded {
      font-style: italic;
 }
 
-/*
-div.percentBarOuter {
-      background: #fff !important;
-      border: 1px solid #9f9;
-      border-bottom: 1px solid #474;
-      border-right: 1px solid #474;
-      border-radius: 0;
-      float: left;
-      box-shadow: none;
-      opacity: 1;
+/* download bars */
+
+.snarkTorrentDownloaded {
+     text-align: center !important;
+     width: 110px;
 }
 
-div.percentBarInner {
-      border: none;
-      height: 14px;
-      background: #1c943a;
-      background: linear-gradient(to bottom,  #1c943a 0%, #092f10 50%, #0d2707 50%, #091b05 50%, #091503 100%);
+.snarkDirInfo .snarkFileStatus img {
+     float: left;
+     margin: 0 10px 0 7px;
 }
 
-div.percentBarInner.percentBarComplete {
-      background: #eef;
-      background: linear-gradient(to bottom,  #eef 0%, #002200 52%, #000000 52%, #eef 100%);
+.snarkDirInfo td {
+     padding-top: 6px !important;
+     padding-bottom: 6px !important;
+}
+
+.percentBarOuter {
+     background: #eef;
+     background: repeating-linear-gradient(135deg, #eef 1px, #eef 5px, #ddf 6px, #ddf 11px);
+     border: 1px solid #99f;
+     box-shadow: 0 0 1px 0 rgba(196,196,196,0.8);
+     margin: 0 auto;
+}
+
+.snarkTorrentDownloaded .percentBarOuter {
+     margin-left: 5px;
+}
+
+.peerinfo .percentBarOuter {
+     filter: saturate(0.5);
+}
+
+.percentBarInner {
+     border: none;
+     height: 14px;
+     background: #bbf;
+     background: linear-gradient(to bottom, #fff 0%, #eef 50%, #ddf 50%, #bbf 100%);
+     box-shadow: inset 0 0 0 1px #ddf;
+     opacity: 0.8;
 }
 
 .percentBarText, .percentBarOuter {
-      text-align: center;
-      height: 14px;
-      top: 0;
-      width: 80px;
+     width: 110px;
+     text-align: center;
+     vertical-align: middle;
 }
 
-.percentBarText{
-      text-align: center;
-      font-weight: bold;
-      line-height: 140%;
-      text-shadow: 0 1px 1px #000;
+.snarkDirInfo .percentBarText, .snarkDirInfo .percentBarOuter, .peerinfo .percentBarText, .peerinfo .percentBarOuter {
+     width: 80px;
+     display: inline-block;
 }
 
-.snarkTorrentDownloaded .percentBarText, .snarkTorrentDownloaded .percentBarOuter  {
-      width: 110px !important;
-      word-spacing: -0.2em;
-      font-size: 7.5pt;
+.percentBarText {
+     text-align: center;
+     font-weight: bold !important;
+     white-space: nowrap;
+     color: #005;
+     text-shadow: 0 0 1px rgba(255,255,255,0.5);
+     opacity: 0;
+     transition: ease opacity 0.3s 0.5s;
+     line-height: 14px;
 }
 
-*/
+.percentBarText:hover, .percentBarText:focus {
+     opacity: 0.75;
+     transition: ease opacity 0.3s;
+}
+
+.priorityIndicator {
+}
+
+/* end download bars */
 
 .choked, .choked a:hover {
      color: #900 !important;
@@ -1209,9 +1214,9 @@ _:-ms-lang(x), .snarkConfigTitle, label.toggleview, .configsectionpanel .snarkCo
      padding-left: 5px;
 }
 
-#bwHelp a {
-     font-style: normal;
+#configs a {
      font-weight: bold;
+     margin-left: 3px;
 }
 
 form {
@@ -1232,26 +1237,6 @@ hr {
      background: #444;
 }
 
-hr.debug {
-     width: 100%;
-     background: #89f;
-     background: linear-gradient(to right, #89f 40%, #eef);
-}
-
-hr.debug + hr {
-     margin-bottom: -5px;
-}
-
-hr.debug:nth-child(n+7) {
-     margin: -10px 0 3px;
-}
-
-hr.debug:last-child {
-     height: 0;
-     margin-bottom: -5px;
-     margin-top: -15px;
-}
-
 a:link {
      font-weight: normal;
      text-decoration: none;
@@ -1375,7 +1360,7 @@ input[type="text"], textarea {
 a.control {
      vertical-align: middle;
      text-align: left;
-     padding: 2px 5px 1px 3px !important;
+     padding: 2px 8px 1px 3px !important;
      display: inline-block;
      margin: -1px 0 1px 5px;
      min-width: 0 !important;
@@ -1387,8 +1372,14 @@ a.control:hover, a.control:focus {
      border: 1px solid #89f;
 }
 
+a.control:active img {
+     mix-blend-mode: luminosity;
+}
+
 a.control img {
      margin: 0 !important;
+     height: 14px;
+     width: 14px;
 }
 
 .script {
@@ -1548,6 +1539,12 @@ select {
 }
 }
 
+select[disabled], select[disabled]:hover {
+     background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%) !important;
+     opacity: 0.7;
+     cursor: not-allowed;
+}
+
 select::-ms-expand {
      display: none;
 }
@@ -1589,6 +1586,7 @@ img:hover {
      padding: 5px !important;
      opacity: 0.7;
      border: 1px solid #349 !important;
+     border-radius: 2px;
      background: #fff;
      background: linear-gradient(to bottom, #fff 0%, #fff 50%, #ddf 51%);
      box-shadow: inset 0 0 1px 1px #fff;
@@ -1808,6 +1806,10 @@ table.trackerconfig td:first-child {
      vertical-align: middle;
 }
 
+#configs a {
+     font-weight: bold;
+}
+
 .configsectionpanel td[colspan="5"] {
      border-top: 1px solid #89f;
 }
@@ -2070,6 +2072,88 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac
      text-shadow: 0 0 1px #fff;
 }
 
+/* debug panel */
+
+#dhtdebugPanel {
+     background: linear-gradient(to bottom, #fff 0%, #eef 100%);
+     box-shadow: 0 0 2px 0 #ccc inset, 0 0 1px #bbb;
+     border: 1px solid #89f;
+     border-top: none;
+     text-align: center;
+     padding-bottom: 13px;
+}
+
+#dhtDebugInner {
+     text-align: left;
+     padding: 5px;
+     background: #efefff;
+     box-shadow: inset 0 0 0 1px #fff, 0 0 1px 0 rgba(160,160,160,0.5);
+     margin: -25px 0 -12px;
+}
+
+.dhtDebug th b:first-of-type, .dhtDebug th b:first-of-type + br + hr.debug {
+     display: none;
+}
+
+input#toggle_debug:not(checked) + label {
+     padding-bottom: 2px;
+}
+
+input#toggle_debug:not(checked) + label > img {
+     margin-right: -2px !important;
+}
+
+input#toggle_debug:not(checked) + label + #dhtDebugInner {
+     display: block;
+}
+
+input#toggle_debug:checked + label + #dhtDebugInner {
+     display: none;
+}
+
+.iframed input#toggle_debug:not(checked) + label + #dhtDebugInner {
+     display: block;
+}
+
+.iframed input#toggle_debug:checked + label + #dhtDebugInner {
+     display: none;
+}
+
+/* end debug panel */
+
+.dhtDebug th {
+     padding: 0 10px 8px !important;
+     word-break: break-all;
+     font-weight: normal;
+     background: #fff;
+}
+
+hr.debug:first-of-type {
+     background: transparent;
+     margin-bottom: -5px;
+     margin-top: -2px;
+}
+
+hr.debug {
+     width: 100%;
+     background: #89f;
+     background: linear-gradient(to right, #89f 40%, #eef);
+}
+
+hr.debug + hr {
+     margin-bottom: -5px;
+}
+
+hr.debug:nth-child(n+7) {
+     margin: -10px 0 3px;
+}
+
+hr.debug:last-child {
+     height: 0;
+     margin-bottom: -5px;
+     margin-top: -15px;
+}
+
 /* end debug */
 
 /* Resource Errors */
@@ -2244,6 +2328,10 @@ b.alwaysShow {
      font-weight: bold;
 }
 
+.snarkTorrents .debuginfo td, .snarkTorrents .peerinfo td {
+     font-weight: normal;
+}
+
 td#bwHelp {
      background: url(images/infocircle.png) left 10px center no-repeat;
      background-size: 14px auto !important;
@@ -2271,6 +2359,14 @@ body {
      margin-top: -5px !important;
 }
 
+.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:nth-child(n+1):hover, .snarkRefresh:focus, .snarkRefresh:nth-child(n+1):focus .snarkRefresh:active, .snarkRefresh:nth-child(n+1):active {
+     background-size: 14px 14px, 100% 100% !important;
+}
+
+.snarkRefresh:link:first-child {
+     padding-left: 22px !important;
+}
+
 .addtorrentsection, .newtorrentsection, .configsection, .configsectionpanel {
      margin-top: 4px !important;
      margin-bottom: 4px !important;
@@ -2287,6 +2383,19 @@ table.SnarkDirInfo {
 .dirInfoComplete {
      display: none;
 }
+
+.percentBarText, .percentBarOuter {
+     width: 100px;
+     line-height: 15px;
+}
+
+.snarkDirInfo .percentBarText, .snarkDirInfo .percentBarOuter {
+     width: 60px;
+}
+
+#dhtDebugInner {
+     margin-top: -24px !important;
+}
 }
 
 @media screen and (max-width: 1200px) {
@@ -2295,23 +2404,24 @@ table.SnarkDirInfo {
      padding-bottom: 5px;
 }
 
-.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:nth-child(n+1):hover, .snarkRefresh:focus, .snarkRefresh:nth-child(n+1):focus .snarkRefresh:active, .snarkRefresh:nth-child(n+1):active {
-     background-size: 14px 14px, 100% 100% !important;
-}
-
-.snarkRefresh:link:first-child {
-     padding-left: 22px !important;
-}
-
 #configs td:first-child::before {
      content: "";
      min-height: 30px;
 }
+
+.percentBarText {
+     line-height: 16px;
+}
+
+.snarkTorrents tfoot tr:first-child {
+     line-height: 100%;
+}
 }
 
 @media screen and (max-width: 1400px) {
-.snarkRefresh:link:first-child {
-     padding-left: 23px !important;
+
+.percentBarText {
+     line-height: 15px;
 }
 }
 
@@ -2320,6 +2430,14 @@ body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_
      font-size: 9pt !important;
 }
 
+.snarkRefresh {
+     font-size: 11pt !important;
+}
+
+.snarkRefresh:link {
+     padding-left: 25px !important;
+}
+
 .percentDownloaded {
      pointer-events: none; /* hide tooltip */
 }
@@ -2330,14 +2448,6 @@ body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_
      font-size: 10pt !important;
 }
 
-.snarkRefresh {
-     font-size: 11pt !important;
-}
-
-.snarkRefresh:link {
-     padding-left: 25px !important;
-}
-
 .snarkMessages li, .snarkTorrents tt {
      font-size: 9pt;
 }
@@ -2349,7 +2459,6 @@ body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_
 
 td.snarkTorrentDownloaded {
      white-space: nowrap;
-     padding: 0 10px;
 }
 
 .snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
diff --git a/installer/resources/themes/snark/dark/images/debug.png b/installer/resources/themes/snark/dark/images/debug.png
new file mode 100644
index 0000000000000000000000000000000000000000..70bdd2cf6ef51dab5463f25c19ae54c3f3741a58
GIT binary patch
literal 668
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GXl47>xpaLR=Yi85j&07)%%#EEpJU
z7#JKG7+e?_JQ)~#7#M;W7_Ar?tr;1e7?}c?m_nJDGntuln3?mKnTwg3OPQI=nE(I(
z57KT5R`1Bb6wkz*#tbsepMg1>86*W{lrS?`F)&3kG3bD-0CE}485#7!*10nP4Frk<
zH3BVVbY^5QWB{3*#|&gJ1TZjKGV<o}G6gXKwQxFcO6E(-WXb3^>MJEGSx&aJX|=Iy
zw==6Wv!7z`Fxw$~VYoxHL(=vnhgA;l>)cH$OiU|H&8y9=>a46AtZf=?Y+G#Yd+i-&
zIyf$ObnkTcnCIa&!OLf|kKb%RzfFE2GebhwghZ~4jG7x2zcM~?TVm?E)by?CnOigS
z_U08HEG#=+w)xq!jro-Uz(DjY3GxGmA~wLy&CM$*sbcKxn~;!}QCL>q+0`|1=7Lq5
zckJA^|JbqP$4{O*d-uVEryo9j`ttSn?>~S3{#z$IEgNXm1y2{p5DCf9gQxwP9Yh!|
z{GK7nxNu9Wp`p~BUyOhMzb{A@o|d&DB1M8}`s&;Bn&t8&LtBgZ|NoMAaA69tox>GB
zhi?_bflSl1-y1E(-dgF}DRkalx^82Z^z?UY8ZQ2uF;hT%a)GQKm&$dsS-+)f^OCDY
z7brYB<r*;UQYXuU<-c4tj?OqyUQyB+Ab0-ruG~GjuWR}&XP95PtJR~G{m12N&zFFW
zDTnU*SUDbJoA10Q*t}(ZM2v<h&$qpsRyqH_z1N7rdP(LHPW!gLOs96ayuXZ*4rvOG
SHQ~Ti1q?A)KbLh*2~7b0^Vzll

literal 0
HcmV?d00001

diff --git a/installer/resources/themes/snark/dark/snark.css b/installer/resources/themes/snark/dark/snark.css
index be6a76c42..8f76e9542 100644
--- a/installer/resources/themes/snark/dark/snark.css
+++ b/installer/resources/themes/snark/dark/snark.css
@@ -63,6 +63,12 @@ body.iframed {
      background: linear-gradient(to right, #000 0%, #020 50%, #000 100%);
 }
 
+.toggleview, .snarkConfigTitle, .snarknavbar, img, input[type="image"] {
+     -moz-user-select: none;
+     -webkit-user-select: none;
+     user-select: none;
+}
+
 ::selection {
      background: #030 !important;
      color: white;
@@ -329,6 +335,7 @@ th {
      white-space: nowrap;
      background: #000;
      background: linear-gradient(to bottom, #010, #000);
+     vertical-align: middle;
 }
 
 thead th {
@@ -369,7 +376,6 @@ tfoot tr:nth-child(n+1) {
 
 .headerpriority {
      text-align: left;
-     padding-left: 10px;
 }
 
 .ParentDir {
@@ -423,16 +429,15 @@ tfoot tr:nth-child(n+1) {
      font-weight: normal;
 }
 
-.snarkTorrents tfoot th::first-line {
-     font-weight: bold;
-}
-
 .snarkTorrents tfoot th:nth-child(3) {
      text-align: center;
 }
 
-.snarkTorrents tfoot th {
-     vertical-align: top;
+.snarkTorrents tfoot tr:first-child th {
+     padding: 6px 4px !important;
+     vertical-align: middle;
+     font-weight: bold;
+     line-height: 140%;
 }
 
 .snarkTorrents tfoot th br {
@@ -453,7 +458,7 @@ table.SnarkTorrents {
 }
 
 .snarkTorrents td {
-     line-height: 110%;
+     line-height: 120%;
      text-align: left;
      font-size: 8pt !important;
 }
@@ -491,6 +496,7 @@ table.SnarkTorrents {
      font-size: 8pt;
      font-weight: bold;
      display: inline-block;
+     line-height: 120%;
 }
 
 .snarkTorrentInfo img {
@@ -626,7 +632,6 @@ table.SnarkDirInfo {
 .snarkDirInfo .headerpriority {
      text-align: center !important;
      vertical-align: middle;
-     padding-right: 10px;
 }
 
 td.subHeaderPriority, td.priority {
@@ -655,7 +660,6 @@ td.subHeaderPriority {
 }
 
 .headerstatus {
-     min-width: 150px;
      text-align: left;
      padding-left: 18px;
 }
@@ -678,7 +682,7 @@ th.headerdownloaded {
      padding-left: 3px;
 }
 
-td.snarkFileStatus {
+.snarkFileStatus {
      text-align: left;
      white-space: nowrap;
 }
@@ -697,8 +701,9 @@ td.snarkFileStatusIcon {
 td {
      padding: 1px;
      color: #ee9 !important;
-      opacity: 1;
+     opacity: 1;
      font-size: 9pt;
+     vertical-align: middle;
 }
 
 .mainsection td {
@@ -776,7 +781,6 @@ td.snarkTorrentStatus:nth-child(2) {
      min-width: 48px;
      font-weight: bold;
      color: #dd9 !important;
-     font-size: 8pt;
      padding: 1px !important;
 }
 
@@ -786,10 +790,8 @@ td.snarkTorrentStatus:nth-child(2) {
 }
 
 .snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded {
-     font-size: 8pt;
      padding: 0 3px;
      line-height: 90%;
-     word-spacing: -0.05em;
 }
 
 .snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded {
@@ -799,10 +801,8 @@ td.snarkTorrentStatus:nth-child(2) {
 .snarkTorrentDownloaded {
      color: #ee9 !important;
      white-space: nowrap;
-}
-
-td.snarkTorrentDownloaded {
      font-weight: bold;
+     text-align: center;
 }
 
 .snarkTorrentUploaded {
@@ -825,15 +825,15 @@ td.snarkTorrentDownloaded {
      padding: 1px !important;
 }
 
-.snarkTorrents tfoot th {
-     padding: 6px 4px !important;
-}
-
 .snarkTorrents tr:hover, .snarkDirInfo tr:hover {
      background: #030 !important;
      box-shadow: inset 0 0 1px 0 #494;
 }
 
+tr:hover .percentBarText {
+     opacity: 1;
+}
+
 /* MS Edge fix */
 _:-ms-lang(x), .snarkTorrents tr, .snarkTorrents tr:hover, .snarkDirInfo tr:hover {
      box-shadow: none !important;
@@ -903,23 +903,24 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven {
 }
 
 .snarkFileName {
-     padding: 4px 0 !important;
+     padding: 4px 5px 4px 0 !important;
      text-align: left !important;
+     word-break: break-all;
 }
 
 .snarkFileSize {
      padding: 4px 2px;
      font-weight: normal;
      color: #bb7 !important;
+     width: 1%;
+     white-space: nowrap;
 }
 
 .snarkFileStatus {
-     padding: 4px 5px 4px 15px;
-     text-align: center;
+     padding-left: 15px;
      font-style: italic;
-     font-size: 9pt;
      text-align: left;
-     min-width: 220px;
+     width: 130px;
 }
 
 .snarkFileStatus img {
@@ -936,50 +937,85 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven {
      padding-right: 2px;
 }
 
-/*
-div.percentBarOuter {
-     background: #000 !important;
-     border: 1px solid #9f9;
-     border-bottom: 1px solid #474;
-     border-right: 1px solid #474;
-     border-radius: 0;
+/* download bars */
+
+.snarkDirInfo .snarkFileStatus img {
      float: left;
+     margin: 0 10px 0 7px;
+}
+
+.percentBarOuter {
+     background: #000;
+     background: repeating-linear-gradient(135deg, #000 1px, #000 5px, #010 6px, #010 11px);
+     border: 1px solid #040;
+     border-bottom: 1px solid #020;
+     border-right: 1px solid #020;
      box-shadow: none;
      opacity: 1;
+     box-shadow: 0 0 1px 1px rgba(0,0,0,0.8);
+     margin: auto;
 }
 
-div.percentBarInner {
-     border: none;
-     height: 14px;
-     background: #1c943a;
-     background: linear-gradient(to bottom,  #1c943a 0%, #092f10 50%, #0d2707 50%, #091b05 50%, #091503 100%);
+.snarkDirInfo .percentBarOuter {
+     float: left;
 }
 
-div.percentBarInner.percentBarComplete {
-     background: #001100;
-     background: linear-gradient(to bottom,  #001100 0%, #002200 52%, #000000 52%, #001100 100%);
+.percentBarInner {
+     height: 100%;
+     background: #0e5f00;
+     background: linear-gradient(to bottom, rgba(28, 148, 58, 0.6) 0%, rgba(9, 47, 16, 0.6) 50%, rgba(13, 39, 7, 0.6) 50%, rgba(9, 27, 5, 0.6) 50%, rgba(9, 21, 3, 0.6) 100%);
+     box-shadow: inset 0 0 0 1px #000;
 }
 
 .percentBarText, .percentBarOuter {
+     width: 110px;
      text-align: center;
-     height: 14px;
-     top: 0;
+     vertical-align: middle;
+}
+
+.snarkDirInfo .percentBarText, .snarkDirInfo .percentBarOuter, .peerinfo .percentBarText, .peerinfo .percentBarOuter {
      width: 80px;
 }
 
-.percentBarText{
+.percentBarText {
      text-align: center;
      font-weight: bold;
-     line-height: 140%;
-     text-shadow: 0 1px 1px #000;
+     padding: 1px 0;
+     white-space: nowrap;
+     display: block;
+     color: #dfd137;
+     opacity: 0;
+     text-shadow: 0 0 1px rgba(0,0,0,0.8);
+     transition: ease opacity 0.3s 0.5s;
 }
 
-.snarkTorrentDownloaded .percentBarText, .snarkTorrentDownloaded .percentBarOuter  {
-     width: 110px !important;
-     word-spacing: -0.2em;
-     font-size: 7.5pt;
+.percentBarText:hover, .percentBarText:focus {
+     opacity: 0.75;
+     transition: ease opacity 0.3s;
 }
-*/
+
+.percentBarOuterComplete .percentBarText {
+     color: #ee9;
+     font-weight: normal;
+     opacity: 1;
+}
+
+.snarkDirInfo .percentBarOuterComplete .percentBarText {
+     text-align: left;
+}
+
+.percentBarOuterComplete, .percentBarComplete.percentBarInner {
+     border: 1px solid transparent;
+     background: none !important;
+     box-shadow: none !important;
+}
+
+.priorityIndicator {
+     width: 32px;
+     float: left;
+}
+
+/* end download bars */
 
 .choked {
      color: #f00000 !important;
@@ -1007,12 +1043,11 @@ div.percentBarInner.percentBarComplete {
 }
 
 .snarkAddInfo {
-     font-size: 9pt;
-     line-height: 135% !important;
      font-weight: normal;
      background: url(images/infocircle.png) left center no-repeat;
      background-size: 14px auto;
      padding-left: 20px;
+     line-height: 140%;
 }
 
 .snarkConfigTitle, label.toggleview {
@@ -1133,28 +1168,6 @@ hr {
      text-align: center;
 }
 
-hr.debug {
-     width: 100%;
-     background: #131;
-     background: linear-gradient(to right, #131 50%, #000700);
-}
-
-hr.debug + b {
-     color: #ff7;
-     text-transform: uppercase;
-}
-
-hr.debug:nth-child(n+7) {
-     margin-top: -11px;
-     margin-bottom: 2px;
-     opacity: 0.5;
-}
-
-hr.debug:last-child {
-     background: #000;
-     margin-bottom: -5px;
-}
-
 a:link {
      color: #7c7;
      text-decoration: none;
@@ -1265,7 +1278,7 @@ input[type="image"]:hover, a img:hover, input[type="image"]:focus, a:focus img {
      outline: none;
 }
 
-.snarkTorrents th:last-child, .snarkTorrents td:last-child {
+.snarkTorrents thead th:last-child, .snarkTorrents td:last-child {
      white-space: nowrap;
 }
 
@@ -1437,6 +1450,16 @@ select:hover, select:focus, select:active {
      background: #000 url(images/dropdown_hover.png) right center no-repeat !important;
 }
 
+select[disabled], select[disabled]:hover {
+     background: #000 url(images/dropdown.png) right center no-repeat !important;
+     background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #020 0%, #000 20%, #000 80%, #010 100%) !important;
+     border: 1px outset #191;
+     box-shadow: none;
+     color: #494 !important;
+     opacity: 0.7;
+     cursor: not-allowed;
+}
+
 select::-ms-expand {
      display: none;
 }
@@ -1809,9 +1832,9 @@ table.trackerconfig td:first-child {
      color: #ee9;
      box-shadow: inset 0 0 5px 2px #000;
      word-wrap: break-word;
+     font-weight: bold;
      text-align: center;
      background: #000 url(images/configuration.png) no-repeat scroll right center;
-     font-weight: bold;
      background: linear-gradient(to bottom, #000 10%, rgba(0,40,0,0.3) 10%, rgba(0,15,0,0.5) 100%), url(/themes/console/dark/images/camotile2.png) top left repeat;
 }
 
@@ -1928,9 +1951,16 @@ label.toggleview, .snarkConfigTitle a:visited {
      background-size: 14px 14px;
 }
 
-.peerinfo td, .debuginfo td {
-     padding-top: 5px;
-     padding-bottom: 5px;
+.snarkTorrents .peerinfo td, .snarkTorrents .debuginfo td {
+     padding-top: 2px !important;
+     padding-bottom: 2px !important;;
+}
+
+.peerinfo td:first-child::before, .debuginfo td:first-child::before {
+     content: "";
+     display: inline-block;
+     min-height: 20px;
+     vertical-align: middle;
 }
 
 /* debug */
@@ -1982,6 +2012,93 @@ label.toggleview, .snarkConfigTitle a:visited {
      color: #cc7;
 }
 
+.dhtdebug th {
+     word-break: break-all;
+     padding: 0 10px 10px !important;
+}
+
+/* debug panel */
+
+#dhtdebugPanel {
+     background: linear-gradient(to right, #000, #010, #000);
+     border: 1px solid #494;
+     border-top: none;
+     box-shadow: inset 0 0 0 1px #000;
+     text-align: center;
+     padding-bottom: 13px;
+}
+
+#dhtDebugInner {
+     text-align: left;
+     padding: 5px;
+     background: #000;
+     margin: -23px 0 -12px;
+}
+
+.dhtDebug th b:first-of-type, .dhtDebug th b:first-of-type + br + hr.debug {
+     display: none;
+}
+
+input#toggle_debug:not(checked) + label {
+     padding-bottom: 2px;
+}
+
+input#toggle_debug:not(checked) + label > img {
+     margin-right: -2px !important;
+}
+
+input#toggle_debug:not(checked) + label + #dhtDebugInner {
+     display: block;
+}
+
+input#toggle_debug:checked + label + #dhtDebugInner {
+     display: none;
+}
+
+.iframed input#toggle_debug:not(checked) + label + #dhtDebugInner {
+     display: block;
+}
+
+.iframed input#toggle_debug:checked + label + #dhtDebugInner {
+     display: none;
+}
+
+/* end debug panel */
+
+hr.debug {
+     width: 100%;
+     background: #131;
+     background: linear-gradient(to right, #131 50%, #000700);
+}
+
+hr.debug + b {
+     color: #ff7;
+     text-transform: uppercase;
+}
+
+hr.debug:first-of-type {
+     background: transparent;
+     margin-bottom: -5px;
+     margin-top: -2px;
+}
+
+hr.debug + hr {
+     display: block;
+     background: transparent;
+     margin-bottom: -3px;
+}
+
+hr.debug:nth-child(n+7) {
+     margin-top: -11px;
+     margin-bottom: 2px;
+     opacity: 0.5;
+}
+
+hr.debug:last-child {
+     background: #000;
+     margin-bottom: -5px;
+}
+
 /* end debug */
 
 #totals {
@@ -2032,14 +2149,7 @@ label.toggleview, .snarkConfigTitle a:visited {
 
 /* configs */
 
-#bwHelp i {
-     display: inline-block;
-     vertical-align: middle;
-}
-
-
-#bwHelp a {
-     font-style: normal;
+#configs a {
      font-weight: bold;
 }
 
@@ -2282,6 +2392,19 @@ b.alwaysShow {
 #configs td:first-child {
      min-width: 200px !important;
 }
+
+.snarkFileStatus {
+     width: 110px;
+}
+
+.snarkFileStatus img[src*="clock"] {
+     margin-top: 6px;
+}
+
+.snarkDirInfo .percentBarText, .snarkDirInfo .percentBarOuter {
+     width: 60px;
+     padding: 0;
+}
 }
 
 @media screen and (max-width: 1200px) {
@@ -2312,6 +2435,22 @@ td#bwHelp a {
 #trackerselect a {
      max-width: 300px;
 }
+
+.percentBarOuter {
+     margin: 2px auto !important;
+}
+
+.percentBarText {
+     line-height: 130%;
+}
+
+.percentBarText, .percentBarOuter, .snarkTorrentDownloaded {
+     width: 100px;
+}
+
+.snarkFileStatus img[src*="clock"] {
+     margin-top: 4px;
+}
 }
 
 @media screen and (min-width: 1100px) {
@@ -2325,8 +2464,8 @@ body, .snarkTorrents td, .snarkAddInfo, th, td,  code, textarea, input, input[ty
 }
 
 .snarkTorrentInfo td, .snarkDirInfo td, .snarkTorrents .peerinfo td {
-     padding-top: 6px !important;
-     padding-bottom: 6px !important;
+     padding-top: 4px !important;
+     padding-bottom: 4px !important;
 }
 
 #configs td:first-child {
@@ -2339,10 +2478,32 @@ body, .snarkTorrents td, .snarkAddInfo, th, td,  code, textarea, input, input[ty
 }
 
 @media screen and (min-width: 1200px) {
+.snarkRefresh:link {
+     font-size: 11pt !important;
+}
+
+.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:focus, .snarkRefresh:active, .snarkRefresh:visited,
+.snarkRefresh:link:first-child, .snarkRefresh:hover:first-child, .snarkRefresh:focus:first-child, .snarkRefresh:active:first-child, .snarkRefresh:visited:first-child,
+.snarkRefresh:link:nth-child(2), .snarkRefresh:hover:nth-child(2), .snarkRefresh:focus:nth-child(2), .snarkRefresh:active:nth-child(2), .snarkRefresh:visited:nth-child(2) {
+     background-size: 16px auto, 100% 100% !important;
+     padding-left: 24px !important;
+}
+
+.snarkRefresh:link:first-child {
+     padding-left: 25px !important;
+}
+
 .snarkConfigtitle, .snarkConfigTitle a, label.toggleview {
      font-size: 12pt !important;
 }
 
+.snarkTorrentDownloaded {
+     white-space: nowrap;
+     padding: 0 8px;
+     width: 110px;
+     text-align: center;
+}
+
 .percentDownloaded {
      pointer-events: none; /* hide tooltip */
 }
@@ -2351,7 +2512,7 @@ body, .snarkTorrents td, .snarkAddInfo, th, td,  code, textarea, input, input[ty
    min-height: 26px;
 }
 
-td#bwHelp a {
+#configs a {
      display: inline-block;
      white-space: nowrap;
      margin-left: 4px;
@@ -2367,10 +2528,6 @@ body, .snarkTorrents td, .snarkAddInfo, th, td,  code, textarea, input, input[ty
      font-size: 10pt !important;
 }
 
-.snarkRefresh:link {
-     font-size: 11pt !important;
-}
-
 .snarkConfigTitle, .snarkConfigTitle a, label.toggleview {
      font-size: 12pt !important;
 }
@@ -2380,17 +2537,6 @@ body, .snarkTorrents td, .snarkAddInfo, th, td,  code, textarea, input, input[ty
      padding-top: 4px;
 }
 
-.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:focus, .snarkRefresh:active, .snarkRefresh:visited,
-.snarkRefresh:link:first-child, .snarkRefresh:hover:first-child, .snarkRefresh:focus:first-child, .snarkRefresh:active:first-child, .snarkRefresh:visited:first-child,
-.snarkRefresh:link:nth-child(2), .snarkRefresh:hover:nth-child(2), .snarkRefresh:focus:nth-child(2), .snarkRefresh:active:nth-child(2), .snarkRefresh:visited:nth-child(2) {
-     background-size: 16px auto, 100% 100% !important;
-     padding-left: 24px !important;
-}
-
-.snarkRefresh:link:first-child {
-     padding-left: 25px !important;
-}
-
 tt, .snarkTorrents tt, .snarkMessages, .snarkMessages a {
      font-size: 9pt !important;
 }
@@ -2405,11 +2551,6 @@ textarea[name="i2cpOpts"] {
      height: 11px;
 }
 
-.snarkTorrentDownloaded {
-     white-space: nowrap;
-     padding: 0 8px;
-}
-
 .snarkTorrents td:nth-child(3), .SnarkTorrents td:nth-child(4) {
      width: 18px !important;
 }
diff --git a/installer/resources/themes/snark/light/images/debug.png b/installer/resources/themes/snark/light/images/debug.png
new file mode 100644
index 0000000000000000000000000000000000000000..70bdd2cf6ef51dab5463f25c19ae54c3f3741a58
GIT binary patch
literal 668
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GXl47>xpaLR=Yi85j&07)%%#EEpJU
z7#JKG7+e?_JQ)~#7#M;W7_Ar?tr;1e7?}c?m_nJDGntuln3?mKnTwg3OPQI=nE(I(
z57KT5R`1Bb6wkz*#tbsepMg1>86*W{lrS?`F)&3kG3bD-0CE}485#7!*10nP4Frk<
zH3BVVbY^5QWB{3*#|&gJ1TZjKGV<o}G6gXKwQxFcO6E(-WXb3^>MJEGSx&aJX|=Iy
zw==6Wv!7z`Fxw$~VYoxHL(=vnhgA;l>)cH$OiU|H&8y9=>a46AtZf=?Y+G#Yd+i-&
zIyf$ObnkTcnCIa&!OLf|kKb%RzfFE2GebhwghZ~4jG7x2zcM~?TVm?E)by?CnOigS
z_U08HEG#=+w)xq!jro-Uz(DjY3GxGmA~wLy&CM$*sbcKxn~;!}QCL>q+0`|1=7Lq5
zckJA^|JbqP$4{O*d-uVEryo9j`ttSn?>~S3{#z$IEgNXm1y2{p5DCf9gQxwP9Yh!|
z{GK7nxNu9Wp`p~BUyOhMzb{A@o|d&DB1M8}`s&;Bn&t8&LtBgZ|NoMAaA69tox>GB
zhi?_bflSl1-y1E(-dgF}DRkalx^82Z^z?UY8ZQ2uF;hT%a)GQKm&$dsS-+)f^OCDY
z7brYB<r*;UQYXuU<-c4tj?OqyUQyB+Ab0-ruG~GjuWR}&XP95PtJR~G{m12N&zFFW
zDTnU*SUDbJoA10Q*t}(ZM2v<h&$qpsRyqH_z1N7rdP(LHPW!gLOs96ayuXZ*4rvOG
SHQ~Ti1q?A)KbLh*2~7b0^Vzll

literal 0
HcmV?d00001

diff --git a/installer/resources/themes/snark/light/snark.css b/installer/resources/themes/snark/light/snark.css
index e46219d9e..b0fefd434 100644
--- a/installer/resources/themes/snark/light/snark.css
+++ b/installer/resources/themes/snark/light/snark.css
@@ -41,6 +41,12 @@ body.iframed {
      outline: none !important;
 }
 
+.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;
 }
@@ -474,24 +480,12 @@ tfoot tr:nth-child(n+1) {
      font-weight: normal;
 }
 
-.snarkTorrents tfoot th {
+.snarkTorrents tfoot tr:first-child th {
      padding: 5px 4px !important;
      background: #fff;
-     vertical-align: top;
+     vertical-align: middle;
 }
 
-/*
-.snarkTorrents td:nth-child(n+6), .snarkTorrents tfoot th:nth-child(n+2) {
-     font-variant: all-small-caps !important;
-}
-
-@media screen and (-webkit-min-device-pixel-ratio:0) {
-.snarkTorrents td:nth-child(n+6), .snarkTorrents tfoot th:nth-child(n+2) {
-     font-variant: normal !important;
-}
-}
-*/
-
 td {
      padding: 2px 4px;
      color: #272e3f !important;
@@ -540,7 +534,7 @@ td:first-child {
      opacity: 1;
 }
 
-.snarkTorrents th:last-child br { /* kill "start all/stop all" button wrapping in the header */
+.snarkTorrents thead th:last-child br { /* kill "start all/stop all" button wrapping in the header */
      display: none;
 }
 
@@ -641,6 +635,10 @@ td:first-child {
      color: #0c111f !important;
 }
 
+tr:hover .percentBarText {
+     opacity: 0.75;
+}
+
 .peerinfo:hover td:first-child {
      background: url(images/peer.png) center center no-repeat  #ffd !important;
 }
@@ -672,15 +670,98 @@ td:first-child {
 .snarkFileSize {
      padding: 4px 2px;
      font-weight: normal;
+     width: 1%;
+     white-space: nowrap;
 }
 
 .snarkFileStatus {
-     padding: 4px 5px;
      font-style: italic;
      text-align: left;
      white-space: nowrap;
+     width: 140px;
 }
 
+/* download bars */
+
+.snarkTorrentDownloaded {
+     width: 110px !important;
+     text-align: center !important;
+}
+
+.priorityIndicator {
+     width: 32px;
+     margin: 0;
+}
+
+.snarkDirInfo .snarkFileStatus img {
+     float: left;
+     margin: 0 10px 0 5px;
+}
+
+.snarkFileStatus img[src*="clock"] {
+     margin-top: 2px;
+}
+
+.percentBarOuter {
+     background: #eef;
+     background: repeating-linear-gradient(135deg, rgba(238, 238, 255,0.7) 1px, rgba(238, 238, 255, 0.7) 5px, rgba(221, 221, 255, 0.7) 6px, rgba(221, 221, 255, 0.7) 11px);
+     border: 1px solid #99f;
+     box-shadow: none;
+     box-shadow: 0 0 1px rgba(200,200,200,0.8);
+     margin: 0 auto;
+}
+
+.percentBarInner {
+     border: none;
+     height: 100%;
+     background: #bbf;
+     background: linear-gradient(to bottom, #fff 0%, #eef 50%, #ddf 50%, #bbf 100%);
+     box-shadow: inset 0 0 0 1px #ddf;
+}
+
+.percentBarInner.percentBarComplete {
+     background: transparent;
+     vertical-align: middle;
+}
+
+.percentBarText, .percentBarOuter {
+     text-align: center;
+     height: 16px;
+     vertical-align: middle;
+}
+
+.percentBarText {
+     text-align: center;
+     font-weight: bold !important;
+     line-height: 15px;
+     padding: 1px 0;
+     white-space: nowrap;
+     display: block;
+     color: #005;
+     text-shadow: 0 0 1px rgba(255,255,255,0.5);
+     opacity: 0;
+     transition: ease opacity 0.3s 0.5s;
+}
+
+.percentBarText:hover, .percentBarText:focus {
+     opacity: 0.75;
+     transition: ease opacity 0.3s;
+}
+
+.percentBarOuterComplete .percentBarText {
+     opacity: 1;
+}
+
+.snarkTorrentDownloaded .percentBarText, .snarkTorrentDownloaded .percentBarOuter {
+     width: 110px !important;
+}
+
+.snarkDirInfo .percentBarText, .snarkDirInfo .percentBarOuter, .peerinfo .percentBarText, .peerinfo .percentBarOuter {
+     width: 80px !important;
+}
+
+/* end download bars */
+
 .choked {
      color: #a00 !important;
 }
@@ -902,25 +983,16 @@ p {
 }
 
 hr {
-     color: #444;
-     background: #444;
+     color: #339;
+     background: #339;
+     background: linear-gradient(to right, #339, rgba(110,100,200,0.5));
      height: 1px;
-     border: 0 solid #444;
+     border: 0 solid #339;
      width: 0;
      margin: 5px 0 7px 0;
      text-align: center;
 }
 
-hr.debug {
-     width: 100%;
-     margin: 3px 0;
-}
-
-hr.debug:nth-child(n+7) {
-     margin-top: -10px;
-     background: #339;
-}
-
 .headerpriority br {
      display: none;
 }
@@ -1123,6 +1195,12 @@ select:active, select option {
      background: #fff;
 }
 
+select[disabled], select[disabled]:hover {
+     background: #efefff url(images/dropdown.png) right center no-repeat !important;
+     opacity: 0.7;
+     cursor: not-allowed;
+}
+
 select::-ms-expand {
      display: none;
 }
@@ -1459,6 +1537,83 @@ input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent
      font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
 }
 
+.dhtDebug th, .dhtDebug:hover {
+     font-weight: normal;
+     padding: 0 10px 10px !important;
+     background: #efefff;
+     background: repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 2px, rgba(230, 230, 255, 0.3) 3px, #fff 5px) #fff !important;
+     word-break: break-all;
+}
+
+/* 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);
+     box-shadow: inset 0 0 0 1px #efefff;
+     border: 1px solid #7778bf;
+     border-top: none;
+     text-align: center;
+     padding-bottom: 13px;
+}
+
+#dhtDebugInner {
+     text-align: left;
+     padding: 5px;
+     background: #efefff;
+     box-shadow: inset 0 0 0 1px #fff, 0 0 1px 0 rgba(160,160,160,0.5);
+     margin: -26px 0 -12px;
+}
+
+.dhtDebug th b:first-of-type, .dhtDebug th b:first-of-type + br + hr.debug {
+     display: none;
+}
+
+input#toggle_debug:not(checked) + label {
+     padding-bottom: 2px;
+}
+
+input#toggle_debug:not(checked) + label > img {
+     margin-right: -2px !important;
+}
+
+input#toggle_debug:not(checked) + label + #dhtDebugInner {
+     display: block;
+}
+
+input#toggle_debug:checked + label + #dhtDebugInner {
+     display: none;
+}
+
+.iframed input#toggle_debug:not(checked) + label + #dhtDebugInner {
+     display: block;
+}
+
+.iframed input#toggle_debug:checked + label + #dhtDebugInner {
+     display: none;
+}
+
+/* end debug panel */
+
+hr.debug {
+     width: 100%;
+     margin: 3px 0;
+}
+
+hr.debug:first-of-type {
+     background: transparent;
+     margin-top: -5px;
+     margin-bottom: -5px;
+}
+
+hr.debug:nth-child(n+7) {
+     margin-top: -10px;
+}
+
+hr.debug:last-child {
+     background: transparent;
+     margin-bottom: -4px;
+}
+
 /* end debug */
 
 /* Resource Errors */
@@ -1532,7 +1687,7 @@ input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent
 .priority::after {
      content: "";
      display: inline-block;
-     min-height: 30px;
+     min-height: 28px;
      vertical-align: middle;
 }
 
@@ -1580,10 +1735,10 @@ input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent
      line-height: 100%;
 }
 
-#bwHelp a {
+#configs a {
      display: inline-block;
      white-space: nowrap;
-     font-style: normal;
+     margin-left: 4px;
      font-weight: bold;
 }
 
@@ -1640,57 +1795,6 @@ _:-ms-lang(x), *, *:hover, *:focus, input, input:hover, input:focus, a:hover, a:
 
 /*responsive layout */
 
-@media screen and (max-width: 1000px) {
-body, td, .snarkMessages li, .snarkMessages a, button, input, select, .snarkAddInfo, code, tt, th, a, a:link, .snarkAddInfo, .snarkFileStatus {
-     font-size: 8pt !important;
-}
-
-.snarkRefresh:link {
-     font-size: 9pt !important;
-}
-
-.snarkConfigTitle a, .snarkConfigTitle, label.toggleview {
-     font-size: 10pt !important;
-}
-
-.snarkTorrents td:first-child img {
-     max-height: 16px;
-}
-
-.snarkTorrentName, .snarkTorrentName a {
-     font-weight: bold;
-}
-
-.snarkTorrents td:nth-child(2), .snarkTorrents td:nth-child(2) a {
-     white-space: nowrap;
-     font-weight: bold;
-}
-
-.snarkTorrentStatus b {
-     display: none;
-}
-
-b.alwaysShow {
-     display: inline;
-}
-}
-
-@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 1000px) {
-.snarkConfigTitle a, label.toggleview, .configsectionpanel .snarkConfigTitle {
-     font-size: 12pt !important;
-}
-}
-
-@media screen and (max-width: 1200px) {
-.dirInfoComplete {
-     display: none;
-}
-
-a.snarkRefresh:first-child {
-     padding-left: 26px !important;
-}
-}
-
 /* mini-mode: hide status text, upload speed + upload amount in main torrent table at 800px or less */
 
 @media screen and (max-width: 800px) {
@@ -1712,7 +1816,7 @@ a.snarkRefresh:first-child {
      padding: 0 !important;
 }
 
-.snarkTorrents th:nth-child(7) img {
+.snarkTorrents th:nth-child(7) img, .snarkTorrents th:nth-child(9) img {
      display: none;
 }
 
@@ -1779,7 +1883,76 @@ input[name="nofilter_dataDir"], textarea[name="i2cpOpts"] {
 
 /* end mini-mode */
 
+@media screen and (max-width: 1000px) {
+body, td, .snarkMessages li, .snarkMessages a, button, input, select, .snarkAddInfo, code, tt, th, a, a:link, .snarkAddInfo, .snarkFileStatus {
+     font-size: 8pt !important;
+}
+
+.snarkRefresh:link {
+     font-size: 9pt !important;
+}
+
+.snarkConfigTitle a, .snarkConfigTitle, label.toggleview {
+     font-size: 10pt !important;
+}
+
+.snarkTorrents td:first-child img {
+     max-height: 16px;
+}
+
+.snarkTorrentName, .snarkTorrentName a {
+     font-weight: bold;
+}
+
+.snarkTorrents td:nth-child(2), .snarkTorrents td:nth-child(2) a {
+     white-space: nowrap;
+     font-weight: bold;
+}
+
+.snarkTorrentStatus b {
+     display: none;
+}
+
+b.alwaysShow {
+     display: inline;
+}
+
+.snarkTorrentDownloaded .percentBarText, .snarkTorrentDownloaded .percentBarOuter {
+     width: 100px !important;
+}
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 1000px) {
+.snarkConfigTitle a, label.toggleview, .configsectionpanel .snarkConfigTitle {
+     font-size: 12pt !important;
+}
+}
+
+@media screen and (max-width: 1200px) {
+.dirInfoComplete {
+     display: none;
+}
+
+a.snarkRefresh:first-child {
+     padding-left: 26px !important;
+}
+}
+
+@media screen and (max-width: 1400px) {
+#dhtDebugInner {
+    margin-top: -22px !important;
+}
+}
+
 @media screen and (min-width: 1200px) {
+a.snarkRefresh {
+     font-size: 10pt !important;
+}
+
+a.snarkRefresh:first-child {
+     padding-left: 26px !important;
+}
+
 .percentDownloaded {
      pointer-events: none; /* hide tooltip */
 }
diff --git a/installer/resources/themes/snark/midnight/images/debug.png b/installer/resources/themes/snark/midnight/images/debug.png
new file mode 100644
index 0000000000000000000000000000000000000000..70bdd2cf6ef51dab5463f25c19ae54c3f3741a58
GIT binary patch
literal 668
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GXl47>xpaLR=Yi85j&07)%%#EEpJU
z7#JKG7+e?_JQ)~#7#M;W7_Ar?tr;1e7?}c?m_nJDGntuln3?mKnTwg3OPQI=nE(I(
z57KT5R`1Bb6wkz*#tbsepMg1>86*W{lrS?`F)&3kG3bD-0CE}485#7!*10nP4Frk<
zH3BVVbY^5QWB{3*#|&gJ1TZjKGV<o}G6gXKwQxFcO6E(-WXb3^>MJEGSx&aJX|=Iy
zw==6Wv!7z`Fxw$~VYoxHL(=vnhgA;l>)cH$OiU|H&8y9=>a46AtZf=?Y+G#Yd+i-&
zIyf$ObnkTcnCIa&!OLf|kKb%RzfFE2GebhwghZ~4jG7x2zcM~?TVm?E)by?CnOigS
z_U08HEG#=+w)xq!jro-Uz(DjY3GxGmA~wLy&CM$*sbcKxn~;!}QCL>q+0`|1=7Lq5
zckJA^|JbqP$4{O*d-uVEryo9j`ttSn?>~S3{#z$IEgNXm1y2{p5DCf9gQxwP9Yh!|
z{GK7nxNu9Wp`p~BUyOhMzb{A@o|d&DB1M8}`s&;Bn&t8&LtBgZ|NoMAaA69tox>GB
zhi?_bflSl1-y1E(-dgF}DRkalx^82Z^z?UY8ZQ2uF;hT%a)GQKm&$dsS-+)f^OCDY
z7brYB<r*;UQYXuU<-c4tj?OqyUQyB+Ab0-ruG~GjuWR}&XP95PtJR~G{m12N&zFFW
zDTnU*SUDbJoA10Q*t}(ZM2v<h&$qpsRyqH_z1N7rdP(LHPW!gLOs96ayuXZ*4rvOG
SHQ~Ti1q?A)KbLh*2~7b0^Vzll

literal 0
HcmV?d00001

diff --git a/installer/resources/themes/snark/midnight/snark.css b/installer/resources/themes/snark/midnight/snark.css
index 48fee9ae2..25ab1e61c 100644
--- a/installer/resources/themes/snark/midnight/snark.css
+++ b/installer/resources/themes/snark/midnight/snark.css
@@ -41,6 +41,12 @@ body.iframed {
      outline: none;
 }
 
+.toggleview, .snarkConfigTitle, .snarknavbar, img, input[type="image"] {
+     -moz-user-select: none;
+     -webkit-user-select: none;
+     user-select: none;
+}
+
 .page {
      font-size: 9pt !important;
      line-height: 160% !important;
@@ -335,11 +341,6 @@ th:first-child {
      text-align: left !important;
 }
 
-tfoot td:first-child {
-     padding-left: 0;
-     text-align: left !important;
-}
-
 th:first-child img {
      margin: 1px -2px 3px 1px !important;
 }
@@ -352,6 +353,15 @@ tfoot th {
      padding-bottom: 4px !important;
 }
 
+tfoot tr:first-child th {
+     vertical-align: middle !important;
+}
+
+tfoot td:first-child {
+     padding-left: 0;
+     text-align: left !important;
+}
+
 tfoot img, tfoot:nth-child(2) img, tfoot:nth-child(1) img, tfoot:nth-child(3) img, tfoot:nth-child(4) img {
      margin: 0 2px 3px 0 !important;
      padding-right: 0 !important;
@@ -403,7 +413,6 @@ tfoot tr:nth-child(n+1) {
 
 .snarkTorrents thead th:first-child {
      width: 36px;
-/*     padding-right: 0;*/
      text-align: center !important;
 }
 
@@ -500,6 +509,10 @@ tfoot tr:nth-child(n+1) {
      text-align: center !important;
 }
 
+.peerinfo td:nth-child(4) {
+     font-weight: bold;
+}
+
 .snarkTorrents td[colspan="10"] {
      padding: 2px;
 }
@@ -708,17 +721,18 @@ th.headerdownloaded {
      mix-blend-mode: luminosity;
 }
 
-td.snarkFileStatus {
+.snarkFileStatus {
      font-size: 8pt;
      text-align: left;
+     width: 140px;
 }
 
-td.snarkFileIcon {
+.snarkFileIcon {
      width: 16px;
      padding: 0;
 }
 
-td.snarkFileStatusIcon {
+.snarkFileStatusIcon {
      width: 24px;
      padding: 0 4px 0 0;
      text-align: center;
@@ -870,31 +884,19 @@ td.snarkTorrentDownloaded {
      mix-blend-mode: normal;
 }
 
-/*
-.ParentDir a, .ParentDir a:visited {
-     color: #7972d1 !important;
+tr:hover .percentBarText {
+     opacity: 0.9;
 }
-*/
 
 .snarkTorrents a {
      display: inline-block;
      width: 100%;
 }
 
-/*
-.snarkTorrents tr:hover a, .snarkDirInfo tr:hover a {
-     color: #a099ff;
+.snarkTorrents th a {
+     display: inline;
 }
 
-.snarkTorrents a:hover, td[onclick]:hover a, .snarkDirInfo a:hover {
-     color: #652787 !important;
-}
-
-td[onclick]:hover {
-     cursor: pointer !important;
-}
-*/
-
 .snarkTorrentEven {
      background: #010010;
 }
@@ -946,6 +948,8 @@ _:-ms-lang(x), .snarkTorrentOdd, .snarkTorrentOdd td, .SnarkTorrentEven, .SnarkT
      font-weight: normal;
      padding: 4px 2px;
      color: #7670c2 !important;
+     width: 1%;
+     white-space: nowrap;
 }
 
 .snarkFileStatus {
@@ -962,51 +966,89 @@ _:-ms-lang(x), .snarkTorrentOdd, .snarkTorrentOdd td, .SnarkTorrentEven, .SnarkT
      text-align: center !important;
 }
 
-/*
-div.percentBarOuter {
-      background: #000 !important;
-      border: 1px solid #9f9;
-      border-bottom: 1px solid #474;
-      border-right: 1px solid #474;
-      border-radius: 0;
-      float: left;
-      box-shadow: none;
-      opacity: 1;
+/* download bars */
+
+.snarkTorrentDownloaded {
+     width: 110px !important;
+     text-align: center !important;
 }
 
-div.percentBarInner {
-      border: none;
-      height: 14px;
-      background: #1c943a;
-      background: linear-gradient(to bottom,  #1c943a 0%, #092f10 50%, #0d2707 50%, #091b05 50%, #091503 100%);
+.snarkDirInfo .snarkFileStatus img {
+     float: left;
+     margin: 0 10px 0 5px;
 }
 
-div.percentBarInner.percentBarComplete {
-      background: #001100;
-      background: linear-gradient(to bottom,  #001100 0%, #002200 52%, #000000 52%, #001100 100%);
+.snarkFileStatus img[src*="clock"] {
+     margin-top: 4px;
+}
+
+.percentBarOuter {
+     background: #000;
+     background: repeating-linear-gradient(135deg, #001 1px, #001 5px, #003 6px, #003 11px);
+     border: 1px solid #171c3f;
+     box-shadow: none;
+     box-shadow: 0 0 1px 1px rgba(0,0,0,0.8);
+     margin: 3px auto;
+}
+
+.peerinfo .percentBarOuter {
+     opacity: 0.8;
+}
+
+.percentBarInner {
+     border: none;
+     height: 100%;
+     background: #33a;
+     background: linear-gradient(to bottom,  #33a 0%, #226 50%, #003 50%, #000 100%);
+     box-shadow: inset 0 0 0 1px #000;
+     opacity: 0.8;
+}
+
+.snarkTorrentDownloaded .percentBarInner {
+     background: linear-gradient(to bottom, rgba(51, 51, 170, 0.6) 0%, rgba(34, 34, 102, 0.7) 50%, rgba(0, 0, 51, 0.8) 50%, rgba(0, 0, 0, 0.9) 100%), linear-gradient(to right, rgba(255, 255, 0, 0.5) 55px, rgba(0, 255, 0, 0.5));
+}
+
+.snarkDirInfo .percentBarInner {
+     background: linear-gradient(to bottom, rgba(51, 51, 170, 0.6) 0%, rgba(34, 34, 102, 0.7) 50%, rgba(0, 0, 51, 0.8) 50%, rgba(0, 0, 0, 0.9) 100%), linear-gradient(to right, rgba(255, 255, 0, 0.5) 40px, rgba(0, 255, 0, 0.5));
+}
+
+.snarkDirInfo .percentBarInner[style="width: 0%;"] .percentBarText {
+     opacity: 0.9;
 }
 
 .percentBarText, .percentBarOuter {
-      text-align: center;
-      height: 14px;
-      top: 0;
-      width: 80px;
+     text-align: center;
+     height: 16px;
+     vertical-align: middle;
+     width: 110px;
 }
 
-.percentBarText{
-      text-align: center;
-      font-weight: bold;
-      line-height: 140%;
-      text-shadow: 0 1px 1px #000;
+.snarkDirInfo .percentBarText, .snarkDirInfo .percentBarOuter, .peerinfo .percentBarText, .peerinfo .percentBarOuter {
+     width: 80px;
 }
 
-.snarkTorrentDownloaded .percentBarText, .snarkTorrentDownloaded .percentBarOuter  {
-      width: 110px !important;
-      word-spacing: -0.2em;
-      font-size: 7.5pt;
+.percentBarText {
+     text-align: center;
+     font-weight: bold !important;
+     line-height: 16px;
+     white-space: nowrap;
+     display: block;
+     color: #00ecff;
+     text-shadow: 0 0 1px rgba(0,0,0,0.8);
+     opacity: 0;
+     transition: ease opacity 0.3s 0.5s;
 }
 
-*/
+.peerinfo .percentbartext {
+    color: #dff1ff;
+}
+
+.percentBarText:hover, .percentBarText:focus {
+     opacity: 0.9;
+     transition: ease opacity 0.3s;
+}
+
+/* end download bars */
 
 .choked {
      color: #900 !important;
@@ -1127,7 +1169,6 @@ div.percentBarInner.percentBarComplete {
      margin-right: -2px;
      margin-top: -1px;
      filter: drop-shadow(0 0 1px #000);
-/*     filter: sepia(100%) hue-rotate(150deg) drop-shadow(0 0 1px #000);*/
 }
 
 .snarkConfig {
@@ -1157,21 +1198,6 @@ hr {
      background: #3e3d4b;
 }
 
-hr.debug {
-     width: 100%;
-     background: #120f35;
-     margin: 3px 0;
-}
-
-hr.debug:nth-child(n+7) {
-     margin: -10px 0 3px;
-}
-
-hr.debug:last-child {
-     background: #000;
-     margin-bottom: -5px;
-}
-
 .configsectionpanel hr {
      margin-bottom: 10px;
 }
@@ -1453,6 +1479,17 @@ select:hover {
      box-shadow: inset 0 1px 1px 0 #c9ceff;
 }
 
+select[disabled], select[disabled]:hover {
+     color: #4e47bf !important;
+     background: #000 url(images/dropdown.png) right 3px center no-repeat !important;
+     border: 1px solid #3e3f8f;
+     border-bottom-color: #14144f;
+     border-right-color: #14144f;
+     box-shadow: none !important;
+     opacity: 0.7;
+     cursor: not-allowed;
+}
+
 select option {
      font-size: 9.5pt;
      font-weight: normal;
@@ -1778,11 +1815,11 @@ _:-ms-lang(x), #trackerselect tr:last-child {
      padding-left: 5px !important;
 }
 
-#bwHelp a {
+#configs a {
      display: inline-block;
      white-space: nowrap;
-     margin-left: 5px;
-     font-style: normal;
+     margin-left: 4px;
+     font-weight: bold;
 }
 
 .snarkConfig tr:nth-last-child(2) {
@@ -2038,6 +2075,90 @@ label.toggleview, .snarkConfigTitle a, .snarkConfigTitle a:visited {
      color: #c9ceff;
 }
 
+tfoot .dhtDebug th {
+     word-break: break-all;
+     padding: 0 10px 10px !important;
+}
+
+/* debug panel */
+
+#dhtDebugPanel {
+     background: linear-gradient(to bottom, #001, #000009);
+     border: 1px solid #443da0;
+     border-top: none;
+     box-shadow: inset 0 0 0 1px #000;
+     text-align: center;
+     padding-bottom: 13px;
+}
+
+#dhtDebugPanel .toggleview {
+     padding-bottom: 2px !important;
+}
+
+#dhtDebugInner {
+     text-align: left;
+     padding: 5px;
+     background: #000;
+     margin: -23px 0 -12px;
+}
+
+.dhtDebug th b:first-of-type, .dhtDebug th b:first-of-type + br + hr.debug {
+     display: none;
+}
+
+input#toggle_debug:not(checked) + label {
+     padding-bottom: 2px;
+}
+
+input#toggle_debug:not(checked) + label > img {
+     margin-right: -2px !important;
+}
+
+input#toggle_debug:not(checked) + label + #dhtDebugInner {
+     display: block;
+}
+
+input#toggle_debug:checked + label + #dhtDebugInner {
+     display: none;
+}
+
+.iframed input#toggle_debug:not(checked) + label + #dhtDebugInner {
+     display: block;
+}
+
+.iframed input#toggle_debug:checked + label + #dhtDebugInner {
+     display: none;
+}
+
+/* end debug panel */
+
+hr.debug {
+     width: 100%;
+     background: #120f35;
+     margin: 3px 0;
+}
+
+hr.debug:first-of-type {
+     background: transparent;
+     margin-bottom: -5px;
+     margin-top: -2px;
+}
+
+hr.debug + hr {
+     display: block;
+     background: transparent;
+     margin-bottom: -3px;
+}
+
+hr.debug:nth-child(n+7) {
+     margin: -10px 0 3px;
+}
+
+hr.debug:last-child {
+     background: #000;
+     margin-bottom: -5px;
+}
+
 /* end debug */
 
 /* Resource Errors */
@@ -2080,7 +2201,7 @@ label.toggleview, .snarkConfigTitle a, .snarkConfigTitle a:visited {
 }
 
 #NotFound {
-     border-bottom: 1px solid #443da0;
+     border: 1px solid #443da0;
 }
 
 /* end Resource Errors */
@@ -2257,6 +2378,26 @@ b.alwaysShow {
      width: 30px !important;
 }
 
+.peerinfo .percentBarText, .snarkDirInfo .percentBarText  {
+     line-height: 18px;
+}
+
+.percentBarText, .percentBarOuter {
+     width: 100px;
+}
+
+.snarkDirInfo .percentBarText, .snarkDirInfo .percentBarOuter, .peerinfo .percentBarText, .peerinfo .percentBarOuter {
+     width: 60px;
+}
+
+.snarkTorrentDownloaded .percentBarInner {
+     background: linear-gradient(to bottom, rgba(51, 51, 170, 0.6) 0%, rgba(34, 34, 102, 0.7) 50%, rgba(0, 0, 51, 0.8) 50%, rgba(0, 0, 0, 0.9) 100%), linear-gradient(to right, rgba(255, 255, 0, 0.5) 50px, rgba(0, 255, 0, 0.5));
+}
+
+.snarkDirInfo .percentBarInner {
+     background: linear-gradient(to bottom, rgba(51, 51, 170, 0.6) 0%, rgba(34, 34, 102, 0.7) 50%, rgba(0, 0, 51, 0.8) 50%, rgba(0, 0, 0, 0.9) 100%), linear-gradient(to right, rgba(255, 255, 0, 0.5) 30px, rgba(0, 255, 0, 0.5));
+}
+
 .configsectionpanel .snarkConfigTitle {
      font-size: 10.5pt !important;
 }
@@ -2298,6 +2439,10 @@ a, th, thead th, tfoot th, td, select, select option, .snarkAddInfo, .snarkFileN
      font-size: 9pt !important;
 }
 
+.snarkRefresh {
+     font-size: 10.5pt !important;
+}
+
 .snarkConfigTitle, .snarkConfigTitle a, label.toggleview, .snarkRefresh:link {
      font-size: 11pt !important;
 }
@@ -2316,10 +2461,6 @@ a, th, thead th, tfoot th, td, select, select option, .snarkAddInfo, .snarkFileN
      font-size: 10pt !important;
 }
 
-.snarkRefresh {
-     font-size: 10.5pt !important;
-}
-
 .snarkConfigTitle, .toggleview {
      padding: 4px 25px 4px 22px;
 }
diff --git a/installer/resources/themes/snark/ubergine/images/debug.png b/installer/resources/themes/snark/ubergine/images/debug.png
new file mode 100644
index 0000000000000000000000000000000000000000..70bdd2cf6ef51dab5463f25c19ae54c3f3741a58
GIT binary patch
literal 668
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GXl47>xpaLR=Yi85j&07)%%#EEpJU
z7#JKG7+e?_JQ)~#7#M;W7_Ar?tr;1e7?}c?m_nJDGntuln3?mKnTwg3OPQI=nE(I(
z57KT5R`1Bb6wkz*#tbsepMg1>86*W{lrS?`F)&3kG3bD-0CE}485#7!*10nP4Frk<
zH3BVVbY^5QWB{3*#|&gJ1TZjKGV<o}G6gXKwQxFcO6E(-WXb3^>MJEGSx&aJX|=Iy
zw==6Wv!7z`Fxw$~VYoxHL(=vnhgA;l>)cH$OiU|H&8y9=>a46AtZf=?Y+G#Yd+i-&
zIyf$ObnkTcnCIa&!OLf|kKb%RzfFE2GebhwghZ~4jG7x2zcM~?TVm?E)by?CnOigS
z_U08HEG#=+w)xq!jro-Uz(DjY3GxGmA~wLy&CM$*sbcKxn~;!}QCL>q+0`|1=7Lq5
zckJA^|JbqP$4{O*d-uVEryo9j`ttSn?>~S3{#z$IEgNXm1y2{p5DCf9gQxwP9Yh!|
z{GK7nxNu9Wp`p~BUyOhMzb{A@o|d&DB1M8}`s&;Bn&t8&LtBgZ|NoMAaA69tox>GB
zhi?_bflSl1-y1E(-dgF}DRkalx^82Z^z?UY8ZQ2uF;hT%a)GQKm&$dsS-+)f^OCDY
z7brYB<r*;UQYXuU<-c4tj?OqyUQyB+Ab0-ruG~GjuWR}&XP95PtJR~G{m12N&zFFW
zDTnU*SUDbJoA10Q*t}(ZM2v<h&$qpsRyqH_z1N7rdP(LHPW!gLOs96ayuXZ*4rvOG
SHQ~Ti1q?A)KbLh*2~7b0^Vzll

literal 0
HcmV?d00001

diff --git a/installer/resources/themes/snark/ubergine/snark.css b/installer/resources/themes/snark/ubergine/snark.css
index 56142df8c..3ef671fe2 100644
--- a/installer/resources/themes/snark/ubergine/snark.css
+++ b/installer/resources/themes/snark/ubergine/snark.css
@@ -382,11 +382,6 @@ th:nth-child(2) img {
      margin: 1px 7px 3px 2px !important;
 }
 
-tfoot th {
-     padding-bottom: 4px !important;
-     vertical-align: top;
-}
-
 tfoot img, tfoot:nth-child(2) img, tfoot:nth-child(1) img, tfoot:nth-child(3) img, tfoot:nth-child(4) img {
      margin: 0 2px 3px 0 !important;
      padding-right: 0 !important;
@@ -398,7 +393,7 @@ tfoot tr:nth-child(n+1) {
 
 .headerstatus {
      text-align: left;
-     padding-left: 15px;
+     padding-left: 5px;
 }
 
 .headerpriority {
@@ -486,9 +481,10 @@ tfoot tr:nth-child(n+1) {
 .snarkTorrents tfoot th {
      padding: 5px 2px;
      font-weight: normal;
+     vertical-align: middle;
 }
 
-.snarkTorrents tfoot th::first-line {
+.snarkTorrents tfoot tr:first-child th {
      font-weight: bold;
      vertical-align: middle;
 }
@@ -497,7 +493,7 @@ tfoot tr:nth-child(n+1) {
      background: #120012;
 }
 
-.snarkTorrents thead th:nth-last-child(4), .snarkTorrents thead th:nth-last-child(5), .snarkTorrents tfoot th:nth-last-child(4), .snarkTorrents tfoot th:nth-last-child(5)  {
+.snarkTorrents thead th:nth-last-child(4), .snarkTorrents tfoot th:nth-last-child(4) {
      text-align: center;
 }
 
@@ -509,21 +505,17 @@ tfoot tr:nth-child(n+1) {
      text-align: right;
 }
 
-.snarkTorrents tfoot th:nth-child(2) {
-     text-align: center;
-}
-
 .snarkTorrents td:nth-child(3), .SnarkTorrents td:nth-child(4) {
      width: 16px;
      padding: 2px 0;
 }
 
-.snarkTorrents td:nth-child(3) {
-     text-align: right;
+.snarkTorrents .peerinfo td:nth-child(3), .snarkTorrents .peerinfo td:nth-child(4) {
+     padding: 2px 4px;
 }
 
-.snarkTorrents td:nth-child(4) {
-     text-align: left;
+.snarkTorrents td:nth-child(3) {
+     text-align: right;
 }
 
 .snarkTorrents tt {
@@ -555,7 +547,7 @@ td:first-child {
 
 .snarkTorrentName {
      line-height: 110%;
-     padding: 2px 1px 2px 0;
+     padding: 2px 1px 2px 3px;
 }
 
 .snarkTorrentName img {
@@ -571,11 +563,11 @@ td:first-child {
      white-space: nowrap;
 }
 
-.snarkTorrents th:last-child {
+.snarkTorrents thead th:last-child {
      white-space: nowrap !important;
      text-align: center;
      padding-right: 4px;
-     width: 40px;
+     width: 1%;
 }
 
 .snarkTorrents th:last-child input[type="image"] {
@@ -644,12 +636,6 @@ a img[src$="details.png"]:hover, a:focus img[src$="details.png"] {
      padding-left: 0;
 }
 
-.snarkTorrentDownloaded {
-     color: #76a !important;
-     white-space: nowrap;
-     text-align: center !important;
-}
-
 .snarkTorrentUploaded {
      color: #b9b !important;
 }
@@ -705,7 +691,8 @@ a img[src$="details.png"]:hover, a:focus img[src$="details.png"] {
 }
 
 .snarkTorrentEven + .snarkTorrentEven td:nth-child(4), .snarkTorrentOdd + .snarkTorrentOdd td:nth-child(4) {
-     text-align: center !important;
+     text-align: right !important;
+     font-weight: bold;
 }
 
 .snarkTorrentEven + .snarkTorrentEven td:nth-child(n+5), .snarkTorrentOdd + .snarkTorrentOdd td:nth-child(n+5) {
@@ -719,8 +706,8 @@ table.snarkTorrents tbody tr:hover, table.snarkDirInfo tbody tr:hover {
      border-bottom: 1px solid #101 !important;
 }
 
-table.snarkTorrents tbody tr:hover {
-     box-shadow: inset 0 1px 1px 0 #939;
+tr:hover .percentBarText  {
+     opacity: 1;
 }
 
 /* MS Edge fix */
@@ -755,17 +742,19 @@ table.snarkTorrents tbody tr:hover .snarkTorrentName, table.snarkDirInfo tbody t
      padding: 4px 2px;
      font-weight: bold;
      color: #b6b !important;
-     width: 9em !important;
+     width: 1%;
+     white-space: nowrap;
 }
 
 .snarkFileStatus {
-     padding: 2px 5px 2px 15px;
+     padding: 2px 5px;
      font-style: italic;
      font-size: 8pt;
      text-align: left !important;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
+     width: 140px;
 }
 
 .snarkFileStatus img[src*="clock"] {
@@ -897,12 +886,105 @@ _:-ms-lang(x), .snarkDirInfo img, .snarkTorrents img {
      color: #f90;
 }
 
+/* download bars */
+
+.snarkTorrentDownloaded {
+     text-align: right !important;
+     width: 110px;
+     color: #76a !important;
+     white-space: nowrap;
+}
+
+.snarkDirInfo .snarkFileStatus img {
+     float: left;
+     margin: 0 10px 0 7px;
+}
+
+.priorityIndicator img[src*="clock"] {
+     margin-top: 4px;
+}
+
+.percentBarOuter {
+     background: #000 !important;
+     background: repeating-linear-gradient(135deg, #000 1px, #000 5px, #101 6px, #101 11px) !important;
+     border: 1px solid #414;
+     border-bottom: 1px solid #212;
+     border-right: 1px solid #212;
+     opacity: 0.7;
+     box-shadow: 0 0 1px 1px rgba(0,0,0,0.5);
+     margin: 2px 0 !important;
+}
+
+.snarkTorrentDownloaded .percentBarOuter {
+     margin-left: 5px !important;
+}
+
+.peerinfo .percentBarOuter {
+     background: repeating-linear-gradient(135deg, #000 1px, #000 5px, #0f0a08 6px, #0f0a08 11px) !important;
+     height: 16px;
+     line-height: 13px;
+}
+
+.percentBarInner {
+     border: none;
+     height: 100%;
+     background: #515;
+     background: linear-gradient(to bottom, rgba(136, 17, 136, 0.7) 0%, rgba(85, 17, 85, 0.7) 50%, rgba(51, 17, 51, 0.7) 50%, rgba(0, 0, 0, 0.9) 100%);
+     box-shadow: inset 0 0 0 1px #000;
+}
+
+.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%);
+}
+
+.peerinfo .percentBarText {
+     color: #C19E91;
+}
+
+.percentBarText, .percentBarOuter {
+     width: 110px;
+     text-align: center;
+     vertical-align: middle;
+}
+
+.snarkDirInfo .percentBarText, .snarkDirInfo .percentBarOuter, .peerinfo .percentBarText, .peerinfo .percentBarOuter {
+     width: 80px;
+}
+
+.snarkDirInfo .percentBarOuter {
+     float: left;
+}
+
+.peerinfo .percentBarOuter {
+     float: right;
+}
+
+.percentBarText {
+     text-align: center;
+     font-weight: bold;
+     padding: 2px 0;
+     white-space: nowrap;
+     display: block;
+     color: #dd7;
+     text-shadow: 0 0 1px rgba(0,0,0,0.8);
+     opacity: 0;
+     transition: ease opacity 0.3s 0.5s;
+}
+
+.percentBarText:hover, .percentBarText:focus {
+     opacity: 1;
+     transition: ease opacity 0.3s;
+}
+
+/* end download bars */
+
 .choked {
      color: #f00000 !important;
 }
 
 .unchoked {
      color: #00f000 !important;
+     color: #34CF19 !important;
 }
 
 .choked, .unchoked {
@@ -972,6 +1054,12 @@ table#trackerselect {
      user-select: all;
 }
 
+.toggleview, .snarkConfigTitle, .snarknavbar, img, input[type="image"] {
+     -moz-user-select: none;
+     -webkit-user-select: none;
+     user-select: none;
+}
+
 .snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active {
      font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, sans-serif;
      font-size: 12pt;
@@ -1037,21 +1125,6 @@ hr {
      text-align: center;
 }
 
-hr.debug {
-     width: 100%;
-}
-
-hr.debug:nth-child(n+7) {
-     margin-top: -11px;
-     margin-bottom: 2px;
-     opacity: 0.5;
-}
-
-hr.debug:last-child {
-     background: #303;
-     margin-bottom: -4px;
-}
-
 a:link {
      color: #f70;
      text-decoration: none;
@@ -1482,6 +1555,15 @@ select:hover, select:focus, select:active  {
      background-blend-mode: luminosity;
 }
 
+select[disabled], select[disabled]:hover, select[disabled]:focus {
+     opacity: 0.5;
+     background: #212 url(images/graytile.png) !important;
+     background: url(images/dropdown.png) right center no-repeat, url(images/graytile.png) #212 !important;
+     background-blend-mode: normal;
+     color: #f60 !important;
+     cursor: not-allowed;
+}
+
 select option {
      background: #f50;
      color: #fff;
@@ -1905,6 +1987,122 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac
      color: #b9b;
 }
 
+hr.debug {
+     background: linear-gradient(to right, #313, #414, #313);
+     background: rgba(32,16,32,0.3);
+     border-bottom: 1px solid rgba(128, 0, 128, 0.3);
+     width: 100%;
+     height: 1px;
+}
+
+@-moz-document url-prefix() {
+hr.debug {
+     height: 2px;
+}
+}
+
+hr.debug:nth-child(n+7) {
+     margin-top: -7px;
+     margin-bottom: 7px;
+}
+
+hr.debug:first-of-type {
+     background: transparent;
+     border: none;
+     margin-bottom: -2px;
+}
+
+hr.debug:last-child {
+     background: transparent;
+     border: none;
+     margin-bottom: -4px;
+}
+
+hr.debug + hr {
+     background: transparent !important;
+     display: block !important;
+     margin-bottom: -7px;
+}
+
+tr.dhtDebug th {
+     white-space: normal;
+     word-break: break-all;
+     border-top: 1px solid #313;
+     background: #1f021f;
+     padding: 0 10px 5px;
+     padding: 0 0 4px;
+     background: linear-gradient(to right, rgba(30,0,30,0.4) 0%, rgba(55,0,55,0.5) 50%, rgba(30,0,30,0.4) 100%), url(images/tile2.png);
+}
+
+.dhtDebug th > br:first-child {
+     display: none;
+}
+
+/* debug panel */
+
+#dhtDebugPanel {
+     background: #101;
+     background: linear-gradient(to bottom, #545 0%, #434 100%);
+     background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.2) 30%, rgba(0,0,0,1)), linear-gradient(to right, rgba(128,0,128,0) 30%, #414 50%, rgba(128,0,128,0) 70%), linear-gradient(to bottom, #101, #000);
+     border: 1px solid #414;
+     border-top: none;
+     border-radius: 0 0 4px 4px;
+     box-shadow: 0 1px 2px 0 rgba(16,0,16,0.6);
+     text-align: center;
+     padding-bottom: 13px;
+     margin: 0 8px 4px;
+}
+
+#dhtDebugPanel label {
+     padding: 8px 4px 4px !important;
+     display: block;
+     margin: 0 0 -13px !important;
+     border-radius: 0 0 4px 4px;
+     background: #202;
+}
+
+input#toggle_debug:not(checked) + label {
+     border-radius: 0;
+     background: #101;
+     text-align: center;
+}
+
+#dhtDebugInner {
+     text-align: left;
+     padding: 3px 10px 5px;
+     background: #000;
+     margin: -33px 0 -12px;
+}
+
+.dhtDebug th b:first-of-type, .dhtDebug th b:first-of-type + br + hr.debug {
+     display: none;
+}
+
+input#toggle_debug:not(checked) + label {
+     padding-bottom: 2px;
+}
+
+input#toggle_debug:not(checked) + label > img {
+     margin-right: -2px !important;
+}
+
+input#toggle_debug:not(checked) + label + #dhtDebugInner {
+     display: block;
+}
+
+input#toggle_debug:checked + label + #dhtDebugInner {
+     display: none;
+}
+
+.iframed input#toggle_debug:not(checked) + label + #dhtDebugInner {
+     display: block;
+}
+
+.iframed input#toggle_debug:checked + label + #dhtDebugInner {
+     display: none;
+}
+
+/* end debug panel */
 /* end debug */
 
 /* Resource Errors */
@@ -2034,7 +2232,7 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac
      font-weight: bold;
 }
 
-td#bwHelp {
+#bwHelp {
      background: url(images/infocircle.png) left 8px center no-repeat;
      background-size: 14px auto;
      padding-left: 26px !important;
@@ -2042,7 +2240,7 @@ td#bwHelp {
      line-height: 100%;
 }
 
-td#bwHelp a {
+#bwHelp a {
      display: inline-block;
      white-space: nowrap;
      margin-left: 4px;
@@ -2155,13 +2353,26 @@ table.snarkDirInfo {
 }
 
 .snarkTorrentName a:not(old) {
-     max-width: 300px;
+     max-width: 300px !important;
 }
 
 .snarkTorrentDownloaded {
      white-space: nowrap;
 }
 
+.percentBarOuter {
+     margin: 0 !important;
+     display: inline-block;
+}
+
+.percentBarOuter, .percentBarText {
+     width: 105px;
+}
+
+.snarkDirInfo .percentBarText, .snarkDirInfo .percentBarOuter {
+     width: 60px;
+}
+
 .snarkTorrentStatus b {
      display: none;
 }
@@ -2202,6 +2413,10 @@ b.alwaysShow {
 #trackerselect td a {
      max-width: 350px;
 }
+
+.priorityIndicator img[src*="clock"] {
+     margin-top: 0;
+}
 }
 
 @media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 1050px) {
@@ -2232,6 +2447,10 @@ b.alwaysShow {
      text-overflow: ellipsis;
 }
 
+.snarkFileStatus {
+     width: 120px;
+}
+
 .toggleview, .snarkConfigTitle, .snarkConfigTitle a {
      font-size: 11pt !important;
 }
@@ -2256,6 +2475,16 @@ _:-ms-lang(x), .snarkRefresh:link, .snarkRefresh:visited {
      background-position: 11px 5px, center center !important;
      background-size: 15px auto, 100% 100% !important;
 }
+
+.peerinfo .percentBarOuter {
+     filter: sepia(1);
+     height: 14px;
+     line-height: 11px;
+}
+
+#dhtDebugInner {
+     padding-top: 15px !important;
+}
 }
 
 @media screen and (min-width: 1050px) {
@@ -2359,10 +2588,6 @@ input[type="submit"], input[type="reset"], select, select option, button, a.cont
      display: inline-block;
 }
 
-.SnarkTorrents td:nth-child(4) {
-     padding-right: 5px;
-}
-
 .snarkTorrentName a:not(old) {
      max-width: none; 
 }
@@ -2413,14 +2638,6 @@ select {
      font-size: 9pt !important;
 }
 
-.snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded, .snarkFileSize {
-     padding: 0 8px !important;
-}
-
-.choked, .unchoked {
-     margin-right: 6px;
-}
-
 #pagenav img {
      width: 16px !important;
      height: 16px !important;
diff --git a/installer/resources/themes/snark/vanilla/images/debug.png b/installer/resources/themes/snark/vanilla/images/debug.png
new file mode 100644
index 0000000000000000000000000000000000000000..70bdd2cf6ef51dab5463f25c19ae54c3f3741a58
GIT binary patch
literal 668
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GXl47>xpaLR=Yi85j&07)%%#EEpJU
z7#JKG7+e?_JQ)~#7#M;W7_Ar?tr;1e7?}c?m_nJDGntuln3?mKnTwg3OPQI=nE(I(
z57KT5R`1Bb6wkz*#tbsepMg1>86*W{lrS?`F)&3kG3bD-0CE}485#7!*10nP4Frk<
zH3BVVbY^5QWB{3*#|&gJ1TZjKGV<o}G6gXKwQxFcO6E(-WXb3^>MJEGSx&aJX|=Iy
zw==6Wv!7z`Fxw$~VYoxHL(=vnhgA;l>)cH$OiU|H&8y9=>a46AtZf=?Y+G#Yd+i-&
zIyf$ObnkTcnCIa&!OLf|kKb%RzfFE2GebhwghZ~4jG7x2zcM~?TVm?E)by?CnOigS
z_U08HEG#=+w)xq!jro-Uz(DjY3GxGmA~wLy&CM$*sbcKxn~;!}QCL>q+0`|1=7Lq5
zckJA^|JbqP$4{O*d-uVEryo9j`ttSn?>~S3{#z$IEgNXm1y2{p5DCf9gQxwP9Yh!|
z{GK7nxNu9Wp`p~BUyOhMzb{A@o|d&DB1M8}`s&;Bn&t8&LtBgZ|NoMAaA69tox>GB
zhi?_bflSl1-y1E(-dgF}DRkalx^82Z^z?UY8ZQ2uF;hT%a)GQKm&$dsS-+)f^OCDY
z7brYB<r*;UQYXuU<-c4tj?OqyUQyB+Ab0-ruG~GjuWR}&XP95PtJR~G{m12N&zFFW
zDTnU*SUDbJoA10Q*t}(ZM2v<h&$qpsRyqH_z1N7rdP(LHPW!gLOs96ayuXZ*4rvOG
SHQ~Ti1q?A)KbLh*2~7b0^Vzll

literal 0
HcmV?d00001

diff --git a/installer/resources/themes/snark/vanilla/snark.css b/installer/resources/themes/snark/vanilla/snark.css
index e65d83e32..827aba936 100644
--- a/installer/resources/themes/snark/vanilla/snark.css
+++ b/installer/resources/themes/snark/vanilla/snark.css
@@ -108,10 +108,9 @@ td a:active, td a:visited:active {
      color: #FF2F85 !important;
 }
 
-.snarkRefresh, .toggleview, .snarkConfigTitle, thead img, .snarkTorrentAction,
-input[type="submit"], input[type="reset"], .control, .input[type="radio"], input[type="checkbox"] {
-     -webkit-user-select: none;
+.toggleview, .snarkConfigTitle, .snarknavbar, img, input[type="image"] {
      -moz-user-select: none;
+     -webkit-user-select: none;
      user-select: none;
 }
 
@@ -448,8 +447,9 @@ tfoot td:first-child {
      padding-left: 0;
 }
 
-tfoot th {
-     padding-bottom: 4px !important;
+tfoot tr:first-child th {
+     vertical-align: middle;
+     font-weight: bold;
 }
 
 tfoot img, tfoot:nth-child(2) img, tfoot:nth-child(1) img, tfoot:nth-child(3) img, tfoot:nth-child(4) img {
@@ -457,10 +457,6 @@ tfoot img, tfoot:nth-child(2) img, tfoot:nth-child(1) img, tfoot:nth-child(3) im
      padding-right: 0 !important;
 }
 
-tfoot tr:nth-child(n+1) {
-     text-align: left;
-}
-
 .headerstatus {
      text-align: left;
 }
@@ -527,7 +523,7 @@ tfoot tr:nth-child(n+1) {
 }
 
 .snarkTorrents thead th:nth-child(3) {
-     padding: 4px 4px 4px 0	;
+     padding: 4px 4px 4px 0;
      text-align: right;
 }
 
@@ -540,12 +536,12 @@ tfoot tr:nth-child(n+1) {
 }
 
 .snarkTorrents th:first-child, .snarkTorrents td:first-child {
-     width: 30px;
+     width: 1%;
      white-space: nowrap;
 }
 
 .snarkTorrents th:last-child, .snarkTorrents td:last-child {
-     width: 36px;
+     width: 1%;
      white-space: nowrap;
 }
 
@@ -553,10 +549,6 @@ tfoot tr:nth-child(n+1) {
      vertical-align: top;
 }
 
-.snarkTorrents tfoot th:nth-child(2) {
-     text-align: center;
-}
-
 .snarkTorrents td:first-child, .snarkTorrents td:nth-child(2) {
      padding: 2px 0 !important;
 }
@@ -571,8 +563,6 @@ tfoot tr:nth-child(n+1) {
 }
 
 .snarkTorrents td:nth-child(4) {
-     text-align: center;
-     padding-right: 4px !important;
      font-weight: bold;
 }
 
@@ -586,6 +576,7 @@ td {
      color: #2f1500 !important;
      opacity: 1;
      font-size: 8pt;
+     vertical-align: middle;
 }
 
 td:first-child {
@@ -598,7 +589,7 @@ td:first-child {
 }
 
 .snarkTorrentName {
-     padding: 3px 0;
+     padding-left: 5px !important;
      line-height: 110%;
 }
 
@@ -612,7 +603,7 @@ td:first-child {
      padding: 1px 1px 1px 1px !important;
      margin: 0 !important;
      text-align: center;
-     width: 68px;
+     width: 1%;
      white-space: nowrap;
 }
 
@@ -668,7 +659,6 @@ _:-ms-lang(x), .snarkTorrentAction {
 
 .snarkTorrentStatus {
      padding: 2px 0;
-     line-height: 100%;
 }
 
 .snarkTorrentStatus:first-child {
@@ -689,7 +679,7 @@ _:-ms-lang(x), .snarkTorrentAction {
      font-size: 8pt;
      font-weight: bold;
      padding: 0 3px;
-     line-height: 120% !important;
+/*     line-height: 120% !important;*/
 }
 
 .snarkTorrentDownloaded {
@@ -732,7 +722,11 @@ _:-ms-lang(x), .snarkTorrentOdd td, .snarkTorrentEven td, .snarkTorrentInfo td,
 
 table.snarkTorrents tbody tr:hover, table.snarkDirInfo tbody tr:hover {
      background: #f9efcf !important;
-     background: linear-gradient(to right, #700 3px, #f9efcf 3px) !important;
+     background: linear-gradient(to right, rgba(119, 0, 0, 0.7) 3px, #f9efcf 3px) !important;
+}
+
+tr:hover .percentBarText {
+     opacity: 1;
 }
 
 @media screen and (-webkit-min-device-pixel-ratio:0) {
@@ -822,6 +816,8 @@ td.snarkFileIcon:first-child {
      padding: 4px 2px;
      font-weight: bold;
      color: #727 !important;
+     width: 1%;
+     white-space: nowrap;
 }
 
 .snarkFileStatus {
@@ -831,6 +827,7 @@ td.snarkFileIcon:first-child {
      font-size: 8pt;
      text-align: left;
      white-space: nowrap;
+     width: 140px;
 }
 
 .snarkTorrentETA {
@@ -905,6 +902,10 @@ td.snarkFileIcon:first-child {
      border-top: none !important;
 }
 
+.snarkDirInfo thead th:nth-child(n+2) {
+     text-align: center;
+}
+
 .snarkDirInfo thead img {
      margin: 0 -1px 0 0 !important;
      padding: 0 3px !important;
@@ -936,7 +937,7 @@ thead img.disable, img.disable:hover {
      text-align: center !important;
      vertical-align: middle;
      padding: 5px !important;
-     width: 160px
+     width: 160px;
 }
 
 #setPriority .headerpriority {
@@ -958,6 +959,107 @@ thead img.disable, img.disable:hover {
      display: none;
 }
 
+/* download bars */
+
+.snarkTorrents th:nth-child(6) {
+     text-align: right;
+}
+
+.snarkTorrentDownloaded {
+     width: 110px !important;
+     text-align: right !important;
+}
+
+.snarkDirInfo .snarkFileStatus img {
+     float: left;
+     margin: 1px 10px 0 7px;
+}
+
+.percentBarOuter, .percentBarText {
+     width: 110px;
+}
+
+.snarkDirInfo .percentBarText, .snarkDirInfo .percentBarOuter {
+     width: 90px;
+}
+
+.percentBarOuter {
+     background: #fff7ef;
+     background: repeating-linear-gradient(135deg, #fff7ef 1px, #fff7ef 5px, #efdfd1 6px, #efdfd1 11px);
+     border: 1px solid #998;
+     border-bottom: 1px solid #776;
+     border-right: 1px solid #776;
+     box-shadow: none;
+     opacity: 1;
+     margin: 0;
+}
+
+.snarkTorrentDownloaded .percentBarOuter {
+     margin-left: 5px;
+}
+
+.peerinfo .percentBarOuter, .peerinfo .percentBarText {
+     width: 70px;
+}
+
+.peerinfo .percentBarText {
+     padding: 1px;
+     color: #3f3927;
+}
+
+.snarkDirInfo .percentBarOuter {
+     float: left;
+}
+
+.percentBarInner {
+     border: none;
+     height: 100%;
+     background: #cfc1b5;
+     background: linear-gradient(to bottom, rgba(255, 247, 239, 0.8) 0%, rgba(255, 247, 239, 0.8) 50%, rgba(207, 193, 181, 0.9) 50%, rgba(207, 193, 181, 1) 100%);
+     box-shadow: inset 0 0 0 1px #efe6e0;
+     vertical-align: middle;
+     height: 16px;
+}
+
+.snarkTorrentDownloaded .percentBarInner {
+     background: linear-gradient(to bottom, rgba(255, 247, 239, 0.75) 0%, rgba(255, 247, 239, 0.75) 50%, rgba(207, 193, 181, 0.8) 50%, rgba(207, 193, 181, 0.9) 100%), linear-gradient(to right, rgba(255, 100, 0, 0.5) 37px, rgba(255, 255, 0, 0.5) 74px, rgba(0, 255, 0, 0.5));
+}
+
+.snarkDirInfo .percentBarInner {
+     background: linear-gradient(to bottom, rgba(255, 247, 239, 0.75) 0%, rgba(255, 247, 239, 0.75) 50%, rgba(207, 193, 181, 0.8) 50%, rgba(207, 193, 181, 0.9) 100%), linear-gradient(to right, rgba(255, 100, 0, 0.5) 30px, rgba(255, 255, 0, 0.5) 60px, rgba(0, 255, 0, 0.5));
+}
+
+.percentBarText, .percentBarOuter {
+     text-align: center;
+     vertical-align: middle;
+}
+
+.percentBarText {
+     text-align: center;
+     font-weight: bold;
+     white-space: nowrap;
+     color: #919;
+     opacity: 0;
+     transition: ease opacity 0.3s 0.5s;
+     vertical-align: middle;
+}
+
+.snarkTorrentDownloaded .percentBarText {
+     line-height: 16px;
+}
+
+.snarkDirInfo .percentBarText {
+     padding: 1px 0;
+}
+
+.percentBarText:hover, .percentBarText:focus {
+     opacity: 0.9;
+     transition: ease opacity 0.3s;
+     filter: none;
+}
+
+/* end download bars */
+
 .choked {
      color: #a00000 !important;
 }
@@ -1149,26 +1251,6 @@ hr {
      text-align: center;
 }
 
-hr.debug {
-     width: 100%;
-     margin: 5px 0;
-     background: linear-gradient(to right, #6f533e 40%, #9f8877);
-}
-
-hr.debug:nth-child(n+7) {
-     margin: 2px 0 3px;
-}
-
-hr.debug:last-child {
-     display: none;
-}
-
-@media screen and (-webkit-min-device-pixel-ratio:0) {
-hr.debug:nth-child(n+7) {
-    margin: -10px 0 4px;
-}
-}
-
 /* buttons & inputs */
 
 .script {
@@ -1201,7 +1283,6 @@ a.control, a.controld {
 a.controld {
      color: #f60;
      font-weight: normal;
-/*     display: none;*/
 }
 
 a.control:hover, a.control:focus {
@@ -1636,6 +1717,9 @@ code, tt {
      padding: 0 1px;
      font-weight: bold;
      font-family: "DejaVu Sans Mono", "Droid Sans Mono", "Lucida Console", monospace;
+     -moz-user-select: all;
+     -webkit-user-select: all;
+     user-select: all;
 }
 
 .routerdown {
@@ -1821,6 +1905,116 @@ code, tt {
      margin: 2px 3px !important;
 }
 
+.dhtDebug th {
+     padding: 0 10px 10px;
+     background: #fff;
+     background: repeating-linear-gradient(to bottom, #ecebdd 1px, #efebdd 2px, #ebe5d5 5px);
+     word-break: break-all;
+}
+
+hr.debug {
+     width: 100%;
+     height: 1px;
+     margin: 5px 0;
+     background: linear-gradient(to right, #6f533e 40%, #9f8877);
+     border-bottom: 1px solid #fff;
+}
+
+@-moz-document url-prefix() {
+hr.debug {
+     height: 2px;
+}
+}
+
+hr.debug + hr {
+     margin-bottom: -1px;
+}
+
+hr.debug:first-of-type {
+     background: transparent;
+     border: none;
+     margin-top: 10px;
+     margin-bottom: -5px;
+}
+
+hr.debug:nth-child(n+7) {
+     margin: 4px 0;
+}
+
+hr.debug:last-child {
+     background: transparent;
+     border: none;
+     margin-bottom: 5px !important;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+hr.debug:first-of-type {
+     background: transparent;
+     margin-top: -5px;
+     margin-bottom: -5px;
+}
+
+hr.debug:nth-child(n+7) {
+    margin: -10px 0 4px;
+}
+
+hr.debug:last-child {
+     background: transparent;
+     margin-bottom: 0 !important;
+}
+}
+
+/* debug panel */
+
+#dhtdebugPanel {
+     background: linear-gradient(to bottom, #efefef, #cfc7c2);
+     border: 1px solid #212;
+     border-top: none;
+     border-radius: 0 0 2px 2px;
+     box-shadow: 0 0 0 1px #efe6e0 inset, 0 0 1px 0 #4f3d36;
+     text-align: center;
+     padding-bottom: 13px;
+}
+
+#dhtDebugInner {
+     text-align: left;
+     margin: -24px 0 -13px;
+     padding: 0 8px 1px;
+     background: #efefef;
+     border-radius: 0 0 2px 2px;
+}
+
+.dhtDebug th b:first-of-type, .dhtDebug th b:first-of-type + br + hr.debug {
+     display: none;
+}
+
+/* toggle debug view */
+
+input#toggle_debug:not(checked) + label {
+     padding-bottom: 2px;
+}
+
+input#toggle_debug:not(checked) + label > img {
+     margin-right: -2px !important;
+}
+
+input#toggle_debug:not(checked) + label + #dhtDebugInner {
+     display: block;
+}
+
+input#toggle_debug:checked + label + #dhtDebugInner {
+     display: none;
+}
+
+.iframed input#toggle_debug:not(checked) + label + #dhtDebugInner {
+     display: block;
+}
+
+.iframed input#toggle_debug:checked + label + #dhtDebugInner {
+     display: none;
+}
+
+/* end debug panel */
 /* end debug */
 
 .peerinfo td:first-child {
@@ -1838,6 +2032,10 @@ code, tt {
      font-weight: bold;
 }
 
+#totals tt {
+     line-height: 170%;
+}
+
 /* Resource Errors */
 
 .resourceError {
@@ -1948,6 +2146,7 @@ td#bwHelp a {
      display: inline-block;
      white-space: nowrap;
      font-style: normal;
+     margin-left: 4px;
 }
 
 /* end configs */
@@ -2045,6 +2244,26 @@ b.alwaysShow {
      padding-bottom: 3px; 
 }
 
+.percentBarOuter, .percentBarText, .snarkTorrentDownloaded {
+     width: 100px !important;
+}
+
+.snarkTorrentDownloaded .percentBarInner {
+     background: linear-gradient(to bottom, rgba(255, 247, 239, 0.75) 0%, rgba(255, 247, 239, 0.75) 50%, rgba(207, 193, 181, 0.8) 50%, rgba(207, 193, 181, 0.9) 100%), linear-gradient(to right, rgba(255, 100, 0, 0.5) 33px, rgba(255, 255, 0, 0.5) 66px, rgba(0, 255, 0, 0.5));
+}
+
+.snarkDirInfo .percentBarInner {
+     background: linear-gradient(to bottom, rgba(255, 247, 239, 0.75) 0%, rgba(255, 247, 239, 0.75) 50%, rgba(207, 193, 181, 0.8) 50%, rgba(207, 193, 181, 0.9) 100%), linear-gradient(to right, rgba(255, 100, 0, 0.5) 23px, rgba(255, 255, 0, 0.5) 47px, rgba(0, 255, 0, 0.5));
+}
+
+.snarkDirInfo .percentBarText, .snarkDirInfo .percentBarOuter, .peerinfo .percentBarOuter, .peerinfo .percentBarText {
+     width: 70px !important;
+}
+
+.snarkFileStatus {
+     width: 120px;
+}
+
 .snarkTorrents tt {
      background: none;
      color: #030;
@@ -2081,6 +2300,12 @@ b.alwaysShow {
      transition: ease width 0.5s 0.5s;
 }
 
+.snarkTorrentAction input[type="image"], .snarkTorrents th:last-child input[type="image"] {
+     max-height: 9px;
+     margin-top: 2px;
+     margin-bottom: 2px;
+}
+
 .snarkRefresh:nth-child(n+2) {
      padding: 4px 8px 4px 24px !important;
      background-size: 14px auto, 100% 100%, 100% 100% !important;
@@ -2113,6 +2338,23 @@ _:-ms-lang(x), .snarkRefresh:link, .snarkRefresh:visited {
 #pagenav img {
      height: 14px;
 }
+
+.snarkTorrentDownloaded .percentBarOuter {
+     margin-left: 0;
+}
+
+.snarkTorrents tfoot tr:first-child th {
+     padding-top: 2px;
+     padding-bottom: 2px;
+     line-height: 120%;
+}
+}
+
+@media screen and (max-width: 1400px) {
+#dhtDebugInner {
+     margin-top: -21px !important;
+     padding-top: 15px;
+}
 }
 
 @media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 1200px) {
@@ -2137,6 +2379,12 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, a.control, input
      padding-bottom: 3px !important;
 }
 
+.snarkTorrents tfoot tr:first-child th {
+     padding-top: 4px;
+     padding-bottom: 4px;
+     line-height: 150%;
+}
+
 .peerinfo tt {
      display: inline-block;
      margin: 0 3px;
@@ -2211,7 +2459,6 @@ select {
 
 .snarkTorrentDownloaded {
      white-space: nowrap;
-     padding: 0 8px;
 }
 
 thead a img, thead img {
@@ -2234,19 +2481,10 @@ thead a img, thead img {
      padding-bottom: 2px !important;
 }
 
-.snarkTorrentInfo td, .snarkDirInfo td {
-     padding-top: 5px !important;
-     padding-bottom: 5px !important;
-}
-
 .peerinfo tt {
      margin: 1px 4px;
 }
 
-.snarkTorrentName {
-     padding-left: 2px;
-}
-
 .snarkTorrentStatus b, .dirInfoComplete {
      margin-right: 4px;
 }