diff --git a/installer/resources/themes/snark/classic/images/debuginfo.png b/installer/resources/themes/snark/classic/images/debuginfo.png new file mode 100644 index 000000000..42c7cd6ab Binary files /dev/null and b/installer/resources/themes/snark/classic/images/debuginfo.png differ diff --git a/installer/resources/themes/snark/classic/images/infocircle.png b/installer/resources/themes/snark/classic/images/infocircle.png new file mode 100644 index 000000000..b1d0be10a Binary files /dev/null and b/installer/resources/themes/snark/classic/images/infocircle.png differ diff --git a/installer/resources/themes/snark/classic/images/peer.png b/installer/resources/themes/snark/classic/images/peer.png new file mode 100644 index 000000000..93a9e7738 Binary files /dev/null and b/installer/resources/themes/snark/classic/images/peer.png differ diff --git a/installer/resources/themes/snark/classic/images/progressbar.gif b/installer/resources/themes/snark/classic/images/progressbar.gif new file mode 100644 index 000000000..e204f6b31 Binary files /dev/null and b/installer/resources/themes/snark/classic/images/progressbar.gif differ diff --git a/installer/resources/themes/snark/classic/snark.css b/installer/resources/themes/snark/classic/snark.css index 3d9b80c2d..ddaea4dc3 100644 --- a/installer/resources/themes/snark/classic/snark.css +++ b/installer/resources/themes/snark/classic/snark.css @@ -20,7 +20,7 @@ body { } tt { - font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; + font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; } body.iframed { @@ -82,26 +82,25 @@ body.iframed { margin-left: 3px; } -.snarkRefresh:link, -.snarkRefresh:visited { +.snarkRefresh:link, .snarkRefresh:visited { display: inline-block; font-size: 9pt; font-weight: bold; - margin: -1px !important; + margin: -1px 0 !important; padding: 5px 7px 5px 22px !important; text-decoration: none !important; letter-spacing: .1em; text-transform: uppercase !important; - opacity: 1; color: #444688; - border: 1px solid #eef; - border-right: 1px solid #bbf; - border-bottom: 1px solid #bbf; + border: 1px solid #ccf; + border-right: 1px solid #aaf; + border-bottom: 1px solid #aaf; border-radius: 0; background: url(images/button_tracker.png) 7px center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%); - box-shadow: inset 0 0 1px #fff; - filter: drop-shadow(0 0 1px #fff); - -webkit-filter: drop-shadow(0 0 1px #fff); + box-shadow: inset 0 0 0 1px #fff; + box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgba(200,200,200,0.3); +/* filter: drop-shadow(0 0 1px #fff); + -webkit-filter: drop-shadow(0 0 1px #fff);*/ } .snarkRefresh:link:first-child { @@ -112,28 +111,26 @@ body.iframed { background: url(images/button_forum.png) 7px center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%); } -.snarkRefresh:link:hover, -.snarkRefresh:link:focus { - opacity: 1; +.snarkRefresh:link:hover, .snarkRefresh:link:focus { color: #f60; + box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgba(200,200,200,0.5); } -.snarkRefresh:link:hover:first-child, -.snarkRefresh:link:focus:first-child { +.snarkRefresh:link:hover:first-child, .snarkRefresh:link:focus:first-child { background-image: url(images/button_snark_hover.png) !important; background-image: url(images/button_snark_hover.png), linear-gradient(to bottom, #ddd 0%, #fff 100%) !important; background-repeat: no-repeat, repeat !important; background-position: 7px center, center center !important; } -.snarkRefresh:link:hover:nth-child(2), -.snarkRefresh:link:focus:nth-child(2) { +.snarkRefresh:link:hover:nth-child(2), .snarkRefresh:link:focus:nth-child(2) { background-image: url(images/button_forum_hover.png) !important; background-image: url(images/button_forum_hover.png), linear-gradient(to bottom, #ddd 0%, #fff 100%) !important; } .snarkRefresh:link:active { box-shadow: inset 0 0 0 1px #fff, inset 4px 4px 2px #555; + box-shadow: inset 0 0 0 1px #fff, inset 4px 4px 2px #555, 0 0 0 1px rgba(100,100,100,0.5); } .snarkRefresh:link:active:first-child { @@ -152,8 +149,7 @@ body.iframed { background-position: 7px center !important; } -.snarkRefresh:hover, -.snarkRefresh:focus { +.snarkRefresh:hover, .snarkRefresh:focus { font-size: 9pt; font-weight: bold; text-decoration: none !important; @@ -206,6 +202,18 @@ body.iframed { 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; @@ -287,7 +295,7 @@ table.snarkTorrents { border-bottom: 1px solid #89f; background: #ddf url(images/hat.png) bottom right no-repeat; background: url(images/hat.png) bottom right no-repeat, linear-gradient(to bottom, #dedeff, #ddf); - box-shadow: inset 0 0 0 1px #fff; + box-shadow: inset 0 0 0 1px #efefff; } .snarkMessages a:link, @@ -441,7 +449,8 @@ tfoot tr:nth-child(n+1) { } .headerstatus { - text-align: center; + text-align: left; + padding-left: 15px; } .headerpriority { @@ -516,13 +525,6 @@ tfoot tr:nth-child(n+1) { margin-left: 20px !important; } -.snarkTorrents tfoot th tt { - font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; - letter-spacing: .1em; - color: #227; - background: none; -} - .snarkTorrents td:nth-child(6), .snarkTorrents td:nth-child(7), .snarkTorrents td:nth-child(8) { @@ -559,8 +561,7 @@ table.snarkTorrents { } .snarkTorrents td[colspan="10"] { - padding: 2px; - color: #cc7 !important; + padding: 4px 2px !important; } .snarkTorrents img { @@ -570,7 +571,20 @@ table.snarkTorrents { .snarkTorrents tt { font-size: 8pt; - color: #ff0; + color: #301; + font-weight: bold; + color: #fff; + background: #aaf; + border-radius: 2px; + margin: 3px; + padding: 2px 3px; + letter-spacing: 0.1em; + display: inline-block; +} + +.snarkTorrents tfoot th tt { + display: inline; + margin-left: 3px; } .snarkTorrentInfo img { @@ -664,14 +678,23 @@ table.SnarkDirInfo { text-align: right; } -.snarkDirInfo td { - min-width: 0 !important; -} - .snarkDirInfo th:first-child { padding-left: 5px; } +.snarkDirInfo th a img, .snarkDirInfo th img { + max-height: 20px; +} + +.snarkDirInfo th img[alt="Directory"] { + margin-right: 5px !important; + margin-left: 1px !important; +} + +.snarkDirInfo td { + min-width: 0 !important; +} + .snarkDirInfo td:first-child { padding-left: 4px; text-align: left; @@ -742,6 +765,7 @@ td.subHeaderPriority { padding: 4px !important; } +/* .headerstatus { min-width: 250px; } @@ -749,6 +773,7 @@ td.subHeaderPriority { td.priority:last-child { min-width: 350px !important; } +*/ tr.priority:last-child { border-bottom: none !important; @@ -759,9 +784,8 @@ th.headerdownloaded { } td.snarkFileStatus { - font-size: 8pt; - width: 80px; text-align: center; + white-space:nowrap; } td.snarkFileIcon { @@ -850,7 +874,9 @@ td:first-child { .snarkTorrentAction input[type="image"]:active, .snarkTorrents th:last-child input[type="image"]:active { background: linear-gradient(to bottom, #ddf 0%, #ddf 50%, #99f 51%, #99f 100%); - box-shadow: inset 2px 2px 2px #333; + box-shadow: inset 0 0 0 1px #fff, inset 2px 2px 2px #333; + filter: none !important; + -webkit-filter: none !important; } .snarkTorrents th:last-child input[type="image"]:hover, @@ -882,13 +908,18 @@ td.snarkTorrentAction { padding: 2px 2px 2px 0; } -td.snarkTorrentstatus { - padding: 3px 0; - text-align: center !important; +.snarkTorrentStatus { + text-align: left !important; + white-space: nowrap; + padding: 3px; } -td.snarkTorrentstatus:nth-child(2) { - text-align: left !important; +.snarkTorrentStatus b { + margin-right: 2px; +} + +.snarkTorrentStatus a { + font-weight: bold !important; } .snarkTorrentstatus:first-child { @@ -914,7 +945,6 @@ td.snarkTorrentstatus:nth-child(2) { font-size: 8pt; line-height: 90%; padding: 0 3px; - word-spacing: -.05em; } .snarkTorrentRateUp, @@ -969,7 +999,7 @@ td.snarkTorrentDownloaded { .snarkTorrents tr:hover td, .snarkDirInfo tr:hover td { - color: #0c153d !important; + color: #0c153d; } .snarkTorrents tr:hover a, @@ -999,6 +1029,10 @@ td[onclick^="document.location"]:hover { background: #ddf; } +.debuginfo .snarkTorrentEven:nth-child(even) { + background: #f00; +} + .snarkTorrentOdd, .SnarkTorrentEven { border-bottom: 1px inset #bbf !important; @@ -1027,9 +1061,13 @@ td[onclick^="document.location"]:hover { } .snarkFileName { - font-size: 9pt !important; padding: 4px 0 !important; text-align: left !important; + font-weight: bold; +} + +.snarkFileName a { + font-weight: bold; } .snarkFileSize { @@ -1049,7 +1087,6 @@ td[onclick^="document.location"]:hover { .snarkTorrentETA { font-style: italic; - color: #dd7 !important; } /* @@ -1100,12 +1137,12 @@ div.percentBarInner.percentBarComplete { */ -.choked { - color: #f00000 !important; +.choked, .choked a:hover { + color: #900 !important; } -.unchoked { - color: #00f000 !important; +.unchoked, .unchoked a:hover { + color: #050 !important; } .thumb { @@ -1142,7 +1179,7 @@ div.percentBarInner.percentBarComplete { font-weight: bold; font-variant: small-caps !important; display: inline-block; - min-width: 180px; + min-width: 200px; margin: 0 0 -4px !important; padding: 3px 25px 4px 22px; letter-spacing: .08em; @@ -1170,14 +1207,12 @@ _:-ms-lang(x), .snarkConfigTitle, label.toggleview, .configsectionpanel .snarkCo color: #444; } -.snarkConfigTitle img, -label.toggleview img { +.snarkConfigTitle img, label.toggleview img { margin-right: -2px; margin-top: -2px; } -.snarkConfigTitle a, -.snarkConfigTitle a:visited, label.toggleview { +.snarkConfigTitle a, .snarkConfigTitle a:visited, label.toggleview { color: #444688 !important; outline: none; } @@ -1203,7 +1238,7 @@ label.toggleview img { .page { font-size: 9pt !important; line-height: 160% !important; - min-width: 800px !important; + min-width: 900px !important; margin: 5px 0 0 0; padding: 10px; text-align: center; @@ -1212,6 +1247,7 @@ label.toggleview img { border: 1px solid #89f; background: #eef; box-shadow: 0 0 3px 0 #bbb inset; + box-shadow: inset 0 0 0 1px #eef, 0 0 5px 1px #cfcfff inset; } form { @@ -1235,6 +1271,7 @@ hr { hr.debug { width: 100%; background: #89f; + background: linear-gradient(to right, #89f 40%, #eef); } hr.debug:nth-child(n+7) { @@ -1262,8 +1299,7 @@ a:visited { color: #448; } -a:hover, -a:focus { +a:hover, a:focus { font-weight: normal; color: #f60; outline: none; @@ -1287,11 +1323,19 @@ input { } input:disabled { - cursor: auto; + cursor: not-allowed; opacity: .5 !important; } -input[type=submit]:disabled, a.controld { +input:disabled[type="submit"]:hover, input.disabled[type="reset"]:hover, input:disabled[type="submit"]:focus, input.disabled[type="reset"]:focus { + border: 1px solid #999 !important; + background: linear-gradient(to bottom, #fff, #ddd); + cursor: not-allowed !important; + box-shadow: inset 0 0 0 1px #fff; + color: #111; +} + +a.controld { display: none; } @@ -1307,8 +1351,7 @@ input[type="image"], a img { filter: drop-shadow(0 0 1px #777); } -input[type="image"]:hover, a img:hover, -input[type="image"]:focus, a img:focus { +input[type="image"]:hover, a img:hover, input[type="image"]:focus, a img:focus { outline: none !important; filter: drop-shadow(0 0 2px #f60) !important; } @@ -1318,12 +1361,12 @@ input::-moz-focus-inner { outline: 0; } -input[type="submit"], input[type="reset"] { +input[type="submit"], input[type="reset"], a.control { font-size: 9pt; font-weight: normal; color: #333; min-width: 90px !important; - padding: 5px 3px !important; + padding: 5px 8px !important; text-align: center; border: 1px solid #999; border-radius: 2px; @@ -1335,20 +1378,19 @@ input[type="submit"], input[type="reset"] { cursor: pointer !important; } -input[type="submit"]:hover, input[type="reset"]:hover, -input[type="submit"]:focus, input[type="reset"]:focus { +input[type="submit"]:hover, input[type="reset"]:hover, input[type="submit"]:focus, input[type="reset"]:focus, a.control:hover, a.control:focus { color: #111; background: #fff; background: linear-gradient(to bottom, #ddd 0%, #fff 100%); border: 1px solid #89f; } -input[type="submit"]:focus, input[type="reset"]:focus { +input[type="submit"]:focus, input[type="reset"]:focus, a.control:focus { filter: drop-shadow(0 0 2px #89f); -webkit-filter: drop-shadow(0 0 2px #89f); } -input[type="submit"]:active, input[type="reset"]:active { +input[type="submit"]:active, input[type="reset"]:active, a.control:active { color: #333; background: #ddd; border: 1px solid #999; @@ -1356,12 +1398,36 @@ input[type="submit"]:active, input[type="reset"]:active { box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px #555; } +input[name="savepri"] { + margin-right: -2px !important; +} + input[type="text"], textarea { cursor: text !important; } a.control { vertical-align: middle; + text-align: left; + padding: 2px 5px 1px 3px !important; + display: inline-block; + margin: -1px 0 1px 5px; + min-width: 0 !important; + color: #333 !important; +} + +a.control:hover, a.control:focus { + color: #111 !important; + border: 1px solid #89f; +} + +a.control img { + margin: 0 !important; +} + +.script { + display: inline-block; + margin: 5px 0 2px; } /* @@ -1392,19 +1458,11 @@ input.r { background: #fff; } -input[type="text"]:focus, -textarea:focus, -input.r:focus, -textarea[name="i2cpOpts"]:focus, -input[name="nofilter_dataDir"]:focus { +input[type="text"]:focus, textarea:focus, input.r:focus, textarea[name="i2cpOpts"]:focus, input[name="nofilter_dataDir"]:focus { background: #fff; } -input[type="text"], -input[type="password"], -input.r, -input[name="nofilter_dataDir"], -textarea[name="i2cpOpts"] { +input[type="text"], input[type="password"], input.r, input[name="nofilter_dataDir"], textarea[name="i2cpOpts"] { font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", Verdana, "Bitstream Vera Sans", "DejaVu Sans", "Lucida Grande", Helvetica, sans-serif !important; min-width: 160px; margin: 2px 2px 2px 0; @@ -1417,17 +1475,12 @@ textarea[name="i2cpOpts"] { box-shadow: inset 1px 1px 1px #ddd; } -input[type="text"]:focus, -input[type="password"]:focus, -input.r:focus, -input[name="nofilter_dataDir"]:focus, -textarea[name="i2cpOpts"]:focus { +input[type="text"]:focus, input[type="password"]:focus, input.r:focus, input[name="nofilter_dataDir"]:focus, textarea[name="i2cpOpts"]:focus { color: #000 !important; box-shadow: inset 0 0 0 1px #89f; } -textarea[name="i2cpOpts"], -input[name="nofilter_dataDir"] { +textarea[name="i2cpOpts"], input[name="nofilter_dataDir"] { width: 500px; margin: 3px 0; padding: 5px; @@ -1436,20 +1489,15 @@ input[name="nofilter_dataDir"] { overflow: hidden; } -thead img, -thead img:hover { +thead img, thead img:hover { opacity: .8; } -input[type=image], -th a:link img, -th a:visited img { +input[type=image], th a:link img, th a:visited img { opacity: 1; } -input[type=image]:focus, -th a:focus, -a:focus img { +input[type=image]:focus, th a:focus, a:focus img { color: #f60; outline: none; filter: drop-shadow(0 0 1px #f60); @@ -1532,9 +1580,11 @@ select:focus { color: #000; } +/* select:nth-child(2) { margin-left: -18px; } +*/ @media screen and (-webkit-min-device-pixel-ratio: 0) { select { @@ -1549,7 +1599,7 @@ select { } textarea { - font: 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; + font: 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; font-weight: bold; padding: 1px 4px 0; color: #006; @@ -1615,8 +1665,7 @@ img:hover { } div.newtorrentsection td:first-child, -div.addtorrentsection td:first-child, -div.configsectionpanel td:first-child { +div.addtorrentsection td:first-child { font-weight: bold; padding-right: 5px; padding-left: 5px; @@ -1681,6 +1730,8 @@ div.configsectionpanel td:first-child { .trackerconfig th { min-width: 50px; + padding-top: 6px; + padding-bottom: 6px; } .trackerconfig th:first-child { @@ -1700,6 +1751,11 @@ div.configsectionpanel td:first-child { background: #fff; } +.knownTracker input[type="radio"] { + opacity: 0.6; + cursor: not-allowed; +} + .snarkTorrentNoneLoaded td { color: #0c153d !important; background: #fff; @@ -1775,13 +1831,29 @@ table.trackerconfig td:first-child { text-align: right !important; } +/* .configsectionpanel td[colspan="2"]:last-child, .configsectionpanel td[colspan="7"] { display: none; } +*/ +.configsectionpanel tr:last-child td[colspan="3"] { + display: none; +} + +#configs .spacer, .trackerconfig .spacer { + display: none; +} + +/* .configsectionpanel td[colspan="5"], .configsectionpanel td[colspan="2"] { border-top: 1px solid #89f; } +*/ + +.configsectionpanel td[colspan="5"] { + border-top: 1px solid #89f; +} .snarkConfig tr:nth-last-child(2) { background: none; @@ -1912,19 +1984,14 @@ div.configsection a:hover { } code { - font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; + font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; font-size: 9pt; font-weight: bold; padding: 0 2px; color: #050; } -.iframed .snarknavbar, -.iframed .mainsection, -.iframed .addtorrentsection, -.iframed .newtorrentsection, -.iframed .configsection, -.iframed .configsectionpanel { +.iframed .snarknavbar, .iframed .mainsection, .iframed .addtorrentsection, .iframed .newtorrentsection, .iframed .configsection, .iframed .configsectionpanel { border-right: none !important; border-left: none !important; border-radius: 0; @@ -2010,6 +2077,199 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac transition: ease transform 0.3s 0s; } + +.peerinfo td:first-child { + background: url(images/peer.png) center center no-repeat; +} + +/* debug */ + +.debuginfo td:first-child { + padding: 3px; + background: url(images/debuginfo.png) center center no-repeat; + background-size: 14px 14px; + background-blend-mode: luminosity; +} + +.debugConnection { + color: #030; + font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace; + word-spacing: -0.1em; + margin-left: 2px; + margin-right: 5px; + font-weight: bold; +} + +.debugConnStat { + margin-right: 4px; + font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; + color: #030; + font-weight: bold; + white-space: nowrap; +} + +.debugConnStat b { + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", Verdana, "Bitstream Vera Sans", "DejaVu Sans", "Lucida Grande", Helvetica, sans-serif; + color: #111; +} + +.debugRequests { + font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; + color: #030; + font-weight: bold; +} + +.debuginfo td { + line-height: 120% !important; +} + +.debuginfo b { + text-transform: capitalize; +} + +.from, .to { + font-family: sans-serif; + font-size: 12pt; + font-weight: bold; + vertical-align: middle; + line-height: 50%; + text-shadow: 0 0 1px #fff; +} + +/* end debug */ + +/* Resource Errors */ + +.resourceError { + border: 1px solid #89f; + border-bottom: 2px solid #89f; + margin-bottom: 0; +} + +.resourceError th { + background: url(/themes/console/images/info/errortriangle.png) left 10px center no-repeat, linear-gradient(to bottom, #fff, #eef); + background-size: 24px auto, 100% 100%; + padding: 10px 10px 10px 40px; + font-size: 10pt !important; + border: none; + border-bottom: 2px solid #89f; +} + +.resourceError td { + padding: 10px; + border: none; +} + +.resourceError tr:nth-child(odd) { + background: #ddf; +} + +.resourceError tr:nth-child(even) { + background: #eef; +} + +#DoesNotExist { + margin-top: 10px; + border: none; + border-bottom: 1px solid #89f; +} + +#DoesNotExist th { + border-top: 1px solid #89f; +} + +/ end resource errors */ + +#totals { + display: inline-block; + margin: 2px 0 2px 5px; +} + +/* torrent priorities */ + +.priorityHigh { + background: url(/i2psnark/.resources/icons/clock_red.png) left 28px center no-repeat; + display: inline-block; + width: 48px; + color: transparent; +} + +.priorityNormal { + background: url(/i2psnark/.resources/icons/clock.png) left 28px center no-repeat; + display: inline-block; + width: 48px; + color: transparent; +} + +.prioritySkip { + background: url(/i2psnark/.resources/icons/cancel.png) left 28px center no-repeat; + display: inline-block; + width: 48px; + color: transparent; +} + +/* end priorities */ + +/* configs */ + + +#configs td:nth-child(2) { + white-space: nowrap; +} + +#configs td:first-child { + min-width: 180px !important; + padding-left: 15px !important; +} + +td#bwHelp { + background: url(images/infocircle.png) left 10px center no-repeat; + background-size: 14px auto; + padding-left: 24px !important; + width: 100%; +} + +td#bwHelp a { + display: inline-block; + white-space: nowrap; + margin-left: 3px; + line-height: 100%; +} + +/* end configs */ + +#torrentInfoStats td { + text-align: left !important; +} + +#torrentInfoStats img { + margin: 1px 1px 2px 3px !important; +} + +#torrentInfoStats b { + margin-left: 2px; +} + +#torrentInfoStats span { + white-space: nowrap; + display: inline-block; + margin-right: 7px; +} + +#filecheck { + display: inline-block; + margin: 5px 0; + background: url(images/progressbar.gif) left center no-repeat; + padding-left: 22px; +} + +#filecheck a { + margin: 8px; +} + + +/* end Resource Errors */ + /* MS Edge 14+ fix */ _:-ms-lang(x), * { filter: none !important; @@ -2018,8 +2278,91 @@ _:-ms-lang(x), * { /* responsive layout */ -@media screen and (min-width: 1400px) { +@media screen and (max-width: 950px) { + body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_dataDir"], select, textarea, textarea[name="i2cpOpts"], .snarkAddInfo { + font-size: 8pt; +} + +.snarkTorrents td:nth-child(2) { + white-space: nowrap; +} +.snarkTorrents td[colspan="10"] { + white-space: normal; +} + +.snarkTorrentStatus b { + display: none; +} + +b.alwaysShow { + display: inline; +} + +.snarkTorrents td:nth-child(2), .snarkTorrents td:nth-child(2) a { + font-weight: bold; +} + +td#bwHelp { + background: url(images/infocircle.png) left 10px center no-repeat; + background-size: 14px auto !important; +} +} + +@media screen and (max-width: 1100px) { +.toggleview, .snarkConfigTitle { + font-size: 11pt !important; +} + +.snarkDirInfo th a img, .snarkDirInfo th img { + max-height: 18px !important; +} + +body { + margin: 3px; +} + +.page { + padding: 3px; +} + +.addtorrentsection, .newtorrentsection, .configsection, .configsectionpanel { + margin-top: 3px !important; + margin-bottom: 3px !important; +} + +.configsection, .configsectionpanel:last-child { + margin-bottom: 0 !important; +} + +table.SnarkDirInfo { + margin-top: 3px !important; +} + +.dirInfoComplete { + display: none; +} +} + +@media screen and (max-width: 1200px) { +.trackerconfig th { + padding-top: 5px; + padding-bottom: 5px; +} +} + +@media screen and (min-width: 1100px) { +body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_dataDir"], select, textarea, textarea[name="i2cpOpts"], .snarkAddInfo, code { + font-size: 9pt !important; +} + +.percentDownloaded { + pointer-events: none; /* hide tooltip */ +} +} + +@media screen and (min-width: 1400px) { +body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_dataDir"], select, textarea, textarea[name="i2cpOpts"], .snarkAddInfo, code { font-size: 10pt !important; } @@ -2034,5 +2377,29 @@ body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_ .snarkMessages li, .snarkTorrents tt { font-size: 9pt; } + +.snarkTorrentAction input[type="image"], .snarkTorrents th:last-child input[type="image"] { + padding: 4px !important; + box-shadow: inset 0 0 0 1px #fff; } +td.snarkTorrentDownloaded { + white-space: nowrap; + padding: 0 10px; +} + +.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover { + min-width: 240px; +} + +.snarkTorrentStatus b { + margin-right: 3px; +} + +#configs td:first-child { + min-width: 220px !important; + +} + +/* end resonsive layout */ + diff --git a/installer/resources/themes/snark/dark/images/debuginfo.png b/installer/resources/themes/snark/dark/images/debuginfo.png new file mode 100644 index 000000000..42c7cd6ab Binary files /dev/null and b/installer/resources/themes/snark/dark/images/debuginfo.png differ diff --git a/installer/resources/themes/snark/dark/images/infocircle.png b/installer/resources/themes/snark/dark/images/infocircle.png new file mode 100644 index 000000000..dffe20d9b Binary files /dev/null and b/installer/resources/themes/snark/dark/images/infocircle.png differ diff --git a/installer/resources/themes/snark/dark/images/peer.png b/installer/resources/themes/snark/dark/images/peer.png new file mode 100644 index 000000000..4f3408dc6 Binary files /dev/null and b/installer/resources/themes/snark/dark/images/peer.png differ diff --git a/installer/resources/themes/snark/dark/images/progressbar.gif b/installer/resources/themes/snark/dark/images/progressbar.gif new file mode 100644 index 000000000..e204f6b31 Binary files /dev/null and b/installer/resources/themes/snark/dark/images/progressbar.gif differ diff --git a/installer/resources/themes/snark/dark/snark.css b/installer/resources/themes/snark/dark/snark.css index fa420de52..772ee3833 100644 --- a/installer/resources/themes/snark/dark/snark.css +++ b/installer/resources/themes/snark/dark/snark.css @@ -123,8 +123,8 @@ body.iframed { } .snarkRefresh:active { - color: #fff !important; - box-shadow: inset 3px 2px 3px #000 !important; + color: #fff !important; + box-shadow: inset 3px 2px 3px #000 !important; } .snarkRefresh:link:first-child:hover, .snarkRefresh:link:first-child:focus { @@ -156,12 +156,6 @@ body.iframed { background-repeat: no-repeat !important; } - -.snarkRefresh:hover, .snarkRefresh:focus { - opacity: 1; - -} - .snarkRefresh:hover, .snarkRefresh:focus { text-decoration: none !important; text-transform: uppercase !important; @@ -208,7 +202,8 @@ body.iframed { } .snarkMessages { - font: normal 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; + font: normal 8pt "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; + line-height: 120%; text-align: left; margin: 0; padding: 3px 5px; @@ -231,6 +226,7 @@ _:-ms-lang(x), .snarkMessages { .snarkMessages a:link, .snarkMessages a:visited { color: #2b2 !important; + font-weight: bold; } .snarkMessages a:hover { @@ -286,7 +282,7 @@ _:-ms-lang(x), .snarkMessages { } tt { - font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; + font-family: "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; } .logshim { @@ -295,7 +291,7 @@ tt { pre { width: 100%; - font: 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; + font: 8pt "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; padding: 0; text-align: left !important; height: 8px; @@ -355,9 +351,11 @@ th:first-child img { margin: 1px -2px 3px 1px !important; } +/* th:nth-child(2) img { margin: 1px 5px 3px 2px !important; } +*/ tfoot th { padding-bottom: 4px !important; @@ -399,7 +397,7 @@ tfoot tr:nth-child(n+1) { .priority { font-size: 8pt; vertical-align: middle; - min-width: 160px; + max-width: 160px; } .SnarkTorrents { @@ -440,7 +438,7 @@ tfoot tr:nth-child(n+1) { text-align: center; } -.snarkTorrents tfoot th, .SnarkTorrents tfoot th tt { +.snarkTorrents tfoot th { background: #000; font-weight: normal; } @@ -449,12 +447,6 @@ tfoot tr:nth-child(n+1) { font-weight: bold; } -.snarkTorrents tfoot th tt { - color: #ff0; - font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; - background: none; -} - .snarkTorrents tfoot th:nth-child(3) { text-align: center; } @@ -511,8 +503,14 @@ table.SnarkTorrents { } .snarkTorrents tt { - color: #ff0; + color: #000; + background: #990; + padding: 1px 2px; + border-radius: 2px; + margin: 1px 3px; font-size: 8pt; + font-weight: bold; + display: inline-block; } .snarkTorrentInfo img { @@ -548,10 +546,8 @@ table.SnarkTorrents { .snarkTorrentInfo input[type="submit"] { min-width: 85px; - text-align: center; - margin-left: 0; } - +/* .snarkTorrentInfo input.stoptorrent { margin-right: -8px; } @@ -580,6 +576,19 @@ table.snarkTorrentInfo tr:last-child td { padding: 8px 8px 12px !important; padding: 5px 5px 9px !important; } +*/ + +#torrentInfoControl, #setPriority { + border-top: 1px solid #494 !important; + background: none !important; +} + +#torrentInfoControl td, #setPriority th { + text-align: right !important; + padding: 10px 8px !important; + background: none !important; + box-shadow: inset 0 0 0 1px #030; +} table.SnarkTorrentInfo { margin-bottom: 1px !important; @@ -639,17 +648,24 @@ table.SnarkDirInfo { padding: 2px 0; } +.snarkTorrents .snarkTorrentName { + padding-left: 2px; +} + +/* .snarkDirInfo .headerpriority { text-align: center !important; vertical-align: middle; } +*/ .snarkDirInfo tr:last-child { border-bottom: 1px solid #494 !important; } -.headerpriority input[type=submit] { - margin: 5px -3px 5px 5px; +#setPriority, #torrentInfoControl { + background: url(/themes/console/dark/images/camotile2.png) repeat scroll center bottom #001100 !important; + border-bottom: 1px solid #494 !important; } .SnarkDirInfo img { @@ -658,9 +674,10 @@ table.SnarkDirInfo { } .snarkDirInfo thead img { - margin: 0 !important; + margin-right: 2px !important; max-width: none; max-height: none; + padding: 3px 2px !important; } .snarkDirInfo .headerpriority { @@ -669,10 +686,6 @@ table.SnarkDirInfo { padding-right: 10px; } -.snarkDirInfo .headerpriority img[src$="priority.png"] { - margin-right: -40px !important; -} - td.subHeaderPriority, td.priority { min-width: 36px !important; width: 0; @@ -708,6 +721,7 @@ td.priority:last-child { /* min-width: 350px !important;*/ padding-right: 10px !important; text-align: right !important; + white-space: nowrap; } tr.priority:last-child { @@ -723,9 +737,7 @@ th.headerdownloaded { } td.snarkFileStatus { - width: 80px; text-align: left; - font-size: 8pt; white-space: nowrap; } @@ -774,6 +786,7 @@ td:first-child { margin: 0 !important; text-align: center !important; width: 40px !important; + white-space: nowrap; } _:-ms-lang(x), .snarkTorrentAction { /* MS Edge 14+ wrap fix */ @@ -815,6 +828,10 @@ td.snarkTorrentStatus:nth-child(2) { text-align: left !important; } +.snarkTorrentStatus b { + margin-right: 2px; +} + .snarkTorrentStatus:first-child { text-align: left !important; padding-left: 0; @@ -830,7 +847,7 @@ td.snarkTorrentStatus:nth-child(2) { margin-left: 6px; } -.snarkTorrentStatus, .snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded { +.snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded { font-size: 8pt; padding: 0 3px; line-height: 90%; @@ -843,6 +860,7 @@ td.snarkTorrentStatus:nth-child(2) { .snarkTorrentDownloaded { color: #ee9 !important; + white-space: nowrap; } td.snarkTorrentDownloaded { @@ -947,7 +965,6 @@ td[onclick^="document.location"]:hover { .snarkFileName { padding: 4px 0 !important; text-align: left !important; - font-size: 9pt !important; } .snarkFileSize { @@ -976,6 +993,7 @@ td[onclick^="document.location"]:hover { .snarkTorrentETA { font-style: italic; color: #dd7 !important; + padding-right: 2px; } /* div.percentBarOuter { @@ -1047,15 +1065,17 @@ div.percentBarInner.percentBarComplete { .snarkAddInfo { font-size: 9pt; - line-height: 130% !important; - margin-left: 10px; + line-height: 135% !important; font-weight: normal; + background: url(images/infocircle.png) left center no-repeat; + background-size: 14px auto; + padding-left: 20px; } .snarkConfigTitle, label.toggleview { font-size: 11pt; font-weight: bold; - padding: 2px 22px 3px 20px; + padding: 3px 22px 3px 20px; margin: 5px 0 10px 0 !important; letter-spacing: 0.2em; border: 1px solid #494; @@ -1068,7 +1088,7 @@ div.percentBarInner.percentBarComplete { -webkit-filter: drop-shadow(0 2px 1px #000); display: inline-block; margin: 0 0 -3px !important; - min-width: 200px; + min-width: 220px; box-shadow: inset 0 0 0 1px #000; } @@ -1117,9 +1137,8 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac .page { color: #310; - min-width: 800px !important; + min-width: 960px !important; margin: 5px 0 0 0; - border-radius: 0 0 2px 2px; font-size: 9pt !important; line-height: 160% !important; text-align: center; @@ -1162,6 +1181,11 @@ hr.debug:nth-child(n+7) { opacity: 0.5; } +hr.debug:last-child { + background: #000; + margin-bottom: -5px; +} + a:link { color: #7c7; text-decoration: none; @@ -1204,9 +1228,13 @@ input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner { outline: none; } -input:disabled { +input.disabled, a.controld { opacity: 0.5 !important; - cursor: auto; + cursor: not-allowed !important; +} + +#setPriority input.disabled, #setPriority a.controld { + display: none; } .addtorrentsection input, .newtorrentsection input { @@ -1220,40 +1248,42 @@ input.r { border: 1px solid #494; } -input[type=submit], input[type=submit]:visited { +input[type=submit], input[type=submit]:visited, input.disabled:hover { color: #494; background: #000; border: 1px outset #191; - padding: 5px !important; + padding: 5px 10px !important; font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; - margin-top: 6px; min-width: 95px; text-align: center; filter: drop-shadow(0 0 1px #000); -webkit-filter: drop-shadow(0 0 1px #000); - cursor: pointer !important; } -input[type=submit]:hover, input[type=submit]:focus { +input[type=submit]:hover, input[type=submit]:focus, a.control:hover, a.control:focus { border: 1px solid #f60; background-color: #000; - color: #f60; + color: #f60 !important; box-shadow: 0 1px 1px 0 #ee9 inset; } -input[type=submit]:active { +input[type=submit]:active, a.control:active { border: 1px solid #f60; background: #f60; - color: #ee9; + color: #ee9 !important; text-shadow: none !important; box-shadow: inset 3px 3px 3px #000; box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px #000; } -input[type=submit]:disabled { - display: none; +input.disabled, input.disabled:hover, input.disabled:focus, input.disabled:active { + border: 1px outset #191 !important; + box-shadow: none !important; + color: #494 !important; + background: #000 !important; } + input[type=image], thead img { padding: 0 !important; border-radius: 3px; @@ -1288,6 +1318,10 @@ input[type="image"]:hover, a img:hover, input[type="image"]:focus, a:focus img { white-space: nowrap; } +.snarkTorrents td[colspan="10"] { + white-space: normal; +} + .snarkTorrents th:last-child input[type="image"], .snarkTorrents td:last-child input[type="image"] { border: 1px solid #000 !important; border: 1px solid #151 !important; @@ -1309,6 +1343,7 @@ input[type="image"]:hover, a img:hover, input[type="image"]:focus, a:focus img { .snarkTorrents th:last-child input[type="image"]:active, .snarkTorrents td:last-child input[type="image"]:active { box-shadow: inset 3px 3px 3px #000; background-blend-mode: luminosity; + transform: scale(0.9); } input[type=text], input.r, textarea[name="i2cpOpts"], input[name="nofilter_dataDir"] { @@ -1336,7 +1371,8 @@ textarea[name="i2cpOpts"], input[name="nofilter_dataDir"] { margin: 3px 0; height: 24px; padding: 3px; - width: 500px; + min-width: 500px; + width: 70%; resize: none; overflow: hidden; } @@ -1388,7 +1424,7 @@ input.default { input[size="85"] { width: 550px; - width: calc(100% - 150px); + width: calc(100% - 170px); } .addtorrentsection input, .newtorrentsection input { @@ -1435,9 +1471,11 @@ select:hover, select:focus, select:active { background: #000 url(images/dropdown_hover.png) right center no-repeat !important; } +/* select:nth-child(2) { margin-left: -18px; } +*/ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { select { @@ -1452,20 +1490,50 @@ textarea { padding: 1px 4px 0; border-radius: 2px; border: 1px solid #494; - font: 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; + font: 8pt "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; } textarea:focus { color: #ee9 !important; } -input[type="submit"], input[type="reset"], select, button { /* webkit/blink fix for oversaturated colors */ +input[type="submit"], input[type="reset"], select, button, a.control, a.controld { border: 1px solid #8b8; border-bottom: 1px solid #171; border-right: 1px solid #171; background: linear-gradient(to bottom, #020 0%, #000 20%, #000 80%, #010 100%); } +.script { + display: inline-block; + vertical-align: middle; + margin-top: -2px; +} + +a.control, a.controld { + padding: 3px 8px 2px 4px; + border-radius: 2px; + text-align: left; + margin: 2px 4px 2px 0; + font-weight: bold; + display: inline-block; + color: #494 !important; +} + +a.control img, a.controld img, a.control:hover img, a.control img:hover { + width: 14px; + height: 14px; + margin: 0; + padding: 0; + vertical-align: middle; + filter: none !important; + -webkit-filter: none !important; +} + +a.control:hover img { + filter: sepia(100%) hue-rotate(10deg) !important; +} + img { border: none; margin: 0 3px 1px 3px; @@ -1509,8 +1577,7 @@ img[src$="magnet.png"] { font-weight: bold !important; } -.newtorrentsection td:first-child, .addtorrentsection td:first-child, .configsectionpanel td:first-child { - white-space: nowrap; +.newtorrentsection td:first-child, .addtorrentsection td:first-child { font-weight: bold; padding-right: 5px; padding-left: 5px; @@ -1523,7 +1590,7 @@ img[src$="magnet.png"] { table#trackerselect { border: 1px solid #131; width: 100% !important; - width: calc(100% - 150px) !important; + width: calc(100% - 170px) !important; margin: 2px 5px 0 5px; } @@ -1563,6 +1630,13 @@ table#trackerselect { margin: 3px !important; } +#trackerselect a:not(old) { + display: inline-block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + .configsectionpanel td:first-child { padding-right: 10px !important; padding-left: 5px !important; @@ -1573,10 +1647,19 @@ table#trackerselect { min-width: 50px; } +.trackerconfig th, .trackerselect th { + padding-top: 7px; + padding-bottom: 7px; +} + .trackerconfig th:first-child { background: url(/themes/snark/ubergine/images/nuke.png) center right 8px no-repeat, linear-gradient(to bottom, #010, #000); } +.trackerselect tr:first-child td, .addtorrentsection tr:first-child td { + white-space: nowrap; +} + .trackerconfig th:last-child, .trackerconfig td:last-child { padding-left: 10px !important; } @@ -1626,7 +1709,6 @@ table.trackerconfig td:first-child { .trackerconfig input { margin: 3px 0 !important; - cursor: default; } .optbox[name="add_tracker_type"] { @@ -1639,6 +1721,10 @@ table.trackerconfig td:first-child { min-width: 100px; } +#configs input[type=submit] { + margin-right: 0 !important; +} + .trackerconfig td, .snarkConfig td { padding: 5px 1px !important; } @@ -1672,11 +1758,20 @@ table.trackerconfig td:first-child { } */ -.configsectionpanel td[colspan="2"]:last-child, .configsectionpanel td[colspan="7"] { +#configs td:first-child { + padding-left: 15px !important; + line-height: 80%; +} + +#configs td:first-child, .trackerconfig td:first-child { + padding-left: 10px !important; +} + +#configs .spacer, .trackerconfig .spacer { display: none; } -.configsectionpanel td[colspan="5"], .configsectionpanel td[colspan="2"] { +.configsectionpanel td[colspan="5"] { border-top: 1px solid #494; } @@ -1792,7 +1887,7 @@ code { font-size: 8.5pt; color: #ff6; padding: 0 2px; - font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; + font-family: "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; } .iframed .snarknavbar, .iframed .mainsection, .iframed .addtorrentsection, @@ -1869,6 +1964,209 @@ label.toggleview, .snarkConfigTitle a:visited { color: #7c7; } + +.peerinfo td:first-child { + background: url(images/peer.png) center center no-repeat; + background-size: 14px 14px; +} + +.peerinfo td, .debuginfo td { + padding-top: 5px; + padding-bottom: 5px; +} + + +/* debug */ + +.debuginfo td:first-child { + background: url(images/debuginfo.png) center center no-repeat; + background-size: 14px 14px; + background-blend-mode: luminosity; +} + +.debuginfo td:nth-child(2) { + padding-left: 0; +} + +.debuginfo b { + text-transform: capitalize; + margin-left: 1px; +} + +.debugConnection { + font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace; + color: #ee0; + line-height: 130%; + margin-right: 5px; + margin-left: 2px; +} + +.from, .to { + font-family: sans-serif; + font-size: 12pt; + font-weight: bold; + vertical-align: middle; + line-height: 50%; + text-shadow: 0 0 1px #000; +} + +.debugConnStat { + margin-right: 3px; + white-space: nowrap; +} + +.debugConnStat, .debugRequests { + font-family: "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; + color: #ee0; +} + +.debugConnStat b { + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; + color: #cc7; +} + +/* end debug */ + +#totals { + display: inline-block; + margin-left: 3px; +} + +.priorityHigh, .priorityNormal, .prioritySkip { + display: inline-block; + width: 48px; + color: transparent; + font-size: 0; + overflow: hidden; + text-align: left; +} + +.priorityHigh { + background: url(/i2psnark/.resources/icons/clock_red.png) left 28px center no-repeat; +} + +.priorityNormal { + background: url(/i2psnark/.resources/icons/clock.png) left 28px center no-repeat; +} + +.prioritySkip { + background: url(/i2psnark/.resources/icons/cancel.png) left 26px center no-repeat; +} + +/* configs */ + +#bwHelp i { + display: inline-block; + vertical-align: middle; +} + +#configs td:nth-child(2) { + white-space: nowrap; +} + +td#bwHelp { + background: url(images/infocircle.png) left 10px center no-repeat; + background-size: 14px auto; + padding-left: 24px !important; + width: 90%; + line-height: 100%; +} + +/* 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"]:hover { + opacity: 0.5; + cursor: not-allowed; + -webkit-filter: invert(100%) sepia(100%) hue-rotate(70deg) saturate(200%) !important; + filter: invert(100%) sepia(100%) hue-rotate(70deg) saturate(200%) !important; +} + +.snarkDirInfo tr:first-child th img:first-child { + margin-right: 5px; +} + +#filecheck { + display: inline-block; + margin: 5px 0; + background: url(images/progressbar.gif) left center no-repeat; + padding-left: 22px; +} + +#filecheck a { + margin: 8px; +} + +td#bwHelp a { + white-space: nowrap; +} + +#configs td:first-child::after { + content: ""; + display: inline-block; + vertical-align: middle; +} + +/* Resource Errors */ + +.resourceError { + margin-bottom: 0; + border: none; +} + +.resourceError th { + background: url(/themes/console/images/info/errortriangle.png) left 10px center no-repeat, linear-gradient(to bottom, #010, #000); + background-size: 24px auto, 100% 100%; + padding: 10px 10px 10px 40px; + font-size: 10pt !important; + border: none; + border-bottom: 1px solid #494; +} + +.resourceError td { + padding: 10px; + border: none; + font-size: 10pt; +} + +.resourceError tr:nth-child(odd) { + background: #010; +} + +.resourceError tr:nth-child(even) { + background: #000900; +} + +#DoesNotExist { + margin-top: 10px; + border: none; + border-bottom: 1px solid #494; +} + +#DoesNotExist th { + border-top: 1px solid #494; +} + +#NotFound { + border-bottom: 1px solid #494; +} + +/* end Resource Errors */ + /* MS Edge 14+ fix */ _:-ms-lang(x), * { filter: none !important; @@ -1877,21 +2175,120 @@ _:-ms-lang(x), * { /* responsive layout */ +@media screen and (max-width: 950px) { +.snarkTorrents td:nth-child(2) { + white-space: nowrap; +} +.snarkTorrents td[colspan="10"] { + white-space: normal; +} + +.snarkTorrentStatus b { + display: none; +} + +b.alwaysShow { + display: inline; +} + +.snarkTorrentStatus, .snarkTorrentStatus a { + font-weight: bold !important; +} + +.snarkTorrents td:first-child img { + height: 16px; + width: auto; +} +} + +@media screen and (max-width: 1100px) { +#configs td:first-child { + min-width: 200px !important; +} +} + +@media screen and (max-width: 1200px) { +.dirInfoComplete { + display: none; +} + +#configs td:first-child::after { + min-height: 24px; +} + +td#bwHelp a { + margin-left: 2px; +} +} + +@media screen and (min-width: 1100px) { +body, .snarkTorrents td, .snarkAddInfo, th, td, code, textarea, input, input[type="submit"], input[type="reset"], select, button, a { + font-size: 9pt !important; +} + +.snarkConfigtitle, .snarkConfigTitle a, label.toggleview { + font-size: 11pt !important; +} + +.snarkTorrents td { + padding-top: 3px !important; + padding-bottom: 3px !important; +} + +.snarkTorrentInfo td, .snarkDirInfo td, .snarkTorrents .peerinfo td { + padding-top: 6px !important; + padding-bottom: 6px !important; +} + +#configs td:first-child { + min-width: 220px !important; +} + +.snarkTorrentStatus b { + margin-right: 3px; +} +} + +@media screen and (min-width: 1200px) { +.percentDownloaded { + pointer-events: none; /* hide tooltip */ +} + +#configs td:first-child::after { + min-height: 26px; +} + +td#bwHelp a { + display: inline-block; + white-space: nowrap; + margin-left: 4px; +} +} + @media screen and (min-width: 1400px) { -body, .snarkTorrents td, .snarkAddInfo, th, td { +body, .snarkTorrents td, .snarkAddInfo, th, td, code, textarea, input, input[type="submit"], input[type="reset"], select, button, a { font-size: 10pt !important; } .snarkRefresh:link { - font-size: 10.5pt; + font-size: 11pt !important; +} + +.snarkConfigTitle, .snarkConfigTitle a, label.toggleview { + font-size: 12pt !important; +} + +.snarkConfigTitle, label.toggleview { + min-width: 240px !important; + padding-top: 4px; } .snarkRefresh:link:first-child { padding-left: 13px !important; } -tt, .snarkTorrents tt, code, .snarkMessages, input, input[type="submit"], input[type="reset"], select, button, textarea { - font-size: 9pt; +tt, .snarkTorrents tt, .snarkMessages, .snarkMessages a { + font-size: 9pt !important; } select { @@ -1899,9 +2296,47 @@ select { padding-bottom: 4px; } -select:nth-child(2) { - margin-left: -14px; +textarea[name="i2cpOpts"] { + height: 26px; +} + +.snarkTorrents th:last-child input[type="image"], .snarkTorrents td:last-child input[type="image"] { + height: 11px; +} + +.snarkTorrentDownloaded { + white-space: nowrap; + padding: 0 8px; +} + +.snarkTorrents td:nth-child(3), .SnarkTorrents td:nth-child(4) { + width: 18px !important; +} + +.snarkTorrents .snarkTorrentName { + padding-left: 5px; +} + +.debugConnection { + line-height: 150%; +} + +.page { + padding: 10px; + border: 1px solid #494; + background: #001900; + background: linear-gradient(to bottom, #001900, #010); + box-shadow: inset 0 0 0 1px #000, inset 0 0 7px 3px #002900; +} + +#configs td:first-child::after { + min-height: 28px; +} + +.snarkTorrentStatus b { + margin-right: 4px; } } /* end responsive layout */ + diff --git a/installer/resources/themes/snark/light/images/debuginfo.png b/installer/resources/themes/snark/light/images/debuginfo.png new file mode 100644 index 000000000..42c7cd6ab Binary files /dev/null and b/installer/resources/themes/snark/light/images/debuginfo.png differ diff --git a/installer/resources/themes/snark/light/images/infocircle.png b/installer/resources/themes/snark/light/images/infocircle.png new file mode 100644 index 000000000..b1d0be10a Binary files /dev/null and b/installer/resources/themes/snark/light/images/infocircle.png differ diff --git a/installer/resources/themes/snark/light/images/peer.png b/installer/resources/themes/snark/light/images/peer.png new file mode 100644 index 000000000..93a9e7738 Binary files /dev/null and b/installer/resources/themes/snark/light/images/peer.png differ diff --git a/installer/resources/themes/snark/light/images/progressbar.gif b/installer/resources/themes/snark/light/images/progressbar.gif new file mode 100644 index 000000000..e204f6b31 Binary files /dev/null and b/installer/resources/themes/snark/light/images/progressbar.gif differ diff --git a/installer/resources/themes/snark/light/snark.css b/installer/resources/themes/snark/light/snark.css index d0b60e36f..95b972390 100644 --- a/installer/resources/themes/snark/light/snark.css +++ b/installer/resources/themes/snark/light/snark.css @@ -190,7 +190,7 @@ button::-moz-focus-inner, input::-moz-focus-inner { } .snarkMessages { - font-family: "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, mono; + font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace; font-size: 8pt; text-align: left; margin: -2px 0 0; @@ -291,27 +291,9 @@ a:active { color: #f30; } -a.control, a.controld { - background: #fff; - border-radius: 2px; - font-weight: bold; - margin: 5px 4px !important; - padding: 5px !important; - white-space: nowrap; - display: inline-block; - float: right; - min-width: 0 !important; -} - -a.controld { - color: #459; - font-weight: normal; - display: none; -} - pre { width: 100%; - font: 8pt "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, mono; + font: 8pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace; padding: 0; text-align: left !important; height: 8px; @@ -359,7 +341,7 @@ th { font-size: 9pt; border-top: 1px solid #7778bf; border-bottom: 1px solid #7778bf; - background: #fff url("../../console/light/images/header.png") repeat-x scroll center center; + background: #fff url(/themes/console/light/images/header.png) repeat-x scroll center center; background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 51%, #eef 100%); color: #31334f; } @@ -435,12 +417,10 @@ tfoot tr:nth-child(n+1) { .headerstatus { text-align: left; - padding-left: 15px; } .headerpriority { - text-align: left; - padding-left: 10px; + text-align: center; } .ParentDir { @@ -451,10 +431,14 @@ tfoot tr:nth-child(n+1) { padding: 4px 0; } +.ParentDir a { + display: inline-block; + width: 100%; +} + .priority { - font-size: 7pt; vertical-align: middle; - min-width: 160px; + width: 200px; } .snarkTorrents { @@ -485,7 +469,15 @@ tfoot tr:nth-child(n+1) { } .snarkTorrents td:nth-child(2) { - word-spacing: -0.08em; + white-space: nowrap; +} + +.snarkTorrentStatus b { + margin-right: 3px; +} + +.snarkTorrents td[colspan="10"] { + white-space: normal !important; } .snarkTorrents td:nth-child(3), .SnarkTorrents td:nth-child(4) { @@ -494,7 +486,7 @@ tfoot tr:nth-child(n+1) { } .SnarkTorrents td:nth-child(4) { - text-align: left; + text-align: center; } .snarkTorrents td[colspan="4"], .snarkTorrents td[colspan="10"] { @@ -511,14 +503,14 @@ tfoot tr:nth-child(n+1) { } .snarkTorrents tfoot th { - padding: 8px 4px !important; + padding: 5px 4px !important; background: #fff; vertical-align: top; } +/* .snarkTorrents td:nth-child(n+6), .snarkTorrents tfoot th:nth-child(n+2) { font-variant: all-small-caps !important; - word-spacing: -0.2em; } @media screen and (-webkit-min-device-pixel-ratio:0) { @@ -526,6 +518,7 @@ tfoot tr:nth-child(n+1) { font-variant: normal !important; } } +*/ td { padding: 2px 4px; @@ -585,6 +578,7 @@ _:-ms-lang(x), .snarkTorrentAction { background: linear-gradient(to bottom, #fff 0%, #fff 50%, #ddf 51%, #ddf 100%); border-radius: 2px; border: 1px solid #89f; + box-shadow: inset 0 0 0 1px #fff; margin: 2px; filter: drop-shadow(0 0 1px #ddd); -webkit-filter: drop-shadow(0 0 1px #ddd); @@ -653,9 +647,9 @@ _:-ms-lang(x), .snarkTorrentAction { line-height: 90%; } - .snarkTorrentDownloaded, .snarkTorrents tfoot th:nth-last-child(5) { text-align: center; + white-space: nowrap; } .snarkTorrentOdd { @@ -675,6 +669,10 @@ _:-ms-lang(x), .snarkTorrentAction { color: #0c111f !important; } +.peerinfo:hover td:first-child { + background: url(images/peer.png) center center no-repeat #ffd !important; +} + .snarkTorrents tr:hover img { mix-blend-mode: normal; } @@ -695,7 +693,6 @@ _:-ms-lang(x), .snarkTorrentAction { .snarkFileName { padding: 4px 0 !important; text-align: left !important; - font-size: 8pt !important; } .snarkFileSize { @@ -704,10 +701,10 @@ _:-ms-lang(x), .snarkTorrentAction { } .snarkFileStatus { - padding: 4px 5px 4px 15px; + padding: 4px 5px; font-style: italic; text-align: left; - min-width: 230px; + white-space: nowrap; } .snarkTorrentETA { @@ -715,7 +712,7 @@ _:-ms-lang(x), .snarkTorrentAction { } .choked { - color: #f00000 !important; + color: #a00 !important; } .unchoked { @@ -739,7 +736,12 @@ _:-ms-lang(x), .snarkTorrentAction { .snarkAddInfo { font-size: 9pt; - line-height: 130% !important; + display: inline-block; + margin-top: 7px; + background: url(images/infocircle.png) left center no-repeat; + background-size: 16px auto; + padding-left: 20px; + min-height: 16px; } .snarkConfigTitle:hover, .toggleview:hover { @@ -758,7 +760,7 @@ _:-ms-lang(x), .snarkTorrentAction { .configsectionpanel .snarkConfigTitle:hover { font-size: 11pt; font-weight: bold; - padding: 2px 15px 2px 15px; + padding: 3px 15px; margin: 0 0 -3px 0 !important; letter-spacing: 0.15em; border: 1px solid #7778bf; @@ -851,6 +853,11 @@ _:-ms-lang(x), .snarkConfigTitle, .snarkConfigTitle a, label.toggleview, padding: 6px 1px; } +.snarkTorrentInfo th:first-child { + background: url(images/file.png) center left 5px no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 51%, #eef 100%); + background-size: 14px auto, 100% 100%; +} + .snarkTorrentInfo td { text-align: left !important; padding: 3px 0 3px 1px !important; @@ -874,24 +881,24 @@ _:-ms-lang(x), .snarkConfigTitle, .snarkConfigTitle a, label.toggleview, border-bottom: 1px solid #7778bf; } -.snarkTorrentInfo input { - float: right; -} - .snarkDirInfo thead img { margin: 0 !important; padding: 0 2px !important; } +/* .snarkDirInfo td { min-width: 0 !important; } +*/ +/* .snarkDirInfo .ParentDir a, .snarkDirInfo .snarkFileName a, .snarkTorrents .snarkTorrentName a { display: inline-block; width: 100%; padding: 2px 0; } +*/ table#trackerselect { width: 100% !important; @@ -991,22 +998,19 @@ input.r { border: 1px solid #7778bf; } -input[type=submit], a.control { +input[type=submit], a.control, input.disabled { color: #227; background: #fff; background: linear-gradient(to bottom, #fff 0%, #fff 50%, #ddf 50%, #ddf 100%); border: 1px solid #7778bf; - padding: 2px; + padding: 5px 8px !important; font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; - margin: 6px 10px 6px 0; + margin: 6px 3px 6px 6px !important; border-radius: 2px; min-width: 90px; text-align: center; box-shadow: inset 0 0 0 1px #fff; -} - -input[type=submit] { - padding: 5px !important; + filter: drop-shadow(0 0 1px #bbb); } input[type=submit]:hover, input[type=submit]:focus, a.control:hover, a.control:focus { @@ -1024,6 +1028,27 @@ input[type=submit]:active, a.control:active { box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 4px #333; } +a.control, a.controld { + border-radius: 2px; + font-weight: bold; + margin: 6px 3px 6px 3px !important; + padding: 4px 8px 4px 5px !important; + white-space: nowrap; + display: inline-block; + min-width: 0 !important; +} + +a.controld { + color: #459; + font-weight: normal; + display: none; +} + +a.control img { + filter: none; + -webkit-filter: none; +} + input[type=image], thead img { padding: 0 !important; border-radius: 0; @@ -1074,6 +1099,7 @@ textarea[name="i2cpOpts"] { input[name="nofilter_dataDir"], textarea[name="i2cpOpts"] { width: 60%; min-width: 500px !important; + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; } input[type="radio"] { @@ -1097,12 +1123,14 @@ input.default { display: none; } -input.disabled, input.disabled:hover, a.controld { - background-color: #fff; - border: 1px inset #191; - color: #459; +input.disabled, input.disabled:hover, input.disabled:active, a.controld { + background: #fff !important; + color: #459 !important; font-weight: normal; + opacity: 0.6; + cursor: not-allowed; display: none; + box-shadow: none !important; } select { @@ -1127,9 +1155,11 @@ select:active, select option { background: #fff; } +/* select + select { margin-left: -18px; } +*/ textarea { background: #eef; @@ -1137,7 +1167,7 @@ textarea { font-weight: bold; padding: 2px 4px; border-radius: 2px; - border: 1px solid #66f; + border: 1px solid #7778bf; font-size: 8pt; } @@ -1313,7 +1343,15 @@ code, tt { font-size: 8.5pt; color: #0045ff; font-weight: bold; - font-family: "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, mono; + font-family: "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace; +} + +.snarkTorrents tt { + background: #99f; + color: #fff; + border-radius: 2px; + padding: 2px 3px; + margin: 1px 3px 1px 1px; } .routerdown { @@ -1327,6 +1365,10 @@ code, tt { border-spacing: 0; } +.trackerconfig tr:first-child { + filter: drop-shadow(0 0 1px #999); +} + .trackerconfig th:first-child { border-radius: 2px 0 0 2px; border-left: 1px solid #339; @@ -1402,6 +1444,229 @@ input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent display: none; } +.peerinfo td:first-child { + background: url(images/peer.png) center center no-repeat; + padding-right: 10px !important; +} + +.peerinfo td, .debuginfo td { + padding-top: 5px !important; + padding-bottom: 5px !important; + word-spacing: 0em !important; +} + +/* debug */ + +.debuginfo td { + font-size: 8pt !important; + line-height: 120%; +} + +.debuginfo td:first-child { + background: url(images/debuginfo.png) center center no-repeat; + background-size: 14px 14px; + background-blend-mode: luminosity; +} + +.debuginfo b { + text-transform: capitalize; + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; +} + +.debugConnection { + font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace; + font-weight: bold !important; + color: #030; + font-weight: bold; + margin-right: 5px; +} + +.from, .to { + font-family: sans-serif; + font-size: 12pt; + font-weight: bold; + vertical-align: middle; + line-height: 50%; +} + +.debugConnStat { + color: #030; + margin-right: 4px; + white-space: nowrap; + font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace; + font-weight: bold !important; + word-spacing: -0.1em; +} + +.debugConnStat b { + color: #272e3f; + margin-right: 0; + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; +} + +/* end debug */ + +/* Resource Errors */ + +.resourceError { + border: 1px solid #89f; + border-bottom: 2px solid #89f; + margin-bottom: 0; +} + +.resourceError th { + background: url(/themes/console/images/info/errortriangle.png) left 10px center no-repeat, linear-gradient(to bottom, #fff, #eef); + background-size: 24px auto, 100% 100%; + padding: 10px 10px 10px 40px; + font-size: 10pt !important; + border: none; + border-bottom: 1px solid #7778bf; +} + +.resourceError td { + padding: 10px; + border: none; +} + +.resourceError tr:nth-child(odd) { + background: #ddf; +} + +.resourceError tr:nth-child(even) { + background: #eef; +} + +#DoesNotExist { + margin-top: 10px; + border: none; +} + +#DoesNotExist th { + border-top: 1px solid #7778bf; +} + +#NotFound { + border: none; + border-top: 1px solid #7778bf; +} + +/* end Resource Errors */ + +#totals { + display: inline-block; + margin: 2px 0 2px 5px; +} + +/* Downloading Priorities */ + +.snarkDirInfo input[type="radio"], .snarkDirInfo input[type="radio"]:checked { + margin: 0; + padding: 0; + min-height: 16px; + min-width: 16px; + vertical-align: middle; +} + +.priority { + text-align: center; + width: 160px; +} + +.priorityHigh, .priorityNormal, .prioritySkip { + display: inline-block; + width: 40px; + color: transparent; + vertical-align: middle; + margin: 3px 10px 3px 3px; + overflow: hidden; + font-size: 0; + text-align: left; +} + +.priorityHigh { + background: url(/i2psnark/.resources/icons/clock_red.png) left 20px center no-repeat; +} + +.priorityNormal { + background: url(/i2psnark/.resources/icons/clock.png) left 20px center no-repeat; +} + +.prioritySkip { + background: url(/i2psnark/.resources/icons/cancel.png) left 18px center no-repeat; +} + +/* end priorities */ + +/* configs */ + +#configs td:nth-child(2) { + white-space: nowrap; +} + +#configs td:first-child { + min-width: 220px !important; + font-weight: bold; +} + +td#bwHelp { + background: url(images/infocircle.png) left 10px center no-repeat; + background-size: 14px auto; + padding-left: 28px !important; + width: 90%; + line-height: 100%; +} + +td#bwHelp a { + display: inline-block; + white-space: nowrap; +} + +/* end configs */ + +#filecheck { + display: inline-block; + margin: 5px 0; + background: url(images/progressbar.gif) left center no-repeat; + padding-left: 22px; +} + +#filecheck a { + margin: 8px; +} + +#torrentInfoControl td, #setPriority th { + text-align: right !important; + padding: 5px !important; + background: linear-gradient(to bottom, #fff, #eef) !important; +} + +#torrentInfoControl input { + display: inline; +} + +#setPriority th { + border-bottom: 1px solid #eef; +} + +#torrentInfoStats td { + text-align: left !important; + padding-left: 2px !important; +} + +#torrentInfoStats img { + margin: 1px 1px 2px 3px !important; +} + +#torrentInfoStats b { + margin-left: 2px; +} + +#torrentInfoStats span { + white-space: nowrap; + display: inline-block; + margin-right: 7px; +} + /* MS Edge 14+ fix */ _:-ms-lang(x), * { filter: none !important; @@ -1415,16 +1680,46 @@ body, td, .snarkMessages li, .snarkMessages a, button, input, select, .snarkAddI font-size: 8pt !important; } -.snarkConfigTitle a { - font-size: 10.5pt !important; +.snarkConfigTitle a, .snarkConfigTitle, .toggleview { + font-size: 10pt !important; } -@media screen and (-webkit-min-device-pixel-ratio:0) { +.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 { font-size: 14pt !important; } } +*/ + +@media screen and (max-width: 1200px) { +.dirInfoComplete { + display: none; } +} + /* enable to hide status text, upload speed + upload amount in main torrent table at 800px or less */ /* @@ -1445,8 +1740,23 @@ body, td, .snarkMessages li, .snarkMessages a, button, input, select, .snarkAddI } */ +@media screen and (min-width: 1200px) { +.percentDownloaded { + pointer-events: none; /* hide tooltip */ +} + +#configs tr:nth-last-child(n+4) td { + padding-top: 3px; + padding-bottom: 3px; +} + +.snarkTorrentName { + padding-left: 4px; +} +} + @media screen and (min-width: 1400px) { -body, td, button, input, select, .snarkAddInfo, code, tt, th, a, a:link { +body, td, button, input, select, .snarkAddInfo, code, tt, th, a, a:link, textarea { font-size: 10pt !important; } @@ -1463,22 +1773,13 @@ a.snarkRefresh:first-child { padding-left: 16px !important; } -.configsectionpanel .snarkConfigTitle:hover { +.configsectionpanel .snarkConfigTitle:hover, .snark { font-size: 12pt !important; padding: 3px 15px !important; } -.snarkConfigTitle a, label.toggleview { +.snarkConfigTitle, .snarkConfigTitle a, label.toggleview { font-size: 12pt !important; - padding: 1px 15px 4px; -} - -@media screen and (-webkit-min-device-pixel-ratio:0) { -.snarkConfigTitle a, label.toggleview, -.configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover { - font-size: 14pt !important; - padding: 3px 15px 4px !important; -} } input[type="submit"] { @@ -1489,13 +1790,52 @@ input[type="submit"] { height: 58px; } -.snarkConfigTitle, label.toggleview { - font-size: 12pt; - padding: 3px 15px; +.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover { + font-size: 12pt !important; + padding: 4px 15px !important; } -.snarkTorrentDownloaded { +.snarkTorrentStatus b { + padding-right: 3px; +} + +.snarkTorrentDownloaded, .snarkTorrertUploaded, .snarkTorrentRateDown, .snarkTorrentStatus, .peerinfo td:nth-child(2), .debuginfo td:nth-child(2) { white-space: nowrap; + padding: 2px 8px 2px 3px !important; +} + +.snarkTorrentAction input[type="image"], .snarkTorrents th:last-child input[type="image"] { + padding: 4px !important; +} + +.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover { + min-width: 240px; +} + +.debuginfo td { + font-size: 10pt !important; + word-spacing: 0em; + padding-top: 4px !important; + padding-bottom: 4px !important; +} + +.debugConnection { + background: #337; + border-radius: 2px; + padding: 2px 4px; + color: #fff; + margin-top: 2px; + margin-bottom: 2px; + font-size: 9pt !important; + display: inline-block; +} +} + +@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1400px) { +.snarkConfigTitle a, label.toggleview, +.configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover { + font-size: 14pt !important; + padding: 3px 15px 4px !important; } } diff --git a/installer/resources/themes/snark/midnight/images/debuginfo.png b/installer/resources/themes/snark/midnight/images/debuginfo.png new file mode 100644 index 000000000..42c7cd6ab Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/debuginfo.png differ diff --git a/installer/resources/themes/snark/midnight/images/infocircle.png b/installer/resources/themes/snark/midnight/images/infocircle.png new file mode 100644 index 000000000..193e3253a Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/infocircle.png differ diff --git a/installer/resources/themes/snark/midnight/images/peer.png b/installer/resources/themes/snark/midnight/images/peer.png new file mode 100644 index 000000000..4f3408dc6 Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/peer.png differ diff --git a/installer/resources/themes/snark/midnight/images/progressbar.gif b/installer/resources/themes/snark/midnight/images/progressbar.gif new file mode 100644 index 000000000..e204f6b31 Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/progressbar.gif differ diff --git a/installer/resources/themes/snark/midnight/snark.css b/installer/resources/themes/snark/midnight/snark.css index 5c771c958..a668ce39a 100644 --- a/installer/resources/themes/snark/midnight/snark.css +++ b/installer/resources/themes/snark/midnight/snark.css @@ -44,7 +44,6 @@ body.iframed { .page { font-size: 9pt !important; line-height: 160% !important; - min-width: 800px !important; margin: 5px 0 0 0; padding: 0 0 12px; text-align: center; @@ -66,8 +65,12 @@ body.iframed { box-shadow: none; } +.snarknavbar, .page { + min-width: 900px !important; + +} + .snarknavbar { - min-width: 820px; margin: 0 0 -6px; padding: 14px 0; text-align: center; @@ -93,7 +96,7 @@ body.iframed { } tt, code { - font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; + font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; } .snarkRefresh:link:first-child { @@ -105,8 +108,7 @@ tt, code { margin-left: 3px; } -.snarkRefresh:link, -.snarkRefresh:visited { +.snarkRefresh:link, .snarkRefresh:visited { font-size: 9pt; font-weight: bold; margin: 0 -1px 0 0 !important; @@ -142,7 +144,7 @@ tt, code { .snarkRefresh:hover:nth-child(2), .snarkRefresh:focus:nth-child(2) { background: #04091f url(images/button_forum_hover.png) 9px center no-repeat; - background: url(images/button_forum_hover.png) 9px center no-repeat, linear-gradient(to bottom, #060e2f 0%, #060e2f 50%, #000 50%, #000 100%); + background: url(images/button_forum_hover.png) 9px center no-repeat, linear-gradient(to bottom, #004, #004 50%, #002 50%); } .snarkRefresh:first-child:active { @@ -199,7 +201,7 @@ tt, code { } .snarkMessages { - font: normal 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; + font: normal 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; overflow: auto; width: auto; height: 55px; @@ -244,12 +246,6 @@ tt, code { -webkit-filter: drop-shadow(0 0 1px #000); } -.snarkMessages p { - font-style: italic; - margin: 0; - text-align: right; -} - .snarkMessages img { float: right; margin: -3px -4px 4px 4px; @@ -278,7 +274,7 @@ tt, code { } pre { - font: 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; + font: 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; font-weight: bold !important; width: 100%; height: 8px; @@ -302,15 +298,10 @@ tr { opacity: 1; } -thead, -tfoot { +thead, tfoot { background: #001; } -thead a, -tfoot a { -} - thead { border-bottom: 1px solid #010011; } @@ -324,7 +315,7 @@ th { background: #001; } -thead th { +thead th, #torrentInfoControl td { background: linear-gradient(to bottom, #121225, #00000d) !important; } @@ -350,11 +341,7 @@ tfoot th { padding-bottom: 4px !important; } -tfoot img, -tfoot:nth-child(2) img, -tfoot:nth-child(1) img, -tfoot:nth-child(3) img, -tfoot:nth-child(4) img { +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; } @@ -364,7 +351,7 @@ tfoot tr:nth-child(n+1) { } .headerstatus { - text-align: center; + text-align: left; } .headerpriority { @@ -376,7 +363,7 @@ tfoot tr:nth-child(n+1) { font-size: 8pt; padding: 4px 0; text-align: left !important; - border: 1px solid #060055 !important; + border: 1px solid #1d1b3f !important; border-right: 0 !important; border-left: 0 !important; background: #001; @@ -385,6 +372,8 @@ tfoot tr:nth-child(n+1) { .ParentDir a { font-weight: bold !important; margin-left: -4px; + display: inline-block; + width: 100%; } .priority { @@ -446,15 +435,11 @@ tfoot tr:nth-child(n+1) { text-align: center; } -.snarkTorrents tfoot th, -.SnarkTorrents tfoot th tt { +.snarkTorrents tfoot th, .SnarkTorrents tfoot th tt { font-weight: bold; } .snarkTorrents tfoot th tt { - font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; - color: #652787; - background: none; margin-left: 2px; } @@ -471,9 +456,7 @@ tfoot tr:nth-child(n+1) { margin-left: 20px !important; } -.SnarkTorrents td:nth-child(6), -.SnarkTorrents td:nth-child(7), -.SnarkTorrents td:nth-child(8) { +.SnarkTorrents td:nth-child(6), .SnarkTorrents td:nth-child(7), .SnarkTorrents td:nth-child(8) { text-align: center !important; } @@ -506,16 +489,14 @@ tfoot tr:nth-child(n+1) { text-align: right !important; } -.SnarkTorrents td:nth-child(4) { +.snarkTorrents td:nth-child(4) { width: 16px !important; padding: 0 2px 0 0 !important; text-align: center !important; } - .snarkTorrents td[colspan="10"] { padding: 2px; - color: #7972d1 !important; } .snarkTorrents img { @@ -524,8 +505,15 @@ tfoot tr:nth-child(n+1) { } .snarkTorrents tt { + font-family: "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; font-size: 8pt; - color: #652787; + background: #2d103f; + color: #fff; + padding: 2px 3px; + border-radius: 2px; + display: inline-block; + margin: 1px 3px; + letter-spacing: 0.1em; } .snarkTorrentInfo img { @@ -585,8 +573,7 @@ tfoot tr:nth-child(n+1) { } .snarkTorrentInfo tr:last-child td { - padding: 8px 8px 12px !important; - padding: 5px 5px 9px !important; + padding: 10px 5px !important; text-align: right !important; } @@ -607,7 +594,7 @@ tfoot tr:nth-child(n+1) { .SnarkDirInfo { margin-top: 10px !important; - margin-bottom: -12px; + margin-bottom: -13px; border-bottom: 1px solid #443da0; } @@ -615,13 +602,13 @@ tfoot tr:nth-child(n+1) { margin: 0 !important; } + .snarkDirInfo th:nth-child(2) { - width: 32px; - text-align: right; + padding-right: 10px; } .snarkDirInfo td { - min-width: 0 !important; + padding: 5px; } .snarkDirInfo th:first-child { @@ -637,11 +624,17 @@ tfoot tr:nth-child(n+1) { padding-right: 6px; } +.snarkDirInfo tr:last-child td { + border-bottom: 1px solid #443da0 !important; +} + +/* .snarkDirInfo .ParentDir a, .snarkDirInfo .snarkFileName a, .snarkTorrents .snarkTorrentName a { display: inline-block; width: 100%; padding: 2px 0; } +*/ .snarkDirInfo .headerpriority { text-align: center !important; @@ -667,15 +660,16 @@ table.SnarkDirInfo img { margin: 0 !important; } +/* .snarkDirInfo .headerpriority { text-align: center !important; vertical-align: middle; } +*/ -td.subHeaderPriority, -td.priority { +td.subHeaderPriority, td.priority { width: 0; - min-width: 36px !important; + min-width: 160px !important; padding: 0 5px 0 0 !important; text-align: center !important; } @@ -697,12 +691,17 @@ td.subHeaderPriority { padding: 4px !important; } +/* .headerstatus { min-width: 250px; } td.priority:last-child { - min-width: 350px !important; +} +*/ + +.priority { + white-space: nowrap; } tr.priority:last-child { @@ -713,6 +712,16 @@ th.headerdownloaded { padding-left: 25px !important; } +#setPriority th { + text-align: right !important; + padding-top: 10px; + padding-bottom: 10px; +} + +#setPriority input:disabled[type="submit"] { + display: none; +} + .parentDir img { padding-left: 3px; mix-blend-mode: luminosity; @@ -720,8 +729,7 @@ th.headerdownloaded { td.snarkFileStatus { font-size: 8pt; - width: 80px; - text-align: center; + text-align: left; } td.snarkFileIcon { @@ -736,9 +744,8 @@ td.snarkFileStatusIcon { } td { - font-size: 8.5pt; + font-size: 9pt; padding: 1px; - opacity: 1; color: #c9ceff !important; } @@ -761,8 +768,7 @@ td:first-child { font-size: 8.5pt; } -.snarkTorrentName a, -.snarkDirInfo td.snarkFileName a { +.snarkTorrentName a, .snarkDirInfo td.snarkFileName a { font-weight: bold !important; } @@ -810,32 +816,30 @@ td.snarkTorrentAction { min-width: 48px; text-align: left !important; color: #9b96e0 !important; + white-space: nowrap; } -.snarkTorrents td:nth-child(2) { +.snarkTorrentStatus { padding-right: 3px !important; } -.snarkTorrentStatus, -.snarkTorrentRateUp, -.snarkTorrentRateDown, -.snarkTorrentDownloaded, -.snarkTorrentUploaded { +.snarkTorrentStatus b { + margin-right: 3px; +} + +.snarkTorrentStatus, .snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded { font-size: 8pt; line-height: 90%; padding: 0 3px; - word-spacing: -0.05em; } -.snarkTorrentRateUp, -.snarkTorrentRateDown, -.snarkTorrentDownloaded, -.snarkTorrentUploaded { +.snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded { text-align: center !important; } .snarkTorrentDownloaded { color: #c9ceff !important; + white-space: nowrap; } td.snarkTorrentDownloaded { @@ -873,13 +877,11 @@ td.snarkTorrentDownloaded { background: #000; } -.snarkTorrents tr:hover, -.snarkDirInfo tr:hover { +.snarkTorrents tr:hover, .snarkDirInfo tr:hover { background: #040033 !important; } -.snarkTorrents tr:hover td, -.snarkDirInfo tr:hover td { +.snarkTorrents tr:hover td, .snarkDirInfo tr:hover td { color: #c9ceff !important; } @@ -887,24 +889,30 @@ td.snarkTorrentDownloaded { mix-blend-mode: normal; } -.ParentDir a, .ParentDir a:visited, .ParentDir:hover a { +/* +.ParentDir a, .ParentDir a:visited { color: #7972d1 !important; } +*/ -.snarkTorrents tr:hover a, -.snarkDirInfo tr:hover a { +.snarkTorrents a { + display: inline-block; + width: 100%; +} + +/* +.snarkTorrents tr:hover a, .snarkDirInfo tr:hover a { color: #a099ff; } -.snarkTorrents a:hover, -td[onclick]:hover a, -.snarkDirInfo a:hover { +.snarkTorrents a:hover, td[onclick]:hover a, .snarkDirInfo a:hover { color: #652787 !important; } td[onclick]:hover { cursor: pointer !important; } +*/ .snarkTorrentEven { background: #010010; @@ -918,11 +926,8 @@ td[onclick]:hover { background: #010008; } -.snarkTorrentOdd, -.snarkTorrentOdd td, -.SnarkTorrentEven, -.SnarkTorrentEven td { - border-bottom: 1px solid #003 !important; +.snarkTorrentOdd, .snarkTorrentOdd td, .SnarkTorrentEven, .SnarkTorrentEven td { + border-bottom: 1px inset #1d1b3f !important; } .snarkTorrentOdd { @@ -937,8 +942,7 @@ td[onclick]:hover { background: #010008 !important; } -.snarkTorrentOdd td, -.snarkTorrentEven td { +.snarkTorrentOdd td, .snarkTorrentEven td { color: #c9ceff !important; border-top: none !important; } @@ -960,17 +964,17 @@ td[onclick]:hover { } .snarkFileStatus { - font-size: 9pt; font-style: italic; - min-width: 220px; - padding: 4px 5px 4px 15px; - text-align: center; text-align: left; + white-space: nowrap; } .snarkTorrentETA { font-style: italic; color: #7b74e0 !important; + padding-left: 3px !important; + padding-right: 3px !important; + text-align: center !important; } /* @@ -1020,11 +1024,11 @@ div.percentBarInner.percentBarComplete { */ .choked { - color: #1100f0 !important; + color: #900 !important; } .unchoked { - color: #1100f0 !important; + color: #090 !important; } .thumb { @@ -1043,19 +1047,23 @@ div.percentBarInner.percentBarComplete { } .snarkAddInfo { - font-size: 8.5pt; + font-size: 9pt; line-height: 130% !important; - margin-left: 10px; + background: url(images/infocircle.png) left center no-repeat; + background-size: 14px auto; + padding-left: 20px; + margin-top: 5px; + display: inline-block; } .snarkConfigTitle, label.toggleview { - font-size: 11pt; + font-size: 10pt; font-weight: bold; font-variant: small-caps !important; display: inline-block; min-width: 200px; margin: -1px 0 -5px 0; - padding: 2px 25px 3px 22px; + padding: 3px 25px 3px 22px; text-align: center !important; letter-spacing: .15em; border: 1px solid #443da0; @@ -1065,6 +1073,22 @@ div.percentBarInner.percentBarComplete { text-shadow: 0 0 1px #000; } +.snarkConfigtitle:hover, label.toggleview:hover { + background: #002 !important; + background: linear-gradient(to bottom, #004, #004 50%, #002 50%) !important; +} + +.snarkConfigtitle:active, label.toggleview:active { + background: #003 !important; + background: linear-gradient(to bottom, #004, #004 50%, #002 50%) !important; + box-shadow: inset 3px 3px 3px #000; +} + +.configsectionpanel .snarkConfigtitle:hover, .configsectionpanel .snarkConfigtitle:active { + background: linear-gradient(to bottom, #191729 0%, #201f33 7%, #1f1e32 9%, #161525 21%, #090812 49%, #05050e 50%, #020206 51%, #010103 53%, #000 56%, #000 100%) !important; + box-shadow: inset 0 0 0 1px #000 !important; +} + .snarkConfigTitle { margin-bottom: -7px; } @@ -1095,8 +1119,7 @@ div.percentBarInner.percentBarComplete { transition: ease transform 0.3s 0s; } -.snarkConfigTitle img, -label.toggleview img { +.snarkConfigTitle img, label.toggleview img { margin-right: -2px; margin-top: -1px; filter: drop-shadow(0 0 1px #000); @@ -1140,12 +1163,17 @@ hr.debug:nth-child(n+7) { margin: -10px 0 3px; } +hr.debug:last-child { + background: #000; + margin-bottom: -5px; +} + .configsectionpanel hr { margin-bottom: 10px; } a:link { - font-weight: normal; + font-weight: bold; text-decoration: none; word-wrap: break-word; color: #7972d1; @@ -1154,6 +1182,7 @@ a:link { a:visited { color: #362e9e; + color: #5D599F; } a:hover, a:focus { @@ -1161,7 +1190,7 @@ a:hover, a:focus { } a:active { - color: #2f000c; + color: #CF0039; } input { @@ -1199,16 +1228,16 @@ input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner { outline: none; } -input[type="submit"], input[type="reset"] { +input[type="submit"], input[type="reset"], a.control, a.controld, a.controld:hover, a.controld:focus, a.controld:active, +input:disabled[type="submit"], input:disabled:hover[type="submit"], input:disabled:active[type="submit"] { font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; min-width: 95px !important; - margin-top: 6px; - padding: 5px !important; + padding: 6px 8px !important; text-align: center; - color: #443da0; - border: 1px solid #3e3f8f; - border-bottom-color: #14144f; - border-right-color: #14144f; + color: #443da0 !important; + border: 1px solid #3e3f8f !important; + border-bottom-color: #14144f !important; + border-right-color: #14144f !important; background: #000; background: linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important; box-shadow: inset 0 0 0 1px #000; @@ -1216,6 +1245,18 @@ input[type="submit"], input[type="reset"] { -webkit-filter: drop-shadow(0 0 1px #000); } +a.control, a.controld, a.control:hover, a.controld:hover, a.control:focus, a.controld:focus { + display: inline-block; + padding: 2px 8px 1px 5px !important; + min-width: 0 !important; + margin: 0 5px 0 1px !important; +} + +a.control img, a.controld img { + margin: 0; + padding: 0; +} + /* @media screen and (-webkit-min-device-pixel-ratio:0) { input[type="submit"], @@ -1225,47 +1266,46 @@ input[type="reset"] { } */ -input[type="submit"]:hover, input[type="submit"]:focus, -input[type="reset"]:hover, input[type="reset"]:focus { - color: #652787; +input[type="submit"]:hover, input[type="submit"]:focus, input[type="reset"]:hover, input[type="reset"]:focus, a.control:hover, a.control:focus { + color: #652787 !important; border: 1px solid #652787 !important; background: #000 !important; box-shadow: 0 1px 1px 0 #c9ceff inset; } -input[type="submit"]:active, -input[type="reset"]:active { - color: #c9ceff; +input[type="submit"]:active, input[type="reset"]:active, a.control:active { + color: #c9ceff !important; border: 1px inset #652787; background: #652787 !important; box-shadow: inset 3px 3px 3px #000; } -input[type=submit]:disabled { +input:disabled { + cursor: not-allowed; +} + +a.controld { display: none; } -input[type=image], -thead img { +input[type=image], thead img { margin: 0 1px; padding: 0 !important; opacity: 1; mix-blend-mode: luminosity; } -input[type="image"], -a img { +input[type="image"], a img { filter: drop-shadow(0 0 1px #000); + -webkit-filter: drop-shadow(0 0 1px #000); } -input[type="image"]:hover, -a img:hover { +input[type="image"]:hover, a img:hover { filter: saturate(200%) drop-shadow(0 0 2px #652787) !important; + -webkit-filter: saturate(200%) drop-shadow(0 0 2px #652787) !important; } -input[type="checkbox"], -.optbox, -input[type="radio"] { +input[type="checkbox"], .optbox, input[type="radio"] { background: none; min-width: 16px !important; min-height: 16px !important; @@ -1278,10 +1318,16 @@ input[type="checkbox"]:focus, .optbox:focus, input[type="radio"]:focus { filter: invert(100%) sepia(100%) hue-rotate(200deg) saturate(200%) drop-shadow(0 0 2px #652787); } +/* .snarkTorrents th:last-child, .snarkTorrents td:last-child { white-space: nowrap; } +*/ + +.snarkTorrentAction { + white-space: nowrap; +} .snarkTorrents td:last-child { padding: 4px 2px !important; @@ -1323,8 +1369,7 @@ input[type="checkbox"]:focus, .optbox:focus, input[type="radio"]:focus { box-shadow: inset 3px 3px 2px #000; } -input[type=text]:hover, -input.r:hover { +input[type=text]:hover, input.r:hover { cursor: text; } @@ -1336,34 +1381,27 @@ input[type=text]:focus, textarea:focus, input.r:focus, textarea[name="i2cpOpts"] transition: ease all 0.3s 0s; } -textarea[name="i2cpOpts"], -input[name="nofilter_dataDir"] { - width: 500px; +textarea[name="i2cpOpts"], input[name="nofilter_dataDir"] { + min-width: 500px; + width: 70%; margin: 3px 0; padding: 4px !important; cursor: text; resize: none; overflow: hidden; + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "DejaVu Sans", "Segoe UI", Verdana, "Lucida Grande", "Lucida Grande", Helvetica, sans-serif; } -thead img, -thead img:hover { +thead img, thead img:hover { opacity: 0.8; max-height: 20px !important; } -input[type=image], -th a:link img, -th a:visited img { +input[type=image], th a:link img, th a:visited img { opacity: 1; } -input[type=image]:hover, -th a:hover img { -} - -input[type=text], -input.r { +input[type=text], input.r { min-width: 100px; padding: 4px !important; } @@ -1408,8 +1446,7 @@ select { -webkit-appearance: none; } -select:hover, -select:focus { +select:hover, select:focus { color: #652787 !important; border: 1px solid #652787; background: #000 !important; @@ -1432,12 +1469,14 @@ select:hover, select:focus, select:active { background: #000 url(images/dropdown_hover.png) right center no-repeat !important; } +/* select:nth-child(2) { margin-left: -16px; } +*/ textarea { - font: 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; + font: 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; font-weight: bold; padding: 1px 4px 0; color: #443da0; @@ -1529,8 +1568,7 @@ img.thumb { } .newtorrentsection td:first-child, -.addtorrentsection td:first-child, -.configsectionpanel td:first-child { +.addtorrentsection td:first-child { font-weight: bold; padding-right: 5px; padding-left: 5px; @@ -1588,25 +1626,26 @@ img.thumb { .configsectionpanel td:first-child { font-weight: bold; - padding-right: 10px !important; - padding-left: 5px !important; } .trackerconfig th { min-width: 50px; + padding: 7px 0; } .trackerconfig th:first-child { background: url(/themes/snark/ubergine/images/nuke.png) center right 8px no-repeat; } -.trackerconfig th:last-child, -.trackerconfig td:last-child { +.trackerconfig td { + padding: 8px !important; +} + +.trackerconfig th:last-child, .trackerconfig td:last-child { padding-left: 10px !important; } -.trackerconfig tr:nth-child(odd), -.snarkConfig tr:nth-child(odd) { +.trackerconfig tr:nth-child(odd), .snarkConfig tr:nth-child(odd) { background: #010009; } @@ -1616,6 +1655,20 @@ img.thumb { background: linear-gradient(to bottom, #010011, #000) repeat scroll 0 0 #000; } +table.trackerconfig td:first-child { + width: 70px !important; + padding: 5px 10px !important; +} + +.trackerconfig tr:nth-child(even), .snarkConfig tr:nth-child(even) { + background: #010011; +} + +.trackerconfig input { + margin: 3px 0 !important; + cursor: default; +} + .snarkTorrentNoneLoaded td { color: #c9ceff !important; padding: 10px; @@ -1640,21 +1693,6 @@ img.thumb { border: 1px solid #443da0; } -table.trackerconfig td:first-child { - width: 24px !important; - padding: 5px 2px; -} - -.trackerconfig tr:nth-child(even), -.snarkConfig tr:nth-child(even) { - background: #010011; -} - -.trackerconfig input { - margin: 3px 0 !important; - cursor: default; -} - .optbox[name="add_tracker_type"] { cursor: pointer; /* active cursor only for clickable radio icons */ } @@ -1665,15 +1703,22 @@ table.trackerconfig td:first-child { text-align: center; } -.trackerconfig td, -.snarkConfig td { - padding: 5px 1px !important; +#configs td { + padding: 5px 5px 5px 10px !important; +} + +#configs tr:nth-last-child(2) td { + padding: 10px 15px 0 !important; } .trackerconfig { text-align: left !important; } +.trackerconfig td { + padding: 3px 1px !important; +} + .snarkConfig table tr:first-child { border-top: 1px solid #443da0 !important; } @@ -1685,10 +1730,7 @@ table.trackerconfig td:first-child { text-align: center !important; } -.trackerconfig th, -.trackerconfig td, -.trackerconfig th:last-child, -.trackerconfig td:last-child { +.trackerconfig th, .trackerconfig td, .trackerconfig th:last-child, .trackerconfig td:last-child { text-align: left !important; } @@ -1710,16 +1752,38 @@ table.trackerconfig td:first-child { font-size: 9pt; } -.configsectionpanel td[colspan="2"]:last-child, -.configsectionpanel td[colspan="7"] { +.spacer { display: none; } -.configsectionpanel td[colspan="5"], -.configsectionpanel td[colspan="2"] { +.configsectionpanel td[colspan="5"] { border-top: 1px solid #443da0; } +#configs td:first-child { + min-width: 200px; + padding-left: 10px !important; +} + +#configs td:nth-child(2) { + white-space: nowrap; +} + +#configs tr:last-child { + display: none; +} + +#bwHelp { + width: 100%; + padding-left: 5px !important; +} + +#bwHelp a { + display: inline-block; + white-space: nowrap; + margin-left: 5px; +} + .snarkConfig tr:nth-last-child(2) { background: none; } @@ -1739,8 +1803,6 @@ table.trackerconfig td:first-child { border: none !important; } -.section, -.mainsection .section, .mainsection { margin: 0; padding: 0; @@ -1755,32 +1817,29 @@ table.trackerconfig td:first-child { box-shadow: inset 0 0 1px 0 #110f24; } -.newtorrentsection { - margin: 0 0 -1px 0; - padding: 0 10px 0 10px; +.newtorrentsection, .addtorrentsection, .configsection { + padding: 0 10px; + font-weight: bold; text-align: center; word-wrap: break-word; color: #c9ceff; border: 1px solid #443da0; + box-shadow: inset 0 0 0 2px #000, inset 0 0 5px 2px #002; + background-blend-mode: luminosity; +} + +.newtorrentsection { + margin: 0 0 -1px 0; background: #001 url(images/snark_create.png) no-repeat scroll right center; background: url(images/snark_create.png) no-repeat scroll right center, linear-gradient(to bottom, #001, #000009); background-size: 70px, 100% 100%; - background-blend-mode: luminosity; - box-shadow: inset 0 0 0 2px #000, inset 0 0 5px 2px #002; } .addtorrentsection { margin: 10px 0 -1px 0; - padding: 0 10px; - text-align: center; - word-wrap: break-word; - color: #c9ceff; - border: 1px solid #443da0; background: #001 url(images/snark_add.png) no-repeat scroll right center; background: url(images/snark_add.png) no-repeat scroll right center, linear-gradient(to bottom, #001, #000009); background-size: 64px, 100% 100%; - background-blend-mode: luminosity; - box-shadow: inset 0 0 0 2px #000, inset 0 0 5px 2px #002; } .iframed .addtorrentsection { @@ -1788,19 +1847,11 @@ table.trackerconfig td:first-child { } .configsection { - font-weight: bold; margin: 0 0 -1px; padding: 0 10px 15px 10px; - text-align: center; - word-wrap: break-word; - color: #c9ceff; - border: 1px solid #443da0; - background: #001; background: #001 url(images/configuration.png) no-repeat scroll 101% center; background: url(images/configuration.png) no-repeat scroll 101% center, linear-gradient(to bottom, #001, #000009); background-size: 64px, 100% 100%; - background-blend-mode: luminosity; - box-shadow: inset 0 0 0 2px #000, inset 0 0 5px 2px #002; } .configsectionpanel { @@ -1826,9 +1877,7 @@ form:last-child > .configsectionpanel { border-left: none; } -.newtorrentsection form, -.configsection form, -.addtorrentsection form { +.newtorrentsection form, .configsection form, .addtorrentsection form { color: #c9ceff !important; } @@ -1837,18 +1886,8 @@ form:last-child > .configsectionpanel { color: #c0bbff; } -.configsection a { - font-weight: bold; - text-shadow: 0 1px 1px #000; -} - -.configsection a:hover { - text-decoration: none; - color: #652787; -} - code { - font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; + font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; font-size: 8pt; font-weight: bold; padding: 0 2px; @@ -1932,6 +1971,210 @@ label.toggleview, color: #89f; } +.peerinfo td:first-child { + background: url(images/peer.png) center center no-repeat; + background-size: 14px 14px; +} + +.peerinfo td, .debuginfo td { + padding-top: 5px; + padding-bottom: 5px; +} + +/* debug */ + +.debuginfo td:first-child { + background: url(images/debuginfo.png) center center no-repeat; + background-size: 14px 14px; + background-blend-mode: luminosity; +} + +#resourceNotFound th, #resourceNotFound td { + padding: 10px 5px; +} + +.debuginfo b { + text-transform: capitalize; +} + +.debugConnection { + line-height: 130%; + font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace; + color: #090 !important; + padding: 0 5px; +} + +.from, .to { + font-family: sans-serif; + font-size: 12pt; + font-weight: bold; + vertical-align: middle; + line-height: 50%; + text-shadow: 0 0 1px #000; +} + +.debugConnStat { + margin-right: 3px; + white-space: nowrap; +} + +.debugConnStat, .debugRequests { + font-family: "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace; + color: #ee0; + color: #995FBF; +} + +.debugConnStat b { + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; + color: #c9ceff; +} + +/* end debug */ + +/* Resource Errors */ + +.resourceError { + margin-bottom: 0; + border: none; +} + +.resourceError th { + background: url(/themes/console/images/info/errortriangle.png) left 10px center no-repeat, linear-gradient(to bottom, #003, #010011); + background-size: 24px auto, 100% 100%; + padding: 10px 10px 10px 40px; + font-size: 10pt !important; + border: none; + border-bottom: 1px solid #443da0; +} + +.resourceError td { + padding: 10px; + border: none; + font-size: 10pt; +} + +.resourceError tr:nth-child(odd) { + background: #010011; +} + +.resourceError tr:nth-child(even) { + background: #000; +} + +#DoesNotExist { + margin-top: 10px; + border: none; +} + +#DoesNotExist th { + border-top: 1px solid #443da0; +} + +#NotFound { + border-bottom: 1px solid #443da0; +} + +/* end Resource Errors */ + +#totals { + display: inline-block; + margin: 2px 0 2px 5px; + font-weight: bold; +} + +/* configs */ + +#configs td:nth-child(2) { + white-space: nowrap; +} + +#configs td:first-child { + min-width: 220px !important; +} + +td#bwHelp { + background: url(images/infocircle.png) left 12px center no-repeat; + background-size: 14px auto; + padding-left: 26px !important; + width: 90%; + line-height: 100%; +} + +td#bwHelp a { + display: inline-block; + white-space: nowrap; + margin-left: 4px; +} + +/* end configs */ + +/* torrent priorities */ + +.priority input[type="radio"] { + text-align: left; + margin: 0; +} + +.priorityHigh, .priorityNormal, .prioritySkip { + padding: 0; + display: inline-block; + width: 50px; + font-size: 0; + text-align: left; + color: transparent; + overflow: hidden; +} + +.priorityHigh { + background: url(/i2psnark/.resources/icons/clock_red.png) left 20px center no-repeat; +} + +.priorityNormal { + background: url(/i2psnark/.resources/icons/clock.png) left 20px center no-repeat; +} + +.prioritySkip { + background: url(/i2psnark/.resources/icons/cancel.png) left 18px center no-repeat; +} + +#setPriority a.control img { + mix-blend-mode: normal; +} + +/* end priorities */ + +#torrentInfoStats td { + text-align: left !important; + padding-left: 2px !important; +} + +#torrentInfoStats img { + margin: 1px 3px 2px 5px !important; +} + +#torrentInfoStats span { + white-space: nowrap; + display: inline-block; +} + +.knownTracker input[type="radio"], .knownTracker input[type="radio"]:hover { + opacity: 0.5; + cursor: not-allowed; + -webkit-filter: invert(100%) sepia(100%) hue-rotate(200deg) saturate(200%) !important; + filter: invert(100%) sepia(100%) hue-rotate(200deg) saturate(200%) !important; +} + +#filecheck { + display: inline-block; + margin: 5px 0; + background: url(images/progressbar.gif) left center no-repeat; + padding-left: 22px; +} + +#filecheck a { + margin: 8px; +} + /* MS Edge 14+ fix */ _:-ms-lang(x), * { filter: none !important; @@ -1940,12 +2183,67 @@ _:-ms-lang(x), * { /* responsive layout */ -@media screen and (min-width: 1400px) { -code, textarea, .snarkMessages li, input, tt { +@media screen and (max-width: 950px) { +.snarkTorrents td:nth-child(2) { + white-space: nowrap; +} +.snarkTorrents td[colspan="10"] { + white-space: normal; +} + +.snarkTorrentStatus b { + display: none; +} + +b.alwaysShow { + display: inline; +} + +.snarkTorrents td:first-child img { + max-height: 16px; +} + +.snarkTorrents td:nth-child(2) { + font-weight: bold; +} +} + +/* +@media screen and (max-width: 1100px) { +.snarkTorrents td:nth-child(6), .snarkTorrents td:nth-child(8), .snarktorrents td:nth-child(10), +.peerinfo td:nth-child(3), .peerinfo td:nth-child(5), .peerinfo td:nth-child(7) { + border-left: 1px inset #1d1b3f; + border-right: 1px inset #1d1b3f; +} +} +*/ + +@media screen and (max-width: 1200px) { +.dirInfoComplete { + display: none; +} +} + +@media screen and (min-width: 1200px) { +a, th, thead th, tfoot th, td, select, select option, .snarkAddInfo, .snarkFileName, code, textarea, input[name="nofilter_dataDir"] { font-size: 9pt !important; } -thead th, tfoot th, td, select, select option, .snarkAddInfo, .snarkFileName { +.snarkConfigTitle, .snarkConfigTitle a, label.toggleview, .snarkRefresh:link { + font-size: 11pt !important; +} + +.percentDownloaded { + pointer-events: none; /* hide tooltip */ +} +} + +@media screen and (min-width: 1400px) { +code, textarea, .snarkMessages li, .snarkMessages a, input, tt { + font-size: 9pt !important; +} + +a, th, thead th, tfoot th, td, select, select option, .snarkAddInfo, .snarkFileName, code, textarea, input[name="nofilter_dataDir"], input, code { font-size: 10pt !important; } @@ -1958,24 +2256,88 @@ thead th, tfoot th, td, select, select option, .snarkAddInfo, .snarkFileName { } .snarkConfigTitle, .toggleview { - font-size: 12.5pt !important; - padding: 4px 25px 5px 22px; + padding: 4px 25px 4px 22px; } -.snarkConfigTitle { - padding: 2px 25px 3px 22px +.snarkConfigTitle, .snarkConfigTitle a, .toggleview { + font-size: 12.5pt !important; +} + +.configsectionpanel .snarkConfigTitle, .toggleview { + padding-bottom: 5px !important; +} + +.snarkConfigTitle, label.toggleview { + min-width: 240px !important; } .snarkMessages { height: 54px; } +/* select:nth-child(2) { margin-left: -14px !important; } +*/ + +.snarkTorrents td:nth-child(3), .SnarkTorrents td:nth-child(4) { + text-align: center !important; + width: 24px !important; +} .snarkTorrentDownloaded { white-space: nowrap; + padding: 0 10px !important; +} + +.snarkFileStatus { + white-space: nowrap; +} + +.snarkTorrents td { + padding-top: 4px; + padding-bottom: 4px; +} + +.page { + padding: 10px; + background: #003; + background: linear-gradient(to right, #004, #002, #004); + background: linear-gradient(to right, #002, #004, #002); + box-shadow: inset 0 0 0 1px #000; +} + +.newtorrentsection, .addtorrentsection, .configsection, .configsectionpanel, .snarkMessages, .snarkTorrents, .snarkDirInfo, .snarkTorrentInfo { + border: 1px solid #443da0; +} + +.snarkDirInfo { + margin-bottom: 0; +} + +.snarkMessages { + margin-bottom: -10px; +} + +.snarkMessages + form { + margin-top: 9px; +} + +.logshim { + margin-top: -9px !important; +} + +.snarkTorrents { + margin-top: 0 !important; +} + +.mainsection { + background: none; +} + +#pagenav img { + height: 16px; } } diff --git a/installer/resources/themes/snark/ubergine/images/debuginfo.png b/installer/resources/themes/snark/ubergine/images/debuginfo.png new file mode 100644 index 000000000..42c7cd6ab Binary files /dev/null and b/installer/resources/themes/snark/ubergine/images/debuginfo.png differ diff --git a/installer/resources/themes/snark/ubergine/images/infocircle.png b/installer/resources/themes/snark/ubergine/images/infocircle.png new file mode 100644 index 000000000..24b92176f Binary files /dev/null and b/installer/resources/themes/snark/ubergine/images/infocircle.png differ diff --git a/installer/resources/themes/snark/ubergine/images/peer.png b/installer/resources/themes/snark/ubergine/images/peer.png new file mode 100644 index 000000000..4f3408dc6 Binary files /dev/null and b/installer/resources/themes/snark/ubergine/images/peer.png differ diff --git a/installer/resources/themes/snark/ubergine/images/progressbar.gif b/installer/resources/themes/snark/ubergine/images/progressbar.gif new file mode 100644 index 000000000..e204f6b31 Binary files /dev/null and b/installer/resources/themes/snark/ubergine/images/progressbar.gif differ diff --git a/installer/resources/themes/snark/ubergine/snark.css b/installer/resources/themes/snark/ubergine/snark.css index c3852eee5..d394b47dd 100644 --- a/installer/resources/themes/snark/ubergine/snark.css +++ b/installer/resources/themes/snark/ubergine/snark.css @@ -7,8 +7,8 @@ html { } body { - background: #101 url(images/graytile.png); - background: linear-gradient(to bottom, rgba(64,0,64,0.2), rgba(11,0,11,0.1), rgba(11,0,11,0.2)), url(images/graytile.png) #26092f; + background: #130313 url(images/graytile.png); + background: linear-gradient(to bottom, rgba(64,0,64,0.2), rgba(11,0,11,0.1), rgba(11,0,11,0.2)), url(images/graytile.png) #130313; background-size: 100% 100%, 96px 96px; color: #fff; font: 8pt "Bitstream Vera Sans", Verdana, "Noto Sans", Ubuntu, Helvetica, sans-serif; @@ -23,7 +23,7 @@ body.iframed { background: #323 url(images/tile2.png); 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); color: #310; - min-width: 900px !important; + min-width: 980px !important; margin: 5px 0 0 0; padding: 10px 10px 0 10px; border-radius: 4px; @@ -84,7 +84,7 @@ body.iframed { margin-bottom: -6px !important; width: auto; border-radius: 0; - box-shadow: inset 0 0 1px 0 #ffeffd; + box-shadow: inset 0 0 1px 0 #7f2f7f; } .snarkRefresh:link,.snarkRefresh:visited { @@ -106,8 +106,8 @@ body.iframed { border: 1px solid #730; } -.snarkRefresh:hover, .snarkRefresh:focus { - color: #d2baff; +.snarkRefresh:hover, .snarkRefresh:visited:hover .snarkRefresh:focus, .snarkRefresh:visited:focus { + color: #d2baff !important; background: #310 url(images/snarknav_lowlight.png) repeat-x scroll center center; background: linear-gradient(to bottom, #a15b73 0%, #7e4062 50%, #591c3e 50%, #46133e 100%); border: 1px solid #820b64; @@ -133,10 +133,10 @@ body.iframed { -webkit-filter: sepia(100%) invert(100%) hue-rotate(125deg) !important; } -.snarkRefresh:active { +.snarkRefresh:active, .snarkRefresh:visited:active { background: #f60; - color: #fff; - text-shadow: 0 0 1px #000; + color: #fff !important; + text-shadow: none; border: 1px solid #f90; box-shadow: 0 0 1px 0 #000, inset 1px 1px 3px 1px #310; } @@ -163,7 +163,7 @@ body.iframed { } .snarkMessages { - font: bold 8pt "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, mono !important; + font: bold 8pt "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace !important; text-align: left; margin: 0 0 10px 0; padding: 3px 5px; @@ -171,7 +171,7 @@ body.iframed { border-radius: 4px; border: 1px solid #101; overflow: auto; - color: #26f; + color: #2C6AEF; height: 50px; width: auto; width: calc(100% - 12px); @@ -250,7 +250,7 @@ body.iframed { pre { width: 100%; - font: 7.5pt "Lucida Console","DejaVu Sans Mono",Courier, mono !important; + font: 7.5pt "Lucida Console","DejaVu Sans Mono",Courier, monospace !important; padding: 0; text-align: left !important; height: 8px; @@ -350,7 +350,7 @@ tfoot tr:nth-child(n+1) { } .snarkDirInfo input[type="submit"], .snarkDirInfo a.control { - margin: 2px !important; + margin: 2px 3px !important; } .snarkDirInfo input.disabled, .snarkDirInfo a.controld { @@ -358,10 +358,16 @@ tfoot tr:nth-child(n+1) { } .priority { - font-size: 7pt; + font-size: 8pt; vertical-align: middle; text-align: right !important; - padding-right: 20px; + padding-right: 15px; + white-space: nowrap; +} + +.script { + display: inline-block; + vertical-align: top; } .snarkTorrents { @@ -410,12 +416,12 @@ tfoot tr:nth-child(n+1) { .snarkTorrents tfoot th { padding: 5px 2px; - border-bottom: #101; font-weight: normal; } .snarkTorrents tfoot th::first-line { font-weight: bold; + vertical-align: middle; } .snarkTorrents tfoot th:nth-child(even) { @@ -440,7 +446,7 @@ tfoot tr:nth-child(n+1) { } .snarkTorrents tfoot tt { - margin-left: -4px; + margin-left: -2px; } .snarkTorrents td:nth-child(3), .SnarkTorrents td:nth-child(4) { @@ -457,10 +463,10 @@ tfoot tr:nth-child(n+1) { } .snarkTorrents tt { - font-family: "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, mono; + font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace; color: #cc0; - margin-left: 2px; font-weight: bold; + margin-right: 2px; } td { @@ -486,7 +492,7 @@ td:first-child { .snarkTorrentName { line-height: 110%; padding: 2px 1px 2px 0; - min-width: 370px; +/* min-width: 370px;*/ } .snarkTorrentName img { @@ -524,11 +530,14 @@ _:-ms-lang(x), .snarkTorrentAction { .snarkTorrents th:last-child input[type="image"] { padding: 0; - margin: 0; max-width: 32px; +/* clip-path: inset(1px 1px 1px 1px round 2px, 2px);*/ + background: #40003f; + border-radius: 2px; + border: 1px solid #202; } -.snarkTorrents th:last-child br { /* prevent button wrapping */ +.snarkTorrents thead th:last-child br { /* prevent button wrapping */ display: none; } @@ -549,6 +558,7 @@ _:-ms-lang(x), .snarkTorrentAction { font-weight: bold; text-align: center !important; color: #bbb !important; + border-radius: 0 0 2px 2px; } .snarkTorrentStatus { @@ -570,12 +580,19 @@ a img[src$="details.png"]:hover, a:focus img[src$="details.png"] { mix-blend-mode: initial !important; } -.snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded, .snarkFileSize { - font-size: 7.5pt; +.snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded, .snarkFileSize, .snarkTorrentStatus, .snarkFileName { + font-size: 8pt; font-weight: bold; padding: 0 3px; line-height: 100%; - word-spacing: -0.4em; +} + +.snarkTorrentStatus { + font-weight: normal; +} + +.snarkTorrents td:nth-child(2) { + padding-left: 0; } .snarkTorrentDownloaded { @@ -598,11 +615,11 @@ a img[src$="details.png"]:hover, a:focus img[src$="details.png"] { .snarkTorrentOdd { background: #351933; - font-size: 7.5pt; + font-size: 8pt; } .snarkTorrentEven { - font-size: 7.5pt; + font-size: 8pt; background: #270027; } @@ -634,12 +651,7 @@ a img[src$="details.png"]:hover, a:focus img[src$="details.png"] { .snarkTorrentEven + .snarkTorrentEven td:nth-child(2), .snarkTorrentOdd + .snarkTorrentOdd td:nth-child(2) { text-align: left; padding-left: 0; - color: #b9b !important; -} - -.snarkTorrentEven + .snarkTorrentEven td:nth-child(2) tt, .snarkTorrentOdd + .snarkTorrentOdd td:nth-child(2) tt { - margin-left: -10px; - color: #cc0; + color: #ffdfff !important; } .snarkTorrentEven + .snarkTorrentEven td:nth-child(4), .snarkTorrentOdd + .snarkTorrentOdd td:nth-child(4) { @@ -682,7 +694,7 @@ table.snarkTorrents tbody tr:hover .snarkTorrentName, table.snarkDirInfo tbody t } .snarkFileName { - padding: 4px 0 !important; + padding: 4px 0 0 2px !important; text-align: left !important; font-size: 8pt !important; white-space: nowrap; @@ -697,7 +709,7 @@ table.snarkTorrents tbody tr:hover .snarkTorrentName, table.snarkDirInfo tbody t .snarkFileStatus { padding: 2px 5px 2px 15px; font-style: italic; - font-size: 7.5pt; + font-size: 8pt; text-align: left !important; white-space: nowrap; max-width: 250px; @@ -717,6 +729,7 @@ table.snarkTorrents tbody tr:hover .snarkTorrentName, table.snarkDirInfo tbody t font-weight: bold; font-style: italic; color: #dd7 !important; + line-height: 120%; } .snarkTorrentInfo img { @@ -735,7 +748,7 @@ table.snarkTorrents tbody tr:hover .snarkTorrentName, table.snarkDirInfo tbody t } .snarkTorrentInfo th:first-child:not(old) { - background: url(images/file.png) 7px center no-repeat; + background: url(images/file.png) 6px center no-repeat; background-size: 14px 16px; } @@ -757,24 +770,44 @@ table.snarkTorrents tbody tr:hover .snarkTorrentName, table.snarkDirInfo tbody t background: #351933; } +/* .snarkTorrentInfo tr:last-child td { padding: 8px 3px !important; text-align: right !important; border-top: 1px solid #101; } +*/ +#torrentInfoControl td { + text-align: right !important; + border-top: 1px solid #101; +} + +#torrentInfoControl, #setPriority { + box-shadow: inset 0 0 0 1px #303; +} + +#torrentInfoControl td, #setPriority th { + background: linear-gradient(to bottom, #202, #101); + padding: 8px 5px !important; +} + +/* .snarkTorrentInfo tr:last-child td b { float: left; } .snarkTorrentInfo tr:last-child input { - margin: 0 2px ; + margin: 0 3px 0 2px ; } +*/ table.SnarkTorrentInfo, table.snarkDirInfo { margin: 0 !important; border: 1px solid #101; background: #270027; + filter: drop-shadow(0 0 1px rgba(16, 8, 16, 0.7)) !important; + -webkit-filter: drop-shadow(0 0 1px rgba(16, 8, 16, 0.7)) !important; } table.snarkDirInfo { @@ -805,6 +838,7 @@ _:-ms-lang(x), .snarkDirInfo img, .snarkTorrents img { .snarkDirInfo .snarkFileStatus img { mix-blend-mode: luminosity; opacity: 1; + vertical-align: top; } .snarkDirInfo .ParentDir a, .snarkDirInfo .snarkFileName a, .snarkTorrents .snarkTorrentName a { @@ -815,6 +849,9 @@ _:-ms-lang(x), .snarkDirInfo img, .snarkTorrents img { .snarkDirInfo .headerpriority { text-align: right !important; +} + +#setPriority > * { vertical-align: middle; } @@ -822,6 +859,17 @@ _:-ms-lang(x), .snarkDirInfo img, .snarkTorrents img { margin-left: -110px !important; } +.snarkDirInfo tr:nth-last-child(1) td { + border-bottom: 1px solid #000 !important; +} + +/* +#setPriority th { + padding-top: 12px !important; + padding-bottom: 10px !important; +} +*/ + .snarkFileicon:hover + .snarkFileName a { color: #f90; } @@ -878,20 +926,26 @@ table#trackerselect { .snarkAddInfo { font-size: 8pt; - line-height: 130% !important; + line-height: 100% !important; white-space: normal; + background: url(images/infocircle.png) left center no-repeat; + background-size: 12px auto; + padding-left: 16px; + display: inline-block; + margin-top: 5px; } +/* .snarkAddInfo::before { content: "\1F6C8\0020"; font-size: 12pt; } +*/ .snarkAddInfo code { background: #101; border-radius: 2px; color: #fbf; - margin-left: 3px; padding: 2px 4px; box-shadow: inset 0 0 0 1px #212; } @@ -916,7 +970,7 @@ table#trackerselect { box-shadow: inset 0 0 1px 0 #313; display: inline-block; margin: 0 0 -3px !important; - min-width: 200px; + min-width: 210px; } .snarkConfigTitle:hover, label.toggleview:hover { @@ -968,7 +1022,7 @@ hr.debug:nth-child(n+7) { } hr.debug:last-child { - background: #101; + background: #303; margin-bottom: -4px; } @@ -981,27 +1035,30 @@ a:link { } a:visited { - color: #f50; + color: #f40; text-decoration: none; } -a:hover, a:focus { +a:hover, a:visited:hover, a:focus, a:visited:focus { color: #f90; } -a:active { - color: #f30; +a:active, a:visited:active { + color: #f10; } a.control, a.controld, a.control:active { + display: inline-block; + vertical-align: middle; background: #989; background: linear-gradient(to bottom, #989 0%, #878 100%); + background-size: 100% 100% !important; border: 1px inset #bbb; border-radius: 2px; + box-shadow: 0 0 1px 1px rgba(48,16,48,0.7); color: #1c081e; font-weight: bold; - margin: 5px 2px !important; - padding: 4px 6px 4px 4px; + padding: 4px 6px 3px 6px; text-shadow: 0 0 #410; white-space: nowrap; filter: drop-shadow(0 0 1px #313) !important; @@ -1014,8 +1071,9 @@ a.controld { } a.control img { - margin: -2px 0 0 -4px !important; + margin: -2px 2px 0 -4px !important; padding: 0; + height: 14px; } a.control:hover img, a.control:focus img { @@ -1030,8 +1088,9 @@ a.controld img { display: none; } -a.control, input[type="submit"], input[type="reset"] { +input[type="submit"], input[type="reset"] { background-size: 14px 14px, 100% 100% !important; + box-shadow: 0 0 1px 1px rgba(48,16,48,0.7); } a.control:active, input[type="submit"]:active, input[type="reset"]:active { @@ -1040,8 +1099,8 @@ a.control:active, input[type="submit"]:active, input[type="reset"]:active { box-shadow: inset 3px 3px 3px #fff; } -.snarkDirInfo tr:last-child { - border-top: 1px solid transparent; +#setPriority { + border-top: 1px solid #000; } th.headerpriority { @@ -1068,7 +1127,7 @@ input { font-size: 8.5pt; font-weight: bold; text-align: left; - padding: 3px 4px !important; + padding: 3px 3px !important; border-radius: 2px; border: 1px solid #101; background: #212 url(images/graytile.png); @@ -1088,11 +1147,8 @@ input[type=submit] { background: linear-gradient(to bottom, #989 0%, #878 100%); border: 1px inset #bbb; padding: 4px 2px !important; - filter: drop-shadow(0 0 1px #313); - -webkit-filter: drop-shadow(0 0 1px #313); } - input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner { border: none; outline: none; @@ -1176,6 +1232,7 @@ input[type="submit"]:disabled:active, a.control:disabled:active { #pagenav { letter-spacing: 0.1em; + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif !important; } #pagenav img:not(old) { @@ -1220,7 +1277,7 @@ input[type="submit"]:disabled:active, a.control:disabled:active { input[type="text"], input.r, input[name="nofilter_dataDir"] { padding: 4px !important; - font-family: "Bitstream Vera Sans", Verdana, Helvetica, sans-serif; +/* font-family: "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;*/ box-shadow: inset 1px 1px 2px 1px #101; letter-spacing: 0.03em; background: url(images/graytile.png) #212; @@ -1269,11 +1326,21 @@ input[name="upBW"] + i { margin-left: 3px; } +/* input[name="upBW"] + i::before { content: "\1F6C8\0020"; font-size: 12pt; font-style: normal; } +*/ +/* +input[name="upBW"] + i { + background: url(images/infocircle.png) left center no-repeat; + background-size: 12px auto; + padding-left: 16px; + margin-left: 10px; +} +*/ input.default { width: 1px; @@ -1289,114 +1356,121 @@ input.disabled, input.disabled:hover, input.disabled:active, a.control.disabled: } input.accept, input.accept:active { - background: #989 url(images/accept.png) no-repeat 4px center; - background: url(images/accept.png) no-repeat 4px center, linear-gradient(to bottom, #989 0%, #878 100%); - padding: 4px 3px 4px 18px !important; + background: #989 url(images/accept.png) no-repeat 6px center; + background: url(images/accept.png) no-repeat 6px center, linear-gradient(to bottom, #989 0%, #878 100%); + padding: 4px 6px 4px 22px !important; } input.accept:hover, input.accept:focus { - background: #767 url(images/accept.png) no-repeat 4px center; - background: url(images/accept.png) no-repeat 4px center, linear-gradient(to bottom, #767 0%, #989 100%); + background: #767 url(images/accept.png) no-repeat 6px center; + background: url(images/accept.png) no-repeat 6px center, linear-gradient(to bottom, #767 0%, #989 100%); } input.add, input.add:active { - background: #989 url(images/add.png) no-repeat 4px center; - background: url(images/add.png) no-repeat 4px center, linear-gradient(to bottom, #989 0%, #878 100%); - padding: 4px 3px 4px 18px !important; + background: #989 url(images/add.png) no-repeat 6px center; + background: url(images/add.png) no-repeat 6px center, linear-gradient(to bottom, #989 0%, #878 100%); + padding: 4px 6px 4px 22px !important; } input.add:hover, input.add:focus { - background: #767 url(images/add.png) no-repeat 4px center; - background: url(images/add.png) no-repeat 4px center, linear-gradient(to bottom, #767 0%, #989 100%); + background: #767 url(images/add.png) no-repeat 6px center; + background: url(images/add.png) no-repeat 6px center, linear-gradient(to bottom, #767 0%, #989 100%); } input.cancel, input.cancel:active { - background: #989 url(images/cancel.png) no-repeat 4px center; - background: url(images/cancel.png) no-repeat 4px center, linear-gradient(to bottom, #989 0%, #878 100%); - padding: 4px 3px 4px 18px !important; + background: #989 url(images/cancel.png) no-repeat 6px center; + background: url(images/cancel.png) no-repeat 6px center, linear-gradient(to bottom, #989 0%, #878 100%); + padding: 4px 6px 4px 22px !important; } input.cancel:hover, input.cancel:focus { - background: #767 url(images/cancel.png) no-repeat 4px center; - background: url(images/cancel.png) no-repeat 4px center, linear-gradient(to bottom, #767 0%, #989 100%); + background: #767 url(images/cancel.png) no-repeat 6px center; + background: url(images/cancel.png) no-repeat 6px center, linear-gradient(to bottom, #767 0%, #989 100%); } input.create, input.create:active { - background: #989 url(images/create.png) no-repeat 4px center; - background: url(images/create.png) no-repeat 4px center, linear-gradient(to bottom, #989 0%, #878 100%); - padding: 4px 3px 4px 18px !important; + background: #989 url(images/create.png) no-repeat 6px center; + background: url(images/create.png) no-repeat 6px center, linear-gradient(to bottom, #989 0%, #878 100%); + padding: 4px 6px 4px 22px !important; } input.create:hover, input.create:focus { - background: #767 url(images/create.png) no-repeat 4px center; - background: url(images/create.png) no-repeat 4px center, linear-gradient(to bottom, #767 0%, #989 100%); + background: #767 url(images/create.png) no-repeat 6px center; + background: url(images/create.png) no-repeat 6px center, linear-gradient(to bottom, #767 0%, #989 100%); } input.delete, input.delete:active { - background: #989 url(images/nuke.png) no-repeat 4px center; - background: url(images/nuke.png) no-repeat 4px center, linear-gradient(to bottom, #989 0%, #878 100%); - padding: 4px 3px 4px 18px !important; + background: #989 url(images/nuke.png) no-repeat 6px center; + background: url(images/nuke.png) no-repeat 6px center, linear-gradient(to bottom, #989 0%, #878 100%); + padding: 4px 6px 4px 22px !important; } input.delete:hover, input.delete:focus { - background: #767 url(images/nuke.png) no-repeat 4px center; - background: url(images/nuke.png) no-repeat 4px center, linear-gradient(to bottom, #767 0%, #989 100%); + background: #767 url(images/nuke.png) no-repeat 6px center; + background: url(images/nuke.png) no-repeat 6px center, linear-gradient(to bottom, #767 0%, #989 100%); } input.reload, input.reload:active { - background: #989 url(images/restore.png) no-repeat 4px center; - background: url(images/restore.png) no-repeat 4px center, linear-gradient(to bottom, #989 0%, #878 100%); - padding: 4px 3px 4px 18px !important; + background: #989 url(images/restore.png) no-repeat 6px center; + background: url(images/restore.png) no-repeat 6px center, linear-gradient(to bottom, #989 0%, #878 100%); + padding: 4px 6px 4px 22px !important; } input.reload:hover, input.reload:focus { - background: #767 url(images/restore.png) no-repeat 4px center; - background: url(images/restore.png) no-repeat 4px center, linear-gradient(to bottom, #767 0%, #989 100%); + background: #767 url(images/restore.png) no-repeat 6px center; + background: url(images/restore.png) no-repeat 6px center, linear-gradient(to bottom, #767 0%, #989 100%); } -input.reload[name="recheck"], input.reload[name="recheck"]:active { - background: #989 url(images/recheck.png) no-repeat 4px center; - background: url(images/recheck.png) no-repeat 4px center, linear-gradient(to bottom, #989 0%, #878 100%); - padding: 4px 3px 4px 18px !important; +input.reload[name="recheck"], input.reload[name="recheck"]:active, input.disabled[name="recheck"] { + background: #989 url(images/recheck.png) no-repeat 6px center; + background: url(images/recheck.png) no-repeat 6px center, linear-gradient(to bottom, #989 0%, #878 100%); + padding: 4px 6px 4px 22px !important; + margin-left: 2px !important +} + +input.disabled[name="recheck"]:hover { + background-blend-mode: initial; } input.reload[name="recheck"]:hover, input.reload[name="recheck"]:focus { - background: #767 url(images/recheck.png) no-repeat 4px center; - background: url(images/recheck.png) no-repeat 4px center, linear-gradient(to bottom, #767 0%, #989 100%); + background: #767 url(images/recheck.png) no-repeat 6px center; + background: url(images/recheck.png) no-repeat 6px center, linear-gradient(to bottom, #767 0%, #989 100%); } input.starttorrent, input.starttorrent:active { - background: #989 url(images/next.png) no-repeat 4px center; - background: url(images/next.png) no-repeat 4px center, linear-gradient(to bottom, #989 0%, #878 100%); - padding: 4px 3px 4px 18px !important; + background: #989 url(images/next.png) no-repeat 6px center; + background: url(images/next.png) no-repeat 6px center, linear-gradient(to bottom, #989 0%, #878 100%); + padding: 4px 6px 4px 20px !important; } input.starttorrent:hover, input.starttorrent:focus { - background: #767 url(images/next.png) no-repeat 4px center; - background: url(images/next.png) no-repeat 4px center, linear-gradient(to bottom, #767 0%, #989 100%); + background: #767 url(images/next.png) no-repeat 6px center; + background: url(images/next.png) no-repeat 6px center, linear-gradient(to bottom, #767 0%, #989 100%); } input.stoptorrent, input.stoptorrent:active { - background: #989 url(images/btn_stop.png) no-repeat 4px center; - background: url(images/btn_stop.png) no-repeat 4px center, linear-gradient(to bottom, #989 0%, #878 100%); - padding: 4px 3px 4px 18px !important; + background: #989 url(images/btn_stop.png) no-repeat 6px center; + background: url(images/btn_stop.png) no-repeat 6px center, linear-gradient(to bottom, #989 0%, #878 100%); + padding: 4px 6px 4px 22px !important; } input.stoptorrent:hover, input.stoptorrent:focus { - background: #767 url(images/btn_stop.png) no-repeat 4px center; - background: url(images/btn_stop.png) no-repeat 4px center, linear-gradient(to bottom, #767 0%, #989 100%); + background: #767 url(images/btn_stop.png) no-repeat 6px center; + background: url(images/btn_stop.png) no-repeat 6px center, linear-gradient(to bottom, #767 0%, #989 100%); } +/* @media screen and (-webkit-min-device-pixel-ratio:0) { input[type="submit"], input[type="reset"], a.control { padding-left: 21px !important; } } +*/ .configsectionpanel tr:nth-last-child(2) td { text-align: right !important; border-top: 1px solid #101; - padding-top: 10px; + padding-top: 10px !important; } select { @@ -1424,34 +1498,34 @@ select:hover, select:focus, select:active { box-shadow: none; background-blend-mode: luminosity; } - +/* select + select { - margin-left: -18px !important; + margin-left: -12px !important; } - +*/ select option { background: #f50; color: #fff; font-size: 8.5pt; font-weight: bold; box-shadow: inset 0 0 20px 20px #f50; - padding: 1px 2px 1px 1px; + padding: 2px 2px 2px 1px; } select option:hover { box-shadow: inset 0 0 20px 20px #212; - filter: drop-shadow(0 0 1px rgba(255,255,255,0.5)); - filter: drop-shadow(0 0 1px rgba(0,0,0,0.5)); + filter: drop-shadow(0 0 1px rgba(255,0,0,0.5)); } @media screen and (-webkit-min-device-pixel-ratio:0) { /* adjust dropdown padding in webkit */ select { padding: 4px 18px 4px 4px; } - +/* select + select { margin-left: -12px !important; } +*/ } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { @@ -1490,108 +1564,54 @@ img[src$="magnet.png"] { transform: rotate(-90deg); } -.infoz { - margin: 0 -1px 0 0 !important; - padding: 0 !important; - line-height: 100%; - float: left; -} - -.infoz img { - border: none; - opacity: 0.5 !important; -} - -.infoz img:hover { - opacity: 1 !important; -} - -.section, .mainsection { +.newtorrentsection, .addtorrentsection, .configsection, .configsectionpanel, .section, .mainsection { margin: 0 0 10px 0; - padding: 10px; - border: 1px solid #001; - color: #001; + padding: 0 10px; + border: 1px solid #101; + color: #ddd; border-radius: 4px; box-shadow: inset 0 0 3px 0 #101; word-wrap: break-word; - text-align: center; - background: #545; - background: linear-gradient(to bottom, #545 0%, #434 100%); - opacity: 1 !important; filter: drop-shadow(0 0 1px #515); -webkit-filter: drop-shadow(0 0 1px #515); +} + +.section, .mainsection { + padding: 10px; + color: #001; + word-wrap: break-word; + background: #545; + background: linear-gradient(to bottom, #545 0%, #434 100%); overflow: auto; } .newtorrentsection { - margin: 0 0 10px 0; - padding: 0 10px 0 10px; - border: 1px solid #001; - text-align: center; - color: #ddd; - border-radius: 4px; - box-shadow: inset 0 0 3px 0 #101; - word-wrap: break-word; background: #545 url(images/snark_create.png) no-repeat scroll right center; background: url(images/snark_create.png) no-repeat scroll right center, linear-gradient(to bottom, #545 0%, #434 100%); background-size: 80px 80px, 100% 100%; - opacity: 1.0; - filter: drop-shadow(0 0 1px #515); - -webkit-filter: drop-shadow(0 0 1px #515); } .addtorrentsection { - margin: 0 0 10px 0; - padding: 0 10px 0 10px; - border: 1px solid #001; - text-align: center; - color: #ddd; - border-radius: 4px; - box-shadow: inset 0 0 3px 0 #101; - word-wrap: break-word; background: #545 url(images/snark_add.png) no-repeat scroll right center; background: url(images/snark_add.png) no-repeat scroll 99% center, linear-gradient(to bottom, #545 0%, #434 100%); background-size: 61px 61px, 100% 100%; - opacity: 1.0; - filter: drop-shadow(0 0 1px #515); - -webkit-filter: drop-shadow(0 0 1px #515); } .configsection { - margin: 0 0 10px 0; padding: 0 10px 13px 10px; - border: 1px solid #000; - color: #ddd; - border-radius: 4px; - box-shadow: inset 0 0 3px 0 #101; - word-wrap: break-word; - text-align: center; background: #545 url(images/configuration.png) no-repeat scroll 101% center; background: url(images/configuration.png) no-repeat scroll 101.5% center, linear-gradient(to bottom, #545 0%, #434 100%); background-size: 84px 82px, 100% 100%; - font-weight: bold; - filter: drop-shadow(0 0 1px #515); - -webkit-filter: drop-shadow(0 0 1px #515); } .configsectionpanel { - margin: 0 0 10px 0; - padding: 0 10px; - border: 1px solid #000; - color: #ddd; - border-radius: 4px; - box-shadow: inset 0 0 3px 0 #101; - word-wrap: break-word; - text-align: center; background: #545 url(images/configuration.png) no-repeat scroll right center; background: url(images/configuration.png) no-repeat scroll right center, linear-gradient(to bottom, #545 0%, #434 100%); background-size: 84px 82px, 100% 100%; - font-weight: bold; - filter: drop-shadow(0 0 1px #515); - -webkit-filter: drop-shadow(0 0 1px #515); } -.configsectionpanel, .configsectionpanel td, .snarkNewTorrent, .snarkNewTorrent td, .snarkAddInfo { +.configsectionpanel, .configsectionpanel td, .snarkNewTorrent, .snarkNewTorrent td, .snarkAddInfo, +select, input, input.r, input[name="nofilter_dataDir"], textarea[name="i2cpOpts"], a.control { font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif; font-size: 9pt !important; } @@ -1669,11 +1689,17 @@ code { color: #b8b; padding: 0 2px; font-weight: bold; - font-family: "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, mono + font-family: "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace; } .routerdown { color: #ee9; + border: 1px solid #202; + box-shadow: inset 0 0 0 1px #303, 0 0 1px #333; + padding: 15px 10px !important; + font-size: 10pt !important; + background: linear-gradient(to right, #202, #000, #202) #000; + border-radius: 3px; } .trackerconfig { @@ -1793,6 +1819,226 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac transition: ease transform 0.3s 0s; } +.peerinfo td:first-child { + background: url(images/peer.png) center center no-repeat; + background-size: 14px 14px; +} + +.peerinfo td, .debuginfo td { + padding-top: 5px; + padding-bottom: 5px; + color: #eee !important; +} + +/* debug */ + +.debuginfo td:first-child { + background: url(images/debuginfo.png) center center no-repeat; + background-blend-mode: luminosity; + background-size: 14px 14px; +} + +.debuginfo { + font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace; + line-height: 150%; +} + +.debuginfo b { + text-transform: capitalize; + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; +} + +.debugConnection { + font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace; + font-weight: bold !important; + color: #070; + margin-left: 3px; + margin-right: 3px; + letter-spacing: 0.03em; +} + +.peerinfo:hover td:nth-child(2), .debuginfo:hover td:nth-child(2) { + color: #fff !important; +} + +.from, .to { + font-family: sans-serif; + font-size: 12pt; + font-weight: bold; + vertical-align: middle; + line-height: 50%; + text-shadow: 0 0 1px #000; +} + +.debuginfo td { + color: #fff !important; +} + +.debugConnStat { + display: inline-block; + white-space: nowrap; + color: #bb0; + font-family: "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace !important; +} + +.debugRequests { + color: #bb0; + font-family: "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace !important; +} + +.debugConnStat b { + color: #ffdfff !important; + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif; +} + +.peerinfo:hover b, .debuginfo:hover b { + color: #fff !important; + color: #b9b; +} + +/* end debug */ + +/* Resource Errors */ + +.resourceError { + border: 1px solid #101; + margin-bottom: 0; +} + +.resourceError th { + background: url(/themes/console/images/info/errortriangle.png) left 10px center no-repeat, linear-gradient(to bottom, #414 0%, #414 50%, #313 51%, #101 100%); + background-size: 24px auto, 100% 100%; + padding: 10px 10px 10px 40px; + font-size: 10pt !important; +} + +.mainsection .resourceError td { + padding: 10px !important; + font-size: 10pt !important; +} + +.resourceError tr:nth-child(odd) { + background: #351933; +} + +.resourceError tr:nth-child(even) { + background: #270027; +} + +#DoesNotExist { + margin-top: 10px; +} + +/* end Resource Errors */ + +#totals { + display: inline-block; + margin: 2px 0 2px 6px; +} + +.priority input[type="radio"] { + text-align: left; + margin: 0; +} + +.priorityHigh, .priorityNormal, .prioritySkip { + padding: 0; + display: inline-block; + width: 50px; + font-size: 0; + text-align: left; + color: transparent; + overflow: hidden; +} + +.priorityHigh { + background: url(/i2psnark/.resources/icons/clock_red.png) left 20px center no-repeat; +} + +.priorityNormal { + background: url(/i2psnark/.resources/icons/clock.png) left 20px center no-repeat; +} + +.prioritySkip { + background: url(/i2psnark/.resources/icons/cancel.png) left 18px center no-repeat; +} + +.priority, .snarkDirInfo .headerpriority { + padding: 5px !important; + text-align: center !important; + width: 150px; + white-space: nowrap; +} + +#setPriority th { + text-align: right !important; +} + +.snarkDirInfo img[src$="priority.png"] { + margin: 0 !important; +} + +#torrentInfoStats td { + text-align: left !important; +} + +#torrentInfoStats img { + margin: 1px 3px 2px 5px !important; +} + +#torrentInfoStats span { + white-space: nowrap; + display: inline-block; + margin-right: 2px; +} + +/* configs */ + + +#configs td:nth-child(2) { + white-space: nowrap; +} + +#configs td:first-child { + min-width: 220px !important; + font-weight: bold; +} + +td#bwHelp { + background: url(images/infocircle.png) left 8px center no-repeat; + background-size: 14px auto; + padding-left: 26px !important; + width: 90%; + line-height: 100%; +} + +td#bwHelp a { + display: inline-block; + white-space: nowrap; + margin-left: 4px; + line-height: 150%; +} + +/* end configs */ + +.knownTracker input[type="radio"], .knownTracker input[type="radio"]:hover { + opacity: 0.7; + cursor: not-allowed; + -webkit-filter: sepia(100%) invert(100%) hue-rotate(58deg) brightness(80%) !important; + filter: sepia(100%) invert(100%) hue-rotate(58deg) brightness(80%) !important; +} + +#filecheck { + display: inline-block; + margin: 5px 0; + background: url(images/progressbar.gif) left center no-repeat; + padding-left: 22px; +} + +#filecheck a { + margin: 8px; +} + /* MS Edge 14+ fix */ _:-ms-lang(x), * { filter: none !important; @@ -1801,9 +2047,150 @@ _:-ms-lang(x), * { /* responsive layout */ +@media screen and (max-width: 950px) { +.snarkTorrents a, .snarkTorrentETA, .snarkTorrents tfoot th, .peerinfo td, .snarkTorrents td, .snarkTorrentInfo td, .snarkDirInfo td { + font-size: 7.5pt !important; +} + +.page { + min-width: 900px !important; +} +} + +@media screen and (max-width: 1050px) { +.page { + padding: 6px 6px 0; +} + +.section, .mainsection { + padding: 6px; +} + +.snarkMessages, .mainsection, .addtorrentsection, .newtorrentsection, .configsection, .configsectionpanel { + margin-bottom: 6px !important; +} + +#DoesNotExist { + margin-top: 6px !important; +} + +.logshim { + margin-top: -6px !important; +} + +table.snarkDirInfo { + margin-top: 6px !important; +} + +.snarkDirInfo thead img { + max-height: 20px; +} + +.snarkTorrents td:nth-child(2) { + white-space: nowrap; +} + +.snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded, .snarkFileSize, .snarkTorrentETA { + word-spacing: -0.3em; +} + +.snarkTorrents a, .snarkTorrentETA, .snarkTorrents tfoot th, .peerinfo td, .snarkTorrents td, .snarkTorrentInfo td, .snarkDirInfo td { + font-size: 8pt; +} + +.snarkTorrents td:first-child img { + max-height: 16px; +} + +.snarkTorrents td[colspan="10"] { + white-space: normal; +} + +.snarkTorrentName a:not(old) { + max-width: 300px; +} + +.snarkTorrentDownloaded { + white-space: nowrap; +} + +.snarkTorrentStatus b { + display: none; +} + +b.alwaysShow { + display: inline; +} + +.snarkTorrents td:nth-child(2), .snarkTorrents td:nth-child(2) a { + font-weight: bold; +} +} + +@media screen and (max-width: 1200px) { +.snarkTorrentName a:not(old) { + max-width: 340px; + display: inline-block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.toggleview, .snarkConfigTitle { + font-size: 11pt !important; +} + +.dirInfoComplete { + display: none; +} +} + +@media screen and (min-width: 1050px) { +.snarkTorrentStatus { + white-space: nowrap; +} + +.snarkTorrents a, th, td { + font-size: 8pt !important; +} + +.mainsection td { + padding-top: 3px !important; + padding-bottom: 3px !important; +} +} + +@media screen and (min-width: 1200px) { +.percentDownloaded { + pointer-events: none; /* hide tooltip */ +} + +#pagenav img { + width: 14px !important; + height: 14px !important; +} + +.debugConnection { + background: #003000; + color: #fff; + border-radius: 2px; + padding: 1px 3px; + font-weight: bold; + margin: 2px 4px; + display: inline-block; + box-shadow: 0 0 0 1px #101; +} +} + @media screen and (min-width: 1400px) { +th, td, .choked, .unchoked { + word-spacing: 0 !important; + letter-spacing: 0 !important; +} + body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, .snarkFileStatus { - font-size: 9pt !important; + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; + font-size: 10pt !important; } .snarknavbar { @@ -1814,18 +2201,17 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, .snarkFileStatus margin: -2px -9px 0 -5px; } -@media screen and (-webkit-min-device-pixel-ratio:0) { -.snarkRefresh img { - margin: -2px -8px 0 -5px; +input[type="submit"], input[type="reset"], select, select option, button, a.control, .snarkTorrents a:link, td, th, code { + font-size: 10pt !important; } .snarkConfigTitle, label.toggleview { - font-size: 14pt !important; -} + font-size: 13pt !important; + min-width: 240px !important; } .snarkRefresh:link { - font-size: 10.5pt !important; + font-size: 11pt; } .snarkConfigTitle, label.toggleview { @@ -1840,16 +2226,54 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, .snarkFileStatus padding: 6px 12px 5px 15px !important; margin: -7px 0 -6px !important; } + +.mainsection td { + padding-top: 4px !important; + padding-bottom: 4px !important; +} + +.peerinfo tt { + display: inline-block; +} + +.SnarkTorrents td:nth-child(4) { + padding-right: 5px; +} + +.snarkTorrentName a:not(old) { + max-width: none; +} + .snarkTorrents tt { font-size: 10pt; color: #cc0; + background: #505; + padding: 2px 3px; + border-radius: 2px; + box-shadow: 0 0 1px #303; + letter-spacing: 0.1em; + opacity: 0.9; + margin: 1px 3px !important; } -tt, code, .snarkMessages, input, input[type="submit"], input[type="reset"], select, select option, button, textarea { +tt, .snarkMessages, input, textarea { font-size: 9pt !important; } -.configsectionpanel, .configsectionpanel td, .snarkNewTorrent, .snarkNewTorrent td, .snarkAddInfo { +input[type="text"], input.r, input[name="nofilter_dataDir"], .configsectionpanel textarea { + padding: 6px !important; +} + +.configsectionpanel textarea { + height: 30px; +} + +.snarkTorrentStatus b, .dirInfoComplete { + margin-right: 3px; +} + +.configsectionpanel, .configsectionpanel td, .snarkNewTorrent, .snarkNewTorrent td, .snarkAddInfo, +select, input, input.r, input[name="nofilter_dataDir"], textarea[name="i2cpOpts"] { font-size: 10pt !important; } @@ -1862,9 +2286,52 @@ select { padding-bottom: 4px; } +/* select:nth-child(2) { margin-left: -14px !important; } +*/ + +.debuginfo td { + 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; +} + +#configs td { + padding-top: 3px; + padding-bottom: 3px; +} + +#configs td:first-child { + padding-right: 10px !important; +} + +#configs td:last-child { + padding-right: 0 !important; +} + +.debugConnStat { + margin-right: 5px; +} +} + +@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1400px) { +.snarkRefresh img { + margin: -2px -8px 0 -5px; +} } /* end responsive layout */ + diff --git a/installer/resources/themes/snark/vanilla/images/bling.png b/installer/resources/themes/snark/vanilla/images/bling.png deleted file mode 100644 index edd2de7c4..000000000 Binary files a/installer/resources/themes/snark/vanilla/images/bling.png and /dev/null differ diff --git a/installer/resources/themes/snark/vanilla/images/bling2.png b/installer/resources/themes/snark/vanilla/images/bling2.png deleted file mode 100644 index 473d05f3e..000000000 Binary files a/installer/resources/themes/snark/vanilla/images/bling2.png and /dev/null differ diff --git a/installer/resources/themes/snark/vanilla/images/button_forum.png b/installer/resources/themes/snark/vanilla/images/button_forum.png index bdbb04289..32c212538 100644 Binary files a/installer/resources/themes/snark/vanilla/images/button_forum.png and b/installer/resources/themes/snark/vanilla/images/button_forum.png differ diff --git a/installer/resources/themes/snark/vanilla/images/button_forum_active.png b/installer/resources/themes/snark/vanilla/images/button_forum_active.png index 0c9545677..123596043 100644 Binary files a/installer/resources/themes/snark/vanilla/images/button_forum_active.png and b/installer/resources/themes/snark/vanilla/images/button_forum_active.png differ diff --git a/installer/resources/themes/snark/vanilla/images/button_forum_hover.png b/installer/resources/themes/snark/vanilla/images/button_forum_hover.png index bdd6bf265..0e7dfa88a 100644 Binary files a/installer/resources/themes/snark/vanilla/images/button_forum_hover.png and b/installer/resources/themes/snark/vanilla/images/button_forum_hover.png differ diff --git a/installer/resources/themes/snark/vanilla/images/button_snark.png b/installer/resources/themes/snark/vanilla/images/button_snark.png index f193e53c0..6b73e60ad 100644 Binary files a/installer/resources/themes/snark/vanilla/images/button_snark.png and b/installer/resources/themes/snark/vanilla/images/button_snark.png differ diff --git a/installer/resources/themes/snark/vanilla/images/button_snark_active.png b/installer/resources/themes/snark/vanilla/images/button_snark_active.png index 4568bf653..834c4b2e5 100644 Binary files a/installer/resources/themes/snark/vanilla/images/button_snark_active.png and b/installer/resources/themes/snark/vanilla/images/button_snark_active.png differ diff --git a/installer/resources/themes/snark/vanilla/images/button_snark_hover.png b/installer/resources/themes/snark/vanilla/images/button_snark_hover.png index fb8aad6ec..8f2c06ab4 100644 Binary files a/installer/resources/themes/snark/vanilla/images/button_snark_hover.png and b/installer/resources/themes/snark/vanilla/images/button_snark_hover.png differ diff --git a/installer/resources/themes/snark/vanilla/images/button_tracker.png b/installer/resources/themes/snark/vanilla/images/button_tracker.png index 053b7d0f4..40d291a96 100644 Binary files a/installer/resources/themes/snark/vanilla/images/button_tracker.png and b/installer/resources/themes/snark/vanilla/images/button_tracker.png differ diff --git a/installer/resources/themes/snark/vanilla/images/button_tracker_active.png b/installer/resources/themes/snark/vanilla/images/button_tracker_active.png index 5284afb54..9cf00ceab 100644 Binary files a/installer/resources/themes/snark/vanilla/images/button_tracker_active.png and b/installer/resources/themes/snark/vanilla/images/button_tracker_active.png differ diff --git a/installer/resources/themes/snark/vanilla/images/button_tracker_hover.png b/installer/resources/themes/snark/vanilla/images/button_tracker_hover.png index a1f553707..0a022b5b9 100644 Binary files a/installer/resources/themes/snark/vanilla/images/button_tracker_hover.png and b/installer/resources/themes/snark/vanilla/images/button_tracker_hover.png differ diff --git a/installer/resources/themes/snark/vanilla/images/debuginfo.png b/installer/resources/themes/snark/vanilla/images/debuginfo.png new file mode 100644 index 000000000..42c7cd6ab Binary files /dev/null and b/installer/resources/themes/snark/vanilla/images/debuginfo.png differ diff --git a/installer/resources/themes/snark/vanilla/images/dropdown_hover.png b/installer/resources/themes/snark/vanilla/images/dropdown_hover.png index ffcca9c9b..0d7a1062a 100644 Binary files a/installer/resources/themes/snark/vanilla/images/dropdown_hover.png and b/installer/resources/themes/snark/vanilla/images/dropdown_hover.png differ diff --git a/installer/resources/themes/snark/vanilla/images/graytile.png b/installer/resources/themes/snark/vanilla/images/graytile.png deleted file mode 100644 index f06c3da47..000000000 Binary files a/installer/resources/themes/snark/vanilla/images/graytile.png and /dev/null differ diff --git a/installer/resources/themes/snark/vanilla/images/infocircle.png b/installer/resources/themes/snark/vanilla/images/infocircle.png new file mode 100644 index 000000000..13879c45a Binary files /dev/null and b/installer/resources/themes/snark/vanilla/images/infocircle.png differ diff --git a/installer/resources/themes/snark/vanilla/images/peer.png b/installer/resources/themes/snark/vanilla/images/peer.png new file mode 100644 index 000000000..93a9e7738 Binary files /dev/null and b/installer/resources/themes/snark/vanilla/images/peer.png differ diff --git a/installer/resources/themes/snark/vanilla/images/progressbar.gif b/installer/resources/themes/snark/vanilla/images/progressbar.gif new file mode 100644 index 000000000..e204f6b31 Binary files /dev/null and b/installer/resources/themes/snark/vanilla/images/progressbar.gif differ diff --git a/installer/resources/themes/snark/vanilla/images/snark_add.png b/installer/resources/themes/snark/vanilla/images/snark_add.png index 0071b49ee..724c36a05 100644 Binary files a/installer/resources/themes/snark/vanilla/images/snark_add.png and b/installer/resources/themes/snark/vanilla/images/snark_add.png differ diff --git a/installer/resources/themes/snark/vanilla/images/tile.png b/installer/resources/themes/snark/vanilla/images/tile.png deleted file mode 100644 index 242e011e5..000000000 Binary files a/installer/resources/themes/snark/vanilla/images/tile.png and /dev/null differ diff --git a/installer/resources/themes/snark/vanilla/images/whippy.png b/installer/resources/themes/snark/vanilla/images/whippy.png new file mode 100644 index 000000000..a5ebb5acf Binary files /dev/null and b/installer/resources/themes/snark/vanilla/images/whippy.png differ diff --git a/installer/resources/themes/snark/vanilla/snark.css b/installer/resources/themes/snark/vanilla/snark.css index 93eaa9fbc..33074b60c 100644 --- a/installer/resources/themes/snark/vanilla/snark.css +++ b/installer/resources/themes/snark/vanilla/snark.css @@ -7,22 +7,21 @@ html { body { background: #2f231a; - background: linear-gradient(-45deg, #2f231a, #1f120c); + background: repeating-linear-gradient(to bottom, #9F948B 1px, #6F5B4C 1px, #BFA285 3px); color: #2f1500; - font: 8pt "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif; - background-size: 3px 3px; + font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif; } /* preload top navigation mouseovers */ body { - background: linear-gradient(-45deg, #2f231a, #1f120c), + background: repeating-linear-gradient(to bottom, #6F5B4C 1px, #9F948B 1px, #BFA285 4px), 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: 3px 3px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important; + background-size: 100% 100%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important; } body.iframed { @@ -45,14 +44,28 @@ body.iframed { outline: none; } -*:focus { - filter: drop-shadow(0 0 1px #f60); - -webkit-filter: drop-shadow(0 0 1px #f60); +td *:focus { + filter: drop-shadow(0 0 1px #df0067); + -webkit-filter: drop-shadow(0 0 1px #df0067); +} + +::selection { + background: #900 !important; + color: white; +} + +::-moz-selection { + background: #800 !important; + color: white; +} + +input[type="submit"], input[type="reset"], button, a:link, input[type="checkbox"], input[type="radio"], select { + cursor: pointer; } .page { - background: #f1f2e4 url(images/tile2.png); - background: linear-gradient(to bottom, rgba(239,239,239,0.6) 0%, rgba(207,199,194,0.6) 100%), #f1f2e4 url('images/tile2.png'); + background: #dfdccb url(images/tile2.png); + background: repeating-linear-gradient(to bottom, #ECEBDD 1px, #EFEBDD 2px, #EBE5D5 5px); color: #310; min-width: 900px !important; margin: 5px 0 0 0; @@ -63,7 +76,6 @@ body.iframed { line-height: 160% !important; box-shadow: inset 0 0 3px 0 #a08160, 0 0 1px 0 #4f3d36; text-align: center; - opacity: 1; } .iframed .page { @@ -73,23 +85,42 @@ body.iframed { padding: 0; } -/* -.snarkTitle { - font-size: 12pt; - font-weight: bold; - text-align: center; +a:link, a:visited { + text-decoration: none; } -*/ + +td a:link { + color: #cf0f00; + text-decoration: none; + font-weight: bold; + word-wrap: break-word; +} + +td a:visited { + color: #9F0B00 !important; +} + +td a:hover, td a:visited:hover, td a:focus, td a:visited:focus { + color: #df0067 !important; + filter: none; + -webkit-filter: none; +} + +td a:active, td a:visited:active { + color: #FF2F85 !important; +} + +/* top nav */ .snarknavbar { - margin: -10px 0 9px 0 !important; - padding: 14px 10px 12px; + margin: -11px 0 10px 0 !important; + padding: 13px 10px 12px; border: 1px solid #2f1b0c; border-radius: 0 0 2px 2px; - box-shadow: inset 0 0 0 1px #fff, 0 0 1px 0 #4f3d36; - background: #efefef url('images/bling2.png') repeat-x scroll center center; - background: linear-gradient(to bottom, #efefef 0%, #efefef 51%, #cfc7c2 52%, #cfc7c2 100%); - min-width: 700px; + box-shadow: inset 0 0 0 1px #fff5ef, 0 0 1px 0 #4f3d36; + background: #efefef; + background: linear-gradient(to bottom, #efefef 0%, #efefef 49%, #cfc7c2 52%, #cfc7c2 100%); + min-width: 900px; width: 70%; text-align: center; position: sticky; @@ -98,95 +129,94 @@ body.iframed { } .iframed .snarknavbar { - padding-top: 14px; + padding-top: 13px; margin: -6px 0 !important; width: auto; border-radius: 0; box-shadow: 0 0 2px 0 #fff inset, 0 0 1px 0 #4f3d36; } -@media screen and (-webkit-min-device-pixel-ratio:0) { -.snarknavbar { - padding-top: 15px; -} - -.snarkRefresh:link:first-child { - padding-top: 4px !important; -} +.snarkRefresh img { + display: none; } .snarkRefresh:link, .snarkRefresh:visited { text-decoration: none !important; text-transform: uppercase !important; - padding: 5px 10px 5px 12px !important; - margin: -5px -2px -5px 0 !important; + padding: 4px 10px 4px 20px !important; + margin: -5px -4px -5px 0 !important; letter-spacing: 0.08em; font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif; font-weight: bold; font-size: 10pt; color: #930; - background: #fff7ef url('images/bling.png') repeat-x scroll center center; - background: linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); + color: #3F271B; + background: #fff7ef url(images/button_snark.png) 11px center no-repeat; + background: url(images/button_snark.png) 11px center no-repeat, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 47%, rgba(207, 193, 181, 0.6) 50%), repeating-linear-gradient(45deg, #75604E 1px, #A09286 1px, #BFAFA2 2px); + background-size: 18px auto, 100% 100%, 100% 100%; border-radius: 0; border: 1px solid #efe6e0; text-shadow: 0 0 1px #fff5ef; - box-shadow: inset 0 0 0 1px #efe6e0; + box-shadow: inset 0 0 0 1px #efe6e0, 0 0 0 1px rgba(77, 69, 62, 0.1); border: 1px solid #2f1b0c; } .snarkRefresh:hover, .snarkRefresh:focus { text-decoration: none !important; text-shadow: none; - color: #900; - color: #f60 !important; - background: #fff url('images/bling2.png') repeat-x scroll center center; - background: linear-gradient(to bottom, #ffeadf 0%, #ffeadf 51%, #cfb6a8 52%, #cfb6a8 100%); + color: #930 !important; + background: #ffeadf url(images/button_snark_hover.png) 11px center no-repeat; + background: url(images/button_snark_hover.png) 11px center no-repeat, linear-gradient(to bottom, #ffeadf 0%, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%); + background-size: 18px auto, 100% 100%, 100% 100%; + box-shadow: inset 0 0 0 1px #fff5ef, 0 0 0 1px rgba(77, 69, 62, 0.1); + padding: 4px 10px 4px 20px !important; } .snarkRefresh:active { - color: #eee !important; - background: linear-gradient(to bottom, #dfb899 0%, #dfb899 50%, #af9178 50%, #af9178 100%); + background: #dfb899 url(images/button_snark_active.png) 11px center no-repeat; + background: url(images/button_snark_active.png) 11px center no-repeat, linear-gradient(to bottom, #dfb899 0%, #dfb899 47%, #af9178 50%, #af9178 100%); + background-size: 18px auto, 100% 100%, 100% 100%; text-shadow: none !important; - box-shadow: inset 0 0 0 1px #fff, inset 2px 2px 3px 1px #555; -} - -.snarkRefresh:active img { - filter: sepia(100%) invert(50%) brightness(200%) !important; - -webkit-filter: sepia(100%) invert(50%) brightness(200%) !important; - opacity: 0.7; + box-shadow: inset 0 0 0 1px #efe6e0, inset 2px 2px 3px 1px #59513B, 0 0 0 1px rgba(77, 69, 62, 0.1); + padding: 4px 10px 4px 20px !important; } .snarkRefresh:nth-child(2) { - background: url(images/button_forum.png) 12px center no-repeat, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); - padding: 5px 10px 5px 28px !important; + background: #fff7ef url(images/button_forum.png) 12px center no-repeat; + background: url(images/button_forum.png) 12px center no-repeat, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 47%, rgba(207, 193, 181, 0.6) 50%), repeating-linear-gradient(45deg, #75604E 1px, #A09286 1px, #BFAFA2 2px); + background-size: 16px auto, 100% 100%, 100% 100%; + padding: 4px 10px 4px 28px !important; } .snarkRefresh:nth-child(n+3) { - background: url(images/button_tracker.png) 12px center no-repeat, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); - padding: 5px 10px 5px 28px !important; + background: #fff7ef url(images/button_tracker.png) 12px center no-repeat; + background: url(images/button_tracker.png) 12px center no-repeat, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 47%, rgba(207, 193, 181, 0.6) 50%), repeating-linear-gradient(135deg, #75604E 1px, #A09286 1px, #BFAFA2 2px); + background-size: 16px auto, 100% 100%, 100% 100%; + padding: 4px 10px 4px 28px !important; } .snarkRefresh:nth-child(2):hover, .snarkRefresh:nth-child(2):focus { - background: url(images/button_forum_hover.png) 12px center no-repeat, linear-gradient(to bottom, #ffeadf 0%, #ffeadf 51%, #cfb6a8 52%, #cfb6a8 100%); - color: #f60; + background: #ffeadf url(images/button_forum_hover.png) 12px center no-repeat; + background: url(images/button_forum_hover.png) 12px center no-repeat, linear-gradient(to bottom, #ffeadf 0%, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%); + background-size: 16px auto, 100% 100%, 100% 100%; } .snarkRefresh:nth-child(n+3):hover, .snarkRefresh:nth-child(n+3):focus { - background: url(images/button_tracker_hover.png) 12px center no-repeat, linear-gradient(to bottom, #ffeadf 0%, #ffeadf 51%, #cfb6a8 52%, #cfb6a8 100%); - color: #f60; + background: #ffeadf url(images/button_tracker_hover.png) 12px center no-repeat; + background: url(images/button_tracker_hover.png) 12px center no-repeat, linear-gradient(to bottom, #ffeadf 0%, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%); + background-size: 16px auto, 100% 100%, 100% 100%; } .snarkRefresh:nth-child(2):active { - color: #eee; - background: url(images/button_forum_active.png) 12px center no-repeat, linear-gradient(to bottom, #dfb899 0%, #dfb899 50%, #af9178 50%, #af9178 100%); - text-shadow: none; + background: #dfb899 url(images/button_forum_active.png) 12px; + background: url(images/button_forum_active.png) 12px center no-repeat, linear-gradient(to bottom, #dfb899 0%, #dfb899 47%, #af9178 50%, #af9178 100%); + background-size: 16px auto, 100% 100%, 100% 100%; } .snarkRefresh:nth-child(n+3):active { - color: #eee; - background: url(images/button_tracker_active.png) 12px center no-repeat, linear-gradient(to bottom, #dfb899 0%, #dfb899 50%, #af9178 50%, #af9178 100%); - background-blend-mode: normal; - text-shadow: none; + background: #dfb899 url(images/button_tracker_active.png) 12px center no-repeat; + background: url(images/button_tracker_active.png) 12px center no-repeat, linear-gradient(to bottom, #dfb899 0%, #dfb899 47%, #af9178 50%, #af9178 100%); + background-size: 16px auto, 100% 100%, 100% 100%; } .snarkRefresh:last-child { @@ -202,43 +232,20 @@ body.iframed { margin: -5px 0 -2px !important; } -@media screen and (-webkit-min-device-pixel-ratio:0) { /* button/bar alignment on config page */ -.iframed .snarknavbar { - padding-top: 16px; - margin-bottom: -6px !important; +.snarkRefresh:hover, .snarkRefresh:visited:hover { + color: #930 !important; } -.snarkRefresh:first-child { - margin: -5px -2px -3px 0 !important; - display: inline-block; - padding: 5px 10px 2px 12px !important; +.snarkRefresh:active, .snarkRefresh:visited:active { + color: #eee !important; } -.snarkRefresh:last-child[href="/i2psnark/"] { - margin: -5px 0 -3px !important; - display: inline-block; - padding: 5px 10px 3px 12px !important; -} +/* end topnav */ -.iframed .snarkRefresh:last-child[href="/i2psnark/"] { - margin: -5px 0 -2px !important; -} -} - -.snarkRefresh img { - margin: 0 -6px 2px -2px !important; - filter: sepia(65%); - -webkit-filter: sepia(65%); - vertical-align: middle; -} - -.snarkRefresh:hover img { - filter: none; - -webkit-filter: none; -} +/* screenlog */ .snarkMessages { - font: bold 8pt "Droid Sans Mono", "Noto Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono !important; + font: bold 8pt "Droid Sans Mono", "Noto Mono", "DejaVu Sans Mono", "Lucida Console", Courier, monospace !important; text-align: left; margin: 0 0 10px; padding: 0 3px; @@ -246,14 +253,19 @@ body.iframed { border: 1px solid #6f533e; border-radius: 2px; box-shadow: inset 0 0 6px 0 #3f2307; - overflow-y: auto; - overflow-x: hidden; color: #cfc7c2; + overflow: hidden; height: 56px; width: auto; background: #3f3833 url(images/hat.png) no-repeat scroll right center; background: url(images/hat.png) no-repeat scroll right center, linear-gradient(to bottom, #5f554d 0%, #3f3833 100%); + background: url(images/whippy.png) no-repeat scroll right 5px bottom -4px, linear-gradient(to bottom, #5f554d 0%, #3f3833 100%); background-size: 80px 83px, 100% 100%; + background-size: auto 100%, 100% 100%; +} + +.snarkMessages:hover { + overflow: auto; } .snarkMessages:focus { @@ -273,7 +285,7 @@ body.iframed { .snarkMessages li::before { content: ''; display: inline-block; - background: url(images/bullet.png) left 2px no-repeat; + background: url(images/bullet.png) left 2px no-repeat; width: 13px; height: 11px; background-size: 9px 9px; @@ -281,17 +293,24 @@ body.iframed { .snarkMessages a:link:not([href*="action=Clear"]) { mix-blend-mode: exclusion; + color: #f60 !important; } -/* -.snarkMessages a:hover { - color: #f90 !important; +.snarkMessages a:link:hover:not([href*="action=Clear"]) { + mix-blend-mode: normal; } .snarkMessages a:visited { color: #d30 !important; } -*/ + +.snarkMessages a:hover, .snarkMessages a:visited:hover, .snarkConfigTitle a:hover, .snarkConfigTitle a:visited:hover { + color: #930 !important; +} + +.snarkMessages a:active, .snarkMessages a:visited:active, .snarkConfigTitle a:active, .snarkConfigTitle a:visited:active { + color: #f30 !important; +} .snarkMessages p { font-style: italic; @@ -322,9 +341,48 @@ body.iframed { margin-top: -10px !important; } +/* end screenlog */ + +/* pagenav */ + +#pagenav { + vertical-align: middle; + padding: 3px 2px 2px; + font-size: 9pt; +} + +#pagenav img { + border: 1px solid #541; + border-radius: 2px; + margin-right: -3px; + padding: 3px 4px; + filter: sepia(100%) hue-rotate(340deg) drop-shadow(0 0 1px #999); + -webkit-filter: sepia(100%) hue-rotate(340deg) drop-shadow(0 0 1px #999); + background: linear-gradient(to bottom, #ffeadf 51%, #cfb6a8 52%); + box-shadow: inset 0 0 0 1px #fff; + mix-blend-mode: luminosity; +} + +#pagenav img:hover, #pagenav a:focus img { + mix-blend-mode: normal; +} + +#pagenav a:active img { + mix-blend-mode: normal; + box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px #3f362f !important; +} + +#pagenav img.disable, #pagenav img.disable:hover { + mix-blend-mode: luminosity; + opacity: 0.2; + margin-right: 1px; +} + +/* end pagenav */ + pre { width: 100%; - font: 8pt "DejaVu Sans Mono", "Droid Sans Mono", "Lucida Console", Courier, mono !important; + font: 8pt "DejaVu Sans Mono", "Droid Sans Mono", "Lucida Console", Courier, monospace !important; padding: 0; text-align: left !important; height: 8px; @@ -338,7 +396,7 @@ table { padding: 0; border-spacing: 0; border-collapse: collapse; - color: #323; + color: #2f1500; width: 100%; opacity: 1 !important; font-size: 8.5pt !important; @@ -349,21 +407,21 @@ tr { } thead, tfoot { - background: url("images/bling2.png") repeat-x scroll center center #867; + background: #efefef; background: linear-gradient(to bottom, #efefef, #cfc7c2); font-weight: bold; - color: #503; + color: #2f1500; } thead a img, thead img { - /* mix-blend-mode: luminosity;*/ - opacity: 1; + opacity: 0.9; filter: sepia(100%) hue-rotate(340deg); -webkit-filter: sepia(100%) hue-rotate(340deg); - max-height: 22px; + max-height: 18px; } thead a:hover img, thead a:focus img { + opacity: 1; mix-blend-mode: normal; filter: drop-shadow(0 0 1px #f60); -webkit-filter: drop-shadow(0 0 1px #f60); @@ -374,7 +432,7 @@ th { font-size: 8pt; border-top: 1px solid #6f533e; border-bottom: 1px solid #6f533e; - color: #511; + color: #2f1500; } th br { @@ -391,14 +449,6 @@ tfoot td:first-child { padding-left: 0; } -th:first-child img { - margin: 1px 1px 3px 1px !important; -} - -th:nth-child(2) img { - margin: 1px 7px 3px 2px !important; -} - tfoot th { padding-bottom: 4px !important; } @@ -412,46 +462,12 @@ tfoot tr:nth-child(n+1) { text-align: left; } -#pagenav { - vertical-align: middle; - padding: 3px 2px 2px; - font-size: 9pt; -} - -#pagenav img { - border: 1px solid #541; - border-radius: 3px; - margin-right: -3px; - padding: 3px 4px; - filter: sepia(100%) hue-rotate(340deg) drop-shadow(0 0 1px #999); - -webkit-filter: sepia(100%) hue-rotate(340deg) drop-shadow(0 0 1px #999); - background: linear-gradient(to bottom, #ffeadf 0%, #ffeadf 51%, #cfb6a8 52%, #cfb6a8 100%); - box-shadow: inset 0 0 0 1px #fff; - mix-blend-mode: luminosity; -} - -#pagenav img:hover, #pagenav a:focus img { - mix-blend-mode: normal; -} - -#pagenav a:active img { - mix-blend-mode: normal; - box-shadow: inset 1px 1px 2px 1px #3f362f !important; -} - -#pagenav img.disable, #pagenav img.disable:hover { - mix-blend-mode: luminosity; - opacity: 0.2; - margin-right: 1px; -} - .headerstatus { text-align: left; - padding-left: 15px; } .headerpriority { - text-align: left; + text-align: center; padding: 5px; } @@ -460,27 +476,27 @@ tfoot tr:nth-child(n+1) { } .ParentDir { - background: #ffeddf; + background: #fff4ef; + background: linear-gradient(to right, #efe6e0, #dfd6d1 70%); text-align: left !important; padding: 4px 0 4px 4px; } .priority { - font-size: 7pt; + font-size: 8pt; vertical-align: middle; - text-align: right; - padding-right: 10px; + text-align: center; + white-space: nowrap; + width: 144px; } .snarkTorrents { margin: 0; border: 1px solid #6f533e; - background: #212; + background: #e8e5dc; border-collapse: separate; border-spacing: 0; border-radius: 2px; - filter: drop-shadow(0 0 1px #4d453e); - -webkit-filter: drop-shadow(0 0 1px #4d453e); } .snarkTorrents thead th { @@ -488,19 +504,23 @@ tfoot tr:nth-child(n+1) { border-bottom: 1px solid #6f533e; } +.snarkTorrents thead th > * { + vertical-align: middle !important; +} + .snarkTorrents thead th:nth-child(2) { text-align: left; min-width: 50px; } .snarkTorrents tfoot th { - border-bottom: 0; + border-bottom: none !important; white-space: normal !important; font-weight: normal; } -.snarkTorrents tfoot th::first-line { - font-weight: bold; +.snarkTorrents tfoot th::first-line, .snarkTorrents tfoot th:nth-child(n+7) { + font-weight: bold !important; } .snarkTorrents tfoot th:nth-child(n+2) { @@ -516,7 +536,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; } @@ -538,10 +558,6 @@ tfoot tr:nth-child(n+1) { white-space: nowrap; } -.snarkTorrents td:nth-child(n+6), .snarkTorrents tfoot th:nth-child(n+2) { - word-spacing: -0.4em; -} - .snarkTorrents tfoot { vertical-align: top; } @@ -552,7 +568,6 @@ tfoot tr:nth-child(n+1) { .snarkTorrents td:first-child, .snarkTorrents td:nth-child(2) { padding: 2px 0 !important; - word-spacing: -0.2em; } .snarkTorrents td:nth-child(3), .snarkTorrents td:nth-child(4) { @@ -561,8 +576,7 @@ tfoot tr:nth-child(n+1) { } .snarkTorrents td:nth-child(3) { - text-align: right; - padding-left: 3px !important; + padding: 0 3px !important; } .snarkTorrents td:nth-child(4) { @@ -571,8 +585,9 @@ tfoot tr:nth-child(n+1) { font-weight: bold; } -.snarkTorrents td:nth-child(7) { - font-weight: bold; +.snarkTorrents td:nth-child(7), .peerinfo .snarkTorrentStatus { + font-weight: bold !important; + white-space: nowrap !important; } td { @@ -596,11 +611,6 @@ td:first-child { line-height: 110%; } -.snarkTorrentName[onclick], .snarkTorrentName[onclick]:hover a { - cursor: pointer; - color: #cf0f00; -} - .snarkTorrentName img { padding-bottom: 2px; text-align: left; @@ -615,20 +625,25 @@ td:first-child { white-space: nowrap; } +@media screen and (-webkit-min-device-pixel-ratio:0) { +.snarkTorrentAction { + width: 48px !important; +} +} + /* MS Edge 14+ fix */ _:-ms-lang(x), .snarkTorrentAction { width: 72px !important; } .snarkTorrentAction input[type="image"], .snarkTorrents th:last-child input[type="image"] { - filter: drop-shadow(0 0 1px #7f6c5f); - -webkit-filter: drop-shadow(0 0 1px #7f6c5f); + filter: drop-shadow(0 0 1px rgba(127, 108, 95, 0.6)); + -webkit-filter: drop-shadow(0 0 1px rgba(127, 108, 95, 0.6)); border: 1px solid #4d453e; border-radius: 2px; padding: 3px !important; - background: linear-gradient(to bottom, #efefef 0%, #efefef 51%, #cfc7c2 52%, #cfc7c2 100%); background: linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); - box-shadow: inset 0 0 0 1px #fff; + box-shadow: inset 0 0 0 1px #efe6e0; vertical-align: middle; mix-blend-mode: normal; opacity: 1 !important; @@ -637,14 +652,14 @@ _:-ms-lang(x), .snarkTorrentAction { .snarkTorrentAction input[type="image"]:hover, .snarkTorrents th:last-child input[type="image"]:hover, .snarkTorrentAction input[type="image"]:focus, .snarkTorrents th:last-child input[type="image"]:focus { background: linear-gradient(to bottom, #ffeadf 0%, #ffeadf 51%, #cfb6a8 52%, #cfb6a8 100%); - border: 1px solid #f60 !important; + border: 1px solid #930 !important; box-shadow: inset 0 0 0 1px #fff; - filter: drop-shadow(0 0 1px #f60); - -webkit-filter: drop-shadow(0 0 1px #f60); + filter: drop-shadow(0 0 1px #f30); + -webkit-filter: drop-shadow(0 0 1px #f30); } .snarkTorrentAction input[type="image"]:active, .snarkTorrents th:last-child input[type="image"]:active { - box-shadow: inset 2px 2px 2px 1px #4d453e; + box-shadow: inset 0 0 0 1px #efe6e0, inset 3px 3px 3px #4d453e; mix-blend-mode: multiply; filter: sepia(100%) hue-rotate(340deg); -webkit-filter: sepia(100%) hue-rotate(340deg); @@ -682,15 +697,15 @@ _:-ms-lang(x), .snarkTorrentAction { margin-left: 6px !important; } -.snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded { +.snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded, .peerinfo .snarkTorrentStatus { font-size: 8pt; font-weight: bold; padding: 0 3px; + line-height: 120% !important; } .snarkTorrentDownloaded { color: #439 !important; - line-height: 88%; text-align: center !important; padding: 2px; vertical-align: middle; @@ -713,15 +728,9 @@ _:-ms-lang(x), .snarkTorrentAction { font-size: 8pt; } -/* -.snarkTorrentOdd:hover, .snarkTorrentEven:hover { - box-shadow: inset 0 0 1px 0 #4d453e; -} -*/ - -.snarkTorrentOdd td, .snarkTorrentEven td, .snarkTorrentInfo td { - border-top: 1px outset #efefef !important; - border-bottom: 1px outset #efefef !important; +.snarkTorrentOdd td, .snarkTorrentEven td, .snarkTorrentInfo td, .ParentDir { + border-top: 1px outset #fff5ef !important; + border-bottom: 1px outset #efe8e0 !important; } .snarkTorrentOdd:last-child td, .snarkTorrentEven:last-child td { @@ -729,7 +738,7 @@ _:-ms-lang(x), .snarkTorrentAction { } table.snarkTorrents tbody tr:hover, table.snarkDirInfo tbody tr:hover { - background: #cfbda8 !important; + background: #f9efcf !important; } .snarkDirInfo tr:hover .snarkFileStatus img { @@ -747,12 +756,11 @@ table.snarkTorrents tbody tr:hover, table.snarkDirInfo tbody tr:hover { } .snarkTorrentEven + .snarkTorrentEven:nth-child(even) td, .snarkTorrentOdd + .snarkTorrentOdd:nth-child(even) td, .snarkTorrentEven + .snarkTorrentEven:nth-child(odd) td, .snarkTorrentOdd + .snarkTorrentOdd:nth-child(odd) td { - padding: 3px 0 !important; + padding: 3px 3px 3px 0 !important; } .snarkTorrents td[colspan="4"], .snarkTorrents td[colspan="10"] { text-align: left; - word-spacing: 0.2em; } .snarkTorrents td[colspan="10"] { @@ -760,18 +768,32 @@ table.snarkTorrents tbody tr:hover, table.snarkDirInfo tbody tr:hover { white-space: normal; } -.snarkTorrents td[colspan="4"] tt { - margin-left: -1px; - margin: 0 2px 0 -16px; +.snarkTorrents tt { + background: #313; + background: #7F654F; + color: #fff; + padding: 2px 3px; + border-radius: 2px; + opacity: 0.8; + letter-spacing: 0.1em; +} + +.peerinfo tt { + margin: 0 1px; } .snarkFileIcon { width: 16px; } -.snarkFileIcon img { +.snarkFileIcon img, .snarkFileIcon img:hover { filter: none; -webkit-filter: none; + opacity: 0.6; +} + +.snarkFileIcon a img, .snarkFileIcon a:hover img { + opacity: 1; } td.snarkFileIcon:first-child { @@ -782,6 +804,7 @@ td.snarkFileIcon:first-child { padding: 4px 0 !important; text-align: left !important; font-size: 8pt !important; + font-weight: bold; } .snarkFileSize { @@ -791,17 +814,19 @@ td.snarkFileIcon:first-child { } .snarkFileStatus { - padding: 4px 5px 4px 15px; + padding: 4px 5px; text-align: center; font-style: italic; font-size: 8pt; text-align: left; + white-space: nowrap; } .snarkTorrentETA { font-weight: bold; font-style: italic; color: #505 !important; + line-height: 120%; } .snarkTorrentInfo img { @@ -827,27 +852,46 @@ td.snarkFileIcon:first-child { } .snarkTorrentInfo th:first-child { - background: url(images/file.png) center center no-repeat, linear-gradient(to bottom, #efefef, #cfc7c2); - background-size: 14px 16px, 100% 100%; + background: url(images/file.png) left 7px center no-repeat, linear-gradient(to bottom, #efefef, #cfc7c2); + background-size: auto 16px, 100% 100%; + background-blend-mode: luminosity; } .snarkTorrentInfo th:first-child, .snarkTorrentInfo td:first-child { width: 20px; text-align: left; - padding: 2px 0 2px 5px !important; + padding: 2px 3px 2px 5px !important; } .snarkTorrentInfo { margin-bottom: 2px !important; + border-collapse: separate; } -.snarkTorrentInfo tr:last-child { +.snarkTorrentInfo tr:first-child th { + border-top: none; +} + +#torrentInfoControl { border-top: 1px solid #6f533e; + background: linear-gradient(to bottom, #efefef, #cfc7c2); +} + +#torrentInfoControl td { + border-bottom: none !important;; + background: linear-gradient(to bottom, #efefef, #cfc7c2); + text-align: right !important; + padding-right: 8px !important; } .snarkDirInfo { margin-top: 10px !important; margin-bottom: 0; + border-collapse: separate; +} + +.snarkDirInfo tr:first-child th { + border-top: none !important; } .snarkDirInfo thead img { @@ -855,6 +899,10 @@ td.snarkFileIcon:first-child { padding: 0 3px !important; } +.snarkTorrentInfo, .snarkDirInfo, .resourceError, .snarkTorrents { + box-shadow: 0 0 2px 1px rgba(77, 69, 62, 0.5); +} + thead img.disable, img.disable:hover { opacity: 0.4; } @@ -869,15 +917,34 @@ thead img.disable, img.disable:hover { padding: 2px 0; } -.snarkDirInfo .headerpriority { - text-align: right !important; - vertical-align: middle; - padding: 5px !important; +.snarkDirInfo .ParentDir a img { + padding-right: 3px; } -th[colspan="4"] + .headerpriority { +.snarkDirInfo .headerpriority { + text-align: center !important; + vertical-align: middle; + padding: 5px !important; + width: 160px +} + +#setPriority .headerpriority { text-align: right !important; - padding: 14px 5px 12px !important; + padding: 5px !important; + border-bottom: none; +} + +#setPriority .headerpriority, #torrentInfoControl td { + box-shadow: inset 0 0 0 1px #efe8e0; + border-top: 1px solid #6f533e !important; +} + +#torrentInfoStats td { + border-bottom: none !important; +} + +#setPriority input.disabled, #setPriority a.controld { + display: none; } .choked { @@ -905,23 +972,36 @@ th[colspan="4"] + .headerpriority { .snarkAddInfo { font-size: 8pt; - line-height: 130% !important; + display: inline-block; + margin-top: 7px; + background: url(images/infocircle.png) left center no-repeat; + background-size: 16px auto; + padding-left: 20px; + min-height: 16px; } #trackerselect { width: 100% !important; } +#trackerselect tr:first-child td { + font-weight: bold; + padding-top: 7px; + padding-bottom: 7px; +} + #trackerselect td { white-space: nowrap !important; } #trackerselect td:nth-child(2), #trackerselect td:nth-child(3) { - max-width: 60px !important; + min-width: 60px !important; } -#trackerselect tr:first-child { +.trackerconfig tr:first-child { font-weight: bold; + -webkit-filter: drop-shadow(0 0 1px #aaa); + filter: drop-shadow(0 0 1px #aaa); } #trackerselect td:first-child { @@ -932,36 +1012,53 @@ th[colspan="4"] + .headerpriority { font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif; font-size: 12pt !important; font-weight: bold; + font-variant: small-caps !important; padding: 4px 15px 2px 12px; margin: 0 0 -3px !important; letter-spacing: 0.1em; border: 1px solid #111; border-top: 0; - background: #ffb url('images/bling.png') repeat-x scroll center center; - background: linear-gradient(to bottom, #efefef 0%, #efefef 51%, #cfc7c2 52%, #cfc7c2 100%); - background: linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); - font-variant: small-caps !important; - color: #2f1500; - box-shadow: 0 0 2px #4d453e, inset 0 0 0 1px #fff; + background: #fff7ef; + background: linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, rgba(207, 193, 181, 0.6) 52%), repeating-linear-gradient(135deg, #75604E 1px, #A09286 1px, #BFAFA2 2px); + color: #444039; + box-shadow: 0 0 2px #4d453e, inset 0 0 0 1px #efe6e0; display: inline-block; - min-width: 200px; + min-width: 220px; vertical-align: middle; text-shadow: 0 0 1px #fff5ef; } .snarkConfigTitle:hover, label.toggleview:hover { - background: #fff url('images/bling2.png') repeat-x scroll center center; + background: #ffeadf; background: linear-gradient(to bottom, #ffeadf 0%, #ffeadf 51%, #cfb6a8 52%, #cfb6a8 100%); } .snarkConfigTitle:active, label.toggleview:active { - box-shadow: 0 0 2px #4d453e, inset 0 0 0 1px #fff, inset 2px 2px 3px 1px #555; + box-shadow: 0 0 2px #4d453e, inset 0 0 0 1px #fff, inset 2px 2px 3px 1px #59513B; } .snarkConfigTitle { padding-top: 3px !important; } +.configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active { + background: #f2eeed !important; + background: radial-gradient(circle at left bottom, #F9F8F2, #cfc7c2 400px) !important; + display: block; + margin: 0 -11px !important; + border-radius: 2px 2px 0 0; + padding: 5px 8px 3px !important; + font-variant: normal; + text-transform: uppercase; + font-size: 11pt !important; + box-shadow: inset 0 0 0 1px #efe6e0; + text-align: left; +} + +.iframed .configsectionpanel .snarkConfigTitle, .iframed .configsectionpanel .snarkConfigTitle:hover, .iframed .configsectionpanel .snarkConfigTitle:active { + border-radius: 0; +} + @media screen and (-webkit-min-device-pixel-ratio:0) { .snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active { @@ -978,22 +1075,29 @@ _:-ms-lang(x), .snarkConfigTitle, .snarkConfigTitle a, label.toggleview, .snarkConfigTitle a, label.toggleview { color: #930 !important; + color: #3F271B !important; text-shadow: 0 0 1px #fff5ef; } .snarkConfigTitle a:hover, label.toggleview:hover, .snarkConfigTitle a:focus, label.toggleview:focus { color: #df0072 !important; - color: #f60 !important; + color: #930 !important; } -.snarkConfigTitle a:active, label.toggleview:active { - color: #f30 !important; + +.snarkConfigTitle a:active, .snarkConfigTitle a:visited:active, label.toggleview:active { + color: #603110 !important; } .snarkConfigTitle img, label.toggleview img { margin: 1px -2px 3px 0; filter: drop-shadow(0 0 1px #7f6c5f) !important; -webkit-filter: drop-shadow(0 0 1px #7f6c5f) !important; + mix-blend-mode: luminosity; +} + +.snarkConfigTitle:hover img, label.toggleview:hover img, .snarkConfigTitle:focus img, label.toggleview:focus img { + mix-blend-mode: normal; } .snarkConfig { @@ -1021,7 +1125,8 @@ hr { hr.debug { width: 100%; - margin: 2px 0; + margin: 5px 0; + background: linear-gradient(to right, #6f533e 40%, #9f8877); } hr.debug:nth-child(n+7) { @@ -1038,56 +1143,55 @@ hr.debug:nth-child(n+7) { } } -a:link { - color: #f30; - text-decoration: none; - font-weight: bold; - word-wrap: break-word; -} +/* buttons & inputs */ -a:visited { - color: #f60; - text-decoration: none; - font-weight: bold; -} - -a:hover, a:focus { - color: #cf0f00; - font-weight: bold; - filter: none; - -webkit-filter: none; -} - -a:active { - color: #ff007c !important; +.script { + display: inline-block; + vertical-align: top !important; } a.control, input[type="submit"], input[type="reset"] { font: 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif; font-weight: bold; background-size: 14px 14px, 100% 100% !important; + box-shadow: inset 0 0 0 1px #efe6e0, 0 0 1px 0 #4d453e; + box-shadow: inset 0 0 0 1px #efe6e0, 0 0 1px 0 rgba(77, 69, 62, 0.7); + display: inline-block; } a.control, a.controld { background: linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%); - border: 1px solid #2f1a09; + background-size: 100% 100% !important; + border: 1px solid #4F3927; border-radius: 2px; color: #2f1500; font-weight: bold; - margin: 3px 2px !important; - padding: 5px 4px 5px 2px; + margin: 2px 4px 2px 3px !important; + padding: 5px 6px 5px 2px; white-space: nowrap; + display: inline-block; } a.controld { color: #f60; font-weight: normal; - display: none; +/* display: none;*/ } a.control:hover, a.control:focus { - color: #f60; + color: #930 !important; background: linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); + filter: drop-shadow(0px 0 1px #f60); + -webkit-filter: drop-shadow(0px 0 1px #f60); +} + +a.control img, a.controld img { + height: 14px; + width: 14px; + vertical-align: top; + mix-blend-mode: normal !important; + filter: none !important; + -webkit-filter: none !important; } a.control:active { @@ -1120,20 +1224,21 @@ input.r { input[type=submit] { color: #2f1500; - border: 1px solid #2f1a09; - box-shadow: inset 0 0 0 1px #fff; + border: 1px solid #4F3927; background-blend-mode: luminosity; } -input[type=submit]:hover, a.control:hover { - color: #930; - box-shadow: inset 0 0 3px 0 #a08160; +input[type=submit]:hover, input[type=submit]:focus, a.control:hover, a.control:focus { + color: #930 !important; + border: 1px solid #2f1a09 !important; + box-shadow: inset 0 0 0 1px #fff5ef, 0 0 1px 0 #4d453e; background-blend-mode: normal; + filter: drop-shadow(0 0 1px rgba(153, 51, 0, 0.6)); } input[type=submit]:active, a.control:active { - color: #f30 !important; - box-shadow: inset 2px 2px 2px 1px #3f362f; + color: #603110 !important; + box-shadow: inset 0 0 0 1px #efe6e0, inset 2px 2px 2px 1px #3f362f; } input[type=image] { @@ -1150,11 +1255,13 @@ input[type=image]:hover { input[type=text], input.r, textarea, input[name="nofilter_dataDir"] { vertical-align: middle; padding: 2px 4px; + box-shadow: inset 0 0 0 1px #f9f5f2, 0 0 0 1px rgba(186, 160, 143, 0.6); } -input[type=text]:active, input[type=text]:focus, input.r:focus, textarea:focus, input[name="nofilter_dataDir"]:focus { +input[type=text]:focus, input[type=text]:focus, input.r:focus, textarea:focus, input[name="nofilter_dataDir"]:focus { background: #fffcdf; color: #5f1227; + color: #5f1227; text-shadow: none; transition: ease filter 0.3s 0s; } @@ -1173,15 +1280,22 @@ input.default { display: none; } -input.disabled, input.disabled:hover { - background-color: #989; - border: 1px inset #bbb; - color: #f60; +input.disabled, input.disabled:hover, input.disabled:focus, input.disabled:active, a.controld, a.controld:hover, a.controld:focus, a.controld:active { font-weight: normal; - display: none; + opacity: 0.6; + color: #2f1500 !important; + box-shadow: none; + cursor: not-allowed; + background-blend-mode: luminosity !important; + filter: none; + -webkit-filter: none; } -input.accept { +a.controld img, a.controld:hover img, a.controld:focus img, a.controld:active img { + mix-blend-mode: luminosity !important; +} + +input.accept, input.disabled[name="savepri"] { background: url(images/accept.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%); padding: 5px 5px 5px 21px !important; } @@ -1235,10 +1349,9 @@ input.reload:hover, input.reload:focus { background: url(images/restore.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); } -input.reload[name="recheck"] { +input.reload[name="recheck"], input.disabled[name="recheck"] { background: url(images/recheck.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%); padding: 5px 5px 5px 21px !important; - float: right; margin: 6px 2px; } @@ -1249,7 +1362,6 @@ input.reload[name="recheck"]:hover, input.reload[name="recheck"]:focus { input.starttorrent { background: url(images/next.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%); padding: 5px 5px 5px 18px !important; - float: right; margin: 6px; } @@ -1260,14 +1372,28 @@ input.starttorrent:hover, input.starttorrent:focus { input.stoptorrent { background: url(images/btn_stop.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%); padding: 5px 5px 5px 21px !important; - float: right; - margin: 6px; + margin: 4px 5px; } input.stoptorrent:hover, input.stoptorrent:focus { background: url(images/btn_stop.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%); } +input[name^="action_"] { + border-radius: 3px; + filter: sepia(100%) hue-rotate(340deg); + -webkit-filter: sepia(100%) hue-rotate(340deg); + max-width: 40px; + margin-left: 1px; +} + +input[name^="action_"]:hover, input[name^="action_"]:focus { + filter: sepia(100%) hue-rotate(340deg) saturate(120%) drop-shadow(0 0 1px #f60); + -webkit-filter: sepia(100%) hue-rotate(340deg) saturate(120%) drop-shadow(0 0 1px #f60); + opacity: 1; + box-shadow: 0 0 1px 0 #f60; +} + select { background: #efe6e0 url(images/dropdown.png) right center no-repeat !important; color: #2f1500; @@ -1275,31 +1401,32 @@ select { font-weight: bold; padding: 5px 14px 5px 5px; border-radius: 2px; - border: 1px solid #000; - margin: 2px 0 2px 5px; + border: 1px solid #2f1500; + margin: 2px 0 2px 4px; min-width: 100px; -moz-appearance: none; -webkit-appearance: none; + box-shadow: inset 0 0 0 1px #f9f5f2, 0 0 0 1px rgba(186, 160, 143, 0.6); } -select + select { - margin-left: -12px; +select option { + font-weight: bold; } select:focus { background: #fffcdf url(images/dropdown_hover.png) right center no-repeat !important; - color: #f60 !important; + color: #5f1227 !important; } @-moz-document url-prefix() { select option { background: #fffcdf; box-shadow: inset 0 0 20px 20px #fffcdf; - color: #2f1500; + color: #5f1227; } select option:hover, select option:checked { - box-shadow: inset 0 0 20px 20px #f60; + box-shadow: inset 0 0 20px 20px #5f1227; background: #f60; } } @@ -1317,7 +1444,7 @@ textarea, input[name="nofilter_dataDir"] { border-radius: 2px; border: 1px solid #2f1500; font-size: 8pt; - margin-left: 5px; + margin-left: 4px; font-family: "Bitstream Vera Sans", Verdana, Helvetica, sans-serif; width: 70%; } @@ -1326,6 +1453,11 @@ textarea[name="i2cpOpts"] { overflow: hidden; } +textarea[name="i2cpOpts"]:focus, .r:focus, input[type="text"]:focus, select:focus, input[name="nofilter_dataDir"]:focus, input[type="checkbox"]:focus, input[type="radio"]:focus { + box-shadow: 0 0 1px rgba(223, 0, 103, 0.6); + transition: ease box-shadow 0.3s 0s, ease filter 0.3s 0s; +} + textarea { resize: none; height: 26px; @@ -1335,14 +1467,16 @@ textarea { margin-top: 2px; } +/* end buttons & inputs */ + img { border: none; margin: 0 2px; vertical-align: middle; opacity: 1.0; line-height: 100%; - filter: drop-shadow(0 0 1px #777); - -webkit-filter: drop-shadow(0 0 1px #777); + filter: drop-shadow(0 0 1px rgba(117, 114, 106, 0.6)); + -webkit-filter: drop-shadow(0 0 1px rgba(117, 114, 106, 0.6)); } img:hover { @@ -1352,8 +1486,8 @@ img:hover { } a:hover img, a:focus img { - filter: drop-shadow(0 0 1px #f60); - -webkit-filter: drop-shadow(0 0 1px #f60); + filter: drop-shadow(0 0 1px #df0067); + -webkit-filter: drop-shadow(0 0 1px #df0067); mix-blend-mode: normal; } @@ -1373,105 +1507,50 @@ img[src$="details.png"] { mix-blend-mode: normal !important; } -input[name^="action_"] { - border-radius: 3px; - filter: sepia(100%) hue-rotate(340deg); - -webkit-filter: sepia(100%) hue-rotate(340deg); - max-width: 40px; - margin-left: 1px; -} - -input[name^="action_"]:hover, input[name^="action_"]:focus { - filter: sepia(100%) hue-rotate(340deg) saturate(120%) drop-shadow(0 0 1px #f60); - -webkit-filter: sepia(100%) hue-rotate(340deg) saturate(120%) drop-shadow(0 0 1px #f60); - opacity: 1; - box-shadow: 0 0 1px 0 #f60; +.newtorrentsection, .addtorrentsection, .configsection, .configsectionpanel, .section, .mainsection { + background: #dfd7d1; + background-blend-mode: luminosity; + margin: 0 0 10px 0; + padding: 0 10px; + border: 1px solid #1f1400; + border-radius: 2px; + box-shadow: inset 0 0 0 1px #efe6e0, 0 0 1px 0 #4f3d36; + color: #ddd; + text-align: center; + word-wrap: break-word; } .section, .mainsection { - margin: 0 0 10px 0; padding: 10px; - border: 1px solid #001; - color: #001; - border-radius: 2px; - box-shadow: inset 0 0 3px 0 #a08160; - box-shadow: inset 0 0 2px 0 #fff, 0 0 1px 0 #4f3d36; - word-wrap: break-word; - text-align: center; background: #dfd7d1; background: linear-gradient(to bottom, #dfd7d1 0%, #cfc7c2 100%); - opacity: 1 !important; } .newtorrentsection { - margin: 0 0 10px 0; - padding: 0 10px; - border: 1px solid #001; - text-align: center; - color: #ddd; - border-radius: 2px; - box-shadow: inset 0 0 3px 0 #a08160; - box-shadow: inset 0 0 2px 0 #fff, 0 0 1px 0 #4f3d36; - word-wrap: break-word; - background: #ffd url('images/snark_create.png') no-repeat scroll right center; - background: url('images/snark_create.png') no-repeat scroll right center, linear-gradient(to bottom, #dfd7d1 0%, #cfc7c2 100%); + background: #dfd7d1 url(images/snark_create.png) no-repeat scroll right center; + background: url(images/snark_create.png) no-repeat scroll right center, linear-gradient(to bottom, #dfd7d1 0%, #cfc7c2 100%); background-size: 80px 80px, 100% 100%; - opacity: 1.0; - background-blend-mode: luminosity; } .addtorrentsection { - margin: 0 0 10px 0; - padding: 0 10px; - border: 1px solid #001; - text-align: center; - color: #ddd; - border-radius: 2px; - box-shadow: inset 0 0 3px 0 #a08160; - box-shadow: inset 0 0 2px 0 #fff, 0 0 1px 0 #4f3d36; - word-wrap: break-word; - background: #ffd url('images/snark_add.png') no-repeat scroll 99% center; - background: url('images/snark_add.png') no-repeat scroll 99% center, linear-gradient(to bottom, #dfd7d1 0%, #cfc7c2 100%); + background: #dfd7d1 url(images/snark_add.png) no-repeat scroll right 10px center; + background: url(images/snark_add.png) no-repeat scroll right 10px center, linear-gradient(to bottom, #dfd7d1 0%, #cfc7c2 100%); background-size: 61px 61px, 100% 100%; - opacity: 1.0; - background-blend-mode: luminosity; } .configsection { - margin: 0 0 10px 0; padding: 0 10px 13px 10px; - border: 1px solid #000; - color: #ddd; - border-radius: 2px; - box-shadow: inset 0 0 3px 0 #a08160; - box-shadow: inset 0 0 2px 0 #fff, 0 0 1px 0 #4f3d36; - word-wrap: break-word; - text-align: center; - background: #dfd7d1; background: url(images/configuration.png) 102% center no-repeat, linear-gradient(to bottom, #dfd7d1 0%, #cfc7c2 100%); background-size: 84px 82px, 100% 100%; - font-weight: bold; - background-blend-mode: luminosity; } .configsectionpanel { - margin: 0 0 10px 0; - padding: 0 10px; - border: 1px solid #000; - color: #ddd; - border-radius: 2px; - box-shadow: inset 0 0 3px 0 #a08160; - box-shadow: inset 0 0 2px 0 #fff, 0 0 1px 0 #4f3d36; - word-wrap: break-word; - text-align: center; - background: #dfd7d1 url('/themes/snark/ubergine/images/configuration.png') no-repeat scroll right center; - background: url('/themes/snark/ubergine/images/configuration.png') no-repeat scroll right center, linear-gradient(to bottom, #dfd7d1 0%, #cfc7c2 100%); + background: #dfd7d1 url(/themes/snark/ubergine/images/configuration.png) no-repeat scroll right center; + background: url(/themes/snark/ubergine/images/configuration.png) no-repeat scroll right center, linear-gradient(to bottom, #dfd7d1 0%, #cfc7c2 100%); background-size: 84px 82px, 100% 100%; - font-weight: bold; - background-blend-mode: luminosity; } -.configsectionpanel td, .snarkNewTorrent td { +.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; } @@ -1494,8 +1573,13 @@ input[name^="action_"]:hover, input[name^="action_"]:focus { font-weight: bold; } +.addtorrentsection tr:first-child td:last-child { + white-space: nowrap; +} + .addtorrentsection input[type="text"], .newtorrentsection input[type="text"] { - width: 80%; + width: 75%; + width: calc(100% - 200px); } .snarkConfig tr:nth-last-child(4) td, .trackerconfig tr:nth-last-child(4) td { @@ -1523,9 +1607,9 @@ input[name^="action_"]:hover, input[name^="action_"]:focus { color: #ddd !important; } +/*) .configsection table { color: #ffb; - opacity: 1; } .configsection a { @@ -1533,16 +1617,17 @@ input[name^="action_"]:hover, input[name^="action_"]:focus { } .configsection a:hover { - color: #f90; + color: #d30; text-decoration: none; } +*/ code, tt { font-size: 8pt; color: #313; padding: 0 1px; font-weight: bold; - font-family: "DejaVu Sans Mono", "Droid Sans Mono", "Lucida Console", Courier, mono; + font-family: "DejaVu Sans Mono", "Droid Sans Mono", "Lucida Console", Courier, monospace; } .routerdown { @@ -1550,6 +1635,7 @@ code, tt { } .trackerconfig { + margin-top: 11px; text-align: left !important; border-collapse: separate; border-spacing: 0; @@ -1612,8 +1698,8 @@ code, tt { } .optbox:hover, input[type="radio"]:hover, input[type="checkbox"]:hover, .optbox:focus, input[type="radio"]:focus, input[type="checkbox"]:focus { - filter: sepia(50%) invert(80%) hue-rotate(150deg) drop-shadow(0 0 2px #f60); - -webkit-filter: sepia(50%) invert(80%) hue-rotate(150deg) drop-shadow(0 0 2px #f60); + filter: sepia(50%) invert(80%) hue-rotate(150deg) drop-shadow(0 0 2px #df0067); + -webkit-filter: sepia(50%) invert(80%) hue-rotate(150deg) drop-shadow(0 0 2px #df0067); } /* toggle create/add panel view */ @@ -1659,11 +1745,7 @@ code, tt { } .toggleview, .snarkConfigTitle a:visited { - color: #f60; -} - -.toggleview:active, .snarkConfigTitle a:active { - color: #f30 !important; + color: #930; } .toggleview img:hover, .toggleview:hover img, .snarkConfigTitle a:hover img { @@ -1672,11 +1754,215 @@ code, tt { -webkit-filter: drop-shadow(0 0 1px #f60); } +.toggleview:active, .snarkConfigTitle a:active { + color: #603110 !important; +} + .toggleview img:active, .toggleview:active img, .snarkConfigTitle a:active img { transform: rotate(90deg); transition: ease transform 0.3s 0s; } +/* end panels toggle */ + +/* debug */ + +.debuginfo td:first-child { + background: url(images/debuginfo.png) center center no-repeat; + background-size: 14px 14px; +} + +.debuginfo b { + text-transform: capitalize; + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; +} + +.from, .to { + font-family: sans-serif; + font-size: 12pt; + margin: -1px 0 0 0; + display: inline-block; +} + +.debugConnStat { + display: inline-block; + white-space: nowrap; + font-family: "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace !important; + margin-right: 5px; +} + +.debugConnstat b { + color: #2f1500; +} + +.debugConnStat, .debugRequests { + color:#5F3117; + font-weight: bold; +} + +.debugRequests { + font-family: "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace !important; + margin-left: 4px; +} + +.debugConnection { + display: inline-block; + line-height: 100%; + color: #030; + font-weight: bold; + margin: 2px 3px !important; +} + +/* end debug */ + +.peerinfo td:first-child { + background: url(images/peer.png) center center no-repeat; +} + +.peerinfo td, .debuginfo td { + padding-top: 5px !important; + padding-bottom: 5px !important; +} + +#totals { + display: inline-block; + margin: 2px 0 2px 6px; + font-weight: bold; +} + +/* Resource Errors */ + +.resourceError { + border: 1px solid #6f533e; + margin-bottom: 0; +} + +.resourceError th { + background: url(/themes/console/images/info/errortriangle.png) left 10px center no-repeat, linear-gradient(to bottom, #efefef, #cfc7c2); + background-size: 24px auto, 100% 100%; + padding: 10px 10px 10px 40px; +} + +.mainsection .resourceError td { + padding: 10px !important; + font-size: 10pt !important; +} + +.resourceError tr:nth-child(odd) { + background: #dfd6d1; +} + +.resourceError tr:nth-child(even) { + background: #efe6e0; +} + +#DoesNotExist { + margin-top: 10px; +} + +/* end Resource Errors */ + +.priorityHigh { + background: url(/i2psnark/.resources/icons/clock_red.png) left 28px center no-repeat; + display: inline-block; + width: 48px; + color: transparent; +} + +.priorityNormal { + background: url(/i2psnark/.resources/icons/clock.png) left 28px center no-repeat; + display: inline-block; + width: 48px; + color: transparent; +} + +.prioritySkip { + background: url(/i2psnark/.resources/icons/cancel.png) left 26px center no-repeat; + display: inline-block; + width: 48px; + color: transparent; +} + +/* configs */ + +#configs { + border-collapse: separate; +} + +#configs td:nth-child(2) { + white-space: nowrap; +} + +#configs td:first-child { + min-width: 240px !important; + font-weight: bold; +} + +#configs tr:nth-last-child(2) td, .trackerconfig tr:nth-last-child(2) td { + border-top: 1px solid #efe6e0 !important; +} + +#configs tr:nth-last-child(4) td, .trackerconfig tr:nth-last-child(4) td { + border-bottom: 1px solid #4f3d36 !important; +} + +td#bwHelp { + background: url(images/infocircle.png) left 10px center no-repeat; + background-size: 16px auto; + padding-left: 30px !important; + width: 90%; + line-height: 100%; +} + +td#bwHelp a { + display: inline-block; + white-space: nowrap; + font-style: normal; +} + +/* end configs */ + +.knownTracker input[type="radio"], .knownTracker input[type="radio"]:hover { + opacity: 0.5 !important; + cursor: not-allowed; + -webkit-filter: sepia(50%) invert(80%) hue-rotate(150deg) !important; + filter: sepia(50%) invert(80%) hue-rotate(150deg) !important; +} + +#filecheck { + display: inline-block; + margin: 5px 0; + background: url(images/progressbar.gif) left center no-repeat; + padding-left: 22px; +} + +#filecheck a { + margin: 8px; +} + +#torrentInfoStats td { + text-align: left !important; +} + +#torrentInfoStats img, .snarkTorrentInfo td:first-child img { + margin: 1px 3px 2px 2px !important; + mix-blend-mode: luminosity; +} + +.snarkTorrentInfo a:hover img { + mix-blend-mode: normal !important; +} + +#torrentInfoStats b { + margin-left: 1px; +} + +#torrentInfoStats span { + white-space: nowrap; + display: inline-block; + margin-right: 3px; +} + /* MS Edge 14+ fix */ _:-ms-lang(x), * { filter: none !important; @@ -1685,21 +1971,146 @@ _:-ms-lang(x), * { /* responsive layout */ -@media screen and (min-width: 1400px) { -body, .snarkTorrents td, .snarkAddInfo, th, td { +@media screen and (max-width: 1000px) { +.snarkTorrents td:nth-child(2) { + white-space: nowrap; + font-weight: bold; +} + +.snarkTorrents td[colspan="10"] { + white-space: normal; +} + +.snarkTorrentStatus b { + display: none; +} + +b.alwaysShow { + display: inline; +} + +.lowersection .snarkConfigTitle, .lowersection .snarkConfigTitle:hover, label.toggleview { + font-size: 12pt !important; + max-width: 220px !important +} + +.configsectionpanel .snarkConfigTitle { + font-size: 10.5pt !important; +} + +.snarkTorrents td:first-child img { + max-height: 16px; +} + +.from, .to { + font-size: 11pt !important; +} + +.snarkTorrents tt { + background: none; + color: #030; +} + +.snarkDirInfo thead img { + max-height: 18px; +} +} + +@media screen and (max-width: 1200px) { +.snarknavbar { + width: calc(100% - 22px); + transition: ease width 0.5s 0.5s; +} + +.snarkRefresh:first-child { + background: url(images/button_snark.png) 12px center no-repeat, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 47%, rgba(207, 193, 181, 0.6) 50%), repeating-linear-gradient(45deg, #75604E 1px, #A09286 1px, #BFAFA2 2px) !important; + background-size: 16px auto, 100% 100%, 100% 100% !important; +} + +.snarkRefresh:first-child:hover, .snarkRefresh:first-child:focus { + background: url(images/button_snark_hover.png) 12px center no-repeat, linear-gradient(to bottom, #ffeadf 0%, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%) !important; + background-size: 16px auto, 100% 100%, 100% 100% !important; +} + +.snarkRefresh:first-child:active { + background: url(images/button_snark_active.png) 12px center no-repeat, linear-gradient(to bottom, #dfb899 0%, #dfb899 47%, #af9178 50%, #af9178 100%) !important; + background-size: 16px auto, 100% 100%, 100% 100% !important; +} + +.snarkTorrentETA { + padding-right: 10px !important; +} + +.dirInfoComplete { + display: none; +} + +#pagenav img { + height: 14px; +} + +.snarkTorrents td:first-child img { + max-height: 17px; +} +} + +@media screen and (min-width: 1000px) { +body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, a.control, input[type="submit"], input[type="reset"], select, button { font-size: 9pt !important; } -.snarkRefresh:link, .snarkAddInfo, .configsectionpanel td, .snarkNewTorrent td { +.snarkRefresh:link { + font-size: 11.5pt; +} + +.peerinfo tt { + display: inline-block; + margin: 1px 3px; +} + +.snarkTorrentName { + padding-left: 1px; +} + +.snarkTorrentStatus { + white-space: nowrap; +} + +.snarkTorrentStatus b { + margin-right: 3px; +} +} + +@media screen and (min-width: 1200px) { +.percentDownloaded { + pointer-events: none; /* hide tooltip */ +} + +.snarkTorrentRateUp, .snarkTorrents th:nth-child(9), .snarkTorrents tfoot th:nth-last-child(2), .snarkTorrents .peerinfo td:nth-last-child(2) { + padding-right: 15px !important; +} + +thead a img, thead img { + max-height: 20px; +} +} + +@media screen and (min-width: 1400px) { +body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, a.control, input[type="submit"], input[type="reset"], select, button, code, #pagenav { font-size: 10pt !important; } -.snarkRefresh:link:first-child { - padding-left: 13px !important; +tt, .snarkTorrents tt, .snarkMessages, textarea { + font-size: 9pt !important; } -tt, .snarkTorrents tt, code, .snarkMessages, input, input[type="submit"], input[type="reset"], select, button, textarea { - font-size: 9pt !important; +.snarkAddInfo, .configsectionpanel td, .snarkNewTorrent td, .configsectionpanel th, +.configsectionpanel td, .snarkNewTorrent td, select, select option, input, textarea, input[name="nofilter_dataDir"] { + font-size: 10pt !important; +} + +.snarkRefresh:link { + font-size: 13pt; } select { @@ -1707,12 +2118,67 @@ select { padding-bottom: 4px; } -select:nth-child(2) { - margin-left: -14px; -} - .snarkTorrentDownloaded { white-space: nowrap; + padding: 0 8px; +} + +.snarkTorrentAction input[type="image"], .snarkTorrents th:last-child input[type="image"] { + padding: 4px !important; + margin: 2px !important; +} + +thead a img, thead img { + max-height: 22px; +} + +.snarkConfigTitle, .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover, label.toggleview { + min-width: 240px !important; + font-size: 12pt !important; +} + +.mainsection td, .peerinfo td { + padding-top: 2px !important; + 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; +} + +.snarkDirInfo td:nth-child(n+2) { + padding-left: 10px; + padding-right: 10px; +} + +tr#torrentInfoStats td { + padding-top: 5px !important; + padding-bottom: 5px !important; +} + +.debugConnection { + margin: 0 4px; + padding: 2px 3px; + font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", Courier, monospace; + font-weight: bold; + background: #967158; + color: #fff; + border-radius: 2px; + display: inline-block; + vertical-align: middle; } }