diff --git a/apps/i2psnark/java/src/org/klomp/snark/dht/DHTTracker.java b/apps/i2psnark/java/src/org/klomp/snark/dht/DHTTracker.java index 784d8e6bff..9b8fb32c52 100644 --- a/apps/i2psnark/java/src/org/klomp/snark/dht/DHTTracker.java +++ b/apps/i2psnark/java/src/org/klomp/snark/dht/DHTTracker.java @@ -140,7 +140,7 @@ class DHTTracker { * Debug info, HTML formatted */ public void renderStatusHTML(StringBuilder buf) { - buf.append("DHT tracker: ").append(_torrentCount).append(" torrents ") + buf.append("DHT tracker: ").append(_torrentCount).append(" torrents ") .append(_peerCount).append(" peers ") .append(DataHelper.formatDuration(_expireTime)).append(" expiration
"); } diff --git a/apps/i2psnark/java/src/org/klomp/snark/dht/KRPC.java b/apps/i2psnark/java/src/org/klomp/snark/dht/KRPC.java index 13bd9569ee..9638893067 100644 --- a/apps/i2psnark/java/src/org/klomp/snark/dht/KRPC.java +++ b/apps/i2psnark/java/src/org/klomp/snark/dht/KRPC.java @@ -682,17 +682,17 @@ public class KRPC implements I2PSessionMuxedListener, DHT { public String renderStatusHTML() { long uptime = Math.max(1000, _context.clock().now() - _started); StringBuilder buf = new StringBuilder(256); - buf.append("

DHT DEBUG

TX: ").append(_txPkts.get()).append(" pkts / ") + buf.append("

DHT DEBUG


TX: ").append(_txPkts.get()).append(" pkts / ") .append(DataHelper.formatSize2(_txBytes.get())).append("B / ") .append(DataHelper.formatSize2(_txBytes.get() * 1000 / uptime)).append("Bps
" + - "RX: ").append(_rxPkts.get()).append(" pkts / ") + "RX: ").append(_rxPkts.get()).append(" pkts / ") .append(DataHelper.formatSize2(_rxBytes.get())).append("B / ") .append(DataHelper.formatSize2(_rxBytes.get() * 1000 / uptime)).append("Bps
" + - "DHT Peers: ").append( _knownNodes.size()).append("
" + - "Blacklisted: ").append(_blacklist.size()).append("
" + - "Sent tokens: ").append(_outgoingTokens.size()).append("
" + - "Rcvd tokens: ").append(_incomingTokens.size()).append("
" + - "Pending queries: ").append(_sentQueries.size()).append("

"); + "DHT Peers: ").append( _knownNodes.size()).append("
" + + "Blacklisted: ").append(_blacklist.size()).append("
" + + "Sent tokens: ").append(_outgoingTokens.size()).append("
" + + "Rcvd tokens: ").append(_incomingTokens.size()).append("
" + + "Pending queries: ").append(_sentQueries.size()).append("


"); _tracker.renderStatusHTML(buf); _knownNodes.renderStatusHTML(buf); return buf.toString(); diff --git a/installer/resources/themes/snark/classic/snark.css b/installer/resources/themes/snark/classic/snark.css index 6081872b5b..28bfdc897c 100644 --- a/installer/resources/themes/snark/classic/snark.css +++ b/installer/resources/themes/snark/classic/snark.css @@ -1125,8 +1125,16 @@ div.percentBarInner.percentBarComplete { font-weight: normal; } -.snarkConfigTitle, -label.toggleview { + +.snarkConfigTitle:hover, label.toggleview:hover { + background: linear-gradient(to bottom, #fff 0%, #ddd 100%) !important; +} + +.snarkConfigTitle:active, label.toggleview:active { + box-shadow: inset 0 0 0 1px #fff, inset 2px 2px 3px 1px #777; +} + +.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle:hover { font-size: 12pt; font-weight: bold; font-variant: small-caps !important; @@ -1226,6 +1234,12 @@ hr.debug:nth-child(n+7) { margin: -10px 0 3px; } +hr.debug:last-child { + height: 0; + margin-bottom: -5px; + margin-top: -15px; +} + a:link { font-weight: normal; text-decoration: none; @@ -1311,6 +1325,7 @@ input[type="submit"], input[type="reset"] { box-shadow: inset 0 0 0 1px #fff; filter: drop-shadow(0 0 1px #ccc); -webkit-filter: drop-shadow(0 0 1px #ccc); + cursor: pointer !important; } input[type="submit"]:hover, input[type="reset"]:hover, @@ -1334,6 +1349,10 @@ input[type="submit"]:active, input[type="reset"]:active { box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px #555; } +input[type="text"], textarea { + cursor: text !important; +} + a.control { vertical-align: middle; } @@ -1407,6 +1426,7 @@ input[name="nofilter_dataDir"] { padding: 5px; resize: none; cursor: text; + overflow: hidden; } thead img, @@ -1454,6 +1474,7 @@ input[type="checkbox"], input[type="radio"] { vertical-align: middle; min-width: 16px; min-height: 16px; + background: none; } input.default { @@ -1482,7 +1503,9 @@ select { color: #333; border: 1px solid #bbb; border-radius: 2px; - background: linear-gradient(to bottom, #fff 0%, #ddd 100%); + background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%); + -moz-appearance: none; + -webkit-appearance: none; box-shadow: inset 0 0 0 1px #fff; } @@ -1492,12 +1515,6 @@ select option { background: #fff; } -@-moz-document url-prefix() { /* target firefox and derivatives only */ -select { - background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%); - -moz-appearance: none; -} - select:hover, select:active { background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important; } @@ -1505,10 +1522,6 @@ select:hover, select:active { select:focus { background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important; box-shadow: 0 0 0 1px #89f; -} -} - -select:focus { color: #000; } @@ -1516,6 +1529,12 @@ select:nth-child(2) { margin-left: -18px; } +@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { +select { + padding: 4px; +} +} + textarea { font: 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono; font-weight: bold; @@ -1530,6 +1549,10 @@ textarea:focus { color: #22f !important; } +textarea[name="i2cpOpts"] { + overflow: hidden; +} + img { line-height: 100%; margin: 0 3px 1px 3px; @@ -1647,6 +1670,10 @@ div.configsectionpanel td:first-child { min-width: 50px; } +.trackerconfig th:first-child { + background: url(/themes/snark/ubergine/images/nuke.png) center right 8px no-repeat, linear-gradient(to bottom, #fff, #eef); +} + .trackerconfig th:last-child, .trackerconfig td:last-child { padding-left: 10px !important; } @@ -1662,8 +1689,6 @@ div.configsectionpanel td:first-child { .snarkTorrentNoneLoaded td { color: #0c153d !important; - border-right: 1px solid #040; - border-left: 1px solid #040; background: #fff; } @@ -1982,4 +2007,10 @@ body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_ .snarkMessages li, .snarkTorrents tt { font-size: 9pt; } -} \ No newline at end of file +} + +/* MS Edge 14+ fix */ +_:-ms-lang(x), * { + filter: none !important; + -webkit-filter: none !important; +} diff --git a/installer/resources/themes/snark/dark/snark.css b/installer/resources/themes/snark/dark/snark.css index 88d10a5693..5466f592ea 100644 --- a/installer/resources/themes/snark/dark/snark.css +++ b/installer/resources/themes/snark/dark/snark.css @@ -764,7 +764,11 @@ td:first-child { padding: 1px 1px 1px 1px !important; margin: 0 !important; text-align: center !important; - width: 60px; + width: 40px !important; +} + +_:-ms-lang(x), .snarkTorrentAction { /* MS Edge 14+ wrap fix */ + width: 72px !important; } .snarkTorrentAction img { @@ -777,11 +781,6 @@ td:first-child { opacity: 1; } -td.snarkTorrentAction { - min-width: 66px; - width: 66px; -} - .snarkTorrentNoneLoaded { background: #000; font-size: 8.5pt; @@ -1318,6 +1317,7 @@ textarea[name="i2cpOpts"], input[name="nofilter_dataDir"] { padding: 3px; width: 500px; resize: none; + overflow: hidden; } thead img, thead img:hover { @@ -1345,9 +1345,11 @@ input[type=radio] { padding: 2px; margin: 0 3px 0 8px; vertical-align: bottom; + background: none; } input[type="checkbox"], input[type="radio"], input[type="checkbox"]:disabled:hover, input[type="radio"]:disabled:hover { + background: none; filter: invert(100%) sepia(100%) hue-rotate(70deg) saturate(200%); /* colorize radios and checkboxes */ -webkit-filter: invert(100%) sepia(100%) hue-rotate(70deg) saturate(200%); } @@ -1373,7 +1375,10 @@ input[size="85"] { } select { - background: #000 !important; + background: #000 url(images/dropdown.png) right center no-repeat !important; + background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #020 0%, #000 20%, #000 80%, #010 100%) !important; + -moz-appearance: none; + -webkit-appearance: none; color: #494; font: 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; font-weight: bold; @@ -1405,23 +1410,20 @@ select:hover { box-shadow: inset 0 1px 1px 0 #ee9; } -@-moz-document url-prefix() { /* target firefox and derivatives only */ - -select { - background: #000 url(images/dropdown.png) right center no-repeat !important; - background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #020 0%, #000 20%, #000 80%, #010 100%) !important; - -moz-appearance: none; -} - 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 { + padding: 4px; +} +} + textarea { background: #000; color: #bb7; @@ -1550,6 +1552,10 @@ table#trackerselect { min-width: 50px; } +.trackerconfig th:first-child { + background: url(/themes/snark/ubergine/images/nuke.png) center right 8px no-repeat, linear-gradient(to bottom, #010, #000); +} + .trackerconfig th:last-child, .trackerconfig td:last-child { padding-left: 10px !important; } diff --git a/installer/resources/themes/snark/light/snark.css b/installer/resources/themes/snark/light/snark.css index aaac04add7..4494a00d8a 100644 --- a/installer/resources/themes/snark/light/snark.css +++ b/installer/resources/themes/snark/light/snark.css @@ -497,6 +497,11 @@ tfoot tr:nth-child(n+1) { text-align: left; } +.snarkTorrents td[colspan="4"], .snarkTorrents td[colspan="10"] { + text-align: left !important; + padding-left: 0; +} + .snarkTorrents th[colspan="6"]::first-line { font-weight: bold; } @@ -598,12 +603,16 @@ td:first-child { background: #eef; } -.snarkTorrentNoneLoaded { - background: #fff; - font-size: 8.5pt; +.snarkTorrentNoneLoaded, .snarkTorrentNoneLoaded:hover { + background: #fff !important; + background: linear-gradient(to right, #eef, #fff, #eef) !important; + box-shadow: inset 0 0 1px #fff; + border-bottom: 1px solid #7778bf !important; + padding: 10px !important; + font-size: 9pt; font-weight: bold; text-align: center !important; - color: #bbb !important; + color: #272e3f !important; } .snarkTorrentStatus { @@ -778,8 +787,9 @@ td:first-child { cursor: pointer; } -.snarkConfigTitle a:active, .toggleview:active { +.snarkConfigTitle:active, .toggleview:active { color: #f30 !important; + box-shadow: inset 0 0 0 1px #fff, inset 2px 2px 3px 1px #555; } .snarkConfigTitle img, .toggleview img { @@ -803,6 +813,10 @@ td:first-child { color: #446; } +.configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover { + color: #31334f !important; +} + .snarkConfig { font-size: 10pt; width: 100%; @@ -1003,6 +1017,7 @@ input[type=image], thead img { border: none; margin: 0 2px; opacity: 1; + max-height: 22px; filter: hue-rotate(45deg); -webkit-filter: hue-rotate(45deg); } @@ -1039,6 +1054,15 @@ input[type="text"], input.r, input[name="nofilter_dataDir"], textarea, select { padding: 5px 4px !important; } +textarea[name="i2cpOpts"] { + overflow: hidden; +} + +input[name="nofilter_dataDir"], textarea[name="i2cpOpts"] { + width: 60%; + min-width: 500px !important; +} + input[type="radio"] { padding: 2px; margin: 0 3px 0 8px; @@ -1050,6 +1074,7 @@ input[type="radio"], input[type="checkbox"], .optbox { width: 16px; height: 16px; box-shadow: none; + background: none; } input.default { @@ -1090,7 +1115,7 @@ select:active, select option { } select + select { - margin-left: -20px; + margin-left: -18px; } textarea { @@ -1292,9 +1317,9 @@ code, tt { .trackerconfig th:first-child { border-radius: 2px 0 0 2px; border-left: 1px solid #339; + background: url(/themes/snark/ubergine/images/nuke.png) center right 8px no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 51%, #eef 100%); } - .trackerconfig th:last-child { border-radius: 0 2px 2px 0; border-right: 1px solid #339; @@ -1308,6 +1333,10 @@ code, tt { text-align: left !important; } +.trackerconfig tr:nth-child(2) td { + padding-top: 15px !important; +} + .trackerconfig td:first-child { text-align: right !important; } @@ -1444,4 +1473,8 @@ input[type="submit"] { font-size: 12pt; padding: 3px 15px; } -} \ No newline at end of file + +.snarkTorrentDownloaded { + white-space: nowrap; +} +} diff --git a/installer/resources/themes/snark/midnight/snark.css b/installer/resources/themes/snark/midnight/snark.css index ea5e8727b5..f73fb23dc8 100644 --- a/installer/resources/themes/snark/midnight/snark.css +++ b/installer/resources/themes/snark/midnight/snark.css @@ -28,12 +28,12 @@ body.iframed { /* preload top navigation mouseovers */ body.iframed { background: url(/themes/console/images/transparent.gif), - url(images/button_snark_hover.png) center 50px no-repeat, - url(images/button_snark_active.png) center 50px no-repeat, - url(images/button_tracker_hover.png) center 50px no-repeat, - url(images/button_tracker_active.png) center 50px no-repeat, - url(images/button_forum_hover.png) center 50px no-repeat, - url(images/button_forum_active.png) center 50px no-repeat, #000 !important; + url(images/button_snark_hover.png) center center no-repeat, + url(images/button_snark_active.png) center center no-repeat, + url(images/button_tracker_hover.png) center center no-repeat, + url(images/button_tracker_active.png) center center no-repeat, + url(images/button_forum_hover.png) center center no-repeat, + url(images/button_forum_active.png) center center no-repeat, #000 !important; background-size: 100% 100%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } @@ -1262,6 +1262,7 @@ a img:hover { input[type="checkbox"], .optbox, input[type="radio"] { + background: none; min-width: 16px !important; min-height: 16px !important; filter: invert(100%) sepia(100%) hue-rotate(200deg) saturate(200%); /* colorize radios and checkboxes */ @@ -1338,6 +1339,7 @@ input[name="nofilter_dataDir"] { padding: 4px !important; cursor: text; resize: none; + overflow: hidden; } thead img, @@ -1397,7 +1399,9 @@ select { border-bottom-color: #14144f; border-right-color: #14144f; border-radius: 2px; - background: #000 !important; + background: #000 url(images/dropdown.png) right center no-repeat !important; + -moz-appearance: none; + -webkit-appearance: none; } select:hover, @@ -1411,10 +1415,8 @@ select:hover { box-shadow: inset 0 1px 1px 0 #c9ceff; } - select option { font-size: 9.5pt; - /* dropdown menu reverts to normal font-weight */ font-weight: normal; } @@ -1422,17 +1424,9 @@ select option:hover, select option:checked { box-shadow: inset 20px 20px #652787; } -/* target firefox and derivatives only */ -@-moz-document url-prefix() { -select { - background: #000 url(images/dropdown.png) right center no-repeat !important; - -moz-appearance: none; -} - 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; @@ -1598,6 +1592,10 @@ img.thumb { min-width: 50px; } +.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 { padding-left: 10px !important; @@ -1616,8 +1614,7 @@ img.thumb { .snarkTorrentNoneLoaded td { color: #c9ceff !important; - border-right: 1px solid #050044; - border-left: 1px solid #050044; + padding: 10px; background: #001; } @@ -1934,7 +1931,7 @@ label.toggleview, /* responsive layout */ @media screen and (min-width: 1400px) { -code, textarea, .snarkMessages li, input { +code, textarea, .snarkMessages li, input, tt { font-size: 9pt !important; } @@ -1946,6 +1943,10 @@ thead th, tfoot th, td, select, select option, .snarkAddInfo { font-size: 10.5pt !important; } +.snarkRefresh:link:first-child { + padding-left: 13px !important; +} + .snarkConfigTitle, .toggleview { font-size: 12.5pt !important; padding: 4px 25px 5px 22px; @@ -1962,4 +1963,8 @@ thead th, tfoot th, td, select, select option, .snarkAddInfo { select:nth-child(2) { margin-left: -14px !important; } + +.snarkTorrentDownloaded { + white-space: nowrap; +} } diff --git a/installer/resources/themes/snark/ubergine/snark.css b/installer/resources/themes/snark/ubergine/snark.css index 2f76bbbe20..10f31ae568 100644 --- a/installer/resources/themes/snark/ubergine/snark.css +++ b/installer/resources/themes/snark/ubergine/snark.css @@ -34,6 +34,7 @@ body.iframed { text-align: center; opacity: 1; filter: drop-shadow(0 0 1px #000); + -webkit-filter: drop-shadow(0 0 1px #000); } .iframed .page { @@ -43,19 +44,22 @@ body.iframed { box-shadow: none; padding: 0 0; filter: none; + -webkit-filter: none; } -/* -.snarkTitle { - font-size: 12pt; - font-weight: bold; - text-align: center; +::selection { + background: #404 !important; + color: white; +} + +::-moz-selection { + background: #404 !important; + color: white; } -*/ .snarknavbar { margin: -10px 0 10px 0 !important; - padding: 14px 10px; + padding: 15px 10px 13px; border: 1px solid #101; border-radius: 0 0 4px 4px; box-shadow: inset 0 0 3px 1px #212; @@ -65,7 +69,6 @@ body.iframed { background: linear-gradient(to bottom, #522852 0%, #4a2449 11%, #321831 33%, #281428 50%, #1c0e1c 51%, #101 52%, #101 100%); text-transform: uppercase !important; font-weight: bold; - font-size: 11.5pt; color: #001; min-width: 600px; width: 70%; @@ -84,28 +87,6 @@ body.iframed { box-shadow: inset 0 0 1px 0 #ffeffd; } -@media screen and (-webkit-min-device-pixel-ratio:0) { -.snarknavbar { - padding-top: 13px !important; - padding-bottom: 14px; -} - -.iframed .snarknavbar { - padding-top: 12px !important; - padding-bottom: 13px !important; - background: linear-gradient(to bottom, #522852 0%, #4a2449 11%, #321831 33%, #281428 52%, #1c0e1c 52%, #101 52%, #101 100%); -} -} - -.snarknavbar img { - border: 0; - margin-right: -8px; - margin-left: -2px; - padding: 0 !important; - vertical-align: middle; - filter: none; -} - .snarkRefresh:link,.snarkRefresh:visited { text-decoration: none !important; text-transform: uppercase !important; @@ -113,8 +94,9 @@ body.iframed { padding: 5px 12px 5px !important; margin-right: -4px !important; letter-spacing: 0.11em; + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif; font-weight: bold; - font-size: 9pt; + font-size: 10pt; color: #f70; background: #310 url(images/snarknav_on.png) repeat-x scroll center center; background: linear-gradient(to bottom, #a68058 1%, #7a6045 27%, #5e4730 50%, #2e1700 51%, #241300 75%, #0d0600 100%); @@ -131,8 +113,14 @@ body.iframed { border: 1px solid #820b64; } -.snarkRefresh img { - -webkit-filter: none !important; +.snarknavbar img { + border: 0; + margin-right: -6px; + margin-left: -2px; + padding: 0 !important; + vertical-align: middle; + filter: none; + -webkit-filter: none; } .snarkRefresh:hover img, .snarkRefresh:focus img { @@ -161,15 +149,21 @@ body.iframed { border-radius: 2px 0 0 2px; } +@media screen and (-webkit-min-device-pixel-ratio:0) { +.snarkRefresh img { + margin: 0 -4px 0 -5px; +} +} + .snarkRefresh:last-child[href="/i2psnark/"] { border-radius: 2px; - margin: -3px 0 -4px !important; + margin: -5px 0 -4px !important; padding: 4px 12px 3px !important; display: inline-block; } .snarkMessages { - font: bold 8pt "Lucida Console", "DejaVu Sans Mono", Courier, mono !important; + font: bold 8pt "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, mono !important; text-align: left; margin: 0 0 10px 0; padding: 3px 5px; @@ -256,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, mono !important; padding: 0; text-align: left !important; height: 8px; @@ -466,8 +460,10 @@ tfoot tr:nth-child(n+1) { } .snarkTorrents tt { + font-family: "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, mono color: #cc0; margin-left: 2px; + font-weight: bold; } td { @@ -502,10 +498,12 @@ td:first-child { vertical-align: middle; } +/* .snarkTorrentName[onclick^="document.location"]:hover, .snarkTorrentName[onclick^="document.location"]:hover a { cursor: pointer; color: #f90 !important; } +*/ .snarkTorrentAction { padding: 1px 1px 1px 1px !important; @@ -517,11 +515,15 @@ td:first-child { .snarkTorrents th:last-child { white-space: nowrap !important; + text-align: center; + padding-right: 4px; + width: 40px; } .snarkTorrents th:last-child input[type="image"] { padding: 0; margin: 0; + max-width: 32px; } .snarkTorrents th:last-child br { /* prevent button wrapping */ @@ -539,6 +541,7 @@ td:first-child { } .snarkTorrentNoneLoaded { + padding: 10px; background: #323; font-size: 8.5pt; font-weight: bold; @@ -551,7 +554,6 @@ td:first-child { line-height: 110%; /* min-width: 75px;*/ text-align: left !important; - font-size: 7.5pt !important; } .snarkTorrentStatus img { @@ -572,9 +574,7 @@ a img[src$="details.png"]:hover, a:focus img[src$="details.png"] { font-weight: bold; padding: 0 3px; line-height: 100%; - font-variant: all-small-caps; /* scale down KB/MB (firefox only) */ - word-spacing: -0.15em; - font-variant-numeric: tabular-nums; + word-spacing: -0.4em; } .snarkTorrentDownloaded { @@ -637,18 +637,16 @@ a img[src$="details.png"]:hover, a:focus img[src$="details.png"] { } .snarkTorrentEven + .snarkTorrentEven td:nth-child(2) tt, .snarkTorrentOdd + .snarkTorrentOdd td:nth-child(2) tt { - margin-left: -2px; + margin-left: -12px; color: #cc0; } .snarkTorrentEven + .snarkTorrentEven td:nth-child(4), .snarkTorrentOdd + .snarkTorrentOdd td:nth-child(4) { text-align: center !important; - font-variant: all-small-caps; } .snarkTorrentEven + .snarkTorrentEven td:nth-child(n+5), .snarkTorrentOdd + .snarkTorrentOdd td:nth-child(n+5) { text-align: right !important; - font-variant: all-small-caps !important; } table.snarkTorrents tbody tr:hover, table.snarkDirInfo tbody tr:hover { @@ -824,6 +822,12 @@ table.snarkDirInfo { color: #00f000 !important; } +.choked, .unchoked { + font-weight: bold; + font-style: italic; + word-spacing: -0.4em; +} + .thumb { max-width: 16px; transition: ease-out all 0.3s 0s; @@ -857,18 +861,31 @@ table#trackerselect { } #trackerselect td:nth-child(2), #trackerselect td:nth-child(3) { - max-width: 50px !important; + max-width: 60px !important; } .snarkAddInfo { font-size: 8pt; line-height: 130% !important; + white-space: normal; } -.snarkConfigTitle, label.toggleview { - font-size: 10.5pt; +.snarkAddInfo::before { + content: "\1F6C8\0020"; + font-size: 12pt; +} + +.snarkAddInfo code { + background: #101; + border-radius: 2px; + color: #fbf; +} + +.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active { + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif; + font-size: 12pt; font-weight: bold; - padding: 1px 18px 2px; + padding: 3px 18px; margin: 5px 0 10px 0 !important; border: 1px solid #101; border-top: none; @@ -887,12 +904,14 @@ table#trackerselect { min-width: 200px; } -@media screen and (-webkit-min-device-pixel-ratio:0) { -.snarkConfigTitle, label.toggleview { - font-size: 12pt; -} +.snarkConfigTitle:hover, label.toggleview:hover { + background: linear-gradient(to bottom, #5f475d 0%, #4F3B4F 50%, #1f001f 50%, #1f001f 100%); + box-shadow: inset 0 0 1px #3f173f; } +.snarkConfigTitle:active, label.toggleview:active { + box-shadow: inset 1px 1px 3px 1px #0d000d; +} .snarkConfigTitle img, label.toggleview img { margin-right: -3px; margin-bottom: 1px; @@ -928,17 +947,17 @@ hr.debug { width: 100%; } -hr.debug + b { - color: #ee9; - text-transform: uppercase; -} - hr.debug:nth-child(n+7) { margin-top: -11px; margin-bottom: 2px; opacity: 0.5; } +hr.debug:last-child { + background: #101; + margin-bottom: -4px; +} + a:link { color: #f70; text-decoration: none; @@ -1099,6 +1118,7 @@ input[type=image], thead img { filter: drop-shadow(0 0 1px #000); -webkit-filter: drop-shadow(0 0 1px #000); outline: none; + max-height: 22px; } input[type=image]:hover, input[type=image]:focus { @@ -1193,6 +1213,10 @@ input[type="text"], input.r, input[name="nofilter_dataDir"] { background-size: 96px 96px; } +textarea[name="i2cpOpts"] { + overflow: hidden; +} + input[type=text]:active, input[type=text]:focus, input.r:focus, input[name="nofilter_dataDir"]:focus, textarea:focus { background: #d60; background: linear-gradient(to bottom, #d60, #c50); @@ -1212,6 +1236,7 @@ input[type="radio"], input[type="checkbox"] { min-width: 16px !important; min-height: 16px !important; vertical-align: middle; + background: none; } input[type="radio"]:hover, input[type="checkbox"]:hover, input[type="radio"]:focus, input[type="checkbox"]:focus { @@ -1226,8 +1251,14 @@ input[type=text], input.r, select { min-width: 110px; } -input[name="upBW"] + i { /* fix Russian wrapping issue */ - white-space: nowrap; +input[name="upBW"] + i { + margin-left: 3px; +} + +input[name="upBW"] + i::before { + content: "\1F6C8\0020"; + font-size: 12pt; + font-style: normal; } input.default { @@ -1366,7 +1397,7 @@ select { border-radius: 2px; border: 1px solid #000; margin: 2px; - -webkit-appearance:none; + -webkit-appearance: none; -moz-appearance: none; box-shadow: inset 1px 1px 2px 1px #101; } @@ -1381,14 +1412,14 @@ select:hover, select:focus, select:active { } select + select { - margin-left: -20px !important; + margin-left: -18px !important; } select option { background: #f50; color: #fff; font-size: 8.5pt; - font-weight: normal; + font-weight: bold; box-shadow: inset 0 0 20px 20px #f50; padding: 1px 2px 1px 1px; } @@ -1409,6 +1440,12 @@ select + select { } } +@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { +select { + padding: 4px; +} +} + textarea { background: #212 url(images/graytile.png); background-size: 96px 96px; @@ -1540,6 +1577,11 @@ img[src$="magnet.png"] { -webkit-filter: drop-shadow(0 0 1px #515); } +.configsectionpanel, .configsectionpanel td { + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif; + font-size: 10pt !important; +} + .iframed .mainsection, .iframed .newtorrentsection, .iframed .addtorrentsection, .iframed .configsection, .iframed .configsectionpanel { border-radius: 0; box-shadow: inset 0 0 1px 0 #ffeffd; @@ -1571,12 +1613,17 @@ img[src$="magnet.png"] { resize: none; height: 24px; padding: 4px 4px 2px; + overflow: hidden; } .configsectionpanel input[type="checkbox"] { margin-left: 0; } +.configsectionpanel td:first-child { + width: 200px; +} + .configsectionpanel tr:last-child { display: none; } @@ -1606,7 +1653,7 @@ code { color: #b8b; padding: 0 2px; font-weight: bold; - font-family: "Lucida Console", "DejaVu Sans Mono", Courier, mono; + font-family: "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, mono } .routerdown { @@ -1621,24 +1668,19 @@ code { .trackerconfig th:first-child { border-radius: 2px 0 0 2px; -} - -.trackerconfig th:last-child { - border-radius: 0 2px 2px 0; -} - -.trackerconfig th { - background: linear-gradient(to bottom, #313 0%, #313 50%, #212 51%, #101 100%); -} - -.trackerconfig th:first-child { + background: url(images/nuke.png) center right 6px no-repeat, linear-gradient(to bottom, #414 0%, #414 50%, #313 51%, #101 100%); border-left: 1px solid #101; } .trackerconfig th:last-child { + border-radius: 0 2px 2px 0; border-right: 1px solid #101; } +.trackerconfig th { + background: linear-gradient(to bottom, #414 0%, #414 50%, #313 51%, #101 100%); +} + .trackerconfig th:nth-child(n+4), .trackerconfig th:nth-child(n+5), .trackerconfig td:nth-child(n+4), .trackerconfig td:nth-child(n+5) { text-align: center !important; } @@ -1651,6 +1693,15 @@ code { text-align: right !important; } +.trackerconfig tr:nth-child(2) td { + padding-top: 15px; +} + +.trackerconfig td[colspan="7"] { + padding: 0 !important; + height: 0 !important; +} + input.trackername { width: 100px; } @@ -1732,15 +1783,31 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, .snarkFileStatus font-size: 9pt !important; } +.snarknavbar { + padding: 18px 10px 16px; +} + +.snarknavbar img { + margin-right: -8px; +} + .snarkRefresh:link { - font-size: 10pt; + font-size: 10.5pt !important; +} + +.snarkConfigTitle, label.toggleview { + font-size: 12pt; } .snarkRefresh:link:first-child { padding-left: 13px !important; } -tt, .snarkTorrents tt, code, .snarkMessages, input, input[type="submit"], input[type="reset"], select, select option, button, textarea { +.snarkTorrents tt { + font-size: 10pt; +} + +tt, code, .snarkMessages, input, input[type="submit"], input[type="reset"], select, select option, button, textarea { font-size: 9pt !important; } @@ -1750,6 +1817,6 @@ select { } select:nth-child(2) { - margin-left: -18px !important; + margin-left: -14px !important; } } diff --git a/installer/resources/themes/snark/vanilla/snark.css b/installer/resources/themes/snark/vanilla/snark.css index 59ec62d1f9..3c5989da92 100644 --- a/installer/resources/themes/snark/vanilla/snark.css +++ b/installer/resources/themes/snark/vanilla/snark.css @@ -117,6 +117,7 @@ body.iframed { padding: 5px 10px 5px 12px !important; margin: -5px -2px -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; @@ -221,7 +222,7 @@ body.iframed { } .snarkRefresh img { - margin: 0 -10px 2px -2px !important; + margin: 0 -6px 2px -2px !important; filter: sepia(65%); -webkit-filter: sepia(65%); vertical-align: middle; @@ -355,6 +356,7 @@ thead a img, thead img { opacity: 1; filter: sepia(100%) hue-rotate(340deg); -webkit-filter: sepia(100%) hue-rotate(340deg); + max-height: 22px; } thead a:hover img, thead a:focus img { @@ -510,7 +512,7 @@ tfoot tr:nth-child(n+1) { } .snarkTorrents thead th:nth-child(3) { - padding: 4px 1px; + padding: 4px 4px 4px 0 ; text-align: right; } @@ -569,10 +571,11 @@ tfoot tr:nth-child(n+1) { .snarkTorrents td:nth-child(4) { text-align: center; padding-right: 4px !important; + font-weight: bold; } .snarkTorrents td:nth-child(7) { - text-align: center; + font-weight: bold; } td { @@ -616,24 +619,26 @@ td:first-child { } .snarkTorrentAction input[type="image"], .snarkTorrents th:last-child input[type="image"] { - filter: sepia(100%) hue-rotate(340deg) drop-shadow(0 0 1px #7f6c5f); - -webkit-filter: sepia(100%) hue-rotate(340deg) drop-shadow(0 0 1px #7f6c5f); + filter: drop-shadow(0 0 1px #7f6c5f); + -webkit-filter: drop-shadow(0 0 1px #7f6c5f); border: 1px solid #4d453e; border-radius: 2px; - padding: 2px !important; + 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; vertical-align: middle; mix-blend-mode: normal; opacity: 1 !important; + max-height: 10px; } .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 { - mix-blend-mode: multiply; background: linear-gradient(to bottom, #ffeadf 0%, #ffeadf 51%, #cfb6a8 52%, #cfb6a8 100%); border: 1px solid #f60 !important; - filter: sepia(100%) hue-rotate(340deg) drop-shadow(0 0 1px #f60); - -webkit-filter: sepia(100%) hue-rotate(340deg) drop-shadow(0 0 1px #f60); + box-shadow: inset 0 0 0 1px #fff; + filter: drop-shadow(0 0 1px #f60); + -webkit-filter: drop-shadow(0 0 1px #f60); } .snarkTorrentAction input[type="image"]:active, .snarkTorrents th:last-child input[type="image"]:active { @@ -745,6 +750,7 @@ table.snarkTorrents tbody tr:hover, table.snarkDirInfo tbody tr:hover { .snarkTorrents td[colspan="4"], .snarkTorrents td[colspan="10"] { text-align: left; + word-spacing: 0.2em; } .snarkTorrents td[colspan="10"] { @@ -754,6 +760,7 @@ table.snarkTorrents tbody tr:hover, table.snarkDirInfo tbody tr:hover { .snarkTorrents td[colspan="4"] tt { margin-left: -1px; + margin: 0 2px 0 -16px; } .snarkFileIcon { @@ -915,7 +922,8 @@ th[colspan="4"] + .headerpriority { font-weight: normal; } -.snarkConfigTitle, label.toggleview { +.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle:hover { + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif; font-size: 11pt; font-weight: bold; padding: 2px 15px 2px 12px; @@ -935,6 +943,11 @@ th[colspan="4"] + .headerpriority { text-shadow: 0 0 1px #fff5ef; } +.snarkConfigTitle:hover, label.toggleview:hover { + background: #fff url('images/bling2.png') repeat-x scroll center center; + background: linear-gradient(to bottom, #ffeadf 0%, #ffeadf 51%, #cfb6a8 52%, #cfb6a8 100%); +} + @media screen and (-webkit-min-device-pixel-ratio:0) { .snarkConfigTitle, label.toggleview { font-size: 12pt; @@ -991,11 +1004,11 @@ hr.debug { } hr.debug:nth-child(n+7) { - margin: -10px 0 3px; + margin: 2px 0 3px; } -hr.debug + b { - color: #2f1500; +hr.debug:last-child { + display: none; } a:link { @@ -1019,7 +1032,7 @@ a:hover, a:focus { } a:active { - color: #ff007c; + color: #ff007c !important; } a.control, input[type="submit"], input[type="reset"] { @@ -1123,6 +1136,7 @@ input[type=radio] { padding: 2px; margin: 0 3px 0 8px; vertical-align: bottom; + background: none; } input.default { @@ -1263,6 +1277,12 @@ select option:hover, select option:checked { } } +@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { +select { + padding: 4px; +} +} + textarea, input[name="nofilter_dataDir"] { background: #efe6e0; font-weight: bold; @@ -1275,6 +1295,10 @@ textarea, input[name="nofilter_dataDir"] { width: 70%; } +textarea[name="i2cpOpts"] { + overflow: hidden; +} + textarea { resize: none; height: 26px; @@ -1437,6 +1461,11 @@ input[name^="action_"]:hover, input[name^="action_"]:focus { background-blend-mode: luminosity; } +.configsectionpanel td { + font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif; + font-size: 10pt !important; +} + .iframed .mainsection, .iframed .newtorrentsection, .iframed .addtorrentsection, .iframed .configsection, .iframed .configsectionpanel { border-radius: 0; box-shadow: inset 0 0 2px 0 #fff, 0 0 1px 0 #4f3d36; @@ -1542,6 +1571,10 @@ code, tt { text-align: right !important; } +.trackerconfig tr:nth-child(2) td { + padding-top: 10px; +} + .trackerconfig input[type="text"] { margin-left: 0; } @@ -1562,6 +1595,7 @@ code, tt { min-width: 16px !important; min-height: 16px !important; opacity: 0.8; + background: none; filter: sepia(50%) invert(80%) hue-rotate(150deg); -webkit-filter: sepia(50%) invert(80%) hue-rotate(150deg); } @@ -1659,4 +1693,9 @@ select { select:nth-child(2) { margin-left: -14px; } -} \ No newline at end of file + +.snarkTorrentDownloaded { + white-space: nowrap; +} +} +