From cf7a6041b3d77fbf83262d2f98c9a002a77868cc Mon Sep 17 00:00:00 2001 From: str4d Date: Mon, 12 Jun 2017 12:45:51 +0000 Subject: [PATCH] UI updates Console: - /logs: fixed environment/running info table resize on focus (ticket #1996) - Scale theme/language divs so we don't truncate language display - Arabic (light) adjust font size for sidebar elements - Sidebar network status display (ticket #1996) - Usability: - Enhance presentation of tables on /peers (improve header/column alignment, center to separator for multi-value rows) - Enhance presentation of tables on /tunnels (reliable alignment of mixed content in rows, more prominence to bandwidth tiers) I2PSnark: - Usability: add tabindex="0" to screenlog - Update navbar link classes to allow easier targetting of button type - Remove disabled cursor for known tracker radio icons (ticket #1996) - Fix alignment issue for comments (ticket #1996) - ubergine: further optimize theme to reduce scroll lag (ticket #1996) - ubergine/vanilla: - Add mini-mode at <=800px - Small size reduction to navbar links (ticket #1996) Imagegen: - Theme tweaks --- .../org/klomp/snark/web/I2PSnarkServlet.java | 12 +- .../src/net/i2p/router/web/PeerHelper.java | 178 +++---- .../i2p/router/web/SummaryBarRenderer.java | 4 +- .../net/i2p/router/web/TunnelRenderer.java | 43 +- history.txt | 22 + .../themes/console/classic/console.css | 296 ++++++++++-- .../resources/themes/console/dark/console.css | 261 ++++++++-- .../themes/console/dark/console_ar.css | 8 + .../themes/console/dark/console_big.css | 100 +++- .../themes/console/dark/i2ptunnel.css | 9 +- .../images/info/network_status/accepting.png | Bin 0 -> 396 bytes .../info/network_status/network_clockskew.png | Bin 0 -> 780 bytes .../info/network_status/network_error.png | Bin 0 -> 677 bytes .../network_status/network_firewalled.png | Bin 0 -> 509 bytes .../info/network_status/network_hidden.png | Bin 0 -> 745 bytes .../images/info/network_status/network_ok.png | Bin 0 -> 568 bytes .../info/network_status/network_testing.png | Bin 0 -> 565 bytes .../images/info/network_status/network_vm.png | Bin 0 -> 396 bytes .../info/network_status/network_warning.png | Bin 0 -> 758 bytes .../images/info/network_status/rejecting.png | Bin 0 -> 396 bytes .../info/network_status/rejecting_hidden.png | Bin 0 -> 396 bytes .../themes/console/light/console.css | 447 +++++++++++++++--- .../themes/console/light/console_ar.css | 44 +- .../themes/console/light/console_big.css | 27 +- .../themes/console/midnight/console.css | 217 ++++++++- .../themes/console/midnight/console_ar.css | 5 +- .../resources/themes/imagegen/imagegen.css | 20 +- .../resources/themes/snark/classic/snark.css | 86 ++-- .../resources/themes/snark/dark/snark.css | 172 ++++--- .../resources/themes/snark/light/snark.css | 136 +++--- .../resources/themes/snark/midnight/snark.css | 116 +++-- .../resources/themes/snark/ubergine/snark.css | 300 +++++++++--- .../resources/themes/snark/vanilla/snark.css | 314 ++++++++++-- .../themes/susidns/classic/susidns.css | 3 + .../resources/themes/susidns/dark/susidns.css | 11 +- .../resources/themes/susidns/images/how.svg | 19 +- .../themes/susimail/classic/susimail.css | 3 + .../themes/susimail/dark/susimail.css | 10 +- 38 files changed, 2201 insertions(+), 662 deletions(-) create mode 100644 installer/resources/themes/console/images/info/network_status/accepting.png create mode 100644 installer/resources/themes/console/images/info/network_status/network_clockskew.png create mode 100644 installer/resources/themes/console/images/info/network_status/network_error.png create mode 100644 installer/resources/themes/console/images/info/network_status/network_firewalled.png create mode 100644 installer/resources/themes/console/images/info/network_status/network_hidden.png create mode 100644 installer/resources/themes/console/images/info/network_status/network_ok.png create mode 100644 installer/resources/themes/console/images/info/network_status/network_testing.png create mode 100644 installer/resources/themes/console/images/info/network_status/network_vm.png create mode 100644 installer/resources/themes/console/images/info/network_status/network_warning.png create mode 100644 installer/resources/themes/console/images/info/network_status/rejecting.png create mode 100644 installer/resources/themes/console/images/info/network_status/rejecting_hidden.png diff --git a/apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java b/apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java index 8e86f2bf83..b199f0d555 100644 --- a/apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java +++ b/apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java @@ -316,7 +316,7 @@ public class I2PSnarkServlet extends BasicServlet { if (isConfigure) { out.write("
"); + out.write("\" class=\"snarkNav nav_main\">"); if (_contextName.equals(DEFAULT_NAME)) out.write(_t("I2PSnark")); else @@ -325,7 +325,7 @@ public class I2PSnarkServlet extends BasicServlet { } else { out.write("
"); + out.write("\" class=\"snarkNav nav_main\">"); if (_contextName.equals(DEFAULT_NAME)) out.write(_t("I2PSnark")); else @@ -333,7 +333,7 @@ public class I2PSnarkServlet extends BasicServlet { out.write("\n"); sortedTrackers = _manager.getSortedTrackers(); if (_context.isRouterContext()) { - //out.write(""); + //out.write(""); //out.write(_t("Forum")); //out.write("\n"); for (Tracker t : sortedTrackers) { @@ -341,7 +341,7 @@ public class I2PSnarkServlet extends BasicServlet { continue; if (_manager.util().isKnownOpenTracker(t.announceURL)) continue; - out.write(" " + t.name + ""); + out.write(" " + t.name + ""); } } } @@ -394,7 +394,7 @@ public class I2PSnarkServlet extends BasicServlet { private void writeMessages(PrintWriter out, boolean isConfigure, String peerString) throws IOException { List msgs = _manager.getMessages(); if (!msgs.isEmpty()) { - out.write("\n
"); + out.write("\n
"); out.write("\n
"); + buf.append(" class=\"snarkNav nav_main\">"); if (_contextName.equals(DEFAULT_NAME)) buf.append(_t("I2PSnark")); else diff --git a/apps/routerconsole/java/src/net/i2p/router/web/PeerHelper.java b/apps/routerconsole/java/src/net/i2p/router/web/PeerHelper.java index d3e59e08c3..1fcdb7543d 100644 --- a/apps/routerconsole/java/src/net/i2p/router/web/PeerHelper.java +++ b/apps/routerconsole/java/src/net/i2p/router/web/PeerHelper.java @@ -28,13 +28,13 @@ import net.i2p.util.SystemVersion; public class PeerHelper extends HelperBase { private int _sortFlags; private String _urlBase; - + // Opera doesn't have the char, TODO check UA //private static final String THINSP = " / "; private static final String THINSP = " / "; public PeerHelper() {} - + public void setSort(String flags) { if (flags != null) { try { @@ -47,7 +47,7 @@ public class PeerHelper extends HelperBase { } } public void setUrlBase(String base) { _urlBase = base; } - + public String getPeerSummary() { try { renderStatusHTML(_out, _urlBase, _sortFlags); @@ -58,7 +58,7 @@ public class PeerHelper extends HelperBase { } return ""; } - + /** * Warning - blocking, very slow, queries the active UPnP router, * will take many seconds if it has vanished. @@ -88,7 +88,7 @@ public class PeerHelper extends HelperBase { t.renderStatusHTML(out, urlBase, sortFlags); } } - + if (!transports.isEmpty()) { out.write(getTransportsLegend()); } @@ -186,7 +186,8 @@ public class PeerHelper extends HelperBase { buf.append(".\n" + "
\n" + "" + - "" + + "" + "" + "" + "" + @@ -211,15 +212,15 @@ public class PeerHelper extends HelperBase { buf.append("\"Inbound\""); else buf.append("\"Outbound\""); - buf.append("\n"); buf.append("\n"); } @@ -332,7 +334,7 @@ public class PeerHelper extends HelperBase { long resentTotal = 0; long dupRecvTotal = 0; int numPeers = 0; - + StringBuilder buf = new StringBuilder(512); buf.append("

").append(_t("UDP connections")).append(": ").append(peers.size()); buf.append(". ").append(_t("Limit")).append(": ").append(ut.getMaxConnections()); @@ -347,8 +349,8 @@ public class PeerHelper extends HelperBase { appendSortLinks(buf, urlBase, sortFlags, _t("Sort by peer hash"), FLAG_ALPHA); buf.append("

\n"); - buf.append("\n"); + buf.append("\n"); buf.append("\n"); - buf.append("\n"); + buf.append("\n"); + buf.append("\n"); buf.append("\n"); - buf.append("\n"); + buf.append("\n"); + buf.append("\n"); out.write(buf.toString()); buf.setLength(0); long now = _context.clock().now(); for (PeerState peer : peers) { if (now-peer.getLastReceiveTime() > 60*60*1000) continue; // don't include old peers - + buf.append(""); - buf.append(""); - + long idleIn = Math.max(now-peer.getLastReceiveTime(), 0); long idleOut = Math.max(now-peer.getLastSendTime(), 0); - - buf.append(""); + buf.append("").append(THINSP); + buf.append("").append(DataHelper.formatDuration2(idleOut)); + buf.append(""); int recvBps = (idleIn > 15*1000 ? 0 : peer.getReceiveBps()); int sendBps = (idleOut > 15*1000 ? 0 : peer.getSendBps()); - - buf.append(""); + buf.append(""); long uptime = now - peer.getKeyEstablishedTime(); - + buf.append(""); - + buf.append(""); + buf.append(""); buf.append(""); - + //buf.append(""); @@ -507,40 +509,41 @@ public class PeerHelper extends HelperBase { buf.append(""); - - buf.append(""); - + buf.append(""); + long sent = peer.getMessagesSent(); long recv = peer.getMessagesReceived(); - + buf.append(""); - + buf.append(""); - + //double sent = (double)peer.getPacketsPeriodTransmitted(); //double sendLostPct = 0; //if (sent > 0) // sendLostPct = (double)peer.getPacketsRetransmitted()/(sent); - + long resent = peer.getPacketsRetransmitted(); long dupRecv = peer.getPacketsReceivedDuplicate(); - + buf.append(""); - + buf.append(""); @@ -548,47 +551,48 @@ public class PeerHelper extends HelperBase { buf.append("\n"); out.write(buf.toString()); buf.setLength(0); - + bpsIn += recvBps; bpsOut += sendBps; - + uptimeMsTotal += uptime; cwinTotal += sendWindow; rttTotal += rtt; rtoTotal += rto; - + sendTotal += sent; recvTotal += recv; resentTotal += resent; dupRecvTotal += dupRecv; - + numPeers++; } - + if (numPeers > 0) { // buf.append("\n"); buf.append("" + - "" + - "" + + "\n" + + buf.append("\n" + "\n" + - "\n" + - "\n"); + buf.append("\n" + + "\n"); /**** if (sortFlags == FLAG_DEBUG) { buf.append(""); + out.write(""); else - out.write(""); - out.write(" \n"); + out.write(""); + out.write("\n"); int count = info.getProcessedMessagesCount(); - out.write(" \n"); + out.write("\n"); for (int j = 0; j < info.getLength(); j++) { Hash peer = info.getPeer(j); TunnelId id = (info.isInbound() ? info.getReceiveTunnelId(j) : info.getSendTunnelId(j)); if (_context.routerHash().equals(peer)) { - out.write(" "); + // Add empty content placeholders to force alignment + out.write(" "); } else { String cap = getCapacity(peer); - out.write(" "); + // TODO Add tooltips for network cap / tunnel id + out.write(" "); } if (info.getLength() < maxLength && (info.getLength() == 1 || j == info.getLength() - 2)) { for (int k = info.getLength(); k < maxLength; k++) - out.write(" "); + out.write(""); } } out.write("\n"); - + if (info.isInbound()) processedIn += count; else @@ -233,7 +238,7 @@ class TunnelRenderer { DataHelper.formatSize2(processedIn*1024) + "B " + _t("in") + ", " + DataHelper.formatSize2(processedOut*1024) + "B " + _t("out") + ""); } - + /**** private void renderPeers(Writer out) throws IOException { // count up the peers in the local pools @@ -320,15 +325,15 @@ class TunnelRenderer { // get both countries String lc = this.comm.getCountry(l); String rc = this.comm.getCountry(r); - + // make them non-null lc = (lc == null) ? "zzzz" : lc; rc = (rc == null) ? "zzzz" : rc; - + // let String handle the rest return lc.compareTo(rc); } - + private CommSystemFacade comm; } ****/ diff --git a/history.txt b/history.txt index c7c9ede955..0df632bde4 100644 --- a/history.txt +++ b/history.txt @@ -1,3 +1,25 @@ +2017-06-12 str4d + * Console: + - /logs: fixed environment/running info table resize on focus (ticket #1996) + - Scale theme/language divs so we don't truncate language display + - Arabic (light) adjust font size for sidebar elements + - Sidebar network status display (ticket #1996) + - Usability: + - Enhance presentation of tables on /peers (improve header/column alignment, + center to separator for multi-value rows) + - Enhance presentation of tables on /tunnels (reliable alignment of mixed + content in rows, more prominence to bandwidth tiers) + * I2PSnark: + - Usability: add tabindex="0" to screenlog + - Update navbar link classes to allow easier targetting of button type + - Remove disabled cursor for known tracker radio icons (ticket #1996) + - Fix alignment issue for comments (ticket #1996) + - ubergine: further optimize theme to reduce scroll lag (ticket #1996) + - ubergine/vanilla: + - Add mini-mode at <=800px + - Small size reduction to navbar links (ticket #1996) + * Imagegen: Theme tweaks + 2017-06-05 str4d * Add state classes to network status messages in sidebar * Switch light theme to the same top-nav style as the other themes diff --git a/installer/resources/themes/console/classic/console.css b/installer/resources/themes/console/classic/console.css index d8f7324a9b..339051178a 100644 --- a/installer/resources/themes/console/classic/console.css +++ b/installer/resources/themes/console/classic/console.css @@ -7,6 +7,7 @@ body { padding: 0; text-align: left; background: #bbf url(images/bg.png) center center fixed; + background-size: 120px 120px; color: #0c153d; font: 9pt/130% "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, Helvetica, sans-serif; } @@ -22,7 +23,25 @@ body { url(/themes/console/images/buttons/search_hover.png) no-repeat, url(/themes/console/images/buttons/shutdown_hover.png) no-repeat, url(/themes/console/images/buttons/update_hover.png) no-repeat, #bbf; - background-size: 150px 150px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; + background-size: 120px 120px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; +} + +::selection { + text-shadow: none; + background: #4a90d9; + color: white; +} + +::-moz-selection { + text-shadow: none; + background: #4a90d9; + color: white; +} + +.routersummary img[src$="i2plogo.png"], .routersummary h3, .confignav, *::before, *::after { + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; } .hide, .hideme { @@ -322,7 +341,7 @@ img { margin: 10px 0; } -/* Sidebar */ +/* sidebar */ .routersummaryouter { float: left; @@ -337,6 +356,7 @@ img { .routersummary { background: #eef url(images/bg0.png); background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.2)), url(images/bg0.png); + background-size: 100% 100%, 120px 120px; width: 193px; color: inherit; margin: 0 0 5px; @@ -353,11 +373,15 @@ img { margin-left: 0; width: 173px; height: auto; - filter: drop-shadow(0 0 1px #ccc); + box-shadow: 0 0 1px 1px rgba(180,180,180,0.7); + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; } .routersummary a { padding: 2px; + vertical-align: middle; } .routersummary input[type=text] { @@ -422,13 +446,13 @@ img { text-transform: capitalize; text-decoration: none !important; color: #1f7096; - line-height: 110%; + line-height: 108%; background: #fff url(images/bg2.png); background: linear-gradient(to right, #eff2ff 0%, #fff 50%, #eff2ff); box-shadow: inset 0 0 2px 1px #f2f7fa; } -.routersummary h3 a, .routersummary h4 a { +.routersummary h3 a { text-decoration: none; white-space: normal; display: inline-block; @@ -582,25 +606,39 @@ p:empty + .sb_notice { margin: -2px 0; } -div.newsheadings { +.newsheadings { text-align: right; margin: -1px 5px -5px -23px; padding: 0; font-size: 8pt; } -div.newsheadings li { - list-style: none outside url(images/newsbullet_mini.png); - margin: 0 -4px 2px 8px; +.newsheadings ul { + margin: 2px 5px -1px 38px; + padding: 0; + display: inline-block; + width: 171px; } -div.newsheadings li:first-child { +.newsheadings li { + list-style: none outside url(images/newsbullet_mini.png); + margin: 2px -4px 2px 8px; + vertical-align: middle; + line-height: 110%; +} + +.newsheadings li a { + margin-top: -2px; + margin-left: -3px; + display: inline-block; +} + +.newsheadings li:first-child { margin-top: -3px; } -div.newsheadings ul { - margin: 0 5px -3px 38px; - padding: 0; +.newsheadings li:last-child { + margin-bottom: 0; } div.refresh { @@ -625,6 +663,7 @@ div.refresh { .routersummary a img:first-child:hover, .routersummary a img:first-child:active { opacity: 1; filter: drop-shadow(0 0 1px #89f); + box-shadow: none; } .routersummary a[href="/"], .routersummary a[href="/console"] { @@ -635,7 +674,7 @@ div.refresh { filter: drop-shadow(0 0 1px #f60) saturate(200%); } -/* end Sidebar */ +/* end sidebar */ a:link { color: #33a; @@ -1349,7 +1388,9 @@ button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="re min-width: 540px; background: #eef url(/themes/snark/ubergine/images/hat.png) no-repeat scroll right bottom !important; background: url(/themes/snark/ubergine/images/hat.png) no-repeat scroll right bottom, url(images/bg0.png) repeat scroll top left !important; - background: url(/themes/snark/ubergine/images/hat.png) no-repeat scroll right bottom, linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.1)), url(images/bg0.png) !important; + background: url(/themes/snark/ubergine/images/hat.png) no-repeat scroll right -3px bottom -5px, linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.1)) top -1px center, url(images/bg0.png) top -3px center !important; + background-size: auto 180px, 100% 100%, 120px 120px !important; + box-shadow: inset 0 0 0 1px #e8e8f5; } .main#news h3 { @@ -1481,6 +1522,7 @@ div.news { margin: -1px 1px 0 200px; background: #f9f9ea url(images/bg1.png); background: linear-gradient(to bottom, rgba(255,255,255,0.6), rgba(255,255,255,0.5)), url(images/bg1.png) #efefe0; + background-size: 100% 100%, 120px 120px; border: 1px solid #89f; border-bottom: 1px solid #89f; border-right: 1px solid #89f; @@ -2004,6 +2046,10 @@ tr:hover th { width: auto !important; } +#thresholds tr:last-child td { + background: #fff; +} + #profile_defs td:nth-child(2)::first-letter { text-transform: uppercase; } @@ -2236,7 +2282,8 @@ pre#transports { #enviro:hover tr, #enviro:hover td { background: #ffe; - border: #ffe; + border-top: 1px inset transparent; + border-bottom: 1px inset transparent; } #enviro td, #eventlogs td { @@ -2245,7 +2292,7 @@ pre#transports { #enviro td:first-child { text-align: right; - width: 120px; + width: 1%; white-space: nowrap; padding-right: 0; } @@ -2667,7 +2714,7 @@ h4#updateplugins { margin-top: -13px; } -.routersummary h2, .routersummary h3, div.confignav, th { +.routersummary h2, .routersummary h3, div.confignav { background: url(images/tinytitle.png) center center repeat-x; background: linear-gradient(to bottom, #fff 50%, #eff2ff 50%); } @@ -2696,7 +2743,8 @@ table tt { } th { - background-color: #fff; + background: #fff; + background: linear-gradient(to bottom, #fff, #eff2ff); padding: 5px; text-align: center; border-bottom: 1px solid #89f; @@ -3083,57 +3131,58 @@ h3 + .statusnotes { border: 1px solid #89f !important; border-top: 0; padding: 5px 0; - background: #fff url(images/tinytitle.png) center center repeat-x; - background: linear-gradient(to bottom, #fff 50%, #eff2ff 50%); + background: #fff; + background: linear-gradient(to right, #eff2ff, #fff, #eff2ff); + box-shadow: inset 0 0 0 1px #fff; } .statusnotes + .statusnotes { margin-top: -8px !important; } -div.joblog { +.joblog { margin: 10px 0; line-height: 130% !important; } -div.joblog li { +.joblog li { word-wrap: break-word !important; line-height: 105% !important; } -div.joblog ul { +.joblog ul { word-wrap: break-word !important; } -div.joblog li:first-child { +.joblog li:first-child { margin-top: -5px; } -div.joblog li:last-child { +.joblog li:last-child { margin-bottom: -5px; } -div.joblog form:first-child { +.joblog form:first-child { margin-top: 10px; } -div.joblog table { +.joblog table { margin-top: 15px; } -div.joblog p { +.joblog p { line-height: 130%; } -div.joblog h3 { +.joblog h3 { margin: 10px 0 20px 0; } -div.joblog h3:first-child { +.joblog h3:first-child { margin: -10px 0 15px 0; } -div.joblog hr { +.joblog hr { margin: 15px 0 15px; } @@ -3141,7 +3190,7 @@ h2#jobrunners { margin-top: -10px; } -div.joblog ol { +.joblog ol { margin-bottom: 5px !important; margin-top: -21px; -moz-column-count: 2; @@ -3262,7 +3311,7 @@ h3#totaljobstats { } .homelinkedit th:first-child, #sidebarconf th:first-child, #consolepass th:first-child { - background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #fff 50%, #eff2ff 50%); + background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #fff, #eff2ff); font-size: 0 !important; width: 5%; } @@ -3748,7 +3797,7 @@ body.iframed { vertical-align: text-bottom; } -div.themechoice { +.themechoice { width: 115px; min-height: 78px; overflow: hidden; @@ -3873,7 +3922,7 @@ p#helptranslate { vertical-align: sub; } -div.themelabel { +.themelabel { border-top: 1px solid #89f !important; margin: -25px -4px 0; padding: 3px 2px; @@ -3884,7 +3933,7 @@ div.themelabel { white-space: nowrap; } -div#themesettings { +#themesettings { clear: both; border: 1px solid #89f; padding: 4px 5px 0; @@ -3892,7 +3941,7 @@ div#themesettings { background: #eff1ff; } -div#langsettings { +#langsettings { border: 1px solid #89f; padding: 4px 5px 0; background: #eff1ff; @@ -3907,7 +3956,7 @@ div#langsettings { height: 1px; } -div.langselect { /* containing box for lang selection */ +.langselect { width: 115px; float: left; margin: 4px; @@ -4003,15 +4052,15 @@ div.flagradio { margin-top: 2px; } -div.langselect + br { +.langselect + br { display: none !important; } -div.langselect br { +.langselect br { display: block; } -div.ui_lang { /* lang text label */ +.ui_lang { text-align: center; background: #eef url(images/tinytitle.png) center center; background: linear-gradient(to bottom, #fff 50%, #eff2ff 50%); @@ -5673,7 +5722,7 @@ table.sybil_routerinfo:last-child { } @media screen and (min-width: 1500px) { -body, .main, .main td, .news p, #news p, .tab, .tab2, .main li b, div.joblog li, .themelabel, .ui_lang, .applabel a, .statusnotes, .routersummary button.download, +body, .main, .main td, .news p, #news p, .tab, .tab2, .main li b, .joblog li, .themelabel, .ui_lang, .applabel a, .statusnotes, .routersummary button.download, #peerdefs, #profile_defs, #thresholds, #configinfo, .infohelp, .infowarn, button, input, select, textarea, code, tt, pre, .netdbentry th, .configtable th, .statlist a[name], .statlist b, .statlist li b, .statlist a[name]:hover, div.messages, th { font-size: 10pt !important; @@ -5738,6 +5787,7 @@ div.app { .applabel a { height: 16px !important; + padding-top: 3px; } .footnote { @@ -5748,6 +5798,10 @@ h3, h3.ptitle, h3.tabletitle, th.th_title { font-size: 11pt; } +.newsheadings ul { + width: 202px; +} + .newsentry h3, .newsentry h3 a, #news.main h3, .newsDate { font-size: 10.5pt !important; } @@ -5822,7 +5876,7 @@ div.news { margin-left: 232px !important; } -div.joblog h3 { +.joblog h3 { margin-top: 8px; } @@ -5861,6 +5915,26 @@ div.joblog h3 { .homelinkedit th:first-child, #sidebarconf th:first-child, #consolepass th:first-child { font-size: 0 !important; } + +.themechoice, .langselect { + width: 140px !important; +} + +.themechoice .optbox, .langselect .optbox { + width: 144px !important; +} + +.themechoice .optbox { + margin-left: -48px !important; +} + +.langselect .optbox { + margin-left: -64px !important; +} + +.langselect img[src^="/flags"] { + margin-left: -81px !important; +} } /* end responsive layout */ @@ -5883,3 +5957,137 @@ _:-ms-lang(x), .tunnels_client th:first-child::after { } /* end Edge/IE tweaks */ + +/* network status */ + +.routersummary .error, .routersummary .warn, .routersummary .testing, .routersummary .hidden, +.routersummary .running, .routersummary .firewalled, .routersummary .vmcomm, .routersummary .clockskew { + display: inline-block; + vertical-align: middle; + border: 1px solid #88f; + border-radius: 2px; + padding: 6px 3px; + width: calc(100% - 10px); + margin: -5px 0 -6px; + box-shadow: inset 0 0 0 1px #fff, 0 0 1px rgba(96,96,96,0.5); + text-shadow: 0 1px 1px #fff; +} + +.routersummary .firewalled { + background: rgba(255,220,255,0.3); + background: repeating-linear-gradient(135deg, rgba(220,255,220,0.5) 2px, rgba(110,255,110,0.1) 3px, rgba(220,255,220,0.5) 5px); +} + +.routersummary .error { + background: rgba(255,110,110,0.1); + box-shadow: inset 0 0 0 1px rgba(255,0,0,0.3), 0 0 1px rgba(96,96,96,0.5); +} + +.routersummary .warn, .routersummary .clockskew { + background: rgba(255,255,200,0.4); + box-shadow: inset 0 0 0 1px #ff0, 0 0 1px rgba(96,96,96,0.5); +} + +.routersummary .testing { + background: rgba(255,220,110,0.1); +} + +.routersummary .hidden, .routersummary .vmcomm { + background: rgba(220,220,220,0.4); +} + +.routersummary .running { + background: rgba(220,255,220,0.2); +} + +.routersummary .error::before, .routersummary .warn::before, .routersummary .testing::before, .routersummary .hidden::before, +.routersummary .running::before, .routersummary .firewalled::before, .routersummary .vmcomm::before, .routersummary .clockskew::before { + padding-right: 2px; + vertical-align: middle; + display: inline-block; + filter: drop-shadow(0 0 1px rgba(96,96,96,0.5)); +} + +.routersummary .error::before, .routersummary .clockskew::before { + content: url(/themes/console/images/info/network_status/network_error.png); +} + +.routersummary .warn::before { + content: url(/themes/console/images/info/network_status/network_warning.png); +} + +.routersummary .testing::before { + content: url(/themes/console/images/info/network_status/network_testing.png); +} + +.routersummary .hidden::before { + content: url(/themes/console/images/info/network_status/network_hidden.png); +} + +.routersummary .running::before { + content: url(/themes/console/images/info/network_status/network_ok.png); +} + +.routersummary .firewalled::before { + content: url(/themes/console/images/info/network_status/network_firewalled.png); +} + +.routersummary .vmcomm::before { + content: url(/themes/console/images/info/network_status/network_vm.png); +} + +.routersummary .clockskew::before { + content: url(/themes/console/images/info/network_status/network_clockskew.png); +} + +/* end network status */ + +/* welcome */ + +div[lang="ar"] li { + margin: 0 10px 0 30px; +} + +div[lang="ar"] h3, div[lang="ar"] li { + text-align: right; +} + +.main#console li:first-child { + padding-top: 10px; +} + +#console .links { + margin-left: 0; +} + +.twocol { + columns: 2 400px; + column-gap: 20px !important; + display: block; + margin: 10px 0 !important; +} + +p + .twocol { + margin: 10px 30px !important; +} + +.twocol li { + break-inside: avoid; + page-break-inside: avoid; + -webkit-break-inside: avoid; +} + +.twocol li:first-child { + margin-top: 0 !important + padding-top: 0 !important; + padding-bottom: 0 !important; +} + +.main#console p { + padding-top: 0; + padding-bottom: 0; +} + +/* end welcome */ + + diff --git a/installer/resources/themes/console/dark/console.css b/installer/resources/themes/console/dark/console.css index 95452d3771..481f1a5775 100644 --- a/installer/resources/themes/console/dark/console.css +++ b/installer/resources/themes/console/dark/console.css @@ -17,13 +17,21 @@ body { } ::selection { - background: #030 !important; - color: white; + background: rgba(0,187,0,0.99) !important; + color: #000; + text-shadow: none; } ::-moz-selection { - background: #030 !important; - color: white; + background: #0b0 !important; + color: #000; + text-shadow: none; +} + +.routersummary img[src$="i2plogo.png"], .routersummary h3, .confignav, *::before, *::after { + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; } div.clearer { @@ -438,6 +446,10 @@ div.warning { color: #595 !important; } +#sb_services, #sb_internals, #sb_advanced { + margin-top: -4px !important; +} + #sb_internals a, #sb_services a, #sb_advanced a { padding: 1px 2px; display: inline-block; @@ -732,7 +744,7 @@ div.main#news { /* end main */ #news h3 { - padding: 4px 8px 5px 10px; + padding: 6px 8px 6px 10px; letter-spacing: 0.08em !important; word-spacing: normal !important; } @@ -832,7 +844,7 @@ div.news hr { font-size: 8pt !important; padding: 1px 0 0 18px; display: inline-block; - opacity: 0.9; + opacity: 0.7; text-transform: none; } @@ -1387,14 +1399,58 @@ a:active { } .links { -/* padding-bottom: -2px; */ text-align: justify; margin-top: 10px; - margin-bottom: -10px; } .links li { list-style-image: url(images/link.png) !important; + text-align: justify !important; + line-height: 160% !important; +} + +/* welcome */ + +.twocol { + columns: 2 400px; + column-gap: 0 !important; + display: block; +} + +.twocol li { + break-inside: avoid; + page-break-inside: avoid; + -webkit-break-inside: avoid; +} + +.twocol li:first-child { + margin-top: 0 !important; +} + +div[lang="de"] .twocol, div[lang="pt"] .twocol, div[lang="es"] .twocol, div[lang="sv"] .twocol { + background: rgba(0,32,0,0.3); + border: 1px solid #000; + border-radius: 4px; + padding: 10px; + margin: 10px -5px 5px !important; +} + +p + .twocol, div[lang="de"] p + .twocol { + margin: 10px 25px !important; +} + +.main#console p { + margin: 5px 20px 10px; +} + +.main#console ul { + margin-left: 10px; + margin-right: 10px; + line-height: 150%; +} + +.main#console li { + text-align: justify; } .links b { @@ -1403,6 +1459,8 @@ a:active { line-height: 165%; } +/* end welcome */ + p { text-align: justify; line-height: 160%; @@ -2440,7 +2498,7 @@ tr#addnew, tr#addnew:hover { /* /configui lang selection boxes + theme selection */ -div.themechoice { +.themechoice { background: #000; background: linear-gradient(to bottom, #010 0%, #000 100%); width: 110px; @@ -2458,7 +2516,7 @@ div.themechoice { /* fixes weird height variation */ /* @-moz-document url-prefix() { -div.themechoice { +.themechoice { min-height: 75px; } } @@ -2650,9 +2708,9 @@ td#themeselect { .langselect .optbox { opacity: 0; outline: 1px dotted !important; - min-height: 60px; min-width: 111px !important; - margin: -5px 0 -30px -2px; + margin: -7px 0 -34px -2px; + min-height: 66px; vertical-align: text-bottom; text-align: center; z-index: 999; @@ -3203,32 +3261,39 @@ table#tunnelconfig td:first-child { /* /configupdate */ -table#i2pupdates { +#i2pupdates { margin-top: 11px; margin-bottom: 10px; } -table#i2pupdates td:first-child { +#i2pupdates td:first-child { width: 15%; white-space: nowrap; padding-left: 10px; line-height: 120%; } -table#i2pupdates td { +#i2pupdates td { padding: 2px 3px; } +#i2pupdates td:first-child::before { + content: ""; + display: inline-block; + min-height: 32px; + vertical-align: middle; +} + #i2pupdates .optbox { margin-left: 10px; } -table#i2pupdates input[name*="URL"], table#i2pupdates textarea { +#i2pupdates input[name*="URL"], #i2pupdates textarea { width: 98%; width: calc(100% - 17px); } -table#i2pupdates tr:last-child td { +#i2pupdates tr:last-child td { padding-right: 6px; background: #000 !important; } @@ -3835,7 +3900,8 @@ th > img[src^="/imagegen"] { /* scale down header images */ #enviro:hover td { background: #010; - border: #010; + border-top: 1px inset transparent; + border-bottom: 1px inset transparent; color: #ff0; } @@ -3845,7 +3911,7 @@ th > img[src^="/imagegen"] { /* scale down header images */ } #enviro td:first-child { - width: 100px; + width: 1%; text-align: right; padding-right: 0; white-space: nowrap; @@ -4273,7 +4339,7 @@ ul#banlist + hr { .footnote { text-align: right; color: #494; - font-size: 7pt; + font-size: 8pt; margin-bottom: 5px !important; } @@ -4286,9 +4352,9 @@ ul#banlist + hr { } .topness { - font-size: 7.5pt; + font-size: 8pt; text-align: right; - margin-top: -10px !important; + margin-top: 0 !important; margin-bottom: -5px; margin-right: 5px; } @@ -4449,8 +4515,8 @@ button.search { } .appimg { - height: 35px; - padding: 5px 0 8px; + height: 32px; + padding: 0 0 6px; } .app img { @@ -4552,8 +4618,8 @@ iframe.iframed { #i2psnarkframe { margin-bottom: -2px !important; - background: linear-gradient(45deg, rgba(0,0,0,0.5), rgba(0,34,0,0.7)), url(images/camotile2.png); - background-size: 3px 3px, 175px 175px; + background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.7)), url(images/camotile2.png); + background-size: 100% 100%, 175px 175px; } #i2ptunnelframe { @@ -5230,7 +5296,7 @@ h3#upnp { #upnpscan { border: 1px solid #494; margin: -11px 0 10px; - padding: 5px 15px; + padding: 0 15px 5px; background: #000; } @@ -5242,7 +5308,7 @@ p#webappconfigtext { margin: 1px 0 -2px 0; } -table#pluginconfig, table#i2pupdates, table.homelinkedit, table#peerdefs { +table#pluginconfig, #i2pupdates, table.homelinkedit, table#peerdefs { margin-top: -1px; } @@ -5383,13 +5449,13 @@ table#configstats { } #configstats td { - padding: 6px 5px; + padding: 8px 5px; } #configstats td:first-child { width: 1%; white-space: nowrap; - padding: 6px 8px; + padding: 8px; } #configstats td:first-child:empty + td > label { /* remove pointer from inert labels */ @@ -5723,7 +5789,7 @@ th { min-width: 200px !important; } -table#i2pupdates td:first-child { +#i2pupdates td:first-child { white-space: normal; width: 30%; } @@ -5850,7 +5916,9 @@ div.app { min-width: 138px; } -img.app, img.app2p { +.appimg { + height: 35px; + padding: 5px 0 8px; } .app img { @@ -5955,7 +6023,8 @@ table#permabanned { } .langbox { - margin: 5px 4px 2px 5px; + margin: 4px 4px 2px 5px; + line-height: 17px !important; } .langbox img { @@ -5982,6 +6051,37 @@ table#permabanned { table#reseedconfig input[type="text"], table#reseedconfig input[type="password"] { width: 250px; } + +.themechoice, .langselect { + width: 140px; +} + +.themechoice .optbox { + min-width: 144px !important; + margin-left: -48px !important; +} + +.langselect .optbox { + min-width: 144px !important; +} +.langselect img { + margin-left: -81px !important; +} +.langselect input[name="lang"]:checked + img { + margin-left: -82px !important; +} +} + +@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1500px) { +.langselect img, .langselect input[name="lang"]:checked + img { + margin-left: -10px !important; + margin-top: -18px !important; +} + +.langselect input[name="lang"]:checked + img { + margin-left: -11px !important; + margin-top: -19px !important; +} } @media screen and (min-width: 1840px) { @@ -6097,3 +6197,98 @@ _:-ms-lang(x), .tunnels_client th:first-child::after { } /* end Edge/IE tweaks */ + +/* network status */ + +.routersummary h4 a { + width: auto !important; + vertical-align: middle; + display: inline; +} + +.routersummary .error, .routersummary .warn, .routersummary .testing, .routersummary .hidden, +.routersummary .running, .routersummary .firewalled, .routersummary .vmcomm, .routersummary .clockskew { + display: inline-block; + vertical-align: middle; + border: 1px solid #316f30; + box-sizing: border-box; + padding: 6px 3px; + width: 100%; + margin: -5px 0; + box-shadow: inset 0 0 0 1px #000; + text-shadow: 0 1px 1px #000; +} + +.routersummary .firewalled { + border: 1px dotted #316f30; + border: 1px dotted rgba(49, 111, 48, 0.6); +} + +.routersummary .error { + border: 1px solid #900; + border: 1px solid rgba(153, 0, 0, 0.6); +} + +.routersummary .warn, .routersummary .clockskew { + border: 1px solid #aa0; + border: 1px solid rgba(170, 170, 0, 0.6); +} + +.routersummary .testing { + border: 1px solid #fa0; + border: 1px solid rgba(255, 170, 0, 0.6); +} + +.routersummary .hidden, .routersummary .vmcomm { + border: 1px dotted #777; + border: 1px solid rgba(119, 119, 119, 0.6); +} + +.routersummary .running { + border: 1px solid #316f30; + border: 1px solid rgba(49, 111, 48, 0.6); +} + +.routersummary .error::before, .routersummary .warn::before, .routersummary .testing::before, .routersummary .hidden::before, +.routersummary .running::before, .routersummary .firewalled::before, .routersummary .vmcomm::before, .routersummary .clockskew::before { + padding: 0 2px; + vertical-align: middle; + display: inline-block; + filter: drop-shadow(0 0 1px rgba(192,192,192,0.5)); +} + +.routersummary .error::before, .routersummary .clockskew::before { + content: url(/themes/console/images/info/network_status/network_error.png); +} + +.routersummary .warn::before { + content: url(/themes/console/images/info/network_status/network_warning.png); +} + +.routersummary .testing::before { + content: url(/themes/console/images/info/network_status/network_testing.png); +} + +.routersummary .hidden::before { + content: url(/themes/console/images/info/network_status/network_hidden.png); + padding: 0 3px; +} + +.routersummary .running::before { + content: url(/themes/console/images/info/network_status/network_ok.png); +} + +.routersummary .firewalled::before { + content: url(/themes/console/images/info/network_status/network_firewalled.png); +} + +.routersummary .vmcomm::before { + content: url(/themes/console/images/info/network_status/network_vm.png); +} + +.routersummary .clockskew::before { + content: url(/themes/console/images/info/network_status/network_clockskew.png); +} + +/* end network status */ + diff --git a/installer/resources/themes/console/dark/console_ar.css b/installer/resources/themes/console/dark/console_ar.css index 307ba6b959..502d5b1ff1 100644 --- a/installer/resources/themes/console/dark/console_ar.css +++ b/installer/resources/themes/console/dark/console_ar.css @@ -49,6 +49,14 @@ h1,h2,h3,h4 { text-align: right; } +h3, h3.welcome { + border-width: 1px 5px 1px 1px; +} + +#news h3 { + border-width: 1px 1px 1px 5px; +} + h4.app, h4.app2 { text-align: right; } diff --git a/installer/resources/themes/console/dark/console_big.css b/installer/resources/themes/console/dark/console_big.css index dbc4303fe2..79a8c6d4c8 100644 --- a/installer/resources/themes/console/dark/console_big.css +++ b/installer/resources/themes/console/dark/console_big.css @@ -7,15 +7,6 @@ h1, h2, h3, h4 { font-weight: normal !important; } -h1 { - font-size: 20pt; - padding: 11px 15px; -} - -h3 { - font-size: 14pt !important; -} - body { font-family: "Droid Sans", "Noto Sans", Verdana, "Bitstream Vera Sans", Tahoma, Helvetica, sans-serif; font-size: 12pt; @@ -84,20 +75,6 @@ b, a, a:link, a:hover, a:visited { font-size: 11pt !important; } -h2 { - font-size: 16pt; - text-shadow: none; - font-weight: normal; -} - -h3 { - font-size: 15pt; -} - -h4, h4.app, h4.app2 { - font-size: 14pt; -} - p, div.main { font-size: 11pt; } @@ -118,10 +95,15 @@ button.reload, button.stop { } code, pre, tt { + font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace; font-size: 11pt; font-weight: normal; } +.cells tt, .cells tt a { + font-size: 9pt !important; +} + #changelog pre { font-size: 10pt !important; } @@ -202,8 +184,69 @@ td.optionsave { font-size: 11pt !important; } +#console div[lang="zh"], #console li, #console p { + line-height: 170%; + letter-spacing: 0.1em; + word-spacing: 0.15em; + font-size: 10.5pt !important; +} + +#console code { + letter-spacing: normal; + word-spacing: normal; +} + +.twocol { + column-gap: 0 !important; + background: rgba(0,32,0,0.4); + border: 1px solid #000; + border-radius: 4px; + padding: 10px; +} + +li .twocol { + margin-top: 15px !important; + margin-bottom: -15px !important; +} + +.twocol li { + margin-left: 40px !important; +} + +#console ul li { + list-style: none; + margin-left: 10px; +} + +#console div[lang="zh"] a { + background: rgba(0,64,0,0.3); + padding: 0 3px; + border-radius: 2px; + line-height: 180%; +} + @media screen and (min-width: 0) { -p, .main { +h1 { + font-size: 20pt !important; + padding: 11px 15px; +} + +h2 { + font-size: 16pt !important; + text-shadow: none; + font-weight: normal; +} + +h3 { + font-size: 15pt !important; + padding: 8px 10px; +} + +h4, h4.app, h4.app2 { + font-size: 14pt; +} + +p, .main, #console code { font-size: 11pt !important; } @@ -236,6 +279,12 @@ div.routersummary img[src$="i2plogo.png"] { } } +@media screen and (max-width: 1000px) { +#console div[lang="zh"], #console p, #console li { + font-size: 10.5pt !important; +} +} + @media screen and (max-width: 1500px) { .tab, .tab2 { font-size: 10.5pt !important; @@ -247,7 +296,8 @@ h3#webappconfig, h3#i2pclientconfig { } .langbox { - margin-top: 6px !important; + margin-top: 5px !important; + margin-right: 5px !important; line-height: 17px; } } diff --git a/installer/resources/themes/console/dark/i2ptunnel.css b/installer/resources/themes/console/dark/i2ptunnel.css index b4a76fbe74..4ca8e32120 100644 --- a/installer/resources/themes/console/dark/i2ptunnel.css +++ b/installer/resources/themes/console/dark/i2ptunnel.css @@ -388,14 +388,9 @@ textarea:focus { filter: drop-shadow(0 0 1px #880); transition: ease filter 0.3s 0s; box-shadow: inset 0 0 1px #880; - font-weight: bold; outline: none; } -textarea[readonly]:focus { - font-weight: normal; -} - textarea#statusMessages, textarea#statusMessages:active, textarea#statusMessages:focus { background: #000; background: linear-gradient(to bottom, #000 0%, #010 100%) !important; @@ -429,7 +424,6 @@ _:-ms-lang(x), textarea#statusMessages, textarea#statusMessages:active, textarea .freetext:focus { box-shadow: 0 0 1px #f60; color: #111; - font-weight: bold; outline: none; } @@ -440,7 +434,6 @@ _:-ms-lang(x), textarea#statusMessages, textarea#statusMessages:active, textarea cursor: default; border: 1px solid #494 !important; opacity: 0.8; - font-weight: normal; } input[type="hidden"], input.default { @@ -997,7 +990,7 @@ input.tunnelName, input.tunnelDescription, #userAgents { .tunnelConfig td, td { border-top: 1px inset #1c3f1b; - padding: 5px; + padding: 8px 5px; } input[type="checkbox"], input[type="radio"] { diff --git a/installer/resources/themes/console/images/info/network_status/accepting.png b/installer/resources/themes/console/images/info/network_status/accepting.png new file mode 100644 index 0000000000000000000000000000000000000000..3ddd447309980140a84a84347532c7359a7dca8b GIT binary patch literal 396 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbMf(g2?jSB7RDhQ%WP|NmzwV27|7 zmWwhZvoN&tGAtBkSSiX-!^N;v1SHbO$1qz6Bm!hl6#z2W=L)mW6Xl#M!na6PX{U+W zUJJE@mKukw_>Ri)ACnhcr=+#lT7Q>=^SKbe+X?=65(O_QNv_m#IvpJOC`)jWlHevK z!6Qn7N0r2usf!&`S6^?TzS%-!gQfm<2eWq6SHoZB| ze(Xk{!YbDKnc*EN1yh2$;+i-<{mZd_`;76>$H$v=lkfjLc7FaxhWMSFC6|i1;(#_Y Nc)I$ztaD0e0sts#nuq`Z literal 0 HcmV?d00001 diff --git a/installer/resources/themes/console/images/info/network_status/network_clockskew.png b/installer/resources/themes/console/images/info/network_status/network_clockskew.png new file mode 100644 index 0000000000000000000000000000000000000000..5e8d97df56122ac26defa177ce5c234e5eefe83e GIT binary patch literal 780 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GXl47^epKgt&5Ya`N-@OG!y-X=xc4 z7?_%xT3K1y+1WWcIk~yHd3kyH`1ttw`2_?71P2H2U(Wdd|NmW!7(+rre0_b5jEsPK zAyPUzIx;dcp`oEbE!*ZXg3U4E;o;e~fE6eRGzw@ekdcs-1T;B1HZ~?M4rmKdfwPNC zYDPv{W~RQrzL&T6qHcygOBgrKWSlmC{)Abxrp=w(H)TpsZ|{OmhJ$N(n~Pa?t~5Gx z{rcY3ntM;5K7Q%ap>yZzQ+1XYSrTx8MET{rl$+CtrB*;L-($E63xn9uK&Be)jdtZa2>)+uM{5In_W{29^Z*0V4_xF!J&V z2x(~O8<|^K**kjq21msuWoGB(b+RG_lNK1-dkOF zH?dow2e^fyEP#Tib;Q3=9pde&as_;G4bz4;0EZ)dNZ-G7Xq zx9FEu^>X{qe{3b}1J2jZSY8_<^moCvtsNZvatyobn>=H_e3xl_4+=9+S3j3^P6M765N&zO2yVLfKUh21$AIR?U4Qn?ZCnUDoZ6$2iWr$WQl|-u^=%p6sf3D zhDeDFG;w1m_VLb5f@3=Iq>p_*fA78L@140S$ALd^<~rWCksR_3IiLV_zb@@KKx`ab z!FH@z+(?v4PlAh!8|?Wi9ShRKix1fr#k{n-nx$BQpP9)zl9Xrjek}|BwW5r)b;mFY z_f<6sgaoK*0=6Cqq*BRBtycIfNoBA04NGv~OTgyd?d@65*4M%Ksl$)iEL6UHwTiD^ z@_wP4V5`v>nS3wHndOCrc}gjm*nzI=kk97kfzr%Yv-z*#mC;?eA&ifIoZ8vB7tu5@ zYBi{rO87Md%;V!quhrT_O?4o?%RDl$(l8sxX|YsFnTkY!4+cTNg*`!l02XN^63Th2 zrD11PZ$;9@%K(egrI4!1944if1x~jMwr#tF6h&t5y?WQMhjVkoWEk!5M@J!&OoHn{ zvjM+XR`7)Yw!?=WKYi489EYIRf&Nw!PdBQT%Vor1Fv=D)I-QPdqOSh}pd@8`tn7p`HtMBfDH9ZYNIt`s_6-c=Z9GcaWB-lSYTdSX*enQti4BIyUe$#S1 z9-l~vA}|w`u`!tBd64^DLo<`AI>B^IZ+efi1+awoLO2|b0#;*3n4)nG1IGifK$PkF z`peGW0z8LHTtg%zhJ+EJ-<^S+BW=%5gmL(S(nF4V&cXl09{~mcK43f-* z#lQyqhA__Fcz6NqG!P#sc?C%S0E#i-5j%@)fU&xm1;Y=Z$@1>%#?OAfVo+jN2lGJy zo7k=Y=fD=S{Q3uR%IDv&z)k~!kI$bne3ll3^RbD+^s)Sedg035Ghh>6{`}1#&d$mJ z<&SU-doI#aK3xf>;$o!kPA3(hD)gZP?D0i#!+OH_`A3;m3$GkuMXS$#DHQ#8sNCXBnbir(?|vKr8~p%0O%Y z#D+ku4#d0+%f2uK&Wi*aus&%yh<rAfMldvQGo?HINHH@xlqjJW$L9@*+bvR}6zF zqb=B)*Z&VQO#QY5YUy`SvVr1njFe_)fB*vkt$pnwAsO*$00000NkvXXu0mjf6szA? literal 0 HcmV?d00001 diff --git a/installer/resources/themes/console/images/info/network_status/network_hidden.png b/installer/resources/themes/console/images/info/network_status/network_hidden.png new file mode 100644 index 0000000000000000000000000000000000000000..4b653f0e3b6860f1bbaa44a6b89ccb36430d5084 GIT binary patch literal 745 zcmVkqUbS}EEp1fsZ9 zau5-s%_XgE%>Taqb7sx21Ro6hX5P#<^XAQRrfHIkv$F)3!1Dv}34(Y)?4qOZ-B^qR^@Rn{b$#H3&v*7( zBytl#oq`|`$j~-D$8q-2p`oy*s?Sij0HBPFkByC2biLD1Rm?*Ew+uLk7`_f*jP<#@ zx&oS}Sq{l`x+S3B;~`E_B-Lu!2U&gxF?)4@%9s?1-3Z+(F@+*;O1;Bt1UDF1^b{bSKUJ-)@N?!}rSNRw4 bM}PqUuAF4&iJgDl00000NkvXXu0mjfJVQ>i literal 0 HcmV?d00001 diff --git a/installer/resources/themes/console/images/info/network_status/network_ok.png b/installer/resources/themes/console/images/info/network_status/network_ok.png new file mode 100644 index 0000000000000000000000000000000000000000..15c0b90cfd7f1fdf15b91bb376f7aad2e0efa79c GIT binary patch literal 568 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbMfp8%f_S0K&E$oT*Ne;^5AW0F8A zOaM^^6o;z^GJqgGJv}os6T)_JaS>f8Dkdf-4+I7B+CZ>FTlS1zrCZQqmz>pP`#_GtDBpfySuxGhll4?Pahv2KR>^KfPlcjz@VU@(9qDZu(0^} z_{7A-q@<+eoTh^5)t**Q5mxw*M{d3pKy`9(!VrKP3i<>ggXRkgLX4Gj%# zZEc;Mo!#BteSLisCQRT{+9(5bs6t7QA1FMGP0TGUt*w2gO<%Kq^R^xP4jw#m>eSgw zx1K+L@#_1bq=-#GHK#pY978H@nf5S?9Wh{VnY=Fd_O`dT_WqCEcG2dnbj<-riH;)^ zlo&ZI`B*P@C0cHa?46__*Z+FIWA=y3vF%L$9~bDFJxW_B+a*`?QSAz+{%2v+hf8~w z6z!?ecUSe4SQ+AF$9Mbi;x|?zKTdgPZmV0DereO2!{YT(Gw$F2zH`F2V7G78HnIN4 z^QRdU?Y#5c=v rIbm|{_tk%QPHa$^vtIG(VT~WmQWetM+qX1ngW}55)z4*}Q$iB})sn=- literal 0 HcmV?d00001 diff --git a/installer/resources/themes/console/images/info/network_status/network_testing.png b/installer/resources/themes/console/images/info/network_status/network_testing.png new file mode 100644 index 0000000000000000000000000000000000000000..fec1380ad78c7b53d0ad0d8a078bb7960dd45a9a GIT binary patch literal 565 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbMf&j6ngS0K&E$oT*Ne;^5AW0F8A zOaM^^6o;z^GJqgGJv}os6T)_JaS;;}lb4s**4Eb3)6>`2x3I9Vw6wIdvvYKGbaHY6 zDsXjmb#rrbcX#*j@bK~R@$>Tw2nYxa3=9ei3JD1b4Gj$o3yX+|h>VO(OiWBpPEJcp z1DcJf$~S6G&Q6}bjeSgwx1K+L@#_1bq=-#GHK#pY978H@nf5S?9Wh{VnY=Fd_O`XR-u~s^-1{u^-UDX7 zLjgLCBHWHA3N<>ei=4f1wQ3H_$&{eFZ@2a?e`6`~SiIg#X77*d z9zH)cm34Fa`yYpS2)n6Gez^UwU;XK7KGw!pZ>;}C?*CXG#{0nA;P<>6eYTb9%~K}U z=lEW~WA~{gP($S1ZpZQsyMbyaKKo!ce{S06+Z!YgPA_Z5fV ucZD!0IIb&=IDfr8tdI3#67xz4*Mstn(o#Rei)ChmBFfX%&t;ucLK6UAMab&_ literal 0 HcmV?d00001 diff --git a/installer/resources/themes/console/images/info/network_status/network_vm.png b/installer/resources/themes/console/images/info/network_status/network_vm.png new file mode 100644 index 0000000000000000000000000000000000000000..527d40bc7294faa6bda712693d9e36be38f1523f GIT binary patch literal 396 zcmV;70dxL|P)#s-SpzWvy!uf1F(vknYu^JiXp=ZzQYb351#d#zDImm;fm9J8>AZHI*QtNKA@u7pDs>&pwT`1__6a(cmq$Wg&e19LavIm;4x qjn7lUSsL$uAZL8@vyrd;I`9ji(C0a9ZQaBG000079+d z-<-O!bY;>Xgz(SE3>FKLrbS2(h4f(1TMrRJ6hZY81U&=`q#lYM@*xC+9@fjST3L~V zG0bFO&XJme6Wss4bKAA0b>Mdo=X}5WJLfy!_X+uY9-=6sVC@`dII6MLesDbEcvGA- zZX%r>7#QerI2=rpBoK1B9Mb7DqS0tP5C{nW6L_X4Y&IK<#bOABLWsxXV2q)&vlFVS zGQP};xV`kzd%wZAQt$Wsd$QRqB9REXroZC;(xT=mraY|^kNA2)UEl-9`H_*4Q6i>N zDfE>k;jYSQo?^<=I`InpzXTu%!h7xvM6_D1n5<=}tTt$#V#?EcfwyG_FZ2WrjqF~2 zJ8rH?ut*lT{^Z3X?$P27uJOIOyk4)5Dy^)nz}peU-Rs{qPjRjF6CU1CeZ4;HC;sLR z-qH~UgTY%(O-+Y+n>cwq0i_~~YBhn+(|NFM^YD1Dr0Utl@xcq3iGR%?tj|DE6nyz+ zhhi~me($a%>YUABs#@Y`=u)#e9LeyJ5OjgD0t~cQ>R{+`4San&@!*LKjdgMCaJS%e z|5M0HYsL%jdE!f=JKRflFj?LNV~Y{F)h!|&aRtG zCO9XY@Vs8f9%hC~oQGLj!`jlI=FL(9%&xe22j>K;PD3kLH^)^Dy6@;efl7z{_fZ=R oNLDGBt0=?IjUyEC@s|Jt0N@=F(YdprqW}N^07*qoM6N<$f(4~$J^%m! literal 0 HcmV?d00001 diff --git a/installer/resources/themes/console/images/info/network_status/rejecting.png b/installer/resources/themes/console/images/info/network_status/rejecting.png new file mode 100644 index 0000000000000000000000000000000000000000..3bdc197a7616df2d5adaaa194d84d6a063be2ce6 GIT binary patch literal 396 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbMf(g2?j*JcKW#S9Gp|Nk#wV1Tff zGcY7GFtjr;EM#C<$-qzpR0tO7V_=vK76Hmm1vBQdv(Ez}PR_*w0{hg}59{b0*VR3t zr?*Z>XrHn10X@B=e0<0F`LB6+$1Qt zNlR<9y82E-!vhu;hpeoQ2nrq*6g)02e%;^yet7t!s3>;#XHp<{mjwBN9L@&>nLsdW z);b_Ke*E}-DEI~ie}TYBB>|)-&(p;*q~g}x6Gs^j889#$n6hj7qjv&xj(xk&(_c5C zT5g5pKJL@qU2cMvV*KWkI%c2i9)04d?h$a>t=L~vW;vg4ci_3jF|ykQ4yB${mVPha zCfUEBSXDT@@a=NdtJ@D`FU>DxPVwXHQrWI*3ACBP)78&qol`;+ E0EXw1I{*Lx literal 0 HcmV?d00001 diff --git a/installer/resources/themes/console/images/info/network_status/rejecting_hidden.png b/installer/resources/themes/console/images/info/network_status/rejecting_hidden.png new file mode 100644 index 0000000000000000000000000000000000000000..cee22ad16acdd8720966dc31760091bf1363ecf5 GIT binary patch literal 396 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbMfq5z)|R|5kBe}Dh~|NjHY;NV~& zS58hYBqYSg$H&;%SV%}HFfb6v)zs8C$B@R;*gRdgCS#0E%zfxpU|K{re9bIB@RVxhwKU_CVL_lmz*K zT+PnT!D(u4j>x9PE|&e{4ztGXbSeaV|PJihp9kIXT%?u4LV zulJ7|T(>Do9ITtWQNw>j?yP4Kn@*J9y=|5*crK5j;k8N1!)4uvQ|@Gs68o!^w+0WD_mboFyt=akR{01Fwiy8r+H literal 0 HcmV?d00001 diff --git a/installer/resources/themes/console/light/console.css b/installer/resources/themes/console/light/console.css index e764f8ab5f..7c833aa67a 100644 --- a/installer/resources/themes/console/light/console.css +++ b/installer/resources/themes/console/light/console.css @@ -51,6 +51,12 @@ div.clearer { text-shadow: none; } +.routersummary img[src$="i2plogo.png"], .routersummary h3, .confignav, *::before, *::after { + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; +} + * { outline: none; } @@ -236,6 +242,7 @@ pre { width: calc(100% - 4px); padding: 2px 0; color: #2c4e8f; + line-height: 110%; } h3#helpfaq { @@ -281,7 +288,7 @@ h3#helpfaq { } .routersummary h4 a { - display: inline-block; +/* display: inline-block;*/ vertical-align: middle; } @@ -993,6 +1000,15 @@ textarea[name="reseedURL"] { min-width: 300px; } +#reseedconfig tr:nth-child(2) br { + display: none; +} + +#reseedconfig tr:nth-child(2) label { + white-space: nowrap; + margin-right: 10px; +} + /* news */ div.news { @@ -1885,22 +1901,23 @@ table#wrapperlogs { cursor: text; } -#enviro:hover td { - background: rgba(255,255,239,0.4); - border: rgba(255,255,239,0.4); -} - #enviro td { padding-top: 5px; padding-bottom: 5px; } +#enviro:hover td { + background: rgba(255,255,239,0.4); + border-top: 1px inset transparent; + border-bottom: 1px inset transparent; +} + #enviro td:first-child { - width: 100px; + width: 1%; text-align: right; padding-right: 0; white-space: nowrap; - padding-left: 10px + padding-left: 10px; } table[id$="logs"] td { @@ -2336,7 +2353,7 @@ a:active { .links li { list-style: url(images/link.png) !important; - text-align: justify; + text-align: justify !important; line-height: 140% !important; margin-right: 10px !important; } @@ -2999,8 +3016,10 @@ h4 { margin: 0 0 10px 0; } +/* welcome section */ + .langbox { - margin:3px 1px 0 5px; + margin: 3px 1px 0 5px; padding: 2px 3px; color: #001; font-size: 7pt; @@ -3033,6 +3052,30 @@ h4 { transform: scale(1.0); } +.twocol { + columns: 2 400px; + column-gap: 0 !important; + display: block; + margin: 10px 0; +} + +.twocol li { + break-inside: avoid; + page-break-inside: avoid; + -webkit-break-inside: avoid; +} + +.twocol li:first-child { + margin-top: 0 !important; +} + +.main#console p { + margin-left: 10px; + margin-right: 10px; +} + +/* end welcome section */ + input[type="submit"], input[type="reset"], button, .optbox, select { cursor: pointer; } @@ -3839,7 +3882,7 @@ h3#scheduledjobs + ol li:before { div.footnote { text-align: right; color: #447; - font-size: 7pt; + font-size: 8pt; margin-bottom: -5px !important; } @@ -3847,8 +3890,14 @@ div.footnote hr { margin: 24px 0 5px 0 !important; background: #447; background: linear-gradient(to right, #77a, #669, #77a); + height: 2px; + border-bottom: 1px solid #fff; +} + +@media screen and (-webkit-min-device-pixel-ratio:0) { +div.footnote hr { height: 1px; - box-shadow: 0 0 0 1px #eef; +} } .topness { @@ -3937,11 +3986,11 @@ body.iframed { padding: 15px 15px 15px 50px; } -.themechoice .optbox, .langselect .optbox { +.main#config_ui .themechoice .optbox, .main#config_ui .langselect .optbox { vertical-align: text-bottom; } -div.themechoice { +.themechoice { width: 115px; overflow: hidden; text-overflow: ellipsis; @@ -3981,12 +4030,12 @@ div.themechoice { filter: drop-shadow(0 0 1px #f60); } -.main[id^="config_"] .themechoice .optbox { - min-height: 82px !important; - min-width: 118px !important; +.main#config_ui .themechoice .optbox { + min-height: 88px !important; + min-width: 123px !important; opacity: 0; /* hide the radio icon so we can use thumbnail img instead */ - margin-left: -36px !important; - margin-top: 4px; + margin-left: -38px !important; + margin-top: 0; z-index: 999 !important; outline: 1px dotted #f00; position: absolute; @@ -4033,15 +4082,6 @@ p#helptranslate { background-size: 28px 28px; } -#reseedconfig tr:nth-child(2) br { - display: none; -} - -#reseedconfig tr:nth-child(2) label { - white-space: nowrap; - margin-right: 10px; -} - #themeoptions input { margin-left: 5px; vertical-align: sub; @@ -4131,10 +4171,9 @@ div#langsettings { background: #fff; } -.langselect .optbox, .langselect .optbox:hover, .langselect .optbox:focus { - min-width: 118px !important; - min-height: 50px !important; +.main#config_ui .langselect .optbox, .main#config_ui .langselect .optbox:hover, .main#config_ui .langselect .optbox:focus { width: 118px !important; + min-height: 56px !important; height: 56px !important; margin-left: -2px; margin-bottom: 6px; @@ -4209,10 +4248,6 @@ div#langsettings { background: linear-gradient(to right, #eef, #fff, #eef) !important; } -div.flagradio { - margin-top: 2px; -} - div.langselect + br { display: none !important; } @@ -4341,38 +4376,24 @@ table#addkeyring tr:last-child td { text-align: center !important; } +/* #ntcpconnections td:nth-child(6), #ntcpconnections td:nth-child(7), #ntcpconnections td:nth-child(8), #ntcpconnections td:nth-child(9), #ntcpconnections td:nth-child(10), #ntcpconnections .tablefooter td:nth-child(3), #ntcpconnections .tablefooter td:nth-child(4), #ntcpconnections .tablefooter td:nth-child(5), #ntcpconnections .tablefooter td:nth-child(6) { padding-left: 1vw !important; padding-right: 1vw !important; } +*/ #ntcpconnections td:nth-child(4), #ntcpconnections td:nth-child(5), #udpconnections td:nth-child(4), #udpconnections td:nth-child(5), #udpconnections td:nth-child(8), #udpconnections td:nth-child(12) { white-space: nowrap; } -#udpconnections .tablefooter td { +#udpconnections .tablefooter td, #ntcpconnections .tablefooter td { padding-left: 5px; padding-right: 5px; } -@media screen and (min-width: 1500px) { -#ntcpconnections td:nth-child(6), #ntcpconnections td:nth-child(7), #ntcpconnections td:nth-child(8), #ntcpconnections td:nth-child(9), #ntcpconnections td:nth-child(10), -#udpconnections td:nth-child(6), #udpconnections td:nth-child(7), #udpconnections td:nth-child(9), #udpconnections td:nth-child(10), #udpconnections td:nth-child(11), -#udpconnections td:nth-child(13), #udpconnections td:nth-child(14), #udpconnections td:nth-child(15), #udpconnections td:nth-child(16), -#ntcpconnections .tablefooter td:nth-child(3), #ntcpconnections .tablefooter td:nth-child(4), #ntcpconnections .tablefooter td:nth-child(5), #ntcpconnections .tablefooter td:nth-child(6), -#udpconnections .tablefooter td:nth-child(3), #udpconnections .tablefooter td:nth-child(4), #udpconnections .tablefooter td:nth-child(7), #udpconnections .tablefooter td:nth-child(8), -#udpconnections .tablefooter td:nth-child(10), #udpconnections .tablefooter td:nth-child(11), #udpconnections .tablefooter td:nth-child(12), #udpconnections .tablefooter td:nth-child(13) { - padding-right: 10px !important; -} - -.cells { - border-left: none; - border-right: none; -} -} - /* end peers */ /* netdb */ @@ -4767,6 +4788,7 @@ p:empty { /* empty paragraph nuke */ /* Advanced lookup */ #netdblookup { + margin-top: 15px; margin-bottom: -8px; } @@ -5695,6 +5717,11 @@ input[name="pluginURL"] { #ntcpconnections td:first-child, #udpconnections td:first-child { padding-left: 5px !important; } + +#ntcpconnections .cells { + border-left: none; + border-right: none; +} } @media screen and (min-width: 1500px) { @@ -5708,6 +5735,11 @@ body, .main, .main td, .news p, #news p, .tab, .tab2, .main li b, div.joblog li, font-size: 9pt !important; } +#udpconnections .cells { + border-left: none; + border-right: none; +} + .cells tt, #profilelist tt { margin-left: 3px !important; margin-right: 3px !important; @@ -5767,7 +5799,7 @@ h3#pconfig, h3#webappconfig, h3#i2pclientconfig, h3#pluginmanage, p#clientconf.i } .routersummary .reload, .routersummary .stop { - min-width: 96px; + min-width: 95px; margin: 0 3px -5px; } @@ -5823,9 +5855,13 @@ h1 { padding-top: 12px !important; } */ +.langbox { + line-height: 120%; + margin: 4px 2px 0 5px; +} .langbox img { - margin: -1px 0 1px 1px; + margin: -1px 0 2px 2px; } .th_title a { @@ -5867,6 +5903,25 @@ button.control { min-width: 58px; } +.themechoice, .langselect { + width: 140px !important; +} + +.main#config_ui .themechoice .optbox, .main#config_ui .langselect .optbox, +.main#config_ui .themechoice .optbox:hover, .main#config_ui .langselect .optbox:hover, +.main#config_ui .themechoice .optbox:focus, .main#config_ui .langselect .optbox:focus { + width: 144px !important; +} + +.main#config_ui .themechoice .optbox { + margin-left: -49px !important; + min-height: 92px !important; +} + +.main#config_ui .langselect .optbox, .main#config_ui .langselect .optbox:hover, .main#config_ui .langselect .optbox:focus { + margin-left: -2px !important; +} + _:-ms-lang(x), #browseronstart { margin-bottom: -15px !important; } @@ -5902,7 +5957,7 @@ _:-ms-lang(x), .tunnels_client th:first-child::after { /* end Edge/IE tweaks */ - +/* TODO: Merge with main classes above */ /* top navigation */ h1, .confignav { @@ -5923,7 +5978,11 @@ h1 { text-align: center; font-weight: bold; color: #000; - background: #efefff linear-gradient(to bottom, #fff 50%, rgba(255, 255, 255, 0.6) 52%, rgba(240, 240, 240, 0.4)) !important; + background: linear-gradient(to bottom, #fff 50%, rgba(255, 255, 255, 0.6) 52%, rgba(240, 240, 240, 0.4)) #efefff !important; + background: linear-gradient(to right, rgba(255,255,255,0.7), rgba(255,255,255,0) 5%, rgba(255,255,255,0) 95%, rgba(255,255,255,0.7)), linear-gradient(to bottom, #fff 50%, rgba(255, 255, 255, 0.6) 52%, rgba(240, 240, 240, 0.4)) #efefff !important; + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; } .tab, .tab2 { @@ -5987,3 +6046,279 @@ h1 { /* end topnav */ +/* network status */ + +.routersummary .error, .routersummary .warn, .routersummary .testing, .routersummary .hidden, +.routersummary .running, .routersummary .firewalled, .routersummary .vmcomm, .routersummary .clockskew, .tunnelBuildStatus { + display: inline-block; + vertical-align: middle; + border: 1px solid #88f; + border-radius: 2px; + padding: 6px 3px; + width: calc(100% - 10px); + width: 100%; + margin: -4px -1px; + box-sizing: border-box; + box-shadow: inset 0 0 0 1px #fff, 0 0 1px rgba(96,96,96,0.5); + text-shadow: 0 1px 1px #fff; +} + +.routersummary .firewalled { + background: repeating-linear-gradient(135deg, rgba(220,255,220,0.3) 2px, rgba(255,255,220,0.3) 3px, rgba(220,255,220,0.3) 5px); +} + +.routersummary .error { + background: rgba(255,110,110,0.1); + box-shadow: inset 0 0 0 1px rgba(255,0,0,0.3), 0 0 1px rgba(96,96,96,0.5); + background: repeating-linear-gradient(135deg, rgba(255,100,100,0.1) 2px, rgba(255,200,200,0.3) 3px, rgba(255,100,100,0.1) 5px); + border: 1px dotted #d33; +} + +.routersummary .warn, .routersummary .clockskew { + background: rgba(255,255,200,0.25); + box-shadow: inset 0 0 0 1px #ff0, 0 0 1px rgba(96,96,96,0.5); +} + +.routersummary .testing { + background: rgba(255,220,110,0.1); +} + +.routersummary .hidden, .routersummary .vmcomm { + background: rgba(220,220,220,0.4); +} + +.routersummary .vmcomm { + border: 1px dotted #999; +} + +.routersummary .running { + background: rgba(220,255,220,0.15); +} + +.routersummary .error::before, .routersummary .warn::before, .routersummary .testing::before, .routersummary .hidden::before, +.routersummary .running::before, .routersummary .firewalled::before, .routersummary .vmcomm::before, .routersummary .clockskew::before { + padding-right: 3px; + vertical-align: middle; + display: inline-block; + filter: drop-shadow(0 0 1px rgba(96,96,96,0.5)); +} + +.routersummary .error::before, .routersummary .clockskew::before { + content: url(/themes/console/images/info/network_status/network_error.png); +} + +.routersummary .warn::before { + content: url(/themes/console/images/info/network_status/network_warning.png); +} + +.routersummary .testing::before { + content: url(/themes/console/images/info/network_status/network_testing.png); +} + +.routersummary .hidden::before { + content: url(/themes/console/images/info/network_status/network_hidden.png); +} + +.routersummary .running::before { + content: url(/themes/console/images/info/network_status/network_ok.png); +} + +.routersummary .firewalled::before { + content: url(/themes/console/images/info/network_status/network_firewalled.png); + padding-right: 4px; +} + +.routersummary .vmcomm::before { + content: url(/themes/console/images/info/network_status/network_vm.png); +} + +.routersummary .clockskew::before { + content: url(/themes/console/images/info/network_status/network_clockskew.png); +} + +/* end network status */ + +/* tunnel build status */ + +.tunnelBuildStatus { + background: rgba(220,255,220,0.15); + color: #070; +} + +.tunnelStatusAccept { + background: rgba(220,255,220,0.15); + color: #070; +} + +.tunnelStatusReject { + background: rgba(255,110,110,0.1); + color: #070; +} + +.tunnelStatusRejectHidden { + background: rgba(220,220,220,0.4); + color: #777; +} + +.tunnelBuildStatus::before, .tunnelStatusAccept::before, .tunnelStatusReject::before, .tunnelStatusRejectHidden::before { + margin-bottom: 1px; + padding-right: 1px; + vertical-align: -30%; + vertical-align: middle; + display: inline-block; + filter: drop-shadow(0 0 1px rgba(96,96,96,0.5)); +} + +.tunnelBuildStatus::before { + content: url(/themes/console/images/info/network_status/accepting.png); +} + +.tunnelStatusAccept::before { + content: url(/themes/console/images/info/network_status/accepting.png); +} + +.tunnelStatusReject::before { + content: url(/themes/console/images/info/network_status/rejecting.png); +} + +.tunnelStatusRejectHidden::before { + content: url(/themes/console/images/info/network_status/rejecting_hidden.png); +} + +/* end tunnel build status */ + +/* peers */ + +#ntcpconnections th:nth-child(6), #ntcpconnections th:nth-child(7), #ntcpconnections th:nth-child(8), #ntcpconnections th:nth-child(9), #ntcpconnections th:nth-child(10) { + text-align: right; +} + +#udpconnections th:nth-child(6), #udpconnections th:nth-child(7), #udpconnections th:nth-child(n+9) { + text-align: right; +} + +#udpconnections th:nth-child(12) { + text-align: center; +} + +.peersort { + text-align: center; + display: inline-block; +} + +.right { + text-align: right; + margin: 0 1px; + display: inline-block; + width: 40% +} + +.left { + text-align: left; + margin: 0 1px; + display: inline-block; + width: 40% +} + +.peeripv6:empty { + padding: 0; + width: 0; +} + +.cwnd .left, .cwnd .right { + width: auto; +} + +#udpconnections td:nth-child(n+13), #udpconnections .tablefooter td:nth-child(n+10) { + padding-right: 1%; +} + +/* end peers */ + +/* /tunnels */ + +tt a { + letter-spacing: 0.07em; +} + +.tunnel_cap { + background: rgba(0,0,64,0.3); + color: #fff; + border: 1px solid rgba(0,0,64,0.2); + border-radius: 2px; + min-width: 12px; + padding: 0 2px; + display:inline-block; + margin: 1px 2px 1px 6px; + text-align: center !important; + text-shadow: 0 1px 1px #555; +} + +.tunnel_cap:empty { + border: none; +} + +.tunnel_id { + display: inline-block; + min-width: 74px; + text-align: right; +} + +.tunnel_id:empty { + margin-right: -3px; + min-width: 0; +} + +.tunnel_peer { + display: inline-block; + min-width: 56px; + text-align: right; +} + +.tunnel_peer:empty { + vertical-align: top; +} + +.tunnel_peer:empty::before { + // TODO: Find a way of indicating that these entries represent the local router + content: ""; + display: inline-block; + height: 12px; + width: 18px; + //background: rgba(192,192,192,0.35); + margin-right: 6px; + border-radius: 1px; + text-align: center; + font-size: 7pt; + font-weight: bold; + line-height: 12px; + padding: 1px 2px; +} + +@media screen and (max-width: 1100px) { +.tunnel_id, .tunnel_peer { + min-width: 0 !important; + text-align: center !important; +} + +.tunnel_peer:empty { + vertical-align: middle; +} + +.tunnel_peer:empty::before { + margin: 1px 6px 1px 2px; +} + +@media screen and (min-width: 1500px) { +.tunnel_cap { + margin-left: 10px; + padding: 0 1px; + min-width: 10px; +} + +.tunnel_id:empty { + margin-right: -10px; +} +} + +/* end tunnels */ diff --git a/installer/resources/themes/console/light/console_ar.css b/installer/resources/themes/console/light/console_ar.css index 289cce2873..4ebf69e7ed 100644 --- a/installer/resources/themes/console/light/console_ar.css +++ b/installer/resources/themes/console/light/console_ar.css @@ -223,8 +223,9 @@ p#helptranslate { } .confignav { - margin-left: -19px !important; - margin-right: -19px !important; + margin-left: -21px !important; + margin-right: -21px !important; + margin-top: -5px !important; direction: ltr; } @@ -257,28 +258,41 @@ div[lang="ar"] p, div[lang="ar"] ul { font-size: 11pt; } -div[lang="ar"] li.tidylist { +div[lang="ar"] .links li { list-style: none; - margin-bottom: 15px; + margin-bottom: 15px; } -ul.links li:first-child { +div[lang="ar"] ul li { + list-style-image: url("images/link.png") !important; + list-style-position: outside; + margin-left: 0 !important; + padding-left: 0 !important; + margin-top: 15px !important; + margin-right: 50px !important; +} + +div[lang="ar"] ul, div[lang="ar"] p { + margin: 10px; +} + +.links li:first-child { margin-top: 15px !important; } -.main#help ul.links li:first-child { +.main#help .links li:first-child { margin-top: -10px !important; } -.main#help ul.links li { +.main#help .links li { margin-right: 70px !important; } -.main#help .tidylist { +.main#help .links li { margin: 5px 50px 5px 20px; } -.tidylist code { +.links li code { text-align: right; } @@ -821,6 +835,18 @@ table#bugreports td.infohelp { padding: 15px 50px 15px 15px !important; } +.routersummary h4, .routersummary h4 span, .routersummary h4 span a { + font-size: 11pt !important; +} + +.routersummary td:first-child, .routersummary td:nth-last-child(n+2), .routersummary td a { + font-size: 10.5pt !important; +} + +.routersummary h4 span::before { + padding: 0 0 0 5px; +} + @media screen and (min-width: 1500px) { .main, .news, h1 { margin-right: 232px !important; diff --git a/installer/resources/themes/console/light/console_big.css b/installer/resources/themes/console/light/console_big.css index fa877c50b4..3a94d1143b 100644 --- a/installer/resources/themes/console/light/console_big.css +++ b/installer/resources/themes/console/light/console_big.css @@ -24,8 +24,7 @@ b { button, input[type="submit"], input[type="reset"] { font-size: 10.5pt !important; - font-family: "Droid Sans", Verdana, "Bitstream Vera Sans", Tahoma, Helvetica, sans-serif; - padding: 5px 5px 5px 20px !important; + padding: 5px 5px 5px 22px !important; } button.control { @@ -58,8 +57,8 @@ div.routersummary h3 a { div.routersummary h4, div.routersummary h4 a { font-size: 10.5pt !important; -/* letter-spacing: 0.1em;*/ } + div.routersummary b { font-size: 9.5pt; font-weight: normal !important; @@ -71,12 +70,6 @@ div.routersummary a { line-height: 130%; } -/* -b { - color: #152 !important; -} -*/ - div.news { font-size: 9pt; } @@ -89,10 +82,6 @@ input, input:visited, button { font-size: 8.5pt } -table { - font: 10pt/130% "Droid Sans", Verdana, "Bitstream Vera Sans", Tahoma, Helvetica, sans-serif; -} - th { font-size: 10pt; } @@ -132,10 +121,6 @@ code, tt, div { font-weight: normal; } -.tab2 { - color: #222; -} - #config_service p.infohelp, #config_clients p.infohelp, #config_clients p.infowarn, #config_clients p#pluginconfig, #config_tunnels p.infohelp, p#enablefullstats { margin-top: 12px; @@ -148,3 +133,11 @@ p#enablefullstats { #jardump td, #jardump td tt { font-size: 8.5pt !important; } + + +@media screen and (min-width: 1500px) { +.langbox { + line-height: 115% !important; +} +} + diff --git a/installer/resources/themes/console/midnight/console.css b/installer/resources/themes/console/midnight/console.css index 56a612366f..0954e3578d 100644 --- a/installer/resources/themes/console/midnight/console.css +++ b/installer/resources/themes/console/midnight/console.css @@ -54,6 +54,12 @@ div.clearer { color: white; } +.routersummary img[src$="i2plogo.png"], .routersummary h3, .confignav, *::before, *::after { + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; +} + /* standard buttons and inputs */ button, input[type="submit"], input[type="reset"], select { @@ -1247,8 +1253,6 @@ div.logo hr { text-decoration: none !important; color: #2a1fbe; line-height: 120%; - text-shadow: 0 0 1px #000; - box-shadow: inset 0 0 0 1px #005; } @media screen and (-webkit-min-device-pixel-ratio:0) { @@ -2255,6 +2259,8 @@ a:active { .links li { list-style-image: url(images/link.png) !important; + text-align: justify! important; + line-height: 150%; } .links b { @@ -2400,6 +2406,8 @@ h2, h3, h4, .confignav { margin: 0 0 10px 0; } +/* welcome */ + .langbox { margin: 5px 4px 2px 5px; padding: 0; @@ -2422,6 +2430,50 @@ h2, h3, h4, .confignav { transform: scale(1.1); } +.twocol { + columns: 2 400px; + column-gap: 0 !important; + display: block; + margin: 5px 0; +} + +div[lang="de"] .twocol, div[lang="pt"] .twocol, div[lang="es"] .twocol, div[lang="sv"] .twocol { + background: rgba(0,0,48,0.3); + border: 1px solid #002; + border-radius: 2px; + box-shadow: inset 0 0 0 1px #000; + padding: 10px 10px 0; + margin: 10px -5px 5px !important; +} + +p + .twocol, div[lang="de"] p + .twocol { + margin: 10px 25px !important; +} + +.twocol li { + break-inside: avoid; + page-break-inside: avoid; + -webkit-break-inside: avoid; +} + +.twocol li:first-child { + margin-top: 0 !important; +} + +.main#console p { + margin: 5px 20px 10px; +} + +div[lang="de"] ul.links { + margin: 0 30px -10px 20px; +} + +div[lang] li { + line-height: 160% !important; +} + +/* end welcome */ + hr { color: #443da0; background: #443da0; @@ -3791,7 +3843,7 @@ table#tunnelconfig td:first-child { /* /configupdate */ table#i2pupdates { - margin-top: 11px; + margin-top: -1px; margin-bottom: -3px !important; } @@ -3872,10 +3924,10 @@ table#sidebarconf { #sidebarconf button { margin: 2px; - padding: 4px 3px; + padding: 4px 3px !important; min-width: 0; background: #000; - background: linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%); + background: linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important; } #sidebarconf button:active { @@ -4395,7 +4447,8 @@ a[name="criticallogs"] + p + h3 + p + ul { /* tidy router logs ul */ #enviro:hover td { background: #001; - border: #001; + border-top: 1px inset transparent; + border-bottom: 1px inset transparent; color: #dd0; } @@ -4405,9 +4458,10 @@ a[name="criticallogs"] + p + h3 + p + ul { /* tidy router logs ul */ } #enviro td:first-child { - width: 100px; + width: 1%; text-align: right; padding-right: 0; + white-space: nowrap; } #criticallogs td , #routerlogs td, #eventlogs td, #wrapperlogs td { @@ -6225,8 +6279,7 @@ div.routersummary img[src$="i2plogo.png"] { width: 216px !important; } -#sb_general td::after, #sb_shortgeneral td::after, #sb_bandwidth td::after, -#sb_peers td::after, #sb_tunnels td::after, #sb_queue td::after { +#sb_general td::after, #sb_shortgeneral td::after, #sb_bandwidth td::after, #sb_peers td::after, #sb_tunnels td::after, #sb_queue td::after { min-height: 18px; } @@ -6273,6 +6326,10 @@ img.app, img.app2p { margin-top: -5px; } +h3#themeheading, h3#langheading, h3#passwordheading { + font-size: 12pt !important; +} + h3#i2pclientconfig, h3#pconfig, h3#pluginfromurl, h3#pluginfromfile, #clientconf.infohelp, h3#pluginmanage, h3#webappconfig { margin-bottom: -15px !important; } @@ -6297,7 +6354,6 @@ h4#updateplugins { min-height: 30px; } - div.joblog h3 { margin-top: 8px !important; } @@ -6312,7 +6368,8 @@ div.joblog h3 { } .langbox { - margin-top: 5px; + margin-top: 6px; + line-height: 16px; } button.control, button.control:hover, button.control:focus { @@ -6345,6 +6402,49 @@ button.control, button.control:hover, button.control:focus { table#reseedconfig input[type="text"], table#reseedconfig input[type="password"] { width: 250px; } + +.themechoice, .langselect { + width: 134px !important; +} + +.ui_lang { + width: 138px; +} + +.themechoice .optbox, .langselect .optbox { + min-width: 138px !important; + outline: 1px dotted #f00; + opacity: 0; +} + +.themechoice .optbox { + margin-left: -42px !important; +} + +.langselect .optbox { + margin: -7px 0 -34px -2px; + min-height: 64px; +} + +.langselect img { + margin-left: -78px !important; +} + +.langselect input[name="lang"]:checked + img { + margin-left: -79px !important; +} +} + +@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1500px) { +.langselect img, .langselect input[name="lang"]:checked + img { + margin-left: -10px !important; + margin-top: -16px !important; +} + +.langselect input[name="lang"]:checked + img { + margin-left: -11px !important; + margin-top: -18px !important; +} } @media screen and (min-width: 1840px) { @@ -6467,3 +6567,98 @@ _:-ms-lang(x), table + .statusnotes { } /* end IE/Edge tweaks */ + +/* network status */ + +.routersummary h4 a { + width: auto !important; + vertical-align: middle; + display: inline; +} + +.routersummary .error, .routersummary .warn, .routersummary .testing, .routersummary .hidden, +.routersummary .running, .routersummary .firewalled, .routersummary .vmcomm, .routersummary .clockskew { + display: inline-block; + vertical-align: middle; + border: 1px solid #342f7f; + border-radius: 2px; + padding: 6px 3px; + width: 100%; + margin: -3px -1px; + box-shadow: inset 0 0 0 1px #000; + text-shadow: 0 1px 1px #000; + box-sizing: border-box; +} + +.routersummary .firewalled { + border: 1px dotted #342f7f; +} + +.routersummary .error { + border: 1px dotted #700; +} + +.routersummary .warn, .routersummary .clockskew { + border: 1px solid #550; +} + +.routersummary .testing { + border: 1px dotted #4F4B1D; +} + +.routersummary .hidden, .routersummary .vmcomm { + border: 1px dotted #777; +} + +.routersummary .running { + border: 1px solid #342f7f; + border: 1px solid rgba(52, 47, 127, 0.6); +} + +.routersummary .error::before, .routersummary .warn::before, .routersummary .testing::before, .routersummary .hidden::before, +.routersummary .running::before, .routersummary .firewalled::before, .routersummary .vmcomm::before, .routersummary .clockskew::before { + padding: 0 2px; + vertical-align: middle; + display: inline-block; + filter: drop-shadow(0 0 1px rgba(220,220,220,0.7)); +} + +.routersummary .error::before, .routersummary .clockskew::before { + content: url(/themes/console/images/info/network_status/network_error.png); +} + +.routersummary .warn::before { + content: url(/themes/console/images/info/network_status/network_warning.png); +} + +.routersummary .testing::before { + content: url(/themes/console/images/info/network_status/network_testing.png); +} + +.routersummary .hidden::before { + content: url(/themes/console/images/info/network_status/network_hidden.png); + padding: 0 3px; +} + +.routersummary .running::before { + content: url(/themes/console/images/info/network_status/network_ok.png); +} + +.routersummary .firewalled::before { + content: url(/themes/console/images/info/network_status/network_firewalled.png); +} + +.routersummary .vmcomm::before { + content: url(/themes/console/images/info/network_status/network_vm.png); +} + +.routersummary .clockskew::before { + content: url(/themes/console/images/info/network_status/network_clockskew.png); +} + +/* end network status */ + +#sb_services, #sb_internals, #sb_advanced { + margin-top: -2px !important; +} + diff --git a/installer/resources/themes/console/midnight/console_ar.css b/installer/resources/themes/console/midnight/console_ar.css index 23d40530fd..e6dcc38f77 100644 --- a/installer/resources/themes/console/midnight/console_ar.css +++ b/installer/resources/themes/console/midnight/console_ar.css @@ -388,10 +388,11 @@ table#bugreports td.infohelp { div[lang="ar"] ul li { list-style-image: url("images/link.png") !important; - list-style-position: inside; + list-style-position: outside; margin-left: 0 !important; padding-left: 0 !important; - margin-top: 15px !important;] + margin-top: 15px !important; + margin-right: 50px !important; } div[lang="ar"] ul, div[lang="ar"] p { diff --git a/installer/resources/themes/imagegen/imagegen.css b/installer/resources/themes/imagegen/imagegen.css index 8bdbc018b8..6dbf1bb817 100644 --- a/installer/resources/themes/imagegen/imagegen.css +++ b/installer/resources/themes/imagegen/imagegen.css @@ -3,6 +3,8 @@ body { background: #eef url(/themes/console/classic/images/bg0.png); + background: linear-gradient(to bottom, rgba(255,255,255,0.4), rgba(255,255,255,0.2)), url(/themes/console/classic/images/bg0.png); + background-size: 100% 100%, 120px 120px; font: 10pt/130% "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "DejaVu Sans", "Segoe UI", Verdana, "Lucida Grande", Helvetica, sans-serif; margin: 18px 20px 10px; color: #333; @@ -33,12 +35,11 @@ h1, h2 { background: linear-gradient(to bottom, #fff 50%, #eef 50%); color: #0c153d; margin-bottom: 10px; - box-shadow: inset 0 0 0 1px #fff; + box-shadow: inset 0 0 0 1px #fff, 0 0 1px #aaa; text-shadow: 1px 1px 1px #fff; text-transform: uppercase; letter-spacing: 0.08em; word-spacing: 0.1em; - filter: drop-shadow(0 0 1px #aaa); } p { @@ -78,7 +79,7 @@ img { border-radius: 2px; padding: 1px; background: #fff; - filter: drop-shadow(0 0 1px #aaa); + box-shadow: inset 0 0 0 1px #fff, 0 0 1px #aaa; } table { @@ -92,9 +93,9 @@ th { border: 1px solid #77789f; border-radius: 2px; text-align: center; - filter: drop-shadow(0 0 1px #aaa); font-weight: normal; height: 16px; + box-shadow: inset 0 0 0 1px #fff, 0 0 1px #aaa; } th.title { @@ -103,7 +104,6 @@ th.title { white-space: nowrap; padding: 5px; background: linear-gradient(to right, #efefff, #fff 10%, #fff 90%, #efefff); - box-shadow: inset 0 0 0 1px #fff; } td { @@ -113,9 +113,10 @@ td { } hr { - height: 1px; + height: 2px; background: #7778bf; border: none; + border-bottom: 1px solid #fff; margin-top: 10px; } @@ -129,7 +130,7 @@ iframe { } iframe pre { - font-size: 20pt !important;; + font-size: 20pt !important; } #qr, #randomart, #identicon { @@ -164,9 +165,8 @@ form > * { width: 400px; background: #fff; background: linear-gradient(to right, #efefff, #fff 10%, #fff 90%, #efefff); - box-shadow: inset 0 0 0 1px #fff; + box-shadow: inset 0 0 0 1px #fff, 0 0 1px #aaa; border-radius: 0 0 2px 2px; - filter: drop-shadow(0 1px 1px #999); text-rendering: optimizeLegibility; } @@ -176,7 +176,7 @@ input, button, select { } button, select { - filter: drop-shadow(0 0 1px #fff); + box-shadow: inset 0 0 0 1px #fff, 0 0 1px #aaa; } button::-moz-focus-inner { diff --git a/installer/resources/themes/snark/classic/snark.css b/installer/resources/themes/snark/classic/snark.css index adb1e16e3a..0c5a90680a 100644 --- a/installer/resources/themes/snark/classic/snark.css +++ b/installer/resources/themes/snark/classic/snark.css @@ -5,6 +5,7 @@ body { font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", Verdana, "Bitstream Vera Sans", "DejaVu Sans", "Lucida Grande", Helvetica, sans-serif; color: #0c153d; background: #eef url(/themes/console/classic/images/bg0.png) repeat scroll center bottom; + background-size: 120px 120px; } /* preload top navigation mouseovers */ @@ -16,7 +17,7 @@ body { url(images/button_tracker_active.png) no-repeat, url(images/button_forum_hover.png) no-repeat, url(images/button_forum_active.png) no-repeat, #eef; - background-size: 150px 150px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important; + background-size: 120px 120px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important; } body.iframed { @@ -94,8 +95,9 @@ body.iframed { position: static; } -.snarkRefresh:link, .snarkRefresh:visited { +.snarkNav:link, .snarkNav:visited { display: inline-block; + color: #444688; font-size: 9pt; font-weight: bold; margin: -1px 0 !important; @@ -103,70 +105,69 @@ body.iframed { text-decoration: none !important; letter-spacing: .1em; text-transform: uppercase !important; - color: #444688; border: 1px solid #ccf; border-right: 1px solid #aaf; 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 0 1px #fff, 0 0 0 1px rgba(200,200,200,0.3); + box-shadow: inset 0 0 0 1px #fff, 0 0 1px rgba(200,200,200,0.5); } -.snarkRefresh:link:last-child { +.snarkNav:link:last-child { margin-left: 3px; } -.snarkRefresh:link:first-child { +.nav_main:link { background: url(images/button_snark.png) 7px center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%); } -.snarkRefresh:link:nth-child(2) { +.nav_forum:link { background: url(images/button_forum.png) 7px center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%); } -.snarkRefresh:hover, .snarkRefresh:focus { - color: #f50; - border: 1px solid #f50; - border-radius: 0; - background: #fff !important; - background: url(images/button_tracker_hover.png) 7px center no-repeat #eee !important; - background: url(images/button_tracker_hover.png) 7px center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important; - box-shadow: inset 0 0 0 1px #fff; +.nav_tracker:link { + background: url(images/button_tracker.png) 7px center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%); } -.snarkRefresh:first-child:hover, .snarkRefresh:first-child:focus { +.snarkNav:hover, .snarkNav:focus { + color: #f50; + border: 1px solid #f50; +} + +.nav_main:hover, .nav_main:focus { background: url(images/button_snark_hover.png) 7px center no-repeat #eee !important; background: url(images/button_snark_hover.png) 7px center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important; } -.snarkRefresh:nth-child(2):hover, .snarkRefresh:nth-child(2):focus { +.nav_forum:hover, .nav_forum:focus { background: url(images/button_forum_hover.png) 7px center no-repeat #eee !important; background: url(images/button_forum_hover.png) 7px center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important; } -.snarkRefresh:active { +.nav_tracker:hover, .nav_tracker:focus { + background: url(images/button_tracker_hover.png) 7px center no-repeat #eee !important; + background: url(images/button_tracker_hover.png) 7px center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important; +} + +.snarkNav:active { text-decoration: none !important; color: #fff !important; border: 1px solid #aaa; - background: url(images/button_tracker_active.png) 7px center no-repeat #f50 !important; text-shadow: none; box-shadow: inset 0 0 0 1px #fff, inset 4px 4px 3px #824b1b !important; } -.snarkRefresh:active:first-child { - text-decoration: none !important; - color: #fff !important; - border: 1px solid #aaa; +.nav_main:active { background: url(images/button_snark_active.png) 7px center no-repeat #f50 !important; - text-shadow: none; } -.snarkRefresh:active:nth-child(2) { - border: 1px solid #aaa; +.nav_forum:active { background: url(images/button_forum_active.png) 7px center no-repeat #f50 !important; } -.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:nth-child(n+1):hover, .snarkRefresh:focus, .snarkRefresh:nth-child(n+1):focus, .snarkRefresh:active, .snarkRefresh:nth-child(n+1):active { +.nav_tracker:active { + background: url(images/button_tracker_active.png) 7px center no-repeat #f50 !important; +} + +.snarkNav:link, .snarkNav:hover, .snarkNav:focus { background-size: 16px 16px, 100% 100% !important; } @@ -1354,6 +1355,10 @@ input[name="savepri"] { margin-right: -2px !important; } +#configs input[type="submit"], .trackerconfig input[type="submit"], input[name="savepri"] { + text-transform: capitalize; +} + input[type="text"], textarea { cursor: text !important; } @@ -1719,8 +1724,13 @@ div.configsectionpanel td:first-child { } .knownTracker input[type="radio"] { - opacity: 0.6; - cursor: not-allowed; + opacity: 0.3; + cursor: default; + filter: none; +} + +.knownTracker input[type="radio"]:checked, .knownTracker input[type="radio"]:checked:hover { + opacity: 0.5; } .snarkTorrentNoneLoaded td { @@ -2411,7 +2421,7 @@ td#bwHelp a { } .snarkCommentInfo td:last-child, .snarkComments td:last-child { - width: 1% !important; +/* width: 1% !important;*/ } .snarkComments td { @@ -2461,6 +2471,10 @@ td#bwHelp a { padding-right: 0; } +.commentText:empty + .commentDelete { + background: none; +} + .commentAction input[type="submit"] { margin-top: 3px; margin-bottom: 3px; @@ -2576,11 +2590,11 @@ body { margin-top: -5px !important; } -.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:nth-child(n+1):hover, .snarkRefresh:focus, .snarkRefresh:nth-child(n+1):focus .snarkRefresh:active, .snarkRefresh:nth-child(n+1):active { +.snarkNav:link, .snarkNav:hover, .snarkNav:focus { background-size: 14px 14px, 100% 100% !important; } -.snarkRefresh:link:first-child { +.nav_main { padding-left: 22px !important; } @@ -2647,11 +2661,11 @@ body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_ font-size: 9pt !important; } -.snarkRefresh { +.snarkNav { font-size: 11pt !important; } -.snarkRefresh:link { +.snarkNav:link { padding-left: 25px !important; } diff --git a/installer/resources/themes/snark/dark/snark.css b/installer/resources/themes/snark/dark/snark.css index 364342d0e3..5537ce98c6 100644 --- a/installer/resources/themes/snark/dark/snark.css +++ b/installer/resources/themes/snark/dark/snark.css @@ -70,13 +70,15 @@ body.iframed { } ::selection { - background: #030 !important; - color: white; + background: rgba(0,187,0,0.99) !important; + color: #000; + text-shadow: none; } ::-moz-selection { - background: #030 !important; - color: white; + background: #0b0 !important; + color: #000; + text-shadow: none; } * { @@ -103,13 +105,17 @@ body.iframed { position: static; } -.snarkRefresh:link, .snarkRefresh:visited { - padding: 5px 7px 5px 22px !important; +.snarkNav:link, .snarkNav:visited { + display: inline-block; + font-size: 9pt; + font-weight: bold; + text-decoration: none !important; + text-transform: uppercase !important; + letter-spacing: 0.1em; margin: 0 -1px !important; + padding: 5px 7px 5px 22px !important; color: #3f3; text-shadow: 0 0 1px #000; - background: url(images/button_tracker.png) 7px center no-repeat, url(/themes/console/dark/images/header.png) center center repeat; - background: url(images/button_tracker.png) 7px center no-repeat, linear-gradient(to bottom, #171 0%, #131 50%, #000 51%, #000 100%) !important; border-radius: 0; border: 1px solid #494; box-shadow: inset 0 0 0 1px #000; @@ -117,95 +123,93 @@ body.iframed { opacity: 0.7; } -.snarkRefresh:link:last-child { +.snarkNav:link, .snarkNav:hover, .snarkNav:focus { + background-size: 14px auto, 100% 100% !important; + background-position: 7px center !important; + background-repeat: no-repeat, repeat !important; +} + +.snarkNav:link:last-child { margin-left: 3px; } -.snarkRefresh:link:first-child { - border-radius: 2px 0 0 2px; +.nav_main:link { + border-radius: 2px 0 0 2px !important; padding-left: 24px !important; background: url(images/button_snark.png) 7px center no-repeat, url(/themes/console/dark/images/header.png) center center repeat; - background: url(images/button_snark.png) 7px center no-repeat, linear-gradient(to bottom, #171 0%, #131 50%, #000 51%, #000 100%) !important; + background: url(images/button_snark.png) 7px center no-repeat, linear-gradient(to bottom, #171 0%, #131 50%, #000 51%, #000 100%); } -.snarkRefresh:link:nth-child(2) { +.nav_forum:link { background: url(images/button_forum.png) 7px center no-repeat, url(/themes/console/dark/images/header.png) center center repeat; - background: url(images/button_forum.png) 7px center no-repeat, linear-gradient(to bottom, #171 0%, #131 50%, #000 51%, #000 100%) !important; + background: url(images/button_forum.png) 7px center no-repeat, linear-gradient(to bottom, #171 0%, #131 50%, #000 51%, #000 100%); } -.snarkRefresh:hover:first-child, .snarkRefresh:focus:first-child { - background-image: url(images/button_snark_hover.png), url(../ubergine/images/snarknav_on.png) !important; - background-image: url(images/button_snark_hover.png), linear-gradient(to bottom, #510 0%, #530 50%, #000 51%, #000 100%) !important; +.nav_tracker:link { + background: url(images/button_tracker.png) 7px center no-repeat, url(/themes/console/dark/images/header.png) center center repeat; + background: url(images/button_tracker.png) 7px center no-repeat, linear-gradient(to bottom, #171 0%, #131 50%, #000 51%, #000 100%); } -.snarkRefresh:hover:nth-child(2), .snarkRefresh:focus:nth-child(2) { - background-image: url(images/button_forum_hover.png), url(../ubergine/images/snarknav_on.png) !important; - background-image: url(images/button_forum_hover.png), linear-gradient(to bottom, #510 0%, #530 50%, #000 51%, #000 100%) !important; -} - -.snarkRefresh:active, .snarkRefresh:active:first-child { - background: #f50 url(images/button_snark_active.png) !important; - box-shadow: inset 3px 2px 3px #000 !important; - color: #fff !important; - border: 1px solid #fff; - box-shadow: none; - text-shadow: none; -} - -.snarkRefresh:active:nth-child(2) { - background: #f50 url(images/button_forum_active.png) !important; -} - -.snarkRefresh:hover, .snarkRefresh:focus { +.snarkNav:hover, .snarkNav:focus { color: #f50; - background: #000 !important; border-radius: 0; box-shadow: inset 0 0 0 1px #000 !important; border: 1px solid #f60 !important; opacity: 1; - background-image: url(images/button_tracker_hover.png), url(../ubergine/images/snarknav_on.png) !important; - background-image: url(images/button_tracker_hover.png), linear-gradient(to bottom, #510 0%, #530 50%, #000 51%, #000 100%) !important; } -.snarkRefresh:active { - background: #f50 url(images/button_tracker_active.png) !important; - color: #fff; - border: 1px solid #fff; +.nav_main:hover, .nav_main:focus { + background-image: url(images/button_snark_hover.png), url(../ubergine/images/snarknav_on.png); + background-image: url(images/button_snark_hover.png), linear-gradient(to bottom, #510 0%, #530 50%, #000 51%, #000 100%); +} + +.nav_forum:hover, .nav_forum:focus { + background-image: url(images/button_forum_hover.png), url(../ubergine/images/snarknav_on.png); + background-image: url(images/button_forum_hover.png), linear-gradient(to bottom, #510 0%, #530 50%, #000 51%, #000 100%); +} + +.nav_tracker:hover, .nav_tracker:focus { + background-image: url(images/button_tracker_hover.png), url(../ubergine/images/snarknav_on.png); + background-image: url(images/button_tracker_hover.png), linear-gradient(to bottom, #510 0%, #530 50%, #000 51%, #000 100%); +} + +.snarkNav:link:active, .snarkNav:active { box-shadow: inset 3px 3px 3px #000 !important; - box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px #000 !important; + color: #fff !important; + border: 1px solid #fff !important; text-shadow: none; + background-size: 14px auto !important; + background-repeat: no-repeat !important; } -.snarkRefresh:link:last-of-type { +.nav_main:active { + background: url(images/button_snark_active.png) 7px center no-repeat #f50 !important; +} + +.nav_forum:active { + background: url(images/button_forum_active.png) 7px center no-repeat #f50 !important; +} + +.nav_tracker:active { + background: url(images/button_tracker_active.png) 7px center no-repeat #f50 !important; +} + +.snarkNav:link:last-of-type { border-radius: 2px !important; } -.snarkRefresh:link[target="_blank"]:last-child { +.snarkNav:link[target="_blank"]:last-child { border-radius: 0 2px 2px 0 !important; } -.snarkRefresh:last-child { +.snarkNav:last-child { border-radius: 0 2px 2px 0 !important; } -.iframed .snarkRefresh:last-child[href="/i2psnark/"] { +.iframed .snarkNav:last-child[href="/i2psnark/"] { margin-top: 0 !important; } -.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:focus, .snarkRefresh:active, .snarkRefresh:visited, -.snarkRefresh:link:first-child, .snarkRefresh:hover:first-child, .snarkRefresh:focus:first-child, .snarkRefresh:active:first-child, .snarkRefresh:visited:first-child, -.snarkRefresh:link:nth-child(2), .snarkRefresh:hover:nth-child(2), .snarkRefresh:focus:nth-child(2), .snarkRefresh:active:nth-child(2), .snarkRefresh:visited:nth-child(2) { - letter-spacing: 0.1em; - font-weight: bold; - font-size: 9pt; - text-decoration: none !important; - text-transform: uppercase !important; - background-size: 14px auto, 100% 100% !important; - background-position: 7px center !important; - background-repeat: no-repeat, repeat !important; - display: inline-block; -} - /* end topnav */ /* screenlog */ @@ -839,6 +843,12 @@ td:first-child { 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 { opacity: 1; } @@ -1230,6 +1240,10 @@ input.disabled, a.controld { cursor: not-allowed !important; } +#configs input[type="submit"], .trackerconfig input[type="submit"], input[name="savepri"] { + text-transform: capitalize; +} + #setPriority input.disabled, #setPriority a.controld { display: none; } @@ -1333,7 +1347,7 @@ thead a:active img { transform: scale(0.9); } -input[type=text], input.r, textarea[name="i2cpOpts"], input[name="nofilter_dataDir"] { +input[type=text], input.r, textarea[name="i2cpOpts"], input[name="nofilter_dataDir"], textarea[name="nofilter_newComment"] { color: #bb7; padding: 4px 5px !important; background: #000; @@ -1346,7 +1360,7 @@ input[type=text]:hover, input.r:hover { cursor: text; } -input[type=text]:focus, textarea:focus, input.r:focus, textarea[name="i2cpOpts"]:focus, input[name="nofilter_dataDir"]:focus { +input[type=text]:focus, textarea:focus, input.r:focus, textarea[name="i2cpOpts"]:focus, input[name="nofilter_dataDir"]:focus, textarea[name="nofilter_newComment"]:focus { background: #000; color: #ee9; filter: drop-shadow(0 0 1px #880); @@ -2215,11 +2229,15 @@ td#bwHelp { } .knownTracker input[type="radio"], .knownTracker input[type="radio"]:hover, .knownTracker input[type="radio"]:focus { - opacity: 0.5; - cursor: not-allowed; + opacity: 0.3; + cursor: default; filter: invert(100%) sepia(100%) hue-rotate(70deg) saturate(200%) !important; } +.knownTracker input[type="radio"]:checked, .knownTracker input[type="radio"]:checked:hover { + opacity: 0.5; +} + .snarkDirInfo tr:first-child th img:first-child { margin-right: 5px; } @@ -2509,7 +2527,7 @@ input[type="checkbox"][disabled]:checked, input[type="radio"][disabled]:checked, } .snarkCommentInfo td:last-child, .snarkComments td:last-child { - width: 1% !important; +/* width: 1% !important;*/ } .snarkComments td { @@ -2527,6 +2545,10 @@ input[type="checkbox"][disabled]:checked, input[type="radio"][disabled]:checked, width: 90%; } +.commentText:empty + .commentDelete { + background: none; +} + .commentWrapper { border: 1px solid #030; margin: 2px 0; @@ -2720,18 +2742,16 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, code, textarea, input, input[ty } @media screen and (min-width: 1200px) { -.snarkRefresh:link { +.snarkNav:link { font-size: 11pt !important; } -.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:focus, .snarkRefresh:active, .snarkRefresh:visited, -.snarkRefresh:link:first-child, .snarkRefresh:hover:first-child, .snarkRefresh:focus:first-child, .snarkRefresh:active:first-child, .snarkRefresh:visited:first-child, -.snarkRefresh:link:nth-child(2), .snarkRefresh:hover:nth-child(2), .snarkRefresh:focus:nth-child(2), .snarkRefresh:active:nth-child(2), .snarkRefresh:visited:nth-child(2) { +.snarkNav:link, .snarkNav:hover, .snarkNav:focus, .snarkNav:link:active { background-size: 16px auto, 100% 100% !important; padding-left: 24px !important; } -.snarkRefresh:link:first-child { +.snarkNav:first-child { padding-left: 25px !important; } @@ -2783,6 +2803,14 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, code, textarea, input, input[ty padding-top: 4px; } +label.toggleview { + padding-bottom: 5px; +} + +.snarkConfigTitle a { + margin-bottom: 1px !important; +} + tt, .snarkTorrents tt, .snarkMessages, .snarkMessages a { font-size: 9pt !important; } diff --git a/installer/resources/themes/snark/light/snark.css b/installer/resources/themes/snark/light/snark.css index 284caebd29..fb2e030f05 100644 --- a/installer/resources/themes/snark/light/snark.css +++ b/installer/resources/themes/snark/light/snark.css @@ -106,7 +106,7 @@ button::-moz-focus-inner, input::-moz-focus-inner { position: static; } -.snarkRefresh:link,.snarkRefresh:visited { +.snarkNav:link, .snarkNav:visited { text-decoration: none !important; text-transform: uppercase !important; padding: 4px 10px 4px 24px !important; @@ -115,8 +115,6 @@ button::-moz-focus-inner, input::-moz-focus-inner { font-weight: bold; font-size: 9pt; color: #559; - background: #fff url(images/button_tracker.png) 8px center no-repeat; - background: url(images/button_tracker.png) 8px center no-repeat, linear-gradient(to bottom, #fff 50%, #eef 51%, #eef 100%); border-radius: 0; border: 1px solid #7778bf; box-shadow: inset 0 0 0 1px #fff; @@ -125,64 +123,71 @@ button::-moz-focus-inner, input::-moz-focus-inner { filter: drop-shadow(0 0 1px #ccc); } -.snarkRefresh:hover, .snarkRefresh:focus { - color: #f60; - background: #eef url(images/button_tracker_hover.png) 8px center no-repeat; - background: url(images/button_tracker_hover.png) 8px center no-repeat, linear-gradient(to bottom, #fcfaf7 50%, #ffe8bf 50%, #efd9b3 100%); - border-radius: 0; - box-shadow: inset 0 0 0 1px #fff; +.snarkNav:link, .snarkNav:hover, .snarkNav:focus, .snarkNav:active { + background-size: 14px auto, 100% 100% !important; + background-position: 8px center; } -.snarkRefresh:active { - background: #f60 url(images/button_tracker_active.png) 8px center no-repeat; - color: #fff !important; - box-shadow: inset 3px 3px 3px #333; - box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px #333; -} - -.snarkRefresh:last-child { +.snarkNav:last-child { border-radius: 0 2px 2px 0; } -.snarkRefresh:first-child { - border-radius: 2px 0 0 2px; - background: #fff url(images/button_snark.png) 10px center no-repeat; - background: url(images/button_snark.png) 10px center no-repeat, linear-gradient(to bottom, #fff 50%, #eef 51%, #eef 100%); +.snarkNav[href="/i2psnark/"]:last-of-type { + border-radius: 2px !important; } -.snarkRefresh:first-child:hover, .snarkRefresh:first-child:focus { - background: #eef url(images/button_snark_hover.png) 10px center no-repeat; - background: url(images/button_snark_hover.png) 10px center no-repeat, linear-gradient(to bottom, #fcfaf7 50%, #ffe8bf 50%, #efd9b3 100%); - color: #f60; +.nav_main { + border-radius: 2px 0 0 2px !important; + background: #fff url(images/button_snark.png) 8px center no-repeat; + background: url(images/button_snark.png) 8px center no-repeat, linear-gradient(to bottom, #fff 50%, #eef 51%, #eef 100%); } -.snarkRefresh:first-child:active { - background: #f60 url(images/button_snark_active.png) 10px center no-repeat; -} - -.snarkRefresh:nth-child(2) { +.nav_forum { background: #fff url(images/button_forum.png) 8px center no-repeat; background: url(images/button_forum.png) 8px center no-repeat, linear-gradient(to bottom, #fff 50%, #eef 51%, #eef 100%); } -.snarkRefresh:nth-child(2):hover, .snarkRefresh:nth-child(2):focus { +.nav_tracker { + background: #fff url(images/button_tracker.png) 8px center no-repeat; + background: url(images/button_tracker.png) 8px center no-repeat, linear-gradient(to bottom, #fff 50%, #eef 51%, #eef 100%); +} + +.snarkNav:hover, .snarkNav:focus { + color: #f60; + border: 1px solid #f60; +} + +.nav_main:hover, .nav_main:focus { + background: #eef url(images/button_snark_hover.png) 8px center no-repeat; + background: url(images/button_snark_hover.png) 8px center no-repeat, linear-gradient(to bottom, #fcfaf7 50%, #ffe8bf 50%, #efd9b3 100%); +} + +.nav_forum:hover, .nav_forum:focus { background: #eef url(images/button_forum_hover.png) 8px center no-repeat; background: url(images/button_forum_hover.png) 8px center no-repeat, linear-gradient(to bottom, #fcfaf7 50%, #ffe8bf 50%, #efd9b3 100%); } -.snarkRefresh:nth-child(2):active { +.nav_tracker:hover, .nav_tracker:focus { + background: #eef url(images/button_tracker_hover.png) 8px center no-repeat; + background: url(images/button_tracker_hover.png) 8px center no-repeat, linear-gradient(to bottom, #fcfaf7 50%, #ffe8bf 50%, #efd9b3 100%); +} + +.snarkNav:active { + color: #fff !important; + box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px #333 !important; + border: 1px solid #7778bf; +} + +.nav_main:active { + background: #f60 url(images/button_snark_active.png) 8px center no-repeat; +} + +.nav_forum:active { background: #f60 url(images/button_forum_active.png) 8px center no-repeat; - color: #fff; } -.snarkRefresh:last-child[href="/i2psnark/"] { - border-radius: 2px; -} - -.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:focus, .snarkRefresh:active, .snarkRefresh:visited, -.snarkRefresh:link:first-child, .snarkRefresh:hover:first-child, .snarkRefresh:focus:first-child, .snarkRefresh:active:first-child, .snarkRefresh:visited:first-child, -.snarkRefresh:link:nth-child(2), .snarkRefresh:hover:nth-child(2), .snarkRefresh:focus:nth-child(2), .snarkRefresh:active:nth-child(2), .snarkRefresh:visited:nth-child(2) { - background-size: 14px auto, 100% 100% !important; +.nav_tracker:active { + background: #f60 url(images/button_tracker_active.png) 8px center no-repeat; } /* end top nav */ @@ -192,7 +197,6 @@ button::-moz-focus-inner, input::-moz-focus-inner { .snarkMessages { font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace; font-size: 8pt; - font-weight: bold; text-align: left; margin: -2px 0 0; padding: 3px 5px 3px 5px; @@ -211,7 +215,7 @@ button::-moz-focus-inner, input::-moz-focus-inner { } .snarkMessages a:link, .snarkMessages a:visited { - color: #505 !important; + color: #3b77bf !important; font-size: 8pt; } @@ -1031,6 +1035,10 @@ input[name="savepri"] { float: right; } +#configs input[type="submit"], .trackerconfig input[type="submit"], input[name="savepri"] { + text-transform: capitalize; +} + input { font-size: 9pt; font-weight: bold; @@ -1190,6 +1198,14 @@ input[type="checkbox"][disabled]:focus, input[type="radio"][disabled]:focus { box-shadow: none; } +.knownTracker input[type="radio"], .knownTracker input[type="radio"]:hover, .knownTracker input[type="radio"]:focus { + opacity: 0.3 !important; +} + +.knownTracker input[type="radio"]:checked, .knownTracker input[type="radio"]:checked:hover { + opacity: 0.5 !important; +} + label { cursor: pointer; } @@ -1624,12 +1640,16 @@ input#toggle_debug:checked + label + #dhtDebugInner { hr.debug { width: 100%; margin: 3px 0; + height: 2px; + border-bottom: 1px solid #fff; } hr.debug:first-of-type { background: transparent; margin-top: -5px; margin-bottom: -5px; + height: 1px; + border: none; } hr.debug:nth-child(n+7) { @@ -1919,7 +1939,7 @@ hr.debug:last-child { } .snarkCommentInfo td:last-child, .snarkComments td:last-child { - width: 1% !important; +/* width: 1% !important;*/ } .snarkComments td { @@ -1937,6 +1957,10 @@ hr.debug:last-child { width: 90%; } +.commentText:empty + .commentDelete { + background: none; +} + .commentWrapper { border: 1px solid #bbf; margin: 2px 0; @@ -2116,7 +2140,7 @@ body, td, .snarkMessages li, .snarkMessages a, button, input, select, .snarkAddI font-size: 8pt !important; } -.snarkRefresh:link { +.snarkNav:link, .snarkNav:visited { font-size: 9pt !important; } @@ -2150,7 +2174,7 @@ th.snarkTorrentStatus { } .percentBarOuter, .percentBarText { - line-height: 11px !important; + line-height: 12px !important; height: 12px !important; } @@ -2170,7 +2194,7 @@ b.alwaysShow { display: none; } -a.snarkRefresh:first-child { +.nav_main { padding-left: 26px !important; } @@ -2190,14 +2214,10 @@ a.snarkRefresh:first-child { } @media screen and (min-width: 1200px) { -a.snarkRefresh { +.snarkNav:link, .snarkNav:visited { font-size: 10pt !important; } -a.snarkRefresh:first-child { - padding-left: 26px !important; -} - .percentDownloaded { pointer-events: none; /* hide tooltip */ } @@ -2230,21 +2250,19 @@ body, td, button, input, select, .snarkAddInfo, code, tt, th, a, a:link, textare line-height: 130%; } -a.snarkRefresh { +.snarkNav:link, .snarkNav:visited { font-size: 11pt !important; } -a.snarkRefresh:first-child { - padding-left: 28px !important; +.nav_main:link, .nav_main:visited, .nav_main:hover, .nav_main:focus, .nav_main:active { + padding-left: 26px !important; } -.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:focus, .snarkRefresh:active, .snarkRefresh:visited, -.snarkRefresh:link:first-child, .snarkRefresh:hover:first-child, .snarkRefresh:focus:first-child, .snarkRefresh:active:first-child, .snarkRefresh:visited:first-child, -.snarkRefresh:link:nth-child(2), .snarkRefresh:hover:nth-child(2), .snarkRefresh:focus:nth-child(2), .snarkRefresh:active:nth-child(2), .snarkRefresh:visited:nth-child(2) { +.snarkNav:link, .snarkNav:hover, .snarkNav:focus { background-size: 16px auto, 100% 100% !important; } -.configsectionpanel .snarkConfigTitle:hover, .snark { +.configsectionpanel .snarkConfigTitle:hover { font-size: 12pt !important; padding: 3px 15px !important; } diff --git a/installer/resources/themes/snark/midnight/snark.css b/installer/resources/themes/snark/midnight/snark.css index 84d441df39..c9b470f727 100644 --- a/installer/resources/themes/snark/midnight/snark.css +++ b/installer/resources/themes/snark/midnight/snark.css @@ -100,16 +100,7 @@ body.iframed { position: static; } -.snarkRefresh:link:first-child { - padding-left: 28px !important; - border-radius: 2px 0 0 2px; -} - -.snarkRefresh:link:last-child { - margin-left: 3px; -} - -.snarkRefresh:link, .snarkRefresh:visited { +.snarkNav:link, .snarkNav:visited { font-size: 9pt; font-weight: bold; margin: 0 -1px 0 0 !important; @@ -127,40 +118,49 @@ body.iframed { text-shadow: 0 0 1px #000; } -.snarkRefresh:link:first-child { +.snarkNav:link:first-child { + padding-left: 26px !important; + border-radius: 2px 0 0 2px; +} + +.snarkNav:link:last-child { + margin-left: 3px; +} + +.nav_main:link { background: #001 url(images/button_snark.png) 9px center no-repeat; background: url(images/button_snark.png) 9px center no-repeat, linear-gradient(to bottom, #181d4f 0%, #181d4f 50%, #001 50%, #001 100%); } -.snarkRefresh:link:nth-child(2) { +.nav_forum:link { background: #001 url(images/button_forum.png) 9px center no-repeat; background: url(images/button_forum.png) 9px center no-repeat, linear-gradient(to bottom, #181d4f 0%, #181d4f 50%, #001 50%, #001 100%); } -.snarkRefresh:first-child:hover, .snarkRefresh:first-child:focus { +.nav_main:link:hover, .nav_main:link:focus { background: #04091f url(images/button_snark_hover.png) 9px center no-repeat; background: url(images/button_snark_hover.png) 9px center no-repeat, linear-gradient(to bottom, #060e2f 0%, #060e2f 50%, #000 50%, #000 100%); } -.snarkRefresh:hover:nth-child(2), .snarkRefresh:focus:nth-child(2) { +.nav_forum:link:hover, .nav_forum:link:focus { background: #04091f url(images/button_forum_hover.png) 9px center no-repeat; background: url(images/button_forum_hover.png) 9px center no-repeat, linear-gradient(to bottom, #004, #004 50%, #002 50%); } -.snarkRefresh:first-child:active { +.nav_main:link:active { background: #652787 url(images/button_snark_active.png) !important; background-repeat: no-repeat !important; background-position: 9px center !important; } -.snarkRefresh:active:nth-child(2) { +.nav_forum:link:active { background: #652787 url(images/button_forum_active.png) !important; background-repeat: no-repeat !important; background-position: 9px center !important; box-shadow: inset 3px 3px 2px #1f002f; } -.snarkRefresh:hover, .snarkRefresh:focus { +.snarkNav:hover, .snarkNav:focus { text-decoration: none !important; border-radius: 0; background: #141c3f url(images/button_tracker_hover.png) 9px center no-repeat; @@ -171,7 +171,7 @@ body.iframed { border-color: #652787; } -.snarkRefresh:active { +.snarkNav:active { text-decoration: none !important; color: #fff; border: 1px solid #fff; @@ -182,25 +182,24 @@ body.iframed { text-shadow: none; } -.snarkRefresh:link:last-of-type { +.snarkNav:link:last-of-type { border-radius: 2px !important; } -.snarkRefresh:link[target="_blank"]:last-child { +.snarkNav:link[target="_blank"]:last-child { border-radius: 0 2px 2px 0 !important; } -.snarkRefresh:last-child { +.snarkNav:last-child { margin-top: -5px !important; border-radius: 0 2px 2px 0 !important; } -.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:focus { +.snarkNav:link, .snarkNav:hover, .snarkNav:focus { background-size: 16px 16px, 100% 100% !important; } -.snarkRefresh:active, .snarkRefresh:hover:active, .snarkRefresh:first-child:active, .snarkRefresh:first-child:hover:active, -.snarkRefresh:nth-child(2):active, .snarkRefresh:nth-child(2):hover:active { +.snarkNav:active, .snarkNav:link:active { background-size: 16px 16px !important; } @@ -645,7 +644,6 @@ td.snarkTorrentAction input[type="image"] { } .snarkTorrentAction input[type="image"]:hover, .snarkTorrentAction input[type="image"]:focus { -/* borders on hover only for torrent control buttons, otherwise drop-shadow */ border: 1px solid #652787 !important; } @@ -930,11 +928,11 @@ tr:hover .percentBarText { } .snarkTorrentOdd, .snarkTorrentOdd td, .SnarkTorrentEven, .SnarkTorrentEven td { - border-top: 1px inset #12111f !important; + border-top: 1px inset #113 !important; } _:-ms-lang(x), .snarkTorrentOdd, .snarkTorrentOdd td, .SnarkTorrentEven, .SnarkTorrentEven td { - border-top: 1px solid #12111f !important; + border-top: 1px solid #113 !important; } .snarkTorrentOdd { @@ -1111,25 +1109,25 @@ _:-ms-lang(x), .snarkTorrentOdd, .snarkTorrentOdd td, .SnarkTorrentEven, .SnarkT text-align: center !important; letter-spacing: .15em; border: 1px solid #443da0; - background: #191729; - background: linear-gradient(to bottom, #191729 0%, #201f33 7%, #1f1e32 9%, #161525 21%, #090812 49%, #05050e 50%, #020206 51%, #010103 53%, #000 56%, #000 100%) !important; + background: #003; + background: linear-gradient(to bottom, #191729, #1f1e32 50%, #000 50%); box-shadow: inset 0 0 0 1px #000; text-shadow: 0 0 1px #000; } -.snarkConfigtitle:hover, label.toggleview:hover { +.snarkConfigTitle:hover, label.toggleview:hover { background: #002 !important; - background: linear-gradient(to bottom, #004, #004 50%, #002 50%) !important; + background: linear-gradient(to bottom, #004 50%, #002 50%) !important; } -.snarkConfigtitle:active, label.toggleview:active { +.snarkConfigTitle:active, label.toggleview:active { background: #003 !important; - background: linear-gradient(to bottom, #004, #004 50%, #002 50%) !important; + background: linear-gradient(to bottom, #004 50%, #002 50%) !important; box-shadow: inset 3px 3px 3px #000; } -.configsectionpanel .snarkConfigtitle:hover, .configsectionpanel .snarkConfigtitle:active { - background: linear-gradient(to bottom, #191729 0%, #201f33 7%, #1f1e32 9%, #161525 21%, #090812 49%, #05050e 50%, #020206 51%, #010103 53%, #000 56%, #000 100%) !important; +.configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active { + background: linear-gradient(to bottom, #05050e 50%, #000 50%) !important; box-shadow: inset 0 0 0 1px #000 !important; } @@ -1178,7 +1176,7 @@ _:-ms-lang(x), .snarkTorrentOdd, .snarkTorrentOdd td, .SnarkTorrentEven, .SnarkT .snarkConfigTitle a:active img, .toggleview:active img { transform: rotate(90deg); - transition: ease transform 0.3s 0s; + transition: ease transform 0.3s; } .snarkConfigTitle img, label.toggleview img { @@ -1301,6 +1299,10 @@ a.control img, a.controld img { padding: 0; } +#configs input[type="submit"], .trackerconfig input[type="submit"], input[name="savepri"] { + text-transform: capitalize; +} + input[type="submit"]:hover, input[type="submit"]:focus, input[type="reset"]:hover, input[type="reset"]:focus, a.control:hover, a.control:focus { color: #652787 !important; border: 1px solid #652787 !important; @@ -1377,7 +1379,7 @@ input[type=text]:focus, textarea:focus, input.r:focus, textarea[name="i2cpOpts"] background: #000; box-shadow: 0 0 0 1px rgba(101, 39, 135, 0.5); filter: drop-shadow(0px 0 1px #99f); - transition: ease all 0.3s 0s; + transition: ease all 0.3s; } textarea[name="i2cpOpts"], input[name="nofilter_dataDir"] { @@ -1943,8 +1945,8 @@ input.trackerannounce { } /* toggle create/add panel view */ + input.toggle_input { - /* hide checkbox and use label as faux panel heading */ display: none; } @@ -2280,11 +2282,15 @@ td#bwHelp a { } .knownTracker input[type="radio"], .knownTracker input[type="radio"]:hover { - opacity: 0.5; - cursor: not-allowed; + opacity: 0.3; + cursor: default; filter: invert(100%) sepia(100%) hue-rotate(200deg) saturate(200%) !important; } +.knownTracker input[type="radio"]:checked, .knownTracker input[type="radio"]:checked:hover { + opacity: 0.5; +} + #filecheck { display: inline-block; margin: 5px 0; @@ -2402,7 +2408,7 @@ td#bwHelp a { } .snarkCommentInfo td:last-child, .snarkComments td:last-child { - width: 1% !important; +/* width: 1% !important;*/ } .snarkComments td { @@ -2420,6 +2426,10 @@ td#bwHelp a { width: 90%; } +.commentText:empty + .commentDelete { + background: none; +} + .commentWrapper { border: 1px solid #003; margin: 2px 0; @@ -2541,6 +2551,10 @@ b.alwaysShow { min-width: 600px !important; } +.snarkNav:link:first-child { + padding-left: 26px !important; +} + .snarkTorrentName { max-width: 260px; } @@ -2615,16 +2629,15 @@ input.trackerhome, input.trackerannounce, .knownTracker a, #trackerselect a { display: none; } -.snarkRefresh:link, .snarkRefresh:link:first-child { +.snarkNav:link { padding-left: 24px !important; } -.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:focus { +.snarkNav:link, .snarkNav:hover, .snarkNav:focus { background-size: 14px 14px, 100% 100% !important; } -.snarkRefresh:active, .snarkRefresh:hover:active, .snarkRefresh:first-child:active, .snarkRefresh:first-child:hover:active, -.snarkRefresh:nth-child(2):active, .snarkRefresh:nth-child(2):hover:active { +.snarkNav:active, .snarkNav:link:active { background-size: 14px 14px !important; } @@ -2698,11 +2711,11 @@ a, th, thead th, tfoot th, td, select, select option, .snarkAddInfo, .snarkFileN font-size: 9pt !important; } -.snarkRefresh { +.snarkNav { font-size: 10.5pt !important; } -.snarkConfigTitle, .snarkConfigTitle a, label.toggleview, .snarkRefresh:link { +.snarkConfigTitle, .snarkConfigTitle a, label.toggleview, .snarkNav:link { font-size: 11pt !important; } @@ -2728,6 +2741,10 @@ a, th, thead th, tfoot th, td, select, select option, .snarkAddInfo, .snarkFileN font-size: 9pt !important; } +.snarkNav:link:first-child { + padding-left: 28px !important; +} + .snarkConfigTitle, .toggleview { padding: 4px 25px 4px 22px; } @@ -2736,6 +2753,11 @@ a, th, thead th, tfoot th, td, select, select option, .snarkAddInfo, .snarkFileN font-size: 12.5pt !important; } +.snarkConfigTitle a { + margin-top: -1px !important; + margin-bottom: 1px !important; +} + .toggleview { padding-bottom: 5px !important; } diff --git a/installer/resources/themes/snark/ubergine/snark.css b/installer/resources/themes/snark/ubergine/snark.css index ffbb793a0b..20ecc0caa3 100644 --- a/installer/resources/themes/snark/ubergine/snark.css +++ b/installer/resources/themes/snark/ubergine/snark.css @@ -8,7 +8,6 @@ html { body { background: #130313 url(images/graytile.png) scroll left top / 96px 96px; - background: linear-gradient(to bottom, rgba(64,0,64,0.2), rgba(11,0,11,0.1), rgba(11,0,11,0.2)), url(images/graytile.png) #130313 !important; background-size: 100% 100%, 96px 96px; color: #fff; font: 8pt "DejaVu Sans", Verdana, "Noto Sans", Ubuntu, Helvetica, sans-serif; @@ -17,14 +16,15 @@ body { /* preload top navigation mouseovers */ body:not(old) { - background: linear-gradient(to bottom, rgba(64,0,64,0.2), rgba(11,0,11,0.1), rgba(11,0,11,0.2)), url(images/graytile.png), + background: linear-gradient(to bottom, rgba(64,0,64,0.2), rgba(11,0,11,0.1), rgba(11,0,11,0.2)), + repeating-linear-gradient(135deg, rgba(32,0,32,0.5) 2px, rgba(16, 0, 16, 0.3) 3px, rgba(32,0,32,0.5) 5px), url(images/button_snark_hover.png) top center no-repeat, url(images/button_snark_active.png) top center no-repeat, url(images/button_tracker_hover.png) top center no-repeat, url(images/button_tracker_active.png) top center no-repeat, url(images/button_forum_hover.png) top center no-repeat, url(images/button_forum_active.png) no-repeat #130313 !important; - background-size: 100% 100%, 96px 96px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important; + background-size: 100% 100%, 100% 100%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important; } body.iframed { @@ -53,10 +53,9 @@ body.iframed:not(old) { border: 1px solid #101; font-size: 8pt !important; line-height: 160% !important; - box-shadow: inset 0 0 3px 0 #101; text-align: center; opacity: 1; - filter: drop-shadow(0 0 1px #000); + box-shadow: inset 0 0 3px 0 #101, 0 0 2px 3px rgba(0,0,0,0.4); } .iframed .page { @@ -69,12 +68,12 @@ body.iframed:not(old) { } ::selection { - background: #404 !important; + background: rgba(96,0,96,0.8) !important; color: white; } ::-moz-selection { - background: #404 !important; + background: rgba(96,0,96,0.8) !important; color: white; } @@ -120,7 +119,7 @@ _:-ms-lang(x), .snarknavbar { position: static; } -.snarkRefresh:link,.snarkRefresh:visited { +.snarkNav:link, .snarkNav:visited { text-decoration: none !important; text-transform: uppercase !important; text-shadow: 0 0 1px #000; @@ -142,20 +141,20 @@ _:-ms-lang(x), .snarknavbar { } /* Arabic fix */ -.snarkRefresh { +.snarkNav { display: inline-block; margin: -5px -4px -5px 0; } -_:-ms-lang(x), .snarkRefresh:link, .snarkRefresh:visited { +_:-ms-lang(x), .snarkNav:link, .snarkNav:visited { padding-top: 1px !important; } -.iframed .snarkRefresh:first-child, .iframed .snarkRefresh:last-child { +.iframed .snarkNav:first-child, .iframed .snarkNav:last-child { border-radius: 0 !important; } -.snarkRefresh:hover, .snarkRefresh:visited:hover, .snarkRefresh:focus, .snarkRefresh:visited:focus { +.snarkNav:hover, .snarkNav:visited:hover, .snarkNav:focus, .snarkNav:visited:focus { color: #d2baff !important; background: #707 url(images/button_tracker_hover.png) 11px center no-repeat; background: url(images/button_tracker_hover.png) 11px center no-repeat, linear-gradient(to bottom, #a15b73 0%, #7e4062 50%, #591c3e 51%, #46133e 100%); @@ -164,15 +163,15 @@ _:-ms-lang(x), .snarkRefresh:link, .snarkRefresh:visited { transition: ease border 0.3s 0.1s; } -.snarkRefresh:hover + .snarkRefresh:nth-last-child(1n-2), .snarkRefresh:focus + .snarkRefresh:nth-last-child(1n-2) { +.snarkNav:hover + .snarkNav:nth-last-child(1n-2), .snarkNav:focus + .snarkNav:nth-last-child(1n-2) { border-left: 1px solid #820b64; } -.snarkRefresh:active + .snarkRefresh:nth-last-child(1n-2) { +.snarkNav:active + .snarkNav:nth-last-child(1n-2) { border-left: 1px solid #730; } -.snarkRefresh:active, .snarkRefresh:visited:active { +.snarkNav:active, .snarkNav:visited:active { background: #f60 url(images/button_tracker_active.png) 11px center no-repeat; background-size: 16px auto, 100% 100%; color: #fff !important; @@ -181,62 +180,61 @@ _:-ms-lang(x), .snarkRefresh:link, .snarkRefresh:visited { box-shadow: 0 0 1px 0 #000, inset 0 0 0 1px #000, inset 3px 3px 3px 1px #3F1900 !important; } -.snarkRefresh:link:first-child, .snarkRefresh:last-child[href="/i2psnark/"] { +.snarkNav:link:first-child, .snarkNav:last-child[href="/i2psnark/"] { background: #310 url(images/button_snark.png) 11px center no-repeat; background: url(images/button_snark.png) 11px center no-repeat, linear-gradient(to bottom, #a68058 1%, #7a6045 27%, #5e4730 50%, #2e1700 51%, #1f0f00 100%); background-size: 18px auto, 100% 100%; padding-left: 28px !important; } -.snarkRefresh:last-child[href="/i2psnark/"] { +.snarkNav:last-child[href="/i2psnark/"] { border-radius: 2px; margin: -5px 0 !important; display: inline-block; } /* MS Edge fix */ -_:-ms-lang(x), .snarkRefresh:last-child[href="/i2psnark/"] { +_:-ms-lang(x), .snarkNav:last-child[href="/i2psnark/"] { margin: -3px 0 !important; } -.snarkRefresh:hover:first-child, .snarkRefresh:hover:last-child[href="/i2psnark/"], -.snarkRefresh:focus:first-child, .snarkRefresh:focus:last-child[href="/i2psnark/"] { +.nav_main:link:hover, .nav_main:link:focus { background: #707 url(images/button_snark_hover.png) 11px center no-repeat; background: url(images/button_snark_hover.png) 11px center no-repeat, linear-gradient(to bottom, #a15b73 0%, #7e4062 50%, #591c3e 51%, #46133e 100%); background-size: 18px auto, 100% 100%; color: #d2baff !important; } -.snarkRefresh:active:first-child, .snarkRefresh:active:last-child[href="/i2psnark/"] { +.nav_main:link:active { background: #f60 url(images/button_snark_active.png) 11px center no-repeat; background-size: 18px auto, 100% 100%; color: #fff !important; } -.snarkRefresh:link:nth-child(2) { +.nav_forum:link { background: #310 url(images/button_forum.png) 11px center no-repeat; background: url(images/button_forum.png) 11px center no-repeat, linear-gradient(to bottom, #a68058 1%, #7a6045 27%, #5e4730 50%, #2e1700 51%, #1f0f00 100%); background-size: 16px auto, 100% 100%; } -.snarkRefresh:hover:nth-child(2), .snarkRefresh:focus:nth-child(2) { +.nav_forum:link:hover, .nav_forum:link:focus { background: #707 url(images/button_forum_hover.png) 11px center no-repeat; background: url(images/button_forum_hover.png) 11px center no-repeat, linear-gradient(to bottom, #a15b73 0%, #7e4062 50%, #591c3e 51%, #46133e 100%); background-size: 16px auto, 100% 100%; color: #d2baff !important; } -.snarkRefresh:active:nth-child(2) { +.nav_forum:link:active { background: #f60 url(images/button_forum_active.png) 11px center no-repeat; background-size: 16px auto, 100% 100%; color: #fff !important; } -.snarkRefresh:last-child { +.snarkNav:last-child { border-radius: 0 2px 2px 0; } -.snarkRefresh:first-child { +.snarkNav:first-child { border-radius: 2px 0 0 2px; } @@ -252,8 +250,8 @@ _:-ms-lang(x), .snarkRefresh:last-child[href="/i2psnark/"] { border-spacing: 0; border-radius: 4px; border: 1px solid #101; - overflow: auto; - color: #2C6AEF; + overflow: hidden; + color: #2c6aef; height: 50px; width: auto; width: calc(100% - 12px); @@ -265,6 +263,10 @@ _:-ms-lang(x), .snarkRefresh:last-child[href="/i2psnark/"] { filter: drop-shadow(0 0 1px rgba(16, 8, 16, 0.5)); } +.snarkMessages:hover, .snarkMessages:focus { + overflow: auto !important; +} + .iframed .snarkMessages { margin-top: 1px; } @@ -351,7 +353,6 @@ table { border-collapse: collapse; color: #323; width: 100%; - transform: rotateZ(360deg); } thead, tfoot { @@ -467,6 +468,8 @@ tfoot tr:nth-child(n+1) { .snarkTorrents thead th { padding: 2px; background-clip: padding-box; + border-bottom: 1px solid #313; + border-bottom: 1px solid rgba(51, 17, 51, 0.8); } .snarkTorrents thead th:nth-child(-n+3) { @@ -583,6 +586,8 @@ th.snarkTorrentAction input[type="image"]:hover, .snarkTorrentAction input[type= color: #ddd !important; font-weight: bold; vertical-align: middle; + border-top: 1px solid #313; + border-bottom: 1px solid rgba(51, 17, 51, 0.8); } .snarkTorrents tfoot th:nth-child(even) { @@ -711,6 +716,7 @@ a img[src$="details.png"]:hover, a:focus img[src$="details.png"] { tr:hover .percentBarText { opacity: 1; + text-shadow: 0 1px 1px rgba(0,0,0,0.8); } /* MS Edge fix */ @@ -816,7 +822,7 @@ _:-ms-lang(x), .snarkTorrents tbody tr:hover, .snarkDirInfo tbody tr:hover { border-top: 1px solid #101; } -#torrentInfoControl, #setPriority { +#torrentInfoControl td, #setPriority th { box-shadow: inset 0 0 0 1px #303; } @@ -841,10 +847,6 @@ _:-ms-lang(x), .snarkTorrents tbody tr:hover, .snarkDirInfo tbody tr:hover { padding: 0 3px !important; } -.snarkDirInfo img, .snarkTorrents img { - filter: drop-shadow(0 0 1px #000); -} - /* MS Edge fix */ _:-ms-lang(x), .snarkDirInfo img, .snarkTorrents img { filter: none !important; @@ -968,10 +970,16 @@ _:-ms-lang(x), .snarkDirInfo img, .snarkTorrents img { display: block; color: #dd7; opacity: 0; + 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 */ @@ -1195,6 +1203,10 @@ a.control:active, input[type="submit"]:active, input[type="reset"]:active { box-shadow: inset 3px 3px 3px #fff; } +#configs input[type="submit"], .trackerconfig input[type="submit"], input[name="savepri"] { + text-transform: capitalize; +} + #setPriority { border-top: 1px solid #000; } @@ -1278,7 +1290,6 @@ input[type=image]:hover, input[type=image]:focus { } a img { - filter: drop-shadow(0 0 1px #000); outline: none; } @@ -1634,8 +1645,8 @@ img[src$="magnet.png"] { color: #ddd; border-radius: 4px; box-shadow: inset 0 0 3px 0 #101; + box-shadow: inset 0 0 2px 1px rgba(16,0,16,0.5), 0 0 1px 1px rgba(85, 17, 85, 0.6); word-wrap: break-word; - filter: drop-shadow(0 0 1px #515); } .section, .mainsection { @@ -1644,6 +1655,7 @@ img[src$="magnet.png"] { word-wrap: break-word; background: #545; background: linear-gradient(to bottom, #545 0%, #434 100%); + background-position: top -1px center; overflow: auto; } @@ -1661,7 +1673,7 @@ img[src$="magnet.png"] { .addtorrentsection { background: #545 url(images/snark_add.png) no-repeat scroll right center; - background: url(images/snark_add.png) no-repeat scroll 99% center, linear-gradient(to bottom, #545 0%, #434 100%); + background: url(images/snark_add.png) no-repeat scroll right 10px center, linear-gradient(to bottom, #545 0%, #434 100%); background-size: 61px 61px, 100% 100%; } @@ -1910,6 +1922,11 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac transition: ease transform 0.3s 0s; } +.peerinfo td { + border-bottom: 1px solid #414 !important; + border-top: 1px solid #202 !important; +} + .peerinfo td:first-child { background: url(images/peer.png) center center no-repeat; background-size: 14px 14px; @@ -1925,7 +1942,6 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac .debuginfo td:first-child { background: url(images/debuginfo.png) center center no-repeat; - background-blend-mode: luminosity; background-size: 14px 14px; } @@ -2249,11 +2265,15 @@ input#toggle_debug:checked + label + #dhtDebugInner { /* end configs */ .knownTracker input[type="radio"], .knownTracker input[type="radio"]:hover { - opacity: 0.7; - cursor: not-allowed; + opacity: 0.3; + cursor: default; filter: sepia(100%) invert(100%) hue-rotate(58deg) brightness(80%) !important; } +.knownTracker input[type="radio"]:checked, .knownTracker input[type="radio"]:checked:hover { + opacity: 0.5; +} + #filecheck { display: inline-block; margin: 5px 0; @@ -2266,7 +2286,6 @@ input#toggle_debug:checked + label + #dhtDebugInner { } /* Comments Section */ -/* TODO: merge with other rules where applicable */ #snarkCommentSection { filter: drop-shadow(0px 0 1px rgba(16, 8, 16, 0.7)); @@ -2362,18 +2381,25 @@ input#toggle_debug:checked + label + #dhtDebugInner { .snarkCommentInfo td:first-child, .snarkComments td:first-child { min-width: 160px !important; + max-width: 160px !important; width: 160px !important; padding-right: 2px; } .snarkCommentInfo td:last-child, .snarkComments td:last-child { - width: 1% !important; +/* width: 1% !important;*/ } .snarkComments td { white-space: nowrap; } +.commentAuthor { + max-width: 160px !important; + width: 160px !important; + white-space: nowrap; +} + .commentAuthorName { background: url(images/author.png) left center no-repeat; padding-left: 20px; @@ -2385,6 +2411,10 @@ input#toggle_debug:checked + label + #dhtDebugInner { width: 90%; } +.commentText:empty + .commentDelete { + background: none; +} + .commentWrapper { border: 1px solid #101; margin: 2px 0; @@ -2656,7 +2686,7 @@ b.alwaysShow { transition: ease width 0.5s 0.5s; } -.snarkRefresh:link,.snarkRefresh:visited { +.snarkNav:link, .snarkNav:visited { background-size: 15px auto, 100% 100% !important; background-position: 11px 50%, center center !important; padding: 4px 10px 4px 28px !important; @@ -2664,7 +2694,7 @@ b.alwaysShow { } .snarkTorrentName a:not(old) { - max-width: 340px; + max-width: 380px; display: inline-block; white-space: nowrap; overflow: hidden; @@ -2699,7 +2729,7 @@ b.alwaysShow { padding: 14px 10px 13px; } -_:-ms-lang(x), .snarkRefresh:link, .snarkRefresh:visited { +_:-ms-lang(x), .snarkNav:link, .snarkNav:visited { background-position: 11px 5px, center center !important; background-size: 15px auto, 100% 100% !important; } @@ -2735,11 +2765,11 @@ _:-ms-lang(x), .snarkRefresh:link, .snarkRefresh:visited { } @media screen and (min-width: 1200px) { -.snarkRefresh:link { - font-size: 11pt; +.snarkNav:link { + font-size: 10.5pt; } -.snarkRefresh:link:first-child, .snarkRefresh[href="/i2psnark/"]:last-child { +.snarkNav:link:first-child, .snarkNav[href="/i2psnark/"]:last-child { padding-left: 32px !important; } @@ -2790,11 +2820,11 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, .snarkFileStatus margin: -2px -9px 0 -5px; } -.snarkRefresh:link:first-child { +.snarkNav:link:first-child { padding-left: 32px !important; } -.snarkRefresh:link:first-child, .snarkRefresh:last-child[href="/i2psnark/"] { +.snarkNav:link:first-child, .snarkNav:last-child[href="/i2psnark/"] { background-position: 11px 45%, center center !important; } @@ -2807,8 +2837,8 @@ input[type="submit"], input[type="reset"], select, select option, button, a.cont min-width: 240px !important; } -.snarkRefresh:link { - font-size: 12pt; +.snarkNav:link { + font-size: 11pt; } .snarkConfigTitle, label.toggleview { @@ -2924,10 +2954,174 @@ select { } } +/* mini-mode */ + +@media screen and (max-width: 800px) { +.page, .snarknavbar { + min-width: 650px !important; +} + +.snarkNav:link, .snarkNav:visited { + font-size: 9pt !important; + background-size: 10pt auto, 100% 100% !important; + padding-left: 25px !important; +} + +.snarkNav:link:first-child { + padding-left: 27px !important; +} + +th.snarkTorrentStatus a img, .snarkTorrentETA a img, .snarkTrackerDetails a img, img[src$="torrent.png"] { + display: none !important; +} + +.snarkGraphicStatus { + max-width: 12px !important; + padding-left: 3px !important; +} + +.snarkGraphicStatus img { + max-width: 18px; +} + +.snarkTorrents th img { + max-height: 18px; +} + +.snarkTorrentUploaded, .snarkTorrentRateUp { + display: none; +} + +.alwaysShow { + display: none !important; +} + +.snarkTorrentDetails { + padding-left: 8px; +} + +.snarkTorrentStatus, .snarkTorrentETA, .snarkTrackerDetails { + font-size: 0; + max-width: 0 !important; + min-width: 0 !important; + width: 0 !important; + padding: 0; +} + +#totals { + margin-left: 2px !important; +} + +.toggleview, .snarkConfigTitle, .snarkConfigTitle a { + font-size: 10pt !important; +} + +.toggleview img, .snarkConfigTitle img { + height: 12px; + margin-right: 0 !important; +} + +#configs td:first-child, .configsectionpanel input[name="nofilter_dataDir"], .configsectionpanel textarea { + min-width: 150px !important; +} + +.trackerconfig a, .trackerconfig input[type="text"] { + max-width: 150px !important; +} + +.trackerconfig, form + form > .configsectionpanel, .addtorrentsection tr:last-child, .snarkTorrentInfo tr:nth-child(n+2) { + display: none; +} + +#trackerselect td a { + max-width: 200px !important; +} + +.snarkTorrentInfo { + border-bottom: none !important; + margin-bottom: -6px !important; + position: relative; + z-index: 10; +} + +.snarkTorrentInfo th { + padding-top: 4px; + padding-bottom: 4px; +} + +.snarkTorrentInfo th:nth-child(2) { + padding-left: 5px; + border-bottom: 1px solid #313 !important; +} + +.snarkDirInfo td.snarkFileStatus { + font-size: 0 !important; + text-align: center !important; +} + +.snarkDirInfo td.snarkFileStatus .percentbarText { + font-size: 7pt !important; +} + +.snarkDirInfo .snarkFileStatus img { + float: none; +} + +.snarkFileStatus img[src*="clock"] { + float: left; +} + +th a img { + max-height: 16px !important; +} + +.snarkTorrentAction input[type="image"] { + max-height: 14px !important; +} + +#configs #bwhelp { + background: none !important; + font-size: 0 !important; +} + +#configs tr:nth-child(n+16) { + display: none; +} + +#configs tr:nth-last-child(2) { + display: table-row !important; +} + +#configs tr, #configs tr:nth-last-child(2) td { + border: none !important; +} + +.addtorrentsection input[type="text"], .newtorrentsection input[type="text"] { + width: 60% !important; +} + +.snarkCommentInfo td:first-child, .snarkComments td:first-child { + width: 120px !important; + max-width: 120px !important; + min-width: 120px !important; +} + +.snarkComments .commentDate { + width: 70px; +} + +.snarkComments .commentDelete { + background: none !important; + padding-left: 0 !important; +} +} + +/* end mini-mode */ + /* hidpi devices only */ @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi) and (min-width: 1400px) { -.snarkRefresh:link:first-child, .snarkRefresh:last-child[href="/i2psnark/"] { +.snarkNav:link:first-child, .snarkNav:last-child[href="/i2psnark/"] { background-position: 11px 56%, center center !important; } } diff --git a/installer/resources/themes/snark/vanilla/snark.css b/installer/resources/themes/snark/vanilla/snark.css index 1193a706f5..c40a6be2aa 100644 --- a/installer/resources/themes/snark/vanilla/snark.css +++ b/installer/resources/themes/snark/vanilla/snark.css @@ -123,6 +123,7 @@ th a:active, th a:visited:active, td a:active, td a:visited:active { border: 1px solid #2f1b0c; border-radius: 0 0 2px 2px; box-shadow: inset 0 0 0 1px #fff5ef, 0 0 1px 0 #4f3d36; + box-shadow: inset 0 0 0 1px #fff5ef, 0 0 0 1px rgba(111, 96, 90, 0.3), 0 0 1px 1px rgba(79, 61, 54, 0.5); background: #efefef; background: linear-gradient(to bottom, #efefef 50%, #cfc7c2 52%, #cfc7c2 100%); min-width: 900px; @@ -143,7 +144,7 @@ th a:active, th a:visited:active, td a:active, td a:visited:active { position: static; } -.snarkRefresh:link, .snarkRefresh:visited { +.snarkNav:link, .snarkNav:visited { text-decoration: none !important; text-transform: uppercase !important; padding: 4px 10px 4px 28px !important; @@ -152,96 +153,108 @@ th a:active, th a:visited:active, td a:active, td a:visited:active { font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif; font-weight: bold; font-size: 10pt; - color: #3F271B; - background: #fff7ef url(images/button_snark.png) 11px center no-repeat; - background: url(images/button_snark.png) 11px center no-repeat, linear-gradient(to bottom, #fff7ef 47%, rgba(207, 193, 181, 0.6) 50%), repeating-linear-gradient(45deg, #75604e 1px, #a09286 1px, #bfafa2 2px); - background-size: 18px auto, 100% 100%, 100% 100%; + color: #3f271b; + background-size: 17px auto, 100% 100%, 100% 100% !important; border-radius: 0; border: 1px solid #efe6e0; text-shadow: 0 0 1px #fff5ef; box-shadow: inset 0 0 0 1px #efe6e0, 0 0 0 1px rgba(77, 69, 62, 0.1); border: 1px solid #2f1b0c; display: inline-block; + position: relative; + z-index: 30; } -_:-ms-lang(x), .snarkRefresh:link, .snarkRefresh:visited { +_:-ms-lang(x), .snarkNav:link, .snarkNav:visited { padding-top: 1px !important; margin-right: -5px !important; } -.snarkRefresh:hover, .snarkRefresh:focus { +.snarkNav:hover, .snarkNav:focus { text-decoration: none !important; text-shadow: none !important; color: #930 !important; - background: #ffeadf url(images/button_snark_hover.png) 11px center no-repeat; - background: url(images/button_snark_hover.png) 11px center no-repeat, linear-gradient(to bottom, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%); - background-size: 18px auto, 100% 100%, 100% 100%; box-shadow: inset 0 0 0 1px #fff5ef, 0 0 0 1px rgba(77, 69, 62, 0.1); + filter: drop-shadow(0 0 1px rgba(200,60,0,0.2)); + z-index: 10; } -.snarkRefresh:active { - background: #dfb899 url(images/button_snark_active.png) 11px center no-repeat; - background: url(images/button_snark_active.png) 11px center no-repeat, linear-gradient(to bottom, #dfb899 47%, #af9178 50%, #af9178 100%); - background-size: 18px auto, 100% 100%, 100% 100%; +.snarkNav:active { text-shadow: none !important; box-shadow: inset 0 0 0 1px #efe6e0, inset 2px 2px 3px 1px #59513b, 0 0 0 1px rgba(77, 69, 62, 0.1); + filter: none; } -.snarkRefresh:nth-child(2) { +.nav_main:link { + background: #fff7ef url(images/button_snark.png) 11px center no-repeat; + background: url(images/button_snark.png) 11px center no-repeat, linear-gradient(to bottom, #fff7ef 47%, rgba(207, 193, 181, 0.6) 50%), repeating-linear-gradient(45deg, #75604e 1px, #a09286 1px, #bfafa2 2px); + background-size: 18px auto, 100% 100%, 100% 100% !important; +} + +.nav_forum:link { background: #fff7ef url(images/button_forum.png) 12px center no-repeat; background: url(images/button_forum.png) 12px center no-repeat, linear-gradient(to bottom, #fff7ef 47%, rgba(207, 193, 181, 0.6) 50%), repeating-linear-gradient(45deg, #75604e 1px, #a09286 1px, #bfafa2 2px); - background-size: 17px auto, 100% 100%, 100% 100%; } -.snarkRefresh:nth-child(n+3) { +.nav_tracker:link { background: #fff7ef url(images/button_tracker.png) 12px center no-repeat; background: url(images/button_tracker.png) 12px center no-repeat, linear-gradient(to bottom, #fff7ef 47%, rgba(207, 193, 181, 0.6) 50%), repeating-linear-gradient(135deg, #75604e 1px, #a09286 1px, #bfafa2 2px); - background-size: 17px auto, 100% 100%, 100% 100%; } -.snarkRefresh:nth-child(2):hover, .snarkRefresh:nth-child(2):focus { +.nav_main:hover, .nav_main:focus { + background: #ffeadf url(images/button_snark_hover.png) 11px center no-repeat; + background: url(images/button_snark_hover.png) 11px center no-repeat, linear-gradient(to bottom, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%); +} + +.nav_forum:hover, .nav_forum:focus { background: #ffeadf url(images/button_forum_hover.png) 12px center no-repeat; background: url(images/button_forum_hover.png) 12px center no-repeat, linear-gradient(to bottom, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%); background-size: 17px auto, 100% 100%, 100% 100%; } -.snarkRefresh:nth-child(n+3):hover, .snarkRefresh:nth-child(n+3):focus { +.nav_tracker:hover, .nav_tracker:focus { background: #ffeadf url(images/button_tracker_hover.png) 12px center no-repeat; background: url(images/button_tracker_hover.png) 12px center no-repeat, linear-gradient(to bottom, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%); background-size: 17px auto, 100% 100%, 100% 100%; } -.snarkRefresh:nth-child(2):active { +.nav_main:active { + background: #dfb899 url(images/button_snark_active.png) 11px center no-repeat; + background: url(images/button_snark_active.png) 11px center no-repeat, linear-gradient(to bottom, #dfb899 47%, #af9178 50%, #af9178 100%); + background-size: 18px auto, 100% 100%, 100% 100%; +} + +.nav_forum:active { background: #dfb899 url(images/button_forum_active.png) 12px; background: url(images/button_forum_active.png) 12px center no-repeat, linear-gradient(to bottom, #dfb899 47%, #af9178 50%, #af9178 100%); background-size: 17px auto, 100% 100%, 100% 100%; } -.snarkRefresh:nth-child(n+3):active { +.nav_tracker:active { background: #dfb899 url(images/button_tracker_active.png) 12px center no-repeat; background: url(images/button_tracker_active.png) 12px center no-repeat, linear-gradient(to bottom, #dfb899 47%, #af9178 50%, #af9178 100%); background-size: 17px auto, 100% 100%, 100% 100%; } -.snarkRefresh:last-child { +.snarkNav:last-child { border-radius: 0 2px 2px 0; } -.snarkRefresh:first-child { +.snarkNav:first-child { border-radius: 2px 0 0 2px; padding-left: 30px !important; } -.snarkRefresh:last-child[href="/i2psnark/"] { +.snarkNav:last-child[href="/i2psnark/"] { border-radius: 2px; margin: -2px 0 -4px !important; } -.snarkRefresh:hover, .snarkRefresh:visited:hover { +.snarkNav:hover, .snarkNav:visited:hover { color: #930 !important; } -.snarkRefresh:active, .snarkRefresh:visited:active { +.snarkNav:active, .snarkNav:visited:active { color: #eee !important; } @@ -267,12 +280,14 @@ _:-ms-lang(x), .snarkRefresh:link, .snarkRefresh:visited { background-size: auto 105%, 100% 100%; } -.snarkMessages:hover { +.snarkMessages:hover, .snarkMessages:focus { overflow: auto; } .snarkMessages:focus { box-shadow: inset 0 0 6px 0 #3f2307, 0 0 1px #f60; + box-shadow: inset 0 0 6px 0 #3f2307, 0 0 1px #df0067; + filter: drop-shadow(0 0 2px rgba(200, 80, 0, 0.3)); } .snarkMessages ul { @@ -1145,6 +1160,10 @@ thead img.disable, img.disable:hover { font-weight: normal; } +#configs input[type="submit"], .trackerconfig input[type="submit"], input[name="savepri"] { + text-transform: capitalize; +} + .snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active { font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif; font-size: 11pt !important; @@ -2181,11 +2200,15 @@ td#bwHelp a { /* end configs */ .knownTracker input[type="radio"], .knownTracker input[type="radio"]:hover { - opacity: 0.5 !important; - cursor: not-allowed; + opacity: 0.3; + cursor:default; filter: sepia(50%) invert(80%) hue-rotate(150deg) !important; } +.knownTracker input[type="radio"]:checked, .knownTracker input[type="radio"]:checked:hover { + opacity: 0.5; +} + #filecheck { display: inline-block; margin: 5px 0; @@ -2371,6 +2394,10 @@ td#bwHelp a { padding-right: 0; } +.commentText:empty + .commentDelete { + background: none; +} + .commentWrapper { border: 1px solid #6f533e; margin: 4px 2px; @@ -2411,7 +2438,7 @@ td#bwHelp a { margin-bottom: 5px; } -.commentDelete { +.snarkComments .commentDelete { background: url(../ubergine/images/nuke.png) 6px center no-repeat; text-align: left; padding: 5px 6px 5px 24px !important; @@ -2464,6 +2491,22 @@ _:-ms-lang(x), input[type="radio"], input[type="checkbox"] { /* responsive layout */ @media screen and (max-width: 1000px) { +.snarkNav:link { + padding: 4px 8px 4px 24px !important; + background-size: 15px auto, 100% 100%, 100% 100% !important; + background-position: 8px center, center center, center center !important; +} + +.nav_main:link { + padding: 4px 8px 4px 23px !important; + background-position: 6px center, center center, center center !important; +} + +.nav_tracker:link { + padding: 4px 8px 4px 20px !important; + background-position: 5px center, center center, center center !important; +} + .snarkTorrents td[colspan="10"] { white-space: normal; } @@ -2511,6 +2554,22 @@ td.snarkGraphicStatus img { width: 100px !important; } +.snarkFileStatus .percentBarText { + font-size: 8pt; +} + +.percentBarOuter, .percentBarInner { + height: 14px; +} + +.percentBarText { + line-height: 15px !important; +} + +.snarkDirInfo .percentBarText { + line-height: 14px !important; +} + .snarkTorrentDownloaded .percentBarInner { background: linear-gradient(to bottom, rgba(255, 247, 239, 0.75) 0%, rgba(255, 247, 239, 0.75) 50%, rgba(207, 193, 181, 0.8) 50%, rgba(207, 193, 181, 0.9) 100%), linear-gradient(to right, rgba(255, 100, 0, 0.5) 33px, rgba(255, 255, 0, 0.5) 66px, rgba(0, 255, 0, 0.5)); } @@ -2573,19 +2632,7 @@ td.snarkGraphicStatus img { margin-bottom: 2px; } -.snarkRefresh:nth-child(n+2) { - padding: 4px 8px 4px 24px !important; - background-size: 14px auto, 100% 100%, 100% 100% !important; - background-position: 8px center, center center, center center !important; -} - -.snarkRefresh:first-child { - padding: 4px 8px 4px 26px !important; - background-size: 16px auto, 100% 100%, 100% 100% !important; - background-position: 9px center, center center, center center !important; -} - -_:-ms-lang(x), .snarkRefresh:link, .snarkRefresh:visited { +_:-ms-lang(x), .snarkNav:link, .snarkNav:visited { padding-top: 3px !important; } @@ -2623,6 +2670,10 @@ _:-ms-lang(x), .snarkRefresh:link, .snarkRefresh:visited { .snarkCommentInfo td, .snarkComments td { padding: 5px !important; } + +.snarkComments .commentDate { + padding-left: 20px !important; +} } @media screen and (max-width: 1400px) { @@ -2650,8 +2701,19 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, a.control, input font-size: 9pt !important; } -.snarkRefresh:link { - font-size: 11.5pt; +.snarkNav:link { + font-size: 11pt; + padding: 4px 8px 4px 26px !important; + background-position: 8px center, center center, center center !important; +} + +.nav_main:link { + background-position: 7px center, center center, center center !important; +} + +.nav_tracker:link { + padding-left: 23px !important; + background-position: 5px center, center center, center center !important; } .snarkTorrentOdd td, .snarkTorrentEven td { @@ -2697,6 +2759,18 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, a.control, input padding-bottom: 4px !important; } +.snarkNav:link { + padding: 4px 8px 4px 26px !important; + background-size: 16px auto, 100% 100%, 100% 100% !important !important; + background-position: 8px center, center center, center center !important; +} + +.nav_main:link { + padding: 4px 8px 4px 27px !important; + background-position: 8px center, center center, center center !important; + background-size: 18px auto, 100% 100%, 100% 100% !important; +} + .percentDownloaded { pointer-events: none; /* hide tooltip */ } @@ -2717,6 +2791,14 @@ thead a img, thead img { .mainsection .snarkCommentInfo td, .mainsection .snarkComments td { padding: 8px 5px !important; } + +.mainsection .snarkComments .commentDelete { + padding-left: 24px !important; +} + +.mainsection .snarkComments .commentDate { + padding-left: 20px !important; +} } @media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1200px) { @@ -2741,12 +2823,22 @@ tt, .snarkTorrents tt, .snarkMessages, textarea { font-size: 10pt !important; } -.snarkRefresh:link { - font-size: 13pt; +.snarkNav:link { + font-size: 12pt; + background-size: 18px auto, 100% 100%, 100% 100% !important; } -.snarkRefresh:link:first-child { - padding-left: 30px !important; +.nav_main:link, .nav_forum:link { + padding-left: 27px !important; +} + +.nav_forum:link { + background-position: 9px center, center center, center center !important; +} + +.nav_tracker:link { + padding-left: 25px !important; + background-position: 7px center, center center, center center !important; } select { @@ -2839,5 +2931,127 @@ tr#torrentInfoStats td { } } +/* mini-mode */ + +@media screen and (max-width: 800px) { +.page, .snarknavbar { + min-width: 650px !important; +} + +.snarkNav:link, .snarkNav:visited { + font-size: 9pt !important; +} + +th.snarkTorrentStatus a img, .snarkTorrentETA a img, .snarkTrackerDetails a img { + display: none !important; +} + +.snarkGraphicStatus { + max-width: 12px !important; + padding-left: 3px !important; +} + +.snarkGraphicStatus img { + max-width: 18px; +} + +.snarkTorrents th img { + max-height: 18px; +} + +.snarkTorrentUploaded, .snarkTorrentRateUp { + display: none; +} + +.snarkTorrentStatus, .snarkTorrentETA, .snarkTrackerDetails { + font-size: 0; + max-width: 0 !important; + min-width: 0 !important; + width: 0 !important; + padding: 0; +} + +#configs td:first-child { + min-width: 150px !important; +} + +.trackerconfig a, .trackerconfig input[type="text"] { + max-width: 150px !important; +} + +.trackerconfig, form + form > .configsectionpanel, .addtorrentsection tr:last-child, .snarkTorrentInfo tr:nth-child(n+2) { + display: none; +} + +#trackerselect td a { + max-width: 200px !important; +} + +.snarkTorrentInfo { + border-bottom: none !important; + margin-bottom: -11px !important; + position: relative; + z-index: 10; +} + +.snarkTorrentInfo th { + padding-top: 8px; + padding-bottom: 8px; +} + +.snarkFileStatus { + font-size: 0; + text-align: center; +} + +.snarkDirInfo .snarkFileStatus img { + float: none; +} + +.snarkFileStatus img[src*="clock"] { + float: left; +} + +#configs #bwhelp { + background: none !important; + font-size: 0 !important; +} + +#configs tr:nth-child(n+16) { + display: none; +} + +#configs tr:nth-last-child(2) { + display: table-row !important; +} + +#configs tr, #configs tr:nth-last-child(2) td { + border: none !important; +} + +.addtorrentsection input[type="text"], .newtorrentsection input[type="text"] { + width: 60% !important; +} + +.addtorrentsection td:first-child, .newtorrentsection td:first-child { + width: 100px; +} + +.snarkCommentInfo td:first-child, .snarkComments td:first-child { + width: 100px !important; +} + +.snarkComments .commentDate { + width: 70px; +} + +.snarkComments .commentDelete { + background: none !important; + padding-left: 0 !important; +} +} + +/* end mini-mode */ + /* end responsive layout */ diff --git a/installer/resources/themes/susidns/classic/susidns.css b/installer/resources/themes/susidns/classic/susidns.css index e3409183e4..5c711fb955 100644 --- a/installer/resources/themes/susidns/classic/susidns.css +++ b/installer/resources/themes/susidns/classic/susidns.css @@ -4,6 +4,8 @@ body { font: 9pt/130% "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", "Segoe UI", Verdana, Helvetica, sans-serif; background: #eef; + background: #eef url(/themes/console/classic/images/bg0.png); + background-size: 120px 120px; color: #0c153d; min-width: 700px; } @@ -311,6 +313,7 @@ p.help { margin: 0; background: #ffe url(/themes/console/images/info/infohelp.png) 8px center no-repeat; line-height: 120%; + background-size: 28px 28px; } p.book, #messages + p { diff --git a/installer/resources/themes/susidns/dark/susidns.css b/installer/resources/themes/susidns/dark/susidns.css index f5c6cecbae..69dc9d979b 100644 --- a/installer/resources/themes/susidns/dark/susidns.css +++ b/installer/resources/themes/susidns/dark/susidns.css @@ -18,13 +18,15 @@ body.iframed { } ::selection { - background: #030 !important; - color: white; + background: rgba(0,187,0,0.99) !important; + color: #000; + text-shadow: none; } ::-moz-selection { - background: #030 !important; - color: white; + background: #0b0 !important; + color: #000; + text-shadow: none; } .page { @@ -32,7 +34,6 @@ body.iframed { margin: 10px 0; padding: 0 5px; font-size: 9pt !important; -/* background: #000;*/ } .iframed .page { diff --git a/installer/resources/themes/susidns/images/how.svg b/installer/resources/themes/susidns/images/how.svg index dc3b1224df..e2aadf8a95 100644 --- a/installer/resources/themes/susidns/images/how.svg +++ b/installer/resources/themes/susidns/images/how.svg @@ -1,6 +1,6 @@ @@ -56,7 +56,8 @@ SUBSCRIPTIONS - + + Hosts sourced from your subscriptions are added to your Router address book, and are automatically synced (by default every 12 hours). @@ -65,8 +66,10 @@ - http://i2p-projekt.i2p/hosts.txt + http://i2p-projekt.i2p/hosts.txt + Configure Subscriptions + If you manually add hosts here, they will be included your Published address book (if configured). @@ -80,10 +83,12 @@ SEARCHABLE BY I2P APPLICATIONS The Master, Router and Private address books collectively serve as the DNS authority for I2P applications. - - OPTIONAL, FOR EEPSITES - If you configure SusiDNS to publish your Router address book, it will export a hosts.txt file containing all the hosts (by default to the root of your eepsite). - + + + OPTIONAL, FOR EEPSITES + If you configure SusiDNS to publish your Router address book, it will export a hosts.txt file containing all the hosts (by default to the root of your eepsite). + + Addresses manually added to your Master address book will merge with your Router address book. diff --git a/installer/resources/themes/susimail/classic/susimail.css b/installer/resources/themes/susimail/classic/susimail.css index e23a9af8cf..28b55b7f63 100644 --- a/installer/resources/themes/susimail/classic/susimail.css +++ b/installer/resources/themes/susimail/classic/susimail.css @@ -3,6 +3,7 @@ body { background: #eef url(/themes/console/classic/images/bg0.png); + background-size: 120px 120px; color: #0c153d; font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; font-size: 9pt; @@ -390,6 +391,7 @@ pre { .page { background: #eef url(/themes/console/classic/images/bg2.png); background: linear-gradient(to bottom, rgba(255,255,255,0.7),rgba(255,255,255,0.2)), url(/themes/console/classic/images/bg2.png) #eef; + background-size: 100% 100%, 120px 120px; color: #0c153d; margin: 0; padding: 0 10px 10px; @@ -933,6 +935,7 @@ div#dologin { .iframed #dologin { margin: 18px auto 15px; + padding-top: 10px; } #dologin input[type="text"] { diff --git a/installer/resources/themes/susimail/dark/susimail.css b/installer/resources/themes/susimail/dark/susimail.css index 8619dc6e3b..597cf7750b 100644 --- a/installer/resources/themes/susimail/dark/susimail.css +++ b/installer/resources/themes/susimail/dark/susimail.css @@ -18,13 +18,15 @@ body.iframed { } ::selection { - background: #030 !important; - color: white; + background: rgba(0,187,0,0.99) !important; + color: #000; + text-shadow: none; } ::-moz-selection { - background: #030 !important; - color: white; + background: #0b0 !important; + color: #000; + text-shadow: none; } * {
").append(_t("Peer")).append("").append(_t("Dir")).append("").append(_t("Dir")).append("").append(_t("IPv6")).append("").append(_t("Idle")).append("").append(_t("In/Out")).append(""); + buf.append(""); if (con.isIPv6()) buf.append("✔"); else - buf.append(" "); - buf.append(""); + buf.append(""); + buf.append(""); buf.append(DataHelper.formatDuration2(con.getTimeSinceReceive())); - buf.append(THINSP).append(DataHelper.formatDuration2(con.getTimeSinceSend())); - buf.append(""); + buf.append("").append(THINSP).append("").append(DataHelper.formatDuration2(con.getTimeSinceSend())); + buf.append(""); if (con.getTimeSinceReceive() < 2*60*1000) { float r = con.getRecvRate(); buf.append(formatRate(r / 1024)); @@ -227,7 +228,7 @@ public class PeerHelper extends HelperBase { } else { buf.append(formatRate(0)); } - buf.append(THINSP); + buf.append("").append(THINSP).append(""); if (con.getTimeSinceSend() < 2*60*1000) { float r = con.getSendRate(); buf.append(formatRate(r / 1024)); @@ -236,7 +237,7 @@ public class PeerHelper extends HelperBase { buf.append(formatRate(0)); } //buf.append(" K/s"); - buf.append("").append(DataHelper.formatDuration2(con.getUptime())); + buf.append("").append(DataHelper.formatDuration2(con.getUptime())); totalUptime += con.getUptime(); offsetTotal = offsetTotal + con.getClockSkew(); buf.append("").append(DataHelper.formatDuration2(1000 * con.getClockSkew())); @@ -266,10 +267,11 @@ public class PeerHelper extends HelperBase { // buf.append("
") .append(ngettext("{0} peer", "{0} peers", peers.size())); - buf.append("").append(formatRate(bpsRecv/1024)).append(THINSP).append(formatRate(bpsSend/1024)).append(""); - buf.append("").append(DataHelper.formatDuration2(totalUptime/peers.size())); - buf.append("").append(DataHelper.formatDuration2(offsetTotal*1000/peers.size())); - buf.append("").append(totalSend).append("").append(totalRecv); + buf.append("").append(formatRate(bpsRecv/1024)).append(""); + buf.append(THINSP).append("").append(formatRate(bpsSend/1024)).append(""); + buf.append("").append(DataHelper.formatDuration2(totalUptime/peers.size())); + buf.append("").append(DataHelper.formatDuration2(offsetTotal*1000/peers.size())); + buf.append("").append(totalSend).append("").append(totalRecv); buf.append("  
").append(_t("Dir")) - .append("").append(_t("IPv6")) - .append("").append(_t("Idle")).append("
"); + .append("		").append(_t("IPv6")) + .append("").append(_t("Idle")).append("
"); appendSortLinks(buf, urlBase, sortFlags, _t("Sort by idle inbound"), FLAG_IDLE_IN); buf.append(" / "); appendSortLinks(buf, urlBase, sortFlags, _t("Sort by idle outbound"), FLAG_IDLE_OUT); @@ -358,42 +360,42 @@ public class PeerHelper extends HelperBase { buf.append(" / "); appendSortLinks(buf, urlBase, sortFlags, _t("Sort by outbound rate"), FLAG_RATE_OUT); buf.append("		").append(_t("Up")).append("
"); + buf.append("		").append(_t("Up")).append("
"); appendSortLinks(buf, urlBase, sortFlags, _t("Sort by connection uptime"), FLAG_UPTIME); - buf.append("		").append(_t("Skew")).append("
"); + buf.append("		").append(_t("Skew")).append("
"); appendSortLinks(buf, urlBase, sortFlags, _t("Sort by clock skew"), FLAG_SKEW); - buf.append("		CWND
"); appendSortLinks(buf, urlBase, sortFlags, _t("Sort by congestion window"), FLAG_CWND); - buf.append("		SST
"); + buf.append("		SST
"); appendSortLinks(buf, urlBase, sortFlags, _t("Sort by slow start threshold"), FLAG_SSTHRESH); - buf.append("		RTT
"); + buf.append("		RTT
"); appendSortLinks(buf, urlBase, sortFlags, _t("Sort by round trip time"), FLAG_RTT); //buf.append("		").append(_t("Dev")).append("
"); //appendSortLinks(buf, urlBase, sortFlags, _t("Sort by round trip time deviation"), FLAG_DEV); - buf.append("		RTO
"); + buf.append("		RTO
"); appendSortLinks(buf, urlBase, sortFlags, _t("Sort by retransmission timeout"), FLAG_RTO); - buf.append("		MTU
"); appendSortLinks(buf, urlBase, sortFlags, _t("Sort by outbound maximum transmit unit"), FLAG_MTU); - buf.append("		").append(_t("TX")).append("
"); + buf.append("		").append(_t("TX")).append("
"); appendSortLinks(buf, urlBase, sortFlags, _t("Sort by packets sent"), FLAG_SEND); - buf.append("		").append(_t("RX")).append("
"); + buf.append("		").append(_t("RX")).append("
"); appendSortLinks(buf, urlBase, sortFlags, _t("Sort by packets received"), FLAG_RECV); - buf.append("		").append(_t("Dup TX")).append("
"); + buf.append("		").append(_t("Dup TX")).append("
"); appendSortLinks(buf, urlBase, sortFlags, _t("Sort by packets retransmitted"), FLAG_RESEND); - buf.append("		").append(_t("Dup RX")).append("
"); + buf.append("		").append(_t("Dup RX")).append("
"); appendSortLinks(buf, urlBase, sortFlags, _t("Sort by packets received more than once"), FLAG_DUP); - buf.append("
"); buf.append(_context.commSystem().renderPeerHTML(peer.getRemotePeer())); //byte ip[] = peer.getRemoteIP(); @@ -408,7 +410,7 @@ public class PeerHelper extends HelperBase { buf.append("  \"^\""); if (peer.getTheyRelayToUsAs() > 0) buf.append("  \"V\""); - + boolean appended = false; //if (_activeThrottle.isChoked(peer.getRemotePeer())) { // buf.append("
").append(_t("Choked")).append(""); @@ -435,42 +437,42 @@ public class PeerHelper extends HelperBase { // buf.append(' ').append(_context.blocklist().toStr(ip)); buf.append("		"); + buf.append(""); if (peer.isIPv6()) buf.append("✓"); else - buf.append(" "); + buf.append(""); buf.append(""); + + buf.append(""); buf.append(DataHelper.formatDuration2(idleIn)); - buf.append(THINSP); - buf.append(DataHelper.formatDuration2(idleOut)); - buf.append(""); + + buf.append(""); buf.append(formatKBps(recvBps)); - buf.append(THINSP); - buf.append(formatKBps(sendBps)); + buf.append("").append(THINSP); + buf.append("").append(formatKBps(sendBps)); //buf.append(" K/s"); //buf.append(formatKBps(peer.getReceiveACKBps())); //buf.append("K/s/"); //buf.append(formatKBps(peer.getSendACKBps())); //buf.append("K/s "); - buf.append(""); buf.append(DataHelper.formatDuration2(uptime)); buf.append(""); long skew = peer.getClockSkew(); buf.append(DataHelper.formatDuration2(skew)); @@ -478,16 +480,16 @@ public class PeerHelper extends HelperBase { offsetTotal = offsetTotal + skew; long sendWindow = peer.getSendWindowBytes(); - - buf.append(""); + + buf.append(""); buf.append(sendWindow/1024); buf.append("K"); - buf.append(THINSP).append(peer.getConcurrentSends()); - buf.append(THINSP).append(peer.getConcurrentSendWindow()); - buf.append(THINSP).append(peer.getConsecutiveSendRejections()); + buf.append("").append(THINSP).append("").append(peer.getConcurrentSends()); + buf.append("").append(THINSP).append("").append(peer.getConcurrentSendWindow()); + buf.append("").append(THINSP).append("").append(peer.getConsecutiveSendRejections()); if (peer.isBacklogged()) buf.append(' ').append(_t("backlogged")); - buf.append(""); buf.append(peer.getSlowStartThreshold()/1024); @@ -495,11 +497,11 @@ public class PeerHelper extends HelperBase { int rtt = peer.getRTT(); int rto = peer.getRTO(); - + buf.append(""); buf.append(DataHelper.formatDuration2(rtt)); buf.append(""); //buf.append(DataHelper.formatDuration2(peer.getRTTDeviation())); //buf.append(""); buf.append(DataHelper.formatDuration2(rto)); buf.append(""); - buf.append(peer.getMTU()).append(THINSP).append(peer.getReceiveMTU()); - + + buf.append(""); + buf.append(peer.getMTU()).append("").append(THINSP); + buf.append("").append(peer.getReceiveMTU()); + //.append('/'); //buf.append(peer.getMTUIncreases()).append('/'); //buf.append(peer.getMTUDecreases()); - buf.append(""); buf.append(sent); buf.append(""); buf.append(recv); buf.append(""); //buf.append(formatPct(sendLostPct)); buf.append(resent); // + "/" + peer.getPacketsPeriodRetransmitted() + "/" + sent); //buf.append(peer.getPacketRetransmissionRate()); buf.append(""); buf.append(dupRecv); //formatPct(recvDupPct)); buf.append("
") .append(ngettext("{0} peer", "{0} peers", peers.size())) .append(""); - buf.append(formatKBps(bpsIn)).append(THINSP).append(formatKBps(bpsOut)); + ""); + buf.append(formatKBps(bpsIn)).append("").append(THINSP); + buf.append("").append(formatKBps(bpsOut)); long x = uptimeMsTotal/numPeers; - buf.append("").append(DataHelper.formatDuration2(x)); + buf.append("").append(DataHelper.formatDuration2(x)); x = offsetTotal/numPeers; - buf.append("").append(DataHelper.formatDuration2(x)).append("").append(DataHelper.formatDuration2(x)).append(""); buf.append(cwinTotal/(numPeers*1024) + "K"); buf.append(" "); + ""); buf.append(DataHelper.formatDuration2(rttTotal/numPeers)); //buf.append(" "); - buf.append(""); + buf.append(""); buf.append(DataHelper.formatDuration2(rtoTotal/numPeers)); - buf.append("").append(ut.getMTU(false)).append(""); - buf.append(sendTotal).append("").append(recvTotal).append("").append(resentTotal); - buf.append("").append(dupRecvTotal).append("
").append(ut.getMTU(false)).append(""); + buf.append(sendTotal).append("").append(recvTotal).append("").append(resentTotal); + buf.append("").append(dupRecvTotal).append("
"); diff --git a/apps/routerconsole/java/src/net/i2p/router/web/SummaryBarRenderer.java b/apps/routerconsole/java/src/net/i2p/router/web/SummaryBarRenderer.java index 25b83dfa81..45a4d99580 100644 --- a/apps/routerconsole/java/src/net/i2p/router/web/SummaryBarRenderer.java +++ b/apps/routerconsole/java/src/net/i2p/router/web/SummaryBarRenderer.java @@ -681,9 +681,9 @@ class SummaryBarRenderer { public String renderTunnelStatusHTML() { if (_helper == null) return ""; StringBuilder buf = new StringBuilder(50); - buf.append("

") + buf.append("

") .append(_t(_helper.getTunnelStatus())) - .append("

\n"); + .append("\n"); return buf.toString(); } diff --git a/apps/routerconsole/java/src/net/i2p/router/web/TunnelRenderer.java b/apps/routerconsole/java/src/net/i2p/router/web/TunnelRenderer.java index 0a4fc2c5dc..6838b311e0 100644 --- a/apps/routerconsole/java/src/net/i2p/router/web/TunnelRenderer.java +++ b/apps/routerconsole/java/src/net/i2p/router/web/TunnelRenderer.java @@ -27,15 +27,15 @@ class TunnelRenderer { private RouterContext _context; private static final int DISPLAY_LIMIT = 200; - + public TunnelRenderer(RouterContext ctx) { _context = ctx; } - + public void renderStatusHTML(Writer out) throws IOException { out.write("

" + _t("Exploratory tunnels") + " [" + _t("configure") + "]

\n"); renderPool(out, _context.tunnelManager().getInboundExploratoryPool(), _context.tunnelManager().getOutboundExploratoryPool()); - + List destinations = null; Map clientInboundPools = _context.tunnelManager().getInboundClientPools(); Map clientOutboundPools = _context.tunnelManager().getOutboundClientPools(); @@ -62,7 +62,7 @@ class TunnelRenderer { out.write(" (" + _t("dead") + ")\n"); renderPool(out, in, outPool); } - + List participating = _context.tunnelDispatcher().listParticipatingTunnels(); out.write("

" + _t("Participating tunnels") + "

\n"); if (!participating.isEmpty()) { @@ -137,7 +137,7 @@ class TunnelRenderer { out.write("
" + _t("Lifetime bandwidth usage") + ":  " + DataHelper.formatSize2(processed*1024) + "B
\n"); //renderPeers(out); } - + private static class TunnelComparator implements Comparator, Serializable { public int compare(HopConfig l, HopConfig r) { return (r.getProcessedMessagesCount() - l.getProcessedMessagesCount()); @@ -152,10 +152,10 @@ class TunnelRenderer { tunnels = in.listTunnels(); if (outPool != null) tunnels.addAll(outPool.listTunnels()); - + long processedIn = (in != null ? in.getLifetimeProcessed() : 0); long processedOut = (outPool != null ? outPool.getLifetimeProcessed() : 0); - + int live = 0; int maxLength = 1; for (int i = 0; i < tunnels.size(); i++) { @@ -183,28 +183,33 @@ class TunnelRenderer { continue; // don't display tunnels in their grace period live++; if (info.isInbound()) - out.write("
\"Inbound\"
\"Inbound\"
\"Outbound\"" + DataHelper.formatDuration2(timeLeft) + "
\"Outbound\"" + DataHelper.formatDuration2(timeLeft) + "" + count + " KB" + count + " KB" + (id == null ? "" : "" + id) + "" + + (id == null ? "" : "" + id) + "" + netDbLink(peer) + (id == null ? "" : " " + id) + cap + "" + netDbLink(peer) + + " " + (id == null ? "" : " " + id) + + "" + cap + "