From d2edce845af25b90442019dfc29b0a25aadbfe5a Mon Sep 17 00:00:00 2001
From: str4d <str4d@mail.i2p>
Date: Sat, 1 Jul 2017 19:55:19 +0000
Subject: [PATCH] I2PSnark:

- Standalone:
  - Better target the per-theme resources
  - List all available themes in config section
- Themes: tidyups & further optimizations to reduce lag
---
 apps/i2psnark/java/build.xml                  |  55 ++--
 .../src/org/klomp/snark/SnarkManager.java     |   2 +-
 history.txt                                   |   7 +-
 .../resources/themes/snark/classic/snark.css  |  32 +-
 .../resources/themes/snark/dark/snark.css     | 285 +++++-------------
 .../resources/themes/snark/light/snark.css    |  18 +-
 .../resources/themes/snark/midnight/snark.css |  16 +-
 .../resources/themes/snark/ubergine/snark.css |  83 +++--
 .../resources/themes/snark/vanilla/snark.css  |  41 ++-
 9 files changed, 243 insertions(+), 296 deletions(-)

diff --git a/apps/i2psnark/java/build.xml b/apps/i2psnark/java/build.xml
index 523d9f366..184740a72 100644
--- a/apps/i2psnark/java/build.xml
+++ b/apps/i2psnark/java/build.xml
@@ -88,8 +88,8 @@
                 <attribute name="X-Compile-Target-JDK" value="${javac.version}" />
             </manifest>
         </jar>
-    </target>    
-    
+    </target>
+
     <target name="jarUpToDate">
         <uptodate property="jar.uptodate" targetfile="build/i2psnark.jar" >
             <srcfiles dir= "build/obj" includes="**/*.class" excludes="**/web/* **/messages_*.class" />
@@ -137,13 +137,13 @@
             </manifest>
         </war>
     </target>
-    
+
     <target name="warUpToDate">
         <uptodate property="war.uptodate" targetfile="../i2psnark.war" >
             <srcfiles dir= "." includes="build/obj/org/klomp/snark/web/*.class ../resources/**/* ../web.xml" />
         </uptodate>
     </target>
-    
+
     <target name="bundle" depends="compile" unless="no.bundle">
         <mkdir dir="build/messages-src" />
         <!-- Update the messages_*.po files.
@@ -155,7 +155,7 @@
         <exec executable="sh" osfamily="mac" failifexecutionfails="true" failonerror="${require.gettext}" >
             <arg value="./bundle-messages.sh" />
         </exec>
-		<!-- multi-lang is optional -->
+        <!-- multi-lang is optional -->
         <exec executable="sh" osfamily="windows" failifexecutionfails="false" >
             <arg value="./bundle-messages.sh" />
         </exec>
@@ -242,51 +242,66 @@
         <copy todir="build/standalone-resources/.resources/themes/snark" >
             <fileset dir="../../../installer/resources/themes/snark/" />
         </copy>
+
         <replace dir="build/standalone-resources/.resources/themes/snark"
             summary="true"
-            token="url('/themes/"
-            value="url('/i2psnark/.resources/themes/" >
+            token="url(/themes/console/classic/images/"
+            value="url(/i2psnark/.resources/themes/snark/classic/images/" >
             <include name="**/*.css" />
         </replace>
         <replace dir="build/standalone-resources/.resources/themes/snark"
             summary="true"
-            token="url('../../console/images/"
-            value="url('/i2psnark/.resources/themes/snark/ubergine/images/" >
+            token="url(/themes/console/dark/images/"
+            value="url(/i2psnark/.resources/themes/snark/dark/images/" >
             <include name="**/*.css" />
         </replace>
         <replace dir="build/standalone-resources/.resources/themes/snark"
             summary="true"
-            token="url('../../console/dark/images/"
-            value="url('/i2psnark/.resources/themes/snark/ubergine/images/" >
+            token="url(../../console/light/images/"
+            value="url(/i2psnark/.resources/themes/snark/light/images/" >
             <include name="**/*.css" />
         </replace>
         <replace dir="build/standalone-resources/.resources/themes/snark"
             summary="true"
-            token="url('../../console/light/images/"
-            value="url('/i2psnark/.resources/themes/snark/ubergine/images/" >
+            token="url(/themes/console/light/images/"
+            value="url(/i2psnark/.resources/themes/snark/light/images/" >
             <include name="**/*.css" />
         </replace>
         <replace dir="build/standalone-resources/.resources/themes/snark"
             summary="true"
-            token="url('images/"
-            value="url('/i2psnark/.resources/themes/snark/ubergine/images/" >
+            token="url(/themes/console/images/transparent.gif"
+            value="url(/i2psnark/.resources/themes/snark/ubergine/images/transparent.gif" >
             <include name="**/*.css" />
         </replace>
-        <copy todir="build/standalone-resources/.resources/themes/snark/ubergine/images" >
-            <!-- we really don't need all of these -->
-            <fileset dir="../../../installer/resources/themes/console/images/" />
-        </copy>
+        <replace dir="build/standalone-resources/.resources/themes/snark"
+            summary="true"
+            token="url(/themes/console/images/info/"
+            value="url(/i2psnark/.resources/themes/snark/ubergine/images/" >
+            <include name="**/*.css" />
+        </replace>
+
+        <!-- Rather than pulling in all the console theme images, let's just specify the ones we need -->
         <copy file="../../../installer/resources/themes/console/images/transparent.gif"
               todir="build/standalone-resources/.resources/themes/snark/ubergine/images" />
         <copy file="../../../installer/resources/themes/console/dark/images/header.png"
+              todir="build/standalone-resources/.resources/themes/snark/dark/images" />
+        <copy file="../../../installer/resources/themes/console/light/images/header.png"
+              todir="build/standalone-resources/.resources/themes/snark/light/images" />
+        <copy file="../../../installer/resources/themes/console/dark/images/camotile2.png"
+              todir="build/standalone-resources/.resources/themes/snark/dark/images" />
+        <copy file="../../../installer/resources/themes/console/images/info/errortriangle.png"
               todir="build/standalone-resources/.resources/themes/snark/ubergine/images" />
+        <copy file="../../../installer/resources/themes/console/classic/images/bg0.png"
+              todir="build/standalone-resources/.resources/themes/snark/classic/images" />
+
         <mkdir dir="build/standalone-resources/.resources/js" />
         <copy file="../../routerconsole/jsp/js/ajax.js" todir="build/standalone-resources/.resources/js" />
+
         <zip destfile="../i2psnark.war" update="true" duplicate="preserve" >
             <fileset dir="build/standalone-resources" />
         </zip>
     </target>
-    
+
     <target name="standalone_prep" depends="standalone_jar, standalone_war">
         <delete dir="./dist" />
         <mkdir dir="./dist" />
diff --git a/apps/i2psnark/java/src/org/klomp/snark/SnarkManager.java b/apps/i2psnark/java/src/org/klomp/snark/SnarkManager.java
index d06ea0b82..09b92d53d 100644
--- a/apps/i2psnark/java/src/org/klomp/snark/SnarkManager.java
+++ b/apps/i2psnark/java/src/org/klomp/snark/SnarkManager.java
@@ -850,7 +850,7 @@ public class SnarkManager implements CompleteListener, ClientApp {
                 themes = new String[0];
             }
         } else {
-            themes = new String[] { "light", "ubergine", "vanilla" };
+            themes = new String[] { "classic", "dark", "light", "midnight", "ubergine", "vanilla" };
         }
         return themes;
     }
diff --git a/history.txt b/history.txt
index f915b401d..7b97d142c 100644
--- a/history.txt
+++ b/history.txt
@@ -15,7 +15,12 @@
    - /tunnels:
      - Tag "Local" for translation (and convert to lowercase in CSS)
      - Arabic: ensure our tunnel tables display correctly
- * I2PSnark: Fix unclosed <label>
+ * I2PSnark:
+   - Fix unclosed <label>
+   - Standalone:
+     - Better target the per-theme resources
+     - List all available themes in config section
+   - Themes: tidyups & further optimizations to reduce lag
 
 2017-06-19 str4d
  * Console:
diff --git a/installer/resources/themes/snark/classic/snark.css b/installer/resources/themes/snark/classic/snark.css
index fa6a85247..5c9063f36 100644
--- a/installer/resources/themes/snark/classic/snark.css
+++ b/installer/resources/themes/snark/classic/snark.css
@@ -3,7 +3,7 @@
 
 body {
      font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", Verdana, "Bitstream Vera Sans", "DejaVu Sans", "Lucida Grande", Helvetica, sans-serif;
-     color: #0c153d;
+     color: #2c354f;
      background: #eef url(/themes/console/classic/images/bg0.png) repeat scroll center bottom;
      background-size: 120px 120px;
 }
@@ -173,7 +173,7 @@ body.iframed {
 /* screenlog */
 
 .snarkMessages {
-     overflow: auto;
+     overflow: hidden;
      width: auto;
      height: 53px;
      margin: 0;
@@ -186,6 +186,14 @@ body.iframed {
      box-shadow: inset 0 0 0 1px #ddf;
 }
 
+.snarkMessages:hover, .snarkMessages:focus {
+     overflow: auto;
+}
+
+.snarkMessages:focus {
+     box-shadow: inset 0 0 0 1px #f90;
+}
+
 .snarkMessages ul {
      margin: -2px 0 2px 0;
      padding: 0 0 0 14px;
@@ -772,7 +780,7 @@ th.headerdownloaded {
 td {
      font-size: 9pt;
      padding: 2px;
-     color: #333 !important;
+     color: #2c354f !important;
 }
 
 td:first-child {
@@ -835,12 +843,28 @@ td:first-child {
      font-size: 8.5pt;
      font-weight: bold;
      padding: 10px 5px;
-     text-align: center !important;
      color: #4f2 !important;
      border-bottom: 1px solid #89f;
      background: #fff;
 }
 
+.snarkTorrentNoneLoaded td {
+     text-align: center !important;
+}
+
+.snarkTorrentNoneLoaded i {
+     display: inline-block;
+     padding: 10px;
+}
+
+.snarkTorrentNoneLoaded i::before {
+     content: url(images/bullet.png);
+     display: inline-block;
+     vertical-align: top;
+     margin: 1px 4px 0 0 !important;
+     transform: scale(0.95);
+}
+
 .snarkTorrentStatus {
      text-align: left !important;
      white-space: nowrap;
diff --git a/installer/resources/themes/snark/dark/snark.css b/installer/resources/themes/snark/dark/snark.css
index 54e6e2f5d..b676e549c 100644
--- a/installer/resources/themes/snark/dark/snark.css
+++ b/installer/resources/themes/snark/dark/snark.css
@@ -46,16 +46,13 @@ body.iframed {
 }
 
 .page {
-     color: #310;
      min-width: 890px !important;
-     margin: 5px 0 0 0;
+     margin: 5px 0 0;
      font-size: 9pt !important;
      line-height: 160% !important;
      text-align: center;
-     opacity: 1;
      background: #000;
      background: repeating-linear-gradient(135deg, #010, #010 10px, #020 10px, #020 20px, #010 20px);
-     box-shadow: inset 0 0 0 1px #000 !important;
 }
 
 .iframed .page {
@@ -63,7 +60,6 @@ body.iframed {
      background: none;
      padding: 0;
      margin: 5px 0;
-     box-shadow: none;
      background: url(/themes/console/dark/images/camotile2.png) repeat scroll left top #000;
      background: linear-gradient(to right, #000, #020 50%, #000) !important;
 }
@@ -225,7 +221,7 @@ body.iframed {
      text-align: left;
      margin: 0;
      padding: 3px 5px;
-     overflow: auto;
+     overflow: hidden;
      resize: none;
      color: #69f;
      height: 54px;
@@ -236,6 +232,14 @@ body.iframed {
      background-blend-mode: screen;
 }
 
+.snarkMessages:hover, .snarkMessages:focus {
+     overflow: auto;
+}
+
+.snarkMessages:focus {
+     box-shadow: inset 0 0 0 1px #930;
+}
+
 /* MS Edge fix */
 _:-ms-lang(x), .snarkMessages {
      background: url(/themes/snark/ubergine/images/hat.png) no-repeat scroll right bottom, linear-gradient(to bottom, #010, #000);
@@ -252,7 +256,7 @@ _:-ms-lang(x), .snarkMessages {
 }
 
 .snarkMessages ul {
-     margin: -1px 0 2px 0;
+     margin: -1px 0 2px;
      padding: 0 0 0 14px;
      list-style: none;
 }
@@ -302,16 +306,6 @@ tt {
      margin-top: -10px !important;
 }
 
-pre {
-     width: 100%;
-     font: 8pt "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
-     padding: 0;
-     text-align: left !important;
-     height: 8px;
-     color: #35f;
-     font-weight: bold !important;
-}
-
 table {
      margin: 0 0 10px;
      border: 0;
@@ -320,7 +314,6 @@ table {
      border-collapse: collapse;
      color: #323;
      width: 100%;
-     opacity: 1 !important;
 }
 
 thead, tfoot {
@@ -398,24 +391,10 @@ tfoot th {
      text-align: center;
 }
 
-.SnarkTorrents th:first-child {
-     text-align: center;
-     width: 30px;
-     padding-right: 0;
-}
-
 .SnarkTorrents th br {
      display: none; /* kill double height button display */
 }
 
-.snarkTorrents tfoot th:nth-child(2) {
-     text-align: center;
-}
-
-.snarkTorrents tfoot th:nth-child(n+2) {
-     white-space: nowrap;
-}
-
 #pagenav, th.snarkTorrentETA, th.snarkTorrentDownloaded, th.snarkTorrentUploaded, th.snarkTorrentRateDown, th.snarkTorrentRateUp, th.SnarkTorrentAction {
      text-align: center;
 }
@@ -425,10 +404,6 @@ tfoot th {
      font-weight: normal;
 }
 
-.snarkTorrents tfoot th:nth-child(3) {
-     text-align: center;
-}
-
 .snarkTorrents tfoot tr:first-child th {
      padding: 6px 4px !important;
      vertical-align: middle;
@@ -455,10 +430,6 @@ tfoot th {
      font-size: 8pt !important;
 }
 
-.snarkGraphicStatus {
-     width: 24px !important;
-}
-
 .snarkTrackerDetails, .SnarkTorrentDetails {
      width: 16px !important;
      padding: 0 !important;
@@ -478,6 +449,10 @@ th.snarkTorrentStatus {
      text-align: center !important;
 }
 
+.snarkTorrentStatus a {
+     font-weight: bold;
+}
+
 .snarkTorrentETA, .snarkTorrentUploaded, .snarkTorrentRateDown, .snarkTorrentRateUp {
      width: 5%;
      min-width: 40px;
@@ -488,7 +463,7 @@ th.snarkTorrentStatus {
      width: 0 !important;
 }
 
-.snarkTorrents td[colspan="10"]{
+.snarkTorrents td[colspan="10"] {
      padding: 2px;
      color: #cc7 !important;
 }
@@ -503,7 +478,7 @@ th.snarkTorrentStatus {
      background: #990;
      padding: 1px 2px;
      border-radius: 2px;
-     margin:  1px 3px;
+     margin: 1px 3px;
      font-size: 8pt;
      font-weight: bold;
      display: inline-block;
@@ -565,13 +540,10 @@ th.snarkTorrentStatus {
 
 .snarkTorrentInfo tr:nth-child(even) {
      background: #001000;
-     color: #bb7;
-     vertical-align: middle !important;
 }
 
 .snarkTorrentInfo tr:nth-child(odd) {
      background: #001a00;
-     color: #bb7;
 }
 
 .SnarkDirInfo {
@@ -662,7 +634,7 @@ td.subHeaderPriority, td.priority {
 td.subHeaderPriority {
      background: #020;
      font-weight: bold;
-     background: url("images/snarktopnav.png") repeat-x scroll center center #110011;
+     background: url(images/snarktopnav.png) repeat-x scroll center center #110011;
      background-image: linear-gradient(to bottom, #030 0%, #020 50%, #000 51%, #000 100%);
      text-align: center !important;
      padding: 0 1px !important;
@@ -717,18 +689,13 @@ th.headerdownloaded {
 }
 
 td {
-     padding: 1px;
      color: #ee9 !important;
-     opacity: 1;
-     font-size: 9pt;
      vertical-align: middle;
+     font-size: 9pt;
 }
 
-.mainsection td {
-     color: #111;
-}
-
-td:first-child {
+#configs td:first-child, .addtorrentsection td:first-child, .newtorrentsection td:first-child,
+.snarkCommentInfo td:first-child, .snarkComments td:first-child {
      text-align: right;
 }
 
@@ -742,7 +709,7 @@ td:first-child {
 }
 
 .snarkTorrentAction {
-     padding: 1px 1px 1px 1px !important;
+     padding: 1px !important;
      margin: 0 !important;
      text-align: center !important;
      width: 1% !important;
@@ -751,22 +718,10 @@ td:first-child {
 
 .snarkTorrentAction img {
      margin: 0 2px !important;
-     opacity: 1;
 }
 
 .snarkTorrentAction img:hover {
      box-shadow: 0 0 1px 1px #f90;
-     opacity: 1;
-}
-
-.snarkTorrentNoneLoaded {
-     background: #000;
-     font-size: 8.5pt;
-     font-weight: bold;
-     text-align: center !important;
-     color: #4f2 !important;
-     padding: 10px 5px;
-     border-bottom: 1px solid #494;
 }
 
 .snarkGraphicStatus {
@@ -784,21 +739,8 @@ td:first-child {
     margin-right: 2px;
 }
 
-.snarkTorrentStatus:first-child {
-     text-align: left !important;
-     padding-left: 0;
-     min-width: 48px;
-     font-weight: bold;
-     color: #dd9 !important;
-     padding: 1px !important;
-}
-
-.snarkTorrentStatus:first-child img {
-     margin-right: 10px !important;
-     margin-left: 6px;
-}
-
 .snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded {
+     color: #bb7 !important;
      padding: 0 3px;
      line-height: 90%;
 }
@@ -814,18 +756,6 @@ td:first-child {
      text-align: center;
 }
 
-.snarkTorrentUploaded {
-     color: #bb7 !important;
-}
-
-.snarkTorrentRateUp {
-     color: #bb7 !important;
-}
-
-.snarkTorrentRateDown {
-     color: #bb7 !important;
-}
-
 .snarkTorrents img {
      padding: 4px 3px !important;
 }
@@ -836,13 +766,6 @@ td:first-child {
 
 .snarkTorrents tr:hover, .snarkDirInfo tr:hover {
      background: #030 !important;
-     box-shadow: inset 0 0 1px 0 #494;
-}
-
-@media screen and (-webkit-min-device-pixel-ratio:0) {
-.snarkTorrents tr:hover, .snarkDirInfo tr:hover {
-     box-shadow: none;
-}
 }
 
 tr:hover .percentBarText {
@@ -851,7 +774,6 @@ tr:hover .percentBarText {
 
 /* MS Edge fix */
 _:-ms-lang(x), .snarkTorrents tr, .snarkTorrents tr:hover, .snarkDirInfo tr:hover {
-     box-shadow: none !important;
      border-top: 1px solid #000 !important;
      border-bottom: 1px solid #000 !important;
 }
@@ -860,27 +782,17 @@ _:-ms-lang(x), .snarkTorrents tr, .snarkTorrents tr:hover, .snarkDirInfo tr:hove
      color: #ee9 !important;
 }
 
-.snarkTorrents tr:hover a, .snarkDirInfo tr:hover a {
-     color: #9f9;
-}
-
 .snarkDirInfo tr:hover .snarkFileStatus img {
      mix-blend-mode: normal;
 }
 
-.snarkTorrents a:hover, td[onclick^="document.location"]:hover a, .snarkDirInfo a:hover {
+/*
+.snarkTorrents a:hover, .snarkDirInfo a:hover {
      color: #f40 !important;
 }
+*/
 
-td[onclick^="document.location"]:hover {
-     cursor: pointer !important;
-}
-
-.snarkTorrentEven {
-     background: #001000;
-}
-
-.snarkTorrentEven:nth-child(even) {
+.snarkTorrentEven, .snarkTorrentEven:nth-child(even) {
      background: #001000;
 }
 
@@ -896,7 +808,7 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven {
      border-bottom: 1px solid #000 !important;
 }
 
-.snarkTorrentOdd {
+.snarkTorrentOdd, .snarkTorrentOdd:nth-child(odd) {
      background: #000800 !important;
 }
 
@@ -904,10 +816,6 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven {
      background: #001000 !important;
 }
 
-.snarkTorrentOdd:nth-child(odd) {
-     background: #000800 !important;
-}
-
 .snarkTorrentOdd td, .snarkTorrentEven td {
      border-top: none !important;
      color: #bb7 !important;
@@ -952,6 +860,23 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven {
      padding-right: 2px;
 }
 
+.snarkTorrentNoneLoaded {
+     background: #000;
+     font-size: 10pt;
+     font-weight: bold;
+     border-bottom: 1px solid #494;
+}
+
+.snarkTorrentNoneLoaded td {
+     text-align: center !important;
+     color: #ee9 !important;
+}
+
+.snarkTorrentNoneLoaded i {
+     display: inline-block;
+     padding: 10px;
+}
+
 /* download bars */
 
 .snarkDirInfo .snarkFileStatus img {
@@ -965,7 +890,6 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven {
      border: 1px solid #040;
      border-bottom: 1px solid #020;
      border-right: 1px solid #020;
-     box-shadow: none;
      opacity: 1;
      box-shadow: 0 0 1px 1px rgba(0,0,0,0.8);
      margin: 1px auto;
@@ -1004,11 +928,6 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven {
      transition: ease opacity 0.2s;
 }
 
-.percentBarText:hover, .percentBarText:focus {
-     opacity: 0.75;
-     transition: ease opacity 0.2s;
-}
-
 @media screen and (-webkit-min-device-pixel-ratio: 0) {
 .percentBarText {
      padding: 0;
@@ -1019,22 +938,6 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven {
 }
 }
 
-.percentBarOuterComplete .percentBarText {
-     color: #ee9;
-     font-weight: normal;
-     opacity: 1;
-}
-
-.snarkDirInfo .percentBarOuterComplete .percentBarText {
-     text-align: left;
-}
-
-.percentBarOuterComplete, .percentBarComplete.percentBarInner {
-     border: 1px solid transparent;
-     background: none !important;
-     box-shadow: none !important;
-}
-
 .priorityIndicator {
      width: 32px;
      float: left;
@@ -1078,8 +981,8 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven {
 .snarkConfigTitle, .toggleview {
      font-size: 11pt;
      font-weight: bold;
-     padding: 3px 1px 3px 1px;
-     margin: 5px 0 10px 0 !important;
+     padding: 3px 1px;
+     margin: 5px 0 10px !important;
      letter-spacing: 0.2em;
      border: 1px solid #494;
      border-radius: 0;
@@ -1087,11 +990,10 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven {
      background: #000 url(/themes/console/dark/images/header.png) repeat-x scroll center center !important;
      background: linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%) !important;
      font-variant: small-caps !important;
-     filter: drop-shadow(0 2px 1px #000);
      display: inline-block;
      margin: 0 0 -3px !important;
      min-width: 260px;
-     box-shadow: inset 0 0 0 1px #000;
+     box-shadow: inset 0 0 0 1px #000, 0 1px 1px #000;
 }
 
 @media screen and (-webkit-min-device-pixel-ratio:0) {
@@ -1142,7 +1044,7 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven {
 
 .toggleview img:active, .toggleview:active img, .snarkConfigTitle a:active img {
      transform: rotate(90deg);
-     transition: ease transform 0.3s 0s;
+     transition: ease transform 0.3s;
 }
 
 .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active {
@@ -1189,7 +1091,7 @@ hr {
      height: 1px;
      border: 0 solid #444;
      width: 0%;
-     margin: 5px 0 7px 0;
+     margin: 5px 0 7px;
      text-align: center;
 }
 
@@ -1207,10 +1109,10 @@ a:visited {
 }
 
 a:hover, a:focus {
-     color: #f60 !important;
+     color: #f40 !important;
 }
 
-a:active, .snarkTorrents td a:active {
+a:active {
      color: #f90 !important;
 }
 
@@ -1289,21 +1191,15 @@ input.disabled, input.disabled:hover, input.disabled:focus, input.disabled:activ
      background: #000 !important;
 }
 
-
 input[type=image], thead img {
      padding: 0 !important;
      border-radius: 3px;
      border: 0 none transparent !important;
      margin: 0 2px;
-     opacity: 1;
-}
-
-input[type="image"], a img {
-     filter: drop-shadow(0 0 1px #000);
 }
 
 input[type="image"]:hover, a img:hover, input[type="image"]:focus, a:focus img {
-     filter: saturate(200%) drop-shadow(0 0 1px #f90) !important;
+     filter: saturate(200%) drop-shadow(0 0 2px #f30) !important;
      outline: none;
 }
 
@@ -1320,7 +1216,6 @@ thead a:active img {
 }
 
 .snarkTorrentAction input[type="image"] {
-     border: 1px solid #000 !important;
      border: 1px solid #151 !important;
      margin: 0 2px !important;
      padding: 4px !important;
@@ -1329,7 +1224,6 @@ thead a:active img {
      box-shadow: inset 0 0 0 1px #000;
      border-radius: 2px;
      height: 9px;
-     filter: drop-shadow(0 0 1px #000);
 }
 
 .snarkTorrentAction input[type="image"]:hover, .snarkTorrentAction input[type="image"]:focus {
@@ -1557,16 +1451,13 @@ a.control:hover img {
 
 img {
      border: none;
-     margin: 0 3px 1px 3px;
+     margin: 0 3px 1px;
      vertical-align: middle;
-     opacity: 1.0;
      line-height: 100%;
-     filter: drop-shadow(0 0 1px #000);
 }
 
 img:hover {
      border: none;
-     opacity: 1;
      line-height: 100%;
 }
 
@@ -1612,7 +1503,7 @@ img[src$="magnet.png"] {
      border: 1px solid #131;
      width: 100% !important;
      width: calc(100% - 170px) !important;
-     margin: 2px 5px 0 5px;
+     margin: 2px 5px 0;
 }
 
 #trackerselect tr:nth-child(even) {
@@ -1703,13 +1594,6 @@ _:-ms-lang(x), #trackerselect tr:last-child {
      background: linear-gradient(to bottom, #001100, #000000) repeat scroll 0 0 #000000;
 }
 
-.snarkTorrentNoneLoaded td {
-     background: #000;
-     border-left: 1px solid #040;
-     border-right: 1px solid #040;
-     color: #ee9 !important;
-}
-
 .snarkNewTorrent td {
      padding: 2px 3px;
 }
@@ -1813,27 +1697,26 @@ _:-ms-lang(x), #trackerselect tr:last-child {
      border: none !important;
 }
 
+.section, .mainsection, .newtorrentsection, .addtorrentsection, .configsection, .configsectionpanel {
+     background: #000;
+     border: 1px solid #494;
+     color: #ee9;
+     text-align: center;
+}
+
+.newtorrentsection, .addtorrentsection, .configsection {
+     box-shadow: inset 0 0 5px 2px #000;
+}
+
 .section, .mainsection {
      margin: 0;
      padding: 0;
-     border: 1px solid #494;
      border-bottom: none;
-     color: #ee9;
-     box-shadow: inset 0 0 1px 0 #212;
-     word-wrap: break-word;
-     text-align: center;
-     background: #000;
-     opacity: 1 !important;
 }
 
 .newtorrentsection {
      margin: -1px 0 10px;
-     padding: 0 10px 0 10px;
-     border: 1px solid #494;
-     text-align: center;
-     color: #ee9;
-     box-shadow: inset 0 0 5px 2px #000;
-     word-wrap: break-word;
+     padding: 0 10px;
      background: #000 url(images/snark_create.png) no-repeat scroll right center;
      background: url(images/snark_create.png) center right no-repeat, linear-gradient(to bottom, rgba(0,40,0,0.3) 0%, rgba(0,15,0,0.5) 100%), url(/themes/console/dark/images/camotile2.png) top left repeat;
      background-size: 80px 80px, 100% 100%, 175px 175px;
@@ -1842,11 +1725,6 @@ _:-ms-lang(x), #trackerselect tr:last-child {
 .addtorrentsection {
      margin: -1px 0 0;
      padding: 0 10px;
-     border: 1px solid #494;
-     text-align: center;
-     color: #ee9;
-     box-shadow: inset 0 0 5px 2px #000;
-     word-wrap: break-word;
      background: #000 url(images/snark_add.png) no-repeat scroll right center;
      background: url(images/snark_add.png) 99% center no-repeat, linear-gradient(to bottom, rgba(0,40,0,0.3) 0%, rgba(0,15,0,0.5) 100%), url(/themes/console/dark/images/camotile2.png) top left repeat;
      background-size: 61px 61px, 100% 100%, 175px 175px;
@@ -1854,27 +1732,14 @@ _:-ms-lang(x), #trackerselect tr:last-child {
 
 .configsection {
      margin: -11px 0 0;
-     padding: 0 10px 12px 10px;
-     border: 1px solid #494;
-     color: #ee9;
-     box-shadow: inset 0 0 5px 2px #000;
-     word-wrap: break-word;
-     text-align: center;
-     background: #000;
-     font-weight: bold;
+     padding: 0 10px 12px;
      background: url(images/configuration.png) 102% 30% no-repeat, linear-gradient(to bottom, rgba(0,40,0,0.3) 0%, rgba(0,15,0,0.5) 100%), url(/themes/console/dark/images/camotile2.png) top left repeat;
      background-size: 84px 82px, 100% 100%, 175px 175px;
 }
 
 .configsectionpanel {
-     margin: -1px 0 0 0;
+     margin: -1px 0 0;
      padding: 0;
-     border: 1px solid #494;
-     color: #ee9;
-     box-shadow: inset 0 0 5px 2px #000;
-     word-wrap: break-word;
-     font-weight: bold;
-     text-align: center;
      background: #000 url(images/configuration.png) no-repeat scroll right center;
      background: linear-gradient(to bottom, #000 10%, rgba(0,40,0,0.3) 10%, rgba(0,15,0,0.5) 100%), url(/themes/console/dark/images/camotile2.png) top left repeat;
 }
@@ -1889,7 +1754,6 @@ _:-ms-lang(x), #trackerselect tr:last-child {
 
 .configsection table {
      color: #ffb;
-     opacity: 1;
 }
 
 .configsection a {
@@ -1990,7 +1854,6 @@ input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent
      color: #7c7;
 }
 
-
 .peerinfo td:first-child {
      background: url(images/peer.png) center center no-repeat;
      background-size: 14px 14px;
@@ -2390,7 +2253,7 @@ input[type="radio"]:checked::before {
      top: 25%;
      width: 9px;
      height: 9px;
-     background: #69EF68;
+     background: #69ef68;
 }
 
 input[type="checkbox"]:hover, input[type="radio"]:hover, input[type="checkbox"]:focus, input[type="radio"]:focus {
@@ -2421,7 +2284,6 @@ input.toggle_input, input.toggle_input:checked { /* hide checkbox and use label
 /* end custom radios/checkboxes */
 
 /* Comments Section */
-/* TODO: merge with other rules where applicable */
 
 .snarkCommentInfo, .snarkComments {
      margin: 10px 0 0 !important;
@@ -2490,7 +2352,7 @@ input.toggle_input, input.toggle_input:checked { /* hide checkbox and use label
      width: 90%;
 }
 
-.snarkCommentInfo textarea { /* remember to set 10pt @ > 1400px */
+.snarkCommentInfo textarea {
      font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
      width: 100%;
      min-height: 64px;
@@ -2536,10 +2398,6 @@ input.toggle_input, input.toggle_input:checked { /* hide checkbox and use label
      padding-right: 2px;
 }
 
-.snarkCommentInfo td:last-child, .snarkComments td:last-child {
-/*     width: 1% !important;*/
-}
-
 .snarkComments td {
      white-space: nowrap;
 }
@@ -2850,7 +2708,6 @@ textarea[name="i2cpOpts"] {
 .page {
      padding: 10px;
      border: 1px solid #494;
-     box-shadow: inset 0 0 0 1px #000, inset 0 0 7px 3px #002900;
 }
 
 #configs td:first-child::after {
diff --git a/installer/resources/themes/snark/light/snark.css b/installer/resources/themes/snark/light/snark.css
index d09901e8a..41a01b865 100644
--- a/installer/resources/themes/snark/light/snark.css
+++ b/installer/resources/themes/snark/light/snark.css
@@ -203,7 +203,7 @@ button::-moz-focus-inner, input::-moz-focus-inner {
      margin: -2px 0 0;
      padding: 3px 5px 3px 5px;
      border-spacing: 0;
-     overflow: auto;
+     overflow: hidden;
      color: #339;
      height: 52px;
      width: auto;
@@ -216,6 +216,14 @@ button::-moz-focus-inner, input::-moz-focus-inner {
      background-size: auto 100%, 100% 100%;
 }
 
+.snarkMessages:hover, .snarkMessages:focus {
+     overflow: auto;
+}
+
+.snarkMessages:focus {
+     box-shadow: inset 0 0 0 1px #f90;
+}
+
 .snarkMessages a:link, .snarkMessages a:visited {
      color: #3b77bf !important;
      font-size: 8pt;
@@ -562,11 +570,15 @@ th.snarkTorrentStatus {
      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: #272e3f !important;
+     font-size: 9pt;
+}
+
+.snarkTorrentNoneLoaded i {
+     display: inline-block;
+     padding: 10px;
 }
 
 .snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded {
diff --git a/installer/resources/themes/snark/midnight/snark.css b/installer/resources/themes/snark/midnight/snark.css
index f628d5062..bf322ae7e 100644
--- a/installer/resources/themes/snark/midnight/snark.css
+++ b/installer/resources/themes/snark/midnight/snark.css
@@ -209,7 +209,7 @@ body.iframed {
 
 .snarkMessages {
      font: normal 8pt "Droid Sans Mono", "Noto Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
-     overflow: auto;
+     overflow: hidden;
      width: auto;
      height: 55px;
      margin: 0;
@@ -228,6 +228,14 @@ body.iframed {
      margin-top: -5px;
 }
 
+.snarkMessages:hover, .snarkMessages:focus {
+     overflow: auto;
+}
+
+.snarkMessages:focus {
+     box-shadow: inset 0 0 0 1px #930;
+}
+
 .snarkMessages a:active {
      color: #ff007c !important;
 }
@@ -517,10 +525,14 @@ th.snarkTorrentStatus {
      text-align: center !important;
      font-weight: bold;
      color: #c9ceff !important;
-     padding: 10px;
      background: #001;
 }
 
+.snarkTorrentNoneLoaded i {
+     display: inline-block;
+     padding: 10px;
+}
+
 .snarkTorrentStatus {
      padding: 2px 5px 2px 2px !important;
      text-align: left !important;
diff --git a/installer/resources/themes/snark/ubergine/snark.css b/installer/resources/themes/snark/ubergine/snark.css
index 7a3d21672..74666917b 100644
--- a/installer/resources/themes/snark/ubergine/snark.css
+++ b/installer/resources/themes/snark/ubergine/snark.css
@@ -425,11 +425,9 @@ tfoot td:first-child {
      padding-top: 3px !important;
 }
 
-.snarkTorrents thead th {
-     border-top: 1px solid transparent !important;
-}
-
 .snarkTorrents thead th  {
+     border-top: 1px solid transparent !important;
+     border-bottom: 1px solid #313 !important;
      padding-top: 3px;
      padding-bottom: 6px;
      border-bottom: 1px solid #313;
@@ -461,12 +459,14 @@ th.snarkTorrentStatus {
 }
 
 .snarkTrackerDetails, .SnarkTorrentDetails {
-     width: 16px;
+     width: 1%;
      padding: 2px 0;
 }
 
 .snarkTrackerDetails {
      text-align: right;
+     padding-right: 2px;
+     min-width: 36px;
 }
 
 .snarkTorrentName {
@@ -563,21 +563,42 @@ th.snarkTorrentAction input[type="image"]:hover, .snarkTorrentAction input[type=
      white-space: nowrap;
 }
 
-.snarkTorrentNoneLoaded {
-     padding: 10px;
-     background: #323;
-     font-size: 8.5pt;
-     font-weight: bold;
-     text-align: center !important;
-     color: #bbb !important;
-     border-radius: 0 0 2px 2px;
-}
-
 .snarkTorrents th:empty + th:empty, .snarkTorrents td:empty + td:empty, .snarkTorrentETA:empty, .snarkTorrentAction:empty, .snarkTorrentRateDown:empty {
      width: 0 !important;
      min-width: 0 !important;
 }
 
+.snarkTorrentNoneLoaded, .snarkTorrentNoneLoaded:hover td {
+     background: #212 !important;
+     background: linear-gradient(to bottom, #313, #101) !important;
+     font-size: 8.5pt;
+     font-weight: bold;
+     border-radius: 0 0 2px 2px;
+}
+
+.snarkTorrentNoneLoaded td {
+     text-align: center !important;
+     color: #ddd !important;
+}
+
+.snarkTorrentNoneLoaded i {
+     display: inline-block;
+     padding: 10px;
+}
+
+.choked {
+     color: #f00000 !important;
+}
+
+.unchoked {
+     color: #34cf19 !important;
+}
+
+.choked, .unchoked {
+     font-weight: bold;
+     font-style: italic;
+}
+
 /* end main torrents listing */
 
 td {
@@ -586,10 +607,6 @@ td {
      font-size: 8pt;
 }
 
-.mainsection td {
-     color: #111;
-}
-
 td:first-child {
      text-align: right;
 }
@@ -892,30 +909,12 @@ _:-ms-lang(x), .snarkDirInfo img, .snarkTorrents img {
      transition: ease opacity 0.2s;
 }
 
-.percentBarText:hover, .percentBarText:focus {
-     opacity: 1;
-     transition: ease opacity 0.2s;
-}
-
 .iframed .percentBarText, .iframed .percentBarText:hover, .iframed .percentBarText:focus {
      transition: none;
 }
 
 /* end download bars */
 
-.choked {
-     color: #f00000 !important;
-}
-
-.unchoked {
-     color: #34CF19 !important;
-}
-
-.choked, .unchoked {
-     font-weight: bold;
-     font-style: italic;
-}
-
 .thumb {
      max-width: 16px;
      transition: ease all 0.3s;
@@ -1105,7 +1104,7 @@ label.toggleview img:hover, label.toggleview:hover img, .snarkConfigTitle:hover
 
 label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle:active a img {
      transform: rotate(90deg);
-     transition: ease transform 0.3s 0s;
+     transition: ease transform 0.3s;
 }
 
 .configsection a, label.toggleview {
@@ -1132,7 +1131,7 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle:acti
 /* buttons & inputs */
 
 input, a.control {
-     font: 8pt "Droid Sans", "Noto Sans", "DejaVu Sans", Verdana, Helvetica, sans-serif;
+     font: 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, sans-serif;
      font-weight: bold;
 }
 
@@ -1244,7 +1243,7 @@ input[type="text"], input.r, input[name="nofilter_dataDir"] {
      letter-spacing: 0.03em;
      background: url(images/graytile.png) #212;
      background-size: 96px 96px;
-     transition: ease box-shadow 0.15s 0s, ease color 0.15s 0s;
+     transition: ease box-shadow 0.15s, ease color 0.15s;
 }
 
 textarea[name="i2cpOpts"] {
@@ -1264,7 +1263,7 @@ input[type=text]:active, input[type=text]:focus, input.r:focus, input[name="nofi
      background: linear-gradient(to bottom, #d60, #c50);
      color: #fff;
      box-shadow: inset 0 0 0 1px #ffffcf;
-     transition: ease box-shadow 0.15s 0s;
+     transition: ease box-shadow 0.15s;
      outline: none;
 }
 
@@ -1575,7 +1574,7 @@ textarea {
      border: 1px solid #000;
      font-size: 8pt;
      box-shadow: inset 1px 1px 2px 1px #101;
-     transition: ease box-shadow 0.15s 0s;
+     transition: ease box-shadow 0.15s;
 }
 
 /* end buttons & inputs */
diff --git a/installer/resources/themes/snark/vanilla/snark.css b/installer/resources/themes/snark/vanilla/snark.css
index a32cf645c..0f6e8f405 100644
--- a/installer/resources/themes/snark/vanilla/snark.css
+++ b/installer/resources/themes/snark/vanilla/snark.css
@@ -1,6 +1,10 @@
 /* I2PSnark theme "Vanilla" by dr|z3d */
 /* Now with 100% more chocolate */
 
+html {
+     height: 100%;
+}
+
 body {
      background: #2f231a;
      background: repeating-linear-gradient(to bottom, #9f948b 1px, #6f5b4c 1px, #bfa285 3px);
@@ -672,8 +676,16 @@ th.snarkTorrentStatus {
      width: 0 !important;
 }
 
+.snarkTorrents thead th:nth-child(n+2) img {
+     display: none;
+}
+
+.snarkTorrents thead th a img, .snarkTorrents thead th input[type="image"] {
+     display: inline-block !important;
+}
+
 .snarkTorrents tt {
-     background: #7F654F;
+     background: #7f654f;
      color: #fff;
      padding: 2px 3px;
      border-radius: 2px;
@@ -685,19 +697,30 @@ th.snarkTorrentStatus {
      margin: 0 1px;
 }
 
-.snarkTorrentNoneLoaded {
-     background: #5f4e41;
-     font-weight: bold;
-     text-align: center !important;
-     color: #bbb !important;
-}
-
 .snarkTorrents th:empty + th:empty, .snarkTorrents td:empty + td:empty, .snarkTorrentETA:empty,
 .snarkTorrentRateDown:empty, .snarkTorrentRateUp:empty, .snarkTorrentAction:empty {
      width: 0 !important;
      min-width: 0 !important;
 }
 
+.snarkTorrentNoneLoaded, .snarkTorrentNoneLoaded:hover td {
+     background: #5f4e41 !important;
+}
+
+.mainsection .snarkTorrentNoneLoaded td {
+     font-weight: bold;
+     text-align: center !important;
+     color: #cfc7c2 !important;
+     padding: 10px !important;
+}
+
+.snarkTorrentNoneLoaded i::before {
+     content: url(images/bullet.png);
+     display: inline-block;
+     vertical-align: top;
+     margin: 1px 3px 0 0;
+}
+
 /* end main torrents listing */
 
 .snarkTorrentEven {
@@ -2737,7 +2760,7 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, a.control, input
 
 .snarkNav:link {
      padding: 4px 8px 4px 26px !important;
-     background-size: 16px auto, 100% 100%, 100% 100% !important !important;
+     background-size: 16px auto, 100% 100%, 100% 100% !important;
      background-position: 8px center, center center, center center !important;
 }