I2PSnark theme updates

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

@@ -20,7 +20,7 @@ body {
 }
 
 tt {
-     font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono;
+     font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace;
 }
 
 body.iframed {
@@ -82,26 +82,25 @@ body.iframed {
      margin-left: 3px;
 }
 
-.snarkRefresh:link,
+.snarkRefresh:link, .snarkRefresh:visited {
-.snarkRefresh:visited {
      display: inline-block;
      font-size: 9pt;
      font-weight: bold;
-     margin: -1px !important;
+     margin: -1px 0 !important;
      padding: 5px 7px 5px 22px !important;
      text-decoration: none !important;
      letter-spacing: .1em;
      text-transform: uppercase !important;
-     opacity: 1;
      color: #444688;
-     border: 1px solid #eef;
+     border: 1px solid #ccf;
-     border-right: 1px solid #bbf;
+     border-right: 1px solid #aaf;
-     border-bottom: 1px solid #bbf;
+     border-bottom: 1px solid #aaf;
      border-radius: 0;
      background: url(images/button_tracker.png) 7px center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%);
-     box-shadow: inset 0 0 1px #fff;
+     box-shadow: inset 0 0 0 1px #fff;
-     filter: drop-shadow(0 0 1px #fff);
+     box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgba(200,200,200,0.3);
-     -webkit-filter: drop-shadow(0 0 1px #fff);
+/*     filter: drop-shadow(0 0 1px #fff);
+     -webkit-filter: drop-shadow(0 0 1px #fff);*/
 }
 
 .snarkRefresh:link:first-child {
@@ -112,28 +111,26 @@ body.iframed {
      background: url(images/button_forum.png) 7px center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%);
 }
 
-.snarkRefresh:link:hover,
+.snarkRefresh:link:hover, .snarkRefresh:link:focus {
-.snarkRefresh:link:focus {
-     opacity: 1;
      color: #f60;
+     box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgba(200,200,200,0.5);
 }
 
-.snarkRefresh:link:hover:first-child,
+.snarkRefresh:link:hover:first-child, .snarkRefresh:link:focus:first-child {
-.snarkRefresh:link:focus:first-child {
      background-image: url(images/button_snark_hover.png) !important;
      background-image: url(images/button_snark_hover.png), linear-gradient(to bottom, #ddd 0%, #fff 100%) !important;
      background-repeat: no-repeat, repeat !important;
      background-position: 7px center, center center !important;
 }
 
-.snarkRefresh:link:hover:nth-child(2),
+.snarkRefresh:link:hover:nth-child(2), .snarkRefresh:link:focus:nth-child(2) {
-.snarkRefresh:link:focus:nth-child(2) {
      background-image: url(images/button_forum_hover.png) !important;
      background-image: url(images/button_forum_hover.png), linear-gradient(to bottom, #ddd 0%, #fff 100%) !important;
 }
 
 .snarkRefresh:link:active {
      box-shadow: inset 0 0 0 1px #fff, inset 4px 4px 2px #555;
+     box-shadow: inset 0 0 0 1px #fff, inset 4px 4px 2px #555, 0 0 0 1px rgba(100,100,100,0.5);
 }
 
 .snarkRefresh:link:active:first-child {
@@ -152,8 +149,7 @@ body.iframed {
      background-position: 7px center !important;
 }
 
-.snarkRefresh:hover,
+.snarkRefresh:hover, .snarkRefresh:focus {
-.snarkRefresh:focus {
      font-size: 9pt;
      font-weight: bold;
      text-decoration: none !important;
@@ -206,6 +202,18 @@ body.iframed {
      white-space: nowrap;
 }
 
+#setPriority th {
+     padding: 5px 10px !important;
+     text-align: right !important;
+}
+
+#setPriority input[disabled], #setPriority input[disabled]:hover {
+     display: none;
+     cursor: not-allowed !important;
+     border: 1px solid #999;
+     background: linear-gradient(to bottom, #fff, #ddd);
+}
+
 .snarkTorrents {
      margin: 0;
      border: 1px solid #101;
@@ -287,7 +295,7 @@ table.snarkTorrents {
      border-bottom: 1px solid #89f;
      background: #ddf url(images/hat.png) bottom right no-repeat;
      background: url(images/hat.png) bottom right no-repeat, linear-gradient(to bottom, #dedeff, #ddf);
-     box-shadow: inset 0 0 0 1px #fff;
+     box-shadow: inset 0 0 0 1px #efefff;
 }
 
 .snarkMessages a:link,
@@ -441,7 +449,8 @@ tfoot tr:nth-child(n+1) {
 }
 
 .headerstatus {
-     text-align: center;
+     text-align: left;
+     padding-left: 15px;
 }
 
 .headerpriority {
@@ -516,13 +525,6 @@ tfoot tr:nth-child(n+1) {
      margin-left: 20px !important;
 }
 
-.snarkTorrents tfoot th tt {
-     font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono;
-     letter-spacing: .1em;
-     color: #227;
-     background: none;
-}
-
 .snarkTorrents td:nth-child(6),
 .snarkTorrents td:nth-child(7),
 .snarkTorrents td:nth-child(8) {
@@ -559,8 +561,7 @@ table.snarkTorrents {
 }
 
 .snarkTorrents td[colspan="10"] {
-     padding: 2px;
+     padding: 4px 2px !important;
-     color: #cc7 !important;
 }
 
 .snarkTorrents img {
@@ -570,7 +571,20 @@ table.snarkTorrents {
 
 .snarkTorrents tt {
      font-size: 8pt;
-     color: #ff0;
+     color: #301;
+     font-weight: bold;
+     color: #fff;
+     background: #aaf;
+     border-radius: 2px;
+     margin: 3px;
+     padding: 2px 3px;
+     letter-spacing: 0.1em;
+     display: inline-block;
+}
+
+.snarkTorrents tfoot th tt {
+     display: inline;
+     margin-left: 3px;
 }
 
 .snarkTorrentInfo img {
@@ -664,14 +678,23 @@ table.SnarkDirInfo {
      text-align: right;
 }
 
-.snarkDirInfo td {
-     min-width: 0 !important;
-}
-
 .snarkDirInfo th:first-child {
      padding-left: 5px;
 }
 
+.snarkDirInfo th a img, .snarkDirInfo th img  {
+     max-height: 20px;
+}
+
+.snarkDirInfo th img[alt="Directory"] {
+     margin-right: 5px !important;
+     margin-left: 1px !important;
+}
+
+.snarkDirInfo td {
+     min-width: 0 !important;
+}
+
 .snarkDirInfo td:first-child {
      padding-left: 4px;
      text-align: left;
@@ -742,6 +765,7 @@ td.subHeaderPriority {
      padding: 4px !important;
 }
 
+/*
 .headerstatus {
      min-width: 250px;
 }
@@ -749,6 +773,7 @@ td.subHeaderPriority {
 td.priority:last-child {
      min-width: 350px !important;
 }
+*/
 
 tr.priority:last-child {
      border-bottom: none !important;
@@ -759,9 +784,8 @@ th.headerdownloaded {
 }
 
 td.snarkFileStatus {
-     font-size: 8pt;
-     width: 80px;
      text-align: center;
+     white-space:nowrap;     
 }
 
 td.snarkFileIcon {
@@ -850,7 +874,9 @@ td:first-child {
 .snarkTorrentAction input[type="image"]:active,
 .snarkTorrents th:last-child input[type="image"]:active {
      background: linear-gradient(to bottom, #ddf 0%, #ddf 50%, #99f 51%, #99f 100%);
-     box-shadow: inset 2px 2px 2px #333;
+     box-shadow: inset 0 0 0 1px #fff, inset 2px 2px 2px #333;
+     filter: none !important;
+     -webkit-filter: none !important;
 }
 
 .snarkTorrents th:last-child input[type="image"]:hover,
@@ -882,13 +908,18 @@ td.snarkTorrentAction {
      padding: 2px 2px 2px 0;
 }
 
-td.snarkTorrentstatus {
+.snarkTorrentStatus {
-     padding: 3px 0;
+     text-align: left !important;
-     text-align: center !important;
+     white-space: nowrap;
+     padding: 3px;
 }
 
-td.snarkTorrentstatus:nth-child(2) {
+.snarkTorrentStatus b {
-     text-align: left !important;
+     margin-right: 2px;
+}
+
+.snarkTorrentStatus a {
+     font-weight: bold !important;
 }
 
 .snarkTorrentstatus:first-child {
@@ -914,7 +945,6 @@ td.snarkTorrentstatus:nth-child(2) {
      font-size: 8pt;
      line-height: 90%;
      padding: 0 3px;
-     word-spacing: -.05em;
 }
 
 .snarkTorrentRateUp,
@@ -969,7 +999,7 @@ td.snarkTorrentDownloaded {
 
 .snarkTorrents tr:hover td,
 .snarkDirInfo tr:hover td {
-     color: #0c153d !important;
+     color: #0c153d;
 }
 
 .snarkTorrents tr:hover a,
@@ -999,6 +1029,10 @@ td[onclick^="document.location"]:hover {
      background: #ddf;
 }
 
+.debuginfo .snarkTorrentEven:nth-child(even) {
+     background: #f00;
+}
+
 .snarkTorrentOdd,
 .SnarkTorrentEven {
      border-bottom: 1px inset #bbf !important;
@@ -1027,9 +1061,13 @@ td[onclick^="document.location"]:hover {
 }
 
 .snarkFileName {
-     font-size: 9pt !important;
      padding: 4px 0 !important;
      text-align: left !important;
+     font-weight: bold;
+}
+
+.snarkFileName a {
+     font-weight: bold;
 }
 
 .snarkFileSize {
@@ -1049,7 +1087,6 @@ td[onclick^="document.location"]:hover {
 
 .snarkTorrentETA {
      font-style: italic;
-     color: #dd7 !important;
 }
 
 /*
@@ -1100,12 +1137,12 @@ div.percentBarInner.percentBarComplete {
 
 */
 
-.choked {
+.choked, .choked a:hover {
-     color: #f00000 !important;
+     color: #900 !important;
 }
 
-.unchoked {
+.unchoked, .unchoked a:hover {
-     color: #00f000 !important;
+     color: #050 !important;
 }
 
 .thumb {
@@ -1142,7 +1179,7 @@ div.percentBarInner.percentBarComplete {
      font-weight: bold;
      font-variant: small-caps !important;
      display: inline-block;
-     min-width: 180px;
+     min-width: 200px;
      margin: 0 0 -4px !important;
      padding: 3px 25px 4px 22px;
      letter-spacing: .08em;
@@ -1170,14 +1207,12 @@ _:-ms-lang(x), .snarkConfigTitle, label.toggleview, .configsectionpanel .snarkCo
      color: #444;
 }
 
-.snarkConfigTitle img,
+.snarkConfigTitle img, label.toggleview img {
-label.toggleview img {
      margin-right: -2px;
      margin-top: -2px;
 }
 
-.snarkConfigTitle a,
+.snarkConfigTitle a, .snarkConfigTitle a:visited, label.toggleview {
-.snarkConfigTitle a:visited, label.toggleview {
      color: #444688 !important;
      outline: none;
 }
@@ -1203,7 +1238,7 @@ label.toggleview img {
 .page {
      font-size: 9pt !important;
      line-height: 160% !important;
-     min-width: 800px !important;
+     min-width: 900px !important;
      margin: 5px 0 0 0;
      padding: 10px;
      text-align: center;
@@ -1212,6 +1247,7 @@ label.toggleview img {
      border: 1px solid #89f;
      background: #eef;
      box-shadow: 0 0 3px 0 #bbb inset;
+     box-shadow: inset 0 0 0 1px #eef, 0 0 5px 1px #cfcfff inset;
 }
 
 form {
@@ -1235,6 +1271,7 @@ hr {
 hr.debug {
      width: 100%;
      background: #89f;
+     background: linear-gradient(to right, #89f 40%, #eef);
 }
 
 hr.debug:nth-child(n+7) {
@@ -1262,8 +1299,7 @@ a:visited {
      color: #448;
 }
 
-a:hover,
+a:hover, a:focus {
-a:focus {
      font-weight: normal;
      color: #f60;
      outline: none;
@@ -1287,11 +1323,19 @@ input {
 }
 
 input:disabled {
-     cursor: auto;
+     cursor: not-allowed;
      opacity: .5 !important;
 }
 
-input[type=submit]:disabled, a.controld {
+input:disabled[type="submit"]:hover, input.disabled[type="reset"]:hover, input:disabled[type="submit"]:focus, input.disabled[type="reset"]:focus {
+     border: 1px solid #999 !important;
+     background: linear-gradient(to bottom, #fff, #ddd);
+     cursor: not-allowed !important;
+     box-shadow: inset 0 0 0 1px #fff;
+     color: #111;
+}
+
+a.controld {
      display: none;
 }
 
@@ -1307,8 +1351,7 @@ input[type="image"], a img {
      filter: drop-shadow(0 0 1px #777);
 }
 
-input[type="image"]:hover, a img:hover,
+input[type="image"]:hover, a img:hover, input[type="image"]:focus, a img:focus {
-input[type="image"]:focus, a img:focus {
      outline: none !important;
      filter: drop-shadow(0 0 2px #f60) !important;
 }
@@ -1318,12 +1361,12 @@ input::-moz-focus-inner {
      outline: 0;
 }
 
-input[type="submit"], input[type="reset"] {
+input[type="submit"], input[type="reset"], a.control {
      font-size: 9pt;
      font-weight: normal;
      color: #333;
      min-width: 90px !important;
-     padding: 5px 3px !important;
+     padding: 5px 8px !important;
      text-align: center;
      border: 1px solid #999;
      border-radius: 2px;
@@ -1335,20 +1378,19 @@ input[type="submit"], input[type="reset"] {
      cursor: pointer !important;
 }
 
-input[type="submit"]:hover, input[type="reset"]:hover,
+input[type="submit"]:hover, input[type="reset"]:hover, input[type="submit"]:focus, input[type="reset"]:focus, a.control:hover, a.control:focus {
-input[type="submit"]:focus, input[type="reset"]:focus {
      color: #111;
      background: #fff;
      background: linear-gradient(to bottom, #ddd 0%, #fff 100%);
      border: 1px solid #89f;
 }
 
-input[type="submit"]:focus, input[type="reset"]:focus {
+input[type="submit"]:focus, input[type="reset"]:focus, a.control:focus {
      filter: drop-shadow(0 0 2px #89f);
      -webkit-filter: drop-shadow(0 0 2px #89f);
 }
 
-input[type="submit"]:active, input[type="reset"]:active {
+input[type="submit"]:active, input[type="reset"]:active, a.control:active {
      color: #333;
      background: #ddd;
      border: 1px solid #999;
@@ -1356,12 +1398,36 @@ input[type="submit"]:active, input[type="reset"]:active {
      box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px #555;
 }
 
+input[name="savepri"] {
+     margin-right: -2px !important;
+}
+
 input[type="text"], textarea {
      cursor: text !important;
 }
 
 a.control {
      vertical-align: middle;
+     text-align: left;
+     padding: 2px 5px 1px 3px !important;
+     display: inline-block;
+     margin: -1px 0 1px 5px;
+     min-width: 0 !important;
+     color: #333 !important;
+}
+
+a.control:hover, a.control:focus {
+     color: #111 !important;
+     border: 1px solid #89f;
+}
+
+a.control img {
+     margin: 0 !important;
+}
+
+.script {
+     display: inline-block;
+     margin: 5px 0 2px;
 }
 
 /*
@@ -1392,19 +1458,11 @@ input.r {
      background: #fff;
 }
 
-input[type="text"]:focus,
+input[type="text"]:focus, textarea:focus, input.r:focus, textarea[name="i2cpOpts"]:focus, input[name="nofilter_dataDir"]:focus {
-textarea:focus,
-input.r:focus,
-textarea[name="i2cpOpts"]:focus,
-input[name="nofilter_dataDir"]:focus {
      background: #fff;
 }
 
-input[type="text"],
+input[type="text"], input[type="password"], input.r, input[name="nofilter_dataDir"], textarea[name="i2cpOpts"] {
-input[type="password"],
-input.r,
-input[name="nofilter_dataDir"],
-textarea[name="i2cpOpts"] {
      font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", Verdana, "Bitstream Vera Sans", "DejaVu Sans", "Lucida Grande", Helvetica, sans-serif !important;
      min-width: 160px;
      margin: 2px 2px 2px 0;
@@ -1417,17 +1475,12 @@ textarea[name="i2cpOpts"] {
      box-shadow: inset 1px 1px 1px #ddd;
 }
 
-input[type="text"]:focus,
+input[type="text"]:focus, input[type="password"]:focus, input.r:focus, input[name="nofilter_dataDir"]:focus, textarea[name="i2cpOpts"]:focus {
-input[type="password"]:focus,
-input.r:focus,
-input[name="nofilter_dataDir"]:focus,
-textarea[name="i2cpOpts"]:focus {
      color: #000 !important;
      box-shadow: inset 0 0 0 1px #89f;
 }
 
-textarea[name="i2cpOpts"],
+textarea[name="i2cpOpts"], input[name="nofilter_dataDir"] {
-input[name="nofilter_dataDir"] {
      width: 500px;
      margin: 3px 0;
      padding: 5px;
@@ -1436,20 +1489,15 @@ input[name="nofilter_dataDir"] {
      overflow: hidden;
 }
 
-thead img,
+thead img, thead img:hover {
-thead img:hover {
      opacity: .8;
 }
 
-input[type=image],
+input[type=image], th a:link img, th a:visited img {
-th a:link img,
-th a:visited img {
      opacity: 1;
 }
 
-input[type=image]:focus,
+input[type=image]:focus, th a:focus, a:focus img {
-th a:focus,
-a:focus img {
      color: #f60;
      outline: none;
      filter: drop-shadow(0 0 1px #f60);
@@ -1532,9 +1580,11 @@ select:focus {
      color: #000;
 }
 
+/*
 select:nth-child(2) {
      margin-left: -18px;
 }
+*/
 
 @media screen and (-webkit-min-device-pixel-ratio: 0) {
 select {
@@ -1549,7 +1599,7 @@ select {
 }
 
 textarea {
-     font: 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono;
+     font: 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace;
      font-weight: bold;
      padding: 1px 4px 0;
      color: #006;
@@ -1615,8 +1665,7 @@ img:hover {
 }
 
 div.newtorrentsection td:first-child,
-div.addtorrentsection td:first-child,
+div.addtorrentsection td:first-child {
-div.configsectionpanel td:first-child {
      font-weight: bold;
      padding-right: 5px;
      padding-left: 5px;
@@ -1681,6 +1730,8 @@ div.configsectionpanel td:first-child {
 
 .trackerconfig th {
      min-width: 50px;
+     padding-top: 6px;
+     padding-bottom: 6px;
 }
 
 .trackerconfig th:first-child {
@@ -1700,6 +1751,11 @@ div.configsectionpanel td:first-child {
      background: #fff;
 }
 
+.knownTracker input[type="radio"] {
+     opacity: 0.6;
+     cursor: not-allowed;
+}
+
 .snarkTorrentNoneLoaded td {
      color: #0c153d !important;
      background: #fff;
@@ -1775,13 +1831,29 @@ table.trackerconfig td:first-child {
      text-align: right !important;
 }
 
+/*
 .configsectionpanel td[colspan="2"]:last-child, .configsectionpanel td[colspan="7"] {
      display: none;
 }
+*/
 
+.configsectionpanel tr:last-child td[colspan="3"] {
+     display: none;
+}
+
+#configs .spacer, .trackerconfig .spacer {
+     display: none;
+}
+
+/*
 .configsectionpanel td[colspan="5"], .configsectionpanel td[colspan="2"] {
      border-top: 1px solid #89f;
 }
+*/
+
+.configsectionpanel td[colspan="5"] {
+     border-top: 1px solid #89f;
+}
 
 .snarkConfig tr:nth-last-child(2) {
      background: none;
@@ -1912,19 +1984,14 @@ div.configsection a:hover {
 }
 
 code {
-     font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono;
+     font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace;
      font-size: 9pt;
      font-weight: bold;
      padding: 0 2px;
      color: #050;
 }
 
-.iframed .snarknavbar,
+.iframed .snarknavbar, .iframed .mainsection, .iframed .addtorrentsection, .iframed .newtorrentsection, .iframed .configsection, .iframed .configsectionpanel {
-.iframed .mainsection,
-.iframed .addtorrentsection,
-.iframed .newtorrentsection,
-.iframed .configsection,
-.iframed .configsectionpanel {
      border-right: none !important;
      border-left: none !important;
      border-radius: 0;
@@ -2010,6 +2077,199 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac
      transition: ease transform 0.3s 0s;
 }
 
+
+.peerinfo td:first-child {
+     background: url(images/peer.png) center center no-repeat;
+}
+
+/* debug */
+
+.debuginfo td:first-child {
+     padding: 3px;
+     background: url(images/debuginfo.png) center center no-repeat;
+     background-size: 14px 14px;
+     background-blend-mode: luminosity;
+}
+
+.debugConnection {
+     color: #030;
+     font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace;
+     word-spacing: -0.1em;
+     margin-left: 2px;
+     margin-right: 5px;
+     font-weight: bold;
+}
+
+.debugConnStat {
+     margin-right: 4px;
+     font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace;
+     color: #030;
+     font-weight: bold;
+     white-space: nowrap;
+}
+
+.debugConnStat b {
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", Verdana, "Bitstream Vera Sans", "DejaVu Sans", "Lucida Grande", Helvetica, sans-serif;
+     color: #111;
+} 
+
+.debugRequests {
+     font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace;
+     color: #030;
+     font-weight: bold;
+}
+
+.debuginfo td {
+     line-height: 120% !important;
+}
+
+.debuginfo b {
+     text-transform: capitalize;
+}
+
+.from, .to {
+     font-family: sans-serif;
+     font-size: 12pt;
+     font-weight: bold;
+     vertical-align: middle;
+     line-height: 50%;
+     text-shadow: 0 0 1px #fff;
+}
+
+/* end debug */
+
+/* Resource Errors */
+
+.resourceError {
+     border: 1px solid #89f;
+     border-bottom: 2px solid #89f;
+     margin-bottom: 0;    
+}
+
+.resourceError th {
+     background: url(/themes/console/images/info/errortriangle.png) left 10px center no-repeat, linear-gradient(to bottom, #fff, #eef);
+     background-size: 24px auto, 100% 100%;
+     padding: 10px 10px 10px 40px;
+     font-size: 10pt !important;
+     border: none;
+     border-bottom: 2px solid #89f;
+}
+
+.resourceError td {
+     padding: 10px;
+     border: none;
+}
+
+.resourceError tr:nth-child(odd) {
+     background: #ddf;
+}
+
+.resourceError tr:nth-child(even) {
+     background: #eef;
+}
+
+#DoesNotExist {
+     margin-top: 10px;
+     border: none;
+     border-bottom: 1px solid #89f;
+}
+
+#DoesNotExist th {
+     border-top: 1px solid #89f;
+}
+
+/ end resource errors */
+
+#totals {
+     display: inline-block;
+     margin: 2px 0 2px 5px;
+}
+
+/* torrent priorities */
+
+.priorityHigh {
+     background: url(/i2psnark/.resources/icons/clock_red.png) left 28px center no-repeat;
+     display: inline-block;
+     width: 48px;
+     color: transparent;
+}
+
+.priorityNormal {
+     background: url(/i2psnark/.resources/icons/clock.png) left 28px  center no-repeat;
+     display: inline-block;
+     width: 48px;
+     color: transparent;
+}
+
+.prioritySkip {
+     background: url(/i2psnark/.resources/icons/cancel.png) left 28px center no-repeat;
+     display: inline-block;
+     width: 48px;
+     color: transparent;
+}
+
+/* end priorities */
+
+/* configs */
+
+
+#configs td:nth-child(2) {
+     white-space: nowrap;
+}
+
+#configs td:first-child {
+     min-width: 180px !important;
+     padding-left: 15px !important;
+}
+
+td#bwHelp {
+     background: url(images/infocircle.png) left 10px center no-repeat;
+     background-size: 14px auto;
+     padding-left: 24px !important;
+     width: 100%;
+}
+
+td#bwHelp a {
+     display: inline-block;
+     white-space: nowrap;
+     margin-left: 3px;
+     line-height: 100%;
+}
+
+/* end configs */
+
+#torrentInfoStats td {
+     text-align: left !important;
+}
+
+#torrentInfoStats img {
+     margin: 1px 1px 2px 3px !important;
+}
+
+#torrentInfoStats b {
+     margin-left: 2px;
+}
+
+#torrentInfoStats span {
+     white-space: nowrap;
+     display: inline-block;
+     margin-right: 7px;
+}
+
+#filecheck {
+     display: inline-block;
+     margin: 5px 0;
+     background: url(images/progressbar.gif) left center no-repeat;
+     padding-left: 22px;
+}
+
+#filecheck a {
+     margin: 8px;
+}
+
+
+/* end Resource Errors */
+
 /* MS Edge 14+ fix */
 _:-ms-lang(x), * {
      filter: none !important;
@@ -2018,8 +2278,91 @@ _:-ms-lang(x), * {
 
 /* responsive layout */
 
-@media screen and (min-width: 1400px) {
+@media screen and (max-width: 950px) {
+
 body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_dataDir"], select, textarea, textarea[name="i2cpOpts"], .snarkAddInfo {
+     font-size: 8pt;
+}
+
+.snarkTorrents td:nth-child(2) {
+     white-space: nowrap;
+}
+.snarkTorrents td[colspan="10"] {
+     white-space: normal;
+}
+
+.snarkTorrentStatus b {
+     display: none;
+}
+
+b.alwaysShow {
+     display: inline;
+}
+
+.snarkTorrents td:nth-child(2), .snarkTorrents td:nth-child(2) a {
+     font-weight: bold;
+}
+
+td#bwHelp {
+     background: url(images/infocircle.png) left 10px center no-repeat;
+     background-size: 14px auto !important;
+}
+}
+
+@media screen and (max-width: 1100px) {
+.toggleview, .snarkConfigTitle {
+     font-size: 11pt !important;
+}
+
+.snarkDirInfo th a img, .snarkDirInfo th img  {
+     max-height: 18px !important;
+}
+
+body {
+     margin: 3px;
+}
+
+.page {
+     padding: 3px;
+}
+
+.addtorrentsection, .newtorrentsection, .configsection, .configsectionpanel {
+     margin-top: 3px !important;
+     margin-bottom: 3px !important;
+}
+
+.configsection, .configsectionpanel:last-child {
+     margin-bottom: 0 !important;
+}
+
+table.SnarkDirInfo {
+     margin-top: 3px !important;
+}
+
+.dirInfoComplete {
+     display: none;
+}
+}
+
+@media screen and (max-width: 1200px) {
+.trackerconfig th {
+     padding-top: 5px;
+     padding-bottom: 5px;
+}
+}
+
+@media screen and (min-width: 1100px) {
+body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_dataDir"], select, textarea, textarea[name="i2cpOpts"], .snarkAddInfo, code {
+     font-size: 9pt !important;
+}
+
+.percentDownloaded {
+     pointer-events: none; /* hide tooltip */
+}
+}
+
+@media screen and (min-width: 1400px) {
+body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_dataDir"], select, textarea, textarea[name="i2cpOpts"], .snarkAddInfo, code {
      font-size: 10pt !important;
 }
 
@@ -2034,5 +2377,29 @@ body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_
 .snarkMessages li, .snarkTorrents tt {
      font-size: 9pt;
 }
+
+.snarkTorrentAction input[type="image"], .snarkTorrents th:last-child input[type="image"] {
+     padding: 4px !important;
+     box-shadow: inset 0 0 0 1px #fff;
 }
 
+td.snarkTorrentDownloaded {
+     white-space: nowrap;
+     padding: 0 10px;
+}
+
+.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
+     min-width: 240px;
+}
+
+.snarkTorrentStatus b {
+     margin-right: 3px;
+}
+
+#configs td:first-child {
+     min-width: 220px !important;
+
+}
+
+/* end resonsive layout */
+

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

@@ -123,8 +123,8 @@ body.iframed {
 }
 
 .snarkRefresh:active {
-	color: #fff !important;
+     color: #fff !important;
-	box-shadow: inset 3px 2px 3px #000 !important;
+     box-shadow: inset 3px 2px 3px #000 !important;
 }
 
 .snarkRefresh:link:first-child:hover, .snarkRefresh:link:first-child:focus {
@@ -156,12 +156,6 @@ body.iframed {
      background-repeat: no-repeat !important;
 }
 
-
-.snarkRefresh:hover, .snarkRefresh:focus {
-     opacity: 1;
-
-}
-
 .snarkRefresh:hover, .snarkRefresh:focus {
      text-decoration: none !important;
      text-transform: uppercase !important;
@@ -208,7 +202,8 @@ body.iframed {
 }
 
 .snarkMessages {
-     font: normal 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono;
+     font: normal 8pt "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace;
+     line-height: 120%;
      text-align: left;
      margin: 0;
      padding: 3px 5px;
@@ -231,6 +226,7 @@ _:-ms-lang(x), .snarkMessages {
 
 .snarkMessages a:link, .snarkMessages a:visited {
      color: #2b2 !important;
+     font-weight: bold;
 }
 
 .snarkMessages a:hover {
@@ -286,7 +282,7 @@ _:-ms-lang(x), .snarkMessages {
 }
 
 tt {
-     font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono;
+     font-family: "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace;
 }
 
 .logshim {
@@ -295,7 +291,7 @@ tt {
 
 pre {
      width: 100%;
-     font: 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono;
+     font: 8pt "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace;
      padding: 0;
      text-align: left !important;
      height: 8px;
@@ -355,9 +351,11 @@ th:first-child img {
      margin: 1px -2px 3px 1px !important;
 }
 
+/*
 th:nth-child(2) img {
      margin: 1px 5px 3px 2px !important;
 }
+*/
 
 tfoot th {
      padding-bottom: 4px !important;
@@ -399,7 +397,7 @@ tfoot tr:nth-child(n+1) {
 .priority {
      font-size: 8pt;
      vertical-align: middle;
-     min-width: 160px;
+     max-width: 160px;
 }
 
 .SnarkTorrents {
@@ -440,7 +438,7 @@ tfoot tr:nth-child(n+1) {
      text-align: center;
 }
 
-.snarkTorrents tfoot th, .SnarkTorrents tfoot th tt {
+.snarkTorrents tfoot th {
      background: #000;
      font-weight: normal;
 }
@@ -449,12 +447,6 @@ tfoot tr:nth-child(n+1) {
      font-weight: bold;
 }
 
-.snarkTorrents tfoot th tt {
-     color: #ff0;
-     font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono;
-     background: none;
-}
-
 .snarkTorrents tfoot th:nth-child(3) {
      text-align: center;
 }
@@ -511,8 +503,14 @@ table.SnarkTorrents {
 }
 
 .snarkTorrents tt {
-     color: #ff0;
+     color: #000;
+     background: #990;
+     padding: 1px 2px;
+     border-radius: 2px;
+     margin:  1px 3px;
      font-size: 8pt;
+     font-weight: bold;
+     display: inline-block;
 }
 
 .snarkTorrentInfo img {
@@ -548,10 +546,8 @@ table.SnarkTorrents {
 
 .snarkTorrentInfo input[type="submit"] {
      min-width: 85px;
-     text-align: center;
-     margin-left: 0;
 }
-
+/*
 .snarkTorrentInfo input.stoptorrent {
      margin-right: -8px;
 }
@@ -580,6 +576,19 @@ table.snarkTorrentInfo tr:last-child td {
      padding: 8px 8px 12px !important;
      padding: 5px 5px 9px !important;
 }
+*/
+
+#torrentInfoControl, #setPriority {
+     border-top: 1px solid #494 !important;
+     background: none !important;
+}
+
+#torrentInfoControl td, #setPriority th {
+     text-align: right !important;
+     padding: 10px 8px !important;
+     background: none !important;
+     box-shadow: inset 0 0 0 1px #030;
+}
 
 table.SnarkTorrentInfo {
      margin-bottom: 1px !important;
@@ -639,17 +648,24 @@ table.SnarkDirInfo {
      padding: 2px 0;
 }
 
+.snarkTorrents .snarkTorrentName {
+     padding-left: 2px;
+}
+
+/*
 .snarkDirInfo .headerpriority {
      text-align: center !important;
      vertical-align: middle;
 }
+*/
 
 .snarkDirInfo tr:last-child {
      border-bottom: 1px solid #494 !important;
 }
 
-.headerpriority input[type=submit] {
+#setPriority, #torrentInfoControl {
-     margin: 5px -3px 5px 5px;
+     background: url(/themes/console/dark/images/camotile2.png) repeat scroll center bottom #001100 !important;
+     border-bottom: 1px solid #494 !important;
 }
 
 .SnarkDirInfo img {
@@ -658,9 +674,10 @@ table.SnarkDirInfo {
 }
 
 .snarkDirInfo thead img {
-     margin: 0 !important;
+     margin-right: 2px !important;
      max-width: none;
      max-height: none;
+     padding: 3px 2px !important;
 }
 
 .snarkDirInfo .headerpriority {
@@ -669,10 +686,6 @@ table.SnarkDirInfo {
      padding-right: 10px;
 }
 
-.snarkDirInfo .headerpriority img[src$="priority.png"] {
-     margin-right: -40px !important;
-}
-
 td.subHeaderPriority, td.priority {
      min-width: 36px !important;
      width: 0;
@@ -708,6 +721,7 @@ td.priority:last-child {
 /*     min-width: 350px !important;*/
      padding-right: 10px !important;
      text-align: right !important;
+     white-space: nowrap;
 }
 
 tr.priority:last-child {
@@ -723,9 +737,7 @@ th.headerdownloaded {
 }
 
 td.snarkFileStatus {
-     width: 80px;
      text-align: left;
-     font-size: 8pt;
      white-space: nowrap;
 }
 
@@ -774,6 +786,7 @@ td:first-child {
      margin: 0 !important;
      text-align: center !important;
      width: 40px !important;
+     white-space: nowrap;
 }
 
 _:-ms-lang(x), .snarkTorrentAction { /* MS Edge 14+ wrap fix */
@@ -815,6 +828,10 @@ td.snarkTorrentStatus:nth-child(2) {
      text-align: left !important;
 }
 
+.snarkTorrentStatus b {
+    margin-right: 2px;
+}
+
 .snarkTorrentStatus:first-child {
      text-align: left !important;
      padding-left: 0;
@@ -830,7 +847,7 @@ td.snarkTorrentStatus:nth-child(2) {
      margin-left: 6px;
 }
 
-.snarkTorrentStatus, .snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded {
+.snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded {
      font-size: 8pt;
      padding: 0 3px;
      line-height: 90%;
@@ -843,6 +860,7 @@ td.snarkTorrentStatus:nth-child(2) {
 
 .snarkTorrentDownloaded {
      color: #ee9 !important;
+     white-space: nowrap;
 }
 
 td.snarkTorrentDownloaded {
@@ -947,7 +965,6 @@ td[onclick^="document.location"]:hover {
 .snarkFileName {
      padding: 4px 0 !important;
      text-align: left !important;
-     font-size: 9pt !important;
 }
 
 .snarkFileSize {
@@ -976,6 +993,7 @@ td[onclick^="document.location"]:hover {
 .snarkTorrentETA {
      font-style: italic;
      color: #dd7 !important;
+     padding-right: 2px;
 }
 /*
 div.percentBarOuter {
@@ -1047,15 +1065,17 @@ div.percentBarInner.percentBarComplete {
 
 .snarkAddInfo {
      font-size: 9pt;
-     line-height: 130% !important;
+     line-height: 135% !important;
-     margin-left: 10px;
      font-weight: normal;
+     background: url(images/infocircle.png) left center no-repeat;
+     background-size: 14px auto;
+     padding-left: 20px;
 }
 
 .snarkConfigTitle, label.toggleview {
      font-size: 11pt;
      font-weight: bold;
-     padding: 2px 22px 3px 20px;
+     padding: 3px 22px 3px 20px;
      margin: 5px 0 10px 0 !important;
      letter-spacing: 0.2em;
      border: 1px solid #494;
@@ -1068,7 +1088,7 @@ div.percentBarInner.percentBarComplete {
      -webkit-filter: drop-shadow(0 2px 1px #000);
      display: inline-block;
      margin: 0 0 -3px !important;
-     min-width: 200px;
+     min-width: 220px;
      box-shadow: inset 0 0 0 1px #000;
 }
 
@@ -1117,9 +1137,8 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac
 
 .page {
      color: #310;
-     min-width: 800px !important;
+     min-width: 960px !important;
      margin: 5px 0 0 0;
-     border-radius: 0 0 2px 2px;
      font-size: 9pt !important;
      line-height: 160% !important;
      text-align: center;
@@ -1162,6 +1181,11 @@ hr.debug:nth-child(n+7) {
      opacity: 0.5;
 }
 
+hr.debug:last-child {
+     background: #000;
+     margin-bottom: -5px;
+}
+
 a:link {
      color: #7c7;
      text-decoration: none;
@@ -1204,9 +1228,13 @@ input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner {
      outline: none;
 }
 
-input:disabled {
+input.disabled, a.controld {
      opacity: 0.5 !important;
-     cursor: auto;
+     cursor: not-allowed !important;
+}
+
+#setPriority input.disabled, #setPriority a.controld {
+     display: none;
 }
 
 .addtorrentsection input, .newtorrentsection input {
@@ -1220,40 +1248,42 @@ input.r {
      border: 1px solid #494;
 }
 
-input[type=submit], input[type=submit]:visited {
+input[type=submit], input[type=submit]:visited, input.disabled:hover {
      color: #494;
      background: #000;
      border: 1px outset #191;
-     padding: 5px !important;
+     padding: 5px 10px !important;
      font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
-     margin-top: 6px;
      min-width: 95px;
      text-align: center;
      filter: drop-shadow(0 0 1px #000);
      -webkit-filter: drop-shadow(0 0 1px #000);
-     cursor: pointer !important;
 }
 
-input[type=submit]:hover, input[type=submit]:focus {
+input[type=submit]:hover, input[type=submit]:focus, a.control:hover, a.control:focus {
      border: 1px solid #f60;
      background-color: #000;
-     color: #f60;
+     color: #f60 !important;
      box-shadow: 0 1px 1px 0 #ee9 inset;
 }
 
-input[type=submit]:active {
+input[type=submit]:active, a.control:active {
      border: 1px solid #f60;
      background: #f60;
-     color: #ee9;
+     color: #ee9 !important;
      text-shadow: none !important;
      box-shadow: inset 3px 3px 3px #000;
      box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px #000;
 }
 
-input[type=submit]:disabled {
+input.disabled, input.disabled:hover, input.disabled:focus, input.disabled:active {
-     display: none;
+     border: 1px outset #191 !important;
+     box-shadow: none !important;
+     color: #494 !important;
+     background: #000 !important;
 }
 
+
 input[type=image], thead img {
      padding: 0 !important;
      border-radius: 3px;
@@ -1288,6 +1318,10 @@ input[type="image"]:hover, a img:hover, input[type="image"]:focus, a:focus img {
      white-space: nowrap;
 }
 
+.snarkTorrents td[colspan="10"] {
+     white-space: normal;
+}
+
 .snarkTorrents th:last-child input[type="image"], .snarkTorrents td:last-child input[type="image"] {
      border: 1px solid #000 !important;
      border: 1px solid #151 !important;
@@ -1309,6 +1343,7 @@ input[type="image"]:hover, a img:hover, input[type="image"]:focus, a:focus img {
 .snarkTorrents th:last-child input[type="image"]:active, .snarkTorrents td:last-child input[type="image"]:active {
      box-shadow: inset 3px 3px 3px #000;
      background-blend-mode: luminosity;
+     transform: scale(0.9);
 }
 
 input[type=text], input.r, textarea[name="i2cpOpts"], input[name="nofilter_dataDir"] {
@@ -1336,7 +1371,8 @@ textarea[name="i2cpOpts"], input[name="nofilter_dataDir"] {
      margin: 3px 0;
      height: 24px;
      padding: 3px;
-     width: 500px;
+     min-width: 500px;
+     width: 70%;
      resize: none;
      overflow: hidden;
 }
@@ -1388,7 +1424,7 @@ input.default {
 
 input[size="85"] {
      width: 550px;
-     width: calc(100% - 150px);
+     width: calc(100% - 170px);
 }
 
 .addtorrentsection input, .newtorrentsection input {
@@ -1435,9 +1471,11 @@ 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 {
@@ -1452,20 +1490,50 @@ textarea {
      padding: 1px 4px 0;
      border-radius: 2px;
      border: 1px solid #494;
-     font: 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono;
+     font: 8pt "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace;
 }
 
 textarea:focus {
      color: #ee9 !important;
 }
 
-input[type="submit"], input[type="reset"], select, button { /* webkit/blink fix for oversaturated colors */
+input[type="submit"], input[type="reset"], select, button, a.control, a.controld {
      border: 1px solid #8b8;
      border-bottom: 1px solid #171;
      border-right: 1px solid #171;
      background: linear-gradient(to bottom, #020 0%, #000 20%, #000 80%, #010 100%);
 }
 
+.script {
+     display: inline-block;
+     vertical-align: middle;
+     margin-top: -2px;
+}
+
+a.control, a.controld {
+     padding: 3px 8px 2px 4px;
+     border-radius: 2px;
+     text-align: left;
+     margin: 2px 4px 2px 0;
+     font-weight: bold;
+     display: inline-block;
+     color: #494 !important;
+}
+
+a.control img, a.controld img, a.control:hover img, a.control img:hover {
+     width: 14px;
+     height: 14px;
+     margin: 0;
+     padding: 0;
+     vertical-align: middle;
+     filter: none !important;
+     -webkit-filter: none !important;
+}
+
+a.control:hover img {
+     filter: sepia(100%) hue-rotate(10deg) !important;
+}
+
 img {
      border: none;
      margin: 0 3px 1px 3px;
@@ -1509,8 +1577,7 @@ img[src$="magnet.png"] {
      font-weight: bold !important;
 }
 
-.newtorrentsection td:first-child, .addtorrentsection td:first-child, .configsectionpanel td:first-child {
+.newtorrentsection td:first-child, .addtorrentsection td:first-child {
-     white-space: nowrap;
      font-weight: bold;
      padding-right: 5px;
      padding-left: 5px;
@@ -1523,7 +1590,7 @@ img[src$="magnet.png"] {
 table#trackerselect {
      border: 1px solid #131;
      width: 100% !important;
-     width: calc(100% - 150px) !important;
+     width: calc(100% - 170px) !important;
      margin: 2px 5px 0 5px;
 }
 
@@ -1563,6 +1630,13 @@ table#trackerselect {
      margin: 3px !important;
 }
 
+#trackerselect a:not(old) {
+     display: inline-block;
+     white-space: nowrap;
+     overflow: hidden;
+     text-overflow: ellipsis;
+}
+
 .configsectionpanel td:first-child {
      padding-right: 10px !important;
      padding-left: 5px !important;
@@ -1573,10 +1647,19 @@ table#trackerselect {
      min-width: 50px;
 }
 
+.trackerconfig th, .trackerselect th {
+     padding-top: 7px;
+     padding-bottom: 7px;
+}
+
 .trackerconfig th:first-child {
      background: url(/themes/snark/ubergine/images/nuke.png) center right 8px no-repeat, linear-gradient(to bottom, #010, #000);
 }
 
+.trackerselect tr:first-child td, .addtorrentsection tr:first-child td {
+     white-space: nowrap;
+}
+
 .trackerconfig th:last-child, .trackerconfig td:last-child {
      padding-left: 10px !important;
 }
@@ -1626,7 +1709,6 @@ table.trackerconfig td:first-child {
 
 .trackerconfig input {
      margin: 3px 0 !important;
-     cursor: default;
 }
 
 .optbox[name="add_tracker_type"] {
@@ -1639,6 +1721,10 @@ table.trackerconfig td:first-child {
      min-width: 100px;
 }
 
+#configs input[type=submit] {
+     margin-right: 0 !important;
+}
+
 .trackerconfig td, .snarkConfig td {
      padding: 5px 1px !important;
 }
@@ -1672,11 +1758,20 @@ table.trackerconfig td:first-child {
 }
 */
 
-.configsectionpanel td[colspan="2"]:last-child, .configsectionpanel td[colspan="7"] {
+#configs td:first-child {
+     padding-left: 15px !important;
+     line-height: 80%;
+}
+
+#configs td:first-child, .trackerconfig td:first-child {
+     padding-left: 10px !important;
+}
+
+#configs .spacer, .trackerconfig .spacer {
      display: none;
 }
 
-.configsectionpanel td[colspan="5"], .configsectionpanel td[colspan="2"] {
+.configsectionpanel td[colspan="5"] {
      border-top: 1px solid #494;
 }
 
@@ -1792,7 +1887,7 @@ code {
      font-size: 8.5pt;
      color: #ff6;
      padding: 0 2px;
-     font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono;
+     font-family: "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace;
 }
 
 .iframed .snarknavbar, .iframed .mainsection, .iframed .addtorrentsection,
@@ -1869,6 +1964,209 @@ label.toggleview, .snarkConfigTitle a:visited {
      color: #7c7;
 }
 
+
+.peerinfo td:first-child {
+     background: url(images/peer.png) center center no-repeat;
+     background-size: 14px 14px;
+}
+
+.peerinfo td, .debuginfo td {
+     padding-top: 5px;
+     padding-bottom: 5px;
+}
+
+
+/* debug */
+
+.debuginfo td:first-child {
+     background: url(images/debuginfo.png) center center no-repeat;
+     background-size: 14px 14px;
+     background-blend-mode: luminosity;
+}
+
+.debuginfo td:nth-child(2) {
+     padding-left: 0;
+}
+
+.debuginfo b {
+     text-transform: capitalize;
+     margin-left: 1px;
+}
+
+.debugConnection {
+     font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace;
+     color: #ee0;
+     line-height: 130%;
+     margin-right: 5px;
+     margin-left: 2px;
+}
+
+.from, .to {
+     font-family: sans-serif;
+     font-size: 12pt;
+     font-weight: bold;
+     vertical-align: middle;
+     line-height: 50%;
+     text-shadow: 0 0 1px #000;
+}
+
+.debugConnStat {
+     margin-right: 3px;
+     white-space: nowrap;
+}
+
+.debugConnStat, .debugRequests {
+     font-family: "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace;
+     color: #ee0;
+}
+
+.debugConnStat b {
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+     color: #cc7;
+}
+
+/* end debug */
+
+#totals {
+     display: inline-block;
+     margin-left: 3px;
+}
+
+.priorityHigh, .priorityNormal, .prioritySkip {
+     display: inline-block;
+     width: 48px;
+     color: transparent;
+     font-size: 0;
+     overflow: hidden;
+     text-align: left;
+}
+
+.priorityHigh {
+     background: url(/i2psnark/.resources/icons/clock_red.png) left 28px center no-repeat;
+}
+
+.priorityNormal {
+     background: url(/i2psnark/.resources/icons/clock.png) left 28px  center no-repeat;
+}
+
+.prioritySkip {
+     background: url(/i2psnark/.resources/icons/cancel.png) left 26px center no-repeat;
+}
+
+/* configs */
+
+#bwHelp i {
+     display: inline-block;
+     vertical-align: middle;
+}
+
+#configs td:nth-child(2) {
+     white-space: nowrap;
+}
+
+td#bwHelp {
+     background: url(images/infocircle.png) left 10px center no-repeat;
+     background-size: 14px auto;
+     padding-left: 24px !important;
+     width: 90%;
+     line-height: 100%;
+}
+
+/* end configs */
+
+#torrentInfoStats td {
+     text-align: left !important;
+     padding: 5px 2px !important;
+}
+
+#torrentInfoStats img {
+     margin: 0 3px 0 5px !important;
+}
+
+#torrentInfoStats span {
+     white-space: nowrap;
+     display: inline-block;
+     margin-right: 3px;
+}
+
+.knownTracker input[type="radio"], .knownTracker input[type="radio"]:hover {
+     opacity: 0.5;
+     cursor: not-allowed;
+     -webkit-filter: invert(100%) sepia(100%) hue-rotate(70deg) saturate(200%) !important;
+     filter: invert(100%) sepia(100%) hue-rotate(70deg) saturate(200%) !important;
+}
+
+.snarkDirInfo tr:first-child th img:first-child {
+     margin-right: 5px;
+}
+
+#filecheck {
+     display: inline-block;
+     margin: 5px 0;
+     background: url(images/progressbar.gif) left center no-repeat;
+     padding-left: 22px;
+}
+
+#filecheck a {
+     margin: 8px;
+}
+
+td#bwHelp a {
+     white-space: nowrap;
+}
+
+#configs td:first-child::after {
+   content: "";
+   display: inline-block;
+   vertical-align: middle;
+}
+
+/* Resource Errors */
+
+.resourceError {
+     margin-bottom: 0;
+     border: none;
+}
+
+.resourceError th {
+     background: url(/themes/console/images/info/errortriangle.png) left 10px center no-repeat, linear-gradient(to bottom, #010, #000);
+     background-size: 24px auto, 100% 100%;
+     padding: 10px 10px 10px 40px;
+     font-size: 10pt !important;
+     border: none;
+     border-bottom: 1px solid #494;
+}
+
+.resourceError td {
+     padding: 10px;
+     border: none;
+     font-size: 10pt;
+}
+
+.resourceError tr:nth-child(odd) {
+     background: #010;
+}
+
+.resourceError tr:nth-child(even) {
+     background: #000900;
+}
+
+#DoesNotExist {
+     margin-top: 10px;
+     border: none;
+     border-bottom: 1px solid #494;
+}
+
+#DoesNotExist th {
+     border-top: 1px solid #494;
+}
+
+#NotFound {
+     border-bottom: 1px solid #494;
+}
+
+/* end Resource Errors */
+
 /* MS Edge 14+ fix */
 _:-ms-lang(x), * {
      filter: none !important;
@@ -1877,21 +2175,120 @@ _:-ms-lang(x), * {
 
 /* responsive layout */
 
+@media screen and (max-width: 950px) {
+.snarkTorrents td:nth-child(2) {
+     white-space: nowrap;
+}
+.snarkTorrents td[colspan="10"] {
+     white-space: normal;
+}
+
+.snarkTorrentStatus b {
+     display: none;
+}
+
+b.alwaysShow {
+     display: inline;
+}
+
+.snarkTorrentStatus, .snarkTorrentStatus a {
+     font-weight: bold !important;
+}
+
+.snarkTorrents td:first-child img {
+     height: 16px;
+     width: auto;
+}
+}
+
+@media screen and (max-width: 1100px) {
+#configs td:first-child {
+     min-width: 200px !important;
+}
+}
+
+@media screen and (max-width: 1200px) {
+.dirInfoComplete {
+     display: none;
+}
+
+#configs td:first-child::after {
+   min-height: 24px;
+}
+
+td#bwHelp a {
+     margin-left: 2px;
+}
+}
+
+@media screen and (min-width: 1100px) {
+body, .snarkTorrents td, .snarkAddInfo, th, td,  code, textarea, input, input[type="submit"], input[type="reset"], select, button, a {
+     font-size: 9pt !important;
+}
+
+.snarkConfigtitle, .snarkConfigTitle a, label.toggleview {
+     font-size: 11pt !important;
+}
+
+.snarkTorrents td {
+     padding-top: 3px !important;
+     padding-bottom: 3px !important;
+}
+
+.snarkTorrentInfo td, .snarkDirInfo td, .snarkTorrents .peerinfo td {
+     padding-top: 6px !important;
+     padding-bottom: 6px !important;
+}
+
+#configs td:first-child {
+     min-width: 220px !important;
+}
+
+.snarkTorrentStatus b {
+    margin-right: 3px;
+}
+}
+
+@media screen and (min-width: 1200px) {
+.percentDownloaded {
+     pointer-events: none; /* hide tooltip */
+}
+
+#configs td:first-child::after {
+   min-height: 26px;
+}
+
+td#bwHelp a {
+     display: inline-block;
+     white-space: nowrap;
+     margin-left: 4px;
+}
+}
+
 @media screen and (min-width: 1400px) {
-body, .snarkTorrents td, .snarkAddInfo, th, td {
+body, .snarkTorrents td, .snarkAddInfo, th, td,  code, textarea, input, input[type="submit"], input[type="reset"], select, button, a {
      font-size: 10pt !important;
 }
 
 .snarkRefresh:link {
-     font-size: 10.5pt;
+     font-size: 11pt !important;
+}
+
+.snarkConfigTitle, .snarkConfigTitle a, label.toggleview {
+     font-size: 12pt !important;
+}
+
+.snarkConfigTitle, label.toggleview {
+     min-width: 240px !important;
+     padding-top: 4px;
 }
 
 .snarkRefresh:link:first-child {
      padding-left: 13px !important;
 }
 
-tt, .snarkTorrents tt, code, .snarkMessages, input, input[type="submit"], input[type="reset"], select, button, textarea {
+tt, .snarkTorrents tt, .snarkMessages, .snarkMessages a {
-     font-size: 9pt;
+     font-size: 9pt !important;
 }
 
 select {
@@ -1899,9 +2296,47 @@ select {
      padding-bottom: 4px;
 }
 
-select:nth-child(2) {
+textarea[name="i2cpOpts"] {
-     margin-left: -14px;
+     height: 26px;
+}
+
+.snarkTorrents th:last-child input[type="image"], .snarkTorrents td:last-child input[type="image"] {
+     height: 11px;
+}
+
+.snarkTorrentDownloaded {
+     white-space: nowrap;
+     padding: 0 8px;
+}
+
+.snarkTorrents td:nth-child(3), .SnarkTorrents td:nth-child(4) {
+     width: 18px !important;
+}
+
+.snarkTorrents .snarkTorrentName {
+     padding-left: 5px;
+}
+
+.debugConnection {
+     line-height: 150%;
+}
+
+.page {
+     padding: 10px;
+     border: 1px solid #494;
+     background: #001900;
+     background: linear-gradient(to bottom, #001900, #010);
+     box-shadow: inset 0 0 0 1px #000, inset 0 0 7px 3px #002900;
+}
+
+#configs td:first-child::after {
+   min-height: 28px;
+}
+
+.snarkTorrentStatus b {
+    margin-right: 4px;
 }
 }
 
 /* end responsive layout */
+

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

@@ -190,7 +190,7 @@ button::-moz-focus-inner, input::-moz-focus-inner {
 }
 
 .snarkMessages {
-     font-family: "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, mono;
+     font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace;
      font-size: 8pt;
      text-align: left;
      margin: -2px 0 0;
@@ -291,27 +291,9 @@ a:active {
      color: #f30;
 }
 
-a.control, a.controld {
-     background: #fff;
-     border-radius: 2px;
-     font-weight: bold;
-     margin: 5px 4px !important;
-     padding: 5px !important;
-     white-space: nowrap;
-     display: inline-block;
-     float: right;
-     min-width: 0 !important;
-}
-
-a.controld {
-     color: #459;
-     font-weight: normal;
-     display: none;
-}
-
 pre {
      width: 100%;
-     font: 8pt "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, mono;
+     font: 8pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace;
      padding: 0;
      text-align: left !important;
      height: 8px;
@@ -359,7 +341,7 @@ th {
      font-size: 9pt;
      border-top: 1px solid #7778bf;
      border-bottom: 1px solid #7778bf;
-     background: #fff url("../../console/light/images/header.png") repeat-x scroll center center;
+     background: #fff url(/themes/console/light/images/header.png) repeat-x scroll center center;
      background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 51%, #eef 100%);
      color: #31334f;
 }
@@ -435,12 +417,10 @@ tfoot tr:nth-child(n+1) {
 
 .headerstatus {
      text-align: left;
-     padding-left: 15px;
 }
 
 .headerpriority {
-     text-align: left;
+     text-align: center;
-     padding-left: 10px;
 }
 
 .ParentDir {
@@ -451,10 +431,14 @@ tfoot tr:nth-child(n+1) {
      padding: 4px 0;
 }
 
+.ParentDir a {
+     display: inline-block;
+     width: 100%;
+}
+
 .priority {
-     font-size: 7pt;
      vertical-align: middle;
-     min-width: 160px;
+     width: 200px;
 }
 
 .snarkTorrents {
@@ -485,7 +469,15 @@ tfoot tr:nth-child(n+1) {
 }
 
 .snarkTorrents td:nth-child(2) {
-     word-spacing: -0.08em;
+     white-space: nowrap;
+}
+
+.snarkTorrentStatus b {
+     margin-right: 3px;
+}
+
+.snarkTorrents td[colspan="10"] {
+     white-space: normal !important;
 }
 
 .snarkTorrents td:nth-child(3), .SnarkTorrents td:nth-child(4) {
@@ -494,7 +486,7 @@ tfoot tr:nth-child(n+1) {
 }
 
 .SnarkTorrents td:nth-child(4) {
-     text-align: left;
+     text-align: center;
 }
 
 .snarkTorrents td[colspan="4"], .snarkTorrents td[colspan="10"] {
@@ -511,14 +503,14 @@ tfoot tr:nth-child(n+1) {
 }
 
 .snarkTorrents tfoot th {
-     padding: 8px 4px !important;
+     padding: 5px 4px !important;
      background: #fff;
      vertical-align: top;
 }
 
+/*
 .snarkTorrents td:nth-child(n+6), .snarkTorrents tfoot th:nth-child(n+2) {
      font-variant: all-small-caps !important;
-     word-spacing: -0.2em;
 }
 
 @media screen and (-webkit-min-device-pixel-ratio:0) {
@@ -526,6 +518,7 @@ tfoot tr:nth-child(n+1) {
      font-variant: normal !important;
 }
 }
+*/
 
 td {
      padding: 2px 4px;
@@ -585,6 +578,7 @@ _:-ms-lang(x), .snarkTorrentAction {
      background: linear-gradient(to bottom, #fff 0%, #fff 50%, #ddf 51%, #ddf 100%);
      border-radius: 2px;
      border: 1px solid #89f;
+     box-shadow: inset 0 0 0 1px #fff;
      margin: 2px;
      filter: drop-shadow(0 0 1px #ddd);
      -webkit-filter: drop-shadow(0 0 1px #ddd);
@@ -653,9 +647,9 @@ _:-ms-lang(x), .snarkTorrentAction {
      line-height: 90%;
 }
 
-
 .snarkTorrentDownloaded, .snarkTorrents tfoot th:nth-last-child(5) {
      text-align: center;
+     white-space: nowrap;
 }
 
 .snarkTorrentOdd {
@@ -675,6 +669,10 @@ _:-ms-lang(x), .snarkTorrentAction {
      color: #0c111f !important;
 }
 
+.peerinfo:hover td:first-child {
+     background: url(images/peer.png) center center no-repeat  #ffd !important;
+}
+
 .snarkTorrents tr:hover img {
      mix-blend-mode: normal;
 }
@@ -695,7 +693,6 @@ _:-ms-lang(x), .snarkTorrentAction {
 .snarkFileName {
      padding: 4px 0 !important;
      text-align: left !important;
-     font-size: 8pt !important;
 }
 
 .snarkFileSize {
@@ -704,10 +701,10 @@ _:-ms-lang(x), .snarkTorrentAction {
 }
 
 .snarkFileStatus {
-     padding: 4px 5px 4px 15px;
+     padding: 4px 5px;
      font-style: italic;
      text-align: left;
-     min-width: 230px;
+     white-space: nowrap;
 }
 
 .snarkTorrentETA {
@@ -715,7 +712,7 @@ _:-ms-lang(x), .snarkTorrentAction {
 }
 
 .choked {
-     color: #f00000 !important;
+     color: #a00 !important;
 }
 
 .unchoked {
@@ -739,7 +736,12 @@ _:-ms-lang(x), .snarkTorrentAction {
 
 .snarkAddInfo {
      font-size: 9pt;
-     line-height: 130% !important;
+     display: inline-block;
+     margin-top: 7px;
+     background: url(images/infocircle.png) left center no-repeat;
+     background-size: 16px auto;
+     padding-left: 20px;
+     min-height: 16px;
 }
 
 .snarkConfigTitle:hover, .toggleview:hover {
@@ -758,7 +760,7 @@ _:-ms-lang(x), .snarkTorrentAction {
 .configsectionpanel .snarkConfigTitle:hover {
      font-size: 11pt;
      font-weight: bold;
-     padding: 2px 15px 2px 15px;
+     padding: 3px 15px;
      margin: 0 0 -3px 0 !important;
      letter-spacing: 0.15em;
      border: 1px solid #7778bf;
@@ -851,6 +853,11 @@ _:-ms-lang(x), .snarkConfigTitle, .snarkConfigTitle a, label.toggleview,
      padding: 6px 1px;
 }
 
+.snarkTorrentInfo th:first-child {
+     background: url(images/file.png) center left 5px no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 51%, #eef 100%);
+     background-size: 14px auto, 100% 100%;
+}
+
 .snarkTorrentInfo td {
      text-align: left !important;
      padding: 3px 0 3px 1px !important;
@@ -874,24 +881,24 @@ _:-ms-lang(x), .snarkConfigTitle, .snarkConfigTitle a, label.toggleview,
      border-bottom: 1px solid #7778bf;
 }
 
-.snarkTorrentInfo input {
-     float: right;
-}
-
 .snarkDirInfo thead img {
      margin: 0 !important;
      padding: 0 2px !important;
 }
 
+/*
 .snarkDirInfo td {
      min-width: 0 !important;
 }
+*/
 
+/*
 .snarkDirInfo .ParentDir a, .snarkDirInfo .snarkFileName a, .snarkTorrents .snarkTorrentName a {
      display: inline-block;
      width: 100%;
      padding: 2px 0;
 }
+*/
 
 table#trackerselect {
      width: 100% !important;
@@ -991,22 +998,19 @@ input.r {
      border: 1px solid #7778bf;
 }
 
-input[type=submit], a.control {
+input[type=submit], a.control, input.disabled {
      color: #227;
      background: #fff;
      background: linear-gradient(to bottom, #fff 0%, #fff 50%, #ddf 50%, #ddf 100%);
      border: 1px solid #7778bf;
-     padding: 2px;
+     padding: 5px 8px !important;
      font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
-     margin: 6px 10px 6px 0;
+     margin: 6px 3px 6px 6px !important;
      border-radius: 2px;
      min-width: 90px;
      text-align: center;
      box-shadow: inset 0 0 0 1px #fff;
-}
+     filter: drop-shadow(0 0 1px #bbb);
-
-input[type=submit] {
-     padding: 5px !important;
 }
 
 input[type=submit]:hover, input[type=submit]:focus, a.control:hover, a.control:focus {
@@ -1024,6 +1028,27 @@ input[type=submit]:active, a.control:active {
      box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 4px #333;
 }
 
+a.control, a.controld {
+     border-radius: 2px;
+     font-weight: bold;
+     margin: 6px 3px 6px 3px !important;
+     padding: 4px 8px 4px 5px !important;
+     white-space: nowrap;
+     display: inline-block;
+     min-width: 0 !important;
+}
+
+a.controld {
+     color: #459;
+     font-weight: normal;
+     display: none;
+}
+
+a.control img {
+     filter: none;
+     -webkit-filter: none;
+}
+
 input[type=image], thead img {
      padding: 0 !important;
      border-radius: 0;
@@ -1074,6 +1099,7 @@ textarea[name="i2cpOpts"] {
 input[name="nofilter_dataDir"], textarea[name="i2cpOpts"] {
      width: 60%;
      min-width: 500px !important;
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
 }
 
 input[type="radio"] {
@@ -1097,12 +1123,14 @@ input.default {
      display: none;
 }
 
-input.disabled, input.disabled:hover, a.controld {
+input.disabled, input.disabled:hover, input.disabled:active, a.controld {
-     background-color: #fff;
+     background: #fff !important;
-     border: 1px inset #191;
+     color: #459 !important;
-     color: #459;
      font-weight: normal;
+     opacity: 0.6;
+     cursor: not-allowed;
      display: none;
+     box-shadow: none !important;
 }
 
 select {
@@ -1127,9 +1155,11 @@ select:active, select option {
      background: #fff;
 }
 
+/*
 select + select {
      margin-left: -18px;
 }
+*/
 
 textarea {
      background: #eef;
@@ -1137,7 +1167,7 @@ textarea {
      font-weight: bold;
      padding: 2px 4px;
      border-radius: 2px;
-     border: 1px solid #66f;
+     border: 1px solid #7778bf;
      font-size: 8pt;
 }
 
@@ -1313,7 +1343,15 @@ code, tt {
      font-size: 8.5pt;
      color: #0045ff;
      font-weight: bold;
-     font-family: "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, mono;
+     font-family: "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace;
+}
+
+.snarkTorrents tt {
+     background: #99f;
+     color: #fff;
+     border-radius: 2px;
+     padding: 2px 3px;
+     margin: 1px 3px 1px 1px;
 }
 
 .routerdown {
@@ -1327,6 +1365,10 @@ code, tt {
      border-spacing: 0;
 }
 
+.trackerconfig tr:first-child {
+     filter: drop-shadow(0 0 1px #999);
+}
+
 .trackerconfig th:first-child {
      border-radius: 2px 0 0 2px;
      border-left: 1px solid #339;
@@ -1402,6 +1444,229 @@ input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent
      display: none;
 }
 
+.peerinfo td:first-child {
+     background: url(images/peer.png) center center no-repeat;
+     padding-right: 10px !important;
+}
+
+.peerinfo td, .debuginfo td {
+     padding-top: 5px !important;
+     padding-bottom: 5px !important;
+     word-spacing: 0em !important;
+}
+
+/* debug */
+
+.debuginfo td {
+     font-size: 8pt !important;
+     line-height: 120%;
+}
+
+.debuginfo td:first-child {
+     background: url(images/debuginfo.png) center center no-repeat;
+     background-size: 14px 14px;
+     background-blend-mode: luminosity;
+}
+
+.debuginfo b {
+     text-transform: capitalize;
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+}
+
+.debugConnection {
+     font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace;
+     font-weight: bold !important;
+     color: #030;
+     font-weight: bold;
+     margin-right: 5px;
+}
+
+.from, .to {
+     font-family: sans-serif;
+     font-size: 12pt;
+     font-weight: bold;
+     vertical-align: middle;
+     line-height: 50%;
+}
+
+.debugConnStat {
+     color: #030;
+     margin-right: 4px;
+     white-space: nowrap;
+     font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace;
+     font-weight: bold !important;
+     word-spacing: -0.1em;
+}
+
+.debugConnStat b {
+     color: #272e3f;
+     margin-right: 0;
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+}
+
+/* end debug */
+
+/* Resource Errors */
+
+.resourceError {
+     border: 1px solid #89f;
+     border-bottom: 2px solid #89f;
+     margin-bottom: 0;
+}
+
+.resourceError th {
+     background: url(/themes/console/images/info/errortriangle.png) left 10px center no-repeat, linear-gradient(to bottom, #fff, #eef);
+     background-size: 24px auto, 100% 100%;
+     padding: 10px 10px 10px 40px;
+     font-size: 10pt !important;
+     border: none;
+     border-bottom: 1px solid #7778bf;
+}
+
+.resourceError td {
+     padding: 10px;
+     border: none;
+}
+
+.resourceError tr:nth-child(odd) {
+     background: #ddf;
+}
+
+.resourceError tr:nth-child(even) {
+     background: #eef;
+}
+
+#DoesNotExist {
+     margin-top: 10px;
+     border: none;
+}
+
+#DoesNotExist th {
+     border-top: 1px solid #7778bf;
+}
+
+#NotFound {
+     border: none;
+     border-top: 1px solid #7778bf;
+}
+
+/* end Resource Errors */
+
+#totals {
+     display: inline-block;
+     margin: 2px 0 2px 5px;
+}
+
+/* Downloading Priorities */ 
+
+.snarkDirInfo input[type="radio"], .snarkDirInfo input[type="radio"]:checked {
+     margin: 0;
+     padding: 0;
+     min-height: 16px;
+     min-width: 16px;
+     vertical-align: middle;
+}
+
+.priority {
+     text-align: center;
+     width: 160px;
+}
+
+.priorityHigh, .priorityNormal, .prioritySkip {
+     display: inline-block;
+     width: 40px;
+     color: transparent;
+     vertical-align: middle;
+     margin: 3px 10px 3px 3px;
+     overflow: hidden;
+     font-size: 0;
+     text-align: left;
+}
+
+.priorityHigh {
+     background: url(/i2psnark/.resources/icons/clock_red.png) left 20px center no-repeat;
+}
+
+.priorityNormal {
+     background: url(/i2psnark/.resources/icons/clock.png) left 20px center no-repeat;
+}
+
+.prioritySkip {
+     background: url(/i2psnark/.resources/icons/cancel.png) left 18px center no-repeat;
+}
+
+/* end priorities */
+
+/* configs */
+
+#configs td:nth-child(2) {
+     white-space: nowrap;
+}
+
+#configs td:first-child {
+     min-width: 220px !important;
+     font-weight: bold;
+}
+
+td#bwHelp {
+     background: url(images/infocircle.png) left 10px center no-repeat;
+     background-size: 14px auto;
+     padding-left: 28px !important;
+     width: 90%;
+     line-height: 100%;
+}
+
+td#bwHelp a {
+     display: inline-block;
+     white-space: nowrap;
+}
+
+/* end configs */
+
+#filecheck {
+     display: inline-block;
+     margin: 5px 0;
+     background: url(images/progressbar.gif) left center no-repeat;
+     padding-left: 22px;
+}
+
+#filecheck a {
+     margin: 8px;
+}
+
+#torrentInfoControl td, #setPriority th {
+     text-align: right !important;
+     padding: 5px !important;
+     background: linear-gradient(to bottom, #fff, #eef) !important;
+}
+
+#torrentInfoControl input {
+     display: inline;
+}
+
+#setPriority th {
+     border-bottom: 1px solid #eef;
+}
+
+#torrentInfoStats td {
+     text-align: left !important;
+     padding-left: 2px !important;
+}
+
+#torrentInfoStats img {
+     margin: 1px 1px 2px 3px !important;
+}
+
+#torrentInfoStats b {
+     margin-left: 2px;
+}
+
+#torrentInfoStats span {
+     white-space: nowrap;
+     display: inline-block;
+     margin-right: 7px;
+}
+
 /* MS Edge 14+ fix */
 _:-ms-lang(x), * {
      filter: none !important;
@@ -1415,16 +1680,46 @@ body, td, .snarkMessages li, .snarkMessages a, button, input, select, .snarkAddI
      font-size: 8pt !important;
 }
 
-.snarkConfigTitle a {
+.snarkConfigTitle a, .snarkConfigTitle, .toggleview {
-     font-size: 10.5pt !important;
+     font-size: 10pt !important;
 }
 
-@media screen and (-webkit-min-device-pixel-ratio:0) {
+.snarkTorrents td:first-child img {
+     max-height: 16px;
+}
+
+.snarkTorrentName, .snarkTorrentName a {
+     font-weight: bold;
+}
+
+.snarkTorrents td:nth-child(2), .snarkTorrents td:nth-child(2) a {
+     white-space: nowrap;
+     font-weight: bold;
+}
+
+.snarkTorrentStatus b {
+     display: none;
+}
+
+b.alwaysShow {
+     display: inline;
+}
+}
+
+/*
+@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 1000px) {
 .snarkConfigTitle a, label.toggleview {
      font-size: 14pt !important;
 }
 }
+*/
+
+@media screen and (max-width: 1200px) {
+.dirInfoComplete {
+     display: none;
 }
+}
+
 
 /* enable to hide status text, upload speed + upload amount in main torrent table at 800px or less */
 /*
@@ -1445,8 +1740,23 @@ body, td, .snarkMessages li, .snarkMessages a, button, input, select, .snarkAddI
 }
 */
 
+@media screen and (min-width: 1200px) {
+.percentDownloaded {
+     pointer-events: none; /* hide tooltip */
+}
+
+#configs tr:nth-last-child(n+4) td {
+      padding-top: 3px;
+      padding-bottom: 3px;
+}
+
+.snarkTorrentName {
+     padding-left: 4px;
+}
+}
+
 @media screen and (min-width: 1400px) {
-body, td, button, input, select, .snarkAddInfo, code, tt, th, a, a:link {
+body, td, button, input, select, .snarkAddInfo, code, tt, th, a, a:link, textarea {
      font-size: 10pt !important;
 }
 
@@ -1463,22 +1773,13 @@ a.snarkRefresh:first-child {
      padding-left: 16px !important;
 }
 
-.configsectionpanel .snarkConfigTitle:hover {
+.configsectionpanel .snarkConfigTitle:hover, .snark {
      font-size: 12pt !important;
      padding: 3px 15px !important;
 }
 
-.snarkConfigTitle a, label.toggleview {
+.snarkConfigTitle, .snarkConfigTitle a, label.toggleview {
      font-size: 12pt !important;
-     padding: 1px 15px 4px;
-}
-
-@media screen and (-webkit-min-device-pixel-ratio:0) {
-.snarkConfigTitle a, label.toggleview,
-.configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
-     font-size: 14pt !important;
-     padding: 3px 15px 4px !important;
-}
 }
 
 input[type="submit"] {
@@ -1489,13 +1790,52 @@ input[type="submit"] {
      height: 58px;
 }
 
-.snarkConfigTitle, label.toggleview {
+.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
-     font-size: 12pt;
+     font-size: 12pt !important;
-     padding: 3px 15px;
+     padding: 4px 15px !important;
 }
 
-.snarkTorrentDownloaded {
+.snarkTorrentStatus b {
+     padding-right: 3px;
+}
+
+.snarkTorrentDownloaded, .snarkTorrertUploaded, .snarkTorrentRateDown, .snarkTorrentStatus, .peerinfo td:nth-child(2), .debuginfo td:nth-child(2) {
      white-space: nowrap;
+     padding: 2px 8px 2px 3px !important;
+}
+
+.snarkTorrentAction input[type="image"], .snarkTorrents th:last-child input[type="image"] {
+     padding: 4px !important;
+}
+
+.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
+     min-width: 240px;
+}
+
+.debuginfo td {
+     font-size: 10pt !important;
+     word-spacing: 0em;
+     padding-top: 4px !important;
+     padding-bottom: 4px !important;
+}
+
+.debugConnection {
+     background: #337;
+     border-radius: 2px;
+     padding: 2px 4px;
+     color: #fff;
+     margin-top: 2px;
+     margin-bottom: 2px;
+     font-size: 9pt !important;
+     display: inline-block;
+}
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1400px) {
+.snarkConfigTitle a, label.toggleview,
+.configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
+     font-size: 14pt !important;
+     padding: 3px 15px 4px !important;
 }
 }