From 3d535a2282484ccb2250fd2660c568e7d7405b31 Mon Sep 17 00:00:00 2001
From: str4d <str4d@mail.i2p>
Date: Mon, 19 Jun 2017 13:00:50 +0000
Subject: [PATCH] I2PSnark:

- Disable JavaScript td:onclick (handled by css)
- Fix minimode bug in vanilla/ubergine
- Minimode for dark/classic
- ubergine:
  - Further optimizations to reduce lag/cpu load
  - New hidpi details.png to bypass mix-blend mode in .snarkTorrents
- Usability:
  - Tab navigation now works for toggle panels
  - Touch target for configure button now extends entire length
- All themes: cleanups and optimizations
---
 .../org/klomp/snark/web/I2PSnarkServlet.java  |  15 +-
 history.txt                                   |  11 +
 .../resources/themes/snark/classic/snark.css  | 363 ++++++---
 .../resources/themes/snark/dark/snark.css     | 287 +++++--
 .../resources/themes/snark/light/snark.css    |  76 +-
 .../resources/themes/snark/midnight/snark.css |  37 +-
 .../themes/snark/ubergine/images/details.png  | Bin 834 -> 2337 bytes
 .../resources/themes/snark/ubergine/snark.css | 754 +++++++++---------
 .../resources/themes/snark/vanilla/snark.css  | 222 +++---
 9 files changed, 1051 insertions(+), 714 deletions(-)

diff --git a/apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java b/apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java
index b199f0d55..423923df8 100644
--- a/apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java
+++ b/apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java
@@ -1694,13 +1694,14 @@ public class I2PSnarkServlet extends BasicServlet {
         }
 
         // Torrent name column
-        out.write("</td><td class=\"snarkTorrentName\"");
-        if (isMultiFile) {
+        out.write("</td><td class=\"snarkTorrentName\">");
+        // No need for javascript here.. css now handles this
+        //if (isMultiFile) {
             // link on the whole td
-            out.write(" onclick=\"document.location='" + encodedBaseName + "/';\">");
-        } else {
-            out.write('>');
-        }
+        //    out.write(" onclick=\"document.location='" + encodedBaseName + "/';\">");
+        //} else {
+        //    out.write('>');
+        //}
         if (remaining == 0 || isMultiFile) {
             StringBuilder buf = new StringBuilder(128);
             buf.append("<a href=\"").append(encodedBaseName);
@@ -2554,6 +2555,8 @@ public class I2PSnarkServlet extends BasicServlet {
             boolean isPrivate = privateTrackers.contains(t.announceURL);
             boolean isKnownOpen = _manager.util().isKnownOpenTracker(t.announceURL);
             boolean isOpen = isKnownOpen || openTrackers.contains(t.announceURL);
+            // TODO: either disable all checkboxes in this section, or disable all checkboxes that cannot be configured, leaving only user-configured tracker checkboxes active
+            // Currently checked but fixed checkboxes are not marked as disabled, preventing styling by disabled status
             buf.append("<tr class=\"knownTracker\"><td><input type=\"checkbox\" class=\"optbox\" id=\"").append(name).append("\" name=\"delete_")
                .append(name).append("\" title=\"").append(_t("Mark tracker for deletion")).append("\">" +
                        "</td><td><label for=\"").append(name).append("\">").append(name)
diff --git a/history.txt b/history.txt
index b11dbfc59..1ea066af4 100644
--- a/history.txt
+++ b/history.txt
@@ -2,6 +2,17 @@
  * Console: cleanup & formatting tidyups for welcome page readmes, remove
    unneeded classes
  * i2ptunnel: consistent tooltips and Destinations for editClient and editServer
+ * I2PSnark:
+   - Disable JavaScript td:onclick (handled by css)
+   - Fix minimode bug in vanilla/ubergine
+   - Minimode for dark/classic
+   - ubergine:
+     - Further optimizations to reduce lag/cpu load
+     - New hidpi details.png to bypass mix-blend mode in .snarkTorrents
+   - Usability:
+     - Tab navigation now works for toggle panels
+     - Touch target for configure button now extends entire length
+   - All themes: cleanups and optimizations
 
 2017-06-15 zzz
  * Data: Cache hostname lookups in RouterAddress (ticket #1998)
diff --git a/installer/resources/themes/snark/classic/snark.css b/installer/resources/themes/snark/classic/snark.css
index 0c5a90680..fa6a85247 100644
--- a/installer/resources/themes/snark/classic/snark.css
+++ b/installer/resources/themes/snark/classic/snark.css
@@ -47,14 +47,11 @@ body.iframed {
 }
 
 .page {
-     font-size: 9pt !important;
      line-height: 160% !important;
      min-width: 900px !important;
      margin: 5px 0 0 0;
      padding: 10px;
      text-align: center;
-     opacity: 1;
-     color: #0c153d;
      border: 1px solid #89f;
      background: #eef;
      box-shadow: inset 0 0 0 1px #ddf, 0 0 5px 1px #cfcfff inset;
@@ -304,8 +301,8 @@ body.iframed {
      text-align: center;
 }
 
-.snarkTorrents th:nth-child(2) {
-     text-align: left;
+.snarkTorrents thead th:nth-child(2) {
+     text-align: center !important;
 }
 
 .snarkTorrents th br {
@@ -347,7 +344,6 @@ body.iframed {
      width: 24px !important;
 }
 
-
 .snarkTorrentETA, .snarkTorrentUploaded, .snarkTorrentRateDown, .snarkTorrentRateUp {
      width: 5%;
      min-width: 40px;
@@ -358,31 +354,16 @@ body.iframed {
      width: 0 !important;
 }
 
-pre {
-     font: 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
-     font-weight: bold !important;
-     width: 100%;
-     height: 8px;
-     padding: 0;
-     text-align: left !important;
-     color: #35f;
-}
-
 table {
      width: 100%;
      margin: 0 0 10px 0;
      padding: 0;
      border-spacing: 0;
      border-collapse: collapse;
-     opacity: 1 !important;
      color: #323;
      border: 0;
 }
 
-tr {
-     opacity: 1;
-}
-
 thead, tfoot {
      background: #fff;
 }
@@ -395,10 +376,6 @@ tfoot tr:first-child th {
      vertical-align: middle !important;
 }
 
-tfoot tr:nth-child(n+1) {
-     text-align: left;
-}
-
 th {
      font-size: 9pt;
      padding: 3px 2px;
@@ -431,21 +408,6 @@ tfoot th {
      padding-bottom: 4px !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;
-}
-
-/*
-tfoot tr:nth-child(n+1) {
-     text-align: left;
-}
-*/
-
 .snarkTorrents tfoot tr:first-child {
      line-height: 130%;
 }
@@ -490,7 +452,6 @@ tfoot tr:nth-child(n+1) {
 
 .snarkTorrents th br {
      display: none;
-     /* kill double height button display */
 }
 
 .snarkTorrents th:nth-child(4),
@@ -543,11 +504,11 @@ tfoot tr:nth-child(n+1) {
      text-align: left;
 }
 
-.snarkTorrents td:nth-child(1) {
-     width: 24px !important;
+.snarkGraphicStatus {
+     width: 1% !important;
 }
 
-.snarkTorrents td:nth-child(3) {
+td.snarkTrackerDetails {
      text-align: right !important;
 }
 
@@ -811,14 +772,9 @@ th.headerdownloaded {
 td {
      font-size: 9pt;
      padding: 2px;
-     opacity: 1;
      color: #333 !important;
 }
 
-.mainsection td {
-     color: #111;
-}
-
 td:first-child {
      font-size: 9pt;
      text-align: right;
@@ -847,12 +803,7 @@ td:first-child {
      text-align: center !important;
 }
 
-.snarkTorrentAction img {
-     opacity: 1;
-}
-
 .snarkTorrentAction img:hover {
-     opacity: 1;
      box-shadow: 0 0 1px 1px #f90;
 }
 
@@ -890,10 +841,6 @@ td:first-child {
      background: #fff;
 }
 
-.snarkTorrentstatus {
-     min-width: 0;
-}
-
 .snarkTorrentStatus {
      text-align: left !important;
      white-space: nowrap;
@@ -1100,9 +1047,6 @@ tr:hover .percentBarText {
      transition: ease opacity 0.2s;
 }
 
-.priorityIndicator {
-}
-
 /* end download bars */
 
 .choked, .choked a:hover {
@@ -1121,7 +1065,7 @@ tr:hover .percentBarText {
      max-width: 96px;
      max-height: 64px;
      transition: ease all 0.3s;
-     margin: 0 0 0 -4px !important;
+     margin: -6px 0 -6px -4px !important;
      filter: none !important;
 }
 
@@ -1139,8 +1083,13 @@ tr:hover .percentBarText {
      padding-left: 30px;
 }
 
-.snarkConfigTitle:hover, label.toggleview:hover {
+.snarkConfigTitle:hover, label.toggleview:hover, input.toggle_input:focus + .toggleview {
      background: linear-gradient(to bottom, #fff 0%, #ddd 100%) !important;
+     color: #f60 !important;
+}
+
+input.toggle_input:focus + .toggleview img {
+     filter: drop-shadow(0 0 1px #f60);
 }
 
 .snarkConfigTitle:active, label.toggleview:active {
@@ -1152,10 +1101,10 @@ tr:hover .percentBarText {
      font-weight: bold;
      font-variant: small-caps !important;
      display: inline-block;
-     min-width: 200px;
+     min-width: 260px;
      margin: 0 0 -4px !important;
      vertical-align: middle;
-     padding: 4px 25px;
+     padding: 4px 1px;
      letter-spacing: .08em;
      border: 1px solid #89f;
      border-top: none;
@@ -1180,8 +1129,8 @@ _:-ms-lang(x), .snarkConfigTitle, label.toggleview, .configsectionpanel .snarkCo
      font-size: 11pt !important;
 }
 
-.configsectionpanel .snarkConfigTitle {
-     color: #444;
+.configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
+     color: #444 !important;
 }
 
 .snarkConfigTitle img, label.toggleview img {
@@ -1230,9 +1179,8 @@ hr {
      height: 1px;
      margin: 5px 0 7px 0;
      text-align: center;
-     color: #444;
-     border: 0 solid #444;
-     background: #444;
+     color: transparent;
+     background: transparent;
 }
 
 a:link {
@@ -1613,9 +1561,8 @@ img:hover {
 }
 
 #pagenav a:active img {
-     background: linear-gradient(to bottom, #99f 0%, #99f 50%, #66f 51%);
      background: linear-gradient(to bottom, #ddf 0%, #ddf 50%, #99f 51%);
-     box-shadow: inset 2px 2px 3px 1px #333;
+     box-shadow: inset 2px 2px 2px 1px #99f;
 }
 
 #pagenav img.disable, #pagenav img.disable:hover {
@@ -1628,20 +1575,20 @@ img:hover {
      font-weight: bold !important;
 }
 
-div.newtorrentsection td:first-child,
-div.addtorrentsection td:first-child {
+.newtorrentsection td:first-child,
+.addtorrentsection td:first-child {
      font-weight: bold;
      padding-right: 5px;
      padding-left: 5px;
      white-space: nowrap;
 }
 
-div.newtorrentsection td:first-child,
-div.addtorrentsection td:first-child {
+.newtorrentsection td:first-child,
+.addtorrentsection td:first-child {
      width: 120px;
 }
 
-table#trackerselect {
+#trackerselect {
      width: 100% !important;
      width: calc(100% - 150px) !important;
      margin: 2px 5px 0 5px;
@@ -1693,7 +1640,7 @@ table#trackerselect {
      margin: 3px !important;
 }
 
-div.configsectionpanel td:first-child {
+.configsectionpanel td:first-child {
      font-weight: bold;
      padding-right: 10px !important;
      padding-left: 5px !important;
@@ -1918,16 +1865,16 @@ div.configsectionpanel td:first-child {
      color: #0c153d !important;
 }
 
-div.configsection table {
+.configsection table {
      opacity: 1;
      color: #ffb;
 }
 
-div.configsection a {
+.configsection a {
      font-weight: bold;
 }
 
-div.configsection a:hover {
+.configsection a:hover {
      text-decoration: none;
      color: #f60;
 }
@@ -1966,7 +1913,9 @@ input.trackerannounce {
 /* toggle create/add panel view */
 
 input.toggle_input { /* hide checkbox and use label as faux panel heading */
-     display: none;
+      position: absolute;
+      opacity: 0;
+      z-index: -1;
 }
 
 label.toggleview:hover {
@@ -2045,6 +1994,7 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac
      background-blend-mode: luminosity;
 }
 
+/*
 .debugConnection {
      color: #030;
      font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
@@ -2073,14 +2023,6 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac
      font-weight: bold;
 }
 
-.debuginfo td {
-     line-height: 120% !important;
-}
-
-.debuginfo b {
-     text-transform: capitalize;
-}
-
 .from, .to {
      font-family: sans-serif;
      font-size: 12pt;
@@ -2089,6 +2031,15 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac
      line-height: 50%;
      text-shadow: 0 0 1px #fff;
 }
+*/
+
+.debuginfo td {
+     line-height: 120% !important;
+}
+
+.debuginfo b {
+     text-transform: capitalize;
+}
 
 /* debug panel */
 
@@ -2156,6 +2107,8 @@ hr.debug {
      width: 100%;
      background: #89f;
      background: linear-gradient(to right, #89f 40%, #eef);
+     color: #efefff;
+     border: none;
 }
 
 hr.debug + hr {
@@ -2169,7 +2122,7 @@ hr.debug:nth-child(n+7) {
 hr.debug:last-child {
      height: 0;
      margin-bottom: -5px;
-     margin-top: -15px;
+     margin-top: -10px;
 }
 
 /* end debug */
@@ -2420,10 +2373,6 @@ td#bwHelp a {
      padding-right: 2px;
 }
 
-.snarkCommentInfo td:last-child, .snarkComments td:last-child {
-/*     width: 1% !important;*/
-}
-
 .snarkComments td {
      white-space: nowrap;
 }
@@ -2433,6 +2382,10 @@ td#bwHelp a {
      padding-left: 20px;
 }
 
+.commentAuthorName:empty {
+     display: none;
+}
+
 .commentWrapper {
      border: 1px solid #bbf;
      margin: 2px 0;
@@ -2625,7 +2578,7 @@ body {
 }
 
 #dhtDebugInner {
-     margin-top: -24px !important;
+     margin-top: -25px !important;
 }
 }
 
@@ -2672,6 +2625,10 @@ body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_
 .percentDownloaded {
      pointer-events: none; /* hide tooltip */
 }
+
+.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
+     min-width: 300px;
+}
 }
 
 @media screen and (min-width: 1400px) {
@@ -2692,10 +2649,6 @@ td.snarkTorrentDownloaded {
      white-space: nowrap;
 }
 
-.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
-     min-width: 240px;
-}
-
 .snarkTorrentStatus b {
      margin-right: 3px;
 }
@@ -2703,6 +2656,216 @@ td.snarkTorrentDownloaded {
 #configs td:first-child {
      min-width: 220px !important;
 }
+
+#dhtDebugInner {
+     margin-top: -26px !important;
 }
+}
+
+/* mini-mode */
+
+@media screen and (max-width: 800px) {
+.page {
+     min-width: 680px !important;
+}
+
+.snarknavbar {
+     min-width: 688px !important;
+}
+
+th.snarkTorrentStatus a img, .snarkTorrentETA a img, .snarkTrackerDetails a img, img[src$="torrent.png"] {
+     display: none !important;
+}
+
+.snarkGraphicStatus {
+     max-width: 12px !important;
+     padding-left: 3px !important;
+}
+
+.snarkGraphicStatus img {
+     max-width: 18px;
+}
+
+.snarkTorrentName a:not(old) {
+     max-width: 360px !important;
+}
+
+.snarkTorrents th img {
+     max-height: 18px;
+}
+
+.snarkTorrentUploaded, .snarkTorrentRateUp, .peerinfo, .debuginfo, .alwaysShow {
+     display: none;
+}
+
+.percentBarText {
+     font-size: 8pt !important;
+}
+
+.snarkTorrentDetails {
+     padding-left: 8px;
+}
+
+.snarkTorrentStatus, .snarkTorrentETA, .snarkTrackerDetails {
+     font-size: 0 !important;
+     max-width: 0 !important;
+     min-width: 0 !important;
+     width: 0 !important;
+     padding: 0;
+     overflow: hidden;
+     color: transparent !important;
+}
+
+.snarkTorrentDetails {
+     padding-left: 10px !important;
+     padding-right: 5px !important;
+}
+
+#totals {
+     margin-left: 2px !important;
+}
+
+.addtorrentsection td:first-child, .newtorrentsection td:first-child {
+     width: 20%;
+}
+
+.toggleview, .snarkConfigTitle {
+     padding-top: 3px !important;
+     padding-bottom: 3px !important;
+}
+
+.snarkConfigTitle {
+     margin-bottom: -3px !important;
+}
+
+.toggleview, .snarkConfigTitle, .snarkConfigTitle a {
+     font-size: 10pt !important;
+}
+
+.toggleview img, .snarkConfigTitle img {
+     height: 12px;
+     margin-right: 0 !important;
+}
+
+#configs td:first-child, .configsectionpanel input[name="nofilter_dataDir"], .configsectionpanel textarea {
+     min-width: 150px !important;
+     max-width: 50%;
+}
+
+.trackerconfig a, .trackerconfig input[type="text"] {
+     max-width: 150px !important;
+}
+
+.trackerconfig, form + form > .configsectionpanel, .addtorrentsection tr:last-child, .snarkTorrentInfo tr:nth-child(n+2) {
+     display: none;
+}
+
+#trackerselect td a {
+     max-width: 200px !important;
+}
+
+.snarkTorrentInfo {
+     border-bottom: none !important;
+     margin-bottom: -5px !important;
+     position: relative;
+     z-index: 10;
+}
+
+.snarkTorrentInfo th {
+     padding-top: 4px;
+     padding-bottom: 4px;
+}
+
+.snarkTorrentInfo th:nth-child(2) {
+     padding-left: 5px;
+     border-bottom: 1px solid #89f !important;
+}
+
+.snarkDirInfo td.snarkFileStatus {
+     font-size: 0 !important;
+     text-align: center !important;
+}
+
+.snarkDirInfo td.snarkFileStatus .percentbarText {
+     font-size: 7pt !important;
+}
+
+.snarkDirInfo .snarkFileStatus img {
+     float: none;
+}
+
+.snarkFileStatus img[src*="clock"] {
+     float: left;
+}
+
+th a img {
+     max-height: 16px !important;
+}
+
+.snarkTorrentAction input[type="image"] {
+     max-height: 8px !important;
+     padding: 3px !important;
+}
+
+#configs {
+     margin-top: 8px !important;
+     border-top: 1px solid #89f !important;
+}
+
+#configs td:last-child {
+     white-space: nowrap !important;
+}
+
+#configs #bwhelp, #configs #bwhelp a {
+     background: none !important;
+     font-size: 0 !important;
+     width: 0 !important;
+     overflow: hidden;
+}
+
+#configs tr:nth-child(n+16) {
+     display: none;
+}
+
+#configs tr:nth-last-child(2) {
+     display: table-row !important;
+}
+
+#configs tr {
+     border: none !important;
+}
+
+.addtorrentsection input[type="text"], .newtorrentsection input[type="text"] {
+     width: 65% !important;
+}
+
+.snarkCommentInfo td:first-child, .snarkComments td:first-child {
+     width: 120px !important;
+     max-width: 120px !important;
+     min-width: 120px !important;
+}
+
+.snarkComments .commentDate {
+     width: 70px;
+}
+
+.snarkComments .commentDelete {
+     background: none !important;
+     padding-left: 0 !important;
+}
+
+#dhtDebugInner {
+     margin-top: -19px !important;
+}
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 800px) {
+.snarkConfigTitle {
+     margin-top: 0 !important;
+}
+}
+
+/* end mini-mode */
+
 /* end responsive layout */
 
diff --git a/installer/resources/themes/snark/dark/snark.css b/installer/resources/themes/snark/dark/snark.css
index 5537ce98c..54e6e2f5d 100644
--- a/installer/resources/themes/snark/dark/snark.css
+++ b/installer/resources/themes/snark/dark/snark.css
@@ -1,18 +1,22 @@
 /* I2PSnark theme "Camo" aka Dark */
 /* Author: dr|z3d */
 
+html {
+     height: 100%;
+}
+
 body {
      margin: 9px 8px;
      color: #ee9;
      font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
-     background: #000;
-     background: linear-gradient(45deg, rgba(0,0,0,0.5), rgba(0,34,0,0.7)), url(/themes/console/dark/images/camotile2.png) top left;
-     background-size: 3px 3px, 175px 175px;
+     background: url(/themes/console/dark/images/camotile2.png) top left;
+     background-size: 175px 175px;
 }
 
 /* preload top navigation mouseovers */
+
 body {
-     background: linear-gradient(45deg, rgba(0,0,0,0.5), rgba(0,34,0,0.7)),
+     background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.7)),
      url(/themes/console/dark/images/camotile2.png) top left,
      url(images/button_snark_hover.png) no-repeat,
      url(images/button_snark_active.png) no-repeat,
@@ -20,7 +24,7 @@ body {
      url(images/button_tracker_active.png) no-repeat,
      url(images/button_forum_hover.png) no-repeat,
      url(images/button_forum_active.png) no-repeat !important;
-     background-size: 3px 3px, 175px 175px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important;
+     background-size: 100% 100%, 175px 175px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important;
 }
 
 body.iframed {
@@ -29,6 +33,7 @@ body.iframed {
 }
 
 /* preload top navigation mouseovers */
+
 body.iframed {
      background: url(/themes/console/images/transparent.gif),
      url(images/button_snark_hover.png) no-repeat,
@@ -49,7 +54,7 @@ body.iframed {
      text-align: center;
      opacity: 1;
      background: #000;
-     background: repeating-linear-gradient(135deg, #010 0px, #010 10px, #020 10px, #020 20px, #010 20px) !important;
+     background: repeating-linear-gradient(135deg, #010, #010 10px, #020 10px, #020 20px, #010 20px);
      box-shadow: inset 0 0 0 1px #000 !important;
 }
 
@@ -60,7 +65,7 @@ body.iframed {
      margin: 5px 0;
      box-shadow: none;
      background: url(/themes/console/dark/images/camotile2.png) repeat scroll left top #000;
-     background: linear-gradient(to right, #000 0%, #020 50%, #000 100%);
+     background: linear-gradient(to right, #000, #020 50%, #000) !important;
 }
 
 .toggleview, .snarkConfigTitle, .snarknavbar, img, input[type="image"] {
@@ -91,7 +96,7 @@ body.iframed {
      margin: 0 0 -6px !important;
      padding: 9px 0 8px;
      background: #010 !important;
-     background-image: linear-gradient(to bottom, #001000 0%, #001900 51%, #000 51%, #000 100%) !important;
+     background-image: linear-gradient(to bottom, #001000, #001900 51%, #000 51%) !important;
      min-width: 888px;
      text-align: center;
      border: 1px solid #494;
@@ -361,15 +366,6 @@ tfoot th {
      white-space: normal;
 }
 
-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;
-}
-
-tfoot tr:nth-child(n+1) {
-     text-align: left;
-}
-
 .headerstatus {
      text-align: center;
 }
@@ -420,7 +416,7 @@ tfoot tr:nth-child(n+1) {
      white-space: nowrap;
 }
 
-.snarkTorrents th:nth-child(4), .SnarkTorrents th:nth-child(5), .SnarkTorrents th:nth-child(6), .SnarkTorrents th:nth-child(7), .SnarkTorrents th:nth-child(8), .SnarkTorrents th:nth-child(9), .SnarkTorrents th:last-child {
+#pagenav, th.snarkTorrentETA, th.snarkTorrentDownloaded, th.snarkTorrentUploaded, th.snarkTorrentRateDown, th.snarkTorrentRateUp, th.SnarkTorrentAction {
      text-align: center;
 }
 
@@ -1079,10 +1075,10 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven {
      line-height: 140%;
 }
 
-.snarkConfigTitle, label.toggleview {
+.snarkConfigTitle, .toggleview {
      font-size: 11pt;
      font-weight: bold;
-     padding: 3px 22px 3px 20px;
+     padding: 3px 1px 3px 1px;
      margin: 5px 0 10px 0 !important;
      letter-spacing: 0.2em;
      border: 1px solid #494;
@@ -1094,12 +1090,12 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven {
      filter: drop-shadow(0 2px 1px #000);
      display: inline-block;
      margin: 0 0 -3px !important;
-     min-width: 220px;
+     min-width: 260px;
      box-shadow: inset 0 0 0 1px #000;
 }
 
 @media screen and (-webkit-min-device-pixel-ratio:0) {
-.snarkConfigTitle, label.toggleview {
+.snarkConfigTitle, .toggleview {
      font-size: 13pt !important;
 }
 }
@@ -1108,7 +1104,7 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven {
      margin-bottom: -2px !important;
 }
 
-.snarkConfigTitle a, label.toggleview {
+.snarkConfigTitle a, .toggleview {
      text-shadow: 0 0 1px #000 !important;
 }
 
@@ -1117,7 +1113,7 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven {
      width: 100%;
 }
 
-.snarkConfigTitle:hover, .toggleview:hover {
+.snarkConfigTitle:hover, .toggleview:hover, input.toggle_input:focus + .toggleview {
      background: #000 !important;
      background: linear-gradient(to bottom, #001000 50%, #000 50%) !important;
 }
@@ -1136,15 +1132,15 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven {
      vertical-align: middle;
 }
 
-label.toggleview:active, .snarkConfigTitle a:active {
+.toggleview:active, .snarkConfigTitle a:active {
      color: #f30 !important;
 }
 
-label.toggleview img:hover, label.toggleview:hover img, .snarkConfigTitle a:hover img {
+.toggleview img:hover, .toggleview:hover img, .snarkConfigTitle a:hover img {
      filter: drop-shadow(0 0 1px #f60);
 }
 
-label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:active img {
+.toggleview img:active, .toggleview:active img, .snarkConfigTitle a:active img {
      transform: rotate(90deg);
      transition: ease transform 0.3s 0s;
 }
@@ -1315,7 +1311,7 @@ thead a:active img {
      transform: scale(0.9);
 }
 
-.snarkTorrents thead th:last-child, .snarkTorrents td:last-child {
+.snarkTorrentAction {
      white-space: nowrap;
 }
 
@@ -1323,7 +1319,7 @@ thead a:active img {
      white-space: normal;
 }
 
-.snarkTorrents th:last-child input[type="image"], .snarkTorrents td:last-child input[type="image"] {
+.snarkTorrentAction input[type="image"] {
      border: 1px solid #000 !important;
      border: 1px solid #151 !important;
      margin: 0 2px !important;
@@ -1336,12 +1332,11 @@ thead a:active img {
      filter: drop-shadow(0 0 1px #000);
 }
 
-.snarkTorrents th:last-child input[type="image"]:hover, .snarkTorrents td:last-child input[type="image"]:hover,
-.snarkTorrents th:last-child input[type="image"]:focus, .snarkTorrents td:last-child input[type="image"]:focus { /* borders on hover only for torrent control buttons, otherwise drop-shadow */
+.snarkTorrentAction input[type="image"]:hover, .snarkTorrentAction input[type="image"]:focus {
      border: 1px solid #f60 !important;
 }
 
-.snarkTorrents th:last-child input[type="image"]:active, .snarkTorrents td:last-child input[type="image"]:active {
+.snarkTorrentAction input[type="image"]:active {
      box-shadow: inset 3px 3px 3px #000;
      background-blend-mode: luminosity;
      transform: scale(0.9);
@@ -1613,7 +1608,7 @@ img[src$="magnet.png"] {
      width: 120px;
 }
 
-table#trackerselect {
+#trackerselect {
      border: 1px solid #131;
      width: 100% !important;
      width: calc(100% - 170px) !important;
@@ -1948,10 +1943,14 @@ input.trackerannounce {
 /* toggle create/add panel view */
 
 input.toggle_input { /* hide checkbox and use label as faux panel heading */
-     display: none !important;
+      position: absolute;
+      opacity: 0;
+      z-index: -1;
+      height: 0 !important;
+      width: 0 !important;
 }
 
-label.toggleview:hover {
+.toggleview:hover, input.toggle_input:focus + .toggleview {
      color: #f60;
      cursor: pointer;
 }
@@ -1987,7 +1986,7 @@ input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent
      display: none;
 }
 
-label.toggleview, .snarkConfigTitle a:visited {
+.toggleview, .snarkConfigTitle a:visited {
      color: #7c7;
 }
 
@@ -2026,6 +2025,7 @@ label.toggleview, .snarkConfigTitle a:visited {
      margin-left: 1px;
 }
 
+/*
 .debugConnection {
      font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
      color: #ee0;
@@ -2057,6 +2057,7 @@ label.toggleview, .snarkConfigTitle a:visited {
      font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
      color: #cc7;
 }
+*/
 
 .dhtdebug th {
      word-break: break-all;
@@ -2228,16 +2229,19 @@ td#bwHelp {
      margin-right: 3px;
 }
 
-.knownTracker input[type="radio"], .knownTracker input[type="radio"]:hover, .knownTracker input[type="radio"]:focus {
+.knownTracker input[type="radio"], .knownTracker input[type="radio"][disabled], .knownTracker input[type="radio"]:hover, .knownTracker input[type="radio"]:focus {
      opacity: 0.3;
      cursor: default;
-     filter: invert(100%) sepia(100%) hue-rotate(70deg) saturate(200%) !important;
 }
 
 .knownTracker input[type="radio"]:checked, .knownTracker input[type="radio"]:checked:hover {
      opacity: 0.5;
 }
 
+.knownTracker input[type="radio"][disabled], .knownTracker input[type="radio"][disabled]:hover {
+     opacity: 0.1 !important;
+}
+
 .snarkDirInfo tr:first-child th img:first-child {
      margin-right: 5px;
 }
@@ -2357,7 +2361,7 @@ input[type="checkbox"]:checked::before {
      content: "\2714";
      border-radius: 1px;
      font-size: 14pt;
-     color: #69EF68;
+     color: #69ef68;
      line-height: 80%;
      font-family: sans-serif;
      overflow: hidden;
@@ -2406,6 +2410,12 @@ input[type="checkbox"][disabled]:checked, input[type="radio"][disabled]:checked,
 .priority input[type="radio"] {
      transform: scale(0.8);
 }
+
+input.toggle_input, input.toggle_input:checked { /* hide checkbox and use label as faux panel heading */
+      position: absolute;
+      height: 0 !important;
+      width: 0 !important;
+}
 }
 
 /* end custom radios/checkboxes */
@@ -2667,7 +2677,7 @@ b.alwaysShow {
 }
 
 @media screen and (max-width: 1200px) {
-.snarkConfigtitle, .snarkConfigTitle a, label.toggleview {
+.snarkConfigtitle, .snarkConfigTitle a, .toggleview {
      font-size: 11pt !important;
 }
 
@@ -2755,7 +2765,7 @@ body, .snarkTorrents td, .snarkAddInfo, th, td,  code, textarea, input, input[ty
      padding-left: 25px !important;
 }
 
-.snarkConfigtitle, .snarkConfigTitle a, label.toggleview {
+.snarkConfigtitle, .snarkConfigTitle a, .toggleview {
      font-size: 12pt !important;
 }
 
@@ -2794,16 +2804,16 @@ body, .snarkTorrents td, .snarkAddInfo, th, td,  code, textarea, input, input[ty
      font-size: 10pt !important;
 }
 
-.snarkConfigTitle, .snarkConfigTitle a, label.toggleview {
+.snarkConfigTitle, .snarkConfigTitle a, .toggleview {
      font-size: 12pt !important;
 }
 
-.snarkConfigTitle, label.toggleview {
-     min-width: 240px !important;
+.snarkConfigTitle, .toggleview {
+     min-width: 300px !important;
      padding-top: 4px;
 }
 
-label.toggleview {
+.toggleview {
      padding-bottom: 5px;
 }
 
@@ -2825,8 +2835,8 @@ textarea[name="i2cpOpts"] {
      height: 11px;
 }
 
-.snarkTorrents td:nth-child(3), .SnarkTorrents td:nth-child(4) {
-     width: 18px !important;
+.snarkTrackerDetails, .SnarkTorrentDetails {
+     width: 1% !important;
 }
 
 .snarkTorrents .snarkTorrentName {
@@ -2840,8 +2850,6 @@ textarea[name="i2cpOpts"] {
 .page {
      padding: 10px;
      border: 1px solid #494;
-     background: #001900;
-     background: linear-gradient(to bottom, #001900, #010);
      box-shadow: inset 0 0 0 1px #000, inset 0 0 7px 3px #002900;
 }
 
@@ -2881,5 +2889,186 @@ textarea[name="i2cpOpts"] {
 }
 }
 
+/* mini-mode */
+
+@media screen and (max-width: 800px) {
+.page {
+     min-width: 650px !important;
+}
+
+.snarknavbar {
+     min-width: 648px !important;
+}
+
+th.snarkTorrentStatus a img, .snarkTorrentETA a img, .snarkTrackerDetails a img, img[src$="torrent.png"] {
+     display: none !important;
+}
+
+.snarkGraphicStatus {
+     max-width: 12px !important;
+     padding-left: 3px !important;
+}
+
+.snarkGraphicStatus img {
+     max-width: 18px;
+}
+
+.snarkTorrentName a:not(old) {
+     max-width: 360px !important;
+}
+
+.snarkTorrents th img {
+     max-height: 18px;
+}
+
+.snarkTorrentUploaded, .snarkTorrentRateUp, .peerinfo, .debuginfo, .alwaysShow {
+     display: none !important;
+}
+
+.percentBarText {
+     font-size: 8pt !important;
+}
+
+.snarkTorrentDetails {
+     padding-left: 8px;
+}
+
+.snarkTorrents td.snarkTorrentStatus, .snarkTorrentETA, .snarkTrackerDetails {
+     font-size: 0 !important;
+     max-width: 0 !important;
+     min-width: 0 !important;
+     width: 0 !important;
+     padding: 0;
+     overflow: hidden;
+     color: transparent !important;
+}
+
+.snarkTorrentDetails {
+     padding-left: 3px !important;
+}
+
+#totals {
+     margin-left: 2px !important;
+}
+
+.addtorrentsection td:first-child, .newtorrentsection td:first-child {
+     width: 20%;
+}
+
+.toggleview, .snarkConfigTitle, .snarkConfigTitle a {
+     font-size: 10pt !important;
+}
+
+.toggleview img, .snarkConfigTitle img {
+     height: 12px;
+     margin-right: 0 !important;
+}
+
+#configs td:first-child, .configsectionpanel input[name="nofilter_dataDir"], .configsectionpanel textarea {
+     min-width: 150px !important;
+}
+
+.trackerconfig a, .trackerconfig input[type="text"] {
+     max-width: 150px !important;
+}
+
+.trackerconfig, form + form > .configsectionpanel, .addtorrentsection tr:last-child, .snarkTorrentInfo tr:nth-child(n+2) {
+     display: none;
+}
+
+#trackerselect td a {
+     max-width: 200px !important;
+}
+
+.snarkTorrentInfo {
+     border-bottom: none !important;
+     margin-bottom: -11px !important;
+     position: relative;
+     z-index: 10;
+}
+
+.snarkTorrentInfo th {
+     padding-top: 4px;
+     padding-bottom: 4px;
+}
+
+.snarkTorrentInfo th:nth-child(2) {
+     padding-left: 5px;
+     border-bottom: 1px solid #494 !important;
+}
+
+.snarkDirInfo td.snarkFileStatus {
+     font-size: 0 !important;
+     text-align: center !important;
+}
+
+.snarkDirInfo td.snarkFileStatus .percentbarText {
+     font-size: 7pt !important;
+}
+
+.snarkDirInfo .snarkFileStatus img {
+     float: none;
+}
+
+.snarkFileStatus img[src*="clock"] {
+     float: left;
+}
+
+th a img {
+     max-height: 16px !important;
+}
+
+.snarkTorrentAction input[type="image"] {
+     max-height: 8px !important;
+     padding: 3px !important;
+}
+
+#configs {
+     margin-top: 8px !important;
+}
+
+#configs #bwhelp {
+     background: none !important;
+     font-size: 0 !important;
+}
+
+#configs tr:nth-child(n+16) {
+     display: none;
+}
+
+#configs tr:nth-last-child(2) {
+     display: table-row !important;
+}
+
+#configs tr {
+     border: none !important;
+}
+
+.addtorrentsection input[type="text"], .newtorrentsection input[type="text"] {
+     width: 65% !important;
+}
+
+.snarkCommentInfo td:first-child, .snarkComments td:first-child {
+     width: 120px !important;
+     max-width: 120px !important;
+     min-width: 120px !important;
+}
+
+.snarkComments .commentDate {
+     width: 70px;
+}
+
+.snarkComments .commentDelete {
+     background: none !important;
+     padding-left: 0 !important;
+}
+
+#dhtDebugInner {
+     margin-top: -20px !important;
+}
+}
+
+/* end mini-mode */
+
 /* end responsive layout */
 
diff --git a/installer/resources/themes/snark/light/snark.css b/installer/resources/themes/snark/light/snark.css
index fb2e030f0..d09901e8a 100644
--- a/installer/resources/themes/snark/light/snark.css
+++ b/installer/resources/themes/snark/light/snark.css
@@ -20,6 +20,7 @@ body {
      url(images/button_tracker_active.png) no-repeat,
      url(images/button_forum_hover.png) no-repeat,
      url(images/button_forum_active.png) no-repeat, #a4a4cb;
+     background-size: 32px 32px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
 }
 
 body.iframed {
@@ -47,7 +48,8 @@ body.iframed {
      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 {
+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;
 }
 
@@ -344,15 +346,6 @@ tfoot th {
      padding-bottom: 4px !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;
-}
-
-tfoot tr:nth-child(n+1) {
-     text-align: left;
-}
-
 #pagenav {
      font-size: 8.5pt;
      color: #272e3f;
@@ -376,9 +369,9 @@ tfoot tr:nth-child(n+1) {
 }
 
 #pagenav a:active img {
-     background: #f60;
      box-shadow: inset 3px 3px 3px #333;
      box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px #333;
+     filter: none;
 }
 
 #pagenav img.disable, #pagenav img.disable:hover, #pagenav a:active img.disable {
@@ -825,19 +818,21 @@ tr:hover .percentBarText {
      min-height: 16px;
 }
 
-.snarkConfigTitle:hover, .toggleview:hover {
+.snarkConfigTitle:hover, .toggleview:hover, input.toggle_input:focus + .toggleview {
      background: linear-gradient(to bottom, #fcfaf7 50%, #ffe8bf 50%, #efd9b3 100%);
 }
 
 .snarkConfigTitle a {
      font-size: 11pt !important;
+     display: inline-block;
+     width: 100%;
 }
 
 .snarkConfigTitle:hover a, .snarkConfigTitle:focus a {
      color: #f60 !important;
 }
 
-.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle:hover {
+.snarkConfigTitle, .toggleview, .configsectionpanel .snarkConfigTitle:hover {
      font-size: 11pt;
      font-weight: bold;
      padding: 3px 15px;
@@ -850,7 +845,7 @@ tr:hover .percentBarText {
      font-variant: small-caps !important;
      box-shadow: 0 1px 2px #ddd;
      display: inline-block;
-     min-width: 220px;
+     min-width: 260px;
      color: #559 !important;
 }
 
@@ -859,7 +854,7 @@ tr:hover .percentBarText {
 }
 
 @media screen and (-webkit-min-device-pixel-ratio:0) {
-.snarkConfigTitle, .snarkConfigTitle a, label.toggleview,
+.snarkConfigTitle, .snarkConfigTitle a, .toggleview,
 .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
      font-size: 14pt !important;
      padding: 3px 15px 4px;
@@ -870,7 +865,7 @@ tr:hover .percentBarText {
      color: #559;
 }
 
-.snarkConfigTitle a:hover, .toggleview:hover {
+.snarkConfigTitle a:hover, .snarkConfigTitle a:focus, .toggleview:hover, input.toggle_input:focus + .toggleview {
      color: #f60 !important;
      cursor: pointer;
 }
@@ -885,8 +880,8 @@ tr:hover .percentBarText {
      vertical-align: middle;
 }
 
-.snarkConfigTitle:hover img, .toggleview:hover img {
-     filter: drop-shadow(0 0 1px #f60);
+.snarkConfigTitle:hover img, .toggleview:hover img, input.toggle_input:focus + .toggleview img, .snarkConfigTitle a:focus img {
+     filter: drop-shadow(0 0 1px #f60) !important;
 }
 
 .snarkConfigTitle:active a img, .toggleview:active img {
@@ -1488,7 +1483,11 @@ input.trackerannounce {
 /* toggle create/add panel view */
 
 input.toggle_input { /* hide checkbox and use label as faux panel heading */
-     display: none;
+      position: absolute;
+      opacity: 0;
+      z-index: -1;
+      height: 0 !important;
+      width: 0 !important;
 }
 
 input#toggle_addtorrent:not(checked) + label + hr + table, input#toggle_createtorrent:not(checked) + label + hr + table {
@@ -1604,7 +1603,7 @@ input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent
      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;
+     margin: -19px 0 -12px;
 }
 
 .dhtDebug th b:first-of-type, .dhtDebug th b:first-of-type + br + hr.debug {
@@ -1644,6 +1643,12 @@ hr.debug {
      border-bottom: 1px solid #fff;
 }
 
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+hr.debug {
+     height: 1px;
+}
+}
+
 hr.debug:first-of-type {
      background: transparent;
      margin-top: -5px;
@@ -1658,7 +1663,9 @@ hr.debug:nth-child(n+7) {
 
 hr.debug:last-child {
      background: transparent;
-     margin-bottom: -4px;
+     border: none;
+     height: 0;
+     margin-bottom: -8px;
 }
 
 /* end debug */
@@ -2144,7 +2151,7 @@ body, td, .snarkMessages li, .snarkMessages a, button, input, select, .snarkAddI
      font-size: 9pt !important;
 }
 
-.snarkConfigTitle a, .snarkConfigTitle, label.toggleview {
+.snarkConfigTitle a, .snarkConfigTitle, .toggleview {
      font-size: 10pt !important;
 }
 
@@ -2184,7 +2191,7 @@ b.alwaysShow {
 }
 
 @media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 1000px) {
-.snarkConfigTitle a, label.toggleview, .configsectionpanel .snarkConfigTitle {
+.snarkConfigTitle a, .toggleview, .configsectionpanel .snarkConfigTitle {
      font-size: 12pt !important;
 }
 }
@@ -2207,9 +2214,9 @@ b.alwaysShow {
 }
 }
 
-@media screen and (max-width: 1400px) {
+@media screen and (min-width: 1000px) {
 #dhtDebugInner {
-    margin-top: -22px !important;
+    margin-top: -21px !important;
 }
 }
 
@@ -2267,7 +2274,7 @@ body, td, button, input, select, .snarkAddInfo, code, tt, th, a, a:link, textare
      padding: 3px 15px !important;
 }
 
-.snarkConfigTitle, .snarkConfigTitle a, label.toggleview {
+.snarkConfigTitle, .snarkConfigTitle a, .toggleview {
      font-size: 12pt !important;
 }
 
@@ -2279,9 +2286,10 @@ input[type="submit"] {
      height: 58px;
 }
 
-.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
+.snarkConfigTitle, .toggleview, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
      font-size: 12pt !important;
-     padding: 4px 15px !important;
+     padding: 4px 1px !important;
+     min-width: 300px;
 }
 
 .snarkTorrentStatus b {
@@ -2296,8 +2304,8 @@ input[type="submit"] {
      padding: 4px !important;
 }
 
-.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
-     min-width: 240px;
+#dhtDebugInner {
+    margin-top: -25px !important;
 }
 
 .debuginfo td {
@@ -2306,7 +2314,7 @@ input[type="submit"] {
      padding-top: 4px !important;
      padding-bottom: 4px !important;
 }
-
+/*
 .debugConnection {
      background: #337;
      border-radius: 2px;
@@ -2317,13 +2325,15 @@ input[type="submit"] {
      font-size: 9pt !important;
      display: inline-block;
 }
+*/
 }
 
 @media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1400px) {
-.snarkConfigTitle a, label.toggleview,
+.snarkConfigTitle a, .toggleview,
 .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
      font-size: 14pt !important;
-     padding: 3px 15px 4px !important;
+     padding: 3px 1px 4px !important;
+     min-width: 300px;
 }
 }
 
diff --git a/installer/resources/themes/snark/midnight/snark.css b/installer/resources/themes/snark/midnight/snark.css
index c9b470f72..f628d5062 100644
--- a/installer/resources/themes/snark/midnight/snark.css
+++ b/installer/resources/themes/snark/midnight/snark.css
@@ -1098,14 +1098,14 @@ _:-ms-lang(x), .snarkTorrentOdd, .snarkTorrentOdd td, .SnarkTorrentEven, .SnarkT
      display: inline-block;
 }
 
-.snarkConfigTitle, label.toggleview {
+.snarkConfigTitle, .toggleview {
      font-size: 10pt;
      font-weight: bold;
      font-variant: small-caps !important;
      display: inline-block;
-     min-width: 200px;
+     min-width: 260px;
      margin: -1px 0 -5px 0;
-     padding: 3px 25px 3px 22px;
+     padding: 3px 1px 3px 1px;
      text-align: center !important;
      letter-spacing: .15em;
      border: 1px solid #443da0;
@@ -1115,12 +1115,12 @@ _:-ms-lang(x), .snarkTorrentOdd, .snarkTorrentOdd td, .SnarkTorrentEven, .SnarkT
      text-shadow: 0 0 1px #000;
 }
 
-.snarkConfigTitle:hover, label.toggleview:hover {
+.snarkConfigTitle:hover, .toggleview:hover, input.toggle_input:focus + .toggleview {
      background: #002 !important;
      background: linear-gradient(to bottom, #004 50%, #002 50%) !important;
 }
 
-.snarkConfigTitle:active, label.toggleview:active {
+.snarkConfigTitle:active, .toggleview:active {
      background: #003 !important;
      background: linear-gradient(to bottom, #004 50%, #002 50%) !important;
      box-shadow: inset 3px 3px 3px #000;
@@ -1179,7 +1179,7 @@ _:-ms-lang(x), .snarkTorrentOdd, .snarkTorrentOdd td, .SnarkTorrentEven, .SnarkT
      transition: ease transform 0.3s;
 }
 
-.snarkConfigTitle img, label.toggleview img {
+.snarkConfigTitle img, .toggleview img {
      margin-right: -2px;
      margin-top: -1px;
      filter: drop-shadow(0 0 1px #000);
@@ -1947,11 +1947,16 @@ input.trackerannounce {
 /* toggle create/add panel view */
 
 input.toggle_input {
-     display: none;
+      position: absolute;
+      opacity: 0;
+      z-index: -1;
+      height: 0 !important;
+      width: 0 !important;
 }
 
-label.toggleview:hover {
+.toggleview:hover, .toggleview:hover, input.toggle_input:focus + .toggleview, .snarkConfigTitle a:focus, .snarkConfigTitle a:visited:focus {
      cursor: pointer;
+     color: #652787 !important;
 }
 
 input#toggle_addtorrent:not(checked) + label + hr + table,
@@ -1991,7 +1996,7 @@ input#toggle_createtorrent:checked + label + hr + table {
      display: none;
 }
 
-label.toggleview, .snarkConfigTitle a, .snarkConfigTitle a:visited {
+.toggleview, .snarkConfigTitle a, .snarkConfigTitle a:visited {
      color: #7972d1 !important;
 }
 
@@ -2559,7 +2564,7 @@ b.alwaysShow {
      max-width: 260px;
 }
 
-.snarkTorrentStatus, .snarkTorrentUploaded, .snarkTorrentRateUp, tfoot .snarkTorrentAction {
+.snarkTorrentStatus, .snarkTorrentUploaded, .snarkTorrentRateUp, tfoot .snarkTorrentAction, .peerinfo, .debuginfo {
      display: none;
 }
 
@@ -2715,7 +2720,7 @@ a, th, thead th, tfoot th, td, select, select option, .snarkAddInfo, .snarkFileN
      font-size: 10.5pt !important;
 }
 
-.snarkConfigTitle, .snarkConfigTitle a, label.toggleview, .snarkNav:link {
+.snarkConfigTitle, .snarkConfigTitle a, .toggleview, .snarkNav:link {
      font-size: 11pt !important;
 }
 
@@ -2745,11 +2750,7 @@ a, th, thead th, tfoot th, td, select, select option, .snarkAddInfo, .snarkFileN
      padding-left: 28px !important;
 }
 
-.snarkConfigTitle, .toggleview {
-     padding: 4px 25px 4px 22px;
-}
-
-.snarkConfigTitle, .snarkConfigTitle a, label.toggleview {
+.snarkConfigTitle, .snarkConfigTitle a, .toggleview {
      font-size: 12.5pt !important;
 }
 
@@ -2762,8 +2763,8 @@ a, th, thead th, tfoot th, td, select, select option, .snarkAddInfo, .snarkFileN
      padding-bottom: 5px !important;
 }
 
-.snarkConfigTitle, label.toggleview {
-     min-width: 240px !important;
+.snarkConfigTitle, .toggleview {
+     min-width: 300px !important;
 }
 
 .snarkMessages {
diff --git a/installer/resources/themes/snark/ubergine/images/details.png b/installer/resources/themes/snark/ubergine/images/details.png
index 852e6aae73beafbba2d493887c9e9e35ab0aa6d6..dfce79109105d380a2b2aef08dd6cc8993f3bae4 100644
GIT binary patch
literal 2337
zcmV++3EuXJP)<h;3K|Lk000e1NJLTq001xm001xu0{{R3VB86{0008$P)t-s00003
z00TA@HUj_y1ONmI015yA01N;O0{{a900RU71Ofm80{{a900RI308R`}Y$t3300RO5
z0s{a8msXZg1y6S}c7;KNQ3X&$07L@-0|Nj9E&we900WChiW>kLi%5w%06B(4hJ-<a
zGypPvI(;qxE`dFOEdVVh03{><BpCo1mQ|HR07EbUFckn5gFk|FE^`zB6Od4lYb0tz
z07HU4fsjp(SPoZK4OTz^KZQbsZz*qcEpt~6S33YZC;%uG02OB-XHEi5cQAEnA7)n!
zR5AcCIRH5W00V(Ofmsh$H~=+Z7+{4xg#!Qs|Ns9-07g3iIzIqDZYOO^07^*!NH_pE
zXdh=}9AiTOLV`YlR0&fy05x<jbCpz-aVu~|07WeTEHeNzYa?n}5Lr$FO+5fSdp3F<
z03DiInS?=uK>$FdXQY2RelY+sC;%tKio?5ry0Ue#pJ1MnQIU;HjEP2wVHjX504pT`
zBn1EkqGO?bIecCfT@U~e2mlDmk;$-fuc>ROom`xUM231bd3ZB-Vi{pw6I@UQPcQ&4
z8UPv#01MZk*1v?lxP7;^c(jX1iWmSG6aW;_nb50ls&+7SSPoZF22d{mE+GIR&X&!t
zaIKhEmsbr|Rt!}m03sFu7RZjry@I^9dbOu$rj?78kWP;(04eY6@4|<{mW!5lPjzWN
zXks;CAOIiVsovC_)5(y?s%)vGkE5H5nv#o>i*1U5V1RyFeQ`!`Z9;5iIAm8TRzng(
zBLE}Po6*IL#E(smjf;(qUX6!ohl6K>gj|DrTzYs^cy(BHQ6o`12|N4x`}z3!=;Y|y
zq}i2Rl!Rl1d{BFFSaEMTZeB56TP|8zLRm~5Oh_0<IwU&u^7Op3ytst8u$`~1o2{#N
zs;QKyqjaL4h@PE=otlH0lzfzxYLt$2j)_f(f=q#YL40&db8<UzZar;XLS0cpP)$Ni
zMnXnLBt|v^H6|n`2WIxO0000_bW%=J0P_U>%NP|9>9>$-R!}1r5t4Of^YiZQ<mBJp
z%g2v&Z*OEyP9r1p^Yiob@$vET-rmg1%gf5g$G5k(wvv*Pl8}#&bZcs5V`EoVR#h2z
z@pWYY00o&zL_t(|+Ju#JU@Q3-N9WnL{o~rU72CFx#;MzwwQaZ0wr#9!@BX`YzIo=U
zo6nhx46s|6`p)8KADYAQ&VKm0SKgn3-Gix1pA^)n)oOuYXHugt6f&QBW9nVvA1t1k
zr^^L&9;;f=mehFpQr4_j?^I^^(wUy2oJ4aXVaX|J@#NLmk{V?x)gPF(Z20Z+s~)uu
zS>jEx&RCPV*;1YB$rH5M^<JTrRVRP^U$^F0+^5Tl$4rfl*^Q={xjCmqXH`Q9PN|UP
z;L`73d2@cbKxZ*`4ptR!FRp4dHN`E}EgrQX!_HB{7`5dj%3HVObIhi};%M~v!1ip@
zXS+{zpE{8z$VhU$d@9SwrHd4A-q25*wK^WlE{^v1ACDGif3acRC!e0&^aJdc17kBC
zTseutxUQ>JbMkU6W>fY62+@J6kN16kgh)K{WzY9*`5I**mFbfONo?{1S0^9-guqi0
zZ)&W9jv$}??Vh7V;Ar<R8Tl{+Of8es*b3glE8Bg|u5PJL#7x;}<iQ>LRud85^d|H5
z1$<};re;$Z;w2bj%D-)SI!m+Jv?Dt^d$7^ex$mpA@ZDxR2Tl(vGf*a{izp1ke@7wV
zd5+Br70gYYrX40zXUx2NLkFJk=s5!&mBKq0;L7Q23fbU#8J%yl?E<x~IwxT^H^pLR
zb39Sfz3v#1cx-*IhJ!lt%eXWWRFF9TKL&)?3+;kDPfN8W(HxJ*oADFr#Kw(#_V)Dt
zs7V)alm%%dt%59RPfY;fF|WO?#?z8Jlw+}2a&mTeZ``<PQ_tqjy=TvGyoFGJC98uG
zU`vMfzL7Ap)N8lZsI72X50#XZ<o<Nv<ofj+HtauepnD561O<GuavDAYL(;BtkH+4W
zDm584b)MDZ(E*-KXs3uR1$aX+L69y2fmdM+yC-5VNDDdk44VKHoV=cE!l6<jOdO~U
z(&!?sf*}#R!tQC<(@efsgB$45tf|?2od9{3uMBod!V4Ij+ZqVtu(?cOfgX&VZQ$5!
zw%)HhIyyc?!Ua4p<H~6yHeR5@SeZ$fkInT{`AR(}-=56CN&bBH+_^35kZ=*@VWlE1
zUO?<pMF?XtxsORLE%0(QntU9MhQrZc7Pk6P9!(4d+Urwp!U&9B=9dcjg-Wkp&jIv$
zud?9Kp0p4syPQ`rP=QPW2=llBmXr!gL4gt|C@kdjFYHCa;acdQjt@ZQNyNs=R2BhR
znn$bkv6xg)5JI7lO1*elD3?S3>3qnE3c%3M(1W!BKZ_}qQV~)qleu+068?gH;{Ct?
zknd}7gD?(zQA7*Y$$Wkmi^ar&pZ=};ks!I2hlaut0x%7Gk3yo!xpid$M;c!sAUm8E
z4A9P%e0>-i0w!Xk$yyPKR?e-fE0f`r)z)zt2a!+#c`}2C@~R>?5=LX#Lb8@br_<!+
z<y@eg8<fi>X+aE!Pv^H?$;0W5En_GsY*6U5%h2hDw9rl_^LT~|Cw_d`C=PxBjrk9c
ztktqbBpf;k5Q$GC!H5pu?y9_+A2tR9UNZ2Y2smuEh|Q=Fi^a~g;Ht0eQ&qb9!kMTa
zv?H8R|Eu6J7-Wiq0yzI%1AK&puCA`uOAV?N+7Bu)3PUV0ibJ@9WBiqP1HWY!q5UJK
zV`+vzQtzw?Nq7Lmb^b=-_sErYU`1CSM3Wy>xtwCLA!IPr-z5A&xXQ4}*i|M)RF&I|
zMyJ!Mx&)2mtOa)M+V%I<{D?`|b<D_$gjIdpDqX673YBXEhJhFgpkHRjE-+9k?Gw}h
zxk@*|O=_2BzwU!Nb<Wz~&j`=-nCX2H`&0do)Y;YDe_)}cv6hz+Bd-@PQHhl*;9Wt5
z4PHmQi8>G4!i+ZVS%`gce&?Bc9^*t*Wa%~W{p6ZvMTDgR6;v5hexi~K00000NkvXX
Hu0mjfOMVV~

literal 834
zcmV-I1HJr-P)<h;3K|Lk000e1NJLTq000pH000pP1^@s6J8eh$00009a7bBm000id
z000id0mpBsWB>pH^hrcPRCt_iQ(H?^Q562p#kr3<%IKhuMw%v+Bo>j-n>|HDQa)5*
z81)eSh92rSgivqwl0hK#&`%I7i&Bd)HN?v}w{ynvT=%)O&dv!N+aKrU?7hDAt#7R*
z;QvSHLRW_fG2_FJ3lKC9UTzbc+jQsGKbGr%^q^;07Ujuv*|XPAwhUzAenKj#Wp|~#
zl8^31-&wGpZD8ZmVKU)Ryp%<DVyu5`dUABKsimO>tZKvFqfez!#YR5Ai`mlK>OAHj
zq>-LkzyjleHHL0<-?%k&^Tqv(_u`3I0<PuIt$<Kl3}!)xqccdhgg&h|%)qXG!}rw+
zDvN(fsQ%NVofqCr4NoNmQ2^5zDX`FX={TAOTjBdY%1Z?>-GO5;q>vJG$c<4U?^UQd
zF(4rWZ;yA4r)=GZQPQCmHSE*JsuovimJL{%3CpCid<&!m0~kn>>30K5<W6+94kiaD
z8l5D}ipjIOrpx6oJ)MUf4`F|!Lgl%zH5)p?AW+AUK;l|2dY{M=q)b-m${0k@U_0<U
zA07pSnj#o_c%FLTBmZ$5i_;%KIyixTfDq*NDp)#baYVGGkWn$f%s)Q6mIs$Q=o4YM
zIRY^v!}LuaxKB`^f=neXl1x@K1fCdsX2sIV`_L2(x<YcRI+R}}6u$0oQqOleL6x8o
ziiALq1I8#-B~Y@nj`dB|9X=7(!hy-4=?rwxBZrd&Mh3xqL{dPWbg2BE%G)GgwnUmf
zC5PRYKe5U)1dju$M#4m-J;q7GZBb~=CbkF#lz0+@!+f-iWt+E{GS19lF4zrF|FKJ8
zX$P5sPEOL%pM{W>4itDCMU>W(NWT7O>}g`JG$Q$mMn6U!Lo5-;sgW~eu*-uMzkG(O
zDtuvzC=`k07$wu{cSj(i%OQlGw;+{?B6ei8O)7vo^MlGAsS(tZ@I%AbPfEsR$ajda
zTZYu&z-82lH5=?Pl`tFla5&}&N$vEZuaT_F5Sc`z8tuzYZENe#Z}0Sl8DmGrV*mgE
M07*qoM6N<$f?S(_ZU6uP

diff --git a/installer/resources/themes/snark/ubergine/snark.css b/installer/resources/themes/snark/ubergine/snark.css
index 20ecc0caa..7a3d21672 100644
--- a/installer/resources/themes/snark/ubergine/snark.css
+++ b/installer/resources/themes/snark/ubergine/snark.css
@@ -2,33 +2,27 @@
 /* Guantanamo Commemorative Edition. */
 /* Author: dr|z3d */
 
-html {
-     min-height: 100%;
-}
-
 body {
-     background: #130313 url(images/graytile.png) scroll left top / 96px 96px;
-     background-size: 100% 100%, 96px 96px;
-     color: #fff;
+     background: #130313 url(images/graytile.png) fixed left top / 96px 96px;
+     color: #ddd;
      font: 8pt "DejaVu Sans", Verdana, "Noto Sans", Ubuntu, Helvetica, sans-serif;
 }
 
 /* preload top navigation mouseovers */
 
 body:not(old) {
-     background: linear-gradient(to bottom, rgba(64,0,64,0.2), rgba(11,0,11,0.1), rgba(11,0,11,0.2)),
-     repeating-linear-gradient(135deg, rgba(32,0,32,0.5) 2px, rgba(16, 0, 16, 0.3) 3px, rgba(32,0,32,0.5) 5px),
+     background: url(images/graytile.png) left top,
      url(images/button_snark_hover.png) top center no-repeat,
      url(images/button_snark_active.png) top center no-repeat,
      url(images/button_tracker_hover.png) top center no-repeat,
      url(images/button_tracker_active.png) top center no-repeat,
      url(images/button_forum_hover.png) top center no-repeat,
      url(images/button_forum_active.png) no-repeat #130313 !important;
-     background-size: 100% 100%, 100% 100%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important;
+     background-size: 96px 96px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important;
 }
 
 body.iframed {
-     background: transparent url(themes/console/images/transparent.gif) !important;
+     background: transparent url(/themes/console/images/transparent.gif) !important;
      margin: 0 !important;
 }
 
@@ -45,16 +39,11 @@ body.iframed:not(old) {
 
 .page {
      background: #323 url(images/tile2.png);
-     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);
-     color: #310;
+     background: repeating-linear-gradient(to bottom, #1f081f 1px, #2b172f 1px, #1f081f 3px);
      margin: 5px 0 0 0;
-     padding: 10px 10px 0 10px;
+     padding: 10px 10px 0;
      border-radius: 4px;
      border: 1px solid #101;
-     font-size: 8pt !important;
-     line-height: 160% !important;
-     text-align: center;
-     opacity: 1;
      box-shadow: inset 0 0 3px 0 #101, 0 0 2px 3px rgba(0,0,0,0.4);
 }
 
@@ -64,7 +53,6 @@ body.iframed:not(old) {
      border-radius: 0;
      box-shadow: none;
      padding: 0 0;
-     filter: none;
 }
 
 ::selection {
@@ -92,9 +80,6 @@ body.iframed:not(old) {
      filter: drop-shadow(0 1px 4px #000);
      background: #101 url(images/snarktopnav.png) repeat-x scroll center center;
      background: linear-gradient(to bottom, #522852 0%, #4a2449 11%, #321831 33%, #281428 51%, #1c0e1c 52%, #101 54%, #101 100%);
-     text-transform: uppercase !important;
-     font-weight: bold;
-     color: #001;
      min-width: 600px;
      width: 70%;
      text-align: center;
@@ -120,11 +105,12 @@ _:-ms-lang(x), .snarknavbar {
 }
 
 .snarkNav:link, .snarkNav:visited {
+     display: inline-block;
      text-decoration: none !important;
      text-transform: uppercase !important;
      text-shadow: 0 0 1px #000;
      padding: 5px 12px 5px 29px !important;
-     margin-right: -4px !important;
+     margin: -5px -4px -5px 0;
      letter-spacing: 0.11em;
      font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, sans-serif;
      font-weight: bold;
@@ -140,12 +126,6 @@ _:-ms-lang(x), .snarknavbar {
      border: 1px solid #730;
 }
 
-/* Arabic fix */
-.snarkNav {
-     display: inline-block;
-     margin: -5px -4px -5px 0;
-}
-
 _:-ms-lang(x), .snarkNav:link, .snarkNav:visited {
      padding-top: 1px !important;
 }
@@ -177,7 +157,7 @@ _:-ms-lang(x), .snarkNav:link, .snarkNav:visited {
      color: #fff !important;
      text-shadow: none;
      border: 1px solid #730;
-     box-shadow: 0 0 1px 0 #000, inset 0 0 0 1px #000, inset 3px 3px 3px 1px #3F1900 !important;
+     box-shadow: 0 0 1px 0 #000, inset 0 0 0 1px #000, inset 3px 3px 3px 1px #3f1900 !important;
 }
 
 .snarkNav:link:first-child, .snarkNav:last-child[href="/i2psnark/"] {
@@ -214,19 +194,16 @@ _:-ms-lang(x), .snarkNav:last-child[href="/i2psnark/"] {
 .nav_forum:link {
      background: #310 url(images/button_forum.png) 11px center no-repeat;
      background: url(images/button_forum.png) 11px center no-repeat, linear-gradient(to bottom, #a68058 1%, #7a6045 27%, #5e4730 50%, #2e1700 51%, #1f0f00 100%);
-     background-size: 16px auto, 100% 100%;
 }
 
 .nav_forum:link:hover, .nav_forum:link:focus {
      background: #707 url(images/button_forum_hover.png) 11px center no-repeat;
      background: url(images/button_forum_hover.png) 11px center no-repeat, linear-gradient(to bottom, #a15b73 0%, #7e4062 50%, #591c3e 51%, #46133e 100%);
-     background-size: 16px auto, 100% 100%;
      color: #d2baff !important;
 }
 
 .nav_forum:link:active {
      background: #f60 url(images/button_forum_active.png) 11px center no-repeat;
-     background-size: 16px auto, 100% 100%;
      color: #fff !important;
 }
 
@@ -258,9 +235,8 @@ _:-ms-lang(x), .snarkNav:last-child[href="/i2psnark/"] {
      background: #2a192a url(images/hat.png) no-repeat scroll right center;
      background: url(images/hat.png) no-repeat scroll right center, linear-gradient(to bottom, #2a192a 0%, #202 100%);
      background-size: 80px auto, 100% 100%;
-     box-shadow: inset 0 0 3px 1px rgba(16, 0, 16, 0.6);
+     box-shadow: inset 0 0 3px 1px rgba(16, 0, 16, 0.6), 0 0 1px 1px rgba(16, 8, 16, 0.3);
      outline: none;
-     filter: drop-shadow(0 0 1px rgba(16, 8, 16, 0.5));
 }
 
 .snarkMessages:hover, .snarkMessages:focus {
@@ -335,6 +311,7 @@ _:-ms-lang(x), .snarkNav:last-child[href="/i2psnark/"] {
 
 /* end screenlogger */
 
+/*
 pre {
      width: 100%;
      font: 8pt "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", monospace !important;
@@ -342,8 +319,9 @@ pre {
      text-align: left !important;
      height: 8px;
      color: #35f;
-     font-weight: bold !important; 
+     font-weight: bold !important;
 }
+*/
 
 table {
      margin: 0 0 10px 0;
@@ -359,7 +337,7 @@ thead, tfoot {
      background: #101;
 }
 
-thead, .snarkTorrentInfo th {
+thead th, .snarkTorrentInfo th {
      background: linear-gradient(to bottom, #202 0%, #101 100%);
      border-top: 1px solid #101 !important;
      border-bottom: 1px solid #101 !important;
@@ -384,29 +362,11 @@ tfoot td:first-child {
      padding-left: 0;
 }
 
-th:first-child img {
-     margin: 1px 1px 3px 3px !important;
-}
-
-th:nth-child(2) img {
-     margin: 1px 7px 3px 2px !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;
-}
-
-tfoot tr:nth-child(n+1) {
-     text-align: left;
-}
-
 .headerstatus {
      text-align: center;
 }
 
 .ParentDir {
-     background: #656;
      background: #351933;
      border: 1px solid #101 !important;
      text-align: left !important;
@@ -447,7 +407,7 @@ tfoot tr:nth-child(n+1) {
      border-collapse: separate;
      border-spacing: 0;
      border-radius: 4px;
-     box-shadow: 0 0 1px 1px rgba(16, 8, 16, 0.5);
+     box-shadow: 0 0 1px 1px rgba(16, 8, 16, 0.3);
 }
 
 @media screen and (-webkit-min-device-pixel-ratio:0) { /* fixes webkit/blink double border */
@@ -461,19 +421,23 @@ tfoot tr:nth-child(n+1) {
      border-top: 1px solid #202 !important;
 }
 
+.snarkTorrents tr:first-child td {
+     padding-top: 3px !important;
+}
+
 .snarkTorrents thead th {
      border-top: 1px solid transparent !important;
 }
 
 .snarkTorrents thead th  {
-     padding: 2px;
-     background-clip: padding-box;
+     padding-top: 3px;
+     padding-bottom: 6px;
      border-bottom: 1px solid #313;
-     border-bottom: 1px solid rgba(51, 17, 51, 0.8);
+     vertical-align: middle;
 }
 
-.snarkTorrents thead th:nth-child(-n+3) {
-     max-width: 45px;
+.snarkTorrents thead th:nth-child(2) img {
+     margin-bottom: 3px;
 }
 
 .snarkGraphicStatus, .snarkTorrentStatus {
@@ -536,6 +500,7 @@ th.snarkTorrentStatus {
      font-style: italic;
      color: #dd7 !important;
      line-height: 120%;
+     text-align: center !important;
 }
 
 .snarkTorrentAction {
@@ -564,12 +529,10 @@ th.snarkTorrentAction input[type="image"]:hover, .snarkTorrentAction input[type=
 
 .snarkTorrentAction img {
      margin: 0 2px !important;
-     opacity: 0.6;
 }
 
 .snarkTorrentAction img:hover {
      box-shadow: 0 0 1px 1px #f90;
-     opacity: 1;
 }
 
 .snarkTorrents tfoot {
@@ -587,31 +550,10 @@ th.snarkTorrentAction input[type="image"]:hover, .snarkTorrentAction input[type=
      font-weight: bold;
      vertical-align: middle;
      border-top: 1px solid #313;
-     border-bottom: 1px solid rgba(51, 17, 51, 0.8);
-}
-
-.snarkTorrents tfoot th:nth-child(even) {
-     background: #120012;
-}
-
-.snarkTorrents thead th:nth-last-child(4), .snarkTorrents tfoot th:nth-last-child(4) {
-     text-align: center;
-}
-
-.snarkTorrents thead th:nth-last-child(4), .snarkTorrents tfoot th:nth-last-child(4) {
-     text-align: right;
-}
-
-.snarkTorrents tfoot th:nth-child(n+2) {
-     text-align: right;
-}
-
-.peerinfo td:nth-child(3), .peerinfo td:nth-child(4) {
-     padding: 2px 4px;
 }
 
 .snarkTorrents tt {
-     font-family: "Noto Mono", "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+     font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
      color: #cc0;
      font-weight: bold;
      margin-right: 2px;
@@ -641,7 +583,6 @@ th.snarkTorrentAction input[type="image"]:hover, .snarkTorrentAction input[type=
 td {
      padding: 2px 4px;
      color: #ddd !important;
-     opacity: 1;
      font-size: 8pt;
 }
 
@@ -651,24 +592,23 @@ td {
 
 td:first-child {
      text-align: right;
-     font-size: 8pt;
 }
 
-img[src$="details.png"] {
-     mix-blend-mode: luminosity;
+.snarkTrackerDetails img {
+     width: 16px;
+     height: 16px;
+     opacity: 0.75;
 }
 
-a img[src$="details.png"]:hover, a:focus img[src$="details.png"] {
-     mix-blend-mode: initial !important;
+.snarkTrackerDetails a img:hover, .snarkTrackerDetails a img:focus {
+     opacity: 1;
 }
 
 .snarkTorrentOdd {
      background: #351933;
-     font-size: 8pt;
 }
 
 .snarkTorrentEven {
-     font-size: 8pt;
      background: #270027;
 }
 
@@ -694,19 +634,9 @@ a img[src$="details.png"]:hover, a:focus img[src$="details.png"] {
 }
 }
 
-.snarkTorrentEven + .snarkTorrentEven td:nth-child(2), .snarkTorrentOdd + .snarkTorrentOdd td:nth-child(2) {
-     text-align: left;
-     padding-left: 0;
-     color: #ffdfff !important;
-}
-
-.snarkTorrentEven + .snarkTorrentEven td:nth-child(4), .snarkTorrentOdd + .snarkTorrentOdd td:nth-child(4) {
-     text-align: right !important;
-     font-weight: bold;
-}
-
-.snarkTorrentEven + .snarkTorrentEven td:nth-child(n+5), .snarkTorrentOdd + .snarkTorrentOdd td:nth-child(n+5) {
-     text-align: right !important;
+.peerinfo td[colspan="4"], .debuginfo td[colspan="10"] {
+     padding-left: 0 !important;
+     line-height: 120% !important;
 }
 
 .snarkTorrents tbody tr:hover, .snarkDirInfo tbody tr:hover {
@@ -716,7 +646,7 @@ a img[src$="details.png"]:hover, a:focus img[src$="details.png"] {
 
 tr:hover .percentBarText {
      opacity: 1;
-     text-shadow: 0 1px 1px rgba(0,0,0,0.8);
+     text-shadow: 0 1px 1px #313;
 }
 
 /* MS Edge fix */
@@ -724,10 +654,6 @@ _:-ms-lang(x), .snarkTorrents tbody tr:hover, .snarkDirInfo tbody tr:hover {
      background: #58165e !important;
 }
 
-.snarkTorrents tbody tr:hover .snarkTorrentName, .snarkDirInfo tbody tr:hover td .snarkFileName {
-     color: #fff !important;
-}
-
 .snarkFileIcon {
      width: 16px;
      text-align: center;
@@ -778,10 +704,6 @@ _:-ms-lang(x), .snarkTorrents tbody tr:hover, .snarkDirInfo tbody tr:hover {
      filter: drop-shadow(0 0 1px #000);
 }
 
-.snarkTorrentInfo img:nth-child(n+2) {
-     margin-left: 8px !important;
-}
-
 .snarkTorrentInfo th {
      text-align: left;
      padding: 6px 0;
@@ -892,8 +814,8 @@ _:-ms-lang(x), .snarkDirInfo img, .snarkTorrents img {
 
 .snarkTorrentDownloaded {
      text-align: right !important;
-     width: 110px;
-     max-width: 110px;
+     width: 108px;
+     max-width: 108px;
      color: #76a !important;
      white-space: nowrap;
 }
@@ -918,14 +840,11 @@ _:-ms-lang(x), .snarkDirInfo img, .snarkTorrents img {
      margin: 0 !important;
 }
 
-.snarkTorrentDownloaded .percentBarOuter {
-     margin-left: 5px !important;
-}
-
 .peerinfo .percentBarOuter {
      background: repeating-linear-gradient(135deg, #000 1px, #000 6px, #0f0a08 6px, #0f0a08 11px) !important;
      height: 16px;
      line-height: 13px;
+     display: inline-block;
 }
 
 .percentBarInner {
@@ -958,8 +877,8 @@ _:-ms-lang(x), .snarkDirInfo img, .snarkTorrents img {
      float: left;
 }
 
-.peerinfo .percentBarOuter {
-     float: right;
+.peerinfo .snarkTorrentDownloaded {
+     text-align: right !important;
 }
 
 .percentBarText {
@@ -989,7 +908,6 @@ _:-ms-lang(x), .snarkDirInfo img, .snarkTorrents img {
 }
 
 .unchoked {
-     color: #00f000 !important;
      color: #34CF19 !important;
 }
 
@@ -1023,7 +941,7 @@ _:-ms-lang(x), .snarkDirInfo img, .snarkTorrents img {
      font-weight: bold;
 }
 
-table#trackerselect {
+#trackerselect {
      width: 100% !important;
 }
 
@@ -1060,54 +978,6 @@ table#trackerselect {
      user-select: all;
 }
 
-.toggleview, .snarkConfigTitle, .snarknavbar, img, input[type="image"], label {
-     -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;
-     font-weight: bold;
-     padding: 4px 18px 3px;
-     margin: 5px 0 10px 0 !important;
-     border: 1px solid #101;
-     border-top: none;
-     border-radius: 0;
-     background: #101 url(images/snarknav.png) repeat-x scroll center center;
-     background: linear-gradient(to bottom, #4a3d49 0%, #3d303d 50%, #0d000d 50%, #0d000d 100%);
-     font-variant: small-caps !important;
-     letter-spacing: 0.15em;
-     filter: drop-shadow(0 1px 1px rgba(16, 0, 16, 0.5));
-     color: #f7e3fc;
-     text-shadow: 0 0 1px #000;
-     box-shadow: inset 0 0 1px 0 #313;
-     display: inline-block;
-     margin: 0 0 -3px !important;
-     min-width: 210px;
-}
-
-.snarkConfigTitle:hover, label.toggleview:hover {
-     background: linear-gradient(to bottom, #5f475d 0%, #4f3b4f 50%, #1f001f 50%, #1f001f 100%);
-     box-shadow: inset 0 0 1px #3f173f;
-     color: #d2baff;
-}
-
-.snarkConfigTitle:active, label.toggleview:active {
-     box-shadow: inset 0 0 1px #7f2f7f, inset 3px 3px 3px 1px #0d000d;
-}
-
-.snarkConfigTitle img, label.toggleview img {
-     margin: 1px -3px 2px 0;
-     vertical-align: middle;
-     filter: drop-shadow(0 0 1px #000);
-}
-
-.configsectionpanel .snarkConfigTitle:hover img {
-     filter: drop-shadow(0 0 1px #000) !important;
-}
-
 .snarkConfig {
      font-size: 10pt;
      width: 100%;
@@ -1152,57 +1022,6 @@ a:active, a:visited:active {
      color: #f10;
 }
 
-a.control, a.controld, a.control:active {
-     display: inline-block;
-     vertical-align: middle;
-     background: #989;
-     background: linear-gradient(to bottom, #989 0%, #878 100%);
-     background-size: 100% 100% !important;
-     border: 1px inset #bbb;
-     border-radius: 2px;
-     box-shadow: 0 0 1px 1px rgba(48,16,48,0.7);
-     color: #1c081e;
-     font-weight: bold;
-     padding: 4px 6px 3px 6px;
-     text-shadow: 0 0 #410;
-     white-space: nowrap;
-     filter: drop-shadow(0 0 1px #313) !important;
-}
-
-a.controld {
-     color: #444;
-     font-weight: normal;
-}
-
-a.control img {
-     margin: -2px 2px 0 -4px !important;
-     padding: 0;
-     height: 14px;
-}
-
-a.control:hover img, a.control:focus img {
-     mix-blend-mode: luminosity;
-}
-
-a.control:active img {
-     mix-blend-mode: soft-light;
-}
-
-a.controld img {
-     display: none;
-}
-
-input[type="submit"], input[type="reset"] {
-     background-size: 14px 14px, 100% 100% !important;
-     box-shadow: 0 0 1px 1px rgba(48,16,48,0.7);
-}
-
-a.control:active, input[type="submit"]:active, input[type="reset"]:active {
-     color: #ce1641 !important;
-     border: 1px solid #fff !important;
-     box-shadow: inset 3px 3px 3px #fff;
-}
-
 #configs input[type="submit"], .trackerconfig input[type="submit"], input[name="savepri"] {
      text-transform: capitalize;
 }
@@ -1215,6 +1034,103 @@ th.headerpriority br, .snarkTorrents thead th br {
      display: none;
 }
 
+/* panel titles */
+
+.toggleview, .snarkConfigTitle, .snarknavbar, img, input[type="image"], label, th img {
+     -moz-user-select: none;
+     -webkit-user-select: none;
+     user-select: none;
+}
+
+.snarkConfigTitle:hover, .snarkConfigTitle:focus, label.toggleview:hover, label.toggleview:focus, .toggle_input:focus + label {
+     background: linear-gradient(to bottom, #5f475d 0%, #4f3b4f 50%, #1f001f 50%, #1f001f 100%);
+     box-shadow: inset 0 0 1px #3f173f;
+     color: #d2baff !important;
+}
+
+.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;
+     font-weight: bold;
+     padding: 4px 1px 3px;
+     margin: 5px 0 10px 0 !important;
+     border: 1px solid #101;
+     border-top: none;
+     background: #101 url(images/snarknav.png) repeat-x scroll center center;
+     background: linear-gradient(to bottom, #4a3d49 0%, #3d303d 50%, #0d000d 50%, #0d000d 100%);
+     font-variant: small-caps !important;
+     letter-spacing: 0.15em;
+     color: #f7e3fc;
+     text-shadow: 0 0 1px #000;
+     box-shadow: inset 0 0 1px 0 #313, 0 0 0 1px rgba(16, 0, 16, 0.4);
+     display: inline-block;
+     margin: 0 0 -3px !important;
+     min-width: 260px;
+}
+
+.snarkConfigTitle:hover a img, a:focus .snarkConfigTitle img, .toggle_input:focus + .toggleview img {
+     filter: drop-shadow(0px 0 1px #d2baff);
+}
+
+.snarkConfigTitle:active, label.toggleview:active {
+     box-shadow: inset 0 0 1px #7f2f7f, inset 3px 3px 3px 1px #0d000d;
+}
+
+.snarkConfigTitle img, label.toggleview img {
+     margin: 1px -3px 2px 0;
+     vertical-align: middle;
+     filter: drop-shadow(0 0 1px #000);
+}
+
+.configsectionpanel .snarkConfigTitle:hover {
+     color: #f7e3fc !important;
+}
+
+.configsectionpanel .snarkConfigTitle:hover img {
+     filter: drop-shadow(0 0 1px #000) !important;
+}
+
+label.toggleview {
+     color: #f60;
+}
+
+label.toggleview:active, .snarkConfigTitle a:active {
+     color: #9183af !important;
+}
+
+label.toggleview img:hover, label.toggleview:hover img, .snarkConfigTitle:hover a img {
+     color: #f90;
+     filter: drop-shadow(0 0 1px #d2baff);
+}
+
+label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle:active a img {
+     transform: rotate(90deg);
+     transition: ease transform 0.3s 0s;
+}
+
+.configsection a, label.toggleview {
+     color: #f60;
+     text-shadow: 0 0 1px #000;
+}
+
+.configsection a:hover, .snarkConfig .snarkConfigTitle:hover a, .snarkConfig .snarkConfigTitle a:focus {
+     color: #d2baff;
+     text-decoration: none;
+}
+
+.snarkConfig .snarkConfigTitle:hover img, .snarkConfig .snarkConfigTitle:focus img, .snarkConfig .snarkConfigTitle a:focus img {
+     filter: drop-shadow(0 0 1px #d2baff);
+}
+
+.snarkConfig .snarkConfigTitle a {
+     display: inline-block;
+     width: 100%;
+}
+
+/* end panel titles */
+
+/* buttons & inputs */
+
 input, a.control {
      font: 8pt "Droid Sans", "Noto Sans", "DejaVu Sans", Verdana, Helvetica, sans-serif;
      font-weight: bold;
@@ -1227,7 +1143,7 @@ input {
      padding: 3px 3px !important;
      border-radius: 2px;
      border: 1px solid #101;
-     background: #212 url(images/graytile.png);	 
+     background: #212 url(images/graytile.png);
      color: #f60;
      margin: 2px 4px;
 }
@@ -1237,48 +1153,12 @@ input.r {
      background: url(images/graytile.png);
 }
 
-input[type=submit] {
-     color: #1c081e;
-     background: #989;
-     background: linear-gradient(to bottom, #989 0%, #878 100%);
-     border: 1px inset #bbb;
-     padding: 4px 2px !important;
-}
-
-input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner {
-     border: none;
-     outline: none;
-}
-
-input[type=submit]:hover, input[type=submit]:focus {
-     background-blend-mode: luminosity;
-}
-
-input[type=submit]:hover, input[type=submit]:focus, a.control:hover, a.control:focus {
-     border: 1px outset #bbb;
-     color: #fff;
-     filter: drop-shadow(0 0 1px #515) !important;
-}
-
-input[type=submit]:focus, a.control:focus {
-     filter: drop-shadow(0 0 2px #f60) !important;
-}
-
-input[type=submit]:active, a.control:active {
-     background-blend-mode: soft-light;
-     color: #2e134c !important;
-     filter: drop-shadow(0 0 1px #f60) sepia(100%) invert(100%) !important;
-     mix-blend-mode: hard-light;
-}
-
 input[type=image], thead img {
      padding: 0 !important;
-     border-radius: 3px;
      border: 1px solid transparent;
      margin: 0 2px;
      opacity: 0.8;
      background: none;
-     filter: drop-shadow(0 0 1px #000);
      outline: none;
      max-height: 22px;
 }
@@ -1432,76 +1312,140 @@ input.disabled, input.disabled:hover, input.disabled:active, a.control.disabled:
      cursor: not-allowed;
 }
 
-input.accept, input.accept:active {
-     background: #989 url(images/accept.png) no-repeat 6px center;
-     background: url(images/accept.png) no-repeat 6px center, linear-gradient(to bottom, #989 0%, #878 100%);
+a.control, a.controld, a.control:active {
+     display: inline-block;
+     vertical-align: middle;
+     background: #989;
+     background: linear-gradient(to bottom, #989 0%, #878 100%);
+     background-size: 100% 100% !important;
+     border: 1px inset #bbb;
+     border-radius: 2px;
+     box-shadow: 0 0 1px 1px rgba(48,16,48,0.7);
+     color: #1c081e;
+     font-weight: bold;
+     padding: 4px 6px 3px 6px;
+     text-shadow: 0 0 #410;
+     white-space: nowrap;
+     filter: drop-shadow(0 0 1px #313) !important;
+}
+
+a.controld {
+     color: #444;
+     font-weight: normal;
+}
+
+a.control img {
+     margin: -2px 2px 0 -4px !important;
+     padding: 0;
+     height: 14px;
+}
+
+a.control:hover img, a.control:focus img {
+     mix-blend-mode: luminosity;
+}
+
+a.control:active img {
+     mix-blend-mode: soft-light;
+}
+
+a.controld img {
+     display: none;
+}
+
+input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner {
+     border: none;
+     outline: none;
+}
+
+input[type="submit"], input[type="reset"] {
      padding: 4px 6px 4px 22px !important;
+     color: #1c081e;
+     background: #989;
+     background: linear-gradient(to bottom, #989 0%, #878 100%);
+     background-size: 14px 14px, 100% 100% !important;
+     background-position: 6px center, center center !important;
+     background-repeat: no-repeat, repeat !important;
+     border: 1px inset #bbb;
+     box-shadow: 0 0 1px 1px rgba(48,16,48,0.7);
+}
+
+input[type="submit"]:hover, input[type="submit"]:focus {
+     background-blend-mode: luminosity;
+}
+
+input[type="submit"]:hover, input[type="submit"]:focus, a.control:hover, a.control:focus {
+     border: 1px outset #bbb;
+     color: #fff;
+     filter: drop-shadow(0 0 1px #515) !important;
+}
+
+input[type="submit"]:focus, input[type="reset"]:focus, a.control:focus {
+     filter: drop-shadow(0 0 1px #f60) !important;
+}
+
+input.accept, input.accept:active {
+     background: #989 url(images/accept.png);
+     background: url(images/accept.png), linear-gradient(to bottom, #989 0%, #878 100%);
 }
 
 input.accept:hover, input.accept:focus {
-     background: #767 url(images/accept.png) no-repeat 6px center;
-     background: url(images/accept.png) no-repeat 6px center, linear-gradient(to bottom, #767 0%, #989 100%);
+     background: #767 url(images/accept.png);
+     background: url(images/accept.png), linear-gradient(to bottom, #767 0%, #989 100%);
 }
 
 input.add, input.add:active {
-     background: #989 url(images/add.png) no-repeat 6px center;
-     background: url(images/add.png) no-repeat 6px center, linear-gradient(to bottom, #989 0%, #878 100%);
-     padding: 4px 6px 4px 22px !important;
+     background: #989 url(images/add.png);
+     background: url(images/add.png), linear-gradient(to bottom, #989 0%, #878 100%);
 }
 
 input.add:hover, input.add:focus {
-     background: #767 url(images/add.png) no-repeat 6px center;
-     background: url(images/add.png) no-repeat 6px center, linear-gradient(to bottom, #767 0%, #989 100%);
+     background: #767 url(images/add.png);
+     background: url(images/add.png), linear-gradient(to bottom, #767 0%, #989 100%);
 }
 
 input.cancel, input.cancel:active {
-     background: #989 url(images/cancel.png) no-repeat 6px center;
-     background: url(images/cancel.png) no-repeat 6px center, linear-gradient(to bottom, #989 0%, #878 100%);
-     padding: 4px 6px 4px 22px !important;
+     background: #989 url(images/cancel.png);
+     background: url(images/cancel.png), linear-gradient(to bottom, #989 0%, #878 100%);
 }
 
 input.cancel:hover, input.cancel:focus {
-     background: #767 url(images/cancel.png) no-repeat 6px center;
-     background: url(images/cancel.png) no-repeat 6px center, linear-gradient(to bottom, #767 0%, #989 100%);    
+     background: #767 url(images/cancel.png);
+     background: url(images/cancel.png), linear-gradient(to bottom, #767 0%, #989 100%);
 }
 
 input.create, input.create:active {
-     background: #989 url(images/create.png) no-repeat 6px center;
-     background: url(images/create.png) no-repeat 6px center, linear-gradient(to bottom, #989 0%, #878 100%);
-     padding: 4px 6px 4px 22px !important;
+     background: #989 url(images/create.png);
+     background: url(images/create.png), linear-gradient(to bottom, #989 0%, #878 100%);
 }
 
 input.create:hover, input.create:focus {
-     background: #767 url(images/create.png) no-repeat 6px center;
-     background: url(images/create.png) no-repeat 6px center, linear-gradient(to bottom, #767 0%, #989 100%);
+     background: #767 url(images/create.png);
+     background: url(images/create.png), linear-gradient(to bottom, #767 0%, #989 100%);
 }
 
 input.delete, input.delete:active {
-     background: #989 url(images/nuke.png) no-repeat 6px center;
-     background: url(images/nuke.png) no-repeat 6px center, linear-gradient(to bottom, #989 0%, #878 100%);
-     padding: 4px 6px 4px 22px !important;
+     background: #989 url(images/nuke.png);
+     background: url(images/nuke.png), linear-gradient(to bottom, #989 0%, #878 100%);
 }
 
 input.delete:hover, input.delete:focus {
-     background: #767 url(images/nuke.png) no-repeat 6px center;
-     background: url(images/nuke.png) no-repeat 6px center, linear-gradient(to bottom, #767 0%, #989 100%);
+     background: #767 url(images/nuke.png);
+     background: url(images/nuke.png), linear-gradient(to bottom, #767 0%, #989 100%);
 }
 
 input.reload, input.reload:active {
-     background: #989 url(images/restore.png) no-repeat 6px center;
-     background: url(images/restore.png) no-repeat 6px center, linear-gradient(to bottom, #989 0%, #878 100%);
-     padding: 4px 6px 4px 22px !important;
+     background: #989 url(images/restore.png);
+     background: url(images/restore.png), linear-gradient(to bottom, #989 0%, #878 100%);
 }
 
 input.reload:hover, input.reload:focus {
-     background: #767 url(images/restore.png) no-repeat 6px center;
-     background: url(images/restore.png) no-repeat 6px center, linear-gradient(to bottom, #767 0%, #989 100%);
+     background: #767 url(images/restore.png);
+     background: url(images/restore.png), linear-gradient(to bottom, #767 0%, #989 100%);
 }
 
 input.reload[name="recheck"], input.reload[name="recheck"]:active, input.disabled[name="recheck"] {
-     background: #989 url(images/recheck.png) no-repeat 6px center;
-     background: url(images/recheck.png) no-repeat 6px center, linear-gradient(to bottom, #989 0%, #878 100%);
-     padding: 4px 6px 4px 22px !important;
+     background: #989 url(images/recheck.png);
+     background: url(images/recheck.png), linear-gradient(to bottom, #989 0%, #878 100%);
      margin-left: 2px !important
 }
 
@@ -1510,47 +1454,61 @@ input.disabled[name="recheck"]:hover {
 }
 
 input.reload[name="recheck"]:hover, input.reload[name="recheck"]:focus {
-     background: #767 url(images/recheck.png) no-repeat 6px center;
-     background: url(images/recheck.png) no-repeat 6px center, linear-gradient(to bottom, #767 0%, #989 100%);
+     background: #767 url(images/recheck.png);
+     background: url(images/recheck.png), linear-gradient(to bottom, #767 0%, #989 100%);
 }
 
 input.starttorrent, input.starttorrent:active {
-     background: #989 url(images/next.png) no-repeat 6px center;
-     background: url(images/next.png) no-repeat 6px center, linear-gradient(to bottom, #989 0%, #878 100%);
+     background: #989 url(images/next.png);
+     background: url(images/next.png), linear-gradient(to bottom, #989 0%, #878 100%);
      padding: 4px 6px 4px 20px !important;
 }
 
 input.starttorrent:hover, input.starttorrent:focus {
-     background: #767 url(images/next.png) no-repeat 6px center;
-     background: url(images/next.png) no-repeat 6px center, linear-gradient(to bottom, #767 0%, #989 100%);
+     background: #767 url(images/next.png);
+     background: url(images/next.png), linear-gradient(to bottom, #767 0%, #989 100%);
 }
 
 input.stoptorrent, input.stoptorrent:active {
-     background: #989 url(images/btn_stop.png) no-repeat 6px center;
-     background: url(images/btn_stop.png) no-repeat 6px center, linear-gradient(to bottom, #989 0%, #878 100%);
-     padding: 4px 6px 4px 22px !important;
+     background: #989 url(images/btn_stop.png);
+     background: url(images/btn_stop.png), linear-gradient(to bottom, #989 0%, #878 100%);
 }
 
 input.stoptorrent:hover, input.stoptorrent:focus {
-     background: #767 url(images/btn_stop.png) no-repeat 6px center;
-     background: url(images/btn_stop.png) no-repeat 6px center, linear-gradient(to bottom, #767 0%, #989 100%);
+     background: #767 url(images/btn_stop.png);
+     background: url(images/btn_stop.png), linear-gradient(to bottom, #767 0%, #989 100%);
 }
 
-.configsectionpanel tr:nth-last-child(2) td {
-     text-align: right !important;
-     border-top: 1px solid #57415F;
-     padding-top: 10px !important;
+/*
+a.control:active, input[type="submit"]:active, input[type="reset"]:active {
+     color: #ce1641 !important;
+     border: 1px solid #fff !important;
+     box-shadow: inset 3px 3px 3px #fff;
+}
+
+input[type=submit]:active, a.control:active {
+     background-blend-mode: soft-light;
+     color: #2e134c !important;
+     filter: drop-shadow(0 0 1px #f60) sepia(100%) invert(100%) !important;
+     mix-blend-mode: hard-light;
+}
+*/
+
+a.control:active, input[type="submit"]:active, input[type="reset"]:active {
+     background-color: #322c5c !important;
+     color: #c6bfff;
+     box-shadow: inset 3px 3px 3px #20122f;
+     border: 1px solid #101;
 }
 
 select {
      background: #212 !important;
-     background: #212 url(images/graytile.png) !important;
+     background: #212 url(images/dropdown.png) right center no-repeat !important;
      background: url(images/dropdown.png) right center no-repeat, url(images/graytile.png) #212 !important;
      background-size: 17px 17px, 96px 96px !important;
      color: #f60;
-     font: 8pt "DejaVu Sans", Verdana, Helvetica, sans-serif;
      font-weight: bold;
-     padding: 2px 18px 2px 1px;
+     padding: 2px 18px 2px 4px;
      border-radius: 2px;
      border: 1px solid #000;
      margin: 2px;
@@ -1570,7 +1528,7 @@ select:hover, select:focus, select:active  {
 
 select[disabled], select[disabled]:hover, select[disabled]:focus {
      opacity: 0.5;
-     background: #212 url(images/graytile.png) !important;
+     background: #212 url(images/dropdown.png) right center no-repeat !important;
      background: url(images/dropdown.png) right center no-repeat, url(images/graytile.png) #212 !important;
      background-blend-mode: normal;
      color: #f60 !important;
@@ -1620,17 +1578,17 @@ textarea {
      transition: ease box-shadow 0.15s 0s;
 }
 
+/* end buttons & inputs */
+
 img {
      border: none;
      margin: 0 3px 1px 3px;
      vertical-align: middle;
-     opacity: 1.0;
      line-height: 100%;
 }
 
 img:hover {
      border: none;
-     opacity: 1;
      line-height: 100%;
 }
 
@@ -1690,6 +1648,12 @@ img[src$="magnet.png"] {
      background-size: 84px 82px, 100% 100%;
 }
 
+.configsectionpanel tr:nth-last-child(2) td {
+     text-align: right !important;
+     border-top: 1px solid #57415f;
+     padding-top: 10px !important;
+}
+
 .configsectionpanel, .configsectionpanel td, .snarkNewTorrent, .snarkNewTorrent td, .snarkAddInfo,
 select, input, input.r, input[name="nofilter_dataDir"], textarea[name="i2cpOpts"], a.control {
      font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, sans-serif;
@@ -1749,30 +1713,6 @@ select, input, input.r, input[name="nofilter_dataDir"], textarea[name="i2cpOpts"
      margin-top: 1px;
 }
 
-.configsection table {
-     color: #ffb;
-     opacity: 1;
-}
-
-.configsection a, label.toggleview {
-     color: #f60;
-     text-shadow: 0 0 1px #000;
-}
-
-.configsection a:hover, .snarkConfig .snarkConfigTitle:hover a, .snarkConfig .snarkConfigTitle a:focus {
-     color: #d2baff;
-     text-decoration: none;
-}
-
-.snarkConfig .snarkConfigTitle:hover img, .snarkConfig .snarkConfigTitle:focus img, .snarkConfig .snarkConfigTitle a:focus img {
-     filter: drop-shadow(0 0 1px #d2baff);
-}
-
-.snarkConfig .snarkConfigTitle a {
-     display: inline-block;
-     width: 100%;
-}
-
 code {
      font-size: 8pt;
      color: #b8b;
@@ -1864,8 +1804,10 @@ input.trackerannounce {
 
 /* toggle create/add panel view */
 
-input.toggle_input { /* hide checkbox and use label as faux panel heading */
-     display: none !important;
+input.toggle_input {
+      position: absolute;
+      opacity: 0;
+      z-index: -1;
 }
 
 label.toggleview:hover {
@@ -1904,23 +1846,7 @@ input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent
      display: none;
 }
 
-label.toggleview, .snarkConfigTitle a:visited {
-     color: #f60;
-}
-
-label.toggleview:active, .snarkConfigTitle a:active {
-     color: #9183af !important;
-}
-
-label.toggleview img:hover, label.toggleview:hover img, .snarkConfigTitle a:hover img {
-     color: #f90;
-     filter: drop-shadow(0 0 1px #d2baff);
-}
-
-label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:active img {
-     transform: rotate(90deg);
-     transition: ease transform 0.3s 0s;
-}
+/* end toggle panels */
 
 .peerinfo td {
      border-bottom: 1px solid #414 !important;
@@ -1970,9 +1896,14 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac
 }
 
 .peerinfo:hover td:nth-child(2), .debuginfo:hover td:nth-child(2) {
-     color: #fff !important;
+     color: #ddd !important;
 }
 
+.debuginfo td {
+     color: #ddd !important;
+}
+
+/*
 .from, .to {
      font-family: sans-serif;
      font-size: 12pt;
@@ -1982,10 +1913,6 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac
      text-shadow: 0 0 1px #000;
 }
 
-.debuginfo td {
-     color: #fff !important;
-}
-
 .debugConnStat {
      display: inline-block;
      white-space: nowrap;
@@ -1999,9 +1926,10 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac
 .debugConnStat b {
      color: #ffdfff !important;
 }
+*/
 
 .peerinfo:hover b, .debuginfo:hover b {
-     color: #fff !important;
+     color: #ddd !important;
      color: #b9b;
 }
 
@@ -2074,14 +2002,16 @@ hr.debug + hr {
 #dhtDebugPanel label {
      padding: 8px 4px 4px !important;
      display: block;
-     margin: 0 0 -13px !important;
+     margin: 0 0 -12px !important;
      border-radius: 0 0 4px 4px;
      background: #202;
+     box-shadow: none;
 }
 
 input#toggle_debug:not(checked) + label {
      border-radius: 0;
      background: #101;
+     background: linear-gradient(to bottom, #212 50%, #101 50%);
      text-align: center;
 }
 
@@ -2089,8 +2019,16 @@ input#toggle_debug:not(checked) + label {
      text-align: left;
      padding: 3px 10px 5px;
      background: #000;
-     margin: -33px 0 -12px;
+     margin: -32px -1px -13px;
      border-radius: 0 0 4px 4px;
+     border-left: 1px solid #414;
+     border-right: 1px solid #414;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+#dhtDebugInner {
+     margin-top: -33px;
+}
 }
 
 .dhtDebug th b:first-of-type, .dhtDebug th b:first-of-type + br + hr.debug {
@@ -2161,6 +2099,7 @@ input#toggle_debug:checked + label + #dhtDebugInner {
      display: inline-block;
      margin: 2px 0 2px 6px;
      font-weight: bold;
+     vertical-align: middle;
 }
 
 .priority::after {
@@ -2386,10 +2325,6 @@ input#toggle_debug:checked + label + #dhtDebugInner {
      padding-right: 2px;
 }
 
-.snarkCommentInfo td:last-child, .snarkComments td:last-child {
-/*     width: 1% !important;*/
-}
-
 .snarkComments td {
      white-space: nowrap;
 }
@@ -2635,7 +2570,7 @@ b.alwaysShow {
      display: inline;
 }
 
-.snarkTorrents td:nth-child(2), .snarkTorrents td:nth-child(2) a {
+td.snarkTorrentStatus, td.snarkTorrentStatus a {
      font-weight: bold;
 }
 
@@ -2734,6 +2669,11 @@ _:-ms-lang(x), .snarkNav:link, .snarkNav:visited {
      background-size: 15px auto, 100% 100% !important;
 }
 
+img[src="/themes/snark/ubergine/images/details.png"] {
+     width: 14px;
+     height: 14px;
+}
+
 .peerinfo .percentBarOuter {
      filter: sepia(1);
      height: 14px;
@@ -2758,6 +2698,10 @@ _:-ms-lang(x), .snarkNav:link, .snarkNav:visited {
      font-size: 8pt !important;
 }
 
+.peerinfo .percentBarOuter {
+     margin-right: -4px !important;
+}
+
 .mainsection td {
      padding-top: 3px !important;
      padding-bottom: 3px !important;
@@ -2796,6 +2740,14 @@ _:-ms-lang(x), .snarknavbar {
      display: inline-block;
      box-shadow: 0 0 0 1px #101;
 }
+
+#totals {
+     word-spacing: 0.15em !important;
+}
+
+#dhtdebugInner {
+     margin-top: -33px;
+}
 }
 
 @media screen and (min-width: 1400px) {
@@ -2803,11 +2755,16 @@ th, td, .choked, .unchoked {
      letter-spacing: 0 !important;
 }
 
-body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, .snarkFileStatus, .snarkCommentInfo textarea {
+body, .snarkAddInfo, th, td, .snarkCommentInfo textarea, input[type="submit"], input[type="reset"],
+select, select option, button, a.control, .snarkTorrents a:link {
      font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
      font-size: 10pt !important;
 }
 
+code {
+     font-size: 10pt !important;
+}
+
 .debuginfo td {
      font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace !important;
 }
@@ -2826,23 +2783,15 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, .snarkFileStatus
 
 .snarkNav:link:first-child, .snarkNav:last-child[href="/i2psnark/"] {
      background-position: 11px 45%, center center !important;
-}
 
-input[type="submit"], input[type="reset"], select, select option, button, a.control, .snarkTorrents a:link, td, th, code {
-     font-size: 10pt !important;
 }
-
-.snarkConfigTitle, label.toggleview {
-     font-size: 13pt !important;
-     min-width: 240px !important;
-}
-
 .snarkNav:link {
      font-size: 11pt;
 }
 
 .snarkConfigTitle, label.toggleview {
-     font-size: 12pt;
+     font-size: 13pt !important;
+     min-width: 320px !important;
 }
 
 .mainsection td {
@@ -2923,6 +2872,7 @@ select {
 
 .debuginfo td {
      font-size: 9pt !important;
+     line-height: 120%;
 }
 
 #pagenav img {
@@ -2946,6 +2896,10 @@ select {
 .debugConnStat {
      margin-right: 5px;
 }
+
+#dhtdebugInner {
+     margin-top: -34px;
+}
 }
 
 @media screen and (min-width: 1600px) {
@@ -2984,15 +2938,15 @@ th.snarkTorrentStatus a img, .snarkTorrentETA a img, .snarkTrackerDetails a img,
      max-width: 18px;
 }
 
+.snarkTorrentName a:not(old) {
+     max-width: 360px !important;
+}
+
 .snarkTorrents th img {
      max-height: 18px;
 }
 
-.snarkTorrentUploaded, .snarkTorrentRateUp {
-     display: none;
-}
-
-.alwaysShow {
+.snarkTorrentUploaded, .snarkTorrentRateUp, .peerinfo, .debuginfo, .alwaysShow {
      display: none !important;
 }
 
@@ -3001,17 +2955,23 @@ th.snarkTorrentStatus a img, .snarkTorrentETA a img, .snarkTrackerDetails a img,
 }
 
 .snarkTorrentStatus, .snarkTorrentETA, .snarkTrackerDetails {
-     font-size: 0;
+     font-size: 0 !important;
      max-width: 0 !important;
      min-width: 0 !important;
      width: 0 !important;
      padding: 0;
+     overflow: hidden;
+     color: transparent !important;
 }
 
 #totals {
      margin-left: 2px !important;
 }
 
+.addtorrentsection td:first-child, .newtorrentsection td:first-child {
+     width: 20%;
+}
+
 .toggleview, .snarkConfigTitle, .snarkConfigTitle a {
      font-size: 10pt !important;
 }
@@ -3097,7 +3057,7 @@ th a img {
 }
 
 .addtorrentsection input[type="text"], .newtorrentsection input[type="text"] {
-     width: 60% !important;
+     width: 65% !important;
 }
 
 .snarkCommentInfo td:first-child, .snarkComments td:first-child {
@@ -3114,6 +3074,22 @@ th a img {
      background: none !important;
      padding-left: 0 !important;
 }
+
+#dhtDebugInner {
+     margin-top: -28px !important;
+}
+
+.snarkTorrentStatus {
+     -moz-user-select: none !important;
+     -webkit-user-select: none;
+     user-select: none;
+}
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 800px) {
+#dhtDebugInner {
+     margin-top: -29px !important;
+}
 }
 
 /* end mini-mode */
diff --git a/installer/resources/themes/snark/vanilla/snark.css b/installer/resources/themes/snark/vanilla/snark.css
index c40a6be2a..a32cf645c 100644
--- a/installer/resources/themes/snark/vanilla/snark.css
+++ b/installer/resources/themes/snark/vanilla/snark.css
@@ -1,10 +1,6 @@
 /* I2PSnark theme "Vanilla" by dr|z3d */
 /* Now with 100% more chocolate */
 
-html {
-     min-height: 100%;
-}
-
 body {
      background: #2f231a;
      background: repeating-linear-gradient(to bottom, #9f948b 1px, #6f5b4c 1px, #bfa285 3px);
@@ -44,8 +40,22 @@ body.iframed:not(old) {
      outline: none;
 }
 
-td *:focus {
-     filter: drop-shadow(0 0 1px #df0067);
+form {
+     margin-bottom: 0;
+}
+
+p {
+     line-height: 150%;
+}
+
+hr {
+     color: #6f533e;
+     background:#6f533e;
+     height: 1px;
+     border: none;
+     width: 0%;
+     margin: 5px 0 7px 0;
+     text-align: center;
 }
 
 ::selection {
@@ -155,6 +165,8 @@ th a:active, th a:visited:active, td a:active, td a:visited:active {
      font-size: 10pt;
      color: #3f271b;
      background-size: 17px auto, 100% 100%, 100% 100% !important;
+     background-position: 12px center, center center, center center !important;
+     background-repeat: no-repeat !important;
      border-radius: 0;
      border: 1px solid #efe6e0;
      text-shadow: 0 0 1px #fff5ef;
@@ -186,54 +198,52 @@ _:-ms-lang(x), .snarkNav:link, .snarkNav:visited {
 }
 
 .nav_main:link {
-     background: #fff7ef url(images/button_snark.png) 11px center no-repeat;
-     background: url(images/button_snark.png) 11px center no-repeat, linear-gradient(to bottom, #fff7ef 47%, rgba(207, 193, 181, 0.6) 50%), repeating-linear-gradient(45deg, #75604e 1px, #a09286 1px, #bfafa2 2px);
+     background: #fff7ef url(images/button_snark.png) 11px center no-repeat !important;
+     background: url(images/button_snark.png) 11px center no-repeat, linear-gradient(to bottom, #fff7ef 47%, rgba(207, 193, 181, 0.6) 50%), repeating-linear-gradient(45deg, #75604e 1px, #a09286 1px, #bfafa2 2px) !important;
      background-size: 18px auto, 100% 100%, 100% 100% !important;
 }
 
 .nav_forum:link {
-     background: #fff7ef url(images/button_forum.png) 12px center no-repeat;
-     background: url(images/button_forum.png) 12px center no-repeat, linear-gradient(to bottom, #fff7ef 47%, rgba(207, 193, 181, 0.6) 50%), repeating-linear-gradient(45deg, #75604e 1px, #a09286 1px, #bfafa2 2px);
+     background: #fff7ef url(images/button_forum.png);
+     background: url(images/button_forum.png), linear-gradient(to bottom, #fff7ef 47%, rgba(207, 193, 181, 0.6) 50%), repeating-linear-gradient(45deg, #75604e 1px, #a09286 1px, #bfafa2 2px);
 }
 
 .nav_tracker:link {
-     background: #fff7ef url(images/button_tracker.png) 12px center no-repeat;
-     background: url(images/button_tracker.png) 12px center no-repeat, linear-gradient(to bottom, #fff7ef 47%, rgba(207, 193, 181, 0.6) 50%), repeating-linear-gradient(135deg, #75604e 1px, #a09286 1px, #bfafa2 2px);
+     background: #fff7ef url(images/button_tracker.png);
+     background: url(images/button_tracker.png), linear-gradient(to bottom, #fff7ef 47%, rgba(207, 193, 181, 0.6) 50%), repeating-linear-gradient(135deg, #75604e 1px, #a09286 1px, #bfafa2 2px);
+     background-size: 18px auto, 100% 100%, 100% 100% !important;
 }
 
 .nav_main:hover, .nav_main:focus {
-     background: #ffeadf url(images/button_snark_hover.png) 11px center no-repeat;
-     background: url(images/button_snark_hover.png) 11px center no-repeat, linear-gradient(to bottom, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%);
+     background: #ffeadf url(images/button_snark_hover.png) 11px center no-repeat !important;
+     background: url(images/button_snark_hover.png) 11px center no-repeat, linear-gradient(to bottom, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%) !important;
+     background-size: 18px auto, 100% 100%, 100% 100% !important;
 }
 
 .nav_forum:hover, .nav_forum:focus {
-     background: #ffeadf url(images/button_forum_hover.png) 12px center no-repeat;
-     background: url(images/button_forum_hover.png) 12px center no-repeat, linear-gradient(to bottom, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%);
-     background-size: 17px auto, 100% 100%, 100% 100%;
+     background: #ffeadf url(images/button_forum_hover.png);
+     background: url(images/button_forum_hover.png), linear-gradient(to bottom, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%);
 }
 
 .nav_tracker:hover, .nav_tracker:focus {
-     background: #ffeadf url(images/button_tracker_hover.png) 12px center no-repeat;
-     background: url(images/button_tracker_hover.png) 12px center no-repeat, linear-gradient(to bottom, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%);
-     background-size: 17px auto, 100% 100%, 100% 100%;
+     background: #ffeadf url(images/button_tracker_hover.png);
+     background: url(images/button_tracker_hover.png), linear-gradient(to bottom, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%);
 }
 
 .nav_main:active {
-     background: #dfb899 url(images/button_snark_active.png) 11px center no-repeat;
-     background: url(images/button_snark_active.png) 11px center no-repeat, linear-gradient(to bottom, #dfb899 47%, #af9178 50%, #af9178 100%);
-     background-size: 18px auto, 100% 100%, 100% 100%;
+     background: #dfb899 url(images/button_snark_active.png) 11px center no-repeat !important;
+     background: url(images/button_snark_active.png) 11px center no-repeat, linear-gradient(to bottom, #dfb899 47%, #af9178 50%, #af9178 100%) !important;
+     background-size: 18px auto, 100% 100%, 100% 100% !important;
 }
 
 .nav_forum:active {
-     background: #dfb899 url(images/button_forum_active.png) 12px;
-     background: url(images/button_forum_active.png) 12px center no-repeat, linear-gradient(to bottom, #dfb899 47%, #af9178 50%, #af9178 100%);
-     background-size: 17px auto, 100% 100%, 100% 100%;
+     background: #dfb899 url(images/button_forum_active.png);
+     background: url(images/button_forum_active.png), linear-gradient(to bottom, #dfb899 47%, #af9178 50%, #af9178 100%);
 }
 
 .nav_tracker:active {
-     background: #dfb899 url(images/button_tracker_active.png) 12px center no-repeat;
-     background: url(images/button_tracker_active.png) 12px center no-repeat, linear-gradient(to bottom, #dfb899 47%, #af9178 50%, #af9178 100%);
-     background-size: 17px auto, 100% 100%, 100% 100%;
+     background: #dfb899 url(images/button_tracker_active.png);
+     background: url(images/button_tracker_active.png), linear-gradient(to bottom, #dfb899 47%, #af9178 50%, #af9178 100%);
 }
 
 .snarkNav:last-child {
@@ -267,7 +277,6 @@ _:-ms-lang(x), .snarkNav:link, .snarkNav:visited {
      text-align: left;
      margin: 0 0 10px;
      padding: 0 3px;
-     border-spacing: 0;
      border: 1px solid #6f533e;
      border-radius: 2px;
      box-shadow: inset 0 0 6px 0 #3f2307;
@@ -285,7 +294,6 @@ _:-ms-lang(x), .snarkNav:link, .snarkNav:visited {
 }
 
 .snarkMessages:focus {
-     box-shadow: inset 0 0 6px 0 #3f2307, 0 0 1px #f60;
      box-shadow: inset 0 0 6px 0 #3f2307, 0 0 1px #df0067;
      filter: drop-shadow(0 0 2px rgba(200, 80, 0, 0.3));
 }
@@ -330,12 +338,6 @@ _:-ms-lang(x), .snarkNav:link, .snarkNav:visited {
      color: #f30 !important;
 }
 
-.snarkMessages p {
-     font-style: italic;
-     margin: 0;
-     text-align: right;
-}
-
 .snarkMessages img {
      float: right;
      margin: -1px -3px 4px 4px;
@@ -396,16 +398,6 @@ _:-ms-lang(x), .snarkNav:link, .snarkNav:visited {
 
 /* end pagenav */
 
-pre {
-     width: 100%;
-     font: 8pt "DejaVu Sans Mono", "Droid Sans Mono", "Lucida Console", monospace !important;
-     padding: 0;
-     text-align: left !important;
-     height: 8px;
-     color: #731;
-     font-weight: bold !important;
-}
-
 table {
      margin: 0 0 10px 0;
      border: 1px solid #6f533e;
@@ -476,11 +468,6 @@ tfoot tr:first-child th {
      color: #2f1500 !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;
-}
-
 .headerstatus {
      text-align: left;
 }
@@ -521,15 +508,6 @@ tfoot img, tfoot:nth-child(2) img, tfoot:nth-child(1) img, tfoot:nth-child(3) im
      border-bottom: 1px solid #6f533e;
 }
 
-.snarkTorrents thead th > * {
-     vertical-align: middle !important;
-}
-
-.snarkTorrents thead th:nth-child(2) {
-     text-align: left;
-     min-width: 50px;
-}
-
 .snarkTorrents tfoot th {
      border-bottom: none !important;
      white-space: normal !important;
@@ -619,10 +597,6 @@ th.snarkTorrentStatus {
      padding: 0 3px !important;
 }
 
-.snarkTorrentDetails {
-     font-weight: bold;
-}
-
 .snarkTorrentETA, .snarkTorrentUploaded, .snarkTorrentRateDown, .snarkTorrentRateUp {
      width: 5%;
      min-width: 40px;
@@ -699,7 +673,6 @@ th.snarkTorrentStatus {
 }
 
 .snarkTorrents tt {
-     background: #313;
      background: #7F654F;
      color: #fff;
      padding: 2px 3px;
@@ -889,11 +862,10 @@ _:-ms-lang(x), .snarkTorrents tbody tr:hover, .snarkDirInfo tbody tr:hover {
 
 #torrentInfoControl {
      border-top: 1px solid #6f533e;
-     background: linear-gradient(to bottom, #efefef, #cfc7c2);
 }
 
 #torrentInfoControl td {
-     border-bottom: none !important;;
+     border-bottom: none !important;
      background: linear-gradient(to bottom, #efefef, #cfc7c2);
      text-align: right !important;
      padding-right: 8px !important;
@@ -1164,32 +1136,41 @@ thead img.disable, img.disable:hover {
      text-transform: capitalize;
 }
 
-.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active {
-     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif;
-     font-size: 11pt !important;
-     font-weight: bold;
+/* panel titles */
+
+.snarkConfigTitle, .toggleview, .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active {
+     font: bold 11pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif;
      font-variant: small-caps !important;
-     padding: 4px 15px 2px 12px;
+     padding: 4px 1px 2px;
      margin: 0 0 -3px !important;
      letter-spacing: 0.1em;
      border: 1px solid #111;
      border-top: 0;
      background: #fff7ef;
      background: linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, rgba(207, 193, 181, 0.6) 52%), repeating-linear-gradient(135deg, #75604e 1px, #a09286 1px, #bfafa2 2px);
-     color: #444039;
+     color: #444039 !important;
      box-shadow: 0 0 2px #4d453e, inset 0 0 0 1px #efe6e0;
      display: inline-block;
-     min-width: 220px;
+     min-width: 280px;
      vertical-align: middle;
      text-shadow: 0 0 1px #fff5ef;
 }
 
-.snarkConfigTitle:hover, label.toggleview:hover {
+.snarkConfigTitle:hover, .toggleview:hover, input.toggle_input:focus + .toggleview {
      background: #ffeadf;
      background: linear-gradient(to bottom, #ffeadf 0%, #ffeadf 51%, #cfb6a8 52%, #cfb6a8 100%);
+     color: #930 !important;
 }
 
-.snarkConfigTitle:active, label.toggleview:active {
+input.toggle_input:focus + .toggleview img, .snarkConfigTitle a:focus {
+     mix-blend-mode: normal;
+}
+
+.snarkConfigTitle a:focus img {
+     filter: drop-shadow(0px 0 1px #7f6c5f);
+}
+
+.snarkConfigTitle:active, .toggleview:active {
      box-shadow:  0 0 2px #4d453e, inset 0 0 0 1px #fff, inset 2px 2px 3px 1px #59513b;
 }
 
@@ -1226,68 +1207,54 @@ thead img.disable, img.disable:hover {
 }
 
 @media screen and (-webkit-min-device-pixel-ratio:0) {
-.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .snarkConfigTitle a, .snarkConfigTitle a:hover,
+.snarkConfigTitle, .toggleview, .configsectionpanel .snarkConfigTitle, .snarkConfigTitle a, .snarkConfigTitle a:hover,
 .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active {
      font-size: 12pt !important;
 }
 }
 
 /* MS Edge fix */
-_:-ms-lang(x), .snarkConfigTitle, .snarkConfigTitle a, label.toggleview,
+_:-ms-lang(x), .snarkConfigTitle, .snarkConfigTitle a, .toggleview,
 .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
      padding: 3px 15px 4px;
      font-size: 12pt !important;
 }
 
-.snarkConfigTitle a, label.toggleview {
-     color: #930 !important;
-     color: #3F271B !important;
+.snarkConfigTitle a {
+     display: inline-block;
+     width: 100%;
+}
+
+.snarkConfigTitle a, .toggleview {
+     color: #3f271b !important;
      text-shadow: 0 0 1px #fff5ef;
 }
 
-.snarkConfigTitle a:hover, label.toggleview:hover, .snarkConfigTitle a:focus, label.toggleview:focus {
-     color: #df0072 !important;
+.snarkConfigTitle a:hover, .toggleview:hover, .snarkConfigTitle a:focus, .toggleview:focus {
      color: #930 !important;
 }
 
-
-.snarkConfigTitle a:active, .snarkConfigTitle a:visited:active, label.toggleview:active {
+.snarkConfigTitle a:active, .snarkConfigTitle a:visited:active, .toggleview:active {
      color: #603110 !important;
 }
 
-.snarkConfigTitle img, label.toggleview img {
+.snarkConfigTitle img, .toggleview img {
      margin: 1px -2px 3px 0;
      filter: drop-shadow(0 0 1px #7f6c5f) !important;
      mix-blend-mode: luminosity;
 }
 
-.snarkConfigTitle:hover img, label.toggleview:hover img, .snarkConfigTitle:focus img, label.toggleview:focus img {
+.snarkConfigTitle:hover img, .toggleview:hover img, .snarkConfigTitle:focus img, .toggleview:focus img {
      mix-blend-mode: normal;
 }
 
+/* end panel titles */
+
 .snarkConfig {
      font-size: 8pt;
      width: 100%;
 }
 
-form {
-     margin-bottom: 0;
-}
-
-p {
-     line-height: 150%;
-}
-
-hr {
-     color: #6f533e;
-     background:#6f533e;
-     height: 1px;
-     border: none;
-     width: 0%;
-     margin: 5px 0 7px 0;
-     text-align: center;
-}
-
 /* buttons & inputs */
 
 .script {
@@ -1839,8 +1806,10 @@ code, tt {
 
 /* toggle create/add panel view */
 
-.toggle_input { /* hide checkbox and use label as faux panel heading */
-     display: none !important;
+input.toggle_input { /* hide checkbox and use label as faux panel heading */
+      position: absolute;
+      opacity: 0;
+      z-index: -1;
 }
 
 .toggleview:hover {
@@ -1912,6 +1881,8 @@ code, tt {
      font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
 }
 
+/*
+
 .from, .to {
      font-family: sans-serif;
      font-size: 12pt;
@@ -1948,6 +1919,8 @@ code, tt {
      margin: 2px 3px !important;
 }
 
+*/
+
 .dhtDebug th {
      padding: 0 10px 10px;
      background: #fff;
@@ -2255,7 +2228,6 @@ td#bwHelp a {
      border: 1px solid #6f533e;
      border-top: none;
      border-bottom: none;
-/*     box-shadow: 0 0 2px 1px rgba(77, 69, 62, 0.3);*/
      border-collapse: separate;
 }
 
@@ -2388,6 +2360,10 @@ td#bwHelp a {
      padding-left: 20px;
 }
 
+.commentAuthorName:empty {
+     display: none;
+}
+
 .commentText {
      white-space: normal;
      text-align: justify;
@@ -2528,9 +2504,8 @@ b.alwaysShow {
      display: inline;
 }
 
-.lowersection .snarkConfigTitle, .lowersection .snarkConfigTitle:hover,  label.toggleview, .snarkConfigTitle a {
+.lowersection .snarkConfigTitle, .lowersection .snarkConfigTitle:hover,  .toggleview, .snarkConfigTitle a {
      font-size: 11pt !important;
-     max-width: 220px !important
 }
 
 .configsectionpanel .snarkConfigTitle {
@@ -2541,9 +2516,11 @@ td.snarkGraphicStatus img {
      max-height: 16px;
 }
 
+/*
 .from, .to {
      font-size: 11pt !important;
 }
+*/
 
 .snarkTorrentOdd td, .snarkTorrentEven td {
      padding-top: 3px;
@@ -2613,7 +2590,7 @@ td.snarkGraphicStatus img {
 }
 
 @media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 1000px) {
-.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .snarkConfigTitle a, .snarkConfigTitle a:hover,
+.snarkConfigTitle, .toggleview, .configsectionpanel .snarkConfigTitle, .snarkConfigTitle a, .snarkConfigTitle a:hover,
 .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active {
      font-size: 12pt !important;
      letter-spacing: 0.1em !important;
@@ -2684,7 +2661,7 @@ _:-ms-lang(x), .snarkNav:link, .snarkNav:visited {
 }
 
 @media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 1200px) {
-.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .snarkConfigTitle a, .snarkConfigTitle a:hover,
+.snarkConfigTitle, .toggleview, .configsectionpanel .snarkConfigTitle, .snarkConfigTitle a, .snarkConfigTitle a:hover,
 .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active {
      font-size: 11pt !important;
      letter-spacing: 0.1em !important;
@@ -2695,7 +2672,6 @@ _:-ms-lang(x), .snarkNav:link, .snarkNav:visited {
 }
 }
 
-
 @media screen and (min-width: 1000px) {
 body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, a.control, input[type="submit"], input[type="reset"], select, button {
      font-size: 9pt !important;
@@ -2784,6 +2760,10 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, a.control, input
      padding-right: 10px !important;
 }
 
+#totals {
+     word-spacing: 0.15em;
+}
+
 thead a img, thead img {
      max-height: 21px;
 }
@@ -2802,7 +2782,7 @@ thead a img, thead img {
 }
 
 @media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1200px) {
-.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .snarkConfigTitle a, .snarkConfigTitle a:hover,
+.snarkConfigTitle, .toggleview, .configsectionpanel .snarkConfigTitle, .snarkConfigTitle a, .snarkConfigTitle a:hover,
 .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active {
      font-size: 13pt !important;
      letter-spacing: 0.1em !important;
@@ -2877,8 +2857,8 @@ thead a img, thead img {
 }
 
 .snarkConfigTitle, .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle,
-.configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active, label.toggleview {
-     min-width: 240px !important;
+.configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active, .toggleview {
+     min-width: 300px !important;
      font-size: 12pt !important;
 }
 
@@ -2924,7 +2904,7 @@ tr#torrentInfoStats td {
 }
 
 @media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1400px) {
-.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .snarkConfigTitle a, .snarkConfigTitle a:hover,
+.snarkConfigTitle, .toggleview, .configsectionpanel .snarkConfigTitle, .snarkConfigTitle a, .snarkConfigTitle a:hover,
 .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active {
      font-size: 14pt !important;
      letter-spacing: 0.1em !important;
@@ -2959,7 +2939,7 @@ th.snarkTorrentStatus a img, .snarkTorrentETA a img, .snarkTrackerDetails a img
      max-height: 18px;
 }
 
-.snarkTorrentUploaded, .snarkTorrentRateUp {
+.snarkTorrentUploaded, .snarkTorrentRateUp, .peerinfo, .debuginfo {
      display: none;
 }
 
@@ -3049,6 +3029,10 @@ th.snarkTorrentStatus a img, .snarkTorrentETA a img, .snarkTrackerDetails a img
      background: none !important;
      padding-left: 0 !important;
 }
+
+#dhtDebugInner {
+     margin-top: -24px !important;
+}
 }
 
 /* end mini-mode */