Changeset 3d535a22

Timestamp:

Jun 19, 2017 1:00:50 PM (4 years ago)

Author:

str4d <str4d@…>

Branches:

master

Children:

4aa4ff7

Parents:

36030ae1

Message:

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

Files:

• apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java (modified) (2 diffs)
• history.txt (modified) (1 diff)
• installer/resources/themes/snark/classic/snark.css (modified) (36 diffs)
• installer/resources/themes/snark/dark/snark.css (modified) (31 diffs)
• installer/resources/themes/snark/light/snark.css (modified) (23 diffs)
• installer/resources/themes/snark/midnight/snark.css (modified) (9 diffs)
• installer/resources/themes/snark/ubergine/images/details.png (modified) (previous)
• installer/resources/themes/snark/ubergine/snark.css (modified) (66 diffs)
• installer/resources/themes/snark/vanilla/snark.css (modified) (35 diffs)

apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java

@@ -1695 +1695 @@
 
         // 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);
@@ -2555 +2556 @@
             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("\">" +

history.txt

@@ -3 +3 @@
    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

installer/resources/themes/snark/classic/snark.css

@@ -48 +48 @@
 
 .page {
-     font-size: 9pt !important;
      line-height: 160% !important;
      min-width: 900px !important;
@@ -54 +53 @@
      padding: 10px;
      text-align: center;
-     opacity: 1;
-     color: #0c153d;
      border: 1px solid #89f;
      background: #eef;
@@ -305 +302 @@
 }
 
-.snarkTorrents th:nth-child(2) {
-     text-align: left;
+.snarkTorrents thead th:nth-child(2) {
+     text-align: center !important;
 }
 
@@ -348 +345 @@
 }
 
-
 .snarkTorrentETA, .snarkTorrentUploaded, .snarkTorrentRateDown, .snarkTorrentRateUp {
      width: 5%;
@@ -357 +353 @@
 .snarkTorrents th:empty + th:empty, .snarkTorrents td:empty + td:empty, .snarkTorrents th:last-child:empty, .snarkTorrents td:last-child:empty {
      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;
 }
 
@@ -375 +361 @@
      border-spacing: 0;
      border-collapse: collapse;
-     opacity: 1 !important;
      color: #323;
      border: 0;
 }
 
-tr {
-     opacity: 1;
-}
-
 thead, tfoot {
      background: #fff;
@@ -394 +375 @@
 tfoot tr:first-child th {
      vertical-align: middle !important;
-}
-
-tfoot tr:nth-child(n+1) {
-     text-align: left;
 }
 
@@ -432 +409 @@
 }
 
-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%;
@@ -491 +453 @@
 .snarkTorrents th br {
      display: none;
-     /* kill double height button display */
 }
 
@@ -544 +505 @@
 }
 
-.snarkTorrents td:nth-child(1) {
-     width: 24px !important;
-}
-
-.snarkTorrents td:nth-child(3) {
+.snarkGraphicStatus {
+     width: 1% !important;
+}
+
+td.snarkTrackerDetails {
      text-align: right !important;
 }
@@ -812 +773 @@
      font-size: 9pt;
      padding: 2px;
-     opacity: 1;
      color: #333 !important;
-}
-
-.mainsection td {
-     color: #111;
 }
 
@@ -848 +804 @@
 }
 
-.snarkTorrentAction img {
-     opacity: 1;
-}
-
 .snarkTorrentAction img:hover {
-     opacity: 1;
      box-shadow: 0 0 1px 1px #f90;
 }
@@ -891 +842 @@
 }
 
-.snarkTorrentstatus {
-     min-width: 0;
-}
-
 .snarkTorrentStatus {
      text-align: left !important;
@@ -1101 +1048 @@
 }
 
-.priorityIndicator {
-}
-
 /* end download bars */
 
@@ -1122 +1066 @@
      max-height: 64px;
      transition: ease all 0.3s;
-     margin: 0 0 0 -4px !important;
+     margin: -6px 0 -6px -4px !important;
      filter: none !important;
 }
@@ -1140 +1084 @@
 }
 
-.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);
 }
 
@@ -1153 +1102 @@
      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;
@@ -1181 +1130 @@
 }
 
-.configsectionpanel .snarkConfigTitle {
-     color: #444;
+.configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
+     color: #444 !important;
 }
 
@@ -1231 +1180 @@
      margin: 5px 0 7px 0;
      text-align: center;
-     color: #444;
-     border: 0 solid #444;
-     background: #444;
+     color: transparent;
+     background: transparent;
 }
 
@@ -1614 +1562 @@
 
 #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;
 }
 
@@ -1629 +1576 @@
 }
 
-div.newtorrentsection td:first-child,
-div.addtorrentsection td:first-child {
+.newtorrentsection td:first-child,
+.addtorrentsection td:first-child {
      font-weight: bold;
      padding-right: 5px;
@@ -1637 +1584 @@
 }
 
-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;
@@ -1694 +1641 @@
 }
 
-div.configsectionpanel td:first-child {
+.configsectionpanel td:first-child {
      font-weight: bold;
      padding-right: 10px !important;
@@ -1919 +1866 @@
 }
 
-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;
@@ -1967 +1914 @@
 
 input.toggle_input { /* hide checkbox and use label as faux panel heading */
-     display: none;
+      position: absolute;
+      opacity: 0;
+      z-index: -1;
 }
 
@@ -2046 +1995 @@
 }
 
+/*
 .debugConnection {
      color: #030;
@@ -2074 +2024 @@
 }
 
-.debuginfo td {
-     line-height: 120% !important;
-}
-
-.debuginfo b {
-     text-transform: capitalize;
-}
-
 .from, .to {
      font-family: sans-serif;
@@ -2090 +2032 @@
      text-shadow: 0 0 1px #fff;
 }
+*/
+
+.debuginfo td {
+     line-height: 120% !important;
+}
+
+.debuginfo b {
+     text-transform: capitalize;
+}
 
 /* debug panel */
@@ -2157 +2108 @@
      background: #89f;
      background: linear-gradient(to right, #89f 40%, #eef);
+     color: #efefff;
+     border: none;
 }
 
@@ -2170 +2123 @@
      height: 0;
      margin-bottom: -5px;
-     margin-top: -15px;
+     margin-top: -10px;
 }
 
@@ -2421 +2374 @@
 }
 
-.snarkCommentInfo td:last-child, .snarkComments td:last-child {
-/*     width: 1% !important;*/
-}
-
 .snarkComments td {
      white-space: nowrap;
@@ -2432 +2381 @@
      background: url(images/author.png) left center no-repeat;
      padding-left: 20px;
+}
+
+.commentAuthorName:empty {
+     display: none;
 }
 
@@ -2626 +2579 @@
 
 #dhtDebugInner {
-     margin-top: -24px !important;
+     margin-top: -25px !important;
 }
 }
@@ -2673 +2626 @@
      pointer-events: none; /* hide tooltip */
 }
+
+.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
+     min-width: 300px;
+}
 }
 
@@ -2693 +2650 @@
 }
 
-.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
-     min-width: 240px;
-}
-
 .snarkTorrentStatus b {
      margin-right: 3px;
@@ -2704 +2657 @@
      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 */
 

installer/resources/themes/snark/dark/snark.css

@@ -1 +1 @@
 /* I2PSnark theme "Camo" aka Dark */
 /* Author: dr|z3d */
+
+html {
+     height: 100%;
+}
 
 body {
@@ -6 +10 @@
      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,
@@ -21 +25 @@
      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;
 }
 
@@ -30 +34 @@
 
 /* preload top navigation mouseovers */
+
 body.iframed {
      background: url(/themes/console/images/transparent.gif),
@@ -50 +55 @@
      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;
 }
@@ -61 +66 @@
      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;
 }
 
@@ -92 +97 @@
      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;
@@ -362 +367 @@
 }
 
-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;
@@ -421 +417 @@
 }
 
-.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;
 }
@@ -1080 +1076 @@
 }
 
-.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;
@@ -1095 +1091 @@
      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;
 }
@@ -1109 +1105 @@
 }
 
-.snarkConfigTitle a, label.toggleview {
+.snarkConfigTitle a, .toggleview {
      text-shadow: 0 0 1px #000 !important;
 }
@@ -1118 +1114 @@
 }
 
-.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;
@@ -1137 +1133 @@
 }
 
-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;
@@ -1316 +1312 @@
 }
 
-.snarkTorrents thead th:last-child, .snarkTorrents td:last-child {
+.snarkTorrentAction {
      white-space: nowrap;
 }
@@ -1324 +1320 @@
 }
 
-.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;
@@ -1337 +1333 @@
 }
 
-.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;
@@ -1614 +1609 @@
 }
 
-table#trackerselect {
+#trackerselect {
      border: 1px solid #131;
      width: 100% !important;
@@ -1949 +1944 @@
 
 input.toggle_input { /* hide checkbox and use label as faux panel heading */
-     display: none !important;
-}
-
-label.toggleview:hover {
+      position: absolute;
+      opacity: 0;
+      z-index: -1;
+      height: 0 !important;
+      width: 0 !important;
+}
+
+.toggleview:hover, input.toggle_input:focus + .toggleview {
      color: #f60;
      cursor: pointer;
@@ -1988 +1987 @@
 }
 
-label.toggleview, .snarkConfigTitle a:visited {
+.toggleview, .snarkConfigTitle a:visited {
      color: #7c7;
 }
@@ -2027 +2026 @@
 }
 
+/*
 .debugConnection {
      font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
@@ -2058 +2058 @@
      color: #cc7;
 }
+*/
 
 .dhtdebug th {
@@ -2229 +2230 @@
 }
 
-.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;
 }
 
@@ -2358 +2362 @@
      border-radius: 1px;
      font-size: 14pt;
-     color: #69EF68;
+     color: #69ef68;
      line-height: 80%;
      font-family: sans-serif;
@@ -2407 +2411 @@
      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;
+}
 }
 
@@ -2668 +2678 @@
 
 @media screen and (max-width: 1200px) {
-.snarkConfigtitle, .snarkConfigTitle a, label.toggleview {
+.snarkConfigtitle, .snarkConfigTitle a, .toggleview {
      font-size: 11pt !important;
 }
@@ -2756 +2766 @@
 }
 
-.snarkConfigtitle, .snarkConfigTitle a, label.toggleview {
+.snarkConfigtitle, .snarkConfigTitle a, .toggleview {
      font-size: 12pt !important;
 }
@@ -2795 +2805 @@
 }
 
-.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;
 }
@@ -2826 +2836 @@
 }
 
-.snarkTorrents td:nth-child(3), .SnarkTorrents td:nth-child(4) {
-     width: 18px !important;
+.snarkTrackerDetails, .SnarkTorrentDetails {
+     width: 1% !important;
 }
 
@@ -2841 +2851 @@
      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;
 }
@@ -2882 +2890 @@
 }
 
+/* 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 */
 

installer/resources/themes/snark/light/snark.css

@@ -21 +21 @@
      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;
 }
 
@@ -48 +49 @@
 }
 
-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;
 }
@@ -345 +347 @@
 }
 
-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;
@@ -377 +370 @@
 
 #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;
 }
 
@@ -826 +819 @@
 }
 
-.snarkConfigTitle:hover, .toggleview:hover {
+.snarkConfigTitle:hover, .toggleview:hover, input.toggle_input:focus + .toggleview {
      background: linear-gradient(to bottom, #fcfaf7 50%, #ffe8bf 50%, #efd9b3 100%);
 }
@@ -832 +825 @@
 .snarkConfigTitle a {
      font-size: 11pt !important;
+     display: inline-block;
+     width: 100%;
 }
 
@@ -838 +833 @@
 }
 
-.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle:hover {
+.snarkConfigTitle, .toggleview, .configsectionpanel .snarkConfigTitle:hover {
      font-size: 11pt;
      font-weight: bold;
@@ -851 +846 @@
      box-shadow: 0 1px 2px #ddd;
      display: inline-block;
-     min-width: 220px;
+     min-width: 260px;
      color: #559 !important;
 }
@@ -860 +855 @@
 
 @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;
@@ -871 +866 @@
 }
 
-.snarkConfigTitle a:hover, .toggleview:hover {
+.snarkConfigTitle a:hover, .snarkConfigTitle a:focus, .toggleview:hover, input.toggle_input:focus + .toggleview {
      color: #f60 !important;
      cursor: pointer;
@@ -886 +881 @@
 }
 
-.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;
 }
 
@@ -1489 +1484 @@
 
 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;
 }
 
@@ -1605 +1604 @@
      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;
 }
 
@@ -1643 +1642 @@
      height: 2px;
      border-bottom: 1px solid #fff;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+hr.debug {
+     height: 1px;
+}
 }
 
@@ -1659 +1664 @@
 hr.debug:last-child {
      background: transparent;
-     margin-bottom: -4px;
+     border: none;
+     height: 0;
+     margin-bottom: -8px;
 }
 
@@ -2145 +2152 @@
 }
 
-.snarkConfigTitle a, .snarkConfigTitle, label.toggleview {
+.snarkConfigTitle a, .snarkConfigTitle, .toggleview {
      font-size: 10pt !important;
 }
@@ -2185 +2192 @@
 
 @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;
 }
@@ -2208 +2215 @@
 }
 
-@media screen and (max-width: 1400px) {
+@media screen and (min-width: 1000px) {
 #dhtDebugInner {
-    margin-top: -22px !important;
+    margin-top: -21px !important;
 }
 }
@@ -2268 +2275 @@
 }
 
-.snarkConfigTitle, .snarkConfigTitle a, label.toggleview {
+.snarkConfigTitle, .snarkConfigTitle a, .toggleview {
      font-size: 12pt !important;
 }
@@ -2280 +2287 @@
 }
 
-.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;
 }
 
@@ -2297 +2305 @@
 }
 
-.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
-     min-width: 240px;
+#dhtDebugInner {
+    margin-top: -25px !important;
 }
 
@@ -2307 +2315 @@
      padding-bottom: 4px !important;
 }
-
+/*
 .debugConnection {
      background: #337;
@@ -2318 +2326 @@
      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;
 }
 }

installer/resources/themes/snark/midnight/snark.css

@@ -1099 +1099 @@
 }
 
-.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;
@@ -1116 +1116 @@
 }
 
-.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;
@@ -1180 +1180 @@
 }
 
-.snarkConfigTitle img, label.toggleview img {
+.snarkConfigTitle img, .toggleview img {
      margin-right: -2px;
      margin-top: -1px;
@@ -1948 +1948 @@
 
 input.toggle_input {
-     display: none;
-}
-
-label.toggleview:hover {
+      position: absolute;
+      opacity: 0;
+      z-index: -1;
+      height: 0 !important;
+      width: 0 !important;
+}
+
+.toggleview:hover, .toggleview:hover, input.toggle_input:focus + .toggleview, .snarkConfigTitle a:focus, .snarkConfigTitle a:visited:focus {
      cursor: pointer;
+     color: #652787 !important;
 }
 
@@ -1992 +1997 @@
 }
 
-label.toggleview, .snarkConfigTitle a, .snarkConfigTitle a:visited {
+.toggleview, .snarkConfigTitle a, .snarkConfigTitle a:visited {
      color: #7972d1 !important;
 }
@@ -2560 +2565 @@
 }
 
-.snarkTorrentStatus, .snarkTorrentUploaded, .snarkTorrentRateUp, tfoot .snarkTorrentAction {
+.snarkTorrentStatus, .snarkTorrentUploaded, .snarkTorrentRateUp, tfoot .snarkTorrentAction, .peerinfo, .debuginfo {
      display: none;
 }
@@ -2716 +2721 @@
 }
 
-.snarkConfigTitle, .snarkConfigTitle a, label.toggleview, .snarkNav:link {
+.snarkConfigTitle, .snarkConfigTitle a, .toggleview, .snarkNav:link {
      font-size: 11pt !important;
 }
@@ -2746 +2751 @@
 }
 
-.snarkConfigTitle, .toggleview {
-     padding: 4px 25px 4px 22px;
-}
-
-.snarkConfigTitle, .snarkConfigTitle a, label.toggleview {
+.snarkConfigTitle, .snarkConfigTitle a, .toggleview {
      font-size: 12.5pt !important;
 }
@@ -2763 +2764 @@
 }
 
-.snarkConfigTitle, label.toggleview {
-     min-width: 240px !important;
+.snarkConfigTitle, .toggleview {
+     min-width: 300px !important;
 }
 

installer/resources/themes/snark/ubergine/snark.css

@@ -3 +3 @@
 /* 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;
 }
@@ -17 +12 @@
 
 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,
@@ -25 +19 @@
      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;
 }
@@ -46 +40 @@
 .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);
 }
@@ -65 +54 @@
      box-shadow: none;
      padding: 0 0;
-     filter: none;
 }
 
@@ -93 +81 @@
      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%;
@@ -121 +106 @@
 
 .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;
@@ -141 +127 @@
 }
 
-/* Arabic fix */
-.snarkNav {
-     display: inline-block;
-     margin: -5px -4px -5px 0;
-}
-
 _:-ms-lang(x), .snarkNav:link, .snarkNav:visited {
      padding-top: 1px !important;
@@ -178 +158 @@
      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;
 }
 
@@ -215 +195 @@
      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%;
 }
 
@@ -221 +200 @@
      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;
 }
@@ -227 +205 @@
 .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;
 }
@@ -259 +236 @@
      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));
 }
 
@@ -336 +312 @@
 /* end screenlogger */
 
+/*
 pre {
      width: 100%;
@@ -343 +320 @@
      height: 8px;
      color: #35f;
-     font-weight: bold !important; 
-}
+     font-weight: bold !important;
+}
+*/
 
 table {
@@ -360 +338 @@
 }
 
-thead, .snarkTorrentInfo th {
+thead th, .snarkTorrentInfo th {
      background: linear-gradient(to bottom, #202 0%, #101 100%);
      border-top: 1px solid #101 !important;
@@ -385 +363 @@
 }
 
-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;
@@ -407 +368 @@
 
 .ParentDir {
-     background: #656;
      background: #351933;
      border: 1px solid #101 !important;
@@ -448 +408 @@
      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);
 }
 
@@ -462 +422 @@
 }
 
+.snarkTorrents tr:first-child td {
+     padding-top: 3px !important;
+}
+
 .snarkTorrents thead th {
      border-top: 1px solid transparent !important;
@@ -467 +431 @@
 
 .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);
-}
-
-.snarkTorrents thead th:nth-child(-n+3) {
-     max-width: 45px;
+     vertical-align: middle;
+}
+
+.snarkTorrents thead th:nth-child(2) img {
+     margin-bottom: 3px;
 }
 
@@ -537 +501 @@
      color: #dd7 !important;
      line-height: 120%;
+     text-align: center !important;
 }
 
@@ -565 +530 @@
 .snarkTorrentAction img {
      margin: 0 2px !important;
-     opacity: 0.6;
 }
 
 .snarkTorrentAction img:hover {
      box-shadow: 0 0 1px 1px #f90;
-     opacity: 1;
 }
 
@@ -588 +551 @@
      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;
@@ -642 +584 @@
      padding: 2px 4px;
      color: #ddd !important;
-     opacity: 1;
      font-size: 8pt;
 }
@@ -652 +593 @@
 td:first-child {
      text-align: right;
-     font-size: 8pt;
-}
-
-img[src$="details.png"] {
-     mix-blend-mode: luminosity;
-}
-
-a img[src$="details.png"]:hover, a:focus img[src$="details.png"] {
-     mix-blend-mode: initial !important;
+}
+
+.snarkTrackerDetails img {
+     width: 16px;
+     height: 16px;
+     opacity: 0.75;
+}
+
+.snarkTrackerDetails a img:hover, .snarkTrackerDetails a img:focus {
+     opacity: 1;
 }
 
 .snarkTorrentOdd {
      background: #351933;
-     font-size: 8pt;
 }
 
 .snarkTorrentEven {
-     font-size: 8pt;
      background: #270027;
 }
@@ -695 +635 @@
 }
 
-.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;
 }
 
@@ -717 +647 @@
 tr:hover .percentBarText {
      opacity: 1;
-     text-shadow: 0 1px 1px rgba(0,0,0,0.8);
+     text-shadow: 0 1px 1px #313;
 }
 
@@ -723 +653 @@
 _:-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;
 }
 
@@ -779 +705 @@
 }
 
-.snarkTorrentInfo img:nth-child(n+2) {
-     margin-left: 8px !important;
-}
-
 .snarkTorrentInfo th {
      text-align: left;
@@ -893 +815 @@
 .snarkTorrentDownloaded {
      text-align: right !important;
-     width: 110px;
-     max-width: 110px;
+     width: 108px;
+     max-width: 108px;
      color: #76a !important;
      white-space: nowrap;
@@ -919 +841 @@
 }
 
-.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;
 }
 
@@ -959 +878 @@
 }
 
-.peerinfo .percentBarOuter {
-     float: right;
+.peerinfo .snarkTorrentDownloaded {
+     text-align: right !important;
 }
 
@@ -990 +909 @@
 
 .unchoked {
-     color: #00f000 !important;
      color: #34CF19 !important;
 }
@@ -1024 +942 @@
 }
 
-table#trackerselect {
+#trackerselect {
      width: 100% !important;
 }
@@ -1061 +979 @@
 }
 
-.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;
@@ -1151 +1021 @@
 a:active, a:visited:active {
      color: #f10;
+}
+
+#configs input[type="submit"], .trackerconfig input[type="submit"], input[name="savepri"] {
+     text-transform: capitalize;
+}
+
+#setPriority {
+     border-top: 1px solid #000;
+}
+
+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;
+}
+
+input {
+     font-size: 8.5pt;
+     font-weight: bold;
+     text-align: left;
+     padding: 3px 3px !important;
+     border-radius: 2px;
+     border: 1px solid #101;
+     background: #212 url(images/graytile.png);
+     color: #f60;
+     margin: 2px 4px;
+}
+
+input.r {
+     text-align: right;
+     background: url(images/graytile.png);
+}
+
+input[type=image], thead img {
+     padding: 0 !important;
+     border: 1px solid transparent;
+     margin: 0 2px;
+     opacity: 0.8;
+     background: none;
+     outline: none;
+     max-height: 22px;
+}
+
+input[type=image]:hover, input[type=image]:focus {
+     border: 1px solid #f60;
+     filter: drop-shadow(0 0 1px #f60);
+     opacity: 1;
+}
+
+a img {
+     outline: none;
+}
+
+a img:hover, a img:focus, a:focus img {
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+thead img.disable, img.disable:hover {
+     opacity: 0.3;
+}
+
+thead img:hover, thead img:focus, thead a:hover img, thead a:focus img {
+     opacity: 1;
+     filter: drop-shadow(0 0 1px #f60);
+     border: 1px solid transparent;
+}
+
+thead a:active img {
+     filter: drop-shadow(0 0 1px #f30) !important;
+     transform: scale(0.9);
+}
+
+input[type="submit"]:disabled:active, a.control:disabled:active {
+      filter: drop-shadow(0 0 1px #101);
+}
+
+#pagenav {
+     letter-spacing: 0.1em;
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, sans-serif !important;
+}
+
+#pagenav img:not(old) {
+     border: 1px solid #dad !important;
+     background: #fdf;
+     background: linear-gradient(to bottom, #fdf 0%, #fdf 50%, #dbd 51%);
+     border-radius: 3px;
+     box-shadow: inset 0 0 1px 1px #fff;
+     padding: 3px 4px !important;
+     margin: 0;
+     transform: scale(+1, -1);
+     mix-blend-mode: luminosity;
+     opacity: 1;
+     width: 12px;
+}
+
+#pagenav img, #pagenav img.disable:hover:not(old) {
+     filter: sepia(100%) invert(100%) hue-rotate(58deg) brightness(140%) drop-shadow(0 0 1px #000);
+     box-shadow: inset 0 0 1px 1px #fff;
+}
+
+#pagenav img:hover, #pagenav a:focus img, #pagenav a img:active {
+     filter: sepia(100%) invert(100%) hue-rotate(58deg) brightness(140%) drop-shadow(0 0 1px #f60);
+     box-shadow: none;
+     opacity: 1;
+     mix-blend-mode: normal;
+}
+
+#pagenav img.disable, #pagenav img.disable:hover, #pagenav img.disable:active {
+     margin: 0 3px 0 2px;
+     opacity: 0.3 !important;
+     mix-blend-mode: luminosity;
+}
+
+#pagenav a img:active, #pagenav img:active {
+     box-shadow: inset 1px -1px 3px 1px #fff !important;
+     filter: sepia(100%) invert(100%) hue-rotate(58deg) brightness(140%) drop-shadow(0 0 1px #000) !important;
+}
+
+input[type="text"], input.r, input[name="nofilter_dataDir"] {
+     padding: 4px !important;
+     box-shadow: inset 1px 1px 2px 1px #101;
+     letter-spacing: 0.03em;
+     background: url(images/graytile.png) #212;
+     background-size: 96px 96px;
+     transition: ease box-shadow 0.15s 0s, ease color 0.15s 0s;
+}
+
+textarea[name="i2cpOpts"] {
+     overflow: hidden;
+}
+
+input[name="nofilter_commentsName"] {
+     max-width: 249px;
+}
+
+input[name="nofilter_commentsName"]:focus::placeholder {
+     opacity: 0;
+}
+
+input[type=text]:active, input[type=text]:focus, input.r:focus, input[name="nofilter_dataDir"]:focus, textarea:focus {
+     background: #d60;
+     background: linear-gradient(to bottom, #d60, #c50);
+     color: #fff;
+     box-shadow: inset 0 0 0 1px #ffffcf;
+     transition: ease box-shadow 0.15s 0s;
+     outline: none;
+}
+
+input[type=radio] {
+     padding: 2px;
+     margin: 0 3px 0 8px;
+     vertical-align: bottom;
+}
+
+input[type="radio"], input[type="checkbox"] {
+     filter: sepia(100%) invert(100%) hue-rotate(58deg) brightness(80%);
+     min-width: 16px !important;
+     min-height: 16px !important;
+     vertical-align: middle;
+     background: none;
+}
+
+input[type="radio"]:hover, input[type="checkbox"]:hover, input[type="radio"]:focus, input[type="checkbox"]:focus {
+     outline: none;
+     filter: sepia(100%) invert(100%) hue-rotate(58deg) brightness(80%) drop-shadow(0 0 3px #f60) !important;
+}
+
+input[type="radio"], input[type="checkbox"], select, input[type="submit"], label {
+     cursor: pointer;
+}
+
+input[type=text], input.r, select {
+     min-width: 120px;
+}
+
+input[name="upBW"] + i {
+     margin-left: 3px;
+}
+
+input.default {
+     width: 1px; 
+     height: 1px; 
+     visibility: hidden;
+}
+
+input.disabled, input.disabled:hover, input.disabled:active, a.control.disabled:hover, a.control.disabled:active {
+     color: #444 !important;
+     font-weight: normal;
+     border: 1px inset #bbb !important;
+     cursor: not-allowed;
 }
 
@@ -1193 +1353 @@
 }
 
+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);
+     background: url(images/accept.png), linear-gradient(to bottom, #767 0%, #989 100%);
+}
+
+input.add, input.add:active {
+     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);
+     background: url(images/add.png), linear-gradient(to bottom, #767 0%, #989 100%);
+}
+
+input.cancel, input.cancel:active {
+     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);
+     background: url(images/cancel.png), linear-gradient(to bottom, #767 0%, #989 100%);
+}
+
+input.create, input.create:active {
+     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);
+     background: url(images/create.png), linear-gradient(to bottom, #767 0%, #989 100%);
+}
+
+input.delete, input.delete:active {
+     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);
+     background: url(images/nuke.png), linear-gradient(to bottom, #767 0%, #989 100%);
+}
+
+input.reload, input.reload:active {
+     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);
+     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);
+     background: url(images/recheck.png), linear-gradient(to bottom, #989 0%, #878 100%);
+     margin-left: 2px !important
+}
+
+input.disabled[name="recheck"]:hover {
+     background-blend-mode: initial;
+}
+
+input.reload[name="recheck"]:hover, input.reload[name="recheck"]:focus {
+     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);
+     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);
+     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);
+     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);
+     background: url(images/btn_stop.png), linear-gradient(to bottom, #767 0%, #989 100%);
+}
+
+/*
 a.control:active, input[type="submit"]:active, input[type="reset"]:active {
      color: #ce1641 !important;
      border: 1px solid #fff !important;
      box-shadow: inset 3px 3px 3px #fff;
-}
-
-#configs input[type="submit"], .trackerconfig input[type="submit"], input[name="savepri"] {
-     text-transform: capitalize;
-}
-
-#setPriority {
-     border-top: 1px solid #000;
-}
-
-th.headerpriority br, .snarkTorrents thead th br {
-     display: none;
-}
-
-input, a.control {
-     font: 8pt "Droid Sans", "Noto Sans", "DejaVu Sans", Verdana, Helvetica, sans-serif;
-     font-weight: bold;
-}
-
-input {
-     font-size: 8.5pt;
-     font-weight: bold;
-     text-align: left;
-     padding: 3px 3px !important;
-     border-radius: 2px;
-     border: 1px solid #101;
-     background: #212 url(images/graytile.png);  
-     color: #f60;
-     margin: 2px 4px;
-}
-
-input.r {
-     text-align: right;
-     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;
 }
 
@@ -1271 +1493 @@
      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;
-}
-
-input[type=image]:hover, input[type=image]:focus {
-     border: 1px solid #f60;
-     filter: drop-shadow(0 0 1px #f60);
-     opacity: 1;
-}
-
-a img {
-     outline: none;
-}
-
-a img:hover, a img:focus, a:focus img {
-     filter: drop-shadow(0 0 1px #f60);
-}
-
-thead img.disable, img.disable:hover {
-     opacity: 0.3;
-}
-
-thead img:hover, thead img:focus, thead a:hover img, thead a:focus img {
-     opacity: 1;
-     filter: drop-shadow(0 0 1px #f60);
-     border: 1px solid transparent;
-}
-
-thead a:active img {
-     filter: drop-shadow(0 0 1px #f30) !important;
-     transform: scale(0.9);
-}
-
-input[type="submit"]:disabled:active, a.control:disabled:active {
-      filter: drop-shadow(0 0 1px #101);
-}
-
-#pagenav {
-     letter-spacing: 0.1em;
-     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, sans-serif !important;
-}
-
-#pagenav img:not(old) {
-     border: 1px solid #dad !important;
-     background: #fdf;
-     background: linear-gradient(to bottom, #fdf 0%, #fdf 50%, #dbd 51%);
-     border-radius: 3px;
-     box-shadow: inset 0 0 1px 1px #fff;
-     padding: 3px 4px !important;
-     margin: 0;
-     transform: scale(+1, -1);
-     mix-blend-mode: luminosity;
-     opacity: 1;
-     width: 12px;
-}
-
-#pagenav img, #pagenav img.disable:hover:not(old) {
-     filter: sepia(100%) invert(100%) hue-rotate(58deg) brightness(140%) drop-shadow(0 0 1px #000);
-     box-shadow: inset 0 0 1px 1px #fff;
-}
-
-#pagenav img:hover, #pagenav a:focus img, #pagenav a img:active {
-     filter: sepia(100%) invert(100%) hue-rotate(58deg) brightness(140%) drop-shadow(0 0 1px #f60);
-     box-shadow: none;
-     opacity: 1;
-     mix-blend-mode: normal;
-}
-
-#pagenav img.disable, #pagenav img.disable:hover, #pagenav img.disable:active {
-     margin: 0 3px 0 2px;
-     opacity: 0.3 !important;
-     mix-blend-mode: luminosity;
-}
-
-#pagenav a img:active, #pagenav img:active {
-     box-shadow: inset 1px -1px 3px 1px #fff !important;
-     filter: sepia(100%) invert(100%) hue-rotate(58deg) brightness(140%) drop-shadow(0 0 1px #000) !important;
-}
-
-input[type="text"], input.r, input[name="nofilter_dataDir"] {
-     padding: 4px !important;
-     box-shadow: inset 1px 1px 2px 1px #101;
-     letter-spacing: 0.03em;
-     background: url(images/graytile.png) #212;
-     background-size: 96px 96px;
-     transition: ease box-shadow 0.15s 0s, ease color 0.15s 0s;
-}
-
-textarea[name="i2cpOpts"] {
-     overflow: hidden;
-}
-
-input[name="nofilter_commentsName"] {
-     max-width: 249px;
-}
-
-input[name="nofilter_commentsName"]:focus::placeholder {
-     opacity: 0;
-}
-
-input[type=text]:active, input[type=text]:focus, input.r:focus, input[name="nofilter_dataDir"]:focus, textarea:focus {
-     background: #d60;
-     background: linear-gradient(to bottom, #d60, #c50);
-     color: #fff;
-     box-shadow: inset 0 0 0 1px #ffffcf;
-     transition: ease box-shadow 0.15s 0s;
-     outline: none;
-}
-
-input[type=radio] {
-     padding: 2px;
-     margin: 0 3px 0 8px;
-     vertical-align: bottom;
-}
-
-input[type="radio"], input[type="checkbox"] {
-     filter: sepia(100%) invert(100%) hue-rotate(58deg) brightness(80%);
-     min-width: 16px !important;
-     min-height: 16px !important;
-     vertical-align: middle;
-     background: none;
-}
-
-input[type="radio"]:hover, input[type="checkbox"]:hover, input[type="radio"]:focus, input[type="checkbox"]:focus {
-     outline: none;
-     filter: sepia(100%) invert(100%) hue-rotate(58deg) brightness(80%) drop-shadow(0 0 3px #f60) !important;
-}
-
-input[type="radio"], input[type="checkbox"], select, input[type="submit"], label {
-     cursor: pointer;
-}
-
-input[type=text], input.r, select {
-     min-width: 120px;
-}
-
-input[name="upBW"] + i {
-     margin-left: 3px;
-}
-
-input.default {
-     width: 1px; 
-     height: 1px; 
-     visibility: hidden;
-}
-
-input.disabled, input.disabled:hover, input.disabled:active, a.control.disabled:hover, a.control.disabled:active {
-     color: #444 !important;
-     font-weight: normal;
-     border: 1px inset #bbb !important;
-     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%);
-     padding: 4px 6px 4px 22px !important;
-}
-
-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%);
-}
-
-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;
-}
-
-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%);
-}
-
-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;
-}
-
-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%);    
-}
-
-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;
-}
-
-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%);
-}
-
-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;
-}
-
-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%);
-}
-
-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;
-}
-
-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%);
-}
-
-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;
-     margin-left: 2px !important
-}
-
-input.disabled[name="recheck"]:hover {
-     background-blend-mode: initial;
-}
-
-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%);
-}
-
-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%);
-     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%);
-}
-
-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;
-}
-
-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%);
-}
-
-.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 {
+     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;
@@ -1571 +1529 @@
 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;
@@ -1621 +1579 @@
 }
 
+/* end buttons & inputs */
+
 img {
      border: none;
      margin: 0 3px 1px 3px;
      vertical-align: middle;
-     opacity: 1.0;
      line-height: 100%;
 }
@@ -1631 +1590 @@
 img:hover {
      border: none;
-     opacity: 1;
      line-height: 100%;
 }
@@ -1691 +1649 @@
 }
 
+.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 {
@@ -1748 +1712 @@
      color: #ddd !important;
      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%;
 }
 
@@ -1865 +1805 @@
 /* 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;
 }
 
@@ -1905 +1847 @@
 }
 
-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 {
@@ -1971 +1897 @@
 
 .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;
@@ -1983 +1914 @@
 }
 
-.debuginfo td {
-     color: #fff !important;
-}
-
 .debugConnStat {
      display: inline-block;
@@ -2000 +1927 @@
      color: #ffdfff !important;
 }
+*/
 
 .peerinfo:hover b, .debuginfo:hover b {
-     color: #fff !important;
+     color: #ddd !important;
      color: #b9b;
 }
@@ -2075 +2003 @@
      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;
 }
 
@@ -2083 +2012 @@
      border-radius: 0;
      background: #101;
+     background: linear-gradient(to bottom, #212 50%, #101 50%);
      text-align: center;
 }
@@ -2090 +2020 @@
      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;
+}
 }
 
@@ -2162 +2100 @@
      margin: 2px 0 2px 6px;
      font-weight: bold;
+     vertical-align: middle;
 }
 
@@ -2385 +2324 @@
      width: 160px !important;
      padding-right: 2px;
-}
-
-.snarkCommentInfo td:last-child, .snarkComments td:last-child {
-/*     width: 1% !important;*/
 }
 
@@ -2636 +2571 @@
 }
 
-.snarkTorrents td:nth-child(2), .snarkTorrents td:nth-child(2) a {
+td.snarkTorrentStatus, td.snarkTorrentStatus a {
      font-weight: bold;
 }
@@ -2735 +2670 @@
 }
 
+img[src="/themes/snark/ubergine/images/details.png"] {
+     width: 14px;
+     height: 14px;
+}
+
 .peerinfo .percentBarOuter {
      filter: sepia(1);
@@ -2757 +2697 @@
 .snarkTorrents a, th, td {
      font-size: 8pt !important;
+}
+
+.peerinfo .percentBarOuter {
+     margin-right: -4px !important;
 }
 
@@ -2797 +2741 @@
      box-shadow: 0 0 0 1px #101;
 }
+
+#totals {
+     word-spacing: 0.15em !important;
+}
+
+#dhtdebugInner {
+     margin-top: -33px;
+}
 }
 
@@ -2804 +2756 @@
 }
 
-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;
@@ -2827 +2784 @@
 .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;
+
+}
+.snarkNav:link {
+     font-size: 11pt;
 }
 
 .snarkConfigTitle, label.toggleview {
      font-size: 13pt !important;
-     min-width: 240px !important;
-}
-
-.snarkNav:link {
-     font-size: 11pt;
-}
-
-.snarkConfigTitle, label.toggleview {
-     font-size: 12pt;
+     min-width: 320px !important;
 }
 
@@ -2924 +2873 @@
 .debuginfo td {
      font-size: 9pt !important;
+     line-height: 120%;
 }
 
@@ -2946 +2896 @@
 .debugConnStat {
      margin-right: 5px;
+}
+
+#dhtdebugInner {
+     margin-top: -34px;
 }
 }
@@ -2985 +2939 @@
 }
 
+.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;
 }
@@ -3002 +2956 @@
 
 .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%;
 }
 
@@ -3098 +3058 @@
 
 .addtorrentsection input[type="text"], .newtorrentsection input[type="text"] {
-     width: 60% !important;
+     width: 65% !important;
 }
 
@@ -3115 +3075 @@
      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;
+}
 }
 

installer/resources/themes/snark/vanilla/snark.css

@@ -1 +1 @@
 /* I2PSnark theme "Vanilla" by dr|z3d */
 /* Now with 100% more chocolate */
-
-html {
-     min-height: 100%;
-}
 
 body {
@@ -45 +41 @@
 }
 
-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;
 }
 
@@ -156 +166 @@
      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;
@@ -187 +199 @@
 
 .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%);
 }
 
@@ -268 +278 @@
      margin: 0 0 10px;
      padding: 0 3px;
-     border-spacing: 0;
      border: 1px solid #6f533e;
      border-radius: 2px;
@@ -286 +295 @@
 
 .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));
@@ -329 +337 @@
 .snarkMessages a:link:active, .snarkMessages a:visited:active  {
      color: #f30 !important;
-}
-
-.snarkMessages p {
-     font-style: italic;
-     margin: 0;
-     text-align: right;
 }
 
@@ -397 +399 @@
 /* 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;
@@ -477 +469 @@
 }
 
-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;
@@ -522 +509 @@
 }
 
-.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;
@@ -618 +596 @@
 .snarkTrackerDetails {
      padding: 0 3px !important;
-}
-
-.snarkTorrentDetails {
-     font-weight: bold;
 }
 
@@ -700 +674 @@
 
 .snarkTorrents tt {
-     background: #313;
      background: #7F654F;
      color: #fff;
@@ -890 +863 @@
 #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;
@@ -1165 +1137 @@
 }
 
-.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;
@@ -1177 +1149 @@
      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%);
-}
-
-.snarkConfigTitle:active, label.toggleview:active {
+     color: #930 !important;
+}
+
+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;
 }
@@ -1227 +1208 @@
 
 @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;
@@ -1234 +1215 @@
 
 /* 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;
@@ -1240 +1221 @@
 }
 
-.snarkConfigTitle a, label.toggleview {
+.snarkConfigTitle a {
+     display: inline-block;
+     width: 100%;
+}
+
+.snarkConfigTitle a, .toggleview {
+     color: #3f271b !important;
+     text-shadow: 0 0 1px #fff5ef;
+}
+
+.snarkConfigTitle a:hover, .toggleview:hover, .snarkConfigTitle a:focus, .toggleview:focus {
      color: #930 !important;
-     color: #3F271B !important;
-     text-shadow: 0 0 1px #fff5ef;
-}
-
-.snarkConfigTitle a:hover, label.toggleview:hover, .snarkConfigTitle a:focus, label.toggleview:focus {
-     color: #df0072 !important;
-     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;
@@ -1262 +1245 @@
 }
 
-.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;
 }
 
@@ -1840 +1807 @@
 /* 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;
 }
 
@@ -1912 +1881 @@
      font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
 }
+
+/*
 
 .from, .to {
@@ -1948 +1919 @@
      margin: 2px 3px !important;
 }
+
+*/
 
 .dhtDebug th {
@@ -2256 +2229 @@
      border-top: none;
      border-bottom: none;
-/*     box-shadow: 0 0 2px 1px rgba(77, 69, 62, 0.3);*/
      border-collapse: separate;
 }
@@ -2389 +2361 @@
 }
 
+.commentAuthorName:empty {
+     display: none;
+}
+
 .commentText {
      white-space: normal;
@@ -2529 +2505 @@
 }
 
-.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
 }
 
@@ -2542 +2517 @@
 }
 
+/*
 .from, .to {
      font-size: 11pt !important;
 }
+*/
 
 .snarkTorrentOdd td, .snarkTorrentEven td {
@@ -2614 +2591 @@
 
 @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;
@@ -2685 +2662 @@
 
 @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;
@@ -2695 +2672 @@
 }
 }
-
 
 @media screen and (min-width: 1000px) {
@@ -2785 +2761 @@
 }
 
+#totals {
+     word-spacing: 0.15em;
+}
+
 thead a img, thead img {
      max-height: 21px;
@@ -2803 +2783 @@
 
 @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;
@@ -2878 +2858 @@
 
 .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;
 }
@@ -2925 +2905 @@
 
 @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;
@@ -2960 +2940 @@
 }
 
-.snarkTorrentUploaded, .snarkTorrentRateUp {
+.snarkTorrentUploaded, .snarkTorrentRateUp, .peerinfo, .debuginfo {
      display: none;
 }
@@ -3050 +3030 @@
      padding-left: 0 !important;
 }
+
+#dhtDebugInner {
+     margin-top: -24px !important;
+}
 }