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 23683ca35..f0c2987cc 100644 --- a/apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java +++ b/apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java @@ -725,8 +725,14 @@ public class I2PSnarkServlet extends BasicServlet { if (showDebug) { out.write("\n"); out.write(""); + out.write("
"); + out.write("
"); out.write(dht.renderStatusHTML()); - out.write(""); + out.write("
"); } } out.write("\n"); @@ -1710,10 +1716,26 @@ public class I2PSnarkServlet extends BasicServlet { out.write(DataHelper.formatDuration2(Math.max(remainingSeconds, 10) * 1000)); // (eta 6h) out.write("\n\t"); out.write(""); - if (remaining > 0) + if (remaining > 0) { + long percent = 100 * (total - remaining) / total; + out.write("
"); + out.write("
"); + out.write("
"); out.write(formatSize(total-remaining) + thinsp(noThinsp) + formatSize(total)); - else if (remaining == 0) + out.write("
"); + } else if (remaining == 0) { + // needs locale configured for automatic translation + SimpleDateFormat fmt = new SimpleDateFormat("HH:mm, EEE dd MMM yyyy"); + fmt.setTimeZone(SystemVersion.getSystemTimeZone(_context)); + long[] dates = _manager.getSavedAddedAndCompleted(snark); + String date = fmt.format(new Date(dates[1])); + out.write("
"); out.write(formatSize(total)); // 3GB + out.write("
"); + } //else // out.write("??"); // no meta size yet out.write("\n\t"); @@ -1825,7 +1847,7 @@ public class I2PSnarkServlet extends BasicServlet { continue; out.write(""); + out.write("\">"); PeerID pid = peer.getPeerID(); String ch = pid != null ? pid.toString().substring(0, 4) : "????"; String client; @@ -1867,7 +1889,10 @@ public class I2PSnarkServlet extends BasicServlet { String ps = String.valueOf(pct); if (ps.length() > 5) ps = ps.substring(0, 5); - out.write(ps + "%"); + out.write("
"); + out.write("
"); + out.write("
" + ps + "%
"); + out.write("
"); } } else { pct = (float) 101.0; @@ -2907,11 +2932,7 @@ public class I2PSnarkServlet extends BasicServlet { if (announce != null) { announce = DataHelper.stripHTML(announce); buf.append(""); - String trackerLink = getTrackerLink(announce, snark.getInfoHash()); - if (trackerLink != null) - buf.append(trackerLink); - else - toThemeImg(buf, "details"); + toThemeImg(buf, "details"); buf.append("").append(_t("Primary Tracker")).append(": "); buf.append(getShortTrackerLink(announce, snark.getInfoHash())); buf.append(""); @@ -2920,7 +2941,7 @@ public class I2PSnarkServlet extends BasicServlet { if (alist != null && !alist.isEmpty()) { buf.append(""); toThemeImg(buf, "details"); - buf.append("") + buf.append("") .append(_t("Tracker List")).append(": "); for (List alist2 : alist) { buf.append('['); @@ -2951,7 +2972,8 @@ public class I2PSnarkServlet extends BasicServlet { .append("\n"); } long dat = meta.getCreationDate(); - SimpleDateFormat fmt = new SimpleDateFormat("yyyy-MM-dd HH:mm"); + // needs locale configured for automatic translation + SimpleDateFormat fmt = new SimpleDateFormat("HH:mm, EEEE dd MMMM yyyy"); fmt.setTimeZone(SystemVersion.getSystemTimeZone(_context)); if (dat > 0) { String date = fmt.format(new Date(dat)); @@ -3306,19 +3328,21 @@ public class I2PSnarkServlet extends BasicServlet { status = toImg("cancel") + ' ' + _t("File not found in torrent?"); } else if (remaining == 0 || length <= 0) { complete = true; - status = toImg("tick") + ' ' + _t("Complete"); + status = "
" + toImg("tick") + "
" + _t("Complete"); } else { priority = fai.priority; if (priority < 0) - status = toImg("cancel"); + status = "
" + toImg("cancel") + "
"; else if (priority == 0) - status = toImg("clock"); + status = "
" + toImg("clock") + "
"; else - status = toImg("clock_red"); - status += " " + - ("") + - (100 * (length - remaining) / length) + "% " + ("") + _t("complete") + ("") + - " (" + DataHelper.formatSize2(remaining) + "B " + _t("remaining") + ")"; + status = "
" + toImg("clock_red") + "
"; + long percent = 100 * (length - remaining) / length; + status += "
" + + "
" + percent + "%
"; } } diff --git a/history.txt b/history.txt index 9b9fd9717..cb2ff8029 100644 --- a/history.txt +++ b/history.txt @@ -1,3 +1,10 @@ +2017-05-20 str4d + * i2psnark: + - Make DHT debug section collapsible + - Tooltips for downloading/finished torrents + - Download bars for torrents, torrent parts and peer downloads + - Friendlier date format (with completed: tooltip for finished torrents) + 2017-05-19 zzz * Console: Move /peers page rendering from router to console (ticket #1879) * i2psnark: Add ut_comment UI and per-torrent configuration diff --git a/installer/resources/themes/snark/classic/images/debug.png b/installer/resources/themes/snark/classic/images/debug.png new file mode 100644 index 000000000..70bdd2cf6 Binary files /dev/null and b/installer/resources/themes/snark/classic/images/debug.png differ diff --git a/installer/resources/themes/snark/classic/snark.css b/installer/resources/themes/snark/classic/snark.css index 52b78634c..cda37082b 100644 --- a/installer/resources/themes/snark/classic/snark.css +++ b/installer/resources/themes/snark/classic/snark.css @@ -39,6 +39,12 @@ body.iframed { outline: none; } +.toggleview, .snarkConfigTitle, .snarknavbar, img, input[type="image"] { + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; +} + .page { font-size: 9pt !important; line-height: 160% !important; @@ -333,15 +339,6 @@ table.snarkTorrents { margin-top: -1px !important; } -.snarkTorrents th { - text-align: left; -} - -.snarkTorrents td { - line-height: 90%; - text-align: left; -} - .snarkTorrents td:nth-child(1) { width: 24px !important; } @@ -349,8 +346,8 @@ table.snarkTorrents { .snarkTorrents td:nth-child(3), .snarkTorrents td:nth-child(4) { width: 16px !important; - padding: 0 !important; text-align: center !important; + font-weight: bold; } pre { @@ -386,8 +383,8 @@ thead { border-bottom: 1px solid #101; } -tfoot th { - padding-bottom: 4px !important; +tfoot tr:first-child th { + vertical-align: middle !important; } tfoot tr:nth-child(n+1) { @@ -435,9 +432,15 @@ tfoot:nth-child(4) img { padding-right: 0 !important; } +/* tfoot tr:nth-child(n+1) { text-align: left; } +*/ + +.snarkTorrents tfoot tr:first-child { + line-height: 130%; +} .headerstatus { text-align: left; @@ -504,13 +507,8 @@ tfoot tr:nth-child(n+1) { white-space: nowrap; } -.snarkTorrents tfoot th { - vertical-align: top; - font-weight: normal; -} - -.snarkTorrents tfoot th::first-line { - font-weight: bold; +.snarkTorrents tfoot tr:first-child th { + vertical-align: middle; } .snarkTorrents tfoot th br { @@ -534,7 +532,6 @@ table.snarkTorrents { } .snarkTorrents td { - line-height: 105%; text-align: left; } @@ -542,13 +539,6 @@ table.snarkTorrents { width: 24px !important; } -.snarkTorrents td:nth-child(3), -.snarkTorrents td:nth-child(4) { - width: 16px !important; - padding: 0 !important; - text-align: center !important; -} - .snarkTorrents td:nth-child(3) { text-align: right !important; } @@ -772,16 +762,6 @@ td.subHeaderPriority { padding: 4px !important; } -/* -.headerstatus { - min-width: 250px; -} - -td.priority:last-child { - min-width: 350px !important; -} -*/ - tr.priority:last-child { border-bottom: none !important; } @@ -790,21 +770,22 @@ th.headerdownloaded { padding-left: 25px !important; } -td.snarkFileStatus { +.snarkFileStatus { text-align: center; white-space:nowrap; + width: 120px; } -td.snarkFileIcon { +.snarkFileIcon { width: 16px; padding: 0; } -td.snarkFileIcon img { +.snarkFileIcon img { filter: none; } -td.snarkFileStatusIcon { +.snarkFileStatusIcon { width: 24px; padding: 0 4px 0 0; text-align: center; @@ -814,7 +795,7 @@ td.snarkFileStatusIcon { td { font-size: 9pt; - padding: 1px; + padding: 2px; opacity: 1; color: #333 !important; } @@ -912,9 +893,7 @@ td.snarkTorrentAction { } .snarkTorrentstatus { - line-height: 90%; min-width: 0; - padding: 2px 2px 2px 0; } .snarkTorrentStatus { @@ -951,9 +930,6 @@ td.snarkTorrentAction { .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded { - font-size: 8pt; - line-height: 90%; - padding: 0 3px; } .snarkTorrentRateUp, @@ -963,14 +939,8 @@ td.snarkTorrentAction { text-align: center !important; } -td.snarkTorrentDownloaded { +.snarkTorrentDownloaded { font-weight: bold; - width: 110px; - padding: 0 5px; -} - -.snarkTorrents img { - padding: 4px 3px !important; } .snarkTorrents th img { @@ -978,8 +948,9 @@ td.snarkTorrentDownloaded { max-height: 22px; } -.snarkTorrents tfoot th { +.snarkTorrents tfoot tr:first-child th { padding: 6px 4px !important; + vertical-align: middle; } .snarkTorrents tr:hover, .snarkDirInfo tr:hover { @@ -987,6 +958,10 @@ td.snarkTorrentDownloaded { background: linear-gradient(to bottom, #fff 0%, #ffe 100%) !important; } +tr:hover .percentBarText { + opacity: 0.75; +} + .snarkTorrentEven { background: #eef; } @@ -1041,13 +1016,15 @@ td.snarkTorrentDownloaded { font-weight: normal; padding: 4px 2px; color: #0c153d !important; + width: 1%; + white-space: nowrap; } .snarkFileStatus { font-size: 9pt; font-style: italic; min-width: 220px; - padding: 4px 5px 4px 15px; + padding: 4px; text-align: center; text-align: left !important; } @@ -1056,51 +1033,79 @@ td.snarkTorrentDownloaded { font-style: italic; } -/* -div.percentBarOuter { - background: #fff !important; - border: 1px solid #9f9; - border-bottom: 1px solid #474; - border-right: 1px solid #474; - border-radius: 0; - float: left; - box-shadow: none; - opacity: 1; +/* download bars */ + +.snarkTorrentDownloaded { + text-align: center !important; + width: 110px; } -div.percentBarInner { - border: none; - height: 14px; - background: #1c943a; - background: linear-gradient(to bottom, #1c943a 0%, #092f10 50%, #0d2707 50%, #091b05 50%, #091503 100%); +.snarkDirInfo .snarkFileStatus img { + float: left; + margin: 0 10px 0 7px; } -div.percentBarInner.percentBarComplete { - background: #eef; - background: linear-gradient(to bottom, #eef 0%, #002200 52%, #000000 52%, #eef 100%); +.snarkDirInfo td { + padding-top: 6px !important; + padding-bottom: 6px !important; +} + +.percentBarOuter { + background: #eef; + background: repeating-linear-gradient(135deg, #eef 1px, #eef 5px, #ddf 6px, #ddf 11px); + border: 1px solid #99f; + box-shadow: 0 0 1px 0 rgba(196,196,196,0.8); + margin: 0 auto; +} + +.snarkTorrentDownloaded .percentBarOuter { + margin-left: 5px; +} + +.peerinfo .percentBarOuter { + filter: saturate(0.5); +} + +.percentBarInner { + border: none; + height: 14px; + background: #bbf; + background: linear-gradient(to bottom, #fff 0%, #eef 50%, #ddf 50%, #bbf 100%); + box-shadow: inset 0 0 0 1px #ddf; + opacity: 0.8; } .percentBarText, .percentBarOuter { - text-align: center; - height: 14px; - top: 0; - width: 80px; + width: 110px; + text-align: center; + vertical-align: middle; } -.percentBarText{ - text-align: center; - font-weight: bold; - line-height: 140%; - text-shadow: 0 1px 1px #000; +.snarkDirInfo .percentBarText, .snarkDirInfo .percentBarOuter, .peerinfo .percentBarText, .peerinfo .percentBarOuter { + width: 80px; + display: inline-block; } -.snarkTorrentDownloaded .percentBarText, .snarkTorrentDownloaded .percentBarOuter { - width: 110px !important; - word-spacing: -0.2em; - font-size: 7.5pt; +.percentBarText { + text-align: center; + font-weight: bold !important; + white-space: nowrap; + color: #005; + text-shadow: 0 0 1px rgba(255,255,255,0.5); + opacity: 0; + transition: ease opacity 0.3s 0.5s; + line-height: 14px; } -*/ +.percentBarText:hover, .percentBarText:focus { + opacity: 0.75; + transition: ease opacity 0.3s; +} + +.priorityIndicator { +} + +/* end download bars */ .choked, .choked a:hover { color: #900 !important; @@ -1209,9 +1214,9 @@ _:-ms-lang(x), .snarkConfigTitle, label.toggleview, .configsectionpanel .snarkCo padding-left: 5px; } -#bwHelp a { - font-style: normal; +#configs a { font-weight: bold; + margin-left: 3px; } form { @@ -1232,26 +1237,6 @@ hr { background: #444; } -hr.debug { - width: 100%; - background: #89f; - background: linear-gradient(to right, #89f 40%, #eef); -} - -hr.debug + hr { - margin-bottom: -5px; -} - -hr.debug:nth-child(n+7) { - margin: -10px 0 3px; -} - -hr.debug:last-child { - height: 0; - margin-bottom: -5px; - margin-top: -15px; -} - a:link { font-weight: normal; text-decoration: none; @@ -1375,7 +1360,7 @@ input[type="text"], textarea { a.control { vertical-align: middle; text-align: left; - padding: 2px 5px 1px 3px !important; + padding: 2px 8px 1px 3px !important; display: inline-block; margin: -1px 0 1px 5px; min-width: 0 !important; @@ -1387,8 +1372,14 @@ a.control:hover, a.control:focus { border: 1px solid #89f; } +a.control:active img { + mix-blend-mode: luminosity; +} + a.control img { margin: 0 !important; + height: 14px; + width: 14px; } .script { @@ -1548,6 +1539,12 @@ select { } } +select[disabled], select[disabled]:hover { + background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%) !important; + opacity: 0.7; + cursor: not-allowed; +} + select::-ms-expand { display: none; } @@ -1589,6 +1586,7 @@ img:hover { padding: 5px !important; opacity: 0.7; border: 1px solid #349 !important; + border-radius: 2px; background: #fff; background: linear-gradient(to bottom, #fff 0%, #fff 50%, #ddf 51%); box-shadow: inset 0 0 1px 1px #fff; @@ -1808,6 +1806,10 @@ table.trackerconfig td:first-child { vertical-align: middle; } +#configs a { + font-weight: bold; +} + .configsectionpanel td[colspan="5"] { border-top: 1px solid #89f; } @@ -2070,6 +2072,88 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac text-shadow: 0 0 1px #fff; } +/* debug panel */ + +#dhtdebugPanel { + background: linear-gradient(to bottom, #fff 0%, #eef 100%); + 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); + margin: -25px 0 -12px; +} + +.dhtDebug th b:first-of-type, .dhtDebug th b:first-of-type + br + hr.debug { + display: none; +} + +input#toggle_debug:not(checked) + label { + padding-bottom: 2px; +} + +input#toggle_debug:not(checked) + label > img { + margin-right: -2px !important; +} + +input#toggle_debug:not(checked) + label + #dhtDebugInner { + display: block; +} + +input#toggle_debug:checked + label + #dhtDebugInner { + display: none; +} + +.iframed input#toggle_debug:not(checked) + label + #dhtDebugInner { + display: block; +} + +.iframed input#toggle_debug:checked + label + #dhtDebugInner { + display: none; +} + +/* end debug panel */ + +.dhtDebug th { + padding: 0 10px 8px !important; + word-break: break-all; + font-weight: normal; + background: #fff; +} + +hr.debug:first-of-type { + background: transparent; + margin-bottom: -5px; + margin-top: -2px; +} + +hr.debug { + width: 100%; + background: #89f; + background: linear-gradient(to right, #89f 40%, #eef); +} + +hr.debug + hr { + margin-bottom: -5px; +} + +hr.debug:nth-child(n+7) { + margin: -10px 0 3px; +} + +hr.debug:last-child { + height: 0; + margin-bottom: -5px; + margin-top: -15px; +} + /* end debug */ /* Resource Errors */ @@ -2244,6 +2328,10 @@ b.alwaysShow { font-weight: bold; } +.snarkTorrents .debuginfo td, .snarkTorrents .peerinfo td { + font-weight: normal; +} + td#bwHelp { background: url(images/infocircle.png) left 10px center no-repeat; background-size: 14px auto !important; @@ -2271,6 +2359,14 @@ body { margin-top: -5px !important; } +.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:nth-child(n+1):hover, .snarkRefresh:focus, .snarkRefresh:nth-child(n+1):focus .snarkRefresh:active, .snarkRefresh:nth-child(n+1):active { + background-size: 14px 14px, 100% 100% !important; +} + +.snarkRefresh:link:first-child { + padding-left: 22px !important; +} + .addtorrentsection, .newtorrentsection, .configsection, .configsectionpanel { margin-top: 4px !important; margin-bottom: 4px !important; @@ -2287,6 +2383,19 @@ table.SnarkDirInfo { .dirInfoComplete { display: none; } + +.percentBarText, .percentBarOuter { + width: 100px; + line-height: 15px; +} + +.snarkDirInfo .percentBarText, .snarkDirInfo .percentBarOuter { + width: 60px; +} + +#dhtDebugInner { + margin-top: -24px !important; +} } @media screen and (max-width: 1200px) { @@ -2295,23 +2404,24 @@ table.SnarkDirInfo { padding-bottom: 5px; } -.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:nth-child(n+1):hover, .snarkRefresh:focus, .snarkRefresh:nth-child(n+1):focus .snarkRefresh:active, .snarkRefresh:nth-child(n+1):active { - background-size: 14px 14px, 100% 100% !important; -} - -.snarkRefresh:link:first-child { - padding-left: 22px !important; -} - #configs td:first-child::before { content: ""; min-height: 30px; } + +.percentBarText { + line-height: 16px; +} + +.snarkTorrents tfoot tr:first-child { + line-height: 100%; +} } @media screen and (max-width: 1400px) { -.snarkRefresh:link:first-child { - padding-left: 23px !important; + +.percentBarText { + line-height: 15px; } } @@ -2320,6 +2430,14 @@ body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_ font-size: 9pt !important; } +.snarkRefresh { + font-size: 11pt !important; +} + +.snarkRefresh:link { + padding-left: 25px !important; +} + .percentDownloaded { pointer-events: none; /* hide tooltip */ } @@ -2330,14 +2448,6 @@ body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_ font-size: 10pt !important; } -.snarkRefresh { - font-size: 11pt !important; -} - -.snarkRefresh:link { - padding-left: 25px !important; -} - .snarkMessages li, .snarkTorrents tt { font-size: 9pt; } @@ -2349,7 +2459,6 @@ body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_ td.snarkTorrentDownloaded { white-space: nowrap; - padding: 0 10px; } .snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover { diff --git a/installer/resources/themes/snark/dark/images/debug.png b/installer/resources/themes/snark/dark/images/debug.png new file mode 100644 index 000000000..70bdd2cf6 Binary files /dev/null and b/installer/resources/themes/snark/dark/images/debug.png differ diff --git a/installer/resources/themes/snark/dark/snark.css b/installer/resources/themes/snark/dark/snark.css index be6a76c42..8f76e9542 100644 --- a/installer/resources/themes/snark/dark/snark.css +++ b/installer/resources/themes/snark/dark/snark.css @@ -63,6 +63,12 @@ body.iframed { background: linear-gradient(to right, #000 0%, #020 50%, #000 100%); } +.toggleview, .snarkConfigTitle, .snarknavbar, img, input[type="image"] { + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; +} + ::selection { background: #030 !important; color: white; @@ -329,6 +335,7 @@ th { white-space: nowrap; background: #000; background: linear-gradient(to bottom, #010, #000); + vertical-align: middle; } thead th { @@ -369,7 +376,6 @@ tfoot tr:nth-child(n+1) { .headerpriority { text-align: left; - padding-left: 10px; } .ParentDir { @@ -423,16 +429,15 @@ tfoot tr:nth-child(n+1) { font-weight: normal; } -.snarkTorrents tfoot th::first-line { - font-weight: bold; -} - .snarkTorrents tfoot th:nth-child(3) { text-align: center; } -.snarkTorrents tfoot th { - vertical-align: top; +.snarkTorrents tfoot tr:first-child th { + padding: 6px 4px !important; + vertical-align: middle; + font-weight: bold; + line-height: 140%; } .snarkTorrents tfoot th br { @@ -453,7 +458,7 @@ table.SnarkTorrents { } .snarkTorrents td { - line-height: 110%; + line-height: 120%; text-align: left; font-size: 8pt !important; } @@ -491,6 +496,7 @@ table.SnarkTorrents { font-size: 8pt; font-weight: bold; display: inline-block; + line-height: 120%; } .snarkTorrentInfo img { @@ -626,7 +632,6 @@ table.SnarkDirInfo { .snarkDirInfo .headerpriority { text-align: center !important; vertical-align: middle; - padding-right: 10px; } td.subHeaderPriority, td.priority { @@ -655,7 +660,6 @@ td.subHeaderPriority { } .headerstatus { - min-width: 150px; text-align: left; padding-left: 18px; } @@ -678,7 +682,7 @@ th.headerdownloaded { padding-left: 3px; } -td.snarkFileStatus { +.snarkFileStatus { text-align: left; white-space: nowrap; } @@ -697,8 +701,9 @@ td.snarkFileStatusIcon { td { padding: 1px; color: #ee9 !important; - opacity: 1; + opacity: 1; font-size: 9pt; + vertical-align: middle; } .mainsection td { @@ -776,7 +781,6 @@ td.snarkTorrentStatus:nth-child(2) { min-width: 48px; font-weight: bold; color: #dd9 !important; - font-size: 8pt; padding: 1px !important; } @@ -786,10 +790,8 @@ td.snarkTorrentStatus:nth-child(2) { } .snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded { - font-size: 8pt; padding: 0 3px; line-height: 90%; - word-spacing: -0.05em; } .snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded { @@ -799,10 +801,8 @@ td.snarkTorrentStatus:nth-child(2) { .snarkTorrentDownloaded { color: #ee9 !important; white-space: nowrap; -} - -td.snarkTorrentDownloaded { font-weight: bold; + text-align: center; } .snarkTorrentUploaded { @@ -825,15 +825,15 @@ td.snarkTorrentDownloaded { padding: 1px !important; } -.snarkTorrents tfoot th { - padding: 6px 4px !important; -} - .snarkTorrents tr:hover, .snarkDirInfo tr:hover { background: #030 !important; box-shadow: inset 0 0 1px 0 #494; } +tr:hover .percentBarText { + opacity: 1; +} + /* MS Edge fix */ _:-ms-lang(x), .snarkTorrents tr, .snarkTorrents tr:hover, .snarkDirInfo tr:hover { box-shadow: none !important; @@ -903,23 +903,24 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven { } .snarkFileName { - padding: 4px 0 !important; + padding: 4px 5px 4px 0 !important; text-align: left !important; + word-break: break-all; } .snarkFileSize { padding: 4px 2px; font-weight: normal; color: #bb7 !important; + width: 1%; + white-space: nowrap; } .snarkFileStatus { - padding: 4px 5px 4px 15px; - text-align: center; + padding-left: 15px; font-style: italic; - font-size: 9pt; text-align: left; - min-width: 220px; + width: 130px; } .snarkFileStatus img { @@ -936,50 +937,85 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven { padding-right: 2px; } -/* -div.percentBarOuter { - background: #000 !important; - border: 1px solid #9f9; - border-bottom: 1px solid #474; - border-right: 1px solid #474; - border-radius: 0; +/* download bars */ + +.snarkDirInfo .snarkFileStatus img { float: left; + margin: 0 10px 0 7px; +} + +.percentBarOuter { + background: #000; + background: repeating-linear-gradient(135deg, #000 1px, #000 5px, #010 6px, #010 11px); + border: 1px solid #040; + border-bottom: 1px solid #020; + border-right: 1px solid #020; box-shadow: none; opacity: 1; + box-shadow: 0 0 1px 1px rgba(0,0,0,0.8); + margin: auto; } -div.percentBarInner { - border: none; - height: 14px; - background: #1c943a; - background: linear-gradient(to bottom, #1c943a 0%, #092f10 50%, #0d2707 50%, #091b05 50%, #091503 100%); +.snarkDirInfo .percentBarOuter { + float: left; } -div.percentBarInner.percentBarComplete { - background: #001100; - background: linear-gradient(to bottom, #001100 0%, #002200 52%, #000000 52%, #001100 100%); +.percentBarInner { + height: 100%; + background: #0e5f00; + background: linear-gradient(to bottom, rgba(28, 148, 58, 0.6) 0%, rgba(9, 47, 16, 0.6) 50%, rgba(13, 39, 7, 0.6) 50%, rgba(9, 27, 5, 0.6) 50%, rgba(9, 21, 3, 0.6) 100%); + box-shadow: inset 0 0 0 1px #000; } .percentBarText, .percentBarOuter { + width: 110px; text-align: center; - height: 14px; - top: 0; + vertical-align: middle; +} + +.snarkDirInfo .percentBarText, .snarkDirInfo .percentBarOuter, .peerinfo .percentBarText, .peerinfo .percentBarOuter { width: 80px; } -.percentBarText{ +.percentBarText { text-align: center; font-weight: bold; - line-height: 140%; - text-shadow: 0 1px 1px #000; + padding: 1px 0; + white-space: nowrap; + display: block; + color: #dfd137; + opacity: 0; + text-shadow: 0 0 1px rgba(0,0,0,0.8); + transition: ease opacity 0.3s 0.5s; } -.snarkTorrentDownloaded .percentBarText, .snarkTorrentDownloaded .percentBarOuter { - width: 110px !important; - word-spacing: -0.2em; - font-size: 7.5pt; +.percentBarText:hover, .percentBarText:focus { + opacity: 0.75; + transition: ease opacity 0.3s; } -*/ + +.percentBarOuterComplete .percentBarText { + color: #ee9; + font-weight: normal; + opacity: 1; +} + +.snarkDirInfo .percentBarOuterComplete .percentBarText { + text-align: left; +} + +.percentBarOuterComplete, .percentBarComplete.percentBarInner { + border: 1px solid transparent; + background: none !important; + box-shadow: none !important; +} + +.priorityIndicator { + width: 32px; + float: left; +} + +/* end download bars */ .choked { color: #f00000 !important; @@ -1007,12 +1043,11 @@ div.percentBarInner.percentBarComplete { } .snarkAddInfo { - font-size: 9pt; - line-height: 135% !important; font-weight: normal; background: url(images/infocircle.png) left center no-repeat; background-size: 14px auto; padding-left: 20px; + line-height: 140%; } .snarkConfigTitle, label.toggleview { @@ -1133,28 +1168,6 @@ hr { text-align: center; } -hr.debug { - width: 100%; - background: #131; - background: linear-gradient(to right, #131 50%, #000700); -} - -hr.debug + b { - color: #ff7; - text-transform: uppercase; -} - -hr.debug:nth-child(n+7) { - margin-top: -11px; - margin-bottom: 2px; - opacity: 0.5; -} - -hr.debug:last-child { - background: #000; - margin-bottom: -5px; -} - a:link { color: #7c7; text-decoration: none; @@ -1265,7 +1278,7 @@ input[type="image"]:hover, a img:hover, input[type="image"]:focus, a:focus img { outline: none; } -.snarkTorrents th:last-child, .snarkTorrents td:last-child { +.snarkTorrents thead th:last-child, .snarkTorrents td:last-child { white-space: nowrap; } @@ -1437,6 +1450,16 @@ select:hover, select:focus, select:active { background: #000 url(images/dropdown_hover.png) right center no-repeat !important; } +select[disabled], select[disabled]:hover { + background: #000 url(images/dropdown.png) right center no-repeat !important; + background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #020 0%, #000 20%, #000 80%, #010 100%) !important; + border: 1px outset #191; + box-shadow: none; + color: #494 !important; + opacity: 0.7; + cursor: not-allowed; +} + select::-ms-expand { display: none; } @@ -1809,9 +1832,9 @@ table.trackerconfig td:first-child { color: #ee9; box-shadow: inset 0 0 5px 2px #000; word-wrap: break-word; + font-weight: bold; text-align: center; background: #000 url(images/configuration.png) no-repeat scroll right center; - font-weight: bold; background: linear-gradient(to bottom, #000 10%, rgba(0,40,0,0.3) 10%, rgba(0,15,0,0.5) 100%), url(/themes/console/dark/images/camotile2.png) top left repeat; } @@ -1928,9 +1951,16 @@ label.toggleview, .snarkConfigTitle a:visited { background-size: 14px 14px; } -.peerinfo td, .debuginfo td { - padding-top: 5px; - padding-bottom: 5px; +.snarkTorrents .peerinfo td, .snarkTorrents .debuginfo td { + padding-top: 2px !important; + padding-bottom: 2px !important;; +} + +.peerinfo td:first-child::before, .debuginfo td:first-child::before { + content: ""; + display: inline-block; + min-height: 20px; + vertical-align: middle; } /* debug */ @@ -1982,6 +2012,93 @@ label.toggleview, .snarkConfigTitle a:visited { color: #cc7; } +.dhtdebug th { + word-break: break-all; + padding: 0 10px 10px !important; +} + +/* debug panel */ + +#dhtdebugPanel { + background: linear-gradient(to right, #000, #010, #000); + border: 1px solid #494; + border-top: none; + box-shadow: inset 0 0 0 1px #000; + text-align: center; + padding-bottom: 13px; +} + +#dhtDebugInner { + text-align: left; + padding: 5px; + background: #000; + margin: -23px 0 -12px; +} + +.dhtDebug th b:first-of-type, .dhtDebug th b:first-of-type + br + hr.debug { + display: none; +} + +input#toggle_debug:not(checked) + label { + padding-bottom: 2px; +} + +input#toggle_debug:not(checked) + label > img { + margin-right: -2px !important; +} + +input#toggle_debug:not(checked) + label + #dhtDebugInner { + display: block; +} + +input#toggle_debug:checked + label + #dhtDebugInner { + display: none; +} + +.iframed input#toggle_debug:not(checked) + label + #dhtDebugInner { + display: block; +} + +.iframed input#toggle_debug:checked + label + #dhtDebugInner { + display: none; +} + +/* end debug panel */ + +hr.debug { + width: 100%; + background: #131; + background: linear-gradient(to right, #131 50%, #000700); +} + +hr.debug + b { + color: #ff7; + text-transform: uppercase; +} + +hr.debug:first-of-type { + background: transparent; + margin-bottom: -5px; + margin-top: -2px; +} + +hr.debug + hr { + display: block; + background: transparent; + margin-bottom: -3px; +} + +hr.debug:nth-child(n+7) { + margin-top: -11px; + margin-bottom: 2px; + opacity: 0.5; +} + +hr.debug:last-child { + background: #000; + margin-bottom: -5px; +} + /* end debug */ #totals { @@ -2032,14 +2149,7 @@ label.toggleview, .snarkConfigTitle a:visited { /* configs */ -#bwHelp i { - display: inline-block; - vertical-align: middle; -} - - -#bwHelp a { - font-style: normal; +#configs a { font-weight: bold; } @@ -2282,6 +2392,19 @@ b.alwaysShow { #configs td:first-child { min-width: 200px !important; } + +.snarkFileStatus { + width: 110px; +} + +.snarkFileStatus img[src*="clock"] { + margin-top: 6px; +} + +.snarkDirInfo .percentBarText, .snarkDirInfo .percentBarOuter { + width: 60px; + padding: 0; +} } @media screen and (max-width: 1200px) { @@ -2312,6 +2435,22 @@ td#bwHelp a { #trackerselect a { max-width: 300px; } + +.percentBarOuter { + margin: 2px auto !important; +} + +.percentBarText { + line-height: 130%; +} + +.percentBarText, .percentBarOuter, .snarkTorrentDownloaded { + width: 100px; +} + +.snarkFileStatus img[src*="clock"] { + margin-top: 4px; +} } @media screen and (min-width: 1100px) { @@ -2325,8 +2464,8 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, code, textarea, input, input[ty } .snarkTorrentInfo td, .snarkDirInfo td, .snarkTorrents .peerinfo td { - padding-top: 6px !important; - padding-bottom: 6px !important; + padding-top: 4px !important; + padding-bottom: 4px !important; } #configs td:first-child { @@ -2339,10 +2478,32 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, code, textarea, input, input[ty } @media screen and (min-width: 1200px) { +.snarkRefresh:link { + font-size: 11pt !important; +} + +.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:focus, .snarkRefresh:active, .snarkRefresh:visited, +.snarkRefresh:link:first-child, .snarkRefresh:hover:first-child, .snarkRefresh:focus:first-child, .snarkRefresh:active:first-child, .snarkRefresh:visited:first-child, +.snarkRefresh:link:nth-child(2), .snarkRefresh:hover:nth-child(2), .snarkRefresh:focus:nth-child(2), .snarkRefresh:active:nth-child(2), .snarkRefresh:visited:nth-child(2) { + background-size: 16px auto, 100% 100% !important; + padding-left: 24px !important; +} + +.snarkRefresh:link:first-child { + padding-left: 25px !important; +} + .snarkConfigtitle, .snarkConfigTitle a, label.toggleview { font-size: 12pt !important; } +.snarkTorrentDownloaded { + white-space: nowrap; + padding: 0 8px; + width: 110px; + text-align: center; +} + .percentDownloaded { pointer-events: none; /* hide tooltip */ } @@ -2351,7 +2512,7 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, code, textarea, input, input[ty min-height: 26px; } -td#bwHelp a { +#configs a { display: inline-block; white-space: nowrap; margin-left: 4px; @@ -2367,10 +2528,6 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, code, textarea, input, input[ty font-size: 10pt !important; } -.snarkRefresh:link { - font-size: 11pt !important; -} - .snarkConfigTitle, .snarkConfigTitle a, label.toggleview { font-size: 12pt !important; } @@ -2380,17 +2537,6 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, code, textarea, input, input[ty padding-top: 4px; } -.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:focus, .snarkRefresh:active, .snarkRefresh:visited, -.snarkRefresh:link:first-child, .snarkRefresh:hover:first-child, .snarkRefresh:focus:first-child, .snarkRefresh:active:first-child, .snarkRefresh:visited:first-child, -.snarkRefresh:link:nth-child(2), .snarkRefresh:hover:nth-child(2), .snarkRefresh:focus:nth-child(2), .snarkRefresh:active:nth-child(2), .snarkRefresh:visited:nth-child(2) { - background-size: 16px auto, 100% 100% !important; - padding-left: 24px !important; -} - -.snarkRefresh:link:first-child { - padding-left: 25px !important; -} - tt, .snarkTorrents tt, .snarkMessages, .snarkMessages a { font-size: 9pt !important; } @@ -2405,11 +2551,6 @@ textarea[name="i2cpOpts"] { height: 11px; } -.snarkTorrentDownloaded { - white-space: nowrap; - padding: 0 8px; -} - .snarkTorrents td:nth-child(3), .SnarkTorrents td:nth-child(4) { width: 18px !important; } diff --git a/installer/resources/themes/snark/light/images/debug.png b/installer/resources/themes/snark/light/images/debug.png new file mode 100644 index 000000000..70bdd2cf6 Binary files /dev/null and b/installer/resources/themes/snark/light/images/debug.png differ diff --git a/installer/resources/themes/snark/light/snark.css b/installer/resources/themes/snark/light/snark.css index e46219d9e..b0fefd434 100644 --- a/installer/resources/themes/snark/light/snark.css +++ b/installer/resources/themes/snark/light/snark.css @@ -41,6 +41,12 @@ body.iframed { outline: none !important; } +.toggleview, .snarkConfigTitle, .snarknavbar, img, input[type="image"] { + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; +} + a:focus img, input[type="image"]:focus, a.control:focus, input[type="radio"]:focus, input[type="checkbox"]:focus, select:focus, input[type="text"]:focus, input.r:focus, input[name="nofilter_dataDir"]:focus, textarea:focus { filter: drop-shadow(0 0 1px #6f072b) !important; } @@ -474,24 +480,12 @@ tfoot tr:nth-child(n+1) { font-weight: normal; } -.snarkTorrents tfoot th { +.snarkTorrents tfoot tr:first-child th { padding: 5px 4px !important; background: #fff; - vertical-align: top; + vertical-align: middle; } -/* -.snarkTorrents td:nth-child(n+6), .snarkTorrents tfoot th:nth-child(n+2) { - font-variant: all-small-caps !important; -} - -@media screen and (-webkit-min-device-pixel-ratio:0) { -.snarkTorrents td:nth-child(n+6), .snarkTorrents tfoot th:nth-child(n+2) { - font-variant: normal !important; -} -} -*/ - td { padding: 2px 4px; color: #272e3f !important; @@ -540,7 +534,7 @@ td:first-child { opacity: 1; } -.snarkTorrents th:last-child br { /* kill "start all/stop all" button wrapping in the header */ +.snarkTorrents thead th:last-child br { /* kill "start all/stop all" button wrapping in the header */ display: none; } @@ -641,6 +635,10 @@ td:first-child { color: #0c111f !important; } +tr:hover .percentBarText { + opacity: 0.75; +} + .peerinfo:hover td:first-child { background: url(images/peer.png) center center no-repeat #ffd !important; } @@ -672,15 +670,98 @@ td:first-child { .snarkFileSize { padding: 4px 2px; font-weight: normal; + width: 1%; + white-space: nowrap; } .snarkFileStatus { - padding: 4px 5px; font-style: italic; text-align: left; white-space: nowrap; + width: 140px; } +/* download bars */ + +.snarkTorrentDownloaded { + width: 110px !important; + text-align: center !important; +} + +.priorityIndicator { + width: 32px; + margin: 0; +} + +.snarkDirInfo .snarkFileStatus img { + float: left; + margin: 0 10px 0 5px; +} + +.snarkFileStatus img[src*="clock"] { + margin-top: 2px; +} + +.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; + box-shadow: none; + box-shadow: 0 0 1px rgba(200,200,200,0.8); + margin: 0 auto; +} + +.percentBarInner { + border: none; + height: 100%; + background: #bbf; + background: linear-gradient(to bottom, #fff 0%, #eef 50%, #ddf 50%, #bbf 100%); + box-shadow: inset 0 0 0 1px #ddf; +} + +.percentBarInner.percentBarComplete { + background: transparent; + vertical-align: middle; +} + +.percentBarText, .percentBarOuter { + text-align: center; + height: 16px; + vertical-align: middle; +} + +.percentBarText { + text-align: center; + font-weight: bold !important; + line-height: 15px; + padding: 1px 0; + white-space: nowrap; + display: block; + color: #005; + text-shadow: 0 0 1px rgba(255,255,255,0.5); + opacity: 0; + transition: ease opacity 0.3s 0.5s; +} + +.percentBarText:hover, .percentBarText:focus { + opacity: 0.75; + transition: ease opacity 0.3s; +} + +.percentBarOuterComplete .percentBarText { + opacity: 1; +} + +.snarkTorrentDownloaded .percentBarText, .snarkTorrentDownloaded .percentBarOuter { + width: 110px !important; +} + +.snarkDirInfo .percentBarText, .snarkDirInfo .percentBarOuter, .peerinfo .percentBarText, .peerinfo .percentBarOuter { + width: 80px !important; +} + +/* end download bars */ + .choked { color: #a00 !important; } @@ -902,25 +983,16 @@ p { } hr { - color: #444; - background: #444; + color: #339; + background: #339; + background: linear-gradient(to right, #339, rgba(110,100,200,0.5)); height: 1px; - border: 0 solid #444; + border: 0 solid #339; width: 0; margin: 5px 0 7px 0; text-align: center; } -hr.debug { - width: 100%; - margin: 3px 0; -} - -hr.debug:nth-child(n+7) { - margin-top: -10px; - background: #339; -} - .headerpriority br { display: none; } @@ -1123,6 +1195,12 @@ select:active, select option { background: #fff; } +select[disabled], select[disabled]:hover { + background: #efefff url(images/dropdown.png) right center no-repeat !important; + opacity: 0.7; + cursor: not-allowed; +} + select::-ms-expand { display: none; } @@ -1459,6 +1537,83 @@ input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; } +.dhtDebug th, .dhtDebug:hover { + font-weight: normal; + padding: 0 10px 10px !important; + background: #efefff; + background: repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 2px, rgba(230, 230, 255, 0.3) 3px, #fff 5px) #fff !important; + word-break: break-all; +} + +/* debug panel */ + +#dhtdebugPanel { + background: linear-gradient(to top, rgba(224, 224, 255, 0.5), #fff), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.5) 2px, rgb(221, 221, 255) 3px, #fff 5px); + box-shadow: inset 0 0 0 1px #efefff; + border: 1px solid #7778bf; + 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); + margin: -26px 0 -12px; +} + +.dhtDebug th b:first-of-type, .dhtDebug th b:first-of-type + br + hr.debug { + display: none; +} + +input#toggle_debug:not(checked) + label { + padding-bottom: 2px; +} + +input#toggle_debug:not(checked) + label > img { + margin-right: -2px !important; +} + +input#toggle_debug:not(checked) + label + #dhtDebugInner { + display: block; +} + +input#toggle_debug:checked + label + #dhtDebugInner { + display: none; +} + +.iframed input#toggle_debug:not(checked) + label + #dhtDebugInner { + display: block; +} + +.iframed input#toggle_debug:checked + label + #dhtDebugInner { + display: none; +} + +/* end debug panel */ + +hr.debug { + width: 100%; + margin: 3px 0; +} + +hr.debug:first-of-type { + background: transparent; + margin-top: -5px; + margin-bottom: -5px; +} + +hr.debug:nth-child(n+7) { + margin-top: -10px; +} + +hr.debug:last-child { + background: transparent; + margin-bottom: -4px; +} + /* end debug */ /* Resource Errors */ @@ -1532,7 +1687,7 @@ input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent .priority::after { content: ""; display: inline-block; - min-height: 30px; + min-height: 28px; vertical-align: middle; } @@ -1580,10 +1735,10 @@ input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent line-height: 100%; } -#bwHelp a { +#configs a { display: inline-block; white-space: nowrap; - font-style: normal; + margin-left: 4px; font-weight: bold; } @@ -1640,57 +1795,6 @@ _:-ms-lang(x), *, *:hover, *:focus, input, input:hover, input:focus, a:hover, a: /*responsive layout */ -@media screen and (max-width: 1000px) { -body, td, .snarkMessages li, .snarkMessages a, button, input, select, .snarkAddInfo, code, tt, th, a, a:link, .snarkAddInfo, .snarkFileStatus { - font-size: 8pt !important; -} - -.snarkRefresh:link { - font-size: 9pt !important; -} - -.snarkConfigTitle a, .snarkConfigTitle, label.toggleview { - font-size: 10pt !important; -} - -.snarkTorrents td:first-child img { - max-height: 16px; -} - -.snarkTorrentName, .snarkTorrentName a { - font-weight: bold; -} - -.snarkTorrents td:nth-child(2), .snarkTorrents td:nth-child(2) a { - white-space: nowrap; - font-weight: bold; -} - -.snarkTorrentStatus b { - display: none; -} - -b.alwaysShow { - display: inline; -} -} - -@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 1000px) { -.snarkConfigTitle a, label.toggleview, .configsectionpanel .snarkConfigTitle { - font-size: 12pt !important; -} -} - -@media screen and (max-width: 1200px) { -.dirInfoComplete { - display: none; -} - -a.snarkRefresh:first-child { - padding-left: 26px !important; -} -} - /* mini-mode: hide status text, upload speed + upload amount in main torrent table at 800px or less */ @media screen and (max-width: 800px) { @@ -1712,7 +1816,7 @@ a.snarkRefresh:first-child { padding: 0 !important; } -.snarkTorrents th:nth-child(7) img { +.snarkTorrents th:nth-child(7) img, .snarkTorrents th:nth-child(9) img { display: none; } @@ -1779,7 +1883,76 @@ input[name="nofilter_dataDir"], textarea[name="i2cpOpts"] { /* end mini-mode */ +@media screen and (max-width: 1000px) { +body, td, .snarkMessages li, .snarkMessages a, button, input, select, .snarkAddInfo, code, tt, th, a, a:link, .snarkAddInfo, .snarkFileStatus { + font-size: 8pt !important; +} + +.snarkRefresh:link { + font-size: 9pt !important; +} + +.snarkConfigTitle a, .snarkConfigTitle, label.toggleview { + font-size: 10pt !important; +} + +.snarkTorrents td:first-child img { + max-height: 16px; +} + +.snarkTorrentName, .snarkTorrentName a { + font-weight: bold; +} + +.snarkTorrents td:nth-child(2), .snarkTorrents td:nth-child(2) a { + white-space: nowrap; + font-weight: bold; +} + +.snarkTorrentStatus b { + display: none; +} + +b.alwaysShow { + display: inline; +} + +.snarkTorrentDownloaded .percentBarText, .snarkTorrentDownloaded .percentBarOuter { + width: 100px !important; +} +} + +@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 1000px) { +.snarkConfigTitle a, label.toggleview, .configsectionpanel .snarkConfigTitle { + font-size: 12pt !important; +} +} + +@media screen and (max-width: 1200px) { +.dirInfoComplete { + display: none; +} + +a.snarkRefresh:first-child { + padding-left: 26px !important; +} +} + +@media screen and (max-width: 1400px) { +#dhtDebugInner { + margin-top: -22px !important; +} +} + @media screen and (min-width: 1200px) { +a.snarkRefresh { + font-size: 10pt !important; +} + +a.snarkRefresh:first-child { + padding-left: 26px !important; +} + .percentDownloaded { pointer-events: none; /* hide tooltip */ } diff --git a/installer/resources/themes/snark/midnight/images/debug.png b/installer/resources/themes/snark/midnight/images/debug.png new file mode 100644 index 000000000..70bdd2cf6 Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/debug.png differ diff --git a/installer/resources/themes/snark/midnight/snark.css b/installer/resources/themes/snark/midnight/snark.css index 48fee9ae2..25ab1e61c 100644 --- a/installer/resources/themes/snark/midnight/snark.css +++ b/installer/resources/themes/snark/midnight/snark.css @@ -41,6 +41,12 @@ body.iframed { outline: none; } +.toggleview, .snarkConfigTitle, .snarknavbar, img, input[type="image"] { + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; +} + .page { font-size: 9pt !important; line-height: 160% !important; @@ -335,11 +341,6 @@ th:first-child { text-align: left !important; } -tfoot td:first-child { - padding-left: 0; - text-align: left !important; -} - th:first-child img { margin: 1px -2px 3px 1px !important; } @@ -352,6 +353,15 @@ tfoot th { padding-bottom: 4px !important; } +tfoot tr:first-child th { + vertical-align: middle !important; +} + +tfoot td:first-child { + padding-left: 0; + text-align: left !important; +} + tfoot img, tfoot:nth-child(2) img, tfoot:nth-child(1) img, tfoot:nth-child(3) img, tfoot:nth-child(4) img { margin: 0 2px 3px 0 !important; padding-right: 0 !important; @@ -403,7 +413,6 @@ tfoot tr:nth-child(n+1) { .snarkTorrents thead th:first-child { width: 36px; -/* padding-right: 0;*/ text-align: center !important; } @@ -500,6 +509,10 @@ tfoot tr:nth-child(n+1) { text-align: center !important; } +.peerinfo td:nth-child(4) { + font-weight: bold; +} + .snarkTorrents td[colspan="10"] { padding: 2px; } @@ -708,17 +721,18 @@ th.headerdownloaded { mix-blend-mode: luminosity; } -td.snarkFileStatus { +.snarkFileStatus { font-size: 8pt; text-align: left; + width: 140px; } -td.snarkFileIcon { +.snarkFileIcon { width: 16px; padding: 0; } -td.snarkFileStatusIcon { +.snarkFileStatusIcon { width: 24px; padding: 0 4px 0 0; text-align: center; @@ -870,31 +884,19 @@ td.snarkTorrentDownloaded { mix-blend-mode: normal; } -/* -.ParentDir a, .ParentDir a:visited { - color: #7972d1 !important; +tr:hover .percentBarText { + opacity: 0.9; } -*/ .snarkTorrents a { display: inline-block; width: 100%; } -/* -.snarkTorrents tr:hover a, .snarkDirInfo tr:hover a { - color: #a099ff; +.snarkTorrents th a { + display: inline; } -.snarkTorrents a:hover, td[onclick]:hover a, .snarkDirInfo a:hover { - color: #652787 !important; -} - -td[onclick]:hover { - cursor: pointer !important; -} -*/ - .snarkTorrentEven { background: #010010; } @@ -946,6 +948,8 @@ _:-ms-lang(x), .snarkTorrentOdd, .snarkTorrentOdd td, .SnarkTorrentEven, .SnarkT font-weight: normal; padding: 4px 2px; color: #7670c2 !important; + width: 1%; + white-space: nowrap; } .snarkFileStatus { @@ -962,51 +966,89 @@ _:-ms-lang(x), .snarkTorrentOdd, .snarkTorrentOdd td, .SnarkTorrentEven, .SnarkT text-align: center !important; } -/* -div.percentBarOuter { - background: #000 !important; - border: 1px solid #9f9; - border-bottom: 1px solid #474; - border-right: 1px solid #474; - border-radius: 0; - float: left; - box-shadow: none; - opacity: 1; +/* download bars */ + +.snarkTorrentDownloaded { + width: 110px !important; + text-align: center !important; } -div.percentBarInner { - border: none; - height: 14px; - background: #1c943a; - background: linear-gradient(to bottom, #1c943a 0%, #092f10 50%, #0d2707 50%, #091b05 50%, #091503 100%); +.snarkDirInfo .snarkFileStatus img { + float: left; + margin: 0 10px 0 5px; } -div.percentBarInner.percentBarComplete { - background: #001100; - background: linear-gradient(to bottom, #001100 0%, #002200 52%, #000000 52%, #001100 100%); +.snarkFileStatus img[src*="clock"] { + margin-top: 4px; +} + +.percentBarOuter { + background: #000; + background: repeating-linear-gradient(135deg, #001 1px, #001 5px, #003 6px, #003 11px); + border: 1px solid #171c3f; + box-shadow: none; + box-shadow: 0 0 1px 1px rgba(0,0,0,0.8); + margin: 3px auto; +} + +.peerinfo .percentBarOuter { + opacity: 0.8; +} + +.percentBarInner { + border: none; + height: 100%; + background: #33a; + background: linear-gradient(to bottom, #33a 0%, #226 50%, #003 50%, #000 100%); + box-shadow: inset 0 0 0 1px #000; + opacity: 0.8; +} + +.snarkTorrentDownloaded .percentBarInner { + background: linear-gradient(to bottom, rgba(51, 51, 170, 0.6) 0%, rgba(34, 34, 102, 0.7) 50%, rgba(0, 0, 51, 0.8) 50%, rgba(0, 0, 0, 0.9) 100%), linear-gradient(to right, rgba(255, 255, 0, 0.5) 55px, rgba(0, 255, 0, 0.5)); +} + +.snarkDirInfo .percentBarInner { + background: linear-gradient(to bottom, rgba(51, 51, 170, 0.6) 0%, rgba(34, 34, 102, 0.7) 50%, rgba(0, 0, 51, 0.8) 50%, rgba(0, 0, 0, 0.9) 100%), linear-gradient(to right, rgba(255, 255, 0, 0.5) 40px, rgba(0, 255, 0, 0.5)); +} + +.snarkDirInfo .percentBarInner[style="width: 0%;"] .percentBarText { + opacity: 0.9; } .percentBarText, .percentBarOuter { - text-align: center; - height: 14px; - top: 0; - width: 80px; + text-align: center; + height: 16px; + vertical-align: middle; + width: 110px; } -.percentBarText{ - text-align: center; - font-weight: bold; - line-height: 140%; - text-shadow: 0 1px 1px #000; +.snarkDirInfo .percentBarText, .snarkDirInfo .percentBarOuter, .peerinfo .percentBarText, .peerinfo .percentBarOuter { + width: 80px; } -.snarkTorrentDownloaded .percentBarText, .snarkTorrentDownloaded .percentBarOuter { - width: 110px !important; - word-spacing: -0.2em; - font-size: 7.5pt; +.percentBarText { + text-align: center; + font-weight: bold !important; + line-height: 16px; + white-space: nowrap; + display: block; + color: #00ecff; + text-shadow: 0 0 1px rgba(0,0,0,0.8); + opacity: 0; + transition: ease opacity 0.3s 0.5s; } -*/ +.peerinfo .percentbartext { + color: #dff1ff; +} + +.percentBarText:hover, .percentBarText:focus { + opacity: 0.9; + transition: ease opacity 0.3s; +} + +/* end download bars */ .choked { color: #900 !important; @@ -1127,7 +1169,6 @@ div.percentBarInner.percentBarComplete { margin-right: -2px; margin-top: -1px; filter: drop-shadow(0 0 1px #000); -/* filter: sepia(100%) hue-rotate(150deg) drop-shadow(0 0 1px #000);*/ } .snarkConfig { @@ -1157,21 +1198,6 @@ hr { background: #3e3d4b; } -hr.debug { - width: 100%; - background: #120f35; - margin: 3px 0; -} - -hr.debug:nth-child(n+7) { - margin: -10px 0 3px; -} - -hr.debug:last-child { - background: #000; - margin-bottom: -5px; -} - .configsectionpanel hr { margin-bottom: 10px; } @@ -1453,6 +1479,17 @@ select:hover { box-shadow: inset 0 1px 1px 0 #c9ceff; } +select[disabled], select[disabled]:hover { + color: #4e47bf !important; + background: #000 url(images/dropdown.png) right 3px center no-repeat !important; + border: 1px solid #3e3f8f; + border-bottom-color: #14144f; + border-right-color: #14144f; + box-shadow: none !important; + opacity: 0.7; + cursor: not-allowed; +} + select option { font-size: 9.5pt; font-weight: normal; @@ -1778,11 +1815,11 @@ _:-ms-lang(x), #trackerselect tr:last-child { padding-left: 5px !important; } -#bwHelp a { +#configs a { display: inline-block; white-space: nowrap; - margin-left: 5px; - font-style: normal; + margin-left: 4px; + font-weight: bold; } .snarkConfig tr:nth-last-child(2) { @@ -2038,6 +2075,90 @@ label.toggleview, .snarkConfigTitle a, .snarkConfigTitle a:visited { color: #c9ceff; } +tfoot .dhtDebug th { + word-break: break-all; + padding: 0 10px 10px !important; +} + +/* debug panel */ + +#dhtDebugPanel { + background: linear-gradient(to bottom, #001, #000009); + border: 1px solid #443da0; + border-top: none; + box-shadow: inset 0 0 0 1px #000; + text-align: center; + padding-bottom: 13px; +} + +#dhtDebugPanel .toggleview { + padding-bottom: 2px !important; +} + +#dhtDebugInner { + text-align: left; + padding: 5px; + background: #000; + margin: -23px 0 -12px; +} + +.dhtDebug th b:first-of-type, .dhtDebug th b:first-of-type + br + hr.debug { + display: none; +} + +input#toggle_debug:not(checked) + label { + padding-bottom: 2px; +} + +input#toggle_debug:not(checked) + label > img { + margin-right: -2px !important; +} + +input#toggle_debug:not(checked) + label + #dhtDebugInner { + display: block; +} + +input#toggle_debug:checked + label + #dhtDebugInner { + display: none; +} + +.iframed input#toggle_debug:not(checked) + label + #dhtDebugInner { + display: block; +} + +.iframed input#toggle_debug:checked + label + #dhtDebugInner { + display: none; +} + +/* end debug panel */ + +hr.debug { + width: 100%; + background: #120f35; + margin: 3px 0; +} + +hr.debug:first-of-type { + background: transparent; + margin-bottom: -5px; + margin-top: -2px; +} + +hr.debug + hr { + display: block; + background: transparent; + margin-bottom: -3px; +} + +hr.debug:nth-child(n+7) { + margin: -10px 0 3px; +} + +hr.debug:last-child { + background: #000; + margin-bottom: -5px; +} + /* end debug */ /* Resource Errors */ @@ -2080,7 +2201,7 @@ label.toggleview, .snarkConfigTitle a, .snarkConfigTitle a:visited { } #NotFound { - border-bottom: 1px solid #443da0; + border: 1px solid #443da0; } /* end Resource Errors */ @@ -2257,6 +2378,26 @@ b.alwaysShow { width: 30px !important; } +.peerinfo .percentBarText, .snarkDirInfo .percentBarText { + line-height: 18px; +} + +.percentBarText, .percentBarOuter { + width: 100px; +} + +.snarkDirInfo .percentBarText, .snarkDirInfo .percentBarOuter, .peerinfo .percentBarText, .peerinfo .percentBarOuter { + width: 60px; +} + +.snarkTorrentDownloaded .percentBarInner { + background: linear-gradient(to bottom, rgba(51, 51, 170, 0.6) 0%, rgba(34, 34, 102, 0.7) 50%, rgba(0, 0, 51, 0.8) 50%, rgba(0, 0, 0, 0.9) 100%), linear-gradient(to right, rgba(255, 255, 0, 0.5) 50px, rgba(0, 255, 0, 0.5)); +} + +.snarkDirInfo .percentBarInner { + background: linear-gradient(to bottom, rgba(51, 51, 170, 0.6) 0%, rgba(34, 34, 102, 0.7) 50%, rgba(0, 0, 51, 0.8) 50%, rgba(0, 0, 0, 0.9) 100%), linear-gradient(to right, rgba(255, 255, 0, 0.5) 30px, rgba(0, 255, 0, 0.5)); +} + .configsectionpanel .snarkConfigTitle { font-size: 10.5pt !important; } @@ -2298,6 +2439,10 @@ a, th, thead th, tfoot th, td, select, select option, .snarkAddInfo, .snarkFileN font-size: 9pt !important; } +.snarkRefresh { + font-size: 10.5pt !important; +} + .snarkConfigTitle, .snarkConfigTitle a, label.toggleview, .snarkRefresh:link { font-size: 11pt !important; } @@ -2316,10 +2461,6 @@ a, th, thead th, tfoot th, td, select, select option, .snarkAddInfo, .snarkFileN font-size: 10pt !important; } -.snarkRefresh { - font-size: 10.5pt !important; -} - .snarkConfigTitle, .toggleview { padding: 4px 25px 4px 22px; } diff --git a/installer/resources/themes/snark/ubergine/images/debug.png b/installer/resources/themes/snark/ubergine/images/debug.png new file mode 100644 index 000000000..70bdd2cf6 Binary files /dev/null and b/installer/resources/themes/snark/ubergine/images/debug.png differ diff --git a/installer/resources/themes/snark/ubergine/snark.css b/installer/resources/themes/snark/ubergine/snark.css index 56142df8c..3ef671fe2 100644 --- a/installer/resources/themes/snark/ubergine/snark.css +++ b/installer/resources/themes/snark/ubergine/snark.css @@ -382,11 +382,6 @@ th:nth-child(2) img { margin: 1px 7px 3px 2px !important; } -tfoot th { - padding-bottom: 4px !important; - vertical-align: top; -} - tfoot img, tfoot:nth-child(2) img, tfoot:nth-child(1) img, tfoot:nth-child(3) img, tfoot:nth-child(4) img { margin: 0 2px 3px 0 !important; padding-right: 0 !important; @@ -398,7 +393,7 @@ tfoot tr:nth-child(n+1) { .headerstatus { text-align: left; - padding-left: 15px; + padding-left: 5px; } .headerpriority { @@ -486,9 +481,10 @@ tfoot tr:nth-child(n+1) { .snarkTorrents tfoot th { padding: 5px 2px; font-weight: normal; + vertical-align: middle; } -.snarkTorrents tfoot th::first-line { +.snarkTorrents tfoot tr:first-child th { font-weight: bold; vertical-align: middle; } @@ -497,7 +493,7 @@ tfoot tr:nth-child(n+1) { background: #120012; } -.snarkTorrents thead th:nth-last-child(4), .snarkTorrents thead th:nth-last-child(5), .snarkTorrents tfoot th:nth-last-child(4), .snarkTorrents tfoot th:nth-last-child(5) { +.snarkTorrents thead th:nth-last-child(4), .snarkTorrents tfoot th:nth-last-child(4) { text-align: center; } @@ -509,21 +505,17 @@ tfoot tr:nth-child(n+1) { text-align: right; } -.snarkTorrents tfoot th:nth-child(2) { - text-align: center; -} - .snarkTorrents td:nth-child(3), .SnarkTorrents td:nth-child(4) { width: 16px; padding: 2px 0; } -.snarkTorrents td:nth-child(3) { - text-align: right; +.snarkTorrents .peerinfo td:nth-child(3), .snarkTorrents .peerinfo td:nth-child(4) { + padding: 2px 4px; } -.snarkTorrents td:nth-child(4) { - text-align: left; +.snarkTorrents td:nth-child(3) { + text-align: right; } .snarkTorrents tt { @@ -555,7 +547,7 @@ td:first-child { .snarkTorrentName { line-height: 110%; - padding: 2px 1px 2px 0; + padding: 2px 1px 2px 3px; } .snarkTorrentName img { @@ -571,11 +563,11 @@ td:first-child { white-space: nowrap; } -.snarkTorrents th:last-child { +.snarkTorrents thead th:last-child { white-space: nowrap !important; text-align: center; padding-right: 4px; - width: 40px; + width: 1%; } .snarkTorrents th:last-child input[type="image"] { @@ -644,12 +636,6 @@ a img[src$="details.png"]:hover, a:focus img[src$="details.png"] { padding-left: 0; } -.snarkTorrentDownloaded { - color: #76a !important; - white-space: nowrap; - text-align: center !important; -} - .snarkTorrentUploaded { color: #b9b !important; } @@ -705,7 +691,8 @@ a img[src$="details.png"]:hover, a:focus img[src$="details.png"] { } .snarkTorrentEven + .snarkTorrentEven td:nth-child(4), .snarkTorrentOdd + .snarkTorrentOdd td:nth-child(4) { - text-align: center !important; + text-align: right !important; + font-weight: bold; } .snarkTorrentEven + .snarkTorrentEven td:nth-child(n+5), .snarkTorrentOdd + .snarkTorrentOdd td:nth-child(n+5) { @@ -719,8 +706,8 @@ table.snarkTorrents tbody tr:hover, table.snarkDirInfo tbody tr:hover { border-bottom: 1px solid #101 !important; } -table.snarkTorrents tbody tr:hover { - box-shadow: inset 0 1px 1px 0 #939; +tr:hover .percentBarText { + opacity: 1; } /* MS Edge fix */ @@ -755,17 +742,19 @@ table.snarkTorrents tbody tr:hover .snarkTorrentName, table.snarkDirInfo tbody t padding: 4px 2px; font-weight: bold; color: #b6b !important; - width: 9em !important; + width: 1%; + white-space: nowrap; } .snarkFileStatus { - padding: 2px 5px 2px 15px; + padding: 2px 5px; font-style: italic; font-size: 8pt; text-align: left !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + width: 140px; } .snarkFileStatus img[src*="clock"] { @@ -897,12 +886,105 @@ _:-ms-lang(x), .snarkDirInfo img, .snarkTorrents img { color: #f90; } +/* download bars */ + +.snarkTorrentDownloaded { + text-align: right !important; + width: 110px; + color: #76a !important; + white-space: nowrap; +} + +.snarkDirInfo .snarkFileStatus img { + float: left; + margin: 0 10px 0 7px; +} + +.priorityIndicator img[src*="clock"] { + margin-top: 4px; +} + +.percentBarOuter { + background: #000 !important; + background: repeating-linear-gradient(135deg, #000 1px, #000 5px, #101 6px, #101 11px) !important; + border: 1px solid #414; + border-bottom: 1px solid #212; + border-right: 1px solid #212; + opacity: 0.7; + box-shadow: 0 0 1px 1px rgba(0,0,0,0.5); + margin: 2px 0 !important; +} + +.snarkTorrentDownloaded .percentBarOuter { + margin-left: 5px !important; +} + +.peerinfo .percentBarOuter { + background: repeating-linear-gradient(135deg, #000 1px, #000 5px, #0f0a08 6px, #0f0a08 11px) !important; + height: 16px; + line-height: 13px; +} + +.percentBarInner { + border: none; + height: 100%; + background: #515; + background: linear-gradient(to bottom, rgba(136, 17, 136, 0.7) 0%, rgba(85, 17, 85, 0.7) 50%, rgba(51, 17, 51, 0.7) 50%, rgba(0, 0, 0, 0.9) 100%); + box-shadow: inset 0 0 0 1px #000; +} + +.peerinfo .percentBarInner { + background: linear-gradient(to bottom, rgba(82, 57, 67, 0.7) 0%, rgba(95, 70, 41, 0.7) 50%, rgba(63, 47, 27, 0.7) 50%, rgba(31, 23, 13, 0.9) 100%); +} + +.peerinfo .percentBarText { + color: #C19E91; +} + +.percentBarText, .percentBarOuter { + width: 110px; + text-align: center; + vertical-align: middle; +} + +.snarkDirInfo .percentBarText, .snarkDirInfo .percentBarOuter, .peerinfo .percentBarText, .peerinfo .percentBarOuter { + width: 80px; +} + +.snarkDirInfo .percentBarOuter { + float: left; +} + +.peerinfo .percentBarOuter { + float: right; +} + +.percentBarText { + text-align: center; + font-weight: bold; + padding: 2px 0; + white-space: nowrap; + display: block; + color: #dd7; + text-shadow: 0 0 1px rgba(0,0,0,0.8); + opacity: 0; + transition: ease opacity 0.3s 0.5s; +} + +.percentBarText:hover, .percentBarText:focus { + opacity: 1; + transition: ease opacity 0.3s; +} + +/* end download bars */ + .choked { color: #f00000 !important; } .unchoked { color: #00f000 !important; + color: #34CF19 !important; } .choked, .unchoked { @@ -972,6 +1054,12 @@ table#trackerselect { user-select: all; } +.toggleview, .snarkConfigTitle, .snarknavbar, img, input[type="image"] { + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; +} + .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; @@ -1037,21 +1125,6 @@ hr { text-align: center; } -hr.debug { - width: 100%; -} - -hr.debug:nth-child(n+7) { - margin-top: -11px; - margin-bottom: 2px; - opacity: 0.5; -} - -hr.debug:last-child { - background: #303; - margin-bottom: -4px; -} - a:link { color: #f70; text-decoration: none; @@ -1482,6 +1555,15 @@ select:hover, select:focus, select:active { background-blend-mode: luminosity; } +select[disabled], select[disabled]:hover, select[disabled]:focus { + opacity: 0.5; + background: #212 url(images/graytile.png) !important; + background: url(images/dropdown.png) right center no-repeat, url(images/graytile.png) #212 !important; + background-blend-mode: normal; + color: #f60 !important; + cursor: not-allowed; +} + select option { background: #f50; color: #fff; @@ -1905,6 +1987,122 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac color: #b9b; } +hr.debug { + background: linear-gradient(to right, #313, #414, #313); + background: rgba(32,16,32,0.3); + border-bottom: 1px solid rgba(128, 0, 128, 0.3); + width: 100%; + height: 1px; +} + +@-moz-document url-prefix() { +hr.debug { + height: 2px; +} +} + +hr.debug:nth-child(n+7) { + margin-top: -7px; + margin-bottom: 7px; +} + +hr.debug:first-of-type { + background: transparent; + border: none; + margin-bottom: -2px; +} + +hr.debug:last-child { + background: transparent; + border: none; + margin-bottom: -4px; +} + +hr.debug + hr { + background: transparent !important; + display: block !important; + margin-bottom: -7px; +} + +tr.dhtDebug th { + white-space: normal; + word-break: break-all; + border-top: 1px solid #313; + background: #1f021f; + padding: 0 10px 5px; + padding: 0 0 4px; + background: linear-gradient(to right, rgba(30,0,30,0.4) 0%, rgba(55,0,55,0.5) 50%, rgba(30,0,30,0.4) 100%), url(images/tile2.png); +} + +.dhtDebug th > br:first-child { + display: none; +} + +/* debug panel */ + +#dhtDebugPanel { + background: #101; + background: linear-gradient(to bottom, #545 0%, #434 100%); + background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.2) 30%, rgba(0,0,0,1)), linear-gradient(to right, rgba(128,0,128,0) 30%, #414 50%, rgba(128,0,128,0) 70%), linear-gradient(to bottom, #101, #000); + border: 1px solid #414; + border-top: none; + border-radius: 0 0 4px 4px; + box-shadow: 0 1px 2px 0 rgba(16,0,16,0.6); + text-align: center; + padding-bottom: 13px; + margin: 0 8px 4px; +} + +#dhtDebugPanel label { + padding: 8px 4px 4px !important; + display: block; + margin: 0 0 -13px !important; + border-radius: 0 0 4px 4px; + background: #202; +} + +input#toggle_debug:not(checked) + label { + border-radius: 0; + background: #101; + text-align: center; +} + +#dhtDebugInner { + text-align: left; + padding: 3px 10px 5px; + background: #000; + margin: -33px 0 -12px; +} + +.dhtDebug th b:first-of-type, .dhtDebug th b:first-of-type + br + hr.debug { + display: none; +} + +input#toggle_debug:not(checked) + label { + padding-bottom: 2px; +} + +input#toggle_debug:not(checked) + label > img { + margin-right: -2px !important; +} + +input#toggle_debug:not(checked) + label + #dhtDebugInner { + display: block; +} + +input#toggle_debug:checked + label + #dhtDebugInner { + display: none; +} + +.iframed input#toggle_debug:not(checked) + label + #dhtDebugInner { + display: block; +} + +.iframed input#toggle_debug:checked + label + #dhtDebugInner { + display: none; +} + +/* end debug panel */ /* end debug */ /* Resource Errors */ @@ -2034,7 +2232,7 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac font-weight: bold; } -td#bwHelp { +#bwHelp { background: url(images/infocircle.png) left 8px center no-repeat; background-size: 14px auto; padding-left: 26px !important; @@ -2042,7 +2240,7 @@ td#bwHelp { line-height: 100%; } -td#bwHelp a { +#bwHelp a { display: inline-block; white-space: nowrap; margin-left: 4px; @@ -2155,13 +2353,26 @@ table.snarkDirInfo { } .snarkTorrentName a:not(old) { - max-width: 300px; + max-width: 300px !important; } .snarkTorrentDownloaded { white-space: nowrap; } +.percentBarOuter { + margin: 0 !important; + display: inline-block; +} + +.percentBarOuter, .percentBarText { + width: 105px; +} + +.snarkDirInfo .percentBarText, .snarkDirInfo .percentBarOuter { + width: 60px; +} + .snarkTorrentStatus b { display: none; } @@ -2202,6 +2413,10 @@ b.alwaysShow { #trackerselect td a { max-width: 350px; } + +.priorityIndicator img[src*="clock"] { + margin-top: 0; +} } @media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 1050px) { @@ -2232,6 +2447,10 @@ b.alwaysShow { text-overflow: ellipsis; } +.snarkFileStatus { + width: 120px; +} + .toggleview, .snarkConfigTitle, .snarkConfigTitle a { font-size: 11pt !important; } @@ -2256,6 +2475,16 @@ _:-ms-lang(x), .snarkRefresh:link, .snarkRefresh:visited { background-position: 11px 5px, center center !important; background-size: 15px auto, 100% 100% !important; } + +.peerinfo .percentBarOuter { + filter: sepia(1); + height: 14px; + line-height: 11px; +} + +#dhtDebugInner { + padding-top: 15px !important; +} } @media screen and (min-width: 1050px) { @@ -2359,10 +2588,6 @@ input[type="submit"], input[type="reset"], select, select option, button, a.cont display: inline-block; } -.SnarkTorrents td:nth-child(4) { - padding-right: 5px; -} - .snarkTorrentName a:not(old) { max-width: none; } @@ -2413,14 +2638,6 @@ select { font-size: 9pt !important; } -.snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded, .snarkFileSize { - padding: 0 8px !important; -} - -.choked, .unchoked { - margin-right: 6px; -} - #pagenav img { width: 16px !important; height: 16px !important; diff --git a/installer/resources/themes/snark/vanilla/images/debug.png b/installer/resources/themes/snark/vanilla/images/debug.png new file mode 100644 index 000000000..70bdd2cf6 Binary files /dev/null and b/installer/resources/themes/snark/vanilla/images/debug.png differ diff --git a/installer/resources/themes/snark/vanilla/snark.css b/installer/resources/themes/snark/vanilla/snark.css index e65d83e32..827aba936 100644 --- a/installer/resources/themes/snark/vanilla/snark.css +++ b/installer/resources/themes/snark/vanilla/snark.css @@ -108,10 +108,9 @@ td a:active, td a:visited:active { color: #FF2F85 !important; } -.snarkRefresh, .toggleview, .snarkConfigTitle, thead img, .snarkTorrentAction, -input[type="submit"], input[type="reset"], .control, .input[type="radio"], input[type="checkbox"] { - -webkit-user-select: none; +.toggleview, .snarkConfigTitle, .snarknavbar, img, input[type="image"] { -moz-user-select: none; + -webkit-user-select: none; user-select: none; } @@ -448,8 +447,9 @@ tfoot td:first-child { padding-left: 0; } -tfoot th { - padding-bottom: 4px !important; +tfoot tr:first-child th { + vertical-align: middle; + font-weight: bold; } tfoot img, tfoot:nth-child(2) img, tfoot:nth-child(1) img, tfoot:nth-child(3) img, tfoot:nth-child(4) img { @@ -457,10 +457,6 @@ tfoot img, tfoot:nth-child(2) img, tfoot:nth-child(1) img, tfoot:nth-child(3) im padding-right: 0 !important; } -tfoot tr:nth-child(n+1) { - text-align: left; -} - .headerstatus { text-align: left; } @@ -527,7 +523,7 @@ tfoot tr:nth-child(n+1) { } .snarkTorrents thead th:nth-child(3) { - padding: 4px 4px 4px 0 ; + padding: 4px 4px 4px 0; text-align: right; } @@ -540,12 +536,12 @@ tfoot tr:nth-child(n+1) { } .snarkTorrents th:first-child, .snarkTorrents td:first-child { - width: 30px; + width: 1%; white-space: nowrap; } .snarkTorrents th:last-child, .snarkTorrents td:last-child { - width: 36px; + width: 1%; white-space: nowrap; } @@ -553,10 +549,6 @@ tfoot tr:nth-child(n+1) { vertical-align: top; } -.snarkTorrents tfoot th:nth-child(2) { - text-align: center; -} - .snarkTorrents td:first-child, .snarkTorrents td:nth-child(2) { padding: 2px 0 !important; } @@ -571,8 +563,6 @@ tfoot tr:nth-child(n+1) { } .snarkTorrents td:nth-child(4) { - text-align: center; - padding-right: 4px !important; font-weight: bold; } @@ -586,6 +576,7 @@ td { color: #2f1500 !important; opacity: 1; font-size: 8pt; + vertical-align: middle; } td:first-child { @@ -598,7 +589,7 @@ td:first-child { } .snarkTorrentName { - padding: 3px 0; + padding-left: 5px !important; line-height: 110%; } @@ -612,7 +603,7 @@ td:first-child { padding: 1px 1px 1px 1px !important; margin: 0 !important; text-align: center; - width: 68px; + width: 1%; white-space: nowrap; } @@ -668,7 +659,6 @@ _:-ms-lang(x), .snarkTorrentAction { .snarkTorrentStatus { padding: 2px 0; - line-height: 100%; } .snarkTorrentStatus:first-child { @@ -689,7 +679,7 @@ _:-ms-lang(x), .snarkTorrentAction { font-size: 8pt; font-weight: bold; padding: 0 3px; - line-height: 120% !important; +/* line-height: 120% !important;*/ } .snarkTorrentDownloaded { @@ -732,7 +722,11 @@ _:-ms-lang(x), .snarkTorrentOdd td, .snarkTorrentEven td, .snarkTorrentInfo td, table.snarkTorrents tbody tr:hover, table.snarkDirInfo tbody tr:hover { background: #f9efcf !important; - background: linear-gradient(to right, #700 3px, #f9efcf 3px) !important; + background: linear-gradient(to right, rgba(119, 0, 0, 0.7) 3px, #f9efcf 3px) !important; +} + +tr:hover .percentBarText { + opacity: 1; } @media screen and (-webkit-min-device-pixel-ratio:0) { @@ -822,6 +816,8 @@ td.snarkFileIcon:first-child { padding: 4px 2px; font-weight: bold; color: #727 !important; + width: 1%; + white-space: nowrap; } .snarkFileStatus { @@ -831,6 +827,7 @@ td.snarkFileIcon:first-child { font-size: 8pt; text-align: left; white-space: nowrap; + width: 140px; } .snarkTorrentETA { @@ -905,6 +902,10 @@ td.snarkFileIcon:first-child { border-top: none !important; } +.snarkDirInfo thead th:nth-child(n+2) { + text-align: center; +} + .snarkDirInfo thead img { margin: 0 -1px 0 0 !important; padding: 0 3px !important; @@ -936,7 +937,7 @@ thead img.disable, img.disable:hover { text-align: center !important; vertical-align: middle; padding: 5px !important; - width: 160px + width: 160px; } #setPriority .headerpriority { @@ -958,6 +959,107 @@ thead img.disable, img.disable:hover { display: none; } +/* download bars */ + +.snarkTorrents th:nth-child(6) { + text-align: right; +} + +.snarkTorrentDownloaded { + width: 110px !important; + text-align: right !important; +} + +.snarkDirInfo .snarkFileStatus img { + float: left; + margin: 1px 10px 0 7px; +} + +.percentBarOuter, .percentBarText { + width: 110px; +} + +.snarkDirInfo .percentBarText, .snarkDirInfo .percentBarOuter { + width: 90px; +} + +.percentBarOuter { + background: #fff7ef; + background: repeating-linear-gradient(135deg, #fff7ef 1px, #fff7ef 5px, #efdfd1 6px, #efdfd1 11px); + border: 1px solid #998; + border-bottom: 1px solid #776; + border-right: 1px solid #776; + box-shadow: none; + opacity: 1; + margin: 0; +} + +.snarkTorrentDownloaded .percentBarOuter { + margin-left: 5px; +} + +.peerinfo .percentBarOuter, .peerinfo .percentBarText { + width: 70px; +} + +.peerinfo .percentBarText { + padding: 1px; + color: #3f3927; +} + +.snarkDirInfo .percentBarOuter { + float: left; +} + +.percentBarInner { + border: none; + height: 100%; + background: #cfc1b5; + background: linear-gradient(to bottom, rgba(255, 247, 239, 0.8) 0%, rgba(255, 247, 239, 0.8) 50%, rgba(207, 193, 181, 0.9) 50%, rgba(207, 193, 181, 1) 100%); + box-shadow: inset 0 0 0 1px #efe6e0; + vertical-align: middle; + height: 16px; +} + +.snarkTorrentDownloaded .percentBarInner { + background: linear-gradient(to bottom, rgba(255, 247, 239, 0.75) 0%, rgba(255, 247, 239, 0.75) 50%, rgba(207, 193, 181, 0.8) 50%, rgba(207, 193, 181, 0.9) 100%), linear-gradient(to right, rgba(255, 100, 0, 0.5) 37px, rgba(255, 255, 0, 0.5) 74px, rgba(0, 255, 0, 0.5)); +} + +.snarkDirInfo .percentBarInner { + background: linear-gradient(to bottom, rgba(255, 247, 239, 0.75) 0%, rgba(255, 247, 239, 0.75) 50%, rgba(207, 193, 181, 0.8) 50%, rgba(207, 193, 181, 0.9) 100%), linear-gradient(to right, rgba(255, 100, 0, 0.5) 30px, rgba(255, 255, 0, 0.5) 60px, rgba(0, 255, 0, 0.5)); +} + +.percentBarText, .percentBarOuter { + text-align: center; + vertical-align: middle; +} + +.percentBarText { + text-align: center; + font-weight: bold; + white-space: nowrap; + color: #919; + opacity: 0; + transition: ease opacity 0.3s 0.5s; + vertical-align: middle; +} + +.snarkTorrentDownloaded .percentBarText { + line-height: 16px; +} + +.snarkDirInfo .percentBarText { + padding: 1px 0; +} + +.percentBarText:hover, .percentBarText:focus { + opacity: 0.9; + transition: ease opacity 0.3s; + filter: none; +} + +/* end download bars */ + .choked { color: #a00000 !important; } @@ -1149,26 +1251,6 @@ hr { text-align: center; } -hr.debug { - width: 100%; - margin: 5px 0; - background: linear-gradient(to right, #6f533e 40%, #9f8877); -} - -hr.debug:nth-child(n+7) { - margin: 2px 0 3px; -} - -hr.debug:last-child { - display: none; -} - -@media screen and (-webkit-min-device-pixel-ratio:0) { -hr.debug:nth-child(n+7) { - margin: -10px 0 4px; -} -} - /* buttons & inputs */ .script { @@ -1201,7 +1283,6 @@ a.control, a.controld { a.controld { color: #f60; font-weight: normal; -/* display: none;*/ } a.control:hover, a.control:focus { @@ -1636,6 +1717,9 @@ code, tt { padding: 0 1px; font-weight: bold; font-family: "DejaVu Sans Mono", "Droid Sans Mono", "Lucida Console", monospace; + -moz-user-select: all; + -webkit-user-select: all; + user-select: all; } .routerdown { @@ -1821,6 +1905,116 @@ code, tt { margin: 2px 3px !important; } +.dhtDebug th { + padding: 0 10px 10px; + background: #fff; + background: repeating-linear-gradient(to bottom, #ecebdd 1px, #efebdd 2px, #ebe5d5 5px); + word-break: break-all; +} + +hr.debug { + width: 100%; + height: 1px; + margin: 5px 0; + background: linear-gradient(to right, #6f533e 40%, #9f8877); + border-bottom: 1px solid #fff; +} + +@-moz-document url-prefix() { +hr.debug { + height: 2px; +} +} + +hr.debug + hr { + margin-bottom: -1px; +} + +hr.debug:first-of-type { + background: transparent; + border: none; + margin-top: 10px; + margin-bottom: -5px; +} + +hr.debug:nth-child(n+7) { + margin: 4px 0; +} + +hr.debug:last-child { + background: transparent; + border: none; + margin-bottom: 5px !important; +} + +@media screen and (-webkit-min-device-pixel-ratio:0) { +hr.debug:first-of-type { + background: transparent; + margin-top: -5px; + margin-bottom: -5px; +} + +hr.debug:nth-child(n+7) { + margin: -10px 0 4px; +} + +hr.debug:last-child { + background: transparent; + margin-bottom: 0 !important; +} +} + +/* debug panel */ + +#dhtdebugPanel { + background: linear-gradient(to bottom, #efefef, #cfc7c2); + border: 1px solid #212; + border-top: none; + border-radius: 0 0 2px 2px; + box-shadow: 0 0 0 1px #efe6e0 inset, 0 0 1px 0 #4f3d36; + text-align: center; + padding-bottom: 13px; +} + +#dhtDebugInner { + text-align: left; + margin: -24px 0 -13px; + padding: 0 8px 1px; + background: #efefef; + border-radius: 0 0 2px 2px; +} + +.dhtDebug th b:first-of-type, .dhtDebug th b:first-of-type + br + hr.debug { + display: none; +} + +/* toggle debug view */ + +input#toggle_debug:not(checked) + label { + padding-bottom: 2px; +} + +input#toggle_debug:not(checked) + label > img { + margin-right: -2px !important; +} + +input#toggle_debug:not(checked) + label + #dhtDebugInner { + display: block; +} + +input#toggle_debug:checked + label + #dhtDebugInner { + display: none; +} + +.iframed input#toggle_debug:not(checked) + label + #dhtDebugInner { + display: block; +} + +.iframed input#toggle_debug:checked + label + #dhtDebugInner { + display: none; +} + +/* end debug panel */ /* end debug */ .peerinfo td:first-child { @@ -1838,6 +2032,10 @@ code, tt { font-weight: bold; } +#totals tt { + line-height: 170%; +} + /* Resource Errors */ .resourceError { @@ -1948,6 +2146,7 @@ td#bwHelp a { display: inline-block; white-space: nowrap; font-style: normal; + margin-left: 4px; } /* end configs */ @@ -2045,6 +2244,26 @@ b.alwaysShow { padding-bottom: 3px; } +.percentBarOuter, .percentBarText, .snarkTorrentDownloaded { + width: 100px !important; +} + +.snarkTorrentDownloaded .percentBarInner { + background: linear-gradient(to bottom, rgba(255, 247, 239, 0.75) 0%, rgba(255, 247, 239, 0.75) 50%, rgba(207, 193, 181, 0.8) 50%, rgba(207, 193, 181, 0.9) 100%), linear-gradient(to right, rgba(255, 100, 0, 0.5) 33px, rgba(255, 255, 0, 0.5) 66px, rgba(0, 255, 0, 0.5)); +} + +.snarkDirInfo .percentBarInner { + background: linear-gradient(to bottom, rgba(255, 247, 239, 0.75) 0%, rgba(255, 247, 239, 0.75) 50%, rgba(207, 193, 181, 0.8) 50%, rgba(207, 193, 181, 0.9) 100%), linear-gradient(to right, rgba(255, 100, 0, 0.5) 23px, rgba(255, 255, 0, 0.5) 47px, rgba(0, 255, 0, 0.5)); +} + +.snarkDirInfo .percentBarText, .snarkDirInfo .percentBarOuter, .peerinfo .percentBarOuter, .peerinfo .percentBarText { + width: 70px !important; +} + +.snarkFileStatus { + width: 120px; +} + .snarkTorrents tt { background: none; color: #030; @@ -2081,6 +2300,12 @@ b.alwaysShow { transition: ease width 0.5s 0.5s; } +.snarkTorrentAction input[type="image"], .snarkTorrents th:last-child input[type="image"] { + max-height: 9px; + margin-top: 2px; + margin-bottom: 2px; +} + .snarkRefresh:nth-child(n+2) { padding: 4px 8px 4px 24px !important; background-size: 14px auto, 100% 100%, 100% 100% !important; @@ -2113,6 +2338,23 @@ _:-ms-lang(x), .snarkRefresh:link, .snarkRefresh:visited { #pagenav img { height: 14px; } + +.snarkTorrentDownloaded .percentBarOuter { + margin-left: 0; +} + +.snarkTorrents tfoot tr:first-child th { + padding-top: 2px; + padding-bottom: 2px; + line-height: 120%; +} +} + +@media screen and (max-width: 1400px) { +#dhtDebugInner { + margin-top: -21px !important; + padding-top: 15px; +} } @media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 1200px) { @@ -2137,6 +2379,12 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, a.control, input padding-bottom: 3px !important; } +.snarkTorrents tfoot tr:first-child th { + padding-top: 4px; + padding-bottom: 4px; + line-height: 150%; +} + .peerinfo tt { display: inline-block; margin: 0 3px; @@ -2211,7 +2459,6 @@ select { .snarkTorrentDownloaded { white-space: nowrap; - padding: 0 8px; } thead a img, thead img { @@ -2234,19 +2481,10 @@ thead a img, thead img { padding-bottom: 2px !important; } -.snarkTorrentInfo td, .snarkDirInfo td { - padding-top: 5px !important; - padding-bottom: 5px !important; -} - .peerinfo tt { margin: 1px 4px; } -.snarkTorrentName { - padding-left: 2px; -} - .snarkTorrentStatus b, .dirInfoComplete { margin-right: 4px; }