CSS, form, icon updates

patch by drzed
0.0.2-beta3

resources/images/socks.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 64 64"><circle cx="32" cy="32" r="32" fill="#04a" paint-order="stroke fill markers"/><g stroke-width="7.2"><path fill="#2ba5f7" d="M39.5 54.3a10.2 10.2 0 0 1-14.5 0l-7.8-7.9a12.1 12.1 0 0 1-9.4-13v-.7l.2-1.3 1-11.3h.3l.8-.1 10.5-1.8 11.7 3.9v7.4c0 2 .8 4 2.2 5.4l5 5a10.1 10.1 0 0 1 0 14.4z"/><path fill="#f95428" d="m40.3 53.4-.8.9a10.2 10.2 0 0 1-9.7 2.7v-.8A11.3 11.3 0 0 1 42.2 45c.7 3 0 6-2 8.5z"/><path fill="#2197d8" d="M29.8 56.2v.8a11 11 0 0 1-4.8-2.7l-7.8-7.9.2-.3c.6-1.3 1-2.8 1-4.4L31 51.2c-.8 1.5-1.2 3.2-1.2 5zM10.1 20l4.4.6v13l-6.6-1v-1.2l1.2-11.3h.2z"/><path fill="#f95428" d="M32.3 15.8v6.3l-17.8-1.5-5.2-.5H9l.6-6.2c0-.6.6-1 1.2-1l4.2.4 16.1 1.4c.6 0 1 .5 1 1.1z"/><path fill="#d33924" d="m15.1 13.3-.6 7.3-5.2-.5H9l.6-6.2c0-.6.6-1 1.2-1zm3.3 28.4c0 1.6-.4 3-1 4.4l-.3.3a12.1 12.1 0 0 1-9.3-13l.2-2c5.7 0 10.3 4.6 10.3 10.3zm21.9 11.7-.8.9a10.2 10.2 0 0 1-9.7 2.7v-.8c0-1.8.4-3.5 1.2-5 0 0 4.5 2.8 9.3 2.2z"/><path fill="#2ba5f7" d="M53.3 50a10.2 10.2 0 0 1-14.4 0l-8-7.8a12.1 12.1 0 0 1-9.3-13v-.7l.2-1.3 1-11.3h.3l.8-.1L34.4 14 46 18v7.4c0 2 .8 4 2.2 5.4l5 5a10.1 10.1 0 0 1 0 14.4z"/><path fill="#f95428" d="m54 49.2-.7.9a10.2 10.2 0 0 1-9.7 2.7V52A11.3 11.3 0 0 1 56 40.7c.7 3 0 6-2 8.5z"/><path fill="#2197d8" d="M43.6 52v.8c-1.7-.5-3.4-1.3-4.7-2.7l-8-7.9.3-.3c.6-1.3 1-2.8 1-4.4L44.8 47c-.8 1.5-1.2 3.2-1.2 5zM24 15.8l4.3.6v13l-6.6-1v-1.2L23 16h.2z"/><path fill="#f95428" d="M46 11.6V18l-17.7-1.5-5.2-.5h-.2l.6-6.2c0-.6.6-1 1.2-1l4.3.4 16 1.4c.6 0 1 .5 1 1.1z"/><path fill="#d33924" d="m29 9.1-.7 7.3-5.2-.5h-.2l.6-6.2c0-.6.6-1 1.2-1zm3.2 28.4c0 1.6-.4 3-1 4.4l-.2.3a12.1 12.1 0 0 1-9.4-13l.2-2h.1c5.7 0 10.3 4.6 10.3 10.3zM54 49.2l-.7.9a10.2 10.2 0 0 1-9.7 2.7V52c0-1.8.4-3.5 1.2-5 0 0 4.5 2.8 9.3 2.2z"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64"><circle cx="32" cy="32" r="32" fill="#015" opacity=".7"/><g transform="translate(-.18 -1.35)"><g id="a"><path fill="#acf" d="M53.56 48.91a10.54 10.54 0 0 1-14.87 0l-8.26-8.05a12.5 12.5 0 0 1-9.61-13.43v-.72l.2-1.35 1.04-11.67h.3l.84-.1 10.84-1.86 11.98 4.13v7.64a8 8 0 0 0 2.27 5.58l5.17 5.17a10.43 10.43 0 0 1 0 14.87z"/><path fill="#f83" d="m54.28 48.09-.72.93a10.54 10.54 0 0 1-10.02 2.78v-.82a11.67 11.67 0 0 1 12.8-11.67c.73 3.1 0 6.2-2.06 8.78z"/><path fill="#8ad" d="M43.54 50.98v.82a10.5 10.5 0 0 1-4.85-2.78l-8.26-8.17.3-.3c.63-1.35.91-4.3.91-5.95l13.34 10.77a12.91 12.91 0 0 0-1.45 5.6zM23.3 13.58l4.6.46-.98 14.59-6-2.03v-1.24l1.33-11.56h.21z"/><path fill="#f83" d="M46.02 9.25v6.61l-18.28-1.55-5.37-.51h-.2l.61-6.4c0-.63.62-1.04 1.24-1.04L45 8.22c.62 0 1.03.51 1.03 1.13z"/><path fill="#f60" d="m28.62 6.16-.78 8.11-5.57-.51.67-6.98c0-.62.62-1.03 1.23-1.03zm3.3 29.34c0 1.65-.41 3.1-1.03 4.54l-.2.31a12.5 12.5 0 0 1-9.72-13.43l.21-2.06h.1c5.89 0 10.64 4.75 10.64 10.64zm11.62 15.48c-.17-1.56.56-4.07 1.4-5.67 0 0 4.43 2.98 9.4 2.36-3.24 3.7-7.64 4.04-10.8 3.3z"/><path fill="none" stroke="#015" stroke-width="1.3" d="M24.48 5.96c-1.55.03-1.44 1.75-1.62 2.82L21.01 28.3c-.45 5.75 3.22 11.32 9.87 12.26 3.12 3.03 5.74 6.28 8.93 9.23 3.99 3.13 10.56 2.61 14.11-1 2.76-2.63 4-7.22 2.52-10.84-1.9-5.5-9.24-8.32-9.87-13.59-.55-5.6-.17-10.19-.17-14.87-.01-1.84-1.23-1.65-3.1-1.82z"/></g><use xlink:href="#a" x="-13.71" y="8.87"/></g></svg>

resources/socksoutproxy.css

@@ -13,11 +13,13 @@
   --border_inner: 1px solid #9898b3;
   --btn_border: 1px solid #97a2ce;
   --btn_hover: linear-gradient(180deg, #ddd, #fff);
+  --btn_active: var(--btn_hover);
   --btn: linear-gradient(180deg, #fff, #e8e8ff);
   --btn_shadow_active: var(--highlight), inset 4px 4px 4px rgba(0,0,0,.5);
   --container: linear-gradient(90deg, #fff, #efefff, #fff);
+  --filter_shadow: drop-shadow(0 0 1px var(--hover)) drop-shadow(0 0 2px var(--hover));
   --highlight: inset 0 0 0 1px #fff;
-  --highlight_notice: var(--highlight), inset 0 0 1px 1px #bbf, 0 0 2px 2px rgba(0,0,0,.5);
+  --highlight_notice: var(--highlight), inset 0 0 1px 1px #900, 0 0 2px 2px rgba(0,0,0,.2);
   --hover: #f60;
   --ink: #4f4f63;
   --ink_light: #5b5b71;
@@ -25,6 +27,7 @@
   --input_text: var(--bg_table);
   --input_text_focus: #fff;
   --monospaced: Droid Sans Mono, Noto Mono, DejaVu Sans Mono, Lucida Console, monospace;
+  --outline: 0 0 0 1px rgba(255,96,0,.5);
   --rowEven: repeating-linear-gradient(135deg, rgba(252,252,255,.5) 2px, rgba(240, 240, 255, .3) 3px, #fafaff 5px) #f0f0ff;
   --rowOdd: repeating-linear-gradient(45deg, rgba(255,255,255,.5) 2px, rgba(220, 220, 255, .3) 3px, #fafaff 5px), #fafaff;
   --scrollbar_hover: rgba(16,16,48,.4) var(--bg);
@@ -36,12 +39,18 @@
   --th_sub: linear-gradient(180deg, #fdfdff, #f0f0ff);
   --txtshadow_title: 0 1px 1px #fff, 0 -1px 1px #e2e2ff, 0 2px 1px #ddf;
   --visited: #2c4e8f;
-  --configure: url("images/configure.svg");
+  --configure: url(images/configure.svg);
-  --cross: url("images/cross.svg");
+  --cross: url(images/cross.svg);
-  --infohelp: url("images/infohelp.svg");
+  --infohelp: url(images/infohelp.svg);
-  --socks: url("images/socks.svg");
+  --socks: url(images/socks.svg);
-  --starting: url("images/starting.svg");
+  --starting: url(images/starting.svg);
-  --tick: url("images/tick.svg");
+  --tick: url(images/tick.svg);
+}
+
+@media (prefers-color-scheme: light) {
+  #status .subtitle + tr, #status .subtitle + tr td {
+    border-bottom: none !important;
+  }
 }
 
 @media (prefers-color-scheme: dark) {
@@ -55,11 +64,11 @@
     --bg_table: #222;
     --bodybg: var(--bg);
     --border: 1px solid #444;
-    --border_inner: 1px solid #222;
+    --border_inner: 1px solid #181818;
     --btn_border: 1px solid #97a2ce;
     --btn_active: linear-gradient(180deg, #333, #444);
-    --btn_hover: linear-gradient(180deg, #444 50%, #333 50%, #111);
+    --btn_hover: linear-gradient(180deg, #444, #333 50%, #111);
-    --btn: linear-gradient(180deg, #444, #333);
+    --btn: linear-gradient(180deg, #333, #181818);
     --container: #222;
     --highlight: inset 0 0 0 1px rgba(255,255,255,.1);
     --highlight_notice: var(--highlight), inset 0 0 1px 1px #300, 0 0 2px 2px rgba(0,0,0,.5);
@@ -83,7 +92,7 @@
     filter: invert(1) opacity(.7);
   }
   #expand:hover img, #collapse:hover img {
-    filter: invert(1) opacity(.8) drop-shadow(0 0 1px var(--hover)) !important;
+    filter: invert(1) opacity(.95) var(--filter_shadow) !important;
   }
   #status {
     border-collapse: separate;
@@ -99,9 +108,6 @@
   #container {
     padding: 0 !important;
   }
-  input[type=submit]:active {
-    background: var(--btn_active) !important;
-  }
 }
 
 html, body {
@@ -249,6 +255,11 @@ tr {
   animation: none;
 }
 
+input.accept {
+  padding: 5px 9px 2px 26px;
+  background: var(--tick) no-repeat 9px center / 16px;
+}
+
 @keyframes spin {
   from {transform: rotate(0)}
   to {transform: rotate(360deg)}
@@ -388,10 +399,28 @@ th, #configtitle {
   height: 8px;
   display: inline-block;
   vertical-align: middle;
+  transform: scaleX(.6);
+}
+
+#collapse img {
+  transform: scaleY(.6);
 }
 
 #expand:hover img, #collapse:hover img {
-  filter: drop-shadow(0 0 1px var(--hover));
+  filter: var(--filter_shadow);
+  transform: scaleY(1.2) scaleX(.8);
+}
+
+#collapse:hover img {
+  transform: scaleX(1.2) scaleY(.8);
+}
+
+#expand::before, #collapse::before {
+  content: "";
+  display: inline-block;
+  height: 100%;
+  width: 100%;
+  background: #f00;
 }
 
 #configuration td:nth-child(2) code {
@@ -467,24 +496,27 @@ input[type=text]:focus, input[type=password]:focus {
 }
 
 input[type=submit] {
-  padding: 5px 9px 2px 29px;
+  padding: 7px 14px 7px 30px;
   color: var(--ink);
   border-radius: 4px;
   box-shadow: var(--highlight);
-  background: var(--tick) no-repeat 9px center / 16px;
+  background: var(--tick) no-repeat 12px center / 12px, var(--btn);
   cursor: pointer;
 }
 
 input[type=submit]:hover {
   color: var(--ink_lighter);
+  background: var(--tick) no-repeat 12px center / 12px, var(--btn_hover);
+  box-shadow: var(--highlight), var(--outline);
 }
 
 input[type=submit]:active {
-  box-shadow: var(--btn_shadow_active);
+  box-shadow: var(--btn_shadow_active), var(--outline);
+  background: var(--tick) no-repeat 12px center / 12px, var(--btn_active);
 }
 
 #message {
-  padding: 15px;
+  padding: 45px 15px 20px;
   width: 400px;
   display: inline-block;
   position: absolute;
@@ -493,8 +525,9 @@ input[type=submit]:active {
   text-align: center;
   border: var(--border);
   box-shadow: var(--highlight_notice);
-  background: var(--th_sub);
+  background: var(--infohelp) no-repeat center 22px / 24px, var(--th_sub);
-  animation: slideLeft .5s linear .1s both, toast 2s ease 4s both;
+  animation: slideLeft .75s ease-in .1s both, toast 2s ease 4s both;
+  filter: opacity(0);
 }
 
 #message td {
@@ -509,14 +542,14 @@ input[type=submit]:active {
 }
 
 @keyframes slideLeft {
-  from {top: 0; right: -1000px}
+  from {top: 0; right: -800px; filter: opacity(0)}
-  to {top: 0; right: 0}
+  to {top: 0; right: 0; filter: opacity(1)}
 }
 
 @media screen and (max-width: 1000px) {
   body {margin: 3px}
-  #container {margin: 0}
   body, table {font-size: 9.5pt}
+  #container {margin: 0}
   #title {font-size: 14pt}
   #configtitle {font-size: 12pt}
   .subtitle th {font-size: 10pt}

src/java/net/i2p/socksoutproxy/web/ProxyServlet.java

@@ -31,11 +31,11 @@ public class ProxyServlet extends BasicServlet {
 
     private static final String DEFAULT_NAME = "outproxy";
     private static final String DOCTYPE = "<!DOCTYPE HTML>\n";
-    private static final String FOOTER = "</div>\n<span id=\"endOfPage\" data-iframe-height></span>\n</body>\n</html>";
+    private static final String FOOTER = "</table>\n</div>\n<span id=\"endOfPage\" data-iframe-height></span>\n</body>\n</html>";
     // for now, use console bundle, hope to pick up a few translations for free
     private static final String BUNDLE = "net.i2p.router.web.messages";
     private static final String RESOURCES = "/outproxy/resources/";
-    private static final String VERSION = "0.2-beta2";
+    private static final String VERSION = "0.2-beta3";
 
     public ProxyServlet() {
         super();
@@ -194,12 +194,12 @@ public class ProxyServlet extends BasicServlet {
         out.write("</title>\n");
         out.write("<script src=\"" + RESOURCES + "toggleConfig.js\" type=\"application/javascript\"></script>\n");
         out.write("<meta http-equiv=\"Content-Security-Policy\" content=\"script-src \'self\' \'unsafe-inline\';\">\n");
-        out.write("<link rel=\"icon\" href=\"" + RESOURCES + "images/socksproxy-32.png\">\n");
+        out.write("<link rel=\"icon\" href=\"" + RESOURCES + "images/socks.svg\">\n");
         out.write("<link href=\"" + RESOURCES + "socksoutproxy.css?" + VERSION + "\" rel=\"stylesheet\" type=\"text/css\">\n");
         out.write("<noscript><style>.script, #expand, #collapse {display: none !important} #configuration {display: table !important} " +
                   "*::selection {color: #fff; background: #77f}");
         out.write("</style></noscript>\n</head>\n");
-        out.write("<body id=\"orchid\">\n<div id=\"container\">\n<table id=\"main\" width=\"100%\">\n" +
+        out.write("<body id=\"socksproxy\">\n<div id=\"container\">\n<table id=\"main\" width=\"100%\">\n" +
                   "<thead><tr><th id=\"title\" align=\"left\">" + _t("Socks Outproxy") + "</th></tr></thead>\n");
         out.write("<tbody>\n<tr><td>\n<hr>\n<table id=\"status\" width=\"100%\">\n<tr class=\"subtitle\">" +
                   "<th width=\"33%\">" + _t("Status") + "</th>" +
@@ -243,13 +243,13 @@ public class ProxyServlet extends BasicServlet {
 
     private static String getHTMLConfig(SocksOutproxy tc) {
         StringBuilder buf = new StringBuilder(1024);
-        buf.append("<form method=\"POST\" action=\"\">");
+        buf.append("<form method=\"POST\" action=\"\">\n");
         buf.append("<input name=\"nonce\" type=\"hidden\" value=\"").append(_nonce).append("\">\n");
         buf.append("<hr>\n<table id=\"configuration\" width=\"100%\">\n");
-        buf.append("<tr title=\"Hostname or IP address of proxy server\"><td>");
+        buf.append("<tr title=\"Hostname or IP address of SOCKS proxy server\"><td>");
-        buf.append("<b>SOCKS host</b></td><td><input name=\"host\" type=\"text\" value=\"").append(DataHelper.escapeHTML(tc.getHost())).append("\"></td></tr>\n");
+        buf.append("<b>Host</b></td><td><input name=\"host\" type=\"text\" value=\"").append(DataHelper.escapeHTML(tc.getHost())).append("\"></td></tr>\n");
-        buf.append("<tr title=\"Port of proxy server\"><td>");
+        buf.append("<tr title=\"Port of SOCKS proxy server\"><td>");
-        buf.append("<b>SOCKS port</td><td><input name=\"port\" type=\"text\" value=\"").append(tc.getPort()).append("\"></td></tr>\n");
+        buf.append("<b>Port</b></td><td><input name=\"port\" type=\"text\" value=\"").append(tc.getPort()).append("\"></td></tr>\n");
         String user = tc.getUser();
         if (user == null)
             user = "";
@@ -261,14 +261,14 @@ public class ProxyServlet extends BasicServlet {
         else
             pw = DataHelper.escapeHTML(pw);
         buf.append("<tr title=\"Username for proxy access if required\">");
-        buf.append("<td width=\"50%\"><b>SOCKS Username</b></td>");
+        buf.append("<td width=\"50%\"><b>Username</b></td>");
         buf.append("<td width=\"50%\"><input name=\"user\" type=\"text\" value=\"").append(user).append("\"></td>");
         buf.append("</tr>\n<tr title=\"Password for proxy access if required\">");
-        buf.append("<td width=\"50%\"><b>SOCKS Password</b></td>");
+        buf.append("<td width=\"50%\"><b>Password</b></td>");
         buf.append("<td width=\"50%\"><input name=\"password\" type=\"password\" value=\"").append(pw).append("\"></td>");
         buf.append("</tr>\n<tr id=\"formaction\">");
         buf.append("<td colspan=\"2\" align=\"right\"><input name=\"save\" class=\"accept\" type=\"submit\" value=\"Save Configuration\"></td></tr>\n");
-        buf.append("</table></form>");
+        buf.append("</table>\n</form>\n");
         return buf.toString();
     }