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 2538ef65b9..42b23098fd 100644 --- a/apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java +++ b/apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java @@ -2136,7 +2136,7 @@ public class I2PSnarkServlet extends BasicServlet { host = Base32.encode(h.getData()) + ".b32.i2p" + port; } } - buf.append(""); + buf.append(""); } // strip port int colon = announce.indexOf(':'); @@ -2290,7 +2290,7 @@ public class I2PSnarkServlet extends BasicServlet { boolean noCollapse = noCollapsePanels(req); - out.write("
\n" + + out.write("\n" + "
\n"); writeHiddenInputs(out, req, "Save"); out.write(""); @@ -2996,9 +2996,9 @@ public class I2PSnarkServlet extends BasicServlet { announce = DataHelper.stripHTML(announce); buf.append(""); toThemeImg(buf, "details"); - buf.append("").append(_t("Primary Tracker")).append(": "); + buf.append("").append(_t("Primary Tracker")).append(": "); buf.append(getShortTrackerLink(announce, snark.getInfoHash())); - buf.append(""); + buf.append(""); } List> alist = meta.getAnnounceList(); if (alist != null && !alist.isEmpty()) { @@ -3007,7 +3007,7 @@ public class I2PSnarkServlet extends BasicServlet { buf.append("") .append(_t("Tracker List")).append(": "); for (List alist2 : alist) { - buf.append('['); + buf.append(""); boolean more = false; for (String s : alist2) { if (more) @@ -3016,7 +3016,7 @@ public class I2PSnarkServlet extends BasicServlet { more = true; buf.append(getShortTrackerLink(DataHelper.stripHTML(s), snark.getInfoHash())); } - buf.append("] "); + buf.append(" "); } buf.append("\n"); } @@ -3416,14 +3416,16 @@ public class I2PSnarkServlet extends BasicServlet { path=addPaths(path,"/"); path = encodePath(path); String icon = toIcon(item); + String mime = getMimeType(path); + if (mime == null) + mime = ""; buf.append(""); if (complete) { buf.append(""); // thumbnail ? String plc = item.toString().toLowerCase(Locale.US); - if (plc.endsWith(".jpg") || plc.endsWith(".jpeg") || plc.endsWith(".png") || - plc.endsWith(".gif") || plc.endsWith(".ico")) { + if (mime.startsWith("image/")) { buf.append("\"\""); } else { @@ -3433,8 +3435,17 @@ public class I2PSnarkServlet extends BasicServlet { buf.append(toImg(icon)); } buf.append(""); - if (complete) - buf.append(""); + if (complete) { + buf.append(""); + } buf.append(DataHelper.escapeHTML(item.getName())); if (complete) buf.append(""); diff --git a/apps/routerconsole/java/src/net/i2p/router/web/GraphHelper.java b/apps/routerconsole/java/src/net/i2p/router/web/GraphHelper.java index 7b27a46ff7..9dde3f8a10 100644 --- a/apps/routerconsole/java/src/net/i2p/router/web/GraphHelper.java +++ b/apps/routerconsole/java/src/net/i2p/router/web/GraphHelper.java @@ -38,6 +38,7 @@ public class GraphHelper extends FormHandler { public static final int DEFAULT_Y = 100; private static final int DEFAULT_REFRESH = 5*60; private static final int DEFAULT_PERIODS = 60; + private static final boolean DEFAULT_LEGEND = false; static final int MAX_X = 2048; static final int MAX_Y = 1024; private static final int MIN_X = 200; @@ -55,7 +56,6 @@ public class GraphHelper extends FormHandler { _periodCount = _context.getProperty(PROP_PERIODS, DEFAULT_PERIODS); _refreshDelaySeconds = _context.getProperty(PROP_REFRESH, DEFAULT_REFRESH); _showEvents = _context.getBooleanProperty(PROP_EVENTS); - _graphHideLegend = _context.getBooleanProperty(PROP_LEGEND); } /** @@ -158,6 +158,7 @@ public class GraphHelper extends FormHandler { if (title.equals("bw.sendRate")) hasTx = true; else if (title.equals("bw.recvRate")) hasRx = true; } + boolean hideLegend = _context.getProperty(PROP_LEGEND, DEFAULT_LEGEND); if (hasTx && hasRx && !_showEvents) { _out.write("\n"); } @@ -202,7 +203,7 @@ public class GraphHelper extends FormHandler { + "&periodCount=" + _periodCount + "&width=" + _width + "&height=" + _height - + "&hideLegend=" + _graphHideLegend + + "&hideLegend=" + hideLegend + "\" alt=\"" + title + "\" title=\"" + title + "\">\n"); } @@ -252,6 +253,7 @@ public class GraphHelper extends FormHandler { if (_end > 0) _out.write(' ' + _t("ending {0} ago", DataHelper.formatDuration2(_end * period))); + boolean hideLegend = _context.getProperty(PROP_LEGEND, DEFAULT_LEGEND); _out.write(" [" + _t("Return to main graphs page") + "]\n" + "

\n"); if (_width < MAX_X && _height < MAX_Y) { @@ -372,21 +374,18 @@ public class GraphHelper extends FormHandler { try { _out.write("

" + _t("Configure Graph Display") + " [" + _t("Select Stats") + "]

"); _out.write("\n" + - "
\n" + + "
\n" + "\n"); - _out.write(_t("Display period") + ":
" + _t("minutes") + "
\n"); - _out.write(_t("Plot type") + ":"); - _out.write("   "); - _out.write ("
\n"); - _out.write(_t("Graph size") + ":"); + _out.write(_t("Graph size") + ": " + _t("pixels wide") + "   " + _t("pixels high") + "" + _t("Note: Dimensions are for graph only (excludes title, labels and legend).") + "
\n"); - _out.write(_t("Hide legend") + ":"); - _out.write("
\n"); - _out.write(_t("Refresh delay") + ":" + _t("minutes") + "
\n"); + + + _out.write(_t("Refresh delay") + ":
\n" + _t("Persistence") + - ":
" + + _out.write(">" + _t("Store graph data on disk") + "
" + "
"); } catch (IOException ioe) { ioe.printStackTrace(); @@ -453,7 +463,7 @@ public class GraphHelper extends FormHandler { _periodCount != _context.getProperty(PROP_PERIODS, DEFAULT_PERIODS) || _refreshDelaySeconds != _context.getProperty(PROP_REFRESH, DEFAULT_REFRESH) || _showEvents != _context.getBooleanProperty(PROP_EVENTS) || - _graphHideLegend != _context.getBooleanProperty(PROP_LEGEND) || + _graphHideLegend != _context.getProperty(PROP_LEGEND, DEFAULT_LEGEND) || _persistent != _context.getBooleanPropertyDefaultTrue(SummaryListener.PROP_PERSISTENT)) { Map changes = new HashMap(); changes.put(PROP_X, "" + _width); 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 6dab97c52a..2f1b004603 100644 --- a/apps/routerconsole/java/src/net/i2p/router/web/SummaryBarRenderer.java +++ b/apps/routerconsole/java/src/net/i2p/router/web/SummaryBarRenderer.java @@ -335,7 +335,7 @@ class SummaryBarRenderer { .append(nbsp(_t("Debug"))) .append("\n") - .append("") .append(nbsp(_t("Events"))) @@ -802,7 +802,7 @@ class SummaryBarRenderer { .append("\">") .append(_helper.getSecondKBps()) .append("Bps
\n"); -// .append(""); + buf.append(""); return buf.toString(); } diff --git a/apps/routerconsole/java/src/net/i2p/router/web/SummaryHelper.java b/apps/routerconsole/java/src/net/i2p/router/web/SummaryHelper.java index f4c753ed7c..1774029d29 100644 --- a/apps/routerconsole/java/src/net/i2p/router/web/SummaryHelper.java +++ b/apps/routerconsole/java/src/net/i2p/router/web/SummaryHelper.java @@ -316,7 +316,7 @@ public class SummaryHelper extends HelperBase { // long free = Runtime.getRuntime().freeMemory()/1024/1024; // return integerFormatter.format(used) + "MB (" + usedPc + "%)"; // return integerFormatter.format(used) + "MB / " + free + " MB"; - return "
RAM: " + integerFormatter.format(used) + " / " + total + "MB" + + return "
RAM: " + integerFormatter.format(used) + " / " + total + "MB" + "
"; } diff --git a/apps/routerconsole/jsp/js/ajax.js b/apps/routerconsole/jsp/js/ajax.js index 8933f97197..6f77019455 100644 --- a/apps/routerconsole/jsp/js/ajax.js +++ b/apps/routerconsole/jsp/js/ajax.js @@ -35,14 +35,10 @@ function ajaxDone(url, target, refresh) { //document.getElementByClassName("hideifdown").style.display="none"; } - // conditionally load sidebar refreshGraph script - var graph = document.getElementById('sb_graphcontainer'); - if (graph) { - var js_refreshGraph = document.createElement('script'); - js_refreshGraph.type = "text/javascript"; - js_refreshGraph.src = "/js/refreshGraph.js"; - js_refreshGraph.async = true; - document.getElementsByTagName('head')[0].appendChild(js_refreshGraph); + // conditionally display graph so ajax call doesn't interfere with refreshGraph.js + var graph = document.getElementById("sb_graphcontainer"); + if (graph) { + graph.style.backgroundImage = "url(/viewstat.jsp?stat=bw.combined&periodCount=20&width=220&height=50&hideLegend=true&hideGrid=true&time=" + new Date().getTime(); } setTimeout(function() {ajax(url, target, refresh);}, refresh); diff --git a/history.txt b/history.txt index ae75856d2b..1b9188af6d 100644 --- a/history.txt +++ b/history.txt @@ -1,3 +1,32 @@ +2017-11-03 str4d + * Console: + - /graphs: + - Reorganised config form + - Fixed "hide legends" option + - Sidebar: limit event logs to last 7 days, to avoid page freezes + - Fix scrolling latency issue light theme in Chrome/blink and older Firefox + versions (ticket #2024) + - Various cosmetic tweaks, fixes and enhancements + * I2PSnark: + - Reduce scrolling and hover latency + - Add sort direction hover indicators to .snarkTorrents header icons + (dark/midnight) + - Various cosmetic tweaks, fixes and enhancements + * Susimail/SusiDNS: + - Various cosmetic tweaks, fixes and enhancements + +2017-11-02 str4d + * Console: + - Sidebar: + - Fix erratic display of sidebar graph + - Add id to memory bar so we can target it for Chrome/blink display issue + * I2PSnark: + - Roll back target="_top" in config page to prevent embedded view from + breaking out of iframe + - Add target="_blank" to relevant links to avoid display in iframe in + embedded mode + - Enhance presentation of tracker links in TorrentInfo view + 2017-10-31 str4d * I2PSnark: Use reflection to access ConfigUIHelper in standalone build diff --git a/installer/resources/themes/console/classic/console.css b/installer/resources/themes/console/classic/console.css index cf50731609..bf0dc8cceb 100644 --- a/installer/resources/themes/console/classic/console.css +++ b/installer/resources/themes/console/classic/console.css @@ -6,7 +6,7 @@ body { margin: 3px; padding: 0; text-align: left; - background: #bbf url(images/bg.png) center center fixed; + background: #bbf url(images/bg.png) center center scroll; background-size: 120px 120px; color: #2c354f; font: 9pt/130% "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, Helvetica, sans-serif; @@ -14,7 +14,7 @@ body { /* preload button mouseovers */ body { - background: url(images/bg.png) fixed, + background: url(images/bg.png) scroll, url(/themes/console/images/buttons/clean_hover.png) no-repeat, url(/themes/console/images/buttons/configure_hover.png) no-repeat, url(/themes/console/images/buttons/delete_hover.png) no-repeat, @@ -26,6 +26,12 @@ body { background-size: 120px 120px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } +@supports (text-justify: auto) { /* Firefox 55+ */ +body { + background-attachment: fixed; +} +} + ::selection { text-shadow: none; background: #4a90d9; @@ -1261,7 +1267,7 @@ a:link { word-wrap: break-word; } -a:visited, #graphopts a, #graphopts a:visited { +a:visited, #graphopts a, #graphopts a:visited, .tab a, .tab a:visited { color: #448 !important; text-decoration: none; font-weight: bold; @@ -1288,13 +1294,13 @@ a.script { pre { margin: 0 20px; overflow: auto; - font-size: 8pt !important; + font-size: 8.5pt; width: 95%; padding-top: 10px; } tt, code { - font: bold 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace !important; + font: bold 8.5pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace !important; color: darkgreen; } @@ -1415,6 +1421,7 @@ label[for="0"] { input[type="file"] { margin: 3px 5px; + background: none; } input[type="text"], input[type="password"] { @@ -2085,7 +2092,7 @@ button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="re padding-top: 15px; } -.main li b { +.links li b { color: #1f7096 !important; } @@ -2330,14 +2337,14 @@ div.news hr:last-child { /* top navigation */ -.confignav { - padding: 5px 5px 6px; +div.confignav { + padding: 5px 7px 6px; margin: -16px -16px 5px -16px; border: 1px solid #89f; font-size: 9pt; text-align: center; font-weight: bold; - color: #000; + background: linear-gradient(to bottom, #fff, #eff2ff); } .tab, .tab2 { @@ -2352,7 +2359,7 @@ div.news hr:last-child { .tab a { display: inline-block; - padding: 4px 14px; + padding: 3px 15px; } .tab:hover a { @@ -2370,7 +2377,7 @@ div.news hr:last-child { } .tab:active { - box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px 1px #5f2400; + box-shadow: inset 0 0 0 1px #f90, inset 3px 3px 3px 1px #5f2400; background: #f60; } @@ -2379,10 +2386,13 @@ div.news hr:last-child { } .tab2 { - background: #89f; - box-shadow: inset 0 0 0 1px #fff; + padding: 4px 14px; color: #fff; - padding: 5px 12px; + text-shadow: 0 1px 1px #225; + box-shadow: inset 3px 3px 2px #337; + background: #89f; + background: linear-gradient(to bottom, #89f 50%, #78f 50%); + vertical-align: top; } /* end topnav */ @@ -2513,6 +2523,7 @@ table.configtable, #permabanned, #loggingoptions, #configstats, ul#banlist { #manualreseed td:first-child { white-space: nowrap; + border-right: none; } #manualreseed .optionsave { @@ -2536,6 +2547,24 @@ table.configtable, #permabanned, #loggingoptions, #configstats, ul#banlist { margin-right: 10px; } +#reseedconfig td { + width: 50%; +} + +@media screen and (-webkit-min-device-pixel-ratio: 0) { +#reseedconfig .optbox[type="radio"] { + margin: 4px 4px 4px 15px !important; +} + +#reseedconfig .optbox[type="checkbox"] { + vertical-align: sub !important; +} + +#manualreseed th:last-child, #manualreseed td:last-child { + border-right: 1px solid #89f; +} +} + #loggingoptions textarea { width: 99%; width: calc(100% - 5px); @@ -2812,7 +2841,10 @@ ul#banlist { column-width: 270px; column-gap: 35px; column-rule: 1px dotted #89f; - font-size: 8pt; +} + +#config_peers #banlist { + margin-bottom: 11px; } ul#banlist + h3.tabletitle { @@ -2842,6 +2874,12 @@ ul#banlist + h3.tabletitle { margin-top: 0; } +#banlist a[href^="configpeer?peer"] { + margin-top: -5px; + float: right; + line-height: 0; +} + /* /configpeers banlist */ #bannedips { @@ -3051,6 +3089,7 @@ pre#transports { padding-left: 0; padding-right: 8px; } + div.configure tr, div.configure td { padding: 5px; } @@ -3068,7 +3107,7 @@ div.configure h2:first-child { } #sidebarconf button { - margin: 2px; + margin: 2px !important; padding: 2px 3px; background-size: 100% 100% !important; } @@ -3301,6 +3340,7 @@ h3#i2pclientconfig { } h3#bannedpeers { + margin-top: 16px; margin-bottom: -16px; } @@ -3377,7 +3417,7 @@ h3#pluginmanage { } .configure > h3#pluginmanage { - margin-top: 15px; + margin-top: 11px; } h3#advancedclientconfig, h3#pconfig { @@ -3416,7 +3456,7 @@ h4#updateplugins { margin-top: -13px; } -.routersummary h2, .routersummary h3, div.confignav { +.routersummary h2, .routersummary h3 { background: url(images/tinytitle.png) center center repeat-x; background: linear-gradient(to bottom, #fff 50%, #eff2ff 50%); } @@ -3529,6 +3569,8 @@ td.tabletextarea { overflow: auto; border: 0; white-space: pre-wrap; + word-break: break-all; + font-size: 9pt; padding: 5px; box-shadow: 0 0 0 0 !important; border: none !important; @@ -3774,7 +3816,7 @@ table.search { } tt, pre, textarea, code { - font: 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace; + font: 8.5pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace; } hr { @@ -4145,6 +4187,10 @@ p#enablefullstats { margin-top: -6px; } +.formaction#clientsconfig { + margin-bottom: -5px; +} + .formaction#pluginconfigactions { border: 1px solid #89f; margin-top: -1px; @@ -4157,12 +4203,12 @@ p#enablefullstats { padding: 15px 15px 15px 50px; } -.formaction#webappconfigactions, .formaction#clientsconfig { +.formaction#webappconfigactions { margin-bottom: -5px; } .formaction#resetreseed { - margin: 0 -10px 0 0; + margin: 0 -3px 0 0; background: none; } @@ -4174,7 +4220,7 @@ p#enablefullstats { .formaction#homeapps { margin-top: -6px; - margin-bottom: -5px; + margin-bottom: 0; } .formaction#homesites { @@ -4708,7 +4754,6 @@ p#helptranslate { .langselect:hover > input + img { transform: scale(1.1); - border: 1px solid #f60 !important; } .langselect img[src^="/flags"] { @@ -4912,6 +4957,11 @@ td#pw_adduser input { text-align: left; } +#clientconfig th:nth-child(2), #clientconfig th:nth-child(3), +#webappconfig th:nth-child(2), #webappconfig th:nth-child(3) { + text-align: center; +} + #clientconfig td:nth-child(3) { white-space: nowrap; } @@ -5671,6 +5721,10 @@ ul#reachability { line-height: 140%; } +#portfaq tr { + box-shadow: none; +} + #configinfo th { box-shadow: inset 0 0 0 1px #fff; } @@ -5694,6 +5748,7 @@ ul#reachability { height: 600px; overflow: auto; white-space: pre-wrap; + font-size: 9pt; } p#fullhistory { @@ -5797,10 +5852,15 @@ p#fullhistory { } .eventspanel form { - border: 1px solid #89f; - padding: 10px; margin-top: -11px; - background: #fff; + padding: 10px 10px 10px 50px; + border: 1px solid #89f; + background: #fff url(/themes/console/images/info/logs.png) 12px center no-repeat; + background-size: 28px 28px; +} + +.eventspanel select { + margin-right: 15px; } .eventspanel th { @@ -5931,6 +5991,11 @@ p.infowarn { margin-top: 15px; } +#tunnelconfig td:nth-child(n+2) { + text-align: left; + padding-left: 0; +} + #bandwidthconfig tr:first-child .infohelp { background: #fff url(/themes/console/images/info/bandwidth.png) 12px center no-repeat; padding: 15px 15px 15px 50px; @@ -6010,64 +6075,65 @@ p#pluginconfigtext { } #manualreseed tr:nth-last-child(2) td.infohelp { - background: #fff url(/themes/console/images/info/box.png) 12px center no-repeat; padding: 15px 15px 15px 50px; + background: #fff url(/themes/console/images/info/box.png) 12px center no-repeat; background-size: 28px 28px; } #config_peers tr:nth-child(3) td.infohelp { - background: #fff url(/themes/console/images/info/blocked.png) 12px center no-repeat; padding: 15px 15px 15px 50px; + border-right: none; + background: #fff url(/themes/console/images/info/blocked.png) 12px center no-repeat; background-size: 28px 28px; } h3#shutdownrouter + p.infohelp { - background: #fff url(/themes/console/images/info/power.png) 12px center no-repeat; padding: 15px 15px 15px 50px; + background: #fff url(/themes/console/images/info/power.png) 12px center no-repeat; background-size: 28px 28px; } h3#restartrouter + p.infohelp, #config_family .infohelp.needrestart { - background: #fff url(/themes/console/images/info/reboot.png) 12px center no-repeat; padding: 15px 15px 15px 50px; + background: #fff url(/themes/console/images/info/reboot.png) 12px center no-repeat; background-size: 28px 28px; } h3#systray + p.infohelp { - background: #fff url(/themes/console/images/info/systray.png) 12px center no-repeat; padding: 15px 15px 15px 50px; + background: #fff url(/themes/console/images/info/systray.png) 12px center no-repeat; background-size: 28px 28px; } h3#servicedebug + p.infohelp { - background: #fff url(/themes/console/images/info/debug.png) 12px center no-repeat; padding: 15px 15px 15px 50px; + background: #fff url(/themes/console/images/info/debug.png) 12px center no-repeat; background-size: 28px 28px; } h3#browseronstart + p.infohelp { - background: #fff url(/themes/console/images/info/launch_browser.png) 12px center no-repeat; padding: 15px 15px 15px 50px; + background: #fff url(/themes/console/images/info/launch_browser.png) 12px center no-repeat; background-size: 28px 28px; } .main#config_reseed p.infohelp { - background: #fff url(/themes/console/images/info/connect.png) 12px center no-repeat; padding: 15px 15px 15px 50px; + background: #fff url(/themes/console/images/info/connect.png) 12px center no-repeat; background-size: 28px 28px; } p#enablefullstats, p#gatherstats { - background: #fff url(/themes/console/images/info/statistics.png) 12px center no-repeat; padding: 15px 15px 15px 50px; + background: #fff url(/themes/console/images/info/statistics.png) 12px center no-repeat; background-size: 28px 28px; } #config_family .infohelp { - background: #fff url(/themes/console/images/info/family.png) 12px center no-repeat; - padding: 15px 15px 15px 50px; - background-size: 28px 28px; margin-bottom: -1px !important; + padding: 15px 15px 15px 50px; + background: #fff url(/themes/console/images/info/family.png) 12px center no-repeat; + background-size: 28px 28px; } /* end informational images */ @@ -6098,7 +6164,7 @@ p#enablefullstats, p#gatherstats { #logs li { list-style: none; - font: 8pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace; + font: 8.5pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace; line-height: 130%; text-align: left; display: inline-block; @@ -6110,12 +6176,12 @@ p#enablefullstats, p#gatherstats { display: block; border-top: 1px dotted #bbf; width: 100%; - margin: 4px 0 0; + margin: 2px 0 -4px; } #logs li:last-child::after { border: none; - margin: 0; + margin: -4px; } #logs font[color^="#"]::before { @@ -6155,7 +6221,7 @@ p#enablefullstats, p#gatherstats { /* peers, profiles, tunnels */ .cells tt, #profilelist tt { - font-size: 8pt !important; + font-size: 8.5pt !important; } /* end peers, profiles, tunnels dests */ @@ -6163,7 +6229,7 @@ p#enablefullstats, p#gatherstats { /* /tunnels */ tt a, .cells tt { - letter-spacing: 0.07em; + letter-spacing: 0.1em; } .tunnel_cap { @@ -6398,6 +6464,10 @@ th code { display: none; } +.netdb_addresses { + line-height: 150%; +} + .netdbentry th:first-child::after { content: ""; display: inline-block; @@ -6688,6 +6758,14 @@ b.netdb_transport { padding-bottom: 5px; } +#debug td ul { + margin: 0; +} + +#debug td li { + padding: 0 0 -10px; +} + #debug h2 { margin: 12px 0 0; background: url(/themes/console/images/info/debug.png) right 6px center no-repeat, linear-gradient(to bottom, #fff 50%, #eff2ff 50%) !important; @@ -7274,6 +7352,7 @@ table.sybil_routerinfo:last-child { #upnpstatus + #ntcpcon { margin-top: 5px !important; } + /* end whitespace reduction */ #help h3, #faq h3 { @@ -7283,6 +7362,15 @@ table.sybil_routerinfo:last-child { #portfaq td:nth-child(2) { white-space: normal; } + +.eventspanel form { + padding: 10px !important; + background: #fff !important; +} + +.eventspanel select { + margin-right: 8px !important; +} } @media screen and (max-width: 1500px) { @@ -7599,3 +7687,135 @@ _:-ms-lang(x), .tunnels_client th:first-child::after { /* end Edge/IE tweaks */ + +/* TO DO: Merge with main classes */ + +.optionlist { + columns: 500px auto; + padding-bottom: 1px; +} + +.optionlist label { + min-width: 300px; + break-inside: avoid; + page-break-inside: avoid !important; + -webkit-column-break-inside: avoid; +} + +th.options, table#externali2cp th { + padding: 7px 10px !important; +} + +.options input[type="checkbox"], #i2pupdates .options .optbox { + margin: 0 3px 0 0; +} + +#reseedconfig textarea { + min-height: 76px !important; + height: 76px !important; + margin: 6px 10px 6px 0 !important; + padding: 3px 5px; +} + +#reseedconfig .nowrap b { + display: inline-block; + min-width: 100px; + text-align: right; + margin-right: 5px; +} + +#manualreseed { + margin-bottom: -3px !important; +} + +#resetreseed { + padding: 5px 5px 0 0; +} + +/* /configui */ + +#passwordheading { + margin-top: 0 !important; +} + +#langsettings { + margin-bottom: -6px !important; +} + +/* end /configui */ + +#pluginconfigtext + form { + float: right; + margin: -42px 6px 0 0; +} + +#externaltcp .nowrap:first-child { + margin: 5px 0 -18px !important; + display: inline-block; +} + +#cputype { + display: inline-block; + margin: -2px 2px -2px 0; + padding: 2px 5px; + font-weight: bold; + text-transform: uppercase; + border-radius: 2px; + background: #ddf; +} + +#wrapperlogs pre { + height: 400px; + resize: vertical; +} + +/* graphs */ + +.statimage { + animation: fadein 1s ease-in; /* prevent white background flicker on refresh */ +} + +@keyframes fadein { +from { + background: #f7f7ff; +} + +to { + background: #fff; +} +} + +#graphs td:first-child { + font-weight: normal; + text-align: left; + padding: 5px 0 0; +} + +@media screen and (min-width: 1060px) { +#graphs td:first-child { + padding: 5px 0; +} +} + +#graphs td b { + min-width: 150px; + text-align: right; + display: inline-block; + margin-right: 5px; +} + +#graphs .nowrap { + line-height: 300%; + display: inline-block; +} + +/* end graphs */ + +.buckets br + br { + line-height: 5px; +} + +#debug td div, #debug td ul { + columns: 400px auto; +} + diff --git a/installer/resources/themes/console/classic/i2ptunnel.css b/installer/resources/themes/console/classic/i2ptunnel.css index f74961fec1..72ab0b8255 100644 --- a/installer/resources/themes/console/classic/i2ptunnel.css +++ b/installer/resources/themes/console/classic/i2ptunnel.css @@ -6,7 +6,7 @@ body { padding: 0; text-align: center; font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, Helvetica, sans-serif; - color: #333; + color: #2c354f; font-size: 9pt; background: #a4a4cb url(images/bg.png); } @@ -345,9 +345,10 @@ th:last-child, td:last-child { } td.infohelp { + padding: 10px 10px 10px 38px !important; + text-align: justify; background: url(/themes/console/images/info/infohelp.png) 10px center no-repeat; background-size: 20px 20px; - padding: 10px 10px 10px 38px !important; } .tunnelConfig td { @@ -897,10 +898,6 @@ textarea[name="accessList"], #hostField, #localDestination, .authentication { padding-top: 1px !important; } -.tunnelDestination b, .tunnelDescription b { - color: #444; -} - td.tunnelDestination, td.tunnelDescription { background: linear-gradient(to right, #fff 50%, #eff2ff); } diff --git a/installer/resources/themes/console/dark/console.css b/installer/resources/themes/console/dark/console.css index 0bcdde3fc7..189a679e37 100644 --- a/installer/resources/themes/console/dark/console.css +++ b/installer/resources/themes/console/dark/console.css @@ -7,11 +7,17 @@ body { margin: 5px 0 0 0; padding: 0; text-align: center; - background: #010 url(images/camotile.png) top left fixed; + background: #010 url(images/camotile.png) top left scroll; color: #ee9; font: 8.5pt/130% "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; } +@supports (text-justify: auto) { /* Firefox 55+ */ +body { + background-attachment: fixed; +} +} + .hide, .hideme { display: none; } @@ -157,7 +163,7 @@ div.warning { .warning h3 { font-size: 10pt; - padding: 7px 10px; + padding: 9px 10px 7px; text-align: left; margin: -9px -24px 15px -74px; border: none; @@ -333,7 +339,7 @@ div.warning { text-transform: uppercase; border-radius: 0; mix-blend-mode: exclusion; - transition: ease all 0.2s; + transition: none !important; } .routersummary h3::after { @@ -345,22 +351,21 @@ div.warning { .routersummary h3 a { vertical-align: middle; - transition: ease all 0.2s; } .routersummary h3:hover { background: #010 !important; box-shadow: inset 0 0 2px 2px #000; - transition: ease all 0.2s; } .routersummary h3:hover a { color: #f60; - transition: ease all 0.2s; + transition: ease color 0.2s; } .routersummary h3:active { - box-shadow: inset 4px 4px 4px #000; + box-shadow: inset 4px 4px 3px #000; + transition: ease box-shadow 0.1s; } .routersummary h4 { @@ -370,11 +375,10 @@ div.warning { margin: -6px -9px -8px !important; padding: 6px 1px; background: #000; - background: linear-gradient(to right, #001900, #001000 5%, #000 25%, #000 50%, #000 75%, #001000 95%, #001900); + background: linear-gradient(to right, #001900, #001000 5%, #000 50%, #001000 95%, #001900); text-decoration: none !important; color: #2b2; line-height: 120%; - box-shadow: inset 0 0 0 1px #121; box-shadow: inset 0 0 0 1px #121, inset 0 0 5px 2px #000; } @@ -762,27 +766,33 @@ a:active #sb_bandwidthgraph { #sb_graphcontainer { background-color: #000; - background-position: left -72px top -23px !important; + background-position: left -72px top -22px !important; background-size: 280px 77px !important; background-repeat: no-repeat !important; margin-bottom: -7px !important; filter: invert(1) hue-rotate(90deg); + background-position: left -72px top -14px !important; + background-size: 280px 67px !important; } /* reduce flicker as graph image gets inverted and hue-rotated */ @keyframes graphfadein { -from { +0% { filter: invert(1) hue-rotate(90deg) opacity(0); } -to { +30% { + filter: invert(1) hue-rotate(90deg) opacity(0); +} + +50% { filter: invert(1) hue-rotate(90deg) opacity(1); } } #sb_graphcontainer { - animation: graphfadein 0.3s ease-in; + animation: graphfadein 0.3s ease-out; } @media screen and (min-width: 1500px) { @@ -861,6 +871,10 @@ to { height: 16px; } +.sb_update { + padding: 3px 5px 0 !important; +} + @keyframes downloadbar { from { background: repeating-linear-gradient(135deg, #000 1px, #000 5px, #010 6px, #010 11px); @@ -1030,7 +1044,7 @@ div.news h3, #newspage h3 { .main textarea { background: #000; color: #ee9; - font: 8pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace; + font: 8.5pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace; resize: none; } @@ -1196,7 +1210,7 @@ div.widescroll { /* only scroll content, not entire page eg /peers */ .tab2 { background: #030; - box-shadow: inset 0 0 0 1px #000; + box-shadow: inset 0 0 0 1px #000, inset 3px 3px 2px #010; color: #ee9; padding: 5px 12px !important; } @@ -1207,7 +1221,7 @@ div.widescroll { /* only scroll content, not entire page eg /peers */ } .tab { - background: linear-gradient(to bottom, #001900, #002900 50%, #000 51%, #000) !important; + background: linear-gradient(to bottom, #001900, #002900 50%, #000 50%) !important; box-shadow: inset 0 0 0 1px #000; } @@ -1651,13 +1665,13 @@ td img { /* end peer sort */ tt { - font: bold 8pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace; + font: bold 8.5pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace; color: #FF0; } table tt { - color: #770; - font-size: 8pt; + color: #990; + font-size: 8.5pt; } a:link tt, a:visited tt { @@ -2153,6 +2167,7 @@ input:disabled { input[type="text"]:disabled, input[type="text"]:disabled:active, input[readonly="readonly"] { color: #161 !important; + border: 1px solid #373 !important; background: #000 !important; } @@ -2242,7 +2257,6 @@ input[type="text"]:focus, input[type="password"]:focus, textarea:focus { background: #000 !important; filter: drop-shadow(0 0 1px #880); transition: filter ease 0.3s; - font-weight: bold; outline: none; } @@ -3142,18 +3156,6 @@ td#themeselect { font-weight: bold; } -@media screen and (-webkit-min-device-pixel-ratio:0) { -.langselect img { - margin-left: -9px; - margin-top: -17px !important; -} - -.langselect input[name="lang"]:checked + img, .langselect input[name="lang"]:checked + #config_ui img[src="/flags.jsp?c=a1"] { - margin-left: -10px; - margin-top: -18px !important; -} -} - /* large flags */ .langselect img { @@ -3185,6 +3187,18 @@ td#themeselect { filter: drop-shadow(0 0 1px #f60); } +@media screen and (-webkit-min-device-pixel-ratio:0) { +.langselect img { + margin-left: -19px !important; + margin-top: -31px !important; +} + +.langselect input[name="lang"]:checked + img, .langselect input[name="lang"]:checked + #config_ui img[src="/flags.jsp?c=a1"] { + margin-left: -15px !important; + margin-top: -27px !important; +} +} + /* end large flags */ /* end flag as radio icons */ @@ -3562,6 +3576,14 @@ p#gatherstats { text-align: right; } +#webappconfig th, #clientconfig th { + text-align: center; +} + +.configtable#webappconfig tr:last-child, .configtable#clientconfig tr:last-child { + border-top: 1px inset #131; +} + p#availableplugins { margin: 12px 0 -1px; } @@ -4329,16 +4351,12 @@ th > img[src^="/imagegen"] { /* scale down header images */ vertical-align: bottom; } -.netdb_gateway img { - vertical-align: bottom; -} - .netdb_tunnel { display: inline-block; background: #030; - padding: 0 4px; - margin-left: 4px; - margin-right: -4px; + padding: 2px 4px; + margin-left: 3px; + margin-right: -3px; border-radius: 2px; } @@ -4351,7 +4369,7 @@ th > img[src^="/imagegen"] { /* scale down header images */ } .netdb_leases .tunnel_peer tt, .netdb_leases .tunnel_peer tt a { - font-size: 8pt !important; + font-size: 8.5pt !important; font-weight: bold !important; } @@ -4477,7 +4495,7 @@ table[id$="logs"] ul { #logs li { list-style: none; - font: bold 8pt "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", monospace; + font: bold 8.5pt "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", monospace; line-height: 120%; text-align: left; display: inline-block; @@ -4933,6 +4951,14 @@ ul#banlist + hr { /* begin home page */ +#home .welcome h2 { + margin: 12px -5px !important; +} + +#home .welcome .langbox { + margin-right: -2px !important; +} + #homepanel { margin: 0 -8px; } @@ -5113,7 +5139,7 @@ div.app:hover.app img, a:focus .app img { .app td { background: none; - border: 0; + border: none; margin: 0; padding: 3px 0 0; } @@ -5121,7 +5147,7 @@ div.app:hover.app img, a:focus .app img { .applabel { font-size: 8pt; margin: 2px 0 0; - padding: 4px 2px 6px; + padding: 3px 2px 4px; text-align: center; vertical-align: bottom; line-height: 95%; @@ -5130,7 +5156,7 @@ div.app:hover.app img, a:focus .app img { width: 136px; min-width: 72px; background: #001000; - background-image: linear-gradient(to bottom, #001000, #001900 50%, #000 51%, #000); + background: linear-gradient(to bottom, #001000, #001900 50%, #000 50%); border-radius: 0 0 2px 2px; border-top: 1px solid #494; white-space: nowrap; @@ -5652,16 +5678,12 @@ table#netconfig th, table#externali2cp th, table#plugininstall th, .configtable word-spacing: 0.1em; } -table.configtable td { +.configtable td { padding: 6px 10px; background: #000; line-height: 180%; } -#netconfig img[src*="itoo"] { - display: none; -} - .configtable td.tabletextarea { padding: 0 !important; } @@ -5715,7 +5737,7 @@ td.optionsave { border-top: 1px solid #494; padding: 5px !important; white-space: nowrap; - width: 50px; +/* width: 50px;*/ background: #000; } @@ -5825,6 +5847,10 @@ table#externali2cp th { margin-bottom: -2px; } +#tunnelconfig td:nth-child(n+2) { + text-align: left; +} + th.th_title { padding: 8px 10px !important; text-align: left; @@ -5904,11 +5930,15 @@ table#configstats { margin-bottom: -2px; } -#configstats th, #configstats tr.tablefooter td { +#configstats th { padding: 8px 10px !important; text-align: left; } +#configstats tr.tablefooter td { + padding: 5px 10px !important; +} + #configstats th a { float: right; font-size: 9pt; @@ -5922,7 +5952,7 @@ table#configstats { } #configstats td { - padding: 8px 5px; + padding: 6px 5px; } #configstats td:first-child { @@ -6315,21 +6345,21 @@ p#profiles_overview { /* /tunnels */ -tt a, .tunnel_peer tt { - letter-spacing: 0.07em; +tt a, img + tt { + letter-spacing: 0.1em; } .tunnel_cap { - background: rgba(0,96,0,0.3); + margin: 1px 2px 1px 8px; + padding: 0 2px; + display: inline-block; + min-width: 12px; color: #bb7; border: 1px solid rgba(0,64,0,0.2); border-radius: 2px; - min-width: 12px; - padding: 0 2px; - display:inline-block; - margin: 1px 2px 1px 8px; text-align: center !important; text-shadow: 0 1px 1px #555; + background: rgba(0,96,0,0.3); } .tunnel_cap:empty { @@ -6549,6 +6579,10 @@ th code { -webkit-column-break-inside: avoid; } +.netdb_addresses { + line-height: 150%; +} + .netdb_addresses br:first-child, .sybil_routerinfo tr:last-child td br:first-child { display: none; } @@ -7461,13 +7495,13 @@ img[src="/themes/console/images/i2plogo.png"] { @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; + margin-left: -20px !important; + margin-top: -31px !important; } .langselect input[name="lang"]:checked + img { - margin-left: -11px !important; - margin-top: -19px !important; + margin-left: -16px !important; + margin-top: -27px !important; } } @@ -7613,3 +7647,178 @@ _:-ms-lang(x), .tunnels_client th:first-child::after { } */ +/* TO DO: Merge with main classes */ + +.optionlist { + columns: 500px auto; + padding-bottom: 1px; +} + +.optionlist label { + min-width: 300px; + break-inside: avoid; + page-break-inside: avoid !important; + -webkit-column-break-inside: avoid; +} + +th.options, table#externali2cp th { + padding: 7px 10px !important; +} + +.options input[type="checkbox"], #i2pupdates .options .optbox { + margin: 0 3px 0 0; +} + +#i2pupdates textarea { + min-height: 76px !important; + height: 76px !important; + margin: 6px 0 6px 10px !important; + padding: 3px 5px; +} + +#reseedconfig textarea { + min-height: 76px !important; + height: 76px !important; + margin: 6px 10px 6px 0 !important; + padding: 3px 5px; +} + +#manualreseed { + margin-bottom: 10px !important; +} + +#resetreseed { + padding: 5px 5px 0 0; +} + +/* /configui */ + +#passwordheading { + margin-top: 0 !important; +} + +#langsettings { + margin-bottom: 10px !important; +} + +/* end /configui */ + +#pluginconfigtext + form { + float: right; + margin: -42px 6px 0 0; +} + +#externaltcp .nowrap:first-child { + margin: 5px 0 -18px !important; + display: inline-block; +} + +#cputype { + display: inline-block; + margin: -2px 2px -2px 0; + padding: 2px 5px; + font-weight: bold; + text-transform: uppercase; + border-radius: 2px; + background: #030; +} + +#wrapperlogs pre { + height: 300px; + resize: vertical; +} + +/* graphs */ + +#graphs td:first-child { + font-weight: normal; + text-align: left; + padding: 5px 0 0; +} + +@media screen and (min-width: 1060px) { +#graphs td:first-child { + padding: 5px 0; +} +} + +#graphs td b { + min-width: 150px; + text-align: right; + display: inline-block; + margin-right: 5px; +} + +#graphs .nowrap { + line-height: 300%; + display: inline-block; +} + +/* end graphs */ + +.buckets br + br { + line-height: 5px; +} + +.routerid { + margin: 0; + padding: 0 2px; + display: inline-block; + min-width: 50px; + border: 1px solid #020; + background: #020; + text-align: center; +} + +.routerid tt, .routerid a { + letter-spacing: 0.2em !important; +} + +.routerid img { + margin: 1px 0 -1px; +} + +.routerid tt, .routerid a { + margin-top: -3px !important; + display: inline-block; +} + +.tunneldisplay .routerid { + min-width: 64px; + margin-right: 6px !important; + box-sizing: border-box; + border-radius: 2px; +} + +.tunneldisplay .routerid, .tunnel_cap { + box-shadow: 0 0 0 1px #010; +} + +.tunnel_cap:empty { + box-shadow: none; +} + +#plugininstall, #reseedconfig, #oldhome { + margin-bottom: 10px !important; +} + +#reseedconfig td { + width: 50%; +} + +#reseedconfig td .optbox { + margin: 6px 5px 6px 10px; +} + +#reseedconfig td .nowrap b { + margin-right: 8px; + min-width: 120px; + text-align: right; + display: inline-block; +} + +.configtable th { + text-transform: none !important; + letter-spacing: 0 !important; + word-spacing: 0 !important; +} diff --git a/installer/resources/themes/console/dark/i2ptunnel.css b/installer/resources/themes/console/dark/i2ptunnel.css index 2a98ce30f4..256ffd3553 100644 --- a/installer/resources/themes/console/dark/i2ptunnel.css +++ b/installer/resources/themes/console/dark/i2ptunnel.css @@ -165,17 +165,18 @@ hr { } h2, h3 { + margin: 10px 0 -1px; padding: 8px 10px 8px 34px; border: 1px solid #494; - background: linear-gradient(to bottom, #1a261a 50%, #000 50%) !important; - background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #004000, #000 75%), url(/themes/console/dark/images/camotile2.png) top left !important; font-size: 11pt; + color: #ee9; text-transform: uppercase; letter-spacing: 0.08em; word-spacing: 0.1em; - margin: 10px 0 -1px; - color: #ee9; + text-shadow: 0 1px 1px #000; box-shadow: inset 0 0 0 1px #000; + background: linear-gradient(to bottom, #1a261a 50%, #000 50%) !important; + background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #004000, #000 75%), url(/themes/console/dark/images/camotile2.png) top left !important; } /* title images */ @@ -334,7 +335,7 @@ td.infohelp { text-align: right; } -.tunnelName { +.tunnelName, .tunnelDescription { width: 25%; min-width: 150px; } @@ -422,7 +423,7 @@ textarea#statusMessages, textarea#statusMessages:active, textarea#statusMessages padding: 2px 4px; color: #69f; font-family: "Droid Sans Mono", "Noto Mono", Consolas, "Lucida Console", "DejaVu Sans Mono", monospace; - font-size: 8pt; + font-size: 8.5pt; } _:-ms-lang(x), textarea#statusMessages, textarea#statusMessages:active, textarea#statusMessages:focus { @@ -433,7 +434,7 @@ _:-ms-lang(x), textarea#statusMessages, textarea#statusMessages:active, textarea width: 150px; border: 1px solid #494; padding: 4px; - font: 8pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace; + font: 8.5pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace; background: #fff; color: #333; border-radius: 2px; @@ -451,7 +452,7 @@ _:-ms-lang(x), textarea#statusMessages, textarea#statusMessages:active, textarea box-shadow: inset 2px 2px 1px #000; color: #885; cursor: default; - border: 1px solid #494 !important; + border: 1px solid #373 !important; opacity: 0.8; } @@ -490,7 +491,7 @@ input[type="file"] { } input[type="checkbox"], input[type="radio"] { - vertical-align: middle; + vertical-align: sub; min-width: 16px; min-height: 16px; margin: 0; @@ -621,7 +622,7 @@ select { font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; font-weight: bold; font-size: 8pt !important; - padding: 4px 16px 4px 4px !important; + padding: 3px 16px 3px 4px !important; -moz-appearance: none; -webkit-appearance: none; appearance: none; @@ -678,7 +679,7 @@ button, input[type="submit"], input[type="reset"], a.control, select { padding: 7px 5px !important; background: #000; background: linear-gradient(to bottom, #010, #000); - background: linear-gradient(135deg, #000, rgba(0,0,0,0) 70%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #020, #000 75%); + background: linear-gradient(-135deg, #000, rgba(0,0,0,0) 40%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #020, #000 75%); border-top: 1px solid #494 !important; } diff --git a/installer/resources/themes/console/light/console.css b/installer/resources/themes/console/light/console.css index 96162e3b50..5ce4778700 100644 --- a/installer/resources/themes/console/light/console.css +++ b/installer/resources/themes/console/light/console.css @@ -10,14 +10,16 @@ body { margin: 6px; text-align: center; color: #33333f; - font: 9pt/130% "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", Verdana, Helvetica, sans-serif; + font-size: 9pt; + line-height: 130%; background: #a4a4cb url(images/tile2.png) fixed; background-size: 32px 32px; } /* preload button mouseovers */ + body { - background: url(images/tile2.png) fixed, + background: url(images/tile2.png), url(/themes/console/images/buttons/clean_hover.png) no-repeat, url(/themes/console/images/buttons/configure_hover.png) no-repeat, url(/themes/console/images/buttons/delete_hover.png) no-repeat, @@ -29,6 +31,12 @@ body { background-size: 32px 32px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } +@supports (text-justify: auto) { /* Firefox 55+ */ +body { + background-attachment: fixed !important; +} +} + b { color: #41465f; } @@ -55,6 +63,14 @@ div.clearer { text-shadow: none; } +body, input, button, select { + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", Verdana, Helvetica, sans-serif; +} + +tt, code, pre, textarea, #logs li { + font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace; +} + .routersummary img[src$="i2plogo.png"], .routersummary h3, .confignav, *::before, *::after, div.app, .themechoice, .langselect, .langbox, .newsAuthor, #netdbcountrylist img, .viewfullentry, .sybil_routerinfo th img, .graphspanel, #themeoptions, #graphopts, #newsDisplay { -moz-user-select: none; @@ -94,7 +110,7 @@ pre { width: 98%; overflow: auto; text-align: left; - font: 8pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace; + font-size: 8.5pt; color: #33333f; margin: 10px; } @@ -115,7 +131,7 @@ pre { .routersummary { width: 192px; - padding: 8px 8px 10px; + padding: 8px; margin-bottom: 2px; text-align: center !important; border: 1px solid #447; @@ -130,6 +146,7 @@ pre { .routersummary div[style="height: 36px;"] { margin: 0; + height: 36px !important; padding: 0 0 1px; text-align: center; } @@ -214,9 +231,7 @@ pre { margin: -9px -7px -2px; padding: 2px 0; text-transform: uppercase; - background: #e7e7ff !important; - background: #e7e7ff url(images/header.png) center center repeat-x !important; - background: linear-gradient(to bottom, #fff 50%, #eef 50%) !important; + background: #fcfcff !important; background: #e7e7ff linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)) !important; border: 1px solid #99f; border-left: none; @@ -232,10 +247,10 @@ pre { } .routersummary h3:active { - box-shadow: inset 2px 2px 3px 1px #6f5f45; - box-shadow: inset 0 0 0 1px #fff9ef, inset 2px 2px 3px 1px rgba(111,95,69, 0.8); + box-shadow: inset 0 0 0 1px #fff9ef, inset 2px 2px 3px #7f3000; transition: ease box-shadow 0.05s; background: #fff linear-gradient(to bottom, #fff3df, #fff9ef) !important; + background: #f60 !important; } .routersummary h3 a, .routersummary h3 a:visited { @@ -256,6 +271,8 @@ pre { .routersummary h3:active a, .routersummary h3 a:active { color: #cf9233 !important; + color: #ffecdf !important; + text-shadow: 0 1px 1px #5f2d0c; } /* @@ -279,7 +296,7 @@ h3#helpfaq { margin: -7px; padding: 6px 2px !important; background: #eef; - background: linear-gradient(to right, #ddf 0%, #eef 10%, #fff 50%, #eef 90%, #ddf 100%); + background: linear-gradient(to right, #ddf, #eef 10%, #fff 50%, #eef 90%, #ddf); text-decoration: none !important; color: #4f617f; box-shadow: inset 0 0 0 1px #eef; @@ -303,7 +320,7 @@ h3#helpfaq { } .routersummary h4 a { - vertical-align: middle; + vertical-align: baseline; } h4.sb_info { @@ -457,7 +474,7 @@ h4.sb_info + hr + form { #sb_bandwidthgraph { width: 100%; - margin: -5px 0 -5px -5px; + margin: -5px 0 -6px -5px; border-collapse: separate; border-spacing: 0; padding: 0; @@ -516,6 +533,7 @@ a:active #sb_bandwidthgraph { background-size: 280px 77px !important; background-repeat: no-repeat !important; background-blend-mode: multiply; + will-change: background; } @media screen and (min-width: 1500px) { @@ -548,8 +566,7 @@ a:active #sb_bandwidthgraph { border: none; height: 14px; background: #bbf; - background: linear-gradient(to right, rgba(0,255,0,0.1) 65px, rgba(255,255,0,0.1) 110px, rgba(255,128,0,0.1) 175px, rgba(255,0,0,0.1)), linear-gradient(to bottom, rgba(255, 255, 255,0.6) 0%, rgba(238, 238, 255, 0.6) 50%, rgba(180, 180, 255, 0.7) 50%, rgba(140, 140, 255, 0.7) 100%); - background: linear-gradient(to bottom, rgba(255, 255, 255,0.6) 0%, rgba(238, 238, 255, 0.6) 50%, rgba(180, 180, 255, 0.7) 50%, rgba(140, 140, 255, 0.7) 100%); + background: linear-gradient(to bottom, rgba(255, 255, 255,0.6), rgba(238, 238, 255, 0.6) 50%, rgba(180, 180, 255, 0.7) 50%, rgba(140, 140, 255, 0.7)); box-shadow: inset 0 0 0 1px #ddf; } @@ -573,6 +590,12 @@ a:active #sb_bandwidthgraph { transition: ease opacity 0.2s; } +@media screen and (-webkit-min-device-pixel-ratio: 0) { +#sb_memoryBar { + margin-bottom: -5px; +} +} + /* updates download bar */ .sb_update a { @@ -610,7 +633,7 @@ to { } .sb_info .percentBarOuter { - animation: downloadbar 3s infinite; + animation: downloadbar 3s linear infinite; } .sb_info .percentBarInner { @@ -768,14 +791,13 @@ p:empty + .sb_notice { /* sidebar network status */ -.routersummary .error, .routersummary .warn, .routersummary .testing, .routersummary .hidden, -.routersummary .running, .routersummary .firewalled, .routersummary .vmcomm, .routersummary .clockskew, .tunnelBuildStatus { +.sb_netstatus, .tunnelBuildStatus { display: inline-block; - vertical-align: middle; + vertical-align: baseline; line-height: 120%; border: 1px solid #88f; border-radius: 2px; - padding: 5px 6px; + padding: 6px 4px; width: calc(100% - 10px); width: 100%; margin: -4px -1px; @@ -1417,7 +1439,6 @@ hr:last-child { .main textarea { color: #33333f; - font: 9pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace; margin: 5px 0; resize: none; } @@ -1486,8 +1507,8 @@ textarea[name="reseedURL"] { margin-top: -2px; } -.newsentry font[size="-2"], .newsentry font[size="-1"] { - letter-spacing: 0.1em; +.main#news .newsentry:last-child { + margin-bottom: -5px !important; } .newscontent { @@ -1682,7 +1703,7 @@ h1, .confignav { padding: 1px 0; background: #fff; min-width: 60px !important; - filter: drop-shadow(0 0 1px #ededed); + filter: drop-shadow(0 0 1px #ccf); } .tab a { @@ -1702,28 +1723,32 @@ h1, .confignav { .tab:hover { background: #fff; + background: #fff linear-gradient(to bottom, #fff 50%, rgba(255, 232, 191, 0.6) 50%, rgba(239, 217, 179, 0.4) 100%); box-shadow: inset 0 0 0 1px #f90; + position: relative; + z-index: 30; } .tab:active { - box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px 1px #5f2400; + box-shadow: inset 3px 2px 2px #7f3000; background: #f60; transition: ease box-shadow 0.05s; } .tab:active a { - color: #fff !important; + color: #ffecdf !important; + text-shadow: 0 1px 1px #5f2d0c; } .tab2 { - background: #89f; - background: #aaf; - background: #3b6bbf; - background: rgba(59, 107, 191, 0.8); - background: #6288cb; - box-shadow: inset 0 0 0 1px #fff; - color: #fff; + position: relative; + z-index: 50; padding: 4px 12px; + color: #fafaff; + text-shadow: 0 1px 1px #113; + box-shadow: inset 2px 2px 2px rgba(31, 43, 63, 0.7); + background: #6288cb; + background: linear-gradient(to bottom, rgba(31, 43, 63, 0.7), rgba(31, 43, 63,.2) 50%, rgba(31, 43, 63, 0) 50%, rgba(31, 43, 63, 0.4) 50%, rgba(31, 43, 63, 0.5)), linear-gradient( to right, #6288cb, #7fadff, #6288cb); } @media screen and (min-width: 1400px) { @@ -1787,9 +1812,10 @@ h3#iptransport a:not(old), h3#advancedconfig a:not(old) { h3#iptransport a::after, h3#advancedconfig a::after { content: url(images/help.png); + display: inline-block; padding: 0; - margin: 0; - vertical-align: text-top; + margin: -2px 0 0 0; + vertical-align: middle; cursor: help; filter: hue-rotate(-20deg) saturate(200%) drop-shadow(0 0 1px #999daf); mix-blend-mode: luminosity; @@ -1822,6 +1848,7 @@ pre#transports { /* confignet tidyup */ +/* #netconfig .optbox { margin: 10px 6px 2px !important; display: inline-block !important; @@ -1840,6 +1867,7 @@ pre#transports { #netconfig input[type="text"] + br + .optbox, #netconfig .optbox[name="ntcpAutoPort"] { margin-top: 3px !important; } +*/ #netconfig input[name*="ost"] { width: 250px !important; @@ -2147,8 +2175,8 @@ h3#graphdisplay { /* end graphs */ .messages { - padding: 15px; margin: 15px 0; + padding: 10px 15px; border-radius: 2px; border: 1px solid #7778bf; background: #eef; @@ -2244,6 +2272,10 @@ td.optionsave, .formaction, form[action="configpeer"] tr:last-child td, table#ad background-size: 28px 28px, 100% 100% !important; } +.configtable { + box-shadow: none !important; +} + .configtable td { padding: 5px; } @@ -2326,7 +2358,7 @@ table#wrapperlogs { #logs li { list-style: none; - font: 8pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace; + font-size: 8.5pt; line-height: 130%; text-align: left; display: inline-block; @@ -2360,15 +2392,15 @@ table#wrapperlogs { } #logs li font[color="#cc0000"]::before { - background: #cc0000; + background: #c00; } #logs li font[color="#006600"]::before { - background: #006600; + background: #060; } #logs li font[color="#ff3300"]::before { - background: #ff3300; + background: #f30; } #logs li font[color="#bf00df"]::before { @@ -2376,7 +2408,7 @@ table#wrapperlogs { } #logs li font[color="#000099"]::before { - background: #000099; + background: #009; } #bugreports { @@ -2456,14 +2488,14 @@ table hr { th { padding: 6px 5px; color: #41465f; - background: #eef url(images/header.png) center center repeat-x; - background: linear-gradient(to bottom, #fff 50%, rgba(238, 238, 255, 0.2) 50%, #eef 100%) !important; text-align: left; font-size: 9pt; line-height: 110%; border-bottom: 1px solid #7778bf !important; border-top: 1px solid #7778bf !important; vertical-align: middle; + background: #f6f6ff !important; + background: linear-gradient(to bottom, #fafaff 50%, rgba(252, 252, 255, 0.8) 50%, #e2e2ff 100%) #fafaff !important; } th img[src="/themes/console/images/outbound.png"] { @@ -2496,11 +2528,6 @@ tr:nth-child(odd) { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 2px, rgba(200, 200, 255, 0.3) 3px, #fafaff 5px), #fafaff; } -tr th { - background: #eef url(images/header.png) center center repeat-x; - background: linear-gradient(to bottom, #fafaff 50%, rgba(252, 252, 255, 0.8) 50%, #e2e2ff 100%) #fafaff !important; -} - td { padding: 3px 5px; color: #33333f; @@ -2646,6 +2673,10 @@ div.app:active .applabel, div.app:active .applabel a { color: #fff !important; } +div.app:active .applabel { + box-shadow: inset 0 0 0 1px #fff9ef, inset 2px 2px 3px #7f3000; +} + .appimg { min-height: 52px; } @@ -2752,7 +2783,7 @@ table.search select { } .applabel { - background: url(images/header.png) center center repeat-x; + background: #fcfcff !important; background: linear-gradient(to bottom, #fff 50%, #eef 50%) !important; font-size: 8pt; margin: 0; @@ -2777,7 +2808,8 @@ table.search select { /* end home page */ tt, code { - font: bold 8pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace; + font-size: 8.5pt; + font-weight: bold; color: #050; } @@ -2812,10 +2844,10 @@ tt::-moz-selection { } .tidylist code { - text-align: left; - font: 9pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace; color: #910; + font-size: 9pt; font-weight: bold; + text-align: left; } ol { @@ -2831,7 +2863,7 @@ ul { code { text-align: left; - font: 9pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace; + font-size: 8.5pt; color: #030; } @@ -2894,7 +2926,7 @@ a:active { .links code, #console code { color: #910; - font-size: 8pt !important; + font-size: 8.5pt !important; font-weight: bold; } @@ -2942,7 +2974,7 @@ p#profiles_overview { } #bugreports { - padding: 10px 0 10px 10px; + padding: 0 0 0 10px; border-collapse: separate; border-radius: 2px; filter: drop-shadow(0 0 1px #ccf); @@ -3041,7 +3073,7 @@ p.infowarn { #oldhome td:first-child { background: #fff url(/themes/console/images/info/home.png) 12px center no-repeat; background: url(/themes/console/images/info/home.png) 12px center no-repeat, linear-gradient(to bottom, #fafaff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff !important; - padding: 15px 15px 15px 50px; + padding: 10px 15px 10px 50px; background-size: 28px 28px, 100% 100%, 100% 100%; } @@ -3077,6 +3109,7 @@ p#pluginconfigtext { #plugininstall .infohelp { background: #fff url(/themes/console/images/info/plugin_link.png) 12px center no-repeat; background: url(/themes/console/images/info/plugin_link.png) 12px center no-repeat, linear-gradient(135deg, #fafaff, #f8f8ff); + background: url(/themes/console/images/info/plugin_link.png) 12px center no-repeat, linear-gradient(to bottom, #fafaff 50%, rgba(220, 220, 255, 0.3)) repeat scroll 0 0%, rgba(0, 0, 0, 0) repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #ffffff 5px) repeat scroll 0 0; padding: 15px 15px 15px 50px; background-size: 28px 28px, 100% 100%; } @@ -3084,7 +3117,7 @@ p#pluginconfigtext { #plugininstall tr:nth-child(3) td:nth-last-child(2), #manualreseed tr:nth-child(3) td:nth-last-child(2) { background: #fafaff url(/themes/console/images/info/url.png) 12px center no-repeat; background: url(/themes/console/images/info/url.png) 12px center no-repeat, linear-gradient(to bottom, #fafaff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff !important; - padding: 15px 15px 15px 50px; + padding: 10px 15px 10px 50px; background-size: 28px 28px, 100% 100%, 100% 100% !important; } @@ -3100,7 +3133,7 @@ p#pluginconfigtext { #manualreseed tr:nth-child(5) td:nth-last-child(2), #plugininstall tr:nth-child(5) td:nth-last-child(2) { background: #fafaff url(/themes/console/images/info/from_file.png) 12px center no-repeat; background: url(/themes/console/images/info/from_file.png) 12px center no-repeat, linear-gradient(to bottom, #fafaff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff !important; - padding: 15px 15px 15px 50px; + padding: 10px 15px 10px 50px; background-size: 28px 28px, 100% 100%, 100% 100% !important; } @@ -3145,7 +3178,7 @@ h3#systray + p.infohelp { h3#servicedebug + p.infohelp { background: #fafaff url(/themes/console/images/info/debug.png) 12px center no-repeat; background: url(/themes/console/images/info/debug.png) 12px center no-repeat, linear-gradient(135deg, #fafaff, #f8f8ff); - padding: 15px 15px 15px 50px; + padding: 10px 15px 10px 50px; background-size: 28px 28px, 100% 100%; } @@ -3159,8 +3192,10 @@ h3#browseronstart + p.infohelp { .main#config_reseed p.infohelp { background: #fafaff url(/themes/console/images/info/connect.png) 12px center no-repeat; background: url(/themes/console/images/info/connect.png) 12px center no-repeat, linear-gradient(135deg, #fafaff, #f8f8ff); - padding: 15px 15px 15px 50px; + padding: 10px 15px 10px 50px; background-size: 28px 28px, 100% 100%; + border-radius: 2px; + box-shadow: 0 0 1px #ccf; } p#enablefullstats, p#gatherstats { @@ -3358,8 +3393,6 @@ h2 { color: #41465f; letter-spacing: 0.08em; word-spacing: 0.1em; - background: url(images/header.png) center center repeat-x; - background: linear-gradient(to right, #fff, rgba(255,255,255,0) 600px), linear-gradient(to bottom, #fff 50%, #eef 50%) !important; padding: 10px; border: 1px solid #7778bf; border-radius: 2px; @@ -3403,8 +3436,6 @@ h3 { padding: 7px 5px 6px 7px; margin: 12px 0 15px 0; border-radius: 0 2px 2px 0; - background: url(images/header.png) center center repeat-x !important; - background: linear-gradient(to bottom, #fff 50%, #eef 50%) !important; font-size: 11pt; text-transform: uppercase; letter-spacing: 0.08em; @@ -3430,6 +3461,7 @@ h3#bannedpeers { } h2, h3 { + background: #fcfcff !important; background: linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(to right, #fafaff 5%, rgba(231, 231, 255, 0.8) 25%) !important; } @@ -3708,7 +3740,7 @@ input, input:visited, button, button:visited { background: linear-gradient(to bottom, #fff, #efefff); color: #41465f; margin: 3px; - font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", Verdana, Helvetica, sans-serif; + font-size: 9pt; padding: 4px 5px; text-decoration: none; border-radius: 2px; @@ -4168,7 +4200,6 @@ button.download.control:hover, button.download.control:focus { input[type="text"], input[type="password"] { background: #f8f8ff; box-shadow: inset 1px 1px 1px rgba(204, 204, 204, 0.6); - font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", Verdana, Helvetica, sans-serif; } input[name="refreshInterval"] { @@ -4257,7 +4288,7 @@ select { margin: 5px; border: 1px solid #999daf; min-width: 120px; - font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", Verdana, Helvetica, sans-serif; + font-size: 9pt; border-radius: 2px; text-align: left !important; box-shadow: inset 0 0 0 1px #fff; @@ -4315,8 +4346,8 @@ textarea { margin: 5px !important; background: #f8f8ff; color: #33333f !important; + font-size: 9pt; border-radius: 2px; - font: 8pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace; min-height: 100px; min-width: 97%; border: 1px solid #999daf; @@ -4410,7 +4441,7 @@ div.joblog h3 { border: 1px solid #7778bf; padding: 8px 0; margin-top: 1px; - background: #efeffff; + background: #efefff; background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px), #fff; box-shadow: inset 0 0 0 1px #fff; break-inside: avoid; @@ -4532,7 +4563,7 @@ div.footnote hr { margin: 24px 0 5px 0 !important; background: #447; background: linear-gradient(to right, #77a, #669, #77a); - height: 2px; + height: 1px; border-bottom: 1px solid #fff; } @@ -4737,12 +4768,14 @@ div.themelabel { .themechoice .optbox:active + object ~ .themelabel { color: #fff !important; box-shadow: inset 0 0 0 1px #fff; + box-shadow: inset 0 0 0 1px #fff9ef, inset 2px 2px 3px #7f3000; background: #f60 !important; } .themechoice .optbox:checked:active + object ~ .themelabel { color: #f60 !important; background: linear-gradient(to right, #eef, #fff, #eef) !important; + box-shadow: inset 0 0 0 1px #fff !important; } div#themesettings { @@ -4768,6 +4801,7 @@ div#langsettings { .langselect { /* containing box for lang selection */ width: 115px; + min-height: 64px; float: left; margin: 4px; text-align: center; @@ -4801,11 +4835,9 @@ div#langsettings { .langselect:hover > input + img { transform: scale(1.1); - border: 1px solid #f60 !important; } .langselect img[src^="/flags"] { - border: 1px solid #89f; margin-bottom: 42px; margin-left: 0; margin-top: -52px; @@ -4821,9 +4853,7 @@ div#langsettings { .langselect input[name="lang"]:checked + img { transform: scale(1.1); -webkit-transform: scale(1.1); - border: 1px solid #338; - border: 1px solid rgba(51, 51, 136, 0.7); - box-shadow: 0 0 0 1px #fff; + filter: drop-shadow(0 0 1px rgba(256, 100, 0, 0.1)); } .langselect:hover > input[name="lang"] + img + .ui_lang { @@ -4854,12 +4884,13 @@ div#langsettings { .langselect input[name="lang"]:active + img + .ui_lang { color: #fff !important; - box-shadow: inset 0 0 0 1px #fff; + box-shadow: inset 0 0 0 1px #fff9ef, inset 2px 2px 3px #7f3000; background: #f60 !important; } .langselect input[name="lang"]:checked:active + img + .ui_lang { color: #f60 !important; + box-shadow: inset 0 0 0 1px #fff; background: linear-gradient(to right, #eef, #fff, #eef) !important; } @@ -4878,8 +4909,6 @@ div.langselect br { margin-bottom: 34px !important; width: 40px; height: 40px; - border: none !important; - box-shadow: none; opacity: 0.9 !important; transform: none !important; filter: drop-shadow(0 0 1px #77d); @@ -4890,8 +4919,6 @@ div.langselect br { margin-bottom: 30px !important; width: 32px !important; height: 32px !important; - border: none !important; - box-shadow: none !important; opacity: 1 !important; transform: none !important; animation: glow 20s 10s infinite; @@ -4914,7 +4941,7 @@ div.langselect br { } 20% { - filter: drop-shadow(0 0 1px #f60); + filter: drop-shadow(0 0 2px #f60); } 50% { @@ -4922,7 +4949,7 @@ div.langselect br { } 80% { - filter: drop-shadow(0 0 1px #d40); + filter: drop-shadow(0 0 2px #d40); } 100% { @@ -5031,8 +5058,13 @@ table#addkeyring tr:last-child td { /* peers, profiles, tunnels */ .cells tt, #profilelist tt, tt a { - font-size: 8pt !important; - margin-left: 2px !important; + font-size: 8.5pt !important; + letter-spacing: 0.1em; +} + +img + tt { + margin-left: 4px !important; + letter-spacing: 0.1em; } /* end peers, profiles, tunnels dests */ @@ -5128,7 +5160,7 @@ table#addkeyring tr:last-child td { /* /tunnels */ tt a { - letter-spacing: 0.07em; + letter-spacing: 0.1em; } .tunnel_cap { @@ -5138,7 +5170,7 @@ tt a { border-radius: 2px; min-width: 12px; padding: 0 2px; - display:inline-block; + display: inline-block; margin: 1px 2px 1px 8px; text-align: center !important; text-shadow: 0 1px 1px #555; @@ -5297,6 +5329,7 @@ a.viewfullentry:hover { font-size: 11pt !important; letter-spacing: 0.08em; word-spacing: 0.1em; + background: #f6f6ff url(/themes/console/images/info/globe.png) 8px center no-repeat !important; background: url(/themes/console/images/info/globe.png) 8px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(to right, #fcfcff 5%, rgba(231, 231, 255, 0.8) 25%) !important; background-size: 18px 18px, 100% 100%, 100% 100% !important; padding: 8px 5px 8px 32px; @@ -5328,6 +5361,7 @@ a.viewfullentry:hover { text-transform: none; letter-spacing: normal; word-spacing: normal; + background: #f6f6ff; background: linear-gradient(to bottom, #fcfcff 50%, rgba(255, 255, 255, 0.6) 50%, rgba(240, 240, 255, 0.4)) !important; background-size: 100% 100%; padding: 8px 5px; @@ -5384,6 +5418,10 @@ a.viewfullentry:hover { font-size: 10pt; } +.leaseset th:last-child { + font-size: 9pt; +} + .leaseset th:last-child, .leaseset td:nth-child(2) { text-align: right; padding-right: 5px; @@ -5462,14 +5500,17 @@ a.viewfullentry:hover { } #noleasesets, #notinitialized, .netdbnotfound { - border: 1px solid #7778bf; - padding: 20px; - font-weight: bold; - background: #fafaff; margin-top: -6px; margin-bottom: 5px; + padding: 10px 20px; + font-weight: bold; text-align: center; color: #41465f; + border: 1px solid #7778bf; + box-shadow: 0 0 1px #ccf; + border-radius: 2px; + background: #f2f2ff; + background: linear-gradient(to right, #f2f2ff, #f8f8ff, #f2f2ff); } #notinitialized, .netdbnotfound { @@ -5651,7 +5692,7 @@ p:empty { /* empty paragraph nuke */ } .subheading b { - font-size: 10pt !important; + font-size: 9.5pt !important; } .sybil_distance th { @@ -5746,11 +5787,12 @@ img.unknownflag { /* end netdb */ ul#banlist { - background: #fafaff; + display: block; + padding: 5px 0; border: 1px solid #7778bf; border-radius: 2px; - display: block; - padding: 2px 0; + background: #fafaff; + text-align: center; -moz-columns: auto; -webkit-columns: auto; columns: auto; @@ -6007,6 +6049,7 @@ table#schedjobs { #schedjobs td:first-child { font-weight: bold; + color: #41465f; } #jobstats th:nth-child(n+2) { @@ -6019,6 +6062,7 @@ table#schedjobs { #jobstats tr:last-child td { padding: 5px; + color: #41465f; } #advconf { @@ -6159,6 +6203,7 @@ h3#ntcpcon, h3#udpcon { width: 100%; height: 600px; white-space: pre-wrap; + font-size: 9pt; } #help h2 { @@ -6208,7 +6253,7 @@ h3#ntcpcon, h3#udpcon { } #help code, #help tt { - font-size: 8pt; + font-size: 8.5pt; font-weight: bold; color: #050; } @@ -6298,7 +6343,9 @@ h3#ntcpcon, h3#udpcon { /* end mini faq */ #wrapperlogs pre { - background-size: 100% 100%, auto 50%, 100% 100% !important; + background-size: 100% 100%, auto 120px, 100% 100% !important; + height: 400px; + resize: vertical; } #fullhistory { @@ -6377,7 +6424,7 @@ h3#ntcpcon, h3#udpcon { .homelinkedit th:first-child, #sidebarconf th:first-child, #consolepass th:first-child { text-align: center; - background: url(/themes/console/images/buttons/delete.png) center center no-repeat, url(images/header.png) center center repeat-x #eef; + background: #f6f6ff url(/themes/console/images/buttons/delete.png) center center no-repeat !important; background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #fafaff 50%, rgba(252, 252, 255, 0.8) 50%, #e2e2ff 100%) #fafaff !important; font-size: 0 !important; width: 5%; @@ -6445,7 +6492,7 @@ table#plugininstall td:first-child { } h4#updateplugins { - background: #eef url(images/header.png) center center repeat-x; + background: #fcfcff !important; background: linear-gradient(to bottom, #fff 50%, rgba(238, 238, 255, 0.2) 50%, #eef 100%) #fff !important; border: 1px solid #7778bf; padding: 5px; @@ -6978,18 +7025,6 @@ b.netdb_transport { background-size: 16px auto, 100% 100% !important; } -@media screen and (-webkit-min-device-pixel-ratio:0) { -#jardump table { - border: 1px solid #7778bf !important; - border-bottom: none !important; - border-top: none !important; -} - -#jardump, #jardump tr { - border-left: none !important; - border-right: none !important; -} - .subheading.routerfiles { padding-left: 5px !important; background: url(/themes/console/images/eepsite.png) right 5px center no-repeat, linear-gradient(to right, #fafaff, #eef) !important; @@ -7003,35 +7038,6 @@ b.netdb_transport { background-size: 16px auto, 100% 100% !important; box-shadow: none !important; } -} - -#jardump th { - padding-top: 7px !important; - padding-bottom: 7px !important; - font-size: 10pt; -} - -#jardump th:nth-child(n+2) { - text-align: center; -} - -#jardump td { - border-right: 1px inset #ddf; - text-align: center; -} - -#jardump td:first-child { - padding-right: 3px; -} - -#jardump td:first-child, #jardump td:last-child { - text-align: left; -} - -#jardump td:nth-child(2) { - text-align: right; - font-style: italic; -} .revision, .sha256, .unsignedmod { -moz-user-select: all; @@ -7044,6 +7050,29 @@ b.netdb_transport { color: #fff; } +.unsignedmod::selection { + background: #f00 !important; + color: #fff; +} + +.revision tt::-moz-selection, .sha256 tt::-moz-selection { + background: #070 !important; + color: #fff !important; +} + +.revision tt::selection, .sha256 tt::selection { + background: #070 !important; + color: #fff !important; +} + +.revision br::-moz-selection, .sha256 br::-moz-selection { + background: transparent !important; +} + +.revision br::selection, .sha256 br::selection { + background: transparent !important; +} + #jardump tt { letter-spacing: -0.03em; font-size: 8pt !important; @@ -7078,14 +7107,6 @@ b.netdb_transport { display: block; } -#jardump td:first-child { - padding-left: 26px; - background-image: url(/themes/console/images/info/box.png); - background-position: 5px center; - background-repeat: no-repeat; - background-size: 16px 16px; -} - #jardump tr:hover td:first-child { background: url(/themes/console/images/info/box.png) 5px center no-repeat #ffd; background-size: 16px 16px; @@ -7104,6 +7125,46 @@ b.netdb_transport { background: transparent; } +#jardump th { + padding-top: 7px !important; + padding-bottom: 7px !important; + font-size: 9.5pt; +} + +#jardump th:nth-child(n+2) { + text-align: center; +} + +#jardump td { + border-right: 1px inset #ddf; + text-align: center; +} + +#jardump td:first-child { + padding-left: 26px; + padding-right: 3px; + white-space: nowrap; + background-image: url(/themes/console/images/info/box.png); + background-position: 5px center; + background-repeat: no-repeat; + background-size: 16px 16px; +} + +#jardump td:first-child, #jardump td:last-child { + text-align: left; +} + +#jardump td:nth-child(2) { + padding-right: 7px; + padding-left: 7px; + width: 5%; + white-space: nowrap; + color: #41465f; + text-align: right; + font-style: italic; + font-weight: bold; +} + .unsignedmod { display: inline-block; padding: 2px; @@ -7115,6 +7176,24 @@ b.netdb_transport { padding: 1px; } +@media screen and (-webkit-min-device-pixel-ratio:0) { +#jardump table { + border: 1px solid #7778bf !important; + border-bottom: none !important; + border-top: none !important; + width: calc(100% - 1px) !important; +} + +#jardump, #jardump tr { + border-left: none !important; + border-right: none !important; +} + +#jardump td:nth-child(3), #jardump td:nth-child(7) { + width: 10%; +} +} + /* end jardump */ /* custom radios/checkboxes for chrome/blink */ @@ -7399,7 +7478,7 @@ input[name="pluginURL"] { @media screen and (max-width: 1500px) { body { - margin: 5px 4px; + margin: 4px; } #sb_general td::after, #sb_shortgeneral td::after, #sb_advancedgeneral td::after, @@ -7457,6 +7536,16 @@ body { padding-bottom: 5px; height: 75%; } + +#profiles .tab:first-child, #profiles .tab2:first-child, #help .tab:first-child, #help .tab2:first-child, +#netdb .tab:first-child, #netdb .tab2:first-child, #debug .tab:first-child, #debug .tab2:first-child { + border-radius: 2px 0 0 2px; +} + +#profiles .tab:last-child, #profiles .tab2:last-child, #help .tab:last-child, #help .tab2:last-child, +#netdb .tab:last-child, #netdb .tab2:last-child, #debug .tab:last-child, #debug .tab2:last-child { + border-radius: 0 2px 2px 0; +} } @media screen and (min-width: 1500px) { @@ -7722,3 +7811,324 @@ _:-ms-lang(x), .tunnels_client th:first-child::after { /* end Edge/IE tweaks */ + + +/* TO DO: Merge with main classes */ + +.optionlist { + -moz-columns: 500px auto; + -webkit-columns: 500px auto; + columns: 500px auto; + padding-bottom: 1px; +} + +.optionlist label { + min-width: 300px; + break-inside: avoid; + page-break-inside: avoid !important; + -webkit-column-break-inside: avoid; +} + +th.options { + padding: 7px 5px !important; +} + +textarea[name="reseedURL"] { + height: 20px !important; + max-height: 20px !important; +} + +th.options { + font-size: 9pt !important; +} + +.options input[type="checkbox"] { + margin: 0 3px 0 0; +} + +#reseedconfig th label, #i2pupdates th label { + vertical-align: text-top; +} + +#reseedconfig .nowrap b, #externali2cp .nowrap b { + display: inline-block; + min-width: 120px; + margin: 0 3px 0 5px; + text-align: right; +} + +#reseedconfig th[colspan="2"], #i2pupdates th[colspan="2"] { + padding: 8px; + vertical-align: middle; +} + +#reseedconfig th label, #i2pupdates th label { + margin-right: 10px; +} + +#reseedconfig textarea, #i2pupdates textarea { + min-height: 76px !important; + height: 76px !important; + margin: 2px 6px 2px 3px !important; + padding: 3px 5px; +} + +#reseedconfig td { + vertical-align: middle; +} + +@media screen and (-webkit-min-device-pixel-ratio: 0) { +#reseedconfig .optbox[type="radio"] { + margin: 4px 4px 4px 15px !important; +} + +#reseedconfig .optbox[type="checkbox"] { + vertical-align: sub !important; +} + +#manualreseed th:last-child, #manualreseed td:last-child { + border-right: 1px solid #7778bf; +} +} + +#reseedconfig td:first-child label { + min-width: 200px; + white-space: nowrap; + display: inline-block; +} + +#resetreseed { + padding: 15px 0 0; +} + +/* +#externaltcp { + padding: 0; +} + + +#netconfig .infowarn, #netconfig .infohelp, #config_reseed tr:first-child .infohelp, #manualpeercontrol tr:nth-last-child(2) .infohelp, +#bandwidthconfig tr:nth-last-child(2) .infohelp, #clientconf.infowarn, #externali2cp .infowarn, #advconf .infohelp { + background-size: 22px 22px !important; + background-position: 8px center; + padding: 10px 10px 10px 37px !important; +} +*/ + +/* i2p version & environment */ + +#enviro, .configtable, #graphs table, #netdb table { + box-shadow: inset 0 0 4px 2px #eef; + background: repeating-linear-gradient(135deg, rgba(248,248,255,0.8) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px) #fff; +} + +#enviro tr:first-child td { + -moz-user-select: none !important; + -webkit-user-select: none !important; + user-select: none !important; +} + +@supports (text-justify: auto) { /* only Firefox 55 or newer */ +#enviro tr, .configtable tr, #pluginconfig table tr, #graphs tr, #netdb tr { + background: linear-gradient(to bottom, rgba(248,248,255,0.6) 50%, rgba(248,248,255,0.2)) !important; + box-shadow: inset 0 0 0 1px #fff; +} +} + +#sidebarconf tr:nth-child(odd), .homelinkedit tr:nth-child(odd), #clientconfig tr:nth-child(odd), #netdb tr:nth-child(odd), +#webappconfig tr:nth-child(odd), #configstats tr:nth-child(odd), #pluginconfig table tr:nth-child(even), #routerinfo tr { + background: linear-gradient(to bottom, rgba(240,240,255,0.6) 50%, rgba(240,240,255,0.4)) !important; +} + +#enviro:hover tr { + box-shadow: none; +} + +#enviro:hover b { + color: #333337 !important; +} + +#enviro td { + padding-top: 6px; + padding-bottom: 6px; +} + +#enviro td:last-child b { + margin-right: 1px; +} + +#cputype { + background: #557; + padding: 2px 4px; + margin: -1px 1px -1px 0; + display: inline-block; + font-weight: bold; + border-radius: 2px; + color: #fff; + text-transform: uppercase; +} + +#enviro:hover #cputype { + background: none; + color: #333337; +} + +/* end i2p version & environment */ + +#webappconfig tr:last-child td, #clientconfig tr:last-child td, #tunnelconfig tr:last-child td { + border-top: none !important; +} + +.messages #newsDisplay, .messages #newsStatus { + padding: 0 !important; +} + +.config_experimental:not(old) { + font-size: 0; +} + +.config_experimental::after { + content: ""; + display: inline-block; + background: url(/themes/console/images/info/experimental.png) right center no-repeat; + background-size: 16px 16px; + width: 16px; + margin-bottom: -2px; + height: 16px; +} + +#manualreseed, .formaction#consolepass { + margin-bottom: 10px; +} + +#themesettings, #themeoptions { + box-shadow: inset 0 0 0 1px #fff; +} + +#themeoptions { + margin-bottom: -1px; + padding-bottom: 6px; +} + +/* graphs */ + +.statimage { + animation: fadein 1s ease-in; /* prevent white background flicker on refresh */ +} + +@keyframes fadein { +from { + background: #f7f7ff; +} + +to { + background: #fff; +} +} + +#graphs td:first-child { + font-weight: normal; + text-align: left; + padding: 5px 0 0; +} + +@media screen and (min-width: 1060px) { +#graphs td:first-child { + padding: 5px 0; +} +} + +#graphs td b { + min-width: 150px; + text-align: right; + display: inline-block; + margin-right: 5px; +} + +#graphs .nowrap { + line-height: 300%; + display: inline-block; +} + +/* end graphs */ + +#pluginconfigtext + form { + float: right; + margin: -38px 6px 0 0; +} + +#pluginconfig table { + border: 1px solid #bbf; +} + +#manualreseed tr:last-child td.infohelp { + background: #fafaff url(/themes/console/images/info/box.png) 12px center no-repeat; + background: url(/themes/console/images/info/box.png) 12px center no-repeat, linear-gradient(to bottom, #fafaff 50%, rgba(220, 220, 255, 0.3)) repeat scroll 0 0%, rgba(0, 0, 0, 0) repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px); + padding: 15px 15px 15px 50px; + background-size: 28px 28px, 100% 100%; +} + +#manualpeercontrol tr:nth-child(3) td.infohelp { + background: #fafaff url(/themes/console/images/info/blocked.png) 12px center no-repeat; + background: url(/themes/console/images/info/blocked.png) 12px center no-repeat, linear-gradient(to bottom, #fafaff 50%, rgba(220, 220, 255, 0.3)) repeat scroll 0 0%, rgba(0, 0, 0, 0) repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px) !important; + padding: 15px 15px 15px 50px !important; + background-size: 28px 28px, 100% 100% !important; +} + +#netconfig tr:nth-last-child(3) .optionlist { + margin-bottom: -1px; +} + +.netdb_addresses { + line-height: 135%; +} + +#leasesetsummary td { + padding: 5px; +} + +.buckets br + br { + line-height: 5px; +} + +/* chrome/blink overrides */ + +@media screen and (-webkit-min-device-pixel-ratio: 0) { + +.main, table { + background: #f6f6ff !important; +} + +#help #sidebarhelp, #help #configurationhelp, #help pre, #help #faq, .debug_container { + background: #f3f3ff !important; +} + +#help #volunteer, #help #sidebarhelp, #help #configurationhelp, #help pre, #help #faq, #help #legal, +#help #reachabilityhelp, .debug_container, #help #advancedsettings { + background: #f8f8ff !important; +} + +#help #volunteer { + background: #f3f3ff url(/themes/snark/ubergine/images/hat.png) no-repeat right -3px bottom -3px !important; + background-size: auto 80%; +} + +#help tr:nth-child(even), .main tr:nth-child(even), #themeoptions { + background: #f0f0ff !important; +} + +#help tr:nth-child(odd), .main tr:nth-child(odd) { + background: #f8f8ff !important; +} + +.main tr, #themeoptions { + box-shadow: none !important; +} + +th.options .optbox { + vertical-align: sub !important; +} +} + +/* end chrome overrides */ + diff --git a/installer/resources/themes/console/light/i2ptunnel.css b/installer/resources/themes/console/light/i2ptunnel.css index 26927d2129..1c3815419d 100644 --- a/installer/resources/themes/console/light/i2ptunnel.css +++ b/installer/resources/themes/console/light/i2ptunnel.css @@ -111,7 +111,7 @@ textarea#statusMessages { border: none; box-shadow: none; font-family: "Droid Sans Mono", "Noto Mono", Consolas, "Lucida Console", "DejaVu Sans Mono", monospace; - font-size: 8pt; + font-size: 8.5pt; filter: none; } @@ -160,10 +160,10 @@ hr { filter: drop-shadow(0 0 1px #ccf); } -.freetext { +.freetext, .freetext.tunnelDescription { width: 150px; border: 1px solid #999daf; - padding: 4px; + padding: 4px !important; background: #fafaff; color: #33333f; border-radius: 2px; @@ -273,7 +273,7 @@ a.control { padding: 0; margin: 16px auto -8px auto !important; width: 100%; - filter: drop-shadow(0 0 1px #ccc); + filter: drop-shadow(0 0 1px #ccf); } .iframed .panel#clients { @@ -420,7 +420,7 @@ th { text-align: left; border-top: 1px solid #7778bf; border-bottom: 1px solid #7778bf; - font-size: 10pt; + font-size: 9.5pt; color: #41465f; } @@ -745,7 +745,7 @@ input:focus::-moz-placeholder { opacity: 0; } -input.tunnelName, input.tunnelDescriptionText, #userAgents { +input.tunnelName, input.tunnelDescriptionText, #userAgents, .freetext.tunnelDescription { width: 80%; min-width: 280px !important; text-overflow: ellipsis; @@ -907,8 +907,9 @@ input.tunnelName, input.tunnelDescriptionText, #userAgents { } textarea[name="accessList"], #hostField, #localDestination, .authentication { - width: calc(100% - 15px) !important; + width: calc(100% - 20px) !important; margin: 5px !important; + padding: 2px 4px; } .authentication { @@ -1253,3 +1254,29 @@ input[type="checkbox"][disabled]:checked, input[type="radio"][disabled]:checked, /* end custom radios/checkboxes */ +/* chrome/blink overrides */ + +@media screen and (-webkit-min-device-pixel-ratio: 0) { +textarea, input[type="text"], .displayText, *[readonly] { + filter: none !important; + box-shadow: 0 0 1px #ccf; +} + +table { + background: #f0f0ff !important; +} + +tr { + box-shadow: none !important; +} + +#throttler tr:nth-child(even) { + background: #f0f0ff !important; +} + +#throttler tr:nth-child(odd), .tunnelConfig tr, #wizardPanel tr, #registration tr { + background: #f8f8ff !important; +} +} + +/* end chrome overrides */ diff --git a/installer/resources/themes/console/midnight/console.css b/installer/resources/themes/console/midnight/console.css index e6c07fb3f7..3efe92511d 100644 --- a/installer/resources/themes/console/midnight/console.css +++ b/installer/resources/themes/console/midnight/console.css @@ -1421,6 +1421,10 @@ div.logo hr { .sb_notice { margin-bottom: -6px !important; } + +.sb_netstatus, .tunnelBuildStatus { + margin-bottom: -4px !important; +} } #sb_warning { @@ -1653,11 +1657,17 @@ a:active #sb_bandwidthgraph { background-position: left -72px top -24px !important; background-size: 280px 90px !important; background-repeat: no-repeat !important; - margin: -7px 0 -3px !important; + margin: -6px 0 -4px !important; height: 40px; filter: invert(1) sepia(1) hue-rotate(180deg); } +@media screen and (-webkit-min-device-pixel-ratio:0) { +#sb_graphcontainer { + margin-bottom: -5px !important; +} +} + @keyframes graphfadein { from { opacity: 0; @@ -1688,6 +1698,12 @@ to { /* status bar */ +@media screen and (-webkit-min-device-pixel-ratio:0) { +#sb_memoryBar { + margin-bottom: -6px !important; +} +} + .percentBarOuter { width: 194px; background: #000; @@ -2131,9 +2147,11 @@ div.confignav { } .tab2 { - background: #040033; - color: #c9ceff; padding: 5px 14px 7px; + color: #c9ceff; + box-shadow: inset 3px 3px 2px #000; + background: #040033; + background: linear-gradient(to bottom, #040033 50%, #020011 50%); } /* end topnav */ @@ -2498,7 +2516,7 @@ td img[src$="c=a1"], td img[src$="c=a2"] { } tt { - font: bold 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace; + font: bold 8.5pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace; color: #393; } @@ -2713,7 +2731,7 @@ h4 { } h1, h2, h3:not([id*="help"]), h4.app, h4.app2, .routersummary h3, .confignav { - background: linear-gradient(to bottom, #191729 0%, #000 50%) !important; + background: linear-gradient(to bottom, #191729, #000 75%) !important; } h2, h3, h4, .confignav { @@ -2769,6 +2787,10 @@ h2, h3, h4, .confignav { transform: scale(1.1); } +.langbox img:active { + transform: none !important; +} + .twocol { -moz-columns: 2 400px; -webkit-columns: 2 400px; @@ -3290,6 +3312,11 @@ a[name="chelp"]:hover, a[name="help"]:hover, a[name="chelp"]:active, a[name="hel margin-left: 0; } +.homelinkedit td:nth-child(2) img { + height: 20px; + width: 20px; +} + #config_homepage .delete { float: left; } @@ -3516,7 +3543,8 @@ td#themeselect { } .langselect img { - border: 1px solid #241f69; + width: 40px; + height: 40px; margin-bottom: 0; margin-left: -72px; margin-top: 7px !important; @@ -3526,13 +3554,12 @@ td#themeselect { .langselect input[name="lang"]:checked + img { width: 19px; height: 13px; - border: 1px solid #652787; margin-top: 6px !important; margin-left: -73px; } .langselect input[name="lang"]:hover + img { - box-shadow: 0 0 1px 1px #652787; + filter: drop-shadow(0 0 1px #652787); } .langselect input[name="lang"]:hover + img + div.ui_lang { @@ -3566,18 +3593,6 @@ td#themeselect { color: #652787; } -@media screen and (-webkit-min-device-pixel-ratio:0) { -.langselect img { - margin-left: -8px !important; - margin-top: -16px !important; -} - -.langselect input[name="lang"]:checked + img { - margin-left: -10px !important; - margin-top: -18px !important; -} -} - /* large flags */ .langselect img { @@ -3609,6 +3624,18 @@ td#themeselect { filter: drop-shadow(0 0 2px #652787); } +@media screen and (-webkit-min-device-pixel-ratio:0) { +.langselect img { + margin-left: -19px !important; + margin-top: -31px !important; +} + +.langselect input[name="lang"]:checked + img, .langselect input[name="lang"]:checked + #config_ui img[src="/flags.jsp?c=a1"] { + margin-left: -15px !important; + margin-top: -27px !important; +} +} + /* end large flags */ /* end flag as radio icons */ @@ -3833,16 +3860,14 @@ ul#banlist { background: #000; padding: 10px 10px 10px 0; margin: -1px 0 13px; - -moz-column-count: auto; - -moz-column-width: 260px; + -moz-columns: 300px auto; -moz-column-gap: 8px; -moz-column-rule: 1px dotted #443da0; - -webkit-column-count: auto; - -webkit-column-width: 260px; + -webkit-columns: 300px auto; -webkit-column-gap: 8px; -webkit-column-rule: 1px dotted #443da0; - column-count: auto; - column-width: 260px; + columns: 300px auto; + column-width: 300px; column-gap: 8px; column-rule: 1px dotted #443da0; } @@ -3856,8 +3881,7 @@ ul#banlist { border-bottom: 1px dotted #443da0; margin: 0 10px 3px; padding-top: 3px; - min-width: 250px; - width: 88%; + min-width: 300px; padding-bottom: 5px; break-inside: avoid; page-break-inside: avoid; @@ -4045,6 +4069,10 @@ h3#pconfig { white-space: nowrap; } +#webappconfig th:nth-child(2), #webappconfig th:nth-child(3) { + text-align: center; +} + #webappconfig th:last-child { text-align: left; padding-left: 5px; @@ -4057,6 +4085,10 @@ h3#pconfig { vertical-align: middle; } +.configtable#webappconfig tr:last-child, .configtable#tunnelconfig tr:last-child { + border-top: 1px inset #120f35 !important; +} + #pluginconfig td:nth-child(2) { border-right: 1px inset #120f35 !important; } @@ -4239,6 +4271,10 @@ table#tunnelconfig td:first-child { font-weight: bold; } +#tunnelconfig td:nth-child(n+2) { + text-align: left; +} + .formaction#tunnelconfigsave { margin-top: -32px !important; } @@ -4473,6 +4509,14 @@ table#externali2cp { /* /help */ +#help p, #help li, #help td { + line-height: 150% !important; +} + +#help li { + padding-right: 5px !important; +} + #help h3 { padding: 7px 10px; font-size: 10pt; @@ -4494,6 +4538,7 @@ div#volunteer { } #legal h2, #sidebarhelp h2, #volunteer h2, #reachabilityhelp h2, #configurationhelp h2, #faq h2 { + margin: -1px -21px 10px !important; padding: 10px; text-transform: uppercase; font-size: 11pt; @@ -4501,8 +4546,6 @@ div#volunteer { letter-spacing: 0.08em; word-spacing: 0.1em; border-radius: 0; - margin: -1px -21px 10px !important; - background: linear-gradient(to right, #000000, #010010 70%, #010013 90%); } #legal h2 + p { @@ -4510,6 +4553,7 @@ div#volunteer { } #sidebarhelp h3, #faq h3 { + margin: 0 -21px 10px !important; padding: 10px; text-transform: uppercase; font-size: 10.5pt; @@ -4517,8 +4561,6 @@ div#volunteer { letter-spacing: 0.08em; word-spacing: 0.1em; border-radius: 0; - margin: 0 -21px 10px !important; - background: linear-gradient(to right, #000000, #010010 70%, #010013 90%); border: 1px solid #443da0; } @@ -4875,7 +4917,7 @@ th > img[src^="/imagegen"] { /* scale down header images */ } .netdb_leases .tunnel_peer tt, .netdb_leases .tunnel_peer tt a { - font-size: 8pt !important; + font-size: 8.5pt !important; font-weight: bold !important; } @@ -5020,7 +5062,7 @@ font[color="#000099"] { /* info */ #logs li { list-style: none; - font: 8pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace; + font: 8.5pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace; line-height: 130%; text-align: left; display: inline-block; @@ -5133,7 +5175,7 @@ font[color="#000099"] { /* info */ } a[href^="configpeer?peer"]:not(old) { - font-size: 0; + font-size: 0 !important; filter: drop-shadow(0 0 1px #777); } @@ -5141,7 +5183,7 @@ a[href^="configpeer?peer"]::after { content: url(/themes/console/images/buttons/edit.png); vertical-align: top; margin: 0 0 0 4px !important; - line-height: 0; + line-height: 0 !important; } a[href^="configpeer?peer"]:hover { @@ -5765,12 +5807,16 @@ table#jardump { /* begin home page */ +#home .welcome h2 { + margin-top: 12px !important; +} + #homepanel { margin: 0 -8px; } h4.app, h4.app2 { - background: linear-gradient(to bottom, #191729 0%, #000 50%) !important; + background: linear-gradient(to bottom, #191729, #000 75%) !important; border: 1px solid #443da0; font-size: 10.5pt; font-variant: small-caps; @@ -5972,7 +6018,7 @@ div.app:hover .app img { border: none; width: 150px; background: #001 url(images/titles.png) center center; - background: linear-gradient(to bottom, #121225 50%, #000011 50%, #00000d 50%); + background: linear-gradient(to bottom, #121225 50%, #00000d 50%); border-radius: 0 0 2px 2px; border-top: 1px solid #443da0; white-space: nowrap; @@ -7065,8 +7111,8 @@ form[action="events"] { /* /tunnels */ -tt a { - letter-spacing: 0.07em; +img + tt { + letter-spacing: 0.15em; } .tunnel_cap { @@ -7869,13 +7915,13 @@ ul#banlist { @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; + margin-left: -20px !important; + margin-top: -30px !important; } .langselect input[name="lang"]:checked + img { - margin-left: -11px !important; - margin-top: -18px !important; + margin-left: -16px !important; + margin-top: -26px !important; } } @@ -8000,3 +8046,115 @@ _:-ms-lang(x), table + .statusnotes { /* end IE/Edge tweaks */ +/* TO DO: Merge with main classes */ + +.optionlist { + columns: 500px auto; + padding-bottom: 1px; +} + +.optionlist label { + min-width: 300px; + break-inside: avoid; + page-break-inside: avoid !important; + -webkit-column-break-inside: avoid; +} + +th.options, table#externali2cp th { + padding: 7px 10px !important; +} + +.options input[type="checkbox"], #i2pupdates .options .optbox { + margin: 0 3px 0 0; +} + +#i2pupdates textarea { + min-height: 76px !important; + height: 76px !important; + margin: 6px 0 6px 10px !important; + padding: 3px 5px; +} + +#reseedconfig textarea { + min-height: 76px !important; + height: 76px !important; + margin: 6px 10px 6px 0 !important; + padding: 3px 5px; +} + +#manualreseed { + margin-bottom: 10px !important; +} + +#resetreseed { + padding: 5px 5px 0 0; +} + +/* /configui */ + +#passwordheading { + margin-top: 0 !important; +} + +#langsettings { + margin-bottom: 10px !important; +} + +/* end /configui */ + +#pluginconfigtext + form { + float: right; + margin: -42px 6px 0 0; +} + +#externaltcp .nowrap:first-child { + margin: 5px 0 -18px !important; + display: inline-block; +} + +#cputype { + display: inline-block; + margin: -2px 2px -2px 0; + padding: 2px 5px; + font-weight: bold; + text-transform: uppercase; + border-radius: 2px; + background: #005; +} + +#wrapperlogs pre { + height: 300px; + resize: vertical; +} + +/* graphs */ + +#graphs td:first-child { + font-weight: normal; + text-align: left; + padding: 5px 0 0; +} + +@media screen and (min-width: 1060px) { +#graphs td:first-child { + padding: 5px 0; +} +} + +#graphs td b { + min-width: 150px; + text-align: right; + display: inline-block; + margin-right: 5px; +} + +#graphs .nowrap { + line-height: 300%; + display: inline-block; +} + +/* end graphs */ + +.buckets br + br { + line-height: 5px; +} diff --git a/installer/resources/themes/snark/classic/images/details.png b/installer/resources/themes/snark/classic/images/details.png index 845ba38235..e69ba0115a 100644 Binary files a/installer/resources/themes/snark/classic/images/details.png and b/installer/resources/themes/snark/classic/images/details.png differ diff --git a/installer/resources/themes/snark/classic/snark.css b/installer/resources/themes/snark/classic/snark.css index f513385b68..fce395e2f2 100644 --- a/installer/resources/themes/snark/classic/snark.css +++ b/installer/resources/themes/snark/classic/snark.css @@ -23,18 +23,17 @@ body { body.iframed { margin: 1px 0 !important; - background: transparent url(/themes/console/images/transparent.gif) !important; + background: transparent !important; } body.iframed { - background: transparent url(/themes/console/images/transparent.gif), - url(images/button_snark_hover.png) no-repeat, + background: url(images/button_snark_hover.png) no-repeat, url(images/button_snark_active.png) no-repeat, url(images/button_tracker_hover.png) no-repeat, url(images/button_tracker_active.png) no-repeat, url(images/button_forum_hover.png) no-repeat, url(images/button_forum_active.png) no-repeat !important; - background-size: 100% 100%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important; + background-size: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important; } * { @@ -78,7 +77,7 @@ body.iframed { font-weight: bold; min-width: 906px; margin: 0 0 -6px !important; - padding: 9px 0; + padding: 8px 0; text-align: center; letter-spacing: 0 !important; text-transform: uppercase !important; @@ -95,7 +94,7 @@ body.iframed { .iframed .snarknavbar { margin-top: -2px !important; - padding: 8px 0; + padding: 8px 0 7px; border-radius: 0; position: static; background: linear-gradient(to bottom, #fff, #eff2ff 75%) !important; @@ -115,7 +114,7 @@ body.iframed { border: 1px solid #88f; box-shadow: inset 0 0 0 1px #fff, 0 0 1px rgba(200,200,200,0.5); opacity: 0.85; - transition: ease all 0.1s; + transition: ease box-shadow 0.01s; } .snarkNav:link:last-child { @@ -146,7 +145,6 @@ body.iframed { opacity: 1; position: relative; z-index: 999; - transition: ease all 0.1s; } .nav_main:hover, .nav_main:focus { @@ -169,7 +167,7 @@ body.iframed { color: #fff !important; text-shadow: none; box-shadow: inset 4px 4px 3px #824b1b, 0 0 0 0 rgba(0,0,0,0) !important; - transition: ease all 0.1s; + transition: linear box-shadow 0.05s; } .nav_main:active { @@ -227,7 +225,7 @@ body.iframed { .snarkMessages li { margin-left: -15px; - font: bold 8pt "Droid Sans Mono", "Noto Sans Mono", "Lucida Console", "DejaVu Sans Mono", monospace; + font: bold 8.5pt "Droid Sans Mono", "Noto Sans Mono", "Lucida Console", "DejaVu Sans Mono", monospace; color: #4b4b76; } @@ -282,44 +280,6 @@ body.iframed { /* end screenlog */ -.ParentDir { - font-size: 8pt; - padding: 4px 0 0 6px; - text-align: left !important; - border: 1px solid #89f !important; - border-right: 0 !important; - border-left: 0 !important; - background: #fff; -} - -.ParentDir a { - font-weight: bold !important; - margin-left: -4px; -} - -.ParentDir img { - padding-left: 3px; -} - -.priority { - font-size: 8pt; - width: 160px !important; - vertical-align: middle; - white-space: nowrap; -} - -#setPriority th { - padding: 5px 10px !important; - text-align: right !important; -} - -#setPriority input[disabled], #setPriority input[disabled]:hover { - display: none; - cursor: not-allowed !important; - border: 1px solid #999; - background: linear-gradient(to bottom, #fff, #ddd); -} - .snarkTorrents { margin: 0; border: 1px solid #101; @@ -391,19 +351,19 @@ body.iframed { border: 1px solid transparent !important; } -.snarkTrackerDetails a:hover img, .snarkTrackerDetails img:hover, .snarkTrackerDetails a:focus img, -.snarkTorrentDetails a:hover img, .snarkTorrentDetails img:hover, .snarkTorrentDetails a:focus img, +.snarkTrackerDetails a:hover img, .snarkTrackerDetails a:focus img, +.snarkTorrentDetails a:hover img, .snarkTorrentDetails a:focus img, .snarkDirInfo td:first-child a:hover img, .snarkDirInfo td:first-child a:focus img { border: 1px solid #f60 !important; border-radius: 2px; - box-shadow: 0 0 1px #f60; background: #ddf; background: linear-gradient(to bottom, #fff 50%, #ddf 50%); filter: none !important; } .snarkTrackerDetails a:active img, .snarkTorrentDetails a:active img, .snarkDirInfo td:first-child a:active img { - box-shadow: inset 2px 2px 2px #99f; + box-shadow: inset 2px 2px 2px #337; + transform: scale(0.9); } .snarkGraphicStatus, .snarkTorrentStatus { @@ -642,7 +602,11 @@ tt { .snarkTorrentInfo td:first-child { width: 20px !important; - padding: 4px !important; + padding: 6px 4px !important; +} + +.snarkTorrentInfo b { + margin-right: 3px !important; } .snarkTorrentInfo input[type="submit"] { @@ -698,6 +662,30 @@ tt { /* torrent directory */ +.snarkDirInfo td { + padding-top: 6px !important; + padding-bottom: 6px !important; +} + +.snarkDirInfo .ParentDir { + font-size: 8pt; + padding: 2px 0 0 6px !important; + text-align: left !important; + border: 1px solid #89f !important; + border-right: 0 !important; + border-left: 0 !important; + background: #fff; +} + +.ParentDir a { + font-weight: bold !important; + margin-left: -4px; +} + +.ParentDir img { + padding-left: 3px; +} + .SnarkDirInfo { margin-top: 10px !important; margin-bottom: 0; @@ -784,9 +772,30 @@ tt { padding: 4px !important; } +.priority { + font-size: 8pt; + width: 160px !important; + vertical-align: middle; + white-space: nowrap; +} + +#setPriority th { + padding: 5px 10px !important; + text-align: right !important; +} + +#setPriority input[disabled], #setPriority input[disabled]:hover { + display: none; + cursor: not-allowed !important; + border: 1px solid #999; + background: linear-gradient(to bottom, #fff, #ddd); +} + .snarkFileStatus { - white-space:nowrap; width: 120px; + white-space:nowrap; + overflow: hidden; + text-overflow: ellipsis; } /* end torrent directory */ @@ -825,16 +834,12 @@ td:first-child { text-align: center !important; } -.snarkTorrentAction img:hover { - box-shadow: 0 0 1px 1px #f90; -} - .snarkTorrentAction input[type="image"] { padding: 3px !important; background: #339; background: linear-gradient(to bottom, #fff 50%, #ddf 50%); border-radius: 2px; - border: 1px solid #bbf !important; + border: 1px solid #99f !important; margin: 2px 1px; box-shadow: 0 0 1px #f2f2ff !important; height: 10px; @@ -843,7 +848,6 @@ td:first-child { .snarkTorrentAction input[type="image"]:hover, .snarkTorrentAction input[type="image"]:focus { border: 1px solid #f60 !important; background: linear-gradient(to bottom, #fff 50%, #eef 50%) !important; - box-shadow: 0 0 1px #f60 !important; filter: none !important; } @@ -1039,11 +1043,6 @@ tr:hover .percentBarText { margin: 0 10px 0 7px; } -.snarkDirInfo td { - padding-top: 6px !important; - padding-bottom: 6px !important; -} - .percentBarOuter { margin: 0 auto; border: 1px solid #99f; @@ -1098,13 +1097,22 @@ tr:hover .percentBarText { color: #005; text-shadow: 0 0 1px rgba(255,255,255,0.5); opacity: 0; - transition: ease opacity 0.2s; + transition: ease opacity 0.1s; line-height: 14px; } .percentBarText:hover, .percentBarText:focus { opacity: 0.75; - transition: ease opacity 0.2s; + transition: ease opacity 0.1s; +} + +.snarkTorrents .percentBarComplete { + display: inline-block; + width: 100%; + max-width: 60px; + margin-left: -14px; + text-align: right; + white-space: nowrap; } /* end download bars */ @@ -1176,7 +1184,11 @@ input.toggle_input:focus + .toggleview img { background: #fff !important; background: linear-gradient(to bottom, #fff 50%, #eff2ff 50%) !important; box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 0 #fff, 0 1px 1px #ddf; - transition: ease all 0.2s; + transition: ease box-shadow 0.05s; +} + +.configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active { + background: linear-gradient(to bottom, #eff2ff, #fff) !important; } .snarkConfigTitle a { @@ -1220,7 +1232,7 @@ _:-ms-lang(x), .snarkConfigTitle, label.toggleview, .configsectionpanel .snarkCo .snarkConfigTitle a:hover, .snarkConfigTitle a:focus, .toggleview:hover, .toggleview:focus { color: #f60 !important; text-shadow: none; - transition: ease all 0.2s; + transition: ease box-shadow 0.05s; } .snarkConfigTitle a:active, input:active + .toggleview { @@ -1327,7 +1339,7 @@ thead a:active img { } input[type="image"], a img { - filter: drop-shadow(0 0 1px #ccc); + filter: drop-shadow(0 0 1px #ccf); } input[type="image"]:hover, a img:hover, input[type="image"]:focus, a img:focus { @@ -1611,7 +1623,6 @@ img { vertical-align: middle; opacity: 1.0; border: none; - filter: drop-shadow(0 0 1px #ccc); } img:hover { @@ -1794,8 +1805,7 @@ img:hover { } .optbox[name="add_tracker_type"] { - cursor: pointer; - /* active cursor only for clickable radio icons */ + cursor: pointer; /* active cursor only for clickable radio icons */ } .snarkConfig input[type="submit"] { @@ -1868,6 +1878,46 @@ img:hover { /* section panels */ +.toggleview { + position: relative; + z-index: 10; +} + +@keyframes slide-in { +0% { + transform: translateY(-40px); +} + +100% { + transform: translateY(0); +} +} + +@keyframes fade-in { +0% { + filter: opacity(0); +} + +100% { + filter: opacity(1); +} +} + +.addtorrentsection table, .newtorrentsection table:not(#trackerselect) { + animation: slide-in 0.2s ease-out, fade-in 0.5s linear; + position: relative; + will-change: transform, filter; +} + +.iframed .addtorrentsection table, .iframed .newtorrentsection table:not(#trackerselect) { + animation: fade-in 0.2s ease-out; + will-change: filter; +} + +.snarkAddInfo code { + animation: fade-in 0.5s ease-out; +} + .mainsection, .newtorrentsection, .addtorrentsection, .configsection, .configsectionpanel { text-align: center; color: #0c153d; @@ -1961,7 +2011,7 @@ img:hover { } code { - font: bold 8pt "Droid Sans Mono", "Noto Sans Mono", "Lucida Console", "DejaVu Sans Mono", monospace; + font: bold 8.5pt "Droid Sans Mono", "Noto Sans Mono", "Lucida Console", "DejaVu Sans Mono", monospace; padding: 0 2px; color: #050; } @@ -2018,8 +2068,9 @@ input#toggle_createtorrent:checked + label + hr + table { display: none; } -.toggleview img, .configsection img { +.toggleview img, .configsection .snarkConfigTitle img { mix-blend-mode: luminosity; + will-change: transform; } label.toggleview img:hover, label.toggleview:hover img, .snarkConfigTitle a:hover img, input:focus + .toggleview img { @@ -2029,7 +2080,11 @@ label.toggleview img:hover, label.toggleview:hover img, .snarkConfigTitle a:hove label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:active img { transform: rotate(90deg); - transition: ease transform 0.3s 0s; + transition: linear transform 0.05s; +} + +.snarkConfigTitle a:active img { + transition: linear transform 0.1s; } .peerinfo td:first-child { @@ -2103,19 +2158,20 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac /* debug panel */ #dhtdebugPanel { + margin: 0 -2px; + padding-bottom: 13px; background: linear-gradient(to bottom, #fff, #eef); box-shadow: 0 0 2px 0 #ccc inset, 0 0 1px #bbb; border: 1px solid #89f; border-top: none; text-align: center; - padding-bottom: 13px; } #dhtDebugInner { text-align: left; padding: 5px; background: #efefff; - box-shadow: inset 0 0 0 1px #fff, 0 0 1px 0 rgba(160,160,160,0.5); + box-shadow: 0 0 1px 0 rgba(160,160,160,0.5); margin: -25px 0 -12px; } @@ -2124,11 +2180,13 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac } input#toggle_debug:not(checked) + label { - padding-bottom: 2px; + padding-top: 6px; + padding-bottom: 5px; } input#toggle_debug:not(checked) + label > img { margin-right: -2px !important; + margin-top: -3px !important; } input#toggle_debug:not(checked) + label + #dhtDebugInner { @@ -2695,7 +2753,7 @@ body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_ } } -@media screen and (min-width: 1400px) { +@media screen and (min-width: 1500px) { body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_dataDir"], select, textarea, textarea[name="i2cpOpts"], .snarkAddInfo, .snarkCommentInfo textarea { font-size: 10pt !important; } @@ -2727,7 +2785,7 @@ td.snarkTorrentDownloaded { } #dhtDebugInner { - margin-top: -26px !important; + margin-top: -23px !important; } } @@ -2940,3 +2998,40 @@ th a img { /* end responsive layout */ +.info_tracker { + margin: 0 4px 0 2px; + padding: 1px 6px 1px 18px; + display: inline-block; + white-space: nowrap; + max-width: 155px; + vertical-align: middle; + overflow: hidden; + text-overflow: ellipsis; + color: #bbf; + border-radius: 3px; + box-shadow: 0 0 0 1px #ccf; + background: #f8f8ff url(images/button_tracker.png) left 3px center no-repeat; + background-size: 14px auto; +} + +.info_tracker:hover, .info_tracker:hover a { + color: #f60; +} + +.info_tracker:hover { + box-shadow: 0 0 0 1px #aaf; + background: url(images/button_tracker_hover.png) left 3px center no-repeat, linear-gradient(to bottom, #fff 50%, #f2f2ff 50%) !important; + background-size: 14px auto, 100% 100% !important; +} + +.info_tracker:active, .info_tracker:active a { + color: #fff !important; +} + +.info_tracker:active { + color: #fff !important; + box-shadow: 0 0 0 1px #f60, inset 3px 3px 3px #420; + background: #f60 url(images/button_tracker_active.png) left 3px center no-repeat !important; + background-size: 14px auto !important; +} + diff --git a/installer/resources/themes/snark/dark/nocollapse.css b/installer/resources/themes/snark/dark/nocollapse.css index 8ed63aa644..2b07e849f6 100644 --- a/installer/resources/themes/snark/dark/nocollapse.css +++ b/installer/resources/themes/snark/dark/nocollapse.css @@ -8,44 +8,20 @@ input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent label.toggleview, label.toggleview:hover, label.toggleview:active, .toggle_input:focus + label.toggleview { background: #000 url(/themes/console/dark/images/header.png) repeat-x scroll center center !important; - background: linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000 56%) !important; + background: linear-gradient(to bottom, #1a261a, #000 75%) !important; box-shadow: inset 0 0 0 1px #000, 0 1px 1px #000 !important; mix-blend-mode: normal !important; cursor: default !important; } -label.toggleview img, .toggle_input:focus + label.toggleview img, label.toggleview:hover img, label.toggleview img:active, label.toggleview:active img { - margin: 1px !important; - padding: 3px !important; - border-radius: 50%; - background: #020; - background: linear-gradient(to bottom, #000 50%, #020 50%); +.toggleview img, .toggleview img:hover, .toggleview img:focus, .toggleview img:active, +.toggleview:hover img, .toggleview:focus img, .toggleview:active img, +.toggle_input:focus + label > img { + border: 2px solid #000 !important; + box-shadow: none !important; + background: #000; + background: linear-gradient(to bottom, #000 50%, #040 50%) !important; transform: none !important; - filter: sepia(1) hue-rotate(70deg) !important; + filter: drop-shadow(0 0 1px #000) !important; } -.toggleview { - margin-bottom: -6px !important; - padding: 3px 0 !important; - min-width: 120px !important; - width: 120px !important; - font-size: 0 !important; -} - -.configsection .snarkConfigTitle a { - padding: 2px 0 !important; - margin: 0 auto !important; - text-align: center !important; - display: block; -} - -.configsection .snarkConfigTitle a img { - margin: -4px -2px 0 0 !important; - padding: 0 !important; -} - -.toggleview img, .configsection .snarkConfigTitle img { - margin: 0 !important; - padding: 0 !important; - text-align: center !important; -} diff --git a/installer/resources/themes/snark/dark/snark.css b/installer/resources/themes/snark/dark/snark.css index de1f2fd33d..fc261f90e4 100644 --- a/installer/resources/themes/snark/dark/snark.css +++ b/installer/resources/themes/snark/dark/snark.css @@ -8,7 +8,7 @@ html { body { margin: 5px 3px; color: #ee9; - font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; + font-size: 9pt; background: url(/themes/console/dark/images/camotile2.png) top left; background-size: 175px 175px; } @@ -28,21 +28,20 @@ body { } body.iframed { - background: transparent url(/themes/console/images/transparent.gif) !important; + background: transparent !important; margin: 1px 0 !important; } /* preload top navigation mouseovers */ body.iframed { - background: url(/themes/console/images/transparent.gif), - url(images/button_snark_hover.png) no-repeat, + background: url(images/button_snark_hover.png) no-repeat, url(images/button_snark_active.png) no-repeat, url(images/button_tracker_hover.png) no-repeat, url(images/button_tracker_active.png) no-repeat, url(images/button_forum_hover.png) no-repeat, url(images/button_forum_active.png) no-repeat !important; - background-size: 100% 100%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important; + background-size: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important; } .page { @@ -88,6 +87,14 @@ body.iframed { outline: none; } +body, input, select, .snarkCommentInfo textarea, textarea[name="i2cpOpts"] { + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; +} + +.snarkMessages, tt, textarea, code { + font-family: "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace; +} + /* topnav */ .snarknavbar { @@ -98,6 +105,7 @@ body.iframed { margin: 0 0 -6px !important; padding: 9px 0 8px; text-align: center; + letter-spacing: 0.1em !important; border: 1px solid #494; box-shadow: inset 0 0 0 1px #000; box-shadow: inset 0 0 0 2px #000, inset 0 0 10px 3px rgba(0,8,0,0.7); @@ -119,35 +127,32 @@ _:-ms-lang(x), .snarknavbar { } .snarkNav:link, .snarkNav:visited { + margin: 0 -3px !important; + padding: 4px 7px 4px 22px !important; display: inline-block; + position: relative; line-height: 120%; + color: #3f3; + color: rgba(51, 255, 51, .6); font-size: 9pt; font-weight: bold; - text-decoration: none !important; - text-transform: uppercase !important; - letter-spacing: 0.1em; - margin: 0 -1px 0 -2px !important; - padding: 4px 7px 4px 22px !important; - color: #3f3; + text-transform: uppercase; text-shadow: 0 0 1px #000; + border: 1px solid #373; border-radius: 0; - border: 1px solid #494; box-shadow: inset 0 0 0 1px #000; - filter: drop-shadow(0 0 2px #000); - opacity: 0.75; - position: relative; + background-blend-mode: overlay, normal; } .snarkNav:link, .snarkNav:hover, .snarkNav:focus { background-size: 14px auto, 100% 100% !important; background-position: 7px center !important; background-repeat: no-repeat, repeat !important; - filter: drop-shadow(0 0 1px #000); + transition: ease border 0.1s, ease filter 0.3s; } .snarkNav:hover, .snarkNav:focus { - z-index: 10; - opacity: 1 !important; + background-blend-mode: normal, normal; } .snarkNav:link:last-child { @@ -158,20 +163,24 @@ _:-ms-lang(x), .snarknavbar { 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%); + background: url(images/button_snark.png) 7px center no-repeat, linear-gradient(to bottom, #171 0%, #131 50%, #000 51%); + background: url(images/button_snark.png) 7px center no-repeat, linear-gradient(to bottom, rgba(17, 119, 17, .75) 0%, rgba(17, 51, 17, .75) 50%, rgba(0, 0, 0, .75)); } .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%); + background: url(images/button_forum.png) 7px center no-repeat, linear-gradient(to bottom, #171 0%, #131 50%, #000 51%); + background: url(images/button_forum.png) 7px center no-repeat, linear-gradient(to bottom, rgba(17, 119, 17, .75) 0%, rgba(17, 51, 17, .75) 50%, rgba(0, 0, 0, .75)); } .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%); + background: url(images/button_tracker.png) 7px center no-repeat, linear-gradient(to bottom, #171 0%, #131 50%, #000 51%); + background: url(images/button_tracker.png) 7px center no-repeat, linear-gradient(to bottom, rgba(17, 119, 17, .75) 0%, rgba(17, 51, 17, .75) 50%, rgba(0, 0, 0, .75)); } .snarkNav:hover, .snarkNav:focus { + z-index: 10; color: #f50; border-radius: 0; box-shadow: inset 0 0 0 1px #000 !important; @@ -181,21 +190,21 @@ _:-ms-lang(x), .snarknavbar { .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%); + background-image: url(images/button_snark_hover.png), linear-gradient(to bottom, #510 0%, #530 50%, #000 51%); } .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%); + background-image: url(images/button_forum_hover.png), linear-gradient(to bottom, #510 0%, #530 50%, #000 51%); } .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%); + background-image: url(images/button_tracker_hover.png), linear-gradient(to bottom, #510 0%, #530 50%, #000 51%); } .snarkNav:link:active, .snarkNav:active { - box-shadow: inset 3px 3px 3px 3px #3f1a04 !important; + box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px 3px #3f1a04 !important; color: #fff !important; text-shadow: none; background-size: 14px auto !important; @@ -236,12 +245,12 @@ _:-ms-lang(x), .snarknavbar { margin: 0; padding: 3px 5px; width: auto; - height: 54px; + height: 52px; resize: none; overflow: hidden; line-height: 120%; text-align: left; - font: normal 8pt "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace; + font-size: 8.5pt; color: #69f; box-shadow: inset 0 0 0 1px #000; border-bottom: 1px solid #494; @@ -281,8 +290,9 @@ _:-ms-lang(x), .snarkMessages { } .snarkMessages li, .snarkMessages li a, .snarkTorrents tt, #ourDest tt { - font-size: 8pt !important; + font-size: 8.5pt !important; font-weight: bold; + line-height: 115%; } .snarkMessages li { @@ -322,10 +332,6 @@ _:-ms-lang(x), .snarkMessages { /* end screenlog */ -tt { - font-family: "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace; -} - .logshim { margin-top: -10px !important; } @@ -346,6 +352,8 @@ thead, tfoot { thead { border-bottom: 1px solid #101; + background: linear-gradient(to bottom, #003000, #000 75%) !important; + background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #004000, #000 75%) !important; } th { @@ -366,12 +374,6 @@ thead th { .iframed thead th { background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #004000, #000 75%) !important; - -} - -thead { - background: linear-gradient(to bottom, #003000, #000 75%) !important; - background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #004000, #000 75%) !important; } th:first-child { @@ -474,12 +476,17 @@ tfoot th { margin: 0 !important; } +.snarkTrackerDetails img { + max-width: 16px; + max-height: 16px; +} + .snarkDirInfo td:first-child img { margin: 0 2px !important; } -.snarkTrackerDetails a:hover img, .snarkTrackerDetails img:hover, .snarkTrackerDetails a:focus img, -.snarkTorrentDetails a:hover img, .snarkTorrentDetails img:hover, .snarkTorrentDetails a:focus img, +.snarkTrackerDetails a:hover img, .snarkTrackerDetails a:focus img, +.snarkTorrentDetails a:hover img, .snarkTorrentDetails a:focus img, .snarkDirInfo td:first-child a:hover img, .snarkDirInfo td:first-child a:focus img { border: 1px solid #f60 !important; border-radius: 2px; @@ -569,11 +576,27 @@ th.snarkTorrentStatus { .snarkTorrentInfo td:first-child { width: 20px !important; - padding: 3px 4px 4px!important; + padding: 5px 4px !important; } -.snarkTorrentInfo tr:nth-last-child(n+2) b { - margin-right: 2px; +.snarkTorrentInfo b { + margin-right: 3px; +} + +#torrentInfoStats td { + text-align: left !important; + padding: 6px 2px !important; + border-top: 1px solid #000; +} + +#torrentInfoStats img { + margin: 0 3px 0 5px !important; +} + +#torrentInfoStats span { + white-space: nowrap; + display: inline-block; + margin-right: 3px; } .snarkTorrentInfo input[type="submit"] { @@ -701,7 +724,7 @@ td.subHeaderPriority { background: #020; font-weight: bold; background: url(images/snarktopnav.png) repeat-x scroll center center #110011; - background-image: linear-gradient(to bottom, #030 0%, #020 50%, #000 51%, #000 100%); + background-image: linear-gradient(to bottom, #030 0%, #020 50%, #000 51%); text-align: center !important; padding: 0 1px !important; font-size: 7.5pt; @@ -782,6 +805,10 @@ td { white-space: nowrap; } +.snarkTorrentAction input { + transition: ease border 0.1s; +} + .snarkTorrentAction img { margin: 0 2px !important; } @@ -830,7 +857,7 @@ td { padding: 1px !important; } -.snarkTorrents tr:hover, .snarkDirInfo tr:hover, #trackerselect tr:nth-child(n+2):hover { +.snarkTorrents tr:hover, .snarkDirInfo tr:hover, #trackerselect tr:nth-child(n+2):hover, .trackerconfig tr:nth-child(n+2):hover { background: #030 !important; } @@ -996,8 +1023,7 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven { color: #dfd137; opacity: 0; text-shadow: 0 0 1px rgba(0,0,0,0.8); - transition: ease opacity 0.2s; - + transition: ease opacity 0.15s; } @media screen and (-webkit-min-device-pixel-ratio: 0) { @@ -1015,6 +1041,11 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven { float: left; } +.percentBarComplete { + max-width: 72px; + text-align: right; +} + /* end download bars */ .choked { @@ -1031,10 +1062,11 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven { } .thumb:hover { + margin: -5px 0 -5px -4px; max-height: 80px; max-width: 80px; - transition: ease all 0.3s 0s; - margin: -5px 0 -5px -4px; + background: #000 !important; + transition: ease-in-out all 0.3s 0.1s; filter: none !important; } @@ -1107,7 +1139,7 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven { .snarkConfigTitle:active, .toggleview:active { box-shadow: inset 3px 3px 3px 3px #000, 0 0 0 1px #000; - transition: ease all 0.1s; + transition: linear box-shadow 0.1s; } .snarkConfigTitle img, .toggleview img { @@ -1117,6 +1149,20 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven { filter: sepia(1) hue-rotate(70deg); } +#lowersection:hover .snarkConfigTitle img, #lowersection:hover .toggleview img { + will-change: transform; +} + +@keyframes spin { +from { + transform: rotate(0) +} + +to { + transform: rotate(90deg) +} +} + .toggleview:active, .snarkConfigTitle a:active { color: #f30 !important; } @@ -1126,8 +1172,9 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven { } .toggleview img:active, .toggleview:active img, .snarkConfigTitle a:active img { - transform: rotate(90deg); - transition: ease transform 0.3s; +/* transform: rotate(90deg); + transition: ease transform 0.1s;*/ + animation: spin ease 0.1s forwards !important; } .toggle_input:focus + label > img, .snarkConfigTitle a:focus img { @@ -1212,7 +1259,8 @@ input { background: #000; color: #494; margin: 2px 4px 2px 0; - font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; + font-size: 8pt; + font-weight: bold; cursor: pointer; } @@ -1250,7 +1298,8 @@ input[type=submit], input[type=submit]:visited, input.disabled:hover { background: #000; border: 1px outset #191; padding: 5px 10px !important; - font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; + font-size: 8pt; + font-weight: bold; min-width: 95px; text-align: center; filter: drop-shadow(0 0 1px #000); @@ -1308,7 +1357,7 @@ thead a:active img { padding: 4px !important; height: 9px; border: 1px solid #151 !important; - border-radius: 3px; + border-radius: 2px; box-shadow: inset 0 0 0 1px #000; background: #030; background: linear-gradient(to bottom, #030 50%, #010 50%); @@ -1435,7 +1484,7 @@ select { -webkit-appearance: none; appearance: none; color: #494; - font: 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; + font-size: 8pt; font-weight: bold; padding: 4px 16px 4px 4px; border-radius: 2px; @@ -1497,7 +1546,7 @@ textarea { padding: 1px 4px 0; border-radius: 2px; border: 1px solid #494; - font: 8pt "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace; + font-size: 8pt; } textarea:focus { @@ -1778,8 +1827,8 @@ _:-ms-lang(x), #trackerselect tr:last-child { border-top: 1px solid #494; } -.snarkConfig tr:nth-last-child(2) { - background: none; +.snarkConfig tr:nth-last-child(2), .snarkConfig tr:hover:nth-last-child(2) { + background: none !important; } .snarkConfig tr:nth-last-child(2) td, .configsectionpanel td[colspan="5"] { @@ -1796,6 +1845,40 @@ _:-ms-lang(x), #trackerselect tr:last-child { border: none !important; } +@keyframes slide-in { +0% { + transform: translateY(-50px); +} + +100% { + transform: translateY(0); +} +} + +@keyframes fade-in { +0% { + filter: opacity(0); +} + +20% { + filter: opacity(0); +} + +100% { + filter: opacity(1); +} +} + +.addtorrentsection table, .newtorrentsection table:not(#trackerselect) { + animation: fade-in 0.3s linear, slide-in 0.15s ease-out; + will-change: filter, transform; +} + +.iframed .addtorrentsection table, .iframed .newtorrentsection table:not(#trackerselect) { + animation: fade-in 0.1s linear; + will-change: filter; +} + .section, .mainsection, .newtorrentsection, .addtorrentsection, .configsection, .configsectionpanel { background: #000; border: 1px solid #494; @@ -1869,10 +1952,9 @@ _:-ms-lang(x), #trackerselect tr:last-child { } code { + padding: 0 2px; font-size: 8.5pt; color: #ff6; - padding: 0 2px; - font-family: "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace; } .snarkAddInfo code { @@ -1973,6 +2055,10 @@ input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent vertical-align: middle; } +.peerinfo .snarkTorrentDownloaded { + text-align: center !important; +} + /* debug */ .debuginfo td:first-child { @@ -2179,21 +2265,6 @@ td#bwHelp { /* end configs */ -#torrentInfoStats td { - text-align: left !important; - padding: 5px 2px !important; -} - -#torrentInfoStats img { - margin: 0 3px 0 5px !important; -} - -#torrentInfoStats span { - white-space: nowrap; - display: inline-block; - margin-right: 3px; -} - .knownTracker input[type="radio"], .knownTracker input[type="radio"][disabled], .knownTracker input[type="radio"]:hover, .knownTracker input[type="radio"]:focus { opacity: 0.3; cursor: default; @@ -2457,7 +2528,6 @@ input.toggle_input, input.toggle_input:checked { /* hide checkbox and use label } .snarkCommentInfo textarea { - font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; width: 100%; min-height: 64px; height: 64px; @@ -2769,7 +2839,7 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, code, textarea, input, input[ty } } -@media screen and (min-width: 1400px) { +@media screen and (min-width: 1500px) { body, .snarkTorrents td, .snarkAddInfo, th, td, code, textarea, input, input[type="submit"], input[type="reset"], select, button, a { font-size: 10pt !important; } @@ -2793,7 +2863,6 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, code, textarea, input, input[ty textarea[name="i2cpOpts"] { height: 26px; - font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; font-weight: bold; } @@ -2929,8 +2998,8 @@ th.snarkTorrentStatus a img, .snarkTorrentETA a img, .snarkTrackerDetails a img, text-overflow: ellipsis; } -.snarkTorrents th img { - max-height: 18px; +.snarkTorrents th img, .snarkTorrents th img, .snarkTorrents th a:hover img { + max-height: 16px !important; } .snarkTorrentUploaded, .snarkTorrentRateUp, .peerinfo, .debuginfo, .alwaysShow { @@ -3098,3 +3167,108 @@ th a img { /* end responsive layout */ +/* miminal tabs */ + +.toggleview, .configsection .snarkConfigTitle { + padding: 4px 0 !important; + min-width: 160px; + height: 24px !important; + text-align: center !important; +} + +.toggleview, .configsection .snarkConfigTitle a { + font-size: 0 !important; +} + +.configsection .snarkConfigTitle a img { + width: 16px !important; + height: 16px !important; + visibility: visible !important; +} + +.toggleview img, .configsection .snarkConfigTitle a img { + margin: -1px auto -21px !important; + padding: 3px !important; + display: block; + overflow: hidden; + text-align: center !important; + border: 2px solid #000; + border-radius: 50%; + background: #000; + background: linear-gradient(to bottom, #000 50%, #040 50%); +} + +.configsection .snarkConfigTitle a img { + margin-bottom: -23px !important; +} + +.toggleview:hover img, .configsection .snarkConfigTitle:hover img { + background-blend-mode: normal; + filter: drop-shadow(0 0 1px #f30); +} + +.toggleview:active img, .configsection .snarkConfigTitle:active img { + box-shadow: 0 0 0 2px #930; + box-shadow: 0 0 0 1px rgb(153, 51, 0, 0.7); + filter: 1px solid #930; +} + +.snarkConfig .snarkConfigTitle a { + display: inline-block; + width: 100%; +} + +/* end miminal tabs */ + +/* torrent sort indicator */ + +.snarkTorrents th a[href*="sort="]:hover::after, .snarkTorrents th a[href*="?p=1"]:hover::after { + content: "\23F6"; + display: inline-block; + margin-left: 2px; +} + +.snarkTorrents th a[href*="sort=-"]:hover::after { + content: "\23F7"; + display: inline-block; + margin-left: 2px; +} + +/* end torrent sort indicator */ + +.info_tracker { + margin: 0 4px 0 2px; + padding: 1px 6px 1px 18px; + display: inline-block; + white-space: nowrap; + max-width: 155px; + vertical-align: middle; + overflow: hidden; + text-overflow: ellipsis; + color: #bbf; + box-shadow: 0 0 0 1px #121; + background: #010 url(images/button_tracker.png) left 3px center no-repeat; + background-size: 14px auto; +} + +.info_tracker:hover, .info_tracker:hover a { + color: #f60; +} + +.info_tracker:hover { + box-shadow: 0 0 0 1px #343; + background: url(images/button_tracker_hover.png) left 3px center no-repeat, linear-gradient(to bottom, #000 50%, #020 50%) !important; + background-size: 14px auto, 100% 100% !important; +} + +.info_tracker:active, .info_tracker:active a { + color: #fff !important; +} + +.info_tracker:active { + color: #fff !important; + box-shadow: 0 0 0 1px #f60, inset 3px 3px 3px #420; + background: #f60 url(images/button_tracker_active.png) left 3px center no-repeat !important; + background-size: 14px auto !important; +} + diff --git a/installer/resources/themes/snark/light/snark.css b/installer/resources/themes/snark/light/snark.css index 5d9a660cc6..6459ffd6b6 100644 --- a/installer/resources/themes/snark/light/snark.css +++ b/installer/resources/themes/snark/light/snark.css @@ -6,14 +6,14 @@ body { color: #31334f; font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; - background: #a4a4cb url(/themes/console/light/images/tile2.png) center top fixed; + background: #a4a4cb url(/themes/console/light/images/tile2.png) center top scroll; background-size: 32px 32px; margin: 3px 4px; } /* preload top navigation mouseovers */ body { - background: url(images/tile2.png) fixed, + background: url(images/tile2.png) scroll, url(images/button_snark_hover.png) no-repeat, url(images/button_snark_active.png) no-repeat, url(images/button_tracker_hover.png) no-repeat, @@ -23,14 +23,20 @@ body { background-size: 32px 32px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } +@supports (text-justify: auto) { /* only Firefox 55 or newer */ +body { + background-attachment: fixed; + will-change: scroll-position; +} +} + body.iframed { - background: transparent url(/themes/console/images/transparent.gif) !important; + background: transparent !important; margin: 6px 0 0 !important; } body.iframed { - background: transparent url(/themes/console/images/transparent.gif), - url(images/button_snark_hover.png) no-repeat, + background: url(images/button_snark_hover.png) no-repeat, url(images/button_snark_active.png) no-repeat, url(images/button_tracker_hover.png) no-repeat, url(images/button_tracker_active.png) no-repeat, @@ -125,34 +131,46 @@ button::-moz-focus-inner, input::-moz-focus-inner { background: linear-gradient(to bottom, #fcfcff 51%, #f8f8ff 51%, #f2f2ff 100%); } +.snarknavbar:hover .snarkNav { + will-change: filter, box-shadow, border; +} + .snarkNav:link, .snarkNav:visited { + margin-right: -4px !important; + padding: 4px 10px 4px 24px !important; + display: inline-block; + position: relative; + line-height: 125%; + font-size: 9pt; + font-weight: bold; + color: #559; + letter-spacing: 0.08em; text-decoration: none !important; text-transform: uppercase !important; - padding: 4px 10px 4px 24px !important; - margin-right: -4px !important; - line-height: 125%; - letter-spacing: 0.08em; - font-weight: bold; - font-size: 9pt; - color: #559; + outline: none; border-radius: 0; border: 1px solid #7778bf; box-shadow: inset 0 0 0 1px #fff; - display: inline-block; - outline: none; filter: drop-shadow(0 0 1px #ccf); - position: relative; - transition: ease all 0.1s; + transition: ease-in box-shadow 0.1s; +} + +@media screen and (-webkit-min-device-pixel-ratio: 0) { +.snarkNav:link, .snarkNav:visited { + padding-top: 5px !important; + padding-bottom: 3px !important; +} } .snarkNav:link, .snarkNav:hover, .snarkNav:focus, .snarkNav:active { background-size: 14px auto, 100% 100% !important; background-position: 8px center; - transition: ease all 0.1s; + transition: ease-out box-shadow 0.1s; } .snarkNav:hover, .snarkNav:focus { z-index: 999; + transition: ease border 0.1s; } .snarkNav:last-child { @@ -213,8 +231,8 @@ button::-moz-focus-inner, input::-moz-focus-inner { .snarkNav:active { color: #fff !important; - box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px #333 !important; - border: 1px solid #7778bf; + box-shadow: inset 2px 2px 3px #7f3000 !important; + transition: ease box-shadow 0.1s; } .nav_main:active { @@ -235,14 +253,15 @@ 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-size: 8.5pt; text-align: left; margin: -2px 0 0; padding: 3px 5px 3px 5px; border-spacing: 0; overflow: hidden; color: #339; - height: 56px; + color: rgba(51, 51, 153, 0.8); + height: 57px; width: auto; min-width: 810px; background: #eef url(images/kitty.png) no-repeat scroll right bottom; @@ -264,7 +283,7 @@ button::-moz-focus-inner, input::-moz-focus-inner { .snarkMessages a:link, .snarkMessages a:visited { color: #3b77bf !important; - font-size: 8pt; + font-size: 8.5pt; } .snarkMessages a:hover { @@ -284,7 +303,6 @@ button::-moz-focus-inner, input::-moz-focus-inner { line-height: 120%; font-weight: bold; background: rgba(255, 255, 255, 0.25); - opacity: 0.9; mix-blend-mode: multiply; } @@ -330,6 +348,7 @@ button::-moz-focus-inner, input::-moz-focus-inner { a:link { color: #3b6bbf; + color: rgba(59, 107, 191, .85); text-decoration: none; font-weight: bold; word-wrap: break-word; @@ -338,6 +357,7 @@ a:link { a:visited { color: #2c4e8f; + color: rgba(44, 78, 143, 0.9); text-decoration: none; } @@ -349,16 +369,6 @@ a:active { color: #f30; } -pre { - width: 100%; - font: 8pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace; - padding: 0; - text-align: left !important; - height: 8px; - color: #35f; - font-weight: bold !important; -} - table { margin: 0 0 10px 0; border: 0; @@ -558,15 +568,16 @@ th.snarkGraphicStatus, th.snarkTorrentStatus { .snarkTrackerDetails img, .snarkTorrentDetails img, .snarkDirInfo td:first-child img { margin: 0; padding: 3px !important; + max-width: 16px; + max-height: 16px; border: 1px solid transparent !important; } -.snarkTrackerDetails a:hover img, .snarkTrackerDetails img:hover, .snarkTrackerDetails a:focus img, -.snarkTorrentDetails a:hover img, .snarkTorrentDetails img:hover, .snarkTorrentDetails a:focus img, +.snarkTrackerDetails a:hover img, .snarkTrackerDetails a:focus img, +.snarkTorrentDetails a:hover img, .snarkTorrentDetails a:focus img, .snarkDirInfo td:first-child a:hover img, .snarkDirInfo td:first-child a:focus img { border: 1px solid #f60 !important; border-radius: 2px; - box-shadow: 0 0 1px #f60; background: #ddf; background: linear-gradient(to bottom, #fff 50%, #ddf 50%); filter: none !important; @@ -575,6 +586,7 @@ th.snarkGraphicStatus, th.snarkTorrentStatus { .snarkTrackerDetails a:active img, .snarkTorrentDetails a:active img, .snarkDirInfo td:first-child a:active img { box-shadow: inset 2px 2px 2px #99f; + transform: scale(0.9); } .snarkTorrentName { @@ -587,12 +599,11 @@ th.snarkGraphicStatus, th.snarkTorrentStatus { width: 100%; word-break: break-all; line-height: 120%; - margin: 1px 0; - opacity: 0.85; + padding: 3px 0; } -tr:hover .snarkTorrentName a, tr:hover .snarkFileName a { - opacity: 1; +.snarkTorrents:hover .snarkTorrentName a { + will-change: opacity; } .snarkTorrentETA, .snarkTorrentUploaded, .snarkTorrentRateDown, .snarkTorrentRateUp { @@ -621,26 +632,27 @@ tr:hover .snarkTorrentName a, tr:hover .snarkFileName a { } .snarkTorrentAction input[type="image"], .snarkTorrents th:last-child input[type="image"] { - padding: 3px !important; - background: #339; - background: linear-gradient(to bottom, #fff 50%, #ddf 51%); - border-radius: 2px; - border: 1px solid #89f; - box-shadow: inset 0 0 0 1px #fff; margin: 2px; - filter: drop-shadow(0 0 1px #ddd); + padding: 3px !important; height: 10px; + opacity: 0.9; + border: 1px solid #89f; + border-radius: 2px; + box-shadow: inset 0 0 0 1px #fff; + background: #339; + background: linear-gradient(to bottom, #fff 50%, #ddf 50%); + filter: drop-shadow(0 0 1px #ddd); } .snarkTorrentAction input[type="image"]:hover, .snarkTorrentAction input[type="image"]:focus, .snarkTorrents th:last-child input[type="image"]:hover, .snarkTorrents th:last-child input[type="image"]:focus { - filter: hue-rotate(110deg); + opacity: 1; + border: 1px solid #f60; + background: linear-gradient(to bottom, #fff 50%, #eef 50%); } .snarkTorrentAction input[type="image"]:active, .snarkTorrents th:last-child input[type="image"]:active { - box-shadow: inset 3px 3px 3px #333; - box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px #333; - filter: hue-rotate(110deg) !important; + box-shadow: inset 0 0 0 1px #fff, inset 2px 2px 3px #557; } .snarkTorrentNoneLoaded, .snarkTorrentNoneLoaded:hover { @@ -698,7 +710,7 @@ tr:hover .snarkTorrentName a, tr:hover .snarkFileName a { margin: 0 3px; display: inline-block; letter-spacing: 0.1em; - font-size: 8pt !important; + font-size: 8.5pt !important; text-shadow: 0 1px 1px #333; } @@ -719,7 +731,7 @@ tr:hover .snarkTorrentName a, tr:hover .snarkFileName a { /* end main torrents listing */ td { - padding: 2px 4px; + padding: 3px 4px; color: #31334f; opacity: 1; font-size: 9pt; @@ -731,20 +743,28 @@ td { .snarkTorrentEven, .snarkTorrentInfo tr:nth-child(even), .snarkCommentInfo tr:nth-child(even), .snarkComments tr:nth-child(odd) { - background: #eef; background: repeating-linear-gradient(135deg, rgba(252,252,255,0.8) 2px, rgba(240, 240, 255, 0.8) 3px, #fafaff 5px) #fafaff; + background: #f8f8ff; } .snarkTorrentOdd, .snarkTorrentInfo tr:nth-child(odd), .snarkCommentInfo tr:nth-child(odd), .snarkComments tr:nth-child(even) { - background: #e0e0ff; background: repeating-linear-gradient(45deg, rgba(240,240,255,0.8) 2px, rgba(196, 196, 255, 0.3) 3px, #f6f6ff 5px) #f6f6ff; + background: #f0f0ff; } .snarkTorrentOdd td, .snarkTorrentEven td, .snarkCommentInfo tr, .snarkComments tr { + border-top: 1px solid rgba(200,200,255,0.6) !important; border-top: 1px solid #bbf !important; } +/* only Firefox 55 or newer */ +@supports (text-justify: auto) { +.snarkTorrents tr, .snarkTorrentInfo tr, .snarkDirInfo tr { + box-shadow: inset 0 0 0 1px #fff; +} +} + .snarkTorrents tr:hover, .snarkTorrents tr:hover td, .snarkDirInfo tr:hover { background: #ffd; box-shadow: none !important; @@ -795,6 +815,8 @@ tr:hover .percentBarText { text-align: left; white-space: nowrap; width: 140px; + overflow: hidden; + text-overflow: ellipsis; } /* download bars */ @@ -821,7 +843,7 @@ tr:hover .percentBarText { .percentBarOuter { background: #eef; background: repeating-linear-gradient(135deg, rgba(238, 238, 255,0.7) 1px, rgba(238, 238, 255, 0.7) 5px, rgba(221, 221, 255, 0.7) 6px, rgba(221, 221, 255, 0.7) 11px); - border: 1px solid #99f; + border: 1px solid #aaf; border-radius: 2px; box-shadow: 0 0 1px rgba(200,200,200,0.8); margin: 0 auto; @@ -831,7 +853,8 @@ tr:hover .percentBarText { border: none; border-radius: 2px; height: 100%; - box-shadow: inset 0 0 0 1px #ddf; + box-shadow: inset 0 0 0 1px #f2f2ff; + box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7); background: #bbf; background: linear-gradient(to right, rgba(255,255,0,0.1) 60px, rgba(0,255,0,0.1)), linear-gradient(to bottom, rgba(255, 255, 255,0.6) 0%, rgba(238, 238, 255, 0.6) 50%, rgba(200, 200, 255, 0.7) 50%, rgba(160, 160, 255, 0.7) 100%); } @@ -844,9 +867,9 @@ tr:hover .percentBarText { background: linear-gradient(to right, rgba(255,255,0,0.1) 40px, rgba(0,255,0,0.1)), linear-gradient(to bottom, rgba(255, 255, 255,0.6) 0%, rgba(238, 238, 255, 0.6) 50%, rgba(200, 200, 255, 0.7) 50%, rgba(160, 160, 255, 0.7) 100%); } -.percentBarInner.percentBarComplete { - background: transparent; - vertical-align: middle; +.percentBarComplete { + text-align: right; + max-width: 78px; } .percentBarText, .percentBarOuter { @@ -864,7 +887,7 @@ tr:hover .percentBarText { color: #00528f; text-shadow: 0 1px 1px rgba(255,255,255,0.8); opacity: 0; - transition: ease opacity 0.2s; + transition: ease opacity 0.1s; } @media screen and (-webkit-min-device-pixel-ratio: 0) { @@ -878,7 +901,7 @@ tr:hover .percentBarText { } .percentBarText:hover, .percentBarText:focus { - transition: ease opacity 0.2s; + transition: ease opacity 0.1s; } .percentBarOuterComplete .percentBarText { @@ -897,14 +920,14 @@ tr:hover .percentBarText { .thumb { max-width: 16px; - transition: ease all 0.3s 0s; + transition: ease-in-out all 0.3s 0.1s; } .thumb:hover { margin: 0; - max-height: 80px; - max-width: 80px; - transition: ease all 0.3s 0s; + max-height: 80px !important; + max-width: 80px !important; + transition: ease-in-out all 0.15s; } .snarkNewTorrent { @@ -921,21 +944,21 @@ tr:hover .percentBarText { min-height: 16px; } -.snarkConfigTitle:hover, .toggleview:hover, input.toggle_input:focus + .toggleview { - background: linear-gradient(to bottom, #fcfaf7 50%, #ffe8bf 50%, #efd9b3 100%); -} - .snarkConfigTitle a { font-size: 11pt !important; display: inline-block; width: 100%; margin-top: -1px; - transition: ease all 0.1s; + transition: ease all 0.05s; } .snarkConfigTitle:hover a, .snarkConfigTitle:focus a { color: #f60 !important; - transition: ease all 0.1s; + transition: ease all 0.05s; +} + +#lowersection:hover .toggleview, #lowersection:hover .configsection .snarkConfigTitle { + will-change: box-shadow; } .snarkConfigTitle, .toggleview, .configsectionpanel .snarkConfigTitle:hover { @@ -948,23 +971,26 @@ tr:hover .percentBarText { border-top: 0; border-radius: 0 0 3px 3px; background: #fff url(/themes/console/light/images/header.png) repeat-x scroll center center; - background: linear-gradient(to bottom, #fff 50%, #eef 51%); + background: linear-gradient(to bottom, #fff 50%, #eef 51%) !important; font-variant: small-caps !important; box-shadow: 0 1px 2px #ccf, inset 0 0 0 1px #fff, inset 0 0 0 1px #fff; display: inline-block; min-width: 260px; color: #559 !important; - transition: ease all 0.1s; } .iframed .snarkConfigTitle, .iframed .toggleview, .iframed .configsectionpanel .snarkConfigTitle:hover { - background: #e7e7ff linear-gradient(to bottom, #fff 50%, rgba(255, 255, 255, 0.6) 50%, rgba(240, 240, 255, 0.4)); + background: #e7e7ff linear-gradient(to bottom, #fff 50%, rgba(255, 255, 255, 0.6) 50%, rgba(240, 240, 255, 0.4)) !important; } .snarkConfigTitle img:hover { /* inert titles */ color: #40404f; } +.snarkConfigTitle:hover, .toggleview:hover, .snarkConfigTitle:active, .toggleview:active, input.toggle_input:focus + .toggleview { + background: linear-gradient(to bottom, #fcfaf7 50%, #ffe8bf 50%, #efd9b3 100%) !important; +} + @media screen and (-webkit-min-device-pixel-ratio:0) { .snarkConfigTitle, .snarkConfigTitle a, .toggleview, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover { @@ -988,8 +1014,7 @@ tr:hover .percentBarText { .snarkConfigTitle:active, .toggleview:active { color: #f30 !important; - box-shadow: 0 0 0 0 #fff, inset 0 0 0 1px #fff, inset 2px 2px 3px 1px #558; - transition: ease all 0.1s; + box-shadow: 0 0 0 0 #fff, inset 0 0 0 1px #fff, inset 2px 2px 3px #7f756f; } .snarkConfigTitle img, .toggleview img { @@ -998,6 +1023,10 @@ tr:hover .percentBarText { mix-blend-mode: luminosity; } +#lowersection:hover .snarkConfigTitle img, #lowersection:hover .toggleview img { + will-change: transform, filter; +} + .addtorrentsection .toggleview img { margin-top: -1px; } @@ -1011,7 +1040,7 @@ tr:hover .percentBarText { .snarkConfigTitle:active a img, .toggleview:active img { filter: drop-shadow(0 0 1px #f30) !important; transform: rotate(90deg); - transition: ease transform 0.3s 0s; + transition: linear transform 0.1s; } .configsectionpanel .snarkConfigTitle img, .configsectionpanel .snarkConfigTitle:hover img { @@ -1135,45 +1164,45 @@ input.r { } input[type=submit], a.control, input.disabled { - color: #227; - background: #fff; - background: linear-gradient(to bottom, #fff 50%, #ddf 50%); - border: 1px solid #7778bf; - padding: 6px 8px !important; - font: bold 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; margin: 6px 3px 6px 6px !important; - border-radius: 2px; + padding: 5px 8px !important; min-width: 90px; text-align: center; - box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ddd; + font: bold 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; + color: #227; text-shadow: 0 1px 1px #fff; + border: 1px solid #7778bf; + border-radius: 2px; + box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ddd; + background: #fff; + background: linear-gradient(to bottom, #fff 50%, #ddf 50%); filter: drop-shadow(0px 0 1px #ccf); } input[type=submit]:hover, input[type=submit]:focus, a.control:hover, a.control:focus { color: #f60; + text-shadow: none; border: 1px solid #559; + box-shadow: inset 0 0 0 1px #fff; background: #eef; background: linear-gradient(#fff 50%, #ffe8bf 50%, #efd9b3 100%); - box-shadow: inset 0 0 0 1px #fff; - text-shadow: none; } input[type=submit]:active, a.control:active { - background: #f60 !important; color: #fff !important; box-shadow: inset 3px 3px 4px #333; box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 4px #333; + background: #f60 !important; } a.control, a.controld { - border-radius: 2px; - font-weight: bold; margin: 6px 3px 6px 3px !important; - padding: 5px 8px 5px 5px !important; - white-space: nowrap; + padding: 5px 8px 4px 5px !important; display: inline-block; min-width: 0 !important; + white-space: nowrap; + font-weight: bold; + border-radius: 2px; } a.controld { @@ -1418,8 +1447,14 @@ img[src$="magnet.png"] { transform: rotate(-90deg); } +@media screen and (-webkit-min-device-pixel-ratio: 0) { +img[src$="magnet.png"] { + transform: none; +} +} + img[src$="details.png"] { - mix-blend-mode: luminosity; + opacity: 0.8; } .snarkGraphicStatus img { @@ -1436,10 +1471,50 @@ img[src$="details.png"] { padding-right: 5px; } +@keyframes slide-in { +0% { + transform: translateY(-40px); +} + +100% { + transform: translateY(0); +} +} + +@keyframes fade-in { +0% { + filter: opacity(0); +} + +100% { + filter: opacity(1); +} +} + +.addtorrentsection table, .newtorrentsection table:not(#trackerselect) { + animation: slide-in 0.2s ease-out, fade-in 0.6s ease-out; + position: relative; +} + +.addtorrentsection:hover table, .newtorrentsection:hover table:not(#trackerselect) { + will-change: filter, transform; +} + +.iframed .addtorrentsection table, .iframed .newtorrentsection table:not(#trackerselect) { + animation: fade-in 0.2s ease-out; +} + +.iframed .addtorrentsection:hover table, .iframed .newtorrentsection:hover table:not(#trackerselect) { + will-change: filter; +} + +.snarkAddInfo code { + animation: fade-in 0.7s ease-out; +} + .section, .mainsection .section, .mainsection { margin: 0; padding: 0; - color: #001; word-wrap: break-word; text-align: center; opacity: 1 !important; @@ -1494,6 +1569,7 @@ img[src$="details.png"] { form:last-child .configsectionpanel { margin-top: 10px; background: url(images/configuration.png) no-repeat scroll right center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #f4f4ff 10%, #f4f4ff 90%, rgba(224, 224, 255, 0.5)), repeating-linear-gradient(135deg, #fff 2px, rgba(224, 224, 255, 0.5) 3px, #f4f4ff 5px); + background-size: 84px 82px, 100% 100%, 100% 100%; } .configsectionpanel table { @@ -1583,12 +1659,8 @@ form:last-child .configsectionpanel { border-radius: 6px !important; } -#trackerselect tr:hover td:first-child { - border-radius: 3px 0 0 3px; -} - -#trackerselect tr:hover td:last-child { - border-radius: 0 3px 3px 0; +#trackerselect tr:last-child:hover td:nth-child(n+3) { + background: transparent; } /* end new torrent -> tracker select */ @@ -1673,19 +1745,6 @@ input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent display: table; } -/* display panels by default on webkit based browsers (midori fix) */ -/* -@media screen and (-webkit-min-device-pixel-ratio:0) { -input#toggle_addtorrent:not(checked) + label + hr + table, input#toggle_createtorrent:not(checked) + label + hr + table { - display: table; -} - -input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent:checked + label + hr + table { - display: none; -} -} -*/ - /* display by default in iframe to avoid overflow issue */ .iframed input#toggle_addtorrent:not(checked) + label + hr + table, .iframed input#toggle_createtorrent:not(checked) + label + hr + table { display: table; @@ -1709,6 +1768,10 @@ input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent padding-left: 0 !important; } +.peerinfo .snarkTorrentDownloaded { + text-align: center !important; +} + /* debug */ .debuginfo td { @@ -2118,10 +2181,6 @@ hr.debug:last-child { padding-right: 2px; } -.snarkCommentInfo td:last-child, .snarkComments td:last-child { -/* width: 1% !important;*/ -} - .snarkComments td { white-space: nowrap; } @@ -2393,6 +2452,10 @@ input[name="nofilter_dataDir"], textarea[name="i2cpOpts"] { .peerinfo, .debuginfo { display: none; } + +code, .snarkTorrents tt { + font-size: 8pt !important; +} } /* end mini-mode */ @@ -2402,6 +2465,10 @@ body, td, .snarkMessages li, .snarkMessages a, button, input, select, .snarkAddI font-size: 8pt !important; } +.snarkMessages li, .snarkMessages a { + font-weight: normal !important; +} + .snarkNav:link, .snarkNav:visited { font-size: 9pt !important; } @@ -2460,6 +2527,11 @@ b.alwaysShow { padding-left: 26px !important; } +.snarkMessages li { + font-weight: normal !important; + opacity: 1 !important; +} + .snarkTorrentDownloaded .percentBarText, .snarkTorrentDownloaded .percentBarOuter { width: 100px !important; } @@ -2478,6 +2550,12 @@ b.alwaysShow { @media screen and (min-width: 1200px) { .snarkNav:link, .snarkNav:visited { font-size: 10pt !important; + letter-spacing: 0.12em !important; +} + +.iframed .snarkNav:link { + padding-top: 5px !important; + padding-bottom: 3px !important; } .percentDownloaded { @@ -2502,7 +2580,7 @@ b.alwaysShow { } } -@media screen and (min-width: 1400px) { +@media screen and (min-width: 1500px) { body, .snarkAddInfo, .snarkCommentInfo textarea { font-size: 10pt !important; } @@ -2512,7 +2590,6 @@ code, tt { } .snarkMessages li, .snarkMessages a { - font-size: 8pt !important; line-height: 130%; } @@ -2575,7 +2652,7 @@ input[type="submit"] { } } -@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1400px) { +@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1500px) { .toggleview, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover { font-size: 12.5pt !important; padding: 4px 1px 4px !important; @@ -2604,3 +2681,43 @@ a, a:link, th, td, button, input, select, textarea { /* end responsive layout */ +.snarkTorrentInfo b { + margin-right: 3px; +} + +.info_tracker { + margin: 0 4px 0 2px; + padding: 1px 6px 1px 18px; + display: inline-block; + vertical-align: middle; + background: #fff url(images/button_tracker.png) left 3px center no-repeat; + background-size: 14px auto; + max-width: 155px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #bbf; + box-shadow: 0 0 0 1px #ccf; + border-radius: 3px; +} + +.info_tracker:hover, .info_tracker:hover a { + color: #f60; +} + +.info_tracker:hover { + background: url(images/button_tracker_hover.png) left 3px center no-repeat, linear-gradient(to bottom, #eef 50%, #bbf 50%) !important; + background-size: 14px auto, 100% 100% !important; +} + +.info_tracker:active, .info_tracker:active a { + color: #fff; +} + +.info_tracker:active { + color: #fff !important; + box-shadow: 0 0 0 1px #f60, inset 3px 3px 3px #420; + background: #f60 url(images/button_tracker_active.png) left 3px center no-repeat !important; + background-size: 14px auto !important; +} + diff --git a/installer/resources/themes/snark/midnight/nocollapse.css b/installer/resources/themes/snark/midnight/nocollapse.css index e8727bf1c5..757a223326 100644 --- a/installer/resources/themes/snark/midnight/nocollapse.css +++ b/installer/resources/themes/snark/midnight/nocollapse.css @@ -10,44 +10,18 @@ label.toggleview, label.toggleview:hover, label.toggleview:active, .toggle_input border: 1px solid #443da0 !important; background: #003 !important; background: linear-gradient(to bottom, #191729, #1f1e32 50%, #000 50%) !important; + background: linear-gradient(to bottom, #191729 40%, #000) !important; box-shadow: inset 0 0 0 1px #000 !important; text-shadow: 0 0 1px #000 !important; cursor: default !important; } -label.toggleview img, .toggle_input:focus + label.toggleview img, label.toggleview:hover img, label.toggleview img:active, label.toggleview:active img { - margin: 1px !important; - padding: 3px !important; - border-radius: 50%; - background: #020; - background: linear-gradient(to bottom, #443da0 50%, #191729 50%); - mix-blend-mode: normal !important; +.toggleview img, .toggleview img:hover, .toggleview img:focus, .toggleview img:active, +.toggleview:hover img, .toggleview:focus img, .toggleview:active img { + border: 2px solid #000 !important; + background: #000; + background: linear-gradient(to bottom, #002, #000 50%, #191729 50%, #14131f) !important; + box-shadow: none !important; transform: none !important; - filter: drop-shadow(0 1px 1px #000) !important; -} - -label.toggleview { - margin-bottom: -6px !important; - padding: 3px 0 !important; - min-width: 120px !important; - width: 120px !important; - font-size: 0 !important; -} - -.configsection .snarkConfigTitle a { - padding: 1px 0 !important; - margin: 0 auto !important; - text-align: center !important; - display: block; -} - -.configsection .snarkConfigTitle a img { - margin: -2px -2px 0 0 !important; - padding: 0 !important; -} - -.toggleview img, .configsection .snarkConfigTitle img { - margin: 0 !important; - padding: 0 !important; - text-align: center !important; + filter: drop-shadow(0 0 1px #000) !important; } diff --git a/installer/resources/themes/snark/midnight/snark.css b/installer/resources/themes/snark/midnight/snark.css index 1276dc515f..828ad6b9b2 100644 --- a/installer/resources/themes/snark/midnight/snark.css +++ b/installer/resources/themes/snark/midnight/snark.css @@ -5,7 +5,7 @@ body { font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, Helvetica, sans-serif; color: #c9ceff; background: #000; - margin: 7px 6px; + margin: 4px 2px; } /* preload top navigation mouseovers */ @@ -80,7 +80,7 @@ body.iframed { .snarknavbar { margin: 0 0 -6px; - padding: 14px 0; + padding: 12px 0; text-align: center; border: 1px solid #443da0; border-radius: 2px 2px 0 0; @@ -100,11 +100,15 @@ body.iframed { position: static; } +.snarknavbar:hover .snarkNav { + will-change: box-shadow; +} + .snarkNav:link, .snarkNav:visited { font-size: 9pt; font-weight: bold; margin: 0 -1px 0 -3px !important; - padding: 5px 7px 5px 26px !important; + padding: 4px 9px 4px 26px !important; text-decoration: none !important; letter-spacing: 0.15em; text-transform: uppercase !important; @@ -116,7 +120,7 @@ body.iframed { background: url(images/button_tracker.png) 9px center no-repeat, linear-gradient(to bottom, #181d4f 0%, #181d4f 50%, #001 50%, #001 100%); box-shadow: inset 0 0 0 1px #000, 0 0 1px #000; text-shadow: 0 0 1px #000; - transition: ease all 0.1s; + transition: ease box-shadow 0.1s; } .snarkNav:link:first-child { @@ -212,7 +216,7 @@ body.iframed { /* screenlog */ .snarkMessages { - font: normal 8pt "Droid Sans Mono", "Noto Mono", "DejaVu Sans Mono", "Lucida Console", monospace; + font: normal 8.5pt "Droid Sans Mono", "Noto Mono", "DejaVu Sans Mono", "Lucida Console", monospace; overflow: hidden; width: auto; height: 55px; @@ -266,7 +270,7 @@ body.iframed { .snarkMessages li, .snarkMessages a { font-weight: bold; - font-size: 8pt !important; + font-size: 8.5pt !important; } .snarkMessages img { @@ -422,7 +426,7 @@ tfoot tr:nth-child(n+1) { } .snarkTorrents tt { - font-family: "Droid Sans Mono", "Noto Mono", "Noto Mono", "DejaVu Sans Mono", "Lucida Console", monospace; + font: bold 8.5pt "Droid Sans Mono", "Noto Mono", "Noto Mono", "DejaVu Sans Mono", "Lucida Console", monospace; background: #2d103f; color: #fff; padding: 2px 3px; @@ -482,7 +486,7 @@ tfoot tr:nth-child(n+1) { .snarkTorrents td { line-height: 110%; text-align: left; - padding: 1px; + padding: 3px 1px; } .snarkTorrents td[colspan="10"] { @@ -548,7 +552,7 @@ th.snarkTorrentStatus { .snarkTorrentName { line-height: 110%; - padding-left: 3px !important; + padding-left: 4px !important; } .snarkTorrentName a, .snarkDirInfo .snarkFileName a { @@ -702,6 +706,10 @@ td.snarkTorrentAction input[type="image"] { font-weight: bold; } +.peerinfo .snarkTorrentDownloaded { + text-align: center !important; +} + /* end main torrent listing */ .snarkTorrentInfo img { @@ -715,7 +723,7 @@ td.snarkTorrentAction input[type="image"] { } .snarkTorrentInfo b { - margin-right: 2px !important; + margin-right: 3px !important; } .snarkTorrentInfo th { @@ -927,6 +935,8 @@ th.headerdownloaded { font-size: 8pt; text-align: left; width: 140px; + overflow: hidden; + text-overflow: ellipsis; } .snarkFileIcon { @@ -1111,6 +1121,11 @@ _:-ms-lang(x), .snarkTorrentOdd, .snarkTorrentOdd td, .SnarkTorrentEven, .SnarkT transition: ease opacity 0.2s; } +.percentBarComplete { + max-width: 77px; + text-align: right; +} + /* end download bars */ .choked { @@ -1127,10 +1142,18 @@ _:-ms-lang(x), .snarkTorrentOdd, .snarkTorrentOdd td, .SnarkTorrentEven, .SnarkT } .thumb:hover { + margin-left: -4px; max-width: 96px; max-height: 64px; - transition: ease all 0.3s; - margin-left: -4px; + background: #ddf !important; + transition: ease-in-out all 0.3s 0.1s + box-shadow: none !important; +} + +.thumb:active { + transition: none !important; + box-shadow: none !important; + filter: none !important; } .snarkNewTorrent { @@ -1147,6 +1170,8 @@ _:-ms-lang(x), .snarkTorrentOdd, .snarkTorrentOdd td, .SnarkTorrentEven, .SnarkT display: inline-block; } +/* section headings */ + .snarkConfigTitle, .toggleview { font-size: 10pt; font-weight: bold; @@ -1237,13 +1262,17 @@ _:-ms-lang(x), .snarkTorrentOdd, .snarkTorrentOdd td, .SnarkTorrentEven, .SnarkT color: #4f0519 !important; } +#lowersection:hover .snarkConfigTitle img, #lowersection:hover .toggleview img { + will-change: transform; +} + .snarkConfigTitle a:hover img, .snarkConfigTitle a:focus img, .toggleview:hover img, .toggleview:focus img { filter: drop-shadow(0 0 1px #652787); } .snarkConfigTitle a:active img, .toggleview:active img { transform: rotate(90deg); - transition: ease transform 0.3s; + transition: ease transform 0.1s; } .snarkConfigTitle img, .toggleview img { @@ -1252,6 +1281,8 @@ _:-ms-lang(x), .snarkTorrentOdd, .snarkTorrentOdd td, .SnarkTorrentEven, .SnarkT filter: drop-shadow(0 0 1px #000); } +/* end section headings */ + .snarkConfig { font-size: 10pt; width: 100%; @@ -1296,7 +1327,7 @@ a:hover, a:focus { } a:active { - color: #CF0039; + color: #cf0039; } input { @@ -1403,7 +1434,8 @@ input[type="image"]:hover, a img:hover, input[type="image"]:focus, a img:focus { filter: saturate(200%) drop-shadow(0 0 2px #652787) !important; } -thead a img:hover, thead a img:focus, thead a:hover img, thead a:focus img { +thead a img:hover, thead a img:focus, thead a:hover img, thead a:focus img, +thead a::after:hover img, thead a::after:focus img { filter: saturate(200%) hue-rotate(80deg) drop-shadow(0 0 2px #652787) !important; } @@ -1878,6 +1910,46 @@ input[name="nofilter_commentsName"] { border: none !important; } +@keyframes slide-in { +0% { + transform: translateY(-50px); +} + +100% { + transform: translateY(0); +} +} + +@keyframes fade-in { +0% { + filter: opacity(0); +} + +20% { + filter: opacity(0); +} + +100% { + filter: opacity(1); +} +} + +.addtorrentsection table, .newtorrentsection table:not(#trackerselect) { + animation: fade-in 0.3s linear, slide-in 0.15s ease-out; +} + +#lowersection:hover .addtorrentsection table, #lowersection:hover .newtorrentsection table:not(#trackerselect) { + will-change: filter, transform; +} + +.iframed .addtorrentsection table, .iframed .newtorrentsection table:not(#trackerselect) { + animation: fade-in 0.1s linear; +} + +#lowersection:hover .iframed .addtorrentsection table, #lowersection:hover .iframed .newtorrentsection table:not(#trackerselect) { + will-change: filter; +} + .mainsection { margin: 0; padding: 0; @@ -1980,7 +2052,7 @@ form:last-child > .configsectionpanel { code { font-family: "Droid Sans Mono", "Noto Mono", "DejaVu Sans Mono", "Lucida Console", monospace; - font-size: 8pt; + font-size: 8.5pt; font-weight: bold; padding: 0 2px; color: #7166ff; @@ -2268,7 +2340,7 @@ hr.debug:last-child { td#bwHelp { background: url(images/infocircle.png) left 12px center no-repeat; background-size: 14px auto; - padding-left: 26px !important; + padding-left: 30px !important; width: 90%; line-height: 100%; } @@ -2472,10 +2544,6 @@ td#bwHelp a { padding-right: 2px; } -.snarkCommentInfo td:last-child, .snarkComments td:last-child { -/* width: 1% !important;*/ -} - .snarkComments td { white-space: nowrap; } @@ -2748,10 +2816,10 @@ input.trackerhome, input.trackerannounce, .knownTracker a, #trackerselect a { } } -@media screen and (max-width: 1400px) { +@media screen and (max-width: 1500px) { .iframed .snarkMessages { margin-top: -4px; -} +} .addtorrentsection, .newtorrentsection, .configsection { margin-left: 0; @@ -2793,15 +2861,24 @@ a, th, thead th, tfoot th, td, select, select option, .snarkAddInfo, .snarkFileN } } -@media screen and (min-width: 1400px) { +@media screen and (min-width: 1500px) { a, th, thead th, tfoot th, td, select, select option, .snarkAddInfo, .snarkFileName, textarea, input[name="nofilter_dataDir"], input { font-size: 10pt !important; } -code, tt { +code, tt, .snarkMessages li { font-size: 9pt !important; } +.snarkMessages { + height: 58px !important; +} + +.snarkNav:link { + padding-top: 4px !important; + padding-bottom: 4px !important; +} + .snarkNav:link:first-child { padding-left: 28px !important; } @@ -2899,3 +2976,120 @@ code, tt { /* end responsive layout */ +/* torrent sort indicator */ + +.snarkTorrents th a[href*="sort="]:hover::after { + content: "\23F6"; + display: inline-block; + margin-left: 2px; + font-size: 10pt; + color: #b3b; +} + +.snarkTorrents th a[href*="sort=-"]:hover::after { + content: "\23F7"; + display: inline-block; + margin-left: 2px; + font-size: 10pt; + color: #b3b; +} + +.snarkTorrents th a[href*="sort=-12"]:hover::after { + content: none !important; +} + +/* end torrent sort indicator */ + +.info_tracker { + margin: 0 4px 0 2px; + padding: 1px 6px 1px 18px; + display: inline-block; + white-space: nowrap; + max-width: 155px; + vertical-align: middle; + overflow: hidden; + text-overflow: ellipsis; + color: #bbf; + box-shadow: 0 0 0 1px #114; + background: #001 url(images/button_tracker.png) left 3px center no-repeat; + background-size: 14px auto; +} + +.info_tracker:hover, .info_tracker:hover a { + color: #652787; +} + +.info_tracker:hover { + box-shadow: 0 0 0 1px #652787; + background: url(images/button_tracker_hover.png) left 3px center no-repeat, linear-gradient(to bottom, #000 50%, #002 50%) !important; + background-size: 14px auto, 100% 100% !important; +} + +.info_tracker:active, .info_tracker:active a { + color: #fff !important; +} + +.info_tracker:active { + color: #fff !important; + box-shadow: 0 0 0 1px #652787, inset 3px 3px 3px #1f002f; + background: #652787 url(images/button_tracker_active.png) left 3px center no-repeat !important; + background-size: 14px auto !important; +} + +/* miminal tabs */ + +.toggleview, .configsection .snarkConfigTitle { + padding: 5px 0 3px !important; + min-width: 200px; + height: 24px !important; + text-align: center !important; +} + +.configsection .snarkConfigTitle { + padding-bottom: 2px !important; +} + +.toggleview, .configsection .snarkConfigTitle a { + font-size: 0 !important; +} + +.configsection .snarkConfigTitle a img { + width: 16px !important; + height: 16px !important; + visibility: visible !important; +} + +.toggleview img, .configsection .snarkConfigTitle a img { + margin: -2px auto -21px !important; + padding: 3px !important; + display: block; + overflow: hidden; + text-align: center !important; + border: 2px solid #000; + border-radius: 50%; + background: #000; + background: linear-gradient(to bottom, #002, #000 50%, #1f1e32 50%, #191729); +} + +.configsection .snarkConfigTitle a img { + margin-bottom: -23px !important; + margin: -1px auto -23px !important; +} + +.toggleview:hover img, .configsection .snarkConfigTitle:hover img { + background-blend-mode: normal; + filter: drop-shadow(0 0 2px #652787); + background: linear-gradient(to bottom, #008, #006 50%, #00f 50%, #009); +} + +.toggleview:active img, .configsection .snarkConfigTitle:active img { + box-shadow: 0 0 0 2px #652787; + filter: 1px solid #652787; +} + +.snarkConfig .snarkConfigTitle a { + display: inline-block; + width: 100%; +} + +/* end miminal tabs */ diff --git a/installer/resources/themes/snark/ubergine/snark.css b/installer/resources/themes/snark/ubergine/snark.css index a06517c0cc..166357b843 100644 --- a/installer/resources/themes/snark/ubergine/snark.css +++ b/installer/resources/themes/snark/ubergine/snark.css @@ -3,7 +3,7 @@ /* Author: dr|z3d */ body { - background: #130313 url(images/graytile.png) fixed left top / 96px 96px; + background: #130313 url(images/graytile.png) scroll left top / 96px 96px; color: #ddd; font: 8pt "DejaVu Sans", Verdana, "Noto Sans", Ubuntu, Helvetica, sans-serif; } @@ -27,14 +27,20 @@ body.iframed { } body.iframed:not(old) { - background: url(/themes/console/images/transparent.gif), - url(images/button_snark_hover.png) no-repeat, + background: transparent url(images/button_snark_hover.png) no-repeat, url(images/button_snark_active.png) no-repeat, url(images/button_tracker_hover.png) no-repeat, url(images/button_tracker_active.png) no-repeat, url(images/button_forum_hover.png) no-repeat, url(images/button_forum_active.png) no-repeat !important; - background-size: 100% 100%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important; + background-size: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important; +} + +@supports (text-justify: auto) { /* only Firefox 55 or newer */ +body { + background-attachment: fixed; + will-change: scroll-position; +} } .page { @@ -44,7 +50,7 @@ body.iframed:not(old) { padding: 10px 10px 0; border-radius: 4px; border: 1px solid #101; - box-shadow: inset 0 0 3px 0 #101, 0 0 2px 3px rgba(0,0,0,0.4); + box-shadow: inset 0 0 3px 0 #101, 0 0 2px 3px rgba(16,0,16,0.4); } .iframed .page { @@ -73,11 +79,11 @@ body.iframed:not(old) { .snarknavbar { margin: -10px 0 10px 0 !important; - padding: 15px 10px 13px; + padding: 15px 10px 14px; border: 1px solid #101; border-radius: 0 0 4px 4px; box-shadow: inset 0 0 0 1px #3f173f, inset 0 0 3px 1px #212; - filter: drop-shadow(0 1px 4px #000); + filter: drop-shadow(0 1px 4px #101); background: #101 url(images/snarktopnav.png) repeat-x scroll center center; background: linear-gradient(to bottom, #522852, #4a2449 11%, #321831 33%, #281428 51%, #1c0e1c 52%, #101 54%); min-width: 600px; @@ -101,31 +107,46 @@ _:-ms-lang(x), .snarknavbar { border-radius: 0; box-shadow: inset 0 0 1px 0 #ffeffd; filter: none; - background: linear-gradient(to bottom, #522852, #4a2449 11%, #321831 33%, #281428 50%, #1c0e1c 50%, #101 54%); + background: linear-gradient(to bottom, #522852, #4a2449 11%, #321831 33%, #281428 49%, #1c0e1c 50%, #101 54%); position: static; } .snarkNav:link, .snarkNav:visited { + margin: -5px -4px -5px 0; + padding: 4px 10px 4px 29px !important; display: inline-block; line-height: 130%; + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, sans-serif; + font-size: 10.5pt; + font-weight: bold; + color: #f70; + letter-spacing: 0.11em; text-decoration: none !important; text-transform: uppercase !important; text-shadow: 0 0 1px #000; - padding: 5px 12px 5px 29px !important; - margin: -5px -4px -5px 0; - letter-spacing: 0.11em; - font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, sans-serif; - font-weight: bold; - font-size: 10pt; - color: #f70; + outline: none; + border: 1px solid #730; + border-radius: 0; + box-shadow: 0 0 1px 0 #000, inset 0 0 0 1px rgba(16, 0, 16, 0.7); background: #310 url(images/button_tracker.png) 11px center no-repeat; background: url(images/button_tracker.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%; - padding: 4px 10px 4px 29px !important; - border-radius: 0; - box-shadow: 0 0 1px 0 #000, inset 0 0 0 1px rgba(16, 0, 16, 0.7); - outline: none; - border: 1px solid #730; +} + +.iframed .snarkNav:link, .iframed .snarkNav:visited { + padding: 3px 10px 3px 29px !important; +} + +@supports (text-justify: auto) { +.iframed .snarkNav:link, .iframed .snarkNav:visited { + padding: 4px 10px 2px 29px !important; +} +} + +@media screen and (-webkit-min-device-pixel-ratio:0) { +.iframed .snarkNav:link, .iframed .snarkNav:visited { + padding-bottom: 3px !important; +} } _:-ms-lang(x), .snarkNav:link, .snarkNav:visited { @@ -222,7 +243,7 @@ _:-ms-lang(x), .snarkNav:last-child[href="/i2psnark/"] { /* screenlogger */ .snarkMessages { - font: bold 8pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace !important; + font: bold 8.5pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace !important; text-align: left; margin: 0 0 10px 0; padding: 3px 5px; @@ -231,7 +252,7 @@ _:-ms-lang(x), .snarkNav:last-child[href="/i2psnark/"] { border: 1px solid #101; overflow: hidden; color: #2c6aef; - height: 50px; + height: 49px; width: auto; width: calc(100% - 12px); background: #2a192a url(images/hat.png) no-repeat scroll right center; @@ -280,6 +301,7 @@ _:-ms-lang(x), .snarkNav:last-child[href="/i2psnark/"] { margin-left: -18px; padding-left: 10px; padding-right: 10px; + line-height: 110%; } .snarkMessages li::before { @@ -290,7 +312,7 @@ _:-ms-lang(x), .snarkNav:last-child[href="/i2psnark/"] { height: 11px; background-size: 9px 9px; margin-left: -6px; - margin-right: 2px; + margin-right: 1px; } .snarkMessages img { @@ -315,18 +337,6 @@ _:-ms-lang(x), .snarkNav:last-child[href="/i2psnark/"] { /* end screenlogger */ -/* -pre { - width: 100%; - font: 8pt "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", monospace !important; - padding: 0; - text-align: left !important; - height: 8px; - color: #35f; - font-weight: bold !important; -} -*/ - table { margin: 0 0 10px 0; border: 0; @@ -347,6 +357,10 @@ thead th, .snarkTorrentInfo th { border-bottom: 1px solid #101 !important; } +.snarkTorrents thead { + filter: drop-shadow(0 1px 1px #101); +} + th { padding: 4px 2px 4px 4px; font-size: 8pt; @@ -370,11 +384,12 @@ tfoot td:first-child { text-align: center; } -.ParentDir { - background: #351933; +.mainsection .ParentDir { + background: #101; + background: linear-gradient(to bottom, #101, #170017); border: 1px solid #101 !important; text-align: left !important; - padding: 4px 3px; + padding: 0 3px !important; } .ParentDir img { @@ -415,7 +430,7 @@ tfoot td:first-child { } @media screen and (-webkit-min-device-pixel-ratio:0) { /* fixes webkit/blink double border */ - .snarkTorrents { +.snarkTorrents { border-top: 1px solid transparent; margin-top: -2px; } @@ -462,19 +477,15 @@ th.snarkTorrentStatus { text-align: center !important; } +.snarkTorrentStatus b { + margin-right: 3px !important; +} + .snarkTrackerDetails, .SnarkTorrentDetails { width: 1%; padding: 2px 0; } -/* -.snarkTrackerDetails { - text-align: right; - padding-right: 2px; - min-width: 36px; -} -*/ - .snarkTorrentName { line-height: 110%; padding: 2px 1px 2px 3px; @@ -544,6 +555,7 @@ th.snarkTorrentAction input[type="image"]:hover, .snarkTorrentAction input[type= .snarkTorrents tfoot { background: #101; + background: linear-gradient(to bottom, #180018, #080008); } .snarkTorrents tfoot th { @@ -552,25 +564,26 @@ th.snarkTorrentAction input[type="image"]:hover, .snarkTorrentAction input[type= vertical-align: middle; } +.snarkTorrents tbody tr:last-child td { + border-bottom: 1px solid #101; +} + .snarkTorrents tfoot tr:first-child th { padding: 3px 2px; -} - -.iframed .snarkTorrents tfoot tr:first-child th { - padding-top: 6px; -} - -.snarkTorrents tfoot tr:first-child th { color: #ddd !important; font-weight: bold; vertical-align: middle; border-top: 1px solid #313; } +.iframed .snarkTorrents tfoot tr:first-child th { + padding-top: 6px; +} + .snarkTorrents tt { font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace; font-weight: bold; - font-size: 8pt !important; + font-size: 8.5pt !important; color: #cc0; margin-right: 2px; letter-spacing: 0.1em; @@ -660,26 +673,26 @@ td:first-child { width: 16px; height: 16px; border: 1px solid transparent !important; - transition: ease all 0.2s; } -.snarkTrackerDetails a:hover img, .snarkTrackerDetails img:hover, .snarkTrackerDetails a:focus img, -.snarkTorrentDetails a:hover img, .snarkTorrentDetails img:hover, .snarkTorrentDetails a:focus img, -.snarkDirInfo td:first-child a:hover img, .snarkDirInfo td:first-child a:focus img { +.snarkTrackerDetails a:hover img, .snarkTrackerDetails a:focus img, +.snarkTorrentDetails a:hover img, .snarkTorrentDetails a:focus img, +.snarkDirInfo td:not(.parentdir):first-child a:hover img, .snarkDirInfo td:not(.parentdir):first-child a:focus img { border: 1px solid #f60 !important; border-radius: 2px; box-shadow: inset 0 0 0 1px #414; background: #515; background: linear-gradient(to bottom, #717 50%, #414 50%); filter: none !important; - transition: ease all 0.2s; } -.snarkTrackerDetails a:active img, .snarkTorrentDetails a:active img, .snarkDirInfo td:first-child a:active img { - border: 1px solid #101 !important; - box-shadow: inset 3px 3px 3px #313; - mix-blend-mode: luminosity; - transition: none; +.snarkTrackerDetails a:active img, .snarkTorrentDetails a:active img, .snarkDirInfo td:not(.parentdir):first-child a:active img { + border: 1px solid #212 !important; + box-shadow: inset 3px 3px 2px 1px #202; + background: #414; + mix-blend-mode: overlay; + transform: scale(0.9) !important; + transition: none !important; } .snarkTorrentOdd { @@ -717,6 +730,10 @@ td:first-child { line-height: 120% !important; } +.peerinfo tt { + padding-left: 3px; +} + .snarkTorrents tbody tr:hover, .snarkDirInfo tbody tr:hover { background: #58165e !important; background: linear-gradient(to bottom, #58165e, #4a0d56) !important; @@ -796,9 +813,9 @@ _:-ms-lang(x), .snarkTorrents tbody tr:hover, .snarkDirInfo tbody tr:hover { background: linear-gradient(to bottom, #202 0%, #101 100%) !important; } -.snarkTorrentInfo td { +.mainsection .snarkTorrentInfo td { text-align: left !important; - padding: 3px 2px !important; + padding: 5px 2px !important; vertical-align: middle !important; } @@ -810,6 +827,10 @@ _:-ms-lang(x), .snarkTorrents tbody tr:hover, .snarkDirInfo tbody tr:hover { background: #351933; } +.snarkTorrentInfo b { + margin-right: 3px; +} + #infohash { color: #cc0; -moz-user-select: all; @@ -847,6 +868,10 @@ _:-ms-lang(x), .snarkTorrents tbody tr:hover, .snarkDirInfo tbody tr:hover { padding: 0 3px !important; } +.snarkDirInfo thead th:first-child img { + margin-left: 2px; +} + /* MS Edge fix */ _:-ms-lang(x), .snarkDirInfo img, .snarkTorrents img { filter: none !important; @@ -857,6 +882,10 @@ _:-ms-lang(x), .snarkDirInfo img, .snarkTorrents img { border-bottom: 1px solid #202; } +.snarkTorrentInfo th, .snarkDirInfo th { + border-bottom: 1px solid #313 !important; +} + .snarkDirInfo .snarkFileStatus img { opacity: 0.75; vertical-align: top; @@ -986,20 +1015,43 @@ tr:hover .percentBarInner { transition: none; } +.snarkTorrentDownloaded { + text-align: center !important; +} + +.percentBarComplete { + text-align: right; + max-width: 76px; +} + +.peerinfo .snarkTorrentDownloaded { + text-align: center !important; +} + /* end download bars */ +.snarkDirInfo:hover .thumb { + will-change: height, width; +} + .thumb { max-width: 16px; - transition: ease all 0.3s; + max-height: 16px; + width: 16px; + height: 16px; + transition: ease-in-out all 0.1s; } .thumb:hover { margin: 0; + min-width: 16px; + min-height: 16px; width: auto !important; height: auto !important; max-width: 80px; max-height: 80px; - transition: ease all 0.3s; + transition: ease-in-out all 0.3s 0.1s; + background: #212 !important; } .snarkNewTorrent { @@ -1043,7 +1095,7 @@ tr:hover .percentBarInner { background: #101; background: rgba(17, 0, 17, 0.7); border-radius: 2px; - font-size: 8pt !important; + font-size: 8.5pt !important; color: #ff7; padding: 2px 4px; box-shadow: inset 0 0 0 1px #212; @@ -1155,8 +1207,8 @@ th.headerpriority br, .snarkTorrents thead th br { margin: 0 -2px 0 0 !important; } -/* alternative iconified section tabs for iframed view */ -/* +/* alternative iconified section tabs (iframed) */ + .iframed .configsection .snarkConfigTitle, .iframed .toggleview, .iframed .configsection .snarkConfigTitle:focus, .iframed .toggleview:focus { font-size: 0; min-width: 0; @@ -1166,24 +1218,31 @@ th.headerpriority br, .snarkTorrents thead th br { } .iframed .configsection .snarkConfigTitle img, .iframed .toggleview img, .iframed .newtorrentsection .toggleview img { - background: #323; - background: linear-gradient(to bottom, #878 50%, #434 50%); - border-radius: 50%; - padding: 3px; margin: 0 !important; - border: 2px solid #101; + padding: 3px; + border: 2px solid #080008; + border-radius: 50%; box-shadow: none !important; + background: #323; + background: linear-gradient(to bottom, #767 50%, #323 50%); filter: none !important; mix-blend-mode: normal; } .iframed .configsection .snarkConfigTitle:hover img, .iframed .toggleview:hover img, .iframed .configsection .snarkConfigTitle:focus img, .iframed .toggleview:focus img { - filter: drop-shadow(0 0 3px #730) !important; + background: linear-gradient(to bottom, #878 50%, #434 50%); + border: 2px solid #101; box-shadow: none !important; + filter: drop-shadow(0 0 3px #730) !important; mix-blend-mode: normal !important; } -*/ + +.iframed .configsection .snarkConfigTitle:active img, .iframed .toggleview:active img { + box-shadow: 0 0 1px #101, 0 0 2px #930 !important; + filter: drop-shadow(0 0 1px #730) !important; + filter: none !important; +} .snarkConfigTitle:hover, .snarkConfigTitle:focus, label.toggleview:hover, label.toggleview:focus, .toggle_input:focus + label { background: linear-gradient(to bottom, #5f475d 0%, #4f3b4f 50%, #1f001f 50%, #1f001f 100%) !important; @@ -1193,23 +1252,20 @@ th.headerpriority br, .snarkTorrents thead th br { } .snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active { - font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, sans-serif; - font-size: 12pt; - font-weight: bold; + margin: 0 0 -3px !important; padding: 4px 1px 3px; - margin: 5px 0 10px 0 !important; + display: inline-block; + min-width: 320px; + font: bold 12pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, sans-serif; + font-variant: small-caps !important; + color: #f7e3fc; + letter-spacing: 0.15em; + text-shadow: 0 0 1px #000; border: 1px solid #101; border-top: none; background: #101 url(images/snarknav.png) repeat-x scroll center center; background: linear-gradient(to bottom, #4a3d49 0%, #3d303d 50%, #0d000d 50%, #0d000d 100%) !important; - font-variant: small-caps !important; - letter-spacing: 0.15em; - color: #f7e3fc; - text-shadow: 0 0 1px #000; box-shadow: inset 0 0 1px 0 #313, 0 0 0 1px rgba(16, 0, 16, 0.4); - display: inline-block; - margin: 0 0 -3px !important; - min-width: 260px; transition: ease all 0.1s; } @@ -1221,12 +1277,16 @@ th.headerpriority br, .snarkTorrents thead th br { box-shadow: inset 0 0 1px #7f2f7f, inset 3px 3px 3px 1px #0d000d; } -.snarkConfigTitle img, label.toggleview img { +#lowersection .snarkConfigTitle img, #lowersection label.toggleview img { margin: 1px -1px 2px 0; vertical-align: middle; filter: drop-shadow(0 0 1px #000); } +#lowersection:hover .snarkConfigTitle img, #lowersection:hover label.toggleview img { + will-change: transform, filter; +} + .snarkConfigTitle img { margin-right: -2px !important; } @@ -1735,6 +1795,42 @@ img[src$="magnet.png"] { transform: rotate(-90deg); } +@keyframes slide-in { +0% { + transform: translateY(-50px); +} + +100% { + transform: translateY(0); +} +} + +@keyframes fade-in { +0% { + filter: opacity(0); +} + +100% { + filter: opacity(1); +} +} + +.addtorrentsection table, .newtorrentsection table:not(#trackerselect) { + animation: fade-in 0.3s linear, slide-in 0.15s ease-out; +} + +.addtorrentsection:hover table, .newtorrentsection:hover table:not(#trackerselect) { + will-change: filter, transform; +} + +.iframed .addtorrentsection table, .iframed .newtorrentsection table:not(#trackerselect) { + animation: fade-in 0.1s linear; +} + +.iframed .addtorrentsection:hover table, .iframed .newtorrentsection:hover table:not(#trackerselect) { + will-change: filter; +} + .newtorrentsection, .addtorrentsection, .configsection, .configsectionpanel, .section, .mainsection { margin: 0 0 10px 0; padding: 0 10px; @@ -1746,6 +1842,10 @@ img[src$="magnet.png"] { word-wrap: break-word; } +.snarkAddInfo code { + animation: fade-in 0.7s ease-in !important; +} + .section, .mainsection { padding: 10px; color: #001; @@ -1961,20 +2061,6 @@ input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent display: table; } -/* enable to display panels by default on broken webkit based browsers (midori fix) */ -/* note that midori has other issues c. v5.10, best avoided */ -/* -@media screen and (-webkit-min-device-pixel-ratio:0) { -input#toggle_addtorrent:not(checked) + label + hr + table, input#toggle_createtorrent:not(checked) + label + hr + table { - display: table; -} - -input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent:checked + label + hr + table { - display: none; -} -} -*/ - /* display by default in iframe to avoid overflow issue */ .iframed input#toggle_addtorrent:not(checked) + label + hr + table, .iframed input#toggle_createtorrent:not(checked) + label + hr + table { @@ -2178,6 +2264,10 @@ input#toggle_debug:not(checked) + label { } } +.buckets { + animation: fade-in 0.3s linear; +} + .dhtDebug th b:first-of-type, .dhtDebug th b:first-of-type + br + hr.debug { display: none; } @@ -2329,6 +2419,10 @@ input#toggle_debug:checked + label + #dhtDebugInner { font-weight: bold; } +#configs td[colspan="3"] { + padding-right: 0; +} + #bwHelp { background: url(images/infocircle.png) left 8px center no-repeat; background-size: 14px auto; @@ -2466,6 +2560,18 @@ input#toggle_debug:checked + label + #dhtDebugInner { padding-left: 20px !important; } +.snarkCommentInfo tr { + border: 1px solid #101; +} + +.snarkCommentInfo tr th { + border-bottom: 1px solid #313 !important; +} + +.snarkCommentInfo tr:nth-child(2) td { + border-top: 1px solid #101 !important; +} + .snarkCommentInfo td:first-child, .snarkComments td:first-child { min-width: 160px !important; max-width: 160px !important; @@ -2811,7 +2917,7 @@ td.snarkTorrentStatus, td.snarkTorrentStatus a { } } -@media screen and (max-width: 1400px) { +@media screen and (max-width: 1500px) { .snarknavbar { padding: 14px 10px 13px; } @@ -2861,6 +2967,12 @@ img[src="/themes/snark/ubergine/images/details.png"] { } @media screen and (min-width: 1200px) { +body, .snarkAddInfo, th, td, .snarkCommentInfo textarea, input[type="submit"], input[type="reset"], +select, select option, button, a.control, .snarkTorrents a:link { + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; + font-size: 9pt !important; +} + .snarkNav:link { font-size: 10.5pt; } @@ -2873,6 +2985,14 @@ _:-ms-lang(x), .snarknavbar { padding: 13px 5px 15px !important; } +th { + font-size: 9pt !important; +} + +.snarkTorrentStatus { + padding-right: 8px !important; +} + .percentDownloaded { pointer-events: none; /* hide tooltip */ } @@ -2898,11 +3018,11 @@ _:-ms-lang(x), .snarknavbar { } #dhtdebugInner { - margin-top: -33px; + margin-top: -28px; } } -@media screen and (min-width: 1400px) { +@media screen and (min-width: 1500px) { th, td, .choked, .unchoked { letter-spacing: 0 !important; } @@ -2938,7 +3058,7 @@ code { } .snarkNav:link { - font-size: 11pt; + font-size: 12pt; } .snarkConfigTitle, label.toggleview { @@ -3058,7 +3178,7 @@ select { } } -@media screen and (min-width: 1400px) and (-webkit-min-device-pixel-ratio:0) { +@media screen and (min-width: 1500px) and (-webkit-min-device-pixel-ratio:0) { .snarkConfigTitle, label.toggleview { font-size: 12.5pt !important; } @@ -3085,6 +3205,10 @@ select { min-width: 650px !important; } +.snarkMessages li { + font-size: 8pt; +} + .snarkNav:link, .snarkNav:visited { font-size: 9pt !important; background-size: 10pt auto, 100% 100% !important; @@ -3108,6 +3232,12 @@ th.snarkTorrentStatus a img, .snarkTorrentETA a img, .snarkTrackerDetails a img, max-width: 18px; } +.snarkTorrentDetails { + width: 34px !important; + text-align: right !important; + padding-right: 0 !important; +} + .snarkTorrentName a:not(old) { max-width: 360px !important; } @@ -3142,6 +3272,10 @@ th.snarkTorrentStatus a img, .snarkTorrentETA a img, .snarkTrackerDetails a img, width: 20%; } +.configsection .snarkConfigTitle, .toggleview { + min-width: 280px !important; +} + .toggleview, .snarkConfigTitle, .snarkConfigTitle a { font-size: 10pt !important; } @@ -3268,7 +3402,6 @@ th a img { /* end responsive layout */ - .noscriptWarning { margin-right: 7px !important; font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, sans-serif; @@ -3308,7 +3441,6 @@ th a img { } #trackerselect td:first-child { -/* padding-right: 15px !important;*/ width: 30%; text-align: center; } @@ -3417,3 +3549,91 @@ th a img { /* end create torrent -> trackers table */ +/* alternative iconified tabs */ +/* +.configsection .snarkConfigTitle, .toggleview { + box-shadow: inset 0 0 0 1px #212 !important; + filter: drop-shadow(0 1px 1px #212); +} + +.configsection .snarkConfigTitle:hover, .toggleview:hover { + box-shadow: inset 0 0 0 1px #313 !important; +} + +.configsection .snarkConfigTitle:active, .toggleview:active { + box-shadow: inset 0 0 0 1px #313, inset 4px 4px 3px 2px #101 !important; +} + +.configsection .snarkConfigTitle, .toggleview, .configsection .snarkConfigTitle:focus, .toggleview:focus { + font-size: 0 !important; + min-width: 0 !important; + width: 200px !important; + padding: 1px 5px !important; + border-radius: 0 0 3px 3px; +} + +.configsection .snarkConfigTitle img, .toggleview img, .newtorrentsection .toggleview img { + margin: 1px 0 0 !important; + padding: 3px; + border: 2px solid #080008; + border-radius: 50%; + box-shadow: none !important; + background: #323; + background: linear-gradient(to bottom, #767 50%, #323 50%); + filter: none !important; + mix-blend-mode: normal; +} + +.configsection .snarkConfigTitle:hover img, .toggleview:hover img, +.configsection .snarkConfigTitle:focus img, .toggleview:focus img { + background: linear-gradient(to bottom, #878 50%, #434 50%); + border: 2px solid #101; + box-shadow: none !important; + filter: drop-shadow(0 0 2px #730) !important; + mix-blend-mode: normal !important; +} + +.configsection .snarkConfigTitle:active img, .toggleview:active img { + box-shadow: 0 0 1px #101, 0 0 2px #930 !important; + filter: drop-shadow(0 0 1px #730) !important; + filter: none !important; +} +*/ +/* end alternative iconified tabs */ + +.info_tracker { + margin: 0 4px 0 2px; + padding: 1px 6px 1px 18px; + display: inline-block; + vertical-align: middle; + background: #190019 url(images/button_tracker.png) left 3px center no-repeat; + background-color: rgba(24,0,24,0.7); + background-size: 14px auto; + max-width: 155px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #f80; + box-shadow: 0 0 0 1px #101; + border-radius: 3px; +} + +.info_tracker:hover, .info_tracker:hover a { + color: #d2baff; +} + +.info_tracker:hover { + background: url(images/button_tracker_hover.png) left 3px center no-repeat, linear-gradient(to bottom, #313 50%, #101 50%); + background-size: 14px auto; +} + +.info_tracker:active, .info_tracker:active a { + color: #fff; +} + +.info_tracker:active { + color: #fff; + box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #f30, inset 3px 3px 3px #101; + background: #f60 url(images/button_tracker_active.png) left 3px center no-repeat; + background-size: 14px auto; +} \ No newline at end of file diff --git a/installer/resources/themes/snark/vanilla/nocollapse.css b/installer/resources/themes/snark/vanilla/nocollapse.css index 394eb3ce78..b49b542d7c 100644 --- a/installer/resources/themes/snark/vanilla/nocollapse.css +++ b/installer/resources/themes/snark/vanilla/nocollapse.css @@ -12,8 +12,8 @@ label.toggleview, label.toggleview:hover, label.toggleview:active, .toggle_input cursor: default !important; box-shadow: 0 0 2px #4d453e, inset 0 0 0 1px #efe6e0 !important; font-size: 0 !important; - min-width: 120px !important; - width: 120px !important; + min-width: 200px !important; + width: 200px !important; } label.toggleview img, .toggle_input:focus + label.toggleview img, label.toggleview:hover img, label.toggleview img:active, label.toggleview:active img { diff --git a/installer/resources/themes/snark/vanilla/snark.css b/installer/resources/themes/snark/vanilla/snark.css index a0890bae59..0f864e35bb 100644 --- a/installer/resources/themes/snark/vanilla/snark.css +++ b/installer/resources/themes/snark/vanilla/snark.css @@ -6,10 +6,10 @@ html { } body { + font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif; + color: #2f1500; background: #2f231a; background: repeating-linear-gradient(to bottom, #9f948b 1px, #6f5b4c 1px, #bfa285 3px); - color: #2f1500; - font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif; } /* preload top navigation mouseovers */ @@ -25,19 +25,18 @@ body:not(old) { } body.iframed { - background: transparent url(/themes/console/images/transparent.gif) !important; + background: transparent !important; margin: 6px 0 !important; } body.iframed:not(old) { - background: url(/themes/console/images/transparent.gif), - url(images/button_snark_hover.png) no-repeat, + background: url(images/button_snark_hover.png) no-repeat, url(images/button_snark_active.png) no-repeat, url(images/button_tracker_hover.png) no-repeat, url(images/button_tracker_active.png) no-repeat, url(images/button_forum_hover.png) no-repeat, url(images/button_forum_active.png) no-repeat !important; - background-size: 100% 100%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important; + background-size: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important; } * { @@ -134,40 +133,39 @@ th a:active, th a:visited:active, td a:active, td a:visited:active { .snarknavbar { margin: -11px 0 10px 0 !important; padding: 13px 10px 12px; + position: sticky; + top: -2px; + z-index: 999; + min-width: 900px; + width: 70%; 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 53%); - min-width: 900px; - width: 70%; text-align: center; - position: sticky; - top: -2px; - z-index: 999; transition: ease width 0.5s 0.5s; } .iframed .snarknavbar { - padding-top: 12px; margin: -6px 0 !important; + padding-top: 12px; + position: static; width: auto; border-radius: 0; box-shadow: 0 0 2px 0 #fff inset, 0 0 1px 0 #4f3d36; - position: static; + background: linear-gradient(to bottom, #efefef 49%, #cfc7c2 52%); } .snarkNav:link, .snarkNav:visited { + margin: -3px -4px -4px 0 !important; + padding: 4px 10px 4px 28px !important; display: inline-block; position: relative; z-index: 30; - margin: -3px -4px -4px 0 !important; - padding: 4px 10px 4px 28px !important; line-height: 130%; - font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif; - font-weight: bold; - font-size: 10pt; + font: bold 10pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif; color: #3f271b; text-shadow: 0 0 1px #fff5ef; text-decoration: none !important; @@ -179,7 +177,7 @@ th a:active, th a:visited:active, td a:active, td a:visited:active { background-size: 17px auto, 100% 100%, 100% 100% !important; background-position: 12px center, center center, center center !important; background-repeat: no-repeat !important; - transition: ease all 0.1s; + transition: ease border 0.1s; } _:-ms-lang(x), .snarkNav:link, .snarkNav:visited { @@ -188,19 +186,20 @@ _:-ms-lang(x), .snarkNav:link, .snarkNav:visited { } .snarkNav:hover, .snarkNav:focus { + z-index: 10; + color: #930 !important; text-decoration: none !important; text-shadow: none !important; - color: #930 !important; box-shadow: inset 0 0 0 1px #fff5ef, inset 0 0 0 rgba(0,0,0,0), 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; - transition: ease all 0.1s; + transition: ease border 0.1s; } .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; + transition: ease box-shadow 0.05s; } .nav_main:link { @@ -280,7 +279,7 @@ _:-ms-lang(x), .snarkNav:link, .snarkNav:visited { /* screenlog */ .snarkMessages { - font: bold 8pt "Droid Sans Mono", "Noto Mono", "DejaVu Sans Mono", "Lucida Console", monospace !important; + font: bold 8.5pt "Droid Sans Mono", "Noto Mono", "DejaVu Sans Mono", "Lucida Console", monospace !important; text-align: left; margin: 0 0 10px; padding: 0 3px; @@ -613,8 +612,8 @@ th.snarkTorrentStatus { margin: 0 2px !important; } -.snarkTrackerDetails a:hover img, .snarkTrackerDetails img:hover, .snarkTrackerDetails a:focus img, -.snarkTorrentDetails a:hover img, .snarkTorrentDetails img:hover, .snarkTorrentDetails a:focus img, +.snarkTrackerDetails a:hover img, .snarkTrackerDetails a:focus img, +.snarkTorrentDetails a:hover img, .snarkTorrentDetails a:focus img, .snarkDirInfo td:first-child a:hover img, .snarkDirInfo td:first-child a:focus img { border: 1px solid #f60 !important; border-radius: 2px; @@ -626,6 +625,8 @@ th.snarkTorrentStatus { .snarkTrackerDetails a:active img, .snarkTorrentDetails a:active img, .snarkDirInfo td:first-child a:active img { box-shadow: inset 2px 2px 3px 1px #59513b; + transform: scale(0.9); + transition: none !important; } .snarkTorrentETA, .snarkTorrentUploaded, .snarkTorrentRateDown, .snarkTorrentRateUp { @@ -857,6 +858,8 @@ _:-ms-lang(x), .snarkTorrents tbody tr:hover, .snarkDirInfo tbody tr:hover { text-align: left; white-space: nowrap; width: 140px; + overflow: hidden; + text-overflow: ellipsis; } .snarkTorrentInfo img { @@ -868,8 +871,7 @@ _:-ms-lang(x), .snarkTorrents tbody tr:hover, .snarkDirInfo tbody tr:hover { text-align: left !important; vertical-align: middle !important; background: #efe6e0; - padding-top: 3px !important; - padding-bottom: 3px !important; + padding: 4px 3px 4px 1px; } .snarkTorrentInfo tr:nth-child(even) td { @@ -879,7 +881,7 @@ _:-ms-lang(x), .snarkTorrents tbody tr:hover, .snarkDirInfo tbody tr:hover { .snarkTorrentInfo th { text-align: left; background: linear-gradient(to bottom, #efefef, #cfc7c2); - padding: 5px 4px 5px 0; + padding: 7px 4px 7px 0; } .snarkTorrentInfo th:first-child { @@ -891,7 +893,8 @@ _:-ms-lang(x), .snarkTorrents tbody tr:hover, .snarkDirInfo tbody tr:hover { .snarkTorrentInfo th:first-child, .snarkTorrentInfo td:first-child { width: 20px; text-align: left; - padding: 2px 3px 2px 5px !important; + padding-left: 5px !important; + padding-right: 3px !important; } .snarkTorrentInfo { @@ -903,6 +906,10 @@ _:-ms-lang(x), .snarkTorrents tbody tr:hover, .snarkDirInfo tbody tr:hover { border-top: none; } +.snarkTorrentInfo b { + margin-right: 3px; +} + #infohash { color: #050; -moz-user-select: all; @@ -1126,7 +1133,7 @@ thead img.disable, img.disable:hover { } .thumb { - transition: ease all 0.3s; + transition: ease all 0.2s; max-width: 16px; } @@ -1134,7 +1141,9 @@ thead img.disable, img.disable:hover { margin: -3px 0 -2px 2px !important; max-width: 80px; max-height: 80px; - transition: ease all 0.3s; + box-shadow: none !important; + background: #fff !important; + transition: ease all 0.3s 0.1s; } @media screen and (-webkit-min-device-pixel-ratio:0) { @@ -1148,7 +1157,6 @@ thead img.disable, img.disable:hover { } .snarkAddInfo { - font-size: 8pt; display: inline-block; margin-top: 7px; background: url(images/infocircle.png) left center no-repeat; @@ -1157,6 +1165,10 @@ thead img.disable, img.disable:hover { min-height: 16px; } +.snarkAddInfo code { + font-size: 9pt; +} + #trackerselect { margin: 10px 0 5px 0; width: 100% !important; @@ -1702,6 +1714,24 @@ img[src$="details.png"] { mix-blend-mode: normal !important; } +@keyframes fade-in { +0% { + filter: opacity(0); +} + +100% { + filter: opacity(1); +} +} + +.addtorrentsection table, .newtorrentsection table { + animation: fade-in 0.2s ease-in; +} + +.snarkAddInfo code { + animation: fade-in 0.5s linear; +} + .newtorrentsection, .addtorrentsection, .configsection, .configsectionpanel, .section, .mainsection { background: #dfd7d1; background-blend-mode: luminosity; @@ -1745,6 +1775,10 @@ img[src$="details.png"] { background-size: 84px 82px, 100% 100%; } +.configsectionpanel table { + margin-bottom: 8px; +} + .configsectionpanel td, .snarkNewTorrent td, select, select option, input, textarea, input[name="nofilter_dataDir"], .configsectionpanel th { font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif; font-size: 9pt !important; @@ -1779,7 +1813,7 @@ img[src$="details.png"] { } .snarkConfig tr:nth-last-child(4) td, .trackerconfig tr:nth-last-child(4) td { - padding-bottom: 15px; + padding-bottom: 10px; } .snarkConfig tr:nth-last-child(2) td, .trackerconfig tr:nth-last-child(2) td { @@ -1804,7 +1838,7 @@ img[src$="details.png"] { } code, tt { - font-size: 8pt; + font-size: 8.5pt; color: #313; padding: 0 1px; font-weight: bold; @@ -2743,7 +2777,7 @@ _:-ms-lang(x), .snarkNav:link, .snarkNav:visited { } } -@media screen and (max-width: 1400px) { +@media screen and (max-width: 1500px) { #dhtDebugInner { margin-top: -21px !important; padding-top: 15px; @@ -2879,7 +2913,7 @@ thead a img, thead img { } } -@media screen and (min-width: 1400px) { +@media screen and (min-width: 1500px) { body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, a.control, input[type="submit"], input[type="reset"], select, button, code, #pagenav { font-size: 10pt !important; } @@ -2889,7 +2923,7 @@ textarea { } tt, .snarkTorrents tt, .snarkMessages { - font-size: 8pt !important; + font-size: 8.5pt !important; } .snarkAddInfo, .configsectionpanel td, .snarkNewTorrent td, .configsectionpanel th, @@ -3018,7 +3052,7 @@ tr#torrentInfoStats td { } } -@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1400px) { +@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1500px) { .snarkConfigTitle, .toggleview, .configsectionpanel .snarkConfigTitle, .snarkConfigTitle a, .snarkConfigTitle a:hover, .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active { font-size: 14pt !important; @@ -3089,6 +3123,15 @@ th.snarkTorrentStatus a img, .snarkTorrentETA a img, .snarkTrackerDetails a img padding: 0; } +.snarkTorrentDetails { + padding-left: 5px !important; + padding-right: 0 !important; +} + +.snarkTorrentName { + padding-left: 2px !important; +} + #configs td:first-child { min-width: 150px !important; } @@ -3177,3 +3220,43 @@ th.snarkTorrentStatus a img, .snarkTorrentETA a img, .snarkTrackerDetails a img /* end responsive layout */ +.info_tracker, .info_tracker a { + color: #3f271b !important; +} + +.info_tracker { + margin: 0 4px 0 2px; + padding: 1px 6px 1px 18px; + display: inline-block; + vertical-align: middle; + background: #e8e8e8 url(images/button_tracker.png) left 3px center no-repeat; + background-size: 14px auto; + max-width: 155px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + box-shadow: 0 0 0 1px #cfc6c0; + border-radius: 3px; +} + +.info_tracker:hover, .info_tracker:hover a { + color: #930 !important; +} + +.info_tracker:hover { + box-shadow: 0 0 0 1px #bfb6b0; + background: url(images/button_tracker_hover.png) left 3px center no-repeat, linear-gradient(to bottom, #efefef 50%, #cfc7c2 50%); + background-size: 14px auto; +} + +.info_tracker:active, .info_tracker:active a { + color: #fff !important; +} + +.info_tracker:active { + color: #fff; + box-shadow: inset 3px 3px 3px #310; + background: #f60 url(images/button_tracker_active.png) left 3px center no-repeat; + background-size: 14px auto; +} + diff --git a/installer/resources/themes/susidns/classic/susidns.css b/installer/resources/themes/susidns/classic/susidns.css index 539e06a5cb..3c7a8f7518 100644 --- a/installer/resources/themes/susidns/classic/susidns.css +++ b/installer/resources/themes/susidns/classic/susidns.css @@ -6,7 +6,6 @@ body { background: #eef; background: #eef url(/themes/console/classic/images/bg0.png); background-size: 120px 120px; - color: #0c153d; color: #2c354f; min-width: 700px; } @@ -269,7 +268,7 @@ a:visited { color: #448; } -a:hover { +a:hover, a:focus { text-decoration: none; color: #f60; } @@ -425,8 +424,10 @@ div#filter { min-width: 300px !important; display: inline-block; margin-top: -1px; - padding: 6px 5px; + padding: 5px; border: 1px solid #89f; + border-radius: 0 0 2px 2px; + box-shadow: inset 0 0 0 1px #fff; font-size: 11pt; font-weight: bold; background: linear-gradient(to bottom, #fff 50%, #eff2ff 50%); @@ -883,7 +884,7 @@ p.book { } #host_details td:first-child { - min-width: 10px !important; + padding-right: 0 !important; width: 10%; white-space: nowrap; font-weight: bold; diff --git a/installer/resources/themes/susidns/dark/susidns.css b/installer/resources/themes/susidns/dark/susidns.css index 864fa7248d..9e56db4a73 100644 --- a/installer/resources/themes/susidns/dark/susidns.css +++ b/installer/resources/themes/susidns/dark/susidns.css @@ -593,6 +593,26 @@ tr.list0 { background: #000; } +#helpconfig ul { + display: block; + -moz-columns: 2 500px; + -webkit-columns: 2 500px; + columns: 2 500px; + -moz-column-gap: 40px; + -webkit-column-gap: 40px; + column-gap: 40px; + margin: 0 0 -5px -40px; +} + +#helpconfig li { + margin: 0 3px; +} + +#helpconfig li b { + font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", monospace; + color: #990; +} + div#content p { padding: 0 10px; } diff --git a/installer/resources/themes/susidns/light/susidns.css b/installer/resources/themes/susidns/light/susidns.css index 1319d152d1..6baa75e964 100644 --- a/installer/resources/themes/susidns/light/susidns.css +++ b/installer/resources/themes/susidns/light/susidns.css @@ -85,7 +85,7 @@ hr { } code, tt, .destaddress { - font-size: 8pt; + font-size: 8.5pt; } #host_list .destaddress { @@ -1390,7 +1390,7 @@ input[type="checkbox"][disabled]:checked, input[type="radio"][disabled]:checked, } } -@media screen and (min-width: 1400px) { +@media screen and (min-width: 1500px) { body, p, td, textarea, input, button, li, a, th, h4 { font-size: 10pt !important; } @@ -1459,3 +1459,31 @@ _:-ms-lang(x), * { } /* end Edge/IE tweaks */ + +/* chrome/blink overrides */ + +@media screen and (-webkit-min-device-pixel-ratio: 0) { +textarea, input[type="text"], .displayText, *[readonly] { + filter: none !important; + box-shadow: 0 0 1px #ccf; +} + +tr { + box-shadow: none !important; +} + +.book tr:nth-child(even) { + background: #f0f0ff !important; +} + +.book tr:nth-child(odd), #book { + background: #f8f8ff !important; +} + +#helpconfig ul { + -webkit-columns: 1; + columns: 1; +} +} + +/* end chrome overrides */ \ No newline at end of file diff --git a/installer/resources/themes/susidns/midnight/susidns.css b/installer/resources/themes/susidns/midnight/susidns.css index d9a38deb03..57f8b28e99 100644 --- a/installer/resources/themes/susidns/midnight/susidns.css +++ b/installer/resources/themes/susidns/midnight/susidns.css @@ -326,7 +326,7 @@ p { } span.addrhlpr { - font-size:8pt; + font-size: 8pt; } h3 { @@ -841,7 +841,7 @@ input[type=submit], input[type=reset], .fakebutton { border-bottom-color: #14144f; border-right-color: #14144f; padding: 5px !important; - font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; + font: bold 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; text-align: center; min-width: 90px !important; box-shadow: inset 0 0 0 1px #000; diff --git a/installer/resources/themes/susimail/classic/susimail.css b/installer/resources/themes/susimail/classic/susimail.css index 7b0839d063..022d0a2d92 100644 --- a/installer/resources/themes/susimail/classic/susimail.css +++ b/installer/resources/themes/susimail/classic/susimail.css @@ -2,6 +2,7 @@ /* Author: dr|z3d */ body { + margin: 3px 4px; background: #eef url(/themes/console/classic/images/bg0.png); background-size: 120px 120px; color: #2c354f; @@ -77,9 +78,10 @@ p.text { p.error, p.info { color: #900; - padding: 15px 15px 15px 55px; + padding: 15px 15px 15px 45px; border: 1px solid #89f; background: #ffe url(/themes/console/images/info/errortriangle.png) 8px center no-repeat; + background-size: 28px auto; text-align: left; margin: -1px -11px; box-shadow: inset 0 0 0 1px #fff; @@ -109,7 +111,7 @@ p.info { } span.coloured { - color:#327BBF; + color: #327bbf; } div.footer { @@ -124,8 +126,8 @@ div.footer { p.footer { padding: 1px; margin: 0; - font-size:8pt; - line-height:10pt; + font-size: 8pt; + line-height: 10pt; text-align: center; } @@ -213,7 +215,6 @@ a.linknew { } td { - color: #0c153d; line-height: 12pt; font-size: 9pt; padding: 1px 3px; @@ -1180,7 +1181,13 @@ table#pagenav td:last-child { } } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1300px) { +.iframed body, .iframed td, .iframed textarea, .iframed input, .iframed div, .iframed p.mailbody, .iframed p.error { + font-size: 10pt !important; +} +} + +@media screen and (min-width: 1500px) { body, td, textarea, input, div, p.mailbody, p.error { font-size: 10pt !important; } diff --git a/installer/resources/themes/susimail/dark/susimail.css b/installer/resources/themes/susimail/dark/susimail.css index 3e07adc895..b1355f84b0 100644 --- a/installer/resources/themes/susimail/dark/susimail.css +++ b/installer/resources/themes/susimail/dark/susimail.css @@ -9,7 +9,7 @@ html { body { background: url(/themes/console/dark/images/camotile2.png) top left fixed #000; - background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url(/themes/console/dark/images/camotile2.png) top left fixed #000; + background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url(/themes/console/dark/images/camotile2.png) top left scroll #000; background-size: 100% 100%, 175px 175px !important; color: #ee9; font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; @@ -17,6 +17,13 @@ body { margin: 8px 5px; } +@supports (text-justify: auto) { /* only Firefox 55 or newer */ +body { + background-attachment: fixed; + will-change: scroll-position; +} +} + body.iframed { background: transparent !important; margin: 0; @@ -60,31 +67,31 @@ hr { } li { - color:#ee9; - line-height:12pt; - font-size:10pt; - margin-left:5mm; - margin-right:5mm; + color: #ee9; + line-height: 12pt; + font-size: 10pt; + margin-left: 5mm; + margin-right: 5mm; } p { - color:#ee9; - line-height:12pt; - margin-left:5mm; - margin-right:5mm; - font-size:9pt; + color: #ee9; + line-height: 12pt; + margin-left: 5mm; + margin-right: 5mm; + font-size: 9pt; } p.hl { - font-size:12pt; - letter-spacing:2pt; - line-height:18pt; - font-weight:bold; + font-size: 12pt; + letter-spacing: 2pt; + line-height: 18pt; + font-weight: bold; } p.text { - margin-left:10mm; - margin-right:10mm; + margin-left: 10mm; + margin-right: 10mm; } p.info, p.error { @@ -112,23 +119,10 @@ p.error { } span.coloured { - color:#327BBF; + color: #327bbf; } -p.footer { - margin-left:10mm; - margin-right:10mm; - font-size:8pt; - line-height:10pt; - display: none; -} - -.footer hr { - margin-top: -12px; - display: none; -} - -.iframed #footer { +p.footer, .iframed #footer, .footer hr { display: none; } @@ -386,7 +380,6 @@ tr.list0:hover td:nth-child(3) a, tr.list1:hover td:nth-child(3) a, #mailbox td: tr.list0:hover td:first-child, tr.list1:hover td:first-child { -/* background: url(images/highlight.png) left center repeat-y; */ box-shadow: inset 3px 0 0 #900; } @@ -450,10 +443,6 @@ table[id="mailbox"] th img:hover, table[id="mailbox"] th a:focus img { border-bottom: 1px solid #000; } -#mailbox tr.bottombuttons td[colspan="9"] { -/* display: none; */ -} - tr.bottombuttons td { padding-left: 0 !important; } @@ -600,7 +589,7 @@ input { border: 1px solid #494; color: #494; margin: 3px; - font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", Lato, "Segoe UI", Verdana, Helvetica, sans-serif; + font: bold 9pt "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", Lato, "Segoe UI", Verdana, Helvetica, sans-serif; min-width: 64px !important; } @@ -629,7 +618,7 @@ input[type=submit], input.cancel { margin: 4px 5px; padding: 5px 8px !important; min-width: 95px !important; - font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", Lato, "Segoe UI", Verdana, Helvetica, sans-serif; + font: bold 9pt "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", Lato, "Segoe UI", Verdana, Helvetica, sans-serif; color: #494; text-align: center; border: 1px outset #191; @@ -734,7 +723,6 @@ input[type="submit"], input[type="reset"], select, button { /* webkit/blink fix .page td[colspan="2"] { text-align: left; padding: 0 0 10px 0; -/* padding-left: 13%;*/ } .page td[colspan="2"] hr { @@ -1138,8 +1126,26 @@ div#prefsave { /* responsive layout */ -@media screen and (min-width: 1024px) { -body, td, textarea, div, p.mailbody { +@media screen and (min-width: 1300px) { +.iframed body, .iframed td, .iframed textarea, .iframed input, .iframed div, .iframed p.mailbody, .iframed select, .iframed button, .iframed input[type="submit"], .iframed input[type="reset"] { + font-size: 10pt !important; +} + +.iframed #pagenav input { + font-size: 0 !important; +} + +.iframed .topbuttons input[type="submit"], .iframed .topbuttons input[type="reset"] { + margin: 3px 5px !important; +} + +.iframed textarea[name="new_text"] { + width: 660px; +} +} + +@media screen and (min-width: 1500px) { +body, td, textarea, input, div, p.mailbody, select, button, input[type="submit"], input[type="reset"] { font-size: 10pt !important; } @@ -1150,16 +1156,6 @@ body, td, textarea, div, p.mailbody { .topbuttons input[type="submit"], .topbuttons input[type="reset"] { margin: 3px 5px !important; } -} - -@media screen and (min-width: 1500px) { -input, textarea { - font-size: 10pt !important; -} - -select, button, input[type="submit"], input[type="reset"] { - font-size: 9pt; -} textarea[name="new_text"] { width: 660px; diff --git a/installer/resources/themes/susimail/light/susimail.css b/installer/resources/themes/susimail/light/susimail.css index aac438925e..c87e5b3388 100644 --- a/installer/resources/themes/susimail/light/susimail.css +++ b/installer/resources/themes/susimail/light/susimail.css @@ -226,6 +226,10 @@ td[onclick] { cursor: pointer; } +.list0, .list1 { + box-shadow: inset 0 0 0 1px #fff; +} + tr.list0 { background: #eef; background: repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff; @@ -361,6 +365,7 @@ table#mailbox { #mailbox tr td { border-top: 1px solid #bbf; + border-top: 1px solid rgba(220,220,255,0.8); } #mailbox tr:nth-child(3) td { @@ -1328,7 +1333,7 @@ tr.bottombuttons:empty { margin-bottom: 9px; border-radius: 4px 4px 0 0; border: none; - margin: 0 3% 10px; + margin: 0 3% 8px; } .notifications:hover { @@ -1367,13 +1372,13 @@ td p.error { } .attached { - text-align: left; - background: url(/themes/susimail/images/attach.png) 10px center no-repeat, rgba(220,220,255,0.2); - padding: 8px 5px 8px 35px; - border-top: 1px solid #7778bf; margin: 0; - box-shadow: inset 0 0 0 1px #fff; + padding: 15px 12px 15px 35px; overflow: auto !important; + text-align: left; + border-top: 1px solid #7778bf; + box-shadow: inset 0 0 0 1px #fff; + background: url(/themes/susimail/images/attach.png) 10px center no-repeat, rgba(220,220,255,0.2); } .attached img { @@ -1383,7 +1388,7 @@ td p.error { background: #fff; text-align: center; max-width: 100%; - max-width: calc(100% - 5px); + max-width: calc(100% - 25px); filter: drop-shadow(0 0 1px #999); } @@ -1480,7 +1485,17 @@ input[type="checkbox"][disabled]:checked, input[type="radio"][disabled]:checked, /* responsive layout */ -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1300px) { +.iframed body, .iframed td, .iframed textarea, .iframed input, .iframed div, .iframed p.mailbody, .iframed th, .iframed a { + font-size: 10pt !important; +} + +.iframed td { + padding: 3px 5px; +} +} + +@media screen and (min-width: 1500px) { body, td, textarea, input, div, p.mailbody, th, a { font-size: 10pt !important; } diff --git a/installer/resources/themes/susimail/midnight/susimail.css b/installer/resources/themes/susimail/midnight/susimail.css index 6e97c3399a..3a38c02337 100644 --- a/installer/resources/themes/susimail/midnight/susimail.css +++ b/installer/resources/themes/susimail/midnight/susimail.css @@ -126,20 +126,7 @@ span.coloured { color: #382dc4; } -p.footer { - margin-left: 10mm; - margin-right: 10mm; - font-size: 8pt; - line-height: 10pt; - display: none; -} - -.footer hr { - margin-top: -12px; - display: none; -} - -.iframed #footer { +p.footer, .iframed #footer, .footer hr { display: none; } @@ -595,8 +582,7 @@ input { border: 1px solid #443da0; color: #4e47bf; margin: 3px; - font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; -/* min-width: 64px !important;*/ + font: bold 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; } input.optbox { @@ -1340,20 +1326,28 @@ input[type=submit]:active, input.cancel:active { } } -@media screen and (min-width: 1024px) { -body, td, textarea, div, p.mailbody { +@media screen and (min-width: 1300px) { +.iframed body, .iframed td, .iframed textarea, .iframed div, .iframed p.mailbody, .iframed input, .iframed input[type="submit"], .iframed input[type="reset"], .iframed p.error { + font-size: 10pt !important; +} + +.iframed .topbuttons input[type="submit"], .iframed .topbuttons input[type="reset"] { + margin: 3px 5px !important; +} + +.iframed #pagenav input { + font-size: 0 !important; +} +} + +@media screen and (min-width: 1500px) { +body, td, textarea, div, p.mailbody, input, input[type="submit"], input[type="reset"], p.error { font-size: 10pt !important; } .topbuttons input[type="submit"], .topbuttons input[type="reset"] { margin: 3px 5px !important; } -} - -@media screen and (min-width: 1500px) { -input, input[type="submit"], input[type="reset"], p.error { - font-size: 10pt !important; -} #pagenav input { font-size: 0 !important;