I2PSnark theme tweaks

apps/i2psnark/java/src/org/klomp/snark/dht/DHTTracker.java

@@ -140,7 +140,7 @@ class DHTTracker {
      * Debug info, HTML formatted
      */
     public void renderStatusHTML(StringBuilder buf) {
-        buf.append("DHT tracker: ").append(_torrentCount).append(" torrents ")
+        buf.append("<b>DHT tracker:</b> ").append(_torrentCount).append(" torrents ")
            .append(_peerCount).append(" peers ")
            .append(DataHelper.formatDuration(_expireTime)).append(" expiration<br>");
     }

apps/i2psnark/java/src/org/klomp/snark/dht/KRPC.java

@@ -682,17 +682,17 @@ public class KRPC implements I2PSessionMuxedListener, DHT {
     public String renderStatusHTML() {
         long uptime = Math.max(1000, _context.clock().now() - _started);
         StringBuilder buf = new StringBuilder(256);
-        buf.append("<br><hr class=\"debug\"><b>DHT DEBUG</b><br><hr class=\"debug\">TX: ").append(_txPkts.get()).append(" pkts / ")
+        buf.append("<br><hr class=\"debug\"><b>DHT DEBUG</b><br><hr class=\"debug\"><hr><b>TX:</b> ").append(_txPkts.get()).append(" pkts / ")
            .append(DataHelper.formatSize2(_txBytes.get())).append("B / ")
            .append(DataHelper.formatSize2(_txBytes.get() * 1000 / uptime)).append("Bps<br>" +
-                   "RX: ").append(_rxPkts.get()).append(" pkts / ")
+                   "<b>RX:</b> ").append(_rxPkts.get()).append(" pkts / ")
            .append(DataHelper.formatSize2(_rxBytes.get())).append("B / ")
            .append(DataHelper.formatSize2(_rxBytes.get() * 1000 / uptime)).append("Bps<br>" +
-                   "DHT Peers: ").append( _knownNodes.size()).append("<br>" +
+                   "<b>DHT Peers:</b> ").append( _knownNodes.size()).append("<br>" +
-                   "Blacklisted: ").append(_blacklist.size()).append("<br>" +
+                   "<b>Blacklisted:</b> ").append(_blacklist.size()).append("<br>" +
-                   "Sent tokens: ").append(_outgoingTokens.size()).append("<br>" +
+                   "<b>Sent tokens:</b> ").append(_outgoingTokens.size()).append("<br>" +
-                   "Rcvd tokens: ").append(_incomingTokens.size()).append("<br>" +
+                   "<b>Rcvd tokens:</b> ").append(_incomingTokens.size()).append("<br>" +
-                   "Pending queries: ").append(_sentQueries.size()).append("<br><hr>");
+                   "<b>Pending queries:</b> ").append(_sentQueries.size()).append("<br><br><hr class=\"debug\">");
         _tracker.renderStatusHTML(buf);
         _knownNodes.renderStatusHTML(buf);
         return buf.toString();

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

@@ -1125,8 +1125,16 @@ div.percentBarInner.percentBarComplete {
      font-weight: normal;
 }
 
-.snarkConfigTitle,
+
-label.toggleview {
+.snarkConfigTitle:hover, label.toggleview:hover {
+     background: linear-gradient(to bottom, #fff 0%, #ddd 100%) !important;
+}
+
+.snarkConfigTitle:active, label.toggleview:active {
+     box-shadow: inset 0 0 0 1px #fff, inset 2px 2px 3px 1px #777;
+}
+
+.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle:hover {
      font-size: 12pt;
      font-weight: bold;
      font-variant: small-caps !important;
@@ -1226,6 +1234,12 @@ hr.debug:nth-child(n+7) {
      margin: -10px 0 3px;
 }
 
+hr.debug:last-child {
+     height: 0;
+     margin-bottom: -5px;
+     margin-top: -15px;
+}
+
 a:link {
      font-weight: normal;
      text-decoration: none;
@@ -1311,6 +1325,7 @@ input[type="submit"], input[type="reset"] {
      box-shadow: inset 0 0 0 1px #fff;
      filter: drop-shadow(0 0 1px #ccc);
      -webkit-filter: drop-shadow(0 0 1px #ccc);
+     cursor: pointer !important;
 }
 
 input[type="submit"]:hover, input[type="reset"]:hover,
@@ -1334,6 +1349,10 @@ input[type="submit"]:active, input[type="reset"]:active {
      box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px #555;
 }
 
+input[type="text"], textarea {
+     cursor: text !important;
+}
+
 a.control {
      vertical-align: middle;
 }
@@ -1407,6 +1426,7 @@ input[name="nofilter_dataDir"] {
      padding: 5px;
      resize: none;
      cursor: text;
+     overflow: hidden;
 }
 
 thead img,
@@ -1454,6 +1474,7 @@ input[type="checkbox"], input[type="radio"] {
      vertical-align: middle;
      min-width: 16px;
      min-height: 16px;
+     background: none;
 }
 
 input.default {
@@ -1482,7 +1503,9 @@ select {
      color: #333;
      border: 1px solid #bbb;
      border-radius: 2px;
-     background: linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     -moz-appearance: none;
+     -webkit-appearance: none;
      box-shadow: inset 0 0 0 1px #fff;
 }
 
@@ -1492,12 +1515,6 @@ select option {
      background: #fff;
 }
 
-@-moz-document url-prefix() { /* target firefox and derivatives only */
-select {
-     background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%);
-     -moz-appearance: none;
-}
-
 select:hover, select:active {
      background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important;
 }
@@ -1505,10 +1522,6 @@ select:hover, select:active {
 select:focus {
      background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important;
      box-shadow: 0 0 0 1px #89f;
-}
-}
-
-select:focus {
      color: #000;
 }
 
@@ -1516,6 +1529,12 @@ select:nth-child(2) {
      margin-left: -18px;
 }
 
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+select {
+     padding: 4px;
+}
+}
+
 textarea {
      font: 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono;
      font-weight: bold;
@@ -1530,6 +1549,10 @@ textarea:focus {
      color: #22f !important;
 }
 
+textarea[name="i2cpOpts"] {
+     overflow: hidden;
+}
+
 img {
      line-height: 100%;
      margin: 0 3px 1px 3px;
@@ -1647,6 +1670,10 @@ div.configsectionpanel td:first-child {
      min-width: 50px;
 }
 
+.trackerconfig th:first-child {
+     background: url(/themes/snark/ubergine/images/nuke.png) center right 8px no-repeat, linear-gradient(to bottom, #fff, #eef);
+}
+
 .trackerconfig th:last-child, .trackerconfig td:last-child {
      padding-left: 10px !important;
 }
@@ -1662,8 +1689,6 @@ div.configsectionpanel td:first-child {
 
 .snarkTorrentNoneLoaded td {
      color: #0c153d !important;
-     border-right: 1px solid #040;
-     border-left: 1px solid #040;
      background: #fff;
 }
 
@@ -1982,4 +2007,10 @@ body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_
 .snarkMessages li, .snarkTorrents tt {
      font-size: 9pt;
 }
-}
+}
+
+/* MS Edge 14+ fix */
+_:-ms-lang(x), * {
+     filter: none !important;
+     -webkit-filter: none !important;
+}

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

@@ -764,7 +764,11 @@ td:first-child {
      padding: 1px 1px 1px 1px !important;
      margin: 0 !important;
      text-align: center !important;
-     width: 60px; 
+     width: 40px !important;
+}
+
+_:-ms-lang(x), .snarkTorrentAction { /* MS Edge 14+ wrap fix */
+     width: 72px !important;
 }
 
 .snarkTorrentAction img {
@@ -777,11 +781,6 @@ td:first-child {
      opacity: 1;
 }
 
-td.snarkTorrentAction {
-     min-width: 66px;
-     width: 66px;
-}
-
 .snarkTorrentNoneLoaded {
      background: #000;
      font-size: 8.5pt;
@@ -1318,6 +1317,7 @@ textarea[name="i2cpOpts"], input[name="nofilter_dataDir"] {
      padding: 3px;
      width: 500px;
      resize: none;
+     overflow: hidden;
 }
 
 thead img, thead img:hover {
@@ -1345,9 +1345,11 @@ input[type=radio] {
      padding: 2px;
      margin: 0 3px 0 8px;
      vertical-align: bottom;
+     background: none;
 }
 
 input[type="checkbox"], input[type="radio"], input[type="checkbox"]:disabled:hover, input[type="radio"]:disabled:hover {
+     background: none;
      filter: invert(100%) sepia(100%) hue-rotate(70deg) saturate(200%); /* colorize radios and checkboxes */
      -webkit-filter: invert(100%) sepia(100%) hue-rotate(70deg) saturate(200%);
 }
@@ -1373,7 +1375,10 @@ input[size="85"] {
 }
 
 select {
-     background: #000 !important;
+     background: #000 url(images/dropdown.png) right center no-repeat !important;
+     background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #020 0%, #000 20%, #000 80%, #010 100%) !important;
+     -moz-appearance: none;
+     -webkit-appearance: none;
      color: #494;
      font: 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
      font-weight: bold;
@@ -1405,23 +1410,20 @@ select:hover {
      box-shadow: inset 0 1px 1px 0 #ee9;
 }
 
-@-moz-document url-prefix() { /* target firefox and derivatives only */
-
-select {
-     background: #000 url(images/dropdown.png) right center no-repeat !important;
-     background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #020 0%, #000 20%, #000 80%, #010 100%) !important;
-     -moz-appearance: none;
-}
-
 select:hover, select:focus, select:active {
      background: #000 url(images/dropdown_hover.png) right center no-repeat !important;
 }
-}
 
 select:nth-child(2) {
      margin-left: -18px;
 }
 
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+select {
+     padding: 4px;
+}
+}
+
 textarea {
      background: #000;
      color: #bb7;
@@ -1550,6 +1552,10 @@ table#trackerselect {
      min-width: 50px;
 }
 
+.trackerconfig th:first-child {
+     background: url(/themes/snark/ubergine/images/nuke.png) center right 8px no-repeat, linear-gradient(to bottom, #010, #000);
+}
+
 .trackerconfig th:last-child, .trackerconfig td:last-child {
      padding-left: 10px !important;
 }

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

@@ -497,6 +497,11 @@ tfoot tr:nth-child(n+1) {
      text-align: left;
 }
 
+.snarkTorrents td[colspan="4"], .snarkTorrents td[colspan="10"] {
+     text-align: left !important;
+     padding-left: 0;
+}
+
 .snarkTorrents th[colspan="6"]::first-line {
      font-weight: bold;
 }
@@ -598,12 +603,16 @@ td:first-child {
      background: #eef;
 }
 
-.snarkTorrentNoneLoaded {
+.snarkTorrentNoneLoaded, .snarkTorrentNoneLoaded:hover {
-     background: #fff;
+     background: #fff !important;
-     font-size: 8.5pt;
+     background: linear-gradient(to right, #eef, #fff, #eef) !important;
+     box-shadow: inset 0 0 1px #fff;
+     border-bottom: 1px solid #7778bf !important;
+     padding: 10px !important;
+     font-size: 9pt;
      font-weight: bold;
      text-align: center !important;
-     color: #bbb !important;
+     color: #272e3f !important;
 }
 
 .snarkTorrentStatus {
@@ -778,8 +787,9 @@ td:first-child {
      cursor: pointer;
 }
 
-.snarkConfigTitle a:active, .toggleview:active {
+.snarkConfigTitle:active, .toggleview:active {
      color: #f30 !important;
+     box-shadow: inset 0 0 0 1px #fff, inset 2px 2px 3px 1px #555;
 }
 
 .snarkConfigTitle img, .toggleview img {
@@ -803,6 +813,10 @@ td:first-child {
      color: #446;
 }
 
+.configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
+     color: #31334f !important;
+}
+
 .snarkConfig {
      font-size: 10pt;
      width: 100%;
@@ -1003,6 +1017,7 @@ input[type=image], thead img {
      border: none;
      margin: 0 2px;
      opacity: 1;
+     max-height: 22px;
      filter: hue-rotate(45deg);
      -webkit-filter: hue-rotate(45deg);
 }
@@ -1039,6 +1054,15 @@ input[type="text"], input.r, input[name="nofilter_dataDir"], textarea, select {
      padding: 5px 4px !important;
 }
 
+textarea[name="i2cpOpts"] {
+     overflow: hidden;
+}
+
+input[name="nofilter_dataDir"], textarea[name="i2cpOpts"] {
+     width: 60%;
+     min-width: 500px !important;
+}
+
 input[type="radio"] {
      padding: 2px;
      margin: 0 3px 0 8px;
@@ -1050,6 +1074,7 @@ input[type="radio"], input[type="checkbox"], .optbox {
      width: 16px;
      height: 16px;
      box-shadow: none;
+     background: none;
 }
 
 input.default {
@@ -1090,7 +1115,7 @@ select:active, select option {
 }
 
 select + select {
-     margin-left: -20px;
+     margin-left: -18px;
 }
 
 textarea {
@@ -1292,9 +1317,9 @@ code, tt {
 .trackerconfig th:first-child {
      border-radius: 2px 0 0 2px;
      border-left: 1px solid #339;
+     background: url(/themes/snark/ubergine/images/nuke.png) center right 8px no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 51%, #eef 100%);
 }
 
-
 .trackerconfig th:last-child {
      border-radius: 0 2px 2px 0;
      border-right: 1px solid #339;
@@ -1308,6 +1333,10 @@ code, tt {
      text-align: left !important;
 }
 
+.trackerconfig tr:nth-child(2) td {
+     padding-top: 15px !important;
+}
+
 .trackerconfig td:first-child {
      text-align: right !important;
 }
@@ -1444,4 +1473,8 @@ input[type="submit"] {
      font-size: 12pt;
      padding: 3px 15px;
 }
-}
+
+.snarkTorrentDownloaded {
+     white-space: nowrap;
+}
+}

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

@@ -28,12 +28,12 @@ body.iframed {
 /* preload top navigation mouseovers */
 body.iframed {
      background: url(/themes/console/images/transparent.gif),
-     url(images/button_snark_hover.png) center 50px no-repeat,
+     url(images/button_snark_hover.png) center center no-repeat,
-     url(images/button_snark_active.png) center 50px no-repeat,
+     url(images/button_snark_active.png) center center no-repeat,
-     url(images/button_tracker_hover.png) center 50px no-repeat,
+     url(images/button_tracker_hover.png) center center no-repeat,
-     url(images/button_tracker_active.png) center 50px no-repeat,
+     url(images/button_tracker_active.png) center center no-repeat,
-     url(images/button_forum_hover.png) center 50px no-repeat,
+     url(images/button_forum_hover.png) center center no-repeat,
-     url(images/button_forum_active.png) center 50px no-repeat, #000 !important;
+     url(images/button_forum_active.png) center center no-repeat, #000 !important;
      background-size: 100% 100%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
 }
 
@@ -1262,6 +1262,7 @@ a img:hover {
 input[type="checkbox"],
 .optbox,
 input[type="radio"] {
+     background: none;
      min-width: 16px !important;
      min-height: 16px !important;
      filter: invert(100%) sepia(100%) hue-rotate(200deg) saturate(200%); /* colorize radios and checkboxes */
@@ -1338,6 +1339,7 @@ input[name="nofilter_dataDir"] {
      padding: 4px !important;
      cursor: text;
      resize: none;
+     overflow: hidden;
 }
 
 thead img,
@@ -1397,7 +1399,9 @@ select {
      border-bottom-color: #14144f;
      border-right-color: #14144f;
      border-radius: 2px;
-     background: #000 !important;
+     background: #000 url(images/dropdown.png) right center no-repeat !important;
+     -moz-appearance: none;
+     -webkit-appearance: none;
 }
 
 select:hover,
@@ -1411,10 +1415,8 @@ select:hover {
      box-shadow: inset 0 1px 1px 0 #c9ceff;
 }
 
-
 select option {
      font-size: 9.5pt;
-     /* dropdown menu reverts to normal font-weight */
      font-weight: normal;
 }
 
@@ -1422,17 +1424,9 @@ select option:hover, select option:checked {
      box-shadow: inset 20px 20px #652787;
 }
 
-/* target firefox and derivatives only */
-@-moz-document url-prefix() {
-select {
-     background: #000 url(images/dropdown.png) right center no-repeat !important;
-     -moz-appearance: none;
-}
-
 select:hover, select:focus, select:active {
      background: #000 url(images/dropdown_hover.png) right center no-repeat !important;
 }
-}
 
 select:nth-child(2) {
      margin-left: -16px;
@@ -1598,6 +1592,10 @@ img.thumb {
      min-width: 50px;
 }
 
+.trackerconfig th:first-child {
+     background: url(/themes/snark/ubergine/images/nuke.png) center right 8px no-repeat;
+}
+
 .trackerconfig th:last-child,
 .trackerconfig td:last-child {
      padding-left: 10px !important;
@@ -1616,8 +1614,7 @@ img.thumb {
 
 .snarkTorrentNoneLoaded td {
      color: #c9ceff !important;
-     border-right: 1px solid #050044;
+     padding: 10px;
-     border-left: 1px solid #050044;
      background: #001;
 }
 
@@ -1934,7 +1931,7 @@ label.toggleview,
 /* responsive layout */
 
 @media screen and (min-width: 1400px) {
-code, textarea, .snarkMessages li, input {
+code, textarea, .snarkMessages li, input, tt {
      font-size: 9pt !important;
 }
 
@@ -1946,6 +1943,10 @@ thead th, tfoot th, td, select, select option, .snarkAddInfo {
      font-size: 10.5pt !important;
 }
 
+.snarkRefresh:link:first-child {
+     padding-left: 13px !important;
+}
+
 .snarkConfigTitle, .toggleview {
      font-size: 12.5pt !important;
      padding: 4px 25px 5px 22px;
@@ -1962,4 +1963,8 @@ thead th, tfoot th, td, select, select option, .snarkAddInfo {
 select:nth-child(2) {
      margin-left: -14px !important;
 }
+
+.snarkTorrentDownloaded {
+     white-space: nowrap;
+}
 }

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

@@ -34,6 +34,7 @@ body.iframed {
      text-align: center;
      opacity: 1;
      filter: drop-shadow(0 0 1px #000);
+     -webkit-filter: drop-shadow(0 0 1px #000);
 }
 
 .iframed .page {
@@ -43,19 +44,22 @@ body.iframed {
      box-shadow: none;
      padding: 0 0;
      filter: none;
+     -webkit-filter: none;
 }
 
-/*
+::selection {
-.snarkTitle {
+     background: #404 !important;
-     font-size: 12pt;
+     color: white;
-     font-weight: bold;
+}
-     text-align: center;
+
+::-moz-selection {
+     background: #404 !important;
+     color: white;
 }
-*/
 
 .snarknavbar {
      margin: -10px 0 10px 0 !important;
-     padding: 14px 10px;
+     padding: 15px 10px 13px;
      border: 1px solid #101;
      border-radius: 0 0 4px 4px;
      box-shadow: inset 0 0 3px 1px #212;
@@ -65,7 +69,6 @@ body.iframed {
      background: linear-gradient(to bottom, #522852 0%, #4a2449 11%, #321831 33%, #281428 50%, #1c0e1c 51%, #101 52%, #101 100%);
      text-transform: uppercase !important;
      font-weight: bold;
-     font-size: 11.5pt;
      color: #001;
      min-width: 600px;
      width: 70%;
@@ -84,28 +87,6 @@ body.iframed {
      box-shadow: inset 0 0 1px 0 #ffeffd;
 }
 
-@media screen and (-webkit-min-device-pixel-ratio:0) { 
-.snarknavbar {
-     padding-top: 13px !important;
-     padding-bottom: 14px;
-}
-
-.iframed .snarknavbar {
-     padding-top: 12px !important;
-     padding-bottom: 13px !important;
-     background: linear-gradient(to bottom, #522852 0%, #4a2449 11%, #321831 33%, #281428 52%, #1c0e1c 52%, #101 52%, #101 100%);
-}
-}
-
-.snarknavbar img {
-     border: 0;
-     margin-right: -8px;
-     margin-left: -2px;
-     padding: 0 !important;
-     vertical-align: middle;
-     filter: none;
-}
-
 .snarkRefresh:link,.snarkRefresh:visited {
      text-decoration: none !important;
      text-transform: uppercase !important;
@@ -113,8 +94,9 @@ body.iframed {
      padding: 5px 12px 5px !important;
      margin-right: -4px !important;
      letter-spacing: 0.11em;
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif;
      font-weight: bold;
-     font-size: 9pt;
+     font-size: 10pt;
      color: #f70;
      background: #310 url(images/snarknav_on.png) repeat-x scroll center center;
      background: linear-gradient(to bottom, #a68058 1%, #7a6045 27%, #5e4730 50%, #2e1700 51%, #241300 75%, #0d0600 100%);
@@ -131,8 +113,14 @@ body.iframed {
      border: 1px solid #820b64;
 }
 
-.snarkRefresh img {
+.snarknavbar img {
-     -webkit-filter: none !important;
+     border: 0;
+     margin-right: -6px;
+     margin-left: -2px;
+     padding: 0 !important;
+     vertical-align: middle;
+     filter: none;
+     -webkit-filter: none;
 }
 
 .snarkRefresh:hover img, .snarkRefresh:focus img {
@@ -161,15 +149,21 @@ body.iframed {
      border-radius: 2px 0 0 2px;
 }
 
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+.snarkRefresh img {
+     margin: 0 -4px 0 -5px;
+}
+}
+
 .snarkRefresh:last-child[href="/i2psnark/"] {
      border-radius: 2px;
-     margin: -3px 0 -4px !important;
+     margin: -5px 0 -4px !important;
      padding: 4px 12px 3px !important;
      display: inline-block;
 }
 
 .snarkMessages {
-     font: bold 8pt "Lucida Console", "DejaVu Sans Mono", Courier, mono !important;
+     font: bold 8pt "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, mono !important;
      text-align: left;
      margin: 0 0 10px 0;
      padding: 3px 5px;
@@ -256,7 +250,7 @@ body.iframed {
 
 pre {
      width: 100%;
-     font: 7.5pt "Lucida Console","DejaVu Sans Mono",Courier,mono !important;
+     font: 7.5pt "Lucida Console","DejaVu Sans Mono",Courier, mono !important;
      padding: 0;
      text-align: left !important;
      height: 8px;
@@ -466,8 +460,10 @@ tfoot tr:nth-child(n+1) {
 }
 
 .snarkTorrents tt {
+     font-family: "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, mono
      color: #cc0;
      margin-left: 2px;
+     font-weight: bold;
 }
 
 td {
@@ -502,10 +498,12 @@ td:first-child {
      vertical-align: middle;
 }
 
+/*
 .snarkTorrentName[onclick^="document.location"]:hover, .snarkTorrentName[onclick^="document.location"]:hover a  {
      cursor: pointer;
      color: #f90 !important;
 }
+*/
 
 .snarkTorrentAction {
      padding: 1px 1px 1px 1px !important;
@@ -517,11 +515,15 @@ td:first-child {
 
 .snarkTorrents th:last-child {
      white-space: nowrap !important;
+     text-align: center;
+     padding-right: 4px;
+     width: 40px;
 }
 
 .snarkTorrents th:last-child input[type="image"] {
      padding: 0;
      margin: 0;
+     max-width: 32px;
 }
 
 .snarkTorrents th:last-child br { /* prevent button wrapping */
@@ -539,6 +541,7 @@ td:first-child {
 }
 
 .snarkTorrentNoneLoaded {
+     padding: 10px;
      background: #323;
      font-size: 8.5pt;
      font-weight: bold;
@@ -551,7 +554,6 @@ td:first-child {
      line-height: 110%;
 /*     min-width: 75px;*/
      text-align: left !important;
-     font-size: 7.5pt !important;
 }
 
 .snarkTorrentStatus img {
@@ -572,9 +574,7 @@ a img[src$="details.png"]:hover, a:focus img[src$="details.png"] {
      font-weight: bold;
      padding: 0 3px;
      line-height: 100%;
-     font-variant: all-small-caps; /* scale down KB/MB (firefox only) */
+     word-spacing: -0.4em;
-     word-spacing: -0.15em;
-     font-variant-numeric: tabular-nums;
 }
 
 .snarkTorrentDownloaded {
@@ -637,18 +637,16 @@ a img[src$="details.png"]:hover, a:focus img[src$="details.png"] {
 }
 
 .snarkTorrentEven + .snarkTorrentEven td:nth-child(2) tt, .snarkTorrentOdd + .snarkTorrentOdd td:nth-child(2) tt {
-     margin-left: -2px;
+     margin-left: -12px;
      color: #cc0;
 }
 
 .snarkTorrentEven + .snarkTorrentEven td:nth-child(4), .snarkTorrentOdd + .snarkTorrentOdd td:nth-child(4) {
      text-align: center !important;
-     font-variant: all-small-caps;
 }
 
 .snarkTorrentEven + .snarkTorrentEven td:nth-child(n+5), .snarkTorrentOdd + .snarkTorrentOdd td:nth-child(n+5) {
      text-align: right !important;
-     font-variant: all-small-caps !important;
 }
 
 table.snarkTorrents tbody tr:hover, table.snarkDirInfo tbody tr:hover {
@@ -824,6 +822,12 @@ table.snarkDirInfo {
      color: #00f000 !important;
 }
 
+.choked, .unchoked {
+     font-weight: bold;
+     font-style: italic;
+     word-spacing: -0.4em;
+} 
+
 .thumb {
      max-width: 16px;
      transition: ease-out all 0.3s 0s;
@@ -857,18 +861,31 @@ table#trackerselect {
 }
 
 #trackerselect td:nth-child(2), #trackerselect td:nth-child(3) {
-     max-width: 50px !important;
+     max-width: 60px !important;
 }
 
 .snarkAddInfo {
      font-size: 8pt;
      line-height: 130% !important;
+     white-space: normal;
 }
 
-.snarkConfigTitle, label.toggleview {
+.snarkAddInfo::before {
-     font-size: 10.5pt;
+     content: "\1F6C8\0020";
+     font-size: 12pt;
+}
+
+.snarkAddInfo code {
+     background: #101;
+     border-radius: 2px;
+     color: #fbf;
+}
+
+.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: 12pt;
      font-weight: bold;
-     padding: 1px 18px 2px;
+     padding: 3px 18px;
      margin: 5px 0 10px 0 !important;
      border: 1px solid #101;
      border-top: none;
@@ -887,12 +904,14 @@ table#trackerselect {
      min-width: 200px;
 }
 
-@media screen and (-webkit-min-device-pixel-ratio:0) {
+.snarkConfigTitle:hover, label.toggleview:hover {
-.snarkConfigTitle, label.toggleview {
+     background: linear-gradient(to bottom, #5f475d 0%, #4F3B4F 50%, #1f001f 50%, #1f001f 100%);
-     font-size: 12pt;	
+     box-shadow: inset 0 0 1px #3f173f;
-}
 }
 
+.snarkConfigTitle:active, label.toggleview:active {
+     box-shadow: inset 1px 1px 3px 1px #0d000d;
+}
 .snarkConfigTitle img, label.toggleview img {
      margin-right: -3px;
      margin-bottom: 1px;
@@ -928,17 +947,17 @@ hr.debug {
      width: 100%;
 }
 
-hr.debug + b {
-     color: #ee9;
-     text-transform: uppercase;
-}
-
 hr.debug:nth-child(n+7) {
      margin-top: -11px;
      margin-bottom: 2px;
      opacity: 0.5;
 }
 
+hr.debug:last-child {
+     background: #101;
+     margin-bottom: -4px;
+}
+
 a:link {
      color: #f70;
      text-decoration: none;
@@ -1099,6 +1118,7 @@ input[type=image], thead img {
      filter: drop-shadow(0 0 1px #000);
      -webkit-filter: drop-shadow(0 0 1px #000);
      outline: none;
+     max-height: 22px;
 }
 
 input[type=image]:hover, input[type=image]:focus {
@@ -1193,6 +1213,10 @@ input[type="text"], input.r, input[name="nofilter_dataDir"] {
      background-size: 96px 96px;
 }
 
+textarea[name="i2cpOpts"] {
+     overflow: hidden;
+}
+
 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);
@@ -1212,6 +1236,7 @@ input[type="radio"], input[type="checkbox"] {
      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 {
@@ -1226,8 +1251,14 @@ input[type=text], input.r, select {
      min-width: 110px;
 }
 
-input[name="upBW"] + i { /* fix Russian wrapping issue */
+input[name="upBW"] + i {
-     white-space: nowrap;
+     margin-left: 3px;
+}
+
+input[name="upBW"] + i::before {
+     content: "\1F6C8\0020";
+     font-size: 12pt;
+     font-style: normal;
 }
 
 input.default {
@@ -1366,7 +1397,7 @@ select {
      border-radius: 2px;
      border: 1px solid #000;
      margin: 2px;
-     -webkit-appearance:none;
+     -webkit-appearance: none;
      -moz-appearance: none;
      box-shadow: inset 1px 1px 2px 1px #101;
 }
@@ -1381,14 +1412,14 @@ select:hover, select:focus, select:active  {
 }
 
 select + select {
-     margin-left: -20px !important;
+     margin-left: -18px !important;
 }
 
 select option {
      background: #f50;
      color: #fff;
      font-size: 8.5pt;
-     font-weight: normal;
+     font-weight: bold;
      box-shadow: inset 0 0 20px 20px #f50;
      padding: 1px 2px 1px 1px;
 }
@@ -1409,6 +1440,12 @@ select + select {
 }
 }
 
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+select {
+     padding: 4px;
+}
+}
+
 textarea {
      background: #212 url(images/graytile.png);
      background-size: 96px 96px;
@@ -1540,6 +1577,11 @@ img[src$="magnet.png"] {
      -webkit-filter: drop-shadow(0 0 1px #515);
 }
 
+.configsectionpanel, .configsectionpanel td {
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif;
+     font-size: 10pt !important;
+}
+
 .iframed .mainsection, .iframed .newtorrentsection, .iframed .addtorrentsection, .iframed .configsection, .iframed .configsectionpanel {
      border-radius: 0;
      box-shadow: inset 0 0 1px 0 #ffeffd;
@@ -1571,12 +1613,17 @@ img[src$="magnet.png"] {
      resize: none;
      height: 24px;
      padding: 4px 4px 2px;
+     overflow: hidden;
 }
 
 .configsectionpanel input[type="checkbox"] {
      margin-left: 0;
 }
 
+.configsectionpanel td:first-child {
+     width: 200px;
+}
+
 .configsectionpanel tr:last-child {
      display: none;
 }
@@ -1606,7 +1653,7 @@ code {
      color: #b8b;
      padding: 0 2px;
      font-weight: bold;
-     font-family: "Lucida Console", "DejaVu Sans Mono", Courier, mono;
+     font-family: "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, mono
 }
 
 .routerdown {
@@ -1621,24 +1668,19 @@ code {
 
 .trackerconfig th:first-child {
      border-radius: 2px 0 0 2px;
-}
+     background: url(images/nuke.png) center right 6px no-repeat, linear-gradient(to bottom, #414 0%, #414 50%, #313 51%, #101 100%);
-
-.trackerconfig th:last-child {
-     border-radius: 0 2px 2px 0;
-}
-
-.trackerconfig th {
-     background: linear-gradient(to bottom, #313 0%, #313 50%, #212 51%, #101 100%);
-}
-
-.trackerconfig th:first-child {
      border-left: 1px solid #101;
 }
 
 .trackerconfig th:last-child {
+     border-radius: 0 2px 2px 0;
      border-right: 1px solid #101;
 }
 
+.trackerconfig th {
+     background: linear-gradient(to bottom, #414 0%, #414 50%, #313 51%, #101 100%);
+}
+
 .trackerconfig th:nth-child(n+4), .trackerconfig th:nth-child(n+5), .trackerconfig td:nth-child(n+4), .trackerconfig td:nth-child(n+5) {
      text-align: center !important;
 }
@@ -1651,6 +1693,15 @@ code {
      text-align: right !important;     
 }
 
+.trackerconfig tr:nth-child(2) td {
+     padding-top: 15px;
+}
+
+.trackerconfig td[colspan="7"] {
+     padding: 0 !important;
+     height: 0 !important;
+}
+
 input.trackername {
      width: 100px;
 }
@@ -1732,15 +1783,31 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, .snarkFileStatus
      font-size: 9pt !important;
 }
 
+.snarknavbar {
+     padding: 18px 10px 16px;
+}
+
+.snarknavbar img {
+     margin-right: -8px;
+}
+
 .snarkRefresh:link {
-     font-size: 10pt;
+     font-size: 10.5pt !important;
+}
+
+.snarkConfigTitle, label.toggleview {
+     font-size: 12pt;
 }
 
 .snarkRefresh:link:first-child {
      padding-left: 13px !important;
 }
 
-tt, .snarkTorrents tt, code, .snarkMessages, input, input[type="submit"], input[type="reset"], select, select option, button, textarea {
+.snarkTorrents tt {
+     font-size: 10pt;
+}
+
+tt, code, .snarkMessages, input, input[type="submit"], input[type="reset"], select, select option, button, textarea {
      font-size: 9pt !important;
 }
 
@@ -1750,6 +1817,6 @@ select {
 }
 
 select:nth-child(2) {
-     margin-left: -18px !important;
+     margin-left: -14px !important;
 }
 }

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

@@ -117,6 +117,7 @@ body.iframed {
      padding: 5px 10px 5px 12px !important;
      margin: -5px -2px -5px 0 !important;
      letter-spacing: 0.08em;
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif;
      font-weight: bold;
      font-size: 10pt;
      color: #930;
@@ -221,7 +222,7 @@ body.iframed {
 }
 
 .snarkRefresh img {
-     margin: 0 -10px 2px -2px !important;
+     margin: 0 -6px 2px -2px !important;
      filter: sepia(65%);
      -webkit-filter: sepia(65%);
      vertical-align: middle;
@@ -355,6 +356,7 @@ thead a img, thead img {
      opacity: 1;
      filter: sepia(100%) hue-rotate(340deg);
      -webkit-filter: sepia(100%) hue-rotate(340deg);
+     max-height: 22px;
 }
 
 thead a:hover img, thead a:focus img {
@@ -510,7 +512,7 @@ tfoot tr:nth-child(n+1) {
 }
 
 .snarkTorrents thead th:nth-child(3) {
-     padding: 4px 1px;
+     padding: 4px 4px 4px 0	;
      text-align: right;
 }
 
@@ -569,10 +571,11 @@ tfoot tr:nth-child(n+1) {
 .snarkTorrents td:nth-child(4) {
      text-align: center;
      padding-right: 4px !important;
+     font-weight: bold;
 }
 
 .snarkTorrents td:nth-child(7) {
-     text-align: center;
+     font-weight: bold;
 }
 
 td {
@@ -616,24 +619,26 @@ td:first-child {
 }
 
 .snarkTorrentAction input[type="image"], .snarkTorrents th:last-child input[type="image"] {
-     filter: sepia(100%) hue-rotate(340deg) drop-shadow(0 0 1px #7f6c5f);
+     filter: drop-shadow(0 0 1px #7f6c5f);
-     -webkit-filter: sepia(100%) hue-rotate(340deg) drop-shadow(0 0 1px #7f6c5f);
+     -webkit-filter: drop-shadow(0 0 1px #7f6c5f);
      border: 1px solid #4d453e;
      border-radius: 2px;
-     padding: 2px !important;
+     padding: 3px !important;
      background: linear-gradient(to bottom, #efefef 0%, #efefef 51%, #cfc7c2 52%, #cfc7c2 100%);
+     background: linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%);
      box-shadow: inset 0 0 0 1px #fff;
      vertical-align: middle;
      mix-blend-mode: normal;
      opacity: 1 !important;
+     max-height: 10px;
 }
 
 .snarkTorrentAction input[type="image"]:hover, .snarkTorrents th:last-child input[type="image"]:hover, .snarkTorrentAction input[type="image"]:focus, .snarkTorrents th:last-child input[type="image"]:focus  {
-     mix-blend-mode: multiply;
      background: linear-gradient(to bottom, #ffeadf 0%, #ffeadf 51%, #cfb6a8 52%, #cfb6a8 100%);
      border: 1px solid #f60 !important;
-     filter: sepia(100%) hue-rotate(340deg) drop-shadow(0 0 1px #f60);
+     box-shadow: inset 0 0 0 1px #fff;
-     -webkit-filter: sepia(100%) hue-rotate(340deg) drop-shadow(0 0 1px #f60);
+     filter: drop-shadow(0 0 1px #f60);
+     -webkit-filter: drop-shadow(0 0 1px #f60);
 }
 
 .snarkTorrentAction input[type="image"]:active, .snarkTorrents th:last-child input[type="image"]:active {
@@ -745,6 +750,7 @@ table.snarkTorrents tbody tr:hover, table.snarkDirInfo tbody tr:hover {
 
 .snarkTorrents td[colspan="4"], .snarkTorrents td[colspan="10"]  {
      text-align: left;
+     word-spacing: 0.2em;
 }
 
 .snarkTorrents td[colspan="10"] {
@@ -754,6 +760,7 @@ table.snarkTorrents tbody tr:hover, table.snarkDirInfo tbody tr:hover {
 
 .snarkTorrents td[colspan="4"] tt {
      margin-left: -1px;
+     margin: 0 2px 0 -16px;
 }
 
 .snarkFileIcon {
@@ -915,7 +922,8 @@ th[colspan="4"] + .headerpriority {
      font-weight: normal;
 }
 
-.snarkConfigTitle, label.toggleview {
+.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle:hover {
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif;
      font-size: 11pt;
      font-weight: bold;
      padding: 2px 15px 2px 12px;
@@ -935,6 +943,11 @@ th[colspan="4"] + .headerpriority {
      text-shadow: 0 0 1px #fff5ef;
 }
 
+.snarkConfigTitle:hover, label.toggleview:hover {
+     background: #fff url('images/bling2.png') repeat-x scroll center center;
+     background: linear-gradient(to bottom, #ffeadf 0%, #ffeadf 51%, #cfb6a8 52%, #cfb6a8 100%);
+}
+
 @media screen and (-webkit-min-device-pixel-ratio:0) {
 .snarkConfigTitle, label.toggleview {
      font-size: 12pt;	
@@ -991,11 +1004,11 @@ hr.debug {
 }
 
 hr.debug:nth-child(n+7) {
-     margin: -10px 0 3px;
+     margin: 2px 0 3px;
 }
 
-hr.debug + b {
+hr.debug:last-child {
-     color: #2f1500;
+     display: none;
 }
 
 a:link {
@@ -1019,7 +1032,7 @@ a:hover, a:focus {
 }
 
 a:active {
-     color: #ff007c;
+     color: #ff007c !important;
 }
 
 a.control, input[type="submit"], input[type="reset"] {
@@ -1123,6 +1136,7 @@ input[type=radio] {
      padding: 2px;
      margin: 0 3px 0 8px;
      vertical-align: bottom;
+     background: none;
 }
 
 input.default { 
@@ -1263,6 +1277,12 @@ select option:hover, select option:checked {
 }
 }
 
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+select {
+     padding: 4px;
+}
+}
+
 textarea, input[name="nofilter_dataDir"] {
      background: #efe6e0;
      font-weight: bold;
@@ -1275,6 +1295,10 @@ textarea, input[name="nofilter_dataDir"] {
      width: 70%;
 }
 
+textarea[name="i2cpOpts"] {
+     overflow: hidden;
+}
+
 textarea {
      resize: none;
      height: 26px;
@@ -1437,6 +1461,11 @@ input[name^="action_"]:hover, input[name^="action_"]:focus {
      background-blend-mode: luminosity;
 }
 
+.configsectionpanel td {
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif;
+     font-size: 10pt !important;
+}
+
 .iframed .mainsection, .iframed .newtorrentsection, .iframed .addtorrentsection, .iframed .configsection, .iframed .configsectionpanel {
      border-radius: 0;
      box-shadow: inset 0 0 2px 0 #fff, 0 0 1px 0 #4f3d36;
@@ -1542,6 +1571,10 @@ code, tt {
      text-align: right !important;     
 }
 
+.trackerconfig tr:nth-child(2) td {
+     padding-top: 10px;
+}
+
 .trackerconfig input[type="text"] {
      margin-left: 0;
 }
@@ -1562,6 +1595,7 @@ code, tt {
      min-width: 16px !important;
      min-height: 16px !important;
      opacity: 0.8;
+     background: none;
      filter: sepia(50%) invert(80%) hue-rotate(150deg);
      -webkit-filter: sepia(50%) invert(80%) hue-rotate(150deg);
 }
@@ -1659,4 +1693,9 @@ select {
 select:nth-child(2) {
      margin-left: -14px;
 }
-}
+
+.snarkTorrentDownloaded {
+     white-space: nowrap;
+}
+}
+